/* ============================================================
CHINA FINDS — Design System v1.0
Brand: 现代东方·精选策展 (Modern Oriental Curated Discovery)
Author: UI Designer
Standards: WCAG AA | Mobile-first | Performance-optimized
============================================================ */
/* ———————————————————-
1. DESIGN TOKENS (CSS Custom Properties)
———————————————————- */
:root {
/* ── Color Palette ─────────────────────────────────── */
/* Primary: 暖朱红 — 温暖可信，不过分刺激 (WCAG AA vs white) */
–cf-red-50: #FDF2F2;
–cf-red-100: #FBE5E5;
–cf-red-200: #F4C0C0;
–cf-red-300: #E88E8E;
–cf-red-400: #D95B5B;
–cf-red-500: #C83C3C; /* Brand Primary */
–cf-red-600: #A82E2E;
–cf-red-700: #872424;
–cf-red-800: #661A1A;
–cf-red-900: #4A1212;
/* Secondary: 暖墨蓝 — 沉稳、信任感 */
–cf-ink-50: #F5F6F8;
–cf-ink-100: #E8EBF0;
–cf-ink-200: #C8CFD9;
–cf-ink-300: #9BA6B5;
–cf-ink-400: #6B7A8D;
–cf-ink-500: #4A5568; /* Body text */
–cf-ink-600: #3D4852;
–cf-ink-700: #2D3748; /* Headings */
–cf-ink-800: #1E2532;
–cf-ink-900: #141821;
/* Accent: 暖金色 — 点缀、高亮 */
–cf-gold-50: #FDFAF3;
–cf-gold-100: #F9F2DC;
–cf-gold-200: #F0DFAA;
–cf-gold-300: #E5C878;
–cf-gold-400: #D4A853;
–cf-gold-500: #C5943A;
–cf-gold-600: #A6782E;
/* Neutral: 纸白系 */
–cf-paper: #FAFAF7; /* Page bg — warm white */
–cf-white: #FFFFFF; /* Card bg */
–cf-border: #E8E5DF; /* Subtle borders */
/* Semantic */
–cf-success: #2D8B4E;
–cf-warning: #C5832A;
–cf-error: #C83C3C;
–cf-info: #3B7ABF;
/* ── Typography ────────────────────────────────────── */
–ff-heading: ‘Playfair Display’, ‘Noto Serif SC’, Georgia, ‘Times New Roman’, serif;
–ff-body: ‘Inter’, ‘Noto Sans SC’, system-ui, -apple-system, ‘Segoe UI’, sans-serif;
–ff-mono: ‘JetBrains Mono’, ‘Courier New’, monospace;
/* Font sizes — 1.25 modular scale */
–fs-xs: 0.75rem; /* 12px */
–fs-sm: 0.875rem; /* 14px */
–fs-base: 1rem; /* 16px */
–fs-lg: 1.125rem; /* 18px */
–fs-xl: 1.25rem; /* 20px */
–fs-2xl: 1.5rem; /* 24px */
–fs-3xl: 1.875rem; /* 30px */
–fs-4xl: 2.25rem; /* 36px */
–fs-5xl: 3rem; /* 48px */
/* Line heights */
–lh-tight: 1.2;
–lh-snug: 1.4;
–lh-normal: 1.6;
–lh-relaxed: 1.75;
/* Font weights */
–fw-normal: 400;
–fw-medium: 500;
–fw-semibold: 600;
–fw-bold: 700;
/* ── Spacing — 4px base unit ───────────────────────── */
–sp-1: 0.25rem; /* 4px */
–sp-2: 0.5rem; /* 8px */
–sp-3: 0.75rem; /* 12px */
–sp-4: 1rem; /* 16px */
–sp-5: 1.25rem; /* 20px */
–sp-6: 1.5rem; /* 24px */
–sp-8: 2rem; /* 32px */
–sp-10: 2.5rem; /* 40px */
–sp-12: 3rem; /* 48px */
–sp-16: 4rem; /* 64px */
–sp-20: 5rem; /* 80px */
–sp-24: 6rem; /* 96px */
/* ── Border Radius ─────────────────────────────────── */
–radius-sm: 0.375rem; /* 6px */
–radius-md: 0.5rem; /* 8px */
–radius-lg: 0.75rem; /* 12px */
–radius-xl: 1rem; /* 16px */
–radius-full: 9999px;
/* ── Shadows ───────────────────────────────────────── */
–shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
–shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
–shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
–shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
–shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
–shadow-gold: 0 4px 20px -4px rgb(212 168 83 / 0.25);
/* ── Transitions ───────────────────────────────────── */
–ease-out: cubic-bezier(0.16, 1, 0.3, 1);
–ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
–duration-150: 150ms;
–duration-300: 300ms;
–duration-500: 500ms;
/* ── Layout ────────────────────────────────────────── */
–max-width: 1280px;
–content-width: 780px;
}
/* ———————————————————-
2. RESET & BASE
———————————————————- */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(–ff-body);
font-size: var(–fs-base);
line-height: var(–lh-normal);
color: var(–cf-ink-500);
background-color: var(–cf-paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(–cf-red-600);
text-decoration: none;
transition: color var(–duration-150) var(–ease-out);
}
a:hover {
color: var(–cf-red-500);
text-decoration: underline;
}
/* Focus ring — accessible, beautiful */
:focus-visible {
outline: 2.5px solid var(–cf-red-400);
outline-offset: 3px;
border-radius: 2px;
}
/* ———————————————————-
3. TYPOGRAPHY
———————————————————- */
h1, h2, h3, h4, h5, h6 {
font-family: var(–ff-heading);
font-weight: var(–fw-bold);
line-height: var(–lh-tight);
color: var(–cf-ink-700);
margin: 0 0 var(–sp-4);
}
h1 { font-size: var(–fs-5xl); letter-spacing: -0.02em; }
h2 { font-size: var(–fs-3xl); letter-spacing: -0.01em; }
h3 { font-size: var(–fs-2xl); }
h4 { font-size: var(–fs-xl); }
.section-label {
display: inline-block;
font-family: var(–ff-body);
font-size: var(–fs-sm);
font-weight: var(–fw-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(–cf-red-500);
margin-bottom: var(–sp-2);
}
p {
margin: 0 0 var(–sp-4);
}
.lead {
font-size: var(–fs-lg);
line-height: var(–lh-relaxed);
color: var(–cf-ink-400);
}
/* ———————————————————-
4. SKIP LINK (Accessibility)
———————————————————- */
.skip-link {
position: absolute;
top: -100%;
left: var(–sp-4);
background: var(–cf-ink-800);
color: var(–cf-white);
padding: var(–sp-2) var(–sp-4);
border-radius: var(–radius-sm);
font-size: var(–fs-sm);
font-weight: var(–fw-medium);
z-index: 9999;
transition: top var(–duration-150) var(–ease-out);
}
.skip-link:focus {
top: var(–sp-2);
}
/* ———————————————————-
5. NAVIGATION
Redesigned: single bar, logical grouping, responsive
———————————————————- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgb(255 255 255 / 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(–cf-border);
transition: box-shadow var(–duration-300) var(–ease-out);
}
.site-header.scrolled {
box-shadow: var(–shadow-md);
}
.nav-container {
max-width: var(–max-width);
margin: 0 auto;
padding: 0 var(–sp-6);
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
}
/* Logo */
.nav-logo {
flex-shrink: 0;
}
.nav-logo img {
height: 38px;
width: auto;
}
/* Primary nav links */
.nav-links {
display: flex;
align-items: center;
gap: var(–sp-1);
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
display: inline-flex;
align-items: center;
padding: var(–sp-2) var(–sp-3);
font-size: var(–fs-sm);
font-weight: var(–fw-medium);
color: var(–cf-ink-500);
border-radius: var(–radius-md);
transition: all var(–duration-150) var(–ease-out);
text-decoration: none;
}
.nav-links a:hover {
color: var(–cf-ink-800);
background: var(–cf-ink-50);
}
.nav-links a.active {
color: var(–cf-red-500);
background: var(–cf-red-50);
}
/* Utility nav (account, cart) — right side */
.nav-utils {
display: flex;
align-items: center;
gap: var(–sp-3);
}
.nav-utils .icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(–radius-full);
color: var(–cf-ink-500);
transition: all var(–duration-150) var(–ease-out);
text-decoration: none;
}
.nav-utils .icon-btn:hover {
background: var(–cf-ink-50);
color: var(–cf-ink-800);
}
.nav-cart-count {
position: absolute;
top: -2px;
right: -4px;
background: var(–cf-red-500);
color: var(–cf-white);
font-size: 0.625rem;
font-weight: var(–fw-bold);
width: 18px;
height: 18px;
border-radius: var(–radius-full);
display: flex;
align-items: center;
justify-content: center;
}
/* Mobile hamburger */
.nav-toggle {
display: none;
width: 40px;
height: 40px;
border: none;
background: none;
padding: 8px;
cursor: pointer;
border-radius: var(–radius-md);
}
.nav-toggle span {
display: block;
width: 100%;
height: 2px;
background: var(–cf-ink-600);
border-radius: 2px;
transition: all var(–duration-300) var(–ease-out);
}
.nav-toggle span + span {
margin-top: 6px;
}
.nav-toggle.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* Mobile menu */
@media (max-width: 899px) {
.nav-toggle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.nav-links {
position: fixed;
top: 68px;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
background: var(–cf-white);
padding: var(–sp-6);
gap: var(–sp-1);
transform: translateX(100%);
transition: transform var(–duration-300) var(–ease-out);
overflow-y: auto;
}
.nav-links.open {
transform: translateX(0);
}
.nav-links a {
width: 100%;
padding: var(–sp-3) var(–sp-4);
font-size: var(–fs-base);
border-radius: var(–radius-md);
}
.nav-utils {
margin-left: auto;
}
}
/* ———————————————————-
6. HERO SECTION — Compact Search Banner
Slim top bar: logo tagline + search, minimal height so content
feed dominates the first viewport.
———————————————————- */
.hero {
position: relative;
padding: var(–sp-8) 0 var(–sp-6);
text-align: center;
background: linear-gradient(180deg, var(–cf-white) 0%, var(–cf-paper) 100%);
border-bottom: 1px solid var(–cf-border);
}
.hero-container {
max-width: 840px;
margin: 0 auto;
padding: 0 var(–sp-6);
position: relative;
z-index: 1;
}
.hero .hero-tagline {
display: inline-flex;
align-items: center;
gap: var(–sp-2);
font-size: var(–fs-sm);
font-weight: var(–fw-semibold);
color: var(–cf-red-500);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(–sp-4);
}
.hero .hero-tagline::before,
.hero .hero-tagline::after {
content: ”;
width: 24px;
height: 1px;
background: var(–cf-red-200);
}
/* Hero Search Bar */
.hero-search {
max-width: 640px;
margin: 0 auto;
position: relative;
}
.search-box {
position: relative;
display: flex;
align-items: center;
background: var(–cf-white);
border: 2px solid var(–cf-border);
border-radius: var(–radius-full);
padding: var(–sp-1) var(–sp-1) var(–sp-1) var(–sp-5);
box-shadow: var(–shadow-md);
transition: all var(–duration-300) var(–ease-out);
}
.search-box:focus-within {
border-color: var(–cf-red-300);
box-shadow: 0 4px 24px rgb(200 60 60 / 0.12), var(–shadow-md);
}
.search-box .search-icon {
color: var(–cf-ink-300);
flex-shrink: 0;
margin-right: var(–sp-3);
}
.search-box .search-icon svg {
width: 22px;
height: 22px;
}
.search-box input[type=”search”] {
flex: 1;
border: none;
background: transparent;
font-family: var(–ff-body);
font-size: var(–fs-base);
color: var(–cf-ink-700);
padding: var(–sp-3) 0;
outline: none;
}
.search-box input[type=”search”]::placeholder {
color: var(–cf-ink-300);
}
.search-box .search-btn {
flex-shrink: 0;
padding: var(–sp-3) var(–sp-6);
font-family: var(–ff-body);
font-size: var(–fs-sm);
font-weight: var(–fw-semibold);
color: var(–cf-white);
background: var(–cf-red-500);
border: none;
border-radius: var(–radius-full);
cursor: pointer;
transition: all var(–duration-150) var(–ease-out);
}
.search-box .search-btn:hover {
background: var(–cf-red-600);
box-shadow: 0 2px 12px rgb(200 60 60 / 0.35);
}
/* Search suggestions (dropdown) */
.search-suggestions {
position: absolute;
top: calc(100% + var(–sp-2));
left: 0;
right: 0;
background: var(–cf-white);
border: 1px solid var(–cf-border);
border-radius: var(–radius-lg);
box-shadow: var(–shadow-lg);
padding: var(–sp-2);
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: all var(–duration-300) var(–ease-out);
z-index: 10;
}
.search-box:focus-within ~ .search-suggestions,
.search-box:focus-within + .search-suggestions {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.search-suggestions a {
display: flex;
align-items: center;
gap: var(–sp-3);
padding: var(–sp-3) var(–sp-4);
border-radius: var(–radius-md);
font-size: var(–fs-sm);
color: var(–cf-ink-500);
text-decoration: none;
transition: background var(–duration-150);
}
.search-suggestions a:hover {
background: var(–cf-red-50);
color: var(–cf-red-600);
}
.search-suggestions a .search-match {
color: var(–cf-ink-700);
font-weight: var(–fw-semibold);
}
/* Popular tags below search */
.search-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(–sp-2);
margin-top: var(–sp-6);
}
.search-tags span {
font-size: var(–fs-sm);
color: var(–cf-ink-300);
margin-right: var(–sp-1);
}
.search-tags a {
display: inline-flex;
padding: var(–sp-1) var(–sp-3);
font-size: var(–fs-xs);
font-weight: var(–fw-medium);
color: var(–cf-ink-400);
background: var(–cf-ink-50);
border-radius: var(–radius-full);
text-decoration: none;
transition: all var(–duration-150) var(–ease-out);
}
.search-tags a:hover {
background: var(–cf-red-50);
color: var(–cf-red-500);
}
/* ———————————————————-
7. SECTION LAYOUT (Shared)
———————————————————- */
.section {
padding: var(–sp-20) 0;
}
.section-container {
max-width: var(–max-width);
margin: 0 auto;
padding: 0 var(–sp-6);
}
.section-header {
text-align: center;
margin-bottom: var(–sp-12);
}
.section-header h2 {
margin-bottom: var(–sp-3);
}
.section-header p {
font-size: var(–fs-lg);
color: var(–cf-ink-400);
max-width: 600px;
margin: 0 auto;
}
/* ———————————————————-
8. VALUE PROPOSITIONS — “Why Read China Finds?”
———————————————————- */
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(–sp-6);
}
.value-card {
text-align: center;
padding: var(–sp-6) var(–sp-4);
background: var(–cf-white);
border-radius: var(–radius-lg);
border: 1px solid var(–cf-border);
transition: all var(–duration-300) var(–ease-out);
}
.value-card:hover {
box-shadow: var(–shadow-lg);
transform: translateY(-3px);
border-color: transparent;
}
.value-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(–radius-lg);
margin-bottom: var(–sp-4);
background: var(–cf-red-50);
color: var(–cf-red-500);
}
.value-icon svg {
width: 28px;
height: 28px;
}
.value-card h4 {
font-family: var(–ff-body);
font-size: var(–fs-base);
font-weight: var(–fw-semibold);
color: var(–cf-ink-700);
margin-bottom: var(–sp-2);
}
.value-card p {
font-size: var(–fs-sm);
color: var(–cf-ink-400);
line-height: var(–lh-relaxed);
margin: 0;
}
/* ———————————————————-
9. CATEGORY CARDS — “Browse by Category”
———————————————————- */
.categories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(–sp-5);
}
.category-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(–sp-8) var(–sp-4);
background: var(–cf-white);
border-radius: var(–radius-lg);
border: 1px solid var(–cf-border);
text-decoration: none;
transition: all var(–duration-300) var(–ease-out);
overflow: hidden;
}
.category-card::before {
content: ”;
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(–cf-red-50) 0%, transparent 100%);
opacity: 0;
transition: opacity var(–duration-300) var(–ease-out);
}
.category-card:hover {
border-color: var(–cf-red-200);
box-shadow: var(–shadow-lg);
transform: translateY(-4px);
}
.category-card:hover::before {
opacity: 1;
}
.category-card > * {
position: relative;
z-index: 1;
}
.cat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: var(–radius-xl);
margin-bottom: var(–sp-4);
background: var(–cf-ink-50);
color: var(–cf-ink-500);
transition: all var(–duration-300) var(–ease-out);
}
.category-card:hover .cat-icon {
background: var(–cf-red-100);
color: var(–cf-red-500);
transform: scale(1.08);
}
.cat-icon svg {
width: 32px;
height: 32px;
}
.category-card h3 {
font-family: var(–ff-body);
font-size: var(–fs-base);
font-weight: var(–fw-semibold);
color: var(–cf-ink-700);
margin-bottom: var(–sp-1);
}
.category-card p {
font-size: var(–fs-sm);
color: var(–cf-ink-400);
margin: 0;
line-height: var(–lh-snug);
}
/* ———————————————————-
10. CONTENT FEED — “Latest Finds” (Homepage)
Video, Article, Product introduction cards
———————————————————- */
/* Tabs / Filter Bar */
.content-tabs {
display: flex;
justify-content: center;
gap: var(–sp-1);
margin-bottom: var(–sp-10);
flex-wrap: wrap;
}
.content-tab {
display: inline-flex;
align-items: center;
gap: var(–sp-2);
padding: var(–sp-2) var(–sp-5);
font-family: var(–ff-body);
font-size: var(–fs-sm);
font-weight: var(–fw-medium);
color: var(–cf-ink-400);
background: transparent;
border: 1.5px solid transparent;
border-radius: var(–radius-full);
cursor: pointer;
text-decoration: none;
transition: all var(–duration-150) var(–ease-out);
}
.content-tab:hover {
color: var(–cf-ink-600);
background: var(–cf-ink-50);
}
.content-tab.active {
color: var(–cf-red-500);
background: var(–cf-red-50);
border-color: var(–cf-red-200);
font-weight: var(–fw-semibold);
}
.content-tab .tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
font-size: 0.65rem;
font-weight: var(–fw-bold);
color: var(–cf-ink-300);
background: var(–cf-ink-100);
border-radius: var(–radius-full);
transition: all var(–duration-150);
}
.content-tab.active .tab-badge {
color: var(–cf-red-600);
background: var(–cf-red-200);
}
/* Feed Grid */
.content-feed {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(–sp-6);
}
/* Base Content Card */
.content-card {
display: flex;
flex-direction: column;
background: var(–cf-white);
border-radius: var(–radius-xl);
border: 1px solid var(–cf-border);
overflow: hidden;
text-decoration: none;
transition: all var(–duration-300) var(–ease-out);
}
.content-card:hover {
border-color: transparent;
box-shadow: var(–shadow-xl);
transform: translateY(-5px);
}
.content-card:hover .card-media img {
transform: scale(1.06);
}
.content-card:hover .card-title {
color: var(–cf-red-600);
}
/* Card Media (thumbnail / video cover) */
.card-media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(–cf-ink-50);
}
.card-media img,
.card-media .media-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(–duration-500) var(–ease-out);
}
/* Video play button overlay */
.card-media .play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 0.15);
transition: background var(–duration-300) var(–ease-out);
}
.content-card:hover .card-media .play-overlay {
background: rgb(0 0 0 / 0.08);
}
.play-overlay .play-btn {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: rgb(255 255 255 / 0.95);
border-radius: var(–radius-full);
box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
transition: all var(–duration-300) var(–ease-out);
}
.play-overlay .play-btn svg {
width: 20px;
height: 20px;
margin-left: 3px;
color: var(–cf-red-500);
}
.content-card:hover .play-btn {
transform: scale(1.12);
background: var(–cf-white);
}
/* Video duration badge */
.duration-badge {
position: absolute;
bottom: var(–sp-2);
right: var(–sp-2);
background: rgb(0 0 0 / 0.75);
color: var(–cf-white);
font-size: var(–fs-xs);
font-weight: var(–fw-semibold);
padding: var(–sp-1) var(–sp-2);
border-radius: var(–radius-sm);
backdrop-filter: blur(4px);
}
/* Card Body */
.card-body {
display: flex;
flex-direction: column;
gap: var(–sp-2);
padding: var(–sp-5);
flex: 1;
}
.card-meta {
display: flex;
align-items: center;
gap: var(–sp-2);
font-size: var(–fs-xs);
font-weight: var(–fw-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.card-meta .type-tag {
display: inline-flex;
align-items: center;
gap: 3px;
}
.card-meta .type-tag–video { color: var(–cf-red-500); }
.card-meta .type-tag–article { color: var(–cf-gold-500); }
.card-meta .type-tag–product { color: var(–cf-info); }
.card-meta .card-date {
color: var(–cf-ink-300);
}
.card-title {
font-family: var(–ff-heading);
font-size: var(–fs-lg);
font-weight: var(–fw-bold);
line-height: var(–lh-snug);
color: var(–cf-ink-700);
margin: 0;
transition: color var(–duration-150) var(–ease-out);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-excerpt {
font-size: var(–fs-sm);
color: var(–cf-ink-400);
line-height: var(–lh-normal);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Card Footer — author, stats */
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(–sp-5) var(–sp-5);
margin-top: auto;
}
.card-author {
display: flex;
align-items: center;
gap: var(–sp-2);
}
.author-avatar {
width: 28px;
height: 28px;
border-radius: var(–radius-full);
background: var(–cf-red-100);
display: flex;
align-items: center;
justify-content: center;
font-size: var(–fs-xs);
font-weight: var(–fw-bold);
color: var(–cf-red-500);
}
.author-name {
font-size: var(–fs-xs);
font-weight: var(–fw-medium);
color: var(–cf-ink-300);
}
.card-stats {
display: flex;
align-items: center;
gap: var(–sp-3);
font-size: var(–fs-xs);
color: var(–cf-ink-300);
}
.card-stats span {
display: inline-flex;
align-items: center;
gap: 3px;
}
/* Featured / Large card variant (spans 2 cols) */
.content-card–featured {
grid-column: span 2;
flex-direction: row;
}
.content-card–featured .card-media {
aspect-ratio: auto;
width: 55%;
min-height: 280px;
}
.content-card–featured .card-body {
width: 45%;
justify-content: center;
padding: var(–sp-8);
}
.content-card–featured .card-title {
font-size: var(–fs-2xl);
}
.content-card–featured .card-excerpt {
font-size: var(–fs-base);
-webkit-line-clamp: 3;
}
/* Load More Button */
.feed-loadmore {
display: flex;
justify-content: center;
margin-top: var(–sp-12);
}
/* ———————————————————-
11. LATEST REVIEW
———————————————————- */
.review-section {
background: var(–cf-white);
}
.review-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(–sp-8);
align-items: center;
background: var(–cf-white);
}
.review-image {
position: relative;
border-radius: var(–radius-xl);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(–cf-ink-50);
}
.review-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(–duration-500) var(–ease-out);
}
.review-card:hover .review-image img {
transform: scale(1.04);
}
.review-content {
display: flex;
flex-direction: column;
gap: var(–sp-3);
}
.review-meta {
display: flex;
align-items: center;
gap: var(–sp-3);
font-size: var(–fs-xs);
font-weight: var(–fw-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.review-category-tag {
color: var(–cf-red-500);
background: var(–cf-red-50);
padding: var(–sp-1) var(–sp-2);
border-radius: var(–radius-sm);
}
.review-date {
color: var(–cf-ink-300);
}
.review-content h3 {
font-size: var(–fs-2xl);
margin-bottom: 0;
}
.review-content .review-excerpt {
color: var(–cf-ink-400);
line-height: var(–lh-relaxed);
}
/* ———————————————————-
11. CTA SECTION — “Can’t Find It?”
———————————————————- */
.cta-section {
position: relative;
background: var(–cf-ink-800);
color: var(–cf-white);
text-align: center;
overflow: hidden;
}
.cta-section::before {
content: ”;
position: absolute;
top: -30%;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgb(200 60 60 / 0.15) 0%, transparent 70%);
pointer-events: none;
}
.cta-section h2 {
color: var(–cf-white);
}
.cta-section .cta-text {
font-size: var(–fs-lg);
color: var(–cf-ink-200);
max-width: 640px;
margin: 0 auto var(–sp-8);
line-height: var(–lh-relaxed);
}
/* ———————————————————-
12. BUTTONS
———————————————————- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(–sp-2);
font-family: var(–ff-body);
font-weight: var(–fw-semibold);
border: none;
cursor: pointer;
text-decoration: none;
transition: all var(–duration-300) var(–ease-out);
user-select: none;
white-space: nowrap;
&:focus-visible {
outline: 2.5px solid var(–cf-red-400);
outline-offset: 3px;
}
}
/* Sizes */
.btn–sm { padding: var(–sp-2) var(–sp-4); font-size: var(–fs-sm); border-radius: var(–radius-md); }
.btn–md { padding: var(–sp-3) var(–sp-6); font-size: var(–fs-base); border-radius: var(–radius-md); }
.btn–lg { padding: var(–sp-4) var(–sp-8); font-size: var(–fs-lg); border-radius: var(–radius-lg); }
/* Variants */
.btn–primary {
background: var(–cf-red-500);
color: var(–cf-white);
box-shadow: 0 2px 8px rgb(200 60 60 / 0.25);
}
.btn–primary:hover {
background: var(–cf-red-600);
box-shadow: 0 4px 16px rgb(200 60 60 / 0.35);
transform: translateY(-1px);
}
.btn–gold {
background: var(–cf-gold-400);
color: var(–cf-ink-800);
box-shadow: var(–shadow-gold);
}
.btn–gold:hover {
background: var(–cf-gold-500);
transform: translateY(-1px);
}
.btn–outline {
background: transparent;
color: var(–cf-ink-600);
border: 1.5px solid var(–cf-border);
}
.btn–outline:hover {
border-color: var(–cf-red-300);
color: var(–cf-red-500);
background: var(–cf-red-50);
}
.btn–ghost {
background: transparent;
color: var(–cf-red-600);
padding-left: var(–sp-2);
padding-right: var(–sp-2);
}
.btn–ghost:hover {
color: var(–cf-red-500);
}
/* Text link with arrow */
.text-link {
display: inline-flex;
align-items: center;
gap: var(–sp-2);
font-weight: var(–fw-semibold);
color: var(–cf-red-600);
text-decoration: none;
transition: gap var(–duration-300) var(–ease-out);
}
.text-link:hover {
gap: var(–sp-3);
text-decoration: none;
}
.text-link svg {
transition: transform var(–duration-300) var(–ease-out);
}
.text-link:hover svg {
transform: translateX(3px);
}
/* ———————————————————-
13. FOOTER
———————————————————- */
.site-footer {
background: var(–cf-ink-800);
color: var(–cf-ink-200);
padding: var(–sp-16) 0 var(–sp-8);
}
.footer-container {
max-width: var(–max-width);
margin: 0 auto;
padding: 0 var(–sp-6);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(–sp-8);
margin-bottom: var(–sp-12);
}
.footer-brand p {
font-size: var(–fs-sm);
color: var(–cf-ink-300);
line-height: var(–lh-relaxed);
margin-bottom: var(–sp-4);
max-width: 280px;
}
.footer-brand .footer-logo {
height: 32px;
width: auto;
margin-bottom: var(–sp-4);
filter: brightness(0) invert(1);
}
/* Footer column */
.footer-col h4 {
font-family: var(–ff-body);
font-size: var(–fs-sm);
font-weight: var(–fw-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(–cf-white);
margin-bottom: var(–sp-4);
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-col li + li {
margin-top: var(–sp-2);
}
.footer-col a {
font-size: var(–fs-sm);
color: var(–cf-ink-300);
text-decoration: none;
transition: color var(–duration-150) var(–ease-out);
}
.footer-col a:hover {
color: var(–cf-gold-300);
}
/* Footer bottom */
.footer-bottom {
border-top: 1px solid rgb(255 255 255 / 0.08);
padding-top: var(–sp-6);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(–sp-4);
}
.footer-bottom p {
font-size: var(–fs-xs);
color: var(–cf-ink-300);
margin: 0;
}
.footer-bottom a {
color: var(–cf-ink-300);
}
.footer-bottom a:hover {
color: var(–cf-gold-300);
}
/* Social links */
.footer-social {
display: flex;
gap: var(–sp-3);
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(–radius-full);
border: 1px solid rgb(255 255 255 / 0.12);
color: var(–cf-ink-300);
transition: all var(–duration-150) var(–ease-out);
}
.footer-social a:hover {
background: rgb(255 255 255 / 0.08);
color: var(–cf-gold-300);
border-color: rgb(255 255 255 / 0.2);
}
.footer-social svg {
width: 16px;
height: 16px;
}
/* Scroll to top */
.scroll-top {
position: fixed;
bottom: var(–sp-6);
right: var(–sp-6);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(–cf-ink-800);
color: var(–cf-white);
border: none;
border-radius: var(–radius-full);
cursor: pointer;
box-shadow: var(–shadow-lg);
opacity: 0;
transform: translateY(12px);
transition: all var(–duration-300) var(–ease-out);
z-index: 50;
}
.scroll-top.visible {
opacity: 1;
transform: translateY(0);
}
.scroll-top:hover {
background: var(–cf-red-500);
transform: translateY(-2px);
}
.scroll-top svg {
width: 20px;
height: 20px;
}
/* ———————————————————-
14. SVG ICON SYSTEM (replace emojis)
Inline usage:
———————————————————- */
.icon {
width: 24px;
height: 24px;
stroke: none;
fill: currentColor;
flex-shrink: 0;
vertical-align: middle;
}
/* Icon defs sprite — include once on page */
.icon-sprite {
display: none;
}
/* ———————————————————-
15. RESPONSIVE BREAKPOINTS
———————————————————- */
/* Tablet (768px–1023px) */
@media (max-width: 1023px) {
:root {
–fs-5xl: 2.25rem; /* 36px */
–fs-3xl: 1.625rem; /* 26px */
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
.categories-grid {
grid-template-columns: repeat(2, 1fr);
}
.review-card {
grid-template-columns: 1fr;
gap: var(–sp-6);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.hero {
padding: var(–sp-6) 0 var(–sp-5);
}
/* Content Feed — Tablet */
.content-feed {
grid-template-columns: repeat(2, 1fr);
}
.content-card–featured {
grid-column: span 2;
}
}
/* Mobile (up to 767px) */
@media (max-width: 767px) {
:root {
–fs-5xl: 1.875rem; /* 30px */
–fs-3xl: 1.5rem; /* 24px */
–fs-xl: 1.125rem; /* 18px */
}
.nav-container {
padding: 0 var(–sp-4);
}
.section-container {
padding: 0 var(–sp-4);
}
.section {
padding: var(–sp-12) 0;
}
.section-header {
margin-bottom: var(–sp-8);
}
.values-grid {
grid-template-columns: 1fr 1fr;
}
.value-card {
padding: var(–sp-4) var(–sp-3);
}
.value-icon {
width: 44px;
height: 44px;
}
.value-icon svg {
width: 22px;
height: 22px;
}
.categories-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(–sp-3);
}
.category-card {
padding: var(–sp-5) var(–sp-3);
}
.cat-icon {
width: 48px;
height: 48px;
}
.cat-icon svg {
width: 24px;
height: 24px;
}
.hero-search {
max-width: 100%;
}
.search-box {
padding-left: var(–sp-4);
}
.search-box .search-btn {
padding: var(–sp-2) var(–sp-4);
}
/* Content Feed — Mobile */
.content-feed {
grid-template-columns: 1fr;
}
.content-card–featured {
grid-column: span 1;
flex-direction: column;
}
.content-card–featured .card-media {
width: 100%;
min-height: auto;
aspect-ratio: 16 / 9;
}
.content-card–featured .card-body {
width: 100%;
padding: var(–sp-5);
}
.content-card–featured .card-title {
font-size: var(–fs-lg);
}
.content-card–featured .card-excerpt {
font-size: var(–fs-sm);
}
.content-tabs {
gap: var(–sp-1);
}
.content-tab {
padding: var(–sp-2) var(–sp-3);
font-size: var(–fs-xs);
}
.footer-grid {
grid-template-columns: 1fr;
gap: var(–sp-6);
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
/* Small mobile (up to 479px) */
@media (max-width: 479px) {
.values-grid {
grid-template-columns: 1fr;
}
.categories-grid {
grid-template-columns: 1fr 1fr;
}
.search-box input[type=”search”] {
font-size: var(–fs-sm);
}
}
/* ———————————————————-
16. ANIMATIONS
———————————————————- */
/* Fade in on scroll */
.animate-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s var(–ease-out), transform 0.6s var(–ease-out);
}
.animate-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger children */
.stagger-children > * {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s var(–ease-out), transform 0.5s var(–ease-out);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 560ms; }
.stagger-children.visible > * {
opacity: 1;
transform: translateY(0);
}
/* Skeleton loading */
.skeleton {
background: linear-gradient(
90deg,
var(–cf-ink-50) 25%,
var(–cf-ink-100) 50%,
var(–cf-ink-50) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: var(–radius-sm);
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Pulse for new/badge items */
@keyframes pulse-soft {
0%, 100% { box-shadow: 0 0 0 0 rgb(200 60 60 / 0.3); }
50% { box-shadow: 0 0 0 8px rgb(200 60 60 / 0); }
}
.pulse-badge {
animation: pulse-soft 2s infinite;
}
/* ———————————————————-
17. REDUCED MOTION (Accessibility)
———————————————————- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.category-card:hover {
transform: none;
}
.value-card:hover {
transform: none;
}
.hero-cat-btn:hover {
transform: none;
}
}
/* ———————————————————-
18. PRINT STYLES
———————————————————- */
@media print {
.site-header,
.site-footer,
.scroll-top,
.hero::before,
.hero::after,
.cta-section::before {
display: none !important;
}
body {
background: white;
color: black;
font-size: 12pt;
line-height: 1.5;
}
a {
color: black;
text-decoration: underline;
}
.section {
padding: 1rem 0;
break-inside: avoid;
}
}