/* ══════════════════════════════════════════════════════════════ PWA.V1.CSS — The Grove Atelier · Standalone App Shell THESIS: A members-club app that feels like a reserved table, not a storefront. Forest green ground refuses the white-card restaurant default. Cream type and brushed-gold accents read by candlelight and morning sun equally. OWN-WORLD: Deep forest #1A332A / near-black green #0F1F18, cream #F4F3F0, gold #C9A84C, Cormorant display, Josefin Sans UI. Applies only when is present — website untouched. ══════════════════════════════════════════════════════════════ */ /* ── Design tokens (scoped to .pwa) ──────────────────────── */ .pwa { --pwa-bg: #0F1F18; --pwa-surface: #1A332A; --pwa-card: #243B30; --pwa-raised: #2E4C3C; --pwa-gold: #C9A84C; --pwa-gold-dim: rgba(201,168,76,0.15); --pwa-cream: #F4F3F0; --pwa-c60: rgba(244,243,240,0.6); --pwa-c30: rgba(244,243,240,0.3); --pwa-c12: rgba(244,243,240,0.12); --pwa-border: rgba(244,243,240,0.08); --pwa-tab-h: 64px; --pwa-r: 14px; --pwa-safe-t: env(safe-area-inset-top, 0px); --pwa-safe-b: env(safe-area-inset-bottom, 0px); } /* ── Body reset ──────────────────────────────────────────── */ .pwa body { background: var(--pwa-bg) !important; color: var(--pwa-cream) !important; padding-bottom: calc(var(--pwa-tab-h) + var(--pwa-safe-b)) !important; min-height: 100dvh; overscroll-behavior-y: none; } /* ── Hide website furniture ──────────────────────────────── */ .pwa nav:not(#pwa-tab-bar), .pwa .mob-overlay, .pwa .gold-bar, .pwa footer:not(.pwa-footer) { display: none !important; } /* ── Browser surface theming ─────────────────────────────── */ .pwa ::-webkit-scrollbar { width: 4px; } .pwa ::-webkit-scrollbar-track { background: var(--pwa-bg); } .pwa ::-webkit-scrollbar-thumb { background: rgba(244,243,240,0.14); border-radius: 2px; } .pwa ::selection { background: rgba(201,168,76,0.22); color: var(--pwa-cream); } .pwa :focus-visible { outline: 2px solid var(--pwa-gold); outline-offset: 3px; } /* ══ BOTTOM TAB BAR ══════════════════════════════════════════ */ #pwa-tab-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9000 !important; display: flex !important; height: calc(var(--pwa-tab-h) + var(--pwa-safe-b)) !important; padding-bottom: var(--pwa-safe-b) !important; background: #1A332A !important; border-top: 1px solid rgba(244,243,240,0.08) !important; box-shadow: 0 -8px 32px rgba(0,0,0,0.4) !important; } .pwa-tab { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; color: rgba(244,243,240,0.3) !important; text-decoration: none !important; padding: 0 2px !important; position: relative !important; transition: color 0.2s ease !important; -webkit-tap-highlight-color: transparent; user-select: none; background: none !important; border: none !important; } .pwa-tab::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: #C9A84C; border-radius: 0 0 2px 2px; opacity: 0; transform: scaleX(0.4); transition: opacity 0.2s, transform 0.28s cubic-bezier(0.22,1,0.36,1); } .pwa-tab.active { color: #C9A84C !important; } .pwa-tab.active::before { opacity: 1; transform: scaleX(1); } .pwa-tab-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .pwa-tab-icon svg { width: 22px; height: 22px; } .pwa-tab-label { font-family: 'Josefin Sans', 'Montserrat', sans-serif; font-size: 0.48rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; } /* ══ PWA HOME SCREEN ══════════════════════════════════════════ */ .pwa-home { display: flex; flex-direction: column; min-height: 100dvh; background: var(--pwa-bg); padding-bottom: 0; /* tab bar handles bottom */ } /* ── App header ───────────────────────────────────────────── */ .pwa-home-header { padding: calc(var(--pwa-safe-t) + 1.5rem) 1.5rem 1.25rem; background: var(--pwa-surface); border-bottom: 1px solid var(--pwa-border); display: flex; align-items: flex-end; justify-content: space-between; } .pwa-home-brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; font-weight: 300; font-style: italic; color: var(--pwa-gold); letter-spacing: 0.02em; } .pwa-home-date { font-family: 'Josefin Sans', sans-serif; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pwa-c30); } /* ── Welcome strip ────────────────────────────────────────── */ .pwa-home-welcome { background: var(--pwa-surface); padding: 0 1.5rem 1.8rem; } .pwa-home-greeting { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2rem, 7vw, 3rem); font-weight: 300; font-style: italic; color: var(--pwa-cream); line-height: 1.1; } .pwa-home-name { font-size: 0.72rem; color: var(--pwa-c60); margin-top: 0.2rem; letter-spacing: 0.04em; } /* ── Quick-action grid (2×2) ──────────────────────────────── */ .pwa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--pwa-border); flex-shrink: 0; } .pwa-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; padding: 1.8rem 1rem; background: var(--pwa-card); text-decoration: none; color: var(--pwa-cream); transition: background 0.18s; -webkit-tap-highlight-color: transparent; } .pwa-action:hover, .pwa-action:active { background: var(--pwa-raised); } .pwa-action-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(201,168,76,0.1); border-radius: 12px; color: var(--pwa-gold); } .pwa-action-icon svg { width: 22px; height: 22px; } .pwa-action-label { font-family: 'Josefin Sans', sans-serif; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pwa-c60); } /* ── Today section ────────────────────────────────────────── */ .pwa-today { flex: 1; padding: 1.4rem 1.5rem 1.5rem; background: var(--pwa-bg); } .pwa-section-label { font-family: 'Josefin Sans', sans-serif; font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--pwa-gold); margin-bottom: 1rem; } .pwa-event-row { display: flex; align-items: flex-start; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--pwa-border); } .pwa-event-row:last-child { border-bottom: none; } .pwa-event-date { min-width: 2.4rem; text-align: center; flex-shrink: 0; } .pwa-event-day { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 300; line-height: 1; color: var(--pwa-gold); } .pwa-event-mon { font-size: 0.48rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pwa-c30); } .pwa-event-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; } .pwa-event-body { flex: 1; min-width: 0; } .pwa-event-title { font-size: 0.85rem; color: var(--pwa-cream); margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwa-event-meta { font-size: 0.58rem; letter-spacing: 0.06em; color: var(--pwa-c30); text-transform: uppercase; } .pwa-empty { font-size: 0.78rem; color: var(--pwa-c30); text-align: center; padding: 2rem 0; letter-spacing: 0.06em; } /* ══ MEMBER DASHBOARD ═════════════════════════════════════════ */ /* ── Views (loading / login / error) ──────────────────────── */ .pwa #view-loading, .pwa #view-login, .pwa #view-error-state, .pwa #view-not-member { min-height: calc(100dvh - var(--pwa-tab-h) - var(--pwa-safe-b)); display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; background: var(--pwa-bg); } .pwa .spinner-lg { width: 32px; height: 32px; border: 2px solid var(--pwa-gold-dim); border-top-color: var(--pwa-gold); border-radius: 50%; animation: pwaSpin 0.75s linear infinite; } @keyframes pwaSpin { to { transform: rotate(360deg); } } .pwa .loading-label { margin-top: 1rem; font-family: 'Josefin Sans', sans-serif; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pwa-c30); } /* ── Message cards ────────────────────────────────────────── */ .pwa .message-card { background: var(--pwa-card); border: 1px solid var(--pwa-border); border-radius: var(--pwa-r); padding: 2.5rem 1.75rem; width: 100%; max-width: 320px; text-align: center; } .pwa .message-icon { font-size: 1.4rem; color: var(--pwa-gold); margin-bottom: 1rem; } .pwa .message-card .eyebrow { display: none; } .pwa .message-card h1 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 300; color: var(--pwa-cream); margin-bottom: 0.5rem; } .pwa .message-card .divider { width: 32px; height: 1px; background: var(--pwa-gold-dim); margin: 0.9rem auto; } .pwa .message-card .sub-text { font-size: 0.78rem; color: var(--pwa-c60); line-height: 1.7; } /* ── Dash hero ────────────────────────────────────────────── */ .pwa .dash-hero { padding: calc(var(--pwa-safe-t) + 2.5rem) 1.5rem 2rem !important; background: var(--pwa-surface) !important; border-bottom: 1px solid var(--pwa-border); text-align: center; position: relative; } .pwa .dash-hero::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 36px; height: 1px; background: var(--pwa-gold); } .pwa .tier-badge { display: inline-block; font-family: 'Josefin Sans', sans-serif !important; font-size: 0.48rem !important; letter-spacing: 0.34em !important; text-transform: uppercase; color: var(--pwa-gold) !important; border: 1px solid var(--pwa-gold-dim) !important; background: transparent !important; padding: 0.28rem 0.9rem !important; border-radius: 999px !important; margin-bottom: 1.1rem; } .pwa .dash-welcome { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(1.8rem, 6vw, 2.5rem) !important; font-weight: 300 !important; font-style: italic !important; color: var(--pwa-cream) !important; line-height: 1.15 !important; margin: 0 0 0.3rem !important; } .pwa .dash-email { font-size: 0.66rem !important; color: var(--pwa-c30) !important; letter-spacing: 0.06em !important; } /* ── Stats grid ───────────────────────────────────────────── */ .pwa .stats-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important; background: var(--pwa-border) !important; margin: 0 !important; } .pwa .stat-card { background: var(--pwa-card) !important; border: none !important; border-radius: 0 !important; padding: 1.6rem 1.25rem !important; text-align: center; box-shadow: none !important; } .pwa .stat-label { font-family: 'Josefin Sans', sans-serif !important; font-size: 0.46rem !important; letter-spacing: 0.28em !important; text-transform: uppercase; color: var(--pwa-c30) !important; margin-bottom: 0.5rem !important; } .pwa .stat-value { font-family: 'Cormorant Garamond', serif !important; font-size: 2.6rem !important; font-weight: 300 !important; line-height: 1; color: var(--pwa-gold) !important; margin: 0 !important; } .pwa .stat-date { font-size: 1.3rem !important; } .pwa .stat-sub { font-size: 0.55rem !important; color: var(--pwa-c30) !important; letter-spacing: 0.06em !important; margin-top: 0.35rem !important; line-height: 1.5 !important; } /* ── Actions section ──────────────────────────────────────── */ .pwa .actions-section { padding: 1.6rem 1.25rem !important; background: var(--pwa-bg) !important; display: flex !important; flex-direction: column !important; gap: 0.65rem !important; border-top: 1px solid var(--pwa-border); } .pwa .btn-primary { background: var(--pwa-gold) !important; color: #1A332A !important; border: none !important; font-family: 'Josefin Sans', sans-serif !important; font-size: 0.6rem !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; font-weight: 600 !important; padding: 1rem 1.5rem !important; border-radius: 4px !important; cursor: pointer; width: 100%; text-align: center; display: block; text-decoration: none; transition: opacity 0.18s; } .pwa .btn-primary:hover { opacity: 0.88; } .pwa .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } .pwa .btn-ghost { background: none !important; color: var(--pwa-c60) !important; border: 1px solid var(--pwa-border) !important; font-family: 'Josefin Sans', sans-serif !important; font-size: 0.6rem !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; font-weight: 400 !important; padding: 0.95rem 1.5rem !important; border-radius: 4px !important; cursor: pointer; width: 100%; text-align: center; display: block; text-decoration: none; transition: color 0.18s, border-color 0.18s; } .pwa .btn-ghost:hover { color: var(--pwa-cream) !important; border-color: var(--pwa-c12) !important; } .pwa #portal-error { color: #E57373 !important; font-size: 0.7rem !important; } /* ── Dash note ────────────────────────────────────────────── */ .pwa .dash-note { font-size: 0.65rem !important; color: var(--pwa-c30) !important; line-height: 1.7 !important; text-align: center !important; padding: 1rem 1.5rem !important; border-top: 1px solid var(--pwa-border) !important; } /* ── Events section (on dashboard) ───────────────────────── */ .pwa .events-section { padding: 1.25rem 1.25rem 1.5rem !important; background: var(--pwa-bg) !important; border-top: 1px solid var(--pwa-border) !important; } .pwa .section-eyebrow { font-family: 'Josefin Sans', sans-serif !important; font-size: 0.48rem !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: var(--pwa-gold) !important; margin-bottom: 0.85rem !important; } .pwa .event-item { display: flex !important; align-items: flex-start !important; gap: 0.9rem !important; padding: 0.8rem 0 !important; border-bottom: 1px solid var(--pwa-border) !important; background: transparent !important; } .pwa .event-date-col { min-width: 2.2rem; text-align: center; flex-shrink: 0; } .pwa .event-day { font-family: 'Cormorant Garamond', serif !important; font-size: 1.3rem !important; font-weight: 300 !important; line-height: 1 !important; color: var(--pwa-gold) !important; } .pwa .event-mon { font-size: 0.46rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--pwa-c30) !important; } .pwa .event-type-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; } .pwa .event-body { flex: 1; min-width: 0; } .pwa .event-title { font-size: 0.85rem !important; color: var(--pwa-cream) !important; margin-bottom: 0.15rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwa .event-time { font-size: 0.58rem !important; letter-spacing: 0.06em !important; color: var(--pwa-c30) !important; text-transform: uppercase !important; } .pwa .event-note { font-size: 0.68rem !important; color: var(--pwa-c60) !important; margin-top: 0.2rem !important; } .pwa .events-empty { font-size: 0.75rem !important; color: var(--pwa-c30) !important; text-align: center !important; padding: 1.5rem 0 !important; } /* ── Orders section ───────────────────────────────────────── */ .pwa .orders-section { padding: 1.25rem 1.25rem 1.5rem !important; background: var(--pwa-bg) !important; border-top: 1px solid var(--pwa-border) !important; opacity: 0.55; } /* ── Page footer ──────────────────────────────────────────── */ .pwa .page-footer { font-size: 0.58rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--pwa-c30) !important; text-align: center !important; padding: 1.25rem !important; border-top: 1px solid var(--pwa-border) !important; background: var(--pwa-bg) !important; } /* ══ REWARDS PAGE ═════════════════════════════════════════════ */ .pwa #view-rewards { background: var(--pwa-bg); } .pwa .page-wrap { padding: 0; max-width: 100%; background: var(--pwa-bg) !important; } .pwa .page-eyebrow { font-family: 'Josefin Sans', sans-serif !important; font-size: 0.48rem !important; letter-spacing: 0.3em !important; text-transform: uppercase; color: var(--pwa-gold) !important; text-align: center; padding-top: calc(var(--pwa-safe-t) + 2rem) !important; padding-left: 1.5rem; padding-right: 1.5rem; margin: 0 !important; } .pwa .page-title { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(1.9rem, 6vw, 2.5rem) !important; font-weight: 300 !important; font-style: italic !important; color: var(--pwa-cream) !important; text-align: center; padding: 0.4rem 1.5rem 0 !important; line-height: 1.15 !important; margin: 0 !important; } .pwa .page-sub { font-size: 0.74rem !important; color: var(--pwa-c60) !important; line-height: 1.7 !important; text-align: center; padding: 0.75rem 1.5rem 0 !important; max-width: 44ch; margin-inline: auto !important; } .pwa .divider { width: 36px; height: 1px; background: var(--pwa-gold-dim); margin: 1.25rem auto !important; } /* ── Points banner ────────────────────────────────────────── */ .pwa .points-banner { background: var(--pwa-card) !important; border: none !important; border-radius: 0 !important; margin: 0 !important; padding: 1.75rem 1.5rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border-top: 1px solid var(--pwa-border) !important; border-bottom: 1px solid var(--pwa-border) !important; } .pwa .points-label { font-family: 'Josefin Sans', sans-serif !important; font-size: 0.46rem !important; letter-spacing: 0.28em !important; text-transform: uppercase; color: var(--pwa-c30) !important; margin-bottom: 0.3rem !important; } .pwa .points-value { font-family: 'Cormorant Garamond', serif !important; font-size: 3.8rem !important; font-weight: 300 !important; line-height: 1; color: var(--pwa-gold) !important; } .pwa .points-sub { font-size: 0.58rem !important; color: var(--pwa-c30) !important; letter-spacing: 0.1em !important; margin-top: 0.2rem !important; } .pwa .points-rate { text-align: right; border-left: 1px solid var(--pwa-border) !important; padding-left: 1.25rem !important; } .pwa .points-rate-num { font-family: 'Cormorant Garamond', serif !important; font-size: 1.4rem !important; font-weight: 300 !important; color: var(--pwa-cream) !important; } .pwa .points-rate-label { font-size: 0.56rem !important; color: var(--pwa-c30) !important; letter-spacing: 0.1em !important; } /* ── Error state ──────────────────────────────────────────── */ .pwa .page-error:not(:empty) { font-size: 0.72rem; color: #EF9A9A; text-align: center; padding: 0.75rem 1.5rem; } /* ── Coupon result ────────────────────────────────────────── */ .pwa .coupon-result { background: var(--pwa-card) !important; border: 1px solid var(--pwa-gold-dim) !important; border-radius: var(--pwa-r) !important; margin: 1rem 1.25rem !important; padding: 1.5rem !important; text-align: center; } .pwa .coupon-badge { font-family: 'Josefin Sans', sans-serif !important; font-size: 0.48rem !important; letter-spacing: 0.28em !important; text-transform: uppercase; color: var(--pwa-gold) !important; margin-bottom: 0.6rem !important; } .pwa .coupon-code { font-family: 'Cormorant Garamond', serif !important; font-size: 2rem !important; font-weight: 400 !important; color: var(--pwa-cream) !important; letter-spacing: 0.08em !important; margin-bottom: 0.4rem !important; } .pwa .coupon-desc { font-size: 0.72rem !important; color: var(--pwa-c60) !important; margin-bottom: 0.9rem !important; } .pwa .coupon-copy-btn { background: var(--pwa-gold) !important; color: var(--pwa-surface) !important; border: none !important; font-family: 'Josefin Sans', sans-serif !important; font-size: 0.58rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-weight: 600 !important; padding: 0.65rem 1.5rem !important; border-radius: 4px !important; cursor: pointer; transition: opacity 0.18s; } .pwa .coupon-copy-btn:hover { opacity: 0.85; } /* ── Section head + rewards grid ──────────────────────────── */ .pwa .section-head { font-family: 'Josefin Sans', sans-serif !important; font-size: 0.48rem !important; letter-spacing: 0.3em !important; text-transform: uppercase; color: var(--pwa-gold) !important; padding: 1.4rem 1.25rem 0.65rem !important; margin: 0 !important; } .pwa .rewards-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; padding: 0 1.25rem 1.5rem !important; } /* Reward card classes are inserted by rewards.html JS, using inconsistent naming. These selectors cover all known variants. */ .pwa [class*="reward-card"], .pwa .rw-card { background: var(--pwa-card) !important; border: 1px solid var(--pwa-border) !important; border-radius: 12px !important; padding: 1.1rem 0.95rem 1.2rem !important; box-shadow: none !important; transition: border-color 0.2s, transform 0.2s; } .pwa [class*="reward-card"]:hover, .pwa .rw-card:hover { border-color: var(--pwa-gold-dim) !important; transform: translateY(-2px); } .pwa [class*="reward-discount"], .pwa .rw-discount { font-family: 'Cormorant Garamond', serif !important; font-size: 1.6rem !important; font-weight: 300 !important; color: var(--pwa-gold) !important; line-height: 1 !important; margin-bottom: 0.35rem !important; } .pwa [class*="reward-desc"], .pwa .rw-desc { font-size: 0.68rem !important; color: var(--pwa-c60) !important; line-height: 1.45 !important; margin-bottom: 0.4rem !important; } .pwa [class*="reward-cost"], .pwa .rw-cost { font-family: 'Josefin Sans', sans-serif !important; font-size: 0.54rem !important; letter-spacing: 0.12em !important; color: var(--pwa-c30) !important; } .pwa [class*="reward-btn"], .pwa .rw-btn { margin-top: 0.7rem !important; background: var(--pwa-gold) !important; color: var(--pwa-surface) !important; border: none !important; font-family: 'Josefin Sans', sans-serif !important; font-size: 0.5rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-weight: 600 !important; padding: 0.5rem 0.6rem !important; border-radius: 3px !important; cursor: pointer; width: 100% !important; transition: opacity 0.15s; } .pwa [class*="reward-btn"]:disabled, .pwa .rw-btn:disabled { opacity: 0.38 !important; cursor: not-allowed !important; } /* rewards page footnote */ .pwa #view-rewards p[style*="italic"], .pwa #view-rewards p:last-child { font-size: 0.68rem !important; color: var(--pwa-c30) !important; border-color: var(--pwa-border) !important; padding: 1.25rem 1.25rem 0 !important; margin: 0 !important; } /* ══ ORDER HUB ════════════════════════════════════════════════ */ .pwa .hub { background: var(--pwa-bg) !important; } .pwa .hub-header { padding: calc(var(--pwa-safe-t) + 2.5rem) 1.5rem 2rem !important; background: var(--pwa-surface) !important; border-bottom: 1px solid var(--pwa-border) !important; } .pwa .hub-eyebrow { font-family: 'Josefin Sans', sans-serif !important; font-size: 0.48rem !important; letter-spacing: 0.3em !important; text-transform: uppercase; color: var(--pwa-c30) !important; margin-bottom: 0.4rem !important; } .pwa .hub-title { font-family: 'Cormorant Garamond', serif !important; font-size: 2.1rem !important; font-weight: 300 !important; font-style: italic !important; color: var(--pwa-cream) !important; line-height: 1.2 !important; margin: 0 0 0.3rem !important; } .pwa .hub-subtitle { font-size: 0.72rem !important; color: var(--pwa-c60) !important; letter-spacing: 0.04em !important; } .pwa .hub-cards { padding: 1.5rem 1.25rem !important; display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .pwa .option-card { background: var(--pwa-card) !important; border: 1px solid var(--pwa-border) !important; border-radius: var(--pwa-r) !important; box-shadow: none !important; transition: border-color 0.2s; } .pwa .option-card:hover { border-color: var(--pwa-gold-dim) !important; } .pwa .option-header { padding: 1.15rem 1.25rem !important; } .pwa .option-name { font-family: 'Cormorant Garamond', serif !important; font-size: 1.1rem !important; font-weight: 400 !important; color: var(--pwa-cream) !important; } .pwa .option-desc { font-size: 0.65rem !important; color: var(--pwa-c30) !important; letter-spacing: 0.04em !important; } .pwa .option-icon { font-size: 1.4rem !important; } .pwa .option-arrow { color: var(--pwa-gold) !important; opacity: 0.7; } .pwa .sub-choices { border-top: 1px solid var(--pwa-border) !important; display: flex !important; } .pwa .sub-btn { flex: 1 !important; padding: 0.9rem 0.75rem !important; color: var(--pwa-c60) !important; border-right: 1px solid var(--pwa-border) !important; font-size: 0.68rem !important; letter-spacing: 0.08em !important; transition: background 0.16s, color 0.16s; } .pwa .sub-btn:last-child { border-right: none !important; } .pwa .sub-btn:hover { background: var(--pwa-raised) !important; color: var(--pwa-cream) !important; } .pwa .sub-btn-icon { font-size: 1.1rem !important; } .pwa .hub-divider { color: var(--pwa-c30) !important; font-size: 0.58rem !important; letter-spacing: 0.22em !important; text-transform: uppercase; } /* membership hub card */ .pwa .member-hub-card { background: var(--pwa-surface) !important; border: 1px solid var(--pwa-gold-dim) !important; border-radius: var(--pwa-r) !important; box-shadow: none !important; } /* ══ AUTH PAGE ════════════════════════════════════════════════ */ /* Auth body-level dark bg is inherited from .pwa body; no broad body > * rule — it was breaking editorial article pages. */ /* Generic form fields in PWA */ .pwa input, .pwa select, .pwa textarea { background: var(--pwa-card) !important; color: var(--pwa-cream) !important; border: 1px solid var(--pwa-border) !important; border-radius: 6px !important; } .pwa input::placeholder { color: var(--pwa-c30) !important; } .pwa input:focus, .pwa select:focus, .pwa textarea:focus { border-color: var(--pwa-gold-dim) !important; outline: none; box-shadow: 0 0 0 2px rgba(201,168,76,0.08); } /* ══ EVENTS & GALLERY PAGES ═══════════════════════════════════ */ .pwa .hero, .pwa .cal-section, .pwa .upcoming-section, .pwa .booking-section, .pwa .journal-section, .pwa .gallery-page, .pwa .gallery-grid-wrap { background: var(--pwa-bg) !important; } .pwa .cal-card { background: var(--pwa-card) !important; border-color: var(--pwa-border) !important; box-shadow: none !important; } .pwa .hero-title { color: var(--pwa-cream) !important; } .pwa .hero-sub { color: var(--pwa-c60) !important; } .pwa .upcoming-section-title { color: var(--pwa-cream) !important; } /* ══ HOME (hide website, show pwa-home div) ════════════════════ */ /* The pwa-home.html is always PWA — nothing to hide. For index.html fallback PWA entry (unlikely but handled): */ .pwa #home .home-hero, .pwa #home .home-pillars, .pwa #home .home-about-section, .pwa #home .home-notice-section, .pwa #home .mv2-footer, .pwa #nav-sc { display: none !important; } /* ══ SHARED VIEW STATES ═══════════════════════════════════════ */ /* PWA-mode login prompt that some pages inject */ .pwa .page-info { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100dvh - var(--pwa-tab-h) - var(--pwa-safe-b)); padding: 2rem 1.5rem; text-align: center; background: var(--pwa-bg); } .pwa .info-icon { font-size: 1.4rem; color: var(--pwa-gold); margin-bottom: 1rem; } .pwa .page-info h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: var(--pwa-cream); margin-bottom: 0.5rem; } .pwa .page-info p { font-size: 0.78rem; color: var(--pwa-c60); line-height: 1.7; max-width: 28ch; margin-bottom: 1rem; } .pwa .page-info-cta { display: inline-block; background: var(--pwa-gold); color: var(--pwa-surface); font-family: 'Josefin Sans', sans-serif; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; padding: 0.85rem 2rem; border-radius: 4px; text-decoration: none; margin-top: 0.5rem; transition: opacity 0.18s; } .pwa .page-info-cta:hover { opacity: 0.88; }