/* ========================================================================== t3trends.com — design system Editorial, ink/paper/brass, all-serif — matching tinus.com's real design language, restored July 24, 2026 at explicit user direction. A prior pass replaced this with the literal T3 Sixty corporate brand system (Theinhardt, flat navy/yellow), which made the Trends Report page look like every other T3 asset — directly missing Stefan's own brief for this page specifically: "we need to make some of the things headings and bigger font and sometimes capital, sometimes exclamation... to make the page visually think back on a typical infographics kind of [layout]... deliberate typographic irregularity, not a fixed grid." The Trends Report is the one piece of T3 Sixty collateral that is explicitly meant to look and feel different from the rest of the brand system — this file is that departure. Fraunces (display serif, italic-for-emphasis) + Newsreader (body serif) are loaded via Google Fonts tags in each page's . Theinhardt/FT T360 remain available below for anything that needs the literal corporate mark (the header logo lockup), but are not the dominant voice on this page. ========================================================================== */ @font-face { font-family: 'Theinhardt'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-Ultralight.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: italic; font-weight: 200; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-UltralightIta.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-Thin.woff') format('woff'); } @font-face { font-family: 'Theinhardt'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-ThinIta.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: normal; font-weight: 350; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-Light.woff') format('woff'); } @font-face { font-family: 'Theinhardt'; font-style: italic; font-weight: 350; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-LightIta.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-Regular.woff') format('woff'); } @font-face { font-family: 'Theinhardt'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-RegularIta.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-Medium.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-MediumIta.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-Bold.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-BoldIta.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-Black.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: italic; font-weight: 900; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-BlackIta.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-Hairline.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: italic; font-weight: 100; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-HairlineIta.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-Heavy.ttf') format('truetype'); } @font-face { font-family: 'Theinhardt'; font-style: italic; font-weight: 800; font-display: swap; src: url('../fonts/Theinhardt/Theinhardt-HeavyIta.ttf') format('truetype'); } @font-face { font-family: 'FT T360'; font-style: normal; font-weight: normal; font-display: swap; src: url('../fonts/FT_T360/FT_T360-Regular.ttf') format('truetype'); } :root{ /* ---- Editorial ink/paper/brass — matches tinus.com's own tokens, --color-ink tinted a hair toward T3 Sixty navy as the one deliberate brand-continuity nod (true tinus.com value is pure #0E0E0E). ---- */ --color-ink:#121319; --color-ink-soft:#1C1D24; --color-paper:#F4EFE6; --color-paper-soft:#EAE3D2; --color-paper-deep:#DFD6C0; --color-brass:#B8895A; --color-brass-light:#C9A074; --color-brass-dim:rgba(184,137,90,.35); --color-ash:#5A544C; --color-ash-soft:#8A8278; --color-bone:#E8E2D4; --color-rule-dark:rgba(232,226,212,.18); --color-rule-light:rgba(18,19,25,.12); /* ---- T3 Sixty corporate palette — kept available for the header logo mark, and now reintroduced deliberately for one spot: the intro carousel's buy button, which was getting lost against the brass/ink palette. Not the dominant palette on this page — a targeted accent, not a reversion. ---- */ --t3-yellow:#f9c80e; --color-accent-blue:#276bb4; --color-accent-blue-light:#3d84cf; /* ---- Semantic tokens — same names used throughout the CSS, repointed to the editorial values above so every section inherits the new language without a section-by-section rewrite. ---- */ --color-primary:var(--color-ink); --color-primary-dark:var(--color-ink-soft); --color-accent:var(--color-brass); --color-accent-dark:var(--color-brass-light); --color-accent-soft:var(--color-brass-dim); --color-highlight:var(--color-brass-light); --color-highlight-soft:var(--color-paper-deep); --color-white:var(--color-bone); --color-black:var(--color-ink); --color-neutral-100:var(--color-paper-soft); --color-neutral-200:var(--color-paper-deep); --color-neutral-300:var(--color-brass-dim); --color-text-dark:var(--color-ink); --color-text-neutral:var(--color-ash); --color-success:#5C7A52; --color-risk:#A6433A; --font-family:"Newsreader", Georgia, serif; --font-family-logo:"FT T360", sans-serif; --font-family-serif:"Fraunces","Times New Roman",serif; --font-family-body:"Newsreader", Georgia, serif; --font-weight-ultralight:300; --font-weight-thin:300; --font-weight-light:400; --font-weight-normal:400; --font-weight-medium:500; --font-weight-bold:600; --font-weight-black:700; /* Web type scale — kept at the same step names/sizes used across landing.css, just no longer tied to the T360 tailwind config. */ --text-display-lg:64px; --leading-display-lg:72px; --text-display:48px; --leading-display:56px; --text-heading-xl:40px; --leading-heading-xl:48px; --text-heading-lg:32px; --leading-heading-lg:40px; --text-heading:24px; --leading-heading:32px; --text-heading-sm:20px; --leading-heading-sm:28px; --text-body-lg:18px; --leading-body-lg:28px; --text-body:17px; --leading-body:26px; --text-body-sm:14px; --leading-body-sm:20px; --max-width:1280px; --radius:0; --shadow-soft:0 20px 60px rgba(18,19,25,.16); --shadow-card:0 12px 30px rgba(18,19,25,.14); } *{ box-sizing:border-box; } /* overscroll-behavior-y:none — carried over from the parallel session's mobile sticky-CTA overscroll fix (origin/main 249b6bf): without it, iOS rubber-banding past the footer exposes blank space the sticky bar's padding-bottom briefly wasn't covering. */ html{ scroll-behavior:smooth; background:var(--color-ink-soft); overscroll-behavior-y:none; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--font-family-body); font-size:var(--text-body); line-height:var(--leading-body); color:var(--color-text-dark); background:var(--color-paper); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overscroll-behavior-y:none; } h1,h2,h3,h4{ font-family:var(--font-family-serif); font-weight:400; color:var(--color-ink); line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; } em, i{ font-style:italic; } p{ margin:0 0 1.1em; color:var(--color-text-neutral); } p:last-child{ margin-bottom:0; } a{ color:inherit; } img{ max-width:100%; display:block; } .container{ max-width:var(--max-width); margin:0 auto; padding:0 clamp(20px,4vw,48px); } /* Primary CTA — used site-wide. Sharp corners, small-caps, the reintroduced T3 blue fill (matches the intro carousel's original .t3t-btn-blue) — per explicit direction, every button on the page now shares this one consistent action color rather than brass varying section to section. */ .t3-btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--color-accent-blue); color:var(--color-bone); font-family:var(--font-family-body); font-weight:var(--font-weight-medium); font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; padding:18px 34px; border-radius:0; border:1px solid var(--color-accent-blue); cursor:pointer; text-decoration:none; transition:background .2s ease, border-color .2s ease, color .2s ease; white-space:nowrap; } .t3-btn-primary:hover{ background:var(--color-accent-blue-light); border-color:var(--color-accent-blue-light); } .t3-btn-primary:active{ transform:translateY(1px); } .t3-btn-primary .t3-btn-sub{ display:block; font-weight:var(--font-weight-normal); font-size:11px; text-transform:none; letter-spacing:0; font-style:italic; opacity:.8; } /* ---------- Site header — shared verbatim across every page ---------- */ .t3t-header{ position:sticky; top:0; z-index:500; background:#110F13; backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); border-bottom:1px solid var(--color-rule-dark); } .t3t-header-inner{ max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px clamp(20px,4vw,48px); } .t3t-logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--color-bone); } .t3t-logo img{ height:26px; width:auto; } .t3t-logo-text{ font-family:var(--font-family-logo); font-style:normal; font-weight:400; font-size:17px; letter-spacing:.01em; color:var(--color-brass-light); white-space:nowrap; } .t3t-logo-divider{ width:1px; height:18px; background:var(--color-rule-dark); } .t3t-edition-tag{ font-family:var(--font-family-body); font-weight:var(--font-weight-medium); font-size:11px; color:var(--color-ash-soft); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; } .t3t-header .t3-btn-primary{ padding:12px 22px; font-size:11.5px; } @media (max-width:640px){ .t3t-edition-tag{ display:none; } .t3t-logo-text{ display:none; } }