/* * iSharetek brand palette + shared form styles. * * Colors CORRECTED in Rev. 18 to the exact values used in the client's own * prior build (google-sheets-manager/src/components/BrandLogo.tsx) — navy * #0a1c58 and orange #f36523, straight from that app's hardcoded SVG logo, * not the pixel-sampled approximation Rev. 15 used (#050e66/#ed712f, off * by a visible amount). Typeface matched too: Plus Jakarta Sans for UI/ * headings, JetBrains Mono for tabular/numeric data — both loaded via * Google Fonts in each page's (see e.g. allocation/base.html). * * Font sizes bumped up across the board per Rev. 15 item 2 (previous pass * was too small, especially the T&C/consent text under each program). */ :root { --brand-navy: #0a1c58; --brand-navy-dark: #071340; --brand-orange: #f36523; --bg: #f7f9fb; --card: #ffffff; --border: #dde3e8; --text: #1c2430; --muted: #5a6672; --ok: #1e7d3a; --danger: #c0392b; --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } * { box-sizing: border-box; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); margin: 0; font-size: 17px; /* up from the browser default 16px baseline */ line-height: 1.5; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* White header, matching the client's own prior app (Header.tsx uses * bg-white, not a dark navy bar) — the logo's navy strokes are drawn for * a light background and disappear against a dark one, which is what * happened when this had a navy header. */ header.brand-header { background: var(--card); color: var(--text); padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(10, 28, 88, 0.04); } header.brand-header .left { display: flex; align-items: center; gap: 0.9rem; } header.brand-header img { height: 42px; } header.brand-header h1 { font-size: 1.15rem; margin: 0; font-weight: 700; color: var(--brand-navy); } header.brand-header .left strong { color: var(--brand-navy); font-weight: 700; } /* Nav as a horizontal row of pill buttons — not bare text links — each * one clearly clickable, with a hover state and a persistent highlight * on whichever page is currently open. */ header.brand-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } header.brand-header nav a { color: var(--brand-navy); text-decoration: none; font-size: 0.9rem; font-weight: 600; white-space: nowrap; padding: 0.5rem 0.9rem; border-radius: 8px; transition: background 0.12s, color 0.12s; } header.brand-header nav a:hover { background: #eef1fb; } header.brand-header nav a:active { background: #dfe4f7; } header.brand-header nav a.current { background: var(--brand-navy); color: #fff; } header.brand-header nav a.nav-logout { color: var(--muted); margin-left: 0.3rem; padding-left: 0.9rem; border-left: 1px solid var(--border); border-radius: 0; } main.page { max-width: 780px; margin: 2rem auto; padding: 0 1rem 4rem; } h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; color: var(--brand-navy); } .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.4rem; margin-bottom: 1rem; } label { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--muted); } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=password], select { width: 100%; padding: 0.65rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; margin-bottom: 1rem; background: #fff; color: var(--text); } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .child-card { border: 1px solid var(--border); border-radius: 8px; padding: 1.1rem; margin-bottom: 1rem; position: relative; background: #fcfdfe; } .child-card h3 { margin: 0 0 0.85rem; font-size: 1.05rem; } .remove-child { position: absolute; top: 0.8rem; right: 0.8rem; background: none; border: none; color: var(--danger); cursor: pointer; font-size: 0.9rem; } /* Consent / T&C text — previously too small; this is the specific fix * requested (Rev. 15 item 2: "especially the T&C under program and * payment"). */ .checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.9rem; font-size: 0.98rem; } .checkbox-row input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; } .checkbox-row span { color: var(--text); line-height: 1.45; } .voucher-number { display: none; } .voucher-number.visible { display: block; } button, .button-link { background: var(--brand-navy); color: #fff; border: none; border-radius: 6px; padding: 0.7rem 1.2rem; font-size: 1rem; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; } button:hover, .button-link:hover { background: var(--brand-navy-dark); } button.secondary { background: #fff; color: var(--brand-navy); border: 1px solid var(--brand-navy); } .accent { background: var(--brand-orange); } .accent:hover { background: #d5601f; } button.submit-btn { width: 100%; padding: 1rem; font-size: 1.08rem; margin-top: 1rem; } button:disabled { opacity: 0.6; cursor: not-allowed; } /* Rev. 24: attendance Save buttons — grey "already recorded" state so a long roster shows at a glance which rows still need attention. Still clickable (re-saving to correct a mistake is valid), just visually receded next to the highlighted navy "Save" on unmarked rows. */ button.session-saved, button.session-saved:hover { background: var(--muted); color: #fff; } .totals { font-size: 1rem; } .totals div { display: flex; justify-content: space-between; padding: 0.3rem 0; } .totals .grand { font-weight: 700; font-size: 1.2rem; border-top: 1px solid var(--border); margin-top: 0.6rem; padding-top: 0.7rem; color: var(--brand-navy); } .payment-toggle { display: flex; gap: 1.25rem; margin-bottom: 1rem; flex-wrap: wrap; } .payment-toggle label { display: flex; align-items: center; gap: 0.45rem; font-weight: 500; color: var(--text); font-size: 1rem; } #error-box, .error-box { color: var(--danger); font-size: 0.95rem; margin-top: 0.6rem; background: #fdecea; border: 1px solid #f5c6c1; border-radius: 6px; padding: 0.7rem 0.9rem; } .two-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; } @media (max-width: 600px) { .two-choice { grid-template-columns: 1fr; } } .choice-card { background: var(--card); border: 2px solid var(--border); border-radius: 12px; padding: 2rem 1.5rem; text-align: center; text-decoration: none; color: var(--text); transition: border-color 0.15s; } .choice-card:hover { border-color: var(--brand-navy); } .choice-card .icon { font-size: 2.5rem; margin-bottom: 0.75rem; } .choice-card h3 { color: var(--brand-navy); margin: 0 0 0.5rem; font-size: 1.15rem; } .choice-card p { color: var(--muted); font-size: 0.95rem; margin: 0; } table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } th, td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.95rem; } th { background: #eef2f6; color: var(--muted); font-weight: 600; } tr:last-child td { border-bottom: none; } .messages { list-style: none; padding: 0; margin: 0 0 1rem; } .messages li { background: #e6f4ea; color: var(--ok); padding: 0.65rem 0.95rem; border-radius: 6px; margin-bottom: 0.5rem; font-size: 0.92rem; } .badge { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; } .badge.ongoing { background: #fff3cd; color: #8a6500; } .badge.completed { background: #e6f4ea; color: var(--ok); } .badge.pending_allocation { background: #eef2f6; color: var(--muted); } .badge.open { background: #e6f4ea; color: var(--ok); } .badge.commenced { background: #fff3cd; color: #8a6500; } /* Dashboard (allocation/dashboard.html) */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin: 1.25rem 0 2rem; } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--text); display: block; transition: border-color 0.15s; } .stat-card:hover { border-color: var(--brand-navy); } .stat-card .stat-value { font-size: 1.9rem; font-weight: 700; color: var(--brand-navy); line-height: 1; } .stat-card .stat-value.alert { color: var(--brand-orange); } .stat-card .stat-label { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; } .dash-section { margin-bottom: 2.25rem; } .dash-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; } .dash-section-header h2 { margin: 0; } .dash-section-header a { font-size: 0.9rem; } .empty-note { color: var(--muted); font-size: 0.92rem; padding: 1rem; background: var(--card); border: 1px dashed var(--border); border-radius: 8px; }