/* Theme Name: Jaya Sinha — Astra Child Theme URI: https://www.jayasinha.in Description: Child theme for Astra. Centralizes Jaya Sinha's brand design tokens (colors, typography, spacing, shared component styles) in one place, so the main site, the JSC Coach plugin, and any future plugins (e.g. an SEO manager) can all reference the same source of truth instead of hardcoding brand colors independently. Author: Jaya Sinha Coaching Template: astra Version: 1.0.0 Text Domain: jaya-child */ /* ═══════════════════════════════════════════════════════════════════ * JAYA SINHA — BRAND STYLESHEET FOR ASTRA CHILD THEME * * This file: * 1. Declares all CSS custom properties (design tokens) — THE single * source of truth for brand colors/fonts on this site. * 2. Overrides Astra's typography, colours, spacing, and layout so * standard Astra-rendered pages (posts, pages, forms, buttons) * automatically pick up the brand without per-page work. * 3. Styles an optional custom branded header & footer, activated by * adding `jaya-custom-header` / `jaya-custom-footer` to — * see functions.php. Leave those classes off if you don't have a * custom header/footer template built to match; Astra's default * header/footer already inherit the color/type tokens below via * the Astra overrides in section 2. * 5. Provides all shared utility classes used across page templates. * ═══════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────── 0. GOOGLE FONTS — enqueued via functions.php, not here (avoids a render-blocking @import). See jaya_child_enqueue_styles(). ────────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────────── 1. DESIGN TOKENS — CSS Custom Properties ────────────────────────────────────────────────────────────────── */ :root { /* Palette */ --jaya-emerald: #0F4C3A; --jaya-emerald-dark: #0A3528; --jaya-emerald-deep: #06281E; --jaya-rose-gold: #B76E79; --jaya-rose-light: #D4A5A5; --jaya-rose-soft: #EBD4D4; --jaya-ivory: #FAF7F2; --jaya-ivory-fill: #F5F0E8; --jaya-ivory-warm: #F0E9DB; --jaya-charcoal: #1C1C1E; --jaya-muted: #6B6B6B; --jaya-muted-light: #9A9A9A; --jaya-border-soft: #E8E0D4; --jaya-border-em: rgba(15,76,58,0.15); /* Typography */ --jaya-font-display: 'Cormorant Garamond', Georgia, serif; --jaya-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Layout */ --jaya-nav-height: 84px; --jaya-max-width: 1280px; --jaya-section-pad-x: 72px; --jaya-section-pad-y: 100px; /* Shadows */ --jaya-shadow-soft: 0 4px 24px rgba(15,76,58,0.08); --jaya-shadow-med: 0 12px 40px rgba(15,76,58,0.12); --jaya-shadow-lift: 0 20px 60px rgba(15,76,58,0.16); /* Transitions */ --jaya-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ────────────────────────────────────────────────────────────────── 2. ASTRA GLOBAL OVERRIDES — typography, colour, base layout ────────────────────────────────────────────────────────────────── */ /* --- Base body --- */ body, body.ast-plain-container { font-family: var(--jaya-font-body) !important; font-weight: 300; font-size: 16px; line-height: 1.65; color: var(--jaya-charcoal); background-color: var(--jaya-ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Remove Astra's default padding-top when using custom header */ body.jaya-custom-header { padding-top: var(--jaya-nav-height) !important; } /* --- Headings --- */ body h1, body h2, body h3, body h4, body h5, body h6, .ast-blog-single-element h1, .ast-blog-single-element h2, .entry-title, .ast-archive-title { font-family: var(--jaya-font-display) !important; font-weight: 300 !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; color: var(--jaya-emerald) !important; } body h1 { font-size: clamp(40px, 5.5vw, 72px); } body h2 { font-size: clamp(32px, 4vw, 56px); } body h3 { font-size: clamp(24px, 3vw, 40px); } body h4 { font-size: clamp(20px, 2.5vw, 30px); } body h5 { font-size: 20px; } body h6 { font-size: 16px; } /* --- Links --- */ body a, body a:link, body a:visited { color: var(--jaya-emerald); text-decoration: none; transition: color 0.2s ease; } body a:hover, body a:focus { color: var(--jaya-rose-gold); } /* --- Paragraphs & body copy --- */ body p, body .entry-content p { font-family: var(--jaya-font-body); font-weight: 300; line-height: 1.75; color: var(--jaya-muted); } /* --- Selection --- */ ::selection { background: var(--jaya-emerald); color: var(--jaya-ivory); } /* --- Astra container width override --- */ .ast-container, .ast-narrow-container, body .site-content .ast-container { max-width: var(--jaya-max-width) !important; } /* --- Astra page padding --- */ .ast-page-builder-template .site-content, .ast-no-sidebar #content { padding: 0 !important; } /* Kill Astra default header completely when using ours */ body.jaya-custom-header #masthead, body.jaya-custom-header .ast-masthead-custom-menu-items, body.jaya-custom-header header.site-header, body.jaya-custom-header .ast-sticky-header-wrap { display: none !important; } /* Kill Astra default footer completely when using ours */ body.jaya-custom-footer #colophon, body.jaya-custom-footer footer.site-footer, body.jaya-custom-footer .footer-widget-area { display: none !important; } /* --- Astra blog/archive overrides --- */ .ast-article-post, .ast-post-format-standard { background: var(--jaya-ivory) !important; border: 1px solid var(--jaya-border-soft) !important; box-shadow: none !important; } /* --- Astra button global override --- */ .ast-button, button, input[type="submit"], .wp-block-button__link { font-family: var(--jaya-font-body) !important; border-radius: 0 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 600 !important; font-size: 11px !important; background-color: var(--jaya-emerald) !important; color: var(--jaya-ivory) !important; border: none !important; padding: 15px 32px !important; transition: background 0.25s var(--jaya-ease), transform 0.25s var(--jaya-ease), box-shadow 0.25s var(--jaya-ease) !important; cursor: pointer !important; } .ast-button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background-color: var(--jaya-emerald-dark) !important; transform: translateY(-2px) !important; box-shadow: var(--jaya-shadow-med) !important; color: var(--jaya-ivory) !important; } /* --- Astra WooCommerce / forms base --- */ body input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), body textarea, body select { font-family: var(--jaya-font-body) !important; font-size: 14px !important; font-weight: 300 !important; border-radius: 0 !important; border: 1px solid var(--jaya-border-soft) !important; background: var(--jaya-ivory) !important; color: var(--jaya-charcoal) !important; padding: 12px 16px !important; outline: none !important; transition: border-color 0.25s ease !important; } body input:not([type="submit"]):focus, body textarea:focus, body select:focus { border-color: var(--jaya-rose-gold) !important; box-shadow: none !important; } /* --- Astra blockquote --- */ body blockquote, body .wp-block-quote { font-family: var(--jaya-font-display) !important; font-style: italic !important; font-size: clamp(18px, 2vw, 26px) !important; color: var(--jaya-emerald) !important; border-left: 2px solid var(--jaya-rose-gold) !important; padding: 24px 32px !important; margin: 40px 0 !important; background: transparent !important; font-weight: 300 !important; } /* --- Gutenberg full-width blocks --- */ .wp-block-group.alignfull, .wp-block-cover.alignfull { max-width: 100% !important; } /* --- HR / dividers --- */ hr, body .wp-block-separator { border: none !important; border-top: 1px solid var(--jaya-border-soft) !important; margin: 48px 0 !important; } /* --- Scroll top default --- */ html { scroll-behavior: smooth; } /* ────────────────────────────────────────────────────────────────── 3. BRANDED HEADER — #jaya-header Only takes effect once `jaya-custom-header` is on AND a matching header.php partial exists rendering this markup. See the note in functions.php before enabling. ────────────────────────────────────────────────────────────────── */ #jaya-header { position: fixed; top: 0; left: 0; right: 0; height: var(--jaya-nav-height); z-index: 9999; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--jaya-section-pad-x); background: rgba(250, 247, 242, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, box-shadow 0.3s ease; } #jaya-header.scrolled { border-bottom-color: var(--jaya-border-soft); box-shadow: 0 2px 30px rgba(15, 76, 58, 0.06); } .jaya-logo { font-family: var(--jaya-font-display); font-size: 26px; font-weight: 400; color: var(--jaya-emerald); letter-spacing: 0.05em; text-decoration: none; flex-shrink: 0; } .jaya-logo em { font-style: italic; color: var(--jaya-rose-gold); } .jaya-logo:hover { color: var(--jaya-emerald); } .jaya-nav-links { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; } .jaya-nav-links li { margin: 0; } .jaya-nav-links li a { font-family: var(--jaya-font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jaya-charcoal); padding: 4px 0; position: relative; text-decoration: none; transition: color 0.2s ease; } .jaya-nav-links li a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--jaya-rose-gold); transition: width 0.25s ease; } .jaya-nav-links li a:hover, .jaya-nav-links li a.current-menu-item, .jaya-nav-links li a.active { color: var(--jaya-emerald); } .jaya-nav-links li a:hover::after, .jaya-nav-links li a.current-menu-item::after, .jaya-nav-links li a.active::after { width: 100%; } .jaya-header-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; } .jaya-currency-toggle { display: flex; align-items: center; border: 1px solid var(--jaya-border-em); border-radius: 999px; padding: 3px; gap: 2px; } .jaya-currency-toggle button { background: transparent !important; border: none !important; padding: 6px 14px !important; font-family: var(--jaya-font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: var(--jaya-muted) !important; border-radius: 999px !important; transition: all 0.25s ease !important; cursor: pointer !important; transform: none !important; box-shadow: none !important; min-width: 52px; text-transform: uppercase !important; } .jaya-currency-toggle button.active { background: var(--jaya-emerald) !important; color: var(--jaya-ivory) !important; } .jaya-currency-toggle button:hover:not(.active) { color: var(--jaya-emerald) !important; transform: none !important; box-shadow: none !important; } .jaya-header-cta { font-family: var(--jaya-font-body) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; padding: 12px 24px !important; background: var(--jaya-emerald) !important; color: var(--jaya-ivory) !important; border: none !important; border-radius: 0 !important; text-decoration: none; display: inline-block; transition: background 0.25s ease, transform 0.25s ease !important; cursor: pointer; line-height: 1 !important; box-shadow: none !important; } .jaya-header-cta:hover { background: var(--jaya-emerald-dark) !important; transform: translateY(-1px) !important; color: var(--jaya-ivory) !important; box-shadow: none !important; } .jaya-mobile-toggle { display: none; background: none !important; border: none !important; width: 32px; height: 24px; flex-direction: column; justify-content: space-between; padding: 0 !important; cursor: pointer; transform: none !important; box-shadow: none !important; } .jaya-mobile-toggle span { display: block; width: 100%; height: 1.5px; background: var(--jaya-charcoal); transition: all 0.3s ease; } .jaya-mobile-toggle.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); } .jaya-mobile-toggle.open span:nth-child(2) { opacity: 0; } .jaya-mobile-toggle.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } .jaya-mobile-drawer { display: none; position: fixed; top: var(--jaya-nav-height); left: 0; right: 0; background: var(--jaya-ivory); z-index: 9998; padding: 32px 32px 48px; border-bottom: 1px solid var(--jaya-border-soft); box-shadow: var(--jaya-shadow-med); } .jaya-mobile-drawer.open { display: block; } .jaya-mobile-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .jaya-mobile-links li { border-bottom: 1px solid var(--jaya-border-soft); } .jaya-mobile-links li a { display: block; padding: 18px 0; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jaya-charcoal); text-decoration: none; transition: color 0.2s ease; } .jaya-mobile-links li a:hover, .jaya-mobile-links li a.current-menu-item { color: var(--jaya-emerald); } .jaya-mobile-currency { display: flex; gap: 12px; margin-top: 20px; } .jaya-mobile-currency button { flex: 1; padding: 12px !important; border: 1px solid var(--jaya-border-soft) !important; background: transparent !important; font-size: 12px !important; font-weight: 600 !important; color: var(--jaya-muted) !important; border-radius: 0 !important; transform: none !important; box-shadow: none !important; text-align: center; text-transform: uppercase !important; } .jaya-mobile-currency button.active { background: var(--jaya-emerald) !important; color: var(--jaya-ivory) !important; border-color: var(--jaya-emerald) !important; } .jaya-mobile-cta { display: block; margin-top: 28px; background: var(--jaya-emerald); color: var(--jaya-ivory) !important; padding: 16px !important; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background 0.25s ease; } .jaya-mobile-cta:hover { background: var(--jaya-emerald-dark) !important; color: var(--jaya-ivory) !important; } .jaya-skip-link { position: absolute; left: -9999px; top: 0; z-index: 99999; background: var(--jaya-emerald); color: var(--jaya-ivory) !important; padding: 8px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } .jaya-skip-link:focus { left: 0; } /* ────────────────────────────────────────────────────────────────── 4. BRANDED FOOTER — #jaya-footer ────────────────────────────────────────────────────────────────── */ #jaya-footer { background: var(--jaya-charcoal); color: var(--jaya-ivory); } .jaya-footer-main { padding: 80px var(--jaya-section-pad-x) 48px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; border-bottom: 1px solid rgba(250, 247, 242, 0.08); max-width: 100%; } .jaya-footer-brand-logo { font-family: var(--jaya-font-display); font-size: 32px; font-weight: 300; letter-spacing: 0.05em; color: var(--jaya-ivory); margin-bottom: 20px; text-decoration: none; display: block; } .jaya-footer-brand-logo em { font-style: italic; color: var(--jaya-rose-light); } .jaya-footer-tagline { font-size: 14px; color: rgba(250, 247, 242, 0.5); line-height: 1.85; max-width: 280px; font-family: var(--jaya-font-display); font-style: italic; margin: 0; } .jaya-footer-badges { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; list-style: none; padding: 0; } .jaya-footer-badge { padding: 6px 12px; border: 1px solid rgba(183, 110, 121, 0.3); font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jaya-rose-light); } .jaya-footer-social { display: flex; gap: 12px; margin-top: 28px; list-style: none; padding: 0; } .jaya-footer-social-link { width: 36px; height: 36px; border: 1px solid rgba(250, 247, 242, 0.15); display: flex; align-items: center; justify-content: center; color: rgba(250, 247, 242, 0.6); font-size: 12px; font-weight: 600; text-decoration: none; transition: all 0.25s ease; } .jaya-footer-social-link:hover { border-color: var(--jaya-rose-gold); color: var(--jaya-rose-light); background: rgba(183, 110, 121, 0.1); } .jaya-footer-col h4 { font-family: var(--jaya-font-body) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; color: var(--jaya-rose-light) !important; margin-bottom: 24px !important; line-height: 1 !important; } .jaya-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .jaya-footer-col ul li { margin: 0; } .jaya-footer-col ul a { font-size: 14px; color: rgba(250, 247, 242, 0.65); text-decoration: none; transition: color 0.2s ease; line-height: 1.4; } .jaya-footer-col ul a:hover { color: var(--jaya-rose-light); } .jaya-footer-price { display: block; font-family: var(--jaya-font-display); font-size: 12px; font-style: italic; color: rgba(183, 110, 121, 0.7); margin-top: 2px; } .jaya-footer-bottom { padding: 28px var(--jaya-section-pad-x); display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: rgba(250, 247, 242, 0.3); letter-spacing: 0.06em; flex-wrap: wrap; gap: 16px; } .jaya-footer-bottom a { color: rgba(250, 247, 242, 0.3); text-decoration: none; transition: color 0.2s ease; } .jaya-footer-bottom a:hover { color: var(--jaya-rose-light); } .jaya-footer-legal { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; } .jaya-footer-legal li { margin: 0; } .jaya-scroll-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; background: var(--jaya-emerald) !important; color: var(--jaya-ivory) !important; border: none !important; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 100; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease !important; transform: translateY(10px) !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; line-height: 1 !important; } .jaya-scroll-top.visible { opacity: 1; transform: translateY(0) !important; } .jaya-scroll-top:hover { background: var(--jaya-rose-gold) !important; transform: translateY(-2px) !important; } /* ────────────────────────────────────────────────────────────────── 5. SHARED UTILITY CLASSES ────────────────────────────────────────────────────────────────── */ .jaya-btn { display: inline-block; font-family: var(--jaya-font-body) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; padding: 16px 36px !important; border: none !important; border-radius: 0 !important; transition: all 0.25s var(--jaya-ease) !important; cursor: pointer !important; text-align: center; white-space: nowrap; text-decoration: none; line-height: 1 !important; } .jaya-btn-primary { background: var(--jaya-emerald) !important; color: var(--jaya-ivory) !important; } .jaya-btn-primary:hover { background: var(--jaya-emerald-dark) !important; transform: translateY(-2px) !important; box-shadow: var(--jaya-shadow-med) !important; color: var(--jaya-ivory) !important; } .jaya-btn-ghost { background: transparent !important; color: var(--jaya-emerald) !important; border: 1.5px solid var(--jaya-emerald) !important; } .jaya-btn-ghost:hover { background: var(--jaya-emerald) !important; color: var(--jaya-ivory) !important; transform: translateY(-2px) !important; } .jaya-btn-rose { background: var(--jaya-rose-gold) !important; color: var(--jaya-ivory) !important; } .jaya-btn-rose:hover { background: #9E5D68 !important; transform: translateY(-2px) !important; box-shadow: 0 12px 32px rgba(183,110,121,0.3) !important; color: var(--jaya-ivory) !important; } .jaya-btn-amazon { background: #FF9900 !important; color: #111 !important; } .jaya-btn-amazon:hover { background: #e68900 !important; transform: translateY(-2px) !important; color: #111 !important; } .jaya-btn-dark { background: var(--jaya-charcoal) !important; color: var(--jaya-ivory) !important; } .jaya-btn-dark:hover { background: #000 !important; transform: translateY(-2px) !important; color: var(--jaya-ivory) !important; } .jaya-btn-lg { padding: 20px 48px !important; font-size: 12px !important; } .jaya-btn-sm { padding: 12px 24px !important; font-size: 10px !important; } .jaya-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--jaya-font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--jaya-rose-gold); margin-bottom: 24px; } .jaya-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--jaya-rose-gold); flex-shrink: 0; } .jaya-eyebrow.center { justify-content: center; } .jaya-eyebrow.center::after { content: ''; width: 36px; height: 1px; background: var(--jaya-rose-gold); flex-shrink: 0; } .jaya-eyebrow.light { color: var(--jaya-rose-light); } .jaya-eyebrow.light::before, .jaya-eyebrow.light::after { background: var(--jaya-rose-light); } .jaya-tag { display: inline-block; font-family: var(--jaya-font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jaya-rose-gold); border: 1px solid var(--jaya-rose-gold); padding: 6px 14px; } .jaya-arrow-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--jaya-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jaya-emerald); text-decoration: none; transition: gap 0.25s ease, color 0.25s ease; } .jaya-arrow-link:hover { gap: 18px; color: var(--jaya-rose-gold); } .jaya-breadcrumb { padding: 14px var(--jaya-section-pad-x); background: var(--jaya-ivory-fill); border-bottom: 1px solid var(--jaya-border-soft); font-size: 11px; color: var(--jaya-muted); letter-spacing: 0.1em; text-transform: uppercase; } .jaya-breadcrumb a { color: var(--jaya-emerald); text-decoration: none; } .jaya-breadcrumb a:hover { color: var(--jaya-rose-gold); } .jaya-breadcrumb .sep { margin: 0 10px; color: var(--jaya-rose-gold); } .jaya-section { padding: var(--jaya-section-pad-y) var(--jaya-section-pad-x); } .jaya-section-ivory { background: var(--jaya-ivory); } .jaya-section-fill { background: var(--jaya-ivory-fill); } .jaya-section-warm { background: var(--jaya-ivory-warm); } .jaya-section-emerald { background: var(--jaya-emerald); color: var(--jaya-ivory); } .jaya-section-deep { background: var(--jaya-emerald-deep); color: var(--jaya-ivory); } .jaya-section-charcoal { background: var(--jaya-charcoal); color: var(--jaya-ivory); } .jaya-inner { max-width: var(--jaya-max-width); margin: 0 auto; } .jaya-text-emerald { color: var(--jaya-emerald) !important; } .jaya-text-rose { color: var(--jaya-rose-gold) !important; } .jaya-text-muted { color: var(--jaya-muted) !important; } .jaya-text-ivory { color: var(--jaya-ivory) !important; } .jaya-text-italic { font-style: italic; } .jaya-font-display { font-family: var(--jaya-font-display) !important; } .jaya-font-body { font-family: var(--jaya-font-body) !important; } .jaya-hs-form { display: flex; flex-direction: column; gap: 10px; } .jaya-hs-form input[type="email"], .jaya-hs-form input[type="text"], .jaya-hs-form input[type="tel"], .jaya-hs-form select, .jaya-hs-form textarea { width: 100% !important; padding: 13px 16px !important; border: 1px solid var(--jaya-border-soft) !important; background: var(--jaya-ivory) !important; font-family: var(--jaya-font-body) !important; font-size: 14px !important; font-weight: 300 !important; color: var(--jaya-charcoal) !important; outline: none !important; border-radius: 0 !important; transition: border-color 0.25s ease !important; box-shadow: none !important; } .jaya-hs-form input:focus, .jaya-hs-form select:focus, .jaya-hs-form textarea:focus { border-color: var(--jaya-rose-gold) !important; } .jaya-hs-form.dark input[type="email"], .jaya-hs-form.dark input[type="text"], .jaya-hs-form.dark input[type="tel"] { background: rgba(250,247,242,0.1) !important; border-color: rgba(212,165,165,0.3) !important; color: var(--jaya-ivory) !important; } .jaya-hs-form.dark input::placeholder { color: rgba(250,247,242,0.4) !important; } .jaya-hs-form.dark input:focus { border-color: var(--jaya-rose-light) !important; background: rgba(250,247,242,0.15) !important; } .jaya-hs-form.dark button[type="submit"] { background: var(--jaya-rose-gold) !important; color: var(--jaya-ivory) !important; } .jaya-hs-form.dark button[type="submit"]:hover { background: #9E5D68 !important; } .jaya-form-label { display: block; font-family: var(--jaya-font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jaya-emerald); margin-bottom: 8px; } .jaya-form-label.light { color: rgba(212,165,165,0.8); } .jaya-form-message { font-family: var(--jaya-font-display); font-size: 13px; font-style: italic; color: var(--jaya-rose-gold); margin-top: 8px; display: none; } .jaya-form-message.visible { display: block; } .jaya-form-message.success { color: var(--jaya-emerald); } @keyframes jaya-fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .jaya-animate-up { animation: jaya-fadeUp 0.7s ease forwards; opacity: 0; } .jaya-animate-up.d1 { animation-delay: 0.10s; } .jaya-animate-up.d2 { animation-delay: 0.22s; } .jaya-animate-up.d3 { animation-delay: 0.34s; } .jaya-animate-up.d4 { animation-delay: 0.48s; } .jaya-cta-banner { padding: var(--jaya-section-pad-y) var(--jaya-section-pad-x); background: var(--jaya-emerald-deep); color: var(--jaya-ivory); display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; position: relative; overflow: hidden; } .jaya-cta-banner::before { content: ''; position: absolute; top: -80px; right: 25%; width: 300px; height: 300px; border: 1px solid rgba(183,110,121,0.1); border-radius: 50%; pointer-events: none; } .jaya-cta-banner h2 { font-size: clamp(36px,4vw,52px); line-height: 1.15; color: var(--jaya-ivory) !important; } .jaya-cta-banner h2 em { color: var(--jaya-rose-light); font-style: italic; } .jaya-cta-banner p { font-size: 15px; color: rgba(250,247,242,0.72); line-height: 1.8; margin-top: 16px; } .jaya-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; } /* ────────────────────────────────────────────────────────────────── 6. ASTRA SPECIFIC COMPONENT OVERRIDES ────────────────────────────────────────────────────────────────── */ .ast-pagination .page-numbers, .page-links .page-number { font-family: var(--jaya-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--jaya-charcoal); border: 1px solid var(--jaya-border-soft); border-radius: 0 !important; padding: 10px 16px; text-decoration: none; transition: all 0.2s ease; } .ast-pagination .page-numbers:hover, .ast-pagination .page-numbers.current { background: var(--jaya-emerald); color: var(--jaya-ivory); border-color: var(--jaya-emerald); } .comment-form input, .comment-form textarea { border-radius: 0 !important; } .comment-form .submit { background: var(--jaya-emerald) !important; color: var(--jaya-ivory) !important; border-radius: 0 !important; } .ast-breadcrumbs-wrapper .trail-begin, .ast-breadcrumbs-wrapper .trail-items a { color: var(--jaya-emerald) !important; font-size: 11px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } .ast-search-input, .search-field { border-radius: 0 !important; border: 1px solid var(--jaya-border-soft) !important; font-family: var(--jaya-font-body) !important; } .widget-title, .widgettitle { font-family: var(--jaya-font-display) !important; font-size: 22px !important; font-weight: 300 !important; color: var(--jaya-emerald) !important; letter-spacing: -0.01em !important; margin-bottom: 20px !important; } body table { border-collapse: collapse; width: 100%; font-family: var(--jaya-font-body); font-size: 14px; } body table th { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jaya-emerald); border-bottom: 2px solid var(--jaya-rose-gold); padding: 12px 16px; text-align: left; } body table td { padding: 12px 16px; border-bottom: 1px solid var(--jaya-border-soft); color: var(--jaya-charcoal); } body table tr:last-child td { border-bottom: none; } /* ────────────────────────────────────────────────────────────────── 7. RESPONSIVE — matching Astra breakpoints ────────────────────────────────────────────────────────────────── */ @media (max-width: 1200px) { :root { --jaya-section-pad-x: 48px; } .jaya-footer-main { grid-template-columns: 1fr 1fr; padding-left: 48px; padding-right: 48px; } .jaya-footer-bottom { padding-left: 48px; padding-right: 48px; } .jaya-cta-banner { grid-template-columns: 1fr; } .jaya-cta-actions { align-items: flex-start; } } @media (max-width: 921px) { :root { --jaya-section-pad-x: 32px; --jaya-nav-height: 72px; } .jaya-nav-links { display: none !important; } .jaya-header-right .jaya-currency-toggle { display: none !important; } .jaya-header-right .jaya-header-cta { display: none !important; } .jaya-mobile-toggle { display: flex !important; } #jaya-header { padding: 0 32px; } .jaya-footer-main { grid-template-columns: 1fr 1fr; padding: 48px 32px; gap: 40px; } .jaya-footer-bottom { padding: 24px 32px; } .jaya-breadcrumb { padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { :root { --jaya-section-pad-x: 24px; --jaya-section-pad-y: 72px; } .jaya-footer-main { grid-template-columns: 1fr; padding: 48px 24px 32px; gap: 36px; } .jaya-footer-bottom { flex-direction: column; text-align: center; padding: 24px; gap: 12px; } .jaya-footer-legal { justify-content: center; } .jaya-footer-tagline { max-width: 100%; } .jaya-breadcrumb { padding-left: 24px; padding-right: 24px; } .jaya-cta-banner { padding-left: 24px; padding-right: 24px; } .jaya-section { padding-left: 24px; padding-right: 24px; } } @media (max-width: 544px) { :root { --jaya-nav-height: 64px; --jaya-section-pad-y: 56px; } .jaya-btn-lg { padding: 16px 28px !important; font-size: 11px !important; } .jaya-cta-actions { width: 100%; } .jaya-cta-actions .jaya-btn { width: 100%; justify-content: center; } }