Redesign Q&A for mobile and upgrade completion certificate
- Full mobile redesign of Q&A: edge-to-edge cards, full-width layout, wrapping action buttons, hidden sidebar, proper touch targets, and fixed double-padding from thanks-page/thanks-card wrapper - Fancy certificate redesign: double gold border frame, corner ornaments, ornamental rules with diamond dividers, decorative seal, gold glow, and updated issuer to "Verse by Verse with Nate" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmert
+182
-26
@@ -2164,41 +2164,197 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ── Public Certificate Page ──────────────────────────────────────────────── */
|
/* ── Public Certificate Page ──────────────────────────────────────────────── */
|
||||||
.public-cert-page .thanks-card {
|
/* ── Certificate of Completion ── */
|
||||||
max-width: 540px;
|
.public-cert-page {
|
||||||
|
padding: 2.5rem 1.5rem;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 168, 76, 0.18) 0%, transparent 65%),
|
||||||
|
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
|
||||||
|
var(--brand-black);
|
||||||
}
|
}
|
||||||
.public-cert-title {
|
|
||||||
font-size: 1.8rem;
|
.public-cert-card {
|
||||||
color: var(--brand-gold);
|
position: relative;
|
||||||
margin: 0.5rem 0;
|
max-width: 620px;
|
||||||
}
|
|
||||||
.public-cert-divider {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 168, 76, 0.07) 0%, transparent 60%),
|
||||||
|
linear-gradient(180deg, #1a1710 0%, #111009 100%);
|
||||||
|
border: 1.5px solid rgba(201, 168, 76, 0.55);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 6px rgba(201, 168, 76, 0.08),
|
||||||
|
0 0 0 7px rgba(201, 168, 76, 0.22),
|
||||||
|
0 24px 80px rgba(0, 0, 0, 0.7),
|
||||||
|
inset 0 0 60px rgba(201, 168, 76, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Double-border inner frame */
|
||||||
|
.public-cert-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 8px;
|
||||||
|
border: 1px solid rgba(201, 168, 76, 0.28);
|
||||||
|
border-radius: 2px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corner ornaments */
|
||||||
|
.cert-corner {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--brand-gold);
|
||||||
|
line-height: 1;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.cert-corner--tl { top: 14px; left: 14px; }
|
||||||
|
.cert-corner--tr { top: 14px; right: 14px; }
|
||||||
|
.cert-corner--bl { bottom: 14px; left: 14px; }
|
||||||
|
.cert-corner--br { bottom: 14px; right: 14px; }
|
||||||
|
|
||||||
|
.cert-inner {
|
||||||
|
padding: 3rem 3.5rem;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-issuer {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(201, 168, 76, 0.6);
|
||||||
|
margin: 0 0 1.4rem;
|
||||||
|
font-family: var(--brand-font-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ornamental rule with diamond */
|
||||||
|
.cert-ornament-rule {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0.6rem 0;
|
||||||
|
}
|
||||||
|
.cert-ornament-rule--sm {
|
||||||
|
margin: 0.4rem 0;
|
||||||
|
}
|
||||||
|
.cert-rule-line {
|
||||||
|
flex: 1;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: #2a2518;
|
background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.45), transparent);
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
}
|
||||||
.public-cert-label {
|
.cert-rule-diamond {
|
||||||
font-size: 0.9rem;
|
font-size: 0.5rem;
|
||||||
|
color: var(--brand-gold);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-title {
|
||||||
|
font-family: var(--brand-font-heading);
|
||||||
|
font-size: clamp(2rem, 5vw, 2.8rem);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--brand-gold);
|
||||||
|
margin: 0.8rem 0 0.6rem;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
text-shadow: 0 0 40px rgba(201, 168, 76, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-presented {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
color: #7a7060;
|
color: #7a7060;
|
||||||
margin: 0.25rem 0;
|
margin: 1rem 0 0.3rem;
|
||||||
|
font-family: var(--brand-font-body);
|
||||||
}
|
}
|
||||||
.public-cert-name {
|
|
||||||
font-family: var(--brand-font-header);
|
.cert-name {
|
||||||
font-size: 1.6rem;
|
font-family: var(--brand-font-heading);
|
||||||
|
font-size: clamp(1.6rem, 4vw, 2.2rem);
|
||||||
color: var(--brand-warm-white);
|
color: var(--brand-warm-white);
|
||||||
margin: 0.25rem 0 0.75rem;
|
margin: 0 0 0.4rem;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
.public-cert-study {
|
|
||||||
font-family: var(--brand-font-header);
|
.cert-body-text {
|
||||||
font-size: 1.2rem;
|
font-size: 0.82rem;
|
||||||
color: #e0c88a;
|
letter-spacing: 0.08em;
|
||||||
margin: 0.25rem 0 0.75rem;
|
|
||||||
}
|
|
||||||
.public-cert-date {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #7a7060;
|
color: #7a7060;
|
||||||
margin: 0;
|
margin: 0.5rem 0 0.3rem;
|
||||||
|
font-style: italic;
|
||||||
|
font-family: var(--brand-font-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-study {
|
||||||
|
font-family: var(--brand-font-heading);
|
||||||
|
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
|
||||||
|
color: #e8ce8a;
|
||||||
|
margin: 0.2rem 0 0;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Decorative seal */
|
||||||
|
.cert-seal {
|
||||||
|
margin: 1.6rem 0 0.8rem;
|
||||||
|
}
|
||||||
|
.cert-seal-ring {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 62px;
|
||||||
|
height: 62px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1.5px solid rgba(201, 168, 76, 0.5);
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 4px rgba(201, 168, 76, 0.08),
|
||||||
|
0 0 0 5px rgba(201, 168, 76, 0.2),
|
||||||
|
0 0 20px rgba(201, 168, 76, 0.15);
|
||||||
|
background: radial-gradient(circle, rgba(201, 168, 76, 0.1) 0%, transparent 70%);
|
||||||
|
}
|
||||||
|
.cert-seal-inner {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: var(--brand-gold);
|
||||||
|
text-shadow: 0 0 12px rgba(201, 168, 76, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-date {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: #7a7060;
|
||||||
|
margin: 0.6rem 0 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: var(--brand-font-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-back-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(201, 168, 76, 0.55);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
font-family: var(--brand-font-body);
|
||||||
|
}
|
||||||
|
.cert-back-link:hover {
|
||||||
|
color: var(--brand-gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.cert-inner {
|
||||||
|
padding: 2rem 1.75rem;
|
||||||
|
}
|
||||||
|
.cert-corner--tl { top: 12px; left: 12px; }
|
||||||
|
.cert-corner--tr { top: 12px; right: 12px; }
|
||||||
|
.cert-corner--bl { bottom: 12px; left: 12px; }
|
||||||
|
.cert-corner--br { bottom: 12px; right: 12px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.study-track-switcher {
|
.study-track-switcher {
|
||||||
|
|||||||
+50
-12
@@ -2097,18 +2097,56 @@ function PublicCertificatePage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="thanks-page public-cert-page" aria-label="Certificate of Completion">
|
<main className="thanks-page public-cert-page" aria-label="Certificate of Completion">
|
||||||
<div className="thanks-card public-cert-card">
|
<div className="public-cert-card">
|
||||||
<p className="eyebrow">Verse by Verse with Nate</p>
|
{/* Corner ornaments */}
|
||||||
<h1 className="public-cert-title">Certificate of Completion</h1>
|
<span className="cert-corner cert-corner--tl" aria-hidden="true">✦</span>
|
||||||
<div className="public-cert-divider" />
|
<span className="cert-corner cert-corner--tr" aria-hidden="true">✦</span>
|
||||||
<p className="public-cert-label">This certifies that</p>
|
<span className="cert-corner cert-corner--bl" aria-hidden="true">✦</span>
|
||||||
<p className="public-cert-name">{cert.displayName}</p>
|
<span className="cert-corner cert-corner--br" aria-hidden="true">✦</span>
|
||||||
<p className="public-cert-label">has successfully completed</p>
|
|
||||||
<p className="public-cert-study">{cert.studyTitle}</p>
|
<div className="cert-inner">
|
||||||
<p className="public-cert-date">
|
<p className="cert-issuer">✦ Verse by Verse with Nate ✦</p>
|
||||||
Awarded on {new Date(cert.issuedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
|
|
||||||
</p>
|
<div className="cert-ornament-rule">
|
||||||
<Link to="/" className="btn-primary" style={{ marginTop: '2rem' }}>Visit Verse by Verse with Nate</Link>
|
<span className="cert-rule-line" />
|
||||||
|
<span className="cert-rule-diamond">◆</span>
|
||||||
|
<span className="cert-rule-line" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="cert-title">Certificate<br />of Completion</h1>
|
||||||
|
|
||||||
|
<div className="cert-ornament-rule cert-ornament-rule--sm">
|
||||||
|
<span className="cert-rule-line" />
|
||||||
|
<span className="cert-rule-diamond">◆</span>
|
||||||
|
<span className="cert-rule-line" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="cert-presented">Presented to</p>
|
||||||
|
<p className="cert-name">{cert.displayName}</p>
|
||||||
|
|
||||||
|
<p className="cert-body-text">
|
||||||
|
in recognition of faithful study and completion of
|
||||||
|
</p>
|
||||||
|
<p className="cert-study">{cert.studyTitle}</p>
|
||||||
|
|
||||||
|
<div className="cert-seal" aria-hidden="true">
|
||||||
|
<span className="cert-seal-ring">
|
||||||
|
<span className="cert-seal-inner">✦</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="cert-ornament-rule cert-ornament-rule--sm">
|
||||||
|
<span className="cert-rule-line" />
|
||||||
|
<span className="cert-rule-diamond">◆</span>
|
||||||
|
<span className="cert-rule-line" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="cert-date">
|
||||||
|
Awarded on {new Date(cert.issuedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Link to="/" className="cert-back-link">Visit Verse by Verse with Nate →</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user