/* * ============================================ * DIGITAL KEYS TO SOIL TAXONOMY — STYLESHEET * ============================================ * CSS custom properties for light/dark theming. * System preference auto-follows via JS on . * * Theme application: * :root → light (default) * :root.dark → dark (JS-toggled via class) */ /* ─── THEME: LIGHT (default) ─── */ :root { color-scheme: light; /* Base */ --color-bg: #f5f5f5; --color-surface: #ffffff; --color-text: #333333; --color-text-muted: #666666; --color-text-faint: #999999; --color-text-secondary: #555555; --color-text-hint: #888888; /* Borders */ --color-border: #dddddd; --color-border-emphasis: #1e3a47; /* Primary accent (soil teal) */ --color-accent: #4a90a4; --color-accent-dark: #2d5a6f; --color-accent-light: #6a9fb0; --color-accent-bg: #e8f4f8; --color-accent-bg-alt: #d4eaf0; --color-accent-border: #b8d9e5; /* Surfaces */ --color-surface-alt: #f9f9f9; --color-surface-header: #eef2f5; /* Glossary / warning tones */ --color-warn-bg: #fff3cd; --color-warn-border: #ffc107; --color-warn-hover: #ffe59d; --color-warn-text: #856404; /* Error */ --color-error-bg: #f8d7da; --color-error-text: #721c24; /* Shadows & gradients */ --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.05); --gradient-header: linear-gradient(135deg, #4a90a4 0%, #2d5a6f 100%); --gradient-classification: linear-gradient(135deg, #e8f4f8 0%, #d4eaf0 100%); /* Form controls */ --checkbox-accent: #4a90a4; } /* ─── THEME: DARK ─── */ :root.dark { color-scheme: dark; --color-bg: #121212; --color-surface: #1e1e1e; --color-text: #e0e0e0; --color-text-muted: #a0a0a0; --color-text-faint: #707070; --color-text-secondary: #b0b0b0; --color-text-hint: #808080; --color-border: #333333; --color-border-emphasis: #4a90a4; --color-accent: #5ba3b7; --color-accent-dark: #7ec0d4; --color-accent-light: #4a90a4; --color-accent-bg: #1a2b33; --color-accent-bg-alt: #162530; --color-accent-border: #2a4050; --color-surface-alt: #252525; --color-surface-header: #2a2a2a; --color-warn-bg: #2a2510; --color-warn-border: #7a6520; --color-warn-hover: #353015; --color-warn-text: #d4b850; --color-error-bg: #2a1515; --color-error-text: #e08080; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --gradient-header: linear-gradient(135deg, #1e3a47 0%, #152a35 100%); --gradient-classification: linear-gradient(135deg, #1a2b33 0%, #162530 100%); --checkbox-accent: #5ba3b7; } /* ─── THEME: GREEN ─── */ :root.green { color-scheme: dark; --color-bg: #0f2010; --color-surface: #1a3a1a; --color-text: #e8f5e8; --color-text-muted: #a8c8a8; --color-text-faint: #6a9a6a; --color-text-secondary: #c0d8c0; --color-text-hint: #8ab88a; --color-border: #2a4a2a; --color-border-emphasis: #4a7a4a; --color-accent: #c8a832; --color-accent-dark: #f0d060; --color-accent-light: #a08020; --color-accent-bg: #1e3a10; --color-accent-bg-alt: #182e0c; --color-accent-border: #3a5a20; --color-surface-alt: #1e3c1e; --color-surface-header: #152d15; --color-warn-bg: #2a2a10; --color-warn-border: #6a6010; --color-warn-hover: #353510; --color-warn-text: #c8b850; --color-error-bg: #2a1010; --color-error-text: #e08888; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4); --gradient-header: linear-gradient(135deg, #1a472a 0%, #0f2d18 100%); --gradient-classification: linear-gradient(135deg, #1e3a10 0%, #182e0c 100%); --checkbox-accent: #c8a832; } /* ─── THEME: SEPIA ─── */ :root.sepia { color-scheme: light; --color-bg: #f5ead0; --color-surface: #faf5e0; --color-text: #2a1a08; --color-text-muted: #6a4a28; --color-text-faint: #a08050; --color-text-secondary: #4a3016; --color-text-hint: #8a6040; --color-border: #e8dab0; --color-border-emphasis: #6a4a28; --color-accent: #8a5a20; --color-accent-dark: #5a2808; --color-accent-light: #b8822a; --color-accent-bg: #f0e8d0; --color-accent-bg-alt: #e8dcc0; --color-accent-border: #d8caa0; --color-surface-alt: #fdf8e8; --color-surface-header: #f0e8d0; --color-warn-bg: #f5e8c0; --color-warn-border: #b88020; --color-warn-hover: #edd898; --color-warn-text: #6a4800; --color-error-bg: #f5d8cc; --color-error-text: #8b2a18; --shadow-card: 0 2px 4px rgba(100, 60, 20, 0.12); --gradient-header: linear-gradient(135deg, #8a5a20 0%, #5a2808 100%); --gradient-classification: linear-gradient(135deg, #f0e8d0 0%, #e8dcc0 100%); --checkbox-accent: #8a5a20; } /* ─── THEME: HIGH CONTRAST ─── */ :root.high-contrast { color-scheme: dark; --color-bg: #000000; --color-surface: #000000; --color-text: #ffffff; --color-text-muted: #dddddd; --color-text-faint: #bbbbbb; --color-text-secondary: #eeeeee; --color-text-hint: #cccccc; --color-border: #ffffff; --color-border-emphasis: #ffff00; --color-accent: #ffff00; --color-accent-dark: #ffff00; --color-accent-light: #ffffaa; --color-accent-bg: #1a1a00; --color-accent-bg-alt: #111100; --color-accent-border: #ffff00; --color-surface-alt: #111111; --color-surface-header: #111111; --color-warn-bg: #1a1200; --color-warn-border: #ffcc00; --color-warn-hover: #2a2000; --color-warn-text: #ffcc00; --color-error-bg: #1a0000; --color-error-text: #ff6666; --shadow-card: none; --gradient-header: linear-gradient(#111111, #111111); --gradient-classification: linear-gradient(#1a1a00, #1a1a00); --checkbox-accent: #ffff00; } /* ─── RESET ─── */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ─── LAYOUT ─── */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; } .container { display: flex; height: 100vh; overflow: hidden; } .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .content-with-panel { display: flex; flex: 1; overflow: hidden; } /* ─── SIDEBAR ─── */ .sidebar { flex: 0 0 280px; background: var(--color-surface); border-right: 1px solid var(--color-border); overflow-y: auto; overflow-x: hidden; padding: 20px; position: relative; display: flex; flex-direction: column; } @media (max-width: 1200px) { .sidebar { flex-basis: 22%; min-width: 200px; } } @media (max-width: 768px) { .sidebar { flex-basis: 30%; min-width: 140px; padding: 15px; } } .sidebar-title { font-size: 22px; font-weight: 700; line-height: 1.3; margin-bottom: 15px; color: var(--color-text); text-align: center; } .sidebar.collapsed .sidebar-title { display: none; } .sidebar-controls { width: 100%; margin-bottom: 15px; align-self: center; display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; justify-content: center; position: relative; z-index: 10; flex-shrink: 0; min-width: 0; } /* Collapsed sidebar state */ .sidebar.collapsed { flex-basis: 60px; min-width: 60px; padding: 20px 4px; } @media (max-width: 768px) { .sidebar.collapsed { flex-basis: 50px; min-width: 50px; } } .sidebar.collapsed .sidebar-controls { flex-direction: column; gap: 4px; padding: 0; } .sidebar.collapsed .current-classification { display: none; } .sidebar.collapsed .selected-criteria-section { display: none; } .sidebar.collapsed .classification-path { margin-bottom: 0; } .sidebar.collapsed .classification-path .info-header { display: none; } .sidebar.collapsed .classification-step { padding: 2px 0; margin: 0; font-size: 11px; line-height: 1.2; } .sidebar.collapsed .classification-step .step-level, .sidebar.collapsed .classification-step .step-name { display: none; } .sidebar.collapsed .classification-step .step-code { padding: 0 2px; } /* ─── HEADER ─── */ header { background: var(--gradient-header); color: white; padding: 10px 20px; border-bottom: 2px solid var(--color-border-emphasis); } header h1 { font-size: 24px; margin-bottom: 5px; } header p { font-size: 16px; opacity: 0.9; font-weight: 600; } .breadcrumb { font-size: 15px; margin-top: 5px; opacity: 0.8; font-weight: 600; } /* ─── CONTENT AREA ─── */ .content { flex: 1; overflow-y: auto; padding: 30px; } /* ─── INFO PANEL ─── */ .info-panel { flex: 0 0 350px; background: var(--color-surface); border-left: 1px solid var(--color-border); overflow-y: auto; padding: 0; display: flex; flex-direction: column; } .info-panel.hidden { display: none; } @media (max-width: 1200px) { .info-panel { flex-basis: 25%; min-width: 220px; } } @media (max-width: 768px) { .info-panel { flex-basis: 35%; min-width: 150px; } } .info-panel-controls { display: flex; gap: 6px; align-items: center; padding: 12px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .search-input { flex: 1; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface-alt); color: var(--color-text); font-size: 13px; } .search-input::placeholder { color: var(--color-text-faint); } .info-header { font-size: 14px; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; margin-bottom: 15px; border-bottom: 2px solid var(--color-accent); padding-bottom: 10px; } .current-term { background: var(--color-accent-bg); padding: 15px; border-radius: 4px; margin-bottom: 20px; } .current-term h3 { color: var(--color-accent-dark); margin-bottom: 10px; font-size: 16px; } .current-term p { font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); } .viewed-history { flex: 1; overflow-y: auto; } .history-item { padding: 10px; border: 1px solid var(--color-border); border-radius: 4px; margin-bottom: 8px; cursor: pointer; background: var(--color-surface-alt); font-size: 12px; transition: all 0.2s; } .history-item:hover { background: var(--color-accent-bg); border-color: var(--color-accent); } /* ─── CRITERIA GROUPS ─── */ .criteria-group { background: var(--color-surface); border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-card); } .criteria-group h3 { font-size: 16px; margin-bottom: 15px; color: var(--color-accent-dark); border-bottom: 2px solid var(--color-accent); padding-bottom: 8px; } .criteria-group.complete { background: var(--color-accent-bg); border-left: 4px solid var(--color-accent); } .criterion { margin: 12px 0; padding: 10px; background: var(--color-surface-alt); border-radius: 4px; display: flex; align-items: flex-start; gap: 10px; } .criterion input[type="checkbox"] { margin-top: 4px; cursor: pointer; width: 18px; height: 18px; accent-color: var(--checkbox-accent); } .criterion label { cursor: pointer; flex: 1; font-size: 14px; line-height: 1.5; } .criterion input[type="checkbox"]:checked + label { color: var(--color-accent-dark); font-weight: 500; } .criterion-header { background: var(--color-surface-header); border-left: 3px solid var(--color-accent); } .criterion-header label { font-weight: 600; color: var(--color-accent-dark); } .criterion-satisfied { background: var(--color-accent-bg); } /* ─── STATUS INDICATORS ─── */ .auto-status { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; font-size: 12px; margin-top: 4px; flex-shrink: 0; } .inline-status { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; font-size: 12px; margin-top: 4px; flex-shrink: 0; border: 2px solid var(--color-border); background: transparent; color: transparent; box-sizing: border-box; } .inline-status.status-satisfied { background: var(--checkbox-accent, var(--color-accent)); border-color: var(--checkbox-accent, var(--color-accent)); color: white; } .inline-status.status-unsatisfied { background: transparent; color: transparent; } .status-satisfied { background: var(--color-accent); color: white; } .status-unsatisfied { background: var(--color-border); color: var(--color-text-faint); } /* High contrast status indicators */ :root.high-contrast .auto-status, :root.high-contrast .inline-status { border: 2px solid #ffffff !important; background: #000000 !important; color: #ffffff !important; } :root.high-contrast .auto-status.status-satisfied, :root.high-contrast .inline-status.status-satisfied { background: #ffff00 !important; border: 2px solid #ffff00 !important; color: #000000 !important; } .logic-badge { display: inline-block; font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-left: 8px; font-weight: 600; } .logic-and { background: var(--color-accent-bg); color: var(--color-accent-dark); } .logic-or { background: var(--color-warn-bg); color: var(--color-warn-text); } .satisfied-badge { font-size: 12px; color: var(--color-accent); } /* ─── GLOSSARY TERMS ─── */ .glossary-term { background: var(--color-warn-bg); color: var(--color-text); padding: 2px 4px; border-radius: 3px; cursor: help; font-weight: 500; border-bottom: 2px solid var(--color-warn-border); } .glossary-term:hover { background: var(--color-warn-hover); } /* ─── CLASSIFICATION PATH ─── */ .classification-path { margin-bottom: 15px; } .classification-step { padding: 6px 10px; font-size: 13px; border-left: 3px solid transparent; margin-bottom: 2px; border-radius: 0 4px 4px 0; } .classification-step.satisfied { border-left-color: var(--color-accent); background: var(--color-accent-bg); } .classification-step.pending { border-left-color: var(--color-border); background: var(--color-bg); color: var(--color-text-faint); } .classification-step .step-level { font-size: 10px; text-transform: uppercase; color: var(--color-text-hint); letter-spacing: 0.5px; } .classification-step .step-name { font-weight: 600; color: var(--color-accent-dark); } .classification-step.pending .step-name { color: var(--color-text-faint); font-weight: 400; } .classification-step .step-code { font-size: 11px; color: var(--color-text-faint); margin-left: 4px; } .current-classification { background: var(--gradient-classification); padding: 12px 15px; border-radius: 6px; margin-bottom: 15px; border: 1px solid var(--color-accent-border); } .current-classification .result-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); margin-bottom: 4px; } .current-classification .result-name { font-size: 18px; font-weight: 700; color: var(--color-accent-dark); } .current-classification .result-level { font-size: 11px; color: var(--color-accent-light); margin-top: 2px; } /* ─── BUTTONS ─── */ button { background: var(--color-accent); color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.2s; } button:hover { background: var(--color-accent-dark); } .icon-btn { width: 40px; height: 40px; padding: 0; min-width: 32px; min-height: 32px; background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 1; cursor: pointer; transition: all 0.2s; } .icon-btn:hover { background: var(--color-accent-bg); color: var(--color-accent); border-color: var(--color-accent); } /* ─── HEADER CONTROLS ─── */ .header-controls { display: flex; gap: 8px; margin-top: 10px; } .toggle-btn { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 16px; font-size: 13px; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .toggle-btn:hover { background: rgba(255, 255, 255, 0.25); color: white; border-color: rgba(255, 255, 255, 0.4); } /* ─── UTILITY CLASSES ─── */ /* Replace inline styles from HTML */ .hint-text { font-size: 12px; color: var(--color-text-faint); margin-top: 10px; } .remove-icon { color: var(--color-text-faint); } .selected-criteria-section { margin-top: 10px; } /* ─── TAB BAR ─── */ .tab-bar { display: flex; gap: 4px; margin-top: 8px; } .tab-btn { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 16px; font-size: 13px; border-radius: 4px 4px 0 0; cursor: pointer; transition: all 0.2s; } .tab-btn:hover { background: rgba(255, 255, 255, 0.25); color: white; } .tab-btn.active { background: var(--color-bg); color: var(--color-text); border-bottom-color: var(--color-bg); font-weight: 600; } /* ─── ABOUT PANEL ─── */ .about-panel { flex: 1; overflow-y: auto; padding: 30px; } .about-section { background: var(--color-surface); border-radius: 8px; padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-card); } .about-section h2 { font-size: 18px; color: var(--color-accent-dark); margin-bottom: 12px; border-bottom: 2px solid var(--color-accent); padding-bottom: 8px; } .about-section h3 { font-size: 15px; color: var(--color-accent-dark); margin: 16px 0 8px; } .about-section p { font-size: 14px; line-height: 1.7; color: var(--color-text-secondary); margin-bottom: 10px; } .about-section ul { font-size: 14px; line-height: 1.7; color: var(--color-text-secondary); padding-left: 20px; margin-bottom: 10px; } .about-section li { margin-bottom: 4px; } .about-section a { color: var(--color-accent); text-decoration: none; } .about-section a:hover { text-decoration: underline; } .about-section code { background: var(--color-surface-alt); padding: 2px 6px; border-radius: 3px; font-size: 13px; color: var(--color-accent-dark); border: 1px solid var(--color-border); } .version-badge { font-size: 12px; background: var(--color-accent-bg); color: var(--color-accent); padding: 2px 8px; border-radius: 10px; font-weight: 600; vertical-align: middle; } .about-footer { background: transparent; border: none; box-shadow: none; padding: 20px 0; margin-top: 30px; border-top: 1px solid var(--color-border); } .about-footer p { margin: 8px 0; font-size: 13px; } .about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; } .stat-card { background: var(--color-accent-bg); border: 1px solid var(--color-accent-border); border-radius: 6px; padding: 16px; text-align: center; } .stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--color-accent-dark); } .stat-card .stat-label { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .about-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; } .about-table th { text-align: left; padding: 8px 12px; background: var(--color-surface-header); color: var(--color-accent-dark); border-bottom: 2px solid var(--color-accent); font-weight: 600; } .about-table td { padding: 8px 12px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); vertical-align: top; } .about-table tr:last-child td { border-bottom: none; } .about-table tr:hover td { background: var(--color-surface-alt); } .selected-criterion { padding: 8px; background: var(--color-accent-bg); border-radius: 4px; margin-bottom: 8px; font-size: 12px; cursor: pointer; } .selected-criterion:hover { background: var(--color-accent-bg-alt); } .loading { text-align: center; padding: 40px; color: var(--color-text-faint); } .error { background: var(--color-error-bg); color: var(--color-error-text); padding: 15px; border-radius: 4px; margin: 20px; }