/* Shared visual baseline for every Elements email. * * Every email's carries `class='email'` plus its own per- * email class (e.g. `class='email payment-received'`). All rules * here scope under `.email`, so per-email stylesheets can use short * class names (`.wrap`, `.mark`, `.h1`, `.cta`, etc.) without any * risk of leaking into the live site. The Elements build hoists * imported CSS into every page that transitively imports a * template; this scoping is the only thing keeping email rules out * of /home, /courses/:id/lessons/:id, etc. * * Inline-friendly: no external fonts, no images, no media queries, * no CSS variables (older Outlook strips them). Hex colors only. * * Aesthetic: * - White background, single 560px column, system-font sans * - Dark navy "Elements" mark + dark navy CTA buttons * - #185FA5 link color, hairline dividers between sections * * Font stack mirrors the system default close to our brand without * pulling any web fonts (Gmail / Outlook strip them anyway): * macOS / iOS → SF Pro, Windows → Segoe UI, Android → Roboto. */ .email { margin: 0; padding: 32px 16px; background: #ffffff; color: #0f172a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; } /* Centered 560px column. Padding lives on .email; the wrap just constrains width. */ .email .wrap { max-width: 560px; margin: 0 auto; } /* Bold dark-navy "Elements" mark — plain text, no image. Top-left of every email. */ .email .mark { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; margin: 0 0 28px 0; text-decoration: none; display: inline-block; } .email h1 { font-size: 22px; font-weight: 600; margin: 0 0 16px 0; color: #0f172a; } .email p { margin: 0 0 16px 0; color: #0f172a; } .email .muted { color: #475569; } .email .tertiary { color: #64748b; font-size: 13px; } .email a { color: #185fa5; text-decoration: underline; } /* Primary dark-navy CTA. */ .email .cta { display: inline-block; padding: 12px 24px; background: #0f172a; color: #ffffff !important; text-decoration: none; border-radius: 6px; font-weight: 500; font-size: 15px; margin: 8px 0 12px 0; } .email .cta-secondary { display: inline-block; padding: 8px 0; color: #185fa5 !important; text-decoration: underline; font-weight: 500; font-size: 14px; margin: 0; } /* Hairline divider used between sections. */ .email hr { border: 0; border-top: 1px solid #e2e8f0; margin: 24px 0; } /* Footer common shell. */ .email .footer { margin-top: 28px; padding-top: 16px; border-top: 1px solid #e2e8f0; font-size: 12px; color: #64748b; } .email .footer a { color: #64748b; text-decoration: underline; } /* Section header — small uppercase gray eyebrows. */ .email .section-head { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; margin: 24px 0 12px 0; } /* A row inside a digest section. */ .email .row { margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; } .email .row:last-child { border-bottom: 0; padding-bottom: 0; } .email .row-text a { color: #185fa5; text-decoration: none; } .email .snippet { margin: 6px 0 6px 0; padding-left: 10px; border-left: 2px solid #cbd5e1; color: #475569; font-size: 14px; } .email .meta { font-size: 12px; color: #94a3b8; margin-top: 4px; } /* Receipt block used by payment-received. */ .email .receipt { margin: 8px 0 16px 0; font-size: 14px; color: #0f172a; } .email .receipt-row { padding: 4px 0; display: block; } .email .receipt-key { display: inline-block; width: 110px; color: #64748b; }