Make homepage study card admin-editable with NEW tag controls
This commit is contained in:
nmemmert
+485
@@ -267,6 +267,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: transparent;
|
||||
color: var(--brand-warm-white);
|
||||
font-family: var(--brand-font-body);
|
||||
font-weight: 500;
|
||||
@@ -965,6 +966,490 @@
|
||||
font-size: 0.97rem;
|
||||
}
|
||||
|
||||
.home-jump-card--featured {
|
||||
border-color: rgba(201, 168, 76, 0.38);
|
||||
background: linear-gradient(180deg, rgba(201, 168, 76, 0.1), rgba(12, 12, 11, 0.96));
|
||||
}
|
||||
|
||||
.home-jump-card--featured:hover {
|
||||
border-color: rgba(201, 168, 76, 0.55);
|
||||
background: linear-gradient(180deg, rgba(201, 168, 76, 0.16), rgba(14, 14, 12, 0.98));
|
||||
}
|
||||
|
||||
.home-jump-featured-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.home-jump-new-tag {
|
||||
display: inline-block;
|
||||
padding: 0.12rem 0.48rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(201, 168, 76, 0.7);
|
||||
background: rgba(201, 168, 76, 0.22);
|
||||
color: #f4e3b0;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* ── Colossians Study ── */
|
||||
.study-index-page,
|
||||
.study-section-page {
|
||||
background:
|
||||
radial-gradient(1200px 500px at 90% -10%, rgba(201, 168, 76, 0.12), transparent 55%),
|
||||
radial-gradient(900px 450px at 0% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
|
||||
#090909;
|
||||
}
|
||||
|
||||
.section-study-course-hero {
|
||||
padding: 4.5rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.study-course-hero-inner {
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
.study-course-hero-copy {
|
||||
max-width: 66ch;
|
||||
margin: 0.85rem 0 1.5rem;
|
||||
color: var(--brand-muted);
|
||||
}
|
||||
|
||||
.study-course-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.study-course-meta span {
|
||||
padding: 0.4rem 0.65rem;
|
||||
border: 1px solid rgba(201, 168, 76, 0.28);
|
||||
border-radius: 999px;
|
||||
color: var(--brand-warm-white);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.study-course-hero-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.section-study-hub-flow {
|
||||
padding: 0.5rem 0 0.25rem;
|
||||
}
|
||||
|
||||
.study-hub-flow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.study-hub-flow-card {
|
||||
padding: 1rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(201, 168, 76, 0.16);
|
||||
background: rgba(16, 16, 14, 0.86);
|
||||
}
|
||||
|
||||
.study-hub-flow-card h3 {
|
||||
margin: 0.25rem 0 0.4rem;
|
||||
font-family: var(--brand-font-heading);
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
|
||||
.study-hub-flow-card p:last-child {
|
||||
margin: 0;
|
||||
color: var(--brand-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.section-study-syllabus {
|
||||
padding: 0.5rem 0 0.25rem;
|
||||
}
|
||||
|
||||
.study-syllabus-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem 1.5rem;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.study-syllabus-header h2 {
|
||||
margin: 0;
|
||||
font-family: var(--brand-font-heading);
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
|
||||
.study-syllabus-header p {
|
||||
margin: 0;
|
||||
color: var(--brand-muted);
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.section-study-module {
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
|
||||
.study-module-header {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.study-module-header p {
|
||||
margin: 0;
|
||||
color: var(--brand-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.study-module-header h2 {
|
||||
margin: 0.35rem 0 0;
|
||||
font-family: var(--brand-font-heading);
|
||||
font-size: clamp(1.32rem, 2.1vw, 1.85rem);
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
|
||||
.study-module-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.study-module-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.15fr 0.85fr;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.05rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(201, 168, 76, 0.14);
|
||||
background: rgba(17, 17, 15, 0.84);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.study-module-row:hover {
|
||||
border-color: rgba(201, 168, 76, 0.35);
|
||||
background: rgba(28, 27, 23, 0.92);
|
||||
}
|
||||
|
||||
.study-module-row--disabled,
|
||||
.study-module-row--disabled:hover {
|
||||
border-style: dashed;
|
||||
border-color: rgba(201, 168, 76, 0.22);
|
||||
background: rgba(13, 13, 11, 0.78);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.study-module-row-left h3 {
|
||||
margin: 0.25rem 0 0.4rem;
|
||||
font-family: var(--brand-font-heading);
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
|
||||
.study-module-lesson {
|
||||
margin: 0;
|
||||
color: var(--brand-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.11em;
|
||||
font-size: 0.73rem;
|
||||
}
|
||||
|
||||
.study-module-row-left p:last-child,
|
||||
.study-module-row-right p:last-child {
|
||||
margin: 0;
|
||||
color: var(--brand-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.study-module-row-right {
|
||||
border-left: 1px solid rgba(201, 168, 76, 0.18);
|
||||
padding-left: 0.9rem;
|
||||
}
|
||||
|
||||
.study-section-reference {
|
||||
margin: 0 0 0.2rem;
|
||||
color: var(--brand-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.study-module-focus {
|
||||
margin: 0 0 0.2rem;
|
||||
color: var(--brand-warm-white);
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.section-study-classroom {
|
||||
padding: 3.75rem 0 1.75rem;
|
||||
}
|
||||
|
||||
.study-classroom-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.study-detail-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.9rem;
|
||||
color: var(--brand-gold);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.study-lesson-label {
|
||||
margin: 0;
|
||||
color: var(--brand-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.73rem;
|
||||
}
|
||||
|
||||
.study-classroom-main h1 {
|
||||
margin: 0.35rem 0 0;
|
||||
}
|
||||
|
||||
.study-detail-reference {
|
||||
margin: 0.55rem 0 0;
|
||||
color: var(--brand-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.study-detail-summary {
|
||||
max-width: 70ch;
|
||||
margin: 0.85rem 0 0;
|
||||
color: var(--brand-muted);
|
||||
}
|
||||
|
||||
.study-class-block {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(201, 168, 76, 0.14);
|
||||
background: rgba(18, 18, 16, 0.86);
|
||||
}
|
||||
|
||||
.study-class-block h2 {
|
||||
margin: 0 0 0.7rem;
|
||||
font-family: var(--brand-font-heading);
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
|
||||
.study-audio-embed-wrap {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(201, 168, 76, 0.2);
|
||||
}
|
||||
|
||||
.study-detail-copy--scripture {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.study-detail-copy,
|
||||
.study-detail-list {
|
||||
margin: 0;
|
||||
color: var(--brand-muted);
|
||||
}
|
||||
|
||||
.study-detail-list {
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
.study-detail-list li + li {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.study-classroom-sidebar {
|
||||
position: sticky;
|
||||
top: 5.75rem;
|
||||
}
|
||||
|
||||
.study-class-side-block {
|
||||
margin-bottom: 0.85rem;
|
||||
padding: 1rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(201, 168, 76, 0.14);
|
||||
background: rgba(18, 18, 16, 0.86);
|
||||
}
|
||||
|
||||
.study-class-side-block h3 {
|
||||
margin: 0 0 0.7rem;
|
||||
font-family: var(--brand-font-heading);
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
|
||||
.study-class-side-block p {
|
||||
margin: 0;
|
||||
color: var(--brand-muted);
|
||||
}
|
||||
|
||||
.study-class-side-block p + p {
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.study-auth-box,
|
||||
.study-notes-box {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.study-auth-box label {
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--brand-gold);
|
||||
}
|
||||
|
||||
.study-auth-box input,
|
||||
.study-notes-box textarea {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(201, 168, 76, 0.26);
|
||||
background: rgba(10, 10, 9, 0.9);
|
||||
color: var(--brand-warm-white);
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.5;
|
||||
padding: 0.6rem 0.65rem;
|
||||
}
|
||||
|
||||
.study-auth-box input:focus,
|
||||
.study-notes-box textarea:focus {
|
||||
outline: 1px solid rgba(201, 168, 76, 0.65);
|
||||
border-color: rgba(201, 168, 76, 0.5);
|
||||
}
|
||||
|
||||
.study-auth-actions {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.study-auth-actions .btn-primary,
|
||||
.study-auth-actions .btn-secondary {
|
||||
min-width: 126px;
|
||||
}
|
||||
|
||||
.study-auth-actions .btn-secondary {
|
||||
background: rgba(15, 15, 13, 0.86);
|
||||
}
|
||||
|
||||
.study-notes-user {
|
||||
color: var(--brand-gold) !important;
|
||||
font-size: 0.86rem;
|
||||
letter-spacing: 0.04em;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.study-note-status {
|
||||
margin-top: 0.65rem;
|
||||
color: var(--brand-muted);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.study-detail-nav {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.study-detail-nav .btn-secondary {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.study-nav-placeholder {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.section-study-homework {
|
||||
padding: 0.2rem 0 4rem;
|
||||
}
|
||||
|
||||
.study-homework-card {
|
||||
padding: 1rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(201, 168, 76, 0.2);
|
||||
background: linear-gradient(180deg, rgba(201, 168, 76, 0.12), rgba(20, 20, 18, 0.92));
|
||||
}
|
||||
|
||||
.study-homework-card h2 {
|
||||
margin: 0 0 0.65rem;
|
||||
font-family: var(--brand-font-heading);
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
|
||||
.study-homework-card p {
|
||||
margin: 0;
|
||||
color: var(--brand-muted);
|
||||
}
|
||||
|
||||
.study-homework-note {
|
||||
margin-top: 0.6rem !important;
|
||||
font-size: 0.92rem;
|
||||
color: var(--brand-gold) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.study-classroom-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.study-classroom-sidebar {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.study-hub-flow-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.study-module-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.study-module-row-right {
|
||||
border-left: none;
|
||||
border-top: 1px solid rgba(201, 168, 76, 0.18);
|
||||
padding-left: 0;
|
||||
padding-top: 0.7rem;
|
||||
}
|
||||
|
||||
.study-detail-nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.study-auth-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.study-auth-actions .btn-primary,
|
||||
.study-auth-actions .btn-secondary {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Episode Detail Page ── */
|
||||
.section-episode-detail {
|
||||
background: var(--brand-black);
|
||||
|
||||
Reference in New Issue
Block a user