/* ============================================================ SupervisionReady — Design Tokens + Typography Carried over from CounselorReady UNCHANGED. Brand continuity is deliberate: SupervisionReady is "powered by CounselorReady", and the two products must look like one family. PROTECTED FILE. See CLAUDE.md. The four brand anchors and the two typefaces are fixed: Burgundy #6B1D34 Hunter #4A7C59 Gold #D4A855 Navy #284157 Cormorant Garamond (display) Lato (body) Import once on every page: ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Lato:wght@300;400;500;600;700;900&display=swap'); :root { /* ---------- BRAND CORE (4 anchors) ---------------------- */ --sr-burgundy: #6B1D34; /* H1, wordmark "Supervision", CTAs, alerts */ --sr-hunter: #4A7C59; /* wordmark "Ready", primary buttons, met */ --sr-gold: #D4A855; /* accents, badges, rules */ --sr-navy: #284157; /* H2, secondary text, figures */ /* ---------- BURGUNDY SCALE ------------------------------ */ --sr-burgundy-50: #FDF5F6; --sr-burgundy-100: #FAE8EB; --sr-burgundy-200: #F5D0D6; --sr-burgundy-300: #EBA9B5; --sr-burgundy-400: #DD768A; --sr-burgundy-500: #C94D65; --sr-burgundy-600: #A83350; --sr-burgundy-700: #8B2542; /* hover / pressed CTA */ --sr-burgundy-800: #6B1D34; /* PRIMARY brand */ --sr-burgundy-900: #4A1524; --sr-burgundy-950: #2D0A14; /* ---------- HUNTER GREEN SCALE -------------------------- */ --sr-hunter-50: #F3F6F4; --sr-hunter-100: #E3EBE5; --sr-hunter-200: #C8D7CC; --sr-hunter-300: #A1BBA8; --sr-hunter-400: #759A7F; --sr-hunter-500: #547C5F; --sr-hunter-600: #3D6A4A; /* hover on primary button */ --sr-hunter-700: #4A7C59; /* PRIMARY brand */ --sr-hunter-800: #3D6A4A; --sr-hunter-900: #2B4133; /* "Ready" in the wordmark on a light background */ --sr-wordmark-ready: #3D6A4A; /* ---------- GOLD / HONEY SCALE -------------------------- */ --sr-gold-50: #FDF9F0; --sr-gold-100: #F9F0DB; --sr-gold-200: #F3E0B5; --sr-gold-300: #EACD86; --sr-gold-400: #D4A855; --sr-gold-500: #D4A855; --sr-gold-600: #A67936; --sr-gold-700: #865E2C; /* ---------- NAVY SCALE ---------------------------------- */ --sr-navy-50: #F0F4F7; --sr-navy-100: #DCE5EC; --sr-navy-200: #B8CBD9; --sr-navy-300: #93B0C5; --sr-navy-400: #5C82A0; --sr-navy-500: #284157; /* PRIMARY brand */ --sr-navy-600: #1F344A; --sr-navy-700: #182838; --sr-navy-800: #111D29; --sr-navy-900: #0A121A; /* ---------- NEUTRALS ------------------------------------ */ --sr-stone-50: #F8F7F4; /* page background */ --sr-stone-100: #F0EFEA; --sr-stone-200: #E5E3DC; --sr-grey: #57534e; /* ---------- TYPE ---------------------------------------- */ --sr-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sr-font-body: 'Lato', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --sr-font-mono: ui-monospace, 'SF Mono', Monaco, Consolas, monospace; } /* ---------- BASE ------------------------------------------ */ html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--sr-font-body); background: var(--sr-stone-50); color: #1c1917; margin: 0; } h1, h2, .font-display { font-family: var(--sr-font-display); } /* ---------- WORDMARK -------------------------------------- */ /* "Supervision" burgundy + "Ready" hunter. Never restyle these two. */ .sr-wordmark { font-family: var(--sr-font-display); font-weight: 600; letter-spacing: -.01em; } .sr-wordmark .sr-wm-a { color: var(--sr-burgundy-800); } .sr-wordmark .sr-wm-b { color: var(--sr-wordmark-ready); } /* "powered by CounselorReady" — the same two-tone treatment, smaller. */ .sr-powered { font-size: 11px; color: var(--sr-grey); } .sr-powered .sr-cr-a { color: var(--sr-burgundy-800); } .sr-powered .sr-cr-b { color: var(--sr-wordmark-ready); } /* ---------- PHONE-FIRST ----------------------------------- */ /* The whole app must work at 360px wide so a Capacitor wrapper needs no changes. Inputs are 16px on touch devices so iOS does not zoom the page when a field is focused. */ input, select, textarea, button { font-family: inherit; } @media (hover: none) and (pointer: coarse) { input, select, textarea { font-size: 16px !important; } } /* Respect the iPhone safe areas when running inside the wrapper. */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .sr-safe-bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } /* ---------- SHARED COMPONENTS ----------------------------- */ .progress-fill { transition: width .8s cubic-bezier(.4,0,.2,1); } @keyframes spin { to { transform: rotate(360deg); } } .sr-spinner { width: 36px; height: 36px; border: 3px solid #e7e5e4; border-top-color: var(--sr-burgundy-800); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; } .tab-btn { padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--sr-grey); border-bottom: 2px solid transparent; background: none; cursor: pointer; } .tab-btn.active { color: var(--sr-burgundy-800); border-bottom-color: var(--sr-burgundy-800); } .nav-link { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--sr-grey); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .nav-link:hover { color: var(--sr-burgundy-800); background: var(--sr-burgundy-50); } .nav-link.active { color: var(--sr-burgundy-800); background: var(--sr-burgundy-50); font-weight: 600; } /* ============================================================ PRINT A supervisor printing a record is handing paper to a board, a director or a file. So: drop the chrome and every control, keep the figures, the rule, the citation and the signature status, and make sure the board link is readable on paper rather than being a dead underline. ============================================================ */ @media print { @page { margin: 14mm; } html, body { background: #fff !important; } body { font-size: 11pt; padding: 0; } /* Chrome and controls have no meaning on paper. */ #sr-header, #sr-footer, button, .tab-btn, select, input, textarea, #addForm, #editModal, #packetModal, #evalFormCard, .no-print { display: none !important; } /* Tabs: print every panel, not just the one on screen. Add any new tab panel here, or it silently vanishes from the printout. */ #tab-hours, #tab-progress, #tab-evals, #tab-docs { display: block !important; } /* Share is a control surface, not a record — never printed. */ #tab-share { display: none !important; } .sr-table-wrap { overflow: visible !important; } /* Flatten cards so they don't waste a page in borders and shadow. */ .card, .bg-white, [class*="rounded-xl"] { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; page-break-inside: avoid; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; } /* Progress bars still have to read in greyscale. */ .progress-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* A link is useless on paper unless the URL is printed with it. */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; } /* ...but not for in-page anchors. */ a[href^="#"]::after, a[href^="/"]::after { content: ""; } /* Say on the paper what it is and when it was printed. */ .print-only { display: block !important; } } .print-only { display: none; }