/* ================================================================= certificate.css — TerraLeap Course Completion Certificate All selectors prefixed .cert- (no collisions with site CSS) Theming: change CSS variables on body or a wrapper class to re-skin the certificate per category. Examples: (navy + gold, default) (deeper navy + silver) (emerald + gold) See bottom of this file for theme tokens. ================================================================= */ /* ── Theme tokens (default = TerraLeap navy/gold) ── */ :root, body.cert-theme-default { --cert-bg: #FBF9F4; /* paper */ --cert-ink: #1a1a1a; /* main text */ --cert-ink-soft: #2A3346; /* body text */ --cert-ink-mute: #6B7180; /* meta labels */ --cert-border-dark: #1F3A6B; /* outer border */ --cert-border-gold: #C8A95A; /* inner gold border */ --cert-accent: #185FA5; /* score, accent */ --cert-deep: #0B1A3B; /* darkest navy */ --cert-seal-from: #C8A95A; --cert-seal-to: #8B7332; --cert-watermark-rgb: 31, 58, 107; /* matches border-dark */ } /* ── Page wrapper (browser preview) ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'DM Sans', 'Segoe UI', sans-serif; background: #EFF1F5; color: var(--cert-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cert-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 28px 20px 80px; } .cert-actions { width: 100%; max-width: 1080px; display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 18px; } .cert-btn { background: var(--cert-deep); color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: .3px; display: inline-flex; align-items: center; gap: 8px; transition: all .15s ease; text-decoration: none; } .cert-btn:hover { background: var(--cert-accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11,26,59,.25); } .cert-btn-ghost { background: #fff; color: var(--cert-deep); border: 1px solid #D6DCE6; } .cert-btn-ghost:hover { background: #F4F6FA; } /* ── The certificate ── */ .cert { width: 100%; max-width: 1080px; aspect-ratio: 1080 / 764; background: var(--cert-bg); position: relative; box-shadow: 0 18px 50px rgba(11,26,59,.18), 0 4px 12px rgba(11,26,59,.06); overflow: hidden; font-family: 'DM Sans', sans-serif; container-type: inline-size; container-name: cert; } .cert::before, .cert::after { content: ""; position: absolute; pointer-events: none; } .cert::before { inset: 16px; border: 1.5px solid var(--cert-border-dark); border-radius: 4px; } .cert::after { inset: 24px; border: 1px solid var(--cert-border-gold); border-radius: 2px; } /* Decorative ornamental corners */ .cert-corner { position: absolute; width: 80px; height: 80px; pointer-events: none; opacity: 0.92; } .cert-corner.tl { top: 18px; left: 18px; } .cert-corner.tr { top: 18px; right: 18px; transform: rotate(90deg); } .cert-corner.bl { bottom: 18px; left: 18px; transform: rotate(-90deg); } .cert-corner.br { bottom: 18px; right: 18px; transform: rotate(180deg); } /* Watermark */ .cert-watermark { position: absolute; inset: 40px; background-image: repeating-linear-gradient(45deg, transparent 0, transparent 60px, rgba(var(--cert-watermark-rgb), 0.025) 60px, rgba(var(--cert-watermark-rgb), 0.025) 61px); pointer-events: none; } .cert-watermark-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 12cqw; font-weight: 700; color: rgba(var(--cert-watermark-rgb), 0.045); letter-spacing: 0.3em; pointer-events: none; user-select: none; transform: rotate(-18deg); white-space: nowrap; } /* Inner content */ .cert-inner { position: absolute; inset: 50px 56px; /* wider margins so content stays inside gold border */ display: flex; flex-direction: column; z-index: 2; } /* Brand row */ .cert-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2cqw; gap: 1.5cqw; } .cert-brand-mark { display: flex; align-items: center; gap: 1cqw; } .cert-brand-icon { width: 4.2cqw; height: 4.2cqw; min-width: 32px; min-height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--cert-deep), var(--cert-accent)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Fraunces', serif; font-weight: 600; font-size: 2.2cqw; box-shadow: 0 3px 10px rgba(11,26,59,.25); } .cert-brand-name { font-family: 'Fraunces', serif; font-size: 1.9cqw; font-weight: 600; color: var(--cert-deep); letter-spacing: 0.04em; } .cert-brand-name b { color: var(--cert-accent); } /* Right side of brand row: ID + seal grouped together */ .cert-brand-right { display: flex; align-items: center; gap: 1.4cqw; } .cert-id { font-family: 'DM Sans', sans-serif; font-size: 0.95cqw; color: var(--cert-ink-mute); letter-spacing: 0.2em; text-transform: uppercase; text-align: right; line-height: 1.5; } .cert-id strong { color: var(--cert-deep); font-weight: 600; } .cert-eyebrow { text-align: center; font-family: 'DM Sans', sans-serif; font-size: 0.95cqw; font-weight: 700; color: var(--cert-border-gold); letter-spacing: 0.45em; text-transform: uppercase; margin-top: 1.6cqw; } .cert-eyebrow::before, .cert-eyebrow::after { content: "✦"; display: inline-block; margin: 0 1.2em; color: var(--cert-border-gold); font-size: 0.85em; vertical-align: middle; } .cert-title { text-align: center; font-family: 'Fraunces', serif; font-size: 4.4cqw; font-weight: 600; color: var(--cert-deep); line-height: 1.1; margin: 1.2cqw 0 0.4cqw; letter-spacing: -0.01em; } .cert-subtitle { text-align: center; font-family: 'Fraunces', serif; font-size: 1.5cqw; font-weight: 400; color: #4A5366; font-style: italic; margin-bottom: 1.4cqw; } .cert-conferral { text-align: center; font-family: 'DM Sans', sans-serif; font-size: 1.2cqw; color: #4A5366; margin-bottom: 0.4cqw; } /* Recipient name */ .cert-recipient { text-align: center; font-family: 'Allura', 'Cormorant Garamond', cursive; font-size: 6.2cqw; font-weight: 500; color: var(--cert-accent); line-height: 1.1; margin: 0.4cqw 0 0.4cqw; word-break: break-word; padding: 0 4cqw; } .cert-recipient-rule { width: 60%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--cert-border-gold) 30%, var(--cert-border-gold) 70%, transparent 100%); margin: 0 auto 0.9cqw; } /* Body */ .cert-body { text-align: center; font-family: 'DM Sans', sans-serif; font-size: 1.1cqw; line-height: 1.55; color: var(--cert-ink-soft); max-width: 76%; margin: 0 auto 0.5cqw; } .cert-body strong { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.4cqw; color: var(--cert-deep); display: block; margin: 0.3cqw 0 0.4cqw; } /* Score / Date strip */ .cert-meta { display: flex; justify-content: center; gap: 4cqw; margin: 0.4cqw 0 0.5cqw; } .cert-meta-item { text-align: center; } .cert-meta-label { font-family: 'DM Sans', sans-serif; font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.2em; color: var(--cert-ink-mute); text-transform: uppercase; margin-bottom: 0.2cqw; } .cert-meta-value { font-family: 'Fraunces', serif; font-size: 1.55cqw; font-weight: 600; color: var(--cert-deep); } .cert-meta-value.is-score { color: var(--cert-accent); } /* Official seal — top-right, next to certificate ID */ .cert-seal { width: 4.4cqw; height: 4.4cqw; min-width: 44px; min-height: 44px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--cert-seal-from), var(--cert-seal-to)); display: flex; align-items: center; justify-content: center; color: var(--cert-bg); font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.6cqw; text-align: center; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 3px 10px rgba(139,115,50,.4); border: 2px solid var(--cert-bg); outline: 2px solid var(--cert-border-gold); flex-shrink: 0; position: relative; line-height: 1.15; } .cert-seal::before { content: ""; position: absolute; inset: 6%; border: 1px dashed rgba(251,249,244,0.55); border-radius: 50%; } /* ───────── Footer: QR on LEFT + signatures on RIGHT ───────── */ .cert-footer { margin-top: auto; display: grid; grid-template-columns: auto 1fr; /* QR fixed-width left, signatures take remaining */ gap: 2.4cqw; align-items: end; padding-top: 1.4cqw; padding-bottom: 0.4cqw; /* extra cushion above gold border */ } /* QR + verify column */ .cert-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.4cqw; min-width: 7cqw; } .cert-qr { width: 6.8cqw; height: 6.8cqw; min-width: 56px; min-height: 56px; background: #fff; padding: 0.35cqw; border: 1px solid #E5EAF1; border-radius: 4px; box-shadow: 0 2px 6px rgba(11,26,59,.08); } .cert-qr img, .cert-qr svg { width: 100%; height: 100%; display: block; } .cert-qr-label { font-family: 'DM Sans', sans-serif; font-size: 0.65cqw; text-align: center; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cert-ink-mute); font-weight: 600; line-height: 1.4; } .cert-qr-label strong { color: var(--cert-accent); display: block; font-size: 0.75cqw; letter-spacing: 0.1em; } /* Signatures container — distributes N signature blocks evenly */ .cert-signatures { display: grid; grid-template-columns: repeat(var(--cert-sig-count, 3), 1fr); gap: 1.6cqw; align-items: end; } .cert-sig { text-align: center; } /* Image-based signature (from DB) */ .cert-sig-image { height: 3.2cqw; min-height: 36px; width: 100%; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 0.2cqw; } .cert-sig-image img { max-height: 100%; max-width: 100%; object-fit: contain; /* If the signature is dark on transparent background, this preserves it. */ } /* Signature line under the image */ .cert-sig-line { border-bottom: 1.2px solid var(--cert-border-dark); margin: 0 0 0.4cqw; width: 100%; } .cert-sig-name { font-family: 'DM Sans', sans-serif; font-size: 1cqw; font-weight: 600; color: var(--cert-deep); line-height: 1.2; } .cert-sig-title { font-family: 'DM Sans', sans-serif; font-size: 0.78cqw; color: var(--cert-ink-mute); letter-spacing: 0.05em; margin-top: 0.15cqw; line-height: 1.3; } /* ── Print / PDF rules ── */ @page { size: A4 landscape; margin: 0; } @media print { html, body { background: var(--cert-bg); padding: 0; margin: 0; } .cert-page { padding: 0; } .cert-actions { display: none !important; } .cert { box-shadow: none !important; width: 297mm; height: 210mm; max-width: none; aspect-ratio: auto; page-break-after: avoid; page-break-inside: avoid; } } /* ── Tablet ── */ @media (max-width: 900px) { .cert { aspect-ratio: auto; min-height: 70vh; } .cert-recipient { font-size: 6.6cqw; } .cert-title { font-size: 4.8cqw; } .cert-inner { inset: 36px 36px; } } /* ── Mobile ── */ @media (max-width: 600px) { .cert-page { padding: 16px 10px 60px; } .cert-actions { flex-direction: column; } .cert-actions .cert-btn { justify-content: center; } .cert { aspect-ratio: auto; } .cert-inner { position: static; inset: auto; padding: 28px 24px; } .cert-watermark { display: none; } .cert-watermark-text { font-size: 18cqw; } /* Stack QR+signatures vertically on phone */ .cert-footer { grid-template-columns: 1fr; gap: 4cqw; padding-top: 4cqw; } .cert-signatures { grid-template-columns: 1fr; gap: 3cqw; } .cert-qr-wrap { margin: 0 auto; } .cert-meta { gap: 6cqw; flex-wrap: wrap; } .cert-recipient { font-size: 9cqw; padding: 0 2cqw; } .cert-title { font-size: 6.4cqw; } .cert-body { font-size: 2.6cqw; max-width: 96%; line-height: 1.55; } .cert-body strong { font-size: 3cqw; } .cert-meta-value { font-size: 3.2cqw; } .cert-meta-label { font-size: 2cqw; } .cert-sig-image { height: 9cqw; } .cert-sig-name { font-size: 2.5cqw; } .cert-sig-title { font-size: 2.1cqw; } .cert-eyebrow { font-size: 2.2cqw; } .cert-conferral { font-size: 2.6cqw; } .cert-subtitle { font-size: 3cqw; } .cert-brand-name { font-size: 4.5cqw; } .cert-brand-icon { font-size: 4cqw; width: 9cqw; height: 9cqw; } .cert-id { font-size: 2cqw; } .cert-qr { width: 22cqw; height: 22cqw; padding: 1.4cqw; } .cert-qr-label { font-size: 1.9cqw; } .cert-qr-label strong { font-size: 2.2cqw; } .cert-seal { width: 11cqw; height: 11cqw; font-size: 1.6cqw; flex-shrink: 0; } .cert-brand-right { gap: 2cqw; } .cert-corner { width: 60px; height: 60px; } .cert::before { inset: 12px; } .cert::after { inset: 18px; } } /* ════════════════════════════════════════════════════════════ THEME PRESETS — apply by setting To create a new theme: copy this block, change name + colours. ═══════════════════════════════════════════════════════════════ */ /* Medical (deeper navy, blue gold) */ body.cert-theme-medical { --cert-bg: #FBFAF6; --cert-border-dark: #0A1F3D; --cert-border-gold: #B5934A; --cert-accent: #185FA5; --cert-deep: #0A1F3D; --cert-seal-from: #B5934A; --cert-seal-to: #6B5320; --cert-watermark-rgb: 10, 31, 61; } /* Pharmacy (emerald + warm gold) */ body.cert-theme-pharmacy { --cert-bg: #FAF9F1; --cert-border-dark: #063D2F; --cert-border-gold: #C8A95A; --cert-accent: #0E7D5C; --cert-deep: #063D2F; --cert-seal-from: #C8A95A; --cert-seal-to: #8B7332; --cert-watermark-rgb: 6, 61, 47; } /* Nursing (deep plum + gold) */ body.cert-theme-nursing { --cert-bg: #FBF6F8; --cert-border-dark: #2D105A; --cert-border-gold: #C8A95A; --cert-accent: #6C2FC7; --cert-deep: #2D105A; --cert-seal-from: #C8A95A; --cert-seal-to: #8B7332; --cert-watermark-rgb: 45, 16, 90; } /* Dental (deep teal + warm gold) */ body.cert-theme-dental { --cert-bg: #F6FAFA; --cert-border-dark: #0E4A5A; --cert-border-gold: #C8A95A; --cert-accent: #156878; --cert-deep: #0E4A5A; --cert-seal-from: #C8A95A; --cert-seal-to: #8B7332; --cert-watermark-rgb: 14, 74, 90; } /* IPC (deep crimson + gold) */ body.cert-theme-ipc { --cert-bg: #FCF7F6; --cert-border-dark: #5C1020; --cert-border-gold: #C8A95A; --cert-accent: #8A1830; --cert-deep: #5C1020; --cert-seal-from: #C8A95A; --cert-seal-to: #8B7332; --cert-watermark-rgb: 92, 16, 32; }