/* True Sentiments — site stylesheet Fonts are loaded in each page's . All rules scoped under .ts */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ .ts { /* ---- Brand green (primary) ---- */ --green-50: #f3f8e9; --green-100: #e6f1d3; --green-200: #cfe5ab; --green-300: #b4d77f; --green-400: #9ecd59; --green-500: #8cc63f; /* core brand green — from the logo */ --green-600: #74ac2c; --green-700: #5a8722; --green-800: #44661c; --green-900: #324b18; /* ---- Forest / deep botanical ---- */ --forest-700: #2f4a2a; --forest-800: #243a20; --forest-900: #1b2c18; /* ---- Warm neutrals ---- */ --cream-50: #fcfaf4; --cream-100: #faf6ec; --cream-200: #f3ecdc; --sand-300: #e8ddc8; --sand-400: #d8c9ad; --stone-500: #b3a892; --stone-600: #8a8170; /* ---- Warm ink (never pure black) ---- */ --ink-900: #2a2723; --ink-800: #3a362f; --ink-700: #524d44; /* ---- Clay / blush accent ---- */ --clay-300: #e7b9a3; --clay-400: #d8987c; --clay-500: #c4795c; --clay-600: #a55f44; --white: #ffffff; /* ---- Semantic surfaces ---- */ --surface-page: var(--cream-50); --surface-raised: var(--white); --surface-sunken: var(--cream-100); --surface-inverse: var(--forest-900); --surface-accent: var(--green-500); --surface-warm: var(--cream-200); /* ---- Semantic text ---- */ --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-700); /* was stone-600 — failed 4.5:1 on cream at small sizes */ --text-on-green: var(--white); --text-on-dark: var(--cream-100); --text-accent: var(--green-800); /* was green-700 — capped at 4.27:1 on cream */ --text-clay: var(--clay-600); /* ---- Borders / lines ---- */ --border-soft: var(--sand-300); --border-strong: var(--sand-400); --border-accent: var(--green-500); --hairline: rgba(42, 39, 35, 0.10); --rule-fade: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent); /* ---- Interactive ---- */ --action: var(--green-500); --action-hover: var(--green-600); --action-press: var(--green-700); --action-quiet: var(--green-50); --focus-ring: var(--green-600); /* ---- Type families ---- */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-eyebrow: 'Jost', Futura, sans-serif; --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif; /* ---- Type scale ---- */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem; --text-6xl: 5.25rem; /* ---- Weights ---- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Line heights ---- */ --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ---- Letter spacing ---- */ --tracking-tight: -0.01em; --tracking-wide: 0.08em; --tracking-wider: 0.18em; --tracking-logo: 0.32em; /* ---- Spacing (8px rhythm) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---- Radii ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; --radius-circle: 50%; /* ---- Containers ---- */ --container-sm: 640px; --container-md: 840px; --container-lg: 1100px; --container-xl: 1320px; /* ---- Elevation (warm-tinted, never black) ---- */ --shadow-xs: 0 1px 2px rgba(50, 44, 35, 0.06); --shadow-sm: 0 2px 8px rgba(50, 44, 35, 0.07); --shadow-md: 0 6px 20px rgba(50, 44, 35, 0.09); --shadow-lg: 0 16px 40px rgba(50, 44, 35, 0.12); --shadow-xl: 0 28px 64px rgba(50, 44, 35, 0.16); --shadow-green: 0 10px 30px rgba(140, 198, 63, 0.30); --ring-focus: 0 0 0 3px rgba(116, 172, 44, 0.35); --shadow-inset: inset 0 1px 2px rgba(50, 44, 35, 0.06); /* ---- Blur ---- */ --blur-sm: 6px; --blur-md: 14px; --blur-lg: 28px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-ambient: 800ms; } /* ============================================================ 2. BASE / RESET ============================================================ */ .ts, .ts *, .ts *::before, .ts *::after { box-sizing: border-box; } .ts { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .ts img, .ts svg, .ts video { max-width: 100%; display: block; } .ts p, .ts ul, .ts ol { margin: 0; } .ts ul, .ts ol { padding-left: 1.15em; } .ts li + li { margin-top: var(--space-2); } .ts strong { font-weight: var(--weight-semibold); color: var(--text-strong); } .ts em { font-style: italic; } .ts hr { border: none; height: 1px; background: var(--rule-fade); margin: var(--space-7) 0; } .ts a { color: var(--text-accent); text-decoration: none; transition: color var(--dur-base) var(--ease-out); } .ts a:hover { color: var(--forest-800); } .ts a:focus-visible, .ts button:focus-visible, .ts input:focus-visible, .ts select:focus-visible, .ts textarea:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); } /* ============================================================ 3. TYPOGRAPHY ============================================================ */ .ts h1, .ts h2, .ts h3, .ts h4, .ts h5, .ts h6 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--forest-900); text-wrap: balance; } .ts h1 { font-size: clamp(2.875rem, 6.6vw, var(--text-6xl)); line-height: 1.02; } .ts h2 { font-size: clamp(2.125rem, 4vw, 3.5rem); } .ts h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); } .ts h4 { font-size: var(--text-xl); line-height: var(--leading-snug); } .ts h5 { font-size: var(--text-lg); } .ts h6 { font-size: var(--text-md); } /* Reflective italic inside a headline — the brand's signature accent */ .ts h1 em, .ts h2 em, .ts h3 em { font-style: italic; color: var(--green-700); } /* Text utilities */ .ts-lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-body); } .ts-small { font-size: var(--text-sm); } .ts-muted { color: var(--text-muted); } .ts-strong { color: var(--text-strong); } .ts-accent { color: var(--text-accent); } .ts-clay { color: var(--text-clay); } .ts-serif { font-family: var(--font-display); } .ts-italic { font-family: var(--font-display); font-style: italic; } .ts-balance { text-wrap: balance; } .ts-pretty { text-wrap: pretty; } /* Signature triad — Live Well. Love Well. Be Well. */ .ts-triad { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--green-300); } /* Eyebrow — ALL CAPS tracked label */ .ts-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-eyebrow); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--green-800); } .ts-eyebrow::after { content: ""; width: 36px; height: 1px; background: var(--border-soft); } .ts-eyebrow.is-plain::after { display: none; } .ts-eyebrow.is-light { color: var(--green-300); } .ts-eyebrow.is-light::after { background: rgba(250, 246, 236, 0.28); } /* Pull-quote */ .ts-quote { margin: 0; padding-left: var(--space-5); border-left: 2px solid var(--green-500); font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); line-height: 1.45; color: var(--forest-800); } .ts-quote footer { margin-top: var(--space-3); font-family: var(--font-eyebrow); font-style: normal; font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--ink-700); } .ts-quote.is-panel { padding: var(--space-6); border-left: none; background: var(--cream-200); border-radius: var(--radius-lg); font-size: 1.625rem; } .ts-quote.is-bare { padding: 0; border-left: none; color: var(--text-muted); } /* ============================================================ 4. LAYOUT ============================================================ */ .ts-section { padding: var(--space-9) clamp(1.25rem, 5vw, 4.5rem); } .ts-section.is-tight { padding-top: var(--space-8); padding-bottom: var(--space-8); } .ts-section.is-flush-top { padding-top: 0; } .ts-inner { max-width: var(--container-xl); margin: 0 auto; } .ts-inner.is-lg { max-width: var(--container-lg); } .ts-inner.is-md { max-width: var(--container-md); } .ts-inner.is-sm { max-width: var(--container-sm); } .ts-stack { display: flex; flex-direction: column; gap: var(--space-5); } .ts-stack.is-tight { gap: var(--space-3); } .ts-stack.is-loose { gap: var(--space-7); } .ts-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } .ts-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .ts-grid { display: grid; gap: var(--space-5); } .ts-cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .ts-cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .ts-cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ts-grid.is-wide-gap { gap: clamp(2rem, 5vw, 5rem); } .ts-grid.is-centered { align-items: center; } .ts-center { text-align: center; align-items: center; } .ts-rule { height: 1px; background: var(--rule-fade); } .ts-spacer { height: var(--space-7); } /* Alternating section surfaces */ .ts-warm { background: var(--cream-100); } .ts-warmer { background: var(--cream-200); } .ts-raised { background: var(--surface-raised); } /* Inverse / footer surface */ .ts-dark { background: var(--surface-inverse); color: rgba(250, 246, 236, 0.72); } .ts-dark h1, .ts-dark h2, .ts-dark h3, .ts-dark h4 { color: var(--cream-100); } .ts-dark a { color: var(--cream-100); } .ts-dark a:hover { color: var(--green-300); } .ts-dark .ts-rule { background: rgba(250, 246, 236, 0.14); } /* ============================================================ 5. SECTION HEADER ============================================================ */ .ts-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: var(--container-sm); margin: 0 auto; text-align: center; } .ts-head h2 { font-size: clamp(2.125rem, 4vw, 3.5rem); } .ts-head p { font-size: var(--text-lg); color: var(--text-muted); text-wrap: pretty; } .ts-head.is-left { align-items: flex-start; text-align: left; margin: 0; max-width: var(--container-md); } /* ============================================================ 6. BUTTONS ============================================================ */ .ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-eyebrow); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; padding: var(--space-4) var(--space-6); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--action); color: var(--forest-900); box-shadow: var(--shadow-green); cursor: pointer; text-align: center; white-space: nowrap; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ts-btn:hover { background: var(--action-hover); color: var(--forest-900); transform: translateY(-1px); } /* Beats `.ts a` (0,1,1) so primary CTAs keep forest ink on green anywhere */ .ts a.ts-btn, .ts a.ts-btn:hover { color: var(--forest-900); } .ts-btn:active { background: var(--action-press); transform: scale(0.98); } .ts-btn:disabled, .ts-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* Variants */ .ts-btn.is-secondary { background: var(--forest-900); color: var(--cream-100); box-shadow: var(--shadow-sm); } .ts-btn.is-secondary:hover { background: var(--forest-800); color: var(--cream-100); } .ts-btn.is-outline { background: transparent; border-color: var(--forest-900); color: var(--forest-900); box-shadow: none; } .ts a.ts-btn.is-secondary, .ts a.ts-btn.is-secondary:hover { color: var(--cream-100); } .ts a.ts-btn.is-clay, .ts a.ts-btn.is-clay:hover { color: var(--white); } .ts-dark a.ts-btn.is-outline, .ts-dark a.ts-btn.is-outline:hover, .ts-dark a.ts-btn.is-ghost, .ts-dark a.ts-btn.is-ghost:hover { color: var(--cream-100); } .ts-btn.is-outline:hover { background: var(--action-quiet); border-color: var(--green-600); } .ts-btn.is-ghost { background: transparent; color: var(--forest-900); box-shadow: none; } .ts-btn.is-ghost:hover { background: var(--action-quiet); } .ts-btn.is-clay { background: var(--clay-500); color: var(--white); box-shadow: var(--shadow-sm); } .ts-btn.is-clay:hover { background: var(--clay-600); color: var(--white); } /* On dark surfaces */ .ts-dark .ts-btn.is-outline { border-color: rgba(250, 246, 236, 0.5); color: var(--cream-100); } .ts-dark .ts-btn.is-outline:hover { background: rgba(250, 246, 236, 0.08); color: var(--cream-100); } .ts-dark .ts-btn.is-ghost { color: var(--cream-100); } /* Sizes */ .ts-btn.is-sm { padding: var(--space-3) var(--space-5); font-size: var(--text-2xs); } .ts-btn.is-lg { padding: 1.1875rem var(--space-7); font-size: 0.78125rem; } /* Text link with arrow */ .ts-link { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-eyebrow); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-accent); } .ts-link svg { transition: transform var(--dur-base) var(--ease-out); } .ts-link:hover svg { transform: translateX(3px); } /* ============================================================ 7. CARDS ============================================================ */ .ts-card { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ts-card.is-interactive { cursor: pointer; } .ts-card.is-interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .ts-card.is-flat { box-shadow: none; } .ts-card.is-warm { background: var(--cream-100); } .ts-card.is-quiet { background: var(--cream-200); border-color: transparent; box-shadow: none; } .ts-card.is-dark { background: var(--surface-inverse); border-color: transparent; color: rgba(250, 246, 236, 0.72); } .ts-card.is-dark h3 { color: var(--cream-100); } .ts-card.is-lg { padding: var(--space-7); } .ts-card h3 { font-size: var(--text-2xl); } .ts-card p { font-size: var(--text-sm); line-height: var(--leading-relaxed); } .ts-card .ts-push { margin-top: auto; padding-top: var(--space-2); } /* Icon tile */ .ts-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--green-50); color: var(--green-700); } .ts-icon.is-round { border-radius: var(--radius-circle); } .ts-icon.is-lg { width: 68px; height: 68px; } .ts-dark .ts-icon { background: rgba(140, 198, 63, 0.14); color: var(--green-300); } /* Numbered step */ .ts-step { display: flex; flex-direction: column; gap: var(--space-3); } .ts-step b { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-4xl); line-height: 1; color: var(--green-400); } .ts-step p { font-size: var(--text-sm); } /* Numbered list row (accordion-style index) */ .ts-listrow { display: grid; grid-template-columns: 64px minmax(180px, 1fr) minmax(220px, 1.4fr) 40px; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-2); border-bottom: 1px solid var(--border-soft); transition: background var(--dur-base) var(--ease-out); } .ts-listrow:first-child { border-top: 1px solid var(--border-soft); } .ts-listrow:hover { background: var(--green-50); } .ts-listrow span.ts-num { font-family: var(--font-eyebrow); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); color: var(--green-600); } .ts-listrow h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 2.125rem; } .ts-listrow p { font-size: var(--text-sm); color: var(--text-muted); } @media (max-width: 860px) { .ts-listrow { grid-template-columns: 44px 1fr; } .ts-listrow p, .ts-listrow svg { grid-column: 2; } } /* ============================================================ 8. BADGES & PILLS ============================================================ */ .ts-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.3125rem var(--space-3); border-radius: var(--radius-pill); background: var(--green-50); border: 1px solid var(--green-200); color: var(--green-700); font-family: var(--font-eyebrow); font-size: 0.65625rem; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .ts-badge.is-clay { background: #fbf1ec; border-color: var(--clay-300); color: var(--clay-600); } .ts-badge.is-forest { background: var(--forest-900); border-color: transparent; color: var(--cream-100); } .ts-badge.is-sand { background: var(--cream-200); border-color: var(--border-soft); color: var(--text-muted); } /* ============================================================ 9. HEADER / NAV ============================================================ */ .ts-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding: 1.125rem clamp(1.25rem, 4vw, 3.5rem); background: rgba(252, 250, 244, 0.88); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border-bottom: 1px solid var(--hairline); } .ts-logo { display: flex; flex-direction: column; gap: 3px; } .ts-logo b { font-family: var(--font-eyebrow); font-size: 0.9375rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-logo); text-transform: uppercase; color: var(--forest-900); } .ts-logo span { font-family: var(--font-display); font-style: italic; font-size: 0.78125rem; letter-spacing: 0.04em; color: var(--text-muted); } .ts-nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1.125rem, 2.4vw, 2.125rem); } .ts-nav a { font-family: var(--font-eyebrow); font-size: 0.71875rem; font-weight: var(--weight-medium); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-body); } .ts-nav a:hover { color: var(--text-accent); } .ts-nav a.is-active { color: var(--text-accent); } .ts-nav a.ts-btn { color: var(--forest-900); } /* ============================================================ 10. HERO ============================================================ */ .ts-hero { position: relative; display: flex; align-items: center; min-height: 82vh; padding: clamp(3rem, 8vh, 6.875rem) clamp(1.25rem, 5vw, 4.5rem); overflow: hidden; } .ts-hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: var(--cream-200); } .ts-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(252, 250, 244, 0.93) 0%, rgba(252, 250, 244, 0.86) 30%, rgba(252, 250, 244, 0.62) 53%, rgba(252, 250, 244, 0.18) 76%, rgba(27, 44, 24, 0.10) 100%); } .ts-hero-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; animation: ts-rise var(--dur-ambient) var(--ease-out) both; } .ts-hero p { max-width: 440px; font-size: var(--text-lg); text-wrap: pretty; } /* Split hero variant */ .ts-hero-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); align-items: stretch; background: var(--cream-100); } .ts-hero-split > .ts-hero-body { justify-content: center; padding: clamp(3.5rem, 9vh, 8rem) clamp(1.5rem, 5vw, 5.5rem); max-width: none; } .ts-hero-split .ts-hero-media { position: relative; min-height: 62vh; background: var(--cream-200); } .ts-hero-split .ts-hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Glass trust chip — DONA certification */ .ts-trust { display: flex; align-items: center; gap: var(--space-3); width: fit-content; padding: 0.875rem 1.25rem 0.875rem var(--space-4); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm)); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); } .ts-trust svg { color: var(--green-600); flex-shrink: 0; } .ts-trust b { display: block; font-family: var(--font-eyebrow); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest-900); } .ts-trust span { font-size: var(--text-sm); color: var(--ink-700); } /* Trust bar strip */ .ts-trustbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--hairline); border-bottom: 1px solid var(--hairline); } .ts-trustbar > div { display: flex; align-items: center; gap: var(--space-3); padding: 1.625rem clamp(1.5rem, 4vw, 3.5rem); background: var(--surface-page); } .ts-trustbar svg { color: var(--green-600); flex-shrink: 0; } .ts-trustbar span { font-family: var(--font-eyebrow); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest-900); } /* ============================================================ 11. MEDIA / PORTRAITS ============================================================ */ .ts-portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); background: var(--cream-200); box-shadow: var(--shadow-lg); } .ts-portrait img { width: 100%; height: 100%; object-fit: cover; } .ts-portrait.is-tall { aspect-ratio: 3 / 4; } .ts-portrait.is-wide { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .ts-portrait.is-square{ aspect-ratio: 1 / 1; } .ts-figure { display: flex; flex-direction: column; gap: var(--space-3); } .ts-figure figcaption { font-size: var(--text-sm); color: var(--text-muted); } /* ============================================================ 12. FORMS ============================================================ */ .ts-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 560px; } .ts-field { display: flex; flex-direction: column; gap: 0.4375rem; } .ts-field label { font-family: var(--font-eyebrow); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .ts-field input, .ts-field select, .ts-field textarea { width: 100%; padding: 0.875rem var(--space-4); font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-strong); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-inset); outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ts-field textarea { resize: vertical; min-height: 120px; } .ts-field input::placeholder, .ts-field textarea::placeholder { color: var(--stone-500); } .ts-field input:hover, .ts-field select:hover, .ts-field textarea:hover { border-color: var(--stone-500); } .ts-field input:focus, .ts-field select:focus, .ts-field textarea:focus { border-color: var(--border-accent); box-shadow: var(--ring-focus); } .ts-field input[aria-invalid="true"] { border-color: var(--clay-500); } .ts-field small { font-size: 0.78125rem; color: var(--text-muted); } /* Checkbox / consent */ .ts-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-body); cursor: pointer; } .ts-check input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--green-600); cursor: pointer; } /* Selectable option row (radio-style choice cards) */ .ts-option { display: block; padding: 0.9375rem 1.25rem; font-size: var(--text-sm); color: var(--text-strong); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .ts-option:hover { background: var(--cream-100); } .ts-option.is-selected, .ts-option:has(input:checked) { background: var(--green-50); border-color: var(--border-accent); } .ts-option input { position: absolute; opacity: 0; pointer-events: none; } /* Progress bars for a multi-step form */ .ts-progress { display: flex; align-items: center; gap: var(--space-2); } .ts-progress span { flex: 1; height: 3px; border-radius: var(--radius-pill); background: var(--sand-300); transition: background var(--dur-base) var(--ease-out); } .ts-progress span.is-on { background: var(--green-500); } /* Feedback panels */ .ts-note { padding: var(--space-4); background: var(--green-50); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--forest-800); } .ts-error { padding: var(--space-4); background: var(--cream-200); border: 1px solid var(--clay-300); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-clay); } /* Success state — toggled by adding .is-sent to the wrapper */ .ts-success { display: none; flex-direction: column; align-items: center; gap: var(--space-5); padding: var(--space-6) 0; text-align: center; animation: ts-rise var(--dur-slow) var(--ease-out) both; } .ts-success h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-3xl); } .ts-success p { max-width: 420px; font-size: var(--text-md); } .is-sent .ts-form { display: none; } .is-sent .ts-success { display: flex; } /* Inline form (newsletter) */ .ts-inline { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; max-width: 520px; } .ts-inline input { flex: 1; min-width: 240px; padding: var(--space-4) 1.125rem; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-strong); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ts-inline input:focus { border-color: var(--border-accent); box-shadow: var(--ring-focus); } /* ============================================================ 13. FAQ / ACCORDION ============================================================ */ .ts-faq { display: flex; flex-direction: column; border-top: 1px solid var(--border-soft); } .ts-faq details { border-bottom: 1px solid var(--border-soft); } .ts-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-xl); color: var(--text-strong); cursor: pointer; list-style: none; } .ts-faq summary::-webkit-details-marker { display: none; } .ts-faq summary::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-right: 1.75px solid var(--green-600); border-bottom: 1.75px solid var(--green-600); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out); } .ts-faq details[open] summary::after { transform: rotate(225deg); } .ts-faq p { max-width: 620px; padding-bottom: var(--space-5); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); animation: ts-fade var(--dur-base) var(--ease-out) both; } /* ============================================================ 14. FOOTER ============================================================ */ .ts-footer { background: var(--surface-inverse); padding: var(--space-8) clamp(1.25rem, 5vw, 4.5rem) var(--space-6); color: rgba(250, 246, 236, 0.62); } .ts-footer b { font-family: var(--font-eyebrow); font-size: 0.875rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-logo); text-transform: uppercase; color: var(--cream-100); } .ts-footer h3 { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: var(--text-2xl); color: var(--green-300); } .ts-footer p { max-width: 380px; font-size: var(--text-sm); } .ts-footer a { color: var(--cream-100); font-size: var(--text-sm); } .ts-footer a:hover { color: var(--green-300); } /* Primary buttons keep forest ink on green, even on dark surfaces */ .ts-footer a.ts-btn, .ts-dark a.ts-btn { color: var(--forest-900); font-size: var(--text-xs); } .ts-footer a.ts-btn:hover, .ts-dark a.ts-btn:hover { color: var(--forest-900); } .ts-footer a.ts-btn.is-sm, .ts-dark a.ts-btn.is-sm { font-size: var(--text-2xs); } .ts-footer .ts-col { display: flex; flex-direction: column; gap: var(--space-3); } .ts-footer .ts-collabel { font-family: var(--font-eyebrow); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(250, 246, 236, 0.5); } .ts-footer .ts-fine { font-size: 0.78125rem; color: rgba(250, 246, 236, 0.62); } /* ============================================================ 15. MOTION ============================================================ */ @keyframes ts-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes ts-fade { from { opacity: 0; } to { opacity: 1; } } .ts-rise { animation: ts-rise var(--dur-ambient) var(--ease-out) both; } .ts-rise.is-delay-1 { animation-delay: 80ms; } .ts-rise.is-delay-2 { animation-delay: 160ms; } .ts-rise.is-delay-3 { animation-delay: 240ms; } /* ============================================================ 16. RESPONSIVE ============================================================ */ @media (max-width: 900px) { .ts-hero-split { grid-template-columns: 1fr; } .ts-hero-split .ts-hero-media { min-height: 46vh; order: -1; } } @media (max-width: 640px) { .ts-section { padding: var(--space-8) var(--space-5); } .ts-hero { min-height: auto; padding: var(--space-8) var(--space-5); } .ts-hero-scrim { background: linear-gradient(180deg, rgba(252, 250, 244, 0.88) 0%, rgba(252, 250, 244, 0.80) 50%, rgba(252, 250, 244, 0.72) 85%, rgba(252, 250, 244, 0.70) 94%, rgba(27, 44, 24, 0.12) 100%); } .ts-card { padding: var(--space-5); } .ts-header { padding: var(--space-3) var(--space-5); } .ts-nav { gap: var(--space-4); } .ts-trust { width: 100%; } .ts-quote.is-panel { padding: var(--space-5); font-size: var(--text-xl); } .ts-listrow h3 { font-size: var(--text-2xl); } } /* Tap targets stay ≥44px on touch */ @media (pointer: coarse) { .ts-btn { min-height: 44px; } .ts-nav a { min-height: 44px; display: inline-flex; align-items: center; } } @media (prefers-reduced-motion: reduce) { .ts *, .ts *::before, .ts *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ 18. BLOG FEED SKELETON (GHL blog — "Notes from the journey") ============================================================ */ .ts-blog-skeleton { gap: var(--space-3); padding: 0 0 var(--space-5); overflow: hidden; } .ts-skel { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--cream-200) 0%, var(--cream-100) 50%, var(--cream-200) 100%); background-size: 200% 100%; animation: ts-shimmer 1.6s var(--ease-in-out) infinite; } .ts-blog-skeleton .ts-skel:first-child { border-radius: 0; } .ts-blog-skeleton .ts-skel:not(:first-child) { margin: 0 var(--space-5); } @keyframes ts-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .ts-skel { animation: none; } } /* ============================================================ 19. PRINT ============================================================ */ @media print { .ts-header, .ts-footer, .ts-btn, .ts-hero-scrim { display: none !important; } .ts { background: #fff; color: #000; } .ts-card { box-shadow: none; border: 1px solid #ddd; } }