/* ============================================================ 2 BE HAPPY — GLOBAL STYLESHEET v4.0 (Production) File: global.css Link on EVERY page inside , after the Google Fonts link. Mr & Mrs Happiness Initiatives · www.2behappy.org ============================================================ */ /* ══════════════════════════════════════════════ DESIGN TOKENS ══════════════════════════════════════════════ */ :root { --bg-main: #f2fbe8; --bg-card: #a1f76f; --text-main: #0a750c; --text-muted: #0c5f04; --gold: #E6A817; --gold-light: #FFE066; --gold-deep: #B8790A; --gold-glow: rgba(230,168,23,0.40); --vitality-green: #427204; --vitality-green-hover: #8dec10; --vitality-green-glow: rgba(141,236,16,0.35); --deep-ink: #0d1a0e; --font-headings: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; --spacing-section: 100px; --spacing-gap: 16px; } /* ══════════════════════════════════════════════ RESET ══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ══════════════════════════════════════════════ BASE ══════════════════════════════════════════════ */ body { background-color: var(--bg-main); color: var(--text-main); font-family: var(--font-body); font-size: 18px; line-height: 1.6; overflow-x: visible; } h1, h2, h3, h4 { font-family: var(--font-headings); line-height: 1.2; color: var(--text-main); } a { text-decoration: none; color: inherit; transition: color 0.3s ease; } p { text-align: inherit; } /* ══════════════════════════════════════════════ LAYOUT ══════════════════════════════════════════════ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } section { padding: var(--spacing-section) 0; position: relative; } /* ══════════════════════════════════════════════ UNIFORM SECTION TYPOGRAPHY Applies to all blocks except header and footer. Hero h1 is overridden per page in local CSS. ══════════════════════════════════════════════ */ section h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; } section h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; } section p.section-intro { font-size: 1.1rem; line-height: 1.85; } /* ══════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 36px; background-color: var(--vitality-green); color: #fff; font-family: var(--font-headings); font-weight: 700; font-size: 1rem; border: none; border-radius: 50px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 20px var(--vitality-green-glow); transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1); } .btn-primary:hover { background-color: var(--vitality-green-hover); color: var(--vitality-green); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 30px var(--vitality-green-glow); } .btn-secondary-white { display: inline-flex; align-items: center; gap: 8px; padding: 15px 32px; background: transparent; color: #fff; font-family: var(--font-headings); font-weight: 700; font-size: 1rem; border: 2px solid rgba(255,255,255,0.55); border-radius: 50px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } .btn-secondary-white:hover { background: rgba(255,255,255,0.15); border-color: #fff; transform: translateY(-2px); } /* ══════════════════════════════════════════════ ACTION ROWS — uniform gap on all screen sizes Applies to hero and CTA buttons everywhere. Header and footer are not affected. ══════════════════════════════════════════════ */ .hero-actions, .cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; } /* ══════════════════════════════════════════════ SCROLL ANIMATIONS ══════════════════════════════════════════════ */ .fade-in-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.25,0.8,0.25,1), transform 0.8s cubic-bezier(0.25,0.8,0.25,1); animation: fade-in-up-fallback 0s 1.5s forwards; } @keyframes fade-in-up-fallback { to { opacity: 1; transform: translateY(0); } } .fade-in-up.in-view { opacity: 1; transform: translateY(0); animation: none; } .delay-100 { transition-delay: 100ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; } .delay-400 { transition-delay: 400ms; } .delay-500 { transition-delay: 500ms; } /* ══════════════════════════════════════════════ LOGO ANIMATIONS ══════════════════════════════════════════════ */ @keyframes float-logo-main { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 2px #FFE066, 0 0 0 4px #FF9933, 0 0 0 6px #2d8a0e, 0 0 32px 14px rgba(30,120,10,0.95), 0 0 64px 24px rgba(30,120,10,0.70), 0 8px 28px rgba(255,153,51,0.50); } 50% { transform: translateY(-14px); box-shadow: 0 0 0 2px #FFE066, 0 0 0 4px #FF9933, 0 0 0 6px #2d8a0e, 0 0 55px 22px rgba(30,120,10,1.00), 0 0 100px 36px rgba(30,120,10,0.80), 0 18px 40px rgba(255,153,51,0.65); } } @keyframes float-logo-footer { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 2px #FFE066, 0 0 0 4px #FF9933, 0 0 0 6px #6abf3a, 0 0 22px 8px rgba(106,191,58,0.55), 0 0 40px 14px rgba(255,153,51,0.32), 0 8px 22px rgba(106,191,58,0.40); } 50% { transform: translateY(-12px); box-shadow: 0 0 0 2px #FFE066, 0 0 0 4px #FF9933, 0 0 0 6px #6abf3a, 0 0 36px 14px rgba(106,191,58,0.75), 0 0 60px 22px rgba(255,153,51,0.45), 0 18px 36px rgba(106,191,58,0.60); } } .brand-logo { width: 150px; height: 150px; display: block; margin: 0 auto 20px; object-fit: cover; border-radius: 50%; background-color: #fff; border: 4px solid #FF9933; image-rendering: -webkit-optimize-contrast; animation: float-logo-main 2.2s ease-in-out infinite; transition: transform 0.3s ease; box-shadow: 0 0 0 2px #FFE066, 0 0 0 4px #FF9933, 0 0 0 6px #2d8a0e, 0 0 32px 14px rgba(30,120,10,0.95), 0 0 64px 24px rgba(30,120,10,0.70), 0 8px 28px rgba(255,153,51,0.50); } .brand-logo:hover { transform: scale(1.07) translateY(-12px); animation-play-state: paused; } .footer-brand-logo { width: 110px; height: 110px; display: block; margin: 0 auto; object-fit: cover; border-radius: 50%; background-color: #fff; border: 4px solid #FF9933; vertical-align: top; image-rendering: -webkit-optimize-contrast; animation: float-logo-footer 2.2s ease-in-out infinite; transition: transform 0.3s ease; } .footer-brand-logo:hover { transform: scale(1.07) translateY(-8px); animation-play-state: paused; } .footer-brand-logo-link { display: block; line-height: 0; width: fit-content; margin: 0 auto; padding-top: 50px; } /* ══════════════════════════════════════════════ SHLOKA HEADER ══════════════════════════════════════════════ */ .spiritual-anchor { padding: 40px 24px; text-align: center; background: linear-gradient(135deg, #FF9933 0%, #138808 100%); box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .spiritual-sanskrit { font-size: 1.45rem; font-weight: 700; color: #fff; line-height: 1.55; margin-bottom: 18px; text-shadow: 1px 1px 4px rgba(0,0,0,0.2); } .spiritual-roman { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.88); line-height: 1.55; letter-spacing: 0.5px; margin-bottom: 18px; } .spiritual-english { font-style: italic; font-size: 1.08rem; color: #E8F5E9; line-height: 1.55; margin-bottom: 4px; } /* ══════════════════════════════════════════════ BRAND ANCHOR BLOCK ══════════════════════════════════════════════ */ .anchor-brand { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.25); } .anchor-unit { font-family: var(--font-headings); font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.75); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .anchor-brand-name { font-family: var(--font-headings); font-size: clamp(3rem,6.5vw,4.4rem); font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; background: linear-gradient(180deg, #FFE066 0%, #F0C040 40%, #D4A017 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: brand-glow-pulse 3.5s ease-in-out infinite; } @keyframes brand-glow-pulse { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255,215,50,0.50)) drop-shadow(0 0 24px rgba(230,168,23,0.25)) drop-shadow(0 3px 8px rgba(0,0,0,0.50)); } 50% { filter: drop-shadow(0 0 18px rgba(255,225,80,0.75)) drop-shadow(0 0 40px rgba(230,168,23,0.45)) drop-shadow(0 3px 8px rgba(0,0,0,0.50)); } } .anchor-motto { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-headings); font-weight: 800; font-size: clamp(0.95rem,2.2vw,1.3rem); letter-spacing: 2.5px; text-transform: uppercase; padding: 12px 32px; min-height: 48px; border-top: 1px solid rgba(230,168,23,0.55); border-bottom: 1px solid rgba(230,168,23,0.55); background: linear-gradient(90deg, #E6A817 0%, #FFE066 25%, #fff5c0 50%, #FFE066 75%, #E6A817 100%); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: motto-shimmer 4s ease-in-out infinite; } @keyframes motto-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .anchor-typewriter-cursor { display: inline-block; width: 2px; height: 1em; background: #E6A817; vertical-align: middle; margin-left: 4px; animation: blink-caret 0.75s step-end infinite; } @keyframes blink-caret { from, to { opacity: 1; } 50% { opacity: 0; } } /* ══════════════════════════════════════════════ STICKY NAV BAR ══════════════════════════════════════════════ */ .page-nav { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px; background: #fff; border-bottom: 2px solid var(--bg-card); box-shadow: 0 2px 12px rgba(66,114,4,0.08); } .page-nav .page-title { font-family: var(--font-headings); font-size: clamp(1rem,2.5vw,1.5rem); font-weight: 800; color: var(--vitality-green); } .back-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; font-family: var(--font-headings); font-size: 0.9rem; font-weight: 600; color: var(--vitality-green); background: var(--bg-card); border: 2px solid var(--bg-card); border-radius: 50px; white-space: nowrap; transition: all 0.3s ease; } .back-link:hover { background: var(--vitality-green); color: #fff; border-color: var(--vitality-green); } /* ══════════════════════════════════════════════ SECTION EYEBROW ══════════════════════════════════════════════ */ .section-eyebrow { display: inline-block; font-family: var(--font-headings); font-size: 0.82rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--vitality-green); background: var(--bg-card); padding: 6px 20px; border-radius: 50px; margin-bottom: 20px; } /* ══════════════════════════════════════════════ WHATSAPP FLOAT ══════════════════════════════════════════════ */ .whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 999; display: flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; background: #25D366; color: #fff; font-family: var(--font-headings); font-weight: 700; font-size: 0.88rem; border-radius: 50px; text-decoration: none; box-shadow: 0 6px 24px rgba(37,211,102,0.45); transition: all 0.3s ease; } .whatsapp-float:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 32px rgba(37,211,102,0.55); } .whatsapp-float svg { width: 22px; height: 22px; fill: #fff; flex-shrink: 0; } /* ══════════════════════════════════════════════ CONSENT LINE ══════════════════════════════════════════════ */ .c2h-consent { font-size: 0.75rem; color: rgba(255,255,255,0.45); text-align: center; line-height: 1.7; margin: 14px 0 4px; } .c2h-consent a { color: rgba(141,236,16,0.80); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; } .c2h-consent a:hover { color: var(--vitality-green-hover); } /* ══════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════ */ .footer { padding: 40px 24px; text-align: center; background: linear-gradient(160deg, #1a3a0d 0%, #122a09 100%); color: #fff; border-top: 3px solid var(--vitality-green); } .footer .container { background: var(--deep-ink); border: 1px solid rgba(141,236,16,0.22); border-radius: 32px; padding: 40px; position: relative; overflow: visible; min-height: 480px; box-shadow: 0 8px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(141,236,16,0.15); } .footer .container::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(141,236,16,0.55), transparent); border-radius: 0 0 4px 4px; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .footer-logo { font-family: var(--font-headings); font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; color: var(--vitality-green-hover); } .footer-unit { font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.40); } .footer-motto { font-family: var(--font-headings); font-size: 1rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vitality-green-hover); } .footer-tagline { font-style: italic; font-size: 0.97rem; color: rgba(255,255,255,0.55); } .footer-info { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 14px; font-size: 0.95rem; color: rgba(255,255,255,0.72); } .footer-info a { color: var(--vitality-green-hover); transition: color 0.3s; } .footer-info a:hover { color: #fff; } .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; } .footer-links a { font-size: 0.88rem; color: rgba(255,255,255,0.45); transition: color 0.3s; } .footer-links a:hover { color: var(--vitality-green-hover); } .footer-copy { font-size: 0.82rem; color: rgba(255,255,255,0.30); margin-top: 8px; } /* ══════════════════════════════════════════════ PHILOSOPHY SUBTITLE ══════════════════════════════════════════════ */ .philosophy-subtitle { text-align: center; } /* ══════════════════════════════════════════════ JOURNEY STEPS — connector line ══════════════════════════════════════════════ */ .journey-steps::before { top: 72px !important; height: 3px !important; background: linear-gradient(90deg, rgba(141,236,16,0.15) 0%, var(--vitality-green-hover) 12%, var(--vitality-green-hover) 88%, rgba(141,236,16,0.15) 100%) !important; } .journey-step .step-number { position: relative; z-index: 2; } .journey-step:nth-child(1)::after, .journey-step:nth-child(2)::after, .journey-step:nth-child(3)::after { top: 72px !important; } /* ══════════════════════════════════════════════ ADDA TAGS ══════════════════════════════════════════════ */ .adda-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; justify-content: center; align-items: center; } .adda-tag { flex: 0 1 auto; } /* ══════════════════════════════════════════════ HUB PAGES — Section Colour System ══════════════════════════════════════════════ */ .hero h1 { color: var(--vitality-green-hover) !important; text-shadow: 0 0 40px rgba(141,236,16,0.40), 0 0 80px rgba(141,236,16,0.15) !important; } .hero .btn-primary { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-deep) 100%) !important; color: #1a1200 !important; border: none !important; font-weight: 800 !important; box-shadow: 0 4px 24px var(--gold-glow) !important; } .hero .btn-primary:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 10px 36px var(--gold-glow) !important; filter: brightness(1.08) !important; } .hero .btn-secondary-white { color: var(--gold-light) !important; border-color: var(--gold-deep) !important; background: rgba(184,121,10,0.55) !important; } .hero .btn-secondary-white:hover { background: rgba(184,121,10,0.75) !important; border-color: var(--gold-light) !important; color: var(--gold-light) !important; transform: translateY(-2px) !important; } .story-section { background: linear-gradient(160deg, #8ecf72 0%, #a0dc80 50%, #8ecf72 100%) !important; } .story-section .section-eyebrow { background: rgba(66,114,4,0.18) !important; color: var(--vitality-green) !important; } .story-inner h2 { color: var(--vitality-green) !important; text-shadow: 0 2px 12px rgba(66,114,4,0.18) !important; } .story-body { background: rgba(255,255,255,0.60) !important; border: 1px solid rgba(66,114,4,0.20) !important; box-shadow: 0 8px 40px rgba(66,114,4,0.14), 0 2px 8px rgba(255,255,255,0.80), inset 0 1px 0 rgba(255,255,255,0.90) !important; position: relative; } .story-body::before { content: ''; position: absolute; top: 0; left: 48px; right: 48px; height: 3px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, transparent, rgba(66,114,4,0.50), transparent); } .story-body p { color: var(--text-main) !important; text-align: justify; } .story-body strong { color: var(--vitality-green) !important; font-weight: 700 !important; } .pillars-header h2, .skills-header h2, .experience-header h2 { color: var(--vitality-green-hover) !important; text-shadow: 0 0 28px rgba(141,236,16,0.30) !important; } .pillar-card { position: relative; overflow: hidden; } .pillar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 28px 28px 0 0; background: linear-gradient(90deg, transparent, rgba(141,236,16,0.60), transparent); } .adda-section { background: linear-gradient(160deg, #a1f76f 0%, #b8fc8e 40%, #a1f76f 100%) !important; } .adda-section .section-eyebrow { background: rgba(66,114,4,0.18) !important; color: var(--vitality-green) !important; } .adda-inner h2 { color: var(--vitality-green) !important; text-shadow: 0 2px 12px rgba(66,114,4,0.18) !important; } .adda-body { background: rgba(255,255,255,0.65) !important; border: 1px solid rgba(66,114,4,0.22) !important; box-shadow: 0 8px 40px rgba(66,114,4,0.12), inset 0 1px 0 rgba(255,255,255,0.95) !important; position: relative; } .adda-body::before { content: ''; position: absolute; top: 0; left: 48px; right: 48px; height: 3px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, transparent, rgba(66,114,4,0.50), transparent); } .adda-body p { color: var(--text-main) !important; text-align: justify; } .adda-body strong { color: var(--vitality-green) !important; font-weight: 700 !important; } .adda-tag { background: #a8e87e !important; color: #1a3a00 !important; border-color: var(--vitality-green) !important; border-radius: 50px !important; box-shadow: 0 2px 8px rgba(66,114,4,0.20) !important; } .outcomes-section { background: linear-gradient(160deg, #2d5206 0%, #3d6e0a 50%, #2d5206 100%) !important; padding: var(--spacing-section) 24px !important; max-width: 100% !important; margin: 0 !important; } .outcomes-section .section-eyebrow { background: rgba(141,236,16,0.18) !important; color: var(--vitality-green-hover) !important; } .outcomes-section h2 { color: var(--vitality-green-hover) !important; text-shadow: 0 0 28px rgba(141,236,16,0.30) !important; } .outcome-card { background: rgba(255,255,255,0.09) !important; border: 1px solid rgba(141,236,16,0.28) !important; box-shadow: 0 6px 32px rgba(0,0,0,0.15) !important; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } .outcome-card:hover { border-color: rgba(141,236,16,0.55) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.20), 0 0 20px rgba(141,236,16,0.15) !important; transform: translateY(-6px) !important; } .outcome-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, transparent, rgba(141,236,16,0.65), transparent); } .outcome-card h3 { color: var(--vitality-green-hover) !important; } .outcome-card p { color: rgba(255,255,255,0.82) !important; } /* ══════════════════════════════════════════════ CTA BLOCK ══════════════════════════════════════════════ */ section:has(.cta-section) { padding: 0; margin: 0; } .container:has(.cta-section) { text-align: center; display: block; width: 100%; max-width: 100%; margin: 0; padding: 80px 24px; background: linear-gradient(160deg, #8ecf72 0%, #a8e87e 40%, #9fd87a 100%); } .cta-section { padding: 72px 48px; text-align: center; background: linear-gradient(135deg, #1a3a0d 0%, #2d5a18 40%, #1a4510 100%) !important; border: 1px solid rgba(141,236,16,0.30) !important; box-shadow: 0 0 60px rgba(141,236,16,0.18), 0 0 120px rgba(141,236,16,0.08), 0 20px 60px rgba(0,0,0,0.25), inset 0 1px 0 rgba(141,236,16,0.20) !important; position: relative; overflow: hidden; } .cta-section > * { position: relative; z-index: 1; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(141,236,16,0.14) 0%, transparent 65%); pointer-events: none; } .cta-section::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(141,236,16,0.70), transparent); border-radius: 0 0 4px 4px; pointer-events: none; } .cta-section h2 { color: var(--vitality-green-hover) !important; text-shadow: 0 0 30px rgba(141,236,16,0.40), 0 0 60px rgba(141,236,16,0.15) !important; } .cta-section p { color: rgba(255,255,255,0.85) !important; } .cta-section .btn-primary { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-deep) 100%) !important; color: #1a1200 !important; font-weight: 800 !important; border: none !important; box-shadow: 0 4px 28px var(--gold-glow) !important; } .cta-section .btn-primary:hover { filter: brightness(1.10) !important; box-shadow: 0 10px 40px var(--gold-glow) !important; transform: translateY(-3px) scale(1.02) !important; } .cta-section .btn-secondary-white { color: var(--gold-light) !important; border-color: var(--gold-deep) !important; background: rgba(184,121,10,0.55) !important; } .cta-section .btn-secondary-white:hover { background: rgba(184,121,10,0.75) !important; border-color: var(--gold-light) !important; color: var(--gold-light) !important; transform: translateY(-2px) !important; } /* ══════════════════════════════════════════════ SCROLL HINT ══════════════════════════════════════════════ */ .scroll-hint { color: var(--vitality-green-hover) !important; font-size: 0.92rem !important; text-shadow: 0 0 14px rgba(141,236,16,0.70) !important; } .scroll-hint::after { color: var(--vitality-green-hover) !important; font-size: 1.5rem !important; text-shadow: 0 0 12px rgba(141,236,16,0.80) !important; } /* ══════════════════════════════════════════════ VOVA LOGO — unified ring system ══════════════════════════════════════════════ */ img[src="vova-logo.png"] { width: 110px !important; height: 110px !important; border: 4px solid #FF9933 !important; box-shadow: 0 0 0 2px #FFE066, 0 0 0 4px #FF9933, 0 0 0 6px #6abf3a, 0 0 20px 8px rgba(106,191,58,0.52), 0 0 38px 12px rgba(106,191,58,0.22), 0 8px 20px rgba(255,153,51,0.28) !important; } /* ══════════════════════════════════════════════ LOOKING FOR MORE BLOCK ══════════════════════════════════════════════ */ .hubs-explore-block { background: var(--deep-ink); padding: 48px 24px; text-align: center; } .hubs-explore-label { font-family: var(--font-headings); font-size: 0.82rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 18px; display: block; } .hubs-explore-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-bottom: 14px; } .btn-explore-hubs { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: linear-gradient(135deg, var(--vitality-green), var(--vitality-green-hover)); color: var(--deep-ink); font-family: var(--font-headings); font-weight: 800; font-size: 1rem; border-radius: 50px; text-decoration: none; box-shadow: 0 6px 24px var(--vitality-green-glow); text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } .btn-explore-hubs:hover { filter: brightness(1.08); transform: translateY(-2px); } .btn-explore-home { display: inline-flex; align-items: center; gap: 8px; padding: 16px 36px; background: transparent; color: rgba(141,236,16,0.85); font-family: var(--font-headings); font-weight: 700; font-size: 0.9rem; border-radius: 50px; border: 2px solid rgba(141,236,16,0.4); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } .btn-explore-home:hover { border-color: var(--vitality-green-hover); color: var(--vitality-green-hover); transform: translateY(-2px); } .hubs-explore-sub { font-size: 0.85rem; color: rgba(255,255,255,0.30); font-style: italic; } @media (max-width: 768px) { .hubs-explore-actions { flex-direction: column; align-items: center; } .btn-explore-hubs, .btn-explore-home { width: 100%; max-width: 300px; justify-content: center; } } /* ══════════════════════════════════════════════ RESPONSIVE — 768px Tablet ══════════════════════════════════════════════ */ @media (max-width: 768px) { :root { --spacing-section: 60px; } .container { padding: 0 16px; } section:has(.cta-section) { padding: 0; margin: 0; } .container:has(.cta-section) { text-align: center; width: 100%; max-width: 100%; margin: 0; padding: var(--spacing-section) 16px; } .cta-section { margin: 0 !important; border-radius: 24px !important; padding: 52px 24px !important; } .hero-content-glass { padding: 36px 20px; border-radius: 20px; } .footer { padding: 32px 16px; } .footer .container { padding: 32px 24px; min-height: auto; } .footer-info { flex-direction: column; gap: 10px; align-items: center; } .footer-links { gap: 16px; } .page-nav { padding: 10px 16px; } .back-link { font-size: 0.82rem; padding: 6px 14px; } .brand-logo { width: 110px !important; height: 110px !important; } .footer-brand-logo { width: 90px !important; height: 90px !important; } .spiritual-anchor { padding: 28px 16px; } .spiritual-sanskrit { font-size: 1.1rem; } .anchor-brand-name { font-size: clamp(2.2rem,8vw,3.2rem); } .anchor-motto { font-size: 0.78rem; padding: 10px 20px; } } /* ══════════════════════════════════════════════ RESPONSIVE — 480px Mobile ══════════════════════════════════════════════ */ @media (max-width: 480px) { body { font-size: 16px; } .container { padding: 0 14px; } section:has(.cta-section) { padding: 0; margin: 0; } .container:has(.cta-section) { text-align: center; width: 100%; max-width: 100%; margin: 0; padding: var(--spacing-section) 14px; } .hero-actions, .cta-actions { flex-direction: column; align-items: center; gap: var(--spacing-gap); } .cta-actions .btn-primary, .cta-actions .btn-secondary-white { width: 100%; max-width: 300px; justify-content: center; } .footer { padding: 28px 14px; } .footer .container { padding: 28px 20px; min-height: auto; } .footer-info { flex-direction: column; gap: 10px; align-items: center; } .footer-logo { font-size: 1.6rem; } .footer-links { gap: 12px; } .whatsapp-float { bottom: 16px; right: 16px; padding: 10px 14px; font-size: 0.8rem; } .whatsapp-float svg { width: 18px; height: 18px; } .section-eyebrow { font-size: 0.72rem; letter-spacing: 2px; padding: 5px 14px; } .brand-logo { width: 95px !important; height: 95px !important; } .footer-brand-logo { width: 80px !important; height: 80px !important; } .btn-primary { padding: 14px 24px; font-size: 0.92rem; } .btn-secondary-white { padding: 13px 22px; font-size: 0.92rem; } } /* ══════════════════════════════════════════════ RESPONSIVE — 360px Small Mobile ══════════════════════════════════════════════ */ @media (max-width: 360px) { body { font-size: 15px; } .anchor-brand-name { font-size: 1.8rem; } .anchor-motto { font-size: 0.72rem; padding: 8px 14px; letter-spacing: 1.5px; } .spiritual-sanskrit { font-size: 0.95rem; } .brand-logo { width: 80px !important; height: 80px !important; } .footer-brand-logo { width: 70px !important; height: 70px !important; } .footer-logo { font-size: 1.3rem; } .footer .container { padding: 24px 16px; min-height: auto; } .footer-links { gap: 10px; } .page-nav { flex-direction: column; align-items: flex-start; gap: 8px; } .btn-primary { padding: 12px 18px; font-size: 0.85rem; } }