/* * TurtlePic Free Tools. Everything is scoped under #tptools so the theme is not affected. * Design: Figma VsewmJ3gucwNrnvEuLNwCI (hashtag tool 3853:59 / 3866:260, hub 3873:59 / 3874:135, invitation tool 3914:1027 / 3919:165). * Breakpoint: phones < 768px. Phones use the lighter "Mobile v2" layout (v0.2.0, hub 3900:784 / hashtag 3902:582): * the same HTML as desktop, with some text hidden by CSS on phones only and long sections behind accordion rows. */ /* ------------------------------------------------------------ Theme wrappers, these pages only */ body.tptools-page .site-main, body.tptools-page main#content, body.tptools-page .page-content { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.tptools-page .page-header, body.tptools-page .post-tags, body.tptools-page .comments-area { display: none !important; } body.tptools-page { background-color: #04050e; } /* ------------------------------------------------------------ Reset inside the wrapper */ #tptools { --tpt-bg: #04050e; --tpt-surface: #080911; --tpt-card: #0c0e18; --tpt-mint: #03f7b5; --tpt-text: #fff; --tpt-soft: #a7a9b2; --tpt-muted: #85868b; --tpt-line: rgba(255, 255, 255, 0.08); --tpt-error: #ff4d67; background: var(--tpt-bg); color: var(--tpt-text); font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left; overflow-x: clip; /* the site header is fixed (Elementor), so leave room for it, as the Help Center does */ padding-top: 110px; } #tptools *, #tptools *::before, #tptools *::after { box-sizing: border-box; } #tptools :where(h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, table, thead, tbody, tr, th, td, form, label, strong, b, nav) { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; text-align: inherit; line-height: inherit; box-shadow: none; text-shadow: none; } #tptools :where(ul, ol) { list-style: none; } #tptools :where(strong, b) { font-weight: 600; } #tptools :where(a) { color: inherit; text-decoration: none; box-shadow: none; } #tptools :where(a):hover { color: inherit; } #tptools :where(button, input) { margin: 0; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; box-shadow: none; min-height: 0; width: auto; line-height: normal; border-radius: 0; -webkit-appearance: none; appearance: none; } #tptools :where(button) { background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; } #tptools :where(button):is(:hover, :focus, :active) { background: none; color: inherit; border-color: inherit; } #tptools :where(img) { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; } #tptools svg { display: block; flex: none; } #tptools [hidden] { display: none !important; } #tptools :focus { outline: none; } #tptools :focus-visible { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } /* Mobile v2 helpers: .tpt-ph = phones only, .tpt-dt = desktop and tablet only; accordion toggles are phone only */ #tptools .tpt-acc__toggle, #tptools .tpt-arrow18 { display: none; } @media (min-width: 768px) { #tptools .tpt-ph { display: none !important; } } #tptools .tpt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------ Layout + type */ #tptools .tpt-wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; } #tptools .tpt-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 21px; } #tptools .tpt-crumbs li { display: flex; align-items: center; gap: 8px; color: var(--tpt-muted); } #tptools .tpt-crumbs a { color: var(--tpt-muted); } #tptools .tpt-crumbs a:hover { color: #fff; } #tptools .tpt-crumbs [aria-current] { color: rgba(255, 255, 255, 0.9); font-weight: 500; } #tptools .tpt-eyebrow { color: var(--tpt-mint); font-size: 13px; font-weight: 600; letter-spacing: 1.6px; line-height: 20px; } #tptools .tpt-h1 { font-size: 52px; line-height: 62px; font-weight: 600; letter-spacing: -1px; color: #fff; max-width: 960px; } #tptools .tpt-h2 { font-size: 44px; line-height: 54px; font-weight: 600; letter-spacing: -0.5px; color: #fff; max-width: 960px; } #tptools .tpt-h3 { font-size: 26px; line-height: 34px; font-weight: 600; color: #fff; } #tptools .tpt-h4 { font-size: 20px; font-weight: 600; color: #fff; } #tptools .tpt-lead { font-size: 18px; line-height: 29px; color: var(--tpt-soft); max-width: 860px; margin-top: 16px; } #tptools .tpt-small { font-size: 13px; line-height: 20px; color: var(--tpt-muted); } #tptools .tpt-section { padding-bottom: 120px; } #tptools .tpt-section :is(.tpt-h2, .tpt-acc__toggle) + :where(.tpt-steps, .tpt-tips, .tpt-where, .tpt-faq) { margin-top: 40px; } #tptools .tpt-section .tpt-lead + :where(.tpt-table, .tpt-methods) { margin-top: 40px; } /* chips */ #tptools .tpt-chips { display: flex; flex-wrap: wrap; gap: 10px; } #tptools .tpt-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 14px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--tpt-soft); font-size: 14px; line-height: 21px; } #tptools .tpt-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tpt-mint); flex: none; } #tptools .tpt-chips--small { gap: 8px; } #tptools .tpt-chips--small li { padding: 5px 12px 5px 10px; gap: 6px; font-size: 12.5px; line-height: 19px; } #tptools .tpt-chips--small li::before { width: 5px; height: 5px; } /* buttons */ #tptools .tpt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 40px; font-size: 15px; font-weight: 500; line-height: 1; color: #fff; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; white-space: nowrap; text-decoration: none; } #tptools .tpt-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; } #tptools .tpt-btn--block { width: 100%; } #tptools .tpt-btn--mint { background: var(--tpt-mint); color: #04050e; } #tptools .tpt-btn--mint:hover { background: #3ff9c6; color: #04050e; } #tptools .tpt-btn--outline { border-color: #fff; background: transparent; color: #fff; } #tptools .tpt-btn--outline:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: #fff; } #tptools .tpt-btn--glass { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: #fff; } #tptools .tpt-btn--glass:hover { background: rgba(255, 255, 255, 0.09); color: #fff; border-color: rgba(255, 255, 255, 0.24); } #tptools .tpt-btn[aria-disabled="true"] { opacity: .45; cursor: default; } #tptools .tpt-link { color: var(--tpt-soft); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-link:hover { color: #fff; } /* pill tabs (hashtag filters + hub sub-filters) */ #tptools .tpt-tab { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 21px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--tpt-soft); } #tptools .tpt-tab:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; background: var(--tpt-surface); } #tptools .tpt-tab[aria-pressed="true"] { background: var(--tpt-mint); border-color: var(--tpt-mint); color: #04050e; } #tptools .tpt-scroll-row { display: flex; gap: 8px; } /* ------------------------------------------------------------ Hashtag tool: hero */ #tptools .tpt-hero--tool { padding: 24px 0 40px; } #tptools .tpt-hero--tool .tpt-eyebrow { margin-top: 28px; } #tptools .tpt-hero--tool .tpt-h1 { margin-top: 12px; } #tptools .tpt-hero__intro { margin-top: 16px; max-width: 860px; font-size: 18px; line-height: 29px; color: var(--tpt-soft); } #tptools .tpt-hero--tool .tpt-chips { margin-top: 20px; } /* ------------------------------------------------------------ Hashtag tool: the tool */ #tptools .tpt-tool { padding: 8px 0 120px; } #tptools .tpt-tool__grid { display: grid; grid-template-columns: 424px minmax(0, 1fr); gap: 24px; align-items: start; } #tptools .tpt-card, #tptools .tpt-results { background: var(--tpt-card); border: 1px solid var(--tpt-line); border-radius: 24px; padding: 32px; } #tptools .tpt-card__title { font-size: 20px; font-weight: 600; line-height: 30px; color: #fff; } #tptools .tpt-form { display: flex; flex-direction: column; gap: 20px; } #tptools .tpt-form__head { display: flex; align-items: center; gap: 12px; } #tptools .tpt-form__head .tpt-card__title { flex: 1; font-size: 22px; line-height: 33px; } #tptools .tpt-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #tptools .tpt-field label, #tptools .tpt-label { font-size: 14px; font-weight: 500; line-height: 21px; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-field input { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 16px; line-height: 24px; outline: none; transition: border-color .15s; } #tptools .tpt-field input::placeholder { color: var(--tpt-muted); opacity: 1; } #tptools .tpt-field input:hover { border-color: rgba(255, 255, 255, 0.24); } #tptools .tpt-field input:focus { border-color: var(--tpt-mint); box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); background: var(--tpt-surface); color: #fff; } #tptools .tpt-field input[aria-invalid="true"] { border-color: var(--tpt-error); } #tptools .tpt-error { display: flex; align-items: center; gap: 8px; margin-top: -6px; color: var(--tpt-error); font-size: 14px; font-weight: 500; line-height: 21px; } #tptools .tpt-error__icon { width: 14px; height: 14px; border: 1.4px solid var(--tpt-error); border-radius: 50%; position: relative; flex: none; } #tptools .tpt-error__icon::before { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; line-height: 1; } #tptools .tpt-more-toggle { display: flex; flex-wrap: wrap; gap: 2px 6px; text-align: left; white-space: normal; font-size: 14px; line-height: 21px; } #tptools .tpt-more-toggle__link { color: var(--tpt-mint); font-weight: 500; } #tptools .tpt-more-toggle:hover .tpt-more-toggle__link { text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-more-toggle__hint { color: var(--tpt-muted); } #tptools .tpt-more { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #tptools .tpt-field--fns { gap: 10px; } #tptools .tpt-fns { flex-wrap: wrap; } #tptools .tpt-chip { padding: 8px 14px; border-radius: 999px; font-size: 14px; line-height: 21px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--tpt-soft); } #tptools .tpt-chip:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; background: var(--tpt-surface); } #tptools .tpt-chip[aria-pressed="true"] { background: rgba(3, 247, 181, 0.12); border-color: rgba(3, 247, 181, 0.6); color: var(--tpt-mint); font-weight: 500; } /* notice bar (welcome back / cleared) */ #tptools .tpt-notice { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 18px; border-radius: 14px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-notice__icon { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--tpt-mint); position: relative; } #tptools .tpt-notice__icon::after { content: ""; position: absolute; left: 4px; top: 2.5px; width: 4px; height: 7px; border: solid var(--tpt-mint); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } #tptools .tpt-notice--cleared .tpt-notice__icon { border: 0; } #tptools .tpt-notice--cleared .tpt-notice__icon::after { border-color: var(--tpt-soft); left: 5px; } #tptools .tpt-notice__text { flex: 1; font-size: 14px; line-height: 21px; color: var(--tpt-soft); } #tptools .tpt-notice .tpt-link { font-size: 14px; } /* results */ #tptools .tpt-results { min-height: 100%; display: flex; flex-direction: column; } #tptools .tpt-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 560px; text-align: center; } #tptools .tpt-empty__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(3, 247, 181, 0.08); border: 1px solid rgba(3, 247, 181, 0.3); color: var(--tpt-mint); font-size: 28px; font-weight: 600; } #tptools .tpt-empty p { max-width: 340px; font-size: 17px; line-height: 27px; color: var(--tpt-soft); } #tptools .tpt-couple { outline: none; } #tptools .tpt-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px; } #tptools .tpt-pills button { padding: 12px 24px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(3, 247, 181, 0.3); font-size: 22px; font-weight: 600; line-height: 33px; color: #fff; } #tptools .tpt-pills button:hover { border-color: var(--tpt-mint); background: var(--tpt-surface); color: #fff; } #tptools .tpt-tags { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-tags__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; } #tptools .tpt-tags__count { color: var(--tpt-muted); font-size: 16px; } #tptools .tpt-filters { margin: 16px 0; } #tptools .tpt-list { display: flex; flex-direction: column; gap: 8px; } #tptools .tpt-row { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 16px 0 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); } #tptools .tpt-row.is-hearted { background: rgba(3, 247, 181, 0.05); border-color: rgba(3, 247, 181, 0.28); } #tptools .tpt-row__tag { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } #tptools .tpt-row__text { font-size: 16px; font-weight: 500; line-height: 24px; color: #fff; overflow-wrap: anywhere; } #tptools .tpt-len { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--tpt-soft); font-size: 12px; font-weight: 500; line-height: 18px; } #tptools .tpt-row__actions { display: flex; align-items: center; gap: 16px; flex: none; } #tptools .tpt-heart { width: 20px; height: 20px; display: grid; place-items: center; } #tptools .tpt-heart svg path { stroke: #a7a9b2; fill: none; transition: fill .15s, stroke .15s; } #tptools .tpt-heart:hover svg path { stroke: #fff; } #tptools .tpt-heart[aria-pressed="true"] svg path { fill: var(--tpt-mint); stroke: var(--tpt-mint); } #tptools .tpt-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); font-size: 13px; font-weight: 500; line-height: 20px; color: #fff; } #tptools .tpt-copy:hover { border-color: rgba(255, 255, 255, 0.4); background: transparent; color: #fff; } #tptools .tpt-copy__icon { display: none; } #tptools .tpt-copy.is-copied { background: rgba(3, 247, 181, 0.12); border-color: rgba(3, 247, 181, 0.6); color: var(--tpt-mint); } #tptools .tpt-copy__done { display: none; align-items: center; gap: 4px; } #tptools .tpt-copy__check { display: none; } #tptools .tpt-copy.is-copied .tpt-copy__label { display: none; } #tptools .tpt-copy.is-copied .tpt-copy__done { display: inline-flex; } #tptools .tpt-insta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-insta:hover { color: #fff; } #tptools .tpt-insta__icon { display: none; } #tptools .tpt-row-help { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--tpt-muted); } #tptools .tpt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } /* floating shortlist pill */ #tptools .tpt-pill { position: fixed; z-index: 9990; bottom: 32px; right: max(24px, calc((100vw - 1200px) / 2)); display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px 12px 18px; border-radius: 999px; background: var(--tpt-mint); color: #04050e; font-size: 15px; font-weight: 600; line-height: 23px; box-shadow: 0 8px 28px rgba(3, 247, 181, 0.25); } #tptools .tpt-pill:hover { background: #3ff9c6; color: #04050e; } /* shortlist side panel (desktop) / bottom sheet (mobile) */ #tptools .tpt-scrim { position: fixed; inset: 0; z-index: 9995; background: rgba(4, 5, 14, 0.6); } #tptools .tpt-panel { position: fixed; z-index: 9996; top: 56px; bottom: 56px; right: max(24px, calc((100vw - 1200px) / 2)); width: 400px; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 24px; background: var(--tpt-card); border: 1px solid rgba(3, 247, 181, 0.3); overflow: hidden; } #tptools .tpt-panel__handle { display: none; } #tptools .tpt-panel__head { display: flex; align-items: center; gap: 10px; } #tptools .tpt-panel__title { flex: 1; font-size: 18px; font-weight: 600; line-height: 27px; } #tptools .tpt-panel__close { width: 32px; height: 32px; display: grid; place-items: center; margin: -6px; border-radius: 50%; } #tptools .tpt-panel__close:hover { background: rgba(255, 255, 255, 0.06); } #tptools .tpt-panel__list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; } #tptools .tpt-srow { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 12px; background: var(--tpt-surface); border: 1px solid var(--tpt-line); } #tptools .tpt-srow__text { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 23px; overflow-wrap: anywhere; } #tptools .tpt-srow .tpt-heart { width: 18px; height: 18px; } #tptools .tpt-srow .tpt-copy { padding: 5px 12px; } #tptools .tpt-panel__actions { display: flex; gap: 10px; } #tptools .tpt-panel__actions .tpt-btn { flex: 1; padding: 0 16px; } /* toast */ #tptools .tpt-toast { position: fixed; z-index: 9999; left: 50%; bottom: 96px; transform: translate(-50%, 8px); padding: 10px 18px; border-radius: 999px; background: #fff; color: #04050e; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } #tptools .tpt-toast.is-on { opacity: 1; transform: translate(-50%, 0); } #tptools .tpt-toast:empty { padding: 0; } /* ------------------------------------------------------------ Hashtag page: content sections */ #tptools .tpt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } #tptools .tpt-step { padding: 32px; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-step__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 20px; background: rgba(3, 247, 181, 0.08); border: 1px solid rgba(3, 247, 181, 0.35); color: var(--tpt-mint); font-size: 15px; font-weight: 600; } #tptools .tpt-step p strong { display: block; margin-top: 12px; font-size: 20px; line-height: 28px; color: #fff; } #tptools .tpt-step p span { display: block; margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--tpt-soft); } #tptools .tpt-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--tpt-surface); border: 1px solid var(--tpt-line); border-radius: 20px; overflow: hidden; font-size: 16px; line-height: 26px; margin: 0; } #tptools .tpt-table th, #tptools .tpt-table td { padding: 20px 12px; border: 0; border-top: 1px solid var(--tpt-line); background: none; vertical-align: top; text-align: left; } #tptools .tpt-table tr > :first-child { padding-left: 28px; } #tptools .tpt-table tr > :last-child { padding-right: 28px; } #tptools .tpt-table thead th { border-top: 0; background: var(--tpt-card); padding-top: 16px; padding-bottom: 16px; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--tpt-muted); } #tptools .tpt-table tbody th { font-weight: 600; color: #fff; } #tptools .tpt-table tbody td { color: rgba(255, 255, 255, 0.85); } #tptools .tpt-table tbody tr:nth-child(odd) > * { background: none; } #tptools .tpt-table--2 tr > :first-child { width: 264px; } #tptools .tpt-table--wide1 tr > :first-child { width: 324px; } #tptools .tpt-table--3 tr > :first-child { width: 264px; } #tptools .tpt-table--3 tr > :nth-child(2) { width: 464px; } #tptools .tpt-table td.tpt-formula { color: var(--tpt-mint); font-weight: 500; } #tptools .tpt-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } #tptools .tpt-methods li { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-methods__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(3, 247, 181, 0.4); color: var(--tpt-mint); font-size: 14px; font-weight: 600; } #tptools .tpt-methods strong { font-size: 18px; line-height: 26px; color: #fff; } #tptools .tpt-methods p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } #tptools .tpt-methods p span { font-size: 16px; color: var(--tpt-soft); } #tptools .tpt-methods p b { font-size: 20px; color: var(--tpt-mint); } #tptools .tpt-methods + .tpt-h4 { margin: 40px 0 20px; } #tptools .tpt-h3 { margin: 40px 0 24px; } #tptools .tpt-fncards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } #tptools .tpt-fncards li { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border-radius: 16px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-fncards strong { font-size: 16px; line-height: 24px; color: #fff; } #tptools .tpt-fncards p { font-size: 14px; line-height: 22px; color: var(--tpt-soft); } #tptools .tpt-helper { margin-top: 40px; font-size: 14px; line-height: 21px; color: var(--tpt-muted); } #tptools .tpt-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } #tptools .tpt-tips li { padding: 28px; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-tips__num { display: block; color: var(--tpt-mint); font-size: 12.5px; font-weight: 600; letter-spacing: 1px; line-height: 19px; } #tptools .tpt-tips p strong { display: block; margin-top: 10px; font-size: 18px; line-height: 27px; color: #fff; } #tptools .tpt-tips p span { display: block; margin-top: 10px; font-size: 15px; line-height: 24px; color: var(--tpt-soft); } #tptools .tpt-where { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } #tptools .tpt-where li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-where strong { padding: 4px 10px; border-radius: 999px; background: rgba(3, 247, 181, 0.1); color: var(--tpt-mint); font-size: 12.5px; line-height: 19px; } #tptools .tpt-where p { font-size: 15.5px; line-height: 25px; color: rgba(255, 255, 255, 0.88); } /* FAQ (both pages) */ #tptools .tpt-faq { max-width: 960px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-faq__item { border-bottom: 1px solid var(--tpt-line); padding: 24px 0; } #tptools .tpt-faq__q button { display: flex; align-items: center; gap: 24px; width: 100%; text-align: left; white-space: normal; font-size: 19px; font-weight: 600; line-height: 28px; color: #fff; } #tptools .tpt-faq__q button > span:first-child { flex: 1; } #tptools .tpt-faq__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); } #tptools .tpt-faq__minus { display: none; } #tptools .tpt-faq__q button[aria-expanded="true"] .tpt-faq__icon { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools .tpt-faq__q button[aria-expanded="true"] .tpt-faq__plus { display: none; } #tptools .tpt-faq__q button[aria-expanded="true"] .tpt-faq__minus { display: block; } #tptools .tpt-faq__q button:hover .tpt-faq__icon { border-color: rgba(255, 255, 255, 0.4); } #tptools .tpt-faq__a p { max-width: 660px; margin-top: 12px; font-size: 16px; line-height: 27px; color: var(--tpt-soft); } #tptools .tpt-faq__all { display: none; } /* ------------------------------------------------------------ Hub: hero */ #tptools .tpt-hub-hero { position: relative; } #tptools .tpt-hub-hero::before { content: ""; position: absolute; left: -100px; top: -80px; width: 900px; height: 580px; pointer-events: none; background: url("../img/icons/glow.svg") no-repeat center / 100% 100%; } #tptools .tpt-hub-hero__grid { position: relative; display: grid; grid-template-columns: 600px 520px; justify-content: space-between; align-items: center; gap: 40px; } #tptools .tpt-hub-hero__copy { padding: 24px 0 56px; } #tptools .tpt-hub-hero .tpt-eyebrow { margin-top: 32px; } #tptools .tpt-hub-hero .tpt-h1 { margin-top: 14px; font-size: 56px; line-height: 64px; letter-spacing: -1.2px; } #tptools .tpt-display { margin-top: 14px; font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -0.5px; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-hub-hero__intro { margin-top: 18px; max-width: 580px; font-size: 17px; line-height: 28px; color: var(--tpt-soft); } #tptools .tpt-hub-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } #tptools .tpt-hub-hero .tpt-chips { margin-top: 20px; } #tptools .tpt-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-stats li { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 0 18px; border-left: 1px solid var(--tpt-line); } #tptools .tpt-stats li:first-child { padding-left: 0; border-left: 0; } #tptools .tpt-stats strong { font-size: 30px; line-height: 38px; letter-spacing: -0.5px; color: #fff; white-space: nowrap; } #tptools .tpt-stats span { font-size: 13px; line-height: 19px; color: var(--tpt-muted); } #tptools .tpt-hub-hero__photo { position: relative; width: 520px; height: 600px; } #tptools .tpt-hub-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 100%; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); } /* v0.3.0 per-tab hero photos (Figma 3885:775 / 3885:1544): cover crops, never stretched */ #tptools .tpt-hub-hero__img--corporate-events { object-position: 50% 50%; } /* the file is already the Figma crop (520:600) */ #tptools .tpt-hub-hero__img--birthdays-and-parties { object-position: 50% 86.67%; } /* full width, 20%-97% of the height */ /* v0.3.0 first paint on /tools/#corporate-events or #birthdays-and-parties: an inline script sets data-tpt-start on #tptools before the hero is parsed, so that tab's hero is drawn straight away (hub.js removes the attribute). */ #tptools[data-tpt-start="corporate-events"] .tpt-hub-hero__grid:not([data-tpt-event="corporate-events"]), #tptools[data-tpt-start="birthdays-and-parties"] .tpt-hub-hero__grid:not([data-tpt-event="birthdays-and-parties"]) { display: none !important; } #tptools[data-tpt-start="corporate-events"] .tpt-hub-hero__grid[data-tpt-event="corporate-events"], #tptools[data-tpt-start="birthdays-and-parties"] .tpt-hub-hero__grid[data-tpt-event="birthdays-and-parties"] { display: grid !important; } #tptools .tpt-caption-card { position: absolute; left: -28px; top: 491px; width: 300px; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: rgba(12, 14, 24, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); } #tptools .tpt-caption-card strong { font-size: 15px; color: #fff; } #tptools .tpt-caption-card span { font-size: 13.5px; line-height: 20px; color: var(--tpt-soft); } /* event tabs */ #tptools .tpt-events { padding-bottom: 24px; } #tptools .tpt-events__label { font-size: 14px; font-weight: 500; line-height: 21px; color: var(--tpt-muted); margin-bottom: 14px; } #tptools .tpt-events__tabs { display: flex; gap: 12px; } #tptools .tpt-event-tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 18px; background: var(--tpt-card); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); font-size: 18px; font-weight: 500; line-height: 27px; white-space: nowrap; transition: border-color .15s; } #tptools .tpt-event-tab svg { color: #a7a9b2; } #tptools .tpt-event-tab:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; } #tptools .tpt-event-tab[aria-selected="true"] { background: rgba(3, 247, 181, 0.1); border: 1.5px solid rgba(3, 247, 181, 0.8); color: var(--tpt-mint); font-weight: 600; padding: 13.5px 23.5px; } #tptools .tpt-event-tab[aria-selected="true"] svg { color: var(--tpt-mint); } /* tool grid */ #tptools .tpt-panel-event { outline: none; } #tptools .tpt-tools { padding: 8px 0 120px; } #tptools .tpt-h2--panel { font-size: 36px; line-height: 44px; letter-spacing: -0.5px; } #tptools .tpt-panel-intro { margin-top: 10px; font-size: 17px; line-height: 27px; color: var(--tpt-soft); max-width: 860px; } #tptools .tpt-filters--hub { flex-wrap: wrap; gap: 10px; margin: 24px 0 0; } #tptools .tpt-tab--hub { padding: 9px 18px; } #tptools .tpt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; } #tptools .tpt-tools .tpt-panel-intro + .tpt-grid { margin-top: 24px; } #tptools .tpt-tool-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-tool-card__photo { position: relative; height: 200px; overflow: hidden; } /* v0.6.2: photos as on the home page "Built for Every Type of Event" cards: black and white, colour + slight zoom/tilt on hover (phones: .is-on is set by hub.js when the card scrolls into the middle of the screen). */ #tptools .tpt-tool-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0); scale: 1; transition: filter .65s cubic-bezier(.22, .61, .36, 1), scale .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1); } #tptools .tpt-tool-card--live:hover .tpt-tool-card__photo img, #tptools .tpt-tool-card--live:focus-within .tpt-tool-card__photo img, #tptools .tpt-tool-card--live.is-on .tpt-tool-card__photo img { filter: saturate(1); scale: 1.05; transform: rotate(.6deg); } #tptools .tpt-tool-card--soon .tpt-tool-card__photo img { filter: saturate(0) brightness(0.7); } #tptools .tpt-tool-card__index { position: absolute; top: 8px; right: 18px; font-size: 56px; font-weight: 600; line-height: 1.2; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.85); } #tptools .tpt-tool-card__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; } #tptools .tpt-tool-card__cat { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tpt-muted); } #tptools .tpt-tool-card--live .tpt-tool-card__cat { color: var(--tpt-mint); } #tptools .tpt-tool-card__name { font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; color: rgba(255, 255, 255, 0.85); } #tptools .tpt-tool-card--live .tpt-tool-card__name { color: #fff; } #tptools .tpt-tool-card__name a { color: inherit; } #tptools .tpt-tool-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; } #tptools .tpt-tool-card__name a:focus-visible { outline: none; } #tptools .tpt-tool-card__name a:focus-visible::after { outline: 2px solid var(--tpt-mint); outline-offset: -2px; } #tptools .tpt-tool-card__line { font-size: 14.5px; line-height: 23px; color: var(--tpt-muted); } #tptools .tpt-tool-card--live .tpt-tool-card__line { color: var(--tpt-soft); } #tptools .tpt-tool-card__get { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 2px 14px; border-left: 2px solid rgba(255, 255, 255, 0.2); } #tptools .tpt-tool-card--live .tpt-tool-card__get { border-left-color: var(--tpt-mint); } #tptools .tpt-tool-card__get span { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tpt-muted); } #tptools .tpt-tool-card__get p { font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, 0.72); } #tptools .tpt-tool-card--live .tpt-tool-card__get p { color: rgba(255, 255, 255, 0.9); } #tptools .tpt-tool-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-tool-card__body > .tpt-tool-card__get { margin-bottom: 10px; } #tptools .tpt-tool-card__open { display: inline-flex; align-items: center; gap: 6px; color: var(--tpt-mint); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } #tptools .tpt-tool-card__time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tpt-soft); } #tptools .tpt-soon { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--tpt-soft); font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; } #tptools .tpt-grid-note { margin-top: 24px; font-size: 14px; line-height: 21px; color: var(--tpt-muted); } /* hub sections */ #tptools .tpt-section--hub { padding-bottom: 140px; } #tptools .tpt-marker { display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--tpt-mint); margin-bottom: 18px; } #tptools .tpt-h2--hub { font-size: 48px; line-height: 56px; letter-spacing: -1px; max-width: 900px; } #tptools .tpt-section--hub .tpt-lead { margin-top: 18px; max-width: 820px; } #tptools .tpt-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; } #tptools .tpt-preview { position: relative; display: flex; flex-direction: column; gap: 18px; } #tptools .tpt-preview__box { height: 334px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: var(--tpt-surface); border: 1px solid var(--tpt-line); overflow: hidden; } #tptools .tpt-preview__box--live { border-color: rgba(3, 247, 181, 0.35); } #tptools .tpt-preview__names { font-size: 13px; font-weight: 500; color: var(--tpt-muted); } #tptools .tpt-preview__pills { display: flex; gap: 8px; } #tptools .tpt-preview__pills span { padding: 8px 16px; border-radius: 999px; background: var(--tpt-card); border: 1px solid rgba(3, 247, 181, 0.35); font-size: 16px; font-weight: 600; line-height: 24px; } #tptools .tpt-preview__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px 9px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; font-weight: 500; line-height: 21px; } #tptools .tpt-preview__bubble { padding: 14px 16px; border-radius: 4px 16px 16px 16px; background: rgba(3, 247, 181, 0.09); border: 1px solid rgba(3, 247, 181, 0.22); font-size: 14.5px; line-height: 23px; color: rgba(255, 255, 255, 0.92); } #tptools .tpt-preview__check-title { font-size: 16px; font-weight: 600; } #tptools .tpt-preview__progress { position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); } #tptools .tpt-preview__progress span { position: absolute; left: 0; top: 0; height: 4px; width: 45%; border-radius: 2px; background: rgba(3, 247, 181, 0.7); } #tptools .tpt-preview__checks li { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-preview__checks li.is-done { color: rgba(255, 255, 255, 0.6); } #tptools .tpt-box { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.3); } #tptools .is-done .tpt-box { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools .tpt-preview__meta { display: flex; flex-direction: column; gap: 10px; } #tptools .tpt-preview__name { font-size: 17px; font-weight: 600; line-height: 24px; } #tptools .tpt-preview__status { display: flex; align-items: center; gap: 14px; } #tptools .tpt-live { padding: 4px 10px; border-radius: 999px; background: rgba(3, 247, 181, 0.12); border: 1px solid rgba(3, 247, 181, 0.5); color: var(--tpt-mint); font-size: 12px; font-weight: 600; line-height: 18px; } #tptools .tpt-arrow-link { display: inline-flex; align-items: center; gap: 6px; color: var(--tpt-mint); font-size: 14px; font-weight: 600; } #tptools .tpt-arrow-link:hover { color: var(--tpt-mint); text-decoration: underline; text-underline-offset: 3px; } #tptools #not-sure-where-to-start { outline: none; scroll-margin-top: 24px; } #tptools .tpt-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; } #tptools .tpt-stage { overflow: hidden; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-stage__photo { height: 150px; } #tptools .tpt-stage__photo img { width: 100%; height: 100%; object-fit: cover; } #tptools .tpt-stage__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; } #tptools .tpt-stage__num { color: var(--tpt-mint); font-size: 12.5px; font-weight: 600; letter-spacing: 1px; } #tptools .tpt-stage__title { font-size: 20px; line-height: 27px; font-weight: 600; color: #fff; } #tptools .tpt-stage__tools { padding-top: 8px; } #tptools .tpt-stage__tools li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.75); } #tptools .tpt-stage__tools li.is-live a { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; color: var(--tpt-mint); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(3, 247, 181, 0.4); text-underline-offset: 3px; } #tptools .tpt-stage__tools li.is-live a:hover { text-decoration-color: var(--tpt-mint); } #tptools .tpt-soon--tag { padding: 2px 8px; border: 0; font-size: 10.5px; line-height: 16px; color: var(--tpt-muted); } #tptools .tpt-editorial__grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: start; } #tptools .tpt-h2--editorial { font-size: 44px; line-height: 52px; letter-spacing: -1px; } #tptools .tpt-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } #tptools .tpt-reasons li { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-reasons__num { font-size: 36px; font-weight: 600; line-height: 1.2; color: transparent; -webkit-text-stroke: 1px rgba(3, 247, 181, 0.6); } #tptools .tpt-reasons p strong { display: block; font-size: 19px; line-height: 27px; color: #fff; } #tptools .tpt-reasons p span { display: block; margin-top: 10px; font-size: 15.5px; line-height: 25px; color: var(--tpt-soft); } #tptools .tpt-editorial .tpt-faq { max-width: none; border-top: 0; } #tptools .tpt-editorial .tpt-faq__item:first-child { padding-top: 0; } /* ------------------------------------------------------------ Phones */ @media (max-width: 767px) { #tptools { padding-top: 84px; } #tptools .tpt-wrap { width: calc(100% - 40px); } #tptools .tpt-crumbs ol { font-size: 12px; gap: 6px; } #tptools .tpt-crumbs li { gap: 6px; } #tptools .tpt-eyebrow { font-size: 12px; letter-spacing: 1.4px; } #tptools .tpt-h1 { font-size: 32px; line-height: 39px; letter-spacing: -0.5px; } #tptools .tpt-h2 { font-size: 28px; line-height: 35px; letter-spacing: -0.3px; } #tptools .tpt-h3 { font-size: 22px; line-height: 29px; margin: 28px 0 12px; } #tptools .tpt-h4 { font-size: 18px; } #tptools .tpt-lead { font-size: 16px; line-height: 26px; margin-top: 16px; } #tptools .tpt-section { padding: 56px 0 0; } #tptools .tpt-section :is(.tpt-h2, .tpt-acc__toggle) + :where(.tpt-steps, .tpt-tips, .tpt-where, .tpt-faq), #tptools .tpt-section .tpt-lead + :where(.tpt-table, .tpt-methods) { margin-top: 16px; } #tptools .tpt-section:last-of-type { padding-bottom: 56px; } #tptools .tpt-chips { gap: 8px; } #tptools .tpt-chips li { padding: 6px 12px 6px 10px; gap: 6px; font-size: 13px; line-height: 19px; } #tptools .tpt-chips li::before { width: 5px; height: 5px; } /* scroll rows: one line, sideways */ #tptools .tpt-scroll-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; } #tptools .tpt-scroll-row::-webkit-scrollbar { display: none; } #tptools .tpt-scroll-row > * { flex: none; } /* hashtag hero + tool */ #tptools .tpt-hero--tool { padding: 16px 0 0; } #tptools .tpt-hero--tool .tpt-eyebrow { margin-top: 16px; } #tptools .tpt-hero--tool .tpt-h1, #tptools .tpt-hero__intro, #tptools .tpt-hero--tool .tpt-chips { margin-top: 12px; } #tptools .tpt-hero__intro { font-size: 16px; line-height: 26px; } /* Mobile v2: one-line intro and one chip line; the long intro and the 4 chips stay in the HTML */ #tptools .tpt-hero--tool .tpt-hero__intro, #tptools .tpt-hero--tool .tpt-chips { display: none; } #tptools .tpt-hero__line { margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--tpt-soft); } #tptools .tpt-chipline { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--tpt-soft); font-size: 13px; line-height: 20px; } #tptools .tpt-chipline::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tpt-mint); flex: none; } #tptools .tpt-tool { padding: 24px 0 0; } #tptools .tpt-notice { margin: 0 0 16px; align-items: flex-start; padding: 12px 16px; } #tptools .tpt-notice__icon { margin-top: 2px; } #tptools .tpt-tool__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } #tptools .tpt-card { padding: 20px; border-radius: 20px; } #tptools .tpt-form { gap: 16px; } #tptools .tpt-form__head .tpt-card__title, #tptools .tpt-card__title { font-size: 18px; line-height: 27px; } #tptools .tpt-field { gap: 6px; } #tptools .tpt-field label, #tptools .tpt-label { font-size: 13px; line-height: 20px; } #tptools .tpt-field input { height: 48px; padding: 0 14px; border-radius: 12px; } #tptools .tpt-more { gap: 14px; padding-top: 16px; } #tptools .tpt-row2 { grid-template-columns: minmax(0, 1fr); gap: 14px; } #tptools .tpt-fns { margin-inline: -20px; padding-inline: 20px; } #tptools .tpt-chip { padding: 10px 14px; min-height: 44px; } #tptools .tpt-small { font-size: 12.5px; line-height: 19px; } #tptools .tpt-link { min-height: 44px; display: inline-flex; align-items: center; } #tptools .tpt-form__head .tpt-link { margin: -10px 0; } #tptools .tpt-more-toggle { min-height: 44px; align-items: center; } #tptools .tpt-results { background: none; border: 0; padding: 0; border-radius: 0; gap: 16px; } #tptools .tpt-empty { min-height: 280px; padding: 32px 20px; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-empty p { font-size: 15.5px; line-height: 25px; } #tptools .tpt-couple, #tptools .tpt-tags { background: var(--tpt-card); border: 1px solid var(--tpt-line); border-radius: 20px; } #tptools .tpt-couple { padding: 20px; scroll-margin-top: 16px; } #tptools .tpt-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; } #tptools .tpt-pills button { width: 100%; padding: 12px; font-size: 20px; line-height: 30px; text-align: center; } #tptools .tpt-tags { margin: 0; padding: 20px 16px; } #tptools .tpt-tags__count { font-size: 14px; } #tptools .tpt-filters { margin: 12px -16px; padding-inline: 16px; } #tptools .tpt-tab { padding: 10px 16px; min-height: 44px; } #tptools .tpt-row { flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 6px 6px 14px; } #tptools .tpt-row__tag { gap: 8px; flex-wrap: wrap; } #tptools .tpt-len { padding: 3px 8px; font-size: 11.5px; } #tptools .tpt-row__actions { justify-content: flex-end; gap: 4px; } #tptools .tpt-heart, #tptools .tpt-copy, #tptools .tpt-insta { width: 44px; height: 44px; padding: 0; justify-content: center; display: grid; place-items: center; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.1); } #tptools .tpt-heart svg { width: 20px; height: 20px; } #tptools .tpt-copy__label, #tptools .tpt-insta__label, #tptools .tpt-insta__arrow, #tptools .tpt-copy.is-copied .tpt-copy__done { display: none; } #tptools .tpt-copy__icon, #tptools .tpt-insta__icon { display: block; } #tptools .tpt-copy.is-copied { background: transparent; border-color: rgba(3, 247, 181, 0.6); } #tptools .tpt-copy.is-copied .tpt-copy__icon { display: none; } #tptools .tpt-copy.is-copied .tpt-copy__check { display: block; } #tptools .tpt-row-help { margin-top: 8px; font-size: 12.5px; line-height: 19px; } #tptools .tpt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; padding-top: 4px; } #tptools .tpt-actions [data-tpt-more-ideas] { grid-column: 1 / -1; order: 1; } #tptools .tpt-actions [data-tpt-share] { grid-column: 1 / -1; order: 2; } #tptools .tpt-actions [data-tpt-copy-all] { order: 3; padding: 0 12px; } #tptools .tpt-actions [data-tpt-image] { order: 4; padding: 0 12px; } #tptools .tpt-pill { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(34px + env(safe-area-inset-bottom, 0px)); min-height: 47px; } #tptools .tpt-panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 82vh; padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; border-bottom: 0; } #tptools .tpt-panel__handle { display: flex; justify-content: center; padding: 0 0 6px; cursor: grab; touch-action: none; } #tptools .tpt-panel__handle span { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); } #tptools .tpt-panel__close { width: 44px; height: 44px; margin: 0; border: 1px solid rgba(255, 255, 255, 0.14); } #tptools .tpt-panel__list { flex: 0 1 auto; gap: 12px; } #tptools .tpt-srow { padding: 6px 6px 6px 16px; } #tptools .tpt-srow .tpt-heart, #tptools .tpt-srow .tpt-copy { width: 44px; height: 44px; padding: 0; } #tptools .tpt-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* hashtag content sections */ #tptools .tpt-steps, #tptools .tpt-tips, #tptools .tpt-where, #tptools .tpt-fncards { grid-template-columns: minmax(0, 1fr); gap: 10px; } #tptools .tpt-steps { gap: 12px; } #tptools .tpt-step { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; padding: 18px; border-radius: 16px; } #tptools .tpt-step__num { width: 32px; height: 32px; font-size: 14px; border-radius: 16px; } #tptools .tpt-step p { display: contents; } #tptools .tpt-step p strong { margin: 0; font-size: 18px; line-height: 25px; } #tptools .tpt-step p span { grid-column: 1 / -1; margin-top: 12px; font-size: 15px; line-height: 24px; } #tptools .tpt-table, #tptools .tpt-table tbody, #tptools .tpt-table tr, #tptools .tpt-table th, #tptools .tpt-table td { display: block; width: auto !important; } #tptools .tpt-table { border-radius: 18px; font-size: 15px; line-height: 23px; } #tptools .tpt-table thead { display: none; } #tptools .tpt-table tbody tr { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-table tbody tr:first-child { border-top: 0; } #tptools .tpt-table th, #tptools .tpt-table td { padding: 0 !important; border: 0; } #tptools .tpt-table--3 td:last-child { font-size: 14.5px; line-height: 22px; color: var(--tpt-soft); } #tptools .tpt-methods { grid-template-columns: 1fr 1fr; gap: 10px; } #tptools .tpt-methods li { gap: 8px; padding: 16px 14px; border-radius: 16px; } #tptools .tpt-methods__num { width: 28px; height: 28px; font-size: 13px; } #tptools .tpt-methods strong { font-size: 15px; line-height: 21px; } #tptools .tpt-methods p span { font-size: 13.5px; line-height: 20px; } #tptools .tpt-methods p b { font-size: 18px; } #tptools .tpt-methods + .tpt-h4 { margin: 28px 0 12px; } #tptools .tpt-fncards { gap: 12px; } #tptools .tpt-fncards li { gap: 6px; padding: 14px 16px; } #tptools .tpt-fncards strong { font-size: 15px; } #tptools .tpt-fncards p { font-size: 14.5px; } #tptools .tpt-helper { margin-top: 16px; } #tptools .tpt-tips li, #tptools .tpt-where li { padding: 18px; border-radius: 16px; } #tptools .tpt-tips li { display: flex; flex-direction: column; gap: 6px; } #tptools .tpt-tips p strong { margin-top: 0; font-size: 16px; line-height: 23px; } #tptools .tpt-tips p span { margin-top: 6px; } #tptools .tpt-where li { gap: 10px; } /* Mobile v2 helpers */ #tptools .tpt-dt { display: none !important; } /* FAQ on phones (Mobile v2): every question closed with a + icon, answers stay in the HTML */ #tptools .tpt-faq { border-top: 1px solid var(--tpt-line); } #tptools .tpt-faq__item, #tptools .tpt-editorial .tpt-faq__item:first-child { border-bottom: 1px solid var(--tpt-line); padding: 0; } #tptools .tpt-faq__q button { gap: 12px; min-height: 60px; padding: 18px 0; font-size: 16.5px; line-height: 24px; letter-spacing: -0.1px; } #tptools .tpt-faq__icon, #tptools .tpt-faq__q button[aria-expanded="true"] .tpt-faq__icon { width: 20px; height: 20px; border: 0; border-radius: 0; background: none; } #tptools .tpt-faq__icon svg { width: 20px; height: 20px; stroke: var(--tpt-mint); } #tptools .tpt-faq__q button[aria-expanded="true"] { color: var(--tpt-mint); } #tptools .tpt-faq:not(.is-ready) .tpt-faq__a { display: none; } #tptools .tpt-faq__a p { margin-top: -6px; padding-bottom: 18px; font-size: 14.5px; line-height: 23px; } #tptools .tpt-faq__all { display: none; } /* accordion rows (Mobile v2 "M/Accordion row" 3898:2664): hashtag guide sections and hub stages */ #tptools [data-tpt-acc] { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 12px; position: relative; } #tptools [data-tpt-acc] > * { grid-column: 1 / -1; } #tptools [data-tpt-acc] > :is(.tpt-h2, .tpt-acc__preview) { grid-column: 1; } #tptools [data-tpt-acc] > .tpt-h2 { grid-row: 1; } #tptools [data-tpt-acc] > .tpt-acc__preview { grid-row: 2; } #tptools .tpt-acc__toggle { grid-column: 1 / -1; grid-row: 1 / 3; z-index: 1; display: flex; align-items: center; justify-content: flex-end; width: 100%; min-height: 44px; color: #fff; border-radius: 4px; } #tptools .tpt-acc__toggle:focus-visible { outline-offset: 2px; } #tptools .tpt-acc__chev { transition: transform .2s; } #tptools [data-tpt-acc].is-open .tpt-acc__toggle { color: var(--tpt-mint); } #tptools [data-tpt-acc].is-open .tpt-acc__chev { transform: rotate(180deg); } /* hashtag guide: the 7 content sections become one list of rows */ #tptools .tpt-guide, #tptools .tpt-guide:last-of-type { padding: 0; } #tptools .tpt-guide--first { padding-top: 56px; } #tptools .tpt-guide__label { margin-bottom: 12px; color: var(--tpt-mint); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; line-height: 18px; text-transform: uppercase; } #tptools .tpt-guide [data-tpt-acc] { border-bottom: 1px solid var(--tpt-line); } #tptools .tpt-guide--first [data-tpt-acc] { border-top: 1px solid var(--tpt-line); } #tptools .tpt-guide [data-tpt-acc].is-open { padding-bottom: 20px; } #tptools .tpt-guide .tpt-h2 { padding: 18px 32px 0 0; font-size: 16.5px; line-height: 24px; letter-spacing: -0.1px; } #tptools .tpt-guide .tpt-acc__preview { margin-top: 4px; padding-bottom: 18px; color: var(--tpt-soft); font-size: 13.5px; line-height: 20px; overflow-wrap: anywhere; } #tptools .tpt-guide [data-tpt-acc]:not(.is-open) > :not(.tpt-h2, .tpt-acc__preview, .tpt-acc__toggle) { display: none; } #tptools .tpt-guide [data-tpt-acc].is-open > .tpt-h2 { padding-bottom: 18px; color: var(--tpt-mint); } #tptools .tpt-guide [data-tpt-acc].is-open > .tpt-acc__preview { display: none; } #tptools .tpt-guide .tpt-acc__toggle + * { margin-top: 0; } /* tips, open (frame 3902:143984): numbered list, no cards */ #tptools .tpt-tips { gap: 14px; } #tptools .tpt-tips li { flex-direction: row; align-items: flex-start; gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; } #tptools .tpt-tips__num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 13px; background: rgba(3, 247, 181, 0.12); font-size: 10.5px; letter-spacing: 0; line-height: 1; } #tptools .tpt-tips p { flex: 1; min-width: 0; } #tptools .tpt-tips p strong { font-size: 15px; line-height: 22px; } #tptools .tpt-tips p span { margin-top: 2px; font-size: 14px; line-height: 21px; } /* hub */ #tptools .tpt-hub-hero::before { width: 520px; height: 420px; left: -160px; top: 120px; } #tptools .tpt-hub-hero__grid { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding-top: 8px; } /* Mobile v2: small wide photo under the button (350×200 at 390), no caption */ #tptools[data-tpt-start="corporate-events"] .tpt-hub-hero__grid[data-tpt-event="corporate-events"], #tptools[data-tpt-start="birthdays-and-parties"] .tpt-hub-hero__grid[data-tpt-event="birthdays-and-parties"] { display: flex !important; } /* v0.3.0: 350×215 on every tab (was 200), crops from the Mobile v2 frames, full width each */ #tptools .tpt-hub-hero__photo { width: auto; height: 215px; margin: 4px 20px 0; } #tptools .tpt-hub-hero__img { border-radius: 20px; object-position: 50% 49.5%; } /* Weddings 3900:789: 3.8%-96.1% of the height */ #tptools .tpt-hub-hero__img--corporate-events { object-position: 50% 9.5%; } /* 3901:1164: 15.6%-56.3% of the original photo */ #tptools .tpt-hub-hero__img--birthdays-and-parties { object-position: 50% 74.5%; } /* 3901:1559: 44%-85%, face and whole cake */ #tptools .tpt-caption-card, #tptools .tpt-display, #tptools .tpt-hub-hero__intro, #tptools .tpt-hub-hero .tpt-chips, #tptools .tpt-stats, #tptools .tpt-hub-hero__buttons [data-tpt-goto="not-sure-where-to-start"] { display: none; } #tptools .tpt-hub-hero__line { font-size: 15.5px; line-height: 25px; color: var(--tpt-soft); } #tptools .tpt-caption-card { left: 11px; top: auto; bottom: 11px; width: 260px; gap: 2px; padding: 10px 14px; border-radius: 14px; } #tptools .tpt-caption-card strong { font-size: 13.5px; } #tptools .tpt-caption-card span { font-size: 12px; line-height: 17px; } #tptools .tpt-hub-hero__copy { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 0; } #tptools .tpt-hub-hero .tpt-crumbs { order: -1; } #tptools .tpt-hub-hero .tpt-eyebrow, #tptools .tpt-hub-hero .tpt-h1, #tptools .tpt-display, #tptools .tpt-hub-hero__intro, #tptools .tpt-hub-hero .tpt-chips, #tptools .tpt-hub-hero__buttons, #tptools .tpt-stats { margin-top: 0; } #tptools .tpt-hub-hero .tpt-h1 { font-size: 34px; line-height: 40px; letter-spacing: -0.8px; } #tptools .tpt-display { font-size: 21px; line-height: 29px; } #tptools .tpt-hub-hero__intro { font-size: 15.5px; line-height: 25px; } #tptools .tpt-hub-hero__buttons { flex-direction: column; gap: 10px; padding-top: 6px; } #tptools .tpt-hub-hero__buttons .tpt-btn { width: 100%; } #tptools .tpt-chips--small li { padding: 6px 12px 6px 10px; font-size: 12px; } #tptools .tpt-stats { grid-template-columns: 1fr 1fr; padding-top: 4px; border-top: 0; } #tptools .tpt-stats li, #tptools .tpt-stats li:first-child { gap: 2px; padding: 14px 10px 14px 16px; border-top: 1px solid var(--tpt-line); border-left: 1px solid var(--tpt-line); } #tptools .tpt-stats li:nth-child(odd) { padding-left: 0; border-left: 0; } #tptools .tpt-stats strong { font-size: 26px; line-height: 32px; } #tptools .tpt-stats span { font-size: 12.5px; line-height: 18px; } #tptools .tpt-hub-hero .tpt-crumbs { position: relative; } #tptools .tpt-events { padding: 28px 0 0; } #tptools .tpt-events__label { font-size: 13px; margin-bottom: 10px; } #tptools .tpt-events__scroller { overflow-x: auto; scrollbar-width: none; } #tptools .tpt-events__scroller::-webkit-scrollbar { display: none; } #tptools .tpt-events__scroller .tpt-wrap { width: max-content; padding: 0 20px; margin: 0; } #tptools .tpt-events__tabs { gap: 8px; } #tptools .tpt-event-tab { flex: none; gap: 10px; padding: 12px 18px 12px 16px; border-radius: 14px; font-size: 15px; line-height: 23px; min-height: 44px; } #tptools .tpt-event-tab[aria-selected="true"] { padding: 11.5px 17.5px 11.5px 15.5px; } #tptools .tpt-event-tab svg { width: 20px; height: 20px; } #tptools .tpt-tools { padding: 28px 0 0; } #tptools .tpt-h2--panel { font-size: 28px; line-height: 35px; letter-spacing: -0.3px; } #tptools .tpt-panel-intro { margin-top: 16px; font-size: 16px; line-height: 26px; } #tptools .tpt-filters--hub { flex-wrap: nowrap; gap: 8px; margin-top: 16px; } #tptools .tpt-tab--hub { padding: 10px 16px; } #tptools .tpt-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; } #tptools .tpt-tool-card__photo { height: 160px; } #tptools .tpt-tool-card__index { font-size: 46px; top: 6px; right: 14px; } #tptools .tpt-tool-card__body { padding: 18px 20px; } #tptools .tpt-tool-card__name { font-size: 19px; line-height: 26px; } #tptools .tpt-grid-note { margin-top: 16px; } #tptools .tpt-section--hub { padding: 56px 0 0; } #tptools .tpt-marker { margin-bottom: 14px; } #tptools .tpt-h2--hub, #tptools .tpt-h2--editorial { font-size: 28px; line-height: 35px; letter-spacing: -0.3px; } #tptools .tpt-section--hub .tpt-lead { margin-top: 12px; } #tptools .tpt-previews { display: flex; gap: 12px; margin-top: 20px; } #tptools .tpt-preview { width: 300px; scroll-snap-align: start; } #tptools .tpt-previews { scroll-snap-type: x mandatory; } #tptools .tpt-preview__box { height: 320px; padding: 20px; } #tptools .tpt-stages { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; } #tptools .tpt-stage__photo { height: 140px; } #tptools .tpt-stage__tools li { min-height: 44px; } #tptools .tpt-editorial__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } #tptools .tpt-reasons { grid-template-columns: minmax(0, 1fr); gap: 12px; } #tptools .tpt-reasons li { padding: 20px; } #tptools .tpt-reasons__num { font-size: 30px; } #tptools .tpt-reasons p strong { font-size: 17px; line-height: 25px; } #tptools .tpt-reasons p span { margin-top: 6px; font-size: 15px; line-height: 24px; } #tptools > .tpt-section:last-of-type, #tptools .tpt-section--faq { padding-bottom: 56px; } /* ---- hub, Mobile v2 (3900:785) ---- */ #tptools .tpt-tool-card__get, #tptools .tpt-tool-card__time, #tptools .tpt-tool-card__body > .tpt-tool-card__get { display: none; } /* live card: photo header, category, name, one line, full-width "Open tool" button */ #tptools .tpt-tool-card--live .tpt-tool-card__foot { margin-top: 0; } #tptools .tpt-tool-card--live .tpt-tool-card__body::after { content: ""; height: 1px; order: 3; } #tptools .tpt-tool-card--live .tpt-tool-card__foot { order: 4; } #tptools .tpt-tool-card__open { flex: 1; justify-content: center; height: 44px; padding: 0 22px; border-radius: 40px; background: var(--tpt-mint); color: #04050e; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; } #tptools .tpt-tool-card__open svg { display: none; } /* coming-soon cards: compact rows (name, small category, chip) in one box */ #tptools .tpt-grid { gap: 0; } #tptools .tpt-tool-card--soon { padding: 0 18px; border-width: 0 1px; border-radius: 0; } #tptools .tpt-tool-card--soon:nth-child(1 of .tpt-tool-card--soon:not([hidden])) { padding-top: 4px; border-top-width: 1px; border-radius: 20px 20px 0 0; } #tptools .tpt-tool-card--live:not([hidden]) ~ .tpt-tool-card--soon:nth-child(1 of .tpt-tool-card--soon:not([hidden])) { margin-top: 16px; } #tptools .tpt-tool-card--soon:nth-last-child(1 of .tpt-tool-card--soon:not([hidden])) { padding-bottom: 4px; border-bottom-width: 1px; border-radius: 0 0 20px 20px; } #tptools .tpt-tool-card--soon:nth-child(1 of .tpt-tool-card--soon:not([hidden])):nth-last-child(1 of .tpt-tool-card--soon:not([hidden])) { border-radius: 20px; } #tptools .tpt-tool-card--soon .tpt-tool-card__photo, #tptools .tpt-tool-card--soon .tpt-tool-card__line { display: none; } #tptools .tpt-tool-card--soon .tpt-tool-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--tpt-line); } #tptools .tpt-tool-card--soon:nth-last-child(1 of .tpt-tool-card--soon:not([hidden])) .tpt-tool-card__body { border-bottom: 0; } #tptools .tpt-tool-card--soon .tpt-tool-card__name { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 500; line-height: 21px; letter-spacing: 0; color: rgba(255, 255, 255, 0.92); } #tptools .tpt-tool-card--soon .tpt-tool-card__cat { grid-column: 1; grid-row: 2; font-size: 10.5px; line-height: 15px; letter-spacing: 1px; color: var(--tpt-soft); } #tptools .tpt-tool-card--soon .tpt-tool-card__foot { display: contents; } #tptools .tpt-tool-card--soon .tpt-soon { grid-column: 2; grid-row: 1 / 3; } #tptools .tpt-grid-note { font-size: 13.5px; } /* the panel intro is not in the Mobile v2 frames: it stays in the HTML, hidden on phones */ #tptools .tpt-panel-intro { display: none; } /* "Not sure where to start?": 4 accordion rows, closed; each opens to its tool list */ #tptools .tpt-marker { width: 32px; margin-bottom: 16px; } #tptools #not-sure-where-to-start .tpt-lead { display: none; } #tptools #not-sure-where-to-start.tpt-section { padding-bottom: 0; } #tptools .tpt-stages { gap: 0; margin-top: 16px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-stage { overflow: visible; border: 0; border-bottom: 1px solid var(--tpt-line); border-radius: 0; background: none; } #tptools .tpt-stage__photo, #tptools .tpt-stage__num { display: none; } #tptools .tpt-stage__body { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 12px; gap: 0 12px; padding: 0; } #tptools .tpt-stage__body > * { grid-column: 1 / -1; } #tptools .tpt-stage__title { grid-column: 1; grid-row: 1; padding: 18px 0; font-size: 16.5px; line-height: 24px; letter-spacing: -0.1px; } #tptools .tpt-stage .tpt-acc__toggle { grid-row: 1 / 2; } #tptools .tpt-stage:not(.is-open) .tpt-stage__tools { display: none; } #tptools .tpt-stage.is-open .tpt-stage__title { color: var(--tpt-mint); } #tptools .tpt-stage.is-open .tpt-stage__body { padding-bottom: 16px; } #tptools .tpt-stage__tools { padding: 2px 16px; border-radius: 16px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-stage__tools li { gap: 12px; padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--tpt-line); font-size: 14.5px; line-height: 21px; color: rgba(255, 255, 255, 0.85); } #tptools .tpt-stage__tools li:last-child { border-bottom: 0; } #tptools .tpt-stage__tools li.is-live a { gap: 12px; text-decoration: none; } #tptools .tpt-stage__tools li.is-live a .tpt-arrow18 { display: block; } #tptools .tpt-stage__tools li.is-live a > svg:not(.tpt-arrow18) { display: none; } #tptools .tpt-soon--tag { padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; line-height: 18px; color: var(--tpt-soft); } /* why section: icon + title rows; the body text stays in the HTML */ #tptools .tpt-editorial__grid { gap: 16px; } #tptools .tpt-section--faq .tpt-editorial__grid { gap: 8px; } #tptools .tpt-editorial .tpt-marker { margin-bottom: 16px; } #tptools .tpt-section--faq.tpt-editorial .tpt-marker { margin-bottom: 8px; } #tptools .tpt-reasons { gap: 10px; } #tptools .tpt-reasons li { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; } #tptools .tpt-reasons__num, #tptools .tpt-reasons p span { display: none; } #tptools .tpt-reasons__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(3, 247, 181, 0.1); } #tptools .tpt-reasons p strong { font-size: 16px; line-height: 23px; } /* "What you walk away with" stays in the HTML, hidden on phones */ #tptools .tpt-section--walkaway { display: none; } } @media (min-width: 768px) and (max-width: 1279px) { #tptools .tpt-tool__grid { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); } #tptools .tpt-row { flex-wrap: wrap; padding-block: 10px; } #tptools .tpt-hub-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } #tptools .tpt-hub-hero__photo { width: 100%; } #tptools .tpt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools .tpt-previews, #tptools .tpt-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools .tpt-methods, #tptools .tpt-tips { grid-template-columns: repeat(2, 1fr); } #tptools .tpt-editorial__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } #tptools .tpt-table--3 tr > :nth-child(2) { width: auto; } } @media (prefers-reduced-motion: reduce) { #tptools *, #tptools *::before, #tptools *::after { transition: none !important; scroll-behavior: auto !important; } } /* ============================================================ v0.4.0 Invitation message tool (Figma 3914:1027 / 3919:165) New classes only; anything shared with tool 1 is overridden under .tpt--invite so tool 1 and the hub are unchanged. */ #tptools .tpt-sublabel { font-size: 11px; font-weight: 600; line-height: 17px; letter-spacing: 1px; text-transform: uppercase; color: var(--tpt-muted); } #tptools .tpt-more--inline { gap: 20px; padding-top: 0; border-top: 0; } #tptools .tpt-row2--date { grid-template-columns: minmax(0, 1fr) 120px; } #tptools .tpt-style { display: flex; flex-direction: column; gap: 20px; } #tptools.tpt--invite .tpt-more-toggle { align-self: flex-start; } /* date field: shows "Sat, 12 Dec 2026" (or "Pick a date") over the native date input */ #tptools .tpt-date { position: relative; } #tptools .tpt-field .tpt-date input { color: transparent; padding-right: 44px; color-scheme: dark; cursor: pointer; } #tptools .tpt-field .tpt-date input:focus { color: #fff; } #tptools .tpt-date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; } #tptools .tpt-date input::-webkit-datetime-edit { color: inherit; } #tptools .tpt-date__shown { position: absolute; left: 17px; right: 44px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 16px; line-height: 24px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tptools .tpt-date.is-empty .tpt-date__shown { color: var(--tpt-muted); } #tptools .tpt-date:focus-within .tpt-date__shown { display: none; } #tptools .tpt-date .tpt-field__icon { position: absolute; right: 17px; top: 50%; transform: translateY(-50%); pointer-events: none; } #tptools .tpt-date.is-missing input { border-color: rgba(3, 247, 181, 0.6); } /* switches (Adults-only, Start with a short quote) */ #tptools .tpt-switches { display: flex; flex-direction: column; gap: 12px; } #tptools .tpt-switch { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; white-space: normal; text-align: left; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-switch__track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); transition: background-color .15s; } #tptools .tpt-switch__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; } #tptools .tpt-switch[aria-checked="true"] .tpt-switch__track { background: var(--tpt-mint); } #tptools .tpt-switch[aria-checked="true"] .tpt-switch__track::after { transform: translateX(14px); background: #04050e; } /* results card */ #tptools .tpt-empty__icon svg { width: 24px; height: 24px; } #tptools.tpt--invite .tpt-results { min-height: 0; } /* the results card hugs its messages (Figma 3914:1114) */ #tptools .tpt-msgs { display: flex; flex-direction: column; gap: 16px; outline: none; } #tptools .tpt-msgs .tpt-filters { margin: 0; } #tptools .tpt-msgs .tpt-actions { margin-top: 0; } #tptools .tpt-hint { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(3, 247, 181, 0.06); border: 1px solid rgba(3, 247, 181, 0.3); font-size: 13.5px; line-height: 20px; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-hint__icon { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.3px solid var(--tpt-mint); } #tptools .tpt-hint__icon::before { content: "i"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 700; line-height: 1; color: var(--tpt-mint); } #tptools .tpt-mlist { display: flex; flex-direction: column; gap: 12px; } #tptools .tpt-mlist__none { padding: 18px 20px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.14); font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-msg { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 18px 20px; border-radius: 16px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.1); } #tptools .tpt-msg.is-hearted { background: rgba(3, 247, 181, 0.05); border-color: rgba(3, 247, 181, 0.28); } #tptools .tpt-msg__meta { display: flex; align-items: center; gap: 10px; min-width: 0; } #tptools .tpt-msg__meta .tpt-len { color: rgba(255, 255, 255, 0.85); } #tptools .tpt-msg__tags { flex: 1; min-width: 0; font-size: 13px; line-height: 20px; color: var(--tpt-muted); } #tptools .tpt-msg__text { font-size: 15px; line-height: 25px; color: rgba(255, 255, 255, 0.8); white-space: pre-line; overflow-wrap: anywhere; } #tptools .tpt-msg__text strong { color: #fff; font-weight: 600; } #tptools .tpt-msg__quote { color: #fff; font-style: italic; } #tptools mark.tpt-missing { background: none; color: var(--tpt-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0; } #tptools .tpt-msg__actions { display: flex; flex-wrap: wrap; gap: 8px; } #tptools .tpt-mact { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); font-size: 13px; font-weight: 500; line-height: 20px; color: #fff; white-space: nowrap; text-decoration: none; } #tptools .tpt-mact:hover { border-color: rgba(255, 255, 255, 0.4); background: transparent; color: #fff; } #tptools .tpt-mact__done { display: none; align-items: center; gap: 4px; } #tptools .tpt-mact.is-copied { background: rgba(3, 247, 181, 0.12); border-color: rgba(3, 247, 181, 0.6); color: var(--tpt-mint); } #tptools .tpt-mact.is-copied .tpt-mact__label { display: none; } #tptools .tpt-mact.is-copied .tpt-mact__done { display: inline-flex; } /* shortlist panel rows hold whole messages */ #tptools .tpt-srow--msg { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; } #tptools .tpt-srow--msg .tpt-srow__text { font-size: 14px; line-height: 24px; font-weight: 400; color: rgba(255, 255, 255, 0.9); white-space: pre-line; } #tptools .tpt-srow--msg .tpt-mact { align-self: flex-start; } #tptools .tpt-srow--msg .tpt-heart { width: 20px; height: 20px; } /* page sections: example bubbles with a small Copy link, quotes */ #tptools .tpt-section :is(.tpt-h2, .tpt-acc__toggle, .tpt-lead) + :where(.tpt-bubbles, .tpt-quotes), #tptools .tpt-section .tpt-acc__toggle + .tpt-table { margin-top: 40px; } #tptools .tpt-bubbles { display: grid; gap: 24px; } #tptools .tpt-bubbles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools .tpt-bubbles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #tptools .tpt-bubbles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } #tptools .tpt-bubble { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 22px 24px 18px; border-radius: 20px 20px 20px 6px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-bubble__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } #tptools .tpt-bubble__label { padding: 5px 12px; border-radius: 999px; background: rgba(3, 247, 181, 0.1); color: var(--tpt-mint); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; line-height: 20px; } #tptools .tpt-bubble__text { font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.88); } #tptools .tpt-copylink { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--tpt-muted); } #tptools .tpt-copylink:hover { color: #fff; } #tptools .tpt-copylink__tick, #tptools .tpt-copylink__done { display: none; } #tptools .tpt-copylink.is-copied { color: var(--tpt-mint); } #tptools .tpt-copylink.is-copied :is(.tpt-copylink__icon, .tpt-copylink__label) { display: none; } #tptools .tpt-copylink.is-copied :is(.tpt-copylink__tick, .tpt-copylink__done) { display: inline; } #tptools .tpt-quotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } #tptools .tpt-quotes li { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 16px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-quotes__mark { font-size: 32px; font-weight: 600; line-height: 32px; color: var(--tpt-mint); } #tptools .tpt-quotes p { font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.88); } #tptools .tpt-table--nohead tbody tr:first-child > * { border-top: 0; } /* hub v0.4.0: two live cards on phones need their own gap (the grid has none on phones) */ @media (max-width: 767px) { #tptools .tpt-tool-card--live:not([hidden]) ~ .tpt-tool-card--live:not([hidden]) { margin-top: 14px; } } @media (min-width: 768px) and (max-width: 1279px) { #tptools .tpt-bubbles--3, #tptools .tpt-bubbles--4, #tptools .tpt-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Phones, invitation tool (Mobile v2 3919:165 / 3919:1130) */ @media (max-width: 767px) { /* M/Breadcrumb (3919:168): Home › current page on one row; the middle crumb stays in the HTML and JSON-LD */ #tptools.tpt--invite .tpt-crumbs ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } #tptools.tpt--invite .tpt-crumbs ol::-webkit-scrollbar { display: none; } #tptools.tpt--invite .tpt-crumbs li { flex: none; } #tptools.tpt--invite .tpt-crumbs li:nth-child(2) { display: none; } #tptools.tpt--invite .tpt-row2--keep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } #tptools.tpt--invite .tpt-row2--date { grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; } #tptools.tpt--invite .tpt-row2--venue { grid-template-columns: minmax(0, 188fr) minmax(0, 110fr); gap: 10px; } #tptools.tpt--invite .tpt-more-toggle { min-height: 44px; margin: -6px 0; } #tptools.tpt--invite .tpt-more--inline { gap: 16px; } #tptools .tpt-style { gap: 16px; } #tptools .tpt-style:not(.is-open) { display: none; } #tptools .tpt-date__shown { left: 15px; } #tptools .tpt-date .tpt-field__icon { right: 14px; } #tptools .tpt-field .tpt-date input { padding-right: 38px; } #tptools.tpt--invite .tpt-results { background: var(--tpt-card); border: 1px solid var(--tpt-line); border-radius: 20px; padding: 20px 16px; } #tptools.tpt--invite .tpt-empty { min-height: 150px; padding: 16px 20px 12px; border: 0; background: none; gap: 14px; } #tptools.tpt--invite .tpt-empty__icon { width: 56px; height: 56px; } #tptools.tpt--invite .tpt-empty p { font-size: 15px; line-height: 24px; } #tptools .tpt-msgs { gap: 12px; scroll-margin-top: 16px; } #tptools .tpt-msgs .tpt-filters { margin: 0 -16px; padding-inline: 16px; } #tptools .tpt-mlist { gap: 10px; } #tptools .tpt-msg { gap: 10px; padding: 14px; } #tptools .tpt-msg__meta { gap: 8px; } #tptools .tpt-msg__tags { font-size: 12.5px; line-height: 18px; } #tptools .tpt-msg__meta .tpt-heart { width: 36px; height: 36px; border: 0; border-radius: 18px; margin: -6px -6px -6px 0; } #tptools .tpt-msg__text { font-size: 15px; line-height: 24px; } #tptools .tpt-msg__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #tptools .tpt-msg__actions .tpt-mact { min-height: 40px; padding: 0 8px; } #tptools.tpt--invite .tpt-actions { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 4px; padding-top: 0; } #tptools.tpt--invite .tpt-actions .tpt-btn { padding: 0 18px; } #tptools.tpt--invite .tpt-actions [data-tpt-more-ideas] { flex: 1; } #tptools .tpt-srow--msg { padding: 14px; } #tptools .tpt-srow--msg .tpt-heart { width: 36px; height: 36px; border: 0; margin: -8px -8px -8px 0; } #tptools .tpt-srow--msg .tpt-mact { min-height: 40px; padding: 0 18px; } #tptools .tpt-section :is(.tpt-h2, .tpt-acc__toggle, .tpt-lead) + :where(.tpt-bubbles, .tpt-quotes), #tptools .tpt-section .tpt-acc__toggle + .tpt-table { margin-top: 16px; } #tptools .tpt-bubbles, #tptools .tpt-bubbles--2, #tptools .tpt-bubbles--3, #tptools .tpt-bubbles--4, #tptools .tpt-quotes { grid-template-columns: minmax(0, 1fr); gap: 10px; } #tptools .tpt-bubble { gap: 10px; padding: 16px 16px 12px; border-radius: 18px 18px 18px 6px; } #tptools .tpt-bubble__body { gap: 10px; } #tptools .tpt-bubble__text, #tptools .tpt-quotes p { font-size: 15px; line-height: 24px; } #tptools .tpt-copylink { min-height: 32px; } #tptools .tpt-quotes li { flex-direction: row; gap: 10px; padding: 14px 16px; } #tptools .tpt-quotes__mark { font-size: 26px; line-height: 26px; } } /* ============================================================ v0.5.0 Wedding captions tool (Figma 3928:932 / 3928:1653) Shares the invitation tool's classes (the root also carries .tpt--invite); everything new is scoped to .tpt--cap. */ #tptools.tpt--cap .tpt-fieldhelp { margin-top: -2px; font-size: 13px; line-height: 20px; color: var(--tpt-muted); } #tptools.tpt--cap .tpt-mdivider { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--tpt-soft); } #tptools.tpt--cap .tpt-mdivider::after { content: ""; flex: 1; height: 1px; background: var(--tpt-line); } #tptools.tpt--cap .tpt-msg__text { white-space: normal; } #tptools.tpt--cap .tpt-capgroup { margin: 40px 0 20px; font-size: 18px; font-weight: 600; line-height: 27px; color: #fff; } #tptools.tpt--cap .tpt-section .tpt-lead + .tpt-capgroup { margin-top: 32px; } #tptools.tpt--cap .tpt-capgroup + .tpt-bubbles { margin-top: 0; } #tptools.tpt--cap .tpt-caps { gap: 16px; } #tptools.tpt--cap .tpt-caps .tpt-bubble { gap: 16px; padding: 20px 20px 16px; border-radius: 16px; } #tptools.tpt--cap .tpt-caps .tpt-bubble__text { font-size: 15px; line-height: 24px; } #tptools.tpt--cap .tpt-tips--plain p strong { margin-top: 0; } @media (max-width: 767px) { #tptools.tpt--cap .tpt-dt { display: none !important; } #tptools.tpt--cap .tpt-msg__actions { display: flex; flex-wrap: wrap; } #tptools.tpt--cap .tpt-msg__actions .tpt-mact { min-height: 40px; padding: 0 16px; } #tptools.tpt--cap .tpt-capgroup { margin: 20px 0 10px; font-size: 16px; line-height: 24px; } #tptools.tpt--cap .tpt-section .tpt-lead + .tpt-capgroup { margin-top: 16px; } #tptools.tpt--cap .tpt-caps { gap: 10px; } #tptools.tpt--cap .tpt-caps .tpt-bubble { gap: 10px; padding: 16px 16px 12px; border-radius: 16px; } } /* ============================================================ v0.6.0 Wedding Song Finder (Figma 3948:212 / 3957:3673) Everything new is scoped to .tpt--songs; shared pieces (buttons, cards, panel, toast, FAQ, accordion) come from above. */ #tptools.tpt--songs .tpt-stool .tpt-wrap { position: relative; } #tptools.tpt--songs .tpt-stabs { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 16px; border-radius: 999px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools.tpt--songs .tpt-stab { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 12px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #fff; } #tptools.tpt--songs .tpt-stab__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 600; } #tptools.tpt--songs .tpt-stab[aria-selected="true"] { background: var(--tpt-mint); color: #04050e; } #tptools.tpt--songs .tpt-stab[aria-selected="true"] .tpt-stab__n { background: #04050e; color: var(--tpt-mint); } #tptools.tpt--songs .tpt-stab__count { margin-left: -4px; } #tptools.tpt--songs .tpt-sgrid { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 656fr); gap: 24px; align-items: start; } #tptools.tpt--songs .tpt-quiz { display: flex; flex-direction: column; gap: 20px; } #tptools.tpt--songs .tpt-link--mint { color: var(--tpt-mint); text-decoration: none; } #tptools.tpt--songs .tpt-btn--icon svg { flex: none; } /* quiz: progress, questions, photo + icon cards */ #tptools.tpt--songs .tpt-qbody { display: flex; flex-direction: column; gap: 20px; } #tptools.tpt--songs .tpt-qprog { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-qprog__back, #tptools.tpt--songs .tpt-qprog__skip { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-qprog__back:disabled { opacity: 0.45; cursor: default; } #tptools.tpt--songs .tpt-qprog__mid { display: inline-flex; align-items: center; gap: 12px; } #tptools.tpt--songs .tpt-qprog__n { color: #fff; font-weight: 600; } #tptools.tpt--songs .tpt-qprog__dots { display: inline-flex; gap: 6px; } #tptools.tpt--songs .tpt-qdot { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.24); transition: width .2s; position: relative; } #tptools.tpt--songs .tpt-qdot::before { content: ""; position: absolute; inset: -10px -4px; } #tptools.tpt--songs .tpt-qdot.is-done { background: var(--tpt-mint); } #tptools.tpt--songs .tpt-qdot.is-current { width: 24px; background: var(--tpt-mint); } #tptools.tpt--songs .tpt-q { display: flex; flex-direction: column; gap: 12px; } #tptools.tpt--songs .tpt-q__title { font-size: 26px; font-weight: 600; line-height: 32px; color: #fff; } #tptools.tpt--songs .tpt-q__help { margin-top: -6px; margin-bottom: 4px; font-size: 14px; line-height: 21px; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-q__sub { margin-top: 12px; } #tptools.tpt--songs .tpt-q__note, #tptools.tpt--songs .tpt-q__context { font-size: 13px; line-height: 20px; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-qgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } #tptools.tpt--songs .tpt-qgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #tptools.tpt--songs .tpt-qcard { white-space: normal; position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 104px; padding: 10px; border-radius: 14px; overflow: hidden; text-align: left; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; } #tptools.tpt--songs .tpt-qcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #tptools.tpt--songs .tpt-qcard--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 5, 14, 0) 0%, rgba(4, 5, 14, 0.92) 100%); } #tptools.tpt--songs .tpt-qcard__label { position: relative; z-index: 1; font-size: 12.5px; font-weight: 600; line-height: 16px; letter-spacing: -0.1px; white-space: normal; overflow-wrap: normal; hyphens: manual; } #tptools.tpt--songs .tpt-qcard--icon { justify-content: space-between; align-items: flex-start; } #tptools.tpt--songs .tpt-qcard__icon { color: var(--tpt-mint); } #tptools.tpt--songs .tpt-qcard__tick { position: absolute; z-index: 2; top: 8px; right: 8px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tpt-mint); } #tptools.tpt--songs .tpt-qcard[aria-checked="true"] { border: 2px solid var(--tpt-mint); padding: 9px; } #tptools.tpt--songs .tpt-qcard[aria-checked="true"] .tpt-qcard__tick { display: grid; } #tptools.tpt--songs .tpt-qcard[aria-checked="true"]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(3, 247, 181, 0.14); pointer-events: none; } #tptools.tpt--songs .tpt-qcard[aria-checked="true"] .tpt-qcard__label { color: var(--tpt-mint); } #tptools.tpt--songs .tpt-qcard:hover { border-color: rgba(255, 255, 255, 0.3); } #tptools.tpt--songs .tpt-qcard:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #tptools.tpt--songs .tpt-qsum { display: flex; flex-direction: column; gap: 12px; padding: 17px 19px; border-radius: 16px; background: rgba(3, 247, 181, 0.05); border: 1px solid rgba(3, 247, 181, 0.3); } #tptools.tpt--songs .tpt-qsum__top { display: flex; align-items: center; justify-content: space-between; } #tptools.tpt--songs .tpt-qsum__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--tpt-mint); } #tptools.tpt--songs .tpt-qsum__picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #tptools.tpt--songs .tpt-qsum__pick { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 14px; color: #fff; } #tptools.tpt--songs .tpt-qsum__sep { color: var(--tpt-muted); } #tptools.tpt--songs .tpt-qfoot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 20px; border-top: 1px solid var(--tpt-line); } #tptools.tpt--songs .tpt-small--warn { color: #ffd27a; } /* results: head, sort switch, filters */ #tptools.tpt--songs .tpt-sres { position: relative; display: flex; flex-direction: column; gap: 16px; } #tptools.tpt--songs .tpt-sres__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } #tptools.tpt--songs .tpt-sres__head .tpt-card__title { font-size: 22px; } #tptools.tpt--songs .tpt-sres__head .tpt-tags__count { margin-right: auto; } #tptools.tpt--songs .tpt-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid var(--tpt-line); } #tptools.tpt--songs .tpt-seg__opt { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #fff; } #tptools.tpt--songs .tpt-seg__opt[aria-checked="true"] { background: var(--tpt-mint); color: #04050e; } #tptools.tpt--songs .tpt-sres__sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: -4px; font-size: 14px; line-height: 20px; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-sres__updated { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } #tptools.tpt--songs .tpt-sfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } /* v0.6.1: wraps inside the card at every desktop width */ #tptools.tpt--songs .tpt-sfilter { min-width: 0; max-width: 100%; } #tptools.tpt--songs .tpt-sfilter__btn { max-width: 100%; } #tptools.tpt--songs .tpt-sfilter__btn [data-tpt-filter-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #tptools.tpt--songs .tpt-sfilter__btn { display: inline-flex; align-items: center; gap: 6px; height: 39px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); font-size: 14px; color: #fff; white-space: nowrap; } #tptools.tpt--songs .tpt-sfilter.is-on .tpt-sfilter__btn, #tptools.tpt--songs .tpt-sfilter__btn--toggle.is-on { border-color: var(--tpt-mint); color: var(--tpt-mint); background: rgba(3, 247, 181, 0.06); } #tptools.tpt--songs .tpt-sfilter__btn--toggle .tpt-switch__track { margin-left: 4px; width: 30px; height: 18px; } #tptools.tpt--songs .tpt-sfilter__btn--toggle .tpt-switch__track::after { width: 12px; height: 12px; } #tptools.tpt--songs .tpt-sfilter__btn--toggle[aria-checked="true"] .tpt-switch__track { background: var(--tpt-mint); } #tptools.tpt--songs .tpt-sfilter__btn--toggle[aria-checked="true"] .tpt-switch__track::after { transform: translateX(12px); background: #04050e; } #tptools.tpt--songs .tpt-sfilters [data-tpt-clear] { margin-left: auto; white-space: nowrap; flex: none; } #tptools.tpt--songs .tpt-fpop { position: absolute; z-index: 30; width: 240px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 14px; background: #121522; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } #tptools.tpt--songs .tpt-fpop__opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; cursor: pointer; } #tptools.tpt--songs .tpt-fpop__opt:hover { background: rgba(255, 255, 255, 0.05); } #tptools.tpt--songs .tpt-fpop__opt input { width: 18px; height: 18px; accent-color: #03f7b5; } #tptools.tpt--songs .tpt-sempty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.16); text-align: center; color: var(--tpt-soft); font-size: 14px; line-height: 21px; } #tptools.tpt--songs .tpt-sempty strong { color: #fff; } #tptools.tpt--songs .tpt-sempty__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(3, 247, 181, 0.08); color: var(--tpt-mint); } /* song cards */ #tptools.tpt--songs .tpt-scards { display: flex; flex-direction: column; gap: 12px; } #tptools.tpt--songs .tpt-scards.is-fading { animation: tpt-fade .35s ease; } @keyframes tpt-fade { from { opacity: 0.2; } to { opacity: 1; } } #tptools.tpt--songs .tpt-mdivider { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: 13px; font-weight: 500; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-mdivider::after { content: ""; flex: 1; height: 1px; background: var(--tpt-line); } #tptools.tpt--songs .tpt-song { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.1); outline: none; } #tptools.tpt--songs .tpt-song:focus-visible { outline: 2px solid var(--tpt-mint); outline-offset: 2px; } #tptools.tpt--songs .tpt-song.is-saved { background: rgba(3, 247, 181, 0.05); border-color: rgba(3, 247, 181, 0.3); } #tptools.tpt--songs .tpt-song__pick { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--tpt-mint); color: #04050e; font-size: 12px; font-weight: 600; } #tptools.tpt--songs .tpt-song__head { display: flex; align-items: flex-start; gap: 14px; } #tptools.tpt--songs .tpt-song__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(3, 247, 181, 0.08); border: 1px solid rgba(3, 247, 181, 0.2); color: var(--tpt-mint); } #tptools.tpt--songs .tpt-song__hx { min-width: 0; display: flex; flex-direction: column; gap: 4px; } #tptools.tpt--songs .tpt-song__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } #tptools.tpt--songs .tpt-song__title strong { font-size: 18px; font-weight: 600; line-height: 26px; color: #fff; } #tptools.tpt--songs .tpt-song__lang, #tptools.tpt--songs .tpt-tag { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.85); } #tptools.tpt--songs .tpt-tag { background: rgba(3, 247, 181, 0.1); color: var(--tpt-mint); white-space: nowrap; } #tptools.tpt--songs .tpt-song__by { font-size: 14px; line-height: 21px; color: var(--tpt-soft); overflow-wrap: anywhere; } #tptools.tpt--songs .tpt-song__badges { display: flex; flex-wrap: wrap; gap: 8px; } #tptools.tpt--songs .tpt-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.85); } #tptools.tpt--songs .tpt-badge--new { background: rgba(3, 247, 181, 0.1); color: var(--tpt-mint); border: 1px solid rgba(3, 247, 181, 0.4); } #tptools.tpt--songs .tpt-song__meters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 13px; } #tptools.tpt--songs .tpt-meter { display: inline-flex; align-items: center; gap: 8px; } #tptools.tpt--songs .tpt-meter__k { color: var(--tpt-muted); } #tptools.tpt--songs .tpt-meter__v { color: #fff; font-weight: 500; } #tptools.tpt--songs .tpt-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } #tptools.tpt--songs .tpt-bars i { width: 4px; border-radius: 1px; background: rgba(255, 255, 255, 0.18); } #tptools.tpt--songs .tpt-bars i:nth-child(1) { height: 5px; } #tptools.tpt--songs .tpt-bars i:nth-child(2) { height: 7px; } #tptools.tpt--songs .tpt-bars i:nth-child(3) { height: 9px; } #tptools.tpt--songs .tpt-bars i:nth-child(4) { height: 11px; } #tptools.tpt--songs .tpt-bars i:nth-child(5) { height: 14px; } #tptools.tpt--songs .tpt-bars i.is-on { background: var(--tpt-mint); } #tptools.tpt--songs .tpt-shoes { display: inline-flex; gap: 2px; color: rgba(255, 255, 255, 0.2); } #tptools.tpt--songs .tpt-shoes .is-on { color: var(--tpt-mint); } #tptools.tpt--songs .tpt-song__whybtn { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; min-height: 32px; color: var(--tpt-mint); font-size: 14px; font-weight: 500; } #tptools.tpt--songs .tpt-song__whybtn[aria-expanded="true"] svg { transform: rotate(90deg); } #tptools.tpt--songs .tpt-song__why { padding: 12px 14px; border-radius: 12px; background: rgba(3, 247, 181, 0.05); border: 1px solid rgba(3, 247, 181, 0.2); font-size: 14px; line-height: 21px; color: #fff; } #tptools.tpt--songs .tpt-song__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } #tptools.tpt--songs .tpt-song__gap { flex: 1; } #tptools.tpt--songs .tpt-sbtn__l--short { display: none; } #tptools.tpt--songs .tpt-sbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap; } #tptools.tpt--songs .tpt-sbtn:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; } #tptools.tpt--songs .tpt-sbtn--save[aria-pressed="true"] { background: rgba(3, 247, 181, 0.14); border-color: var(--tpt-mint); color: var(--tpt-mint); } #tptools.tpt--songs .tpt-sbtn--save[aria-pressed="true"] path { fill: currentColor; } #tptools.tpt--songs .tpt-sres .tpt-actions { margin: 0; } /* My songs tray + tip */ #tptools.tpt--songs .tpt-stray { position: sticky; z-index: 40; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-top: 16px; pointer-events: none; } #tptools.tpt--songs .tpt-stray > * { pointer-events: auto; } #tptools.tpt--songs .tpt-stray__tip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #fff; color: #04050e; font-size: 13px; font-weight: 500; } #tptools.tpt--songs .tpt-stray__bar { display: flex; align-items: center; gap: 16px; width: 520px; max-width: 100%; padding: 8px 8px 8px 20px; border-radius: 999px; background: #101320; border: 1px solid rgba(3, 247, 181, 0.35); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); } #tptools.tpt--songs .tpt-stray__mine { flex: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: #fff; text-align: left; } #tptools.tpt--songs .tpt-stray__mine > svg { color: var(--tpt-mint); } #tptools.tpt--songs .tpt-stray__n { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--tpt-mint); color: #04050e; font-size: 13px; } #tptools.tpt--songs .tpt-stray__n.is-bounce { animation: tpt-bounce .3s ease; } @keyframes tpt-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } #tptools.tpt--songs .tpt-panel__heart { color: var(--tpt-mint); } #tptools.tpt--songs .tpt-srow--song .tpt-srow__song { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-srow--song strong { font-size: 15px; color: #fff; } #tptools.tpt--songs .tpt-iconbtn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; } #tptools.tpt--songs .tpt-iconbtn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.4); } #tptools.tpt--songs .tpt-iconbtn:disabled { opacity: 0.35; cursor: default; } #tptools.tpt--songs .tpt-copybox { position: fixed; z-index: 9999; left: 16px; right: 16px; bottom: 140px; height: 120px; padding: 12px; border-radius: 12px; background: #fff; color: #04050e; font-size: 13px; } #tptools.tpt--songs .tpt-toast--undo { display: inline-flex; align-items: center; gap: 14px; } #tptools.tpt--songs .tpt-toast--undo.is-on { pointer-events: auto; } #tptools.tpt--songs .tpt-toast__undo { font-weight: 600; text-decoration: underline; color: #04050e; } #tptools.tpt--songs .tpt-confirm { position: fixed; z-index: 9998; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: 20px; background: var(--tpt-card); border: 1px solid rgba(3, 247, 181, 0.3); } #tptools.tpt--songs .tpt-confirm__title { font-size: 18px; font-weight: 600; line-height: 27px; } #tptools.tpt--songs .tpt-confirm__btns { display: flex; gap: 10px; } #tptools.tpt--songs [data-tpt-confirm-scrim] { z-index: 9997; } /* plan the night */ #tptools.tpt--songs .tpt-plan { display: flex; flex-direction: column; gap: 24px; } #tptools.tpt--songs .tpt-plan__head .tpt-card__title { font-size: 22px; } #tptools.tpt--songs .tpt-plan__intro { margin-top: 6px; font-size: 15px; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-plan__settings { display: flex; flex-wrap: wrap; gap: 16px; } #tptools.tpt--songs .tpt-plan__settings .tpt-field:first-child { width: 300px; } #tptools.tpt--songs .tpt-plan__settings input { height: 44px; border-radius: 12px; } #tptools.tpt--songs .tpt-field--time input { width: 170px; color-scheme: dark; } #tptools.tpt--songs .tpt-stepper { display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; height: 44px; padding: 0 6px; min-width: 150px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); } #tptools.tpt--songs .tpt-stepper--sm { height: 34px; min-width: 106px; padding: 0 4px; } #tptools.tpt--songs .tpt-stepper__btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #fff; } #tptools.tpt--songs .tpt-stepper--sm .tpt-stepper__btn { width: 26px; height: 26px; background: none; } #tptools.tpt--songs .tpt-stepper__val { font-size: 14px; font-weight: 500; white-space: nowrap; } #tptools.tpt--songs .tpt-run { display: flex; flex-direction: column; gap: 8px; } #tptools.tpt--songs .tpt-runrow { display: grid; grid-template-columns: 24px 28px 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.1); } #tptools.tpt--songs .tpt-runrow.is-picked { border-color: var(--tpt-mint); background: rgba(3, 247, 181, 0.06); } #tptools.tpt--songs .tpt-runrow__grip { display: grid; place-items: center; width: 24px; height: 36px; color: var(--tpt-muted); cursor: grab; touch-action: none; } #tptools.tpt--songs .tpt-runrow__grip[aria-pressed="true"] { color: var(--tpt-mint); } #tptools.tpt--songs .tpt-runrow__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 600; } #tptools.tpt--songs .tpt-runrow__time { font-size: 15px; font-weight: 600; color: var(--tpt-mint); white-space: nowrap; } #tptools.tpt--songs .tpt-runrow__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; } #tptools.tpt--songs .tpt-runrow__t strong { font-size: 16px; color: #fff; } #tptools.tpt--songs .tpt-runrow__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--tpt-muted); } #tptools.tpt--songs .tpt-runrow__ctrl { display: flex; align-items: center; gap: 8px; } #tptools.tpt--songs .tpt-runrow__who { height: 34px; padding: 0 30px 0 12px; border-radius: 999px; background: var(--tpt-bg); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 14px; color-scheme: dark; } #tptools.tpt--songs .tpt-runrow__addnote, #tptools.tpt--songs .tpt-runrow__noteph { width: 84px; font-size: 13px; white-space: nowrap; } #tptools.tpt--songs .tpt-runrow__note { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; background: var(--tpt-bg); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; color: var(--tpt-muted); } #tptools.tpt--songs .tpt-runrow__note input { flex: 1; min-width: 0; height: 28px; background: none; border: 0; color: #fff; font-size: 14px; outline: none; } #tptools.tpt--songs .tpt-addown { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; color: var(--tpt-mint); font-size: 15px; font-weight: 500; } #tptools.tpt--songs .tpt-ownform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, 0.18); } #tptools.tpt--songs .tpt-ownform input { height: 44px; } #tptools.tpt--songs .tpt-ownform__btns { grid-column: 1 / -1; display: flex; gap: 10px; } #tptools.tpt--songs .tpt-plan__sum { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 17px 20px; border-radius: 14px; background: #0f1a1a; border: 1px solid rgba(3, 247, 181, 0.3); font-size: 16px; font-weight: 600; } #tptools.tpt--songs .tpt-plan__sum svg { width: 18px; height: 18px; color: var(--tpt-mint); } #tptools.tpt--songs .tpt-plan__share { display: flex; flex-wrap: wrap; gap: 10px; } #tptools.tpt--songs .tpt-sempty--plan { padding: 36px 20px; } #tptools.tpt--songs .tpt-print { display: none; } #tptools.tpt--songs .tpt-songs-indian { padding-top: 48px; } #tptools.tpt--songs .tpt-capgroup { margin: 36px 0 16px; font-size: 18px; font-weight: 600; line-height: 27px; color: #fff; } #tptools.tpt--songs .tpt-section .tpt-lead + .tpt-capgroup { margin-top: 32px; } #tptools.tpt--songs .tpt-songlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 32px; counter-reset: tptsong; } #tptools.tpt--songs .tpt-capgroup + .tpt-songlist { margin-top: 0; } #tptools.tpt--songs .tpt-songlist li { counter-increment: tptsong; display: flex; gap: 14px; padding: 18px 20px; border-radius: 16px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools.tpt--songs .tpt-songlist li::before { content: counter(tptsong, decimal-leading-zero); flex: none; font-size: 12.5px; font-weight: 600; letter-spacing: 1px; line-height: 24px; color: var(--tpt-mint); } #tptools.tpt--songs .tpt-songlist p { font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, 0.88); } #tptools.tpt--songs .tpt-songlist strong { color: #fff; font-weight: 600; } #tptools.tpt--songs .tpt-songlist__src { color: var(--tpt-soft); } #tptools.tpt--songs .tpt-songlist__why { color: var(--tpt-soft); } #tptools.tpt--songs .tpt-helper--songs { margin-top: 24px; font-size: 15px; line-height: 24px; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-tips--plain p strong { margin-top: 0; } @media (min-width: 768px) and (max-width: 1100px) { #tptools.tpt--songs .tpt-sgrid { grid-template-columns: minmax(0, 1fr); } #tptools.tpt--songs .tpt-runrow { grid-template-columns: 24px 28px 76px minmax(0, 1fr); } #tptools.tpt--songs .tpt-runrow__ctrl { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; } } /* Phones (Mobile v2 3957:3673) */ @media (max-width: 767px) { #tptools.tpt--songs .tpt-stabs { position: sticky; top: 0; z-index: 41; display: flex; width: 100%; margin-bottom: 12px; } #tptools.tpt--songs .tpt-stab { flex: 1; justify-content: center; padding: 0 10px; font-size: 14px; gap: 8px; } #tptools.tpt--songs .tpt-sgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; } #tptools.tpt--songs .tpt-quiz { gap: 16px; } #tptools.tpt--songs .tpt-q__title { font-size: 22px; line-height: 28px; } #tptools.tpt--songs .tpt-qgrid, #tptools.tpt--songs .tpt-qgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools.tpt--songs .tpt-qcard { height: 92px; } #tptools.tpt--songs .tpt-qfoot { padding-top: 16px; } #tptools.tpt--songs .tpt-sres { padding: 20px 16px; gap: 12px; } #tptools.tpt--songs .tpt-sres__head .tpt-card__title { font-size: 20px; } #tptools.tpt--songs .tpt-sfilters { flex-wrap: nowrap; margin: 0 -16px; padding: 0 16px; } /* phones: one row that scrolls sideways (copy), inside the card */ #tptools.tpt--songs .tpt-sfilters [data-tpt-clear] { margin-left: 0; } #tptools.tpt--songs .tpt-fpop { width: min(240px, calc(100% - 16px)); } #tptools.tpt--songs .tpt-song { padding: 14px; gap: 10px; } #tptools.tpt--songs .tpt-song__icon { width: 40px; height: 40px; } #tptools.tpt--songs .tpt-song__title strong { font-size: 16px; line-height: 23px; } #tptools.tpt--songs .tpt-song__meters { gap: 6px 14px; font-size: 12.5px; } #tptools.tpt--songs .tpt-song__whybtn { margin-left: 0; } #tptools.tpt--songs .tpt-sbtn { height: 36px; padding: 0 10px; font-size: 13px; gap: 6px; } #tptools.tpt--songs .tpt-sbtn__l--long { display: none; } #tptools.tpt--songs .tpt-sbtn__l--short { display: inline; } #tptools.tpt--songs .tpt-song__acts { flex-wrap: nowrap; } #tptools.tpt--songs .tpt-sres__head .tpt-seg { width: 100%; } #tptools.tpt--songs .tpt-seg__opt { flex: 1; } /* Home › current page on one row (as tools 2 and 3); the middle crumb stays in the HTML and JSON-LD */ #tptools.tpt--songs .tpt-crumbs ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } #tptools.tpt--songs .tpt-crumbs li { flex: none; } #tptools.tpt--songs .tpt-crumbs li:nth-child(2) { display: none; } #tptools.tpt--songs .tpt-sbtn--save .tpt-sbtn__l, #tptools.tpt--songs .tpt-sbtn--copy .tpt-sbtn__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #tptools.tpt--songs .tpt-sbtn--save, #tptools.tpt--songs .tpt-sbtn--copy { width: 40px; padding: 0; justify-content: center; } #tptools.tpt--songs .tpt-stray { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; } #tptools.tpt--songs .tpt-stray__bar { width: 100%; height: 56px; padding: 6px 6px 6px 16px; } #tptools.tpt--songs .tpt-stray__bar .tpt-btn { height: 44px; padding: 0 16px; } #tptools.tpt--songs .tpt-plan { gap: 18px; } #tptools.tpt--songs .tpt-plan__settings .tpt-field:first-child { width: 100%; } #tptools.tpt--songs .tpt-runrow { grid-template-columns: 20px 26px auto minmax(0, 1fr); gap: 8px 10px; padding: 12px 10px; } #tptools.tpt--songs .tpt-runrow__ctrl { grid-column: 1 / -1; flex-wrap: wrap; gap: 4px; } #tptools.tpt--songs .tpt-runrow__who { flex: 1 1 80px; min-width: 80px; padding: 0 20px 0 8px; font-size: 13px; } #tptools.tpt--songs .tpt-runrow .tpt-stepper--sm { min-width: 88px; padding: 0 2px; } #tptools.tpt--songs .tpt-runrow .tpt-stepper--sm .tpt-stepper__val { font-size: 13px; } #tptools.tpt--songs .tpt-runrow .tpt-stepper--sm { min-width: 0; gap: 0; } #tptools.tpt--songs .tpt-runrow .tpt-stepper--sm .tpt-stepper__btn { width: 24px; height: 28px; } #tptools.tpt--songs .tpt-runrow .tpt-iconbtn { width: 28px; height: 28px; } #tptools.tpt--songs .tpt-runrow__addnote { order: 9; flex-basis: 100%; width: auto; text-align: left; } #tptools.tpt--songs .tpt-runrow__noteph { display: none; } #tptools.tpt--songs .tpt-ownform { grid-template-columns: minmax(0, 1fr); } #tptools.tpt--songs .tpt-plan__share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools.tpt--songs .tpt-plan__share .tpt-btn { padding: 0 10px; font-size: 14px; } #tptools.tpt--songs .tpt-songlist { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; } #tptools.tpt--songs .tpt-songlist li { padding: 14px 16px; } #tptools.tpt--songs .tpt-capgroup { margin: 20px 0 10px; font-size: 16px; } #tptools.tpt--songs .tpt-songs-indian { padding-top: 24px; } #tptools.tpt--songs .tpt-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } /* Print / Save as PDF: only the running order table */ @media print { html.tpt-printing body * { visibility: hidden !important; } html.tpt-printing #tptools.tpt--songs .tpt-print, html.tpt-printing #tptools.tpt--songs .tpt-print * { visibility: visible !important; } html.tpt-printing #tptools.tpt--songs .tpt-print { display: block !important; position: absolute; left: 0; top: 0; width: 100%; color: #000; background: #fff; font: 12pt/1.4 Poppins, Arial, sans-serif; } html.tpt-printing #tptools.tpt--songs .tpt-print h2 { font-size: 18pt; margin: 0 0 4pt; color: #000; } html.tpt-printing #tptools.tpt--songs .tpt-print table { width: 100%; border-collapse: collapse; margin-top: 10pt; } html.tpt-printing #tptools.tpt--songs .tpt-print th, html.tpt-printing #tptools.tpt--songs .tpt-print td { border: 1px solid #999; padding: 4pt 6pt; text-align: left; vertical-align: top; color: #000; } } /* ============================================================ v0.6.1 site header offset (all tools pages) --tpt-top is set by a tiny script (frontend.php) to the height of the site's fixed/sticky header plus the WP admin bar. Anything the tools scroll to stops below it, and the song finder's sticky phone tab bar sits under the header, not beneath it. */ /* The live header is position: fixed with no z-index, so positioned parts of the tools (cards, photos, the tool wrapper) that come later in the page painted over it while scrolling. On tools pages only, lift the site header above the tools (modals, toasts and the admin bar stay above it). */ body.tptools-page .elementor-location-header, body.tptools-page header.site-header, body.tptools-page #site-header { position: relative; z-index: 1000; } /* --tpt-pad = the page's own scroll-padding-top (WordPress sets it for the admin bar), so it isn't counted twice. */ #tptools { --tpt-top: 0px; --tpt-pad: 0px; } #tptools [id] { scroll-margin-top: calc(var(--tpt-top) - var(--tpt-pad) + 16px); } #tptools .tpt-tool, #tptools .tpt-notice, #tptools [data-tpt-tabs], #tptools [data-tpt-msgs], #tptools [data-tpt-couple], #tptools [data-tpt-results], #tptools .tpt-h2, #tptools .tpt-faq__item, #tptools [data-tpt-acc] { scroll-margin-top: calc(var(--tpt-top) - var(--tpt-pad) + 16px); } @media (max-width: 767px) { #tptools.tpt--songs .tpt-stabs { top: var(--tpt-top); } } @media (min-width: 768px) { #tptools .tpt-panel { top: max(56px, calc(var(--tpt-top) + 16px)); } } /* ============================================================ v0.7.0 TurtlePic AI gallery CTA (Figma 3981:348) /tools/ after the tool grid, tool pages right under the tool. Phone animation: assets/js/cta.js. */ #tptools .tpt-gcta { padding-bottom: 120px; } #tptools .tpt-gcta__card { display: flex; gap: 40px; align-items: stretch; overflow: hidden; padding: 56px 40px 0 64px; background: #0a0c16; border: 1px solid var(--tpt-line); border-radius: 24px; } #tptools .tpt-gcta__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 56px; } #tptools .tpt-gcta__eyebrow { margin: 0; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tpt-mint); } #tptools .tpt-gcta__h { margin: 0; font-size: 40px; font-weight: 600; line-height: 50px; letter-spacing: -0.4px; color: #fff; } #tptools .tpt-gcta__line { margin: 0; font-size: 17px; line-height: 28px; color: #8e93a0; } #tptools .tpt-gcta__points { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; } #tptools .tpt-gcta__points li { display: flex; gap: 14px; align-items: flex-start; margin: 0; } #tptools .tpt-gcta__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(3, 247, 181, 0.1); } #tptools .tpt-gcta__points p { margin: 0; font-size: 15px; line-height: 24px; color: #8e93a0; } #tptools .tpt-gcta__points strong { font-weight: 500; color: #fff; } #tptools .tpt-gcta__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } #tptools .tpt-gcta__start { font-size: 16px; font-weight: 600; } #tptools .tpt-gcta__how { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; line-height: 24px; color: #fff; text-decoration: none; } #tptools .tpt-gcta__how:hover { color: var(--tpt-mint); } #tptools .tpt-gcta__how .tpt-arrow18 { display: block; transition: transform .2s; } #tptools .tpt-gcta__how:hover .tpt-arrow18 { transform: translateX(3px); } #tptools .tpt-gcta__small { margin: 0; font-size: 13px; line-height: 20px; color: #8e93a0; } #tptools .tpt-gcta__visual { flex: none; width: 456px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; padding-bottom: 28px; } #tptools .tpt-gcta__stage { position: relative; width: 224px; height: 468px; } #tptools .tpt-gcta__phone { position: absolute; inset: 0; padding: 7px; border-radius: 40px; background: #0b0c13; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 22px 45px rgba(0, 0, 0, 0.55); } #tptools .tpt-gcta__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 33px; background: #000; } #tptools .tpt-gcta__island { position: absolute; top: 7px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 9px; background: #000; } #tptools .tpt-gcta__look { position: absolute; inset: 24px 0 0; overflow: hidden; opacity: 0; transition: opacity .8s ease; } #tptools .tpt-gcta__look.is-on { opacity: 1; } /* v0.7.2: cover and photo grid form one long page (the track); cta.js scrolls it in one smooth move. */ #tptools .tpt-gcta__track { position: absolute; top: 0; left: 0; right: 0; height: 100%; will-change: transform; } #tptools .tpt-gcta__cover { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; } #tptools .tpt-gcta__grid { position: absolute; top: 100%; left: 0; width: 100%; height: auto; max-width: none; } #tptools .tpt-gcta__chip { position: absolute; top: 94px; left: -50px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(4, 5, 14, 0.92); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 500; line-height: 18px; color: #fff; white-space: nowrap; transition: opacity .4s ease; } #tptools .tpt-gcta__visual.is-grid .tpt-gcta__chip { opacity: 0; } #tptools .tpt-gcta__meta { display: flex; align-items: center; gap: 10px; } #tptools .tpt-gcta__label { font-size: 12px; font-weight: 500; line-height: 18px; color: #fff; } #tptools .tpt-gcta__dots { display: inline-flex; gap: 5px; } #tptools .tpt-gcta__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background .3s; } #tptools .tpt-gcta__dots i.is-on { background: var(--tpt-mint); } @media (min-width: 768px) and (max-width: 1100px) { #tptools .tpt-gcta__card { padding: 48px 32px 0 40px; gap: 24px; } #tptools .tpt-gcta__visual { width: 300px; } #tptools .tpt-gcta__h { font-size: 32px; line-height: 40px; } } @media (max-width: 767px) { #tptools .tpt-gcta { padding-bottom: 64px; } #tptools .tpt-gcta__card { flex-direction: column; gap: 32px; padding: 32px 20px 28px; border-radius: 20px; } #tptools .tpt-gcta__copy { gap: 18px; padding-bottom: 0; } #tptools .tpt-gcta__h { font-size: 28px; line-height: 36px; letter-spacing: -0.3px; } #tptools .tpt-gcta__line { font-size: 15px; line-height: 24px; } #tptools .tpt-gcta__points p { font-size: 14px; line-height: 22px; } #tptools .tpt-gcta__actions { width: 100%; flex-direction: column; gap: 16px; } #tptools .tpt-gcta__start { width: 100%; } #tptools .tpt-gcta__small { align-self: center; } #tptools .tpt-gcta__visual { width: 100%; padding-bottom: 0; } #tptools .tpt-gcta__stage { width: 214px; height: 448px; } #tptools .tpt-gcta__chip { left: -40px; } } @media (prefers-reduced-motion: reduce) { #tptools .tpt-gcta__look, #tptools .tpt-gcta__track { transition: none !important; } } /* ============================================================ v0.8.0 Wedding vendor directory (/wedding-vendors/) * Figma VsewmJ3gucwNrnvEuLNwCI page 4004:58: card set 4004:785, list 4009:86 / 4010:489 (List 4010:4042 / 4010:4808), * venues 4011:1663, city 4012:2451 / 4012:2700, home 4014:2563 / 4014:3019, form 4015:4292…4015:4947, empty 4015:6336. * Hub block (/tools/, Weddings panel): 4014:17752 / 4014:18065. */ #tptools.tpt--vd .tpt-crumbs li, #tptools.tpt--vd .tpt-crumbs a { color: var(--tpt-soft); } #tptools.tpt--vd .tpt-crumbs__sep { color: rgba(167, 169, 178, 0.6); } #tptools.tpt--vd .tpt-crumbs [aria-current] { color: #fff; } #tptools .tpt-vdot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tpt-mint); } /* hero */ #tptools .tpt-vhero { padding: 32px 0 36px; } #tptools .tpt-vhero__h1 { margin-top: 28px; max-width: 1000px; } #tptools .tpt-vhero__intro { margin-top: 16px; max-width: 860px; font-size: 17px; line-height: 28px; color: var(--tpt-soft); } #tptools .tpt-vcount { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 16px 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--tpt-line); font-size: 14px; font-weight: 500; line-height: 21px; color: rgba(255, 255, 255, 0.92); } #tptools .tpt-vcount .tpt-vdot { width: 8px; height: 8px; } #tptools.tpt--vd-city .tpt-vhero { padding-bottom: 32px; } #tptools.tpt--vd-home .tpt-vhero { padding-bottom: 0; } /* city chips, filters, view toggle */ #tptools .tpt-vbar .tpt-wrap { border-bottom: 1px solid var(--tpt-line); padding-bottom: 28px; } #tptools .tpt-vbar { padding-bottom: 0; } #tptools .tpt-vcities { display: flex; flex-wrap: wrap; gap: 10px; } #tptools .tpt-vchip { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--tpt-soft); font-size: 14px; font-weight: 500; line-height: 21px; } #tptools .tpt-vchip:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; } #tptools .tpt-vchip.is-on { background: var(--tpt-mint); border-color: var(--tpt-mint); color: #04050e; } #tptools .tpt-vbar__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; } #tptools .tpt-vfilters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } #tptools .tpt-vfilter { position: relative; } #tptools .tpt-vfilter__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 16px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 14px; font-weight: 500; line-height: 21px; } #tptools .tpt-vfilter__btn:hover { border-color: rgba(255, 255, 255, 0.3); } #tptools .tpt-vfilter__btn svg { transition: transform .15s; } #tptools .tpt-vfilter__btn[aria-expanded="true"] svg { transform: rotate(180deg); } #tptools .tpt-vfilter.is-on .tpt-vfilter__btn { border-color: rgba(3, 247, 181, 0.6); background: rgba(3, 247, 181, 0.08); color: var(--tpt-mint); } #tptools .tpt-vfilter__panel { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 240px; max-width: 320px; max-height: 340px; overflow: auto; padding: 8px; border-radius: 16px; background: var(--tpt-card); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } #tptools .tpt-vfilter__panel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } #tptools .tpt-vopt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.9); cursor: pointer; } #tptools .tpt-vopt:hover { background: rgba(255, 255, 255, 0.05); } #tptools .tpt-vopt input { -webkit-appearance: auto; appearance: auto; width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--tpt-mint); } #tptools .tpt-vfilter__note { margin: 4px 10px 6px; padding-top: 8px; border-top: 1px solid var(--tpt-line); font-size: 12.5px; line-height: 19px; color: var(--tpt-muted); } #tptools .tpt-vclear { margin-left: 6px; color: var(--tpt-mint); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-vview { display: inline-flex; flex: none; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); } #tptools .tpt-vview__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 12px; border-radius: 999px; color: var(--tpt-soft); font-size: 14px; font-weight: 500; line-height: 21px; } #tptools .tpt-vview__btn:hover { color: #fff; } #tptools .tpt-vview__btn[aria-checked="true"] { background: rgba(3, 247, 181, 0.12); color: var(--tpt-mint); } #tptools .tpt-vscrim { display: none; } /* v0.8.1: filters and the Grid/List switch stay visible before vendors.js runs (LiteSpeed delays all scripts until the first scroll or tap). */ /* cards */ #tptools .tpt-vresults { padding-top: 28px; } #tptools .tpt-vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } #tptools .tpt-vcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); transition: border-color .15s, transform .15s; } #tptools .tpt-vcard:hover { border-color: rgba(255, 255, 255, 0.2); } #tptools .tpt-vcard:focus-within { border-color: rgba(3, 247, 181, 0.5); } #tptools .tpt-vcard__media { position: relative; display: flex; align-items: center; justify-content: center; flex: none; aspect-ratio: 3 / 2; overflow: hidden; background: #0e111e; } #tptools .tpt-vcard__img { width: 100%; height: 100%; object-fit: cover; } #tptools .tpt-vcard--logo .tpt-vcard__media { background: linear-gradient(153deg, #171a28 14%, #0b0d16 86%); box-shadow: inset 0 0 0 1px var(--tpt-line); } #tptools .tpt-vcard--logo .tpt-vcard__img { width: auto; height: auto; max-width: 45%; max-height: 46%; object-fit: contain; } #tptools .tpt-vcard__ill { display: none; width: 140px; height: 140px; } #tptools .tpt-vcard__media.is-noimg { background: #0e111e; box-shadow: none; } #tptools .tpt-vcard__media.is-noimg .tpt-vcard__img { display: none; } #tptools .tpt-vcard__media.is-noimg .tpt-vcard__ill { display: block; } #tptools .tpt-vcard__tag { position: absolute; top: 12px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(4, 5, 14, 0.8); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 16px; } /* v0.8.3: every line has a fixed height, so all cards in a grid are the same height at every width (Grid and List) */ #tptools .tpt-vcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 0; min-width: 0; } #tptools .tpt-vcard__body > * { flex: none; min-width: 0; margin: 0; overflow: hidden; } #tptools .tpt-vcard__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 48px; overflow-wrap: anywhere; font-size: 17px; font-weight: 600; line-height: 24px; color: #fff; } #tptools .tpt-vcard__area { display: flex; align-items: center; gap: 5px; height: 20px; font-size: 13px; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-vcard__area svg { flex: none; } #tptools .tpt-vcard__area span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #tptools .tpt-vcard__venue { height: 20px; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 500; line-height: 20px; color: #fff; } #tptools .tpt-vcard__venue span + span { margin-left: 12px; } #tptools .tpt-vcard__venue svg { display: inline-block; margin-right: 5px; vertical-align: -2px; } #tptools .tpt-vcard__svc { height: 20px; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 500; line-height: 20px; color: rgba(255, 255, 255, 0.86); } #tptools .tpt-vcard__price, #tptools .tpt-vcard__nop { height: 22px; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; line-height: 22px; color: #fff; } #tptools .tpt-vcard__line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 40px; font-size: 13px; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-vcard__actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding: 16px 18px 14px; } #tptools .tpt-vcard__btns { display: flex; gap: 8px; } /* "Is this yours? Correct or remove": small and quiet, above the card link (never nested in it) */ #tptools .tpt-vfix { position: relative; z-index: 2; align-self: center; font-size: 12px; font-weight: 400; line-height: 18px; color: var(--tpt-muted); text-decoration: none; } #tptools .tpt-vfix:hover { color: var(--tpt-soft); text-decoration: underline; text-underline-offset: 2px; } #tptools .tpt-vfix:focus-visible { outline: 2px solid var(--tpt-mint); outline-offset: 2px; border-radius: 4px; } #tptools .tpt-vcount-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; } #tptools .tpt-vcount-row .tpt-vcount { margin-top: 0; } #tptools .tpt-vfix--count { align-self: center; } #tptools .tpt-vbtn { display: inline-flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 999px; font-size: 13px; line-height: 1; white-space: nowrap; transition: background .15s, border-color .15s; } #tptools .tpt-vbtn--mint { background: var(--tpt-mint); color: #04050e; font-weight: 600; } #tptools .tpt-vbtn--mint:hover { background: #3ff9c6; color: #04050e; } #tptools .tpt-vbtn--ghost { position: relative; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-weight: 500; } #tptools .tpt-vbtn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); color: #fff; } /* the whole card opens the vendor's site */ #tptools .tpt-vcard__main::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; } #tptools .tpt-vcard__main:focus-visible { outline-offset: 2px; } /* List view (desktop): image left, text, buttons right */ @media (min-width: 768px) { #tptools .tpt-vgrid--list { grid-template-columns: minmax(0, 1fr); gap: 20px; } #tptools .tpt-vgrid--list .tpt-vcard { display: grid; grid-template-columns: 300px minmax(0, 1fr) 228px; height: 222px; } #tptools .tpt-vgrid--venues.tpt-vgrid--list .tpt-vcard { height: 248px; } #tptools .tpt-vgrid--list .tpt-vcard__media { aspect-ratio: auto; height: 100%; } #tptools .tpt-vgrid--list .tpt-vcard__tag { right: 12px; } #tptools .tpt-vgrid--list .tpt-vcard__body { justify-content: center; padding: 22px 24px 22px 28px; } #tptools .tpt-vgrid--list .tpt-vcard__name { height: 52px; font-size: 19px; line-height: 26px; } #tptools .tpt-vgrid--list .tpt-vcard__price { font-size: 15px; } #tptools .tpt-vgrid--list .tpt-vcard__actions { justify-content: center; margin: 0; padding: 0 28px 0 0; } #tptools .tpt-vgrid--list .tpt-vcard__btns { flex-direction: column; } #tptools .tpt-vgrid--list .tpt-vbtn { flex: none; width: 100%; height: 38px; } } /* empty state + show more */ #tptools .tpt-vempty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 72px 40px; border-radius: 24px; background: #0a0c16; border: 1px solid var(--tpt-line); text-align: center; } #tptools .tpt-vempty__ic { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: rgba(3, 247, 181, 0.08); border: 1px solid rgba(3, 247, 181, 0.28); } #tptools .tpt-vempty__h { font-size: 28px; font-weight: 600; line-height: 36px; color: #fff; } #tptools .tpt-vempty__p { max-width: 620px; font-size: 16px; line-height: 26px; color: var(--tpt-soft); } #tptools .tpt-vempty__btn { height: 48px; margin-top: 6px; padding: 0 28px; font-size: 15px; border-color: rgba(255, 255, 255, 0.9); } #tptools .tpt-vmore { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; } #tptools .tpt-vmore__btn { height: 44px; padding: 0 26px; font-size: 15px; border-color: rgba(255, 255, 255, 0.3); } #tptools .tpt-vmore__line { font-size: 13px; line-height: 20px; color: var(--tpt-muted); } /* guide */ #tptools .tpt-vguide { padding-top: 112px; } #tptools .tpt-vguide__text { max-width: 820px; } #tptools .tpt-vguide__text .tpt-marker { margin-bottom: 20px; } #tptools .tpt-vh2 { font-size: 36px; font-weight: 600; line-height: 44px; letter-spacing: -0.4px; color: #fff; } #tptools .tpt-vguide__text .tpt-vh2 + * { margin-top: 20px; } #tptools .tpt-vguide__text .tpt-vh2:not(:first-of-type) { margin-top: 44px; } #tptools .tpt-vguide__text p, #tptools .tpt-vguide__text li { font-size: 17px; line-height: 29px; color: var(--tpt-soft); } #tptools .tpt-vguide__text p + p, #tptools .tpt-vguide__text p + ul, #tptools .tpt-vguide__text ul + p, #tptools .tpt-vguide__text ul + ul { margin-top: 20px; } #tptools .tpt-vguide__text ul { display: flex; flex-direction: column; gap: 10px; } #tptools .tpt-vguide__text li { position: relative; padding-left: 22px; } #tptools .tpt-vguide__text li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--tpt-mint); } #tptools .tpt-vguide__text strong { color: #fff; font-weight: 600; } /* CTA, listing note, FAQ, link lines */ #tptools .tpt-vcta { padding-top: 112px; } #tptools .tpt-vcta .tpt-gcta { padding-bottom: 0; } #tptools .tpt-vnote-sec { padding-top: 96px; } #tptools .tpt-vnote-sec--foot { padding: 72px 0 120px; } #tptools .tpt-vnote { display: flex; align-items: center; gap: 12px; padding: 18px 24px 18px 20px; border-radius: 16px; background: #0a0c16; border: 1px solid var(--tpt-line); } #tptools .tpt-vnote p { flex: 1; font-size: 15px; line-height: 24px; color: var(--tpt-soft); } #tptools .tpt-vnote a { color: var(--tpt-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-vsec--faq { padding: 96px 0 0; } #tptools.tpt--vd .tpt-h2--editorial { font-size: 36px; line-height: 44px; letter-spacing: -0.4px; } #tptools.tpt--vd .tpt-editorial__grid { grid-template-columns: 360px minmax(0, 1fr); gap: 72px; } #tptools .tpt-vlinks { padding: 88px 0 120px; } #tptools .tpt-vlinks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } #tptools .tpt-vbox { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px; background: #0a0c16; border: 1px solid var(--tpt-line); } #tptools .tpt-vbox__label { font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tpt-muted); } #tptools .tpt-vlinks__list { display: flex; flex-direction: column; gap: 14px; } #tptools .tpt-vlinks__list a { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--tpt-mint); font-size: 15px; font-weight: 500; line-height: 21px; } #tptools .tpt-vlinks__list a svg { margin-top: 3px; transition: transform .15s; } #tptools .tpt-vlinks__list a:hover { color: #5ffbd0; } #tptools .tpt-vlinks__list a:hover svg { transform: translateX(3px); } /* city page */ #tptools .tpt-vtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } #tptools .tpt-vtile { position: relative; display: flex; flex-direction: column; min-height: 441px; overflow: hidden; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-vtile:hover { border-color: rgba(255, 255, 255, 0.2); } #tptools .tpt-vtile__photo { position: relative; height: 200px; flex: none; overflow: hidden; } #tptools .tpt-vtile__photo img { width: 100%; height: 100%; object-fit: cover; } #tptools .tpt-vtile__badge { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(4, 5, 14, 0.8); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 12px; font-weight: 500; line-height: 18px; } #tptools .tpt-vtile__badge .tpt-vdot { width: 6px; height: 6px; } #tptools .tpt-vtile__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; } #tptools .tpt-vtile__h { font-size: 20px; font-weight: 600; line-height: 28px; color: #fff; } #tptools .tpt-vtile__p { font-size: 14.5px; line-height: 23px; color: var(--tpt-soft); } #tptools .tpt-vtile__link { display: inline-flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 12px; color: var(--tpt-mint); font-size: 14px; font-weight: 600; line-height: 20px; } #tptools .tpt-vtile__link svg { margin-top: 3px; } #tptools .tpt-vtile__link::after, #tptools .tpt-vcitycard__h a::after { content: ""; position: absolute; inset: 0; z-index: 1; } #tptools .tpt-vother { padding-top: 48px; } #tptools .tpt-vother__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; } #tptools .tpt-vother .tpt-vlinks__list { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; } #tptools .tpt-vother .tpt-vlinks__list a { font-weight: 600; } #tptools.tpt--vd-city .tpt-vnote-sec--foot { padding-top: 48px; } /* directory home */ #tptools .tpt-vsearch-sec { padding-top: 32px; } #tptools .tpt-vsearch { display: flex; align-items: flex-end; gap: 16px; padding: 22px; border-radius: 24px; background: #0a0c16; border: 1px solid var(--tpt-line); } #tptools .tpt-vsearch__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #tptools .tpt-vsearch__field--what { flex: 1 1 0; } #tptools .tpt-vsearch__field--where { flex: 0 0 360px; } #tptools .tpt-vsearch__field label, #tptools .tpt-vhub__field label { font-size: 13px; font-weight: 500; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-vselect { position: relative; } /* v0.8.3 themed dropdowns. Before vendors.js / vselect.js run, the native select is shown, as dark as CSS allows. */ #tptools .tpt-vselect select { width: 100%; height: 56px; padding: 0 44px 0 18px; border-radius: 12px; background: #080911; border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; color-scheme: dark; font: inherit; font-size: 16px; font-weight: 500; -webkit-appearance: none; appearance: none; cursor: pointer; } #tptools .tpt-vselect select:focus-visible { border-color: var(--tpt-mint); outline: none; box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); } #tptools .tpt-vselect select option { background: #0c0e18; color: #fff; } #tptools .tpt-vselect select option:checked { background: #0c0e18; color: var(--tpt-mint); } #tptools .tpt-vselect > svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; transition: transform .15s; } #tptools .tpt-vselect.is-open > svg { transform: translateY(-50%) rotate(180deg); } /* after vselect.js: the select stays in the form, visually hidden and in sync */ #tptools .tpt-vselect.is-dd > select { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); } #tptools .tpt-vdd { position: relative; } #tptools .tpt-vdd__btn { display: flex; align-items: center; height: 56px; padding: 0 44px 0 18px; border-radius: 12px; background: #080911; border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 16px; font-weight: 500; line-height: 24px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; transition: border-color .15s; } #tptools .tpt-vdd__btn:hover { border-color: rgba(255, 255, 255, 0.24); } #tptools .tpt-vdd__btn:focus-visible, #tptools .tpt-vdd__btn[aria-expanded="true"] { border-color: var(--tpt-mint); box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); } #tptools .tpt-vdd__val { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #tptools .tpt-vdd__list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow: auto; padding: 6px; border-radius: 12px; background: #0c0e18; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); outline: none; overscroll-behavior: contain; } #tptools .tpt-vdd__list[hidden] { display: none; } #tptools .tpt-vdd__title { display: none; } #tptools .tpt-vdd__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 12px; border-radius: 8px; color: #fff; font-size: 15px; font-weight: 500; line-height: 22px; cursor: pointer; -webkit-tap-highlight-color: transparent; } #tptools .tpt-vdd__opt span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #tptools .tpt-vdd__opt svg { flex: none; visibility: hidden; } #tptools .tpt-vdd__opt[aria-selected="true"] { color: var(--tpt-mint); } #tptools .tpt-vdd__opt[aria-selected="true"] svg { visibility: visible; } #tptools .tpt-vdd__opt.is-active { background: rgba(3, 247, 181, 0.12); color: #fff; } #tptools .tpt-vdd__opt.is-active[aria-selected="true"] svg { color: var(--tpt-mint); } #tptools .tpt-vdd-scrim { display: none; } #tptools .tpt-vsearch__go { flex: none; height: 56px; gap: 8px; padding: 0 28px; font-size: 16px; } #tptools .tpt-vsearch__line { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-vcitycards-sec { padding-top: 72px; } #tptools .tpt-vcitycards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } #tptools .tpt-vcitycard { position: relative; height: 260px; overflow: hidden; border-radius: 20px; border: 1px solid var(--tpt-line); } #tptools .tpt-vcitycard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } #tptools .tpt-vcitycard:hover .tpt-vcitycard__img { transform: scale(1.03); } #tptools .tpt-vcitycard::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 5, 14, 0) 35%, rgba(4, 5, 14, 0.92) 100%); } #tptools .tpt-vcitycard__text { position: absolute; z-index: 2; left: 21px; right: 80px; bottom: 24px; display: flex; flex-direction: column; gap: 4px; } #tptools .tpt-vcitycard__h { font-size: 26px; font-weight: 600; line-height: 32px; color: #fff; } #tptools .tpt-vcitycard__h a { color: #fff; } #tptools .tpt-vcitycard__p { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.8); } #tptools .tpt-vcitycard__p svg { margin-top: 3px; } #tptools .tpt-vcitycard__arrow { position: absolute; z-index: 2; right: 22px; bottom: 22px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tpt-mint); color: #04050e; pointer-events: none; } #tptools .tpt-vcitycard__h a::after { z-index: 3; } #tptools .tpt-vtypes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; } #tptools .tpt-vtype { position: relative; overflow: hidden; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-vtype:hover { border-color: rgba(255, 255, 255, 0.2); } #tptools .tpt-vtype__img { width: 100%; height: 170px; object-fit: cover; } #tptools .tpt-vtype__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 18px; color: #fff; font-size: 17px; font-weight: 600; line-height: 24px; } #tptools .tpt-vtype__link svg { width: 18px; height: 18px; } #tptools .tpt-vtype__link::after { content: ""; position: absolute; inset: 0; } #tptools .tpt-vsec { padding-top: 96px; } #tptools .tpt-vsec > .tpt-wrap > .tpt-marker { margin-bottom: 28px; } #tptools .tpt-vsec > .tpt-wrap > .tpt-vh2 { margin-bottom: 28px; letter-spacing: -0.5px; } #tptools .tpt-vsec .tpt-vlinks__list a { align-items: flex-start; justify-content: space-between; width: 100%; } #tptools .tpt-vhow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } #tptools .tpt-vhow li { display: flex; flex-direction: column; gap: 14px; min-height: 282px; padding: 28px; border-radius: 20px; background: #0a0c16; border: 1px solid var(--tpt-line); } #tptools .tpt-vhow__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(3, 247, 181, 0.1); } #tptools .tpt-vhow p strong { display: block; font-size: 18px; font-weight: 600; line-height: 26px; color: #fff; } #tptools .tpt-vhow p span { display: block; margin-top: 14px; font-size: 15px; line-height: 25px; color: var(--tpt-soft); } #tptools.tpt--vd-home .tpt-vcta { padding-top: 96px; } /* listing-request form */ #tptools .tpt-vreq-sec { padding: 32px 0 120px; } #tptools .tpt-vreq { width: min(720px, calc(100% - 48px)); margin-inline: auto; } #tptools .tpt-vreq__h1 { margin-top: 28px; font-size: 44px; line-height: 54px; letter-spacing: -0.8px; } #tptools .tpt-vreq__intro { margin-top: 12px; font-size: 17px; line-height: 28px; color: var(--tpt-soft); } #tptools .tpt-vform, #tptools .tpt-vreq__done { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; padding: 36px; border-radius: 24px; background: #0a0c16; border: 1px solid var(--tpt-line); } #tptools .tpt-vform[hidden], #tptools .tpt-vreq__done[hidden] { display: none; } #tptools .tpt-vform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } #tptools .tpt-vfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; } #tptools .tpt-vfield[hidden] { display: none; } #tptools .tpt-vfield--radios { gap: 10px; } #tptools .tpt-vfield__label { padding: 0; font-size: 14px; font-weight: 500; line-height: 21px; color: #fff; } #tptools .tpt-vfield--radios .tpt-vfield__label { margin-bottom: 0; } #tptools .tpt-vreq__star { color: var(--tpt-soft); } #tptools .tpt-vradio { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 15px; font-weight: 500; line-height: 22px; cursor: pointer; } #tptools .tpt-vradio input { position: absolute; opacity: 0; width: 1px; height: 1px; } #tptools .tpt-vradio__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.3); } #tptools .tpt-vradio:has(input:checked) { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.24); } #tptools .tpt-vradio input:checked + .tpt-vradio__dot { border: 6px solid var(--tpt-mint); } #tptools .tpt-vradio input:focus-visible + .tpt-vradio__dot { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } #tptools .tpt-vinput { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 15.5px; font-weight: 500; line-height: 24px; } #tptools .tpt-vinput::placeholder { color: var(--tpt-muted); font-weight: 400; opacity: 1; } #tptools .tpt-vinput:focus { outline: none; border-color: var(--tpt-mint); box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); } #tptools .tpt-vinput--area { height: 112px; padding: 14px 16px; resize: vertical; } #tptools .tpt-vselect--form select, #tptools .tpt-vselect--form .tpt-vdd__btn { height: 52px; padding: 0 44px 0 16px; font-size: 15.5px; } #tptools .tpt-vfield.is-error .tpt-vdd__btn { border: 1.5px solid #ff6b81; } #tptools .tpt-vfield.is-error .tpt-vinput, #tptools .tpt-vfield.is-error .tpt-vcheck__box { border: 1.5px solid #ff6b81; } #tptools .tpt-vfield__help { font-size: 13px; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-vfield__err { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 20px; color: #ff6b81; } #tptools .tpt-vfield__err[hidden] { display: none; } #tptools .tpt-vform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #tptools .tpt-vfield--role { width: 316px; max-width: 100%; } #tptools .tpt-vcheck { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 22px; color: #fff; cursor: pointer; } #tptools .tpt-vcheck input { position: absolute; opacity: 0; width: 1px; height: 1px; } #tptools .tpt-vcheck__box { position: relative; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--tpt-surface); border: 1.5px solid rgba(255, 255, 255, 0.3); } #tptools .tpt-vcheck input:checked + .tpt-vcheck__box { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools .tpt-vcheck input:checked + .tpt-vcheck__box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #04050e; border-width: 0 2px 2px 0; transform: rotate(45deg); } #tptools .tpt-vcheck input:focus-visible + .tpt-vcheck__box { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } #tptools .tpt-vform__fail { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 107, 129, 0.08); border: 1px solid rgba(255, 107, 129, 0.4); color: #fff; font-size: 14px; font-weight: 500; line-height: 21px; } #tptools .tpt-vform__fail[hidden] { display: none; } #tptools .tpt-vform__fail a { color: #fff; text-decoration: underline; } #tptools .tpt-vform__send { align-self: flex-start; height: 54px; padding: 0 32px; font-size: 16px; } #tptools .tpt-vform__send:disabled { opacity: .6; cursor: progress; } #tptools .tpt-vform__small { margin-top: -8px; font-size: 13px; line-height: 21px; color: var(--tpt-soft); } #tptools .tpt-vreq__done { gap: 16px; padding: 48px; } #tptools .tpt-vreq__done:focus { outline: none; } #tptools .tpt-vreq__check { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(3, 247, 181, 0.12); } #tptools .tpt-vreq__done-h { font-size: 30px; font-weight: 600; line-height: 38px; color: #fff; } #tptools .tpt-vreq__done-p { font-size: 16px; line-height: 26px; color: var(--tpt-soft); } #tptools .tpt-vreq__back { display: inline-flex; align-items: center; gap: 8px; padding-top: 8px; color: var(--tpt-mint); font-size: 15px; font-weight: 600; } /* hub block (/tools/, Weddings panel, between the tool grid and the gallery CTA) */ #tptools .tpt-vhub { padding: 0 0 80px; } #tptools .tpt-vhub__card { display: flex; align-items: flex-start; gap: 40px; padding: 40px 40px 40px 44px; border-radius: 24px; background: #0a0c16; border: 1px solid var(--tpt-line); } #tptools .tpt-vhub__copy { display: flex; flex: 1 1 0; flex-direction: column; gap: 16px; min-width: 0; } #tptools .tpt-vhub__h { font-size: 32px; font-weight: 600; line-height: 40px; letter-spacing: -0.4px; color: #fff; } #tptools .tpt-vhub__line { font-size: 16px; line-height: 26px; color: var(--tpt-soft); } #tptools .tpt-vhub__chips { display: flex; flex-wrap: wrap; gap: 8px; } #tptools .tpt-vhub__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 14px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 14px; font-weight: 500; line-height: 21px; } #tptools .tpt-vhub__chip svg { color: var(--tpt-soft); } #tptools .tpt-vhub__chip:hover { border-color: rgba(255, 255, 255, 0.3); background: var(--tpt-surface); color: #fff; } #tptools .tpt-vhub__chip[aria-checked="true"], #tptools .tpt-vhub__chip[aria-checked="true"]:hover { background: var(--tpt-mint); border-color: var(--tpt-mint); color: #04050e; } #tptools .tpt-vhub__chip[aria-checked="true"] svg { color: #04050e; } #tptools .tpt-vhub__row { display: flex; align-items: flex-end; gap: 12px; } #tptools .tpt-vhub__field { display: flex; flex-direction: column; gap: 8px; width: 260px; } #tptools .tpt-vhub__field select, #tptools .tpt-vhub__field .tpt-vdd__btn { height: 52px; } #tptools .tpt-vhub__go { gap: 8px; } #tptools .tpt-vhub__small { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-vhub__mosaic { display: grid; flex: none; grid-template-columns: 176px 176px; gap: 12px; } #tptools .tpt-vhub__photo { width: 176px; height: 128px; border-radius: 16px; object-fit: cover; } /* tablets */ @media (min-width: 768px) and (max-width: 1199px) { #tptools .tpt-vgrid, #tptools .tpt-vtiles, #tptools .tpt-vtypes { grid-template-columns: repeat(3, minmax(0, 1fr)); } #tptools .tpt-vgrid--list { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-vgrid--list .tpt-vcard { grid-template-columns: 240px minmax(0, 1fr) 200px; } #tptools.tpt--vd .tpt-editorial__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } #tptools .tpt-vhub__mosaic { grid-template-columns: 140px 140px; } #tptools .tpt-vhub__photo { width: 140px; height: 104px; } } @media (min-width: 768px) and (max-width: 979px) { #tptools .tpt-vgrid, #tptools .tpt-vtiles, #tptools .tpt-vtypes, #tptools .tpt-vcitycards, #tptools .tpt-vhow, #tptools .tpt-vlinks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools .tpt-vgrid--list { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-vsearch { flex-wrap: wrap; } #tptools .tpt-vsearch__field--where { flex: 1 1 0; } #tptools .tpt-vhub__mosaic { display: none; } } /* phones */ @media (max-width: 767px) { #tptools.tpt--vd .tpt-crumbs li:first-child { display: none; } #tptools .tpt-vhero { padding: 16px 0 20px; } #tptools .tpt-vhero__h1 { margin-top: 20px; font-size: 34px; line-height: 42px; letter-spacing: -0.8px; } #tptools .tpt-vhero__intro { margin-top: 14px; font-size: 16px; line-height: 26px; } #tptools .tpt-vcount-row { margin-top: 18px; gap: 10px; } #tptools .tpt-vcount { max-width: 100%; margin-top: 18px; padding: 7px 12px 7px 12px; gap: 8px; font-size: 13px; white-space: nowrap; letter-spacing: -0.1px; } #tptools .tpt-vbar .tpt-wrap { padding-bottom: 20px; border-bottom: 0; } #tptools .tpt-vcities { gap: 8px; } #tptools .tpt-vchip { padding: 8px 16px; } #tptools .tpt-vbar__row { gap: 10px; margin-top: 12px; } #tptools .tpt-vfilters { flex: 1 1 0; flex-wrap: nowrap; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #tptools .tpt-vfilters::-webkit-scrollbar { display: none; } #tptools .tpt-vfilter { flex: none; position: static; } #tptools .tpt-vfilter__btn { gap: 6px; padding: 9px 12px 9px 14px; white-space: nowrap; } #tptools .tpt-vclear { flex: none; white-space: nowrap; } /* phones: each filter opens as a sheet from the bottom of the screen */ #tptools .tpt-vfilter__panel { position: fixed; z-index: 99999; left: 0; right: 0; bottom: 0; top: auto; min-width: 0; max-width: none; max-height: 70vh; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.7); } #tptools .tpt-vopt { padding: 12px 10px; font-size: 15px; } #tptools .tpt-vscrim:not([hidden]) { display: block; position: fixed; z-index: 99998; inset: 0; background: rgba(4, 5, 14, 0.6); } #tptools .tpt-vview { padding: 3px; } #tptools .tpt-vview__btn { padding: 8px 10px; } #tptools .tpt-vview__btn span { display: none; } #tptools .tpt-vview__btn svg { width: 18px; height: 18px; } #tptools .tpt-vresults { padding-top: 0; } #tptools .tpt-vgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; } #tptools .tpt-vcard__body { padding: 18px 20px 0; } #tptools .tpt-vcard__name { font-size: 18px; } #tptools .tpt-vcard__actions { padding: 14px 20px 14px; } #tptools .tpt-vbtn { height: 38px; } /* phone List view: square image left of the name/area/services/price, then the line and buttons full width */ #tptools .tpt-vgrid--list { gap: 12px; } #tptools .tpt-vgrid--list .tpt-vcard { display: block; padding: 14px; border-radius: 18px; } #tptools .tpt-vgrid--list .tpt-vcard__main::after { border-radius: 18px; } #tptools .tpt-vgrid--list .tpt-vcard__media { float: left; width: 104px; height: 104px; margin-right: 14px; aspect-ratio: auto; border-radius: 12px; } #tptools .tpt-vgrid--list .tpt-vcard__ill { width: 96px; height: 96px; } #tptools .tpt-vgrid--list .tpt-vcard__tag { top: auto; right: auto; left: 6px; bottom: 6px; padding: 4px 7px 4px 6px; } #tptools .tpt-vgrid--list .tpt-vcard__body { display: block; padding: 0; } #tptools .tpt-vgrid--list .tpt-vcard__body > * { margin-bottom: 3px; height: 18px; font-size: 12.5px; line-height: 18px; } #tptools .tpt-vgrid--list .tpt-vcard__body > .tpt-vcard__name { height: 44px; font-size: 15.5px; line-height: 22px; } #tptools .tpt-vgrid--list .tpt-vcard__body > .tpt-vcard__price, #tptools .tpt-vgrid--list .tpt-vcard__body > .tpt-vcard__nop { height: 20px; font-size: 14px; line-height: 20px; } #tptools .tpt-vgrid--list .tpt-vcard__area { display: flex; } #tptools .tpt-vgrid--list .tpt-vcard__body > .tpt-vcard__line { clear: both; height: 40px; margin: 12px 0 0; font-size: 13px; line-height: 20px; } #tptools .tpt-vgrid--list .tpt-vcard__actions { clear: both; gap: 8px; margin-top: 12px; padding: 0; } #tptools .tpt-vgrid--list .tpt-vbtn { height: 34px; } #tptools .tpt-vempty { padding: 48px 20px; } #tptools .tpt-vempty__ic { width: 88px; height: 88px; } #tptools .tpt-vempty__h { font-size: 22px; line-height: 30px; } #tptools .tpt-vempty__p { font-size: 15px; line-height: 24px; } #tptools .tpt-vmore { margin-top: 28px; } #tptools .tpt-vguide { padding-top: 64px; } #tptools .tpt-vh2 { font-size: 26px; line-height: 34px; letter-spacing: -0.3px; } #tptools .tpt-vguide__text .tpt-vh2 + * { margin-top: 16px; } #tptools .tpt-vguide__text .tpt-vh2:not(:first-of-type) { margin-top: 36px; } #tptools .tpt-vguide__text p, #tptools .tpt-vguide__text li { font-size: 16px; line-height: 27px; } #tptools .tpt-vguide__text li::before { top: 11px; } #tptools .tpt-vcta { padding-top: 64px; } #tptools .tpt-vnote-sec { padding-top: 56px; } #tptools .tpt-vnote-sec--foot { padding: 48px 0 64px; } #tptools .tpt-vnote { align-items: flex-start; padding: 16px; } #tptools .tpt-vnote p { font-size: 14px; line-height: 22px; } #tptools .tpt-vsec--faq { padding-top: 56px; } #tptools.tpt--vd .tpt-editorial__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } #tptools.tpt--vd .tpt-h2--editorial { font-size: 26px; line-height: 34px; } #tptools .tpt-vlinks { padding: 56px 0 64px; } #tptools .tpt-vlinks__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } #tptools .tpt-vbox { padding: 20px; } #tptools .tpt-vtiles { grid-template-columns: minmax(0, 1fr); gap: 16px; } #tptools .tpt-vtile { min-height: 0; } #tptools .tpt-vtile__photo { height: 190px; } #tptools .tpt-vtile__link { padding-top: 8px; } #tptools .tpt-vother { padding-top: 40px; } #tptools .tpt-vother__row, #tptools .tpt-vother .tpt-vlinks__list { flex-direction: column; align-items: flex-start; gap: 12px; } #tptools .tpt-vsearch-sec { padding-top: 24px; } #tptools .tpt-vsearch { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; border-radius: 20px; } #tptools .tpt-vsearch__field--where { flex: none; } #tptools .tpt-vselect select, #tptools .tpt-vdd__btn { height: 52px; } /* phones: the list opens as a bottom sheet over a dimmed page, like the directory filters */ #tptools .tpt-vdd__list { position: fixed; z-index: 99999; left: 0; right: 0; bottom: 0; top: auto; max-height: 70vh; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; border-width: 1px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.7); } #tptools .tpt-vdd__title { display: block; padding: 2px 12px 10px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-vdd-scrim:not([hidden]) { display: block; position: fixed; z-index: 99998; inset: 0; background: rgba(4, 5, 14, 0.6); } #tptools .tpt-vsearch__go { height: 52px; width: 100%; } #tptools .tpt-vcitycards-sec { padding-top: 40px; } #tptools .tpt-vcitycards { grid-template-columns: minmax(0, 1fr); gap: 14px; } #tptools .tpt-vcitycard { height: 190px; } #tptools .tpt-vcitycard__h { font-size: 22px; line-height: 28px; } #tptools .tpt-vcitycard__text { bottom: 18px; left: 18px; right: 70px; } #tptools .tpt-vcitycard__arrow { right: 18px; bottom: 18px; } #tptools .tpt-vtypes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } #tptools .tpt-vtype { border-radius: 16px; } #tptools .tpt-vtype__img { height: 110px; } #tptools .tpt-vtype__link { padding: 12px 14px 14px; font-size: 14.5px; line-height: 20px; } #tptools .tpt-vtype__link svg { width: 15px; height: 15px; } #tptools .tpt-vsec { padding-top: 56px; } #tptools .tpt-vsec > .tpt-wrap > .tpt-marker { margin-bottom: 16px; } #tptools .tpt-vsec > .tpt-wrap > .tpt-vh2 { margin-bottom: 20px; } #tptools .tpt-vhow { grid-template-columns: minmax(0, 1fr); gap: 14px; } #tptools .tpt-vhow li { min-height: 0; padding: 22px; } #tptools .tpt-vreq-sec { padding: 16px 0 64px; } #tptools .tpt-vreq { width: calc(100% - 40px); } #tptools .tpt-vreq__h1 { margin-top: 20px; font-size: 32px; line-height: 40px; } #tptools .tpt-vreq__intro { font-size: 16px; line-height: 26px; } #tptools .tpt-vform { gap: 20px; margin-top: 24px; padding: 20px; border-radius: 20px; } #tptools .tpt-vform__row { grid-template-columns: minmax(0, 1fr); gap: 20px; } #tptools .tpt-vfield--role { width: 100%; } #tptools .tpt-vform__send { align-self: stretch; } #tptools .tpt-vreq__done { margin-top: 24px; padding: 28px 22px; } #tptools .tpt-vreq__done-h { font-size: 24px; line-height: 32px; } #tptools .tpt-vhub { padding: 40px 0 56px; } #tptools .tpt-vhub__card { padding: 24px 20px; } #tptools .tpt-vhub__copy { gap: 14px; } #tptools .tpt-vhub__h { font-size: 24px; line-height: 32px; } #tptools .tpt-vhub__line { font-size: 15px; line-height: 24px; } #tptools .tpt-vhub__chip { padding: 8px 14px 8px 12px; } #tptools .tpt-vhub__row { flex-direction: column; align-items: stretch; } #tptools .tpt-vhub__field { width: 100%; } #tptools .tpt-vhub__go { width: 100%; } #tptools .tpt-vhub__small { align-items: flex-start; font-size: 12.5px; } #tptools .tpt-vhub__small .tpt-vdot { margin-top: 6px; } #tptools .tpt-vhub__mosaic { display: none; } } @media (prefers-reduced-motion: reduce) { #tptools .tpt-vcitycard__img, #tptools .tpt-vlinks__list a svg, #tptools .tpt-vfilter__btn svg { transition: none; } } /* ============================================================ v0.9.0 vendor directory v2, "event vibe" * Figma VsewmJ3gucwNrnvEuLNwCI section 4030:3545 (page 4004:58): photographers 4037:4299 / 4037:4544, venues 4038:5673 / 4038:5748, * venue type 4039:6804 / 4039:6879, destination 4041:7935 / 4041:8010, home 4042:9066 / 4042:9370, city 4042:11345 / 4042:11521. * Components: hero backdrop 4034:3890, nav panel 4035:4483, photo tile 4034:3891, mandala 4033:3673, toran 4033:3717, * gold hairline 4033:3718, warm glow 4033:3719, bokeh 4033:3722. Gold #F5B54A, marigold #E8833A; mint only for buttons, * links and active chips. Decor is CSS + 3 small SVG files (assets/img/vd2/), all aria-hidden. */ #tptools.tpt--vd2 { --tpt-gold: #f5b54a; --tpt-marigold: #e8833a; --tpt-goldline: rgba(245, 181, 74, 0.16); overflow-x: clip; } #tptools.tpt--vd2 > section, #tptools.tpt--vd2 > div > section { position: relative; } #tptools.tpt--vd2 .tpt-vguide, #tptools.tpt--vd2 .tpt-vsec, #tptools.tpt--vd2 .tpt-vsec--faq { overflow: clip; } /* the hero is not clipped (the home search dropdown opens over the next section); its backdrop clips itself */ /* photo-led hero */ #tptools .tpt-vhero--photo { position: relative; padding: 32px 0 56px; background: #04050e; } #tptools .tpt-vhero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #tptools .tpt-vhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* the whole backdrop (photo, shade, glows) melts into the page: soft top under the header, long fade at the bottom */ #tptools .tpt-vhero__bg { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 68%, transparent 100%); } /* wide screens: the sides melt too, so no corner is ever visible */ @media (min-width: 1280px) { #tptools .tpt-vhero__bg { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 68%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 68%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-composite: intersect; } } #tptools .tpt-vhero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 5, 14, 0.36) 0%, rgba(4, 5, 14, 0.08) 40%, rgba(4, 5, 14, 0.4) 85%), linear-gradient(90deg, rgba(4, 5, 14, 0.82) 0%, rgba(4, 5, 14, 0.62) 40%, rgba(4, 5, 14, 0.18) 72%, rgba(4, 5, 14, 0) 100%); } /* warm gold + marigold glows, fairy-light bokeh, mandala at 5% */ #tptools .tpt-vhero__fx { position: absolute; inset: 0; z-index: 2; background: radial-gradient(500px 260px at 22% 105%, rgba(245, 181, 74, 0.2), rgba(245, 181, 74, 0) 70%), radial-gradient(380px 210px at 92% -10%, rgba(232, 131, 58, 0.18), rgba(232, 131, 58, 0) 70%), url("../img/vd2/bokeh.svg") top center / 1440px 360px no-repeat; } #tptools .tpt-vhero__fx::after { content: ""; position: absolute; top: 50%; right: -212px; width: 760px; height: 760px; transform: translateY(-50%); opacity: 0.05; background: url("../img/vd2/mandala.svg") center / contain no-repeat; } #tptools .tpt-vhero__in { position: relative; } /* no z-index: the phone dropdown sheet must stack with its scrim */ #tptools.tpt--vd2 .tpt-vhero__h1 { margin-top: 150px; font-size: 52px; line-height: 62px; letter-spacing: -1px; text-shadow: 0 2px 24px rgba(4, 5, 14, 0.7), 0 1px 3px rgba(4, 5, 14, 0.6); } #tptools.tpt--vd2 .tpt-vhero__intro { color: #dcdde2; text-shadow: 0 1px 12px rgba(4, 5, 14, 0.9), 0 0 2px rgba(4, 5, 14, 0.8); } #tptools.tpt--vd2 .tpt-vhero .tpt-crumbs { text-shadow: 0 1px 8px rgba(4, 5, 14, 0.9); } #tptools.tpt--vd-home .tpt-vhero__h1, #tptools.tpt--vd-city .tpt-vhero__h1, #tptools.tpt--vd-dests .tpt-vhero__h1 { margin-top: 96px; } #tptools.tpt--vd2.tpt--vd-home .tpt-vhero, #tptools.tpt--vd2.tpt--vd-city .tpt-vhero { padding-bottom: 56px; } #tptools.tpt--vd2 .tpt-vcount { background: rgba(4, 5, 14, 0.45); border-color: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } #tptools.tpt--vd-home .tpt-vsearch { position: relative; z-index: 6; margin-top: 28px; background: rgba(10, 12, 22, 0.82); border-color: rgba(245, 181, 74, 0.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #tptools.tpt--vd-home .tpt-vsearch__line { position: relative; } #tptools .tpt-vsoon { color: var(--tpt-gold); font-weight: 600; } #tptools .tpt-vsoon__back { margin-top: 12px; } #tptools .tpt-vsoon__back a { color: var(--tpt-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* toran under main section H2s, gold hairlines between sections, warm glows behind H2s */ #tptools .tpt-toran { display: block; width: 240px; height: 22px; margin-top: 14px; background: url("../img/vd2/toran.svg") left center / 240px 22px no-repeat; } #tptools.tpt--vd2 .tpt-vguide__text .tpt-toran { margin-bottom: 6px; } #tptools.tpt--vd2 .tpt-vguide__text .tpt-toran + * { margin-top: 20px; } #tptools.tpt--vd2 .tpt-vguide, #tptools.tpt--vd2 .tpt-vcta, #tptools.tpt--vd2 .tpt-vnote-sec, #tptools.tpt--vd2 .tpt-vsec--faq, #tptools.tpt--vd2 .tpt-vlinks, #tptools.tpt--vd2 .tpt-vsec { position: relative; } #tptools.tpt--vd2 .tpt-vguide::before, #tptools.tpt--vd2 .tpt-vcta::before, #tptools.tpt--vd2 .tpt-vnote-sec::before, #tptools.tpt--vd2 .tpt-vsec--faq::before, #tptools.tpt--vd2 .tpt-vlinks::before, #tptools.tpt--vd2 .tpt-vsec::before { content: ""; position: absolute; z-index: 1; top: 0; left: 50%; width: min(1200px, calc(100% - 48px)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(245, 181, 74, 0) 0%, rgba(245, 181, 74, 0.32) 18%, rgba(245, 181, 74, 0.32) 82%, rgba(245, 181, 74, 0) 100%); } #tptools.tpt--vd2 .tpt-vsec--faq::before { display: block; } #tptools.tpt--vd2 .tpt-vnote-sec + .tpt-vsec--faq::before { display: none; } #tptools .tpt-vglow { position: absolute; z-index: 0; left: max(-80px, calc(50% - 800px)); top: 40px; width: 820px; max-width: 100%; height: 360px; pointer-events: none; background: radial-gradient(closest-side, rgba(245, 181, 74, 0.13), rgba(245, 181, 74, 0)), radial-gradient(50% 40% at 62% 42%, rgba(232, 131, 58, 0.1), rgba(232, 131, 58, 0)); } #tptools.tpt--vd2 .tpt-vguide > .tpt-wrap, #tptools.tpt--vd2 .tpt-vsec > .tpt-wrap, #tptools.tpt--vd2 .tpt-vsec--faq > .tpt-wrap { position: relative; z-index: 1; } #tptools.tpt--vd2 .tpt-vguide__text li::before { background: var(--tpt-gold); } #tptools.tpt--vd2 .tpt-vguide--about { padding-top: 96px; } #tptools.tpt--vd2 .tpt-vsec > .tpt-wrap > .tpt-toran { margin-bottom: 28px; } #tptools.tpt--vd2 .tpt-vsec > .tpt-wrap > .tpt-vh2 { margin-bottom: 0; } #tptools.tpt--vd2 .tpt-vtiles-sec .tpt-toran { margin-bottom: 28px; } #tptools.tpt--vd2 .tpt-vtiles__h { margin: 0; } #tptools.tpt--vd2 .tpt-vtiles-sec { padding-top: 88px; } /* cards: mint hover glow (0.9.2), gold hairline (0.8.3 equal heights untouched) */ #tptools.tpt--vd2 .tpt-vcard { transition: border-color .2s, box-shadow .2s; } #tptools.tpt--vd2 .tpt-vcard:hover { border-color: rgba(3, 247, 181, 0.55); box-shadow: 0 0 0 1px rgba(3, 247, 181, 0.18), 0 18px 48px -14px rgba(3, 247, 181, 0.28), 0 0 60px -20px rgba(3, 247, 181, 0.35); } #tptools.tpt--vd2 .tpt-vtile:hover, #tptools.tpt--vd2 .tpt-vtype:hover, #tptools.tpt--vd2 .tpt-vcitycard:hover { border-color: rgba(3, 247, 181, 0.5); box-shadow: 0 18px 48px -16px rgba(3, 247, 181, 0.28); } #tptools.tpt--vd2 .tpt-vbar .tpt-wrap { border-bottom-color: var(--tpt-goldline); } #tptools.tpt--vd2 .tpt-vbar { padding-top: 0; } /* venue-type chips (radio group on venues pages, links on venue-type pages) */ #tptools .tpt-vkinds { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } #tptools .tpt-vkinds__label { flex-basis: 100%; font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tpt-gold); } #tptools .tpt-vkchip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 14px; font-weight: 500; line-height: 21px; cursor: pointer; } #tptools .tpt-vkchip:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; } #tptools .tpt-vkchip__n { color: var(--tpt-muted); font-weight: 400; } #tptools .tpt-vkchip.is-on, #tptools .tpt-vkchip[aria-checked="true"] { border-color: rgba(3, 247, 181, 0.6); background: rgba(3, 247, 181, 0.08); color: var(--tpt-mint); } #tptools .tpt-vkchip.is-on .tpt-vkchip__n { color: rgba(3, 247, 181, 0.7); } #tptools .tpt-vkinds + .tpt-vbar__row { margin-top: 16px; } /* nav panel */ #tptools .tpt-vnav-sec { padding-top: 16px; } #tptools .tpt-vnav { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 36px 40px 40px; border-radius: 24px; background: #0a0c16; border: 1px solid rgba(245, 181, 74, 0.14); } #tptools .tpt-vnav::before { content: ""; position: absolute; left: -221px; top: -201px; width: 900px; height: 420px; pointer-events: none; background: radial-gradient(closest-side, rgba(245, 181, 74, 0.16), rgba(245, 181, 74, 0)); } #tptools .tpt-vnav::after { content: ""; position: absolute; right: -360px; top: -197px; width: 560px; height: 560px; opacity: 0.05; pointer-events: none; background: url("../img/vd2/mandala.svg") center / contain no-repeat; } #tptools .tpt-vnav > * { position: relative; z-index: 1; } #tptools .tpt-vnav__h { font-size: 26px; font-weight: 600; line-height: 1.25; color: #fff; } #tptools .tpt-vnav__cols { display: grid; grid-template-columns: 290px 250px minmax(0, 1fr); gap: 48px; margin-top: 28px; } #tptools .tpt-vnav__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } #tptools .tpt-vnav__label { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 1.44px; text-transform: uppercase; color: var(--tpt-gold); } #tptools .tpt-vnav__list { display: flex; flex-direction: column; gap: 2px; } #tptools .tpt-vnav__row { display: flex; align-items: center; gap: 12px; padding: 6px 4px 6px 0; border-radius: 10px; color: rgba(255, 255, 255, 0.92); font-size: 14px; font-weight: 500; line-height: 1.4; } #tptools a.tpt-vnav__row:hover { color: #fff; } #tptools a.tpt-vnav__row:hover svg { stroke: var(--tpt-gold); } #tptools .tpt-vnav__row.is-on { color: var(--tpt-mint); } #tptools .tpt-vnav__row.is-off { color: var(--tpt-muted); } #tptools .tpt-vnav__row svg { flex: none; } #tptools .tpt-vnav__txt { flex: 1 1 0; min-width: 0; } #tptools .tpt-vnav__thumb { flex: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(245, 181, 74, 0.18); object-fit: cover; } #tptools .tpt-vnav__dests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #tptools .tpt-vnav__all { align-self: flex-start; color: var(--tpt-mint); font-size: 14px; font-weight: 600; line-height: 20px; } #tptools .tpt-vnav__all:hover { color: #5ffbd0; } /* photo tile (cities, destinations) */ #tptools .tpt-vptile { position: relative; height: 170px; overflow: hidden; border-radius: 16px; background: #0a0c16; border: 1px solid rgba(245, 181, 74, 0.16); transition: border-color .2s, box-shadow .2s; } #tptools .tpt-vptile:hover { border-color: rgba(3, 247, 181, 0.5); box-shadow: 0 16px 40px -16px rgba(3, 247, 181, 0.3); } #tptools .tpt-vptile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } #tptools .tpt-vptile:hover .tpt-vptile__img { transform: scale(1.04); } #tptools .tpt-vptile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 5, 14, 0.05) 0%, rgba(4, 5, 14, 0.25) 45%, rgba(4, 5, 14, 0.92) 100%); } #tptools .tpt-vptile__link, #tptools .tpt-vptile__text { position: absolute; z-index: 2; left: 17px; right: 17px; bottom: 15px; display: flex; flex-direction: column; gap: 2px; color: #fff; } /* the whole tile is the link: the pseudo is clipped by the tile (overflow hidden) */ #tptools .tpt-vptile__link::before { content: ""; position: absolute; inset: -600px; } #tptools .tpt-vptile__name { font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; } #tptools .tpt-vptile__sub { font-size: 13px; line-height: 1.4; color: #cecfd1; } #tptools .tpt-vptile__arrow { position: absolute; z-index: 2; top: 13px; right: 13px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tpt-mint); color: #04050e; pointer-events: none; } #tptools .tpt-vptile__arrow svg { width: 14px; height: 14px; } /* destinations overview */ #tptools .tpt-vdests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } #tptools .tpt-vptile--big { height: 300px; border-radius: 20px; } #tptools .tpt-vptile--big .tpt-vptile__text { left: 24px; right: 24px; bottom: 22px; gap: 6px; } #tptools .tpt-vptile--big .tpt-vptile__name { font-size: 26px; line-height: 32px; } #tptools .tpt-vptile--big .tpt-vptile__name .tpt-vptile__link { position: static; color: #fff; } #tptools .tpt-vptile--big .tpt-vptile__sub { font-size: 14.5px; line-height: 22px; } #tptools .tpt-vptile__more { margin-top: 6px; color: var(--tpt-mint); font-size: 14px; font-weight: 600; line-height: 20px; } #tptools .tpt-vptile__count { position: absolute; z-index: 2; left: 18px; top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(4, 5, 14, 0.8); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 12px; font-weight: 500; line-height: 18px; } #tptools .tpt-vptile--big .tpt-vptile__arrow { top: auto; bottom: 22px; right: 22px; width: 36px; height: 36px; } #tptools .tpt-vptile--big .tpt-vptile__arrow svg { width: 18px; height: 18px; } /* home: 7 city cards (landmarks), city page: tiles not live yet */ #tptools.tpt--vd2 .tpt-vcitycards { grid-template-columns: repeat(4, minmax(0, 1fr)); } #tptools.tpt--vd2 .tpt-vcitycard { height: 220px; border-color: rgba(245, 181, 74, 0.16); } #tptools.tpt--vd2 .tpt-vcitycard__h { font-size: 24px; line-height: 30px; } #tptools.tpt--vd2 .tpt-vcitycard__text { right: 64px; } #tptools.tpt--vd2 .tpt-vcitycards-sec { padding-top: 72px; } #tptools .tpt-vtile.is-soon .tpt-vtile__photo img { filter: grayscale(0.6) brightness(0.7); } #tptools .tpt-vtile__soon { margin-top: auto; padding-top: 12px; color: var(--tpt-gold); font-size: 14px; font-weight: 600; line-height: 20px; } @media (min-width: 768px) and (max-width: 1199px) { #tptools .tpt-vnav { padding: 32px; } #tptools .tpt-vnav__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; } #tptools .tpt-vnav__col--dest { grid-column: 1 / -1; } #tptools .tpt-vnav__dests { grid-template-columns: repeat(4, minmax(0, 1fr)); } #tptools.tpt--vd2 .tpt-vhero__h1 { font-size: 44px; line-height: 54px; } #tptools.tpt--vd2 .tpt-vcitycards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) and (max-width: 979px) { #tptools .tpt-vnav__dests { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools.tpt--vd2 .tpt-vcitycards { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools .tpt-vdests { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { #tptools .tpt-vhero--photo { padding: 16px 0 28px; } #tptools.tpt--vd2 .tpt-vhero__h1 { margin-top: 96px; font-size: 32px; line-height: 40px; letter-spacing: -0.6px; } #tptools.tpt--vd-home .tpt-vhero__h1, #tptools.tpt--vd-city .tpt-vhero__h1, #tptools.tpt--vd-dests .tpt-vhero__h1 { margin-top: 64px; } #tptools .tpt-vhero__fx { background-size: auto, auto, 900px 225px; } #tptools .tpt-vhero__fx::after { width: 420px; height: 420px; right: -160px; } #tptools .tpt-toran { width: 180px; background-size: 180px 16.5px; height: 17px; } #tptools.tpt--vd2 .tpt-vguide::before, #tptools.tpt--vd2 .tpt-vcta::before, #tptools.tpt--vd2 .tpt-vnote-sec::before, #tptools.tpt--vd2 .tpt-vsec--faq::before, #tptools.tpt--vd2 .tpt-vlinks::before, #tptools.tpt--vd2 .tpt-vsec::before { width: calc(100% - 40px); } #tptools .tpt-vglow { left: -120px; width: 480px; max-width: none; height: 260px; } #tptools.tpt--vd2 .tpt-vguide--about { padding-top: 56px; } #tptools.tpt--vd2 .tpt-vtiles-sec { padding-top: 48px; } #tptools .tpt-vkinds { gap: 8px; margin-top: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } #tptools .tpt-vkinds::-webkit-scrollbar { display: none; } #tptools .tpt-vkinds__label { display: none; } #tptools .tpt-vkchip { flex: none; padding: 8px 14px; font-size: 13.5px; white-space: nowrap; } #tptools .tpt-vcities { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #tptools .tpt-vcities::-webkit-scrollbar { display: none; } #tptools .tpt-vcities .tpt-vchip { flex: none; white-space: nowrap; } /* phones: the dropdown is a bottom sheet with a page scrim, so the search box must not make its own stacking context */ #tptools.tpt--vd-home .tpt-vsearch { z-index: auto; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 12, 22, 0.92); } #tptools .tpt-vnav-sec { padding-top: 8px; } #tptools .tpt-vnav { padding: 22px 20px; border-radius: 20px; } #tptools .tpt-vnav::after { width: 320px; height: 320px; right: -120px; top: -113px; } #tptools .tpt-vnav__h { font-size: 20px; } #tptools .tpt-vnav__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; } #tptools .tpt-vnav__col { gap: 12px; } #tptools .tpt-vnav__col--type .tpt-vnav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; } #tptools .tpt-vnav__col--type .tpt-vnav__row { gap: 8px; font-size: 13px; } #tptools .tpt-vnav__col--type .tpt-vnav__row svg { display: none; } #tptools .tpt-vnav__col--type .tpt-vnav__thumb { width: 32px; height: 32px; } #tptools .tpt-vnav__col--city .tpt-vnav__list { flex-direction: row; flex-wrap: wrap; gap: 8px; } #tptools .tpt-vnav__col--city .tpt-vnav__row { padding: 8px 14px; border-radius: 999px; background: #080911; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; } #tptools .tpt-vnav__col--city .tpt-vnav__row.is-on { border-color: var(--tpt-mint); } #tptools .tpt-vnav__col--city .tpt-vnav__thumb, #tptools .tpt-vnav__col--city .tpt-vnav__row svg { display: none; } #tptools .tpt-vnav__dests { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -20px; padding-right: 20px; } #tptools .tpt-vnav__dests::-webkit-scrollbar { display: none; } #tptools .tpt-vnav__dests .tpt-vptile { flex: none; width: 140px; height: 180px; scroll-snap-align: start; } #tptools .tpt-vnav__dests .tpt-vptile__sub { display: none; } #tptools .tpt-vdests { grid-template-columns: minmax(0, 1fr); gap: 14px; } #tptools .tpt-vptile--big { height: 220px; } #tptools .tpt-vptile--big .tpt-vptile__name { font-size: 22px; line-height: 28px; } #tptools.tpt--vd2 .tpt-vcitycards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #tptools.tpt--vd2 .tpt-vcitycard { height: 150px; border-radius: 16px; } #tptools.tpt--vd2 .tpt-vcitycard__h { font-size: 18px; line-height: 24px; } #tptools.tpt--vd2 .tpt-vcitycard__p { display: none; } #tptools.tpt--vd2 .tpt-vcitycard__text { left: 14px; right: 46px; bottom: 14px; } #tptools.tpt--vd2 .tpt-vcitycard__arrow { right: 12px; bottom: 12px; width: 28px; height: 28px; } #tptools.tpt--vd2 .tpt-vcitycard__arrow svg { width: 14px; height: 14px; } #tptools.tpt--vd2 .tpt-vcitycards-sec { padding-top: 40px; } } @media (prefers-reduced-motion: reduce) { #tptools .tpt-vptile__img, #tptools.tpt--vd2 .tpt-vcard { transition: none; } } /* ------------------------------------------------------------ v0.10.0: hashtag v2, couple name tool, "More free wedding tools" */ /* inline text links (pills helper, guide copy) */ #tptools .tpt-inline-link, #tptools .tpt-mtool__inline { color: var(--tpt-mint); text-decoration: underline; text-decoration-color: rgba(3, 247, 181, 0.45); text-underline-offset: 3px; } #tptools .tpt-inline-link:hover, #tptools .tpt-mtool__inline:hover { color: var(--tpt-mint); text-decoration-color: var(--tpt-mint); } /* hashtag v2: style chips helper, up to 12 couple-name pills, new guide sections */ #tptools [data-tpt-styles] + .tpt-small { margin-top: -2px; } #tptools.tpt--hashtag .tpt-pills { gap: 8px; } #tptools.tpt--hashtag .tpt-pills button { padding: 9px 18px; font-size: 18px; line-height: 27px; } #tptools .tpt-methods__more { margin-top: 24px; max-width: 860px; font-size: 16px; line-height: 26px; color: var(--tpt-soft); } #tptools .tpt-fnnotes { max-width: 860px; margin-top: 16px; } #tptools .tpt-fnnotes .tpt-h3 { margin: 24px 0 8px; font-size: 20px; line-height: 28px; } #tptools .tpt-fnnotes p { font-size: 15.5px; line-height: 25px; color: var(--tpt-soft); } #tptools .tpt-lead--note { color: rgba(255, 255, 255, 0.85); } #tptools .tpt-lead--note + .tpt-lead { margin-top: 10px; } #tptools .tpt-table--num tr > :first-child { width: 72px; color: var(--tpt-muted); font-weight: 500; } #tptools .tpt-table--num tr > :nth-child(2) { width: 480px; } /* "More free wedding tools" (hub-card style, no photos) */ #tptools .tpt-moretools__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; } #tptools .tpt-mtool { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); transition: border-color .15s; } #tptools .tpt-mtool:hover, #tptools .tpt-mtool:focus-within { border-color: rgba(3, 247, 181, 0.45); } #tptools .tpt-mtool__name { font-size: 20px; line-height: 27px; font-weight: 600; letter-spacing: -0.2px; color: #fff; padding-right: 28px; } #tptools .tpt-mtool__name a { color: inherit; } #tptools .tpt-mtool__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; } #tptools .tpt-mtool__name a:focus-visible { outline: none; } #tptools .tpt-mtool__name a:focus-visible::after { outline: 2px solid var(--tpt-mint); outline-offset: -2px; } #tptools .tpt-mtool__line { font-size: 15px; line-height: 24px; color: var(--tpt-soft); } #tptools .tpt-mtool__inline { position: relative; z-index: 2; } #tptools .tpt-mtool__arrow { position: absolute; top: 30px; right: 24px; color: var(--tpt-mint); } #tptools .tpt-moretools__all { margin-top: 28px; } /* couple name tool */ #tptools .tpt-field--switch { gap: 6px; } #tptools .tpt-field--switch .tpt-switch { font-size: 15px; font-weight: 500; } #tptools .tpt-field--switch .tpt-small { padding-left: 46px; } #tptools .tpt-cn { outline: none; } #tptools .tpt-cn__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; } #tptools .tpt-cn__bar .tpt-filters { margin: 0; flex-wrap: wrap; } #tptools .tpt-cn__sort { display: flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.1); } #tptools .tpt-cn__sortbtn { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-cn__sortbtn:hover { color: #fff; } #tptools .tpt-cn__sortbtn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: #fff; } #tptools .tpt-cn__note { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--tpt-line); font-size: 14px; line-height: 22px; color: var(--tpt-soft); } #tptools .tpt-cn__note--banner { background: rgba(3, 247, 181, 0.07); border-color: rgba(3, 247, 181, 0.3); color: rgba(255, 255, 255, 0.9); } #tptools .tpt-cn__note--banner a { color: var(--tpt-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-cn__note--banner svg { display: inline-block; color: var(--tpt-mint); vertical-align: -2px; } #tptools .tpt-cn__list--names, #tptools .tpt-cn__list--baby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #tptools .tpt-crow { min-height: 64px; padding: 10px 16px 10px 18px; } #tptools .tpt-crow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #tptools .tpt-crow__name { font-size: 18px; font-weight: 600; line-height: 27px; color: #fff; overflow-wrap: anywhere; } #tptools .tpt-crow__from { font-size: 13px; line-height: 19px; color: var(--tpt-muted); overflow-wrap: anywhere; } #tptools .tpt-crow__from b { font-weight: 600; } #tptools .tpt-from1 { color: var(--tpt-mint); } #tptools .tpt-from2 { color: #fff; } #tptools .tpt-crow .tpt-row__actions { gap: 12px; } #tptools .tpt-cgroup { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.015); border: 1px solid var(--tpt-line); } #tptools .tpt-cgroup__title { padding-left: 4px; font-size: 12px; font-weight: 600; letter-spacing: 1px; line-height: 18px; text-transform: uppercase; color: var(--tpt-muted); } #tptools .tpt-cgroup__list { display: flex; flex-direction: column; gap: 6px; } #tptools .tpt-cgroup .tpt-crow { min-height: 48px; padding: 6px 12px 6px 14px; } #tptools .tpt-cgroup .tpt-crow__name { font-size: 16px; font-weight: 500; line-height: 24px; } #tptools .tpt-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #tptools .tpt-crow--plate { flex-direction: column; align-items: stretch; gap: 8px; padding: 6px; border-radius: 14px; background: var(--tpt-surface); } #tptools .tpt-crow--plate .tpt-crow__main { align-items: center; justify-content: center; min-height: 64px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.22); text-align: center; } #tptools .tpt-crow--plate .tpt-crow__name { font-size: 17px; font-weight: 600; letter-spacing: 0.4px; } #tptools .tpt-crow--plate .tpt-row__actions { justify-content: center; padding-bottom: 2px; } #tptools .tpt-cn__rough { margin-top: 14px; color: var(--tpt-mint); } #tptools .tpt-cn__rough:hover { color: var(--tpt-mint); } #tptools .tpt-srow__tab { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 18px; color: var(--tpt-muted); } #tptools .tpt-cn-methods b { color: var(--tpt-mint); font-weight: 600; } #tptools .tpt-cn-subhead { margin: 40px 0 20px; } #tptools .tpt-tips--plain li { display: flex; flex-direction: column; } #tptools .tpt-tips--plain p strong { margin-top: 0; } #tptools .tpt-table--4 tr > :first-child { width: 170px; } #tptools .tpt-table--cn tr > :first-child { width: 200px; } #tptools .tpt-table--cn tr > :nth-child(2) { width: auto; } #tptools .tpt-table--cn tr > :nth-child(3) { width: 300px; color: var(--tpt-soft); } #tptools.tpt--couple .tpt-guide .tpt-lead strong { color: #fff; font-weight: 600; } @media (min-width: 768px) and (max-width: 1279px) { #tptools .tpt-moretools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools .tpt-cn__list--names, #tptools .tpt-cn__list--baby { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-cn__bar { flex-direction: column; align-items: flex-start; } } @media (max-width: 767px) { #tptools.tpt--hashtag .tpt-pills { display: flex; flex-wrap: wrap; gap: 8px; } #tptools.tpt--hashtag .tpt-pills button { width: auto; padding: 8px 14px; font-size: 16px; line-height: 24px; } #tptools .tpt-methods__more { margin-top: 16px; font-size: 14.5px; line-height: 23px; } #tptools .tpt-fnnotes .tpt-h3 { margin: 20px 0 6px; font-size: 17px; line-height: 24px; } #tptools .tpt-fnnotes p { font-size: 14.5px; line-height: 23px; } #tptools .tpt-table--num tbody tr { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; } #tptools .tpt-table--num tbody tr > :first-child { grid-row: 1 / span 2; } #tptools .tpt-table--num tbody tr > :not(:first-child) { grid-column: 2; } #tptools .tpt-moretools { padding-bottom: 56px; } #tptools .tpt-moretools__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; } #tptools .tpt-mtool { padding: 16px 48px 16px 18px; gap: 6px; border-radius: 16px; } #tptools .tpt-mtool__name { font-size: 16.5px; line-height: 23px; padding-right: 0; } #tptools .tpt-mtool__line { font-size: 14px; line-height: 21px; } #tptools .tpt-mtool__arrow { top: 50%; right: 18px; transform: translateY(-50%); } #tptools .tpt-moretools__all { margin-top: 18px; min-height: 44px; } #tptools .tpt-field--switch .tpt-switch { min-height: 44px; } #tptools .tpt-field--switch .tpt-small { margin-top: -8px; } #tptools .tpt-cn { padding: 20px 16px; background: var(--tpt-card); border: 1px solid var(--tpt-line); border-radius: 20px; scroll-margin-top: 16px; } #tptools .tpt-cn__bar { flex-direction: column; align-items: stretch; gap: 10px; margin: 12px 0; } #tptools .tpt-cn__bar .tpt-filters { flex-wrap: nowrap; margin: 0 -16px; padding-inline: 16px; } #tptools .tpt-cn__sort { align-self: flex-start; } #tptools .tpt-cn__sortbtn { min-height: 36px; } #tptools .tpt-cn__list--names, #tptools .tpt-cn__list--baby { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-crow { flex-direction: row; align-items: center; gap: 8px; padding: 8px 6px 8px 14px; } #tptools .tpt-crow .tpt-row__actions { gap: 4px; } #tptools .tpt-crow__name { font-size: 17px; line-height: 25px; } #tptools .tpt-cgroup { padding: 12px 10px; } #tptools .tpt-cgroup .tpt-crow { padding: 4px 4px 4px 10px; } #tptools .tpt-cgroup .tpt-crow__name { font-size: 15px; } #tptools .tpt-plates { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-crow--plate { flex-direction: column; padding: 6px; } #tptools .tpt-cn__rough { min-height: 44px; } #tptools .tpt-cn-subhead { margin: 24px 0 12px; } #tptools .tpt-table--cn tr > :nth-child(3) { font-size: 13.5px; color: var(--tpt-muted); } } /* ============================================================ v0.11.0 invitation page v2 step 1 (Figma 4052:2179) Hero "Updated" line, the 60-message block (jump chips, 10 groups; phones: closed rows with a preview line), multi-line bubbles (sign-off, WhatsApp cards), WhatsApp advice list, formal wording notes, tool WhatsApp-card tip. */ #tptools .tpt-hero__updated { margin-top: 12px; } #tptools .tpt-hero__updated + .tpt-chips { margin-top: 20px; } #tptools .tpt-bubble__text--lines { white-space: pre-line; overflow-wrap: anywhere; } #tptools .tpt-msg__tip { margin-top: -4px; } #tptools .tpt-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } #tptools .tpt-jump { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 500; line-height: 21px; text-decoration: none; } #tptools .tpt-jump:hover { border-color: var(--tpt-mint); color: var(--tpt-mint); } #tptools .tpt-mgroup { scroll-margin-top: calc(var(--tpt-top) - var(--tpt-pad) + 16px); } #tptools .tpt-mgroup .tpt-h3, #tptools .tpt-guide__h3 { margin: 56px 0 0; font-size: 22px; line-height: 30px; scroll-margin-top: calc(var(--tpt-top) - var(--tpt-pad) + 16px); } #tptools .tpt-mgroup:first-child .tpt-h3 { margin-top: 48px; } #tptools .tpt-mgroup__lead, #tptools .tpt-guide__p { margin-top: 10px; max-width: 860px; font-size: 16px; line-height: 26px; color: var(--tpt-soft); } #tptools .tpt-mgroup .tpt-bubbles, #tptools .tpt-guide__h3 + .tpt-lead + .tpt-bubbles, #tptools .tpt-guide__h3 + .tpt-bubbles { margin-top: 24px; } #tptools .tpt-guide__h3 + .tpt-lead { margin-top: 10px; font-size: 16px; line-height: 26px; } #tptools .tpt-sixty__helper { margin-top: 40px; font-size: 16px; line-height: 26px; color: #fff; } #tptools .tpt-sixty__helper strong { font-weight: 600; } #tptools .tpt-sixty__helper a { color: var(--tpt-mint); text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-points { display: grid; gap: 14px; margin-top: 20px; max-width: 900px; padding: 0; list-style: none; } #tptools .tpt-points li { position: relative; padding-left: 20px; font-size: 16px; line-height: 26px; color: var(--tpt-soft); } #tptools .tpt-points li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--tpt-mint); } #tptools .tpt-points strong { color: #fff; font-weight: 600; } #tptools .tpt-points code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #fff; font-family: inherit; font-size: 0.95em; } #tptools .tpt-table__note { display: block; margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--tpt-muted); } #tptools .tpt-acc__toggle + .tpt-table + .tpt-guide__h3 { margin-top: 48px; } @media (max-width: 767px) { #tptools .tpt-hero__updated { margin-top: 8px; } #tptools .tpt-jumps { gap: 8px; margin-top: 16px; } #tptools .tpt-jump { min-height: 43px; padding: 0 15px; font-size: 14px; } #tptools .tpt-mgroups { margin-top: 12px; } /* each group = a closed row (Mobile v2 4057:1592): H3 + one-line preview + chevron; opens to lead + bubbles */ #tptools .tpt-mgroup { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 12px; position: relative; border-bottom: 1px solid var(--tpt-line); } #tptools .tpt-mgroup > * { grid-column: 1 / -1; } #tptools .tpt-mgroup > :is(.tpt-h3, .tpt-mgroup__preview) { grid-column: 1; } #tptools .tpt-mgroup > .tpt-h3, #tptools .tpt-mgroup:first-child > .tpt-h3 { grid-row: 1; margin: 0; padding: 18px 32px 0 0; font-size: 16px; line-height: 24px; } #tptools .tpt-mgroup > .tpt-mgroup__preview { grid-row: 2; margin-top: 4px; padding-bottom: 18px; color: var(--tpt-soft); font-size: 13.5px; line-height: 20px; } #tptools .tpt-mgroup > .tpt-sub__toggle { display: flex; grid-row: 1 / 3; } #tptools .tpt-mgroup:not(.is-open) > :not(.tpt-h3, .tpt-mgroup__preview, .tpt-sub__toggle) { display: none; } #tptools .tpt-mgroup.is-open { padding-bottom: 16px; } #tptools .tpt-mgroup.is-open > .tpt-h3 { padding-bottom: 8px; color: var(--tpt-mint); } #tptools .tpt-mgroup.is-open > .tpt-mgroup__preview { display: none; } #tptools [data-tpt-acc] .tpt-mgroup .tpt-sub__toggle { color: #fff; } #tptools [data-tpt-acc] .tpt-mgroup .tpt-acc__chev { transform: none; } #tptools [data-tpt-acc] .tpt-mgroup.is-open .tpt-sub__toggle { color: var(--tpt-mint); } #tptools [data-tpt-acc] .tpt-mgroup.is-open .tpt-acc__chev { transform: rotate(180deg); } #tptools .tpt-mgroup__lead { margin-top: 0; font-size: 14.5px; line-height: 23px; } #tptools .tpt-mgroup .tpt-bubbles { margin-top: 12px; } #tptools .tpt-sixty__helper { margin-top: 20px; font-size: 14.5px; line-height: 23px; } #tptools .tpt-guide .tpt-guide__h3 { margin: 24px 0 0; font-size: 17px; line-height: 25px; } #tptools .tpt-guide__p, #tptools .tpt-guide__h3 + .tpt-lead { margin-top: 8px; font-size: 14.5px; line-height: 23px; } #tptools .tpt-guide__h3 + .tpt-lead + .tpt-bubbles, #tptools .tpt-guide__h3 + .tpt-bubbles { margin-top: 12px; } #tptools .tpt-points { gap: 10px; margin-top: 12px; } #tptools .tpt-points li { font-size: 14.5px; line-height: 23px; } #tptools .tpt-points li::before { top: 9px; } #tptools .tpt-acc__toggle + .tpt-table + .tpt-guide__h3 { margin-top: 24px; } } /* v0.11.0 step 2 controls (no Figma frame: built from the tool's own chip, field, date and switch patterns) */ #tptools .tpt-optional { font-weight: 400; color: var(--tpt-muted); } #tptools .tpt-fnpick .tpt-error { margin-top: 2px; } #tptools .tpt-fnhelp { margin-top: 2px; } #tptools .tpt-fnrows { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } /* one compact row per function: name · date · time, venue under them (field labels are for screen readers) */ #tptools .tpt-fnrow { display: grid; grid-template-columns: 78px minmax(0, 1fr) 84px; align-items: center; gap: 8px; } #tptools .tpt-fnrow[hidden] { display: none; } #tptools .tpt-fnrow__name { font-size: 13px; font-weight: 600; line-height: 18px; color: #fff; } #tptools .tpt-fnrow__fields { display: contents; } #tptools .tpt-fnrow .tpt-field { gap: 0; } #tptools .tpt-fnrow__fields > :last-child { grid-column: 2 / -1; } #tptools .tpt-fnrow .tpt-field input { height: 44px; padding: 0 12px; font-size: 15px; } #tptools .tpt-fnrow .tpt-date__shown { left: 12px; right: 36px; font-size: 15px; } #tptools .tpt-fnrow + .tpt-fnrow { padding-top: 8px; border-top: 1px solid var(--tpt-line); } #tptools [data-tpt-spellbox][hidden] { display: none; } @media (max-width: 767px) { #tptools .tpt-fnrow { grid-template-columns: 70px minmax(0, 1fr) 76px; gap: 6px; } } /* ============================================================ v0.12.0 captions page v2 (Figma 4066:1030) Hero: "Updated" line + jump chips (one sideways row on phones); Hinglish helper line under its H3; FAQ answer link. */ #tptools.tpt--cap .tpt-hero .tpt-jumps { margin-top: 16px; } #tptools.tpt--cap .tpt-hero .tpt-jumps + .tpt-chips { margin-top: 20px; } #tptools.tpt--cap .tpt-capgroup__help { margin: -12px 0 20px; max-width: 860px; font-size: 14px; line-height: 21px; color: var(--tpt-muted); } #tptools.tpt--cap .tpt-faq__a a { color: var(--tpt-mint); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 767px) { #tptools.tpt--cap .tpt-hero .tpt-jumps { flex-wrap: nowrap; margin-top: 12px; } #tptools.tpt--cap .tpt-hero .tpt-jumps + .tpt-chips + .tpt-chipline { margin-top: 12px; } #tptools.tpt--cap .tpt-capgroup__help { margin: -4px 0 10px; font-size: 13.5px; line-height: 20px; } } /* ========================================================================== v0.13.0 Wedding songs page v2 (Figma 4080:8107): song cards, Show all / Show fewer, Top 10, list-by-moment chips, planner lines. All songs are in the HTML; .tpt-more ones are hidden until songs.js adds .is-all (noscript shows all). ========================================================================== */ #tptools.tpt--songs .tpt-hero .tpt-jumps { margin-top: 16px; } #tptools.tpt--songs .tpt-hero .tpt-jumps + .tpt-chips { margin-top: 20px; } #tptools.tpt--songs .tpt-songlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } #tptools.tpt--songs .tpt-songlist li { display: block; padding: 20px; } #tptools.tpt--songs .tpt-songlist li::before, #tptools.tpt--songs .tpt-top10__n { display: inline-block; padding-right: 22px; font-size: 12.5px; font-weight: 600; letter-spacing: 1px; line-height: 20px; color: var(--tpt-mint); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 18 18' fill='none' stroke='%2303F7B5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 13.5V4l8-1.5v9.5'/%3E%3Ccircle cx='5' cy='13.5' r='2'/%3E%3Ccircle cx='13' cy='12' r='2'/%3E%3C/svg%3E") no-repeat right center / 14px 14px; } #tptools.tpt--songs .tpt-songlist p { margin-top: 10px; } #tptools.tpt--songs .tpt-songlist__t { display: block; font-size: 17px; line-height: 25px; } #tptools.tpt--songs .tpt-songlist__dash, #tptools.tpt--songs .tpt-songlist__dot { display: none; } #tptools.tpt--songs .tpt-songlist__src { display: block; margin-top: 6px; font-size: 12.5px; line-height: 19px; color: var(--tpt-muted); } #tptools.tpt--songs .tpt-songlist__why { display: block; margin-top: 8px; font-size: 15px; line-height: 23px; } #tptools.tpt--songs [data-tpt-clip="5"]:not(.is-all) .tpt-more { display: none; } #tptools.tpt--songs .tpt-showall { margin-top: 32px; min-height: 44px; padding: 0 20px; font-size: 14px; } #tptools.tpt--songs .tpt-songs-also a, #tptools.tpt--songs .tpt-songs-planners a, #tptools .tpt-vsongs a { color: var(--tpt-mint); text-decoration: underline; text-underline-offset: 3px; } #tptools.tpt--songs .tpt-songs-planners { margin-top: 32px; font-size: 14px; line-height: 22px; color: var(--tpt-muted); } #tptools.tpt--songs .tpt-songs-indian .tpt-sublabel { color: var(--tpt-mint); } #tptools .tpt-vsongs { margin-top: 14px; font-size: 14px; line-height: 21px; color: var(--tpt-muted); } /* Top 10 (always open, never an accordion) */ #tptools.tpt--songs .tpt-top10 .tpt-capgroup { margin: 40px 0 16px; } #tptools.tpt--songs .tpt-top10__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; list-style: none; } #tptools.tpt--songs .tpt-top10__item { padding: 20px; border-radius: 16px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools.tpt--songs .tpt-top10__n { display: block; width: max-content; } #tptools.tpt--songs .tpt-top10__t { display: block; margin-top: 10px; font-size: 17px; font-weight: 600; line-height: 25px; color: #fff; } #tptools.tpt--songs .tpt-top10__by, #tptools.tpt--songs .tpt-top10__src { font-size: 12.5px; line-height: 19px; color: var(--tpt-muted); } #tptools.tpt--songs .tpt-top10__by { display: inline; margin-top: 6px; } #tptools.tpt--songs .tpt-top10__dash, #tptools.tpt--songs .tpt-top10__dot2 { display: none; } #tptools.tpt--songs .tpt-top10__go { display: block; margin-top: 10px; } #tptools.tpt--songs .tpt-top10__go a { font-size: 13px; font-weight: 600; color: var(--tpt-mint); text-decoration: none; } #tptools.tpt--songs .tpt-top10__go a:hover { text-decoration: underline; } /* Wedding song list by moment */ #tptools.tpt--songs .tpt-songnav__label { margin: 36px 0 0; color: var(--tpt-mint); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; line-height: 18px; text-transform: uppercase; } #tptools.tpt--songs .tpt-songnav__row { margin-top: 12px; } @media (min-width: 768px) { #tptools.tpt--songs [data-tpt-clip="0"]:not(.is-all) .tpt-more { display: none; } } @media (min-width: 768px) and (max-width: 1100px) { #tptools.tpt--songs .tpt-songlist, #tptools.tpt--songs .tpt-top10__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { #tptools.tpt--songs .tpt-hero .tpt-jumps { flex-wrap: nowrap; margin-top: 12px; } #tptools.tpt--songs .tpt-songnav__row { flex-wrap: nowrap; } #tptools.tpt--songs .tpt-songlist { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; } #tptools.tpt--songs .tpt-songlist li { padding: 16px; } #tptools.tpt--songs .tpt-showall { width: 100%; margin-top: 16px; } #tptools.tpt--songs [data-tpt-clip="0"] .tpt-showall { display: none; } #tptools.tpt--songs .tpt-songs-planners { margin-top: 20px; } /* Top 10 on phones: two-line rows (title – artist / film, year · moment ›) */ #tptools.tpt--songs .tpt-top10 .tpt-capgroup { margin: 24px 0 4px; font-size: 16px; } #tptools.tpt--songs .tpt-top10__list { grid-template-columns: minmax(0, 1fr); gap: 0; } #tptools.tpt--songs .tpt-top10__item { padding: 14px 0; border: 0; border-bottom: 1px solid var(--tpt-line); border-radius: 0; background: none; } #tptools.tpt--songs .tpt-top10__n { display: inline; margin-right: 6px; padding-right: 0; background: none; } #tptools.tpt--songs .tpt-top10__t { display: inline; font-size: 15px; line-height: 23px; } #tptools.tpt--songs .tpt-top10__by { font-size: 14px; line-height: 23px; color: var(--tpt-soft); } #tptools.tpt--songs .tpt-top10__dash { display: inline; } #tptools.tpt--songs .tpt-top10__dot { display: none; } #tptools.tpt--songs .tpt-top10__src, #tptools.tpt--songs .tpt-top10__go { display: inline; } #tptools.tpt--songs .tpt-top10__src::before { content: ""; display: block; height: 4px; } #tptools.tpt--songs .tpt-top10__go { margin: 0; } #tptools.tpt--songs .tpt-top10__dot2 { display: inline; font-size: 12.5px; color: var(--tpt-muted); } #tptools.tpt--songs .tpt-top10__go a { font-size: 12.5px; } #tptools.tpt--songs .tpt-songnav__label { margin-top: 24px; } } /* ---------------------------------------------------------------- v0.14.0 vendor directory SEO v3 (Figma 4115:13548) */ /* cover: text-protection scrim behind the H1 and count line (desktop: from the left; phones: from the middle down), over the live photo and its ::before shade, under the glows. The mask (soft top, bottom and, from 1280px, sides) is unchanged. */ #tptools .tpt-vhero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(4, 5, 14, 0.5) 0%, rgba(4, 5, 14, 0.34) 40%, rgba(4, 5, 14, 0) 72%), linear-gradient(180deg, rgba(4, 5, 14, 0) 45%, rgba(4, 5, 14, 0.3) 100%); } /* the answer block, the banquet link line and "Prices we found" moved off the cover, before the chips (24px above and below) */ #tptools .tpt-vintro { position: relative; padding: 24px 0; } #tptools .tpt-vintro__answer { max-width: 640px; font-size: 17px; line-height: 28px; color: #dcdde2; } #tptools .tpt-vintro__link { max-width: 640px; margin-top: 14px; font-size: 15px; line-height: 24px; color: var(--tpt-soft); } #tptools .tpt-vintro__link a, #tptools .tpt-vtools-line a { color: var(--tpt-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-vprices { display: flex; gap: 8px; max-width: 744px; margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--tpt-soft); } #tptools .tpt-vprices svg { flex: none; margin-top: 3px; } #tptools .tpt-vprices strong { color: #fff; font-weight: 600; } /* one line under the filter bar (list pages), one under the listing note (photographer pages) */ #tptools .tpt-vfacts { margin-top: 16px; font-size: 14px; line-height: 22px; color: var(--tpt-muted); } #tptools .tpt-vtools-line { margin-top: 16px; font-size: 15px; line-height: 24px; color: var(--tpt-soft); } @media (max-width: 767px) { #tptools .tpt-vhero__scrim { background: linear-gradient(180deg, rgba(4, 5, 14, 0) 0%, rgba(4, 5, 14, 0) 38%, rgba(4, 5, 14, 0.45) 62%, rgba(4, 5, 14, 0.62) 100%); } #tptools .tpt-vintro { padding: 16px 0; } #tptools .tpt-vintro__answer { font-size: 16px; line-height: 26px; } #tptools .tpt-vintro__link { margin-top: 12px; font-size: 14.5px; line-height: 22px; } #tptools .tpt-vprices { margin-top: 12px; font-size: 13.5px; line-height: 21px; } #tptools .tpt-vfacts { margin-top: 12px; font-size: 13px; line-height: 20px; } #tptools .tpt-vtools-line { font-size: 14px; line-height: 22px; } } /* ============================================================ wedding planning checklist (0.15.0) Figma 4133:59 (desktop 4133:60, phone 4133:676). New classes only (.tpt-cl*), or shared classes scoped under .tpt--checklist, so no other tool changes. Print layout: .tpt-cl-printout (outside #tptools, built by checklist.js only while printing). */ #tptools.tpt--checklist .tpt-tool { padding-bottom: 120px; } #tptools .tpt-cl__onboard { margin: 0 0 16px; font-size: 16px; font-weight: 500; line-height: 24px; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-cl__grid { grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); } #tptools .tpt-cl-start { gap: 28px; } #tptools .tpt-cl-start .tpt-field { gap: 10px; } #tptools .tpt-cl-start .tpt-small { margin-top: 2px; } #tptools .tpt-cl-daterow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } #tptools .tpt-cl-daterow .tpt-date { flex: 0 1 252px; min-width: 200px; } #tptools .tpt-cl-start .tpt-date input { width: 100%; height: 48px; padding: 0 44px 0 16px; border-radius: 12px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: transparent; font-size: 16px; } #tptools .tpt-cl-start .tpt-date input:focus { border-color: var(--tpt-mint); box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); } #tptools .tpt-cl-start .tpt-date input[aria-invalid="true"] { border-color: var(--tpt-error); } #tptools .tpt-date.is-off { opacity: .45; } #tptools .tpt-cl-check { display: inline-flex; align-items: center; gap: 10px; position: relative; cursor: pointer; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-cl-check input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; } #tptools .tpt-cl-check__box { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, 0.35); display: grid; place-items: center; } #tptools .tpt-cl-check input:checked + .tpt-cl-check__box { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools .tpt-cl-check input:checked + .tpt-cl-check__box::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #04050e; border-width: 0 2px 2px 0; transform: rotate(45deg); } #tptools .tpt-cl-check input:focus-visible + .tpt-cl-check__box { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } #tptools .tpt-cl-count { display: inline-flex; align-items: center; gap: 6px; color: var(--tpt-mint); font-size: 14px; font-weight: 500; line-height: 21px; } #tptools .tpt-cl-types { display: flex; flex-wrap: wrap; gap: 8px; } #tptools .tpt-cl-types .tpt-tab { background: transparent; color: #fff; } #tptools .tpt-cl-types .tpt-tab[aria-pressed="true"] { background: var(--tpt-mint); color: #04050e; } #tptools .tpt-cl-fns { display: flex; flex-wrap: wrap; gap: 8px; } #tptools .tpt-cl-fn { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: var(--tpt-surface); } #tptools .tpt-cl-fn.is-on { border-color: rgba(3, 247, 181, 0.55); background: rgba(3, 247, 181, 0.08); } #tptools .tpt-cl-fn__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 4px 7px 12px; font-size: 14px; font-weight: 500; line-height: 21px; color: var(--tpt-soft); border-radius: 999px 0 0 999px; } #tptools .tpt-cl-fn__btn svg { display: none; color: var(--tpt-mint); } #tptools .tpt-cl-fn.is-on .tpt-cl-fn__btn { color: #fff; } #tptools .tpt-cl-fn.is-on .tpt-cl-fn__btn svg { display: block; } #tptools .tpt-cl-fn__info { display: grid; place-items: center; width: 30px; align-self: stretch; padding-right: 4px; color: var(--tpt-muted); border-radius: 0 999px 999px 0; } #tptools .tpt-cl-fn__info:hover, #tptools .tpt-cl-fn__info[aria-expanded="true"] { color: var(--tpt-mint); } #tptools .tpt-cl-info { padding: 10px 14px; border-radius: 12px; background: rgba(3, 247, 181, 0.06); border-left: 2px solid var(--tpt-mint); font-size: 13.5px; line-height: 21px; color: var(--tpt-soft); } #tptools .tpt-cl-addfn { align-self: flex-start; color: var(--tpt-mint); font-size: 14px; font-weight: 500; line-height: 21px; } #tptools .tpt-cl-addfn:hover { text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-cl-make { display: flex; flex-direction: column; gap: 12px; } #tptools .tpt-cl-make__count { text-align: center; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-cl-center { text-align: center; } /* preview card (desktop only, before the first list) */ #tptools .tpt-cl-preview { display: flex; flex-direction: column; gap: 12px; } #tptools .tpt-cl-list__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } #tptools .tpt-cl-list__tasks { color: var(--tpt-muted); font-size: 15px; } #tptools .tpt-cl-preview__done { font-size: 13px; color: var(--tpt-soft); } #tptools .tpt-cl-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } #tptools .tpt-cl-bar > span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--tpt-mint); transition: width .3s; } #tptools .tpt-cl-preview__rows { margin-top: 8px; } #tptools .tpt-cl-preview__rows li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--tpt-line); font-size: 13.5px; color: var(--tpt-soft); } #tptools .tpt-cl-preview__box { width: 14px; height: 14px; border-radius: 4px; border: 1.3px solid rgba(255, 255, 255, 0.25); } #tptools .tpt-cl-preview__label { flex: 1; } #tptools .tpt-cl-preview__bar { width: 64px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); } #tptools .tpt-cl-preview__rows li:nth-child(odd) .tpt-cl-preview__bar { width: 80px; } /* notices, shared banner, summary bar */ #tptools .tpt-notice--warn .tpt-notice__icon { border-color: #f5b83d; } #tptools .tpt-notice--warn .tpt-notice__icon::after { border-color: #f5b83d; } #tptools .tpt-cl-shared { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(3, 247, 181, 0.35); background: rgba(3, 247, 181, 0.06); } #tptools .tpt-cl-shared__text { flex: 1 1 320px; font-size: 15px; line-height: 23px; color: #fff; } #tptools .tpt-cl-shared__actions { display: flex; flex-wrap: wrap; gap: 10px; } #tptools .tpt-cl-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; padding: 18px 24px; border-radius: 18px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-cl-summary__icon svg { stroke: var(--tpt-mint); } #tptools .tpt-cl-summary__text { font-size: 16px; font-weight: 500; line-height: 24px; color: #fff; } #tptools .tpt-cl-summary .tpt-cl-count { padding: 4px 12px; border-radius: 999px; background: rgba(3, 247, 181, 0.1); font-size: 13.5px; } #tptools .tpt-cl-summary__links { margin-left: auto; display: inline-flex; gap: 16px; } #tptools .tpt-cl-summary__edit { color: #fff; } /* list card */ #tptools .tpt-cl-list { outline: none; scroll-margin-top: calc(var(--tpt-top, 0px) - var(--tpt-pad, 0px) + 16px); } #tptools .tpt-cl__grid + .tpt-cl-list { margin-top: 24px; } #tptools .tpt-cl-list__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } #tptools .tpt-cl-list__head .tpt-card__title { font-size: 22px; } #tptools .tpt-cl-actions { display: flex; flex-wrap: wrap; gap: 8px; } #tptools .tpt-cl-actions .tpt-btn { height: 40px; padding: 0 18px; font-size: 14px; } #tptools .tpt-cl-progress { margin-top: 24px; } #tptools .tpt-cl-progress__line { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #fff; } #tptools .tpt-cl-progress__pct { color: var(--tpt-mint); font-weight: 500; font-size: 13px; } #tptools .tpt-cl-bar2 { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 20px; } #tptools .tpt-cl-filters { align-items: center; flex-wrap: wrap; } #tptools .tpt-cl-seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--tpt-surface); } #tptools .tpt-cl-seg button { padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-cl-seg button:hover { color: #fff; } #tptools .tpt-cl-seg button[aria-pressed="true"] { background: var(--tpt-mint); color: #04050e; } #tptools .tpt-cl-sep { width: 1px; height: 24px; background: var(--tpt-line); margin: 0 4px; } #tptools .tpt-cl-chips { display: inline-flex; gap: 8px; } #tptools .tpt-cl-chips .tpt-tab { padding: 6px 14px; font-size: 13.5px; line-height: 20px; } #tptools .tpt-cl-banner { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(3, 247, 181, 0.3); background: rgba(3, 247, 181, 0.06); } #tptools .tpt-cl-banner__icon { color: var(--tpt-mint); } #tptools .tpt-cl-banner p { flex: 1; font-size: 14.5px; line-height: 22px; color: rgba(255, 255, 255, 0.92); } #tptools .tpt-cl-banner__link { color: var(--tpt-mint); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-cl-alldone { margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: rgba(3, 247, 181, 0.1); color: var(--tpt-mint); font-weight: 600; } #tptools .tpt-cl-groups { margin-top: 20px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-cl-group { border-bottom: 1px solid var(--tpt-line); } #tptools .tpt-cl-group__head { display: flex; align-items: center; gap: 8px; } #tptools .tpt-cl-group__toggle { flex: 1; display: flex; align-items: center; gap: 12px; padding: 20px 4px; text-align: left; white-space: normal; } #tptools .tpt-cl-group__toggle > svg { color: var(--tpt-soft); transition: transform .2s; } #tptools .tpt-cl-group.is-open .tpt-cl-group__toggle > svg { transform: rotate(90deg); } #tptools .tpt-cl-group__titles { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } #tptools .tpt-cl-group__title { font-size: 18px; font-weight: 600; line-height: 27px; color: #fff; } #tptools .tpt-cl-group__range { font-size: 13px; color: var(--tpt-muted); } #tptools .tpt-cl-group__count { flex: none; font-size: 13.5px; color: var(--tpt-soft); } #tptools .tpt-cl-group__add { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(3, 247, 181, 0.5); color: var(--tpt-mint); } #tptools .tpt-cl-group__add:hover { background: rgba(3, 247, 181, 0.1); } #tptools .tpt-cl-group__body { padding: 0 0 20px; } #tptools .tpt-cl-group__alldone { display: flex; align-items: center; gap: 8px; margin: -6px 0 12px 32px; font-size: 13.5px; color: var(--tpt-mint); } #tptools .tpt-cl-group__none { margin: 0 0 8px 32px; font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-cl-textbtn { color: var(--tpt-mint); font-size: 14px; font-weight: 500; } #tptools .tpt-cl-textbtn:hover { text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-cl-tasks { display: flex; flex-direction: column; gap: 8px; } #tptools .tpt-cl-task { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07); } #tptools .tpt-cl-task.is-over { border-color: rgba(245, 184, 61, 0.45); background: rgba(245, 184, 61, 0.04); } #tptools .tpt-cl-task__tickwrap { position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; } #tptools .tpt-cl-task__tick { position: absolute; inset: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } #tptools .tpt-cl-task__box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, 0.35); transition: background-color .15s, border-color .15s; } #tptools .tpt-cl-task__tick:checked + .tpt-cl-task__box { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools .tpt-cl-task__tick:checked + .tpt-cl-task__box::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #04050e; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); } #tptools .tpt-cl-task__tick:focus-visible + .tpt-cl-task__box { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } #tptools .tpt-cl-task__main { flex: 1; min-width: 0; } #tptools .tpt-cl-task__t { font-size: 15.5px; font-weight: 500; line-height: 23px; color: #fff; overflow-wrap: anywhere; } #tptools .tpt-cl-task.is-done .tpt-cl-task__t { color: var(--tpt-muted); text-decoration: line-through; } #tptools .tpt-cl-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--tpt-muted); } #tptools .tpt-cl-task__meta > * + *::before { content: "·"; margin: 0 8px; color: var(--tpt-muted); } #tptools .tpt-cl-task__due { display: inline-flex; align-items: center; gap: 5px; } #tptools .tpt-cl-task.is-over .tpt-cl-task__due { color: #f5b83d; font-weight: 500; } #tptools .tpt-cl-task__tipbtn { display: inline-flex; align-items: center; gap: 4px; color: var(--tpt-mint); font-size: 13px; font-weight: 500; } #tptools .tpt-cl-task__tipbtn:hover span { text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-cl-task__tip { margin-top: 10px; max-width: 640px; padding: 10px 14px; border-radius: 10px; border-left: 2px solid var(--tpt-mint); background: rgba(3, 247, 181, 0.05); font-size: 13.5px; line-height: 21px; color: var(--tpt-soft); } #tptools .tpt-cl-task__side { flex: none; display: flex; align-items: center; gap: 6px; } #tptools .tpt-cl-owner { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: var(--tpt-surface); font-size: 13px; font-weight: 500; color: #fff; } #tptools .tpt-cl-owner svg { color: var(--tpt-soft); } #tptools .tpt-cl-owner.is-empty { border-style: dashed; color: var(--tpt-muted); background: transparent; } #tptools .tpt-cl-owner:hover { border-color: rgba(255, 255, 255, 0.4); } #tptools .tpt-cl-iconbtn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--tpt-soft); } #tptools .tpt-cl-iconbtn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } #tptools .tpt-cl-note.has-note { color: var(--tpt-mint); background: rgba(3, 247, 181, 0.12); } #tptools .tpt-cl-fold { margin-top: 8px; border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 14px; } #tptools .tpt-cl-fold__toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; font-size: 13.5px; color: var(--tpt-soft); } #tptools .tpt-cl-fold__toggle svg { transition: transform .2s; } #tptools .tpt-cl-fold.is-open .tpt-cl-fold__toggle svg { transform: rotate(90deg); } #tptools .tpt-cl-fold .tpt-cl-tasks { padding: 0 8px 8px; } #tptools .tpt-cl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; text-align: center; color: var(--tpt-soft); } #tptools .tpt-cl-addtask { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 20px; padding: 14px; border-radius: 14px; border: 1px dashed rgba(3, 247, 181, 0.4); color: var(--tpt-mint); font-size: 15px; font-weight: 600; } #tptools .tpt-cl-addtask:hover { background: rgba(3, 247, 181, 0.06); color: var(--tpt-mint); } #tptools .tpt-cl-list__foot { margin-top: 20px; } #tptools .tpt-cl-list .tpt-small + .tpt-small { margin-top: 4px; } /* drawer (edit / add / add functions), dialogs, menu, toast */ html.tpt-cl-locked { overflow: hidden; } #tptools .tpt-cl-drawer { top: 0; bottom: 0; right: 0; width: 440px; border-radius: 0; border: 0; border-left: 1px solid var(--tpt-line); padding: 28px; overflow-y: auto; } #tptools .tpt-cl-drawer__form { display: flex; flex-direction: column; gap: 18px; } #tptools .tpt-cl-drawer .tpt-field input[type="text"], #tptools .tpt-cl-drawer .tpt-date input, #tptools .tpt-cl-drawer select, #tptools .tpt-cl-drawer textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 15px; outline: none; } #tptools .tpt-cl-drawer .tpt-date input { color: transparent; padding-right: 44px; } #tptools .tpt-cl-drawer textarea { height: auto; min-height: 100px; padding: 12px 14px; line-height: 22px; resize: vertical; } #tptools .tpt-cl-drawer textarea::placeholder { color: var(--tpt-muted); opacity: 1; } #tptools .tpt-cl-drawer :is(input, select, textarea):focus { border-color: var(--tpt-mint); box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); } #tptools .tpt-cl-select { position: relative; display: block; } #tptools .tpt-cl-select select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; color-scheme: dark; } #tptools .tpt-cl-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--tpt-soft); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; } #tptools .tpt-cl-tipbox { padding: 10px 14px; border-radius: 10px; border-left: 2px solid var(--tpt-mint); background: rgba(3, 247, 181, 0.05); font-size: 13.5px; line-height: 21px; color: var(--tpt-soft); } #tptools .tpt-cl-labelrow { display: flex; justify-content: space-between; align-items: center; } #tptools .tpt-cl-labelrow label { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-cl-small { font-size: 13px; } #tptools .tpt-cl-drawer__actions { display: flex; align-items: center; gap: 10px; } #tptools .tpt-cl-del { margin-left: auto; color: var(--tpt-error); font-size: 14px; font-weight: 500; } #tptools .tpt-cl-del:hover { color: var(--tpt-error); text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-cl-drawer [data-tpt-e-undo] { align-self: flex-start; } #tptools .tpt-cl-addfn__list { flex: 1; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; min-height: 0; } #tptools .tpt-cl-addfn__group { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; } #tptools .tpt-cl-addfn__h { margin-bottom: 2px; padding: 0; font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--tpt-muted); } #tptools .tpt-cl-dialog { position: fixed; z-index: 9997; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; background: var(--tpt-card); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } #tptools .tpt-cl-dialog__head { display: flex; align-items: flex-start; gap: 16px; } #tptools .tpt-cl-dialog__title { flex: 1; font-size: 18px; font-weight: 600; line-height: 26px; color: #fff; } #tptools .tpt-cl-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; } #tptools .tpt-cl-dialog__actions .tpt-btn { height: 40px; font-size: 14px; } #tptools .tpt-cl-radios { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; } #tptools .tpt-cl-radio { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 14.5px; font-weight: 500; cursor: pointer; } #tptools .tpt-cl-radio input { position: absolute; opacity: 0; } #tptools .tpt-cl-radio__dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); display: grid; place-items: center; } #tptools .tpt-cl-radio:has(input:checked) { border-color: rgba(3, 247, 181, 0.6); background: rgba(3, 247, 181, 0.06); } #tptools .tpt-cl-radio input:checked + .tpt-cl-radio__dot { border-color: var(--tpt-mint); } #tptools .tpt-cl-radio input:checked + .tpt-cl-radio__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tpt-mint); } #tptools .tpt-cl-radio input:focus-visible + .tpt-cl-radio__dot { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } #tptools .tpt-cl-menu { position: fixed; z-index: 9998; min-width: 200px; padding: 6px; border-radius: 14px; background: #10121d; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } #tptools .tpt-cl-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; font-size: 14px; color: #fff; text-align: left; } #tptools .tpt-cl-menu__item svg { color: var(--tpt-mint); visibility: hidden; } #tptools .tpt-cl-menu__item[aria-checked="true"] svg { visibility: visible; } #tptools .tpt-cl-menu__item:is(:hover, :focus) { background: rgba(255, 255, 255, 0.07); color: #fff; } #tptools .tpt-cl-menu__item.is-danger, #tptools .tpt-cl-menu__item.is-danger:is(:hover, :focus) { color: var(--tpt-error); } #tptools.tpt--checklist .tpt-toast { display: inline-flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); white-space: normal; } #tptools.tpt--checklist .tpt-toast.is-on.has-action { pointer-events: auto; } #tptools .tpt-cl-toast__undo { color: #04050e; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* guide */ #tptools .tpt-cl-months { margin-top: 40px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-cl-month { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 48px; align-content: start; padding: 32px 0; border-bottom: 1px solid var(--tpt-line); } #tptools .tpt-cl-month > * { grid-column: 1; } #tptools .tpt-cl-month > .tpt-sub__toggle { display: none; } #tptools .tpt-cl-month__num { color: var(--tpt-mint); font-size: 13px; font-weight: 600; letter-spacing: 1px; } #tptools .tpt-cl-month .tpt-cl-month__h { margin: 6px 0 0; font-size: 26px; line-height: 34px; } #tptools .tpt-cl-month__lead { margin-top: 10px; font-size: 15px; line-height: 24px; color: var(--tpt-soft); } #tptools .tpt-cl-month > .tpt-cl-ticks { grid-column: 2; grid-row: 1 / span 4; } #tptools .tpt-cl-ticks { display: flex; flex-direction: column; gap: 12px; } #tptools .tpt-cl-ticks li { position: relative; padding-left: 30px; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.85); } #tptools .tpt-cl-ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(3, 247, 181, 0.7); } #tptools .tpt-cl-ticks strong { color: #fff; } #tptools .tpt-cl-ticks--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; margin-top: 32px; } #tptools.tpt--checklist .tpt-inline-link { color: var(--tpt-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-cl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; } #tptools .tpt-cl-gcard { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-cl-gcard__h { font-size: 20px; font-weight: 600; line-height: 28px; color: #fff; } #tptools .tpt-cl-gcard p { font-size: 15.5px; line-height: 25px; color: var(--tpt-soft); } #tptools .tpt-cl-gcard .tpt-cl-ticks li { font-size: 15.5px; line-height: 25px; } #tptools.tpt--checklist .tpt-section .tpt-lead + .tpt-tips, #tptools .tpt-cl-after { margin-top: 40px; } #tptools .tpt-cl-after li p strong { margin-top: 0; } #tptools .tpt-cl-print-steps { display: grid; gap: 10px; margin-top: 28px; padding-left: 22px; list-style: decimal; color: rgba(255, 255, 255, 0.85); font-size: 16px; line-height: 26px; } #tptools .tpt-cl-print-steps strong, #tptools .tpt-cl-guide-p strong { color: #fff; } #tptools .tpt-cl-guide-p { margin-top: 20px; max-width: 860px; font-size: 16px; line-height: 26px; color: var(--tpt-soft); } @media (prefers-reduced-motion: reduce) { #tptools .tpt-cl-bar > span, #tptools .tpt-cl-group__toggle > svg, #tptools .tpt-cl-fold__toggle svg, #tptools .tpt-cl-task__box { transition: none; } } /* tablets */ @media (max-width: 1023px) and (min-width: 768px) { #tptools .tpt-cl__grid { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-cl-preview { display: none; } #tptools .tpt-cl-month { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: 32px; } #tptools.tpt--checklist .tpt-tips { grid-template-columns: repeat(2, 1fr); } } /* phones (Figma 4142:3358 / 4143:905) */ @media (max-width: 767px) { #tptools .tpt-cl__onboard { font-size: 15px; line-height: 23px; } #tptools .tpt-cl__grid { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-cl-preview { display: none; } #tptools .tpt-cl-start { gap: 22px; } #tptools .tpt-cl-daterow { flex-direction: column; align-items: stretch; } #tptools .tpt-cl-daterow .tpt-date { flex: none; } #tptools .tpt-cl-check { min-height: 32px; } #tptools .tpt-cl-types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; } #tptools .tpt-cl-types::-webkit-scrollbar { display: none; } #tptools .tpt-cl-types .tpt-tab { flex: none; } #tptools .tpt-cl-fn__btn { min-height: 40px; } #tptools .tpt-cl-addfn { min-height: 44px; } #tptools .tpt-cl-summary { padding: 16px; gap: 10px; } #tptools .tpt-cl-summary__text { flex: 1 1 calc(100% - 40px); font-size: 15px; line-height: 22px; } #tptools .tpt-cl-list { padding: 20px 16px; } #tptools .tpt-cl-list__head .tpt-card__title { font-size: 20px; } #tptools .tpt-cl-progress { margin-top: 16px; } #tptools .tpt-cl-bar2 { flex-direction: column; align-items: stretch; margin-top: 16px; } #tptools .tpt-cl-filters { flex-wrap: nowrap; margin-inline: -16px; padding-inline: 16px; } #tptools .tpt-cl-seg button, #tptools .tpt-cl-chips .tpt-tab { min-height: 40px; } #tptools .tpt-cl-hidedone { align-self: flex-start; } #tptools .tpt-cl-banner { align-items: flex-start; flex-wrap: wrap; padding: 14px; } #tptools .tpt-cl-banner p { flex: 1 1 calc(100% - 40px); font-size: 14px; } #tptools .tpt-cl-banner__link { margin-left: 30px; min-height: 32px; } #tptools .tpt-cl-group__toggle { padding: 18px 0; align-items: flex-start; } #tptools .tpt-cl-group__toggle > svg { margin-top: 5px; } #tptools .tpt-cl-group__titles { flex-direction: column; gap: 0; } #tptools .tpt-cl-group__title { font-size: 17px; line-height: 25px; } #tptools .tpt-cl-group__count { margin-top: 3px; font-size: 12.5px; } #tptools .tpt-cl-task { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; padding: 14px 12px 12px; } #tptools .tpt-cl-task__tickwrap { grid-column: 1; grid-row: 1; } #tptools .tpt-cl-task__main { grid-column: 2; grid-row: 1; padding-right: 30px; } #tptools .tpt-cl-task__side { grid-column: 2; grid-row: 2; display: flex; gap: 6px; margin-top: 6px; } #tptools .tpt-cl-task__side [data-more] { position: absolute; top: 8px; right: 6px; width: 40px; height: 40px; } #tptools .tpt-cl-task__side .tpt-cl-owner { height: 32px; } #tptools .tpt-cl-actions--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } #tptools .tpt-cl-actions--grid .tpt-btn { width: 100%; height: 44px; padding: 0 10px; } #tptools .tpt-cl-drawer { top: auto; left: 0; width: auto; max-height: 88vh; border-radius: 24px 24px 0 0; border-left: 0; border-top: 1px solid var(--tpt-line); padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); } #tptools .tpt-cl-drawer__actions { flex-wrap: wrap; } #tptools .tpt-cl-menu { min-width: 220px; } #tptools .tpt-cl-menu__item { min-height: 44px; } #tptools .tpt-cl-months { margin-top: 12px; border-top: 0; } #tptools .tpt-cl-month { grid-template-columns: minmax(0, 1fr) 20px; column-gap: 12px; padding: 0; } #tptools .tpt-cl-month__num { display: none; } #tptools .tpt-cl-month > .tpt-cl-ticks, #tptools .tpt-cl-month > .tpt-cl-month__lead { grid-column: 1 / -1; grid-row: auto; } #tptools .tpt-cl-month .tpt-cl-month__h { grid-row: 1; margin: 0; padding: 16px 0; font-size: 16px; line-height: 24px; } #tptools .tpt-cl-month > .tpt-sub__toggle { display: flex; grid-column: 2; grid-row: 1; } #tptools .tpt-cl-month:not(.is-open) > :not(.tpt-cl-month__h, .tpt-sub__toggle) { display: none; } #tptools .tpt-cl-month.is-open { padding-bottom: 16px; } #tptools .tpt-cl-month.is-open > .tpt-cl-month__h { color: var(--tpt-mint); padding-bottom: 8px; } #tptools .tpt-cl-month__lead { margin: 0 0 12px; font-size: 14.5px; line-height: 23px; } #tptools .tpt-cl-ticks { gap: 10px; } #tptools .tpt-cl-ticks li { padding-left: 26px; font-size: 14.5px; line-height: 23px; } #tptools .tpt-cl-ticks li::before { top: 5px; width: 13px; height: 13px; } #tptools .tpt-cl-ticks--2 { grid-template-columns: minmax(0, 1fr); margin-top: 16px; } #tptools .tpt-cl-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; } #tptools .tpt-cl-gcard { padding: 18px; gap: 10px; border-radius: 16px; } #tptools .tpt-cl-gcard__h { font-size: 17px; line-height: 25px; } #tptools .tpt-cl-gcard p, #tptools .tpt-cl-gcard .tpt-cl-ticks li { font-size: 14.5px; line-height: 23px; } #tptools.tpt--checklist .tpt-tips { grid-template-columns: minmax(0, 1fr); gap: 12px; } #tptools.tpt--checklist .tpt-section .tpt-lead + .tpt-tips, #tptools .tpt-cl-after { margin-top: 16px; } #tptools .tpt-cl-print-steps, #tptools .tpt-cl-guide-p { font-size: 14.5px; line-height: 23px; } } /* print / save as PDF: only the printout (A4, black on white), built by checklist.js while printing */ .tpt-cl-printout { display: none; } @media print { @page { size: A4; margin: 14mm 14mm 16mm; } html.tpt-cl-printing, html.tpt-cl-printing body { background: #fff !important; } html.tpt-cl-printing body > *:not(.tpt-cl-printout) { display: none !important; } html.tpt-cl-printing .tpt-cl-printout { display: block !important; color: #000; background: #fff; font: 10pt/1.4 Poppins, Arial, sans-serif; } .tpt-cl-printout h1 { margin: 0 0 4pt; font-size: 20pt; font-weight: 600; color: #000; } .tpt-cl-printout__meta { margin: 0 0 12pt; padding-bottom: 10pt; border-bottom: 1.2pt solid #000; font-size: 9pt; color: #333; } .tpt-cl-printout__group { break-inside: avoid-page; margin: 0 0 14pt; } .tpt-cl-printout h2 { display: flex; align-items: baseline; gap: 8pt; margin: 0 0 4pt; font-size: 12pt; font-weight: 600; color: #000; break-after: avoid; } .tpt-cl-printout h2 small { font-size: 8.5pt; font-weight: 400; color: #444; } .tpt-cl-printout h2 em { margin-left: auto; font-style: normal; font-size: 8.5pt; font-weight: 400; color: #333; } .tpt-cl-printout ul { margin: 0; padding: 0; list-style: none; } .tpt-cl-printout li { display: flex; align-items: flex-start; gap: 8pt; padding: 4.5pt 0; border-bottom: 0.5pt solid #ccc; break-inside: avoid; } .tpt-cl-printout__box { flex: none; width: 9pt; height: 9pt; margin-top: 1.5pt; border: 1pt solid #000; font-size: 8pt; line-height: 8pt; text-align: center; } .tpt-cl-printout__main { flex: 1; display: flex; flex-direction: column; } .tpt-cl-printout li.is-done .tpt-cl-printout__t { text-decoration: line-through; color: #555; } .tpt-cl-printout__sub { font-size: 8.5pt; color: #444; } .tpt-cl-printout__due { flex: none; width: 70pt; text-align: right; font-size: 8.5pt; color: #333; } .tpt-cl-printout__own { flex: none; width: 76pt; text-align: right; font-size: 8.5pt; color: #333; } .tpt-cl-printout__foot { margin-top: 16pt; padding-top: 6pt; border-top: 0.5pt solid #ccc; font-size: 8pt; color: #444; } } /* ============================================================ wedding budget calculator (0.16.0) Figma VsewmJ3gucwNrnvEuLNwCI page 4152:1154 (desktop 4153:451 … 4163:741, phone 4169:825 … 4173:1921). New classes only (.tpt-bc*), or shared classes scoped under .tpt--budget, so no other tool changes. Print layout: .tpt-bc-printout (outside #tptools, built by budget.js only while printing). */ #tptools.tpt--budget .tpt-tool { padding-bottom: 120px; } #tptools .tpt-bc__onboard { margin: 0 0 16px; font-size: 16px; font-weight: 500; line-height: 24px; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-bc-quick { align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } #tptools .tpt-bc-quick__l { margin-right: 2px; font-size: 13px; font-weight: 600; color: var(--tpt-muted); } #tptools .tpt-bc-qchip { display: inline-flex; align-items: center; gap: 8px; height: 41px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: var(--tpt-surface); color: #fff; font-size: 14px; font-weight: 500; } #tptools .tpt-bc-qchip svg { color: var(--tpt-mint); } #tptools .tpt-bc-qchip:hover { border-color: rgba(3, 247, 181, 0.55); background: rgba(3, 247, 181, 0.06); color: #fff; } #tptools .tpt-bc__grid { display: grid; grid-template-columns: minmax(0, 456px) minmax(0, 1fr); gap: 24px; align-items: start; } #tptools .tpt-bc__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; } #tptools .tpt-bc__col[data-tpt-colform] { gap: 0; } #tptools .tpt-bc-start { display: flex; flex-direction: column; gap: 22px; border-bottom: 0; border-radius: 24px 24px 0 0; padding-bottom: 0; } #tptools .tpt-bc-setup { display: flex; flex-direction: column; gap: 22px; border-top: 0; border-radius: 0 0 24px 24px; padding-top: 22px; } #tptools .tpt-bc-start__head { display: flex; align-items: center; gap: 12px; } #tptools .tpt-bc-start__head .tpt-card__title { flex: 1; font-size: 22px; line-height: 33px; } #tptools .tpt-bc-small { font-size: 13px; } #tptools .tpt-bc-curhelp { margin-top: -12px; } #tptools .tpt-bc-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; } #tptools .tpt-bc-field > legend { margin-bottom: 10px; padding: 0; } #tptools .tpt-bc-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #tptools .tpt-bc-hint { font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-select { position: relative; display: block; } #tptools .tpt-bc-select select { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; padding: 0 40px 0 14px; border-radius: 12px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 15px; cursor: pointer; color-scheme: dark; outline: none; } #tptools .tpt-bc-select select:focus-visible { border-color: var(--tpt-mint); box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); } #tptools .tpt-bc-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--tpt-soft); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; } #tptools .tpt-bc-select--sm select { height: 36px; padding-right: 34px; font-size: 13.5px; border-radius: 10px; } #tptools .tpt-bc-select--sm::after { right: 13px; width: 6px; height: 6px; margin-top: -5px; } #tptools .tpt-bc-select--sw select { padding-left: 34px; } #tptools .tpt-bc-select--sw .tpt-bc-sw { position: absolute; left: 14px; top: 50%; margin-top: -5px; pointer-events: none; } #tptools .tpt-bc-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #tptools .tpt-bc-mode__card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--tpt-surface); cursor: pointer; } #tptools .tpt-bc-mode__card input { position: absolute; opacity: 0; pointer-events: none; } #tptools .tpt-bc-mode__card.is-on { border-color: rgba(3, 247, 181, 0.7); background: rgba(3, 247, 181, 0.08); } #tptools .tpt-bc-mode__card:has(input:focus-visible) { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } #tptools .tpt-bc-mode__top { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: #fff; } #tptools .tpt-bc-mode__sub { font-size: 12.5px; line-height: 18px; color: var(--tpt-soft); } #tptools .tpt-bc-radio { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); } #tptools .tpt-bc-mode__card.is-on .tpt-bc-radio, #tptools .tpt-bc-radiorow input:checked + .tpt-bc-radio { border-color: var(--tpt-mint); } #tptools .tpt-bc-mode__card.is-on .tpt-bc-radio::after, #tptools .tpt-bc-radiorow input:checked + .tpt-bc-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tpt-mint); } #tptools .tpt-bc-total-in { position: relative; display: flex; align-items: center; height: 52px; padding: 0 16px; border-radius: 14px; background: var(--tpt-surface); border: 1px solid rgba(3, 247, 181, 0.6); } #tptools .tpt-bc-total-in:focus-within { border-color: var(--tpt-mint); box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); } #tptools .tpt-bc-total-in__sym { padding-right: 10px; margin-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.25); color: var(--tpt-soft); font-size: 17px; line-height: 22px; } #tptools .tpt-bc-total-in input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 18px; outline: none; box-shadow: none; } #tptools .tpt-bc-total-in input::placeholder { color: var(--tpt-muted); opacity: 1; } #tptools .tpt-bc-total-in__hint { flex: none; font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-total-in input:not(:placeholder-shown) + .tpt-bc-total-in__hint { display: none; } #tptools .tpt-bc-total-shown { font-size: 13.5px; font-weight: 500; color: var(--tpt-mint); } #tptools .tpt-bc-types { display: flex; flex-wrap: wrap; gap: 8px; } #tptools .tpt-bc-types .tpt-tab { padding: 7px 13px; font-size: 13.5px; line-height: 20px; background: transparent; color: #fff; } #tptools .tpt-bc-types .tpt-tab[aria-pressed="true"] { background: var(--tpt-mint); color: #04050e; font-weight: 600; } #tptools .tpt-bc-check { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, 0.92); } #tptools .tpt-bc-check input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; } #tptools .tpt-bc-check__box { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, 0.35); display: grid; place-items: center; } #tptools .tpt-bc-check input:checked + .tpt-bc-check__box { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools .tpt-bc-check input:checked + .tpt-bc-check__box::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #04050e; border-width: 0 2px 2px 0; transform: rotate(45deg); } #tptools .tpt-bc-check input:focus-visible + .tpt-bc-check__box { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } #tptools .tpt-bc-fns { display: flex; flex-direction: column; } #tptools .tpt-bc-fn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 51px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } #tptools .tpt-bc-fn__name { min-width: 0; } #tptools .tpt-bc-fn__label { overflow-wrap: anywhere; } #tptools .tpt-bc-fn:not(.is-on) .tpt-bc-fn__label { color: var(--tpt-soft); } #tptools .tpt-bc-fn__info { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--tpt-muted); } #tptools .tpt-bc-fn__info:hover, #tptools .tpt-bc-fn__info[aria-expanded="true"] { color: var(--tpt-mint); } #tptools .tpt-bc-fn > .tpt-bc-step, #tptools .tpt-bc-fn__nog { margin-left: auto; } #tptools .tpt-bc-fn__nog { max-width: 190px; font-size: 12px; line-height: 17px; color: var(--tpt-muted); text-align: right; } #tptools .tpt-bc-fn__desc { flex-basis: 100%; margin: 2px 0 6px; padding: 8px 12px; border-radius: 10px; border-left: 2px solid var(--tpt-mint); background: rgba(3, 247, 181, 0.05); font-size: 13px; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-bc-step { display: inline-flex; align-items: center; height: 36px; padding: 0 4px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); } #tptools .tpt-bc-step:focus-within { border-color: rgba(3, 247, 181, 0.6); } #tptools .tpt-bc-step__b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; } #tptools .tpt-bc-step__b:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } #tptools .tpt-bc-step__in { width: 50px; height: 28px; padding: 0; border: 0; background: none; color: #fff; text-align: center; font: inherit; font-size: 14px; outline: none; box-shadow: none; } #tptools .tpt-bc-step__in::placeholder { color: var(--tpt-muted); font-size: 10px; opacity: 1; } #tptools .tpt-bc-fns__help { margin-top: 2px; } #tptools .tpt-bc-textlink { display: inline-flex; align-items: center; gap: 6px; color: var(--tpt-mint); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: normal; text-align: left; } #tptools .tpt-bc-textlink:hover { color: var(--tpt-mint); text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-bc-textlink:disabled { color: var(--tpt-muted); cursor: default; text-decoration: none; } #tptools .tpt-bc-iconlink { align-self: flex-start; } #tptools .tpt-bc-underline { text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; } #tptools .tpt-bc-muted { color: var(--tpt-soft); font-weight: 500; } #tptools [data-tpt-showall][aria-expanded="true"] svg { transform: rotate(180deg); } #tptools .tpt-bc-field--switch { gap: 4px; } #tptools .tpt-bc-field--switch .tpt-small { padding-left: 46px; } #tptools .tpt-bc-warn { font-size: 13.5px; line-height: 20px; color: #f5b83d; } #tptools .tpt-bc-live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.85); } #tptools .tpt-bc-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tpt-mint); box-shadow: 0 0 0 4px rgba(3, 247, 181, 0.15); } #tptools .tpt-bc-foodslot { display: flex; flex-direction: column; gap: 14px; } #tptools .tpt-bc-start .tpt-bc-foodslot:not(:has(.tpt-bc-foodwrap:not([hidden]))) { display: none; } #tptools .tpt-bc-foodwrap { display: flex; flex-direction: column; gap: 8px; } #tptools .tpt-bc-food__title { font-size: 18px; font-weight: 600; line-height: 27px; color: #fff; } #tptools .tpt-bc-food { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } #tptools .tpt-bc-food__rates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #tptools .tpt-bc-food__none { font-size: 13.5px; color: #f5b83d; } #tptools .tpt-bc-money { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); cursor: text; } #tptools .tpt-bc-money:focus-within { border-color: var(--tpt-mint); box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); } #tptools .tpt-bc-money__l { flex: none; font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-frow__fields > *, #tptools .tpt-bc-food__rates > * { min-width: 0; } #tptools .tpt-bc-money input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: #fff; text-align: right; font: inherit; font-size: 14.5px; outline: none; box-shadow: none; } #tptools .tpt-bc-money input::placeholder { color: var(--tpt-muted); opacity: 1; font-size: 12.5px; } #tptools .tpt-bc-frow { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--tpt-line); } #tptools .tpt-bc-frow__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #tptools .tpt-bc-frow__name { font-size: 15px; font-weight: 600; color: #fff; } #tptools .tpt-bc-frow__g { display: inline-flex; align-items: center; gap: 8px; } #tptools .tpt-bc-frow__gl, #tptools .tpt-bc-frow__ml { font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-frow__menu { display: flex; align-items: center; gap: 10px; } #tptools .tpt-bc-pills { display: inline-flex; gap: 6px; } #tptools .tpt-bc-pill { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; font-weight: 500; color: #fff; } #tptools .tpt-bc-pill[aria-pressed="true"] { background: var(--tpt-mint); border-color: var(--tpt-mint); color: #04050e; } #tptools .tpt-bc-frow__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #tptools .tpt-bc-frow__minlink { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-bc-frow__res { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--tpt-mint); } #tptools .tpt-bc-frow__res::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } #tptools .tpt-bc-frow__res.is-err { color: var(--tpt-error); } #tptools .tpt-bc-gst { margin-top: 6px; font-weight: 500; } #tptools .tpt-bc-gstchips { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; } #tptools .tpt-bc-gstchip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--tpt-surface); text-align: left; white-space: normal; } #tptools .tpt-bc-gstchip[aria-pressed="true"] { border-color: rgba(3, 247, 181, 0.7); background: rgba(3, 247, 181, 0.08); } #tptools .tpt-bc-gstchip__t { font-size: 14px; font-weight: 600; color: #fff; } #tptools .tpt-bc-gstchip[aria-pressed="true"] .tpt-bc-gstchip__t { color: var(--tpt-mint); } #tptools .tpt-bc-gstchip__s { font-size: 11.5px; line-height: 16px; color: var(--tpt-soft); } #tptools .tpt-bc-gstother { max-width: 200px; } /* result card */ #tptools .tpt-bc-result { display: flex; flex-direction: column; gap: 22px; outline: none; } #tptools .tpt-bc-result__top { display: flex; align-items: flex-start; gap: 12px; } #tptools .tpt-bc-example, #tptools .tpt-bc-restitle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } #tptools .tpt-bc-example.is-fading { opacity: 0; transition: opacity .15s; } #tptools .tpt-bc-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(3, 247, 181, 0.12); color: var(--tpt-mint); font-size: 13px; font-weight: 600; } #tptools .tpt-bc-example__line { font-size: 13px; color: var(--tpt-muted); } #tptools .tpt-bc-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-saved svg { width: 12px; height: 12px; stroke: var(--tpt-mint); color: var(--tpt-mint); } #tptools .tpt-bc-seg { flex: none; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tpt-surface); border: 1px solid var(--tpt-line); } #tptools .tpt-bc-seg button { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 20px; color: rgba(255, 255, 255, 0.8); } #tptools .tpt-bc-seg button:hover { color: #fff; } #tptools .tpt-bc-seg button[aria-pressed="true"] { background: var(--tpt-mint); color: #04050e; font-weight: 600; } #tptools .tpt-bc-hero { display: flex; align-items: center; gap: 36px; } #tptools .tpt-bc-donut { position: relative; flex: none; width: 272px; height: 272px; } #tptools .tpt-bc-donut svg { display: block; width: 100%; height: 100%; transition: opacity .2s; } #tptools .tpt-bc-donut svg.is-dim { opacity: .35; } #tptools .tpt-bc-donut__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } #tptools .tpt-bc-donut__v { font-size: 34px; font-weight: 600; line-height: 1.2; color: #fff; white-space: nowrap; } #tptools .tpt-bc-donut__l { font-size: 13px; color: var(--tpt-soft); } #tptools .tpt-bc-nums { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; } #tptools .tpt-bc-pg__l { font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-bc-pg__v { font-size: 64px; font-weight: 600; line-height: 76px; color: #fff; letter-spacing: -1px; font-variant-numeric: tabular-nums; white-space: nowrap; } #tptools .tpt-bc-pg__s { font-size: 13px; color: var(--tpt-muted); } #tptools .tpt-bc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #tptools .tpt-bc-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--tpt-surface); } #tptools .tpt-bc-stat__l { font-size: 12.5px; color: var(--tpt-soft); } #tptools .tpt-bc-stat__v { font-size: 24px; font-weight: 600; color: #fff; } #tptools .tpt-bc-stat__s { font-size: 12px; color: var(--tpt-muted); } #tptools .tpt-bc-healthrow { display: flex; align-items: center; gap: 12px; } #tptools .tpt-bc-healthrow p { flex: 1; font-size: 14px; line-height: 21px; color: var(--tpt-soft); } #tptools .tpt-bc-health { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background-color .3s, color .3s; } #tptools .tpt-bc-health__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } #tptools .tpt-bc-health--ok { background: rgba(3, 247, 181, 0.12); color: var(--tpt-mint); } #tptools .tpt-bc-health--tight { background: rgba(245, 184, 61, 0.14); color: #f5b83d; } #tptools .tpt-bc-health--over { background: rgba(255, 77, 103, 0.14); color: #ff6b81; } #tptools .tpt-bc-health--sm { padding: 3px 10px; font-size: 12px; } #tptools .tpt-bc-estbox { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--tpt-surface); } #tptools .tpt-bc-estbox__l1 { font-size: 14.5px; font-weight: 500; line-height: 22px; color: #fff; } #tptools .tpt-bc-estbox__l2 { font-size: 13.5px; line-height: 21px; color: var(--tpt-soft); } #tptools .tpt-bc-estbox p:empty { display: none; } #tptools .tpt-bc-estbox .tpt-error { margin-top: 0; font-size: 13.5px; } #tptools .tpt-bc-estbox__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } #tptools .tpt-bc-estbox__btns .tpt-btn { height: 40px; font-size: 14px; } #tptools .tpt-bc-estbox__btns .tpt-btn:disabled { opacity: .45; cursor: default; } #tptools .tpt-bc-prinote { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(3, 247, 181, 0.07); border: 1px solid rgba(3, 247, 181, 0.25); } #tptools .tpt-bc-prinote__icon { color: var(--tpt-mint); } #tptools .tpt-bc-prinote p { flex: 1; font-size: 13.5px; font-weight: 500; line-height: 20px; color: #fff; } #tptools .tpt-bc-split { display: flex; flex-direction: column; } #tptools .tpt-bc-srow { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } #tptools .tpt-bc-sw { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; } #tptools .tpt-bc-srow__name { flex: none; width: 210px; font-size: 14px; color: rgba(255, 255, 255, 0.92); } #tptools .tpt-bc-srow--fn .tpt-bc-srow__name { flex: 1; width: auto; display: flex; flex-direction: column; } #tptools .tpt-bc-srow__sub { font-size: 12px; color: var(--tpt-muted); } #tptools .tpt-bc-srow__barw { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } #tptools .tpt-bc-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } #tptools .tpt-bc-bar__fill { display: block; height: 100%; border-radius: 3px; transition: width .5s cubic-bezier(.2, .7, .2, 1); } #tptools .tpt-bc-chg { flex: none; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; } #tptools .tpt-bc-chg.is-up { background: rgba(3, 247, 181, 0.14); color: var(--tpt-mint); } #tptools .tpt-bc-chg.is-down { background: rgba(245, 184, 61, 0.14); color: #f5b83d; } #tptools .tpt-bc-pct { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; width: 52px; font-size: 13px; color: var(--tpt-soft); } #tptools .tpt-bc-pct input { width: 30px; height: 26px; padding: 0 1px 0 2px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--tpt-soft); text-align: right; font: inherit; font-size: 13px; outline: none; box-shadow: none; } #tptools .tpt-bc-pct input:hover { border-color: rgba(255, 255, 255, 0.18); } #tptools .tpt-bc-pct input:focus { border-color: var(--tpt-mint); background: var(--tpt-surface); color: #fff; } #tptools .tpt-bc-srow__pct { flex: none; width: 52px; text-align: right; font-size: 13px; color: var(--tpt-soft); } #tptools .tpt-bc-srow__amt { flex: none; width: 104px; text-align: right; font-size: 14px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; } #tptools .tpt-bc-result.is-paused .tpt-bc-srow__amt, #tptools .tpt-bc-result.is-paused .tpt-bc-pg__v, #tptools .tpt-bc-result.is-paused .tpt-bc-stat__v, #tptools .tpt-bc-result.is-paused .tpt-bc-donut__v { color: var(--tpt-muted); } #tptools .tpt-bc-addcat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--tpt-muted); } #tptools .tpt-bc-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; } #tptools .tpt-bc-total.is-ok p { display: inline-flex; align-items: center; gap: 6px; color: var(--tpt-mint); } #tptools .tpt-bc-total.is-ok p::before { content: "✓"; } #tptools .tpt-bc-total.is-off p { color: #f5b83d; } #tptools .tpt-bc-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; } #tptools .tpt-bc-paused { padding: 10px 14px; border-radius: 12px; background: rgba(245, 184, 61, 0.1); color: #f5b83d; font-size: 13.5px; line-height: 20px; } #tptools .tpt-bc-jewelline { font-size: 13.5px; color: var(--tpt-soft); } #tptools .tpt-bc-result__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } #tptools .tpt-bc-result__foot .tpt-small { flex: 1 1 320px; font-size: 12.5px; } /* what if */ #tptools .tpt-bc-whatif { display: flex; flex-direction: column; gap: 16px; } #tptools .tpt-bc-whatif__head { display: flex; align-items: flex-start; gap: 12px; } #tptools .tpt-bc-whatif__head > div { flex: 1; } #tptools .tpt-bc-whatif__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(3, 247, 181, 0.12); color: var(--tpt-mint); } #tptools .tpt-bc-whatif__body { display: flex; flex-direction: column; gap: 14px; } #tptools .tpt-bc-wi__h { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--tpt-soft); } #tptools .tpt-bc-wi { display: flex; flex-direction: column; gap: 8px; } #tptools .tpt-bc-wi__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #tptools .tpt-bc-wi__label { font-size: 14px; color: #fff; } #tptools .tpt-bc-wi__val { display: inline-flex; gap: 8px; font-size: 14px; color: #fff; } #tptools .tpt-bc-wi__was { color: var(--tpt-muted); font-size: 12.5px; } #tptools .tpt-bc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --tpt-fill: 50%; } #tptools .tpt-bc-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--tpt-mint) var(--tpt-fill), rgba(255, 255, 255, 0.12) var(--tpt-fill)); } #tptools .tpt-bc-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--tpt-mint) var(--tpt-fill), rgba(255, 255, 255, 0.12) var(--tpt-fill)); } #tptools .tpt-bc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--tpt-mint); } #tptools .tpt-bc-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--tpt-mint); } #tptools .tpt-bc-range:focus-visible { outline: 2px solid var(--tpt-mint); outline-offset: 4px; } #tptools .tpt-bc-wi__save { font-size: 13px; font-weight: 500; } #tptools .tpt-bc-wi__save:empty { display: none; } #tptools .tpt-bc-wi__save.is-up { color: var(--tpt-mint); } #tptools .tpt-bc-wi__save.is-up::before { content: "↓ "; } #tptools .tpt-bc-wi__save.is-down { color: #f5b83d; } #tptools .tpt-bc-wi__save.is-muted { color: var(--tpt-muted); font-weight: 400; } #tptools .tpt-bc-whatif__sum { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--tpt-surface); font-size: 14px; font-weight: 500; color: #fff; } #tptools .tpt-bc-whatif__sum svg { color: var(--tpt-mint); } /* priorities */ #tptools .tpt-bc-pri { display: flex; flex-direction: column; gap: 14px; padding: 28px; outline: none; } #tptools .tpt-bc-pri__head { display: flex; align-items: flex-start; gap: 12px; } #tptools .tpt-bc-pri__head > div { flex: 1; display: flex; flex-direction: column; gap: 4px; } #tptools .tpt-bc-pri__head .tpt-bc-textlink { margin-top: 26px; font-weight: 500; } #tptools .tpt-bc-pri__gl { margin-top: 4px; } #tptools .tpt-bc-pri__gl span { color: var(--tpt-muted); font-weight: 400; } #tptools .tpt-bc-pcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #tptools .tpt-bc-pcard { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 99px; padding: 15px; border-radius: 16px; background: var(--tpt-surface); border: 1px solid var(--tpt-line); text-align: left; white-space: normal; transition: border-color .15s, background-color .15s; } #tptools .tpt-bc-pcard:hover { border-color: rgba(255, 255, 255, 0.24); background: var(--tpt-surface); } #tptools .tpt-bc-pcard__top { display: flex; align-items: center; justify-content: space-between; } #tptools .tpt-bc-pcard__tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; } #tptools .tpt-bc-pcard__ring { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.3); display: grid; place-items: center; } #tptools .tpt-bc-pcard__name { font-size: 13.5px; line-height: 19px; color: #fff; } #tptools .tpt-bc-pcard__mark { font-size: 12px; font-weight: 600; } #tptools .tpt-bc-pcard__mark:empty { display: none; } #tptools [data-tpt-pri-more] .tpt-bc-pcard.is-on { border-color: rgba(3, 247, 181, 0.6); background: rgba(3, 247, 181, 0.08); } #tptools [data-tpt-pri-more] .tpt-bc-pcard.is-on .tpt-bc-pcard__ring { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools [data-tpt-pri-more] .tpt-bc-pcard.is-on .tpt-bc-pcard__ring::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #04050e; border-width: 0 2px 2px 0; transform: rotate(45deg); } #tptools [data-tpt-pri-more] .tpt-bc-pcard__mark { color: var(--tpt-mint); } #tptools [data-tpt-pri-less] .tpt-bc-pcard.is-on { border-color: rgba(245, 184, 61, 0.55); background: rgba(245, 184, 61, 0.08); } #tptools [data-tpt-pri-less] .tpt-bc-pcard.is-on .tpt-bc-pcard__ring { background: #f5b83d; border-color: #f5b83d; } #tptools [data-tpt-pri-less] .tpt-bc-pcard.is-on .tpt-bc-pcard__ring::after { content: ""; width: 9px; height: 2px; background: #04050e; border-radius: 1px; } #tptools [data-tpt-pri-less] .tpt-bc-pcard__mark { color: #f5b83d; } #tptools .tpt-bc-pcard.is-off { opacity: .4; cursor: default; } #tptools .tpt-bc-pri__less { display: flex; flex-direction: column; gap: 14px; } #tptools .tpt-bc-pri__lesstoggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--tpt-line); background: var(--tpt-surface); font-size: 14px; font-weight: 500; color: #fff; text-align: left; white-space: normal; } /* notices, shared banner, summary bar */ #tptools .tpt-notice--warn .tpt-notice__icon, #tptools .tpt-notice--warn .tpt-notice__icon::after { border-color: #f5b83d; } #tptools .tpt-bc-shared { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(3, 247, 181, 0.35); background: rgba(3, 247, 181, 0.06); } #tptools .tpt-bc-shared__text { flex: 1 1 320px; font-size: 15px; line-height: 23px; color: #fff; } #tptools .tpt-bc-shared__actions { display: flex; flex-wrap: wrap; gap: 10px; } #tptools .tpt-bc-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 24px; padding: 16px 24px; border-radius: 18px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-bc-summary__icon { color: var(--tpt-mint); } #tptools .tpt-bc-summary__text { font-size: 15px; font-weight: 500; line-height: 23px; color: #fff; } #tptools .tpt-bc-summary__links { margin-left: auto; display: inline-flex; gap: 16px; } #tptools .tpt-bc-summary__links .tpt-link { text-decoration: none; font-size: 13.5px; } #tptools .tpt-bc-summary__edit { color: #fff; } /* tracking list */ #tptools .tpt-bc__grid + .tpt-bc-track { margin-top: 24px; } #tptools .tpt-bc-track { outline: none; } #tptools .tpt-bc-track__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } #tptools .tpt-bc-track__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } #tptools .tpt-bc-track__title .tpt-card__title { font-size: 22px; } #tptools .tpt-bc-track__count { font-size: 13px; color: var(--tpt-muted); } #tptools .tpt-bc-actions { display: flex; flex-wrap: wrap; gap: 8px; } #tptools .tpt-bc-actions .tpt-btn { height: 40px; padding: 0 18px; font-size: 14px; } #tptools .tpt-bc-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 20px; } #tptools .tpt-bc-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--tpt-surface); } #tptools .tpt-bc-tile__l { font-size: 12px; color: var(--tpt-soft); } #tptools .tpt-bc-tile__v { font-size: 19px; font-weight: 600; line-height: 27px; color: #fff; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } #tptools .tpt-bc-tile__s { font-size: 11.5px; line-height: 16px; color: var(--tpt-muted); } #tptools .tpt-bc-tile.is-over .tpt-bc-tile__s { color: #f5b83d; } #tptools .tpt-bc-jewelplus { margin-top: 10px; font-size: 13px; color: var(--tpt-muted); } #tptools .tpt-bc-progress { margin-top: 20px; } #tptools .tpt-bc-progress__line { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: #fff; } #tptools .tpt-bc-progress__pct { color: var(--tpt-mint); font-weight: 500; font-size: 12.5px; } #tptools .tpt-bc-pbar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } #tptools .tpt-bc-pbar > span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--tpt-mint); transition: width .4s; } #tptools .tpt-bc-whostrip { margin-top: 18px; } #tptools .tpt-bc-wholist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 8px; } #tptools .tpt-bc-wtile { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--tpt-surface); } #tptools .tpt-bc-wtile > span:last-child { display: flex; flex-direction: column; } #tptools .tpt-bc-wtile .tpt-bc-tile__v { font-size: 16px; line-height: 22px; } #tptools .tpt-bc-wdot { flex: none; display: inline-block; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: #85868b; } #tptools .tpt-bc-wdot--bride { background: #ff9ec7; } #tptools .tpt-bc-wdot--groom { background: #7cc8ff; } #tptools .tpt-bc-wdot--couple { background: #03f7b5; } #tptools .tpt-bc-wdot--shared { background: #b79cff; } #tptools .tpt-bc-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; } #tptools .tpt-bc-switches .tpt-switch { font-size: 13.5px; } #tptools .tpt-bc-switches__hide { margin-left: auto; } #tptools .tpt-bc-whohelp { margin-top: 6px; } #tptools .tpt-bc-track:has([data-tpt-sw-who][aria-checked="true"]) .tpt-bc-whohelp { display: none; } #tptools .tpt-bc-viewrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } #tptools .tpt-bc-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--tpt-line); } #tptools .tpt-bc-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--tpt-surface); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85); } #tptools .tpt-bc-fchip[aria-pressed="true"] { border-color: rgba(3, 247, 181, 0.6); background: rgba(3, 247, 181, 0.1); color: #fff; } #tptools .tpt-bc-fchip__dot { width: 6px; height: 6px; border-radius: 50%; } #tptools .tpt-bc-fchip__dot.is-soon { background: var(--tpt-mint); } #tptools .tpt-bc-fchip__dot.is-over { background: #f5b83d; } #tptools .tpt-bc-overbanner { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(245, 184, 61, 0.4); background: rgba(245, 184, 61, 0.08); font-size: 14px; line-height: 21px; color: #fff; } #tptools .tpt-bc-overbanner__icon { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f5b83d; color: #04050e; font-size: 13px; font-weight: 700; } #tptools .tpt-bc-alldone { margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: rgba(3, 247, 181, 0.1); color: var(--tpt-mint); font-weight: 600; } #tptools .tpt-bc-table { --tpt-cols: minmax(0, 2.1fr) 148px 104px 96px 92px 104px 118px 64px; margin-top: 16px; } #tptools .tpt-bc-table.has-who { --tpt-cols: minmax(0, 1.9fr) 140px 98px 88px 86px 98px 112px 112px 64px; } #tptools .tpt-bc-thead { display: grid; grid-template-columns: var(--tpt-cols); gap: 12px; padding: 0 12px 10px; border-bottom: 1px solid var(--tpt-line); } #tptools .tpt-bc-th { font-size: 12px; font-weight: 500; color: var(--tpt-muted); } #tptools .tpt-bc-th--2, #tptools .tpt-bc-th--3, #tptools .tpt-bc-th--4, #tptools .tpt-bc-th--5 { text-align: right; } #tptools .tpt-bc-group { margin-top: 8px; border-radius: 14px; } #tptools .tpt-bc-chead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); } #tptools .tpt-bc-chead__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; text-align: left; white-space: normal; } #tptools .tpt-bc-chead__toggle > svg { color: var(--tpt-soft); transition: transform .2s; } #tptools .tpt-bc-group.is-open .tpt-bc-chead__toggle > svg { transform: rotate(90deg); } #tptools .tpt-bc-chead__name { font-size: 15px; font-weight: 600; color: #fff; } #tptools .tpt-bc-chead__pct { font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-chead__nums { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 16px; font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-chead__nums b { color: #fff; font-weight: 600; } #tptools .tpt-bc-status { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; color: #fff; } #tptools .tpt-bc-status.is-ok { color: var(--tpt-mint); } #tptools .tpt-bc-status.is-over { color: #f5b83d; } #tptools .tpt-bc-status__sub { font-size: 11.5px; font-weight: 400; color: var(--tpt-muted); } #tptools .tpt-bc-gbody { padding: 4px 0 6px; } #tptools .tpt-bc-sughelp { padding: 6px 12px; font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-line { display: grid; grid-template-columns: var(--tpt-cols); align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 13.5px; } #tptools .tpt-bc-line.is-over { background: rgba(245, 184, 61, 0.04); } #tptools .tpt-bc-line__item { min-width: 0; display: flex; flex-direction: column; gap: 2px; } #tptools .tpt-bc-line__name { color: #fff; font-size: 14px; text-align: left; white-space: normal; overflow-wrap: anywhere; } #tptools .tpt-bc-line__name:hover { color: var(--tpt-mint); } #tptools .tpt-bc-line__maths { font-size: 11.5px; color: var(--tpt-muted); } #tptools .tpt-bc-fnchip { display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); font-size: 11.5px; color: var(--tpt-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #tptools .tpt-bc-line__c { text-align: right; color: rgba(255, 255, 255, 0.9); font-variant-numeric: tabular-nums; } #tptools .tpt-bc-c-act, #tptools .tpt-bc-c-paid { color: var(--tpt-soft); } #tptools .tpt-bc-c-bal { font-weight: 600; color: #fff; } #tptools .tpt-bc-c-bal.is-full { color: var(--tpt-mint); font-weight: 500; } #tptools .tpt-bc-c-est.is-sug { color: var(--tpt-muted); font-style: italic; } #tptools .tpt-bc-c-due, #tptools .tpt-bc-c-who { text-align: left; } #tptools .tpt-bc-due { display: inline-flex; align-items: flex-start; gap: 4px; font-size: 12.5px; color: var(--tpt-soft); } #tptools .tpt-bc-due.is-over { color: #f5b83d; } #tptools .tpt-bc-due svg { margin-top: 2px; } #tptools .tpt-bc-addest { color: var(--tpt-mint); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-bc-who { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 11.5px; color: var(--tpt-soft); white-space: nowrap; } #tptools .tpt-bc-who .tpt-bc-wdot { margin-top: 0; width: 6px; height: 6px; } #tptools .tpt-bc-who--bride { background: rgba(255, 158, 199, 0.12); color: #ff9ec7; } #tptools .tpt-bc-who--groom { background: rgba(124, 200, 255, 0.12); color: #7cc8ff; } #tptools .tpt-bc-who--couple { background: rgba(3, 247, 181, 0.12); color: var(--tpt-mint); } #tptools .tpt-bc-who--shared { background: rgba(183, 156, 255, 0.12); color: #b79cff; } #tptools .tpt-bc-line__act { display: flex; justify-content: flex-end; gap: 2px; } #tptools .tpt-bc-iconbtn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--tpt-soft); } #tptools .tpt-bc-iconbtn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } #tptools .tpt-bc-iconbtn.has-note { color: #fff; } #tptools .tpt-bc-none, #tptools .tpt-bc-empty { padding: 12px; font-size: 13.5px; color: var(--tpt-soft); } #tptools .tpt-bc-addline { display: inline-flex; align-items: center; gap: 6px; margin: 8px 12px 4px; color: var(--tpt-mint); font-size: 13.5px; font-weight: 600; } #tptools .tpt-bc-addline:hover { color: var(--tpt-mint); text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-bc-jewel { margin-top: 20px; padding: 18px; border-radius: 16px; border: 1px solid var(--tpt-line); background: rgba(255, 255, 255, 0.02); } #tptools .tpt-bc-jewel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #tptools .tpt-bc-jewel__title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #fff; } #tptools .tpt-bc-jewel .tpt-small { margin-top: 6px; } #tptools .tpt-bc-table--jewel { margin-top: 8px; } #tptools .tpt-bc-jewel__total { margin-top: 8px; font-size: 13px; color: var(--tpt-soft); } #tptools .tpt-bc-jewel__total:empty { display: none; } #tptools .tpt-bc-track__foot { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; } #tptools .tpt-bc-track__foot .tpt-link { align-self: flex-start; margin-top: 8px; } #tptools .tpt-bc-track.is-paused [data-tpt-out] { opacity: .45; } #tptools .tpt-bc-minibar { display: none; } /* overlays: drawer, dialogs, share sheet, menu, toast */ html.tpt-bc-locked { overflow: hidden; } #tptools .tpt-bc-drawer { top: 0; bottom: 0; right: 0; width: 460px; border-radius: 0; border: 0; border-left: 1px solid var(--tpt-line); padding: 28px; overflow-y: auto; } #tptools .tpt-bc-drawer .tpt-panel__title { font-size: 22px; line-height: 30px; } #tptools .tpt-bc-drawer__form { display: flex; flex-direction: column; gap: 16px; } #tptools .tpt-bc-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; } #tptools .tpt-bc-dfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #tptools .tpt-bc-dfield > label, #tptools .tpt-bc-dlabel { font-size: 14px; font-weight: 600; color: #fff; } #tptools .tpt-bc-dfield > input, #tptools .tpt-bc-dfield > textarea, #tptools .tpt-bc-money2 { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 15px; outline: none; color-scheme: dark; } #tptools .tpt-bc-dfield > textarea { height: auto; min-height: 84px; padding: 12px 14px; line-height: 22px; resize: vertical; } #tptools .tpt-bc-dfield > textarea::placeholder, #tptools .tpt-bc-dfield input::placeholder { color: var(--tpt-muted); opacity: 1; } #tptools .tpt-bc-dfield > :is(input, textarea):focus, #tptools .tpt-bc-money2:focus-within { border-color: var(--tpt-mint); box-shadow: 0 0 0 3px rgba(3, 247, 181, 0.16); } #tptools .tpt-bc-money2 { display: flex; align-items: center; gap: 4px; } #tptools .tpt-bc-money2 > span { color: var(--tpt-soft); } #tptools .tpt-bc-money2 input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: #fff; font: inherit; outline: none; box-shadow: none; } #tptools .tpt-bc-drawer .tpt-bc-select select { height: 48px; } #tptools .tpt-bc-drawer .tpt-bc-drawer__form > .tpt-small { margin-top: -10px; } #tptools .tpt-bc-dfield__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; } #tptools .tpt-bc-hist { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-whochips { display: flex; flex-wrap: wrap; gap: 8px; } #tptools .tpt-bc-whochip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; font-weight: 500; color: #fff; } #tptools .tpt-bc-whochip .tpt-bc-wdot { margin-top: 0; } #tptools .tpt-bc-whochip[aria-pressed="true"] { border-color: rgba(255, 158, 199, 0.6); background: rgba(255, 158, 199, 0.12); color: #ff9ec7; } #tptools .tpt-bc-drawer__actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; } #tptools .tpt-bc-drawer__actions .tpt-btn { min-width: 70px; } #tptools .tpt-bc-del { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #ff6b81; font-size: 14px; font-weight: 500; } #tptools .tpt-bc-del:hover { color: #ff6b81; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-bc-addfn__list { flex: 1; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; min-height: 0; } #tptools .tpt-bc-addfn__group { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; } #tptools .tpt-bc-addfn__h { margin-bottom: 2px; padding: 0; font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--tpt-muted); } #tptools .tpt-bc-dialog { position: fixed; z-index: 9997; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px; background: var(--tpt-card); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } #tptools .tpt-bc-dialog__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 107, 129, 0.14); color: #ff6b81; } #tptools .tpt-bc-dialog__head { display: flex; align-items: flex-start; gap: 16px; } #tptools .tpt-bc-dialog__title { flex: 1; font-size: 18px; font-weight: 600; line-height: 26px; color: #fff; } #tptools .tpt-bc-dialog__body { font-size: 14px; line-height: 21px; color: var(--tpt-soft); } #tptools .tpt-bc-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; } #tptools .tpt-bc-dialog__actions .tpt-btn { height: 40px; font-size: 14px; } #tptools .tpt-bc-btn--danger { background: #ff6b81; color: #04050e; border-color: #ff6b81; } #tptools .tpt-bc-btn--danger:hover { background: #ff8597; color: #04050e; } #tptools .tpt-bc-addlist { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; } #tptools .tpt-bc-radios { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; } #tptools .tpt-bc-radiorow { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 14.5px; font-weight: 500; color: #fff; cursor: pointer; } #tptools .tpt-bc-radiorow input { position: absolute; opacity: 0; } #tptools .tpt-bc-radiorow:has(input:checked) { border-color: rgba(3, 247, 181, 0.6); background: rgba(3, 247, 181, 0.06); } #tptools .tpt-bc-radiorow input:focus-visible + .tpt-bc-radio { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } #tptools .tpt-bc-center { text-align: center; } #tptools .tpt-bc-sharesheet { position: fixed; z-index: 9997; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(728px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; display: grid; grid-template-columns: 374px minmax(0, 1fr); gap: 24px; padding: 24px; border-radius: 24px; background: #0e1018; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } #tptools .tpt-bc-sharesheet > .tpt-panel__handle { display: none; } #tptools .tpt-bc-rc { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 16px; border-radius: 16px; background: #f7f5ef; color: #14151a; } #tptools .tpt-bc-rc__top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: 1px; color: #55565c; } #tptools .tpt-bc-rc__top span + span { font-weight: 400; letter-spacing: 0; } #tptools .tpt-bc-rc__total { font-size: 30px; font-weight: 600; line-height: 38px; color: #14151a; } #tptools .tpt-bc-rc__meta { margin-top: -6px; font-size: 12.5px; color: #55565c; } #tptools .tpt-bc-rc__bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; } #tptools .tpt-bc-rc__bar span { height: 100%; } #tptools .tpt-bc-rc__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 12px; border-bottom: 1px dashed #c9c6bc; } #tptools .tpt-bc-rc__tiles > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: #ebe8df; } #tptools .tpt-bc-rc__tiles p { font-size: 11.5px; color: #55565c; } #tptools .tpt-bc-rc__tiles b { font-size: 18px; color: #14151a; } #tptools .tpt-bc-rc__tiles small { font-size: 11px; color: #55565c; } #tptools .tpt-bc-rc__h { font-size: 12px; font-weight: 600; color: #3a3b40; } #tptools .tpt-bc-rc__list { display: flex; flex-direction: column; gap: 6px; } #tptools .tpt-bc-rc__list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #14151a; } #tptools .tpt-bc-rc__cat { flex: 1; } #tptools .tpt-bc-rc__pct { color: #55565c; } #tptools .tpt-bc-rc__list b { width: 82px; text-align: right; } #tptools .tpt-bc-rc__more { font-size: 11.5px; color: #55565c; padding-bottom: 10px; border-bottom: 1px dashed #c9c6bc; } #tptools .tpt-bc-rc__fns { font-size: 12.5px; line-height: 19px; color: #14151a; padding-bottom: 10px; border-bottom: 1px dashed #c9c6bc; } #tptools .tpt-bc-rc__url { text-align: center; font-size: 11px; color: #55565c; overflow-wrap: anywhere; } #tptools .tpt-bc-sharesheet__side { display: flex; flex-direction: column; justify-content: center; gap: 12px; } #tptools .tpt-bc-sharesheet__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; } #tptools .tpt-bc-sharesheet__head > div { flex: 1; } #tptools .tpt-bc-sharesheet__btns { display: flex; flex-direction: column; gap: 10px; } #tptools .tpt-bc-sharesheet__btns .tpt-btn { width: 100%; height: 44px; font-size: 14.5px; } #tptools .tpt-bc-menu { position: fixed; z-index: 9998; min-width: 220px; padding: 6px; border-radius: 14px; background: #10121d; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } #tptools .tpt-bc-menu__item { display: flex; align-items: center; width: 100%; padding: 9px 12px; border-radius: 9px; font-size: 14px; color: #fff; text-align: left; } #tptools .tpt-bc-menu__item:is(:hover, :focus) { background: rgba(255, 255, 255, 0.07); color: #fff; } #tptools .tpt-bc-menu__item.is-danger, #tptools .tpt-bc-menu__item.is-danger:is(:hover, :focus) { color: #ff6b81; } #tptools.tpt--budget .tpt-toast { display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); white-space: normal; } /* 0.16.2: long toasts on phones used only half the screen (left: 50%) and wrapped into a round bubble */ #tptools.tpt--budget .tpt-toast, #tptools.tpt--checklist .tpt-toast { width: max-content; } @media (max-width: 600px) { #tptools.tpt--budget .tpt-toast, #tptools.tpt--checklist .tpt-toast { border-radius: 16px; padding: 12px 16px; line-height: 1.4; } } #tptools.tpt--budget .tpt-toast.is-on.has-action { pointer-events: auto; } #tptools .tpt-bc-toast__undo { color: #04050e; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* guide */ #tptools .tpt-bc-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } #tptools .tpt-bc-steps .tpt-step { padding: 24px; } #tptools .tpt-bc-steps .tpt-step p { font-size: 14.5px; line-height: 23px; } #tptools .tpt-bc-prose { max-width: 960px; margin-top: 32px; } #tptools .tpt-bc-prose > * + * { margin-top: 16px; } #tptools .tpt-bc-prose p { font-size: 16px; line-height: 27px; color: var(--tpt-soft); } #tptools .tpt-bc-prose strong { color: #fff; font-weight: 600; } #tptools .tpt-bc-bullets { display: flex; flex-direction: column; gap: 10px; padding-left: 0; list-style: none; } #tptools .tpt-bc-bullets li { position: relative; padding-left: 22px; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.82); } #tptools .tpt-bc-bullets li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--tpt-mint); } #tptools .tpt-bc-bullets--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; } #tptools .tpt-bc-numbers { display: grid; gap: 10px; padding-left: 22px; list-style: decimal; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.85); } #tptools .tpt-bc-h3 { margin-top: 28px !important; font-size: 21px; font-weight: 600; line-height: 29px; color: #fff; } #tptools.tpt--budget .tpt-inline-link { color: var(--tpt-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-bc-tablewrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--tpt-line); } #tptools .tpt-bc-gtable { width: 100%; border-collapse: collapse; background: var(--tpt-surface); font-size: 15px; line-height: 23px; margin: 0; } #tptools .tpt-bc-gtable th, #tptools .tpt-bc-gtable td { padding: 14px 16px; border: 0; border-top: 1px solid var(--tpt-line); background: none; text-align: left; vertical-align: top; color: rgba(255, 255, 255, 0.85); } #tptools .tpt-bc-gtable thead th { border-top: 0; background: var(--tpt-card); font-size: 13px; font-weight: 600; color: var(--tpt-muted); white-space: nowrap; } #tptools .tpt-bc-gtable tbody th { font-weight: 600; color: #fff; } #tptools .tpt-bc-gtable--num td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } #tptools .tpt-bc-gtable--num thead th:not(:first-child) { text-align: right; } #tptools .tpt-bc-gtable__total > * { font-weight: 700 !important; color: #fff !important; } #tptools .tpt-bc-caption { caption-side: top; padding: 12px 16px; text-align: left; font-size: 13px; color: var(--tpt-muted); background: var(--tpt-card); } @media (prefers-reduced-motion: reduce) { #tptools .tpt-bc-bar__fill, #tptools .tpt-bc-pbar > span, #tptools .tpt-bc-chead__toggle > svg, #tptools .tpt-bc-health, #tptools .tpt-bc-donut svg, #tptools .tpt-bc-example.is-fading { transition: none; } } /* tablets */ @media (max-width: 1199px) and (min-width: 768px) { #tptools .tpt-bc__grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); } #tptools .tpt-bc-hero { flex-direction: column; align-items: stretch; } #tptools .tpt-bc-donut { align-self: center; } #tptools .tpt-bc-srow__name { width: 170px; } #tptools .tpt-bc-pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } #tptools .tpt-bc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } #tptools .tpt-bc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } #tptools .tpt-bc-table, #tptools .tpt-bc-table.has-who { overflow-x: auto; } #tptools .tpt-bc-table .tpt-bc-thead, #tptools .tpt-bc-table .tpt-bc-line, #tptools .tpt-bc-table .tpt-bc-chead { min-width: 920px; } } @media (max-width: 1023px) and (min-width: 768px) { #tptools .tpt-bc__grid { grid-template-columns: minmax(0, 1fr); } } /* phones (Figma 4169:825 … 4173:1921) */ @media (max-width: 767px) { #tptools .tpt-bc__onboard { font-size: 15px; line-height: 23px; } #tptools .tpt-bc-quick { flex-wrap: nowrap; } #tptools .tpt-bc-quick__l { display: none; } #tptools .tpt-bc-qchip { height: 40px; padding: 0 14px; font-size: 13.5px; } #tptools .tpt-bc__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } #tptools .tpt-bc__col, #tptools .tpt-bc__col[data-tpt-colform] { gap: 16px; } #tptools .tpt-bc-start, #tptools .tpt-bc-setup { border: 1px solid var(--tpt-line); border-radius: 22px; padding: 20px 18px; gap: 18px; } #tptools .tpt-bc-start__head .tpt-card__title { font-size: 19px; } #tptools .tpt-bc-mode { gap: 8px; } #tptools .tpt-bc-mode__card { padding: 10px 12px; border-radius: 999px; align-items: center; } #tptools .tpt-bc-mode__card .tpt-bc-radio, #tptools .tpt-bc-mode__sub { display: none; } #tptools .tpt-bc-mode__card.is-on { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools .tpt-bc-mode__card.is-on .tpt-bc-mode__top { color: #04050e; } #tptools .tpt-bc-mode__top { justify-content: center; font-size: 13.5px; } #tptools .tpt-bc-total-in__hint { display: none; } #tptools .tpt-bc-types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding-inline: 18px; } #tptools .tpt-bc-types::-webkit-scrollbar { display: none; } #tptools .tpt-bc-types .tpt-tab { flex: none; min-height: 40px; } #tptools .tpt-bc-fn { min-height: 52px; } #tptools .tpt-bc-fn__nog { max-width: 140px; } #tptools .tpt-bc-step { height: 40px; } #tptools .tpt-bc-step__b { width: 32px; height: 32px; } #tptools .tpt-bc-step__in { width: 44px; } #tptools .tpt-bc-textlink { min-height: 36px; } #tptools .tpt-bc-frow__head { flex-wrap: wrap; } #tptools .tpt-bc-gstchips { grid-template-columns: 1fr 1fr; } #tptools .tpt-bc-result, #tptools .tpt-bc-whatif, #tptools .tpt-bc-pri { padding: 20px 18px; gap: 16px; border-radius: 22px; } #tptools .tpt-bc-result__top { flex-direction: column; align-items: stretch; } #tptools .tpt-bc-seg { align-self: stretch; } #tptools .tpt-bc-seg button { flex: 1; min-height: 40px; } #tptools .tpt-bc-hero { flex-direction: column; align-items: stretch; gap: 18px; } #tptools .tpt-bc-donut { align-self: center; width: 220px; height: 220px; } #tptools .tpt-bc-donut__v { font-size: 28px; } #tptools .tpt-bc-pg { text-align: center; } #tptools .tpt-bc-pg__v { font-size: 48px; line-height: 58px; } #tptools .tpt-bc-stat__v { font-size: 20px; } #tptools .tpt-bc-healthrow { flex-direction: column; align-items: flex-start; gap: 8px; } #tptools .tpt-bc-srow { flex-wrap: wrap; gap: 4px 10px; padding: 8px 0; } #tptools .tpt-bc-srow__name { flex: 1; width: auto; min-width: 0; } #tptools .tpt-bc-srow__barw { display: none; } #tptools .tpt-bc-srow__amt { width: 92px; font-size: 13.5px; } #tptools .tpt-bc-pct input { height: 32px; } #tptools .tpt-bc-pcards { grid-template-columns: 1fr 1fr; gap: 8px; } #tptools .tpt-bc-pcard { min-height: 92px; padding: 12px; } #tptools .tpt-bc-pri__head { flex-direction: column; } #tptools .tpt-bc-pri__head .tpt-bc-textlink { margin-top: 0; } #tptools .tpt-bc-pri__less.is-closed > :not(.tpt-bc-pri__lesstoggle) { display: none; } #tptools .tpt-bc-pri__less:not(.is-closed) .tpt-bc-pri__lesstoggle { display: none; } #tptools .tpt-bc-summary { padding: 14px 16px; } #tptools .tpt-bc-summary__text { flex: 1 1 calc(100% - 40px); font-size: 14px; line-height: 21px; } #tptools .tpt-bc-track { padding: 20px 16px; border-radius: 22px; } #tptools .tpt-bc-track__title .tpt-card__title { font-size: 20px; } #tptools .tpt-bc-track__title { width: 100%; justify-content: space-between; } #tptools .tpt-bc-tiles { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } #tptools .tpt-bc-tile:nth-child(2), #tptools .tpt-bc-tile:nth-child(3) { display: none; } #tptools .tpt-bc-wholist { grid-template-columns: 1fr 1fr; } #tptools .tpt-bc-switches { flex-direction: column; align-items: stretch; gap: 12px; } #tptools .tpt-bc-switches .tpt-switch { flex-direction: row-reverse; justify-content: space-between; align-self: stretch; min-height: 32px; } #tptools .tpt-bc-switches__hide { margin-left: 0; } #tptools .tpt-bc-viewrow { flex-wrap: nowrap; margin-inline: -16px; padding-inline: 16px; } #tptools .tpt-bc-viewrow .tpt-bc-seg { flex: none; align-self: auto; } #tptools .tpt-bc-viewrow .tpt-bc-seg button { flex: none; min-height: 36px; } #tptools .tpt-bc-fchip { flex: none; min-height: 40px; } #tptools .tpt-bc-chead { align-items: flex-start; padding: 12px; } #tptools .tpt-bc-chead__nums { flex-basis: 100%; justify-content: space-between; padding-left: 26px; } #tptools .tpt-bc-line { position: relative; display: block; padding: 14px 12px; } #tptools .tpt-bc-line > [role="cell"]:not(.tpt-bc-line__item):not(.tpt-bc-line__act) { display: none; } #tptools .tpt-bc-line__item { padding-right: 84px; } #tptools .tpt-bc-line__name { font-size: 14.5px; } #tptools .tpt-bc-line__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } #tptools .tpt-bc-line__act { position: absolute; top: 8px; right: 6px; } #tptools .tpt-bc-line__act .tpt-bc-iconbtn { width: 40px; height: 40px; } #tptools .tpt-bc-line__ph { margin-top: 8px; } #tptools .tpt-bc-line__phtop { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; font-variant-numeric: tabular-nums; } #tptools .tpt-bc-line__phest { font-size: 13px; color: var(--tpt-soft); } #tptools .tpt-bc-line__phbal { text-align: right; font-size: 15px; font-weight: 600; color: #fff; } #tptools .tpt-bc-line__phbal.is-full { color: var(--tpt-mint); } #tptools .tpt-bc-line__phbl { grid-column: 2; text-align: right; font-size: 11px; color: var(--tpt-muted); } #tptools .tpt-bc-line__phdue { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; color: var(--tpt-soft); } #tptools .tpt-bc-line__phdue.is-over { color: #f5b83d; } #tptools .tpt-bc-line__det { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); font-size: 13px; color: #fff; } #tptools .tpt-bc-line__det > span { display: flex; flex-direction: column; } #tptools .tpt-bc-addline { min-height: 40px; } #tptools .tpt-bc-jewel { padding: 14px; } #tptools .tpt-bc-actions--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } #tptools .tpt-bc-actions--grid .tpt-btn { width: 100%; height: 44px; padding: 0 10px; font-size: 13.5px; } #tptools .tpt-bc-minibar { position: fixed; z-index: 9989; left: 0; right: 0; top: var(--tpt-top, 72px); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; background: rgba(8, 9, 17, 0.96); border-bottom: 1px solid var(--tpt-line); } #tptools .tpt-bc-minibar[hidden] { display: none !important; } #tptools .tpt-bc-minibar > span:not(.tpt-bc-health) { display: flex; flex-direction: column; } #tptools .tpt-bc-minibar b { font-size: 13.5px; color: #fff; } #tptools .tpt-bc-minibar small { font-size: 10.5px; color: var(--tpt-muted); } #tptools .tpt-bc-drawer { top: auto; left: 0; width: auto; max-height: 92vh; border-radius: 24px 24px 0 0; border-left: 0; border-top: 1px solid var(--tpt-line); padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); } #tptools .tpt-bc-drawer__actions .tpt-btn[type="submit"] { flex: 1; } #tptools .tpt-bc-del { width: 48px; height: 48px; justify-content: center; border-radius: 50%; background: rgba(255, 107, 129, 0.14); } #tptools .tpt-bc-dialog { top: auto; bottom: 0; transform: translate(-50%, 0); width: 100vw; max-width: none; border-radius: 24px 24px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } #tptools .tpt-bc-sharesheet { top: auto; bottom: 0; transform: translate(-50%, 0); width: 100vw; max-height: 94vh; display: flex; flex-direction: column; gap: 14px; padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; } #tptools .tpt-bc-sharesheet > .tpt-panel__handle { display: flex; justify-content: center; } #tptools .tpt-bc-sharesheet > .tpt-panel__handle span { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); } #tptools .tpt-bc-sharesheet__side { display: contents; } #tptools .tpt-bc-sharesheet__head { order: -1; margin: 0; } #tptools .tpt-bc-sharesheet__head .tpt-small { display: none; } #tptools .tpt-bc-rc { order: 1; } #tptools .tpt-bc-sharesheet__btns { order: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } #tptools .tpt-bc-sharesheet__btns .tpt-btn { flex-direction: column; height: 64px; gap: 4px; padding: 0 6px; font-size: 12.5px; border-radius: 16px; } #tptools .tpt-bc-rc__total { font-size: 26px; } #tptools .tpt-bc-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; } #tptools .tpt-bc-steps .tpt-step { padding: 16px 18px; } #tptools .tpt-bc-prose { margin-top: 12px; } #tptools .tpt-bc-prose > * + * { margin-top: 12px; } #tptools .tpt-bc-prose p, #tptools .tpt-bc-bullets li, #tptools .tpt-bc-numbers { font-size: 14.5px; line-height: 23px; } #tptools .tpt-bc-bullets li::before { top: 9px; } #tptools .tpt-bc-bullets--2 { grid-template-columns: minmax(0, 1fr); gap: 10px; } #tptools .tpt-bc-h3 { font-size: 17px; line-height: 25px; margin-top: 20px !important; } #tptools .tpt-bc-gtable { font-size: 13.5px; line-height: 20px; } #tptools .tpt-bc-gtable th, #tptools .tpt-bc-gtable td { padding: 10px 12px; } #tptools .tpt-bc-tablewrap { border-radius: 14px; } } /* ============================================================ wedding budget calculator v2 "simpler flow" (0.16.1) Figma VsewmJ3gucwNrnvEuLNwCI section 4181:1041 (desktop Q1 4181:1121 … full page 4184:5981, phone 4184:1625 … 4184:7582). Overrides and new classes for the 3-question flow, the plain-words result, "Make it yours" and "Set your own amount". */ #tptools .tpt-bc--v2 .tpt-wrap { display: flex; flex-direction: column; } #tptools .tpt-bc--v2 .tpt-notice, #tptools .tpt-bc--v2 .tpt-bc-shared { margin: 0 auto 16px; width: 100%; max-width: 1180px; } #tptools .tpt-bc-how { align-self: center; display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--tpt-line); background: var(--tpt-card); } #tptools .tpt-bc-how__l { padding-right: 16px; border-right: 1px solid var(--tpt-line); font-size: 13px; font-weight: 500; color: var(--tpt-soft); } #tptools .tpt-bc-how__steps { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; } #tptools .tpt-bc-how__step { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-bc-how__step + .tpt-bc-how__step::before { content: ""; width: 32px; height: 1px; margin-right: 4px; background: rgba(255, 255, 255, 0.16); } #tptools .tpt-bc-how__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--tpt-soft); font-size: 12.5px; font-weight: 600; } #tptools .tpt-bc-how__n .tpt-bc-tick { display: none; } #tptools .tpt-bc-how__step.is-on { color: #fff; font-weight: 500; } #tptools .tpt-bc-how__step.is-on .tpt-bc-how__n { background: rgba(3, 247, 181, 0.12); color: var(--tpt-mint); box-shadow: inset 0 0 0 1.5px var(--tpt-mint); } #tptools .tpt-bc-how__step.is-done { color: #fff; font-weight: 500; } #tptools .tpt-bc-how__step.is-done .tpt-bc-how__n { background: var(--tpt-mint); color: #04050e; } #tptools .tpt-bc-how__step.is-done .tpt-bc-how__num { display: none; } #tptools .tpt-bc-how__step.is-done .tpt-bc-tick { display: block; } /* questions */ #tptools .tpt-bc-qwrap { align-self: center; width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 20px; } #tptools .tpt-bc-q { display: flex; flex-direction: column; gap: 0; padding: 40px; border-radius: 24px; } #tptools .tpt-bc-q__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; } #tptools .tpt-bc-q__count { font-size: 13px; color: var(--tpt-soft); } #tptools .tpt-bc-q__dots { display: inline-flex; gap: 6px; } #tptools .tpt-bc-q__dots span { width: 32px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); transition: background-color .2s; } #tptools .tpt-bc-q__dots span.is-on { background: var(--tpt-mint); } #tptools .tpt-bc-qstep__in { display: flex; flex-direction: column; gap: 14px; } #tptools .tpt-bc-q__title { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.25; color: #fff; outline: none; } #tptools .tpt-bc-q__help { margin: -6px 0 10px; font-size: 15px; line-height: 23px; color: var(--tpt-soft); } #tptools .tpt-bc-q__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #tptools .tpt-bc-q__label { font-size: 15px; font-weight: 600; color: #fff; } #tptools .tpt-bc-total-in--lg { height: 64px; padding: 0 20px; border-radius: 16px; } #tptools .tpt-bc-total-in--lg input { font-size: 26px; font-weight: 600; } #tptools .tpt-bc-total-in--lg .tpt-bc-total-in__sym { border-right: 0; margin-right: 0; font-size: 22px; } #tptools .tpt-bc-total-in[aria-invalid], #tptools .tpt-bc-total-in:has(input[aria-invalid="true"]) { border-color: var(--tpt-error); } #tptools .tpt-bc-q__sub { margin-top: 10px; font-size: 13.5px; color: var(--tpt-soft); } #tptools .tpt-bc-qchipwrap { display: flex; flex-direction: column; gap: 14px; } #tptools .tpt-bc-qchips { display: flex; flex-wrap: wrap; gap: 10px; } #tptools .tpt-bc-qchip { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; } #tptools .tpt-bc-qchip:hover { border-color: rgba(3, 247, 181, 0.55); background: rgba(3, 247, 181, 0.06); color: #fff; } #tptools .tpt-bc-qchip .tpt-bc-tick { display: none; } #tptools .tpt-bc-qchip[aria-pressed="true"] { background: var(--tpt-mint); border-color: var(--tpt-mint); color: #04050e; font-weight: 600; } #tptools .tpt-bc-qchip[aria-pressed="true"] .tpt-bc-tick { display: block; } #tptools .tpt-bc-q__alt { margin-top: 6px; font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-bc-q__alt .tpt-bc-textlink { font-size: 14px; } #tptools .tpt-bc-bigstep { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 10px 0 4px; } #tptools .tpt-bc-bigstep__b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); background: var(--tpt-surface); color: #fff; } #tptools .tpt-bc-bigstep__b:hover { border-color: rgba(3, 247, 181, 0.55); color: #fff; } #tptools .tpt-bc-bigstep__v { display: flex; flex-direction: column; align-items: center; } #tptools .tpt-bc-bigstep__v input { width: 170px; padding: 0; border: 0; border-bottom: 1px dashed transparent; background: none; color: #fff; text-align: center; font: inherit; font-size: 44px; font-weight: 600; line-height: 1.15; outline: none; box-shadow: none; } #tptools .tpt-bc-bigstep__v input:focus { border-bottom-color: var(--tpt-mint); } #tptools .tpt-bc-bigstep__v > span { font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-bc-gslider { margin-top: 10px; } #tptools .tpt-bc-gslider__ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--tpt-muted); } #tptools .tpt-bc-q__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-bc-q__back { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 20px; } #tptools .tpt-bc-q__back:disabled { opacity: .35; cursor: default; } #tptools .tpt-bc-q__right { display: inline-flex; align-items: center; gap: 20px; } #tptools .tpt-bc-q__try { font-size: 14.5px; } #tptools .tpt-bc-q__next { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; font-size: 16px; font-weight: 600; } #tptools .tpt-bc-q.is-last .tpt-bc-q__next { height: 58px; padding: 0 32px; font-size: 18px; } #tptools .tpt-bc-privacy { color: var(--tpt-muted); } #tptools .tpt-bc-howline { max-width: 960px; margin-top: 18px; font-size: 15px; line-height: 24px; color: var(--tpt-soft); } /* example banner + badge */ #tptools .tpt-bc-exbanner { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(245, 184, 61, 0.35); background: rgba(245, 184, 61, 0.07); } #tptools .tpt-bc-exbanner p { flex: 1; font-size: 14px; line-height: 21px; color: #fff; } #tptools .tpt-bc-exbadge { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(245, 184, 61, 0.15); color: #f5b83d; font-size: 12.5px; font-weight: 600; vertical-align: middle; } #tptools .tpt-bc-exbadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* result */ #tptools .tpt-bc--v2 .tpt-bc-result { gap: 24px; padding: 32px; border-radius: 24px; } #tptools .tpt-bc--v2 .tpt-bc-result__top { justify-content: space-between; } #tptools .tpt-bc--v2 .tpt-bc-restitle .tpt-card__title { font-size: 26px; line-height: 34px; } #tptools .tpt-bc-res__sum { font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-bc-res__sum .tpt-bc-textlink { margin-left: 6px; font-size: 14px; } #tptools .tpt-bc--v2 .tpt-bc-hero { align-items: center; gap: 40px; } #tptools .tpt-bc--v2 .tpt-bc-donut { width: 260px; height: 260px; } #tptools .tpt-bc--v2 .tpt-bc-donut__v { font-size: 36px; } #tptools .tpt-bc--v2 .tpt-bc-healthrow p { font-size: 14px; } #tptools .tpt-bc-hcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #tptools .tpt-bc-hcard { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 20px; border-radius: 18px; border: 1px solid var(--tpt-line); background: var(--tpt-surface); } #tptools .tpt-bc-hcard__v { font-size: 28px; font-weight: 600; line-height: 36px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; } #tptools .tpt-bc-hcard__l { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: #fff; } #tptools .tpt-bc-hcard__s { font-size: 12.5px; line-height: 18px; color: var(--tpt-muted); } #tptools .tpt-bc-tipbtn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); font-size: 11.5px; font-weight: 600; color: var(--tpt-soft); } #tptools .tpt-bc-tipbtn[aria-expanded="true"], #tptools .tpt-bc-tipbtn:hover { border-color: var(--tpt-mint); color: var(--tpt-mint); } #tptools .tpt-bc-tipbox { position: absolute; z-index: 5; left: 20px; right: -40px; top: calc(100% - 16px); padding: 12px 14px; border-radius: 12px; background: #1a1d2b; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); font-size: 13px; line-height: 19px; color: #fff; } #tptools .tpt-bc-where__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: -12px; } #tptools .tpt-bc-where__h { font-size: 18px; font-weight: 600; color: #fff; } #tptools .tpt-bc-where { columns: 2; column-gap: 40px; margin: 0; padding: 0; list-style: none; } #tptools .tpt-bc-wrow { break-inside: avoid; display: flex; flex-direction: column; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } #tptools .tpt-bc-wrow__btn { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px 18px; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 10px; text-align: left; white-space: normal; color: #fff; } #tptools button.tpt-bc-wrow__btn:hover { background: rgba(255, 255, 255, 0.04); } #tptools .tpt-bc-wrow.is-static .tpt-bc-wrow__btn { grid-template-columns: 10px minmax(0, 1fr) auto 40px 18px; } #tptools .tpt-bc-wrow__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14.5px; color: rgba(255, 255, 255, 0.92); } #tptools .tpt-bc-wrow__amt { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; } #tptools .tpt-bc-wrow__pct { text-align: right; font-size: 12.5px; color: var(--tpt-muted); } #tptools .tpt-bc-wrow__edit { color: var(--tpt-muted); opacity: 0; transition: opacity .15s; } #tptools button.tpt-bc-wrow__btn:hover .tpt-bc-wrow__edit, #tptools button.tpt-bc-wrow__btn:focus-visible .tpt-bc-wrow__edit, #tptools .tpt-bc-wrow.is-pinned .tpt-bc-wrow__edit { opacity: 1; color: var(--tpt-mint); } #tptools .tpt-bc-yourchip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: rgba(3, 247, 181, 0.12); color: var(--tpt-mint); font-size: 11.5px; font-weight: 600; white-space: nowrap; } #tptools .tpt-bc-yourchip--btn { flex: none; width: auto; min-height: 26px; } #tptools .tpt-bc-wrow__reset { align-self: flex-start; margin: -4px 0 10px 22px; font-size: 12.5px; font-weight: 500; } #tptools .tpt-bc-where__note { margin-top: -8px; } #tptools .tpt-bc-actions--row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 22px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-bc-actions--row .tpt-btn { height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; } #tptools .tpt-bc-actions__restart { margin-left: auto; font-size: 13.5px; } /* make it yours */ #tptools .tpt-bc-yours { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; } #tptools .tpt-bc-yours__h { font-size: 24px; font-weight: 600; line-height: 32px; color: #fff; } #tptools .tpt-bc-yours__sub { margin: -8px 0 6px; font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-bc-acc { border-radius: 18px; border: 1px solid var(--tpt-line); background: var(--tpt-card); } #tptools .tpt-bc-acc.is-open { border-color: rgba(3, 247, 181, 0.35); } #tptools .tpt-bc-acc__h { margin: 0; font: inherit; } #tptools .tpt-bc-acc__head { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 24px; text-align: left; white-space: normal; color: #fff; border-radius: 18px; } #tptools .tpt-bc-acc__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(3, 247, 181, 0.1); color: var(--tpt-mint); } #tptools .tpt-bc-acc__t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } #tptools .tpt-bc-acc__title { font-size: 16.5px; font-weight: 600; line-height: 24px; color: #fff; } #tptools .tpt-bc-acc__sub { font-size: 13.5px; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-bc-acc__chev { flex: none; color: var(--tpt-soft); transition: transform .2s; } #tptools .tpt-bc-acc.is-open .tpt-bc-acc__chev { transform: rotate(180deg); } #tptools .tpt-bc-acc__body { display: flex; flex-direction: column; gap: 14px; padding: 18px 24px 24px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-bc-acc__body[hidden] { display: none; } #tptools .tpt-bc-acc__intro { font-size: 14px; line-height: 21px; color: var(--tpt-soft); } #tptools .tpt-bc--v2 .tpt-bc-fns { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } #tptools .tpt-bc-linkrow { display: flex; flex-wrap: wrap; gap: 8px 24px; } #tptools .tpt-bc-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(3, 247, 181, 0.06); border: 1px solid rgba(3, 247, 181, 0.22); font-size: 14px; line-height: 21px; color: #fff; } #tptools .tpt-bc-callout[hidden] { display: none; } #tptools .tpt-bc-callout svg { flex: none; margin-top: 1px; color: var(--tpt-mint); } #tptools .tpt-bc-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--tpt-soft); } #tptools .tpt-bc-legend__i { display: inline-flex; align-items: center; gap: 8px; } #tptools .tpt-bc-legend__i::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); } #tptools .tpt-bc-legend__i.is-more::before { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools .tpt-bc-legend__i.is-less::before { background: #f5b83d; border-color: #f5b83d; } #tptools .tpt-bc--v2 .tpt-bc-pcards { grid-template-columns: repeat(7, minmax(0, 1fr)); } #tptools .tpt-bc--v2 .tpt-bc-pcard { min-height: 112px; padding: 14px; } #tptools .tpt-bc-pcard__state { font-size: 12px; color: var(--tpt-muted); } #tptools .tpt-bc-pcard.is-more { border-color: rgba(3, 247, 181, 0.6); background: rgba(3, 247, 181, 0.08); } #tptools .tpt-bc-pcard.is-more .tpt-bc-pcard__ring { background: var(--tpt-mint); border-color: var(--tpt-mint); } #tptools .tpt-bc-pcard.is-more .tpt-bc-pcard__ring::after { content: "+"; color: #04050e; font-size: 16px; font-weight: 700; line-height: 1; } #tptools .tpt-bc-pcard.is-more .tpt-bc-pcard__state { color: var(--tpt-mint); font-weight: 600; } #tptools .tpt-bc-pcard.is-less { border-color: rgba(245, 184, 61, 0.55); background: rgba(245, 184, 61, 0.07); } #tptools .tpt-bc-pcard.is-less .tpt-bc-pcard__ring { background: #f5b83d; border-color: #f5b83d; } #tptools .tpt-bc-pcard.is-less .tpt-bc-pcard__ring::after { content: ""; width: 9px; height: 2px; background: #04050e; border-radius: 1px; } #tptools .tpt-bc-pcard.is-less .tpt-bc-pcard__state { color: #f5b83d; font-weight: 600; } #tptools .tpt-bc-pcard.is-pinned { opacity: .6; } #tptools .tpt-bc-prichg { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(3, 247, 181, 0.07); border: 1px solid rgba(3, 247, 181, 0.25); } #tptools .tpt-bc-prichg[hidden] { display: none; } #tptools .tpt-bc-prichg > div { flex: 1; } #tptools .tpt-bc-prichg__icon { color: var(--tpt-mint); } #tptools .tpt-bc-prichg__t { font-size: 13.5px; font-weight: 600; color: #fff; } #tptools .tpt-bc-prichg__x { font-size: 13.5px; line-height: 20px; color: var(--tpt-mint); } #tptools .tpt-bc--v2 .tpt-bc-food__rates { max-width: 520px; } #tptools .tpt-bc-money__s { flex: none; font-size: 12px; color: var(--tpt-muted); } #tptools .tpt-bc--v2 .tpt-bc-frow__head { flex-wrap: wrap; } #tptools .tpt-bc-frow__nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #tptools .tpt-bc--v2 .tpt-bc-frow__res::before { display: none; } #tptools .tpt-bc--v2 .tpt-bc-frow__res { font-size: 12.5px; font-weight: 500; color: var(--tpt-soft); } #tptools .tpt-bc--v2 .tpt-bc-frow__fields { max-width: 520px; } #tptools .tpt-bc--v2 .tpt-bc-whatif { gap: 14px; padding: 18px; border-radius: 16px; border: 1px solid var(--tpt-line); background: rgba(255, 255, 255, 0.02); } #tptools .tpt-bc--v2 .tpt-bc-whatif[hidden] { display: none; } #tptools .tpt-bc-whatif__t { font-size: 15px; font-weight: 600; color: #fff; } #tptools .tpt-bc--v2 .tpt-bc-whatif__body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } #tptools .tpt-bc--v2 .tpt-bc-track { padding: 18px 24px 24px; border-radius: 0; } #tptools .tpt-bc--v2 .tpt-bc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; } #tptools .tpt-bc--v2 .tpt-bc-progress, #tptools .tpt-bc--v2 .tpt-bc-switches, #tptools .tpt-bc--v2 .tpt-bc-viewrow, #tptools .tpt-bc--v2 .tpt-bc-whostrip, #tptools .tpt-bc--v2 .tpt-bc-table, #tptools .tpt-bc--v2 .tpt-bc-jewel, #tptools .tpt-bc--v2 .tpt-bc-overbanner, #tptools .tpt-bc--v2 .tpt-bc-alldone { margin-top: 0; } #tptools .tpt-bc--v2 .tpt-bc-switches__hide { margin-left: 0; } #tptools .tpt-bc--v2 .tpt-bc-table { --tpt-cols: minmax(0, 2.6fr) 120px 110px 120px 150px 64px; } #tptools .tpt-bc--v2 .tpt-bc-table.has-who { --tpt-cols: minmax(0, 2.3fr) 112px 100px 112px 140px 112px 64px; } #tptools .tpt-bc--v2 .tpt-bc-th--1, #tptools .tpt-bc--v2 .tpt-bc-th--2, #tptools .tpt-bc--v2 .tpt-bc-th--3 { text-align: right; } #tptools .tpt-bc--v2 .tpt-bc-th--4, #tptools .tpt-bc--v2 .tpt-bc-th--5 { text-align: left; } #tptools .tpt-bc--v2 .tpt-bc-line__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } #tptools .tpt-bc--v2 .tpt-bc-chead__pct { font-size: 12.5px; } #tptools .tpt-bc-status.is-muted { color: var(--tpt-muted); font-weight: 500; } #tptools .tpt-bc-status.is-paid { color: var(--tpt-mint); } #tptools .tpt-bc--v2 .tpt-bc-chead__nums { flex-direction: row; align-items: center; } #tptools .tpt-bc--v2 .tpt-bc-chead__nums .tpt-bc-status { align-items: flex-end; text-align: right; } #tptools .tpt-bc--v2 .tpt-bc-jewel__title { margin: 0; } #tptools .tpt-bc-select--w { max-width: 320px; } #tptools .tpt-bc--v2 .tpt-bc-split { max-width: 760px; } #tptools .tpt-bc--v2 .tpt-bc-total { max-width: 760px; } #tptools .tpt-bc--v2 .tpt-bc-srow .tpt-bc-yourchip--btn { width: 92px; justify-content: center; } /* set your own amount: popover on desktop (bottom sheet on phones, from .tpt-bc-dialog) */ #tptools .tpt-bc-amt { width: min(400px, calc(100vw - 32px)); } #tptools .tpt-bc-amt.is-pop { transform: none; } #tptools .tpt-bc-amt__row { display: flex; gap: 10px; align-items: center; } #tptools .tpt-bc-amt__seg button { min-width: 44px; } #tptools .tpt-bc-amt__field { flex: 1; width: auto; min-width: 0; } #tptools .tpt-bc-amt__field input { font-size: 18px; font-weight: 600; } #tptools .tpt-bc-amt__live { font-size: 13.5px; line-height: 20px; color: #fff; } #tptools .tpt-bc-amt__live:empty { display: none; } #tptools .tpt-bc-amt__reset { margin-left: auto; font-weight: 500; } #tptools .tpt-bc-minibar[hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { #tptools .tpt-bc-acc__chev, #tptools .tpt-bc-q__dots span, #tptools .tpt-bc-wrow__edit { transition: none; } } /* tablets */ @media (max-width: 1199px) and (min-width: 768px) { #tptools .tpt-bc--v2 .tpt-bc-pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } #tptools .tpt-bc--v2 .tpt-bc-hero { flex-direction: row; align-items: center; } #tptools .tpt-bc--v2 .tpt-bc-donut { width: 200px; height: 200px; } #tptools .tpt-bc-hcard__v { font-size: 22px; line-height: 30px; } #tptools .tpt-bc--v2 .tpt-bc-table .tpt-bc-thead, #tptools .tpt-bc--v2 .tpt-bc-table .tpt-bc-line, #tptools .tpt-bc--v2 .tpt-bc-table .tpt-bc-chead { min-width: 760px; } } @media (max-width: 1023px) and (min-width: 768px) { #tptools .tpt-bc--v2 .tpt-bc-hero { flex-direction: column; align-items: stretch; } #tptools .tpt-bc--v2 .tpt-bc-donut { align-self: center; } #tptools .tpt-bc-where { columns: 1; } } /* phones (Figma 4184:1625 … 4184:7582) */ @media (max-width: 767px) { #tptools .tpt-bc-how { align-self: stretch; flex-direction: column; gap: 10px; padding: 14px 12px; border-radius: 20px; } #tptools .tpt-bc-how__l { padding: 0; border: 0; font-size: 12.5px; } #tptools .tpt-bc-how__steps { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } #tptools .tpt-bc-how__step { flex-direction: column; gap: 6px; font-size: 12.5px; text-align: center; } #tptools .tpt-bc-how__step + .tpt-bc-how__step::before { display: none; } #tptools .tpt-bc-q { padding: 22px 18px; border-radius: 22px; } #tptools .tpt-bc-q__top { margin-bottom: 18px; } #tptools .tpt-bc-q__dots span { width: 22px; } #tptools .tpt-bc-q__title { font-size: 24px; } #tptools .tpt-bc-q__help { font-size: 14px; line-height: 21px; } #tptools .tpt-bc-total-in--lg { height: 58px; padding: 0 16px; } #tptools .tpt-bc-total-in--lg input { font-size: 22px; } #tptools .tpt-bc-total-in--lg .tpt-bc-total-in__hint { display: none; } #tptools .tpt-bc-qchip { min-height: 44px; padding: 0 16px; font-size: 14.5px; } #tptools .tpt-bc--v2 .tpt-bc-types { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } #tptools .tpt-bc--v2 .tpt-bc-types .tpt-bc-qchip { white-space: normal; text-align: left; } #tptools .tpt-bc-bigstep { gap: 16px; } #tptools .tpt-bc-bigstep__v input { width: 130px; font-size: 38px; } #tptools .tpt-bc-q__foot { flex-wrap: wrap; gap: 12px; margin-top: 22px; padding-top: 18px; } #tptools .tpt-bc-q__right { display: contents; } #tptools .tpt-bc-q__next, #tptools .tpt-bc-q.is-last .tpt-bc-q__next { order: -1; flex: 1 1 100%; justify-content: center; height: 54px; font-size: 16.5px; } #tptools .tpt-bc-q__back { order: 1; } #tptools .tpt-bc-q__try { order: 2; margin-left: auto; min-height: 46px; } #tptools .tpt-bc-exbanner { flex-wrap: wrap; } #tptools .tpt-bc-exbanner p { flex-basis: calc(100% - 90px); font-size: 13.5px; } #tptools .tpt-bc-exbanner .tpt-btn { width: 100%; height: 42px; } #tptools .tpt-bc--v2 .tpt-bc-result { padding: 20px 16px; gap: 18px; border-radius: 22px; } #tptools .tpt-bc--v2 .tpt-bc-result__top { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } #tptools .tpt-bc--v2 .tpt-bc-restitle .tpt-card__title { font-size: 21px; line-height: 28px; } #tptools .tpt-bc-res__sum { font-size: 13px; } #tptools .tpt-bc--v2 .tpt-bc-hero { flex-direction: column; align-items: stretch; gap: 16px; } #tptools .tpt-bc--v2 .tpt-bc-donut { align-self: center; width: 230px; height: 230px; } #tptools .tpt-bc--v2 .tpt-bc-donut__v { font-size: 30px; } #tptools .tpt-bc-hcards { grid-template-columns: minmax(0, 1fr); gap: 10px; } #tptools .tpt-bc-hcard { padding: 16px 18px; } #tptools .tpt-bc-hcard__v { font-size: 24px; line-height: 32px; } #tptools .tpt-bc-tipbox { left: 12px; right: 12px; top: auto; bottom: calc(100% - 40px); } #tptools .tpt-bc-where { columns: 1; } #tptools .tpt-bc-wrow__btn { grid-template-columns: 10px minmax(0, 1fr) auto 34px 16px; gap: 10px; min-height: 52px; } #tptools .tpt-bc-wrow__name, #tptools .tpt-bc-wrow__amt { font-size: 14px; } #tptools .tpt-bc-wrow__edit { opacity: 1; } #tptools .tpt-bc-actions--row { gap: 8px; padding-top: 16px; } #tptools .tpt-bc-actions--row .tpt-btn { height: 44px; padding: 0 16px; font-size: 13.5px; } #tptools .tpt-bc-actions__restart { margin-left: 0; min-height: 44px; } #tptools .tpt-bc-yours { margin-top: 28px; } #tptools .tpt-bc-yours__h { font-size: 21px; } #tptools .tpt-bc-acc__head { gap: 12px; padding: 16px; } #tptools .tpt-bc-acc__icon { width: 36px; height: 36px; } #tptools .tpt-bc-acc__title { font-size: 15.5px; line-height: 22px; } #tptools .tpt-bc-acc__sub { font-size: 13px; line-height: 19px; } #tptools .tpt-bc-acc__body { padding: 16px; } #tptools .tpt-bc--v2 .tpt-bc-fns { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-bc--v2 .tpt-bc-pcards { grid-template-columns: 1fr 1fr; } #tptools .tpt-bc-prichg { flex-wrap: wrap; } #tptools .tpt-bc--v2 .tpt-bc-whatif__body { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-bc--v2 .tpt-bc-track { padding: 16px; border: 0; } #tptools .tpt-bc--v2 .tpt-bc-tiles { grid-template-columns: 1fr 1fr; } #tptools .tpt-bc--v2 .tpt-bc-tile:nth-child(2), #tptools .tpt-bc--v2 .tpt-bc-tile:nth-child(3) { display: flex; } #tptools .tpt-bc--v2 .tpt-bc-viewrow { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } #tptools .tpt-bc--v2 .tpt-bc-line__phtop { grid-template-columns: 1fr auto; } #tptools .tpt-bc--v2 .tpt-bc-srow .tpt-bc-yourchip--btn { width: auto; } #tptools.tpt--budget .tpt-bc--v2.has-minibar { padding-bottom: 150px; } #tptools .tpt-bc--v2 .tpt-bc-minibar { position: fixed; z-index: 9989; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 18px; border: 1px solid var(--tpt-line); background: rgba(14, 16, 26, 0.97); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } #tptools .tpt-bc-minibar__t { display: flex; flex-direction: column; min-width: 0; } #tptools .tpt-bc--v2 .tpt-bc-minibar b { font-size: 14px; color: #fff; } #tptools .tpt-bc-minibar__l2 { font-size: 12.5px; color: var(--tpt-mint); } #tptools .tpt-bc-minibar__l2.is-tight { color: #f5b83d; } #tptools .tpt-bc-minibar__l2.is-over { color: #ff6b81; } #tptools .tpt-bc-minibar .tpt-btn { height: 40px; padding: 0 20px; } #tptools .tpt-bc-amt { left: 50%; width: 100vw; } } /* print / save as PDF: only the printout (A4, black on white), built by budget.js while printing */ .tpt-bc-printout { display: none; } @page tptbc { size: A4; margin: 14mm 14mm 16mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 8pt; color: #444; } } @media print { html.tpt-bc-printing, html.tpt-bc-printing body { background: #fff !important; } html.tpt-bc-printing body > *:not(.tpt-bc-printout) { display: none !important; } html.tpt-bc-printing .tpt-bc-printout { page: tptbc; display: block !important; color: #000; background: #fff; font: 9.5pt/1.4 Poppins, Arial, sans-serif; } .tpt-bc-printout h1 { margin: 0 0 3pt; font-size: 20pt; font-weight: 600; color: #000; } .tpt-bc-printout__meta { margin: 0 0 12pt; font-size: 9pt; color: #333; } .tpt-bc-printout__top { display: flex; align-items: center; gap: 18pt; break-inside: avoid; } .tpt-bc-printout__donut { flex: none; width: 110pt; height: 110pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .tpt-bc-printout__sum { flex: 1; border-collapse: collapse; } .tpt-bc-printout__sum th, .tpt-bc-printout__sum td { padding: 5pt 0; border-bottom: 0.5pt solid #ccc; text-align: left; font-weight: 400; color: #333; } .tpt-bc-printout__sum td { text-align: right; font-weight: 600; color: #000; } .tpt-bc-printout__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 3pt 18pt; margin: 10pt 0 12pt; padding: 0; list-style: none; font-size: 8.5pt; } .tpt-bc-printout__legend li { display: flex; align-items: center; gap: 6pt; } .tpt-bc-printout__sw { width: 7pt; height: 7pt; border-radius: 1.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .tpt-bc-printout__table { width: 100%; border-collapse: collapse; font-size: 8.5pt; } .tpt-bc-printout__table th { padding: 4pt 4pt 4pt 0; border-bottom: 1pt solid #000; text-align: right; font-weight: 600; } .tpt-bc-printout__table td { padding: 4pt 4pt 4pt 0; border-bottom: 0.5pt solid #ccc; text-align: right; vertical-align: top; } .tpt-bc-printout__table :is(th, td):first-child, .tpt-bc-printout__table :is(th, td):nth-child(2) { text-align: left; } .tpt-bc-printout__table tr { break-inside: avoid; } .tpt-bc-printout__table tr.is-total td { border-bottom: 0; border-top: 1pt solid #000; font-weight: 700; } .tpt-bc-printout__table tr.is-group td { padding-top: 8pt; text-align: left; font-weight: 600; border-bottom: 1pt solid #000; } .tpt-bc-printout__table small { display: block; color: #444; } .tpt-bc-printout__due { margin-top: 12pt; break-inside: avoid; } .tpt-bc-printout__due h2 { margin: 0 0 4pt; font-size: 11pt; font-weight: 600; } .tpt-bc-printout__due p { margin: 0 0 2pt; font-size: 8.5pt; } .tpt-bc-printout__jw { margin-top: 10pt; font-size: 8.5pt; color: #444; } .tpt-bc-printout__foot { margin-top: 16pt; padding-top: 6pt; border-top: 0.5pt solid #ccc; font-size: 8pt; color: #444; } } /* ============================================================ couple logo maker (0.17.0) Figma VsewmJ3gucwNrnvEuLNwCI page 4191:58 (desktop 1440 + mobile 390). Reuses the budget v2 "How it works" strip, cards, chips, fields, toast and dialog; everything else is .tpt-lm-*. */ #tptools .tpt-lm > .tpt-wrap { display: flex; flex-direction: column; gap: 24px; } #tptools .tpt-lm .tpt-bc-how { margin-bottom: 0; } #tptools .tpt-lm.is-shared .tpt-lm-gallery { display: none; } #tptools .tpt-lm-sharedcw { display: none; } #tptools .tpt-lm .tpt-notice { margin: 0; } #tptools :is(.tpt-lm-style, .tpt-lm-file, .tpt-lm-swatch, .tpt-lm-chip, .tpt-lm-row__head) { white-space: normal; font-family: inherit; } #tptools .tpt-lm-shared { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; border-radius: 16px; background: rgba(3, 247, 181, 0.06); border: 1px solid rgba(3, 247, 181, 0.35); } #tptools .tpt-lm-shared__text { flex: 1 1 320px; font-size: 15px; line-height: 23px; color: #fff; font-weight: 500; } #tptools .tpt-lm-shared__actions { display: flex; gap: 10px; flex-wrap: wrap; } #tptools .tpt-lm-shared__text { display: flex; align-items: flex-start; gap: 10px; } #tptools .tpt-lm-shared__icon { flex: none; display: grid; margin-top: 3px; color: var(--tpt-mint); } #tptools .tpt-lm-card { padding: 40px; } #tptools .tpt-lm-card__head { display: flex; align-items: flex-start; gap: 14px; } #tptools .tpt-lm-card__titles { flex: 1; min-width: 0; } #tptools .tpt-lm-card__title { font-size: 24px; font-weight: 600; line-height: 32px; color: #fff; outline: none; } #tptools .tpt-lm-card__help { margin-top: 4px; font-size: 15px; line-height: 23px; color: var(--tpt-soft); } #tptools .tpt-lm-exline { color: #f5c26b; } #tptools .tpt-lm-stepn { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--tpt-mint); box-shadow: inset 0 0 0 1.5px var(--tpt-mint); background: rgba(3, 247, 181, 0.08); } #tptools .tpt-lm-stepn .tpt-bc-tick { display: none; } #tptools .tpt-lm-stepn.is-done { background: var(--tpt-mint); color: #04050e; box-shadow: none; } #tptools .tpt-lm-stepn.is-done > span { display: none; } #tptools .tpt-lm-stepn.is-done .tpt-bc-tick { display: block; } #tptools .tpt-lm-gallery .tpt-lm-stepn:not(.is-on):not(.is-done) { color: var(--tpt-soft); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); background: none; } /* step 1 */ #tptools .tpt-lm-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: start; gap: 16px; margin-top: 20px; } #tptools .tpt-lm-fields .tpt-error { margin-top: 0; } #tptools .tpt-lm-swapwrap { position: relative; padding-top: 37px; } #tptools .tpt-lm-swap, #tptools .tpt-lm-textlink, #tptools .tpt-lm-change, #tptools .tpt-lm-ownlink, #tptools .tpt-lm-morelink { display: inline-flex; align-items: center; gap: 6px; color: var(--tpt-mint); font-size: 14px; font-weight: 500; line-height: 21px; background: none; border: 0; padding: 0; cursor: pointer; } #tptools .tpt-lm-swap { height: 52px; padding: 0 4px; } #tptools .tpt-lm-swap:hover, #tptools .tpt-lm-textlink:hover, #tptools .tpt-lm-change:hover, #tptools .tpt-lm-ownlink:hover, #tptools .tpt-lm-morelink:hover { text-decoration: underline; text-underline-offset: 3px; } #tptools .tpt-lm-tip { position: absolute; z-index: 5; left: 50%; bottom: calc(100% - 30px); width: 220px; transform: translateX(-50%); padding: 8px 12px; border-radius: 10px; background: #fff; color: #04050e; font-size: 13px; line-height: 19px; opacity: 0; pointer-events: none; transition: opacity .15s; } #tptools .tpt-lm-swapwrap:hover .tpt-lm-tip, #tptools .tpt-lm-swap:focus-visible + .tpt-lm-tip { opacity: 1; } #tptools .tpt-lm-see { margin-top: 29px; } #tptools .tpt-lm-under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 18px; } #tptools .tpt-lm-initials { font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-lm-initials strong { color: var(--tpt-mint); font-weight: 600; } #tptools .tpt-lm-private { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--tpt-muted); } /* step 2 */ #tptools .tpt-lm-example { flex: none; align-self: flex-start; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #f5c26b; background: rgba(245, 194, 107, 0.1); border: 1px solid rgba(245, 194, 107, 0.35); } #tptools .tpt-lm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } #tptools .tpt-lm-filter, #tptools .tpt-lm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 21px; color: #fff; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; } #tptools .tpt-lm-filter .tpt-bc-tick, #tptools .tpt-lm-chip .tpt-bc-tick { display: none; } #tptools .tpt-lm-filter:hover, #tptools .tpt-lm-chip:hover { border-color: rgba(255, 255, 255, 0.32); } #tptools .tpt-lm-filter[aria-pressed="true"] { background: var(--tpt-mint); border-color: var(--tpt-mint); color: #04050e; } #tptools .tpt-lm-chip[aria-pressed="true"] { background: rgba(3, 247, 181, 0.12); border-color: rgba(3, 247, 181, 0.7); color: var(--tpt-mint); } #tptools :is(.tpt-lm-filter, .tpt-lm-chip)[aria-pressed="true"] .tpt-bc-tick { display: block; } #tptools .tpt-lm-nomatch { margin-top: 24px; color: var(--tpt-soft); } #tptools .tpt-lm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; list-style: none; padding: 0; } #tptools .tpt-lm-item { min-width: 0; } #tptools .tpt-lm-style { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; text-align: left; border-radius: 16px; overflow: hidden; background: var(--tpt-surface); border: 1px solid var(--tpt-line); cursor: pointer; transition: border-color .15s, box-shadow .15s; } #tptools .tpt-lm-style:hover { border-color: rgba(255, 255, 255, 0.28); } #tptools .tpt-lm-style[aria-pressed="true"] { border-color: var(--tpt-mint); box-shadow: 0 0 0 2px var(--tpt-mint); } #tptools .tpt-lm-style__pic { position: relative; display: block; aspect-ratio: 1; background: #1a1b22; } #tptools .tpt-lm-style__pic img { display: block; width: 100%; height: 100%; object-fit: cover; } #tptools .tpt-lm-style__sel { position: absolute; top: 12px; left: 12px; display: none; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--tpt-mint); color: #04050e; font-size: 12px; font-weight: 600; } #tptools .tpt-lm-style[aria-pressed="true"] .tpt-lm-style__sel { display: inline-flex; } #tptools .tpt-lm-style__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; } #tptools .tpt-lm-style__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #tptools .tpt-lm-style__name { font-size: 15px; font-weight: 600; color: #fff; } #tptools .tpt-lm-style__fam { flex: none; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 11.5px; color: var(--tpt-soft); } #tptools .tpt-lm-style__desc { font-size: 13px; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-lm-style__best { display: none; margin-top: 4px; color: var(--tpt-mint); } #tptools .tpt-lm-style:is(:hover, :focus-visible) .tpt-lm-style__best, #tptools .tpt-lm-style.show-best .tpt-lm-style__best { display: block; } /* step 3: make it yours */ #tptools .tpt-lm-yours { display: flex; flex-direction: column; gap: 24px; } #tptools .tpt-lm-yours[hidden] { display: none; } #tptools .tpt-lm-make { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 32px; align-items: start; } #tptools .tpt-lm-live { position: sticky; top: calc(var(--tpt-top, 0px) + 16px); padding: 24px; border-radius: 24px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-lm-live__top { display: flex; align-items: center; gap: 10px; } #tptools .tpt-lm-live__label { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; color: var(--tpt-soft); } #tptools .tpt-lm-live__tag { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 12px; color: var(--tpt-soft); } #tptools .tpt-lm-close { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; } #tptools .tpt-lm-live__pic { --g1: #222; --g2: #2a2a2a; position: relative; margin-top: 16px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--g1); } #tptools .tpt-lm-live__pic.is-checks { background: repeating-conic-gradient(var(--g1) 0% 25%, var(--g2) 0% 50%) 0 0 / 48px 48px; } #tptools .tpt-lm-live__pic img { display: block; width: 100%; height: 100%; } #tptools .tpt-lm-live__wait, #tptools .tpt-lm-live__fail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: rgba(4, 5, 14, 0.72); color: #fff; font-size: 14px; } #tptools .tpt-lm-live__wait[hidden], #tptools .tpt-lm-live__fail[hidden] { display: none; } #tptools .tpt-lm-shimmer { width: 60%; height: 10px; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.28), rgba(255,255,255,.08)); background-size: 200% 100%; animation: tpt-lm-sh 1.2s linear infinite; } @keyframes tpt-lm-sh { to { background-position: -200% 0; } } #tptools .tpt-lm-live__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 18px; color: var(--tpt-soft); } #tptools .tpt-lm-live__name strong { color: #fff; font-weight: 600; } #tptools .tpt-lm-live__note { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--tpt-muted); } #tptools .tpt-lm-live__note--warn { color: #f5c26b; } #tptools .tpt-lm-h { font-size: 28px; font-weight: 600; line-height: 36px; color: #fff; outline: none; } #tptools .tpt-lm-sub { margin-top: 6px; font-size: 15px; line-height: 23px; color: var(--tpt-soft); } #tptools .tpt-lm-rows { display: flex; flex-direction: column; gap: 16px; } #tptools .tpt-lm-rows .tpt-lm-sub { margin: -10px 0 4px; } #tptools .tpt-lm-row { border-radius: 16px; background: var(--tpt-card); border: 1px solid var(--tpt-line); } #tptools .tpt-lm-row.is-open { border-color: rgba(3, 247, 181, 0.35); } #tptools .tpt-lm-row__head { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 24px; text-align: left; color: #fff; background: none; border: 0; cursor: pointer; } #tptools .tpt-lm-row__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(3, 247, 181, 0.1); color: var(--tpt-mint); } #tptools .tpt-lm-row__t { flex: 1; font-size: 17px; font-weight: 600; } #tptools .tpt-lm-row__v { min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--tpt-soft); } #tptools .tpt-lm-row__chev { flex: none; display: grid; transition: transform .15s; color: var(--tpt-soft); } #tptools .tpt-lm-row.is-open .tpt-lm-row__chev { transform: rotate(180deg); } #tptools .tpt-lm-row__panel { display: flex; flex-direction: column; gap: 14px; margin: 0 24px; padding: 18px 0 22px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-lm-row__panel[hidden], #tptools .tpt-lm-row__panel [hidden] { display: none; } #tptools .tpt-lm-chips { display: flex; flex-wrap: wrap; gap: 8px; } #tptools .tpt-lm-line { font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, 0.85); } #tptools .tpt-lm-line--soft { color: #f5c26b; } #tptools .tpt-lm-label { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-lm-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #tptools .tpt-lm-links { display: flex; flex-wrap: wrap; gap: 20px; } #tptools .tpt-lm-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 22px; color: #fff; } #tptools .tpt-lm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } #tptools .tpt-lm-switch small { display: block; font-size: 13px; color: var(--tpt-muted); } #tptools .tpt-lm-switch__ui { flex: none; position: relative; width: 40px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); transition: background .15s; } #tptools .tpt-lm-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; } #tptools .tpt-lm-switch input:checked + .tpt-lm-switch__ui { background: var(--tpt-mint); } #tptools .tpt-lm-switch input:checked + .tpt-lm-switch__ui::after { transform: translateX(16px); background: #04050e; } #tptools .tpt-lm-switch input:focus-visible + .tpt-lm-switch__ui { outline: 2px solid var(--tpt-mint); outline-offset: 3px; } #tptools .tpt-lm-slider label { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); } #tptools .tpt-lm-slider__row { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--tpt-muted); } #tptools .tpt-lm-slider input[type="range"] { flex: 1; accent-color: var(--tpt-mint); height: 24px; } #tptools .tpt-lm-datefield { max-width: 320px; } #tptools .tpt-lm-datefield input { color-scheme: dark; } #tptools .tpt-lm-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #tptools .tpt-lm-swatch { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; text-align: left; font-size: 14px; line-height: 19px; color: #fff; background: var(--tpt-surface); border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; } #tptools .tpt-lm-swatch > span:nth-child(2) { flex: 1; } #tptools .tpt-lm-swatch .tpt-bc-tick { display: none; color: var(--tpt-mint); } #tptools .tpt-lm-swatch[aria-pressed="true"] { border-color: var(--tpt-mint); background: rgba(3, 247, 181, 0.08); font-weight: 600; } #tptools .tpt-lm-swatch[aria-pressed="true"] .tpt-bc-tick { display: block; } #tptools .tpt-lm-swatch__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(90deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); } #tptools .tpt-lm-ownlink { align-self: flex-start; } #tptools .tpt-lm-ownbox { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--tpt-line); background: var(--tpt-surface); } #tptools .tpt-lm-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #tptools .tpt-lm-picker label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; } #tptools .tpt-lm-picker__in { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: var(--tpt-bg); } #tptools .tpt-lm-picker__in input[type="color"] { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; } #tptools .tpt-lm-picker__in input[type="text"] { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font-size: 15px; outline: none; text-transform: uppercase; } #tptools .tpt-lm-picker__in:focus-within { border-color: var(--tpt-mint); } #tptools .tpt-lm-picker__in input[aria-invalid="true"] { color: var(--tpt-error); } #tptools .tpt-lm-godl { margin-top: 4px; } /* mock-ups */ #tptools .tpt-lm-mocks, #tptools .tpt-lm-dl { padding: 40px; } #tptools .tpt-lm-mockgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; padding: 0; list-style: none; } #tptools .tpt-lm-mock { display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 16px; border-radius: 18px; border: 1px solid var(--tpt-line); background: var(--tpt-surface); } #tptools .tpt-lm-mock__pic { display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #e8dccb; } #tptools .tpt-lm-mock__pic img { display: block; width: 100%; height: 100%; } #tptools .tpt-lm-mock__label { padding: 0 6px; font-size: 15px; font-weight: 500; color: #fff; } #tptools .tpt-lm-mock__btns { display: flex; gap: 8px; padding: 0 6px; } #tptools .tpt-lm-mock__btns .tpt-btn { height: 40px; padding: 0 16px; font-size: 14px; } #tptools .tpt-lm-mock__share { width: 40px; padding: 0 !important; } #tptools .tpt-lm-mocknote { margin-top: 20px; } #tptools .tpt-lm-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; } #tptools .tpt-lm-dots span { width: 6px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.25); transition: width .2s; } #tptools .tpt-lm-dots span.is-on { width: 18px; background: var(--tpt-mint); } /* download card */ #tptools .tpt-lm-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } #tptools .tpt-lm-more .tpt-lm-files { margin-top: 14px; } #tptools .tpt-lm-file { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px; text-align: left; border-radius: 16px; background: var(--tpt-surface); border: 1px solid var(--tpt-line); color: #fff; cursor: pointer; } #tptools .tpt-lm-file:hover { border-color: rgba(255, 255, 255, 0.28); } #tptools .tpt-lm-file.is-done { border-color: rgba(3, 247, 181, 0.6); } #tptools .tpt-lm-file[aria-busy="true"] { opacity: .6; cursor: progress; } #tptools .tpt-lm-file__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(3, 247, 181, 0.1); color: var(--tpt-mint); } #tptools .tpt-lm-file__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } #tptools .tpt-lm-file__t { font-size: 16px; font-weight: 600; } #tptools .tpt-lm-file__meta { font-size: 13px; color: var(--tpt-mint); } #tptools .tpt-lm-file__line { font-size: 13.5px; line-height: 20px; color: var(--tpt-soft); } #tptools .tpt-lm-file__done { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tpt-mint); } #tptools .tpt-lm-file__done[hidden] { display: none; } #tptools .tpt-lm-file__go { flex: none; display: grid; color: var(--tpt-soft); } #tptools .tpt-lm-file.is-done .tpt-lm-file__go { display: none; } #tptools .tpt-lm-more { margin-top: 20px; } #tptools .tpt-lm-morelink svg { transition: transform .15s; } #tptools .tpt-lm-morelink[aria-expanded="true"] svg { transform: rotate(180deg); } #tptools .tpt-lm-sharerow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--tpt-line); } #tptools .tpt-lm-rights { margin-top: 20px; } /* phone bar, sheet, dialog, toast */ #tptools .tpt-lm-bar { position: fixed; z-index: 9990; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(4, 5, 14, 0), rgba(4, 5, 14, 0.96) 30%); } #tptools .tpt-lm-bar[hidden] { display: none; } #tptools .tpt-lm-backdrop { position: fixed; inset: 0; z-index: 9996; background: rgba(0, 0, 0, 0.6); } #tptools .tpt-lm-backdrop[hidden], #tptools .tpt-lm-dialog[hidden] { display: none; } #tptools .tpt-lm-dialog__t { font-size: 18px; font-weight: 600; color: #fff; } #tptools .tpt-lm-dialog__actions { display: flex; gap: 10px; } #tptools.tpt--logo .tpt-toast { display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); white-space: normal; } #tptools.tpt--logo .tpt-toast.is-bad { background: #ffe1e6; color: #6b0012; } html.tpt-lm-lock, html.tpt-lm-lock body { overflow: hidden; } #tptools .tpt-lm-prose { max-width: 960px; margin-top: 32px; } #tptools .tpt-lm-prose--after { margin-top: 28px; } #tptools .tpt-lm-prose > * + * { margin-top: 16px; } #tptools .tpt-lm-prose .tpt-h3 { margin-top: 32px; font-size: 22px; line-height: 30px; } #tptools .tpt-lm-prose p { font-size: 16px; line-height: 27px; color: var(--tpt-soft); } #tptools .tpt-lm-prose strong { color: #fff; font-weight: 600; } #tptools .tpt-lm-bullets { display: flex; flex-direction: column; gap: 10px; padding-left: 0; list-style: none; } #tptools .tpt-lm-bullets li { position: relative; padding-left: 22px; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.82); } #tptools .tpt-lm-bullets li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--tpt-mint); } #tptools .tpt-lm-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } #tptools .tpt-lm-steps .tpt-step { padding: 24px; } #tptools .tpt-lm-steps .tpt-step p { font-size: 14.5px; line-height: 23px; } #tptools .tpt-lm-backlink { margin-top: 24px; } @media (max-width: 1100px) { #tptools .tpt-lm-make { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #tptools .tpt-lm-fields { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } #tptools .tpt-lm-see { grid-column: 1 / -1; margin-top: 0; justify-self: start; } #tptools .tpt-lm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { #tptools .tpt-lm > .tpt-wrap { gap: 16px; } #tptools .tpt-lm-card, #tptools .tpt-lm-mocks, #tptools .tpt-lm-dl { padding: 22px 18px; border-radius: 20px; } #tptools .tpt-lm-card__title { font-size: 20px; line-height: 28px; } #tptools .tpt-lm-card__head { flex-wrap: wrap; } #tptools .tpt-lm-example { order: 3; margin-left: 42px; } #tptools .tpt-lm-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; } #tptools .tpt-lm-swapwrap { padding: 0; } #tptools .tpt-lm-swap { height: 32px; } #tptools .tpt-lm-tip { display: none; } #tptools .tpt-lm-see { width: 100%; margin: 4px 0 0; } #tptools .tpt-lm-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding: 0 18px 4px; scrollbar-width: none; } #tptools .tpt-lm-filters::-webkit-scrollbar { display: none; } #tptools .tpt-lm-filter { flex: none; } #tptools .tpt-lm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #tptools .tpt-lm-style__body { padding: 10px 10px 12px; } #tptools .tpt-lm-style__top { flex-direction: column; align-items: flex-start; gap: 4px; } #tptools .tpt-lm-style__name { font-size: 14px; } #tptools .tpt-lm-style__desc { font-size: 12px; line-height: 17px; } /* the sheet: preview pinned on top, rows, mock-ups and download below, Download my logo sticky at the bottom */ #tptools .tpt-lm-yours.is-sheet { display: none; } #tptools .tpt-lm-yours.is-sheet.is-open { display: flex; position: fixed; z-index: 9980; inset: 0; overflow-y: auto; overscroll-behavior: contain; gap: 16px; padding: 8px 16px 110px; background: var(--tpt-bg); } #tptools .tpt-lm-yours:not(.is-sheet) { display: none; } #tptools .tpt-lm-sheetbar { display: flex; justify-content: center; padding: 4px 0; } #tptools .tpt-lm-sheetbar__grip { width: 40px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); } #tptools .tpt-lm-make { grid-template-columns: minmax(0, 1fr); gap: 20px; } #tptools .tpt-lm-live { position: sticky; top: -8px; z-index: 2; margin: 0 -16px; padding: 12px 16px 14px; border-radius: 0 0 20px 20px; border-width: 0 0 1px; } #tptools .tpt-lm-live__pic { width: min(100%, 30vh); margin: 10px auto 0; } #tptools .tpt-lm-live__name { justify-content: center; margin-top: 10px; font-size: 16px; } #tptools .tpt-lm-live__note { text-align: center; margin-top: 6px; } #tptools .tpt-lm-h { font-size: 22px; line-height: 30px; } #tptools .tpt-lm-row__head { padding: 14px 16px; gap: 12px; } #tptools .tpt-lm-row__icon { width: 36px; height: 36px; } #tptools .tpt-lm-row__t { font-size: 15.5px; } #tptools .tpt-lm-row__v { font-size: 13px; max-width: 42%; } #tptools .tpt-lm-row__panel { margin: 0 16px; } #tptools .tpt-lm-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tptools .tpt-lm-pickers { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-lm-mockgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -18px; padding: 0 18px 4px; scrollbar-width: none; } #tptools .tpt-lm-mockgrid::-webkit-scrollbar { display: none; } #tptools .tpt-lm-mock { flex: 0 0 82%; scroll-snap-align: start; } #tptools .tpt-lm-files { grid-template-columns: minmax(0, 1fr); gap: 10px; } #tptools .tpt-lm-file { padding: 14px; gap: 12px; } #tptools .tpt-lm-bar.is-over { z-index: 9985; } #tptools.tpt--logo .tpt-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 9999; border-radius: 16px; padding: 12px 16px; line-height: 1.4; } #tptools .tpt-lm-steps { grid-template-columns: minmax(0, 1fr); } #tptools .tpt-lm-prose .tpt-h3 { font-size: 18px; line-height: 26px; } #tptools .tpt-lm-dialog { z-index: 9997; } /* opened from a shared link (Figma mobile 7a): banner, then the logo with its style and colours, before the strip */ #tptools .tpt-lm.is-shared > .tpt-wrap > .tpt-lm-shared { order: -3; } #tptools .tpt-lm.is-shared .tpt-lm-yours:not(.is-sheet) { display: flex; order: -2; } #tptools .tpt-lm.is-shared .tpt-lm-yours:not(.is-sheet) :is(.tpt-lm-rows, .tpt-lm-mocks, .tpt-lm-dl, .tpt-lm-sheetbar, .tpt-lm-close, .tpt-lm-change, .tpt-lm-live__top) { display: none; } #tptools .tpt-lm.is-shared .tpt-lm-yours:not(.is-sheet) .tpt-lm-live { position: static; margin: 0; border-radius: 20px; border-width: 1px; } #tptools .tpt-lm.is-shared .tpt-lm-yours:not(.is-sheet) .tpt-lm-live__pic { width: 100%; margin-top: 0; } #tptools .tpt-lm.is-shared .tpt-lm-yours:not(.is-sheet) .tpt-lm-sharedcw { display: inline; color: var(--tpt-soft); font-weight: 400; } } @media (prefers-reduced-motion: reduce) { #tptools .tpt-lm-shimmer { animation: none; } #tptools .tpt-lm-row__chev, #tptools .tpt-lm-switch__ui, #tptools .tpt-lm-switch__ui::after, #tptools .tpt-lm-dots span { transition: none; } }