/* GoLavvy design system — matches the UX team's mockups (bright blue brand color, rounded "Poppins" type, big pill buttons/tabs, soft gradient hero card on Home, pastel avatar colors on Messages). Mobile-first, bottom nav on every authenticated page. */ :root { /* Brand */ --gl-primary: #2f6fed; --gl-primary-dark: #1e54c9; --gl-primary-light: #eaf1ff; --gl-gradient-start: #2f6fed; --gl-gradient-end: #4fc3f7; /* Accent cards (Home promo tiles) */ --gl-purple: #8b7cf6; --gl-purple-dark: #7a68e8; --gl-teal: #3ecfc0; --gl-teal-dark: #2fb8aa; /* Neutrals. Every surface, line and text colour in the app comes from one of these, and the dark palette below redefines exactly this set — so if you reach for a hex literal in a rule, dark mode will not know about it. */ --gl-bg: #f8fafc; --gl-card: #ffffff; /* cards, sheets, the nav — anything that sits on --gl-bg */ --gl-hover: #f8fafc; /* secondary button / row hover */ --gl-border: #e6e9f0; --gl-border-strong: #d7dbe4; /* secondary buttons and chips, which need a firmer edge */ --gl-chip-bg: #eef0f5; --gl-input-bg: #ffffff; --gl-input-focus-bg: #fafbff; --gl-field-bg: #eef2fc; /* the tinted auth-flow inputs */ --gl-field-border: #dbe4f3; --gl-text: #0f1b3d; --gl-text-soft: #46506b; /* body copy — between text and muted */ --gl-text-muted: #8189a0; --gl-icon-muted: #c3cad8; /* row chevrons, struck-through amenities */ --gl-nav-inactive: #a3aabb; --gl-skeleton-a: #eeeeee; --gl-skeleton-b: #f5f5f5; --gl-shadow: rgba(15, 40, 100, 0.12); --gl-shadow-strong: rgba(15, 27, 61, 0.28); --gl-scrim: rgba(15, 23, 42, 0.5); --gl-toast-bg: rgba(15, 27, 61, 0.92); --gl-toast-text: #ffffff; /* Status */ --gl-danger: #e0483e; --gl-danger-bg: #fdecec; --gl-danger-border: #f8d2d2; --gl-danger-text: #b91c1c; --gl-warning: #d97706; --gl-warning-bg: #fef3c7; --gl-warning-text: #b45309; --gl-warning-soft-bg: #fffbeb; /* the "action needed" payout card */ --gl-warning-soft-border: #fde68a; --gl-success: #1fac6a; --gl-success-bg: #dcfce7; --gl-success-text: #15803d; --gl-success-soft-bg: #f0fdf6; /* the "all good" payout card */ --gl-success-soft-border: #bbf0d3; --gl-info-bg: #dbeafe; --gl-info-text: #1d4ed8; --gl-neutral-bg: #f1f5f9; --gl-neutral-text: #475569; /* Gamification badge */ --gl-gold-bg: #f6dfa1; --gl-gold-text: #8a6a1c; /* Native controls (checkboxes, selects, scrollbars) follow this, not our variables. */ color-scheme: light; --gl-nav-height: 68px; /* Stacking order for the app's fixed chrome. One scale, in the order things must paint, because the alternative is what this replaced: a 50 here and a 40 there, both quietly outranked by a third-party library nobody thought about. Leaflet is the reason this exists — see the .leaflet-container rule below. */ --gl-z-map: 0; /* maps: contained, never above app chrome */ --gl-z-peek: 90; /* the "rate your visit" card that peeks above the nav */ --gl-z-nav: 100; /* bottom nav */ --gl-z-sheet: 200; /* bottom sheets and modals — must cover the nav */ --gl-z-error: 300; /* the unhandled-error bar, always on top */ --gl-radius-lg: 20px; --gl-radius-md: 14px; --gl-radius-sm: 10px; } /* Dark theme. Switched by theme.js setting data-theme on (from the choice on /profile, or the device setting when following "System"). No prefers-color-scheme media query here on purpose: the script resolves "system" itself, so there is exactly one place that decides, and a page with no attribute at all is simply light. The brand blue is nudged lighter so it still reads as a link on navy, and the tints under the status pills are deep versions of the same hues with pale text, rather than pastel boxes that would glow on a dark page. */ [data-theme="dark"] { --gl-primary: #4d84ff; --gl-primary-dark: #6e9bff; --gl-primary-light: #1c2b52; --gl-bg: #0f1629; --gl-card: #182036; --gl-hover: #1f2a45; --gl-border: #2a3550; --gl-border-strong: #364366; --gl-chip-bg: #232d47; --gl-input-bg: #182036; --gl-input-focus-bg: #1c2540; --gl-field-bg: #1a2340; --gl-field-border: #2e3a5c; --gl-text: #eef2ff; --gl-text-soft: #c2cbe0; --gl-text-muted: #9aa5c1; --gl-icon-muted: #56618a; --gl-nav-inactive: #6f7a9c; --gl-skeleton-a: #232d47; --gl-skeleton-b: #2c3854; --gl-shadow: rgba(0, 0, 0, 0.45); --gl-shadow-strong: rgba(0, 0, 0, 0.6); --gl-scrim: rgba(0, 0, 0, 0.65); --gl-toast-bg: rgba(238, 242, 255, 0.95); --gl-toast-text: #0f1b3d; --gl-danger: #ef5350; --gl-danger-bg: #3a1a1e; --gl-danger-border: #5c2a30; --gl-danger-text: #ff8a80; --gl-warning: #f0a030; --gl-warning-bg: #3b2c0d; --gl-warning-text: #ffc45c; --gl-warning-soft-bg: #2b2210; --gl-warning-soft-border: #5a4410; --gl-success: #2ecc7a; --gl-success-bg: #123526; --gl-success-text: #6fe3a4; --gl-success-soft-bg: #10261c; --gl-success-soft-border: #1f4d36; --gl-info-bg: #1e2f5c; --gl-info-text: #9dbcff; --gl-neutral-bg: #2a3550; --gl-neutral-text: #b5bfd8; --gl-gold-bg: #3d3214; --gl-gold-text: #f0cf7a; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--gl-bg); color: var(--gl-text); } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5rem; } .initial-loader { padding: 2rem; text-align: center; color: var(--gl-text-muted); } a { color: var(--gl-primary); text-decoration: none; } .gl-page { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--gl-bg); } .gl-content { flex: 1; padding: 1rem; padding-bottom: calc(var(--gl-nav-height) + 1rem); } .gl-content--no-nav { padding-bottom: 1rem; } .gl-card { background: var(--gl-card); border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); padding: 1rem; margin-bottom: 0.75rem; } .gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: none; border-radius: 999px; padding: 0.8rem 1.25rem; font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; width: 100%; } .gl-btn-primary { background: var(--gl-primary); color: white; } .gl-btn-primary:hover { background: var(--gl-primary-dark); } .gl-btn-secondary { background: var(--gl-card); color: var(--gl-text); border: 1.5px solid var(--gl-border-strong); } .gl-btn-secondary:hover { background: var(--gl-hover); } .gl-btn-danger { background: var(--gl-danger); color: white; } .gl-btn:disabled { opacity: 0.5; cursor: not-allowed; } .gl-btn-inline { width: auto; } .gl-input, .gl-select, .gl-textarea { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); font-family: inherit; font-size: 0.95rem; margin-bottom: 0.5rem; color: var(--gl-text); background: var(--gl-input-bg); } .gl-error { color: var(--gl-danger); font-size: 0.85rem; margin: -0.25rem 0 0.5rem; } .gl-muted { color: var(--gl-text-muted); } /* Pill status badge. Nearly every one of these sits in a flex row beside a title that can wrap, and that is where it used to fall apart: `display: inline-block` is blockified when the element becomes a flex item, so with the row's default `align-items: stretch` the badge grew to the full height of a two-line title. A 999px radius on a tall box is an oval, not a pill, and the text sat at the top of it rather than in the middle. The row is what decides vertical placement (see .gl-card-head), so no `align-self` here — that would override the rows that deliberately centre their badge. What belongs on the badge itself is only what is true of it everywhere: it never shrinks, never wraps, has a height it sets rather than inherits, and centres its own text. */ .gl-badge { display: inline-block; flex-shrink: 0; white-space: nowrap; text-align: center; line-height: 1.35; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } /* Title on the left, status pill top-right — the shared header row for every card that has both. `align-items: flex-start` is the load-bearing part: without it the pill stretches. The gap stops a long title running into the badge, which no amount of flex-shrink prevents. */ .gl-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; } .gl-badge-confirmed { background: var(--gl-info-bg); color: var(--gl-info-text); } .gl-badge-active { background: var(--gl-success-bg); color: var(--gl-success-text); } .gl-badge-completed { background: var(--gl-neutral-bg); color: var(--gl-neutral-text); } .gl-badge-cancelled { background: var(--gl-danger-bg); color: var(--gl-danger-text); } .gl-badge-pending { background: var(--gl-warning-bg); color: var(--gl-warning-text); } /* Pill tab / segmented control — "In progress / Upcoming / Past", "All / Unread" */ .gl-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .gl-tab { border: none; background: var(--gl-chip-bg); color: var(--gl-text); padding: 0.55rem 1.1rem; border-radius: 999px; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .gl-tab.active { background: var(--gl-primary); color: white; } /* Bottom navigation */ .gl-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--gl-nav-height); background: var(--gl-card); border-top: 1px solid var(--gl-border); display: flex; max-width: 480px; margin: 0 auto; z-index: var(--gl-z-nav); } .gl-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--gl-nav-inactive); gap: 3px; } .gl-bottom-nav a svg { width: 22px; height: 22px; } .gl-bottom-nav a.active { color: var(--gl-primary); font-weight: 600; } .gl-skeleton { background: linear-gradient(90deg, var(--gl-skeleton-a) 25%, var(--gl-skeleton-b) 50%, var(--gl-skeleton-a) 75%); background-size: 200% 100%; animation: gl-shimmer 1.2s infinite; border-radius: 8px; height: 14px; margin-bottom: 8px; } @keyframes gl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .gl-empty-state { text-align: center; padding: 3rem 1rem; color: var(--gl-text-muted); } .gl-empty-state svg, .gl-empty-state img { margin-bottom: 0.75rem; } .gl-listing-card { display: flex; gap: 0.75rem; cursor: pointer; } .gl-listing-card img { width: 84px; height: 84px; border-radius: var(--gl-radius-sm); object-fit: cover; background: var(--gl-chip-bg); } .gl-banner-active { background: var(--gl-success); color: white; padding: 0.6rem 1rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; } #blazor-error-ui { display: none; background: #fde68a; color: #0f1b3d; padding: 0.6rem 1rem; position: fixed; bottom: 0; width: 100%; z-index: var(--gl-z-error); } .gl-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0); display: flex; align-items: flex-end; justify-content: center; z-index: var(--gl-z-sheet); transition: background 0.28s ease; } .gl-overlay--visible { background: var(--gl-scrim); } .gl-overlay-panel { background: var(--gl-card); width: 100%; max-width: 480px; border-radius: 16px 16px 0 0; padding: 1rem; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .gl-overlay-panel--visible { transform: translateY(0); } .gl-sheet-grabber { width: 36px; height: 4px; background: var(--gl-border); border-radius: 999px; margin: 0 auto 0.9rem; } .gl-btn-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--gl-text); } /* Circular colored avatar with initials, used on Messages + anywhere else a user has no photo (see Utils/AvatarColor.cs for the color-picking logic) */ .gl-avatar-circle { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; } /* "Verified" row under a field, small green check + label */ .gl-verified { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--gl-success); margin: -0.3rem 0 0.9rem; } /* Gamification badge pill, e.g. "Royal Flusher" on Profile */ .gl-gold-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--gl-gold-bg); color: var(--gl-gold-text); padding: 0.5rem 0.9rem; border-radius: var(--gl-radius-md); font-weight: 700; font-size: 0.9rem; } /* --------------------------------------------------------------------- Home hub (Image 2): gradient hero header with two white action cards, plus purple/teal full-width promo tiles below on a white background. --------------------------------------------------------------------- */ .home-hero { background: linear-gradient(135deg, var(--gl-gradient-start), var(--gl-gradient-end)); padding: 1.5rem 1rem 1.75rem; border-radius: 0 0 28px 28px; margin: -1rem -1rem 1.25rem; } .home-hero-brand { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: white; font-weight: 800; font-size: 1.35rem; margin-bottom: 1.25rem; } .home-hero-card { display: flex; align-items: center; gap: 0.75rem; background: var(--gl-card); border-radius: 16px; padding: 0.9rem 1rem; margin-bottom: 0.75rem; color: var(--gl-text); box-shadow: 0 6px 14px var(--gl-shadow); } .home-hero-card:last-child { margin-bottom: 0; } .home-hero-card-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--gl-primary-light); color: var(--gl-primary); border-radius: 12px; flex-shrink: 0; } .home-hero-card-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; } .home-hero-card-text strong { font-size: 1rem; } .home-hero-card-text span { font-size: 0.8rem; color: var(--gl-text-muted); } .home-hero-card > svg:last-child { color: var(--gl-icon-muted); flex-shrink: 0; } .home-promo { display: block; border-radius: var(--gl-radius-lg); padding: 1.25rem; margin-bottom: 0.9rem; color: white; cursor: pointer; text-decoration: none; border: none; width: 100%; text-align: left; font-family: inherit; } .home-promo strong { display: block; font-size: 1.15rem; margin-bottom: 0.4rem; } .home-promo > span:not(.home-promo-btn) { display: block; font-size: 0.85rem; line-height: 1.45; opacity: 0.95; margin-bottom: 1.1rem; } .home-promo-purple { background: var(--gl-purple); } .home-promo-teal { background: var(--gl-teal); } .home-promo-btn { display: inline-flex; width: auto; background: white; padding: 0.6rem 1.2rem; font-weight: 700; font-size: 0.85rem; } .home-promo-purple .home-promo-btn { color: var(--gl-purple-dark); } .home-promo-teal .home-promo-btn { color: var(--gl-teal-dark); } /* --------------------------------------------------------------------- Messages (Image 4): plain divided rows (no card boxes), colored avatar, blue unread timestamp + dot instead of a badge. --------------------------------------------------------------------- */ .icon-btn { background: none; border: none; padding: 0.4rem; cursor: pointer; color: var(--gl-text); display: flex; } .msg-list-item { display: flex; gap: 0.75rem; padding: 0.9rem 0; border-bottom: 1px solid var(--gl-border); cursor: pointer; align-items: flex-start; } .msg-list-item:last-child { border-bottom: none; } .msg-meta { flex: 1; min-width: 0; } .msg-top-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .msg-name { font-weight: 600; } .msg-time { font-size: 0.75rem; color: var(--gl-text-muted); flex-shrink: 0; } .msg-time.unread { color: var(--gl-primary); font-weight: 600; } .msg-preview-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; } .msg-preview { color: var(--gl-text-muted); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gl-primary); flex-shrink: 0; } /* --------------------------------------------------------------------- Profile (Images 1 & 5): top bar with mode-switch pill + bell, avatar with camera overlay, gold gamification badge, stacked name fields in one box, plain divided list rows (payout methods / help / legal / taxes), red logout row. --------------------------------------------------------------------- */ .profile-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .profile-switch-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; font-size: 0.85rem; } .profile-header-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .profile-avatar-wrap { position: relative; flex-shrink: 0; } .profile-avatar-camera { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; background: var(--gl-card); border: 1px solid var(--gl-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gl-text); } .field-label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; color: var(--gl-text); } .stacked-field-box { border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); margin-bottom: 1rem; overflow: hidden; } .stacked-field { width: 100%; border: none; padding: 0.7rem 0.9rem; font-family: inherit; font-size: 0.95rem; display: block; background: var(--gl-input-bg); color: var(--gl-text); } .stacked-field:first-child { border-bottom: 1px solid var(--gl-border); } .stacked-field:focus { outline: none; background: var(--gl-input-focus-bg); } .email-row { display: flex; align-items: center; gap: 0.6rem; } .email-row .gl-input { margin-bottom: 0; } .email-input-readonly { background: var(--gl-chip-bg); color: var(--gl-text-muted); } .link-btn { background: none; border: none; color: var(--gl-primary); font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: inherit; padding: 0; white-space: nowrap; } .link-btn-icon { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; color: var(--gl-primary); font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: inherit; padding: 0.5rem 0; } .profile-divider { height: 1px; background: var(--gl-border); margin: 1.25rem 0; } /* Appearance — the Light / Dark / System switch on /profile (see ThemeState.cs). Three equal tiles rather than a toggle, because "follow my device" is the default and a two-state switch has nowhere to put it. */ .theme-switch { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } .theme-option { flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.75rem 0.5rem; border: 1.5px solid var(--gl-border); border-radius: var(--gl-radius-md); background: var(--gl-card); color: var(--gl-text); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .theme-option.active { border-color: var(--gl-primary); background: var(--gl-primary-light); color: var(--gl-primary); } .theme-hint { font-size: 0.8rem; margin: 0; } .row-card { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); padding: 0.9rem 1rem; margin-bottom: 0.75rem; } .row-card-icon { display: flex; align-items: center; justify-content: center; color: var(--gl-text); flex-shrink: 0; } .profile-list-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 0; color: var(--gl-text); } .profile-list-row > svg:last-child { color: var(--gl-icon-muted); margin-left: auto; } .logout-row { display: flex; align-items: center; gap: 0.6rem; background: none; border: none; color: var(--gl-danger); font-weight: 600; font-size: 0.95rem; cursor: pointer; font-family: inherit; padding: 0.5rem 0; width: 100%; text-align: left; } .stripe-card-element { border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); padding: 0.85rem 0.9rem; margin-bottom: 0.75rem; background: var(--gl-card); } /* --------------------------------------------------------------------- RateExperienceSheet — star selector, tag chips, review textarea. --------------------------------------------------------------------- */ .rate-sheet { min-height: 50vh; } .rate-question { font-size: 1.25rem; text-align: center; margin: 1rem 0 1.25rem; } .rate-stars { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; } .rate-star-btn { background: none; border: none; padding: 0; cursor: pointer; color: #f5b400; line-height: 0; } .rate-section-label { font-weight: 700; text-align: center; margin: 0 0 0.75rem; } .rate-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; } .rate-checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin: 0.75rem 0 0.5rem; } .rate-privacy-note { font-size: 0.75rem; line-height: 1.4; margin-bottom: 1.25rem; } .rate-success { text-align: center; padding: 3rem 1rem; } .rate-success h2 { margin-bottom: 0.5rem; } .card-star-row { display: flex; gap: 0.15rem; } .card-star-btn { background: none; border: none; padding: 0.1rem; cursor: pointer; color: #f5b400; line-height: 0; } .card-star-btn--readonly { cursor: default; } .card-book-again { padding: 0.45rem 0.9rem; font-size: 0.85rem; } /* "Rate your last visit" peek card on Home — see Pages/Dashboard/Index.razor */ .rate-prompt-peek { position: fixed; left: 0; right: 0; bottom: var(--gl-nav-height); max-width: 480px; margin: 0 auto; background: var(--gl-card); border-radius: 20px 20px 0 0; padding: 0.5rem 1.25rem 1.25rem; box-shadow: 0 -6px 20px var(--gl-shadow); cursor: pointer; z-index: var(--gl-z-peek); text-align: center; } .rate-prompt-peek-img { width: 90px; height: 90px; object-fit: cover; border-radius: 12px; margin: 0.5rem 0 0.75rem; } .rate-prompt-peek-question { font-weight: 700; font-size: 1rem; margin: 0 0 0.25rem; } .rate-prompt-peek-meta { font-size: 0.8rem; margin-bottom: 0.75rem; } .rate-experience-card { text-align: center; cursor: pointer; } .rate-experience-link { color: var(--gl-primary); font-weight: 600; } /* --------------------------------------------------------------------- Add a Listing wizard (7 steps) — progress bar, facility-type cards, address search/suggestions, amenity rows, price/duration inputs. --------------------------------------------------------------------- */ .wizard-progress { display: flex; gap: 0.3rem; margin-bottom: 1.25rem; } .wizard-progress-seg { flex: 1; height: 4px; border-radius: 999px; background: var(--gl-chip-bg); } .wizard-progress-seg.active { background: var(--gl-primary); } .wizard-question { font-size: 1.15rem; margin-bottom: 1rem; } .wizard-next-btn { margin-top: 1.5rem; } .facility-type-card { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); padding: 1rem; margin-bottom: 0.75rem; cursor: pointer; } .facility-type-card.selected { border-color: var(--gl-primary); background: var(--gl-primary-light); } .facility-type-icon { font-size: 1.6rem; flex-shrink: 0; } .wizard-search-box { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); padding: 0.7rem 0.9rem; margin-bottom: 0.75rem; color: var(--gl-text-muted); } .wizard-search-input { border: none; outline: none; flex: 1; font-family: inherit; font-size: 0.95rem; color: var(--gl-text); background: transparent; } .wizard-info-box { background: var(--gl-primary-light); color: var(--gl-text); font-size: 0.85rem; padding: 0.75rem 0.9rem; border-radius: var(--gl-radius-sm); margin: 0.5rem 0 1rem; } .address-suggestion-row { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--gl-border); padding: 0.8rem 0.2rem; cursor: pointer; font-family: inherit; color: var(--gl-text); } .address-suggestion-row:last-child { border-bottom: none; } .char-count { text-align: right; font-size: 0.75rem; color: var(--gl-text-muted); margin: -0.3rem 0 0.75rem; } .photo-drop-zone { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--gl-border); border-radius: var(--gl-radius-md); padding: 2.5rem 1rem; color: var(--gl-text-muted); cursor: pointer; text-align: center; } .amenity-row { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); padding: 0.85rem 1rem; margin-bottom: 0.6rem; cursor: pointer; } .amenity-row.selected { border-color: var(--gl-primary); background: var(--gl-primary-light); } .amenity-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--gl-border); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: white; flex-shrink: 0; } .amenity-check.checked { background: var(--gl-primary); border-color: var(--gl-primary); } .price-input-row { display: flex; align-items: center; gap: 0.4rem; border: 1px solid var(--gl-text); border-radius: var(--gl-radius-sm); padding: 0.5rem 0.9rem; margin-bottom: 0.75rem; } .price-input-row input { border: none; outline: none; font-size: 1.1rem; font-family: inherit; flex: 1; background: transparent; color: var(--gl-text); } .availability-day-card { border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); padding: 0.85rem 1rem; margin-bottom: 0.6rem; } .availability-day-card.active { border-color: var(--gl-primary); background: var(--gl-primary-light); } .host-listing-card-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--gl-radius-sm); display: block; } .host-listing-card { padding: 0.75rem; } .amenity-chip { border: 1px solid var(--gl-border); border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.75rem; color: var(--gl-text); } .publish-toast { background: var(--gl-card); border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); padding: 0.75rem 1rem; margin: 0.75rem 0; box-shadow: 0 4px 12px var(--gl-shadow); font-weight: 500; } /* --------------------------------------------------------------------- Review backlog — the unreviewed badges and the Platform Quality Block. See ReviewPolicy on the server for what the numbers mean. --------------------------------------------------------------------- */ /* "N Unreviewed" pill beside the My Bookings heading */ .bookings-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .unreviewed-pill { background: var(--gl-gold-bg); color: var(--gl-gold-text); font-size: 0.78rem; font-weight: 700; white-space: nowrap; padding: 0.35rem 0.7rem; border-radius: 999px; } /* Count badge on the bottom nav's My Bookings tab */ .nav-icon-wrap { position: relative; display: inline-flex; } .nav-badge { position: absolute; top: -6px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--gl-warning); color: white; border-radius: 999px; font-size: 0.65rem; font-weight: 700; line-height: 17px; text-align: center; } /* Booking card: the image/title row, then a divider and the reference + action */ .booking-card { display: block; } .booking-card-row { display: flex; gap: 0.75rem; } /* Explicit, so a title that wraps to two lines sets a predictable row height next to the pill. */ .booking-card-title { font-weight: 600; line-height: 1.35; } .booking-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--gl-border); } .booking-card-ref { font-size: 0.78rem; color: var(--gl-text-muted); letter-spacing: 0.02em; } /* The block itself. Not a bottom sheet — it is centred, because it interrupts rather than offers, and every bottom sheet in this app is dismissible by swiping past it. */ .pqb-overlay { align-items: center; padding: 1rem; } .pqb-panel { background: var(--gl-card); width: 100%; max-width: 420px; border-radius: var(--gl-radius-lg); padding: 1.5rem 1.25rem 1.25rem; border: 1px solid var(--gl-gold-bg); box-shadow: 0 18px 48px var(--gl-shadow-strong); max-height: 88vh; overflow-y: auto; text-align: center; } .pqb-icon { width: 52px; height: 52px; margin: 0 auto 0.9rem; display: flex; align-items: center; justify-content: center; background: var(--gl-gold-bg); color: var(--gl-warning); border-radius: var(--gl-radius-md); } .pqb-title { margin: 0 0 0.6rem; font-size: 1.25rem; } .pqb-pill { display: inline-block; background: var(--gl-gold-bg); color: var(--gl-gold-text); font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 999px; } .pqb-body { color: var(--gl-text-muted); font-size: 0.87rem; margin: 0.9rem 0 1rem; } /* Scrolls independently of the panel: the list is the variable-length part, and the heading and the action below it should stay put however much review debt the guest has run up. */ .pqb-list { max-height: 236px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; } .pqb-row { display: flex; align-items: center; gap: 0.65rem; text-align: left; border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); padding: 0.6rem; } .pqb-thumb { width: 44px; height: 44px; border-radius: var(--gl-radius-sm); object-fit: cover; background: var(--gl-chip-bg); flex-shrink: 0; } .pqb-row-text { flex: 1; min-width: 0; } .pqb-row-title { font-weight: 600; font-size: 0.88rem; } .pqb-row-address, .pqb-row-status { font-size: 0.72rem; } /* Truncated rather than wrapped: a long street address would push the Rate button off the row. */ .pqb-row-address { color: var(--gl-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pqb-row-status { color: var(--gl-warning); font-weight: 600; display: flex; align-items: center; gap: 0.25rem; margin-top: 0.15rem; } .pqb-rate { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.2rem; } .pqb-close { display: block; margin: 0.7rem auto 0; } /* --------------------------------------------------------------------- Third-party containment --------------------------------------------------------------------- */ /* Leaflet stacks its own internals high — panes at 400, zoom/attribution controls at 1000 — and .leaflet-container is only `position: relative` with no z-index, so it does NOT create a stacking context. Those numbers escape into the page's root context and outrank anything the app puts above them: the listing map painted straight over the open checkout sheet, hiding the Date field, and would have done the same to the bottom nav on the search map. Any z-index, including 0, makes the container a stacking context and traps all of it inside. Do not remove this thinking it is a no-op. LeafletMap.razor also sets it inline, so the fix survives a stale cached copy of this file; this rule covers any map not created by that component. */ .leaflet-container { position: relative; z-index: var(--gl-z-map); } /* --------------------------------------------------------------------- Listing detail (Screenshot 2026-08-04 123022 / 123027): full-bleed photo carousel with floating controls, stats row, amenity checklist with the missing ones struck through, and a sticky book bar above the nav. --------------------------------------------------------------------- */ /* Breaks out of .gl-content's 1rem padding so the photos run edge to edge. The layout hard-codes .gl-content, so negative margins are the way out. */ .carousel { position: relative; margin: -1rem -1rem 0.9rem; } .carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; /* Momentum, snapping and rubber-banding are the browser's job — see carousel.js for why nothing here drives the scroll position. */ -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-slide { flex: 0 0 100%; width: 100%; height: 270px; object-fit: cover; scroll-snap-align: start; background: var(--gl-chip-bg); } .carousel-slide--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--gl-text-muted); font-size: 0.85rem; } .carousel-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; } .carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: width 0.2s ease, background 0.2s ease; } .carousel-dot--active { width: 18px; border-radius: 999px; background: white; } .carousel-actions { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; } .carousel-action-group { display: flex; gap: 8px; } .carousel-action { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 50%; /* Always white: it floats over a photo, not the page, so it does not follow the theme — which is why the icon colour is pinned rather than var(--gl-text). */ background: rgba(255,255,255,0.92); color: #0f1b3d; cursor: pointer; padding: 0; box-shadow: 0 2px 8px var(--gl-shadow); } .carousel-action:disabled { opacity: 0.6; cursor: default; } /* Filled heart: brand blue, matching the mockup rather than the usual red. */ .carousel-action--on { color: var(--gl-primary); } .listing-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .listing-head-top h2 { margin-bottom: 0.35rem; font-size: 1.3rem; } .listing-status { flex-shrink: 0; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; } .listing-status--open { background: var(--gl-success-bg); color: var(--gl-success-text); } .listing-status--shut { background: var(--gl-chip-bg); color: var(--gl-text-muted); } .listing-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: 0.85rem; margin-bottom: 0.5rem; } .listing-stat { display: inline-flex; align-items: center; gap: 0.25rem; } .listing-stat--rating { color: var(--gl-text); } .listing-stat--rating svg { color: #f5b301; } .listing-address { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.88rem; color: var(--gl-text-muted); } .listing-address svg { flex-shrink: 0; margin-top: 1px; } .listing-section { padding-top: 1.1rem; margin-top: 1.1rem; border-top: 1px solid var(--gl-border); } .listing-section h3 { font-size: 1.02rem; } .listing-body { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--gl-text-soft); } .listing-host { display: flex; align-items: center; gap: 0.75rem; } .listing-host-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .listing-host-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; } .listing-host-text span { font-size: 0.8rem; } /* Two columns so the checklist reads at a glance instead of as a long scroll. */ .amenity-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; } .amenity { display: flex; align-items: center; gap: 0.5rem; font-size: 0.87rem; } /* Holds the amenity glyph. Fixed width so the labels line up down each column even though the glyphs themselves are not all the same visual width. */ .amenity-mark { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gl-primary); } /* Struck through as well as greyed: colour alone does not survive a colour-blind reader or a dimmed screen, and "no hand dryer" is the half of this list that matters. */ .amenity--missing .amenity-mark { color: var(--gl-icon-muted); } .amenity--missing .amenity-name { color: var(--gl-text-muted); text-decoration: line-through; } .listing-location-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.6rem; font-size: 0.85rem; } .listing-directions { font-weight: 600; flex-shrink: 0; } .listing-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--gl-border); } .listing-row:last-of-type { border-bottom: none; } .listing-row--tappable { color: inherit; cursor: pointer; } .listing-row--tappable > svg { color: var(--gl-icon-muted); flex-shrink: 0; } .listing-row-body { flex: 1; min-width: 0; } .listing-row-note { margin: 0.25rem 0 0; font-size: 0.83rem; line-height: 1.5; color: var(--gl-text-muted); } .review-headline { display: flex; align-items: center; gap: 0.3rem; } .review-headline svg { color: #f5b301; } .review-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; } .rule-list { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.83rem; line-height: 1.6; color: var(--gl-text-muted); } .listing-report { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: 0.75rem; padding: 0.7rem; background: none; border: none; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--gl-danger); cursor: pointer; } /* Sticky, not fixed: it sits in the page flow above the bottom nav, so it never covers the last section the way a fixed bar with no matching padding does. */ .book-bar { position: sticky; bottom: calc(var(--gl-nav-height) + 8px); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; padding: 0.75rem 0.9rem; background: var(--gl-card); border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); box-shadow: 0 6px 20px var(--gl-shadow); } .book-bar-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem; min-width: 0; } .book-bar-price strong { font-size: 1.15rem; } .book-bar-when { flex-basis: 100%; font-size: 0.75rem; color: var(--gl-text-muted); } .book-bar-btn { flex-shrink: 0; padding-left: 1.75rem; padding-right: 1.75rem; } /* Report sheet */ .report-reasons { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; } .report-reason { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.7rem 0.9rem; background: var(--gl-card); border: 1.5px solid var(--gl-border); border-radius: var(--gl-radius-sm); font-family: inherit; font-size: 0.9rem; color: var(--gl-text); text-align: left; cursor: pointer; } .report-reason--picked { border-color: var(--gl-primary); background: var(--gl-primary-light); color: var(--gl-primary); font-weight: 600; } .report-done { text-align: center; padding: 0.5rem 0 0.25rem; } .report-done-mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 0.75rem; border-radius: 50%; background: var(--gl-success-bg); color: var(--gl-success); } .report-done p { font-size: 0.88rem; line-height: 1.55; margin: 0 0 1.25rem; } /* Toast — above the sheets so a message raised by an action inside one is still readable. */ .listing-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--gl-nav-height) + 84px); z-index: var(--gl-z-error); padding: 0.55rem 1rem; background: var(--gl-toast-bg); color: var(--gl-toast-text); border-radius: 999px; font-size: 0.82rem; font-weight: 600; pointer-events: none; } /* --------------------------------------------------------------------- Host payouts (Stripe Connect onboarding). --------------------------------------------------------------------- */ .payout-card { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem; border-radius: var(--gl-radius-md); margin-bottom: 1rem; border: 1px solid var(--gl-border); background: var(--gl-card); } .payout-card p { margin: 0.3rem 0 0; font-size: 0.85rem; line-height: 1.55; } .payout-card--good { background: var(--gl-success-soft-bg); border-color: var(--gl-success-soft-border); } .payout-card--warn { background: var(--gl-warning-soft-bg); border-color: var(--gl-warning-soft-border); } .payout-mark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; } .payout-mark--good { background: var(--gl-success-bg); color: var(--gl-success); } .payout-mark--warn { background: var(--gl-warning-bg); color: var(--gl-warning); } .payout-todo { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.83rem; line-height: 1.6; color: var(--gl-text-muted); } /* --------------------------------------------------------------------- Host booking detail (D12). --------------------------------------------------------------------- */ .host-detail-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; } .host-detail-head h2 { flex: 1; margin: 0; font-size: 1.15rem; } .host-detail-ref { display: flex; flex-direction: column; gap: 0.15rem; text-align: center; } .host-detail-ref span { font-size: 0.78rem; } /* Monospace and letter-spaced: this is read aloud and compared character by character. */ .host-detail-ref strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5rem; letter-spacing: 0.08em; } .host-detail-guest { display: flex; align-items: center; gap: 0.75rem; } .host-detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: 0.9rem; } .host-detail-row + .host-detail-row { border-top: 1px solid var(--gl-border); } .host-detail-paid { color: var(--gl-success); font-weight: 600; } .host-detail-unpaid { color: var(--gl-danger); font-weight: 600; } /* The listing's own time zone, shown only when it differs from the reader's (D21). */ .listing-tz { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--gl-warning); margin-bottom: 0.35rem; } /* --------------------------------------------------------------------- Role denial — a signed-in account that is not allowed here (D11). Deliberately not the login page: these people are already past it. --------------------------------------------------------------------- */ .gl-denied { max-width: 22rem; margin: 0 auto; } .gl-denied h2 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--gl-text); } .gl-denied p { margin: 0 0 1.25rem; font-size: 0.9rem; line-height: 1.6; } .gl-denied .gl-btn + .gl-btn { margin-top: 0.5rem; } /* Guest's own words on why a booking was cancelled (D13). */ .cancel-reason { border-left: 3px solid var(--gl-border); padding: 0.1rem 0 0.1rem 0.7rem; margin-top: 0.5rem; } .cancel-reason span { display: block; font-size: 0.76rem; color: var(--gl-text-muted); margin-bottom: 0.15rem; } .cancel-reason p { margin: 0; font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; } /* One row per opening window on a day card — a facility can shut for lunch (D14). */ .availability-window { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .availability-window .icon-btn { flex-shrink: 0; } /* Building name and flat/floor above the street line on a listing (D16). */ .listing-address-detail { font-weight: 600; } /* --------------------------------------------------------------------- PWA — offline banner, offline notice, install prompt (Slice 11). --------------------------------------------------------------------- */ .offline-banner { display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--gl-warning); color: #fff; font-size: 0.82rem; font-weight: 600; padding: 0.45rem 0.75rem; text-align: center; /* Above the content, below any sheet: losing signal must not cover a checkout dialog. */ position: sticky; top: 0; z-index: 40; } /* Shown on a booking that was read from the offline cache rather than the network. */ .offline-notice { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--gl-text-muted); margin-bottom: 0.5rem; } .install-prompt { display: flex; align-items: center; gap: 0.6rem; background: var(--gl-primary-light); border: 1px solid var(--gl-primary); border-radius: var(--gl-radius-sm); padding: 0.7rem 0.8rem; margin: 0 0 0.75rem; } .install-prompt img { border-radius: 10px; flex-shrink: 0; } .install-prompt-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; } .install-prompt-copy strong { font-size: 0.88rem; } .install-prompt-copy span { font-size: 0.76rem; color: var(--gl-text-muted); line-height: 1.4; } .install-prompt .gl-btn { flex-shrink: 0; } /* --------------------------------------------------------------------- Search — bar, filter summary, filters sheet (Slice 2). --------------------------------------------------------------------- */ .search-head { display: flex; justify-content: space-between; align-items: center; } .search-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; } .search-bar .gl-btn { width: auto; flex-shrink: 0; } .search-sort { margin-bottom: 0; flex: 1; } /* Count of active filters, on the Filters button. */ .search-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 0.15rem; border-radius: 999px; background: var(--gl-primary); color: #fff; font-size: 0.7rem; font-weight: 700; } /* The filters in words. A count says filters exist; this says which. */ .search-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--gl-primary-light); border-radius: var(--gl-radius-sm); padding: 0.45rem 0.7rem; margin-bottom: 0.6rem; font-size: 0.8rem; color: var(--gl-text); } .search-summary span { min-width: 0; overflow-wrap: anywhere; } .search-count { font-size: 0.82rem; margin: 0 0 0.5rem; } .filters-body { max-height: 60vh; overflow-y: auto; } .filters-group { margin-bottom: 1.1rem; } .filters-group > label { display: block; margin-bottom: 0.35rem; } .filters-hint { font-size: 0.76rem; color: var(--gl-text-muted); margin: 0.3rem 0 0; line-height: 1.4; } .filters-hint--warn { color: var(--gl-warning); } .filters-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .filters-chip { border: 1.5px solid var(--gl-border-strong); background: var(--gl-card); color: var(--gl-text); border-radius: 999px; padding: 0.4rem 0.8rem; font-family: inherit; font-size: 0.83rem; font-weight: 600; cursor: pointer; } .filters-chip--on { border-color: var(--gl-primary); background: var(--gl-primary-light); color: var(--gl-primary-dark); } .filters-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .filters-actions .gl-btn { flex: 1; } /* Cancellation outcome on the cancel page — the figure, not just the rule. */ .cancel-free { color: var(--gl-success); font-weight: 600; margin: 0.5rem 0 0; } .cancel-charge { color: var(--gl-danger); font-weight: 600; margin: 0.5rem 0 0; } /* Screen-reader-only text. Used where an icon carries meaning that the visible label does not repeat — the amenity checklist says "included"/"not available" here, because a struck-through label is a visual convention a screen reader does not announce. Not display:none, which would hide it from readers too. */ .gl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Women-only spaces (see GoLavvy.Shared.Common.WomenOnlyPolicy). A quiet pill, not a warning: on every card and page that renders it, the reader is someone the server has already decided may be there. It is telling them what this place is, not stopping them. Sized to sit inline in a card's text column and as a standalone line on the listing page, hence the display:inline-flex plus a zeroed block margin. */ .gl-women-badge { display: inline-flex; align-items: center; margin: 0.25rem 0 0; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--gl-primary-light); color: var(--gl-primary-dark); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; } /* Women-only mode — the switch on the profile page and the banner above search results. The switch is a styled native checkbox (role="switch"), so keyboard, screen reader and form behaviour all come from the browser rather than being reimplemented. */ .women-mode-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; cursor: pointer; } .women-mode-icon { color: var(--gl-icon-muted); } .women-mode-icon--on { color: var(--gl-primary); } .gl-switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 44px; height: 26px; border-radius: 999px; position: relative; cursor: pointer; background: var(--gl-chip-bg); border: 1px solid var(--gl-border); transition: background 0.15s ease; } .gl-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s ease; } .gl-switch:checked { background: var(--gl-primary); border-color: var(--gl-primary); } .gl-switch:checked::after { transform: translateX(18px); } .gl-switch:focus-visible { outline: 2px solid var(--gl-primary); outline-offset: 2px; } .gl-switch:disabled { opacity: 0.6; cursor: default; } .women-mode-banner { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0.55rem 0.8rem; border-radius: var(--gl-radius-sm); background: var(--gl-primary-light); color: var(--gl-primary-dark); font-size: 0.85rem; font-weight: 600; } .women-mode-banner a, .women-mode-banner button { margin-left: auto; font-weight: 600; }