/* ========================================================================= PERFECT MARRY v2.3 — Master Stylesheet (refined palette) Palette: Red #D61F26 · Gold #C68A3A · Navy #2F4A7D Fonts: Fraunces (display) · Poppins (body) · Kalam (script) Notes: Mobile-first. Light theme only. Sticky header on all breakpoints. Curved bottom-nav on mobile. Dashboard sidebar visible on desktop, overlay drawer on mobile. ------------------------------------------------------------------------- TABLE OF CONTENTS Part 1 · Foundation 1. Design tokens (CSS variables) 2. Reset & base 3. Utility classes 4. Buttons Part 2 · Global chrome 5. Top strip (dark bar above header) 6. Header (sticky on all breakpoints) 7. Side drawer (mobile menu) 8. Hero carousel (home banner) 9. News ticker Part 3 · Home page sections 10. Why choose us (image + icon rows) 11. Metrics 12. Mandala + toran dividers 13. Sections + category tabs / cards 14. Metrics section (gradient strip) Part 4 · Profile cards & lists 15. Profile card + compat score + premium ribbon 16. Profile swiper (horizontal scroll-snap) 17. Diet badges (veg / nonveg / vegan) 18. Mobile compact featured Part 5 · CMS content 19. Story cards 20. Blog cards 21. Events / pricing / FAQ / timeline 22. Forms · wizard · OTP 23. CTA banner 24. Get-the-app Part 6 · Footer & nav chrome 25. Site footer 26. Bottom nav (mobile only, curved) 27. Floating action button 28. Toast notifications Part 7 · App pages 29. Search results (filter sidebar + grid) 30. Profile page (detail view) 31. Dashboard (desktop sidebar + mobile drawer) 32. Chat / messages 33. Page hero (CMS pages) 34. Scroll-reveal animation 35. Responsive breakpoints 36. Scrollbar 37. Legacy compatibility (older class names) Part 8 · Page-specific (38.1 – 38.17) 38.1 Auth pages (login / register / forgot) 38.2 Register wizard 38.3 Dashboard (main page — old structure) 38.4 Profile page (profile.html) 38.5 Search results 38.6 Messages / chat (messages.html) 38.7 Diet labels (standalone .veg / .non-veg) 38.8 FAQ & blog categories 38.9 Events page 38.10 About page timeline 38.11 Pricing / feature lists 38.12 Coming soon (notify form) 38.13 Careers job list 38.14 Legal pages (privacy / terms / refund) 38.15 Hero variants (.hero / .has-hero) 38.16 Misc utility / fixes 38.17 Final coverage (remaining classes) Part 9 · Layout patches (39.x, 40.x, 41.x) 39.1 Register wizard step visibility 39.2 Login social buttons 39.3 Search-results row/col layout 39.4 Profile-hero card-styling removal 39.5 Hero section wrapper 39.7 Messages dash-main flex 39.8 Link underline cleanup 40.x Hero two-column · auth buttons · gallery · contact gate · lightbox · completion-ring · chat compose · sidebar auto-scroll · hero responsive 41.x Bottom-nav middle circle · hero mobile · metrics · scan-to-download · page-hero heading · interests/shortlist grids · safety-tips · dashboard · form-section headings · messages gap · NRI grid · payment coupon · search-results accordion · manage photos · video-profile · contact · report-misuse · cat-panel · legacy alias Part 10 · Brand mark & polish (42.x – 50.x) 42.x Image logo · hero carousel red backdrop · sticky mobile header · bottom-nav · page-hero contrast · footer profiles-by · view-all rows · directory pages · profile meta · blog-post banner · astrology · search-results grid · mobile filter modal · logout modal · payment · report-misuse · mobile hero gap · typography tweaks 43.x Grid-view mobile 2-per-row 44.x Mobile filter modal slide-in · desktop filter sidebar · desktop list-view innovative cards · body scroll-lock 45.x Filter modal drawer · sidebar buttons · view-toggle · 4-corner card badges · list-view overrides 46.x Mobile filter drawer · badge 4-corner layout · list-view overrides 47.x Premium ribbon clipping · filter sidebar scroll 48.x Stat tile grid · tile · icon · color rotation · label · value · tap feedback · neutralize old rules 49.x Mobile filter drawer · header gradient · body+foot layout · desktop sidebar buttons · grid/list pill toggle · mobile toolbar · 4-corner badge · reduced-motion · scroll-lock 50.x Sticky header · bottom nav curved notch · content padding · reduced-motion Part 11 · List-card system & profile variants (53.x – 57.x) 53.x List card container · header bar · body · photo · data grid · badges · action bar · responsive 54.x Tier ribbon · tier card · tier badge · field-label icons · header icons · grid-view ribbons 55.x Grid member-id · list header · chat-now blink · last-login · mobile list view 56.x Profile variants (shared, A Story, B Timeline, C Orbits, D Magazine, mobile, "My Profile" cards) 57.x Partner profile view (profile-view.html) — demo bar, hero, photo states, thumbs, match bar, name col, stat cards, details divider, section cards, horoscope yantra, similar profiles, lightbox, mobile Patches at file end (appended over time): · Press media tabs · advertise.html · upload-id.html · Login button styling · Desktop nav centering · Filter sidebar tinted sections · Toggle-hide rules ========================================================================= */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { /* ===== Brand colors (Perfect Marry refined palette) ===== */ /* Legacy variable names (kept for backwards compatibility — values match new brand) */ --green: #D61F26; /* maps to Royal Red */ --green-dark: #B71C22; --green-light: #fde9ea; --orange: #C68A3A; /* maps to Warm Gold */ --orange-dark: #A8742A; --orange-light: #f5e8d4; --gold: #C68A3A; --gold-dark: #A8742A; --gold-light: #f5e8d4; --rose: #D61F26; --navy: #2F4A7D; --navy-dark: #1f3257; /* ===== Brand-name aliases (prefer these going forward) ===== */ --brand-red: #D61F26; /* Royal Red — primary CTAs, logo */ --brand-red-hover: #B71C22; /* Darker Red — hover state */ --brand-gold: #C68A3A; /* Warm Gold — premium feel, icons */ --brand-gold-dark: #A8742A; /* Dark Gold Accent — dividers, hover */ --brand-blue: #2F4A7D; /* Deep Blue — taglines, links */ /* ===== Gradients (premium look — hero, buttons, app headers) ===== */ --grad-red: linear-gradient(135deg, #D61F26 0%, #F04A50 100%); --grad-gold: linear-gradient(135deg, #C68A3A 0%, #E5B76E 100%); --grad-luxury: linear-gradient(135deg, #D61F26 0%, #C68A3A 100%); /* ===== Neutrals (per UI spec) ===== */ --ink: #333333; /* Headings */ --slate: #666666; /* Subtext */ --muted: #8a94a6; --line: #DDDDDD; /* Light Grey borders */ --line-soft: #f0f1f4; /* ===== Surfaces ===== */ --bg-page: #FFFFFF; /* Pure White */ --bg-card: #FFFFFF; --bg-soft: #F2F2F2; /* Soft White (sections) */ /* ===== Semantic ===== */ --danger: #d32f2f; --warning: #f9a825; --info: #1976d2; --success: #2e7d32; /* ===== Typography ===== */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Poppins', system-ui, -apple-system, sans-serif; --font-script: 'Kalam', cursive; /* ===== Radius ===== */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; /* ===== Shadows ===== */ --sh-sm: 0 2px 6px rgba(0, 0, 0, 0.06); --sh-md: 0 6px 18px rgba(0, 0, 0, 0.08); --sh-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --sh-green: 0 6px 20px rgba(214, 31, 38, 0.28); /* red shadow */ --sh-orange: 0 6px 20px rgba(198, 138, 58, 0.28); /* gold shadow */ --sh-red: 0 6px 20px rgba(214, 31, 38, 0.28); --sh-gold: 0 6px 20px rgba(198, 138, 58, 0.28); --sh-blue: 0 6px 20px rgba(47, 74, 125, 0.28); /* ===== Motion ===== */ --t-fast: 0.2s ease; --t-med: 0.35s ease; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- 2. RESET & BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* `overflow-x: clip` prevents horizontal scroll WITHOUT killing position:sticky on descendants. Previous value `hidden` was silently downgrading .site-header from sticky to static. */ overflow-x: clip; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--bg-page); line-height: 1.6; /* Same as html — use clip, not hidden, so descendant sticky elements work */ overflow-x: clip; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.22; color: var(--ink); margin: 0 0 10px; } a { /* Per brand spec: links use Deep Blue for trust/balance */ color: var(--brand-blue); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--brand-red); } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } /* ---------- 3. UTILITY CLASSES ---------- */ .text-green { color: var(--green-dark) !important; } .text-orange { color: var(--orange-dark) !important; } .text-gold { color: var(--gold-dark) !important; } .bg-soft { background: var(--bg-soft) !important; } .script-text { font-family: var(--font-script); font-weight: 700; color: var(--orange); } .section-title { text-align: center; margin-bottom: 34px; position: relative; z-index: 2; padding: 0 16px; } .section-title .hl-green { color: var(--green-dark); font-style: italic; } .section-title .hl-orange { color: var(--orange); font-style: italic; } .section { padding: 56px 0; position: relative; } .mandala-bg { position: relative; overflow: hidden; } .mandala-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(198, 138, 58, 0.08) 0, transparent 35%), radial-gradient(circle at 90% 80%, rgba(214, 31, 38, 0.08) 0, transparent 40%); pointer-events: none; z-index: 0; } .mandala-bg > * { position: relative; z-index: 1; } .toran-divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 28px; color: var(--gold); } .toran-divider::before, .toran-divider::after { content: ''; flex: 0 0 50px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .toran-divider i { font-size: 18px; color: var(--orange); } /* ---------- 4. BUTTONS ---------- */ .btn { font-family: var(--font-body); font-weight: 500; font-size: 14px; border-radius: var(--r-sm); border: none; padding: 11px 22px; transition: all var(--t-fast); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } .btn-green { background: var(--green); color: #fff; box-shadow: var(--sh-green); } .btn-green:hover { background: var(--green-dark); color: #fff; transform: translateY(-2px); } .btn-orange { background: var(--orange); color: #fff; box-shadow: var(--sh-orange); } .btn-orange:hover { background: var(--orange-dark); color: #fff; transform: translateY(-2px); } .btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: #fff; box-shadow: 0 6px 16px rgba(198, 138, 58, 0.35); } .btn-gold:hover { color: #fff; filter: brightness(1.06); transform: translateY(-2px); } /* Perfect Marry brand-name aliases — prefer these in new markup. Old .btn-green / .btn-orange continue to work (they map to the same colors). */ .btn-red, .btn-primary-brand { background: var(--brand-red); color: #fff; box-shadow: var(--sh-red); } .btn-red:hover, .btn-primary-brand:hover { background: var(--brand-red-hover); color: #fff; transform: translateY(-2px); } .btn-navy, .btn-blue { background: var(--brand-blue); color: #fff; box-shadow: var(--sh-blue); } .btn-navy:hover, .btn-blue:hover { background: var(--navy-dark); color: #fff; transform: translateY(-2px); } /* ===== Gradient buttons (premium feel — hero, CTAs) ===== */ .btn-grad-red { background: var(--grad-red); color: #fff; box-shadow: var(--sh-red); border: none; } .btn-grad-red:hover { filter: brightness(1.06); color: #fff; transform: translateY(-2px); } .btn-grad-gold { background: var(--grad-gold); color: #fff; box-shadow: var(--sh-gold); border: none; } .btn-grad-gold:hover { filter: brightness(1.06); color: #fff; transform: translateY(-2px); } .btn-grad-luxury { background: var(--grad-luxury); color: #fff; box-shadow: 0 6px 20px rgba(214, 31, 38, 0.20); border: none; } .btn-grad-luxury:hover { filter: brightness(1.06); color: #fff; transform: translateY(-2px); } /* ===== Background utilities (per UI Usage Guide) ===== */ .bg-soft-white { background: var(--bg-soft) !important; } .bg-pure-white { background: #FFFFFF !important; } .bg-grad-red { background: var(--grad-red) !important; } .bg-grad-gold { background: var(--grad-gold) !important; } .bg-grad-luxury { background: var(--grad-luxury) !important; } /* ===== Text utilities ===== */ .text-brand-red { color: var(--brand-red) !important; } .text-brand-gold { color: var(--brand-gold) !important; } .text-brand-blue { color: var(--brand-blue) !important; } .text-heading { color: var(--ink) !important; } /* #333333 */ .text-subtext { color: var(--slate) !important; } /* #666666 */ .btn-outline-green { background: transparent; color: var(--green-dark); border: 1.5px solid var(--green); } .btn-outline-green:hover { background: var(--green); color: #fff; } .btn-outline-orange { background: transparent; color: var(--orange-dark); border: 1.5px solid var(--orange); } .btn-outline-orange:hover { background: var(--orange); color: #fff; } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--bg-soft); color: var(--green-dark); } /* ---------- 5. TOP STRIP (dark bar above header) ---------- */ .scroll-ticker{overflow:hidden;background:linear-gradient(90deg,#c79a3f,#e0c074,#c79a3f);border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(0,0,0,.06);position:relative} .scroll-ticker-track{display:flex;width:max-content;animation:pmTicker 32s linear infinite} .scroll-ticker:hover .scroll-ticker-track{animation-play-state:paused} .scroll-ticker-group{display:flex;flex-shrink:0} .scroll-ticker-item{display:inline-flex;align-items:center;gap:7px;padding:9px 26px;font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap;letter-spacing:.01em} .scroll-ticker-item::after{content:"";width:6px;height:6px;margin-left:26px;border-radius:2px;transform:rotate(45deg);background:rgba(255,255,255,.65)} .scroll-ticker-item i{font-size:14px} @keyframes pmTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.scroll-ticker-track{animation:none}.scroll-ticker{overflow-x:auto}} .top-strip { background: var(--ink); color: #dfe2e8; font-size: 12px; padding: 7px 0; letter-spacing: 0.03em; } /* Apply flex to the container-fluid the HTML actually uses */ .top-strip .container-fluid, .top-strip .strip-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .top-strip i { color: var(--gold); margin-right: 4px; } .top-strip a { color: #dfe2e8; margin-left: 14px; font-size: 12px; transition: color var(--t-fast); } .top-strip a:first-of-type { margin-left: 0; } .top-strip a:hover { color: var(--gold); } /* ---------- 6. HEADER (sticky on ALL breakpoints) ---------- */ .site-header { position: sticky; top: 0; z-index: 1000; background: #ffffff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: box-shadow var(--t-fast); } .site-header.scrolled { box-shadow: var(--sh-md); } .site-header .navbar { min-height: 70px; padding: 10px 0; } .brand-logo { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--green-dark) !important; display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand-logo .logo-mark { width: 40px; height: 40px; background: linear-gradient(135deg, var(--orange) 0%, var(--green) 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 22px; font-weight: 700; box-shadow: var(--sh-orange); flex-shrink: 0; } .brand-logo small { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; color: var(--gold-dark); display: block; line-height: 1; margin-top: 3px; font-weight: 500; text-transform: uppercase; } .navbar .nav-link { color: var(--ink) !important; font-weight: 500; font-size: 14px; padding: 8px 14px !important; position: relative; transition: color var(--t-fast); } .navbar .nav-link:hover { color: var(--green-dark) !important; } .navbar .nav-link.active::after { content: ''; position: absolute; bottom: 2px; left: 14px; right: 14px; height: 2px; background: var(--orange); border-radius: 2px; } .icon-btn { background: transparent; border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: all var(--t-fast); position: relative; flex-shrink: 0; } .icon-btn:hover { background: var(--green-light); border-color: var(--green); color: var(--green-dark); } .icon-btn .dot { position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; border: 2px solid #fff; } .hamburger-btn { background: transparent; border: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 24px; } /* ---------- 7. SIDE DRAWER (mobile menu) ---------- */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all var(--t-med); z-index: 1998; } .drawer-backdrop.open { opacity: 1; visibility: visible; } .side-drawer { position: fixed; top: 0; left: 0; height: 100vh; width: min(320px, 85vw); background: #fff; z-index: 1999; transform: translateX(-100%); transition: transform var(--t-med); display: flex; flex-direction: column; box-shadow: var(--sh-lg); } .side-drawer.open { transform: translateX(0); } .drawer-head { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; padding: 26px 22px; position: relative; } .drawer-head h5 { color: #fff; font-size: 17px; margin-bottom: 4px; } .drawer-head p { color: rgba(255, 255, 255, 0.85); font-size: 13px; margin: 0; } .drawer-close { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.2); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; } .drawer-body { flex: 1; overflow-y: auto; padding: 10px 0; } .drawer-section-label { padding: 14px 22px 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .drawer-item { display: flex; align-items: center; gap: 14px; padding: 12px 22px; color: var(--ink); font-size: 14px; font-weight: 500; transition: all var(--t-fast); border-left: 3px solid transparent; } .drawer-item:hover { background: var(--green-light); border-left-color: var(--green); color: var(--green-dark); padding-left: 26px; } .drawer-item i { width: 20px; color: var(--orange); font-size: 18px; } /* ---------- 8. HERO CAROUSEL (home banner) ---------- */ .hero-carousel { position: relative; overflow: hidden; /* Solid dark navy — matches the .hero-slide dark overlay so during slide transitions any momentarily-revealed area blends seamlessly with the slide images and overlay (no red flash, no white gap). */ background: #141826; } .hero-slide { position: relative; min-height: 520px; color: #fff; display: flex; align-items: center; padding: 40px 6%; background-size: cover; background-position: center; } .hero-slide::before { content: ''; position: absolute; inset: 0; /* Dark overlay (left dark for text readability → right transparent for image visibility). Neutral dark works with any photo — no color tint conflict with slide images. */ background: linear-gradient(100deg, rgba(20, 24, 38, 0.78) 0%, rgba(20, 24, 38, 0.55) 45%, rgba(20, 24, 38, 0.15) 100%); } .hero-slide .container, .hero-slide .hero-content { position: relative; z-index: 2; max-width: 1100px; width: 100%; margin: 0 auto; } /* Hero search form inside the hero — wrap gracefully on smaller viewports */ .hero-slide .hero-form { margin-top: 18px; max-width: 900px; } @media (max-width: 991px) { .hero-slide { padding: 36px 24px; } .hero-slide .hero-form { grid-template-columns: 1fr 1fr; } .hero-slide .hero-form > button { grid-column: span 2; } } @media (max-width: 575px) { .hero-slide { padding: 28px 18px; } .hero-slide .hero-form { grid-template-columns: 1fr; } .hero-slide .hero-form > button { grid-column: 1; } } .hero-tagline { font-family: var(--font-script); color: var(--gold); font-size: 26px; margin-bottom: 4px; } .hero-title { font-size: clamp(32px, 5.5vw, 54px); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 16px; max-width: 640px; } .hero-title em { font-style: italic; color: var(--gold); } .hero-sub { color: rgba(255, 255, 255, 0.92); font-size: 16px; max-width: 520px; margin-bottom: 22px; } .hero-stats { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; } .hero-stats .stat strong { display: block; font-family: var(--font-display); font-size: 26px; color: var(--gold); font-weight: 700; } .hero-stats .stat span { font-size: 11px; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.12em; text-transform: uppercase; } .hero-register-card { background: #fff; border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-lg); position: relative; overflow: hidden; color: var(--ink); } .hero-register-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--orange), var(--gold)); } .hero-register-card h3 { font-size: 19px; margin-bottom: 4px; color: var(--ink); } .hero-register-card .tag-line { color: var(--slate); font-size: 13px; margin-bottom: 16px; } .hero-register-card .form-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 5px; } .hero-register-card .form-select, .hero-register-card .form-control { background: var(--bg-soft); border: 1px solid var(--line); font-size: 14px; padding: 10px 14px; color: var(--ink); border-radius: var(--r-sm); } .hero-register-card .form-select:focus, .hero-register-card .form-control:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(214, 31, 38, 0.15); outline: none; } .hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next { width: 48px; height: 48px; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.95); border-radius: 50%; margin: 0 16px; opacity: 1; display: flex; align-items: center; justify-content: center; border: none; transition: all var(--t-fast); } .hero-carousel .carousel-control-prev:hover, .hero-carousel .carousel-control-next:hover { background: #fff; transform: translateY(-50%) scale(1.08); } .hero-carousel .carousel-control-prev { left: 0; } .hero-carousel .carousel-control-next { right: 0; } .hero-carousel .carousel-control-prev-icon, .hero-carousel .carousel-control-next-icon { width: 20px; height: 20px; background: none; position: relative; } .hero-carousel .carousel-control-prev-icon::before, .hero-carousel .carousel-control-next-icon::before { content: '\F284'; font-family: 'bootstrap-icons'; color: var(--green-dark); font-size: 22px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; } .hero-carousel .carousel-control-next-icon::before { content: '\F285'; } .hero-carousel .carousel-indicators { bottom: 16px; margin: 0 auto; } .hero-carousel .carousel-indicators button { width: 10px !important; height: 10px !important; border-radius: 50%; margin: 0 4px; border: 2px solid #fff; background: rgba(255, 255, 255, 0.4); opacity: 1; } .hero-carousel .carousel-indicators .active { background: #fff; width: 28px !important; border-radius: 5px; } /* ---------- 9. NEWS TICKER ---------- */ .news-ticker { background: var(--ink); color: #fff; padding: 10px 0; overflow: hidden; } .news-ticker .ticker-inner { display: flex; align-items: center; } .news-ticker .ticker-label { background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; padding: 5px 12px; border-radius: var(--r-sm); margin-right: 16px; text-transform: uppercase; flex-shrink: 0; } .ticker-wrap { flex: 1; overflow: hidden; } .ticker-track { display: flex; gap: 50px; white-space: nowrap; animation: ticker 40s linear infinite; font-size: 14px; } .ticker-track span::before { content: '◆'; color: var(--gold); margin-right: 10px; } .news-ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---------- 10. WHY CHOOSE US (image + icon rows) ---------- */ .why-img { position: relative; isolation: isolate; padding: 18px; } .why-img::before { content: ''; position: absolute; top: 0; left: 0; width: 90px; height: 90px; border: 2px solid var(--gold); border-radius: var(--r-md); z-index: 0; } .why-img::after { content: ''; position: absolute; bottom: 0; right: 0; width: 120px; height: 120px; border: 2px solid var(--orange); border-radius: var(--r-md); z-index: 0; } .why-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-lg); position: relative; z-index: 1; } .why-img .why-badge { position: absolute; bottom: 36px; left: 36px; background: #fff; padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--sh-md); display: flex; align-items: center; gap: 10px; z-index: 2; } .why-img .why-badge i { font-size: 22px; color: var(--green); } .why-img .why-badge strong { display: block; font-size: 14px; color: var(--ink); } .why-img .why-badge span { font-size: 12px; color: var(--slate); } .why-point { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; } .why-point .wp-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--green-light); color: var(--green-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; transition: all var(--t-fast); } .why-point:nth-child(even) .wp-icon { background: var(--orange-light); color: var(--orange-dark); } .why-point:hover .wp-icon { transform: rotate(-6deg) scale(1.06); } .why-point h5 { font-size: 17px; margin-bottom: 4px; color: var(--ink); } .why-point p { font-size: 14px; color: var(--slate); margin: 0; } .why-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 22px; text-align: center; height: 100%; transition: all var(--t-fast); } .why-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--green); } .why-card .why-icon { width: 62px; height: 62px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 14px; } .why-card h5 { font-size: 17px; margin-bottom: 8px; } /* ---------- 11. METRICS ---------- */ .metric-card { text-align: center; padding: 24px 12px; } .metric-card .metric-num { font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: var(--green-dark); line-height: 1; margin-bottom: 4px; } .metric-card .metric-label { font-size: 12px; color: var(--slate); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } /* ---------- 12. MANDALA + TORAN DIVIDERS ---------- */ .mandala-bg { position: relative; overflow: hidden; } .mandala-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(198, 138, 58, 0.08) 0, transparent 35%), radial-gradient(circle at 90% 80%, rgba(214, 31, 38, 0.08) 0, transparent 40%), url("data:image/svg+xml;utf8,"); background-size: auto, auto, 180px 180px; background-repeat: no-repeat, no-repeat, repeat; pointer-events: none; z-index: 0; } .mandala-bg > * { position: relative; z-index: 1; } .toran-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 26px; } .toran-divider::before, .toran-divider::after { content: ''; flex: 0 0 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .toran-divider i { font-size: 20px; color: var(--orange); } /* Decorative divider (gradient bar under section titles) */ .divider { display: block; width: 80px; height: 3px; margin: 10px auto 14px; background: linear-gradient(90deg, var(--green), var(--orange), var(--gold)); border-radius: 3px; } /* Section title highlight spans */ .hl-green { color: var(--green-dark); } .hl-orange { color: var(--orange); } .hl-gold { color: var(--gold-dark); } /* ---------- 13. SECTIONS + CATEGORY TABS/CARDS ---------- */ .cat-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; } .cat-tab { background: #fff; border: 1px solid var(--line); padding: 9px 18px; border-radius: 50px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; transition: all var(--t-fast); } .cat-tab:hover { border-color: var(--green); color: var(--green-dark); } .cat-tab.active { background: var(--green); color: #fff; border-color: var(--green); box-shadow: var(--sh-green); } .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 576px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 992px) { .cat-grid { grid-template-columns: repeat(8, 1fr); } } .cat-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 10px; text-align: center; text-decoration: none; color: var(--ink); transition: all var(--t-fast); position: relative; display: block; } .cat-item:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: var(--sh-md); color: var(--ink); } .cat-item i { font-size: 28px; color: var(--orange); display: block; margin-bottom: 8px; } .cat-item .cat-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; } .cat-item .cat-count { font-size: 12px; color: var(--muted); } /* ---------- 14. METRICS SECTION (gradient strip) ---------- */ /* ========================================================= METRICS SECTION — Variant A "Hero Numbers" Big serif numbers · floating glass icon orb above · uppercase tracked label · accent bar ========================================================= */ .metrics-section { background: radial-gradient(800px 400px at 80% 0%, rgba(255, 255, 255, 0.08), transparent 60%), radial-gradient(600px 300px at 10% 100%, rgba(255, 255, 255, 0.06), transparent 60%), linear-gradient(135deg, var(--brand-red) 0%, var(--brand-gold-dark) 60%, var(--brand-gold) 100%); color: #fff; padding: 80px 0 90px; position: relative; overflow: hidden; } .metrics-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%); border-radius: 50%; pointer-events: none; } .metrics-section::after { content: ''; position: absolute; bottom: -160px; left: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%); border-radius: 50%; pointer-events: none; } /* Card layout */ .metrics-section .metric-card { text-align: center; color: #fff; position: relative; padding: 14px 8px; } /* Floating glass-morphism icon orb */ .metrics-section .m-icon { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1.5px solid rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.4s var(--ease), background 0.4s ease; } .metrics-section .m-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .metrics-section .metric-card:hover .m-icon { transform: translateY(-4px) scale(1.05); background: rgba(255, 255, 255, 0.22); } /* Hero serif numbers */ .metrics-section .m-num { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); } /* Uppercase label */ .metrics-section .m-label { font-size: 14px; margin-top: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, 0.92); font-family: var(--font-body); } /* White accent bar below label */ .metrics-section .m-bar { width: 32px; height: 3px; background: rgba(255, 255, 255, 0.65); border-radius: 3px; margin: 14px auto 0; transition: width 0.4s var(--ease), background 0.4s ease; } .metrics-section .metric-card:hover .m-bar { width: 56px; background: #fff; } /* Heading block */ .metrics-section .metrics-heading { text-align: center; color: #fff; margin-bottom: 50px; } .metrics-section .metrics-heading .script-text { color: var(--gold-light); display: block; font-size: 18px; margin-bottom: 8px; font-style: italic; letter-spacing: 0.04em; } .metrics-section .metrics-heading h2 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 36px); margin-bottom: 8px; letter-spacing: -0.02em; } .metrics-section .metrics-heading p { color: rgba(255, 255, 255, 0.88); font-size: 15px; margin: 0; } /* Mobile tweaks */ @media (max-width: 767.98px) { .metrics-section { padding: 60px 0 70px; } .metrics-section .metrics-heading { margin-bottom: 36px; } .metrics-section .m-icon { width: 52px; height: 52px; margin-bottom: 12px; } .metrics-section .m-icon svg { width: 26px; height: 26px; } .metrics-section .m-num { font-size: 38px; } .metrics-section .m-label { font-size: 12px; letter-spacing: 0.1em; } .metrics-section .m-bar { width: 26px; margin-top: 10px; } } /* ---------- 15. PROFILE CARD + COMPAT SCORE + PREMIUM RIBBON ---------- */ .profile-card { background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); border: 1px solid var(--line); transition: all var(--t-med); height: 100%; display: flex; flex-direction: column; position: relative; text-decoration: none; color: inherit; } .profile-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); color: inherit; text-decoration: none; } .profile-card.premium { border: 1.5px solid var(--gold); box-shadow: 0 4px 16px rgba(198, 138, 58, 0.18); } .profile-card .pc-img { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; background: var(--bg-soft); } .profile-card .pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); } .profile-card:hover .pc-img img { transform: scale(1.06); } /* No-photo placeholder for profile cards (initials on a soft gradient) so a card never shows a stock face for a member who hasn't uploaded a photo. */ .profile-card .pc-img.no-photo { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--green-light, #eef8fb), var(--bg-soft, #fff7f0)); } .profile-card .pc-img.no-photo .pc-ph-avatar { font-family: var(--font-display, 'Fraunces', serif); font-size: 46px; font-weight: 700; color: var(--muted, #8a94a6); opacity: 0.55; } /* Plan profile-view quota note on the profile-view page. */ .pv-quota-note { margin: 14px 0 4px; padding: 8px 14px; background: var(--bg-soft, #fff7f0); border: 1px solid #e4d3b6; border-radius: 10px; font-size: 13px; color: #6b5b3e; display: inline-flex; align-items: center; gap: 7px; } .pv-quota-note a { color: var(--pm-red, #D61F26); font-weight: 600; text-decoration: none; } /* Empty state for the search results grid. */ .sr-empty { text-align: center; padding: 48px 20px; background: var(--bg-soft, #fff7f0); border: 1px dashed #e4d3b6; border-radius: 14px; } .sr-empty > i { font-size: 40px; color: var(--muted, #8a94a6); opacity: 0.6; } .sr-empty h5 { margin: 14px 0 6px; font-weight: 700; } .sr-empty p { color: var(--muted, #8a94a6); margin-bottom: 18px; } .verified-badge { position: absolute; top: 10px; right: 10px; background: var(--info); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; z-index: 2; } .online-dot { position: absolute; top: 12px; left: 12px; width: 10px; height: 10px; background: var(--green); border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(214, 31, 38, 0.25); z-index: 2; } .compat-score { position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(6px); color: var(--green-dark); font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; } .compat-score i { color: var(--orange); } .premium-ribbon { position: absolute; top: 12px; left: -30px; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; padding: 4px 32px; transform: rotate(-45deg); z-index: 3; box-shadow: var(--sh-sm); } .profile-card .pc-body { padding: 14px; flex: 1; display: flex; flex-direction: column; } .profile-card .pc-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 2px; } .profile-card .pc-meta { font-size: 12.5px; color: var(--slate); margin-bottom: 8px; } .profile-card .pc-detail { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .profile-card .pc-detail i { color: var(--orange); width: 12px; font-size: 11px; } .profile-card .pc-actions { display: flex; gap: 6px; padding: 0 14px 14px; margin-top: auto; } .pc-action { flex: 1; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 6px; color: var(--slate); transition: all var(--t-fast); font-size: 13px; font-weight: 500; cursor: pointer; } .pc-action:hover { background: var(--green); border-color: var(--green); color: #fff; } .pc-action.shortlist { color: var(--orange); border-color: var(--orange-light); } .pc-action.shortlist:hover, .pc-action.shortlist.active { background: var(--orange); border-color: var(--orange); color: #fff; } .pc-action.primary { background: var(--green); border-color: var(--green); color: #fff; } .pc-action.primary:hover { background: var(--green-dark); } a.profile-card, a.profile-card:hover { text-decoration: none; color: inherit; } /* .pc-action is normally a