/* GFD Staff Training App — Styles Design by Rose Tablate (2026) Extracted from GFD_Manual_v2_2026.html IMPORTANT: These design elements are Rose's work. Preserve fonts, colors, spacing, and layout when making changes. Fonts: DM Sans (body), Fraunces (headers) Palette: Teal #1B4F5C → #2D7A8A → #3aafb9, Orange #E8853D, BG #E8F4F8 */ /* ============================================================ NOTE ON ACTUAL VALUES IN SOURCE FILE The file's CSS variables differ from the palette note above. Below are Rose's EXACT values from GFD_Manual_v2_2026.html. ============================================================ */ /* ── Google Fonts ──────────────────────────────────────────── Loaded via in HTML : ──────────────────────────────────────────────────────────── */ /* ── CSS Variables ───────────────────────────────────────────── */ :root { --t: #00B8D4; /* teal / primary accent */ --db: #1B3A5C; /* dark blue / headings */ --mb: #2E6DA4; /* medium blue / links & secondary */ --r: #C0392B; /* red / critical alerts */ --g: #27AE60; /* green / success */ --o: #F39C12; /* orange / warnings */ --bg: #F8FAFC; /* page background */ --c: #FFF; /* white / cards */ --dg: #333; /* dark gray / body text */ } /* ── Reset ───────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ── Body ────────────────────────────────────────────────────── */ body { font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--dg); height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; } /* ── Header (.hd) ────────────────────────────────────────────── */ .hd { background: linear-gradient(135deg, var(--db), var(--mb)); padding: 10px 12px; display: flex; align-items: center; gap: 7px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); z-index: 20; flex-shrink: 0; } .hd h1 { color: #fff; font-size: 12px; font-weight: 700; } .hd p { color: rgba(255, 255, 255, .55); font-size: 8px; } .hd-l { font-size: 18px; } .hd-t { flex: 1; } /* ── Badges (.bg) ────────────────────────────────────────────── */ .bg { border-radius: 4px; padding: 1px 5px; font-size: 7px; font-weight: 700; letter-spacing: .3px; } .bg-r { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); } .bg-a { background: var(--t); color: #fff; } /* ── Back Button (.bk-b) ────────────────────────────────────── */ .bk-b { background: rgba(255, 255, 255, .13); border: none; border-radius: 5px; color: #fff; padding: 3px 8px; cursor: pointer; font-size: 11px; font-weight: 600; font-family: inherit; display: none; } /* ── Admin Bar (.ab) ─────────────────────────────────────────── */ .ab { background: linear-gradient(90deg, var(--t), var(--mb)); padding: 4px 12px; display: none; align-items: center; gap: 5px; flex-shrink: 0; flex-wrap: wrap; } .ab.on { display: flex; } .ab span { color: #fff; font-size: 9px; font-weight: 600; flex: 1; } .ab button { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; color: #fff; padding: 2px 7px; font-size: 8px; font-weight: 600; cursor: pointer; font-family: inherit; } .ab button:hover { background: rgba(255, 255, 255, .3); } .ab .bw { background: rgba(192, 57, 43, .6); } /* ── Alert Banner (.al) ──────────────────────────────────────── */ .al { background: linear-gradient(90deg, #FFF3E0, #FFECB3); padding: 5px 10px; display: none; align-items: center; gap: 5px; cursor: pointer; flex-shrink: 0; border-bottom: 1px solid #FFCC80; } .al.on { display: flex; } .al .ai { font-size: 14px; } .al .at { flex: 1; font-size: 9px; color: #E65100; font-weight: 600; } .al .ac { background: var(--r); color: #fff; border-radius: 7px; padding: 1px 5px; font-size: 8px; font-weight: 700; } /* ── Content Area (.ct) ──────────────────────────────────────── */ .ct { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ci { padding: 10px 10px 60px; } /* ── Search Widget (.sw / .sx) ───────────────────────────────── */ .sw { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 0 0 7px; } .sx { display: flex; align-items: center; gap: 5px; background: #fff; border-radius: 7px; padding: 7px 9px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); border: 1px solid #E2E8F0; } .sx input { border: none; outline: none; flex: 1; font-size: 11px; font-family: inherit; background: transparent; } /* ── Section Card (.cd) ──────────────────────────────────────── */ .cd { display: flex; align-items: center; gap: 9px; width: 100%; background: #fff; border: 1px solid #E2E8F0; border-radius: 9px; padding: 9px 10px; margin-bottom: 5px; cursor: pointer; transition: .12s; text-align: left; box-shadow: 0 1px 2px rgba(0, 0, 0, .02); } .cd:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .05); border-color: var(--t); } .cd-i { font-size: 20px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(0, 184, 212, .06); border-radius: 7px; flex-shrink: 0; } .cd-f { flex: 1; min-width: 0; } .cd-n { font-size: 11px; font-weight: 700; color: var(--db); } .cd-s { font-size: 8px; color: #888; margin-top: 1px; } /* ── Tag Badge (.tg) ─────────────────────────────────────────── */ .tg { background: var(--t); color: #fff; font-size: 6px; padding: 1px 3px; border-radius: 2px; font-weight: 700; margin-left: 2px; vertical-align: middle; } /* ── Detail View (.dv / .dh) ─────────────────────────────────── */ .dv { display: none; } .dh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .d-i { font-size: 24px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(0, 184, 212, .06); border-radius: 9px; } .d-t { font-size: 14px; font-weight: 700; color: var(--db); line-height: 1.2; } .d-b { font-size: 8px; color: #fff; background: var(--t); border-radius: 3px; padding: 1px 5px; margin-top: 2px; display: inline-block; font-weight: 600; } /* ── Detail Body (.db) ───────────────────────────────────────── */ .db { background: #fff; border-radius: 10px; padding: 12px 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .03); border: 1px solid #E2E8F0; } /* ── Content Blocks (.bk) ────────────────────────────────────── */ .bk { margin-bottom: 12px; } .bk h3 { font-size: 12px; font-weight: 700; color: var(--db); margin-bottom: 4px; border-left: 2px solid var(--t); padding-left: 7px; } .bk p { font-size: 11px; line-height: 1.45; color: #444; margin: 0 0 4px; } .bk ul, .bk ol { margin: 2px 0 5px 12px; padding: 0; } .bk li { font-size: 10px; line-height: 1.4; color: #444; margin-bottom: 1px; } /* ── Critical Box (.cb) ──────────────────────────────────────── */ .cb { background: #FFF5F5; border: 1px solid rgba(192, 57, 43, .12); border-radius: 5px; padding: 6px 8px; margin: 4px 0; } .ct2 { font-size: 8px; font-weight: 700; color: var(--r); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .3px; } .cx { font-size: 10px; color: #444; line-height: 1.35; padding-left: 10px; position: relative; margin-bottom: 1px; } .cx::before { content: '\2605'; /* ★ */ position: absolute; left: 0; color: var(--r); font-size: 8px; } /* ── Note Box (.nb) ──────────────────────────────────────────── */ .nb { background: #FFFDE7; border: 1px solid #FFF176; border-radius: 4px; padding: 5px 8px; font-size: 9px; color: #6D4C00; margin-top: 3px; font-style: italic; } /* ── Link Box (.lb) ──────────────────────────────────────────── */ .lb { background: #E8F5E9; border: 1px solid #A5D6A7; border-radius: 4px; padding: 5px 8px; font-size: 9px; margin-top: 3px; } .lb a { color: #2E7D32; font-weight: 600; text-decoration: none; } .lb a:hover { text-decoration: underline; } /* ── Table (.tb) ─────────────────────────────────────────────── */ .tb { width: 100%; border-collapse: collapse; font-size: 10px; margin: 4px 0; } .tb td { padding: 3px 6px; border-bottom: 1px solid #E2E8F0; vertical-align: top; } .tb tr:nth-child(even) { background: #F8FAFC; } .tb td:first-child { font-weight: 600; color: var(--db); width: 35%; } /* ── Media Slot (.ms) ────────────────────────────────────────── */ .ms { border: 2px dashed #CBD5E1; border-radius: 6px; padding: 10px; text-align: center; margin: 5px 0; background: #FAFBFC; min-height: 40px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; position: relative; } .ms.hm { border-style: solid; border-color: var(--t); padding: 2px; } .ms img, .ms video { max-width: 100%; max-height: 200px; border-radius: 4px; } .ms .ml { font-size: 8px; color: #999; font-style: italic; } .ms .ma { background: var(--t); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 9px; font-weight: 600; cursor: pointer; font-family: inherit; display: none; } .ms .mr { position: absolute; top: 2px; right: 2px; background: var(--r); color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 9px; cursor: pointer; display: none; line-height: 18px; text-align: center; } /* ── Admin Mode Overrides (.am) ──────────────────────────────── */ .am .ma { display: inline-block !important; } .am .ms.hm .mr { display: block !important; } .ms input[type=file] { display: none; } .am .ams { display: inline-block !important; } .ams { background: var(--t); color: #fff; border: none; border-radius: 4px; padding: 3px 8px; font-size: 8px; font-weight: 600; cursor: pointer; font-family: inherit; display: none; margin: 3px 0; } /* ── Navigation Buttons (.nv) ────────────────────────────────── */ .nv { display: flex; gap: 4px; margin-top: 10px; } .nv button { background: #fff; border: 1px solid #E2E8F0; border-radius: 5px; padding: 6px 8px; cursor: pointer; font-size: 9px; color: var(--mb); font-weight: 600; flex: 1; font-family: inherit; } /* ── Footer (.ft) ────────────────────────────────────────────── */ .ft { text-align: center; padding: 14px 0 6px; font-size: 8px; color: #AAA; border-top: 1px solid #E2E8F0; margin-top: 10px; line-height: 1.3; } /* ── Modal (.mo / .md) ───────────────────────────────────────── */ .mo { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 100; align-items: center; justify-content: center; } .mo.on { display: flex; } .md { background: #fff; border-radius: 10px; padding: 16px; max-width: 300px; width: 90%; box-shadow: 0 6px 25px rgba(0, 0, 0, .15); } .md h2 { font-size: 13px; color: var(--db); margin-bottom: 8px; } .md p { font-size: 10px; color: #666; margin-bottom: 8px; } .md input, .md select { width: 100%; padding: 7px 8px; border: 1px solid #E2E8F0; border-radius: 5px; font-size: 11px; font-family: inherit; margin-bottom: 6px; outline: none; } .md button { width: 100%; padding: 7px; background: var(--db); color: #fff; border: none; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; } .md .cc { background: transparent; color: #888; margin-top: 3px; font-weight: 500; } .md .er { color: var(--r); font-size: 9px; margin-bottom: 4px; display: none; } /* ── Log/Changelog Card (.lc) ────────────────────────────────── */ .lc { background: #fff; border: 1px solid #E2E8F0; border-radius: 6px; padding: 6px 8px; margin-bottom: 3px; font-size: 9px; display: flex; align-items: center; gap: 6px; } .ld { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .lf { flex: 1; } .ln { font-weight: 700; color: var(--db); } .lt { color: #999; font-size: 8px; } .ls { color: var(--mb); font-size: 8px; } /* ── Regulatory Card (.rc) ───────────────────────────────────── */ .rc { background: #fff; border: 1px solid #E2E8F0; border-radius: 7px; padding: 8px; margin-bottom: 5px; } .rh { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; } .rs { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .rs.gn { background: var(--g); } .rs.og { background: var(--o); } .rs.rd { background: var(--r); } .rn { font-size: 10px; font-weight: 700; color: var(--db); flex: 1; } .rd2 { font-size: 9px; color: #555; line-height: 1.3; } .ra button { background: var(--mb); color: #fff; border: none; border-radius: 3px; padding: 2px 6px; font-size: 8px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 3px; } /* ── Quiz Block (.qz) ───────────────────────────────────────── */ .qz { background: #F3E5F5; border: 1px solid #CE93D8; border-radius: 6px; padding: 8px 10px; margin: 6px 0; } .qz h4 { font-size: 10px; color: #6A1B9A; margin-bottom: 4px; } .qz label { display: block; font-size: 10px; padding: 3px 0; cursor: pointer; color: #444; } .qz label:hover { color: var(--db); } .qz input[type=radio] { margin-right: 4px; } .qz button { background: #7B1FA2; color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 9px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 4px; } .qz .qr { font-size: 10px; font-weight: 600; margin-top: 4px; padding: 4px; border-radius: 4px; } .qr-ok { background: #E8F5E9; color: #2E7D32; } .qr-no { background: #FFEBEE; color: #C62828; } /* ── Changelog Entry (.cl) ───────────────────────────────────── */ .cl { background: #fff; border: 1px solid #E2E8F0; border-radius: 6px; padding: 6px 8px; margin-bottom: 3px; font-size: 9px; } .cl-d { font-weight: 600; color: var(--db); } .cl-t { color: #888; font-size: 8px; } .cl-c { color: #444; margin-top: 2px; } /* ── Scrollbar ───────────────────────────────────────────────── */ .ct::-webkit-scrollbar { width: 3px; } .ct::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; } /* ── Category Header (.cat-hd) ───────────────────────────────── */ .cat-hd { font-size: 9px; font-weight: 700; color: var(--mb); text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 4px; padding: 3px 0; border-bottom: 1px solid #E2E8F0; } /* ============================================================ INLINE STYLES (commonly used in JS-rendered templates) ============================================================ These are NOT in the