About page redesign: photo + bio intro with actions, compact about-the-show card, where-to-start links, testimonials before the support card; v2.28.0
Publish Container / build (push) Successful in 15m26s
Publish Container / build (push) Successful in 15m26s
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed
1 parent
3cf7e02561
commit
2c342f14bd
4 files changed
+115
-138
No files matched your search
+72
-118
@@ -978,124 +978,35 @@
|
||||
}
|
||||
|
||||
/* ── About ── */
|
||||
.section-about {
|
||||
background: #0d0d0d;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.section-about .section-inner {
|
||||
max-width: 1160px;
|
||||
}
|
||||
|
||||
.about-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(340px, 420px) 1fr;
|
||||
gap: 4.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.about-photo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.about-photo img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 14px;
|
||||
box-shadow:
|
||||
0 12px 50px rgba(0, 0, 0, 0.55),
|
||||
0 0 0 1px rgba(201, 168, 76, 0.15);
|
||||
}
|
||||
|
||||
.about-photo-divider {
|
||||
width: 86%;
|
||||
height: 1px;
|
||||
margin: 0.3rem auto 0.45rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(201, 168, 76, 0),
|
||||
rgba(201, 168, 76, 0.6) 20%,
|
||||
rgba(201, 168, 76, 0.9) 50%,
|
||||
rgba(201, 168, 76, 0.6) 80%,
|
||||
rgba(201, 168, 76, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.about-nate-copy {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.about-nate-copy .eyebrow {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.about-nate-rule {
|
||||
width: 170px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--brand-gold), rgba(201, 168, 76, 0.18));
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.about-nate-copy p {
|
||||
font-family: var(--brand-font-body);
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.7;
|
||||
color: var(--brand-warm-white);
|
||||
margin: 0 0 1rem;
|
||||
padding: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.about-nate-cta {
|
||||
display: inline-block;
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--brand-gold);
|
||||
text-decoration: none;
|
||||
margin-top: 0.35rem;
|
||||
padding-bottom: 0.1rem;
|
||||
border-bottom: 1px solid rgba(201, 168, 76, 0.45);
|
||||
transition: color 180ms ease, border-color 180ms ease;
|
||||
}
|
||||
|
||||
.about-nate-cta:hover {
|
||||
color: var(--brand-warm-white);
|
||||
border-bottom-color: rgba(246, 232, 186, 0.85);
|
||||
}
|
||||
|
||||
.about-verse-art {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 1.1rem;
|
||||
border-radius: 14px;
|
||||
box-shadow:
|
||||
0 12px 50px rgba(0, 0, 0, 0.55),
|
||||
0 0 0 1px rgba(201, 168, 76, 0.15);
|
||||
}
|
||||
|
||||
.about-text h2 {
|
||||
font-family: var(--brand-font-heading);
|
||||
font-size: clamp(1.8rem, 3vw, 2.4rem);
|
||||
color: var(--brand-warm-white);
|
||||
margin: 0.5rem 0 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
font-family: var(--brand-font-body);
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.7;
|
||||
color: var(--brand-warm-white);
|
||||
margin: 0 0 1rem;
|
||||
padding: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ── Homepage Newsletter ── */
|
||||
.section-newsletter {
|
||||
@@ -7667,15 +7578,9 @@ a.study-track-card:hover {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.about-inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.about-photo {
|
||||
max-width: 260px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.series-card {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -13500,9 +13405,7 @@ a.study-track-card:hover {
|
||||
}
|
||||
|
||||
/* About copy was set larger than body text everywhere else */
|
||||
.about-inner p {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
|
||||
/* Nothing readable below 12px */
|
||||
.study-module-lesson,
|
||||
@@ -13553,9 +13456,7 @@ a.study-track-card:hover {
|
||||
font-size: clamp(1.4rem, 2.4vw, 1.625rem);
|
||||
}
|
||||
|
||||
.about-inner p {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ── Resources page (tabs + compact grids) ─────────────────────────────── */
|
||||
@@ -13750,3 +13651,56 @@ a.study-track-card:hover {
|
||||
.cx-row { grid-template-columns: minmax(0, 1fr); }
|
||||
}
|
||||
|
||||
/* ── About page ────────────────────────────────────────────────────────── */
|
||||
.ab-section { padding: 2.5rem 0 1.5rem; }
|
||||
.ab-intro { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
|
||||
.ab-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--brand-gold-dark); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); }
|
||||
.ab-intro-copy { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
|
||||
.ab-intro-copy .eyebrow { margin: 0; }
|
||||
.ab-bio { margin: 0; font-size: 1.1rem; line-height: 1.75; color: var(--brand-warm-white); max-width: 60ch; }
|
||||
.ab-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
|
||||
|
||||
.ab-show {
|
||||
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 2.5rem; align-items: center;
|
||||
margin-top: 3rem; padding: 2rem; border-radius: 16px;
|
||||
background: var(--brand-black-3); border: 1px solid var(--brand-border);
|
||||
}
|
||||
.ab-show-copy { display: flex; flex-direction: column; gap: 0.8rem; }
|
||||
.ab-show-copy .eyebrow { margin: 0; }
|
||||
#root > :not(.admin-shell) .ab-show-copy h2 { margin: 0; line-height: 1.15; }
|
||||
.ab-show-copy p:not(.eyebrow) { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--brand-muted); max-width: 60ch; }
|
||||
.ab-verse-art { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
|
||||
|
||||
.ab-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
|
||||
.ab-path {
|
||||
display: flex; flex-direction: column; gap: 0.35rem; padding: 1.15rem; text-decoration: none; color: inherit;
|
||||
background: transparent; border: 1px solid var(--brand-border); border-radius: 12px;
|
||||
transition: border-color 150ms, transform 150ms;
|
||||
}
|
||||
.ab-path:hover { border-color: var(--brand-gold-dark); transform: translateY(-2px); }
|
||||
.ab-path-title { font-family: var(--brand-font-heading); font-size: 1.35rem; font-weight: 600; color: var(--brand-warm-white); }
|
||||
.ab-path-text { font-size: 0.92rem; line-height: 1.5; color: var(--brand-muted); }
|
||||
.ab-path-go { margin-top: 0.2rem; font-size: 0.85rem; color: var(--brand-gold); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.ab-intro { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.75rem; }
|
||||
.ab-show { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; }
|
||||
.ab-verse-art { max-width: 420px; justify-self: center; }
|
||||
.ab-paths { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
|
||||
.ab-path { padding: 0.9rem 1rem; }
|
||||
.ab-path-go { display: none; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.ab-section { padding: 1.5rem 0 1rem; }
|
||||
.ab-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
|
||||
.ab-photo { max-width: 200px; aspect-ratio: 1 / 1; }
|
||||
.ab-bio { font-size: 1.02rem; }
|
||||
.ab-show { margin-top: 2rem; padding: 1.15rem; gap: 1.25rem; }
|
||||
.ab-cta-row .btn-primary, .ab-cta-row .btn-secondary { flex: 1 1 100%; justify-content: center; text-align: center; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.section-testimonials { padding-top: 2rem; padding-bottom: 2rem; }
|
||||
.cx-support { padding-bottom: 2rem; }
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user