/* Kinjie.Public - single global stylesheet. Edit this file directly. Regenerate: scripts/merge-public-css.ps1 */ /* ========== Theme ========== */ :root { /* Brand — from Kinjie logo */ --kinjie-brand-dark: #143642; --kinjie-brand-dark-2: #1a4550; --kinjie-brand-mint: #8ee2d0; --kinjie-brand-mint-dark: #5fc9b4; --kinjie-brand-mint-soft: #e8f8f4; --kinjie-brand-mint-border: #b8e8dc; /* Semantic aliases (existing var() references) */ --kinjie-primary: var(--kinjie-brand-mint); --kinjie-primary-dark: var(--kinjie-brand-mint-dark); --kinjie-accent: var(--kinjie-brand-mint-dark); --kinjie-ink: #0f2a32; --kinjie-muted: #5a7379; --kinjie-border: #d4e4e8; --kinjie-surface: #f4f9fa; --kinjie-panel: #ffffff; --kinjie-sidebar: var(--kinjie-brand-dark); --kinjie-sidebar-accent: var(--kinjie-brand-dark-2); --kinjie-brand-rgb: 142, 226, 208; --kinjie-dark-rgb: 20, 54, 66; --kinjie-ink-rgb: 15, 42, 50; --kinjie-hub-gradient: linear-gradient(135deg, #143642 0%, #1a5560 50%, #2a7a72 100%); --kinjie-dark-gradient: linear-gradient(135deg, var(--kinjie-brand-dark), var(--kinjie-brand-dark-2)); --kinjie-mint-gradient: linear-gradient(135deg, var(--kinjie-brand-mint-soft), var(--kinjie-surface)); /* Bootstrap alignment */ --bs-primary: var(--kinjie-brand-mint); --bs-primary-rgb: 142, 226, 208; --bs-primary-bg-subtle: var(--kinjie-brand-mint-soft); --bs-link-color: var(--kinjie-brand-mint-dark); --bs-link-hover-color: var(--kinjie-brand-dark); /* Semantic status colours */ --kinjie-success: #2d9d78; --kinjie-danger: #c0392b; } body { background-color: var(--kinjie-surface); color: var(--kinjie-ink); } /* Placeholder hints — fainter than entered text */ .form-control::placeholder, .form-select::placeholder, textarea.form-control::placeholder, input.form-control::placeholder { color: var(--kinjie-muted); opacity: 0.75; font-weight: 400; } .btn-primary { --bs-btn-color: var(--kinjie-brand-dark); --bs-btn-bg: var(--kinjie-primary); --bs-btn-border-color: var(--kinjie-primary); --bs-btn-hover-color: var(--kinjie-brand-dark); --bs-btn-hover-bg: var(--kinjie-primary-dark); --bs-btn-hover-border-color: var(--kinjie-primary-dark); --bs-btn-active-color: var(--kinjie-brand-dark); --bs-btn-active-bg: var(--kinjie-primary-dark); --bs-btn-active-border-color: var(--kinjie-primary-dark); } .btn-outline-primary { --bs-btn-color: var(--kinjie-brand-mint-dark); --bs-btn-border-color: var(--kinjie-brand-mint-dark); --bs-btn-hover-color: var(--kinjie-brand-dark); --bs-btn-hover-bg: var(--kinjie-primary); --bs-btn-hover-border-color: var(--kinjie-primary); --bs-btn-active-color: var(--kinjie-brand-dark); --bs-btn-active-bg: var(--kinjie-primary-dark); --bs-btn-active-border-color: var(--kinjie-primary-dark); } .btn-outline-secondary { --bs-btn-color: var(--kinjie-ink); --bs-btn-border-color: var(--kinjie-border); --bs-btn-bg: var(--kinjie-panel); --bs-btn-hover-color: var(--kinjie-brand-dark); --bs-btn-hover-bg: var(--kinjie-brand-mint-soft); --bs-btn-hover-border-color: var(--kinjie-brand-mint-border); --bs-btn-active-color: var(--kinjie-brand-dark); --bs-btn-active-bg: var(--kinjie-brand-mint-soft); --bs-btn-active-border-color: var(--kinjie-brand-mint-dark); } .auth-layout .btn-auth-method { --bs-btn-color: var(--kinjie-ink); --bs-btn-border-color: var(--kinjie-border); --bs-btn-bg: var(--kinjie-panel); --bs-btn-hover-color: var(--kinjie-brand-dark); --bs-btn-hover-bg: var(--kinjie-brand-mint-soft); --bs-btn-hover-border-color: var(--kinjie-brand-mint-dark); --bs-btn-active-color: var(--kinjie-brand-dark); --bs-btn-active-bg: var(--kinjie-brand-mint-soft); --bs-btn-active-border-color: var(--kinjie-brand-mint-dark); font-weight: 500; } .auth-layout .nav-pills .nav-link { color: var(--kinjie-muted); background: transparent; border: 1px solid transparent; } .auth-layout .nav-pills .nav-link.active, .auth-layout .nav-pills .show > .nav-link { background-color: var(--kinjie-brand-dark); border-color: var(--kinjie-brand-dark); color: #fff; } .auth-layout .nav-pills .nav-link:not(.active):hover { background-color: rgba(var(--kinjie-dark-rgb), 0.06); color: var(--kinjie-ink); } .text-primary { color: var(--kinjie-brand-mint-dark) !important; } .bg-primary-subtle { background-color: var(--kinjie-brand-mint-soft) !important; } .bg-kinjie-sidebar { background-color: var(--kinjie-sidebar) !important; } .page-shell-header { background: var(--kinjie-panel); border-bottom: 1px solid var(--kinjie-border); z-index: 1010; } .stat-trend-up { color: var(--kinjie-success); } .stat-trend-down { color: var(--kinjie-danger); } .booking-modal-backdrop { background: rgba(var(--kinjie-ink-rgb), 0.55); z-index: 1050; } .provider-subscription { background: var(--kinjie-dark-gradient); } .flow-node { border-radius: 0.75rem; padding: 1rem; text-align: center; border: 1px solid var(--kinjie-border); background: var(--kinjie-surface); } .flow-node.platform { background: var(--kinjie-dark-gradient); color: #fff; border-color: var(--kinjie-brand-dark); } .flow-node.highlight { background: var(--kinjie-brand-mint-soft); border-color: var(--kinjie-brand-mint-border); } .flow-arrow { text-align: center; color: #94a3b8; padding: 0.5rem 0; } /* Client app — global styles (child pages/components are not scoped to ClientAppLayout) */ .client-app { width: 100%; min-height: 100%; min-width: 0; overflow-x: clip; } .client-page { width: 100%; max-width: 100%; margin: 0 auto; padding: 1rem; min-width: 0; overflow-x: clip; } @media (min-width: 768px) { .client-page { max-width: 1280px; padding: 1.25rem 1rem 2rem; } } .client-page-header { background: var(--kinjie-hub-gradient); color: #fff; border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 16px 40px rgba(var(--kinjie-brand-rgb), 0.22); margin-bottom: 1.5rem; } .client-page-eyebrow { display: inline-block; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; } .client-page-title { font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } .client-page-subtitle { margin: 0.5rem 0 0; opacity: 0.92; font-size: 0.95rem; max-width: 36rem; } .client-search-bar { background: var(--kinjie-panel); border-radius: 999px; padding: 0.35rem 0.35rem 0.35rem 1rem; display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; box-shadow: 0 8px 24px rgba(var(--kinjie-ink-rgb), 0.08); } .client-search-bar i { color: var(--kinjie-muted); } .client-search-bar input { border: 0; background: transparent; flex: 1; min-width: 0; padding: 0.55rem 0; font-size: 0.95rem; } .client-search-bar input:focus { outline: none; box-shadow: none; } .client-search-trigger { width: 100%; background: var(--kinjie-panel); border: 0; border-radius: 999px; padding: 0.85rem 1.15rem; color: var(--kinjie-muted); text-align: left; display: flex; align-items: center; gap: 0.65rem; margin-top: 1rem; box-shadow: 0 8px 24px rgba(var(--kinjie-ink-rgb), 0.08); } .client-section { margin-bottom: 1.75rem; } .client-section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .client-section-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--kinjie-ink); } .client-discovery-row { --client-discovery-gap: 0.75rem; display: grid; gap: var(--client-discovery-gap); } .client-discovery-row__item { min-width: 0; } @media (max-width: 575.98px) { .client-discovery-row { display: flex; flex-wrap: nowrap; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; padding-bottom: 0.25rem; } .client-discovery-row::-webkit-scrollbar { display: none; } .client-discovery-row__item { flex: 0 0 auto; scroll-snap-align: start; } .client-discovery-row--providers .client-discovery-row__item { width: min(82vw, 18rem); } .client-discovery-row--categories .client-discovery-row__item { width: 4.75rem; } .client-discovery-row--categories .client-category-tile { width: 100%; } .client-discovery-row--practitioners .client-discovery-row__item { width: min(82vw, 18rem); } .client-discovery-row--services .client-discovery-row__item { width: min(82vw, 18rem); } .client-discovery-row--bookings .client-discovery-row__item { width: min(82vw, 18rem); } .client-discovery-row--products .client-discovery-row__item { width: min(44vw, 11rem); } } .client-discovery-row--providers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-discovery-row--categories { grid-template-columns: repeat(4, minmax(0, 1fr)); } .client-discovery-row--practitioners { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-discovery-row--services { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-discovery-row--bookings { grid-template-columns: repeat(1, minmax(0, 1fr)); } .client-discovery-row--products { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .client-discovery-row--practitioners { grid-template-columns: repeat(3, minmax(0, 1fr)); } .client-discovery-row--services { grid-template-columns: repeat(3, minmax(0, 1fr)); } .client-discovery-row--bookings { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-discovery-row--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 992px) { .client-discovery-row--providers { grid-template-columns: repeat(4, minmax(0, 1fr)); } .client-discovery-row--categories { grid-template-columns: repeat(8, minmax(0, 1fr)); } .client-discovery-row--practitioners { grid-template-columns: repeat(4, minmax(0, 1fr)); } .client-discovery-row--services { grid-template-columns: repeat(4, minmax(0, 1fr)); } .client-discovery-row--bookings { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .client-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .client-chip { border: 1px solid var(--kinjie-border); background: var(--kinjie-panel); color: #334155; border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 600; transition: all 0.15s ease; } .client-chip:hover { border-color: var(--kinjie-brand-mint-border); color: var(--kinjie-primary); } .client-chip.active { background: var(--kinjie-primary); border-color: var(--kinjie-primary); color: #fff; } .client-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .client-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--kinjie-brand-rgb), 0.1); border-color: var(--kinjie-brand-mint-border); } .client-card[role="button"] { cursor: pointer; } .client-card-button { width: 100%; text-align: inherit; padding: 0; border: 0; background: transparent; } .client-provider-card .client-card-actions, .client-practitioner-card .client-card-actions, .client-browse-service-card .client-card-actions { border-top: 1px solid var(--kinjie-border); padding-top: 0.75rem; } .client-upcoming-booking-card { cursor: pointer; } .client-upcoming-booking-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--kinjie-brand-rgb), 0.1); border-color: var(--kinjie-brand-mint-border); } .client-upcoming-booking-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--kinjie-border); } .client-upcoming-booking-price { font-weight: 700; color: var(--kinjie-ink); white-space: nowrap; } .client-practitioner-services { display: flex; flex-wrap: wrap; gap: 0.35rem; } .client-practitioner-service-chip { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--kinjie-surface); border: 1px solid var(--kinjie-border); color: #334155; font-size: 0.72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .client-location-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .client-location-chip { border: 1px solid var(--kinjie-border); background: var(--kinjie-panel); border-radius: 999px; padding: 0.55rem 1rem; color: var(--kinjie-muted); display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; } .client-location-chip.active { border-color: var(--kinjie-primary); color: var(--kinjie-brand-mint-dark); background: var(--kinjie-brand-mint-soft); } .client-location-modal-backdrop { background: rgba(var(--kinjie-ink-rgb), 0.55); } .client-location-map { width: 100%; height: 320px; border-radius: 0.85rem; overflow: hidden; border: 1px solid var(--kinjie-border); z-index: 0; } .client-location-search { position: relative; } .client-location-search-results { position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 0.75rem; box-shadow: 0 12px 28px rgba(var(--kinjie-ink-rgb), 0.12); overflow: hidden; z-index: 1050; } .client-location-search-result { width: 100%; border: 0; background: transparent; text-align: left; padding: 0.75rem 1rem; font-size: 0.92rem; } .client-location-search-result:hover { background: var(--kinjie-surface); } .client-media { position: relative; background: linear-gradient(135deg, var(--kinjie-brand-mint-soft), var(--kinjie-surface)); border-radius: 0.85rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } .client-media-lg { width: 100%; height: 120px; font-size: 2.25rem; } .client-media-md { width: 72px; height: 72px; font-size: 2rem; flex-shrink: 0; } .client-media-sm { width: 56px; height: 56px; font-size: 1.75rem; flex-shrink: 0; } .client-media-img { width: 100%; height: 100%; object-fit: cover; } .client-availability-badge { font-size: 0.65rem; font-weight: 600; padding: 0.2em 0.45em; letter-spacing: 0.02em; line-height: 1.2; } .store-logo-thumb { width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 0.75rem; overflow: hidden; background: var(--kinjie-panel); cursor: pointer; } .store-logo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .store-logo-thumb.is-selected { border-color: var(--bs-primary); box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.2); } .client-avatar { width: 72px; height: 72px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.24); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; } .client-profile-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .client-profile-photo { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.35); box-shadow: 0 8px 24px rgba(var(--kinjie-ink-rgb), 0.18); } .client-profile-photo-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #334155; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.5); transition: background 0.15s ease; } .client-profile-photo-btn:hover { background: var(--kinjie-panel); } .client-profile-photo-btn.disabled { opacity: 0.7; pointer-events: none; } .client-category-tile { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; padding: 0.85rem 0.5rem; width: 100%; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .client-category-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--kinjie-brand-rgb), 0.08); border-color: var(--kinjie-brand-mint-border); } .client-category-icon { font-size: 1.75rem; line-height: 1; margin-bottom: 0.35rem; } .client-category-label { font-size: 0.75rem; font-weight: 600; color: #334155; } .client-badge-verified { background: #ecfdf5; color: #047857; border: 1px solid #bbf7d0; font-weight: 600; } .client-badge-status { font-weight: 600; } .client-empty-state { background: var(--kinjie-panel); border: 1px dashed #cbd5e1; border-radius: 1rem; padding: 2rem 1.25rem; text-align: center; color: var(--kinjie-muted); } .client-profile-menu { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); } .client-profile-menu-item { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 1rem 1.15rem; border: 0; border-bottom: 1px solid #f1f5f9; background: var(--kinjie-panel); text-align: left; text-decoration: none; color: inherit; } .client-profile-menu-item:last-child { border-bottom: 0; } .client-profile-menu-item:hover { background: var(--kinjie-surface); } .client-profile-menu-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; background: var(--kinjie-brand-mint-soft); color: var(--kinjie-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .client-profile-sidebar { position: sticky; top: 1rem; } .client-profile-sidebar-header { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; padding: 1rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); } .client-profile-sidebar-nav { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); } .client-profile-sidebar-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.85rem 1rem; border: 0; border-bottom: 1px solid #f1f5f9; background: var(--kinjie-panel); color: inherit; font-size: 0.925rem; } .client-profile-sidebar-item:last-child { border-bottom: 0; } .client-profile-sidebar-item:hover { background: var(--kinjie-surface); } .client-profile-sidebar-item.active { background: var(--kinjie-brand-mint-soft); color: var(--kinjie-primary); font-weight: 600; } .client-profile-avatar-wrap-sm .client-avatar, .client-profile-avatar-wrap-sm .client-profile-photo { width: 4rem; height: 4rem; } .client-membership-card { background: var(--kinjie-dark-gradient); color: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 12px 28px rgba(var(--kinjie-ink-rgb), 0.18); } .profile-plan-stack { display: flex; flex-direction: column; gap: 1rem; } .profile-plan-card { position: relative; border-radius: 1rem; padding: 1.25rem 1.35rem; } .profile-plan-card-current { background: var(--kinjie-hub-gradient); color: #fff; box-shadow: 0 14px 32px rgba(var(--kinjie-ink-rgb), 0.2); } .profile-plan-card-upsell { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); box-shadow: 0 8px 24px rgba(var(--kinjie-ink-rgb), 0.06); } .profile-plan-card-upsell-muted { opacity: 0.92; } .profile-plan-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .profile-plan-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.82; } .profile-plan-card-current .profile-plan-eyebrow { color: rgba(255, 255, 255, 0.82); } .profile-plan-card-upsell .profile-plan-eyebrow { color: var(--kinjie-muted); } .profile-plan-badge, .profile-plan-soon-badge { flex-shrink: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 0.2rem 0.55rem; } .profile-plan-badge { color: var(--kinjie-ink); background: rgba(255, 255, 255, 0.92); } .profile-plan-soon-badge { position: absolute; top: 1rem; right: 1rem; color: var(--kinjie-muted); background: #f1f5f9; } .profile-plan-title { font-size: 1.35rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.35rem; } .profile-plan-card-upsell .profile-plan-title { color: var(--kinjie-ink); } .profile-plan-price { font-size: 1.75rem; font-weight: 800; line-height: 1; margin-bottom: 0.85rem; } .profile-plan-card-current .profile-plan-price { color: #fff; } .profile-plan-card-upsell .profile-plan-price { color: var(--bs-primary); } .profile-plan-price span { font-size: 0.95rem; font-weight: 600; margin-left: 0.15rem; opacity: 0.75; } .profile-plan-features { list-style: none; margin: 0 0 0.25rem; padding: 0; display: grid; gap: 0.45rem; } .profile-plan-features li { position: relative; padding-left: 1.2rem; font-size: 0.875rem; line-height: 1.45; } .profile-plan-features li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; } .profile-plan-card-current .profile-plan-features li { color: rgba(255, 255, 255, 0.88); } .profile-plan-card-current .profile-plan-features li::before { color: var(--kinjie-brand-mint); } .profile-plan-card-upsell .profile-plan-features li { color: #475569; } .profile-plan-card-upsell .profile-plan-features li::before { color: var(--bs-primary); } /* Hub section layout — sidebar on desktop, hub + drill-in on mobile */ .hub-section-layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 1rem; align-items: start; } .hub-section-mobile-area { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.75rem; } .hub-section-hub-header, .hub-section-sidebar-header { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; padding: 1rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); } .hub-section-hub-footer { margin-bottom: 0.25rem; } .hub-section-mobile-hub { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); } .hub-section-mobile-hub-item { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 1rem 1.15rem; border: 0; border-bottom: 1px solid #f1f5f9; background: var(--kinjie-panel); text-align: left; color: inherit; cursor: pointer; } .hub-section-mobile-hub-item:last-child { border-bottom: 0; } .hub-section-mobile-hub-item:hover { background: var(--kinjie-surface); } .hub-section-mobile-chevron { font-size: 0.85rem; color: #94a3b8; flex-shrink: 0; } .hub-section-sidebar-wrap { display: flex; flex-direction: column; gap: 0.75rem; } .hub-section-sidebar { position: sticky; top: 1rem; } .hub-section-nav { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem; border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08)); border-radius: 0.875rem; background: var(--bs-body-bg, #fff); box-shadow: 0 0.125rem 0.375rem rgba(var(--kinjie-ink-rgb), 0.04); } .hub-section-nav-item { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.65rem 0.75rem; border: 0; border-radius: 0.625rem; background: transparent; color: var(--bs-body-color, #212529); font-size: 0.925rem; font-weight: 500; text-align: left; transition: background-color 0.15s ease, color 0.15s ease; cursor: pointer; } .hub-section-nav-item:hover { background: var(--bs-light, #f8f9fa); } .hub-section-nav-item.active { background: var(--bs-primary-bg-subtle, var(--kinjie-brand-mint-soft)); color: var(--bs-primary, var(--bs-primary)); } .hub-section-nav-item i { width: 1.1rem; flex-shrink: 0; text-align: center; } .hub-section-mobile-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; background: var(--kinjie-brand-mint-soft); color: var(--kinjie-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hub-section-content { min-width: 0; } .hub-section-content-inner { min-height: 12rem; padding: 1.25rem 1.5rem; border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08)); border-radius: 0.875rem; background: var(--bs-body-bg, #fff); box-shadow: 0 0.125rem 0.375rem rgba(var(--kinjie-ink-rgb), 0.04); } .hub-section-content-inner-plain { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .hub-section-panel-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.35rem; } .hub-section-panel-lead { margin-bottom: 1.25rem; max-width: 42rem; } .hub-section-back { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; margin-bottom: 1rem; border: 0; background: transparent; color: var(--kinjie-primary); font-weight: 600; font-size: 0.95rem; cursor: pointer; } .hub-section-back:hover { opacity: 0.85; } .hub-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.875rem; } .hub-summary-card { padding: 1rem 1.125rem; border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08)); border-radius: 0.75rem; background: var(--bs-light-bg-subtle, #f8f9fa); } .hub-summary-label { font-size: 0.85rem; color: var(--bs-secondary-color, #6c757d); margin-bottom: 0.35rem; } .hub-summary-value { font-size: 1.05rem; font-weight: 600; } @media (max-width: 767.98px) { .hub-section-layout { grid-template-columns: 1fr; } .hub-section-sidebar { position: static; } .hub-section-content-inner { padding: 1rem; border: 0; box-shadow: none; background: transparent; min-height: 0; } .hub-section-layout .hub-section-content-inner .btn-primary { width: 100%; } } .client-favourite-btn { flex-shrink: 0; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--kinjie-muted); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(var(--kinjie-ink-rgb), 0.1); transition: color 0.15s ease, transform 0.15s ease; } .client-favourite-btn:hover { color: #e11d48; transform: scale(1.05); } .client-favourite-btn.active { color: #e11d48; } .client-product-card { overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .client-product-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(var(--kinjie-ink-rgb), 0.12); } .client-product-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .client-product-thumb--brand { object-fit: contain; padding: 1.25rem; background: var(--bs-light, #f8f9fa); } .client-product-thumb-placeholder { display: flex; align-items: center; justify-content: center; background: var(--bs-light, #f8f9fa); color: var(--bs-secondary, #6c757d); font-size: 1.75rem; } .suggestion-thread-card { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .suggestion-thread-card:hover { transform: translateY(-1px); box-shadow: 0 0.5rem 1rem rgba(var(--kinjie-ink-rgb), 0.12) !important; } .suggestion-message { max-width: min(100%, 42rem); padding: 0.875rem 1rem; border-radius: 0.875rem; background: var(--bs-light, #f8f9fa); } .suggestion-message-admin { background: rgba(var(--bs-primary-rgb), 0.08); border: 1px solid rgba(var(--bs-primary-rgb), 0.15); } .suggestion-message-user { background: var(--kinjie-panel); border: 1px solid rgba(var(--kinjie-ink-rgb), 0.08); } /* Public marketing pages (guides, about, etc.) */ .public-homepage .marketing-hero { background: var(--kinjie-hub-gradient); color: #fff; } .public-homepage .marketing-hero-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .public-homepage .marketing-hero-lead { font-size: 1.125rem; opacity: 0.92; max-width: 34rem; } .public-homepage .marketing-badge { display: inline-block; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.85rem; font-weight: 600; } .public-homepage .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } .public-homepage .marketing-section-lead { max-width: 38rem; } .public-homepage .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* Content report modals (storefront + guest sign-in prompt) */ .content-report-modal-backdrop { background: rgba(var(--kinjie-ink-rgb), 0.55); z-index: 1055; } .content-report-modal-dialog { max-width: 28rem; } .content-report-modal-content { border-radius: 1rem; overflow: hidden; } .content-report-modal-header { padding: 1.25rem 1.25rem 0.5rem; gap: 0.75rem; } .content-report-modal-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--bs-danger-bg-subtle); color: var(--bs-danger); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.125rem; } .content-report-modal-success-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--bs-success-bg-subtle); color: var(--bs-success); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.75rem; } .content-report-target-card { background: var(--bs-light); border-radius: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--bs-border-color-translucent); } .content-report-target-kind { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--bs-secondary-color); } .content-report-target-name { font-weight: 600; line-height: 1.35; word-break: break-word; } .content-report-modal-footer .btn { min-width: 6.5rem; } @media (max-width: 575.98px) { .content-report-modal-footer { flex-direction: column-reverse; } .content-report-modal-footer .btn { width: 100%; min-width: 0; } } /* ========== App base ========== */ html, body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; } a, .btn-link { color: var(--kinjie-brand-mint-dark); } a.btn { color: var(--bs-btn-color); text-decoration: none; } a.btn:hover, a.btn:focus { color: var(--bs-btn-hover-color); text-decoration: none; } .content { padding-top: 1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXclip-path="url(#clip0)" transform="translate(-235 -51)">) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ========== Kinjie.UI vendored components ========== */ /* Scoped CSS for the ~20 Kinjie.UI components Kinjie.Public actually renders, extracted from Kinjie.UI's own build output rather than hand-copied. Kinjie.Public used to link Kinjie.UI.bundle.scp.css directly -- the full scoped-CSS bundle for all 155 Kinjie.UI components, since Razor Class Libraries don't tree-shake wwwroot and Blazor generates one project-wide bundle per defining project, not a subset per consumer. ~half of that bundle (by file count) belonged to components Kinjie.Public can never render at all (admin/provider dashboard chrome, booking flows), shipped on every single anonymous page load regardless (kinjie-core-readiness.md CR-79). These components are genuinely shared with other apps (e.g. StorefrontBody also renders inside Kinjie.Provider.UI's store editor and Kinjie.Storefront.UI's authenticated view) -- moving their .razor files out of Kinjie.UI would break those apps, so this file exists instead: a Public-only copy of just their CSS, not their markup or logic. The scoped attribute selectors below are generated by Blazor per-component in Kinjie.UI and don't change unless that specific component's own .razor.css does -- generated 2026-10-04 from Kinjie.UI's build output; if a listed component's styling changes, re-run the same extraction and replace this file's content (the component list is in CR-79). Any component NOT in this list is correctly absent from Public's CSS entirely, since Public never renders it. */ /* --- ClientInfoCallout --- */ .client-info-callout { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: 0.625rem; background: var(--bs-info-bg-subtle, #e7f1ff); border: 1px solid var(--bs-info-border-subtle, #b6d4fe); color: var(--bs-body-color); } .client-info-callout-icon { flex-shrink: 0; margin-top: 0.1rem; color: var(--bs-info-text-emphasis, #055160); } .client-info-callout-body { min-width: 0; font-size: 0.875rem; line-height: 1.45; } .client-info-callout-paragraph { margin: 0; } .client-info-callout-paragraph + .client-info-callout-paragraph { margin-top: 0.5rem; } /* --- EmojiPicker --- */ .emoji-picker { display: flex; flex-direction: column; gap: 0.75rem; } .emoji-picker__label { display: block; margin-bottom: 0; font-weight: 600; } .emoji-picker__preview { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.75rem; background: var(--bs-body-bg, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .emoji-picker__preview-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.875rem; background: rgba(var(--bs-primary-rgb), 0.08); font-size: 1.75rem; line-height: 1; } .emoji-picker__preview-text { color: var(--bs-secondary-color, #6c757d); font-size: 0.875rem; } .emoji-picker__panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: 0.5rem; max-height: 12.5rem; padding: 0.75rem; overflow: auto; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.75rem; background: var(--bs-tertiary-bg, #f8f9fa); } .emoji-picker__option { display: inline-flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 0.75rem; background: var(--bs-body-bg, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); font-size: 1.35rem; line-height: 1; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .emoji-picker__option:hover { transform: translateY(-1px); border-color: rgba(var(--bs-primary-rgb), 0.35); background: rgba(var(--bs-primary-rgb), 0.06); } .emoji-picker__option:focus-visible { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2); } .emoji-picker__option.is-selected { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), 0.12); box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.15); } @media (max-width: 576px) { .emoji-picker__panel { grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); max-height: 10rem; } .emoji-picker__option { font-size: 1.2rem; } } /* --- LocalityPicker --- */ .locality-picker-results { position: absolute; z-index: 20; left: 0; right: 0; max-height: 14rem; overflow-y: auto; margin-top: 0.25rem; } .locality-picker-result { border: 0; background: transparent; padding: 0.5rem 0.75rem; } .locality-picker-result:hover, .locality-picker-result:focus { background: var(--bs-light); } /* --- PhoneNumberInput --- */ .phone-country-dropdown { max-width: 9.5rem; } .phone-country-toggle { min-width: 6.75rem; max-width: 9.5rem; text-align: left; padding-right: 2rem; } .phone-country-dial-code { min-width: 0; } .phone-country-menu { min-width: 100%; max-height: 16rem; overflow-y: auto; } /* --- StoreAddressFields --- */ .store-address-validation { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; } .store-address-validation-checking { background: rgba(var(--bs-primary-rgb), 0.08); color: var(--bs-primary); } .store-address-validation-found { background: rgba(25, 135, 84, 0.1); color: var(--bs-success, #198754); } .store-address-validation-not-found { background: rgba(255, 193, 7, 0.15); color: #856404; } /* --- CookieConsentBanner --- */ .cookie-consent-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 1080; margin: 0; padding: 0; max-width: none; width: 100%; border: none; background: var(--bs-body-bg, #fff); } .cookie-consent-banner::backdrop { background: rgb(0 0 0 / 35%); } /* --- MarketingSlimHeaderAuth --- */ .user-status-dropdown-wrapper { position: relative; z-index: 1060; } .marketing-slim-signup-dropdown { position: relative; } .marketing-slim-signup-dropdown > summary { list-style: none; cursor: pointer; } .marketing-slim-signup-dropdown > summary::-webkit-details-marker { display: none; } .marketing-slim-signup-dropdown > .dropdown-menu { position: absolute; top: 100%; right: 0; left: auto; display: block; margin-top: 0.5rem; min-width: 11rem; z-index: 1061; } .marketing-slim-signup-dropdown:not([open]) > .dropdown-menu { display: none; } @media (max-width: 991.98px) { .marketing-slim-signup-dropdown > .user-status-signup-menu { position: fixed; top: calc(3.75rem + env(safe-area-inset-top, 0px)); right: max(0.75rem, env(safe-area-inset-right, 0px)); left: auto; margin-top: 0; max-width: min(16rem, calc(100vw - 1.5rem)); } } /* --- SiteFooter --- */ .site-footer--compact { padding: 0.35rem 0.75rem; font-size: 0.6875rem; line-height: 1.35; } .site-footer--compact .site-footer-links { gap: 0.35rem !important; } .site-footer-links .site-footer-link-btn { font: inherit; background: none; border: none; padding: 0; cursor: pointer; } .site-footer-links .site-footer-link-btn:hover, .site-footer-links .site-footer-link-btn:focus { text-decoration: underline; } .site-footer--pinned { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1010; box-shadow: 0 -1px 3px rgba(15, 23, 42, 0.06); } @media (min-width: 768px) { .site-footer--compact { padding: 0.4rem 1rem; font-size: 0.75rem; } } .site-footer--storefront .site-footer-links { max-width: 100%; } .site-footer--storefront.site-footer--pinned { box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2); } /* --- ProviderPayPerResourceMarketingPanel --- */ .provider-pay-per-resource-discount-badge { display: inline-block; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(255, 193, 7, 0.15); color: #856404; font-size: 0.8125rem; font-weight: 600; } .provider-pay-per-resource-badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* --- ProviderSubscriptionPlanMarketingDetails --- */ .provider-plan-marketing-details { display: flex; flex-direction: column; min-height: 0; } .provider-plan-marketing-details-pricing { height: 100%; } .provider-plan-marketing-price-block { display: flex; flex-direction: column; gap: 0.2rem; } .provider-plan-marketing-price-block-centered { align-items: center; text-align: center; } .provider-plan-marketing-price { font-size: 1.35rem; font-weight: 700; color: var(--kinjie-primary, #2563eb); } .provider-plan-marketing-vat-note { font-size: 0.75rem; color: #64748b; } .provider-plan-marketing-details-pricing .provider-plan-marketing-icon-circle { display: flex; justify-content: center; } .provider-plan-marketing-details-pricing .provider-plan-marketing-title { text-align: center; } .provider-plan-marketing-details-pricing .provider-plan-marketing-icon, .provider-plan-marketing-details-pricing .provider-plan-marketing-icon-image, .provider-plan-marketing-details-pricing .provider-plan-marketing-icon-emoji { width: 4.5rem; height: 4.5rem; border-radius: 50%; } .provider-plan-marketing-details-pricing .provider-plan-marketing-icon { font-size: 1.75rem; } .provider-plan-marketing-details-pricing .provider-plan-marketing-icon-image { object-fit: cover; border: 1px solid rgba(15, 23, 42, 0.08); } .provider-plan-marketing-details-pricing .provider-plan-marketing-icon-emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; background: rgba(var(--bs-primary-rgb, 37, 99, 235), 0.1); color: var(--kinjie-primary, #2563eb); } .provider-plan-marketing-icon-image { width: 2rem; height: 2rem; object-fit: cover; } .provider-plan-marketing-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: rgba(var(--bs-primary-rgb, 37, 99, 235), 0.1); color: var(--kinjie-primary, #2563eb); font-size: 1.1rem; } .provider-plan-marketing-limits li + li, .provider-plan-marketing-features li + li { margin-top: 0.15rem; } .provider-plan-marketing-badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .provider-plan-marketing-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-align: center; } .provider-plan-marketing-pill-trial { background: rgba(34, 197, 94, 0.12); color: #15803d; border: 1px solid rgba(34, 197, 94, 0.25); } .provider-plan-marketing-pill-discount { background: rgba(37, 99, 235, 0.1); color: var(--kinjie-primary, #2563eb); border: 1px solid rgba(37, 99, 235, 0.18); max-width: 100%; } .provider-plan-marketing-cta { width: 100%; } .provider-plan-marketing-panel { background: var(--kinjie-surface, #f8fafc); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.85rem; padding: 1rem 1.1rem; } .provider-plan-marketing-panel-title { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #64748b; margin-bottom: 0.65rem; } .provider-plan-marketing-details-pricing .provider-plan-marketing-cta .btn { width: 100%; } .provider-plan-marketing-details:not(.provider-plan-marketing-details-pricing) .provider-plan-marketing-cta, .provider-plan-marketing-details:not(.provider-plan-marketing-details-pricing) > .mt-auto { margin-top: auto; } /* --- StoreAboutSection --- */ .storefront-about-layout { display: grid; gap: 1.5rem; } .storefront-about-text { margin-bottom: 0.85rem; color: #334155; line-height: 1.7; white-space: pre-line; } .storefront-about-text:last-child { margin-bottom: 0; } .storefront-about-address-readonly { display: flex; align-items: flex-start; padding: 0.85rem 1rem; border-radius: 0.75rem; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; } .storefront-about-map-card { overflow: hidden; border-radius: 1rem; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.06); } .storefront-about-map-frame { position: relative; aspect-ratio: 16 / 10; background: #e2e8f0; } .storefront-about-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* --- StoreAdditionalInformationSection --- */ .storefront-additional-information-list { display: flex; flex-direction: column; gap: 0.65rem; } .storefront-additional-information-item { display: flex; align-items: center; gap: 0.65rem; color: #334155; line-height: 1.4; } .storefront-additional-information-item i { color: var(--bs-primary); font-size: 1.1rem; flex-shrink: 0; } /* --- PublicStoreTeamSection --- */ .storefront-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .storefront-team-photo, .storefront-team-avatar { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; margin-inline: auto; } .storefront-team-avatar { display: flex; align-items: center; justify-content: center; background: var(--bs-light); font-size: 2rem; border: 1px solid var(--bs-border-color); } /* --- StorefrontPublicGalleryCarousel --- */ .storefront-gallery-carousel .carousel-control-prev, .storefront-gallery-carousel .carousel-control-next { width: auto; opacity: 1; } .storefront-gallery-carousel .carousel-control-prev-icon, .storefront-gallery-carousel .carousel-control-next-icon { display: none; } .storefront-gallery-carousel .carousel-item:not(.active) .storefront-gallery-counter { display: none; } .storefront-gallery-carousel .carousel-indicators.storefront-gallery-dots { margin-bottom: 0; } .storefront-gallery-carousel .carousel-indicators [data-bs-target] { text-indent: 0; } .storefront-gallery-carousel .carousel-indicators .active { opacity: 1; } /* --- StorefrontSectionChrome --- */ .storefront-section-details { border: 0; } .storefront-section-details-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; cursor: pointer; list-style: none; } .storefront-section-details-summary::-webkit-details-marker { display: none; } .storefront-section-details-summary::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; vertical-align: 0.2rem; opacity: 0.65; } .storefront-section-details[open] > .storefront-section-details-summary::before { transform: rotate(45deg); vertical-align: 0.05rem; } .storefront-section-details-body { margin-top: 0.75rem; } .storefront-section-details-actions { margin-left: auto; } /* --- StorePortfolioSection --- */ .storefront-portfolio-row { display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; } .storefront-portfolio-row-item { flex: 0 0 auto; width: 120px; height: 120px; padding: 0; border: 0; border-radius: 0.5rem; overflow: hidden; background: #f8f9fa; cursor: pointer; } .storefront-portfolio-row-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .storefront-portfolio-grid, .storefront-portfolio-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; } .storefront-portfolio-item { aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden; background: #f8f9fa; } .storefront-portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .storefront-portfolio-delete { position: absolute; top: 0.35rem; right: 0.35rem; opacity: 0.9; } .storefront-portfolio-group + .storefront-portfolio-group { padding-top: 0.25rem; border-top: 1px solid rgba(0, 0, 0, 0.06); } .storefront-portfolio-modal-layout { min-height: 320px; } .storefront-portfolio-modal .list-group-item.active { border-color: var(--bs-list-group-border-color); } @media (min-width: 768px) { .storefront-portfolio-row-item { width: 140px; height: 140px; } .storefront-portfolio-grid, .storefront-portfolio-modal-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem; } } /* --- StoreProductCategorySection --- */ .storefront-product-category:not(:first-child) { margin-top: 1.75rem; } .storefront-service-category-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; } .storefront-service-category-accent { width: 0.25rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; } .storefront-service-category-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--bs-body-color); } .storefront-service-category-count { font-size: 0.75rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.15rem 0.5rem; } .storefront-service-subcategory-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; } .storefront-service-subcategory-chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .storefront-service-subcategory-chip:hover { border-color: var(--bs-primary); color: var(--bs-primary); } .storefront-service-subcategory-chip.is-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-chip.is-active:hover { color: #fff; } .storefront-service-subcategory-chip-count { font-size: 0.6875rem; font-weight: 700; opacity: 0.85; } .storefront-products-row-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } /* Store editor preview: match Kinjie.Public storefront (single column, not 2/4-up). */ .storefront-products-row-grid--store-preview { grid-template-columns: repeat(1, minmax(0, 1fr)); } .storefront-services-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; } .storefront-services-pager-btn { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .storefront-services-pager-label { min-width: 4.5rem; text-align: center; } @media (min-width: 768px) { .storefront-products-row-grid:not(.storefront-products-row-grid--store-preview) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .storefront-products-row-grid:not(.storefront-products-row-grid--store-preview) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .storefront-product-card { border-radius: 0.75rem; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .storefront-product-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.12) !important; } .storefront-product-card.is-out-of-stock { opacity: 0.85; } .storefront-product-media { position: relative; aspect-ratio: 1; background: var(--bs-light); } .storefront-product-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .storefront-product-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: 2rem; } .storefront-product-out-of-stock-badge { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1; } .storefront-product-body { padding: 0.875rem; display: flex; flex-direction: column; gap: 0.35rem; min-height: 7.5rem; } .storefront-product-brand { display: flex; align-items: center; gap: 0.35rem; min-height: 1.25rem; font-size: 0.75rem; color: var(--bs-secondary-color); } .storefront-product-brand-logo { width: 1.125rem; height: 1.125rem; object-fit: contain; flex-shrink: 0; } .storefront-product-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .storefront-product-desc { font-size: 0.8125rem; color: var(--bs-secondary-color); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .storefront-product-price { margin-top: auto; padding-top: 0.25rem; font-weight: 700; font-size: 0.9375rem; color: var(--bs-primary); } .storefront-product-link { color: inherit; text-decoration: none; } .storefront-product-link:hover { color: inherit; } .storefront-product-add-btn { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 2; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.18); } .storefront-product-add-btn:disabled { box-shadow: none; } /* --- StoreProductsSection --- */ .storefront-products-by-category { display: flex; flex-direction: column; gap: 0; } /* --- StoreSchedulePanel --- */ .store-closures-panel { border-top: 1px solid rgba(220, 53, 69, 0.2); padding-top: 1rem; } .store-closure-item { border-radius: 0.75rem; border: 1px solid transparent; padding: 0.75rem 0.875rem; } .store-closure-item-holiday { background: rgba(220, 53, 69, 0.08); border-color: rgba(220, 53, 69, 0.25); } .store-closure-item-special { background: rgba(255, 193, 7, 0.12); border-color: rgba(255, 193, 7, 0.45); } .store-closure-item-shutdown { background: rgba(33, 37, 41, 0.08); border-color: rgba(33, 37, 41, 0.25); } .store-closures-panel-empty { border-top: 1px dashed rgba(0, 0, 0, 0.08); } /* --- StoreServiceCategorySection --- */ .storefront-service-category-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; } .storefront-service-category-accent { width: 0.25rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; } .storefront-service-category-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--bs-body-color); } .storefront-service-category-count { font-size: 0.75rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.15rem 0.5rem; } .storefront-service-subcategory-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; } .storefront-service-subcategory-chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; padding: 0.35rem 0.75rem; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .storefront-service-subcategory-chip:hover { border-color: var(--bs-primary); color: var(--bs-primary); } .storefront-service-subcategory-chip.is-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-chip.is-active:hover { color: #fff; } .storefront-service-subcategory-chip-count { font-size: 0.6875rem; font-weight: 700; opacity: 0.85; } .storefront-services-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; } .storefront-services-pager-btn { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .storefront-services-pager-label { min-width: 4.5rem; text-align: center; } .storefront-services-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .storefront-service-card { border-radius: 0.75rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .storefront-service-card-button { width: 100%; padding: 0; text-align: inherit; color: inherit; background: var(--bs-card-bg, #fff); cursor: pointer; } .storefront-service-card-button:hover { color: inherit; } .storefront-service-card-button:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } .storefront-service-card:hover, .storefront-service-card-button:hover, .storefront-service-card-link:hover { transform: translateY(-1px); box-shadow: 0 0.375rem 0.875rem rgba(15, 23, 42, 0.1) !important; } .storefront-service-card-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1rem; } .storefront-service-linked-products { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; } .storefront-service-linked-product { font-size: 0.75rem; line-height: 1.3; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.1rem 0.5rem; } .storefront-service-main { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .storefront-service-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; } .storefront-service-duration { display: inline-flex; align-items: center; gap: 0.25rem; align-self: flex-start; font-size: 0.75rem; font-weight: 500; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.15rem 0.5rem; } .storefront-service-price { flex-shrink: 0; font-weight: 700; font-size: 0.9375rem; color: var(--bs-primary); text-align: right; white-space: nowrap; } @media (min-width: 768px) { .storefront-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- StoreServicesSection --- */ .storefront-services { display: flex; flex-direction: column; gap: 1.75rem; } .site-footer-links .site-footer-link-btn { color: inherit; text-decoration: inherit; } /* ========== public-shell.css ========== */ /* Kinjie.Public local copy: Kinjie.Public.UI */ /* --- C:\Development\Kinjie\Kinjie.Public.UI\Components\Layout\PublicLanguageDropdown.razor.css --- */ .public-language-dropdown { position: relative; } .public-language-dropdown > summary { list-style: none; cursor: pointer; } .public-language-dropdown > summary::-webkit-details-marker { display: none; } .public-language-dropdown > .dropdown-menu { position: absolute; top: 100%; right: 0; left: auto; margin-top: 0.25rem; min-width: 11rem; z-index: 1061; } .public-language-dropdown-dropup > .dropdown-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.5rem; z-index: 1070; } /* --- C:\Development\Kinjie\Kinjie.Public.UI\Components\Layout\PublicMarketingHeaderLead.razor.css --- */ .public-marketing-header-lead .marketing-nav-menu-trigger { line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; } .public-marketing-header-lead .marketing-nav-menu-icon { font-size: 1.75rem; } .public-marketing-header-lead .marketing-brand img { border-radius: 0.5rem; } /* --- C:\Development\Kinjie\Kinjie.Public.UI\Components\Layout\PublicMarketingMobileNav.razor.css --- */ .marketing-mobile-nav { --bs-offcanvas-width: min(85vw, 300px); z-index: 1045; } .marketing-mobile-nav .offcanvas-body { overflow: visible; } .marketing-drawer-body { overflow: visible; min-height: 0; } .marketing-drawer-nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .marketing-drawer-signup { flex-shrink: 0; overflow: visible; background: var(--kinjie-surface); } .marketing-drawer-language { flex-shrink: 0; overflow: visible; position: relative; z-index: 10; background: var(--kinjie-surface); } .marketing-nav-drawer-link { display: block; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--kinjie-border); font-size: 1rem; color: #475569; text-decoration: none; font-weight: 600; } .marketing-nav-drawer-link:hover, .marketing-nav-drawer-link:focus-visible { background: var(--kinjie-surface); color: var(--kinjie-primary); text-decoration: none; } .marketing-nav-drawer-link.marketing-nav-link-active { background: var(--kinjie-brand-mint-soft); color: var(--kinjie-primary); } .marketing-drawer-brand-logo { border-radius: 0.5rem; } /* --- C:\Development\Kinjie\Kinjie.Public.UI\Components\Marketing\MarketingFaqSection.razor.css --- */ .marketing-faq-details-list { display: flex; flex-direction: column; gap: 0.75rem; } .marketing-faq-details { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.5rem; background: var(--kinjie-panel, #fff); overflow: hidden; } .marketing-faq-summary { font-weight: 600; font-size: 1rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; } .marketing-faq-summary::-webkit-details-marker { display: none; } .marketing-faq-summary::after { content: "+"; float: right; font-weight: 700; opacity: 0.55; } .marketing-faq-details[open] .marketing-faq-summary::after { content: "\2212"; } .marketing-faq-answer { padding: 0 1.1rem 1rem; } .marketing-guide-card { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.75rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .marketing-guide-card:hover { border-color: rgba(var(--bs-primary-rgb), 0.35); box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06); } .marketing-guide-lead { max-width: 42rem; font-size: 1.125rem; } .marketing-about-panel { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.75rem; background: #fff; } /* --- C:\Development\Kinjie\Kinjie.Public.UI\Components\Marketing\PublicMarketingPricing.razor.css --- */ .marketing-hero { background: var(--kinjie-hub-gradient); color: #fff; } .marketing-hero-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .marketing-hero-lead { font-size: 1.125rem; opacity: 0.92; max-width: 34rem; } .marketing-section { background: var(--kinjie-surface); } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-section-lead { max-width: 38rem; } .marketing-pricing-card { border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1rem; padding: 1.5rem; background: #fff; display: flex; flex-direction: column; position: relative; } .marketing-pricing-card-featured { border-color: var(--kinjie-primary, #2563eb); box-shadow: 0 0.5rem 1.5rem rgba(37, 99, 235, 0.12); } .marketing-pricing-card-popular { border-color: var(--kinjie-brand-mint-dark); box-shadow: 0 0.5rem 1.5rem rgba(var(--kinjie-brand-rgb), 0.22); } .marketing-pricing-soon-badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(15, 23, 42, 0.08); color: #475569; } .marketing-pricing-popular-badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; background: #f97316; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; } .marketing-pricing-popular-btn { background-color: #f97316; border-color: #f97316; color: #fff; } .marketing-pricing-popular-btn:hover, .marketing-pricing-popular-btn:focus { background-color: #ea580c; border-color: #ea580c; color: #fff; } .marketing-pricing-price-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; } .marketing-pricing-price { font-size: 1.35rem; font-weight: 700; color: var(--kinjie-primary, #2563eb); } .marketing-pricing-vat-note { font-size: 0.75rem; color: #64748b; } .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* ========== public-marketing.css ========== */ /* Kinjie.Public local copy: Kinjie.Marketing.UI */ /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Discovery\ClientDiscoverySkeletonCard.razor.css --- */ .client-discovery-skeleton { pointer-events: none; } .marketing-shop-card.client-discovery-skeleton { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); } .marketing-shop-card .marketing-shop-image { height: 140px; } .client-discovery-skeleton__block { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: client-discovery-skeleton-shimmer 1.2s ease-in-out infinite; border-radius: 0.5rem; } .client-discovery-skeleton__hero { height: 140px; border-radius: 0.75rem; } .client-discovery-skeleton__product-thumb { width: 100%; aspect-ratio: 1; border-radius: 0; } .client-discovery-skeleton__media { width: 48px; height: 48px; border-radius: 0.75rem; } .client-discovery-skeleton__avatar { width: 48px; height: 48px; } .client-discovery-skeleton__line { height: 0.75rem; } .client-discovery-skeleton__line--title { width: 72%; } .client-discovery-skeleton__line--short { width: 48%; margin-top: 0.5rem; } .client-discovery-skeleton__line--xs { width: 35%; margin-bottom: 0.5rem; } .client-discovery-skeleton__line--badge { width: 38%; height: 1.25rem; border-radius: 999px; } .client-discovery-skeleton__line--chip { width: 2.75rem; height: 0.75rem; } .client-discovery-skeleton__line--price { width: 40%; margin-top: 0.75rem; } .client-discovery-skeleton__button { height: 2rem; border-radius: 0.5rem; } @keyframes client-discovery-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Layout\PublicReadOnlyLayout.razor.css --- */ .marketing-header { z-index: 1040; } .marketing-header .container { overflow: visible; } .marketing-nav-link { color: #475569; text-decoration: none; font-weight: 600; font-size: 0.95rem; } .marketing-nav-link:hover, .marketing-nav-link:focus-visible { color: var(--kinjie-primary); text-decoration: none; } .marketing-nav-link-active { color: var(--kinjie-primary); } .marketing-mode-nav-link { font-size: 0.8125rem; white-space: nowrap; } .marketing-mobile-nav-checkbox:checked ~ .marketing-mobile-drawer { visibility: visible; pointer-events: auto; } .marketing-mobile-drawer { position: fixed; inset: 0; z-index: 1050; visibility: hidden; pointer-events: none; } .marketing-mobile-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); margin: 0; cursor: pointer; } .marketing-mobile-drawer-panel { position: relative; width: min(100%, 20rem); height: 100%; background: #fff; box-shadow: 0 0 24px rgba(15, 23, 42, 0.18); display: flex; flex-direction: column; } .marketing-mobile-drawer-body { flex: 1; min-height: 0; overflow: auto; } @media (max-width: 399.98px) { .marketing-mode-nav-link { font-size: 0.75rem; } } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\MarketingGuideArticleCard.razor.css --- */ .marketing-guide-article-card { display: flex; align-items: flex-start; gap: 1rem; height: 100%; padding: 1.35rem 1.4rem; background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .marketing-guide-article-card:hover { transform: translateY(-2px); border-color: rgba(var(--kinjie-brand-rgb), 0.28); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); color: inherit; } .marketing-guide-article-card:focus-visible { outline: 2px solid var(--kinjie-primary); outline-offset: 2px; } .marketing-guide-article-card__content { flex: 1 1 auto; min-width: 0; } .marketing-guide-article-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.5rem; letter-spacing: -0.01em; } .marketing-guide-article-card__lead { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--kinjie-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .marketing-guide-article-card__arrow { flex-shrink: 0; margin-top: 0.15rem; color: var(--kinjie-primary); opacity: 0.9; transition: transform 0.2s ease; } .marketing-guide-article-card:hover .marketing-guide-article-card__arrow { transform: translateX(3px); } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\MarketingGuideCategoryCard.razor.css --- */ .marketing-guide-category-card { display: flex; align-items: flex-start; gap: 1.25rem; height: 100%; padding: 1.5rem 1.35rem; background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .marketing-guide-category-card:hover { transform: translateY(-3px); border-color: rgba(var(--kinjie-brand-rgb), 0.28); box-shadow: 0 14px 28px rgba(var(--kinjie-brand-rgb), 0.1); color: inherit; } .marketing-guide-category-card:focus-visible { outline: 2px solid var(--kinjie-primary); outline-offset: 2px; } .marketing-guide-category-card__icon { flex-shrink: 0; width: 3.25rem; height: 3.25rem; border-radius: 0.9rem; background: var(--kinjie-mint-gradient); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .marketing-guide-category-card__content { flex: 1 1 auto; min-width: 0; padding-top: 0.15rem; } .marketing-guide-category-card__title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.35rem; } .marketing-guide-category-card__meta { margin: 0; font-size: 0.875rem; color: var(--kinjie-muted); line-height: 1.4; } .marketing-guide-category-card__arrow { flex-shrink: 0; align-self: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(var(--kinjie-brand-rgb), 0.08); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background 0.2s ease, transform 0.2s ease; } .marketing-guide-category-card:hover .marketing-guide-category-card__arrow { background: rgba(var(--kinjie-brand-rgb), 0.16); transform: translateX(2px); } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\MarketingGuideTopicCard.razor.css --- */ .marketing-guide-topic-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.35rem; background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 0.85rem; color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .marketing-guide-topic-card:hover { transform: translateY(-2px); border-color: rgba(var(--kinjie-brand-rgb), 0.28); box-shadow: 0 10px 22px rgba(var(--kinjie-brand-rgb), 0.08); color: inherit; } .marketing-guide-topic-card:focus-visible { outline: 2px solid var(--kinjie-primary); outline-offset: 2px; } .marketing-guide-topic-card__content { flex: 1 1 auto; min-width: 0; } .marketing-guide-topic-card__title { font-size: 1.05rem; font-weight: 650; margin: 0; line-height: 1.35; } .marketing-guide-topic-card__meta { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--kinjie-muted); } .marketing-guide-topic-card__arrow { flex-shrink: 0; color: var(--kinjie-primary); font-size: 1.1rem; opacity: 0.85; transition: transform 0.2s ease; } .marketing-guide-topic-card:hover .marketing-guide-topic-card__arrow { transform: translateX(3px); } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\MarketingMarketplaceShopDiscovery.razor.css --- */ .marketing-section-lead { max-width: 34rem; } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\MarketingMarketplaceShopDiscoverySkeleton.razor.css --- */ .marketing-provider-shop-card-skeleton { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; } .marketing-provider-shop-card-skeleton__media { height: 140px; background: linear-gradient( 90deg, rgba(var(--kinjie-ink-rgb), 0.06) 25%, rgba(var(--kinjie-ink-rgb), 0.1) 50%, rgba(var(--kinjie-ink-rgb), 0.06) 75%); background-size: 200% 100%; animation: marketing-shop-skeleton-shimmer 1.2s ease-in-out infinite; } .marketing-provider-shop-card-skeleton__body { padding: 1rem; } .marketing-provider-shop-card-skeleton__line { height: 0.75rem; border-radius: 0.25rem; margin-bottom: 0.5rem; background: rgba(var(--kinjie-ink-rgb), 0.08); } .marketing-provider-shop-card-skeleton__line-title { width: 70%; height: 1rem; } .marketing-provider-shop-card-skeleton__line-short { width: 45%; } @keyframes marketing-shop-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .marketing-provider-shop-card-skeleton__media { animation: none; } } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\MarketingProviderShopCard.razor.css --- */ .marketing-provider-shop-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); } .marketing-provider-shop-card__media { position: relative; height: 140px; background: var(--kinjie-mint-gradient); display: flex; align-items: center; justify-content: center; } .marketing-provider-shop-card__emoji { font-size: 3rem; line-height: 1; } .marketing-provider-shop-card__logo { width: 100%; height: 100%; object-fit: cover; } .marketing-provider-shop-card__badge { position: absolute; top: 0.75rem; right: 0.75rem; } .marketing-provider-shop-card__body { padding: 1rem; } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\PublicAudienceLanding.razor.css --- */ .public-audience-landing .marketing-hero-lead { max-width: 40rem; } .audience-choice-card { background: #fff; border-radius: 1rem; padding: 2rem 1.75rem; box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.12); transition: transform 0.15s ease, box-shadow 0.15s ease; color: inherit; } .audience-choice-card:hover { transform: translateY(-4px); box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.16); } .audience-choice-card:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 4px; } .audience-choice-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--kinjie-primary-subtle, rgba(13, 110, 253, 0.12)); color: var(--bs-primary); } .audience-choice-icon-business { background: rgba(255, 255, 255, 0.2); color: var(--bs-primary); border: 1px solid rgba(13, 110, 253, 0.15); } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\PublicBusinessHomepage.razor.css --- */ .marketing-hero { background: var(--kinjie-hub-gradient); color: #fff; } .marketing-hero-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .marketing-hero-lead { font-size: 1.125rem; opacity: 0.92; max-width: 34rem; } .marketing-hero-actions .btn { white-space: nowrap; font-size: 0.875rem; padding-left: 0.75rem; padding-right: 0.75rem; } @media (min-width: 576px) { .marketing-hero-actions .btn { flex: 0 1 auto !important; font-size: 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; } } .marketing-badge { display: inline-block; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.85rem; font-weight: 600; } .marketing-hero-panel { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 1.25rem; backdrop-filter: blur(8px); } .marketing-stat-card { background: rgba(255, 255, 255, 0.95); color: var(--kinjie-ink); border-radius: 1rem; padding: 1.25rem; height: 100%; } .marketing-stat-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--kinjie-brand-mint-soft); color: var(--kinjie-brand-mint-dark); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 0.75rem; } .marketing-stat-value { font-weight: 800; font-size: 1.35rem; line-height: 1.2; } .marketing-stat-label { color: var(--kinjie-muted); font-size: 0.875rem; } .marketing-section { background: var(--kinjie-surface); } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-section-lead { max-width: 38rem; } .marketing-feature-card, .marketing-step-card, .marketing-audience-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .marketing-feature-card:hover, .marketing-audience-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); } .marketing-feature-icon, .marketing-audience-icon { width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--kinjie-mint-gradient); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 1rem; } .marketing-step-number { width: 2.75rem; height: 2.75rem; margin: 0 auto 1rem; border-radius: 999px; background: var(--kinjie-primary); color: var(--kinjie-brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; } .marketing-cta { background: var(--kinjie-brand-dark); color: #fff; } .marketing-cta-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-cta-lead { max-width: 36rem; opacity: 0.85; } .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\PublicHomepage.razor.css --- */ .marketing-hero { background: var(--kinjie-hub-gradient); color: #fff; } @media (max-width: 575.98px) { .public-homepage { overflow-x: clip; } #discover-shops .client-discovery-row { width: 100%; max-width: 100%; margin-inline: calc(-0.5 * var(--bs-gutter-x, 0.75rem)); padding-inline: calc(0.5 * var(--bs-gutter-x, 0.75rem)); } } .marketing-hero-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .marketing-hero-lead { font-size: 1.125rem; opacity: 0.92; max-width: 34rem; } .marketing-hero-actions .btn { white-space: nowrap; font-size: 0.875rem; padding-left: 0.75rem; padding-right: 0.75rem; } @media (min-width: 576px) { .marketing-hero-actions .btn { flex: 0 1 auto !important; font-size: 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; } } .marketing-badge { display: inline-block; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.85rem; font-weight: 600; } .marketing-hero-panel { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 1.25rem; backdrop-filter: blur(8px); } .marketing-stat-card { background: rgba(255, 255, 255, 0.95); color: var(--kinjie-ink); border-radius: 1rem; padding: 1.25rem; height: 100%; } .marketing-stat-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--kinjie-brand-mint-soft); color: var(--kinjie-brand-mint-dark); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 0.75rem; } .marketing-stat-value { font-weight: 800; font-size: 1.35rem; line-height: 1.2; } .marketing-stat-label { color: var(--kinjie-muted); font-size: 0.875rem; } .marketing-section { background: var(--kinjie-surface); } .marketing-shop-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .marketing-shop-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); } .marketing-shop-image { position: relative; height: 140px; background: var(--kinjie-mint-gradient); display: flex; align-items: center; justify-content: center; } .marketing-shop-emoji { font-size: 3rem; line-height: 1; } .marketing-shop-logo { width: 100%; height: 100%; object-fit: cover; } .marketing-shop-badge { position: absolute; top: 0.75rem; right: 0.75rem; } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-section-lead { max-width: 38rem; } .marketing-feature-card, .marketing-step-card, .marketing-audience-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .marketing-feature-card:hover, .marketing-audience-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); } .marketing-feature-icon, .marketing-audience-icon { width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--kinjie-mint-gradient); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 1rem; } .marketing-step-number { width: 2.75rem; height: 2.75rem; margin: 0 auto 1rem; border-radius: 999px; background: var(--kinjie-primary); color: var(--kinjie-brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; } .marketing-cta { background: var(--kinjie-brand-dark); color: #fff; } .marketing-cta-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-cta-lead { max-width: 36rem; opacity: 0.85; } .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .public-homepage .marketing-discovery-filters-panel { background: var(--kinjie-surface-subtle, #f8fafc); border: 1px solid var(--kinjie-border, var(--bs-border-color)); border-radius: 1rem; padding: 1rem 1.1rem; margin-bottom: 0; } .public-homepage .marketing-discovery-filters-panel-shops { margin-bottom: 0; } .public-homepage .marketing-discovery-results { margin-top: 1rem; } .public-homepage .marketing-discovery-filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; min-width: 0; } .public-homepage .marketing-discovery-filter-toolbar-end { flex-shrink: 0; } .public-homepage .marketing-discovery-filter-nav-locations { border-color: var(--kinjie-border, var(--bs-border-color)) !important; } .public-homepage .marketing-discovery-filter-nav { min-width: 0; } .public-homepage .marketing-discovery-filter-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; } .public-homepage .marketing-discovery-filter-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 0.25rem; margin-inline: -0.25rem; padding-inline: 0.25rem; } .public-homepage .marketing-discovery-filter-scroll:focus-within { /* Same enhanced-nav focus-persistence issue as the pill rules below: a hard outline around the whole scroll row reads as a wide "box" flashing across the page during navigation. Softened to match. */ outline: none; box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.2); border-radius: 0.5rem; } .public-homepage .marketing-filter-pills { width: max-content; max-width: 100%; flex-wrap: wrap; } @media (max-width: 767.98px) { .public-homepage .marketing-filter-pills { flex-wrap: nowrap; } } .public-homepage .marketing-filter-pill-item { flex-shrink: 0; } .public-homepage .marketing-filter-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--kinjie-border, var(--bs-border-color)); background: var(--kinjie-panel, #fff); color: var(--kinjie-ink, #212529); font-size: 0.8125rem; font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .public-homepage .marketing-filter-pill:hover { border-color: var(--bs-primary); color: var(--bs-primary); box-shadow: 0 1px 3px rgba(var(--kinjie-ink-rgb, 33, 37, 41), 0.08); } .public-homepage .marketing-filter-pill:focus-visible { /* A hard 2px outline here reads as an abrupt "box" flashing through the page during Blazor's enhanced navigation, which tends to carry focus across the content swap when the clicked pill persists in the same DOM position on the destination page. A soft glow (same treatment as :hover, just stronger) still gives keyboard users a visible focus indicator without the jarring edge. */ outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25); } .public-homepage .marketing-filter-pill-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.35); } .public-homepage .marketing-filter-pill-active:hover { color: #fff; border-color: var(--bs-primary); } .public-homepage .marketing-filter-pill-icon { font-size: 1rem; line-height: 1; } .public-homepage .marketing-filter-pill-count { font-size: 0.75rem; font-weight: 700; opacity: 0.85; } .public-homepage .marketing-discovery-filter-skeleton { display: flex; flex-wrap: wrap; gap: 0.5rem; } .public-homepage .marketing-discovery-filter-skeleton-pill { width: 5rem; height: 2.125rem; border-radius: 999px; background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%); background-size: 200% 100%; animation: marketing-filter-shimmer 1.2s ease-in-out infinite; } .public-homepage .marketing-discovery-filter-skeleton-pill-wide { width: 6.5rem; } @keyframes marketing-filter-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Components\Marketing\PublicMarketplaceExplainer.razor.css --- */ .marketing-hero { background: var(--kinjie-hub-gradient); color: #fff; } @media (max-width: 575.98px) { .public-marketplace-explainer { overflow-x: clip; } } .marketing-hero-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .marketing-hero-lead { font-size: 1.125rem; opacity: 0.92; max-width: 42rem; } .marketing-hero-actions .btn { white-space: nowrap; font-size: 0.875rem; padding-left: 0.75rem; padding-right: 0.75rem; } @media (min-width: 576px) { .marketing-hero-actions .btn { flex: 0 1 auto !important; font-size: 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; } } .marketing-section { background: var(--kinjie-surface); } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-section-lead { max-width: 38rem; } .marketing-feature-card, .marketing-step-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .marketing-feature-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); } .marketing-feature-icon { width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--kinjie-mint-gradient); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 1rem; } .marketing-step-number { width: 2.75rem; height: 2.75rem; margin: 0 auto 1rem; border-radius: 999px; background: var(--kinjie-primary); color: var(--kinjie-brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; } .marketing-cta { background: var(--kinjie-brand-dark); color: #fff; } .marketing-cta-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-cta-lead { max-width: 36rem; opacity: 0.85; } .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .public-marketplace-explainer .marketing-discovery-filters-panel { background: var(--kinjie-surface-subtle, #f8fafc); border: 1px solid var(--kinjie-border, var(--bs-border-color)); border-radius: 1rem; padding: 1rem 1.1rem; margin-bottom: 0; } .public-marketplace-explainer .marketing-discovery-filters-panel-shops { margin-bottom: 0; } .public-marketplace-explainer .marketing-marketplace-filter-breadcrumb { margin-bottom: 0.75rem; } .public-marketplace-explainer .marketing-marketplace-filter-breadcrumb__list { font-size: 0.875rem; --bs-breadcrumb-divider: "›"; } .public-marketplace-explainer .marketing-discovery-filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; min-width: 0; } .public-marketplace-explainer .marketing-discovery-filter-toolbar-end { flex-shrink: 0; } .public-marketplace-explainer .marketing-discovery-filter-nav-locations { border-color: var(--kinjie-border, var(--bs-border-color)) !important; } .public-marketplace-explainer .marketing-discovery-filter-nav { min-width: 0; } .public-marketplace-explainer .marketing-discovery-filter-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; } .public-marketplace-explainer .marketing-discovery-filter-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 0.25rem; margin-inline: -0.25rem; padding-inline: 0.25rem; } .public-marketplace-explainer .marketing-discovery-filter-scroll:focus-within { /* Same enhanced-nav focus-persistence issue as the pill rules below: a hard outline around the whole scroll row reads as a wide "box" flashing across the page during navigation. Softened to match. */ outline: none; box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.2); border-radius: 0.5rem; } .public-marketplace-explainer .marketing-filter-pills { width: max-content; max-width: 100%; flex-wrap: wrap; } @media (max-width: 767.98px) { .public-marketplace-explainer .marketing-filter-pills { flex-wrap: nowrap; } } .public-marketplace-explainer .marketing-filter-pill-item { flex-shrink: 0; } .public-marketplace-explainer .marketing-filter-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--kinjie-border, var(--bs-border-color)); background: var(--kinjie-panel, #fff); color: var(--kinjie-ink, #212529); font-size: 0.8125rem; font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .public-marketplace-explainer .marketing-filter-pill:hover { border-color: var(--bs-primary); color: var(--bs-primary); box-shadow: 0 1px 3px rgba(var(--kinjie-ink-rgb, 33, 37, 41), 0.08); } .public-marketplace-explainer .marketing-filter-pill:focus-visible { /* Same fix as .public-homepage .marketing-filter-pill:focus-visible above: a hard outline reads as an abrupt "box" flashing through the page during Blazor's enhanced navigation, which carries focus across the content swap when the clicked pill persists in the same DOM position on the destination page. This selector was missed when that one was fixed. */ outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25); } .public-marketplace-explainer .marketing-filter-pill-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.35); } .public-marketplace-explainer .marketing-filter-pill-active:hover { color: #fff; border-color: var(--bs-primary); } .public-marketplace-explainer .marketing-filter-pill-icon { font-size: 1rem; line-height: 1; } .public-marketplace-explainer .marketing-filter-pill-count { font-size: 0.75rem; font-weight: 700; opacity: 0.85; } .public-marketplace-explainer .marketing-discovery-filter-skeleton { display: flex; flex-wrap: wrap; gap: 0.5rem; } .public-marketplace-explainer .marketing-discovery-filter-skeleton-pill { width: 5rem; height: 2.125rem; border-radius: 999px; background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%); background-size: 200% 100%; animation: marketing-filter-shimmer 1.2s ease-in-out infinite; } .public-marketplace-explainer .marketing-discovery-filter-skeleton-pill-wide { width: 6.5rem; } @keyframes marketing-filter-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (min-width: 768px) { .public-marketplace-explainer .marketing-seo-browse-details { display: none; } } .public-marketplace-explainer .marketing-seo-browse-summary { list-style: none; cursor: pointer; } .public-marketplace-explainer .marketing-seo-browse-summary::-webkit-details-marker { display: none; } .public-marketplace-explainer .marketing-seo-browse-details[open] .marketing-seo-browse-summary-icon { transform: rotate(180deg); } .public-marketplace-explainer .marketing-seo-browse-summary-icon { transition: transform 0.2s ease; } .public-marketplace-explainer .marketing-seo-browse-footer { max-width: 36rem; margin-inline: auto; } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Pages\Marketing\GuideCategoryPage.razor.css --- */ .marketing-guide-hero-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; } .letter-spacing-tight { letter-spacing: 0.04em; } /* --- C:\Development\Kinjie\Kinjie.Marketing.UI\Pages\Marketing\GuidesIndexPage.razor.css --- */ .guides-index-page .marketing-hero-lead { max-width: 36rem; } .guides-index-about-panel { max-width: 28rem; margin-inline: auto; padding: 1.75rem 1.5rem; border: 1px solid var(--kinjie-border); border-radius: 1rem; background: var(--kinjie-surface); } .guides-index-skeleton-card { height: 7.5rem; border-radius: 1rem; background: linear-gradient( 90deg, rgba(var(--kinjie-ink-rgb), 0.04) 0%, rgba(var(--kinjie-ink-rgb), 0.07) 50%, rgba(var(--kinjie-ink-rgb), 0.04) 100%); background-size: 200% 100%; animation: guides-index-shimmer 1.2s ease-in-out infinite; } @keyframes guides-index-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ========== public-storefront.css ========== */ /* Kinjie.Public local copy: Kinjie.Storefront.Public.UI */ /* --- C:\Development\Kinjie\Kinjie.Storefront.Public.UI\Components\PublicStaticStoreLayout.razor.css --- */ .storefront-public-header { z-index: 1040; } /* --- C:\Development\Kinjie\Kinjie.Storefront.Public.UI\Components\PublicStorePortfolioSection.razor.css --- */ .storefront-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; } .storefront-portfolio-item { aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden; background: #f8f9fa; } .storefront-portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .storefront-portfolio-group + .storefront-portfolio-group { padding-top: 0.25rem; border-top: 1px solid rgba(0, 0, 0, 0.06); } @media (min-width: 768px) { .storefront-portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem; } } /* --- C:\Development\Kinjie\Kinjie.Storefront.Public.UI\Components\PublicStoreProductCategorySection.razor.css --- */ .storefront-product-category:not(:first-child) { margin-top: 1.75rem; } .storefront-service-category-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; } .storefront-service-category-accent { width: 0.25rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; } .storefront-service-category-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--bs-body-color); } .storefront-service-category-count { font-size: 0.75rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.15rem 0.5rem; } .storefront-service-subcategory-details-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; font-weight: 600; padding: 0.35rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: 999px; list-style: none; } .storefront-service-subcategory-details-summary::-webkit-details-marker { display: none; } .storefront-service-subcategory-details[open] .storefront-service-subcategory-details-summary { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-chip-count { font-size: 0.6875rem; font-weight: 700; opacity: 0.85; } .storefront-products-row-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } .storefront-product-card { border-radius: 0.75rem; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .storefront-product-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.12) !important; } .storefront-product-card.is-out-of-stock { opacity: 0.85; } .storefront-product-link { text-decoration: none; color: inherit; } .storefront-product-media { position: relative; aspect-ratio: 1; background: var(--bs-light); } .storefront-product-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .storefront-product-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: 2rem; } .storefront-product-out-of-stock-badge { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1; } .storefront-product-body { padding: 0.875rem; display: flex; flex-direction: column; gap: 0.35rem; min-height: 7.5rem; } .storefront-product-brand { display: flex; align-items: center; gap: 0.35rem; min-height: 1.25rem; font-size: 0.75rem; color: var(--bs-secondary-color); } .storefront-product-brand-logo { width: 1rem; height: 1rem; object-fit: contain; } .storefront-product-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; } .storefront-product-desc { font-size: 0.8125rem; color: var(--bs-secondary-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .storefront-product-price { font-weight: 700; color: var(--bs-primary); margin-top: auto; } @media (min-width: 768px) { .storefront-products-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .storefront-products-row-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- C:\Development\Kinjie\Kinjie.Storefront.Public.UI\Components\PublicStoreSectionNav.razor.css --- */ .storefront-section-nav .storefront-subnav-link { font-size: 0.875rem; } [id^="storefront-"] { scroll-margin-top: 1rem; } /* --- C:\Development\Kinjie\Kinjie.Storefront.Public.UI\Components\PublicStoreServiceCategorySection.razor.css --- */ .storefront-service-category-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; } .storefront-service-category-accent { width: 0.25rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; } .storefront-service-category-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--bs-body-color); } .storefront-service-category-count { font-size: 0.75rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.15rem 0.5rem; } .storefront-services-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .storefront-service-card { border-radius: 0.75rem; } .storefront-service-card-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1rem; } .storefront-service-linked-products { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; } .storefront-service-linked-product { font-size: 0.75rem; line-height: 1.3; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.1rem 0.5rem; } .storefront-service-main { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .storefront-service-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; } .storefront-service-duration { display: inline-flex; align-items: center; gap: 0.25rem; align-self: flex-start; font-size: 0.75rem; font-weight: 500; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.15rem 0.5rem; } .storefront-service-price { flex-shrink: 0; font-weight: 700; font-size: 0.9375rem; color: var(--bs-primary); text-align: right; white-space: nowrap; } .storefront-service-subcategory-details-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; font-weight: 600; padding: 0.35rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: 999px; list-style: none; } .storefront-service-subcategory-details-summary::-webkit-details-marker { display: none; } .storefront-service-subcategory-details[open] .storefront-service-subcategory-details-summary { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-chip-count { font-size: 0.6875rem; font-weight: 700; opacity: 0.85; } @media (min-width: 768px) { .storefront-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- C:\Development\Kinjie\Kinjie.Storefront.Public.UI\Components\StorefrontLoadingView.razor.css --- */ .storefront-loading { display: flex; justify-content: center; align-items: center; min-height: 50vh; padding: 2rem 1rem; } .storefront-loading-card { text-align: center; padding: 2rem; background: #fff; border-radius: 1rem; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05); } .storefront-loading-spinner { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; } .storefront-loading-text { color: var(--bs-secondary-color); font-weight: 500; } /* --- C:\Development\Kinjie\Kinjie.Storefront.Public.UI\Components\StoreNotFoundView.razor.css --- */ .store-not-found { display: flex; justify-content: center; padding: 3rem 1rem 4rem; } .store-not-found-card { max-width: 32rem; width: 100%; text-align: center; padding: 2.5rem 2rem; background: #fff; border-radius: 1rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06); } .store-not-found-icon { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; } .store-not-found-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); margin-bottom: 0.75rem; } .store-not-found-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; } .store-not-found-message { color: var(--bs-secondary-color); margin-bottom: 1.25rem; } .store-not-found-slug { font-family: var(--bs-font-monospace); font-size: 0.9rem; padding: 0.5rem 0.75rem; background: var(--bs-light); border-radius: 0.5rem; margin-bottom: 1.5rem; word-break: break-all; } .store-not-found-slug-prefix { color: var(--bs-secondary-color); } .store-not-found-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1.25rem; } .store-not-found-hint { font-size: 0.875rem; color: var(--bs-secondary-color); margin-bottom: 0; } @media (max-width: 575.98px) { .store-not-found-card { padding: 2rem 1.25rem; } .store-not-found-actions { flex-direction: column; } .store-not-found-actions .btn { width: 100%; } } /* --- C:\Development\Kinjie\Kinjie.Storefront.Public.UI\Pages\Storefront\PublicStorefrontProductDetailPage.razor.css --- */ .storefront-product-detail-brand-logo { width: 1.5rem; height: 1.5rem; object-fit: contain; } /* ========== Kinjie.Public components ========== */ /* --- Components\Discovery\ClientDiscoverySkeletonCard.razor.css --- */ .client-discovery-skeleton { pointer-events: none; } .marketing-shop-card.client-discovery-skeleton { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); } .marketing-shop-card .marketing-shop-image { height: 140px; } .client-discovery-skeleton__block { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: client-discovery-skeleton-shimmer 1.2s ease-in-out infinite; border-radius: 0.5rem; } .client-discovery-skeleton__hero { height: 140px; border-radius: 0.75rem; } .client-discovery-skeleton__product-thumb { width: 100%; aspect-ratio: 1; border-radius: 0; } .client-discovery-skeleton__media { width: 48px; height: 48px; border-radius: 0.75rem; } .client-discovery-skeleton__avatar { width: 48px; height: 48px; } .client-discovery-skeleton__line { height: 0.75rem; } .client-discovery-skeleton__line--title { width: 72%; } .client-discovery-skeleton__line--short { width: 48%; margin-top: 0.5rem; } .client-discovery-skeleton__line--xs { width: 35%; margin-bottom: 0.5rem; } .client-discovery-skeleton__line--badge { width: 38%; height: 1.25rem; border-radius: 999px; } .client-discovery-skeleton__line--chip { width: 2.75rem; height: 0.75rem; } .client-discovery-skeleton__line--price { width: 40%; margin-top: 0.75rem; } .client-discovery-skeleton__button { height: 2rem; border-radius: 0.5rem; } @keyframes client-discovery-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --- Components\Layout\PublicLanguageDropdown.razor.css --- */ .public-language-dropdown { position: relative; } .public-language-dropdown > summary { list-style: none; cursor: pointer; } .public-language-dropdown > summary::-webkit-details-marker { display: none; } .public-language-dropdown > .dropdown-menu { position: absolute; top: 100%; right: 0; left: auto; margin-top: 0.25rem; min-width: 11rem; z-index: 1061; } .public-language-dropdown-dropup > .dropdown-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.5rem; z-index: 1070; } /* --- Components\Layout\PublicMarketingHeaderLead.razor.css --- */ .public-marketing-header-lead .marketing-nav-menu-trigger { line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; } .public-marketing-header-lead .marketing-nav-menu-icon { font-size: 1.75rem; } .public-marketing-header-lead .marketing-brand img { border-radius: 0.5rem; } /* --- Components\Layout\PublicMarketingMobileNav.razor.css --- */ .marketing-mobile-nav { --bs-offcanvas-width: min(85vw, 300px); z-index: 1045; } .marketing-mobile-nav .offcanvas-body { overflow: visible; } .marketing-drawer-body { overflow: visible; min-height: 0; } .marketing-drawer-nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .marketing-drawer-signup { flex-shrink: 0; overflow: visible; background: var(--kinjie-surface); } .marketing-drawer-language { flex-shrink: 0; overflow: visible; position: relative; z-index: 10; background: var(--kinjie-surface); } .marketing-nav-drawer-link { display: block; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--kinjie-border); font-size: 1rem; color: #475569; text-decoration: none; font-weight: 600; } .marketing-nav-drawer-link:hover, .marketing-nav-drawer-link:focus-visible { background: var(--kinjie-surface); color: var(--kinjie-primary); text-decoration: none; } .marketing-nav-drawer-link.marketing-nav-link-active { background: var(--kinjie-brand-mint-soft); color: var(--kinjie-primary); } .marketing-drawer-brand-logo { border-radius: 0.5rem; } /* --- Components\Layout\PublicReadOnlyLayout.razor.css --- */ .marketing-header { z-index: 1040; } .marketing-header .container { overflow: visible; } .marketing-nav-link { color: #475569; text-decoration: none; font-weight: 600; font-size: 0.95rem; } .marketing-nav-link:hover, .marketing-nav-link:focus-visible { color: var(--kinjie-primary); text-decoration: none; } .marketing-nav-link-active { color: var(--kinjie-primary); } .marketing-mode-nav-link { font-size: 0.8125rem; white-space: nowrap; } .marketing-mobile-nav-checkbox:checked ~ .marketing-mobile-drawer { visibility: visible; pointer-events: auto; } .marketing-mobile-drawer { position: fixed; inset: 0; z-index: 1050; visibility: hidden; pointer-events: none; } .marketing-mobile-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); margin: 0; cursor: pointer; } .marketing-mobile-drawer-panel { position: relative; width: min(100%, 20rem); height: 100%; background: #fff; box-shadow: 0 0 24px rgba(15, 23, 42, 0.18); display: flex; flex-direction: column; } .marketing-mobile-drawer-body { flex: 1; min-height: 0; overflow: auto; } @media (max-width: 399.98px) { .marketing-mode-nav-link { font-size: 0.75rem; } } /* --- Components\Marketing\MarketingFaqSection.razor.css --- */ .marketing-faq-details-list { display: flex; flex-direction: column; gap: 0.75rem; } .marketing-faq-details { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.5rem; background: var(--kinjie-panel, #fff); overflow: hidden; } .marketing-faq-summary { font-weight: 600; font-size: 1rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; } .marketing-faq-summary::-webkit-details-marker { display: none; } .marketing-faq-summary::after { content: "+"; float: right; font-weight: 700; opacity: 0.55; } .marketing-faq-details[open] .marketing-faq-summary::after { content: "\2212"; } .marketing-faq-answer { padding: 0 1.1rem 1rem; } .marketing-guide-card { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.75rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .marketing-guide-card:hover { border-color: rgba(var(--bs-primary-rgb), 0.35); box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06); } .marketing-guide-lead { max-width: 42rem; font-size: 1.125rem; } .marketing-about-panel { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.75rem; background: #fff; } /* --- Components\Marketing\MarketingGuideArticleCard.razor.css --- */ .marketing-guide-article-card { display: flex; align-items: flex-start; gap: 1rem; height: 100%; padding: 1.35rem 1.4rem; background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .marketing-guide-article-card:hover { transform: translateY(-2px); border-color: rgba(var(--kinjie-brand-rgb), 0.28); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); color: inherit; } .marketing-guide-article-card:focus-visible { outline: 2px solid var(--kinjie-primary); outline-offset: 2px; } .marketing-guide-article-card__content { flex: 1 1 auto; min-width: 0; } .marketing-guide-article-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.5rem; letter-spacing: -0.01em; } .marketing-guide-article-card__lead { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--kinjie-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .marketing-guide-article-card__arrow { flex-shrink: 0; margin-top: 0.15rem; color: var(--kinjie-primary); opacity: 0.9; transition: transform 0.2s ease; } .marketing-guide-article-card:hover .marketing-guide-article-card__arrow { transform: translateX(3px); } /* --- Components\Marketing\MarketingGuideCategoryCard.razor.css --- */ .marketing-guide-category-card { display: flex; align-items: flex-start; gap: 1.25rem; height: 100%; padding: 1.5rem 1.35rem; background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .marketing-guide-category-card:hover { transform: translateY(-3px); border-color: rgba(var(--kinjie-brand-rgb), 0.28); box-shadow: 0 14px 28px rgba(var(--kinjie-brand-rgb), 0.1); color: inherit; } .marketing-guide-category-card:focus-visible { outline: 2px solid var(--kinjie-primary); outline-offset: 2px; } .marketing-guide-category-card__icon { flex-shrink: 0; width: 3.25rem; height: 3.25rem; border-radius: 0.9rem; background: var(--kinjie-mint-gradient); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .marketing-guide-category-card__content { flex: 1 1 auto; min-width: 0; padding-top: 0.15rem; } .marketing-guide-category-card__title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.35rem; } .marketing-guide-category-card__meta { margin: 0; font-size: 0.875rem; color: var(--kinjie-muted); line-height: 1.4; } .marketing-guide-category-card__arrow { flex-shrink: 0; align-self: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(var(--kinjie-brand-rgb), 0.08); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background 0.2s ease, transform 0.2s ease; } .marketing-guide-category-card:hover .marketing-guide-category-card__arrow { background: rgba(var(--kinjie-brand-rgb), 0.16); transform: translateX(2px); } /* --- Components\Marketing\MarketingGuideTopicCard.razor.css --- */ .marketing-guide-topic-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.35rem; background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 0.85rem; color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .marketing-guide-topic-card:hover { transform: translateY(-2px); border-color: rgba(var(--kinjie-brand-rgb), 0.28); box-shadow: 0 10px 22px rgba(var(--kinjie-brand-rgb), 0.08); color: inherit; } .marketing-guide-topic-card:focus-visible { outline: 2px solid var(--kinjie-primary); outline-offset: 2px; } .marketing-guide-topic-card__content { flex: 1 1 auto; min-width: 0; } .marketing-guide-topic-card__title { font-size: 1.05rem; font-weight: 650; margin: 0; line-height: 1.35; } .marketing-guide-topic-card__meta { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--kinjie-muted); } .marketing-guide-topic-card__arrow { flex-shrink: 0; color: var(--kinjie-primary); font-size: 1.1rem; opacity: 0.85; transition: transform 0.2s ease; } .marketing-guide-topic-card:hover .marketing-guide-topic-card__arrow { transform: translateX(3px); } /* --- Components\Marketing\MarketingMarketplaceShopDiscovery.razor.css --- */ .marketing-section-lead { max-width: 34rem; } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } /* --- Components\Marketing\MarketingMarketplaceShopDiscoverySkeleton.razor.css --- */ .marketing-provider-shop-card-skeleton { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; } .marketing-provider-shop-card-skeleton__media { height: 140px; background: linear-gradient( 90deg, rgba(var(--kinjie-ink-rgb), 0.06) 25%, rgba(var(--kinjie-ink-rgb), 0.1) 50%, rgba(var(--kinjie-ink-rgb), 0.06) 75%); background-size: 200% 100%; animation: marketing-shop-skeleton-shimmer 1.2s ease-in-out infinite; } .marketing-provider-shop-card-skeleton__body { padding: 1rem; } .marketing-provider-shop-card-skeleton__line { height: 0.75rem; border-radius: 0.25rem; margin-bottom: 0.5rem; background: rgba(var(--kinjie-ink-rgb), 0.08); } .marketing-provider-shop-card-skeleton__line-title { width: 70%; height: 1rem; } .marketing-provider-shop-card-skeleton__line-short { width: 45%; } @keyframes marketing-shop-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .marketing-provider-shop-card-skeleton__media { animation: none; } } /* --- Components\Marketing\MarketingProviderShopCard.razor.css --- */ .marketing-provider-shop-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); } .marketing-provider-shop-card__media { position: relative; height: 140px; background: var(--kinjie-mint-gradient); display: flex; align-items: center; justify-content: center; } .marketing-provider-shop-card__emoji { font-size: 3rem; line-height: 1; } .marketing-provider-shop-card__logo { width: 100%; height: 100%; object-fit: cover; } .marketing-provider-shop-card__badge { position: absolute; top: 0.75rem; right: 0.75rem; } .marketing-provider-shop-card__body { padding: 1rem; } /* --- Components\Marketing\PublicAudienceLanding.razor.css --- */ .public-audience-landing .marketing-hero-lead { max-width: 40rem; } .audience-choice-card { background: #fff; border-radius: 1rem; padding: 2rem 1.75rem; box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.12); transition: transform 0.15s ease, box-shadow 0.15s ease; color: inherit; } .audience-choice-card:hover { transform: translateY(-4px); box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.16); } .audience-choice-card:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 4px; } .audience-choice-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--kinjie-primary-subtle, rgba(13, 110, 253, 0.12)); color: var(--bs-primary); } .audience-choice-icon-business { background: rgba(255, 255, 255, 0.2); color: var(--bs-primary); border: 1px solid rgba(13, 110, 253, 0.15); } /* --- Components\Marketing\PublicBusinessHomepage.razor.css --- */ .marketing-hero { background: var(--kinjie-hub-gradient); color: #fff; } .marketing-hero-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .marketing-hero-lead { font-size: 1.125rem; opacity: 0.92; max-width: 34rem; } .marketing-hero-actions .btn { white-space: nowrap; font-size: 0.875rem; padding-left: 0.75rem; padding-right: 0.75rem; } @media (min-width: 576px) { .marketing-hero-actions .btn { flex: 0 1 auto !important; font-size: 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; } } .marketing-badge { display: inline-block; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.85rem; font-weight: 600; } .marketing-hero-panel { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 1.25rem; backdrop-filter: blur(8px); } .marketing-stat-card { background: rgba(255, 255, 255, 0.95); color: var(--kinjie-ink); border-radius: 1rem; padding: 1.25rem; height: 100%; } .marketing-stat-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--kinjie-brand-mint-soft); color: var(--kinjie-brand-mint-dark); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 0.75rem; } .marketing-stat-value { font-weight: 800; font-size: 1.35rem; line-height: 1.2; } .marketing-stat-label { color: var(--kinjie-muted); font-size: 0.875rem; } .marketing-section { background: var(--kinjie-surface); } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-section-lead { max-width: 38rem; } .marketing-feature-card, .marketing-step-card, .marketing-audience-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .marketing-feature-card:hover, .marketing-audience-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); } .marketing-feature-icon, .marketing-audience-icon { width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--kinjie-mint-gradient); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 1rem; } .marketing-step-number { width: 2.75rem; height: 2.75rem; margin: 0 auto 1rem; border-radius: 999px; background: var(--kinjie-primary); color: var(--kinjie-brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; } .marketing-cta { background: var(--kinjie-brand-dark); color: #fff; } .marketing-cta-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-cta-lead { max-width: 36rem; opacity: 0.85; } .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* --- Components\Marketing\PublicHomepage.razor.css --- */ .marketing-hero { background: var(--kinjie-hub-gradient); color: #fff; } @media (max-width: 575.98px) { .public-homepage { overflow-x: clip; } #discover-shops ::deep .client-discovery-row { width: 100%; max-width: 100%; margin-inline: calc(-0.5 * var(--bs-gutter-x, 0.75rem)); padding-inline: calc(0.5 * var(--bs-gutter-x, 0.75rem)); } } .marketing-hero-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .marketing-hero-lead { font-size: 1.125rem; opacity: 0.92; max-width: 34rem; } .marketing-hero-actions .btn { white-space: nowrap; font-size: 0.875rem; padding-left: 0.75rem; padding-right: 0.75rem; } @media (min-width: 576px) { .marketing-hero-actions .btn { flex: 0 1 auto !important; font-size: 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; } } .marketing-badge { display: inline-block; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.85rem; font-weight: 600; } .marketing-hero-panel { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 1.25rem; backdrop-filter: blur(8px); } .marketing-stat-card { background: rgba(255, 255, 255, 0.95); color: var(--kinjie-ink); border-radius: 1rem; padding: 1.25rem; height: 100%; } .marketing-stat-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--kinjie-brand-mint-soft); color: var(--kinjie-brand-mint-dark); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 0.75rem; } .marketing-stat-value { font-weight: 800; font-size: 1.35rem; line-height: 1.2; } .marketing-stat-label { color: var(--kinjie-muted); font-size: 0.875rem; } .marketing-section { background: var(--kinjie-surface); } .marketing-shop-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .marketing-shop-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); } .marketing-shop-image { position: relative; height: 140px; background: var(--kinjie-mint-gradient); display: flex; align-items: center; justify-content: center; } .marketing-shop-emoji { font-size: 3rem; line-height: 1; } .marketing-shop-logo { width: 100%; height: 100%; object-fit: cover; } .marketing-shop-badge { position: absolute; top: 0.75rem; right: 0.75rem; } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-section-lead { max-width: 38rem; } .marketing-feature-card, .marketing-step-card, .marketing-audience-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .marketing-feature-card:hover, .marketing-audience-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); } .marketing-feature-icon, .marketing-audience-icon { width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--kinjie-mint-gradient); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 1rem; } .marketing-step-number { width: 2.75rem; height: 2.75rem; margin: 0 auto 1rem; border-radius: 999px; background: var(--kinjie-primary); color: var(--kinjie-brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; } .marketing-cta { background: var(--kinjie-brand-dark); color: #fff; } .marketing-cta-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-cta-lead { max-width: 36rem; opacity: 0.85; } .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .public-homepage ::deep .marketing-discovery-filters-panel { background: var(--kinjie-surface-subtle, #f8fafc); border: 1px solid var(--kinjie-border, var(--bs-border-color)); border-radius: 1rem; padding: 1rem 1.1rem; margin-bottom: 0; } .public-homepage ::deep .marketing-discovery-filters-panel-shops { margin-bottom: 0; } .public-homepage .marketing-discovery-results { margin-top: 1rem; } .public-homepage ::deep .marketing-discovery-filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; min-width: 0; } .public-homepage ::deep .marketing-discovery-filter-toolbar-end { flex-shrink: 0; } .public-homepage ::deep .marketing-discovery-filter-nav-locations { border-color: var(--kinjie-border, var(--bs-border-color)) !important; } .public-homepage ::deep .marketing-discovery-filter-nav { min-width: 0; } .public-homepage ::deep .marketing-discovery-filter-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; } .public-homepage ::deep .marketing-discovery-filter-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 0.25rem; margin-inline: -0.25rem; padding-inline: 0.25rem; } .public-homepage ::deep .marketing-discovery-filter-scroll:focus-within { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: 0.5rem; } .public-homepage ::deep .marketing-filter-pills { width: max-content; max-width: 100%; flex-wrap: wrap; } @media (max-width: 767.98px) { .public-homepage ::deep .marketing-filter-pills { flex-wrap: nowrap; } } .public-homepage ::deep .marketing-filter-pill-item { flex-shrink: 0; } .public-homepage ::deep .marketing-filter-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--kinjie-border, var(--bs-border-color)); background: var(--kinjie-panel, #fff); color: var(--kinjie-ink, #212529); font-size: 0.8125rem; font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .public-homepage ::deep .marketing-filter-pill:hover { border-color: var(--bs-primary); color: var(--bs-primary); box-shadow: 0 1px 3px rgba(var(--kinjie-ink-rgb, 33, 37, 41), 0.08); } .public-homepage ::deep .marketing-filter-pill:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } .public-homepage ::deep .marketing-filter-pill-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.35); } .public-homepage ::deep .marketing-filter-pill-active:hover { color: #fff; border-color: var(--bs-primary); } .public-homepage ::deep .marketing-filter-pill-icon { font-size: 1rem; line-height: 1; } .public-homepage ::deep .marketing-filter-pill-count { font-size: 0.75rem; font-weight: 700; opacity: 0.85; } .public-homepage ::deep .marketing-discovery-filter-skeleton { display: flex; flex-wrap: wrap; gap: 0.5rem; } .public-homepage ::deep .marketing-discovery-filter-skeleton-pill { width: 5rem; height: 2.125rem; border-radius: 999px; background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%); background-size: 200% 100%; animation: marketing-filter-shimmer 1.2s ease-in-out infinite; } .public-homepage ::deep .marketing-discovery-filter-skeleton-pill-wide { width: 6.5rem; } @keyframes marketing-filter-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* --- Components\Marketing\PublicMarketingPricing.razor.css --- */ .marketing-hero { background: var(--kinjie-hub-gradient); color: #fff; } .marketing-hero-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .marketing-hero-lead { font-size: 1.125rem; opacity: 0.92; max-width: 34rem; } .marketing-section { background: var(--kinjie-surface); } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-section-lead { max-width: 38rem; } .marketing-pricing-card { border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1rem; padding: 1.5rem; background: #fff; display: flex; flex-direction: column; position: relative; } .marketing-pricing-card-featured { border-color: var(--kinjie-primary, #2563eb); box-shadow: 0 0.5rem 1.5rem rgba(37, 99, 235, 0.12); } .marketing-pricing-card-popular { border-color: var(--kinjie-brand-mint-dark); box-shadow: 0 0.5rem 1.5rem rgba(var(--kinjie-brand-rgb), 0.22); } .marketing-pricing-soon-badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(15, 23, 42, 0.08); color: #475569; } .marketing-pricing-popular-badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; background: #f97316; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; } .marketing-pricing-popular-btn { background-color: #f97316; border-color: #f97316; color: #fff; } .marketing-pricing-popular-btn:hover, .marketing-pricing-popular-btn:focus { background-color: #ea580c; border-color: #ea580c; color: #fff; } .marketing-pricing-price-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; } .marketing-pricing-price { font-size: 1.35rem; font-weight: 700; color: var(--kinjie-primary, #2563eb); } .marketing-pricing-vat-note { font-size: 0.75rem; color: #64748b; } .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* --- Components\Marketing\PublicMarketplaceExplainer.razor.css --- */ .marketing-hero { background: var(--kinjie-hub-gradient); color: #fff; } @media (max-width: 575.98px) { .public-marketplace-explainer { overflow-x: clip; } } .marketing-hero-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .marketing-hero-lead { font-size: 1.125rem; opacity: 0.92; max-width: 42rem; } .marketing-hero-actions .btn { white-space: nowrap; font-size: 0.875rem; padding-left: 0.75rem; padding-right: 0.75rem; } @media (min-width: 576px) { .marketing-hero-actions .btn { flex: 0 1 auto !important; font-size: 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; } } .marketing-section { background: var(--kinjie-surface); } .marketing-section-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-section-lead { max-width: 38rem; } .marketing-feature-card, .marketing-step-card { background: var(--kinjie-panel); border: 1px solid var(--kinjie-border); border-radius: 1rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(var(--kinjie-ink-rgb), 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .marketing-feature-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(var(--kinjie-brand-rgb), 0.08); } .marketing-feature-icon { width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--kinjie-mint-gradient); color: var(--kinjie-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 1rem; } .marketing-step-number { width: 2.75rem; height: 2.75rem; margin: 0 auto 1rem; border-radius: 999px; background: var(--kinjie-primary); color: var(--kinjie-brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; } .marketing-cta { background: var(--kinjie-brand-dark); color: #fff; } .marketing-cta-title { font-weight: 800; letter-spacing: -0.02em; } .marketing-cta-lead { max-width: 36rem; opacity: 0.85; } .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .public-marketplace-explainer ::deep .marketing-discovery-filters-panel { background: var(--kinjie-surface-subtle, #f8fafc); border: 1px solid var(--kinjie-border, var(--bs-border-color)); border-radius: 1rem; padding: 1rem 1.1rem; margin-bottom: 0; } .public-marketplace-explainer ::deep .marketing-discovery-filters-panel-shops { margin-bottom: 0; } .public-marketplace-explainer ::deep .marketing-marketplace-filter-breadcrumb { margin-bottom: 0.75rem; } .public-marketplace-explainer ::deep .marketing-marketplace-filter-breadcrumb__list { font-size: 0.875rem; --bs-breadcrumb-divider: "›"; } .public-marketplace-explainer ::deep .marketing-discovery-filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; min-width: 0; } .public-marketplace-explainer ::deep .marketing-discovery-filter-toolbar-end { flex-shrink: 0; } .public-marketplace-explainer ::deep .marketing-discovery-filter-nav-locations { border-color: var(--kinjie-border, var(--bs-border-color)) !important; } .public-marketplace-explainer ::deep .marketing-discovery-filter-nav { min-width: 0; } .public-marketplace-explainer ::deep .marketing-discovery-filter-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; } .public-marketplace-explainer ::deep .marketing-discovery-filter-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 0.25rem; margin-inline: -0.25rem; padding-inline: 0.25rem; } .public-marketplace-explainer ::deep .marketing-discovery-filter-scroll:focus-within { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: 0.5rem; } .public-marketplace-explainer ::deep .marketing-filter-pills { width: max-content; max-width: 100%; flex-wrap: wrap; } @media (max-width: 767.98px) { .public-marketplace-explainer ::deep .marketing-filter-pills { flex-wrap: nowrap; } } .public-marketplace-explainer ::deep .marketing-filter-pill-item { flex-shrink: 0; } .public-marketplace-explainer ::deep .marketing-filter-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--kinjie-border, var(--bs-border-color)); background: var(--kinjie-panel, #fff); color: var(--kinjie-ink, #212529); font-size: 0.8125rem; font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .public-marketplace-explainer ::deep .marketing-filter-pill:hover { border-color: var(--bs-primary); color: var(--bs-primary); box-shadow: 0 1px 3px rgba(var(--kinjie-ink-rgb, 33, 37, 41), 0.08); } .public-marketplace-explainer ::deep .marketing-filter-pill:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } .public-marketplace-explainer ::deep .marketing-filter-pill-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.35); } .public-marketplace-explainer ::deep .marketing-filter-pill-active:hover { color: #fff; border-color: var(--bs-primary); } .public-marketplace-explainer ::deep .marketing-filter-pill-icon { font-size: 1rem; line-height: 1; } .public-marketplace-explainer ::deep .marketing-filter-pill-count { font-size: 0.75rem; font-weight: 700; opacity: 0.85; } .public-marketplace-explainer ::deep .marketing-discovery-filter-skeleton { display: flex; flex-wrap: wrap; gap: 0.5rem; } .public-marketplace-explainer ::deep .marketing-discovery-filter-skeleton-pill { width: 5rem; height: 2.125rem; border-radius: 999px; background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%); background-size: 200% 100%; animation: marketing-filter-shimmer 1.2s ease-in-out infinite; } .public-marketplace-explainer ::deep .marketing-discovery-filter-skeleton-pill-wide { width: 6.5rem; } @keyframes marketing-filter-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (min-width: 768px) { .public-marketplace-explainer .marketing-seo-browse-details { display: none; } } .public-marketplace-explainer .marketing-seo-browse-summary { list-style: none; cursor: pointer; } .public-marketplace-explainer .marketing-seo-browse-summary::-webkit-details-marker { display: none; } .public-marketplace-explainer .marketing-seo-browse-details[open] .marketing-seo-browse-summary-icon { transform: rotate(180deg); } .public-marketplace-explainer .marketing-seo-browse-summary-icon { transition: transform 0.2s ease; } .public-marketplace-explainer .marketing-seo-browse-footer { max-width: 36rem; margin-inline: auto; } /* --- Components\Pages\StoreFront\PublicStorefrontProductDetailPage.razor.css --- */ .storefront-product-detail-brand-logo { width: 1.5rem; height: 1.5rem; object-fit: contain; } /* --- Components\StoreFront\PublicStaticStoreLayout.razor.css --- */ .storefront-public-header { z-index: 1040; } /* --- Components\StoreFront\PublicStorePortfolioSection.razor.css --- */ .storefront-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; } .storefront-portfolio-item { aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden; background: #f8f9fa; } .storefront-portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .storefront-portfolio-group + .storefront-portfolio-group { padding-top: 0.25rem; border-top: 1px solid rgba(0, 0, 0, 0.06); } @media (min-width: 768px) { .storefront-portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem; } } /* --- Components\StoreFront\PublicStoreProductCategorySection.razor.css --- */ .storefront-product-category:not(:first-child) { margin-top: 1.75rem; } .storefront-service-category-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; } .storefront-service-category-accent { width: 0.25rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; } .storefront-service-category-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--bs-body-color); } .storefront-service-category-count { font-size: 0.75rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.15rem 0.5rem; } .storefront-service-subcategory-details-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; font-weight: 600; padding: 0.35rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: 999px; list-style: none; } .storefront-service-subcategory-details-summary::-webkit-details-marker { display: none; } .storefront-service-subcategory-details[open] .storefront-service-subcategory-details-summary { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-chip-count { font-size: 0.6875rem; font-weight: 700; opacity: 0.85; } .storefront-products-row-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; } .storefront-product-card { border-radius: 0.75rem; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .storefront-product-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.12) !important; } .storefront-product-card.is-out-of-stock { opacity: 0.85; } .storefront-product-link { text-decoration: none; color: inherit; } .storefront-product-media { position: relative; aspect-ratio: 1; background: var(--bs-light); } .storefront-product-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .storefront-product-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: 2rem; } .storefront-product-out-of-stock-badge { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1; } .storefront-product-body { padding: 0.875rem; display: flex; flex-direction: column; gap: 0.35rem; min-height: 7.5rem; } .storefront-product-brand { display: flex; align-items: center; gap: 0.35rem; min-height: 1.25rem; font-size: 0.75rem; color: var(--bs-secondary-color); } .storefront-product-brand-logo { width: 1rem; height: 1rem; object-fit: contain; } .storefront-product-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; } .storefront-product-desc { font-size: 0.8125rem; color: var(--bs-secondary-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .storefront-product-price { font-weight: 700; color: var(--bs-primary); margin-top: auto; } @media (min-width: 768px) { .storefront-products-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .storefront-products-row-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- Components\StoreFront\PublicStoreSectionNav.razor.css --- */ .storefront-section-nav .storefront-subnav-link { font-size: 0.875rem; } [id^="storefront-"] { scroll-margin-top: 1rem; } /* --- Components\StoreFront\PublicStoreServiceCategorySection.razor.css --- */ .storefront-service-category-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; } .storefront-service-category-accent { width: 0.25rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; } .storefront-service-category-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--bs-body-color); } .storefront-service-category-count { font-size: 0.75rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.15rem 0.5rem; } .storefront-services-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .storefront-service-card { border-radius: 0.75rem; } .storefront-service-card-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1rem; } .storefront-service-linked-products { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; } .storefront-service-linked-product { font-size: 0.75rem; line-height: 1.3; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.1rem 0.5rem; } .storefront-service-main { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .storefront-service-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; } .storefront-service-duration { display: inline-flex; align-items: center; gap: 0.25rem; align-self: flex-start; font-size: 0.75rem; font-weight: 500; color: var(--bs-secondary-color); background: var(--bs-light); border-radius: 999px; padding: 0.15rem 0.5rem; } .storefront-service-price { flex-shrink: 0; font-weight: 700; font-size: 0.9375rem; color: var(--bs-primary); text-align: right; white-space: nowrap; } .storefront-service-subcategory-details-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; font-weight: 600; padding: 0.35rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: 999px; list-style: none; } .storefront-service-subcategory-details-summary::-webkit-details-marker { display: none; } .storefront-service-subcategory-details[open] .storefront-service-subcategory-details-summary { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-chip-count { font-size: 0.6875rem; font-weight: 700; opacity: 0.85; } /* Public storefront: HTML5 subcategory tabs (hidden radio + label pills, :has) */ .storefront-service-subcategory-tabs .storefront-service-subcategory-panels .storefront-service-subcategory-panel { display: none; } .storefront-service-subcategory-tabs .storefront-service-subcategory-chips label.storefront-service-subcategory-chip { margin-bottom: 0; } /* Public storefront: service detail page */ .storefront-service-detail-shell { max-width: 960px; } .storefront-service-detail-breadcrumb-current { max-width: 12rem; } @media (min-width: 576px) { .storefront-service-detail-breadcrumb-current { max-width: 20rem; } } .storefront-service-detail-summary { overflow: hidden; border-radius: 0.75rem; } .storefront-service-detail-summary.sticky-lg-top { top: 1rem; z-index: 2; } .storefront-service-detail-hero { display: flex; align-items: center; justify-content: center; min-height: 7.5rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%); border-bottom: 1px solid var(--bs-border-color-translucent); } .storefront-service-detail-hero-emoji { font-size: clamp(2.5rem, 8vw, 3.5rem); line-height: 1; filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.08)); } .storefront-service-detail-meta-pills { margin-bottom: 0.75rem; } .storefront-service-detail-pill { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 500; line-height: 1.3; color: var(--bs-body-color); background: var(--bs-light); border-radius: 999px; padding: 0.25rem 0.65rem; } .storefront-service-detail-pill-muted { color: var(--bs-secondary-color); } .storefront-service-detail-price { font-size: 1.5rem; font-weight: 700; color: var(--bs-primary); line-height: 1.2; } .storefront-service-detail-section-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 1rem; } .storefront-service-detail-variant-list .storefront-service-detail-variant-item:not(:last-child), .storefront-service-detail-addon-item:not(:last-child) { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); } .storefront-service-card-link { color: inherit; text-decoration: none; display: block; } .storefront-service-card-link:hover, .storefront-service-card-link:focus-visible { color: inherit; } .storefront-service-card-link:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="0"]:checked) .storefront-service-subcategory-panel[data-tab-index="0"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="0"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="0"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="1"]:checked) .storefront-service-subcategory-panel[data-tab-index="1"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="1"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="1"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="2"]:checked) .storefront-service-subcategory-panel[data-tab-index="2"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="2"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="2"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="3"]:checked) .storefront-service-subcategory-panel[data-tab-index="3"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="3"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="3"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="4"]:checked) .storefront-service-subcategory-panel[data-tab-index="4"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="4"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="4"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="5"]:checked) .storefront-service-subcategory-panel[data-tab-index="5"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="5"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="5"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="6"]:checked) .storefront-service-subcategory-panel[data-tab-index="6"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="6"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="6"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="7"]:checked) .storefront-service-subcategory-panel[data-tab-index="7"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="7"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="7"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="8"]:checked) .storefront-service-subcategory-panel[data-tab-index="8"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="8"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="8"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="9"]:checked) .storefront-service-subcategory-panel[data-tab-index="9"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="9"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="9"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="10"]:checked) .storefront-service-subcategory-panel[data-tab-index="10"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="10"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="10"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="11"]:checked) .storefront-service-subcategory-panel[data-tab-index="11"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="11"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="11"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="12"]:checked) .storefront-service-subcategory-panel[data-tab-index="12"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="12"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="12"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="13"]:checked) .storefront-service-subcategory-panel[data-tab-index="13"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="13"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="13"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="14"]:checked) .storefront-service-subcategory-panel[data-tab-index="14"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="14"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="14"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="15"]:checked) .storefront-service-subcategory-panel[data-tab-index="15"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="15"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="15"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="16"]:checked) .storefront-service-subcategory-panel[data-tab-index="16"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="16"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="16"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="17"]:checked) .storefront-service-subcategory-panel[data-tab-index="17"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="17"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="17"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="18"]:checked) .storefront-service-subcategory-panel[data-tab-index="18"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="18"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="18"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="19"]:checked) .storefront-service-subcategory-panel[data-tab-index="19"] { display: block; } .storefront-service-subcategory-tabs:has(.storefront-service-subcategory-tab-input[data-tab-index="19"]:checked) .storefront-service-subcategory-chips label.storefront-service-subcategory-chip[data-tab-index="19"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } @media (min-width: 768px) { .storefront-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- Components\StoreFront\StorefrontLoadingView.razor.css --- */ .storefront-loading { display: flex; justify-content: center; align-items: center; min-height: 50vh; padding: 2rem 1rem; } .storefront-loading-card { text-align: center; padding: 2rem; background: #fff; border-radius: 1rem; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05); } .storefront-loading-spinner { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; } .storefront-loading-text { color: var(--bs-secondary-color); font-weight: 500; } /* --- Components\StoreFront\StoreNotFoundView.razor.css --- */ .store-not-found { display: flex; justify-content: center; padding: 3rem 1rem 4rem; } .store-not-found-card { max-width: 32rem; width: 100%; text-align: center; padding: 2.5rem 2rem; background: #fff; border-radius: 1rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06); } .store-not-found-icon { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; } .store-not-found-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); margin-bottom: 0.75rem; } .store-not-found-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; } .store-not-found-message { color: var(--bs-secondary-color); margin-bottom: 1.25rem; } .store-not-found-slug { font-family: var(--bs-font-monospace); font-size: 0.9rem; padding: 0.5rem 0.75rem; background: var(--bs-light); border-radius: 0.5rem; margin-bottom: 1.5rem; word-break: break-all; } .store-not-found-slug-prefix { color: var(--bs-secondary-color); } .store-not-found-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1.25rem; } .store-not-found-hint { font-size: 0.875rem; color: var(--bs-secondary-color); margin-bottom: 0; } @media (max-width: 575.98px) { .store-not-found-card { padding: 2rem 1.25rem; } .store-not-found-actions { flex-direction: column; } .store-not-found-actions .btn { width: 100%; } } /* --- Pages\Marketing\GuideCategoryPage.razor.css --- */ .marketing-guide-hero-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; } .letter-spacing-tight { letter-spacing: 0.04em; } /* --- Pages\Marketing\GuidesIndexPage.razor.css --- */ .guides-index-page .marketing-hero-lead { max-width: 36rem; } .guides-index-about-panel { max-width: 28rem; margin-inline: auto; padding: 1.75rem 1.5rem; border: 1px solid var(--kinjie-border); border-radius: 1rem; background: var(--kinjie-surface); } .guides-index-skeleton-card { height: 7.5rem; border-radius: 1rem; background: linear-gradient( 90deg, rgba(var(--kinjie-ink-rgb), 0.04) 0%, rgba(var(--kinjie-ink-rgb), 0.07) 50%, rgba(var(--kinjie-ink-rgb), 0.04) 100%); background-size: 200% 100%; animation: guides-index-shimmer 1.2s ease-in-out infinite; } @keyframes guides-index-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ========== storefront-public-gallery.css ========== */ /* Public storefront photo gallery layouts (PublicStoreGallery). Keep in sync with live rules in Kinjie.UI/Components/Storefront/StorefrontBody.razor