/* ========================================================================== asarastro — Raj Ganshani | Astro Consultant, Ahmedabad vCard-style informative site. Cosmic dark theme (with light mode). ========================================================================== */ /* ---------- Fonts (loaded via in index.html for faster paint) ---------- */ /* ---------- Design tokens ---------- */ :root { --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --gold-1:#ffd98a; --gold-2:#f5a623; --gold-3:#e0851a; --violet:#b388ff; --violet-2:#7b5cff; --grad-gold:linear-gradient(135deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3)); --grad-cosmic:linear-gradient(135deg,var(--gold-2),var(--violet)); --radius:18px; --radius-sm:12px; --radius-lg:26px; --maxw:1240px; --tr:.28s cubic-bezier(.4,0,.2,1); --shadow:0 24px 60px -18px rgba(0,0,0,.55); --shadow-sm:0 10px 30px -12px rgba(0,0,0,.5); } /* Dark (default) */ :root, :root[data-theme="dark"]{ --bg-0:#0a0818; --bg-1:#100d24; --bg-2:#16122f; --bg-3:#1d1840; --panel:rgba(28,23,58,.55); --panel-solid:#181334; --border:rgba(179,136,255,.14); --border-strong:rgba(245,166,35,.35); --text:#efeafc; --text-2:#c6c0e4; --muted:#928cba; --star:rgba(255,255,255,.85); --input-bg:rgba(10,8,24,.55); } /* Light */ :root[data-theme="light"]{ --bg-0:#f4f1fb; --bg-1:#efeafc; --bg-2:#ffffff; --bg-3:#f7f4ff; --panel:rgba(255,255,255,.85); --panel-solid:#ffffff; --border:rgba(123,92,255,.16); --border-strong:rgba(224,133,26,.4); --text:#221c40; --text-2:#463d68; --muted:#6f6890; --star:rgba(123,92,255,.18); --input-bg:rgba(123,92,255,.05); --shadow:0 24px 60px -22px rgba(80,60,160,.28); --shadow-sm:0 12px 30px -14px rgba(80,60,160,.22); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); color:var(--text); line-height:1.65; background:var(--bg-0); font-weight:400; font-size:15.5px; min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.2;color:var(--text)} ::selection{background:var(--gold-2);color:#1a1330} /* ---------- Cosmic background ---------- */ .bg-cosmos{position:fixed;inset:0;z-index:-2; background: radial-gradient(1200px 700px at 80% -10%, rgba(123,92,255,.28), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(245,166,35,.14), transparent 60%), linear-gradient(160deg,var(--bg-1),var(--bg-0) 70%); } @keyframes twinkle{from{opacity:.55}to{opacity:1}} /* ---------- Layout shell ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:28px 22px 40px; display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start} /* ---------- Sidebar / profile card ---------- */ .sidebar{position:sticky;top:28px; background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--border);border-radius:var(--radius-lg); padding:30px 26px 26px;box-shadow:var(--shadow);text-align:center;overflow:hidden} .sidebar::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-cosmic)} .avatar-wrap{position:relative;width:150px;height:150px;margin:6px auto 18px} .avatar-wrap .ring{position:absolute;inset:-6px;border-radius:50%; background:conic-gradient(from 0deg,var(--gold-2),var(--violet),var(--gold-2)); animation:spin 14s linear infinite;filter:blur(.3px);opacity:.85} .avatar-wrap .photo{position:absolute;inset:4px;border-radius:50%;overflow:hidden; background:var(--bg-2);border:3px solid var(--bg-1);z-index:1} .avatar-wrap .photo img{width:100%;height:100%;object-fit:cover} @keyframes spin{to{transform:rotate(360deg)}} .status-dot{position:absolute;bottom:10px;right:12px;z-index:2;width:20px;height:20px;border-radius:50%; background:#39d98a;border:3px solid var(--panel-solid);box-shadow:0 0 0 3px rgba(57,217,138,.25)} .p-name{font-size:1.55rem;letter-spacing:.3px;margin-bottom:4px} .p-name span{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .p-role{min-height:22px;font-size:.9rem;color:var(--gold-1);font-weight:500;letter-spacing:.5px} .p-role .cursor{color:var(--gold-2);font-weight:400;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .p-badge{display:inline-flex;align-items:center;gap:7px;margin-top:14px; font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;color:var(--text-2); background:rgba(57,217,138,.1);border:1px solid rgba(57,217,138,.3); padding:6px 12px;border-radius:100px} .p-badge i{width:7px;height:7px;border-radius:50%;background:#39d98a;box-shadow:0 0 8px #39d98a} .divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);margin:22px 0} .socials{display:flex;justify-content:center;gap:11px;margin:22px 0 4px} .socials a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:var(--input-bg);border:1px solid var(--border);color:var(--text-2);transition:var(--tr)} .socials a:hover{color:#1a1330;background:var(--grad-gold);border-color:transparent;transform:translateY(-3px)} .socials svg{width:17px;height:17px} .side-btns{display:flex;gap:10px;margin-top:20px} .side-btns .btn{flex:1;padding:12px 10px;font-size:.82rem} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:600;font-size:.9rem;letter-spacing:.3px;padding:13px 24px;border-radius:100px; transition:var(--tr);white-space:nowrap;border:1px solid transparent} .btn svg{width:16px;height:16px} .btn-primary{background:var(--grad-gold);color:#1a1330;box-shadow:0 10px 24px -10px rgba(245,166,35,.7)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(245,166,35,.8)} .btn-ghost{background:var(--input-bg);border-color:var(--border);color:var(--text)} .btn-ghost:hover{border-color:var(--border-strong);color:var(--gold-1)} .btn-wa{background:#25d366;color:#04310f} .btn-wa:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(37,211,102,.7)} /* ---------- Main card ---------- */ .main{background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow); min-height:80vh;overflow:clip;position:relative} /* ---------- Sections ---------- */ .section{display:none;padding:40px 46px 48px;animation:fadeUp .5s ease both} .section.active{display:block} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .sec-head{margin-bottom:34px} .sec-head .kicker{display:inline-block;font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase; color:var(--gold-2);font-weight:600;margin-bottom:10px} .sec-head h2{font-size:2.15rem;letter-spacing:.3px} .sec-head h2 .u{position:relative;color:var(--gold-2)} .sec-head p.lead{color:var(--text-2);margin-top:10px;max-width:640px} .sec-head .bar{width:60px;height:4px;border-radius:4px;background:var(--grad-gold);margin-top:16px} /* ---------- About ---------- */ .about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:start} .about-bio p{color:var(--text-2);margin-bottom:14px} .about-bio p:first-of-type::first-letter{font-family:var(--font-head);font-size:3.1rem;line-height:.8; float:left;padding:6px 12px 0 0;color:var(--gold-2)} .facts{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px} .facts li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--border);font-size:.9rem} .facts li:last-child{border-bottom:none} .facts .k{color:var(--muted)} .facts .v{color:var(--text);font-weight:500;text-align:right} .counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px} .counter{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius); padding:24px 14px;text-align:center;transition:var(--tr)} .counter:hover{border-color:var(--border-strong);transform:translateY(-4px)} .counter .num{font-family:var(--font-head);font-size:2.3rem;font-weight:800; background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1} .counter .cl{font-size:.78rem;color:var(--muted);margin-top:8px;letter-spacing:.4px} /* ---------- Generic cards grid ---------- */ .grid{display:grid;gap:18px} .grid.cols-2{grid-template-columns:repeat(2,1fr)} .card{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius); padding:26px 24px;transition:var(--tr);position:relative;overflow:hidden} .card:hover{border-color:var(--border-strong);transform:translateY(-5px);box-shadow:var(--shadow-sm)} .card .ic-box{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px; background:rgba(245,166,35,.12);color:var(--gold-2);border:1px solid var(--border)} .card .ic-box svg{width:24px;height:24px} .card:hover .ic-box{background:var(--grad-gold);color:#1a1330} .card h3{font-size:1.12rem;margin-bottom:8px} .card p{color:var(--text-2);font-size:.88rem} .card .tag{position:absolute;top:16px;right:16px;font-size:.62rem;letter-spacing:1px;text-transform:uppercase; color:var(--violet);background:rgba(179,136,255,.12);border:1px solid rgba(179,136,255,.25); padding:4px 9px;border-radius:100px} /* ---------- Expertise ---------- */ .block-title{font-size:1.25rem;margin-bottom:20px;display:flex;align-items:center;gap:10px} .block-title::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--grad-gold)} .timeline{position:relative;padding-left:28px} .timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--border-strong)} .tl-item{position:relative;padding-bottom:26px} .tl-item:last-child{padding-bottom:0} .tl-item::before{content:"";position:absolute;left:-27px;top:4px;width:14px;height:14px;border-radius:50%; background:var(--grad-gold);box-shadow:0 0 0 4px var(--bg-1)} .tl-item .per{font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;color:var(--gold-2);font-weight:600} .tl-item h4{font-size:1.05rem;margin:4px 0 5px} .tl-item p{color:var(--text-2);font-size:.86rem} /* Areas of Practice — a plain list of disciplines (see .chip in the v7 block below) */ .practice{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .practice .chip{cursor:default} .practice .chip:hover{transform:none;border-color:var(--border);color:var(--text)} /* ---------- Remedies gallery ---------- */ .rem-card{cursor:default} .rem-card .rem-ic{font-size:1.6rem} /* why choose row */ .why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px} .why .card{text-align:center} .why .n{font-family:var(--font-head);font-size:1.4rem;color:var(--gold-2);font-weight:800} /* ---------- Testimonials ---------- */ .testi-track{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory;scrollbar-width:thin} .testi-track::-webkit-scrollbar{height:7px} .testi-track::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px} .testi{scroll-snap-align:start;min-width:320px;flex:0 0 340px; background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;position:relative} .testi .quote-mark{font-family:var(--font-head);font-size:3.4rem;line-height:.5;color:var(--gold-2);opacity:.4} .testi p{color:var(--text-2);font-size:.9rem;margin:6px 0 18px} .testi .who{display:flex;align-items:center;gap:12px} .testi .who .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--grad-cosmic);color:#fff;font-weight:700;font-family:var(--font-head)} .testi .who .nm{font-weight:600;font-size:.92rem} .testi .who .rl{font-size:.76rem;color:var(--muted)} .stars{color:var(--gold-2);font-size:.8rem;letter-spacing:2px;margin-bottom:6px} /* ---------- Blog ---------- */ .post{display:flex;flex-direction:column;overflow:hidden;padding:0} .post .thumb{height:120px;background:var(--grad-cosmic);position:relative;display:grid;place-items:center} .post .thumb .glyph{font-size:2.4rem;opacity:.9} .post .cat{position:absolute;top:12px;left:12px;font-size:.66rem;letter-spacing:.8px;text-transform:uppercase; background:rgba(10,8,24,.7);color:var(--gold-1);padding:5px 11px;border-radius:100px;backdrop-filter:blur(4px)} .post .body{padding:20px 22px} .post .meta{font-size:.72rem;color:var(--muted);letter-spacing:.5px;margin-bottom:8px} .post h3{font-size:1.05rem;margin-bottom:8px} .post p{color:var(--text-2);font-size:.85rem;margin-bottom:14px} .post .rd{font-size:.82rem;color:var(--gold-2);font-weight:600;display:inline-flex;align-items:center;gap:6px} .post:hover .rd{gap:10px} /* ---------- FAQ ---------- */ .faq{max-width:820px} .faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:12px; background:var(--input-bg);overflow:hidden;transition:var(--tr)} .faq-item.open{border-color:var(--border-strong)} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:18px 22px;font-weight:500;font-size:.95rem;text-align:left;color:var(--text)} .faq-q .pm{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:var(--input-bg);border:1px solid var(--border);color:var(--gold-2);font-size:1.1rem;transition:var(--tr)} .faq-item.open .pm{background:var(--grad-gold);color:#1a1330;transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease} .faq-a p{padding:0 22px 20px;color:var(--text-2);font-size:.88rem} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:start} .info-cards{display:flex;flex-direction:column;gap:14px} .info-card{display:flex;gap:15px;align-items:flex-start; background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px} .info-card .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center; background:rgba(245,166,35,.12);color:var(--gold-2);border:1px solid var(--border)} .info-card .ic svg{width:19px;height:19px} .info-card .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)} .info-card .txt{color:var(--text);font-weight:500;font-size:.92rem} .info-card a.txt:hover{color:var(--gold-2)} .hours{margin-top:6px} .hours li{display:flex;justify-content:space-between;font-size:.82rem;padding:7px 0;border-bottom:1px dashed var(--border)} .hours li:last-child{border-bottom:none} .hours .d{color:var(--muted)} .hours .t{color:var(--text-2);font-weight:500} .form{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field{margin-bottom:14px} .field label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:6px;letter-spacing:.4px} .field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:12px; background:var(--panel-solid);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:.9rem;transition:var(--tr)} .field textarea{resize:vertical;min-height:110px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(245,166,35,.15)} .form-note{font-size:.78rem;color:var(--muted);margin-top:10px;text-align:center} .map-wrap{margin-top:22px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);height:260px} .map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.2)} /* ---------- Footer ---------- */ .foot{padding:22px 46px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap; justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-size:.8rem} .foot a{color:var(--text-2)} .foot a:hover{color:var(--gold-2)} /* ---------- Floating buttons ---------- */ .fab{position:fixed;right:22px;z-index:60;width:56px;height:56px;border-radius:50%; display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:var(--tr)} .fab svg{width:26px;height:26px} .fab.wa{bottom:22px;background:#25d366;color:#fff;animation:pulse 2.4s infinite} .fab.wa:hover{transform:scale(1.08)} .fab.top{bottom:88px;background:var(--panel-solid);border:1px solid var(--border);color:var(--gold-1);opacity:0;pointer-events:none} .fab.top.show{opacity:1;pointer-events:auto} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} /* ---------- Toast ---------- */ .toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);z-index:80; opacity:0;visibility:hidden;pointer-events:none; background:var(--panel-solid);border:1px solid var(--border-strong);border-radius:100px; padding:12px 24px;font-size:.86rem;box-shadow:var(--shadow); transition:transform .4s cubic-bezier(.2,.9,.2,1),opacity .3s ease,visibility .3s} .toast.show{transform:translate(-50%,0);opacity:1;visibility:visible} /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1080px){ .wrap{grid-template-columns:300px 1fr} .section{padding:34px 34px 40px} .counters{grid-template-columns:repeat(2,1fr)} .why{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .wrap{grid-template-columns:1fr;gap:20px} .sidebar{position:relative;top:0} .about-grid,.contact-grid{grid-template-columns:1fr} .sec-head h2{font-size:1.8rem} } @media (max-width:640px){ .wrap{padding:16px 12px 30px} .section{padding:26px 20px 32px} .grid.cols-2{grid-template-columns:1fr} .counters{grid-template-columns:repeat(2,1fr)} .why{grid-template-columns:1fr} .form .row{grid-template-columns:1fr} .foot{padding:20px 20px;flex-direction:column;text-align:center} .sec-head h2{font-size:1.6rem} .facts{margin-top:6px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ========================================================================== v2 — review fixes + client requests ========================================================================== */ :root{ --ink-gold:#f5a623; --maxw:1300px; } :root[data-theme="light"]{ --ink-gold:#9a5200; } /* Accessible hidden text (for screen readers) */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Visible keyboard focus */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--ink-gold); outline-offset:2px; border-radius:8px; } .faq-q:focus-visible,.rail-nav button:focus-visible{ outline-offset:-2px; } .section:focus{ outline:none; } /* --- Light-mode readable accents (dark theme keeps bright gold) --- */ :root[data-theme="light"] .sec-head .kicker, :root[data-theme="light"] .sec-head h2 .u, :root[data-theme="light"] .tl-item .per, :root[data-theme="light"] .post .rd, :root[data-theme="light"] .stars, :root[data-theme="light"] .card .ic-box, :root[data-theme="light"] .card .n, :root[data-theme="light"] .faq-q .pm, :root[data-theme="light"] .info-card .ic, :root[data-theme="light"] .p-role, :root[data-theme="light"] .p-role .cursor, :root[data-theme="light"] .fab.top, :root[data-theme="light"] .btn-ghost:hover, :root[data-theme="light"] .foot a:hover, :root[data-theme="light"] .info-card a.txt:hover{ color:var(--ink-gold); } :root[data-theme="light"] .p-name span, :root[data-theme="light"] .counter .num{ background:none; -webkit-text-fill-color:var(--ink-gold); color:var(--ink-gold); } .form-note a{ color:var(--ink-gold); font-weight:600; } /* --- Contact card polish --- */ .info-card .txt{overflow-wrap:anywhere} .req{color:#e0664f;font-weight:700} .disclaimer{margin-top:22px;font-size:.8rem;color:var(--muted); border-left:3px solid var(--border-strong);padding:11px 15px;background:var(--input-bg);border-radius:10px} /* --- Small-screen tap targets, FAB & footer breathing room, fluid testimonials --- */ @media (max-width:640px){ .socials a{width:44px;height:44px} .fab{width:52px;height:52px} .fab.wa{bottom:16px;right:16px} .fab.top{bottom:78px} .foot{padding-bottom:82px} .testi{flex:0 0 86%;min-width:0} } /* --- Print --- */ @media print{ .loader,.bg-cosmos,.bg-galaxy,.stars-layer,.bg-meteors,.fab,.rail,.toast,.map-wrap,.side-btns{display:none!important} body{padding:0!important} .section{display:block!important;padding:14px 0!important;break-inside:avoid} body{background:#fff;color:#000} .main,.sidebar{box-shadow:none;border:none;background:#fff} .wrap{display:block;max-width:100%} a{color:#000;text-decoration:underline} } /* ========================================================================== v6 — contact page: trust badges + map "Get Directions" ========================================================================== */ .contact-badges{display:flex;flex-wrap:wrap;gap:10px;margin:-6px 0 28px} .cbadge{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-2); background:var(--input-bg);border:1px solid var(--border);padding:8px 15px;border-radius:100px} .cbadge svg{width:15px;height:15px;flex:none;color:var(--gold-2)} :root[data-theme="light"] .cbadge svg{color:var(--ink-gold)} .map-wrap{position:relative} .map-dir{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px; font-size:.84rem;font-weight:600;padding:10px 17px;border-radius:100px; background:var(--grad-gold);color:#1a1330;box-shadow:0 10px 24px -10px rgba(0,0,0,.55);transition:var(--tr)} .map-dir svg{width:16px;height:16px} .map-dir:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(0,0,0,.6)} @media (max-width:520px){ .map-dir{right:50%;transform:translateX(50%)} .map-dir:hover{transform:translateX(50%) translateY(-2px)} } /* ========================================================================== v5 — testimonials carousel: prev/next buttons, no scrollbar, stacked name ========================================================================== */ .testi-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-top:46px;margin-bottom:16px} .testi-nav{display:flex;gap:10px;flex:none} .testi-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--input-bg);border:1px solid var(--border);color:var(--text-2);transition:var(--tr)} .testi-btn:hover:not(:disabled){color:#1a1330;background:var(--grad-gold);border-color:transparent;transform:translateY(-2px)} :root[data-theme="light"] .testi-btn:hover:not(:disabled){color:#1a1330} .testi-btn svg{width:20px;height:20px} .testi-btn:disabled{opacity:.35;cursor:default} /* hide the scrollbar — the buttons replace it */ .testi-track{scrollbar-width:none;-ms-overflow-style:none} .testi-track::-webkit-scrollbar{display:none;height:0;width:0} /* name / role / city each on their own line */ .testi .who .who-txt{display:flex;flex-direction:column;line-height:1.4} .testi .who .nm{display:block;font-weight:600;font-size:.92rem} .testi .who .rl,.testi .who .loc{display:block;font-size:.76rem;color:var(--muted)} @media (max-width:520px){ .testi-head{flex-direction:row;flex-wrap:wrap} .testi-nav{margin-left:auto} } /* ========================================================================== v4 — fix horizontal overflow on wide screens Grid items default to min-width:auto and expand to their content's intrinsic width. The Expertise testimonials scroll-track (5 x 340px) was forcing .main ~1776px wide, overflowing the layout. min-width:0 lets tracks shrink so the track scrolls internally instead. ========================================================================== */ .wrap > .sidebar, .wrap > .main{min-width:0} .grid > *, .about-grid > *, .contact-grid > *, .why > *{min-width:0} .testi-track{max-width:100%} /* ========================================================================== v3 — vertical icon nav rail + real profile photo + brand ========================================================================== */ body{ padding-left:76px; } .rail{position:fixed;left:0;top:0;bottom:0;width:76px;z-index:100; display:flex;flex-direction:column;align-items:center;gap:8px; padding:16px 0;background:var(--panel-solid);border-right:1px solid var(--border); box-shadow:2px 0 26px -16px rgba(0,0,0,.6)} .rail::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-cosmic)} .rail-brand{width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:var(--input-bg);border:1px solid var(--border);margin-bottom:6px;transition:var(--tr)} .rail-brand:hover{border-color:var(--border-strong)} .rail-brand .rb-mark{width:30px;height:30px} .rail-brand .rb-word{display:none} .rail-nav{display:flex;flex-direction:column;gap:8px;flex:1;margin:4px 0;padding:0;list-style:none} .rail-nav button{position:relative;width:52px;height:52px;border-radius:15px;display:grid;place-items:center; color:var(--text-2);background:transparent;transition:var(--tr)} .rail-nav button svg{width:23px;height:23px} .rail-nav button:hover{color:var(--gold-1);background:var(--input-bg)} .rail-nav button.active{color:#1a1330;background:var(--grad-gold);box-shadow:0 8px 18px -8px rgba(245,166,35,.7)} :root[data-theme="light"] .rail-nav button:hover{color:var(--ink-gold)} /* hover / focus tooltip label */ .rail-label{position:absolute;left:62px;top:50%;transform:translateY(-50%) translateX(-8px) scale(.96); background:var(--panel-solid);color:var(--text);border:1px solid var(--border-strong); padding:8px 13px;border-radius:10px;font-size:.82rem;font-weight:500;white-space:nowrap;letter-spacing:.3px; opacity:0;pointer-events:none;transition:var(--tr);box-shadow:var(--shadow-sm);z-index:5} .rail-label::before{content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%) rotate(45deg); width:9px;height:9px;background:var(--panel-solid);border-left:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)} .rail-nav button:hover .rail-label,.rail-nav button:focus-visible .rail-label{opacity:1;transform:translateY(-50%) translateX(0) scale(1)} .rail-theme{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-top:6px; background:var(--input-bg);border:1px solid var(--border);color:var(--text-2);transition:var(--tr)} .rail-theme:hover{color:var(--gold-1);border-color:var(--border-strong)} :root[data-theme="light"] .rail-theme:hover{color:var(--ink-gold)} .rail-theme svg{width:20px;height:20px} /* About: personal quote callout under the bio */ .about-quote{position:relative;margin-top:24px;padding:22px 24px 20px; background:linear-gradient(135deg,rgba(245,166,35,.07),rgba(179,136,255,.04)); border:1px solid var(--border);border-left:3px solid var(--gold-2);border-radius:14px} .about-quote::before{content:"\201C";position:absolute;top:2px;left:14px;line-height:1; font-family:var(--font-head);font-size:3rem;color:var(--gold-2);opacity:.32} .about-quote p{margin:0 0 10px;padding-left:22px;color:var(--text-2);font-style:italic;font-size:.96rem;line-height:1.6} .about-quote cite{display:block;padding-left:22px;color:var(--gold-2);font-style:normal;font-weight:600;font-size:.85rem;letter-spacing:.3px} :root[data-theme="light"] .about-quote{border-left-color:var(--ink-gold)} :root[data-theme="light"] .about-quote::before, :root[data-theme="light"] .about-quote cite{color:var(--ink-gold)} /* About: two mission/journey icon boxes + one-line counter labels */ .about-boxes{margin-top:26px} .counter .cl{white-space:nowrap;font-size:.74rem} @media (max-width:400px){ .counter .cl{white-space:normal} } /* Brand wordmark at top of the profile card */ .side-brand{display:block;width:170px;margin:0 auto 16px} .side-brand img{width:100%;height:auto} /* Real profile photo framing inside the circular avatar */ .avatar-wrap .photo a{display:block;width:100%;height:100%} /* The avatar image is pre-framed with ~16% headroom above the head, so no transform trickery is needed here and the hover zoom can never clip the hair. If the photo is ever replaced, keep that headroom in the file itself. */ .avatar-wrap .photo img.ava-photo{object-fit:cover;object-position:50% 50%; transform:scale(1);transform-origin:50% 50%;transition:transform .4s ease} .avatar-wrap .photo a:hover img.ava-photo{transform:scale(1.06)} /* Rail becomes a bottom icon bar on phones/tablets */ @media (max-width:768px){ /* MOBILE: rail becomes a TOP header — logo centered, theme right, icons in a line below */ body{padding-left:0;padding-top:124px;padding-bottom:0} .rail{top:0;left:0;right:0;bottom:auto;width:auto;height:auto; display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"sp brand thm" "nav nav nav"; align-items:center;gap:8px 6px;padding:11px 14px 8px; border-right:none;border-bottom:1px solid var(--border); box-shadow:0 3px 22px -14px rgba(0,0,0,.6)} .rail::before{top:0;bottom:auto} .rail-brand{grid-area:brand;justify-self:center;width:auto;height:auto;margin:0;background:none;border:none;padding:0} .rail-theme{grid-area:thm;justify-self:end;margin:0} .rail-nav{grid-area:nav;display:flex;flex-direction:row;justify-content:space-between;gap:2px;margin:0;padding-top:4px; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .rail-nav::-webkit-scrollbar{display:none} .rail-nav .rail-label{display:none} /* mobile: WhatsApp bottom-LEFT, back-to-top bottom-RIGHT — balanced corners */ .fab.wa{bottom:16px;left:16px;right:auto} .fab.top{bottom:16px;right:16px} } /* ========================================================================== v7 — Home (landing) page + scroll-reveal animations ========================================================================== */ /* scroll reveal */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;transition:none} } /* ---- Hero (premium) ---- */ .home-hero{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;padding:6px 0 2px} .hero-text{min-width:0} .hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:500;letter-spacing:.4px; color:var(--text-2);background:var(--input-bg);border:1px solid var(--border-strong);padding:8px 15px;border-radius:100px} .hb-dot{width:8px;height:8px;border-radius:50%;background:var(--grad-gold);box-shadow:0 0 10px var(--gold-2);animation:pulse 2.4s infinite} .home-hero h2{font-size:clamp(2rem,3.7vw,2.85rem);line-height:1.14;margin:20px 0 22px} .home-hero .lead{max-width:560px;font-size:1.02rem} .home-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px} .home-cta .btn{padding:11px 15px;font-size:.83rem} .home-cta .btn svg{width:15px;height:15px} /* rotating cosmic wheel */ .hero-visual{position:relative;width:clamp(200px,18vw,250px);aspect-ratio:1;flex:none;justify-self:end;display:grid;place-items:center} .hv-glow{position:absolute;inset:6%;border-radius:50%;filter:blur(10px); background:radial-gradient(circle,rgba(245,166,35,.30),rgba(179,136,255,.14) 45%,transparent 68%)} .hv-ring{position:absolute;border-radius:50%;border:1.5px solid var(--border-strong)} .hv-ring-1{inset:0;border-style:dashed;animation:spin 42s linear infinite} .hv-ring-2{inset:15%;animation:spin 28s linear infinite reverse} .hv-ring-3{inset:30%;border-color:var(--border);animation:spin 20s linear infinite} .hv-planet{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%; background:var(--grad-gold);box-shadow:0 0 14px var(--gold-2)} .hv-ring-2 .hv-planet{width:10px;height:10px;background:var(--violet);box-shadow:0 0 12px var(--violet)} .hv-core{position:absolute;width:36%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;line-height:1; background:radial-gradient(circle at 38% 32%,var(--bg-3),var(--bg-1) 78%);border:1px solid var(--border-strong); font-size:clamp(1.8rem,4vw,2.6rem);color:var(--gold-2); box-shadow:0 0 46px -6px rgba(245,166,35,.55),inset 0 0 22px -8px rgba(245,166,35,.35)} :root[data-theme="light"] .hv-core{color:var(--ink-gold);background:radial-gradient(circle at 38% 32%,#fff,#f4f1fb 80%)} .hv-star{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:twinkle 3s ease-in-out infinite alternate} /* entrance */ .hero-text > *{opacity:0;animation:heroUp .7s forwards} .hero-text > :nth-child(1){animation-delay:.08s} .hero-text > :nth-child(2){animation-delay:.2s} .hero-text > :nth-child(3){animation-delay:.32s} .hero-text > :nth-child(4){animation-delay:.44s} .hero-visual{opacity:0;animation:heroPop 1s .3s forwards} @keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes heroPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}} @media (prefers-reduced-motion:reduce){ .hero-text>*,.hero-visual{opacity:1!important;animation:none!important} .hv-ring{animation:none!important} } .home-counters{margin:38px 0 4px} @media (max-width:1399px){ .home-hero{grid-template-columns:1fr;gap:20px;justify-items:center} .hero-visual{order:-1;justify-self:center;width:clamp(180px,32vw,236px)} .hero-text{text-align:center} .home-hero .lead{max-width:640px;margin-left:auto;margin-right:auto} .home-cta{justify-content:center} } /* section blocks */ .home-block{margin-top:48px} .home-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap} .home-head .kicker{color:var(--gold-2)} :root[data-theme="light"] .home-head .kicker{color:var(--ink-gold)} .home-head h3{font-size:1.55rem;margin-top:4px} .home-more{display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--gold-2);font-weight:600;font-size:.86rem; padding:9px 15px;border-radius:100px;border:1px solid var(--border);background:var(--input-bg);transition:var(--tr)} .home-more svg{width:16px;height:16px;transition:var(--tr)} .home-more:hover{color:#1a1330;background:var(--grad-gold);border-color:transparent} .home-more:hover svg{transform:translateX(3px)} :root[data-theme="light"] .home-more{color:var(--ink-gold)} :root[data-theme="light"] .home-more:hover{color:#1a1330} .home-lead{color:var(--text-2);max-width:820px} /* services mini grid — centered cards (icon on top), matching the Expertise cards */ .home-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .home-mini{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 16px;border-radius:var(--radius); background:var(--input-bg);border:1px solid var(--border);color:var(--text);transition:var(--tr)} .home-mini .ic-box{width:56px;height:56px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center; background:rgba(245,166,35,.12);color:var(--gold-2);border:1px solid var(--border)} .home-mini .ic-box svg{width:26px;height:26px} :root[data-theme="light"] .home-mini .ic-box{color:var(--ink-gold)} .home-mini-t{font-weight:600;font-size:1rem;font-family:var(--font-head);line-height:1.3} .home-mini:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow-sm)} .home-mini:hover .ic-box{background:var(--grad-gold);color:#1a1330} /* systems */ .home-sys-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .home-sys{text-align:center;padding:24px 14px;border-radius:var(--radius);background:var(--input-bg);border:1px solid var(--border);transition:var(--tr)} .home-sys .ic-box{width:56px;height:56px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center; background:rgba(245,166,35,.12);color:var(--gold-2);border:1px solid var(--border)} .home-sys .ic-box svg{width:26px;height:26px} :root[data-theme="light"] .home-sys .ic-box{color:var(--ink-gold)} .home-sys h4{font-size:1rem;line-height:1.3} .home-sys:hover{transform:translateY(-4px);border-color:var(--border-strong)} .home-sys:hover .ic-box{background:var(--grad-gold);color:#1a1330} /* remedy chips */ .home-chips{display:flex;flex-wrap:wrap;gap:10px} .chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;font-size:.88rem;font-weight:500; background:var(--input-bg);border:1px solid var(--border);color:var(--text);transition:var(--tr)} .chip:hover{transform:translateY(-3px);border-color:var(--border-strong);color:var(--gold-1)} :root[data-theme="light"] .chip:hover{color:var(--ink-gold)} /* contact CTA band */ .home-contact{margin-top:50px;border-radius:var(--radius-lg);padding:2px;background:var(--grad-cosmic)} .home-contact-in{border-radius:calc(var(--radius-lg) - 2px);padding:38px 32px;text-align:center;background:var(--panel-solid)} .home-contact h3{font-size:1.75rem;margin-bottom:8px} .home-contact p{color:var(--text-2);max-width:560px;margin:0 auto 22px} .home-contact .home-cta{justify-content:center;margin-top:0} /* responsive */ @media (max-width:900px){ .home-mini-grid,.home-sys-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:768px){ /* mobile top-header: sizes + swap the emblem for the wordmark logo */ .rail-nav button{width:44px;height:44px;border-radius:12px;flex:none} .rail-theme{width:42px;height:42px} .rail-brand .rb-mark{display:none} .rail-brand .rb-word{display:block;height:30px;width:auto} /* mobile only: show the profile/details card on Home, hide it on other sections */ body:not([data-section="home"]) .sidebar{display:none} } @media (max-width:600px){ .home-mini-grid,.home-sys-grid{grid-template-columns:1fr} .home-hero h2{font-size:1.9rem} .home-cta .btn{flex:1 1 auto;justify-content:center} .home-head{flex-direction:column;align-items:flex-start;gap:12px} .home-contact-in{padding:30px 20px} /* tighter vertical rhythm on small phones */ .home-block{margin-top:34px} .home-counters{margin:26px 0 4px} .home-contact{margin-top:36px} .block-title{margin-top:32px!important} } /* ========================================================================== v8 — animated astrology background + cosmic preloader ========================================================================== */ /* breathing cosmos glow */ .bg-cosmos{animation:cosmosBreathe 16s ease-in-out infinite alternate} @keyframes cosmosBreathe{from{opacity:.9;transform:scale(1)}to{opacity:1;transform:scale(1.04)}} /* cosmic preloader */ .loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px; background:var(--bg-0);transition:opacity .55s ease,visibility .55s} .loader.done{opacity:0;visibility:hidden} .loader-orb{position:relative;width:92px;height:92px;display:grid;place-items:center} .lo-ring{position:absolute;border-radius:50%;border:2px solid transparent} .loader-orb .lo-ring:first-child{inset:0;border-top-color:var(--gold-2);border-right-color:var(--gold-2);animation:spin 1.1s linear infinite} .lo-ring2{inset:15px;border-top-color:var(--violet);border-left-color:var(--violet);animation:spin 1.7s linear infinite reverse} .lo-ring3{inset:30px;border-top-color:var(--gold-1);animation:spin .85s linear infinite} .lo-core{font-size:1.9rem;line-height:1;color:var(--gold-2);animation:lopulse 1.8s ease-in-out infinite} :root[data-theme="light"] .lo-core{color:var(--ink-gold)} .loader-brand{font-family:var(--font-head);font-size:1rem;letter-spacing:5px;text-transform:uppercase;color:var(--text-2)} @keyframes lopulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}} @media (prefers-reduced-motion:reduce){ .bg-cosmos{animation:none!important} .lo-ring{animation-duration:2.4s!important} } /* ========================================================================== v9 — visible galaxy: dense scrolling star-field + glowing band + shooting stars ========================================================================== */ /* brighter nebula */ .bg-cosmos{background: radial-gradient(1200px 820px at 78% -8%, rgba(123,92,255,.42), transparent 60%), radial-gradient(1000px 720px at -8% 108%, rgba(245,166,35,.22), transparent 58%), radial-gradient(760px 560px at 60% 42%, rgba(179,136,255,.13), transparent 66%), linear-gradient(160deg,var(--bg-1),var(--bg-0) 72%)} /* slowly-turning galaxy band */ .bg-galaxy{position:fixed;inset:-25%;z-index:-1;pointer-events:none;opacity:.6; background:radial-gradient(58% 20% at 50% 50%, rgba(179,136,255,.24), rgba(123,92,255,.10) 42%, transparent 72%); animation:galaxySpin 220s linear infinite} :root[data-theme="light"] .bg-galaxy{opacity:.22} @keyframes galaxySpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} /* dense multi-layer star-field (radial-gradients = GPU-friendly) NOTE: these selectors MUST stay scoped to .stars-layer — ".stars" is also the testimonial rating row, and an unscoped "position:absolute" here rips those star ratings out of their cards. */ .stars-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .stars-layer .stars{position:absolute;inset:-6%;background-repeat:no-repeat;will-change:transform} .stars-layer .s-1{background-image:var(--star-s1);animation:stardrift 70s ease-in-out infinite alternate} .stars-layer .s-2{background-image:var(--star-s2);animation:stardrift 46s ease-in-out infinite alternate, twinkle 5s ease-in-out infinite alternate} .stars-layer .s-3{background-image:var(--star-s3);animation:stardrift 95s ease-in-out infinite alternate} @keyframes stardrift{from{transform:translate(0,0)}to{transform:translate(-28px,-34px)}} /* shooting stars — streaking in all directions */ .bg-meteors{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .meteor{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0; box-shadow:0 0 9px 2px rgba(255,255,255,.65); animation:meteor var(--dur) linear var(--delay) infinite} .meteor::after{content:"";position:absolute;top:50%;right:2px;transform:translateY(-50%); width:var(--tw);height:2px;border-radius:2px;background:linear-gradient(to left,rgba(255,255,255,.9),transparent)} :root[data-theme="light"] .meteor{background:var(--ink-gold);box-shadow:0 0 9px 2px rgba(154,82,0,.35)} :root[data-theme="light"] .meteor::after{background:linear-gradient(to left,var(--ink-gold),transparent)} @keyframes meteor{ 0%{opacity:0;transform:rotate(var(--ang)) translateX(0)} 6%{opacity:1} 55%{opacity:1} 100%{opacity:0;transform:rotate(var(--ang)) translateX(var(--dist))} } @media (prefers-reduced-motion:reduce){ .stars-layer .stars,.bg-galaxy,.meteor{animation:none!important} .meteor{opacity:0} } /* ========================================================================== v10 — asarastro rebrand: red wordmark, sun mark, new service/course blocks ========================================================================== */ /* brand headline under the sidebar wordmark (text, so it follows the theme) */ .side-brand{width:190px} .brand-tagline{margin:-6px 0 16px;text-align:center;font-size:.66rem;letter-spacing:1.6px; text-transform:uppercase;color:var(--muted);line-height:1.5} /* the wordmark is one flat red PNG; give it a touch of lift on the dark theme */ .side-brand img,.rail-brand .rb-word{filter:drop-shadow(0 1px 0 rgba(255,255,255,.06))} :root[data-theme="light"] .side-brand img, :root[data-theme="light"] .rail-brand .rb-word{filter:none} /* Astrology Services — plain two-column list, no invented ranking */ .svc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px;margin-top:4px} .svc-list li{display:flex;align-items:flex-start;gap:11px;font-size:.9rem;color:var(--text-2); padding:11px 15px;background:var(--input-bg);border:1px solid var(--border);border-radius:12px} .sv-dot{flex:none;width:8px;height:8px;margin-top:.45em;border-radius:50%;background:var(--grad-gold)} :root[data-theme="light"] .sv-dot{background:var(--ink-gold)} @media (max-width:700px){ .svc-list{grid-template-columns:1fr} } /* ========================================================================== v11 — Om mark drawn as inline SVG (was a text glyph, which rendered differently on every device depending on the available Devanagari font) ========================================================================== */ .om{width:100%;height:auto;display:block;color:inherit;overflow:visible} .hv-core .om{width:58%} .lo-core{display:grid;place-items:center;width:38px;height:38px} .lo-core .om{width:100%}