/*
Theme Name: Tenscale Landing
Theme URI: https://tenscale.ai
Author: Tenscale
Description: Tenscale CEE landing page — pixel-perfect editorial premium.
Version: 3.3.6
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
Text Domain: tenscale-landing
*/
/* =========================================================================
Design tokens — lock; never change without coordinating with design
========================================================================= */
:root {
/* Palette-12 "Deep Royal" — pure white + saturated royal purple + ink-deep */
/* Colors — body (now paper-white, was warm cream) */
--cream: #FFFFFF;
--cream-deep: #F0EBF5; /* subtle lavender-grey */
--ink: #14101A; /* near-black with purple undertone */
--ink-strong: #0A0712; /* deepest ink — display copy */
--slate: #5E5A62;
--slate-alt: #6E6E80;
--slate-dim: #8C8790;
--warm-grey: #9A9590;
/* Colors — accent + emphasis (royal purple, more saturated) */
--purple: #5B21B6; /* royal plum */
--purple-hover: #4C1D95;
--purple-active: #3F1880;
--purple-bright: #7C3AED; /* dark-section accent */
--purple-tint: rgba(91, 33, 182, 0.08);
--purple-glow: rgba(91, 33, 182, 0.20);
--purple-shadow-df: rgba(91, 33, 182, 0.22);
--purple-shadow-hv: rgba(91, 33, 182, 0.30);
--purple-shadow-ac: rgba(91, 33, 182, 0.24);
--strike: #B04A3A;
/* Utility (rebased to ink-deep #0A0712 for tighter purple harmony) */
--hairline: rgba(10, 7, 18, 0.08);
--hairline-strong: rgba(10, 7, 18, 0.12);
--card-shadow: rgba(10, 7, 18, 0.04);
--shadow-hairline: rgba(10, 7, 18, 0.06);
--shadow-bottom: rgba(10, 7, 18, 0.08);
--white: #FFFFFF;
--bg-glass: rgba(255, 255, 255, 0.82);
--bg-glass-scroll: rgba(255, 255, 255, 0.92);
/* Typography families */
--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Motion */
--ease-out-fast: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-tap: ease-out;
--ease-ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
}
/* =========================================================================
Reset + base
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
/* Prevent decorative halos / pseudo-elements from triggering horizontal
scroll (especially on iOS pinch-zoom). `clip` preserves position:sticky
unlike `hidden`. */
overflow-x: clip;
}
body { overflow-x: clip; }
/* Global 15% scale-down on desktop/tablet viewports only. Mobile stays 100%.
Uses CSS `zoom` so layout + media queries recalculate (unlike transform:scale). */
@media (min-width: 768px) {
html { zoom: 0.85; }
}
body {
margin: 0;
background: var(--cream);
color: var(--ink-strong);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 2px; }
/* Hide WP admin bar spacing if present (top margin) */
body.admin-bar .ts-header { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .ts-header { top: 46px; }
}
/* =========================================================================
Section 0 — Header
========================================================================= */
.ts-header {
position: relative; /* not sticky */
z-index: 50;
height: 72px;
background: var(--cream);
border-bottom: 1px solid var(--hairline); /* editorial separator from body */
}
.ts-header.is-scrolled {
background: var(--cream);
box-shadow: none;
}
.ts-header__inner {
max-width: 1200px;
margin: 0 auto;
height: 100%;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ts-logo {
display: inline-flex;
align-items: center;
gap: 10px;
transition: opacity 150ms var(--ease-out-fast);
}
.ts-logo:hover { opacity: 0.9; }
.ts-logo__mark {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.ts-logo__mark path { fill: var(--purple); }
.ts-logo__word {
font-family: var(--font-sans);
font-weight: 600;
font-size: 18px;
color: var(--ink-strong);
letter-spacing: -0.01em;
}
.ts-btn--header {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--white);
background: var(--purple);
padding: 10px 18px;
border-radius: 8px;
transition: background 150ms var(--ease-out-fast),
transform 150ms var(--ease-out-fast),
box-shadow 150ms var(--ease-out-fast);
}
/* Show the correct label per viewport */
.ts-btn__label--mobile { display: none; }
@media (max-width: 767px) {
.ts-btn__label--desktop { display: none; }
.ts-btn__label--mobile { display: inline; }
}
.ts-btn--header:hover {
background: var(--purple-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(107, 63, 160, 0.25);
}
.ts-btn--header:active {
background: var(--purple-active);
transform: translateY(0);
box-shadow: 0 2px 6px rgba(107, 63, 160, 0.20);
transition-duration: 80ms;
}
/* Mobile header */
@media (max-width: 767px) {
.ts-header {
position: static;
height: 56px;
background: var(--cream);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 1px solid var(--hairline); /* subtle separator from body */
}
.ts-header.is-scrolled { box-shadow: none; }
.ts-header__inner { padding: 0 16px; }
.ts-logo__mark { width: 20px; height: 20px; }
.ts-logo__word { font-size: 16px; }
.ts-btn--header {
font-size: 13px;
padding: 8px 14px;
border-radius: 6px;
}
}
/* Mobile sticky bottom bar */
.ts-mobile-cta {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 40;
background: var(--white);
box-shadow: 0 -4px 16px var(--shadow-bottom);
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
transform: translateY(100%);
opacity: 0;
transition: transform 300ms var(--ease-ios-spring),
opacity 200ms var(--ease-out-tap);
}
.ts-mobile-cta.is-visible {
transform: translateY(0);
opacity: 1;
}
.ts-mobile-cta__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 48px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
color: var(--white);
background: var(--purple);
border-radius: 8px;
}
@media (max-width: 767px) {
.ts-mobile-cta { display: block; }
}
/* =========================================================================
Section 1 — Hero
========================================================================= */
.ts-hero {
background: var(--cream);
padding: 56px 24px 48px;
}
.ts-hero__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 42fr 58fr;
gap: 64px;
align-items: start;
}
/* each line wraps naturally within its own block; no balance */
/* Portrait card — combined purple halo (80px, alpha 0.18) + subtle depth per §1 spec */
.ts-hero__portrait {
position: relative;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow:
0 0 80px 0 var(--purple-glow),
0 1px 2px 0 var(--card-shadow);
}
.ts-hero__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
/* Copy stack */
.ts-hero__copy { text-align: left; }
.ts-eyebrow {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--purple);
background: transparent;
border: 1px solid var(--purple);
border-radius: 9999px;
padding: 6px 12px;
}
.ts-hero__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 52px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 20px 0 0;
}
.ts-hero__headline-line {
display: block;
}
.ts-hero__headline--accent { color: var(--purple); }
.ts-hero__subhead {
font-family: var(--font-sans);
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: var(--slate-alt);
margin: 20px 0 0;
max-width: 560px;
}
.ts-hero__subhead .u-strike {
color: var(--strike);
text-decoration: line-through;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--strike);
text-decoration-style: solid;
}
.ts-hero__subhead .u-emphasis {
font-weight: 700;
color: var(--ink-strong);
}
.ts-btn--hero {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 32px;
height: 56px;
padding: 18px 32px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
color: var(--white);
background: var(--purple);
border-radius: 10px;
box-shadow: 0 8px 24px 0 var(--purple-shadow-df);
transition: background 150ms var(--ease-out-fast),
transform 150ms var(--ease-out-fast),
box-shadow 150ms var(--ease-out-fast);
}
.ts-btn--hero:hover {
background: var(--purple-hover);
transform: translateY(-1px);
box-shadow: 0 12px 28px 0 var(--purple-shadow-hv);
}
.ts-btn--hero:active {
background: var(--purple-active);
transform: translateY(0);
box-shadow: 0 6px 16px 0 var(--purple-shadow-ac);
transition-duration: 80ms;
}
.ts-btn--hero svg { width: 18px; height: 18px; }
.ts-trust-row {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
margin-top: 16px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
color: var(--slate-alt);
}
.ts-trust-row__item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.ts-trust-row__sep {
color: var(--slate-alt);
padding: 0 10px;
user-select: none;
}
.ts-price-line {
margin-top: 8px;
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
color: var(--slate-alt);
max-width: 480px;
}
.ts-hairline {
width: 280px;
height: 1px;
background: var(--hairline);
margin: 24px 0;
border: 0;
}
.ts-proof-row {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--slate-alt);
}
.ts-proof-row__item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.ts-proof-row__sep {
color: var(--slate-alt);
padding: 0 6px;
user-select: none;
}
/* Icons (Lucide SVG inline) */
.ts-icon {
width: 16px;
height: 16px;
stroke-width: 1.75;
flex-shrink: 0;
}
/* Tablet */
@media (max-width: 1023px) and (min-width: 768px) {
.ts-hero { padding: 48px 32px 64px; }
.ts-hero__inner {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.ts-hero__headline { font-size: 48px; line-height: 1.08; letter-spacing: -0.015em; }
.ts-hero__subhead { font-size: 17px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-hero { padding: 32px 16px 56px; }
.ts-hero__inner {
grid-template-columns: 1fr;
gap: 0;
}
/* Reorder: copy first, portrait last */
.ts-hero__copy { order: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ts-hero__portrait { order: 2; margin-top: 32px; border-radius: 20px; }
.ts-hero__headline {
font-size: 40px;
line-height: 1.1;
letter-spacing: -0.01em;
text-align: center;
max-width: 100%;
}
.ts-hero__subhead {
font-size: 15px;
text-align: center;
max-width: 100%;
margin-top: 20px;
}
.ts-btn--hero {
width: 100%;
justify-content: center;
height: 48px;
padding: 14px 24px;
font-size: 15px;
}
.ts-trust-row { justify-content: center; font-size: 13px; gap: 0; }
.ts-price-line { text-align: center; font-size: 13px; max-width: 100%; }
.ts-hairline { width: 60%; margin-left: auto; margin-right: auto; }
.ts-proof-row {
flex-direction: column;
gap: 8px;
font-size: 13px;
}
.ts-proof-row__sep { display: none; }
}
/* Load animation — disabled for screenshot testing. Re-enable later.
@keyframes tsFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
*/
/* =========================================================================
Section 2 — Who We Work With
========================================================================= */
.ts-wwwk {
background: var(--cream);
padding: 48px 24px 80px;
}
.ts-wwwk__inner {
max-width: 1200px;
margin: 0 auto;
}
/* Layer 1 — Availability strip */
.ts-wwwk__avail {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.ts-wwwk__avail .ts-eyebrow { text-transform: uppercase; }
.ts-wwwk__countries {
font-family: var(--font-sans);
font-weight: 700;
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink-strong);
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.ts-wwwk__sep {
color: var(--slate-alt);
font-weight: 400;
user-select: none;
}
.ts-wwwk__lang {
font-family: var(--font-sans);
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: var(--slate-alt);
margin: -6px 0 0;
}
/* Divider between layers */
.ts-wwwk__divider {
width: 280px;
height: 1px;
background: var(--hairline);
border: 0;
margin: 40px auto;
}
/* Layer 2 — Heading */
.ts-wwwk__heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.ts-wwwk__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 44px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink-strong);
margin: 0;
max-width: 920px;
text-wrap: balance;
}
.ts-wwwk__headline--accent { color: var(--purple); }
/* Cards grid */
.ts-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
align-items: stretch;
gap: 24px;
margin-top: 40px;
}
.ts-card {
background: #FEFDFA;
border: 1px solid rgba(26, 26, 46, 0.06);
border-radius: 16px;
padding: 32px 24px;
box-shadow:
0 1px 2px rgba(26, 26, 46, 0.05),
0 10px 24px rgba(26, 26, 46, 0.07);
transition: box-shadow 200ms var(--ease-out-fast),
transform 200ms var(--ease-out-fast);
display: flex;
flex-direction: column;
/* align-items defaults to stretch — children span full card width so hairline (80%) and text wrap correctly */
text-align: center;
/* grid's align-items: stretch handles vertical sizing — no height:100% needed (and it conflicts) */
}
/* Push the hairline + outcome to the bottom of every card so all 4 cards line up */
.ts-card__hairline { margin-top: auto; }
.ts-card:hover {
box-shadow:
0 2px 4px rgba(26, 26, 46, 0.06),
0 16px 32px rgba(26, 26, 46, 0.10);
transform: translateY(-2px);
}
.ts-card__badge {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--purple);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.ts-card__badge svg {
width: 24px;
height: 24px;
}
.ts-card__name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
line-height: 1.3;
color: var(--ink-strong);
margin: 0 0 12px;
text-align: center;
}
.ts-card__industries {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: var(--slate-alt);
margin: 0;
text-align: center;
}
.ts-card__hairline {
width: 80%;
height: 1px;
background: rgba(26, 26, 46, 0.06);
border: 0;
margin: 16px auto 12px;
}
.ts-card__outcome {
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--slate-alt);
margin: 0;
text-align: center;
min-height: calc(13px * 1.4 * 2); /* reserve 2 lines; single-line flows at top so line 1 aligns across cards */
}
/* Layer 3 — Price re-anchor */
.ts-wwwk__reanchor {
margin: 40px 0 0;
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: var(--slate-alt);
text-align: center;
}
.ts-wwwk__reanchor strong {
font-weight: 700;
color: var(--ink-strong);
}
/* Layer 4 — Forward-motion CTA */
.ts-wwwk__cta-wrap {
margin-top: 32px;
text-align: center;
}
.ts-wwwk__cta {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
color: var(--purple);
text-decoration: none;
transition: text-decoration-color 150ms var(--ease-out-fast);
}
.ts-wwwk__cta:hover {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--purple);
text-underline-offset: 3px;
}
/* Tablet */
@media (max-width: 1023px) and (min-width: 768px) {
.ts-wwwk { padding: 72px 32px; }
.ts-wwwk__countries { font-size: 28px; }
.ts-wwwk__headline { font-size: 36px; }
.ts-cards {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
/* Mobile */
@media (max-width: 767px) {
.ts-wwwk { padding: 56px 16px; }
.ts-wwwk__countries {
font-size: 24px;
gap: 10px;
}
.ts-wwwk__lang { font-size: 14px; }
.ts-wwwk__divider { width: 60%; height: 1.5px; margin: 32px auto; background: rgba(26, 26, 46, 0.10); }
.ts-wwwk__headline { font-size: 26px; }
.ts-cards {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 32px;
}
.ts-card { padding: 20px; }
.ts-card__badge { width: 44px; height: 44px; }
.ts-card__badge svg { width: 22px; height: 22px; }
.ts-card__name { font-size: 18px; }
.ts-wwwk__reanchor { font-size: 14px; }
.ts-wwwk__cta { font-size: 15px; }
}
/* =========================================================================
§3 — How it works
========================================================================= */
.ts-hiw {
background: var(--cream);
padding: 80px 24px 32px;
}
.ts-hiw__inner {
max-width: 1200px;
margin: 0 auto;
}
/* Section header */
.ts-hiw__header { text-align: center; }
.ts-hiw__eyebrow {
display: inline-block;
margin-bottom: 20px;
}
.ts-hiw__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 44px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink-strong);
margin: 0;
text-align: center;
}
.ts-hiw__headline--accent { color: var(--purple); }
/* Split body — 55/45 with phone on right */
.ts-hiw__split {
display: grid;
grid-template-columns: 55% 45%;
column-gap: 64px;
margin-top: 48px;
align-items: center;
}
/* Left column — stacked phase cards */
.ts-hiw__phases {
display: flex;
flex-direction: column;
gap: 24px;
}
.ts-phase {
background: #FFFFFF;
border: 1px solid rgba(26, 26, 46, 0.05);
border-radius: 20px;
padding: 32px 36px;
/* Stacked shadow — subtle near-plane + soft ambient — visible on cream */
box-shadow:
0 1px 2px 0 rgba(26, 26, 46, 0.05),
0 12px 28px 0 rgba(26, 26, 46, 0.07);
}
.ts-phase__header {
display: flex;
align-items: baseline;
margin-bottom: 24px;
}
.ts-phase__name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
color: var(--ink-strong);
}
.ts-phase__sep {
margin: 0 8px;
color: var(--slate-alt);
font-weight: 400;
}
.ts-phase__duration {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
color: var(--slate-alt);
}
/* Step list */
.ts-steps {
list-style: none;
padding: 0;
margin: 0;
}
.ts-step {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 20px;
align-items: start;
padding: 0;
}
.ts-step + .ts-step { margin-top: 16px; }
.ts-step__num {
font-family: var(--font-sans);
font-weight: 700;
font-size: 18px;
line-height: 1;
color: #9B9BAF;
font-variant-numeric: tabular-nums;
padding-top: 1px;
}
.ts-step__body { min-width: 0; }
.ts-step__main {
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
line-height: 1.5;
color: var(--ink-strong);
margin: 0;
}
.ts-step__desc {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: var(--slate-alt);
margin: 4px 0 0;
}
/* Step 08 — narrative peak. */
/* Structure: row extends to card edges (negative margins match card */
/* horizontal padding). Purple border-left sits flush at card inner-left */
/* edge. Cream highlight is a rounded-rect pill ::before inset from both */
/* sides of the row (not edge-to-edge). Content layers above the pill. */
.ts-step--peak {
position: relative;
margin-left: -36px;
margin-right: -36px;
padding: 8px 36px 8px 34px; /* 2px border + 34px = 36px content offset */
border-left: 2px solid var(--purple);
background: transparent;
}
.ts-step--peak::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 10px; /* small gap after the purple border */
right: 10px; /* symmetric inset from right */
background: #F7F3E8;
border-radius: 6px;
z-index: 0;
}
.ts-step--peak .ts-step__num,
.ts-step--peak .ts-step__body {
position: relative;
z-index: 1;
}
.ts-step--peak .ts-step__num { color: var(--purple); }
.ts-step--peak .ts-step__main { font-weight: 700; }
/* Right column — phone mockup */
.ts-hiw__phone {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ts-hiw__phone img {
display: block;
width: 100%;
max-width: 460px;
height: auto;
}
/* Connector line — hangs above DAY 1 column (leftmost timeline marker) */
/* instead of centered, acting as a visual lead-in from the stacked phase */
/* cards above down to the first event on the timeline. */
.ts-hiw__connector {
width: 1px;
height: 80px;
background: rgba(26, 26, 46, 0.12);
margin: 32px 0 24px;
margin-left: calc(12.5% - 0.5px);
}
/* Timeline — horizontal desktop */
.ts-timeline {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
position: relative;
}
.ts-timeline::before {
content: "";
position: absolute;
left: 12.5%;
right: 12.5%;
top: calc(16px + 16px + 9px); /* label 16 + label-margin 16 + half marker (18/2) */
height: 1px;
background: rgba(26, 26, 46, 0.12);
z-index: 1;
}
.ts-timeline__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ts-timeline__label {
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate-alt);
margin-bottom: 16px;
}
.ts-timeline__dot {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--purple);
position: relative;
z-index: 2;
}
.ts-timeline__desc {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: var(--ink-strong);
margin-top: 16px;
max-width: 180px;
}
/* §3 Subline — introduces the platform under the main headline */
.ts-hiw__subline {
text-align: center;
font-family: var(--font-sans);
font-size: 18px;
font-weight: 500;
line-height: 1.4;
color: var(--slate-alt);
margin: 18px auto 0;
max-width: 720px;
}
/* Two-pillar foundation — Platform + Specialist intro at top of §3
Asymmetric: platform pillar carries 4-check innovation list (the star);
specialist pillar stays short (the quiet pair). */
.ts-hiw__pillars {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 36px;
max-width: 1000px;
margin: 36px auto 0;
padding: 28px 28px;
border-top: 1px solid rgba(26, 26, 46, 0.10);
border-bottom: 1px solid rgba(26, 26, 46, 0.10);
}
.ts-hiw__pillar {
display: flex;
align-items: flex-start;
gap: 16px;
flex: 1;
min-width: 0;
}
/* Both pillars now carry 4-check lists — equal flex */
.ts-hiw__pillar--platform { flex: 1; }
.ts-hiw__pillar--specialist { flex: 1; }
.ts-hiw__pillar-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--purple-tint);
color: var(--purple);
display: inline-flex;
align-items: center;
justify-content: center;
}
.ts-hiw__pillar-icon svg {
width: 22px;
height: 22px;
}
.ts-hiw__pillar-text {
flex: 1;
min-width: 0;
}
.ts-hiw__pillar-label {
display: block;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--purple);
margin: 0 0 8px;
}
.ts-hiw__pillar-body {
font-family: var(--font-sans);
font-size: 14.5px;
font-weight: 400;
line-height: 1.45;
color: var(--ink-strong);
margin: 0;
}
/* Platform check-list — 4 innovation signals with purple checkmarks */
.ts-hiw__pillar-checks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.ts-hiw__pillar-checks li {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: var(--ink-strong);
position: relative;
padding-left: 22px;
}
.ts-hiw__pillar-checks li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.ts-hiw__pillar-plus {
font-family: var(--font-sans);
font-weight: 600;
font-size: 28px;
line-height: 1;
color: var(--purple);
flex-shrink: 0;
user-select: none;
opacity: 0.6;
align-self: center;
}
/* Tablet — slightly tighter */
@media (max-width: 1023px) and (min-width: 720px) {
.ts-hiw__pillars {
gap: 24px;
padding: 24px;
}
.ts-hiw__pillar-checks li { font-size: 13.5px; }
}
/* Mobile — stack vertically */
@media (max-width: 720px) {
.ts-hiw__subline { font-size: 15.5px; margin-top: 14px; }
.ts-hiw__pillars {
flex-direction: column;
gap: 16px;
padding: 22px 20px;
margin-top: 28px;
}
.ts-hiw__pillar {
width: 100%;
}
.ts-hiw__pillar--platform,
.ts-hiw__pillar--specialist { flex: none; }
.ts-hiw__pillar-icon {
width: 38px;
height: 38px;
}
.ts-hiw__pillar-icon svg {
width: 19px;
height: 19px;
}
.ts-hiw__pillar-body {
font-size: 13.5px;
}
.ts-hiw__pillar-checks li { font-size: 13px; }
.ts-hiw__pillar-plus {
font-size: 20px;
opacity: 0.4;
}
}
/* Closing CTA */
.ts-hiw__cta-wrap {
margin-top: 48px;
text-align: center;
}
.ts-hiw__cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
color: var(--purple);
text-decoration: none;
transition: text-decoration-color 150ms var(--ease-out-fast);
}
.ts-hiw__cta:hover {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--purple);
text-underline-offset: 3px;
}
/* Tablet */
@media (max-width: 1023px) and (min-width: 768px) {
.ts-hiw { padding: 64px 32px 24px; }
.ts-hiw__headline { font-size: 36px; }
.ts-hiw__split { grid-template-columns: 60% 40%; column-gap: 48px; }
.ts-hiw__phases { gap: 20px; }
.ts-phase { padding: 32px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-hiw { padding: 56px 16px 48px; }
.ts-hiw__headline { font-size: 28px; }
.ts-hiw__split {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 32px;
margin-top: 32px;
}
.ts-hiw__phases { gap: 16px; }
.ts-phase { padding: 24px; border-radius: 18px; }
.ts-phase__header { margin-bottom: 20px; }
.ts-phase__name { font-size: 18px; }
.ts-phase__duration { font-size: 14px; }
.ts-step { column-gap: 16px; }
.ts-step + .ts-step { margin-top: 14px; }
.ts-step__num { font-size: 20px; }
.ts-step__main { font-size: 15px; }
.ts-step__desc { font-size: 13px; }
.ts-step--peak {
margin-left: -24px;
margin-right: -24px;
/* 22 + 2px border = 24px, so step 08 content aligns with other rows' 24px card padding */
padding-left: 22px;
padding-right: 24px;
}
.ts-step--peak::before {
left: 8px;
right: 8px;
}
.ts-hiw__phone img { max-width: 280px; }
.ts-hiw__connector { height: 40px; margin: 24px auto; }
.ts-timeline {
grid-template-columns: 1fr;
row-gap: 20px;
}
.ts-timeline::before { display: none; }
.ts-timeline__item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
text-align: left;
align-items: start;
}
.ts-timeline__label {
grid-column: 2;
margin-bottom: 4px;
}
.ts-timeline__dot { grid-column: 1; grid-row: 1 / 3; margin-top: 6px; }
.ts-timeline__desc { grid-column: 2; margin-top: 0; max-width: none; font-size: 14px; }
.ts-hiw__cta-wrap { margin-top: 32px; }
.ts-hiw__cta { font-size: 15px; }
}
/* =========================================================================
§4 — How €197 Works (thesis beat)
Four stacked regions on cream: header, 3-col stat grid, proof, quote.
Typography-only — no cards, no shadows, no imagery.
========================================================================= */
.ts-197 {
background: var(--cream);
padding: 40px 24px 64px;
}
.ts-197__inner {
max-width: 1200px;
margin: 0 auto;
}
/* --- Header --- */
.ts-197__header {
text-align: center;
}
.ts-197__eyebrow {
display: inline-block;
margin-bottom: 20px;
}
.ts-197__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 52px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink-strong);
margin: 0;
text-align: center;
}
/* --- 3-column stat grid --- */
.ts-197__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 64px;
margin: 48px 0 0;
padding: 0;
}
.ts-stat {
text-align: center;
margin: 0;
}
.ts-stat__top {
margin: 0;
display: block;
}
.ts-stat__value {
display: block;
font-family: var(--font-serif);
font-weight: 600;
font-size: 84px;
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--purple);
margin: 0 0 16px;
font-variant-numeric: tabular-nums;
font-optical-sizing: auto;
}
.ts-stat__label {
display: block;
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate-alt);
margin: 0 0 16px;
}
.ts-stat__desc {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--ink-strong);
margin: 0;
}
/* --- Hairline divider (separates §3 from §4 at the top of this section) --- */
.ts-197__rule {
border: 0;
height: 1px;
background: rgba(26, 26, 46, 0.12);
width: 100%;
max-width: 960px;
margin: 0 auto 48px;
}
/* --- Authority credentials strip (replaces 3-stat block) --- */
.ts-197__credentials {
text-align: center;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--slate-alt);
margin: 18px auto 0;
max-width: 720px;
}
/* --- High-converting comparison table
Visceral ✓/× markers + Tenscale paper-card on cream + drop shadow
Agency: cream-deep muted column with × signals
Tenscale: paper-white card with 4px purple top stripe + ✓ signals --- */
.ts-197__compare-intro {
text-align: center;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--slate-alt);
margin: 56px auto 0;
max-width: 640px;
}
.ts-197__compare {
width: 100%;
max-width: 920px;
margin: 24px auto 0;
border-collapse: separate;
border-spacing: 0;
font-family: var(--font-sans);
table-layout: fixed;
}
/* Header row */
.ts-197__compare thead th {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: left;
vertical-align: middle;
padding: 22px 22px 18px;
}
.ts-197__compare thead th:first-child {
width: 22%;
background: transparent;
padding-left: 0;
padding-right: 8px;
}
.ts-197__compare thead th:nth-child(2) {
width: 35%;
color: var(--slate-alt);
background: var(--cream-deep);
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.ts-197__compare thead th:last-child {
width: 43%;
color: var(--purple);
font-size: 14px;
background: #FEFDFA;
border-top: 4px solid var(--purple);
border-top-left-radius: 14px;
border-top-right-radius: 14px;
padding-top: 18px;
}
/* Row labels — clear left column, sentence case, weight 600 */
.ts-197__compare tbody th {
text-align: left;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
color: var(--ink-strong);
padding: 22px 16px 22px 0;
vertical-align: middle;
border-bottom: 1px solid rgba(26, 26, 46, 0.06);
}
/* Agency cells — cream-deep muted column, × icon prefix */
.ts-197__compare tbody td:nth-child(2) {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 400;
line-height: 1.45;
color: var(--slate-alt);
padding: 22px 22px;
background: var(--cream-deep);
border-bottom: 1px solid rgba(26, 26, 46, 0.05);
vertical-align: top;
position: relative;
}
.ts-197__compare tbody td:nth-child(2)::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 12px;
vertical-align: -2px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
/* Tenscale cells — paper-white card with ✓ icon, bold ink-strong */
.ts-197__compare tbody td:last-child {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
line-height: 1.45;
color: var(--ink-strong);
padding: 22px 28px;
background: #FEFDFA;
border-bottom: 1px solid rgba(26, 26, 46, 0.05);
vertical-align: top;
position: relative;
}
.ts-197__compare tbody td:last-child::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 12px;
vertical-align: -3px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
/* Last row — close both column-cards (rounded bottom + drop shadow on Tenscale) */
.ts-197__compare tbody tr:last-child th {
border-bottom: 0;
}
.ts-197__compare tbody tr:last-child td:nth-child(2) {
border-bottom: 0;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
.ts-197__compare tbody tr:last-child td:last-child {
border-bottom: 0;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
box-shadow: 0 18px 36px -16px rgba(107, 63, 160, 0.18);
}
/* Mobile — same SaaS-pattern, compact */
@media (max-width: 640px) {
.ts-197__compare-intro {
font-size: 13px;
margin-top: 32px;
}
.ts-197__compare {
margin: 16px auto 0;
table-layout: fixed;
}
.ts-197__compare thead th {
font-size: 9px;
letter-spacing: 0.10em;
padding: 14px 8px 12px;
}
.ts-197__compare thead th:first-child { width: 22%; padding: 0; }
.ts-197__compare thead th:nth-child(2) {
width: 36%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.ts-197__compare thead th:last-child {
width: 42%;
font-size: 10px;
padding-top: 11px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.ts-197__compare tbody th {
font-size: 11.5px;
padding: 14px 6px 14px 0;
}
.ts-197__compare tbody td:nth-child(2) {
font-size: 12px;
line-height: 1.35;
padding: 14px 8px;
}
.ts-197__compare tbody td:last-child {
font-size: 12.5px;
line-height: 1.35;
padding: 14px 10px;
}
.ts-197__compare tbody td:nth-child(2)::before {
width: 11px;
height: 11px;
margin-right: 6px;
vertical-align: -1px;
}
.ts-197__compare tbody td:last-child::before {
width: 13px;
height: 13px;
margin-right: 6px;
vertical-align: -2px;
}
.ts-197__compare tbody tr:last-child td:nth-child(2),
.ts-197__compare tbody tr:last-child td:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
/* Extra-tight mobile (≤375px iPhone SE) */
@media (max-width: 375px) {
.ts-197__compare thead th { font-size: 8.5px; }
.ts-197__compare thead th:nth-child(2),
.ts-197__compare thead th:last-child { padding: 14px 6px 12px; }
.ts-197__compare thead th:last-child { padding-top: 10px; }
.ts-197__compare tbody th { font-size: 11px; padding-right: 4px; }
.ts-197__compare tbody td:nth-child(2),
.ts-197__compare tbody td:last-child { font-size: 11.5px; padding: 14px 7px; }
}
/* --- Proof line --- */
.ts-197__proof {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
line-height: 1.4;
color: var(--ink-strong);
text-align: center;
margin: 32px 0 0;
}
.ts-197__proof-accent { color: var(--purple); }
/* --- Closing pull quote --- */
.ts-197__quote {
font-family: var(--font-sans);
font-weight: 500;
font-size: 22px;
line-height: 1.45;
color: var(--ink-strong);
text-align: center;
margin: 40px auto 0;
padding: 0;
max-width: 900px;
}
.ts-197__quote-accent {
color: var(--purple);
font-weight: 700;
}
/* --- Tablet --- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-197 { padding: 32px 32px 56px; }
.ts-197__headline { font-size: 40px; }
.ts-197__grid { column-gap: 40px; margin-top: 40px; }
.ts-stat__value { font-size: 64px; margin-bottom: 12px; }
.ts-stat__label { margin-bottom: 12px; }
.ts-stat__desc { font-size: 14px; }
.ts-197__rule { max-width: 700px; margin: 0 auto 36px; }
.ts-197__proof { font-size: 18px; margin-top: 40px; }
.ts-197__quote { font-size: 22px; margin-top: 24px; }
}
/* --- Mobile --- */
@media (max-width: 767px) {
.ts-197 { padding: 24px 16px 48px; }
.ts-197__eyebrow { margin-bottom: 16px; }
.ts-197__headline { font-size: 30px; }
.ts-197__grid {
grid-template-columns: 1fr;
row-gap: 40px;
margin-top: 32px;
}
.ts-stat__value { font-size: 56px; margin-bottom: 10px; }
.ts-stat__label { font-size: 12px; margin-bottom: 12px; }
.ts-stat__desc { font-size: 14px; }
.ts-197__rule { max-width: 100%; margin: 0 auto 32px; }
.ts-197__proof { font-size: 16px; margin-top: 32px; }
.ts-197__quote { font-size: 18px; margin-top: 24px; }
}
/* =========================================================================
§5 — The Offer (merged pricing + features)
Big €197 hero, 3×2 feature grid with icon badges, trust line, CTA link.
No cards, no shadows — icon badge tint is the only fill.
========================================================================= */
/* sr-only utility (reused from accessibility requirement) */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ts-offer {
background: var(--cream);
padding: 40px 24px 96px;
}
.ts-offer__inner {
max-width: 1200px;
margin: 0 auto;
}
/* Divider hairline between §4 and §5 */
.ts-offer__rule {
border: 0;
height: 1px;
background: rgba(26, 26, 46, 0.12);
width: 100%;
max-width: 960px;
margin: 0 auto 48px;
}
/* Header (eyebrow only — the big €197 is the visual headline) */
.ts-offer__header {
text-align: center;
}
.ts-offer__eyebrow {
display: inline-block;
margin-bottom: 24px;
}
/* Price reveal */
.ts-offer__price {
text-align: center;
line-height: 1.0;
}
.ts-offer__price-hero {
display: inline-block;
font-family: var(--font-serif);
font-weight: 600;
font-size: 148px;
line-height: 1.0;
letter-spacing: -0.03em;
color: var(--purple);
font-variant-numeric: tabular-nums;
font-optical-sizing: auto;
}
.ts-offer__price-num {
font-variant-numeric: tabular-nums;
}
.ts-offer__price-sub {
display: block;
font-family: var(--font-sans);
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: var(--slate-alt);
margin-top: 4px;
text-align: center;
}
/* Subline under price */
.ts-offer__subline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.5;
color: var(--ink-strong);
text-align: center;
margin: 24px auto 0;
max-width: 640px;
}
/* Mobile-only fallback phone image inside the hero tile — hidden by default
(desktop uses the CSS .device mockup wrapper); shown on mobile in the
accordion expand where the device wrapper doesn't scale gracefully. */
.ts-offer__hero-img-mobile { display: none; }
/* Subhead: "Six jobs. One specialist. Zero agency bloat." */
.ts-offer__subhead {
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.02em;
line-height: 1.4;
color: var(--ink);
opacity: 0.76;
text-align: center;
margin: 12px auto 0;
max-width: 520px;
}
/* Sub-CTA (small reassurance line under primary CTA) */
.ts-offer__cta-sub {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
opacity: 0.6;
text-align: center;
margin: 12px 0 0;
}
/* =========================================================================
LEGACY flat 3×2 feature grid — still used by the LIVE front-page.php.
Will be retired after task #14 swaps v2 → front-page.
(Interactive explorer below is used by page-v2.php only.)
========================================================================= */
.ts-offer__grid {
list-style: none;
padding: 0;
margin: 72px 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 56px;
row-gap: 48px;
}
.ts-feature {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 20px;
align-items: start;
}
.ts-feature__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 16px;
background: var(--purple-tint);
color: var(--purple);
flex-shrink: 0;
}
.ts-feature__badge svg {
width: 30px;
height: 30px;
}
.ts-feature__text { min-width: 0; }
.ts-feature__name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
line-height: 1.3;
color: var(--ink-strong);
margin: 0 0 6px;
}
.ts-feature__desc {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--slate-alt);
margin: 0;
}
/* =========================================================================
Feature explorer (interactive mosaic) — 1 hero tile (left) + 6 strips
(right) on desktop, full-width deep panel below. Default active = 01.
On mobile: everything stacks — strips list, then active hero, then deep.
Used by page-v2.php (staging) — will replace the legacy grid above.
========================================================================= */
.ts-offer__explorer {
margin-top: 72px;
display: grid;
grid-template-columns: 5fr 7fr;
grid-template-areas: "hero strips";
column-gap: 24px;
align-items: stretch;
}
/* ------------- Hero panel (grid area "hero") ------------- */
.ts-offer__hero-panel {
grid-area: hero;
position: relative;
/* Gradient approximates the atmosphere baked into the hero image
(pale lavender top-right → warm cream middle → pale peach bottom-left)
so the image edges blend seamlessly into the card. */
background:
radial-gradient(120% 80% at 10% 100%, #F9D9D2 0%, rgba(249, 217, 210, 0) 55%),
linear-gradient(165deg, #F2EAFB 0%, #F2EAFB 45%, #F3EAE0 78%, #F5E0D3 100%);
border-radius: 32px;
padding: 40px 40px 0;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 820px;
}
.ts-offer__hero-tile {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.ts-offer__hero-tile[hidden] { display: none; }
.ts-offer__hero-title {
font-family: var(--font-sans);
font-weight: 700;
font-size: 30px;
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--ink-strong);
margin: 0 0 16px;
}
.ts-offer__hero-promise {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
color: var(--ink-strong);
margin: 0;
max-width: 420px;
}
.ts-offer__hero-img-wrap {
flex: 1;
/* Phones are transparent PNGs — the card's gradient IS the atmosphere.
Anchor the phone to the top so it sits right below the description;
any aspect-ratio slack falls to the bottom of the card. */
margin: 16px 0 0;
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 0;
}
/* devices.css iPhone frame — scales to fit panel col while preserving
the device's fixed 428×868 geometry via transform: scale().
Layout reserves (868 − scale·868) pixels less + extra breathing
room below the phone via negative bottom margin. */
.ts-offer__hero-img-wrap .device-iphone-14-pro {
transform: scale(0.7);
transform-origin: top center;
margin: 0 auto -220px; /* 868 × 0.3 = 260 saved, leave 40 breathing */
filter:
drop-shadow(0 30px 48px rgba(107, 63, 160, 0.16))
drop-shadow(0 14px 22px rgba(26, 26, 46, 0.12));
}
.ts-offer__hero-img-wrap .device-screen {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* ------------- Strips column (grid area "strips") ------------- */
.ts-offer__strips {
grid-area: strips;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
align-self: stretch;
}
.ts-offer__strips li { margin: 0; padding: 0; }
.ts-offer__strip {
all: unset;
box-sizing: border-box;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 16px;
width: 100%;
padding: 18px 20px;
background: #F0ECE3;
border-radius: 18px;
cursor: pointer;
transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
flex: 1;
min-height: 96px;
}
.ts-offer__strip:hover {
background: #E9DEF5;
}
.ts-offer__strip:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 2px;
}
.ts-offer__strip[aria-selected="true"] {
background: #E3D3F7;
box-shadow: inset 3px 0 0 0 var(--purple);
}
.ts-offer__strip-num {
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
color: var(--purple);
letter-spacing: 0.06em;
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
.ts-offer__strip[aria-selected="true"] .ts-offer__strip-num { opacity: 1; }
.ts-offer__strip-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ts-offer__strip-name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 17px;
line-height: 1.3;
color: var(--ink-strong);
}
.ts-offer__strip-promise {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: var(--slate-alt);
}
.ts-offer__strip-chev {
width: 18px;
height: 18px;
color: var(--slate-alt);
flex-shrink: 0;
opacity: 0.55;
transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}
.ts-offer__strip[aria-selected="true"] .ts-offer__strip-chev {
color: var(--purple);
opacity: 1;
transform: translateX(2px);
}
/* ------------- Deep panel (grid area "deep") ------------- */
.ts-offer__deep-panel {
grid-area: deep;
background: #FFFFFF;
border-radius: 24px;
padding: 40px 48px;
box-shadow: 0 1px 0 rgba(26, 26, 46, 0.04);
}
.ts-offer__deep-tile[hidden] { display: none; }
.ts-offer__deep-label {
display: inline-block;
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--purple);
margin-bottom: 24px;
}
.ts-offer__deep-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
column-gap: 48px;
align-items: start;
}
.ts-offer__deep-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ts-offer__deep-list li {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.5;
color: var(--ink-strong);
padding-left: 20px;
position: relative;
}
.ts-offer__deep-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--purple);
}
.ts-offer__deep-img-wrap {
display: flex;
align-items: center;
justify-content: center;
/* Gradient atmosphere — phones are now transparent PNGs, so the wrap
provides the pastel backdrop they float on. */
background:
radial-gradient(100% 80% at 15% 100%, #F9D9D2 0%, rgba(249, 217, 210, 0) 55%),
linear-gradient(165deg, #F2EAFB 0%, #F2EAFB 45%, #F3EAE0 78%, #F5E0D3 100%);
border-radius: 16px;
overflow: hidden;
padding: 16px;
}
.ts-offer__deep-img-wrap picture,
.ts-offer__deep-img-wrap img {
display: block;
width: 100%;
height: auto;
max-height: 320px;
object-fit: contain;
/* Same shadow recipe as hero phone — restores contact grounding
that rembg stripped during the alpha cut-out. */
filter:
drop-shadow(0 18px 30px rgba(107, 63, 160, 0.14))
drop-shadow(0 8px 14px rgba(26, 26, 46, 0.10));
}
.ts-offer__deep-quote {
margin: 32px 0 0;
padding-top: 24px;
border-top: 1px solid rgba(26, 26, 46, 0.08);
font-family: var(--font-sans);
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: var(--ink-strong);
}
.ts-offer__deep-quote cite {
display: block;
margin-top: 10px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
line-height: 1.4;
color: var(--slate-alt);
font-style: normal;
}
/* CTA wrap — bottom of §5 with prominent purple button */
.ts-offer__cta-wrap {
text-align: center;
margin-top: 48px;
}
.ts-offer__cta-btn {
/* inherits from .v2-btn--primary; this class lets us scope minor offsets */
}
.ts-offer__cta-sub {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--slate-alt);
margin: 14px 0 0;
}
/* Authority boosters — icon-based row matching hero style */
.ts-offer__guarantees {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 28px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.ts-offer__guarantee {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
color: var(--ink-strong);
}
.ts-offer__guarantee svg {
width: 18px;
height: 18px;
stroke: var(--purple);
fill: none;
flex-shrink: 0;
}
@media (max-width: 640px) {
.ts-offer__guarantees { gap: 10px 18px; margin-top: 22px; }
.ts-offer__guarantee { font-size: 13px; }
.ts-offer__guarantee svg { width: 16px; height: 16px; }
}
/* --- Desktop + tablet inline expand (≥768px) ---
Each strip's contains a .ts-offer__expand sibling holding the
deep-tile (bullets + quote). Collapsed by default; opens inline
when the strip above it is aria-selected. Hero phone stays in the
left .ts-offer__hero-panel. The full-width deep-panel is empty
after JS reflow, so hidden. Eliminates scroll-down/scroll-up loop.
========================================================================= */
@media (min-width: 768px) {
.ts-offer__deep-panel { display: none; }
/* Strips column allows extra height for the active expand */
.ts-offer__strips { align-self: start; }
/* Active strip's bottom corners square so it joins the expand below */
.ts-offer__strip[aria-selected="true"] {
border-radius: 18px 18px 0 0;
}
/* Rotate chevron to point down on active (accordion affordance) */
.ts-offer__strip[aria-selected="true"] .ts-offer__strip-chev {
transform: rotate(90deg);
}
.ts-offer__expand {
max-height: 0;
overflow: hidden;
background: #E3D3F7;
border-radius: 0 0 18px 18px;
box-shadow: inset 3px 0 0 0 var(--purple);
transition: max-height 360ms ease-out;
}
.ts-offer__strip[aria-selected="true"] + .ts-offer__expand {
max-height: 720px;
}
/* Hero tile lives in the left hero-panel on desktop, never inside
the strip expand (defensive — JS keeps it in the panel). */
.ts-offer__expand .ts-offer__hero-tile { display: none; }
/* Inline deep tile — clean reveal: no backdrop, no image, compact bullets + quote */
.ts-offer__expand .ts-offer__deep-tile {
padding: 8px 24px 24px 24px;
background: transparent;
}
.ts-offer__expand .ts-offer__deep-label { display: none; }
.ts-offer__expand .ts-offer__deep-grid {
grid-template-columns: 1fr;
column-gap: 0;
}
.ts-offer__expand .ts-offer__deep-img-wrap { display: none; }
.ts-offer__expand .ts-offer__deep-list { gap: 10px; }
.ts-offer__expand .ts-offer__deep-list li {
font-size: 15px;
line-height: 1.45;
color: var(--ink-strong);
}
.ts-offer__expand .ts-offer__deep-list li::before {
background: var(--ink-strong);
top: 0.55em;
}
.ts-offer__expand .ts-offer__deep-quote {
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px solid rgba(26, 26, 46, 0.10);
font-size: 16px;
line-height: 1.45;
}
.ts-offer__expand .ts-offer__deep-quote cite {
margin-top: 8px;
font-size: 13px;
}
}
/* --- Tablet (768–1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-offer { padding: 32px 32px 72px; }
.ts-offer__rule { max-width: 700px; margin: 0 auto 36px; }
.ts-offer__price-hero { font-size: 120px; }
.ts-offer__price-sub { font-size: 18px; }
.ts-offer__subline { font-size: 16px; }
/* Legacy flat grid (front-page.php) */
.ts-offer__grid {
column-gap: 32px;
row-gap: 32px;
margin-top: 56px;
}
/* New explorer — stack hero on top, strips (with inline expand) below */
.ts-offer__explorer {
grid-template-columns: 1fr;
grid-template-areas:
"hero"
"strips";
column-gap: 0;
row-gap: 20px;
margin-top: 56px;
}
.ts-offer__hero-panel { min-height: auto; padding: 32px 32px 0; }
.ts-offer__hero-title { font-size: 28px; }
.ts-offer__hero-img-wrap { max-height: 360px; }
.ts-offer__hero-img-wrap picture,
.ts-offer__hero-img-wrap img { max-height: 360px; }
.ts-offer__trust { margin-top: 32px; }
}
/* --- Mobile (<768px) --- */
@media (max-width: 767px) {
.ts-offer { padding: 24px 16px 56px; }
.ts-offer__rule { max-width: 100%; margin: 0 auto 32px; }
.ts-offer__eyebrow { margin-bottom: 16px; }
.ts-offer__price-hero { font-size: 96px; }
.ts-offer__price-sub { font-size: 16px; }
.ts-offer__subline { font-size: 15px; margin-top: 16px; }
/* Legacy flat grid (front-page.php) */
.ts-offer__grid {
grid-template-columns: 1fr;
row-gap: 20px;
margin-top: 48px;
}
.ts-feature__badge { width: 56px; height: 56px; border-radius: 14px; }
.ts-feature__badge svg { width: 26px; height: 26px; }
.ts-feature__name { font-size: 18px; }
.ts-feature__desc { font-size: 15px; }
/* New explorer (page-v2.php) — MOBILE: accordion.
JS moves each feature's hero-tile + deep-tile INSIDE its matching ,
wrapped in .ts-offer__expand. The expand is collapsed by default;
expands in place when the strip is aria-selected=true.
Hero-panel and deep-panel become empty wrappers on mobile (JS removes
their children), so we hide them to avoid rendering gaps. */
/* Explorer — block layout, normal section padding. Hero + deep panels
become empty after JS reflow moves tiles into strips, so hidden here. */
.ts-offer__explorer {
display: block;
grid-template-columns: none;
grid-template-areas: none;
margin: 36px 0 0;
}
.ts-offer__hero-panel,
.ts-offer__deep-panel {
display: none;
}
/* Tactile card stack — each row is an elevated warm-cream card.
Gap between cards so dual shadows don't clash. */
.ts-offer__strips {
display: flex;
flex-direction: column;
gap: 14px;
overflow: visible;
margin: 0;
padding: 0;
}
.ts-offer__strips li {
display: block;
position: relative;
border-radius: 16px;
background: #F5EEDE;
border: 0;
overflow: hidden;
box-shadow:
0 1px 2px rgba(140, 100, 50, 0.06),
0 14px 32px rgba(140, 100, 50, 0.10);
transition: box-shadow 240ms ease-out, background 240ms ease-out;
}
/* Active card — "pressed in" feel: inset shadow + brighter bg + outer
purple glow. Replaces outer shadow with sinking effect. */
.ts-offer__strips li:has(.ts-offer__strip[aria-selected="true"]) {
background: #FBF6EA;
box-shadow:
inset 0 2px 10px rgba(26, 26, 46, 0.06),
0 6px 18px rgba(107, 63, 160, 0.10);
}
/* Purple left accent bar on active card */
.ts-offer__strips li:has(.ts-offer__strip[aria-selected="true"])::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--purple);
border-radius: 0 2px 2px 0;
z-index: 2;
}
.ts-offer__strip {
flex-direction: row;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-radius: 0;
min-height: 0;
background: transparent;
border: 0;
text-align: left;
width: 100%;
position: relative;
z-index: 1;
}
/* Number — Inter bold (Direction B) */
.ts-offer__strip-num {
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.06em;
color: var(--purple);
opacity: 0.62;
margin: 0;
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
transition: opacity 220ms ease-out;
}
.ts-offer__strip[aria-selected="true"] .ts-offer__strip-num {
opacity: 1;
}
.ts-offer__strip-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.ts-offer__strip-name {
font-size: 15px;
font-weight: 600;
line-height: 1.22;
color: var(--ink-strong);
}
.ts-offer__strip-promise {
font-size: 13px;
color: var(--ink);
opacity: 0.66;
line-height: 1.38;
}
/* Custom +/− toggle instead of chevron — Inter (Direction B) */
.ts-offer__strip-chev { display: none; }
.ts-offer__strip::after {
content: '+';
font-family: var(--font-sans);
font-weight: 400;
font-size: 24px;
line-height: 1;
color: var(--ink);
opacity: 0.42;
flex: 0 0 auto;
margin-left: 8px;
transition: opacity 220ms ease-out, color 220ms ease-out;
}
.ts-offer__strip[aria-selected="true"]::after {
content: '−';
color: var(--purple);
opacity: 1;
}
/* Accordion expand container — collapsed by default, opens when sibling
strip is aria-selected. Uses max-height for broader browser support
(grid-template-rows trick was unreliable on some mobile Safari). */
.ts-offer__expand {
max-height: 0;
overflow: hidden;
transition: max-height 320ms ease-out;
}
.ts-offer__strip[aria-selected="true"] + .ts-offer__expand {
max-height: 1400px; /* generous upper bound — content shorter than this */
}
/* Tiles inside expand — always visible when expand is open.
Override any hidden attribute the JS might have set. */
.ts-offer__expand .ts-offer__hero-tile[hidden],
.ts-offer__expand .ts-offer__deep-tile[hidden] {
display: block;
}
/* Hero tile — peachy warm gradient with SVG noise overlay for tactile paper feel */
.ts-offer__expand .ts-offer__hero-tile {
display: block;
padding: 16px 20px 18px;
position: relative;
background: linear-gradient(165deg, #F5E8D8 0%, #F2E0CE 65%, #EFD6BC 100%);
border-radius: 0;
overflow: hidden;
min-height: 0;
}
/* Noise overlay — fine grain, subtle, gives printed-paper texture */
.ts-offer__expand .ts-offer__hero-tile::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.42;
pointer-events: none;
}
.ts-offer__expand .ts-offer__hero-tile > * {
position: relative;
z-index: 1;
}
.ts-offer__hero-title {
font-size: 20px;
line-height: 1.22;
margin: 0 0 8px;
color: var(--ink-strong);
}
.ts-offer__hero-promise {
font-size: 14px;
line-height: 1.48;
margin: 0;
color: var(--ink-strong);
opacity: 0.82;
}
/* Hero image wrap — fixed 220px box, no flex stretch */
.ts-offer__expand .ts-offer__hero-img-wrap {
display: block;
flex: 0 0 auto;
width: 100%;
height: 220px;
max-height: 220px;
margin: 16px 0 0;
overflow: hidden;
}
.ts-offer__expand .ts-offer__hero-img-wrap .device { display: none; }
.ts-offer__expand .ts-offer__hero-img-wrap .ts-offer__hero-img-mobile,
.ts-offer__expand .ts-offer__hero-img-wrap .ts-offer__hero-img-mobile img {
display: block;
width: auto;
max-width: 100%;
height: 100%;
max-height: 220px;
margin: 0 auto;
object-fit: contain;
object-position: center;
}
.ts-offer__expand .ts-offer__hero-img-wrap .ts-offer__hero-img-mobile img {
filter: drop-shadow(0 14px 28px rgba(107, 63, 160, 0.20));
}
/* Deep tile — warm cream body, hairline top border */
.ts-offer__expand .ts-offer__deep-tile {
padding: 20px 20px 22px;
background: #F9F1DF;
border-top: 1px solid rgba(140, 100, 50, 0.12);
}
.ts-offer__deep-label {
font-size: 10px;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--purple);
margin-bottom: 14px;
}
.ts-offer__deep-grid { grid-template-columns: 1fr; row-gap: 14px; }
.ts-offer__deep-list li { font-size: 14px; line-height: 1.48; }
.ts-offer__expand .ts-offer__deep-img-wrap { display: none; }
/* Pull-quote card — full-bleed warm purple, Inter (Direction B). */
.ts-offer__expand .ts-offer__deep-quote {
background: var(--purple);
color: #FAF7EF;
padding: 22px 22px 20px;
border-radius: 14px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 16px;
line-height: 1.5;
margin: 20px 0 0;
border: 0;
box-shadow: 0 12px 28px rgba(107, 63, 160, 0.26);
letter-spacing: -0.005em;
}
.ts-offer__expand .ts-offer__deep-quote::before {
content: '"';
font-family: var(--font-sans);
font-size: 24px;
line-height: 0;
opacity: 0.42;
margin-right: 2px;
vertical-align: -0.05em;
}
.ts-offer__expand .ts-offer__deep-quote cite {
display: block;
margin-top: 12px;
font-family: var(--font-sans);
font-size: 11px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
opacity: 0.78;
}
.ts-offer__subhead {
font-size: 14px;
color: var(--ink);
opacity: 0.72;
text-align: center;
margin: 8px auto 20px;
max-width: 320px;
}
.ts-offer__trust { font-size: 13px; margin-top: 32px; }
.ts-offer__cta-sub {
font-size: 12px;
text-align: center;
opacity: 0.6;
margin: 8px 0 0;
}
.ts-offer__sep { margin: 0 6px; }
.ts-offer__cta { font-size: 15px; }
.ts-offer__cta-wrap { margin-top: 24px; }
}
/* =========================================================================
§6 — Meet Your Specialists (the one dark section)
Deep purple-black. Four portraits with soft purple halos.
Headline in warm-white Fraunces. Lifted purple accents for contrast.
========================================================================= */
:root {
--dark-bg: #0F0B1A;
--purple-lifted: #B085E0;
--slate-on-dark-1: #9A96A8;
--slate-on-dark-2: #7C7A8A;
--slate-on-dark-3: #8A8A9E;
}
.ts-team {
background: var(--dark-bg);
color: var(--cream);
padding: 120px 24px;
}
.ts-team__inner {
max-width: 1200px;
margin: 0 auto;
}
/* --- Header --- */
.ts-team__header { text-align: center; }
/* Eyebrow pill on dark uses lifted purple (contrast) */
.ts-team__eyebrow {
display: inline-block;
margin-bottom: 24px;
color: var(--purple-lifted);
border: 1px solid var(--purple-lifted);
background: transparent;
}
.ts-team__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 52px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--cream);
text-align: center;
margin: 0;
white-space: nowrap;
}
.ts-team__subline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--slate-on-dark-1);
text-align: center;
margin: 16px 0 0;
}
/* --- Specialist row --- */
.ts-team__row {
list-style: none;
padding: 0;
margin: 72px 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 48px;
}
.ts-specialist {
text-align: center;
}
/* Portrait + glowing purple halo */
.ts-specialist__portrait {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
overflow: visible;
}
.ts-specialist__portrait img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
background: var(--cream);
display: block;
/* Outer glow: soft large bloom + inner crisp rim of lifted purple */
box-shadow:
0 0 0 2px rgba(176, 133, 224, 0.35),
0 0 40px 8px rgba(139, 92, 246, 0.55),
0 0 80px 20px rgba(107, 63, 160, 0.45);
}
/* Name, spec, stat, descriptor, bio */
.ts-specialist__name {
font-family: var(--font-sans);
font-weight: 700;
font-size: 24px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--cream);
margin: 24px 0 0;
}
.ts-specialist__spec {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate-on-dark-1);
margin: 6px 0 0;
}
.ts-specialist__stat {
font-family: var(--font-serif);
font-weight: 600;
font-size: 56px;
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--purple-lifted);
margin: 24px 0 0;
font-variant-numeric: tabular-nums;
font-optical-sizing: auto;
}
.ts-specialist__descriptor {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: var(--slate-on-dark-1);
margin: 6px 0 0;
}
.ts-specialist__bio {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
line-height: 1.5;
color: var(--slate-on-dark-2);
margin: 20px 0 0;
}
/* --- Native-language trust line --- */
.ts-team__langs {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
line-height: 1.5;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate-on-dark-3);
text-align: center;
margin: 72px 0 0;
}
.ts-team__sep {
display: inline-block;
margin: 0 12px;
color: var(--slate-on-dark-3);
}
/* --- Footnote --- */
.ts-team__footnote {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
line-height: 1.5;
color: var(--slate);
text-align: center;
margin: 16px 0 0;
}
/* --- Tablet --- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-team { padding: 96px 32px; }
.ts-team__headline { font-size: 44px; }
.ts-team__subline { font-size: 17px; }
.ts-team__row { column-gap: 32px; margin-top: 56px; }
.ts-specialist__portrait { width: 160px; height: 160px; }
.ts-specialist__name { font-size: 24px; }
.ts-specialist__stat { font-size: 48px; }
}
/* --- Mobile --- */
@media (max-width: 767px) {
.ts-team { padding: 72px 16px; }
.ts-team__headline { font-size: 32px; white-space: normal; }
.ts-team__subline { font-size: 15px; }
.ts-team__row {
grid-template-columns: 1fr;
row-gap: 56px;
margin-top: 48px;
}
.ts-specialist {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 20px;
text-align: left;
align-items: start;
}
.ts-specialist__portrait {
width: 120px;
height: 120px;
margin: 0;
grid-column: 1;
grid-row: 1 / 7;
}
.ts-specialist__name,
.ts-specialist__spec,
.ts-specialist__stat,
.ts-specialist__descriptor,
.ts-specialist__bio {
grid-column: 2;
text-align: left;
}
.ts-specialist__name { font-size: 22px; margin-top: 0; }
.ts-specialist__spec { font-size: 11px; margin-top: 4px; }
.ts-specialist__stat { font-size: 42px; margin-top: 12px; }
.ts-specialist__descriptor { font-size: 13px; margin-top: 4px; }
.ts-specialist__bio { font-size: 12px; margin-top: 12px; }
.ts-team__langs { font-size: 12px; margin-top: 48px; }
.ts-team__footnote { font-size: 11px; margin-top: 12px; }
}
/* =========================================================================
§7 — Real Results (case study cards, no CTA)
Asymmetric 2×2 grid on desktop; cards defined by soft purple border only.
========================================================================= */
.ts-results {
background: var(--cream);
padding: 72px 24px;
}
.ts-results__inner {
max-width: 1200px;
margin: 0 auto;
}
/* --- Header --- */
.ts-results__header { text-align: center; }
.ts-results__eyebrow {
display: inline-block;
margin-bottom: 24px;
}
.ts-results__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 44px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
text-align: center;
margin: 0;
}
.ts-results__subline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.5;
color: var(--slate-alt);
text-align: center;
margin: 12px 0 0;
}
/* --- Grid — hero card left, 2 supporting stacked right --- */
.ts-results__grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 20px;
row-gap: 20px;
margin: 40px 0 0;
}
.ts-case--hero { grid-column: 1; grid-row: 1 / 3; }
.ts-case--sup:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.ts-case--sup:nth-of-type(3) { grid-column: 2; grid-row: 2; }
/* --- Card base --- */
.ts-case {
background: var(--cream);
border: 1.5px solid rgba(107, 63, 160, 0.28);
border-radius: 16px;
padding: 20px;
display: flex;
flex-direction: column;
transition: border-color 200ms var(--ease-out-fast);
}
.ts-case:hover { border-color: rgba(107, 63, 160, 0.45); }
.ts-case--hero { padding: 28px; }
/* --- Header row: avatar + industry/name --- */
.ts-case__head {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 24px;
}
.ts-case__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--purple-tint);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
font-family: var(--font-sans);
font-weight: 700;
font-size: 18px;
line-height: 1;
color: var(--purple);
letter-spacing: 0;
/* Subtle inner ring for depth on cream card */
box-shadow: inset 0 0 0 1px rgba(107, 63, 160, 0.14);
}
.ts-case__avatar::before {
content: attr(data-initials);
}
.ts-case--hero .ts-case__avatar {
width: 56px;
height: 56px;
font-size: 24px;
}
.ts-case__head-text { min-width: 0; }
.ts-case__industry {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate-alt);
margin: 0 0 2px;
}
.ts-case__sep {
display: inline-block;
margin: 0 6px;
}
.ts-case__name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
line-height: 1.3;
color: var(--ink-strong);
margin: 0;
}
/* --- Hero metric block (hero card) --- */
.ts-case__metric { margin: 8px 0 0; }
.ts-case--hero .ts-case__metric { margin-top: 8px; }
.ts-case__num {
font-family: var(--font-serif);
font-weight: 600;
font-size: 72px;
line-height: 1.0;
letter-spacing: -0.025em;
color: var(--purple);
margin: 0;
font-variant-numeric: tabular-nums;
font-optical-sizing: auto;
}
.ts-case__num--sm { font-size: 56px; }
.ts-case__desc {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.5;
color: var(--slate-alt);
margin: 4px 0 0;
}
.ts-case__cost {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: #8A8A9E;
margin: 4px 0 0;
}
/* Supporting-card metric: number inline with description on the right */
.ts-case__metric--inline {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
align-items: start;
}
.ts-case__metric--inline .ts-case__num { align-self: start; }
.ts-case__metric-text .ts-case__desc { font-size: 15px; margin: 0; }
.ts-case__metric-text .ts-case__cost { font-size: 13px; margin: 4px 0 0; }
/* --- Quote block (hero card only) --- */
.ts-case__quote {
font-family: var(--font-sans);
font-weight: 500;
font-size: 17px;
line-height: 1.5;
color: var(--ink-strong);
margin: 24px 0 0;
padding: 0;
}
.ts-case__attrib {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: var(--slate-alt);
margin: 8px 0 0;
}
/* --- Card CTA link (button) --- */
.ts-case__link {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--purple);
background: none;
border: 0;
padding: 0;
margin: auto 0 0; /* pin to bottom of flex card */
text-align: left;
cursor: pointer;
transition: text-decoration-color 150ms var(--ease-out-fast);
text-decoration-color: transparent;
}
.ts-case--hero .ts-case__link { margin-top: 24px; }
.ts-case--sup .ts-case__link { margin-top: 16px; }
.ts-case__link:hover,
.ts-case__link:focus-visible {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--purple);
text-underline-offset: 3px;
}
.ts-case__link:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 3px;
border-radius: 2px;
}
/* --- Verification footer --- */
.ts-results__footer {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: var(--slate-alt);
text-align: center;
margin: 48px 0 0;
}
.ts-results__sep { display: inline-block; margin: 0 10px; }
.ts-results__footer-link {
display: inline-flex;
align-items: center;
color: var(--purple);
font-weight: 600;
text-decoration: none;
}
.ts-results__footer-link:hover {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
/* --- Tablet --- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-results { padding: 56px 32px; }
.ts-results__headline { font-size: 38px; }
.ts-results__subline { font-size: 16px; }
.ts-results__grid { column-gap: 20px; row-gap: 20px; }
.ts-case--hero { padding: 28px; }
.ts-case__num { font-size: 64px; }
.ts-case__num--sm { font-size: 48px; }
.ts-case__quote { font-size: 16px; }
}
/* --- Mobile --- */
@media (max-width: 767px) {
.ts-results { padding: 48px 16px; }
.ts-results__headline { font-size: 32px; }
.ts-results__subline { font-size: 15px; margin-top: 8px; }
.ts-results__grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
row-gap: 20px;
margin-top: 40px;
}
.ts-case--hero,
.ts-case--sup:nth-of-type(2),
.ts-case--sup:nth-of-type(3) {
grid-column: 1;
grid-row: auto;
}
.ts-case { padding: 20px; }
.ts-case--hero { padding: 20px; }
.ts-case__avatar,
.ts-case--hero .ts-case__avatar { width: 44px; height: 44px; }
.ts-case__name { font-size: 15px; }
.ts-case__num { font-size: 56px; }
.ts-case__num--sm { font-size: 48px; }
.ts-case__desc { font-size: 15px; }
.ts-case__metric-text .ts-case__desc { font-size: 14px; }
.ts-case__cost { font-size: 13px; }
.ts-case__quote { font-size: 15px; margin-top: 16px; }
.ts-case__attrib { font-size: 13px; }
.ts-case__link { font-size: 13px; }
.ts-case--hero .ts-case__link { margin-top: 16px; }
.ts-case--sup .ts-case__link { margin-top: 16px; }
.ts-results__footer { font-size: 13px; margin-top: 32px; }
}
/* =========================================================================
§8 — Honest Answers (objection-wall FAQ accordion)
Cream section; 720px narrow read-column; one-at-a-time disclosure.
========================================================================= */
.ts-faq {
background: var(--cream);
padding: 48px 24px 72px;
}
.ts-faq__inner {
max-width: 960px;
margin: 0 auto;
}
.ts-faq__hairline {
border: 0;
border-top: 1px solid var(--hairline);
margin: 0 0 32px;
transform-origin: center;
}
.ts-faq__eyebrow {
display: block;
width: fit-content;
margin: 0 auto;
}
.ts-faq__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 52px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
text-align: center;
margin: 20px 0 64px;
}
.ts-faq__row {
border-bottom: 1px solid var(--hairline);
}
.ts-faq__row:last-child {
border-bottom: 0;
}
.ts-faq__heading {
margin: 0;
font-weight: inherit;
}
.ts-faq__toggle {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
width: 100%;
padding: 10px 0;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: var(--ink-strong);
transition: background 150ms var(--ease-out-fast);
}
.ts-faq__toggle:hover {
background: rgba(26, 26, 46, 0.02);
}
.ts-faq__toggle:hover .ts-faq__chevron {
color: var(--ink-strong);
}
.ts-faq__toggle:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 3px;
border-radius: 2px;
}
.ts-faq__q {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
line-height: 1.4;
color: var(--ink-strong);
flex: 1;
}
.ts-faq__chevron {
width: 22px;
height: 22px;
flex: 0 0 22px;
color: var(--slate-alt);
margin-top: 2px;
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
color 150ms var(--ease-out-fast);
}
.ts-faq__row.is-open .ts-faq__chevron {
transform: rotate(180deg);
}
/* Panel expand/collapse using grid 1fr/0fr trick (CSS-only, no JS measurement) */
.ts-faq__panel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ts-faq__panel > p {
overflow: hidden;
min-height: 0;
}
.ts-faq__row.is-open .ts-faq__panel {
grid-template-rows: 1fr;
opacity: 1;
}
.ts-faq__a {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.6;
color: var(--slate-alt);
margin: 0 0 16px;
padding-top: 8px;
}
/* --- Section-entry: no animation; everything renders in final state --- */
/* --- Tablet --- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-faq { padding: 72px 32px; }
.ts-faq__headline { font-size: 48px; margin: 24px 0 48px; }
.ts-faq__q { font-size: 16px; }
.ts-faq__a { font-size: 15px; }
}
/* --- Mobile --- */
@media (max-width: 767px) {
.ts-faq { padding: 56px 16px; }
.ts-faq__hairline { margin: 0 0 40px; }
.ts-faq__headline { font-size: 40px; margin: 20px 0 40px; }
.ts-faq__toggle { padding: 12px 0; gap: 16px; }
.ts-faq__q { font-size: 15px; }
.ts-faq__chevron { width: 18px; height: 18px; flex-basis: 18px; }
.ts-faq__a { font-size: 15px; padding-top: 10px; margin-bottom: 16px; }
}
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
.ts-faq__panel,
.ts-faq__chevron,
.ts-faq__hairline,
.ts-faq__eyebrow,
.ts-faq__headline,
.ts-faq__row {
transition: none !important;
}
.ts-faq__hairline { opacity: 1 !important; transform: scaleX(1) !important; }
.ts-faq.is-visible .ts-faq__eyebrow,
.ts-faq.is-visible .ts-faq__headline,
.ts-faq.is-visible .ts-faq__row { opacity: 1 !important; transform: none !important; }
}
/* =========================================================================
§9 — See It First (primary conversion moment — the only filled CTA)
Single vertical column, 1200px; mockup pair with purple halo; 3-step
explainer; one filled purple CTA; trust row; guarantee line.
========================================================================= */
.ts-sif {
background: var(--cream);
padding: 96px 24px;
}
.ts-sif__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ts-sif__eyebrow { margin: 0 0 24px; }
.ts-sif__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 64px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
max-width: 960px;
margin: 0 0 16px;
}
.ts-sif__subline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--slate-alt);
margin: 0 0 56px;
}
/* --- Mockup pair with purple halo --- */
.ts-sif__mockups {
position: relative;
display: flex;
gap: 40px;
width: 100%;
max-width: 1080px;
justify-content: center;
isolation: isolate; /* keep halo behind cards cleanly */
}
.ts-sif__mockups::before {
content: "";
position: absolute;
inset: -60px;
background: radial-gradient(ellipse at center, rgba(107, 63, 160, 0.35) 0%, rgba(107, 63, 160, 0) 70%);
filter: blur(80px);
z-index: -1;
pointer-events: none;
}
/* --- Facebook ad mockup card --- */
.ts-fb {
flex: 1 1 0;
min-width: 0;
max-width: 520px;
background: #FFFFFF;
border: 1px solid #E4E6EB;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
padding: 12px;
margin: 0;
text-align: left;
font-family: var(--font-sans);
color: #050505;
position: relative;
z-index: 1;
}
.ts-fb__head {
display: flex;
align-items: center;
gap: 8px;
}
.ts-fb__logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--purple-tint);
color: var(--purple);
font-family: var(--font-sans);
font-weight: 700;
font-size: 16px;
line-height: 1;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(107, 63, 160, 0.14);
}
.ts-fb__logo::before { content: attr(data-initials); }
.ts-fb__head-text { flex: 1; min-width: 0; }
.ts-fb__name {
margin: 0;
font-weight: 600;
font-size: 14px;
line-height: 1.3;
color: #050505;
}
.ts-fb__meta {
margin: 2px 0 0;
font-weight: 400;
font-size: 13px;
line-height: 1.3;
color: #65676B;
}
.ts-fb__menu {
font-size: 18px;
line-height: 1;
color: #65676B;
letter-spacing: 1px;
margin-left: 8px;
}
.ts-fb__copy {
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: #050505;
margin: 10px 0 8px;
}
.ts-fb__image {
position: relative;
aspect-ratio: 1.91 / 1;
margin: 0 -12px; /* edge-to-edge within 12px card padding */
overflow: hidden;
background: #F0EEE8; /* fallback while image loads */
}
.ts-fb__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.ts-fb__link {
display: flex;
align-items: center;
gap: 12px;
background: #F0F2F5;
padding: 10px 12px;
margin: 0 -12px; /* edge-to-edge */
border-top: 1px solid #CED0D4;
}
.ts-fb__link-text { flex: 1; min-width: 0; }
.ts-fb__link-url {
margin: 0;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.04em;
color: #65676B;
text-transform: uppercase;
}
.ts-fb__link-headline {
margin: 2px 0 0;
font-weight: 600;
font-size: 15px;
line-height: 1.3;
color: #050505;
}
.ts-fb__link-desc {
margin: 2px 0 0;
font-weight: 400;
font-size: 12px;
line-height: 1.4;
color: #65676B;
}
.ts-fb__link-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: #1877F2;
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
white-space: nowrap;
}
.ts-fb__engage {
font-weight: 400;
font-size: 13px;
color: #65676B;
margin: 10px 0 0;
}
.ts-fb__actions {
display: flex;
justify-content: space-around;
gap: 4px;
border-top: 1px solid #CED0D4;
margin: 8px -12px 0;
padding: 6px 0 2px;
}
.ts-fb__action {
font-weight: 600;
font-size: 14px;
color: #65676B;
}
/* --- Social proof ticker --- */
.ts-sif__ticker {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8A8A9E;
margin: 56px 0 0;
}
.ts-sif__dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--purple);
animation: ts-sif-pulse 2000ms ease-in-out infinite;
}
@keyframes ts-sif-pulse {
0%, 100% { opacity: 0.6; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
}
/* --- 3-step explainer --- */
.ts-sif__steps {
list-style: none;
padding: 0;
margin: 48px 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 48px;
row-gap: 16px;
width: 100%;
max-width: 840px;
}
.ts-sif__step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ts-sif__step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--purple-tint);
color: var(--purple);
margin-bottom: 16px;
box-shadow:
0 1px 2px rgba(26, 26, 46, 0.06),
0 6px 16px rgba(107, 63, 160, 0.14),
inset 0 0 0 1px rgba(107, 63, 160, 0.18);
}
.ts-sif__step-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.ts-sif__step-label {
font-family: var(--font-sans);
font-weight: 700;
font-size: 18px;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--ink-strong);
margin: 0 0 6px;
}
.ts-sif__step-desc {
font-family: var(--font-sans);
font-weight: 500;
font-size: 15px;
line-height: 1.5;
color: var(--slate-alt);
margin: 0;
max-width: 240px;
}
/* --- THE filled CTA (only one on the page) --- */
.ts-sif__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 56px 0 0;
padding: 20px 36px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 18px;
line-height: 1.3;
color: #FFFFFF;
background: var(--purple);
border-radius: 12px;
text-decoration: none;
box-shadow: 0 6px 20px rgba(107, 63, 160, 0.28);
transition: background 200ms var(--ease-out-fast),
transform 200ms var(--ease-out-fast),
box-shadow 200ms var(--ease-out-fast);
}
.ts-sif__cta svg { width: 20px; height: 20px; }
.ts-sif__cta:hover {
background: var(--purple-hover);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(107, 63, 160, 0.35);
}
.ts-sif__cta:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(107, 63, 160, 0.25);
transition-duration: 100ms;
}
.ts-sif__cta:focus-visible {
outline: 3px solid #B085E0;
outline-offset: 4px;
}
/* --- Trust row (4 pairs) — larger, bolder, purple icons --- */
.ts-sif__trust {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
}
.ts-sif__trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
color: var(--ink-strong);
}
.ts-sif__trust-item svg {
width: 18px;
height: 18px;
color: var(--purple);
flex-shrink: 0;
}
/* --- Guarantee line --- */
.ts-sif__guarantee {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 15px;
color: var(--ink-strong);
margin: 20px 0 0;
}
.ts-sif__guarantee svg { width: 18px; height: 18px; color: var(--purple); }
/* --- Tablet --- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-sif { padding: 72px 32px; }
.ts-sif__headline { font-size: 52px; }
.ts-sif__subline { font-size: 17px; margin-bottom: 40px; }
.ts-sif__mockups { gap: 24px; }
.ts-fb { max-width: 420px; }
.ts-sif__ticker { margin-top: 40px; }
.ts-sif__steps { margin-top: 32px; column-gap: 32px; }
}
/* --- Mobile --- */
@media (max-width: 767px) {
.ts-sif { padding: 56px 16px; }
.ts-sif__eyebrow { margin-bottom: 16px; }
.ts-sif__headline { font-size: 36px; margin-bottom: 8px; }
.ts-sif__subline { font-size: 15px; margin-bottom: 32px; }
.ts-sif__mockups {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.ts-fb { max-width: 100%; }
.ts-sif__ticker { margin-top: 32px; font-size: 11px; }
.ts-sif__steps {
grid-template-columns: 1fr;
row-gap: 20px;
margin-top: 32px;
max-width: 420px;
}
/* Mobile: icon in col 1 (spans both rows), label row 1, desc row 2 */
.ts-sif__step {
display: grid;
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
column-gap: 14px;
row-gap: 4px;
align-items: start;
text-align: left;
}
.ts-sif__step-icon {
grid-column: 1;
grid-row: 1 / span 2;
margin: 0;
align-self: start;
}
.ts-sif__step-label {
grid-column: 2;
grid-row: 1;
margin: 0;
font-size: 16px;
font-weight: 600; /* lighter on mobile — was 700 */
letter-spacing: 0;
}
.ts-sif__step-desc {
grid-column: 2;
grid-row: 2;
max-width: none;
font-size: 14px;
font-weight: 400; /* lighter on mobile — was 500 */
}
.ts-sif__cta {
display: flex;
width: 100%;
justify-content: center;
padding: 18px 24px;
font-size: 17px;
margin-top: 32px;
}
.ts-sif__trust { gap: 12px 18px; margin-top: 20px; }
.ts-sif__trust-item {
font-size: 13px;
font-weight: 500; /* lighter on mobile — was 600 */
color: var(--slate-alt);
}
.ts-sif__trust-item svg { width: 15px; height: 15px; }
.ts-sif__guarantee {
font-size: 13px;
font-weight: 400; /* lighter on mobile — was 500 */
color: var(--ink-strong);
margin-top: 14px;
max-width: 340px;
}
.ts-sif__guarantee svg { width: 15px; height: 15px; }
}
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
.ts-sif__dot { animation: none; opacity: 1; transform: none; }
.ts-sif__cta { transition: background 150ms ease-out; }
.ts-sif__cta:hover { transform: none; box-shadow: 0 6px 20px rgba(107, 63, 160, 0.28); }
}
/* =========================================================================
§10 — How It Feels (product demo storyboard)
Single centered column; 3-phone storyboard image with intrinsic halo;
captions row; silent-loop hint; text-link CTA.
========================================================================= */
.ts-hif {
background: var(--cream);
padding: 96px 24px;
}
.ts-hif__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ts-hif__eyebrow { margin: 0 0 24px; }
.ts-hif__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 52px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
max-width: 960px;
margin: 0 0 16px;
}
.ts-hif__subline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--slate-alt);
max-width: 640px;
margin: 0 0 64px;
}
.ts-hif__phones {
width: 100%;
max-width: 1080px;
margin: 0 auto;
}
.ts-hif__phones-img {
width: 100%;
height: auto;
display: block;
}
/* --- Captions row --- */
.ts-hif__captions {
list-style: none;
padding: 0;
margin: 32px 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 48px;
width: 100%;
max-width: 1080px;
}
.ts-hif__caption {
font-family: var(--font-sans);
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: var(--ink-strong);
text-align: center;
}
/* --- Loop hint + text-link CTA --- */
.ts-hif__hint {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8A8A9E;
margin: 48px 0 0;
}
.ts-hif__hint span { margin: 0 6px; }
.ts-hif__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
color: var(--purple);
text-decoration: none;
margin: 12px 0 0;
padding: 4px 0;
}
.ts-hif__cta svg { width: 16px; height: 16px; }
.ts-hif__cta:hover {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.ts-hif__cta:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 3px;
border-radius: 2px;
}
/* --- Tablet --- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-hif { padding: 72px 32px; }
.ts-hif__headline { font-size: 44px; }
.ts-hif__subline { font-size: 17px; margin-bottom: 48px; }
.ts-hif__captions { column-gap: 24px; }
.ts-hif__caption { font-size: 15px; }
}
/* --- Mobile --- */
@media (max-width: 767px) {
.ts-hif { padding: 56px 16px; }
.ts-hif__eyebrow { margin-bottom: 16px; }
.ts-hif__headline { font-size: 40px; margin-bottom: 8px; }
.ts-hif__subline { font-size: 15px; margin-bottom: 40px; }
.ts-hif__phones { max-width: 320px; }
.ts-hif__captions {
grid-template-columns: 1fr;
row-gap: 12px;
margin-top: 24px;
}
.ts-hif__caption { font-size: 15px; }
.ts-hif__hint { margin-top: 32px; font-size: 11px; }
.ts-hif__cta { font-size: 14px; }
}
/* =========================================================================
§11 — Footer (dark ink; legitimacy anchor)
4-col grid desktop → 2×2 tablet → stacked mobile.
Recognition strip, copyright, socials.
========================================================================= */
.ts-foot {
background: #14131A;
color: #F5F1E8;
padding: 96px 24px 64px;
}
.ts-foot__inner {
max-width: 1200px;
margin: 0 auto;
}
/* --- Grid --- */
.ts-foot__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 64px;
margin: 0 0 64px;
}
.ts-foot__col { min-width: 0; }
/* --- Brand block --- */
.ts-foot__logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #F5F1E8;
margin: 0 0 16px;
}
.ts-foot__mark { width: 20px; height: 20px; }
.ts-foot__wordmark {
font-family: var(--font-serif);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.01em;
color: #F5F1E8;
}
.ts-foot__tagline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: #9A9590;
margin: 0 0 24px;
}
.ts-foot__support-label {
font-family: var(--font-sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.12em;
color: #9A9590;
text-transform: uppercase;
margin: 0 0 12px;
}
.ts-foot__support-label span { margin: 0 4px; }
.ts-foot__phones {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.ts-foot__phone {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
color: #F5F1E8;
text-decoration: none;
}
.ts-foot__phone:hover { color: #8B5CF6; }
.ts-foot__pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 20px;
padding: 0 8px;
background: rgba(139, 92, 246, 0.16);
border-radius: 99px;
color: #B08FE8;
font-weight: 600;
font-size: 10px;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.ts-foot__email {
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
color: #8B5CF6;
text-decoration: none;
}
.ts-foot__email:hover { text-decoration: underline; text-underline-offset: 3px; }
/* --- Link columns --- */
.ts-foot__heading {
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #9A9590;
margin: 0 0 16px;
}
.ts-foot__links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ts-foot__links li {
display: flex;
align-items: center;
gap: 8px;
}
.ts-foot__links a {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: #F5F1E8;
text-decoration: none;
}
.ts-foot__links a:hover { color: #8B5CF6; }
.ts-foot__link--accent {
color: #8B5CF6 !important;
font-weight: 600 !important;
}
.ts-foot__hiring-pill {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 8px;
border: 1px solid rgba(139, 92, 246, 0.45);
border-radius: 99px;
background: rgba(139, 92, 246, 0.08);
color: #8B5CF6;
font-family: var(--font-sans);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
}
/* --- Dividers --- */
.ts-foot__divider {
border: 0;
border-top: 1px solid rgba(245, 241, 232, 0.10);
margin: 0;
}
/* --- Recognition strip --- */
.ts-foot__recognition {
list-style: none;
padding: 0;
margin: 40px 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 48px;
}
.ts-foot__recognition li {
display: inline-flex;
align-items: center;
gap: 10px;
color: #9A9590;
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ts-foot__recognition svg { width: 20px; height: 20px; flex-shrink: 0; }
/* --- Bottom band --- */
.ts-foot__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 24px;
padding: 32px 0 0;
}
.ts-foot__copy {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
color: #9A9590;
margin: 0;
}
.ts-foot__social {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.ts-foot__social a {
display: inline-flex;
align-items: center;
justify-content: center;
color: #9A9590;
transition: color 150ms var(--ease-out-fast);
width: 22px;
height: 22px;
}
.ts-foot__social a:hover { color: #F5F1E8; }
.ts-foot__social a svg { width: 18px; height: 18px; }
.ts-foot__social-sep { color: #4A4450; font-size: 14px; line-height: 1; }
/* --- Tablet: 2×2 grid --- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-foot { padding: 72px 32px 48px; }
.ts-foot__grid {
grid-template-columns: 1fr 1fr;
gap: 48px 32px;
}
.ts-foot__recognition { gap: 32px; }
}
/* --- Mobile --- */
@media (max-width: 767px) {
.ts-foot { padding: 48px 20px 32px; }
/* Single-column stack — brand, then each link group in order */
.ts-foot__grid {
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: 32px;
}
/* Brand block — centered */
.ts-foot__col--brand {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid rgba(245, 241, 232, 0.08);
}
.ts-foot__col--brand .ts-foot__phones {
align-items: center; /* center each phone row as a tight unit */
width: auto;
max-width: none;
gap: 10px;
}
.ts-foot__phone { font-size: 15px; }
/* Link columns — left-aligned, each its own vertical block */
.ts-foot__col:not(.ts-foot__col--brand) {
text-align: left;
}
.ts-foot__heading { margin-bottom: 12px; }
.ts-foot__links { gap: 10px; }
.ts-foot__links a { font-size: 15px; }
/* Recognition strip — single column, left-aligned per item */
.ts-foot__recognition {
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin: 28px 0;
}
/* Bottom band */
.ts-foot__bottom {
flex-direction: column;
gap: 16px;
text-align: center;
padding-top: 24px;
}
}
/* =========================================================================
Stub Pages (page.php) — minimal cream layout for /preview, /about, etc.
========================================================================= */
.ts-page {
background: var(--cream);
min-height: 70vh;
padding: 96px 24px;
}
.ts-page__inner {
max-width: 720px;
margin: 0 auto;
}
.ts-page__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 56px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0 0 40px;
}
.ts-page__body {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.7;
color: var(--ink-strong);
}
.ts-page__body h2 {
font-family: var(--font-serif);
font-weight: 600;
font-size: 32px;
line-height: 1.2;
margin: 48px 0 16px;
color: var(--ink-strong);
}
.ts-page__body p { margin: 0 0 20px; }
.ts-page__body a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ts-page__body a:hover { color: var(--purple-hover); }
.ts-page__body ul { margin: 0 0 20px; padding-left: 24px; }
.ts-page__body li { margin: 0 0 8px; }
@media (min-width: 768px) and (max-width: 1023px) {
.ts-page { padding: 72px 32px; }
.ts-page__headline { font-size: 44px; }
}
@media (max-width: 767px) {
.ts-page { padding: 48px 16px; }
.ts-page__headline { font-size: 32px; margin-bottom: 24px; }
.ts-page__body { font-size: 16px; }
.ts-page__body h2 { font-size: 24px; margin: 32px 0 12px; }
}
/* ================= about-styles.css ================= */
/* =========================================================================
about-styles.css — /about (About Tenscale) page
BEM prefix: .ts-about*
Inherits all design tokens and base styles from style.css.
DO NOT introduce new color tokens here — reuse existing ones.
Safe to merge into style.css later; kept separate to avoid collisions
with parallel agent work on landing sections.
Spec source of truth: spec-about.md
========================================================================= */
/* -----------------------------------------------------------------------
Page shell
----------------------------------------------------------------------- */
.ts-about {
background: var(--cream);
color: var(--ink-strong);
}
/* -----------------------------------------------------------------------
§A — Page hero (single H1, narrow editorial column, no CTA)
----------------------------------------------------------------------- */
.ts-about-hero {
background: var(--cream);
padding: 96px 24px 48px;
}
.ts-about-hero__inner {
max-width: 720px;
margin: 0 auto;
}
.ts-about-hero__eyebrow {
margin: 0 0 20px;
}
.ts-about-hero__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 64px;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0;
}
.ts-about-hero__subline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 19px;
line-height: 1.55;
color: var(--slate-alt);
margin: 24px 0 0;
max-width: 640px;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-about-hero { padding: 80px 32px 40px; }
.ts-about-hero__headline { font-size: 48px; }
.ts-about-hero__subline { font-size: 18px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-about-hero { padding: 64px 16px 32px; }
.ts-about-hero__headline { font-size: 36px; }
.ts-about-hero__headline br { display: none; }
.ts-about-hero__subline { font-size: 16px; margin-top: 20px; }
}
/* -----------------------------------------------------------------------
§B — Founding story (three editorial paragraphs, 720px column)
----------------------------------------------------------------------- */
.ts-about-story {
background: var(--cream);
padding: 48px 24px 96px;
}
.ts-about-story__inner {
max-width: 720px;
margin: 0 auto;
}
.ts-about-story__eyebrow {
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 24px;
}
.ts-about-story__body {
display: flex;
flex-direction: column;
gap: 24px;
}
.ts-about-story__para {
font-family: var(--font-sans);
font-weight: 400;
font-size: 18px;
line-height: 1.7;
color: var(--ink-strong);
margin: 0;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-about-story { padding: 40px 32px 80px; }
.ts-about-story__body { gap: 20px; }
.ts-about-story__para { font-size: 17px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-about-story { padding: 32px 16px 64px; }
.ts-about-story__eyebrow { font-size: 11px; margin-bottom: 20px; }
.ts-about-story__body { gap: 18px; }
.ts-about-story__para { font-size: 16px; line-height: 1.65; }
}
/* -----------------------------------------------------------------------
§C — Mission (one emphatic sentence + 3 support lines)
----------------------------------------------------------------------- */
.ts-about-mission {
background: var(--cream);
padding: 96px 24px;
border-top: 1px solid var(--hairline);
}
.ts-about-mission__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.ts-about-mission__eyebrow {
margin: 0 0 24px;
}
.ts-about-mission__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 56px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0;
}
.ts-about-mission__lines {
margin: 32px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ts-about-mission__line {
font-family: var(--font-sans);
font-weight: 400;
font-size: 19px;
line-height: 1.5;
color: var(--slate-alt);
margin: 0;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-about-mission { padding: 80px 32px; }
.ts-about-mission__headline { font-size: 44px; }
.ts-about-mission__line { font-size: 18px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-about-mission { padding: 64px 16px; }
.ts-about-mission__headline { font-size: 32px; }
.ts-about-mission__lines { margin-top: 24px; }
.ts-about-mission__line { font-size: 16px; }
}
/* -----------------------------------------------------------------------
§D — Values (2×2 grid of cream-deep cards, icon + label + descriptor)
----------------------------------------------------------------------- */
.ts-about-values {
background: var(--cream);
padding: 96px 24px;
border-top: 1px solid var(--hairline);
}
.ts-about-values__inner {
max-width: 1080px;
margin: 0 auto;
}
.ts-about-values__header {
text-align: center;
}
.ts-about-values__eyebrow {
margin: 0 0 24px;
}
.ts-about-values__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 44px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0;
}
.ts-about-values__grid {
list-style: none;
padding: 0;
margin: 56px 0 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 24px;
row-gap: 24px;
}
.ts-about-value {
background: var(--cream-deep);
border: none;
border-radius: 16px;
padding: 24px;
}
.ts-about-value__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--purple);
}
.ts-about-value__icon svg {
width: 28px;
height: 28px;
display: block;
}
.ts-about-value__label {
font-family: var(--font-serif);
font-weight: 600;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink-strong);
margin: 16px 0 0;
}
.ts-about-value__desc {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--slate-alt);
margin: 8px 0 0;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-about-values { padding: 80px 32px; }
.ts-about-values__headline { font-size: 36px; }
.ts-about-values__grid { margin-top: 48px; column-gap: 20px; row-gap: 20px; }
.ts-about-value { padding: 20px; }
.ts-about-value__label { font-size: 20px; }
.ts-about-value__desc { font-size: 14px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-about-values { padding: 64px 16px; }
.ts-about-values__headline { font-size: 28px; }
.ts-about-values__grid {
grid-template-columns: 1fr;
margin-top: 40px;
row-gap: 16px;
}
.ts-about-value { padding: 20px; }
.ts-about-value__label { font-size: 19px; }
.ts-about-value__desc { font-size: 14px; }
}
/* -----------------------------------------------------------------------
§E — The team (founders portrait on left, copy + link on right)
----------------------------------------------------------------------- */
.ts-about-team {
background: var(--cream);
padding: 96px 24px;
border-top: 1px solid var(--hairline);
}
.ts-about-team__inner {
max-width: 1200px;
margin: 0 auto;
}
.ts-about-team__header {
text-align: center;
}
.ts-about-team__eyebrow {
margin: 0 0 24px;
}
.ts-about-team__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 40px;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink-strong);
margin: 0;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* Desktop split: 5/12 portrait + 7/12 copy */
.ts-about-team__split {
margin: 56px 0 0;
display: grid;
grid-template-columns: 5fr 7fr;
column-gap: 48px;
align-items: start;
}
.ts-about-team__portrait {
margin: 0;
position: relative;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow:
0 0 80px 0 var(--purple-glow),
0 1px 2px 0 var(--card-shadow);
background: var(--cream-deep); /* placeholder background while image loads */
}
.ts-about-team__portrait img,
.ts-about-team__portrait picture,
.ts-about-team__portrait source {
width: 100%;
height: 100%;
display: block;
}
.ts-about-team__portrait img {
object-fit: cover;
object-position: center 30%;
}
.ts-about-team__copy {
display: flex;
flex-direction: column;
gap: 18px;
padding-top: 8px;
}
.ts-about-team__para {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.65;
color: var(--ink-strong);
margin: 0;
}
.ts-about-team__link {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
line-height: 1.4;
color: var(--purple);
margin-top: 14px;
transition: color 140ms var(--ease-out-fast);
}
.ts-about-team__link svg {
transition: transform 180ms var(--ease-out-fast);
}
.ts-about-team__link:hover,
.ts-about-team__link:focus-visible {
color: var(--purple-hover);
}
.ts-about-team__link:hover svg,
.ts-about-team__link:focus-visible svg {
transform: translateX(2px);
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-about-team { padding: 80px 32px; }
.ts-about-team__headline { font-size: 34px; }
.ts-about-team__split {
grid-template-columns: 1fr;
row-gap: 32px;
margin-top: 48px;
}
.ts-about-team__portrait {
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.ts-about-team__copy { padding-top: 0; }
.ts-about-team__para { font-size: 16px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-about-team { padding: 64px 16px; }
.ts-about-team__headline { font-size: 28px; }
.ts-about-team__split {
grid-template-columns: 1fr;
row-gap: 28px;
margin-top: 40px;
}
.ts-about-team__portrait {
border-radius: 16px;
}
.ts-about-team__copy { padding-top: 0; gap: 16px; }
.ts-about-team__para { font-size: 16px; line-height: 1.6; }
.ts-about-team__link { font-size: 14px; }
}
/* -----------------------------------------------------------------------
§F — Our ground (dark CEE section, 4 city tiles)
----------------------------------------------------------------------- */
.ts-about-ground {
background: var(--dark-bg);
color: var(--cream);
padding: 120px 24px;
}
.ts-about-ground__inner {
max-width: 1200px;
margin: 0 auto;
}
.ts-about-ground__header {
text-align: center;
}
.ts-about-ground__eyebrow {
display: inline-block;
margin: 0 0 24px;
color: var(--purple-lifted);
border: 1px solid var(--purple-lifted);
background: transparent;
}
.ts-about-ground__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 56px;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--cream);
margin: 0;
}
.ts-about-ground__subline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--slate-on-dark-1);
margin: 16px auto 0;
max-width: 640px;
}
.ts-about-ground__cities {
list-style: none;
padding: 0;
margin: 72px 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 24px;
}
.ts-about-city {
background: transparent;
border: 1px solid rgba(176, 133, 224, 0.24);
border-radius: 14px;
padding: 24px;
}
.ts-about-city__name {
font-family: var(--font-serif);
font-weight: 600;
font-size: 32px;
line-height: 1.0;
letter-spacing: -0.01em;
color: var(--cream);
margin: 0;
}
.ts-about-city__sub {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate-on-dark-1);
margin: 14px 0 0;
}
.ts-about-city__detail {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.55;
color: var(--slate-on-dark-2);
margin: 10px 0 0;
}
.ts-about-ground__langs {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
line-height: 1.5;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate-on-dark-3);
text-align: center;
margin: 72px 0 0;
}
.ts-about-ground__lang-sep {
display: inline-block;
margin: 0 12px;
color: var(--slate-on-dark-3);
}
.ts-about-ground__footnote {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
line-height: 1.5;
color: var(--slate);
text-align: center;
margin: 16px 0 0;
}
/* Orchestrated fade-up reveal on entry */
.ts-about-ground__eyebrow,
.ts-about-ground__headline,
.ts-about-ground__subline,
.ts-about-city,
.ts-about-ground__langs,
.ts-about-ground__footnote {
opacity: 0;
transform: translateY(8px);
transition: opacity 500ms var(--ease-out-fast), transform 500ms var(--ease-out-fast);
}
.ts-about-ground.is-revealed .ts-about-ground__eyebrow { opacity: 1; transform: none; transition-delay: 0ms; }
.ts-about-ground.is-revealed .ts-about-ground__headline { opacity: 1; transform: none; transition-delay: 100ms; }
.ts-about-ground.is-revealed .ts-about-ground__subline { opacity: 1; transform: none; transition-delay: 250ms; }
.ts-about-ground.is-revealed .ts-about-city:nth-child(1) { opacity: 1; transform: none; transition-delay: 500ms; }
.ts-about-ground.is-revealed .ts-about-city:nth-child(2) { opacity: 1; transform: none; transition-delay: 600ms; }
.ts-about-ground.is-revealed .ts-about-city:nth-child(3) { opacity: 1; transform: none; transition-delay: 700ms; }
.ts-about-ground.is-revealed .ts-about-city:nth-child(4) { opacity: 1; transform: none; transition-delay: 800ms; }
.ts-about-ground.is-revealed .ts-about-ground__langs { opacity: 1; transform: none; transition-delay: 1050ms; }
.ts-about-ground.is-revealed .ts-about-ground__footnote { opacity: 1; transform: none; transition-delay: 1150ms; }
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-about-ground { padding: 96px 32px; }
.ts-about-ground__headline { font-size: 44px; }
.ts-about-ground__subline { font-size: 17px; }
.ts-about-ground__cities {
column-gap: 16px;
margin-top: 56px;
}
.ts-about-city { padding: 20px; }
.ts-about-city__name { font-size: 28px; }
.ts-about-ground__langs { margin-top: 56px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-about-ground { padding: 72px 16px; }
.ts-about-ground__headline { font-size: 32px; }
.ts-about-ground__subline { font-size: 15px; }
.ts-about-ground__cities {
grid-template-columns: repeat(2, 1fr);
column-gap: 12px;
row-gap: 12px;
margin-top: 48px;
}
.ts-about-city { padding: 18px; }
.ts-about-city__name { font-size: 24px; }
.ts-about-city__sub { font-size: 11px; margin-top: 10px; }
.ts-about-city__detail { font-size: 13px; }
.ts-about-ground__langs { margin-top: 48px; font-size: 12px; }
.ts-about-ground__lang-sep { margin: 0 8px; }
.ts-about-ground__footnote { font-size: 11px; }
}
/* Reduced motion: final state immediately */
@media (prefers-reduced-motion: reduce) {
.ts-about-ground__eyebrow,
.ts-about-ground__headline,
.ts-about-ground__subline,
.ts-about-city,
.ts-about-ground__langs,
.ts-about-ground__footnote {
opacity: 1;
transform: none;
transition: none;
}
}
/* -----------------------------------------------------------------------
§G — By the numbers (4-up stat strip, count-up numerals)
----------------------------------------------------------------------- */
.ts-about-numbers {
background: var(--cream);
padding: 96px 24px;
}
.ts-about-numbers__inner {
max-width: 1080px;
margin: 0 auto;
text-align: center;
}
.ts-about-numbers__eyebrow {
margin: 0 0 48px;
}
.ts-about-numbers__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 48px;
}
.ts-about-num {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.ts-about-num__value {
font-family: var(--font-serif);
font-weight: 600;
font-optical-sizing: auto;
font-size: 72px;
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--purple);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.ts-about-num__label {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: var(--slate-alt);
max-width: 200px;
}
.ts-about-numbers__footnote {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
line-height: 1.5;
color: var(--slate);
margin: 48px 0 0;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-about-numbers { padding: 80px 32px; }
.ts-about-numbers__grid { column-gap: 32px; }
.ts-about-num__value { font-size: 56px; }
.ts-about-num__label { font-size: 14px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-about-numbers { padding: 64px 16px; }
.ts-about-numbers__eyebrow { margin-bottom: 32px; }
.ts-about-numbers__grid {
grid-template-columns: repeat(2, 1fr);
column-gap: 16px;
row-gap: 32px;
}
.ts-about-num__value { font-size: 48px; }
.ts-about-num__label { font-size: 13px; max-width: 160px; }
.ts-about-numbers__footnote { margin-top: 32px; font-size: 11px; }
}
/* -----------------------------------------------------------------------
§H — Quiet CTA exit (single text link)
----------------------------------------------------------------------- */
.ts-about-exit {
background: var(--cream);
padding: 96px 24px 128px;
border-top: 1px solid var(--hairline);
}
.ts-about-exit__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.ts-about-exit__prompt {
font-family: var(--font-serif);
font-weight: 400;
font-size: 24px;
line-height: 1.4;
color: var(--slate-alt);
margin: 0 0 12px;
}
.ts-about-exit__prompt em {
font-style: italic;
}
.ts-about-exit__link {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 22px;
line-height: 1.3;
color: var(--purple);
transition: color 140ms var(--ease-out-fast);
}
.ts-about-exit__link svg {
transition: transform 180ms var(--ease-out-fast);
}
.ts-about-exit__link:hover,
.ts-about-exit__link:focus-visible {
color: var(--purple-hover);
}
.ts-about-exit__link:hover svg,
.ts-about-exit__link:focus-visible svg {
transform: translateX(2px);
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-about-exit { padding: 80px 32px 96px; }
.ts-about-exit__prompt { font-size: 22px; }
.ts-about-exit__link { font-size: 20px; }
}
/* Mobile */
@media (max-width: 767px) {
.ts-about-exit { padding: 64px 16px 80px; }
.ts-about-exit__prompt { font-size: 19px; }
.ts-about-exit__link { font-size: 18px; }
.ts-about-exit__link svg { width: 16px; height: 16px; margin-left: 6px; }
}
/* ================= careers-styles.css ================= */
/* =========================================================================
careers-styles.css — /careers page
BEM prefix: .ts-careers*
Inherits all design tokens and base styles from style.css.
DO NOT introduce new color tokens here — reuse existing ones.
Safe to merge into style.css later; kept separate to avoid collisions
with parallel agent work on landing sections.
========================================================================= */
/* -----------------------------------------------------------------------
Page shell
----------------------------------------------------------------------- */
.ts-careers {
background: var(--cream);
color: var(--ink-strong);
}
/* Shared inner column — 960px editorial width */
.ts-careers__inner {
max-width: 960px;
margin: 0 auto;
padding: 0 24px;
}
/* Section vertical rhythm: 96px between regions, 0 inside
(each region sets its own internal padding).
The first region (hero) has its own top padding; subsequent regions
stack at 0 gap and set margin-top via the region class. */
.ts-careers > section + section {
/* fallback, individual sections own their spacing below */
}
/* -----------------------------------------------------------------------
1. HERO — eyebrow, headline, mission, full-bleed office photo
----------------------------------------------------------------------- */
.ts-careers__hero {
padding: 72px 0 0;
}
.ts-careers__eyebrow {
display: inline-flex;
margin: 0 0 24px;
}
.ts-careers__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 56px;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0;
max-width: 18ch;
}
.ts-careers__mission {
font-family: var(--font-sans);
font-weight: 400;
font-size: 18px;
line-height: 1.6;
color: var(--slate-alt);
max-width: 640px;
margin: 24px 0 0;
}
.ts-careers__hero-photo {
margin: 48px 0 0;
padding: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px 0 var(--card-shadow);
aspect-ratio: 16 / 9;
background: var(--cream-deep);
}
.ts-careers__hero-photo picture,
.ts-careers__hero-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* -----------------------------------------------------------------------
2. WHY WORK HERE — 2×2 grid of reasons
----------------------------------------------------------------------- */
.ts-careers-why {
padding: 96px 0 0;
}
.ts-careers-why__eyebrow {
display: inline-flex;
margin: 0 0 24px;
}
.ts-careers-why__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 40px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0 0 48px;
}
.ts-careers-why__grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 48px;
row-gap: 48px;
}
.ts-careers-reason {
/* No borders, no backgrounds, no icons — whitespace separates items */
margin: 0;
}
.ts-careers-reason__title {
font-family: var(--font-serif);
font-weight: 600;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--ink-strong);
margin: 0;
}
.ts-careers-reason__body {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--slate-alt);
margin: 12px 0 0;
max-width: 52ch;
}
/* -----------------------------------------------------------------------
3. OPEN ROLES — accordion
----------------------------------------------------------------------- */
.ts-careers-roles {
padding: 96px 0 0;
}
.ts-careers-roles__eyebrow {
display: inline-flex;
margin: 0 0 24px;
}
.ts-careers-roles__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 40px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0;
}
.ts-careers-roles__subline {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--slate-alt);
margin: 12px 0 40px;
}
.ts-careers-roles__list {
border-top: 1px solid var(--hairline);
}
/* --- individual row --- */
.ts-careers-role {
border-bottom: 1px solid var(--hairline);
}
.ts-careers-role__heading {
margin: 0;
font-weight: inherit;
}
.ts-careers-role__toggle {
display: grid;
grid-template-columns: 1fr auto auto;
column-gap: 24px;
align-items: center;
width: 100%;
padding: 20px 0;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: var(--ink-strong);
transition: background 150ms var(--ease-out-fast);
}
.ts-careers-role__toggle:hover {
background: rgba(26, 26, 46, 0.02);
}
.ts-careers-role__toggle:hover .ts-careers-role__chevron {
color: var(--ink-strong);
}
.ts-careers-role__toggle:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 3px;
border-radius: 2px;
}
.ts-careers-role__title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 18px;
line-height: 1.35;
color: var(--ink-strong);
}
.ts-careers-role__location {
font-family: var(--font-sans);
font-weight: 500;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate-alt);
white-space: nowrap;
}
.ts-careers-role__chevron {
width: 22px;
height: 22px;
flex: 0 0 22px;
color: var(--slate-alt);
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
color 150ms var(--ease-out-fast);
}
.ts-careers-role.is-open .ts-careers-role__chevron {
transform: rotate(180deg);
}
/* --- panel --- */
/* CSS-only expand via grid-template-rows 0fr/1fr trick — same as .ts-faq__panel */
.ts-careers-role__panel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ts-careers-role__panel-inner {
overflow: hidden;
min-height: 0;
}
.ts-careers-role.is-open .ts-careers-role__panel {
grid-template-rows: 1fr;
opacity: 1;
}
.ts-careers-role__desc {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--slate-alt);
margin: 0 0 16px;
padding-top: 4px;
max-width: 70ch;
}
.ts-careers-role__bullets {
list-style: none;
padding: 0;
margin: 0 0 20px;
max-width: 70ch;
}
.ts-careers-role__bullets li {
position: relative;
padding: 4px 0 4px 20px;
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.6;
color: var(--slate-alt);
}
.ts-careers-role__bullets li::before {
content: "";
position: absolute;
left: 4px;
top: 14px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--purple);
}
.ts-careers-role__apply {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: var(--slate-alt);
margin: 0 0 24px;
}
.ts-careers-role__email {
color: var(--purple);
font-weight: 600;
text-decoration: none;
transition: text-decoration 150ms var(--ease-out-fast);
}
.ts-careers-role__email:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.ts-careers-role__email:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 3px;
border-radius: 2px;
}
/* -----------------------------------------------------------------------
4. CITIES — three-column card row
----------------------------------------------------------------------- */
.ts-careers-cities {
padding: 96px 0 0;
}
.ts-careers-cities__eyebrow {
display: inline-flex;
margin: 0 0 24px;
}
.ts-careers-cities__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 40px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0 0 48px;
}
.ts-careers-cities__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.ts-careers-city {
padding: 24px;
border: 1px solid var(--hairline);
border-radius: 12px;
background: transparent;
display: flex;
flex-direction: column;
gap: 12px;
}
.ts-careers-city__label {
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate-alt);
margin: 0;
}
.ts-careers-city__name {
font-family: var(--font-serif);
font-weight: 600;
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink-strong);
margin: 0;
}
.ts-careers-city__address {
display: flex;
flex-direction: column;
gap: 2px;
font-style: normal;
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: var(--slate-alt);
margin: 0;
}
.ts-careers-city__character {
font-family: var(--font-sans);
font-weight: 400;
font-style: italic;
font-size: 15px;
line-height: 1.55;
color: var(--slate-alt);
margin: 4px 0 0;
}
/* -----------------------------------------------------------------------
5. TEAM STANDUP — full-bleed editorial photograph
----------------------------------------------------------------------- */
.ts-careers-team {
padding: 96px 0 0;
}
.ts-careers-team__photo {
margin: 0;
padding: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px 0 var(--card-shadow);
aspect-ratio: 16 / 9;
background: var(--cream-deep);
}
.ts-careers-team__photo picture,
.ts-careers-team__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* -----------------------------------------------------------------------
6. WHAT WE DON'T DO — honesty block
----------------------------------------------------------------------- */
.ts-careers-dont {
padding: 96px 0 0;
}
.ts-careers-dont__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 36px;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0 0 32px;
}
.ts-careers-dont__p {
font-family: var(--font-sans);
font-weight: 400;
font-size: 18px;
line-height: 1.7;
color: var(--slate-alt);
max-width: 640px;
margin: 0 0 24px;
}
.ts-careers-dont__p:last-of-type {
margin-bottom: 0;
}
.ts-careers-dont__lead {
color: var(--ink-strong);
font-weight: 600;
}
/* -----------------------------------------------------------------------
7. CLOSING CTA — quiet text link
----------------------------------------------------------------------- */
.ts-careers-close {
padding: 96px 0;
text-align: center;
}
.ts-careers-close__text {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
color: var(--slate-alt);
margin: 0;
}
.ts-careers-close__link {
display: inline-block;
margin-left: 6px;
color: var(--purple);
font-weight: 600;
text-decoration: none;
transition: text-decoration 150ms var(--ease-out-fast);
}
.ts-careers-close__link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.ts-careers-close__link:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 3px;
border-radius: 2px;
}
/* -----------------------------------------------------------------------
Tablet — 768 to 1023
----------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-careers__inner {
padding: 0 32px;
}
.ts-careers__hero { padding-top: 64px; }
.ts-careers__headline { font-size: 44px; }
.ts-careers__mission { font-size: 17px; }
.ts-careers__hero-photo { margin-top: 40px; }
.ts-careers-why { padding-top: 72px; }
.ts-careers-why__headline { font-size: 36px; margin-bottom: 40px; }
.ts-careers-why__grid { column-gap: 40px; row-gap: 40px; }
.ts-careers-reason__title { font-size: 20px; }
.ts-careers-roles { padding-top: 72px; }
.ts-careers-roles__headline { font-size: 36px; }
.ts-careers-cities { padding-top: 72px; }
.ts-careers-cities__headline { font-size: 36px; margin-bottom: 40px; }
.ts-careers-city { padding: 20px; }
.ts-careers-city__name { font-size: 26px; }
.ts-careers-team { padding-top: 72px; }
.ts-careers-dont { padding-top: 72px; }
.ts-careers-dont__headline { font-size: 32px; }
.ts-careers-dont__p { font-size: 17px; }
.ts-careers-close { padding: 72px 0; }
}
/* -----------------------------------------------------------------------
Mobile — < 768
----------------------------------------------------------------------- */
@media (max-width: 767px) {
.ts-careers__inner {
padding: 0 16px;
}
/* Hero */
.ts-careers__hero { padding-top: 48px; }
.ts-careers__headline {
font-size: 34px;
line-height: 1.15;
letter-spacing: -0.01em;
max-width: none;
}
.ts-careers__headline br {
display: none; /* let wrapping handle line breaks */
}
.ts-careers__mission {
font-size: 16px;
line-height: 1.6;
margin-top: 20px;
}
.ts-careers__hero-photo {
margin-top: 32px;
border-radius: 12px;
}
/* Why */
.ts-careers-why { padding-top: 56px; }
.ts-careers-why__headline {
font-size: 32px;
margin-bottom: 32px;
}
.ts-careers-why__grid {
grid-template-columns: 1fr;
row-gap: 32px;
}
.ts-careers-reason__title { font-size: 19px; }
.ts-careers-reason__body { font-size: 15px; }
/* Roles */
.ts-careers-roles { padding-top: 56px; }
.ts-careers-roles__headline {
font-size: 32px;
}
.ts-careers-roles__subline {
font-size: 14px;
margin-bottom: 28px;
}
.ts-careers-role__toggle {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 4px;
padding: 16px 0;
}
.ts-careers-role__title {
grid-column: 1;
grid-row: 1;
font-size: 17px;
}
.ts-careers-role__location {
grid-column: 1;
grid-row: 2;
font-size: 11px;
}
.ts-careers-role__chevron {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
width: 18px;
height: 18px;
flex-basis: 18px;
}
.ts-careers-role__desc { font-size: 15px; }
.ts-careers-role__bullets li { font-size: 14px; }
.ts-careers-role__apply { font-size: 14px; }
/* Cities */
.ts-careers-cities { padding-top: 56px; }
.ts-careers-cities__headline {
font-size: 32px;
margin-bottom: 32px;
}
.ts-careers-cities__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.ts-careers-city {
padding: 20px;
}
.ts-careers-city__name { font-size: 24px; }
/* Team photo */
.ts-careers-team {
padding-top: 56px;
}
.ts-careers-team__photo {
border-radius: 12px;
}
/* Don't do */
.ts-careers-dont { padding-top: 56px; }
.ts-careers-dont__headline {
font-size: 28px;
margin-bottom: 24px;
}
.ts-careers-dont__p {
font-size: 16px;
line-height: 1.65;
margin-bottom: 20px;
}
/* Close */
.ts-careers-close {
padding: 64px 0;
}
.ts-careers-close__text {
font-size: 15px;
}
.ts-careers-close__link {
display: inline;
margin-left: 4px;
}
}
/* -----------------------------------------------------------------------
Reduced motion
----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.ts-careers-role__panel,
.ts-careers-role__chevron,
.ts-careers-role__toggle,
.ts-careers-role__email,
.ts-careers-close__link {
transition: none !important;
}
}
/* ================= partners-styles.css ================= */
/* =========================================================================
Tenscale — /partners page styles
Scoped to `.ts-partners-page` body + `.ts-partners*` BEM. Never edit
style.css directly; extend it here. Reuses all tokens from style.css.
========================================================================= */
/* ---------- Local fallback tokens (only used if not present in style.css) */
.ts-partners-page {
--ts-partners-cream-dim: #F5F1E8; /* primary text on dark band */
--ts-partners-track-gap: 112px; /* desktop vertical section rhythm */
}
/* =========================================================================
§1 — Hero
========================================================================= */
.ts-partners-hero {
background: var(--cream);
padding: 56px 24px 96px;
}
.ts-partners-hero__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 52fr 48fr;
gap: 64px;
align-items: center;
}
.ts-partners-hero__copy { text-align: left; }
.ts-partners-hero__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 52px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 20px 0 0;
}
.ts-partners-hero__headline-line { display: block; }
.ts-partners-hero__headline--accent { color: var(--purple); }
.ts-partners-hero__subhead {
font-family: var(--font-sans);
font-weight: 500;
font-size: 18px;
line-height: 1.55;
color: var(--slate-alt);
margin: 24px 0 0;
max-width: 560px;
}
.ts-partners-hero__meta {
margin: 24px 0 0;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
color: var(--slate-alt);
}
.ts-partners-hero__meta span[role="listitem"] { white-space: nowrap; }
.ts-partners-hero__meta-sep { padding: 0 10px; user-select: none; color: var(--slate-alt); }
.ts-partners-hero__portrait {
position: relative;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow:
0 0 80px 0 var(--purple-glow),
0 1px 2px 0 var(--card-shadow);
}
.ts-partners-hero__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
}
/* Tablet hero */
@media (max-width: 1023px) and (min-width: 768px) {
.ts-partners-hero { padding: 48px 32px 72px; }
.ts-partners-hero__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
.ts-partners-hero__headline { font-size: 44px; }
.ts-partners-hero__subhead { font-size: 17px; }
}
/* Mobile hero */
@media (max-width: 767px) {
.ts-partners-hero { padding: 32px 16px 48px; }
.ts-partners-hero__inner { grid-template-columns: 1fr; gap: 0; }
.ts-partners-hero__copy { order: 1; text-align: left; }
.ts-partners-hero__portrait { order: 2; margin-top: 28px; border-radius: 20px; }
.ts-partners-hero__headline { font-size: 36px; line-height: 1.08; }
.ts-partners-hero__subhead { font-size: 15px; }
.ts-partners-hero__meta { font-size: 13px; }
.ts-partners-hero__meta-sep { padding: 0 8px; }
}
/* =========================================================================
§2 — Jump-strip
========================================================================= */
.ts-partners-jump {
background: var(--cream);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.ts-partners-jump__list {
max-width: 1200px;
margin: 0 auto;
padding: 20px 24px;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.ts-partners-jump__item { flex: 1 1 0; min-width: 0; }
.ts-partners-jump__link {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 6px 0;
color: var(--ink-strong);
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 140ms var(--ease-out-fast);
}
.ts-partners-jump__num {
font-family: var(--font-sans);
font-weight: 600;
color: var(--slate-dim);
letter-spacing: 0;
}
.ts-partners-jump__arrow {
width: 14px; height: 14px;
opacity: 0.6;
transition: transform 140ms var(--ease-out-fast), opacity 140ms var(--ease-out-fast);
}
.ts-partners-jump__link:hover { color: var(--purple); }
.ts-partners-jump__link:hover .ts-partners-jump__arrow { transform: translateX(3px); opacity: 1; color: var(--purple); }
@media (max-width: 767px) {
.ts-partners-jump__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px; }
.ts-partners-jump__item { border-bottom: 1px solid var(--hairline); }
.ts-partners-jump__item:last-child { border-bottom: 0; }
.ts-partners-jump__link {
width: 100%;
justify-content: flex-start;
padding: 16px 0;
}
.ts-partners-jump__label { flex: 1; }
}
/* =========================================================================
§3–§5 — Track sections (shared shell)
========================================================================= */
.ts-partners-track {
background: var(--cream);
padding: 112px 24px;
border-top: 1px solid var(--hairline);
}
.ts-partners-track:first-of-type { border-top: 0; }
.ts-partners-track__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 7fr 5fr;
gap: 80px;
align-items: start;
}
.ts-partners-track__inner--narrow {
grid-template-columns: 1fr;
gap: 48px;
max-width: 960px;
}
.ts-partners-track__copy { max-width: 620px; }
.ts-partners-track__copy--centered { max-width: none; text-align: center; margin: 0 auto; }
.ts-partners-track__label {
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate-dim);
margin: 0 0 20px;
}
.ts-partners-track__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 40px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink-strong);
margin: 0;
text-wrap: balance;
}
.ts-partners-track__headline--accent { color: var(--purple); }
.ts-partners-track__body {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--slate);
margin: 24px 0 0;
}
.ts-partners-track__body--wide { max-width: 720px; margin-left: auto; margin-right: auto; }
.ts-partners-track__outcome {
font-family: var(--font-sans);
font-weight: 500;
font-size: 15px;
line-height: 1.6;
color: var(--ink-strong);
margin: 24px 0 0;
}
.ts-partners-track__outcome strong { font-weight: 700; color: var(--purple); }
.ts-partners-track__footnote {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
line-height: 1.55;
color: var(--slate-dim);
margin: 24px auto 0;
max-width: 720px;
text-align: center;
font-style: italic;
}
/* ---------- §3 Agencies: terms table (right column) */
.ts-partners-track__terms {
background: #FEFDFA;
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 28px 28px 24px;
box-shadow: 0 1px 2px var(--card-shadow);
}
.ts-partners-terms {
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.ts-partners-terms__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--hairline);
align-items: baseline;
}
.ts-partners-terms__row:last-child { border-bottom: 0; padding-bottom: 4px; }
.ts-partners-terms__row:first-child { padding-top: 4px; }
.ts-partners-terms dt {
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate-dim);
}
.ts-partners-terms dd {
margin: 0;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
line-height: 1.4;
color: var(--ink-strong);
text-align: right;
}
.ts-partners-terms dd a { color: var(--purple); }
.ts-partners-terms dd a:hover { color: var(--purple-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ts-partners-terms__footnote {
margin: 20px 0 0;
font-family: var(--font-sans);
font-weight: 400;
font-size: 12.5px;
line-height: 1.55;
color: var(--slate-dim);
font-style: italic;
}
/* ---------- §4 Tech: platform grid */
.ts-partners-platforms {
list-style: none;
margin: 48px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.ts-partners-platforms__cell {
display: flex;
align-items: center;
justify-content: center;
min-height: 72px;
padding: 20px 16px;
background: transparent;
border: 1px solid var(--hairline);
border-radius: 10px;
transition:
border-color 140ms var(--ease-out-fast),
color 140ms var(--ease-out-fast),
background 140ms var(--ease-out-fast),
transform 140ms var(--ease-out-fast);
cursor: default;
}
.ts-partners-platforms__cell:hover {
border-color: var(--purple);
color: var(--purple);
background: var(--purple-tint);
transform: translateY(-1px);
}
.ts-partners-platforms__name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: inherit;
text-align: center;
}
.ts-partners-platforms__cell:not(:hover) .ts-partners-platforms__name { color: var(--ink-strong); }
/* ---------- §5 Associations: vertical list */
.ts-partners-assoc {
background: #FEFDFA;
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 28px;
box-shadow: 0 1px 2px var(--card-shadow);
}
.ts-partners-assoc__label {
margin: 0 0 16px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate-dim);
}
.ts-partners-assoc__list { list-style: none; margin: 0; padding: 0; }
.ts-partners-assoc__row {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid var(--hairline);
align-items: start;
}
.ts-partners-assoc__row:last-child { border-bottom: 0; padding-bottom: 4px; }
.ts-partners-assoc__row:first-child { padding-top: 4px; }
.ts-partners-assoc__pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 24px;
padding: 0 8px;
background: var(--purple-tint);
color: var(--purple);
border-radius: 4px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
margin-top: 2px;
}
.ts-partners-assoc__pill--empty {
background: transparent;
border: 1px dashed var(--hairline-strong);
color: transparent;
}
.ts-partners-assoc__body { min-width: 0; }
.ts-partners-assoc__name {
margin: 0;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
line-height: 1.35;
color: var(--ink-strong);
}
.ts-partners-assoc__name--link {
color: var(--purple);
display: inline-flex;
align-items: center;
transition: color 140ms var(--ease-out-fast);
}
.ts-partners-assoc__name--link:hover { color: var(--purple-hover); }
.ts-partners-assoc__meta {
margin: 4px 0 0;
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate-dim);
}
.ts-partners-assoc__row--empty {
opacity: 0.9;
}
/* ---------- Responsive track sections */
@media (max-width: 1023px) and (min-width: 768px) {
.ts-partners-track { padding: 80px 32px; }
.ts-partners-track__inner { gap: 48px; grid-template-columns: 1fr; }
.ts-partners-track__headline { font-size: 34px; }
.ts-partners-platforms { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.ts-partners-track { padding: 56px 16px; }
.ts-partners-track__inner { grid-template-columns: 1fr; gap: 32px; }
.ts-partners-track__headline { font-size: 28px; line-height: 1.15; }
.ts-partners-track__body { font-size: 15px; }
.ts-partners-track__outcome { font-size: 14.5px; }
.ts-partners-track__terms { padding: 20px 20px 16px; }
.ts-partners-terms__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
.ts-partners-terms dd { text-align: left; }
.ts-partners-platforms { grid-template-columns: 1fr; gap: 8px; margin-top: 32px; }
.ts-partners-platforms__cell { min-height: 56px; padding: 14px 16px; }
.ts-partners-assoc { padding: 20px; }
}
/* =========================================================================
§6 — Testimonial
========================================================================= */
.ts-partners-quote {
background: var(--cream);
padding: 96px 24px;
border-top: 1px solid var(--hairline);
}
.ts-partners-quote__figure {
max-width: 760px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.ts-partners-quote__portrait {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 40px 0 var(--purple-glow), 0 1px 2px var(--card-shadow);
margin-bottom: 32px;
}
.ts-partners-quote__portrait img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 30%;
}
.ts-partners-quote__text {
font-family: var(--font-serif);
font-weight: 400;
font-size: 26px;
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--ink-strong);
margin: 0;
text-wrap: balance;
}
.ts-partners-quote__attr {
margin: 24px 0 0;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
color: var(--slate-alt);
}
.ts-partners-quote__attr-sep { padding: 0 8px; user-select: none; }
.ts-partners-quote__attr-meta { color: var(--slate-dim); font-weight: 400; }
@media (max-width: 767px) {
.ts-partners-quote { padding: 56px 16px; }
.ts-partners-quote__portrait { width: 88px; height: 88px; margin-bottom: 24px; }
.ts-partners-quote__text { font-size: 20px; line-height: 1.4; }
.ts-partners-quote__attr { font-size: 13px; }
}
/* =========================================================================
§7 — Apply band (dark)
========================================================================= */
.ts-partners-apply {
background: var(--ink);
padding: 112px 24px;
}
.ts-partners-apply__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
color: var(--ts-partners-cream-dim);
}
.ts-partners-apply__eyebrow {
color: var(--purple-bright);
border-color: var(--purple-bright);
background: transparent;
}
.ts-partners-apply__headline {
font-family: var(--font-serif);
font-weight: 500;
font-size: 44px;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--ts-partners-cream-dim);
margin: 24px 0 0;
text-wrap: balance;
}
.ts-partners-apply__headline--accent { color: var(--purple-bright); }
.ts-partners-apply__body {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--warm-grey);
margin: 24px auto 0;
max-width: 560px;
}
.ts-partners-apply__btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 36px;
height: 56px;
padding: 18px 28px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
color: var(--white);
background: var(--purple);
border-radius: 10px;
box-shadow: 0 8px 24px 0 var(--purple-shadow-df);
transition:
background 150ms var(--ease-out-fast),
transform 150ms var(--ease-out-fast),
box-shadow 150ms var(--ease-out-fast);
}
.ts-partners-apply__btn:hover {
background: var(--purple-hover);
transform: translateY(-1px);
box-shadow: 0 12px 28px 0 var(--purple-shadow-hv);
}
.ts-partners-apply__btn:active {
background: var(--purple-active);
transform: translateY(0);
box-shadow: 0 6px 16px 0 var(--purple-shadow-ac);
transition-duration: 80ms;
}
.ts-partners-apply__btn svg { width: 18px; height: 18px; }
.ts-partners-apply__note {
margin: 20px 0 0;
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
color: var(--warm-grey);
opacity: 0.8;
}
@media (max-width: 1023px) and (min-width: 768px) {
.ts-partners-apply { padding: 88px 32px; }
.ts-partners-apply__headline { font-size: 38px; }
}
@media (max-width: 767px) {
.ts-partners-apply { padding: 64px 16px; }
.ts-partners-apply__headline { font-size: 30px; line-height: 1.15; }
.ts-partners-apply__body { font-size: 15px; }
.ts-partners-apply__btn { width: 100%; justify-content: center; height: 52px; padding: 16px 20px; font-size: 15px; }
}
/* =========================================================================
Reduced motion — disable hover transforms
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.ts-partners-jump__arrow,
.ts-partners-platforms__cell,
.ts-partners-apply__btn {
transition: none !important;
}
.ts-partners-platforms__cell:hover,
.ts-partners-apply__btn:hover {
transform: none !important;
}
.ts-partners-jump__link:hover .ts-partners-jump__arrow {
transform: none !important;
}
}
/* ================= press-styles.css ================= */
/* =========================================================================
press-styles.css — /press (Press & Media) page
BEM prefix: .ts-press*
Inherits all design tokens and base styles from style.css.
DO NOT introduce new color tokens here — reuse existing ones.
Safe to merge into style.css later; kept separate to avoid collisions
with parallel agent work on landing sections.
========================================================================= */
/* -----------------------------------------------------------------------
Page shell
----------------------------------------------------------------------- */
.ts-press {
background: var(--cream);
color: var(--ink-strong);
padding: 72px 24px 96px;
}
.ts-press__inner {
max-width: 1040px;
margin: 0 auto;
}
/* Inter-block spacing rhythm */
.ts-press > * + *,
.ts-press__inner > * + * {
/* fallback — actual block gaps handled per section below */
}
.ts-press__block + .ts-press__block {
margin-top: 72px;
}
/* -----------------------------------------------------------------------
Intro block (4.B)
----------------------------------------------------------------------- */
.ts-press__intro {
padding-bottom: 24px;
}
.ts-press__intro-eyebrow {
/* Reuses .ts-eyebrow for pill styling; this class only sets spacing. */
margin: 0 0 20px;
}
.ts-press__intro-headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 56px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0;
}
.ts-press__intro-headline span {
display: block;
}
.ts-press__intro-subhead {
font-family: var(--font-sans);
font-weight: 500;
font-size: 18px;
line-height: 1.55;
color: var(--slate-alt);
margin: 20px 0 0;
max-width: 640px;
}
/* -----------------------------------------------------------------------
Shared block heading (appears above §C onward)
----------------------------------------------------------------------- */
.ts-press__block-heading {
font-family: var(--font-sans);
font-weight: 600;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--ink-strong);
margin: 0 0 24px;
}
.ts-press__block-lede {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--slate-alt);
margin: -16px 0 24px;
max-width: 640px;
}
/* -----------------------------------------------------------------------
Quick facts card (4.C)
----------------------------------------------------------------------- */
.ts-press__facts {
background: var(--cream-deep);
border: 1px solid var(--hairline);
border-radius: 16px;
padding: 32px;
}
.ts-press__facts-list {
list-style: none;
padding: 0;
margin: 0;
}
.ts-press__facts-row {
display: grid;
grid-template-columns: 220px 1fr;
column-gap: 32px;
align-items: baseline;
padding: 16px 0;
border-bottom: 1px solid var(--hairline);
}
.ts-press__facts-row:first-child { padding-top: 0; }
.ts-press__facts-row:last-child { padding-bottom: 0; border-bottom: 0; }
.ts-press__facts-label {
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate);
}
.ts-press__facts-value {
font-family: var(--font-sans);
font-weight: 500;
font-size: 17px;
line-height: 1.4;
color: var(--ink-strong);
}
.ts-press__facts-value--dim {
color: var(--slate);
font-style: italic;
}
/* -----------------------------------------------------------------------
Press releases (4.D)
----------------------------------------------------------------------- */
.ts-press__releases {
list-style: none;
padding: 0;
margin: 0;
}
.ts-press__release {
display: block;
border-top: 1px solid var(--hairline);
}
.ts-press__release:last-child {
border-bottom: 1px solid var(--hairline);
}
.ts-press__release-link {
display: grid;
grid-template-columns: 120px 1fr auto;
column-gap: 32px;
align-items: start;
padding: 24px 16px;
border-radius: 10px;
color: inherit;
text-decoration: none;
transition: background 140ms var(--ease-out-fast);
}
.ts-press__release-link:hover {
background: var(--purple-tint);
}
.ts-press__release-link:hover .ts-press__release-cta svg {
transform: translateX(2px);
}
.ts-press__release-link:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 2px;
background: var(--purple-tint);
}
.ts-press__release-date {
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate);
padding-top: 4px;
}
.ts-press__release-body { min-width: 0; }
.ts-press__release-headline {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink-strong);
margin: 0;
}
.ts-press__release-summary {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--slate-alt);
margin: 8px 0 0;
max-width: 60ch;
}
.ts-press__release-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding-top: 6px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--purple);
white-space: nowrap;
}
.ts-press__release-cta svg {
width: 14px; height: 14px;
transition: transform 140ms var(--ease-out-fast);
}
/* -----------------------------------------------------------------------
Leadership (4.E)
----------------------------------------------------------------------- */
.ts-press__leaders {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.ts-press__leader { display: block; }
.ts-press__leader-portrait {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 0 80px 0 var(--purple-glow),
0 1px 2px 0 var(--card-shadow);
margin: 0 0 20px;
}
.ts-press__leader-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
.ts-press__leader-name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink-strong);
margin: 0;
}
.ts-press__leader-role {
display: block;
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--purple);
margin: 6px 0 0;
}
.ts-press__leader-bio {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--slate-alt);
margin: 12px 0 0;
max-width: 32ch;
}
/* -----------------------------------------------------------------------
Brand assets (4.F)
----------------------------------------------------------------------- */
.ts-press__assets {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.ts-press__asset {
background: var(--cream);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 24px;
display: flex;
flex-direction: column;
min-height: 170px;
transition: border-color 140ms var(--ease-out-fast),
background 140ms var(--ease-out-fast);
}
.ts-press__asset:hover {
border-color: var(--hairline-strong);
background: var(--cream-deep);
}
.ts-press__asset-top {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 20px;
}
.ts-press__asset-icon {
width: 32px; height: 32px;
color: var(--slate-alt);
}
.ts-press__asset-ext {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 8px;
border-radius: 4px;
background: var(--purple-tint);
color: var(--purple);
font-family: var(--font-sans);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.10em;
text-transform: uppercase;
line-height: 1;
}
.ts-press__asset-name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 17px;
line-height: 1.3;
color: var(--ink-strong);
margin: 0 0 6px;
}
.ts-press__asset-desc {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: var(--slate-alt);
margin: 0 0 16px;
flex: 1 1 auto;
}
.ts-press__asset-download {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--purple);
text-decoration: none;
}
.ts-press__asset-download:hover { color: var(--purple-hover); }
.ts-press__asset-download:hover svg { transform: translateX(2px); }
.ts-press__asset-download svg {
width: 14px; height: 14px;
transition: transform 140ms var(--ease-out-fast);
}
.ts-press__asset-size {
color: var(--slate-dim);
font-weight: 400;
margin-left: 4px;
}
/* Usage dos/don'ts block */
.ts-press__usage {
margin-top: 24px;
background: var(--purple-tint);
border: 1px solid rgba(107, 63, 160, 0.15);
border-radius: 14px;
padding: 24px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 32px;
row-gap: 16px;
}
.ts-press__usage-col h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
color: var(--ink-strong);
margin: 0 0 8px;
}
.ts-press__usage-col p {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.55;
color: var(--slate);
margin: 0;
}
/* -----------------------------------------------------------------------
In the news (4.G)
----------------------------------------------------------------------- */
.ts-press__news {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.ts-press__news-item {
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 28px 16px;
display: flex;
align-items: center;
justify-content: center;
min-height: 72px;
background: var(--cream);
}
.ts-press__news-mark {
font-family: var(--font-sans);
font-weight: 600;
font-size: 18px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--slate);
text-align: center;
line-height: 1.2;
}
.ts-press__news-caption {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
line-height: 1.55;
color: var(--slate-dim);
text-align: center;
margin: 20px 0 0;
}
/* -----------------------------------------------------------------------
Media contact (4.H)
----------------------------------------------------------------------- */
.ts-press__contact {
background: var(--cream-deep);
border: 1px solid var(--hairline);
border-radius: 16px;
padding: 48px 40px;
text-align: center;
}
.ts-press__contact-inner {
max-width: 560px;
margin: 0 auto;
}
.ts-press__contact-eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--purple);
margin: 0 0 16px;
}
.ts-press__contact-lede {
font-family: var(--font-sans);
font-weight: 500;
font-size: 17px;
line-height: 1.5;
color: var(--ink-strong);
margin: 0 0 28px;
}
.ts-press__contact-email {
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
padding: 0 20px;
background: var(--purple);
color: var(--white);
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 6px 18px 0 var(--purple-shadow-df);
transition: background 150ms var(--ease-out-fast),
transform 150ms var(--ease-out-fast),
box-shadow 150ms var(--ease-out-fast);
}
.ts-press__contact-email:hover {
background: var(--purple-hover);
transform: translateY(-1px);
box-shadow: 0 8px 22px 0 var(--purple-shadow-hv);
}
.ts-press__contact-email:active {
background: var(--purple-active);
transform: translateY(0);
box-shadow: 0 4px 12px 0 var(--purple-shadow-ac);
transition-duration: 80ms;
}
.ts-press__contact-email svg { width: 16px; height: 16px; }
.ts-press__contact-sla {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 1.55;
color: var(--slate);
margin: 16px 0 0;
}
.ts-press__contact-divider {
border: 0;
border-top: 1px solid var(--hairline);
max-width: 320px;
margin: 32px auto;
}
.ts-press__contact-phones-label {
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
color: var(--slate);
margin: 0 0 16px;
}
.ts-press__contact-phones {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
flex-direction: column;
gap: 10px;
}
.ts-press__contact-phone {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 15px;
color: var(--ink-strong);
text-decoration: none;
}
.ts-press__contact-phone:hover { color: var(--purple); }
.ts-press__contact-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 20px;
padding: 0 8px;
background: var(--purple-tint);
color: var(--purple);
border-radius: 99px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.10em;
text-transform: uppercase;
line-height: 1;
}
/* -----------------------------------------------------------------------
Tablet (768–1023px)
----------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
.ts-press { padding: 56px 32px 72px; }
.ts-press__inner { max-width: 720px; }
.ts-press__block + .ts-press__block { margin-top: 56px; }
.ts-press__intro-headline { font-size: 44px; }
.ts-press__intro-subhead { font-size: 17px; }
.ts-press__block-heading { font-size: 20px; }
.ts-press__facts { padding: 24px; }
.ts-press__facts-row { grid-template-columns: 180px 1fr; column-gap: 24px; }
.ts-press__release-link {
grid-template-columns: 100px 1fr auto;
column-gap: 24px;
padding: 20px 12px;
}
.ts-press__leaders {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.ts-press__leader:nth-child(3) {
grid-column: 1 / -1;
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
.ts-press__assets { grid-template-columns: 1fr 1fr; }
.ts-press__news { grid-template-columns: 1fr 1fr; }
.ts-press__usage {
grid-template-columns: 1fr;
row-gap: 20px;
}
.ts-press__contact { padding: 40px 32px; }
}
/* -----------------------------------------------------------------------
Mobile (≤767px)
----------------------------------------------------------------------- */
@media (max-width: 767px) {
.ts-press { padding: 40px 16px 56px; }
.ts-press__block + .ts-press__block { margin-top: 48px; }
.ts-press__intro-headline { font-size: 34px; }
.ts-press__intro-headline span { display: inline; }
.ts-press__intro-subhead { font-size: 15px; margin-top: 16px; }
.ts-press__block-heading { font-size: 18px; margin-bottom: 20px; }
.ts-press__block-lede { font-size: 14px; margin-bottom: 20px; }
/* Quick facts — stack label above value */
.ts-press__facts { padding: 20px; }
.ts-press__facts-row {
grid-template-columns: 1fr;
row-gap: 6px;
padding: 14px 0;
}
.ts-press__facts-value { font-size: 16px; }
/* Press releases — date above headline */
.ts-press__release-link {
grid-template-columns: 1fr auto;
grid-template-areas:
"date chevron"
"body body";
column-gap: 16px;
row-gap: 6px;
padding: 18px 12px;
}
.ts-press__release-date { grid-area: date; padding-top: 0; }
.ts-press__release-body { grid-area: body; }
.ts-press__release-cta {
grid-area: chevron;
padding-top: 0;
font-size: 13px;
}
.ts-press__release-cta span { display: none; } /* only chevron on mobile */
.ts-press__release-headline { font-size: 17px; }
.ts-press__release-summary { font-size: 14px; margin-top: 6px; }
/* Leadership — single column */
.ts-press__leaders {
grid-template-columns: 1fr;
gap: 40px;
}
.ts-press__leader-name { font-size: 20px; }
.ts-press__leader-bio { font-size: 14px; max-width: none; }
/* Brand assets — single column */
.ts-press__assets {
grid-template-columns: 1fr;
gap: 12px;
}
.ts-press__asset { padding: 20px; min-height: 0; }
.ts-press__usage {
grid-template-columns: 1fr;
padding: 20px;
}
/* In the news — 2 columns even on mobile (short wordmarks read better) */
.ts-press__news {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ts-press__news-item { padding: 20px 8px; min-height: 60px; }
.ts-press__news-mark { font-size: 14px; letter-spacing: 0.08em; }
/* Media contact */
.ts-press__contact { padding: 32px 20px; }
.ts-press__contact-lede { font-size: 15px; margin-bottom: 20px; }
.ts-press__contact-phones {
align-self: center;
gap: 12px;
}
.ts-press__contact-phone { font-size: 15px; }
}
/* -----------------------------------------------------------------------
Reduced motion
----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.ts-press__release-link,
.ts-press__release-cta svg,
.ts-press__asset,
.ts-press__asset-download svg,
.ts-press__contact-email {
transition: none !important;
}
.ts-press__release-link:hover .ts-press__release-cta svg,
.ts-press__asset-download:hover svg {
transform: none !important;
}
}
/* ================= blog-styles.css ================= */
/* =========================================================================
blog-styles.css — /blog (field-notes index) page
BEM prefix: .ts-blog*
Inherits all design tokens and base styles from style.css.
DO NOT introduce new color tokens here — reuse existing ones.
Safe to merge into style.css later; kept separate to avoid collisions
with parallel agent work on landing sections.
========================================================================= */
/* -----------------------------------------------------------------------
Screen-reader-only heading helper (used to preserve semantic structure
without rendering the heading visually). Local variant — scoped to
.ts-blog* so it doesn't collide with any future sr helpers.
----------------------------------------------------------------------- */
.ts-blog-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;
}
/* -----------------------------------------------------------------------
Page shell
----------------------------------------------------------------------- */
.ts-blog {
background: var(--cream);
color: var(--ink-strong);
}
/* -----------------------------------------------------------------------
Intro band
----------------------------------------------------------------------- */
.ts-blog-intro {
padding: 96px 24px 56px;
}
.ts-blog-intro__inner {
max-width: 960px;
margin: 0 auto;
}
.ts-blog-intro__eyebrow {
margin: 0 0 20px;
}
.ts-blog-intro__headline {
font-family: var(--font-serif);
font-weight: 500;
font-size: 56px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
margin: 0;
max-width: 820px;
}
.ts-blog-intro__lead {
font-family: var(--font-sans);
font-weight: 400;
font-size: 18px;
line-height: 1.6;
color: var(--slate-alt);
margin: 24px 0 0;
max-width: 640px;
}
/* -----------------------------------------------------------------------
Featured post
----------------------------------------------------------------------- */
.ts-blog-featured {
padding: 32px 24px 96px;
}
.ts-blog-featured__card {
max-width: 1200px;
margin: 0 auto;
}
.ts-blog-featured__link {
display: grid;
grid-template-columns: 56fr 44fr;
gap: 48px;
align-items: center;
color: inherit;
text-decoration: none;
}
.ts-blog-featured__link:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 6px;
border-radius: 20px;
}
.ts-blog-featured__cover {
position: relative;
overflow: hidden;
border-radius: 16px;
aspect-ratio: 4 / 3;
box-shadow: 0 1px 2px 0 var(--card-shadow);
}
.ts-blog-featured__cover picture,
.ts-blog-featured__cover img {
display: block;
width: 100%;
height: 100%;
}
.ts-blog-featured__cover img {
object-fit: cover;
transition: transform 200ms var(--ease-out-fast);
}
.ts-blog-featured__link:hover .ts-blog-featured__cover img {
transform: scale(1.02);
}
.ts-blog-featured__body {
display: block;
}
.ts-blog-featured__category {
margin: 0 0 20px;
}
.ts-blog-featured__title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 36px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink-strong);
margin: 0;
transition: color 140ms var(--ease-out-fast);
}
.ts-blog-featured__link:hover .ts-blog-featured__title {
color: var(--purple);
}
.ts-blog-featured__excerpt {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.55;
color: var(--slate-alt);
margin: 20px 0 0;
max-width: 560px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ts-blog-featured__body .ts-blog-meta {
margin-top: 24px;
}
.ts-blog-featured__body .ts-blog-readlink {
margin-top: 20px;
}
/* -----------------------------------------------------------------------
Post grid
----------------------------------------------------------------------- */
.ts-blog-grid-wrap {
padding: 0 24px 0;
}
.ts-blog-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 56px 32px;
}
/* -----------------------------------------------------------------------
Blog card (single post in grid)
----------------------------------------------------------------------- */
.ts-blog-card {
display: flex;
flex-direction: column;
}
.ts-blog-card__link {
display: flex;
flex-direction: column;
gap: 20px;
color: inherit;
text-decoration: none;
border-radius: 12px;
}
.ts-blog-card__link:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 4px;
}
.ts-blog-card__cover {
position: relative;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 4 / 3;
box-shadow: 0 1px 2px 0 var(--card-shadow);
}
.ts-blog-card__cover picture,
.ts-blog-card__cover img {
display: block;
width: 100%;
height: 100%;
}
.ts-blog-card__cover img {
object-fit: cover;
transition: transform 200ms var(--ease-out-fast);
}
.ts-blog-card__link:hover .ts-blog-card__cover img {
transform: scale(1.02);
}
.ts-blog-card__body {
display: flex;
flex-direction: column;
}
.ts-blog-card__category {
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--purple);
margin: 0 0 10px;
}
.ts-blog-card__title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink-strong);
margin: 0;
transition: color 140ms var(--ease-out-fast);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ts-blog-card__link:hover .ts-blog-card__title {
color: var(--purple);
}
.ts-blog-card__excerpt {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--slate-alt);
margin: 10px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ts-blog-card__body .ts-blog-meta {
margin-top: 16px;
}
.ts-blog-card__body .ts-blog-readlink--card {
margin-top: 12px;
}
/* -----------------------------------------------------------------------
Meta row (author · date · read-time)
----------------------------------------------------------------------- */
.ts-blog-meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--slate-dim);
}
.ts-blog-meta__author { color: var(--slate-dim); }
.ts-blog-meta__sep { color: var(--slate-dim); padding: 0 2px; user-select: none; }
.ts-blog-meta__date { color: var(--slate-dim); }
.ts-blog-meta__read { color: var(--slate-dim); }
/* Featured card meta slightly larger */
.ts-blog-featured__body .ts-blog-meta {
font-size: 13px;
}
/* -----------------------------------------------------------------------
Read article link (the visible "Read article →" inside each card)
----------------------------------------------------------------------- */
.ts-blog-readlink {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
color: var(--purple);
transition: color 140ms var(--ease-out-fast), gap 180ms var(--ease-out-fast);
}
.ts-blog-readlink svg {
width: 14px;
height: 14px;
transition: transform 180ms var(--ease-out-fast);
}
.ts-blog-card__link:hover .ts-blog-readlink,
.ts-blog-featured__link:hover .ts-blog-readlink {
color: var(--purple-hover);
gap: 10px;
}
.ts-blog-card__link:hover .ts-blog-readlink svg,
.ts-blog-featured__link:hover .ts-blog-readlink svg {
transform: translateX(2px);
}
.ts-blog-readlink--card {
font-size: 14px;
}
/* -----------------------------------------------------------------------
Category pills (topics row)
----------------------------------------------------------------------- */
.ts-blog-topics {
padding: 96px 24px 0;
}
.ts-blog-topics__list {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
padding: 0;
list-style: none;
}
.ts-blog-pill {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--ink-strong);
background: transparent;
border: 1px solid var(--hairline-strong);
border-radius: 9999px;
padding: 10px 18px;
transition: border-color 140ms var(--ease-out-fast),
color 140ms var(--ease-out-fast),
background 140ms var(--ease-out-fast);
}
.ts-blog-pill:hover {
border-color: var(--purple);
color: var(--purple);
background: var(--purple-tint);
}
.ts-blog-pill[aria-current="page"] {
border-color: var(--purple);
color: var(--purple);
background: var(--purple-tint);
}
/* -----------------------------------------------------------------------
Newsletter card
----------------------------------------------------------------------- */
.ts-blog-newsletter {
padding: 96px 24px 128px;
}
.ts-blog-newsletter__card {
max-width: 960px;
margin: 0 auto;
background: var(--cream-deep);
border-radius: 20px;
padding: 56px 48px;
position: relative;
box-shadow: inset 0 1px 0 0 var(--shadow-hairline);
}
.ts-blog-newsletter__eyebrow {
margin: 0 0 20px;
}
.ts-blog-newsletter__headline {
font-family: var(--font-serif);
font-weight: 500;
font-size: 28px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink-strong);
margin: 0;
max-width: 640px;
}
.ts-blog-newsletter__sub {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--slate-alt);
margin: 16px 0 0;
max-width: 520px;
}
.ts-blog-newsletter__form {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 32px 0 0;
max-width: 520px;
}
.ts-blog-newsletter__input {
flex: 1 1 240px;
min-width: 0;
height: 48px;
padding: 0 16px;
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
color: var(--ink-strong);
background: var(--white);
border: 1px solid var(--hairline-strong);
border-radius: 10px;
transition: border-color 140ms var(--ease-out-fast);
}
.ts-blog-newsletter__input::placeholder {
color: var(--slate-dim);
}
.ts-blog-newsletter__input:focus {
outline: none;
border-color: var(--purple);
box-shadow: 0 0 0 3px var(--purple-tint);
}
.ts-blog-newsletter__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 48px;
padding: 0 24px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
color: var(--white);
background: var(--purple);
border-radius: 10px;
transition: background 150ms var(--ease-out-fast),
transform 150ms var(--ease-out-fast),
box-shadow 150ms var(--ease-out-fast);
box-shadow: 0 4px 12px 0 var(--purple-shadow-df);
}
.ts-blog-newsletter__btn svg {
width: 14px;
height: 14px;
}
.ts-blog-newsletter__btn:hover {
background: var(--purple-hover);
transform: translateY(-1px);
box-shadow: 0 6px 16px 0 var(--purple-shadow-hv);
}
.ts-blog-newsletter__btn:active {
background: var(--purple-active);
transform: translateY(0);
box-shadow: 0 3px 8px 0 var(--purple-shadow-ac);
transition-duration: 80ms;
}
.ts-blog-newsletter__fine {
font-family: var(--font-sans);
font-weight: 400;
font-size: 12px;
line-height: 1.5;
color: var(--slate-dim);
margin: 16px 0 0;
}
/* =========================================================================
Tablet
========================================================================= */
@media (max-width: 1023px) {
.ts-blog-intro { padding: 72px 24px 48px; }
.ts-blog-intro__headline { font-size: 44px; }
.ts-blog-featured { padding: 24px 24px 80px; }
.ts-blog-featured__link {
grid-template-columns: 1fr;
gap: 32px;
}
.ts-blog-featured__cover { aspect-ratio: 16 / 9; }
.ts-blog-featured__title { font-size: 30px; }
.ts-blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 48px 28px;
}
.ts-blog-topics { padding: 80px 24px 0; }
.ts-blog-newsletter { padding: 80px 24px 96px; }
.ts-blog-newsletter__card { padding: 48px 40px; }
.ts-blog-newsletter__headline { font-size: 26px; }
}
/* =========================================================================
Mobile
========================================================================= */
@media (max-width: 767px) {
.ts-blog-intro { padding: 48px 16px 32px; }
.ts-blog-intro__headline {
font-size: 34px;
line-height: 1.12;
}
.ts-blog-intro__lead {
font-size: 16px;
margin-top: 20px;
}
.ts-blog-featured { padding: 16px 16px 64px; }
.ts-blog-featured__link { gap: 24px; }
.ts-blog-featured__cover {
aspect-ratio: 16 / 9;
border-radius: 12px;
}
.ts-blog-featured__title {
font-size: 26px;
line-height: 1.2;
}
.ts-blog-featured__excerpt {
font-size: 16px;
margin-top: 16px;
}
.ts-blog-grid-wrap { padding: 0 16px; }
.ts-blog-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.ts-blog-card__title { font-size: 20px; }
.ts-blog-topics { padding: 64px 16px 0; }
.ts-blog-topics__list { gap: 8px; }
.ts-blog-pill {
font-size: 12px;
padding: 8px 14px;
}
.ts-blog-newsletter { padding: 64px 16px 80px; }
.ts-blog-newsletter__card { padding: 40px 24px; border-radius: 16px; }
.ts-blog-newsletter__headline {
font-size: 22px;
line-height: 1.25;
}
.ts-blog-newsletter__sub { font-size: 14px; }
.ts-blog-newsletter__form {
flex-direction: column;
gap: 10px;
}
.ts-blog-newsletter__input,
.ts-blog-newsletter__btn { width: 100%; }
}
/* =========================================================================
Reduced motion — disable all transitions + hover transforms
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.ts-blog-featured__cover img,
.ts-blog-card__cover img,
.ts-blog-featured__title,
.ts-blog-card__title,
.ts-blog-readlink,
.ts-blog-readlink svg,
.ts-blog-pill,
.ts-blog-newsletter__input,
.ts-blog-newsletter__btn {
transition: none !important;
}
.ts-blog-featured__link:hover .ts-blog-featured__cover img,
.ts-blog-card__link:hover .ts-blog-card__cover img,
.ts-blog-card__link:hover .ts-blog-readlink svg,
.ts-blog-featured__link:hover .ts-blog-readlink svg {
transform: none !important;
}
}
transform: none !important;
}
}
/* ============================================================================
PREMIUM POLISH (palette-12) — CRO-safe micro-details
Added 2026-04-29: ::selection, sticky glass nav, scroll reveals,
hairline dividers, focus rings, smooth-scroll, image fade, CTA nudges.
Hero is exempt from ALL reveals — instant CTA visibility is non-negotiable.
============================================================================ */
/* 1. Selection — purple background when copying */
::selection { background: var(--purple); color: var(--white); }
::-moz-selection { background: var(--purple); color: var(--white); }
/* 2. Smooth-scroll for in-page anchors */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* 3. Sticky glass header — Apple/Stripe-style backdrop blur */
.ts-header {
position: sticky;
top: 0;
background: var(--bg-glass);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ts-header.is-scrolled {
background: var(--bg-glass-scroll);
border-bottom-color: var(--hairline-strong);
box-shadow: 0 1px 16px rgba(10, 7, 18, 0.05);
}
@media (max-width: 720px) {
.ts-header {
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
}
}
/* 4. Universal focus rings — keyboard a11y, deep purple glow */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 2px solid var(--purple);
outline-offset: 2px;
border-radius: 4px;
}
/* 5. Section reveals — enter viewport, fade-in 12px from below.
JS adds .ts-reveal--in when section is in viewport.
ANY element inside §1 hero is exempt by design (no .ts-reveal there). */
.ts-reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.ts-reveal--in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.ts-reveal { opacity: 1; transform: none; transition: none; }
}
/* 6. Stat ticker — count-up animation on viewport-enter.
JS sets data-target on .ts-tick elements; current value is shown.
Layout never reflows because we keep tabular-nums. */
.ts-tick {
font-feature-settings: 'tnum' 1, 'lnum' 1;
font-variant-numeric: tabular-nums;
}
/* 7. Hairline dividers — utility class for between-section separators */
.ts-hairline {
height: 1px;
background: linear-gradient(90deg, transparent, var(--hairline), transparent);
margin: 0;
border: 0;
}
/* 8. CTA hover refinements — magnetic lift + arrow nudge.
Applies to existing primary buttons across the LP. */
.v2-btn--primary,
.ts-cta--primary,
.ts-offer__cta-btn {
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.22s ease,
background 0.18s ease;
}
.v2-btn--primary:hover,
.ts-cta--primary:hover,
.ts-offer__cta-btn:hover {
transform: translateY(-1.5px);
box-shadow: 0 14px 36px var(--purple-shadow-hv),
0 2px 4px rgba(10, 7, 18, 0.08);
}
.v2-btn--primary:active,
.ts-cta--primary:active,
.ts-offer__cta-btn:active {
transform: translateY(0);
transition-duration: 0.08s;
}
.v2-btn--primary svg,
.ts-cta--primary svg,
.ts-offer__cta-btn svg {
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.v2-btn--primary:hover svg,
.ts-cta--primary:hover svg,
.ts-offer__cta-btn:hover svg {
transform: translateX(3px);
}
/* 9. Image fade-in — opt-in only via .ts-fade-img class, never global.
Lazy-loaded images sometimes miss the load event in the listener,
and a global opacity:0 can swallow whole sections. Default = visible. */
.ts-fade-img { opacity: 0; transition: opacity 0.32s ease; }
.ts-fade-img.is-loaded { opacity: 1; }
/* 10. Footer — slight palette refresh to match palette-12 ink-deep */
.ts-foot { background: var(--ink-strong); }
/* ============================================================================
PREMIUM POLISH ROUND 2 — extra highlights / glows / accent micro-flourishes
Subtle, non-distracting. Lifts perceived premium feel.
============================================================================ */
/* H1: subtle peach/lavender highlight ring around the hero portrait.
Layered: a faint lavender wash + a soft purple inner-glow on the frame. */
.v2-hero__visual {
position: relative;
}
.v2-hero__visual::before {
content: '';
position: absolute;
inset: -22px;
background:
radial-gradient(ellipse 70% 65% at 50% 60%, var(--purple-glow), transparent 70%);
filter: blur(20px);
z-index: 0;
pointer-events: none;
}
.v2-hero__visual picture,
.v2-hero__visual img {
position: relative;
z-index: 1;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 26px 80px rgba(91, 33, 182, 0.18),
0 6px 20px rgba(10, 7, 18, 0.10);
}
/* H2: hero stat numbers — soft lavender underline highlight (drawn below) */
.v2-hero__stat-val {
position: relative;
display: inline-block;
}
.v2-hero__stat-val::after {
content: '';
position: absolute;
left: -2px; right: -2px;
bottom: 1px;
height: 8px;
background: linear-gradient(90deg, transparent, var(--purple-tint) 30%, var(--purple-tint) 70%, transparent);
border-radius: 4px;
z-index: -1;
opacity: 0.85;
}
/* H3: section eyebrow pills — soft radial backlight behind */
.ts-eyebrow,
.v2-pill {
position: relative;
}
.ts-eyebrow::before,
.v2-pill::before {
content: '';
position: absolute;
inset: -8px -16px;
background: radial-gradient(ellipse, var(--purple-tint), transparent 70%);
filter: blur(8px);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.ts-eyebrow:hover::before,
.v2-pill:hover::before { opacity: 1; }
/* H4: dark-section KPI numbers (§6 team) — text glow for the bright purple stats */
.ts-team__stat-val,
.ts-team .v2-results__stat-val,
.ts-results__metric,
[class*="__big-num"] {
text-shadow:
0 0 32px rgba(124, 58, 237, 0.28),
0 0 12px rgba(124, 58, 237, 0.18);
}
/* H5: active feature strip in §5 — left-side glowing accent rail */
.ts-offer__strip[aria-selected="true"] {
position: relative;
}
.ts-offer__strip[aria-selected="true"]::before {
content: '';
position: absolute;
left: 0; top: 14%; bottom: 14%;
width: 3px;
background: linear-gradient(180deg, var(--purple-bright), var(--purple));
border-radius: 2px;
box-shadow: 0 0 12px var(--purple-glow);
}
/* H6: §4 comparison TENSCALE column — soft outer ring glow */
.v2-pricing__col--tenscale,
.ts-prc__col--tenscale,
[class*="__col--tenscale"],
[class*="__column--tenscale"] {
position: relative;
}
[class*="__col--tenscale"]::before,
[class*="__column--tenscale"]::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(180deg, var(--purple-glow), transparent 70%);
z-index: -1;
opacity: 0.6;
filter: blur(2px);
pointer-events: none;
}
/* H7: CTA buttons — subtle inner-light + ambient glow on rest */
.v2-btn--primary,
.ts-cta--primary,
.ts-offer__cta-btn {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 6px 18px var(--purple-shadow-df),
0 1px 3px rgba(10, 7, 18, 0.06);
}
/* H8: §9 See It First marquee ad cards — hover lifts with purple aura */
.ts-sif__card,
.v2-sif__card,
[class*="sif__card"] {
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.28s ease;
}
[class*="sif__card"]:hover {
transform: translateY(-4px) scale(1.015);
box-shadow:
0 24px 48px rgba(91, 33, 182, 0.18),
0 4px 12px rgba(10, 7, 18, 0.08);
}
/* H9: numbers with strong purple emphasis (e.g., "93% of clients", €197 mentions)
— hairline lavender highlight bar under inline-styled accents */
em.ts-accent,
.ts-accent,
.v2-accent {
position: relative;
display: inline-block;
}
em.ts-accent::after,
.ts-accent::after,
.v2-accent::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -1px;
height: 6px;
background: var(--purple-tint);
border-radius: 3px;
z-index: -1;
}
/* H10: ts-hero__price — give the €197 a subtle peach/lavender wash backdrop */
.v2-hero__price {
position: relative;
display: inline-block;
}
.v2-hero__price::after {
content: '';
position: absolute;
left: -4px; right: -4px;
bottom: 4px;
height: 14px;
background: linear-gradient(180deg, transparent, var(--purple-tint) 60%);
border-radius: 4px;
z-index: -1;
opacity: 0.9;
}
/* ============================================================================
LANDING-PAGE CLEANUP OVERRIDES (2026-05-20)
Less generic-AI look, more editorial discipline.
Covers: §5 explorer + €197, §3 background + columns, §1.5 background,
global eyebrow-pill removal, mobile phone hide.
To revert: delete this block (everything below this comment).
============================================================================ */
/* ---- GLOBAL: remove eyebrow pills on every section ----------------------
Pills above each headline were generating SaaS-template noise.
Sections now rely on the H2 + spacing for separation. */
.ts-eyebrow {
display: none !important;
}
/* ---- §1.5 Available-in — warm purple-tinted off-white background ------- */
.v2-avail {
background: #F2ECF4;
border-top-color: rgba(74, 45, 92, 0.10);
border-bottom-color: rgba(74, 45, 92, 0.10);
}
/* ---- §3 How It Works — white background + columns offset outward ------- */
.ts-hiw {
background: #FFFFFF;
}
.ts-hiw__pillars {
max-width: 1200px;
justify-content: space-between;
gap: 80px;
}
.ts-hiw__pillar {
flex: 0 1 440px;
}
.ts-hiw__pillar-plus {
align-self: center;
flex-shrink: 0;
}
/* ---- §5 OFFER — explorer cleanup --------------------------------------- */
/* Two-column grid: phone gets more weight, tabs read tighter, more breath */
.ts-offer__explorer {
grid-template-columns: 6fr 4fr;
column-gap: 64px;
align-items: start;
}
/* Hero panel: no gradient, no rounded card, no 820px min-height floor */
.ts-offer__hero-panel {
background: none;
border-radius: 0;
padding: 0;
min-height: 0;
overflow: visible;
}
/* Hero text: a touch quieter so the phone reads as the visual anchor */
.ts-offer__hero-title {
font-size: 26px;
margin-bottom: 12px;
}
.ts-offer__hero-promise {
font-size: 15px;
color: var(--slate-alt);
}
/* Phone: drop the heavy iPhone chrome, keep the screenshot with one soft shadow */
.ts-offer__hero-img-wrap {
margin-top: 24px;
}
.ts-offer__hero-img-wrap .device-frame,
.ts-offer__hero-img-wrap .device-stripe,
.ts-offer__hero-img-wrap .device-header,
.ts-offer__hero-img-wrap .device-sensors,
.ts-offer__hero-img-wrap .device-btns,
.ts-offer__hero-img-wrap .device-power {
display: none;
}
.ts-offer__hero-img-wrap .device-iphone-14-pro {
transform: none;
margin: 0 auto;
filter: drop-shadow(0 24px 36px rgba(20, 16, 26, 0.14));
width: 100%;
max-width: 320px;
height: auto;
}
.ts-offer__hero-img-wrap .device-screen {
position: static;
width: 100%;
height: auto;
display: block;
border-radius: 14px;
object-fit: contain;
max-width: 320px;
}
/* Strips: lighter chips. Unselected = faint purple wash. Selected = lower-
opacity lavender. 01-06 numerals + chevrons + secondary subtext stay hidden. */
.ts-offer__strips {
gap: 6px;
}
.ts-offer__strip {
background: rgba(107, 63, 160, 0.05);
border-radius: 12px;
padding: 16px 20px;
min-height: 0;
border-left: none;
grid-template-columns: 1fr;
column-gap: 0;
transition: background-color 160ms ease;
}
.ts-offer__strip:hover {
background: rgba(107, 63, 160, 0.10);
}
.ts-offer__strip[aria-selected="true"] {
background: rgba(107, 63, 160, 0.16);
box-shadow: none;
}
/* Neutralize the H5 glow-rail decoration */
.ts-offer__strip[aria-selected="true"]::before {
content: none;
}
.ts-offer__strip-num,
.ts-offer__strip-chev,
.ts-offer__strip-promise {
display: none;
}
.ts-offer__strip-name {
font-size: 18px;
font-weight: 500;
color: var(--slate-alt);
transition: color 160ms ease, font-weight 160ms ease;
}
.ts-offer__strip[aria-selected="true"] .ts-offer__strip-name {
color: var(--ink-strong);
font-weight: 700;
}
/* Deep-dive panel: hide entirely. The hero phone already shows the feature;
the bullets + second phone + bordered testimonial were visual debt.
Markup stays in PHP so we can bring it back if needed. */
.ts-offer__deep-panel {
display: none;
}
/* Reduce subhead density — "Six jobs. One specialist. No middlemen." stays,
but lighter weight so it doesn't compete with the €197 above it */
.ts-offer__subhead {
font-weight: 500;
color: var(--slate-alt);
}
/* €197 + /month on one line — /month sits baseline-aligned next to €197 */
.ts-offer__price-hero {
font-size: 132px;
}
.ts-offer__price-sub {
display: inline-block;
margin: 0 0 0 12px;
vertical-align: baseline;
font-size: 22px;
color: var(--slate-alt);
}
/* ---- MOBILE: drop the phone screenshots in §5; collapse §3 to one col -- */
@media (max-width: 767px) {
.ts-offer__hero-img-wrap,
.ts-offer__hero-img-mobile {
display: none !important;
}
.ts-offer__hero-panel {
min-height: 0;
}
/* Mobile accordion moves deep tiles into each strip; kill phones there too */
.ts-offer__expand .device-iphone-14-pro,
.ts-offer__expand .ts-offer__hero-img-wrap,
.ts-offer__expand .ts-offer__deep-img-wrap {
display: none !important;
}
/* Inline price on mobile too */
.ts-offer__price-hero { font-size: 88px; }
.ts-offer__price-sub { font-size: 18px; margin-left: 8px; }
/* §3 stacks to one column on mobile (no outward offset when stacked) */
.ts-hiw__pillars {
flex-direction: column;
gap: 32px;
}
.ts-hiw__pillar {
flex: 1 1 auto;
}
}
/* ============================================================================
ROUND 2 — extended cleanup (2026-05-20)
============================================================================ */
/* GLOBAL: remove all thin
line dividers */
.ts-197__rule,
.ts-offer__rule,
.v2-biz__rule,
.ts-faq__hairline,
.ts-foot__divider,
.ts-hiw__connector { display: none !important; }
/* §3 column flip — phone LEFT, phases RIGHT */
.ts-hiw__split {
grid-template-columns: 45% 55% !important;
column-gap: 64px !important;
align-items: center !important;
}
.ts-hiw__phases { order: 2 !important; }
.ts-hiw__phone { order: 1 !important; }
/* §3 phone PNG — mask baked-in cream + purple glow on edges */
.ts-hiw__phone img {
-webkit-mask-image: radial-gradient(ellipse 65% 80% at center, #000 50%, transparent 78%) !important;
mask-image: radial-gradient(ellipse 65% 80% at center, #000 50%, transparent 78%) !important;
filter: none !important;
background: transparent !important;
}
/* §2 cards — drop border (Round 3 overrides shadow strength) */
.v2-biz__card {
border: none !important;
}
/* §4 comparison — column spacing only (Round 3 sets exact value) */
.ts-197__compare {
border-collapse: separate !important;
}
/* §4 merged italic quote — base setup (Round 3 sets size) */
.ts-197__quote--merged {
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ts-197__quote-proof {
display: block !important;
font-style: italic !important;
}
/* §5 price reveal */
.ts-offer__price-hero { font-size: 108px !important; }
.ts-offer__subline {
max-width: 720px !important;
white-space: nowrap !important;
font-size: 15px !important;
}
@media (max-width: 900px) {
.ts-offer__subline { white-space: normal !important; }
}
/* §9 spacing under "See ads for your business — free" CTA */
.v2-marq__cta { margin-bottom: 32px !important; }
.v2-marq__trust {
margin-top: 12px !important;
margin-bottom: 24px !important;
}
/* §3b CTA as primary button */
.ts-journey__cta-wrap .ts-hiw__cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--purple);
color: #fff !important;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
line-height: 1;
padding: 16px 28px;
border-radius: 8px;
text-decoration: none !important;
box-shadow: 0 8px 20px -6px rgba(91, 33, 182, 0.35);
}
.ts-journey__cta-wrap .ts-hiw__cta:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px -6px rgba(91, 33, 182, 0.45);
}
/* §10 video placeholder (replaces 3-phones image) */
.ts-hif__phones { margin: 0 auto !important; max-width: 880px !important; }
.ts-hif__video-placeholder {
position: relative;
aspect-ratio: 16 / 9;
background: linear-gradient(180deg, rgba(20, 16, 26, 0.92), rgba(40, 28, 60, 0.92));
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
gap: 16px;
overflow: hidden;
}
.ts-hif__video-play {
width: 76px; height: 76px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.96);
color: var(--purple, #6B3FA0);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.ts-hif__video-play svg { width: 30px; height: 30px; margin-left: 3px; }
.ts-hif__video-label {
font-family: var(--font-sans);
font-size: 14px;
color: rgba(255,255,255,0.85);
margin: 0;
letter-spacing: 0.02em;
}
/* §3b — YOUR FIRST 60 DAYS (new section, split out from §3) */
.ts-journey {
background: var(--cream);
padding: 80px 24px 80px;
}
.ts-journey__inner { max-width: 1200px; margin: 0 auto; }
.ts-journey__header { text-align: center; margin-bottom: 56px; }
.ts-journey__headline {
font-family: var(--font-serif);
font-weight: 600;
font-size: 44px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink-strong);
margin: 0;
}
.ts-journey__sub {
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.5;
color: var(--slate-alt);
margin: 12px 0 0;
}
.ts-journey__timeline { margin-top: 24px !important; margin-bottom: 48px !important; }
.ts-journey__cta-wrap { text-align: center; margin-top: 0; }
@media (max-width: 767px) {
.ts-journey { padding: 56px 20px 56px; }
.ts-journey__headline { font-size: 32px; }
.ts-journey__header { margin-bottom: 36px; }
}
/* SPACING: tightened section padding */
.ts-hiw,
.ts-journey,
.ts-197,
.ts-offer,
.ts-team,
.v2-proof,
.ts-faq,
.v2-marq,
.ts-hif {
padding-top: 64px !important;
padding-bottom: 64px !important;
}
@media (max-width: 767px) {
.ts-hiw,
.ts-journey,
.ts-197,
.ts-offer,
.ts-team,
.v2-proof,
.ts-faq,
.v2-marq,
.ts-hif {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
}
/* ============================================================================
ROUND 3 — targeted fixes (2026-05-20)
============================================================================ */
/* §4 table: column spacing ONLY (revert row spacing) */
.ts-197__compare { border-spacing: 28px 0 !important; }
.ts-197__compare thead th,
.ts-197__compare tbody td,
.ts-197__compare tbody th {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* §4 quote: smaller, italic, closing " naturally on row 2 */
.ts-197__quote--merged {
font-size: 19px !important;
line-height: 1.55 !important;
font-style: italic !important;
}
.ts-197__quote--merged .ts-197__quote-proof {
margin-top: 6px !important;
}
/* §3 pillars: kill top/bottom border (the divider line below subline) */
.ts-hiw__pillars {
border-top: none !important;
border-bottom: none !important;
}
/* §2 cards: stronger shadow */
.v2-biz__card {
box-shadow:
0 18px 36px -8px rgba(20, 16, 26, 0.22),
0 4px 10px rgba(20, 16, 26, 0.10) !important;
}
/* Hide the second pill class (Managed FB Ads / Available in / Who we work with) */
.v2-pill { display: none !important; }
/* §5 selected tab: light gray everywhere (desktop + mobile) */
.ts-offer__strip[aria-selected="true"] {
background: rgba(20, 16, 26, 0.055) !important;
box-shadow: none !important;
border-radius: 12px !important;
}
/* §5 mobile accordion: smooth, attached, no hard cut */
@media (max-width: 767px) {
.ts-offer__strips li:has(.ts-offer__strip[aria-selected="true"]) {
background: rgba(20, 16, 26, 0.055);
border-radius: 12px;
overflow: hidden;
}
.ts-offer__strips li:has(.ts-offer__strip[aria-selected="true"]) .ts-offer__strip[aria-selected="true"] {
background: transparent !important;
border-radius: 0 !important;
}
.ts-offer__expand {
background: transparent !important;
border-radius: 0 !important;
margin-top: 0 !important;
padding: 0 20px 20px !important;
}
.ts-offer__strip::before,
.ts-offer__strip::after,
.ts-offer__strip[aria-selected="true"]::before,
.ts-offer__strip[aria-selected="true"]::after { content: none !important; }
.ts-offer__expand .ts-offer__deep-tile {
padding-top: 0 !important;
margin-top: 0 !important;
}
.ts-offer__expand .ts-offer__deep-label {
margin-top: 0 !important;
}
}
/* §10 "See your first preview" → primary button + more breathing space */
.ts-hif__cta {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin-top: 40px !important;
background: var(--purple, #6B3FA0);
color: #fff !important;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
line-height: 1;
padding: 16px 28px;
border-radius: 10px;
text-decoration: none !important;
box-shadow: 0 8px 20px -6px rgba(91, 33, 182, 0.35);
}
.ts-hif__cta:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px -6px rgba(91, 33, 182, 0.45);
}
.ts-hif__cta svg { stroke: currentColor; }
/* ============================================================================
ROUND 4 — merged §3, accordion + deep-panel fix, table fix, dividers
============================================================================ */
/* §3 merged single section "Your first 60 days" */
.ts-hiw__divider {
border: none;
border-top: 1px solid rgba(20, 16, 26, 0.10);
margin: 48px auto;
max-width: 1000px;
width: 100%;
height: 0;
}
.ts-hiw__pillars { margin-bottom: 32px !important; }
.ts-hiw__split { margin-top: 32px !important; }
.ts-hiw__timeline {
margin-top: 64px !important;
margin-bottom: 48px !important;
}
.ts-hiw .ts-journey__cta-wrap { text-align: center; margin-top: 0; }
.ts-hiw .ts-journey__cta-wrap .ts-hiw__cta {
display: inline-flex !important;
align-items: center;
gap: 8px;
background: var(--purple, #6B3FA0);
color: #fff !important;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
line-height: 1;
padding: 16px 28px;
border-radius: 10px;
text-decoration: none !important;
box-shadow: 0 8px 20px -6px rgba(91, 33, 182, 0.35);
}
/* Thin divider between §4 and §5 — constrained width, centered */
.ts-offer {
border-top: none !important;
position: relative;
}
.ts-offer::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(560px, 70%);
height: 1px;
background: rgba(20, 16, 26, 0.10);
}
/* §4 quote: lighter weight */
.ts-197__quote--merged {
font-weight: 400 !important;
font-style: italic !important;
letter-spacing: 0 !important;
}
.ts-197__quote--merged .ts-197__quote-accent { font-weight: 600 !important; }
/* §4 table: transparent left border on TENSCALE column for visual gap */
.ts-197__compare {
border-spacing: 0 !important;
border-collapse: separate !important;
}
.ts-197__compare thead th,
.ts-197__compare tbody td,
.ts-197__compare tbody th { padding-left: 0 !important; padding-right: 0 !important; }
.ts-197__compare tbody th { padding: 22px 16px 22px 0 !important; }
.ts-197__compare tbody td:nth-child(2),
.ts-197__compare thead th:nth-child(2) { padding-left: 22px !important; padding-right: 22px !important; }
.ts-197__compare tbody td:last-child,
.ts-197__compare thead th:last-child { padding-left: 28px !important; padding-right: 28px !important; }
.ts-197__compare thead th:last-child,
.ts-197__compare tbody td:last-child {
border-left: 24px solid transparent !important;
background-clip: padding-box !important;
}
/* §5 deep panel: un-hide + style as gray surface */
.ts-offer__deep-panel {
display: block !important;
background: rgba(20, 16, 26, 0.05) !important;
border-radius: 16px !important;
padding: 32px 32px 28px !important;
box-shadow: none !important;
margin-top: 32px !important;
}
.ts-offer__deep-tile { background: transparent !important; }
/* §5 deep-tile content: horizontal placeholder below bullets */
.ts-offer__deep-grid {
grid-template-columns: 1fr !important;
column-gap: 0 !important;
row-gap: 24px !important;
}
.ts-offer__deep-img-wrap {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
background: linear-gradient(135deg, rgba(107, 63, 160, 0.10), rgba(212, 115, 74, 0.08)) !important;
position: relative !important;
border-radius: 12px !important;
padding: 0 !important;
overflow: hidden !important;
margin-top: 8px !important;
}
.ts-offer__deep-img-wrap picture,
.ts-offer__deep-img-wrap img { display: none !important; }
.ts-offer__deep-img-wrap::before {
content: 'Image placeholder';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: rgba(20, 16, 26, 0.45);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* §5 selected tab: PURPLE (revert Round 3 gray) */
.ts-offer__strip[aria-selected="true"] {
background: rgba(107, 63, 160, 0.16) !important;
box-shadow: none !important;
border-radius: 12px !important;
}
/* §5 mobile accordion: ONE outer rounded rectangle, darker top, lighter bottom
— matches the user's example screenshot exactly */
@media (max-width: 767px) {
.ts-offer__strips li:has(.ts-offer__strip[aria-selected="true"]) {
background: rgba(107, 63, 160, 0.08) !important;
border-radius: 16px !important;
overflow: hidden !important;
border: none !important;
}
.ts-offer__strip[aria-selected="true"] {
background: rgba(107, 63, 160, 0.16) !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 20px 24px !important;
}
.ts-offer__expand {
background: transparent !important;
border-radius: 0 !important;
margin-top: 0 !important;
padding: 16px 24px 24px !important;
border: none !important;
}
.ts-offer__expand .ts-offer__deep-tile {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
display: block !important;
}
.ts-offer__strip::before,
.ts-offer__strip::after,
.ts-offer__strip[aria-selected="true"]::before,
.ts-offer__strip[aria-selected="true"]::after { content: none !important; }
}
/* ============================================================================
ROUND 5 — final pass
============================================================================ */
/* Hide deep-dive label (not in the user's example image) */
.ts-offer__deep-label { display: none !important; }
/* Hide desktop deep panel entirely (the "weird gray rounded square").
On mobile the JS moves tiles into accordion expands — still works
because querySelector finds tiles even in display:none containers. */
.ts-offer__deep-panel { display: none !important; }
/* Single-column deep-grid so placeholder sits BELOW the bullets */
.ts-offer__deep-grid {
grid-template-columns: 1fr !important;
column-gap: 0 !important;
row-gap: 20px !important;
display: grid !important;
}
.ts-offer__deep-img-wrap {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
background: linear-gradient(135deg, rgba(107, 63, 160, 0.12), rgba(212, 115, 74, 0.08)) !important;
position: relative !important;
border-radius: 10px !important;
padding: 0 !important;
overflow: hidden !important;
margin-top: 6px !important;
}
.ts-offer__deep-img-wrap picture,
.ts-offer__deep-img-wrap img { display: none !important; }
.ts-offer__deep-img-wrap::before {
content: 'Image placeholder';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: rgba(20, 16, 26, 0.45);
letter-spacing: 0.10em;
text-transform: uppercase;
}
.ts-offer__expand .ts-offer__deep-quote {
margin-top: 20px !important;
padding-top: 16px !important;
border-top: 1px solid rgba(20, 16, 26, 0.12) !important;
}
/* §3b — pillars + timeline inside the new "Your first 60 days" section */
.ts-journey__pillars {
margin: 32px auto 0 !important;
border-top: none !important;
border-bottom: none !important;
padding: 0 !important;
align-items: stretch !important;
gap: 16px !important;
max-width: 1200px !important;
justify-content: space-between !important;
}
.ts-journey__pillars .ts-hiw__pillar {
background: #F6F2FF;
border: 1px solid #E8E3F2;
border-radius: 16px;
padding: 28px 30px;
flex: 1 1 0 !important;
max-width: none !important;
}
.ts-journey__pillars .ts-hiw__pillar-plus {
align-self: center;
background: none;
border: none;
padding: 0;
flex: 0 0 auto !important;
}
.ts-journey__pillars .ts-hiw__pillar-checks li {
font-weight: 400;
}
.ts-journey__connector {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 36px auto;
}
.ts-journey__connector-line {
display: block;
width: 1px;
height: 20px;
background: #E8E3F2;
}
.ts-journey__connector-text {
margin: 0;
font-family: var(--font-sans);
font-style: italic;
font-size: 14px;
color: #6B6877;
text-align: center;
}
.ts-journey .ts-timeline { margin-top: 0 !important; margin-bottom: 56px !important; }
.ts-journey__reassurance {
margin: 12px 0 0;
font-family: var(--font-sans);
font-size: 13px;
color: #6B6877;
text-align: center;
}
@media (max-width: 720px) {
.ts-journey__pillars {
gap: 16px !important;
}
.ts-journey__pillars .ts-hiw__pillar {
padding: 22px 22px;
}
}
/* §10/§1.6 — real