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

24-5: home booking card (strip variant, compact booking) — implemented, QA Review; footer brand layout fix from 24-2

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Naser Mansour
2026-10-31 18:49:28 +02:00
parent 10a4e1f4c0
commit b1ac864573
10 changed files with 433 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/public.css
+52
View File
@@ -112,6 +112,8 @@ body.site .foot .brand small{color:var(--gold-lt)}
body.site .foot p{margin:16px 0 0;max-width:26em}
body.site .site-footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(244,241,234,.1);margin-top:48px;padding-top:22px;font-size:.8rem;color:rgba(196,168,130,.75)}
body.site .foot span{display:block;padding:10px 0}
body.site .foot a.brand{display:flex;padding:0}
body.site .foot .brand span{display:block;padding:0}
@media (max-width:1100px){
body.site .links{display:none}
body.site .menu-btn{display:grid;place-items:center;margin-inline-start:auto}
@@ -262,6 +264,56 @@ body.site .post.text .more{color:var(--gold-lt)}
body.site .trust{gap:18px}
}
/* ---------- Booking card (24-5) ---------- */
body.site .book{background:var(--forest);color:var(--cream);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;
box-shadow:0 50px 90px -40px rgba(30,34,25,.8);position:relative}
body.site .book-l{padding:56px 52px;position:relative;background:radial-gradient(500px 300px at 20% 0%,rgba(196,168,130,.18),transparent 70%)}
body.site .book-l h2{color:var(--cream);font-size:clamp(2rem,3.2vw,2.8rem);margin:14px 0 18px}
body.site .book-l p{color:var(--gold-lt);margin:0 0 26px}
body.site .book-l .eyebrow{color:var(--gold-lt)}
body.site .contact{display:grid;gap:12px;font-size:.95rem}
body.site .contact a,body.site .contact span{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--cream)}
body.site .contact svg{width:20px;height:20px;color:var(--gold);flex:none}
body.site .book-r{background:var(--cream);color:var(--ink);padding:44px 44px 40px;margin:12px;border-radius:20px}
body.site .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.site .book-r label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
body.site .book-r input,body.site .book-r textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:12px;border:1.5px solid rgba(45,54,36,.18);background:#fff;font:400 1rem var(--body);color:var(--ink);transition:border-color .2s, box-shadow .2s}
body.site .book-r input:focus,body.site .book-r textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(166,137,102,.2)}
body.site .fld{margin-bottom:14px}
body.site .days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
body.site .day{flex:none;width:66px;min-height:72px;border-radius:14px;border:1.5px solid rgba(45,54,36,.15);background:#fff;cursor:pointer;font:500 .78rem/1.3 var(--body);color:var(--muted);transition:all .25s var(--ease)}
body.site .day b{display:block;font:700 1.35rem/1.2 var(--display);color:var(--ink)}
body.site .day:hover{border-color:var(--gold);transform:translateY(-2px)}
body.site .day[aria-pressed=true]{background:var(--forest);border-color:var(--forest);color:var(--gold-lt);box-shadow:0 10px 22px -10px rgba(45,54,36,.8)}
body.site .day[aria-pressed=true] b{color:var(--cream)}
body.site .slots{display:flex;flex-wrap:wrap;gap:8px}
body.site .slot{min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid rgba(45,54,36,.15);background:#fff;cursor:pointer;font:500 .9rem var(--body);transition:all .2s}
body.site .slot:hover{border-color:var(--gold)}
body.site .slot[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
body.site .book-r .btn{width:100%;justify-content:center;margin-top:8px}
body.site .note{font-size:.8rem;color:var(--muted);text-align:center;margin:12px 0 0}
body.site .book>*{min-width:0}
body.site .book-l .site-balance{overflow:visible}
body.site .strip-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
body.site .strip-label+.days{margin-bottom:14px}
body.site .strip-none{color:var(--muted);margin:0 0 14px}
body.site .book-r .help{font-size:.8rem;color:var(--muted);margin:6px 0 0}
body.site .book-r .err{font-size:.82rem;color:#9B2C2C;margin:6px 0 0}
body.site .book-r .ok{font-size:.9rem;color:var(--olive);margin:0 0 14px}
body.site .book-r h3{font-size:1.5rem;margin-bottom:10px}
body.site .book-r .summary{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:16px 0 18px;font-size:.95rem}
body.site .book-r .summary dt{font-weight:600}
body.site .book-r .summary dd{margin:0}
body.site .book-r-note{text-align:center}
body.site .book-r-note .btn{width:auto;display:inline-flex}
body.site .book-r .btn+.btn{margin-top:10px}
@media (max-width:1100px){body.site .book{grid-template-columns:1fr}}
@media (max-width:760px){
body.site .book-l{padding:40px 24px}
body.site .book-r{padding:26px 18px;margin:8px}
body.site .f2{grid-template-columns:1fr}
}
/* ---------- 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}