/* * MyLinkLine design system — shared tokens and global components for the * portal redesign. Pages must also load the font bundle: * DM Sans / Sora / Bungee Hairline (see login.erb for the * fonts.googleapis.com link). */ :root { --page-bg: #F2F4F6; --panel-bg: #FAFAFA; --text-dark: #282828; --text-muted: #8A8A8A; --input-bg: #F5F5F5; --input-border: #B0B0B0; --focus-mint: #1EFFBC; --brand-deep: #0E4348; --brand-bright: #13EF76; --link-coral: #F01456; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Geometric triangle motif (transparent PNG) layered over the page color */ background: var(--page-bg) url("/pattern_Triangles.png") center / cover no-repeat fixed; color: var(--text-dark); } /* * Sticky-footer page scaffold: body becomes a full-height column and the * footer anchors to the bottom even on short pages. Center main content * with `margin: auto` (see .login-card) or let it flow from the top. */ body.ds-page { min-height: 100vh; display: flex; flex-direction: column; } /* ---------- Global footer ---------- */ .page-footer { margin-top: auto; /* pushes the footer to the bottom of body.ds-page */ padding: 28px 16px; text-align: center; color: var(--text-dark); font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.6; } .page-footer a { color: var(--text-dark); text-decoration: underline; margin: 0 4px; } .page-footer .tagline { display: block; font-size: 11px; margin-top: 2px; color: var(--text-muted); }