/* ========================================================= VTKA — Shell Styles (Public + Backend) Uses vars from theme.css (yellow #f7e801, green #008700) ========================================================= */ /* ---------- Sticky footer layout ---------- */ html, body { height: 100%; } body { display: flex; flex-direction: column; } #content { flex: 1 0 auto; } .footer { margin-top: auto; } /* ============== PUBLIC HEADER ============== */ .header-public{ position: sticky; top: 0; z-index: var(--z-nav); background: var(--vk-yellow); border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: var(--shadow-sm); } .header-public .nav{ display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: .55rem 1rem; /* compact */ } /* Logo */ .logo-wrap{ display:flex; align-items:center; gap:.6rem; text-decoration:none; } .logo-wrap img{ height:62px; width:auto; display:block; } /* Desktop/Tablet links */ .nav-links{ display:flex; align-items:center; gap: 1rem; font-weight:800; } .nav-link{ --pad-x: .6rem; position:relative; display:inline-block; color:#113300; text-decoration:none; padding:.35rem var(--pad-x); border-radius: var(--radius-sm); transition: color .15s ease; } /* Animated green bars */ .nav-link::before, .nav-link::after{ content:""; position:absolute; left:8px; right:8px; height:3px; background: var(--vk-green); border-radius:2px; transform: scaleX(0); transform-origin:center; transition: transform .22s ease; } .nav-link::before{ top:-4px; } .nav-link::after { bottom:-4px; } .nav-link:hover{ color:#0a3a0a; } .nav-link:hover::before, .nav-link:hover::after{ transform: scaleX(1); } .nav-link.active{ color:#0a3a0a; } .nav-link.active::before, .nav-link.active::after{ transform: scaleX(1); } /* Right auth button */ .auth-cta .btn{ border-width:2px; font-weight:800; } /* Mobile toggle */ .menu-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:999px; border:2px solid var(--vk-green); background:transparent; color: var(--vk-green); cursor:pointer; } /* Mobile drawer */ .mobile-drawer{ background:#fffefb; border-top:1px solid var(--vk-border); box-shadow: var(--shadow-md); max-height:70vh; overflow:auto; transform: translateY(-8px); opacity:0; pointer-events:none; transition: transform .18s ease, opacity .18s ease; } .mobile-links{ display:grid; gap:.5rem; padding: 1rem 1rem 1.25rem; } .m-link{ display:grid; grid-template-columns: 28px 1fr; align-items:center; gap:.65rem; padding:.8rem .6rem; border-radius: var(--radius-md); font-weight:800; color:#0e3d0e; text-decoration:none; border:1px dashed transparent; } .m-link .fa{ font-size:16px; color: var(--vk-green); } .m-link:hover{ background: rgba(0,135,0,0.06); border-color: rgba(0,135,0,0.15); } .m-auth{ margin-top:.5rem; } /* Backdrop (shared) */ .backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.25); opacity:0; pointer-events:none; transition: opacity .18s ease; } /* When JS opens the menu, add .menu-open on and remove [hidden] */ body.menu-open .mobile-drawer{ transform: translateY(0); opacity:1; pointer-events:auto; } body.menu-open .backdrop{ opacity:1; pointer-events:auto; } /* ====== PUBLIC RESPONSIVE ====== */ @media (max-width: 768px){ .nav-links, .auth-cta{ display:none; } .menu-toggle{ display:inline-flex; } .logo-wrap img{ height:36px; } } @media (min-width: 769px) and (max-width: 1024px){ .nav-links{ gap:.8rem; } .logo-wrap img{ height:44px; } } /* ============== BACKEND HEADER ============== */ .header-back{ position: sticky; top:0; z-index: var(--z-nav); background:#ffffff; border-bottom:1px solid var(--vk-border); box-shadow: var(--shadow-sm); } .header-back-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 1rem; /* compact */ } .header-back .logo{ height:44px; width:auto; } /* Backend tools */ .user-tools{ display:flex; align-items:center; gap:.5rem; } .user-tools .btn{ padding:.5rem .75rem; font-weight:800; } .badge{ display:inline-flex; align-items:center; justify-content:center; height:24px; min-width:24px; padding:0 .4rem; border-radius:6px; font-size:.75rem; font-weight:800; } .badge-green{ background: var(--vk-green); color:#fff; } /* Optional sidebar placement (if present) */ #saSidebar{ width: 280px; } /* ====== BACKEND RESPONSIVE ====== */ @media (max-width: 768px){ .header-back .logo{ height:32px; } .user-tools .small{ display:none; } /* hide 'Logged in' on phones */ } /* ============== FOOTER (compact) ============== */ .footer{ background: var(--vk-black); color: var(--vk-white); border-top: 2px solid var(--vk-green); } .footer-row{ display:flex; align-items:center; justify-content:space-between; padding: .45rem 1rem; /* compact */ } .footer-left{ font-weight:600; font-size:.78rem; } .footer-right{ display:flex; align-items:center; gap:.4rem; font-weight:500; font-size:.7rem; } .footer-logo{ height:40px; width:auto; } @media (max-width: 640px){ .footer-row{ flex-direction:column; gap:.6rem; text-align:center; } .footer-right{ justify-content:center; } } /* ==== Big Crest (no HTML change) ==== */ /* Make the logo visibly larger than the bar and let it “hang” a bit */ .header-public .logo-wrap img{ height: 92px; /* was 56px */ margin-top: -6px; /* poke slightly above */ margin-bottom: -14px; /* and below the bar */ filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)); transition: transform .15s ease; } .header-public .logo-wrap:hover img{ transform: translateY(-1px); } /* keep nav centered and with breathing room */ .header-public .nav{ min-height: 56px; } @media (max-width: 1024px){ .header-public .logo-wrap img{ height: 72px; margin-bottom: -10px; } } @media (max-width: 768px){ .header-public .logo-wrap img{ height: 40px; margin: 0; filter:none; } } /* ==== PWA INSTALL BAR (mobile only) ==== */ .pwa-bar{ position: sticky; top: 0; z-index: calc(var(--z-nav) + 1); background:#fff; border-bottom:3px solid var(--vk-green); /* green border */ box-shadow: var(--shadow-sm); } .pwa-bar-inner{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.45rem .9rem; } .pwa-icon{ height:32px; width:auto; flex-shrink:0; } .pwa-text{ font-weight:800; color:#0a3a0a; font-size:.95rem; } #pwaInstallBtn{ font-size:.85rem; padding:.45rem .9rem; border-radius:8px; } @media (min-width:769px){ .pwa-bar{ display:none; } } /* phones only */