feat: implement Phase 1-3 (Schema JSON-LD, sitemap, robots, FAQ accordion, relief timeline, prayer briefing modal, high-contrast banner)
This commit is contained in:
+316
-15
@@ -1667,32 +1667,319 @@ button, input, select, textarea {
|
||||
.sb7-trans-before p { color: var(--slate-600); }
|
||||
.sb7-trans-after p { color: var(--slate-200); }
|
||||
|
||||
/* SB7: Transitional CTA Banner */
|
||||
/* SB7: Transitional CTA Banner - Ultra High Contrast */
|
||||
.sb7-transitional-bar {
|
||||
background: linear-gradient(90deg, #101f42 0%, #172d5e 100%);
|
||||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||||
background: linear-gradient(135deg, #071129 0%, #0f214d 50%, #091533 100%);
|
||||
border: 2px solid var(--gold-400);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 36px 40px;
|
||||
margin: 60px 0;
|
||||
padding: 42px 46px;
|
||||
margin: 64px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: var(--shadow-lg);
|
||||
gap: 32px;
|
||||
box-shadow: 0 16px 40px rgba(5, 10, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sb7-transitional-bar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -20%;
|
||||
width: 140%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sb7-transitional-content {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sb7-transitional-bar h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--white);
|
||||
margin-bottom: 6px;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 800;
|
||||
color: #ffffff !important;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.3;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.sb7-transitional-bar p {
|
||||
font-size: 0.95rem;
|
||||
color: var(--slate-300);
|
||||
font-size: 1.08rem;
|
||||
font-weight: 500;
|
||||
color: #f8fafc !important;
|
||||
line-height: 1.65;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sb7-transitional-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 15px 30px;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Relief Timeline Styles */
|
||||
.timeline-container {
|
||||
max-width: 900px;
|
||||
margin: 50px auto 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
bottom: 15px;
|
||||
left: 28px;
|
||||
width: 3px;
|
||||
background: linear-gradient(180deg, var(--gold-400) 0%, var(--relief-red) 70%, var(--slate-300) 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 72px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 4px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--white);
|
||||
border: 3px solid var(--gold-500);
|
||||
box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--primary-900);
|
||||
font-weight: 800;
|
||||
font-size: 0.82rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.timeline-dot.active {
|
||||
background: var(--relief-red);
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.3);
|
||||
color: #ffffff;
|
||||
animation: pulse-dot 2s infinite;
|
||||
}
|
||||
|
||||
.timeline-card {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--slate-200);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 24px 28px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.timeline-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--gold-300);
|
||||
}
|
||||
|
||||
.timeline-status-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.badge-completed {
|
||||
background: #ecfdf5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
.badge-in-progress {
|
||||
background: #fef2f2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.badge-target {
|
||||
background: #eff6ff;
|
||||
color: #1e40af;
|
||||
border: 1px solid #bfdbfe;
|
||||
}
|
||||
|
||||
.timeline-card h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.22rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-950);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.timeline-card p {
|
||||
font-size: 0.94rem;
|
||||
color: var(--slate-600);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* FAQ Accordion Styles */
|
||||
.faq-grid {
|
||||
max-width: 900px;
|
||||
margin: 48px auto 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--slate-200);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
border-color: var(--gold-300);
|
||||
}
|
||||
|
||||
.faq-item.open {
|
||||
border-color: var(--gold-400);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 22px 26px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-align: left;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.08rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-950);
|
||||
cursor: pointer;
|
||||
gap: 16px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.faq-question:hover {
|
||||
color: var(--gold-600);
|
||||
}
|
||||
|
||||
.faq-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--slate-100);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
color: var(--primary-900);
|
||||
}
|
||||
|
||||
.faq-item.open .faq-icon {
|
||||
transform: rotate(180deg);
|
||||
background: var(--gold-400);
|
||||
color: var(--primary-950);
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease-out, padding 0.35s ease;
|
||||
padding: 0 26px;
|
||||
color: var(--slate-600);
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.faq-item.open .faq-answer {
|
||||
max-height: 350px;
|
||||
padding: 0 26px 24px 26px;
|
||||
}
|
||||
|
||||
/* Prayer Guide Modal Specifics */
|
||||
.prayer-modal-box {
|
||||
max-width: 680px;
|
||||
max-height: 88vh;
|
||||
overflow-y: auto;
|
||||
padding: 40px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--white);
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
|
||||
border: 1px solid var(--gold-300);
|
||||
}
|
||||
|
||||
.prayer-point-card {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px 18px;
|
||||
background: var(--slate-50);
|
||||
border: 1px solid var(--slate-200);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.prayer-point-num {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--grad-gold);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
color: var(--primary-950);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.prayer-point-content h5 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.02rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-900);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.prayer-point-content p {
|
||||
font-size: 0.88rem;
|
||||
color: var(--slate-600);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -1702,7 +1989,21 @@ button, input, select, textarea {
|
||||
.sb7-transitional-bar {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
padding: 34px 22px;
|
||||
gap: 24px;
|
||||
}
|
||||
.sb7-transitional-btn {
|
||||
width: 100%;
|
||||
}
|
||||
.timeline-container::before {
|
||||
left: 20px;
|
||||
}
|
||||
.timeline-item {
|
||||
padding-left: 56px;
|
||||
}
|
||||
.timeline-dot {
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user