naser/libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

QA: sticky nav, hover lift, body font and auth focus fixes; tasks 24 and 24-1..24-10 Done

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Naser Mansour
2026-10-31 19:23:46 +02:00
parent f1ca648672
commit 379f1f9de6
25 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/public.css
+13 -4
View File
@@ -12,6 +12,10 @@ body.site{
--shadow-2:0 2px 4px rgba(30,34,25,.08),0 18px 40px -12px rgba(30,34,25,.28);
}
html:has(body.site){scroll-behavior:smooth}
/* app.css sets overflow-x:hidden on body, which turns it into a scroll container and breaks position:sticky */
body.site{overflow-x:clip;overflow-y:visible}
/* app.css sets the body font with html[lang] body (higher specificity than body.site) */
html[lang] body.site{font-family:var(--body)}
/* ---------- Ground and type ---------- */
body.site{
@@ -70,7 +74,8 @@ body.site .sec-head p{max-width:30em;color:var(--muted);margin:0}
body.site .nav{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s}
body.site .nav.scrolled{border-color:var(--line);box-shadow:0 8px 24px -18px rgba(30,34,25,.5)}
body.site .nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
body.site .nav{box-sizing:border-box;height:72px}
body.site .nav .wrap{display:flex;align-items:center;gap:28px;height:71px}
body.site .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
body.site .seal{width:46px;height:46px;border:2px solid #1A1A1A;box-shadow:3px 3px 5px rgba(26,26,26,.35);background:#fff center/cover no-repeat;flex:none}
body.site .brand b{font-family:var(--display);font-size:1.35rem;line-height:1;display:block}
@@ -360,9 +365,13 @@ body.site .legal-updated{font-size:.85rem;color:var(--muted);margin:16px 0 0}
/* ---------- Auth pages: type and controls only (24-9) ---------- */
body.site-auth{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:#1E2219}
html[lang] body.site-auth{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
body.site-auth h1,body.site-auth h2,body.site-auth [data-flux-heading]{font-family:"Markazi Text","Times New Roman",serif;font-weight:700}
body.site-auth input[type=email],body.site-auth input[type=password],body.site-auth input[type=text]{min-height:48px;border-radius:12px;border:1.5px solid rgba(45,54,36,.18);background:#fff}
body.site-auth input[type=email]:focus,body.site-auth input[type=password]:focus,body.site-auth input[type=text]:focus{outline:none;border-color:#A68966;box-shadow:0 0 0 4px rgba(166,137,102,.2)}
/* Flux always renders a hidden error element, so app.css paints every field red; only a visible error should */
body.site-auth [data-flux-field]:not(:has([data-flux-error]:not(.hidden))) input[data-flux-control]{border-color:rgba(45,54,36,.18)}
body.site-auth [data-flux-field]:not(:has([data-flux-error]:not(.hidden))) input[data-flux-control]:focus{border-color:#A68966;box-shadow:0 0 0 4px rgba(166,137,102,.2)}
body.site-auth [data-flux-button][type=submit],body.site-auth button[type=submit]{border-radius:999px;min-height:48px;background:#A68966;color:#1E2219;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 22px -8px rgba(166,137,102,.8);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
body.site-auth [data-flux-button][type=submit]:hover,body.site-auth button[type=submit]:hover{transform:translateY(-2px)}
body.site-auth main a:not([data-flux-button]){color:#4A5D23}
@@ -371,8 +380,8 @@ body.site-auth :is(a,button,input,select,textarea):focus-visible{outline:2px sol
@media (prefers-reduced-motion:reduce){body.site-auth *{transition:none!important}}
/* ---------- Reveal (hidden only when JavaScript runs) ---------- */
body.site.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
body.site.js [data-reveal].in{opacity:1;transform:none}
body.site.js [data-reveal]{opacity:0;translate:0 28px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
body.site.js [data-reveal].in{opacity:1;translate:none}
body.site.js [data-reveal][data-d="1"]{transition-delay:.08s}
body.site.js [data-reveal][data-d="2"]{transition-delay:.16s}
body.site.js [data-reveal][data-d="3"]{transition-delay:.24s}
@@ -389,5 +398,5 @@ body.site.js [data-reveal][data-d="5"]{transition-delay:.4s}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
body.site *, body.site *::before, body.site *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.site [data-reveal]{opacity:1;transform:none}
body.site [data-reveal]{opacity:1;translate:none}
}