diff --git a/index.html b/index.html index 5abef83..9ee1a14 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@ } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } -html { scroll-behavior: smooth; } +html { scroll-behavior: smooth; scroll-padding-top: 64px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } @@ -53,7 +53,7 @@ a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } -a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; } +a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; top: -40px; left: 1rem; @@ -78,34 +78,42 @@ font-size: .9375rem; font-weight: 500; color: var(--gray-700) !important; white-space: nowrap; text-decoration: none !important; display: flex; align-items: center; gap: .5rem; + transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1); } +.nav-brand:active { transform: scale(0.97); } .nav-brand span { color: var(--text); font-weight: 700; } .nav-links { display: flex; align-items: center; gap: .25rem; flex: 1; } .nav-links a { + display: inline-block; font-size: .875rem; font-weight: 500; color: var(--gray-700); padding: .5rem .875rem; border-radius: 6px; - transition: background .15s, color .15s; + transition: background .15s, color .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } .nav-links a:hover { background: var(--gray-100); color: var(--text); text-decoration: none; } +.nav-links a:active { transform: scale(0.97); } .nav-cta { display: flex; align-items: center; gap: .75rem; margin-left: auto; flex-shrink: 0; } .btn-ghost { + display: inline-block; font-size: .875rem; font-weight: 500; color: var(--blue); padding: .5rem 1.25rem; border-radius: 8px; border: 1.5px solid var(--blue); - transition: background .15s, color .15s; + transition: background .15s, color .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); } .btn-ghost:hover { background: var(--blue-pale); text-decoration: none; } +.btn-ghost:active { transform: scale(0.97); } .btn-solid { + display: inline-block; font-size: .875rem; font-weight: 500; color: var(--white) !important; padding: .5rem 1.25rem; border-radius: 8px; background: var(--blue); - transition: background .15s, box-shadow .15s; + transition: background .15s, box-shadow .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); } .btn-solid:hover { background: #1557b0; box-shadow: var(--shadow-sm); text-decoration: none; } +.btn-solid:active { transform: scale(0.97); } @media (max-width: 768px) { .nav-links { display: none; } @@ -167,18 +175,20 @@ font-size: .9375rem; font-weight: 600; padding: .875rem 2rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); - transition: transform .15s, box-shadow .15s; + transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .15s; } .btn-hero-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; } +.btn-hero-primary:active { transform: translateY(-1px) scale(0.97); } .btn-hero-secondary { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: var(--white) !important; font-size: .9375rem; font-weight: 500; padding: .875rem 2rem; border-radius: var(--radius-pill); border: 1.5px solid rgba(255,255,255,.35); - transition: background .15s, border-color .15s; + transition: background .15s, border-color .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); } .btn-hero-secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); text-decoration: none; } +.btn-hero-secondary:active { transform: scale(0.97); } /* hero screenshot */ .hero-visual { @@ -289,9 +299,10 @@ margin-top: 1.5rem; color: var(--blue) !important; font-size: .9375rem; font-weight: 600; border-bottom: 2px solid transparent; - transition: border-color .15s; + transition: border-color .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); } .feature-cta:hover { border-color: var(--blue); text-decoration: none; } +.feature-cta:active { transform: scale(0.97); } .feature-cta::after { content: '→'; transition: transform .15s; } .feature-cta:hover::after { transform: translateX(3px); } @@ -457,7 +468,9 @@ font-size: 1rem; font-weight: 600; color: var(--gray-900); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; user-select: none; + transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1); } +.faq-q:active { transform: scale(0.97); } .faq-q::after { content: '+'; font-size: 1.25rem; font-weight: 300; color: var(--blue); flex-shrink: 0; @@ -557,7 +570,7 @@
@@ -571,7 +584,7 @@KibaOS is a modern, secure operating system built on a foundation of simplicity. Familiar enough to use on day one. Polished enough to love every day after.
KibaOS is built lean. No startup services you didn't ask for, no background processes accumulating over time. It performs on day one and keeps performing.
Built on a read-only compressed filesystem with automatic update support and no legacy cruft. Your system stays in a known, clean state.
The Budgie desktop brings a cohesive visual experience with Papirus icons, a unified Arc-Dark theme, and a Wayland compositor that renders everything crisply.
gnome-software and Flatpak give you access to a vast library of applications in a sandboxed environment — installed, updated, and removed without risk to your core system.