/* ============================================================ RECLAIM THE SHAKTI WITHIN — Design System v2 Single source of truth for all pages ============================================================ */ /* ---- TOKENS ---- */ :root { --parchment: #f8f3ec; --parchment-2: #f0e9df; --earth-deep: #1c1410; --earth-temple: #2e2118; --earth-mid: #3d2c1e; --gold: #c8943a; --gold-light: #daa84e; --saffron: #d4752a; --clay: #a8724e; --umber: #2a1c10; --mist: #7a6050; --bone: #f2e8d8; --bone-dim: rgba(242,232,216,0.65); --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Jost', sans-serif; --body: 'Source Serif 4', Georgia, serif; --max: 1200px; --max-sm: 760px; --ease: cubic-bezier(.4,0,.2,1); } /* ---- RESET ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} body{background:var(--parchment);color:var(--umber);font-family:var(--body);font-size:17px;line-height:1.75;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} button{cursor:pointer;border:none;background:none;font-family:inherit} /* ---- GOOGLE FONTS ---- */ /* Add to each HTML — not duplicated here */ /* ============================================================ NAVIGATION ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:200; padding:24px 60px; display:flex;align-items:center;justify-content:space-between; transition:background .4s var(--ease), padding .3s var(--ease), backdrop-filter .4s; } .nav.scrolled{ background:rgba(28,20,16,.94); backdrop-filter:blur(10px); padding:14px 60px; } .nav-logo{ font-family:var(--serif);font-size:15px;font-weight:400; letter-spacing:.14em;text-transform:uppercase; color:var(--bone);line-height:1.35; } .nav-logo em{ display:block;font-style:italic;font-size:11px; letter-spacing:.22em;opacity:.55;font-weight:300;margin-top:1px; } .nav-links{ display:flex;align-items:center;gap:38px; } .nav-links > li{position:relative} .nav-links a{ font-family:var(--sans);font-size:12px;font-weight:400; letter-spacing:.12em;text-transform:uppercase; color:rgba(242,232,216,.75); transition:color .2s; } .nav-links a:hover,.nav-links .active > a{color:var(--gold)} /* Dropdown */ .nav-dropdown{ position:absolute;top:calc(100% + 14px);left:50%; transform:translateX(-50%); background:var(--earth-temple); border:1px solid rgba(200,148,58,.18); border-radius:3px; padding:10px 0; min-width:200px; opacity:0;visibility:hidden; transform:translateX(-50%) translateY(-8px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; } .nav-dropdown::before{ content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%); border:6px solid transparent;border-bottom-color:rgba(200,148,58,.18); border-top:none; } .has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0); } .nav-dropdown a{ display:block;padding:10px 22px; font-family:var(--sans);font-size:11px;font-weight:400; letter-spacing:.12em;text-transform:uppercase; color:rgba(242,232,216,.65); transition:color .2s, background .2s; } .nav-dropdown a:hover{color:var(--gold);background:rgba(200,148,58,.06)} /* CTA button */ .nav-cta{ font-family:var(--sans);font-size:11px;font-weight:400; letter-spacing:.15em;text-transform:uppercase; color:var(--gold);border:1px solid var(--gold); padding:10px 22px;border-radius:2px; transition:background .25s, color .25s; } .nav-cta:hover{background:var(--gold);color:var(--earth-deep)} /* Mobile hamburger */ .nav-toggle{ display:none;flex-direction:column;gap:5px;padding:4px; cursor:pointer; } .nav-toggle span{ display:block;width:24px;height:1px; background:var(--bone);transition:transform .3s, opacity .3s; } .nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* Mobile menu */ .nav-mobile{ display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:190; background:var(--earth-deep); flex-direction:column;align-items:center;justify-content:center;gap:8px; opacity:0;transition:opacity .3s; } .nav-mobile.open{display:flex;opacity:1} .nav-mobile a{ font-family:var(--serif);font-size:clamp(26px,5vw,38px);font-weight:300; color:var(--bone);letter-spacing:.08em;padding:10px 0; transition:color .2s; } .nav-mobile a:hover{color:var(--gold)} .nav-mobile .nav-mobile-sub{ display:flex;flex-direction:column;align-items:center;gap:4px; border-top:1px solid rgba(200,148,58,.15); padding-top:16px;margin-top:8px;width:100%; } .nav-mobile .nav-mobile-sub a{ font-size:clamp(16px,3vw,20px);color:rgba(242,232,216,.55); } .nav-mobile .nav-mobile-sub-label{ font-family:var(--serif);font-size:clamp(26px,5vw,38px);font-weight:300; letter-spacing:.08em;color:var(--gold);opacity:.75;padding:10px 0 4px; } /* ============================================================ FOOTER ============================================================ */ .footer{ background:var(--earth-deep); padding:72px 0 40px; border-top:1px solid rgba(200,148,58,.1); } .footer-inner{ max-width:var(--max);margin:0 auto;padding:0 60px; display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px; margin-bottom:52px; } .footer-brand-name{ font-family:var(--serif);font-size:17px;font-weight:400; letter-spacing:.12em;text-transform:uppercase;color:var(--bone); margin-bottom:14px;line-height:1.4; } .footer-brand-name em{ display:block;font-style:italic;font-size:12px; opacity:.5;letter-spacing:.2em;font-weight:300;margin-top:2px; } .footer-tagline{ font-family:var(--serif);font-style:italic;font-size:15px; color:rgba(242,232,216,.4);line-height:1.65;max-width:280px; } .footer-col-title{ font-family:var(--sans);font-size:10px;letter-spacing:.28em; text-transform:uppercase;color:var(--gold);margin-bottom:20px;opacity:.8; } .footer-links{display:flex;flex-direction:column;gap:11px} .footer-links a{ font-size:14px;color:rgba(242,232,216,.45); font-family:var(--body);transition:color .2s; } .footer-links a:hover{color:rgba(242,232,216,.85)} .footer-bottom{ max-width:var(--max);margin:0 auto; padding:24px 60px 0; border-top:1px solid rgba(200,148,58,.07); display:flex;justify-content:space-between;align-items:center; } .footer-copy{ font-family:var(--sans);font-size:11px; color:rgba(242,232,216,.22);letter-spacing:.07em; } /* ============================================================ SHARED COMPONENTS ============================================================ */ /* Section label (eyebrow) */ .label{ font-family:var(--sans);font-size:11px;font-weight:400; letter-spacing:.28em;text-transform:uppercase; color:var(--clay); display:flex;align-items:center;gap:14px;margin-bottom:36px; } .label::before{ content:'';display:block;width:32px;height:1px;background:var(--clay); flex-shrink:0; } .label.light{color:var(--gold);opacity:.8} .label.light::before{background:var(--gold)} /* Gold rule */ .gold-rule{ width:48px;height:1px;background:var(--gold); margin:0 auto;opacity:.6; } .gold-rule.left{margin:0} /* Buttons */ .btn-primary{ display:inline-block; font-family:var(--sans);font-size:12px;font-weight:500; letter-spacing:.18em;text-transform:uppercase; color:var(--earth-deep);background:var(--gold); padding:15px 38px;border-radius:2px; transition:background .25s, transform .2s; } .btn-primary:hover{background:var(--gold-light);transform:translateY(-2px)} .btn-outline{ display:inline-block; font-family:var(--sans);font-size:12px;font-weight:400; letter-spacing:.18em;text-transform:uppercase; color:var(--gold);border:1px solid var(--gold); padding:14px 36px;border-radius:2px; transition:background .25s, color .25s; } .btn-outline:hover{background:var(--gold);color:var(--earth-deep)} .btn-ghost{ display:inline-flex;align-items:center;gap:10px; font-family:var(--sans);font-size:12px;font-weight:400; letter-spacing:.18em;text-transform:uppercase; color:var(--umber);border-bottom:1px solid var(--gold);padding-bottom:3px; transition:color .2s, gap .3s; } .btn-ghost:hover{color:var(--gold);gap:16px} .btn-ghost-light{ display:inline-flex;align-items:center;gap:10px; font-family:var(--sans);font-size:12px;font-weight:400; letter-spacing:.18em;text-transform:uppercase; color:var(--bone-dim);border-bottom:1px solid rgba(200,148,58,.4);padding-bottom:3px; transition:color .2s, gap .3s; } .btn-ghost-light:hover{color:var(--gold);gap:16px} /* Image placeholders */ .img-placeholder{ width:100%;background:linear-gradient(145deg,var(--earth-temple) 0%,var(--earth-mid) 60%,var(--earth-temple) 100%); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;border-radius:2px; position:relative;overflow:hidden; } .img-placeholder::after{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse at 40% 40%,rgba(200,148,58,.06) 0%,transparent 60%); } .img-placeholder-label{ font-family:var(--sans);font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:rgba(200,148,58,.35); position:relative;z-index:1; } .img-placeholder-icon{ font-size:20px;opacity:.2;position:relative;z-index:1; } /* Pull quote */ .pull-quote{ font-family:var(--serif);font-size:clamp(22px,2.8vw,34px); font-style:italic;font-weight:300;line-height:1.3; color:var(--umber);letter-spacing:.01em; border-left:2px solid var(--gold);padding-left:28px; } .pull-quote.light{color:var(--bone);border-left-color:var(--gold)} /* Ornament */ .ornament{ font-family:var(--serif);font-size:28px; color:var(--gold);opacity:.35;letter-spacing:.3em; text-align:center; } /* ============================================================ SECTION: HERO (shared base) ============================================================ */ .hero{ position:relative;min-height:100vh; display:flex;align-items:center;justify-content:center; background:var(--earth-deep);overflow:hidden; padding:120px 40px 80px; } .hero-bg-gradient{ position:absolute;inset:0; background:radial-gradient(ellipse at 30% 60%,rgba(200,148,58,.07) 0%,transparent 55%), radial-gradient(ellipse at 70% 30%,rgba(168,114,78,.05) 0%,transparent 50%), linear-gradient(160deg,#0f0c09 0%,#1c1410 40%,#2e2118 70%,#1a130e 100%); } .hero-content{ position:relative;z-index:2;text-align:center;max-width:900px;width:100%; } .hero-eyebrow{ font-family:var(--sans);font-size:11px;font-weight:400; letter-spacing:.32em;text-transform:uppercase;color:var(--gold); margin-bottom:28px;opacity:.85; } .hero-title{ font-family:var(--serif);font-weight:300; font-size:clamp(54px,7.5vw,100px);line-height:1.02; letter-spacing:.02em;color:var(--bone);margin-bottom:10px; } .hero-title em{font-style:italic;color:var(--gold)} .hero-tagline{ font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(18px,2.4vw,26px);color:var(--bone-dim); margin-bottom:52px;letter-spacing:.02em; } .hero-line{ width:54px;height:1px;background:var(--gold);margin:0 auto 40px;opacity:.55; } .hero-scroll{ position:absolute;bottom:36px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.4; } .hero-scroll-bar{ width:1px;height:48px; background:linear-gradient(to bottom,transparent,var(--gold)); animation:scrollbar 2s ease-in-out infinite; } @keyframes scrollbar{ 0%,100%{transform:scaleY(.4);opacity:.3} 50%{transform:scaleY(1);opacity:.9} } /* Page-specific heroes */ .hero-left .hero-content{text-align:left;max-width:700px;} .hero-left .hero-line{margin:0 0 40px} .hero-left .ornament{text-align:left} .hero-sm{min-height:55vh;padding:140px 60px 80px} /* ============================================================ SECTION: MIRROR (light, pain point) ============================================================ */ .mirror{background:var(--parchment);padding:110px 0} .mirror-inner{max-width:720px;margin:0 auto;padding:0 40px} .mirror-pull{ font-family:var(--serif);font-size:clamp(30px,4vw,48px); font-weight:300;font-style:italic;line-height:1.2; color:var(--umber);margin-bottom:36px;letter-spacing:.01em; } .mirror-body{ font-size:18px;line-height:1.85;color:var(--umber); font-weight:300;margin-bottom:26px; } .mirror-pivot{ font-family:var(--serif);font-size:clamp(20px,2.5vw,28px); font-style:italic;font-weight:300;line-height:1.4; color:var(--umber);border-left:2px solid var(--gold); padding-left:26px;margin-top:48px;letter-spacing:.01em; } /* ============================================================ SECTION: TRANSMISSION (dark, "Heal So...") ============================================================ */ .transmission{ background:var(--earth-deep);padding:120px 0;position:relative;overflow:hidden; } .transmission::before,.transmission::after{ content:'';position:absolute;left:0;right:0;height:1px; background:linear-gradient(to right,transparent,rgba(200,148,58,.35),transparent); } .transmission::before{top:0} .transmission::after{bottom:0} .transmission-inner{ max-width:800px;margin:0 auto;padding:0 60px;text-align:center; } .transmission-intro{ font-family:var(--sans);font-size:11px;letter-spacing:.3em; text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:56px; } .t-lines{display:flex;flex-direction:column;gap:26px} .t-line{ font-family:var(--serif);font-size:clamp(19px,2.6vw,28px); font-weight:300;line-height:1.45;color:var(--bone); letter-spacing:.01em; opacity:0;transform:translateY(14px); transition:opacity .8s var(--ease),transform .8s var(--ease); } .t-line.visible{opacity:1;transform:translateY(0)} .t-line em{font-style:italic;color:var(--gold)} .t-line strong{font-weight:500} .t-final{ font-family:var(--serif);font-size:clamp(22px,3vw,36px); font-weight:500;font-style:italic;color:var(--gold); margin-top:56px;line-height:1.3; opacity:0;transition:opacity 1.2s var(--ease) .4s; } .t-final.visible{opacity:1} /* ============================================================ SECTION: PHILOSOPHY (light, framework) ============================================================ */ .philosophy{background:var(--parchment-2);padding:110px 0} .philosophy-inner{max-width:var(--max);margin:0 auto;padding:0 60px} .philosophy-grid{ display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start; margin-top:52px; } .philosophy-lead{ font-family:var(--serif);font-size:clamp(30px,4vw,46px); font-weight:300;font-style:italic;line-height:1.2; color:var(--umber);letter-spacing:.01em; } .philosophy-body{ font-size:17px;line-height:1.85;color:var(--umber); font-weight:300;margin-bottom:24px; } .philosophy-stages{ display:flex;flex-direction:column;gap:0; margin-top:8px; } .philosophy-stage{ display:flex;gap:20px;padding:18px 0; border-bottom:1px solid rgba(200,148,58,.15); } .philosophy-stage:first-child{padding-top:0} .stage-num{ font-family:var(--serif);font-size:28px;font-style:italic; color:var(--gold);line-height:1;min-width:28px;padding-top:3px;opacity:.7; } .stage-text strong{ display:block;font-family:var(--sans);font-size:11px; letter-spacing:.12em;text-transform:uppercase; color:var(--umber);margin-bottom:3px; } .stage-text span{font-size:15px;color:var(--mist);line-height:1.6} /* ============================================================ SECTION: OFFERING PREVIEW (asymmetric grid) ============================================================ */ .offering-preview{background:var(--parchment);padding:110px 0} .offering-inner{ max-width:var(--max);margin:0 auto;padding:0 60px; display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center; } .offering-inner.reverse{direction:rtl} .offering-inner.reverse > *{direction:ltr} .offering-img{position:relative;order:-1} .offering-img-frame{ width:100%;aspect-ratio:3/4;position:relative; } .offering-img-accent{ position:absolute;top:-18px;left:-18px;width:100px;height:100px; border:1px solid rgba(200,148,58,.2);border-radius:50%;pointer-events:none; } .offering-content{} .offering-title{ font-family:var(--serif);font-size:clamp(34px,4vw,56px); font-weight:300;line-height:1.1;color:var(--umber); margin-bottom:10px;letter-spacing:.01em; } .offering-title em{font-style:italic;display:block;color:var(--saffron)} .offering-subtitle{ font-family:var(--serif);font-size:18px;font-style:italic; font-weight:300;color:var(--mist);margin-bottom:30px;line-height:1.5; } .offering-body{ font-size:17px;line-height:1.85;color:var(--umber); font-weight:300;margin-bottom:36px; } .offering-pillars{display:flex;flex-direction:column;gap:18px;margin-bottom:42px} .pillar{display:flex;gap:14px;align-items:flex-start} .pillar-n{ font-family:var(--serif);font-size:22px;font-style:italic; color:var(--gold);min-width:22px;line-height:1;padding-top:3px;opacity:.7; } .pillar-text strong{ display:block;font-family:var(--sans);font-size:11px; letter-spacing:.1em;text-transform:uppercase; margin-bottom:2px;color:var(--umber); } .pillar-text span{font-size:15px;color:var(--mist);line-height:1.6} /* ============================================================ SECTION: GUIDE (about snippet, warm) ============================================================ */ .guide-section{background:var(--parchment-2);padding:100px 0} .guide-inner{ max-width:var(--max);margin:0 auto;padding:0 60px; display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center; } .guide-img{aspect-ratio:4/5;position:relative;order:-1} .guide-title{ font-family:var(--serif);font-size:clamp(28px,3.5vw,46px); font-weight:300;font-style:italic;line-height:1.2; color:var(--umber);margin-bottom:24px; } .guide-body{ font-size:17px;line-height:1.85;color:var(--umber); font-weight:300;margin-bottom:18px; } .guide-tags{ display:flex;gap:10px;flex-wrap:wrap;margin-top:28px; } .tag{ font-family:var(--sans);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--mist); background:rgba(200,148,58,.07);border:1px solid rgba(200,148,58,.18); padding:6px 14px;border-radius:20px; } /* ============================================================ SECTION: INVITATION (lead magnet, dark) ============================================================ */ .invitation{background:var(--earth-temple);padding:100px 0;position:relative;overflow:hidden} .invitation-glow{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:700px;height:350px; background:radial-gradient(ellipse,rgba(200,148,58,.06) 0%,transparent 70%); pointer-events:none; } .invitation-inner{ max-width:640px;margin:0 auto;padding:0 40px;text-align:center;position:relative; } .invitation-title{ font-family:var(--serif);font-size:clamp(28px,3.5vw,44px); font-weight:300;font-style:italic;line-height:1.25; color:var(--bone);margin-bottom:18px; } .invitation-body{ font-size:16px;line-height:1.8;color:var(--bone-dim); font-weight:300;margin-bottom:40px; } .invitation-form{ display:flex;flex-direction:column;gap:10px;max-width:720px;margin:0 auto; } /* Kit form overrides */ .invitation-form .formkit-form{background:transparent !important;border:none !important;padding:0 !important;max-width:100% !important;} .invitation-form .formkit-fields{gap:10px;} .invitation-form .formkit-input{ background:rgba(242,232,216,.05) !important; border:1px solid rgba(200,148,58,.3) !important; border-radius:2px !important; padding:14px 18px !important; font-family:var(--sans) !important;font-size:15px !important; color:var(--bone) !important;outline:none !important; } .invitation-form .formkit-input::placeholder{color:rgba(242,232,216,.45) !important;} .invitation-form .formkit-fields{flex-wrap:nowrap !important;align-items:stretch;} .invitation-form .formkit-field{flex:1 1 auto !important;margin:0 !important;} .invitation-form .formkit-submit{ background-color:var(--gold) !important; border-radius:2px !important; font-family:var(--sans) !important;font-size:11px !important; font-weight:500 !important;letter-spacing:.18em !important;text-transform:uppercase !important; padding:0 !important;flex:0 0 auto !important;margin:0 !important;white-space:nowrap; } .invitation-form .formkit-submit > span{padding:14px 28px !important;} .invitation-form .formkit-submit:hover > span{background-color:rgba(0,0,0,.15) !important;} .invitation-form .formkit-powered-by-convertkit-container{justify-content:center;opacity:.35;} .invitation-form .formkit-alert-error{background:rgba(242,100,59,.1);border-color:rgba(242,100,59,.4);color:var(--bone);font-size:14px;} .form-input{ background:rgba(242,232,216,.05);border:1px solid rgba(200,148,58,.22); border-radius:2px;padding:14px 18px; font-family:var(--body);font-size:15px;color:var(--bone);outline:none; transition:border-color .2s;width:100%; } .form-input::placeholder{color:rgba(242,232,216,.28)} .form-input:focus{border-color:var(--gold)} .form-btn{ background:var(--gold);color:var(--earth-deep);border:none; padding:14px 28px;font-family:var(--sans);font-size:12px; font-weight:500;letter-spacing:.15em;text-transform:uppercase; cursor:pointer;border-radius:2px; transition:background .2s,transform .2s;margin-top:4px; } .form-btn:hover{background:var(--gold-light);transform:translateY(-1px)} .form-note{ font-family:var(--sans);font-size:11px; color:rgba(242,232,216,.28);letter-spacing:.06em;margin-top:4px; } /* ============================================================ SECTION: WRITINGS PREVIEW (light, blog grid) ============================================================ */ .writings-section{background:var(--parchment);padding:110px 0} .writings-inner{max-width:var(--max);margin:0 auto;padding:0 60px} .writings-header{ display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px; } .writings-hed{ font-family:var(--serif);font-size:clamp(32px,4vw,52px); font-weight:300;line-height:1.1;color:var(--umber); } .writings-sub{ font-family:var(--serif);font-style:italic;font-size:16px; color:var(--mist);margin-top:6px; } .writings-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:36px; } .post-card{cursor:pointer} .post-card-img{ width:100%;aspect-ratio:16/10;margin-bottom:20px; border-radius:1px;overflow:hidden;position:relative; } .post-card-img-inner{ width:100%;height:100%; display:flex;align-items:center;justify-content:center; transition:transform .5s var(--ease); } .post-card:hover .post-card-img-inner{transform:scale(1.04)} .pci-1{background:linear-gradient(135deg,#2e2118,#1c1410 60%,#3d2c1e)} .pci-2{background:linear-gradient(135deg,#3a2015,#2a1812 60%,#4a2d1e)} .pci-3{background:linear-gradient(135deg,#1a2030,#0d1520 60%,#2a3040)} .post-cat{ font-family:var(--sans);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--saffron);margin-bottom:8px; } .post-title{ font-family:var(--serif);font-size:22px;font-weight:400; line-height:1.25;color:var(--umber);margin-bottom:10px; } .post-excerpt{ font-size:15px;line-height:1.7;color:var(--mist); font-weight:300;margin-bottom:12px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } /* ============================================================ SECTION: FINAL CTA (dark) ============================================================ */ .final-cta{ background:var(--earth-temple);padding:130px 0;text-align:center; position:relative;overflow:hidden; } .final-cta::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(to right,transparent,rgba(200,148,58,.3),transparent); } .final-cta-glow{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:700px;height:400px; background:radial-gradient(ellipse,rgba(200,148,58,.05) 0%,transparent 60%); pointer-events:none; } .final-cta-inner{max-width:660px;margin:0 auto;padding:0 40px;position:relative} .final-cta-title{ font-family:var(--serif);font-size:clamp(34px,5vw,62px); font-weight:300;font-style:italic;line-height:1.15; color:var(--bone);margin-bottom:22px; } .final-cta-sub{ font-family:var(--serif);font-style:italic;font-size:17px; color:var(--bone-dim);margin-bottom:48px;line-height:1.8;font-weight:300; } .final-cta-note{ font-family:var(--sans);font-size:11px; color:rgba(242,232,216,.25);letter-spacing:.1em;margin-top:16px; } /* ============================================================ SECTION: 5-STAGE JOURNEY ============================================================ */ .journey{background:var(--parchment);padding:110px 0} .journey-inner{max-width:var(--max);margin:0 auto;padding:0 60px} .journey-stages{ display:grid;grid-template-columns:repeat(5,1fr);gap:2px; margin-top:60px; } .journey-stage{ background:var(--parchment-2);padding:36px 28px; position:relative; border-top:2px solid transparent; transition:border-color .3s; } .journey-stage:hover{border-top-color:var(--gold)} .journey-stage-num{ font-family:var(--serif);font-size:54px;font-style:italic; color:rgba(200,148,58,.15);line-height:1;margin-bottom:16px; font-weight:300; } .journey-stage-name{ font-family:var(--sans);font-size:11px;letter-spacing:.15em; text-transform:uppercase;color:var(--gold);margin-bottom:14px; } .journey-stage-text{ font-size:15px;line-height:1.7;color:var(--mist);font-weight:300; } /* ============================================================ SECTION: TRUTH (dark, "Most Unnerving Truth") ============================================================ */ .truth{ background:var(--earth-deep);padding:110px 0; position:relative;overflow:hidden; } .truth::before,.truth::after{ content:'';position:absolute;left:0;right:0;height:1px; background:linear-gradient(to right,transparent,rgba(200,148,58,.25),transparent); } .truth::before{top:0}.truth::after{bottom:0} .truth-inner{max-width:760px;margin:0 auto;padding:0 60px;text-align:center} .truth-title{ font-family:var(--serif);font-size:clamp(32px,4vw,52px); font-weight:300;font-style:italic;color:var(--bone); margin-bottom:36px;line-height:1.15; } .truth-body{ font-size:17px;line-height:1.9;color:var(--bone-dim); font-weight:300;margin-bottom:22px; } .truth-body em{font-style:italic;color:var(--bone)} .truth-statement{ font-family:var(--serif);font-size:clamp(18px,2.2vw,24px); font-style:italic;color:var(--gold); margin:36px 0;line-height:1.5; } /* ============================================================ SECTION: TESTIMONIALS ============================================================ */ .testimonials{background:var(--parchment-2);padding:100px 0} .testimonials-inner{max-width:var(--max);margin:0 auto;padding:0 60px} .testimonials-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px; } .testimonial{ padding:36px;background:var(--parchment);border-radius:2px; border-bottom:2px solid rgba(200,148,58,.15); } .testimonial-text{ font-family:var(--serif);font-size:17px;font-style:italic; line-height:1.75;color:var(--umber);margin-bottom:20px;font-weight:300; } .testimonial-text::before{content:'\201C';font-size:32px;color:var(--gold);opacity:.4;display:block;line-height:.8;margin-bottom:8px} .testimonial-sig{ font-family:var(--sans);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--mist); } /* ============================================================ SECTION: FAQ ============================================================ */ .faq{background:var(--parchment);padding:100px 0} .faq-inner{max-width:760px;margin:0 auto;padding:0 60px} .faq-item{border-bottom:1px solid rgba(200,148,58,.15);padding:24px 0} .faq-q{ font-family:var(--sans);font-size:13px;font-weight:500; letter-spacing:.08em;text-transform:uppercase; color:var(--umber);margin-bottom:12px; } .faq-a{font-size:16px;line-height:1.8;color:var(--mist);font-weight:300} /* ============================================================ SECTION: PHILOSOPHY (standalone, full page) ============================================================ */ .values-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:52px; } .value-card{ padding:36px;background:var(--parchment);border-radius:2px; border-left:2px solid rgba(200,148,58,.3); } .value-num{ font-family:var(--serif);font-size:40px;font-style:italic; color:rgba(200,148,58,.2);line-height:1;margin-bottom:12px; } .value-name{ font-family:var(--sans);font-size:12px;letter-spacing:.15em; text-transform:uppercase;color:var(--gold);margin-bottom:12px; } .value-text{font-size:16px;line-height:1.8;color:var(--mist);font-weight:300} /* ============================================================ PAGE: WRITINGS (blog page) ============================================================ */ .writings-featured{ background:var(--parchment-2);padding:80px 0; } .featured-inner{ max-width:var(--max);margin:0 auto;padding:0 60px; display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center; } .featured-img{aspect-ratio:16/10;width:100%} .featured-cat{ font-family:var(--sans);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--saffron);margin-bottom:12px; } .featured-title{ font-family:var(--serif);font-size:clamp(28px,3.5vw,44px); font-weight:300;line-height:1.2;color:var(--umber);margin-bottom:16px; } .featured-excerpt{ font-size:17px;line-height:1.8;color:var(--mist);font-weight:300;margin-bottom:28px; } /* ============================================================ PAGE: BEGIN (warm landing) ============================================================ */ .begin-section{background:var(--parchment);padding:100px 0} .begin-inner{max-width:860px;margin:0 auto;padding:0 60px} .begin-title{ font-family:var(--serif);font-size:clamp(34px,4.5vw,58px); font-weight:300;font-style:italic;line-height:1.15; color:var(--umber);margin-bottom:28px; } .begin-body{ font-size:18px;line-height:1.85;color:var(--umber); font-weight:300;margin-bottom:24px; } .begin-list{ display:flex;flex-direction:column;gap:16px;margin:36px 0; } .begin-list-item{ display:flex;gap:16px;align-items:flex-start; font-size:16px;line-height:1.7;color:var(--umber);font-weight:300; } .begin-list-item::before{ content:'✦';color:var(--gold);opacity:.6;font-size:12px; flex-shrink:0;margin-top:4px; } .calendly-placeholder{ background:var(--parchment-2);border:1px solid rgba(200,148,58,.2); border-radius:4px;padding:60px 40px;text-align:center;margin-top:52px; } .calendly-placeholder p{ font-family:var(--sans);font-size:12px;letter-spacing:.15em; text-transform:uppercase;color:var(--mist); } /* ============================================================ SECTION: SUBSTACK BRIDGE ============================================================ */ .substack-bridge{ background:var(--earth-deep);padding:80px 0;text-align:center; position:relative;overflow:hidden; } .substack-bridge::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(to right,transparent,rgba(200,148,58,.25),transparent); } .substack-inner{max-width:600px;margin:0 auto;padding:0 40px;position:relative} .substack-title{ font-family:var(--serif);font-size:clamp(24px,3vw,36px); font-weight:300;font-style:italic;color:var(--bone);margin-bottom:14px; } .substack-body{ font-size:16px;color:var(--bone-dim);font-weight:300; margin-bottom:28px;line-height:1.75;font-family:var(--serif);font-style:italic; } /* ============================================================ REUSABLE CONTENT SECTIONS ============================================================ */ .content-section{padding:100px 0} .content-section.dark{background:var(--earth-deep)} .content-section.warm{background:var(--parchment-2)} .content-section.light{background:var(--parchment)} .content-inner{max-width:var(--max);margin:0 auto;padding:0 60px} .content-inner.narrow{max-width:760px} .content-inner.mid{max-width:920px} .section-title{ font-family:var(--serif);font-size:clamp(32px,4vw,52px); font-weight:300;line-height:1.15;color:var(--umber); margin-bottom:16px;letter-spacing:.01em; } .section-title.light{color:var(--bone)} .section-title em{font-style:italic;display:block;color:var(--saffron)} .section-body{ font-size:17px;line-height:1.85;color:var(--umber); font-weight:300;margin-bottom:20px; } .section-body.light{color:var(--bone-dim)} /* ============================================================ DRAFT CONTENT CALLOUT ============================================================ */ .draft-note{ background:rgba(212,117,42,.12);border:1px dashed rgba(212,117,42,.4); border-radius:3px;padding:10px 16px;margin-bottom:6px; font-family:var(--sans);font-size:11px;letter-spacing:.08em; color:var(--saffron); } .draft-note::before{content:'✎ DRAFT — '} /* ============================================================ ANIMATIONS & REVEAL ============================================================ */ .reveal{ opacity:0;transform:translateY(20px); transition:opacity .7s var(--ease),transform .7s var(--ease); } .reveal.visible{opacity:1;transform:translateY(0)} @keyframes fadeUp{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes breathe{ 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5} 50%{transform:translate(-50%,-50%) scale(1.08);opacity:.9} } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:960px){ .nav{padding:20px 28px} .nav.scrolled{padding:12px 28px} .nav-links,.nav-cta{display:none} .nav-toggle{display:flex} .hero-sm{padding:120px 28px 60px} .footer-inner{grid-template-columns:1fr;gap:36px} .footer-bottom{flex-direction:column;gap:10px;text-align:center;padding:20px 28px 0} .footer-inner,.content-inner,.writings-inner,.faq-inner,.begin-inner,.transmission-inner, .philosophy-inner,.offering-inner,.guide-inner,.testimonials-inner{padding-left:28px;padding-right:28px} .journey-stages{grid-template-columns:1fr 1fr;gap:2px} .philosophy-grid,.offering-inner,.guide-inner,.featured-inner{grid-template-columns:1fr !important} .offering-img,.guide-img{width:100%;overflow:hidden;order:1} .offering-img-frame{aspect-ratio:3/4} .guide-img{aspect-ratio:3/4} .writings-grid,.testimonials-grid,.values-grid{grid-template-columns:1fr !important} .writings-header{flex-direction:column;align-items:flex-start;gap:14px} .mirror-inner,.invitation-inner,.final-cta-inner,.substack-inner{padding:0 28px} /* Inline grid responsive overrides */ .grid-2col{grid-template-columns:1fr !important;gap:24px !important} .grid-3col{grid-template-columns:1fr !important;gap:24px !important} .story-hero-grid{grid-template-columns:1fr !important;gap:36px !important} .framework-box{padding:36px 28px !important} } @media(max-width:600px){ .journey-stages{grid-template-columns:1fr} .hero-title{font-size:46px} .transmission-inner{padding:0 24px} .t-line{font-size:18px} } /* ============================================================ NAV YANTRA LOGO ============================================================ */ .nav-logo{display:flex;align-items:center;gap:11px} .nav-yantra{ width:28px;height:28px;object-fit:contain;flex-shrink:0; opacity:.8;filter:drop-shadow(0 0 6px rgba(200,148,58,.3)); transition:opacity .3s; } .nav-logo:hover .nav-yantra{opacity:1} /* ============================================================ SCROLL PROGRESS BAR ============================================================ */ #scroll-progress{ position:fixed;top:0;left:0;height:2px;width:0%; background:linear-gradient(90deg,var(--gold),var(--saffron)); z-index:300;pointer-events:none; transition:width .08s linear; } /* ============================================================ HERO YANTRA (homepage) ============================================================ */ .hero-yantra{ position:absolute; width:min(680px,85vw);height:min(680px,85vw); top:50%;left:50%; transform:translate(-50%,-50%); opacity:.08;mix-blend-mode:screen; pointer-events:none;z-index:1; animation:yantra-breathe 12s ease-in-out infinite; } @keyframes yantra-breathe{ 0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:.08} 50%{transform:translate(-50%,-50%) scale(1.035) rotate(.4deg);opacity:.11} } /* Hero title em — gold shimmer */ .hero-title em{ background:linear-gradient(120deg,#e8b84b 0%,var(--saffron) 45%,var(--gold) 80%,#e8b84b 100%); background-size:200% auto; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; animation:shimmer-text 6s linear infinite; } @keyframes shimmer-text{ 0%{background-position:0% center} 100%{background-position:200% center} } /* ============================================================ FLOATING PARTICLES ============================================================ */ .hero-particles{ position:absolute;inset:0; pointer-events:none;z-index:1;overflow:hidden; } .particle{ position:absolute;width:2px;height:2px; border-radius:50%;background:var(--gold); opacity:0; animation:particle-float var(--dur,12s) var(--delay,0s) ease-in-out infinite; } @keyframes particle-float{ 0%{transform:translateY(100vh) translateX(var(--drift,0px));opacity:0} 10%{opacity:var(--op,.4)} 90%{opacity:var(--op,.4)} 100%{transform:translateY(var(--travel,-80vh)) translateX(calc(var(--drift,0px) * -1));opacity:0} } /* ============================================================ REVEAL VARIANTS ============================================================ */ .reveal-left{ opacity:0;transform:translateX(-28px); transition:opacity .8s var(--ease),transform .8s var(--ease); } .reveal-left.visible{opacity:1;transform:translateX(0)} .reveal-scale{ opacity:0;transform:scale(.96); transition:opacity .7s var(--ease),transform .7s var(--ease); } .reveal-scale.visible{opacity:1;transform:scale(1)} /* ============================================================ VISUAL ENHANCEMENT SYSTEM — global components ============================================================ */ /* ---- GRAIN OVERLAY (add as div inside dark sections) ---- */ .grain-overlay { position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size:200px 200px; opacity:0.045;mix-blend-mode:overlay; pointer-events:none;z-index:1; } /* ---- ORNAMENT DIVIDERS (between section transitions) ---- */ .ornament-divider { display:flex;align-items:center;justify-content:center; gap:16px;padding:8px 0; background:var(--parchment); position:relative;z-index:1; } .ornament-divider span { color:var(--gold);font-size:10px;letter-spacing:.5em; animation:ornament-pulse 4s ease-in-out infinite; } @keyframes ornament-pulse { 0%,100%{opacity:.3;text-shadow:none} 50%{opacity:.7;text-shadow:0 0 14px rgba(200,148,58,.5)} } .ornament-divider::before, .ornament-divider::after { content:'';width:80px;height:1px;background:rgba(200,148,58,.2); } .ornament-divider-dark {background:var(--earth-deep)} .ornament-divider-dark::before, .ornament-divider-dark::after {background:rgba(200,148,58,.15)} .ornament-divider-temple {background:var(--earth-temple)} .ornament-divider-temple::before, .ornament-divider-temple::after {background:rgba(200,148,58,.12)} /* ---- ATMOSPHERIC YANTRA POSITIONING CLASSES ---- */ /* Centered (for final-cta, truth, promise-band) */ .section-yantra-center { position:absolute; width:min(560px,70vw);height:min(560px,70vw); top:50%;left:50%;transform:translate(-50%,-50%); opacity:0.07;mix-blend-mode:screen; pointer-events:none;z-index:0;object-fit:contain; animation:yantra-breathe 14s ease-in-out infinite; } /* Bottom-right bleed (for transmission) */ .section-yantra-br { position:absolute; width:min(320px,40vw);height:min(320px,40vw); bottom:-40px;right:-40px; opacity:0.05;mix-blend-mode:screen; pointer-events:none;z-index:1;object-fit:contain; } /* Right bleed (for invitation, mirror) */ .section-yantra-right { position:absolute; width:min(500px,60vw);height:min(500px,60vw); top:50%;right:-80px;transform:translateY(-50%); opacity:0.06;mix-blend-mode:screen; pointer-events:none;z-index:0;object-fit:contain; } /* Left bleed (for philosophy) */ .section-yantra-left { position:absolute; width:min(400px,50vw);height:min(400px,50vw); top:50%;left:-60px;transform:translateY(-50%); opacity:0.04;mix-blend-mode:multiply; pointer-events:none;z-index:0;object-fit:contain; } /* ---- GLOW PULSE (final-cta, invitation) ---- */ @keyframes glow-pulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} } .final-cta-glow { animation:glow-pulse 5s ease-in-out infinite; } /* ---- ENHANCED POST CARD HOVER (all pages) ---- */ .post-card {position:relative;transition:transform .35s var(--ease)} .post-card:hover {transform:translateY(-7px)} .post-card::after { content:''; position:absolute;bottom:0;left:0;right:0;height:2px; background:linear-gradient(to right,transparent,rgba(200,148,58,.5),transparent); transform:scaleX(0);transform-origin:center; transition:transform .4s var(--ease); } .post-card:hover::after {transform:scaleX(1)} .post-card:hover .post-title {color:var(--gold);transition:color .3s} /* ---- GUIDE IMG: portrait glow (guide-section pages) ---- */ .guide-img {position:relative} .guide-img::after { content:'';position:absolute;inset:-2px;border-radius:2px; background:linear-gradient(160deg,rgba(200,148,58,.12) 0%,transparent 60%); pointer-events:none;z-index:1; } /* ---- STAGGER DELAY HELPERS ---- */ .delay-1{transition-delay:.1s!important} .delay-2{transition-delay:.2s!important} .delay-3{transition-delay:.3s!important} .delay-4{transition-delay:.4s!important} .delay-5{transition-delay:.5s!important}