/* Blondify Team Portal: shared look. Colors and fonts follow the approved "Blondify Portal Look" design. Brand-specific colors live in the --brand-* variables so a second brand (Brunettify) can re-theme them later. */ :root { --ground: #FBF7FD; --ink: #3B2A55; --ink-2: #4A3968; --muted: #6B5A86; --line: #EADFF6; --line-strong: #DCCFF0; --card: rgba(255, 255, 255, 0.86); --brand-primary: #6E57A8; --brand-primary-ink: #FFFFFF; --brand-blush: #F7D5E8; --brand-blush-ink: #6B4A62; --brand-blush-icon: #8C3F6E; --brand-sky: #D9E8F8; --brand-lilac: #E3D9F7; --brand-gold: #C9A55C; --tint-pink: #FCEAF3; --tint-blue: #E9F1FB; --tint-lilac: #F1ECFA; /* Homepage tile pastels: background / icon / text */ --tile-pink: #F9DDE9; --tile-pink-icon: #A2507E; --tile-pink-ink: #6E5866; --tile-sky: #DCE8F8; --tile-sky-icon: #4F72A0; --tile-sky-ink: #56606E; --tile-lilac: #E7DDF8; --tile-lilac-icon: #6E57A8; --tile-lilac-ink: #5F5870; --tile-mint: #DCF0E8; --tile-mint-icon: #3F8467; --tile-mint-ink: #4F6359; --tile-peach: #FCE4D8; --tile-peach-icon: #B0674A; --tile-peach-ink: #6E5A50; --tile-aqua: #C9ECEA; --tile-aqua-icon: #2A787A; --tile-aqua-ink: #4A6465; --tile-butter: #FAF0D2; --tile-butter-icon: #A07F26; --tile-butter-ink: #685D3E; --danger: #A33A5E; --ok: #1F7A63; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --radius-lg: 28px; --radius-md: 20px; --radius-sm: 14px; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; } body { background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.45; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--brand-primary); } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid #C9B6F1; outline-offset: 2px; } .glow { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .glow-pink { top: -220px; right: -160px; width: 560px; height: 480px; background: var(--brand-blush); opacity: .6; } .glow-blue { top: 240px; left: -260px; width: 520px; height: 480px; background: var(--brand-sky); opacity: .7; } .glow-lilac { bottom: -240px; right: 10%; width: 520px; height: 420px; background: var(--brand-lilac); opacity: .6; } .app { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 20px 16px 64px; } @media (min-width: 720px) { .app { padding: 24px 32px 72px; } } .loading { color: var(--muted); padding: 40px 0; text-align: center; } /* ---------- type ---------- */ .eyebrow { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; color: #7D6C98; margin: 0; } .display { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: 1.06; } .display em { font-style: italic; color: var(--brand-primary); } h1.display { font-size: clamp(34px, 6vw, 52px); } h2.display { font-size: 24px; } .muted { color: var(--muted); } .small { font-size: 13px; } /* ---------- top bar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; } .topbar .logo { width: 132px; height: auto; display: block; } @media (min-width: 720px) { .topbar .logo { width: 170px; } } .topbar-right { display: flex; align-items: center; gap: 10px; } .avatar-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #E2D4F3; background: #fff; color: var(--brand-primary); font-weight: 600; font-size: 14px; cursor: pointer; } .segmented { display: flex; background: #fff; border: 1px solid #E2D4F3; border-radius: 999px; padding: 4px; gap: 2px; } .seg { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; } .seg[aria-pressed="true"] { background: var(--brand-blush); color: var(--ink); font-weight: 600; } @media (min-width: 720px) { .seg { padding: 0 16px; font-size: 14px; } } @media (max-width: 520px) { .topbar { gap: 8px; } .topbar .logo { width: 104px; } .topbar-right { gap: 6px; } .segmented { padding: 3px; } .seg { padding: 0 10px; font-size: 12.5px; min-height: 38px; } } @media (max-width: 380px) { /* Smallest phones: the view switch gets its own row under the logo. */ .topbar { flex-wrap: wrap; } .topbar-right { display: contents; } .topbar .menu { order: 2; } .segmented { order: 3; width: 100%; } .seg { flex: 1; } } .menu { position: relative; } .menu-panel { position: absolute; right: 0; top: 52px; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 18px 40px rgba(110, 87, 168, .14); padding: 8px; z-index: 20; } .menu-panel p { margin: 6px 10px 10px; } .menu-panel button { width: 100%; text-align: left; } .demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 18px; } /* ---------- buttons & pills ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--brand-primary); color: var(--brand-primary-ink); } .btn-primary:hover { filter: brightness(1.06); } .btn-ghost { background: #fff; color: var(--ink-2); border-color: #E2D4F3; } .btn-ghost:hover { border-color: var(--brand-primary); } .btn-danger { background: #fff; color: var(--danger); border-color: #EBC5D3; } .btn-plain { background: transparent; border: 0; color: var(--ink-2); padding: 0 12px; font-weight: 500; } .btn[disabled] { opacity: .55; cursor: not-allowed; } .pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #E2D4F3; background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; } .pill[aria-pressed="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 600; } .chip { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: var(--muted); background: var(--tint-lilac); border-radius: 999px; padding: 4px 9px; } /* ---------- cards & layout ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; } .stack { display: flex; flex-direction: column; gap: 10px; } .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .spread { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; } .split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; } .split > .main { flex: 999 1 540px; min-width: 0; } .split > .side { flex: 1 1 300px; min-width: 0; } /* ---------- sign in ---------- */ .signin { min-height: calc(100vh - 90px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; } .signin .logo { width: min(320px, 82vw); height: auto; } .signin-tag { display: flex; align-items: center; gap: 10px; } .signin-tag span.rule { width: 28px; height: 1px; background: var(--brand-gold); } .signin form, .signin .sent { width: min(420px, 100%); background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 18px 40px rgba(110, 87, 168, .12); } .signin h1 { font-size: 30px; } .signin-foot { text-align: center; font-size: 12px; color: var(--muted); } .signin-foot .eyebrow { font-size: 11px; margin-top: 4px; } /* ---------- forms ---------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field label, .field .label { font-size: 13px; font-weight: 600; color: var(--ink-2); } .input, select.input, textarea.input { min-height: 48px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 14px; background: #fff; font-size: 16px; width: 100%; } textarea.input { min-height: 96px; resize: vertical; } .input[readonly], .input:disabled { background: #F7F3FB; color: var(--muted); } .checks { display: flex; flex-wrap: wrap; gap: 8px; } .check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: #FAF6FE; border: 1px solid var(--line); font-size: 14px; cursor: pointer; } .check input { width: 18px; height: 18px; accent-color: var(--brand-primary); margin: 0; } .check:has(input:disabled) { cursor: not-allowed; opacity: .7; } .error { color: var(--danger); font-size: 14px; margin: 0; } .hint { font-size: 12px; color: var(--muted); margin: 0; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; } .form-section { display: flex; flex-direction: column; gap: 16px; padding: 22px 0; border-top: 1px solid #F0E8F7; } .form-section:first-of-type { border-top: 0; padding-top: 0; } .form-section h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin: 0; } /* ---------- homepage ---------- */ .hero { margin-bottom: 30px; } .hero .stack { gap: 8px; } .scope { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } @media (min-width: 900px) { .scope { align-items: flex-end; } } .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 720px) { .tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } } .tile { border-radius: 24px; padding: 18px 16px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; } .tile .tile-top { display: flex; justify-content: space-between; align-items: flex-start; color: var(--brand-primary); } .tile .name { font-family: var(--font-display); font-size: 20px; display: block; } .tile .desc { font-size: 13px; color: var(--muted); } a.tile.live { background: var(--brand-blush); border-color: var(--brand-blush); } a.tile.live .tile-top { color: var(--brand-blush-icon); } a.tile.live .desc { color: var(--brand-blush-ink); } a.tile.live:hover { box-shadow: 0 12px 28px rgba(140, 63, 110, .16); } .big-number { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--brand-primary); } .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .stat { border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; } .stat b { font-size: 20px; } .stat span { font-size: 12px; } .stat.pink { background: var(--tint-pink); } .stat.pink span { color: var(--brand-blush-ink); } .stat.blue { background: var(--tint-blue); } .stat.blue span { color: #3F5878; } .stat.lilac { background: var(--tint-lilac); } .stat.lilac span { color: #5A4878; } .people { max-height: 320px; overflow-y: auto; border-top: 1px solid #F0E8F7; } .person-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F0E8F7; font-size: 14px; } .person-row .meta { color: var(--muted); font-size: 12px; text-align: right; } /* ---------- employees ---------- */ .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0; } .search { position: relative; flex: 1 1 240px; } .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); } .search .input { padding-left: 42px; } .list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .list-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 0; border-bottom: 1px solid #F0E8F7; background: transparent; text-align: left; width: 100%; color: inherit; text-decoration: none; min-height: 64px; } .list-row:last-child { border-bottom: 0; } a.list-row:hover { background: #FDF6FB; } .list-row .who { flex: 1 1 auto; min-width: 0; } .list-row .who b { display: block; font-weight: 600; } .list-row .who span { font-size: 13px; color: var(--muted); } .list-row .right { font-size: 13px; color: var(--muted); text-align: right; flex-shrink: 0; } .face { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--tint-lilac); color: var(--brand-primary); font-weight: 600; font-size: 14px; } .face.ev { background: var(--tint-pink); color: #8C3F6E; } .face.wb { background: var(--tint-blue); color: #3F5878; } .empty { padding: 28px; text-align: center; color: var(--muted); } .back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-weight: 500; min-height: 44px; } .sticky-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid #F0E8F7; } .confirm { background: #FFF5F8; border: 1px solid #EBC5D3; border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 10px; } .history { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; transition: .25s; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; z-index: 50; max-width: calc(100% - 32px); } .toast { display: flex; align-items: center; gap: 8px; } .toast .star-mascot { flex: none; margin: -4px 0 -4px -6px; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast-error { background: var(--danger); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- photos ---------- */ .face-img { object-fit: cover; display: block; padding: 0; background: var(--tint-lilac); } .avatar-btn { overflow: hidden; padding: 0; display: grid; place-items: center; } .avatar-btn .face-img { width: 100%; height: 100%; } .person-row { align-items: center; } .photo-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .photo-box.busy { opacity: .6; pointer-events: none; } .photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; } .btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; } /* ---------- work hours ---------- */ .hours-card { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; } .week-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .week-label { font-weight: 600; color: var(--ink-2); min-width: 170px; text-align: center; } .icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #E2D4F3; background: #fff; color: var(--ink-2); display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0; } .icon-btn.flip svg { transform: scaleX(-1); } .days { display: flex; flex-direction: column; gap: 8px; } .day { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; } .day-label { display: flex; flex-direction: column; line-height: 1.2; font-size: 14px; } .day-label span { color: var(--muted); font-size: 13px; } .shift { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 6px 0 16px; border-radius: 16px; background: var(--tint-lilac); font-size: 15px; } .shift > span:first-child { flex: 1 1 auto; } .shift.none { background: #F6F3F9; color: var(--muted); } .shift .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .shift .icon-btn { border: 0; background: transparent; } .chip-changed { background: #FCEAF3; color: #8C3F6E; } .day-editor { grid-column: 1 / -1; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; } .time-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .time-row > .input { width: auto; flex: 1 1 130px; } @media (max-width: 520px) { .shift { font-size: 14px; padding-left: 12px; } .shift .tags .chip { font-size: 10px; padding: 3px 7px; } } /* ---------- pop-up dialogs ---------- */ .hours-section { gap: 14px; } .dialog { border: 0; border-radius: 24px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 30px 80px rgba(59, 42, 85, .25); color: var(--ink); background: #fff; } .dialog::backdrop { background: rgba(43, 32, 58, .45); } .dialog-x { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; } .dialog-body { padding: 36px 28px 28px; display: flex; flex-direction: column; gap: 18px; } .dialog-title { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 0; text-align: center; padding: 0 24px; } .dialog-sub { margin: 0; text-align: center; color: var(--muted); font-size: 14px; } .choices { display: flex; flex-direction: column; gap: 12px; } .choice { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 22px 16px; min-height: 88px; border: 1.5px solid var(--line-strong); border-radius: 18px; background: #fff; cursor: pointer; font-size: 16px; color: var(--ink); } .choice b { font-size: 17px; } .choice span { color: var(--muted); font-size: 14px; } .choice:hover { border-color: var(--brand-primary); background: #FDF8FF; } .dialog-actions { display: flex; gap: 10px; justify-content: center; } .dialog-actions .btn { min-width: 130px; } .switch-row { display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 500; } .switch { width: 52px; height: 30px; border-radius: 999px; border: 0; background: #DCD3EA; position: relative; cursor: pointer; padding: 0; flex-shrink: 0; } .switch .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .switch[aria-checked="true"] { background: var(--brand-primary); } .switch[aria-checked="true"] .knob { left: 25px; } .time-row .field { flex: 1 1 140px; } /* ---------- Weekly Roundup ---------- */ .roundup-week { justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px; } .roundup-week b { font-family: var(--font-display); font-weight: 400; font-size: 20px; } .upload-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; padding: 26px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--tint-lilac); color: var(--brand-primary); } .upload-drop b { color: var(--ink); font-size: 16px; } .upload-drop.over, .upload-drop:hover { background: var(--tint-pink); border-color: var(--brand-primary); } .upload-drop[hidden] { display: none; } #roundup-files:focus-visible + .upload-drop { outline: 2px solid var(--brand-primary); outline-offset: 2px; } .upload-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .upload-results:empty { display: none; } .upload-results li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; background: var(--tint-blue); overflow-wrap: anywhere; } .upload-results li b { font-weight: 600; } .upload-results li.ok { background: #E7F4EF; } .upload-results li.bad { background: #FBE8EF; color: var(--danger); } .upload-results li .btn { align-self: flex-start; margin-top: 4px; } .checks-list { list-style: none; margin: 8px 0 0; padding: 0; } .checks-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #F0E8F7; } .checks-list .tick { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 14px; color: #fff; } .checks-list li.done .tick { background: var(--ok); border-color: var(--ok); } .checks-list .what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .checks-list .what b { font-weight: 600; font-size: 14px; } .checks-list .what span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; } .chip-ok { background: #E7F4EF; color: var(--ok); } .names-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .names-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #F0E8F7; } .names-list select.input { min-width: 0; width: auto; max-width: 220px; } .agree-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .agree-list li { padding: 10px 12px 10px 36px; border-radius: var(--radius-sm); font-size: 14px; position: relative; } .agree-list li::before { position: absolute; left: 12px; top: 10px; font-weight: 700; } .agree-list li.ok { background: #E7F4EF; } .agree-list li.ok::before { content: '✓'; color: var(--ok); } .agree-list li.bad { background: #FBE8EF; color: var(--danger); } .agree-list li.bad::before { content: '!'; } .agree-list li.info { background: var(--tint-blue); } .agree-list li.info::before { content: 'i'; color: var(--brand-primary); font-style: italic; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; } .table-wrap:focus-visible { outline: 2px solid var(--brand-primary); } table.numbers { border-collapse: collapse; font-size: 13px; min-width: 100%; } table.numbers th, table.numbers td { padding: 9px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid #F3EDF9; vertical-align: top; } table.numbers thead th { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--tint-lilac); white-space: normal; min-width: 76px; vertical-align: bottom; } table.numbers th[scope=row], table.numbers thead th:first-child { text-align: left; position: sticky; left: 0; background: #fff; font-weight: 600; z-index: 1; } table.numbers thead th:first-child { background: var(--tint-lilac); } table.numbers td small { display: block; color: var(--muted); font-size: 11px; } table.numbers tbody tr:last-child th, table.numbers tbody tr:last-child td { border-bottom: 0; } .loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .loc-box { border-radius: var(--radius-md); background: var(--tint-pink); padding: 16px; } .loc-box:nth-child(2n) { background: var(--tint-blue); } .loc-box dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 10px 0 0; font-size: 14px; } .loc-box dt { color: var(--muted); } .loc-box dd { margin: 0; font-weight: 600; text-align: right; } /* sign-in code */ .signin .sent form { width: 100%; background: none; border: 0; padding: 0; box-shadow: none; } .code-input { font-size: 24px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; } .readonly-value { margin: 0; padding: 12px 0 2px; font-weight: 600; overflow-wrap: anywhere; } /* goals & targets */ .input-num { width: 92px; min-width: 0; padding: 8px 10px; text-align: right; font-variant-numeric: tabular-nums; } .num-wrap { display: inline-flex; align-items: center; gap: 4px; } .num-wrap[data-unit]::after { content: attr(data-unit); color: var(--muted); font-size: 12px; min-width: 10px; } .num-wrap[data-unit="$"]::after { content: none; } .num-wrap[data-unit="$"]::before { content: '$'; color: var(--muted); font-size: 12px; } table.targets th[scope=row] { white-space: normal; min-width: 150px; max-width: 190px; font-weight: 500; } table.people-goals th[scope=row] small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; } table.numbers td .input-num { margin: -6px 0; } .loc-total { margin: 4px 0 0; font-size: 15px; } .loc-box.loc-both, .loc-box.loc-both:nth-child(2n) { background: var(--tint-lilac); border: 1px solid var(--line-strong); } /* goal rings (like the Fitness rings) */ :root { --ring-salon: var(--brand-primary); --ring-salon-lap: #4B3880; --ring-own: #D0588F; --ring-own-lap: #9E2F63; --ring-track-alpha: .16; } .rings { position: relative; flex: none; } .rings svg { display: block; } .ring-track { stroke: currentColor; opacity: var(--ring-track-alpha); } .ring-salon { color: var(--ring-salon); } .ring-own { color: var(--ring-own); } .ring-fill { stroke: currentColor; animation: ring-in .9s ease-out both; } .ring-salon .ring-lap { stroke: var(--ring-salon-lap); } .ring-own .ring-lap { stroke: var(--ring-own-lap); } .ring-lap { animation: ring-in .6s .8s ease-out both; filter: drop-shadow(0 0 1.5px rgba(40, 20, 60, .45)); } @keyframes ring-in { from { stroke-dasharray: 0.001 var(--circ); } to { stroke-dasharray: var(--len) var(--circ); } } @media (prefers-reduced-motion: reduce) { .ring-fill, .ring-lap { animation: none; } } .rings-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; } .rings-center strong { font-family: var(--font-display); font-weight: 600; color: var(--ink); } .rings-center span { font-size: 10px; color: var(--muted); max-width: 52px; } .ring-legend { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; font-size: 14px; } .ring-legend .dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; } .ring-legend-label { color: var(--ink); } .ring-legend-value { font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; } .closed-badge { color: var(--ok); } .ring-card { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; } .ring-card > .stack { flex: 1 1 220px; min-width: 0; } .day-bar { display: grid; gap: 6px; } .day-bar-track { position: relative; height: 12px; border-radius: 999px; background: var(--tint-lilac); } .day-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--brand-gold); transition: width .8s ease-out; } .day-bar-fill.hit { background: var(--ok); } .day-bar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ring-salon); border-radius: 2px; } .day-bar-mark.own { background: var(--ring-own); } .week-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; } .week-strip figure { margin: 0; display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--muted); flex: none; } .week-strip figure.closed figcaption { color: var(--ok); font-weight: 600; } .mini-ring { display: inline-flex; align-items: center; gap: 8px; } .mini-ring .rings-center strong { font-family: var(--font-body); font-size: 10px !important; } .live-rings { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 18px; } .live-ring { margin: 0; display: grid; justify-items: center; gap: 8px; } .live-ring figcaption { display: grid; justify-items: center; font-size: 13px; color: var(--muted); } .live-ring figcaption strong { color: var(--ink); font-size: 15px; } /* close the week */ .entry-notes { min-width: 200px; width: 100%; min-height: 38px; resize: vertical; padding: 8px 10px; font: inherit; font-size: 13px; } table.entry-table td.notes-cell { text-align: left; min-width: 220px; white-space: normal; } table.entry-table .up { color: var(--ok); } table.entry-table .down { color: var(--danger); } .entry-locs .field { flex: 1 1 180px; } @media (max-width: 640px) { /* Close the week: one small card per person instead of a wide table */ table.entry-table, table.entry-table tbody, table.entry-table tr, table.entry-table td, table.entry-table th { display: block; width: 100%; } table.entry-table thead { display: none; } table.entry-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); } table.entry-table th[scope=row] { position: static; padding: 0 0 6px; font-size: 15px; } table.entry-table td { border: 0; padding: 4px 0; text-align: left; white-space: normal; } table.entry-table td:nth-child(2)::before { content: 'This week: '; color: var(--muted); } table.entry-table td:nth-child(2) small { display: inline; margin-left: 6px; } table.entry-table td:nth-child(3)::before { content: 'Forecast next week'; display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; } table.entry-table td .input-num { margin: 0; } table.entry-table td.notes-cell { min-width: 0; } .entry-table-wrap, .table-wrap:has(> table.entry-table) { overflow: visible; } } .entry-notes.input { height: 40px; } .roundup-tabs { width: fit-content; max-width: 100%; margin-top: 14px; } .roundup-tabs .seg { display: inline-flex; align-items: center; text-decoration: none; } .targets-details summary { cursor: pointer; list-style-position: inside; } table.people-goals td.goal-main { font-weight: 700; color: var(--ink); } /* goals tab spacing */ table.people-goals th, table.people-goals td { padding: 12px 16px; vertical-align: middle; } table.people-goals td small { margin-top: 6px; line-height: 1.35; white-space: normal; max-width: 170px; margin-left: auto; } table.people-goals .input-num { width: 72px; margin: 0 !important; } table.people-goals .num-wrap[data-unit=""]::after { content: none; } .day-checks { display: grid; gap: 6px; margin: 12px 0; } .day-check { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; } .day-check input { width: 20px; height: 20px; accent-color: var(--brand-primary); } .closed-note { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: #E7F4EF; color: var(--ok); font-weight: 600; } .goals-pill { border-radius: 999px; } /* My Roundup */ .report-card .hello { font-size: clamp(30px, 6vw, 40px); color: #A8659A; margin: 0; } .star-count { font-weight: 600; color: var(--ink); white-space: nowrap; } .stars { display: grid; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .star-row { display: grid; grid-template-columns: 1fr minmax(120px, 42%); gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 14px; } .star-row:first-child { border-top: 0; } .star-row .star-a { color: var(--muted); text-align: right; } .star-row.hit .star-a { color: var(--ink); font-weight: 600; } .num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .num { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--tint-lilac); } .num-label { font-size: 12px; color: var(--muted); } .num strong { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--ink); } .num-sub { font-size: 11px; color: var(--muted); } .manager-note { margin: 0; white-space: pre-wrap; line-height: 1.5; } .trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .trend { margin: 0; display: grid; gap: 6px; } .trend figcaption { font-weight: 600; font-size: 14px; } .trend-plot { position: relative; } .trend-svg { width: 100%; height: auto; display: block; touch-action: pan-y; } .trend-grid line, .trend-grid-line { stroke: var(--line); } .trend-svg .trend-grid { stroke: var(--line); stroke-width: 1; } .trend-axis { font-size: 10px; fill: var(--muted); font-family: var(--font-body); } .trend-line { fill: none; stroke: var(--brand-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .trend-goal { fill: none; stroke: #6FD3A8; stroke-width: 2; stroke-dasharray: 5 4; } /* her goal: bright light green */ .trend-dot { fill: var(--brand-primary); stroke: #fff; stroke-width: 2; } .trend-dot.hit { fill: var(--ok); } .trend-cross { stroke: var(--muted); stroke-width: 1; opacity: .5; } .trend-tip { position: absolute; top: 0; transform: translateX(-50%); display: grid; gap: 1px; padding: 6px 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(59, 42, 85, .12); pointer-events: none; white-space: nowrap; } .trend-key { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .key-line { width: 16px; height: 2px; background: var(--brand-primary); display: inline-block; } .key-goal { width: 16px; border-top: 2px dashed #6FD3A8; display: inline-block; margin-left: 8px; } .trend-tip[hidden] { display: none; } @media (max-width: 520px) { .num-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .num { padding: 10px 12px; } .num strong { font-size: 18px; } .star-row { grid-template-columns: 1fr; gap: 4px; } .star-row .star-a { text-align: left; } } /* this week's rings on home */ :root { --ring-treat: #D0588F; --ring-treat-lap: #9E2F63; --ring-prebook: #4C86C9; --ring-prebook-lap: #24578F; } .ring-treat { color: var(--ring-treat); } .ring-prebook { color: var(--ring-prebook); } .ring-treat .ring-lap { stroke: var(--ring-treat-lap); } .ring-prebook .ring-lap { stroke: var(--ring-prebook-lap); } .week-rings { display: grid; gap: 12px; } .week-rings h2 { font-size: 22px; margin: 0; } .trend-forecast { fill: none; stroke: var(--brand-gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .9; } .key-forecast { width: 16px; height: 2px; background: var(--brand-gold); display: inline-block; margin-left: 8px; } .trend { position: relative; min-width: 0; } .trend table.visually-hidden { display: block; position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .week-strip .off-tag { color: var(--muted); font-style: italic; } /* letter grades */ .grade { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; margin-right: 10px; font-weight: 700; font-size: 14px; vertical-align: middle; flex: none; } .star-q { display: flex; align-items: flex-start; gap: 0; } /* Grade letters keep their own pastel colors (Britt liked them); numbers use green / amber / red. */ .grade-A { background: #DDF1E8; color: #17664F; } .grade-B { background: #E3ECFA; color: #24578F; } .grade-C { background: #FBF0D9; color: #7A5A12; } .grade-D { background: #FBE4D6; color: #8A3F12; } .grade-F { background: #F8DDE6; color: #8C2346; } .grade-none { background: var(--tint-lilac); color: var(--muted); } .grade-big { display: grid; justify-items: center; padding: 8px 14px; border-radius: 14px; line-height: 1; } .grade-big span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } .grade-big strong { font-family: var(--font-display); font-size: 40px; margin-top: 4px; } .grade-note { display: block; margin-top: 2px; } .star-q { flex-wrap: wrap; } .star-q .grade-note { flex-basis: 100%; padding-left: 36px; } /* team report cards */ .grade-dist { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 600; } .grade-dist .grade { margin-right: 4px; } .attention { padding: 12px 14px; border-radius: var(--radius-sm); background: #FDF1F5; border: 1px solid #F3D3DF; } .attention ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; } table.grades-table td { text-align: center; } table.grades-table td .grade { margin: 0; } table.grades-table small.pattern { display: block; color: #8C2346; font-size: 10px; margin-top: 2px; } table.grades-table tr.off-row th, table.grades-table tr.off-row td { opacity: .55; } table.grades-table th[scope=row] a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } table.grades-table th[scope=row] small { display: block; font-weight: 400; color: var(--muted); } .week-strip .week-link { text-decoration: none; color: inherit; border-radius: 12px; } .week-strip .week-link:hover figure { opacity: .8; } .week-strip .week-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* trend line on graphs */ /* Trend: the original dotted grey, just a bit darker (Britt, Oct 27). */ .trend-svg line.trend-fit, .trend-fit { stroke: #8E8299; stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; opacity: 1; } .key-fit { width: 16px; border-top: 2px dotted #8E8299; opacity: 1; display: inline-block; margin-left: 8px; } .trend-dir { font-size: 12px; font-weight: 600; white-space: nowrap; } .trend-dir.up { color: #2E7D4F; } .trend-dir.down { color: #B23A48; } .trend-dir.steady { color: var(--muted); } .trend-avg { color: var(--ink, inherit); } /* Close the week: one card per person (grades right above the note) */ .person-list { display: grid; gap: 12px; } .person-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); display: grid; gap: 8px; } .person-card.off { opacity: .7; } .person-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .person-name { font-weight: 700; font-size: 16px; } .person-overall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .person-overall .grade { margin-right: 0; } .person-grades { display: flex; flex-wrap: wrap; gap: 6px 12px; } .person-grade { display: inline-flex; align-items: center; font-size: 13px; } .person-grade .grade { width: 22px; height: 22px; font-size: 12px; margin-right: 5px; border-radius: 6px; } .person-needs { margin: 0; font-size: 13px; background: #FCEDEF; color: #7A2333; border-radius: 10px; padding: 8px 10px; } .person-inputs { display: grid; grid-template-columns: 1fr 180px; gap: 10px; align-items: end; } .person-inputs textarea { min-height: 64px; } @media (max-width: 520px) { .person-inputs { grid-template-columns: 1fr; } } details.fold > summary { cursor: pointer; font-weight: 600; color: var(--brand-primary); padding: 6px 0; } .nudge { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; background: #FFF6E5; color: #6B4A12; border-radius: 10px; padding: 8px 10px; } .btn-small { padding: 4px 10px; font-size: 13px; min-height: 0; } .send-box { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 14px; } .how-goals .rule h3 { font-size: 15px; margin: 4px 0 2px; color: var(--ink); } .how-goals .rule p { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); } .how-goals .rule { border-top: 1px solid var(--line); padding-top: 10px; } .starter-note { margin: 0; font-size: 13px; background: #EAF6EE; color: #1E5C38; border-radius: 10px; padding: 8px 10px; } .level-line { display: grid; grid-template-columns: 18px auto 1fr; gap: 4px 8px; align-items: baseline; font-size: 14px; } .level-line > span:first-child { color: var(--muted); } .level-line.ok > span:first-child { color: #1E6B3F; font-weight: 700; } .level-line .muted { grid-column: 2 / -1; font-size: 13px; } .level-line strong { justify-self: end; } .level-status { margin: 0; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: var(--ground); } .level-status.ok { background: #EAF6EE; color: #1E5C38; font-weight: 600; } .in-roundup { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 400; margin-top: 4px; color: var(--muted); } .person-card.compact { background: transparent; border-style: dashed; } .person-card.compact .person-forecast { max-width: 220px; } .booked-note { display: block; margin-top: 4px; font-size: 12px; } .person-card .up, .booked-note.up { color: var(--ok); } .person-card .down, .booked-note.down { color: var(--danger); } .forecast-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; flex-wrap: wrap; } .forecast-line .up { color: var(--ok); } .forecast-line .down { color: var(--danger); } .forecast-adjust { margin-top: 6px; max-width: 180px; } .person-inputs { grid-template-columns: 1fr; } .ok-text { color: var(--ok); } .bad-text { color: var(--danger); } /* Salon report cards (management) */ .salon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .salon-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(255,255,255,.6); min-width: 0; } .salon-bar { position: relative; height: 12px; border-radius: 999px; background: var(--brand-lilac); overflow: visible; } .salon-bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--brand-primary); } .salon-bar .fill.under { background: #B5475F; } .salon-bar .floor-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .7; } .salon-bar-sm { height: 6px; } .salon-bar .fill.retail { background: var(--brand-gold, #C9A24B); } .salon-warn { color: #8E2F45; font-size: 13px; font-weight: 600; } .salon-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; } .salon-stats dt { color: var(--muted); } .salon-stats dd { margin: 0; text-align: right; } .salon-flags { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); } .gaps { border-top: 1px solid var(--line); padding-top: 10px; } .gaps summary { cursor: pointer; } .gap-steps { margin: 8px 0 0; padding-left: 20px; font-size: 14px; display: grid; gap: 6px; } .chair-days { display: grid; gap: 4px; margin-top: 4px; } .chair-day { display: grid; grid-template-columns: 34px 1fr 64px; align-items: center; gap: 8px; font-size: 13px; } .chair-track { position: relative; height: 10px; border-radius: 999px; background: var(--brand-lilac); } .chair-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--brand-primary); } .chair-fill.quiet { background: #C9A55C; } .chair-cap { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .6; } /* Weekly Roundup tabs */ .roundup-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .roundup-tabs::-webkit-scrollbar { display: none; } .tab-pill { white-space: nowrap; flex: 0 0 auto; } .tab-badge { margin-left: 4px; font-size: 12px; } /* Reports → Team year */ .year-table td.yr-cell { text-align: right; } .yr-good { background: #E3F4E8; color: #1E5C38; } .yr-close { background: #FBF1D9; color: #6B4A12; } .yr-low { background: #FBE3EA; color: #8E2F45; } .linkish { background: none; border: 0; padding: 0; color: var(--brand-primary); font: inherit; font-weight: 600; cursor: pointer; text-align: left; } .yoy-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .yoy-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; } .yoy-tile b { font-size: 20px; } .yoy { font-weight: 600; white-space: nowrap; } .yoy-up { color: #1E6B3F; } .yoy-down { color: #9B2C46; } .yr-prev { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; } .yoy-chart .yoy-now { stroke: var(--brand-primary); stroke-width: 2.5; } .yoy-chart .yoy-prev { stroke: #A79BC4; stroke-width: 2; stroke-dasharray: 5 4; } .yoy-chart .yoy-now-dot { fill: var(--brand-primary); stroke: #fff; stroke-width: 2; } .yoy-chart .yoy-prev-dot { fill: #A79BC4; stroke: #fff; stroke-width: 2; } .yoy-legend { display: flex; gap: 14px; margin-top: 4px; color: var(--muted); } .yoy-legend .sw { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--brand-primary); vertical-align: middle; margin-right: 6px; } .yoy-legend .sw-prev { border-top: 2px dashed #A79BC4; } .year-table th[scope="row"] { position: sticky; left: 0; background: var(--card, #fff); z-index: 1; } .yoy-chart .yoy-now { stroke-width: 1.75; } .yoy-chart .yoy-prev { stroke-width: 1.25; } .yoy-chart .yoy-now-dot, .yoy-chart .yoy-prev-dot { stroke-width: 1; } .score-list { display: grid; border-top: 1px solid var(--line); } .score-row { border-bottom: 1px solid var(--line); } .score-head { width: 100%; display: grid; grid-template-columns: 1fr auto 84px; grid-template-areas: "label now spark" "prev prev spark"; gap: 2px 10px; align-items: center; background: none; border: 0; padding: 10px 2px; text-align: left; font: inherit; color: inherit; cursor: pointer; } .score-label { grid-area: label; font-weight: 600; font-size: 14px; } .score-label small { font-weight: 400; color: var(--muted); } .score-now { grid-area: now; font-weight: 700; font-size: 16px; padding: 1px 8px; border-radius: 8px; justify-self: end; } .score-prev { grid-area: prev; font-size: 12px; color: var(--muted); } .spark { grid-area: spark; width: 84px; height: 26px; } .spark-now { fill: none; stroke: var(--brand-primary); stroke-width: 1.5; } .spark-prev { fill: none; stroke: #A79BC4; stroke-width: 1; stroke-dasharray: 3 2; } .score-row.open { background: rgba(227, 217, 247, .25); } .score-row.open .yoy-chart { padding: 0 4px 10px; } .yoy-wrap { position: relative; } .yoy-tip { position: absolute; top: 4px; width: auto; min-width: 110px; white-space: nowrap; background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.5; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .yoy-tip .sw { display: inline-block; width: 12px; height: 0; border-top: 2px solid #fff; vertical-align: middle; margin-right: 6px; } .yoy-tip .sw-prev { border-top: 2px dashed #CFC6E6; } .yoy-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; } .yoy-ring { fill: none; stroke: var(--brand-primary); stroke-width: 1.5; } .yoy-weeks summary { cursor: pointer; font-size: 13px; color: var(--brand-primary); font-weight: 600; margin-top: 6px; } .yoy-weeks table { margin-top: 6px; } .yoy-tip-head { font-weight: 600; opacity: .8; margin-bottom: 2px; } /* One-on-one charts: never taller than ~220px or wider than 720px; lines stay thin at any size. */ .yoy-chart { max-width: none; } .yoy-chart .trend-svg { max-height: 240px; width: 100%; } .yoy-chart path, .yoy-chart line, .yoy-chart circle { vector-effect: non-scaling-stroke; } .yoy-chart .yoy-now { stroke-width: 1.5; } .yoy-chart .yoy-prev { stroke-width: 1.25; } .yoy-chart .trend-axis { font-size: 11px; } .spark path { vector-effect: non-scaling-stroke; } .yoy-chart .yoy-goal { stroke: var(--brand-gold); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: .9; } .yoy-legend .sw-goal, .yoy-tip .sw-goal { border-top: 2px dashed var(--brand-gold); } /* Last year: a clearly different color (teal), solid, so it reads at a glance */ .yoy-chart .yoy-prev { stroke: #1F8A8A; stroke-width: 1.5; stroke-dasharray: none; opacity: .9; } .yoy-chart .yoy-prev-dot { fill: #1F8A8A; } .yoy-legend .sw-prev, .yoy-tip .sw-prev { border-top: 2px solid #1F8A8A; } .spark-prev { stroke: #1F8A8A; stroke-dasharray: none; opacity: .7; } .side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 760px) { .side-by-side { grid-template-columns: 1fr; } } .yoy-chart .trend-svg { max-height: 280px; } .yoy-chart .month-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; } .yoy-chart .pt-label { font-size: 9.5px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; } .yoy-chart .pt-now { fill: var(--brand-primary); } .yoy-chart .pt-prev { fill: #1F8A8A; } /* Consultations inbox */ .consult-list { display: grid; gap: 10px; } .consult-row { display: grid; gap: 4px; text-decoration: none; color: inherit; padding: 16px 18px; } .consult-row:hover { border-color: var(--line-strong); } .status-new { background: var(--brand-blush); color: var(--brand-blush-ink); } .status-contacted { background: var(--brand-sky); color: var(--ink); } .status-booked { background: #E7F4EF; color: var(--ok); } .status-requested { background: #FFF4D6; color: #7A5A00; } .status-closed { background: var(--line); color: var(--muted); } .consult-flag { background: #FBEAF0; color: var(--danger); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0; } .consult-contact, .consult-answers { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px 14px; margin: 0; } .consult-contact dt, .consult-answers dt { color: var(--muted); font-size: 14px; } .consult-contact dd, .consult-answers dd { margin: 0; overflow-wrap: anywhere; } .consult-answers ul { margin: 0; padding-left: 18px; } .consult-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .consult-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .consult-photos a { display: grid; gap: 4px; text-decoration: none; } .consult-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); } .consult-photo-missing { aspect-ratio: 3 / 4; display: grid; place-items: center; background: var(--tint-lilac); border-radius: var(--radius-sm); } @media (max-width: 560px) { .consult-contact, .consult-answers { grid-template-columns: 1fr; gap: 2px; } .consult-answers dd { margin-bottom: 10px; } .consult-actions { grid-template-columns: 1fr; } } /* Consultation picks + Investment Table */ .picks .pills { gap: 6px; } .picks .pill { font-size: 13px; padding: 7px 12px; } .picks .pill:disabled { opacity: .45; cursor: not-allowed; } .pill-asked { box-shadow: inset 0 0 0 2px var(--brand-gold); } .picks-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; } .picks-row .field { min-width: 150px; flex: 1; } .picks .check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; min-height: 44px; } .picks textarea, .picks input[type=number] { width: 100%; font: inherit; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; background: #fff; } table.invest { border-collapse: collapse; width: 100%; font-size: 14px; } table.invest th, table.invest td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } table.invest thead th { background: var(--tint-lilac); font-weight: 600; } table.invest td:first-child, table.invest th:first-child { font-weight: 600; } table.invest td:not(:first-child) { white-space: nowrap; } /* Reply draft */ .draft-text { width: 100%; font: inherit; font-size: 15px; line-height: 1.5; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; background: #fff; resize: vertical; } .draft-actions { display: flex; flex-wrap: wrap; gap: 8px; } .draft-askrow { display: flex; gap: 8px; } .draft-ask { flex: 1; min-width: 0; font: inherit; border: 1.5px solid var(--line-strong); border-radius: 99px; padding: 10px 14px; background: #fff; } .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-primary); text-decoration: underline; cursor: pointer; } .chip-urgent { background: #FFF4D6; color: #7A5A00; font-weight: 600; } .price-table { border-collapse: collapse; width: 100%; font-size: 13.5px; } .price-table th, .price-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; } .price-table tbody th { white-space: normal; min-width: 150px; font-weight: 600; } .price-table thead th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--tint-lilac, #F7F3FC); position: sticky; top: 0; } .price-table tr.muted { opacity: .5; } .price-flat { color: var(--ink); } .my-prices { width: 100%; border-collapse: collapse; font-size: 14px; } .my-prices td { padding: 6px 0; border-bottom: 1px solid var(--line); } .my-prices td:not(:first-child), .my-prices th { text-align: right; white-space: nowrap; padding-left: 10px; } .my-prices th { font-size: 11px; white-space: normal !important; line-height: 1.2; font-weight: 600; color: var(--muted, #888); padding-bottom: 4px; } .my-prices td.one, .price-table.my-prices td.one { text-align: center; } .price-table tr.price-group th, .price-table tr.price-group td { border-bottom: 0; padding-bottom: 2px; } .price-table tr.price-variant th { font-weight: 400; padding-left: 22px; color: var(--muted); min-width: 0; } .price-table tr.price-variant td { color: var(--muted); } .price-table tr.price-variant.quoted th, .price-table tr.price-variant.quoted td { color: var(--ink); font-weight: 600; } .price-edit-grid .input { min-width: 64px; padding: 6px 8px; } /* Inventory: spreadsheet view */ main.wide { max-width: 1400px; } .sheet-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; -webkit-overflow-scrolling: touch; } .sheet { border-collapse: separate; border-spacing: 0; font-size: 13px; } .sheet th, .sheet td { padding: 6px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; background: #fff; } .sheet thead th { position: sticky; top: 0; z-index: 2; background: var(--brand-soft, #F6F0FC); font-weight: 600; font-size: 12px; } .sheet .sticky-col { position: sticky; left: 0; z-index: 1; background: #FCFAFE; font-family: ui-monospace, Menlo, monospace; font-size: 12px; } .sheet td.cell-num { text-align: right; font-variant-numeric: tabular-nums; } .sheet td.editable { cursor: text; } .sheet td.editable:hover { background: #FBF7FF; } .sheet td.editable:focus { outline: 2px solid var(--brand-primary); outline-offset: -2px; } .sheet td input { width: 100%; min-width: 60px; border: 0; padding: 0; font: inherit; background: transparent; outline: none; } .sheet td.saved { background: #E7F4EF; transition: background .3s; } .sheet td.reorder { color: var(--danger); font-weight: 600; } .sheet td.neg { color: var(--danger); font-weight: 700; background: #FDF0F3; } .sheet td.muted { color: var(--muted); } .switch-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; } .switch-row.on { background: #FFF4D6; border-color: #F0D58A; color: #7A5A00; } .switch-row input { width: 18px; height: 18px; accent-color: var(--brand-primary); } .pill-count { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: 999px; background: #FDE7EE; color: var(--danger); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .subtabs { align-self: flex-start; max-width: 100%; overflow-x: auto; } /* Star mascots */ .star-mascot { display: inline-block; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(60, 50, 80, .28)) drop-shadow(0 3px 8px rgba(60, 50, 80, .12)); } .star-note { display: flex; align-items: center; gap: 14px; } .star-note .star-mascot { flex: none; } .loading-star { display: flex; align-items: center; gap: 10px; color: var(--muted); } .loading-star .star-mascot { animation: star-bob 1.6s ease-in-out infinite; } @keyframes star-bob { 50% { transform: translateY(-4px) rotate(-6deg); } } @media (prefers-reduced-motion: reduce) { .loading-star .star-mascot { animation: none; } } .hello-star { margin-left: 6px; vertical-align: -6px; } /* Homepage tiles: frosted white cards; each app's colour lives only in its icon circle */ a.tile.live { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgba(60,40,80,.04), 0 8px 24px rgba(110,87,168,.06); } a.tile.live .desc { color: var(--muted); } a.tile.live:hover { box-shadow: 0 2px 4px rgba(60,40,80,.05), 0 14px 32px rgba(110,87,168,.12); } .tile-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; } a.tile.live.tone-pink .tile-icon { background: var(--tile-pink); color: var(--tile-pink-icon); } a.tile.live.tone-sky .tile-icon { background: var(--tile-sky); color: var(--tile-sky-icon); } a.tile.live.tone-lilac .tile-icon { background: var(--tile-lilac); color: var(--tile-lilac-icon); } a.tile.live.tone-mint .tile-icon { background: var(--tile-mint); color: var(--tile-mint-icon); } a.tile.live.tone-peach .tile-icon { background: var(--tile-peach); color: var(--tile-peach-icon); } a.tile.live.tone-butter .tile-icon { background: var(--tile-butter); color: var(--tile-butter-icon); } .tiles .tile:not(.live) { opacity: .62; } /* Faintest wash of pink / lilac / blue on the frosted tiles */ a.tile.live.tone-pink { background: linear-gradient(160deg, rgba(252,234,243,.92), rgba(255,255,255,.7)); } a.tile.live.tone-lilac { background: linear-gradient(160deg, rgba(241,236,250,.95), rgba(255,255,255,.7)); } a.tile.live.tone-sky { background: linear-gradient(160deg, rgba(233,241,251,.95), rgba(255,255,255,.7)); } a.tile.live.tone-butter { background: linear-gradient(160deg, rgba(252,246,226,.95), rgba(255,255,255,.7)); } a.tile.live.tone-aqua { background: linear-gradient(160deg, rgba(223,245,244,.95), rgba(255,255,255,.7)); } a.tile.live.tone-aqua .tile-icon { background: #C9ECEA; color: #2A787A; } /* ---------- in-person consultation: same look as the virtual consultation ---------- */ .jf { max-width: 760px; margin: 0 auto; padding-bottom: 48px; color: var(--ink); } .jf-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-2); text-decoration: none; font-weight: 500; } .jf-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 10px 40px rgba(110, 87, 168, .08); overflow: hidden; } .jf-title { padding: 26px 24px 4px; } .jf-title h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.05; color: var(--ink); } .jf-title h1 em { font-style: italic; color: var(--brand-primary); } .jf-body { padding: 18px 24px 4px; display: flex; flex-direction: column; gap: 22px; } @media (max-width: 600px) { .jf-title { padding: 22px 18px 2px; } .jf-title h1 { font-size: 30px; } .jf-body { padding: 16px 18px 4px; } } .jf-stack { display: flex; flex-direction: column; gap: 12px; } .jf-field { display: flex; flex-direction: column; gap: 8px; } .jf-label { font-weight: 600; color: var(--ink); font-size: 16px; line-height: 1.35; } .jf-label-big { font-size: 16px; } .jf-req { color: var(--danger); } .jf-sub { margin: 0; font-size: 13px; color: var(--muted); } .jf-muted { color: var(--muted); font-size: 13px; } .jf-input { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 48px; } .jf-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-lilac); } .jf-area { min-height: 100px; resize: vertical; } .jf-guest { background: var(--tint-lilac); border-color: transparent; color: var(--ink-2); font-size: 14px; white-space: pre-wrap; min-height: 0; } .jf-guest:empty::before { content: 'No answer online'; color: var(--muted); } .jf-options { display: grid; gap: 8px; } .jf-opt { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; line-height: 1.4; min-height: 48px; font-size: 15px; } .jf-opt input { margin-top: 2px; accent-color: var(--brand-primary); width: 18px; height: 18px; flex: none; } .jf-opt:has(input:checked) { border-color: var(--brand-primary); background: var(--tint-lilac); } .jf-opt:focus-within { box-shadow: 0 0 0 3px var(--brand-lilac); } .jf-section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; } .jf-section h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--ink); } .jf-section p { margin: 6px 0 0; font-size: 14px; color: var(--muted); } .jf-section-img { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .jf-section-img img { width: min(200px, 100%); border-radius: var(--radius-sm); } .jf-section-img > div { flex: 1 1 200px; } .jf-divider { display: none; } .jf-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .jf-pic { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; padding: 0; font: 600 13px var(--font-body, inherit); color: var(--ink); text-align: left; } .jf-pic img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--tint-lilac); } .jf-pic span { padding: 8px 10px 10px; } .jf-pic[aria-pressed=true] { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-lilac); } .jf-pic[aria-pressed=true]::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: grid; place-items: center; font-weight: 700; } .jf-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .jf-product { position: relative; background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius-md); padding: 10px; color: var(--ink-2); text-align: left; font: 12px var(--font-body, inherit); display: flex; flex-direction: column; gap: 6px; cursor: pointer; } .jf-product img { width: 100%; aspect-ratio: 1; object-fit: contain; } .jf-product strong { font-size: 12.5px; color: var(--ink); } .jf-product em { font-style: normal; font-weight: 700; color: var(--brand-primary); } .jf-product[aria-pressed=true] { border-color: var(--brand-primary); background: var(--tint-lilac); } .jf-product[aria-pressed=true]::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: grid; place-items: center; font-weight: 700; } .jf-line img { width: 100%; max-width: 480px; border-radius: var(--radius-md); margin-bottom: 10px; } .jf-total { background: var(--tint-pink); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--brand-blush-ink); } .jf-total strong { color: var(--ink); } .jf-offer { color: var(--brand-primary); font-weight: 700; margin: 0; } .jf-table { width: 100%; border-collapse: collapse; font-size: 15px; } .jf-table td { padding: 9px 0; border-bottom: 1px solid var(--line); } .jf-num { text-align: right; white-space: nowrap; padding-left: 12px; } .jf-table tr:last-child td { border-bottom: 0; font-size: 17px; } .jf-terms { font-size: 13px; line-height: 1.55; color: var(--ink-2); max-height: 280px; overflow: auto; background: var(--tint-lilac); border-radius: var(--radius-sm); padding: 4px 16px; } .jf-sig { width: 100%; height: 170px; background: #fff; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); touch-action: none; display: block; } .jf-sig-img { max-width: 340px; width: 100%; border-bottom: 1px solid var(--line); } .jf-widget { width: 100%; border: 0; display: block; } .jf-photos { display: flex; flex-wrap: wrap; gap: 6px; } .jf-chip { background: var(--tint-lilac); color: var(--ink-2); border-radius: 999px; padding: 4px 10px; font-size: 12px; } .jf-navrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .jf-pager { padding: 16px 24px 22px; border-top: 1px solid var(--line); margin-top: 18px; } @media (max-width: 600px) { .jf-pager { padding: 14px 18px 20px; } } .jf-next, .jf-back-btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; font-size: 16px; border-radius: 99px; padding: 0 26px; min-height: 48px; cursor: pointer; text-decoration: none; } .jf-next { background: var(--brand-primary); color: var(--brand-primary-ink) !important; border: 0; align-self: flex-start; } .jf-next:disabled { opacity: .55; cursor: not-allowed; } .jf-back-btn { background: transparent; color: var(--brand-primary); border: 1.5px solid var(--line-strong); } .jf-upload { display: flex; align-self: stretch; min-height: 64px; border: 2px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--tint-pink); color: var(--brand-blush-ink) !important; } .jf-steps { display: flex; gap: 6px; overflow-x: auto; padding: 16px 24px 0; scrollbar-width: none; } @media (max-width: 600px) { .jf-steps { padding: 14px 18px 0; } } .jf-step { flex: none; background: #fff; border: 1px solid var(--line-strong); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font: 500 13px var(--font-body, inherit); cursor: pointer; } .jf-step[aria-current=true] { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } .jf-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink) !important; text-decoration: none; background: #fff; } .jf-right { text-align: right; } /* In-person consultation: dark mode (the Jotform's black look), switched with the ☾ / ☀ button */ body.ip-dark { background: #000; } body.ip-dark .glow { display: none; } .jf.dark { --ink: #EAC0FF; --ink-2: #F2E8FF; --muted: #B9A8CF; --line: #2A2350; --line-strong: #3A3168; --card: #000; --tint-lilac: #2A2350; --tint-pink: #2A1830; --brand-lilac: #3A3168; --brand-blush-ink: #F5BCD6; --brand-primary: #F5BCD6; --brand-primary-ink: #E60970; } .jf.dark .jf-back { color: #EEC7FF; } .jf.dark .jf-input { background: #C9C1F5; color: #4B3685; border-color: #FFFFBA; } .jf.dark .jf-guest { background: #2A2350; color: #F2E8FF; border-color: #3A3168; } .jf.dark .jf-opt, .jf.dark .jf-pic, .jf.dark .jf-product, .jf.dark .jf-step, .jf.dark .jf-row { background: #0D0A18; } .jf.dark .jf-opt:has(input:checked), .jf.dark .jf-product[aria-pressed=true] { background: #2A2350; } .jf.dark .jf-title h1, .jf.dark .jf-section h2 { color: #EAC0FF; } .jf.dark .jf-step[aria-current=true] { background: #F5BCD6; color: #E60970; border-color: #F5BCD6; } .jf.dark .jf-sig, .jf.dark .jf-sig-img, .jf.dark .jf-product img { background: #fff; } .jf.dark .jf-form { box-shadow: none; } .jf-theme { margin-left: auto; background: none; border: 1.5px solid var(--line-strong); color: var(--ink); border-radius: 999px; min-height: 40px; padding: 0 14px; font: 600 14px var(--font-body, inherit); cursor: pointer; } .jf-topline { display: flex; align-items: center; gap: 12px; } .jf-stylist { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .jf-stylist .jf-guest { flex: 1 1 200px; font-size: 16px; font-weight: 600; color: var(--ink); } .jf-stylist-pick { flex: 0 1 180px; } /* Extension calculator, living inside the in-person consultation (matches .jf fields/buttons, light + dark) */ .ext-calc { color: var(--ink); } .ext-calc .card { display: flex; flex-direction: column; gap: 22px; background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; } .ext-calc .hidden { display: none !important; } .ext-calc .section { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; } .ext-calc .section:first-child { border-top: 0; padding-top: 0; } .ext-calc .section-title, .ext-calc .section > h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--ink); margin: 0; } .ext-calc .section-note, .ext-calc .sourcing-subnote, .ext-calc #shippingMethodNote { font-size: 14px; color: var(--muted); margin: 0; } .ext-calc .sourcing-heading { font-weight: 600; color: var(--ink); } .ext-calc .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ext-calc .full { grid-column: 1 / -1; } .ext-calc label { display: block; font-weight: 600; color: var(--ink); font-size: 15px; margin: 0 0 8px; line-height: 1.35; } .ext-calc select, .ext-calc input:not([type=checkbox]):not([type=radio]), .ext-calc textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 48px; } .ext-calc textarea { min-height: 90px; resize: vertical; } .ext-calc select:focus, .ext-calc input:focus, .ext-calc textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-lilac); } .ext-calc select:disabled, .ext-calc input:disabled { background: var(--tint-lilac); color: var(--muted); } .ext-calc .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 4px; } .ext-calc .meta > div { background: var(--tint-lilac); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--muted); } .ext-calc .meta strong { display: block; font-size: 17px; color: var(--ink); margin-top: 2px; } .ext-calc .status { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; background: var(--tint-lilac); color: var(--ink-2); } .ext-calc .status.ok { background: #E7F4EF; color: var(--ok); } .ext-calc .status.warn { background: #FFF4D6; color: #7A5A00; } .ext-calc .status.error { background: #FBEAF0; color: var(--danger); } .ext-calc .button-row { display: flex; flex-wrap: wrap; gap: 10px; } .ext-calc button { font: inherit; font-weight: 600; font-size: 15px; border-radius: 99px; padding: 0 22px; min-height: 46px; cursor: pointer; border: 1.5px solid var(--line-strong); background: transparent; color: var(--brand-primary); } .ext-calc button.primary { background: var(--brand-primary); color: var(--brand-primary-ink); border-color: var(--brand-primary); } .ext-calc button:disabled { opacity: .5; cursor: not-allowed; } .ext-calc .item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; } .ext-calc .item-title { font-weight: 600; color: var(--ink); } .ext-calc .item-sub { font-size: 13px; color: var(--muted); white-space: pre-wrap; } .ext-calc .remove { min-height: 36px; padding: 0 14px; font-size: 13px; color: var(--danger); } .ext-calc .empty, .ext-calc .loading { color: var(--muted); font-size: 14px; } .ext-calc .totals { display: grid; gap: 6px; background: var(--tint-pink); border-radius: var(--radius-md); padding: 14px 16px; } .ext-calc .totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .ext-calc .total-label { font-size: 14px; color: var(--ink-2); } .ext-calc .total-value { font-weight: 600; color: var(--ink); } .ext-calc .grand { border-top: 1px solid var(--line-strong); padding-top: 8px; margin-top: 4px; } .ext-calc .grand .total-value { font-size: 20px; } .ext-calc .check-list { display: grid; gap: 8px; } .ext-calc .check-option { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; margin: 0; font-weight: 400; } .ext-calc .check-option:has(input:checked) { border-color: var(--brand-primary); background: var(--tint-lilac); } .ext-calc .check-option input { accent-color: var(--brand-primary); width: 18px; height: 18px; margin-top: 2px; flex: none; } .ext-calc .microbond-reminder { background: #FFF4D6; color: #7A5A00; border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; } @media (max-width: 560px) { .ext-calc .grid { grid-template-columns: 1fr; } } .jf.dark .ext-calc select, .jf.dark .ext-calc input:not([type=checkbox]):not([type=radio]), .jf.dark .ext-calc textarea { background: #C9C1F5; color: #4B3685; border-color: #FFFFBA; } .jf.dark .ext-calc .item, .jf.dark .ext-calc .check-option { background: #0D0A18; } .jf.dark .ext-calc .check-option:has(input:checked) { background: #2A2350; } .jf.dark .ext-calc .totals { background: #2A1830; } /* Date fields: iPhone/Safari draw them wider than their box; keep them the same size as every other field. */ .jf input[type=date], .jf input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; text-align: left; } .jf input[type=date]::-webkit-date-and-time-value { text-align: left; } .jf .jf-field, .jf .ext-calc .grid > div { min-width: 0; } /* Talk-to-type */ .mic-wrap { position: relative; display: block; } .mic-wrap > textarea { padding-right: 56px; width: 100%; box-sizing: border-box; } .mic-wrap > .mic-btn { position: absolute; right: 8px; bottom: 8px; min-height: 36px; padding: 0 10px; } .mic-wrap > input + .mic-btn { top: 50%; bottom: auto; transform: translateY(-50%); } .mic-wrap > input { padding-right: 56px; width: 100%; box-sizing: border-box; } .mic-btn.on { background: #F9DDE9; border-color: #E8A9C6; color: #8C3F6E; } /* Consultation section titles: the virtual-consultation font play */ .fancy { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.15; } h3.fancy { font-size: 28px; } h4.fancy { font-size: 21px; margin-top: 10px; } .fancy em { font-style: italic; color: var(--brand-primary); } .picks .field > .label, .picks .field > span.label, .draft .field .label { font-family: var(--font-display); font-size: 17px; font-weight: 400; color: var(--ink); } /* Stylists grouped by price level */ .level-group { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .level-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-primary); } /* 24-hour waiting alert */ .wait-banner { margin: 12px 0 16px; padding: 12px 16px; border-radius: var(--radius-md); background: #FBE3EC; border: 1px solid #F2B8CE; color: #7A2E52; font-size: 14px; line-height: 1.45; } .chip-wait { background: #FBE3EC; color: #8C3F6E; border-color: #F2B8CE; font-weight: 600; } /* ── Virtual Consultations: "Rosé glass" (approved Oct 24, option I) ── */ .vc { max-width: 760px; margin: 0 auto; } .vc-head { display: flex; flex-direction: column; gap: 4px; } .vc-kick { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-primary); margin-top: 8px; } .vc-title { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-weight: 400; font-size: clamp(32px, 7vw, 44px); line-height: 1.04; margin: 4px 0 0; color: var(--ink); } .vc-title em { color: var(--brand-primary); } .vc-sub { font-size: 14px; color: var(--muted); margin: 6px 0 16px; } .vc-tabs { display: flex; background: var(--card); border-radius: 20px; box-shadow: 0 12px 28px rgba(110, 87, 168, .14); overflow: hidden; } .vc-tab { flex: 1; border: 0; border-right: 1px solid #EFE8F7; background: transparent; padding: 12px 6px; text-align: center; cursor: pointer; } .vc-tab:last-child { border-right: 0; } .vc-tab b { display: block; font: 400 26px/1.1 var(--font-display, 'Fraunces', serif); color: var(--ink); } .vc-tab span { font-size: 12px; color: var(--muted); } .vc-tab[aria-selected="true"] { background: var(--brand-primary); } .vc-tab[aria-selected="true"] b, .vc-tab[aria-selected="true"] span { color: var(--brand-primary-ink); } .vc-more { display: flex; gap: 14px; justify-content: flex-end; margin: 8px 4px 0; } .vc-link { border: 0; background: none; padding: 4px 0; color: var(--muted); cursor: pointer; font-size: 13px; } .vc-link[aria-pressed="true"] { color: var(--brand-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .vc-actions { gap: 8px; flex-wrap: wrap; margin: 12px 0 14px; } .vc .consult-list { display: flex; flex-direction: column; gap: 10px; } .vc-card, .vc .card { background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(110, 87, 168, .08); } .vc-card { display: flex; gap: 12px; padding: 12px; border-radius: 22px; text-decoration: none; color: inherit; } .vc-card:hover { background: rgba(255, 255, 255, .85); } .vc-duo { display: flex; flex: none; width: 76px; } .vc-ph { width: 44px; height: 58px; border-radius: 14px; border: 2px solid #fff; background: center / cover no-repeat var(--brand-lilac); } .vc-ph.empty { background: linear-gradient(160deg, var(--brand-blush), var(--brand-lilac)); } .vc-ph.empty.two { background: linear-gradient(160deg, var(--brand-lilac), var(--brand-sky)); } .vc-ph.two { margin-left: -14px; margin-top: 10px; } .vc-body { flex: 1; min-width: 0; } .vc-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 400 19px/1.2 var(--font-display, 'Fraunces', serif); color: var(--ink); } .vc-name small { font: 500 12px var(--font-body); color: #A18FB5; white-space: nowrap; } .vc-quote { font: italic 400 14px/1.35 var(--font-display, 'Fraunces', serif); color: #6E6380; margin: 3px 0 2px; overflow-wrap: anywhere; } .vc-meta { font-size: 12.5px; color: var(--muted); margin: 2px 0 6px; } .vc-tags { display: flex; gap: 6px; flex-wrap: wrap; } .vc-tag { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--brand-lilac); color: #5B46A0; } .vc-tag.wait { background: var(--brand-blush); color: var(--brand-blush-icon); } .vc-tag.hot { background: var(--brand-sky); color: #3E6290; } .vc .card h3, .vc .card > h3 { font-family: var(--font-display, 'Fraunces', serif); font-weight: 400; } .vc-client { font: 400 26px/1.1 var(--font-display, 'Fraunces', serif); margin: 0; color: var(--ink); } .vc > .stack, .vc-head + .stack { margin-top: 16px; } .size-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .size-name { font-size: 14px; font-weight: 600; } .pick-seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .pick-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); cursor: pointer; } .pick-seg button[aria-pressed="true"] { background: var(--brand-primary); color: var(--brand-primary-ink); font-weight: 600; } /* Section headers a touch bigger and bolder; rounded dropdowns (Oct 24) */ .vc .card > h3, .vc .card h3:not(.fancy) { font-family: var(--font-display); font-weight: 500; font-size: 23px; color: var(--ink); margin: 0 0 10px; letter-spacing: -.005em; } .vc .fancy { font-weight: 500; } .vc h3.fancy { font-size: 23px; } .vc h4.fancy { font-size: 19px; } .vc select { -webkit-appearance: none; appearance: none; width: 100%; padding: 11px 40px 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236E57A8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; font-size: 15px; color: var(--ink); box-shadow: 0 2px 8px rgba(110, 87, 168, .06); cursor: pointer; } .vc select:hover { border-color: var(--line-strong); } .vc select:focus-visible { border-color: var(--brand-primary); } .opt-label { font: 600 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-primary); margin: 6px 0 -2px; } .opt2 { border-top: 1px dashed var(--line-strong); padding-top: 14px; gap: 12px; } .said { display: block; margin: -2px 0 4px; } .team-note { border-left: 4px solid var(--brand-primary); } /* Photo lightbox */ .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(30, 20, 45, .92); display: flex; align-items: center; justify-content: center; padding: 56px 12px 40px; } .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .lb-close { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 22px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25); } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 14px; background: rgba(255,255,255,.18); color: #fff; font-size: 36px; line-height: 1; cursor: pointer; } .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-nav:hover { background: rgba(255,255,255,.3); } .lb-count { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; } .says { margin: -4px 0 4px; font-size: 15px; color: var(--ink); background: var(--tint-lilac); border-radius: 12px; padding: 8px 12px; } .ext-area { border-top: 1px dashed var(--line-strong); padding-top: 16px; } /* Consultation detail: two columns on wide screens */ .vc.vc-wide { max-width: 760px; } @media (min-width: 1100px) { .vc.vc-wide { max-width: 1320px; } .vc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; margin: 16px 0; } /* Both columns scroll inside their own box; the page itself scrolls on to the email below. */ .vc-left, .vc-right { max-height: max(560px, calc(100vh - 32px)); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--brand-lilac) transparent; } } @media (max-width: 1099px) { .vc-split { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; } } .tell-ai { gap: 6px; background: var(--tint-lilac); border-radius: 18px; padding: 12px 14px; } .tell-ai .draft-askrow { align-items: flex-end; } textarea.draft-ask { border-radius: 14px; resize: vertical; min-height: 52px; line-height: 1.4; } .stale-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: #FFF4D6; border: 1px solid #F0D78C; color: #6B4E0E; border-radius: 14px; padding: 10px 12px; font-size: 14px; } /* Service unlocks */ .unlock-card { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; gap: 8px; } .model-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--line); } .progress { height: 8px; background: var(--tint-lilac); border-radius: 99px; overflow: hidden; } .progress span { display: block; height: 100%; background: var(--brand-primary); border-radius: 99px; } .chip-ok { background: #E3F4EA; color: #2F6B45; } .who-working .day-nav strong { font-family: var(--font-display); font-weight: 400; font-size: 18px; } .person-row.me { background: var(--tint-lilac); border-radius: 12px; padding-left: 8px; padding-right: 8px; } hr.soft { border: 0; border-top: 1px dashed var(--line); margin: 4px 0; } /* Your day */ .appt-list { display: flex; flex-direction: column; gap: 8px; } .appt-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: inherit; text-decoration: none; } .appt-row:hover { border-color: var(--brand-primary); } .appt-time { font: 400 17px var(--font-display); color: var(--brand-primary); min-width: 72px; } .appt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .appt-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .day-off { background: linear-gradient(135deg, var(--tint-pink), var(--tint-blue)); } .day-off-emoji { font-size: 40px; line-height: 1; } .role-tag { font-size: 11px; padding: 2px 8px; } .role-tag.manager { background: var(--brand-primary); color: var(--brand-primary-ink); } .role-tag.apprentice { background: var(--brand-sky); color: #3E6290; } .day-where { font-size: 0.8em; color: var(--muted); } /* Stylist price table: same look as Services & Pricing, fits a phone */ .price-table.my-prices { font-size: 13px; } .price-table.my-prices th, .price-table.my-prices td { padding: 8px 6px; } .price-table.my-prices thead th { white-space: normal !important; font-size: 11px; line-height: 1.2; } .price-table.my-prices thead th:first-child, .price-table.my-prices tbody th { text-align: left; white-space: normal; } .price-table.my-prices td { text-align: right; white-space: nowrap; } .appt-done { border: 1px solid var(--line); border-radius: 16px; padding: 8px 12px; background: color-mix(in srgb, var(--ok, #3a8f5c) 6%, transparent); } .appt-done > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ok, #3a8f5c); } .appt-done[open] > summary { margin-bottom: 8px; } .chip.chip-required { background: #FBE3EC; color: #9B2C5A; border-color: #F2B8CE; } .required-alert .req-row { display: block; padding: 6px 0; border-top: 1px solid #F2B8CE; color: inherit; text-decoration: none; font-size: 14px; } .required-alert .req-row::after { content: ' ›'; } /* Six inbox tabs: one row on wide screens, 3 × 2 on phones */ .vc-tabs { flex-wrap: wrap; } .vc-booked { font-size: 13px; font-weight: 600; color: var(--ok, #2f7d4f); margin: 2px 0; } .booked-card { border-color: var(--ok, #2f7d4f); } .rec-text p { margin: 0 0 10px; line-height: 1.5; } .vc-search { width: 100%; margin-top: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); font: inherit; background: var(--card); } .vc-more { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; } .vc-search { margin: 4px 0 12px; } /* Manager inbox: History row; stylist cards with buttons */ .vc-more { align-items: center; gap: 6px 14px; padding: 10px 2px 0; } .vc-hist-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: auto; } .vc-card-static { cursor: default; } .vc-btns { gap: 8px; flex-wrap: wrap; margin-top: 8px; } .past-visits { margin-top: 8px; font-size: 14px; } .past-visits summary { cursor: pointer; color: var(--brand-primary); font-weight: 600; } .vc-stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; } /* In-person: know-before-you-start card, discrepancy flags (Oct 25) */ .jf-know { background: var(--card, #fff); border: 1px solid #EADFF6; border-radius: 20px; padding: 16px 18px; margin: 0 0 18px; } .jf-know h2 { margin: 0 0 10px; font-size: 20px; } .jf-know dl { margin: 0; display: grid; gap: 8px; } .jf-know-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 14px; } .jf-know-row dt { color: var(--muted); font-weight: 600; } .jf-know-row dd { margin: 0; } .jf-know-row.warn dt, .jf-know-row.warn dd { color: #9B2C5A; } @media (max-width: 520px) { .jf-know-row { grid-template-columns: 1fr; gap: 2px; } } .jf-flag { margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; background: #FFF4D6; color: #7A5200; font-size: 14px; font-weight: 600; } .jf-flags { background: #FFF4D6; border: 1px solid #F1D48A; border-radius: 16px; padding: 12px 16px; margin: 0 0 16px; color: #6B4A00; } .jf-flags p { margin: 4px 0 0; } .jf-link { border: 0; background: none; color: var(--brand-primary); font-weight: 600; cursor: pointer; padding: 0 0 0 6px; } .jf.dark .jf-know { background: #221C40; border-color: #3A3168; } .jf-reply summary { cursor: pointer; color: var(--brand-primary); font-weight: 600; } .jf-reply p { margin: 8px 0 0; line-height: 1.5; } .jf-know-name { font-weight: 400; color: var(--muted); font-size: 16px; } /* In-person pictures & quoting (Oct 25) */ .jf-pics-wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .jf-pics-wide .jf-pic img { aspect-ratio: auto; height: auto; object-fit: fill; background: none; display: block; } .jf-section-img { flex-direction: column; align-items: stretch; } .jf-section-img img { width: 100%; max-width: 560px; } .jf-compact .jf-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .jf-compact .jf-opt { padding: 8px 10px; font-size: 13px; min-height: 0; } .jf-running { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 50; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; align-items: center; padding: 10px 16px; border-radius: 999px; background: #FBE3EC; border: 1px solid #F2B8CE; color: #7A2E52; font-size: 14px; box-shadow: 0 10px 24px rgba(122, 46, 82, .18); width: fit-content; max-width: 100%; } .jf-running b { font-weight: 700; } .jf-running-total { padding-left: 10px; border-left: 1px solid #F2B8CE; } .jf.dark .jf-running { background: #3A1F38; color: #FFD3E6; border-color: #6B3560; } .jf-body:has(.jf-running) { padding-bottom: 70px; } .jf-section-img img { order: 2; margin-top: 10px; } /* Density picture: crop the empty space inside the image (Oct 25) */ .jf-section-img img { aspect-ratio: 25 / 11; object-fit: cover; object-position: center 85%; margin-top: 4px; } /* Price list like Services & Pricing */ .jf-plist { display: grid; gap: 12px; } .jf-pgroup { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card, #fff); } .jf-pgroup-title { padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--tint-lilac); } .jf-prow { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; } .jf-pgroup-title + .jf-prow, .jf-pgroup > .jf-prow:first-child { border-top: 0; } .jf-prow.on { background: color-mix(in srgb, var(--brand-primary) 8%, transparent); } .jf-prow b { font-weight: 600; white-space: nowrap; } .jf.dark .jf-pgroup { background: #0D0A18; border-color: #3A3168; } .jf.dark .jf-pgroup-title { background: #2A2350; color: #CDB8F0; } /* Running total: tap to see the services */ .jf-running { display: block; padding: 0; } .jf-running summary { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; align-items: center; padding: 10px 16px; cursor: pointer; } .jf-running summary::-webkit-details-marker { display: none; } .jf-running[open] .jf-running-caret { transform: rotate(180deg); } .jf-running-list { border-top: 1px solid #F2B8CE; padding: 8px 16px 12px; display: grid; gap: 4px; min-width: 260px; max-height: 40vh; overflow: auto; } .jf-running-list div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .jf-running { border-radius: 22px; } .jf-clear { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 10px 24px 0; } @media (max-width: 600px) { .jf-clear { padding: 10px 18px 0; justify-content: flex-start; } } /* Inventory: consultation products (0059) */ .cp-card { display: grid; gap: 10px; } .cp-off { opacity: .6; } .cp-top { display: flex; gap: 12px; align-items: flex-start; } .cp-photo { width: 72px; height: 72px; border-radius: 12px; background: var(--tint-lilac); display: grid; place-items: center; overflow: hidden; flex: none; font-size: 11px; color: var(--muted); } .cp-photo img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .cp-stock { display: flex; flex-wrap: wrap; gap: 6px; } .chip.chip-out { background: #FBE3EC; color: #9B2C5A; } .cp-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .cp-fields label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); } .cp-wide { grid-column: 1 / -1; } .cp-actions { grid-column: 1 / -1; gap: 10px; align-items: center; flex-wrap: wrap; } .jf-product { position: relative; } .jf-stock { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 8px; border-radius: 999px; font: 700 11px var(--font-body, inherit); background: #E3F4EA; color: #1F6B43; } .jf-stock.out { background: #FBE3EC; color: #9B2C5A; } .jf-product:disabled { opacity: .55; cursor: not-allowed; } .cp-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; } @media (max-width: 640px) { .cp-filters { grid-template-columns: 1fr 1fr; } .cp-filters input { grid-column: 1 / -1; } } /* "View as" bar (update 0061, Britt Oct 26) */ .va-bar { position: sticky; top: 0; z-index: 60; background: var(--brand-blush-icon); color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .va-bar .va-sp { flex: 1; } .va-bar select, .va-bar button { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 5px 12px; font: inherit; cursor: pointer; max-width: 100%; } .va-bar select option { color: #000; } .va-bar .va-exit { background: #fff; color: var(--brand-blush-icon); font-weight: 700; } .va-bar .va-note { font-size: 12px; opacity: .85; width: 100%; } .list-row .va-btn { margin-top: 6px; } /* Team View page */ .tv-group { font-size: 18px; margin: 0; } .tv-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 720px) { .tv-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } .tv-person { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface, #fff); border: 1px solid var(--line, #E6DDF3); border-radius: 16px; padding: 10px 14px; font: inherit; color: inherit; cursor: pointer; } .tv-person:hover, .tv-person:focus-visible { border-color: var(--brand-primary); } .tv-who { display: flex; flex-direction: column; flex: 1; min-width: 0; } .tv-go { font-size: 18px; opacity: .7; } /* Weather star (Oct 26) */ .hello-star-box { position: relative; display: inline-block; vertical-align: -6px; } .hello-star-box .star-mascot { filter: drop-shadow(0 1px 2px rgba(60, 50, 80, .28)) drop-shadow(0 3px 8px rgba(60, 50, 80, .12)); } .wx-line:empty { display: none; } /* Clients app (update 0063) */ .cl-facts { margin: 0; } .cl-note { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--brand-lilac); } .cl-note.private { background: #FCEFD9; } .cl-note .jf-link { justify-self: start; padding: 0; font-size: 13px; } .cl-visit { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid rgba(110,87,168,.12); } .cl-visit.cancelled { opacity: .55; } .appt-notes { display: grid; gap: 4px; margin-top: 4px; } .appt-notes .note { font-size: 13px; background: var(--brand-lilac); border-radius: 10px; padding: 6px 9px; } .appt-notes .note.private { background: #FCEFD9; } /* Grade stars (Oct 26) */ .grade-star { margin-left: 6px; vertical-align: middle; } .grade-big strong .grade-star { margin-left: 8px; vertical-align: -6px; } /* Referrals: Friends w/ Benefits (update 0064) */ .chip-gift { background: var(--brand-blush, #FBE7EE); color: var(--brand-blush-ink); } .cl-ref { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--brand-blush) 25%, transparent); } .cl-ref a { font-weight: 600; } .cl-ref-add summary, .cl-tonote summary { cursor: pointer; font-weight: 600; } .cl-ref-add[open] summary { margin-bottom: 8px; } .cl-tonote { padding: 12px 14px; } /* Room between the Upcoming / Completed tabs and the first card (Britt, Oct 26) */ .vc-tabs + .consult-list { margin-top: 20px; } /* Client history: tickets from Mangomint (update 0066) */ .cl-ticket { border-radius: 14px; background: color-mix(in srgb, var(--brand-blush) 18%, transparent); padding: 10px 12px; } .cl-ticket summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; cursor: pointer; list-style: none; } .cl-ticket summary::-webkit-details-marker { display: none; } .cl-ticket-head { display: flex; flex-direction: column; } .cl-ticket-sum { grid-column: 1; color: var(--muted); } .cl-ticket-total { grid-column: 2; grid-row: 1; align-self: start; } .cl-ticket-lines { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; } .cl-ticket-lines td { padding: 5px 4px; border-top: 1px solid rgba(110, 87, 168, .12); vertical-align: top; } .cl-ticket-lines td.num { text-align: right; white-space: nowrap; } .cl-ticket-total-row td { font-weight: 700; } .cl-ticket-lines td.num { background: none; border-radius: 0; } /* Referral match on a consultation (update 0070) */ .ref-match { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .ref-cand { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--brand-blush) 25%, transparent); } .ref-ok { font-weight: 600; } /* "This week changed" on the Roundup (update 0071) */ .week-changes .wc-week { margin-top: 8px; } .week-changes .wc-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid rgba(0,0,0,.06); } .cl-refund td { color: var(--muted); } /* Who Was on Schedule (Roundup, Oct 27) */ .sc-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .sc-flags li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #FFF8F3; } table.sc-table th, table.sc-table td { text-align: center; padding: 8px 6px; } table.sc-table thead th { min-width: 40px; } table.sc-table td { min-width: 40px; font-weight: 600; } .sc-worked { color: var(--ok); } .sc-open, .sc-none { color: var(--muted); } .sc-partly { color: #9a6b00; background: #FFF6DD; } .sc-blocked, .sc-missing { color: #b3261e; background: #FDECEA; } .sc-edit { cursor: pointer; } .sc-manual { outline: 2px dashed var(--brand-accent, #b8860b); outline-offset: -3px; } .schedule-card { position: relative; } .sc-picker { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50; width: min(320px, calc(100vw - 32px)); box-shadow: 0 8px 30px rgba(0,0,0,.25); } .sc-closed { color: var(--muted); background: #F3EDF9; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } /* Chair view (Oct 27) */ table.chair-table td.ch-good { color: var(--ok); font-weight: 600; } table.chair-table td.ch-mid { color: #9a6b00; background: #FFF6DD; } table.chair-table td.ch-low { color: #b3261e; background: #FDECEA; } .chairs-edit summary { cursor: pointer; } .chairs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--line); } .chairs-row > b { min-width: 110px; } .chairs-row .input-num { width: 70px; } /* Birthdays (update 0077) */ .bday-note { margin: 6px 0 0; padding: 4px 10px; border-radius: 999px; background: var(--tint-pink, #FCEAF3); color: var(--ink, #2b2440); align-self: flex-start; } .bday-note[hidden] { display: none; } .chip-draft { background: #FFF4D6; color: #6b4e00; } .loc-team { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand-primary, #7a5cc0) 8%, transparent); } .loc-count b { font-size: 20px; } .pill-add { font-weight: 600; } /* Scheduler (update 0079) */ .sched-days { display: grid; gap: 6px; } .sched-day { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; } .sched-day.on { background: color-mix(in srgb, var(--brand-primary, #6E57A8) 7%, transparent); } .sched-day.today { border-color: var(--brand-primary, #6E57A8); } .sd-date { font-weight: 600; min-width: 92px; } .sd-shift { flex: 1; } .sched-req { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); } .chip-bad { background: #FDECEA; color: #b3261e; } /* Team Schedule (manager view) */ .ts-summary { display: flex; gap: 6px; flex-wrap: wrap; } .ts-grid { border-collapse: separate; border-spacing: 3px; font-size: 12px; min-width: 520px; width: 100%; } .ts-grid th:first-child { width: 72px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; } .ts-grid th, .ts-grid td { text-align: center; padding: 6px 4px; white-space: nowrap; } .ts-grid thead th small { display: block; font-weight: 400; color: var(--muted, #776); } .ts-grid thead th.today { color: var(--brand-primary, #6E57A8); } .ts-grid tbody th, .ts-grid .ts-count th { text-align: left; position: sticky; left: 0; background: var(--card-bg, #fff); z-index: 1; font-weight: 600; } .ts-grid tbody th small { display: block; font-weight: 400; font-size: 10px; color: var(--muted, #776); } .ts-count td { font-weight: 600; border-radius: 6px; background: #F3F0FA; } .ts-count td.over { background: #FDECEA; color: #b3261e; } .ts-count td.low { background: #FFF4D6; color: #6b4e00; } .ts-cell { position: relative; border-radius: 6px; cursor: pointer; border: 1px solid var(--line, #eee); color: var(--muted, #998); } .ts-cell.on { background: color-mix(in srgb, var(--brand-primary, #6E57A8) 14%, transparent); color: inherit; font-weight: 600; border-color: transparent; } .ts-cell.assist { background: #EEECEA; font-weight: 500; } .ts-cell.changed { outline: 2px dashed var(--brand-primary, #6E57A8); outline-offset: -2px; } .ts-cell.elsewhere { font-style: italic; } .ts-dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #E06AA8; } /* Team Schedule: month view */ .tm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .tm-head { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted, #776); padding: 2px 0; } .tm-day { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 92px; padding: 5px; border: 1px solid var(--line, #eee); border-radius: 8px; background: var(--card-bg, #fff); text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; } .tm-day.out { opacity: .45; } .tm-day.today { border-color: var(--brand-primary, #6E57A8); } .tm-day.over .tm-count { background: #FDECEA; color: #b3261e; } .tm-top { display: flex; align-items: center; gap: 4px; font-size: 12px; } .tm-count { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 999px; background: #F3F0FA; } .tm-day .ts-dot { position: static; } .tm-names { display: flex; flex-direction: column; font-size: 10.5px; line-height: 1.25; } .tm-names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm-names .assist { color: var(--muted, #998); } .tm-names .more { font-weight: 600; } @media (max-width: 520px) { .tm-names { display: none; } .tm-day { min-height: 54px; } .tm-count { margin-left: 0; } .tm-top { flex-wrap: wrap; } } .tm-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; } .tm-list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line, #eee); border-radius: 8px; font-size: 14px; } .ts-dayhead { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; } .ts-dayhead small { display: block; font-weight: 400; color: var(--muted, #776); } .ts-cell .ts-loc { display: block; font-size: 9.5px; font-weight: 500; opacity: .75; } .ts-cell.nt { background: color-mix(in srgb, #E06AA8 18%, transparent); } /* My Schedule (stylists) */ .my-week { display: grid; gap: 6px; } .my-day { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--line, #eee); border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .my-day.on { background: color-mix(in srgb, var(--brand-primary, #6E57A8) 12%, transparent); border-color: transparent; } .my-day.today { border-color: var(--brand-primary, #6E57A8); } .my-day .md-date { font-weight: 600; min-width: 84px; } .my-day .ts-dot { position: static; margin-left: auto; } .my-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .my-month .my-day { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px; min-height: 56px; } .my-month .my-day.out { opacity: .4; } .my-month .md-date { min-width: 0; font-size: 12px; } .my-month .md-shift { font-size: 10.5px; font-weight: 600; } .my-month .ts-dot { position: absolute; top: 5px; right: 5px; margin: 0; } /* Request time off (update 0081) */ .to-reasons { display: flex; flex-wrap: wrap; gap: 6px; } .to-reason { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line, #e6e0ef); background: var(--card-bg, #fff); font: inherit; font-size: 13px; color: inherit; cursor: pointer; } .to-reason[aria-checked="true"] { background: var(--brand-primary, #6E57A8); border-color: var(--brand-primary, #6E57A8); color: #fff; } .to-info { display: grid; gap: 6px; } .to-ok { color: #2F6B45; } .to-full { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #FFF4D6; color: #6b4e00; font-size: 13px; } .to-full .btn { justify-self: start; } .my-weekgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .mw-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; min-height: 86px; border: 1px solid var(--line, #eee); border-radius: 8px; background: var(--card-bg, #fff); font: inherit; color: inherit; cursor: pointer; } .mw-day.on { background: color-mix(in srgb, var(--brand-primary, #6E57A8) 14%, transparent); border-color: transparent; } .mw-day.today { outline: 2px solid var(--brand-primary, #6E57A8); outline-offset: -2px; } .mw-head { font-size: 12px; font-weight: 600; text-align: center; } .mw-head small { display: block; font-weight: 400; color: var(--muted, #776); } .mw-shift { font-size: 12px; font-weight: 600; text-align: center; } .mw-shift small { display: block; font-size: 10px; font-weight: 500; opacity: .75; } .mw-off { font-size: 11px; color: var(--muted, #998); font-style: italic; } .mw-day .ts-dot { position: absolute; top: 4px; right: 4px; } .do-list { display: grid; gap: 6px; } .do-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; font-size: 14px; } .do-bar { height: 10px; border-radius: 999px; background: #F3F0FA; overflow: hidden; } .do-bar span { display: block; height: 100%; background: var(--brand-primary, #6E57A8); border-radius: 999px; } .do-bar span.high { background: #E06AA8; } .do-num { font-weight: 600; white-space: nowrap; } .do-num small { font-weight: 400; color: var(--muted, #776); } @media (max-width: 520px) { .do-row { grid-template-columns: 70px 1fr; } .do-num { grid-column: 1 / -1; } } .do-why { grid-column: 2 / -1; margin-top: -4px; } @media (max-width: 520px) { .do-why { grid-column: 1 / -1; } } .sw-list { display: grid; gap: 8px; } .sw-free { display: flex; flex-wrap: wrap; gap: 6px; } .sw-mate { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line, #e6e0ef); border-radius: 999px; font-size: 13px; cursor: pointer; } .sw-mate input { accent-color: var(--brand-primary, #6E57A8); } /* Shift trades */ .mw-trade { font-size: 9.5px; line-height: 1.2; text-align: center; padding: 2px 4px; border-radius: 6px; } .tr-got { background: #E3F4EA; color: #2F6B45; } .tr-gave { background: #FFF4D6; color: #6b4e00; } .md-trade { position: absolute; bottom: 4px; right: 5px; font-size: 11px; padding: 0 3px; border-radius: 4px; } .ts-trade { display: block; font-size: 9px; font-weight: 600; opacity: .85; } .tr-list { display: grid; gap: 6px; } .tr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line, #eee); border-radius: 8px; } .tr-row b { min-width: 70px; } .sw-dates { display: flex; flex-wrap: wrap; gap: 6px; } .sw-date { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand-primary, #6E57A8) 14%, transparent); font-size: 13px; font-weight: 600; } .sw-date button { border: 0; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: inherit; } .emp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .emp-nav { display: inline-flex; align-items: center; gap: 6px; } .emp-nav .icon-btn { text-decoration: none; font-size: 18px; font-weight: 600; } /* Next payday (Britt, Oct 27) */ .payday-card { background: var(--brand-lilac); } /* One date control everywhere (Britt, Oct 27): ‹ date ▾ ›, the date opens a list or a calendar. */ .stepper { flex-wrap: nowrap; } .stepper-mid { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 0 1 auto; cursor: pointer; } .stepper-pickwrap { position: relative; display: inline-flex; align-items: center; max-width: 100%; } .stepper-select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--ink-2, inherit); font: inherit; font-weight: 700; text-align: center; text-align-last: center; padding: 6px 22px 6px 10px; border-radius: 10px; cursor: pointer; max-width: 100%; min-height: 40px; } .stepper-text { font-weight: 700; color: var(--ink-2, inherit); padding: 6px 22px 6px 10px; border-radius: 10px; position: relative; display: inline-block; } .stepper-select:hover, .stepper-select:focus-visible, .stepper-mid:hover .stepper-text { background: rgba(110, 87, 168, .1); } .stepper-caret { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 11px; opacity: .65; } .stepper-date { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; } .day-nav.stepper { justify-content: space-between; width: 100%; } .day-nav .stepper-text { font-family: var(--font-display); font-weight: 400; font-size: 18px; } /* Color check (update 0090) */ .cc-row { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px solid #f0ebf5; } .cc-row.on b { color: var(--brand-primary); } .cc-seg { display: flex; gap: 6px; flex-wrap: wrap; } .cc-seg .pill { font-size: 13px; padding: 5px 10px; } .cc-tot { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 15px; } .chip.cc-chip { cursor: pointer; font-family: inherit; line-height: inherit; margin: 0; min-height: 0; height: auto; border: 0; padding: 4px 9px; } /* a button that looks exactly like the other chips */ .price-allow { background: #FFF7EC; white-space: nowrap; } /* Sales alerts (update 0092) */ .alert-row { background: #FFF4E5; border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; font-size: 14px; } .alert-set { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid #f0ebf5; } .jf-fwb { background: #FBE7EE; font-weight: 600; padding: 8px 10px; border-radius: 8px; } .resolved-row { padding: 6px 0; border-bottom: 1px solid #f0ebf5; } .price-locked th, .price-locked td { color: var(--muted, #8a7a99); background: #faf7fc; } .locked-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: sticky; left: 0; max-width: calc(100vw - 80px); } .band-good { color: #17664F; } .band-warn { color: #9A6B00; } .band-bad { color: #A3254F; } /* Manager view only (Oct 27): the full level goal while a new hire ramps up; fainter than her own goal. */ .trend-level { fill: none; stroke: #155E45; stroke-width: 2.6; } /* full level goal (managers): dark bold green */ .key-level { width: 16px; border-top: 3px solid #155E45; display: inline-block; margin-left: 8px; } .level-pace { margin: 4px 0 0; color: var(--text-muted, #6b5b7b); } .level-pace.ok { color: #2E7D5B; } /* Share view on Team year (Oct 28): donut + legend, then bars. */ .share-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .share-pie { width: 170px; height: 170px; flex: 0 0 auto; } .share-total { font-size: 17px; font-weight: 700; fill: var(--text, #3B2A55); } .share-sub { font-size: 12px; fill: #8a7a99; } .share-legend { flex: 1 1 160px; min-width: 0; } .share-row { display: grid; grid-template-columns: 12px minmax(60px,1fr) 38px auto; gap: 6px; align-items: center; font-size: 14px; margin: 3px 0; } .share-row i { width: 12px; height: 12px; border-radius: 3px; display: block; } .share-bars { margin-top: 6px; } .share-bar { display: grid; grid-template-columns: 64px 1fr 34px auto; gap: 8px; align-items: center; font-size: 14px; margin: 6px 0; } .share-bar .linkish { text-align: left; } .share-track { background: #efe8f5; border-radius: 4px; height: 10px; display: block; } .share-track i { display: block; height: 10px; border-radius: 4px; background: var(--brand-primary, #6E57A8); } .share-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(255,255,255,.6); min-width: 0; } .share-title { margin: 0; font-size: 17px; } .share-more summary { cursor: pointer; font-size: 14px; color: var(--brand-primary, #6E57A8); font-weight: 600; } /* Reports › Retention (Oct 28) */ .ret-table td, .ret-table th { vertical-align: top; } .ret-table .ret-switch { color: #B5541F; } .ret-table tr.ret-open th, .ret-table tr.ret-open td { background: #FBF4EE; } .ret-headline { margin: 0; font-size: 16px; } .ret-table tr.ret-drawer > td { background: #FBF4EE; padding: 10px 8px 14px; white-space: normal; } .ret-detail table { background: #fff; } /* The opened list stays in view on a phone, even when the table above scrolls sideways. */ .ret-detail { position: sticky; left: 8px; width: calc(100vw - 104px); max-width: 860px; } .ret-detail .table-wrap { overflow-x: auto; } .ret-detail table td, .ret-detail table th { white-space: normal; } .ret-detail table td, .ret-detail table th { text-align: left; } /* ⓘ explanations (Oct 28) */ .info-tip { display: inline-block; position: relative; vertical-align: middle; margin-left: 4px; } .info-tip > summary { list-style: none; cursor: pointer; color: var(--brand-primary, #6E57A8); font-size: 14px; line-height: 1; padding: 2px 3px; border-radius: 999px; } .info-tip > summary::-webkit-details-marker { display: none; } .info-tip[open] > summary { background: #efe8f5; } .info-pop { position: absolute; z-index: 20; top: 22px; left: -8px; width: min(260px, 70vw); background: #fff; color: var(--text, #3B2A55); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; box-shadow: 0 6px 20px #0002; } th:last-child .info-pop, th:nth-last-child(2) .info-pop { left: auto; right: -8px; } .glossary > summary { cursor: pointer; color: var(--brand-primary, #6E57A8); font-weight: 600; font-size: 14px; } .glossary dl { margin: 8px 0 0; display: grid; gap: 4px 0; font-size: 14px; } .glossary dt { font-weight: 700; margin-top: 6px; } .glossary dd { margin: 0; color: var(--text-muted, #6b5b7b); } /* Retention: quarter strip (Oct 28) */ .ret-quarters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; } .ret-q { flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; min-width: 76px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; } .ret-q b { font-size: 18px; } .ret-q.on { border-color: var(--brand-primary, #6E57A8); background: #efe8f5; } .mover-table td, .mover-table th { text-align: left; white-space: normal; } .mover-seq { min-width: 260px; } .share-amt { font-size: 12px; white-space: nowrap; text-align: right; } /* Former team members (Britt, Oct 28): archived on their profile; still counted in totals, shown grayed out. */ .is-former > th, .is-former > td, .is-former > span, .is-former > b, .is-former > button { opacity: .5; } .is-former .linkish { color: var(--muted, #888); } .former-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--line, #e7e1ef); color: var(--muted, #776f86); vertical-align: middle; } /* Hover box on the schedule check (Oct 28): matches the app's rounded cards. */ .hover-tip { position: fixed; z-index: 50; max-width: min(280px, 80vw); background: var(--card, #fff); color: var(--text, #3B2A55); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 13px; line-height: 1.4; box-shadow: 0 6px 20px #0002; pointer-events: none; } /* Regular schedule editor (Oct 28): days, hours, how often, starting date. */ .reg-rows { display: grid; gap: 8px; margin: 8px 0; } .reg-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; } .reg-row .day-check { display: flex; gap: 8px; align-items: center; } .reg-times, .reg-opts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } @media (min-width: 640px) { .reg-row { grid-template-columns: 130px auto 1fr; align-items: center; } } .reg-summary { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff); font-size: 14px; } .reg-upcoming { padding-top: 6px; border-top: 1px dashed var(--line); } .reg-list { margin: 2px 0 0; padding-left: 18px; display: grid; gap: 2px; } .reg-times[hidden], .reg-opts[hidden] { display: none; } /* Kudos & Incidents (Oct 28) */ .kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kind-grid .pill { justify-content: center; } .tl { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .tl li { border-left: 3px solid var(--line); padding: 6px 0 6px 12px; } .tl li.pos { border-color: #3E9C7A; } .tl li.warn { border-color: #C98A2B; } .tl li.bad { border-color: #B5547A; } .ladder { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .ladder span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; } .ladder .done { background: var(--line); } .ladder .now { background: #C98A2B; color: #fff; border-color: #C98A2B; } .ladder .suggest { border: 2px dashed #C98A2B; font-weight: 700; } .ladder-card { background: #FFF7EA; border-color: #F0D9B0; padding: 10px 12px; } /* "Why this grade" pop-up (Oct 29) */ .why-btn { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; border-radius: 10px; } .why-btn:focus-visible { outline: 2px solid var(--brand-accent, #7b5fc4); } .why-big { border: 0; cursor: pointer; font: inherit; } .why-big .why-hint { font-size: 10px; margin-top: 4px; text-transform: none; letter-spacing: 0; opacity: .8; } .why-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line, #eee); } .why-total { border-top: 2px solid var(--line-strong, #ddd); } .why-tip { margin: 0; background: var(--tint-lilac); border-radius: 12px; padding: 10px 12px; font-size: 14px; } .ring-countdown { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: -6px; } .ring-countdown.done { color: #17664F; } /* Reports → Upsell (Oct 29) */ .upsell-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 8px; margin-top: 8px; } .upsell-stat { display: flex; flex-direction: column; gap: 2px; } .upsell-stat b.up, .spread b.up { color: #17664F; } .upsell-stat b.down, .spread b.down { color: #8C2346; } /* Reports → 1:1 (Oct 29) */ .oo-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 640px) { .oo-tiles { grid-template-columns: repeat(4, 1fr); } } .oo-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--tint-lilac); } .oo-tile b { font-size: 20px; } .oo-tile .up, .oo-week .up { color: #17664F; } .oo-tile .down { color: #8C2346; } .oo-week { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; } .upsell-table td.up { color: #17664F; font-weight: 600; } .upsell-table td.down { color: #8C2346; font-weight: 600; } .upsell-table th[scope=row] { white-space: nowrap; } .upsell-li { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line, #eee); padding: 10px 4px; font: inherit; color: inherit; cursor: pointer; } .upsell-name { display: flex; flex-direction: column; gap: 2px; } .upsell-li > b { white-space: nowrap; } .upsell-li b.up { color: #17664F; } .upsell-li b.down { color: #8C2346; } .upsell-open { padding: 4px 4px 12px; } .lost-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line, #eee); } .vis-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--muted); cursor: pointer; } .lost-row2 { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line, #eee); } .lost-pills .pill { font-size: 12px; padding: 4px 10px; } .redo-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; border-left: 4px solid var(--brand-primary, #6E57A8); } .jf-inspo-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .jf-inspo-row img { width: 110px; height: 140px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; } /* Important box (Britt, Oct 29): signed waiver, same look as the virtual consult's patch test. */ .jf-important { background: var(--brand-blush); border: 2px solid var(--brand-primary); border-radius: 12px; padding: 18px 16px; margin: 14px 0; } .jf-important-head { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; color: var(--brand-primary); margin: 0 0 8px; line-height: 1.2; } .jf-important-text { color: var(--ink); margin: 0 0 10px; line-height: 1.45; } /* Possible bookings for consultations (update 0138) */ .link-suggest { border-left: 4px solid var(--brand-primary, #c9a227); margin-bottom: 10px; gap: 6px; } .link-suggest.old { border-left-color: #b26a00; } .link-suggest .row { flex-wrap: wrap; gap: 8px; } .link-finder summary { cursor: pointer; font-weight: 600; } .link-finder .link-row { gap: 10px; padding: 8px 0; border-top: 1px solid var(--line, #eee); } .offer-panel { margin-bottom: 10px; } .offer-panel summary { cursor: pointer; font-weight: 600; } /* Optional add-on in the email generator (Britt, Oct 30): lighter purple */ .pill.pill-opt[aria-pressed="true"] { background: color-mix(in srgb, var(--brand-primary) 22%, #fff); border-color: var(--brand-primary); color: var(--brand-primary); } /* Email generator: a stylist included for one client though not set up for the service (Oct 30). */ .pill.pill-override { border-style: dashed; } .pill.pill-override[aria-pressed="false"] { opacity: .75; } .pill small { font-size: .78em; opacity: .85; } /* Days off by reason (Britt, Oct 30): green = excused, red = counts against the goal, amber = needs a reason */ .ts-cell.off-ok { background: #E3F4EA; color: #1F5C3E; font-weight: 600; } .ts-cell.off-counts { background: #FBE4E8; color: #A23A55; font-weight: 600; } .ts-cell.off-ask { background: #FFF1CC; color: #7A5600; font-weight: 600; }