/* ========================================================================== DigiTalents — Core stylesheet Design tokens, scoped reset, typography roles and shared chrome. Everything is scoped under .dt so it cannot leak into the WordPress theme. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ .dt { /* Surfaces */ --c-surface: #231c31; --c-surface-dim: #231c31; --c-surface-bright: #454051; --c-surface-container-lowest: #1c162e; --c-surface-container-low: #2a2537; --c-surface-container: #2d293b; --c-surface-container-high: #383343; --c-surface-container-highest: #423d4d; --c-surface-variant: #423d4d; --c-surface-card: rgba(35, 27, 58, 0.72); --c-surface-elevated: rgba(46, 35, 76, 0.65); --c-surface-border: rgba(199, 170, 247, 0.16); --c-background: #231c31; /* Brand / accent */ --c-primary: #dfb7ff; --c-primary-container: #b96bff; --c-on-primary: #4a007e; --c-on-primary-container: #41006f; --c-inverse-primary: #8723d7; --c-secondary: #ffafd6; --c-secondary-container: #920265; --c-on-secondary: #620042; --c-on-secondary-container: #ff9dcf; --c-tertiary: #d5bbff; --c-tertiary-container: #9f83cd; --c-on-tertiary: #3b2265; --c-on-tertiary-container: #341a5e; /* Text */ --c-text-premium-white: #F1ECFA; --c-text-muted-lilac: #B5A7CE; --c-on-surface: #e7dff2; --c-on-surface-variant: #d0c2d6; --c-on-background: #e7dff2; --c-outline: #998ca0; --c-outline-variant: #564b5e; /* Signature gradient */ --c-gradient-start: #A74BF7; --c-gradient-mid-1: #F13EF5; --c-gradient-mid-2: #FB67BC; --c-gradient-end: #FCA488; --c-glow-accent: rgba(241, 62, 245, 0.35); --dt-gradient: linear-gradient( to left, var(--c-gradient-start), var(--c-gradient-mid-1), var(--c-gradient-end) ); --dt-gradient-ltr: linear-gradient( to right, var(--c-gradient-start), var(--c-gradient-mid-1), var(--c-gradient-end) ); /* Status */ --c-error: #ffb4ab; --c-error-container: #93000a; --c-on-error: #690005; --c-on-error-container: #ffdad6; /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-xxl: 4rem; --margin-sm: 1rem; --margin: 2rem; --margin-lg: 4rem; --gutter-sm: 1rem; --gutter: 1.5rem; /* Radii */ --radius: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* Elevation */ --shadow-glow: 0 12px 32px -8px rgba(167, 75, 247, 0.35); --shadow-glow-strong: 0 16px 36px -6px rgba(241, 62, 245, 0.6); --shadow-header: 0 1px 8px rgba(0, 0, 0, 0.25); --shadow-footer: 0 -1px 24px rgba(0, 0, 0, 0.4); --shadow-card: 0 12px 32px -8px rgba(167, 75, 247, 0.35); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Layout */ --container: 1320px; --container-wide: 1360px; --header-height: 5rem; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- 2. Scoped reset Replaces the parts of Tailwind Preflight this markup relied on. -------------------------------------------------------------------------- */ .dt, .dt *, .dt *::before, .dt *::after { box-sizing: border-box; border: 0 solid var(--c-surface-border); } /* On these pages the design replaces the whole document and the theme's stylesheets are dequeued, which leaves with the browser's default white. It shows through on overscroll and behind anything shorter than the viewport. The plugin tags the body with .dt-doc so this stays scoped. Custom properties inherit downward only, so body cannot read --c-surface off .dt: the value is repeated here and must be kept in step with it. */ body.dt-doc { margin: 0; background-color: #231c31; } .dt { margin: 0; min-height: 100vh; background-color: var(--c-surface); color: var(--c-on-surface); font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 24px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; } .dt h1, .dt h2, .dt h3, .dt h4, .dt h5, .dt h6, .dt p, .dt figure, .dt blockquote { margin: 0; font-size: inherit; font-weight: inherit; } .dt ul, .dt ol { margin: 0; padding: 0; list-style: none; } .dt a { color: inherit; text-decoration: inherit; } .dt img, .dt svg, .dt video, .dt canvas, .dt iframe { display: block; vertical-align: middle; max-width: 100%; height: auto; } .dt svg { height: revert-layer; } .dt button, .dt input, .dt select, .dt textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } .dt button, .dt [type="button"], .dt [type="submit"] { background-color: transparent; background-image: none; cursor: pointer; -webkit-appearance: button; } .dt input::placeholder, .dt textarea::placeholder { opacity: 1; color: var(--c-outline); } .dt ::-webkit-scrollbar { display: none; } .dt ::selection { background-color: var(--c-primary-container); color: var(--c-on-primary-container); } .dt-main > :first-child { margin-top: 0 !important; } .dt-main > :last-child { margin-bottom: 0 !important; } /* -------------------------------------------------------------------------- 3. Typography roles -------------------------------------------------------------------------- */ .dt-hero-title { font-size: 40px; line-height: 46px; letter-spacing: -0.02em; font-weight: 800; color: var(--c-text-premium-white); letter-spacing: -0.025em; } .dt-title-lg { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; font-weight: 700; color: var(--c-text-premium-white); } .dt-title-md { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--c-text-premium-white); } .dt-text-lg { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--c-text-muted-lilac); } .dt-text { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--c-text-muted-lilac); } .dt-text-sm { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--c-text-muted-lilac); } .dt-label { font-size: 14px; line-height: 20px; letter-spacing: 0.02em; font-weight: 600; color: var(--c-text-premium-white); } .dt-label-sm { font-size: 12px; line-height: 16px; letter-spacing: 0.04em; font-weight: 600; color: var(--c-text-muted-lilac); } .dt-overline { font-size: 11px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; color: var(--c-text-muted-lilac); } .dt-overline--wide { letter-spacing: 0.1em; text-transform: uppercase; } /* Text colour roles */ .dt-c-white { color: var(--c-text-premium-white); } .dt-c-lilac { color: var(--c-text-muted-lilac); } .dt-c-variant { color: var(--c-on-surface-variant); } .dt-c-surface { color: var(--c-on-surface); } .dt-c-primary { color: var(--c-primary); } .dt-c-accent { color: var(--c-gradient-mid-1); } .dt-c-warm { color: var(--c-gradient-end); } .dt-strong { font-weight: 700; } /* Gradient headline fragment */ .dt-gradient-text { background-image: var(--dt-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (min-width: 768px) { .dt-hero-title { font-size: 64px; line-height: 72px; letter-spacing: -0.03em; } .dt-title-xl { font-size: 44px; line-height: 52px; letter-spacing: -0.02em; } } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .dt-main { width: 100%; padding-top: var(--header-height); background-color: var(--c-surface); } .dt-page { display: flex; flex-direction: column; width: 100%; position: relative; overflow: hidden; color: var(--c-on-surface); } .dt-section { position: relative; width: 100%; padding-inline: var(--margin-sm); padding-block: var(--space-xxl); } @media (min-width: 768px) { .dt-section { padding-inline: var(--margin); } } @media (min-width: 1024px) { .dt-section { padding-inline: var(--margin-lg); } } .dt-section--lowest { background-color: var(--c-surface-container-lowest); } .dt-section--clip { overflow: hidden; } .dt-container { width: 100%; max-width: var(--container); margin-inline: auto; } .dt-stack { display: flex; flex-direction: column; gap: var(--space-md); } .dt-stack--xs { gap: var(--space-xs); } .dt-stack--sm { gap: var(--space-sm); } .dt-stack--xl { gap: var(--space-xl); } .dt-row { display: flex; align-items: center; gap: var(--space-sm); } .dt-row--xs { gap: var(--space-xs); } .dt-row--sm { gap: var(--space-sm); } .dt-row--md { gap: var(--space-md); } .dt-row--between { justify-content: space-between; } /* Ambient background glow orbs */ .dt-glow { position: absolute; border-radius: var(--radius-full); pointer-events: none; z-index: -10; filter: blur(140px); } .dt-glow--a { top: 0; right: 25%; width: 600px; height: 600px; background-color: rgba(167, 75, 247, 0.15); } .dt-glow--b { top: 800px; left: 2.5rem; width: 550px; height: 550px; background-color: rgba(241, 62, 245, 0.1); filter: blur(160px); } .dt-glow--c { top: 2200px; right: 2.5rem; width: 700px; height: 700px; background-color: rgba(252, 164, 136, 0.1); filter: blur(180px); } /* Section header: overline + title on one side, supporting lead on the other */ .dt-section-head { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); text-align: right; } @media (min-width: 768px) { .dt-section-head { flex-direction: row; align-items: flex-end; } } .dt-section-head__group { display: flex; flex-direction: column; gap: var(--space-xs); } .dt-section-head__overline { font-size: 11px; line-height: 14px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: var(--c-gradient-start); } .dt-section-head__overline--accent { color: var(--c-gradient-mid-1); } .dt-section-head__overline--pink { color: var(--c-secondary); } .dt-section-head__title { font-size: 32px; line-height: 38px; letter-spacing: -0.01em; font-weight: 700; color: var(--c-text-premium-white); } @media (min-width: 768px) { .dt-section-head__title { font-size: 44px; line-height: 52px; letter-spacing: -0.02em; } } .dt-section-head__lead { font-size: 15px; line-height: 24px; color: var(--c-on-surface-variant); max-width: 28rem; } .dt-section-head__lead--lilac { color: var(--c-text-muted-lilac); } .dt-section-head__lead--wide { max-width: 32rem; } /* Inline "see all" link with trailing arrow */ .dt-more-link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: 14px; line-height: 20px; letter-spacing: 0.02em; font-weight: 600; color: var(--c-primary); transition: color 150ms var(--ease); } .dt-more-link:hover { color: var(--c-text-premium-white); } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .dt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border-radius: var(--radius-full); font-size: 14px; line-height: 20px; letter-spacing: 0.02em; font-weight: 600; text-align: center; transition: all 300ms var(--ease); } /* Solid gradient call to action */ .dt-btn--primary { position: relative; padding: var(--space-md) var(--space-xl); background-image: var(--dt-gradient-ltr); color: var(--c-surface-container-lowest); font-weight: 700; box-shadow: 0 12px 32px -8px rgba(167, 75, 247, 0.45); } .dt-btn--primary:hover { transform: scale(1.02); box-shadow: var(--shadow-glow-strong); } /* Glass secondary */ .dt-btn--ghost { padding: var(--space-md) var(--space-lg); background-color: var(--c-surface-card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--c-text-premium-white); transition: all 200ms var(--ease); } .dt-btn--ghost:hover { background-color: var(--c-surface-elevated); } /* Gradient-ring pill used by the header CTA */ .dt-btn--ring { position: relative; padding: 2px; overflow: hidden; box-shadow: var(--shadow-glow); } .dt-btn__ring-fill { position: absolute; inset: 0; width: 100%; height: 100%; background-image: var(--dt-gradient-ltr); transition: all 300ms var(--ease); } .dt-btn__ring-label { position: relative; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-full); background-color: var(--c-surface-container-lowest); color: var(--c-text-premium-white); transition: all 300ms var(--ease); } .dt-btn--ring:hover .dt-btn__ring-label { background-color: transparent; } /* Arrow nudge on hover */ .dt-btn__arrow { transition: transform 200ms var(--ease); } .dt-btn:hover .dt-btn__arrow { transform: translateX(-0.25rem); } /* -------------------------------------------------------------------------- 6. Pills, badges and chips -------------------------------------------------------------------------- */ .dt-pill { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); background-color: var(--c-surface-card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); font-size: 11px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase; color: var(--c-text-premium-white); } .dt-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); background-color: var(--c-surface-container); color: var(--c-text-muted-lilac); font-size: 11px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; } /* Live status dot */ .dt-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background-color: var(--c-gradient-mid-1); flex: none; } .dt-dot--ping { animation: dt-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } .dt-dot--pulse { animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* -------------------------------------------------------------------------- 7. Surfaces and cards -------------------------------------------------------------------------- */ .dt-card { position: relative; border-radius: var(--radius-xl); background-color: var(--c-surface-card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); padding: var(--space-lg); } /* Top sheen line used on glass panels */ .dt-sheen { position: absolute; top: 0; inset-inline: 0; height: 1px; background-image: linear-gradient( to right, transparent, rgba(241, 62, 245, 0.6), transparent ); } /* -------------------------------------------------------------------------- 8. Icons -------------------------------------------------------------------------- */ .dt-icon { font-size: 1rem; line-height: 1.5rem; } .dt-icon--xs { font-size: 0.75rem; line-height: 1rem; } .dt-icon--sm { font-size: 0.875rem; line-height: 1.25rem; } .dt-icon--md { font-size: 1rem; line-height: 1.5rem; } .dt-icon--16 { font-size: 16px; } .dt-icon--18 { font-size: 18px; } .dt-icon--lg { font-size: 1.25rem; line-height: 1.75rem; } .dt-icon--20 { font-size: 20px; } .dt-icon--xl { font-size: 1.5rem; line-height: 2rem; } .dt-icon--28 { font-size: 28px; } .dt-icon--filled { font-variation-settings: "FILL" 1; } /* Small circular icon button */ .dt-icon-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background-color: var(--c-surface-container); color: var(--c-text-muted-lilac); cursor: pointer; font-size: 11px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; transition: all 150ms var(--ease); flex: none; } .dt-icon-btn:hover { background-color: var(--c-surface-container-high); color: var(--c-on-surface); } /* -------------------------------------------------------------------------- 9. Header and navigation -------------------------------------------------------------------------- */ .dt-header { position: fixed; top: 0; inset-inline: 0; z-index: 50; background-color: rgba(35, 28, 49, 0.8); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow-header); } .dt-header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--header-height); /* The export used 4rem at every width, which eats a third of a phone screen. With a full wordmark logo in the bar that overflows, so it scales now. */ padding-inline: var(--margin-sm); } @media (min-width: 640px) { .dt-header__inner { padding-inline: var(--margin); } } @media (min-width: 1024px) { .dt-header__inner { padding-inline: var(--margin-lg); } } .dt-header__start { display: flex; align-items: center; gap: var(--space-lg); } .dt-brand { display: flex; align-items: center; gap: var(--space-sm); } /* A brand logo is rarely square, so the box is driven by height and the image is never cropped. The extra .dt raises specificity above the `.dt img` reset, which would otherwise force height:auto. (The original export used a circular cover-crop because its placeholder was an avatar photo — wrong geometry for a logo.) */ /* The wordmark is ~5.2:1, so max-width has to clear the widest rendering (36px tall -> 186px) or it would clamp the height instead. */ .dt .dt-brand__mark { height: 1.5rem; width: auto; max-width: 240px; object-fit: contain; flex: none; } @media (min-width: 640px) { .dt .dt-brand__mark { height: 2rem; } } .dt-brand__name { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; color: var(--c-text-premium-white); } .dt-brand__tag { font-size: 11px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase; color: var(--c-text-muted-lilac); } .dt-nav { display: none; align-items: center; gap: var(--space-md); } @media (min-width: 1024px) { .dt-nav { display: flex; } } .dt-nav__link { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-lg); font-size: 14px; line-height: 20px; letter-spacing: 0.02em; font-weight: 600; color: var(--c-on-surface-variant); transition: color 150ms var(--ease); } .dt-nav__link:hover, .dt-nav__group:hover > .dt-nav__link { color: var(--c-on-surface); } .dt-nav__link[aria-current="page"] { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); background-color: var(--c-primary-container); color: var(--c-on-primary-container); box-shadow: 0 0 16px rgba(185, 107, 255, 0.4); } /* Services dropdown */ .dt-nav__group { position: relative; } /* The menu opens a few pixels below its trigger, and that gap belonged to neither: the pointer crossed it, :hover ended, and the menu closed before it could be reached. This bridges the gap, and is wide enough to cover the menu below it so a diagonal reach works too. It exists only while this group is open, so the two adjacent dropdowns can never both be triggered by one overlapping strip. */ .dt-nav__group:hover::after, .dt-nav__group:focus-within::after { content: ""; position: absolute; top: 100%; right: 0; width: 14rem; height: var(--space-sm); } .dt-nav__menu { position: absolute; right: 0; top: 100%; margin-top: var(--space-xs); width: 12rem; display: none; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius-xl); background-color: var(--c-surface-elevated); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: 0 12px 32px -8px rgba(167, 75, 247, 0.35); } .dt-nav__group:hover .dt-nav__menu, .dt-nav__group:focus-within .dt-nav__menu { display: flex; } .dt-nav__menu-link { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); font-size: 12px; line-height: 16px; letter-spacing: 0.04em; font-weight: 600; color: var(--c-on-surface-variant); transition: color 150ms var(--ease), background-color 150ms var(--ease); } .dt-nav__menu-link:hover { background-color: var(--c-surface-container-high); color: var(--c-text-premium-white); } .dt-nav__menu-link[aria-current="page"] { background-color: var(--c-primary-container); color: var(--c-on-primary-container); } /* Deep header variant: darker bar, brand glow, tagline pill, two dropdowns */ .dt-header--deep { background-color: rgba(24, 17, 43, 0.85); box-shadow: 0 1px 16px rgba(0, 0, 0, 0.35); } .dt-header--deep .dt-header__start { gap: var(--space-xl); } .dt-brand--hover .dt-brand__name { transition: color 150ms var(--ease); } .dt-brand--hover:hover .dt-brand__name { color: var(--c-primary); } /* drop-shadow follows the logo's alpha channel; box-shadow would draw a glowing rectangle around the bounding box of a transparent PNG. */ .dt .dt-brand__mark--glow { filter: drop-shadow(0 0 12px rgba(167, 75, 247, 0.45)); } @media (min-width: 640px) { .dt .dt-brand__mark--glow { height: 2.25rem; } } /* Interim brand mark. Replace with the real logo image when it is supplied: swap the back to and drop these rules. */ .dt-brand__monogram { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; padding-inline: 0.7rem; border-radius: var(--radius-lg); background-image: var(--dt-gradient-ltr); color: var(--c-surface-container-lowest); font-size: 15px; line-height: 1; font-weight: 800; letter-spacing: 0.06em; flex: none; } .dt-brand__monogram--glow { box-shadow: 0 0 16px rgba(167, 75, 247, 0.35); } .dt-footer__monogram { display: inline-flex; align-items: center; justify-content: center; height: 1.75rem; padding-inline: 0.55rem; border-radius: var(--radius); background-image: var(--dt-gradient-ltr); color: var(--c-surface-container-lowest); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.06em; flex: none; } .dt-header__tagline { display: none; align-items: center; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); border-width: 1px; border-color: var(--c-surface-border); background-color: rgb(42 37 55 / 0.7); } @media (min-width: 1280px) { .dt-header__tagline { display: inline-flex; } } .dt-header__tagline-dot { width: 0.375rem; height: 0.375rem; margin-left: var(--space-xs); border-radius: var(--radius-full); background-color: var(--c-gradient-mid-1); animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; flex: none; } .dt-nav--tight { gap: var(--space-xs); } .dt-nav__menu--wide { width: 13rem; border-width: 1px; border-color: var(--c-surface-border); box-shadow: 0 16px 36px -8px rgba(167, 75, 247, 0.35); } .dt-nav__menu--wider { width: 14rem; border-width: 1px; border-color: var(--c-surface-border); box-shadow: 0 16px 36px -8px rgba(167, 75, 247, 0.35); } .dt-btn--ring-strong { box-shadow: 0 12px 32px -8px rgba(167, 75, 247, 0.45); } .dt-btn--ring-strong:hover { box-shadow: 0 16px 40px -6px rgba(241, 62, 245, 0.55); } /* -------------------------------------------------------------------------- 10. Footer -------------------------------------------------------------------------- */ .dt-footer { width: 100%; background-color: var(--c-surface-container-lowest); padding-block: var(--space-xxl); box-shadow: var(--shadow-footer); } .dt-footer--soft { box-shadow: 0 -1px 16px rgba(0, 0, 0, 0.3); } .dt-footer__inner { width: 100%; margin-inline: auto; padding-inline: var(--margin-sm); } @media (min-width: 1024px) { .dt-footer__inner { padding-inline: var(--margin-lg); } } .dt-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); padding-bottom: var(--space-xl); } @media (min-width: 768px) { .dt-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .dt-footer__grid { grid-template-columns: repeat(5, 1fr); } .dt-footer__brand { grid-column: span 2 / span 2; } } .dt-footer__brand { display: flex; flex-direction: column; gap: var(--space-md); } .dt-footer__col { display: flex; flex-direction: column; gap: var(--space-sm); } .dt-footer__spark { width: 0.75rem; height: 0.75rem; border-radius: var(--radius-full); background-image: linear-gradient( to top right, var(--c-gradient-start), var(--c-gradient-mid-1), var(--c-gradient-end) ); animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; flex: none; } .dt-footer__legal { display: flex; align-items: center; gap: var(--space-lg); } .dt .dt-footer__mark { height: 1.75rem; width: auto; max-width: 200px; object-fit: contain; flex: none; } .dt-footer__blurb { max-width: 24rem; } .dt-footer__social { padding-top: var(--space-xs); } .dt-footer__chips { padding-top: var(--space-xs); } .dt-footer__title { font-size: 14px; line-height: 20px; letter-spacing: 0.02em; font-weight: 600; color: var(--c-text-premium-white); } .dt-footer__link { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--c-on-surface-variant); transition: color 150ms var(--ease); } .dt-footer__link:hover { color: var(--c-on-surface); } .dt-footer__bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); color: var(--c-on-surface-variant); } @media (min-width: 640px) { .dt-footer__bottom { flex-direction: row; } } /* -------------------------------------------------------------------------- 11. Forms -------------------------------------------------------------------------- */ .dt-field { display: flex; flex-direction: column; gap: var(--space-xs); } /* -------------------------------------------------------------------------- 12. Animations -------------------------------------------------------------------------- */ @keyframes dt-ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes dt-pulse { 50% { opacity: 0.5; } } @keyframes dt-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } @keyframes dt-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 13. Accessibility -------------------------------------------------------------------------- */ .dt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } @media (prefers-reduced-motion: reduce) { .dt *, .dt *::before, .dt *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }