/* ============================================================================ Tally marketing site — shared styles. Converted from the design/v2 DC prototypes to plain static CSS (no React / support.js). The per-page markup keeps its inline styles; this file carries the base tokens, fonts helpers, keyframes, responsive rules, and the hover utilities that replace the prototype's `style-hover=""` attribute. ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Shared design tokens on :root so both the dark Landing and the light Solution pages can link this one stylesheet. Page-specific accents (e.g. --brass, --paper2) are declared inline per page. Body background is NOT set here — each page's own wrapper/sections paint their background. */ :root { --ink: #16130f; --bone: #f5f2ea; --sub: #a99f8c; --terra: #c8542a; --gold: #d4a017; --green: #1f4a3f; --coral: #e8613c; --navy: #0d1b2a; --line: rgba(246,239,227,0.12); } body { font-family: 'Space Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mi { font-family: 'Material Symbols Outlined'; font-variation-settings: 'opsz' 24, 'wght' 400; line-height: 1; user-select: none; } .disp { font-family: 'DM Serif Display', Georgia, serif; } a { color: inherit; } ::selection { background: #c8542a; color: #fff; } ::-webkit-scrollbar { height: 0; width: 0; } /* Reduced motion — mirrors the prototype's data-rm gate. Set on by site.js when the OS prefers reduced motion. */ [data-rm="1"] * { animation: none !important; transition: none !important; } [data-rm="1"] [data-reveal] { opacity: 1 !important; transform: none !important; } @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } @keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.3} } @keyframes popIn { 0%{opacity:0;transform:scale(.6)} 70%{transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} } @keyframes menuIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } @keyframes spin { to { transform: rotate(360deg); } } /* Spinner glyph for pending buttons (e.g. "Sending…" on the invite form). */ .mi.spin { display: inline-block; animation: spin .8s linear infinite; } :root[data-rm="1"] .mi.spin { animation: none; } /* Multi-select "use it for" chips on the invite form. The native checkbox is visually hidden; its adjacent is the styled pill. Adjacent-sibling (input:checked + span) has universal support (no :has() needed). */ .lead-chip { position: relative; display: inline-flex; cursor: pointer; } .lead-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .lead-chip span { display: inline-flex; align-items: center; border: 1.5px solid rgba(26,24,20,0.18); border-radius: 9px; padding: 9px 13px; font-size: 14px; color: #4a463f; background: #fff; transition: background .12s, border-color .12s, color .12s; } .lead-chip:hover span { border-color: rgba(26,24,20,0.34); } .lead-chip input:checked + span { background: var(--terra); border-color: var(--terra); color: #fff; } .lead-chip input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; } /* Hover utilities (replace the DC style-hover="" attribute) */ .h-terra:hover { background:#b4471f !important; } .h-sol:hover { background:rgba(246,239,227,0.05) !important; } .h-lift:hover { transform:translateY(-6px) !important; } .h-underline:hover { color:#fff; } /* Solutions dropdown: hidden by default, shown when the nav toggles [data-open] */ .sol-panel { display:none; } .sol-wrap[data-open="1"] .sol-panel { display:block; } /* Scroll-reveal initial state; site.js flips these on when visible (and the reduce-motion rule above forces them visible). */ [data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } /* ---- Responsive (mirrors the prototype's helmet @media rules) ---- */ @media (max-width:980px){ [data-hero]{grid-template-columns:1fr!important} [data-worlds]{grid-template-columns:1fr!important} [data-three]{grid-template-columns:1fr!important} } @media (max-width:620px){ [data-pad]{padding-left:20px!important;padding-right:20px!important} } @media (max-width:560px){ [data-solgrid]{grid-template-columns:1fr!important} } @media (max-width:860px){ [data-navextra]{display:none!important} } @media (max-width:1090px){ [data-solpanel]{position:fixed!important;left:12px!important;right:12px!important;top:62px!important;width:auto!important;padding-top:0!important;max-height:calc(100vh - 74px)!important;overflow:auto!important} [data-solgrid]{grid-template-columns:1fr 1fr!important} } @media (max-width:620px){ [data-loginbtn]{display:none!important} [data-navwrap]{padding-left:14px!important;padding-right:14px!important;gap:12px!important} [data-navlinks]{margin-left:6px!important;gap:14px!important} [data-getstarted]{padding:9px 13px!important;font-size:13.5px!important} }