/* ============================================================ COURSEMARK — Redesigned CSS Inspired by Udemy / Skillshare — warm amber + deep navy Drop this file into your css/ folder, replacing style.css ============================================================ */ /* ── Google Fonts import (add to or keep as-is) ─────── */ @import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap"); /* ── CSS Custom Properties ─────────────────────────────────── */ :root { /* Brand palette */ --clr-navy: #0f1724; --clr-navy-mid: #1a2638; --clr-navy-soft: #253348; --clr-amber: #f59e0b; --clr-amber-light: #fbbf24; --clr-amber-pale: #fef3c7; --clr-teal: #14b8a6; --clr-rose: #f43f5e; /* Neutrals */ --clr-white: #ffffff; --clr-offwhite: #f8f7f4; --clr-muted: #64748b; --clr-border: #e2e8f0; --clr-text: #1e293b; --clr-text-light: #475569; /* Typography */ --font-display: "Sora", sans-serif; --font-body: "DM Sans", sans-serif; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Layout */ --max-w: 1200px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-amber: 0 4px 24px rgba(245, 158, 11, 0.3); /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 220ms; } /* ── Reset & Base ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--clr-text); background: var(--clr-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid rgba(245, 158, 11, 0.45); outline-offset: 3px; } /* ── Utility ────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-md); } .badge { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--clr-amber); color: var(--clr-navy); } .eyebrow { display: inline-block; margin-bottom: var(--space-xs); color: #b45309; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* ── ════════════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════════════ */ nav { position: sticky; top: 0; z-index: 100; background: var(--clr-navy); border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: var(--space-lg); padding: 0 var(--space-md); height: 64px; } nav > * { min-width: 0; } .logo { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--clr-white); letter-spacing: -0.02em; flex-shrink: 0; } .logo span { color: var(--clr-amber); } nav ul { display: flex; gap: var(--space-sm); align-items: center; flex: 1; } nav ul li a { font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); padding: 6px 10px; border-radius: var(--radius-sm); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } nav ul li a:hover { color: var(--clr-white); background: rgba(255, 255, 255, 0.07); } .login-btn { margin-left: auto; flex-shrink: 0; font-size: 0.875rem; font-weight: 600; color: var(--clr-navy); background: var(--clr-amber); padding: 8px 22px; border-radius: var(--radius-pill); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); border: 0; } .login-btn:hover { background: var(--clr-amber-light); box-shadow: var(--shadow-amber); } .nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; } .nav-actions .login-btn { margin-left: 0; } .nav-login-link { font-size: 0.875rem; font-weight: 600; color: var(--clr-white); padding: 8px 10px; } .nav-login-link:hover { color: var(--clr-amber); } .btn-primary, .card-action, .price-action-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border: 0; border-radius: var(--radius-sm); background: var(--clr-amber); color: var(--clr-navy); font-weight: 700; line-height: 1.2; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn-primary:hover, .card-action:hover, .price-action-link:hover { background: var(--clr-amber-light); transform: translateY(-1px); } .card-action { width: calc(100% - (2 * var(--space-sm))); margin: 4px var(--space-sm) var(--space-sm); background: var(--clr-navy); color: var(--clr-white); } /* ── ════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════ */ .hero { background: radial-gradient( ellipse 80% 60% at 60% 20%, rgba(245, 158, 11, 0.12) 0%, transparent 65% ), radial-gradient( ellipse 60% 80% at 10% 80%, rgba(20, 184, 166, 0.08) 0%, transparent 60% ), var(--clr-navy); color: var(--clr-white); padding: var(--space-2xl) var(--space-md); text-align: center; position: relative; overflow: hidden; } /* Subtle grid lines */ .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .hero .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-amber); margin-bottom: var(--space-sm); } .hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; max-width: 760px; margin-inline: auto; margin-bottom: var(--space-sm); } .hero h1 em { font-style: normal; color: var(--clr-amber); } .hero > p { font-size: 1.125rem; color: rgba(255, 255, 255, 0.68); max-width: 540px; margin-inline: auto; margin-bottom: var(--space-lg); } /* Search bar */ .search-panel { display: flex; max-width: 560px; margin-inline: auto; margin-bottom: var(--space-md); background: var(--clr-white); border-radius: var(--radius-pill); overflow: hidden; box-shadow: var(--shadow-lg); } .search-panel input[type="search"] { flex: 1; border: none; outline: none; padding: 14px 20px; font-family: var(--font-body); font-size: 0.95rem; color: var(--clr-text); background: transparent; } .search-panel button { background: var(--clr-amber); color: var(--clr-navy); font-weight: 700; font-size: 0.875rem; padding: 14px 28px; border: none; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; transition: background var(--dur) var(--ease); } .search-panel button:hover { background: var(--clr-amber-light); } /* Quick topics */ .quick-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: var(--space-lg); } .quick-topics a { font-size: 0.82rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); padding: 5px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill); transition: all var(--dur) var(--ease); } .quick-topics a:hover { background: rgba(255, 255, 255, 0.1); color: var(--clr-white); border-color: rgba(255, 255, 255, 0.35); } /* Hero CTA buttons */ .hero > a, .hero > a + a { display: inline-block; margin: 0 6px; } .hero .hero-action { display: inline-flex; align-items: center; justify-content: center; padding: 13px 28px; border-radius: var(--radius-pill); background: var(--clr-amber); color: var(--clr-navy); font-size: 0.9rem; font-weight: 700; box-shadow: var(--shadow-amber); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .hero .hero-action:hover { background: var(--clr-amber-light); transform: translateY(-1px); } .hero button, .hero > a button { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; padding: 13px 28px; border-radius: var(--radius-pill); border: none; transition: all var(--dur) var(--ease); } /* Primary hero button */ .hero > a:first-of-type button { background: var(--clr-amber); color: var(--clr-navy); box-shadow: var(--shadow-amber); } .hero > a:first-of-type button:hover { background: var(--clr-amber-light); transform: translateY(-1px); } /* Secondary hero button */ .hero > a:last-of-type button { background: rgba(255, 255, 255, 0.1); color: var(--clr-white); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); } .hero > a:last-of-type button:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); } /* ── ════════════════════════════════════════════════════════ STATS BAR ══════════════════════════════════════════════════════════ */ .stats { background: var(--clr-navy-mid); display: flex; justify-content: center; flex-wrap: wrap; gap: 0; } .stats > div { flex: 1 1 160px; text-align: center; padding: var(--space-lg) var(--space-md); border-right: 1px solid rgba(255, 255, 255, 0.07); position: relative; } .stats > div:last-child { border-right: none; } .stats h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--clr-amber); letter-spacing: -0.03em; } .stats p { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); font-weight: 500; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; } /* ── ════════════════════════════════════════════════════════ SECTION SHARED STYLES ══════════════════════════════════════════════════════════ */ section { padding: var(--space-2xl) var(--space-md); } section > h2, section > p:first-of-type { max-width: var(--max-w); margin-inline: auto; } section > h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; color: var(--clr-navy); margin-bottom: var(--space-xs); text-align: center; } section > p { font-size: 1.05rem; color: var(--clr-text-light); text-align: center; max-width: 560px; margin-bottom: var(--space-lg); } /* ── ════════════════════════════════════════════════════════ CATEGORY TABS ══════════════════════════════════════════════════════════ */ .category-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: var(--max-w); margin-inline: auto; margin-bottom: var(--space-lg); } .category-tabs button { font-size: 0.85rem; font-weight: 600; padding: 8px 20px; border-radius: var(--radius-pill); border: 1.5px solid var(--clr-border); background: var(--clr-white); color: var(--clr-text-light); transition: all var(--dur) var(--ease); } .category-tabs button:hover, .category-tabs button:focus { border-color: var(--clr-amber); color: var(--clr-amber); background: var(--clr-amber-pale); } .category-tabs button.active { background: var(--clr-amber); border-color: var(--clr-amber); color: var(--clr-navy); } /* ── ════════════════════════════════════════════════════════ COURSE GRID & CARDS ══════════════════════════════════════════════════════════ */ .course-showcase { background: var(--clr-offwhite); } .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); max-width: var(--max-w); margin-inline: auto; } .course-card { background: var(--clr-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); border: 1px solid var(--clr-border); position: relative; } .course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .course-card .badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 0.68rem; } .course-card img { width: 100%; height: 180px; object-fit: cover; transition: transform 400ms var(--ease); } .course-card:hover img { transform: scale(1.04); } /* Wrap img in a clipping div */ .course-card > img { overflow: hidden; } .course-card h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--clr-navy); line-height: 1.4; padding: var(--space-sm) var(--space-sm) 4px; } .course-card > p { padding: 0 var(--space-sm); font-size: 0.82rem; color: var(--clr-muted); line-height: 1.5; } .course-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-xs) var(--space-sm); margin-top: auto; } .course-meta span { font-size: 0.75rem; font-weight: 500; background: var(--clr-offwhite); color: var(--clr-text-light); padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--clr-border); } .course-card h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--clr-navy); padding: 6px var(--space-sm) 4px; } .course-card > a, .course-card > button { margin: 4px var(--space-sm) var(--space-sm); } .course-card button, .course-card a button { width: 100%; padding: 11px; font-size: 0.875rem; font-weight: 600; background: var(--clr-navy); color: var(--clr-white); border: none; border-radius: var(--radius-sm); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .course-card button:hover, .course-card a button:hover { background: var(--clr-amber); color: var(--clr-navy); transform: translateY(-1px); } /* ── ════════════════════════════════════════════════════════ WHY / HOW / STEPS SECTIONS ══════════════════════════════════════════════════════════ */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); max-width: var(--max-w); margin-inline: auto; } .step { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-md); text-align: center; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; } .step:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Numbered steps get an amber circle */ .how-it-works .step h3, .learning-paths .step h3 { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--clr-amber); color: var(--clr-navy); font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; margin-bottom: var(--space-xs); } .why-coursemark .step h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--clr-navy); margin-bottom: 6px; } .step p { font-size: 0.9rem; color: var(--clr-text-light); } /* Accent stripe on left for why cards */ .why-coursemark .step::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; background: var(--clr-amber); border-radius: 0 3px 3px 0; } /* ── ════════════════════════════════════════════════════════ ALTERNATE SECTION BGs ══════════════════════════════════════════════════════════ */ .why-coursemark { background: var(--clr-offwhite); } .learning-paths { background: var(--clr-white); } .how-it-works { background: var(--clr-offwhite); } /* ── ════════════════════════════════════════════════════════ IMPACT / CTA BAND ══════════════════════════════════════════════════════════ */ .impact { background: radial-gradient( ellipse 70% 80% at 80% 50%, rgba(245, 158, 11, 0.15) 0%, transparent 60% ), var(--clr-navy-mid); color: var(--clr-white); text-align: center; padding: var(--space-xl) var(--space-md); } .impact h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--clr-white) !important; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-sm); } .impact p { font-size: 1.05rem; color: rgba(255, 255, 255, 0.65) !important; max-width: 500px; margin-inline: auto; } /* ── ════════════════════════════════════════════════════════ SKILLS / CATEGORY GRID ══════════════════════════════════════════════════════════ */ .skills { background: var(--clr-offwhite); } .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-sm); max-width: var(--max-w); margin-inline: auto; } .category-grid .card { background: var(--clr-white); border: 1.5px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-sm); text-align: center; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--clr-navy); cursor: pointer; transition: all var(--dur) var(--ease); box-shadow: var(--shadow-sm); } .category-grid .card:hover { background: var(--clr-navy); color: var(--clr-amber); border-color: var(--clr-navy); box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ── ════════════════════════════════════════════════════════ FOOTER (add a footer in index.html if desired) ══════════════════════════════════════════════════════════ */ footer { background: var(--clr-navy); color: rgba(255, 255, 255, 0.55); padding: var(--space-xl) var(--space-md) var(--space-md); } footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-lg); max-width: var(--max-w); margin-inline: auto; padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } footer .footer-brand .logo { font-size: 1.5rem; margin-bottom: var(--space-xs); } footer h4 { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-white); margin-bottom: var(--space-sm); } footer ul li { margin-bottom: 8px; } footer ul li a { font-size: 0.875rem; transition: color var(--dur) var(--ease); } footer ul li a:hover { color: var(--clr-amber); } footer .footer-bottom { max-width: var(--max-w); margin-inline: auto; padding-top: var(--space-sm); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } /* ── ════════════════════════════════════════════════════════ PAGE-SPECIFIC: LOGIN / SIGNUP ══════════════════════════════════════════════════════════ */ .auth-wrapper { min-height: calc(100vh - 64px); display: grid; place-items: center; background: radial-gradient( ellipse 60% 60% at 80% 20%, rgba(245, 158, 11, 0.12) 0%, transparent 65% ), var(--clr-navy); padding: var(--space-md); } .auth-card { background: var(--clr-white); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); } .auth-card h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--clr-navy); margin-bottom: var(--space-xs); } .auth-card h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.25; color: var(--clr-navy); margin-bottom: var(--space-xs); } .auth-card p.sub { font-size: 0.9rem; color: var(--clr-muted); margin-bottom: var(--space-lg); } .input-group { margin-bottom: var(--space-sm); } .input-group label { display: block; font-size: 0.83rem; font-weight: 600; color: var(--clr-text); margin-bottom: 6px; } .input-group input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.95rem; color: var(--clr-text); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); outline: none; } .input-group input:focus { border-color: var(--clr-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); } .auth-card .btn-primary { width: 100%; padding: 13px; font-size: 0.95rem; font-weight: 700; background: var(--clr-amber); color: var(--clr-navy); border: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-amber); transition: all var(--dur) var(--ease); margin-top: var(--space-sm); } .auth-card .btn-primary:hover { background: var(--clr-amber-light); transform: translateY(-1px); } .auth-links { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-sm); font-size: 0.9rem; } .auth-links a, .back-link { color: #b45309; font-weight: 700; } .link-button { padding: 0; border: 0; background: transparent; color: #b45309; font-weight: 700; } .link-button:hover { text-decoration: underline; } .auth-links a:hover, .back-link:hover { text-decoration: underline; } .google-button { background: var(--clr-white) !important; color: var(--clr-navy) !important; border: 1px solid var(--clr-border) !important; box-shadow: none !important; } .status-message { min-height: 1.5rem; margin-top: var(--space-sm); text-align: center; font-weight: 600; } .form-note { margin-bottom: var(--space-md); color: var(--clr-text-light); } .form-footnote { margin-top: var(--space-sm); color: var(--clr-muted); font-size: 0.92rem; } .auth-footer { margin-top: var(--space-md); text-align: center; color: var(--clr-text-light); } .auth-footer a { color: #b45309; font-weight: 700; } .enrollment-card { max-width: 560px; } /* ── ════════════════════════════════════════════════════════ PAGE-SPECIFIC: COURSES PAGE ══════════════════════════════════════════════════════════ */ .page-hero { background: var(--clr-navy); color: var(--clr-white); padding: var(--space-xl) var(--space-md); text-align: center; } .page-hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--space-xs); } .page-hero p { font-size: 1rem; color: rgba(255, 255, 255, 0.6); } .filter-bar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; max-width: var(--max-w); margin-inline: auto; margin-bottom: var(--space-lg); padding: var(--space-sm) 0; } .filter-bar select { padding: 9px 16px; border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.875rem; color: var(--clr-text); background: var(--clr-white); outline: none; cursor: pointer; } /* ── ════════════════════════════════════════════════════════ DASHBOARD SHARED ══════════════════════════════════════════════════════════ */ .dashboard-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar { background: var(--clr-navy); padding: var(--space-md); position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; } .sidebar .logo { margin-bottom: var(--space-lg); } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.65); margin-bottom: 4px; transition: all var(--dur) var(--ease); } .sidebar nav a:hover, .sidebar nav a.active { background: rgba(255, 255, 255, 0.08); color: var(--clr-white); } .sidebar nav a.active { color: var(--clr-amber); } .dashboard-main { padding: var(--space-lg); background: var(--clr-offwhite); } .dashboard, .profile, .featured-creators { width: min(100%, var(--max-w)); margin-inline: auto; padding: var(--space-xl) var(--space-md); } .dashboard > h1, .profile > h1, .featured-creators > h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; color: var(--clr-navy); margin-bottom: var(--space-xs); } .dashboard > h2, .profile > h2 { font-family: var(--font-display); color: var(--clr-navy); margin: var(--space-lg) 0 var(--space-sm); } .dashboard-lead { max-width: 700px; color: var(--clr-text-light); margin-bottom: var(--space-lg); } .dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-sm); margin: var(--space-lg) 0; } .dashboard-card { min-width: 0; padding: var(--space-md); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-white); box-shadow: var(--shadow-sm); } .dashboard-card h2 { overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(1.35rem, 4vw, 2rem); color: var(--clr-amber); } .dashboard-card p { color: var(--clr-muted); font-weight: 600; } .progress-bar { height: 9px; margin: var(--space-xs) var(--space-sm); overflow: hidden; border-radius: var(--radius-pill); background: var(--clr-border); } .progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--clr-amber), var(--clr-amber-light)); } .upload-studio { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-lg); align-items: start; margin-top: var(--space-lg); padding: var(--space-lg); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-white); box-shadow: var(--shadow-md); } .upload-studio form { display: grid; gap: var(--space-sm); } .upload-studio input, .upload-studio select, .upload-studio textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-white); } .upload-studio textarea { min-height: 120px; resize: vertical; } .upload-studio button { padding: 12px 20px; border: 0; border-radius: var(--radius-sm); background: var(--clr-amber); color: var(--clr-navy); font-weight: 700; } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-lg); } .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); } .topbar-actions { display: flex; align-items: center; gap: var(--space-sm); } .panel-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg); } .panel { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-md); } .panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); } .panel-content { display: grid; gap: var(--space-sm); } .activity-item, .course-row { padding: var(--space-sm) var(--space-md); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-offwhite); display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; } .activity-item p, .course-row h3 { font-weight: 700; margin-bottom: 0.25rem; } .activity-item span, .course-row span { font-size: 0.875rem; color: var(--clr-muted); } .course-row { flex-wrap: wrap; } .course-meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; color: var(--clr-text-light); } .course-meta span { padding: 7px 12px; border-radius: var(--radius-pill); background: #f8fafc; } .stat-card h3 { font-size: clamp(1.75rem, 3vw, 2.3rem); color: var(--clr-navy); margin-bottom: var(--space-xs); } .stat-card p { margin-bottom: var(--space-xs); color: var(--clr-text-light); } .stat-card span { color: var(--clr-muted); font-size: 0.95rem; } .mission { background: radial-gradient( ellipse 70% 80% at 20% 50%, rgba(245, 158, 11, 0.15), transparent 60% ), var(--clr-navy); color: var(--clr-white); text-align: center; } .mission h1 { max-width: 850px; margin-inline: auto; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.2; } .mission p { margin: var(--space-sm) auto 0; color: rgba(255, 255, 255, 0.7); } .featured-creators { text-align: center; } .featured-creators > p { margin-inline: auto; } .creator-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); } .creator-card { display: flex; flex-direction: column; align-items: center; padding: var(--space-md); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-white); box-shadow: var(--shadow-sm); } .creator-card img, .profile > img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-sm); } .creator-card h3 { font-family: var(--font-display); color: var(--clr-navy); } .creator-card .card-action { width: 100%; margin: auto 0 0; margin-top: var(--space-sm); } .profile { text-align: center; } .profile > img { width: 170px; height: 170px; margin-inline: auto; } .profile > p:not(.eyebrow) { max-width: 720px; margin: var(--space-sm) auto; color: var(--clr-text-light); } .profile .course-grid { text-align: left; } .stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-lg); } .stat-card { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-sm); } .stat-card h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--clr-amber); } .stat-card p { font-size: 0.82rem; color: var(--clr-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } /* ── ════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { nav { height: auto; display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; padding: 0.85rem 5vw; } nav ul { grid-column: 1 / -1; display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: none; } nav ul::-webkit-scrollbar { display: none; } nav ul li a { display: inline-flex; white-space: nowrap; } .login-btn { margin-left: 0; justify-self: end; } .nav-actions { margin-left: 0; justify-self: end; gap: 0.5rem; } .nav-actions .login-btn { padding-inline: 14px; } .hero h1 { font-size: 2rem; } .stats { flex-direction: column; } .stats > div { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .course-grid, .creator-grid, .steps { grid-template-columns: 1fr; } .category-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-layout { grid-template-columns: 1fr; } .sidebar { display: none; } .upload-studio { grid-template-columns: 1fr; } footer .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { nav { grid-template-columns: 1fr; } nav .logo, .nav-actions, .login-btn { justify-self: center; } nav ul { grid-row: 3; justify-content: flex-start; } .nav-actions { grid-row: 2; flex-wrap: wrap; justify-content: center; } .search-panel { flex-direction: column; border-radius: var(--radius-md); } .search-panel button { border-radius: var(--radius-md); } .category-grid { grid-template-columns: repeat(2, 1fr); } footer .footer-grid { grid-template-columns: 1fr; } .auth-card { padding: var(--space-lg) var(--space-md); } .auth-links { align-items: flex-start; flex-direction: column; } .dashboard, .profile, .featured-creators { padding-block: var(--space-lg); } } /* ── ════════════════════════════════════════════════════════ SCROLL ANIMATIONS (optional — works without JS frameworks) ══════════════════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero h1, .hero p, .hero .search-panel { animation: fadeUp 0.55s var(--ease) both; } .hero h1 { animation-delay: 0.05s; } .hero > p { animation-delay: 0.15s; } .hero .search-panel { animation-delay: 0.25s; } .hero .quick-topics { animation-delay: 0.32s; animation: fadeUp 0.55s var(--ease) both; } /* ========================================== COURSEMARK CREATOR ONBOARDING ========================================== */ .onboarding-page { background: #f8fafc; min-height: 100vh; } .creator-onboarding { max-width: 1100px; margin: 0 auto; padding: 60px 20px; } .creator-onboarding .eyebrow { color: #f59e0b; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; } .creator-onboarding h1 { font-family: "Sora", sans-serif; font-size: 2.5rem; color: #0f1724; margin-bottom: 10px; } .creator-onboarding > p { color: #64748b; margin-bottom: 30px; } .onboarding-shell { background: #fff; border-radius: 20px; padding: 35px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .onboarding-progress { margin-bottom: 35px; } .progress-track { width: 100%; height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-bottom: 20px; } .progress-track span { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: 0.4s; } .onboarding-progress ol { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .onboarding-progress li { list-style: none; color: #94a3b8; font-size: 0.85rem; font-weight: 600; } .onboarding-progress li.active { color: #f59e0b; } .form-step { display: none; } .form-step.active { display: block; } .form-step h2 { margin-bottom: 20px; color: #0f1724; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .form-grid label { display: flex; flex-direction: column; font-weight: 600; color: #334155; gap: 8px; } .form-grid input, .form-grid textarea, .form-grid select { padding: 12px 14px; border: 1px solid #dbeafe; border-radius: 10px; font-size: 0.95rem; outline: none; } .form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); } .form-grid textarea { min-height: 120px; resize: vertical; } .full { grid-column: 1/-1; } .trust-note { background: #fff7ed; color: #9a3412; padding: 12px; border-radius: 10px; margin-bottom: 20px; } .review-summary { display: grid; gap: 12px; margin-bottom: 20px; } .review-summary div { display: flex; justify-content: space-between; padding: 12px; background: #f8fafc; border-radius: 8px; } .check-row { display: flex; gap: 10px; margin-bottom: 12px; } .form-actions { display: flex; justify-content: space-between; margin-top: 30px; } .form-actions button { padding: 12px 28px; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; } .secondary-btn { background: #e2e8f0; color: #0f1724; } [data-next], [data-submit] { background: #f59e0b; color: #0f1724; } .success-state { text-align: center; padding: 50px 20px; } .success-state h2 { color: #16a34a; margin-bottom: 10px; } .success-state strong { display: block; margin-bottom: 10px; } @media (max-width: 768px) { .onboarding-progress ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .form-actions { flex-direction: column; gap: 15px; } .form-actions button { width: 100%; } } /* ========================================== COURSE DETAILS PAGE ========================================== */ .course-details { max-width: 1200px; margin: 50px auto; padding: 0 20px; display: grid; grid-template-columns: 2fr 1fr; gap: 40px; } .lesson-player { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); margin-bottom: 30px; } .lesson-player video { width: 100%; display: block; border: none; } .player-meta { display: flex; justify-content: space-between; padding: 15px 20px; background: #f8fafc; color: #64748b; font-size: 0.9rem; } .course-details h2 { color: #0f1724; margin-bottom: 15px; } .course-details p { color: #475569; line-height: 1.8; margin-bottom: 25px; } .course-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; } .course-highlights div { background: #fff; padding: 20px; border-radius: 15px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .course-highlights strong { display: block; font-size: 1.5rem; color: #f59e0b; margin-bottom: 5px; } .course-highlights span { color: #64748b; font-size: 0.9rem; } .course-details h3 { margin-bottom: 15px; color: #0f1724; } .course-details ul { padding-left: 20px; } .course-details ul li { margin-bottom: 10px; color: #475569; } .price-box { position: sticky; top: 90px; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); } .price-box h2 { font-size: 2.5rem; color: #f59e0b; margin-bottom: 10px; } .price-box p { margin-bottom: 20px; } .countdown-box { background: #fff7ed; border: 1px solid #fed7aa; padding: 15px; border-radius: 12px; margin-bottom: 20px; } .countdown-box span { display: block; color: #9a3412; font-size: 0.85rem; } .countdown-box strong { color: #c2410c; font-size: 1.1rem; } .price-box ul { margin: 25px 0; padding-left: 20px; } .price-box ul li { margin-bottom: 12px; } .price-box button { width: 100%; padding: 15px; border: none; border-radius: 12px; background: #f59e0b; color: #0f1724; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.3s; } .price-box button:hover { background: #fbbf24; transform: translateY(-2px); } .price-action-link { width: 100%; } @media (max-width: 900px) { .course-details { grid-template-columns: 1fr; } .course-highlights { grid-template-columns: 1fr; } .price-box { position: static; } } .results-info { text-align: center; margin: 20px 0; color: #64748b; } .courses { max-width: 1200px; margin: auto; padding: 50px 20px; } .page-search { margin: 30px auto; } .course-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; } .course-filters button { border: none; background: #fff; padding: 10px 18px; border-radius: 999px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .course-filters button:hover { background: #f59e0b; color: #0f1724; } .pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; } .pagination button { border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; } .pagination .active { background: #f59e0b; font-weight: 700; } .auth-card select { width: 100%; padding: 12px 16px; border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); font-size: 0.95rem; outline: none; background: #fff; } .auth-card select:focus { border-color: var(--clr-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }