/* ============================================================ SMA KEBANGSAAN — SITE STYLES Layout helpers + page patterns + tweak hooks. Loaded AFTER tokens/base/components. ============================================================ */ /* ---------------------------------------------------------- TWEAK HOOKS (driven by js/tweaks.js via ) ---------------------------------------------------------- */ :root { --accent: var(--color-gold-600); --accent-soft: var(--color-gold-100); --section-pad: var(--space-20); } [data-accent="gold"] { --accent: var(--color-gold-600); --accent-soft: var(--color-gold-100); } [data-accent="navy"] { --accent: var(--color-navy-primary); --accent-soft: var(--color-navy-100); } [data-accent="red"] { --accent: var(--color-red-700); --accent-soft: var(--color-red-100); } /* density → section rhythm */ [data-density="compact"] { --section-pad: var(--space-12); } [data-density="comfortable"] { --section-pad: var(--space-20); } [data-density="spacious"] { --section-pad: var(--space-32); } .section { padding-block: var(--section-pad); } /* accent recolors eyebrows + rules site-wide */ .section-header__eyebrow, .hero__eyebrow, .card__eyebrow.is-accent, .eyebrow { color: var(--accent); } .section-header__eyebrow::before, .hero__eyebrow::before { background-color: var(--accent); } /* CTA shape tweak (default = pill) */ [data-cta="rounded"] .btn { border-radius: var(--radius-md); } [data-cta="rounded"] .btn--lg { border-radius: var(--radius-lg); } [data-cta="rounded"] .btn--xl { border-radius: var(--radius-xl); } [data-cta="pill"] .btn { border-radius: var(--radius-full); } [data-cta="sharp"] .btn { border-radius: 0; } /* ---------------------------------------------------------- TRACK CARD ACCENTS — white card, recolored accent bar + CTA Track 1 navy-primary · Track 2 red-700 · Track 3 blue-sky ---------------------------------------------------------- */ .track-card--akademik::before { background-color: var(--color-navy-primary); } .track-card--pertahanan::before { background-color: var(--color-red-700); } .track-card--kepemimpinan::before { background-color: var(--color-blue-sky); } .track-card--akademik .track-card__cta { color: var(--color-navy-primary); } .track-card--pertahanan .track-card__cta { color: var(--color-red-700); } .track-card--kepemimpinan .track-card__cta { color: var(--color-blue-sky); } .track-card--akademik:hover { border-color: var(--color-navy-primary); } .track-card--pertahanan:hover { border-color: var(--color-red-700); } .track-card--kepemimpinan:hover { border-color: var(--color-blue-sky); } /* CTA primary color tweak: gold primary instead of navy */ [data-cta-primary="gold"] .btn--primary { background-color: var(--color-gold-600); color: var(--color-navy-primary); border-color: var(--color-gold-600); } [data-cta-primary="gold"] .btn--primary:hover { background-color: var(--color-gold-500); border-color: var(--color-gold-500); } /* ---------------------------------------------------------- data-fade — kept as a hook but visually a no-op so content is ALWAYS rendered (reliable across every renderer). ---------------------------------------------------------- */ /* ---------------------------------------------------------- GLOBAL PRIMITIVES ---------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); } .eyebrow--on-navy { color: var(--color-gold-yellow); } .lead { font-size: var(--text-md); color: var(--color-text-secondary); line-height: var(--leading-normal); max-width: 62ch; } /* anchor reset so cards/links inherit cleanly */ a.plain { color: inherit; text-decoration: none; } /* ---------------------------------------------------------- LOGO LOCKUP (nav + footer) ---------------------------------------------------------- */ .brand-lockup { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; } .brand-lockup__crest { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; } .brand-lockup__text { display: flex; flex-direction: column; line-height: 1.05; } .brand-lockup__name { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--color-neutral-0); letter-spacing: var(--tracking-tight); white-space: nowrap; } .brand-lockup__tagline { font-size: 0.6rem; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-gold-yellow); } /* ---------------------------------------------------------- NAV — dropdown extension on top of components.css .nav ---------------------------------------------------------- */ .nav__inner { padding-block: 0; } .nav__item { position: relative; } .nav__item > .nav__link { gap: var(--space-1); } .nav__caret { width: 14px; height: 14px; opacity: 0.7; transition: transform var(--duration-base); } .nav__item:hover .nav__caret { transform: rotate(180deg); } .nav__dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; background: var(--color-neutral-0); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--duration-base), transform var(--duration-base), visibility var(--duration-base); z-index: var(--z-dropdown); } .nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__drop-link { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-3); border-radius: var(--radius-md); text-decoration: none; transition: background var(--duration-fast); } .nav__drop-link:hover { background: var(--color-neutral-50); } .nav__drop-link strong { font-size: var(--text-sm); color: var(--color-navy-primary); font-weight: var(--font-weight-bold); font-family: var(--font-sans); } .nav__drop-link span { font-size: var(--text-xs); color: var(--color-text-muted); } .nav__drop-accent { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: var(--space-2); } @media (max-width: 768px) { .nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: var(--space-4); min-width: 0; background: transparent; } .nav__drop-link strong { color: var(--color-neutral-0); } .nav__caret { display: none; } } /* ---------------------------------------------------------- PAGE HERO (inner pages — navy band w/ breadcrumb) ---------------------------------------------------------- */ .page-hero { position: relative; background-color: var(--color-navy-primary); overflow: hidden; border-bottom: 2px solid var(--color-gold-600); } .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201,162,39,0.08) 0%, transparent 55%, rgba(139,26,26,0.05) 100%); pointer-events: none; } .page-hero__inner { position: relative; z-index: 1; padding-block: var(--space-16); } .page-hero--tall .page-hero__inner { padding-block: var(--space-20); } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; } .breadcrumb a, .breadcrumb span { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-neutral-300); text-decoration: none; } .breadcrumb a:hover { color: var(--color-gold-yellow); } .breadcrumb .sep { color: var(--color-navy-300); } .breadcrumb .current { color: var(--color-gold-yellow); } .page-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold-yellow); margin-bottom: var(--space-4); } .page-hero__title { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--color-neutral-0); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); max-width: 20ch; margin-bottom: var(--space-5); } .page-hero__title span { color: var(--color-gold-yellow); } .page-hero__desc { font-size: var(--text-md); color: var(--color-neutral-200); line-height: var(--leading-normal); max-width: 58ch; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); } @media (max-width: 640px) { .page-hero__title { font-size: var(--text-2xl); } } /* ---------------------------------------------------------- HOMEPAGE HERO LAYOUT VARIANTS (tweakable via [data-hero]) ---------------------------------------------------------- */ .home-hero { position: relative; background-color: var(--color-navy-primary); overflow: hidden; } .home-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201,162,39,0.07) 0%, transparent 50%, rgba(139,26,26,0.05) 100%); pointer-events: none; } .home-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: center; padding-block: var(--space-20); } .home-hero__content { max-width: 600px; } .home-hero__media { width: 100%; } .home-hero .image-slot, .home-hero image-slot { width: 100%; aspect-ratio: 4 / 5; display: block; } .home-hero__title { font-size: var(--text-4xl); font-weight: var(--font-weight-bold); color: var(--color-neutral-0); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-5); } .home-hero__title span { color: var(--color-gold-yellow); } .home-hero__sub { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--font-weight-medium); color: var(--color-gold-yellow); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-5); } .home-hero__desc { font-size: var(--text-md); color: var(--color-neutral-200); line-height: var(--leading-normal); margin-bottom: var(--space-8); max-width: 52ch; } .home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } /* dual-CTA helper labels */ .cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .cta-hint { font-size: var(--text-xs); color: var(--color-neutral-400); letter-spacing: var(--tracking-wide); } /* Variant: photo LEFT */ [data-hero="left"] .home-hero__inner { grid-template-columns: 0.95fr 1.05fr; } [data-hero="left"] .home-hero__media { order: -1; } /* Variant: FULL-BLEED background image */ [data-hero="full"] .home-hero__inner { grid-template-columns: 1fr; min-height: 600px; } [data-hero="full"] .home-hero__media { display: none; } [data-hero="full"] .home-hero__content { max-width: 640px; } [data-hero="full"] .home-hero__bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } [data-hero="full"] .home-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,42,114,0.94) 0%, rgba(0,42,114,0.82) 45%, rgba(0,42,114,0.45) 100%); } .home-hero__bg { display: none; } .home-hero__bg image-slot { width: 100%; height: 100%; } @media (max-width: 1024px) { .home-hero__inner { grid-template-columns: 1fr; gap: var(--space-10); } [data-hero="left"] .home-hero__media { order: 0; } .home-hero .image-slot, .home-hero image-slot { aspect-ratio: 16 / 9; } .home-hero__title { font-size: var(--text-3xl); } } @media (max-width: 640px) { .home-hero__title { font-size: var(--text-2xl); } .home-hero__inner { padding-block: var(--space-12); } } /* ---------------------------------------------------------- PHILOSOPHY CARDS (High Discipline / Care / Growth) ---------------------------------------------------------- */ .philo-card { border-radius: var(--radius-xl); padding: var(--space-8); color: var(--color-neutral-0); position: relative; overflow: hidden; min-height: 240px; display: flex; flex-direction: column; } .philo-card--navy { background: var(--color-navy-primary); } .philo-card--red { background: var(--color-red-800); } .philo-card--blue { background: var(--color-blue-sky); } .philo-card__num { font-family: var(--font-display); font-size: var(--text-2xl); color: rgba(255,255,255,0.18); font-weight: var(--font-weight-bold); line-height: 1; margin-bottom: var(--space-6); } .philo-card__title { font-size: var(--text-xl); color: var(--color-gold-yellow); margin-bottom: var(--space-3); } .philo-card__desc { font-size: var(--text-base); color: var(--color-neutral-200); line-height: var(--leading-normal); } /* Icon di philo-card: icon-only tanpa block warna, ikon jadi kuning terang — beda dari .icon-chip--gold default (dipakai di kontak/ppdb/dst) yang pakai block pucat, makanya di-scope ke .philo-card supaya tidak ikut ubah pemakaian lain. */ .philo-card .icon-chip--gold { background: transparent; color: var(--color-gold-yellow); } .philo-card .icon-chip--gold svg { width: 32px; height: 32px; } /* ---------------------------------------------------------- ICON CHIP (lucide glyphs) ---------------------------------------------------------- */ .icon-chip { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); } .icon-chip--navy { background: var(--color-navy-50); color: var(--color-navy-primary); } .icon-chip--gold { background: var(--color-gold-100); color: var(--color-gold-700); } .icon-chip--red { background: var(--color-red-100); color: var(--color-red-700); } .icon-chip svg { width: 22px; height: 22px; } /* feature row */ .feature-row { display: flex; gap: var(--space-4); align-items: flex-start; } .feature-row__body h4 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--color-navy-primary); margin-bottom: var(--space-1); } .feature-row__body p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); } /* ---------------------------------------------------------- CHECK LIST ---------------------------------------------------------- */ .check-list { display: flex; flex-direction: column; gap: var(--space-3); } .check-item { display: flex; gap: var(--space-3); align-items: flex-start; } .check-item svg { width: 20px; height: 20px; color: var(--color-success-bold); flex-shrink: 0; margin-top: 2px; } .check-item span { font-size: var(--text-base); color: var(--color-text-primary); line-height: var(--leading-normal); } /* ---------------------------------------------------------- STEPS (numbered process) ---------------------------------------------------------- */ .steps { display: flex; flex-direction: column; gap: 0; } .step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); padding-block: var(--space-6); border-bottom: 1px solid var(--color-border-subtle); } .step:last-child { border-bottom: none; } .step__num { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-navy-primary); color: var(--color-gold-yellow); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--text-md); flex-shrink: 0; } .step__title { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--color-navy-primary); margin-bottom: var(--space-2); } .step__desc { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-normal); text-align: justify; } /* ---------------------------------------------------------- FAQ ACCORDION ---------------------------------------------------------- */ .faq { border-top: 1px solid var(--color-border-subtle); } .faq__item { border-bottom: 1px solid var(--color-border-subtle); } .faq__q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--color-navy-primary); cursor: pointer; } .faq__q svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; transition: transform var(--duration-base); } .faq__item.is-open .faq__q svg { transform: rotate(45deg); } .faq__a { max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--ease-default); } .faq__a-inner { padding-bottom: var(--space-5); font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-normal); max-width: 70ch; } /* ---------------------------------------------------------- DAY TIMELINE (asrama schedule, 2-col) ---------------------------------------------------------- */ .day-grid { display: grid; grid-template-columns: 120px 1fr; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .day-time { background: var(--color-navy-primary); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-bottom: 1px solid var(--color-navy-600); } .day-time:last-of-type { border-bottom: none; } .day-time__num { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-gold-yellow); font-weight: var(--font-weight-bold); } .day-time__lbl { font-size: var(--text-xs); color: var(--color-neutral-400); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .day-cell { padding: var(--space-6); border-bottom: 1px solid var(--color-border-subtle); } .day-cell:last-of-type { border-bottom: none; } .day-cell h4 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--color-navy-primary); margin-bottom: var(--space-2); } .day-cell p { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-normal); text-align: justify; } @media (max-width: 640px) { .day-grid { grid-template-columns: 88px 1fr; } .day-cell, .day-time { padding: var(--space-4); } } /* ---------------------------------------------------------- QUOTE BLOCK (founder) ---------------------------------------------------------- */ .quote-block { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; } .quote-block__photo { width: 160px; height: 200px; border-radius: var(--radius-lg); overflow: hidden; border: 3px solid var(--color-gold-600); flex-shrink: 0; } .quote-block__photo image-slot, .quote-block__photo .image-slot { width: 100%; height: 100%; } .quote-block__text { } .quote-block__mark { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--color-gold-300); line-height: 0.5; } .quote-block__quote { font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; color: var(--color-navy-primary); line-height: var(--leading-snug); margin-bottom: var(--space-5); } .quote-block__attr { font-size: var(--text-sm); color: var(--color-text-secondary); } .quote-block__attr strong { color: var(--color-navy-primary); display: block; font-size: var(--text-base); } @media (max-width: 640px) { .quote-block { grid-template-columns: 1fr; gap: var(--space-5); } .quote-block__photo { width: 120px; height: 150px; } } /* ---------------------------------------------------------- PROFILE CARDS (leadership / alumni) ---------------------------------------------------------- */ .profile-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition-base); } .profile-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .profile-card__photo { aspect-ratio: 1 / 1; background: var(--color-neutral-100); } .profile-card__photo image-slot, .profile-card__photo .image-slot { width: 100%; height: 100%; } .profile-card__body { padding: var(--space-5); } .profile-card__name { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--color-navy-primary); margin-bottom: var(--space-1); } .profile-card__role { font-size: var(--text-sm); color: var(--accent); font-weight: var(--font-weight-medium); margin-bottom: var(--space-3); } .profile-card__bio { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); text-align: justify; } /* ---------------------------------------------------------- IMAGE SLOT — brand styling for empty state (component empty-state is dark-on-light by default; style its shadow parts, and add a light variant for dark sections) ---------------------------------------------------------- */ image-slot { border-radius: var(--radius-lg); overflow: hidden; } image-slot::part(ring) { border-color: rgba(0,42,114,0.22); } image-slot::part(empty) { color: var(--color-navy-primary); } .slot-on-dark image-slot::part(frame) { background: rgba(255,255,255,0.05); } .slot-on-dark image-slot::part(ring) { border-color: rgba(201,162,39,0.55); } .slot-on-dark image-slot::part(empty) { color: rgba(255,255,255,0.72); } /* ---------------------------------------------------------- PLACEHOLDER NOTE (data to be confirmed) ---------------------------------------------------------- */ .ph { color: var(--color-text-muted); font-style: italic; } .placeholder-tag { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-warning-text); background: var(--color-warning-bg); padding: 2px var(--space-2); border-radius: var(--radius-sm); } /* ---------------------------------------------------------- CTA BAND (closing) ---------------------------------------------------------- */ .cta-band { background: var(--color-navy-primary); border-top: 3px solid var(--color-gold-600); position: relative; overflow: hidden; } .cta-band--blue { background: var(--color-blue-sky); } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(201,162,39,0.12), transparent 55%); pointer-events: none; } .cta-band__inner { position: relative; z-index: 1; text-align: center; padding-block: var(--space-16); } .cta-band__title { font-size: var(--text-2xl); color: var(--color-neutral-0); margin-bottom: var(--space-4); } .cta-band__title span { color: var(--color-gold-yellow); } .cta-band__desc { font-size: var(--text-md); color: var(--color-neutral-200); line-height: var(--leading-normal); max-width: 54ch; margin: 0 auto var(--space-8); } .cta-band__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; } /* ---------------------------------------------------------- MISC HELPERS ---------------------------------------------------------- */ .divider-rule { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-6); } .divider-rule::before, .divider-rule::after { content: ''; flex: 1; height: 1px; background: var(--color-border-subtle); } .divider-rule span { font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold-600); } .pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); } .stat-block { text-align: center; } .stat-block__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--color-navy-primary); line-height: 1; margin-bottom: var(--space-2); } .stat-block__value--gold { color: var(--color-gold-600); } .stat-block__label { font-size: var(--text-sm); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* number callout on navy */ .stat-on-navy .stat-item__value { font-family: var(--font-display); } /* responsive table → stack handled by overflow scroll in components.css */ /* generic two-column intro */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; } .split--media-right .split__media { order: 1; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-8); } .split--media-right .split__media { order: 0; } } .split__media image-slot, .split__media .image-slot { width: 100%; aspect-ratio: 4/3; } /* utility spacing */ .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .maxw-prose { max-width: 68ch; } /* gallery grid */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .gallery__caption p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); text-align: justify; margin-top: var(--space-1); } .gallery image-slot, .gallery .image-slot { width: 100%; aspect-ratio: 4/3; } @media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } } /* article body (berita detail) */ .article-body p { margin-bottom: var(--space-4); line-height: var(--leading-normal); color: var(--color-text-secondary); } .article-body p:last-child { margin-bottom: 0; } .article-media { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-lg); }