R.Nelson Photography- Home

background-color: #ffffff; border-radius: 3px; transition: all 0.3s ease-in-out; } /* Animates the 3 lines into an 'X' when checked */ #menu-toggle:checked ~ header .menu-button span:nth-child(1) { transform: translateY(9px) rotate(45deg); } #menu-toggle:checked ~ header .menu-button span:nth-child(2) { opacity: 0; } #menu-toggle:checked ~ header .menu-button span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* --- SIDEBAR PANEL --- */ .sidebar { position: fixed; top: 0; right: -320px; /* Hidden completely off-screen by default */ width: 320px; height: 100vh; background-color: #2C3033; /* Darker charcoal gray */ box-shadow: -5px 0 25px rgba(0,0,0,0.3); box-sizing: border-box; /* FIX: Increased top padding from 90px to 140px to drop the menus below the X zone */ padding: 140px 24px 24px 24px; transition: right 0.3s ease-in-out; z-index: 90; overflow-y: auto; } /* When checkbox is checked, slide the sidebar into view */ #menu-toggle:checked ~ .sidebar { right: 0; } /* --- ACCORDION SUB-MENUS --- */ .nav-item { margin-bottom: 15px; border-bottom: 1px solid #40464A; } /* Label acts as the main folder heading */ .menu-label { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 0; font-size: 1.1rem; font-weight: 500; color: #ffffff; cursor: pointer; } .menu-label::after { content: '▼'; font-size: 0.7rem; color: #aaa; transition: transform 0.2s ease; } /* Hidden nested checkboxes to handle sub-menus independently */ .submenu-toggle { display: none; } .submenu-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; display: flex; flex-direction: column; padding-left: 15px; } /* Expand sub-menu and rotate arrow when clicked */ .submenu-toggle:checked + .menu-label::after { transform: rotate(180deg); } .submenu-toggle:checked ~ .submenu-content { max-height: 250px; /* Gives it room to unfold smoothly */ padding-bottom: 10px; } /* Sub-menu text items */ .submenu-content a { color: #cbd5e1; text-decoration: none; padding: 10px 0; font-size: 0.95rem; transition: color 0.2s ease; } .submenu-content a:hover { color: #ffffff; }