/* ============================================================
Language Focus — Shared Stylesheet
Series: English Vocabulary Lessons (B1–C1)
============================================================
Usage:
Colour-coded use-tag system (extend as needed):
.use-tag-1 blue — topic / formal noun use
.use-tag-2 amber — problem / informal noun use
.use-tag-3 green — verb use / institutional
.use-tag-4 rose — available for 4th distinction
============================================================ */
/* ── Google Fonts (include in of each HTML file) ──────
─────────────────────────────────────────────────────────── */
/* ── Design Tokens ── */
:root {
/* Core purple palette */
--purple-deep: #2d1b4e;
--purple-mid: #4a2d7a;
--purple-accent: #7c4dba;
--purple-light: #b388e8;
--purple-wash: #f3ecfc;
--purple-tint: #f9f5ff;
/* Text */
--text-primary: #1e1e2f;
--text-secondary: #4a4a6a;
--text-light: #7a7a9a;
--white: #ffffff;
--border: #e2d8f0;
/* Callout / tip */
--highlight-bg: #fffbe6;
--highlight-border: #f0d960;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(45, 27, 78, 0.08);
--shadow-md: 0 4px 12px rgba(45, 27, 78, 0.10);
--shadow-lg: 0 8px 30px rgba(45, 27, 78, 0.12);
--radius: 10px;
/* Use-tag colour system */
--use1: #3a6ea8;
--use1-light: #e8f0fa;
--use1-border: #a8c4e8;
--use2: #7a6d2a;
--use2-light: #fdf8e8;
--use2-border: #d4c060;
--use3: #3a7a5a;
--use3-light: #e8f5ee;
--use3-border: #80c4a0;
--use4: #9a3a5a;
--use4-light: #faeaf0;
--use4-border: #d890aa;
}
/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* ── Base ── */
body {
font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
font-size: 17px;
line-height: 1.7;
color: var(--text-primary);
background: linear-gradient(175deg, var(--purple-wash) 0%, #f7f4fb 40%, var(--white) 100%);
min-height: 100vh;
}
.page-wrapper {
max-width: 820px;
margin: 0 auto;
padding: 20px 20px 60px;
}
/* ── Header ── */
.lesson-header {
background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 60%, var(--purple-accent) 100%);
border-radius: var(--radius);
padding: 40px 36px 32px;
margin-bottom: 32px;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.lesson-header::after {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(179, 136, 232, 0.15) 0%, transparent 70%);
border-radius: 50%;
}
.lesson-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--purple-light);
margin-bottom: 10px;
}
.lesson-title {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 700;
color: var(--white);
line-height: 1.3;
margin-bottom: 14px;
}
.lesson-title em {
font-style: italic;
color: var(--purple-light);
}
.lesson-subtitle {
font-size: 1.05rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
}
.lesson-subtitle strong {
color: var(--white);
font-weight: 600;
}
/* Optional POS badge row in header */
.pos-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.pos-badge {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 20px;
border: 1.5px solid rgba(255, 255, 255, 0.35);
color: rgba(255, 255, 255, 0.9);
}
/* ── Sections ── */
.section {
background: var(--white);
border-radius: var(--radius);
padding: 32px 30px;
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
}
.section-title {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 1.25rem;
font-weight: 700;
color: var(--purple-deep);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--purple-wash);
}
/* ── Tables ── */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -8px;
padding: 0 8px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
thead th {
background: var(--purple-deep);
color: var(--white);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 12px 16px;
text-align: left;
white-space: nowrap;
}
thead th:first-child { border-radius: 8px 0 0 0; }
thead th:last-child { border-radius: 0 8px 0 0; }
tbody td {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--purple-tint); }
td strong { color: var(--purple-mid); }
td em { color: var(--text-secondary); font-style: italic; }
/* ── Use-number tags (inline badges) ── */
.use-tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 10px;
margin-right: 6px;
vertical-align: middle;
}
.use-tag-1 { background: var(--use1-light); color: var(--use1); border: 1px solid var(--use1-border); }
.use-tag-2 { background: var(--use2-light); color: var(--use2); border: 1px solid var(--use2-border); }
.use-tag-3 { background: var(--use3-light); color: var(--use3); border: 1px solid var(--use3-border); }
.use-tag-4 { background: var(--use4-light); color: var(--use4); border: 1px solid var(--use4-border); }
/* ── Callout / tip boxes ── */
.tip-box {
background: var(--highlight-bg);
border-left: 4px solid var(--highlight-border);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 16px 20px;
margin: 20px 0;
font-size: 0.95rem;
line-height: 1.65;
}
.note-box {
background: var(--purple-tint);
border-left: 4px solid var(--purple-accent);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 16px 20px;
margin: 20px 0;
font-size: 0.95rem;
line-height: 1.65;
}
.note-box strong { color: var(--purple-mid); }
/* ── Example sentence groups ── */
.examples-group { margin-bottom: 28px; }
.examples-group:last-child { margin-bottom: 0; }
.examples-group-title {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--purple-accent); /* override per-use with .use1/.use2/.use3 */
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
/* Coloured dot — add inside title */
.examples-group-title .dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
background: currentColor;
}
/* Default dot (no use class) */
.examples-group-title::before {
content: '';
display: inline-block;
width: 10px; height: 10px;
background: var(--purple-accent);
border-radius: 50%;
flex-shrink: 0;
}
/* When using coloured use classes, suppress the default ::before dot */
.examples-group-title.use1,
.examples-group-title.use2,
.examples-group-title.use3,
.examples-group-title.use4 { color: inherit; }
.examples-group-title.use1 { color: var(--use1); }
.examples-group-title.use2 { color: var(--use2); }
.examples-group-title.use3 { color: var(--use3); }
.examples-group-title.use4 { color: var(--use4); }
.examples-group-title.use1::before,
.examples-group-title.use2::before,
.examples-group-title.use3::before,
.examples-group-title.use4::before { display: none; }
.example-list {
list-style: none;
padding: 0;
}
.example-list li {
padding: 10px 16px;
margin-bottom: 6px;
background: var(--purple-tint);
border-radius: 8px;
font-size: 0.97rem;
line-height: 1.6;
border-left: 3px solid var(--purple-light);
transition: background 0.2s ease;
}
.example-list li:hover { background: var(--purple-wash); }
.example-list li strong { color: var(--purple-mid); font-weight: 700; }
/* Coloured example lists (optional, per-use) */
.example-list.use1 li { background: var(--use1-light); border-color: var(--use1-border); }
.example-list.use1 li:hover { background: #d8e8f8; }
.example-list.use2 li { background: var(--use2-light); border-color: var(--use2-border); }
.example-list.use2 li:hover { background: #f5eed0; }
.example-list.use3 li { background: var(--use3-light); border-color: var(--use3-border); }
.example-list.use3 li:hover { background: #d0eadb; }
.example-list.use4 li { background: var(--use4-light); border-color: var(--use4-border); }
.example-list.use4 li:hover { background: #f0d8e4; }
.example-number {
display: inline-block;
font-weight: 700;
color: var(--purple-accent);
min-width: 26px;
font-size: 0.85rem;
}
/* ── Contrast cards (side-by-side comparisons) ── */
.contrast-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 20px 0;
}
.contrast-card {
border-radius: 8px;
padding: 16px 18px;
font-size: 0.94rem;
line-height: 1.6;
border: 1px solid var(--border);
background: var(--purple-tint);
}
.contrast-card .contrast-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 8px;
color: var(--purple-mid);
}
.contrast-card .contrast-sentence {
font-family: 'Libre Baskerville', Georgia, serif;
font-style: italic;
color: var(--text-primary);
margin-bottom: 6px;
font-size: 0.96rem;
}
.contrast-card .contrast-meaning {
font-size: 0.88rem;
color: var(--text-secondary);
}
/* Colour variants for contrast cards */
.contrast-card.use1 { background: var(--use1-light); border-color: var(--use1-border); }
.contrast-card.use1 .contrast-label { color: var(--use1); }
.contrast-card.use2 { background: var(--use2-light); border-color: var(--use2-border); }
.contrast-card.use2 .contrast-label { color: var(--use2); }
.contrast-card.use3 { background: var(--use3-light); border-color: var(--use3-border); }
.contrast-card.use3 .contrast-label { color: var(--use3); }
.contrast-card.use4 { background: var(--use4-light); border-color: var(--use4-border); }
.contrast-card.use4 .contrast-label { color: var(--use4); }
/* ── Collocations ── */
.collocation-block {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.collocation-block:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.collocation-label {
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 6px;
color: var(--purple-mid);
display: flex;
align-items: center;
gap: 8px;
}
.collocation-label.use1 { color: var(--use1); }
.collocation-label.use2 { color: var(--use2); }
.collocation-label.use3 { color: var(--use3); }
.collocation-label.use4 { color: var(--use4); }
.collocation-words {
font-style: italic;
color: var(--text-secondary);
font-size: 0.93rem;
margin-bottom: 10px;
padding: 8px 12px;
border-radius: 6px;
background: var(--purple-tint);
line-height: 1.5;
}
.collocation-words.use1 { background: var(--use1-light); }
.collocation-words.use2 { background: var(--use2-light); }
.collocation-words.use3 { background: var(--use3-light); }
.collocation-words.use4 { background: var(--use4-light); }
.collocation-examples {
list-style: none;
padding: 0;
}
.collocation-examples li {
padding: 6px 0 6px 20px;
position: relative;
font-size: 0.95rem;
color: var(--text-secondary);
}
.collocation-examples li::before {
content: '→';
position: absolute;
left: 0;
color: var(--purple-light);
font-weight: 700;
}
.collocation-examples li em {
font-style: italic;
color: var(--text-primary);
}
/* ── Summary (dark footer card) ── */
.summary-box {
background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
border-radius: var(--radius);
padding: 28px 30px;
color: var(--white);
}
.summary-box .section-title {
color: var(--white);
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.summary-text {
font-size: 1.05rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.9);
font-weight: 300;
}
.summary-text strong {
color: var(--purple-light);
font-weight: 600;
}
/* ── Responsive ── */
@media (max-width: 600px) {
.page-wrapper { padding: 12px 12px 40px; }
.lesson-header { padding: 28px 22px 24px; }
.section { padding: 22px 18px; }
.contrast-block { grid-template-columns: 1fr; }
table { font-size: 0.88rem; }
thead th, tbody td { padding: 10px 12px; }
.example-list li { padding: 9px 12px; }
}