/* AUDITORIA — Layout Optimization CSS */ /* ── CSS Variables (in sync with inner pages) ── */ :root { --brand-primary: #1e3a8a; --brand-mid: #1d4ed8; --brand-light: #eff6ff; --brand-border: #bfdbfe; --text-body: #374151; --text-muted: #6b7280; --bg-card: #ffffff; --border-card: #e5e7eb; --bg-page: #f3f4f6; --shadow-card: 0 2px 12px rgba(30, 58, 138, 0.07); --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --radius-card: 14px; --radius-btn: 9px; } /* 1. PAGE BACKGROUND Apply class "auditoria-page" to or the outer wrapper */ body { background-color: var(--bg-page) !important; } .action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-btn); font-size: 0.8rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all var(--ease); border: none; } .action-btn-seats { background: var(--brand-primary); color: #fff; } .action-btn-seats:hover { background: var(--brand-mid); color: #fff; } /* 2. HEADER — Professional sticky navbar */ /* Base header with bottom border for definition */ #header { background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid var(--border-card); box-shadow: 0 1px 8px rgba(30, 58, 138, 0.06); transition: box-shadow 0.3s ease, background 0.3s ease, height 0.3s ease; } /* Sticky / scrolled state — slightly elevated with blur */ #header[data-kt-sticky-state="on"], .kt-sticky-header-on #header { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(30, 58, 138, 0.10); border-bottom-color: var(--brand-border); } /* Brand name next to logo */ #header h3.text-mono { font-size: 1.05rem; font-weight: 700; color: var(--brand-primary); letter-spacing: -0.01em; } /* ── Nav Menu Links ── */ .kt-menu-link { padding: 6px 2px !important; position: relative; } /* Active indicator: animated underline */ .kt-menu-item.active .kt-menu-link::after, .kt-menu-link:hover::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--brand-primary); border-radius: 2px; transform-origin: left; animation: slideIn 0.2s ease forwards; } .kt-menu-link::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--brand-primary); border-radius: 2px; transform: scaleX(0); transition: transform var(--transition); } .kt-menu-link:hover::after { transform: scaleX(1); } .kt-menu-item.active .kt-menu-link::after { transform: scaleX(1); } @keyframes slideIn { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Menu title font refinement */ .kt-menu-title { font-size: 0.84rem !important; font-weight: 500 !important; color: var(--text-body) !important; letter-spacing: 0.005em; transition: color var(--transition); } .kt-menu-item.active .kt-menu-title, .kt-menu-link:hover .kt-menu-title { color: var(--brand-primary) !important; font-weight: 600 !important; } /* ── Search Input Refinement ── */ .kt-input { border-radius: 8px !important; background: var(--bg-page) !important; border: 1px solid var(--border-card) !important; transition: border-color var(--transition), box-shadow var(--transition); } .kt-input:focus-within { border-color: var(--brand-mid) !important; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.10) !important; background: #fff !important; } .kt-input input { font-size: 0.83rem !important; color: var(--text-body) !important; } .kt-input input::placeholder { color: var(--text-muted) !important; } /* ── User Avatar Button ── */ [data-kt-dropdown-toggle="true"] { background: var(--brand-light) !important; border-color: var(--brand-border) !important; color: var(--brand-primary) !important; font-weight: 700 !important; font-size: 0.9rem !important; transition: background var(--transition), box-shadow var(--transition); } [data-kt-dropdown-toggle="true"]:hover { background: var(--brand-border) !important; box-shadow: 0 2px 10px rgba(30, 58, 138, 0.15); } /* ── Dropdown Menu Refinement ── */ .kt-dropdown-menu { border: 1px solid var(--border-card) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(30, 58, 138, 0.12) !important; overflow: hidden; } .kt-dropdown-menu-link { font-size: 0.82rem !important; font-weight: 500 !important; color: var(--text-body) !important; border-radius: 8px !important; transition: background var(--transition), color var(--transition); } .kt-dropdown-menu-link:hover { background: var(--brand-light) !important; color: var(--brand-primary) !important; } /* Log out button in dropdown */ .kt-dropdown-menu .kt-btn-outline { border-color: var(--border-card) !important; color: var(--text-body) !important; font-size: 0.82rem !important; font-weight: 600 !important; border-radius: var(--radius-btn) !important; transition: all var(--transition); } .kt-dropdown-menu .kt-btn-outline:hover { border-color: #dc2626 !important; color: #dc2626 !important; background: rgba(220, 38, 38, 0.05) !important; } /* 3. MAIN CONTENT AREA — proper page spacing */ /* Ensure RenderBody() gets consistent top spacing */ main[role="content"], main.grow, .grow > main { padding-top: 0; } /* Sections inside kt-container-fixed get vertical breathing room */ .kt-container-fixed { padding-top: 0; padding-bottom: 0; } /* 4. FOOTER — richer, brand-consistent */ footer.footer { background: var(--bg-card) !important; border-top: 1px solid var(--border-card) !important; margin-top: auto; } footer.footer .kt-container-fixed > div { padding-top: 20px !important; padding-bottom: 20px !important; } /* Footer brand link */ footer.footer a { font-weight: 600; color: var(--brand-primary) !important; letter-spacing: 0.01em; text-decoration: none; transition: color var(--transition); } footer.footer a:hover { color: var(--brand-mid) !important; } /* Copyright year */ footer.footer .text-muted-foreground { font-size: 0.82rem; color: var(--text-muted) !important; } /* Footer tagline (optional helper class to add) */ .footer-tagline { font-size: 0.78rem; color: var(--text-muted); font-style: italic; } /* Footer nav links (optional — see HTML changes below) */ .footer-links { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; } .footer-links a { font-size: 0.8rem; font-weight: 500; color: var(--text-muted) !important; text-decoration: none; transition: color var(--transition); } .footer-links a:hover { color: var(--brand-primary) !important; } /* 5. GLOBAL LAYOUT CONSISTENCY */ /* Ensure the flex column fills full height properly */ .flex.grow.flex-col { min-height: 100vh; } /* Consistent card elevation pattern across all pages */ .section-card, .bk-card { transition: transform var(--transition), box-shadow var(--transition); } /* Smooth page-level scroll */ html { scroll-behavior: smooth; } /* 6. RESPONSIVE — Mobile header */ @media (max-width: 1023px) { #header { padding-top: 12px !important; padding-bottom: 12px !important; } #header h3.text-mono { font-size: 0.95rem; } /* Hide search on small mobile */ @media (max-width: 480px) { .kt-input { display: none !important; } } }