/* ========================================================================== Pockethub roster + member enquiry dashboard — grey & red (logo palette) Light, flat and quick: white cards, thin borders, dark-grey top bar. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap'); :root{ --bg: #F1F2F4; --bg-2: #FFFFFF; --card: #FFFFFF; --card-hover: #FAFAFB; --border: #E3E4E8; --border-strong: #CFD0D5; --ink: #2F3032; --ink-muted: #5F6064; --ink-faint: #8A8B90; --grey-800: #3F4042; --grey-700: #4A4B4D; --red: #D7282F; --red-dark: #B5202A; --red-tint: rgba(215,40,47,0.10); --red-text: #D7282F; --gold: #D7282F; --gold-tint: rgba(215,40,47,0.10); --green: #2E9E5B; --green-tint: rgba(46,158,91,0.12); --danger: #D7282F; --radius: 6px; --maxw: 1120px; --font: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', Arial, sans-serif; --red-rgb: 215,40,47; } /* Colour themes — Grey & Red is the default above. The theme comes from : the viewer's own pick, else the circle's theme, else the site default (Master Settings). */ :root[data-theme="blue"]{ --bg:#F5F8FC; --card-hover:#F7FAFD; --border:#E2E8F0; --border-strong:#CBD4E0; --ink:#1E2A3B; --ink-muted:#56657A; --ink-faint:#7E8BA0; --grey-800:#26354A; --grey-700:#2E4059; --red:#1F5FD6; --red-dark:#1848A8; --red-rgb:31,95,214; --red-tint:rgba(31,95,214,0.10); --red-text:#1F5FD6; --gold:#1F5FD6; --gold-tint:rgba(31,95,214,0.10); } :root[data-theme="orange"]{ --bg:#F3F2F0; --card-hover:#FAF9F7; --border:#E8E5E0; --border-strong:#D6D2CB; --ink:#2B2A28; --ink-muted:#66625C; --ink-faint:#8C877F; --grey-800:#3A3835; --grey-700:#45423E; --red:#D9620B; --red-dark:#B24F06; --red-rgb:217,98,11; --red-tint:rgba(217,98,11,0.10); --red-text:#D9620B; --gold:#D9620B; --gold-tint:rgba(217,98,11,0.10); } :root[data-theme="green"]{ --bg:#F3F9F5; --card-hover:#F5FBF7; --border:#DCEAE1; --border-strong:#BFD8C8; --ink:#16281E; --ink-muted:#4C6357; --ink-faint:#7C9488; --grey-800:#1C3527; --grey-700:#20452F; --red:#18874B; --red-dark:#116B3A; --red-rgb:24,135,75; --red-tint:rgba(24,135,75,0.10); --red-text:#116B3A; --gold:#18874B; --gold-tint:rgba(24,135,75,0.10); } :root[data-theme="white"]{ --bg:#F7F8FA; --card-hover:#FBFCFD; --border:#E6E8EC; --border-strong:#D2D6DD; --ink:#1B2430; --ink-muted:#59616D; --ink-faint:#878E99; --grey-800:#222C3A; --grey-700:#2B3644; --red:#3A4757; --red-dark:#222C3A; --red-rgb:58,71,87; --red-tint:rgba(58,71,87,0.08); --red-text:#2B3644; --gold:#3A4757; --gold-tint:rgba(58,71,87,0.08); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } h1,h2,h3{ margin:0; font-weight:700; } p{ margin:0; } ::selection{ background:var(--red); color:#fff; } :focus-visible{ outline:2px solid var(--red); outline-offset:2px; } svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .h-ico{ width:18px; height:18px; margin-right:8px; vertical-align:-3px; color:var(--red); } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; } /* ---- Top bar (dark grey, red rule) ---- */ header.top{ background:var(--grey-700); border-bottom:3px solid var(--red); position:sticky; top:0; z-index:40; } .top-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap; } .brand{ display:flex; flex-direction:column; gap:1px; text-decoration:none; color:inherit; } .brand img{ height:30px; width:auto; } .brand small{ font-size:12px; color:#C9CACE; } .top-links{ display:flex; gap:8px; flex-wrap:wrap; } .top-links a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,0.35); border-radius:var(--radius); padding:6px 12px; } .top-links a:hover{ background:var(--red); border-color:var(--red); } main{ padding:18px 0 40px; } .section-head{ margin-bottom:12px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .section-head h2{ font-size:20px; } .section-head p{ color:var(--ink-muted); font-size:14px; } .banner-section{ margin-bottom:14px; } .deals-box{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin-bottom:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .deals-box h3{ font-size:14px; color:var(--grey-700); display:flex; align-items:center; white-space:nowrap; } .deals-chips{ display:flex; flex-wrap:wrap; gap:8px; } .deal-chip{ font-size:13px; border:1px solid var(--border-strong); border-radius:999px; padding:5px 12px; color:var(--ink-muted); background:#fff; cursor:pointer; font-family:inherit; } .deal-chip:hover{ border-color:var(--red); color:var(--ink); } .deal-chip b{ color:var(--ink); font-weight:600; } .deal-chip .days-left{ color:var(--red); font-weight:600; } .pocketlite-box{ margin-top:24px; border-top:1px solid var(--border); padding-top:14px; } .pocketlite-box h3{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); font-weight:700; margin-bottom:8px; display:flex; align-items:center; } .pocketlite-tags{ display:flex; flex-wrap:wrap; gap:8px; } .pocketlite-tag{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--border-strong); background:#fff; color:var(--ink); cursor:pointer; font-family:inherit; } .pocketlite-tag:hover{ border-color:var(--red); color:var(--red); } .pocketlite-tag .emoji{ font-size:14px; line-height:1; } .pocketlite-hero{ margin-top:14px; height:110px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:44px; background:var(--bg); border:1px solid var(--border); } .pocketlite-desc{ margin-top:14px; font-size:14px; color:var(--ink-muted); } .pocketlite-price{ margin-top:10px; font-size:15px; font-weight:700; color:var(--red); } /* ---- Banner carousel ---- */ .banner-section.top{ margin-top:0; } .banner-carousel{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--card); } .banner-track{ display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1); } .banner-slide{ min-width:100%; min-height:200px; display:flex; align-items:stretch; cursor:pointer; background:none; border:none; color:inherit; text-align:left; font:inherit; padding:0; } .banner-slide:hover .banner-cta{ text-decoration:underline; } .banner-art{ flex:0 0 240px; display:flex; align-items:center; justify-content:center; position:relative; border-right:1px solid var(--border); background: radial-gradient(120% 130% at 25% 15%, rgba(var(--red-rgb),0.22), transparent 60%), radial-gradient(120% 130% at 85% 90%, rgba(74,75,77,0.25), transparent 60%), var(--bg); } .banner-art.alt{ background: radial-gradient(120% 130% at 85% 15%, rgba(74,75,77,0.25), transparent 60%), radial-gradient(120% 130% at 20% 90%, rgba(var(--red-rgb),0.22), transparent 60%), var(--bg); } .banner-art svg{ width:90px; height:90px; color:var(--red); stroke-width:1.5; } .banner-art img{ width:100%; height:100%; object-fit:contain; object-position:center; position:absolute; inset:0; background:#fff; padding:10px; } .banner-content{ flex:1; min-width:0; padding:24px 32px; display:flex; flex-direction:column; justify-content:center; gap:8px; } .banner-eyebrow{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--red); font-weight:700; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .banner-days-left{ font-size:12px; color:var(--ink-muted); border:1px solid var(--border-strong); border-radius:999px; padding:2px 10px; text-transform:none; letter-spacing:normal; font-weight:600; background:#fff; } .banner-headline{ font-size:24px; font-weight:700; line-height:1.25; color:var(--ink); } .banner-sub{ font-size:14.5px; color:var(--ink-muted); } .banner-bottom-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; } .banner-phone{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink); text-decoration:none; border:1px solid var(--border-strong); border-radius:999px; padding:6px 14px; width:fit-content; background:#fff; } .banner-phone svg{ width:14px; height:14px; } .banner-phone:hover{ border-color:var(--red); color:var(--red); } .banner-cta{ font-size:13.5px; color:var(--red); font-weight:600; } /* slim, translucent arrows in the bottom-right of the text panel — never over the image */ .banner-nav{ position:absolute; bottom:10px; background:rgba(255,255,255,0.55); border:1px solid var(--border-strong); color:var(--ink-muted); width:26px; height:26px; border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; line-height:1; z-index:2; padding:0; } .banner-nav:hover{ background:var(--red); border-color:var(--red); color:#fff; } .banner-nav.prev{ right:44px; } .banner-nav.next{ right:12px; } @media (max-width:480px){ .banner-nav{ bottom:8px; } } .banner-dots{ display:flex; gap:6px; justify-content:center; padding:8px 0 0; } .banner-dot{ width:7px; height:7px; border-radius:50%; background:var(--border-strong); cursor:pointer; border:none; padding:0; } .banner-dot.active{ background:var(--red); width:18px; border-radius:4px; } /* ---- Search + filters ---- */ .controls{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; } .search-wrap{ position:relative; } .search-ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-faint); width:17px; height:17px; } .search-input{ width:100%; background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--ink); padding:10px 12px 10px 38px; font-family:inherit; font-size:14.5px; } .search-input:focus{ border-color:var(--red); outline:none; box-shadow:0 0 0 2px var(--red-tint); } .search-suggest{ display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:0 8px 20px rgba(0,0,0,0.12); max-height:340px; overflow-y:auto; } .search-suggest.open{ display:block; } .suggest-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--border); padding:8px 12px; cursor:pointer; font-family:inherit; color:var(--ink); } .suggest-item:last-child{ border-bottom:none; } .suggest-item:hover{ background:var(--bg); } .suggest-main{ display:flex; flex-direction:column; min-width:0; flex:1; } .suggest-main b{ font-size:14px; } .suggest-company{ font-size:12.5px; color:var(--ink-faint); } .suggest-cat{ font-size:12px; color:var(--red); font-weight:600; white-space:nowrap; background:var(--red-tint); border-radius:999px; padding:3px 9px; max-width:45%; overflow:hidden; text-overflow:ellipsis; } .suggest-empty{ padding:10px 12px; color:var(--ink-faint); font-size:13.5px; } .team-filters{ display:flex; flex-wrap:wrap; gap:8px; } .team-chip{ border:1px solid var(--border-strong); background:#fff; color:var(--ink-muted); padding:6px 12px; border-radius:999px; font-size:13px; cursor:pointer; font-family:inherit; font-weight:600; } .team-chip:hover{ color:var(--ink); border-color:var(--ink-faint); } .team-chip.active{ background:var(--red); border-color:var(--red); color:#fff; } .grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; } @media (max-width:900px){ .grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:700px){ .banner-art{ flex:0 0 160px; } .banner-art svg{ width:64px; height:64px; } .banner-content{ padding:18px 22px; } .banner-headline{ font-size:20px; } } @media (max-width:560px){ .grid{ grid-template-columns:1fr; } } @media (max-width:480px){ main{ padding:14px 0 40px; } .section-head h2{ font-size:18px; } .member-card{ padding:14px; } .submit-row{ flex-direction:column; align-items:stretch; } .submit-btn{ width:100%; } footer{ flex-direction:column; text-align:center; } .banner-slide{ flex-direction:column; min-height:0; } .banner-art{ flex-basis:auto; height:110px; border-right:none; border-bottom:1px solid var(--border); } .banner-art svg{ width:50px; height:50px; } .banner-content{ padding:16px; } .banner-headline{ font-size:18px; } .banner-sub{ font-size:13px; } .banner-nav{ width:30px; height:30px; font-size:16px; } } /* ---- Member cards ---- */ .member-card{ text-align:left; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; color:inherit; font:inherit; display:flex; flex-direction:column; gap:8px; } .member-card:hover, .member-card:focus-within{ border-color:var(--red); } .avatar-row{ display:flex; align-items:center; gap:10px; } .avatar{ width:42px; height:42px; border-radius:50%; background:var(--red-tint); color:var(--red); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; overflow:hidden; } .avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .avatar.big{ width:52px; height:52px; font-size:17px; } .avatar.sm{ width:30px; height:30px; font-size:11px; } .member-name{ font-size:15.5px; font-weight:700; line-height:1.25; } .member-company{ font-size:12.5px; color:var(--ink-faint); } .category-badge{ display:inline-block; font-size:11.5px; color:var(--red); background:var(--red-tint); border-radius:999px; padding:3px 10px; width:fit-content; font-weight:600; } .member-desc{ font-size:13.5px; color:var(--ink-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .role-badge{ font-size:12px; color:var(--ink-faint); display:inline-flex; align-items:center; gap:5px; } .role-badge svg{ width:12px; height:12px; } .card-actions{ display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; } .icon-btn{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:var(--radius); border:1px solid var(--border-strong); background:#fff; color:var(--ink-muted); cursor:pointer; font-family:inherit; } .icon-btn svg{ width:14px; height:14px; } .icon-btn.view-btn:hover{ border-color:var(--grey-700); color:var(--ink); } .icon-btn.whatsapp-btn{ border-color:#25D366; color:#1B8A46; } .icon-btn.whatsapp-btn:hover{ background:#25D366; border-color:#25D366; color:#fff; } .no-results{ color:var(--ink-faint); font-size:14px; padding:30px 0; text-align:center; } .spinner{ display:inline-block; width:14px; height:14px; border:2px solid var(--border-strong); border-top-color:var(--red); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:6px; } @keyframes spin{ to{ transform:rotate(360deg); } } footer{ border-top:1px solid var(--border); padding:16px 0; font-size:13px; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; background:#fff; } .overlay{ position:fixed; inset:0; background:rgba(47,48,50,0.6); display:none; align-items:center; justify-content:center; padding:16px; z-index:50; } .overlay.open{ display:flex; } /* ---- Gates ---- */ .gate-overlay{ position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:16px; z-index:999; } .gate-box{ background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); max-width:420px; width:100%; padding:26px; text-align:center; box-shadow:0 16px 40px rgba(0,0,0,0.12); } .gate-logo{ height:34px; width:auto; margin-bottom:14px; } .gate-box h2{ font-size:19px; margin-bottom:6px; } .gate-box p{ color:var(--ink-muted); font-size:14px; margin-bottom:16px; } .gate-box .field-input{ text-align:center; margin-bottom:0; } .gate-box .field-error{ text-align:left; } .gate-box .submit-btn{ width:100%; margin-top:12px; justify-content:center; } .gate-note{ color:var(--ink-faint); font-size:12px; margin-top:12px; } /* ---- Modals (white dialog, title + ×) ---- */ .modal{ background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); max-width:600px; width:100%; max-height:90vh; overflow-y:auto; padding:22px; box-shadow:0 16px 40px rgba(0,0,0,0.25); } .modal.modal-sm{ max-width:420px; } @media (max-width:560px){ .modal{ padding:16px; } } .modal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:6px; padding-bottom:12px; border-bottom:1px solid var(--border); } .modal-head .tag{ font-size:11.5px; color:var(--red); text-transform:uppercase; letter-spacing:.06em; font-weight:700; } .modal-head h2{ font-size:20px; margin-top:2px; } .modal-head p{ color:var(--ink-muted); font-size:13.5px; margin-top:4px; } .close-btn{ background:#fff; border:1px solid var(--border); color:var(--ink-muted); width:30px; height:30px; border-radius:var(--radius); cursor:pointer; font-size:18px; line-height:1; flex-shrink:0; } .close-btn:hover{ color:var(--red); border-color:var(--red); } /* ---- Business card ---- */ .biz-card{ display:flex; gap:14px; align-items:flex-start; margin-top:14px; padding:14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); } .biz-card-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; } .biz-card-name{ font-size:16.5px; font-weight:700; } .biz-card-meta{ font-size:13px; color:var(--ink-muted); } .biz-card-desc{ font-size:14px; color:var(--ink-muted); } .biz-card-contacts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; } .biz-contact-pill{ font-size:13px; border:1px solid var(--border-strong); border-radius:999px; padding:5px 12px; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:6px; background:#fff; } .biz-contact-pill svg{ width:13px; height:13px; } .biz-contact-pill:hover{ border-color:var(--red); color:var(--red); } button.biz-contact-pill.reveal-btn{ cursor:pointer; font-family:inherit; } .reveal-btn.reveal-testimonials-btn{ border:1px solid var(--border-strong); background:#fff; color:var(--ink); padding:9px 14px; border-radius:var(--radius); font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; width:100%; } .reveal-btn.reveal-testimonials-btn:hover{ border-color:var(--red); color:var(--red); } .details-section{ margin-top:16px; } .details-subhead{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); font-weight:700; margin-bottom:8px; } .gallery-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .gallery-tile{ aspect-ratio:1/1; border-radius:var(--radius); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; overflow:hidden; font-family:inherit; -webkit-tap-highlight-color:transparent; background:radial-gradient(120% 130% at 30% 20%, rgba(var(--red-rgb),0.14), transparent 60%), var(--bg); } .gallery-tile.has-img{ background:#fff; } .gallery-tile:hover, .gallery-tile:focus-visible{ border-color:var(--red); } .gallery-tile svg{ width:30px; height:30px; color:var(--red); stroke-width:1.5; } .gallery-tile img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; background:#fff; padding:6px; } .lightbox-overlay{ z-index:60; } .lightbox-modal{ background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); max-width:520px; width:100%; padding:12px; } .lightbox-head{ display:flex; justify-content:flex-end; margin-bottom:8px; } .lightbox-frame{ aspect-ratio:1/1; border-radius:var(--radius); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(120% 130% at 30% 20%, rgba(var(--red-rgb),0.14), transparent 60%), var(--bg); } .lightbox-frame svg{ width:90px; height:90px; color:var(--red); stroke-width:1.5; } .lightbox-frame img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; background:#fff; padding:8px; } .lightbox-frame.has-img{ background:#fff; } .lightbox-modal{ max-width:min(720px, 96vw); } .lightbox-frame{ aspect-ratio:4/3; max-height:70vh; } .lightbox-caption{ margin-top:10px; text-align:center; font-size:13.5px; color:var(--ink-muted); } /* ---- Local admin popup ---- */ .admin-modal{ background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); max-width:900px; width:100%; max-height:90vh; overflow-y:auto; padding:20px 22px; box-shadow:0 16px 40px rgba(0,0,0,0.25); } .admin-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; margin-top:14px; } .admin-highlights{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px; margin-top:10px; } .admin-highlight-card{ background:var(--grey-700); color:#fff; border-radius:var(--radius); padding:12px 14px; } .admin-highlight-card .hl-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:#FF8A8F; font-weight:700; margin-bottom:4px; } .admin-highlight-card .hl-name{ font-size:14.5px; font-weight:700; } .admin-highlight-card .hl-sub{ font-size:12px; color:#C9CACE; margin-top:2px; } .admin-stat{ border:1px solid var(--border); border-left:4px solid var(--red); border-radius:var(--radius); padding:10px 12px; background:#fff; } .admin-stat .n{ font-size:20px; font-weight:700; color:var(--red); } .admin-stat .l{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; } .admin-tabs{ display:flex; gap:8px; margin-top:16px; border-bottom:1px solid var(--border); } .admin-tab{ background:transparent; border:none; border-bottom:2px solid transparent; color:var(--ink-faint); font-family:inherit; font-size:13.5px; font-weight:600; padding:8px 4px; margin-bottom:-1px; cursor:pointer; } .admin-tab[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--red); } .admin-panel{ margin-top:12px; } .table-scroll{ overflow-x:auto; } .admin-table{ width:100%; border-collapse:collapse; font-size:13px; border:1px solid var(--border); } .admin-table th{ text-align:left; color:var(--grey-700); font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:0.04em; padding:9px 10px; border:1px solid var(--border); border-bottom-width:2px; white-space:nowrap; background:var(--bg); } .admin-table td{ padding:8px 10px; border:1px solid var(--border); vertical-align:top; } .admin-table tbody tr:nth-child(odd) td{ background:#FBFBFC; } .admin-empty{ font-size:13px; color:var(--ink-faint); font-style:italic; padding:12px 4px; } .admin-repeat{ color:var(--red); font-weight:700; } .admin-actions{ display:flex; gap:8px; margin-top:16px; } .testimonial-list{ display:flex; flex-direction:column; gap:8px; } .testimonial-item{ border:1px solid var(--border); border-left:3px solid var(--red); border-radius:var(--radius); padding:11px 13px; background:#fff; } .testimonial-quote{ font-size:14px; color:var(--ink); line-height:1.5; } .testimonial-author{ font-size:12.5px; color:var(--ink-faint); margin-top:6px; } .testimonial-empty{ font-size:13.5px; color:var(--ink-faint); font-style:italic; padding:4px 2px; } /* ---- Forms ---- */ fieldset{ border:none; margin:16px 0 0; padding:0; } legend{ font-size:12px; color:var(--grey-700); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; padding:0; } .chip-row{ display:flex; flex-wrap:wrap; gap:8px; } .chip{ border:1px solid var(--border-strong); background:#fff; color:var(--ink-muted); padding:7px 14px; border-radius:999px; font-size:13.5px; cursor:pointer; font-family:inherit; } .chip:hover{ border-color:var(--ink-faint); color:var(--ink); } .chip-single[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:#fff; font-weight:600; } .chip-multi[aria-pressed="true"]{ background:var(--red-tint); border-color:var(--red); color:var(--red); font-weight:600; } .chip-multi[aria-pressed="true"]::before{ content:"\2713 "; } .field-input, textarea{ width:100%; background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--ink); padding:10px 12px; font-family:inherit; font-size:14.5px; } textarea{ min-height:70px; resize:vertical; } .field-input::placeholder, textarea::placeholder{ color:var(--ink-faint); } .field-input:focus, textarea:focus{ border-color:var(--red); outline:none; box-shadow:0 0 0 2px var(--red-tint); } .field-error{ font-size:12.5px; color:var(--danger); margin-top:6px; display:none; } .field-error.visible{ display:block; } .submit-row{ margin-top:20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .submit-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; border:1px solid var(--red); border-radius:var(--radius); padding:10px 18px; font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit; } .submit-btn svg{ width:16px; height:16px; } .submit-btn:hover{ background:var(--red-dark); } .submit-note{ font-size:13px; color:var(--ink-faint); text-decoration:none; } .login-alt{ margin-top:14px; font-size:13px; color:var(--ink-muted); } .login-alt a{ color:var(--red); font-weight:600; } .message-box{ width:100%; min-height:200px; background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--ink); padding:14px; font-family:inherit; font-size:14px; line-height:1.55; resize:vertical; margin-top:12px; } .results-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; } .copy-btn{ background:var(--grey-700); color:#fff; border:1px solid var(--grey-700); border-radius:var(--radius); padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; } .copy-btn:hover{ background:var(--grey-800); } .wa-link{ display:inline-flex; align-items:center; gap:8px; border:1px solid #25D366; background:#25D366; color:#fff; border-radius:var(--radius); padding:9px 16px; font-size:14px; font-weight:600; text-decoration:none; } .wa-link:hover{ filter:brightness(0.95); } .back-btn{ background:none; border:none; color:var(--ink-faint); font-size:13px; cursor:pointer; margin-top:12px; text-decoration:underline; font-family:inherit; padding:0; } .back-btn:hover{ color:var(--ink); } /* ========================================================================== Member enquiry dashboard (roster/dashboard) ========================================================================== */ .dash-main{ padding:18px 0 40px; } .dash-wrap{ max-width:860px; } .login-box{ max-width:420px; margin:24px auto 0; background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); padding:24px; text-align:center; box-shadow:0 16px 40px rgba(0,0,0,0.12); } .login-box h2{ font-size:19px; margin-bottom:6px; } .login-box p{ color:var(--ink-muted); font-size:14px; margin-bottom:16px; } .login-box input{ width:100%; background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--ink); padding:11px 12px; font-family:inherit; font-size:15px; text-align:center; margin-bottom:10px; } .login-box input:focus{ border-color:var(--red); outline:none; } .login-btn{ width:100%; background:var(--red); color:#fff; border:1px solid var(--red); border-radius:var(--radius); padding:11px; font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit; } .login-btn:hover{ background:var(--red-dark); } .login-error{ color:var(--danger); font-size:13px; margin-top:10px; } .login-note{ color:var(--ink-faint); font-size:12.5px; margin-top:12px; } .welcome-row{ margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--grey-700); color:#fff; border-radius:var(--radius); padding:14px 18px; } .welcome-row h2{ font-size:20px; margin-bottom:2px; color:#fff; } .welcome-row p{ color:#C9CACE; font-size:13.5px; } .logout-btn{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid rgba(255,255,255,0.5); color:#fff; border-radius:var(--radius); padding:7px 12px; font-size:13px; cursor:pointer; font-family:inherit; text-decoration:none; } .logout-btn:hover{ background:var(--red); border-color:var(--red); } .stats-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:12px; } @media (max-width:600px){ .stats-row{ grid-template-columns:repeat(2, 1fr); } } .stat-card{ background:#fff; border:1px solid var(--border); border-left:4px solid var(--red); border-radius:var(--radius); padding:12px 14px; flex:1; min-width:130px; display:flex; align-items:center; gap:12px; } .stat-card svg{ width:22px; height:22px; color:var(--ink-faint); stroke-width:1.6; } .stat-card .num{ font-size:24px; font-weight:700; color:var(--red); line-height:1.1; } .stat-card .label{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; } .toolbar{ display:flex; justify-content:space-between; align-items:center; margin:16px 0 10px; flex-wrap:wrap; gap:10px; } .toolbar h3{ font-size:14px; color:var(--grey-700); font-weight:700; text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; } .refresh-btn{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border-strong); color:var(--ink); border-radius:var(--radius); padding:7px 12px; font-size:13px; cursor:pointer; font-family:inherit; font-weight:600; } .refresh-btn:hover{ border-color:var(--red); color:var(--red); } .refresh-btn.primary{ background:var(--red); border-color:var(--red); color:#fff; } .refresh-btn.primary:hover{ background:var(--red-dark); color:#fff; } .lead-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; } .lead-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; } .lead-name{ font-size:15.5px; font-weight:700; } .lead-visitor-phone{ font-size:12.5px; font-weight:400; color:var(--ink-faint); margin-left:6px; } .lead-time{ font-size:12.5px; color:var(--ink-faint); } .lead-phone{ font-size:13.5px; color:var(--red); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:5px; } .lead-phone:hover{ text-decoration:underline; } .lead-message{ font-family:var(--font); font-size:13.5px; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-top:10px; white-space:pre-wrap; word-wrap:break-word; line-height:1.5; } .lead-detail-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .lead-tag{ font-size:12px; background:var(--red-tint); color:var(--red); border-radius:999px; padding:3px 10px; font-weight:600; } .lead-notes{ font-size:13.5px; color:var(--ink-muted); margin-top:8px; } .empty-state, .loading-state, .error-state{ text-align:center; color:var(--ink-faint); font-size:14px; padding:30px 16px; background:#fff; border:1px dashed var(--border-strong); border-radius:var(--radius); } .error-state{ color:var(--danger); } .retry-btn{ margin-top:10px; background:var(--red); color:#fff; border:1px solid var(--red); border-radius:var(--radius); padding:8px 14px; font-size:13.5px; cursor:pointer; font-family:inherit; } .session-toggle{ background:none; border:none; color:var(--red); font-size:13px; cursor:pointer; font-family:inherit; padding:0; margin-top:8px; text-decoration:underline; font-weight:600; } .session-timeline{ display:none; margin-top:10px; border-top:1px solid var(--border); padding-top:10px; } .session-timeline.open{ display:block; } .session-timeline-item{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink-muted); padding:5px 0; } .session-timeline-item + .session-timeline-item{ border-top:1px dashed var(--border); } .session-timeline-item .st-time{ color:var(--ink-faint); white-space:nowrap; } /* ---- Member banner management (dashboard) ---- */ .banner-table{ width:100%; border-collapse:collapse; font-size:13.5px; background:#fff; border:1px solid var(--border); } .banner-table th{ text-align:left; background:var(--bg); color:var(--grey-700); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; padding:9px 10px; border:1px solid var(--border); border-bottom-width:2px; white-space:nowrap; } .banner-table td{ padding:9px 10px; border:1px solid var(--border); vertical-align:middle; } .banner-table tbody tr:nth-child(odd) td{ background:#FBFBFC; } .pill{ display:inline-block; font-size:11px; font-weight:700; border-radius:3px; padding:2px 8px; text-transform:uppercase; letter-spacing:.04em; } .pill.live{ background:var(--green-tint); color:#1B6B3E; } .pill.upcoming{ background:#FFF4D6; color:#8A5A00; } .pill.ended{ background:var(--bg); color:var(--ink-faint); } .mini-btn{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; padding:4px 9px; border-radius:var(--radius); border:1px solid var(--border-strong); background:#fff; color:var(--ink); cursor:pointer; font-family:inherit; } .mini-btn svg{ width:13px; height:13px; } .mini-btn:hover{ border-color:var(--red); color:var(--red); } .mini-btn.danger{ color:var(--red); border-color:var(--red); } .mini-btn.danger:hover{ background:var(--red); color:#fff; } .form-row{ display:grid; grid-template-columns:2fr 1fr; gap:12px; } @media (max-width:480px){ .form-row{ grid-template-columns:1fr; } } .form-error{ display:none; margin-top:12px; font-size:13px; color:var(--danger); } .form-error.visible{ display:block; } /* ---- Member product images (dashboard) ---- */ .count-pill{ font-size:11px; background:var(--red-tint); color:var(--red); border-radius:999px; padding:2px 8px; margin-left:8px; letter-spacing:0; } .gallery-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; } @media (max-width:800px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:480px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); } } .gallery-item{ margin:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; } .gallery-item img{ width:100%; aspect-ratio:1/1; object-fit:contain; object-position:center; display:block; background:#fff; padding:6px; } .gallery-item figcaption{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 8px; font-size:12.5px; color:var(--ink-muted); } .gallery-item figcaption span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gallery-item .mini-btn{ padding:3px 6px; } .gallery-tile{ position:relative; } .gallery-label{ position:absolute; left:0; right:0; bottom:0; background:rgba(47,48,50,0.75); color:#fff; font-size:11px; padding:3px 6px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } input[type=file].field-input{ padding:8px; } /* ---- Deals ticker ---- */ .ticker{ display:flex; align-items:center; gap:0; background:#fff; border:1px solid var(--border); border-left:4px solid var(--red); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; height:38px; } .ticker-tag{ display:inline-flex; align-items:center; gap:6px; padding:0 12px; height:100%; background:var(--red); color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; flex-shrink:0; } .ticker-viewport{ flex:1; min-width:0; overflow:hidden; height:100%; display:flex; align-items:center; } .ticker-track{ display:inline-flex; align-items:center; white-space:nowrap; will-change:transform; padding-left:100%; animation:ticker-ltr 40s linear infinite; } .ticker:hover .ticker-track, .ticker:focus-within .ticker-track{ animation-play-state:paused; } /* news-ticker direction: text enters from the right and flows left */ @keyframes ticker-ltr{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } } .ticker-item{ background:none; border:none; font:inherit; font-size:14px; color:var(--red); cursor:pointer; padding:0 14px; white-space:nowrap; font-weight:600; } .ticker-item b{ font-weight:700; color:var(--red-dark); } .ticker-item:hover{ text-decoration:underline; } .ticker-days{ font-weight:400; color:var(--ink-muted); } .ticker-sep{ color:var(--border-strong); } .deal-member{ cursor:pointer; } .deal-member:hover{ border-color:var(--red); } @media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } } .lead-tag.industry{ background:var(--grey-700); color:#fff; display:inline-flex; align-items:center; gap:5px; } .lead-tag.industry svg{ width:12px; height:12px; } .pill.pending{ background:#FFF4D6; color:#8A5A00; } .pill.rejected{ background:var(--red-tint); color:var(--red-dark); } /* ========================================================================== Member dashboard — full-width shell: side menu | overview | enquiries ========================================================================== */ .top-inner-full{ max-width:none; padding-left:20px; padding-right:20px; } .dash-body{ background:var(--bg); } .dash-shell{ display:grid; grid-template-columns:230px minmax(0,1fr) 360px; gap:16px; padding:16px 20px 32px; align-items:start; } @media (max-width:1180px){ .dash-shell{ grid-template-columns:210px minmax(0,1fr); } .dash-right{ grid-column:1 / -1; } } @media (max-width:820px){ .dash-shell{ grid-template-columns:1fr; padding:12px; } .dash-side{ position:static; } } .dash-side{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); position:sticky; top:74px; overflow:hidden; } .dash-profile{ display:flex; align-items:center; gap:10px; padding:14px; background:var(--grey-700); color:#fff; } .dash-profile img, .dash-avatar{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--red); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; } .dash-profile > div{ display:flex; flex-direction:column; min-width:0; } .dash-profile b{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dash-profile small{ font-size:12px; color:#C9CACE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dash-nav{ display:flex; flex-direction:column; padding:8px; } .dash-nav-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:700; padding:10px 10px 4px; } .dash-nav a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius); color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; } .dash-nav a svg{ width:16px; height:16px; color:var(--ink-faint); } .dash-nav a:hover{ background:var(--red-tint); color:var(--red); } .dash-nav a:hover svg{ color:var(--red); } .dash-nav a.active{ background:var(--red); color:#fff; } .dash-nav a.active svg{ color:#fff; } @media (max-width:820px){ .dash-nav{ flex-direction:row; flex-wrap:wrap; } .dash-nav-label{ display:none; } } .dash-content{ min-width:0; } .dash-content .welcome-row{ margin-bottom:12px; } .dash-h{ font-size:14px; color:var(--grey-700); font-weight:700; text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; margin:14px 0 8px; } .dash-content .stats-row{ grid-template-columns:repeat(6, 1fr); } @media (max-width:1400px){ .dash-content .stats-row{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:600px){ .dash-content .stats-row{ grid-template-columns:repeat(2, 1fr); } } .dash-content .gallery-grid{ grid-template-columns:repeat(6, 1fr); } @media (max-width:1400px){ .dash-content .gallery-grid{ grid-template-columns:repeat(3, 1fr); } } /* glossy tiles (portal numbers) */ .tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; } @media (max-width:1400px){ .tiles{ grid-template-columns:repeat(2, 1fr); } } .tile{ position:relative; overflow:hidden; display:flex; flex-direction:column; color:#fff; text-decoration:none; border-radius:var(--radius); padding:12px 14px 34px; min-height:96px; background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06) 48%, rgba(0,0,0,0.10)), var(--tile, var(--red)); box-shadow:0 4px 12px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.35); } .tile.red{ --tile:var(--red); } .tile.grey{ --tile:#4A4B4D; } .tile.deep{ --tile:var(--red-dark); } .tile.mid{ --tile:#6B6C70; } .tile b{ font-size:24px; font-weight:700; line-height:1.1; } .tile span{ font-size:13px; font-weight:600; opacity:.95; margin-top:2px; } .tile svg{ position:absolute; right:10px; top:10px; width:44px; height:44px; color:rgba(0,0,0,0.22); stroke-width:1.5; } .tile i{ position:absolute; left:0; right:0; bottom:0; font-style:normal; font-size:12px; font-weight:600; text-align:center; padding:5px; background:rgba(0,0,0,0.18); } .tile:hover i{ background:rgba(0,0,0,0.3); } .dash-right{ min-width:0; } .dash-right .lead-card{ padding:12px 14px; } .dash-right .lead-message{ max-height:160px; overflow:auto; font-size:13px; } .dash-right .refresh-btn{ padding:6px 9px; text-decoration:none; } .events{ display:flex; flex-direction:column; gap:8px; } .event{ display:flex; gap:10px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; } .event-date{ display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--red); color:#fff; border-radius:4px; width:46px; flex-shrink:0; line-height:1; padding:6px 0; } .event-date b{ font-size:18px; } .event-date span{ font-size:11px; text-transform:uppercase; } .event-body{ display:flex; flex-direction:column; min-width:0; } .event-body b{ font-size:14px; } .event-body span{ font-size:12.5px; color:var(--ink-muted); } .flash{ padding:10px 12px; border-radius:var(--radius); font-size:14px; margin-bottom:10px; } .flash.ok{ background:var(--green-tint); color:#1B6B3E; border:1px solid #BFE5CF; } .flash.err{ background:var(--red-tint); color:var(--red-dark); border:1px solid #F3C2C5; }.dash-content .stat-card{ padding:10px 12px; gap:8px; } .dash-content .stat-card .label{ font-size:12px; line-height:1.2; } .dash-content .stat-card .num{ font-size:22px; } .dash-content .stat-card svg{ width:20px; height:20px; } .modal.modal-xl{ max-width:1180px; width:96vw; padding:14px 16px 16px; } .page-modal iframe{ width:100%; height:78vh; border:1px solid var(--border); border-radius:var(--radius); background:#fff; display:block; } .page-actions{ display:flex; gap:8px; align-items:center; } .page-actions .refresh-btn{ text-decoration:none; } /* cleaner popup frame for view/edit pages */ .page-modal{ padding:0 !important; overflow:hidden; } .page-modal .modal-head{ margin:0; padding:10px 16px; background:var(--grey-700); color:#fff; border-bottom:3px solid var(--red); align-items:center; } .page-modal .modal-head .tag{ color:#FF8A8F; } .page-modal .modal-head h2{ color:#fff; font-size:17px; margin:0; } .page-modal .page-actions .refresh-btn{ background:transparent; border-color:rgba(255,255,255,0.5); color:#fff; } .page-modal .page-actions .refresh-btn:hover{ background:var(--red); border-color:var(--red); color:#fff; } .page-modal .close-btn{ background:transparent; border-color:rgba(255,255,255,0.5); color:#fff; } .page-modal .close-btn:hover{ background:var(--red); border-color:var(--red); } .page-modal iframe{ border:0; border-radius:0; height:80vh; } /* ---- compact enquiry cards (dashboard right column) ---- */ .lead-summary{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer; } .lead-summary .lead-name{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .lead-ind{ font-size:11px; background:var(--grey-700); color:#fff; border-radius:999px; padding:1px 8px; font-weight:600; } .lead-chev{ width:16px; height:16px; color:var(--ink-faint); transition:transform .15s; } .lead-card.collapsed .lead-chev{ transform:rotate(-90deg); } .lead-card.collapsed .lead-body{ display:none; } .lead-body{ margin-top:8px; } .dash-right .lead-card{ padding:10px 12px; } /* ---- enquiries page ---- */ .enq-main{ padding:14px 16px 28px; } .enq-page.in-popup .enq-main{ padding:8px 4px 16px; } .enq-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; } .enq-stats{ display:flex; gap:14px; font-size:13px; color:var(--ink-muted); } .enq-stat b{ color:var(--red); font-size:16px; margin-right:3px; } .enq-filters{ display:flex; gap:6px; flex-wrap:wrap; } .enq-filters .field-input{ width:auto; min-width:140px; height:34px; padding:4px 10px; font-size:13.5px; } .enq-filters #f-q{ min-width:220px; } .enq-table td.nowrap{ white-space:nowrap; } .enq-table .muted{ font-size:11.5px; color:var(--ink-faint); } .enq-row.open td{ background:var(--red-tint) !important; } .enq-row.open .enq-toggle svg{ transform:rotate(180deg); } .enq-detail td{ background:#fff !important; padding:12px 14px !important; } .enq-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:900px){ .enq-detail-grid{ grid-template-columns:1fr; } } .journey{ display:flex; flex-direction:column; gap:0; border-left:2px solid var(--border-strong); margin-left:6px; padding-left:12px; } .journey-step{ display:flex; align-items:center; gap:8px; font-size:13px; padding:5px 0; position:relative; } .journey-step .journey-dot{ position:absolute; left:-18px; width:10px; height:10px; border-radius:50%; background:var(--red); border:2px solid #fff; } .journey-step .st-time{ margin-left:auto; color:var(--ink-faint); white-space:nowrap; font-size:12px; }/* popup sizes: compact for forms, wide for lists; height follows the content */ .page-modal.size-sm{ max-width:620px; } .page-modal.size-md{ max-width:860px; } .page-modal.size-lg{ max-width:1100px; } .page-modal iframe{ height:auto; min-height:220px; max-height:82vh; transition:height .15s ease; } .overlay{ align-items:flex-start; padding-top:5vh; } .overlay:not(#page-overlay){ align-items:center; padding-top:16px; } /* testimonials page */ .testi-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:18px; align-items:start; } .enq-page.in-popup .testi-grid, .testi-grid.single{ grid-template-columns:1fr; } @media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } } .testi-form-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; } .enq-page.in-popup .testi-form-card{ border:0; padding:0; } .enq-page.in-popup .enq-main{ padding:4px 2px 8px; } /* QR code on the business card */ .qr-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .qr-thumb{ width:110px; height:110px; padding:4px; background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); cursor:zoom-in; } .qr-thumb img{ width:100%; height:100%; object-fit:contain; display:block; } .qr-actions{ display:flex; flex-direction:column; gap:8px; } /* compact testimonial popup */ .enq-page.in-popup .testi-form-card fieldset{ margin-top:10px; } .enq-page.in-popup .testi-form-card textarea{ min-height:70px; } .enq-page.in-popup .toolbar{ margin:10px 0 6px; } .enq-page.in-popup .empty-state{ padding:14px; font-size:13px; } .enq-page.in-popup .dash-h{ margin-bottom:4px; } /* birthdays & anniversaries */ .event.celeb{ align-items:center; } .event.celeb.today{ border-color:var(--red); background:#FFF7F7; } .event-date.bday{ background:var(--red); } .event-date.anniv{ background:var(--grey-700); } .today-tag{ font-style:normal; color:var(--red); font-weight:700; } .event .mini-btn.wish{ margin-left:auto; color:#1B8A46; border-color:#25D366; } .event .mini-btn.wish:hover{ background:#25D366; color:#fff; } /* ---- vertical advert rails (left/right of the roster on wide screens) ---- */ .side-rail{ display:none; position:fixed; top:96px; width:200px; z-index:30; } @media (min-width:1560px){ .side-rail{ display:block; } .side-rail.left{ left:calc(50% - 560px - 222px); } .side-rail.right{ left:calc(50% + 560px + 22px); } } @media (min-width:1500px) and (max-width:1559px){ .side-rail{ display:block; width:170px; } .side-rail.left{ left:calc(50% - 560px - 190px); } .side-rail.right{ left:calc(50% + 560px + 20px); } } .rail-ad{ display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; position:relative; } .rail-ad img{ width:100%; height:auto; max-height:calc(100vh - 200px); object-fit:contain; display:block; background:#fff; } .rail-cap{ display:block; padding:8px 10px; font-size:12px; color:var(--ink-muted); line-height:1.3; } .rail-cap b{ display:block; color:var(--ink); font-size:13px; } .rail-tag{ position:absolute; top:8px; left:8px; background:rgba(47,48,50,0.75); color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:2px 7px; border-radius:3px; } .rail-ad:hover{ border-color:var(--red); } /* member dashboard: vertical banner list */ .vb-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; } .vb-item{ margin:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .vb-item img{ width:100%; height:220px; object-fit:contain; background:var(--bg); display:block; } .vb-item figcaption{ padding:8px 10px; display:flex; flex-direction:column; gap:6px; font-size:12.5px; } .vb-meta{ color:var(--ink-muted); } /* ---- assistant bot (red) ---- */ .bot-fab{ position:fixed; right:22px; bottom:22px; width:54px; height:54px; border-radius:50%; background:var(--red); color:#fff; border:0; cursor:pointer; z-index:45; box-shadow:0 8px 20px rgba(var(--red-rgb),0.4); display:flex; align-items:center; justify-content:center; } .bot-fab svg{ width:28px; height:28px; stroke-width:1.8; } .bot-fab:hover{ background:var(--red-dark); } .bot-panel{ position:fixed; right:22px; bottom:86px; width:340px; max-width:calc(100vw - 32px); background:#fff; border:1px solid var(--border-strong); border-radius:10px; box-shadow:0 18px 44px rgba(0,0,0,0.25); z-index:46; display:none; flex-direction:column; overflow:hidden; } .bot-panel.open{ display:flex; } .bot-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--red); color:#fff; } .bot-head b{ display:block; font-size:14px; } .bot-head small{ font-size:11.5px; opacity:.9; } .bot-head .close-btn{ margin-left:auto; background:transparent; border-color:rgba(255,255,255,0.5); color:#fff; width:26px; height:26px; } .bot-avatar{ width:32px; height:32px; border-radius:50%; background:#fff; color:var(--red); display:inline-flex; align-items:center; justify-content:center; } .bot-avatar svg{ width:20px; height:20px; } .bot-log{ padding:12px; height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; background:var(--bg); } .bot-msg{ background:#fff; border:1px solid var(--border); border-radius:10px 10px 10px 2px; padding:8px 10px; font-size:13.5px; max-width:92%; align-self:flex-start; } .bot-msg.me{ background:var(--red); color:#fff; border-color:var(--red); border-radius:10px 10px 2px 10px; align-self:flex-end; } .bot-line{ margin-top:4px; } .bot-line em{ color:var(--ink-faint); font-style:normal; } .bot-card{ display:flex; gap:8px; align-items:flex-start; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); } .bot-card-body{ display:flex; flex-direction:column; gap:2px; min-width:0; } .bot-card-body span{ font-size:12px; color:var(--ink-muted); } .bot-card-actions{ display:flex; gap:6px; margin-top:4px; } .bot-chips{ display:flex; gap:6px; flex-wrap:wrap; padding:8px 12px 0; background:#fff; } .bot-chip{ font-size:12px; border:1px solid var(--border-strong); background:#fff; border-radius:999px; padding:4px 10px; cursor:pointer; font-family:inherit; color:var(--ink); } .bot-chip:hover{ border-color:var(--red); color:var(--red); } .bot-input{ display:flex; gap:6px; padding:10px 12px 12px; background:#fff; } .bot-input input{ flex:1; border:1px solid var(--border-strong); border-radius:999px; padding:8px 12px; font:inherit; font-size:13.5px; } .bot-input input:focus{ outline:none; border-color:var(--red); } .bot-input button{ width:38px; height:38px; border-radius:50%; border:0; background:var(--red); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; } .bot-input button svg{ width:16px; height:16px; }/* full-width roster header with centre menu */ .top-menu{ display:flex; align-items:center; gap:4px; flex:1; justify-content:center; flex-wrap:wrap; } .top-menu > a, .top-menu-chapters > a{ display:inline-flex; align-items:center; gap:6px; color:#E6E6EA; text-decoration:none; font-size:13.5px; font-weight:600; padding:8px 12px; border-radius:var(--radius); } .top-menu > a:hover, .top-menu-chapters > a:hover{ background:rgba(255,255,255,0.08); color:#fff; } .top-menu svg{ width:15px; height:15px; color:#FF8A8F; } .top-menu-chapters{ position:relative; } .top-menu-chapters .caret{ font-size:10px; opacity:.8; } .top-menu-drop{ display:none; position:absolute; top:100%; left:0; min-width:180px; background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:0 8px 20px rgba(0,0,0,0.15); padding:6px; z-index:50; } .top-menu-chapters:hover .top-menu-drop, .top-menu-chapters:focus-within .top-menu-drop{ display:block; } .top-menu-drop button{ display:block; width:100%; text-align:left; background:none; border:0; padding:8px 10px; font:inherit; font-size:13.5px; color:var(--ink); border-radius:4px; cursor:pointer; } .top-menu-drop button:hover{ background:var(--red-tint); color:var(--red); } @media (max-width:1100px){ .top-menu{ display:none; } } .top-inner-full .brand small{ white-space:nowrap; } /* ========================================================================== View switch (grid / flip book) — sits beside the chapter filters ========================================================================== */ .filters-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .view-switch{ display:inline-flex; border:1px solid var(--border-strong); border-radius:999px; overflow:hidden; background:#fff; flex-shrink:0; margin-left:auto; } .view-switch a{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:13px; font-weight:600; color:var(--ink-muted); text-decoration:none; } .view-switch a + a{ border-left:1px solid var(--border-strong); } .view-switch a:hover{ color:var(--ink); background:var(--bg); } .view-switch a.active{ background:var(--red); color:#fff; } .view-switch svg{ width:14px; height:14px; } /* ========================================================================== Flip-book view — shown in place of the member grid, below the search and chapter filters. White pages on the page background; the site's popups (details / enquiry / result / lightbox) are reused as they are. ========================================================================== */ body.view-flip #member-grid, body.view-flip #no-results, body.view-flip #loading-state{ display:none !important; } .flip-stage{ position:relative; width:100%; padding:8px 64px 12px; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:420px; } .flip-stage[hidden]{ display:none; } @media (max-width:760px){ .flip-stage{ padding:6px 46px 10px; } } @media (max-width:480px){ .flip-stage{ padding:4px 40px 8px; } } .flip-loading{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--ink-faint); font-size:14px; white-space:nowrap; } #book{ margin:0 auto; width:100%; max-width:1180px; } /* fill the stage so page-flip sizes from the real width */ body.modal-open #book{ pointer-events:none; } body.modal-open .side-arrow{ pointer-events:none; opacity:0.35; } /* floating side arrows — outside the book, on the page background */ .side-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid var(--border-strong); color:var(--ink-muted); box-shadow:0 2px 8px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:24px; font-weight:300; line-height:1; z-index:6; transition:background .15s ease, border-color .15s ease, color .15s ease; font-family:inherit; } .side-arrow:hover{ border-color:var(--red); color:var(--red); } .side-arrow:disabled{ opacity:0.3; cursor:not-allowed; } .side-arrow.left{ left:6px; } .side-arrow.right{ right:6px; } @media (max-width:760px){ .side-arrow{ width:36px; height:36px; font-size:18px; } .side-arrow.left{ left:4px; } .side-arrow.right{ right:4px; } } /* pages */ .my-page{ background:#fff; color:var(--ink); overflow:hidden; border:1px solid var(--border); } .my-page .page-inner{ padding:26px 30px; height:100%; overflow-y:auto; scrollbar-width:none; } /* pages are sized to fit; never show a bar */ .my-page .page-inner::-webkit-scrollbar{ display:none; } @media (max-width:700px){ .my-page .page-inner{ padding:22px 18px; } } .my-page.--hard{ background:linear-gradient(160deg, #FFFFFF, #F1F2F4); border-color:var(--border-strong); } .page-eyebrow{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:6px; } .page-title{ font-size:22px; margin-bottom:2px; color:var(--grey-800); } .page-sub{ color:var(--ink-muted); font-size:13px; margin-bottom:12px; max-width:60ch; } /* member pages: profiles fill the page in every layout (2 × 3 cards, 2 × 3 photos; the List layout takes three roomy rows a page — pockethub-flip.js pages it to match) */ .team-page{ display:flex; flex-direction:column; height:100%; } .flip-member-grid{ flex:1 1 auto; min-height:0; display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); /* minmax(0,…) so long text never widens a cell */ } .flip-member-card{ position:relative; overflow:hidden; text-align:center; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 12px 12px; cursor:pointer; min-width:0; min-height:0; color:inherit; font:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .flip-member-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, var(--red), rgba(var(--red-rgb),.55)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .flip-member-card:hover, .flip-member-card:focus-visible{ border-color:var(--red); box-shadow:0 8px 22px rgba(0,0,0,0.10); } .flip-member-card:hover::before, .flip-member-card:focus-visible::before{ transform:scaleX(1); } .flip-member-card .avatar{ width:68px; height:68px; font-size:20px; margin-bottom:4px; border:3px solid #fff; box-shadow:0 0 0 2px var(--border-strong); flex:0 0 auto; transition:box-shadow .2s ease; } .flip-member-card:hover .avatar{ box-shadow:0 0 0 2px var(--red); } .flip-member-card.is-gold .avatar{ box-shadow:0 0 0 2px #E0A93B; } .flip-member-card .avatar img{ width:100%; height:100%; object-fit:cover; } .fmc-art{ display:none; } .fmc-info{ min-width:0; width:100%; } .fmc-name{ font-size:15px; font-weight:700; line-height:1.25; color:var(--grey-800); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .fmc-star{ color:#E0A93B; } .fmc-company{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fmc-category{ display:inline-block; font-size:11px; color:var(--red); background:var(--red-tint); border-radius:999px; padding:2px 9px; margin-top:5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .fmc-desc{ font-size:11.5px; line-height:1.4; color:var(--ink-muted); margin-top:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .fmc-go{ display:none; } /* List: three full-width rows. Three a page rather than six, so each row can carry a large photo and readable type instead of a cramped strip. */ body[data-flip-layout="list"] .flip-member-grid{ grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); gap:14px; } body[data-flip-layout="list"] .flip-member-card{ flex-direction:row; justify-content:flex-start; text-align:left; gap:20px; padding:14px 22px; border-radius:14px; } body[data-flip-layout="list"] .flip-member-card::before{ top:0; bottom:0; right:auto; width:4px; height:auto; transform:scaleY(0); transform-origin:top; } body[data-flip-layout="list"] .flip-member-card:hover::before{ transform:scaleY(1); } body[data-flip-layout="list"] .flip-member-card:hover{ background:rgba(var(--red-rgb),.05); } /* no movement on hover — geometry never changes */ body[data-flip-layout="list"] .flip-member-card .avatar{ width:92px; height:92px; font-size:27px; margin:0; } body[data-flip-layout="list"] .fmc-name{ -webkit-line-clamp:1; font-size:21px; } body[data-flip-layout="list"] .fmc-company{ font-size:15px; margin-top:3px; } body[data-flip-layout="list"] .fmc-category{ font-size:12.5px; padding:3px 12px; margin-top:7px; } body[data-flip-layout="list"] .fmc-desc{ -webkit-line-clamp:2; font-size:14px; margin-top:7px; } body[data-flip-layout="list"] .fmc-info{ flex:1; } body[data-flip-layout="list"] .fmc-go{ display:block; font-size:32px; color:var(--ink-faint); transition:transform .18s ease, color .18s ease; } body[data-flip-layout="list"] .flip-member-card:hover .fmc-go{ color:var(--red); } /* A phone page is shorter than it is wide-ish: trim the row, never the three-a-page rhythm. */ @media (max-height:760px), (max-width:520px){ body[data-flip-layout="list"] .flip-member-card{ gap:14px; padding:10px 14px; } body[data-flip-layout="list"] .flip-member-card .avatar{ width:66px; height:66px; font-size:20px; } body[data-flip-layout="list"] .fmc-name{ font-size:17px; } body[data-flip-layout="list"] .fmc-company{ font-size:13px; } body[data-flip-layout="list"] .fmc-desc{ -webkit-line-clamp:1; font-size:12.5px; margin-top:4px; } body[data-flip-layout="list"] .fmc-go{ font-size:26px; } } /* Photos: the member's gallery image fills the card, details over a gradient */ body[data-flip-layout="photos"] .flip-member-card{ padding:0; justify-content:flex-end; align-items:stretch; text-align:left; background:linear-gradient(150deg, var(--grey-700), var(--grey-800)); border:0; } body[data-flip-layout="photos"] .fmc-art{ display:block; position:absolute; inset:0; } body[data-flip-layout="photos"] .fmc-art img{ width:100%; height:100%; object-fit:cover; transition:filter .2s ease; } body[data-flip-layout="photos"] .flip-member-card:hover .fmc-art img{ filter:brightness(1.08); } body[data-flip-layout="photos"] .flip-member-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.78)); } body[data-flip-layout="photos"] .flip-member-card .avatar{ position:absolute; top:10px; left:10px; width:40px; height:40px; font-size:13px; z-index:2; margin:0; background:#fff; color:var(--red); } body[data-flip-layout="photos"] .fmc-info{ position:relative; z-index:2; padding:10px 12px 11px; } body[data-flip-layout="photos"] .fmc-name{ color:#fff; -webkit-line-clamp:1; } body[data-flip-layout="photos"] .fmc-company{ color:#E6E6EA; } body[data-flip-layout="photos"] .fmc-category{ background:var(--red); color:#fff; } body[data-flip-layout="photos"] .fmc-desc{ display:none; } /* Entrance: cards rise in one after another when the book opens or the layout changes */ @keyframes fmcIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .my-page.is-entering .flip-member-card{ animation:fmcIn .42s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 55ms); } /* Smooth turns: page-flip redraws the page every frame while it moves, so everything inside must hold still — no hover lifts, zooms, pulses or transitions mid-turn. */ #book.is-flipping *, #book.is-flipping *::before, #book.is-flipping *::after{ transition:none !important; animation-play-state:paused !important; } #book.is-flipping .flip-member-card, #book.is-flipping .fmc-art img{ transform:none !important; } #book.is-flipping .my-page.is-entering .flip-member-card{ animation:none !important; opacity:1; } .my-page .page-inner{ contain:layout paint; } @media (prefers-reduced-motion: reduce){ .my-page.is-entering .flip-member-card{ animation:none; } .flip-member-card, .fmc-art img{ transition:none; } } /* Phone: six slim rows a page. Name on one line, company + category share the next, so a row is ~40px of content and nothing is clipped in a 500px-tall page. */ @media (max-width:480px){ .flip-member-grid{ grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(6,minmax(0,1fr)); gap:6px; } .flip-member-card{ flex-direction:row; text-align:left; gap:10px; padding:5px 10px; justify-content:flex-start; } .flip-member-card .avatar{ width:40px; height:40px; font-size:13px; margin:0; border-width:2px; } .fmc-info{ display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; row-gap:1px; min-width:0; } .fmc-name{ flex:0 0 100%; -webkit-line-clamp:1; font-size:13.5px; line-height:1.2; } .fmc-company{ flex:0 1 auto; margin-top:0; font-size:11.5px; max-width:58%; } .fmc-category{ flex:0 1 auto; margin-top:0; font-size:10px; padding:1px 7px; line-height:1.5; } .fmc-desc{ display:none; } .page-sub{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .team-page .page-title{ font-size:17px; } } @keyframes cardPulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--red-rgb),0.55); } 70%{ box-shadow:0 0 0 14px rgba(var(--red-rgb),0); } 100%{ box-shadow:0 0 0 0 rgba(var(--red-rgb),0); } } .my-page .flip-member-card.highlight, .flip-member-card.highlight{ animation:cardPulse 1s ease-out 2; border-color:var(--red); } /* intro (front cover) + closing (back cover) */ .intro-page, .closing-page{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; height:100%; min-height:480px; padding:0 6px; } .intro-logo{ height:40px; width:auto; } .intro-tagline{ margin-top:16px; font-size:14.5px; color:var(--ink-muted); max-width:36ch; line-height:1.55; } .intro-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px; width:100%; max-width:360px; } .intro-feature{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:14px 10px; } .intro-feature svg{ width:22px; height:22px; color:var(--red); margin:0 auto 6px; display:block; stroke-width:1.8; } .intro-feature-title{ font-size:12.5px; font-weight:700; color:var(--ink); } .intro-feature-sub{ font-size:10.5px; color:var(--ink-faint); margin-top:3px; line-height:1.4; } .intro-cta{ margin-top:24px; font-size:12.5px; color:var(--red); font-weight:600; } .closing-page h2{ font-size:26px; color:var(--grey-800); } .closing-page p{ color:var(--ink-muted); font-size:14px; margin-top:12px; max-width:44ch; } .powered-by{ margin-top:30px; font-size:12.5px; color:var(--ink-faint); display:flex; align-items:center; gap:6px; } .powered-logo{ height:18px; width:auto; } /* ad pages: full / half / quarter */ .ad-page{ height:100%; display:flex; flex-direction:column; gap:12px; } .ad-page.ad-quarter{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; } .ad-slot{ position:relative; flex:1; border:1.5px dashed var(--border-strong); border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--bg); min-height:90px; } .ad-slot.has-media{ border-style:solid; background:#fff; } .ad-media-link{ display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; color:inherit; font:inherit; text-align:left; position:relative; } .ad-media{ width:100%; height:100%; object-fit:contain; display:block; background:#fff; } /* adverts carry text — never crop them */ .ad-cap{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; background:linear-gradient(transparent, rgba(0,0,0,0.7)); display:flex; flex-direction:column; gap:2px; font-size:13px; color:#fff; } .ad-cap span{ font-size:11.5px; color:#E6E6EA; } .ad-media-link > .sponsored-tag{ position:absolute; top:8px; left:10px; margin:0; background:rgba(0,0,0,0.55); color:#fff; padding:3px 8px; border-radius:999px; } .ad-banner{ display:flex; align-items:stretch; gap:14px; padding:14px; } .ad-banner-art{ width:34%; min-width:90px; aspect-ratio:1/1; align-self:center; border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--red-tint); flex-shrink:0; } .ad-banner-art img{ width:100%; height:100%; object-fit:contain; padding:8px; display:block; background:#fff; } .ad-banner-art svg{ width:44px; height:44px; color:var(--red); } .ad-banner-body{ display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; } .ad-banner-headline{ font-size:16px; font-weight:700; line-height:1.3; color:var(--ink); } .ad-banner-sub{ font-size:12.5px; color:var(--ink-muted); } .ad-page.ad-quarter .ad-banner{ flex-direction:column; gap:8px; padding:10px; } .ad-page.ad-quarter .ad-banner-art{ width:100%; height:60px; aspect-ratio:auto; } .ad-page.ad-quarter .ad-banner-headline{ font-size:13px; } .sponsored-tag{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:8px; } .ad-placeholder{ text-align:center; padding:16px; } .ad-placeholder-title{ font-size:16px; font-weight:700; color:var(--ink); } .ad-placeholder-sub{ font-size:12.5px; color:var(--ink-muted); margin-top:5px; max-width:26ch; margin-left:auto; margin-right:auto; } .ad-cta{ display:inline-block; margin-top:12px; font-size:12.5px; color:var(--red); font-weight:600; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; } .ad-cta:hover{ text-decoration:underline; } .ad-page.ad-quarter .ad-placeholder{ padding:10px; } .ad-page.ad-quarter .ad-placeholder-title{ font-size:13.5px; } .ad-page.ad-quarter .ad-placeholder-sub{ font-size:11.5px; } /* Register button on the roster header reads as the primary action for a visitor */ .top-links a.top-link-cta{ background:var(--red); border-color:var(--red); } .top-links a.top-link-cta:hover{ filter:brightness(1.08); } /* ---- Roster gate: visitor vs member ---- */ .gate-box-wide{ max-width:720px; width:100%; } .gate-lead{ color:var(--ink-muted); margin-bottom:18px; } .gate-choice{ display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; } .gate-card{ border:1px solid var(--border); border-radius:var(--radius); padding:18px 16px; background:#fff; display:flex; flex-direction:column; } .gate-card-member{ background:var(--bg); } .gate-card-icon{ width:34px; height:34px; border-radius:50%; background:var(--red-tint); color:var(--red); display:flex; align-items:center; justify-content:center; margin-bottom:10px; } .gate-card-icon svg{ width:18px; height:18px; } .gate-card h3{ font-size:15px; margin:0 0 4px; color:var(--ink); } .gate-card > p{ font-size:12.5px; color:var(--ink-muted); margin:0 0 12px; line-height:1.45; } .gate-card .field-input{ margin-bottom:8px; } .gate-card .submit-btn{ width:100%; margin-top:auto; } .gate-login-btn{ display:block; text-align:center; text-decoration:none; } .gate-login-btn:hover{ color:#fff; } .gate-card .gate-note{ font-size:11.5px; color:var(--ink-faint); margin:10px 0 0; } .gate-card .gate-note a{ color:var(--red); font-weight:600; } @media (max-width:620px){ .gate-choice{ grid-template-columns:1fr; } } /* ========================================================================== Flip book as a full-screen popup: top bar (brand, search, back to grid) and a body the book is fitted into. ========================================================================== */ body.view-flip{ overflow:hidden; } .flip-stage{ position:fixed; inset:0; z-index:48; background:var(--bg); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:0 !important; min-height:0; overflow:hidden; } .flip-stage[hidden]{ display:none !important; } .flip-bar{ flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:9px 18px; background:var(--grey-700); border-bottom:3px solid var(--red); } .flip-bar-brand{ display:flex; flex-direction:column; gap:1px; flex:0 0 auto; } .flip-bar-brand img{ height:26px; width:auto; } .flip-bar-brand small{ font-size:11.5px; color:#C9CACE; white-space:nowrap; } .flip-search{ position:relative; flex:1 1 auto; max-width:540px; margin:0 auto; } .flip-search > svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:#C9CACE; pointer-events:none; } .flip-search input{ width:100%; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; padding:0 14px 0 36px; font:inherit; font-size:13.5px; } .flip-search input::placeholder{ color:#C9CACE; } .flip-search input:focus{ outline:none; background:#fff; color:var(--ink); border-color:#fff; } .flip-search input:focus ~ svg, .flip-search:focus-within > svg{ color:var(--ink-faint); } .flip-search-results{ display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:5; background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:0 12px 28px rgba(0,0,0,.22); max-height:340px; overflow-y:auto; } .flip-search-results.open{ display:block; } .flip-body{ position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px 72px; } .flip-body #book{ width:100%; height:100%; max-width:1400px; margin:0 auto; flex:0 0 auto; } /* exact size set by fitBook() */ .flip-body .stf__wrapper{ height:100%; } .flip-body .flip-loading{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } /* Member popups open above the book */ body.view-flip .overlay{ z-index:60; } body.view-flip .lightbox-overlay{ z-index:70; } @media (max-width:760px){ .flip-bar{ flex-wrap:wrap; gap:10px; padding:8px 12px; } .flip-bar-brand small{ display:none; } .flip-search{ order:3; flex-basis:100%; max-width:none; } .flip-body{ padding:8px 44px; } } /* ---- Flip-book image / video ad pages ---- */ /* Media fills the slot; the caption is its own bar underneath, so the title and Visit button are never covered by (or covering) a video and its controls. */ .fa-page .fa-slot{ background:#111; border:1px solid var(--border); flex-direction:column; align-items:stretch; justify-content:stretch; } .fa-media{ position:relative; flex:1 1 auto; min-height:0; background:#111; } .fa-slot .ad-media{ width:100%; height:100%; object-fit:contain; background:#111; display:block; border:0; } .fa-slot iframe.ad-media{ background:#000; } .fa-slot .fa-link{ display:block; width:100%; height:100%; } .fa-media > .sponsored-tag{ position:absolute; top:8px; left:10px; margin:0; background:rgba(0,0,0,.6); color:#fff; padding:3px 8px; border-radius:999px; font-size:10px; z-index:3; pointer-events:none; } .fa-cap{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; background:#1C1D1F; color:#fff; border-top:1px solid rgba(255,255,255,.08); } .fa-cap-text{ display:flex; flex-direction:column; min-width:0; } .fa-cap-text b{ font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fa-cap-text span{ font-size:11.5px; color:#C9CACE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fa-cta{ flex:0 0 auto; background:var(--red); color:#fff; font-size:12px; font-weight:700; text-decoration:none; border-radius:999px; padding:6px 13px; } .fa-cta:hover{ color:#fff; filter:brightness(1.08); } .ad-page.ad-quarter .fa-cap{ padding:5px 8px; } .ad-page.ad-quarter .fa-cap-text b{ font-size:12px; } .ad-page.ad-quarter .fa-cta{ padding:3px 9px; font-size:11px; } /* "Attract" signal chosen by mybiz.promo: pulsing play button on videos, glowing Visit on images */ .fa-pulse{ position:absolute; left:50%; top:50%; z-index:2; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(var(--red-rgb),.92); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.35); transition:transform .2s ease; } .fa-pulse:hover{ transform:scale(1.08); } .fa-pulse svg{ width:30px; height:30px; fill:currentColor; margin-left:4px; position:relative; } .fa-pulse-ring{ position:absolute; inset:0; border-radius:50%; border:3px solid rgba(255,255,255,.85); animation:faRing 2.2s ease-out infinite; } .fa-pulse-ring + .fa-pulse-ring{ animation-delay:1.1s; } @keyframes faRing{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(2.1); opacity:0; } } .fa-attract .fa-cta{ animation:faGlow 1.8s ease-in-out infinite; } @keyframes faGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(var(--red-rgb),.7); } 50%{ box-shadow:0 0 0 8px rgba(var(--red-rgb),0); } } .fa-attract{ box-shadow:0 0 0 2px var(--red); } /* Image ads pulse from the corner instead of the middle, so the signal never sits on the artwork. The slot clips its overflow, so the corner rings swell less than the centred ones. */ .fa-pulse.is-tap{ left:auto; top:auto; right:16px; bottom:16px; margin:0; width:54px; height:54px; text-decoration:none; } .fa-pulse.is-tap svg{ width:26px; height:26px; margin:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .fa-pulse.is-tap:hover{ color:#fff; } .fa-pulse.is-tap .fa-pulse-ring{ animation-name:faRingTap; } @keyframes faRingTap{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.5); opacity:0; } } .ad-page.ad-quarter .fa-pulse.is-tap{ right:12px; bottom:12px; width:42px; height:42px; } .ad-page.ad-quarter .fa-pulse.is-tap svg{ width:20px; height:20px; } @media (prefers-reduced-motion: reduce){ .fa-pulse-ring, .fa-attract .fa-cta{ animation:none; } } /* Page numbers (used when mybiz.promo places an ad) */ .my-page .page-no{ position:absolute; right:12px; bottom:6px; font-size:10.5px; color:var(--ink-muted); letter-spacing:.04em; pointer-events:none; z-index:3; } /* A press on a button / link inside the book targets the control itself, so page-flip leaves it alone: a tap opens it, a swipe on it turns the page (JS). */ #book a *, #book button *{ pointer-events:none; } /* Dark stage so the white pages stand out */ .flip-stage{ background:#2B2C2E !important; } .flip-body .flip-loading{ color:#C9CACE; } .flip-stage .page-no{ color:var(--ink-faint); } /* Sound + share buttons reuse the bell button look */ [data-flip-sound] .snd-off{ display:none; } [data-flip-sound].is-off .snd-on{ display:none; } [data-flip-sound].is-off .snd-off{ display:block; } [data-flip-sound].is-off{ color:#9A9BA0; } .share-panel{ position:fixed; z-index:56; width:330px; max-width:calc(100vw - 24px); background:#fff; border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.3); padding:14px; animation:bellIn .18s ease-out; } .share-panel[hidden]{ display:none; } .share-body{ display:flex; gap:14px; align-items:center; } .share-qr{ flex:0 0 auto; width:132px; height:132px; border:1px solid var(--border); border-radius:8px; padding:6px; background:#fff; } .share-links{ display:grid; grid-template-columns:repeat(3, 44px); gap:10px; } .share-links a{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .15s ease; } .share-links a:hover{ transform:scale(1.08); } .share-links svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .sh-wa{ background:#25D366; } .sh-fb{ background:#1877F2; } .sh-x{ background:#111; } .sh-in{ background:#0A66C2; } .sh-mail{ background:var(--red); } .share-copy{ display:flex; margin-top:12px; border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; } .share-link{ flex:1; min-width:0; border:0; padding:7px 9px; font:inherit; font-size:12px; color:var(--ink-muted); background:var(--bg); } .share-copy button{ border:0; background:var(--red); color:#fff; font:inherit; font-size:12.5px; font-weight:700; padding:0 14px; cursor:pointer; } /* ---- Bell: what's new this week ---- */ .bell-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:36px; height:34px; border:1px solid rgba(255,255,255,0.35); border-radius:var(--radius); background:transparent; color:#fff; cursor:pointer; padding:0; } .bell-btn:hover, .bell-btn[aria-expanded="true"]{ background:rgba(255,255,255,.12); } .bell-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transform-origin:50% 10%; } .bell-count{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--red); color:#fff; font-size:10.5px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--grey-700); } .bell-count[hidden]{ display:none; } .bell-btn.has-new .bell-count{ animation:bellDot 2s ease-in-out infinite; } .bell-btn.ring svg{ animation:bellRing .9s ease-in-out 2; } @keyframes bellRing{ 0%,100%{ transform:rotate(0); } 15%{ transform:rotate(16deg); } 30%{ transform:rotate(-14deg); } 45%{ transform:rotate(10deg); } 60%{ transform:rotate(-6deg); } 75%{ transform:rotate(3deg); } } @keyframes bellDot{ 0%,100%{ box-shadow:0 0 0 2px var(--grey-700), 0 0 0 0 rgba(var(--red-rgb),.6); } 50%{ box-shadow:0 0 0 2px var(--grey-700), 0 0 0 6px rgba(var(--red-rgb),0); } } .bell-panel{ position:fixed; z-index:55; background:#fff; border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.22); overflow:hidden; animation:bellIn .18s ease-out; } .bell-panel[hidden]{ display:none; } @keyframes bellIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } .bell-head{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 14px; border-bottom:1px solid var(--border); background:var(--bg); } .bell-head b{ font-size:14px; color:var(--grey-800); } .bell-head small{ font-size:11.5px; color:var(--ink-faint); } .bell-list{ max-height:min(420px, 70vh); overflow-y:auto; } .bell-empty{ padding:26px 14px; text-align:center; color:var(--ink-faint); font-size:13px; } .bell-item{ display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; background:#fff; border:0; border-bottom:1px solid var(--border); padding:10px 14px; font:inherit; color:inherit; cursor:pointer; position:relative; } .bell-item:hover{ background:var(--bg); } .bell-item.is-new{ background:#FFF6F6; } .bell-item.is-new::after{ content:""; position:absolute; top:15px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--red); } .bell-ico{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--red-tint); color:var(--red); display:flex; align-items:center; justify-content:center; } .bell-ico svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .bell-text{ font-size:13px; line-height:1.4; color:var(--ink); padding-right:12px; min-width:0; } .bell-text b{ color:var(--grey-800); } .bell-text small{ display:block; font-size:11.5px; color:var(--ink-faint); margin-top:2px; } @media (prefers-reduced-motion: reduce){ .bell-btn.ring svg, .bell-btn.has-new .bell-count, .bell-panel{ animation:none; } } /* Link videos show a thumbnail until tapped */ /* Video link thumbnail: the whole 16:9 frame, centred, on a blurred fill (full and half pages alike) */ .fa-slot .fa-facade{ position:relative; overflow:hidden; background:#000; } .fa-slot .fa-facade::before{ content:""; position:absolute; inset:-24px; background:var(--thumb, none) center / cover no-repeat; filter:blur(22px) brightness(.55) saturate(1.2); } .fa-slot .fa-thumb-img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; } .fa-pulse:not(.is-attract){ width:62px; height:62px; margin:-31px 0 0 -31px; background:rgba(0,0,0,.72); } .fa-pulse:not(.is-attract):hover{ background:var(--red); } /* Shorter screens: one line of description so nothing is cut at the card edge */ @media (max-height:920px), (max-width:760px){ .fmc-desc{ -webkit-line-clamp:1; } .flip-member-card .avatar{ width:56px; height:56px; } } /* Close: × in the bar, and the "Close the flip book?" prompt Escape brings up */ .flip-close:hover{ background:var(--red) !important; border-color:var(--red); } .flip-confirm{ position:absolute; top:74px; left:50%; transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; background:#fff; color:var(--ink); border-radius:12px; padding:10px 14px; box-shadow:0 14px 34px rgba(0,0,0,.35); animation:flipConfirmIn .18s ease-out; max-width:calc(100vw - 24px); } @keyframes flipConfirmIn{ from{ transform:translate(-50%, -8px); } to{ transform:translate(-50%, 0); } } .flip-body{ z-index:1; } /* keeps the book's own layers below the bar and the close prompt */ .flip-confirm[hidden]{ display:none; } .flip-confirm > span{ font-weight:700; font-size:14px; color:var(--grey-800); } .flip-confirm button{ border:0; border-radius:8px; padding:6px 14px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; } .flip-confirm-yes{ background:var(--red); color:#fff; } .flip-confirm-no{ background:var(--bg); color:var(--grey-800); border:1px solid var(--border-strong) !important; } .flip-confirm small{ flex-basis:100%; text-align:center; font-size:11px; color:var(--ink-faint); } @media (max-width:760px){ .flip-confirm{ top:112px; } } /* Right after a turn the pointer is usually resting on a card of the new page; no hover highlight until the mouse actually moves, so the page lands perfectly still. */ #book.hover-lock .flip-member-card, #book.hover-lock .flip-member-card:hover{ border-color:var(--border); box-shadow:none; transition:none; } #book.hover-lock .flip-member-card:hover::before{ transform:scaleX(0); } #book.hover-lock .flip-member-card:hover .avatar{ box-shadow:0 0 0 2px var(--border-strong); } #book.hover-lock .flip-member-card.is-gold:hover .avatar{ box-shadow:0 0 0 2px #E0A93B; } body[data-flip-layout="list"] #book.hover-lock .flip-member-card:hover{ background:#fff; } body[data-flip-layout="photos"] #book.hover-lock .flip-member-card:hover{ background:linear-gradient(150deg, var(--grey-700), var(--grey-800)); } body[data-flip-layout="photos"] #book.hover-lock .flip-member-card:hover .fmc-art img{ filter:none; } /* Reviewer's remark on a rejected submission */ .reject-note{ margin-top:5px; font-size:12px; line-height:1.4; color:var(--red-dark); background:#FDEDEE; border-left:3px solid var(--red); padding:4px 8px; border-radius:4px; max-width:340px; } /* Inside back cover (keeps the page count even) */ .endpaper-page h2{ font-size:24px; margin-top:4px; } .endpaper-actions{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:22px; } .endpaper-btn{ display:inline-block; width:auto; padding:10px 22px; text-decoration:none; } .endpaper-link{ border:0; background:none; color:var(--red); font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; text-decoration:underline; } /* Profiles set to pulse on the Profile spots screen: a breathing red ring inside the card and a beacon in the corner. A layer of its own, so it never fights the cards' entrance animation. */ .fmc-pulse{ position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; border:2px solid var(--red); animation:fmcPulse 1.9s ease-in-out infinite; } .fmc-pulse::after{ content:""; position:absolute; top:9px; right:9px; width:10px; height:10px; border-radius:50%; background:var(--red); outline:2px solid #fff; box-shadow:0 0 0 0 rgba(var(--red-rgb),.6); animation:fmcBeacon 1.9s ease-out infinite; } @keyframes fmcPulse{ 0%,100%{ box-shadow:inset 0 0 0 0 rgba(var(--red-rgb),.35); } 50%{ box-shadow:inset 0 0 0 5px rgba(var(--red-rgb),.12); } } @keyframes fmcBeacon{ 0%{ box-shadow:0 0 0 0 rgba(var(--red-rgb),.6); } 100%{ box-shadow:0 0 0 12px rgba(var(--red-rgb),0); } } .flip-member-card.is-pulse{ border-color:var(--red); } #book.is-flipping .fmc-pulse, #book.is-flipping .fmc-pulse::after{ animation:none; } @media (prefers-reduced-motion: reduce){ .fmc-pulse, .fmc-pulse::after{ animation:none; } } /* Colour theme switcher (palette button in the header; helpers/theme_helper.php) */ .mbp-theme{ position:relative; display:inline-flex; } .mbp-theme-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:8px; background:transparent; color:#fff; cursor:pointer; } .mbp-theme-btn:hover{ background:rgba(255,255,255,.12); } .mbp-theme-trigger svg{ width:18px; height:18px; } .mbp-theme-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:20050; min-width:220px; padding:6px; background:#fff; color:#2F3032; border:1px solid #E3E4E8; border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.18); text-align:left; } .mbp-theme-menu[hidden]{ display:none; } .mbp-theme-head{ padding:6px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A8B90; } .mbp-theme-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:7px; background:transparent; color:#2F3032; font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; } .mbp-theme-menu button:hover{ background:#F4F4F6; } .mbp-theme-menu button[aria-checked="true"]{ background:#F1F2F4; } .mbp-theme-menu button[aria-checked="true"]::after{ content:"✓"; margin-left:auto; font-weight:700; } .mbp-theme-menu button span{ display:flex; flex-direction:column; line-height:1.2; } .mbp-theme-menu button small{ font-size:11.5px; font-weight:500; color:#8A8B90; } .mbp-theme-note{ padding:6px 10px 4px; border-top:1px solid #EEEFF2; margin-top:4px; font-size:11.5px; color:#8A8B90; } .mbp-sw{ flex:0 0 auto; display:inline-block; width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); } .mbp-sw-red{ background:linear-gradient(135deg, #4A4B4D 50%, #D7282F 50%); } .mbp-sw-blue{ background:linear-gradient(135deg, #2E4059 50%, #1F5FD6 50%); } .mbp-sw-orange{ background:linear-gradient(135deg, #45423E 50%, #D9620B 50%); } .mbp-sw-green{ background:linear-gradient(135deg, #20452F 50%, #18874B 50%); } .mbp-sw-white{ background:linear-gradient(135deg, #2B3644 50%, #FFFFFF 50%); } /* ---- Leads & follow-ups (member CRM: roster/enquiries) ---- */ .crm-pipe{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; } .crm-pipe-sep{ width:1px; height:22px; background:var(--border-strong); margin:0 2px; } .crm-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--border-strong); border-radius:999px; background:#fff; color:var(--ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .crm-chip b{ min-width:20px; padding:0 6px; border-radius:999px; background:var(--bg); font-size:12px; text-align:center; } .crm-chip:hover{ border-color:var(--red); } .crm-chip.is-on{ background:var(--grey-700); border-color:var(--grey-700); color:#fff; } .crm-chip.is-on b{ background:rgba(255,255,255,.2); color:#fff; } .crm-chip.is-due b{ background:#FFF1D6; color:#8A5A0B; } .crm-chip.is-overdue b{ background:#FDE2E2; color:#B42323; } .crm-won-value{ margin-left:auto; font-size:13px; font-weight:700; color:#1E7A45; background:#E7F6EE; border-radius:999px; padding:5px 12px; } .crm-pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; } .crm-pill.st-new, .crm-st.st-new input:checked + span{ background:#EAF1FD; color:#1F5FD6; } .crm-pill.st-contacted, .crm-st.st-contacted input:checked + span{ background:#EFEAFD; color:#5B3FC4; } .crm-pill.st-follow_up, .crm-st.st-follow_up input:checked + span{ background:#FFF1D6; color:#8A5A0B; } .crm-pill.st-won, .crm-st.st-won input:checked + span{ background:#E2F4EA; color:#1E7A45; } .crm-pill.st-lost, .crm-st.st-lost input:checked + span{ background:#EEEEF0; color:#5F6064; } .crm-due{ font-weight:600; } .crm-due.is-due{ color:#8A5A0B; } .crm-due.is-overdue{ color:#B42323; } .crm-table tr.is-overdue td:first-child{ box-shadow:inset 3px 0 0 #D64545; } .crm-table tr.is-due td:first-child{ box-shadow:inset 3px 0 0 #E0A93B; } .crm-last{ max-width:240px; font-size:13px; } .crm-last .st-time{ display:block; } .crm-detail{ display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:18px; align-items:start; } @media (max-width:1000px){ .crm-detail{ grid-template-columns:1fr; } } .crm-col{ min-width:0; } .crm-lbl{ display:flex; flex-direction:column; gap:6px; margin:0 0 12px; font-size:12.5px; font-weight:700; color:var(--ink-muted); } .crm-lbl .field-input{ font-weight:400; } .crm-status-pick, .crm-note-kinds, .crm-date-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .crm-date-row .field-input{ width:auto; height:34px; padding:4px 10px; } .crm-st{ margin:0; cursor:pointer; } .crm-st input, .crm-note-kinds input{ position:absolute; opacity:0; pointer-events:none; } .crm-st span{ display:inline-block; padding:6px 12px; border:1px solid var(--border-strong); border-radius:999px; background:#fff; color:var(--ink); font-size:13px; font-weight:600; } .crm-st input:checked + span{ border-color:currentColor; box-shadow:0 0 0 2px currentColor inset; } .crm-st input:focus-visible + span, .crm-note-kinds input:focus-visible + span{ outline:2px solid var(--red); outline-offset:2px; } .mini-chip{ display:inline-flex; align-items:center; margin:0; padding:4px 10px; border:1px solid var(--border-strong); border-radius:999px; background:#fff; color:var(--ink); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; } .mini-chip:hover{ border-color:var(--red); color:var(--red); } .crm-note-kinds .mini-chip:has(input:checked){ background:var(--red); border-color:var(--red); color:#fff; } .crm-form textarea.field-input{ min-height:74px; resize:vertical; font-family:inherit; } .crm-form-actions, .crm-add-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; } .crm-msg{ margin-right:auto; font-size:13px; font-weight:600; color:var(--ink-muted); } .crm-msg.is-ok{ color:#1E7A45; } .crm-msg.is-err{ color:#B42323; } .crm-del{ margin-right:auto; color:#B42323 !important; } .crm-contact{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px; } .crm-log{ display:flex; flex-direction:column; gap:10px; max-height:360px; overflow:auto; padding-right:4px; } .crm-log-item{ display:grid; grid-template-columns:12px 1fr; gap:8px; font-size:13.5px; line-height:1.4; } .crm-log-dot{ width:10px; height:10px; margin-top:4px; border-radius:50%; background:var(--border-strong); } .crm-log-item.k-call .crm-log-dot, .crm-log-item.k-meeting .crm-log-dot{ background:var(--red); } .crm-log-item.k-whatsapp .crm-log-dot{ background:#25D366; } .crm-log-item.k-status .crm-log-dot{ background:var(--grey-700); } .crm-log-item .st-time{ display:block; font-size:11.5px; } .crm-add{ margin:0 0 14px; padding:14px; border:1px solid var(--border); border-left:3px solid var(--red); border-radius:var(--radius); background:#fff; } .crm-add-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; margin-bottom:10px; } .crm-add-grid label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; color:var(--ink-muted); } .crm-add-grid .field-input{ font-weight:400; height:36px; padding:4px 10px; } /* Dashboard lead cards */ .lead-crm{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; } .lead-crm .crm-due{ font-size:12px; } .crm-remind{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; padding:9px 12px; border-radius:var(--radius); background:#FFF7E8; border:1px solid #F0D29A; font-size:13.5px; color:#6B4A0E; } .crm-remind a{ margin-left:auto; font-weight:700; color:var(--red); } /* Member sign-in: phone + SMS code */ .login-box .otp-input{ font-size:26px; font-weight:700; letter-spacing:.5em; padding-left:.5em; } .login-hint{ margin:0 0 12px; padding:8px 10px; border-radius:var(--radius); background:#FFF7E8; border:1px solid #F0D29A; color:#6B4A0E; font-size:13px; } .otp-links{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; } .otp-links form{ margin:0; } .otp-link{ border:0; background:none; padding:0; color:var(--red); font:inherit; font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; } .otp-link:disabled{ color:var(--ink-faint); cursor:default; } /* Member dashboard: circle switcher (members of several circles) */ .circle-switch{ display:flex; align-items:center; gap:10px; margin:0; } .circle-switch label{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#C9CACE; } .circle-switch label svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; } .circle-switch label small{ padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; font-size:11px; letter-spacing:0; } .circle-switch select{ min-width:220px; height:38px; padding:0 34px 0 12px; border:1px solid rgba(255,255,255,.35); border-radius:var(--radius); background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; color:#fff; font:inherit; font-size:14.5px; font-weight:700; appearance:none; cursor:pointer; } .circle-switch select:focus{ outline:2px solid #fff; outline-offset:2px; } .circle-switch option{ color:var(--ink); background:#fff; } .circle-one{ padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:13.5px; font-weight:700; } @media (max-width:600px){ .circle-switch{ width:100%; } .circle-switch select{ flex:1; min-width:0; } } /* Member dashboard: which circle a section / item belongs to */ .count-pill.circle-pill{ background:var(--grey-700); color:#fff; } .lead-tag.circle-tag{ background:var(--bg); color:var(--grey-700); border:1px solid var(--border-strong); font-size:11px; padding:1px 8px; vertical-align:middle; } .circle-note{ margin:0 0 12px; padding:9px 12px; border-radius:var(--radius); border:1px solid var(--border); border-left:3px solid var(--grey-700); background:#fff; font-size:13.5px; color:var(--ink-muted); } /* ---- Loyalty & rewards (member dashboard → roster/loyalty) ---- */ .loy-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 14px; padding:16px 18px; border-radius:var(--radius); background:var(--grey-700); color:#fff; } .loy-head h2{ margin:0 0 2px; font-size:20px; color:#fff; } .loy-head p{ margin:0; font-size:13.5px; color:#C9CACE; } .loy-kpis{ display:flex; gap:10px; flex-wrap:wrap; } .loy-kpi{ min-width:110px; padding:8px 12px; border-radius:var(--radius); background:rgba(255,255,255,.1); } .loy-kpi b{ display:block; font-size:18px; color:#fff; } .loy-kpi span{ font-size:11.5px; color:#C9CACE; text-transform:uppercase; letter-spacing:.04em; } .loy-tabs{ margin-bottom:14px; } .loy-hint{ margin:0 0 10px; font-size:12.5px; color:var(--ink-faint); } .loy-form .loy-wide{ grid-column:span 2; } .loy-form .loy-full{ grid-column:1 / -1; } .loy-form .loy-full small{ font-weight:400; color:var(--ink-faint); } .loy-form textarea.field-input{ min-height:90px; font-family:inherit; font-weight:400; padding:8px 10px; } @media (max-width:640px){ .loy-form .loy-wide{ grid-column:auto; } } .loy-checks{ display:flex; gap:18px; flex-wrap:wrap; margin:0 0 10px; font-size:13.5px; } .loy-checks label{ display:inline-flex; align-items:center; gap:6px; margin:0; cursor:pointer; } .loy-file{ cursor:pointer; } .loy-actions{ text-align:right; white-space:nowrap; } .loy-actions .mini-chip{ margin:2px 0; text-decoration:none; } .loy-pts{ color:var(--red); font-size:15px; } .loy-plus{ color:#1E7A45; font-weight:700; } .loy-minus{ color:#B42323; font-weight:700; } .loy-expired td{ color:var(--ink-faint); text-decoration:line-through; } .loy-detail{ padding:4px 2px; } .loy-ledger-head{ margin:0 0 10px; font-size:14.5px; } .loy-reward{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px; font-size:13px; } .loy-reward .field-input{ width:90px; height:30px; padding:2px 8px; } .loy-send{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; } .loy-send-item{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius); background:#fff; color:var(--ink); text-decoration:none; } .loy-send-item span{ font-size:12.5px; color:var(--ink-muted); } .loy-send-item em{ font-style:normal; font-size:12.5px; font-weight:700; color:#1E9E4F; } .loy-send-item:hover{ border-color:#25D366; } .loy-send-item.is-done{ background:#E7F6EE; border-color:#9CC9A6; } .loy-send-item.is-done em::after{ content:" ✓ opened"; color:#1E7A45; } .loy-unit{ display:inline-flex; align-items:stretch; } .loy-unit .field-input{ width:110px; height:36px; border-radius:var(--radius) 0 0 var(--radius); } .loy-unit span{ display:flex; align-items:center; padding:0 10px; border:1px solid var(--border-strong); border-left:0; border-radius:0 var(--radius) var(--radius) 0; background:var(--bg); font-size:13px; color:var(--ink-muted); } .crm-cust{ display:inline-block; margin-left:4px; font-size:12px; font-weight:700; color:#1E7A45; text-decoration:none; } .crm-cust:hover{ text-decoration:underline; } /* ---- Loyalty → Insights ---- */ .ins-kpis{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin:0 0 14px; } .ins-kpi{ padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; } .ins-kpi b{ display:block; font-size:22px; color:var(--ink); } .ins-kpi span{ font-size:12px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; } .ins-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 14px; } @media (max-width:900px){ .ins-grid{ grid-template-columns:1fr; } } .ins-card{ padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; margin:0 0 14px; } .ins-grid .ins-card{ margin:0; } .ins-card h3{ margin:0 0 12px; font-size:15px; color:var(--ink); } .ins-note{ margin:10px 0 0; font-size:12px; color:var(--ink-faint); } .ins-bars{ display:flex; flex-direction:column; gap:9px; } .ins-bar-row{ display:grid; grid-template-columns:150px 1fr 110px; align-items:center; gap:10px; font-size:13.5px; cursor:default; } .ins-bar-label{ color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ins-bar-track{ height:14px; border-radius:4px; background:var(--bg); overflow:hidden; } .ins-bar{ display:block; height:100%; border-radius:0 4px 4px 0; background:var(--red); transition:width .3s ease; } .ins-bar-row:hover .ins-bar{ background:var(--red-dark); } .ins-bar-val{ display:flex; flex-direction:column; line-height:1.15; color:var(--ink); } .ins-bar-val small{ font-size:11.5px; color:var(--ink-muted); } @media (max-width:560px){ .ins-bar-row{ grid-template-columns:110px 1fr 70px; } } .ins-boost{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--border); border-left:4px solid var(--red); background:rgba(var(--red-rgb),.05); } .ins-boost b{ display:block; margin-bottom:2px; color:var(--ink); } .ins-boost span{ font-size:13.5px; color:var(--ink-muted); } .ins-boost-actions{ display:flex; gap:8px; flex-wrap:wrap; } /* lead source tags (Insights + Leads page): text in ink, a coloured edge for the kind */ .src-tag{ display:inline-block; margin-top:3px; padding:1px 8px; border-radius:999px; border:1px solid var(--border-strong); border-left-width:3px; background:#fff; font-size:11.5px; font-weight:600; color:var(--ink-muted); } .src-tag.src-campaign{ border-left-color:#25D366; } .src-tag.src-roster{ border-left-color:var(--grey-700); } .src-tag.src-banner, .src-tag.src-vbanner, .src-tag.src-deal, .src-tag.src-flipad{ border-left-color:var(--red); } .src-tag.src-manual{ border-left-color:var(--border-strong); } .ins-boost-actions a{ text-decoration:none; } /* Loyalty: popups, clickable insight rows, campaign duplicates */ .loy-modal{ position:fixed; inset:0; z-index:500; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; background:rgba(0,0,0,.45); overflow:auto; } .loy-modal[hidden]{ display:none; } .loy-modal-box{ width:100%; max-width:760px; background:var(--bg); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; } .loy-modal.is-wide .loy-modal-box{ max-width:1180px; } .loy-modal-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--border); } .loy-modal-head h3{ margin:0; font-size:16px; color:var(--ink); } .loy-modal-body{ padding:14px 16px; } .loy-frame{ display:block; width:100%; height:72vh; border:0; border-radius:var(--radius); background:#fff; } .ins-bar-row.is-drill{ cursor:pointer; border-radius:6px; padding:3px 4px; margin:-3px -4px; } .ins-bar-row.is-drill:hover, .ins-bar-row.is-drill:focus-visible{ background:var(--bg); outline:none; } .ins-bar-row.is-drill .ins-bar-label::after{ content:" ›"; color:var(--ink-faint); } .mini-chip.is-primary{ background:var(--red); border-color:var(--red); color:#fff; } .loy-dups{ color:#8A5A0B; } /* Loyalty: where points can be redeemed */ .loy-scope-h, .loy-scope{ text-align:center; } .loy-check{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:var(--ink-soft, #555); } .loy-check input{ width:16px; height:16px; accent-color:var(--red); cursor:pointer; } .loy-redeem-from{ margin-bottom:12px; } .loy-redeem-from .crm-chip{ cursor:pointer; } .loy-circle-find{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .loy-circle-find[hidden]{ display:none; } .loy-find{ display:flex; gap:6px; } .loy-find .field-input{ flex:1; min-width:0; } @media (max-width:640px){ .loy-circle-find{ grid-template-columns:1fr; } } .loy-form [data-from][hidden]{ display:none !important; } .loy-circle-find{ grid-template-columns:minmax(220px, 1fr) 2fr; } /* Loyalty settings: store / circle column groups, member picker */ .loy-settings th.loy-grp-start, .loy-settings td.loy-grp-start{ border-left:2px solid var(--border); } .loy-settings thead tr.loy-grp th[colspan]{ text-align:center; letter-spacing:.04em; } .loy-settings .loy-unit .field-input{ width:78px; } .loy-settings td{ vertical-align:middle; } .loy-settings tr.loy-circle-off .loy-c{ opacity:.45; } .loy-scope-sel{ min-width:170px; } .loy-scope-chip{ display:inline-block; margin-top:4px; padding:2px 8px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:12px; color:var(--ink); cursor:pointer; } .loy-scope-chip:hover:not(:disabled){ border-color:var(--red); color:var(--red); } .loy-pick-bar{ display:flex; gap:8px; margin-bottom:10px; } .loy-pick-bar .field-input{ flex:1; } .loy-pick-list{ max-height:52vh; overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:#fff; } .loy-pick{ display:flex; gap:10px; align-items:flex-start; padding:8px 12px; border-bottom:1px solid var(--border); cursor:pointer; } .loy-pick[hidden]{ display:none; } .loy-pick:last-child{ border-bottom:0; } .loy-pick input{ margin-top:3px; width:16px; height:16px; accent-color:var(--red); } .loy-pick span{ display:flex; flex-direction:column; } .loy-pick em{ font-style:normal; font-size:12px; color:var(--ink-faint); } .loy-modal .crm-add-actions{ margin-top:12px; } /* Loyalty: group loyalty, approvals, circle award breakdown */ .loy-badge{ display:inline-block; min-width:18px; margin-left:6px; padding:0 5px; border-radius:999px; background:var(--red); color:#fff; font-style:normal; font-size:11px; font-weight:700; line-height:18px; text-align:center; } .loy-badge[hidden]{ display:none; } .loy-h{ margin:18px 0 8px; font-size:15px; color:var(--ink); display:flex; align-items:center; gap:6px; } .loy-group-intro{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 16px; background:#fff; border:1px solid var(--border); border-left:4px solid var(--red); border-radius:var(--radius); } .loy-group-intro a{ color:var(--red); } .loy-groups{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; } .loy-group{ display:flex; flex-direction:column; gap:6px; padding:14px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); } .loy-group.is-joined{ border-color:rgba(var(--red-rgb), .35); } .loy-group-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .loy-group-head b{ font-size:15px; } .loy-group-about{ margin:2px 0; font-size:13px; color:var(--ink); white-space:pre-line; } .loy-group-members{ display:flex; flex-wrap:wrap; gap:4px; } .loy-member-chip{ padding:2px 8px; border-radius:999px; background:var(--bg); border:1px solid var(--border); font-size:12px; } .loy-member-chip.is-me{ border-color:var(--red); color:var(--red); } .loy-group-actions{ display:flex; gap:8px; margin-top:auto; padding-top:6px; } .loy-approvals{ margin:0 0 14px; padding:12px 14px; background:rgba(var(--red-rgb), .05); border:1px solid rgba(var(--red-rgb), .25); border-radius:var(--radius); } .loy-approvals.is-out{ background:#fff; border-color:var(--border); } .loy-approvals .loy-h{ margin-top:0; } .loy-lots:empty{ display:none; } .loy-lots-table{ width:100%; border-collapse:collapse; font-size:13px; background:var(--bg); border-radius:var(--radius); overflow:hidden; } .loy-lots-table th, .loy-lots-table td{ padding:6px 10px; text-align:left; border-bottom:1px solid var(--border); } .loy-lots-table th{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); } .loy-lots-table tfoot td{ border-bottom:0; } @media (max-width:640px){ .loy-group-intro{ flex-direction:column; align-items:stretch; } } /* ========================================================================== Roster UX pass (2026-09): nothing blocks the first look, mobile-first popups, sticky search, overflow menus, results bar, two-step enquiry form. ========================================================================== */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---- Cookie consent: a bar at the foot, not a screen ---- */ .consent-bar{ position:fixed; left:12px; right:12px; bottom:12px; z-index:49; display:flex; /* over the flip stage (48), under popups (50+) */ align-items:center; gap:12px; background:#fff; color:var(--ink); border:1px solid var(--border-strong); border-left:4px solid var(--red); border-radius:var(--radius); padding:10px 14px; box-shadow:0 12px 30px rgba(0,0,0,.18); max-width:var(--maxw); margin:0 auto; } .consent-bar > svg{ width:22px; height:22px; color:var(--red); flex:0 0 auto; } .consent-bar p{ flex:1 1 auto; font-size:13px; color:var(--ink-muted); line-height:1.4; min-width:0; } .consent-more{ color:var(--ink-faint); } .consent-actions{ display:flex; gap:8px; flex:0 0 auto; align-items:center; } .consent-actions .submit-btn{ padding:8px 14px; font-size:13.5px; } .consent-actions .chip{ padding:7px 12px; } body.consent-open .bot-fab{ bottom:96px; } /* keep the assistant button clear of the bar */ body.consent-open .bot-panel{ bottom:160px; } @media (max-width:640px){ .consent-bar{ flex-wrap:wrap; left:8px; right:8px; bottom:8px; padding:10px 12px; } .consent-bar > svg{ display:none; } .consent-more{ display:none; } .consent-actions{ width:100%; justify-content:flex-end; } .consent-actions .submit-btn{ flex:1; justify-content:center; } body.consent-open .bot-fab, body.consent-open .bot-panel{ display:none; } /* back once the bar is answered */ } /* ---- Identity gate: a dialog over the roster (the grid stays visible behind it) ---- */ .gate-overlay{ background:rgba(47,48,50,0.62); z-index:80; align-items:flex-start; padding-top:6vh; overflow-y:auto; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .gate-box{ position:relative; } .gate-close{ position:absolute; top:10px; right:10px; } body.gate-open{ overflow:hidden; } @media (max-width:640px){ .gate-overlay{ align-items:flex-end; padding:0; } .gate-box.gate-box-wide{ max-width:none; border-radius:14px 14px 0 0; padding:20px 16px calc(18px + env(safe-area-inset-bottom)); max-height:96dvh; overflow-y:auto; animation:sheetUp .25s ease-out; } .gate-logo{ height:28px; } .gate-box h2{ font-size:17px; padding-right:36px; } } /* ---- Header: bell + overflow menu; account links fold into the menu on small screens ---- */ .more-menu{ position:relative; display:inline-flex; } .more-trigger{ gap:3px; padding:0 6px; width:auto; min-width:36px; } .more-caret{ font-size:10px; line-height:1; opacity:.8; } .more-panel{ position:absolute; top:calc(100% + 8px); right:0; z-index:20050; min-width:230px; max-width:min(320px, calc(100vw - 24px)); padding:6px; background:#fff; color:var(--ink); border:1px solid var(--border); border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.18); text-align:left; max-height:calc(100vh - var(--top-h, 60px) - 16px); overflow-y:auto; } .more-panel[hidden]{ display:none; } .more-panel button, .more-panel a{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:7px; background:transparent; color:var(--ink); font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; text-decoration:none; min-height:40px; } .more-panel button:hover, .more-panel a:hover{ background:var(--bg); } .more-panel button > svg, .more-panel a > svg{ width:16px; height:16px; color:var(--ink-muted); flex:0 0 auto; } .more-panel button span{ display:flex; flex-direction:column; line-height:1.2; } .more-panel button small{ font-size:11.5px; font-weight:500; color:var(--ink-faint); } .more-panel [aria-checked="true"], .more-panel [aria-pressed="true"][role="menuitemradio"]{ background:var(--bg); } .more-panel [aria-checked="true"]::after, .more-panel [aria-pressed="true"][role="menuitemradio"]::after{ content:"✓"; margin-left:auto; font-weight:700; color:var(--red); } .more-panel .mbp-theme-head{ padding:8px 10px 4px; } .more-panel .mbp-theme-head + .mbp-theme-head, .more-links:not(:empty) + .mbp-theme-head{ border-top:1px solid var(--border); margin-top:4px; padding-top:10px; } .more-panel .mbp-theme-note{ border-top:1px solid var(--border); } .more-panel [data-flip-sound] .snd-on, .more-panel [data-flip-sound] .snd-off{ width:16px; height:16px; } .more-links{ display:none; } /* the cloned header links sit inside .top-links, so undo the bar styling */ .top-links .more-panel a{ color:var(--ink); border:0; border-radius:7px; font-size:14px; padding:9px 10px; } .top-links .more-panel a:hover{ background:var(--bg); } .top-links .more-panel a.top-link-cta{ background:transparent; color:var(--red); } .top-links .more-panel a.top-link-cta:hover{ background:var(--red-tint); filter:none; } @media (max-width:760px){ .top-links:has(.more-menu) > a{ display:none; } /* folded into the roster's menu… (other pages keep their links) */ .more-links{ display:block; } /* …and shown here instead */ .more-links + .mbp-theme-head{ border-top:1px solid var(--border); margin-top:4px; padding-top:10px; } .top-inner{ flex-wrap:nowrap; } .brand small{ display:none; } } /* Flip bar: layout dropdown shows the current layout's icon */ .flip-layout-trigger svg{ display:none; } body[data-flip-layout="cards"] .flip-layout-trigger .lay-cards, body[data-flip-layout="list"] .flip-layout-trigger .lay-list, body[data-flip-layout="photos"] .flip-layout-trigger .lay-photos{ display:block; } body:not([data-flip-layout]) .flip-layout-trigger .lay-cards{ display:block; } .flip-bar .more-panel{ right:0; } .flip-bar .flip-close{ margin-left:2px; } /* ---- Sticky search + filters ---- */ .controls{ position:sticky; top:var(--top-h, 56px); z-index:35; background:var(--bg); padding:8px 0 10px; margin:-8px 0 10px; } .controls::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--border); } body.view-flip .controls{ position:static; } .search-clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:0; background:var(--bg); color:var(--ink-muted); font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } .search-clear[hidden]{ display:none; } .search-clear:hover{ background:var(--red-tint); color:var(--red); } .search-input{ padding-right:40px; } @media (max-width:640px){ .controls{ gap:8px; } .search-input{ padding-top:11px; padding-bottom:11px; } .filters-row{ flex-wrap:nowrap; align-items:center; } /* circle chips scroll sideways in one row so the sticky bar stays short */ .team-filters{ flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; -webkit-overflow-scrolling:touch; } .team-filters::-webkit-scrollbar{ display:none; } .team-chip{ white-space:nowrap; flex:0 0 auto; } .view-switch a span, .view-switch a{ font-size:12.5px; padding:7px 10px; } } /* ---- Results bar: count · updated · sort ---- */ .results-bar{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:0 0 12px; font-size:13px; color:var(--ink-muted); } .results-bar[hidden]{ display:none; } .results-count{ font-weight:700; color:var(--ink); } .results-updated{ color:var(--ink-faint); } .results-updated::before{ content:"·"; margin-right:10px; color:var(--border-strong); } .results-updated[hidden]{ display:none; } .sort-wrap{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border-strong); border-radius:999px; background:#fff; padding:0 10px 0 10px; height:32px; } .sort-wrap svg{ width:14px; height:14px; color:var(--ink-faint); } .sort-wrap select{ border:0; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--ink); padding:0 2px; height:30px; cursor:pointer; outline:none; max-width:170px; } /* ---- Member cards: thumb-friendly actions on touch screens (and any phone-width window) ---- */ @media (pointer:coarse), (max-width:640px){ .icon-btn, .team-chip, .chip, .view-switch a, .biz-contact-pill, .suggest-item, .pocketlite-tag, .deal-chip, .ticker-item{ min-height:44px; } .card-actions .icon-btn{ flex:1 1 0; justify-content:center; font-size:13.5px; } .bell-btn, .more-trigger, .close-btn{ min-width:42px; min-height:42px; } .member-card{ gap:10px; } .qr-thumb{ width:96px; height:96px; } .gallery-tile{ min-height:44px; } .sort-wrap{ height:40px; } .sort-wrap select{ height:38px; } } /* ---- Popups: a bottom sheet on phones, the centred dialog elsewhere ---- */ @keyframes sheetUp{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } } @media (max-width:640px){ .overlay, .overlay:not(#page-overlay){ align-items:flex-end; padding:0; } /* :not(#…) matches the id-strength rule above */ .modal, .modal.modal-sm{ max-width:none; width:100%; max-height:100vh; max-height:100dvh; min-height:50vh; min-height:50dvh; border-radius:14px 14px 0 0; border-bottom:0; padding:0 16px calc(14px + env(safe-area-inset-bottom)); animation:sheetUp .25s ease-out; } .modal-head{ position:sticky; top:0; z-index:3; background:#fff; padding-top:14px; margin:0 -16px 6px; padding-left:16px; padding-right:16px; } .modal-head::before{ content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--border-strong); } .modal-head h2{ font-size:18px; } .modal-cta{ position:sticky; bottom:0; z-index:3; background:#fff; margin:16px -16px 0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); } .modal-cta .submit-btn{ width:100%; justify-content:center; min-height:46px; } .modal-cta .submit-note{ text-align:center; width:100%; } .biz-card{ flex-direction:column; align-items:center; text-align:center; } .biz-card-contacts{ justify-content:center; } .lightbox-modal{ max-width:none; width:100%; border-radius:14px 14px 0 0; } .results-actions .copy-btn, .results-actions .wa-link{ flex:1; justify-content:center; text-align:center; min-height:46px; } .admin-modal{ max-width:none; width:100%; max-height:100dvh; border-radius:14px 14px 0 0; } } @media (prefers-reduced-motion: reduce){ .modal, .gate-box.gate-box-wide{ animation:none; } } /* ---- Business card: QR + share sit right under the card ---- */ .qr-section .qr-row{ align-items:center; } .qr-section .qr-thumb{ width:84px; height:84px; flex:0 0 auto; } .qr-section .qr-actions{ flex:1 1 auto; min-width:0; gap:6px; } .qr-section .details-subhead{ margin-bottom:2px; } .qr-btns{ display:flex; gap:8px; flex-wrap:wrap; } /* ---- Enquiry form: essentials, then "Add more details" ---- */ .enq-essentials{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } @media (max-width:520px){ .enq-essentials{ grid-template-columns:1fr; } } .form-more-toggle{ display:flex; align-items:center; gap:10px; width:100%; margin-top:16px; padding:10px 12px; border:1px dashed var(--border-strong); border-radius:var(--radius); background:var(--bg); color:var(--ink); font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; min-height:44px; } .form-more-toggle:hover{ border-color:var(--red); color:var(--red); } .form-more-toggle > svg{ width:16px; height:16px; color:var(--red); transition:transform .18s ease; flex:0 0 auto; } .form-more-toggle[aria-expanded="true"] > svg{ transform:rotate(180deg); } .form-more-toggle small{ margin-left:auto; font-size:12px; font-weight:500; color:var(--ink-faint); text-align:right; } @media (max-width:520px){ .form-more-toggle small{ display:none; } } .form-more[hidden]{ display:none; } .form-more{ border-left:2px solid var(--border); padding-left:12px; margin-top:4px; } /* ---- Flip book on phones: the page gets the width; arrows float over its edges ---- */ @media (max-width:760px){ .flip-body{ padding:8px 10px; } .side-arrow{ background:rgba(255,255,255,.88); box-shadow:0 2px 8px rgba(0,0,0,.18); } .flip-bar{ gap:6px; padding:6px 8px; } .flip-bar .bell-btn{ width:36px; } .flip-bar .more-trigger{ min-width:36px; } .flip-bar .more-caret{ display:none; } } @media (max-width:480px){ .flip-bar .bell-btn{ width:34px; height:34px; } .my-page .page-inner{ padding:14px 12px; } .page-title{ font-size:18px; } .page-sub{ font-size:12px; margin-bottom:8px; } .fmc-name{ font-size:13.5px; } .fmc-company{ font-size:12px; } } /* Redemption approvals: approve fewer points than requested */ .loy-approve-pts{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-muted); margin-right:6px; } .loy-approve-pts input{ width:64px; padding:4px 6px; border:1px solid var(--border-strong); border-radius:var(--radius); font:inherit; font-size:13px; font-weight:700; color:var(--ink); text-align:right; } .loy-approve-pts input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 2px var(--red-tint); } /* Partner requests: who has accepted a reward's circle points, under the settings row */ .loy-partners{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; } .loy-partner{ font-size:11.5px; font-weight:600; border-radius:999px; padding:2px 9px; border:1px solid var(--border-strong); color:var(--ink-muted); background:#fff; white-space:nowrap; } .loy-partner.accepted{ border-color:var(--green); color:var(--green); background:var(--green-tint); } .loy-partner.pending{ border-color:#E0A93B; color:#8A6416; background:rgba(224,169,59,.12); } .loy-partner.declined{ border-color:var(--red); color:var(--red); background:var(--red-tint); } /* ---- Points to coupons (coupons page) ---- */ .cpn-issue-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin:0 0 14px; padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); } .cpn-issue-bar label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ink-muted); min-width:280px; flex:1; max-width:460px; } .cpn-balance{ font-size:14px; } .cpn-balance b{ font-size:22px; color:var(--red); margin-right:4px; } .cpn-menu{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; } .cpn-card{ display:flex; flex-direction:column; gap:5px; padding:12px 14px; background:#fff; border:1px solid var(--border); border-left:4px solid var(--grey-700, #58595B); border-radius:var(--radius); } .cpn-card.is-partner{ border-left-color:var(--red); } .cpn-card.is-short{ opacity:.65; } .cpn-card .refresh-btn{ margin-top:auto; align-self:flex-start; } .cpn-card-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; } .cpn-at{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); } .cpn-pts{ font-weight:700; color:var(--red); white-space:nowrap; } .cpn-title{ font-size:15px; color:var(--ink); } .cpn-ticket{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin:10px 0; padding:14px 16px; background:#fff; border:2px dashed var(--red); border-radius:var(--radius); } .cpn-ticket.is-off{ border-color:var(--border-strong); } .cpn-code{ display:block; margin:2px 0 4px; font-size:24px; letter-spacing:.08em; color:var(--red); font-family:Consolas, 'Courier New', monospace; } .cpn-code-input{ text-transform:uppercase; letter-spacing:.06em; font-family:Consolas, 'Courier New', monospace; } .cpn-use{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; } .cpn-use label{ display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:600; color:var(--ink-muted); } .cpn-use .field-input{ width:140px; } .cpn-check{ font-size:12px; line-height:1.35; margin:1px 0; } .cpn-check.ok{ color:var(--green); } .cpn-check.warn{ color:#8A5A0B; font-weight:600; } .cpn-steps{ display:grid; gap:12px; } .cpn-step{ padding:12px 16px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); } .cpn-step h3{ display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:15px; } .cpn-step h3 span{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--red); color:#fff; font-size:13px; } .cpn-step p, .cpn-step li{ font-size:13.5px; color:var(--ink-muted); } .cpn-step ul, .cpn-step ol{ margin:4px 0; padding-left:20px; } .cpn-step .crm-add{ margin:8px 0; } .cpn-calc{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; } .cpn-calc label{ display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:600; color:var(--ink-muted); } .cpn-calc .field-input{ width:120px; } .cpn-calc-out{ flex-basis:100%; } @media (max-width:600px){ .cpn-issue-bar label{ min-width:0; max-width:none; } .cpn-ticket{ flex-direction:column; align-items:flex-start; } } .cpn-step a, .cpn-page .lead-notes a, .cpn-page .loy-hint a{ color:var(--red); } .cpn-calc-out .muted{ font-size:12.5px; } /* ---- Dashboard quick-access cards (one per place the member works in) ---- */ .dash-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; margin:0 0 18px; } .dash-card{ position:relative; display:flex; align-items:flex-start; gap:10px; padding:12px 30px 12px 12px; background:#fff; border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--radius); text-decoration:none; color:var(--ink); transition:border-color .12s, box-shadow .12s, transform .12s; } .dash-card:hover{ border-color:var(--red); border-left-color:var(--red); box-shadow:0 2px 10px rgba(0,0,0,.06); transform:translateY(-1px); } .dash-card.is-flagged{ border-left-color:var(--red); background:rgba(var(--red-rgb), .035); } .dc-ico{ flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); background:var(--bg); } .dc-ico svg{ width:18px; height:18px; fill:none; stroke:var(--red); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .dc-body{ display:flex; flex-direction:column; gap:1px; min-width:0; } .dc-label{ font-size:14px; font-weight:700; line-height:1.25; } .dc-what{ font-size:11.5px; color:var(--ink-faint); line-height:1.3; } .dc-figure{ margin-top:4px; display:flex; align-items:baseline; gap:5px; } .dc-figure b{ font-size:21px; font-weight:700; line-height:1; color:var(--ink); } .dc-figure span{ font-size:11.5px; color:var(--ink-muted); } .dc-note{ font-size:11.5px; color:var(--ink-muted); } .dash-card.is-flagged .dc-note{ color:var(--red); font-weight:600; } .dc-go{ position:absolute; top:50%; right:10px; transform:translateY(-50%); font-size:20px; color:var(--ink-faint); } .dash-card:hover .dc-go{ color:var(--red); } @media (max-width:600px){ .dash-cards{ grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)); gap:8px; } .dash-card{ padding:10px 22px 10px 10px; } .dc-figure b{ font-size:18px; } .dc-what{ display:none; } } /* ===== Verification gate (2026-09-21): phone -> SMS code, cannot be dismissed ===== */ .gate-overlay{ background:rgba(241,242,244,0.96); backdrop-filter:blur(6px); } .gate-step h3{ font-size:15px; margin:0 0 4px; color:var(--ink); } .gate-step > p{ font-size:12.5px; color:var(--ink-muted); margin:0 0 12px; line-height:1.45; } .gate-step > p a{ color:var(--red); font-weight:600; } .gate-step .field-input{ margin-bottom:8px; text-align:left; } .gate-step .field-input.gate-code{ text-align:center; font-size:22px; letter-spacing:8px; font-weight:700; } .gate-step .submit-btn{ width:100%; margin-top:6px; justify-content:center; } .gate-step .submit-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .gate-step .gate-note a.disabled{ color:var(--ink-faint); pointer-events:none; } .gate-local{ color:var(--red) !important; font-weight:600; } body.gate-open main, body.gate-open .side-rail{ filter:blur(3px); pointer-events:none; user-select:none; } .top-viewer{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#fff; opacity:.9; padding:6px 10px; border:1px solid rgba(255,255,255,.28); border-radius:999px; } .top-viewer svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ===== Sharing a profile: the recipient first, then clean icon buttons ===== */ .share-to-fields{ display:grid; grid-template-columns:1.3fr 1fr auto; gap:8px; align-items:center; } .share-to-fields .field-input{ margin:0; } .share-to-fields .view-btn{ white-space:nowrap; } .share-with{ font-size:12.5px; color:var(--ink-muted); display:block; margin-bottom:8px; } .share-with a{ color:var(--red); font-weight:600; } .share-row{ display:flex; gap:10px; flex-wrap:wrap; } .share-ic{ width:42px; height:42px; border-radius:50%; border:1px solid var(--border-strong); background:#fff; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease; } .share-ic svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .share-ic:hover{ transform:scale(1.08); } .share-ic.sh-wa:hover{ background:#25D366; border-color:#25D366; color:#fff; } .share-ic.sh-sms:hover, .share-ic.sh-mail:hover, .share-ic.sh-copy:hover, .share-ic.sh-qr:hover, .share-ic.sh-more:hover{ background:var(--red); border-color:var(--red); color:#fff; } .share-ic[hidden]{ display:none; } .share-done{ font-size:12px; color:var(--red); font-weight:600; margin-top:6px; } .details-video{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden; } .details-video iframe, .details-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; } @media (max-width:620px){ .share-to-fields{ grid-template-columns:1fr; } } /* ===== Flip book: layout switch loader + one-circle picker (2026-09-21) ===== */ .flip-switching{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:10px; z-index:6; background:rgba(0,0,0,.28); color:#fff; font-weight:600; font-size:14px; backdrop-filter:blur(2px); border-radius:12px; } .flip-stage.is-switching .flip-switching{ display:flex; } .flip-stage.is-switching #book{ opacity:.35; transition:opacity .15s ease; } .flip-stage.is-switching .my-page *{ transition:none !important; animation:none !important; } .flip-pick{ position:absolute; inset:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; color:#fff; } .flip-pick[hidden]{ display:none; } .flip-pick h3{ font-size:24px; margin:0 0 6px; } .flip-pick > p{ opacity:.85; margin:0 0 18px; font-size:14px; } .flip-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; width:100%; max-width:920px; } .flip-pick-card{ display:flex; flex-direction:column; gap:4px; text-align:left; background:#fff; color:var(--ink); border-radius:12px; padding:16px 18px; text-decoration:none; border:1px solid var(--border-strong); transition:transform .15s ease, box-shadow .15s ease; } .flip-pick-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); } .flip-pick-card b{ font-size:16px; } .flip-pick-card span{ font-size:12.5px; color:var(--ink-muted); } .flip-pick-card i{ font-style:normal; font-size:12.5px; color:var(--red); font-weight:700; margin-top:6px; } /* ===== Dashboard: catalogue / video / full-profile page (2026-09-21) ===== */ .extras-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .extra-card{ background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:10px; } .extra-card-wide{ grid-column:1 / -1; } .extra-card h4{ margin:0; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .extra-card h4 svg{ width:18px; height:18px; stroke:var(--red); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .extra-card h4 small{ font-weight:400; color:var(--ink-faint); font-size:12px; flex-basis:100%; } .extra-empty{ color:var(--ink-muted); font-size:13px; margin:0; } .extra-file{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--ink-muted); } .extra-file a{ color:var(--ink); text-decoration:none; } .extra-file .mini-btn{ margin-left:auto; } .extra-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .extra-form input[type=file]{ flex:1; min-width:180px; font-size:12.5px; } .extra-video{ position:relative; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; } .extra-video iframe, .extra-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; } .site-form{ display:flex; flex-direction:column; gap:10px; } .site-toggle{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; cursor:pointer; } .site-toggle span{ color:var(--ink-muted); font-size:12.5px; } .site-addr{ display:flex; align-items:center; border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; } .site-addr span{ background:var(--bg); padding:9px 10px; font-size:13px; color:var(--ink-muted); white-space:nowrap; } .site-addr input{ flex:1; border:0; padding:9px 10px; font:inherit; font-size:14px; min-width:0; } .site-form textarea{ width:100%; border:1px solid var(--border-strong); border-radius:8px; padding:10px; font:inherit; font-size:13.5px; resize:vertical; } .site-views{ font-size:12.5px; color:var(--ink-faint); margin-left:auto; } @media (max-width:900px){ .extras-grid{ grid-template-columns:1fr; } } /* ===== Blog (2026-09-21) ===== */ .blog-wrap{ padding-top:18px; } .blog-circles{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; } .blog-circles .chip{ text-decoration:none; } .blog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; } .blog-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease; } .blog-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.10); } .blog-card img, .blog-card-art{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:linear-gradient(135deg, var(--red-tint), var(--bg)); } .blog-card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; } .blog-card h3{ font-size:16.5px; margin:0; line-height:1.3; } .blog-card p{ margin:0; color:var(--ink-muted); font-size:13.5px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .blog-meta{ font-size:12px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; font-weight:600; } .blog-post{ max-width:760px; margin:0 auto; padding:26px 16px 30px; } .blog-post h1{ font-size:32px; line-height:1.2; margin:8px 0 12px; } .blog-lead{ font-size:17px; color:var(--ink-muted); line-height:1.55; margin:0 0 18px; } .blog-cover{ width:100%; border-radius:var(--radius); margin:0 0 22px; display:block; } .blog-body{ font-size:16px; line-height:1.7; color:var(--ink); } .blog-body p{ margin:0 0 16px; } .blog-body h2{ font-size:22px; margin:26px 0 10px; } .blog-body h3{ font-size:18px; margin:22px 0 8px; } .blog-body h4{ font-size:16px; margin:18px 0 6px; } .blog-body ul, .blog-body ol{ margin:0 0 16px 22px; } .blog-body img{ max-width:100%; height:auto; border-radius:10px; } .blog-body blockquote{ border-left:4px solid var(--red); margin:0 0 16px; padding:8px 16px; background:var(--red-tint); border-radius:0 10px 10px 0; } .blog-body a{ color:var(--red); } .blog-body table{ border-collapse:collapse; width:100%; margin:0 0 16px; font-size:14.5px; } .blog-body th, .blog-body td{ border:1px solid var(--border-strong); padding:8px 10px; text-align:left; } .blog-body th{ background:var(--bg); } .blog-share{ display:flex; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); } .blog-share .sh-in:hover{ background:#0A66C2; border-color:#0A66C2; color:#fff; } /* ===== Circle rewards + subscription pages (2026-09-21) ===== */ .rw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .rw-card{ background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:10px; } .rw-card-wide{ grid-column:1 / -1; } .rw-card h3{ margin:0; font-size:16px; } .rw-card p{ margin:0; font-size:13.5px; color:var(--ink-muted); line-height:1.5; } .rw-card .refresh-btn{ align-self:flex-start; } .rw-big{ display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr)); gap:4px 14px; align-items:end; } .rw-big b{ font-size:26px; line-height:1; color:var(--ink); } .rw-big span{ font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; grid-row:2; } .rw-big b:nth-of-type(n){ grid-row:1; } .rw-share{ background:var(--red-tint); border-radius:var(--radius); padding:12px 14px; font-size:13.5px; display:flex; flex-direction:column; gap:8px; } .enq-table td.r, .enq-table th.r{ text-align:right; } .enq-table td.pos{ color:#1E7A45; font-weight:700; } .enq-table td.neg{ color:#B42323; font-weight:700; } .enq-table tr.is-off td{ color:var(--ink-faint); } @media (max-width:820px){ .rw-grid{ grid-template-columns:1fr; } } .sub-period{ display:flex; gap:8px; flex-wrap:wrap; } .sub-circles{ display:flex; flex-direction:column; gap:8px; } .sub-circle{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; border:1px solid var(--border-strong); border-radius:10px; padding:10px 12px; cursor:pointer; } .sub-circle input{ grid-row:span 2; width:18px; height:18px; } .sub-circle span{ font-size:12.5px; color:var(--ink-muted); } .sub-total{ display:flex; justify-content:space-between; align-items:center; font-size:15px; padding:10px 12px; background:var(--bg); border-radius:10px; } .sub-total b{ font-size:20px; } .sub-list{ margin:0 0 6px 18px; padding:0; font-size:13.5px; color:var(--ink-muted); line-height:1.6; } .featured-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#8A5A0B; background:#FFF1D6; border-radius:999px; padding:2px 8px; } .featured-badge svg{ width:11px; height:11px; fill:currentColor; stroke:none; } /* ---- Ad publish (member page): circle / view bar, 2D map with pins, locations, screens, booking ---- */ .ads-bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; } .ads-map-card{ padding:10px; margin-bottom:12px; } .ads-map{ position:relative; width:100%; aspect-ratio:16/9; max-width:calc(min(70vh, 560px) * 16 / 9); margin:0 auto; border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; background-color:#fff; background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size:10% 10%; background-repeat:repeat; } .ads-map[style*="background-image"]{ background-size:100% 100%; background-repeat:no-repeat; } .ads-map-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:13.5px; padding:16px; text-align:center; } .ads-pin{ position:absolute; transform:translate(-50%, -100%); border:0; background:none; padding:0; cursor:pointer; font:inherit; text-align:center; } .ads-pin i{ display:block; width:20px; height:20px; margin:0 auto; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#1E7A45; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); transition:transform .15s; } .ads-pin.is-low i{ background:#E9A23B; } .ads-pin.is-full i{ background:#B42323; } .ads-pin:hover i, .ads-pin.is-open i{ transform:rotate(-45deg) scale(1.25); } .ads-pin b{ display:inline-flex; align-items:center; gap:5px; font-size:11px; background:rgba(255,255,255,.94); border-radius:4px; padding:2px 7px; margin-top:3px; white-space:nowrap; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.2); } .ads-pin.is-open b{ outline:2px solid var(--red); } .ads-pin b span{ background:var(--bg); border-radius:999px; padding:0 6px; font-size:10.5px; color:var(--ink-muted); } .ads-legend{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; align-items:center; } .ads-legend span{ border-radius:4px; padding:2px 8px; } .ads-legend .is-ok{ color:#1E7A45; background:#E2F4EA; } .ads-legend .is-low{ color:#8A5A0B; background:#FFF1D6; } .ads-legend .is-full{ color:#B42323; background:#FDE2E2; } .ads-legend .muted{ color:var(--ink-faint); } .ads-locs{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; } .ads-loc{ padding:0; gap:0; } .ads-loc-head{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:100%; padding:12px 14px; border:0; background:none; font:inherit; text-align:left; cursor:pointer; color:var(--ink); } .ads-loc-head:hover{ background:var(--bg); } .ads-loc-dot{ width:12px; height:12px; border-radius:50%; background:#1E7A45; } .ads-loc-dot.is-low{ background:#E9A23B; } .ads-loc-dot.is-full{ background:#B42323; } .ads-loc-title{ display:flex; flex-direction:column; min-width:0; } .ads-loc-title b{ font-size:15px; } .ads-loc-title small{ color:var(--ink-muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ads-loc-nums{ font-size:12.5px; color:var(--ink-muted); white-space:nowrap; } .ads-loc-nums b{ font-size:16px; color:var(--ink); } .ads-screens{ display:flex; flex-direction:column; gap:10px; padding:0 14px 14px; border-top:1px solid var(--border); padding-top:12px; } .ads-screen{ border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; background:#FBFBFC; } .ads-screen-head{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin-bottom:8px; } .ads-screen-head small{ color:var(--ink-muted); font-size:12px; } .ads-screen-icon{ display:block; width:34px; height:20px; border:2px solid var(--grey-700); border-radius:3px; background:linear-gradient(135deg, #fff, var(--bg)); } .ads-screen-icon.portrait{ width:20px; height:34px; } .ads-screen-req{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; text-align:right; } .ads-screen-req span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); } .ads-screen-req b{ font-size:15px; } .ads-screen-req small{ font-size:11px; color:var(--ink-muted); } .ads-slots{ background:#fff; } .ads-thumb{ width:64px; height:36px; object-fit:cover; border-radius:4px; border:1px solid var(--border-strong); background:var(--bg); display:block; } .ads-thumb.portrait{ width:36px; height:64px; } .ads-mine{ margin-top:4px; } .ads-book-sum{ background:var(--bg); border-radius:var(--radius); padding:10px 12px; font-size:13.5px; margin-bottom:12px; line-height:1.5; } .ads-preview{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; border:1px solid var(--border-strong); border-radius:var(--radius); padding:8px 10px; margin:-4px 0 12px; font-size:13px; } .ads-preview[hidden]{ display:none; } .ads-preview .ads-tv{ flex:none; } .ads-preview.is-ok{ border-color:#1E7A45; color:#1E7A45; } .ads-preview.is-err{ border-color:#B42323; color:#B42323; } @media (max-width:720px){ .ads-loc-head{ grid-template-columns:auto 1fr; } .ads-loc-nums{ grid-column:2; white-space:normal; } .ads-screen-head{ grid-template-columns:auto 1fr; } .ads-screen-req{ grid-column:2; align-items:flex-start; text-align:left; } .loy-circle-find{ grid-template-columns:1fr; } } /* ---- Ad publish: on-screen preview (mock screen that plays the slot's loop) ---- */ .adp-wrap{ display:flex; flex-direction:column; gap:10px; } .adp-stage{ display:flex; justify-content:center; padding:16px; background:#E9EAED; border-radius:var(--radius); } .adp-tv{ position:relative; width:100%; max-width:640px; background:#111; border-radius:10px; padding:12px 12px 20px; box-shadow:0 12px 30px rgba(0,0,0,.25), inset 0 0 0 2px #2a2a2a; } .adp-stage.is-portrait .adp-tv{ max-width:300px; } .adp-screen{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; border-radius:3px; } .adp-stage.is-portrait .adp-screen{ aspect-ratio:9/16; } .adp-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } .adp-idle{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#777; gap:4px; text-align:center; padding:12px; font-size:13px; } .adp-idle b{ color:#bbb; font-size:17px; } .adp-osd{ position:absolute; left:10px; bottom:12px; font-size:12px; color:#fff; background:rgba(0,0,0,.55); border-radius:4px; padding:3px 8px; } .adp-osd em{ color:#FFD37A; font-style:normal; margin-left:6px; } .adp-bar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.15); } .adp-bar i{ display:block; height:100%; width:0; background:var(--red); } .adp-brand{ position:absolute; left:50%; bottom:4px; transform:translateX(-50%); font-size:10px; color:#666; letter-spacing:.1em; } .adp-ctl{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .adp-time{ font-size:13px; color:var(--ink-muted); font-variant-numeric:tabular-nums; margin-left:4px; } .adp-speed{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-muted); } .adp-speed .mini-btn.is-on{ background:var(--grey-700); border-color:var(--grey-700); color:#fff; } .adp-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px; max-height:260px; overflow:auto; } .adp-item{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; text-align:left; border:1px solid var(--border); border-radius:6px; padding:5px 8px; background:#fff; cursor:pointer; font:inherit; color:var(--ink); } .adp-item:hover{ border-color:var(--red); } .adp-item.is-on{ border-color:var(--red); background:var(--red-tint); } .adp-item img{ width:52px; height:30px; object-fit:cover; border-radius:3px; background:#222; } .adp-item img.is-portrait{ width:30px; height:52px; } .adp-item span{ display:flex; flex-direction:column; min-width:0; } .adp-item b{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .adp-item small{ font-size:11px; color:var(--ink-muted); } .adp-item em{ color:#8A5A0B; font-style:normal; } .adp-item i{ font-style:normal; font-size:11px; color:#fff; background:var(--grey-700); border-radius:999px; min-width:20px; text-align:center; padding:1px 6px; } .adp-item.st-mine i{ background:#E9A23B; } /* booking form: the chosen picture inside a small screen frame */ .ads-tv{ display:block; background:#111; border-radius:6px; padding:6px 6px 10px; box-shadow:inset 0 0 0 1px #2a2a2a; } .ads-tv img{ display:block; width:180px; height:101px; object-fit:contain; background:#000; border-radius:2px; } .ads-tv.portrait img{ width:90px; height:160px; } /* ---- Screen owner portal ---- */ .top-user{ font-size:13px; color:#C9CACE; align-self:center; margin-right:6px; } .own-thumbs{ display:inline-flex; gap:3px; align-items:center; margin-right:8px; vertical-align:middle; } .own-thumbs img{ width:34px; height:20px; object-fit:cover; border-radius:3px; background:#222; } .own-thumbs img.is-wait{ opacity:.45; outline:1px dashed #E9A23B; } .own-thumbs em{ font-size:11px; font-style:normal; color:var(--ink-muted); } .own-screens{ display:flex; flex-direction:column; gap:8px; } .own-screen{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; } .own-otp{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; } .own-otp small{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); } .own-otp b{ font-size:22px; letter-spacing:.16em; font-variant-numeric:tabular-nums; color:var(--red); } .own-otp.big b{ font-size:30px; } .own-card{ gap:12px; } .own-card .ads-screen-head{ margin:0; } .own-facts{ display:grid; grid-template-columns:1.2fr 1fr; gap:14px; align-items:start; } .own-facts > div > small{ display:block; font-size:12px; color:var(--ink-muted); margin-bottom:4px; } .own-url{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .own-url code{ font-size:12.5px; background:var(--bg); padding:6px 8px; border-radius:6px; word-break:break-all; } @media (max-width:720px){ .own-facts{ grid-template-columns:1fr; } .own-screen{ grid-template-columns:auto 1fr; } .own-otp{ grid-column:2; align-items:flex-start; } } .own-walk{ margin-top:10px; } .own-walk label{ display:block; font-size:12px; color:var(--ink-muted); margin-bottom:4px; } .own-walk > div{ display:flex; gap:6px; align-items:center; } .own-walk .field-input{ width:140px; padding:6px 10px; font-size:14px; } .own-propose{ margin-top:14px; } .own-newloc{ background:var(--bg); border-radius:var(--radius); padding:10px 12px 0; margin-bottom:12px; } .own-newloc[hidden]{ display:none; } .own-grid3{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0 12px; } .ads-walk{ display:inline-block; font-size:11.5px; font-weight:700; color:#1E7A45; background:#E2F4EA; border-radius:999px; padding:1px 8px; margin-left:4px; vertical-align:middle; } /* ---- Ad publish: repeat an existing ad ---- */ .rpt{ display:flex; flex-direction:column; gap:12px; } .rpt-pick{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; } .rpt-ad{ display:flex; flex-direction:column; align-items:center; gap:4px; border:1px solid var(--border-strong); border-radius:8px; padding:6px; background:#fff; cursor:pointer; font:inherit; min-width:96px; } .rpt-ad.is-on{ border-color:var(--red); background:var(--red-tint); } .rpt-ad img{ width:80px; height:45px; object-fit:cover; border-radius:3px; background:#222; } .rpt-ad img.portrait{ width:45px; height:80px; } .rpt-ad span{ font-size:11.5px; color:var(--ink-muted); text-align:center; line-height:1.3; } .rpt-ad small{ display:block; font-size:10.5px; color:var(--ink-faint); } .rpt-slots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:6px; max-height:300px; overflow:auto; } .rpt-slot{ display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin:0; cursor:pointer; } .rpt-slot:has(input:checked){ border-color:var(--red); background:var(--red-tint); } .rpt-slot input{ width:17px; height:17px; } .rpt-slot span{ display:flex; flex-direction:column; min-width:0; } .rpt-slot b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rpt-slot small{ font-size:11.5px; color:var(--ink-muted); } .mini-btn.is-primary{ border-color:var(--red); color:var(--red); font-weight:700; } .mini-btn.is-primary:hover{ background:var(--red); color:#fff; } .ads-mine h3 .mini-btn{ float:right; } /* ========================================================================== Counter — point of sale (member dashboard → pos) Two panes on a wide screen: the bill on the left, the menu on the right. Colours come from the theme tokens at the top of this file, so the counter follows whichever theme the circle or the viewer picked. ========================================================================== */ .pos-main{ padding:10px 16px 12px; } .pos-page.in-popup .pos-main{ padding:6px 4px 8px; } /* Tabs on the left, the day's figures on the right — one line, no page header above it. */ .pos-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 10px; } .pos-tabs{ margin:0; gap:6px; } .pos-tabs .crm-chip{ padding:6px 13px; } .pos-kpis{ display:flex; align-items:stretch; gap:0; border:1px solid var(--border-strong); border-radius:999px; background:#fff; overflow:hidden; } .pos-kpi{ display:flex; align-items:baseline; gap:6px; padding:5px 14px; border-left:1px solid var(--border); white-space:nowrap; } .pos-kpi:first-child{ border-left:0; } .pos-kpi span{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); } .pos-kpi b{ font-size:14.5px; color:var(--ink); font-variant-numeric:tabular-nums; } .pos-kpi:first-child b{ color:var(--red); } @media (max-width:760px){ .pos-kpis{ width:100%; border-radius:var(--radius); } .pos-kpi{ flex:1; justify-content:center; padding:5px 8px; } } /* .crm-lbl and friends set display, which beats the browser default for [hidden]. */ .pos-page [hidden]{ display:none !important; } .loy-kpi small{ display:block; font-size:11px; color:#C9CACE; } .loy-panel{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; max-height:calc(100vh - 150px); overflow-y:auto; } @media (max-width:980px){ .loy-panel{ max-height:none; overflow:visible; } } .loy-panel .dash-h:first-child{ margin-top:0; } .pos-page .muted{ font-size:12.5px; color:var(--ink-faint); } .mini-chip.is-on{ background:var(--red); border-color:var(--red); color:#fff; } .pos-n{ text-align:right; } .pos-empty-setup b{ display:block; margin-bottom:4px; color:var(--ink); font-size:15px; } .pos-empty-setup p{ margin:0 auto 12px; max-width:560px; } /* ---- the two panes ---- */ .pos-wrap{ display:grid; grid-template-columns:minmax(0,510px) minmax(0,1fr); gap:12px; align-items:stretch; height:calc(100vh - 150px); min-height:460px; } .pos-page.in-popup .pos-wrap{ height:calc(100vh - 90px); } @media (max-width:980px){ .pos-wrap{ grid-template-columns:1fr; } } .pos-bill, .pos-menu{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:12px; } .pos-bill{ display:flex; flex-direction:column; gap:8px; min-height:0; overflow:hidden; } .pos-menu{ display:flex; flex-direction:column; min-height:0; } @media (max-width:980px){ .pos-wrap{ height:auto; } .pos-bill, .pos-menu{ overflow:visible; } } /* ---- who is buying ---- */ .pos-cust{ display:grid; grid-template-columns:1fr 130px auto; gap:6px; } @media (max-width:420px){ .pos-cust{ grid-template-columns:1fr; } } .pos-cust .field-input{ height:36px; padding:4px 10px; font-size:14px; } .pos-cust-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:20px; font-size:12.5px; } /* ---- the bill ---- */ .pos-cart-scroll{ flex:1 1 auto; min-height:90px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); } @media (max-width:980px){ .pos-cart-scroll{ max-height:46vh; } } .pos-cart-table{ border:0; font-size:13px; table-layout:fixed; width:100%; } .pos-cart-table th, .pos-cart-table td{ padding:6px 5px; } .pos-cart-table th:first-child, .pos-cart-table td:first-child{ padding-left:9px; } .pos-cart-table col.c-item{ width:auto; } .pos-cart-table col.c-price{ width:64px; } .pos-cart-table col.c-qty{ width:98px; } .pos-cart-table col.c-disc{ width:50px; } .pos-cart-table col.c-total{ width:64px; } .pos-cart-table col.c-x{ width:36px; } .pos-cart-table td:last-child .mini-btn{ width:28px; padding:4px 0; justify-content:center; } .pos-cart-table td:first-child b{ display:block; overflow-wrap:anywhere; } .pos-cart-table th{ position:sticky; top:0; z-index:1; } .pos-cart-table td{ vertical-align:middle; } .pos-cart-table .muted{ font-size:11px; } .pos-cart-empty{ text-align:center; color:var(--ink-faint); font-style:italic; padding:26px 10px !important; } .pos-cell{ width:100%; height:30px; padding:2px 6px; border:1px solid var(--border-strong); border-radius:4px; background:#fff; color:var(--ink); font:inherit; font-size:13px; text-align:right; } .pos-cell:focus{ border-color:var(--red); outline:none; box-shadow:0 0 0 2px var(--red-tint); } .pos-qty{ display:flex; align-items:center; justify-content:flex-end; gap:2px; } .pos-qty .pos-cell{ width:44px; text-align:center; } .pos-qty .mini-btn{ width:24px; height:28px; justify-content:center; padding:0; font-size:15px; line-height:1; } /* ---- what it comes to ---- */ .pos-totals{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); padding:8px 10px; } .pos-t-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:3px 0; font-size:13.5px; color:var(--ink-muted); } .pos-t-row b{ color:var(--ink); font-variant-numeric:tabular-nums; } .pos-t-disc .pos-disc-in{ display:inline-flex; align-items:center; gap:4px; } .pos-t-disc .pos-cell{ width:64px; flex:0 0 64px; } .pos-t-disc select.pos-cell{ width:48px; flex:0 0 48px; text-align:left; } .pos-t-net{ margin-top:5px; padding-top:7px; border-top:1px solid var(--border-strong); font-size:15px; font-weight:700; color:var(--ink); } .pos-t-net b{ font-size:20px; color:var(--red); } .pos-t-pts b{ color:#1E7A45; } .pos-actions{ display:flex; gap:6px; } .pos-actions .refresh-btn{ flex:1; justify-content:center; } .pos-pay-btn{ flex:1.6 !important; font-size:14.5px; } .pos-pay-btn small{ margin-left:6px; opacity:.7; font-weight:600; } /* ---- the menu ---- */ .pos-menu-bar{ display:flex; gap:6px; margin-bottom:8px; } .pos-menu-bar .field-input{ height:36px; padding:4px 12px; font-size:14px; } .pos-cats{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; } .pos-cats .crm-chip{ padding:5px 11px; font-size:12.5px; } .pos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(138px, 1fr)); grid-auto-rows:min-content; gap:8px; flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:2px; } @media (max-width:980px){ .pos-grid{ max-height:60vh; } } .pos-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:88px; padding:9px 11px; border:0; border-radius:var(--radius); color:#fff; font:inherit; text-align:left; cursor:pointer; background:linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.22) 100%), var(--red); box-shadow:0 1px 2px rgba(0,0,0,.14); } .pos-tile:hover{ box-shadow:0 3px 10px rgba(var(--red-rgb),.35); filter:brightness(1.08); } .pos-tile:active{ filter:brightness(.94); } .pos-tile.is-added{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--red-dark); filter:brightness(1.16); } .pos-tile-name{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.25; } .pos-tile-code{ font-size:10.5px; color:rgba(255,255,255,.72); letter-spacing:.03em; } .pos-tile-price{ margin-top:auto; font-size:15px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; } .pos-tile-stock{ font-size:11px; color:rgba(255,255,255,.8); } .pos-tile.is-out{ background:linear-gradient(150deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.2) 100%), var(--grey-700); opacity:.8; } .pos-tile.is-out .pos-tile-stock{ color:#FFD2D2; font-weight:700; } /* ---- taking the payment ---- */ .pos-pay-sum{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:8px; margin-bottom:14px; padding:10px 12px; border-radius:var(--radius); background:var(--grey-700); color:#fff; } .pos-pay-sum span{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#C9CACE; } .pos-pay-sum b{ font-size:15px; } .pos-pay-net b{ font-size:22px; } .pos-mops{ display:flex; gap:6px; flex-wrap:wrap; } .pos-mops .mini-chip{ padding:6px 14px; font-size:13px; } .pos-mops input{ position:absolute; opacity:0; pointer-events:none; } .pos-pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:520px){ .pos-pay-grid{ grid-template-columns:1fr; } } .pos-big{ height:46px; font-size:20px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; } .pos-quick{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 8px; } .pos-big.is-change{ color:#1E7A45; border-color:#9CC9A6; background:#F1FAF4; } .pos-big.is-due{ color:#B42323; border-color:#E4A8A8; background:#FDF4F4; } .pos-change-note{ min-height:18px; margin:0 0 10px; font-size:12.5px; font-weight:600; color:var(--ink-muted); } .pos-pay-sum small{ display:block; margin-top:1px; font-size:11.5px; color:#C9CACE; } .pos-done-change{ margin:4px 0 2px; padding:7px 12px; border-radius:var(--radius); background:#E2F4EA; color:#1E7A45; font-size:14px; font-weight:600; } .pos-done-change b{ font-size:18px; } .pos-done-due{ margin:4px 0 2px; padding:7px 12px; border-radius:var(--radius); background:#FDE2E2; color:#B42323; font-size:13.5px; font-weight:600; } /* ---- saved ---- */ .pos-done{ text-align:center; padding:6px 0 2px; } .pos-done-tick{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:8px; border-radius:50%; background:#E2F4EA; color:#1E7A45; } .pos-done-tick svg{ width:26px; height:26px; stroke-width:3; } .pos-done-no{ font-size:14px; font-weight:700; color:var(--ink); } .pos-done-amt{ font-size:30px; font-weight:700; color:var(--red); line-height:1.2; } .pos-done-meta{ font-size:13px; color:var(--ink-muted); margin-bottom:8px; } .pos-done p{ margin:0 0 6px; } /* ---- catalogue ---- */ .pos-cat-block{ border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; margin-bottom:12px; } .pos-cat-block.is-off{ background:var(--bg); } .pos-cat-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .pos-cat-head h4{ margin:0; font-size:15px; color:var(--ink); } .pos-cat-head .pill{ margin-left:6px; vertical-align:middle; } .pos-cat-head > div{ display:flex; gap:6px; flex-wrap:wrap; } .pos-form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:0 12px; } .pos-form .crm-lbl small{ font-weight:400; } .pos-form h4.dash-h{ margin-top:16px; } /* ---- bills ---- */ .banner-table tr.is-void td{ color:var(--ink-faint); text-decoration:line-through; } .banner-table tr.is-void td:last-child{ text-decoration:none; } .pos-top{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px; } .pos-top-item{ display:flex; flex-direction:column; gap:2px; padding:9px 11px; border:1px solid var(--border); border-left:3px solid var(--red); border-radius:var(--radius); } .pos-top-item span{ font-size:12.5px; color:var(--ink-muted); } /* ---- held bills, customer picker ---- */ .pos-held{ display:flex; flex-direction:column; gap:8px; } .pos-held-row{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; } .pos-held-row > div:first-child{ flex:1; min-width:0; } .pos-held-amt{ font-size:16px; font-weight:700; color:var(--red); font-variant-numeric:tabular-nums; } .pos-cust-list{ display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow:auto; margin-top:10px; } .pos-cust-row{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; font:inherit; text-align:left; cursor:pointer; } .pos-cust-row:hover{ border-color:var(--red); background:var(--red-tint); } .pos-cust-row span{ font-size:13px; color:var(--ink-muted); } .pos-cust-row small{ font-size:11.5px; color:var(--ink-faint); } /* ---- toast ---- */ .pos-toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:600; padding:10px 18px; border-radius:999px; font-size:13.5px; font-weight:600; color:#fff; background:var(--grey-800); box-shadow:0 10px 26px rgba(0,0,0,.24); } .pos-toast.err{ background:#B42323; } .pos-toast[hidden]{ display:none; } /* ---- where a lead came from (Leads & follow-ups) ---- */ .src-tag.src-pos{ border-left-color:#1E7A45; } .src-tag.src-referral{ border-left-color:#5B3FC4; } .crm-ref{ margin:0 0 10px; padding:9px 12px; border-radius:var(--radius); border:1px solid var(--border); border-left:3px solid #5B3FC4; background:#fff; font-size:13.5px; } .crm-ref b{ color:var(--ink); } .crm-ref .st-time{ display:block; } .crm-strong{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:#E2F4EA; color:#1E7A45; font-size:11px; font-weight:700; } .crm-pos-stat{ display:inline-block; margin-left:6px; font-size:11.5px; font-weight:700; color:#1E7A45; } /* ========================================================================== Member top menu (helpers/mbp_nav_helper.php) — the same key links, in the same order, on every page of the member area. Compact, so the whole set stays on one row on a laptop and wraps tidily below that. ========================================================================== */ .top-links.top-nav{ gap:4px; } .top-nav a{ gap:5px; padding:5px 9px; font-size:12.5px; border-color:rgba(255,255,255,0.28); } .top-nav a svg{ width:14px; height:14px; } .top-nav a.is-here{ background:var(--red); border-color:var(--red); color:#fff; } .top-nav a.is-here:hover{ background:var(--red-dark); border-color:var(--red-dark); } @media (max-width:1180px){ .top-nav a{ padding:5px 8px; font-size:12px; } } @media (max-width:700px){ /* The label alone, wrapped onto its own rows: still every link, no horizontal scroll. */ .top-nav{ width:100%; justify-content:flex-start; } .top-nav a{ font-size:12px; padding:4px 8px; } } /* The counter measures the header (which may wrap) instead of guessing at its height. */ .pos-wrap{ height:calc(100vh - var(--mbp-top-h, 57px) - 92px); } .pos-page.in-popup .pos-wrap{ height:calc(100vh - 90px); } .loy-panel{ max-height:calc(100vh - var(--mbp-top-h, 57px) - 92px); } @media (max-width:980px){ .pos-wrap, .pos-page.in-popup .pos-wrap{ height:auto; } .loy-panel{ max-height:none; } } /* Ad publish: bookings paused by mybiz.promo — said once, above the screens. */ .ads-closed{ display:flex; align-items:flex-start; gap:10px; margin:0 0 12px; padding:11px 14px; border:1px solid var(--border); border-left:4px solid #8A5A0B; border-radius:var(--radius); background:#FFF8E8; } .ads-closed[hidden]{ display:none; } .ads-closed svg{ width:20px; height:20px; margin-top:1px; color:#8A5A0B; } .ads-closed b{ display:block; color:#6B4608; font-size:14px; } .ads-closed span{ font-size:13px; color:var(--ink-muted); } /* ---- Podcasts & meetings (member → meet) ---- */ .meet-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; } .meet-tab{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid var(--border-strong); border-radius:999px; background:#fff; color:var(--grey-700); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; } .meet-tab b{ color:var(--ink-faint); } .meet-tab.is-on{ background:var(--grey-700); border-color:var(--grey-700); color:#fff; } .meet-tab.is-on b{ color:#fff; } .meet-flash{ margin:0 0 12px; padding:9px 12px; border-radius:var(--radius); border-left:3px solid var(--green); background:var(--green-tint); font-size:14px; color:var(--ink); } .meet-flash.is-bad{ border-left-color:var(--danger); background:var(--red-tint); } .meet-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; } @media (max-width:420px){ .meet-grid{ grid-template-columns:1fr; } } .meet-card{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); } .meet-card.is-ask{ border-left:3px solid var(--red); } .meet-card.is-open{ box-shadow:0 0 0 3px var(--red-tint); border-color:var(--red); } .meet-card h3{ margin:0; font-size:17px; line-height:1.3; color:var(--ink); } .meet-card-top{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .meet-tag{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:4px; background:var(--bg); color:var(--grey-700); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .meet-tag svg, .meet-meta svg, .meet-card .mini-btn svg, .meet-join svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; } .meet-tag.is-podcast{ background:var(--red-tint); color:var(--red-text); } .meet-tag.is-role{ background:var(--grey-700); color:#fff; } .meet-circle{ font-size:12px; color:var(--ink-faint); margin-right:auto; } .meet-meta{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--ink-muted); } .meet-meta span{ display:inline-flex; align-items:center; gap:5px; } .meet-agenda{ margin:0; font-size:13.5px; color:var(--ink-muted); white-space:pre-line; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .meet-join{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:8px 10px; border-radius:var(--radius); background:var(--green-tint); font-size:13px; } .meet-join.is-live{ background:var(--red-tint); } .meet-join span{ display:inline-flex; align-items:center; gap:5px; } .meet-join em{ font-style:normal; color:var(--ink-faint); font-size:12px; } .meet-join.is-live em{ color:var(--red-text); font-weight:700; } .meet-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px; } .meet-due{ font-size:12px; color:var(--red-text); font-weight:600; } .meet-rec audio{ width:100%; height:36px; } .meet-note-in{ width:100%; box-sizing:border-box; } .meet-modal-foot{ display:flex; justify-content:flex-end; margin-top:10px; } .meet-join.is-off{ background:var(--bg); color:var(--ink-muted); } .meet-card.is-cancelled h3{ text-decoration:line-through; color:var(--ink-faint); } .meet-card a.mini-btn{ text-decoration:none; } /* ------------------------------------------------------------------ */ /* Request a service (/requirements) — the member's requirements form */ /* ------------------------------------------------------------------ */ .req-wrap{ display:grid; grid-template-columns:210px minmax(0, 1fr); gap:14px; align-items:start; } .req-aside{ position:sticky; top:calc(var(--mbp-top-h, 60px) + 12px); } .req-steps{ list-style:none; margin:0; padding:10px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); } .req-steps:empty{ display:none; } .req-steps li{ display:flex; align-items:center; gap:9px; padding:6px 4px; font-size:14px; color:var(--ink-muted); cursor:pointer; border-radius:4px; } .req-steps li:hover{ background:var(--bg); } .req-steps li i{ flex:0 0 24px; height:24px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--border-strong); font-style:normal; font-size:12px; font-weight:700; } .req-steps li.done i{ background:var(--green-tint); border-color:var(--green); color:var(--green); } .req-steps li.on{ color:var(--ink); font-weight:700; } .req-steps li.on i{ background:var(--red); border-color:var(--red); color:#fff; } .req-steps li.locked{ cursor:default; opacity:.55; } .req-steps li.locked:hover{ background:none; } .req-mob{ display:none; } .req-panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px 16px; min-width:0; } .req-title{ margin:0 0 4px; font-size:20px; color:var(--ink); outline:none; } .req-lead{ margin:0 0 18px; color:var(--ink-muted); font-size:14.5px; max-width:64ch; } .req-field{ margin:0 0 16px; } .req-lbl{ display:block; margin:0 0 6px; font-weight:700; font-size:14.5px; color:var(--ink); } .req-star{ color:var(--red-text); margin-left:2px; } .req-hint{ margin:-3px 0 7px; font-size:13px; color:var(--ink-faint); } .req-err{ margin-top:5px; font-size:13px; color:var(--danger); font-weight:600; } .req-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } .req-chips{ display:flex; flex-wrap:wrap; gap:6px; } .req-chip{ font:inherit; font-size:13.5px; padding:6px 13px; border-radius:999px; border:1px solid var(--border-strong); background:#fff; color:var(--ink); cursor:pointer; } .req-chip:hover{ border-color:var(--red); } .req-chip[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:#fff; } .req-chip.is-custom{ border-style:dashed; } .req-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; } .req-tile{ font:inherit; text-align:left; padding:11px 12px; min-height:58px; border-radius:var(--radius); border:1px solid var(--border-strong); background:#fff; color:var(--ink); cursor:pointer; } .req-tile:hover{ border-color:var(--red); } .req-tile b{ display:block; font-size:14.5px; } .req-tile span{ display:block; margin-top:1px; font-size:12.5px; color:var(--ink-faint); } .req-tile[aria-pressed="true"]{ border-color:var(--red); background:var(--red-tint); box-shadow:inset 0 0 0 1px var(--red); } .req-tile.is-custom{ border-style:dashed; } .req-svc{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); margin-bottom:16px; } .req-svc .req-tile{ padding:14px; } .req-svc .req-tile svg{ display:block; width:26px; height:26px; margin-bottom:6px; fill:none; stroke:var(--red); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .req-sub{ padding:12px 14px; border-left:3px solid var(--red); background:var(--bg); border-radius:0 var(--radius) var(--radius) 0; } .req-group{ border:0; border-top:1px solid var(--border); margin:4px 0 12px; padding:12px 0 0; min-width:0; } .req-group legend{ padding:0 8px 0 0; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--grey-700); } .req-nav{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:22px; padding-top:14px; border-top:1px solid var(--border); } .req-saved{ font-size:12.5px; color:var(--ink-faint); } .req-btn{ padding:8px 16px; font-size:14px; } .req-btn svg, .req-page .meet-card .mini-btn svg, .req-reply svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .req-btn.is-primary{ background:var(--red); color:#fff; } .req-btn.is-primary:hover{ background:var(--red-dark); border-color:var(--red-dark); color:#fff; } .req-btn:disabled{ opacity:.5; cursor:default; } .req-sum{ border:1px solid var(--border); border-radius:var(--radius); margin:0 0 10px; overflow:hidden; } .req-sum h4{ display:flex; justify-content:space-between; align-items:center; margin:0; padding:7px 12px; background:var(--grey-700); color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.05em; } .req-sum h4 .mini-btn{ padding:2px 8px; text-transform:none; letter-spacing:0; } .req-sum h4 .mini-btn svg{ fill:none; stroke:currentColor; stroke-width:2; } .req-sum dl{ display:grid; grid-template-columns:minmax(140px, 36%) 1fr; margin:0; font-size:14px; } .req-sum dt, .req-sum dd{ padding:6px 12px; border-top:1px solid var(--border); } .req-sum dt{ color:var(--ink-muted); } .req-sum dd{ margin:0; word-break:break-word; } .req-sum .req-hint{ margin:0; padding:8px 12px; } .req-addons{ margin:0 0 12px; padding:12px 16px; border-left:3px solid var(--red); background:var(--red-tint); border-radius:0 var(--radius) var(--radius) 0; } .req-addons h4{ margin:0 0 4px; font-size:14.5px; color:var(--red-text); } .req-addons ul{ margin:0; padding-left:20px; font-size:14px; } .req-done{ text-align:center; padding:26px 8px 12px; } .req-done-ico{ width:54px; height:54px; margin:0 auto 10px; display:grid; place-items:center; border-radius:50%; background:var(--green-tint); } .req-done-ico svg{ width:26px; height:26px; fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .req-done h3{ margin:0 0 6px; font-size:22px; } .req-done p{ margin:0 auto 18px; max-width:52ch; color:var(--ink-muted); } .req-acts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .req-reply{ padding:9px 11px; border-radius:var(--radius); background:var(--green-tint); font-size:13.5px; } .req-reply b{ display:inline-flex; align-items:center; gap:5px; } .req-reply p{ margin:4px 0 0; white-space:pre-line; color:var(--ink); } .req-page .empty-state .mini-btn{ margin-left:6px; } @media (max-width: 820px){ .req-wrap{ grid-template-columns:1fr; gap:10px; } .req-aside{ position:static; } .req-steps{ display:none; } .req-mob{ display:block; } .req-mob small{ color:var(--ink-muted); font-size:13px; } .req-bar{ height:5px; margin-top:4px; background:var(--border); border-radius:3px; overflow:hidden; } .req-bar i{ display:block; height:100%; background:var(--red); transition:width .3s; } .req-panel{ padding:16px 14px 12px; } .req-grid2{ grid-template-columns:1fr; } .req-sum dl{ grid-template-columns:1fr; } .req-sum dd{ border-top:0; padding-top:0; } .req-saved{ display:none; } } @media (prefers-reduced-motion: reduce){ .req-bar i{ transition:none; } } .req-done-pinto{ display:block; width:120px; height:auto; margin:0 auto 8px; } .req-empty-pinto{ display:block; width:84px; height:auto; margin:0 auto 8px; } /* ---- Points to coupons: circles drawn as circles (who can sell), circle filter, how-it-works infographic ---- */ .cpn-ctag{ display:inline-flex; align-items:center; gap:5px; margin:2px 4px 2px 0; padding:2px 9px 2px 7px; border-radius:999px; background:color-mix(in srgb, var(--cc) 12%, #fff); color:var(--cc); font-size:12px; font-weight:700; white-space:nowrap; } .cpn-ctag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cc); } .cpn-scope{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; } .cpn-scope.is-own{ display:inline-flex; padding:2px 9px; border-radius:999px; background:var(--bg); font-size:12.5px; font-weight:600; color:var(--grey-700); } .cpn-faces{ display:inline-flex; vertical-align:middle; padding-left:6px; } .cpn-face{ display:inline-grid; place-items:center; width:24px; height:24px; margin-left:-6px; border-radius:50%; border:2px solid #fff; background:var(--cc, var(--grey-700)); color:#fff; font-size:9.5px; font-style:normal; font-weight:700; letter-spacing:.02em; } .cpn-face.is-more{ background:var(--bg); color:var(--ink-muted); } .cpn-who{ padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); } .cpn-who-label{ margin:0 0 8px; font-size:13px; font-weight:700; color:var(--ink); } .cpn-modes{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0 0 10px; } .cpn-mode{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:9px 11px; border:1px solid var(--border-strong); border-radius:var(--radius); background:#fff; font:inherit; text-align:left; cursor:pointer; color:var(--ink); } .cpn-mode:hover{ border-color:var(--red); } .cpn-mode.is-on{ border-color:var(--red); background:var(--red-tint); box-shadow:inset 0 0 0 1px var(--red); } .cpn-mode-ic{ font-size:18px; line-height:1; margin-bottom:3px; color:var(--red); } .cpn-mode b{ font-size:13.5px; } .cpn-mode em{ font-style:normal; font-size:12px; color:var(--ink-faint); font-weight:400; } .cpn-circles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; } .cpn-circle{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 10px 10px; border:2px solid var(--border); border-radius:14px; background:#fff; font:inherit; cursor:pointer; color:var(--ink); text-align:center; } .cpn-circle:hover{ border-color:var(--cc); } .cpn-circle.is-on{ border-color:var(--cc); background:color-mix(in srgb, var(--cc) 7%, #fff); } .cpn-ring{ display:grid; place-items:center; width:82px; height:82px; margin-bottom:4px; border-radius:50%; border:3px dashed color-mix(in srgb, var(--cc) 45%, #fff); } .cpn-circle.is-on .cpn-ring{ border-style:solid; border-color:var(--cc); } .cpn-ring .cpn-faces{ flex-wrap:wrap; justify-content:center; max-width:66px; padding-left:6px; row-gap:2px; } .cpn-circle b{ font-size:14px; } .cpn-circle em{ font-style:normal; font-size:12px; color:var(--ink-faint); } .cpn-tick{ position:absolute; top:8px; right:8px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:2px solid var(--border-strong); color:transparent; font-size:12px; font-weight:700; } .cpn-circle.is-on .cpn-tick{ background:var(--cc); border-color:var(--cc); color:#fff; } .cpn-who-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0; } .cpn-who-tools .field-input{ max-width:280px; height:34px; padding:4px 10px; } .cpn-who-note{ margin:0; padding:10px 12px; border-radius:var(--radius); background:#fff; font-size:13.5px; color:var(--ink-muted); } .cpn-stores{ display:flex; flex-direction:column; gap:10px; max-height:360px; overflow:auto; } .cpn-store-group{ padding:8px 10px; border-left:3px solid var(--cc); border-radius:0 var(--radius) var(--radius) 0; background:#fff; } .cpn-store-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; } .cpn-store-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:6px; } .cpn-store{ display:flex; align-items:center; gap:8px; padding:5px 8px 5px 12px; border:1px solid var(--border); border-radius:999px; background:#fff; font:inherit; text-align:left; cursor:pointer; color:var(--ink); min-width:0; } .cpn-store[hidden]{ display:none; } .cpn-store .cpn-face{ margin-left:-6px; flex:0 0 auto; } .cpn-store span{ display:flex; flex-direction:column; min-width:0; } .cpn-store b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cpn-store em{ font-style:normal; font-size:11.5px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cpn-store:hover{ border-color:var(--cc); } .cpn-store.is-on{ border-color:var(--cc); background:color-mix(in srgb, var(--cc) 10%, #fff); box-shadow:inset 0 0 0 1px var(--cc); } .cpn-reach{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:10px; padding:9px 12px; border-radius:var(--radius); background:#fff; border:1px dashed var(--border-strong); } .cpn-reach-node{ display:inline-flex; align-items:center; gap:6px; font-size:13px; } .cpn-reach-node b{ color:var(--ink); } .cpn-reach-node em{ font-style:normal; color:var(--ink-faint); font-size:12px; } .cpn-reach-node.is-me b{ color:var(--red-text); } .cpn-reach-arrow{ color:var(--red); font-weight:700; } .cpn-circlebar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px; } .cpn-cchip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--border-strong); border-radius:999px; background:#fff; font:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; } .cpn-cchip i{ width:9px; height:9px; border-radius:50%; background:var(--cc); } .cpn-cchip b{ color:var(--ink-faint); font-size:12px; } .cpn-cchip.is-on{ background:var(--cc, var(--grey-700)); border-color:var(--cc, var(--grey-700)); color:#fff; } .cpn-cchip.is-on i{ background:#fff; } .cpn-cchip.is-on b{ color:#fff; } .cpn-card .cpn-scope{ margin:2px 0 0; } .cpn-ig{ margin:0 0 18px; padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; } .cpn-ig-top{ display:grid; grid-template-columns:minmax(220px, 1fr) minmax(0, 2fr); gap:18px; align-items:center; } .cpn-ig-lead h3{ margin:0 0 6px; font-size:19px; line-height:1.25; } .cpn-ig-lead p{ margin:0; font-size:14px; color:var(--ink-muted); } .cpn-ig-map{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:6px; padding:14px; border-radius:12px; background:var(--bg); } .cpn-ig-actor{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:10px 6px; border-radius:12px; background:#fff; border:2px solid var(--border); } .cpn-ig-actor > span{ font-size:28px; line-height:1; } .cpn-ig-actor b{ font-size:14px; } .cpn-ig-actor em{ font-style:normal; font-size:12px; color:var(--ink-faint); line-height:1.3; } .cpn-ig-actor.is-a{ border-color:var(--red); } .cpn-ig-actor.is-a b{ color:var(--red-text); } .cpn-ig-actor.is-b{ border-color:#1F5FD6; } .cpn-ig-actor.is-b b{ color:#1F5FD6; } .cpn-ig-actor.is-c{ border-color:#18874B; } .cpn-ig-actor.is-c b{ color:#18874B; } .cpn-ig-link{ display:flex; flex-direction:column; gap:6px; } .cpn-ig-link i{ position:relative; display:block; padding:0 14px 6px 0; font-style:normal; font-size:11.5px; font-weight:600; color:var(--ink-muted); text-align:center; border-bottom:2px solid var(--red); } .cpn-ig-link i::after{ content:""; position:absolute; right:-2px; bottom:-6px; border:5px solid transparent; border-left:8px solid var(--red); } .cpn-ig-money{ grid-column:1 / -1; margin-top:4px; padding:7px 10px; border-radius:8px; background:#FFF6E0; font-size:12.5px; color:#7A5300; text-align:center; } .cpn-ig-steps{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; margin-top:16px; } .cpn-ig-step{ position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 12px 10px; border:1px solid var(--border); border-radius:12px; background:#fff; font:inherit; text-align:left; color:var(--ink); cursor:pointer; } .cpn-ig-step:hover{ border-color:var(--red); box-shadow:0 6px 18px rgba(0,0,0,.07); transform:translateY(-2px); transition:.15s; } .cpn-ig-step:not(:last-child)::after{ content:"›"; position:absolute; right:-10px; top:40%; z-index:1; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--red); color:#fff; font-size:14px; font-weight:700; line-height:1; } .cpn-ig-n{ position:absolute; top:-10px; left:12px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--grey-700); color:#fff; font-size:12px; font-weight:700; } .cpn-ig-ic{ font-size:26px; line-height:1; height:42px; display:flex; align-items:center; } .cpn-ig-who{ align-self:flex-start; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .cpn-ig-who.is-a{ background:var(--red-tint); color:var(--red-text); } .cpn-ig-who.is-b{ background:#EAF1FD; color:#1F5FD6; } .cpn-ig-who.is-ab{ background:#FFF6E0; color:#7A5300; } .cpn-ig-step b{ font-size:14.5px; } .cpn-ig-step p{ margin:0; font-size:12.5px; color:var(--ink-muted); line-height:1.4; flex:1; } .cpn-ig-step em{ font-style:normal; font-size:12px; font-weight:700; color:var(--red-text); } .cpn-ig-circles{ display:flex; flex-wrap:wrap; } .cpn-ig-circles .cpn-ctag{ font-size:11px; padding:1px 7px 1px 5px; } .cpn-ig-wins{ display:flex; align-items:center; gap:14px; margin-top:14px; padding:10px 14px; border-radius:12px; background:var(--green-tint); } .cpn-ig-wins div{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; font-size:13.5px; } .cpn-ig-wins b{ font-size:15px; color:#1E7A45; } .cpn-ig-wins i{ font-style:normal; font-weight:700; } .cpn-ig-h{ margin:6px 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--grey-700); } @media (max-width: 1100px){ .cpn-ig-steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .cpn-ig-step:nth-child(3n)::after{ display:none; } .cpn-ig-top{ grid-template-columns:1fr; } } @media (max-width: 640px){ .cpn-modes{ grid-template-columns:1fr; } .cpn-ig-steps{ grid-template-columns:1fr 1fr; } .cpn-ig-step::after{ display:none; } .cpn-ig-map{ grid-template-columns:1fr; } .cpn-ig-link i{ border-bottom:0; padding:0; } .cpn-ig-link i::after{ display:none; } .cpn-ig-link i::before{ content:"↓ "; color:var(--red); } .cpn-ig-wins{ flex-direction:column; text-align:center; } } .cpn-svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.15em; flex:0 0 auto; } .cpn-scope.is-own{ gap:5px; } .cpn-mode-ic{ font-size:22px; } .cpn-reach-node .cpn-svg{ font-size:17px; color:var(--red); } .cpn-ig-actor > span{ color:currentColor; font-size:30px; } .cpn-ig-actor.is-a > span{ color:var(--red); } .cpn-ig-actor.is-b > span{ color:#1F5FD6; } .cpn-ig-ic{ font-size:30px; color:var(--grey-700); } .cpn-page .crm-add-grid label > .muted{ font-weight:400; font-size:12px; } .cpn-steps{ grid-template-columns:minmax(0, 1fr); } .cpn-step{ min-width:0; } /* ---- Circle rewards: what a point is worth, ad prices, live quote, admin editing ---- */ .rw-admin-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 12px; padding:10px 14px; border-radius:var(--radius); border:1px dashed var(--border-strong); background:#fff; font-size:13.5px; } .rw-admin-bar > span:first-child{ flex:1; min-width:220px; color:var(--ink-muted); } .rw-admin-bar.is-on{ border-style:solid; border-color:var(--red); background:var(--red-tint); } .rw-value{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:15px; } .rw-pv-fig{ font-size:26px; color:var(--red-text); } .rw-pv{ display:inline-flex; align-items:center; gap:4px; font-size:22px; font-weight:700; color:var(--red-text); } .rw-pv .rw-num{ width:110px; font-size:18px; font-weight:700; } .rw-src{ display:inline-block; margin-left:4px; padding:0 7px; border-radius:999px; background:var(--bg); color:var(--ink-faint); font-size:11px; font-weight:600; vertical-align:middle; } .rw-num{ width:92px; height:32px; padding:3px 8px; text-align:right; } .rw-price{ display:inline-flex; gap:4px; } .rw-price select.field-input{ width:auto; height:32px; padding:2px 6px; font-size:12.5px; } .rw-inr{ white-space:nowrap; font-weight:600; color:var(--grey-700); } .rw-card td.c, .rw-card th.c{ text-align:center; } .rw-card tr.is-off td{ opacity:.55; } .rw-card tr.is-off td:last-child{ opacity:1; } .rw-switch{ position:relative; display:inline-block; width:36px; height:20px; cursor:pointer; } .rw-switch input{ position:absolute; opacity:0; width:0; height:0; } .rw-switch span{ position:absolute; inset:0; border-radius:20px; background:var(--border-strong); transition:.15s; } .rw-switch span::before{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.15s; } .rw-switch input:checked + span{ background:var(--green); } .rw-switch input:checked + span::before{ transform:translateX(16px); } .rw-switch input:focus-visible + span{ box-shadow:0 0 0 3px var(--red-tint); } .rw-quote{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:4px 0 10px; padding:10px 12px; border-radius:var(--radius); background:var(--green-tint); font-size:14px; } .rw-quote b{ font-size:16px; } .rw-quote .rw-eq{ color:var(--ink-faint); font-weight:700; } .rw-q-after{ margin-left:auto; color:var(--ink-muted); } .rw-quote.is-short{ background:var(--red-tint); } .rw-quote.is-short .rw-q-after b{ color:var(--danger); font-size:14px; } @media (max-width: 640px){ .rw-q-after{ margin-left:0; width:100%; } .rw-num{ width:78px; } } /* ---- Coupon form: points vs value, live under the Value field ---- */ .cpn-valcalc{ display:flex; flex-direction:column; gap:8px; padding:10px 12px; border:1px solid var(--border); border-left:3px solid var(--red); border-radius:0 var(--radius) var(--radius) 0; background:var(--bg); font-weight:400; } .cpn-vc-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:13px; } .cpn-vc-big{ font-size:17px; color:var(--ink); } .cpn-vc-big b{ color:var(--red-text); } .cpn-vc-facts{ display:flex; flex-wrap:wrap; gap:4px 18px; font-size:13px; color:var(--ink-muted); } .cpn-vc-facts b{ color:var(--ink); } .cpn-vc-facts em{ font-style:normal; color:var(--ink-faint); } .cpn-vc-facts .cpn-check{ margin:0; } .cpn-vc-ladder{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:6px; } .cpn-vc-step{ display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:6px 9px; border:1px solid var(--border-strong); border-radius:var(--radius); background:#fff; font:inherit; text-align:left; cursor:pointer; color:var(--ink); } .cpn-vc-step:hover{ border-color:var(--red); } .cpn-vc-step b{ font-size:14px; } .cpn-vc-step span{ font-size:12.5px; font-weight:700; color:var(--red-text); } .cpn-vc-step em{ font-style:normal; font-size:11.5px; color:var(--ink-faint); } .cpn-vc-step.is-on{ border-color:var(--red); background:var(--red-tint); box-shadow:inset 0 0 0 1px var(--red); } /* Who is signed in — left of the member bar on every page */ .top-me{ display:inline-flex; align-items:center; gap:8px; margin-right:6px; padding:3px 12px 3px 4px; border-radius:999px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22); color:#fff; max-width:300px; min-width:0; line-height:1.15; } .top-me i{ flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--red); color:#fff; font-style:normal; font-size:12px; font-weight:700; letter-spacing:.02em; } .top-me span{ display:flex; flex-direction:column; min-width:0; } .top-me b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .top-me small{ font-size:11px; color:#C9CACE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width: 1100px){ .top-me{ max-width:220px; } } @media (max-width: 760px){ .top-me{ padding:2px; margin-right:2px; } .top-me span{ display:none; } } /* Points price panel under a coupon row (Reward menu, Partner coupons) */ .cpn-pp > td{ padding:0 12px 12px !important; background:#fff; } .cpn-pp > td > *{ margin-top:0; } .cpn-pp-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; padding:9px 12px 6px; border-left:3px solid var(--red); background:var(--bg); border-radius:0 var(--radius) 0 0; font-size:13px; color:var(--ink-muted); } .cpn-pp-head b{ color:var(--ink); } .cpn-pp .cpn-vc-ladder{ padding:0 12px 6px; border-left:3px solid var(--red); background:var(--bg); grid-template-columns:repeat(5, minmax(0, 150px)); } .cpn-pp-note{ padding:0 12px 9px; border-left:3px solid var(--red); background:var(--bg); border-radius:0 0 var(--radius) 0; font-size:12.5px; } tr[data-offer] > td{ border-bottom:0; } @media (max-width: 760px){ .cpn-pp .cpn-vc-ladder{ grid-template-columns:repeat(3, minmax(0, 1fr)); } } .cpn-mine{ display:flex; align-items:center; gap:10px; width:100%; margin:0 0 10px; padding:9px 12px; border:1px solid var(--border-strong); border-radius:var(--radius); background:#fff; font:inherit; text-align:left; cursor:pointer; color:var(--ink); } .cpn-mine:hover{ border-color:var(--red); } .cpn-mine.is-on{ border-color:var(--green); background:var(--green-tint); } .cpn-mine-box{ flex:0 0 22px; width:22px; height:22px; display:grid; place-items:center; border-radius:5px; border:2px solid var(--border-strong); background:#fff; color:#fff; font-weight:700; font-size:13px; } .cpn-mine.is-on .cpn-mine-box{ background:var(--green); border-color:var(--green); } .cpn-mine span:last-child{ display:flex; flex-direction:column; } .cpn-mine b{ font-size:13.5px; } .cpn-mine em{ font-style:normal; font-size:12px; color:var(--ink-muted); } /* Who-can-sell review */ .cpn-review{ margin-top:10px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius); background:#fff; } .cpn-rv-h{ font-size:14px; margin-bottom:8px; } .cpn-rv-h > b:first-child{ text-transform:uppercase; letter-spacing:.05em; font-size:12px; color:var(--red-text); } .cpn-rv-body{ display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; } .cpn-rv-group{ padding:6px 8px; border-left:3px solid var(--cc, var(--grey-700)); background:var(--bg); border-radius:0 var(--radius) var(--radius) 0; } .cpn-rv-group.is-you{ --cc:var(--red); } .cpn-rv-gh{ display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12.5px; } .cpn-rv-list{ display:flex; flex-wrap:wrap; gap:5px; } .cpn-rv-store{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 8px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:12.5px; } .cpn-rv-store .cpn-face{ margin-left:0; width:20px; height:20px; font-size:8.5px; border:0; } .cpn-rv-store em{ font-style:normal; color:var(--ink-faint); font-size:11.5px; } .cpn-rv-foot{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; color:var(--ink-muted); } .cpn-rv-foot .cpn-svg{ color:var(--red); font-size:15px; } /* ---- Coupon terms (picked from the member's list), the review popup, partner agreements, lock ---- */ .cpn-terms{ padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); font-weight:400; } .cpn-terms-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:8px; } .cpn-terms-h b{ font-size:13px; color:var(--ink); } .cpn-terms-h .muted{ font-size:12px; } .cpn-terms-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px; } .cpn-term{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); background:#fff; font:inherit; font-size:13px; text-align:left; cursor:pointer; color:var(--ink); } .cpn-term:hover{ border-color:var(--red); } .cpn-term.is-on{ border-color:var(--green); background:var(--green-tint); } .cpn-term-box{ flex:0 0 18px; width:18px; height:18px; display:grid; place-items:center; border-radius:4px; border:2px solid var(--border-strong); background:#fff; color:#fff; font-size:11px; font-weight:700; } .cpn-term.is-on .cpn-term-box{ background:var(--green); border-color:var(--green); } .cpn-term-add{ display:flex; gap:6px; margin-top:8px; max-width:560px; } .cpn-term-add .field-input{ height:34px; padding:4px 10px; } .cpn-terms-note{ display:flex; gap:6px; align-items:flex-start; margin:8px 0 0; font-size:12.5px; color:var(--ink-muted); } .cpn-terms-note .cpn-svg{ color:var(--red); margin-top:2px; } .loy-modal-box.is-wide{ max-width:1100px; } .cpn-rvm{ display:flex; flex-direction:column; gap:12px; } .cpn-rvm-card{ padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; } .cpn-rvm-card h4{ display:flex; align-items:center; gap:6px; margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--grey-700); } .cpn-rvm-card h4 .cpn-svg{ color:var(--red); font-size:16px; } .cpn-rvm-card .cpn-review{ margin:0; border:0; padding:0; } .cpn-rvm-title{ font-size:20px; font-weight:700; margin-bottom:8px; } .cpn-rvm-facts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px 16px; } .cpn-rvm-facts div{ display:flex; flex-direction:column; } .cpn-rvm-facts span{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); } .cpn-rvm-facts b{ font-size:14.5px; } .cpn-rvm-terms{ margin:0; padding-left:22px; font-size:14px; line-height:1.6; } .cpn-rvm-agree{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; padding:9px 12px; border-left:3px solid var(--red); background:var(--red-tint); border-radius:0 var(--radius) var(--radius) 0; font-size:13.5px; } .cpn-rvm-agree .cpn-svg{ flex:0 0 auto; margin-top:2px; color:var(--red); font-size:16px; } .cpn-rvm-foot{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; padding-top:4px; } .cpn-rvm-foot .crm-msg{ margin-right:auto; } .cpn-agm p{ margin:0 0 8px; } .cpn-agm-parties{ font-size:15px; } .cpn-agsum{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:6px; } .cpn-agok{ margin-top:5px; font-size:12px; color:var(--green); font-weight:600; } .cpn-agneed{ margin-bottom:6px; padding:6px 9px; border-left:3px solid #D9920B; background:#FFF6E0; border-radius:0 var(--radius) var(--radius) 0; font-size:12.5px; max-width:320px; } .cpn-tl{ margin:4px 0 0; padding-left:16px; font-size:12px; color:var(--ink-muted); } .cpn-termset{ display:flex; flex-direction:column; gap:6px; max-width:760px; } .cpn-termset-row{ display:flex; gap:6px; } .cpn-termset-row .field-input{ height:34px; padding:4px 10px; } .cpn-lock{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; background:var(--grey-700); color:#fff; font-size:12px; font-weight:700; } /* Store-wise terms */ .cpn-tdiff li.is-add{ color:#1E7A45; font-weight:600; } .cpn-tdiff li.is-add em{ font-style:normal; font-weight:400; font-size:11.5px; padding:0 6px; border-radius:999px; background:var(--green-tint); margin-left:4px; } .cpn-tdiff li.is-drop{ color:var(--ink-faint); text-decoration:line-through; } .cpn-tdiff li.is-drop em{ font-style:normal; font-size:11.5px; text-decoration:none; display:inline-block; margin-left:4px; } .cpn-tl-h{ margin-top:6px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--grey-700); } .cpn-tl-n{ list-style:decimal; padding-left:20px; } .cpn-agm-h{ margin:12px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--grey-700); } .cpn-agtable td{ vertical-align:top; } .cpn-agtable .cpn-rvm-terms{ font-size:13px; line-height:1.5; } .cpn-agbtns{ margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; } .cpn-rvm-sub{ margin-top:10px; padding:8px 12px; background:var(--bg); border-radius:var(--radius); font-size:13px; } .cpn-rvm-store{ margin-top:6px; } .cpn-rvm-store .cpn-rvm-terms{ font-size:13px; } .cpn-pulse{ animation:cpn-pulse 1.6s ease-in-out infinite; } @keyframes cpn-pulse{ 50%{ box-shadow:0 0 0 4px rgba(217,146,11,.25); } } @media (prefers-reduced-motion: reduce){ .cpn-pulse{ animation:none; } } .cpn-term-add .mini-chip{ white-space:nowrap; flex:0 0 auto; } .cpn-commit{ margin-top:4px; font-size:12px; color:var(--ink-muted); } .cpn-commit a{ color:var(--red-text); } .cpn-notice{ margin-top:4px; padding:3px 8px; border-left:3px solid #D9920B; background:#FFF6E0; font-size:12px; border-radius:0 4px 4px 0; } /* ---- Circle coupon book: the public offers page (offers/) ---- */ .ob-main{ max-width:1180px; margin:0 auto; padding:16px 16px 110px; } .ob-hero{ display:flex; align-items:center; gap:18px; margin:0 0 16px; padding:18px 20px; border-radius:var(--radius); background:var(--grey-700); color:#fff; } .ob-hero img{ flex:0 0 auto; height:auto; } .ob-hero h1{ margin:0 0 4px; font-size:24px; color:#fff; } .ob-hero p{ margin:0; font-size:14.5px; color:#D6D7DA; max-width:70ch; } .ob-how{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:10px 0 0; padding:0; list-style:none; font-size:13.5px; } .ob-how b{ display:inline-grid; place-items:center; width:22px; height:22px; margin-right:6px; border-radius:50%; background:var(--red); color:#fff; font-size:12px; } .ob-me{ margin:0 0 10px; font-size:14px; color:var(--ink-muted); } .ob-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; } .ob-card{ position:relative; display:flex; flex-direction:column; gap:5px; padding:14px 16px 12px; border:2px dashed var(--border-strong); border-radius:12px; background:#fff; } .ob-card.is-on{ border-style:solid; border-color:var(--red); box-shadow:0 0 0 3px var(--red-tint); } .ob-card.is-got{ opacity:.75; } .ob-card-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; align-items:baseline; } .ob-biz{ font-size:13px; font-weight:700; color:var(--grey-700); text-transform:uppercase; letter-spacing:.04em; } .ob-cat{ font-size:11.5px; color:var(--ink-faint); } .ob-val{ font-size:28px; font-weight:800; color:var(--red-text); line-height:1.1; } .ob-title{ font-size:15px; } .ob-line{ font-size:13px; color:var(--ink-muted); } .ob-terms{ font-size:12.5px; color:var(--ink-muted); } .ob-terms summary{ cursor:pointer; color:var(--red-text); font-weight:600; } .ob-terms ol, .ob-tl{ margin:4px 0 0; padding-left:18px; } .ob-addr{ font-size:12.5px; color:var(--ink-faint); } .ob-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding-top:6px; } .ob-few{ font-size:12px; font-weight:700; color:#B5202A; } .ob-bar{ position:fixed; left:50%; bottom:14px; z-index:800; transform:translateX(-50%); display:flex; align-items:center; gap:14px; padding:10px 12px 10px 18px; border-radius:999px; background:var(--grey-700); color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); } .ob-bar[hidden]{ display:none; } .ob-picked{ margin:0 0 10px; padding-left:18px; font-size:14px; } .ob-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; } .ob-form label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:700; color:var(--ink-muted); } .ob-row{ display:flex; gap:8px; max-width:360px; } .ob-consent{ display:flex; gap:8px; align-items:flex-start; margin:6px 0; font-size:13px; color:var(--ink-muted); } .ob-consent input{ margin-top:3px; } .ob-err{ margin:6px 0; color:var(--danger); font-weight:600; font-size:13.5px; } .ob-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:10px; } .ob-done{ display:flex; flex-direction:column; align-items:center; text-align:center; } .ob-done h4{ margin:6px 0 2px; font-size:19px; } .ob-done p{ margin:0 0 10px; color:var(--ink-muted); } .ob-tickets{ display:grid; gap:8px; } .ob-ticket{ padding:10px 14px; border:2px dashed var(--red); border-radius:10px; background:#fff; font-size:13.5px; } .ob-ticket .cpn-code{ display:block; margin:2px 0; font-size:22px; letter-spacing:.06em; } .ob-circles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; } .ob-circle{ display:flex; flex-direction:column; padding:14px 16px; border:1px solid var(--border-strong); border-radius:var(--radius); background:#fff; text-decoration:none; color:var(--ink); } .ob-circle:hover{ border-color:var(--red); } .ob-circle span{ font-size:13px; color:var(--ink-muted); } @media (max-width: 640px){ .ob-hero{ flex-direction:column; text-align:center; } .ob-form{ grid-template-columns:1fr; } .ob-bar{ left:12px; right:12px; transform:none; justify-content:space-between; } } /* ---- Coupon book on the owner's side ---- */ .cpn-book .cpn-mine{ margin-bottom:6px; } .cpn-book-cap{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13px; font-weight:600; color:var(--ink-muted); } .cpn-book-cap[hidden]{ display:none; } .cpn-book-cap .field-input{ width:110px; height:34px; padding:4px 10px; } .cpn-bookline{ display:flex; align-items:center; gap:5px; margin-top:5px; font-size:12px; color:var(--grey-700); } .cpn-bookline .cpn-svg{ color:var(--red); } .cpn-sharebook{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px; padding:12px 14px; border:1px solid var(--border); border-left:3px solid var(--red); border-radius:0 var(--radius) var(--radius) 0; background:#fff; } .cpn-sharebook > div:first-child{ display:flex; flex-direction:column; gap:2px; } .cpn-sharebook b{ display:flex; align-items:center; gap:6px; } .cpn-sharebook-links{ display:flex; flex-direction:column; gap:6px; } .cpn-sharelink{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .cpn-sharelink .field-input{ flex:1 1 320px; height:32px; padding:3px 10px; font-size:12.5px; } .cpn-sharelink a.mini-chip{ text-decoration:none; } .gate-offers{ margin-top:10px; padding:8px 12px; border-radius:var(--radius); background:var(--red-tint); text-align:center; } .gate-offers a{ color:var(--red-text); text-decoration:none; } /* coupon QR codes (owner's issued coupons, the public coupon book) */ .cpn-ticket .cpn-qr{flex:0 0 auto;width:96px;height:96px;border:1px solid var(--grey-200,#e5e7eb);border-radius:8px;background:#fff;padding:4px} .ob-ticket .ob-qr{display:block;width:120px;height:120px;margin:0 auto 8px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;padding:4px} .ob-mine{margin:0 0 18px} .ob-mine h2{font-size:18px;margin:0 0 10px} .ob-mine h2 .muted{font-size:13px;font-weight:400;margin-left:6px} .ob-tickets-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .cpn-nc-sum{margin:6px 0 12px;color:var(--grey-700,#374151)} .cpn-nc-sum b{color:var(--red,#d32f2f);font-size:16px} @media (max-width:560px){.cpn-ticket .cpn-qr{width:72px;height:72px}} /* sharing with other stores is locked for now: options stay visible, not clickable */ .cpn-mode.is-locked{position:relative;opacity:.55;cursor:not-allowed;pointer-events:none;filter:grayscale(1)} .cpn-soon{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:2px 8px;border-radius:999px;background:var(--grey-200,#e5e7eb);color:var(--grey-700,#374151);font-size:11px;font-weight:700;letter-spacing:.02em} .cpn-soon .cpn-svg{width:12px;height:12px} .crm-chip.is-locked,.crm-chip:disabled{opacity:.5;cursor:not-allowed;pointer-events:none} .crm-chip.is-locked::after{content:"Soon";margin-left:6px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--grey-200,#e5e7eb);color:var(--grey-700,#374151)} /* the counter: the customer's OTP */ .cpn-otp{display:flex;flex-direction:column;gap:4px;min-width:250px;max-width:320px} .cpn-otp-h{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--grey-700,#374151)} .cpn-otp-h .cpn-svg{width:13px;height:13px} .cpn-otp-row{display:flex;gap:6px;align-items:center} .cpn-otp-row .field-input{flex:1 1 auto;min-width:0;letter-spacing:.2em;font-weight:700} .cpn-otp-row .mini-chip{white-space:nowrap} .cpn-otp-note{font-size:12px;color:var(--grey-500,#6b7280);line-height:1.35} .cpn-otp-note.is-ok{color:#15803d}.cpn-otp-note.is-err{color:var(--red,#d32f2f)} .cpn-otp-test{display:inline-block;margin-left:4px;padding:0 6px;border-radius:4px;background:#fef3c7;color:#92400e;font-weight:700} .ob-hero .ob-map{color:inherit;text-decoration:underline} .is-locked-field{opacity:.55;cursor:not-allowed}.is-locked-field .field-input{pointer-events:none;background:var(--bg,#f3f4f6)}.is-locked-field .cpn-soon{margin:0 0 0 4px;vertical-align:middle} /* single-store explanation: own customers and visitors both lead to the coupon */ .cpn-ig-in{display:flex;flex-direction:column;gap:8px} .cpn-ig-actor.is-v{border-color:#7A3FC4} .cpn-ig-actor.is-v b{color:#7A3FC4} .cpn-ig-actor.is-v > span{color:#7A3FC4} .cpn-ig-who.is-v{background:#F2EAFB;color:#7A3FC4} .cpn-circlebar.is-locked{opacity:.55;filter:grayscale(1);cursor:not-allowed;align-items:center} .cpn-circlebar.is-locked .cpn-cchip{pointer-events:none} .is-locked-row{opacity:.55}.is-locked-row input,.is-locked-row button{pointer-events:none} /* POS: coupon and redeemed points on the bill */ .pos-t-rw{border-top:1px dashed var(--line,#e5e7eb);padding-top:6px;margin-top:2px} .pos-t-rw small{color:var(--ink-muted);font-size:12px} .pos-t-rw.is-on{color:var(--ink)} .pos-rw-tag{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--red-tint,#fdecec);color:var(--red-text,#b91c1c);font-size:11px;font-weight:700;letter-spacing:.02em} .pos-rw-amt{display:inline-flex;align-items:center;gap:6px} .pos-rw-x{border:0;background:transparent;color:var(--ink-muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px} .pos-rw-x:hover{color:var(--red)} .pos-rw-err{display:block;color:var(--red)} .pos-t-rw #pos-rw-points{width:70px;flex:0 0 70px} .pos-rw-pop{display:flex;flex-direction:column;gap:10px} .pos-rw-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto} .pos-rw-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border:2px dashed var(--red);border-radius:10px;background:#fff;cursor:pointer;font:inherit} .pos-rw-item:hover{background:var(--red-tint,#fdecec)} .pos-rw-item:disabled{opacity:.5;cursor:not-allowed;border-color:var(--line,#e5e7eb)} .pos-rw-item b,.pos-rw-code{font-family:ui-monospace,Consolas,monospace;color:var(--red);letter-spacing:.08em;font-size:15px} .pos-rw-item small{color:var(--ink-muted)} .pos-rw-cpn{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:2px dashed var(--red);border-radius:10px} .pos-rw-otp{display:flex;gap:6px;align-items:center} .pos-rw-otp .field-input{flex:1 1 auto;min-width:0} #pos-rw-otp{letter-spacing:.25em;font-weight:700} .pos-rw-note{font-size:12.5px;color:var(--ink-muted)}.pos-rw-note.is-ok{color:#15803d}.pos-rw-note.is-err{color:var(--red)} /* Loyalty: how each redemption happened */ .rd-filter{margin:8px 0 10px} .rd-how{min-width:230px} .rd-how > div{font-size:13px;margin-top:3px} .rd-ch{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em} .rd-pos{background:#EAF1FD;color:#1F5FD6}.rd-sale{background:#E8F6EE;color:#18874B}.rd-coupon{background:var(--red-tint,#fdecec);color:var(--red-text,#b91c1c)}.rd-partner{background:#FFF6E0;color:#7A5300} /* Loyalty: points history */ .lg-sums{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .lg-sum{padding:4px 10px;border-radius:999px;font-size:12.5px;background:var(--bg,#f3f4f6);color:var(--ink-muted)} .lg-sum b{font-size:14px} .lg-sum.lg-earn b{color:#18874B}.lg-sum.lg-redeem b,.lg-sum.lg-exp b{color:var(--red)}.lg-sum.lg-bal{background:var(--ink,#111);color:#fff}.lg-sum.lg-bal b{color:#fff} .lg-table td{vertical-align:top} .lg-tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase} .lg-tag.lg-earn{background:#E8F6EE;color:#18874B}.lg-tag.lg-redeem{background:var(--red-tint,#fdecec);color:var(--red-text,#b91c1c)}.lg-tag.lg-exp{background:#F1F2F4;color:#5b6270} .lg-title{font-weight:600;margin-top:2px} .lg-table tr.lg-expire td,.lg-table tr.lg-return td{color:var(--ink-muted)} /* season theme swatches and the palette menu's season section */ .mbp-ss-none{ background:repeating-linear-gradient(135deg,#e5e7eb 0 4px,#fff 4px 8px); } .mbp-ss-winter{ background:linear-gradient(135deg,#0E2A5C 0 45%,#D9A520 45% 70%,#C62834 70%); } .mbp-ss-summer{ background:linear-gradient(135deg,#F59E0B 50%,#14B8A6 50%); } .mbp-ss-monsoon{ background:linear-gradient(135deg,#0F766E 50%,#64748B 50%); } .mbp-ss-festive{ background:linear-gradient(135deg,#4A1238 0 45%,#F2A516 45% 70%,#E4572E 70%); } .mbp-ss-sports{ background:linear-gradient(135deg,#1E3A8A 45%,#A3E635 45% 70%,#DC2626 70%); } .mbp-ss-health{ background:linear-gradient(135deg,#84A98C 45%,#7DD3FC 45% 70%,#FDBA74 70%); } .mbp-ss-foody{ background:linear-gradient(135deg,#B45309 50%,#FDE68A 50%); } .mbp-ss-automobile{ background:linear-gradient(135deg,#111827 50%,#EF4444 50%); } [data-mbp-theme] [data-season-pick].is-soon,[data-mbp-theme] button.is-soon{ opacity:.5; cursor:not-allowed; } /* /roster without a circle: pick one (nothing else loads) */ .circle-pick{ position:fixed; inset:0; z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px 16px; background:rgba(30,32,36,.72); overflow:auto; } .cp-box{ width:min(720px,100%); background:#fff; border-radius:16px; padding:24px 24px 20px; box-shadow:0 20px 60px rgba(0,0,0,.35); } .cp-logo{ height:30px; width:auto; background:var(--grey-700); padding:6px 10px; border-radius:8px; } .cp-box h2{ margin:14px 0 4px; font-size:22px; color:var(--ink); } .cp-box > p{ margin:0 0 12px; color:var(--ink-muted); } .cp-search{ width:100%; height:44px; font-size:15px; margin-bottom:12px; } .cp-h{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:6px 0 6px; } .cp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin-bottom:10px; } .cp-card{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--ink); background:var(--bg-2,#fff); } .cp-card:hover,.cp-card:focus{ border-color:var(--red); background:var(--red-tint); outline:none; } .cp-card span{ color:var(--red); font-size:12.5px; font-weight:700; white-space:nowrap; } .cp-card.is-mine{ border-color:var(--red); } .cp-card[hidden]{ display:none; } .cp-none{ color:var(--ink-muted); margin:4px 0 0; } body.pick-circle .gate-overlay{ display:none !important; } body.pick-circle{ overflow:hidden; } /* circle share studio (roster/share_card/) */ .cs-page{ background:var(--bg); } .cs-main{ max-width:1200px; margin:0 auto; padding:18px 16px 40px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:22px; align-items:start; } .cs-page.is-popup .cs-main{ padding-top:10px; } .cs-preview{ position:sticky; top:12px; display:flex; flex-direction:column; gap:10px; } .cs-stage{ background:repeating-conic-gradient(#e9ebef 0 25%, #f6f7f9 0 50%) 0 0 / 22px 22px; border-radius:14px; padding:16px; display:flex; justify-content:center; } .cs-stage canvas{ width:100%; max-width:560px; height:auto; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); } .cs-stage.is-story canvas{ max-width:330px; } .cs-actions{ display:flex; flex-wrap:wrap; gap:8px; } .cs-actions .refresh-btn svg{ width:16px; height:16px; margin-right:6px; } .cs-wa{ text-decoration:none; } .cs-hint{ margin:0; font-size:12.5px; color:var(--ink-muted); } .cs-panel{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 18px 20px; } .cs-panel h1{ margin:0 0 4px; font-size:22px; } .cs-h{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:14px 0 6px; } .cs-seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .cs-seg button{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border:2px solid var(--border); border-radius:10px; background:#fff; font:inherit; cursor:pointer; text-align:left; } .cs-seg button span{ font-size:12px; color:var(--ink-muted); } .cs-seg button.is-on{ border-color:var(--red); background:var(--red-tint); } .cs-looks{ grid-template-columns:repeat(3,1fr); } .cs-looks button{ flex-direction:row; align-items:center; gap:8px; font-weight:600; font-size:13.5px; } .cs-looks i{ width:22px; height:22px; border-radius:50%; flex:0 0 auto; } .cs-presets{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } .cs-presets .mini-chip.is-on{ background:var(--red); color:#fff; border-color:var(--red); } .cs-field{ display:flex; flex-direction:column; gap:3px; font-size:12.5px; font-weight:600; color:var(--ink-muted); margin-bottom:8px; } .cs-copy{ display:flex; gap:6px; align-items:flex-start; } .cs-copy .field-input{ flex:1 1 auto; min-width:0; } .cs-copy textarea{ resize:vertical; font:inherit; font-size:13px; } @media (max-width:860px){ .cs-main{ grid-template-columns:minmax(0,1fr); } .cs-preview{ position:static; } } .pocketlite-box[hidden]{ display:none !important; } .bot-fab[hidden], .bot-panel[hidden]{ display:none !important; } /* website builder (website) */ .wb-page{ background:var(--bg); } .wb-main{ display:grid; grid-template-columns:minmax(360px, 460px) minmax(0,1fr); gap:0; min-height:calc(100vh - 70px); } .wb-side{ padding:16px 16px 40px; border-right:1px solid var(--border); background:var(--bg); overflow:auto; max-height:calc(100vh - 70px); } .wb-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; } .wb-head h1{ margin:0; font-size:22px; } .wb-head p{ margin:2px 0 0; font-size:13px; } .wb-status{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--ink-muted); padding:4px 10px; border-radius:999px; background:var(--card); border:1px solid var(--border); white-space:nowrap; } .wb-status.is-ok{ color:#15803d; } .wb-status.is-err{ color:var(--red); border-color:var(--red); } .wb-panel{ background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; } .wb-panel > summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 14px; } .wb-panel > summary::-webkit-details-marker{ display:none; } .wb-panel > summary b{ font-size:15px; } .wb-panel > summary span{ font-size:12.5px; color:var(--ink-muted); display:inline-flex; align-items:center; gap:6px; margin-left:auto; } .wb-panel > summary::after{ content:"▾"; color:var(--ink-faint); } .wb-panel[open] > summary::after{ content:"▴"; } .wb-body{ padding:0 14px 14px; display:flex; flex-direction:column; gap:10px; } .wb-dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-faint); display:inline-block; } .wb-dot.on{ background:#16a34a; } .wb-field{ display:flex; flex-direction:column; gap:3px; font-size:12.5px; font-weight:600; color:var(--ink-muted); } .wb-field small{ font-weight:400; color:var(--ink-faint); } .wb-field .field-input{ width:100%; } .wb-sub{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; } .wb-slug{ display:flex; align-items:center; border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; background:#fff; } .wb-slug span{ padding:0 4px 0 10px; font-size:12.5px; color:var(--ink-faint); white-space:nowrap; max-width:55%; overflow:hidden; text-overflow:ellipsis; } .wb-slug .field-input{ border:0; border-radius:0; min-width:0; } .wb-switch{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; position:relative; } .wb-switch input{ position:absolute; opacity:0; width:1px; height:1px; } .wb-switch > span{ position:relative; width:40px; height:22px; border-radius:999px; background:#CFD0D5; flex:0 0 auto; transition:background .2s; } .wb-switch > span::after{ content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .2s; } .wb-switch input:checked + span{ background:#16a34a; } .wb-switch input:checked + span::after{ left:21px; } .wb-switch input:focus-visible + span{ outline:2px solid var(--red); outline-offset:2px; } .wb-switch.sm > span{ width:34px; height:20px; } .wb-switch.sm > span::after{ width:14px; height:14px; } .wb-switch.sm input:checked + span::after{ left:17px; } .wb-tpls{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .wb-tpl{ border:2px solid var(--border); border-radius:10px; background:#fff; padding:8px; cursor:pointer; display:flex; flex-direction:column; gap:6px; font:inherit; font-size:13px; } .wb-tpl i{ display:block; height:54px; border-radius:6px; } .wb-tpl-classic i{ background:linear-gradient(#555 0 55%, #fff 55%); } .wb-tpl-bold i{ background:linear-gradient(135deg, var(--red) 0 60%, #f4f4f4 60%); } .wb-tpl-elegant i{ background:linear-gradient(#FBF8F3 0 30%, #E7DFD2 30% 32%, #FBF8F3 32%); border:1px solid #E7DFD2; } .wb-tpl.is-on{ border-color:var(--red); background:var(--red-tint); } .wb-colors{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .wb-color{ width:30px; height:30px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--border-strong); cursor:pointer; } .wb-color.is-on{ box-shadow:0 0 0 2px var(--ink); } .wb-color-pick{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-muted); cursor:pointer; } .wb-color-pick input{ width:30px; height:30px; border:0; padding:0; background:none; cursor:pointer; } .wb-cover{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .wb-cover img{ width:120px; height:68px; object-fit:cover; border-radius:8px; border:1px solid var(--border); } .wb-upload{ cursor:pointer; } .wb-row{ display:flex; gap:6px; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--bg); } .wb-row-grid{ flex:1 1 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:6px; min-width:0; } .wb-row-grid .field-input{ width:100%; min-width:0; font-size:13.5px; padding:7px 9px; } .wb-row-grid.wb-one{ grid-template-columns:1fr; } .wb-row-tools{ display:flex; flex-direction:column; gap:3px; } .wb-row-tools button{ width:26px; height:24px; border:1px solid var(--border); background:#fff; border-radius:6px; cursor:pointer; color:var(--ink-muted); font-size:12px; padding:0; } .wb-row-tools button:hover{ color:var(--red); border-color:var(--red); } .wb-add{ display:flex; flex-wrap:wrap; gap:6px; } .wb-add a{ text-decoration:none; } .wb-hours{ display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; } .wb-secs{ display:flex; flex-direction:column; gap:5px; } .wb-sec{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; } .wb-sec b{ font-size:14px; flex:0 0 auto; } .wb-sec em{ font-style:normal; font-size:12px; color:var(--ink-faint); flex:1 1 auto; } .wb-sec em.ok{ color:#15803d; } .wb-sec .wb-row-tools{ flex-direction:row; } .wb-sec.is-off b{ color:var(--ink-faint); text-decoration:line-through; } .wb-serp{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#fff; display:flex; flex-direction:column; gap:2px; } .wb-serp span{ font-size:12px; color:#1a7f37; } .wb-serp b{ color:#1a0dab; font-weight:400; font-size:17px; } .wb-serp p{ margin:0; font-size:13px; color:#4d5156; } .wb-preview{ display:flex; flex-direction:column; background:repeating-conic-gradient(#e9ebef 0 25%, #f3f4f6 0 50%) 0 0 / 22px 22px; height:calc(100vh - 70px); position:sticky; top:0; } .wb-bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--border); } .wb-devices{ display:inline-flex; border:1px solid var(--border-strong); border-radius:999px; overflow:hidden; } .wb-devices button{ border:0; background:#fff; padding:6px 14px; font:inherit; font-size:13px; cursor:pointer; } .wb-devices button.is-on{ background:var(--grey-700); color:#fff; } .wb-open{ font-weight:700; font-size:13.5px; text-decoration:none; color:var(--red); } .wb-frame{ flex:1 1 auto; display:flex; justify-content:center; padding:14px; min-height:0; } .wb-frame iframe{ width:100%; height:100%; border:1px solid var(--border-strong); border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.12); } .wb-frame.is-phone iframe{ width:390px; max-width:100%; } @media (max-width:980px){ .wb-main{ grid-template-columns:minmax(0,1fr); } .wb-side{ max-height:none; border-right:0; } .wb-preview{ position:static; height:auto; } .wb-frame iframe{ height:720px; } } @media (max-width:480px){ .wb-row-grid, .wb-hours, .wb-tpls{ grid-template-columns:1fr; } } .site-builder-link{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 12px; } .site-builder-link a{ text-decoration:none; } .member-card .role-badge{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; } /* the member's website: one line under their dashboard profile, and a button on their roster card */ .dash-site-link{ display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-size:12.5px; font-weight:700; color:var(--red-text); text-decoration:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dash-site-link svg{ width:13px; height:13px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; } .dash-site-link:hover{ text-decoration:underline; } .icon-btn.site-btn{ text-decoration:none; } .icon-btn.site-btn svg{ fill:none; stroke:currentColor; stroke-width:2; } .dash-profile .dash-site-link{ color:#FFB3B6; } .dash-profile .dash-site-link.is-new{ color:#fff; opacity:.85; } /* Dashboard left menu: its own scroll (up/down) within the screen, smooth, no visible scrollbar. --dash-top is the sticky header's real height (set by the dashboard page), so nothing hides under it. */ @media (min-width:821px){ .dash-side{ top:var(--dash-top, 74px); max-height:calc(100vh - var(--dash-top, 74px) - 12px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .dash-side::-webkit-scrollbar{ width:0; height:0; display:none; } } /* "Your day at a glance": solid theme colours — solid icon squares, a solid bar on tiles that need attention */ .dc-ico{ background:var(--red); box-shadow:0 2px 6px rgba(var(--red-rgb), .28); } .dc-ico svg{ stroke:#fff; } .dash-card.is-flagged{ background:#fff; border-left:4px solid var(--red); } .dash-card:hover .dc-ico{ background:var(--red-dark); } /* "Your day at a glance" as solid theme tiles, like the POS menu tiles (follows the chosen colour theme) */ .dash-card{ border:0; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.16); background:linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.22) 100%), var(--red); } .dash-card:hover{ border:0; box-shadow:0 4px 14px rgba(var(--red-rgb),.38); filter:brightness(1.07); transform:translateY(-1px); } .dash-card .dc-ico{ background:rgba(255,255,255,.2); box-shadow:none; } .dash-card:hover .dc-ico{ background:rgba(255,255,255,.28); } .dash-card .dc-ico svg{ stroke:#fff; } .dash-card .dc-label, .dash-card .dc-figure b{ color:#fff; } .dash-card .dc-what, .dash-card .dc-figure span, .dash-card .dc-note{ color:rgba(255,255,255,.82); } .dash-card .dc-note a, .dash-card .dc-what a, .dash-card .dc-figure a{ color:#fff; } .dash-card .dc-go, .dash-card:hover .dc-go{ color:rgba(255,255,255,.85); } .dash-card.is-flagged{ border:0; background:linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.22) 100%), var(--red); box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--red-dark); } .dash-card.is-flagged .dc-note{ color:#fff; font-weight:700; } :root[data-theme="white"] .dash-card{ color:#fff; } /* Visibility page: every circle as a solid theme tile, to tempt members to join */ .sc-wrap{ margin:0 0 18px; } .sc-head h3{ margin:0 0 2px; font-size:18px; } .sc-head p{ margin:0 0 12px; color:var(--ink-muted); } .sc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; } .sc-card{ display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:12px; color:#fff; position:relative; overflow:hidden; background:linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.22) 100%), var(--red); box-shadow:0 2px 8px rgba(var(--red-rgb), .25); } .sc-card::after{ content:""; position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%; border:18px solid rgba(255,255,255,.09); pointer-events:none; } .sc-card.is-mine{ background:linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.28) 100%), var(--red-dark); } .sc-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .sc-top b{ font-size:18px; line-height:1.2; } .sc-badge{ flex:0 0 auto; background:#fff; color:var(--red-text); font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; } .sc-where{ font-size:12.5px; color:rgba(255,255,255,.82); } .sc-details{ margin:0; font-size:13px; color:rgba(255,255,255,.9); } .sc-stats{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:rgba(255,255,255,.88); margin-top:2px; } .sc-stats b{ color:#fff; font-size:15px; margin-right:2px; } .sc-cats{ display:flex; flex-wrap:wrap; gap:4px; } .sc-cats i{ font-style:normal; font-size:11.5px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.18); } .sc-hook{ font-size:13px; font-weight:800; background:rgba(255,255,255,.95); color:var(--red-text); padding:5px 10px; border-radius:8px; align-self:flex-start; } .sc-actions{ margin-top:auto; padding-top:6px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } .sc-btn{ border:0; border-radius:999px; padding:8px 16px; background:#fff; color:var(--red-text); font:inherit; font-weight:800; cursor:pointer; } .sc-btn:hover{ background:var(--bg); } .sc-btn:disabled{ opacity:.6; cursor:default; } .sc-state{ font-size:13px; font-weight:700; } .sc-link{ color:#fff; font-size:13px; font-weight:700; text-decoration:none; opacity:.9; } .sc-link:hover{ text-decoration:underline; } /* website builder: photos & video */ .wb-photos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; } .wb-photo{ position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--bg); } .wb-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .wb-photo-tools{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; padding:3px; background:linear-gradient(transparent, rgba(0,0,0,.55)); opacity:0; transition:opacity .15s; } .wb-photo:hover .wb-photo-tools, .wb-photo:focus-within .wb-photo-tools{ opacity:1; } .wb-photo-tools button{ width:24px; height:22px; border:0; border-radius:5px; background:rgba(255,255,255,.92); cursor:pointer; font-size:12px; padding:0; } .wb-photo-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; color:var(--red-text); font-size:22px; font-weight:700; border-style:dashed; border-color:var(--red); } .wb-photo-add span{ font-size:11px; } .wb-video-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13.5px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; } @media (hover:none){ .wb-photo-tools{ opacity:1; } } .wb-body .wb-upload{ align-self:flex-start; } /* Ad publish: tabs, and the calendar with the locations side by side */ .ads-tabs{ display:flex; gap:4px; border-bottom:2px solid var(--border); margin:0 0 12px; overflow-x:auto; } .ads-tab{ border:0; background:none; padding:10px 16px; font:inherit; font-weight:700; font-size:14.5px; color:var(--ink-muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; } .ads-tab b{ display:inline-block; min-width:20px; padding:0 6px; border-radius:999px; background:var(--red); color:#fff; font-size:12px; margin-left:4px; } .ads-tab.is-on{ color:var(--red-text); border-bottom-color:var(--red); } .ads-cal{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:12px; align-items:start; } .ads-cal-locs{ padding:6px; display:flex; flex-direction:column; gap:4px; max-height:calc(100vh - 170px); overflow-y:auto; position:sticky; top:84px; scrollbar-width:thin; } .ads-cal-loc{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left; padding:10px; border:1px solid transparent; border-radius:10px; background:none; font:inherit; cursor:pointer; } .ads-cal-loc:hover{ background:var(--bg); } .ads-cal-loc b{ display:block; font-size:14px; } .ads-cal-loc small{ display:block; font-size:12px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ads-cal-loc em{ font-style:normal; font-weight:800; font-size:15px; } .ads-cal-loc.is-on{ background:linear-gradient(150deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.2) 100%), var(--red); color:#fff; } .ads-cal-loc.is-on small{ color:rgba(255,255,255,.85); } .ads-cal-loc.is-on .ads-loc-dot{ box-shadow:0 0 0 2px #fff; } .ads-cal-main{ padding:12px; } .ads-cal-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .ads-cal-head b{ font-size:17px; min-width:150px; text-align:center; } .ads-cal-head .ads-legend{ margin-left:auto; } .ads-legend .is-mine{ background:var(--red); color:#fff; } .ads-cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; } .ads-cal-w{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); text-align:center; padding:2px 0; } .ads-cal-day{ position:relative; min-height:68px; border:1px solid var(--border); border-radius:8px; background:#fff; padding:5px 6px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; font:inherit; cursor:pointer; text-align:left; } .ads-cal-day .n{ font-weight:700; font-size:13px; } .ads-cal-day .f{ font-size:11.5px; color:var(--ink-muted); } .ads-cal-day .f b{ font-size:14px; color:var(--ink); } .ads-cal-day .m{ margin-top:auto; font-size:10.5px; font-weight:800; color:#fff; background:var(--red); border-radius:999px; padding:1px 7px; } .ads-cal-day.is-ok{ background:#EAF6EF; border-color:#BFE3CD; } .ads-cal-day.is-low{ background:#FDF3E1; border-color:#F2D29A; } .ads-cal-day.is-full{ background:#FCE9EA; border-color:#F2B8BC; } .ads-cal-day.is-none{ background:var(--bg); } .ads-cal-day.is-out{ opacity:.45; } .ads-cal-day.is-past{ opacity:.55; } .ads-cal-day.is-today .n{ background:var(--ink); color:#fff; border-radius:999px; padding:0 7px; } .ads-cal-day.is-sel{ outline:3px solid var(--red); outline-offset:-1px; } .ads-cal-day:hover{ border-color:var(--red); } .ads-day{ margin-top:14px; } .ads-day h4{ margin:0 0 8px; font-size:15px; } .ads-day-mine{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; font-size:13px; } @media (max-width:900px){ .ads-cal{ grid-template-columns:minmax(0,1fr); } .ads-cal-locs{ position:static; max-height:260px; } .ads-cal-day{ min-height:54px; } .ads-cal-head .ads-legend{ margin-left:0; width:100%; } } @media (max-width:480px){ .ads-cal-day .f{ font-size:10px; } .ads-cal-day .f b{ font-size:12px; } } /* Ad publish: the day popup */ .ads-day-box{ width:min(980px, calc(100vw - 32px)); max-width:none; } .ads-day-sum{ display:flex; align-items:center; gap:8px; font-size:14px; margin:0 0 10px; } .ads-day-sum b{ font-size:18px; } .ads-day-mine{ display:flex; flex-direction:column; gap:5px; margin:0 0 12px; padding:10px 12px; border-radius:10px; background:var(--red-tint); font-size:13px; } .ads-day-mine > b{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--red-text); } .ads-cal-tip{ margin:10px 0 0; font-size:12.5px; color:var(--ink-faint); } /* ========================================================================== Flip book member cards (2026-09-27): a good-sized photo and clean, uncramped details. Cards view: a tall photo on the left, the details beside it. List view: the same, wider. ========================================================================== */ .flip-member-card{ flex-direction:row; align-items:stretch; justify-content:flex-start; text-align:left; gap:14px; padding:10px; } .flip-member-card .avatar{ width:40%; max-width:150px; height:auto; min-height:0; aspect-ratio:auto; flex:0 0 40%; margin:0; align-self:stretch; border-radius:10px !important; border:0; box-shadow:none !important; overflow:hidden; font-size:30px; letter-spacing:.02em; } .flip-member-card:hover .avatar, .flip-member-card.is-gold .avatar{ box-shadow:none !important; } .flip-member-card .avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .flip-member-card .fmc-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; } .flip-member-card .fmc-name{ font-size:16px; line-height:1.2; } .flip-member-card .fmc-company{ font-size:13px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .flip-member-card .fmc-category{ align-self:flex-start; margin-top:6px; max-width:100%; } .flip-member-card .fmc-desc{ font-size:12.5px; line-height:1.4; margin-top:6px; -webkit-line-clamp:3; } .flip-member-card.is-gold{ border-color:#E0A93B; } /* list view: one card per row — a bigger photo, bigger words, the whole blurb */ body[data-flip-layout="list"] .flip-member-card{ gap:22px; padding:12px; align-items:stretch; } body[data-flip-layout="list"] .flip-member-card .avatar{ width:auto; height:auto; flex:0 0 32%; max-width:210px; font-size:44px; } body[data-flip-layout="list"] .fmc-name{ font-size:22px; -webkit-line-clamp:2; } body[data-flip-layout="list"] .fmc-company{ font-size:15.5px; } body[data-flip-layout="list"] .fmc-desc{ font-size:14.5px; -webkit-line-clamp:3; } body[data-flip-layout="list"] .fmc-go{ align-self:center; } @media (max-width:560px){ .flip-member-card{ gap:10px; padding:8px; } .flip-member-card .avatar{ flex-basis:36%; font-size:22px; } .flip-member-card .fmc-name{ font-size:14.5px; } .flip-member-card .fmc-desc{ -webkit-line-clamp:2; } body[data-flip-layout="list"] .flip-member-card .avatar{ flex-basis:30%; font-size:28px; } } /* Open ad space ("Book this space"): bold, bigger, with the price mybiz.promo set */ .ad-placeholder{ padding:22px 18px; } .ad-placeholder .sponsored-tag{ font-size:12px; font-weight:800; letter-spacing:.08em; } .ad-placeholder-title{ font-size:24px; font-weight:800; line-height:1.15; margin-top:4px; } .ad-price{ display:flex; align-items:baseline; justify-content:center; gap:6px; margin-top:8px; } .ad-price b{ font-size:34px; font-weight:900; line-height:1; letter-spacing:-.01em; } .ad-price span{ font-size:15px; font-weight:700; opacity:.8; } .ad-price-note{ font-size:12.5px; font-weight:700; opacity:.75; margin-top:2px; } .ad-placeholder-sub{ font-size:14.5px; font-weight:600; margin-top:8px; max-width:30ch; } .ad-placeholder .ad-cta{ font-size:16px; font-weight:800; padding:10px 20px; margin-top:12px; border-radius:999px; } .ad-page.ad-quarter .ad-placeholder-title{ font-size:17px; } .ad-page.ad-quarter .ad-price b{ font-size:24px; } .ad-page.ad-quarter .ad-placeholder .ad-cta{ font-size:13.5px; padding:7px 14px; } /* season swatches, matching each season's colours */ .mbp-ss-summer{ background:linear-gradient(135deg,#0F5E63 0 45%,#F5A623 45% 70%,#F2545B 70%); } .mbp-ss-monsoon{ background:linear-gradient(135deg,#1F3B4D 0 45%,#7BC67E 45% 70%,#0E8FB8 70%); } .mbp-ss-sports{ background:linear-gradient(135deg,#13265C 0 45%,#A3E635 45% 70%,#E0312D 70%); } .mbp-ss-health{ background:linear-gradient(135deg,#2F5D50 0 45%,#7DD3FC 45% 70%,#F08A4B 70%); } .mbp-ss-foody{ background:linear-gradient(135deg,#5B2A0E 0 45%,#F6C343 45% 70%,#E03E2D 70%); } .mbp-ss-automobile{ background:linear-gradient(135deg,#111827 0 45%,#FBBF24 45% 70%,#EF4444 70%); } /* Only the logo in the top bar: no page label under it (2026-09-27) */ header.top .brand > small{ display:none !important; } header.top .brand{ justify-content:center; } /* ========================================================================== Member area on phones (2026-09-28): the bar stays one row (logo, who you are, palette, Menu) and the page links drop down in a panel under it, instead of wrapping into / squeezing the header over the page. ========================================================================== */ .top-nav-toggle{ display:none; } .top-nav-links{ display:contents; } @media (max-width:760px){ .top-inner-full{ padding-left:12px; padding-right:12px; } header.top .top-inner{ gap:8px; flex-wrap:nowrap; } header.top .brand{ flex:0 1 auto; min-width:0; } header.top .brand img{ height:26px; max-width:100%; } header.top .top-nav{ width:auto; flex:0 0 auto; flex-wrap:nowrap; align-items:center; justify-content:flex-end; margin-left:auto; gap:6px; } .top-nav-toggle{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 11px; border:1px solid rgba(255,255,255,.35); border-radius:8px; background:transparent; color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .top-nav-toggle svg{ width:18px; height:18px; } .top-nav-toggle .tnt-close{ display:none; } .top-nav.is-open .top-nav-toggle{ background:var(--red); border-color:var(--red); } .top-nav.is-open .top-nav-toggle .tnt-open{ display:none; } .top-nav.is-open .top-nav-toggle .tnt-close{ display:block; } .top-nav-links{ display:none; position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:60; grid-template-columns:1fr 1fr; gap:6px; padding:10px 12px 12px; background:#fff; border-bottom:3px solid var(--red); box-shadow:0 14px 30px rgba(0,0,0,.25); max-height:calc(100vh - var(--mbp-top-h, 60px)); max-height:calc(100dvh - var(--mbp-top-h, 60px)); overflow-y:auto; overscroll-behavior:contain; } .top-nav.is-open .top-nav-links{ display:grid; } header.top .top-nav-links a{ display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 12px; font-size:14px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--border); border-radius:8px; } header.top .top-nav-links a svg{ width:17px; height:17px; color:var(--red); } header.top .top-nav-links a:hover{ background:var(--red-tint); border-color:var(--red); color:var(--red); } header.top .top-nav-links a.is-here, :root[data-season] header.top .top-nav-links a.is-here{ background:var(--red); border-color:var(--red); color:#fff; } header.top .top-nav-links a.is-here svg{ color:#fff; } header.top .top-nav-links a.top-link-cta{ background:var(--red); border-color:var(--red); color:#fff; } header.top .top-nav-links a.top-link-cta svg{ color:#fff; } .top-me{ max-width:none; } header.top .top-nav .mbp-theme-menu{ position:fixed; top:calc(var(--mbp-top-h, 60px) + 6px); left:auto; right:8px; max-width:calc(100vw - 16px); max-height:calc(100vh - var(--mbp-top-h, 60px) - 20px); overflow-y:auto; } } @media (max-width:360px){ .top-nav-toggle span{ display:none; } .top-nav-toggle{ padding:0 8px; } } /* Dashboard left menu on phones: one swipeable strip of chips, not a wall of wrapped links above the page. */ @media (max-width:820px){ .dash-nav{ flex-wrap:nowrap; overflow-x:auto; gap:6px; padding:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } .dash-nav::-webkit-scrollbar{ display:none; } .dash-nav a{ flex:0 0 auto; white-space:nowrap; border:1px solid var(--border); padding:7px 11px; font-size:13px; scroll-snap-align:start; } .dash-shell{ gap:12px; } } /* Phones: nothing may push the page sideways; wide tables scroll inside their card. */ @media (max-width:760px){ body{ overflow-x:clip; } .rw-card, .loy-lots{ overflow-x:auto; -webkit-overflow-scrolling:touch; } } /* ========================================================================== Counter (POS) on phones / small tablets (2026-09-28): the items come first, search + sections stay pinned under the header, and a bottom bar keeps the bill's count and total one tap away (View bill / Pay). ========================================================================== */ .pos-mjump, .pos-mbar{ display:none; } @media (max-width:980px){ .pos-wrap{ display:flex; flex-direction:column; } .pos-menu{ order:-1; padding:0 10px 10px; } .pos-menu-bar{ position:sticky; top:var(--mbp-top-h, 56px); z-index:6; background:#fff; margin:0 -10px; padding:10px 10px 6px; } .pos-cats{ position:sticky; top:calc(var(--mbp-top-h, 56px) + 52px); z-index:5; background:#fff; margin:0 -10px 8px; padding:2px 10px 8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-bottom:1px solid var(--border); } .pos-cats::-webkit-scrollbar{ display:none; } .pos-cats .crm-chip{ flex:0 0 auto; white-space:nowrap; } .pos-grid{ max-height:none; overflow:visible; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:6px; } .pos-tile{ min-height:72px; padding:8px 9px; touch-action:manipulation; } .pos-tile-name{ font-size:13px; } .pos-tile-price{ font-size:14px; } .pos-mjump{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; height:38px; border:1px dashed var(--red); border-radius:var(--radius); background:var(--red-tint); color:var(--red); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; } .pos-mjump svg{ width:16px; height:16px; } .pos-mbar{ display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:45; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:#fff; border-top:3px solid var(--red); box-shadow:0 -6px 18px rgba(0,0,0,.14); } .pos-mbar-sum{ flex:1; display:flex; align-items:center; gap:10px; min-width:0; height:46px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--bg); color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer; } .pos-mbar-sum > b{ font-size:18px; color:var(--red); font-variant-numeric:tabular-nums; } .pos-mbar-sum small{ margin-left:auto; font-size:12px; font-weight:700; color:var(--red); white-space:nowrap; } .pos-mbar-pay{ flex:0 0 96px; height:46px; justify-content:center; font-size:16px; } .pos-mbar.is-bump .pos-mbar-sum{ animation:pos-bump .3s ease-out; } body:has(.pos-mbar) .pos-main{ padding-bottom:78px; } body:has(.pos-mbar) .pinto{ bottom:70px; } } @keyframes pos-bump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.035); background:var(--red-tint); } 100%{ transform:scale(1); } } .pos-page.in-popup .pos-mbar{ display:none; } /* Roster search (2026-09-28): the season hero clips its overflow, which cut the typeahead list off — while the list is open the hero lets it hang out over the page below. */ :root[data-season] .season-hero:has(.search-suggest.open){ overflow:visible; z-index:36; } @media (max-width:760px){ .search-suggest{ max-height:min(340px, 45vh); } } /* ========================================================================== Counter (POS) on phones, round 2 (2026-09-28): - the four screens fold into one small picker; the day figures leave the counter screen (they show on Menu & items, Bills and Settings) - in their place: the current bill (customer name, mobile, items, total) on top - one search row: search every type, a type picker only to narrow down - what is on the bill rides above the item cards as a sticky chip strip (one row, however many lines), and each card shows how many are on the bill - Checkout opens the bill as a bottom sheet with Payment always in view ========================================================================== */ .pos-tab-pick, .pos-cat-select, .pos-sheet-head, .pos-sheet-lbl, .pos-sheet-back, .pos-sheet-who{ display:none; } .pos-mhead{ display:contents; } .pos-mcart{ display:none; } .pos-tile{ position:relative; } @media (max-width:760px){ .pos-tile[data-qty] .pos-tile-name{ padding-right:24px; } } @media (max-width:760px){ .pos-tile[data-qty]::after{ content:attr(data-qty); position:absolute; top:6px; right:6px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:#fff; color:var(--red); font-size:12px; font-weight:800; line-height:22px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.22); animation:pos-pop .25s ease-out; } } @keyframes pos-pop{ 0%{ transform:scale(.4); opacity:0; } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); opacity:1; } } @media (max-width:980px){ .pos-mhead{ display:block; position:sticky; top:var(--mbp-top-h, 56px); z-index:6; background:#fff; margin:0 -10px 8px; padding:10px 10px 0; border-bottom:1px solid var(--border); } .pos-mhead .pos-menu-bar{ position:static; margin:0 0 8px; padding:0; } .pos-mhead .pos-cats{ position:static; margin:0; padding:0 0 8px; border-bottom:0; } } @media (max-width:760px){ .pos-mhead.has-cart .pos-mcart{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:0 0 8px; margin:0 0 8px; border-bottom:1px dashed var(--border-strong); } .pos-mcart::-webkit-scrollbar{ display:none; } .pos-mc{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 4px 0 3px; border-radius:999px; background:var(--red-tint); border:1px solid rgba(var(--red-rgb),.28); color:var(--ink); } .pos-mc.is-new{ animation:pos-pop .28s ease-out; } .pos-mc button{ width:26px; height:26px; flex:0 0 26px; padding:0; border:0; border-radius:50%; background:#fff; color:var(--red); font:inherit; font-size:17px; font-weight:800; line-height:1; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.12); } .pos-mc-name{ max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:700; } .pos-mc-q{ min-width:24px; height:24px; padding:0 6px; border-radius:12px; background:var(--red); color:#fff; font-size:12px; line-height:24px; text-align:center; font-variant-numeric:tabular-nums; } } @media (max-width:760px){ /* screen picker; the day figures only away from the counter */ .pos-bar{ flex-wrap:nowrap; gap:8px; margin:0 0 8px; } .pos-tabs{ display:none; } body[data-pos-tab="counter"] .pos-kpis{ display:none; } .pos-tab-pick{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; position:relative; height:34px; padding:0 26px 0 11px; border-radius:999px; background:var(--grey-700); color:#fff; font-size:13px; font-weight:700; } .pos-tab-pick svg{ width:15px; height:15px; } .pos-tab-pick::after{ content:""; position:absolute; right:11px; top:50%; width:7px; height:7px; margin-top:-6px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); pointer-events:none; } .pos-tab-pick select{ -webkit-appearance:none; appearance:none; border:0; outline:0; background:transparent; color:#fff; font:inherit; padding:0; cursor:pointer; } .pos-tab-pick option{ color:#2F3032; } .pos-kpis{ width:auto; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; border-radius:999px; } .pos-kpis::-webkit-scrollbar{ display:none; } .pos-kpi{ flex:0 0 auto; padding:5px 10px; } .pos-kpi b{ font-size:13.5px; } /* the current bill, on top of the item cards */ .pos-mbill{ margin:10px 0 0; padding:10px; border:1px solid rgba(var(--red-rgb),.25); border-radius:12px; background:linear-gradient(180deg, var(--red-tint), #fff 70%); } .pos-mbill-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 8px; font-size:13px; color:var(--ink-muted); } .pos-mbill-top > b{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--red); } .pos-mbill-top span b{ font-size:17px; color:var(--red); font-variant-numeric:tabular-nums; } .pos-mbill .pos-cust{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto !important; } .pos-mbill .pos-cust .field-input{ background:#fff; } .pos-mbill .pos-cust-meta{ min-height:0; margin-top:4px; } .pos-mbill .pos-cust-meta:empty{ display:none; } .pos-menu{ padding-top:0; } /* search every type, narrow by type only if needed */ .pos-mhead .pos-cats{ display:none; } .pos-menu-bar{ gap:6px; } .pos-menu-bar .mini-btn[data-go]{ display:none; } .pos-menu-bar #pos-search{ flex:1 1 auto; min-width:0; } .pos-cat-select{ display:block; flex:0 0 auto; width:40%; max-width:160px; height:36px; padding:4px 8px; font-size:13px; } /* the bill as a bottom sheet */ .pos-bill{ position:fixed; left:0; right:0; bottom:0; z-index:60; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; gap:8px; padding:0 12px; border:0; border-radius:18px 18px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.28); transform:translateY(105%); visibility:hidden; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s; } body.pos-sheet-open .pos-bill{ transform:none; visibility:visible; transition:transform .28s cubic-bezier(.2,.8,.2,1); } .pos-sheet-back{ display:block; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.42); opacity:0; pointer-events:none; transition:opacity .2s; } body.pos-sheet-open .pos-sheet-back{ opacity:1; pointer-events:auto; } body.pos-sheet-open{ overflow:hidden; } body.pos-sheet-open .pos-mbar, body.pos-sheet-open .pinto{ display:none; } .pos-sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; z-index:3; background:#fff; margin:0 -12px; padding:16px 12px 10px; border-bottom:1px solid var(--border); } .pos-sheet-grip{ position:absolute; top:6px; left:50%; width:42px; height:4px; margin-left:-21px; border-radius:2px; background:var(--border-strong); } .pos-sheet-head b{ font-size:17px; color:var(--ink); } .pos-sheet-head .mini-chip{ display:inline-flex; align-items:center; gap:4px; } .pos-sheet-head .mini-chip svg{ width:14px; height:14px; } .pos-sheet-who{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; background:var(--bg); font-size:13.5px; } .pos-sheet-who small{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); } .pos-sheet-lbl{ display:flex; align-items:baseline; gap:6px; margin:4px 0 -2px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--red); } .pos-sheet-lbl small{ font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-faint); } .pos-bill .pos-mjump{ display:none; } /* the lines: compact rows (name + price each, qty stepper, total, remove), in a short scroller */ .pos-cart-scroll{ flex:0 0 auto; max-height:34vh; max-height:34dvh; min-height:0; } .pos-cart-table colgroup, .pos-cart-table thead{ display:none; } .pos-cart-table, .pos-cart-table tbody{ display:block; width:100%; } .pos-cart-table tr{ display:grid; grid-template-columns:minmax(0,1fr) auto 62px 30px; align-items:center; gap:6px; padding:7px 6px 7px 10px; border-bottom:1px solid var(--border); } .pos-cart-table tr:last-child{ border-bottom:0; } .pos-cart-table td{ display:block; padding:0 !important; border:0 !important; background:transparent !important; } .pos-cart-table td:nth-child(2), .pos-cart-table td:nth-child(4){ display:none; } .pos-cart-table td.pos-cart-empty{ grid-column:1 / -1; padding:18px 8px !important; } .pos-cart-table td:first-child b{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pos-qty .mini-btn{ width:28px; height:30px; } .pos-qty .pos-cell{ width:38px; height:30px; } .pos-totals{ padding:6px 10px; } .pos-t-row{ font-size:13px; padding:2px 0; } .pos-actions{ position:sticky; bottom:0; z-index:3; margin:0 -12px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--border); box-shadow:0 -4px 12px rgba(0,0,0,.06); } .pos-actions .refresh-btn{ height:44px; padding:0 8px; font-size:13px; } .pos-pay-btn small{ display:none; } /* bottom bar: count + total, and Checkout */ .pos-mbar-sum{ cursor:pointer; } .pos-mbar-pay{ flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; padding:0 16px; } .pos-mbar-pay svg{ width:16px; height:16px; } } .pos-each{ display:none; } @media (max-width:760px){ .pos-each{ display:inline; } } /* Counter: customer suggestions while the name or mobile is keyed (2026-09-28) */ .pos-cust-suggest{ display:flex; flex-direction:column; gap:2px; margin:6px 0 0; padding:4px; background:#fff; border:1px solid var(--border-strong); border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.10); max-height:232px; overflow-y:auto; } .pos-cust-suggest[hidden]{ display:none !important; } .pos-cust-sug{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px 8px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; } .pos-cust-sug:hover, .pos-cust-sug:focus-visible{ background:var(--red-tint); } .pos-cs-av{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; } .pos-cs-main{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; line-height:1.2; } .pos-cs-main b{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pos-cs-main small{ font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; } .pos-cs-pts{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--red); white-space:nowrap; } /* ========================================================================== Phones (2026-09-28): compact page heads (Visibility, Loyalty, Coupons, Rewards) and compact circle cards on Visibility, so several fit on one screen. ========================================================================== */ @media (max-width:760px){ .loy-head{ gap:10px; margin:0 0 10px; padding:12px; border-radius:10px; } .loy-head h2{ font-size:17px; } .loy-head p{ font-size:12.5px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .loy-head > .loy-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; width:100%; } .loy-head .loy-kpi{ min-width:0; padding:6px 7px; border-radius:8px; } .loy-head .loy-kpi b{ font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .loy-head .loy-kpi span{ display:block; font-size:9.5px; line-height:1.2; letter-spacing:.02em; } .sc-head h3{ font-size:16px; } .sc-head p{ font-size:12.5px; margin:0 0 8px; } .sc-grid{ grid-template-columns:1fr; gap:8px; } .sc-card{ gap:4px; padding:10px 12px; border-radius:10px; } .sc-card::after{ right:-30px; top:-30px; width:84px; height:84px; border-width:12px; } .sc-top b{ font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .sc-badge{ font-size:10.5px; padding:2px 8px; } .sc-where{ font-size:11.5px; } .sc-details{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sc-stats{ flex-wrap:nowrap; gap:10px; font-size:11.5px; margin:0; white-space:nowrap; overflow:hidden; } .sc-stats b{ font-size:13.5px; } .sc-cats{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .sc-cats::-webkit-scrollbar{ display:none; } .sc-cats i{ flex:0 0 auto; white-space:nowrap; font-size:11px; padding:1px 7px; } .sc-hook{ font-size:12px; padding:3px 8px; } .sc-actions{ padding-top:4px; flex-wrap:nowrap; } .sc-btn{ padding:6px 13px; font-size:13px; } .sc-link, .sc-state{ font-size:12.5px; white-space:nowrap; } } /* Visibility: Subscribe opens as a popup (2026-09-28) instead of sitting at the bottom of the page */ .sub-grid{ grid-template-columns:1fr; } .sub-grid .rw-card > .sub-open{ margin:0 0 10px; } .sub-flash{ display:block; margin:0 0 10px; padding:9px 12px; border-radius:8px; background:#fff; border:1px solid var(--border); font-weight:700; } .sub-modal .loy-modal-box{ max-width:560px; } .sub-modal .sub-blurb{ margin:0 0 10px; font-size:13.5px; color:var(--ink-muted); } .sub-modal .sub-period{ margin:0 0 10px; } .sub-modal .sub-foot{ position:sticky; bottom:-14px; z-index:1; margin:10px -16px 0; padding:10px 16px 12px; background:var(--bg); border-top:1px solid var(--border); } .sub-modal .sub-foot .sub-total{ margin:0 0 8px; } .sub-modal .sub-foot .crm-add-actions{ margin:0; } body:has(.sub-modal:not([hidden])){ overflow:hidden; } body:has(.sub-modal:not([hidden])) .pinto{ display:none; } @media (max-width:760px){ .sub-modal{ align-items:flex-end; padding:0; } .sub-modal .loy-modal-box{ max-width:none; border-radius:16px 16px 0 0; max-height:92vh; max-height:92dvh; display:flex; flex-direction:column; } .sub-modal .loy-modal-body{ overflow-y:auto; overscroll-behavior:contain; padding:12px 14px 0; } .sub-modal .sub-period{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .sub-modal .sub-period .crm-chip{ justify-content:center; padding:7px 6px; font-size:12.5px; } .sub-modal .sub-circle{ padding:8px 10px; } .sub-modal .sub-foot{ bottom:0; margin:10px -14px 0; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); } .sub-modal .sub-foot .crm-add-actions .refresh-btn{ width:100%; justify-content:center; height:44px; } .sub-modal .loy-hint{ padding-bottom:12px; } } /* Visibility: Benefits and History as popups from beside the circles heading (2026-09-28) */ .sc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .sc-head > div:first-child{ min-width:0; } .sc-info-btns{ display:flex; gap:6px; flex:0 0 auto; margin-top:2px; } .sc-info-btns .mini-chip{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .sc-info-btns .mini-chip svg{ width:14px; height:14px; } .sc-info-btns .mini-chip b{ min-width:18px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font-size:11px; text-align:center; } .sub-modal .sub-list{ margin:0 0 4px; padding-left:18px; } .sub-modal .sub-list li{ margin:0 0 8px; } .sub-modal .sub-foot > .sub-open{ width:100%; justify-content:center; height:42px; } .sub-modal .sub-total small{ font-size:12px; font-weight:600; color:var(--ink-muted); } @media (max-width:760px){ .sc-info-btns{ flex-direction:column; gap:5px; } .sc-info-btns .mini-chip{ justify-content:flex-start; padding:4px 10px; font-size:12px; } } /* Palette menu on phones (2026-09-28): small swatch tiles, three to a row, instead of a long list that covers the whole screen. Headings and notes span the row. */ @media (max-width:760px){ header .mbp-theme-menu:not([hidden]){ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:5px; align-content:start; width:min(360px, calc(100vw - 16px)); min-width:0; padding:8px; max-height:min(70vh, 480px); overflow-y:auto; } header .mbp-theme-menu .mbp-theme-head, header .mbp-theme-menu .mbp-theme-note{ grid-column:1 / -1; margin:0; padding:4px 2px 0; border:0; } header .mbp-theme-menu .mbp-theme-note{ font-size:11px; line-height:1.35; } header .mbp-theme-menu button{ position:relative; flex-direction:column; justify-content:center; gap:4px; min-height:58px; padding:6px 3px 5px; border:1px solid #E3E4E8; border-radius:10px; text-align:center; font-size:10.5px; line-height:1.15; } header .mbp-theme-menu button .mbp-sw{ width:22px; height:22px; } header .mbp-theme-menu button span{ align-items:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } header .mbp-theme-menu button small{ display:none; } header .mbp-theme-menu button[aria-checked="true"]{ border-color:currentColor; box-shadow:inset 0 0 0 1px currentColor; background:#F4F4F6; } header .mbp-theme-menu button[aria-checked="true"]::after{ position:absolute; top:3px; right:5px; margin:0; font-size:11px; } } /* Member bar (2026-09-28): circle picker where the palette was; the palette now sits in the menu. */ header .top-circle{ position:relative; display:inline-flex; } header .top-circle-btn{ display:inline-flex; align-items:center; gap:6px; height:36px; max-width:200px; padding:0 10px; border:1px solid rgba(255,255,255,.35); border-radius:8px; background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; } header .top-circle-btn:hover, header .top-circle-btn[aria-expanded="true"]{ background:rgba(255,255,255,.18); } header .top-circle-btn svg{ width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } header .top-circle-btn .top-circle-caret{ width:14px; height:14px; opacity:.85; } header .top-circle-btn span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } header .top-me-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:20060; display:flex; flex-direction:column; gap:2px; min-width:220px; max-width:calc(100vw - 16px); max-height:min(70vh, 460px); overflow-y:auto; padding:6px; background:#fff; color:#2F3032; border:1px solid #E3E4E8; border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.2); text-align:left; } header .top-me-menu[hidden]{ display:none; } header .top-me-head{ padding:6px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A8B90; } header .top-me-menu button{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:42px; padding:8px 10px; border:0; border-radius:7px; background:transparent; color:#2F3032; font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; } header .top-me-menu button:hover{ background:#F4F4F6; } header .top-me-menu button.is-on{ background:var(--red-tint, rgba(215,40,47,.1)); color:var(--red, #D7282F); } header .top-me-menu button.is-on::after{ content:"✓"; font-weight:800; } header .top-me-menu button small{ margin-left:auto; font-size:11px; font-weight:700; color:#8A8B90; text-transform:uppercase; letter-spacing:.04em; } /* the palette inside the links: a plain icon among them on a wide screen, a labelled tile in the phone menu */ header .top-nav-links .mbp-theme{ display:inline-flex; } @media (max-width:760px){ header .top-circle-btn{ max-width:132px; height:36px; padding:0 8px; font-size:12.5px; gap:5px; } header .top-me-menu{ position:fixed; top:calc(var(--mbp-top-h, 60px) + 6px); left:8px; right:8px; min-width:0; max-width:none; } header .top-nav-links .mbp-theme{ display:flex; } header .top-nav-links .mbp-theme-btn{ width:100%; height:auto; min-height:44px; justify-content:flex-start; gap:9px; padding:10px 12px; border:1px solid var(--border, #E3E4E8); border-radius:8px; background:#fff; color:var(--ink, #2F3032); font:inherit; font-size:14px; font-weight:600; } header .top-nav-links .mbp-theme-btn svg{ width:17px; height:17px; color:var(--red, #D7282F); } header .top-nav-links .mbp-theme-btn::after{ content:"Colour theme"; } } @media (max-width:1400px){ header .top-nav:has(.top-circle) .top-me{ padding:2px; margin-right:2px; } header .top-nav:has(.top-circle) .top-me span{ display:none; } } /* Circle picker as small cards, two to a row (2026-09-28) */ header .top-me-menu{ min-width:340px; } header .top-circle .top-me-menu{ left:0; right:auto; } header .top-me-menu .tc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; padding:2px; } header .top-me-menu .tc-card{ position:relative; display:flex; align-items:flex-start; justify-content:flex-start; gap:8px; min-height:0; padding:8px; border:1px solid #E3E4E8; border-radius:10px; background:#fff; text-align:left; font-weight:400; } header .top-me-menu .tc-card:hover{ border-color:var(--red, #D7282F); background:#fff; } header .top-me-menu .tc-card.is-on{ border-color:var(--red, #D7282F); background:var(--red-tint, rgba(215,40,47,.1)); color:#2F3032; box-shadow:inset 0 0 0 1px var(--red, #D7282F); } header .top-me-menu .tc-card.is-on::after{ content:"✓"; position:absolute; bottom:6px; right:8px; color:var(--red, #D7282F); font-weight:800; font-size:12px; } header .top-me-menu .tc-ini{ flex:0 0 32px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--grey-700, #4A4B4D); color:#fff; font-style:normal; font-size:12px; font-weight:800; letter-spacing:.02em; } header .top-me-menu .tc-card.is-on .tc-ini{ background:var(--red, #D7282F); } header .top-me-menu .tc-body{ display:flex; flex-direction:column; min-width:0; line-height:1.25; } header .top-me-menu .tc-body b{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:2px; } header .top-me-menu .tc-body small{ margin:0; font-size:11px; font-weight:500; color:#8A8B90; text-transform:none; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } header .top-me-menu .tc-body .tc-n{ color:#5F6064; } header .top-me-menu .tc-body .tc-n b{ font-size:11.5px; color:#2F3032; } header .top-me-menu .tc-home{ position:absolute; top:5px; right:6px; padding:0 6px; border-radius:999px; background:#F1F2F4; color:#5F6064; font-style:normal; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; line-height:16px; } header .top-me-menu .tc-card:has(.tc-home) .tc-body > b{ padding-right:40px; } header .top-me-menu .tc-all{ justify-content:center; gap:6px; margin-top:4px; min-height:38px; border:1px dashed #CFD0D5; border-radius:10px; font-size:13px; } header .top-me-menu .tc-all svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; } header .top-me-menu .tc-all small{ margin:0; padding:0 6px; border-radius:999px; background:#F1F2F4; font-size:11px; } header .top-me-menu .tc-all.is-on::after{ content:"✓"; margin-left:4px; } @media (max-width:760px){ header .top-me-menu{ min-width:0; } } /* Roster search suggestions on phones (2026-09-28): two short lines each — name · company, then the category in small text — so several fit above the keyboard; full width in the season banner. */ @media (max-width:760px){ .search-suggest{ max-height:min(300px, 42vh); } :root[data-season] .sh-search .search-suggest{ right:auto; width:calc(100vw - 72px); max-width:none; } .suggest-item{ display:grid; grid-template-columns:28px minmax(0,1fr); grid-template-areas:"av main" "av cat"; column-gap:9px; row-gap:1px; align-items:center; min-height:0; padding:6px 10px; } .suggest-item > :first-child{ grid-area:av; width:28px !important; height:28px !important; min-width:0; font-size:10.5px !important; line-height:28px; } .suggest-main{ grid-area:main; flex-direction:row; align-items:baseline; gap:6px; min-width:0; white-space:nowrap; overflow:hidden; } .suggest-main b{ font-size:13px; flex:0 0 auto; max-width:60%; overflow:hidden; text-overflow:ellipsis; } .suggest-company{ font-size:11.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; } .suggest-company::before{ content:"· "; } .suggest-cat{ grid-area:cat; justify-self:start; max-width:100%; padding:0; background:none; border-radius:0; font-size:11px; font-weight:600; } } /* Phones (2026-09-28): the roster's ☰ menu (admins, visitors) shows the colour / season picks as small swatch tiles, four to a row, like the members' palette — links and notes keep full rows. */ @media (max-width:760px){ .more-panel:not([hidden]){ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:5px; align-content:start; max-height:min(76vh, 560px); overflow-y:auto; } .more-panel > *{ grid-column:1 / -1; } .more-panel > [data-theme-pick], .more-panel > [data-season-pick], .more-panel > button.is-soon{ grid-column:auto; position:relative; flex-direction:column; justify-content:center; gap:4px; min-height:58px; padding:6px 3px 5px; border:1px solid var(--border); border-radius:10px; text-align:center; font-size:10.5px; line-height:1.15; } .more-panel > [data-theme-pick] .mbp-sw, .more-panel > [data-season-pick] .mbp-sw, .more-panel > button.is-soon .mbp-sw{ width:22px; height:22px; } .more-panel > [data-theme-pick] span, .more-panel > [data-season-pick] span, .more-panel > button.is-soon span{ align-items:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .more-panel > [data-theme-pick] small, .more-panel > [data-season-pick] small, .more-panel > button.is-soon small{ display:none; } .more-panel > [aria-checked="true"]{ border-color:currentColor; box-shadow:inset 0 0 0 1px currentColor; } .more-panel > [aria-checked="true"]::after{ position:absolute; top:3px; right:5px; margin:0; font-size:11px; } .more-panel .mbp-theme-note{ font-size:11px; line-height:1.35; } } /* ========================================================================== Public roster on phones (2026-09-28): the member cards start near the top — a shorter season banner, each filter row (season picks, circles, view + sort) as one swipe row — and the cards two to a row, compact. (":root:is(...)" lifts these over the season sheet, which loads after this one.) ========================================================================== */ @media (max-width:560px){ /* banner */ :root:is([data-season],:not([data-season])) body .season-hero{ margin:8px 0 8px; padding:14px 14px 14px; border-radius:14px; gap:8px; } :root:is([data-season],:not([data-season])) body .season-hero h1{ font-size:24px; margin:0 0 4px; } :root:is([data-season],:not([data-season])) body .season-hero p{ font-size:12.5px; margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } :root:is([data-season],:not([data-season])) body .sh-search .search-input{ height:42px; } :root:is([data-season],:not([data-season])) body .sh-go{ padding:0 16px; } /* the three filter rows: one swipe row each */ :root:is([data-season],:not([data-season])) body .season-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:6px; margin:0 -2px 8px; padding:0 2px; } .season-chips::-webkit-scrollbar{ display:none; } :root:is([data-season],:not([data-season])) body .season-chips > *{ flex:0 0 auto; white-space:nowrap; padding-top:5px; padding-bottom:5px; font-size:12.5px; } .controls{ padding:4px 0 6px; margin:-4px 0 8px; } .filters-row{ flex-wrap:nowrap; gap:6px; align-items:center; } .filters-row .team-filters{ flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .filters-row .team-filters::-webkit-scrollbar{ display:none; } .filters-row .team-filters > *{ flex:0 0 auto; white-space:nowrap; } .filters-row .view-switch{ flex:0 0 auto; } .filters-row .view-switch a{ padding:6px 10px; font-size:12.5px; gap:4px; } .results-bar{ flex-wrap:nowrap; gap:6px; margin:4px 0 8px; font-size:12px; } .results-bar .results-count{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .results-bar .results-updated{ display:none !important; } .results-bar select, .results-bar .sort-wrap{ margin-left:auto; max-width:46%; font-size:12.5px; } /* cards: two to a row */ :root:is([data-season],:not([data-season])) .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; grid-auto-rows:auto; } :root:is([data-season],:not([data-season])) .grid > :not(.member-card){ grid-column:1 / -1; } :root:is([data-season],:not([data-season])) .grid > .member-card{ min-height:0; padding:10px; gap:6px; border-radius:12px; border-top-width:3px; } :root:is([data-season],:not([data-season])) .grid > .member-card .avatar-row{ gap:8px; align-items:flex-start; } :root:is([data-season],:not([data-season])) .grid > .member-card .avatar{ width:34px; height:34px; flex:0 0 34px; font-size:12px; box-shadow:0 0 0 2px rgba(255,255,255,.18); } :root:is([data-season],:not([data-season])) .grid > .member-card .avatar-row > div:last-child{ min-width:0; } :root:is([data-season],:not([data-season])) .grid > .member-card .member-name{ font-size:13.5px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } :root:is([data-season],:not([data-season])) .grid > .member-card .member-company{ font-size:11.5px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :root:is([data-season],:not([data-season])) .grid > .member-card .featured-badge{ font-size:9.5px; padding:1px 5px; } :root:is([data-season],:not([data-season])) .grid > .member-card .category-badge{ font-size:10.5px; padding:2px 8px; -webkit-line-clamp:1; line-height:1.35; } :root:is([data-season],:not([data-season])) .grid > .member-card .role-badge{ font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :root:is([data-season],:not([data-season])) .grid > .member-card .role-badge svg{ width:11px; height:11px; } :root:is([data-season],:not([data-season])) .grid > .member-card .member-desc{ display:none; } :root:is([data-season],:not([data-season])) .grid > .member-card .card-actions{ flex-wrap:nowrap; gap:5px; margin-top:auto; } :root:is([data-season],:not([data-season])) .grid > .member-card .card-actions .icon-btn{ flex:1 1 0; justify-content:center; min-height:34px; height:34px; padding:0 6px; } :root:is([data-season],:not([data-season])) .grid > .member-card .card-actions .icon-btn span{ display:none; } :root:is([data-season],:not([data-season])) .grid > .member-card .card-actions .site-btn{ flex:0 0 34px; } } @media (max-width:560px){ .results-bar .sort-wrap{ flex:0 0 auto; max-width:none; margin-left:auto; } .results-bar .sort-wrap select{ width:auto; max-width:none; min-width:124px; font-size:12.5px; } .results-bar .results-count{ flex:1 1 auto; } } /* ========================================================================== Flip book on phones (2026-09-28): each layout keeps its own shape instead of six slim rows. Cards — 2 × 3, centred: avatar, name (2 lines), company, category Photos — 2 × 3, the photo fills the card, name + company over it List — three roomy rows a page (pockethub-flip.js pages it that way) Nothing is clipped: text lines are capped and ellipsised, the page padding is trimmed. ========================================================================== */ @media (max-width:480px){ .my-page .page-inner{ padding:14px 10px 12px; } .team-page .page-title{ font-size:16px; } .team-page .page-eyebrow{ font-size:10.5px; margin-bottom:2px; } .team-page .page-sub{ font-size:11.5px; margin-bottom:8px; } /* cards (the default layout) */ body:not([data-flip-layout="list"]):not([data-flip-layout="photos"]) .flip-member-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(3, minmax(0,1fr)); gap:7px; } body:not([data-flip-layout="list"]):not([data-flip-layout="photos"]) .flip-member-card{ flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:3px; padding:8px 7px; } body:not([data-flip-layout="list"]):not([data-flip-layout="photos"]) .flip-member-card .avatar{ width:44px; height:44px; font-size:14px; margin:0 0 2px; } body:not([data-flip-layout="list"]):not([data-flip-layout="photos"]) .fmc-info{ display:block; width:100%; } body:not([data-flip-layout="list"]):not([data-flip-layout="photos"]) .fmc-name{ -webkit-line-clamp:2; font-size:12.5px; line-height:1.2; } body:not([data-flip-layout="list"]):not([data-flip-layout="photos"]) .fmc-company{ display:block; max-width:100%; font-size:10.5px; margin-top:1px; } body:not([data-flip-layout="list"]):not([data-flip-layout="photos"]) .fmc-category{ display:block; max-width:100%; margin:3px auto 0; font-size:9.5px; padding:1px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* photos */ body[data-flip-layout="photos"] .flip-member-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(3, minmax(0,1fr)); gap:7px; } body[data-flip-layout="photos"] .flip-member-card{ flex-direction:column; justify-content:flex-end; align-items:stretch; padding:0; gap:0; } body[data-flip-layout="photos"] .flip-member-card .avatar{ top:6px; left:6px; width:28px; height:28px; font-size:10px; } body[data-flip-layout="photos"] .fmc-info{ display:block; padding:6px 8px 7px; } body[data-flip-layout="photos"] .fmc-name{ -webkit-line-clamp:1; font-size:12px; line-height:1.2; } body[data-flip-layout="photos"] .fmc-company{ display:block; max-width:100%; font-size:10px; margin-top:1px; } body[data-flip-layout="photos"] .fmc-category{ display:block; max-width:100%; margin-top:3px; font-size:9px; padding:1px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; justify-self:start; width:max-content; } /* list */ body[data-flip-layout="list"] .flip-member-grid{ grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(3, minmax(0,1fr)); gap:8px; } body[data-flip-layout="list"] .flip-member-card{ flex-direction:row; align-items:center; gap:12px; padding:10px 12px; } body[data-flip-layout="list"] .flip-member-card .avatar{ width:58px; height:58px; font-size:18px; } body[data-flip-layout="list"] .fmc-info{ display:block; flex:1; } body[data-flip-layout="list"] .fmc-name{ -webkit-line-clamp:2; font-size:15px; line-height:1.2; } body[data-flip-layout="list"] .fmc-company{ display:block; max-width:100%; font-size:12px; margin-top:2px; } body[data-flip-layout="list"] .fmc-category{ display:inline-block; max-width:100%; margin-top:5px; font-size:10.5px; padding:2px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body[data-flip-layout="list"] .fmc-desc{ display:-webkit-box; -webkit-line-clamp:2; font-size:11.5px; margin-top:4px; } body[data-flip-layout="list"] .fmc-go{ font-size:22px; } } @media (max-width:480px){ body[data-flip-layout="photos"] .flip-member-card > .fmc-info{ margin-top:auto; position:relative; z-index:2; } body[data-flip-layout="photos"] .flip-member-card{ display:flex; } } @media (max-width:480px){ body[data-flip-layout="photos"] .flip-member-card > .fmc-info{ flex:0 0 auto !important; height:auto !important; } } /* Roster header (admins, visitors): the ☰ button says "Menu", like the member bar's. */ header.top .bell-btn.more-trigger:has(.more-trigger-lbl){ width:auto; gap:6px; padding:0 11px; height:36px; font:inherit; font-size:13px; font-weight:600; } header.top .bell-btn.more-trigger:has(.more-trigger-lbl) svg{ width:18px; height:18px; } @media (max-width:360px){ header.top .more-trigger-lbl{ display:none; } header.top .bell-btn.more-trigger:has(.more-trigger-lbl){ padding:0 9px; } } /* Phones: pages with their own small header (book editor, screens, microsite, coupon book, book view) keep every link — compact, in one row that scrolls sideways if it has to. */ @media (max-width:760px){ header.top .top-links:not(.top-nav):not(:has(.more-menu)){ flex:1 1 auto; min-width:0; flex-wrap:nowrap; justify-content:flex-end; overflow-x:auto; scrollbar-width:none; gap:5px; } header.top .top-links:not(.top-nav):not(:has(.more-menu))::-webkit-scrollbar{ display:none; } header.top .top-links:not(.top-nav):not(:has(.more-menu)) > a{ flex:0 0 auto; padding:5px 9px; font-size:12px; white-space:nowrap; } header.top .top-links:not(.top-nav):not(:has(.more-menu)) > .top-user{ display:none; } header.top .top-links:not(.top-nav):not(:has(.more-menu)) > select{ max-width:120px; height:32px; font-size:13px; } } /* Roster Menu for a signed-in Master / Super Admin: the admin panel's screens as tiles. */ .more-admin{ padding:0 0 6px; border-bottom:1px solid var(--border); margin-bottom:4px; } .more-admin .mbp-theme-head{ padding:6px 10px 6px; } .more-admin-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:5px; padding:0 4px; } .more-panel .more-admin-grid a{ display:flex; align-items:center; gap:7px; min-height:40px; padding:7px 9px; border:1px solid var(--border); border-radius:8px; color:var(--ink); background:#fff; font-size:13px; font-weight:600; text-decoration:none; } .more-panel .more-admin-grid a:hover{ background:var(--red-tint); border-color:var(--red); color:var(--red); } .more-panel .more-admin-grid a svg{ width:15px; height:15px; flex:0 0 auto; fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .more-panel .more-admin-grid a span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .more-menu .more-panel:has(.more-admin){ min-width:300px; } @media (max-width:760px){ header.top .more-menu > .more-panel{ position:fixed; left:8px; right:8px; top:calc(var(--top-h, var(--mbp-top-h, 56px)) + 6px); width:auto; min-width:0; max-width:none; z-index:60; } } /* Phones (2026-09-28): who is looking (Master / Super Admin, or a verified visitor) moves from the right of the bar to a small line under the logo, so the bar keeps its room for the buttons. */ @media (max-width:760px){ header.top .top-inner:has(.top-viewer){ position:relative; padding-bottom:20px; } header.top .top-viewer{ position:absolute; left:12px; bottom:4px; max-width:60%; padding:0; border:0; border-radius:0; background:none; opacity:.85; font-size:11px; line-height:14px; gap:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } header.top .top-viewer svg{ width:11px; height:11px; flex:0 0 auto; } } /* Roster menus (2026-09-28): colours and seasons are their own section — one "Colour theme" row that opens the swatch tiles, so the menu itself stays short. */ .more-panel .more-theme{ border-top:1px solid var(--border); margin-top:4px; } .more-panel .more-theme > summary{ display:flex; align-items:center; gap:10px; min-height:40px; padding:9px 10px; list-style:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--ink); border-radius:7px; } .more-panel .more-theme > summary::-webkit-details-marker{ display:none; } .more-panel .more-theme > summary::after{ content:""; margin-left:auto; width:7px; height:7px; border-right:2px solid var(--ink-muted); border-bottom:2px solid var(--ink-muted); transform:rotate(45deg); transition:transform .2s; } .more-panel .more-theme[open] > summary::after{ transform:rotate(-135deg); } .more-panel .more-theme > summary:hover{ background:var(--bg); } .more-panel .more-theme > summary svg{ width:16px; height:16px; fill:none; stroke:var(--red); stroke-width:2; } .more-theme-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:5px; padding:2px 4px 6px; } .more-theme-grid > *{ grid-column:1 / -1; } .more-theme-grid > [data-theme-pick], .more-theme-grid > [data-season-pick], .more-theme-grid > button.is-soon{ grid-column:auto; position:relative; flex-direction:column; justify-content:center; gap:4px; min-height:58px; padding:6px 3px 5px; border:1px solid var(--border); border-radius:10px; text-align:center; font-size:10.5px; line-height:1.15; } .more-theme-grid > * .mbp-sw{ width:22px; height:22px; } .more-theme-grid > [data-theme-pick] span, .more-theme-grid > [data-season-pick] span, .more-theme-grid > button.is-soon span{ align-items:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .more-theme-grid > * small{ display:none; } .more-theme-grid > [aria-checked="true"]{ border-color:currentColor; box-shadow:inset 0 0 0 1px currentColor; } .more-theme-grid > [aria-checked="true"]::after{ position:absolute; top:3px; right:5px; margin:0; font-size:11px; } .more-theme-grid .mbp-theme-head{ padding:6px 4px 2px; border:0 !important; margin:0 !important; } .more-theme-grid .mbp-theme-note{ font-size:11px; line-height:1.35; border:0; padding:4px 4px 0; } /* Member bar on phones (2026-09-28): who is signed in — business · name · code · circle — as a small line under the logo (like the admin bar), instead of an initials bubble among the buttons. */ @media (max-width:760px){ header.top .top-inner:has(.top-me){ position:relative; padding-bottom:20px; } header .top-nav .top-me{ position:absolute; left:12px; bottom:4px; max-width:calc(100% - 24px); margin:0; padding:0 !important; border:0; border-radius:0; background:none; } header .top-nav .top-me i{ display:none; } header .top-nav .top-me span{ display:block !important; min-width:0; font-size:11px; line-height:14px; color:#C9CACE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } header .top-nav .top-me span b{ display:inline; font-size:11px; font-weight:700; color:#fff; } header .top-nav .top-me span small{ display:inline; font-size:11px; } header .top-nav .top-me span small::before{ content:" · "; } } /* Name chip in the member bar opens "My roster profile": a small pen on the avatar */ a.top-me{ color:inherit; text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s; } a.top-me:hover{ background:rgba(255,255,255,0.18); } .top-me i{ position:relative; } .top-me-pen{ position:absolute; right:-5px; bottom:-4px; width:17px; height:17px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .25s; } .top-me-pen svg{ width:10px; height:10px; fill:none; stroke:var(--red); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } a.top-me:hover .top-me-pen{ transform:rotate(-14deg) scale(1.15); }