/* ========== ALTERNATIVE: White Background with Colored Square Buttons ========== */ /* Use this if you prefer white background */ .skip-nav { position: fixed; top: 0; left: 0; right: 0; background: #ffffff; border-bottom: 3px solid #e5e7eb; padding: 10px 20px; display: flex; gap: 12px; align-items: center; z-index: 9999; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .skip-nav-label { font-size: 13px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 8px; } /* Colored Square Icon Buttons */ .skip-nav-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 14px; min-width: 70px; text-decoration: none; background: #0099D6; /* Blue buttons */ border: 2px solid #0099D6; border-radius: 8px; transition: all 0.2s ease; cursor: pointer; } .skip-nav-btn svg { width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; min-height: 22px !important; max-height: 22px !important; stroke: #ffffff; /* White icons */ flex-shrink: 0; } .skip-nav-btn span { font-size: 11px; font-weight: 700; color: #ffffff; /* White text */ text-transform: uppercase; letter-spacing: 0.5px; } .skip-nav-btn:hover { background: #007ab8; border-color: #007ab8; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 153, 214, 0.4); } .skip-nav-btn:focus { outline: 4px solid #00afeb; outline-offset: 3px; background: #007ab8; border-color: #007ab8; } .skip-nav-btn:active { transform: translateY(-1px); }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.


