/* ============================================================= cstm.css — Shared component CSS for Decipher Consultancy Load LAST in after theme.css, animations.css, pages.css ============================================================= */ /* --------------------------------------------------------------- PRODUCT PAGES — Shared components (driven by CSS variables) Each product page defines: --pa, --pa-light, --pa-dark, --pa-glow, --pa-gradient, --pa-gradient-soft --------------------------------------------------------------- */ /* Gradient text utility */ .text-pa { color: var(--pa) !important; } .gradient-pa { background: var(--pa-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Hero brand badge */ .product-brand-badge { display: inline-flex; align-items: center; gap: 12px; background: var(--pa-gradient-soft); border: 1px solid var(--pa-glow); padding: 8px 16px; border-radius: 100px; margin-bottom: 20px; } .product-brand-badge .pbb-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--pa-gradient); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.875rem; } .product-brand-badge .pbb-text { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--pa-dark); text-transform: uppercase; } .product-brand-badge .pbb-divider { width: 1px; height: 14px; background: var(--pa-glow); } .product-brand-badge .pbb-domain { font-size: 0.75rem; color: var(--dcs-text-muted); font-weight: 600; } /* Problem cards */ .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .pain-card { background: var(--dcs-bg-soft); border: 1px solid var(--dcs-border-light); border-radius: var(--dcs-radius-lg); padding: 28px; transition: all var(--dcs-transition); } .pain-card:hover { border-color: var(--pa-glow); box-shadow: 0 12px 30px rgba(0,0,0,0.08); transform: translateY(-4px); } .pain-num { font-size: 2.25rem; font-weight: 800; background: var(--pa-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 12px; opacity: 0.85; } .pain-card h5 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--dcs-dark); } .pain-card p { font-size: 0.875rem; color: var(--dcs-text-muted); margin-bottom: 0; line-height: 1.65; } /* Built For — audience cards */ .audience-card { background: #fff; border: 1px solid var(--dcs-border-light); border-radius: var(--dcs-radius-lg); padding: 28px; text-align: center; transition: all var(--dcs-transition); height: 100%; } .audience-card:hover { border-color: var(--pa); box-shadow: var(--dcs-shadow-lg); transform: translateY(-6px); } .audience-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; background: var(--pa-gradient-soft); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--pa-dark); } .audience-card h5 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 8px; } .audience-card p { font-size: 0.875rem; color: var(--dcs-text-muted); margin-bottom: 0; } /* Lead form section — structural only; background/glows are per-page */ .lead-section { position: relative; overflow: hidden; } .lead-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 30px 30px; } .lead-section .glow1, .lead-section .glow2 { position: absolute; width: 400px; height: 400px; border-radius: 50%; filter: blur(120px); opacity: 0.18; } .lead-pitch { color: rgba(255,255,255,0.85); } .lead-pitch h2 { color: #fff; margin-bottom: 20px; } .lead-pitch h2 .highlight { background: var(--pa-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lead-pitch ul { list-style: none; padding: 0; margin-top: 24px; } .lead-pitch ul li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; color: rgba(255,255,255,0.85); font-size: 0.95rem; } .lead-pitch ul li i { color: var(--pa-light); font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; } .lead-form-card { background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); border-radius: var(--dcs-radius-xl); padding: 36px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); } .lead-form-card h3 { margin-bottom: 0.5rem; font-size: 1.5rem; } .lead-form-card .form-label { font-size: 0.875rem; font-weight: 600; color: var(--dcs-dark); } /* Product CTA button */ .btn-pa { background: var(--pa-gradient); color: #fff; border: none; box-shadow: 0 8px 24px var(--pa-glow); } .btn-pa:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px var(--pa-glow); } /* Visit site link */ .visit-link { display: inline-flex; align-items: center; gap: 8px; color: var(--pa-dark); font-weight: 700; font-size: 0.9375rem; padding: 12px 0; transition: all var(--dcs-transition); } .visit-link:hover { color: var(--pa); gap: 12px; } .visit-link i { font-size: 1.1rem; transition: transform var(--dcs-transition); } .visit-link:hover i { transform: translateX(4px); } /* ============================================================= HOMEPAGE — Product Showcase (alternating rows, Option A) ============================================================= */ .hp-products-sec { background: #fff; } /* Per-product theme variables */ .hp-prod-dcomply { --hp-prod-color: #10b981; --hp-prod-bg: rgba(16,185,129,0.10); } .hp-prod-vakeelsaathi{ --hp-prod-color: #d4af37; --hp-prod-bg: rgba(212,175,55,0.10); } .hp-prod-realzent { --hp-prod-color: #f59e0b; --hp-prod-bg: rgba(245,158,11,0.10); } .hp-prod-fluxeta { --hp-prod-color: #ec4899; --hp-prod-bg: rgba(236,72,153,0.10); } .hp-prod-signupdesk { --hp-prod-color: #0f766e; --hp-prod-bg: rgba(20,184,166,0.10); } /* Row */ .hp-show-row { padding: 72px 0; border-bottom: 1px solid var(--dcs-border-light); } .hp-show-row:last-child { border-bottom: none; } /* Info column */ .hp-show-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--hp-prod-bg); color: var(--hp-prod-color); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 22px; } .hp-show-name { font-size: 2.75rem; font-weight: 800; color: var(--dcs-dark); line-height: 1.05; margin-bottom: 4px; letter-spacing: -0.025em; } .hp-show-domain { display: block; font-size: 0.8rem; font-weight: 700; color: var(--hp-prod-color); letter-spacing: 0.03em; margin-bottom: 18px; opacity: 0.9; } .hp-show-desc { font-size: 1rem; color: var(--dcs-text-muted); line-height: 1.7; margin-bottom: 28px; } .hp-show-feats { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; } .hp-show-feat { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9375rem; color: var(--dcs-text); line-height: 1.5; } .hp-show-feat i { color: var(--hp-prod-color); font-size: 1rem; flex-shrink: 0; margin-top: 3px; } .hp-show-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 700; color: var(--hp-prod-color); text-decoration: none; transition: gap 0.2s; } .hp-show-link:hover { gap: 14px; color: var(--hp-prod-color); } .hp-show-link i { transition: transform 0.2s; } .hp-show-link:hover i { transform: translateX(4px); } /* Visual panel */ .hp-show-visual { border-radius: 20px; overflow: hidden; height: 380px; box-shadow: 0 30px 80px rgba(0,0,0,0.18); } /* ── Shared top bar ── */ .hpv-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(0,0,0,0.25); border-bottom: 1px solid rgba(255,255,255,0.07); } .hpv-dots { display: flex; gap: 6px; } .hpv-dots span { width: 10px; height: 10px; border-radius: 50%; } .hpv-dots span:nth-child(1){ background:#ff5f57; } .hpv-dots span:nth-child(2){ background:#febc2e; } .hpv-dots span:nth-child(3){ background:#28c840; } .hpv-topbar > span { font-size: 0.7rem; color: rgba(255,255,255,0.3); font-family: monospace; margin-left: 4px; } @keyframes hpvFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } /* ── DCOMPLY — Compliance Dashboard ── */ .hpv-comply { height: 100%; display: flex; flex-direction: column; background: linear-gradient(155deg, #052e1a 0%, #064e3b 55%, #022c22 100%); } .hpvc-rows { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 10px; } .hpvc-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(16,185,129,0.14); border-radius: 10px; padding: 12px 16px; opacity: 0; animation: hpvFadeUp 0.4s ease both; } .hpvc-row:nth-child(1){ animation-delay:0.2s; } .hpvc-row:nth-child(2){ animation-delay:0.5s; } .hpvc-row:nth-child(3){ animation-delay:0.8s; } .hpvc-row:nth-child(4){ animation-delay:1.1s; } .hpvc-ico { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; } .hpvc-name { font-size: 0.875rem; color: rgba(255,255,255,0.85); flex: 1; font-weight: 500; } .hpvc-period { font-size: 0.75rem; color: rgba(255,255,255,0.32); } .hpvc-pill { font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; white-space: nowrap; } .hpvc-pill.ok { background: rgba(16,185,129,0.18); color: #34d399; border: 1px solid rgba(16,185,129,0.3); } .hpvc-pill.due { background: rgba(251,191,36,0.14); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); } .hpvc-scorebar { display: flex; align-items: center; gap: 12px; padding: 12px 18px 18px; border-top: 1px solid rgba(255,255,255,0.06); } .hpvc-score-lbl { font-size: 0.75rem; color: rgba(255,255,255,0.38); white-space: nowrap; } .hpvc-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; } .hpvc-fill { height: 100%; width: 0; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 6px; animation: hpvcScore 1.2s 1.6s ease forwards; } @keyframes hpvcScore { to { width: 94%; } } .hpvc-score-num { font-size: 0.875rem; font-weight: 800; color: #34d399; } /* ── VAKEELSAATHI — Legal AI Research ── */ .hpv-legal { height: 100%; display: flex; flex-direction: column; background: linear-gradient(155deg, #0a1628 0%, #1e293b 55%, #0f172a 100%); } .hpvl-search { display: flex; align-items: center; gap: 10px; margin: 14px 18px 10px; background: rgba(212,175,55,0.07); border: 1px solid rgba(212,175,55,0.22); border-radius: 10px; padding: 10px 14px; } .hpvl-search-icon { color: #d4af37; font-size: 0.9rem; flex-shrink: 0; } .hpvl-query { font-size: 0.85rem; color: rgba(255,255,255,0.82); font-style: italic; flex: 1; line-height: 1.4; } .hpvl-cursor { display: inline-block; color: #d4af37; font-style: normal; font-weight: 700; animation: hpvBlink 0.85s step-end infinite; } @keyframes hpvBlink { 0%,100%{opacity:1;} 50%{opacity:0;} } .hpvl-results { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 0 18px 10px; } .hpvl-case { display: flex; align-items: flex-start; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.12); border-radius: 10px; padding: 11px 14px; opacity: 0; animation: hpvFadeUp 0.4s ease both; } .hpvl-case:nth-child(1){ animation-delay:0.5s; } .hpvl-case:nth-child(2){ animation-delay:0.85s; } .hpvl-case:nth-child(3){ animation-delay:1.2s; } .hpvl-badge { font-size: 0.65rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; text-transform: uppercase; margin-top: 1px; } .hpvl-badge.sc { background: rgba(212,175,55,0.2); color: #f5d76e; } .hpvl-badge.hc { background: rgba(148,163,184,0.16); color: #94a3b8; } .hpvl-case-body { flex: 1; } .hpvl-title { font-size: 0.85rem; color: rgba(255,255,255,0.88); line-height: 1.4; margin-bottom: 3px; } .hpvl-cite { font-size: 0.72rem; color: rgba(212,175,55,0.5); } .hpvl-rel { font-size: 0.75rem; font-weight: 700; color: #34d399; flex-shrink: 0; white-space: nowrap; margin-top: 2px; } .hpvl-footer { padding: 8px 18px 14px; font-size: 0.72rem; color: rgba(255,255,255,0.28); border-top: 1px solid rgba(255,255,255,0.06); } /* ── REALZENT — Real Estate CRM ── */ .hpv-realt { height: 100%; display: flex; flex-direction: column; background: linear-gradient(155deg, #1c1410 0%, #2d1f15 55%, #3f2a18 100%); } .hpvr-stats { display: flex; gap: 10px; padding: 14px 18px 10px; } .hpvr-kpi { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,158,11,0.16); border-radius: 12px; padding: 14px 12px; opacity: 0; animation: hpvFadeUp 0.4s ease both; } .hpvr-kpi:nth-child(1){ animation-delay:0.15s; } .hpvr-kpi:nth-child(2){ animation-delay:0.4s; } .hpvr-kpi:nth-child(3){ animation-delay:0.65s; } .hpvr-val { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; } .hpvr-lbl { font-size: 0.68rem; color: rgba(255,255,255,0.42); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; } .hpvr-delta { font-size: 0.72rem; color: #34d399; font-weight: 600; } .hpvr-listings { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 0 18px 14px; } .hpvr-prop { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(245,158,11,0.16); border-radius: 12px; padding: 12px 14px; opacity: 0; animation: hpvFadeUp 0.4s ease both; } .hpvr-prop:nth-child(1){ animation-delay:0.85s; } .hpvr-prop:nth-child(2){ animation-delay:1.05s; } .hpvr-prop-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(245,158,11,0.14); display: flex; align-items: center; justify-content: center; color: #f59e0b; font-size: 1.25rem; flex-shrink: 0; } .hpvr-prop-info { flex: 1; min-width: 0; } .hpvr-prop-name { font-size: 0.85rem; color: rgba(255,255,255,0.9); font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hpvr-prop-meta { font-size: 0.72rem; color: rgba(255,255,255,0.4); } .hpvr-hot { font-size: 0.65rem; font-weight: 700; background: rgba(239,68,68,0.14); color: #fca5a5; border: 1px solid rgba(239,68,68,0.22); padding: 3px 8px; border-radius: 100px; flex-shrink: 0; } .hpvr-live { font-size: 0.65rem; font-weight: 700; background: rgba(16,185,129,0.14); color: #34d399; border: 1px solid rgba(16,185,129,0.22); padding: 3px 8px; border-radius: 100px; flex-shrink: 0; } /* ── FLUXETA — Content Studio (Newsletter + AI Blog + Headless CMS) ── */ .hpv-flux { height: 100%; display: flex; flex-direction: column; position: relative; background: linear-gradient(155deg, #2e1065 0%, #4c1d95 55%, #831843 100%); color: rgba(255,255,255,0.85); } .hpvf-nl-stats { display: flex; gap: 10px; padding: 14px 18px 10px; } .hpvf-nl-stat { flex: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 10px; text-align: center; opacity: 0; animation: hpvFadeUp 0.4s ease both; } .hpvf-nl-stat:nth-child(1){ animation-delay:0.2s; } .hpvf-nl-stat:nth-child(2){ animation-delay:0.45s; } .hpvf-nl-stat:nth-child(3){ animation-delay:0.7s; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.25); } .hpvf-nl-val { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; } .hpvf-nl-stat:nth-child(3) .hpvf-nl-val { color: #34d399; } .hpvf-nl-lbl { font-size: 0.62rem; color: rgba(255,255,255,0.42); text-transform: uppercase; letter-spacing: 0.05em; } .hpvf-feed { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 0 18px 14px; } .hpvf-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.11); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 11px 13px; opacity: 0; animation: hpvFadeUp 0.4s ease both; } .hpvf-item:nth-child(1){ animation-delay:0.9s; } .hpvf-item:nth-child(2){ animation-delay:1.1s; } .hpvf-item:nth-child(3){ animation-delay:1.3s; } .hpvf-type-badge { font-size: 0.62rem; font-weight: 700; padding: 4px 9px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; } .hpvf-type-badge.nl { background: rgba(236,72,153,0.35); color: #fbb6ce; border: 1px solid rgba(236,72,153,0.5); } .hpvf-type-badge.blog { background: rgba(129,140,248,0.35); color: #c7d2fe; border: 1px solid rgba(129,140,248,0.5); } .hpvf-type-badge.cms { background: rgba(245,158,11,0.3); color: #fde68a; border: 1px solid rgba(245,158,11,0.45); } .hpvf-item-content { flex: 1; min-width: 0; } .hpvf-item-title { font-size: 0.82rem; color: #fff; font-weight: 500; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hpvf-item-meta { font-size: 0.67rem; color: rgba(255,255,255,0.55); } .hpvf-nl-notif { position: absolute; bottom: 18px; right: 14px; background: #fff; border-radius: 10px; padding: 8px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.35); opacity: 0; animation: hpvFadeUp 0.4s 1.7s ease both; z-index: 10; } .hpvf-nl-notif-icon { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #ec4899, #8b5cf6); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; flex-shrink: 0; } .hpvf-nl-notif-title { font-size: 0.75rem; font-weight: 700; color: #1e293b; } .hpvf-nl-notif-sub { font-size: 0.65rem; color: #64748b; } /* ── SIGNUPDESK — Event Registration / RSVP Pass ── */ .hpv-signup { height: 100%; display: flex; flex-direction: column; position: relative; background: linear-gradient(155deg, #042f2e 0%, #064e3b 55%, #022c22 100%); } .hpvs-event { padding: 14px 18px 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hpvs-event-info { min-width: 0; } .hpvs-event-name { font-size: 0.85rem; font-weight: 700; color: #fff; line-height: 1.2; } .hpvs-event-meta { font-size: 0.7rem; color: rgba(45,212,191,0.7); margin-top: 2px; } .hpvs-live { font-size: 0.6rem; color: #34d399; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; } .hpvs-live::before { content:''; width:6px; height:6px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399; animation: livePulse 1.5s infinite; } @keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} } .hpvs-stats { display: flex; gap: 10px; padding: 4px 18px 10px; } .hpvs-stat { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(20,184,166,0.18); border-radius: 10px; padding: 10px 12px; opacity: 0; animation: hpvFadeUp 0.4s ease both; } .hpvs-stat:nth-child(1){ animation-delay:0.15s; } .hpvs-stat:nth-child(2){ animation-delay:0.35s; } .hpvs-stat:nth-child(3){ animation-delay:0.55s; } .hpvs-stat-val { font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; } .hpvs-stat-val .delta { font-size: 0.65rem; color: #34d399; font-weight: 600; margin-left: 4px; } .hpvs-stat-lbl { font-size: 0.62rem; color: rgba(45,212,191,0.65); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .hpvs-feed { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 0 18px 14px; } .hpvs-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(20,184,166,0.15); border-radius: 10px; padding: 10px 13px; opacity: 0; animation: hpvFadeUp 0.4s ease both; } .hpvs-row:nth-child(1){ animation-delay:0.8s; } .hpvs-row:nth-child(2){ animation-delay:1.0s; } .hpvs-row:nth-child(3){ animation-delay:1.2s; } .hpvs-seat { font-size: 0.78rem; font-weight: 800; padding: 5px 10px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .hpvs-seat.vip { background: linear-gradient(135deg, #f59e0b, #b45309); color: #fff; box-shadow: 0 4px 12px rgba(245,158,11,0.25); } .hpvs-seat.gen { background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; box-shadow: 0 4px 12px rgba(20,184,166,0.25); } .hpvs-attendee { flex: 1; min-width: 0; } .hpvs-name { font-size: 0.82rem; color: rgba(255,255,255,0.92); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hpvs-sub { font-size: 0.68rem; color: rgba(255,255,255,0.45); } .hpvs-status { font-size: 0.6rem; font-weight: 700; padding: 3px 8px; border-radius: 100px; flex-shrink: 0; } .hpvs-status.checked { background: rgba(16,185,129,0.16); color: #34d399; border: 1px solid rgba(16,185,129,0.28); } .hpvs-status.pending { background: rgba(148,163,184,0.14); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.22); } .hpvs-qr-notif { position: absolute; bottom: 16px; right: 14px; background: #fff; border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 9px; box-shadow: 0 8px 30px rgba(0,0,0,0.35); opacity: 0; animation: hpvFadeUp 0.4s 1.5s ease both; z-index: 10; } .hpvs-qr-icon { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #14b8a6, #0f766e); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; flex-shrink: 0; } .hpvs-qr-title { font-size: 0.72rem; font-weight: 700; color: #064e3b; } .hpvs-qr-sub { font-size: 0.62rem; color: #0f766e; }