/** * TPJC homepage -- editorial brand language. * * Standalone: this stylesheet is loaded only by the plugin's homepage * page template, which renders its own / rather than the * theme's, so nothing here has to fight the legacy theme's CSS. * * Layout scale: the design is drawn at 1440px with 80px gutters. Below * that everything is fluid; the breakpoints at 1100 / 860 / 640 collapse * the multi-column bands in that order. */ :root { --ink: #141c2e; --ink-2: #3c5a82; --mist: #46546e; --mist-2: #6b7890; --paper: #fbfcfe; --ice: #f3f8fe; --ice-2: #e2edfb; --bronze: #b08d4f; --bronze-l: #d6bb85; --line: rgba(20, 28, 46, 0.12); --line-soft: rgba(20, 28, 46, 0.08); --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --disp: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; --gutter: 80px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.tpjc-home { margin: 0; /* Not a flat fill: three very soft ice-blue washes tiled down the page, so the open sections read as bright sky rather than plain white. Deliberately weak -- it must never compete with the --ice and --ink bands that sit on top of it. */ background-color: var(--paper); background-image: radial-gradient(760px 420px at 14% 16%, rgba(178, 206, 243, 0.30), rgba(178, 206, 243, 0) 62%), radial-gradient(680px 380px at 86% 54%, rgba(198, 223, 248, 0.34), rgba(198, 223, 248, 0) 60%), radial-gradient(900px 460px at 46% 92%, rgba(219, 233, 250, 0.40), rgba(219, 233, 250, 0) 64%); background-size: 100% 1600px; background-repeat: repeat-y; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Zero-specificity reset: :where() keeps this from outranking the button and link rules below, which set their own colours. */ :where(.tpjc-home a) { color: inherit; text-decoration: none; } .tpjc-home img { max-width: 100%; } .tpjc-home :focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; } /* Skip link -- keyboard users shouldn't have to tab the whole nav. */ .tpjc-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; left: 12px; top: 12px; background: var(--ink); color: #fff; padding: 12px 20px; z-index: 200; font-family: var(--disp); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; } .tpjc-skip:focus { width: auto; height: auto; overflow: visible; clip: auto; color: #fff; } /* Visually hidden, still announced -- the theme normally supplies this. */ .tpjc-home .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- type */ .tpjc-kicker { display: block; font-family: var(--disp); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); } .tpjc-kicker--mist { color: var(--mist-2); } .tpjc-display { font-family: var(--disp); font-weight: 300; letter-spacing: -0.01em; line-height: 1.12; color: var(--ink); margin: 0; } .tpjc-body { font-size: 17px; line-height: 1.7; color: var(--mist); margin: 0; } .tpjc-num { font-family: var(--disp); font-weight: 200; letter-spacing: -0.02em; line-height: 1; color: var(--ink); display: block; } /* ------------------------------------------------------------- controls */ .tpjc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--disp); font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 0 28px; height: 50px; border-radius: 2px; border: 0; cursor: pointer; transition: background-color 0.18s, border-color 0.18s, color 0.18s; white-space: nowrap; } .tpjc-btn--ink { background: var(--ink); color: #fff; } .tpjc-btn--ink:hover { background: #1e2942; color: #fff; } .tpjc-btn--line { border: 1px solid rgba(20, 28, 46, 0.35); color: var(--ink); background: transparent; } .tpjc-btn--line:hover { border-color: var(--ink); } .tpjc-btn--white { background: #fff; color: var(--ink); } .tpjc-btn--white:hover { background: var(--ice); color: var(--ink); } .tpjc-btn--whiteline { border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; background: transparent; } .tpjc-btn--whiteline:hover { border-color: #fff; color: #fff; } .tpjc-tlink { display: inline-flex; align-items: center; gap: 14px; font-family: var(--disp); font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); transition: color 0.18s; } .tpjc-tlink:hover { color: var(--bronze); } .tpjc-tlink .rule { display: inline-block; width: 36px; height: 1px; background: currentColor; flex: none; transition: width 0.18s; } .tpjc-tlink:hover .rule { width: 48px; } .tpjc-uline { display: flex; align-items: center; width: 100%; height: 46px; padding: 0; border: 0; border-bottom: 1px solid rgba(20, 28, 46, 0.32); font-family: var(--sans); font-size: 15px; color: var(--ink); background: transparent; border-radius: 0; appearance: none; -webkit-appearance: none; } .tpjc-uline::placeholder { color: var(--mist-2); } .tpjc-uline:focus { outline: 0; border-bottom-color: var(--ink); } select.tpjc-uline { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a97ad' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px; color: var(--mist); } /* ------------------------------------------------------------------ nav */ .tpjc-nav { position: sticky; top: 0; /* WordPress's admin bar is fixed above everything for logged-in users; drop the sticky nav below it so the two don't collide. */ top: var(--tpjc-adminbar, 0px); z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); height: 80px; background: rgba(251, 252, 254, 0.94); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line-soft); } .tpjc-nav__logo { width: 154px; height: 48px; display: block; flex: none; } .tpjc-nav__links { display: flex; align-items: center; gap: 36px; } .tpjc-nav__links a { font-family: var(--disp); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding: 10px 0; transition: color 0.18s; } .tpjc-nav__links a:hover { color: var(--bronze); } .tpjc-nav__links .tpjc-btn { margin-left: 8px; height: 42px; padding: 0 22px; } .tpjc-nav__toggle { display: none; } .tpjc-nav__links--mobile { display: none; } .tpjc-home .tpjc-hero__lockup--colour { display: none; } body.admin-bar { --tpjc-adminbar: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --tpjc-adminbar: 46px; } } /* ----------------------------------------------------------------- hero */ .tpjc-hero { position: relative; height: 700px; min-height: 560px; overflow: hidden; background: #0f1728; } .tpjc-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .tpjc-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 40, 0) 0%, rgba(15, 23, 40, 0.12) 45%, rgba(15, 23, 40, 0.86) 100%), linear-gradient(90deg, rgba(15, 23, 40, 0.55) 0%, rgba(15, 23, 40, 0) 60%); } .tpjc-hero__lockup { position: absolute; z-index: 2; right: 120px; top: 64px; width: 400px; height: auto; display: block; } .tpjc-hero__inner { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 72px; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; } .tpjc-hero__copy { display: flex; flex-direction: column; gap: 26px; max-width: 720px; } .tpjc-hero__copy h1 { font-size: 68px; color: #fff; } .tpjc-hero__copy p { color: rgba(255, 255, 255, 0.78); max-width: 560px; font-size: 18px; } .tpjc-hero__cta { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; } .tpjc-hero__tick { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 6px; text-align: right; flex: none; } .tpjc-hero__tick i { display: block; width: 48px; height: 1px; background: var(--bronze-l); } /* -------------------------------------------------------------- section */ .tpjc-sec { padding: 72px var(--gutter) 64px; } .tpjc-sec--ice { background: var(--ice); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 64px var(--gutter) 72px; } .tpjc-sec--ink { background: var(--ink); color: #fff; padding: 72px var(--gutter); } .tpjc-sec__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 44px; } .tpjc-sec__head h2 { font-size: 48px; max-width: 760px; } .tpjc-sec__head p { max-width: 560px; } /* ------------------------------------------------------------- buy/sell */ .tpjc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpjc-split__col { display: flex; flex-direction: column; gap: 22px; padding: 8px 72px 8px 0; border-right: 1px solid var(--line); } .tpjc-split__col + .tpjc-split__col { padding: 8px 0 8px 72px; border-right: 0; } .tpjc-split__col h3 { font-size: 34px; } .tpjc-split__links { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; align-items: flex-start; } /* ----------------------------------------------------------- what moves */ .tpjc-moving__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; } .tpjc-moving__head h2 { font-size: 48px; } .tpjc-moving__head > div { display: flex; flex-direction: column; gap: 16px; } .tpjc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 44px; } .tpjc-stats > div { display: flex; flex-direction: column; gap: 14px; padding: 32px 40px; border-left: 1px solid var(--line); } .tpjc-stats > div:first-child { padding-left: 0; border-left: 0; } .tpjc-stats .tpjc-num { font-size: 64px; } .tpjc-ledger { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 96px; align-items: start; } .tpjc-ledger__title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); } .tpjc-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-soft); } .tpjc-row .m { font-family: var(--disp); font-size: 18px; font-weight: 400; color: var(--ink); } .tpjc-row .d { font-size: 14.5px; color: var(--mist); } .tpjc-row .p { font-family: var(--disp); font-size: 17px; font-weight: 400; color: var(--ink); text-align: right; } .tpjc-ledger__foot { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; align-items: flex-start; } /* "What's moving" expandable panels: New to market / Recently sold */ .tpjc-accs { display: flex; flex-direction: column; } .tpjc-acc { border-top: 1px solid var(--ink); } .tpjc-acc:last-child { border-bottom: 1px solid var(--ink); } .tpjc-acc__head { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: baseline; gap: 18px; width: 100%; padding: 22px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); font: inherit; } .tpjc-acc__title { font-family: var(--disp); font-size: 22px; font-weight: 300; letter-spacing: 0.01em; } .tpjc-acc__count { font-family: var(--disp); font-size: 13px; letter-spacing: 0.14em; color: var(--bronze); margin-left: 10px; vertical-align: middle; } .tpjc-acc__chev { position: relative; display: block; width: 12px; height: 12px; align-self: center; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); transition: transform 0.22s ease; } .tpjc-acc__head[aria-expanded="true"] .tpjc-acc__chev { transform: rotate(-135deg); } .tpjc-acc__head:hover .tpjc-acc__title { color: var(--bronze); } .tpjc-acc__body { padding: 0 0 26px; } .tpjc-acc__body .tpjc-row:first-child { border-top: 1px solid var(--line-soft); } .tpjc-row--link { text-decoration: none; color: inherit; } .tpjc-row--link:hover .m { color: var(--bronze); } .tpjc-row__tag { font-family: var(--disp); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); } .tpjc-acc__body .tpjc-ledger__foot { padding-top: 18px; } .tpjc-sold { letter-spacing: 0.14em; line-height: 1.9; } .tpjc-watch { display: flex; flex-direction: column; gap: 18px; padding-left: 48px; border-left: 1px solid var(--line); } .tpjc-watch h3 { font-size: 30px; } .tpjc-watch__fields { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .tpjc-watch__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .tpjc-watch .tpjc-btn { margin-top: 12px; align-self: flex-start; } .tpjc-watch__note { font-size: 13.5px; color: var(--mist-2); } .tpjc-watch__status { font-size: 14px; color: var(--ink-2); min-height: 20px; } /* ------------------------------------------------------------- listings */ .tpjc-listings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; } /* The exclusives band: four across with any short final row centred, so seven (or five) listings read as a deliberate arrangement rather than a grid with a hole in it. */ .tpjc-listings--excl { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 28px; } .tpjc-listings--excl > .tpjc-listing { flex: 0 0 calc((100% - 3 * 28px) / 4); min-width: 0; } .tpjc-listing { display: flex; flex-direction: column; gap: 14px; } .tpjc-listing__ph { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; background: var(--ice-2); } .tpjc-listing__t { font-family: var(--disp); font-size: 20px; font-weight: 400; color: var(--ink); display: block; } .tpjc-listing__s { font-family: var(--disp); font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist-2); display: block; } .tpjc-listing .tpjc-tlink { font-size: 10.5px; } .tpjc-listing .tpjc-tlink .rule { width: 24px; } /* ---------------------------------------------------------------- trust */ .tpjc-trust { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 96px; align-items: center; } .tpjc-trust__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; } .tpjc-trust__copy h2 { font-size: 48px; color: #fff; } .tpjc-trust__copy p { color: rgba(255, 255, 255, 0.66); max-width: 520px; } .tpjc-trust__copy .tpjc-tlink { color: #fff; margin-top: 6px; } .tpjc-trust__copy .tpjc-tlink:hover { color: var(--bronze-l); } .tpjc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.18); border-left: 1px solid rgba(255, 255, 255, 0.18); } .tpjc-facts > div { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; border-right: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .tpjc-facts .tpjc-num { font-size: 46px; color: #fff; } .tpjc-facts .tpjc-num--sm { font-size: 30px; padding-top: 8px; } .tpjc-facts .tpjc-kicker { color: rgba(255, 255, 255, 0.55); } .tpjc-press { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; padding: 34px var(--gutter); border-bottom: 1px solid var(--line-soft); background: #fff; } .tpjc-press img { height: 26px; width: auto; filter: grayscale(1); opacity: 0.66; transition: opacity 0.15s ease, filter 0.15s ease; } .tpjc-press__link { display: inline-flex; align-items: center; line-height: 0; } .tpjc-press__link:hover img, .tpjc-press__link:focus-visible img { opacity: 1; filter: grayscale(0); } /* ------------------------------------------------------------- insights */ .tpjc-insights { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 96px; align-items: center; } .tpjc-insights__copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; } .tpjc-insights__copy h2 { font-size: 48px; } .tpjc-insights__copy p { max-width: 460px; } .tpjc-insights__sub { display: flex; align-items: flex-end; gap: 24px; margin-top: 8px; max-width: 480px; width: 100%; } .tpjc-insights__sub .tpjc-btn { height: 44px; padding: 0 22px; } .tpjc-past { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .tpjc-past a { display: flex; gap: 18px; align-items: baseline; font-size: 16px; } .tpjc-past a:hover { color: var(--bronze); } .tpjc-past .tpjc-kicker { letter-spacing: 0.14em; flex: none; } .tpjc-note { display: flex; flex-direction: column; gap: 18px; padding: 40px 40px 34px; border: 1px solid var(--line); background: #fff; align-items: flex-start; } .tpjc-note__meta { display: flex; justify-content: space-between; align-items: baseline; width: 100%; gap: 16px; } .tpjc-note h3 { font-size: 26px; font-weight: 400; } .tpjc-note__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: 100%; } .tpjc-note__figs > div { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 22px 0; border-right: 1px solid var(--line); } .tpjc-note__figs > div:last-child { padding: 22px 0 22px 24px; border-right: 0; } .tpjc-note__figs .tpjc-num { font-size: 36px; } .tpjc-note__figs .tpjc-kicker { letter-spacing: 0.12em; line-height: 1.5; } /* ------------------------------------------------------------------ faq */ .tpjc-faqwrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 96px; } .tpjc-faqwrap > div:first-child { display: flex; flex-direction: column; gap: 18px; } .tpjc-faqwrap h2 { font-size: 44px; } .tpjc-faqs { display: flex; flex-direction: column; border-bottom: 1px solid var(--line-soft); } .tpjc-faq { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; border-top: 1px solid var(--line-soft); } .tpjc-faq .q { font-family: var(--disp); font-size: 18px; font-weight: 400; color: var(--ink); } .tpjc-faq .a { font-size: 16px; line-height: 1.7; color: var(--mist); margin: 0; } /* --------------------------------------------------------------- footer */ .tpjc-foot { border-top: 1px solid var(--line); background: #fff; padding: 56px var(--gutter) 32px; } .tpjc-foot__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px; } .tpjc-foot__brand { display: flex; flex-direction: column; gap: 18px; } .tpjc-foot__brand img { width: 154px; height: 48px; display: block; } .tpjc-foot__brand p { font-size: 15px; max-width: 340px; } .tpjc-foot__contact { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--ink); } .tpjc-fcol { display: flex; flex-direction: column; } .tpjc-fcol .tpjc-kicker { margin-bottom: 12px; } .tpjc-fcol a { display: block; font-size: 15px; color: var(--ink-2); line-height: 30px; } .tpjc-fcol a:hover { color: var(--bronze); } .tpjc-foot__base { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); margin-top: 48px; padding-top: 22px; font-size: 13px; color: var(--mist-2); } .tpjc-foot__base div { display: flex; gap: 24px; } .tpjc-foot__base .tpjc-kicker { letter-spacing: 0.14em; } /* ---------------------------------------------------------- breakpoints */ @media (max-width: 1240px) { :root { --gutter: 48px; } .tpjc-hero__copy h1 { font-size: 56px; } .tpjc-sec__head h2, .tpjc-moving__head h2, .tpjc-trust__copy h2, .tpjc-insights__copy h2 { font-size: 40px; } .tpjc-ledger, .tpjc-trust, .tpjc-insights { gap: 56px; } .tpjc-hero__lockup { right: 56px; width: 320px; } .tpjc-faqwrap { gap: 56px; } } @media (max-width: 1100px) { .tpjc-nav__links { gap: 24px; } .tpjc-nav__links a { font-size: 11px; letter-spacing: 0.12em; } .tpjc-split__col { padding-right: 40px; } .tpjc-split__col + .tpjc-split__col { padding-left: 40px; } .tpjc-listings { gap: 36px 22px; } .tpjc-stats .tpjc-num { font-size: 48px; } } @media (max-width: 960px) { .tpjc-nav { height: auto; min-height: 72px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .tpjc-nav__links { gap: 18px 22px; flex-wrap: wrap; width: 100%; justify-content: flex-start; } .tpjc-nav__links .tpjc-btn { margin-left: 0; } .tpjc-ledger, .tpjc-trust, .tpjc-insights, .tpjc-faqwrap { grid-template-columns: minmax(0, 1fr); } .tpjc-watch { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 32px; } .tpjc-listings { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpjc-listings--excl > .tpjc-listing { flex-basis: calc((100% - 22px) / 2); } .tpjc-hero__lockup { width: 260px; top: 88px; right: 40px; } .tpjc-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } } @media (max-width: 860px) { .tpjc-hero { height: auto; min-height: 0; } .tpjc-hero__inner { /* Back in flow so the hero grows with its content -- but still positioned, or the absolutely-positioned video and scrim would paint straight over the headline. */ position: relative; z-index: 2; flex-direction: column; align-items: flex-start; gap: 28px; padding: 300px var(--gutter) 56px; } .tpjc-hero__lockup { width: 220px; top: 100px; right: 50%; transform: translateX(50%); } /* The desktop gradient is tuned for a 700px hero; a taller stacked hero leaves the copy sitting in the bright middle of the frame, so deepen the scrim rather than let contrast drop. */ .tpjc-hero__scrim { background: linear-gradient(180deg, rgba(15, 23, 40, 0.25) 0%, rgba(15, 23, 40, 0.55) 40%, rgba(15, 23, 40, 0.92) 100%); } .tpjc-hero__cta { width: 100%; } .tpjc-hero__cta .tpjc-btn { flex: 1 1 200px; } .tpjc-hero__tick { align-items: flex-start; text-align: left; } /* Mobile hero-lead reorder: the header band is dropped altogether so the hero photo leads the page, and the duplicate nav/CTA rendered in the template right after the hero takes its place, centered. */ .tpjc-nav { display: none; } .tpjc-nav__links { display: none; } .tpjc-nav__links--mobile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 20px; padding: 28px var(--gutter) 4px; text-align: center; } .tpjc-nav__links--mobile .tpjc-btn { margin-left: 0; } .tpjc-split { grid-template-columns: minmax(0, 1fr); } .tpjc-split__col { padding: 0 0 36px; border-right: 0; border-bottom: 1px solid var(--line); } .tpjc-split__col + .tpjc-split__col { padding: 36px 0 0; border-bottom: 0; } .tpjc-moving__head { flex-direction: column; align-items: flex-start; gap: 20px; } .tpjc-stats { grid-template-columns: minmax(0, 1fr); } .tpjc-stats > div { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); } .tpjc-stats > div:first-child { border-top: 0; } } @media (max-width: 640px) { :root { --gutter: 20px; } body.tpjc-home { font-size: 15px; } .tpjc-hero__copy h1 { font-size: 38px; } .tpjc-hero__copy p { font-size: 16px; } .tpjc-hero__inner { padding-top: 260px; } .tpjc-hero__lockup { width: 180px; top: 80px; } .tpjc-sec { padding: 48px var(--gutter) 44px; } .tpjc-sec--ice, .tpjc-sec--ink { padding: 48px var(--gutter); } .tpjc-sec__head h2, .tpjc-moving__head h2, .tpjc-trust__copy h2, .tpjc-insights__copy h2 { font-size: 30px; } .tpjc-split__col h3, .tpjc-watch h3 { font-size: 24px; } .tpjc-body { font-size: 16px; } .tpjc-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; } .tpjc-row .d { grid-column: 1; } .tpjc-row .p { grid-row: 1; grid-column: 2; } .tpjc-listings { grid-template-columns: minmax(0, 1fr); gap: 32px; } .tpjc-listings--excl > .tpjc-listing { flex-basis: 100%; } .tpjc-watch__pair { grid-template-columns: minmax(0, 1fr); gap: 6px; } .tpjc-facts { grid-template-columns: minmax(0, 1fr); } .tpjc-note { padding: 28px 24px 24px; } .tpjc-note__figs { grid-template-columns: minmax(0, 1fr); } .tpjc-note__figs > div { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); } .tpjc-note__figs > div:last-child { padding: 18px 0; border-bottom: 0; } .tpjc-insights__sub { flex-direction: column; align-items: stretch; gap: 14px; } .tpjc-insights__sub .tpjc-btn { width: 100%; } .tpjc-foot__cols { grid-template-columns: minmax(0, 1fr); } .tpjc-foot__base { flex-direction: column; align-items: flex-start; gap: 14px; } .tpjc-faqwrap h2 { font-size: 28px; } .tpjc-press { gap: 28px; } .tpjc-press img { height: 20px; } } /* --------------------------------------------------- mobile presentation */ /* With the header band gone the lockup inside the photo is the only brand mark above the fold, so it is sized and lifted to carry that weight. Everything in the stacked single column is centred rather than left-ragged, and the two editorial text links in the buy/sell band become real buttons -- a hairline dash reads as body copy on a touch screen. */ @media (max-width: 860px) { .tpjc-hero__lockup { width: min(78vw, 340px); top: 54px; filter: saturate(1.4) contrast(1.06) drop-shadow(0 2px 16px rgba(255, 255, 255, 0.45)); } /* The base rule pins this absolutely with left/right gutter insets. At this width it goes back into normal flow as position:relative, where a leftover `left` is an OFFSET, not an inset -- it shoves the whole full-width box sideways by a gutter, so the centred copy lands off-centre and the buttons overhang the right edge. Clear both. */ .tpjc-hero__inner { left: auto; right: auto; align-items: center; text-align: center; padding-top: 236px; } .tpjc-hero__copy { align-items: center; text-align: center; max-width: 100%; } .tpjc-hero__copy p { max-width: 100%; } .tpjc-hero__cta { justify-content: center; } .tpjc-hero__tick { align-items: center; text-align: center; } /* These are column flexboxes -- text-align alone would leave the headings, links and buttons pinned to the left edge. */ .tpjc-split__col, .tpjc-moving__head, .tpjc-moving__head > div, .tpjc-stats > div, .tpjc-ledger__foot, .tpjc-watch, .tpjc-note, .tpjc-note__figs > div, .tpjc-listing, .tpjc-trust__copy, .tpjc-insights__copy, .tpjc-faqwrap > div:first-child, .tpjc-faq, .tpjc-foot__brand, .tpjc-foot__contact, .tpjc-foot__base, .tpjc-foot__base div { align-items: center; text-align: center; } .tpjc-split__col p, .tpjc-trust__copy p, .tpjc-insights__copy p, .tpjc-foot__brand p, .tpjc-sec__head h2, .tpjc-sec__head p { max-width: 100%; } .tpjc-moving__head { flex-direction: column; } .tpjc-watch .tpjc-btn { align-self: center; } .tpjc-watch__fields, .tpjc-watch__pair { width: 100%; } .tpjc-note__meta { flex-direction: column; align-items: center; gap: 8px; } /* The navy/black lockup goes flat at phone size; the full-colour one carries the bronze mark and reads far better against the photo. */ .tpjc-hero__lockup { display: none; } .tpjc-home .tpjc-hero__lockup--colour { display: block; } /* The hairline dash sits to one side of its label, which reads as off-centre once everything around it is centred. */ .tpjc-tlink .rule { display: none; } /* Anything that is actually a call to action gets a real box, so it is obvious it can be tapped. The "View details" inside a listing card stays as text -- the whole card is already the link. */ .tpjc-split__links { align-items: stretch; width: 100%; gap: 12px; margin-top: 4px; } .tpjc-split__links .tpjc-tlink, .tpjc-moving__head .tpjc-tlink, .tpjc-ledger__foot .tpjc-tlink, .tpjc-trust__copy .tpjc-tlink, .tpjc-note .tpjc-tlink { justify-content: center; min-height: 54px; padding: 15px 22px; border: 1px solid rgba(20, 28, 46, 0.4); background: rgba(255, 255, 255, 0.78); color: var(--ink); } .tpjc-moving__head .tpjc-tlink, .tpjc-ledger__foot .tpjc-tlink, .tpjc-trust__copy .tpjc-tlink, .tpjc-note .tpjc-tlink { align-self: stretch; } /* The trust band sits on --ink, so the same box needs light edges. */ .tpjc-trust__copy .tpjc-tlink { border-color: rgba(255, 255, 255, 0.5); background: transparent; color: #fff; } } @media (prefers-reduced-motion: reduce) { .tpjc-home * { animation: none !important; transition: none !important; } } /* "What's moving" panels on phones: title + count on one line, the period kicker beneath, chevron pinned right. */ @media (max-width: 640px) { .tpjc-acc__head { grid-template-columns: minmax(0, 1fr) 18px; grid-template-rows: auto auto; padding: 18px 0; row-gap: 6px; } .tpjc-acc__head .tpjc-kicker { grid-column: 1; grid-row: 2; } .tpjc-acc__chev { grid-column: 2; grid-row: 1 / span 2; } .tpjc-acc__title { font-size: 20px; white-space: nowrap; } .tpjc-acc__body .tpjc-row { grid-template-columns: minmax(0, 1fr) auto; } .tpjc-acc__body .tpjc-row .d { grid-column: 1 / -1; } } /* `hidden` must always win, whatever the host theme loads. */ .tpjc-home [hidden], .tpjc-acc__body[hidden] { display: none !important; }