diff --git a/help.html b/help.html index 0b3bb5d..0bbcf30 100644 --- a/help.html +++ b/help.html @@ -214,6 +214,112 @@ .gym-card strong { color: var(--text-accent); } + + /* Quick Navigation */ + .quick-nav { + background: var(--bg-secondary); + border-radius: 15px; + padding: 20px; + margin-bottom: 30px; + box-shadow: var(--shadow-dark); + border: 1px solid var(--border-color); + } + + .quick-nav h3 { + color: var(--text-accent); + margin: 0 0 15px 0; + font-size: 1.2em; + text-align: center; + } + + .nav-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 10px; + } + + .nav-item { + background: var(--bg-tertiary); + padding: 12px 16px; + border-radius: 8px; + text-align: center; + transition: all 0.3s ease; + border: 1px solid var(--border-color); + } + + .nav-item:hover { + background: var(--hover-color); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(102, 255, 102, 0.15); + } + + .nav-item a { + color: var(--text-primary); + text-decoration: none; + font-weight: 500; + font-size: 0.9em; + display: block; + } + + .nav-item a:hover { + color: var(--text-accent); + } + + /* Smooth scrolling for anchor links */ + html { + scroll-behavior: smooth; + } + + /* Section anchor targets */ + .section { + scroll-margin-top: 20px; + } + + /* Back to top button */ + .back-to-top { + position: fixed; + bottom: 30px; + right: 30px; + width: 50px; + height: 50px; + background: var(--gradient-primary); + color: white; + border: none; + border-radius: 50%; + font-size: 18px; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + z-index: 1000; + box-shadow: 0 4px 15px rgba(0,0,0,0.3); + } + + .back-to-top.show { + opacity: 1; + visibility: visible; + } + + .back-to-top:hover { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0,0,0,0.4); + } + + /* Mobile responsiveness for navigation */ + @media (max-width: 768px) { + .nav-grid { + grid-template-columns: repeat(2, 1fr); + gap: 8px; + } + + .nav-item { + padding: 10px 12px; + } + + .nav-item a { + font-size: 0.8em; + } + }
@@ -224,7 +330,25 @@Complete guide to Pokemon-style pet collecting in IRC
-