/* ============================================================
BRISK ACADEMY — Landing Page CSS
For use with MiniCourseGenerator
Brand: Brisk Teaching | Audience: Teachers
HOW TO USE:
- Paste this into MiniCourseGenerator's Custom CSS field
- Upload your header image and reference it where noted
- Replace placeholder href="#" values with real course URLs
============================================================ */
/* ── GOOGLE FONTS ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter+Tight:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');
/* ── BRAND TOKENS ───────────────────────────────────────── */
:root {
--teal: #06465C;
--teal-mid: #296C81;
--teal-light: #1a5a72;
--aqua: #6FFFE7;
--mint: #B7FFF3;
--spark: #E6FF8A;
--lime: #D4E988;
--dark: #0E151C;
--stone: #FAF9F6;
--white: #FFFFFF;
--maroon: #6E1841;
--magenta: #A43369;
--lavender: #A5BEF4;
--slate: #565B61;
--border: rgba(6, 70, 92, 0.12);
--font-display: 'Anton', sans-serif;
--font-tight: 'Inter Tight', sans-serif;
--font-body: 'Inter', sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 100px;
--max-width: 1100px;
--gutter: 48px;
}
/* ── GLOBAL RESET ───────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-body);
background-color: var(--stone);
color: var(--dark);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
/* ── HEADER IMAGE ───────────────────────────────────────── */
/*
MiniCourseGenerator: insert your header image block above
the course grid. The image should be full-width.
The selector below styles whatever element MCG uses for
the hero/banner image — adjust the selector to match MCG's
actual class name if needed.
*/
.mcg-header,
.page-header,
.lp-header,
.header-image,
.hero-image,
.banner,
[class*="header"] > img,
body > header img,
.mcg-cover img {
width: 100%;
display: block;
object-fit: cover;
/* Remove any default margins MCG might add */
margin: 0 !important;
padding: 0 !important;
}
/* ── COLOR STRIPE ───────────────────────────────────────── */
/*
Place a
just below your
header image in MCG's content blocks.
*/
.brisk-stripe {
display: flex;
width: 100%;
height: 6px;
}
.brisk-stripe::before {
content: '';
flex: 1;
background: linear-gradient(
90deg,
var(--teal) 0%, var(--teal) 14.28%,
var(--aqua) 14.28%, var(--aqua) 28.57%,
var(--mint) 28.57%, var(--mint) 42.86%,
var(--spark) 42.86%, var(--spark) 57.14%,
var(--lime) 57.14%, var(--lime) 71.43%,
var(--magenta) 71.43%, var(--magenta) 85.71%,
var(--maroon) 85.71%, var(--maroon) 100%
);
}
/* ── SECTION WRAPPER ────────────────────────────────────── */
/*
Wrap each major section in MCG's content block system.
These classes target MCG's generic section/container
wrappers — adjust if MCG uses different class names.
*/
.brisk-section {
padding: 64px var(--gutter);
max-width: var(--max-width);
margin: 0 auto;
}
/* ── SECTION HEADINGS ───────────────────────────────────── */
.brisk-eyebrow {
font-family: var(--font-tight);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-mid);
margin-bottom: 8px;
display: block;
}
.brisk-section-title {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 48px);
text-transform: uppercase;
color: var(--teal);
line-height: 1;
margin-bottom: 12px;
}
.brisk-section-desc {
font-family: var(--font-body);
font-size: 15px;
color: var(--slate);
max-width: 600px;
line-height: 1.65;
margin-bottom: 40px;
}
/* ── COURSE GRID ────────────────────────────────────────── */
/*
MCG renders courses as cards automatically.
These styles target MCG's course grid + card elements.
Common MCG selectors are listed; adjust to match your
MCG theme's actual class names.
*/
.mcg-courses-grid,
.courses-grid,
.lp-courses,
.course-list,
[class*="courses-grid"],
[class*="course-grid"] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
padding: 0;
list-style: none;
}
/* Individual course card */
.mcg-course-card,
.course-card,
.lp-course-item,
[class*="course-card"],
[class*="course-item"] {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1.5px solid var(--border);
display: flex;
flex-direction: column;
transition: transform 0.18s ease, box-shadow 0.18s ease;
cursor: pointer;
}
.mcg-course-card:hover,
.course-card:hover,
.lp-course-item:hover,
[class*="course-card"]:hover,
[class*="course-item"]:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(6, 70, 92, 0.12);
}
/* Course thumbnail */
.mcg-course-card img,
.course-card img,
[class*="course-card"] img,
[class*="course-item"] img,
[class*="course-thumb"],
[class*="course-image"] {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
/* Course body / text area */
[class*="course-body"],
[class*="course-content"],
[class*="course-info"],
.mcg-course-card > div:not(:first-child) {
padding: 20px 20px 24px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Course title */
[class*="course-title"],
.mcg-course-card h2,
.mcg-course-card h3,
.course-card h2,
.course-card h3 {
font-family: var(--font-tight);
font-size: 17px;
font-weight: 700;
color: var(--dark);
line-height: 1.25;
margin: 0;
}
/* Course description */
[class*="course-desc"],
[class*="course-description"],
.mcg-course-card p,
.course-card p {
font-family: var(--font-body);
font-size: 14px;
color: var(--slate);
line-height: 1.6;
flex: 1;
margin: 0;
}
/* Course CTA / enroll button */
[class*="course-btn"],
[class*="enroll-btn"],
[class*="start-btn"],
.mcg-course-card a,
.course-card a {
display: inline-block;
margin-top: 12px;
font-family: var(--font-tight);
font-size: 13px;
font-weight: 700;
color: var(--teal);
text-decoration: none;
border-bottom: 2px solid var(--aqua);
padding-bottom: 1px;
width: fit-content;
background: transparent;
border-top: none;
border-left: none;
border-right: none;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
[class*="course-btn"]:hover,
[class*="enroll-btn"]:hover,
[class*="start-btn"]:hover,
.mcg-course-card a:hover,
.course-card a:hover {
color: var(--maroon);
border-bottom-color: var(--magenta);
}
/* ── COURSE CATEGORY TAGS ───────────────────────────────── */
/*
If MCG supports category labels on cards, these styles
will format them as Brisk-branded pills.
*/
[class*="course-tag"],
[class*="course-category"],
[class*="course-label"] {
display: inline-block;
font-family: var(--font-tight);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
background: var(--mint);
color: var(--teal);
padding: 3px 10px;
border-radius: var(--radius-pill);
width: fit-content;
margin-bottom: 4px;
}
/* ── SECTION DIVIDER ────────────────────────────────────── */
.brisk-divider,
hr.brisk-divider {
border: none;
height: 1.5px;
background: linear-gradient(90deg, var(--aqua), var(--spark), var(--mint));
margin: 0 var(--gutter);
opacity: 0.5;
}
/* ── RESOURCE HUB SECTION ───────────────────────────────── */
/*
Add a section below your courses with class="brisk-hub-bg"
in MCG's custom HTML block.
*/
.brisk-hub-bg {
background: var(--teal);
position: relative;
overflow: hidden;
padding: 64px var(--gutter);
}
/* Decorative arc for hub — CSS-only using pseudo-element */
.brisk-hub-bg::before {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 380px;
height: 380px;
border-radius: 50%;
border: 20px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.brisk-hub-bg::after {
content: '';
position: absolute;
top: 20px;
right: 20px;
width: 260px;
height: 260px;
border-radius: 50%;
border: 20px solid rgba(255, 255, 255, 0.06);
pointer-events: none;
}
.brisk-hub-inner {
max-width: var(--max-width);
margin: 0 auto;
position: relative;
z-index: 1;
}
.brisk-hub-bg .brisk-eyebrow { color: var(--aqua); }
.brisk-hub-bg .brisk-section-title { color: var(--white); }
.brisk-hub-bg .brisk-section-desc {
color: rgba(255, 255, 255, 0.75);
}
/* Hub grid */
.brisk-hub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
margin-top: 40px;
}
/* Hub category card */
.brisk-hub-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-md);
padding: 20px 22px 24px;
}
.brisk-hub-card-title {
font-family: var(--font-tight);
font-size: 15px;
font-weight: 700;
color: var(--white);
margin-bottom: 14px;
display: block;
}
/* Hub link list */
.brisk-hub-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.brisk-hub-links li a {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--mint);
text-decoration: none;
line-height: 1.4;
display: flex;
align-items: flex-start;
gap: 6px;
transition: color 0.15s ease;
}
.brisk-hub-links li a:hover {
color: var(--spark);
}
.brisk-hub-links li a::before {
content: '→';
font-size: 12px;
margin-top: 1px;
flex-shrink: 0;
color: var(--aqua);
}
.brisk-hub-note {
font-family: var(--font-body);
font-size: 12px;
color: rgba(255, 255, 255, 0.40);
margin-top: 12px;
font-style: italic;
}
/* ── MCG GLOBAL OVERRIDES ───────────────────────────────── */
/*
These override common MCG default styles that might
conflict with the Brisk brand.
*/
/* Page background */
.lp-wrapper,
.page-wrapper,
[class*="lp-wrap"],
[class*="page-wrap"] {
background-color: var(--stone) !important;
}
/* Remove MCG default hero padding if using header image */
.lp-hero,
.page-hero,
[class*="lp-hero"],
[class*="page-hero"] {
padding: 0 !important;
margin: 0 !important;
background: none !important;
}
/* MCG default page title — hide it since header image has the title */
.lp-title,
.page-title,
[class*="lp-title"],
[class*="page-title"] {
display: none;
}
/* MCG section containers */
.lp-section,
.page-section,
[class*="lp-section"],
[class*="page-section"] {
max-width: var(--max-width);
margin: 0 auto;
padding: 64px var(--gutter);
}
/* ── FOOTER ─────────────────────────────────────────────── */
.lp-footer,
.page-footer,
[class*="lp-footer"],
[class*="page-footer"] {
background: var(--dark) !important;
color: var(--white) !important;
padding: 28px var(--gutter) !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
}
.lp-footer a,
.page-footer a,
[class*="lp-footer"] a,
[class*="page-footer"] a {
color: var(--aqua) !important;
}
/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
:root { --gutter: 24px; }
.mcg-courses-grid,
.courses-grid,
[class*="courses-grid"],
[class*="course-grid"] {
grid-template-columns: 1fr;
}
.brisk-hub-grid {
grid-template-columns: 1fr;
}
.brisk-hub-bg {
padding: 48px var(--gutter);
}
}
@media (max-width: 480px) {
.brisk-section-title {
font-size: 28px;
}
}