/* ============================================================ Refined Heritage — component library + member app shell Ported from design_handoff_bsb/assets/styles.css. EVERYTHING is scoped under .rh (set on by header.php when a page opts in via $useRefinedShell). Tokens live in style.css. Never redefine bare global .card/.btn/.chip — always ".rh …". ============================================================ */ /* ---------- base ---------- */ body.rh{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} .rh *{box-sizing:border-box;} .rh form{max-width:none;margin:0;background:none;padding:0;border:0;border-radius:0;box-shadow:none;} /* neutralise global form{background:white;padding:20px;border-radius:10px;max-width:500px} + [data-theme=dark] form{background} */ .rh h1,.rh h2,.rh h3,.rh h4,.rh p{margin:0;} .rh a{color:inherit;text-decoration:none;} .rh button{font-family:inherit;} /* ---------- app shell ---------- */ .rh-app{min-height:100dvh;min-height:100vh;display:flex;flex-direction:column;} .rh-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 12px;border-bottom:1px solid var(--line);background:var(--surface);background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(16px) saturate(1.3);} .rh-topbar .brandmark{display:flex;align-items:center;gap:11px;min-width:0;} .rh-topbar .crest{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:600;font-size:17px;background:linear-gradient(160deg,var(--burgundy),var(--burgundy-deep));box-shadow:var(--shadow-sm),0 0 0 1px rgba(168,129,78,0.45) inset;} .rh-topbar .bt{display:flex;flex-direction:column;line-height:1;min-width:0;} .rh-topbar .bt b{font-family:var(--serif);font-weight:560;font-size:15px;color:var(--ink);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rh-topbar .bt span{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);margin-top:3px;font-weight:600;} .rh-topbar .rgt{display:flex;gap:9px;align-items:center;flex:0 0 auto;} .rh .iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);} .rh-body{flex:1 1 auto;width:100%;max-width:680px;margin:0 auto;padding:8px 20px 116px;box-sizing:border-box;} .rh-tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:calc(100% - 28px);max-width:512px;height:66px;display:flex;align-items:stretch;justify-content:space-around;padding:0 6px;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);z-index:40;background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(22px) saturate(1.3);} .rh-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-3);font-size:10px;font-weight:600;letter-spacing:.2px;} .rh-tab svg{width:23px;height:23px;} .rh-tab.active{color:var(--burgundy);} @media (min-width:920px){ .rh-app{display:grid;grid-template-columns:244px 1fr;grid-template-rows:74px 1fr;grid-template-areas:"top top" "side main";} .rh-topbar{grid-area:top;height:74px;padding:0 32px;} .rh-tabbar{grid-area:side;position:static;transform:none;left:auto;bottom:auto;width:auto;max-width:none;height:100%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;padding:18px 14px;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;} .rh-tab{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 14px;border-radius:12px;font-size:14.5px;font-weight:600;} .rh-tab svg{width:21px;height:21px;} .rh-tab.active{background:color-mix(in srgb,var(--burgundy) 10%,transparent);} .rh-body{grid-area:main;max-width:760px;padding:32px 44px 64px;} } /* ---------- typography helpers ---------- */ .rh .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-ink);font-weight:700;} .rh .h-display{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.1;} .rh .section-title{font-family:var(--serif);font-weight:540;font-size:21px;color:var(--ink);letter-spacing:-.01em;} .rh .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:26px 2px 12px;} .rh .link-more{font-size:12.5px;font-weight:600;color:var(--burgundy);display:inline-flex;align-items:center;gap:4px;cursor:pointer;} .rh .muted{color:var(--ink-2);} .rh .tiny{font-size:12px;} .rh .score{font-family:var(--serif);font-weight:600;color:var(--burgundy);line-height:1;font-variant-numeric:tabular-nums;} /* ---------- utilities ---------- */ .rh .row{display:flex;align-items:center;gap:10px;} .rh .between{display:flex;align-items:center;justify-content:space-between;gap:10px;} .rh .stack{display:flex;flex-direction:column;} .rh .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .rh .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .rh .divider{height:1px;background:var(--line);border:0;margin:16px 0;} /* ---------- card ---------- */ .rh .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);} .rh .card.pad{padding:18px;} /* ---------- buttons ---------- */ .rh .btn{font-family:var(--sans);font-weight:650;font-size:15px;border-radius:14px;min-height:var(--tap);padding:0 20px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;white-space:nowrap;letter-spacing:.1px;transition:transform .14s,filter .2s,background .2s;text-decoration:none;} .rh .btn:active{transform:scale(.975);} .rh .btn-primary{background:var(--burgundy);color:#fff;box-shadow:var(--shadow-sm),0 0 0 1px rgba(168,129,78,0.3) inset;} .rh .btn-primary:hover{filter:brightness(1.05);} .rh .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);} .rh .btn-soft{background:var(--surface-2);color:var(--ink);} .rh .btn-gold{background:linear-gradient(160deg,var(--gold-soft),var(--gold));color:#3a2a12;} .rh .btn-attending{background:var(--sage-bg);color:var(--sage-ink);border-color:color-mix(in srgb,var(--sage) 35%,transparent);} .rh .btn-danger{background:transparent;color:var(--burgundy);border-color:color-mix(in srgb,var(--burgundy) 35%,transparent);} .rh .btn-sm{min-height:38px;font-size:13px;padding:0 14px;border-radius:11px;width:auto;} .rh .btn-block{width:100%;} /* ---------- chips ---------- */ .rh .chiprow{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;margin:0 -2px;-webkit-overflow-scrolling:touch;} .rh .chiprow::-webkit-scrollbar{height:0;} .rh .chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;} .rh .chip.active{background:var(--burgundy);color:#fff;border-color:transparent;} /* ---------- tags (wine type) ---------- */ .rh .tag{display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;} .rh .tag.red{background:rgba(140,40,46,.14);color:var(--burgundy);} .rh .tag.white{background:rgba(168,129,78,.16);color:var(--gold-ink);} .rh .tag.sparkling{background:rgba(90,108,140,.16);color:#5b6c8c;} .rh .tag.fortified{background:rgba(120,78,52,.16);color:#875231;} .rh .tag.rose{background:rgba(176,98,108,.16);color:#a85a64;} .rh .tag.dessert{background:rgba(146,108,160,.16);color:#8a5aa0;} /* ---------- form fields ---------- */ .rh .field{margin-bottom:16px;} .rh .field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px;letter-spacing:.2px;} .rh .input{width:100%;min-height:var(--tap);border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 15px;font-family:var(--sans);font-size:15px;transition:border .2s,box-shadow .2s;} .rh .input:focus{outline:none;border-color:var(--burgundy);box-shadow:0 0 0 3px color-mix(in srgb,var(--burgundy) 18%,transparent);} .rh textarea.input{padding:13px 15px;min-height:96px;resize:none;line-height:1.5;} .rh select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23998A85' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;} /* ---------- stars ---------- */ .rh .stars{display:inline-flex;gap:3px;} .rh .stars svg{width:18px;height:18px;} .rh .star-fill{fill:var(--gold);} .rh .star-empty{fill:none;stroke:var(--ink-3);stroke-width:1.5;} /* ---------- placeholder image (label/photo proxy) ---------- */ .rh .placeholder-img{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 11px,var(--surface-3) 11px,var(--surface-3) 22px);display:grid;place-items:center;color:var(--ink-3);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;letter-spacing:.5px;} /* ---------- avatar stack ---------- */ .rh .avstack{display:inline-flex;} .rh .avstack i{width:22px;height:22px;border-radius:50%;display:inline-block;border:2px solid var(--surface);margin-left:-7px;background:linear-gradient(150deg,var(--gold-soft),var(--burgundy-soft));} .rh .avstack i:first-child{margin-left:0;} /* ---------- minicard (cellar peek) ---------- */ .rh .minicard{flex:0 0 132px;cursor:pointer;} .rh .minicard .placeholder-img{width:100%;height:96px;border-radius:12px;} .rh .minicard p{margin:0;} /* ---------- menu rows (account hub) ---------- */ .rh .menu-group{overflow:hidden;} .rh .menurow{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--line-2);color:var(--ink);font-weight:600;font-size:14.5px;cursor:pointer;} .rh .menurow:last-child{border-bottom:0;} .rh .menurow .menurow-l{display:flex;align-items:center;gap:13px;min-width:0;} .rh .menuicon{width:30px;height:30px;color:var(--ink-2);display:grid;place-items:center;flex:0 0 auto;} .rh .menuicon svg{width:21px;height:21px;} .rh .menurow .chev{width:18px;height:18px;color:var(--ink-3);flex:0 0 auto;} .rh .menurow.danger{color:var(--burgundy);} /* ---------- wine grid / cards ---------- */ .rh .winegrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;} .rh .winecard{overflow:hidden;cursor:pointer;display:block;transition:transform .16s,box-shadow .2s;} .rh .winecard:active{transform:scale(.98);} .rh .winecard .wc-body{padding:12px;min-width:0;} .rh .winecard .wc-name{font-weight:700;font-size:13.5px;margin:8px 0 2px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .rh .winecard .wc-sub{font-size:11px;margin:0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} @media (min-width:920px){.rh #screen-cellar .winegrid,.rh .winegrid.cols3{grid-template-columns:repeat(3,1fr);}} /* ---------- wine detail rows ---------- */ .rh .winerow{display:flex;align-items:center;gap:13px;padding:12px;} .rh .backbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--ink-2);font-weight:600;font-size:14px;cursor:pointer;padding:4px 0;margin-bottom:4px;} .rh .menu-course span.eyebrow{display:block;margin-bottom:6px;} .rh .menu-course p{margin:0;font-size:15px;color:var(--ink);line-height:1.4;font-weight:500;} /* ============================================================ Semantic blocks (handoff inline styles → named classes) ============================================================ */ /* greeting */ .rh-greet{margin:8px 2px 18px;} .rh-greet .h-display{font-size:30px;line-height:1.06;} /* balance card — selector beats `.rh .card`/`[data-theme=dark] .card` so the burgundy gradient + white text win */ .rh .card.rh-balance-card{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(155deg,var(--burgundy),var(--burgundy-deep));border-color:transparent;color:#fff;box-shadow:var(--shadow-md);} .rh-balance-card .bc-label{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700;} .rh-balance-card .bc-amount{font-family:var(--serif);font-size:34px;font-weight:600;line-height:1;margin-top:7px;} /* rsvp card — beat `.rh .card`/`.rh .card.pad` for bg + padding */ .rh .card.rh-rsvp-inner{background:var(--surface-2);border-color:var(--line-2);padding:14px;} .rh-rsvp-cover{height:128px;position:relative;} .rh-rsvp-cover .tag-over{position:absolute;left:14px;top:14px;background:rgba(0,0,0,.42);color:#fff;backdrop-filter:blur(4px);} /* event date chip */ .rh-datechip{flex:0 0 auto;text-align:center;background:var(--surface);border-radius:12px;padding:6px 10px;box-shadow:var(--shadow-sm);} .rh-datechip .d{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--burgundy);line-height:1;} .rh-datechip .m{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-2);font-weight:700;} /* event hero */ .rh-hero{height:150px;position:relative;} .rh-hero .hero-grad{position:absolute;inset:0;background:linear-gradient(transparent,rgba(20,10,10,.66));} .rh-hero .hero-cap{position:absolute;left:18px;right:18px;bottom:14px;color:#fff;} /* profile header (account) — beat `.rh .card.pad` for padding */ .rh .card.rh-profile-head{text-align:center;padding-top:26px;padding-bottom:24px;margin:8px 0 18px;} .rh-profile-head .ava{width:78px;height:78px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:30px;font-weight:600;background:linear-gradient(160deg,var(--burgundy),var(--burgundy-deep));box-shadow:var(--shadow-md),0 0 0 1px rgba(168,129,78,.4) inset;} /* stat tiles row — beat `.rh .card.pad` for padding */ .rh .card.rh-stat{padding:14px;text-align:center;} .rh-stat .v{font-size:24px;} .rh-stat .l{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.3px;margin-top:2px;} /* drinking window icon box */ .rh-iconbox{width:44px;height:44px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto;color:var(--gold);} /* status pill (rsvp going) */ .rh-status-going{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--sage-ink);} /* subdued admin strip */ .rh-admin-strip{border:1px dashed var(--line);background:transparent;} /* alerts (portal banners) */ .rh-alert{border-radius:var(--r-md);padding:12px 16px;font-size:14px;font-weight:500;display:flex;gap:8px;align-items:flex-start;} .rh-alert-info{background:color-mix(in srgb,var(--burgundy) 8%,var(--surface));color:var(--ink);border:1px solid var(--line);} .rh-alert-warning{background:color-mix(in srgb,var(--gold) 16%,var(--surface));color:var(--gold-ink);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);} .rh-alert-danger{background:color-mix(in srgb,var(--burgundy) 14%,var(--surface));color:var(--burgundy);border:1px solid color-mix(in srgb,var(--burgundy) 30%,transparent);} /* screen router */ .rh .screen{display:none;} .rh .screen.active{display:block;} /* nav badge on account/surveys */ .rh-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--gold);color:#3a2a12;font-size:11px;font-weight:800;} /* ============================================================ rsvp.php member portal — spacing utilities + extra semantics (Stage 1 rebuild; keeps the page free of inline style=) ============================================================ */ /* spacing utilities */ .rh .mb-0{margin-bottom:0;} .rh .mb-1{margin-bottom:6px;} .rh .mb-2{margin-bottom:10px;} .rh .mb-3{margin-bottom:14px;} .rh .mb-4{margin-bottom:18px;} .rh .mb-5{margin-bottom:24px;} .rh .mt-1{margin-top:6px;} .rh .mt-2{margin-top:10px;} .rh .mt-3{margin-top:14px;} .rh .mt-4{margin-top:18px;} .rh .w-100{width:100%;} .rh .fill{flex:1 1 auto;min-width:0;} .rh .noshrink{flex:0 0 auto;} .rh .center{text-align:center;} .rh .right{text-align:right;} .rh .clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .rh .gap-sm{gap:7px;} .rh .wrap{flex-wrap:wrap;} /* empty-state note */ .rh-empty{padding:22px;border-radius:var(--r-lg);background:var(--surface-2);color:var(--ink-2);font-size:14px;text-align:center;border:1px solid var(--line-2);} /* balance card "statement" button keeps min height */ .rh-balance-card .btn-gold{min-height:42px;} /* announcement mini (home) */ .rh-ann{display:block;cursor:pointer;} .rh-ann .ann-title{font-weight:700;font-size:14px;color:var(--ink);line-height:1.25;} .rh-ann .ann-body{display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2);color:var(--ink-2);font-size:13.5px;line-height:1.55;} .rh-ann.open .ann-body{display:block;} .rh-ann .ann-meta{font-size:11px;color:var(--ink-3);margin-top:6px;} /* feed peek / tappable card */ .rh-tapcard{cursor:pointer;display:block;} .rh-feedpeek-thumb{width:58px;height:58px;border-radius:10px;overflow:hidden;background:var(--surface-2);flex:0 0 auto;} .rh-feedpeek-thumb img{width:100%;height:100%;object-fit:cover;display:block;} /* rsvp toggle buttons (events screen + home status) */ .rh .rsvp-toggle{flex:1;} .rh .rsvp-toggle.is-yes{background:var(--sage-bg);color:var(--sage-ink);border-color:color-mix(in srgb,var(--sage) 35%,transparent);} .rh .rsvp-toggle.is-no{background:var(--burgundy);color:#fff;border-color:transparent;} /* apology status pill (companion to .rh-status-going) */ .rh-status-apol{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--burgundy);} .rh-status-await{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--gold-ink);} /* guest + fee + special-requests blocks (events screen) */ .rh-guestbox{margin-top:14px;padding:14px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);display:none;} .rh-guestbox.show{display:block;} .rh-guest-entry{display:flex;gap:10px;margin-bottom:10px;} .rh-guest-entry .input{flex:1;min-width:0;} .rh .btn-remove{min-height:var(--tap);width:auto;padding:0 14px;background:transparent;color:var(--burgundy);border:1px solid color-mix(in srgb,var(--burgundy) 30%,transparent);border-radius:13px;font-weight:650;cursor:pointer;flex:0 0 auto;} .rh-feebox{margin-top:12px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--burgundy) 7%,var(--surface));font-size:14px;font-weight:650;color:var(--ink);} .rh-srbox{margin-top:14px;padding:14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--gold) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);} .rh-srbox .sr-q{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;} .rh-bank{margin-top:12px;} /* attending count line */ .rh-attendline{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;color:var(--sage-ink);} /* partner-event tag */ .rh .tag.partner{background:rgba(146,108,160,.16);color:#8a5aa0;} /* status / payment pills (history + payments) */ .rh-pill{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap;} .rh-pill-going{background:var(--sage-bg);color:var(--sage-ink);} .rh-pill-apology{background:color-mix(in srgb,var(--burgundy) 12%,var(--surface));color:var(--burgundy);} .rh-pill-paid{background:var(--sage-bg);color:var(--sage-ink);} .rh-pill-warn{background:color-mix(in srgb,var(--gold) 20%,var(--surface));color:var(--gold-ink);} .rh-pill-unpaid{background:color-mix(in srgb,var(--burgundy) 12%,var(--surface));color:var(--burgundy);} .rh-pill-waived{background:color-mix(in srgb,#8a5aa0 16%,var(--surface));color:#7b1fa2;} /* list row (history / payments / compact event) */ .rh-listrow{display:flex;align-items:center;gap:13px;padding:14px 16px;} .rh-listrow .lr-main{flex:1;min-width:0;} .rh-listrow .lr-title{font-weight:700;font-size:14px;line-height:1.25;} .rh-listrow .lr-sub{font-size:12px;color:var(--ink-2);margin-top:2px;} .rh-listrow .lr-right{flex:0 0 auto;text-align:right;} .rh-amt-pos{color:var(--sage-ink);font-weight:700;font-variant-numeric:tabular-nums;} .rh-amt-neg{color:var(--burgundy);font-weight:700;font-variant-numeric:tabular-nums;} /* key/value account summary */ .rh-kv{display:grid;grid-template-columns:1fr auto;gap:9px 14px;font-size:14px;align-items:baseline;} .rh-kv .k{color:var(--ink-2);} .rh-kv .v{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;} .rh-kv .pos{color:var(--sage-ink);} .rh-kv .neg{color:var(--burgundy);} .rh-kv .sub{padding-left:14px;font-size:13px;color:var(--ink-2);} .rh-kv .total-k,.rh-kv .total-v{border-top:1px solid var(--line);padding-top:11px;margin-top:3px;font-weight:750;} /* message-committee panel */ .rh-msgpanel{display:none;margin-top:14px;} .rh-msgpanel.show{display:block;} /* chart container */ .rh-chart{padding:18px;} /* consistency warning (fail-loud) */ .rh-warn{margin-top:12px;padding:10px 14px;border-radius:12px;font-size:12px;background:color-mix(in srgb,var(--burgundy) 12%,var(--surface));color:var(--burgundy);border:1px solid color-mix(in srgb,var(--burgundy) 26%,transparent);} /* back button spacing already in .backbtn; profile small label */ .rh-fieldnote{font-size:12px;color:var(--ink-3);margin-top:6px;} /* explicit h-display sizes (handoff sets these inline per use) */ .rh .h-lg{font-size:28px;} .rh .h-md{font-size:23px;} .rh .h-sm{font-size:20px;} .rh .h-xs{font-size:18px;} /* misc helpers to keep rsvp.php free of inline style= */ .rh .block{display:block;} .rh .justify-center{justify-content:center;} .rh .px-0{padding-left:0;padding-right:0;} .rh .fw-bold{font-weight:750;} .rh .fs-16{font-size:16px;} .rh .minicard .nm{font-weight:700;font-size:12.5px;line-height:1.2;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ============================================================ Login splash (Stage 2) — fixed dark burgundy, scoped .rh-login. Intentionally dark in BOTH themes (handoff design); inputs/banners styled for the dark splash rather than token surfaces. ============================================================ */ .rh-login{min-height:100dvh;min-height:100vh;} .rh-login .login{position:relative;min-height:100dvh;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:32px 24px calc(34px + env(safe-area-inset-bottom));overflow:hidden;} .rh-login .login-bg{position:fixed;inset:0;z-index:0;background:radial-gradient(125% 80% at 50% 0%, var(--burgundy-soft) 0%, var(--burgundy) 32%, var(--burgundy-deep) 70%, #38151a 100%);} .rh-login .login-bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 22px);opacity:.55;} .rh-login .login-inner{position:relative;z-index:1;width:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;} .rh-login .crest{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:600;font-size:30px;background:linear-gradient(160deg,var(--burgundy),var(--burgundy-deep));box-shadow:var(--shadow-md),0 0 0 1px rgba(168,129,78,0.5) inset;margin-bottom:22px;} .rh-login .eyebrow{color:var(--gold-soft);margin-bottom:10px;} .rh-login .h-display{color:#fff;font-size:34px;line-height:1.05;margin-bottom:6px;} .rh-login .login-sub{color:rgba(255,255,255,.6);font-size:13px;letter-spacing:.3px;margin-bottom:30px;} .rh-login .field{margin-bottom:14px;} .rh-login .login-input{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:#fff;} .rh-login .login-input::placeholder{color:rgba(255,255,255,0.5);} .rh-login .login-input:focus{outline:none;border-color:var(--gold-soft);box-shadow:0 0 0 3px rgba(194,160,107,0.28);background:rgba(255,255,255,0.12);} .rh-login textarea.login-input{min-height:74px;padding:12px 15px;line-height:1.5;resize:none;} .rh-login .login-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 22px;} .rh-login .login-check{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.78);font-size:13px;font-weight:600;cursor:pointer;} .rh-login .login-check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.08);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;margin:0;} .rh-login .login-check input:checked{background:linear-gradient(160deg,var(--gold-soft),var(--gold));border-color:transparent;} .rh-login .login-check input:checked::after{content:"";width:11px;height:6px;border-left:2.5px solid #3a2a12;border-bottom:2.5px solid #3a2a12;transform:rotate(-45deg) translateY(-1px);} .rh-login .login-check input:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;} .rh-login .login-link{color:var(--gold-soft);font-size:13px;font-weight:600;white-space:nowrap;} .rh-login .login-back{display:block;text-align:center;color:var(--gold-soft);font-size:13px;font-weight:600;margin-top:18px;} .rh-login .login-reset-intro{color:rgba(255,255,255,.7);font-size:13px;line-height:1.5;margin-bottom:16px;} .rh-login .login-h3{color:#fff;font-family:var(--serif);font-weight:540;font-size:21px;margin-bottom:10px;} /* banners legible on the dark splash */ .rh-login .error,.rh-login .success{border-radius:13px;padding:12px 15px;font-size:14px;margin-bottom:16px;border:1px solid;} .rh-login .error{background:rgba(150,40,46,0.30);color:#ffdadc;border-color:rgba(255,150,150,0.40);} .rh-login .success{background:rgba(74,97,81,0.34);color:#daf0df;border-color:rgba(150,200,160,0.40);} @media (min-width:920px){ .rh-login .login{justify-content:center;} } /* ============================================================ Feed (Stage 3) — refined card wrapper + overrides for the retained feed-*.css sub-components (likes/comments/photos/wines). .rh selectors beat the bare feed-*.css ones on specificity. ============================================================ */ .rh .card.feed-card{overflow:hidden;margin-bottom:16px;} .rh .feed-cover{width:100%;aspect-ratio:16/9;max-height:380px;overflow:hidden;background:var(--surface-2);} .rh .feed-cover img{width:100%;height:100%;object-fit:cover;display:block;} .rh .feed-post-body{padding:18px;} .rh .feed-eyebrow{color:var(--gold-ink);margin-bottom:8px;} .rh .feed-title{font-size:21px;line-height:1.22;margin:0 0 10px;color:var(--ink);} .rh .feed-post-content{color:var(--ink);font-size:15px;line-height:1.65;} .rh .feed-post-content a{color:var(--burgundy);} .rh .feed-post-content blockquote{border-left:3px solid var(--burgundy);color:var(--ink-2);} .rh .feed-date-group{margin:26px 2px 12px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold-ink);border-bottom:1px solid var(--line);padding-bottom:8px;} /* sub-panels onto refined surfaces */ .rh .feed-post-wines{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);} .rh .feed-wine-item{background:var(--surface);border:1px solid var(--line);} .rh .feed-post-context{border-top:1px dashed var(--line);color:var(--ink-2);} .rh .feed-post-context strong{color:var(--ink);} @media (max-width:600px){.rh .feed-post-body{padding:15px 16px;}} /* ============================================================ Cellar (Stage 4) — browse grid + wine detail. Reuses .winegrid/ .winecard/.card/.chip/.tag/.input/.score. cellar-browse.css still styles the star glyphs (.star-btn/.stars-static); .rh tints them. ============================================================ */ .rh .winegrid{margin-bottom:8px;} .rh .winecard{overflow:hidden;} .rh .winecard-photo{width:100%;height:128px;object-fit:cover;display:block;} .rh .winecard .wc-ph{width:100%;height:128px;} .rh .winecard .wc-producer{font-size:11px;color:var(--ink-2);margin:8px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .rh .winecard .wc-rating{display:flex;align-items:baseline;gap:6px;margin-top:9px;} .rh .winecard .wc-rating .score{font-size:16px;} /* search + filter sheet */ .rh .cellar-searchrow{display:flex;align-items:center;gap:10px;margin-bottom:14px;} .rh .cellar-search{position:relative;flex:1 1 auto;min-width:0;} .rh .cellar-search .input{padding-left:42px;width:100%;} .rh .cellar-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);} .rh .cellar-filter-toggle{width:48px;height:48px;flex:0 0 auto;} .rh .cellar-advanced{margin-bottom:16px;} .rh .cellar-advanced[hidden]{display:none;} /* wine detail */ .rh .wine-hero{overflow:hidden;margin-bottom:16px;} .rh .wine-hero a,.rh .wine-hero img{display:block;width:100%;} .rh .wine-hero img{max-height:320px;object-fit:cover;} .rh .wine-hero .placeholder-img{height:230px;} .rh .wine-section .eyebrow{margin-bottom:9px;} .rh .wine-section p{color:var(--ink);font-size:15px;line-height:1.6;margin:0 0 8px;} .rh .wine-section p:last-child{margin-bottom:0;} .rh .wine-rating-card .aggregate-rating{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:18px;} .rh .wine-rating-card .star-widget{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-top:6px;} .rh .wine-driprow{display:flex;align-items:center;gap:14px;} /* tint cellar-browse.css star glyphs to the refined palette */ .rh .star-btn{color:var(--ink-3);} .rh .star-btn.filled,.rh .star-btn.half{color:var(--gold);} /* ============================================================ FIX: the refined member tab bar is a