/* ================================================================= ASTROLOGY ARTICLES HUB PAGE — page-specific styles (hub- prefix) File: css/astrology-articles-eng.css Used only on astrology-articles.html (new English Articles Hub). TEMPORARY FILE NAME — Arun's existing articles-hub.css uses the old ah- prefix design for the page this one replaces. Rename this file (and update the in astrology-articles.html) once the old ah- styles are retired / merged, per Arun's instruction to merge later rather than risk breaking the old page's display now. ================================================================= */ /* Fonts: Marcellus, PT Serif and Manrope are loaded via Google Fonts in the page — the same fonts already used on the homepage. No new font family, no self-hosted files, no new folder needed. */ :root{ --ink:#241a35; --ink-soft:#5b5470; --violet:#4d0079; --violet-light:#7c3aed; --violet-deep:#2e1065; --gold:#c8940c; --gold-light:#e6b93a; --line:#e7e1f2; --bg:#fdfcfb; --lavender:#f3edff; --font-display:'PT Serif', serif; --font-body:'Manrope', sans-serif; } *{box-sizing:border-box;} html, body{ margin:0; padding:0; width:100%; } body{ font-family:var(--font-body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; } a{ text-decoration:none; color:inherit; } .preview-note{ background:#241a35; color:#e6d9ff; text-align:center; font-size:0.8rem; padding:8px 14px; } .change-note{ background:#f8f6fc; border-bottom:1px solid var(--line); color:#5b5470; text-align:center; font-size:0.76rem; padding:7px 14px; line-height:1.5; } /* .wrap is now ONLY used to constrain inner content width — it is never the element that carries a section background. */ .wrap{ max-width:860px; margin:0 auto; padding:0 20px; } /* ============ 1. HERO — full-bleed background ============ */ .hub-hero-band{ width:100%; position:relative; overflow:hidden; text-align:center; padding:26px 0 40px; background:linear-gradient(180deg, var(--lavender) 0%, #f8f5ff 55%, var(--bg) 100%); } svg.constellation{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:300px; height:150px; pointer-events:none; opacity:0.65; } .hub-hero-inner{ position:relative; z-index:2; max-width:660px; margin:0 auto; } .hub-pill{ display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); background:#fff; border:1px solid #ecdcb0; padding:10px 22px; border-radius:30px; margin-bottom:26px; box-shadow:0 6px 18px rgba(200,148,12,0.16); } .hub-pill svg{ width:14px; height:14px; } .hub-h1{ font-family:var(--font-display); font-weight:700; font-size:2.1rem; line-height:1.28; color:var(--ink); margin:0 0 20px; } .hub-h1 em{ font-style:italic; font-weight:700; background:linear-gradient(100deg, var(--violet) 0%, var(--violet-light) 55%, var(--gold) 120%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hub-sub{ font-size:1.05rem; line-height:1.4; color:var(--ink-soft); margin:0 0 12px; max-width:600px; margin-left:auto; margin-right:auto; text-align:left; } .hub-sub:last-of-type{ margin-bottom:0; } .hub-sub a{ color:var(--violet); font-weight:700; text-decoration:underline; text-underline-offset:2px; } /* Inline body-text links (hero / section paras / CTA para) — stay as plain normal text, only turn blue on hover. Higher specificity than ".hub-sub a" above so it wins inside the hero paragraphs too. */ a.hub-inline-link, .hub-sub a.hub-inline-link{ color:inherit; font-weight:inherit; text-decoration:none; } a.hub-inline-link:hover{ color:#1a73e8; } /* ============ SECTION HEADERS — pill label + deep purple heading ============ */ .hub-section{ padding:30px 0; border-top:1px solid var(--line); } .hub-section-pill{ display:inline-flex; align-items:center; font-size:0.72rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold); background:#fff; border:1px solid #ecdcb0; padding:6px 16px; border-radius:20px; margin-bottom:12px; box-shadow:0 3px 10px rgba(200,148,12,0.12); } .hub-section-h2{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--violet-deep); margin:0 0 6px; } .hub-section-p{ font-size:1.05rem; color:var(--ink-soft); line-height:1.4; max-width:600px; margin:0 0 20px; } .hub-article-grid{ display:flex; flex-direction:column; gap:12px; } /* A1 */ .a-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; background:linear-gradient(135deg,#f5eeff,#faf7ff); border:1.5px solid #d9c4f7; border-radius:14px; padding:9px 20px; box-shadow:0 4px 14px rgba(91,33,182,0.08); transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .a-row:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(91,33,182,0.20); border-color:var(--violet-light); } .a-title{ font-weight:800; font-size:1rem; line-height:1.35; color:#2e1065; } .a1-arrow{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold-light),var(--gold)); display:flex; align-items:center; justify-content:center; color:#3a1200; font-size:1rem; box-shadow:0 4px 10px rgba(200,148,12,0.35); transition:transform 0.25s ease; } .a-row:hover .a1-arrow{ transform:translateX(4px) scale(1.08); } /* E1 */ .e-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; background:#fff; border:2px solid #d1c2ef; border-radius:14px; padding:9px 20px; box-shadow:3px 3px 0 #ece3fb, 0 4px 12px rgba(0,0,0,0.03); transition:transform 0.18s ease, box-shadow 0.18s ease; } .e-row:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 #ded1f5, 0 8px 18px rgba(91,33,182,0.10); } .e-title{ font-weight:800; font-size:0.98rem; line-height:1.35; color:var(--ink); } .e1-arrow{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold-light),var(--gold)); display:flex; align-items:center; justify-content:center; color:#3a1200; font-size:1rem; box-shadow:0 4px 10px rgba(200,148,12,0.35); } /* B1 */ .b-outer{ padding:2px; border-radius:16px; background:linear-gradient(135deg, var(--violet-light), var(--gold)); box-shadow:0 6px 20px rgba(0,0,0,0.08); transition:transform 0.25s ease, box-shadow 0.25s ease; } .b-outer:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(91,33,182,0.25); } .b-inner{ min-height:68px; background:#fff; border-radius:14px; padding:9px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .b-title{ font-weight:800; color:var(--ink); font-size:0.98rem; line-height:1.35; } .b1-arrow{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--violet-light), var(--violet)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:transform 0.25s ease; } .b-outer:hover .b1-arrow{ transform:translateX(3px); } /* ============ CLASSES CTA — full-bleed light lavender, distinct decoration ============ */ .hub-classes-band{ width:100%; position:relative; overflow:hidden; background:linear-gradient(180deg, var(--lavender) 0%, #f8f5ff 60%, var(--bg) 100%); padding:10px 0 44px; } .hub-classes-band::before{ content:""; position:absolute; top:-70px; left:-70px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(124,58,237,0.16), transparent 70%); } .hub-classes-band::after{ content:""; position:absolute; bottom:-80px; right:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(200,148,12,0.16), transparent 70%); } .hub-classes{ position:relative; z-index:2; text-align:center; } .hub-classes-eyebrow{ font-size:1.05rem; font-weight:700; color:var(--violet); margin:20px 0 8px; } .hub-classes-h3{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--ink); margin:0 0 14px; } .hub-classes-text{ font-size:1.02rem; color:var(--ink-soft); max-width:480px; margin:0 auto 26px; line-height:1.5; } /* Real sig-bar component (defined in ownstyle.css, LOCKED sitewide) — scoped overrides here only: wider pill + guaranteed single-line text + spacing between buttons, without touching the shared locked CSS or affecting the homepage's own sig-bar instance. */ .hub-classes-sigbar{ margin-top:8px !important; width:90% !important; } .hub-classes-sigbar ul.sig-menu li{ margin-bottom:16px !important; } .hub-classes-sigbar ul.sig-menu li:last-child{ margin-bottom:0 !important; } .hub-classes-sigbar ul.sig-menu a{ white-space:nowrap !important; overflow:hidden; font-size:clamp(0.78rem, 4.6vw, 1.125rem) !important; } /* ============ RECOMMENDATION CARDS — unchanged, approved ============ */ .hub-reco-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .hub-reco-card{ border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 12px 28px rgba(0,0,0,0.08); } .hub-reco-head{ padding:20px 22px; } .hub-reco-head h3{ margin:0; color:#fff; font-family:var(--font-body); font-weight:800; font-size:1.14rem; line-height:1.35; } .hub-reco-body{ padding:20px 22px 22px; } .hub-reco-text{ font-size:0.88rem; color:#55536e; line-height:1.55; margin:0 0 20px; } .hub-reco-btn-wrap{ text-align:right; } .hub-reco-btn{ display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:24px; font-weight:800; font-size:0.85rem; } .hub-reco-btn.is-disabled{ opacity:0.5; pointer-events:none; cursor:not-allowed; } .hub-reco-coming-soon{ font-size:0.72rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#9b93ad; margin-right:10px; vertical-align:middle; } .hub-basics-card .hub-reco-head{ background:linear-gradient(135deg, #22b586, #0b6e4f); } .hub-basics-card .hub-reco-btn{ background:#d9f7e6; color:#0b6e4f; } .hub-tamil-card .hub-reco-head{ background:linear-gradient(135deg, #7c3aed, #4d0079); } .hub-tamil-card .hub-reco-head h3{ font-size:clamp(0.7rem, 3.6vw, 0.92rem); white-space:nowrap; } .hub-tamil-card .hub-reco-btn{ background:#ece4ff; color:#4d0079; } div.hub-end-space{ height:36px; } @media (max-width:700px){ .hub-reco-grid{ grid-template-columns:1fr; gap:40px; } .hub-h1{ font-size:1.65rem; } }