/* ========================================================================= partner.css — the ONLY stylesheet you edit for Partner.MeroABC. app.css is a frozen, compiled base (originally generated by Tailwind; the build toolchain has been removed). Never edit app.css. Rules: - Write plain CSS here with semantic class names, following the existing Partner component families (.partner-btn-*, .partner-badge-*, ...). - Reuse the design tokens defined in app.css (:root / .dark), e.g. var(--partner-brand), var(--partner-surface), var(--partner-border). - Dark mode: the element gets the .dark class, so write .dark .your-class { ... } for dark overrides. - Existing utility classes in markup keep working (they live in app.css); do not rely on NEW utility classes — they don't exist. - This file loads after app.css, so equal-specificity rules here win. ========================================================================= */ /* ── Modal close button: one standard for all popups ───────────────────── Bordered rounded-square with a REAL fa-arrow-left element (injected by js/modalCloseIcon.js — FA is JS/SVG here, pseudo glyphs don't render), placed LEFT of the title with the text center-aligned to it. Scoped to modal headers only — filter/side drawers keep their own close. */ .partner-modal-header { align-items: center; gap: 0.75rem; } .partner-modal-header .partner-icon-close { order: -1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; align-self: center; width: 2.35rem; height: 2.35rem; margin: 0; font-size: 0.9rem; border: 1px solid var(--partner-border) !important; border-radius: 0.45rem !important; background: var(--partner-surface) !important; color: var(--partner-muted) !important; transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .partner-modal-header .partner-icon-close::before { content: none; } .partner-modal-header .partner-icon-close:hover { border-color: var(--partner-border-strong); background: var(--partner-surface-soft); color: var(--partner-text); } .dark .partner-modal-header .partner-icon-close { background: transparent; } /* ========================================================================= Business overview (Details) — guided workspace hub Mirrors Admin's Business/Details layout 1:1 (admin-ov-* / admin-step-*) so partner and admin staff see the same page structure. Partner skin: brand orange accents, semantic health colors, dark-mode aware. ========================================================================= */ .partner-ov-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.4rem; padding:1.15rem 1.25rem; border:1px solid var(--partner-border); border-radius:var(--partner-radius); background:linear-gradient(135deg,var(--partner-surface) 55%,var(--partner-brand-soft)); } .dark .partner-ov-hero{ background:linear-gradient(135deg,var(--partner-surface) 55%,var(--partner-surface-soft)); } .partner-ov-ring{ position:relative; flex:0 0 auto; width:92px; height:92px; } .partner-ov-ring svg{transform:rotate(-90deg)} .partner-ov-ring-track{ fill:none; stroke:var(--partner-border); stroke-width:8; } .partner-ov-ring-bar{ fill:none; stroke:var(--partner-amber); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .6s ease,stroke .3s ease; } .partner-ov-ring-bar.is-good{stroke:var(--partner-green)} .partner-ov-ring-bar.is-low{stroke:var(--partner-red)} .partner-ov-ring-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--partner-text); font-size:1.05rem; font-weight:700; } .partner-ov-hero-copy{ flex:1 1 15rem; min-width:0; } .partner-ov-hero-title{ margin:0 0 .2rem; color:var(--partner-text); font-size:1rem; font-weight:700; } .partner-ov-step-dots{ display:flex; align-items:center; gap:.3rem; margin-top:.5rem; } .partner-ov-step-dot{ width:1.35rem; height:.32rem; border-radius:999px; background:var(--partner-border-strong); transition:background-color .3s ease; } .partner-ov-step-dot.is-done{background:var(--partner-green)} .partner-ov-step-dots-label{ margin-left:.4rem; color:var(--partner-muted); font-size:.68rem; font-weight:700; white-space:nowrap; } .partner-ov-hero-readiness{ margin:.4rem 0 0; color:var(--partner-muted); font-size:.72rem; font-weight:600; } .partner-ov-next{ flex:1 1 19rem; min-width:0; padding:.85rem .95rem; border:1px solid color-mix(in srgb,var(--partner-brand) 35%,transparent); border-radius:var(--partner-radius); background:var(--partner-brand-soft); } .partner-ov-next.is-done{ border-color:color-mix(in srgb,var(--partner-green) 35%,transparent); background:var(--partner-green-soft); } .partner-ov-next-inner{ display:flex; align-items:center; gap:.75rem; } .partner-ov-next-icon{ display:inline-flex; flex:0 0 auto; width:2.4rem; height:2.4rem; align-items:center; justify-content:center; border-radius:50%; background:var(--partner-surface); color:var(--partner-brand); font-size:.9rem; } .partner-ov-next-icon.is-done{color:var(--partner-green)} .partner-ov-next-body{ flex:1 1 auto; min-width:0; } .partner-ov-next-kicker{ color:var(--partner-brand-dark); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .dark .partner-ov-next-kicker{color:var(--partner-brand-light)} .partner-ov-next.is-done .partner-ov-next-kicker{color:var(--partner-green-dark)} .dark .partner-ov-next.is-done .partner-ov-next-kicker{color:var(--partner-green-light)} .partner-ov-next-title{ margin-top:.1rem; color:var(--partner-text); font-size:.84rem; font-weight:700; line-height:1.3; } .partner-ov-next-desc{ margin-top:.12rem; color:var(--partner-muted); font-size:.72rem; line-height:1.4; } .partner-ov-next-btn{flex:0 0 auto;white-space:nowrap} .partner-ov-section-head{ display:flex; align-items:center; gap:.55rem; margin:1.1rem 0 .7rem; } .partner-ov-section-num{ display:inline-flex; flex:0 0 auto; width:1.45rem; height:1.45rem; align-items:center; justify-content:center; border:1px solid color-mix(in srgb,var(--partner-brand) 35%,transparent); border-radius:50%; background:var(--partner-brand-soft); color:var(--partner-brand); font-size:.72rem; font-weight:700; } .partner-ov-section-title{ margin:0; color:var(--partner-text); font-size:.87rem; font-weight:700; } .partner-ov-section-tag{ color:var(--partner-muted); font-size:.68rem; font-weight:600; font-style:italic; } .partner-ov-section-count{ margin-left:auto; padding:.2rem .55rem; border-radius:999px; background:var(--partner-amber-soft); color:var(--partner-amber-dark); font-size:.68rem; font-weight:700; white-space:nowrap; } .dark .partner-ov-section-count{color:var(--partner-amber)} .partner-ov-section-count.is-done{ background:var(--partner-green-soft); color:var(--partner-green-dark); } .dark .partner-ov-section-count.is-done{color:var(--partner-green-light)} .partner-ov-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.85rem; } .partner-step-card{ display:flex; flex-direction:column; gap:.5rem; padding:.95rem 1rem; border:1px solid var(--partner-border); border-radius:var(--partner-radius); background:var(--partner-surface); transition:border-color .16s ease; } .partner-step-card:hover{border-color:var(--partner-border-strong)} .partner-step-card.is-todo{ border-left:3px solid var(--partner-amber); padding-left:calc(1rem - 2px); } .partner-step-card.is-done{ background:var(--partner-surface-soft); } .partner-step-card.is-done .partner-step-title{color:var(--partner-muted)} .partner-step-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; } .partner-step-icon{ display:inline-flex; width:2.25rem; height:2.25rem; align-items:center; justify-content:center; border-radius:.55rem; background:linear-gradient(135deg,var(--partner-brand-soft),var(--partner-surface)); color:var(--partner-brand); font-size:.88rem; } .partner-step-card.is-done .partner-step-icon{ background:linear-gradient(135deg,var(--partner-green-soft),var(--partner-surface)); color:var(--partner-green); } .partner-step-status{ display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .55rem; border-radius:999px; font-size:.66rem; font-weight:700; line-height:1; white-space:nowrap; } .partner-step-status .fas{font-size:.6rem} .partner-step-status.is-done{ background:var(--partner-green-soft); color:var(--partner-green-dark); } .dark .partner-step-status.is-done{color:var(--partner-green-light)} .partner-step-status.is-todo{ background:var(--partner-amber-soft); color:var(--partner-amber-dark); } .dark .partner-step-status.is-todo{color:var(--partner-amber)} .partner-step-status.is-neutral{ background:var(--partner-surface-muted); color:var(--partner-muted); } .partner-step-status-dot{ width:.42rem; height:.42rem; border-radius:50%; background:var(--partner-amber); animation:partner-ov-pulse 2.2s ease-in-out infinite; } @keyframes partner-ov-pulse{ 0%,100%{opacity:1} 50%{opacity:.3} } @media (prefers-reduced-motion:reduce){ .partner-step-status-dot{animation:none} } .partner-step-title{ color:var(--partner-text); font-size:.84rem; font-weight:700; } .partner-step-hint{ color:var(--partner-muted); font-size:.72rem; line-height:1.45; } .partner-step-open{ display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start; margin-top:auto; padding-top:.35rem; color:var(--partner-brand); font-size:.74rem; font-weight:700; text-decoration:none; } .partner-step-open .fas{ font-size:.62rem; transition:transform .16s ease; } .partner-step-open:hover{ color:var(--partner-brand-dark); text-decoration:none; } .dark .partner-step-open:hover{color:var(--partner-brand-light)} .partner-step-open:hover .fas{transform:translateX(2px)} .partner-ov-columns{ display:grid; grid-template-columns:1fr; gap:.85rem; } @media (min-width:992px){ .partner-ov-columns{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} } .partner-ov-columns > .partner-card{height:100%} .partner-ov-breakdown{ display:flex; flex-direction:column; gap:.85rem; } .partner-ov-breakdown-line{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:.3rem; } .partner-ov-breakdown-title{ color:var(--partner-text); font-size:.76rem; font-weight:700; } .partner-ov-breakdown-meta{ color:var(--partner-muted); font-size:.68rem; white-space:nowrap; } .partner-ov-bar{ height:.38rem; overflow:hidden; border-radius:999px; background:var(--partner-surface-muted); } .partner-ov-bar-fill{ height:100%; border-radius:999px; background:var(--partner-amber); transition:width .4s ease; } .partner-ov-bar-fill.is-done{background:var(--partner-green)} .partner-ov-pending{ margin-top:1rem; padding:.75rem .85rem; border:1px solid color-mix(in srgb,var(--partner-amber) 35%,transparent); border-radius:var(--partner-radius); background:var(--partner-amber-soft); } .partner-ov-pending-title{ display:flex; align-items:center; gap:.4rem; color:var(--partner-amber-dark); font-size:.74rem; font-weight:700; } .dark .partner-ov-pending-title{color:var(--partner-amber)} .partner-ov-pending-list{ margin:.45rem 0 0; padding-left:1.1rem; color:var(--partner-amber-dark); font-size:.72rem; line-height:1.55; list-style:disc; } .dark .partner-ov-pending-list{color:var(--partner-amber)} .partner-ov-allgood{ display:flex; align-items:center; gap:.45rem; margin-top:1rem; padding:.7rem .85rem; border:1px solid color-mix(in srgb,var(--partner-green) 35%,transparent); border-radius:var(--partner-radius); background:var(--partner-green-soft); color:var(--partner-green-dark); font-size:.74rem; font-weight:700; } .dark .partner-ov-allgood{color:var(--partner-green-light)} .partner-ov-activity-row{ display:flex; align-items:center; gap:.7rem; padding:.68rem 0; border-bottom:1px solid var(--partner-border); } .partner-ov-activity-row:first-child{padding-top:.1rem} .partner-ov-activity-row:last-child{border-bottom:0;padding-bottom:.1rem} .partner-ov-activity-icon{ display:inline-flex; flex:0 0 auto; width:2.1rem; height:2.1rem; align-items:center; justify-content:center; border-radius:.55rem; background:var(--partner-surface-soft); color:var(--partner-muted); font-size:.8rem; } .partner-ov-activity-body{ flex:1 1 auto; min-width:0; } .partner-ov-activity-title{ color:var(--partner-text); font-size:.76rem; font-weight:700; } .partner-ov-activity-text{ margin-top:.08rem; overflow:hidden; color:var(--partner-muted); font-size:.71rem; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:640px){ .partner-ov-hero{padding:.95rem 1rem;gap:.9rem} .partner-ov-ring{width:76px;height:76px} .partner-ov-ring svg{width:76px;height:76px} .partner-ov-next{flex-basis:100%} .partner-ov-next-btn{align-self:flex-start} .partner-ov-next-inner{flex-wrap:wrap} } /* ── Public pricing page (/Pricing) ────────────────────────────────────── Anonymous marketing page linked from the public client footer. Free-first layout per business-docs/enquiry-model-v3.md: one full-width free band, then two "contact sales" cards (enquiry volume, placement). */ .partner-pricing-page { min-height: 100vh; padding: 3rem 1rem 4rem; background: var(--partner-surface-soft); } .dark .partner-pricing-page { background: transparent; } .partner-pricing-shell { max-width: 68rem; margin: 0 auto; } .partner-pricing-head { text-align: center; margin-bottom: 2.5rem; } .partner-pricing-title { margin-top: 0.5rem; font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; color: var(--partner-text); } .partner-pricing-sub { max-width: 34rem; margin: 0.75rem auto 0; font-size: 0.95rem; line-height: 1.6; color: var(--partner-muted); } .partner-pricing-grid { display: grid; gap: 1.25rem; } @media (min-width: 900px) { .partner-pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .partner-pricing-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; border: 1px solid var(--partner-border); border-radius: var(--partner-radius); background: var(--partner-surface); } .partner-pricing-card.is-featured { border-color: var(--partner-brand); box-shadow: 0 12px 32px rgba(0, 87, 255, 0.12); } .partner-pricing-flag { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--partner-brand); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; white-space: nowrap; } .partner-pricing-flag.is-soon { background: var(--partner-surface); border: 1px solid var(--partner-border-strong); color: var(--partner-muted); } .partner-pricing-plan { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--partner-muted); } .partner-pricing-price { margin-top: 0.4rem; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.01em; color: var(--partner-text); } .partner-pricing-cycle { margin-top: 0.15rem; font-size: 0.8rem; color: var(--partner-muted); } .partner-pricing-features { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.25rem 0 1.5rem; padding: 1.25rem 0 0; border-top: 1px solid var(--partner-border); list-style: none; flex: 1 1 auto; } .partner-pricing-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; line-height: 1.45; color: var(--partner-text); } .partner-pricing-features .fas { margin-top: 0.2rem; font-size: 0.7rem; color: var(--partner-brand); } .partner-pricing-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1rem; border-radius: 0.6rem; background: var(--partner-brand); font-size: 0.875rem; font-weight: 700; color: #fff; text-decoration: none; transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .partner-pricing-cta:hover { filter: brightness(0.92); color: #fff; } .partner-pricing-cta-outline { background: transparent; border: 1px solid var(--partner-border-strong); color: var(--partner-text); } .partner-pricing-cta-outline:hover { filter: none; border-color: var(--partner-brand); color: var(--partner-brand); } .partner-pricing-notes { margin-top: 2.5rem; text-align: center; font-size: 0.8rem; line-height: 1.6; color: var(--partner-muted); } .partner-pricing-notes p + p { margin-top: 0.5rem; } .partner-pricing-notes a { font-weight: 700; color: var(--partner-brand); text-decoration: none; } .partner-pricing-notes-lead { font-weight: 700; color: var(--partner-text); } /* Free band — the page's dominant element. */ .partner-pricing-hero { position: relative; padding: 2rem 1.75rem 1.75rem; border: 1px solid var(--partner-brand); border-radius: var(--partner-radius); background: var(--partner-surface); box-shadow: 0 12px 32px rgba(0, 87, 255, 0.12); } .partner-pricing-hero-head { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; } @media (min-width: 720px) { .partner-pricing-hero-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } } .partner-pricing-hero .partner-pricing-price { font-size: 2.4rem; } .partner-pricing-hero-features { margin-bottom: 0; } @media (min-width: 720px) { .partner-pricing-hero-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; } } .partner-pricing-divider { margin: 2.25rem 0 1.25rem; text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--partner-muted); } @media (min-width: 900px) { .partner-pricing-grid.is-duo { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================= Calmer typography — overrides for the frozen app.css ------------------------------------------------------------------------- app.css shipped the business workspace header and form controls with very heavy weights (title/type 800, status pill 900, input values 600). These overrides land the Partner Business/Details header on the same "Subtle" spec as Admin (admin-business-ribbon-*) and calm the bold values inside inputs, selects, and dropdowns across every Partner form (setup, registration, everywhere). partner.css loads after app.css, so equal- specificity rules here win; the status pill needs !important to beat the frozen 900!important. ========================================================================= */ /* Business workspace header (ribbon) — match Admin's Subtle spec */ .business-workspace-title { font-size: 1.15rem; font-weight: 600; line-height: 1.3; } .business-workspace-type { font-size: 0.8rem; font-weight: 500; } .business-workspace-meta strong { font-weight: 500; } .business-workspace-status-pill { font-weight: 600 !important; } .business-workspace-logo { height: 3.5rem; width: 3.5rem; } /* Form controls — calmer values inside inputs, selects, and dropdowns */ .partner-label { font-weight: 600; } .partner-input, .partner-select, .partner-auth-input { font-weight: 400; } .partner-input::placeholder, .partner-select::placeholder, .partner-auth-input::placeholder { font-weight: 400; } .ts-wrapper .ts-control, .ts-wrapper .ts-control .item { font-weight: 400; } /* Desktop: fit the whole workspace nav (wrap, no horizontal scroll) — the frozen app.css forces a max-content scroll rail. Mobile (<992px) keeps the scroll rail. */ @media (min-width: 992px) { .business-workspace-nav-scroll { overflow-x: visible; } .business-workspace-nav { flex-wrap: wrap; width: auto; min-width: 0; } .business-workspace-nav-card::after { display: none; } } /* ========================================================================= Primary workspace nav — copy Admin's CALM look exactly. ------------------------------------------------------------------------- The frozen app.css styles the Partner nav as italic labels with a blue gradient + outer-glow active pill (flashy). Admin's Business/Setup nav is the agreed reference: upright labels, flat light-blue active pill, no glow. Values below are copied verbatim from Admin's .admin-workspace-nav .nav-link (literal hex to guarantee a pixel match across the two apps). !important is required to beat app.css's own !important active rules. ========================================================================= */ .business-workspace-nav { gap: .3rem !important; padding: .34rem .36rem !important; } .business-workspace-nav a { display: inline-flex !important; align-items: center; gap: .36rem; min-height: 2rem; padding: .42rem .62rem !important; border: 1px solid transparent !important; border-radius: .42rem !important; background: transparent !important; color: #66758b !important; font-size: .76rem !important; font-weight: 650 !important; font-style: normal !important; line-height: 1.1 !important; box-shadow: none !important; letter-spacing: 0 !important; } .business-workspace-nav a i, .business-workspace-nav a .fas { width: .85rem; color: #8491a6 !important; font-size: .72rem !important; } .business-workspace-nav a:hover { background: #f5f8fc !important; border-color: transparent !important; color: var(--partner-text) !important; box-shadow: none !important; } .business-workspace-nav a.active, .business-workspace-nav a.active:hover { background: #eef5ff !important; border-color: #cfe0ff !important; color: #0057ff !important; box-shadow: 0 0 0 1px rgba(0, 87, 255, .08) !important; } .business-workspace-nav a.active i, .business-workspace-nav a.active .fas { color: #0057ff !important; } /* ========================================================================= Header ribbon — match Admin's compact height + calm blue "back" link. app.css gives Partner a taller card (.95rem pad, .7rem topline, .75rem meta margin, .875rem meta) and a dark/italic/700 back link. Admin is tighter and its back link is upright blue 600. Values below mirror admin-business-ribbon. ========================================================================= */ .business-workspace-card-body { padding: .82rem 1rem .88rem !important; } .business-workspace-topline { margin-bottom: .56rem; } .business-workspace-back { color: #0057ff !important; font-size: .78rem !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.2 !important; } .business-workspace-back:hover { color: #0046cc !important; } .business-workspace-meta { margin-top: .48rem; gap: .46rem .88rem; font-size: .75rem; line-height: 1.2; font-style: normal; } /* ========================================================================= Setup page hierarchy (Partner) ------------------------------------------------------------------------- 1) Supporting/helper text under a section heading = calm, italic, faint, not bold (app.css had it at weight 600). One consistent treatment. 2) Sub-tabs (Identity/Location/…) must read as a QUIETER tier than the parent workspace nav: app.css shipped them at .82rem/900 — bigger and bolder than the parent (.76rem/650), which inverted the hierarchy. Make them a little smaller and lighter than the parent nav. ========================================================================= */ .business-page-lead p { color: var(--partner-faint) !important; font-weight: 400 !important; font-style: italic !important; } .setup-tab-title { font-size: .72rem !important; font-weight: 500 !important; } .setup-tab-button.is-active .setup-tab-title { font-weight: 600 !important; } /* ========================================================================= Setup tabs + Location/Institution flatten (Partner) ------------------------------------------------------------------------- - Tab rail wraps on desktop (app.css forced a max-content horizontal scroll rail that rendered a distorted full-width scrollbar). - The old per-tab pill note now renders inside the tab body as calm helper text (.setup-tab-note-lead), same faint/italic treatment as the page lead. - Location & contacts and Institution facts drop their nested cards to match the Identity baseline: flat grid + light section headings, with a light helper block and light contact rows instead of boxed cards. ========================================================================= */ @media (min-width: 992px) { .setup-tab-rail { flex-wrap: wrap; overflow-x: visible; } } .setup-tab-note-lead { display: flex; align-items: center; gap: .4rem; margin: 0 0 1.1rem; color: var(--partner-faint); font-size: .78rem; font-style: italic; font-weight: 400; line-height: 1.4; } .setup-tab-note-lead .fas { color: var(--partner-muted); font-style: normal; } /* Inline location map + light coordinate/address readout */ .setup-map { position: relative; height: 300px; width: 100%; border: 1px solid var(--partner-border); border-radius: var(--partner-radius); overflow: hidden; isolation: isolate; z-index: 0; } .setup-map-readout { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 0; color: var(--partner-faint); font-size: .74rem; font-style: italic; line-height: 1.4; } .setup-map-readout .fas { color: var(--partner-muted); font-style: normal; } .setup-map-readout--hint { color: var(--partner-muted); } /* Full-screen map view — expand the picker to fill the viewport */ .setup-map-wrap { position: relative; } .setup-map-fs-btn { position: absolute; top: .5rem; right: .5rem; z-index: 500; display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .6rem; border: 1px solid var(--partner-border); border-radius: var(--partner-radius); background: var(--partner-surface); color: var(--partner-text); font-size: .72rem; font-weight: 500; line-height: 1; box-shadow: var(--partner-shadow-control); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .setup-map-fs-btn:hover { border-color: var(--partner-border-strong); background: var(--partner-surface-soft); } .setup-map-wrap.is-fullscreen { position: fixed; inset: 0; z-index: 2000; background: var(--partner-surface); } .setup-map-wrap.is-fullscreen .setup-map { height: 100%; border: 0; border-radius: 0; } .setup-map-readout-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-top: 1px solid var(--partner-border); background: color-mix(in srgb, var(--partner-surface) 92%, transparent); backdrop-filter: blur(8px); color: var(--partner-text); font-size: .78rem; } .setup-map-readout-bar__text { flex: 1 1 auto; min-width: 0; color: var(--partner-muted); } .setup-map-readout-bar__text .fas { color: var(--partner-muted); } /* ========================================================================= Topbar height (2026-07-22) — the sidebar brand line is driven by var(--partner-topbar-height), but .partner-topbar hardcoded min-height:4rem plus a py-3 padding, so the header border and the sidebar divider never shared one number and didn't line up. Fix: shrink the shared variable (the sidebar brand row + content height calc follow it) and bind the topbar to the same variable with zero vertical padding, so both borders sit at the exact same Y. box-sizing is border-box app-wide, so with no vertical padding the topbar height == the variable, matching the brand row. ========================================================================= */ :root { --partner-topbar-height: 3.6rem; } /* Force the topbar AND the sidebar brand row to the identical fixed height at the same top:0 origin, so their bottom borders land on the same Y. Fixed height (not just min-height) + !important removes any dependency on content size, box-sizing, or variable inheritance. */ .partner-topbar, .navbar-vertical > .d-flex { height: var(--partner-topbar-height) !important; min-height: var(--partner-topbar-height) !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Light helper block (not a card) for recommended contact routes */ .setup-recommend-note { padding: .75rem .85rem; border: 1px dashed var(--partner-border); border-radius: var(--partner-radius); background: var(--partner-surface-soft); } /* Light bordered row for each contact (flatter than the old card) */ .setup-contact-row { padding: .85rem .9rem; border: 1px solid var(--partner-border); border-radius: var(--partner-radius); background: var(--partner-surface); } /* ========================================================================= Setup form redesign (Partner) — even rhythm + an always-visible Save. ------------------------------------------------------------------------- 1) RHYTHM: the form fields shipped with ad-hoc mb-3 / mb-0 / mt-3 utilities, so spacing was cramped in places and airy in others and the two columns misaligned. Make each column a single vertical flow with ONE consistent gap; nested 2-up grids (year/verified, status/visibility) keep their own horizontal grid. This is the calm, predictable 8pt rhythm. 2) VISIBLE SAVE: the sticky footer was 94% transparent + blurred, so it dissolved into the content. Make it a solid, lifted toolbar that always reads as the action bar, with a prominent primary button. ========================================================================= */ .setup-panel-body form .grid.grid-cols-12 > [class*="col-span"] { display: flex; flex-direction: column; gap: 1.05rem; } .setup-panel-body form .grid.grid-cols-12 > [class*="col-span"] > div { margin-top: 0 !important; margin-bottom: 0 !important; } .partner-form-footer { padding: .72rem .9rem !important; background: var(--partner-surface) !important; backdrop-filter: none !important; box-shadow: 0 -6px 16px -8px rgba(15, 23, 42, .12), var(--partner-shadow-card) !important; } .dark .partner-form-footer { box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, .5), var(--partner-shadow-card) !important; } .partner-form-footer .partner-btn-primary { min-width: 11rem; } /* ============================================================ Claim / ownership forms (RegisterOwnership + Ownership) Compact, calm typography; required→valid document states. ============================================================ */ .claim-card { box-shadow: 0 1.25rem 3.5rem rgba(18, 38, 63, .14); } .claim-kicker { margin-bottom: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--partner-brand); } .claim-title { font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--partner-text); } .claim-subtitle { margin-top: .35rem; font-size: .82rem; line-height: 1.5; color: var(--partner-muted); } .claim-note { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .85rem; padding: .6rem .75rem; border-radius: .6rem; border: 1px solid var(--partner-border); background: var(--partner-surface-soft); color: var(--partner-text); font-size: .8rem; line-height: 1.45; } .claim-note .fas { margin-top: .12rem; flex: 0 0 auto; } .claim-note-info { border-color: color-mix(in srgb, var(--partner-info) 34%, var(--partner-border)); background: var(--partner-info-soft); } .claim-note-info .fas { color: var(--partner-info); } .claim-note-warning { border-color: color-mix(in srgb, var(--partner-amber) 36%, var(--partner-border)); background: var(--partner-amber-soft); } .claim-note-warning .fas { color: var(--partner-amber-dark); } .claim-note-danger { border-color: color-mix(in srgb, var(--partner-red) 36%, var(--partner-border)); background: var(--partner-red-soft); } .claim-note-danger .fas { color: var(--partner-red); } .claim-note.hidden { display: none; } .claim-inline-link { color: var(--partner-brand); font-weight: 600; font-size: .8rem; } .claim-inline-link:hover { color: var(--partner-brand-dark); text-decoration: underline; text-underline-offset: 2px; } .claim-section { margin-bottom: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--partner-border); } .claim-section:first-of-type { margin-top: .25rem; padding-top: 0; border-top: 0; } .claim-section-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; } .claim-step { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; flex: 0 0 auto; border-radius: 999px; background: color-mix(in srgb, var(--partner-brand) 14%, var(--partner-surface)); color: var(--partner-brand-dark); font-size: .72rem; font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--partner-brand) 26%, transparent); } .claim-section-title { font-size: .92rem; font-weight: 600; color: var(--partner-text); } .claim-section-sub { margin-top: .1rem; font-size: .74rem; line-height: 1.4; color: var(--partner-muted); } .claim-label { display: block; margin-bottom: .3rem; font-size: .78rem; font-weight: 500; color: var(--partner-text); } .claim-req { color: var(--partner-red); font-weight: 600; } .claim-optional { color: var(--partner-faint); font-weight: 400; font-size: .72rem; } .claim-error { display: block; margin-top: .25rem; font-size: .72rem; color: var(--partner-red); } .claim-hint { display: block; margin-top: .25rem; font-size: .72rem; font-weight: 500; } .claim-hint.is-ok { color: var(--partner-green-dark); } .claim-hint.is-bad { color: var(--partner-red); } .claim-hint.hidden { display: none; } .claim-readonly { background: var(--partner-surface-muted); color: var(--partner-muted); } .claim-textarea { min-height: 3.4rem; resize: vertical; } .claim-pw { position: relative; } .claim-pw .partner-auth-input { padding-right: 2.5rem; } .claim-pw-toggle { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: .5rem; background: transparent; color: var(--partner-faint); cursor: pointer; } .claim-pw-toggle:hover { color: var(--partner-muted); } .claim-doc { border: 1px solid var(--partner-border); border-radius: .65rem; background: var(--partner-surface); padding: .75rem .8rem; transition: background .15s ease, border-color .15s ease; } .claim-doc-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .claim-doc-label { font-size: .8rem; font-weight: 600; color: var(--partner-text); } .claim-doc-badge { flex: 0 0 auto; border-radius: 999px; padding: .12rem .5rem; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--partner-red) 16%, var(--partner-surface)); color: var(--partner-red); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--partner-red) 30%, transparent); } .claim-doc-badge-muted { background: var(--partner-surface-muted); color: var(--partner-faint); box-shadow: inset 0 0 0 1px var(--partner-border); } .claim-doc-input { display: block; width: 100%; font-size: .78rem; color: var(--partner-muted); } .claim-doc-input::file-selector-button { margin-right: .75rem; border: 0; border-radius: .5rem; padding: .4rem .7rem; font-size: .76rem; font-weight: 600; color: var(--partner-brand-dark); background: color-mix(in srgb, var(--partner-brand) 14%, var(--partner-surface)); cursor: pointer; } .claim-doc-status { margin-top: .5rem; font-size: .72rem; line-height: 1.4; color: var(--partner-muted); } .claim-doc.is-required { border-color: color-mix(in srgb, var(--partner-red) 34%, var(--partner-border)); background: var(--partner-red-soft); } .claim-doc.is-required .claim-doc-status { color: color-mix(in srgb, var(--partner-red) 78%, var(--partner-text)); } .claim-doc.is-valid { border-color: color-mix(in srgb, var(--partner-green) 40%, var(--partner-border)); background: var(--partner-green-soft); } .claim-doc.is-valid .claim-doc-badge { background: color-mix(in srgb, var(--partner-green) 18%, var(--partner-surface)); color: var(--partner-green-dark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--partner-green) 34%, transparent); } .claim-doc.is-valid .claim-doc-status { color: var(--partner-green-dark); font-weight: 600; } .claim-doc.is-invalid { border-color: var(--partner-red); background: var(--partner-red-soft); } .claim-doc.is-invalid .claim-doc-status { color: var(--partner-red); font-weight: 600; } .claim-terms { display: flex; gap: .6rem; align-items: flex-start; padding: .1rem 0 .2rem; cursor: pointer; } .claim-terms-check { margin-top: .15rem; width: 1rem; height: 1rem; accent-color: var(--partner-brand); cursor: pointer; } .claim-terms-title { display: block; font-size: .8rem; font-weight: 500; color: var(--partner-text); } .claim-terms-sub { display: block; margin-top: .1rem; font-size: .72rem; line-height: 1.4; color: var(--partner-faint); } .claim-submit { width: 100%; margin-top: .85rem; } .claim-aside { justify-content: flex-start; } .claim-aside-chip { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .3rem .65rem; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--partner-brand); background: color-mix(in srgb, var(--partner-brand) 12%, var(--partner-surface)); } .claim-aside-title { margin-top: 1rem; font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--partner-text); } .claim-aside-sub { margin-top: .5rem; font-size: .82rem; line-height: 1.5; color: var(--partner-muted); } .claim-flow { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; } .claim-flow li { display: flex; align-items: flex-start; gap: .55rem; font-size: .8rem; line-height: 1.45; color: var(--partner-muted); } .claim-flow-num { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; border-radius: 999px; background: color-mix(in srgb, var(--partner-brand) 14%, var(--partner-surface)); color: var(--partner-brand-dark); font-size: .7rem; font-weight: 700; } .claim-flow-num-done { background: color-mix(in srgb, var(--partner-green) 18%, var(--partner-surface)); color: var(--partner-green-dark); } .claim-flow-title { font-weight: 600; color: var(--partner-text); } .claim-aside-foot { margin-top: auto; border-top: 1px solid var(--partner-border); padding-top: .9rem; } .claim-aside-foot-label { display: block; margin-bottom: .55rem; font-size: .8rem; font-weight: 500; color: var(--partner-muted); } .claim-aside-signin { width: 100%; } @media (max-width: 640px) { .claim-aside { gap: 1rem; } } /* ============================================================ Session strip (Business > Details) - 2026-07-26 One honest line about the academic year and whether admission is actually open. Tone comes from the proc's stateCode, so the strip can never disagree with the Admissions step card. ============================================================ */ .partner-session-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; margin-bottom:.85rem; padding:.95rem 1.1rem; border:1px solid var(--partner-border); border-left:3px solid var(--partner-border-strong); border-radius:var(--partner-radius); background:var(--partner-surface); } .partner-session-strip.is-open{ border-left-color:var(--partner-green); background:color-mix(in srgb,var(--partner-green-soft) 45%,var(--partner-surface)); } .partner-session-strip.is-scheduled{ border-left-color:var(--partner-brand); background:color-mix(in srgb,var(--partner-brand-soft) 45%,var(--partner-surface)); } .partner-session-strip.is-closed{ border-left-color:var(--partner-amber); background:color-mix(in srgb,var(--partner-amber-soft) 45%,var(--partner-surface)); } .partner-session-strip.is-none{ border-left-color:var(--partner-border-strong); background:var(--partner-surface-soft); } .partner-session-strip-main{ flex:1 1 20rem; min-width:0; } .partner-session-strip-row{ display:flex; align-items:center; gap:.5rem; margin-bottom:.15rem; } .partner-session-strip-kicker{ color:var(--partner-muted); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .partner-session-strip-badge{ border-radius:999px; padding:.1rem .5rem; font-size:.66rem; font-weight:800; line-height:1.5; } .partner-session-strip-badge.is-open{ background:var(--partner-green); color:#fff; } .partner-session-strip-badge.is-scheduled{ background:var(--partner-brand); color:#fff; } .partner-session-strip-badge.is-closed{ background:var(--partner-amber); color:#1f1400; } .partner-session-strip-badge.is-none{ background:var(--partner-border-strong); color:var(--partner-text); } .partner-session-strip-title{ color:var(--partner-text); font-size:.98rem; font-weight:700; overflow-wrap:anywhere; } .partner-session-strip-copy{ margin:.25rem 0 0; color:var(--partner-text); font-size:.76rem; font-weight:600; line-height:1.5; } .partner-session-strip-note{ margin:.3rem 0 0; color:var(--partner-muted); font-size:.72rem; font-weight:600; line-height:1.5; } .partner-session-strip-actions{ display:flex; flex-wrap:wrap; gap:.5rem; } @media (max-width:640px){ .partner-session-strip-actions{ width:100%; } } /* ============================================================ Avatar - 2026-07-26 Initials are the BASE layer, the photo overlays them. If the photo is absent or fails to load there is nothing to break: the initials are already painted underneath. ============================================================ */ .partner-avatar{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; flex:0 0 auto; overflow:hidden; border-radius:.375rem; background:var(--partner-brand); color:#fff; font-size:.66rem; font-weight:800; line-height:1; letter-spacing:.02em; text-transform:uppercase; user-select:none; } .partner-avatar-initials{ pointer-events:none; } .partner-avatar-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; } .partner-avatar-lg{ width:2.5rem; height:2.5rem; font-size:.9rem; border-radius:.5rem; } /* ============================================================ Nepali calendar grid + date picker - 2026-07-26 BS day is the headline, the Gregorian day sits under it, so a parent-facing date is never ambiguous. Days come from dbo.CalendarDates via /api/calendar-events/nepali-month. ============================================================ */ .np-cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.35rem; } .np-cal-weekday{ padding:.35rem .2rem; color:var(--partner-muted); font-size:.68rem; font-weight:800; text-align:center; text-transform:uppercase; letter-spacing:.03em; } .np-cal-weekday.is-saturday{ color:var(--partner-red); } .np-cal-day{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:3.1rem; padding:.3rem .2rem; border:1px solid var(--partner-border); border-radius:.5rem; background:var(--partner-surface); } .np-cal-day.is-blank{ border-color:transparent; background:transparent; } .np-cal-day.is-saturday{ background:color-mix(in srgb,var(--partner-red-soft) 40%,var(--partner-surface)); } .np-cal-day.is-holiday{ background:color-mix(in srgb,var(--partner-red-soft) 60%,var(--partner-surface)); } .np-cal-day.is-today{ border-color:var(--partner-brand); box-shadow:inset 0 0 0 1px var(--partner-brand); } .np-cal-day-bs{ color:var(--partner-text); font-size:.95rem; font-weight:700; line-height:1.15; } .np-cal-day.is-saturday .np-cal-day-bs, .np-cal-day.is-holiday .np-cal-day-bs{ color:var(--partner-red); } .np-cal-day-ad{ color:var(--partner-faint); font-size:.62rem; font-weight:700; line-height:1.2; } .np-cal-day-dot{ position:absolute; bottom:.3rem; width:.3rem; height:.3rem; border-radius:999px; background:var(--partner-brand); } /* picker popover reuses the same grid at a tighter size */ .np-picker{ position:absolute; z-index:40; width:min(20rem,90vw); margin-top:.35rem; padding:.75rem; border:1px solid var(--partner-border); border-radius:var(--partner-radius); background:var(--partner-surface); box-shadow:var(--partner-shadow-card); } .np-picker .np-cal-day{ min-height:2.1rem; cursor:pointer; } .np-picker .np-cal-day:hover{ border-color:var(--partner-brand); } .np-picker .np-cal-day.is-selected{ background:var(--partner-brand); border-color:var(--partner-brand); } .np-picker .np-cal-day.is-selected .np-cal-day-bs, .np-picker .np-cal-day.is-selected .np-cal-day-ad{ color:#fff; } .np-picker .np-cal-day-bs{ font-size:.8rem; } .np-picker .np-cal-day-ad{ font-size:.56rem; } @media (max-width:640px){ .np-cal{ gap:.25rem; } .np-cal-day{ min-height:2.6rem; } .np-cal-day-bs{ font-size:.85rem; } } /* ============================================================ Inline explainer - 2026-07-26 Names the three concepts partners kept confusing on the Admission sessions page: academic year vs intake vs classes. ============================================================ */ .partner-explainer{ border:1px solid var(--partner-border); border-left:3px solid var(--partner-brand); border-radius:var(--partner-radius); background:color-mix(in srgb,var(--partner-brand-soft) 35%,var(--partner-surface)); padding:.85rem 1rem; } .partner-explainer-title{ margin-bottom:.5rem; color:var(--partner-text); font-size:.8rem; font-weight:800; } .partner-explainer-list{ display:flex; flex-direction:column; gap:.45rem; margin:0; padding-left:1.1rem; list-style:decimal; } .partner-explainer-list li{ color:var(--partner-muted); font-size:.76rem; line-height:1.5; } .partner-explainer-term{ display:inline-block; margin-right:.35rem; color:var(--partner-text); font-weight:800; } .partner-explainer-def{ font-weight:600; } /* --- calendar day cells now carry their events, plus a click-through panel --- */ .np-cal-day{ align-items:stretch; justify-content:flex-start; min-height:5.2rem; padding:.3rem .3rem .35rem; cursor:pointer; transition:border-color .12s ease, background-color .12s ease; } .np-cal-day.is-blank{ cursor:default; } .np-cal-day:not(.is-blank):hover{ border-color:var(--partner-brand); } .np-cal-day.is-selected{ border-color:var(--partner-brand); box-shadow:inset 0 0 0 1px var(--partner-brand); } .np-cal-day-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.3rem; } .np-cal-day-events{ display:flex; flex-direction:column; gap:.12rem; margin-top:.2rem; min-width:0; } .np-cal-chip{ display:block; overflow:hidden; border-left:2px solid var(--partner-border-strong); border-radius:.2rem; background:var(--partner-surface-soft); padding:.08rem .25rem; color:var(--partner-text); font-size:.6rem; font-weight:500; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .np-cal-chip.is-brand{ border-left-color:var(--partner-brand); } .np-cal-chip.is-leaf, .np-cal-chip.is-teal{ border-left-color:var(--partner-green); } .np-cal-chip.is-amber{ border-left-color:var(--partner-amber); } .np-cal-chip.is-indigo{ border-left-color:var(--partner-info); } .np-cal-more{ color:var(--partner-muted); font-size:.58rem; font-weight:500; padding-left:.25rem; } .np-day-panel{ margin-top:.85rem; border:1px solid var(--partner-border); border-radius:var(--partner-radius); background:var(--partner-surface-soft); padding:.85rem 1rem; } .np-day-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; } .np-day-panel-title{ color:var(--partner-text); font-size:.82rem; font-weight:600; } .np-day-panel-empty{ margin:0; color:var(--partner-muted); font-size:.76rem; } .np-day-panel-list{ display:flex; flex-direction:column; gap:.6rem; margin:0; padding:0; list-style:none; } .np-day-panel-item{ display:flex; gap:.6rem; } .np-day-panel-rail{ width:2px; flex:0 0 auto; border-radius:2px; background:var(--partner-border-strong); } .np-day-panel-rail.is-brand{ background:var(--partner-brand); } .np-day-panel-rail.is-leaf, .np-day-panel-rail.is-teal{ background:var(--partner-green); } .np-day-panel-rail.is-amber{ background:var(--partner-amber); } .np-day-panel-rail.is-indigo{ background:var(--partner-info); } .np-day-panel-item-title{ color:var(--partner-text); font-size:.8rem; font-weight:600; } .np-day-panel-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.1rem; color:var(--partner-muted); font-size:.7rem; font-weight:500; } .np-day-panel-summary{ margin:.25rem 0 0; color:var(--partner-muted); font-size:.72rem; line-height:1.5; } @media (max-width:640px){ .np-cal-day{ min-height:4rem; } .np-cal-chip{ font-size:.55rem; } } /* ============================================================ Calendar page: tabs, stats and event list - 2026-07-26 Restyled away from heavy badges/button-groups. Weight is carried by structure and spacing, not by bold+uppercase. ============================================================ */ .np-tabs-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; border-bottom:1px solid var(--partner-border); } .np-tabs{ display:flex; flex-wrap:wrap; gap:.15rem; margin-bottom:-1px; min-width:0; } .np-tab{ display:inline-flex; align-items:center; gap:.4rem; border:0; border-bottom:2px solid transparent; background:transparent; padding:.5rem .7rem; color:var(--partner-muted); font-size:.78rem; font-weight:500; line-height:1.4; cursor:pointer; transition:color .12s ease, border-color .12s ease; } .np-tab:hover{ color:var(--partner-text); } .np-tab.is-active{ border-bottom-color:var(--partner-brand); color:var(--partner-brand); font-weight:600; } .np-tab-count{ border-radius:999px; background:var(--partner-surface-muted); padding:0 .35rem; color:var(--partner-muted); font-size:.66rem; font-weight:600; line-height:1.5; } .np-tab.is-active .np-tab-count{ background:color-mix(in srgb,var(--partner-brand) 12%,transparent); color:var(--partner-brand); } .np-stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); gap:0; margin:0; border:1px solid var(--partner-border); border-radius:var(--partner-radius); overflow:hidden; } .np-stat{ padding:.6rem .85rem; border-right:1px solid var(--partner-border); } .np-stat:last-child{ border-right:0; } .np-stat-label{ color:var(--partner-muted); font-size:.7rem; font-weight:500; } .np-stat-value{ margin:.1rem 0 0; color:var(--partner-text); font-size:1.05rem; font-weight:600; line-height:1.2; } .np-event-list{ display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none; } .np-event{ display:flex; align-items:flex-start; gap:.9rem; border-bottom:1px solid var(--partner-border); padding:.85rem .15rem; } .np-event:last-child{ border-bottom:0; } .np-event-date{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:2.9rem; flex:0 0 auto; border:1px solid var(--partner-border); border-radius:.4rem; padding:.3rem 0; background:var(--partner-surface-soft); } .np-event-date-day{ color:var(--partner-text); font-size:.95rem; font-weight:600; line-height:1.1; } .np-event-date-month{ color:var(--partner-muted); font-size:.62rem; font-weight:500; text-transform:uppercase; } .np-event-main{ flex:1 1 auto; min-width:0; } .np-event-title{ color:var(--partner-text); font-size:.86rem; font-weight:600; line-height:1.4; } .np-event-summary{ margin:.15rem 0 0; color:var(--partner-muted); font-size:.75rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .np-event-meta{ display:flex; flex-wrap:wrap; gap:.15rem .75rem; margin-top:.3rem; color:var(--partner-faint); font-size:.7rem; font-weight:500; } .np-event-meta a{ color:var(--partner-brand); } .np-event-side{ display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; flex:0 0 auto; } .np-event-status{ border-radius:999px; padding:.1rem .5rem; background:var(--partner-surface-muted); color:var(--partner-muted); font-size:.66rem; font-weight:600; white-space:nowrap; } .np-event-status.is-open{ background:color-mix(in srgb,var(--partner-green) 14%,transparent); color:var(--partner-green-dark); } .np-event-status.is-upcoming{ background:color-mix(in srgb,var(--partner-brand) 12%,transparent); color:var(--partner-brand); } .np-event-status.is-pending-review{ background:color-mix(in srgb,var(--partner-amber) 18%,transparent); color:var(--partner-amber-dark); } .np-event-actions{ display:flex; gap:.3rem; } @media (max-width:640px){ .np-event{ flex-wrap:wrap; } .np-event-side{ flex-direction:row; align-items:center; width:100%; justify-content:space-between; } } /* ============================================================ Calendar workspace: match the Setup page's weight ladder ------------------------------------------------------------ Setup reads calmly because weight comes from structure, not from bold+uppercase everywhere. Its ladder: card/section title .78rem/800 helper text .78rem/400 italic sub-tab .72rem/500 (active 600, 2px underline) field label .875rem/600 input value .8rem/400 This block pulls the calendar page onto that same ladder. Scoped to .calendar-workspace so nothing else is disturbed. ============================================================ */ .calendar-workspace .partner-card-header h6{ font-size:.78rem !important; font-weight:800 !important; letter-spacing:.02em; } .calendar-workspace .partner-card-header p.partner-text-muted, .calendar-workspace .partner-card-header .partner-text-muted.text-sm{ color:var(--partner-faint) !important; font-size:.78rem !important; font-style:italic !important; font-weight:400 !important; } /* sub-tabs: exactly Setup's .72rem/500, active 600 */ .calendar-workspace .np-tab{ font-size:.72rem; font-weight:500; } .calendar-workspace .np-tab.is-active{ font-weight:600; } /* stat numbers must not out-shout the page lead */ .calendar-workspace .np-stat-value{ font-size:.95rem; font-weight:600; } .calendar-workspace .np-stat-label{ font-weight:400; } /* calendar grid: drop the uppercase 800 weekday strip and 700 day numerals */ .calendar-workspace .np-cal-weekday{ font-size:.68rem; font-weight:500; text-transform:none; letter-spacing:0; } .calendar-workspace .np-cal-day-bs{ font-size:.88rem; font-weight:600; } .calendar-workspace .np-cal-day-ad{ font-weight:400; } /* empty state was 900/700 */ .calendar-workspace .partner-empty-state h6{ font-size:.86rem !important; font-weight:700 !important; } .calendar-workspace .partner-empty-state p{ font-size:.78rem !important; font-weight:400 !important; } /* ============================================================ Standard modal close - 2026-07-26 Replaces the old back-arrow in every popup with a single X that matches the filter drawer. Animated: rotates and tints on hover so the affordance is obvious. ============================================================ */ .modal-x-close{ display:inline-flex !important; align-items:center; justify-content:center; width:2rem; height:2rem; padding:0 !important; border-radius:999px !important; line-height:1; transition:transform .18s ease, background-color .18s ease, color .18s ease; } .modal-x-close:hover, .modal-x-close:focus-visible{ transform:rotate(90deg); background:rgba(220,38,38,.10) !important; color:#dc2626 !important; border-color:transparent !important; } .modal-x-close:active{ transform:rotate(90deg) scale(.92); } .modal-x-close .fas{ font-size:.8rem; } @media (prefers-reduced-motion: reduce){ .modal-x-close{ transition:none; } .modal-x-close:hover, .modal-x-close:focus-visible, .modal-x-close:active{ transform:none; } } /* ============================================================ Event modal + skeletons - 2026-07-26 revamp Was: xl-width, every field on its own row, nested bordered boxes, checkbox cards. Now: narrower dialog, 2/4-column field grids, chip pickers with select/clear all, optional detail collapsed behind a disclosure. Header: title left, X right (matches the filter drawer). ============================================================ */ .evt-modal-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--partner-border); background:var(--partner-surface-soft); padding:.8rem 1.1rem; } .evt-modal-title{ margin:0; color:var(--partner-text); font-size:.92rem; font-weight:700; } .evt-modal-close{ border:1px solid var(--partner-border) !important; background:var(--partner-surface) !important; color:var(--partner-muted) !important; } .evt-modal-body{ padding:1rem 1.1rem 1.15rem !important; } .evt-grid{ display:grid; gap:.7rem .8rem; } .evt-grid-1{ grid-template-columns:minmax(0,1fr); } .evt-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .evt-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .evt-span-2{ grid-column:1 / -1; } .evt-field{ min-width:0; } .evt-label{ display:block; margin-bottom:.22rem; color:var(--partner-text); font-size:.74rem; font-weight:600; } .evt-section-title{ display:flex; align-items:baseline; gap:.5rem; margin:1.05rem 0 .5rem; padding-top:.8rem; border-top:1px solid var(--partner-border); color:var(--partner-text); font-size:.74rem; font-weight:800; letter-spacing:.02em; } .evt-section-count{ color:var(--partner-muted); font-size:.7rem; font-weight:500; letter-spacing:0; } .evt-picker{ min-width:0; } .evt-picker-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.35rem; } .evt-picker-label{ color:var(--partner-muted); font-size:.7rem; font-weight:600; } .evt-picker-actions{ display:inline-flex; gap:.6rem; } .evt-link{ border:0; background:transparent; padding:0; color:var(--partner-brand); font-size:.7rem; font-weight:600; cursor:pointer; } .evt-link:hover{ text-decoration:underline; } .evt-chip-wrap{ display:flex; flex-wrap:wrap; gap:.35rem; } .evt-chip{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--partner-border); border-radius:999px; background:var(--partner-surface); padding:.24rem .6rem; color:var(--partner-text); font-size:.73rem; font-weight:500; cursor:pointer; transition:border-color .12s ease, background-color .12s ease; } .evt-chip:hover{ border-color:var(--partner-brand); } .evt-chip.is-on{ border-color:var(--partner-brand); background:color-mix(in srgb,var(--partner-brand) 10%,var(--partner-surface)); color:var(--partner-brand); font-weight:600; } .evt-chip input{ width:.8rem; height:.8rem; margin:0; } .evt-empty{ margin:.35rem 0 0; color:var(--partner-muted); font-size:.72rem; } .evt-more{ margin-top:1rem; border-top:1px solid var(--partner-border); padding-top:.7rem; } .evt-more-summary{ color:var(--partner-brand); font-size:.74rem; font-weight:600; cursor:pointer; } .evt-more-summary::marker{ color:var(--partner-muted); } .evt-publish{ display:flex; align-items:flex-start; gap:.55rem; margin-top:1rem; border:1px solid var(--partner-border); border-radius:var(--partner-radius); background:var(--partner-surface-soft); padding:.65rem .8rem; cursor:pointer; } .evt-publish-title{ display:block; color:var(--partner-text); font-size:.78rem; font-weight:600; } .evt-publish-help{ display:block; margin-top:.1rem; color:var(--partner-muted); font-size:.7rem; } /* --- loading skeletons --- */ @keyframes np-sk{ 0%{opacity:.55} 50%{opacity:1} 100%{opacity:.55} } .np-cal-day.is-skeleton{ background:var(--partner-surface-muted); border-color:var(--partner-border); animation:np-sk 1.3s ease-in-out infinite; cursor:default; } .np-event.is-skeleton{ animation:np-sk 1.3s ease-in-out infinite; } .np-event.is-skeleton .sk-block{ background:var(--partner-surface-muted); border-color:var(--partner-border); } .sk-line{ height:.62rem; border-radius:999px; background:var(--partner-surface-muted); } .sk-line-lg{ width:52%; } .sk-line-sm{ width:78%; margin-top:.42rem; } @media (max-width:768px){ .evt-grid-2, .evt-grid-4{ grid-template-columns:minmax(0,1fr); } } /* The converted close buttons sit first in the DOM (they replaced a leading back-arrow). Modal headers are flex, so push the X to the right edge without having to re-order markup in 20 files. The purpose-built .evt-modal-close opts out because its markup is already title-then-X. */ .modal-header .modal-x-close:not(.evt-modal-close), .partner-modal-header .modal-x-close:not(.evt-modal-close){ order:99; margin-left:auto; } .modal-header .modal-x-close:not(.evt-modal-close) + .modal-title, .partner-modal-header .modal-x-close:not(.evt-modal-close) + .partner-modal-title{ margin-left:0 !important; } /* ========================================================================= Dashboard visibility insights (Phase 6 of the WEB §11e analytics pipeline) Real numbers from [sp_partner_Insights.GetOverview] replacing the old decorative area chart (its classes stay unused in frozen app.css). Calm by design: flat token-colored bars, no gradients, no animation beyond a height transition. ========================================================================= */ .partner-insight-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; } @media (min-width:640px){ .partner-insight-stats{grid-template-columns:repeat(4,minmax(0,1fr));} } .partner-insight-stat{ border:1px solid var(--partner-border); border-radius:.6rem; background:var(--partner-surface-soft); padding:.8rem .9rem; } .partner-insight-stat-value{ font-size:1.35rem; font-weight:800; line-height:1.2; color:var(--partner-text); } .partner-insight-stat-label{ margin-top:.15rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--partner-muted); } .partner-insight-chart{ display:flex; align-items:flex-end; gap:3px; height:9.5rem; padding:.4rem .2rem 0; border-bottom:1px solid var(--partner-border); } .partner-insight-col{ position:relative; display:flex; align-items:flex-end; justify-content:center; gap:2px; flex:1 1 0; min-width:0; height:100%; } .partner-insight-bar{ width:45%; max-width:9px; min-height:2px; border-radius:2px 2px 0 0; background:var(--partner-brand); transition:height .25s ease; } .partner-insight-bar.is-views{ background:var(--partner-border-strong); } .partner-insight-axis{ display:flex; justify-content:space-between; margin-top:.4rem; font-size:.68rem; font-weight:700; color:var(--partner-muted); }