/* ============================================================ TIML — theme system (theme.css). Loaded after variables.css. TWO SCOPES, deliberately: 1. `body[data-page]` — the Classical base + component classes, for our layout-disabled marketing documents ONLY (they render ; SE's own pages never do). This keeps the design system from leaking into SE's community pages. 2. `.tm-*` (unscoped) — the Timl chrome (nav, footer, slots, hover states). Namespaced, so it is safe unscoped — and it MUST be, because the timl.header / timl.footer widgets render the same partials on SE pages, which have no data-page attribute. The page markup keeps the handoff's inline styles verbatim, so this file is deliberately small: it carries the design-system classes the prototype pulls from styles.css (.btn, .input), the chrome, the hover states the prototype expressed as style-hover="…" attributes, and the responsive rules the handoff asks for but does not contain. ============================================================ */ /* ---- 1) Classical base ------------------------------------------------- */ body[data-page] *, body[data-page] *::before, body[data-page] *::after { box-sizing: border-box; } body[data-page] { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; text-wrap: pretty; -webkit-font-smoothing: antialiased; } body[data-page] h1, body[data-page] h2, body[data-page] h3, body[data-page] h4, body[data-page] h5, body[data-page] h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } body[data-page] h1 { font-size: 42px; } body[data-page] h2 { font-size: 32px; } body[data-page] h3 { font-size: 25px; } body[data-page] h4 { font-size: 20px; } body[data-page] h5 { font-size: 16px; } body[data-page] h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } body[data-page] p { margin: 0 0 var(--space-3); } body[data-page] a { color: var(--color-accent-700); text-underline-offset: 3px; } body[data-page] a:hover { color: var(--color-accent-600); } body[data-page] img { display: block; max-width: 100%; } body[data-page] figure { margin: 0; } body[data-page] .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } body[data-page] ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* Focus: required on every interactive element (handoff, Spacing/radius). */ body[data-page] :focus { outline: none; } body[data-page] :focus-visible, .tm-chrome :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Grid/flex children must be allowed to shrink, or long words force overflow. */ body[data-page] section div, body[data-page] section a, body[data-page] main div, body[data-page] footer div { min-width: 0; } /* Anchor targets clear the sticky nav (nav is ~63px tall). Jumps are instant, as in the prototype — smooth scrolling is motion the design never asked for. */ body[data-page] section[id] { scroll-margin-top: 84px; } /* ---- 2) Classical components the prototype uses ----------------------- */ /* — buttons (.btn on the Contact and Privacy pages) — */ body[data-page] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } body[data-page] .btn:disabled { opacity: 0.45; cursor: not-allowed; } body[data-page] .btn-primary { color: var(--color-accent); border-color: var(--color-accent); } body[data-page] .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } body[data-page] .btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); } body[data-page] .btn-secondary { border-color: var(--color-divider); } body[data-page] .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } /* — forms (.input on the Contact page) — */ body[data-page] .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } body[data-page] .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } body[data-page] .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } body[data-page] textarea.input { min-height: 90px; resize: vertical; } /* Native selects ignore `background: transparent` gracefully but need the arrow to stay visible on the light ground. */ body[data-page] select.input { background: var(--color-bg); } /* ---- 3) Timl chrome --------------------------------------------------- */ /* SPECIFICITY NOTE: the base link rule above is `body[data-page] a`, which is (0,1,2) — it beats a bare class like `.tm-navlink` (0,1,0) and would paint every chrome link and gold button in the light-ground link colour. So each rule below that sets a link's colour is doubled up (`.tm-chrome .tm-navlink`, `body[data-page] .tm-gold`, …) to clear that bar. Hover rules already did, which is exactly how the bug hid: the links looked right the moment you pointed at them. */ .tm-chrome { font-family: var(--font-body); } /* Content column: one rule, used by the nav, footer and every section. */ .tm-wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); } /* — nav — */ .tm-nav { display: flex; align-items: center; gap: var(--space-4); /* Links align to the content column but never touch the viewport edge. */ padding: var(--space-3) max(24px, calc((100% - 1240px) / 2 + 24px)); border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); background: color-mix(in srgb, var(--timl-ink) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--color-bg); } /* Contact and Privacy use a solid nav (no sticky, no blur) — the design shows the ink bar sitting directly on the accent-900 hero band beneath it. */ .tm-nav-solid { background: var(--timl-ink); backdrop-filter: none; -webkit-backdrop-filter: none; } .tm-nav-sticky { position: sticky; top: 0; z-index: 30; } .tm-brand-nav { margin-right: auto; } .tm-brand-image img { height: 30px; width: auto; display: block; } .tm-brand-foot img { height: 22px; width: auto; display: block; } /* The links share the nav's flex row directly on desktop — display:contents makes the wrapper invisible to layout, so the bar is exactly the design's flat row. */ .tm-navlinks { display: contents; } .tm-navlink, .tm-chrome .tm-navlink { font-size: 14px; text-decoration: none; white-space: nowrap; color: color-mix(in srgb, var(--color-bg) 78%, transparent); transition: color .15s ease; } .tm-navlink:hover, .tm-navlink:focus-visible { color: var(--color-accent-300); } .tm-cta, .tm-chrome .tm-cta { font-family: var(--font-heading); font-size: 14px; font-weight: 400; text-decoration: none; white-space: nowrap; padding: 9px 18px; border-radius: var(--radius-md); border: 1px solid var(--color-accent-400); color: var(--color-accent-300); background: transparent; transition: background .15s ease; } .tm-cta:hover, .tm-cta:focus-visible { background: color-mix(in srgb, var(--color-accent) 22%, transparent); } /* — solid gold buttons (hero submit, Kite Wars "Learn more") — */ .tm-gold, body[data-page] a.tm-gold { background: var(--color-accent-300); border: 1px solid var(--color-accent-300); color: var(--timl-ink); transition: background .15s ease, border-color .15s ease; } .tm-gold:hover, .tm-gold:focus-visible, body[data-page] a.tm-gold:hover, body[data-page] a.tm-gold:focus-visible { background: var(--color-accent-200); border-color: var(--color-accent-200); color: var(--timl-ink); } /* On the accent-900 CTA band the pair shifts one step lighter. */ .tm-gold-cta, body[data-page] a.tm-gold-cta { background: var(--color-accent-200); border: 1px solid var(--color-accent-200); color: var(--color-accent-900); transition: background .15s ease, border-color .15s ease; } .tm-gold-cta:hover, .tm-gold-cta:focus-visible, body[data-page] a.tm-gold-cta:hover, body[data-page] a.tm-gold-cta:focus-visible { background: var(--color-accent-100); border-color: var(--color-accent-100); color: var(--color-accent-900); } /* — "Built for" cards — */ .tm-card { transition: border-color .15s ease, box-shadow .15s ease; } .tm-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); } /* — hero rotator — */ .tm-hero { min-height: 88vh; } @supports (height: 88svh) { .tm-hero { min-height: 88svh; } } .tm-hero-plate { position: absolute; inset: 0; transition: opacity 1200ms ease; } .tm-hero-plate img, .tm-hero-plate .tm-slot { width: 100%; height: 100%; object-fit: cover; animation: tm-drift 14s ease-in-out infinite alternate; } @keyframes tm-drift { from { transform: scale(1.02); } to { transform: scale(1.1); } } .tm-dots { display: flex; gap: 8px; margin-top: 40px; } .tm-dot { width: 30px; height: 3px; border: 0; padding: 0; cursor: pointer; border-radius: 2px; background: rgba(243, 242, 242, .3); transition: background 400ms ease; } .tm-dot[aria-current="true"] { background: var(--color-accent-300); } /* — footer — */ .tm-footer { background: var(--timl-ink); color: color-mix(in srgb, var(--color-bg) 70%, transparent); border-top: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); } /* Contact and Privacy: the design floats the footer 72px below the article and drops the gold hairline (the landing page keeps it as a section divider). */ .tm-footer-inner { margin-top: 72px; border-top: 0; } .tm-footer-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 28px; font-size: 13px; padding-top: 34px; padding-bottom: 34px; } .tm-footlink, .tm-footer .tm-footlink { color: color-mix(in srgb, var(--color-bg) 78%, transparent); text-decoration: none; transition: color .15s ease; } .tm-footlink:hover, .tm-footlink:focus-visible { color: var(--color-accent-300); } .tm-footer .tm-footlink[aria-current="page"] { color: var(--color-accent-300); } .tm-tnum { font-feature-settings: 'tnum' 1; } /* Language strip — an addition to the approved design (which has no switcher), kept to the footer's own 13px link voice so it reads as part of the row. */ .tm-langs { display: flex; align-items: baseline; gap: 8px; } .tm-langs a, .tm-footer .tm-langs a { font-size: 12px; letter-spacing: 0.08em; text-decoration: none; color: color-mix(in srgb, var(--color-bg) 55%, transparent); transition: color .15s ease; } .tm-langs a:hover, .tm-langs a:focus-visible { color: var(--color-accent-300); } .tm-footer .tm-langs a.active { color: var(--color-accent-300); } .tm-langs .sep { color: color-mix(in srgb, var(--color-bg) 25%, transparent); font-size: 11px; } /* — labeled image placeholder (a slot with nothing set) — */ .tm-slot-empty { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--timl-ink) 92%, var(--color-accent)); border: 1px dashed color-mix(in srgb, var(--color-accent) 45%, transparent); color: var(--color-accent-300); font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: 12px; } .tm-slot-empty > span { max-width: 24ch; } /* ---- 4) Responsive ---------------------------------------------------- */ /* The handoff's fixed two-column grids are inline styles, so stacking them needs !important — a media query cannot otherwise beat a style attribute. The handoff asks for exactly this and notes the breakpoint is not in the prototype ("must stack to one column below ~880px"). */ @media (max-width: 880px) { body[data-page] .tm-2col { grid-template-columns: minmax(0, 1fr) !important; } } /* Nav below 640px: the wordmark and the Early access button hold the first row, the section links wrap onto a second one. The handoff flags a small-screen nav as "not designed yet" — this keeps every link reachable without inventing a hamburger the design never specifies. */ @media (max-width: 640px) { .tm-nav { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-left: 20px; padding-right: 20px; } /* Two clean rows: wordmark + Early access, then the section links underneath. The wrapper stops being display:contents so it can claim a full-width line. */ .tm-brand-nav { order: 1; } .tm-cta { order: 2; } .tm-navlinks { display: flex; order: 3; flex-basis: 100%; flex-wrap: wrap; gap: var(--space-2) var(--space-4); } .tm-nav .tm-navlink { font-size: 13px; } } @media (max-width: 420px) { .tm-brand-image img { height: 24px; } .tm-footer-row { gap: 10px 18px; } } /* Respect a reduced-motion preference: no Ken Burns drift, no cross-fade, and timl.js also stops the rotation timer. */ @media (prefers-reduced-motion: reduce) { .tm-hero-plate img, .tm-hero-plate .tm-slot { animation: none; } .tm-hero-plate { transition: none; } .tm-dot { transition: none; } } /* ---- 5) SE's own pages ------------------------------------------------------ Scoped to body:not([data-page]) so none of this can reach the marketing pages. It lives here rather than in custom.css because SE pages load theme.css through a direct , while custom.css reaches them via the aggregated styles_N.css bundle — which is cached and needs a regeneration to pick up a change. These rules therefore take effect on a plain file deploy. ---------------------------------------------------------------------------- */ /* Primary action. SE renders the auth submit as a bare