/* ═══════════════════════════════════════════════════════════════ TesterPilot blog — components that don't exist on the main site. Design tokens (--ink, --slate, --go, --line, …) come from landing.css. ═══════════════════════════════════════════════════════════════ */ /* The main-site nav is fixed at top:16px — keep page content clear of it. */ .tp-main { padding-top: 104px; } @media (max-width: 720px) { .tp-main { padding-top: 88px; } } /* NOTE: no `overflow-x: hidden` here. Setting only one axis makes the browser treat as a scroll container (overflow-y becomes auto), which breaks position: sticky on the category bar and changes how the page scrolls. The main site does not do it either — the layout is built to fit instead. */ .tp-body { position: relative; } /* ── Layout primitives ─────────────────────────────────────────── */ .tp-section { padding: 56px 0; } .tp-section--tight { padding: 34px 0 0; } .tp-section--mist { background: var(--mist); border-top: 1px solid var(--line); } .tp-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .tp-h2 { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; } .tp-empty { color: var(--slate); font-size: 15px; padding: 24px 0; } /* ── Hero ──────────────────────────────────────────────────────── */ .tp-hero { padding: 22px 0 34px; background: linear-gradient(180deg, var(--go-tint) 0%, rgba(239,246,255,0) 100%); } .tp-hero--small { padding-bottom: 22px; } .tp-hero__inner { max-width: 820px; } .tp-hero__title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 14px 0 14px; } .tp-hero__sub { color: var(--slate); font-size: 16.5px; max-width: 680px; } .tp-hero__stats { color: var(--faint); font-size: 11px; margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .tp-hero__stats a { color: var(--go); font-weight: 600; } .tp-hero__dot { color: var(--line); } /* Hero search — makes the blog feel like a content hub rather than a single page. */ .tp-hero__search { display: flex; gap: 8px; margin-top: 24px; max-width: 560px; } .tp-hero__search input { flex: 1 1 auto; min-width: 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 14.5px; } .tp-hero__search input:focus { outline: 2px solid var(--go); outline-offset: 1px; border-color: var(--go); } .tp-hero__search button { padding: 0 20px; border: 1px solid var(--ink); border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; } .tp-hero__search button:hover { background: var(--go); border-color: var(--go); } /* WordPress's screen-reader class is not guaranteed to be enqueued (the theme drops the block library on classic content), so define it here. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Category filter ───────────────────────────────────────────── */ .tp-cats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 88px; z-index: 20; } .tp-cats__inner { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; } /* The floating social rail (left: 24px, 46px wide) would otherwise sit on top of the first chip, which on this row is the active dark one. Line the chips up with the hero copy instead — the main site clears the rail the same way. */ @media (min-width: 901px) { .tp-cats__inner { padding-left: 87px; } } .tp-cats__inner::-webkit-scrollbar { display: none; } .tp-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--slate); transition: border-color .15s ease, color .15s ease, background .15s ease; } .tp-chip:hover { border-color: var(--go); color: var(--ink); } .tp-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } .tp-chip__count { font-family: var(--font-mono); font-size: 10px; color: var(--faint); } .tp-chip.is-active .tp-chip__count { color: rgba(255,255,255,.6); } /* ── Lead (featured) article ───────────────────────────────────── */ .tp-lead { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .tp-lead:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.35); box-shadow: 0 26px 60px rgba(10,16,23,.10); } .tp-lead__link { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch; } .tp-lead__media { position: relative; overflow: hidden; background: var(--mist); min-height: 320px; } .tp-lead__img, .tp-lead__media .tp-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .tp-lead:hover .tp-lead__img, .tp-lead:hover .tp-lead__media .tp-ghost { transform: scale(1.035); } .tp-lead__flag { position: absolute; left: 16px; top: 16px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 10px; letter-spacing: .1em; padding: 6px 11px; border-radius: 999px; } .tp-lead__body { padding: 38px 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; } .tp-lead__title { font-family: var(--font-display); font-size: clamp(24px, 2.7vw, 33px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.16; } .tp-lead__excerpt { color: var(--slate); font-size: 15.5px; } .tp-lead__meta { color: var(--faint); font-size: 11px; display: flex; gap: 8px; align-items: center; } .tp-lead__sep { color: var(--line); } /* ── Guide grid: three per row (§9) ────────────────────────────── */ .tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 1040px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } @media (max-width: 660px) { .tp-grid { grid-template-columns: 1fr; } .tp-lead__link { grid-template-columns: 1fr; } .tp-lead__media { min-height: 210px; } .tp-lead__body { padding: 24px; } } /* ── Guide card ────────────────────────────────────────────────── */ .tp-post { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .tp-post:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.35); box-shadow: 0 22px 46px rgba(10,16,23,.10); } .tp-post__link { display: flex; flex-direction: column; height: 100%; } .tp-post__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); } .tp-post__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .tp-post:hover .tp-post__img { transform: scale(1.05); } .tp-post__badge { position: absolute; left: 12px; top: 12px; background: rgba(10,16,23,.80); color: #fff; backdrop-filter: blur(6px); font-size: 11px; font-weight: 600; letter-spacing: .01em; padding: 5px 11px; border-radius: 999px; } .tp-post__time { position: absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; } .tp-post__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; } .tp-post__meta { color: var(--faint); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; } .tp-post__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tp-post__excerpt { color: var(--slate); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tp-post__more { margin-top: auto; padding-top: 10px; color: var(--go); font-weight: 600; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; } .tp-post__more span { transition: transform .2s ease; } .tp-post:hover .tp-post__more span { transform: translateX(4px); } /* Branded cover used when a post has no featured image — a designed gradient rather than a broken/empty box, keyed to the category colour. */ .tp-post__media--ghost { background: var(--mist); } .tp-ghost { position: absolute; inset: 0; display: block; background: linear-gradient(135deg, var(--tp-c1) 0%, var(--tp-c2) 100%); } .tp-ghost::before, .tp-ghost::after { content: ''; position: absolute; border-radius: 50%; } .tp-ghost::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .tp-ghost--1::before { width: 230px; height: 230px; right: -60px; top: -80px; background: rgba(255,255,255,.10); } .tp-ghost--1::after { width: 130px; height: 130px; left: 16%; bottom: -46px; background: rgba(255,255,255,.07); } .tp-ghost--2::before { width: 260px; height: 260px; left: -90px; bottom: -100px; background: rgba(255,255,255,.09); } .tp-ghost--2::after { width: 96px; height: 96px; right: 14%; top: 16%; background: rgba(255,255,255,.13); } .tp-ghost--3::before { width: 190px; height: 190px; right: -50px; bottom: -56px; background: rgba(255,255,255,.10); } .tp-ghost--3::after { width: 310px; height: 310px; left: -110px; top: -130px; background: rgba(255,255,255,.06); } .tp-ghost--lead::before { width: 420px; height: 420px; right: -120px; top: -160px; background: rgba(255,255,255,.10); } .tp-ghost--lead::after { width: 220px; height: 220px; left: -60px; bottom: -90px; background: rgba(255,255,255,.07); } /* ── Browse by topic tiles ─────────────────────────────────────── */ .tp-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 1040px) { .tp-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 660px) { .tp-topics { grid-template-columns: 1fr; } } .tp-topic { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 22px 22px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .tp-topic:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.35); box-shadow: 0 18px 40px rgba(10,16,23,.08); } .tp-topic__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--tp-c1), var(--tp-c2)); } .tp-topic__name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .tp-topic__count { color: var(--go); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; } .tp-topic__desc { color: var(--slate); font-size: 13px; line-height: 1.5; } /* ── Breadcrumbs ───────────────────────────────────────────────── */ .tp-crumbs { padding: 6px 0 14px; font-size: 11px; } .tp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tp-crumbs span[aria-current] { color: var(--faint); } .tp-crumbs a { color: var(--slate); } .tp-crumbs a:hover { color: var(--go); } .tp-crumbs__sep { color: var(--line); } /* ── Article ───────────────────────────────────────────────────── */ .tp-article { padding-bottom: 24px; } /* The floating social rail (fixed, left: 24px, 46px wide) must never cover running text. The main site solves this on article pages with a narrow centred column; here the article keeps its sidebar, so the container gets the same left clearance as the hero instead. */ @media (min-width: 901px) { .tp-article .v2-container { padding-left: 111px; } } .tp-article__head { max-width: 820px; margin-bottom: 26px; } .tp-article__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .tp-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--go-tint); color: var(--go-deep); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .tp-pill:hover { background: #E0EDFF; } .tp-article__flag { color: var(--faint); font-size: 10.5px; } .tp-article__title { font-family: var(--font-display); font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px; } .tp-meta { color: var(--faint); font-size: 11.5px; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } .tp-meta__sep { color: var(--line); } .tp-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; } .tp-article__cover { margin: 0 0 26px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); } .tp-article__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } /* Article body typography — matches the old Laravel .post-article__body feel */ .tp-article__body { font-size: 17px; color: #222C36; } .tp-article__body > * + * { margin-top: 18px; } .tp-article__body h2 { font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -0.02em; margin-top: 40px; scroll-margin-top: 110px; } .tp-article__body h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-top: 30px; scroll-margin-top: 110px; } .tp-article__body h4 { font-size: 18px; font-weight: 700; margin-top: 24px; } .tp-article__body p, .tp-article__body li { color: #3A4551; } .tp-article__body a { color: var(--go); text-decoration: underline; text-underline-offset: 2px; } .tp-article__body a:hover { color: var(--go-deep); } .tp-article__body ul, .tp-article__body ol { padding-left: 22px; display: grid; gap: 8px; } .tp-article__body strong { color: var(--ink); font-weight: 600; } .tp-article__body blockquote { border-left: 3px solid var(--go); background: var(--go-tint); padding: 16px 20px; border-radius: 0 12px 12px 0; font-size: 15.5px; } .tp-article__body img { border-radius: 12px; } .tp-article__body table { width: 100%; border-collapse: collapse; font-size: 15px; } .tp-article__body th, .tp-article__body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; } .tp-article__body th { background: var(--mist); font-weight: 600; } .tp-article__body .wp-block-table { overflow-x: auto; } .tp-article__tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; font-size: 11px; } .tp-article__tags a { color: var(--faint); } .tp-article__tags a:hover { color: var(--go); } /* ── Table of contents ─────────────────────────────────────────── */ .tp-toc-inline { border: 1px solid var(--line); background: var(--mist); border-radius: 14px; padding: 16px 20px; margin-bottom: 26px; } .tp-toc-inline summary { cursor: pointer; font-size: 10.5px; color: var(--faint); } .tp-toc-inline ol { list-style: none; margin-top: 12px; display: grid; gap: 8px; counter-reset: toc; } .tp-toc-inline a { font-size: 14.5px; color: var(--slate); } .tp-toc-inline a:hover { color: var(--go); } .tp-toc-inline__lvl3 { padding-left: 16px; } /* The sidebar TOC is hidden on mobile — the inline one above the content wins. */ .tp-card--toc { display: none; } @media (min-width: 1001px) { .tp-card--toc { display: block; } .tp-toc-inline { display: none; } } /* ── Sidebar ───────────────────────────────────────────────────── */ .tp-sidebar { display: grid; gap: 16px; } .tp-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px; } .tp-card__title { font-size: 10.5px; color: var(--faint); margin-bottom: 14px; letter-spacing: .12em; } .tp-card__list { list-style: none; display: grid; gap: 10px; font-size: 14px; } .tp-card__list a { color: var(--slate); display: flex; justify-content: space-between; gap: 10px; } .tp-card__list a:hover { color: var(--go); } .tp-card__count { font-family: var(--font-mono); font-size: 10px; color: var(--faint); } .tp-card__list--toc { list-style: decimal; padding-left: 18px; font-size: 13.5px; } .tp-toc-lvl3 { margin-left: 12px; } .tp-card--cta { background: var(--ink); border-color: var(--ink); color: #fff; } .tp-card--cta .tp-card__title { color: #fff; font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; text-transform: none; } .tp-card--cta p { color: rgba(255,255,255,.72); font-size: 13.5px; margin-bottom: 14px; } .tp-card__wa { display: inline-block; margin-top: 10px; color: #fff; font-size: 13px; font-weight: 600; } .tp-card__wa:hover { color: var(--go-tint); } /* Mobile: the whole sidebar drops below the article (§14). */ @media (max-width: 1000px) { .tp-article__layout { grid-template-columns: 1fr; gap: 34px; } .tp-sidebar { max-width: none; } } /* ── CTA block ─────────────────────────────────────────────────── */ .tp-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 30px 34px; } .tp-cta__title { font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 8px; } .tp-cta__text { color: var(--slate); font-size: 15px; max-width: 620px; } .tp-cta__actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .tp-cta__fine { color: var(--faint); font-size: 10px; } @media (max-width: 720px) { .tp-cta { padding: 24px; } .tp-cta__actions { width: 100%; } .tp-cta__actions .v2-btn { width: 100%; text-align: center; } } /* ── Search form ───────────────────────────────────────────────── */ .tp-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .tp-search label { font-size: 10.5px; color: var(--faint); } .tp-search input { flex: 1 1 240px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink); background: var(--paper); } .tp-search input:focus { outline: 2px solid var(--go); outline-offset: 1px; border-color: var(--go); } /* ── Pagination ────────────────────────────────────────────────── */ .tp-pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 34px; } .tp-pagination a, .tp-pagination span.current { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--slate); background: var(--paper); } .tp-pagination a:hover { border-color: var(--go); color: var(--ink); } .tp-pagination span.current { background: var(--ink); border-color: var(--ink); color: #fff; } /* ── Small screens ─────────────────────────────────────────────── */ @media (max-width: 720px) { .tp-section { padding: 40px 0; } .tp-article__body { font-size: 16.5px; } .tp-cats { position: static; } }