From 1bc573147d82e23ac61244b6b51506fad011f631 Mon Sep 17 00:00:00 2001 From: nmemmert Date: Tue, 9 Jun 2026 13:40:31 -0400 Subject: [PATCH] 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 --- src/App.css | 208 +++++++++++++++++++++++++++++++++++++++++++++------- src/App.tsx | 62 +++++++++++++--- 2 files changed, 232 insertions(+), 38 deletions(-) diff --git a/src/App.css b/src/App.css index 41dff07..71d276c 100644 --- a/src/App.css +++ b/src/App.css @@ -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 { diff --git a/src/App.tsx b/src/App.tsx index 783c122..cb392c7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2097,18 +2097,56 @@ function PublicCertificatePage() { return (
-
-

Verse by Verse with Nate

-

Certificate of Completion

-
-

This certifies that

-

{cert.displayName}

-

has successfully completed

-

{cert.studyTitle}

-

- Awarded on {new Date(cert.issuedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} -

- Visit Verse by Verse with Nate +
+ {/* Corner ornaments */} + + + + + +
+

✦   Verse by Verse with Nate   ✦

+ +
+ + ◆ + +
+ +

Certificate
of Completion

+ +
+ + ◆ + +
+ +

Presented to

+

{cert.displayName}

+ +

+ in recognition of faithful study and completion of +

+

{cert.studyTitle}

+ + + +
+ + ◆ + +
+ +

+ Awarded on {new Date(cert.issuedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} +

+ + Visit Verse by Verse with Nate → +
)