/* =============================== VAANYA CLINIC — RESULTS STYLES File: /css/results.css =============================== */ /* Use your existing font from */ :root{ /* Inherit or fall back to neutrals if not defined in global CSS */ --bg: var(--vc-bg, #ffffff); --card: var(--vc-card, #292525); --text: var(--vc-text, #101828); --muted: var(--vc-muted, #667085); --brand: var(--vc-brand, #0ea5e9); --brand-dark: var(--vc-brand-dark, #075985); --ring: var(--vc-ring, rgba(14, 165, 233, 0.25)); --shadow: 0 10px 25px rgba(16, 24, 40, 0.08), 0 2px 8px rgba(16, 24, 40, 0.06); --radius-lg: 18px; --radius-sm: 12px; } /* Reset default browser spacing */ body { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #483e3e; color: #101828; } /* Section wrapper */ .htp-results{ background: var(--bg); padding: clamp(32px, 3vw, 56px) 16px; color: var(--text); } /* Centered container with max width */ .htp-results-container{ max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.8vw, 28px); } /* Card */ .result-card{ background: var(--card); border: 1px solid rgba(16, 24, 40, 0.06); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(16px, 2vw, 22px); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform; } .result-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12), 0 3px 10px rgba(16, 24, 40, 0.08); border-color: rgba(14, 165, 233, 0.25); } /* Title */ .result-card h3{ font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 600; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.2; margin: 0 0 14px; letter-spacing: 0.2px; color: var(--text); } /* Images row */ .result-images{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 2vw, 18px); } /* Each before/after block */ .result-img{ position: relative; background: #f7f9fb; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(16, 24, 40, 0.06); } /* Fix image sizing reliably */ .result-img img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; /* consistent portrait shape */ object-fit: cover; background: #e9eef3; } /* Label chip inside image */ .result-img p{ position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 6px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); border-radius: 999px; box-shadow: 0 4px 10px rgba(14, 165, 233, 0.35); user-select: none; } /* Arrow between images */ .result-arrow{ width: clamp(36px, 4.2vw, 52px); height: clamp(36px, 4.2vw, 52px); border-radius: 50%; background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(7,89,133,.20)); border: 1px solid rgba(14,165,233,.35); box-shadow: inset 0 0 0 6px rgba(14,165,233,.08), 0 6px 14px rgba(7,89,133,.15); position: relative; flex: 0 0 auto; } .result-arrow::before{ content: ""; position: absolute; inset: 0; margin: auto; width: 42%; height: 42%; /* Draw a chevron using borders */ border-right: 3px solid var(--brand-dark); border-bottom: 3px solid var(--brand-dark); transform: rotate(-45deg); } /* Duration + site line */ .result-duration{ margin: 12px 2px 0; text-align: center; font-size: 14px; color: var(--muted); line-height: 1.35; } .result-duration span{ display: inline-block; margin-top: 2px; font-size: 12px; color: #98a2b3; letter-spacing: .2px; } /* Responsive grid: 2 columns on tablets, 3 on desktops */ @media (min-width: 640px){ .htp-results-container{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px){ .htp-results-container{ grid-template-columns: repeat(3, 1fr); } } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce){ .result-card{ transition: none; } } /* Optional: subtle focus rings for accessibility if cards become links later */ .result-card:focus-within{ outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--ring), var(--shadow); } /* Optional dark theme (if you toggle a .dark class on or ) */ .dark .result-card{ background: #0b1220; border-color: rgba(255,255,255,0.06); } .dark .result-card h3{ color: #f2f4f7; } .dark .result-img{ border-color: rgba(255,255,255,0.06); background: #121a2a; } .dark .result-duration{ color: #cbd5e1; } .dark .result-duration span{ color: #94a3b8; }