/* ============================================================ Dynamis Treuhand · site-level styles Extensions to tokens.css for layout, responsive collapse, and a couple of in-house typography helpers. ============================================================ */ html { scroll-behavior: smooth; } /* Accent-color override — Tweaks panel swaps this CSS var. */ :root { --accent: var(--terracotta); --on-accent: #ffffff; } /* The italic serif accent inside headlines should always pick up the active accent (so swapping olive/orange feels global). It also forces the Newsreader serif so the h1/h2 family override doesn't inherit Kay Pho Du into the inner span. */ .serif-accent { color: var(--accent) !important; font-family: var(--font-serif) !important; } /* Density modifier — applied to . */ body[data-density="airy"] { --section-py: 140px; } body[data-density="standard"] { --section-py: 96px; } body { --section-py: 120px; } /* Editorial section header — eyebrow + headline + lead column */ .section-header { display: flex; flex-direction: column; gap: 24px; margin-bottom: 72px; max-width: 720px; } .section-header .lede { margin: 0; font: 400 var(--body-lg-size)/var(--body-lg-line) var(--font-sans); color: var(--on-surface-variant); max-width: 560px; } /* Container */ .container { max-width: var(--max-content); margin: 0 auto; padding: 0 var(--margin-desktop); } @media (max-width: 1024px) { .container { padding: 0 40px; } } @media (max-width: 760px) { .container { padding: 0 var(--margin-mobile); } } /* Editorial divider — terracotta hairline */ .hr-editorial { height: 1px; background: var(--hairline-strong); border: 0; margin: 0; } /* Tabular numerics utility */ .tabular { font-variant-numeric: tabular-nums; } /* Primary headlines use Kay Pho Du at a light weight for an editorial-magazine feel. We could rely on plain `h1, h2 {…}` — except every headline in this codebase carries an inline `font:` shorthand (set in JSX style props), and `font:` resets family, weight, size, line-height all at once. The CSS cascade rule says inline styles win unless we mark the override !important. Two ways out: 1. Drop the inline `font:` shorthands across every component. 2. Override family + weight here with !important. We chose (2) because it keeps the JSX readable. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display) !important; } h1, h2 { font-weight: 400 !important; } h3, h4, h5, h6 { font-weight: 600 !important; } /* Eyebrows also use the display serif for an editorial register. */ .eyebrow-dash, p.dt-eyebrow { font-family: var(--font-display) !important; } /* Editorial multi-column grids — keep body copy visually balanced. `text-wrap: balance` distributes line breaks so adjacent columns don't end with widows / lopsided ragged edges. Applied to all article + cell bodies inside grids used for differentiators, values, process steps, references and similar column layouts. */ .dt-diff-grid p, .dt-services-grid p, .dt-related-grid p, .dt-timeline-grid p { text-wrap: pretty; text-wrap: balance; } .dt-diff-grid h3, .dt-services-grid h3 { text-wrap: balance; } /* Eyebrow with leading dash (alternate eyebrow style) */ .eyebrow-dash { display: inline-flex; align-items: center; gap: 14px; font: 500 var(--label-sm-size)/var(--label-sm-line) var(--font-sans); letter-spacing: var(--label-sm-track); text-transform: uppercase; color: var(--primary); } .eyebrow-dash::before { content: ""; width: 24px; height: 2px; background: var(--accent); } /* Section padding using token */ .section { padding: var(--section-py) 0; } /* Dark / primary-color section override */ section[data-theme="dark"] { background: var(--primary); color: var(--inverse-on-surface); /* Swap accent to the brighter tint inside navy contexts so text and dashes stay readable. The design system lists --terracotta-light specifically for this case. */ --accent: var(--terracotta-light); } section[data-theme="dark"] h1, section[data-theme="dark"] h2, section[data-theme="dark"] h3 { color: var(--surface); } section[data-theme="dark"] .t-lead, section[data-theme="dark"] p { color: rgba(245, 240, 233, 0.78); } section[data-theme="dark"] .eyebrow-dash { color: var(--surface); } section[data-theme="dark"] .dt-eyebrow-line { background: rgba(245, 240, 233, 0.6) !important; } section[data-theme="white"] { background: var(--surface-container-lowest); } section[data-theme="cream-step"] { background: var(--surface-container-low); } /* Responsive collapses for grid helpers */ @media (max-width: 880px) { .dt-desktop-nav { display: none !important; } .dt-mobile-toggle { display: inline-flex !important; } } @media (max-width: 760px) { .dt-hero-grid, .dt-team-grid, .dt-contact-grid, .dt-footer-grid, .dt-diff-grid, .dt-insight-grid { grid-template-columns: 1fr !important; } .dt-services-grid { grid-template-columns: 1fr !important; } .dt-services-grid > div { grid-column: span 1 !important; } .container { padding: 0 var(--margin-mobile); } .section-header { margin-bottom: 48px; } } /* Tablet collapse of the services bento to 2 cols */ @media (min-width: 761px) and (max-width: 1024px) { .dt-services-grid { grid-template-columns: repeat(2, 1fr) !important; } .dt-services-grid > div { grid-column: span 1 !important; } .dt-diff-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Reduce display size on very small screens */ @media (max-width: 480px) { .display-lg-responsive { font-size: 44px !important; line-height: 50px !important; } } /* Focus ring */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Buttons inherit cursor */ button { font-family: inherit; } /* Make sure images don't blow out */ img { max-width: 100%; display: block; } /* Subtle scrollbar (webkit) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(29,27,23,0.15); border: 3px solid var(--surface); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(29,27,23,0.30); } /* Stub page styles */ .stub-hero { padding: 160px 0 120px; background: var(--surface); position: relative; overflow: hidden; } .stub-hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 480px; height: 480px; border-radius: 50%; background: var(--accent); opacity: 0.04; filter: blur(60px); pointer-events: none; } .stub-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface-container-lowest); border: 1px solid var(--hairline); border-radius: 999px; font: 500 13px/18px var(--font-sans); color: var(--on-surface-variant); white-space: nowrap; } .stub-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(157,66,43,0.12); } /* Smooth transition for accent var changes */ * { transition-property: background-color, color, border-color, fill, stroke; transition-duration: 200ms; transition-timing-function: var(--ease-soft); } /* But exclude transforms etc */ img, svg { transition: none; }