/* ============================================================ CertifAI — Design System The single source of truth. Every prototype composes from this. Light/dark via [data-theme="light"|"dark"] on . ============================================================ */ /* ---- Fonts ---- */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap'); /* ============================================================ TOKENS ============================================================ */ :root { /* Brand greens (hue-stable across themes) */ --green-300: #86EFAC; --green-400: #4ADE80; /* bright mint glow / accent text */ --green-500: #22C55E; /* PRIMARY — CTAs */ --green-600: #16A34A; /* pressed / deep */ --green-700: #15803D; --mint: #7DEBA8; /* hero headline tint */ /* Category accents — the signature 4-path system */ --c-learn: #22C55E; /* Learners → green */ --c-partner: #6366F1; /* Businesses/orgs → indigo */ --c-partner-soft: #818CF8; --c-teach: #E0B84C; /* Instructors → gold */ --c-teach-soft: #F2D27E; --c-request: #FB7185; /* Course ideas → rose */ --c-request-soft: #FDA4AF; /* Status */ --ok: #22C55E; --warn: #E0B84C; --danger:#FB7185; --info: #818CF8; /* Radii */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Spacing scale (4pt base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px; /* Type scale */ --fs-eyebrow: 13px; --fs-caption: 13px; --fs-body-sm: 15px; --fs-body: 17px; --fs-lead: 20px; --fs-h6: 18px; --fs-h5: 22px; --fs-h4: 28px; --fs-h3: 38px; --fs-h2: 52px; --fs-h1: 72px; --fs-display: 92px; /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: .14s; --dur: .24s; --dur-slow: .5s; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Sora', system-ui, sans-serif; --font-serif: 'Fraunces', 'Times New Roman', serif; --maxw: 1200px; } /* ---- DARK (default) — deep emerald-black, green is the primary feel ---- */ :root, [data-theme="dark"] { --bg: #051009; /* deep green-black canvas */ --bg-pure: #020A05; /* near-pure, still green-leaning */ --bg-elev: #0A1C12; /* richer green elevated sections */ --surface: #0B1A11; /* card */ --surface-2: #112519; /* nested / input */ --surface-3: #19341F; /* hover */ --line: rgba(120,230,160,.12); --line-strong: rgba(140,240,180,.20); --line-green: rgba(52,211,153,.34); --text: #F4F7F4; --text-mid: #B8C4BC; --muted: #7E8C83; --faint: #56635A; --glow: 0 0 60px rgba(34,197,94,.25); --card-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -28px rgba(0,0,0,.8); --grid-dot: rgba(255,255,255,.045); --on-green: #04130A; /* text on bright green */ color-scheme: dark; } /* ---- LIGHT — soft green-tinted, never sterile white ---- */ [data-theme="light"] { --bg: #EBF1EC; --bg-pure: #F4F8F4; --bg-elev: #E2EBE3; --surface: #FFFFFF; --surface-2: #F2F7F2; --surface-3: #E8F0E9; --line: rgba(11,25,15,.10); --line-strong: rgba(11,25,15,.18); --line-green: rgba(22,163,74,.30); --text: #0C160F; --text-mid: #3C4A40; --muted: #5E6E63; --faint: #93A398; --green-400: #16A34A; --mint: #15803D; --glow: 0 0 50px rgba(34,197,94,.18); --card-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -24px rgba(11,40,20,.28); --grid-dot: rgba(11,40,20,.06); --on-green: #04130A; color-scheme: light; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; font-feature-settings: "cv02","cv03","cv04","cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur) var(--ease); } /* ambient green wash — subtle emerald glow behind the hero, deep green-black elsewhere */ [data-theme="dark"] body { background: radial-gradient(900px 460px at 50% -18%, rgba(34,197,94,.12), transparent 52%), var(--bg); background-attachment: fixed; } h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; margin: 0; color: var(--text); text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: 800; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } h5 { font-size: var(--fs-h5); } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } ::selection { background: var(--green-500); color: var(--on-green); } :focus-visible { outline: 2px solid var(--green-400); outline-offset: 2px; border-radius: 4px; } /* ============================================================ LAYOUT HELPERS ============================================================ */ .ds-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-6); } .dotgrid { background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 22px 22px; } .glow-green { box-shadow: var(--glow); } /* ============================================================ EYEBROW / KICKER ============================================================ */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-400); } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 10px var(--green-400); } .eyebrow.amber { color: var(--c-teach); } .eyebrow.amber::before { background: var(--c-teach); box-shadow:0 0 10px var(--c-teach); } .eyebrow.indigo{ color: var(--c-partner-soft);} .eyebrow.indigo::before{ background: var(--c-partner-soft); box-shadow:0 0 10px var(--c-partner-soft);} .eyebrow.rose { color: var(--c-request);} .eyebrow.rose::before{ background: var(--c-request); box-shadow:0 0 10px var(--c-request);} /* ============================================================ BUTTONS ============================================================ */ .btn { --btn-bg: var(--green-500); --btn-fg: var(--on-green); display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body-sm); line-height: 1; padding: 13px 22px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; background: var(--btn-bg); color: var(--btn-fg); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn svg { width: 17px; height: 17px; } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(34,197,94,.7); } .btn:active { transform: translateY(0); background: var(--green-600); } .btn-lg { padding: 17px 30px; font-size: var(--fs-body); } .btn-sm { padding: 9px 15px; font-size: var(--fs-caption); } .btn-ghost { background: transparent; color: var(--green-400); border-color: var(--line-green); } .btn-ghost:hover { background: color-mix(in srgb, var(--green-500) 12%, transparent); box-shadow: none; border-color: var(--green-400); } .btn-outline { background: transparent; color: var(--text); border-color: var(--line-strong); } .btn-outline:hover { background: var(--surface-2); box-shadow: none; } .btn-white { background: var(--text); color: var(--bg); } .btn-white:hover { box-shadow: 0 10px 26px -12px rgba(0,0,0,.6); } /* hero "white pill with green dot" */ .btn-pill-dot::before { content:""; width:8px; height:8px; border-radius:50%; background: var(--green-500); box-shadow:0 0 8px var(--green-500); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* accent variants */ .btn.indigo { --btn-bg: var(--c-partner); --btn-fg: #fff; } .btn.indigo:hover{ box-shadow:0 10px 26px -10px rgba(99,102,241,.7);} .btn.gold { --btn-bg: var(--c-teach); --btn-fg: #1A1405; } .btn.gold:hover{ box-shadow:0 10px 26px -10px rgba(224,184,76,.6);} .btn.rose { --btn-bg: var(--c-request); --btn-fg: #2A0A0E; } .btn.rose:hover{ box-shadow:0 10px 26px -10px rgba(251,113,133,.6);} /* ============================================================ BADGES / PILLS / CHIPS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--text-mid); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.green { color: var(--green-400); border-color: var(--line-green); background: color-mix(in srgb, var(--green-500) 10%, transparent); } .badge.amber { color: var(--c-teach-soft); border-color: color-mix(in srgb, var(--c-teach) 35%, transparent); background: color-mix(in srgb, var(--c-teach) 12%, transparent); } .badge.indigo{ color: var(--c-partner-soft); border-color: color-mix(in srgb, var(--c-partner) 40%, transparent); background: color-mix(in srgb, var(--c-partner) 14%, transparent); } .badge.rose { color: var(--c-request-soft); border-color: color-mix(in srgb, var(--c-request) 38%, transparent); background: color-mix(in srgb, var(--c-request) 12%, transparent); } .badge.solid { background: var(--green-500); color: var(--on-green); border-color: transparent; } .chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-caption); padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-mid); cursor: pointer; transition: all var(--dur) var(--ease); } .chip:hover { border-color: var(--line-green); color: var(--text); } .chip[aria-selected="true"], .chip.active { color: var(--green-400); border-color: var(--line-green); background: color-mix(in srgb, var(--green-500) 12%, transparent); } /* ============================================================ CARDS ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--card-shadow); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card.pad { padding: var(--s-6); } .card.hover:hover { border-color: var(--line-green); transform: translateY(-3px); } .card.glass { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(14px); } /* feature/bento tile */ .tile { position: relative; overflow: hidden; } .tile .tile-art { height: 180px; border-radius: var(--r-md); background: radial-gradient(120px 90px at 70% 30%, color-mix(in srgb, var(--green-500) 30%, transparent), transparent 70%), var(--surface-2); border: 1px solid var(--line); } /* ---- Eyebrow→label utilities ---- */ .label-xs { font-family: var(--font-display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); } /* ============================================================ COURSE CARD ============================================================ */ .course-card { overflow: hidden; display: flex; flex-direction: column; } .course-art { height: 200px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); display: grid; place-items: center; } .course-art.blue { background: radial-gradient(circle at 50% 50%, #1B3A6B, #0A1830 70%); } .course-art.green { background: radial-gradient(circle at 50% 55%, #0E4D33, #07140E 70%); } .course-art.amber { background: radial-gradient(circle at 50% 50%, #5A3A0C, #1A1305 70%); } .course-art.violet { background: radial-gradient(circle at 50% 50%, #3B1F66, #140A26 70%); } .course-art .scene-glow { width: 90px; height: 90px; border-radius: 22px; display:grid; place-items:center; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); box-shadow: 0 0 50px rgba(34,197,94,.45); } .course-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; } .course-meta { font-size: var(--fs-caption); color: var(--muted); display:flex; gap:8px; align-items:center; } .course-meta .sep { opacity:.5; } /* ============================================================ FORM CONTROLS ============================================================ */ .field { display: flex; flex-direction: column; gap: 8px; } .field > label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body-sm); color: var(--text); } .field .req { color: var(--green-400); font-weight: 600; } .field .opt { color: var(--muted); font-weight: 400; } .input, .select, .textarea { width: 100%; font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--faint); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 22%, transparent); } .textarea { resize: vertical; min-height: 110px; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237E8C83' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; } /* toggle */ .switch { position: relative; width: 46px; height: 26px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--line); transition: all var(--dur) var(--ease); cursor: pointer; } .switch .track::before { content:""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: all var(--dur) var(--ease); } .switch input:checked + .track { background: var(--green-500); border-color: transparent; } .switch input:checked + .track::before { transform: translateX(20px); background: var(--on-green); } /* ============================================================ PROGRESS ============================================================ */ .progress { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-600), var(--green-400)); box-shadow: 0 0 14px rgba(34,197,94,.55); transition: width var(--dur-slow) var(--ease-out); } .progress.thin { height: 5px; } /* circular ring */ .ring { --val: 70; --sz: 64px; width: var(--sz); height: var(--sz); border-radius: 50%; background: conic-gradient(var(--green-400) calc(var(--val)*1%), var(--surface-3) 0); display: grid; place-items: center; } .ring::after { content: attr(data-val); width: calc(var(--sz) - 14px); height: calc(var(--sz) - 14px); border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); } /* ============================================================ NAVBAR ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); } .nav-inner { max-width: var(--maxw); margin-inline: auto; padding: 16px var(--s-6); display: flex; align-items: center; gap: var(--s-6); } .nav-links { display: flex; gap: var(--s-6); margin-inline: auto; } .nav-links a { font-size: var(--fs-body-sm); color: var(--text-mid); transition: color var(--dur) var(--ease); } .nav-links a:hover, .nav-links a.active { color: var(--text); } /* logo — real brand assets, theme-aware (white+green on dark, black+green on light) */ .logo { display: inline-flex; align-items: center; } /* full wordmark lockup */ .logo-wordmark { height: 26px; width: auto; display: block; } /* mark only */ .logo-mark { height: 26px; width: auto; display: block; } /* theme swap: show the right color variant */ [data-theme="dark"] .logo-light { display: none; } [data-theme="light"] .logo-dark { display: none; } /* certificate always sits on cream — force the black lockup there */ .cert .logo-dark { display: none !important; } .cert .logo-light { display: block !important; } /* theme toggle */ .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-green); background: color-mix(in srgb, var(--green-500) 10%, transparent); color: var(--green-400); display: grid; place-items: center; cursor: pointer; transition: all var(--dur) var(--ease); flex: none; } .theme-toggle:hover { background: color-mix(in srgb, var(--green-500) 18%, transparent); } .theme-toggle svg { width: 18px; height: 18px; } /* ============================================================ STEP TIMELINE ============================================================ */ .steps { position: relative; padding-left: 34px; } .steps::before { content:""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .step { position: relative; padding-bottom: var(--s-8); } .step::before { content:""; position:absolute; left: -34px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--line-strong); } .step.active::before { background: var(--green-400); border-color: var(--green-400); box-shadow: 0 0 16px var(--green-400); } .step .step-k { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-400); } .step.dim .step-k { color: var(--faint); } .step h4 { margin: 6px 0 8px; } .step.dim h4, .step.dim p { color: var(--faint); } /* ============================================================ WINDOW CHROME (mockup frames) ============================================================ */ .win { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--card-shadow); } .win-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .win-dots { display: flex; gap: 6px; } .win-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); } .win-dots i:nth-child(1){ background:#FB7185; } .win-dots i:nth-child(2){ background:#E0B84C; } .win-dots i:nth-child(3){ background:#22C55E; } .win-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-caption); color: var(--muted); } .win-body { padding: var(--s-5); } /* ============================================================ CERTIFICATE ============================================================ */ .cert { position: relative; background: linear-gradient(160deg, #FBFDFB, #EFF4EF); color: #16241A; border-radius: var(--r-md); padding: 40px; border: 1px solid #D6E2D8; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); overflow: hidden; } .cert::before { content:""; position: absolute; inset: 14px; border: 1px solid #C7D6C9; border-radius: 8px; pointer-events: none; } .cert::after { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(22,163,74,.07) 1px, transparent 1px); background-size: 16px 16px; opacity:.6; } .cert > * { position: relative; } .cert .cert-kicker { font-family: var(--font-serif); letter-spacing: .22em; font-size: 13px; text-transform: uppercase; color: #4B6B54; text-align: center; } .cert .cert-title { font-family: var(--font-serif); font-weight: 600; font-size: 34px; text-align: center; color: #16241A; margin: 14px 0; letter-spacing: .01em; } .cert .cert-issued { text-align:center; font-family: var(--font-serif); color: var(--green-700); letter-spacing:.18em; font-size: 11px; text-transform: uppercase; } .cert .cert-name { font-family: var(--font-serif); text-align:center; font-size: 26px; color:#16241A; } .cert .cert-seal { width: 78px; height: 78px; margin: 14px auto; border-radius: 50%; background: radial-gradient(circle, var(--green-400), var(--green-600)); display:grid; place-items:center; color: var(--on-green); font-weight: 800; font-family: var(--font-display); box-shadow: 0 0 30px rgba(34,197,94,.5); border: 3px solid #fff; } .cert .cert-foot { display:flex; justify-content: space-between; font-family: var(--font-serif); font-size: 12px; color:#3B5142; } .cert .cert-foot .lab { font-size: 10px; letter-spacing:.1em; text-transform: uppercase; color:#6B7E70; } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq-item { border-bottom: 1px solid var(--line); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 4px; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h6); color: var(--text); } .faq-tog { width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--bg); display:grid; place-items:center; flex:none; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .faq-item[open] .faq-tog { transform: rotate(45deg); background: var(--green-500); color: var(--on-green); } .faq-a { padding: 0 4px 24px; color: var(--muted); max-width: 70ch; } .faq-q::-webkit-details-marker { display: none; } /* ============================================================ STAT / METRIC ============================================================ */ .stat { display: flex; flex-direction: column; gap: 4px; } .stat .num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--text); line-height: 1; } .stat .num.green { color: var(--green-400); } .stat .lab { font-size: var(--fs-caption); color: var(--muted); } /* ============================================================ FAB ============================================================ */ .fab { position: fixed; right: 26px; bottom: 26px; width: 52px; height: 52px; border-radius: 50%; background: var(--green-500); color: var(--on-green); border: none; display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(34,197,94,.6); transition: transform var(--dur) var(--ease); z-index: 60; } .fab:hover { transform: translateY(-3px); } /* ============================================================ TOP LOADING BAR ============================================================ */ .topbar-load { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 100; background: linear-gradient(90deg, var(--green-500), #38BDF8); transform-origin: left; } /* ============================================================ MISC ============================================================ */ .divider { height: 1px; background: var(--line); border: 0; } .muted { color: var(--muted); } .mid { color: var(--text-mid); } .green-text { color: var(--green-400); } .serif { font-family: var(--font-serif); } .mono-num { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }