/* Task Elites Toolbox, operator look (warm dark / yellow). * * NOT the premium member-page palette. This is the OPERATOR-facing app: * warm dark surfaces, single bright yellow accent, plain Anton/Archivo, * big tap targets, sunlight contrast. See TOOLBOX-BUILD-SPEC.md §1. * * Phone-first; sidebar appears at ≥820px. One responsive codebase. */ :root { color-scheme: dark; /* native controls (date pickers, scrollbars) match the theme */ --bg: #0c0b09; --bg2: #15130f; --card: #1c1915; --card2: #211e1a; --line: rgba(245, 241, 232, 0.12); --gold: #f5b800; --gold-d: #d49a00; --accent-ink: #f5b800; /* gold used as TEXT/icons; deepened in light mode for contrast */ --ink-on-accent: #0c0b09; /* TEXT sitting ON a gold/green surface. Theme-STABLE on purpose: the accent surfaces don't flip with the theme, so their ink must not either. Never use var(--bg) as ink on an accent - in light mode --bg turns cream and the label vanishes into the gold (LIGHT-001). */ --text: #f5f1e8; --muted: #bcb4a4; /* lifted for readability (was #a39c8e, read faint) */ --green: #5cc46a; --blue: #5b9bd5; --purple: #b58be0; --red: #e0795b; /* Theme-aware roles (flip in light mode). Subtle surface fills, input fields, and the translucent topbar/bottomnav chrome. */ --fill: rgba(245, 241, 232, 0.05); --fill-2: rgba(245, 241, 232, 0.08); --field: rgba(0, 0, 0, 0.25); --chrome: rgba(12, 11, 9, 0.95); --bottomnav-h: 84px; /* measured actual height (was 72, too tight; mic overlapped on phone) */ --sidebar-w: 240px; --topbar-h: 58px; /* index.html opts into viewport-fit=cover + black-translucent standalone, so installed-to-homescreen iPhones render under the status bar; every rule anchored to the topbar must add this or the chrome sits under the clock (MOB-CSS-004 / MOB-SHELL-002). 0 on desktop and non-notch phones. */ --safe-top: env(safe-area-inset-top, 0px); --radius-lg: 18px; --radius-md: 14px; --radius-sm: 10px; } /* Light mode, warm cream surfaces, dark text, same yellow accent. Toggle lives in Business Information; persisted to localStorage and set on before paint (see index.html) so there's no flash. */ :root[data-theme="light"] { color-scheme: light; --bg: #ece6d9; --bg2: #e4ddcd; --card: #faf6ee; --card2: #f3ecdf; --line: rgba(20, 17, 13, 0.18); --accent-ink: #8a6300; /* deep readable gold for text/icons on light surfaces */ --text: #1a1611; --muted: #574f42; /* darkened for readability on cream (was #6f6757) */ --green: #2e9e48; --blue: #2f6fb0; --purple: #8a55c4; --red: #c14a2a; --fill: rgba(20, 17, 13, 0.045); --fill-2: rgba(20, 17, 13, 0.08); --field: #ffffff; --chrome: rgba(250, 248, 243, 0.92); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Boot splash, covers everything until the auth check finishes (no flash of the toolbox before login). Shown by default; app.js hides it. */ #splash { position: fixed; inset: 0; z-index: 9999; background: #0c0b09; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; } .splash-brand { font-family: 'Anton', Impact, sans-serif; font-size: 30px; letter-spacing: 0.08em; color: #f5f1e8; text-transform: uppercase; } .splash-brand span { color: #f5b800; } .splash-spin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(245, 241, 232, 0.18); border-top-color: #f5b800; animation: splash-spin 0.9s linear infinite; } @keyframes splash-spin { to { transform: rotate(360deg); } } /* Centred login, a full-screen overlay so the app's grid can't squash it into the (hidden) sidebar column. */ .login-wrap { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; } /* The sign-in code box: big spaced digits for what they type. The placeholder must NOT inherit that spacing, or a few words run straight off the end of the field (which is exactly how it shipped first). */ .te-code-input { height: auto; font-size: 28px; letter-spacing: 8px; text-align: center; font-weight: 700; } .te-code-input::placeholder { font-size: 15px; letter-spacing: normal; font-weight: 600; opacity: 0.65; } .login-box { width: 100%; max-width: 420px; } .login-box .adc-input { width: 100%; } html, body { height: 100%; background: var(--bg); color: var(--text); } body { font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.5; font-size: 15px; overflow-x: hidden; overflow-wrap: anywhere; word-break: break-word; /* Crisper text: grayscale AA removes the colour-fringing that reads as "blurry" for light text on the dark surfaces (and is harmless in light mode). Applied once at the root so every screen inherits it. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Belt-and-braces: nothing media can blow out the viewport width. */ img, video, iframe { max-width: 100%; } .display { font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; } button { font-family: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } /* ---------- Layout ---------- */ #app { min-height: 100vh; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; } @media (min-width: 820px) { #app:not(.no-chrome) { grid-template-columns: var(--sidebar-w) 1fr; } } /* ---------- Sidebar (PC) ---------- */ #sidebar { display: none; background: var(--bg2); border-right: 1px solid var(--line); padding: 22px 14px; flex-direction: column; position: sticky; top: 0; height: 100vh; /* Short screens: the menu can be taller than the viewport, let it scroll inside the rail instead of clipping the bottom items. */ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } #sidebar::-webkit-scrollbar { width: 8px; } #sidebar::-webkit-scrollbar-track { background: transparent; } #sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid var(--bg2); } #sidebar:hover::-webkit-scrollbar-thumb { background: var(--muted); } @media (min-width: 820px) { #sidebar { display: flex; } } #sidebar .brand { font-family: 'Anton', sans-serif; font-size: 19px; letter-spacing: 0.1em; padding: 0 8px 22px; text-transform: uppercase; } #sidebar .brand .a { color: var(--accent-ink); } #sidebar .brand small { display: block; font-family: 'Archivo', sans-serif; font-size: 8px; letter-spacing: 0.3em; color: var(--muted); font-weight: 700; margin-top: 3px; } /* Collapsible section boxes (Your business / Coaching / Account / Admin). Each group is a subtle box with a clickable header; clicking the header folds its body away so the rail stays tidy. State persists per group. */ #sidebar .nav-sectiongroup { border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; padding: 4px; background: var(--fill); } #sidebar .nav-sectiongroup:first-of-type { margin-top: 12px; } #sidebar .nav-sectionhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; cursor: pointer; border-radius: 7px; font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); transition: background 0.15s, color 0.15s; user-select: none; } #sidebar .nav-sectionhead:hover { background: var(--fill-2); color: var(--text); } #sidebar .nav-sectioncaret { width: 15px; height: 15px; fill: currentColor; opacity: 0.7; flex: 0 0 auto; transition: transform 0.18s; } /* Open by default; JS adds .collapsed for folded groups (so the common all-open case has no load flash). Collapsed = caret points right. */ #sidebar .nav-sectionbody { display: block; padding-top: 2px; } #sidebar .nav-sectiongroup.collapsed .nav-sectionbody { display: none; } #sidebar .nav-sectiongroup.collapsed .nav-sectioncaret { transform: rotate(-90deg); } /* A folded group that still holds the active route gets a gold hairline so you can see "you're in here" even while it's collapsed. */ #sidebar .nav-sectiongroup.has-active > .nav-sectionhead { color: var(--accent-ink); } #sidebar .navitem { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; margin-bottom: 4px; transition: background 0.15s, color 0.15s; } #sidebar .navitem:hover { background: var(--fill); color: var(--text); } #sidebar .navitem.active { background: rgba(245, 184, 0, 0.12); color: var(--accent-ink); } #sidebar .navitem svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; } #sidebar .navitem .soon { /* Was 8px at 1.83 contrast, which is not "quiet", it is illegible. A label nobody can read is worse than no label: it still costs space and attention. */ margin-left: auto; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--fill-2); color: var(--text); padding: 2px 6px; border-radius: 3px; } /* My Page sub-pages (Landing / Thank You / Disqualification). Always visible so the operator can see (and reach) every page at a glance. */ #sidebar .navcaret { display: none; } /* Sub-items hang off one continuous guide rail and read a notch smaller/quieter than their parent row, so the hierarchy is obvious and every sub (Facebook Ads, Use My Campaign, Your ads) sits identically on the rail. */ #sidebar .navsubs { display: block; margin: 3px 0 6px 20px; border-left: 1.5px solid var(--line); } #sidebar .navsub { position: relative; padding: 7px 10px 7px 15px; border-radius: 0 6px 6px 0; cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; transition: background 0.15s, color 0.15s; } #sidebar a.navsub { display: block; text-decoration: none; color: inherit; } #sidebar .navsub:hover { background: var(--fill); color: var(--text); } #sidebar .navsub.active { color: var(--accent-ink); background: rgba(245, 184, 0, 0.08); } /* Gold marker sits ON the rail for the active sub. */ #sidebar .navsub.active::before { content: ''; position: absolute; left: -1.5px; top: 5px; bottom: 5px; width: 2px; background: var(--accent-ink); } /* Nested expandable (Ads Generator → Videos / Images) */ #sidebar .navsub-exp { display: flex; align-items: center; justify-content: space-between; gap: 6px; } #sidebar .navcaret2 { width: 13px; height: 13px; fill: currentColor; opacity: 0.55; transition: transform 0.15s; flex: 0 0 auto; } #sidebar .navsub-exp.open .navcaret2 { transform: rotate(180deg); } #sidebar .navsub-children { display: none; } /* Clearly a nested dropdown: indented under "Ads Generator", with a guide line, and the items smaller + dimmer than the top-level rows. */ #sidebar .navsub-children.open { display: block; margin: 1px 0 5px 22px; border-left: 1px solid rgba(245, 184, 0, 0.22); padding-left: 2px; } #sidebar .navsub-deep { padding: 6px 10px 6px 14px; font-size: 12px; color: var(--muted); border-left: 0; margin-bottom: 0; border-radius: 6px; } #sidebar .navsub-deep:hover { background: var(--fill); color: var(--text); } #sidebar .navsub-deep.active { color: var(--accent-ink); background: rgba(245, 184, 0, 0.08); } #sidebar .nav-sep { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding: 16px 12px 8px; font-weight: 700; } #sidebar .who { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } #sidebar .who .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--ink-on-accent); display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 14px; } .logout-btn { margin: 10px 8px 4px; padding: 9px 12px; width: calc(100% - 16px); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--fill); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; text-align: center; } .logout-btn:hover { border-color: var(--red); color: var(--red); } .logout-top { border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--fill); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; /* Never wrap "Log out" onto two lines when the bar gets tight (MOB-SHELL-004). */ white-space: nowrap; flex: 0 0 auto; } .logout-top:hover { border-color: var(--red); color: var(--red); } /* ---------- Admin member switcher (topbar pill + popover) ---------- Quiet ghost pill in your own workspace. Gold, named, and with a one tap way out the moment an admin is working inside a member, because the old acting-as was invisible and one way. */ .opsw-wrap { position: relative; display: flex; align-items: center; margin-left: 10px; } .opsw-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--fill); color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; padding: 7px 11px; max-width: 210px; } .opsw-btn:hover { border-color: var(--gold); color: var(--text); } .opsw-btn svg { width: 14px; height: 14px; flex: 0 0 auto; fill: currentColor; } .opsw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Acting as someone. --ink-on-accent, never --bg: the gold surface does not flip with the theme so its ink must not either (LIGHT-001). */ .opsw-btn.acting { background: var(--gold); border-color: var(--gold); color: var(--ink-on-accent); } .opsw-btn.acting:hover { background: var(--gold-d); border-color: var(--gold-d); color: var(--ink-on-accent); } .opsw-exit { margin-left: 6px; padding: 7px 10px; cursor: pointer; border: 1px solid var(--gold); border-radius: 8px; background: var(--fill); color: var(--accent-ink); font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1; } .opsw-exit:hover { background: var(--gold); color: var(--ink-on-accent); } /* Whole screen tell, so a forgotten acting-as session is impossible to miss. */ #topbar.acting-as { box-shadow: inset 0 3px 0 var(--gold); } .opsw-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 340px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); padding: 10px; display: flex; flex-direction: column; gap: 8px; } /* An element-level display beats the UA sheet's [hidden] rule, so without this the panel never actually closes and an empty box hangs under the topbar. */ .opsw-pop[hidden] { display: none; } .opsw-search { width: 100%; padding: 9px 11px; font-family: inherit; font-size: 14px; background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); } .opsw-search:focus { outline: none; border-color: var(--gold); } .opsw-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; } .opsw-head { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 10px 4px 5px; } .opsw-note { color: var(--muted); font-size: 13px; padding: 10px 4px; } .opsw-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); color: var(--text); font-family: inherit; padding: 9px 10px; cursor: pointer; } .opsw-row:hover { background: var(--fill-2); } .opsw-row.on { background: var(--fill); cursor: default; } .opsw-home { border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .opsw-home .opsw-row-name { color: var(--accent-ink); } .opsw-row-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .opsw-row-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opsw-row-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opsw-row-on { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--accent-ink); white-space: nowrap; } .opsw-row-warn { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--red); white-space: nowrap; } /* Phone: the topbar is tight, so the pill keeps the name and drops to an icon only when there is no name to show. The panel spans the screen instead of hanging off the right edge. */ @media (max-width: 819px) { .opsw-wrap { margin-left: 6px; } .opsw-btn { max-width: 132px; padding: 7px 9px; } .opsw-btn:not(.acting) .opsw-label { display: none; } .opsw-pop { position: fixed; top: calc(var(--topbar-h) + var(--safe-top) + 8px); left: 12px; right: 12px; width: auto; } .opsw-list { max-height: 60vh; } /* Admins carry one extra control up here, and the longest title (BUSINESS INFORMATION) was already wrapping to two lines without it. Truncate rather than wrap, and only when the switcher is actually present. */ #topbar.has-switcher .title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ---------- Topbar ---------- */ #topbar { height: calc(var(--topbar-h) + var(--safe-top)); display: flex; align-items: center; justify-content: space-between; padding: var(--safe-top) 18px 0; border-bottom: 1px solid var(--line); background: var(--chrome); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } #topbar .title { font-family: 'Anton', sans-serif; font-size: 18px; text-transform: uppercase; margin-right: auto; min-width: 0; } @media (min-width: 820px) { #topbar .title { font-size: 20px; } } /* group the right-hand top-bar buttons (voice + logout) together */ #topbar .voice-toggle { margin-left: 12px; } #topbar .logout-top { margin-left: 10px; } /* My Page = builder mode: the controls live in the top header (HighLevel-style), one clean strip with Publish pinned far-right. Voice + the duplicate top Log out hide (Log out stays in the sidebar). */ #topbar-build { display: none; } #topbar.building { flex-wrap: wrap; height: auto; min-height: calc(var(--topbar-h) + var(--safe-top)); row-gap: 6px; } #topbar.building .title { margin-right: 14px; } #topbar.building .voice-toggle, #topbar.building .logout-top { display: none; } #topbar.building #topbar-build { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px 10px; flex-wrap: wrap; } .tb-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .tb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } /* Subtle URL line under the header, domain + live edit hint (HighLevel feel). */ .mpv2-urlstrip { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 7px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } #topbar .voice-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; border: 1px solid var(--gold); padding: 7px 12px; border-radius: 6px; background: transparent; /* Never wrap "Voice" / the engine pill internally under flex pressure (MOB-SHELL-003; the phone bar hides the text anyway, see the 819 band). */ white-space: nowrap; flex: 0 0 auto; } #topbar .voice-toggle svg { width: 14px; height: 14px; fill: var(--accent-ink); } #topbar .voice-toggle.off { color: var(--muted); border-color: var(--muted); } #topbar .voice-toggle.off svg { fill: var(--muted); } .voice-pill { font-family: 'Anton', sans-serif; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--fill-2); color: var(--muted); padding: 3px 7px; border-radius: 4px; margin-left: 6px; } .voice-pill.premium { background: rgba(245, 184, 0, 0.18); color: var(--accent-ink); } /* ---------- Main + view ---------- */ #main { display: flex; flex-direction: column; min-height: 100vh; /* A flex item defaults to min-width: auto, which means "never shrink below my content's min-content width". One wide child inside therefore pushes the WHOLE app shell wider than the phone, and the page scrolls sideways with half of every card unreachable (Command Center measured 734px in a 390px viewport). min-width: 0 lets the shell stay the width of the screen and makes the child do the wrapping instead. */ min-width: 0; /* leave room for the fixed bottom nav on phones */ padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); } @media (min-width: 820px) { #main { padding-bottom: 0; } } #view { flex: 1; min-width: 0; padding: 18px; max-width: 1180px; width: 100%; margin: 0 auto; } @media (min-width: 820px) { #view { padding: 24px 28px; } } /* ---------- Monthly membership dues grace warning ---------- */ .membership-dues-banner { display: flex; align-items: center; gap: 16px; padding: 13px 18px; background: #5b2119; border-bottom: 1px solid rgba(255, 255, 255, 0.18); color: #fff7ed; } .membership-dues-banner[hidden] { display: none; } .membership-dues-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.4; } .membership-dues-copy strong { font-size: 14px; } .membership-dues-copy small { color: rgba(255, 247, 237, 0.78); font-size: 12.5px; } .membership-dues-actions { display: flex; flex: 0 0 auto; gap: 8px; } .membership-dues-pay { border-radius: 8px; background: var(--gold); color: var(--ink-on-accent); padding: 10px 16px; font-size: 13.5px; font-weight: 800; text-decoration: none; } .membership-dues-pay:hover { background: var(--gold-d); } .membership-dues-card { border: 1px solid rgba(255, 247, 237, 0.7); border-radius: 8px; background: transparent; color: #fff7ed; padding: 10px 16px; font-size: 13.5px; font-weight: 800; cursor: pointer; } .membership-dues-card:hover { background: rgba(255, 255, 255, 0.1); } .membership-dues-card:disabled { opacity: 0.65; cursor: default; } .membership-dues-admin-note { flex: 0 0 220px; color: #fff7ed; font-size: 12.5px; font-weight: 700; text-align: right; } @media (max-width: 819px) { .membership-dues-banner { align-items: flex-start; flex-direction: column; gap: 10px; } .membership-dues-actions { width: 100%; } .membership-dues-pay, .membership-dues-card { flex: 1 1 0; text-align: center; } .membership-dues-admin-note { flex: 0 0 auto; text-align: left; } } /* ---------- Bottom nav (phone) ---------- */ #bottomnav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--chrome); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 2px calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 9; backdrop-filter: blur(8px); } @media (min-width: 820px) { #bottomnav { display: none; } } /* Both the route links and the More button share the cell styling. */ #bottomnav a, #bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; color: var(--muted); font-size: 10.5px; font-weight: 700; padding: 4px 1px; text-transform: uppercase; letter-spacing: 0.01em; text-align: center; min-width: 0; background: none; border: none; cursor: pointer; font-family: inherit; } #bottomnav a span, #bottomnav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bottomnav a svg, #bottomnav button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; } #bottomnav a.active, #bottomnav button.active { color: var(--accent-ink); } /* ---------- More sheet (phone overflow menu) ---------- */ .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 14px; } .more-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 86px; padding: 14px 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; color: var(--text); font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; font-family: inherit; } .more-item span { line-height: 1.2; } .more-item svg { width: 24px; height: 24px; fill: currentColor; color: var(--accent-ink); } .more-item:active { background: var(--bg2); } .more-done { width: 100%; padding: 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; } /* Log out row above Close: the phone topbar no longer carries one. Quiet by default, red on press like the sidebar's. */ .more-logout { width: 100%; padding: 14px; border-radius: 12px; margin-bottom: 8px; background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; } .more-logout:active { border-color: var(--red); color: var(--red); } /* ---------- Desktop-first hint (phone only) ---------- */ #desktop-hint { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--bg2); border-bottom: 1px solid var(--line); border-left: 3px solid var(--accent-ink); color: var(--muted); font-size: 13px; font-weight: 600; } #desktop-hint svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent-ink); } #desktop-hint #desktop-hint-text { flex: 1 1 auto; min-width: 0; } /* One-tap retire (MOB-SHELL-016); a real 44px thumb target. */ #desktop-hint-x { flex: 0 0 auto; background: none; border: 0; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 14px 12px; margin: -14px -6px; } #desktop-hint[hidden] { display: none; } @media (min-width: 820px) { #desktop-hint { display: none !important; } } /* ---------- Greeting ---------- */ .greet { margin-bottom: 18px; } .greet h1 { font-family: 'Anton', sans-serif; font-size: 28px; text-transform: uppercase; line-height: 1; margin-bottom: 6px; } .greet h1 .a { color: var(--accent-ink); } .greet p { color: var(--muted); font-size: 15px; } @media (min-width: 820px) { .greet h1 { font-size: 34px; } } /* ---------- Daily value reminder (the "good decision" hero) ---------- */ .valuehero { background: linear-gradient(135deg, rgba(245,184,0,0.10), rgba(245,184,0,0.02)); border: 1px solid rgba(245,184,0,0.28); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; } .vh-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 7px; } .vh-line { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--text); } @media (min-width: 820px) { .vh-line { font-size: 23px; } } .vproof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; } .vchip { font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--fill); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px 5px 24px; position: relative; } .vchip::before { content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 5px; margin-top: -4px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); } /* ---------- Home hub: simple launcher to every part of the Toolbox ---------- */ .hub { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; } @media (min-width: 560px) { .hub { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .hub { grid-template-columns: 1fr 1fr 1fr; } } .tile { display: flex; align-items: center; gap: 13px; padding: 15px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--text); transition: border-color .15s, background .15s, transform .1s; } .tile:hover { border-color: var(--gold); background: var(--card2); } .tile:active { transform: scale(0.99); } .tile-ic { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--fill); color: var(--accent-ink); } .tile-ic svg { width: 22px; height: 22px; fill: currentColor; } .tile-tx { min-width: 0; } .tile-t { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; } .tile-d { color: var(--muted); font-size: 13px; margin-top: 2px; } .tile-soon { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-on-accent); background: var(--gold); padding: 1px 6px; border-radius: 999px; } .tile-admin .tile-ic { color: var(--purple); } /* ---------- Home SUMMARY CARDS: one per area, real current state ---------- The home dashboard summarises what's happening across every area (not a grid of links). Each card is tappable -> its route. Reuses the tile tokens. */ .home-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; } @media (min-width: 720px) { .home-cards { grid-template-columns: 1fr 1fr; } } .sumcard { display: flex; align-items: flex-start; gap: 13px; padding: 15px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--text); transition: border-color .15s, background .15s, transform .1s; } .sumcard:hover { border-color: var(--gold); background: var(--card2); } .sumcard:active { transform: scale(0.99); } .sumcard-ic { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--fill); color: var(--accent-ink); } .sumcard-ic svg { width: 22px; height: 22px; fill: currentColor; } .sumcard-tx { min-width: 0; } .sumcard-t { font-weight: 700; font-size: 15px; } .sumcard-d { color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.4; } .sumcard.tile-admin .sumcard-ic { color: var(--purple); } /* ---------- Home: real metrics strip (Leads in · Work won · ROI) ---------- */ .home-metrics { /* Four metrics (Leads, Work won, Ad spend, ROI) sit in ONE balanced row on desktop, no orphaned fourth card on its own line. Drops to a clean 2x2 on narrower screens. */ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 12px; } @media (max-width: 820px) { .home-metrics { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .home-metrics { gap: 8px; } } .metric { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 14px; min-width: 0; } .metric-v { font-family: 'Anton', sans-serif; font-size: 26px; line-height: 1.05; color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 460px) { .metric-v { font-size: 20px; } } .metric-v .metric-sub { font-size: 14px; color: var(--text); font-family: inherit; } @media (max-width: 460px) { .metric-v .metric-sub { font-size: 12px; } } .metric-l { color: var(--muted); font-size: 12px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; } /* ROI prompt when no spend entered, honest, never a fake number. */ .metric-v.metric-prompt { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700; color: var(--muted); white-space: normal; line-height: 1.25; } .spend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--fill); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 16px; } .spend-lbl { font-size: 13px; font-weight: 700; color: var(--text); } .spend-input { flex: 1 1 160px; min-width: 120px; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--text); } .spend-input:focus { outline: none; border-color: var(--accent-ink); } .spend-hint { flex: 1 1 100%; font-size: 12px; color: var(--muted); } /* ---------- Home: TODAY (real bookings from the calendar) ---------- */ .today-plan { margin-bottom: 18px; } .today-empty { color: var(--muted); font-size: 14px; margin: 4px 0 0; } .today-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 8px; } .today-time { flex: 0 0 auto; font-family: 'Anton', sans-serif; font-size: 16px; color: var(--accent-ink); min-width: 64px; } .today-tx { min-width: 0; } .today-name { font-weight: 700; font-size: 15px; } .today-job { color: var(--muted); font-size: 13px; margin-top: 2px; } /* ---------- Home: the ACTION dashboard (NEW LEAD banner + Do these today) ---- */ .newlead-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; background: #14361f; border: 1px solid #2f7d4f; color: #d8f5e0; border-radius: var(--radius-md); padding: 12px 16px; margin: 4px 0 18px; } .newlead-banner .nlb-tag { font-family: 'Anton', sans-serif; font-size: 14px; letter-spacing: .04em; color: #6cf09a; } .newlead-banner .nlb-tx { font-weight: 700; font-size: 15px; min-width: 0; } /* ---------- Home: MILESTONE celebration (loud dark + gold, fires once) ------ */ .milestone-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #14110d 0%, #211a0c 60%, #2c2206 100%); border: 1px solid var(--gold); border-radius: var(--radius-md); padding: 16px 18px; margin: 6px 0 16px; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(245, 184, 0, 0.15), 0 10px 30px rgba(0, 0, 0, 0.35); animation: ms-pop 480ms cubic-bezier(.18,.89,.32,1.28) both; } /* A sweep of gold light across the banner on entry. */ .milestone-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(245, 184, 0, 0.18) 50%, transparent 70%); transform: translateX(-120%); animation: ms-sheen 1100ms ease-out 260ms both; pointer-events: none; } .milestone-banner .ms-spark { font-size: 26px; line-height: 1; flex: 0 0 auto; animation: ms-spin 1400ms ease-in-out 200ms both; } .milestone-banner .ms-tx { min-width: 0; position: relative; z-index: 1; } .milestone-banner .ms-head { font-family: 'Anton', sans-serif; font-size: 20px; letter-spacing: .02em; color: var(--accent-ink); line-height: 1.1; } .milestone-banner .ms-sub { color: #f0e6cf; font-size: 13px; margin-top: 4px; line-height: 1.4; font-weight: 600; } @media (max-width: 460px) { .milestone-banner .ms-head { font-size: 17px; } } @keyframes ms-pop { 0% { opacity: 0; transform: translateY(-8px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ms-sheen { to { transform: translateX(120%); } } @keyframes ms-spin { 0% { transform: rotate(-18deg) scale(.6); opacity: 0; } 60% { transform: rotate(12deg) scale(1.2); opacity: 1; } 100% { transform: rotate(0) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .milestone-banner, .milestone-banner::after, .milestone-banner .ms-spark { animation: none; } .milestone-banner::after { display: none; } } /* ---------- Home: ALIVE NUMBERS, gold "● LIVE" pulse on the ad-spend tile -- */ .metric-v .live-dot { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 8px; font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--accent-ink); } .metric-v .live-dot .live-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(245, 184, 0, 0.6); animation: live-pulse 1600ms ease-out infinite; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 184, 0, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(245, 184, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 184, 0, 0); } } @media (prefers-reduced-motion: reduce) { .metric-v .live-dot .live-pip { animation: none; } } /* ---------- Home: THE MOAT INSIGHT (one collective lesson, hidden on empty) - */ .moat-card { background: var(--card2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-md); padding: 12px 16px; margin: 0 0 12px; } .moat-card .moat-tag { display: block; font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--accent-ink); margin-bottom: 4px; } .moat-card .moat-tx { color: var(--text); font-size: 14px; line-height: 1.45; font-weight: 600; } /* ---------- Home: YOU VS THE NETWORK (cached rank, hidden/early on small N) -- */ .network-card { display: flex; align-items: baseline; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 16px; margin: 0 0 16px; } .network-card .net-rank { font-family: 'Anton', sans-serif; font-size: 22px; color: var(--accent-ink); line-height: 1; } .network-card .net-tx { color: var(--muted); font-size: 13px; font-weight: 600; } .network-card.net-early { padding: 10px 16px; } .network-card.net-early .net-tx { color: var(--muted); font-style: italic; } /* Home: TOP-10 BADGE, the tap-through hook to the member Leaderboard. Glows gold; only renders when ranked top 10 this month (built in renderHome). */ .network-card.top10-badge { text-decoration: none; cursor: pointer; align-items: center; border-color: rgba(245, 184, 0, 0.45); background: linear-gradient(180deg, rgba(245, 184, 0, 0.10), var(--card)); box-shadow: 0 0 0 1px rgba(245, 184, 0, 0.10), 0 6px 18px rgba(245, 184, 0, 0.10); transition: transform .12s ease, box-shadow .12s ease; } .network-card.top10-badge:hover { transform: translateY(-1px); } .network-card.top10-badge .net-tx { color: var(--text); } .network-card.top10-badge .net-go { margin-left: auto; font-size: 22px; color: var(--accent-ink); line-height: 1; font-weight: 700; } /* ---------- Home: RACE TO THE TOP (always-shown, motivating leaderboard card) - Mini podium (top 3) + the operator's own position + a positive climb line + a link to the full board. Mirrors the moat/network card look (dark card, gold tag/link). Mobile-friendly: podium wraps, the you-row stacks. */ .race-card { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-md); padding: 12px 16px; margin: 0 0 16px; } .race-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .race-tag { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--accent-ink); } .race-link { font-size: 12px; font-weight: 800; color: var(--accent-ink); text-decoration: none; white-space: nowrap; } .race-link:hover { text-decoration: underline; } .race-podium { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .race-pod { display: flex; align-items: center; gap: 6px; min-width: 0; background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); padding: 6px 10px; flex: 1 1 auto; } .race-pod-1 { border-color: rgba(245, 184, 0, 0.45); background: linear-gradient(180deg, rgba(245, 184, 0, 0.10), var(--card2)); } .race-medal { font-size: 16px; line-height: 1; } .race-name { color: var(--text); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .race-you { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .race-pos { font-family: 'Anton', sans-serif; font-size: 18px; color: var(--accent-ink); line-height: 1; white-space: nowrap; } .race-climb { color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.4; } /* ---------- Member Leaderboard (gamified, per-season) ------------------------ */ .lb-head { margin: 4px 0 14px; } .lb-title { font-family: 'Anton', sans-serif; font-size: 26px; margin: 0 0 2px; color: var(--text); } .lb-sub { color: var(--muted); font-size: 13px; font-weight: 600; margin: 0; } /* Admin-only sample-preview toggle + its loud banner. */ .lb-demo-toggle { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--fill); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; cursor: pointer; margin-bottom: 10px; } .lb-demo-toggle.on { color: var(--ink-on-accent); background: var(--gold); border-color: var(--gold); } .lb-sample-banner { font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-on-accent); background: repeating-linear-gradient(45deg, var(--gold), var(--gold) 14px, var(--gold-d) 14px, var(--gold-d) 28px); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 12px; text-align: center; } .lb-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; background: var(--fill); border: 1px solid var(--line); border-radius: var(--radius-md); } .lb-tab { border: 0; background: transparent; color: var(--muted); font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 800; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; min-height: 40px; } .lb-tab.active { background: var(--gold); color: #14110d; } /* The metric row (Most leads / Most work won / Best ROI) sits above the season row. When ROI has no real data yet it renders the shared 'syncing' empty state below rather than a fabricated rank. */ .lb-metric-tabs { margin-bottom: 10px; } .lb-you-banner { margin-bottom: 16px; } .lb-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .lb-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; min-height: 52px; } .lb-row .lb-rank { font-family: 'Anton', sans-serif; font-size: 18px; color: var(--muted); min-width: 38px; text-align: center; line-height: 1; } .lb-row .lb-rank-medal { font-size: 22px; } .lb-row .lb-name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-row .lb-won { font-family: 'Anton', sans-serif; font-size: 17px; color: var(--accent-ink); } .lb-row .lb-youtag { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #14110d; background: var(--gold); border-radius: 999px; padding: 3px 9px; } /* Top 10 glow. */ .lb-row.lb-top10 { border-color: rgba(245, 184, 0, 0.28); box-shadow: 0 0 0 1px rgba(245, 184, 0, 0.06); } /* Medals: top 3 lift further off the board. */ .lb-row.lb-medal { border-color: rgba(245, 184, 0, 0.45); } .lb-row.lb-medal-1 { background: linear-gradient(180deg, rgba(245, 184, 0, 0.14), var(--card)); } .lb-row.lb-medal-2 { background: linear-gradient(180deg, rgba(220, 220, 220, 0.10), var(--card)); } .lb-row.lb-medal-3 { background: linear-gradient(180deg, rgba(168, 67, 26, 0.12), var(--card)); } /* The viewer's own row, highlighted, the only $ on screen. */ .lb-row.lb-you-row { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(245, 184, 0, 0.30), 0 6px 18px rgba(245, 184, 0, 0.10); } .lb-row.lb-you-row .lb-rank { color: var(--accent-ink); } .lb-empty { text-align: center; padding: 36px 18px; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-lg); } .lb-empty-icon { font-size: 34px; margin-bottom: 10px; } .lb-empty-tx { color: var(--text); font-size: 16px; font-weight: 800; margin-bottom: 6px; } .lb-empty-sub { color: var(--muted); font-size: 13px; } .lb-foot { color: var(--muted); font-size: 12px; text-align: center; margin: 2px 0 0; } .actions-empty { color: var(--muted); font-size: 14px; margin: 4px 0 18px; } .action-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .action-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; border-left: 3px solid var(--line); } .action-card.act-new_lead { border-left-color: #2f7d4f; } .action-card.act-quote_quiet { border-left-color: var(--rust, #a8431a); } .action-card.act-booking { border-left-color: var(--accent-ink); } .action-card.act-ads_nudge { border-left-color: var(--gold); } .act-title { font-weight: 800; font-size: 16px; } .act-meta { color: var(--muted); font-size: 13px; margin-top: 3px; } .act-coach { font-size: 13px; color: var(--text); opacity: .85; margin-top: 6px; font-style: italic; } .act-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .act-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; text-decoration: none; box-sizing: border-box; } .act-btn:active { transform: scale(0.97); } .act-btn.act-call { background: var(--gold); color: var(--ink-on-accent); border-color: var(--gold); } .act-btn.act-call:hover { background: var(--gold-d); } .act-btn.act-ads { background: var(--gold); color: var(--ink-on-accent); border-color: var(--gold); } .act-btn.act-text:hover, .act-btn.act-book:hover { border-color: var(--accent-ink); } @media (max-width: 460px) { .act-btns { gap: 8px; } .act-btn { flex: 1 1 auto; } } /* ---------- The big talk button ---------- */ .talkbig { margin: 6px 0 18px; background: linear-gradient(180deg, #23201b, #161410); border: 1px solid var(--line); border-radius: 22px; padding: 24px 20px; text-align: center; position: relative; overflow: hidden; cursor: pointer; user-select: none; } .talkbig:active { transform: scale(0.985); } .talkbig .ring { width: 92px; height: 92px; border-radius: 50%; background: var(--gold); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 40px rgba(245, 184, 0, 0.35); position: relative; } .talkbig .ring::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; animation: ring 2.6s ease-out infinite; } .talkbig.recording .ring::after { animation-duration: 0.9s; opacity: 1; } @keyframes ring { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } } .talkbig .ring svg { width: 40px; height: 40px; fill: var(--bg); } .talkbig .t { font-family: 'Anton', sans-serif; font-size: 22px; text-transform: uppercase; line-height: 1.05; } .talkbig .s { color: var(--muted); font-size: 14px; margin-top: 7px; } .talkbig .egs { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 14px; } .talkbig .eg { background: var(--fill); border: 1px solid var(--line); border-radius: 20px; padding: 7px 12px; font-size: 12.5px; color: var(--text); } .talkbig.recording { border-color: var(--accent-ink); } .talkbig .heard { margin-top: 12px; font-size: 13px; color: var(--text); background: rgba(245, 184, 0, 0.08); border: 1px solid rgba(245, 184, 0, 0.3); border-radius: 10px; padding: 8px 12px; text-align: left; display: none; } .talkbig.has-heard .heard { display: block; } /* ---------- Win strip ---------- */ .win { background: linear-gradient(135deg, rgba(92, 196, 106, 0.22), rgba(245, 184, 0, 0.12)); border: 1px solid rgba(92, 196, 106, 0.4); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .win .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .win .ic svg { width: 22px; height: 22px; fill: #fff; } .win .t { font-family: 'Anton', sans-serif; font-size: 17px; text-transform: uppercase; line-height: 1; } .win .s { font-size: 13.5px; color: var(--text); margin-top: 4px; } /* ---------- Section labels ---------- */ .section-label { font-family: 'Anton', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 6px 0 12px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 800; color: var(--accent-ink); margin-bottom: 14px; } .eyebrow .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ---------- Action cards ("Do these today") ---------- */ .action { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; } .action .top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .action .av { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 17px; } .action .av.lead { background: rgba(92, 196, 106, 0.18); color: var(--green); } .action .av.quote { background: rgba(245, 184, 0, 0.16); color: var(--accent-ink); } .action .av.ad { background: rgba(91, 155, 213, 0.16); color: var(--blue); } .action .ti { flex: 1; min-width: 0; } .action .ti .n { font-size: 16px; font-weight: 700; } .action .ti .d { font-size: 13.5px; color: var(--muted); margin-top: 1px; } .ai-said { background: rgba(245, 184, 0, 0.07); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 11px 14px; font-size: 14px; color: var(--text); margin-bottom: 12px; line-height: 1.5; } .ai-said b { color: var(--accent-ink); } .big-btn { width: 100%; background: var(--gold); color: var(--ink-on-accent); border: 0; padding: 15px; border-radius: 12px; font-family: 'Anton', sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; justify-content: center; gap: 9px; transition: transform 0.15s, background 0.15s; } .big-btn:hover { background: var(--gold-d); } .big-btn:active { transform: scale(0.98); } .big-btn svg { width: 19px; height: 19px; fill: var(--bg); } .row2 { display: flex; gap: 8px; margin-top: 8px; } .row2 button { flex: 1; background: transparent; border: 1.5px solid var(--line); color: var(--text); padding: 12px; border-radius: 12px; font-size: 13.5px; font-weight: 700; } .row2 button:hover { border-color: var(--accent-ink); color: var(--accent-ink); } /* ---------- Money line ---------- */ .moneyline { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; text-align: center; margin-bottom: 18px; } .moneyline .big { font-family: 'Anton', sans-serif; font-size: 28px; color: var(--green); line-height: 1; } .moneyline .lbl { font-size: 13.5px; color: var(--muted); margin-top: 8px; } /* ---------- Leads board ---------- */ .board { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 600px) { .board { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .board { grid-template-columns: repeat(5, 1fr); } } .col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; min-height: 180px; } .col h4 { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; } .col h4 .cnt { color: var(--accent-ink); } .leadcard { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 6px; padding: 11px; margin-bottom: 8px; position: relative; } .leadcard .lead-del { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0; line-height: 18px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; opacity: 0; transition: opacity 0.12s; } .leadcard:hover .lead-del { opacity: 0.7; } .leadcard .lead-del:hover { opacity: 1; color: var(--red); border-color: var(--red); } .leadcard .lead-del.armed { opacity: 1; width: auto; padding: 0 7px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #fff; background: var(--red); border-color: var(--red); } .leadcard.stage-won { border-left-color: var(--green); } .leadcard.stage-lost { border-left-color: var(--red); opacity: 0.7; } /* Whole card is a tap target that opens the lead detail. */ .leadcard.clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s; } .leadcard.clickable:hover { border-color: var(--accent-ink); box-shadow: 0 2px 10px rgba(0,0,0,0.14); } .leadcard.clickable:active { transform: translateY(1px); } /* Lead detail sheet (tap a pipeline card): number, enquiry, notes, actions. */ .lead-detail .ld-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; } .lead-detail .ld-val { font-family: 'Anton', sans-serif; font-size: 15px; color: var(--green); } .lead-detail .ld-booked { font-size: 11px; font-weight: 700; color: var(--accent-ink); } .lead-detail .ld-actions { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .lead-detail .ld-act { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--fill); color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; } .lead-detail .ld-act:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .lead-detail .ld-ic { display: inline-flex; } .lead-detail .ld-ic svg { width: 15px; height: 15px; fill: currentColor; } .lead-detail .ld-row { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .lead-detail .ld-k { flex: 0 0 72px; color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; } .lead-detail .ld-v { flex: 1 1 auto; color: var(--text); word-break: break-word; } .lead-detail .ld-empty { color: var(--muted); font-style: italic; } .lead-detail .ld-notes { background: var(--fill); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--text); white-space: pre-wrap; margin: 6px 0 8px; } .lead-detail .ld-notes.empty { color: var(--muted); font-style: italic; } .lead-detail .ld-noteinput { width: 100%; box-sizing: border-box; } .leadcard strong { display: block; font-size: 13.5px; margin-bottom: 3px; } .leadcard .meta { font-size: 11.5px; color: var(--muted); } .leadcard .val { display: inline-block; margin-top: 6px; font-family: 'Anton', sans-serif; font-size: 13.5px; color: var(--green); } .leadcard .book { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); border-top: 1px solid var(--line); padding-top: 8px; cursor: pointer; } .leadcard .book svg { width: 12px; height: 12px; fill: var(--accent-ink); } .leadcard .booked { margin-top: 8px; font-size: 10px; color: var(--green); border-top: 1px solid var(--line); padding-top: 8px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; } .leadcard .stage-move { margin-top: 8px; width: 100%; font-size: 11px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 5px 6px; cursor: pointer; } .leadcard .stage-move:hover { border-color: var(--gold); } .leadcard[draggable="true"] { cursor: grab; } .leadcard.dragging { opacity: 0.45; cursor: grabbing; } .col.drag-over { background: rgba(245, 184, 0, 0.08); border-radius: 8px; outline: 2px dashed var(--gold); outline-offset: -2px; } .btn-newlead { margin: 0 0 14px; padding: 9px 16px; background: var(--gold); color: #14110d; border: 0; border-radius: 7px; font-weight: 800; font-size: 13px; cursor: pointer; } .btn-newlead:hover { filter: brightness(1.05); } .newlead-field { margin-bottom: 10px; } .newlead-field .fieldlabel { display: block; margin-bottom: 4px; } /* Contacts page (GHL-style table) */ .contacts-search { width: 100%; max-width: 360px; margin: 0 0 16px; padding: 10px 14px; font-size: 14px; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; } .contacts-search:focus { outline: none; border-color: var(--gold); } .contacts-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; } .contacts-table { width: 100%; border-collapse: collapse; font-size: 13px; } .contacts-table th { text-align: left; padding: 11px 14px; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 800; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--bg2); } .contacts-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .lb-table th.lb-num, .lb-table td.lb-num { text-align: right; white-space: nowrap; } .contact-row:hover td { background: var(--bg2); } .contact-row:last-child td { border-bottom: none; } .c-namecell { white-space: nowrap; } .c-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; margin-right: 10px; vertical-align: middle; } .c-name { font-weight: 600; vertical-align: middle; } .c-job { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .c-date { color: var(--muted); white-space: nowrap; } .c-empty { text-align: center; color: var(--muted); padding: 24px; } .contact-stage { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 800; padding: 3px 9px; border-radius: 20px; background: var(--bg); color: var(--muted); white-space: nowrap; } .contact-stage.stage-won { color: var(--green); } .contact-stage.stage-lost { color: var(--red); } .contact-link { font-size: 13px; color: var(--accent-ink); text-decoration: none; white-space: nowrap; /* Tappable phone number: 15px tall was a thumb-miss on a phone. Padding grows the hit area to the 36px floor without moving the text. */ display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px; } .contact-link:hover { text-decoration: underline; } .c-notescell { max-width: 240px; } .c-notebtn { display: block; width: 100%; background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--muted); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-notebtn:hover { color: var(--ink); } .c-notebtn.empty { color: var(--accent-ink); opacity: 0.65; } .c-notebtn.empty:hover { opacity: 1; } .c-note-trail { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; padding: 8px 10px; background: var(--bg); border-radius: 8px; } /* Auto text panel (top of Conversations): the AI on/off switch, the two texts the operator can reword, and a live preview of what actually gets sent. The switch has to read at a glance from a phone in the sun, so the state line is full size text and the segmented control is a big tap target, never a tick box. Type rules: everything read is Archivo (no Anton below the wordmark) and no visible text under the 12.5px floor. */ .cnc { max-width: 640px; margin: 12px 0 18px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); } .cnc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .cnc-headtext { min-width: 0; } .cnc-kicker { font-size: 12.5px; text-transform: uppercase; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); } .cnc-state { font-size: 16px; font-weight: 800; color: var(--text); margin-top: 3px; } .cnc.is-off .cnc-state { color: var(--red); } .cnc-switch { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .cnc-switch-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--muted); } .cnc-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .cnc-seg-btn { padding: 10px 22px; background: transparent; color: var(--muted); border: 0; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .cnc-seg-btn.on { background: var(--gold); color: var(--ink-on-accent); } /* Selected OFF: inverted ink, not a red fill. Red reads right as TEXT (the state line) but fails contrast as a background for 14px type in both themes. */ .cnc-seg-btn.off.on { background: var(--text); color: var(--bg); } .cnc-seg-btn:not(.on):hover { background: var(--fill); color: var(--text); } .cnc-note { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 10px; } /* CONC-016: the first-text switch row, shown only while the AI is off. */ .cnc-subswitch { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; background: var(--fill); border: 1px solid var(--line); border-radius: 10px; } .cnc-subswitch[hidden] { display: none; } .cnc-subswitch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 220px; } .cnc-subswitch-note { font-size: 13px; color: var(--muted); line-height: 1.45; } /* CONC-017: the who-gets-the-lead-alerts crew editor. */ .cnc-crew-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .cnc-crew-empty { font-size: 13px; color: var(--muted); } .cnc-crew-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--fill); border: 1px solid var(--line); border-radius: 10px; } .cnc-crew-num { font-weight: 700; color: var(--text); } .cnc-crew-addrow { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .cnc-crew-input { flex: 1 1 180px; max-width: 260px; } .cnc-warn { font-size: 13px; line-height: 1.5; color: var(--text); margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--fill); border-left: 3px solid var(--red); } .cnc-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; } .cnc-more-sum { cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--accent-ink); list-style: none; } .cnc-more-sum::-webkit-details-marker { display: none; } .cnc-more-sum::before { content: '\25B8 '; } .cnc-more[open] > .cnc-more-sum::before { content: '\25BE '; } .cnc-field { margin-top: 16px; } .cnc-label { font-size: 14.5px; font-weight: 800; color: var(--text); } .cnc-help { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 3px 0 8px; } .cnc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; } .cnc-chips-lead { font-size: 12.5px; color: var(--muted); } .cnc-chip { padding: 4px 9px; border-radius: 20px; cursor: pointer; border: 1px solid var(--line); background: var(--fill); color: var(--accent-ink); font-family: inherit; font-size: 12.5px; font-weight: 700; } .cnc-chip:hover { border-color: var(--gold); } .cnc-ta { min-height: 76px; } /* The pre-filled starter is a suggestion, not a saved setting: say so right under the box, in the accent ink so it reads as a nudge, never a warning. */ .cnc-suggest { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--accent-ink); } .cnc-fieldfoot { display: flex; justify-content: flex-end; gap: 14px; margin-top: 6px; } .cnc-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent-ink); font-family: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; } .cnc-prev { margin-top: 10px; padding: 11px 12px; border-radius: 10px; background: var(--bg2); border: 1px dashed var(--line); } .cnc-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--muted); } .cnc-prev-tag { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 12.5px; } .cnc-prev-tag.yours { color: var(--accent-ink); } .cnc-bubble { margin-top: 7px; padding: 10px 12px; border-radius: 12px; background: var(--fill-2); color: var(--text); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; } .cnc-prev-foot { font-size: 12.5px; color: var(--muted); margin-top: 6px; } .cnc-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .cnc-actions .adc-card-btn[disabled] { opacity: 0.5; cursor: default; } .cnc-savestate { font-size: 12.5px; color: var(--muted); } .cnc-savestate.dirty { color: var(--accent-ink); font-weight: 700; } .cnc-savestate.saved { color: var(--green); font-weight: 700; } /* AI off: the customer facing text is not going anywhere, so grey the preview back and say why. Still editable, so they can get it ready before switching on. */ .cnc.is-off .cnc-field-customer .cnc-prev { opacity: 0.55; } .cnc-offnote { display: none; } .cnc.is-off .cnc-offnote { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--muted); border-left: 3px solid var(--line); padding-left: 9px; } /* Phone: the on/off pair goes full width under the state line. It is the one control on this screen an operator has to be able to hit without thinking. */ @media (max-width: 560px) { .cnc { padding: 14px; } .cnc-switch { width: 100%; align-items: flex-start; } .cnc-seg { width: 100%; } .cnc-seg-btn { flex: 1 1 0; padding: 12px 0; text-align: center; } } /* Conversations (AI <-> customer chat) */ /* The two tab panes (Conversations / Auto text settings). The explicit rule is the L-lesson from .opsw-pop: never let a later display rule beat [hidden]. */ .chat-pane[hidden] { display: none; } .chat-list { display: flex; flex-direction: column; gap: 8px; max-width: 640px; } .chat-row { background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; cursor: pointer; } .chat-row:hover { border-color: var(--gold); } .chat-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .chat-row-top strong { font-size: 14px; } .chat-time { font-size: 11px; color: var(--muted); white-space: nowrap; } .chat-snippet { font-size: 12.5px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-badge { display: inline-block; margin-top: 8px; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 800; padding: 2px 8px; border-radius: 20px; background: var(--bg); } .chat-badge.ai { color: var(--accent-ink); } .chat-badge.you { color: var(--green); } .chat-back { background: none; border: 0; color: var(--accent-ink); font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 6px; } .chat-thread { max-width: 640px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 2px; } .bubble-wrap { display: flex; flex-direction: column; max-width: 78%; } .bubble-wrap.them { align-self: flex-start; align-items: flex-start; } .bubble-wrap.ai, .bubble-wrap.you { align-self: flex-end; align-items: flex-end; } .bubble-who { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 3px; font-weight: 800; } /* System line in a thread: why the AI went quiet (opt-out, abuse). Centred, muted, clearly not a message either side sent. */ .bubble-note { align-self: center; text-align: center; max-width: 90%; font-size: 12.5px; font-style: italic; color: var(--muted); padding: 4px 10px; margin: 2px 0; } .bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; } .bubble-wrap.them .bubble { background: var(--bg2); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .bubble-wrap.ai .bubble { background: var(--gold); color: #14110d; border-bottom-right-radius: 4px; } .bubble-wrap.you .bubble { background: var(--green); color: #08130b; border-bottom-right-radius: 4px; } /* SMS-006: opted-out customer warning above the composer. Shares the cnc-warn look (red-edged note); this just keeps it to the chat column width. */ .chat-optout { max-width: 640px; } .chat-composer { display: flex; gap: 8px; max-width: 640px; margin-top: 12px; } .chat-input { flex: 1; padding: 10px 12px; font-size: 14px; font-family: inherit; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; resize: vertical; } .chat-input:focus { outline: none; border-color: var(--gold); } .chat-send { padding: 0 20px; background: var(--gold); color: #14110d; border: 0; border-radius: 8px; font-weight: 800; cursor: pointer; } .chat-send:disabled { opacity: 0.5; } .chat-resume { margin-top: 10px; background: none; border: 1px solid var(--line); color: var(--accent-ink); padding: 7px 14px; border-radius: 7px; font-size: 12px; cursor: pointer; } /* Calendar (month grid + upcoming) */ .cal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .cal-title { font-size: 22px; } .cal-nav { display: flex; gap: 6px; } .cal-navbtn { background: var(--bg2); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 6px 13px; font-size: 13px; font-weight: 700; cursor: pointer; } .cal-navbtn:hover { border-color: var(--gold); } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .cal-dow { padding: 9px 6px; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 800; color: var(--muted); background: var(--bg2); text-align: center; border-bottom: 1px solid var(--line); } .cal-cell { min-height: 96px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .cal-cell:nth-child(7n) { border-right: none; } .cal-cell.other { background: rgba(0, 0, 0, 0.14); } .cal-cell.other .cal-num { opacity: 0.4; } .cal-cell.today { background: rgba(245, 184, 0, 0.08); } .cal-num { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 1px; } .cal-cell.today .cal-num { color: var(--accent-ink); } .cal-chip { font-size: 11.5px; line-height: 1.4; background: rgba(245, 184, 0, 0.16); color: var(--ink); border-left: 2px solid var(--gold); border-radius: 3px; padding: 3px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-chip b { color: var(--accent-ink); font-weight: 800; } .cal-up-h { margin: 22px 0 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; color: var(--accent-ink); } .cal-wrap { max-width: 640px; } .cal-card { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; } .cal-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cal-info strong { font-size: 14px; } .cal-when { font-size: 12px; color: var(--accent-ink); font-weight: 700; } .cal-job { font-size: 12px; color: var(--muted); } .cal-hint { margin-top: 14px; color: var(--muted); font-size: 13px; } .cal-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cal-views { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; } .cal-viewbtn { background: var(--bg2); border: 0; color: var(--muted); padding: 6px 13px; font-size: 12px; font-weight: 700; cursor: pointer; } .cal-viewbtn + .cal-viewbtn { border-left: 1px solid var(--line); } .cal-viewbtn.active { background: var(--gold); color: #14110d; } .cal-newbtn { margin: 0; padding: 7px 14px; } .cal-cell { cursor: pointer; } .cal-week .cal-weekcell { min-height: 200px; } .nb-results { border: 1px solid var(--line); border-radius: 7px; margin-top: 4px; max-height: 190px; overflow-y: auto; background: var(--bg2); } .nb-result { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); } .nb-result:last-child { border-bottom: none; } .nb-result:hover { background: var(--bg); } .nb-result strong { font-size: 13px; } .nb-ph { font-size: 12px; color: var(--muted); white-space: nowrap; } .cal-integ { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; } .cal-integ-on { font-size: 12px; font-weight: 700; color: var(--green); } .cal-integ-btn { background: var(--bg2); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .cal-integ-btn:hover { border-color: var(--gold); } .cal-integ-btn.connect { background: var(--gold); color: #14110d; border-color: var(--gold); } /* Command Center (admin intel) */ .ic-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(108px, 100%), 1fr)); gap: 10px; margin-bottom: 18px; max-width: 720px; } .ic-stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 14px 10px; text-align: center; } .ic-num { font-family: 'Anton', sans-serif; font-size: 26px; color: var(--accent-ink); line-height: 1; } .ic-lbl { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 5px; } .ic-card { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; padding: 18px 20px; max-width: 720px; margin-bottom: 14px; } .ic-brief { font-size: 14px; line-height: 1.5; } .ic-h { font-weight: 800; color: var(--accent-ink); margin: 14px 0 4px; letter-spacing: 0.02em; } .ic-h:first-child { margin-top: 0; } .ic-p { color: var(--ink); margin-bottom: 2px; } .ic-gap { height: 6px; } .board-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 28px 0; } .pavaro-credit { margin-top: 18px; padding: 12px; background: var(--card); border: 1px dashed var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); text-align: center; } .pavaro-credit b { color: var(--text); } /* ---------- Ads ---------- */ .ads-list { margin-top: 6px; } .ad-row { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 10px; } .ad-thumb { width: 54px; height: 54px; background: #000; border: 1px solid var(--line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .ad-thumb svg { width: 22px; height: 22px; fill: var(--accent-ink); } .ad-row .info { flex: 1; min-width: 0; } .ad-row .info strong { display: block; font-size: 14px; margin-bottom: 2px; } .ad-row .info span { font-size: 12px; color: var(--muted); } .status-pill { font-family: 'Anton', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 6px 11px; border-radius: 6px; } .status-pill.live { background: rgba(92, 196, 106, 0.15); color: var(--green); } .status-pill.paused { background: rgba(245, 184, 0, 0.12); color: var(--accent-ink); } .ad-toggle { font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--gold); color: var(--ink-on-accent); border: 0; padding: 10px 16px; border-radius: 8px; } .ad-toggle.off { background: transparent; color: var(--text); border: 1.5px solid var(--line); } .ad-tired-note { margin-top: 10px; background: rgba(245, 184, 0, 0.08); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 10px 12px; font-size: 13px; color: var(--text); } /* DEST-001: the wrong-address alarm on Your ads. Deliberately the loudest block on the screen - paid clicks landing on a page that is not the member's must never hide behind a small chip again. */ .ads-dest-alarm { background: linear-gradient(135deg, rgba(168, 67, 26, 0.28), rgba(168, 67, 26, 0.10)); border: 2px solid var(--rust, #a8431a); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 16px; } .ads-dest-alarm-title { color: var(--rust, #a8431a); font-weight: 800; font-size: 17px; line-height: 1.3; } .ads-dest-alarm-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.5; } .prime-note { background: linear-gradient(135deg, rgba(245, 184, 0, 0.14), rgba(245, 184, 0, 0.03)); border: 1px solid rgba(245, 184, 0, 0.35); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; font-size: 13.5px; color: var(--text); } .prime-note b { color: var(--accent-ink); } /* ---------- My Page ---------- */ .page-editor { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 900px) { .page-editor { grid-template-columns: 1fr 360px; } } .page-sections { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; } .page-sec { background: var(--bg2); border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; display: flex; align-items: center; gap: 12px; } .page-sec:hover { border-color: rgba(245, 184, 0, 0.5); } .page-sec.picked { border-color: var(--accent-ink); background: rgba(245, 184, 0, 0.07); } .page-sec.locked { opacity: 0.55; cursor: not-allowed; } .page-sec .id { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); background: var(--fill); border-radius: 4px; padding: 3px 7px; flex-shrink: 0; } .page-sec.picked .id { background: var(--gold); color: var(--ink-on-accent); } .page-sec .meta { flex: 1; min-width: 0; } .page-sec .meta strong { font-size: 14px; display: block; } .page-sec .meta span { font-size: 12px; color: var(--muted); } .page-chat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; min-height: 340px; } .page-chat .head { padding: 14px 16px; border-bottom: 1px solid var(--line); } .page-chat .head h3 { font-family: 'Anton', sans-serif; font-size: 15px; text-transform: uppercase; } .page-chat .head p { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; } .page-chat .picked-chip { margin: 12px 16px 0; padding: 9px 12px; background: rgba(245, 184, 0, 0.1); border: 1px solid rgba(245, 184, 0, 0.3); border-radius: 8px; font-size: 12px; color: var(--accent-ink); } .page-chat .picked-chip.none { background: var(--fill); border-color: var(--line); color: var(--muted); } .page-chat .messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .page-chat .msg { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; max-width: 92%; } .page-chat .msg.you { background: rgba(91, 155, 213, 0.12); border: 1px solid rgba(91, 155, 213, 0.3); align-self: flex-end; } .page-chat .msg.bot { background: var(--bg2); align-self: flex-start; } .page-chat .msg.bot .who { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 5px; } .page-chat .msg.bot .keep-row { margin-top: 10px; display: flex; gap: 7px; } .page-chat .mini { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; padding: 6px 11px; border: 0; border-radius: 6px; } .page-chat .mini.keep { background: var(--green); color: var(--ink-on-accent); } .page-chat .mini.un { background: transparent; border: 1.5px solid var(--line); color: var(--text); } .page-chat .inputbar { padding: 12px 16px; border-top: 1px solid var(--line); } .page-chat .inputrow { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--bg2); padding: 7px 9px; border-radius: 8px; } .page-chat .inputrow input { flex: 1; background: transparent; border: 0; color: var(--text); font-family: inherit; font-size: 13.5px; outline: none; } .page-chat .mic { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; } .page-chat .mic svg { width: 15px; height: 15px; fill: var(--bg); } .page-chat .mic.recording { animation: micPulse 1s infinite; } @keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 0, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(245, 184, 0, 0); } } .page-chat .publish-row { padding: 10px 16px 14px; display: flex; gap: 8px; } .page-chat .publish-row button { flex: 1; padding: 12px; border: 0; border-radius: 8px; font-family: 'Anton', sans-serif; font-size: 13px; text-transform: uppercase; } .page-chat .publish-row .publish { background: var(--gold); color: var(--ink-on-accent); } .page-chat .publish-row .preview { background: transparent; color: var(--text); border: 1.5px solid var(--line); } /* ---------- Brand chip (My Page header) ---------- */ .brand-chip { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .brand-chip .label { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .brand-chip .mood { font-family: 'Anton', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-ink); } .brand-chip .swatches { display: flex; gap: 6px; align-items: center; } .brand-chip .swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); } .brand-chip .fonts { font-size: 12px; color: var(--muted); margin-left: auto; } .brand-chip .fonts b { color: var(--text); font-weight: 600; } .brand-chip .using-defaults { font-size: 11px; color: var(--muted); font-style: italic; } .brand-chip .bg-preview { width: 100%; max-width: 100%; height: 110px; border-radius: 10px; margin-top: 12px; background-size: cover; background-position: center; border: 1px solid var(--line); position: relative; flex-basis: 100%; } .brand-chip .bg-preview .pill { position: absolute; left: 10px; bottom: 10px; font-family: 'Anton', sans-serif; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(12, 11, 9, 0.7); color: var(--text); padding: 5px 10px; border-radius: 4px; } /* ---------- My Page rebuild (iframe preview + talk panel) ---------- */ /* * Per MY-PAGE-BUILD-BRIEF.md: the operator sees their REAL landing * page (premium gunmetal/gold from the iframe), framed inside the * Toolbox chrome (warm dark/yellow operator look). Two aesthetics on * purpose. The premium look comes from master-template.html via * /api/page/render; everything below styles the chrome around it. */ .mp-root { display: flex; width: 100%; /* Eat the #view padding so the iframe goes edge-to-edge. */ margin: -18px; /* On phone, clear topbar AND the global bottomnav so nothing overlaps. */ min-height: calc(100vh - var(--topbar-h) - var(--safe-top) - var(--bottomnav-h) - env(safe-area-inset-bottom, 0px)); } @media (min-width: 820px) { .mp-root { margin: -24px -28px; height: calc(100vh - var(--topbar-h) - var(--safe-top)); min-height: 540px; } } .mp-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #08090b; overflow: hidden; } .mp-preview-bar { height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* Fixed light-on-dark: this bar always sits on the dark #08090b preview frame, so its text must NOT use theme vars (they'd flip dark = invisible in light mode). */ color: rgba(245, 241, 232, 0.6); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .mp-preview-bar .mp-url { display: flex; align-items: center; gap: 8px; } .mp-preview-bar .mp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .mp-preview-bar .mp-url-tag { color: rgba(245, 241, 232, 0.72); } .mp-preview-bar .mp-point { color: var(--accent-ink); font-weight: 700; } .mp-iframe { flex: 1; width: 100%; border: 0; background: #0a0b0d; /* The iframe content is the operator's actual landing page, no scrollbar styling needed; the iframe handles its own scroll. */ } .mp-talk { width: 380px; flex-shrink: 0; background: var(--bg2); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .mp-talk-head { padding: 16px 18px 0; position: relative; } .mp-talk-head h2 { font-family: 'Anton', sans-serif; font-size: 18px; text-transform: uppercase; padding-right: 96px; } .mp-talk-head p { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; padding-right: 96px; } .mp-publish { position: absolute; top: 14px; right: 16px; font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; background: var(--gold); color: var(--ink-on-accent); border: 0; padding: 10px 18px; border-radius: 8px; } .mp-publish:active { transform: scale(0.97); } .mp-talkbig { margin: 14px 18px; background: linear-gradient(180deg, #23201b, #15120e); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: center; cursor: pointer; user-select: none; } .mp-talkbig:active { transform: scale(0.99); } .mp-talkbig .mp-ring { width: 70px; height: 70px; border-radius: 50%; background: var(--gold); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(245, 184, 0, 0.34); position: relative; } .mp-talkbig .mp-ring svg { width: 30px; height: 30px; fill: var(--bg); } .mp-talkbig .mp-ring::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; } .mp-talkbig.recording .mp-ring::after { animation: mp-ringpulse 1s infinite; opacity: 1; } @keyframes mp-ringpulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.3); opacity: 0; } } .mp-talkbig .mp-talk-title { font-family: 'Anton', sans-serif; font-size: 18px; text-transform: uppercase; } .mp-talkbig .mp-talk-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; } .mp-egs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; } .mp-eg { background: var(--fill); border: 1px solid var(--line); border-radius: 18px; padding: 6px 11px; font-size: 11.5px; color: var(--text); cursor: pointer; } .mp-eg:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .mp-picked-chip { margin: 0 18px 8px; padding: 8px 12px; border-radius: 8px; font-size: 12px; background: rgba(245, 184, 0, 0.1); border: 1px solid rgba(245, 184, 0, 0.3); color: var(--accent-ink); } .mp-picked-chip.none { background: var(--fill); border-color: var(--line); color: var(--muted); } .mp-picked-chip b { color: var(--accent-ink); } .mp-feed { flex: 1; overflow-y: auto; padding: 6px 18px 8px; display: flex; flex-direction: column; gap: 10px; } .mp-msg { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 9px; max-width: 92%; } .mp-msg.you { background: rgba(91, 155, 213, 0.12); border: 1px solid rgba(91, 155, 213, 0.3); align-self: flex-end; } .mp-msg.bot { background: var(--card); align-self: flex-start; } .mp-who { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; } .mp-live { font-size: 8px; letter-spacing: 0.08em; color: var(--green); background: rgba(92, 196, 106, 0.12); padding: 1px 5px; border-radius: 3px; } .mp-diff { margin-top: 8px; background: rgba(245, 184, 0, 0.06); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 9px 11px; font-size: 12.5px; line-height: 1.55; } .mp-diff b { color: var(--accent-ink); } .mp-fail { margin-top: 8px; background: rgba(224, 121, 91, 0.12); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; padding: 8px 10px; font-size: 12px; white-space: pre-wrap; } .mp-keep { margin-top: 11px; display: flex; gap: 7px; } .mp-mini-keep, .mp-mini-undo { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; padding: 7px 13px; border-radius: 6px; border: 0; cursor: pointer; } .mp-mini-keep { background: var(--green); color: #06210a; } .mp-mini-undo { background: transparent; border: 1.5px solid var(--line); color: var(--text); } .mp-input { padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); } .mp-input-row { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--card); padding: 7px 8px 7px 12px; border-radius: 10px; } .mp-input-row input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; } .mp-mic { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; cursor: pointer; } .mp-mic svg { width: 15px; height: 15px; fill: var(--bg); } .mp-mic.recording { animation: mp-micpulse 1s infinite; } @keyframes mp-micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 0, 0.6); } 70% { box-shadow: 0 0 0 9px rgba(245, 184, 0, 0); } } /* Publish success overlay */ #mp-overlay { position: fixed; inset: 0; background: rgba(8, 8, 6, 0.86); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 70; padding: 24px; } .mp-overlay-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 34px; text-align: center; max-width: 380px; } .mp-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: 'Anton', sans-serif; font-size: 36px; color: #06210a; } .mp-overlay-box h3 { font-family: 'Anton', sans-serif; font-size: 22px; text-transform: uppercase; margin-bottom: 8px; } .mp-overlay-box p { color: var(--muted); font-size: 14px; margin-bottom: 20px; line-height: 1.5; } .mp-overlay-box code { font-family: monospace; font-size: 12px; background: var(--bg2); padding: 2px 6px; border-radius: 4px; color: var(--text); display: inline-block; margin-top: 4px; } .mp-overlay-close { font-family: 'Anton', sans-serif; font-size: 13px; text-transform: uppercase; background: var(--gold); color: var(--ink-on-accent); padding: 11px 22px; border-radius: 8px; border: 0; cursor: pointer; } /* Phone: stack, preview on top, talk below. * * The reference (my-page-rebuild.html) lets the whole page scroll on * phone, we match that. Preview is a fixed slice on top; talk takes * its natural height below. The global #bottomnav stays fixed; #main's * padding-bottom keeps content clear of it. Operator scrolls the page * naturally to reach the input row when the chat fills up. */ @media (max-width: 900px) { .mp-root { flex-direction: column; height: auto; min-height: 0; } .mp-preview { height: 42vh; min-height: 280px; flex: 0 0 auto; } .mp-talk { width: auto; flex: 0 0 auto; /* natural height, page scrolls as it grows */ border-left: 0; border-top: 1px solid var(--line); overflow: visible; } .mp-talk-head h2, .mp-talk-head p { padding-right: 88px; } .mp-talk-head h2 { font-size: 17px; } .mp-publish { top: 12px; right: 14px; padding: 9px 14px; font-size: 12px; } .mp-talkbig { margin: 12px 14px; padding: 14px; } .mp-talkbig .mp-ring { width: 56px; height: 56px; margin-bottom: 10px; } .mp-talkbig .mp-ring svg { width: 24px; height: 24px; } .mp-talkbig .mp-talk-title { font-size: 16px; } .mp-egs { margin-top: 10px; } .mp-eg { padding: 6px 10px; font-size: 11.5px; } .mp-picked-chip { margin: 0 14px 8px; padding: 8px 12px; font-size: 12px; } .mp-feed { padding: 6px 14px 8px; max-height: 320px; /* keeps chat history bounded; long histories scroll */ } .mp-msg { font-size: 14px; } .mp-input { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); } } /* =========================================================== My Page v2, block-and-atom editor (.mpv2-*) Per MY-PAGE-BUILD-BRIEF-v2.md / my-page-editor-v2.html. Two aesthetics, on purpose: the operator-look Toolbox chrome (warm dark + yellow accent) wraps the premium member page (gunmetal + gold) which lives inside the iframe. =========================================================== */ .mpv2-root { display: flex; width: 100%; margin: -18px; min-height: calc(100vh - var(--topbar-h) - var(--safe-top) - var(--bottomnav-h) - env(safe-area-inset-bottom, 0px)); } @media (min-width: 820px) { .mpv2-root { margin: -24px -28px; height: calc(100vh - var(--topbar-h) - var(--safe-top)); min-height: 540px; } } /* ---- Preview (iframe column) ---- */ .mpv2-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #08090b; overflow: hidden; } .mpv2-preview-bar { min-height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; padding: 5px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* Fixed light-on-dark (see .mp-preview-bar): the frame is always dark. */ color: rgba(245, 241, 232, 0.6); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } .mpv2-url { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; } .mpv2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } /* The operator's own page address, shown up top in the builder bar. Dot is grey until the domain actually points at us, then green ("it's live & yours"). */ .mpv2-domain { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; text-decoration: none; border: 1px solid var(--line); background: var(--fill); color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; /* Roomier than it was: the address now carries the page path too, and a truncated address is the one thing this strip must never show. */ max-width: 440px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mpv2-domain:hover { border-color: var(--gold); } .mpv2-domain::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .mpv2-domain.is-live::before { background: var(--green); } /* Copy address, right beside it: pointing an ad at this page is a tap, not a retype off the screen. */ .mpv2-copyaddr { flex: 0 0 auto; padding: 6px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .mpv2-copyaddr:hover { border-color: var(--gold); color: var(--text); } /* Funnel switcher (multiple landing pages) */ .mpv2-funnel { position: relative; } .mpv2-funnel-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--fill); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 700; max-width: 240px; } .mpv2-funnel-btn:hover { border-color: var(--gold); } .mpv2-funnel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mpv2-funnel-dots { color: var(--muted); font-weight: 800; letter-spacing: 1px; } .mpv2-funnel-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); padding: 6px; display: none; } .mpv2-funnel-menu.show { display: block; } .mpv2-funnel-mlabel { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 6px 10px 4px; } .mpv2-funnel-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; text-align: left; } .mpv2-funnel-item:hover { background: var(--fill); } .mpv2-funnel-item.on { color: var(--accent-ink); font-weight: 700; } .mpv2-funnel-tick { color: var(--accent-ink); } /* Name over address: which page is which is the ADDRESS, not the label. */ .mpv2-funnel-itemtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mpv2-funnel-itemurl { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } /* What the page has actually produced: the reason to keep it or kill it. */ .mpv2-funnel-itemleads { font-size: 11.5px; color: var(--muted); font-weight: 600; } .mpv2-funnel-sep { height: 1px; background: var(--line); margin: 6px 4px; } .mpv2-funnel-act { width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; } .mpv2-funnel-act:hover { background: var(--fill); } .mpv2-funnel-act.danger { color: var(--red); } .mpv2-newform { display: flex; flex-direction: column; gap: 6px; text-align: left; } .mpv2-newnote { font-size: 13px; color: var(--muted); margin-top: 4px; } /* The address preview when we had to bump it (-2) because theirs was taken. */ .mpv2-newnote.is-taken { color: var(--text); } .mpv2-newdup-link { color: var(--accent-ink); text-decoration: underline; font-size: 13.5px; margin-top: 6px; display: inline-block; } /* "Writing your page" loader (generation takes ~a minute). */ .mpv2-genload { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 10px; text-align: center; } .mpv2-genspin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--gold); animation: mpv2-spin 0.9s linear infinite; } @keyframes mpv2-spin { to { transform: rotate(360deg); } } .mpv2-genmsg { color: var(--text); font-weight: 700; font-size: 15px; } .mpv2-url-sep { color: rgba(245, 241, 232, 0.25); } .mpv2-point { color: var(--accent-ink); font-weight: 700; } /* Attention pulse, fires when the user hits mic / Ask-AI with no atom selected, so they see WHERE to click instead of getting a quiet message in the bot panel. Short, no layout shift. */ .mpv2-preview.attn { box-shadow: inset 0 0 0 2px #f5b800; animation: mpv2-attn-pulse 1.4s ease-out; } .mpv2-point.attn { animation: mpv2-attn-tag 1.4s ease-out; } @keyframes mpv2-attn-pulse { 0% { box-shadow: inset 0 0 0 2px rgba(245, 184, 0, 0.95); } 50% { box-shadow: inset 0 0 0 4px rgba(245, 184, 0, 0.55); } 100% { box-shadow: inset 0 0 0 2px rgba(245, 184, 0, 0.00); } } @keyframes mpv2-attn-tag { 0% { transform: scale(1.0); color: var(--accent-ink); } 35% { transform: scale(1.18); color: #fff; } 100% { transform: scale(1.0); color: var(--accent-ink); } } .mpv2-bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .mpv2-addbtn { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--ink-on-accent); background: var(--gold); border: 0; padding: 6px 11px; border-radius: 6px; } .mpv2-addbtn:active { transform: scale(0.97); } /* Theme button, sits next to "Add a block". Quiet by default; the four-colour ring tells the operator what it controls without a label. */ .mpv2-themebtn { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); padding: 6px 11px; border-radius: 6px; cursor: pointer; } .mpv2-themebtn:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .mpv2-themebtn:active { transform: scale(0.97); } .mpv2-theme-dot { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(#1f242b 0 25%, #c9a24b 25% 50%, #f4f5f7 50% 75%, #0a0b0d 75% 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } /* Theme picker sheet, grid of swatch cards, no free picker. */ /* Bounded scroll area so all 52 themes are reachable inside the centred sheet (the heading + Cancel stay put; only the cards scroll). */ .mpv2-theme-scroller { max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0 -4px; padding: 2px 4px 6px; } .mpv2-themes-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .mpv2-theme-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--text); position: relative; transition: border-color 0.15s, transform 0.1s; } .mpv2-theme-card:hover { border-color: var(--accent-ink); } .mpv2-theme-card:active { transform: scale(0.99); } .mpv2-theme-card.active { border-color: var(--accent-ink); background: rgba(245, 184, 0, 0.06); } .mpv2-theme-card strong { font-size: 14px; color: var(--text); } .mpv2-theme-desc { font-size: 12px; color: var(--muted); line-height: 1.4; } .mpv2-theme-swatches { display: flex; gap: 4px; } .mpv2-theme-sw { flex: 1; height: 28px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .mpv2-theme-tick { position: absolute; top: 10px; right: 10px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-on-accent); background: var(--gold); padding: 2px 7px; border-radius: 999px; font-weight: 700; } .mpv2-iframe { flex: 1; width: 100%; border: 0; background: #0a0b0d; } /* Stage wraps the iframe so we can swap desktop (fill) ↔ phone (centred frame). */ .mpv2-stage { flex: 1 1 auto; min-height: 0; display: flex; } .mpv2-stage > .mpv2-iframe { flex: 1 1 auto; width: 100%; } /* Phone view = a clean narrow column at phone width (the page reflows to its mobile layout). No heavy device bezel, just a tidy stream, full height. */ .mpv2-preview.phone .mpv2-stage { background: #0a0b0d; align-items: stretch; justify-content: center; } .mpv2-preview.phone .mpv2-stage > .mpv2-iframe { flex: 0 0 auto; width: 390px; max-width: 100%; height: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); box-shadow: 0 0 50px rgba(0, 0, 0, 0.45); background: #000; } /* Desktop / Phone segmented toggle */ .mpv2-view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-right: 4px; } .mpv2-view-btn { background: var(--card); border: 0; color: var(--muted); font-size: 14px; line-height: 1; padding: 7px 11px; cursor: pointer; } .mpv2-view-btn + .mpv2-view-btn { border-left: 1px solid var(--line); } .mpv2-view-btn.active { background: rgba(245, 184, 0, 0.14); color: var(--accent-ink); } /* ---- Talk panel ---- */ .mpv2-talk { width: 380px; flex-shrink: 0; background: var(--bg2); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .mpv2-talk-head { padding: 14px 18px 0; position: relative; } .mpv2-talk-head h2 { font-family: 'Anton', sans-serif; font-size: 17px; text-transform: uppercase; padding-right: 96px; } .mpv2-talk-head p { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; padding-right: 96px; } .mpv2-publish { position: absolute; top: 12px; right: 16px; font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; background: var(--gold); color: var(--ink-on-accent); border: 0; padding: 9px 16px; border-radius: 8px; } .mpv2-publish:active { transform: scale(0.97); } /* ---- Editing bar (Type it / Ask AI / Suggest) ---- */ .mpv2-edit-bar { margin: 12px 18px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 13px; } .mpv2-edit-bar.none { opacity: 0.6; } .mpv2-what { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 9px; } .mpv2-what b { color: var(--accent-ink); } .mpv2-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; } .mpv2-act { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--line); background: transparent; color: var(--text); padding: 10px 6px; border-radius: 9px; text-align: center; cursor: pointer; } .mpv2-act:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .mpv2-act.primary { background: var(--gold); color: var(--ink-on-accent); border-color: var(--accent-ink); } .mpv2-edit-bar.none .mpv2-acts { display: none; } /* Writing colour is no longer a side-panel control: the operator highlights text on the page and picks a colour from the floating toolbar (see the .te-colorpop styles baked into the preview by template_filler.py). */ /* ---- Big talk button (voice / hold-and-talk) ---- */ .mpv2-talkbig { margin: 12px 18px; background: linear-gradient(180deg, #23201b, #15120e); border: 1px solid var(--line); border-radius: 16px; padding: 14px; text-align: center; cursor: pointer; user-select: none; } .mpv2-talkbig:active { transform: scale(0.99); } .mpv2-ring { width: 54px; height: 54px; border-radius: 50%; background: var(--gold); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 26px rgba(245, 184, 0, 0.32); position: relative; } .mpv2-ring svg { width: 24px; height: 24px; fill: var(--bg); } .mpv2-ring::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; } .mpv2-talkbig.rec .mpv2-ring::after { animation: mpv2-pulse 1s infinite; opacity: 1; } @keyframes mpv2-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.3); opacity: 0; } } .mpv2-talk-title { font-family: 'Anton', sans-serif; font-size: 16px; text-transform: uppercase; } .mpv2-talk-sub { font-size: 12px; color: var(--muted); margin-top: 4px; } /* ---- Chat feed ---- */ .mpv2-feed { flex: 1; overflow-y: auto; padding: 4px 18px 8px; display: flex; flex-direction: column; gap: 9px; max-height: 50vh; } .mpv2-msg { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 9px; max-width: 93%; /* Multi-line messages (Shift+Enter) keep their line breaks. */ white-space: pre-wrap; overflow-wrap: break-word; } .mpv2-msg.you { background: rgba(91, 155, 213, 0.12); border: 1px solid rgba(91, 155, 213, 0.3); align-self: flex-end; } .mpv2-msg.bot { background: var(--card); align-self: flex-start; } .mpv2-who { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 5px; } .mpv2-diff { margin-top: 8px; background: rgba(245, 184, 0, 0.06); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 9px 11px; font-size: 12.5px; line-height: 1.55; } .mpv2-diff b { color: var(--accent-ink); } .mpv2-fail { margin-top: 8px; background: rgba(224, 121, 91, 0.12); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; padding: 8px 10px; font-size: 12px; white-space: pre-wrap; } .mpv2-sugg { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; } .mpv2-sugg-opt { text-align: left; background: var(--fill); border: 1px solid var(--line); color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 11px; border-radius: 7px; cursor: pointer; } .mpv2-sugg-opt:hover { border-color: var(--accent-ink); } .mpv2-sugg-opt.bad { border-color: var(--red); opacity: 0.7; } .mpv2-keep { margin-top: 10px; display: flex; gap: 7px; } .mpv2-keep-yes, .mpv2-keep-undo { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; padding: 7px 13px; border-radius: 6px; border: 0; cursor: pointer; } .mpv2-keep-yes { background: var(--green); color: #06210a; } .mpv2-keep-undo { background: transparent; border: 1.5px solid var(--line); color: var(--text); } /* ---- Input row ---- */ .mpv2-input { padding: 11px 18px calc(11px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); } .mpv2-input-row { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--card); padding: 6px 7px 6px 12px; border-radius: 10px; } .mpv2-input-row .mic { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; cursor: pointer; } .mpv2-input-row .mic svg { width: 15px; height: 15px; fill: var(--bg); } .mpv2-input-row .mic.recording { animation: micPulse 1s infinite; } .mpv2-input-row .mic:disabled { opacity: 0.55; cursor: default; } .mpv2-input-row input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; } /* ChatGPT-style composer: a growing multi-line box (Enter sends, Shift+Enter = new line) + an explicit send button. */ .mpv2-input-row textarea.mpv2-chat-ta { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; resize: none; line-height: 1.45; max-height: 130px; padding: 6px 0; margin: 0; overflow-y: auto; } .mpv2-input-row { align-items: flex-end; } .mpv2-input-row .mic, .mpv2-input-row .mpv2-send { margin-bottom: 2px; } .mpv2-send { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; cursor: pointer; } .mpv2-send svg { width: 15px; height: 15px; fill: none; stroke: var(--bg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* "Helping with: X" strip clear button */ .mpv2-ctx-clear { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; margin-left: 6px; vertical-align: middle; } .mpv2-ctx-clear:hover { color: var(--text); } .mpv2-mic { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; cursor: pointer; } .mpv2-mic svg { width: 15px; height: 15px; fill: var(--bg); } .mpv2-mic.recording { animation: mpv2-micpulse 1s infinite; } @keyframes mpv2-micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 0, 0.6); } 70% { box-shadow: 0 0 0 9px rgba(245, 184, 0, 0); } } /* ---- Add Block sheet (reuses the global Sheet container) ---- */ .mpv2-blocks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 600px) { .mpv2-blocks-grid { grid-template-columns: 1fr; } } .mpv2-block-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 15px; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); } .mpv2-block-card:hover { border-color: var(--accent-ink); } .mpv2-block-card strong { display: block; font-size: 14px; } .mpv2-block-card span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; } /* ---- Publish success overlay ---- */ #mpv2-overlay { position: fixed; inset: 0; background: rgba(8, 8, 6, 0.86); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 24px; } .mpv2-overlay-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 32px; text-align: center; max-width: 360px; } .mpv2-tick { width: 60px; height: 60px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-family: 'Anton', sans-serif; font-size: 30px; color: #06210a; } .mpv2-overlay-box h3 { font-family: 'Anton', sans-serif; font-size: 20px; text-transform: uppercase; margin-bottom: 8px; } .mpv2-overlay-box p { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; line-height: 1.5; } .mpv2-overlay-box code { font-family: monospace; font-size: 12px; background: var(--bg2); padding: 2px 6px; border-radius: 4px; color: var(--text); display: inline-block; margin-top: 4px; } .mpv2-overlay-close { font-family: 'Anton', sans-serif; font-size: 13px; text-transform: uppercase; background: var(--gold); color: var(--ink-on-accent); padding: 11px 22px; border-radius: 8px; border: 0; cursor: pointer; } /* ---- Phone responsive (match reference: stack, page scrolls) ---- */ @media (max-width: 900px) { .mpv2-root { flex-direction: column; height: auto; min-height: 0; } .mpv2-preview { height: 56vh; min-height: 320px; flex: 0 0 auto; } .mpv2-talk { width: auto; flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--line); } .mpv2-feed { max-height: 30vh; } .mpv2-block-card { padding: 12px; } /* Full-width solo editor fills the screen on mobile too. */ .mpv2-root.mpv2-solo .mpv2-preview { height: auto; flex: 1 1 auto; min-height: 70vh; } .mpv2-wizard { right: 10px; left: 10px; bottom: 10px; width: auto; max-height: 78vh; } } /* ---------- Full-width editor + floating AI help wizard ---------- */ /* The page preview IS the editor and takes the whole panel; the AI is a small pop-up helper, opened on demand, never in the way. */ .mpv2-root.mpv2-solo .mpv2-preview { flex: 1 1 auto; } .mpv2-barbtn, .mpv2-helpbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 7px 13px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .mpv2-barbtn:hover, .mpv2-helpbtn:hover { border-color: var(--accent-ink); } /* ---- Top-bar Undo / Redo (page-edit history) ---- */ .mpv2-hist { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; } .mpv2-histbtn { padding: 7px 11px; } .mpv2-histbtn:disabled { opacity: 0.4; cursor: default; border-color: var(--line); } .mpv2-histbtn:disabled:hover { border-color: var(--line); } /* ---- "Ask for fresh options" regen button under Improve cards ---- */ .mpv2-sugg-regen { margin-top: 4px; align-self: flex-start; background: transparent; border: 1px dashed var(--line); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 7px; cursor: pointer; } .mpv2-sugg-regen:hover { border-color: var(--accent-ink); border-style: solid; } .mpv2-help-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ad17a; box-shadow: 0 0 8px #3ad17a; } .mpv2-type-aa { font-weight: 800; font-size: 12px; line-height: 1; color: var(--accent-ink); letter-spacing: 0.02em; } /* In the top bar the Publish button is in-flow (the base .mpv2-publish is absolutely positioned for the old panel; override that here or it floats off-screen and looks "missing"). */ .mpv2-publish-bar { position: static; top: auto; right: auto; padding: 8px 16px; font-size: 13px; border-radius: 9px; cursor: pointer; } /* Floating Ask-AI button (bottom-right), out of the top bar. */ .mpv2-ai-fab { position: fixed; right: 18px; bottom: 18px; z-index: 69; display: inline-flex; align-items: center; gap: 8px; background: var(--bg2, #14161a); border: 1px solid var(--line); color: var(--text); border-radius: 24px; padding: 11px 18px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .mpv2-ai-fab:hover { border-color: var(--accent-ink); } .mpv2-ai-fab.active { border-color: var(--accent-ink); background: rgba(245, 184, 0, 0.12); } .mpv2-wizard { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: min(380px, 92vw); max-height: 72vh; background: var(--bg2, #14161a); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); display: none; flex-direction: column; overflow: hidden; } .mpv2-wizard.open { display: flex; } .mpv2-wiz-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .mpv2-wiz-title { display: flex; align-items: center; gap: 8px; font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; color: var(--text); } .mpv2-wiz-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ad17a; box-shadow: 0 0 8px #3ad17a; } .mpv2-wiz-close { background: transparent; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; } .mpv2-wiz-close:hover { color: var(--text); } .mpv2-wiz-lede { color: var(--muted); font-size: 12.5px; line-height: 1.5; padding: 10px 14px 0; margin: 0; flex-shrink: 0; } .mpv2-wizard .mpv2-feed { flex: 1 1 auto; overflow-y: auto; max-height: none; padding: 12px 14px; } .mpv2-wizard .mpv2-input { padding: 10px 12px; border-top: 1px solid var(--line); flex-shrink: 0; } .mpv2-wizard .mpv2-talkbig { margin: 10px 14px 0; flex-shrink: 0; } /* When the settings sidebar is open, shrink the preview so it all still fits beside the sidebar (nothing hidden, the × stays reachable). */ .mpv2-root { transition: padding-right 0.2s ease-out; } /* Don't skinny the page when there's room, only push it aside on mid-width screens where the panel would otherwise cover page content. Wide screens (plenty of room) and phones (panel goes near-full-width) leave the page solid. */ .mpv2-root.settings-open { padding-right: 0; } @media (min-width: 901px) and (max-width: 1500px) { .mpv2-root.settings-open { padding-right: min(320px, 94vw); } } /* Per-section settings: a full-height docked sidebar (GHL-style). */ .mpv2-settings { position: fixed; right: 0; top: calc(var(--topbar-h) + var(--safe-top)); bottom: 0; z-index: 72; width: min(320px, 94vw); background: var(--bg2, #14161a); border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform 0.2s ease-out; } .mpv2-settings.open { transform: translateX(0); } .mpv2-set-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); } .mpv2-set-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 14px 20px; } .mpv2-set-list { display: flex; flex-direction: column; gap: 8px; } .mpv2-set-add { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; } .mpv2-set-add:hover { border-color: var(--accent-ink); } .mpv2-set-add:disabled { opacity: 0.5; } .mpv2-rev-steps { margin: 4px 0 12px; padding-left: 20px; color: var(--muted); font-size: 12.5px; line-height: 1.6; } .mpv2-rev-steps li { margin-bottom: 7px; } .mpv2-set-sep { margin: 18px 0 10px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; } /* ---- Builder guided tour (coach marks) ---- */ #te-tour { position: fixed; inset: 0; z-index: 9000; pointer-events: none; } #te-tour.te-dim { background: rgba(12, 11, 9, 0.66); } .te-tour-ring { position: fixed; display: none; border-radius: 10px; border: 2px solid var(--gold); box-shadow: 0 0 0 9999px rgba(12, 11, 9, 0.66), 0 0 18px rgba(245, 184, 0, 0.6); transition: top 0.18s, left 0.18s, width 0.18s, height 0.18s; pointer-events: none; } .te-tour-card { position: fixed; width: 320px; max-width: calc(100vw - 28px); pointer-events: auto; background: var(--card, #1a1815); color: var(--text, #f5f1e8); border: 1px solid var(--gold); border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); z-index: 9001; } .te-tour-step { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; } .te-tour-card h3 { margin: 6px 0 8px; font-size: 18px; } .te-tour-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--muted, #b8b2a6); } .te-tour-nav { display: flex; align-items: center; gap: 8px; } .te-tour-skip { margin-right: auto; background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; } .te-tour-btn { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 9px 16px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .te-tour-btn:disabled { opacity: 0.4; cursor: default; } .te-tour-btn.primary { background: var(--gold); border-color: var(--accent-ink); color: #241a06; } .mpv2-set-input { width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 11px 13px; font-family: inherit; font-size: 14px; margin-bottom: 10px; } .mpv2-set-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .mpv2-set-photo { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #0c0d10; } .mpv2-set-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .mpv2-set-photo-ctrls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; padding: 4px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); } .mpv2-set-photo-ctrls button { flex: 1; background: rgba(12,11,9,0.85); border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: 5px; font-size: 13px; line-height: 1; padding: 4px 0; cursor: pointer; } .mpv2-set-photo-ctrls button.rm { color: #e06b4f; border-color: rgba(224,107,79,0.6); } .mpv2-set-photo-ctrls button:disabled { opacity: 0.35; } /* Survey builder, centered modal popup */ .te-modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 90; } .te-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, 94vw); max-height: 86vh; z-index: 91; background: var(--bg2, #14161a); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.6); display: flex; flex-direction: column; overflow: hidden; } .te-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .te-modal-head h3 { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 19px; margin: 0; } .te-modal-lede { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 12px 18px 0; margin: 0; } .te-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 18px; } /* Branded prompt dialog (replaces native prompt()). */ .te-modal.te-prompt { width: min(460px, 94vw); } /* min-height:0 + its own scroll: a long teConfirm body (the workshop lock-in one is 5 paragraphs) must scroll inside the 86vh modal instead of clipping its text or squashing the action row on a short phone (MOB-SHELL-015). */ .te-prompt-body { padding: 16px 18px 2px; min-height: 0; overflow-y: auto; } .te-prompt-input { width: 100%; } .te-prompt-hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; } .te-prompt-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 18px 18px; flex-shrink: 0; } /* Padded to a real thumb target; the negative margin keeps the header layout where the bare 16px glyph sat (MOB-SHELL-007). */ .te-prompt-x { background: transparent; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; padding: 12px; margin: -12px; } .te-prompt-x:hover { color: var(--text); } .te-sb-step { border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px; background: var(--card); margin-bottom: 12px; } .te-sb-setting { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .te-sb-setting input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; } .te-sb-setting strong { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; } .te-sb-setting-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.4; } .te-sb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .te-sb-head strong { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; } .te-sb-rm { background: transparent; border: 1px solid rgba(224,107,79,0.6); color: #e06b4f; border-radius: 7px; font-size: 12px; padding: 5px 10px; cursor: pointer; } /* Question + option labels are INPUTS (editable in the builder itself): quiet until you interact, a clear field on hover/focus. */ input.te-sb-q, input.te-sb-optlabel { background: transparent; color: var(--text); font-family: inherit; border: 1px solid transparent; border-radius: 7px; padding: 4px 7px; width: 100%; min-width: 0; outline: none; cursor: text; } input.te-sb-q:hover, input.te-sb-optlabel:hover { border-color: var(--line); } input.te-sb-q:focus, input.te-sb-optlabel:focus { border-color: var(--gold); background: rgba(245, 184, 0, 0.05); } .te-sb-q { color: var(--muted); font-size: 13px; margin-bottom: 10px; line-height: 1.4; } .te-sb-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; } .te-sb-opt.dq { border-color: rgba(224,107,79,0.55); background: rgba(224,107,79,0.06); } .te-sb-optlabel { font-size: 14px; flex: 1; } .te-sb-optctrls { display: flex; align-items: center; gap: 8px; } .te-sb-dq { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 20px; font-size: 11px; font-weight: 700; padding: 4px 11px; cursor: pointer; } .te-sb-dq.on { border-color: #e06b4f; color: #e06b4f; background: rgba(224,107,79,0.12); } .te-sb-x { background: transparent; border: 0; color: #e06b4f; font-size: 13px; cursor: pointer; } .te-sb-add { background: transparent; border: 1px dashed var(--line); color: var(--text); border-radius: 8px; padding: 8px; font-size: 13px; cursor: pointer; width: 100%; } .te-sb-add:hover { border-color: var(--accent-ink); } .te-sb-addstep { background: var(--gold); color: var(--ink-on-accent); border: 0; border-radius: 9px; padding: 11px 16px; font-weight: 700; cursor: pointer; width: 100%; margin-top: 4px; } @media (max-width: 900px) { .mpv2-settings { width: min(320px, 94vw); } } /* ---------- AI Chase & Wes shell ---------- */ .ai-shell { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; text-align: center; } .ai-shell .ico { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-d)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: 'Anton', sans-serif; font-size: 30px; color: var(--ink-on-accent); } .ai-shell h2 { font-family: 'Anton', sans-serif; font-size: 22px; text-transform: uppercase; margin-bottom: 8px; } .ai-shell p { color: var(--text); font-size: 14.5px; max-width: 560px; margin: 0 auto 8px; line-height: 1.55; } .ai-shell .coming { display: inline-block; margin-top: 14px; font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--gold); border-radius: 6px; padding: 6px 12px; } .ai-pick { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 18px 0; } @media (min-width: 700px) { .ai-pick { grid-template-columns: 1fr 1fr; } } .ai-pick .card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; text-align: center; } .ai-pick .card .face { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px; background: linear-gradient(135deg, var(--gold), var(--gold-d)); display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 22px; color: var(--ink-on-accent); } .ai-pick .card h3 { font-family: 'Anton', sans-serif; font-size: 17px; text-transform: uppercase; } .ai-pick .card .role { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-top: 3px; } .ai-pick .card p { color: var(--muted); font-size: 13px; margin-top: 8px; line-height: 1.45; } .ai-pick .card.sel { border-color: var(--accent-ink); background: rgba(245, 184, 0, 0.06); } .ai-pick .card { cursor: pointer; } /* AI chat surface (functional shell) */ .ai-chat-real { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; } .ai-messages { display: flex; flex-direction: column; gap: 10px; min-height: 120px; max-height: 50vh; overflow-y: auto; padding: 4px 2px 8px; } .ai-msg-real { font-size: 14.5px; line-height: 1.5; padding: 11px 14px; border-radius: 10px; max-width: 92%; } .ai-msg-real.you { background: rgba(91, 155, 213, 0.12); border: 1px solid rgba(91, 155, 213, 0.3); align-self: flex-end; } .ai-msg-real.bot { background: var(--bg2); align-self: flex-start; } .ai-msg-real.bot .who { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .ai-msg-real.bot .live-pill { font-size: 9px; letter-spacing: 0.08em; color: var(--green); background: rgba(92, 196, 106, 0.12); padding: 1px 6px; border-radius: 4px; font-weight: 700; } /* "Try this" chips */ .ai-tries { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 2px 0; } .ai-tries .try-chip { background: var(--fill); border: 1px solid var(--line); color: var(--text); padding: 9px 13px; border-radius: 20px; font-size: 13px; } .ai-tries .try-chip:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .ai-input { padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--line); } .ai-input .inputrow { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--bg2); padding: 7px 9px; border-radius: 8px; } .ai-input .inputrow input { flex: 1; background: transparent; border: 0; color: var(--text); font-family: inherit; font-size: 14px; outline: none; } .ai-input .mic { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; cursor: pointer; } .ai-input .mic svg { width: 16px; height: 16px; fill: var(--bg); } .ai-input .mic.recording { animation: micPulse 1s infinite; } /* ---------- PC dashboard widgets (Home expanded) ---------- */ .dash-stats { display: none; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } @media (min-width: 820px) { .dash-stats { display: grid; } } .dash-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; } .dash-stat .lbl { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .dash-stat .v { font-family: 'Anton', sans-serif; font-size: 26px; margin-top: 6px; } .dash-stat .v.green { color: var(--green); } .dash-stat .v.gold { color: var(--accent-ink); } /* ---------- Toast / status bar ---------- */ #toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 18px); background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font-size: 13px; /* A centred fixed box shrink-wraps to half the viewport before wrapping; width:max-content + a cap keeps long messages one readable pill (MOB-CSS-011). */ width: max-content; max-width: min(92vw, 480px); /* Above #sheet (61) and .te-modal-scrim (90): a toast fired while a sheet or dialog is open must not vanish behind it (MOB-SHELL-005). */ z-index: 95; opacity: 0; pointer-events: none; transition: opacity 0.2s; } @media (min-width: 820px) { #toast { bottom: 24px; } } #toast.show { opacity: 1; } #toast.success { border-color: var(--green); } #toast.error { border-color: var(--red); color: var(--red); } /* ---------- Sheet (slide-up modal for book-a-time, ad flip, etc.) ---------- */ #sheet-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.18s; } #sheet-scrim.show { opacity: 1; pointer-events: auto; } #sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg2); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 61; max-height: 80vh; overflow-y: auto; /* Don't let a scroll past the sheet's end chain into the page behind the scrim (background scroll-through on phone, MOB-SHELL-014). */ overscroll-behavior: contain; transform: translateY(100%); transition: transform 0.22s ease-out; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55); } @media (min-width: 700px) { #sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%) scale(0.95); width: min(520px, 92vw); border-radius: 18px; border: 1px solid var(--line); max-height: 85vh; } #sheet.show { transform: translate(-50%, -50%) scale(1); } } /* Mobile only, the bottom-sheet slide-up. Scoped so it can't override the desktop centred transform above (that bug parked the sheet bottom-right). */ @media (max-width: 699.98px) { #sheet.show { transform: translateY(0); } } #sheet h3 { font-family: 'Anton', sans-serif; font-size: 20px; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.04em; line-height: 1.15; } #sheet .lede { color: var(--muted); font-size: 14px; margin-bottom: 16px; } #sheet .te-book-dt { margin-bottom: 12px; } #sheet .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } #sheet .chips button { background: var(--card); border: 1.5px solid var(--line); color: var(--text); padding: 16px 12px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; line-height: 1.3; } #sheet .chips button .when { display: block; font-family: 'Anton', sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); margin-bottom: 4px; } #sheet .chips button .meta { color: var(--muted); font-size: 12px; } #sheet .chips button.picked { border-color: var(--accent-ink); background: rgba(245, 184, 0, 0.08); } #sheet .chips button.picked .when { color: var(--accent-ink); } #sheet input, #sheet textarea { width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--text); padding: 12px 14px; border-radius: 10px; font-family: inherit; font-size: 14px; margin-bottom: 14px; } #sheet .actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 6px; } #sheet .actions.single { grid-template-columns: 1fr; } #sheet .actions .ghost { background: transparent; border: 1.5px solid var(--line); color: var(--text); border-radius: 12px; padding: 14px; font-family: inherit; font-size: 14px; font-weight: 700; } #sheet .actions .primary { background: var(--gold); color: var(--ink-on-accent); border: 0; border-radius: 12px; padding: 14px; font-family: 'Anton', sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; } #sheet .actions .primary:disabled { opacity: 0.4; } #sheet .warn { background: rgba(245, 184, 0, 0.08); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; } #sheet .warn b { color: var(--accent-ink); } /* ---------- Loading skeleton ---------- */ .loading { color: var(--muted); font-size: 13px; padding: 14px 0; text-align: center; } .te-loading { width: 100%; padding: 24px 0; } .te-loading-head { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; color: var(--muted); } .te-loading-spin { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: splash-spin 0.75s linear infinite; } .te-loading-label { font-size: 14px; font-weight: 700; } .te-loading-skeleton { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .te-loading-home, .te-loading-leads { grid-template-columns: repeat(4, minmax(0, 1fr)); } .te-skeleton-card { min-height: 86px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); } .te-skeleton-line { display: block; width: 58%; height: 11px; margin-top: 12px; border-radius: 999px; background: var(--fill-2); animation: te-skeleton-pulse 1.2s ease-in-out infinite; } .te-skeleton-line.wide { width: 82%; height: 16px; margin-top: 2px; } .te-loading-retry { display: block; margin: 18px auto 0; } .te-loading-retry[hidden] { display: none; } @keyframes te-skeleton-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } @media (max-width: 819px) { .te-loading-skeleton, .te-loading-home, .te-loading-leads { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .te-loading-spin, .te-skeleton-line { animation-duration: 2s; } } /* ---------- Ad Creator (item 5) ---------- */ .adc-root { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; } .adc-input { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .adc-input label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .adc-ta { width: 100%; min-height: 80px; padding: 11px 12px; background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; } .adc-ta:focus { outline: none; border-color: var(--accent-ink); } /* Single-line controls must NOT inherit the textarea's height. `.adc-ta` above is the TEXTAREA style and carries min-height: 80px; inputs and selects borrow it for the same border/background/focus ring, so without this rule every single-line field renders as an 80px box around one line of text (104 of them across Business Information, Onboarding and Command Center). THE TRAP: two earlier attempts to fix this used `height: auto` (in `.op-actions .op-tier` and inline on two selects in app.js). `height` can never override `min-height`, so they looked applied and did nothing. Both are removed with this change. If you add a new single-line control, this rule covers it. */ input.adc-ta, select.adc-ta { min-height: 0; height: 42px; padding: 9px 12px; resize: none; } /* Colour-scheme swatches, pick a palette so two operators never look the same. */ .adc-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; } .adc-sw { position: relative; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; padding: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .adc-sw .adc-sw-dot { position: absolute; right: 4px; bottom: 4px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .adc-sw.on { border-color: var(--accent-ink); } /* Per-card story boxes, a line on each carousel photo, in order. */ .adc-cards { margin-top: 14px; } .adc-card { display: flex; align-items: flex-start; gap: 10px; position: relative; padding: 8px; margin-bottom: 8px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; } .adc-card-order { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--gold); color: var(--ink-on-accent); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; } .adc-card-thumb { flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #000; } .adc-card-note { flex: 1 1 auto; min-height: 44px; padding: 8px 10px; background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; line-height: 1.45; resize: vertical; } .adc-card-note:focus { outline: none; border-color: var(--accent-ink); } .adc-card-note.te-need { border-color: var(--rust, #a8431a); background: rgba(168, 67, 26, 0.12); } .adc-card-x { flex: 0 0 auto; width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.1); color: var(--text-dim, #aaa); font-size: 16px; line-height: 1; } .adc-card-x:hover { background: var(--rust, #a8431a); color: #fff; } .adc-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; } .adc-gen { background: var(--gold); color: var(--ink-on-accent); border: 0; padding: 11px 18px; border-radius: 8px; font-family: 'Anton', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .adc-gen:disabled { opacity: 0.5; cursor: wait; } .adc-gen svg { width: 14px; height: 14px; fill: currentColor; } /* Secondary "ghost" button, same shape/typography as .adc-gen but outlined, so primary actions (Connect, Buy) stay solid gold and Search reads as the secondary action. Fills gold on hover. */ .btn-ghost { background: transparent; color: var(--accent-ink); border: 1px solid var(--gold); padding: 11px 18px; border-radius: 8px; font-family: 'Anton', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s ease, color 0.15s ease; } .btn-ghost:hover { background: var(--gold); color: var(--ink-on-accent); } .btn-ghost:disabled { opacity: 0.5; cursor: wait; } .adc-status { color: var(--muted); font-size: 13px; } .adc-results { display: flex; flex-direction: column; gap: 14px; } .adc-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 8px; flex-wrap: wrap; } .adc-results-head h2 { font-family: 'Anton', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); } .adc-results-sub { color: var(--muted); font-size: 13px; margin-top: 4px; } .adc-download { background: var(--gold); color: var(--ink-on-accent); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-family: 'Anton', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } /* The download row in the ad-pack results header: a primary "Download for Meta" button + a quiet secondary "raw data (.json)" link. */ .adc-dl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } button.adc-download { border: none; cursor: pointer; } button.adc-download:disabled { opacity: 0.6; cursor: default; } /* Demote the secondary .json link so the primary action stands out. */ .adc-dl-row .adc-download:not(.adc-download-primary) { background: transparent; color: var(--accent-ink); border: 1px solid var(--gold); padding: 9px 14px; } .adc-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } /* ---------- Ad Creator upload zone (drag-and-drop + click) ---------- */ .adc-drop { margin-top: 6px; padding: 24px 18px; background: rgba(255, 255, 255, 0.02); border: 2px dashed var(--line); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; color: var(--muted); } .adc-drop:hover, .adc-drop:focus-visible { border-color: var(--accent-ink); color: var(--text); outline: none; } .adc-drop.is-drag { border-color: var(--accent-ink); background: rgba(245, 184, 0, 0.06); color: var(--text); } .adc-drop.is-uploading { cursor: progress; border-color: var(--accent-ink); background: rgba(245, 184, 0, 0.05); pointer-events: none; } .te-spin { display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid rgba(245, 184, 0, 0.3); border-top-color: var(--accent-ink); border-radius: 50%; vertical-align: -2px; margin-right: 7px; animation: splash-spin 0.7s linear infinite; } /* ----- Launch card (Setup: generate page → connect domain → ads) ----- */ .launch-card { margin-top: 14px; padding: 6px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--fill); } .launch-card-ads { margin-top: 16px; } .launch-step { display: flex; gap: 16px; padding: 18px 0; } .launch-card .launch-step + .launch-step { border-top: 1px solid var(--line); } .launch-num { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #14110d; font-family: 'Anton', sans-serif; font-size: 17px; display: flex; align-items: center; justify-content: center; } .launch-body { flex: 1 1 auto; min-width: 0; } .launch-title { font-family: 'Anton', sans-serif; font-size: 18px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); } .launch-sub { font-size: 14px; color: var(--muted); margin-top: 3px; } .domain-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .domain-row .domain-input { flex: 1 1 240px; height: auto; min-width: 0; } .domain-row .adc-gen, .domain-row .btn-ghost { flex: 0 0 auto; white-space: nowrap; } @media (max-width: 560px) { .domain-row .adc-gen, .domain-row .btn-ghost { flex: 1 1 100%; } } .domain-sep { margin: 16px 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; } .domain-sep::before, .domain-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); } .domain-results { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .domain-result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--fill); } .domain-result-name { font-weight: 600; color: var(--text); } .domain-price { color: var(--muted); font-size: 13px; } .domain-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-ink); border: 1px solid var(--accent-ink); border-radius: 5px; padding: 1px 6px; } .domain-taken { font-size: 13px; color: var(--muted); margin-left: auto; } .domain-bought { font-size: 13px; color: #3aaf5c; margin-left: auto; font-weight: 600; } .domain-buy { margin-left: auto; padding: 7px 18px; } /* The "add this DNS record at your registrar" card (Connect → subdomain/BYO). */ .dns-rec { margin: 8px 0 2px; display: inline-flex; flex-direction: column; gap: 5px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--fill); } .dns-rec > div { display: flex; gap: 10px; align-items: baseline; } .dns-rec-k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; min-width: 48px; } .dns-rec-v { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; } .adc-drop-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(245, 184, 0, 0.14); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; } .adc-drop-icon svg { width: 16px; height: 16px; fill: currentColor; } .adc-drop-title { font-family: 'Anton', sans-serif; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); } .adc-drop-sub { font-size: 13px; } .adc-drop-link { color: var(--accent-ink); text-decoration: underline; } .adc-uploads-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: 4px; } .adc-uploads-grid:empty { display: none; } /* Cold / Warm / Hot variant headers */ .adc-temp-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .adc-temp-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); } .adc-temp-badge.temp-cold { color: #5db0e6; border-color: rgba(93, 176, 230, 0.5); background: rgba(93, 176, 230, 0.1); } .adc-temp-badge.temp-warm { color: #e0a24f; border-color: rgba(224, 162, 79, 0.5); background: rgba(224, 162, 79, 0.1); } .adc-temp-badge.temp-hot { color: #e0644f; border-color: rgba(224, 100, 79, 0.5); background: rgba(224, 100, 79, 0.1); } .adc-temp-desc { font-size: 12px; color: var(--muted); } .adc-upload-tile { position: relative; aspect-ratio: 1; background: #0c0d10; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .adc-upload-media { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .adc-upload-badge { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, 0.7); color: #f5b800; font-size: 9px; letter-spacing: 0.08em; font-weight: 700; padding: 2px 5px; border-radius: 3px; } /* A video mid-optimise (background transcode to a browser-safe mp4): dim the tile, pulse the badge, and the JS makes it unpickable until the swap lands. */ .adc-upload-tile.te-processing .adc-upload-media { opacity: 0.45; } .te-picker-tile.te-processing { opacity: 0.55; cursor: not-allowed; } .te-picker-tile.te-processing img, .te-picker-tile.te-processing video { filter: grayscale(0.4); } .adc-upload-badge.te-processing { color: #0c0d10; background: #f5b800; z-index: 2; animation: te-proc-pulse 1.6s ease-in-out infinite; } @keyframes te-proc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .adc-upload-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 6px; font-size: 10px; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adc-upload-x { position: absolute; top: 5px; right: 5px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .adc-upload-x:hover { background: #e0644f; } .adc-upload-x:disabled { opacity: 0.5; } .adc-upload-tile.te-sel { outline: 3px solid var(--gold); outline-offset: -1px; } /* Ads Generator video tiles: a vertical card with a clear "Get transcript" action (wider than the square photo tiles so the button reads). */ .adc-upload-tile[data-kind="video"] { aspect-ratio: auto; overflow: visible; grid-column: span 2; display: flex; flex-direction: column; } .adc-upload-tile[data-kind="video"] .adc-upload-media { order: 0; aspect-ratio: 16 / 9; height: auto; } .adc-upload-tile[data-kind="video"] .adc-upload-name { order: 1; position: static; background: none; color: var(--muted); } .adc-tx-btn { order: 2; margin: 8px; padding: 9px 12px; border: 1px solid var(--gold); background: rgba(245, 184, 0, 0.12); color: var(--accent-ink); border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .adc-tx-btn:hover { background: rgba(245, 184, 0, 0.2); } .adc-tx-btn:disabled { opacity: 0.6; cursor: default; } /* The tile's headline action reads as THE button; siblings stay quiet. Two-class selector on purpose: .adc-ve-btn later in this file also sets color, and at equal specificity it won, painting the label gold-on-gold (the invisible yellow button, 2026-07-07). */ .adc-tx-btn.adc-ve-btn-hero { background: var(--gold); border-color: var(--gold); color: #14110d; font-weight: 800; } .adc-tx-btn.adc-ve-btn-hero:hover { background: var(--gold); filter: brightness(1.06); } .adc-tx-status { order: 3; padding: 0 10px 9px; font-size: 11.5px; color: var(--muted); } .adc-tx-status.working { color: var(--accent-ink); } .adc-tx-status.ok { color: #5ac26a; } .adc-tx-status.err { color: #e06b4f; } /* ---------- Onboarding thumbs + compose/publish bars ---------- */ .adc-thumb-wrap { position: relative; aspect-ratio: 1; background: #0c0d10; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .adc-thumb { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; } .adc-thumb-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; } .adc-cell { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .adc-publish-bar { border-top: 1px solid var(--line); padding-top: 8px; } /* Operators panel (admin master controls). */ .op-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .op-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); } .op-row.on { border-color: var(--gold); background: rgba(245, 184, 0, 0.06); } /* Meta takes all the free space so the action column lines up across EVERY row (kills the old space-between scatter). min-width lets it wrap on phones. */ .op-meta { flex: 1 1 260px; min-width: 220px; } .op-name { font-weight: 800; font-size: 15px; color: var(--text); } .op-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .op-badge { color: var(--accent-ink); font-weight: 800; font-size: 13px; white-space: nowrap; } /* Live-status chips under the name (stage / days / leads / domain / ads). */ .op-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .op-chip { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--muted); background: var(--fill); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; } .op-chip.stuck { color: var(--rust); border-color: rgba(224, 107, 79, 0.5); background: rgba(224, 107, 79, 0.08); } .op-chip.live { color: var(--green); border-color: rgba(92, 196, 106, 0.45); } /* Actions grouped and right-aligned: fixed widths + nowrap so buttons never shrink-wrap ("Open" onto two lines) and land in the SAME column each row. */ .op-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } .op-actions .op-tier { width: 132px; font-size: 13px; } .op-actions .adc-card-btn { white-space: nowrap; flex: 0 0 auto; } .op-actions .op-admin-btn { min-width: 108px; } .op-actions .op-open-btn { min-width: 82px; } /* Manage menu. The card used to carry six controls in a row and read as a wall; the rare and the dangerous ones live in here now. */ .op-manage-wrap { position: relative; flex: 0 0 auto; } .op-manage-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 216px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); padding: 6px; display: flex; flex-direction: column; gap: 4px; } /* An element-level display beats the UA sheet's [hidden] rule, so without this the menu never actually closes (landmine L, same as .opsw-pop). */ .op-manage-pop[hidden] { display: none; } .op-manage-pop .adc-card-btn { width: 100%; text-align: left; justify-content: flex-start; min-width: 0; white-space: nowrap; } /* Remove sits last and reads as the destructive one it is. */ .op-manage-pop .op-remove-btn { border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; } /* Per-operator Twilio number control on the admin onboarding row: that row carries a tall paste-a-number column, so top-align it (only that row). */ .op-row:has(.op-twilio) { align-items: flex-start; } .op-twilio { flex: 0 0 auto; width: 230px; display: flex; flex-direction: column; gap: 2px; } .op-twilio-cur { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .op-twilio-paste { display: flex; flex-direction: column; gap: 6px; } .op-twilio .adc-card-btn { width: 100%; padding: 8px 10px; font-size: 12.5px; } .op-twilio .adc-ta { font-size: 12.5px; padding: 8px 10px; } /* Light / dark segmented toggle (Appearance in Business Information). */ .theme-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .theme-seg-btn { padding: 10px 20px; background: transparent; color: var(--muted); border: 0; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .theme-seg-btn.on { background: var(--gold); color: #241a06; } .theme-seg-btn:not(.on):hover { background: var(--fill); color: var(--text); } /* Manual copy editor (✎ Edit on each ad card / carousel). */ .adc-edit-btn { margin-left: auto; padding: 5px 11px; border-radius: 7px; cursor: pointer; border: 1px solid var(--line); background: var(--fill); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; } .adc-edit-btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .adc-cell-editing { gap: 8px; } .adc-editform { display: flex; flex-direction: column; gap: 6px; } .adc-edit-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; } .adc-edit-input, .adc-edit-ta { width: 100%; padding: 9px 11px; background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; line-height: 1.5; } .adc-edit-ta { resize: vertical; min-height: 120px; } .adc-edit-input:focus, .adc-edit-ta:focus { outline: none; border-color: var(--accent-ink); } .adc-edit-caprow { display: flex; align-items: center; gap: 8px; } .adc-edit-capnum { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--ink-on-accent); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .adc-edit-actions { display: flex; gap: 8px; margin-top: 10px; } /* Clean per-ad footer: route note + Regenerate / Push, pinned to the bottom so the buttons line up across the Cold / Warm / Hot cards. */ .adc-card-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--line); padding-top: 11px; } .adc-route-note { font-size: 12px; color: var(--muted); line-height: 1.45; } .adc-card-actions { display: flex; gap: 8px; } .adc-card-btn { padding: 11px 12px; border-radius: 9px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: var(--fill); color: var(--text); } .adc-card-btn.ghost { flex: 0 0 auto; } .adc-card-btn.primary { flex: 1; background: var(--gold); border-color: var(--accent-ink); color: #241a06; } .adc-card-btn:hover { filter: brightness(1.08); } .adc-card-btn:disabled { opacity: 0.6; cursor: default; } .adc-status.working { color: var(--accent-ink); } .adc-status.ok { color: #5ac26a; } .adc-status.err { color: #e06b4f; } /* Per-ad still-image creative picker */ .adc-imgad { display: flex; flex-direction: column; gap: 8px; } .adc-imgad-label { font-size: 12.5px; font-weight: 700; color: var(--text); } .adc-imgad-strip { display: flex; gap: 6px; flex-wrap: wrap; } .adc-imgad-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; border: 2px solid var(--line); cursor: pointer; opacity: 0.85; transition: opacity 0.12s, border-color 0.12s; } .adc-imgad-thumb:hover { opacity: 1; } .adc-imgad-thumb.sel { border-color: var(--accent-ink); opacity: 1; } .adc-imgad-out { font-size: 12px; color: var(--muted); } .adc-imgad-out.working { color: var(--accent-ink); } .adc-imgad-out.err { color: #e06b4f; } .adc-imgad-preview { width: 100%; max-width: 240px; border-radius: 10px; display: block; margin-bottom: 6px; border: 1px solid var(--line); } /* ---------- Video Editor (AI edit into an ad) ---------- */ .adc-ve { display: flex; flex-direction: column; gap: 12px; } .adc-ve-btn { color: var(--accent-ink); border-color: var(--gold); } .adc-ve-progress { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 8px; text-align: center; } .adc-ve-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: adc-ve-spin 0.9s linear infinite; } @keyframes adc-ve-spin { to { transform: rotate(360deg); } } .adc-ve-review { display: flex; flex-direction: column; gap: 10px; } .adc-ve-player { width: 100%; max-height: 42vh; background: #000; border: 1px solid var(--line); border-radius: var(--radius-md); object-fit: contain; } .adc-ve-pills { display: flex; gap: 6px; flex-wrap: wrap; } .adc-ve-pill { padding: 7px 11px; border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: var(--fill); color: var(--muted); } .adc-ve-pill.sel { border-color: var(--gold); color: var(--accent-ink); } .adc-ve-verdict { font-size: 12px; color: var(--muted); line-height: 1.5; } .adc-ve-label { font-size: 12.5px; font-weight: 700; color: var(--text); } .adc-ve-phrases { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; background: var(--fill); } .adc-ve-phrase { padding: 6px 8px; border-radius: 7px; font-size: 13.5px; line-height: 1.45; cursor: pointer; color: var(--text); } .adc-ve-phrase:hover { background: var(--fill); filter: brightness(1.2); } .adc-ve-phrase.cut { color: var(--muted); text-decoration: line-through; opacity: 0.55; } .adc-ve-hook { background: var(--fill); border: 1px solid var(--line); color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; width: 100%; box-sizing: border-box; } .adc-ve-hook:focus { outline: none; border-color: var(--gold); } .adc-ve-instruction { background: var(--fill); border: 1px solid var(--line); color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; width: 100%; box-sizing: border-box; resize: vertical; } .adc-ve-instruction:focus { outline: none; border-color: var(--gold); } .adc-ve-gatehint { font-size: 12px; color: var(--muted); } .adc-ve-actions { display: flex; gap: 8px; } .adc-ve-usage { font-size: 12px; color: var(--muted); text-align: center; } /* ---------- Video Editor home (#/ads/editor) ---------- */ .veh-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } @media (max-width: 919px) { .veh-jobs { grid-template-columns: 1fr 1fr; } } .veh-empty { font-size: 13px; color: var(--muted); padding: 8px 2px; } .veh-card { background: var(--fill-2); border: 1px solid var(--line); border-radius: 12px; padding: 0; overflow: hidden; cursor: pointer; transition: border-color 0.12s, transform 0.12s; } .veh-card:hover { border-color: var(--gold); transform: translateY(-1px); } .veh-card.err { opacity: 0.7; } /* The card's thumbnail answers "which video is this?" at a glance. */ .veh-thumb { position: relative; aspect-ratio: 16 / 9; background: #171512; display: flex; align-items: center; justify-content: center; } .veh-thumb-v { width: 100%; height: 100%; object-fit: cover; display: block; } .veh-thumb.bare > span { font-size: 26px; opacity: 0.7; } .veh-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; text-shadow: 0 2px 8px #000; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent 45%); } .veh-thumb-dur { position: absolute; right: 6px; bottom: 6px; font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, 0.65); color: #fff; border-radius: 6px; padding: 2px 6px; } .veh-del { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; z-index: 2; } .veh-del:hover { background: rgba(224, 100, 79, 0.9); } .veh-del:disabled { opacity: 0.5; cursor: default; } .veh-card-body { padding: 10px 12px 12px; } .veh-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .veh-status { font-size: 11px; font-weight: 800; letter-spacing: 0.3px; } .veh-status.done { color: #58d68d; } .veh-status.running, .veh-status.queued { color: var(--accent-ink); } .veh-status.error { color: #e0644f; } .veh-when { font-size: 11px; color: var(--muted); } .veh-hook { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .veh-msg { font-size: 12px; color: var(--muted); line-height: 1.35; } /* ---------- Video Editor page (#/editor/) - CapCut for operators ---------- */ .ved-back { display: block; margin: 6px 0 14px; font-size: 13px; color: var(--muted); text-decoration: none; } .ved-back:hover { color: var(--accent-ink); } .ved-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; } @media (min-width: 920px) { .ved-layout { grid-template-columns: minmax(340px, 46%) 1fr; } .ved-stage { position: sticky; top: 12px; } } /* Phone-first editing: most members edit on their phone. Pin the editor deck (player + timeline) under the top bar while the script and tools scroll beneath it, so they can WATCH the edit while tapping lines out - the whole CapCut point. The layout must be block (not grid) here: a sticky grid item only sticks within its own row, which is exactly its own height = a no-op. The label + AI verdict hide to keep the pinned deck short; the render pills stay (they swap the player between the finished renders). */ @media (max-width: 919px) { .ved-layout { display: block; } .ved-stage { position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 6; margin-bottom: 18px; padding: 10px; } .ved-player { max-height: min(30vh, 240px); } .ved-strip { height: 52px; } .ved-strip-hint { display: none; } .ved-stage .adc-ve-label { display: none; } .ved-stage .adc-ve-verdict { display: none; } .ved-stage .adc-ve-pill { padding: 6px 10px; font-size: 12px; } /* Fingers, not cursors: comfortable tap sizes on the edit surfaces. */ .ved-fixbtn { padding: 9px 14px; font-size: 15px; } .ved-chip { padding: 8px 13px; font-size: 14px; } } /* The stage: a dark editor deck the video sits in. */ .ved-stage { background: #0a0908; border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); } .ved-playerwrap { display: flex; justify-content: center; background: #000; border-radius: 12px; overflow: hidden; } .ved-videobox { position: relative; display: inline-block; max-width: 100%; } .ved-player { display: block; max-width: 100%; max-height: 58vh; } .ved-caption { position: absolute; left: 4%; right: 4%; bottom: 30%; display: flex; justify-content: center; align-items: flex-end; gap: 0.22em; flex-wrap: wrap; text-align: center; line-height: 1.02; font-family: 'Anton', 'Archivo', sans-serif; font-weight: 400; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; min-height: 1.1em; z-index: 3; } .ved-caption:active { cursor: grabbing; } .ved-caption.emph { font-size: 1.65em !important; } .ved-capword { text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 6px rgba(0,0,0,0.55); letter-spacing: 0.5px; } .ved-capword.ghost { color: rgba(255,255,255,0.6); font-size: 12px; letter-spacing: 2px; font-family: 'Archivo', sans-serif; text-shadow: none; border: 1px dashed rgba(255,255,255,0.45); border-radius: 999px; padding: 4px 12px; background: rgba(0,0,0,0.35); } /* Timeline strip: the whole video as a filmstrip; dark chunks = removed. */ .ved-strip-hint { margin: 12px 2px 6px; } .ved-strip { position: relative; height: 64px; border-radius: 10px; background: repeating-linear-gradient(90deg, #171512 0 8px, #131109 8px 16px); border: 1px solid var(--line); overflow: hidden; cursor: pointer; /* pan-y: vertical swipes still scroll the page; horizontal drags are ours (the finger scrub). */ touch-action: pan-y; } .ved-clip { position: absolute; top: 0; height: 100%; overflow: hidden; border: 1px solid rgba(245, 184, 0, 0.55); border-radius: 6px; box-sizing: border-box; transition: filter 0.15s, border-color 0.15s; } .ved-clip-thumb { width: 100%; height: 100%; display: block; object-fit: cover; background: #26221c; } .ved-clip .ved-clip-x { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 16px; color: #fff; text-shadow: 0 1px 4px #000; background: rgba(0, 0, 0, 0.35); } .ved-clip.cut { filter: grayscale(1) brightness(0.4); border-color: rgba(255, 255, 255, 0.25); border-style: dashed; } .ved-clip.cut .ved-clip-x { display: flex; } .ved-clip-b { position: absolute; left: 2px; bottom: 2px; font-size: 11px; line-height: 1; text-shadow: 0 1px 3px #000; pointer-events: none; } .ved-row-b { flex: none; font-size: 13px; } .ved-broll-row { width: 100%; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); } .ved-clip.now { border-color: #fff; box-shadow: 0 0 0 1px var(--gold); } .ved-playhead { position: absolute; top: -2px; bottom: -2px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); pointer-events: none; z-index: 2; } .ved-playhead::before { content: ''; position: absolute; top: 0; left: -4px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; } .ved-stage .adc-ve-label { margin-top: 12px; } .ved-stage .adc-ve-pills { margin-top: 8px; } .ved-stage .adc-ve-pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } .ved-stage .adc-ve-pill.sel { background: var(--gold); color: #14110d; border-color: var(--gold); font-weight: 800; } .ved-editpill { border-style: dashed; } .ved-stage .adc-ve-verdict { margin-top: 10px; font-size: 12px; opacity: 0.85; } .ved-panel { min-width: 0; display: flex; flex-direction: column; } /* CapCut-style tool tabs. */ .ved-tabs { display: flex; gap: 4px; background: var(--fill-2); border: 1px solid var(--line); border-radius: 13px; padding: 4px; margin-bottom: 14px; } .ved-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: 0; border-radius: 10px; padding: 9px 4px 7px; color: var(--muted); font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px; cursor: pointer; transition: background 0.12s, color 0.12s; } .ved-tab .ved-tab-ic { font-size: 17px; line-height: 1; } .ved-tab:hover { color: var(--text); } .ved-tab.sel { background: var(--gold); color: #14110d; } .ved-pane { animation: vedfade 0.15s ease; } @keyframes vedfade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } .ved-hint { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; line-height: 1.45; } /* Transcript lines as caption cards with timecodes. */ .ved-panel .adc-ve-phrases { display: flex; flex-direction: column; gap: 8px; } .ved-panel .adc-ve-phrase { display: flex; align-items: center; gap: 10px; background: var(--fill-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px; font-size: 14.5px; line-height: 1.45; cursor: pointer; transition: border-color 0.12s, opacity 0.12s, box-shadow 0.12s, transform 0.12s; } .ved-panel .adc-ve-phrase:hover { border-color: rgba(245, 184, 0, 0.5); } .ved-panel .adc-ve-phrase.cut { opacity: 0.42; border-style: dashed; } .adc-ve-phrase.now { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 4px 16px rgba(245, 184, 0, 0.12); transform: translateX(2px); } .ved-time { flex: none; font-size: 11px; color: var(--muted); background: rgba(255,255,255,0.05); border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums; } .ved-phrasetext { flex: 1; } .ved-fixbtn { flex: none; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; font-size: 13px; padding: 4px 9px; cursor: pointer; } .ved-fixbtn:hover { color: var(--accent-ink); border-color: var(--gold); } .ved-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px 6px; } .ved-chip { border: 1px solid var(--line); background: var(--fill-2); color: var(--text); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; } .ved-chip:hover { border-color: var(--gold); } .ved-chip.fixed { border-color: var(--gold); color: var(--accent-ink); font-weight: 700; } .ved-swatch { width: 36px; height: 36px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset; transition: transform 0.1s; } .ved-swatch:hover { transform: scale(1.12); } .ved-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); transform: scale(1.12); } .ved-record.rec { color: #e0644f; border-color: #e0644f; animation: vedpulse 1.2s infinite; } @keyframes vedpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .ved-record-card { margin-bottom: 6px; } .ved-take { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .ved-take-audio { width: 100%; } /* Sticky action deck: Render is the star, like CapCut's Export. Sits above the mobile bottom nav (fixed, ~70px incl. safe area) below 820px. */ .ved-actionbar { position: sticky; bottom: 0; margin-top: 14px; padding: 12px 0 6px; background: linear-gradient(to top, var(--bg) 62%, transparent); display: flex; flex-direction: column; gap: 8px; z-index: 4; } @media (max-width: 819px) { /* The bottom nav is --bottomnav-h (84px), not 70: the hardcoded 70 hid the bottom 14px of the Render bar behind the nav (MOB-CSS-003 / MOB-SHELL-008). */ .ved-actionbar { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); } } .ved-actionbar .adc-ve-actions { gap: 10px; } .ved-renderbtn { flex: 1; border: 0; border-radius: 12px; padding: 14px 18px; background: var(--gold); color: #14110d; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 6px 22px rgba(245, 184, 0, 0.28); transition: opacity 0.12s, box-shadow 0.12s; } .ved-renderbtn:hover:not(:disabled) { box-shadow: 0 8px 26px rgba(245, 184, 0, 0.4); } .ved-renderbtn:disabled { background: var(--fill-2); color: var(--muted); cursor: not-allowed; box-shadow: none; border: 1px solid var(--line); } .ved-actionbar .adc-card-btn.primary { flex: 1; } /* ---------- Media Library (My Files) ---------- */ .media-quotas { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; } .media-quota { flex: 1; min-width: 220px; } .media-quota-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 5px; } .media-quota-full { color: #e0644f; font-weight: 700; } .media-quota-bar { height: 8px; background: var(--fill-2); border-radius: 5px; overflow: hidden; } .media-quota-fill { height: 100%; background: var(--gold); transition: width 0.2s; } .media-quota-fill.full { background: #e0644f; } .media-folder { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; } .media-folder-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .media-folder-head h2 { font-family: 'Anton', sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; } .media-folder-count { font-size: 12px; color: var(--muted); } .media-folder-actions { margin-left: auto; } .media-empty { font-size: 13px; color: var(--muted); padding: 6px 0; } /* Shared page-photo reposition control */ .mpv2-pos-box { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #000; cursor: grab; touch-action: none; user-select: none; } .mpv2-pos-box:active { cursor: grabbing; } .mpv2-pos-box.contain { cursor: default; } .mpv2-pos-box img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .mpv2-element-photo { margin-bottom: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--fill-1); } .mpv2-element-photo > img { width: 100%; max-height: 140px; object-fit: cover; display: block; border-radius: 7px; margin-bottom: 8px; } .mpv2-hero-sync { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13px; color: var(--text); line-height: 1.4; } .mpv2-hero-sync input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent-ink); flex: 0 0 auto; } /* "Choose from My Files" picker */ .te-picker { position: fixed; inset: 0; z-index: 9200; background: rgba(12, 11, 9, 0.7); display: flex; align-items: center; justify-content: center; padding: 20px; } .te-picker-box { width: 720px; max-width: 100%; max-height: 84vh; overflow: auto; background: var(--card, #1a1815); border: 1px solid var(--line); border-radius: 14px; } .te-picker-head { position: sticky; top: 0; background: var(--card, #1a1815); display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .te-picker-head h3 { margin: 0; font-size: 16px; } .te-picker-x { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; } .te-picker-tile { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; background: #0c0d10; transition: border-color 0.12s; } .te-picker-tile:hover { border-color: var(--accent-ink); } .te-picker-tile img, .te-picker-tile video { width: 100%; height: 96px; object-fit: cover; display: block; } .te-picker-name { font-size: 10px; color: #fff; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); position: absolute; bottom: 0; left: 0; right: 0; } /* ---------- Facebook feed mock card ---------- */ /* These are the actual Facebook News Feed proportions + colours so a member can see exactly how the ad will read in the wild. Strictly for preview, no actual Meta integration. */ .fbm-card { background: #fff; color: #1c1e21; border-radius: 8px; overflow: hidden; border: 1px solid #e4e6eb; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; position: relative; } .fbm-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; } .fbm-avatar { width: 40px; height: 40px; border-radius: 50%; background: #1877f2; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; overflow: hidden; } .fbm-avatar-letter { background: #1877f2; } .fbm-meta { display: flex; flex-direction: column; min-width: 0; } .fbm-meta strong { font-size: 14px; color: #050505; font-weight: 600; } .fbm-sponsored { font-size: 12px; color: #65676b; } .fbm-bodywrap { padding: 6px 14px 10px; } .fbm-body { font-size: 14px; line-height: 1.45; color: #050505; white-space: pre-wrap; margin: 0; } /* Clamp to a fixed 6-line block (and reserve that height) so the video preview and CTA line up across the Cold / Warm / Hot cards, like Facebook's own truncation. min-height keeps short copy from riding up out of line. */ .fbm-body.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; min-height: calc(6 * 1.45em); } .fbm-seemore { margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer; color: #65676b; font-size: 14px; font-weight: 600; font-family: inherit; } .fbm-seemore:hover { text-decoration: underline; } .fbm-creative { position: relative; aspect-ratio: 1.91/1; background: #0c0b09; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 22px; background-image: radial-gradient(circle at 30% 35%, rgba(245, 184, 0, 0.20), transparent 55%), radial-gradient(circle at 75% 70%, rgba(168, 132, 47, 0.25), transparent 50%), linear-gradient(180deg, #1f1a14 0%, #0c0b09 100%); } /* Composed image ad: show the full ad image at its natural shape (it's already the finished creative, logo, brand + headline baked in), not cropped. */ .fbm-creative.fbm-creative-img { padding: 0; background: #000; aspect-ratio: auto; min-height: 180px; } .fbm-creative-img img { width: 100%; height: auto; object-fit: contain; display: block; } .fbm-composing { color: #b9b2a4; font-size: 13px; text-align: center; padding: 44px 20px; } /* Image-ad format toggle (Single / Before & After / Recent work) */ .adc-fmt-bar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .adc-fmt-btn { padding: 8px 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .adc-fmt-btn.active { background: var(--gold); border-color: var(--accent-ink); color: #241a06; } .te-order { position: absolute; top: 5px; left: 5px; z-index: 4; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #241a06; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* Swipeable carousel preview in the feed mock, peek of the next card + dots, so it reads like a real Facebook carousel. */ .fbm-creative.fbm-carousel { padding: 0; aspect-ratio: auto; background: #0c0b09; display: block; } .fbm-carousel-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 10px 4px; scrollbar-width: none; } .fbm-carousel-track::-webkit-scrollbar { display: none; } .fbm-ccard { position: relative; flex: 0 0 86%; scroll-snap-align: center; border-radius: 8px; overflow: hidden; background: #000; } .fbm-ccard img { width: 100%; height: auto; display: block; } .fbm-ccard-label { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; } .fbm-cdots { display: flex; gap: 6px; justify-content: center; padding: 8px 0 12px; } .fbm-cdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: background 0.15s; } .fbm-cdot.on { background: var(--gold); } /* Prev/next arrows over the carousel so every card is checkable without swiping. */ .fbm-carousel { position: relative; } .fbm-carrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s, opacity 0.15s; } .fbm-carrow:hover { background: rgba(0, 0, 0, 0.82); } .fbm-carrow-prev { left: 8px; } .fbm-carrow-next { right: 8px; } .fbm-carrow.hide { opacity: 0; pointer-events: none; } .fbm-creative-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(245, 184, 0, 0.92); color: #1a1408; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .fbm-creative-play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; } .fbm-creative-headline { font-family: 'Anton', Impact, sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; color: #fff; max-width: 86%; } .fbm-creative-tag { position: absolute; bottom: 12px; left: 14px; font-size: 11px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55); } .fbm-cta-bar { display: flex; align-items: center; gap: 10px; background: #f0f2f5; padding: 10px 14px; } .fbm-cta-url { flex: 1; min-width: 0; } .fbm-cta-domain { font-size: 11px; color: #65676b; text-transform: uppercase; letter-spacing: 0.04em; } .fbm-cta-headline { font-size: 14px; font-weight: 600; color: #050505; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fbm-cta-btn { background: #e4e6eb; border: 0; border-radius: 6px; padding: 8px 14px; font-weight: 600; color: #050505; cursor: pointer; font-family: inherit; font-size: 14px; } .fbm-angle-tag { padding: 8px 14px; font-size: 11px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; background: #fff; border-top: 1px solid #e4e6eb; } /* ===================================================================== PHONE POLISH, additive, phone-only. Everything here is guarded inside max-width media queries so the desktop layout cannot regress. Goal: the app looks as good on a phone as on the computer. Tokens unchanged. ===================================================================== */ /* Calendar "Upcoming" agenda. Hidden on desktop (the grid is primary there); the phone media query below flips it on and hides the grid. */ .cal-upcoming { display: none; margin-top: 14px; } .cal-up-h { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; } .cal-up-day { font-size: 13px; font-weight: 800; color: var(--text); margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .cal-up-day:first-of-type { margin-top: 0; } .cal-up-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 10px 12px; margin-bottom: 8px; } .cal-up-time { flex: 0 0 auto; font-family: 'Anton', sans-serif; font-size: 16px; color: var(--accent-ink); min-width: 62px; } .cal-up-tx { flex: 1 1 auto; min-width: 0; } .cal-up-name { font-weight: 800; font-size: 15px; color: var(--text); } .cal-up-job { font-size: 13px; color: var(--muted); margin-top: 2px; } .cal-up-call { flex: 0 0 auto; font-weight: 800; font-size: 13px; color: var(--accent-ink); border: 1px solid var(--gold); border-radius: 999px; padding: 6px 14px; text-decoration: none; /* Rendered as a