/* ============================================================ TRUSTPANEL REDESIGN — ported from design_handoff_trustpanel/styles.css Scoped under .tp-redesign to coexist with the legacy template CSS and Bootstrap utility classes. ============================================================ */ .tp-redesign { /* accent (tweakable) */ --accent: #22C55E; --accent-600: #16a34a; --accent-700: #15803d; --accent-50: #f0fdf4; --accent-100: #dcfce7; --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent); --accent-softer: color-mix(in oklab, var(--accent) 6%, transparent); --accent-ink: color-mix(in oklab, var(--accent) 70%, black); /* status */ --warn: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* stars */ --star: #f5b301; /* radii + motion */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --ease: cubic-bezier(.2,.7,.2,1); /* density (tweakable) */ --pad-card: 20px; --gap: 20px; --row-h: 56px; font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-feature-settings: 'cv11','ss01','ss03'; color-scheme: light; } /* accent swatches (attribute is on , scope cascades to body.tp-redesign) */ [data-accent="emerald"] body.tp-redesign { --accent: #10b981; --accent-600: #059669; --accent-ink: #047857; } [data-accent="forest"] body.tp-redesign { --accent: #15803d; --accent-600: #166534; --accent-ink: #14532d; } [data-accent="indigo"] body.tp-redesign { --accent: #6366f1; --accent-600: #4f46e5; --accent-ink: #4338ca; } [data-accent="amber"] body.tp-redesign { --accent: #d97706; --accent-600: #b45309; --accent-ink: #92400e; } [data-accent="rose"] body.tp-redesign { --accent: #e11d48; --accent-600: #be123c; --accent-ink: #9f1239; } [data-accent="cyan"] body.tp-redesign { --accent: #0891b2; --accent-600: #0e7490; --accent-ink: #155e75; } /* ------- Light theme (default) ------- */ .tp-redesign, [data-theme="light"] body.tp-redesign { --bg: #f6f6f3; --bg-2: #fbfbf9; --panel: #ffffff; --panel-2: #fafaf7; --line: #ece9e2; --line-2: #e3dfd6; --ink: #0b1212; --ink-2: #2a3333; --ink-3: #5a6363; --ink-4: #8a9090; --ink-5: #b5b8b2; --chip: #f1efe8; --chip-ink: #2a3333; --sidebar-bg: #0b1412; --sidebar-ink: #cfd3cf; --sidebar-ink-soft: #8c958d; --sidebar-active-bg: color-mix(in oklab, var(--accent) 22%, transparent); --sidebar-active-ink: #ffffff; --sidebar-line: #1a2521; --shadow-sm: 0 1px 0 rgba(16,24,20,.04), 0 1px 2px rgba(16,24,20,.04); --shadow-md: 0 1px 0 rgba(16,24,20,.04), 0 6px 18px -8px rgba(16,24,20,.12); --shadow-pop: 0 20px 60px -20px rgba(16,24,20,.22), 0 6px 18px -8px rgba(16,24,20,.12); } [data-theme="dark"] body.tp-redesign { --bg: #0a0d0c; --bg-2: #0e1211; --panel: #131816; --panel-2: #171d1b; --line: #212826; --line-2: #2a332f; --ink: #eef2ee; --ink-2: #d2d8d3; --ink-3: #9aa39d; --ink-4: #6c7570; --ink-5: #474e4a; --chip: #1c2320; --chip-ink: #d2d8d3; --sidebar-bg: #070a09; --sidebar-ink: #cfd3cf; --sidebar-ink-soft: #7e8881; --sidebar-active-bg: color-mix(in oklab, var(--accent) 24%, transparent); --sidebar-active-ink: #ffffff; --sidebar-line: #141a17; --shadow-sm: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 1px 0 rgba(0,0,0,.4), 0 12px 28px -12px rgba(0,0,0,.5); --shadow-pop: 0 24px 70px -20px rgba(0,0,0,.7), 0 10px 24px -10px rgba(0,0,0,.5); color-scheme: dark; } /* Density */ [data-density="comfortable"] body.tp-redesign { --pad-card: 22px; --gap: 22px; --row-h: 60px; } [data-density="compact"] body.tp-redesign { --pad-card: 14px; --gap: 14px; --row-h: 44px; } /* Body reset, scoped */ body.tp-redesign { background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } .tp-redesign a:not(.tp-btn) { color: inherit; text-decoration: none; } .tp-redesign a:not(.tp-btn):hover { color: inherit; } /* ============================================================ APP SHELL ============================================================ */ .tp-app { display: grid; grid-template-columns: var(--sb-w, 248px) 1fr; min-height: 100vh; transition: grid-template-columns .28s var(--ease); } .tp-app[data-sb="collapsed"] { --sb-w: 72px; } /* Backdrop: only visible when mobile sidebar is open. Keep it out of grid flow. */ .tp-mobile-backdrop { display: none; } @media (max-width: 991.98px) { .tp-app { grid-template-columns: 1fr; } .tp-app .tp-sidebar { position: fixed; z-index: 90; width: 248px; transform: translateX(-100%); transition: transform .24s var(--ease); } .tp-app[data-sb-mobile="open"] .tp-sidebar { transform: none; } .tp-app[data-sb-mobile="open"] .tp-mobile-backdrop { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.4); } } /* ============================================================ SIDEBAR ============================================================ */ .tp-sidebar { background: var(--sidebar-bg); color: var(--sidebar-ink); border-right: 1px solid var(--sidebar-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; } .tp-sb-brand { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--sidebar-line); } .tp-sb-logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-ink)); display: grid; place-items: center; color: #fff; box-shadow: inset 0 -8px 16px rgba(0,0,0,.18); flex: none; overflow: hidden; } .tp-sb-logo img { width: 100%; height: 100%; object-fit: cover; } .tp-sb-logo i { font-size: 14px; line-height: 1; } /* When a custom SVG mark is present, drop the gradient tile & preserve the artwork's own aspect ratio (the TrustPanel icon is ~5:4, not a square). */ .tp-sb-logo:has(img[src$=".svg"]) { background: none; box-shadow: none; border-radius: 0; width: auto; height: 22px; } .tp-sb-logo:has(img[src$=".svg"]) img { width: auto; height: 100%; object-fit: contain; } .tp-sb-wordmark { font-weight: 600; letter-spacing: -.01em; font-size: 16px; white-space: nowrap; overflow: hidden; color: #fff; } .tp-sb-wordmark em { font-style: normal; color: var(--accent); } .tp-sb-wordmark-svg { height: 14px; width: auto; display: block; flex: none; max-width: 160px; } .tp-app[data-sb="collapsed"] .tp-sb-wordmark-svg { display: none; } .tp-sb-collapse { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--sidebar-ink-soft); background: transparent; border: 0; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .tp-sb-collapse:hover { background: rgba(255,255,255,.06); color: var(--sidebar-ink); } .tp-app[data-sb="collapsed"] .tp-sb-wordmark, .tp-app[data-sb="collapsed"] .tp-sb-logo { display: none; } .tp-app[data-sb="collapsed"] .tp-sb-brand { padding: 0; justify-content: center; } .tp-app[data-sb="collapsed"] .tp-sb-collapse { margin: 0; } .tp-app[data-sb="collapsed"] .tp-sb-collapse i { transform: rotate(180deg); } .tp-sb-nav { padding: 14px 10px; flex: 1; overflow-y: auto; } .tp-sb-nav::-webkit-scrollbar { width: 6px; } .tp-sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 10px; } .tp-sb-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-ink-soft); padding: 14px 12px 6px; } .tp-app[data-sb="collapsed"] .tp-sb-group-label { display: none; } .tp-sb-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0; border-radius: 10px; color: var(--sidebar-ink) !important; font-size: 13.5px; font-weight: 450; white-space: nowrap; position: relative; transition: background .15s var(--ease), color .15s var(--ease); } .tp-sb-item:hover { background: rgba(255,255,255,.05); color: #fff !important; } .tp-sb-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-ink) !important; font-weight: 500; } .tp-sb-item.active::before { content: ''; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 2px; background: var(--accent); border-radius: 2px; } .tp-sb-item i { font-size: 18px; width: 18px; text-align: center; flex: none; line-height: 1; } .tp-sb-badge { margin-left: auto; background: color-mix(in oklab, var(--accent) 30%, transparent); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 7px; min-width: 20px; text-align: center; line-height: 1.4; } .tp-app[data-sb="collapsed"] .tp-sb-item { justify-content: center; padding: 10px 0; } .tp-app[data-sb="collapsed"] .tp-sb-item-label, .tp-app[data-sb="collapsed"] .tp-sb-badge { display: none; } .tp-app[data-sb="collapsed"] .tp-sb-item.active::before { left: 6px; } .tp-sb-foot { border-top: 1px solid var(--sidebar-line); padding: 12px; position: relative; } .tp-biz-switch { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 0; width: 100%; text-align: left; cursor: pointer; transition: background .15s var(--ease); } .tp-biz-switch:hover { background: rgba(255,255,255,.08); } .tp-biz-avatar { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #6aa9ff, #4e6cef); display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 13px; flex: none; overflow: hidden; } .tp-biz-avatar img { width: 100%; height: 100%; object-fit: cover; } .tp-biz-text { min-width: 0; flex: 1; } .tp-biz-text .tp-biz-name { display: block; font-size: 13px; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-biz-text .tp-biz-sub { display: block; font-size: 11px; color: var(--sidebar-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-biz-caret { color: var(--sidebar-ink-soft); font-size: 12px; } .tp-app[data-sb="collapsed"] .tp-biz-text, .tp-app[data-sb="collapsed"] .tp-biz-caret { display: none; } .tp-app[data-sb="collapsed"] .tp-biz-switch { justify-content: center; padding: 6px; } .tp-biz-dropdown { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); background: #0f1b17; border: 1px solid var(--sidebar-line); border-radius: 12px; overflow: hidden; z-index: 100; box-shadow: var(--shadow-pop); display: none; max-height: 60vh; overflow-y: auto; } .tp-biz-switch[aria-expanded="true"] + .tp-biz-dropdown { display: block; } .tp-biz-drop-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--sidebar-ink) !important; text-decoration: none; transition: background .15s var(--ease); } .tp-biz-drop-item:hover { background: rgba(255,255,255,.06); } .tp-biz-drop-item--active { background: rgba(255,255,255,.04); } .tp-biz-drop-item img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: none; } .tp-biz-drop-item small { display: block; color: var(--sidebar-ink-soft); font-size: 11px; } .tp-biz-drop-divider { height: 1px; background: rgba(255,255,255,.08); margin: 0 12px; } .tp-biz-drop-add { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: none; border: 0; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; text-align: left; transition: background .15s var(--ease); } .tp-biz-drop-add:hover { background: rgba(255,255,255,.06); } /* ============================================================ MAIN + TOPBAR ============================================================ */ .tp-main { min-width: 0; display: flex; flex-direction: column; } .tp-topbar { height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 28px; background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .tp-bc { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); } .tp-bc .tp-bc-now { color: var(--ink); font-weight: 500; font-size: 15px; } .tp-bc .tp-bc-sep { color: var(--ink-5); } .tp-mobile-btn { display: none; width: 38px; height: 38px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); align-items: center; justify-content: center; color: var(--ink-2); cursor: pointer; } @media (max-width: 991.98px) { .tp-mobile-btn { display: inline-flex; } } .tp-searchbar { margin-left: 16px; flex: 1; max-width: 440px; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--ink-3); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .tp-searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-softer); } .tp-searchbar input { flex: 1; border: 0; background: none; outline: none; color: var(--ink); font-size: 13.5px; } .tp-kbd { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; background: var(--chip); color: var(--ink-3); border-radius: 6px; padding: 2px 6px; border: 1px solid var(--line); } .tp-tb-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } .tp-icon-btn { width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--ink-2); background: transparent; border: 0; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); position: relative; text-decoration: none; } .tp-icon-btn:hover { background: var(--chip); color: var(--ink); } .tp-icon-btn i { font-size: 18px; line-height: 1; } .tp-icon-btn .tp-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); } .tp-user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px; background: transparent; border: 0; cursor: pointer; transition: background .15s var(--ease); color: var(--ink); } .tp-user-chip:hover { background: var(--chip); } .tp-user-avatar { width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(135deg, #f6d365, #fda085); color: #fff; font-weight: 600; display: grid; place-items: center; font-size: 12px; overflow: hidden; flex: none; } .tp-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .tp-user-name { font-size: 13px; font-weight: 500; } /* dropdown menus in topbar (notif, user) */ .tp-dropdown { position: relative; } .tp-dropdown-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); min-width: 260px; overflow: hidden; display: none; } .tp-dropdown.open > .tp-dropdown-menu { display: block; } .tp-dropdown-head { padding: 12px 14px; border-bottom: 1px solid var(--line); } .tp-dropdown-head h6 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); } .tp-dropdown-head p { margin: 2px 0 0; font-size: 12px; color: var(--ink-4); } .tp-dropdown-body { padding: 4px; max-height: 340px; overflow-y: auto; } .tp-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--ink-2) !important; font-size: 13px; text-decoration: none; transition: background .15s var(--ease); } .tp-dropdown-item:hover { background: var(--panel-2); color: var(--ink) !important; } .tp-dropdown-item i { font-size: 15px; color: var(--ink-4); } .tp-dropdown-foot { padding: 10px 14px; border-top: 1px solid var(--line); text-align: center; } .tp-dropdown-foot a { color: var(--accent-ink); font-size: 12.5px; font-weight: 500; } /* ============================================================ PAGE CONTAINER ============================================================ */ .tp-page { padding: 28px; max-width: 1440px; width: 100%; margin: 0 auto; } .tp-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .tp-page-title { font-family: 'Instrument Serif', 'Georgia', serif; font-weight: 400; font-size: 40px; letter-spacing: -.01em; line-height: 1; margin: 0; color: var(--ink); } .tp-page-title em { font-style: italic; color: var(--accent); } .tp-page-sub { color: var(--ink-3); font-size: 14px; margin-top: 8px; } .tp-page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ============================================================ GENERIC ELEMENTS ============================================================ */ .tp-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--pad-card); } .tp-card-bare { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); } .tp-card-title { font-size: 13px; font-weight: 500; color: var(--ink-2); } .tp-card-sub { font-size: 12px; color: var(--ink-4); } .tp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; transition: background .15s var(--ease), transform .05s var(--ease), color .15s var(--ease), border-color .15s var(--ease); border: 1px solid transparent; white-space: nowrap; cursor: pointer; background: transparent; text-decoration: none; line-height: 1.2; } .tp-btn:active { transform: translateY(1px); } .tp-btn[disabled], .tp-btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .tp-btn-primary { background: var(--ink); color: var(--bg); } .tp-btn-primary:hover { background: color-mix(in oklab, var(--ink) 90%, var(--accent)); color: var(--bg); } .tp-btn-accent { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.12); } .tp-btn-accent:hover { background: var(--accent-600); color: #fff; } .tp-btn-ghost { background: var(--panel); border-color: var(--line); color: var(--ink-2); } .tp-btn-ghost:hover { background: var(--chip); color: var(--ink); } .tp-btn-danger { background: color-mix(in oklab, var(--danger) 10%, transparent); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 20%, transparent); } .tp-btn-danger:hover { background: color-mix(in oklab, var(--danger) 18%, transparent); color: var(--danger); } .tp-btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 8px; } .tp-btn i { font-size: 14px; line-height: 1; } .tp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; line-height: 1.5; } .tp-chip-accent { background: var(--accent-soft); color: var(--accent-ink); } .tp-chip-warn { background: color-mix(in oklab, var(--warn) 14%, transparent); color: color-mix(in oklab, var(--warn) 70%, black); } .tp-chip-danger { background: color-mix(in oklab, var(--danger) 10%, transparent); color: var(--danger); } .tp-chip-outline { background: transparent; border-color: var(--line); color: var(--ink-2); } .tp-chip i { font-size: 11px; line-height: 1; } /* stars */ .tp-stars { display: inline-flex; gap: 2px; color: var(--star); font-size: 14px; line-height: 1; } .tp-stars .dim { color: color-mix(in oklab, var(--star) 20%, transparent); } /* fields */ .tp-field { display: flex; flex-direction: column; gap: 6px; } .tp-field label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; } .tp-input, .tp-select, .tp-textarea { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); font-size: 13.5px; font-family: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .tp-input:focus, .tp-select:focus, .tp-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-softer); } .tp-input::placeholder, .tp-textarea::placeholder { color: var(--ink-4); } .tp-select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: right 14px top 16px, right 10px top 16px; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .tp-textarea { min-height: 96px; resize: vertical; } /* toggle */ .tp-toggle { width: 36px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s var(--ease); flex: none; border: 0; cursor: pointer; padding: 0; } .tp-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .2s var(--ease); } .tp-toggle[data-on="true"] { background: var(--accent); } .tp-toggle[data-on="true"]::after { left: 18px; } /* segmented */ .tp-segmented { display: inline-flex; padding: 3px; background: var(--chip); border-radius: 10px; gap: 2px; } .tp-segmented button { padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); background: transparent; border: 0; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .tp-segmented button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); } .tp-hr { height: 1px; background: var(--line); border: 0; margin: 0; } /* ============================================================ TWEAKS PANEL ============================================================ */ .tp-tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 80; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); width: 290px; overflow: hidden; font-size: 13px; transition: transform .24s var(--ease), opacity .24s var(--ease); } .tp-tweaks[data-open="false"] { transform: translateY(20px) scale(.98); opacity: 0; pointer-events: none; } .tp-tweaks-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink); } .tp-tweaks-title { font-weight: 600; } .tp-tweaks-title small { color: var(--ink-4); font-weight: 400; margin-left: 6px; } .tp-tweaks-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; } .tp-tweak-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tp-tweak-row label { color: var(--ink-3); font-size: 12.5px; } .tp-swatches { display: flex; gap: 6px; } .tp-swatch { width: 22px; height: 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .1s var(--ease), border-color .15s var(--ease); } .tp-swatch[data-active="true"] { border-color: var(--ink); transform: scale(1.08); } /* ============================================================ DASHBOARD ============================================================ */ .tp-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); } @media (max-width: 991.98px) { .tp-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .tp-kpi-grid { grid-template-columns: 1fr; } } .tp-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .tp-kpi-label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; display: flex; align-items: center; gap: 8px; } .tp-kpi-label i { color: var(--ink-4); font-size: 14px; } .tp-kpi-value { font-family: 'Geist', 'Inter', sans-serif; font-weight: 500; font-size: 30px; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); display: flex; align-items: baseline; gap: 8px; } .tp-kpi-unit { font-size: 14px; color: var(--ink-4); font-weight: 400; } .tp-kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); } .tp-kpi-delta.up { color: var(--accent-ink); } .tp-kpi-delta.down { color: var(--danger); } .tp-kpi-spark { position: absolute; right: 12px; bottom: 10px; opacity: .9; } .tp-kpi-stars { margin-top: 2px; } .tp-two-col { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--gap); margin-bottom: var(--gap); } @media (max-width: 991.98px) { .tp-two-col { grid-template-columns: 1fr; } } .tp-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; } .tp-section-title { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; } .tp-section-title small { font-weight: 400; color: var(--ink-4); font-size: 12.5px; } /* trend chart */ .tp-trend { position: relative; height: 220px; width: 100%; } .tp-trend svg { width: 100%; height: 100%; display: block; } /* review stream */ .tp-review-list { display: flex; flex-direction: column; gap: 10px; } .tp-review-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; transition: background .15s var(--ease); } .tp-review-row:hover { background: var(--panel-2); } .tp-review-avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent-100), var(--accent)); color: #fff; font-weight: 600; display: grid; place-items: center; font-size: 13px; flex: none; overflow: hidden; text-transform: uppercase; } .tp-review-avatar img { width: 100%; height: 100%; object-fit: cover; } .tp-review-avatar.a2 { background: linear-gradient(135deg, #bfdbfe, #3b82f6); } .tp-review-avatar.a3 { background: linear-gradient(135deg, #fecaca, #ef4444); } .tp-review-avatar.a4 { background: linear-gradient(135deg, #fde68a, #f59e0b); } .tp-review-avatar.a5 { background: linear-gradient(135deg, #ddd6fe, #7c3aed); } .tp-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tp-review-name { font-weight: 500; font-size: 14px; color: var(--ink); } .tp-review-meta { color: var(--ink-4); font-size: 12px; display: inline-flex; gap: 8px; align-items: center; } .tp-review-text { color: var(--ink-2); margin-top: 6px; font-size: 13.5px; line-height: 1.55; } .tp-review-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } /* platform breakdown */ .tp-platform-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; } .tp-platform-row + .tp-platform-row { border-top: 1px solid var(--line); } .tp-platform-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; } .tp-platform-bar span { display: block; height: 100%; border-radius: 999px; } .tp-platform-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-3); } .tp-platform-meta b { color: var(--ink); font-weight: 500; } /* actions feed */ .tp-action-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px; transition: background .15s var(--ease); color: inherit; text-decoration: none; } .tp-action-row:hover { background: var(--panel-2); } .tp-action-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; } .tp-action-icon.warn { background: color-mix(in oklab, var(--warn) 14%, transparent); color: color-mix(in oklab, var(--warn) 80%, black); } .tp-action-icon.danger { background: color-mix(in oklab, var(--danger) 10%, transparent); color: var(--danger); } .tp-action-icon i { font-size: 14px; } .tp-action-body { flex: 1; min-width: 0; } .tp-action-title { font-size: 13.5px; color: var(--ink); font-weight: 500; } .tp-action-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } /* keyword cloud */ .tp-keyword-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .tp-keyword { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 500; } .tp-keyword .count { font-family: 'Geist Mono', monospace; color: var(--ink-4); } /* hero welcome card */ .tp-welcome { background: radial-gradient(1200px 300px at 90% -20%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 70%), linear-gradient(180deg, var(--panel), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 28px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-bottom: var(--gap); position: relative; overflow: hidden; } @media (max-width: 991.98px) { .tp-welcome { grid-template-columns: 1fr; } } .tp-welcome h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 34px; letter-spacing: -.01em; line-height: 1.1; margin: 0; color: var(--ink); } .tp-welcome h2 em { font-style: italic; color: var(--accent); } .tp-welcome-sub { color: var(--ink-3); margin-top: 8px; max-width: 540px; } .tp-welcome-cta { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; } .tp-welcome-rating { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; } .tp-welcome-rating .big { font-size: 40px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-family: 'Geist', 'Inter', sans-serif; line-height: 1; } .tp-welcome-rating .base { color: var(--ink-4); font-size: 13px; } .tp-welcome-bubbles { display: grid; gap: 8px; } .tp-bubble { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); min-width: 230px; } .tp-bubble-ic { width: 24px; height: 24px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; } .tp-bubble-ic i { font-size: 11px; } .tp-bubble b { font-weight: 500; color: var(--ink); } .tp-bubble .sub { color: var(--ink-4); font-size: 12px; margin-left: auto; } /* ============================================================ MANAGE REVIEWS ============================================================ */ .tp-filters-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--gap); } .tp-filters-bar .tp-searchbar { margin: 0; min-width: 240px; max-width: 320px; flex: 1; } .tp-filters-bar .tp-select { width: auto; min-width: 130px; padding: 8px 32px 8px 12px; } .tp-reviews-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--gap); } @media (max-width: 991.98px) { .tp-reviews-layout { grid-template-columns: 1fr; } } .tp-reviews-side .tp-card { padding: 0; } .tp-side-list { display: flex; flex-direction: column; } .tp-side-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-left: 2px solid transparent; cursor: pointer; font-size: 13.5px; color: var(--ink-2); background: transparent; border-top: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; transition: background .15s var(--ease); } .tp-side-item + .tp-side-item { border-top: 1px solid var(--line); } .tp-side-item:hover { background: var(--panel-2); } .tp-side-item[aria-pressed="true"] { background: var(--accent-softer); border-left-color: var(--accent); color: var(--ink); font-weight: 500; } .tp-side-item .count { color: var(--ink-4); font-weight: 500; font-size: 12.5px; font-family: 'Geist Mono', monospace; } .tp-side-item[aria-pressed="true"] .count { color: var(--accent-ink); } .tp-review-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; margin-bottom: 12px; overflow: hidden; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .tp-review-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); } .tp-rc-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; } .tp-rc-head .tp-review-avatar { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; } .tp-rc-info { flex: 1; min-width: 0; } .tp-rc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tp-rc-name { font-weight: 500; color: var(--ink); font-size: 14px; } .tp-rc-email { color: var(--ink-4); font-size: 12.5px; } .tp-rc-rating-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .tp-rc-body { padding: 0 18px 16px; } .tp-rc-title { font-weight: 600; font-size: 15px; margin: 2px 0 6px; color: var(--ink); } .tp-rc-text { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; margin: 0; } .tp-rc-actions { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; } .tp-rc-actions .spacer { flex: 1; } .tp-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; color: var(--ink-3); background: transparent; border: 0; cursor: pointer; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); } .tp-link-btn:hover { background: var(--chip); color: var(--ink); } .tp-link-btn i { font-size: 13px; } .tp-reply-panel { border-top: 1px solid var(--line); background: var(--panel-2); padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; animation: tpSlideDown .2s var(--ease); } @keyframes tpSlideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .tp-reply-panel .tp-review-avatar { width: 32px; height: 32px; font-size: 12px; } .tp-reply-wrap { flex: 1; display: flex; flex-direction: column; gap: 8px; } .tp-reply-textarea { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 72px; font-size: 13.5px; color: var(--ink); resize: vertical; font-family: inherit; } .tp-reply-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-softer); } .tp-reply-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tp-ai-suggest { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, transparent), color-mix(in oklab, var(--info) 12%, transparent)); border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s var(--ease); } .tp-ai-suggest:hover { background: var(--accent-soft); color: var(--accent-ink); } .tp-ai-suggest i { font-size: 12px; } .tp-owner-reply { border-top: 1px dashed var(--line); padding: 12px 18px; background: var(--panel-2); display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--ink-2); } .tp-owner-reply .tag { font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); margin-right: 8px; } /* platform tabs */ .tp-ptabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .tp-ptab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-3); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s var(--ease); } .tp-ptab:hover { color: var(--ink); border-color: var(--line-2); } .tp-ptab[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .tp-ptab[aria-pressed="true"] .tp-ptab-count { background: rgba(255,255,255,.18); color: #fff; } .tp-ptab-count { font-family: 'Geist Mono', monospace; background: var(--chip); color: var(--ink-3); padding: 1px 7px; border-radius: 999px; font-size: 11px; } .tp-ptab i { font-size: 13px; } /* ============================================================ BUSINESS SETTINGS ============================================================ */ .tp-settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--gap); } @media (max-width: 767.98px) { .tp-settings-layout { grid-template-columns: 1fr; } } .tp-settings-side { position: sticky; top: 88px; align-self: flex-start; } .tp-settings-side a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink-3); font-size: 13.5px; margin-bottom: 2px; text-decoration: none; transition: all .15s var(--ease); } .tp-settings-side a:hover { background: var(--chip); color: var(--ink); } .tp-settings-side a.active { background: var(--accent-softer); color: var(--accent-ink); font-weight: 500; } .tp-settings-side a i { font-size: 15px; } .tp-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px; } @media (max-width: 767.98px) { .tp-form-grid { grid-template-columns: 1fr; } } .tp-form-grid .full { grid-column: 1 / -1; } .tp-logo-upload { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px dashed var(--line-2); border-radius: 12px; } .tp-logo-thumb { width: 76px; height: 76px; border-radius: 12px; background: linear-gradient(135deg, #8ec6f7 0%, #4aa1e6 50%, #1e6fbf 100%); position: relative; overflow: hidden; flex: none; box-shadow: inset 0 -10px 20px rgba(0,0,0,.15); } .tp-logo-thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .tp-logo-thumb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 50%); } .tp-logo-text b { font-size: 14px; font-weight: 500; color: var(--ink); } .tp-logo-text p { color: var(--ink-4); font-size: 12.5px; margin: 4px 0 8px; } .tp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tp-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); } .tp-table td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; } .tp-table tr:last-child td { border-bottom: 0; } .tp-table tbody tr { transition: background .15s var(--ease); } .tp-table tbody tr:hover { background: var(--panel-2); } /* ============================================================ CONNECT PLATFORMS ============================================================ */ .tp-integrations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } @media (max-width: 991.98px) { .tp-integrations-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .tp-integrations-grid { grid-template-columns: 1fr; } } .tp-integration { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .tp-integration:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); } .tp-integ-head { display: flex; align-items: flex-start; gap: 12px; } .tp-integ-logo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); flex: none; font-size: 20px; } .tp-integ-name { font-weight: 600; font-size: 15px; color: var(--ink); } .tp-integ-sub { color: var(--ink-4); font-size: 12.5px; margin-top: 2px; } .tp-integ-status { margin-left: auto; } .tp-integ-desc { color: var(--ink-3); font-size: 13px; line-height: 1.5; margin: 0; } .tp-integ-stats { display: flex; gap: 16px; padding: 12px; background: var(--panel-2); border-radius: 10px; border: 1px solid var(--line); } .tp-integ-stat { flex: 1; } .tp-integ-stat-label { font-size: 11.5px; color: var(--ink-4); } .tp-integ-stat-val { font-size: 14px; font-weight: 600; color: var(--ink); font-family: 'Geist Mono', monospace; } .tp-integ-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; } /* ============================================================ RATING WIDGETS ============================================================ */ .tp-widgets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } @media (max-width: 991.98px) { .tp-widgets-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .tp-widgets-grid { grid-template-columns: 1fr; } } .tp-widget-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .tp-widget-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); } .tp-widget-preview { height: 200px; background: radial-gradient(600px 200px at 50% -20%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 70%), var(--panel-2); display: grid; place-items: center; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .tp-widget-preview.plain { background: var(--panel-2); } .tp-widget-meta { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } .tp-widget-name { font-weight: 600; font-size: 14.5px; color: var(--ink); } .tp-widget-sub { color: var(--ink-4); font-size: 12.5px; } .tp-widget-foot { padding: 0 18px 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tp-widget-foot .spacer { flex: 1; } .tp-wp-card { background: #fff; color: #0b1212; border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px -10px rgba(0,0,0,.2); font-family: 'Geist', 'Inter', sans-serif; width: 82%; } .tp-wp-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #0b1212; } .tp-wp-sub { font-size: 11.5px; color: #5a6363; } .tp-wp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px -8px rgba(0,0,0,.2); font-size: 12px; color: #0b1212; } /* ============================================================ PACKAGE / BILLING ============================================================ */ .tp-billing-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); margin-bottom: var(--gap); } @media (max-width: 991.98px) { .tp-billing-hero { grid-template-columns: 1fr; } } .tp-billing-usage { display: flex; flex-direction: column; gap: 12px; } .tp-usage-row { display: flex; flex-direction: column; gap: 6px; } .tp-usage-row .top { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); } .tp-usage-row .top b { font-weight: 500; } .tp-usage-row .top span { color: var(--ink-4); font-family: 'Geist Mono', monospace; font-size: 12.5px; } .tp-usage-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; } .tp-usage-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .tp-usage-bar.over span { background: var(--danger); } .tp-usage-warn { color: var(--danger); font-size: 12px; } .tp-billing-toggle { display: inline-flex; padding: 3px; background: var(--chip); border-radius: 10px; gap: 2px; margin: 0 auto 22px; } .tp-billing-toggle button { padding: 8px 20px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .tp-billing-toggle button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); } .tp-save-chip { background: var(--accent-soft); color: var(--accent-ink); padding: 2px 7px; border-radius: 999px; font-size: 11px; } .tp-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } @media (max-width: 1199.98px) { .tp-plans { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .tp-plans { grid-template-columns: 1fr; } } .tp-plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; display: flex; flex-direction: column; gap: 16px; position: relative; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .tp-plan:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); } .tp-plan.highlight { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer), var(--shadow-md); } .tp-plan.current { background: linear-gradient(180deg, var(--accent-softer), var(--panel) 40%); border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); } .tp-plan-label { display: flex; align-items: center; gap: 6px; } .tp-plan-name { font-weight: 600; font-size: 15px; color: var(--ink); } .tp-plan-tag { background: var(--accent); color: #fff; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; } .tp-plan-tag.ghost { background: transparent; border: 1px solid var(--accent); color: var(--accent-ink); } .tp-plan-price { display: flex; align-items: baseline; gap: 4px; } .tp-plan-price .amt { font-family: 'Geist', 'Inter', sans-serif; font-weight: 500; font-size: 44px; letter-spacing: -.02em; line-height: 1; color: var(--ink); } .tp-plan-price .per { color: var(--ink-4); font-size: 13px; } .tp-plan-desc { color: var(--ink-3); font-size: 13px; margin: 0; } .tp-plan-features { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } .tp-plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2); } .tp-plan-features li i { color: var(--accent); flex: none; font-size: 14px; margin-top: 2px; } .tp-plan-cta { margin-top: auto; } .tp-plan-cta .tp-btn { width: 100%; justify-content: center; padding: 10px; } /* ============================================================ HELPERS ============================================================ */ .tp-grow { flex: 1; } .tp-row { display: flex; align-items: center; gap: 10px; } .tp-col { display: flex; flex-direction: column; gap: 10px; } .tp-mt-6 { margin-top: 6px; } .tp-mt-12 { margin-top: 12px; } .tp-mt-20 { margin-top: 20px; } .tp-muted { color: var(--ink-4); } .tp-small { font-size: 12.5px; } .tp-pill-sep { display: inline-block; width: 2px; height: 2px; border-radius: 999px; background: var(--ink-5); margin: 0 6px; vertical-align: 3px; } /* scrollbar on the whole shell */ body.tp-redesign ::-webkit-scrollbar { width: 10px; height: 10px; } body.tp-redesign ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid var(--bg); } body.tp-redesign ::-webkit-scrollbar-thumb:hover { background: var(--ink-5); } body.tp-redesign ::-webkit-scrollbar-track { background: transparent; } /* alert wrapped into redesign (used for business-not-completed alert inherited from master layout) */ .tp-redesign .alert.alert--warning { background: color-mix(in oklab, var(--warn) 10%, transparent); border: 1px solid color-mix(in oklab, var(--warn) 25%, transparent); color: color-mix(in oklab, var(--warn) 70%, black); border-radius: var(--r-md); padding: 12px 14px; } .tp-redesign .alert.alert--warning .alert__icon { color: var(--warn); font-size: 18px; } /* Preloader should inherit bg */ body.tp-redesign .preloader { background: var(--bg); } body.tp-redesign .preloader .text { color: var(--ink); } body.tp-redesign .body-overlay, body.tp-redesign .sidebar-overlay { background: rgba(0,0,0,.45); } /* Smooth anchor scroll that respects the sticky 64px topbar */ body.tp-redesign { scroll-behavior: smooth; } .tp-redesign [id] { scroll-margin-top: 88px; } /* ============================================================ POLISH — legacy widgets inside the new shell ============================================================ */ /* Bootstrap session-notify alerts */ .tp-redesign .alert-dismissible .btn-close { filter: invert(var(--tp-close-invert, 0)); } [data-theme="dark"] body.tp-redesign .alert-dismissible .btn-close { filter: invert(1); opacity: .7; } [data-theme="dark"] body.tp-redesign .alert-success { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--ink); border-color: color-mix(in oklab, var(--accent) 30%, transparent); } [data-theme="dark"] body.tp-redesign .alert-danger { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--ink); border-color: color-mix(in oklab, var(--danger) 30%, transparent); } [data-theme="dark"] body.tp-redesign .alert-info, [data-theme="dark"] body.tp-redesign .alert-warning { background: color-mix(in oklab, var(--warn) 14%, transparent); color: var(--ink); border-color: color-mix(in oklab, var(--warn) 30%, transparent); } /* Bootstrap .badge inside redesign — used by external-source badges */ .tp-redesign .badge { font-weight: 500; border-radius: 6px; padding: 3px 7px; } /* Legacy .form--control / .form-control / .form-select — used by business settings + password forms */ .tp-redesign .form--control, .tp-redesign .form-control, .tp-redesign .form-select { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; font-size: 13.5px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .tp-redesign .form--control:focus, .tp-redesign .form-control:focus, .tp-redesign .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-softer); outline: 0; background: var(--panel); color: var(--ink); } .tp-redesign .form--control::placeholder, .tp-redesign .form-control::placeholder { color: var(--ink-4); } .tp-redesign .form--control[readonly], .tp-redesign .form-control[readonly] { background: var(--panel-2); color: var(--ink-3); } .tp-redesign .form--control[disabled], .tp-redesign .form-control[disabled] { background: var(--panel-2); color: var(--ink-4); } .tp-redesign .form--label, .tp-redesign .form-label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; } /* Legacy .btn--base / .btn-outline--base mapped to accent so the old forms don't render as bootstrap blue inside the new shell */ .tp-redesign .btn--base { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 10px; font-size: 13.5px; font-weight: 500; padding: 8px 14px; } .tp-redesign .btn--base:hover { background: var(--accent-600); color: #fff; } .tp-redesign .btn-outline--base { background: transparent; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 10px; font-size: 13.5px; font-weight: 500; padding: 8px 14px; } .tp-redesign .btn-outline--base:hover { background: var(--accent-soft); color: var(--accent-ink); } .tp-redesign .btn--sm, .tp-redesign .btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 8px; } .tp-redesign .btn-outline--danger { background: transparent; color: var(--danger); border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--line)); border-radius: 10px; } .tp-redesign .btn-outline--danger:hover { background: color-mix(in oklab, var(--danger) 10%, transparent); color: var(--danger); } /* select2 dropdown + rendered selection */ .tp-redesign .select2-container--default .select2-selection--single { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; height: 40px; padding: 8px 10px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .tp-redesign .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 24px; padding: 0; } .tp-redesign .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 6px; height: 24px; } .tp-redesign .select2-container--default.select2-container--focus .select2-selection--single, .tp-redesign .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-softer); } .tp-redesign .select2-container--default .select2-selection--multiple { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-height: 40px; } .tp-redesign .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--accent-soft); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 2px 8px; font-size: 12px; } .select2-container--default .select2-dropdown { background: var(--panel, #fff); border: 1px solid var(--line, #ece9e2); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-pop); } .select2-container--default .select2-results__option { color: var(--ink-2, #2a3333); font-size: 13.5px; padding: 8px 12px; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent, #22C55E); color: #fff; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--line, #ece9e2); border-radius: 8px; padding: 6px 10px; background: var(--panel-2, #fafaf7); color: var(--ink, #0b1212); } /* daterangepicker */ .daterangepicker { background: var(--panel, #fff) !important; border: 1px solid var(--line, #ece9e2) !important; border-radius: 12px !important; box-shadow: var(--shadow-pop) !important; color: var(--ink-2, #2a3333); } .daterangepicker .calendar-table { background: var(--panel, #fff); } .daterangepicker td.available:hover { background: var(--chip, #f1efe8) !important; } .daterangepicker td.active, .daterangepicker td.active:hover { background: var(--accent, #22C55E) !important; color: #fff !important; } .daterangepicker td.in-range { background: var(--accent-softer, #ecfdf5) !important; color: var(--accent-ink, #059669) !important; } .daterangepicker .ranges li.active { background-color: var(--accent, #22C55E) !important; } .daterangepicker .ranges li:hover { background-color: var(--chip, #f1efe8) !important; color: var(--ink-2, #2a3333) !important; } .daterangepicker .drp-buttons .btn.btn-primary.applyBtn { background: var(--accent, #22C55E); border-color: var(--accent, #22C55E); border-radius: 8px; } .daterangepicker .drp-buttons .btn.btn-default.cancelBtn { background: var(--panel-2, #fafaf7); border-color: var(--line, #ece9e2); color: var(--ink-2, #2a3333); border-radius: 8px; } /* Legacy image-uploader (business settings) */ .tp-redesign .image-upload-preview { border: 3px solid var(--line) !important; border-radius: 12px; background-color: var(--panel-2); } .tp-redesign .image-upload-input-wrapper label { background: var(--accent) !important; color: #fff; border-color: var(--panel); } /* Pagination (legacy .pagination helper) */ .tp-redesign .pagination { gap: 4px; margin: 0; flex-wrap: wrap; } .tp-redesign .pagination .page-item .page-link, .tp-redesign .pagination a, .tp-redesign .pagination span { background: var(--panel); color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; padding: 0 10px; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .tp-redesign .pagination .page-item.active .page-link, .tp-redesign .pagination .active, .tp-redesign .pagination a:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .tp-redesign .pagination .page-item.disabled .page-link, .tp-redesign .pagination .disabled { opacity: .5; pointer-events: none; } /* Bootstrap modal header title default color */ .tp-redesign .modal-title { color: var(--ink); font-weight: 600; } .tp-redesign .modal-body, .tp-redesign .modal-body p, .tp-redesign .modal-body small { color: var(--ink-2); } .tp-redesign .modal-body strong { color: var(--ink); } /* Accordion (still used by the business dashboard leftover accordion) */ .tp-redesign .accordion-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .tp-redesign .accordion-button { background: var(--panel); color: var(--ink); font-weight: 500; font-size: 14px; box-shadow: none; } .tp-redesign .accordion-button:not(.collapsed) { background: var(--panel-2); color: var(--accent-ink); } .tp-redesign .accordion-body { background: var(--panel); color: var(--ink-2); } /* Text helpers used by legacy markup */ .tp-redesign .text-dark { color: var(--ink) !important; } .tp-redesign .text-muted { color: var(--ink-4) !important; } .tp-redesign .text--base { color: var(--accent-ink) !important; } .tp-redesign .text--success { color: var(--accent-ink) !important; } .tp-redesign .text--danger { color: var(--danger) !important; } .tp-redesign .card.custom--card, .tp-redesign .custom--card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); } .tp-redesign .card.custom--card .card-header, .tp-redesign .custom--card .card-header { background: var(--panel); border-bottom: 1px solid var(--line); padding: 14px 18px; } .tp-redesign .custom--card .card-body { padding: 16px 18px; color: var(--ink-2); } /* Bootstrap buttons of note */ .tp-redesign .btn-close { filter: invert(var(--tp-close-invert, 0)); } [data-theme="dark"] body.tp-redesign .btn-close { filter: invert(1); opacity: .7; } /* ============================================================ POLISH — responsive nits ============================================================ */ @media (max-width: 767.98px) { .tp-page { padding: 20px 16px; } .tp-page-head { flex-direction: column; align-items: flex-start; } .tp-page-title { font-size: 32px; } .tp-welcome { padding: 20px; } .tp-welcome h2 { font-size: 26px; } .tp-kpi { padding: 14px 16px; } .tp-kpi-value { font-size: 26px; } .tp-filters-bar { padding: 10px; gap: 8px; } .tp-filters-bar .tp-searchbar { min-width: 0; max-width: none; width: 100%; } .tp-filters-bar .tp-select, .tp-filters-bar .tp-input { width: 100%; max-width: none !important; } .tp-rc-head { gap: 10px; padding: 12px 14px; } .tp-rc-body { padding: 0 14px 12px; } .tp-rc-actions { padding: 10px 14px; } .tp-plan { padding: 20px; } .tp-plan-price .amt { font-size: 34px; } } /* ============================================================ AUTH SHELL ============================================================ */ body.tp-auth-body { background: var(--bg); min-height: 100vh; } body.tp-auth-body .preloader { background: var(--bg); } .tp-auth { display: grid; grid-template-columns: 460px 1fr; min-height: 100vh; } @media (max-width: 991.98px) { .tp-auth { grid-template-columns: 1fr; } .tp-auth .tp-auth-hero { display: none; } } .tp-auth-hero { background: radial-gradient(900px 400px at 20% -10%, color-mix(in oklab, var(--accent) 35%, transparent), transparent 70%), radial-gradient(800px 500px at 80% 110%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%), var(--sidebar-bg, #0b1412); color: #fff; padding: 40px 44px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .tp-auth-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; } .tp-auth-mark { width: 28px; height: 22px; display: inline-flex; align-items: center; } .tp-auth-mark img { width: 100%; height: 100%; object-fit: contain; } .tp-auth-wordmark { height: 16px; width: auto; } .tp-auth-pitch { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 420px; } .tp-auth-pitch-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 16px; color: #fff; } .tp-auth-pitch-title em { font-style: italic; color: var(--accent); } .tp-auth-pitch-sub { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.5; margin: 0 0 24px; } .tp-auth-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .tp-auth-bullets li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.82); font-size: 13.5px; } .tp-auth-bullets li i { color: var(--accent); font-size: 16px; } .tp-auth-foot { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 12px; } .tp-auth-foot .tp-muted { color: rgba(255,255,255,.55); } .tp-auth-foot-link { color: rgba(255,255,255,.55); text-decoration: none; font-size: 12px; } .tp-auth-foot-link:hover { color: #fff; } .tp-auth-main { padding: 32px; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .tp-auth-card-wrap { width: 100%; max-width: 440px; } .tp-auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--shadow-md); } @media (max-width: 991.98px) { .tp-auth-main { padding: 24px 16px; } .tp-auth-card { padding: 26px 22px; } } .tp-auth-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); } .tp-auth-title em { font-style: italic; color: var(--accent); } .tp-auth-sub { color: var(--ink-3); font-size: 13.5px; margin: 0 0 22px; } .tp-auth-bottom { margin-top: 18px; text-align: center; color: var(--ink-3); font-size: 13px; } .tp-auth-bottom a { color: var(--accent-ink); font-weight: 500; text-decoration: none; } .tp-auth-bottom a:hover { text-decoration: underline; } .tp-auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--ink-4); font-size: 12px; } .tp-auth-divider::before, .tp-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .tp-social-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .tp-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 12px; background: var(--panel); color: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background .15s var(--ease), border-color .15s var(--ease); } .tp-social-btn:hover { background: var(--panel-2); border-color: var(--line-2); color: var(--ink); } .tp-social-btn img { width: 16px; height: 16px; } /* Password-show-hide inside tp-input */ .tp-pw-wrap { position: relative; } .tp-pw-toggle-inline { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; } .tp-pw-toggle-inline:hover { color: var(--ink); background: var(--chip); } /* Verification code boxes */ .tp-redesign .verification-code { position: relative; } .tp-redesign .verification-code input#verification-code { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; letter-spacing: 24px; padding-left: 12px; font-size: 20px; } .tp-redesign .verification-code .boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .tp-redesign .verification-code .boxes span { height: 52px; display: grid; place-items: center; background: var(--panel-2) !important; border: 1px solid var(--line) !important; border-radius: 10px; color: var(--ink) !important; font-size: 20px; font-weight: 500; font-family: 'Geist Mono', ui-monospace, monospace; transition: border-color .15s var(--ease); } .tp-redesign .verification-code:focus-within .boxes span { border-color: var(--accent) !important; } /* ============================================================ PUBLIC SITE — header, footer, breadcrumb, layout ============================================================ */ body.tp-public { background: var(--bg); color: var(--ink); } body.tp-public .preloader { background: var(--bg); } /* Header */ .tp-pub-header { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.2); } .tp-pub-header-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 14px 28px; } .tp-pub-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .tp-pub-brand-mark { width: 24px; height: 20px; display: inline-flex; } .tp-pub-brand-mark img { width: 100%; height: 100%; object-fit: contain; } .tp-pub-brand-wordmark { height: 16px; width: auto; } [data-theme="dark"] body.tp-public .tp-pub-brand-wordmark { filter: invert(1) brightness(1.2); } .tp-pub-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; } .tp-pub-nav-link { padding: 8px 14px; border-radius: 10px; color: var(--ink-3) !important; text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s var(--ease), color .15s var(--ease); white-space: nowrap; } .tp-pub-nav-link:hover { background: var(--chip); color: var(--ink) !important; } .tp-pub-nav-link.active { color: var(--ink) !important; background: var(--chip); } .tp-pub-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; } .tp-pub-menu-toggle { width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; } @media (max-width: 991.98px) { .tp-pub-nav { display: none; } .tp-pub-header-inner { padding: 12px 18px; } } .tp-pub-mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 8px 18px 16px; border-top: 1px solid var(--line); } .tp-pub-mobile-nav.open { display: flex; } .tp-pub-mobile-link { padding: 10px 12px; border-radius: 10px; color: var(--ink-2) !important; font-size: 14px; font-weight: 500; text-decoration: none; } .tp-pub-mobile-link:hover { background: var(--chip); color: var(--ink) !important; } .tp-pub-mobile-link.active { background: var(--chip); color: var(--ink) !important; } /* Breadcrumb */ .tp-pub-breadcrumb { background: radial-gradient(700px 200px at 100% -40%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%), var(--panel-2); border-bottom: 1px solid var(--line); } .tp-pub-breadcrumb-inner { max-width: 1280px; margin: 0 auto; padding: 36px 28px; } .tp-pub-breadcrumb-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 40px; letter-spacing: -.01em; line-height: 1; margin: 0 0 10px; color: var(--ink); } .tp-pub-breadcrumb-trail { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); } .tp-pub-breadcrumb-trail a { color: var(--ink-3); text-decoration: none; } .tp-pub-breadcrumb-trail a:hover { color: var(--ink); } .tp-pub-breadcrumb-trail i { font-size: 11px; color: var(--ink-5); } .tp-pub-breadcrumb-trail span { color: var(--ink); font-weight: 500; } /* Main */ .tp-public-main { min-height: calc(100vh - 64px); } .tp-pub-container { max-width: 1280px; margin: 0 auto; padding: 40px 28px; } /* Footer */ .tp-pub-footer { background: var(--panel); border-top: 1px solid var(--line); margin-top: 60px; } .tp-pub-footer-inner { max-width: 1280px; margin: 0 auto; padding: 48px 28px 28px; } .tp-pub-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } @media (max-width: 767.98px) { .tp-pub-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .tp-pub-footer-brand { grid-column: 1 / -1; } } .tp-pub-footer-col { display: flex; flex-direction: column; gap: 8px; } .tp-pub-footer-col-title { font-size: 12px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; } .tp-pub-footer-link { color: var(--ink-3) !important; font-size: 13.5px; text-decoration: none; } .tp-pub-footer-link:hover { color: var(--ink) !important; } .tp-pub-social { display: flex; gap: 8px; } .tp-pub-social-link { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--panel-2); color: var(--ink-3) !important; border: 1px solid var(--line); font-size: 14px; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .tp-pub-social-link:hover { background: var(--accent-softer); color: var(--accent-ink) !important; border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); } .tp-pub-social-link i { font-size: 15px; } .tp-pub-footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .tp-pub-lang-current { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; color: var(--ink-2); } .tp-pub-lang-flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; } .tp-pub-lang-option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--ink-2) !important; } /* ============================================================ Harmonize legacy public-site components with new tokens ============================================================ */ /* Buttons used on public pages */ body.tp-public .btn--base { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; border-radius: 10px !important; padding: 10px 16px !important; font-weight: 500; } body.tp-public .btn--base:hover { background: var(--accent-600) !important; } body.tp-public .btn-outline--base { background: transparent !important; color: var(--accent-ink) !important; border: 1px solid var(--accent) !important; border-radius: 10px !important; font-weight: 500; } body.tp-public .btn-outline--base:hover { background: var(--accent-soft) !important; } /* Banner / hero */ body.tp-public .banner-section { background: radial-gradient(900px 400px at 100% -20%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%), var(--bg); border-bottom: 1px solid var(--line); padding: 40px 0; } body.tp-public .banner-content__subtitle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-softer); padding: 6px 12px; border-radius: 999px; } body.tp-public .banner-content__title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 54px; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); margin: 18px 0 14px; } body.tp-public .banner-content__desc { color: var(--ink-3); font-size: 16px; line-height: 1.6; max-width: 520px; } body.tp-public .search-business { margin-top: 22px; } body.tp-public .search-business .input-group { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } body.tp-public .search-business .input-group-text { background: transparent; color: var(--ink-3); border: 0; padding: 0 14px; } body.tp-public .search-business .form--control { background: transparent !important; border: 0 !important; padding: 12px 10px !important; font-size: 14px !important; } body.tp-public .search-business .form--control:focus { box-shadow: none !important; } body.tp-public .search-business.show .input-group { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-softer); } body.tp-public .search-business-result { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; box-shadow: var(--shadow-pop); overflow: hidden; } body.tp-public .search-business-item { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); } body.tp-public .search-business-item:hover { background: var(--panel-2); } body.tp-public .search-business-item__name { color: var(--ink); } /* Section headings */ body.tp-public .section-title, body.tp-public .section__title, body.tp-public .features-section__title, body.tp-public .category-section__title, body.tp-public .feedback-section__title, body.tp-public .counter-section__title, body.tp-public .testimonial-section__title, body.tp-public .blog-section__title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.01em; color: var(--ink); } /* Generic section cards (features / categories / blog cards) */ body.tp-public .feature-item, body.tp-public .category-item, body.tp-public .blog-item, body.tp-public .blog-card, body.tp-public .counter-item, body.tp-public .testimonial-item, body.tp-public .feedback-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); color: var(--ink-2); } body.tp-public .feature-item:hover, body.tp-public .category-item:hover, body.tp-public .blog-item:hover, body.tp-public .blog-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); } /* FAQ */ body.tp-public .accordion-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } body.tp-public .accordion-button { background: var(--panel); color: var(--ink); font-size: 15px; font-weight: 500; box-shadow: none; } body.tp-public .accordion-button:not(.collapsed) { background: var(--panel-2); color: var(--accent-ink); } body.tp-public .accordion-body { color: var(--ink-2); background: var(--panel); } /* Subscribe strip */ body.tp-public .subscribe-section { background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--panel-2)), var(--panel-2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* Footer shape wrapper (legacy) */ body.tp-public .footer-shape { display: none; } body.tp-public .footer-area { display: none; } body.tp-public .bottom-footer { display: none; } /* Review/list cards on category + profile pages */ body.tp-public .business-card, body.tp-public .review-wrapper__item, body.tp-public .review-history { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); } /* Rating stars on public pages */ body.tp-public .rating-list i, body.tp-public .rating-list__single i { color: var(--star); } /* Pagination wrapper */ body.tp-public .pagination-wrapper { margin-top: 24px; display: flex; justify-content: center; } /* ============================================================ Public site — remaining legacy page harmonization ============================================================ */ body.tp-public .company-sidebar, body.tp-public .blog-sidebar, body.tp-public .company-item, body.tp-public .trust-wrapper, body.tp-public .search-info, body.tp-public .details-sidebar-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink-2); } body.tp-public .sidebar-item, body.tp-public .inner-content { padding-bottom: 14px; } body.tp-public .sidebar-item__title, body.tp-public .inner-content__title { color: var(--ink); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } body.tp-public .search-form { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; align-items: center; } body.tp-public .search-form .form--control, body.tp-public .search-form .form-two { background: transparent !important; border: 0 !important; padding: 10px 12px !important; } body.tp-public .search-form__icon { background: transparent; color: var(--ink-3); border: 0; } body.tp-public .search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-softer); } body.tp-public .company-item { border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } body.tp-public .company-item:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); } body.tp-public .company-item__thumb img { border-radius: 12px; border: 1px solid var(--line); } body.tp-public .company-item__name, body.tp-public .company-item__title { color: var(--ink); font-weight: 600; } body.tp-public .company-item__text, body.tp-public .company-item__desc { color: var(--ink-3); } body.tp-public .company-reviews__title { color: var(--ink); font-weight: 600; } body.tp-public .latest-blog { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); } body.tp-public .latest-blog:first-child { border-top: 0; padding-top: 0; } body.tp-public .latest-blog__thumb img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); } body.tp-public .latest-blog__title a { color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500; } body.tp-public .latest-blog__date { color: var(--ink-4); font-size: 12px; } body.tp-public .tag-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; } body.tp-public .tag-list__item { list-style: none; } body.tp-public .tag-list__link, body.tp-public .text-list.style-tag .text-list__link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2) !important; border: 1px solid var(--line); font-size: 12px; text-decoration: none; } body.tp-public .tag-list__link:hover, body.tp-public .text-list.style-tag .text-list__link:hover { background: var(--accent-softer); color: var(--accent-ink) !important; border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); } /* Form radio/checkbox styling */ body.tp-public .form--check, body.tp-public .form--radio { display: flex; align-items: center; gap: 8px; padding: 8px 0; } body.tp-public .form--check .form-check-input, body.tp-public .form--radio .form-check-input { accent-color: var(--accent); width: 16px; height: 16px; } /* Legacy .category-top-wrapper (just in case it's used elsewhere) */ body.tp-public .category-top-section { display: none; } body.tp-public .category-main-section, body.tp-public .company-section, body.tp-public .blog-detials, body.tp-public .contact-section, body.tp-public .review-form-section, body.tp-public .company-details-section { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; } /* Policy / pages content */ body.tp-public .policy-content, body.tp-public .page-content { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; color: var(--ink-2); line-height: 1.7; } body.tp-public .policy-content h1, body.tp-public .policy-content h2, body.tp-public .policy-content h3, body.tp-public .page-content h1, body.tp-public .page-content h2, body.tp-public .page-content h3 { color: var(--ink); font-weight: 600; margin: 24px 0 12px; } body.tp-public .policy-content a, body.tp-public .page-content a { color: var(--accent-ink); } /* Cookie bar */ body.tp-public .cookies-card, body.tp-redesign .cookies-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); color: var(--ink-2); } /* ============================================================ Bespoke public components ============================================================ */ /* Small hero block for utility / content pages */ .tp-hero-sm { padding: 56px 0 28px; border-bottom: 1px solid var(--line); background: radial-gradient(700px 320px at 100% -20%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%), var(--bg); } .tp-hero-sm-inner { max-width: 880px; margin: 0 auto; padding: 0 28px; text-align: center; } .tp-hero-sm-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-softer); padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; } .tp-hero-sm-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 42px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin: 0 0 10px; } .tp-hero-sm-lede { color: var(--ink-3); font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 600px; } /* Prose container — styles admin-inserted rich HTML (policy, pages, cookie) */ .tp-prose { color: var(--ink-2); font-size: 15px; line-height: 1.7; } .tp-prose h1, .tp-prose h2, .tp-prose h3, .tp-prose h4 { color: var(--ink); font-weight: 600; font-family: 'Instrument Serif', Georgia, serif; letter-spacing: -.01em; margin: 32px 0 12px; } .tp-prose h1 { font-size: 32px; font-weight: 400; } .tp-prose h2 { font-size: 24px; font-weight: 400; } .tp-prose h3 { font-size: 19px; } .tp-prose h4 { font-size: 16px; } .tp-prose p { margin: 0 0 16px; } .tp-prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } .tp-prose a:hover { color: var(--accent-600); } .tp-prose ul, .tp-prose ol { margin: 0 0 16px; padding-left: 22px; } .tp-prose li { margin-bottom: 6px; } .tp-prose strong, .tp-prose b { color: var(--ink); font-weight: 600; } .tp-prose blockquote { margin: 20px 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 0 8px 8px 0; color: var(--ink-2); } .tp-prose code { background: var(--chip); padding: 2px 6px; border-radius: 4px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: var(--ink); } .tp-prose pre { background: var(--panel-2); border: 1px solid var(--line); padding: 14px; border-radius: 10px; overflow-x: auto; margin: 16px 0; } .tp-prose pre code { background: transparent; padding: 0; } .tp-prose img { max-width: 100%; height: auto; border-radius: 10px; margin: 16px 0; } .tp-prose hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; } .tp-prose table { width: 100%; border-collapse: collapse; margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .tp-prose th, .tp-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } .tp-prose th { background: var(--panel-2); color: var(--ink); font-weight: 500; } /* Empty state */ .tp-empty-state { text-align: center; padding: 48px 24px; background: var(--panel); border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-3); } .tp-empty-state-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-softer); color: var(--accent-ink); display: inline-grid; place-items: center; margin-bottom: 14px; } .tp-empty-state-icon i { font-size: 22px; } .tp-empty-state-title { color: var(--ink); font-weight: 500; font-size: 16px; margin: 0 0 6px; } .tp-empty-state-sub { font-size: 13.5px; color: var(--ink-4); margin: 0 auto; max-width: 360px; } /* Maintenance page */ .tp-maintenance { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(600px 360px at 50% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%), var(--bg); } .tp-maintenance-card { max-width: 520px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 28px; box-shadow: var(--shadow-md); } .tp-maintenance-illus { width: 160px; height: 160px; margin: 0 auto 22px; object-fit: contain; } .tp-maintenance-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 32px; color: var(--ink); margin: 0 0 10px; } .tp-maintenance-desc { color: var(--ink-3); line-height: 1.65; font-size: 15px; margin: 0; } /* Home: banner */ .tp-banner { position: relative; padding: 72px 0 56px; background: radial-gradient(900px 420px at 100% -10%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%), radial-gradient(600px 300px at 0% 100%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%), var(--bg); border-bottom: 1px solid var(--line); } .tp-banner-inner { max-width: 1280px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 56px; } @media (max-width: 900px) { .tp-banner-inner { grid-template-columns: 1fr; gap: 32px; } .tp-banner-art { display: none; } } .tp-banner-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-softer); padding: 5px 12px; border-radius: 999px; } .tp-banner-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 58px; line-height: 1.05; letter-spacing: -.015em; color: var(--ink); margin: 18px 0 14px; } @media (max-width: 600px) { .tp-banner-title { font-size: 40px; } } .tp-banner-lede { color: var(--ink-3); font-size: 16px; line-height: 1.6; max-width: 520px; margin: 0 0 24px; } .tp-banner-search { position: relative; max-width: 560px; } .tp-banner-search-box { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .tp-banner-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-softer); } .tp-banner-search-box i { color: var(--ink-3); font-size: 18px; } .tp-banner-search-box input { flex: 1; border: 0; background: transparent; color: var(--ink); font-size: 15px; outline: none; padding: 6px 0; } .tp-banner-search-box input::placeholder { color: var(--ink-4); } .tp-banner-search-btn { background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 8px 16px; font-weight: 500; font-size: 14px; cursor: pointer; transition: background .15s var(--ease); } .tp-banner-search-btn:hover { background: var(--accent-600); } .tp-banner-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); overflow: hidden; z-index: 20; display: none; } .tp-banner-search-results.open { display: block; } .tp-banner-search-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid var(--line); } .tp-banner-search-item:last-child { border-bottom: 0; } .tp-banner-search-item:hover { background: var(--panel-2); } .tp-banner-search-item img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; } .tp-banner-search-item-main { flex: 1; min-width: 0; } .tp-banner-search-item-name { color: var(--ink); font-weight: 500; font-size: 14px; } .tp-banner-search-item-meta { color: var(--ink-4); font-size: 12px; margin-top: 2px; } .tp-banner-search-item-rating { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent-ink); padding: 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; } .tp-banner-search-empty { padding: 18px; text-align: center; color: var(--ink-4); font-size: 13.5px; } .tp-banner-search-footer { padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel-2); } .tp-banner-search-footer a { color: var(--accent-ink); font-size: 13.5px; font-weight: 500; text-decoration: none; } .tp-banner-stats { display: flex; gap: 32px; margin-top: 28px; flex-wrap: wrap; } .tp-banner-stat-num { font-size: 24px; font-weight: 500; color: var(--ink); font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; } .tp-banner-stat-label { font-size: 12.5px; color: var(--ink-4); margin-top: 2px; } .tp-banner-art img { width: 100%; height: auto; border-radius: 18px; box-shadow: var(--shadow-lg); } .tp-banner-art-fallback { aspect-ratio: 16/11; border-radius: 18px; background: radial-gradient(400px 200px at 30% 20%, color-mix(in oklab, var(--accent) 40%, transparent), transparent 70%), linear-gradient(135deg, var(--accent-soft), var(--panel)); display: grid; place-items: center; color: var(--accent-ink); font-size: 64px; } /* Home: section shell */ .tp-home-section { padding: 72px 0; } .tp-home-section-inner { max-width: 1280px; margin: 0 auto; padding: 0 28px; } .tp-home-section-head { text-align: center; max-width: 600px; margin: 0 auto 44px; } .tp-home-section-eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; } .tp-home-section-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); margin: 0 0 12px; } .tp-home-section-lede { color: var(--ink-3); font-size: 15.5px; line-height: 1.6; margin: 0; } /* Features grid */ .tp-features-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .tp-features-grid { grid-template-columns: 1fr; } } .tp-feature-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); } .tp-feature-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-md); } .tp-feature-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-softer); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 16px; font-size: 22px; } .tp-feature-title { font-size: 17px; font-weight: 500; color: var(--ink); margin: 0 0 6px; } .tp-feature-desc { color: var(--ink-3); font-size: 14px; line-height: 1.55; margin: 0; } /* Testimonial grid */ .tp-testimonial-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .tp-testimonial-grid { grid-template-columns: 1fr; } } .tp-testimonial-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; } .tp-testimonial-rating { color: var(--accent); font-size: 14px; letter-spacing: 2px; } .tp-testimonial-text { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin: 0; flex: 1; } .tp-testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); } .tp-testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--accent-softer); } .tp-testimonial-avatar-fallback { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-softer); color: var(--accent-ink); display: grid; place-items: center; font-weight: 500; flex: none; } .tp-testimonial-author-name { color: var(--ink); font-weight: 500; font-size: 13.5px; } .tp-testimonial-author-meta { color: var(--ink-4); font-size: 12px; } /* Feedback strip */ .tp-feedback-grid { display: grid; gap: 18px; grid-template-columns: 5fr 7fr; } @media (max-width: 900px) { .tp-feedback-grid { grid-template-columns: 1fr; } } .tp-feedback-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 32px; overflow: hidden; display: flex; flex-direction: column; gap: 16px; min-height: 260px; position: relative; } .tp-feedback-card.tp-feedback-wide { background: linear-gradient(135deg, var(--accent-softer), var(--panel)); } .tp-feedback-card.tp-feedback-full { grid-column: 1 / -1; flex-direction: row; align-items: center; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--panel-2)), var(--panel)); } @media (max-width: 700px) { .tp-feedback-card.tp-feedback-full { flex-direction: column; } } .tp-feedback-card-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); margin: 0; } .tp-feedback-card-desc { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; margin: 0; } .tp-feedback-card-text { flex: 1; } .tp-feedback-card-img { max-width: 160px; align-self: flex-end; } .tp-feedback-card-img img { width: 100%; height: auto; } .tp-feedback-card.tp-feedback-full .tp-feedback-card-img { max-width: 320px; align-self: center; } /* Home: category grid */ .tp-category-grid { display: grid; gap: 16px; grid-template-columns: repeat(5, 1fr); } @media (max-width: 1024px) { .tp-category-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .tp-category-grid { grid-template-columns: repeat(2, 1fr); } } .tp-category-card { position: relative; display: block; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; text-decoration: none; background: var(--panel); border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .tp-category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); } .tp-category-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); } .tp-category-card:hover .tp-category-card-img { transform: scale(1.05); } .tp-category-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 55%, transparent 100%); } .tp-category-card-body { position: absolute; left: 14px; right: 14px; bottom: 14px; color: #fff; display: flex; align-items: center; gap: 10px; } .tp-category-card-icon { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.15); display: grid; place-items: center; backdrop-filter: blur(6px); } .tp-category-card-icon i, .tp-category-card-icon svg { color: #fff; font-size: 16px; } .tp-category-card-title { font-weight: 500; font-size: 14px; line-height: 1.3; } /* Home: counter row */ .tp-counter-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; } @media (max-width: 700px) { .tp-counter-grid { grid-template-columns: 1fr; } } .tp-counter-cell { text-align: center; padding: 12px 8px; } .tp-counter-num { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 48px; line-height: 1; color: var(--ink); letter-spacing: -.02em; display: inline-flex; align-items: baseline; gap: 4px; } .tp-counter-num-suffix { font-size: 24px; color: var(--accent-ink); } .tp-counter-label { color: var(--ink-3); font-size: 14px; margin-top: 8px; } /* Home: FAQ */ .tp-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .tp-faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .tp-faq-trigger { width: 100%; text-align: left; background: transparent; border: 0; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--ink); font-size: 15.5px; font-weight: 500; cursor: pointer; } .tp-faq-trigger::after { content: '\\002B'; font-size: 20px; color: var(--ink-3); transition: transform .2s var(--ease); } .tp-faq-item.open .tp-faq-trigger::after { content: '\\2212'; } .tp-faq-body { display: none; padding: 0 20px 18px; color: var(--ink-3); font-size: 14.5px; line-height: 1.65; } .tp-faq-item.open .tp-faq-body { display: block; } /* Home: CTA / subscribe strip */ .tp-cta { background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, var(--panel)), var(--panel-2)); border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--line)); border-radius: 24px; padding: 48px; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 40px; } @media (max-width: 900px) { .tp-cta { grid-template-columns: 1fr; padding: 32px; } .tp-cta-art { display: none; } } .tp-cta-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.2; color: var(--ink); margin: 0 0 10px; } .tp-cta-desc { color: var(--ink-3); font-size: 15px; line-height: 1.55; margin: 0 0 20px; } .tp-cta-form { display: flex; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; max-width: 480px; } .tp-cta-form input { flex: 1; border: 0; background: transparent; outline: none; padding: 10px 12px; color: var(--ink); font-size: 14.5px; } .tp-cta-form input::placeholder { color: var(--ink-4); } .tp-cta-form button { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 500; cursor: pointer; white-space: nowrap; } .tp-cta-form button:hover { background: var(--accent-600); } .tp-cta-art img { width: 100%; height: auto; border-radius: 14px; } /* Home: blog */ .tp-blog-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .tp-blog-grid { grid-template-columns: 1fr; } } /* Business listing layout */ .tp-listing-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } @media (max-width: 1024px) { .tp-listing-layout { grid-template-columns: 1fr; } } .tp-filter-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; position: sticky; top: 88px; } @media (max-width: 1024px) { .tp-filter-card { position: static; } } .tp-filter-section { padding: 16px 0; border-top: 1px solid var(--line); } .tp-filter-section:first-child { padding-top: 0; border-top: 0; } .tp-filter-title { font-size: 12.5px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; } .tp-filter-radio, .tp-filter-check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: 13.5px; transition: background .15s var(--ease); } .tp-filter-radio:hover, .tp-filter-check:hover { background: var(--panel-2); } .tp-filter-radio input, .tp-filter-check input { accent-color: var(--accent); } .tp-filter-radio .las, .tp-filter-radio .lar { color: var(--accent); font-size: 14px; } .tp-filter-count-link { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: 13.5px; transition: background .15s var(--ease); } .tp-filter-count-link:hover { background: var(--panel-2); color: var(--ink); } .tp-filter-count-link span:last-child { color: var(--ink-4); font-size: 12px; } .tp-filter-search { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; transition: border-color .15s var(--ease); } .tp-filter-search:focus-within { border-color: var(--accent); } .tp-filter-search input { flex: 1; border: 0; background: transparent; color: var(--ink); font-size: 13.5px; outline: none; padding: 6px 0; } .tp-filter-search input::placeholder { color: var(--ink-4); } .tp-filter-search button { background: transparent; border: 0; color: var(--ink-3); cursor: pointer; } .tp-listing-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } .tp-listing-head-count { color: var(--ink-2); font-size: 13.5px; } .tp-listing-head-sort { display: flex; align-items: center; gap: 10px; } .tp-listing-head-sort label { font-size: 13px; color: var(--ink-4); } .tp-listing-sidebar-toggle { display: none; width: 100%; margin-bottom: 14px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); font-size: 13.5px; cursor: pointer; } @media (max-width: 1024px) { .tp-listing-sidebar-toggle { display: flex; align-items: center; gap: 8px; } } .tp-popular-searches { margin-top: 28px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; } .tp-popular-title { font-size: 12.5px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; } .tp-popular-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tp-popular-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: 12.5px; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .tp-popular-tag:hover { background: var(--accent-softer); color: var(--accent-ink); border-color: color-mix(in oklab, var(--accent) 25%, var(--line)); } /* Home: partner logos */ .tp-partners { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: center; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .tp-partner-logo { max-height: 36px; width: auto; margin: 0 auto; opacity: .6; filter: grayscale(1); transition: opacity .2s var(--ease), filter .2s var(--ease); } .tp-partner-logo:hover { opacity: 1; filter: grayscale(0); } [data-theme="dark"] .tp-partner-logo { filter: grayscale(1) invert(.85); } [data-theme="dark"] .tp-partner-logo:hover { filter: invert(.85); } /* Review confirm success card */ .tp-review-confirm { max-width: 620px; margin: 0 auto; text-align: center; } .tp-review-confirm-badge { width: 72px; height: 72px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); display: inline-grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 0 0 6px var(--accent-softer); } .tp-review-confirm-badge i { font-size: 34px; } .tp-review-confirm-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--ink); margin: 0 0 8px; } .tp-review-confirm-sub { color: var(--ink-3); font-size: 15px; margin: 0 0 24px; }