*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* Keep restoration instant on back/forward navigation; smooth scrolling is applied only via explicit JS scrollIntoView where needed. */ html{scroll-behavior:auto;overflow-x:hidden} body{font-family:'DM Sans',sans-serif;background:#050310;color:#1A1640;overflow-x:hidden;-webkit-font-smoothing:antialiased} /* ── Mobile stability / performance (Brave iOS especially) ─────── If the homepage JS ever throws during scroll/paint, the UI can feel like it "reloads" or loses sections. Keep this conservative: reduce smooth-scroll and disable purely decorative animations/filters on small screens. */ @media (max-width: 768px), (prefers-reduced-motion: reduce) { html{scroll-behavior:auto} .sparkle{animation:none!important} .kd3-star,.kd3-f1,.kd3-f2,.kd3-f3,.kd3-f4,.kd3-f5,.kd3-kalasha,.kd3-lamp1,.kd3-lamp2,.kd3-lamp3{animation:none!important} /* iOS/WebKit can struggle with backdrop-filter during scroll */ .nk-platform-nav,.sp-topbar,.ksp-topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} } /* ── GLOBALS ───────────────────────────────────────── */ .nk-prog{position:fixed;top:0;left:0;width:0;height:2px;z-index:10000;background:linear-gradient(90deg,var(--purple),rgba(140,90,220,.6));transition:width .1s linear;pointer-events:none} .skip-nav{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;} .skip-nav:focus{position:fixed!important;top:12px!important;left:12px!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;z-index:9999!important;background:#C9A84C!important;color:#1A1640!important;padding:12px 24px!important;border-radius:999px!important;margin:0!important;} /* iOS-FIX: BUG 2 — prevent cards frozen at opacity:0 when iOS kills animations */ .sv3-card{ opacity:1!important; transform:none!important; animation:none!important; } /* iOS-FIX: BUG 3 — prevent hero elements frozen at opacity:0 when iOS kills animations */ .hero-tagline,.hero-h1,.hero-sub,.feat-grid, .hero-pills,.hero-cta-row,.hero-trust{ opacity:1!important; transform:none!important; animation:none!important; } /* MOBILE-FIX: 1 — Hide decorative hero elements (confirmed safe) */ .hero-yantra, .constellation-layer, .surya-corona, .shani-ring, .mist-1,.mist-2,.mist-3,.mist-4{ display:none!important; } /* MOBILE-FIX: 2 — Hide nebula blobs (purely decorative, confirmed) */ .nebula-1,.nebula-2,.nebula-3,.nebula-4{ display:none!important; animation:none!important; filter:none!important; } /* MOBILE-FIX: 3 — Stop all planet animations (decorative only) */ .planet-surya,.planet-chandra,.planet-shani, .planet-guru,.planet-shukra,.planet-mangal, .planet-budha,.planet-rahu,.planet-ketu, [class*="planet-"]{ animation:none!important; } /* MOBILE-FIX: 4 — Remove all backdrop-filters (36 instances, most GPU-intensive fix, will stop the iOS crash on its own) */ *{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* MOBILE-FIX: 5 — Stop all remaining animations on mobile */ [class*="kd3-"], .orb,.hero-corner, .tk2-wrap::after{ animation:none!important; } /* MOBILE-FIX: 6 — Remove GPU compositing layers from cards */ .sv3-card,.tool-card,.fk-card,.al-card{ transition:none!important; transform:none!important; will-change:auto!important; } /* MOBILE-FIX: 7 — Fix hero height for iOS toolbar */ .hero{ min-height:100vh; min-height:100dvh; overflow:hidden!important; } /* MOBILE-FIX: 8 — Stop hero corner ornaments animating */ .hero-corner{ display:none!important; } } /* ── KEYFRAMES ─────────────────────────────────────── */ @keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes floatR{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}} @keyframes breathe{0%,100%{box-shadow:0 0 80px rgba(107,95,228,.35),0 0 180px rgba(107,95,228,.15)}50%{box-shadow:0 0 130px rgba(107,95,228,.65),0 0 300px rgba(107,95,228,.28)}} @keyframes mist{0%,100%{opacity:.55;transform:scaleX(1)}50%{opacity:.75;transform:scaleX(1.04)}} @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} @keyframes typeIn{from{width:0}to{width:100%}} /* ── PLANET WOBBLE ─────────────────────────────────────── */ @keyframes wobbleSurya{ 0%,100%{transform:translateY(0) rotate(0deg) scale(1)} 20%{transform:translateY(-8px) rotate(1.2deg) scale(1.008)} 50%{transform:translateY(-14px) rotate(-0.8deg) scale(1.012)} 75%{transform:translateY(-6px) rotate(1.5deg) scale(1.005)} } @keyframes wobbleChandra{ 0%,100%{transform:translateY(0) rotate(0deg) scale(1)} 25%{transform:translateY(-10px) rotate(-1.4deg) scale(1.01)} 55%{transform:translateY(-14px) rotate(0.9deg) scale(1.014)} 80%{transform:translateY(-5px) rotate(-1.1deg) scale(1.006)} } @keyframes wobbleShani{ 0%,100%{transform:translateY(0) rotate(0deg)} 30%{transform:translateY(-7px) rotate(0.8deg)} 60%{transform:translateY(-12px) rotate(-1.2deg)} 85%{transform:translateY(-4px) rotate(0.6deg)} } @keyframes orb{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* ── YANTRA / MANDALA OVERLAY ─────────────────────── */ @keyframes yantraRot{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes yantraRotR{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}} @keyframes yantraPulse{0%,100%{opacity:.12}50%{opacity:.22}} @keyframes nebulaShift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12px,-8px) scale(1.05)}100%{transform:translate(0,0) scale(1)}} @keyframes coronaSpinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes goldShimmer{0%,100%{opacity:.55}50%{opacity:1}} @keyframes tkOrnamentBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.08)}} /* ── HERO YANTRA (Option C Cinematic) ── */ .hero-yantra{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:min(120vw,1200px);height:min(120vw,1200px); pointer-events:none;z-index:1; opacity:0.3; animation: yantraRotSlow 240s linear infinite; } @keyframes yantraRotSlow { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } } .hero-yantra svg{width:100%;height:100%;} /* ── NEBULA BLOBS ── */ .nebula{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;} .nebula-1{width:38%;height:38%;top:10%;left:30%;background:radial-gradient(ellipse,rgba(160,100,255,.18) 0%,transparent 70%);filter:blur(40px);animation:nebulaShift 18s ease-in-out infinite;} .nebula-2{width:28%;height:28%;top:30%;right:8%;background:radial-gradient(ellipse,rgba(80,160,255,.12) 0%,transparent 70%);filter:blur(35px);animation:nebulaShift 22s 4s ease-in-out infinite;} .nebula-3{width:22%;height:22%;bottom:28%;left:6%;background:radial-gradient(ellipse,rgba(255,180,80,.1) 0%,transparent 70%);filter:blur(30px);animation:nebulaShift 16s 2s ease-in-out infinite;} /* ── CONSTELLATION LINES SVG overlay ── */ .constellation-layer{ position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.28; } /* ── SATURN RE-ENABLED with full ring ── */ .planet-shani{display:block!important;} .shani-ring{display:block!important;} /* ── TICKER BOTTOM CHANDELIERS ── */ .tk2-chand-bot-l, .tk2-chand-bot-r { display: none !important; } .tk2-chand-bot-l { left: clamp(20px, 3.8vw, 64px); } .tk2-chand-bot-r { right: clamp(20px, 3.8vw, 64px); } /* ── OM SYMBOL in ticker center-left ── */ .tk2-om{ font-family:'Tiro Devanagari Sanskrit',serif; font-size:2.2rem;color:rgba(201,168,76,.6); line-height:1; } /* ── GOLD CORNER ORNAMENTS on hero ── */ .hero-corner{position:absolute;width:90px;height:90px;pointer-events:none;z-index:4;opacity:.55;} .hero-corner-tl{top:70px;left:12px;} .hero-corner-tr{top:70px;right:12px;transform:scaleX(-1);} .hero-corner-bl{bottom:38%;left:12px;transform:scaleY(-1);} .hero-corner-br{bottom:38%;right:12px;transform:scale(-1,-1);} /* ── SURYA CORONA RINGS ── */ .surya-corona{ position:absolute; border-radius:50%; border:1px solid rgba(201,168,76,.35); animation:coronaSpinSlow 24s linear infinite; pointer-events:none; } /* ── SECTION DIVIDERS ── */ .section-divider{ display:flex;align-items:center;justify-content:center; gap:16px;padding:0 48px;margin:0; height:2px; background:transparent; position:relative; } .section-divider::before{ content:'';flex:1;height:1px; background:linear-gradient(to right,transparent,rgba(201,168,76,.4),transparent); } .section-divider::after{ content:'';flex:1;height:1px; background:linear-gradient(to left,transparent,rgba(201,168,76,.4),transparent); } /* ── TOOL CARD GLOW UPGRADE ── */ .tool-card{ transition:transform .22s,box-shadow .22s,border-color .22s !important; } .tool-card:hover{ border-color:rgba(201,168,76,.6) !important; box-shadow:0 8px 40px rgba(107,95,200,.25), 0 0 0 1px rgba(201,168,76,.2) !important; } /* Anchor reset for semantic sv3-card links */ a.sv3-card { text-decoration: none; color: inherit; display: flex; } /* Keyboard focus ring for ALL [data-drawer] interactive elements */ [data-drawer]:focus-visible, .sv3-card:focus-visible, .tool-card:focus-visible { outline: 2px solid rgba(201,168,76,.85); outline-offset: 2px; } /* ── NAV ───────────────────────────────────────────── */ .nav{ position:fixed;top:0;left:0;right:0;z-index:500; height:48px;display:flex;align-items:center;padding:0 clamp(18px,4vw,48px); background:rgba(14,10,40,.96); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); border-bottom:1px solid rgba(201,168,76,.18); } .nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1280px;margin:0 auto} /* ── HERO — full illustrated scene ─────────────────── */ .hero{ position:relative; z-index:2; isolation:isolate; min-height:100vh; min-height:100dvh; /* iOS-FIX: BUG 1 — overrides on iOS */ overflow:hidden; background:linear-gradient(180deg,#06040E 0%,#0C0820 5%,#141038 12%,#1E1A50 20%,#2E2868 28%,#4A4488 36%,#6860A0 44%,#8880B8 52%,#A8A0CC 60%,#C0BADC 68%,#CEC8E2 72%,#B0A8D0 78%,#6858A0 84%,#2E2260 90%,#100C28 95%,#08061A 100%); display:flex;flex-direction:column; } /* Spacer that fills the gap between content and cityscape */ .hero-spacer{ flex:1; min-height:clamp(80px,8vh,140px); } /* Mist cloud layers — organic translucent shapes */ .mist{position:absolute;border-radius:60% 40% 50% 60%;pointer-events:none;animation:mist var(--d,9s) ease-in-out infinite} .mist-1{width:70%;height:55%;top:-8%;left:-10%;background:rgba(20,18,50,.35);filter:blur(60px);--d:11s} .mist-2{width:55%;height:45%;top:10%;right:-12%;background:rgba(16,14,40,.28);filter:blur(50px);--d:14s;animation-delay:2s} .mist-3{width:65%;height:40%;bottom:20%;left:5%;background:rgba(24,22,55,.18);filter:blur(70px);--d:10s;animation-delay:4s} .mist-4{width:40%;height:50%;bottom:0;right:0;background:rgba(192,176,232,.15);filter:blur(55px);--d:12s;animation-delay:1s} /* Stars — vary sizes */ .s{position:absolute;border-radius:50%;background:#EAE6F8;animation:twinkle var(--d,4s) var(--dl,0s) ease-in-out infinite} /* ── HERO — PLANETS ─ */ .planet-surya{ position:absolute;top:8%;right:4%; width:min(22vw,230px);height:min(22vw,230px); border-radius:50%;z-index:3; background:none; animation:wobbleSurya 14s ease-in-out infinite; filter:drop-shadow(0 0 22px rgba(255,180,0,.7)) drop-shadow(0 0 55px rgba(255,140,0,.45)) drop-shadow(0 0 110px rgba(255,100,0,.25)); } .planet-surya svg{width:100%;height:100%;overflow:visible;} .planet-surya::after{content:none} /* Saturn — bottom-right corner, bleeds off edge */ .planet-shani{ position:absolute;top:8%;right:3%; width:min(22vw,240px);height:min(20vw,218px); z-index:3; animation:wobbleShani 18s 3s ease-in-out infinite; filter:drop-shadow(0 0 22px rgba(200,160,60,.55)) drop-shadow(0 0 55px rgba(170,130,40,.28)); } .planet-shani svg{width:100%;height:100%;overflow:visible;} /* Moon — top-left, partially off-screen, purple glow */ .planet-chandra{ position:absolute;top:8%;left:7%; width:min(15vw,160px);height:min(15vw,160px); z-index:3; animation:wobbleChandra 12s 1s ease-in-out infinite; filter:drop-shadow(0 0 35px rgba(152,144,220,.95)) drop-shadow(0 0 80px rgba(107,95,200,.65)) drop-shadow(0 0 140px rgba(88,75,190,.35)); } .planet-chandra svg{width:100%;height:100%;overflow:visible;} @keyframes coronaRot{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* ── SPARKLES / GOLD DUST ── */ @keyframes sparkleDrift{ 0%{transform:translateY(0) translateX(0) scale(1);opacity:0} 20%{opacity:1} 80%{opacity:.6} 100%{transform:translateY(-80px) translateX(20px) scale(0.3);opacity:0} } .sparkle{ position:absolute;width:3px;height:3px;border-radius:50%; background:#E8C97A;pointer-events:none;z-index:2; animation:sparkleDrift var(--sd,8s) var(--sdl,0s) ease-in-out infinite; box-shadow:0 0 4px #C9A84C; } /* ── HERO — CITYSCAPE / GROUND LAYER ─────────────────── */ .cityscape{ position:absolute;bottom:0;left:0;right:0; height:38%; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 12%); mask-image:linear-gradient(to bottom,transparent 0%,black 12%); } /* ── HERO — TEXT CONTENT ─────────────────────────────── */ .hero-content{ position:relative;z-index:10; display:flex;flex-direction:column;align-items:center; justify-content:flex-start; width:100%; padding-top:clamp(110px,14vh,150px); padding-left:clamp(20px,5vw,80px); padding-right:clamp(20px,5vw,80px); padding-bottom:clamp(160px,20vw,240px); text-align:center; } .hero-top-group{ display:flex;flex-direction:column;align-items:center; } /* hero-shloka-group base — overridden per breakpoint in media queries */ .hero-h1{ font-family:'Cormorant Garamond',serif; font-size:clamp(72px,10vw,130px); line-height:.88;color:#EAE6F8;letter-spacing:.06em; margin-bottom:28px; animation:fadeUp .7s .25s both; text-align:center; } .hero-h1 em{font-style:italic;font-weight:400;color:rgba(234,230,248,.72)} .hero-h1 strong{font-style:normal;font-weight:700} .hero-pills{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center; animation:fadeUp .6s .85s both; margin-bottom:16px; } .pill{ font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:500; padding:11px 22px;border-radius:999px;border:none;cursor:pointer; letter-spacing:.04em;transition:transform .2s,box-shadow .2s,background .2s; -webkit-tap-highlight-color:transparent;touch-action:manipulation; } .pill:hover{transform:translateY(-2px)} .pill-gold{background:#C9A84C;color:#1A1640;animation:ctaPulse 3s ease-in-out infinite;padding:13px 32px} .pill-gold:hover{background:#E8C97A;box-shadow:0 0 22px rgba(201,168,76,.4)} .pill-ghost{background:transparent;color:rgba(234,230,248,.7);border:1.5px solid rgba(200,192,240,.3)} .pill-ghost:hover{border-color:rgba(200,192,240,.65);color:#EAE6F8} /* ── HERO FEATURES GRID ──────────────────────────────── */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:36px;animation:fadeUp .6s .45s both;max-width:660px;} .fpill{ font-family:'DM Sans',sans-serif; font-size:.92rem; font-weight:600; padding:12px 24px; border-radius:999px; background:rgba(255,255,255,.9); border:1.5px solid rgba(201,168,76,.3); color:#1A1640; cursor:pointer; transition:all .18s; backdrop-filter:blur(12px); text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.08); -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .fpill:hover{ background:#fff; border-color:rgba(201,168,76,.6); color:#000; transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,.15); } .fpill:active{transform:scale(.95);box-shadow:none} /* DAWN: dark cosmic → smooth lavender, continuous no spike */ .dawn{ height:80px;pointer-events:none;margin-top:-20px;position:relative;z-index:5; background:linear-gradient(180deg,#1A1640 0%,#2A2468 15%,#4840A0 35%,#7060B8 55%,#9890CC 72%,#C8C2E4 88%,#EAE6F4 100%); } /* ── SECTION — TOOLS ─────────────────────────────────── */ .s-tools{ background: radial-gradient(ellipse at 12% 80%, rgba(201,168,76,.055) 0%, transparent 48%), radial-gradient(ellipse at 88% 15%, rgba(88,80,168,.09) 0%, transparent 48%), radial-gradient(ellipse at 50% 100%, rgba(88,80,168,.06) 0%, transparent 55%), linear-gradient(180deg, #EAE6F8 0%, #E6E1F5 55%, #DDD8F0 100%); padding:clamp(70px,8vh,110px) 48px; position:relative;overflow:hidden; } .s-tools-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:38% 62%;gap:72px;align-items:start} .eyebrow{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;color:#C9A84C;text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px} .h2{font-family:'Cormorant Garamond',serif;font-size:clamp(52px,7vw,96px);line-height:1.04;letter-spacing:-.01em;color:#1A1640;margin-bottom:18px} .h2 em{font-style:italic;font-weight:400} .h2 strong{font-style:normal;font-weight:700} .body-text{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.65;color:rgba(26,22,64,.7);margin-bottom:20px} .tag-pill{display:inline-flex;align-items:center;padding:5px 14px;background:rgba(152,144,200,.1);color:#9890C8;border-radius:999px;border:1px solid rgba(152,144,200,.22);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:500} .tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .tool-card{ background:rgba(255,255,255,.32); border:1px solid rgba(152,144,200,.22); border-radius:16px;padding:22px 18px;cursor:pointer; backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 24px rgba(88,80,168,.07); transition:transform .25s cubic-bezier(.4,0,.2,1),border-color .25s,box-shadow .25s; } .tool-card:hover{ transform:translateY(-5px); border-color:rgba(152,144,200,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 18px 52px rgba(88,80,168,.14),0 0 0 1px rgba(200,192,240,.2); } .tc-icon{width:44px;height:44px;margin-bottom:14px} .tc-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:700;color:#1A1640;margin-bottom:5px} .tc-sub{font-family:'DM Sans',sans-serif;font-size:.7rem;color:#9890C8;line-height:1.5;margin-bottom:10px} .tc-tag{display:inline-flex;padding:2px 9px;border-radius:999px;border:1px solid rgba(152,144,200,.28);font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:500;color:#9890C8} /* ── SECTION — TEASER ────────────────────────────────── */ .s-teaser{ background: radial-gradient(ellipse at 90% 90%, rgba(88,80,168,.12) 0%, transparent 50%), radial-gradient(ellipse at 10% 20%, rgba(201,168,76,.05) 0%, transparent 45%), linear-gradient(180deg, #DDD8F0 0%, #C8C0E4 30%, #B0A8D8 65%, #9890D0 100%); padding:clamp(30px,3vh,48px) 48px; margin-top:-1px; position:relative;overflow:hidden; border-top:none; outline:none; } .s-teaser-inner{max-width:980px;margin:0 auto} .m-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px} .m-card{background:rgba(255,255,255,.38);border:1px solid rgba(152,144,200,.22);border-radius:12px;padding:18px 14px;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 12px rgba(88,80,168,.06)} .m-card.gold-l{border-left:3px solid #C9A84C} .m-lbl{font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:#9890C8;margin-bottom:5px} .m-val{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;color:#1A1640} .p-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px} .p-card{background:rgba(255,255,255,.32);border:1px solid rgba(152,144,200,.2);border-radius:12px;padding:16px 14px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 12px rgba(88,80,168,.06)} .p-badge{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;flex-shrink:0} .p-name{font-family:'Cormorant Garamond',serif;font-size:.92rem;font-weight:700;color:#1A1640} .p-deg{font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:#9890C8} .p-tag{font-family:'DM Sans',sans-serif;font-size:.58rem;color:#C9A84C;font-weight:500} .teaser-blur{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;opacity:.28;filter:blur(5px);pointer-events:none} .teaser-overlay-wrap{position:relative;margin-top:0} .teaser-overlay{ position:absolute;inset:0; background:linear-gradient(to bottom,transparent 0%,rgba(152,144,208,.97) 45%); display:flex;flex-direction:column;align-items:center;justify-content:flex-end; padding-bottom:26px;gap:12px; } .teaser-cta-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;color:#9890C8} /* ── SECTION — PREMIUM ───────────────────────────────── */ .s-premium{ background: radial-gradient(ellipse at 50% 0%, rgba(88,80,168,.18) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(201,168,76,.04) 0%, transparent 45%), linear-gradient(180deg,#1A1640 0%,#0E0A28 100%); padding:clamp(70px,8vh,130px) 48px;text-align:center;position:relative;overflow:hidden; } /* pre-dawn: connects teaser → premium — deeper start to match new teaser bottom */ .pre-dawn{ height:200px;pointer-events:none; background:linear-gradient(180deg, #2A2858 0%, #201E48 14%, #181638 28%, #121028 42%, #0E0C20 56%, #0C0A1C 70%, #0A0818 84%, #080616 100% ); } .ghost-row{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:48px} .ghost{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.1rem;color:rgba(234,230,248,.13);letter-spacing:.05em;pointer-events:none} .crystal{ width:180px;height:180px;border-radius:50%;margin:0 auto 52px; position:relative;display:flex;align-items:center;justify-content:center; animation:breathe 3.5s ease-in-out infinite; } .prem-h{font-family:'Cormorant Garamond',serif;font-size:clamp(44px,5.5vw,68px);line-height:1.04;color:#EAE6F8;letter-spacing:.02em;margin-bottom:20px} .prem-h em{font-style:italic;font-weight:400} .prem-body{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.65;color:rgba(234,230,248,.52);max-width:500px;margin:0 auto 32px} .hash-wrap{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border:1px solid rgba(152,144,200,.22);border-radius:999px;margin-bottom:44px} .hash-dot{width:6px;height:6px;border-radius:50%;background:#C9A84C;box-shadow:0 0 8px #C9A84C;flex-shrink:0} .hash-txt{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:#9890C8;white-space:nowrap;overflow:hidden;width:0;animation:typeIn 1.8s 1s ease both} .prem-list{list-style:none;display:flex;flex-direction:column;gap:13px;max-width:420px;margin:0 auto 44px;text-align:left} .prem-list li{display:flex;align-items:flex-start;gap:12px;font-family:'DM Sans',sans-serif;font-size:15px;color:rgba(234,230,248,.68);line-height:1.5} .gdot{width:6px;height:6px;border-radius:50%;background:#C9A84C;box-shadow:0 0 7px #C9A84C;margin-top:8px;flex-shrink:0} /* ── TRUST STRIP ─────────────────────────────────────── */ /* Natural continuation from dark premium → light; no jarring jump */ .trust-dawn{height:80px;pointer-events:none;margin-top:-20px;position:relative;z-index:5;background:linear-gradient(180deg,#1A1640 0%,#2A2468 15%,#4840A0 35%,#7060B8 55%,#9890CC 72%,#C8C2E4 88%,#EAE6F4 100%)} .trust{background:transparent;padding:0 48px;height:108px;display:flex;align-items:center;border-top:1px solid rgba(201,168,76,.1)} .trust-inner{max-width:1280px;margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(4,1fr)} .trust-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px;border-right:1px solid rgba(200,192,240,.4)} .trust-stat:last-child{border-right:none} .trust-num{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:700;color:#1A1640;line-height:1} .trust-lbl{font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:500;color:#9890C8;text-transform:uppercase;letter-spacing:.1em;margin-top:4px} /* ── FOOTER ──────────────────────────────────────────── */ footer{background:#1A1640;border-top:1px solid rgba(201,168,76,.12);padding:44px 48px 28px} /* ── INK DIVIDER ─────────────────────────────────────── */ .ink-divider{width:100%;overflow:hidden;pointer-events:none;display:block;line-height:0} /* ── BIRTH SECTION ───────────────────────────────────── */ .s-birth{ background: radial-gradient(ellipse at 15% 20%, rgba(201,168,76,.04) 0%, transparent 40%), radial-gradient(ellipse at 85% 25%, rgba(120,100,200,.05) 0%, transparent 40%), linear-gradient(180deg, #E6E2F4 0%, #DDD8EF 6%, #D0CAEA 12%, #C0B8E2 22%, #ACA4D8 34%, #9890CC 46%, #8070B8 58%, #C8C2E8 72%, #C8C2E8 100% ); padding:16px 48px 0; position:relative;z-index:3;isolation:isolate;overflow:hidden; } /* Ground layer — pinned to bottom of birth section like cityscape in hero */ .birth-ground{ position:absolute;bottom:0;left:0;right:0; height:42%; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.6) 18%, black 35%); mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.6) 18%, black 35%); } /* Floating planets in birth section */ .birth-planet{position:absolute;pointer-events:none;border-radius:50%} .constellation-bg{position:absolute;inset:0;pointer-events:none;opacity:1} .footer-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-bottom:20px;border-bottom:1px solid rgba(152,144,200,.08)} .footer-links{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .flink{font-family:'DM Sans',sans-serif;font-size:.78rem;color:rgba(234,230,248,.4);text-decoration:none;background:none;border:none;cursor:pointer;transition:color .2s} .flink:hover{color:#EAE6F8} .flink-del{color:#E87A7A!important} .flink-del:hover{color:#f5a0a0!important} .footer-copy{font-family:'DM Sans',sans-serif;font-size:.62rem;color:rgba(234,230,248,.22);text-align:center;margin-top:18px;max-width:1280px;margin-left:auto;margin-right:auto} /* FAQ details */ details summary::-webkit-details-marker{display:none} details[open] summary span{transform:rotate(45deg);display:inline-block} details summary span{display:inline-block;transition:transform .2s} /* Navagraha grid responsive */ @media(max-width:900px){ #s-planets .nav-grid{grid-template-columns:repeat(3,1fr)!important} } @media(max-width:600px){ #s-planets .nav-grid{grid-template-columns:repeat(3,1fr)!important} } /* ── BIRTH DETAILS FORM SECTION ─────────────────────── */ .s-birth-inner{max-width:780px;margin:-10px auto 0;text-align:center} .birth-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 18px;border-radius:999px;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.3);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:500;color:#C9A84C;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px} .birth-h{font-family:'Cormorant Garamond',serif;font-size:clamp(52px,7vw,96px);line-height:1.04;color:#1A1640;margin-bottom:14px} .birth-h em{font-style:italic;font-weight:400;color:rgba(26,22,64,.8)} .birth-badge{ display:inline-flex;align-items:center;gap:8px; font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500; color:#C9A84C;text-transform:uppercase;letter-spacing:.14em; border:1px solid rgba(201,168,76,.28);border-radius:999px; padding:7px 20px;margin-bottom:20px; background:rgba(201,168,76,.06); } .birth-sub{font-family:'DM Sans',sans-serif;font-size:17px;color:rgba(26,22,64,.6);margin-bottom:28px;line-height:1.7;max-width:560px;margin-left:auto;margin-right:auto} .profile-saved-wrap{display:none;background:rgba(255,255,255,.75);border:1px solid rgba(201,168,76,.25);border-radius:20px;padding:22px 26px;margin-bottom:28px;text-align:left;backdrop-filter:blur(12px)} .profile-saved-wrap.visible{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .profile-avatar{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#C9A84C,#7A5810);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:#EAE6F8;flex-shrink:0} .profile-info{flex:1} .profile-name-disp{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700;color:#1A1640} .profile-details-disp{font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:#9890C8;margin-top:3px;line-height:1.6} .profile-edit{font-family:'DM Sans',sans-serif;font-size:.72rem;color:#9890C8;background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;flex-shrink:0} .profile-edit:hover{color:#1A1640} .profile-open-app{background:#C9A84C;color:#1A1640;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;padding:10px 20px;border-radius:999px;border:none;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;transition:background .2s;flex-shrink:0} .profile-open-app:hover{background:#E8C97A} .birth-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left} .birth-form.hidden{display:none} .form-group{display:flex;flex-direction:column;gap:6px} .form-group.full{grid-column:1/-1} .form-label{font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;color:rgba(26,22,64,.88);text-transform:uppercase;letter-spacing:.1em} .form-input{font-family:'DM Sans',sans-serif;font-size:.9rem;color:#1A1640;background:rgba(210,205,238,.4);border:1.5px solid rgba(152,144,200,.3);border-radius:10px;padding:11px 14px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;width:100%;-webkit-appearance:none;appearance:none} .form-input:focus{border-color:rgba(201,168,76,.55);box-shadow:0 0 0 3px rgba(201,168,76,.1);background:rgba(210,205,238,.58)} .form-input::placeholder{color:rgba(26,22,64,.32)} .form-input:-webkit-autofill,.form-input:-webkit-autofill:hover,.form-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px rgba(210,205,238,.5) inset;-webkit-text-fill-color:#1A1640} .form-note{font-family:'DM Sans',sans-serif;font-size:.68rem;color:rgba(26,22,64,.38);grid-column:1/-1;text-align:center;line-height:1.7;margin-top:4px} .form-note span{color:#C9A84C} .form-submit{grid-column:1/-1;background:#C9A84C;color:#1A1640;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;padding:14px 32px;border-radius:999px;border:none;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;transition:background .2s,transform .2s,box-shadow .2s;margin-top:6px;margin-bottom:4px} .form-submit:hover{background:#E8C97A;transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,168,76,.35)} /* ── APP PAGE ────────────────────────────────────────── */ .app-page{position:fixed;inset:0;z-index:2000;background:linear-gradient(180deg,#0E0A28 0%,#1A1640 15%,#2A2060 35%,#3D3090 55%,#5850A8 72%,#7068C0 85%,#9890D0 95%,#B0A8D8 100%);transform:translateY(100%);transition:transform .5s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden} .app-page.open{transform:translateY(0)} .app-nav{height:58px;min-height:58px;display:flex;align-items:center;padding:0 clamp(16px,4vw,40px);background:rgba(14,10,40,.98);border-bottom:1px solid rgba(201,168,76,.12);gap:16px;flex-shrink:0} .app-back{background:none;border:none;color:#9890C8;cursor:pointer;font-size:1.3rem;padding:6px;line-height:1;transition:color .2s} .app-back:hover{color:#EAE6F8} .app-logo{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:#EAE6F8;letter-spacing:.04em;flex:1} .app-logo em{font-style:italic;color:#C9A84C} .app-profile-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(201,168,76,.18);border-radius:999px;padding:5px 14px 5px 7px} .app-avatar{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#C9A84C,#7A5810);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#EAE6F8;font-family:'Cormorant Garamond',serif;font-weight:700;flex-shrink:0} .app-uname{font-family:'DM Sans',sans-serif;font-size:.72rem;color:rgba(234,230,248,.7);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .app-body{flex:1;overflow-y:auto;padding:clamp(20px,3vw,48px);background:transparent} .app-welcome{text-align:center;margin-bottom:44px} .app-welcome-eyebrow{font-family:'DM Sans',sans-serif;font-size:.65rem;color:#9890C8;text-transform:uppercase;letter-spacing:.2em;margin-bottom:10px} .app-welcome-name{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.5vw,44px);color:#EAE6F8;margin-bottom:6px} .app-welcome-name em{font-style:italic;color:#C9A84C} .app-welcome-sub{font-family:'DM Sans',sans-serif;font-size:.82rem;color:rgba(234,230,248,.38);line-height:1.65} .app-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;max-width:920px;margin:0 auto} .app-tool{background:rgba(255,255,255,.07);border:1px solid rgba(152,144,200,.18);border-radius:18px;padding:22px 18px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;text-align:left;border:none;width:100%} .app-tool:hover{background:rgba(255,255,255,.08);border-color:rgba(201,168,76,.28);transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.4)} .app-tool{border:1px solid rgba(152,144,200,.14)} .app-tool:hover{background:rgba(255,255,255,.08);border-color:rgba(201,168,76,.28);transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.4)} /* ── APP HERO STRIP ──────────────────────────────────── */ .app-hero-strip{ position:relative; min-height:240px; display:flex;align-items:center;justify-content:center; overflow:hidden; margin:-clamp(20px,3vw,48px) -clamp(20px,3vw,48px) 32px; padding:60px clamp(20px,3vw,48px); background:linear-gradient(180deg,rgba(14,10,40,.95) 0%,rgba(26,22,64,.6) 60%,transparent 100%); border-bottom:1px solid rgba(201,168,76,.08); } /* ── APP TOOL SVG ICONS ──────────────────────────────── */ .app-tool-svg{width:52px;height:52px;margin-bottom:14px;display:block} /* ── PREMIUM TOOL CARDS ──────────────────────────────── */ .app-tool-premium{ border-color:rgba(201,168,76,.2)!important; background:rgba(201,168,76,.04)!important; } .app-tool-premium:hover{ border-color:rgba(201,168,76,.45)!important; background:rgba(201,168,76,.08)!important; box-shadow:0 14px 36px rgba(0,0,0,.4),0 0 0 1px rgba(201,168,76,.12)!important; } .app-tool-icon{font-size:1.8rem;margin-bottom:12px;display:block} .app-tool-name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:700;color:#EAE6F8;margin-bottom:4px} .app-tool-desc{font-family:'DM Sans',sans-serif;font-size:.68rem;color:rgba(234,230,248,.38);line-height:1.55} .app-tool-badge{display:inline-flex;margin-top:10px;padding:2px 9px;border-radius:999px;background:rgba(122,200,122,.08);border:1px solid rgba(122,200,122,.2);font-family:'DM Sans',sans-serif;font-size:.58rem;color:#7AC87A;font-weight:500} .app-divider{max-width:920px;margin:32px auto 20px;display:flex;align-items:center;gap:14px} .app-divider-line{flex:1;height:1px;background:rgba(152,144,200,.08)} .app-divider-txt{font-family:'DM Sans',sans-serif;font-size:.62rem;color:rgba(152,144,200,.35);text-transform:uppercase;letter-spacing:.16em;white-space:nowrap} .app-birth-bar{max-width:920px;margin:0 auto 28px;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.18);border-radius:14px;padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .app-birth-lbl{font-family:'DM Sans',sans-serif;font-size:.68rem;color:#C9A84C;text-transform:uppercase;letter-spacing:.1em;flex-shrink:0} .app-birth-val{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:rgba(234,230,248,.6);flex:1} .app-birth-edit{font-family:'DM Sans',sans-serif;font-size:.68rem;color:#9890C8;background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;flex-shrink:0} .app-birth-edit:hover{color:#EAE6F8} /* ── DRAWERS ─────────────────────────────────────────── */ .overlay{position:fixed;inset:0;z-index:900;background:rgba(10,8,24,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s cubic-bezier(.4,0,.2,1), visibility .35s} .overlay.on{opacity:1;visibility:visible;pointer-events:all} .drawer{position:fixed;inset:0;z-index:1000;background:#EAE6F8;transform:translateY(100%);transition:transform .42s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden} .drawer.open{transform:translateY(0)} .dr-head{height:58px;min-height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#EAE6F8;border-bottom:1px solid rgba(152,144,200,.15);flex-shrink:0} .dr-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;font-weight:700;color:#1A1640} .dr-close{font-size:28px;color:#9890C8;cursor:pointer;background:none;border:none;line-height:1;padding:8px;transition:color .2s} .dr-close:hover{color:#1A1640} .dr-body{overflow-y:auto;flex:1;padding:52px 72px} .dr-placeholder{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:#9890C8;text-align:center;margin-top:80px;opacity:.6} .hero-cta-hint{ display:flex;flex-direction:column;align-items:center; gap:0;margin-top:0; animation:fadeUp .6s 1.1s both; position:relative; } /* thin gold rule above */ .hero-cta-hint::before{ content:'';display:block; width:200px;height:1px; background:linear-gradient(90deg,transparent,rgba(201,168,76,.75),transparent); margin-bottom:20px; } .hero-cta-hint-shloka{ font-family:'Tiro Devanagari Sanskrit',serif; font-size:clamp(16px,1.7vw,24px); color:#FFE9A0; letter-spacing:.04em; line-height:1.3; font-style:normal; font-weight:400; white-space:nowrap; text-shadow: 0 0 18px rgba(255,220,100,.9), 0 0 40px rgba(201,168,76,.65), 0 0 80px rgba(201,168,76,.35), 0 2px 14px rgba(0,0,0,.4); } .hero-cta-hint-shloka + .hero-cta-hint-translation{ margin-top:5px; } .hero-cta-hint-translation{ font-family:'Cinzel',serif; font-size:clamp(10px,.9vw,13px); color:rgba(255,255,255,.7); letter-spacing:.2em; text-transform:uppercase; font-weight:500; text-shadow:0 0 20px rgba(234,230,248,.2),0 1px 8px rgba(0,0,0,.5); } /* ── SCROLL INDICATOR ──────────────────────────────────── */ .scroll-hint{ display:flex;flex-direction:column;align-items:center;gap:5px; margin-top:22px; animation:scrollBob 2.5s ease-in-out infinite; pointer-events:none; } .scroll-hint-txt{ font-family:'DM Sans',sans-serif;font-size:.58rem; color:rgba(234,230,248,.82);letter-spacing:.18em;text-transform:uppercase; } .scroll-hint-arrow{ width:16px;height:16px; border-right:1.5px solid rgba(234,230,248,.8); border-bottom:1.5px solid rgba(234,230,248,.8); transform:rotate(45deg); margin-top:-4px; } @keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.4)}60%{box-shadow:0 0 0 10px rgba(201,168,76,0)}} @keyframes scrollBob{ 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(6px);opacity:1} } /* ── SURPRISE: LIVE NAKSHATRA BADGE ─────────────────── */ .live-badge{ display:inline-flex;align-items:center;gap:7px; padding:5px 14px 5px 8px; background:rgba(26,22,64,.6); border:1px solid rgba(201,168,76,.25); border-radius:999px; backdrop-filter:blur(10px); margin-bottom:24px; animation:fadeUp .5s .08s both; cursor:default; } .live-dot{width:6px;height:6px;border-radius:50%;background:#C9A84C;box-shadow:0 0 8px #C9A84C;animation:livePulse 2s ease-in-out infinite} @keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 8px #C9A84C}50%{opacity:.5;box-shadow:0 0 3px #C9A84C}} .live-txt{font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:rgba(201,168,76,.8);letter-spacing:.08em} /* ── SURPRISE: CURSOR STAR TRAIL ─────────────────────── */ .star-trail{position:fixed;pointer-events:none;z-index:9999;border-radius:50%;background:#C9A84C;transform:translate(-50%,-50%);animation:trailFade .7s ease-out forwards} @keyframes trailFade{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(0) translateY(-12px)}} /* ── SURPRISE: SCROLL REVEAL on feat-grid pills ──────── */ .feat-grid .fpill{opacity:0;animation:pillReveal .4s ease both} @keyframes pillReveal{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}} /* ── SURPRISE: Birth form glass card ─────────────────── */ .birth-glass{ background:rgba(255,255,255,.28); border:1px solid rgba(200,192,240,.35); border-radius:20px; padding:28px 28px 28px; box-shadow:0 16px 60px rgba(26,22,64,.18),0 1px 0 rgba(255,255,255,.6) inset; backdrop-filter:blur(18px); text-align:left; margin-top:6px; } /* ── SURPRISE: Floating Sanskrit runes background on birth section ── */ .s-birth{position:relative;z-index:3;isolation:isolate;overflow:hidden} .rune{position:absolute;font-family:'Cormorant Garamond',serif;font-style:italic;color:rgba(88,80,168,.11);pointer-events:none;user-select:none;animation:runeFloat var(--rd,12s) var(--rdl,0s) ease-in-out infinite alternate} @keyframes runeFloat{from{transform:translateY(0) rotate(var(--rr,0deg))}to{transform:translateY(-20px) rotate(var(--rr2,5deg))}} /* ── SURPRISE: VEDIC ZODIAC WHEEL ─────────────────────── */ .zodiac-wheel{ position:absolute; top:44%;left:50%; width:min(68vw,640px);height:min(68vw,640px); transform:translate(-50%,-50%); z-index:1; pointer-events:none; animation:zodiacSpin 120s linear infinite; opacity:.05; } @keyframes zodiacSpin{from{transform:translate(-50%,-50%) rotate(15deg)}to{transform:translate(-50%,-50%) rotate(375deg)}} /* ── SURPRISE: SHOOTING STARS ─────────────────────────── */ /* ── SURPRISE: AURORA GLOW at hero center ──────────────── */ .aurora{ position:absolute; top:30%;left:50%; transform:translateX(-50%); width:60%;height:40%; background:radial-gradient(ellipse at center,rgba(107,95,228,.08) 0%,rgba(88,80,168,.04) 40%,transparent 70%); pointer-events:none;z-index:1; animation:auroraPulse 8s ease-in-out infinite; filter:blur(30px); } @keyframes auroraPulse{0%,100%{opacity:.6;transform:translateX(-50%) scaleY(1)}50%{opacity:1;transform:translateX(-50%) scaleY(1.3)}} /* ── Planet hover labels ───────────────────────────────── */ .planet-surya,.planet-shani,.planet-chandra{position:absolute;overflow:visible} .planet-lbl{ position:absolute;bottom:calc(100% + 10px);left:50%; transform:translateX(-50%); font-family:'Cormorant Garamond',serif;font-style:italic; font-size:.75rem;color:rgba(201,168,76,.0); white-space:nowrap;letter-spacing:.1em; transition:color .4s,transform .4s; pointer-events:none; text-shadow:0 0 12px rgba(201,168,76,.5); } .planet-surya:hover .planet-lbl, .planet-shani:hover .planet-lbl, .planet-chandra:hover .planet-lbl{ color:rgba(201,168,76,.9); transform:translateX(-50%) translateY(-4px); } /* ── RESPONSIVE ──────────────────────────────────────── */ @media(max-width:1024px){ .s-tools-inner{grid-template-columns:1fr;gap:44px} .tools-grid{grid-template-columns:repeat(2,1fr)} .m-row{grid-template-columns:repeat(2,1fr)} .planet-surya{width:180px;height:180px;top:8%;right:4%} .planet-chandra{width:118px;height:118px;top:4%;left:4%} .planet-shani{width:160px;height:146px;top:4%;right:3%} } @media(max-width:768px){ .nav{padding:0 18px} .hero-content{padding:150px 18px 0;max-width:100%} .hero-h1{font-size:clamp(52px,13vw,80px);margin-bottom:36px} .feat-grid{max-width:90vw;gap:12px;margin-bottom:32px} .fpill{font-size:.9rem;padding:11px 20px} .hero-pills{flex-wrap:wrap;gap:8px} .pill{padding:10px 18px;font-size:.74rem} .planet-surya{width:110px;height:110px;top:8%;right:4%} .planet-chandra{width:82px;height:82px;top:4%;left:4%} .planet-shani{width:110px;height:100px;top:4%;right:3%} .s-tools,.s-teaser,.s-premium{padding:72px 20px} .s-birth{padding:60px 20px 80px} .birth-form{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .s-tools-inner{grid-template-columns:1fr;gap:36px} .tools-grid{grid-template-columns:1fr 1fr} .p-row{grid-template-columns:1fr 1fr} .m-row{grid-template-columns:1fr 1fr} .trust{height:auto;padding:32px 20px} .trust-inner{grid-template-columns:1fr 1fr;gap:16px} .trust-stat{border-right:none;padding-bottom:14px;border-bottom:1px solid rgba(200,192,240,.22)} .trust-stat:nth-child(even){border-bottom:none} footer{padding:32px 18px 18px} .footer-inner{flex-direction:column;align-items:flex-start;gap:12px} .footer-links{gap:16px;flex-wrap:wrap} .dr-head{padding:0 20px} .dr-body{padding:32px 20px} .dawn,.pre-dawn,.trust-dawn{height:90px} .ghost-row{display:none} .crystal{width:120px;height:120px} .prem-h{font-size:clamp(36px,8vw,52px)} .app-tools-grid{grid-template-columns:1fr 1fr} .profile-saved-wrap.visible{flex-direction:column;align-items:flex-start} } @media(max-width:480px){ .hero-h1{font-size:clamp(44px,14vw,64px)} .feat-grid{display:grid;grid-template-columns:1fr 1fr} .fpill{font-size:.82rem;padding:10px 16px} .tools-grid{grid-template-columns:1fr} .p-row{grid-template-columns:1fr} .m-row{grid-template-columns:1fr 1fr} .trust-inner{grid-template-columns:1fr 1fr} .app-tools-grid{grid-template-columns:1fr} } /* ── HERO GROUPS ── */ .hero-top-group{ display:flex;flex-direction:column;align-items:center; width:100%; } /* Shloka group base — absolute inside .hero */ .hero-shloka-group{ position: absolute; top: 55%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; z-index: 10; pointer-events: none; animation: fadeUp .6s 1.1s both; } /* base duplicate removed — laptop override in media query */ /* ── LAPTOP FIT (769px–1600px) ─────────────────────────── */ @media(min-width:769px) and (max-width:1600px){ .hero{ min-height:100vh !important; position:relative !important } .hero{ min-height:100dvh !important; } /* iOS-FIX: BUG 1 — overrides on iOS */ .hero-content{ padding-top: 12vh !important; padding-bottom: 0 !important; padding-left: 4vw !important; padding-right: 4vw !important; min-height: unset !important; height: auto !important; justify-content: flex-start !important; } .live-badge{ margin-bottom:16px !important } .hero-h1{ font-size: 7vw !important; line-height: .88 !important; margin-bottom: 32px !important; letter-spacing: .12em !important; } /* Pills — back to 3×2 grid */ .feat-grid{ display: grid !important; grid-template-columns: repeat(3, auto) !important; flex-wrap: unset !important; gap: 10px !important; margin-bottom: 28px !important; max-width: 680px !important; } .fpill{ font-size: .78rem !important; padding: 10px 18px !important; white-space: nowrap !important; } .hero-pills{ gap:14px !important; margin-bottom:0 !important } .pill{ padding:12px 26px !important; font-size:.82rem !important } .pill-gold{ padding:14px 34px !important } /* Shloka — top:52% = 52vh, treeline starts at 62vh, gap = 10vh ✓ */ .hero-shloka-group{ position: absolute !important; top: 52% !important; left: 0 !important; right: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; z-index: 10 !important; } .hero-cta-hint{ margin-top:0 !important } .hero-cta-hint::before{ margin-bottom:6px !important } .hero-cta-hint-shloka{ font-size:1.6vw !important; line-height:1.4 !important } .hero-cta-hint-translation{ font-size:.9vw !important; letter-spacing:.18em !important } /* Other sections */ .s-tools,.s-teaser{ padding:clamp(56px,6vh,80px) clamp(24px,3vw,48px) } .s-premium{ padding:clamp(56px,6vh,80px) clamp(24px,3vw,48px) } .s-birth{ padding:14px clamp(24px,3vw,48px) clamp(60px,8vh,120px) } .s-tools-inner{ gap:44px } .h2{ font-size:clamp(40px,5vw,72px) } .tools-grid{ gap:10px } .tool-card{ padding:18px 14px } .m-row{ grid-template-columns:repeat(4,1fr) } .p-row{ grid-template-columns:repeat(3,1fr) } } /* ── PLANET CARDS — big sphere right, badges left ── */ .pc-card{ position:relative;border-radius:18px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.55); box-shadow:0 4px 24px rgba(88,80,168,.10), inset 0 1px 0 rgba(255,255,255,.7); overflow:hidden;cursor:pointer; transition:box-shadow .3s ease,transform .3s ease; } .pc-card:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(88,80,168,.18), inset 0 1px 0 rgba(255,255,255,.8); } .pc-accent-line{ height:3px;flex-shrink:0; background:linear-gradient(90deg,var(--ac,#aaa) 0%,var(--ac,#aaa) 20%,rgba(152,144,200,.15) 60%,transparent 100%); } .pc-halo{display:none} /* ── MAIN LAYOUT: flex row, text-left | sphere-right ── */ .pc-body{ position:relative;z-index:2; display:flex; align-items:center; padding:20px 18px 16px 22px; min-height:130px; gap:0; } /* Left column — strictly vertical stack, no loose space */ .pc-body-left{ flex:1;min-width:0; display:flex;flex-direction:column; align-items:flex-start; gap:0; } /* Right column — sphere */ .pc-body-right{ flex-shrink:0; display:flex;align-items:center;justify-content:center; margin-left:14px; position:relative; } /* ── TYPOGRAPHY STACK — pixel-precise rhythm ── */ /* Planet name — large serif, tight leading */ .pc-name-row{ display:flex;align-items:baseline;gap:8px; flex-wrap:nowrap;margin-bottom:0; } .pc-sanskrit{ font-family:'Cormorant Garamond',serif; font-size:32px;font-weight:700; color:#1A1640; letter-spacing:-.3px;line-height:1; flex-shrink:0; } /* big dot separator */ .pc-dot{ font-family:'DM Sans',sans-serif; font-size:20px;font-weight:900; color:rgba(26,22,64,.30); line-height:1;flex-shrink:0; position:relative;top:-2px; } /* English name inline — serif to match Sanskrit, dark */ .pc-english{ font-family:'Cormorant Garamond',serif; font-size:22px;font-weight:600; color:rgba(26,22,64,.75); text-transform:none;letter-spacing:.2px; flex-shrink:0; position:relative;top:0; } /* Zodiac sign — bold, planet color, well visible */ .pc-sep{display:none} .pc-diamond{display:none} .pc-sign-row{display:contents;} .pc-sign{ font-family:'DM Sans',sans-serif; font-size:14px;font-weight:700; color:var(--ac,#aaa); display:block; margin-top:7px; margin-bottom:0; filter:brightness(.62) saturate(1.6); letter-spacing:.15px; } /* Thin divider between sign and badges */ .pc-badges-left{ display:flex;flex-wrap:wrap;gap:5px; margin-top:12px; } /* Badges */ .pc-exalted-stamp{ display:none; padding:3px 10px; background:rgba(201,168,76,.13); border:1px solid rgba(201,168,76,.42); border-radius:999px; font-family:'DM Sans',sans-serif;font-size:8.5px;font-weight:700; color:#8A5A10;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap; position:static; } .pc-card[data-exalted] .pc-exalted-stamp{display:inline-flex;align-items:center;} .pc-status{ padding:4px 13px;border-radius:999px; font-family:'DM Sans',sans-serif;font-size:8.5px;font-weight:700; text-transform:uppercase;letter-spacing:.8px;flex-shrink:0; position:static;top:auto;right:auto;margin-top:0; line-height:1.6; } .pc-status.direct{background:rgba(40,160,90,.10);border:1px solid rgba(40,160,90,.32);color:#1A7A4A} .pc-status.retro{ background:rgba(200,80,20,.09);border:1px solid rgba(200,80,20,.28);color:#B84A10; animation:pc-tick-flicker 4s ease-in-out infinite; } .pc-status.always-retro{background:rgba(100,80,180,.10);border:1px solid rgba(100,80,180,.32);color:#5840A8} /* Big sphere — right side */ .pc-sphere{ position:relative;top:auto;right:auto; width:110px;height:110px;border-radius:50%;overflow:visible; display:flex;align-items:center;justify-content:center; filter:drop-shadow(0 4px 10px rgba(0,0,0,.15)); } .pc-shimmer{ display:none; } .pc-rim{ position:absolute;inset:0;border-radius:50%; box-shadow:inset 3px 3px 8px rgba(255,255,255,.10); } /* Corona ring (exalted glow) around big sphere */ .pc-corona{ display:none; position:absolute;inset:-14px;border-radius:50%; pointer-events:none; animation:pc-corona-pulse 4s ease-in-out infinite; } .pc-card[data-exalted] .pc-corona{display:block} /* Retro ring — disabled */ .pc-retro-ring{display:none!important;} /* ── BOTTOM STRIP — degree + nakshatra ── */ .pc-strip{ border-top:none; padding:8px 22px 16px 22px; display:flex;flex-direction:row;align-items:baseline; gap:0;margin-top:0;flex-wrap:nowrap;letter-spacing:-.01em; } .pc-nak{ font-family:'Cormorant Garamond',serif; font-size:16px;font-weight:700; color:rgba(26,22,64,.92); letter-spacing:.1px; white-space:nowrap; } .pc-pada{ font-family:'Cormorant Garamond',serif; font-size:16px;font-weight:700; color:rgba(26,22,64,.92); letter-spacing:.1px; white-space:nowrap; } .pc-pada-num{ font-family:'Cormorant Garamond',serif; font-size:16px;font-weight:400; font-style:normal; color:rgba(26,22,64,.92); } /* big dot between nakshatra and pada */ .pc-strip-dot{ font-family:'DM Sans',sans-serif; font-size:22px;font-weight:900; color:rgba(26,22,64,.30); margin:0 6px; line-height:1; position:relative;top:1px; } /* hyphen between pada and degree */ .pc-strip-hyp{ font-family:'Cormorant Garamond',serif; font-size:16px;font-weight:400; color:rgba(26,22,64,.40); margin:0 6px; } .pc-deg{ font-family:'Cormorant Garamond',serif; font-size:16px;font-weight:700; font-style:italic; color:rgba(26,22,64,.92); letter-spacing:.04em; white-space:nowrap; } /* Esoteric hover panel */ .pc-esoteric{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.4,0,.2,1)} .pc-card:hover .pc-esoteric, .pc-card.open .pc-esoteric{max-height:520px} .pc-esoteric-inner{ border-top:1px solid rgba(152,144,200,.18); background:linear-gradient(180deg,rgba(152,144,200,.06) 0%,transparent 100%); padding:12px 18px 16px; } .pc-deity-label{ font-family:'DM Sans',sans-serif;font-size:8px;font-weight:700; color:rgba(26,22,64,.45);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:2px; } .pc-deity-name{ font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:700; color:#1A1640;letter-spacing:.2px;margin-bottom:8px; } .pc-myth{ font-family:'DM Sans',sans-serif;font-size:9px;color:rgba(26,22,64,.5); line-height:1.55;margin-bottom:10px;padding-right:8px; } .pc-mantra-box{ border:1px solid rgba(255,255,255,.1);border-radius:6px; padding:6px 10px;margin-bottom:10px; background:rgba(255,255,255,.04); } .pc-mantra-label{ font-family:'DM Sans',sans-serif;font-size:7.5px;font-weight:700; color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1px; display:block;margin-bottom:3px; } .pc-mantra{font-family:'Cormorant Garamond',serif;font-size:11px;color:var(--ac,#fff);letter-spacing:.5px} .pc-attrs{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px} .pc-attr-l{ font-family:'DM Sans',sans-serif;font-size:7.5px;font-weight:700; color:rgba(26,22,64,.4);text-transform:uppercase;letter-spacing:.8px;display:block; } .pc-attr-v{font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:500;color:rgba(26,22,64,.75)} /* Cosmic signature banner */ .sky-sig-banner{ border-left:2px solid rgba(232,192,72,.5);padding-left:16px; display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:24px; } .sky-sig-title{ font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:700; color:#E8C048;letter-spacing:.5px; } .sky-sig-sub{ font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,.35);margin-left:10px; } .sky-sig-badge{ border-radius:4px;padding:3px 10px; font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase; } /* Keyframes */ @keyframes pc-sphere-shimmer{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes pc-corona-pulse{ 0%,100%{opacity:.35;transform:scale(1) rotate(0deg)} 50%{opacity:.75;transform:scale(1.22) rotate(60deg)} } @keyframes pc-retro-glow{ 0%,100%{box-shadow:0 0 0 0 rgba(240,120,40,0)} 50%{box-shadow:0 0 0 5px rgba(240,120,40,.28)} } @keyframes pc-tick-flicker{0%,90%,100%{opacity:1}95%{opacity:.3}} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ NAKSHATRA · LAVENDER-FIRST GRADIENT SYSTEM · v3 ║ ║ ║ ║ Design rule (per section): ║ ║ 0% – 15% → compressed dark ramp (void → indigo) ║ ║ 15% – 85% → LAVENDER BODY (70% of section — dominant) ║ ║ 85% – 100% → compressed dark ramp (indigo → void) ║ ║ ║ ║ Stop mapping: ║ ║ 0% #050310 void entry ║ ║ 5% #1E1A48 quick dark ramp ║ ║ 10% #5850A8 purple shoulder — lavender transition begins ║ ║ 15% #9890CC soft lavender — readable body begins ║ ║ 50% #EAE6F8 peak brightness ║ ║ 85% #9890CC soft lavender — readable body ends ║ ║ 90% #5850A8 purple shoulder — dark transition begins ║ ║ 95% #1E1A48 quick dark ramp ║ ║ 100% #050310 void exit → matches next section / wave ║ ║ ║ ║ Result: sections feel BRIGHT. Dark = edge trim only. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ /* ─── RESET SEAM-CAUSING BRIDGE / DAWN ELEMENTS ──────────────── */ .dawn, .pre-dawn, .trust-dawn { display: none !important; } /* ─── WAVE SEPARATOR — transparent container, SVG handles the fill ── */ .nk-wave { position: relative; z-index: 20; overflow: hidden; height: 64px !important; margin: -1px 0; pointer-events: none; flex-shrink: 0; background: #050310 !important; } .nk-wave svg { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } /* ─── TRUST STRIP — transparent, floats on gradient ─────────── */ .trust { background: transparent !important; border-top: 1px solid rgba(152,144,200,.18) !important; } .trust-num { color: #1A1640 !important; } .trust-lbl { color: rgba(26,22,64,.52) !important; } .trust-stat { border-right-color: rgba(152,144,200,.22) !important; } /* ══════════════════════════════════════════════════════════════════ CANONICAL LAVENDER-FIRST BELL — all 8 content sections Lavender spans 15%→85% = 70% of every section. ══════════════════════════════════════════════════════════════════ */ /* ─── S-BIRTH ───────────────────────────────────────────────── */ .s-birth { background: radial-gradient(ellipse at 18% 40%, rgba(201,168,76,.055) 0%, transparent 45%), radial-gradient(ellipse at 82% 60%, rgba(120,100,220,.04) 0%, transparent 45%), linear-gradient(180deg, #050310 0%, #1E1A48 5%, #5850A8 10%, #9890CC 15%, #D4CFEC 35%, #EAE6F8 50%, #D4CFEC 65%, #9890CC 85%, #5850A8 90%, #1E1A48 95%, #050310 100% ) !important; position: relative; z-index: 3; isolation: isolate; overflow: hidden; } /* ─── SV3 / TOOLS ──────────────────────────────────────────── */ .sv3 { background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,.04) 0%, transparent 50%), radial-gradient(ellipse at 8% 50%, rgba(152,144,200,.05) 0%, transparent 42%), radial-gradient(ellipse at 92% 50%, rgba(152,144,200,.05) 0%, transparent 42%), linear-gradient(180deg, #050310 0%, #1E1A48 5%, #5850A8 10%, #9890CC 15%, #D4CFEC 35%, #EAE6F8 50%, #D4CFEC 65%, #9890CC 85%, #5850A8 90%, #1E1A48 95%, #050310 100% ) !important; position: relative; z-index: 4; isolation: isolate; overflow: hidden; } /* ─── S-SKY ─────────────────────────────────────────────────── */ #s-sky { background: radial-gradient(ellipse at 30% 50%, rgba(152,144,200,.05) 0%, transparent 48%), radial-gradient(ellipse at 70% 50%, rgba(88,80,168,.04) 0%, transparent 48%), linear-gradient(180deg, #050310 0%, #1E1A48 5%, #5850A8 10%, #9890CC 15%, #C8C2E4 35%, #DDD8EF 50%, #C8C2E4 65%, #9890CC 85%, #5850A8 90%, #1E1A48 95%, #050310 100% ) !important; position: relative; z-index: 5; isolation: isolate; overflow: visible; } /* ─── FK-SECTION ────────────────────────────────────────────── */ .fk-section { background: radial-gradient(ellipse at 15% 50%, rgba(201,168,76,.045) 0%, transparent 44%), radial-gradient(ellipse at 85% 50%, rgba(88,80,168,.04) 0%, transparent 44%), linear-gradient(180deg, #050310 0%, #1E1A48 5%, #5850A8 10%, #9890CC 15%, #D4CFEC 35%, #EAE6F8 50%, #D4CFEC 65%, #9890CC 85%, #5850A8 90%, #1E1A48 95%, #050310 100% ) !important; position: relative; z-index: 6; isolation: isolate; overflow: hidden; } /* ─── S-FAMOUS ──────────────────────────────────────────────── */ #s-famous { background: radial-gradient(ellipse at 20% 50%, rgba(201,168,76,.04) 0%, transparent 46%), radial-gradient(ellipse at 80% 50%, rgba(88,80,168,.045) 0%, transparent 46%), linear-gradient(180deg, #050310 0%, #1E1A48 5%, #5850A8 10%, #9890CC 15%, #D4CFEC 35%, #EAE6F8 50%, #D4CFEC 65%, #9890CC 85%, #5850A8 90%, #1E1A48 95%, #050310 100% ) !important; position: relative; z-index: 6; isolation: isolate; overflow: hidden; margin-top: 0 !important; } /* ─── S-PRICING ─────────────────────────────────────────────── */ #s-pricing { background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,.05) 0%, transparent 52%), radial-gradient(ellipse at 15% 50%, rgba(88,80,168,.04) 0%, transparent 42%), radial-gradient(ellipse at 85% 50%, rgba(88,80,168,.04) 0%, transparent 42%), linear-gradient(180deg, #050310 0%, #1E1A48 5%, #5850A8 10%, #9890CC 15%, #D4CFEC 35%, #EAE6F8 50%, #D4CFEC 65%, #9890CC 85%, #5850A8 90%, #1E1A48 95%, #050310 100% ) !important; position: relative; z-index: 7; isolation: isolate; overflow: visible; } /* ─── AL-SECTION (Articles) ─────────────────────────────────── */ .al-section { background: radial-gradient(ellipse at 10% 50%, rgba(201,168,76,.04) 0%, transparent 50%), radial-gradient(ellipse at 90% 50%, rgba(88,80,168,.04) 0%, transparent 50%), linear-gradient(180deg, #050310 0%, #1E1A48 5%, #5850A8 10%, #9890CC 15%, #D4CFEC 35%, #EAE6F8 50%, #D4CFEC 65%, #9890CC 85%, #5850A8 90%, #1E1A48 95%, #050310 100% ) !important; position: relative; z-index: 8; isolation: isolate; overflow: hidden; } /* ─── FAQ2-SECTION ──────────────────────────────────────────── */ .faq2-section { background: linear-gradient(180deg,#ddd8f0 0%,#E6E1F5 50%,#DDD8F0 100%); position: relative; z-index: 8; isolation: isolate; overflow: hidden; margin-bottom: 0 !important; } /* ─── FOOTER — dark base, intentional ───────────────────────── */ footer.ft { background: linear-gradient(180deg, #050310 0%, #0E0A22 20%, #1A1640 60%, #1A1640 100% ) !important; } /* ─── DAWN RIVER CONNECTOR (Ganga diya full-width div) ──────── Dark edges that match surrounding void sections, transparent in the middle so the SVG painted scene shows through. */ div[style*="height:420px"] { background: linear-gradient(180deg, #050310 0%, #050310 8%, #0B0820 14%, transparent 26%, transparent 68%, #0B0820 80%, #050310 92%, #050310 100% ) !important; } /* ══════════════════════════════════════════════════════════════════ TEXT CONTRAST SYSTEM v3 ───────────────────────────────────────────────────────────────── Two semantic surface types, defined at section level. Everything inside inherits unless it has its own override (e.g. premium card has dark bg → its inline #EAE6F8 stays). .dark-section → hero, footer → light text .light-section → all lavender bell sections → dark text The section selectors below act as the .dark-section / .light-section rules without adding new HTML classes. ══════════════════════════════════════════════════════════════════ */ /* ── DARK SECTIONS (hero, footer) — light text ─────────────────── */ .hero, footer.ft { color: #1A1640; } .hero h1, .hero h2, .hero h3, .hero p, .hero span, .hero a, footer.ft h1, footer.ft h2, footer.ft p, footer.ft span, footer.ft a { color: inherit; } footer.ft a.ft-logo, footer.ft a.ft-logo em { color: #FFFFFF !important; } /* ── LIGHT SECTIONS (lavender bell — 70% of each is bright) ─────── */ .s-birth, .sv3, #s-sky, .fk-section, #s-famous, #s-pricing, .al-section, .faq2-section { color: #1A1640; } /* Cascade to all unspecified text inside light sections */ .s-birth h1,.s-birth h2,.s-birth h3,.s-birth h4,.s-birth p,.s-birth span, .sv3 h1,.sv3 h2,.sv3 h3,.sv3 h4,.sv3 p,.sv3 span, #s-sky h1,#s-sky h2,#s-sky h3,#s-sky h4,#s-sky p,#s-sky span, .fk-section h1,.fk-section h2,.fk-section h3,.fk-section p,.fk-section span, #s-famous h1,#s-famous h2,#s-famous h3,#s-famous p,#s-famous span, #s-pricing h1,#s-pricing h2,#s-pricing h3,#s-pricing p,#s-pricing span, .al-section h1,.al-section h2,.al-section h3,.al-section p,.al-section span, .faq2-section h1,.faq2-section h2,.faq2-section h3,.faq2-section p,.faq2-section span { color: inherit; } /* ── NAMED COMPONENT OVERRIDES — precise dark-on-lavender ──────── These lock individual components that don't inherit correctly. */ /* Hero — preserve original gold/white colors (they sit on the dark sky SVG, not lavender) */ .hero-h1 { color: #EAE6F8 !important; } .hero-h1 em { color: rgba(234,230,248,.72) !important; } .hero-cta-hint-shloka { color: #FFE9A0 !important; } .hero-cta-hint-translation { color: rgba(255,255,255,.7) !important; } .live-badge { background: rgba(26,22,64,.6) !important; border-color: rgba(201,168,76,.25) !important; color: rgba(201,168,76,.8) !important; } .live-dot { background: #C9A84C !important; box-shadow: 0 0 8px #C9A84C !important; } .live-txt { color: rgba(201,168,76,.8) !important; } /* Birth section */ .birth-h { color: #1A1640 !important; } .birth-h em { color: rgba(26,22,64,.72) !important; } .birth-badge { color: #C9A84C !important; } .birth-sub { color: rgba(26,22,64,.62) !important; } /* Tools / sv3 */ .sv3-title { color: #1A1640 !important; } .sv3-title em { color: rgba(26,22,64,.7) !important; } .sv3-title strong { color: #1A1640 !important; } .sv3-desc { color: rgba(26,22,64,.7) !important; } .sv3-eyebrow { color: #C9A84C !important; } .sv3-ti { color: rgba(26,22,64,.52) !important; } .sv3-trust { background: rgba(255,255,255,.5) !important; border-color: rgba(152,144,200,.3) !important; } /* Tools left-panel (shared classes) */ .h2 { color: #1A1640 !important; } .h2 em { color: rgba(26,22,64,.68) !important; } .eyebrow { color: #C9A84C !important; } .body-text { color: rgba(26,22,64,.68) !important; } .tag-pill { color: #5850A8 !important; background: rgba(152,144,200,.14) !important; } /* Famous Kundli section */ .fk-h2 { color: #1A1640 !important; } .fk-h2 em { color: rgba(26,22,64,.68) !important; } .fk-eyebrow { color: #C9A84C !important; } .fk-sub { color: rgba(26,22,64,.58) !important; } /* Famous charts section */ .fmk-title { color: #1A1640 !important; } .fmk-title strong { color: #FFFFFF !important; } .fmk-title em { color: rgba(26,22,64,.68) !important; } .fmk-eyebrow { color: #C9A84C !important; } .fmk-sub { color: rgba(10,6,32,.82) !important; } .fmk-note { color: rgba(10,6,32,.55) !important; } /* Articles section */ .al-h2 { color: #1A1640 !important; } .al-h2 em { color: rgba(26,22,64,.62) !important; } .al-sub { color: rgba(26,22,64,.56) !important; } .al-eyebrow { color: #C9A84C !important; } .al-eyebrow-line { background: linear-gradient(90deg,transparent,rgba(201,168,76,.5)) !important; } .al-eyebrow-line-r { background: linear-gradient(90deg,rgba(201,168,76,.5),transparent) !important; } /* FAQ section */ .faq2-section > div > h2, .faq2-section > .faq2-hd > h2 { color: #1A1640 !important; } .faq2-question { color: #1A1640 !important; } .faq2-answer { color: rgba(26,22,64,.72) !important; } /* Pricing section — section bg is lavender, dark text as default */ .pricing-h2 { color: #1A1640 !important; } /* pricing sub text that had inline black */ #s-pricing p[style*="color:#000000"], #s-pricing p[style*="color: #000000"] { color: rgba(26,22,64,.7) !important; } /* Premium card overrides: card itself is DARK, so light text is correct there. Its inline color:#EAE6F8 beats the section rule — intentional, leave it. */ /* Trust strip — floats on lavender body of section above pricing */ .trust-num { color: #1A1640 !important; } .trust-lbl { color: rgba(26,22,64,.52) !important; } .trust-stat { border-right-color: rgba(152,144,200,.22) !important; } /* ─── SVG WAVE PATH FILL — must match void body colour ──────── */ .nk-wave svg path[fill="#04020C"], .nk-wave svg path[fill="url(#wgW1)"], .nk-wave svg path[fill="url(#wgW2)"], .nk-wave svg path[fill="url(#wgW3)"], .nk-wave svg path[fill="url(#wgW4)"], .nk-wave svg path[fill="url(#wgW5)"], .nk-wave svg path[fill="url(#wgW6)"], .nk-wave svg path[fill="url(#wgW7)"], .nk-wave svg path[fill="url(#wgW8)"] { fill: #050310; } /* ─── RESPONSIVE ────────────────────────────────────────────── */ @media (max-width: 768px) { .nk-wave { height: 48px !important; } .s-birth, .sv3, .fk-section, #s-famous, #s-pricing, .al-section, .faq2-section { isolation: isolate; overflow: hidden; } #s-sky { overflow: visible !important; } } @media (max-width: 480px) { .nk-wave { height: 40px !important; } } @media (max-width: 768px) { .nav-logo-desk { font-size: 1.15rem !important; /* Slightly smaller for mobile header */ } } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ════════════════════════════════════════════════════ PROBLEM 1 — REMOVE HORIZONTAL LINE UNDER WAVES ════════════════════════════════════════════════════ Root cause: each wave SVG contains a with a gold stroke="rgba(201,168,76,.18)" at the crest. This renders as a full-width thin line directly at the wave transition point. Suppressing the stroke removes it. Also eliminate the margin artifact on the wave container. ════════════════════════════════════════════════════ */ /* Suppress the gold crest stroke path inside every wave SVG */ .nk-wave svg path[fill="none"] { stroke: none !important; stroke-width: 0 !important; } /* Remove margin artifact that can cause 1 px seam at boundaries */ .nk-wave { margin: 0 !important; } /* Remove decorative 1 px lines that flank section eyebrow labels — they show on dark bg as unwanted ruled lines */ .al-eyebrow-line, .al-eyebrow-line-r, .fk-eyebrow-line, .fk-eyebrow-line-r { display: none !important; } /* Suppress inline height:1px divider lines inside faq2 header (the gradient hr flanking "Common Questions" and the OM divider) */ .faq2-section div[style*="height:1px"] { display: none !important; } /* Suppress inline height:1px gold rule inside pricing header */ #s-pricing div[style*="height:1px"] { display: none !important; } /* Remove border-top from trust strip in case it renders */ .trust { border-top: none !important; } /* ════════════════════════════════════════════════════ PROBLEM 2 — WHITE TEXT ON DARK SECTION BACKGROUNDS ════════════════════════════════════════════════════ All 8 content sections use a bell-curve gradient that starts void-dark at 0 % (≈ #050310) and goes light at 50 %. The section heading block sits inside that dark top zone. Overriding every named heading class and inline-coloured element to white/light makes them readable without touching any card or tool content. ════════════════════════════════════════════════════ */ /* ── s-birth ─────────────────────────────────────── */ .birth-h { color: #EAE6F8 !important; } .birth-h em { color: rgba(234,230,248,.78) !important; } .birth-h strong { color: #EAE6F8 !important; } .birth-sub { color: rgba(234,230,248,.72) !important; } .birth-badge { color: #C9A84C !important; } /* ── sv3 / tools ─────────────────────────────────── */ .sv3-title { color: #EAE6F8 !important; } .sv3-title em { color: rgba(234,230,248,.80) !important; } .sv3-title strong { color: #EAE6F8 !important; } .sv3-desc { color: rgba(234,230,248,.72) !important; } .sv3-eyebrow { color: #C9A84C !important; } .sv3-sn { color: #0A0620 !important; } .sv3-sl { color: #3A3460 !important; } .sv3-ti { color: rgba(234,230,248,.58) !important; } .sv3-cat-lbl { color: rgba(234,230,248,.55) !important; } /* sv3-stats box — glass pill on dark bg needs lighter border */ .sv3-stats { border-color: rgba(255,255,255,.9) !important; } /* ── shared heading utility classes used in several sections ── */ .h2 { color: #EAE6F8 !important; } .h2 em { color: rgba(234,230,248,.78) !important; } .eyebrow { color: #C9A84C !important; } .body-text { color: rgba(234,230,248,.72) !important; } /* ── #s-sky — h2 and subtitle use inline styles, no class ───── */ /* !important in a stylesheet beats inline non-!important style */ #s-sky h2 { color: #EAE6F8 !important; } #s-sky h2 em { color: rgba(234,230,248,.80) !important; } #s-sky h2 strong { color: #EAE6F8 !important; } #s-sky > div > p { color: rgba(234,230,248,.70) !important; } /* date badge inside sky header — readable on dark */ #s-sky span[id="sky-date"] { color: rgba(234,230,248,.82) !important; } /* ── fk-section (Famous Kundlis tools) ──────────── */ .fk-h2 { color: #EAE6F8 !important; } .fk-h2 em { color: rgba(234,230,248,.78) !important; } .fk-eyebrow { color: #C9A84C !important; } .fk-sub { color: rgba(234,230,248,.68) !important; } /* ── #s-famous (Famous charts) ─────────────────── */ .fmk-title { color: #EAE6F8 !important; } .fmk-title em { color: rgba(234,230,248,.78) !important; } .fmk-eyebrow { color: #C9A84C !important; } .fmk-sub { color: rgba(234,230,248,.68) !important; } .fmk-note { color: rgba(201,168,76,.85) !important; } /* ── #s-pricing ─────────────────────────────────── */ /* .pricing-h2 has inline color:#1A1640; !important wins */ .pricing-h2 { color: #EAE6F8 !important; } /* pricing eyebrow (already gold; keep it) */ .pricing-eyebrow { color: rgba(201,168,76,.92) !important; } /* Inline subtitle paragraph had color:#000000 */ #s-pricing p[style*="color:#000000"], #s-pricing p[style*="color: #000000"] { color: rgba(234,230,248,.72) !important; } /* Pricing sub-header text nodes that inherit dark */ #s-pricing > div > div > p { color: rgba(234,230,248,.72) !important; } /* ── al-section (Articles) ──────────────────────── */ .al-h2 { color: #EAE6F8 !important; } .al-h2 em { color: rgba(234,230,248,.72) !important; } .al-sub { color: rgba(234,230,248,.66) !important; } .al-eyebrow { color: #C9A84C !important; } /* ── faq2-section ───────────────────────────────── */ /* h2 has only inline color:#0E0C28; !important wins */ .faq2-section h2 { color: #EAE6F8 !important; } .faq2-section h2 em { color: rgba(234,230,248,.80) !important; } .faq2-section h2 strong { color: #EAE6F8 !important; } /* Eyebrow span (inline color:rgba(26,22,64,.7)) */ .faq2-section > div > div[style*="text-align:center"] span { color: rgba(234,230,248,.72) !important; } /* Subtitle paragraph (inline color:rgba(14,12,40,.6)) */ .faq2-section > div > div[style*="text-align:center"] p { color: rgba(234,230,248,.70) !important; } /* OM symbol span in faq2 OM divider */ .faq2-section > div > div[style*="align-items:center"] > span { color: rgba(234,230,248,.45) !important; } /* Protect card content — faq2-card sits on glass/light bg, */ /* its text must stay dark for readability */ .faq2-question { color: #1A1640 !important; } .faq2-answer { color: rgba(26,22,64,.72) !important; } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } .nk-seo-desc{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── HAMBURGER NAV ── */ .mob-menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; -webkit-tap-highlight-color: transparent; z-index: 600; flex-shrink: 0; } .mob-menu-btn span { display: block; width: 22px; height: 2px; background: #EAE6F8; border-radius: 2px; transition: transform .28s ease, opacity .22s ease, width .22s ease; transform-origin: center; } .mob-menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mob-menu-btn.is-open span:nth-child(2) { opacity: 0; width: 0; } .mob-menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mob-nav-drawer { display: none; position: fixed; top: 48px; left: 0; right: 0; background: rgba(10, 8, 28, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(201,168,76,.2); z-index: 499; padding: 8px 0 16px; transform: translateY(-8px); opacity: 0; transition: transform .28s ease, opacity .22s ease; pointer-events: none; } .mob-nav-drawer.is-open { transform: translateY(0); opacity: 1; pointer-events: all; } .mob-nav-drawer a { display: flex; align-items: center; padding: 13px 24px; font-family: 'DM Sans', sans-serif; font-size: .85rem; color: rgba(234,230,248,.75); text-decoration: none; letter-spacing: .03em; border-bottom: 1px solid rgba(200,192,240,.07); transition: color .18s, background .18s; } .mob-nav-drawer a:last-child { border-bottom: none; } .mob-nav-drawer a:active { background: rgba(201,168,76,.08); color: #EAE6F8; } .mob-nav-drawer a.gold { color: #C9A84C; font-weight: 600; } .mob-nav-drawer a.gold:active { background: rgba(201,168,76,.12); } @media (max-width: 768px) { .mob-menu-btn { display: flex !important; margin-left: auto; } .desk-nav { display: none !important; } .mob-nav-drawer { display: block; } header[role="banner"] { height: 48px !important; justify-content: flex-end; padding: 0 18px !important; } } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── LAPTOP NAV UPGRADE ── */ @media (min-width: 769px) { header[role="banner"] { height: 62px !important; padding: 0 clamp(24px, 4vw, 64px) !important; background: rgba(8, 6, 24, 0.92) !important; border-bottom: 1px solid rgba(201,168,76,.14) !important; } header[role="banner"]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.35) 30%, rgba(201,168,76,.55) 50%, rgba(201,168,76,.35) 70%, transparent 100%); pointer-events: none; } /* Logo */ .nav-logo-desk { font-family: 'DM Sans', sans-serif; font-size: 1.45rem !important; font-weight: 700; letter-spacing: .1em; color: #EAE6F8; text-decoration: none; flex-shrink: 0; transition: opacity .2s; } .nav-logo-desk:hover { opacity: .8; } /* Nav links */ .desk-nav-link { position: relative; font-family: 'DM Sans', sans-serif; font-size: .92rem; font-weight: 500; letter-spacing: .12em; color: rgba(234,230,248,.92); text-decoration: none; white-space: nowrap; text-transform: uppercase; transition: color .22s; padding: 4px 8px; } .desk-nav-link::after { content: ''; position: absolute; bottom: -2px; left: 8px; right: 8px; height: 1px; background: #C9A84C; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .desk-nav-link:hover { color: #FFFFFF; } .desk-nav-link:hover::after { transform: scaleX(1); } /* Premium CTA (disabled) */ .desk-nav-cta { font-family: 'DM Sans', sans-serif; font-size: .84rem; font-weight: 600; color: #C9A84C; text-decoration: none; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding: 9px 28px; border: 1px solid rgba(201,168,76,.4); border-radius: 999px; background: rgba(201,168,76,.06); transition: background .22s, border-color .22s, color .22s, box-shadow .22s; } .desk-nav-cta:hover { background: rgba(201,168,76,.14); border-color: rgba(201,168,76,.75); color: #E8C97A; box-shadow: 0 0 18px rgba(201,168,76,.2); } } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ═══════════════════════════════════════ TOOLS V3 — Complete Redesign ═══════════════════════════════════════ */ /* ── CORNER CHANDELIERS ── */ .sv3-corner-chand{ position:absolute; top:0; width:clamp(75px,8.5vw,118px); pointer-events:none; z-index:3; overflow:hidden; display:block; } .sv3-corner-chand-l{ left:40px; } .sv3-corner-chand-r{ right:40px; } .sv3-cc-dangle-l{transform-box:fill-box;transform-origin:top center;animation:ccSwayL 5s cubic-bezier(.37,.0,.63,1) infinite} .sv3-cc-dangle-r{transform-box:fill-box;transform-origin:top center;animation:ccSwayR 5.4s cubic-bezier(.37,.0,.63,1) infinite} @keyframes ccSwayL{ 0%{transform:rotate(-4.5deg)} 25%{transform:rotate(4.5deg)} 50%{transform:rotate(-3deg)} 75%{transform:rotate(3.8deg)} 100%{transform:rotate(-4.5deg)} } @keyframes ccSwayR{ 0%{transform:rotate(4.5deg)} 25%{transform:rotate(-4.5deg)} 50%{transform:rotate(3deg)} 75%{transform:rotate(-3.8deg)} 100%{transform:rotate(4.5deg)} } .cc-sa{animation:ccShim 3.2s ease-in-out 0.0s infinite} .cc-sb{animation:ccShim 3.2s ease-in-out 0.5s infinite} .cc-sc{animation:ccShim 3.2s ease-in-out 1.0s infinite} .cc-sd{animation:ccShim 3.2s ease-in-out 1.5s infinite} .cc-se{animation:ccShim 3.2s ease-in-out 2.0s infinite} .cc-sf{animation:ccShim 3.2s ease-in-out 2.5s infinite} @keyframes ccShim{0%,100%{opacity:.65}50%{opacity:1}} .cc-h1{transform-box:fill-box;transform-origin:center;animation:ccHalo 4s ease-in-out 0s infinite} .cc-h2{transform-box:fill-box;transform-origin:center;animation:ccHalo 4s ease-in-out 1s infinite} @keyframes ccHalo{0%,100%{opacity:.08;transform:scale(.93)}50%{opacity:.38;transform:scale(1.14)}} .cc-sp{transform-box:fill-box;transform-origin:center;animation:ccSpark 2.6s ease-in-out infinite} .cc-sp1{animation-delay:0s}.cc-sp2{animation-delay:.8s}.cc-sp3{animation-delay:1.6s} @keyframes ccSpark{0%,100%{opacity:.1;transform:scale(.5)}50%{opacity:.9;transform:scale(1.2)}} .sv3{ position:relative;z-index:4;isolation:isolate;overflow:hidden; /* background overridden by v2 gradient system below */ padding:0 0 460px; } .sv3-hero{ position:relative;z-index:10; text-align:center; padding:16px clamp(20px,5vw,80px) 0; } .sv3-eyebrow{ font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:500; color:#C9A84C;text-transform:uppercase;letter-spacing:.22em; display:block;margin-bottom:18px; animation:fadeUp .5s .1s both; } .sv3-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(52px,7vw,96px); line-height:.94;letter-spacing:-.01em; color:#1A1640;margin-bottom:22px; animation:fadeUp .55s .2s both; } .sv3-title em{font-style:italic;font-weight:400;color:rgba(26,22,64,.88)} .sv3-title strong{font-style:normal;font-weight:700;color:#1A1640} .sv3-desc{ font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.72; color:rgba(26,22,64,.82);max-width:560px;margin:0 auto 26px; animation:fadeUp .5s .3s both; } /* Trust pill row */ .sv3-trust{ display:inline-flex;align-items:center; background:rgba(255,255,255,.5); border:1px solid rgba(152,144,200,.25); border-radius:999px; backdrop-filter:blur(14px); padding:7px 6px;gap:0; animation:fadeUp .5s .4s both; flex-wrap:wrap;justify-content:center; } .sv3-ti{ font-family:'IBM Plex Mono',monospace;font-size:.6rem; color:rgba(26,22,64,.5);letter-spacing:.05em; padding:2px 14px;display:flex;align-items:center;gap:7px; white-space:nowrap; } .sv3-ti+.sv3-ti{border-left:1px solid rgba(152,144,200,.2)} .sv3-tid{width:4px;height:4px;border-radius:50%;background:#C9A84C;flex-shrink:0} /* ── STATS INLINE (horizontal, light) ──── */ .sv3-stats{ display:flex;align-items:center;justify-content:center; gap:0;margin:20px auto 0;max-width:640px; border:1.5px solid rgba(255,255,255,.9); border-radius:14px;overflow:hidden; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); animation:fadeUp .5s .5s both; box-shadow:0 4px 24px rgba(10,6,40,.18); } .sv3-garland{ display:block; width:100%;max-width:640px; margin:0 auto; overflow:visible; margin-top:-1px; } .sv3-stat{ flex:1;padding:18px 10px;text-align:center; border-right:1px solid rgba(0,0,0,.1); } .sv3-stat:last-child{border-right:none} .sv3-sn{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:700; color:#0A0620;line-height:1;display:block; } .sv3-sl{ font-family:'DM Sans',sans-serif;font-size:.58rem;font-weight:600; text-transform:uppercase;letter-spacing:.12em;color:#3A3460; margin-top:3px;display:block; } /* ── DECORATIVE RULE ────────── */ .sv3-rule{ width:100%;max-width:900px;margin:56px auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(152,144,200,.3) 30%,rgba(201,168,76,.35) 50%,rgba(152,144,200,.3) 70%,transparent); position:relative;z-index:10; } /* ── CATEGORY LABEL ─────────── */ .sv3-cat{ position:relative;z-index:10; max-width:1260px;margin:0 auto; padding:20px clamp(16px,4vw,60px) 0; } .sv3-cat-hd{ display:flex;align-items:center;gap:14px; margin-bottom:24px; } .sv3-cat-gem{ width:9px;height:9px;border-radius:1px; background:#C9A84C;transform:rotate(45deg);flex-shrink:0; } .sv3-cat-lbl{ font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700; text-transform:uppercase;letter-spacing:.18em;color:rgba(26,22,64,.65); } /* adaptive: as section darkens, label brightens */ .sv3-dark .sv3-cat-lbl{color:rgba(234,230,248,.55)} .sv3-dark .sv3-cat-gem{background:#C9A84C} /* ── CARD GRID ──────────────── */ .sv3-grid{display:grid;gap:12px;align-items:stretch;} .sv3-g2{grid-template-columns:repeat(2,1fr)} .sv3-g3{grid-template-columns:repeat(3,1fr)} .sv3-g4{grid-template-columns:repeat(4,1fr)} .sv3-span2{grid-column:span 2} /* ── BASE CARD ──────────────── */ .sv3-card{ position:relative;overflow:hidden; border-radius:20px; padding:26px 24px 22px; cursor:pointer; display:flex;flex-direction:column; height:100%; box-sizing:border-box; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .25s; opacity:0;transform:translateY(22px); /* mobile: eliminate tap delay and highlight flash */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .sv3-card.vis{ opacity:1;transform:translateY(0); transition:opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1), box-shadow .35s,border-color .25s; } @keyframes cardShimmer{ 0%{transform:translateX(-100%) skewX(-12deg)} 100%{transform:translateX(220%) skewX(-12deg)} } .sv3-card::after{ content:'';position:absolute;inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%); opacity:0;pointer-events:none; } .sv3-card:hover::after{opacity:1;animation:cardShimmer .65s ease forwards} /* Light cards */ .sv3-card-lt{ background:linear-gradient(148deg,rgba(255,255,255,.78) 0%,rgba(236,232,255,.6) 100%); border:1px solid rgba(180,172,228,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(140,132,200,.06), 0 2px 12px rgba(88,80,168,.06), 0 8px 32px rgba(88,80,168,.05); } .sv3-card-lt:hover{ transform:translateY(-7px); border-color:rgba(152,144,210,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 48px rgba(88,80,168,.16), 0 4px 12px rgba(88,80,168,.08); } /* Mid cards */ .sv3-card-md{ background:linear-gradient(148deg,rgba(255,255,255,.24) 0%,rgba(192,184,248,.16) 100%); border:1px solid rgba(200,192,240,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.52), inset 0 -1px 0 rgba(80,70,160,.08), 0 2px 16px rgba(58,48,120,.1); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .sv3-card-md:hover{ transform:translateY(-7px); background:linear-gradient(148deg,rgba(255,255,255,.34) 0%,rgba(200,192,255,.24) 100%); border-color:rgba(200,192,240,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 20px 56px rgba(58,48,120,.22), 0 4px 12px rgba(58,48,120,.1); } /* Dark cards */ .sv3-card-dk{ background:linear-gradient(148deg,rgba(88,76,172,.32) 0%,rgba(44,34,108,.48) 100%); border:1px solid rgba(148,136,220,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.12), 0 2px 20px rgba(0,0,0,.3), 0 8px 32px rgba(0,0,0,.18); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } .sv3-card-dk:hover{ transform:translateY(-7px); background:linear-gradient(148deg,rgba(108,94,200,.4) 0%,rgba(60,46,136,.56) 100%); border-color:rgba(180,168,248,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 24px 64px rgba(0,0,0,.42), 0 8px 20px rgba(0,0,0,.2); } /* Gold card */ .sv3-card-gold{ background:linear-gradient(148deg,rgba(255,248,215,.65) 0%,rgba(244,220,148,.32) 60%,rgba(201,168,76,.14) 100%); border:1px solid rgba(201,168,76,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(160,120,40,.06), 0 2px 12px rgba(160,120,40,.08), 0 8px 32px rgba(160,120,40,.07); } .sv3-card-gold:hover{ transform:translateY(-7px); background:linear-gradient(148deg,rgba(255,250,224,.78) 0%,rgba(244,224,160,.44) 60%,rgba(201,168,76,.22) 100%); border-color:rgba(201,168,76,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 20px 56px rgba(160,120,40,.16), 0 4px 12px rgba(160,120,40,.08); } /* ── BADGE ── */ .sv3-badge{ position:absolute;top:16px;right:16px; font-family:'DM Sans',sans-serif;font-size:.52rem;font-weight:700; text-transform:uppercase;letter-spacing:.12em; padding:4px 10px;border-radius:999px; backdrop-filter:blur(8px); } .sv3-bp{background:rgba(201,168,76,.16);color:#8A6010;border:1px solid rgba(201,168,76,.38)} .sv3-ba{background:rgba(88,78,190,.12);color:#4840A0;border:1px solid rgba(88,78,190,.3)} .sv3-bn{background:rgba(40,152,120,.12);color:#1A7858;border:1px solid rgba(40,152,120,.28)} .sv3-card-dk .sv3-bp{background:rgba(201,168,76,.2);color:#E8C97A;border-color:rgba(201,168,76,.45)} .sv3-card-dk .sv3-ba{background:rgba(160,148,255,.14);color:#C0B8F8;border-color:rgba(160,148,255,.3)} .sv3-card-dk .sv3-bn{background:rgba(80,200,168,.14);color:#7ADCC8;border-color:rgba(80,200,168,.28)} .sv3-card-md .sv3-bp{background:rgba(201,168,76,.16);color:#C9A84C;border-color:rgba(201,168,76,.38)} .sv3-card-md .sv3-ba{background:rgba(120,108,228,.14);color:#9890D8;border-color:rgba(120,108,228,.28)} .sv3-card-md .sv3-bn{background:rgba(56,168,140,.14);color:#4CA898;border-color:rgba(56,168,140,.28)} /* ── ICON WRAP ── */ .sv3-icon-wrap{ width:52px;height:52px;border-radius:15px; display:flex;align-items:center;justify-content:center; margin-bottom:18px;flex-shrink:0; background:linear-gradient(145deg,rgba(152,144,200,.2) 0%,rgba(120,112,180,.1) 100%); border:1px solid rgba(152,144,200,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 2px 8px rgba(88,80,168,.07); } .sv3-card-gold .sv3-icon-wrap{ background:linear-gradient(145deg,rgba(201,168,76,.2) 0%,rgba(180,140,50,.1) 100%); border-color:rgba(201,168,76,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 2px 8px rgba(160,120,40,.1); } .sv3-card-md .sv3-icon-wrap{ background:linear-gradient(145deg,rgba(200,192,248,.22) 0%,rgba(160,148,228,.12) 100%); border-color:rgba(200,192,240,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 2px 8px rgba(58,48,120,.1); } .sv3-card-dk .sv3-icon-wrap{ background:linear-gradient(145deg,rgba(180,168,255,.16) 0%,rgba(120,108,220,.09) 100%); border-color:rgba(180,168,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 12px rgba(0,0,0,.25); } .sv3-icon{width:26px;height:26px;display:block} /* ── CARD TEXT ── */ .sv3-name{ font-family:'Cormorant Garamond',serif; font-size:1.24rem;font-weight:700;letter-spacing:.01em; color:#18144A;margin-bottom:6px;line-height:1.15; } .sv3-card-md .sv3-name{color:rgba(242,238,255,.97)} .sv3-card-dk .sv3-name{color:rgba(242,238,255,1)} .sv3-card-gold .sv3-name{color:#281808} .sv3-sub{ font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:400; color:#524898;line-height:1.6;margin-bottom:12px; } .sv3-card-md .sv3-sub{color:rgba(222,216,255,.85)} .sv3-card-dk .sv3-sub{color:rgba(214,208,255,.8)} .sv3-card-gold .sv3-sub{color:rgba(72,48,8,.7)} /* Hint chips — readable pill tags */ .sv3-hint{ display:flex;flex-wrap:wrap;gap:5px; margin-bottom:12px; flex:1; align-content:flex-start; } .sv3-hint-chip{ font-family:'IBM Plex Mono',monospace;font-size:.59rem; letter-spacing:.015em;line-height:1; padding:5px 9px;border-radius:7px;white-space:nowrap; background:rgba(88,80,168,.09); border:1px solid rgba(120,112,200,.18); color:rgba(50,40,128,.82); } .sv3-card-gold .sv3-hint-chip{ background:rgba(160,120,40,.1);border-color:rgba(160,120,40,.2);color:rgba(88,60,8,.75); } .sv3-card-md .sv3-hint-chip{ background:rgba(200,192,248,.15);border-color:rgba(200,192,248,.24);color:rgba(224,218,255,.82); } .sv3-card-dk .sv3-hint-chip{ background:rgba(180,168,255,.12);border-color:rgba(180,168,255,.2);color:rgba(212,206,255,.75); } /* Free tag */ .sv3-tag{ display:inline-flex;align-items:center;gap:5px; padding:5px 12px;border-radius:999px; font-family:'DM Sans',sans-serif;font-size:.63rem;font-weight:500; background:rgba(40,188,128,.1); border:1px solid rgba(40,188,128,.24); color:rgba(16,108,68,.85); margin-top:auto; align-self:flex-start; flex-shrink:0; } .sv3-card-md .sv3-tag,.sv3-card-dk .sv3-tag{ background:rgba(56,220,168,.1);border-color:rgba(56,220,168,.22);color:rgba(100,220,175,.92); } .sv3-card-gold .sv3-tag{ background:rgba(40,188,128,.1);border-color:rgba(40,188,128,.26);color:rgba(16,108,68,.88); } .sv3-tag::before{ content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;flex-shrink:0; } /* ── HOVER PEEK ── */ .sv3-peek{ position:absolute;bottom:0;left:0;right:0; padding:32px 20px 18px; transform:translateY(100%); transition:transform .32s cubic-bezier(.22,1,.36,1); pointer-events:none;border-radius:0 0 20px 20px; } .sv3-card-lt .sv3-peek{ background:linear-gradient(to top,rgba(50,38,128,.97) 0%,rgba(50,38,128,.85) 55%,transparent 100%); } .sv3-card-md .sv3-peek{ background:linear-gradient(to top,rgba(30,22,90,.99) 0%,rgba(30,22,90,.9) 55%,transparent 100%); } .sv3-card-dk .sv3-peek{ background:linear-gradient(to top,rgba(14,8,50,1) 0%,rgba(14,8,50,.93) 55%,transparent 100%); } .sv3-card-gold .sv3-peek{ background:linear-gradient(to top,rgba(32,20,4,.98) 0%,rgba(32,20,4,.88) 55%,transparent 100%); } .sv3-card:hover .sv3-peek{transform:translateY(100%)} .sv3-peek-txt{ font-family:'IBM Plex Mono',monospace;font-size:.61rem; color:rgba(234,230,248,.92);letter-spacing:.025em;line-height:1.78; } /* ── BG DECO ── */ .sv3-bg-deco{ position:absolute;bottom:-6px;right:-6px; pointer-events:none;opacity:.06; } .sv3-card-dk .sv3-bg-deco{opacity:.1} .sv3-card-gold .sv3-bg-deco{opacity:.08} /* ── WIDE CARD LAYOUT ────────── */ .sv3-wide-inner{display:flex;align-items:flex-start;gap:28px} .sv3-kundali-chart{flex-shrink:0;opacity:1;filter:drop-shadow(0 2px 12px rgba(88,80,168,.18))} .sv3-wide-text{flex:1;min-width:0} /* ── DASHA TIMELINE (redesigned) ─ */ .sv3-dasha-timeline{ margin:12px 0 14px; position:relative; } .sv3-dasha-track{ display:flex;height:6px;border-radius:999px;overflow:hidden; gap:2px;margin-bottom:8px; background:rgba(0,0,0,.08); } .sv3-dasha-seg{ height:100%;border-radius:999px; transition:opacity .2s; flex-shrink:0; } .sv3-dasha-seg.sv3-active{ box-shadow:0 0 8px rgba(201,168,76,.6); } .sv3-dasha-labels{ display:flex;gap:2px;align-items:center; } .sv3-dl{ font-family:'IBM Plex Mono',monospace;font-size:.52rem; color:rgba(26,22,64,.35);text-align:center;flex-shrink:0; transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .sv3-dl.sv3-active{ color:#C9A84C;font-weight:600;font-size:.56rem; } .sv3-dasha-current{ font-family:'IBM Plex Mono',monospace;font-size:.58rem; color:rgba(26,22,64,.5);display:flex;align-items:center;gap:6px; margin-top:4px; } .sv3-dasha-dot{ width:6px;height:6px;border-radius:50%;background:#C9A84C; animation:livePulse 2s ease-in-out infinite;flex-shrink:0; } /* ── SECTION DIVIDER ────────── */ .sv3-divider{ width:100%;max-width:1260px;margin:52px auto 0; height:1px;position:relative;z-index:10; background:linear-gradient(90deg, transparent 0%, rgba(152,144,200,.2) 20%, rgba(201,168,76,.25) 50%, rgba(152,144,200,.2) 80%, transparent 100%); } /* ── BOTTOM SCENE ────────────── */ .sv3-scene{ position:absolute;bottom:0;left:0;right:0; height:380px;overflow:hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 6%, rgba(0,0,0,.5) 14%, rgba(0,0,0,.85) 24%, black 38%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 6%, rgba(0,0,0,.5) 14%, rgba(0,0,0,.85) 24%, black 38%); } /* ── RESPONSIVE ─────────────── */ @media(max-width:1100px){ .sv3-g4{grid-template-columns:repeat(2,1fr)} .sv3-span2{grid-column:span 2} } @media(max-width:768px){ .sv3-g3{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .sv3-g4,.sv3-g3,.sv3-g2{grid-template-columns:1fr} .sv3-span2{grid-column:span 1} .sv3-wide-inner{flex-direction:column;gap:16px} .sv3-stats{border-radius:12px} .sv3-stat{padding:14px 8px} .sv3-trust{gap:0} .sv3-ti{padding:3px 8px;font-size:.55rem} } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } #planet-tap-hint{display:none}@media(max-width:768px){#planet-tap-hint{display:flex!important}} /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } .rdv-wrap{ background:#FFFFFF; border:1px solid rgba(200,192,240,.35); border-radius:24px;overflow:hidden;position:relative; margin-bottom:32px; box-shadow:0 8px 32px rgba(88,80,168,.18); } .rdv-header{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 0;flex-wrap:wrap;gap:10px} .rdv-header-left{display:flex;align-items:center;gap:10px} .rdv-nav{display:flex;align-items:center;gap:8px} .rdv-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(152,144,200,.35);background:rgba(255,255,255,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0} .rdv-btn:hover{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.5)} .rdv-btn svg{pointer-events:none} .rdv-dots{display:flex;gap:5px;align-items:center} .rdv-dot{width:5px;height:5px;border-radius:50%;background:rgba(152,144,200,.35);transition:all .3s;cursor:pointer} .rdv-dot.active{width:18px;border-radius:999px;background:#C9A84C} /* Carousel viewport */ .rdv-viewport{overflow:hidden;position:relative;margin:0} .rdv-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform} /* Each sign slide — same internal layout as panchang */ .rdv-slide{min-width:100%;box-sizing:border-box} .rdv-grid{display:grid;grid-template-columns:repeat(6,1fr);padding:18px 12px 24px;gap:0} .rdv-cell{text-align:center;padding:14px 12px;border-right:1px solid rgba(152,144,200,.25);position:relative} .rdv-cell:last-child{border-right:none} .rdv-clbl{font-family:'DM Sans',sans-serif;font-size:.65rem;font-weight:600;color:#5E5E5E;text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px} .rdv-cval{font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:700;color:#0B0B0B;line-height:1;margin-bottom:8px} .rdv-csub{font-family:'DM Sans',sans-serif;font-size:.65rem;color:#3A3A3A} .rdv-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px} .rdv-sign-badge{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:700;color:#1A1640} /* In this light section, ghost pills must be dark (global .pill-ghost is designed for dark hero). */ .rdv-wrap .pill-ghost{color:#1A1640;border-color:rgba(152,144,200,.45);background:rgba(255,255,255,.72)} .rdv-wrap .pill-ghost:hover{color:#0A0620;border-color:rgba(201,168,76,.55)} /* Progress bar at bottom */ .rdv-progress{height:2px;background:rgba(152,144,200,.15);position:relative;overflow:hidden} .rdv-progress-fill{height:100%;background:linear-gradient(90deg,rgba(201,168,76,.4),rgba(201,168,76,.8));transition:width .1s linear} @media(max-width:640px){ .rdv-grid{grid-template-columns:repeat(3,1fr)!important;} .rdv-cell{border-right:1px solid rgba(152,144,200,.2);border-bottom:1px solid rgba(152,144,200,.2)} .rdv-cell:nth-child(3n){border-right:none} .rdv-cell:nth-child(n+4){border-bottom:none} .rdv-cval{font-size:1.35rem} } @media(max-width:420px){ .rdv-header{padding:16px 16px 0} .rdv-grid{padding:14px 6px 18px} } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } @keyframes kd-twinkle{0%,100%{opacity:.15}50%{opacity:1}} @keyframes kd-flag-sway{0%,100%{transform:skewX(0deg) scaleX(1)}40%{transform:skewX(6deg) scaleX(1.04)}70%{transform:skewX(-3deg) scaleX(.97)}} @keyframes kd-flag-sway2{0%,100%{transform:skewX(0deg) scaleX(1)}35%{transform:skewX(-5deg) scaleX(1.03)}65%{transform:skewX(3deg) scaleX(.98)}} @keyframes kd-kalasha{0%,100%{filter:drop-shadow(0 0 3px rgba(201,168,76,.7))}50%{filter:drop-shadow(0 0 9px rgba(232,200,80,1)) drop-shadow(0 0 18px rgba(201,168,76,.55))}} @keyframes kd-mist{0%,100%{opacity:.12;transform:translateX(0)}50%{opacity:.22;transform:translateX(14px)}} @keyframes kd-lamp{0%,100%{opacity:.88}30%{opacity:.45}65%{opacity:1}} .kd3-star{animation:kd-twinkle var(--d,3.5s) var(--dl,0s) ease-in-out infinite} .kd3-f1{transform-origin:left center;animation:kd-flag-sway 3.2s ease-in-out infinite} .kd3-f2{transform-origin:left center;animation:kd-flag-sway2 3.8s .4s ease-in-out infinite} .kd3-f3{transform-origin:left center;animation:kd-flag-sway 4.1s .9s ease-in-out infinite} .kd3-f4{transform-origin:left center;animation:kd-flag-sway2 3.5s 1.3s ease-in-out infinite} .kd3-f5{transform-origin:left center;animation:kd-flag-sway 2.9s 1.8s ease-in-out infinite} .kd3-kalasha{animation:kd-kalasha 3.2s ease-in-out infinite} .kd3-lamp1{animation:kd-lamp 2.8s ease-in-out infinite} .kd3-lamp2{animation:kd-lamp 3.4s .6s ease-in-out infinite} .kd3-lamp3{animation:kd-lamp 2.2s 1.1s ease-in-out infinite} /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } .fk-section{ background: radial-gradient(ellipse at 8% 20%, rgba(201,168,76,.055) 0%, transparent 48%), radial-gradient(ellipse at 92% 80%, rgba(88,80,168,.08) 0%, transparent 48%), radial-gradient(ellipse at 50% 50%, rgba(152,144,200,.04) 0%, transparent 60%), linear-gradient(180deg, #EAE6F8 0%, #E6E2F5 40%, #DDD8F0 100%); padding: clamp(64px,8vh,110px) clamp(20px,4vw,48px); position: relative; overflow: hidden; z-index: 6; isolation: isolate; } .fk-watermark{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); pointer-events:none;opacity:.032; width:min(70vw,640px);height:min(70vw,640px); } .fk-hd{ text-align:center;max-width:680px; margin:0 auto clamp(40px,5vh,64px); position:relative;z-index:2; } .fk-eyebrow{ font-family:'DM Sans',sans-serif; font-size:.68rem;font-weight:600; text-transform:uppercase;letter-spacing:.18em; color:#C9A84C;margin-bottom:14px; display:flex;align-items:center;justify-content:center;gap:10px; } .fk-eyebrow-line{ width:32px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.6)); } .fk-eyebrow-line-r{ width:32px;height:1px;background:linear-gradient(90deg,rgba(201,168,76,.6),transparent); } .fk-h2{ font-family:'Cormorant Garamond',serif; font-size:clamp(42px,6vw,80px); font-weight:700;line-height:1.02;letter-spacing:-.01em; color:#1A1640;margin-bottom:10px; } .fk-h2 em{font-style:italic;font-weight:400;color:rgba(26,22,64,.72)} .fk-rule{ width:40px;height:1px; background:linear-gradient(90deg,transparent,#C9A84C,transparent); margin:0 auto 16px; } /* REQ-2: two-line description block */ .fk-sub{ font-family:'DM Sans',sans-serif; font-size:.88rem;line-height:1.7; color:rgba(26,22,64,.58); margin-bottom:0; } .fk-sub-tagline{ font-family:'DM Sans',sans-serif; font-size:.82rem;font-style:italic; color:rgba(26,22,64,.42); margin-top:6px; } .fk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1260px; margin:0 auto; position:relative;z-index:2; } .fk-card{ position:relative;overflow:hidden; border-radius:20px; background:linear-gradient(148deg,rgba(255,255,255,.78) 0%,rgba(236,232,255,.58) 100%); border:1px solid rgba(180,172,228,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(140,132,200,.05), 0 2px 12px rgba(88,80,168,.07), 0 8px 32px rgba(88,80,168,.05); cursor:pointer;display:flex;flex-direction:column; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .25s; opacity:0;transform:translateY(20px);visibility:hidden; } .fk-card.vis{ opacity:1;transform:translateY(0);visibility:visible; transition:opacity .52s cubic-bezier(.4,0,.2,1), transform .52s cubic-bezier(.4,0,.2,1), box-shadow .35s,border-color .25s; } .fk-card:hover{ transform:translateY(-7px); border-color:rgba(152,144,210,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 18px 52px rgba(88,80,168,.16), 0 4px 14px rgba(88,80,168,.09); } .fk-card::after{ content:'';position:absolute;inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%); opacity:0;pointer-events:none; } .fk-card:hover::after{opacity:1;animation:cardShimmer .65s ease forwards} .fk-accent{height:3px;flex-shrink:0;background:linear-gradient(90deg,transparent,rgba(201,168,76,.55) 30%,rgba(201,168,76,.55) 70%,transparent)} .fk-avatar-wrap{ padding:22px 22px 0; display:flex;align-items:flex-start;justify-content:space-between;gap:10px; } .fk-avatar{ width:48px;height:48px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:'Cormorant Garamond',serif; font-size:1.35rem;font-weight:700;color:#1A1640; border:1.5px solid rgba(201,168,76,.35); box-shadow:0 2px 10px rgba(88,80,168,.1),inset 0 1px 0 rgba(255,255,255,.9); } .fk-profession-badge{ display:inline-flex;align-items:center; padding:3px 10px;border-radius:999px; font-family:'DM Sans',sans-serif;font-size:.54rem;font-weight:600; text-transform:uppercase;letter-spacing:.1em; background:rgba(88,80,168,.08);border:1px solid rgba(88,80,168,.18); color:#4840A0;white-space:nowrap; } .fk-body{padding:14px 22px 18px;flex:1;display:flex;flex-direction:column} .fk-name{ font-family:'Cormorant Garamond',serif; font-size:1.18rem;font-weight:700; color:#1A1640;line-height:1.15; margin-bottom:8px;letter-spacing:.01em; } .fk-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:16px} .fk-meta-row{display:flex;align-items:center;gap:7px} .fk-meta-icon{width:13px;height:13px;flex-shrink:0;opacity:.45} .fk-meta-txt{font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:rgba(26,22,64,.58);line-height:1.4;letter-spacing:.01em} /* REQ-3: CTA scrolls to birth form — styled as existing pill-ghost-gold hybrid */ .fk-btn{ display:flex;align-items:center;justify-content:center;gap:6px; width:100%;padding:10px 16px;border-radius:10px; border:1.5px solid rgba(201,168,76,.45); background:rgba(201,168,76,.08); font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600; color:#7A5A10;letter-spacing:.05em; cursor:pointer; transition:background .2s,border-color .2s,color .2s,transform .18s; margin-top:auto; } .fk-btn:hover{background:rgba(201,168,76,.18);border-color:rgba(201,168,76,.7);color:#5A3C06;transform:translateY(-1px)} .fk-btn:active{transform:scale(.97)} .fk-btn-arrow{font-size:.8rem;line-height:1;transition:transform .2s} .fk-btn:hover .fk-btn-arrow{transform:translateX(3px)} .fk-disclaimer{ text-align:center; margin-top:clamp(28px,3vh,44px); position:relative;z-index:2; } .fk-disclaimer-inner{ display:inline-flex;align-items:center;gap:8px; padding:7px 18px;border-radius:999px; background:rgba(152,144,200,.09);border:1px solid rgba(152,144,200,.22); } .fk-disclaimer-dot{width:5px;height:5px;border-radius:50%;background:rgba(152,144,200,.6);flex-shrink:0} .fk-disclaimer-txt{font-family:'DM Sans',sans-serif;font-size:.68rem;color:rgba(26,22,64,.48);font-style:italic} @media(max-width:1100px){.fk-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.fk-grid{grid-template-columns:1fr 1fr}.fk-name{font-size:1.05rem}.fk-avatar{width:40px;height:40px;font-size:1.1rem}} @media(max-width:420px){.fk-grid{grid-template-columns:1fr}} /* ── Two-button row inside FK cards (#8) ──────────────── */ .fk-btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:auto; } .fk-btn-cast{ /* Same style as base fk-btn — inherits everything */ } .fk-btn-preview{ background:rgba(88,80,168,.10); border-color:rgba(88,80,168,.35); color:#5850A8; } .fk-btn-preview:hover{ background:rgba(88,80,168,.20); border-color:rgba(88,80,168,.6); color:#3A3090; transform:translateY(-1px); } /* ── Famous Kundli chart popup overlay ────────────────── Appears when user taps "See Their Chart". Uses existing design tokens: indigo gradient, gold border, Cormorant Garamond heading, DM Sans body, IBM Plex Mono data. ────────────────────────────────────────────────────────── */ #fk-popup-overlay{ display:none; position:fixed;inset:0; z-index:10000; background:rgba(10,8,30,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); align-items:flex-end; /* sheet slides up from bottom */ justify-content:center; padding:0; } #fk-popup-overlay.fk-pop-open{ display:flex; } #fk-popup-sheet{ width:100%; max-width:480px; max-height:88vh; overflow-y:auto; background:linear-gradient(160deg,#1A1640 0%,#22206A 50%,#2E2880 100%); border:1px solid rgba(201,168,76,.28); border-bottom:none; border-radius:24px 24px 0 0; box-shadow:0 -8px 48px rgba(10,6,40,.6),0 0 0 1px rgba(201,168,76,.07); transform:translateY(110%); transition:transform .38s cubic-bezier(.22,1,.36,1); position:relative; } #fk-popup-overlay.fk-pop-open #fk-popup-sheet{ transform:translateY(0); } .fk-pop-handle{ width:36px;height:4px;border-radius:2px; background:rgba(201,168,76,.3); margin:12px auto 0; } .fk-pop-head{ display:flex;align-items:flex-start;justify-content:space-between; padding:16px 22px 0; } .fk-pop-avatar{ width:52px;height:52px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:'Cormorant Garamond',serif; font-size:1.5rem;font-weight:700;color:#1A1640; border:1.5px solid rgba(201,168,76,.4); box-shadow:0 2px 14px rgba(88,80,168,.25); } .fk-pop-close{ width:30px;height:30px;border-radius:50%; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); color:rgba(234,230,248,.55);cursor:pointer; display:flex;align-items:center;justify-content:center; font-size:.75rem;flex-shrink:0; transition:background .18s; } .fk-pop-close:hover{background:rgba(255,255,255,.14)} .fk-pop-name{ font-family:'Cormorant Garamond',serif; font-size:1.55rem;font-weight:700;color:#EAE6F8; line-height:1.1;margin:12px 22px 2px; } .fk-pop-badge{ font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:600; text-transform:uppercase;letter-spacing:.12em; color:#C9A84C;margin:0 22px 16px; } .fk-pop-divider{ height:1px;margin:0 22px; background:linear-gradient(90deg,transparent,rgba(201,168,76,.3),transparent); } /* Data grid — birth details */ .fk-pop-data{ display:grid;grid-template-columns:1fr 1fr; gap:1px; margin:16px 22px; background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.15); border-radius:12px;overflow:hidden; } .fk-pop-cell{ background:rgba(16,12,54,.5); padding:10px 12px; } .fk-pop-cell-label{ font-family:'IBM Plex Mono',monospace; font-size:.5rem;text-transform:uppercase;letter-spacing:.1em; color:rgba(201,168,76,.55);margin-bottom:4px; } .fk-pop-cell-value{ font-family:'DM Sans',sans-serif; font-size:.8rem;font-weight:500;color:#EAE6F8; line-height:1.3; } /* Chart preview area — yantra placeholder (no API call) */ .fk-pop-yantra{ margin:0 22px 16px; height:160px; border-radius:14px; background:rgba(16,12,54,.45); border:1px solid rgba(201,168,76,.13); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;position:relative;overflow:hidden; } .fk-pop-yantra-hint{ font-family:'DM Sans',sans-serif;font-size:.72rem; color:rgba(234,230,248,.38);text-align:center;line-height:1.5; max-width:220px;z-index:2;position:relative; } /* CTA buttons inside popup */ .fk-pop-actions{ display:grid;grid-template-columns:1fr 1fr; gap:10px;padding:0 22px 28px; } .fk-pop-cta-own{ background:#C9A84C;color:#1A1640; font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700; padding:12px 8px;border-radius:999px;border:none;cursor:pointer; letter-spacing:.04em;text-align:center; transition:background .18s,transform .18s; } .fk-pop-cta-own:hover{background:#E8C97A;transform:translateY(-1px)} .fk-pop-cta-full{ background:transparent; border:1.5px solid rgba(201,168,76,.4); color:rgba(201,168,76,.85); font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600; padding:12px 8px;border-radius:999px;cursor:pointer; letter-spacing:.03em;text-align:center; transition:border-color .18s,color .18s,transform .18s; } .fk-pop-cta-full:hover{border-color:rgba(201,168,76,.75);color:#C9A84C;transform:translateY(-1px)} /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── Famous section wrapper ── */ #s-famous { position:relative;z-index:6;isolation:isolate; background: radial-gradient(ellipse at 20% 50%, rgba(201,168,76,.05) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(88,80,168,.07) 0%, transparent 50%), linear-gradient(180deg, #DDD8F0 0%, #E4E0F4 40%, #EAE6F8 100%); padding: clamp(32px,4vh,56px) clamp(20px,5vw,72px) clamp(56px,7vh,96px); overflow: hidden; } /* subtle star-field deco */ #s-famous::before { content:''; position:absolute;inset:0;pointer-events:none; background-image: radial-gradient(1px 1px at 12% 18%, rgba(201,168,76,.45) 0%, transparent 100%), radial-gradient(1px 1px at 37% 8%, rgba(152,144,200,.4) 0%, transparent 100%), radial-gradient(1px 1px at 62% 22%, rgba(201,168,76,.35) 0%, transparent 100%), radial-gradient(1px 1px at 84% 12%, rgba(152,144,200,.45) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 91% 72%,rgba(201,168,76,.3) 0%, transparent 100%), radial-gradient(1px 1px at 6% 82%, rgba(152,144,200,.35) 0%, transparent 100%), radial-gradient(1px 1px at 48% 91%, rgba(201,168,76,.28) 0%, transparent 100%); opacity:.7; } /* header */ .fmk-head { text-align:center; max-width:640px; margin:0 auto clamp(36px,5vh,56px); position:relative;z-index:2; } .fmk-eyebrow { font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:500; color:#C9A84C;text-transform:uppercase;letter-spacing:.22em; display:block;margin-bottom:16px; } .fmk-title { font-family:'Cormorant Garamond',serif; font-size:clamp(52px,7vw,96px); line-height:1;letter-spacing:-.01em; color:#1A1640;margin-bottom:16px; } .fmk-title em { font-style:italic; font-weight:400; color:rgba(26,22,64,.82); } .fmk-title strong { font-weight:700; color:#FFFFFF; } .fmk-sub { font-family:'DM Sans',sans-serif;font-size:.88rem; color:rgba(10,6,32,.82);line-height:1.7; margin-bottom:0; } .fmk-note { font-family:'IBM Plex Mono',monospace;font-size:.6rem; color:rgba(10,6,32,.55);letter-spacing:.05em; margin-top:14px;display:block; } /* grid — 4 cols desktop, 2 tablet, 1 mobile */ .fmk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1260px; margin:0 auto; position:relative;z-index:2; } @media(max-width:1100px){ .fmk-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px) { .fmk-grid{ grid-template-columns:1fr; } } @media(max-width:768px) { #s-famous { margin-top:0 !important; } } /* individual card */ .fmk-card { position:relative; background: linear-gradient(148deg, rgba(255,255,255,.72) 0%, rgba(238,234,252,.55) 60%, rgba(220,214,248,.38) 100%); border:1px solid rgba(152,144,200,.28); border-radius:20px; padding:22px 20px 18px; cursor:pointer; overflow:hidden; display:flex;flex-direction:column;gap:0; transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .2s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 10px rgba(88,80,168,.07), 0 6px 28px rgba(88,80,168,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); outline:none; } .fmk-card:hover, .fmk-card:focus-visible { transform:translateY(-6px); border-color:rgba(201,168,76,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 48px rgba(88,80,168,.14), 0 4px 12px rgba(201,168,76,.1); } .fmk-card:focus-visible { outline:2px solid rgba(201,168,76,.7); outline-offset:3px; } .fmk-card::after { content:'';position:absolute;inset:0;border-radius:20px; background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%); pointer-events:none;opacity:0; transition:opacity .3s; } .fmk-card:hover::after { opacity:1; } /* zodiac / glyph badge top-right */ .fmk-glyph { position:absolute;top:14px;right:16px; font-size:1.1rem;opacity:.45; font-family:serif; line-height:1; user-select:none; } /* avatar circle */ .fmk-avatar { width:52px;height:52px;border-radius:50%; background:linear-gradient(145deg,rgba(201,168,76,.18) 0%,rgba(152,144,200,.22) 100%); border:1.5px solid rgba(201,168,76,.3); display:flex;align-items:center;justify-content:center; font-family:'Cormorant Garamond',serif; font-size:1.3rem;font-weight:700; color:#7A6010; margin-bottom:14px;flex-shrink:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(160,120,40,.12); } /* text */ .fmk-name { font-family:'Cormorant Garamond',serif; font-size:1.15rem;font-weight:700;letter-spacing:.01em; color:#050210;line-height:1.15;margin-bottom:3px; } .fmk-prof { font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:700; text-transform:uppercase;letter-spacing:.12em; color:#160E52;margin-bottom:12px; } .fmk-meta { font-family:'IBM Plex Mono',monospace;font-size:.65rem; color:rgba(5,3,16,.92);line-height:1.7; flex:1;margin-bottom:16px; } .fmk-meta span { display:block; } .fmk-meta .fmk-dot { display:inline-block;width:5px;height:5px; border-radius:50%;background:#C9A84C; margin-right:6px;vertical-align:middle;opacity:.7; } /* CTA button - View Analysis */ .fmk-btn { display:flex;align-items:center;justify-content:center;gap:7px; padding:10px 18px;border-radius:999px; border:none; background:linear-gradient(135deg,#E8C97A,#C9A84C); color:#0A0620; font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase; cursor:pointer; transition:all .18s; width:100%; box-shadow:0 2px 8px rgba(201,168,76,.12); } .fmk-btn:hover { background:linear-gradient(135deg,#D6B24B,#B59640); transform:translateY(-1px); box-shadow:0 4px 14px rgba(201,168,76,.22); } /* Share button (WhatsApp) */ .fmk-wa-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 18px; border-radius:999px; border:1.5px solid #0a6b32; background:transparent; color:#0a6b32; font-family:'DM Sans',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; cursor:pointer; transition:all .18s; text-decoration:none; margin-top:8px; width:100%; } .fmk-wa-btn:hover { background:rgba(10,107,50,.06); transform:translateY(-1px); } /* Famous Kundli search input readability (iOS sometimes paints inputs white-on-white) */ #fmk-search{color:#1A1640!important;-webkit-text-fill-color:#1A1640!important;color-scheme:light} #fmk-search::placeholder{color:rgba(26,22,64,.55)!important;-webkit-text-fill-color:rgba(26,22,64,.55)!important} /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } @keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}} /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } #premium-flip-inner.is-flipped { transform: rotateY(180deg); } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } @keyframes tk-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } @keyframes tk-glow { 0%,100%{text-shadow:0 0 12px rgba(180,130,20,.3),0 1px 0 rgba(255,220,100,.15)} 50% {text-shadow:0 0 28px rgba(180,130,20,.6),0 1px 0 rgba(255,220,100,.3)} } @keyframes tk-shimmer-bar { 0% {transform:translateX(-100%)} 100%{transform:translateX(400%)} } .tk2-wrap { margin:48px -48px 0; position:relative; z-index:2; overflow:visible; background:linear-gradient(135deg,#2A1F5E 0%,#1A1640 30%,#251850 60%,#1E1548 100%); } .tk2-wrap::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:5; background:linear-gradient(105deg,transparent 30%,rgba(255,210,80,.04) 45%,rgba(255,220,120,.08) 50%,rgba(255,210,80,.04) 55%,transparent 70%); animation:tk-shimmer-bar 6s ease-in-out infinite; } .tk2-border-top,.tk2-border-bot { position:absolute; left:0; right:0; height:2px; z-index:6; background:linear-gradient(90deg,transparent 0%,rgba(201,168,76,.35) 8%,rgba(232,201,122,.8) 30%,#E8C97A 50%,rgba(232,201,122,.8) 70%,rgba(201,168,76,.35) 92%,transparent 100%); box-shadow:0 0 8px rgba(201,168,76,.4),0 0 20px rgba(201,168,76,.15); } .tk2-border-top{top:0} .tk2-border-bot{bottom:0} .tk2-vl,.tk2-vr { position:absolute; top:0; bottom:0; width:160px; z-index:6; pointer-events:none; } .tk2-vl{left:0; background:linear-gradient(to right,#1A1640 0%,#1A1640 7%,rgba(26,22,64,.7) 45%,transparent 100%)} .tk2-vr{right:0; background:linear-gradient(to left, #1A1640 0%,#1A1640 7%,rgba(26,22,64,.7) 45%,transparent 100%)} .tk2-track { display:flex; width:max-content; align-items:center; animation:tk-scroll 140s linear infinite; padding:18px 0; } .tk2-track:hover{animation-play-state:paused} .tk2-item { display:inline-flex; align-items:baseline; gap:12px; white-space:nowrap; padding:0 48px; } .tk2-s { font-family:'Tiro Devanagari Sanskrit',serif; font-size:1.2rem; color:#E8C97A; letter-spacing:.06em; animation:tk-glow 4s ease-in-out infinite; } .tk2-d{color:rgba(201,168,76,.45);font-size:.9rem;flex-shrink:0} .tk2-e { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1rem; font-weight:400; color:rgba(255,255,255,.95); letter-spacing:.03em; } .tk2-sep{color:#C9A84C;font-size:.65rem;opacity:.65;flex-shrink:0} /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── al-* = articles-learning namespace ──────────────── */ .al-section{ background: radial-gradient(ellipse at 10% 25%, rgba(201,168,76,.045) 0%, transparent 52%), radial-gradient(ellipse at 88% 70%, rgba(88,80,168,.07) 0%, transparent 52%), linear-gradient(180deg,#EAE6F8 0%,#E4E0F5 45%,#DDD8F0 100%); padding:clamp(56px,7vh,96px) clamp(20px,4vw,48px); position:relative;z-index:8;isolation:isolate;overflow:hidden; } .al-hd{ text-align:center;max-width:640px; margin:0 auto clamp(36px,5vh,56px); position:relative;z-index:2; } .al-eyebrow{ font-family:'DM Sans',sans-serif; font-size:.65rem;font-weight:600; text-transform:uppercase;letter-spacing:.18em; color:#C9A84C;margin-bottom:12px; display:flex;align-items:center;justify-content:center;gap:10px; } .al-eyebrow-line{ width:28px;height:1px; background:linear-gradient(90deg,transparent,rgba(201,168,76,.55)); } .al-eyebrow-line-r{ width:28px;height:1px; background:linear-gradient(90deg,rgba(201,168,76,.55),transparent); } .al-h2{ font-family:'Cormorant Garamond',serif; font-size:clamp(52px,7vw,96px); font-weight:700;line-height:1.04;letter-spacing:-.01em; color:#1A1640;margin-bottom:8px; } .al-h2 em{font-style:italic;font-weight:400;color:rgba(26,22,64,.65)} .al-rule{ width:36px;height:1px; background:linear-gradient(90deg,transparent,#C9A84C,transparent); margin:0 auto 14px; } .al-sub{ font-family:'DM Sans',sans-serif;font-size:.86rem; color:rgba(26,22,64,.52);line-height:1.7; } /* ── grid ── */ .al-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1260px;margin:0 auto; position:relative;z-index:2; } /* When we inject cards into an inner wrapper, keep them as grid items */ #nk-articles-inject{display:contents} /* ── card ── */ .al-card{ background:rgba(255,255,255,.72); border:1px solid rgba(152,144,200,.22); border-radius:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 10px rgba(88,80,168,.06), 0 6px 24px rgba(88,80,168,.04); padding:20px 20px 18px; cursor:pointer; display:flex;flex-direction:column;gap:8px; transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s,border-color .2s; position:relative;overflow:hidden; opacity:1;transform:translateY(0); text-align:left;background:none; background:rgba(255,255,255,.72); -webkit-tap-highlight-color:transparent; } .al-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(201,168,76,.45) 30%,rgba(201,168,76,.45) 70%,transparent); opacity:0;transition:opacity .25s; } .al-card:hover{ transform:translateY(-5px); border-color:rgba(152,144,210,.44); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 14px 40px rgba(88,80,168,.13), 0 3px 10px rgba(88,80,168,.07); } .al-card:hover::before{opacity:1} .al-card.vis{opacity:1;transform:translateY(0)} .al-card-badge{ display:inline-flex;align-items:center; padding:2px 9px;border-radius:999px; font-family:'DM Sans',sans-serif;font-size:.52rem;font-weight:600; text-transform:uppercase;letter-spacing:.1em; background:rgba(88,80,168,.08);border:1px solid rgba(88,80,168,.16); color:#4840A0;width:fit-content; } .al-card-title{ font-family:'Cormorant Garamond',serif; font-size:1.06rem;font-weight:700; color:#1A1640;line-height:1.25; } .al-card-excerpt{ font-family:'DM Sans',sans-serif; font-size:.72rem;color:rgba(26,22,64,.52); line-height:1.55;flex:1; } .al-card-cta{ display:flex;align-items:center;gap:5px; font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:600; color:#5850A8;margin-top:4px; transition:gap .2s; } .al-card:hover .al-card-cta{gap:9px} .al-card-arrow{font-size:.75rem;line-height:1} /* ── responsive ── */ @media(max-width:1100px){.al-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px) {.al-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px) {.al-grid{grid-template-columns:1fr}} /* ── Article Section Search Bar ─────────────────────── */ .al-search-wrap{ max-width:1260px;margin:0 auto 28px; position:relative;z-index:2; display:flex;flex-direction:column;gap:10px; } .al-search-input-row{ display:flex;align-items:center;gap:12px; background:rgba(255,255,255,.78); border:1.5px solid rgba(152,144,200,.28); border-radius:16px; padding:12px 16px; box-shadow:0 4px 24px rgba(88,80,168,.08); transition:border-color .2s,box-shadow .2s; } .al-search-input-row:focus-within{ border-color:rgba(201,168,76,.5); box-shadow:0 0 0 3px rgba(201,168,76,.1),0 4px 24px rgba(88,80,168,.1); } .al-search-icon{font-size:14px;opacity:.45;flex-shrink:0} .al-search-input{ flex:1;border:none;outline:none; background:transparent; font-family:'DM Sans',sans-serif; font-size:.9rem;color:#1A1640; } .al-search-input::placeholder{color:rgba(26,22,64,.32)} .al-search-clear{ background:none;border:none;cursor:pointer; font-size:16px;color:rgba(26,22,64,.3); padding:0 2px;line-height:1; display:none; transition:color .2s; } .al-search-clear:hover{color:rgba(26,22,64,.7)} .al-search-chips{ display:flex;gap:8px;flex-wrap:wrap;align-items:center; } .al-chip{ border:1px solid rgba(152,144,200,.28); background:rgba(152,144,200,.1); color:rgba(26,22,64,.65); border-radius:999px;padding:5px 12px; font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600; cursor:pointer;user-select:none; transition:background .18s,border-color .18s,color .18s; } .al-chip:hover{background:rgba(152,144,200,.2)} .al-chip.on{ border-color:rgba(201,168,76,.5); background:rgba(201,168,76,.15); color:rgba(138,106,16,.95); } .al-search-meta{ font-family:'DM Sans',sans-serif;font-size:.68rem; color:rgba(26,22,64,.38);margin-top:2px; min-height:14px; } /* ── article drawer-18 body styles ── */ .al-dr-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:.58rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(201,168,76,.8);margin-bottom:8px; } .al-dr-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(26px,3.5vw,40px); font-weight:700;color:#1A1640;line-height:1.1;margin-bottom:18px; } .al-dr-title em{font-style:italic;font-weight:400} .al-dr-rule{ width:40px;height:1px;margin-bottom:22px; background:linear-gradient(90deg,#C9A84C,transparent); } .al-dr-body-text{ font-family:'DM Sans',sans-serif; font-size:.92rem;color:rgba(26,22,64,.72);line-height:1.85; max-width:640px; } .al-dr-body-text p{margin-bottom:1.4em} .al-dr-body-text h3{ font-family:'Cormorant Garamond',serif; font-size:1.25rem;font-weight:700;color:#1A1640; margin:1.6em 0 .5em; } .al-dr-body-text strong{color:#1A1640;font-weight:600} .al-dr-back{ display:inline-flex;align-items:center;gap:8px; margin-top:36px;padding:11px 24px;border-radius:999px; background:rgba(88,80,168,.08);border:1.5px solid rgba(88,80,168,.22); font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600; color:#5850A8;cursor:pointer; transition:background .2s,border-color .2s,transform .18s; } .al-dr-back:hover{ background:rgba(88,80,168,.14);border-color:rgba(88,80,168,.4); transform:translateY(-1px); } .al-dr-nav{ display:flex;gap:10px; padding:20px clamp(20px,6vw,80px) 36px; border-top:1px solid rgba(152,144,200,.14); flex-wrap:wrap; } .al-dr-other-card{ flex:1;min-width:180px;max-width:260px; padding:14px 16px;border-radius:12px; background:rgba(152,144,200,.07);border:1px solid rgba(152,144,200,.18); cursor:pointer;transition:background .2s,border-color .2s; } .al-dr-other-card:hover{ background:rgba(88,80,168,.1);border-color:rgba(88,80,168,.28); } .al-dr-other-lbl{ font-family:'DM Sans',sans-serif;font-size:.52rem;font-weight:600; text-transform:uppercase;letter-spacing:.1em;color:#9890C8;margin-bottom:4px; } .al-dr-other-title{ font-family:'Cormorant Garamond',serif; font-size:.92rem;font-weight:700;color:#1A1640;line-height:1.3; } /* ── More Articles button ── */ .al-more-btn{ display:inline-flex;align-items:center;gap:10px; margin:36px auto 0;padding:13px 32px;border-radius:999px; background:linear-gradient(135deg,#C9A84C 0%,#B8913A 100%); border:1.5px solid rgba(201,168,76,.6); font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700; color:#1A1640;cursor:pointer; box-shadow:0 4px 18px rgba(201,168,76,.28); transition:background .22s,box-shadow .22s,transform .18s; -webkit-tap-highlight-color:transparent; letter-spacing:.04em;text-transform:uppercase; } .al-more-btn:hover{ background:linear-gradient(135deg,#D4B05A 0%,#C9A84C 100%); box-shadow:0 6px 28px rgba(201,168,76,.42); transform:translateY(-2px); } .al-more-btn-wrap{ text-align:center;position:relative;z-index:2; } /* ── Library panel (inline full-width below grid) ── */ .al-library{ max-width:1260px;margin:0 auto; position:relative;z-index:2; display:none; } .al-library.open{display:block} .al-library-inner{ padding-top:48px; border-top:1px solid rgba(152,144,200,.2); margin-top:40px; } .al-lib-cat{margin-bottom:42px} .al-lib-cat-title{ font-family:'Cormorant Garamond',serif; font-size:1.3rem;font-weight:700;color:#1A1640; margin-bottom:6px; } .al-lib-cat-count{ font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:600; text-transform:uppercase;letter-spacing:.12em; color:rgba(201,168,76,.85);margin-bottom:14px; } .al-lib-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } @media(max-width:1100px){.al-lib-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.al-lib-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.al-lib-grid{grid-template-columns:1fr}} .al-lib-card{ background:rgba(255,255,255,.6); border:1px solid rgba(152,144,200,.18); border-radius:12px;padding:14px 16px; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .2s,border-color .2s,transform .2s; -webkit-tap-highlight-color:transparent; } .al-lib-card:hover{ background:rgba(255,255,255,.9); border-color:rgba(88,80,168,.32); transform:translateY(-2px); } .al-lib-card-title{ font-family:'Cormorant Garamond',serif; font-size:.95rem;font-weight:700;color:#1A1640; line-height:1.25;margin-bottom:4px; } .al-lib-card-sub{ font-size:.64rem;color:rgba(26,22,64,.45);line-height:1.4; } .al-lib-close{ display:flex;align-items:center;justify-content:center;gap:8px; margin:32px auto 0;padding:11px 28px;border-radius:999px; background:rgba(88,80,168,.06); border:1.5px solid rgba(88,80,168,.16); font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600; color:#9890C8;cursor:pointer; transition:background .2s,border-color .2s; -webkit-tap-highlight-color:transparent; } .al-lib-close:hover{background:rgba(88,80,168,.12);border-color:rgba(88,80,168,.3)} /* ── article body extras ── */ .al-art-sources{ margin-top:32px;padding-top:18px; border-top:1px solid rgba(152,144,200,.18); } .al-art-sources-heading{ font-family:'DM Sans',sans-serif;font-size:.58rem;font-weight:700; text-transform:uppercase;letter-spacing:.14em; color:rgba(201,168,76,.85);margin-bottom:10px; } .al-art-sources ul{ list-style:none;padding:0;margin:0; } .al-art-sources li{ font-family:'DM Sans',sans-serif;font-size:.74rem; color:rgba(26,22,64,.55);line-height:1.6; padding:4px 0; border-bottom:1px solid rgba(152,144,200,.08); } .al-art-sources li strong{color:rgba(26,22,64,.75)} /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } @keyframes ft-twinkle { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} } .ft { background: linear-gradient(180deg, #0E0A28 0%, #080520 60%, #050310 100%); padding: 72px 48px 40px; position: relative; overflow: hidden; } .ft::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,.4) 30%, rgba(201,168,76,.4) 70%, transparent); } .ft-star { position: absolute; border-radius: 50%; background: rgba(234,230,248,.7); animation: ft-twinkle var(--d,4s) var(--dl,0s) ease-in-out infinite; } .ft-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; color: #FFFFFF !important; text-decoration: none; display: inline-block; margin-bottom: 16px; } .ft-logo em { font-style: italic; font-weight: 400; color: rgba(255,255,255,0.82) !important; } .ft-head { font-family: 'DM Sans', sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF !important; margin: 0 0 18px; } .ft-link { background: none; border: none; cursor: pointer; padding: 0; font-family: 'DM Sans', sans-serif; font-size: .8rem; color: #FFFFFF !important; text-align: left; transition: color .2s; display: block; text-decoration: none; } .ft-link:hover { color: #FFFFFF !important; text-decoration: underline; } .ft-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(152,144,200,.08); margin-bottom: 28px; position: relative; z-index: 1; } .ft-bottom { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; } .ft-copy { font-family: 'DM Sans', sans-serif; font-size: .6rem; color: rgba(234,230,248,.38); margin: 0; } .ft-shloka { font-family: 'Tiro Devanagari Sanskrit', serif; font-size: .9rem; color: rgba(201,168,76,.35); } /* Faint banyan silhouette */ .ft-banyan { position: absolute; right: 0; bottom: 0; pointer-events: none; opacity: .035; } @media(max-width: 768px) { .ft { padding: 56px 24px 32px; } .ft-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media(max-width: 480px) { .ft-grid { grid-template-columns: 1fr; } } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── DRAWER SYSTEM ────────────────────────────────────── */ .nk-overlay{ position:fixed;inset:0;z-index:1800; background:rgba(10,8,24,.55); opacity:0;pointer-events:none; transition:opacity .35s cubic-bezier(.4,0,.2,1); } .nk-overlay.on{opacity:1;pointer-events:all} .nk-drawer{ position:fixed;inset:0;z-index:1900; background:#EAE6F8; transform:translateY(100%); transition:transform .42s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column;overflow:hidden; content-visibility:hidden; } .nk-drawer.open{ transform:translateY(0); content-visibility:visible; } .nk-dr-head{ height:58px;min-height:58px; display:flex;align-items:center;justify-content:space-between; padding:0 clamp(20px,4vw,48px); background:#EAE6F8; border-bottom:1px solid rgba(152,144,200,.18); flex-shrink:0; } .nk-dr-title{ font-family:'Cormorant Garamond',serif; font-style:italic;font-size:1.2rem;font-weight:700;color:#1A1640; } .nk-dr-close{ font-size:26px;color:#9890C8;cursor:pointer; background:none;border:none;line-height:1;padding:8px; transition:color .2s; } .nk-dr-close:hover{color:#1A1640} .nk-dr-body{ overflow-y:auto;flex:1; padding:40px clamp(20px,6vw,80px); } /* ── Center drawer content on laptop/desktop ── */ @media(min-width:769px){ .nk-dr-body{ padding-left: 0; padding-right: 0; display: flex; flex-direction: column; align-items: center; } .nk-dr-body > *{ width: 100%; max-width: 560px; } } /* ── Drawer-10 (Free Tools): open up like karakas/divisional pages ── */ /* On larger screens, free-tool content should NOT be squeezed into the center. */ @media(min-width:769px){ #nk-drawer-10 .nk-dr-body{ padding-left: clamp(20px,6vw,80px); padding-right: clamp(20px,6vw,80px); align-items: stretch; } #nk-drawer-10 .nk-dr-body > *{ max-width: 1280px; } } /* Keep readable line length for the tool subtitle. */ #nk-drawer-10 .nk-dr-sub{ max-width: 980px; } /* ── Drawer-10: make the birth-details form “normal sized” and premium ── */ #nk-drawer-10 .nk-tool-form-card{ width:100%; max-width:1120px; margin:18px auto 0; padding:18px 18px 16px; border-radius:22px; background:linear-gradient(160deg,rgba(252,250,255,.97),rgba(246,242,255,.99)); border:1px solid rgba(110,70,200,.14); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 28px 64px rgba(91,58,158,.08), 0 4px 12px rgba(91,58,158,.05); position:relative; overflow:hidden; } #nk-drawer-10 .nk-tool-form-card::before{ content:""; position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(91,58,158,.18),transparent); pointer-events:none; } #nk-drawer-10 .nk-tool-form-card .nk-form{margin:0} /* Inputs + selects inside drawer-10 form card */ #nk-drawer-10 .nk-tool-form-card .nk-input, #nk-drawer-10 .nk-tool-form-card .nk-select{ background:rgba(246,242,255,.92); border-color:rgba(110,70,200,.18); border-radius:14px; } #nk-drawer-10 .nk-tool-form-card .nk-input:focus, #nk-drawer-10 .nk-tool-form-card .nk-select:focus{ border-color:rgba(201,168,76,.62); box-shadow:0 0 0 3px rgba(201,168,76,.14); } /* Date/time pickers in drawer-10 */ #nk-drawer-10 .nk-tool-form-card .nk-date-picker, #nk-drawer-10 .nk-tool-form-card .nk-time-picker{ background:rgba(246,242,255,.92); border-color:rgba(110,70,200,.18); border-radius:14px; height:52px; } #nk-drawer-10 .nk-tool-form-card .nk-date-picker:focus-within, #nk-drawer-10 .nk-tool-form-card .nk-time-picker:focus-within{ border-color:rgba(201,168,76,.62); box-shadow:0 0 0 3px rgba(201,168,76,.14); } /* ── DRAWER FORM ELEMENTS ── */ .nk-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left} .nk-form.single{grid-template-columns:1fr} .nk-fg{display:flex;flex-direction:column;gap:6px} .nk-fg.full{grid-column:1/-1} .nk-label{ font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700; color:rgba(26,22,64,.82);text-transform:uppercase;letter-spacing:.1em; } .nk-input{ font-family:'DM Sans',sans-serif;font-size:.9rem;color:#1A1640; background:rgba(210,205,238,.4); border:1.5px solid rgba(152,144,200,.3); border-radius:10px;padding:11px 14px; outline:none;width:100%; transition:border-color .2s,box-shadow .2s,background .2s; -webkit-appearance:none;appearance:none; } .nk-input:focus{ border-color:rgba(201,168,76,.55); box-shadow:0 0 0 3px rgba(201,168,76,.1); background:rgba(210,205,238,.58); } .nk-input::placeholder{color:rgba(26,22,64,.32)} .nk-select{ font-family:'DM Sans',sans-serif;font-size:.9rem;color:#1A1640; background:rgba(210,205,238,.4); border:1.5px solid rgba(152,144,200,.3); border-radius:10px;padding:11px 14px; outline:none;width:100%; cursor:pointer; transition:border-color .2s; } .nk-select:focus{border-color:rgba(201,168,76,.55);box-shadow:0 0 0 3px rgba(201,168,76,.1)} .nk-submit{ grid-column:1/-1; background:#C9A84C;color:#1A1640; font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700; padding:14px 32px;border-radius:999px;border:none;cursor:pointer; letter-spacing:.06em;text-transform:uppercase; transition:background .2s,transform .2s,box-shadow .2s; margin-top:6px; } .nk-submit:hover{background:#E8C97A;transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,168,76,.35)} .nk-submit:disabled{background:rgba(201,168,76,.4);cursor:not-allowed;transform:none;box-shadow:none} .nk-note{ grid-column:1/-1; font-family:'DM Sans',sans-serif;font-size:.68rem; color:rgba(26,22,64,.42);line-height:1.65;text-align:center; } /* ── STATUS / RESULT BLOCKS ── */ .nk-status{ grid-column:1/-1; display:none; padding:12px 16px;border-radius:12px; font-family:'DM Sans',sans-serif;font-size:.82rem; line-height:1.6;margin-top:4px; } .nk-status.show{display:block} .nk-status.loading{ background:rgba(152,144,200,.1); border:1px solid rgba(152,144,200,.22); color:#9890C8; } .nk-status.error{ background:rgba(198,40,40,.06); border:1px solid rgba(198,40,40,.22); color:#C62828; } .nk-status.ok{ background:rgba(44,160,44,.06); border:1px solid rgba(44,160,44,.2); color:#1A5C1A; } .nk-result-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:10px; grid-column:1/-1;margin-top:4px; } .nk-rcard{ background:rgba(255,255,255,.55); border:1px solid rgba(152,144,200,.22); border-radius:12px;padding:14px 16px; backdrop-filter:blur(10px); } .nk-rcard.gold{border-left:3px solid #C9A84C} .nk-rl{ font-family:'DM Sans',sans-serif;font-size:.6rem;font-weight:600; color:#9890C8;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px; } .nk-rv{ font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700;color:#1A1640;line-height:1.2; } .nk-rd{ font-family:'DM Sans',sans-serif;font-size:.68rem;color:rgba(26,22,64,.52);margin-top:2px; } .nk-result-full{ grid-column:1/-1; background:rgba(255,255,255,.55); border:1px solid rgba(152,144,200,.22); border-radius:12px;padding:18px 20px; backdrop-filter:blur(10px); } .nk-dr-eyebrow{ font-family:'DM Sans',sans-serif;font-size:.65rem;font-weight:600; color:#C9A84C;text-transform:uppercase;letter-spacing:.18em;margin-bottom:10px; } .nk-dr-h2{ font-family:'Cormorant Garamond',serif;font-size:clamp(32px,4vw,48px); font-weight:700;color:#1A1640;line-height:1.05;margin-bottom:10px; } .nk-dr-h2 em{font-style:italic;font-weight:400} .nk-dr-sub{ font-family:'DM Sans',sans-serif;font-size:.9rem;color:rgba(26,22,64,.58); line-height:1.65;margin-bottom:28px;max-width:560px; } .nk-divider{ grid-column:1/-1;height:1px;margin:8px 0; background:linear-gradient(90deg,transparent,rgba(152,144,200,.3),transparent); } /* ── DRAWER 1 — CTA BLOCK ── */ .nk-cta-block{ display:flex;flex-direction:column;gap:12px;max-width:480px; } .nk-cta-primary{ background:#C9A84C;color:#1A1640; font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:700; padding:15px 32px;border-radius:999px;border:none;cursor:pointer; letter-spacing:.06em;text-transform:uppercase; transition:background .2s,transform .2s,box-shadow .2s; text-align:center; } .nk-cta-primary:hover{background:#E8C97A;transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,168,76,.35)} .nk-feature-list{ list-style:none;display:flex;flex-direction:column;gap:10px;margin:16px 0; } .nk-feature-list li{ display:flex;align-items:flex-start;gap:10px; font-family:'DM Sans',sans-serif;font-size:.85rem; color:rgba(26,22,64,.7);line-height:1.5; } .nk-gdot{ width:6px;height:6px;border-radius:50%;background:#C9A84C; box-shadow:0 0 6px rgba(201,168,76,.6);margin-top:7px;flex-shrink:0; } /* ── VERIFY RESULT ── */ .nk-verify-badge{ display:inline-flex;align-items:center;gap:8px; padding:8px 18px;border-radius:999px; font-family:'IBM Plex Mono',monospace;font-size:.7rem; } .nk-verify-badge.valid{background:rgba(44,160,44,.08);border:1px solid rgba(44,160,44,.28);color:#1A5C1A} .nk-verify-badge.invalid{background:rgba(198,40,40,.07);border:1px solid rgba(198,40,40,.25);color:#C62828} @media(max-width:640px){ .nk-form{grid-template-columns:1fr} .nk-form .nk-fg{grid-column:1/-1} .nk-result-grid{grid-template-columns:1fr} .nk-dr-body{padding:28px 20px} } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── Famous Kundli Drawer (drawer-20) ─────────────────── */ .fk-dr-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin-bottom:20px; } .fk-dr-dob{ font-family:'IBM Plex Mono',monospace;font-size:.75rem; color:rgba(26,22,64,.6); } .fk-dr-note{ font-family:'DM Sans',sans-serif;font-size:.7rem; color:#C9A84C;background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.25); border-radius:99px;padding:2px 10px; } .fk-dr-charts{ display:grid;grid-template-columns:1fr 1fr;gap:20px; margin-bottom:24px; } @media(max-width:520px){ .fk-dr-charts{grid-template-columns:1fr} } .fk-dr-chart-wrap{ background:rgba(255,255,255,.55); border:1px solid rgba(152,144,200,.22); border-radius:16px;padding:14px; display:flex;flex-direction:column;align-items:center;gap:8px; } .fk-dr-chart-label{ font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:700; text-transform:uppercase;letter-spacing:.1em;color:#1A1640; align-self:flex-start; } .fk-dr-chart-sub{ font-family:'IBM Plex Mono',monospace;font-size:.58rem; color:rgba(26,22,64,.45);align-self:flex-start; } .fk-dr-blurb{ font-family:'DM Sans',sans-serif;font-size:.88rem;line-height:1.72; color:rgba(26,22,64,.78); border-left:2px solid rgba(201,168,76,.4); padding-left:14px;margin-bottom:28px; } .fk-dr-cta-wrap{ display:flex;justify-content:center; } .fk-dr-cta-own{ background:#C9A84C;color:#1A1640; font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:700; padding:13px 32px;border-radius:999px;border:none;cursor:pointer; letter-spacing:.04em; transition:background .18s,transform .18s; } .fk-dr-cta-own:hover{background:#E8C97A;transform:translateY(-1px)} /* ── CTA row with share button ── */ .fk-dr-cta-wrap{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .fk-dr-cta-share{ background:rgba(37,211,102,.12);color:#1A7A3C; font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:700; padding:13px 24px;border-radius:999px;border:1.5px solid rgba(37,211,102,.35);cursor:pointer; letter-spacing:.04em;display:flex;align-items:center;gap:8px; transition:background .18s,transform .18s; } .fk-dr-cta-share:hover{background:rgba(37,211,102,.22);transform:translateY(-1px)} /* ── Back to top button ── */ #nk-back-top{ position:fixed;bottom:28px;right:24px;z-index:800; width:44px;height:44px;border-radius:50%; background:rgba(14,10,40,.88); border:1px solid rgba(201,168,76,.35); color:#C9A84C;font-size:1.1rem;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s,visibility .3s,transform .2s,box-shadow .2s; backdrop-filter:blur(12px); box-shadow:0 4px 20px rgba(0,0,0,.35); margin-bottom: env(safe-area-inset-bottom, 0); /* iOS-FIX: BUG 6 — home indicator clearance */ } #nk-back-top.vis{opacity:1;visibility:visible;pointer-events:all} #nk-back-top:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(201,168,76,.25)} /* ── WhatsApp share pill on fmk-card ── */ .fmk-wa-btn{ display:inline-flex;align-items:center;gap:5px; margin-top:10px; font-family:'DM Sans',sans-serif;font-size:.65rem;font-weight:600; color:rgba(37,180,90,.85); background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.25); border-radius:999px;padding:5px 12px; cursor:pointer;transition:background .18s; text-decoration:none; letter-spacing:.03em; } .fmk-wa-btn:hover{background:rgba(37,211,102,.16)} /* ══════════════════════════════════════════════ SHARE PAGE OVERLAY ══════════════════════════════════════════════ */ #nk-share-page{ position:fixed;inset:0;z-index:3000; background:#fff; overflow-y:auto; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(100%); transition:transform .42s cubic-bezier(.4,0,.2,1), opacity .18s ease; content-visibility:hidden; } #nk-share-page.open{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; content-visibility:visible; } .sp-topbar{ position:sticky;top:0;z-index:10; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-bottom:1px solid rgba(201,168,76,.2); padding:12px 20px; display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap; } .sp-topbar-logo{ font-family:'Cormorant Garamond',serif;font-size:1.1rem;letter-spacing:.06em;color:#1A1640; } .sp-topbar-logo em{font-style:italic;color:#C9A84C} .sp-close{ background:none;border:none;cursor:pointer; font-size:1.6rem;color:#9890C8;line-height:1;padding:4px 8px; transition:color .2s; } .sp-close:hover{color:#1A1640} .sp-share-btns{display:flex;gap:8px;flex-wrap:wrap} .sp-btn{ display:inline-flex;align-items:center;gap:6px; font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600; padding:8px 16px;border-radius:999px;border:none;cursor:pointer; letter-spacing:.04em;transition:all .18s;white-space:nowrap; } .sp-btn-wa{background:#25D366;color:#fff} .sp-btn-wa:hover{background:#1db954} .sp-btn-x{background:#000;color:#fff} .sp-btn-x:hover{background:#222} .sp-btn-copy{background:rgba(152,144,200,.12);color:#5850A8;border:1px solid rgba(152,144,200,.3)} .sp-btn-copy:hover{background:rgba(152,144,200,.22)} .sp-btn-print{background:rgba(201,168,76,.12);color:#8A6010;border:1px solid rgba(201,168,76,.3)} .sp-btn-print:hover{background:rgba(201,168,76,.22)} /* Share page content */ .sp-body{max-width:860px;margin:0 auto;padding:32px 20px 60px} .sp-header{ text-align:center; border-bottom:1px solid rgba(201,168,76,.2); padding-bottom:28px;margin-bottom:28px; } .sp-name{ font-family:'Cormorant Garamond',serif;font-size:clamp(28px,5vw,44px); font-weight:700;color:#1A1640;margin-bottom:4px; } .sp-subtitle{ font-family:'DM Sans',sans-serif;font-size:.78rem; color:rgba(152,144,200,.8);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px; } .sp-meta-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px} .sp-pill{ font-family:'IBM Plex Mono',monospace;font-size:.65rem; padding:5px 12px;border-radius:999px; background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2); color:#8A6010; } .sp-lagna-badge{ font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic; color:rgba(26,22,64,.6); } .sp-charts-row{ display:grid;grid-template-columns:1fr 1fr;gap:24px; margin-bottom:28px; } @media(max-width:540px){.sp-charts-row{grid-template-columns:1fr}} .sp-chart-box{text-align:center} .sp-chart-label{ font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:500; text-transform:uppercase;letter-spacing:.14em;color:#C9A84C;margin-bottom:10px; } .sp-chart-sub{ font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:rgba(26,22,64,.4);margin-top:6px; } .sp-section{margin-bottom:28px} .sp-section-title{ font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:700; color:#1A1640;margin-bottom:14px; border-bottom:1px solid rgba(201,168,76,.2);padding-bottom:8px; } .sp-blurb{ font-family:'DM Sans',sans-serif;font-size:.88rem;line-height:1.75; color:rgba(26,22,64,.75); border-left:3px solid rgba(201,168,76,.35);padding-left:14px; } /* Planet table */ .sp-table{width:100%;border-collapse:collapse;font-family:'DM Sans',sans-serif;font-size:.78rem} .sp-table th{ text-align:left;padding:7px 10px; font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em; color:#C9A84C;border-bottom:1px solid rgba(201,168,76,.2); } .sp-table td{padding:7px 10px;color:rgba(26,22,64,.75);border-bottom:1px solid rgba(152,144,200,.1)} .sp-table tr:last-child td{border-bottom:none} .sp-table tr:hover td{background:rgba(201,168,76,.04)} /* Footer */ .sp-footer{ text-align:center;padding-top:24px;border-top:1px solid rgba(152,144,200,.12);margin-top:32px; } .sp-footer-txt{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:.9rem;color:rgba(152,144,200,.6); } .sp-footer-url{ font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:#C9A84C; display:block;margin-top:4px; } @media print{ #nk-share-page .sp-topbar{display:none} #nk-share-page{transform:none!important} } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── City Autocomplete Dropdown ─────────────────────── */ .nk-ac-drop{ position:absolute;top:calc(100% + 4px);left:0;right:0; background:#FDFCFF; border:1px solid rgba(152,144,200,.32); border-radius:10px; box-shadow:0 8px 28px rgba(88,80,168,.14); z-index:3000; overflow:hidden; display:none; /* shown via JS */ max-height:220px;overflow-y:auto; } .nk-ac-item{ font-family:'DM Sans',sans-serif;font-size:.82rem;color:#1A1640; padding:10px 14px;cursor:pointer;line-height:1.4; border-bottom:1px solid rgba(152,144,200,.1); transition:background .15s; } .nk-ac-item:last-child{border-bottom:none} .nk-ac-item:hover,.nk-ac-item[aria-selected="true"]{background:rgba(201,168,76,.1);color:#1A1640} .nk-ac-item .nk-ac-sub{font-size:.68rem;color:#9890C8;display:block;margin-top:1px} .nk-ac-empty{ font-family:'DM Sans',sans-serif;font-size:.78rem;color:#9890C8; padding:12px 14px;text-align:center; } /* ── Geo-lock indicator ─────────────────────────────── */ /* geo-lock badge removed */ /* Mobile: give dropdowns enough room */ @media(max-width:640px){ .nk-ac-drop{max-height:160px} } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── Shared picker shell ─────────────────── */ .nk-date-picker,.nk-time-picker{ display:flex;align-items:stretch; background:rgba(210,205,238,.4); border:1.5px solid rgba(152,144,200,.3); border-radius:10px;overflow:hidden; transition:border-color .2s,box-shadow .2s; width:100%;height:52px; } .nk-date-picker:focus-within,.nk-time-picker:focus-within{ border-color:rgba(201,168,76,.6); box-shadow:0 0 0 3px rgba(201,168,76,.12); } /* ── Segment ─────────────────────────────── */ .nk-seg{ display:flex;flex-direction:column;align-items:center;justify-content:center; flex:1;padding:5px 4px 5px; border-right:1px solid rgba(152,144,200,.18); cursor:text;position:relative; } .nk-seg:last-child{border-right:none;} .nk-seg-lbl{ font-family:'DM Sans',sans-serif;font-size:.44rem; font-weight:700;color:rgba(88,80,168,.5); text-transform:uppercase;letter-spacing:.12em; margin-bottom:2px;pointer-events:none; } /* The real typed input. invisible, positioned over segment */ .nk-seg-input{ font-family:'DM Sans',sans-serif; font-size:.88rem;font-weight:600;color:#1A1640; line-height:1;text-align:center; background:transparent;border:none;outline:none; width:100%;padding:0;margin:0; -webkit-appearance:none;appearance:none; cursor:text; -moz-appearance:textfield; } .nk-seg-input::-webkit-outer-spin-button, .nk-seg-input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; } .nk-seg-input::placeholder{ color:rgba(26,22,64,.22); font-weight:400; } .nk-seg-input:focus{color:#5850A8;} /* focused segment gets gold underline */ .nk-seg:focus-within{ background:rgba(201,168,76,.05); } /* ── Separator ───────────────────────────── */ .nk-seg-sep{ display:flex;align-items:center;padding:0 1px; font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:300; color:rgba(152,144,200,.45);pointer-events:none;flex-shrink:0; } /* ── AM/PM ───────────────────────────────── */ .nk-ampm-wrap{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;padding:3px 7px; border-left:1px solid rgba(152,144,200,.18);flex-shrink:0; } .nk-ampm-btn{ font-family:'DM Sans',sans-serif;font-size:.55rem;font-weight:700; letter-spacing:.04em;padding:3px 7px;border-radius:5px; border:1px solid rgba(152,144,200,.28); background:transparent;color:rgba(88,80,168,.45); cursor:pointer;transition:all .15s;white-space:nowrap; } .nk-ampm-btn.active{ background:#C9A84C;color:#1A1640; border-color:#C9A84C; box-shadow:0 2px 10px rgba(201,168,76,.32); } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } html, body { overflow-x:hidden; width:100%; } *,*::before,*::after { box-sizing:border-box; } img, svg { max-width:100%; } /* ══════════════════════════ TABLET LANDSCAPE ≤1024px ══════════════════════════ */ @media(max-width:1024px){ /* NAV */ .nav { padding:0 20px; } .s-tools { padding:clamp(50px,7vh,90px) 28px; } .s-tools-inner { grid-template-columns:1fr; gap:36px; } .tools-grid { grid-template-columns:1fr 1fr; gap:12px; } /* SV3 tools */ .sv3-hero { padding-left:28px!important; padding-right:28px!important; } .sv3-g3,.sv3-g4 { grid-template-columns:repeat(2,1fr)!important; } .sv3-title { font-size:clamp(46px,7vw,80px); } .sv3-corner-chand-l { left:16px; } .sv3-corner-chand-r { right:16px; } #s-sky { padding-left:28px!important; padding-right:28px!important; } #sky-grid { grid-template-columns:repeat(2,1fr)!important; gap:16px!important; } #s-pricing { padding-left:28px!important; padding-right:28px!important; overflow:visible!important; } .trust { height:auto; padding:28px 28px; } .trust-inner { grid-template-columns:repeat(2,1fr); gap:14px; } /* DRAWER */ .dr-head { padding:0 28px; } .dr-body { padding:32px 28px; } } /* ══════════════════════════ TABLET PORTRAIT ≤768px ══════════════════════════ */ @media(max-width:768px){ .s-birth { padding:38px 18px 56px; } .birth-glass { padding:22px 18px; border-radius:16px; } .birth-sub { font-size:13px !important; line-height:1.55 !important; margin-bottom:18px !important; } .birth-h { margin-bottom:10px !important; } .s-birth { padding-top:22px !important; } .birth-form { grid-template-columns:1fr; gap:12px; } .form-row { grid-template-columns:1fr; } /* Decorative planets in birth section. downsize */ .s-birth > svg[style*="width:240"] { width:170px!important; height:170px!important; left:-8px!important; top:4px!important; } .s-birth > svg[style*="width:200"] { display:none; } .dawn { height:56px; } .sv3 { padding-bottom:300px; } .sv3-hero { padding-left:18px!important; padding-right:18px!important; padding-top:80px; } .sv3-title { font-size:clamp(34px,9vw,62px); margin-bottom:12px; } .sv3-eyebrow { font-size:10px; } .sv3-g3,.sv3-g4,.sv3-g2 { grid-template-columns:repeat(2,1fr)!important; gap:10px; } .sv3-card { padding:16px 14px 12px; } .sv3-name { font-size:.88rem; } .sv3-sub { font-size:.7rem; } .sv3-scene { height:300px; } .sv3-corner-chand { width:44px !important; height:142px !important; } .sv3-corner-chand-l { left:6px !important; } .sv3-corner-chand-r { right:6px !important; } /* SV3 stats bar */ .sv3-stats { border-radius:10px; } .sv3-stat { padding:12px 8px; } .sv3-stat-n { font-size:clamp(18px,5vw,30px); } .s-tools { padding:clamp(40px,6vh,68px) 18px; } .s-tools-inner { grid-template-columns:1fr; gap:24px; } .tools-grid { grid-template-columns:1fr 1fr; gap:10px; } .tool-card { padding:16px 12px; } .tc-icon { width:36px; height:36px; margin-bottom:10px; } .tc-name { font-size:.98rem; } #s-sky { padding-left:18px!important; padding-right:18px!important; padding-bottom:300px!important; overflow:visible!important; } #sky-grid { grid-template-columns:repeat(2,1fr)!important; gap:14px!important; } .pc-sphere { width:84px!important; height:84px!important; } .pc-sphere svg { width:84px!important; height:84px!important; } .pc-sanskrit { font-size:24px; } .pc-english { font-size:17px; } .pc-body { padding:14px 14px 10px 16px; min-height:unset; } .pc-strip { padding:6px 16px 12px 16px; } #planet-tap-hint.dismissed { display:none !important; } #s-sky div[style*="inline-flex"] { flex-wrap:nowrap; overflow:hidden; font-size:.58rem; } #s-pricing { padding-left:18px!important; padding-right:18px!important; padding-top:clamp(40px,6vh,68px)!important; padding-bottom:clamp(40px,6vh,68px)!important; } .pricing-grid-2col { grid-template-columns:1fr!important; gap:16px!important; } #premium-flip-wrapper { perspective:none!important; } #s-pricing h2[style] { font-size:clamp(34px,8vw,58px)!important; } .trust { height:auto; padding:22px 18px; } .trust-inner { grid-template-columns:repeat(2,1fr); gap:10px; } .trust-stat { border-right:none!important; padding:10px 6px; border-bottom:1px solid rgba(200,192,240,.2); } .trust-stat:nth-child(2n) { border-bottom:none; } .trust-num { font-size:clamp(20px,6vw,34px); } .trust-lbl { font-size:.66rem; } .tk2-s { font-size:.92rem; } .tk2-e { font-size:.8rem; } .tk2-item { padding:0 22px; gap:8px; } .tk2-om { font-size:1.9rem; } .tk2-chand-bot-l,.tk2-chand-bot-r { width:50px!important; } .tk2-wrap { margin-left:-28px!important; margin-right:-28px!important; overflow:visible!important; } .tk2-vl { width:80px!important; } .tk2-vr { width:80px!important; } div[style*="height:420px"] { height:260px!important; } .faq2-section { padding:38px 18px 60px; } .faq2-btn { padding:18px 14px; gap:12px; } .faq2-question { font-size:1rem; } .faq2-icon-badge { width:32px; height:32px; font-size:.88rem; } .faq2-answer { padding:0 14px 20px 58px; padding-top:14px; font-size:.84rem; } .faq2-section h2[style] { font-size:clamp(32px,8vw,58px)!important; } .ft { padding-left:18px!important; padding-right:18px!important; padding-top:48px!important; } .ft-grid-4col { grid-template-columns:1fr 1fr!important; gap:28px!important; } .ft div[style*="justify-content:space-between"] { flex-direction:column; align-items:flex-start; gap:8px; } footer { padding:28px 18px 16px; } .footer-inner { flex-direction:column; align-items:flex-start; gap:10px; } .footer-links { gap:12px; flex-wrap:wrap; } .dr-head { padding:0 16px; height:52px; } .dr-body { padding:26px 16px 38px; } .dr-title { font-size:1.05rem; } .app-tools-grid { grid-template-columns:1fr 1fr!important; } .app-body { padding:clamp(14px,3vw,28px); } .app-nav { padding:0 14px; } .profile-saved-wrap.visible { flex-direction:column; align-items:flex-start; gap:10px; } .h2 { font-size:clamp(30px,8vw,58px); } .prem-h { font-size:clamp(30px,8vw,52px); } .crystal { width:96px; height:96px; } .ghost-row { display:none; } .sv3-scene { height:280px; } .section-divider { padding:0 14px; } .s-birth > div[style*="width:500px"] { width:280px!important; height:240px!important; } .s-birth > div[style*="width:400px"] { width:220px!important; height:200px!important; } /* nk drawer responsive */ .nk-drawer { border-radius:20px 20px 0 0; } } /* ══════════════════════════ PHONE ≤480px ══════════════════════════ */ @media(max-width:480px){ .hero-h1 { font-size:clamp(36px,13vw,56px); letter-spacing:.04em; margin-bottom:12px; } .hero-content { padding-top:clamp(58px,8vh,78px); padding-left:14px; padding-right:14px; padding-bottom:clamp(110px,22vw,170px); } .hero-cta-hint-shloka { font-size:clamp(12px,3.5vw,17px)!important; } .pill { width:100%; max-width:300px; text-align:center; justify-content:center; padding:12px 18px; } .scroll-hint { margin-top:12px; } .planet-surya { width:clamp(58px,17vw,76px); height:clamp(58px,17vw,76px); top:8%; right:1%; } .planet-shani { width:clamp(62px,18vw,80px); height:clamp(54px,16vw,70px); top:4%; right:0; } .planet-chandra { width:clamp(50px,14vw,65px); height:clamp(50px,14vw,65px); top:4%; left:0; } .s-birth { padding:28px 14px 44px; } .birth-glass { padding:16px 14px; border-radius:12px; } .birth-sub { font-size:12px !important; line-height:1.5 !important; margin-bottom:14px !important; } .birth-h { font-size: clamp(32px,9vw,44px) !important; margin-bottom:6px !important; } .birth-badge { font-size:.6rem !important; padding:5px 14px !important; margin-bottom:14px !important; } .s-birth { padding-top:18px !important; } .sv3-title { font-size: clamp(32px,9vw,44px) !important; margin-bottom:12px !important; } .sv3-desc { font-size:12px !important; line-height:1.55 !important; margin-bottom:16px !important; } .tools-grid { grid-template-columns:1fr 1fr !important; gap:8px !important; } .tool-card { padding:14px 10px !important; } .tool-card h3 { font-size:13px !important; } .tool-card p, .tool-card .tc-desc { font-size:11px !important; } .birth-form { grid-template-columns:1fr; gap:10px; } .form-submit { padding:12px 20px; font-size:.77rem; } .form-label { font-size:.74rem; } .form-input { font-size:.86rem; padding:10px 12px; } .s-birth > svg[style*="position:absolute"] { display:none!important; } .dawn { height:44px; } .dawn { background: linear-gradient(180deg, #2A2468 0%, #4840A0 30%, #9890CC 65%, #EAE6F4 100%) !important; } .sv3 { padding-bottom:280px; } .sv3-hero { padding-left:14px!important; padding-right:14px!important; padding-top:60px !important; } .sv3-title { font-size:clamp(28px,10vw,50px); } .sv3-eyebrow { font-size:9px; letter-spacing:.16em; } .sv3-g3,.sv3-g4,.sv3-g2 { grid-template-columns:1fr 1fr!important; gap:8px; } .kd2-wrap { height: 220px !important; } .sv3-corner-chand { width:32px !important; height:103px !important; } .sv3-corner-chand-l { left:2px !important; } .sv3-corner-chand-r { right:2px !important; } .sv3-card { padding:12px 10px 10px; } .sv3-name { font-size:.78rem !important; } .sv3-sub { font-size:.65rem !important; line-height:1.4 !important; } .sv3-hint { display:none; } .sv3-icon-wrap { width:44px !important; height:44px !important; margin-bottom:8px !important; } .sv3-tag { font-size:.68rem !important; background:rgba(16,80,48,.85) !important; color:#fff !important; border-color:rgba(16,80,48,.9) !important; padding:7px 12px !important; } .sv3-hint { flex-wrap:wrap; gap:4px; } .sv3-hint-chip { font-size:.62rem; padding:2px 7px; } .sv3-scene { height:280px; } /* Premium CTA stack */ #prem-cta-bottom { flex-direction:column !important; align-items:stretch !important; width:100% !important; gap:8px !important; } #btn-get-pdf { width:100% !important; text-align:center !important; box-sizing:border-box !important; } .sv3-badge { top:10px !important; right:10px !important; font-size:.48rem !important; padding:3px 7px !important; } .sv3-icon-wrap { width:40px !important; height:40px !important; margin-bottom:10px !important; margin-top:28px !important; } .s-tools { padding:clamp(32px,5vh,52px) 14px; } #s-sky { padding-left:14px!important; padding-right:14px!important; padding-bottom:240px!important; } #sky-grid { grid-template-columns:1fr!important; gap:12px!important; } .pc-sphere { width:66px!important; height:66px!important; } .pc-sphere svg { width:66px!important; height:66px!important; } .pc-body-right { margin-left:8px!important; } .pc-sanskrit { font-size:18px; } .pc-english { font-size:13px; } .pc-dot { font-size:14px; } .pc-body { padding:11px 11px 7px; min-height:unset; overflow:hidden; } .pc-strip { padding:4px 11px 9px; } .pc-nak,.pc-pada,.pc-deg { font-size:13px; } #s-sky > div[style*="text-align:center"] h2 { font-size:clamp(28px,9vw,50px)!important; } #s-sky div[style*="inline-flex"][style*="border-radius:999px"] { flex-wrap:nowrap; gap:6px; padding:6px 12px; font-size:.55rem; } .kd2-wrap { height: 240px !important; } .pricing-eyebrow { font-size:10px !important; white-space:normal !important; text-align:center !important; } .pricing-h2 { font-size: clamp(28px,7.5vw,40px) !important; line-height:1.1 !important; } #s-pricing p[style*="font-size:.95rem"] { font-size: .82rem !important; } /* Stack pricing cards */ .pricing-grid-2col { grid-template-columns: 1fr !important; gap: 16px !important; } #s-pricing { padding-left:14px!important; padding-right:14px!important; overflow:visible!important; } #s-pricing div[style*="padding:36px 32px"] { padding:20px 16px 24px!important; } #s-pricing h2[style] { font-size:clamp(26px,9vw,48px)!important; } #premium-back { font-size:11px; } .trust { padding:18px 14px; } .trust-inner { grid-template-columns:repeat(2,1fr); gap:8px; } .trust-num { font-size:clamp(18px,7vw,30px); } .trust-lbl { font-size:.64rem; } .tk2-s { font-size:.82rem; } .tk2-e { font-size:.7rem; } .tk2-item { padding:0 16px; gap:6px; } .tk2-om { font-size:1.7rem; } .tk2-chand-bot-l,.tk2-chand-bot-r { width:42px!important; } .tk2-wrap { margin-left:-14px!important; margin-right:-14px!important; overflow:visible!important; } .tk2-vl { width:60px!important; } .tk2-vr { width:60px!important; } div[style*="height:420px"] { height:200px!important; } .faq2-section { padding:30px 14px 48px; } .faq2-btn { padding:14px 10px; gap:10px; } .faq2-question { font-size:.9rem; } .faq2-icon-badge { width:28px; height:28px; font-size:.78rem; border-radius:8px; } .faq2-toggle { width:24px; height:24px; } .faq2-answer { padding:0 10px 16px 48px; padding-top:12px; font-size:.8rem; line-height:1.7; } .faq2-section h2[style] { font-size:clamp(26px,9vw,46px)!important; } .ft { padding-left:14px!important; padding-right:14px!important; padding-top:36px!important; } .ft-grid-4col { grid-template-columns:1fr!important; gap:22px!important; } .ft > div > div[style*="width:700px"] { width:100%!important; left:0!important; transform:translateX(0)!important; } footer { padding:22px 14px 14px; } .dr-head { padding:0 14px; height:50px; } .dr-body { padding:20px 14px 30px; } .dr-title { font-size:.93rem; } .app-tools-grid { grid-template-columns:1fr 1fr!important; } .app-body { padding:12px 14px; } .app-nav { padding:0 12px; height:50px; min-height:50px; } .app-welcome { margin-bottom:22px; } .app-welcome-name { font-size:clamp(20px,6vw,34px); } .h2 { font-size:clamp(26px,9vw,46px); } .prem-h { font-size:clamp(26px,9vw,42px); } .crystal { width:78px; height:78px; } .sv3-scene { height:260px; } .section-divider { padding:0 12px; } .profile-saved-wrap.visible { flex-direction:column; gap:8px; padding:14px 12px; } .profile-open-app { width:100%; text-align:center; } .tk2-border-top,.tk2-border-bot { box-shadow:none; } .feat-grid .fpill { animation:none; opacity:1; } /* ₹49 nudge. shift to bottom-center on small phones */ #nk-rs49-nudge { right:50%!important; transform:translateX(50%)!important; bottom:18px!important; } } /* ══════════════════════════ SMALL PHONE ≤390px ══════════════════════════ */ @media(max-width:390px){ .sv3-tag { background:rgba(16,80,48,.85) !important; color:#fff !important; border-color:rgba(16,80,48,.9) !important; } .hero-h1 { font-size:clamp(32px,12vw,46px); letter-spacing:.03em; } .hero-content { padding-left:12px; padding-right:12px; } .fpill { font-size:.68rem; padding:8px 8px; } .planet-surya { width:54px; height:54px; top:7%; right:0; } .planet-shani { width:58px; height:50px; top:4%; right:0; } .planet-chandra { width:48px; height:48px; top:4%; left:0; } .sv3-title { font-size:clamp(26px,10vw,42px); } .sv3-g3,.sv3-g4,.sv3-g2 { grid-template-columns:1fr 1fr!important; } .sv3-card { padding:13px 10px 9px; } .pc-body { flex-direction:column; align-items:flex-start; gap:10px; } .pc-body-right { margin-left:0; align-self:flex-end; margin-top:-50px; } .pc-sphere { width:54px!important; height:54px!important; } .pc-sphere svg { width:54px!important; height:54px!important; } .pc-body-right { margin-left:6px!important; } .dr-body { padding:16px 12px 26px; } .dr-head { padding:0 12px; } .faq2-btn { padding:12px 8px; gap:8px; } .faq2-answer { padding:0 8px 14px 40px; padding-top:10px; font-size:.78rem; } .tk2-s { font-size:.74rem; } .tk2-e { font-size:.64rem; } .sv3-scene { height:240px; } div[style*="height:420px"] { height:165px!important; } #s-sky { padding-bottom:200px!important; } .kd2-wrap { height: 200px !important; } .ft { padding-left:12px!important; padding-right:12px!important; } .faq2-section { padding:26px 12px 40px; } } /* ══════════════════════════════════════════ INLINE STYLE GRID PATCHES Targets pricing & footer inline style grids ══════════════════════════════════════════ */ @media(max-width:768px){ #s-pricing > div > div[style*="grid-template-columns:1fr 1fr"], #s-pricing > * > div[style*="grid-template-columns"], #s-pricing > div > div[style*="grid-template-columns"] { grid-template-columns:1fr!important; gap:16px!important; } .ft > div > div[style*="grid-template-columns"] { grid-template-columns:1fr 1fr!important; gap:24px!important; } #s-sky > div > div[style*="text-align:center"] > h2 { font-size:clamp(32px,8vw,58px)!important; } .faq2-section div[style*="text-align:center"] h2 { font-size:clamp(32px,8vw,56px)!important; } #s-pricing > div[style*="text-align:center"] > h2, #s-pricing div[style*="text-align:center"] h2 { font-size:clamp(32px,8vw,58px)!important; } div[style*="padding:16px 48px 0"] { padding:14px 16px 0!important; } div[style*="height:80px"][style*="margin-top:-20px"] { height:48px!important; } } @media(max-width:480px){ #s-pricing > div > div[style*="grid-template-columns"], #s-pricing > * > div[style*="grid-template-columns"] { grid-template-columns:1fr!important; gap:14px!important; } .ft > div > div[style*="grid-template-columns"] { grid-template-columns:1fr!important; gap:20px!important; } #s-sky > div > div[style*="text-align:center"] > h2 { font-size:clamp(26px,9vw,48px)!important; } .faq2-section div[style*="text-align:center"] h2 { font-size:clamp(26px,9vw,46px)!important; } #s-pricing div[style*="text-align:center"] h2 { font-size:clamp(24px,9vw,46px)!important; } .birth-h { font-size:clamp(28px,9vw,48px)!important; } #s-pricing div[style*="padding:36px"] { padding:20px 16px 24px!important; } div[style*="padding:16px 48px 0"] { padding:12px 14px 0!important; } /* Footer glow orb */ .ft > div > div[style*="width:700px"], .ft > div > div[style*="width: 700px"] { width:100%!important; left:0!important; transform:translateX(0)!important; } } /* ══════════════════════════════ TOUCH DEVICE OPTIMISATIONS ══════════════════════════════ */ @media(hover:none) and (pointer:coarse){ .tool-card:hover, .sv3-card:hover, .app-tool:hover, .faq2-card:hover { transform:none!important; } .pill:hover { transform:none; } .fpill:hover { transform:none; } .star-trail { display:none!important; } .planet-lbl { color:rgba(201,168,76,0) !important; } } /* ══════════════════════════════ SAFE AREA. notched phones ══════════════════════════════ */ @supports(padding:env(safe-area-inset-bottom)){ .nav { padding-left:calc(clamp(12px,3vw,20px) + env(safe-area-inset-left)); padding-right:calc(clamp(12px,3vw,20px) + env(safe-area-inset-right)); } footer, .ft { padding-bottom:calc(16px + env(safe-area-inset-bottom))!important; } } /* ════════════════════════════════════════════════════════════════ HERO. SINGLE AUTHORITATIVE RESPONSIVE BLOCK Tested: 320 / 360 / 390 / 414 / 480 / 768 / 820 / 1024 / 1280 ════════════════════════════════════════════════════════════════ */ /* NAV. base */ .nav { position: fixed; top: 0; left: 0; right: 0; height: 58px; display: flex; align-items: center; padding: 0 clamp(14px, 4vw, 48px); background: rgba(14,10,40,.97); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(201,168,76,.18); z-index: 500; } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1280px; margin: 0 auto; gap: 12px; } /* Hero base */ .hero { overflow: hidden; position: relative; } .hero-content { padding-top: clamp(70px, 9vh, 110px); padding-left: clamp(16px, 5vw, 80px); padding-right: clamp(16px, 5vw, 80px); padding-bottom: clamp(90px, 12vh, 160px); width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10; text-align: center; } .hero-h1 { font-size: clamp(44px, 9.5vw, 130px); line-height: .9; letter-spacing: .06em; margin-bottom: clamp(20px, 3vh, 36px); color: #EAE6F8; } /* Feature pills. always 3 columns desktop, 2 on phones */ .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 1.2vw, 13px); margin-bottom: clamp(20px, 3vh, 36px); width: 100%; max-width: min(660px, 94vw); } .fpill { font-size: clamp(.7rem, 1.5vw, .92rem); padding: clamp(9px, 1.2vh, 13px) clamp(10px, 1.5vw, 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; border-radius: 999px; } /* CTA pills row */ .hero-pills { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.5vw, 14px); justify-content: center; align-items: center; width: 100%; max-width: min(520px, 94vw); margin-left: auto; margin-right: auto; } .pill-gold, .pill-ghost { flex-shrink: 0; } .live-badge { align-self: center; } /* Shloka group */ .hero-shloka-group { position: absolute; left: 0; right: 0; top: 56%; display: flex; flex-direction: column; align-items: center; z-index: 12; pointer-events: none; padding: 0 clamp(16px, 4vw, 48px); } .hero-cta-hint-shloka { white-space: normal; text-align: center; } /* Planets. desktop base */ .planet-shani { width: min(22vw,240px); height: min(20vw,218px); top:8%; right:3%; } .planet-surya { width: min(20vw,230px); height: min(20vw,230px); top:8%; right:4%; } .planet-chandra{ width: min(14vw,160px); height: min(14vw,160px); top:8%; left:7%; } /* ≤1280px */ @media (max-width: 1280px) { .hero-h1 { font-size: clamp(52px,8.5vw,110px); } .planet-shani { width: min(20vw,200px); height: min(18vw,182px); } .planet-surya { width: min(19vw,200px); height: min(19vw,200px); } .planet-chandra{ width: min(13vw,140px); height: min(13vw,140px); top:8%; left:7%; } } /* ≤1024px */ @media (max-width: 1024px) { .hero-h1 { font-size: clamp(52px,8vw,96px); } .planet-shani { width: clamp(110px,16vw,176px); height: clamp(100px,14vw,160px); } .planet-surya { width: clamp(108px,15vw,172px); height: clamp(108px,15vw,172px); } .planet-chandra{ width: clamp(80px,11vw,124px); height: clamp(80px,11vw,124px); top:4%; left:6%; } } /* ≤820px. iPad Air portrait */ @media (max-width: 820px) { .hero-h1 { font-size: clamp(50px,9vw,88px); letter-spacing: .05em; } .feat-grid { max-width: min(560px, 90vw); } .hero-shloka-group { top: 57%; } .planet-shani { width: clamp(90px,13vw,130px); height: clamp(80px,11vw,116px); top:4%; right:2%; } .planet-surya { width: clamp(88px,12vw,126px); height: clamp(88px,12vw,126px); top:8%; right:3%; } .planet-chandra{ width: clamp(66px,9.5vw,96px); height: clamp(66px,9.5vw,96px); top:4%; left:5%; } } /* ≤768px. iPad Mini / large phone landscape */ @media (max-width: 768px) { .nav { height: 52px; } .hero-h1 { font-size: clamp(46px,10.5vw,82px); letter-spacing: .04em; margin-bottom: clamp(16px,2.5vh,28px); } .hero-content { padding-top: clamp(62px, 8vh, 86px); padding-left: 16px; padding-right: 16px; padding-bottom: clamp(100px,14vh,160px); } .feat-grid { max-width: min(520px, 94vw); gap: 8px; } .fpill { font-size: clamp(.72rem,1.8vw,.9rem); padding: 10px 12px; } .pill { padding: 10px 20px; font-size: .76rem; } .pill-gold { padding: 11px 26px; } .live-badge { margin-bottom: 14px; } .hero-shloka-group { top: 57%; } .hero-cta-hint-shloka { font-size: clamp(14px,3.5vw,20px) !important; } .hero-cta-hint-translation { font-size: clamp(9px,1.6vw,12px) !important; } .hero-cta-hint::before { width: 140px; } .planet-shani { width: clamp(78px,12vw,108px); height: clamp(70px,11vw,96px); top:4%; right:1.5%; } .planet-surya { width: clamp(76px,11vw,104px); height: clamp(76px,11vw,104px); top:8%; right:2%; } .planet-chandra{ width: clamp(58px,9vw,80px); height: clamp(58px,9vw,80px); top:4%; left:1%; } } /* ≤480px. phones */ @media (max-width: 480px) { .nav { height: 50px; } .hero-h1 { font-size: clamp(38px,12.5vw,64px); letter-spacing: .03em; margin-bottom: clamp(14px,2vh,22px); line-height: .92; } .hero-content { padding-top: clamp(58px,7.5vh,78px); padding-left: 14px; padding-right: 14px; padding-bottom: clamp(100px,16vh,160px); } .feat-grid { grid-template-columns: repeat(2,1fr); max-width: 100%; gap: 7px; } .fpill { font-size: clamp(.68rem,3.8vw,.82rem); padding: 10px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-pills { flex-direction: column; gap: 8px; max-width: min(280px, 88vw); } .pill { width: 100%; text-align: center; justify-content: center; padding: 12px 20px; } .pill-gold { padding: 13px 20px; } .live-badge { font-size: .58rem; } .live-txt { font-size: .56rem; } .hero-shloka-group { top: 50%; padding: 0 14px; } .hero-cta-hint-shloka { font-size: clamp(13px,4vw,18px) !important; } .hero-cta-hint-translation { font-size: clamp(8px,2.2vw,11px) !important; letter-spacing: .14em !important; } .hero-cta-hint::before { width: 100px; } .planet-shani { width: clamp(62px,17vw,82px); height: clamp(56px,15vw,72px); top:4%; right:0; } .planet-surya { width: clamp(60px,16vw,78px); height: clamp(60px,16vw,78px); top:7%; right:0; } .planet-chandra{ width: clamp(46px,13vw,62px); height: clamp(46px,13vw,62px); top:4%; left:0; } .cityscape { height: 48%; } } /* ≤414px */ @media (max-width: 414px) { .hero-h1 { font-size: clamp(36px,12vw,58px); } .hero-shloka-group { top: 52%; } } /* ≤390px. iPhone 14/15 */ @media (max-width: 390px) { .cityscape { height: 50%; } .hero-shloka-group { top: 51% !important; } .hero-content { padding-bottom: clamp(110px,15vh,160px) !important; } .hero-h1 { font-size: clamp(34px,11.5vw,54px); letter-spacing: .02em; } .fpill { font-size: .67rem; padding: 9px 6px; } .hero-shloka-group { top: 54%; } .hero-cta-hint-shloka { font-size: clamp(12px,4.2vw,16px) !important; } .planet-shani { width: 58px; height: 52px; } .planet-surya { width: 56px; height: 56px; } .planet-chandra{ width: 44px; height: 44px; } } /* ≤360px. small Android */ @media (max-width: 360px) { .cityscape { height: 52%; } .hero-h1 { font-size: 32px; } .fpill { font-size: .64rem; padding: 8px 5px; } .hero-shloka-group { top: 67%; } .planet-shani, .planet-surya { width: 52px; height: 46px; } .planet-chandra { width: 40px; height: 40px; } .hero-content { padding-left: 12px; padding-right: 12px; } } /* ≤320px. iPhone SE 1st gen */ @media (max-width: 320px) { .cityscape { height: 54%; } .hero-h1 { font-size: 28px; margin-bottom: 12px; } .feat-grid { gap: 5px; } .fpill { font-size: .62rem; padding: 8px 4px; } .hero-pills { max-width: 240px; } .pill { font-size: .7rem; } .hero-shloka-group { top: 72%; padding: 0 10px; } .sv3-corner-chand { width:26px !important; height:84px !important; } .sv3-corner-chand-l { left:1px !important; } .sv3-corner-chand-r { right:1px !important; } .sv3-hero { padding-top:50px !important; } } /* Touch hover disable */ @media (hover: none) and (pointer: coarse) { .fpill:hover, .pill:hover, .tool-card:hover, .sv3-card:hover, .faq2-card:hover { transform: none !important; } .star-trail { display: none !important; } } /* Safe area. notched phones */ @supports (padding: env(safe-area-inset-left)) { .nav { padding-left: max(clamp(14px,4vw,48px), env(safe-area-inset-left)); padding-right: max(clamp(14px,4vw,48px), env(safe-area-inset-right)); } } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── Panchang grid. 6-col desktop → 3-col tablet → 3-col phone ── */ @media(max-width:768px){ .panchang-grid { grid-template-columns: repeat(3,1fr) !important; padding: 12px 8px 16px !important; gap: 0 !important; } .panchang-grid > div:nth-child(n+4) { border-top: 1px solid rgba(152,144,200,.2); } .panchang-grid > div:nth-child(3) { border-right: none !important; } .panchang-grid > div:nth-child(6) { border-right: none !important; border-left: none !important; } .panchang-grid div[style*="font-size:1.75rem"] { font-size: .9rem !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .panchang-grid > div { padding: 10px 6px !important; } .panchang-grid div[style*="font-size:.65rem"] { font-size: .52rem !important; letter-spacing:.06em !important; } .panchang-header { padding: 14px 16px 0 !important; flex-wrap: wrap; gap: 4px; } } /* ── Transit table. scroll wrapper already in HTML, font tightening ── */ @media(max-width:768px){ #sky-transit-table th { font-size:.52rem !important; padding-bottom:6px !important; } #sky-transit-tbody td { font-size:.78rem !important; padding-top:5px !important; padding-bottom:5px !important; } } @media(max-width:480px){ .panchang-grid { grid-template-columns: repeat(3,1fr) !important; padding: 10px 4px 14px !important; } .panchang-grid div[style*="font-size:1.75rem"] { font-size: .78rem !important; } .panchang-grid div[style*="font-size:.65rem"] { font-size: .48rem !important; } .panchang-header { padding: 12px 12px 0 !important; } #sky-transit-table th { font-size:.48rem !important; } #sky-transit-tbody td { font-size:.72rem !important; } /* Sade Sati / Double Transit badges. stack on small phones */ #sky-sade-sati-badge, #sky-double-transit-badge { padding:5px 10px; } #sky-sade-sati-badge span, #sky-double-transit-badge span { font-size:.54rem !important; } /* Transit as-of label */ #sky-transit-as-of { font-size:.52rem !important; } /* Sky consideration text */ #sky-consideration-text { font-size:.86rem !important; } } @media(max-width:390px){ .panchang-grid div[style*="font-size:1.75rem"] { font-size: .7rem !important; } .panchang-header { padding: 10px 10px 0 !important; } /* Planet tap hint. tighter */ #planet-tap-hint { padding:8px 14px !important; } } /* ── Sky heading inline font scaling ── */ @media(max-width:768px){ #s-sky > div > div[style*="text-align:center"] h2 { font-size:clamp(36px,8vw,64px) !important; } } @media(max-width:480px){ #s-sky > div > div[style*="text-align:center"] h2 { font-size:clamp(28px,9vw,52px) !important; } } /* ── Sky date badge. prevent overflow on narrow screens ── */ @media(max-width:480px){ #sky-date { font-size:.56rem !important; letter-spacing:.03em !important; } div[style*="Lahiri · 24"] { font-size:.54rem !important; } } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── TOP INTRO BLOCK ─────────────────────────────── */ .nk-edu-intro { background: linear-gradient(135deg, rgba(88,80,168,.07), rgba(201,168,76,.05)); border: 1px solid rgba(152,144,200,.25); border-radius: 16px; padding: 18px 20px 16px; margin-bottom: 20px; } .nk-edu-intro-kicker { font-family: 'DM Sans', sans-serif; font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #C9A84C; margin-bottom: 6px; } .nk-edu-intro-text { font-family: 'DM Sans', sans-serif; font-size: .84rem; color: rgba(26,22,64,.72); line-height: 1.8; margin: 0; } /* ── BOTTOM DETAIL BLOCK ─────────────────────────── */ .nk-edu-detail-wrap { margin-top: 28px; border-top: 1px solid rgba(152,144,200,.2); padding-top: 24px; } .nk-edu-detail-heading { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 700; color: #1A1640; margin: 0 0 4px; } .nk-edu-detail-sub { font-family: 'DM Sans', sans-serif; font-size: .76rem; color: #1A1640; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; font-weight: 500; } /* Render the · separator in detailSub at a larger visible size */ .nk-edu-detail-sub .nk-dot { font-size: 1rem; color: #0F0E1A; font-weight: 900; vertical-align: middle; line-height: 1; padding: 0 2px; } .nk-edu-cards { display: flex; flex-direction: column; gap: 10px; } .nk-edu-card { background: rgba(255,255,255,.5); border: 1px solid rgba(152,144,200,.2); border-radius: 12px; padding: 12px 14px; } /* ── CARD LABEL — title with separator line ─────────── */ .nk-edu-card-label { font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(88,80,168,.85); margin-bottom: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(152,144,200,.22); margin-bottom: 10px; } .nk-edu-card-text { font-family: 'DM Sans', sans-serif; font-size: .79rem; color: rgba(26,22,64,.68); line-height: 1.65; } .nk-edu-card.full { background: rgba(201,168,76,.05); border-color: rgba(201,168,76,.2); } .nk-edu-card.full .nk-edu-card-label { color: #0F0E1A; border-bottom-color: rgba(201,168,76,.35); } /* ── SOURCE BLOCK ────────────────────────────────────── */ .nk-edu-source { margin-top: 28px; padding: 20px 22px; background: rgba(255,255,255,.55); border: 1px solid rgba(201,168,76,.35); border-radius: 14px; } .nk-edu-source-heading { font-family: 'DM Sans', sans-serif; font-size: .58rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #9A7020; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .nk-edu-source-heading::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201,168,76,.4), transparent); } .nk-edu-source-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .nk-edu-source-list li { padding: 11px 14px; background: rgba(255,255,255,.7); border-radius: 8px; border-left: 3px solid rgba(201,168,76,.55); } .nk-edu-source-list li::before { content: none; } .nk-edu-source-list li em { font-style: italic; color: #0F0E1A; font-weight: 700; display: block; font-size: .78rem; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(152,144,200,.2); line-height: 1.3; } .nk-edu-source-list li span { display: block; color: rgba(26,22,64,.62); font-size: .69rem; line-height: 1.6; font-family: 'DM Sans', sans-serif; } /* ── Structured content inside edu cards ──────────────── */ .nk-edu-body-para { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: rgba(26,22,64,.68); line-height: 1.75; margin: 0 0 12px; } .nk-edu-body-para:last-child { margin-bottom: 0; } .nk-edu-section-title { font-family: 'DM Sans', sans-serif; font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(88,80,168,.8); margin: 14px 0 8px; } .nk-edu-section-title:first-child { margin-top: 0; } .nk-edu-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .nk-edu-list:last-child { margin-bottom: 0; } .nk-edu-list li { display: flex; flex-direction: column; gap: 3px; font-family: 'DM Sans', sans-serif; font-size: .81rem; color: rgba(26,22,64,.68); line-height: 1.6; padding: 9px 12px; background: rgba(255,255,255,.4); border-radius: 8px; border-left: 3px solid rgba(152,144,200,.35); } .nk-edu-list li strong { display: block; color: #1A1640; font-weight: 700; font-size: .78rem; line-height: 1.3; white-space: normal; } /* Highlight row for important items */ .nk-edu-list li.warn { border-left-color: rgba(200,80,60,.4); background: rgba(200,80,60,.04); } .nk-edu-list li.warn strong { color: rgba(180,60,40,.9); } .nk-edu-list li.good { border-left-color: rgba(42,122,82,.35); background: rgba(42,122,82,.04); } .nk-edu-list li.good strong { color: rgba(30,100,60,.9); } /* Day-time grid. for Rahu Kaal timings */ .nk-edu-day-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 12px; } @media (max-width: 400px) { .nk-edu-day-grid { grid-template-columns: 1fr; } } .nk-edu-day-row { display: flex; flex-direction: column; padding: 8px 10px; background: rgba(255,255,255,.45); border-radius: 8px; border: 1px solid rgba(152,144,200,.2); } .nk-edu-day-name { font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 700; color: #1A1640; letter-spacing: .04em; margin-bottom: 2px; } .nk-edu-day-time { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; font-weight: 600; color: #1A1640; } .nk-edu-day-note { font-family: 'DM Sans', sans-serif; font-size: .65rem; color: rgba(26,22,64,.45); margin-top: 2px; } /* ── DARK COLOR FIX. tool page titles and tabs ──── */ /* ① Tool page heading title (renders on white bg) */ .nk-tool-heading-title, h1.nk-tool-heading-title { color: #1A1640 !important; } /* ② Tab bar labels */ .nk-tool-tab { color: rgba(26,22,64,.55) !important; } .nk-tool-tab.active { color: #1A1640 !important; border-bottom-color: #C9A84C !important; } .nk-tool-tab:hover { color: #1A1640 !important; } /* ③ Card titles inside nk-tool-content (light bg) */ #nk-tool-content .nk-live-title { color: #1A1640 !important; -webkit-text-fill-color: #1A1640 !important; } #nk-tool-content .nk-live-kicker { color: #8a6d00 !important; } #nk-tool-content .nk-live-table th, #nk-tool-content .nk-live-table td { color: #1A1640 !important; } /* Dasha toggle */ #nk-tool-content .nk-dasha-row, #nk-live-results-root .nk-dasha-row { cursor: pointer; } #nk-tool-content .nk-dasha-row.active, #nk-live-results-root .nk-dasha-row.active { background: rgba(201,168,76,.1); font-weight: 600; } #nk-tool-content .nk-dasha-anti td, #nk-live-results-root .nk-dasha-anti td { padding: 0; border-bottom: none; } #nk-tool-content .nk-anti-wrap { padding: 12px 10px; background: rgba(201,168,76,.06); border-radius: 10px; border: 1px solid rgba(201,168,76,.12); } #nk-live-results-root .nk-anti-wrap { padding: 12px 10px; background: rgba(201,168,76,.08); border-radius: 12px; border: 1px solid rgba(201,168,76,.2); } #nk-tool-content .nk-anti-title, #nk-live-results-root .nk-anti-title { font-family: 'DM Sans', sans-serif; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; } #nk-tool-content .nk-anti-title { color: rgba(26,22,64,.55); } #nk-live-results-root .nk-anti-title { color: rgba(201,168,76,.6); } #nk-tool-content .nk-anti-table, #nk-live-results-root .nk-anti-table { width: 100%; border-collapse: collapse; } #nk-tool-content .nk-anti-table th, #nk-tool-content .nk-anti-table td { padding: 8px 10px; border-bottom: 1px solid rgba(201,168,76,.12); font-family: 'DM Sans', sans-serif; font-size: .76rem; color: #1A1640; } #nk-live-results-root .nk-anti-table th, #nk-live-results-root .nk-anti-table td { padding: 8px 10px; border-bottom: 1px solid rgba(201,168,76,.18); font-family: 'DM Sans', sans-serif; font-size: .76rem; color: rgba(240,232,208,.78); } #nk-tool-content .nk-anti-table tr:last-child td, #nk-live-results-root .nk-anti-table tr:last-child td { border-bottom: none; } #nk-tool-content .nk-anti-row.active td, #nk-live-results-root .nk-anti-row.active td { font-weight: 600; } /* NOTE: .nk-dr-h2 drawer title fix is placed AFTER the "BRIGHT WHITE TITLES" block later in this file — see "DRAWER TEXT DARK OVERRIDE" comment below. */ /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } .s-faq { background: radial-gradient(ellipse at 10% 50%, rgba(201,168,76,.04) 0%, transparent 50%), radial-gradient(ellipse at 90% 50%, rgba(88,80,168,.04) 0%, transparent 50%), linear-gradient(180deg, #050310 0%, #1E1A48 5%, #5850A8 10%, #9890CC 15%, #D4CFEC 35%, #EAE6F8 50%, #D4CFEC 65%, #9890CC 85%, #5850A8 90%, #1E1A48 95%, #050310 100% ); padding: clamp(80px,10vh,130px) clamp(24px,5vw,80px); position: relative; z-index: 8; isolation: isolate; overflow: hidden; } .faq-wrap { max-width: 900px; margin: 0 auto; } /* ── Header. mirrors sv3 style ── */ .faq-eyebrow { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; color: #C9A84C; text-transform: uppercase; letter-spacing: .2em; text-align: center; display: block; margin-bottom: 18px; text-shadow: 0 0 20px rgba(201,168,76,.5); } .faq-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(52px, 7vw, 96px); line-height: .94; letter-spacing: -.01em; color: #FFFFFF; text-align: center; margin-bottom: 20px; text-shadow: 0 2px 40px rgba(88,80,168,.55), 0 0 80px rgba(152,144,200,.3); } .faq-title em { font-style: italic; font-weight: 400; color: rgba(255,255,255,.88); } .faq-title strong { font-style: normal; font-weight: 700; color: #FFFFFF; } .faq-desc { font-family: 'DM Sans', sans-serif; font-size: 15px; color: rgba(255,255,255,.82); text-align: center; line-height: 1.7; max-width: 480px; margin: 0 auto 56px; text-shadow: 0 1px 12px rgba(88,80,168,.4); } /* ── Cards ── */ .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-card { position: relative; border-radius: 20px; background: linear-gradient(148deg, rgba(255,255,255,.78) 0%, rgba(236,232,255,.6) 100%); border: 1px solid rgba(180,172,228,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(140,132,200,.06), 0 2px 12px rgba(88,80,168,.06), 0 8px 32px rgba(88,80,168,.05); overflow: hidden; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .25s; } .faq-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 32px rgba(88,80,168,.14), 0 20px 60px rgba(88,80,168,.1); border-color: rgba(180,172,228,.55); } .faq-card.is-open { border-color: rgba(201,168,76,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 36px rgba(88,80,168,.12), 0 0 0 1px rgba(201,168,76,.1); } /* ── Question row ── */ .faq-q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: none; border: none; cursor: pointer; text-align: left; outline: none; -webkit-tap-highlight-color: transparent; } .faq-q:focus-visible { outline: 2px solid rgba(201,168,76,.7); outline-offset: -3px; border-radius: 19px; } /* Icon badge. matches sv3 card icon style */ .faq-q-badge { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: rgba(152,144,200,.12); border: 1px solid rgba(152,144,200,.22); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: background .25s, border-color .25s; } .faq-card.is-open .faq-q-badge { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.3); } .faq-q-text { flex: 1; font-family: 'Cormorant Garamond', serif; font-size: clamp(1.05rem, 1.6vw, 1.18rem); font-weight: 700; color: #1A1640; line-height: 1.3; } /* Plus/minus toggle */ .faq-toggle { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(152,144,200,.3); display: flex; align-items: center; justify-content: center; position: relative; transition: border-color .25s, background .25s, transform .3s; } .faq-toggle::before, .faq-toggle::after { content: ''; position: absolute; background: rgba(26,22,64,.45); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity .3s, transform .3s, background .25s; } .faq-toggle::before { width: 11px; height: 1.5px; } .faq-toggle::after { width: 1.5px; height: 11px; } .faq-card.is-open .faq-toggle { border-color: rgba(201,168,76,.5); background: rgba(201,168,76,.08); } .faq-card.is-open .faq-toggle::before, .faq-card.is-open .faq-toggle::after { background: #C9A84C; } .faq-card.is-open .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } /* ── Answer ── */ .faq-ans { max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.4,0,.2,1); } .faq-card.is-open .faq-ans { max-height: 360px; } .faq-ans-inner { padding: 0 24px 22px 84px; font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.75; color: rgba(26,22,64,.6); } .faq-ans-inner strong { color: rgba(26,22,64,.85); font-weight: 500; } /* ── OM footer ── */ .faq-om { text-align: center; margin-top: 52px; font-family: 'Tiro Devanagari Sanskrit', serif; font-size: 1.8rem; color: rgba(201,168,76,.35); line-height: 1; } .faq-chand { position: absolute; top: 0; width: clamp(75px,8.5vw,118px); pointer-events: none; z-index: 3; overflow: hidden; display: block; } .faq-chand-l { left: 40px; } .faq-chand-r { right: 40px; transform: scaleX(-1); } @media(max-width: 768px) { .faq-chand { width: clamp(50px,7vw,80px); } .faq-chand-l { left: 16px; } .faq-chand-r { right: 16px; } } @media(max-width: 480px) { .faq-chand { width: 44px; } } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── SEO subtitle. SR-safe visually-hidden technique ── */ .nk-seo-desc { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* ── Article card read link. crawlable anchor, inherits card styling ── */ .al-read-link { text-decoration: none; color: inherit; display: inline; pointer-events: none; } .al-card:hover .al-read-link, .al-card:focus .al-read-link { color: inherit; } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ══════════════════════════════════════════════════════════════ MOBILE RESPONSIVE FIX. appended last so cascade wins Root causes fixed: 1. Header had inline style="height:62px" — now edited directly in HTML to 48px 2. Nav links wrapping. whitespace:nowrap added in HTML + Tools/Learn hidden mobile 3. Planet top:% values collapse behind nav. now pixel-anchored 4. Laptop media query !important. overcome by cascade position (this block is last) ══════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .nav-hide-mobile { display: none !important; } } .planet-shani { top: 8% !important; bottom: auto !important; right: 3% !important; } @media (max-width: 1024px) { .planet-surya { width: 150px !important; height: 150px !important; top: 144px !important; right: 3% !important; } .planet-chandra { width: 108px !important; height: 108px !important; top: 56px !important; left: 5% !important; } .planet-shani { width: 136px !important; height: 124px !important; top: 50px !important; bottom: auto !important; right: 3% !important; } } @media (max-width: 768px) { .planet-chandra { width: 90px !important; height: 90px !important; top: 56px !important; left: 14px !important; z-index: 1 !important; } .planet-surya { width: 80px !important; height: 80px !important; top: 118px !important; right: -8px !important; z-index: 1 !important; } .planet-shani { width: 86px !important; height: 78px !important; top: 56px !important; right: 28px !important; bottom: auto !important; z-index: 1 !important; } .hero-content { padding-top: 88px !important; padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 80px !important; text-align: center !important; } .live-badge { margin-bottom: 10px !important; } .hero-h1 { font-size: clamp(44px, 13vw, 64px) !important; margin-bottom: 18px !important; } .feat-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 18px !important; max-width: 100% !important; width: 100% !important; } .fpill { font-size: .78rem !important; padding: 11px 14px !important; white-space: normal !important; } .hero-pills { flex-direction: column !important; width: 100% !important; max-width: 340px !important; gap: 10px !important; margin: 0 auto !important; } .pill-gold { width: 100% !important; padding: 15px 20px !important; font-size: .86rem !important; } .pill-ghost { width: 100% !important; padding: 13px 20px !important; font-size: .8rem !important; } } @media (max-width: 480px) { .planet-chandra { width: 74px !important; height: 74px !important; top: 52px !important; left: 2px !important; } .planet-surya { width: 66px !important; height: 66px !important; top: 114px !important; right: -4px !important; } .planet-shani { width: 70px !important; height: 64px !important; top: 52px !important; right: 22px !important; } .hero-content { padding-top: 80px !important; padding-left: 16px !important; padding-right: 16px !important; } .hero-h1 { font-size: clamp(38px, 14vw, 52px) !important; margin-bottom: 14px !important; } .fpill { font-size: .76rem !important; padding: 10px 12px !important; } .feat-grid { gap: 7px !important; margin-bottom: 14px !important; } } @media (max-width: 375px) { .planet-chandra { width: 62px !important; height: 62px !important; top: 50px !important; left: 2px !important; } .planet-surya { width: 56px !important; height: 56px !important; top: 112px !important; right: -2px !important; } .planet-shani { width: 60px !important; height: 54px !important; top: 50px !important; right: 18px !important; } .hero-h1 { font-size: clamp(34px, 12vw, 46px) !important; } .fpill { font-size: .64rem !important; padding: 8px 6px !important; } } @media (max-width: 320px) { header[role="banner"] { height: 40px !important; } .mob-nav-drawer { top: 40px !important; } .planet-chandra { width: 52px !important; height: 52px !important; top: 48px !important; left: 2px !important; } .planet-surya { width: 48px !important; height: 48px !important; top: 108px !important; right: 0px !important; } .planet-shani { width: 50px !important; height: 46px !important; top: 48px !important; right: 14px !important; } .hero-h1 { font-size: clamp(28px, 11vw, 38px) !important; margin-bottom: 10px !important; } .feat-grid { gap: 5px !important; margin-bottom: 12px !important; } .fpill { font-size: .58rem !important; padding: 7px 5px !important; } .pill-gold { font-size: .76rem !important; padding: 12px 16px !important; } .pill-ghost { font-size: .72rem !important; padding: 11px 16px !important; } } /* ══ BRIGHT WHITE TITLES. all sections except landing + birth ══ */ /* Tools section (sv3) */ .sv3-title { color: #FFFFFF !important; } .sv3-title em { color: rgba(255,255,255,.82) !important; } .sv3-title strong { color: #FFFFFF !important; } /* Sky / Graha Transit. inline h2 override */ #s-sky h2 { color: #FFFFFF !important; } #s-sky h2 em { color: rgba(255,255,255,.82) !important; } #s-sky h2 strong { color: #FFFFFF !important; } /* Famous Kundli */ .fmk-title { color: #FFFFFF !important; } .fmk-title em { color: rgba(255,255,255,.82) !important; } .fmk-title strong { color: #FFFFFF !important; } /* Pricing */ .pricing-h2 { color: #FFFFFF !important; } .pricing-h2 em { color: rgba(255,255,255,.82) !important; } .pricing-h2 strong { color: #FFFFFF !important; } #s-pricing h2[style] { color: #FFFFFF !important; } /* Articles / Learn */ .al-h2 { color: #FFFFFF !important; } .al-h2 em { color: rgba(255,255,255,.82) !important; } /* FAQ */ .faq2-section h2, .faq2-section > div > h2, .faq2-section > .faq2-hd > h2 { color: #FFFFFF !important; } /* Generic .h2 in dark sections (NOT birth, NOT s-birth) */ .sv3 .h2, #s-sky .h2, #s-famous .h2, #s-pricing .h2, .al-section .h2, .s-faq .h2 { color: #FFFFFF !important; } /* Drawer h2s */ .nk-dr-h2 { color: #FFFFFF !important; } .nk-dr-h2 em { color: rgba(255,255,255,.82) !important; } /* ── DRAWER TEXT DARK OVERRIDE ─────────────────────────── The rule above forces white on ALL .nk-dr-h2. Drawers have a LIGHT background (#EAE6F8) so we restore dark text here. Must come AFTER the white rule to win. */ .nk-drawer .nk-dr-h2, #nk-drawer-10 .nk-dr-h2 { color: #1A1640 !important; } .nk-drawer .nk-dr-h2 em, #nk-drawer-10 .nk-dr-h2 em { color: rgba(26,22,64,.72) !important; } .nk-drawer .nk-dr-h2 strong, #nk-drawer-10 .nk-dr-h2 strong { color: #1A1640 !important; } .nk-drawer .nk-dr-sub { color: rgba(26,22,64,.62) !important; } .nk-drawer .nk-dr-eyebrow { color: #C9A84C !important; } .nk-drawer .nk-label { color: rgba(26,22,64,.82) !important; } .nk-drawer .nk-note { color: rgba(26,22,64,.45) !important; } .nk-drawer .nk-input { color: #1A1640 !important; } .nk-drawer .nk-select { color: #1A1640 !important; } /* Footer. column headings */ .ft-head { color: #FFFFFF !important; } .ft-logo { color: #FFFFFF !important; } .ft-logo em { color: rgba(255,255,255,.82) !important; } /* ── sv3 tool card share row ── */ .sv3-share-row{margin-top:10px;display:flex;gap:6px} .sv3-wa-share{ display:inline-flex;align-items:center;gap:5px; font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:600; color:rgba(37,200,90,.85); background:rgba(37,211,102,.07); border:1px solid rgba(37,211,102,.2); border-radius:999px;padding:4px 11px; text-decoration:none;letter-spacing:.03em; transition:background .18s; } .sv3-wa-share:hover{background:rgba(37,211,102,.15)} /* ══════════════════════════════════════════════════════ KUNDLI SHARE PAGE. full structured shareable report ══════════════════════════════════════════════════════ */ #nk-kundli-share{ position:fixed;inset:0;z-index:3500; background:#f5f3ef; overflow-y:auto; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(100%); transition:transform .42s cubic-bezier(.4,0,.2,1), opacity .18s ease; } #nk-kundli-share.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto} /* Topbar */ .ksp-topbar{ position:sticky;top:0;z-index:10; background:rgba(245,243,239,.97); backdrop-filter:blur(10px); border-bottom:2px solid #1A1640; padding:10px 20px; display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .ksp-logo{ font-family:'Cormorant Garamond',serif;font-size:1rem; font-weight:700;letter-spacing:.08em;color:#1A1640; text-transform:uppercase;flex-shrink:0; } .ksp-logo em{color:#C9A84C;font-style:italic} .ksp-share-btns{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:flex-end} .ksp-btn{ display:inline-flex;align-items:center;gap:5px; font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:700; padding:7px 14px;border-radius:6px;border:none;cursor:pointer; letter-spacing:.04em;transition:all .15s;white-space:nowrap; } .ksp-btn-wa{background:#25D366;color:#fff} .ksp-btn-wa:hover{background:#20b857} .ksp-btn-x{background:#000;color:#fff} .ksp-btn-x:hover{background:#333} .ksp-btn-copy{background:#fff;color:#1A1640;border:1px solid #ccc} .ksp-btn-copy:hover{background:#f0f0f0} .ksp-btn-print{background:#C9A84C;color:#1A1640} .ksp-btn-print:hover{background:#e0bb5a} .ksp-close{ background:none;border:1px solid #ccc;cursor:pointer; font-size:1rem;color:#666;border-radius:4px;padding:5px 10px; transition:all .15s;flex-shrink:0; } .ksp-close:hover{background:#eee;color:#1A1640} /* Body */ .ksp-body{ max-width:1260px;width:95%;margin:0 auto;padding:24px 16px 60px; font-family:'DM Sans',sans-serif; } /* Report header. mimics AstroSage "Traditional" header */ .ksp-report-title{ text-align:center; font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700; color:#1A1640;letter-spacing:.06em; border:2px solid #1A1640;padding:8px;margin-bottom:0; background:#fff; } .ksp-info-box{ border:1px solid #1A1640;border-top:none; background:#fff; display:grid;grid-template-columns:1fr 1fr 1fr; margin-bottom:16px; } @media(max-width:600px){.ksp-info-box{grid-template-columns:1fr 1fr}} .ksp-info-row{ display:contents; } .ksp-info-cell{ padding:5px 10px;border-right:1px solid #ddd;border-bottom:1px solid #ddd; font-size:.72rem;display:flex;align-items:baseline;gap:6px; min-height:28px; } .ksp-info-cell:nth-child(3n){border-right:none} .ksp-info-lbl{ font-weight:700;color:#1A1640;white-space:nowrap;min-width:60px;font-size:.68rem; font-family:'IBM Plex Mono',monospace; } .ksp-info-val{ color:#333;font-size:.72rem; /* API: populated by nkKspBuildPage() */ } .ksp-info-val.redacted{ background:#d44;color:#d44;border-radius:2px;font-size:.5rem; user-select:none; } /* Two-column charts area */ .ksp-charts-row{ display:grid;grid-template-columns:1fr 1fr;gap:0; margin-bottom:16px;border:1px solid #1A1640;background:#fff; } @media(max-width:520px){.ksp-charts-row{grid-template-columns:1fr}} .ksp-chart-col{ padding:12px;border-right:1px solid #ddd;text-align:center; } .ksp-chart-col:last-child{border-right:none} .ksp-chart-title{ font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:700; color:#1A1640;text-align:center;margin-bottom:8px; border-bottom:1px solid #eee;padding-bottom:6px; } .ksp-chart-sub{ font-family:'IBM Plex Mono',monospace;font-size:.55rem;color:#888;margin-top:5px; } /* API stub note inside chart */ .ksp-api-stub{ background:#fffbf0;border:1px dashed rgba(201,168,76,.5); border-radius:4px;padding:8px;margin-top:8px; font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:#8a6010; text-align:left; } /* Section header */ .ksp-section{margin-bottom:16px} .ksp-section-hd{ background:#1A1640;color:#EAE6F8; font-family:'Cormorant Garamond',serif;font-size:.9rem;font-weight:700; letter-spacing:.06em;padding:6px 12px; display:flex;align-items:center;justify-content:space-between; } .ksp-section-hd em{font-style:italic;color:#C9A84C;font-weight:400} /* Standard data table */ .ksp-table{ width:100%;border-collapse:collapse;background:#fff; font-family:'DM Sans',sans-serif;font-size:.72rem; border:1px solid #1A1640;border-top:none; } .ksp-table th{ background:#EAE6F8;color:#1A1640; font-family:'IBM Plex Mono',monospace;font-size:.6rem;font-weight:700; text-transform:uppercase;letter-spacing:.1em; padding:6px 8px;border-bottom:1px solid #1A1640;border-right:1px solid #ddd; text-align:center; } .ksp-table th:last-child{border-right:none} .ksp-table td{ padding:5px 8px;border-bottom:1px solid #eee;border-right:1px solid #eee; color:#333;text-align:center;vertical-align:middle; } .ksp-table td:last-child{border-right:none} .ksp-table td:first-child{font-weight:600;color:#1A1640;text-align:left} .ksp-table tr:last-child td{border-bottom:none} .ksp-table tr:hover td{background:#fffbf4} .ksp-table td.planet-name{ font-family:'Cormorant Garamond',serif;font-size:.82rem;font-weight:700; } .ksp-table td.retro{color:#c62828;font-size:.6rem;vertical-align:super} .ksp-table td.exalt{color:#2e7d32} .ksp-table td.debit{color:#e65100} .ksp-table td.api-hook{ color:#9890C8;font-style:italic;font-size:.65rem; font-family:'IBM Plex Mono',monospace; } /* Dasha timeline */ .ksp-dasha-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; background:#fff;border:1px solid #1A1640;border-top:none; } @media(max-width:600px){.ksp-dasha-grid{grid-template-columns:1fr 1fr}} .ksp-dasha-cell{ padding:8px 10px;border-right:1px solid #ddd;border-bottom:1px solid #ddd; } .ksp-dasha-cell:nth-child(4n){border-right:none} @media(max-width:600px){.ksp-dasha-cell:nth-child(2n){border-right:none}} .ksp-dasha-cell.active{background:#fffbf0;border-left:3px solid #C9A84C} .ksp-dasha-planet{ font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:700;color:#1A1640; } .ksp-dasha-years{ font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:#888; } .ksp-dasha-dates{ font-family:'DM Sans',sans-serif;font-size:.65rem;color:#555;margin-top:3px; } .ksp-dasha-active-badge{ display:inline-block;font-family:'DM Sans',sans-serif;font-size:.55rem; font-weight:700;color:#8A6010;background:rgba(201,168,76,.15); border:1px solid rgba(201,168,76,.35);border-radius:3px; padding:1px 5px;margin-top:3px;letter-spacing:.04em;text-transform:uppercase; } /* Ashtakavarga table. 12 cols */ .ksp-avarga-wrap{overflow-x:auto;background:#fff;border:1px solid #1A1640;border-top:none} .ksp-avarga-table{ width:100%;border-collapse:collapse;min-width:600px; font-family:'IBM Plex Mono',monospace;font-size:.65rem; } .ksp-avarga-table th{ background:#EAE6F8;color:#1A1640;padding:5px 6px; border-bottom:1px solid #1A1640;border-right:1px solid #ddd;text-align:center; font-size:.58rem; } .ksp-avarga-table td{ padding:4px 6px;border-bottom:1px solid #eee;border-right:1px solid #eee; text-align:center;color:#333; } .ksp-avarga-table td:first-child{font-weight:700;color:#1A1640;text-align:left;background:#fafaf8} .ksp-avarga-table tr:last-child td{border-bottom:none;background:#EAE6F8;font-weight:700} .ksp-avarga-table td.lo{color:#c62828} .ksp-avarga-table td.hi{color:#2e7d32} /* Footer */ .ksp-footer{ text-align:center;padding:16px;margin-top:20px; border-top:1px solid #1A1640;background:#fff; } .ksp-footer-txt{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:.9rem;color:#666; } .ksp-footer-url{ font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:#C9A84C; display:block;margin-top:3px; } /* Share FAB. appears after chart loads */ #nk-share-fab{ position:fixed;bottom:80px;right:24px;z-index:900; background:linear-gradient(135deg,#C9A84C,#E8C97A); color:#1A1640;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:700; padding:10px 20px;border-radius:999px;border:none;cursor:pointer; display:flex;align-items:center;gap:8px; box-shadow:0 6px 24px rgba(201,168,76,.45); opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none; transition:opacity .35s,visibility .35s,transform .35s; letter-spacing:.04em; } #nk-share-fab.vis{opacity:1;visibility:visible;transform:translateY(0);pointer-events:all} #nk-share-fab:hover{background:linear-gradient(135deg,#e0bb5a,#f0d080);transform:translateY(-2px);box-shadow:0 10px 32px rgba(201,168,76,.5)} @media print{ #nk-kundli-share .ksp-topbar{display:none!important} #nk-kundli-share{transform:none!important;position:static} .ksp-api-stub{display:none} } /* ── COMMENT SECTION ── */ @keyframes nkdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .nkd-section{margin-top:36px;padding-top:28px;border-top:1px solid rgba(152,144,200,.15)} .nkd-title{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700;color:#1A1640;margin-bottom:16px} .nkd-title em{font-style:italic;font-weight:400;color:rgba(26,22,64,.55)} .nkd-textarea,.nkd-name{width:100%;background:rgba(210,205,238,.28);border:1.5px solid rgba(152,144,200,.25);border-radius:10px;padding:10px 13px;font-family:'DM Sans',sans-serif;font-size:.82rem;color:#1A1640;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;line-height:1.6} .nkd-textarea{resize:vertical;display:block;margin-bottom:8px} .nkd-textarea::placeholder,.nkd-name::placeholder{color:rgba(26,22,64,.3);font-style:italic} .nkd-textarea:focus,.nkd-name:focus{border-color:rgba(201,168,76,.5);background:rgba(210,205,238,.45);box-shadow:0 0 0 3px rgba(201,168,76,.08)} .nkd-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:20px} .nkd-btn{height:40px;padding:0 20px;background:#C9A84C;color:#1A1640;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;border-radius:999px;border:none;cursor:pointer;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:background .18s,transform .18s} .nkd-btn:hover{background:#E8C97A;transform:translateY(-1px)} .nkd-comment{background:rgba(255,255,255,.55);border:1px solid rgba(152,144,200,.18);border-radius:12px;padding:14px 15px;margin-bottom:10px;animation:nkdIn .3s both;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} .nkd-comment-head{display:flex;align-items:center;gap:9px;margin-bottom:8px} .nkd-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:.85rem;font-weight:700;color:#EAE6F8} .nkd-avatar[data-h="0"]{background:radial-gradient(circle at 35% 30%,#E8C97A,#7A5810)} .nkd-avatar[data-h="1"]{background:radial-gradient(circle at 35% 30%,#9890D0,#3A3480)} .nkd-avatar[data-h="2"]{background:radial-gradient(circle at 35% 30%,#C890A0,#6A3040)} .nkd-avatar[data-h="3"]{background:radial-gradient(circle at 35% 30%,#70B8C0,#204860)} .nkd-avatar[data-h="4"]{background:radial-gradient(circle at 35% 30%,#D4A060,#6A3810)} .nkd-author{font-family:'Cormorant Garamond',serif;font-size:.92rem;font-weight:700;color:#1A1640} .nkd-time{font-family:'IBM Plex Mono',monospace;font-size:.56rem;color:rgba(26,22,64,.38);margin-left:auto} .nkd-comment-text{font-family:'DM Sans',sans-serif;font-size:.82rem;color:rgba(26,22,64,.72);line-height:1.65} .nkd-empty{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.9rem;color:rgba(26,22,64,.3);padding:12px 0 4px;text-align:center} .nkd-count{font-family:'DM Sans',sans-serif;font-size:.7rem;color:rgba(26,22,64,.4);margin-bottom:14px} .nkd-count b{font-family:'Cormorant Garamond',serif;font-size:.95rem;color:#C9A84C;font-weight:700} /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } } /* ── Tool page shell ─────────────────────────────────── */ #nk-tool-page { position: relative; z-index: 10; min-height: 100vh; background: var(--nk-dark-deep, #050310); padding: 0; } #nk-tool-page-inner { max-width: 1180px; margin: 0 auto; padding: 0 48px 120px; } /* ── Tool page top bar ───────────────────────────────── */ #nk-tool-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 48px 0; max-width: 1180px; margin: 0 auto; } .nk-tool-back { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 500; color: rgba(201,168,76,.85); text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; letter-spacing: .04em; transition: color .2s; } .nk-tool-back:hover { color: #C9A84C; } .nk-tool-back svg { width: 14px; height: 14px; } /* ── Tool nav tabs ───────────────────────────────────── */ #nk-tool-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 14px 48px 0; max-width: 1180px; margin: 0 auto; border-bottom: 1px solid rgba(152,144,200,.12); } .nk-tool-tab { display: inline-flex; align-items: center; font-family: 'DM Sans', sans-serif; font-size: .73rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: rgba(152,144,200,.7); padding: 8px 14px 10px; border-radius: 8px 8px 0 0; cursor: pointer; background: none; border: none; text-decoration: none; transition: color .18s, background .18s; position: relative; bottom: -1px; border-bottom: 2px solid transparent; } .nk-tool-tab:hover { color: rgba(201,168,76,.9); } .nk-tool-tab.active { color: #C9A84C; border-bottom: 2px solid #C9A84C; background: rgba(201,168,76,.04); } /* ── Share + Print bar ───────────────────────────────── */ #nk-tool-actions { display: flex; align-items: center; gap: 10px; } .nk-tool-action-btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 500; color: rgba(152,144,200,.8); background: rgba(152,144,200,.07); border: 1px solid rgba(152,144,200,.18); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background .18s, color .18s, border-color .18s; letter-spacing: .04em; } .nk-tool-action-btn:hover { background: rgba(201,168,76,.1); color: #C9A84C; border-color: rgba(201,168,76,.3); } .nk-tool-action-btn svg { width: 13px; height: 13px; } /* ── Tool page heading ───────────────────────────────── */ .nk-tool-heading { padding: 28px 0 0; } .nk-tool-heading-kicker { font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #C9A84C; margin-bottom: 6px; } .nk-tool-heading-title { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; line-height: 1.1; color: #EAE6F8; margin: 0 0 6px; } .nk-tool-heading-sub { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: rgba(152,144,200,.55); margin-bottom: 22px; } /* ── Loading / error states ─────────────────────────── */ .nk-tool-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; gap: 16px; font-family: 'DM Sans', sans-serif; font-size: .82rem; color: rgba(152,144,200,.6); } .nk-tool-spinner { width: 32px; height: 32px; border: 2px solid rgba(201,168,76,.15); border-top-color: rgba(201,168,76,.7); border-radius: 50%; animation: nkSpin .8s linear infinite; } @keyframes nkSpin { to { transform: rotate(360deg); } } .nk-tool-error { padding: 40px 24px; text-align: center; font-family: 'DM Sans', sans-serif; font-size: .85rem; color: rgba(200,80,60,.8); background: rgba(200,80,60,.06); border: 1px solid rgba(200,80,60,.2); border-radius: 16px; margin-top: 32px; } /* ── Content cards (reuse existing nk-live-card styles) ─ */ #nk-tool-content .nk-live-card { background: rgba(255,255,255,.74); border: 1px solid rgba(201,168,76,.2); border-radius: 24px; padding: 22px 24px; backdrop-filter: blur(12px); box-shadow: 0 14px 50px rgba(26,22,64,.08); margin-bottom: 18px; } #nk-tool-content .nk-live-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; } #nk-tool-content .nk-live-kicker { font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C9A84C; } #nk-tool-content .nk-live-title { font-family: 'Cormorant Garamond', serif; font-size: 2rem; line-height: 1; color: #1A1640; margin: 0; } #nk-tool-content .nk-live-meta { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: rgba(26,22,64,.5); } #nk-tool-content .nk-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #nk-tool-content .nk-live-table { width: 100%; border-collapse: collapse; } #nk-tool-content .nk-live-table th, #nk-tool-content .nk-live-table td { padding: 10px; border-bottom: 1px solid rgba(152,144,200,.14); text-align: left; font-family: 'DM Sans', sans-serif; font-size: .8rem; color: #1A1640; vertical-align: top; } #nk-tool-content .nk-live-table th { font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,22,64,.45); } #nk-tool-content .nk-live-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(152,144,200,.24); background: rgba(255,255,255,.5); font-family: 'DM Sans', sans-serif; font-size: .72rem; color: #5850A8; margin: 0 8px 8px 0; } #nk-tool-content .nk-live-stat { padding: 14px 16px; border: 1px solid rgba(152,144,200,.18); border-radius: 18px; background: rgba(255,255,255,.45); } #nk-tool-content .nk-live-stat-label { font-family: 'DM Sans', sans-serif; font-size: .68rem; color: rgba(26,22,64,.45); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; } #nk-tool-content .nk-live-stat-value { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; line-height: 1; color: #1A1640; } #nk-tool-content .nk-live-stat-note { font-family: 'DM Sans', sans-serif; font-size: .75rem; color: rgba(26,22,64,.62); margin-top: 6px; line-height: 1.55; } #nk-tool-content .nk-live-svg-wrap { padding: 18px; border: 1px solid rgba(152,144,200,.18); border-radius: 20px; background: rgba(255,255,255,.5); min-height: 320px; display: flex; justify-content: center; align-items: center; } #nk-tool-content .nk-live-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } #nk-tool-content .nk-live-list li { padding: 14px 16px; border: 1px solid rgba(152,144,200,.18); border-radius: 18px; background: rgba(255,255,255,.45); font-family: 'DM Sans', sans-serif; font-size: .82rem; line-height: 1.6; color: #1A1640; } #nk-tool-content .nk-live-select { border: 1px solid rgba(152,144,200,.3); background: rgba(255,255,255,.8); color: #1A1640; border-radius: 999px; padding: 8px 14px; font-family: 'DM Sans', sans-serif; font-size: .78rem; } /* ── Ashtakavarga SVG chart ──────────────────────────── */ .nk-av-chart { margin-top: 14px; padding: 10px 10px 8px; border: 1px solid rgba(152,144,200,.18); border-radius: 18px; background: rgba(255,255,255,.35); } .nk-av-chart svg { width: 100%; height: auto; display:block; } /* ── Share toast ─────────────────────────────────────── */ #nk-copy-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(12px); background: #1A1640; color: #C9A84C; border: 1px solid rgba(201,168,76,.3); border-radius: 999px; padding: 10px 20px; font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 500; letter-spacing: .05em; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; z-index: 9999; } #nk-copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Responsive ──────────────────────────────────────── */ @media (max-width: 900px) { #nk-tool-page-inner { padding: 0 20px 80px; } #nk-tool-topbar, #nk-tool-nav { padding-left: 20px; padding-right: 20px; } #nk-tool-content .nk-live-grid { grid-template-columns: 1fr; } #nk-tool-content .nk-live-list { grid-template-columns: 1fr; } .nk-tool-heading-title { font-size: 1.8rem; } } @media (max-width: 480px) { #nk-tool-nav { gap: 2px; } .nk-tool-tab { padding: 8px 10px 10px; font-size: .67rem; } } /* ── Print ───────────────────────────────────────────── */ @media print { body > *:not(#nk-tool-page) { display: none !important; } #nk-tool-page { background: #fff !important; } #nk-tool-topbar, #nk-tool-nav, #nk-tool-actions { display: none !important; } #nk-tool-content .nk-live-card { background: #fff !important; backdrop-filter: none !important; box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; margin-bottom: 16px; } #nk-tool-content .nk-live-grid { grid-template-columns: 1fr; } #nk-tool-content .nk-live-list { grid-template-columns: 1fr; } .nk-tool-heading-title, #nk-tool-content .nk-live-title { color: #000 !important; } #nk-tool-content .nk-live-kicker { color: #8a6d00 !important; } } /* Mobile absolute center logo */ @media (max-width: 768px) { .nk-logo, .nav-logo-desk { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } .mob-menu-btn { margin-left: auto !important; /* Push hamburger to right if logo is absolute */ } }