{
"event": "PreToolUse",
"tool_name": "Read",
"tool_input": {
"file_path": "\/var\/www\/dev.campus.systemische-tools.de\/public\/css\/nav.css"
}
}
{
"tool_response": {
"type": "text",
"file": {
"filePath": "\/var\/www\/dev.campus.systemische-tools.de\/public\/css\/nav.css",
"content": "\/* ==========================================================================\n Navigation Styles\n Contract: CSS Contract v1.0\n ========================================================================== *\/\n\n\/* CSS Variables (COL-002) *\/\n:root {\n --nav-bg: #2c3e50;\n --nav-text: #fff;\n --nav-hover-bg: rgba(255, 255, 255, 0.1);\n --nav-dropdown-bg: #fff;\n --nav-dropdown-text: #333;\n --nav-dropdown-hover-bg: #f8f9fa;\n --nav-dropdown-border: #eee;\n --nav-focus-color: #3498db;\n}\n\n\/* Main Navigation Container *\/\n.main-nav {\n display: flex;\n align-items: center;\n padding: 0 1rem;\n background-color: var(--nav-bg);\n}\n\n\/* Brand \/ Logo *\/\n.nav-brand {\n color: var(--nav-text);\n background-color: transparent;\n text-decoration: none;\n font-weight: 700;\n font-size: 1.1rem;\n padding: 1rem;\n margin-right: 1rem;\n}\n\n.nav-brand:hover {\n background-color: var(--nav-hover-bg);\n}\n\n.nav-brand:focus {\n outline: 2px solid var(--nav-focus-color);\n outline-offset: -2px;\n}\n\n\/* Mobile Menu Toggle *\/\n.nav-toggle {\n display: none;\n background: transparent;\n border: none;\n color: var(--nav-text);\n padding: 1rem;\n cursor: pointer;\n margin-left: auto;\n}\n\n.nav-toggle:focus {\n outline: 2px solid var(--nav-focus-color);\n outline-offset: -2px;\n}\n\n.nav-toggle-icon {\n display: block;\n width: 24px;\n height: 2px;\n background-color: var(--nav-text);\n position: relative;\n}\n\n.nav-toggle-icon::before,\n.nav-toggle-icon::after {\n content: '';\n position: absolute;\n width: 24px;\n height: 2px;\n background-color: var(--nav-text);\n left: 0;\n}\n\n.nav-toggle-icon::before { top: -7px; }\n.nav-toggle-icon::after { top: 7px; }\n\n\/* Desktop Navigation Items Container *\/\n.nav-items {\n display: flex;\n align-items: center;\n gap: 0;\n}\n\n\/* Dropdown Container *\/\n.nav-dropdown {\n position: relative;\n}\n\n\/* Dropdown Button *\/\n.nav-dropdown-btn {\n background-color: transparent;\n border: none;\n color: var(--nav-text);\n padding: 1rem 1.25rem;\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n font-family: inherit;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.nav-dropdown-btn::after {\n content: '';\n border: solid var(--nav-text);\n border-width: 0 2px 2px 0;\n padding: 3px;\n transform: rotate(45deg);\n margin-top: -3px;\n}\n\n.nav-dropdown-btn:hover,\n.nav-dropdown:hover .nav-dropdown-btn,\n.nav-dropdown.active .nav-dropdown-btn {\n background-color: var(--nav-hover-bg);\n}\n\n.nav-dropdown-btn:focus {\n outline: 2px solid var(--nav-focus-color);\n outline-offset: -2px;\n}\n\n\/* Dropdown Content *\/\n.nav-dropdown-content {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n background-color: var(--nav-dropdown-bg);\n min-width: 200px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n border-radius: 0 0 6px 6px;\n z-index: 1000;\n}\n\n\/* Show on hover (desktop) and when active (mobile\/keyboard) *\/\n.nav-dropdown:hover .nav-dropdown-content,\n.nav-dropdown.active .nav-dropdown-content {\n display: block;\n}\n\n\/* Dropdown Links *\/\n.nav-dropdown-content a {\n display: block;\n padding: 0.75rem 1.25rem;\n color: var(--nav-dropdown-text);\n background-color: var(--nav-dropdown-bg);\n text-decoration: none;\n font-weight: 500;\n border-bottom: 1px solid var(--nav-dropdown-border);\n}\n\n.nav-dropdown-content a:last-child {\n border-bottom: none;\n border-radius: 0 0 6px 6px;\n}\n\n.nav-dropdown-content a:hover {\n background-color: var(--nav-dropdown-hover-bg);\n color: var(--nav-bg);\n}\n\n.nav-dropdown-content a:focus {\n outline: 2px solid var(--nav-focus-color);\n outline-offset: -2px;\n}\n\n\/* External link indicator *\/\n.nav-dropdown-content a[target=\"_blank\"]::after {\n content: ' \\2197';\n font-size: 0.8em;\n}\n\n\/* ==========================================================================\n Mobile Styles (RES-001: Mobile-First Breakpoints)\n ========================================================================== *\/\n\n@media (max-width: 768px) {\n .main-nav {\n flex-wrap: wrap;\n }\n\n .nav-toggle {\n display: block;\n }\n\n .nav-items {\n display: none;\n flex-direction: column;\n width: 100%;\n align-items: stretch;\n }\n\n .nav-items.open {\n display: flex;\n }\n\n .nav-dropdown {\n width: 100%;\n }\n\n .nav-dropdown-btn {\n width: 100%;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n }\n\n .nav-dropdown-content {\n position: static;\n box-shadow: none;\n border-radius: 0;\n background-color: rgba(0, 0, 0, 0.1);\n }\n\n .nav-dropdown-content a {\n padding-left: 2.5rem;\n background-color: transparent;\n color: var(--nav-text);\n border-bottom-color: rgba(255, 255, 255, 0.1);\n }\n\n .nav-dropdown-content a:hover {\n background-color: var(--nav-hover-bg);\n color: var(--nav-text);\n }\n\n .nav-dropdown-content a:last-child {\n border-radius: 0;\n }\n}\n",
"numLines": 238,
"startLine": 1,
"totalLines": 238
}
}
}