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-cert-page .thanks-card {
|
||||
max-width: 540px;
|
||||
/* ── Certificate of Completion ── */
|
||||
.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;
|
||||
color: var(--brand-gold);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.public-cert-divider {
|
||||
|
||||
.public-cert-card {
|
||||
position: relative;
|
||||
max-width: 620px;
|
||||
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;
|
||||
background: #2a2518;
|
||||
margin: 1rem 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.45), transparent);
|
||||
}
|
||||
.public-cert-label {
|
||||
font-size: 0.9rem;
|
||||
.cert-rule-diamond {
|
||||
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;
|
||||
margin: 0.25rem 0;
|
||||
margin: 1rem 0 0.3rem;
|
||||
font-family: var(--brand-font-body);
|
||||
}
|
||||
.public-cert-name {
|
||||
font-family: var(--brand-font-header);
|
||||
font-size: 1.6rem;
|
||||
|
||||
.cert-name {
|
||||
font-family: var(--brand-font-heading);
|
||||
font-size: clamp(1.6rem, 4vw, 2.2rem);
|
||||
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);
|
||||
font-size: 1.2rem;
|
||||
color: #e0c88a;
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
}
|
||||
.public-cert-date {
|
||||
font-size: 0.85rem;
|
||||
|
||||
.cert-body-text {
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.08em;
|
||||
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 {
|
||||
|
||||
+48
-10
@@ -2097,18 +2097,56 @@ function PublicCertificatePage() {
|
||||
|
||||
return (
|
||||
<main className="thanks-page public-cert-page" aria-label="Certificate of Completion">
|
||||
<div className="thanks-card public-cert-card">
|
||||
<p className="eyebrow">Verse by Verse with Nate</p>
|
||||
<h1 className="public-cert-title">Certificate of Completion</h1>
|
||||
<div className="public-cert-divider" />
|
||||
<p className="public-cert-label">This certifies that</p>
|
||||
<p className="public-cert-name">{cert.displayName}</p>
|
||||
<p className="public-cert-label">has successfully completed</p>
|
||||
<p className="public-cert-study">{cert.studyTitle}</p>
|
||||
<p className="public-cert-date">
|
||||
<div className="public-cert-card">
|
||||
{/* Corner ornaments */}
|
||||
<span className="cert-corner cert-corner--tl" aria-hidden="true">✦</span>
|
||||
<span className="cert-corner cert-corner--tr" aria-hidden="true">✦</span>
|
||||
<span className="cert-corner cert-corner--bl" aria-hidden="true">✦</span>
|
||||
<span className="cert-corner cert-corner--br" aria-hidden="true">✦</span>
|
||||
|
||||
<div className="cert-inner">
|
||||
<p className="cert-issuer">✦ Verse by Verse with Nate ✦</p>
|
||||
|
||||
<div className="cert-ornament-rule">
|
||||
<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="btn-primary" style={{ marginTop: '2rem' }}>Visit Verse by Verse with Nate</Link>
|
||||
|
||||
<Link to="/" className="cert-back-link">Visit Verse by Verse with Nate →</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user