/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #07100b #232a26 #f7f8f5 #2f6f4f #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f7f8f5; --surface: #fbfcfb; --surface-2: #ebece9; --border: #d5d8d4; --border-strong: #afb2af; --ink: #232a26; --muted: #6e726f; --accent: #2f6f4f; --accent-hover: #285e43; --accent-ink: #ffffff; --accent-text: #2f6f4f; --accent-strong: #2f6f4f; --accent-soft: #dbe5de; --accent-border: #9dbaaa; --success: #15803d; --success-ink: #ffffff; --success-soft: #dceadf; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #efe4d9; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f0dedb; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #07100b; --surface: #202823; --surface-2: #131c17; --border: #2a312d; --border-strong: #515854; --ink: #f7f8f5; --muted: #979b97; --accent: #2f6f4f; --accent-hover: #4e8569; --accent-ink: #ffffff; --accent-text: #4f866a; --accent-strong: #6a9981; --accent-soft: #10251a; --accent-border: #193b2a; --success: #15803d; --success-ink: #ffffff; --success-soft: #0a2916; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2d1f0b; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2e130f; --danger-strong: #d16969; } /* ==================================================================== * app.css — Merit's own stylesheet. * ==================================================================== */ /* ---- retune the system: modern, minimal, a touch more air --------- */ :root { --radius-lg: 20px; --radius: 12px; --shadow-raised: 0 20px 45px -20px color-mix(in srgb, var(--ink) 28%, transparent); } /* ---- recipient avatar chip on each card ---------------------------- */ .cert-avatar { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-weight: var(--fw-semi); font-size: var(--t-sm); } .cert-card { display: flex; flex-direction: column; } /* ---- the certificate itself ---------------------------------------- */ .certificate-stage { display: flex; justify-content: center; padding: var(--s-4) 0 var(--s-10); } .certificate-sheet { width: 100%; max-width: 840px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--s-3); } .certificate-border { border: 1.5px solid var(--accent-border); border-radius: calc(var(--radius-lg) - 6px); padding: var(--s-10) var(--s-10) var(--s-8); text-align: center; position: relative; background: linear-gradient(var(--surface), var(--surface)) padding-box, color-mix(in srgb, var(--accent) 14%, transparent) border-box; } .certificate-emblem { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-bottom: var(--s-4); } .certificate-emblem .icon { width: 28px; height: 28px; } .certificate-eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); font-weight: var(--fw-semi); } .certificate-intro { margin-top: var(--s-6); color: var(--muted); font-size: var(--t-sm); } .certificate-name { margin-top: var(--s-2); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); color: var(--ink); } .certificate-role { margin-top: var(--s-1); color: var(--accent-text); font-size: var(--t-sm); font-weight: var(--fw-medium, 500); } .certificate-body { margin: var(--s-6) auto 0; max-width: 46ch; color: var(--ink); line-height: var(--lh-loose); } .certificate-category { margin-top: var(--s-6); } .certificate-foot { margin-top: var(--s-10); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); max-width: 30rem; margin-left: auto; margin-right: auto; text-align: center; } .certificate-sign-line { height: 1px; background: var(--border-strong); margin-bottom: var(--s-2); } .certificate-sign-name { font-weight: var(--fw-semi); color: var(--ink); } .certificate-sign-title { font-size: var(--t-xs); color: var(--muted); margin-top: 2px; } /* ---- print: the certificate, and nothing else ---------------------- */ @media print { .topbar, .no-print, .toasts, .route-progress { display: none; } body, .content, .page { background: var(--canvas); padding: 0; margin: 0; } .certificate-stage { padding: 0; } .certificate-sheet { box-shadow: none; max-width: none; } }