/home/u775757334/domains/civicwelllife.com/public_html/function
Edit: /home/u775757334/domains/civicwelllife.com/public_html/function/health-test.css (28790B)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #f4f8fc;
color: #17324d;
}
.health-test-page {
padding: 40px 0 70px;
}
.health-test-container {
width: min(1100px, 92%);
margin: auto;
}
.health-hero {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
color: #fff;
border-radius: 28px;
padding: 36px;
position: relative;
overflow: hidden;
box-shadow: 0 22px 50px rgba(13, 110, 253, 0.18);
margin-bottom: 28px;
}
.health-hero::before {
content: "";
position: absolute;
right: -70px;
top: -70px;
width: 240px;
height: 240px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.health-hero::after {
content: "";
position: absolute;
right: 70px;
bottom: -60px;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
}
.health-hero h1 {
margin: 0 0 12px;
font-size: 38px;
font-weight: 700;
line-height: 1.2;
position: relative;
z-index: 2;
}
.health-hero p {
margin: 0;
font-size: 15px;
line-height: 1.7;
max-width: 720px;
opacity: .95;
position: relative;
z-index: 2;
}
.health-badge-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 18px;
position: relative;
z-index: 2;
}
.health-mini-badge {
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
.health-card {
background: #fff;
border: 1px solid #e5edf5;
border-radius: 24px;
box-shadow: 0 14px 35px rgba(16, 36, 62, 0.07);
padding: 28px;
margin-bottom: 24px;
}
.health-section-title {
margin: 0 0 8px;
font-size: 28px;
font-weight: 700;
color: #14314b;
}
.health-section-subtitle {
margin: 0 0 22px;
color: #6c7d90;
font-size: 14px;
line-height: 1.7;
}
.health-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px;
}
.col-6 {
grid-column: span 6;
}
.col-4 {
grid-column: span 4;
}
.col-12 {
grid-column: span 12;
}
.health-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: #17324d;
}
.health-input,
.health-select {
width: 100%;
height: 52px;
border: 1px solid #dbe6f0;
border-radius: 15px;
padding: 0 16px;
font-size: 14px;
color: #17324d;
background: #fff;
outline: none;
transition: all .25s ease;
box-sizing: border-box;
}
.health-input:focus,
.health-select:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 4px rgba(13, 110, 253, .08);
}
.health-btn-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 24px;
}
.health-btn {
height: 35px;
border: none;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all .25s ease;
}
.health-btn-outline {
background: #fff;
color: #17324d;
padding: 6px 16px;
border: 1px solid #dbe6f0;
}
.health-btn-primary:hover {
background: #0b5ed7;
transform: translateY(-1px);
}
.health-btn-light {
background: #eef5ff;
color: #0d6efd;
}
.health-btn-light:hover {
background: #dfeeff;
}
.health-btn-outline {
background: #fff;
color: #17324d;
padding: 6px 16px;
border: 1px solid #dbe6f0;
}
.health-progress-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.health-progress-text {
padding: 8px 14px;
background: #eef5ff;
color: #0d6efd;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
}
.health-progress-note {
color: #6c7d90;
font-size: 13px;
}
.health-progress-bar-wrap {
width: 100%;
height: 12px;
background: #eaf1f8;
border-radius: 999px;
overflow: hidden;
margin-bottom: 24px;
}
.health-progress-bar {
width: 28%;
height: 100%;
background: linear-gradient(90deg, #0d6efd, #20c997);
border-radius: 999px;
}
.health-question-title {
font-size: 30px;
font-weight: 700;
line-height: 1.45;
color: #10243e;
margin: 0 0 24px;
}
.health-option-tag {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
background: #eaf2ff;
color: #0d6efd;
margin-bottom: 12px;
}
.health-option-title {
font-size: 16px;
font-weight: 700;
color: #17324d;
margin-bottom: 6px;
}
.health-option-desc {
font-size: 14px;
color: #697b90;
line-height: 1.6;
}
.health-nav-actions {
display: flex;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}
.health-summary-box {
background: #f7fbff;
border: 1px solid #e3edf8;
border-radius: 20px;
padding: 22px;
margin-bottom: 22px;
}
.health-summary-box h3 {
margin: 0 0 8px;
font-size: 24px;
font-weight: 700;
color: #14314b;
}
.health-summary-box p {
margin: 0;
color: #66788d;
line-height: 1.7;
font-size: 14px;
}
.health-result-badge {
display: inline-block;
background: #0d6efd;
color: #fff;
padding: 10px 16px;
border-radius: 999px;
font-weight: 700;
margin-top: 14px;
font-size: 14px;
}
.health-score-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 22px;
}
.health-score-card {
border: 1px solid #e4edf5;
border-radius: 18px;
padding: 18px;
background: #fff;
}
.health-score-card h4 {
margin: 0 0 10px;
font-size: 16px;
color: #17324d;
font-weight: 700;
}
.health-score-number {
font-size: 30px;
font-weight: 800;
margin-bottom: 8px;
}
.health-score-status {
font-size: 14px;
font-weight: 600;
}
.green {
color: #198754;
}
.yellow {
color: #d39e00;
}
.red {
color: #dc3545;
}
.health-bottom-grid {
display: grid;
grid-template-columns: 1.3fr .9fr;
gap: 18px;
}
.health-panel {
background: #fff;
border: 1px solid #e4edf5;
border-radius: 20px;
padding: 22px;
}
.health-panel h4 {
margin: 0 0 14px;
font-size: 22px;
font-weight: 700;
color: #17324d;
}
.health-panel ul {
margin: 0;
padding-left: 18px;
}
.health-panel ul li {
margin-bottom: 10px;
color: #5c6f84;
line-height: 1.7;
}
.health-data-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid #edf2f7;
font-size: 14px;
}
.health-data-row:last-child {
border-bottom: none;
}
.health-data-row span:first-child {
color: #6c7d90;
}
.health-data-row span:last-child {
color: #17324d;
font-weight: 600;
text-align: right;
}
.hidden-box {
display: none;
}
@media (max-width: 992px) {
.health-score-grid {
grid-template-columns: repeat(2, 1fr);
}
.health-bottom-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.health-hero {
padding: 24px 18px;
border-radius: 22px;
}
.health-hero h1 {
font-size: 28px;
}
.health-card {
padding: 18px 14px;
border-radius: 20px;
}
.health-grid {
grid-template-columns: 1fr;
}
.col-6,
.col-4,
.col-12 {
grid-column: span 1;
}
.health-question-title {
font-size: 23px;
}
.health-option-grid {
grid-template-columns: 1fr;
}
.health-score-grid {
grid-template-columns: 1fr;
}
.health-nav-actions .health-btn,
.health-btn-row .health-btn {
width: 100%;
}
}
/* ===== RESULT UI V2 ===== */
.result-card-v2 {
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid #e3edf7;
border-radius: 28px;
padding: 28px;
box-shadow: 0 18px 45px rgba(17, 41, 72, 0.08);
}
.result-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 28px;
border-radius: 24px;
margin-bottom: 24px;
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
color: #fff;
position: relative;
overflow: hidden;
}
.result-hero::before {
content: "";
position: absolute;
right: -60px;
top: -60px;
width: 180px;
height: 180px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
}
.result-hero::after {
content: "";
position: absolute;
right: 100px;
bottom: -70px;
width: 140px;
height: 140px;
background: rgba(255, 255, 255, 0.06);
border-radius: 50%;
}
.result-hero-content,
.result-hero-side {
position: relative;
z-index: 2;
}
.result-hero-content {
flex: 1;
}
.result-overline {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
opacity: .9;
margin-bottom: 10px;
}
.result-hero h2 {
margin: 0 0 12px;
font-size: 32px;
line-height: 1.2;
font-weight: 800;
color: #fff;
}
.result-badge-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
}
.health-result-badge {
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
padding: 10px 16px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
}
.result-tagline-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.20);
color: #fff;
}
.result-hero-text {
margin: 0;
max-width: 620px;
line-height: 1.7;
font-size: 14px;
opacity: .92;
}
.result-hero-side {
min-width: 220px;
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-end;
}
.result-mini-stat {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 18px;
padding: 16px 18px;
min-width: 190px;
text-align: left;
}
.result-mini-stat span {
display: block;
font-size: 12px;
opacity: .85;
margin-bottom: 6px;
}
.result-mini-stat strong {
font-size: 20px;
font-weight: 800;
}
.doctor-cta-btn {
padding-top: 17px;
min-width: 189px;
text-align: center;
background: #fff;
color: #0d6efd;
border-radius: 17px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.doctor-cta-btn:hover {
background: #f4f8ff;
transform: translateY(-2px);
}
.result-score-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 24px;
}
.result-score-card {
border: 1px solid #e5eef7;
border-radius: 22px;
padding: 20px;
background: #fff;
box-shadow: 0 12px 28px rgba(21, 48, 84, 0.06);
transition: all .3s ease;
position: relative;
overflow: hidden;
}
.result-score-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(21, 48, 84, 0.12);
}
.overall-card {
background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
border-color: #cfe1ff;
}
.score-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.score-card-head h4 {
margin: 0;
font-size: 17px;
font-weight: 700;
color: #17324d;
}
.score-icon {
width: 46px;
height: 46px;
border-radius: 14px;
background: #eef5ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.health-score-number {
font-size: 40px;
font-weight: 800;
line-height: 1;
margin-bottom: 16px;
}
.score-progress {
width: 100%;
height: 10px;
background: #edf3f9;
border-radius: 999px;
overflow: hidden;
margin-bottom: 14px;
}
.score-progress span {
display: block;
width: 0;
height: 100%;
border-radius: 999px;
transition: width .7s ease;
background: linear-gradient(90deg, #0d6efd, #20c997);
}
.score-pill {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
padding: 8px 12px;
border-radius: 999px;
}
.score-pill::before,
.result-tagline-pill::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
background: currentColor;
}
.status-good {
background: rgba(25, 135, 84, 0.12);
color: #198754;
}
.status-moderate {
background: rgba(255, 193, 7, 0.14);
color: #b88400;
}
.status-low {
background: rgba(220, 53, 69, 0.12);
color: #dc3545;
}
.result-bottom-grid {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 18px;
}
.result-panel {
border-radius: 22px;
border: 1px solid #e5eef7;
padding: 22px;
background: #fff;
box-shadow: 0 10px 26px rgba(18, 40, 68, 0.05);
}
.result-panel h4 {
margin: 0 0 16px;
font-size: 24px;
color: #17324d;
}
.result-suggestion-list {
list-style: none;
margin: 0;
padding: 0;
}
.result-suggestion-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #edf2f7;
color: #5c6f84;
line-height: 1.7;
}
.result-suggestion-list li:last-child {
border-bottom: none;
}
.result-suggestion-list li::before {
content: "✓";
min-width: 24px;
height: 24px;
border-radius: 50%;
background: #eef5ff;
color: #0d6efd;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
margin-top: 2px;
}
.health-data-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid #edf2f7;
}
.health-data-row span:first-child {
color: #6c7d90;
font-size: 14px;
}
.health-data-row span:last-child {
color: #17324d;
font-size: 15px;
font-weight: 700;
text-align: right;
}
.green {
color: #198754;
}
.yellow {
color: #d39e00;
}
.red {
color: #dc3545;
}
@media (max-width: 992px) {
.result-hero {
flex-direction: column;
align-items: flex-start;
}
.result-hero-side {
width: 100%;
align-items: flex-start;
}
.result-score-grid {
grid-template-columns: repeat(2, 1fr);
}
.result-bottom-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.result-card-v2 {
padding: 18px;
border-radius: 22px;
}
.result-hero {
padding: 20px;
border-radius: 20px;
}
.result-hero h2 {
font-size: 24px;
}
.result-score-grid {
grid-template-columns: 1fr;
}
.doctor-cta-btn,
.result-mini-stat {
width: 100%;
}
}
.result-card-v2 {
margin-bottom: 24px;
}
.health-option-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-bottom: 28px;
}
.health-btn-primary {
background: #0d6efd;
color: #fff;
padding: 6px 15px;
}
.health-option {
position: relative;
background: #fff;
border: 1.5px solid #dbe4f0;
border-radius: 20px;
padding: 24px 20px;
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
}
.health-option:hover {
transform: translateY(-3px);
border-color: #9fc0ff;
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08);
}
.health-option.active {
background: #f8fbff;
border-color: #2563eb;
box-shadow: 0 16px 30px rgba(37, 99, 235, 0.12);
}
.health-option-badge {
width: 54px;
height: 54px;
border-radius: 50%;
background: #edf3ff;
color: #2563eb;
font-size: 24px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.health-option.active .health-option-badge {
background: #2563eb;
color: #fff;
}
.health-option-desc {
font-size: 22px;
line-height: 1.4;
color: #1e293b;
font-weight: 600;
max-width: 95%;
margin: 0;
}
.health-option-check {
position: absolute;
top: 14px;
right: 14px;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1.5px solid #c7d2e3;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: transparent;
background: #fff;
transition: all 0.25s ease;
}
.health-option.active .health-option-check {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
@media (max-width: 991px) {
.health-option-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.health-option {
min-height: 130px;
padding: 20px 16px;
}
.health-option-desc {
font-size: 18px;
}
}
.result-card-v2 {
background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
border: 1px solid #d9e7fb;
border-radius: 30px;
padding: 28px;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}
.premium-result-hero {
position: relative;
overflow: hidden;
display: flex;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding: 28px;
border-radius: 28px;
background: linear-gradient(135deg, #1f6df0 0%, #1559cf 100%);
color: #fff;
margin-bottom: 24px;
}
.premium-result-hero::before,
.premium-result-hero::after {
content: "";
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.premium-result-hero::before {
width: 180px;
height: 180px;
top: -60px;
right: -60px;
}
.premium-result-hero::after {
width: 140px;
height: 140px;
bottom: -50px;
right: 100px;
}
.result-hero-content,
.result-hero-side {
position: relative;
z-index: 2;
}
.result-overline {
display: inline-block;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.95;
margin-bottom: 10px;
}
#resultMainTitle {
font-size: 32px;
line-height: 1.08;
font-weight: 800;
margin: 0 0 16px;
color: #fff;
}
.result-badge-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.health-result-badge,
.result-tagline-pill {
padding: 10px 18px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
}
.health-result-badge {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
.result-tagline-pill {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.result-hero-text {
font-size: 18px;
line-height: 1.7;
max-width: 720px;
margin: 0;
color: rgba(255, 255, 255, 0.92);
}
.result-hero-side {
min-width: 260px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 16px;
}
.result-mini-stat {
min-width: 230px;
padding: 18px 20px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
}
.result-mini-stat span {
display: block;
font-size: 14px;
opacity: 0.9;
margin-bottom: 6px;
}
.result-mini-stat strong {
font-size: 22px;
line-height: 1.2;
color: #fff;
}
.doctor-cta-btn {
min-width: 190px;
justify-content: center;
display: inline-flex;
align-items: center;
background: #fff !important;
color: #1559cf !important;
border: none;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.dosha-analytics-grid {
display: grid;
grid-template-columns: 1.3fr 0.9fr;
gap: 22px;
margin-bottom: 24px;
}
.result-panel {
background: #fff;
border: 1px solid #dce8f8;
border-radius: 24px;
padding: 24px;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}
.panel-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.panel-head h4 {
margin: 0 0 6px;
font-size: 28px;
line-height: 1.2;
color: #102a4c;
}
.panel-head p {
margin: 0;
color: #617a9b;
font-size: 15px;
}
.dosha-bar-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.dosha-row-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.dosha-label-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.dosha-name {
font-size: 17px;
font-weight: 700;
color: #102a4c;
}
.dosha-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.dosha-dot.vata {
background: #6366f1;
}
.dosha-dot.pitta {
background: #f97316;
}
.dosha-dot.kapha {
background: #10b981;
}
.dosha-dot.balanced {
background: #06b6d4;
}
.dosha-progress {
height: 12px;
background: #edf3fb;
border-radius: 999px;
overflow: hidden;
}
.dosha-progress span {
display: block;
height: 100%;
width: 0%;
border-radius: 999px;
transition: width 0.7s ease;
}
#vataBar {
background: linear-gradient(90deg, #818cf8, #6366f1);
}
#pittaBar {
background: linear-gradient(90deg, #fb923c, #f97316);
}
#kaphaBar {
background: linear-gradient(90deg, #34d399, #10b981);
}
#balancedBar {
background: linear-gradient(90deg, #22d3ee, #06b6d4);
}
.dosha-wheel-panel {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dosha-wheel-wrap {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0 18px;
}
.dosha-wheel {
--wheel-bg: conic-gradient(#6366f1 0deg 90deg,
#f97316 90deg 180deg,
#10b981 180deg 270deg,
#06b6d4 270deg 360deg);
width: 240px;
height: 240px;
border-radius: 50%;
background: var(--wheel-bg);
position: relative;
box-shadow: 0 18px 40px rgba(37, 99, 235, 0.14);
}
.dosha-wheel::before {
content: "";
position: absolute;
inset: 24px;
background: #fff;
border-radius: 50%;
}
.dosha-wheel-inner {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
}
.dosha-wheel-inner span {
font-size: 14px;
color: #6a7f9e;
margin-bottom: 8px;
}
.dosha-wheel-inner strong {
font-size: 28px;
line-height: 1.2;
color: #102a4c;
}
.dosha-legend {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 8px;
}
.legend-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
color: #24405f;
background: #f7fbff;
border: 1px solid #e3eefb;
border-radius: 14px;
padding: 12px 14px;
}
.result-score-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.result-score-card {
background: #fff;
border: 1px solid #dce8f8;
border-radius: 24px;
padding: 22px;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}
.overall-card {
background: linear-gradient(180deg, #f7fbff 0%, #f2f8ff 100%);
}
.score-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.score-icon {
width: 48px;
height: 48px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #eef5ff;
font-size: 24px;
}
.score-card-head h4 {
margin: 0;
font-size: 18px;
color: #102a4c;
}
.health-score-number {
font-size: 52px;
font-weight: 800;
line-height: 1;
margin-bottom: 16px;
}
.score-progress {
height: 10px;
background: #ecf2fa;
border-radius: 999px;
overflow: hidden;
margin-bottom: 16px;
}
.score-progress span {
display: block;
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, #2563eb, #22c55e);
transition: width 0.6s ease;
}
.score-pill {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 10px 14px;
font-size: 14px;
font-weight: 700;
}
.status-good {
background: #e9fbf3;
color: #0f9f5b;
}
.status-moderate {
background: #fff7e8;
color: #d18b00;
}
.status-low {
background: #ffeef0;
color: #e23a4b;
}
.health-bottom-grid.result-bottom-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 22px;
}
.result-suggestion-list {
list-style: none;
padding: 0;
margin: 0;
}
.result-suggestion-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid #edf2f9;
color: #4b668a;
font-size: 18px;
line-height: 1.6;
}
.result-suggestion-list li:last-child {
border-bottom: none;
}
.result-suggestion-list li::before {
content: "✓";
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #e9f1ff;
color: #2563eb;
font-weight: 800;
margin-top: 2px;
}
.health-data-row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid #edf2f9;
font-size: 17px;
}
.health-data-row:last-child {
border-bottom: none;
}
.health-data-row span:first-child {
color: #617a9b;
}
.health-data-row span:last-child {
color: #102a4c;
font-weight: 700;
text-align: right;
}
.green {
color: #10b981;
}
.yellow {
color: #f59e0b;
}
.red {
color: #ef4444;
}
@media (max-width: 1199px) {
.result-score-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dosha-analytics-grid,
.health-bottom-grid.result-bottom-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.result-card-v2 {
padding: 18px;
border-radius: 22px;
}
.premium-result-hero {
padding: 22px;
}
#resultMainTitle {
font-size: 34px;
}
.result-hero-side {
align-items: stretch;
width: 100%;
}
.result-mini-stat,
.doctor-cta-btn {
width: 100%;
}
.dosha-wheel {
width: 200px;
height: 200px;
}
.dosha-wheel::before {
inset: 20px;
}
.result-score-grid {
grid-template-columns: 1fr;
}
.dosha-legend {
grid-template-columns: 1fr 1fr;
}
.health-data-row {
font-size: 15px;
}
.result-suggestion-list li {
font-size: 16px;
}
}