/* ============================================================================= Demand AI — component styles ----------------------------------------------------------------------------- Single stylesheet for every component in this design system. Do not link this file directly — link the root `styles.css`, which @imports the tokens first and then this file: Notes ----- * Every class is prefixed `dai-` and every custom property `--dai-`. * No `!important`. (The website needs it to beat WordPress/BlockArt; a standalone system does not — keep it that way.) * Motion is guarded by `prefers-reduced-motion` at the bottom of the file. ============================================================================= */ /* ----------------------------------------------------------------------------- Root — opt-in base styling. Put `dai-root` on or your app wrapper. -------------------------------------------------------------------------- */ .dai-root { font-family: var(--dai-font-sans); font-size: var(--dai-text-body); line-height: var(--dai-leading-body); color: var(--dai-text); background: var(--dai-surface); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .dai-root *, .dai-root *::before, .dai-root *::after { box-sizing: border-box; } .dai-root img, .dai-root svg { display: block; max-width: 100%; } .dai-root :focus-visible { outline: 2px solid var(--dai-brand); outline-offset: 3px; border-radius: var(--dai-radius-xs); } /* Screen-reader-only utility */ .dai-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; } /* ----------------------------------------------------------------------------- Container -------------------------------------------------------------------------- */ .dai-container { width: 100%; max-width: var(--dai-container); margin-inline: auto; padding-inline: var(--dai-gutter); } .dai-container--narrow { max-width: 760px; } .dai-container--wide { max-width: 1240px; } .dai-container--flush { padding-inline: 0; } /* ----------------------------------------------------------------------------- Split — the site's two-column band (copy beside a visual, or beside a form). Collapses to one column at 860px. `--media` gives the second column more room. -------------------------------------------------------------------------- */ .dai-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); align-items: center; } .dai-split--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .dai-split--copy { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .dai-split--top { align-items: start; } @media (max-width: 860px) { .dai-split, .dai-split--media, .dai-split--copy { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); } } /* ----------------------------------------------------------------------------- Section -------------------------------------------------------------------------- */ .dai-section { position: relative; padding-block: var(--dai-section-y); color: var(--dai-text); isolation: isolate; } .dai-section--tight { padding-block: var(--dai-section-y-sm); } .dai-section--soft { background: radial-gradient(1100px 600px at 15% -10%, var(--dai-brand-tint) 0, rgba(235, 243, 243, 0) 60%), radial-gradient(900px 500px at 110% 20%, var(--dai-brand-tint) 0, rgba(235, 243, 243, 0) 55%), var(--dai-brand-wash); } .dai-section--tint { background: var(--dai-brand-tint); } .dai-section--night { color: var(--dai-on-night); background: radial-gradient(900px 500px at 10% 0%, rgba(105, 167, 167, 0.22), transparent 60%), radial-gradient(700px 500px at 110% 100%, rgba(32, 125, 127, 0.4), transparent 55%), var(--dai-surface-night); } .dai-section--night .dai-heading, .dai-section--night .dai-display { color: var(--dai-white); } .dai-section--night .dai-lede, .dai-section--night .dai-section-head__sub { color: var(--dai-on-night-muted); } .dai-section--grid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(5, 110, 110, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(5, 110, 110, 0.06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 40%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 40%, transparent 75%); opacity: 0.6; } .dai-section--night.dai-section--grid::before { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%); opacity: 1; } .dai-section--flow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(80px, 12vh, 180px); z-index: -1; pointer-events: none; background: linear-gradient( 180deg, var(--dai-flow-from, rgba(255, 255, 255, 0)) 0%, var(--dai-flow-to, var(--dai-surface)) 100% ); } .dai-section--glow, .dai-section:has(> .dai-section__glow) { overflow: hidden; } .dai-section__glow { position: absolute; width: 520px; height: 520px; border-radius: var(--dai-radius-circle); filter: blur(80px); opacity: 0.35; z-index: -1; pointer-events: none; background: var(--dai-brand-soft); animation: dai-drift 18s var(--dai-ease) infinite alternate; } .dai-section__glow--tl { top: -140px; left: -120px; } .dai-section__glow--br { bottom: -160px; right: -120px; animation-delay: -6s; } @keyframes dai-drift { to { transform: translate3d(40px, 30px, 0); } } /* ----------------------------------------------------------------------------- Eyebrow -------------------------------------------------------------------------- */ .dai-eyebrow { display: inline-flex; align-items: center; gap: clamp(9px, 1.3vw, 13px); margin: 0; font-family: var(--dai-font-sans); font-size: clamp(9px, 1.05vw, 12px); font-weight: var(--dai-weight-bold); letter-spacing: clamp(0.12em, 0.5vw, 0.26em); text-transform: uppercase; line-height: 1; color: var(--dai-brand); } .dai-eyebrow::before { content: ""; flex: 0 0 auto; width: clamp(22px, 3.6vw, 40px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(5, 110, 110, 0) 0%, rgba(105, 167, 167, 0.9) 100%); } .dai-eyebrow--block { display: flex; width: fit-content; margin: 0 0 clamp(16px, 2.4vw, 22px); } .dai-eyebrow--center { display: flex; width: fit-content; margin: 0 auto clamp(16px, 2.4vw, 22px); } .dai-eyebrow--on-dark { color: var(--dai-on-night-accent); } .dai-eyebrow--on-dark::before { background: linear-gradient(90deg, rgba(144, 191, 192, 0) 0%, rgba(144, 191, 192, 0.9) 100%); } /* ----------------------------------------------------------------------------- Headings + lede -------------------------------------------------------------------------- */ .dai-display, .dai-heading { font-family: var(--dai-font-sans); color: var(--dai-ink); margin: 0; text-wrap: balance; } .dai-display { font-size: var(--dai-text-display); line-height: var(--dai-leading-display); font-weight: var(--dai-weight-bold); letter-spacing: var(--dai-tracking-display); } .dai-heading--1 { font-size: var(--dai-text-h1); line-height: 1.06; font-weight: var(--dai-weight-black); letter-spacing: var(--dai-tracking-snug); } .dai-heading--2 { font-size: var(--dai-text-h2); line-height: 1.1; font-weight: var(--dai-weight-bold); letter-spacing: var(--dai-tracking-tight); } .dai-heading--3 { font-size: var(--dai-text-h3); line-height: var(--dai-leading-snug); font-weight: var(--dai-weight-bold); letter-spacing: var(--dai-tracking-snug); } .dai-heading--4 { font-size: var(--dai-text-h4); line-height: var(--dai-leading-snug); font-weight: var(--dai-weight-semibold); letter-spacing: -0.01em; } .dai-heading__accent { font-size: inherit; font-weight: inherit; font-style: normal; background: linear-gradient(100deg, var(--dai-brand) 0%, var(--dai-brand-mid) 50%, var(--dai-brand-strong) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .dai-section--night .dai-heading__accent { background: linear-gradient(100deg, var(--dai-brand-pale) 0%, var(--dai-brand-soft) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .dai-lede { margin: 0; max-width: 56ch; font-size: var(--dai-text-lede); line-height: var(--dai-leading-body); color: var(--dai-text-muted); } .dai-section-head { max-width: 720px; margin: 0 auto var(--dai-space-12); text-align: center; } .dai-section-head--start { margin-inline: 0; text-align: left; } .dai-section-head--start .dai-lede { margin-inline: 0; } .dai-section-head__title { margin: var(--dai-space-4) 0 var(--dai-space-3); } .dai-section-head__sub { margin: 0 auto; color: var(--dai-text-muted); font-size: 17px; } .dai-section-head--start .dai-section-head__sub { margin-inline: 0; } /* ----------------------------------------------------------------------------- Button -------------------------------------------------------------------------- */ .dai-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--dai-space-3); padding: 17px 30px; font-family: var(--dai-font-sans); font-size: var(--dai-text-xs); font-weight: var(--dai-weight-semibold); line-height: 1; letter-spacing: var(--dai-tracking-wide); text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--dai-white); background: var(--dai-brand); border: none; border-radius: var(--dai-radius-pill); box-shadow: var(--dai-shadow-brand); cursor: pointer; overflow: hidden; transition: transform var(--dai-dur) var(--dai-ease), box-shadow var(--dai-dur) var(--dai-ease), background-color var(--dai-dur) var(--dai-ease), color var(--dai-dur) var(--dai-ease), border-color var(--dai-dur) var(--dai-ease); } .dai-btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%); transform: translateX(-120%); transition: transform 0.85s var(--dai-ease); } .dai-btn:hover { transform: translateY(-2px); background: var(--dai-brand-strong); box-shadow: var(--dai-shadow-brand-hover); } .dai-btn:hover::after { transform: translateX(120%); } .dai-btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 8px 16px -10px rgba(5, 110, 110, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .dai-btn svg { width: 16px; height: 16px; transition: transform var(--dai-dur) var(--dai-ease); } .dai-btn:hover svg { transform: translateX(5px); } .dai-btn[disabled], .dai-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; transform: none; } .dai-btn--ghost { background: transparent; color: var(--dai-brand); border: 1.5px solid var(--dai-border-brand); box-shadow: none; } .dai-btn--ghost::after { display: none; } .dai-btn--ghost:hover { background: var(--dai-brand); color: var(--dai-white); border-color: var(--dai-brand); box-shadow: 0 18px 38px -16px rgba(5, 110, 110, 0.55); } .dai-btn--ghost.dai-btn--on-dark { background: rgba(255, 255, 255, 0.04); color: var(--dai-on-night); border: 1.5px solid rgba(144, 191, 192, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .dai-btn--ghost.dai-btn--on-dark:hover { background: rgba(144, 191, 192, 0.14); border-color: var(--dai-brand-pale); color: var(--dai-white); box-shadow: none; } .dai-btn--sm { padding: 12px 20px; font-size: 11px; letter-spacing: 0.1em; gap: var(--dai-space-2); } .dai-btn--lg { padding: 20px 38px; font-size: var(--dai-text-sm); } .dai-btn--block { display: flex; width: 100%; } .dai-btn-row { display: flex; gap: var(--dai-space-3); flex-wrap: wrap; } .dai-btn-row--center { justify-content: center; } /* ----------------------------------------------------------------------------- Card -------------------------------------------------------------------------- */ .dai-card { position: relative; background: var(--dai-surface); border: 1px solid var(--dai-border); border-radius: var(--dai-radius-xl); box-shadow: var(--dai-shadow-sm); padding: var(--dai-space-6); transition: transform var(--dai-dur) var(--dai-ease), box-shadow var(--dai-dur) var(--dai-ease), border-color var(--dai-dur) var(--dai-ease); } .dai-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(220px 100px at 20% 0%, rgba(5, 110, 110, 0.08), transparent 70%); opacity: 0; transition: opacity var(--dai-dur-slow) var(--dai-ease); } .dai-card > * { position: relative; } .dai-card--interactive { cursor: pointer; } .dai-card--interactive:hover, .dai-card--interactive:focus-within { transform: translateY(-3px); border-color: var(--dai-brand-soft); box-shadow: var(--dai-shadow); } .dai-card--interactive:hover::before, .dai-card--interactive:focus-within::before { opacity: 1; } .dai-card__title { margin: 0 0 var(--dai-space-2); font-family: var(--dai-font-sans); font-size: var(--dai-text-h4); font-weight: var(--dai-weight-bold); line-height: var(--dai-leading-snug); letter-spacing: -0.01em; color: var(--dai-ink); } .dai-card__text { margin: 0; color: var(--dai-text-muted); font-size: var(--dai-text-sm); line-height: var(--dai-leading-body); } .dai-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--dai-space-4); } /* ----------------------------------------------------------------------------- Badge -------------------------------------------------------------------------- */ .dai-badge { display: inline-flex; align-items: center; gap: var(--dai-space-1); padding: 4px 10px; font-family: var(--dai-font-sans); font-size: var(--dai-text-2xs); font-weight: var(--dai-weight-semibold); line-height: 1.4; border-radius: var(--dai-radius-pill); background: var(--dai-brand-wash); color: var(--dai-brand); } .dai-badge--solid { background: var(--dai-brand); color: var(--dai-white); } .dai-badge--outline { background: transparent; color: var(--dai-brand); border: 1px solid var(--dai-border-brand); } /* ----------------------------------------------------------------------------- Form inputs -------------------------------------------------------------------------- */ .dai-input { width: 100%; padding: 13px 15px; font-family: inherit; font-size: 15px; line-height: 1.4; color: var(--dai-ink); background: var(--dai-surface); border: 1.5px solid var(--dai-border-strong); border-radius: var(--dai-radius-control); -webkit-appearance: none; appearance: none; transition: border-color var(--dai-dur-fast) var(--dai-ease), box-shadow var(--dai-dur-fast) var(--dai-ease); } .dai-input::placeholder { color: var(--dai-text-faint); } .dai-input:hover { border-color: var(--dai-border-brand); } .dai-input:focus { outline: none; border-color: var(--dai-brand); box-shadow: var(--dai-ring); } /* ----------------------------------------------------------------------------- Navbar -------------------------------------------------------------------------- */ .dai-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dai-dur-slow) var(--dai-ease), box-shadow var(--dai-dur-slow) var(--dai-ease); } .dai-nav.is-scrolled { border-color: var(--dai-border); box-shadow: 0 1px 0 rgba(8, 28, 28, 0.03), 0 8px 24px rgba(8, 28, 28, 0.05); } /* ----------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .dai-root *, .dai-root *::before, .dai-root *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .dai-section__glow { animation: none; } .dai-btn:hover, .dai-card--interactive:hover { transform: none; } }