diff --git a/about/carousel-card-list-showcase.page.tsx b/about/carousel-card-list-showcase.page.tsx index 1669d915e8..a5da208c3a 100644 --- a/about/carousel-card-list-showcase.page.tsx +++ b/about/carousel-card-list-showcase.page.tsx @@ -1,5 +1,6 @@ import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid"; import { CarouselCardList } from "shared/patterns/CarouselCardList"; +import { CarouselButton } from "shared/components/CarouselButton"; import { Divider } from "shared/components/Divider"; export const frontmatter = { @@ -351,7 +352,84 @@ export default function CarouselCardListShowcase() { - + {/* Button Visual Showcase */} + + + +

Button Visual Showcase

+

Interactive carousel buttons showing all variants and states.

+ + {/* Grey/Neutral Buttons */} +
+
Grey (Neutral) Buttons
+
+
+ +
Enabled
+
+
+ +
Enabled
+
+
+ +
Disabled
+
+
+ +
Disabled
+
+
+
+ + {/* Green Buttons */} +
+
Green Buttons
+
+
+ +
Enabled
+
+
+ +
Enabled
+
+
+ +
Disabled
+
+
+ +
Disabled
+
+
+
+ + {/* Black Buttons */} +
+
Black Buttons
+
+
+ +
Enabled
+
+
+ +
Enabled
+
+
+ +
Disabled
+
+
+ +
Disabled
+
+
+
+ + + {/* Spacing Tokens */} diff --git a/about/carousel-featured-showcase.page.tsx b/about/carousel-featured-showcase.page.tsx new file mode 100644 index 0000000000..e702eacedc --- /dev/null +++ b/about/carousel-featured-showcase.page.tsx @@ -0,0 +1,365 @@ +import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid"; +import { CarouselFeatured, type CarouselSlide, type CarouselFeatureItem } from "shared/patterns/CarouselFeatured"; +import { Divider } from "shared/components/Divider"; + +export const frontmatter = { + seo: { + title: 'CarouselFeatured Pattern Showcase', + description: "A comprehensive showcase of the CarouselFeatured pattern component demonstrating featured image carousels with navigation, background variants, and responsive behavior in the XRPL.org Design System.", + } +}; + +// Sample image URL for demonstration +const SAMPLE_IMAGE = "/img/demo-bg.png"; + +// Sample slides data +const sampleSlides: CarouselSlide[] = [ + { + id: 1, + imageSrc: SAMPLE_IMAGE, + imageAlt: "Featured slide 1 - XRPL Overview", + }, + { + id: 2, + imageSrc: SAMPLE_IMAGE, + imageAlt: "Featured slide 2 - Developer Tools", + }, + { + id: 3, + imageSrc: SAMPLE_IMAGE, + imageAlt: "Featured slide 3 - Enterprise Solutions", + }, +]; + +// Sample features data (matching Figma design) +const sampleFeatures: CarouselFeatureItem[] = [ + { + title: "Easy-to-Integrate APIs", + description: "Build with common languages and skip complex smart contract development", + }, + { + title: "Full Lifecycle Support", + description: "From dev tools and testnets to deployment and growth-stage", + }, + { + title: "Enterprise-Grade Security", + description: "Battle-tested infrastructure with 12+ years of continuous uptime", + }, +]; + +export default function CarouselFeaturedShowcase() { + return ( +
+
+ {/* Hero Section */} +
+
+
Pattern Showcase
+

CarouselFeatured Pattern

+

+ A featured image carousel with two-column layout on desktop (image left, content right) + and single-column layout on tablet/mobile (content top, image bottom). +

+
+
+ + {/* Feature Overview */} + + + +

Features

+
+
+
Layout
+
    +
  • Two-column layout on desktop
    • +
  • Image left, content right
    • +
  • Feature list with dividers
    • +
  • Primary + tertiary buttons
    • +
+
+
+
Background Colors
+
    +
  • gray-200 (#E6EAF0) - default
    • +
  • gray-300 (#CAD4DF) - neutral
    • +
  • black (#141414) - dark
    • +
  • yellow-100 (#F3F1EB) - warm
    • +
+
+
+
Content
+
    +
  • Heading (h-md typography)
    • +
  • Feature list items
    • +
  • Primary button (black pill)
    • +
  • Tertiary link (optional)
    • +
+
+
+
Responsive
+
    +
  • Mobile: Single column, content top
    • +
  • Tablet: Single column, content top
    • +
  • Desktop: Two columns, image left
    • +
+
+
+ + + + + + + {/* Default: gray-200 background */} +
+ + + +

Grey Background

+

+ background="grey" - Light neutral background, the default option. + Light mode: gray-200 (#E6EAF0), Dark mode: gray-300 (#CAD4DF). +

+ + + + +
+ + + + {/* neutral background */} +
+ + + +

Neutral Background

+

+ background="neutral" - High contrast neutral background. + Light mode: white (#FFF), Dark mode: black (#141414). +

+ + + + +
+ + + + {/* yellow background */} +
+ + + +

Yellow Background

+

+ background="yellow" - Warm secondary background color. + Same in both modes: yellow-100 (#F3F1EB). +

+ + + + +
+ + + + {/* Single button example */} +
+ + + +

Single Button (Same Line on Mobile)

+

+ When only one button is provided, the button and carousel navigation + stay on the same line on mobile instead of stacking. +

+ + + + +
+ + + + {/* API Reference */} + + + +

Component API

+ +
CarouselFeaturedProps
+
+
+
Prop
+
Type
+
Default
+
Description
+
+ +
+
heading
+
string
+
required
+
Section heading text
+
+ + +
+
features
+
CarouselFeatureItem[]
+
required
+
Array of feature items with title and description
+
+ + +
+
primaryButton
+
ButtonConfig
+
optional
+
Primary button configuration (uses ButtonGroup)
+
+ + +
+
tertiaryButton
+
ButtonConfig
+
optional
+
Tertiary button configuration (uses ButtonGroup)
+
+ + +
+
slides
+
CarouselSlide[]
+
required
+
Array of slide configurations
+
+ + +
+
background
+
'grey' | 'neutral' | 'yellow'
+
'grey'
+
Background color variant (adapts to light/dark mode)
+
+
+ +
CarouselSlide
+
+
+
Prop
+
Type
+
Required
+
Description
+
+ +
+
id
+
string | number
+
Yes
+
Unique identifier for the slide
+
+ + +
+
imageSrc
+
string
+
Yes
+
Image source URL
+
+ + +
+
imageAlt
+
string
+
Yes
+
Alt text for the image
+
+
+ +
CarouselFeatureItem
+
+
+
Prop
+
Type
+
Required
+
Description
+
+ +
+
title
+
string
+
Yes
+
Feature title text
+
+ + +
+
description
+
string
+
Yes
+
Feature description text
+
+
+ + + + + {/* Design References */} + + + +

Design References

+
+ +
+ Component Location:{' '} + shared/patterns/CarouselFeatured/ +
+
+ Shared Button Component:{' '} + shared/components/CarouselButton/ +
+
+ + + +
+
+ ); +} + diff --git a/shared/components/Button/Button.scss b/shared/components/Button/Button.scss index 500f5d7588..dd6562166f 100644 --- a/shared/components/Button/Button.scss +++ b/shared/components/Button/Button.scss @@ -553,41 +553,41 @@ html.dark { stroke: $green-300; } - // Hover state + // Hover state - use !important to override light mode global styles &:hover:not(:disabled):not(.bds-btn--disabled) { - color: $green-200; - + color: $green-200 !important; + .bds-btn__icon, .bds-btn__icon-line, .bds-btn__icon-chevron { - color: $green-200; - stroke: $green-200; + color: $green-200 !important; + stroke: $green-200 !important; } } - // Focus state + // Focus state - use !important to override light mode global styles &:focus-visible:not(:disabled):not(.bds-btn--disabled) { - color: $green-200; + color: $green-200 !important; outline: $bds-btn-focus-border-width solid $white; outline-offset: 2px; - + .bds-btn__icon, .bds-btn__icon-line, .bds-btn__icon-chevron { - color: $green-200; - stroke: $green-200; + color: $green-200 !important; + stroke: $green-200 !important; } } - // Active state + // Active state - use !important to override light mode global styles &:active:not(:disabled):not(.bds-btn--disabled) { - color: $green-300; - + color: $green-300 !important; + .bds-btn__icon, .bds-btn__icon-line, .bds-btn__icon-chevron { - color: $green-300; - stroke: $green-300; + color: $green-300 !important; + stroke: $green-300 !important; } } diff --git a/shared/components/CarouselButton/CarouselButton.scss b/shared/components/CarouselButton/CarouselButton.scss new file mode 100644 index 0000000000..50f173d541 --- /dev/null +++ b/shared/components/CarouselButton/CarouselButton.scss @@ -0,0 +1,244 @@ +// BDS CarouselButton Component Styles +// Brand Design System - Circular navigation button for carousels +// +// Naming Convention: BEM with 'bds' namespace +// .bds-carousel-button - Base button +// .bds-carousel-button--prev - Previous/left direction +// .bds-carousel-button--next - Next/right direction +// .bds-carousel-button--neutral - Neutral/gray color variant +// .bds-carousel-button--green - Green color variant +// .bds-carousel-button--black - Black/white color variant +// .bds-carousel-button--disabled - Disabled state modifier +// .bds-carousel-button__arrow-icon - Arrow icon element +// +// Note: This file is imported within xrpl.scss after Bootstrap and project +// variables are loaded, so $grid-breakpoints, colors, and mixins are available. + +// ============================================================================= +// Design Tokens +// ============================================================================= + +// Button dimensions +$bds-carousel-button-size-sm: 37px; // Mobile/Tablet +$bds-carousel-button-size-lg: 40px; // Desktop + +// Transition +$bds-carousel-button-transition: 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + +// ============================================================================= +// Base Button Styles +// ============================================================================= + +.bds-carousel-button { + // Reset button styles + appearance: none; + border: none; + background: none; + padding: 0; + margin: 0; + cursor: pointer; + + // Layout + display: flex; + align-items: center; + justify-content: center; + width: $bds-carousel-button-size-sm; + height: $bds-carousel-button-size-sm; + + // Transition + transition: background-color $bds-carousel-button-transition, + opacity $bds-carousel-button-transition; + + @include media-breakpoint-up(lg) { + width: $bds-carousel-button-size-lg; + height: $bds-carousel-button-size-lg; + } + + // Focus styles + &:focus { + outline: 2px solid $white; + outline-offset: 2px; + } + + &:focus:not(:focus-visible) { + outline: none; + } + + &:focus-visible { + outline: 2px solid $white; + outline-offset: 2px; + } +} + +// ============================================================================= +// Arrow Icon +// ============================================================================= + +.bds-carousel-button__arrow-icon { + width: 18px; + height: 16px; + + @include media-breakpoint-down(lg) { + width: 18px; + height: 15px; + } +} + +// ============================================================================= +// DARK MODE (Default) - Color Variants +// ============================================================================= + +// Green button variant - Dark Mode +// Enabled: green-300, Hover: green-400, Active/Pressed: green-300, Disabled: green-500 @ 0.5 opacity +.bds-carousel-button--green { + background-color: $green-300; + color: $black; + + &:hover:not(:disabled) { + background-color: $green-400; + } + + &:active:not(:disabled) { + background-color: $green-300; + } + + &.bds-carousel-button--disabled, + &:disabled { + background-color: $green-500 !important; + color: #F0F3F7 !important; + opacity: 0.5 !important; + cursor: not-allowed !important; + } +} + +// Neutral/Grey button variant - Dark Mode +// Enabled: gray-300, Hover: gray-400, Active/Pressed: gray-300, Disabled: gray-500 @ 0.5 opacity +.bds-carousel-button--neutral { + background-color: $gray-300; + color: $black; + + &:hover:not(:disabled) { + background-color: $gray-400; + } + + &:active:not(:disabled) { + background-color: $gray-300; + } + + &.bds-carousel-button--disabled, + &:disabled { + background-color: $gray-500 !important; + color: $gray-300 !important; + opacity: 0.5 !important; + cursor: not-allowed !important; + } +} + +// Black variant becomes White in Dark Mode +// Enabled: white, Hover: gray-300, Active/Pressed: white, Disabled: gray-500 @ 0.5 opacity +.bds-carousel-button--black { + background-color: $white; + color: $black; + + &:hover:not(:disabled) { + background-color: $gray-300; + } + + &:active:not(:disabled) { + background-color: $white; + } + + &.bds-carousel-button--disabled, + &:disabled { + background-color: $gray-500 !important; + opacity: 0.5 !important; + cursor: not-allowed !important; + } +} + +// ============================================================================= +// LIGHT MODE (html.light) - Color Variants +// ============================================================================= + +html.light { + // Focus styles - Light Mode + .bds-carousel-button { + &:focus { + outline-color: $gray-900; + } + + &:focus-visible { + outline-color: $gray-900; + } + } + + // Green button variant - Light Mode + // Enabled: green-300, Hover: green-200, Active/Pressed: green-300, Disabled: green-100 + .bds-carousel-button--green { + background-color: $green-300; + color: $black; + + &:hover:not(:disabled) { + background-color: $green-200; + } + + &:active:not(:disabled) { + background-color: $green-300; + } + + &.bds-carousel-button--disabled, + &:disabled { + background-color: $green-100 !important; + color: $gray-300 !important; + opacity: 1 !important; + cursor: not-allowed !important; + } + } + + // Neutral/Grey button variant - Light Mode + // Enabled: gray-300, Hover: gray-200, Active/Pressed: gray-300, Disabled: gray-100 + .bds-carousel-button--neutral { + background-color: $gray-300; + color: $black; + + &:hover:not(:disabled) { + background-color: $gray-200; + } + + &:active:not(:disabled) { + background-color: $gray-300; + } + + &.bds-carousel-button--disabled, + &:disabled { + background-color: $gray-100 !important; + color: $gray-300 !important; + opacity: 1 !important; + cursor: not-allowed !important; + } + } + + // Black button variant - Light Mode + // Enabled: black, Hover: gray-500, Active/Pressed: black, Disabled: #F0F3F7 + .bds-carousel-button--black { + background-color: $black; + color: $white; + + &:hover:not(:disabled) { + background-color: $gray-500; + } + + &:active:not(:disabled) { + background-color: $black; + } + + &.bds-carousel-button--disabled, + &:disabled { + background-color: #F0F3F7 !important; + color: $gray-300 !important; + opacity: 1 !important; + cursor: not-allowed !important; + } + } +} + diff --git a/shared/components/CarouselButton/CarouselButton.tsx b/shared/components/CarouselButton/CarouselButton.tsx new file mode 100644 index 0000000000..577ceaaf3f --- /dev/null +++ b/shared/components/CarouselButton/CarouselButton.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import clsx from 'clsx'; + +/** + * Props for the CarouselButton component + */ +export interface CarouselButtonProps extends React.ButtonHTMLAttributes { + /** Arrow direction */ + direction: 'prev' | 'next'; + /** Color variant */ + variant: 'neutral' | 'green' | 'black'; +} + +/** + * CarouselButton Component + * + * A circular navigation button for carousel components. + * Displays left/right arrow icons and supports multiple color variants. + * + * @example + * ```tsx + * scroll('prev')} + * disabled={!canScrollPrev} + * aria-label="Previous items" + * /> + * ``` + */ +export const CarouselButton: React.FC = ({ + direction, + variant, + disabled, + className, + ...buttonProps +}) => { + return ( + + ); +}; + +CarouselButton.displayName = 'CarouselButton'; + +/** + * SVG Arrow Icon for carousel navigation - Right arrow + */ +export const CarouselArrowIconRight: React.FC = () => ( + +); + +CarouselArrowIconRight.displayName = 'CarouselArrowIconRight'; + +/** + * SVG Arrow Icon for carousel navigation - Left arrow + */ +export const CarouselArrowIconLeft: React.FC = () => ( + +); + +CarouselArrowIconLeft.displayName = 'CarouselArrowIconLeft'; + +export default CarouselButton; + diff --git a/shared/components/CarouselButton/index.ts b/shared/components/CarouselButton/index.ts new file mode 100644 index 0000000000..0ca1437515 --- /dev/null +++ b/shared/components/CarouselButton/index.ts @@ -0,0 +1,8 @@ +export { + CarouselButton, + CarouselArrowIconLeft, + CarouselArrowIconRight, + type CarouselButtonProps +} from './CarouselButton'; +export { default } from './CarouselButton'; + diff --git a/shared/patterns/CarouselCardList/CarouselCardList.scss b/shared/patterns/CarouselCardList/CarouselCardList.scss index d90c3869d7..cef7de48c5 100644 --- a/shared/patterns/CarouselCardList/CarouselCardList.scss +++ b/shared/patterns/CarouselCardList/CarouselCardList.scss @@ -10,10 +10,11 @@ // .bds-carousel-card-list__heading - Section heading (uses .h-md) // .bds-carousel-card-list__description - Section description (uses .body-l) // .bds-carousel-card-list__nav - Navigation buttons wrapper -// .bds-carousel-card-list__button - Navigation button // .bds-carousel-card-list__track-wrapper - Scroll container wrapper // .bds-carousel-card-list__track - Horizontal scroll track // .bds-carousel-card-list__card - Individual card wrapper +// +// Note: Navigation button styles are in shared/components/CarouselButton/CarouselButton.scss // ============================================================================= // Design Tokens (from Figma) @@ -42,9 +43,7 @@ $bds-carousel-cards-gap-sm: 24px; // Mobile $bds-carousel-cards-gap-md: 32px; // Tablet $bds-carousel-cards-gap-lg: 40px; // Desktop -// Button dimensions -$bds-carousel-button-size-sm: 37px; // Mobile/Tablet -$bds-carousel-button-size-lg: 40px; // Desktop +// Button gap (button styles are in shared/components/CarouselButton) $bds-carousel-button-gap: 8px; // Card dimensions per breakpoint @@ -149,62 +148,6 @@ $bds-carousel-transition: 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); margin: -4px; } -// ============================================================================= -// Navigation Buttons -// ============================================================================= - -.bds-carousel-card-list__button { - // Reset button styles - appearance: none; - border: none; - background: none; - padding: 0; - margin: 0; - cursor: pointer; - - // Layout - display: flex; - align-items: center; - justify-content: center; - width: $bds-carousel-button-size-sm; - height: $bds-carousel-button-size-sm; - - // Transition - transition: background-color $bds-carousel-transition, - opacity $bds-carousel-transition; - - @include media-breakpoint-up(lg) { - width: $bds-carousel-button-size-lg; - height: $bds-carousel-button-size-lg; - } - - // Focus styles - &:focus { - outline: 2px solid $white; - outline-offset: 2px; - } - - &:focus:not(:focus-visible) { - outline: none; - } - - &:focus-visible { - outline: 2px solid $white; - outline-offset: 2px; - } -} - -// Arrow icon -.bds-carousel-card-list__arrow-icon { - width: 18px; - height: 16px; - - @include media-breakpoint-down(lg) { - width: 18px; - height: 15px; - } -} - // ============================================================================= // Scroll Track // ============================================================================= @@ -326,99 +269,11 @@ $bds-carousel-transition: 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } } -// ============================================================================= -// DARK MODE (Default) - Button Color Variants -// Button colors are independent of card colors - use buttonVariant prop -// ============================================================================= - -// Neutral button variant - Dark Mode -// Enabled: #CAD4DF (gray-300), Hover: #E6EAF0 (gray-200), Active: #CAD4DF (gray-300) -// Disabled: opacity 0.5 -.bds-carousel-card-list__button--neutral { - background-color: $gray-300; // #CAD4DF - color: $black; // #141414 - - &:hover:not(:disabled) { - background-color: $gray-200; // #E6EAF0 - } - - &:active:not(:disabled) { - background-color: $gray-300; // #CAD4DF (same as enabled) - } - - &.bds-carousel-card-list__button--disabled, - &:disabled { - background-color: $gray-300; // #CAD4DF - color: $gray-400; // #8A919A - opacity: 0.5; - cursor: not-allowed; - } -} - -// Green button variant - Dark Mode -// Enabled: #21E46B (green-300), Hover: #70EE97 (green-200), Active: #21E46B (green-300) -// Disabled: opacity 0.5 -.bds-carousel-card-list__button--green { - background-color: $green-300; // #21E46B - color: $black; // #141414 - - &:hover:not(:disabled) { - background-color: $green-200; // #70EE97 - } - - &:active:not(:disabled) { - background-color: $green-300; // #21E46B (same as enabled) - } - - &.bds-carousel-card-list__button--disabled, - &:disabled { - background-color: $green-300; // #21E46B - color: $gray-400; // #8A919A - opacity: 0.5; - cursor: not-allowed; - } -} - -// Black variant becomes White in Dark Mode (inverts for contrast) -// Enabled: #FFFFFF (white), Hover: #E6EAF0 (gray-200), Active: #FFFFFF (white) -// Disabled: opacity 0.5 -.bds-carousel-card-list__button--black { - background-color: $white; // #FFFFFF - color: $black; // #141414 - - &:hover:not(:disabled) { - background-color: $gray-200; // #E6EAF0 - } - - &:active:not(:disabled) { - background-color: $white; // #FFFFFF (same as enabled) - } - - &.bds-carousel-card-list__button--disabled, - &:disabled { - background-color: $white; // #FFFFFF - color: $gray-400; // #8A919A - opacity: 0.5; - cursor: not-allowed; - } -} - // ============================================================================= // LIGHT MODE (html.light) - Color Variants // ============================================================================= html.light { - // Focus styles - Light Mode - .bds-carousel-card-list__button { - &:focus { - outline-color: $gray-900; - } - - &:focus-visible { - outline-color: $gray-900; - } - } - .bds-carousel-card-list__track { &:focus-visible { outline-color: $gray-900; @@ -433,82 +288,5 @@ html.light { color: $black; } } - - // --------------------------------------------------------------------------- - // Button Color Variants - Light Mode - // Button colors are independent of card colors - use buttonVariant prop - // --------------------------------------------------------------------------- - - // Neutral button variant - Light Mode - // Enabled: #CAD4DF (gray-300), Hover: #E6EAF0 (gray-200), Active: #CAD4DF (gray-300) - // Disabled: opacity 0.5 - .bds-carousel-card-list__button--neutral { - background-color: $gray-300; // #CAD4DF - color: $black; // #141414 - - &:hover:not(:disabled) { - background-color: $gray-200; // #E6EAF0 - } - - &:active:not(:disabled) { - background-color: $gray-300; // #CAD4DF (same as enabled) - } - - &.bds-carousel-card-list__button--disabled, - &:disabled { - background-color: $gray-300; // #CAD4DF - color: $gray-400; // #8A919A - opacity: 0.5; - cursor: not-allowed; - } - } - - // Green button variant - Light Mode - // Enabled: #21E46B (green-300), Hover: #70EE97 (green-200), Active: #21E46B (green-300) - // Disabled: opacity 0.5 - .bds-carousel-card-list__button--green { - background-color: $green-300; // #21E46B - color: $black; // #141414 - - &:hover:not(:disabled) { - background-color: $green-200; // #70EE97 - } - - &:active:not(:disabled) { - background-color: $green-300; // #21E46B (same as enabled) - } - - &.bds-carousel-card-list__button--disabled, - &:disabled { - background-color: $green-300; // #21E46B - color: $gray-400; // #8A919A - opacity: 0.5; - cursor: not-allowed; - } - } - - // Black variant in Light Mode (stays black for contrast) - // Enabled: #141414 (black), Hover: #72777E (gray-500), Active: #141414 (black) - // Disabled: opacity 0.5 - .bds-carousel-card-list__button--black { - background-color: $black; // #141414 - color: $white; // #FFFFFF - - &:hover:not(:disabled) { - background-color: $gray-500; // #72777E - } - - &:active:not(:disabled) { - background-color: $black; // #141414 (same as enabled) - } - - &.bds-carousel-card-list__button--disabled, - &:disabled { - background-color: $black; // #141414 - color: $gray-400; // #8A919A - opacity: 0.5; - cursor: not-allowed; - } - } } diff --git a/shared/patterns/CarouselCardList/CarouselCardList.tsx b/shared/patterns/CarouselCardList/CarouselCardList.tsx index daa670335e..e71942f4df 100644 --- a/shared/patterns/CarouselCardList/CarouselCardList.tsx +++ b/shared/patterns/CarouselCardList/CarouselCardList.tsx @@ -1,6 +1,7 @@ import React, { useRef, useState, useCallback, useEffect } from 'react'; import clsx from 'clsx'; import { CardOffgrid, CardOffgridProps } from '../../components/CardOffgrid'; +import { CarouselButton } from '../../components/CarouselButton'; import type { ButtonProps } from '../../components/Button'; /** @@ -170,87 +171,5 @@ export const CarouselCardList = React.forwardRef { - /** Arrow direction */ - direction: 'prev' | 'next'; - /** Color variant (independent of card color) */ - variant: 'neutral' | 'green' | 'black'; -} - -/** - * Internal CarouselButton component for navigation - */ -const CarouselButton: React.FC = ({ - direction, - variant, - disabled, - className, - ...buttonProps -}) => { - return ( - - ); -}; - -/** - * SVG Arrow Icon for carousel navigation - Right arrow - */ -const CarouselArrowIconRight: React.FC = () => ( - -); - -/** - * SVG Arrow Icon for carousel navigation - Left arrow - */ -const CarouselArrowIconLeft: React.FC = () => ( - -); - export default CarouselCardList; diff --git a/shared/patterns/CarouselFeatured/CarouselFeatured.scss b/shared/patterns/CarouselFeatured/CarouselFeatured.scss new file mode 100644 index 0000000000..b0713c3500 --- /dev/null +++ b/shared/patterns/CarouselFeatured/CarouselFeatured.scss @@ -0,0 +1,529 @@ +// BDS CarouselFeatured Pattern Styles +// Brand Design System - Featured image carousel with two-column layout +// +// Layout: +// - Desktop (lg+): Two-column layout - Image LEFT (50%), Content RIGHT (50%) +// - Tablet/Mobile: Single column - Content TOP, Image BOTTOM +// +// Naming Convention: BEM with 'bds' namespace +// .bds-carousel-featured - Base section container +// .bds-carousel-featured__container - Two-column grid container +// .bds-carousel-featured__media - Image/media column +// .bds-carousel-featured__content - Content column +// .bds-carousel-featured__header - Header row (heading + nav) +// .bds-carousel-featured__heading - Section heading +// .bds-carousel-featured__nav - Navigation buttons wrapper +// .bds-carousel-featured__features - Feature list container +// .bds-carousel-featured__feature - Individual feature item +// .bds-carousel-featured__feature-title - Feature title +// .bds-carousel-featured__feature-description - Feature description +// .bds-carousel-featured__cta - CTA section (buttons + mobile nav) +// .bds-carousel-featured__buttons - Primary + tertiary buttons +// .bds-carousel-featured__slides - Slides container +// .bds-carousel-featured__slide-track - Sliding track +// .bds-carousel-featured__slide - Individual slide +// .bds-carousel-featured__image - Slide image +// +// Note: This file is imported within xrpl.scss after Bootstrap and project +// variables are loaded, so $grid-breakpoints, colors, and mixins are available. + +// ============================================================================= +// Design Tokens (from Figma) +// ============================================================================= + +// Spacing +$bds-carousel-featured-padding-sm: 16px; +$bds-carousel-featured-padding-md: 24px; +$bds-carousel-featured-padding-lg: 32px; +$bds-carousel-featured-padding-y-lg: 40px; + +// Content gap between image and content columns +$bds-carousel-featured-column-gap: 8px; + +// Transition +$bds-carousel-featured-transition: 400ms cubic-bezier(0.4, 0, 0.2, 1); + +// ============================================================================= +// Base Container Styles +// ============================================================================= + +.bds-carousel-featured { + width: 100%; + overflow: hidden; + // Default background - dark mode default (grey variant) + background-color: $gray-300; + + // Mobile (default) + padding: $bds-carousel-featured-padding-sm; + + // Tablet + @include media-breakpoint-up(md) { + padding: $bds-carousel-featured-padding-md; + } + + // Desktop + @include media-breakpoint-up(lg) { + padding: $bds-carousel-featured-padding-y-lg $bds-carousel-featured-padding-lg; + } + + // Max width constraint + @include media-breakpoint-up(xl) { + max-width: 1280px; + margin-left: auto; + margin-right: auto; + } + + // --------------------------------------------------------------------------- + // Background Color Variants + // --------------------------------------------------------------------------- + // Each variant has light/dark mode colors defined below in html.light/html.dark sections + // Default styles are for dark mode (site default) + + // Grey variant - Light: gray-200, Dark: gray-300 + // Both modes use black text (light backgrounds) + &--bg-grey { + background-color: $gray-300; // Dark mode default + + // Black text on grey background (both modes) + .bds-carousel-featured__heading, + .bds-carousel-featured__feature-title, + .bds-carousel-featured__feature-description { + color: $black; + } + + // Divider: dark on light background + .bds-divider { + background-color: $black; + } + + // Carousel nav buttons: always black background (both modes) - enabled states only + // Disabled states are handled by CarouselButton component styles + .bds-carousel-button--black { + background-color: $black; + color: $white; + + &:hover:not(:disabled) { + background-color: $gray-500; + } + + &:active:not(:disabled) { + background-color: $black; + } + } + } + + // Neutral variant - Light: white, Dark: black + &--bg-neutral { + background-color: $black; // Dark mode default + + // Dark mode: light text on dark background + .bds-carousel-featured__heading, + .bds-carousel-featured__feature-title, + .bds-carousel-featured__feature-description { + color: $white; + } + + // Divider: light on dark background + .bds-divider { + background-color: $white; + } + + // Carousel nav buttons: always green background (both modes) - enabled states only + // Disabled states are handled by CarouselButton component styles + .bds-carousel-button--green { + background-color: $green-300; + color: $black; + + &:hover:not(:disabled) { + background-color: $green-200; + } + + &:active:not(:disabled) { + background-color: $green-300; + } + } + } + + // Yellow variant - Light: yellow-100, Dark: yellow-100 (same for both) + &--bg-yellow { + background-color: $yellow-100; + + // Yellow is a light background, so dark text + .bds-carousel-featured__heading, + .bds-carousel-featured__feature-title { + color: $black; + } + + .bds-carousel-featured__feature-description { + color: $black; + } + + // Divider: dark on light background + .bds-divider { + background-color: $black; + } + + // Carousel nav buttons: always black background (both modes) - enabled states only + // Disabled states are handled by CarouselButton component styles + .bds-carousel-button--black { + background-color: $black; + color: $white; + + &:hover:not(:disabled) { + background-color: $gray-500; + } + + &:active:not(:disabled) { + background-color: $black; + } + } + } +} + +// ============================================================================= +// PageGrid Container +// ============================================================================= + +.bds-carousel-featured__container { + // Reset PageGrid container padding - section already has padding + &.bds-grid__container { + padding-left: 0; + padding-right: 0; + max-width: none; + } + + // Override row to handle column ordering on mobile/tablet + .bds-grid__row { + // On mobile/tablet, reverse the order so content is above image + flex-direction: column-reverse; + gap: 24px; // Gap between content and image on mobile + + @include media-breakpoint-up(md) { + gap: 32px; // Gap on tablet + } + + @include media-breakpoint-up(lg) { + flex-direction: row; + align-items: stretch; // Stretch both columns to same height + gap: 8px; // Column gap on desktop + } + } +} + +// ============================================================================= +// Media Column (Image) +// ============================================================================= + +.bds-carousel-featured__media { + width: 100%; + height: 100%; +} + +// ============================================================================= +// Content Column +// ============================================================================= + +.bds-carousel-featured__content-col { + display: flex; + flex-direction: column; + + @include media-breakpoint-up(lg) { + // Stretch to match image height + align-self: stretch; + // Add 8px padding-left to create 16px total gap (8px row gap + 8px padding) + padding-left: 8px; + } +} + +.bds-carousel-featured__content { + display: flex; + flex-direction: column; + width: 100%; + gap: 0; // Use space-between instead + min-height: 500px; // Mobile min height + justify-content: space-between; // Header at top, features+CTA at bottom + + @include media-breakpoint-up(md) { + min-height: 440px; // Tablet min height + } + + @include media-breakpoint-up(lg) { + flex: 1; + min-height: auto; // Reset min-height on desktop + } +} + +// ============================================================================= +// Header Section (Heading + Nav) +// ============================================================================= + +.bds-carousel-featured__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + width: 100%; +} + +.bds-carousel-featured__heading { + margin: 0; + // Dark mode default: light text on dark background + color: $white; + max-width: 392px; +} + +// ============================================================================= +// Bottom Section (Features + CTA grouped together) +// ============================================================================= + +.bds-carousel-featured__bottom { + display: flex; + flex-direction: column; + gap: 24px; // Mobile + + @include media-breakpoint-up(md) { + gap: 32px; // Tablet + } + + @include media-breakpoint-up(lg) { + gap: 40px; // Desktop + } +} + +// ============================================================================= +// Navigation Buttons +// ============================================================================= + +.bds-carousel-featured__nav { + display: flex; + gap: 8px; + flex-shrink: 0; + + // Desktop nav (in header row) + &--desktop { + display: none; + + @include media-breakpoint-up(lg) { + display: flex; + } + } + + // Mobile/Tablet nav (in CTA row) + &--mobile { + display: flex; + + @include media-breakpoint-up(lg) { + display: none; + } + } +} + +// ============================================================================= +// Feature List +// ============================================================================= + +.bds-carousel-featured__features { + display: flex; + flex-direction: column; + width: 100%; +} + +.bds-carousel-featured__feature { + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; + + // Spacing between description and next divider + // Mobile/Tablet: 16px, Desktop: 24px + &:not(:first-child) { + padding-top: 16px; + + @include media-breakpoint-up(lg) { + padding-top: 24px; + } + } +} + +.bds-carousel-featured__feature-title { + margin: 0; + // Dark mode default: light text on dark background + color: $white; +} + +.bds-carousel-featured__feature-description { + margin: 0; + // Dark mode default: muted light text on dark background + color: $gray-400; +} + +// ============================================================================= +// CTA Section (Buttons + Mobile Nav) +// ============================================================================= + +.bds-carousel-featured__cta { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-end; + width: 100%; + gap: 16px; + + // Tablet+: no wrap needed + @include media-breakpoint-up(md) { + flex-wrap: nowrap; + gap: 0; + } + + // Desktop: nav is hidden, so buttons just align left + @include media-breakpoint-up(lg) { + justify-content: flex-start; + } +} + +.bds-carousel-featured__buttons { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + + // Tablet+: row layout + @include media-breakpoint-up(md) { + flex-direction: row; + gap: 0; + align-items: center; + } +} + +// ============================================================================= +// Slides Container +// ============================================================================= + +.bds-carousel-featured__slides { + width: 100%; + overflow: hidden; + position: relative; +} + +.bds-carousel-featured__slide-track { + display: flex; + transition: transform $bds-carousel-featured-transition; + will-change: transform; +} + +// ============================================================================= +// Individual Slides +// ============================================================================= + +.bds-carousel-featured__slide { + flex: 0 0 100%; + width: 100%; + position: relative; + + // Mobile: 343/193 aspect ratio + aspect-ratio: 343 / 193; + + // Tablet: 16/9 aspect ratio + @include media-breakpoint-up(md) { + aspect-ratio: 16 / 9; + } + + // Desktop: Square aspect ratio (604x604) + @include media-breakpoint-up(lg) { + aspect-ratio: 1 / 1; + } +} + +.bds-carousel-featured__image { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + pointer-events: none; +} + +// ============================================================================= +// LIGHT MODE (html.light) - Color Overrides +// ============================================================================= + +html.light { + // Default (no variant class) - Light mode: gray-200 background + .bds-carousel-featured { + background-color: $gray-200; + + .bds-carousel-featured__heading, + .bds-carousel-featured__feature-title { + color: $black; + } + + .bds-carousel-featured__feature-description { + color: $black; + } + + .bds-divider { + background-color: $black; + } + } + + // Grey variant - Light mode: gray-200 background + .bds-carousel-featured--bg-grey { + background-color: $gray-200; + + // Light mode: dark text on light background + .bds-carousel-featured__heading, + .bds-carousel-featured__feature-title { + color: $black; + } + + .bds-carousel-featured__feature-description { + color: $black; + } + + // Divider: dark on light background + .bds-divider { + background-color: $black; + } + } + + // Neutral variant - Light mode: white background + .bds-carousel-featured--bg-neutral { + background-color: $white; + + // Light mode: dark text on light background + .bds-carousel-featured__heading, + .bds-carousel-featured__feature-title { + color: $black; + } + + .bds-carousel-featured__feature-description { + color: $black; + } + + // Divider: dark on light background + .bds-divider { + background-color: $black; + } + } + + // Yellow variant - Light mode: yellow-100 (same as dark mode) + .bds-carousel-featured--bg-yellow { + background-color: $yellow-100; + + // Yellow is a light background, so dark text + .bds-carousel-featured__heading, + .bds-carousel-featured__feature-title { + color: $black; + } + + .bds-carousel-featured__feature-description { + color: $black; + } + + // Divider: dark on light background + .bds-divider { + background-color: $black; + } + } +} + diff --git a/shared/patterns/CarouselFeatured/CarouselFeatured.tsx b/shared/patterns/CarouselFeatured/CarouselFeatured.tsx new file mode 100644 index 0000000000..17cf454f12 --- /dev/null +++ b/shared/patterns/CarouselFeatured/CarouselFeatured.tsx @@ -0,0 +1,288 @@ +import React, { useState, useCallback } from 'react'; +import clsx from 'clsx'; +import { Button } from '../../components/Button'; +import { CarouselButton } from '../../components/CarouselButton'; +import { Divider } from '../../components/Divider'; +import { PageGrid, PageGridRow, PageGridCol } from '../../components/PageGrid'; +import { ButtonConfig } from '../ButtonGroup'; + +/** + * Props for a single slide in the CarouselFeatured component + */ +export interface CarouselSlide { + /** Unique identifier for the slide */ + id: string | number; + /** Image source URL */ + imageSrc: string; + /** Alt text for the image */ + imageAlt: string; +} + +/** + * Props for a feature list item + */ +export interface CarouselFeatureItem { + /** Feature title */ + title: string; + /** Feature description */ + description: string; +} + +/** + * Background color options for CarouselFeatured + * Each variant adapts to light/dark mode: + * - 'grey': Light mode: gray-200 (#E6EAF0), Dark mode: gray-300 (#CAD4DF) + * - 'neutral': Light mode: white (#FFF), Dark mode: black (#141414) + * - 'yellow': Light mode: yellow-100 (#F3F1EB), Dark mode: yellow-100 (#F3F1EB) + */ +export type CarouselFeaturedBackground = 'grey' | 'neutral' | 'yellow'; + +/** + * Props for the CarouselFeatured pattern component + */ +export interface CarouselFeaturedProps extends React.ComponentPropsWithoutRef<'section'> { + /** Array of slides to display */ + slides: readonly CarouselSlide[]; + /** Heading text displayed at the top of the content area */ + heading: string; + /** Array of feature items to display in the list */ + features: readonly CarouselFeatureItem[]; + /** Primary button configuration (optional) */ + primaryButton?: ButtonConfig; + /** Tertiary button configuration (optional) */ + tertiaryButton?: ButtonConfig; + /** Background color variant. Defaults to 'grey'. */ + background?: CarouselFeaturedBackground; +} + +/** + * CarouselFeatured Pattern Component + * + * A featured image carousel with two-column layout on desktop (image left, content right) + * and single-column layout on tablet/mobile (content top, image bottom). + * Features a heading, feature list with dividers, and optional buttons. + * + * @example + * ```tsx + * + * ``` + */ +export const CarouselFeatured = React.forwardRef( + (props, ref) => { + const { + slides, + heading, + features, + primaryButton, + tertiaryButton, + background = 'grey', + className, + children, + ...rest + } = props; + + const [currentIndex, setCurrentIndex] = useState(0); + + const canGoPrev = currentIndex > 0; + const canGoNext = currentIndex < slides.length - 1; + + const goToPrev = useCallback(() => { + if (canGoPrev) { + setCurrentIndex((prev) => prev - 1); + } + }, [canGoPrev]); + + const goToNext = useCallback(() => { + if (canGoNext) { + setCurrentIndex((prev) => prev + 1); + } + }, [canGoNext]); + + // Early return for empty slides + if (slides.length === 0) { + console.warn('CarouselFeatured: No slides provided'); + return null; + } + + // Determine carousel nav button variant based on background + // grey/yellow → black (always), neutral → green (always) + const buttonVariant = background === 'neutral' ? 'green' : 'black'; + + return ( +
+ + + {/* Image/Media Column - Left on desktop, bottom on mobile */} + +
+
+
+ {slides.map((slide, index) => ( +
+ {slide.imageAlt} +
+ ))} +
+
+
+ + + {/* Content Column - Right on desktop, top on mobile */} + + {/* Content Column - Right on desktop, top on mobile */} +
+ {/* Header row with heading and nav buttons */} +
+

{heading}

+
+ + +
+
+ + {/* Bottom section: features + CTA grouped together */} +
+ {/* Feature list with dividers */} +
+ {features.map((feature, index) => ( +
+ +

{feature.title}

+

{feature.description}

+
+ ))} +
+ + {/* CTA section with buttons and mobile nav */} +
+ {/* Buttons wrapper - groups primary and tertiary together */} +
+ {/* Primary button */} + {primaryButton && ( + + )} + + {/* Tertiary button */} + {tertiaryButton && ( + + )} +
+ + {/* Mobile/Tablet nav buttons */} +
+ + +
+
+
{/* Close bottom */} +
+ + + + + {/* Render any additional children */} + {children} +
+ ); + } +); + +CarouselFeatured.displayName = 'CarouselFeatured'; + +export default CarouselFeatured; + diff --git a/shared/patterns/CarouselFeatured/index.ts b/shared/patterns/CarouselFeatured/index.ts new file mode 100644 index 0000000000..acd41e1430 --- /dev/null +++ b/shared/patterns/CarouselFeatured/index.ts @@ -0,0 +1,9 @@ +export { + CarouselFeatured, + type CarouselFeaturedProps, + type CarouselFeaturedBackground, + type CarouselSlide, + type CarouselFeatureItem +} from './CarouselFeatured'; +export { default } from './CarouselFeatured'; + diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index 3cd019091d..14bd590870 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -292,7 +292,8 @@ *, *::before, *::after { - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { @@ -380,9 +381,11 @@ p { } abbr[title] { - text-decoration: underline dotted; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; cursor: help; - text-decoration-skip-ink: none; + -webkit-text-decoration-skip-ink: none; + text-decoration-skip-ink: none; } address { @@ -656,7 +659,8 @@ legend + * { } [type=search]::-webkit-search-cancel-button { cursor: pointer; - filter: grayscale(1); + -webkit-filter: grayscale(1); + filter: grayscale(1); } /* rtl:raw: @@ -675,6 +679,11 @@ legend + * { padding: 0; } +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} + ::file-selector-button { font: inherit; -webkit-appearance: button; @@ -822,7 +831,8 @@ progress { background-color: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); - box-shadow: var(--bs-box-shadow-sm); + -webkit-box-shadow: var(--bs-box-shadow-sm); + box-shadow: var(--bs-box-shadow-sm); max-width: 100%; height: auto; } @@ -894,14 +904,18 @@ progress { .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); } .row > * { - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); @@ -910,106 +924,148 @@ progress { } .col { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; } .row-cols-auto > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .row-cols-1 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .row-cols-2 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .row-cols-3 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .row-cols-4 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .row-cols-5 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 20%; } .row-cols-6 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .col-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 8.33333333%; } .col-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .col-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .col-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 41.66666667%; } .col-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .col-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 58.33333333%; } .col-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 66.66666667%; } .col-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 75%; } .col-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 83.33333333%; } .col-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 91.66666667%; } .col-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } @@ -1119,86 +1175,128 @@ progress { @media (min-width: 576px) { .col-sm { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; } .row-cols-sm-auto > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .row-cols-sm-1 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .row-cols-sm-2 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .row-cols-sm-3 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .row-cols-sm-4 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .row-cols-sm-5 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 20%; } .row-cols-sm-6 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-sm-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .col-sm-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 8.33333333%; } .col-sm-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-sm-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .col-sm-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .col-sm-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 41.66666667%; } .col-sm-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .col-sm-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 58.33333333%; } .col-sm-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 66.66666667%; } .col-sm-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 75%; } .col-sm-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 83.33333333%; } .col-sm-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 91.66666667%; } .col-sm-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .offset-sm-0 { @@ -1288,86 +1386,128 @@ progress { } @media (min-width: 576px) { .col-md { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; } .row-cols-md-auto > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .row-cols-md-1 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .row-cols-md-2 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .row-cols-md-3 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .row-cols-md-4 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .row-cols-md-5 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 20%; } .row-cols-md-6 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-md-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .col-md-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 8.33333333%; } .col-md-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-md-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .col-md-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .col-md-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 41.66666667%; } .col-md-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .col-md-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 58.33333333%; } .col-md-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 66.66666667%; } .col-md-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 75%; } .col-md-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 83.33333333%; } .col-md-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 91.66666667%; } .col-md-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .offset-md-0 { @@ -1457,86 +1597,128 @@ progress { } @media (min-width: 992px) { .col-lg { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; } .row-cols-lg-auto > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .row-cols-lg-4 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-lg-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .col-lg-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 8.33333333%; } .col-lg-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-lg-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .col-lg-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .col-lg-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 41.66666667%; } .col-lg-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .col-lg-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 58.33333333%; } .col-lg-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 66.66666667%; } .col-lg-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 75%; } .col-lg-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 83.33333333%; } .col-lg-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 91.66666667%; } .col-lg-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .offset-lg-0 { @@ -1626,86 +1808,128 @@ progress { } @media (min-width: 1280px) { .col-xl { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; } .row-cols-xl-auto > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .row-cols-xl-1 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .row-cols-xl-2 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .row-cols-xl-3 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .row-cols-xl-4 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .row-cols-xl-5 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 20%; } .row-cols-xl-6 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-xl-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .col-xl-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 8.33333333%; } .col-xl-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-xl-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .col-xl-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .col-xl-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 41.66666667%; } .col-xl-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .col-xl-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 58.33333333%; } .col-xl-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 66.66666667%; } .col-xl-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 75%; } .col-xl-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 83.33333333%; } .col-xl-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 91.66666667%; } .col-xl-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .offset-xl-0 { @@ -1795,86 +2019,128 @@ progress { } @media (min-width: 1512px) { .col-xxl { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; } .row-cols-xxl-auto > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .row-cols-xxl-1 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .row-cols-xxl-2 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .row-cols-xxl-3 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .row-cols-xxl-4 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .row-cols-xxl-5 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 20%; } .row-cols-xxl-6 > * { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-xxl-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .col-xxl-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 8.33333333%; } .col-xxl-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 16.66666667%; } .col-xxl-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 25%; } .col-xxl-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 33.33333333%; } .col-xxl-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 41.66666667%; } .col-xxl-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 50%; } .col-xxl-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 58.33333333%; } .col-xxl-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 66.66666667%; } .col-xxl-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 75%; } .col-xxl-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 83.33333333%; } .col-xxl-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 91.66666667%; } .col-xxl-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 100%; } .offset-xxl-0 { @@ -1987,7 +2253,8 @@ progress { color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))); background-color: var(--bs-table-bg); border-bottom-width: var(--bs-border-width); - box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); + -webkit-box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); + box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); } .table > tbody { vertical-align: inherit; @@ -2227,16 +2494,23 @@ progress { font-weight: 400; line-height: 1.25; color: #FFFFFF; - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; background-color: #232325; background-clip: padding-box; border: var(--bs-border-width) solid transparent; border-radius: var(--bs-border-radius); - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control { + -webkit-transition: none; transition: none; } } @@ -2251,7 +2525,8 @@ progress { background-color: #232325; border-color: rgb(186.5, 164, 241); outline: 0; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .form-control::-webkit-date-and-time-value { min-width: 85px; @@ -2262,6 +2537,22 @@ progress { display: block; padding: 0; } +.form-control::-webkit-input-placeholder { + color: #8A919A; + opacity: 1; +} +.form-control::-moz-placeholder { + color: #8A919A; + opacity: 1; +} +.form-control:-ms-input-placeholder { + color: #8A919A; + opacity: 1; +} +.form-control::-ms-input-placeholder { + color: #8A919A; + opacity: 1; +} .form-control::placeholder { color: #8A919A; opacity: 1; @@ -2270,10 +2561,11 @@ progress { background-color: #454549; opacity: 1; } -.form-control::file-selector-button { +.form-control::-webkit-file-upload-button { padding: 1rem 1.5rem; margin: -1rem -1.5rem; - margin-inline-end: 1.5rem; + -webkit-margin-end: 1.5rem; + margin-inline-end: 1.5rem; color: #FFFFFF; background-color: var(--bs-tertiary-bg); pointer-events: none; @@ -2282,12 +2574,41 @@ progress { border-width: 0; border-inline-end-width: var(--bs-border-width); border-radius: 0; + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +} +.form-control::file-selector-button { + padding: 1rem 1.5rem; + margin: -1rem -1.5rem; + -webkit-margin-end: 1.5rem; + margin-inline-end: 1.5rem; + color: #FFFFFF; + background-color: var(--bs-tertiary-bg); + pointer-events: none; + border-color: inherit; + border-style: solid; + border-width: 0; + border-inline-end-width: var(--bs-border-width); + border-radius: 0; + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { - .form-control::file-selector-button { + .form-control::-webkit-file-upload-button { + -webkit-transition: none; transition: none; } + .form-control::file-selector-button { + -webkit-transition: none; + transition: none; + } +} +.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { + background-color: var(--bs-secondary-bg); } .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--bs-secondary-bg); @@ -2318,10 +2639,17 @@ progress { font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } +.form-control-sm::-webkit-file-upload-button { + padding: 0.25rem 0.5rem; + margin: -0.25rem -0.5rem; + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.5rem; +} .form-control-sm::file-selector-button { padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; - margin-inline-end: 0.5rem; + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.5rem; } .form-control-lg { @@ -2330,10 +2658,17 @@ progress { font-size: 1.25rem; border-radius: var(--bs-border-radius-lg); } +.form-control-lg::-webkit-file-upload-button { + padding: 0.5rem 1rem; + margin: -0.5rem -1rem; + -webkit-margin-end: 1rem; + margin-inline-end: 1rem; +} .form-control-lg::file-selector-button { padding: 0.5rem 1rem; margin: -0.5rem -1rem; - margin-inline-end: 1rem; + -webkit-margin-end: 1rem; + margin-inline-end: 1rem; } textarea.form-control { @@ -2378,7 +2713,9 @@ textarea.form-control-lg { font-weight: 400; line-height: 1.25; color: #FFFFFF; - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; background-color: #232325; background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat: no-repeat; @@ -2386,18 +2723,24 @@ textarea.form-control-lg { background-size: 16px 12px; border: var(--bs-border-width) solid transparent; border-radius: var(--bs-border-radius); - box-shadow: var(--bs-box-shadow-inset); + -webkit-box-shadow: var(--bs-box-shadow-inset); + box-shadow: var(--bs-box-shadow-inset); + -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-select { + -webkit-transition: none; transition: none; } } .form-select:focus { border-color: rgb(186.5, 164, 241); outline: 0; - box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(118, 73, 227, 0.25); + -webkit-box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(118, 73, 227, 0.25); + box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(118, 73, 227, 0.25); } .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 1.5rem; @@ -2455,19 +2798,23 @@ textarea.form-control-lg { .form-check-input { --bs-form-check-bg: #232325; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; width: 1em; height: 1em; margin-top: 0.25em; vertical-align: top; - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; background-color: var(--bs-form-check-bg); background-image: var(--bs-form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: contain; border: var(--bs-border-width) solid var(--bs-border-color); - print-color-adjust: exact; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; } .form-check-input[type=checkbox] { border-radius: 0.25em; @@ -2476,12 +2823,14 @@ textarea.form-control-lg { border-radius: 50%; } .form-check-input:active { - filter: brightness(90%); + -webkit-filter: brightness(90%); + filter: brightness(90%); } .form-check-input:focus { border-color: rgb(186.5, 164, 241); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(118, 73, 227, 0.25); + -webkit-box-shadow: 0 0 0 0.25rem rgba(118, 73, 227, 0.25); + box-shadow: 0 0 0 0.25rem rgba(118, 73, 227, 0.25); } .form-check-input:checked { background-color: #7649E3; @@ -2500,7 +2849,8 @@ textarea.form-control-lg { } .form-check-input:disabled { pointer-events: none; - filter: none; + -webkit-filter: none; + filter: none; opacity: 0.5; } .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { @@ -2518,10 +2868,12 @@ textarea.form-control-lg { background-image: var(--bs-form-switch-bg); background-position: left center; border-radius: 2em; + -webkit-transition: background-position 0.15s ease-in-out; transition: background-position 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-switch .form-check-input { + -webkit-transition: none; transition: none; } } @@ -2553,7 +2905,8 @@ textarea.form-control-lg { } .btn-check[disabled] + .btn, .btn-check:disabled + .btn { pointer-events: none; - filter: none; + -webkit-filter: none; + filter: none; opacity: 0.65; } @@ -2565,14 +2918,17 @@ textarea.form-control-lg { width: 100%; height: 1.5rem; padding: 0; - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; background-color: transparent; } .form-range:focus { outline: 0; } .form-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #111112, 0 0 0 0.25rem rgba(118, 73, 227, 0.25); + -webkit-box-shadow: 0 0 0 1px #111112, 0 0 0 0.25rem rgba(118, 73, 227, 0.25); + box-shadow: 0 0 0 1px #111112, 0 0 0 0.25rem rgba(118, 73, 227, 0.25); } .form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #111112, 0 0 0 0.25rem rgba(118, 73, 227, 0.25); @@ -2584,15 +2940,21 @@ textarea.form-control-lg { width: 1rem; height: 1rem; margin-top: -0.25rem; - appearance: none; + -webkit-appearance: none; + appearance: none; background-color: #7649E3; border: 0; border-radius: 1rem; - box-shadow: 0 0.1rem 0.25rem rgba(20, 20, 20, 0.1); + -webkit-box-shadow: 0 0.1rem 0.25rem rgba(20, 20, 20, 0.1); + box-shadow: 0 0.1rem 0.25rem rgba(20, 20, 20, 0.1); + -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-range::-webkit-slider-thumb { + -webkit-transition: none; transition: none; } } @@ -2607,20 +2969,24 @@ textarea.form-control-lg { background-color: var(--bs-secondary-bg); border-color: transparent; border-radius: 1rem; - box-shadow: var(--bs-box-shadow-inset); + -webkit-box-shadow: var(--bs-box-shadow-inset); + box-shadow: var(--bs-box-shadow-inset); } .form-range::-moz-range-thumb { width: 1rem; height: 1rem; - appearance: none; + -moz-appearance: none; + appearance: none; background-color: #7649E3; border: 0; border-radius: 1rem; box-shadow: 0 0.1rem 0.25rem rgba(20, 20, 20, 0.1); + -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-range::-moz-range-thumb { + -moz-transition: none; transition: none; } } @@ -2672,11 +3038,16 @@ textarea.form-control-lg { white-space: nowrap; pointer-events: none; border: var(--bs-border-width) solid transparent; - transform-origin: 0 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; + transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; + transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-floating > label { + -webkit-transition: none; transition: none; } } @@ -2684,10 +3055,30 @@ textarea.form-control-lg { .form-floating > .form-control-plaintext { padding: 1rem 1.5rem; } +.form-floating > .form-control::-webkit-input-placeholder, .form-floating > .form-control-plaintext::-webkit-input-placeholder { + color: transparent; +} +.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder { + color: transparent; +} +.form-floating > .form-control:-ms-input-placeholder, .form-floating > .form-control-plaintext:-ms-input-placeholder { + color: transparent; +} +.form-floating > .form-control::-ms-input-placeholder, .form-floating > .form-control-plaintext::-ms-input-placeholder { + color: transparent; +} .form-floating > .form-control::placeholder, .form-floating > .form-control-plaintext::placeholder { color: transparent; } +.form-floating > .form-control:not(:-moz-placeholder), .form-floating > .form-control-plaintext:not(:-moz-placeholder) { + padding-top: 1.625rem; + padding-bottom: 0.625rem; +} +.form-floating > .form-control:not(:-ms-input-placeholder), .form-floating > .form-control-plaintext:not(:-ms-input-placeholder) { + padding-top: 1.625rem; + padding-bottom: 0.625rem; +} .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown), .form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown) { @@ -2704,14 +3095,40 @@ textarea.form-control-lg { padding-bottom: 0.625rem; padding-left: 1.5rem; } +.form-floating > .form-control:not(:-moz-placeholder) ~ label { + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} +.form-floating > .form-control:not(:-ms-input-placeholder) ~ label { + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label { - transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); + -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .form-floating > .form-control:-webkit-autofill ~ label { - transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); + -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} +.form-floating > textarea:not(:-moz-placeholder) ~ label::after { + position: absolute; + inset: 1rem 0.75rem; + z-index: -1; + height: 1.5em; + content: ""; + background-color: #232325; + border-radius: var(--bs-border-radius); +} +.form-floating > textarea:not(:-ms-input-placeholder) ~ label::after { + position: absolute; + inset: 1rem 0.75rem; + z-index: -1; + height: 1.5em; + content: ""; + background-color: #232325; + border-radius: var(--bs-border-radius); } .form-floating > textarea:focus ~ label::after, .form-floating > textarea:not(:placeholder-shown) ~ label::after { @@ -2736,16 +3153,23 @@ textarea.form-control-lg { .input-group { position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; - align-items: stretch; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; width: 100%; } .input-group > .form-control, .input-group > .form-select, .input-group > .form-floating { position: relative; - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; width: 1%; min-width: 0; } @@ -2763,8 +3187,12 @@ textarea.form-control-lg { } .input-group-text { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 400; @@ -2864,7 +3292,8 @@ textarea.form-control-lg { } .was-validated .form-control:valid:focus, .form-control.is-valid:focus { border-color: var(--bs-form-valid-border-color); - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .was-validated textarea.form-control:valid, textarea.form-control.is-valid { @@ -2883,7 +3312,8 @@ textarea.form-control-lg { } .was-validated .form-select:valid:focus, .form-select.is-valid:focus { border-color: var(--bs-form-valid-border-color); - box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); + -webkit-box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); + box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); } .was-validated .form-control-color:valid, .form-control-color.is-valid { @@ -2897,7 +3327,8 @@ textarea.form-control-lg { background-color: var(--bs-form-valid-color); } .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus { - box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); + -webkit-box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); + box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { color: var(--bs-form-valid-color); @@ -2954,7 +3385,8 @@ textarea.form-control-lg { } .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { border-color: var(--bs-form-invalid-border-color); - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { @@ -2973,7 +3405,8 @@ textarea.form-control-lg { } .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus { border-color: var(--bs-form-invalid-border-color); - box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); + -webkit-box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); + box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); } .was-validated .form-control-color:invalid, .form-control-color.is-invalid { @@ -2987,7 +3420,8 @@ textarea.form-control-lg { background-color: var(--bs-form-invalid-color); } .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { - box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); + -webkit-box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); + box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); } .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: var(--bs-form-invalid-color); @@ -3031,15 +3465,23 @@ textarea.form-control-lg { text-align: center; vertical-align: middle; cursor: pointer; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); border-radius: var(--bs-btn-border-radius); background-color: var(--bs-btn-bg); - box-shadow: var(--bs-btn-box-shadow); + -webkit-box-shadow: var(--bs-btn-box-shadow); + box-shadow: var(--bs-btn-box-shadow); + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .btn { + -webkit-transition: none; transition: none; } } @@ -3059,24 +3501,29 @@ textarea.form-control-lg { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); outline: 0; - box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow); + -webkit-box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow); + box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow); } .btn-check:focus-visible + .btn { border-color: var(--bs-btn-hover-border-color); outline: 0; - box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow); + -webkit-box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow); + box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow); } .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); - box-shadow: var(--bs-btn-active-shadow); + -webkit-box-shadow: var(--bs-btn-active-shadow); + box-shadow: var(--bs-btn-active-shadow); } .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible { - box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow); + -webkit-box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow); + box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow); } .btn-check:checked:focus-visible + .btn { - box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow); + -webkit-box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow); + box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow); } .btn:disabled, .btn.disabled, fieldset:disabled .btn { color: var(--bs-btn-disabled-color); @@ -3084,7 +3531,8 @@ textarea.form-control-lg { background-color: var(--bs-btn-disabled-bg); border-color: var(--bs-btn-disabled-border-color); opacity: var(--bs-btn-disabled-opacity); - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .btn-primary { @@ -3465,7 +3913,8 @@ textarea.form-control-lg { background-clip: padding-box; border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color); border-radius: var(--bs-dropdown-border-radius); - box-shadow: var(--bs-dropdown-box-shadow); + -webkit-box-shadow: var(--bs-dropdown-box-shadow); + box-shadow: var(--bs-dropdown-box-shadow); } .dropdown-menu[data-bs-popper] { top: 100%; @@ -3723,8 +4172,11 @@ textarea.form-control-lg { --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); --bs-nav-link-disabled-color: var(--bs-secondary-color); + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; @@ -3738,10 +4190,12 @@ textarea.form-control-lg { color: var(--bs-nav-link-color); background: none; border: 0; + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .nav-link { + -webkit-transition: none; transition: none; } } @@ -3751,7 +4205,8 @@ textarea.form-control-lg { } .nav-link:focus-visible { outline: 0; - box-shadow: 0 0 0 0.25rem rgba(118, 73, 227, 0.25); + -webkit-box-shadow: 0 0 0 0.25rem rgba(118, 73, 227, 0.25); + box-shadow: 0 0 0 0.25rem rgba(118, 73, 227, 0.25); } .nav-link.disabled, .nav-link:disabled { color: var(--bs-nav-link-disabled-color); @@ -3828,14 +4283,19 @@ textarea.form-control-lg { .nav-fill > .nav-link, .nav-fill .nav-item { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; text-align: center; } .nav-justified > .nav-link, .nav-justified .nav-item { - flex-grow: 1; - flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; text-align: center; } @@ -3873,10 +4333,17 @@ textarea.form-control-lg { --bs-navbar-toggler-focus-width: 0.25rem; --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out; position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x); } .navbar > .container, @@ -3886,10 +4353,17 @@ textarea.form-control-lg { .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: inherit; - align-items: center; - justify-content: space-between; + -ms-flex-wrap: inherit; + flex-wrap: inherit; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } .navbar-brand { padding-top: var(--bs-navbar-brand-padding-y); @@ -3911,8 +4385,13 @@ textarea.form-control-lg { --bs-nav-link-color: var(--bs-navbar-color); --bs-nav-link-hover-color: var(--bs-navbar-hover-color); --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color); + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; @@ -3936,9 +4415,14 @@ textarea.form-control-lg { } .navbar-collapse { - flex-grow: 1; - flex-basis: 100%; - align-items: center; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .navbar-toggler { @@ -3949,10 +4433,12 @@ textarea.form-control-lg { background-color: transparent; border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color); border-radius: var(--bs-navbar-toggler-border-radius); + -webkit-transition: var(--bs-navbar-toggler-transition); transition: var(--bs-navbar-toggler-transition); } @media (prefers-reduced-motion: reduce) { .navbar-toggler { + -webkit-transition: none; transition: none; } } @@ -3962,7 +4448,8 @@ textarea.form-control-lg { .navbar-toggler:focus { text-decoration: none; outline: 0; - box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width); + -webkit-box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width); + box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width); } .navbar-toggler-icon { @@ -3983,11 +4470,17 @@ textarea.form-control-lg { @media (min-width: 576px) { .navbar-expand-sm { - flex-wrap: nowrap; - justify-content: flex-start; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } .navbar-expand-sm .navbar-nav { - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; @@ -4000,8 +4493,11 @@ textarea.form-control-lg { overflow: visible; } .navbar-expand-sm .navbar-collapse { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; - flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; } .navbar-expand-sm .navbar-toggler { display: none; @@ -4009,33 +4505,48 @@ textarea.form-control-lg { .navbar-expand-sm .offcanvas { position: static; z-index: auto; - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; - transform: none !important; - box-shadow: none; + -webkit-transform: none !important; + transform: none !important; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: none; transition: none; } .navbar-expand-sm .offcanvas .offcanvas-header { display: none; } .navbar-expand-sm .offcanvas .offcanvas-body { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; padding: 0; overflow-y: visible; } } @media (min-width: 576px) { .navbar-expand-md { - flex-wrap: nowrap; - justify-content: flex-start; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } .navbar-expand-md .navbar-nav { - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; @@ -4048,8 +4559,11 @@ textarea.form-control-lg { overflow: visible; } .navbar-expand-md .navbar-collapse { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; - flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; } .navbar-expand-md .navbar-toggler { display: none; @@ -4057,33 +4571,48 @@ textarea.form-control-lg { .navbar-expand-md .offcanvas { position: static; z-index: auto; - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; - transform: none !important; - box-shadow: none; + -webkit-transform: none !important; + transform: none !important; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: none; transition: none; } .navbar-expand-md .offcanvas .offcanvas-header { display: none; } .navbar-expand-md .offcanvas .offcanvas-body { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; padding: 0; overflow-y: visible; } } @media (min-width: 992px) { .navbar-expand-lg { - flex-wrap: nowrap; - justify-content: flex-start; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } .navbar-expand-lg .navbar-nav { - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; @@ -4096,8 +4625,11 @@ textarea.form-control-lg { overflow: visible; } .navbar-expand-lg .navbar-collapse { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; - flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; } .navbar-expand-lg .navbar-toggler { display: none; @@ -4105,33 +4637,48 @@ textarea.form-control-lg { .navbar-expand-lg .offcanvas { position: static; z-index: auto; - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; - transform: none !important; - box-shadow: none; + -webkit-transform: none !important; + transform: none !important; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: none; transition: none; } .navbar-expand-lg .offcanvas .offcanvas-header { display: none; } .navbar-expand-lg .offcanvas .offcanvas-body { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; padding: 0; overflow-y: visible; } } @media (min-width: 1280px) { .navbar-expand-xl { - flex-wrap: nowrap; - justify-content: flex-start; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } .navbar-expand-xl .navbar-nav { - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } .navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; @@ -4144,8 +4691,11 @@ textarea.form-control-lg { overflow: visible; } .navbar-expand-xl .navbar-collapse { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; - flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; } .navbar-expand-xl .navbar-toggler { display: none; @@ -4153,33 +4703,48 @@ textarea.form-control-lg { .navbar-expand-xl .offcanvas { position: static; z-index: auto; - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; - transform: none !important; - box-shadow: none; + -webkit-transform: none !important; + transform: none !important; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: none; transition: none; } .navbar-expand-xl .offcanvas .offcanvas-header { display: none; } .navbar-expand-xl .offcanvas .offcanvas-body { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; padding: 0; overflow-y: visible; } } @media (min-width: 1512px) { .navbar-expand-xxl { - flex-wrap: nowrap; - justify-content: flex-start; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } .navbar-expand-xxl .navbar-nav { - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } .navbar-expand-xxl .navbar-nav .dropdown-menu { position: absolute; @@ -4192,8 +4757,11 @@ textarea.form-control-lg { overflow: visible; } .navbar-expand-xxl .navbar-collapse { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; - flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; } .navbar-expand-xxl .navbar-toggler { display: none; @@ -4201,32 +4769,47 @@ textarea.form-control-lg { .navbar-expand-xxl .offcanvas { position: static; z-index: auto; - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; - transform: none !important; - box-shadow: none; + -webkit-transform: none !important; + transform: none !important; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: none; transition: none; } .navbar-expand-xxl .offcanvas .offcanvas-header { display: none; } .navbar-expand-xxl .offcanvas .offcanvas-body { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; padding: 0; overflow-y: visible; } } .navbar-expand { - flex-wrap: nowrap; - justify-content: flex-start; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } .navbar-expand .navbar-nav { - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } .navbar-expand .navbar-nav .dropdown-menu { position: absolute; @@ -4239,8 +4822,11 @@ textarea.form-control-lg { overflow: visible; } .navbar-expand .navbar-collapse { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; - flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; } .navbar-expand .navbar-toggler { display: none; @@ -4248,22 +4834,31 @@ textarea.form-control-lg { .navbar-expand .offcanvas { position: static; z-index: auto; - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; - transform: none !important; - box-shadow: none; + -webkit-transform: none !important; + transform: none !important; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: none; transition: none; } .navbar-expand .offcanvas .offcanvas-header { display: none; } .navbar-expand .offcanvas .offcanvas-body { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; padding: 0; overflow-y: visible; } @@ -4305,8 +4900,13 @@ textarea.form-control-lg { --bs-card-img-overlay-padding: 0.5rem; --bs-card-group-margin: 0.75rem; position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; min-width: 0; height: var(--bs-card-height); color: var(--bs-body-color); @@ -4315,7 +4915,8 @@ textarea.form-control-lg { background-clip: border-box; border: var(--bs-card-border-width) solid var(--bs-card-border-color); border-radius: var(--bs-card-border-radius); - box-shadow: var(--bs-card-box-shadow); + -webkit-box-shadow: var(--bs-card-box-shadow); + box-shadow: var(--bs-card-box-shadow); } .card > hr { margin-right: 0; @@ -4341,7 +4942,9 @@ textarea.form-control-lg { } .card-body { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); color: var(--bs-card-color); } @@ -4438,11 +5041,18 @@ textarea.form-control-lg { } @media (min-width: 576px) { .card-group { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-flow: row wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } .card-group > .card { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; margin-bottom: 0; } .card-group > .card + .card { @@ -4484,8 +5094,11 @@ textarea.form-control-lg { --bs-breadcrumb-divider-color: var(--bs-secondary-color); --bs-breadcrumb-item-padding-x: 0.5rem; --bs-breadcrumb-item-active-color: #8A919A; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x); margin-bottom: var(--bs-breadcrumb-margin-bottom); font-size: var(--bs-breadcrumb-font-size); @@ -4548,19 +5161,26 @@ textarea.form-control-lg { pointer-events: none; } .modal.fade .modal-dialog { - transform: translate(0, -50px); + -webkit-transform: translate(0, -50px); + transform: translate(0, -50px); + -webkit-transition: -webkit-transform 0.3s ease-out; + transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { + -webkit-transition: none; transition: none; } } .modal.show .modal-dialog { - transform: none; + -webkit-transform: none; + transform: none; } .modal.modal-static .modal-dialog { - transform: scale(1.02); + -webkit-transform: scale(1.02); + transform: scale(1.02); } .modal-dialog-scrollable { @@ -4575,15 +5195,24 @@ textarea.form-control-lg { } .modal-dialog-centered { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; min-height: calc(100% - var(--bs-modal-margin) * 2); } .modal-content { position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; width: 100%; color: var(--bs-modal-color); pointer-events: auto; @@ -4591,7 +5220,8 @@ textarea.form-control-lg { background-clip: padding-box; border: var(--bs-modal-border-width) solid var(--bs-modal-border-color); border-radius: var(--bs-modal-border-radius); - box-shadow: var(--bs-modal-box-shadow); + -webkit-box-shadow: var(--bs-modal-box-shadow); + box-shadow: var(--bs-modal-box-shadow); outline: 0; } @@ -4615,9 +5245,14 @@ textarea.form-control-lg { } .modal-header { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-shrink: 0; - align-items: center; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; padding: var(--bs-modal-header-padding); border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color); border-top-left-radius: var(--bs-modal-inner-border-radius); @@ -4638,16 +5273,26 @@ textarea.form-control-lg { .modal-body { position: relative; - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; padding: var(--bs-modal-padding); } .modal-footer { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-shrink: 0; - flex-wrap: wrap; - align-items: center; - justify-content: flex-end; + -ms-flex-negative: 0; + flex-shrink: 0; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5); background-color: var(--bs-modal-footer-bg); border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color); @@ -4803,10 +5448,12 @@ textarea.form-control-lg { } } .fade { + -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } @media (prefers-reduced-motion: reduce) { .fade { + -webkit-transition: none; transition: none; } } @@ -4821,20 +5468,24 @@ textarea.form-control-lg { .collapsing { height: 0; overflow: hidden; + -webkit-transition: height 0.35s ease; transition: height 0.35s ease; } @media (prefers-reduced-motion: reduce) { .collapsing { + -webkit-transition: none; transition: none; } } .collapsing.collapse-horizontal { width: 0; height: auto; + -webkit-transition: width 0.35s ease; transition: width 0.35s ease; } @media (prefers-reduced-motion: reduce) { .collapsing.collapse-horizontal { + -webkit-transition: none; transition: none; } } @@ -4887,113 +5538,142 @@ textarea.form-control-lg { .link-primary { color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-primary:hover, .link-primary:focus { color: RGBA(118, 73, 227, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(118, 73, 227, var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(118, 73, 227, var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(118, 73, 227, var(--bs-link-underline-opacity, 1)) !important; } .link-secondary { color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-secondary:hover, .link-secondary:focus { color: RGBA(230, 234, 240, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(230, 234, 240, var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(230, 234, 240, var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(230, 234, 240, var(--bs-link-underline-opacity, 1)) !important; } .link-success { color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-success:hover, .link-success:focus { color: RGBA(7, 129, 57, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(7, 129, 57, var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(7, 129, 57, var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(7, 129, 57, var(--bs-link-underline-opacity, 1)) !important; } .link-info { color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-info:hover, .link-info:focus { color: RGBA(10, 77, 192, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(10, 77, 192, var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(10, 77, 192, var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(10, 77, 192, var(--bs-link-underline-opacity, 1)) !important; } .link-warning { color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-warning:hover, .link-warning:focus { color: RGBA(212, 192, 45, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(212, 192, 45, var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(212, 192, 45, var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(212, 192, 45, var(--bs-link-underline-opacity, 1)) !important; } .link-danger { color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-danger:hover, .link-danger:focus { color: RGBA(220, 70, 111, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(220, 70, 111, var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(220, 70, 111, var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(220, 70, 111, var(--bs-link-underline-opacity, 1)) !important; } .link-light { color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-light:hover, .link-light:focus { color: RGBA(255, 255, 255, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(255, 255, 255, var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(255, 255, 255, var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(255, 255, 255, var(--bs-link-underline-opacity, 1)) !important; } .link-dark { color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-dark:hover, .link-dark:focus { color: RGBA(17, 17, 18, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(17, 17, 18, var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(17, 17, 18, var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(17, 17, 18, var(--bs-link-underline-opacity, 1)) !important; } .link-body-emphasis { color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-body-emphasis:hover, .link-body-emphasis:focus { color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important; - text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important; + -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important; + text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important; } .focus-ring:focus { outline: 0; - box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color); + -webkit-box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color); + box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color); } .icon-link { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; gap: 0.375rem; - align-items: center; - text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5)); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5)); + text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5)); text-underline-offset: 0.25em; - backface-visibility: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } .icon-link > .bi { - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; width: 1em; height: 1em; fill: currentcolor; + -webkit-transition: 0.2s ease-in-out transform; transition: 0.2s ease-in-out transform; } @media (prefers-reduced-motion: reduce) { .icon-link > .bi { + -webkit-transition: none; transition: none; } } .icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi { - transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0)); + -webkit-transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0)); + transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0)); } .ratio { @@ -5046,12 +5726,14 @@ textarea.form-control-lg { } .sticky-top { + position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } .sticky-bottom { + position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1020; @@ -5059,11 +5741,13 @@ textarea.form-control-lg { @media (min-width: 576px) { .sticky-sm-top { + position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } .sticky-sm-bottom { + position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1020; @@ -5071,11 +5755,13 @@ textarea.form-control-lg { } @media (min-width: 576px) { .sticky-md-top { + position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } .sticky-md-bottom { + position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1020; @@ -5083,11 +5769,13 @@ textarea.form-control-lg { } @media (min-width: 992px) { .sticky-lg-top { + position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } .sticky-lg-bottom { + position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1020; @@ -5095,11 +5783,13 @@ textarea.form-control-lg { } @media (min-width: 1280px) { .sticky-xl-top { + position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } .sticky-xl-bottom { + position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1020; @@ -5107,28 +5797,46 @@ textarea.form-control-lg { } @media (min-width: 1512px) { .sticky-xxl-top { + position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } .sticky-xxl-bottom { + position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1020; } } .hstack { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; - align-items: center; - align-self: stretch; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-item-align: stretch; + align-self: stretch; } .vstack { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex: 1 1 auto; - flex-direction: column; - align-self: stretch; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-item-align: stretch; + align-self: stretch; } .visually-hidden, @@ -5169,7 +5877,8 @@ textarea.form-control-lg { .vr { display: inline-block; - align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; width: var(--bs-border-width); min-height: 1em; background-color: currentcolor; @@ -5213,23 +5922,28 @@ textarea.form-control-lg { } .object-fit-contain { - object-fit: contain !important; + -o-object-fit: contain !important; + object-fit: contain !important; } .object-fit-cover { - object-fit: cover !important; + -o-object-fit: cover !important; + object-fit: cover !important; } .object-fit-fill { - object-fit: fill !important; + -o-object-fit: fill !important; + object-fit: fill !important; } .object-fit-scale { - object-fit: scale-down !important; + -o-object-fit: scale-down !important; + object-fit: scale-down !important; } .object-fit-none { - object-fit: none !important; + -o-object-fit: none !important; + object-fit: none !important; } .opacity-0 { @@ -5333,10 +6047,14 @@ textarea.form-control-lg { } .d-flex, .bds-logo-rectangle-grid__text, .bds-logo-rectangle-grid__header, .bds-logo-rectangle-grid, .bds-logo-square-grid__text, .bds-logo-square-grid__header, .bds-logo-square-grid, .bds-callout-media-banner__text, .bds-callout-media-banner__content, .bds-callout-media-banner > [class*=bds-grid__col], .bds-callout-media-banner, .bds-button-group { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; } .d-inline-flex { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; display: inline-flex !important; } @@ -5345,19 +6063,23 @@ textarea.form-control-lg { } .shadow { - box-shadow: var(--bs-box-shadow) !important; + -webkit-box-shadow: var(--bs-box-shadow) !important; + box-shadow: var(--bs-box-shadow) !important; } .shadow-sm { - box-shadow: var(--bs-box-shadow-sm) !important; + -webkit-box-shadow: var(--bs-box-shadow-sm) !important; + box-shadow: var(--bs-box-shadow-sm) !important; } .shadow-lg { - box-shadow: var(--bs-box-shadow-lg) !important; + -webkit-box-shadow: var(--bs-box-shadow-lg) !important; + box-shadow: var(--bs-box-shadow-lg) !important; } .shadow-none { - box-shadow: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } .focus-ring-primary { @@ -5409,6 +6131,7 @@ textarea.form-control-lg { } .position-sticky { + position: -webkit-sticky !important; position: sticky !important; } @@ -5461,15 +6184,18 @@ textarea.form-control-lg { } .translate-middle { - transform: translate(-50%, -50%) !important; + -webkit-transform: translate(-50%, -50%) !important; + transform: translate(-50%, -50%) !important; } .translate-middle-x { - transform: translateX(-50%) !important; + -webkit-transform: translateX(-50%) !important; + transform: translateX(-50%) !important; } .translate-middle-y { - transform: translateY(-50%) !important; + -webkit-transform: translateY(-50%) !important; + transform: translateY(-50%) !important; } .border { @@ -5699,175 +6425,247 @@ textarea.form-control-lg { } .flex-fill { - flex: 1 1 auto !important; + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; } .flex-row, .bds-callout-media-banner { - flex-direction: row !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; } .flex-column, .bds-logo-rectangle-grid__text, .bds-logo-rectangle-grid__header, .bds-logo-rectangle-grid, .bds-logo-square-grid__text, .bds-logo-square-grid__header, .bds-logo-square-grid, .bds-callout-media-banner__text, .bds-callout-media-banner__content, .bds-callout-media-banner > [class*=bds-grid__col], .bds-button-group { - flex-direction: column !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; } .flex-row-reverse { - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; } .flex-column-reverse { - flex-direction: column-reverse !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; } .flex-grow-0 { - flex-grow: 0 !important; + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; } .flex-grow-1 { - flex-grow: 1 !important; + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; } .flex-shrink-0 { - flex-shrink: 0 !important; + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; } .flex-shrink-1 { - flex-shrink: 1 !important; + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; } .flex-wrap, .bds-button-group { - flex-wrap: wrap !important; + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; } .flex-nowrap { - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; } .flex-wrap-reverse { - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; } .justify-content-start { - justify-content: flex-start !important; + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; } .justify-content-end { - justify-content: flex-end !important; + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; } .justify-content-center { - justify-content: center !important; + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; } .justify-content-between, .bds-callout-media-banner__content { - justify-content: space-between !important; + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; } .justify-content-around { - justify-content: space-around !important; + -ms-flex-pack: distribute !important; + justify-content: space-around !important; } .justify-content-evenly { - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly !important; + -ms-flex-pack: space-evenly !important; + justify-content: space-evenly !important; } .align-items-start, .bds-button-group { - align-items: flex-start !important; + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; } .align-items-end { - align-items: flex-end !important; + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; } .align-items-center { - align-items: center !important; + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; } .align-items-baseline { - align-items: baseline !important; + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; } .align-items-stretch, .bds-callout-media-banner { - align-items: stretch !important; + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; } .align-content-start { - align-content: flex-start !important; + -ms-flex-line-pack: start !important; + align-content: flex-start !important; } .align-content-end { - align-content: flex-end !important; + -ms-flex-line-pack: end !important; + align-content: flex-end !important; } .align-content-center { - align-content: center !important; + -ms-flex-line-pack: center !important; + align-content: center !important; } .align-content-between { - align-content: space-between !important; + -ms-flex-line-pack: justify !important; + align-content: space-between !important; } .align-content-around { - align-content: space-around !important; + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; } .align-content-stretch { - align-content: stretch !important; + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; } .align-self-auto { - align-self: auto !important; + -ms-flex-item-align: auto !important; + align-self: auto !important; } .align-self-start { - align-self: flex-start !important; + -ms-flex-item-align: start !important; + align-self: flex-start !important; } .align-self-end { - align-self: flex-end !important; + -ms-flex-item-align: end !important; + align-self: flex-end !important; } .align-self-center { - align-self: center !important; + -ms-flex-item-align: center !important; + align-self: center !important; } .align-self-baseline { - align-self: baseline !important; + -ms-flex-item-align: baseline !important; + align-self: baseline !important; } .align-self-stretch { - align-self: stretch !important; + -ms-flex-item-align: stretch !important; + align-self: stretch !important; } .order-first { - order: -1 !important; + -webkit-box-ordinal-group: 0 !important; + -ms-flex-order: -1 !important; + order: -1 !important; } .order-0 { - order: 0 !important; + -webkit-box-ordinal-group: 1 !important; + -ms-flex-order: 0 !important; + order: 0 !important; } .order-1 { - order: 1 !important; + -webkit-box-ordinal-group: 2 !important; + -ms-flex-order: 1 !important; + order: 1 !important; } .order-2 { - order: 2 !important; + -webkit-box-ordinal-group: 3 !important; + -ms-flex-order: 2 !important; + order: 2 !important; } .order-3 { - order: 3 !important; + -webkit-box-ordinal-group: 4 !important; + -ms-flex-order: 3 !important; + order: 3 !important; } .order-4 { - order: 4 !important; + -webkit-box-ordinal-group: 5 !important; + -ms-flex-order: 4 !important; + order: 4 !important; } .order-5 { - order: 5 !important; + -webkit-box-ordinal-group: 6 !important; + -ms-flex-order: 5 !important; + order: 5 !important; } .order-last { - order: 6 !important; + -webkit-box-ordinal-group: 7 !important; + -ms-flex-order: 6 !important; + order: 6 !important; } .m-0 { @@ -6309,27 +7107,39 @@ textarea.form-control-lg { } .column-gap-0 { - column-gap: 0 !important; + -webkit-column-gap: 0 !important; + -moz-column-gap: 0 !important; + column-gap: 0 !important; } .column-gap-1 { - column-gap: 0.125rem !important; + -webkit-column-gap: 0.125rem !important; + -moz-column-gap: 0.125rem !important; + column-gap: 0.125rem !important; } .column-gap-2 { - column-gap: 0.25rem !important; + -webkit-column-gap: 0.25rem !important; + -moz-column-gap: 0.25rem !important; + column-gap: 0.25rem !important; } .column-gap-3 { - column-gap: 0.5rem !important; + -webkit-column-gap: 0.5rem !important; + -moz-column-gap: 0.5rem !important; + column-gap: 0.5rem !important; } .column-gap-4 { - column-gap: 0.75rem !important; + -webkit-column-gap: 0.75rem !important; + -moz-column-gap: 0.75rem !important; + column-gap: 0.75rem !important; } .column-gap-5 { - column-gap: 1.5rem !important; + -webkit-column-gap: 1.5rem !important; + -moz-column-gap: 1.5rem !important; + column-gap: 1.5rem !important; } .font-monospace { @@ -6667,47 +7477,56 @@ textarea.form-control-lg { .link-underline-primary { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important; + -webkit-text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-secondary { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important; + -webkit-text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-success { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important; + -webkit-text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-info { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important; + -webkit-text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-warning { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important; + -webkit-text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-danger { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important; + -webkit-text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-light { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important; + -webkit-text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline-dark { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important; + -webkit-text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important; + text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important; } .link-underline { --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important; + -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important; + text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-underline-opacity-0 { @@ -6885,15 +7704,23 @@ textarea.form-control-lg { } .user-select-all { - user-select: all !important; + -webkit-user-select: all !important; + -moz-user-select: all !important; + user-select: all !important; } .user-select-auto { - user-select: auto !important; + -webkit-user-select: auto !important; + -moz-user-select: auto !important; + -ms-user-select: auto !important; + user-select: auto !important; } .user-select-none { - user-select: none !important; + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; } .pe-none { @@ -7159,19 +7986,24 @@ textarea.form-control-lg { float: none !important; } .object-fit-sm-contain { - object-fit: contain !important; + -o-object-fit: contain !important; + object-fit: contain !important; } .object-fit-sm-cover { - object-fit: cover !important; + -o-object-fit: cover !important; + object-fit: cover !important; } .object-fit-sm-fill { - object-fit: fill !important; + -o-object-fit: fill !important; + object-fit: fill !important; } .object-fit-sm-scale { - object-fit: scale-down !important; + -o-object-fit: scale-down !important; + object-fit: scale-down !important; } .object-fit-sm-none { - object-fit: none !important; + -o-object-fit: none !important; + object-fit: none !important; } .d-sm-inline { display: inline !important; @@ -7198,142 +8030,218 @@ textarea.form-control-lg { display: table-cell !important; } .d-sm-flex { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; } .d-sm-inline-flex { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; display: inline-flex !important; } .d-sm-none { display: none !important; } .flex-sm-fill { - flex: 1 1 auto !important; + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; } .flex-sm-row { - flex-direction: row !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; } .flex-sm-column { - flex-direction: column !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; } .flex-sm-row-reverse { - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; } .flex-sm-column-reverse { - flex-direction: column-reverse !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; } .flex-sm-grow-0 { - flex-grow: 0 !important; + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; } .flex-sm-grow-1 { - flex-grow: 1 !important; + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; } .flex-sm-shrink-0 { - flex-shrink: 0 !important; + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; } .flex-sm-shrink-1 { - flex-shrink: 1 !important; + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; } .flex-sm-wrap { - flex-wrap: wrap !important; + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; } .flex-sm-nowrap { - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; } .justify-content-sm-start { - justify-content: flex-start !important; + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; } .justify-content-sm-end { - justify-content: flex-end !important; + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; } .justify-content-sm-center { - justify-content: center !important; + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; } .justify-content-sm-between { - justify-content: space-between !important; + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; } .justify-content-sm-around { - justify-content: space-around !important; + -ms-flex-pack: distribute !important; + justify-content: space-around !important; } .justify-content-sm-evenly { - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly !important; + -ms-flex-pack: space-evenly !important; + justify-content: space-evenly !important; } .align-items-sm-start { - align-items: flex-start !important; + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; } .align-items-sm-end { - align-items: flex-end !important; + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; } .align-items-sm-center { - align-items: center !important; + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; } .align-items-sm-baseline { - align-items: baseline !important; + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; } .align-items-sm-stretch { - align-items: stretch !important; + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; } .align-content-sm-start { - align-content: flex-start !important; + -ms-flex-line-pack: start !important; + align-content: flex-start !important; } .align-content-sm-end { - align-content: flex-end !important; + -ms-flex-line-pack: end !important; + align-content: flex-end !important; } .align-content-sm-center { - align-content: center !important; + -ms-flex-line-pack: center !important; + align-content: center !important; } .align-content-sm-between { - align-content: space-between !important; + -ms-flex-line-pack: justify !important; + align-content: space-between !important; } .align-content-sm-around { - align-content: space-around !important; + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; } .align-content-sm-stretch { - align-content: stretch !important; + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; } .align-self-sm-auto { - align-self: auto !important; + -ms-flex-item-align: auto !important; + align-self: auto !important; } .align-self-sm-start { - align-self: flex-start !important; + -ms-flex-item-align: start !important; + align-self: flex-start !important; } .align-self-sm-end { - align-self: flex-end !important; + -ms-flex-item-align: end !important; + align-self: flex-end !important; } .align-self-sm-center { - align-self: center !important; + -ms-flex-item-align: center !important; + align-self: center !important; } .align-self-sm-baseline { - align-self: baseline !important; + -ms-flex-item-align: baseline !important; + align-self: baseline !important; } .align-self-sm-stretch { - align-self: stretch !important; + -ms-flex-item-align: stretch !important; + align-self: stretch !important; } .order-sm-first { - order: -1 !important; + -webkit-box-ordinal-group: 0 !important; + -ms-flex-order: -1 !important; + order: -1 !important; } .order-sm-0 { - order: 0 !important; + -webkit-box-ordinal-group: 1 !important; + -ms-flex-order: 0 !important; + order: 0 !important; } .order-sm-1 { - order: 1 !important; + -webkit-box-ordinal-group: 2 !important; + -ms-flex-order: 1 !important; + order: 1 !important; } .order-sm-2 { - order: 2 !important; + -webkit-box-ordinal-group: 3 !important; + -ms-flex-order: 2 !important; + order: 2 !important; } .order-sm-3 { - order: 3 !important; + -webkit-box-ordinal-group: 4 !important; + -ms-flex-order: 3 !important; + order: 3 !important; } .order-sm-4 { - order: 4 !important; + -webkit-box-ordinal-group: 5 !important; + -ms-flex-order: 4 !important; + order: 4 !important; } .order-sm-5 { - order: 5 !important; + -webkit-box-ordinal-group: 6 !important; + -ms-flex-order: 5 !important; + order: 5 !important; } .order-sm-last { - order: 6 !important; + -webkit-box-ordinal-group: 7 !important; + -ms-flex-order: 6 !important; + order: 6 !important; } .m-sm-0 { margin: 0 !important; @@ -7671,22 +8579,34 @@ textarea.form-control-lg { row-gap: 1.5rem !important; } .column-gap-sm-0 { - column-gap: 0 !important; + -webkit-column-gap: 0 !important; + -moz-column-gap: 0 !important; + column-gap: 0 !important; } .column-gap-sm-1 { - column-gap: 0.125rem !important; + -webkit-column-gap: 0.125rem !important; + -moz-column-gap: 0.125rem !important; + column-gap: 0.125rem !important; } .column-gap-sm-2 { - column-gap: 0.25rem !important; + -webkit-column-gap: 0.25rem !important; + -moz-column-gap: 0.25rem !important; + column-gap: 0.25rem !important; } .column-gap-sm-3 { - column-gap: 0.5rem !important; + -webkit-column-gap: 0.5rem !important; + -moz-column-gap: 0.5rem !important; + column-gap: 0.5rem !important; } .column-gap-sm-4 { - column-gap: 0.75rem !important; + -webkit-column-gap: 0.75rem !important; + -moz-column-gap: 0.75rem !important; + column-gap: 0.75rem !important; } .column-gap-sm-5 { - column-gap: 1.5rem !important; + -webkit-column-gap: 1.5rem !important; + -moz-column-gap: 1.5rem !important; + column-gap: 1.5rem !important; } .text-sm-start { text-align: left !important; @@ -7709,19 +8629,24 @@ textarea.form-control-lg { float: none !important; } .object-fit-md-contain { - object-fit: contain !important; + -o-object-fit: contain !important; + object-fit: contain !important; } .object-fit-md-cover { - object-fit: cover !important; + -o-object-fit: cover !important; + object-fit: cover !important; } .object-fit-md-fill { - object-fit: fill !important; + -o-object-fit: fill !important; + object-fit: fill !important; } .object-fit-md-scale { - object-fit: scale-down !important; + -o-object-fit: scale-down !important; + object-fit: scale-down !important; } .object-fit-md-none { - object-fit: none !important; + -o-object-fit: none !important; + object-fit: none !important; } .d-md-inline { display: inline !important; @@ -7748,142 +8673,218 @@ textarea.form-control-lg { display: table-cell !important; } .d-md-flex { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; } .d-md-inline-flex { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; display: inline-flex !important; } .d-md-none { display: none !important; } .flex-md-fill { - flex: 1 1 auto !important; + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; } .flex-md-row { - flex-direction: row !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; } .flex-md-column { - flex-direction: column !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; } .flex-md-row-reverse { - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; } .flex-md-column-reverse { - flex-direction: column-reverse !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; } .flex-md-grow-0 { - flex-grow: 0 !important; + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; } .flex-md-grow-1 { - flex-grow: 1 !important; + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; } .flex-md-shrink-0 { - flex-shrink: 0 !important; + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; } .flex-md-shrink-1 { - flex-shrink: 1 !important; + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; } .flex-md-wrap { - flex-wrap: wrap !important; + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; } .flex-md-nowrap { - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; } .flex-md-wrap-reverse { - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; } .justify-content-md-start { - justify-content: flex-start !important; + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; } .justify-content-md-end { - justify-content: flex-end !important; + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; } .justify-content-md-center { - justify-content: center !important; + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; } .justify-content-md-between { - justify-content: space-between !important; + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; } .justify-content-md-around { - justify-content: space-around !important; + -ms-flex-pack: distribute !important; + justify-content: space-around !important; } .justify-content-md-evenly { - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly !important; + -ms-flex-pack: space-evenly !important; + justify-content: space-evenly !important; } .align-items-md-start { - align-items: flex-start !important; + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; } .align-items-md-end { - align-items: flex-end !important; + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; } .align-items-md-center { - align-items: center !important; + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; } .align-items-md-baseline { - align-items: baseline !important; + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; } .align-items-md-stretch { - align-items: stretch !important; + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; } .align-content-md-start { - align-content: flex-start !important; + -ms-flex-line-pack: start !important; + align-content: flex-start !important; } .align-content-md-end { - align-content: flex-end !important; + -ms-flex-line-pack: end !important; + align-content: flex-end !important; } .align-content-md-center { - align-content: center !important; + -ms-flex-line-pack: center !important; + align-content: center !important; } .align-content-md-between { - align-content: space-between !important; + -ms-flex-line-pack: justify !important; + align-content: space-between !important; } .align-content-md-around { - align-content: space-around !important; + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; } .align-content-md-stretch { - align-content: stretch !important; + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; } .align-self-md-auto { - align-self: auto !important; + -ms-flex-item-align: auto !important; + align-self: auto !important; } .align-self-md-start { - align-self: flex-start !important; + -ms-flex-item-align: start !important; + align-self: flex-start !important; } .align-self-md-end { - align-self: flex-end !important; + -ms-flex-item-align: end !important; + align-self: flex-end !important; } .align-self-md-center { - align-self: center !important; + -ms-flex-item-align: center !important; + align-self: center !important; } .align-self-md-baseline { - align-self: baseline !important; + -ms-flex-item-align: baseline !important; + align-self: baseline !important; } .align-self-md-stretch { - align-self: stretch !important; + -ms-flex-item-align: stretch !important; + align-self: stretch !important; } .order-md-first { - order: -1 !important; + -webkit-box-ordinal-group: 0 !important; + -ms-flex-order: -1 !important; + order: -1 !important; } .order-md-0 { - order: 0 !important; + -webkit-box-ordinal-group: 1 !important; + -ms-flex-order: 0 !important; + order: 0 !important; } .order-md-1 { - order: 1 !important; + -webkit-box-ordinal-group: 2 !important; + -ms-flex-order: 1 !important; + order: 1 !important; } .order-md-2 { - order: 2 !important; + -webkit-box-ordinal-group: 3 !important; + -ms-flex-order: 2 !important; + order: 2 !important; } .order-md-3 { - order: 3 !important; + -webkit-box-ordinal-group: 4 !important; + -ms-flex-order: 3 !important; + order: 3 !important; } .order-md-4 { - order: 4 !important; + -webkit-box-ordinal-group: 5 !important; + -ms-flex-order: 4 !important; + order: 4 !important; } .order-md-5 { - order: 5 !important; + -webkit-box-ordinal-group: 6 !important; + -ms-flex-order: 5 !important; + order: 5 !important; } .order-md-last { - order: 6 !important; + -webkit-box-ordinal-group: 7 !important; + -ms-flex-order: 6 !important; + order: 6 !important; } .m-md-0 { margin: 0 !important; @@ -8221,22 +9222,34 @@ textarea.form-control-lg { row-gap: 1.5rem !important; } .column-gap-md-0 { - column-gap: 0 !important; + -webkit-column-gap: 0 !important; + -moz-column-gap: 0 !important; + column-gap: 0 !important; } .column-gap-md-1 { - column-gap: 0.125rem !important; + -webkit-column-gap: 0.125rem !important; + -moz-column-gap: 0.125rem !important; + column-gap: 0.125rem !important; } .column-gap-md-2 { - column-gap: 0.25rem !important; + -webkit-column-gap: 0.25rem !important; + -moz-column-gap: 0.25rem !important; + column-gap: 0.25rem !important; } .column-gap-md-3 { - column-gap: 0.5rem !important; + -webkit-column-gap: 0.5rem !important; + -moz-column-gap: 0.5rem !important; + column-gap: 0.5rem !important; } .column-gap-md-4 { - column-gap: 0.75rem !important; + -webkit-column-gap: 0.75rem !important; + -moz-column-gap: 0.75rem !important; + column-gap: 0.75rem !important; } .column-gap-md-5 { - column-gap: 1.5rem !important; + -webkit-column-gap: 1.5rem !important; + -moz-column-gap: 1.5rem !important; + column-gap: 1.5rem !important; } .text-md-start { text-align: left !important; @@ -8259,19 +9272,24 @@ textarea.form-control-lg { float: none !important; } .object-fit-lg-contain { - object-fit: contain !important; + -o-object-fit: contain !important; + object-fit: contain !important; } .object-fit-lg-cover { - object-fit: cover !important; + -o-object-fit: cover !important; + object-fit: cover !important; } .object-fit-lg-fill { - object-fit: fill !important; + -o-object-fit: fill !important; + object-fit: fill !important; } .object-fit-lg-scale { - object-fit: scale-down !important; + -o-object-fit: scale-down !important; + object-fit: scale-down !important; } .object-fit-lg-none { - object-fit: none !important; + -o-object-fit: none !important; + object-fit: none !important; } .d-lg-inline { display: inline !important; @@ -8298,142 +9316,218 @@ textarea.form-control-lg { display: table-cell !important; } .d-lg-flex { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; } .d-lg-inline-flex { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; display: inline-flex !important; } .d-lg-none { display: none !important; } .flex-lg-fill { - flex: 1 1 auto !important; + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; } .flex-lg-row { - flex-direction: row !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; } .flex-lg-column { - flex-direction: column !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; } .flex-lg-row-reverse { - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; } .flex-lg-column-reverse { - flex-direction: column-reverse !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; } .flex-lg-grow-0 { - flex-grow: 0 !important; + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; } .flex-lg-grow-1 { - flex-grow: 1 !important; + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; } .flex-lg-shrink-0 { - flex-shrink: 0 !important; + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; } .flex-lg-shrink-1 { - flex-shrink: 1 !important; + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; } .flex-lg-wrap { - flex-wrap: wrap !important; + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; } .flex-lg-nowrap { - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; } .justify-content-lg-start { - justify-content: flex-start !important; + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; } .justify-content-lg-end { - justify-content: flex-end !important; + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; } .justify-content-lg-center { - justify-content: center !important; + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; } .justify-content-lg-between { - justify-content: space-between !important; + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; } .justify-content-lg-around { - justify-content: space-around !important; + -ms-flex-pack: distribute !important; + justify-content: space-around !important; } .justify-content-lg-evenly { - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly !important; + -ms-flex-pack: space-evenly !important; + justify-content: space-evenly !important; } .align-items-lg-start { - align-items: flex-start !important; + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; } .align-items-lg-end { - align-items: flex-end !important; + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; } .align-items-lg-center { - align-items: center !important; + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; } .align-items-lg-baseline { - align-items: baseline !important; + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; } .align-items-lg-stretch { - align-items: stretch !important; + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; } .align-content-lg-start { - align-content: flex-start !important; + -ms-flex-line-pack: start !important; + align-content: flex-start !important; } .align-content-lg-end { - align-content: flex-end !important; + -ms-flex-line-pack: end !important; + align-content: flex-end !important; } .align-content-lg-center { - align-content: center !important; + -ms-flex-line-pack: center !important; + align-content: center !important; } .align-content-lg-between { - align-content: space-between !important; + -ms-flex-line-pack: justify !important; + align-content: space-between !important; } .align-content-lg-around { - align-content: space-around !important; + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; } .align-content-lg-stretch { - align-content: stretch !important; + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; } .align-self-lg-auto { - align-self: auto !important; + -ms-flex-item-align: auto !important; + align-self: auto !important; } .align-self-lg-start { - align-self: flex-start !important; + -ms-flex-item-align: start !important; + align-self: flex-start !important; } .align-self-lg-end { - align-self: flex-end !important; + -ms-flex-item-align: end !important; + align-self: flex-end !important; } .align-self-lg-center { - align-self: center !important; + -ms-flex-item-align: center !important; + align-self: center !important; } .align-self-lg-baseline { - align-self: baseline !important; + -ms-flex-item-align: baseline !important; + align-self: baseline !important; } .align-self-lg-stretch { - align-self: stretch !important; + -ms-flex-item-align: stretch !important; + align-self: stretch !important; } .order-lg-first { - order: -1 !important; + -webkit-box-ordinal-group: 0 !important; + -ms-flex-order: -1 !important; + order: -1 !important; } .order-lg-0 { - order: 0 !important; + -webkit-box-ordinal-group: 1 !important; + -ms-flex-order: 0 !important; + order: 0 !important; } .order-lg-1 { - order: 1 !important; + -webkit-box-ordinal-group: 2 !important; + -ms-flex-order: 1 !important; + order: 1 !important; } .order-lg-2 { - order: 2 !important; + -webkit-box-ordinal-group: 3 !important; + -ms-flex-order: 2 !important; + order: 2 !important; } .order-lg-3 { - order: 3 !important; + -webkit-box-ordinal-group: 4 !important; + -ms-flex-order: 3 !important; + order: 3 !important; } .order-lg-4 { - order: 4 !important; + -webkit-box-ordinal-group: 5 !important; + -ms-flex-order: 4 !important; + order: 4 !important; } .order-lg-5 { - order: 5 !important; + -webkit-box-ordinal-group: 6 !important; + -ms-flex-order: 5 !important; + order: 5 !important; } .order-lg-last { - order: 6 !important; + -webkit-box-ordinal-group: 7 !important; + -ms-flex-order: 6 !important; + order: 6 !important; } .m-lg-0 { margin: 0 !important; @@ -8771,22 +9865,34 @@ textarea.form-control-lg { row-gap: 1.5rem !important; } .column-gap-lg-0 { - column-gap: 0 !important; + -webkit-column-gap: 0 !important; + -moz-column-gap: 0 !important; + column-gap: 0 !important; } .column-gap-lg-1 { - column-gap: 0.125rem !important; + -webkit-column-gap: 0.125rem !important; + -moz-column-gap: 0.125rem !important; + column-gap: 0.125rem !important; } .column-gap-lg-2 { - column-gap: 0.25rem !important; + -webkit-column-gap: 0.25rem !important; + -moz-column-gap: 0.25rem !important; + column-gap: 0.25rem !important; } .column-gap-lg-3 { - column-gap: 0.5rem !important; + -webkit-column-gap: 0.5rem !important; + -moz-column-gap: 0.5rem !important; + column-gap: 0.5rem !important; } .column-gap-lg-4 { - column-gap: 0.75rem !important; + -webkit-column-gap: 0.75rem !important; + -moz-column-gap: 0.75rem !important; + column-gap: 0.75rem !important; } .column-gap-lg-5 { - column-gap: 1.5rem !important; + -webkit-column-gap: 1.5rem !important; + -moz-column-gap: 1.5rem !important; + column-gap: 1.5rem !important; } .text-lg-start { text-align: left !important; @@ -8809,19 +9915,24 @@ textarea.form-control-lg { float: none !important; } .object-fit-xl-contain { - object-fit: contain !important; + -o-object-fit: contain !important; + object-fit: contain !important; } .object-fit-xl-cover { - object-fit: cover !important; + -o-object-fit: cover !important; + object-fit: cover !important; } .object-fit-xl-fill { - object-fit: fill !important; + -o-object-fit: fill !important; + object-fit: fill !important; } .object-fit-xl-scale { - object-fit: scale-down !important; + -o-object-fit: scale-down !important; + object-fit: scale-down !important; } .object-fit-xl-none { - object-fit: none !important; + -o-object-fit: none !important; + object-fit: none !important; } .d-xl-inline { display: inline !important; @@ -8848,142 +9959,218 @@ textarea.form-control-lg { display: table-cell !important; } .d-xl-flex { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; } .d-xl-inline-flex { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; display: inline-flex !important; } .d-xl-none { display: none !important; } .flex-xl-fill { - flex: 1 1 auto !important; + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; } .flex-xl-row { - flex-direction: row !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; } .flex-xl-column { - flex-direction: column !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; } .flex-xl-row-reverse { - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; } .flex-xl-column-reverse { - flex-direction: column-reverse !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; } .flex-xl-grow-0 { - flex-grow: 0 !important; + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; } .flex-xl-grow-1 { - flex-grow: 1 !important; + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; } .flex-xl-shrink-0 { - flex-shrink: 0 !important; + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; } .flex-xl-shrink-1 { - flex-shrink: 1 !important; + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; } .flex-xl-wrap { - flex-wrap: wrap !important; + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; } .flex-xl-nowrap { - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; } .justify-content-xl-start { - justify-content: flex-start !important; + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; } .justify-content-xl-end { - justify-content: flex-end !important; + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; } .justify-content-xl-center { - justify-content: center !important; + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; } .justify-content-xl-between { - justify-content: space-between !important; + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; } .justify-content-xl-around { - justify-content: space-around !important; + -ms-flex-pack: distribute !important; + justify-content: space-around !important; } .justify-content-xl-evenly { - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly !important; + -ms-flex-pack: space-evenly !important; + justify-content: space-evenly !important; } .align-items-xl-start { - align-items: flex-start !important; + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; } .align-items-xl-end { - align-items: flex-end !important; + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; } .align-items-xl-center { - align-items: center !important; + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; } .align-items-xl-baseline { - align-items: baseline !important; + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; } .align-items-xl-stretch { - align-items: stretch !important; + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; } .align-content-xl-start { - align-content: flex-start !important; + -ms-flex-line-pack: start !important; + align-content: flex-start !important; } .align-content-xl-end { - align-content: flex-end !important; + -ms-flex-line-pack: end !important; + align-content: flex-end !important; } .align-content-xl-center { - align-content: center !important; + -ms-flex-line-pack: center !important; + align-content: center !important; } .align-content-xl-between { - align-content: space-between !important; + -ms-flex-line-pack: justify !important; + align-content: space-between !important; } .align-content-xl-around { - align-content: space-around !important; + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; } .align-content-xl-stretch { - align-content: stretch !important; + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; } .align-self-xl-auto { - align-self: auto !important; + -ms-flex-item-align: auto !important; + align-self: auto !important; } .align-self-xl-start { - align-self: flex-start !important; + -ms-flex-item-align: start !important; + align-self: flex-start !important; } .align-self-xl-end { - align-self: flex-end !important; + -ms-flex-item-align: end !important; + align-self: flex-end !important; } .align-self-xl-center { - align-self: center !important; + -ms-flex-item-align: center !important; + align-self: center !important; } .align-self-xl-baseline { - align-self: baseline !important; + -ms-flex-item-align: baseline !important; + align-self: baseline !important; } .align-self-xl-stretch { - align-self: stretch !important; + -ms-flex-item-align: stretch !important; + align-self: stretch !important; } .order-xl-first { - order: -1 !important; + -webkit-box-ordinal-group: 0 !important; + -ms-flex-order: -1 !important; + order: -1 !important; } .order-xl-0 { - order: 0 !important; + -webkit-box-ordinal-group: 1 !important; + -ms-flex-order: 0 !important; + order: 0 !important; } .order-xl-1 { - order: 1 !important; + -webkit-box-ordinal-group: 2 !important; + -ms-flex-order: 1 !important; + order: 1 !important; } .order-xl-2 { - order: 2 !important; + -webkit-box-ordinal-group: 3 !important; + -ms-flex-order: 2 !important; + order: 2 !important; } .order-xl-3 { - order: 3 !important; + -webkit-box-ordinal-group: 4 !important; + -ms-flex-order: 3 !important; + order: 3 !important; } .order-xl-4 { - order: 4 !important; + -webkit-box-ordinal-group: 5 !important; + -ms-flex-order: 4 !important; + order: 4 !important; } .order-xl-5 { - order: 5 !important; + -webkit-box-ordinal-group: 6 !important; + -ms-flex-order: 5 !important; + order: 5 !important; } .order-xl-last { - order: 6 !important; + -webkit-box-ordinal-group: 7 !important; + -ms-flex-order: 6 !important; + order: 6 !important; } .m-xl-0 { margin: 0 !important; @@ -9321,22 +10508,34 @@ textarea.form-control-lg { row-gap: 1.5rem !important; } .column-gap-xl-0 { - column-gap: 0 !important; + -webkit-column-gap: 0 !important; + -moz-column-gap: 0 !important; + column-gap: 0 !important; } .column-gap-xl-1 { - column-gap: 0.125rem !important; + -webkit-column-gap: 0.125rem !important; + -moz-column-gap: 0.125rem !important; + column-gap: 0.125rem !important; } .column-gap-xl-2 { - column-gap: 0.25rem !important; + -webkit-column-gap: 0.25rem !important; + -moz-column-gap: 0.25rem !important; + column-gap: 0.25rem !important; } .column-gap-xl-3 { - column-gap: 0.5rem !important; + -webkit-column-gap: 0.5rem !important; + -moz-column-gap: 0.5rem !important; + column-gap: 0.5rem !important; } .column-gap-xl-4 { - column-gap: 0.75rem !important; + -webkit-column-gap: 0.75rem !important; + -moz-column-gap: 0.75rem !important; + column-gap: 0.75rem !important; } .column-gap-xl-5 { - column-gap: 1.5rem !important; + -webkit-column-gap: 1.5rem !important; + -moz-column-gap: 1.5rem !important; + column-gap: 1.5rem !important; } .text-xl-start { text-align: left !important; @@ -9359,19 +10558,24 @@ textarea.form-control-lg { float: none !important; } .object-fit-xxl-contain { - object-fit: contain !important; + -o-object-fit: contain !important; + object-fit: contain !important; } .object-fit-xxl-cover { - object-fit: cover !important; + -o-object-fit: cover !important; + object-fit: cover !important; } .object-fit-xxl-fill { - object-fit: fill !important; + -o-object-fit: fill !important; + object-fit: fill !important; } .object-fit-xxl-scale { - object-fit: scale-down !important; + -o-object-fit: scale-down !important; + object-fit: scale-down !important; } .object-fit-xxl-none { - object-fit: none !important; + -o-object-fit: none !important; + object-fit: none !important; } .d-xxl-inline { display: inline !important; @@ -9398,142 +10602,218 @@ textarea.form-control-lg { display: table-cell !important; } .d-xxl-flex { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; } .d-xxl-inline-flex { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; display: inline-flex !important; } .d-xxl-none { display: none !important; } .flex-xxl-fill { - flex: 1 1 auto !important; + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; } .flex-xxl-row { - flex-direction: row !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; } .flex-xxl-column { - flex-direction: column !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; } .flex-xxl-row-reverse { - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; } .flex-xxl-column-reverse { - flex-direction: column-reverse !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; } .flex-xxl-grow-0 { - flex-grow: 0 !important; + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; } .flex-xxl-grow-1 { - flex-grow: 1 !important; + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; } .flex-xxl-shrink-0 { - flex-shrink: 0 !important; + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; } .flex-xxl-shrink-1 { - flex-shrink: 1 !important; + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; } .flex-xxl-wrap { - flex-wrap: wrap !important; + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; } .flex-xxl-nowrap { - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; } .flex-xxl-wrap-reverse { - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; } .justify-content-xxl-start { - justify-content: flex-start !important; + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; } .justify-content-xxl-end { - justify-content: flex-end !important; + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; } .justify-content-xxl-center { - justify-content: center !important; + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; } .justify-content-xxl-between { - justify-content: space-between !important; + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; } .justify-content-xxl-around { - justify-content: space-around !important; + -ms-flex-pack: distribute !important; + justify-content: space-around !important; } .justify-content-xxl-evenly { - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly !important; + -ms-flex-pack: space-evenly !important; + justify-content: space-evenly !important; } .align-items-xxl-start { - align-items: flex-start !important; + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; } .align-items-xxl-end { - align-items: flex-end !important; + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; } .align-items-xxl-center { - align-items: center !important; + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; } .align-items-xxl-baseline { - align-items: baseline !important; + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; } .align-items-xxl-stretch { - align-items: stretch !important; + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; } .align-content-xxl-start { - align-content: flex-start !important; + -ms-flex-line-pack: start !important; + align-content: flex-start !important; } .align-content-xxl-end { - align-content: flex-end !important; + -ms-flex-line-pack: end !important; + align-content: flex-end !important; } .align-content-xxl-center { - align-content: center !important; + -ms-flex-line-pack: center !important; + align-content: center !important; } .align-content-xxl-between { - align-content: space-between !important; + -ms-flex-line-pack: justify !important; + align-content: space-between !important; } .align-content-xxl-around { - align-content: space-around !important; + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; } .align-content-xxl-stretch { - align-content: stretch !important; + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; } .align-self-xxl-auto { - align-self: auto !important; + -ms-flex-item-align: auto !important; + align-self: auto !important; } .align-self-xxl-start { - align-self: flex-start !important; + -ms-flex-item-align: start !important; + align-self: flex-start !important; } .align-self-xxl-end { - align-self: flex-end !important; + -ms-flex-item-align: end !important; + align-self: flex-end !important; } .align-self-xxl-center { - align-self: center !important; + -ms-flex-item-align: center !important; + align-self: center !important; } .align-self-xxl-baseline { - align-self: baseline !important; + -ms-flex-item-align: baseline !important; + align-self: baseline !important; } .align-self-xxl-stretch { - align-self: stretch !important; + -ms-flex-item-align: stretch !important; + align-self: stretch !important; } .order-xxl-first { - order: -1 !important; + -webkit-box-ordinal-group: 0 !important; + -ms-flex-order: -1 !important; + order: -1 !important; } .order-xxl-0 { - order: 0 !important; + -webkit-box-ordinal-group: 1 !important; + -ms-flex-order: 0 !important; + order: 0 !important; } .order-xxl-1 { - order: 1 !important; + -webkit-box-ordinal-group: 2 !important; + -ms-flex-order: 1 !important; + order: 1 !important; } .order-xxl-2 { - order: 2 !important; + -webkit-box-ordinal-group: 3 !important; + -ms-flex-order: 2 !important; + order: 2 !important; } .order-xxl-3 { - order: 3 !important; + -webkit-box-ordinal-group: 4 !important; + -ms-flex-order: 3 !important; + order: 3 !important; } .order-xxl-4 { - order: 4 !important; + -webkit-box-ordinal-group: 5 !important; + -ms-flex-order: 4 !important; + order: 4 !important; } .order-xxl-5 { - order: 5 !important; + -webkit-box-ordinal-group: 6 !important; + -ms-flex-order: 5 !important; + order: 5 !important; } .order-xxl-last { - order: 6 !important; + -webkit-box-ordinal-group: 7 !important; + -ms-flex-order: 6 !important; + order: 6 !important; } .m-xxl-0 { margin: 0 !important; @@ -9871,22 +11151,34 @@ textarea.form-control-lg { row-gap: 1.5rem !important; } .column-gap-xxl-0 { - column-gap: 0 !important; + -webkit-column-gap: 0 !important; + -moz-column-gap: 0 !important; + column-gap: 0 !important; } .column-gap-xxl-1 { - column-gap: 0.125rem !important; + -webkit-column-gap: 0.125rem !important; + -moz-column-gap: 0.125rem !important; + column-gap: 0.125rem !important; } .column-gap-xxl-2 { - column-gap: 0.25rem !important; + -webkit-column-gap: 0.25rem !important; + -moz-column-gap: 0.25rem !important; + column-gap: 0.25rem !important; } .column-gap-xxl-3 { - column-gap: 0.5rem !important; + -webkit-column-gap: 0.5rem !important; + -moz-column-gap: 0.5rem !important; + column-gap: 0.5rem !important; } .column-gap-xxl-4 { - column-gap: 0.75rem !important; + -webkit-column-gap: 0.75rem !important; + -moz-column-gap: 0.75rem !important; + column-gap: 0.75rem !important; } .column-gap-xxl-5 { - column-gap: 1.5rem !important; + -webkit-column-gap: 1.5rem !important; + -moz-column-gap: 1.5rem !important; + column-gap: 1.5rem !important; } .text-xxl-start { text-align: left !important; @@ -9938,9 +11230,13 @@ textarea.form-control-lg { display: table-cell !important; } .d-print-flex { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; } .d-print-inline-flex { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; display: inline-flex !important; } .d-print-none { @@ -9955,8 +11251,10 @@ body { pre, code { /* Disable ligatures on code-font, so, for example, a { height: 1.75em; line-height: 0; display: grid; - justify-content: center; - align-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-line-pack: center; + align-content: center; } .nav-toggler::after { - transition-duration: 0.3s; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; } .nav-toggler.collapsed::after { - transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } .dactyl-tree-nav nav { @@ -11164,7 +12522,8 @@ aside .active-parent > a { font-weight: bold; } .dactyl-tree-nav .collapsing.nav { - flex-wrap: unset; + -ms-flex-wrap: unset; + flex-wrap: unset; } /* Right navigation --------------------------------------------------------- */ @@ -11716,11 +13075,15 @@ aside .active-parent > a { } .justify-center { - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } @media (max-width: 575.98px) { .justify-center-sm { - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } } @@ -11752,7 +13115,9 @@ aside .active-parent > a { } .align-items-stretch, .bds-callout-media-banner { - align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } .underline { @@ -11828,6 +13193,18 @@ aside .active-parent > a { border-bottom: 1px solid #454549; } +@-webkit-keyframes arrowDance { + 0% { + padding-left: 7px; + } + 50% { + padding-left: 14px; + } + 100% { + padding-left: 7px; + } +} + @keyframes arrowDance { 0% { padding-left: 7px; @@ -11839,6 +13216,17 @@ aside .active-parent > a { padding-left: 7px; } } +@-webkit-keyframes arrowDance2 { + 0% { + right: 0; + } + 50% { + right: 7px; + } + 100% { + right: 0; + } +} @keyframes arrowDance2 { 0% { right: 0; @@ -11850,6 +13238,20 @@ aside .active-parent > a { right: 0; } } +@-webkit-keyframes arrowDanceDiag { + 0% { + right: 7px; + margin-top: 0; + } + 50% { + right: 0; + margin-top: -7px; + } + 100% { + right: 7px; + margin-top: 0; + } +} @keyframes arrowDanceDiag { 0% { right: 7px; @@ -11868,6 +13270,7 @@ aside .active-parent > a { font-weight: bold; cursor: pointer; text-decoration: none; + -webkit-transition: 0.2s; transition: 0.2s; padding: 0.5rem 1rem; line-height: 16px; @@ -11922,10 +13325,10 @@ button[disabled=disabled] { vertical-align: middle; padding-left: 8px; -webkit-transition: transform 0.3s ease-out; - -moz-transition: transform 0.3s ease-out; - -ms-transition: transform 0.3s ease-out; - -o-transition: transform 0.3s ease-out; + -webkit-transition: -webkit-transform 0.3s ease-out; + transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .btn-arrow:hover { background: #C0A7FF !important; @@ -11933,9 +13336,6 @@ button[disabled=disabled] { } .btn-arrow:hover::after { -webkit-transform: translateX(4px); - -moz-transform: translateX(4px); - -ms-transform: translateX(4px); - -o-transform: translateX(4px); transform: translateX(4px); } @@ -11946,6 +13346,7 @@ button[disabled=disabled] { background-repeat: no-repeat; display: inline-block; padding: 4px 8px 4px 12px; + -webkit-transition: background-position 0.3s ease-in-out; transition: background-position 0.3s ease-in-out; margin-left: 4px; } @@ -12298,33 +13699,33 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black .b stroke: #21E46B; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) { - color: #70EE97; + color: #70EE97 !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { - color: #70EE97; - stroke: #70EE97; + color: #70EE97 !important; + stroke: #70EE97 !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) { - color: #70EE97; + color: #70EE97 !important; outline: 2px solid #FFFFFF; outline-offset: 2px; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { - color: #70EE97; - stroke: #70EE97; + color: #70EE97 !important; + stroke: #70EE97 !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) { - color: #21E46B; + color: #21E46B !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:active:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-chevron { - color: #21E46B; - stroke: #21E46B; + color: #21E46B !important; + stroke: #21E46B !important; } html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black:disabled, html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bds-btn--disabled { color: #8A919A; @@ -12342,9 +13743,15 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd } .bds-btn { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; max-height: 40px; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; @@ -12378,7 +13785,10 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd position: relative; overflow: hidden; z-index: 1; + -webkit-transition: color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), border-color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), padding 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), gap 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), border-color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), padding 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), gap 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), border-color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), padding 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), gap 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), border-color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), padding 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), gap 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-btn::before { content: ""; @@ -12388,25 +13798,35 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd right: 0; bottom: 0; z-index: -1; - transform: scaleY(0); - transform-origin: bottom center; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: bottom center; + transform-origin: bottom center; + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-btn:hover:not(:disabled):not(.bds-btn--disabled)::before, .bds-btn:focus-visible:not(:disabled):not(.bds-btn--disabled)::before { - transform: scaleY(1); + -webkit-transform: scaleY(1); + transform: scaleY(1); } .bds-btn:active:not(:disabled):not(.bds-btn--disabled)::before { - transform: scaleY(0); + -webkit-transform: scaleY(0); + transform: scaleY(0); } .bds-btn__label { - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; position: relative; z-index: 1; } .bds-btn__icon { width: 15px; height: 14px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: opacity 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: opacity 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); color: currentColor; overflow: visible; @@ -12415,15 +13835,24 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd } .bds-btn__icon-line { transform-box: fill-box; - transform-origin: right center; - transform: scaleX(1); + -webkit-transform-origin: right center; + transform-origin: right center; + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-btn__icon-chevron { + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-btn:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line { - transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); } .bds-btn--primary { @@ -13242,19 +14671,188 @@ html.dark .bds-btn--tertiary:not(.bds-btn--black):disabled, html.dark .bds-btn-- } } -.bds-card-stat { +.bds-carousel-button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + background: none; + padding: 0; + margin: 0; + cursor: pointer; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 37px; + height: 37px; + -webkit-transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); +} +@media (min-width: 992px) { + .bds-carousel-button { + width: 40px; + height: 40px; + } +} +.bds-carousel-button:focus { + outline: 2px solid #FFFFFF; + outline-offset: 2px; +} +.bds-carousel-button:focus:not(:focus-visible) { + outline: none; +} +.bds-carousel-button:focus-visible { + outline: 2px solid #FFFFFF; + outline-offset: 2px; +} + +.bds-carousel-button__arrow-icon { + width: 18px; + height: 16px; +} +@media (max-width: 991.98px) { + .bds-carousel-button__arrow-icon { + width: 18px; + height: 15px; + } +} + +.bds-carousel-button--green { + background-color: #21E46B; + color: #141414; +} +.bds-carousel-button--green:hover:not(:disabled) { + background-color: #0DAA3E; +} +.bds-carousel-button--green:active:not(:disabled) { + background-color: #21E46B; +} +.bds-carousel-button--green.bds-carousel-button--disabled, .bds-carousel-button--green:disabled { + background-color: #078139 !important; + color: #F0F3F7 !important; + opacity: 0.5 !important; + cursor: not-allowed !important; +} + +.bds-carousel-button--neutral { + background-color: #CAD4DF; + color: #141414; +} +.bds-carousel-button--neutral:hover:not(:disabled) { + background-color: #8A919A; +} +.bds-carousel-button--neutral:active:not(:disabled) { + background-color: #CAD4DF; +} +.bds-carousel-button--neutral.bds-carousel-button--disabled, .bds-carousel-button--neutral:disabled { + background-color: #72777E !important; + color: #CAD4DF !important; + opacity: 0.5 !important; + cursor: not-allowed !important; +} + +.bds-carousel-button--black { + background-color: #FFFFFF; + color: #141414; +} +.bds-carousel-button--black:hover:not(:disabled) { + background-color: #CAD4DF; +} +.bds-carousel-button--black:active:not(:disabled) { + background-color: #FFFFFF; +} +.bds-carousel-button--black.bds-carousel-button--disabled, .bds-carousel-button--black:disabled { + background-color: #72777E !important; + opacity: 0.5 !important; + cursor: not-allowed !important; +} + +html.light .bds-carousel-button:focus { + outline-color: #111112; +} +html.light .bds-carousel-button:focus-visible { + outline-color: #111112; +} +html.light .bds-carousel-button--green { + background-color: #21E46B; + color: #141414; +} +html.light .bds-carousel-button--green:hover:not(:disabled) { + background-color: #70EE97; +} +html.light .bds-carousel-button--green:active:not(:disabled) { + background-color: #21E46B; +} +html.light .bds-carousel-button--green.bds-carousel-button--disabled, html.light .bds-carousel-button--green:disabled { + background-color: #EAFCF1 !important; + color: #CAD4DF !important; + opacity: 1 !important; + cursor: not-allowed !important; +} +html.light .bds-carousel-button--neutral { + background-color: #CAD4DF; + color: #141414; +} +html.light .bds-carousel-button--neutral:hover:not(:disabled) { + background-color: #E6EAF0; +} +html.light .bds-carousel-button--neutral:active:not(:disabled) { + background-color: #CAD4DF; +} +html.light .bds-carousel-button--neutral.bds-carousel-button--disabled, html.light .bds-carousel-button--neutral:disabled { + background-color: #F0F3F7 !important; + color: #CAD4DF !important; + opacity: 1 !important; + cursor: not-allowed !important; +} +html.light .bds-carousel-button--black { + background-color: #141414; + color: #FFFFFF; +} +html.light .bds-carousel-button--black:hover:not(:disabled) { + background-color: #72777E; +} +html.light .bds-carousel-button--black:active:not(:disabled) { + background-color: #141414; +} +html.light .bds-carousel-button--black.bds-carousel-button--disabled, html.light .bds-carousel-button--black:disabled { + background-color: #F0F3F7 !important; + color: #CAD4DF !important; + opacity: 1 !important; + cursor: not-allowed !important; +} + +.bds-card-stat { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; width: 100%; min-height: 200px; height: 100%; - justify-content: space-between; - flex: 1; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; padding: 8px; gap: 4px; background-color: #C0A7FF; color: #141414; + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } @media (min-width: 576px) { .bds-card-stat { @@ -13267,8 +14865,13 @@ html.dark .bds-btn--tertiary:not(.bds-btn--black):disabled, html.dark .bds-btn-- } } .bds-card-stat__text { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; } .bds-card-stat__statistic { @@ -13316,10 +14919,15 @@ html.dark .bds-btn--tertiary:not(.bds-btn--black):disabled, html.dark .bds-btn-- font-weight: 400; } .bds-card-stat__buttons { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; gap: 8px; - align-items: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } .bds-card-stat--lilac { @@ -13488,6 +15096,8 @@ article table td:nth-child(1) { html.light .cryptum { content: url(../img/uses/lightmode/cryptum.jpg) !important; height: 58px; + max-width: -webkit-max-content; + max-width: -moz-max-content; max-width: max-content; width: 184px; max-height: none; @@ -13850,9 +15460,14 @@ html.light .bitgo { top: 50%; left: 0; right: 0; - transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; z-index: 10; } @media only screen and (max-width: 768px) { @@ -13909,13 +15524,21 @@ html.light .bitgo { position: absolute; left: 50%; top: 50%; - transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); padding: 40px 20px 20px 20px; width: 60% !important; height: 520px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; overflow-y: hidden; } @media only screen and (max-width: 1024px) { @@ -13931,14 +15554,21 @@ html.light .bitgo { left: 0; width: 100%; height: 1px; + background: -webkit-gradient(linear, left top, right top, color-stop(-0.32%, #b480ff), color-stop(32.7%, #5f00e6), color-stop(61.53%, #1aa4ff), color-stop(100.32%, #19ff83), color-stop(100.32%, #19ff83)); background: linear-gradient(90deg, #b480ff -0.32%, #5f00e6 32.7%, #1aa4ff 61.53%, #19ff83 100.32%, #19ff83 100.32%); } .content-section { width: 100%; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; - align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; margin-bottom: 20px; } @@ -14033,22 +15663,34 @@ html.light .bitgo { } .flex-center { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .top-row, .bottom-row { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; - align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 20px; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } @media only screen and (max-width: 768px) { .top-row, .bottom-row { - justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; gap: 10px; margin-bottom: 0; } @@ -14103,9 +15745,15 @@ html.light .bitgo { } .use-case-circle { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; aspect-ratio: 1/1; border: 1px solid #343437; border-radius: 50%; @@ -14132,9 +15780,16 @@ html.light .bitgo { } .circle-content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 13px; /* Adjust the space between the elements */ } @@ -14153,18 +15808,33 @@ html.light .bitgo { } .join-xrpl-section { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .colorful-join-text-wrapper { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; - flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; padding: 0 5%; /* Percentage-based padding to make it responsive */ - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } @media (min-width: 992px) { @@ -14181,6 +15851,7 @@ html.light .bitgo { font-weight: 400; font-size: 32px; line-height: 38px; + background: -webkit-gradient(linear, left top, right top, from(#feff01), color-stop(30.82%, #ff2d9a), color-stop(64.01%, #e24cff), to(#9a52ff)); background: linear-gradient(90deg, #feff01 0%, #ff2d9a 30.82%, #e24cff 64.01%, #9a52ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; @@ -14228,6 +15899,7 @@ html.light .colorful-join-text { font-weight: 400; font-size: 32px; line-height: 38px; + background: -webkit-gradient(linear, left top, right top, color-stop(-0.32%, #b480ff), color-stop(32.7%, #5f00e6), color-stop(61.53%, #1aa4ff), color-stop(100.32%, #19ff83)); background: linear-gradient(90deg, #b480ff -0.32%, #5f00e6 32.7%, #1aa4ff 61.53%, #19ff83 100.32%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; @@ -14245,9 +15917,15 @@ html.light .colorful-join-text { } } .pill-box { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; padding: 3.69087px 29.527px; width: 73.05px; height: 37.38px; @@ -14312,6 +15990,7 @@ html.light .colorful-join-text { .related-tasks-links a::after { content: " ➝"; padding-left: 0; + -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @@ -14338,10 +16017,19 @@ html.light .colorful-join-text { } .page-tokenization .tokenization-use-case { font-size: 12px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #454549; @@ -14397,7 +16085,8 @@ html.light .colorful-join-text { margin-bottom: 9px; } .page-tokenization .tokenization-color-bar { - align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; height: 0.25rem; border-radius: 2rem; background: var(--Gradient-3, linear-gradient(90deg, #FEFF01 0%, #FF2D9A 30.82%, #E24CFF 64.01%, #9A52FF 100%)); @@ -14425,9 +16114,11 @@ html.light .colorful-join-text { border-top-right-radius: 0.5rem; } .page-tokenization .project-cards .col.odd::before { + background: -webkit-gradient(linear, left top, right top, color-stop(26.41%, #D91AFF), color-stop(100.32%, #1AA4FF)); background: linear-gradient(90deg, #D91AFF 26.41%, #1AA4FF 100.32%); } .page-tokenization .project-cards .col.even::before { + background: -webkit-gradient(linear, left top, right top, color-stop(-0.32%, #4BB7FF), color-stop(30.61%, #32E685)); background: linear-gradient(90deg, #4BB7FF -0.32%, #32E685 30.61%); } .page-tokenization .project-cards .project-logo { @@ -14440,7 +16131,8 @@ html.light .colorful-join-text { max-width: 100%; height: auto; display: block; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .page-tokenization .amy { content: url("../img/logos/amy.svg"); @@ -14474,7 +16166,8 @@ html.light .colorful-join-text { } .page-tokenization .next img { content: url("../img/icons/prev.svg"); - transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .page-tokenization .arrow-wrapper { gap: 1rem; @@ -14482,16 +16175,22 @@ html.light .colorful-join-text { .page-tokenization .arrow-button { background-color: #232325; border-radius: 0.25rem; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .page-tokenization .next.hover-color:hover img { content: url("../img/icons/next-purple.svg"); - transform: scaleX(1); + -webkit-transform: scaleX(1); + transform: scaleX(1); } .page-tokenization .prev.hover-color:hover img { content: url("../img/icons/next-purple.svg"); - transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } .page-tokenization .related-articles { gap: 2.5rem; @@ -14570,11 +16269,20 @@ body, } } .use-case-payments__hero { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; - justify-content: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; gap: 80px; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; max-width: 1280px; margin: 0 auto; padding: 80px 0px; @@ -14588,7 +16296,10 @@ body, } @media (max-width: 575.98px) { .use-case-payments__hero { - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 32px; max-width: 608px; padding: 60px 0px; @@ -14601,8 +16312,12 @@ body, } .use-case-payments .video-content { width: 50%; + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } .use-case-payments .video-content iframe { width: 100%; @@ -14610,7 +16325,8 @@ body, min-height: 380px; max-height: 560px; border-radius: 12px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } @media (max-width: 991.98px) { .use-case-payments .video-content iframe { @@ -14637,9 +16353,16 @@ body, } .use-case-payments .text-content { width: 50%; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .use-case-payments .text-content .eyebrow { font-size: 18px; @@ -14686,7 +16409,8 @@ body, border-radius: 0.5rem; background-color: transparent; white-space: normal; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .advantages-section .security-card .card-title { margin-bottom: 16px; @@ -14700,8 +16424,12 @@ body, left: 0; border-radius: inherit; padding: 1px; + background: -webkit-gradient(linear, left top, right top, color-stop(26.41%, #d91aff), color-stop(100.32%, #1aa4ff)); background: linear-gradient(90deg, #d91aff 26.41%, #1aa4ff 100.32%); - mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)); + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; z-index: -1; @@ -14896,9 +16624,11 @@ body, /* Alternating gradients for payments page */ } .use-case-payments .payments-project-card.odd::before { + background: -webkit-gradient(linear, left top, right top, color-stop(26.41%, #D91AFF), color-stop(100.32%, #1AA4FF)); background: linear-gradient(90deg, #D91AFF 26.41%, #1AA4FF 100.32%); } .use-case-payments .payments-project-card.even::before { + background: -webkit-gradient(linear, left top, right top, color-stop(-0.32%, #4BB7FF), color-stop(30.61%, #32E685)); background: linear-gradient(90deg, #4BB7FF -0.32%, #32E685 30.61%); } @@ -14909,8 +16639,13 @@ body, .use-case-payments .battle-tested-section .payments-project-card { /* Override styles for battle-tested cards */ min-height: 384px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .use-case-payments .battle-tested-section .payments-project-card .project-logo img { /* Battle-tested company logos */ @@ -14933,13 +16668,19 @@ body, height: 60px; } .use-case-payments .battle-tested-section .payments-project-card .project-description { - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } .use-case-payments .battle-tested-section .payments-project-card .project-button { margin-top: auto; padding-top: 32px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .use-case-payments .battle-tested-section .payments-project-card .project-button .battle-tested-arrow { color: #9A52FF; @@ -14948,8 +16689,12 @@ body, font-weight: 700; text-decoration: none; cursor: pointer; + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; background: none !important; } .use-case-payments .battle-tested-section .payments-project-card .project-button .battle-tested-arrow::after { @@ -14958,7 +16703,10 @@ body, display: inline-block; content: url("../img/icons/arrow-right-purple.svg"); margin-left: 8px; + -webkit-transition: -webkit-transform 0.3s ease-out; + transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; width: 16px; height: 16px; } @@ -14967,7 +16715,8 @@ body, background: none !important; } .use-case-payments .battle-tested-section .payments-project-card .project-button .battle-tested-arrow:hover::after { - transform: translateX(4px); + -webkit-transform: translateX(4px); + transform: translateX(4px); } .use-case-payments .battle-tested-section .payments-project-card .project-button .battle-tested-arrow:focus { background: none !important; @@ -15016,22 +16765,32 @@ body, .use-case-payments .payments-integration-section .row { gap: 48px; margin: 0; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } @media (max-width: 991px) { .use-case-payments .payments-integration-section .row { - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 32px; } } .use-case-payments .payments-integration-section .row .col-lg-6 { padding: 0; - flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } @media (max-width: 991px) { .use-case-payments .payments-integration-section .row .col-lg-6 { - flex: none; + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; width: 100%; } } @@ -15132,7 +16891,9 @@ body, } @media (min-width: 992px) { .top-nav #topnav-pages { - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } } .top-nav #topnav-pages .nav-link { @@ -15161,6 +16922,8 @@ body, } .top-nav .dropdown-menu .dropdown-item.dropdown-hero { width: 100%; + display: -webkit-box; + display: -ms-flexbox; display: flex; padding: 1rem 2rem; } @@ -15169,7 +16932,9 @@ body, height: 68px; background-color: #232325; border-radius: 4px; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; padding: 0.75rem; margin-right: 2rem; margin-top: auto; @@ -15210,11 +16975,16 @@ body, background-color: inherit; } .top-nav #topnav-search { - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } .top-nav #topnav-search .input-group { - flex-grow: 1; - flex-wrap: nowrap; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } @media (max-width: 575.98px) { .top-nav #topnav-search .form-inline { @@ -15327,7 +17097,9 @@ body, padding: 1.25rem; } .top-nav #topnav-pages { - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; } } @media (min-width: 992px) and (min-width: 992px) and (max-width: 1133px) { @@ -15337,7 +17109,9 @@ body, } @media (min-width: 992px) { .top-nav #topnav-language { - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; } .top-nav #topnav-language hr { display: none; @@ -15385,6 +17159,7 @@ body, display: block; width: 100%; height: 3px; + -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .top-nav .navbar-toggler .navbar-toggler-icon::before { @@ -15397,16 +17172,21 @@ body, top: calc(50% - 1.5px); } .top-nav .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before { - transform: translateY(8px) rotate(135deg); + -webkit-transform: translateY(8px) rotate(135deg); + transform: translateY(8px) rotate(135deg); } .top-nav .navbar-toggler:not(.collapsed) .navbar-toggler-icon::after { - transform: translateY(-9px) rotate(-135deg); + -webkit-transform: translateY(-9px) rotate(-135deg); + transform: translateY(-9px) rotate(-135deg); } .top-nav .navbar-toggler:not(.collapsed) .navbar-toggler-icon div { - transform: scale(0); + -webkit-transform: scale(0); + transform: scale(0); } .top-nav .navbar-nav { - align-items: unset !important; + -webkit-box-align: unset !important; + -ms-flex-align: unset !important; + align-items: unset !important; } .top-nav .navbar-nav #topnav-button { background-color: #111112; @@ -15431,6 +17211,7 @@ body, margin: 0; width: 100%; overflow: auto; + -webkit-transition: all 0.2s ease; transition: all 0.2s ease; height: 0; display: block; @@ -15485,6 +17266,7 @@ body, font-family: FontAwesome; color: #7649E3; font-size: 0.75rem; + -webkit-transition: all 0.2s ease; transition: all 0.2s ease; overflow: clip; width: 1rem; @@ -15532,7 +17314,8 @@ body, right: 105px; } .top-nav #topnav-search .input-group { - flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } .top-nav #topnav-language { position: absolute; @@ -15589,31 +17372,38 @@ article h1:first-of-type:before, article .h1:first-of-type:before { width: 0.5rem; height: 0.15rem; background-color: #7649E3; + -webkit-transition: all 0.2s ease; transition: all 0.2s ease; border: none; } .chevron:not(.expander) span:first-of-type { left: 0; - transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); } .chevron:not(.expander) span:last-of-type { right: 0; - transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); } .chevron.active span:first-of-type { - transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); } .chevron.active span:first-of-type { - transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); } .dropdown.show .chevron span:first-of-type, .expander:not(.collapsed) .chevron span:first-of-type { - transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); } .dropdown.show .chevron span:last-of-type, .expander:not(.collapsed) .chevron span:last-of-type { - transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); } #topnav-theme > div { @@ -15628,7 +17418,8 @@ article h1:first-of-type:before, article .h1:first-of-type:before { @media (max-width: 575.98px) { .navbar-collapse, .dropdown-menu { - box-shadow: 0px 25px 40px -20px #141414; + -webkit-box-shadow: 0px 25px 40px -20px #141414; + box-shadow: 0px 25px 40px -20px #141414; } } .bds-navbar { @@ -15639,7 +17430,8 @@ article h1:first-of-type:before, article .h1:first-of-type:before { padding: 0; background-color: #FFFFFF; border-bottom: none; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; z-index: 1000; } @media (min-width: 576px) { @@ -15653,9 +17445,15 @@ article h1:first-of-type:before, article .h1:first-of-type:before { } } .bds-navbar__content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; height: 100%; padding: 0 20px; max-width: 100%; @@ -15672,9 +17470,14 @@ article h1:first-of-type:before, article .h1:first-of-type:before { } } .bds-navbar__logo { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - flex-shrink: 0; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-negative: 0; + flex-shrink: 0; text-decoration: none; position: relative; } @@ -15712,19 +17515,24 @@ article h1:first-of-type:before, article .h1:first-of-type:before { position: absolute; left: 37px; top: 50%; - transform: translateY(-50%) translateX(-100%); + -webkit-transform: translateY(-50%) translateX(-100%); + transform: translateY(-50%) translateX(-100%); height: 15px; width: 125px; opacity: 0; margin-left: 8px; + -webkit-transition: opacity 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: opacity 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); pointer-events: none; } } @media (min-width: 992px) { .bds-navbar__logo:hover .bds-navbar__logo-text { opacity: 1; - transform: translateY(-50%) translateX(0); + -webkit-transform: translateY(-50%) translateX(0); + transform: translateY(-50%) translateX(0); } } .bds-navbar__logo-full { @@ -15732,14 +17540,20 @@ article h1:first-of-type:before, article .h1:first-of-type:before { } .bds-navbar__items { display: none; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; gap: 24px; font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; } @media (min-width: 576px) { .bds-navbar__items { + display: -webkit-box; + display: -ms-flexbox; display: flex; font-size: 14px; line-height: 20.1px; @@ -15753,7 +17567,8 @@ article h1:first-of-type:before, article .h1:first-of-type:before { gap: 32px; position: absolute; left: 50%; - transform: translateX(-50%); + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } } .bds-navbar__item { @@ -15761,6 +17576,7 @@ article h1:first-of-type:before, article .h1:first-of-type:before { text-decoration: none; white-space: nowrap; cursor: pointer; + -webkit-transition: color 0.2s ease; transition: color 0.2s ease; padding: 4px 0; } @@ -15777,26 +17593,40 @@ article h1:first-of-type:before, article .h1:first-of-type:before { } .bds-navbar__controls { display: none; - align-items: center; - justify-content: flex-end; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; gap: 16px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } @media (min-width: 576px) { .bds-navbar__controls { + display: -webkit-box; + display: -ms-flexbox; display: flex; } } .bds-navbar__icon { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 16px; height: 16px; padding: 0; background: transparent; border: none; cursor: pointer; + -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } @media (min-width: 992px) { @@ -15821,8 +17651,12 @@ article h1:first-of-type:before, article .h1:first-of-type:before { height: 100%; } .bds-navbar__lang-pill { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 4px; height: 28px; padding: 8px 9px 8px 8px; @@ -15835,6 +17669,7 @@ article h1:first-of-type:before, article .h1:first-of-type:before { font-size: 14px; line-height: 20.1px; color: #141414; + -webkit-transition: background-color 0.2s ease, border-color 0.2s ease; transition: background-color 0.2s ease, border-color 0.2s ease; } @media (min-width: 992px) { @@ -15860,7 +17695,8 @@ article h1:first-of-type:before, article .h1:first-of-type:before { .bds-navbar__lang-pill-icon { width: 16px; height: 16px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } @media (min-width: 992px) { .bds-navbar__lang-pill-icon { @@ -15869,40 +17705,59 @@ article h1:first-of-type:before, article .h1:first-of-type:before { } } .bds-navbar__lang-pill-text { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 4px; } .bds-navbar__lang-pill-chevron { width: 8px; height: 13px; - transform: rotate(90deg); - flex-shrink: 0; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: -webkit-transform 0.2s ease, -webkit-filter 0.2s ease; + transition: -webkit-transform 0.2s ease, -webkit-filter 0.2s ease; transition: transform 0.2s ease, filter 0.2s ease; + transition: transform 0.2s ease, filter 0.2s ease, -webkit-transform 0.2s ease, -webkit-filter 0.2s ease; } .bds-navbar__lang-pill--open { border-color: #0DAA3E; } .bds-navbar__lang-pill--open .bds-navbar__lang-pill-chevron { - transform: rotate(-90deg); - filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + -webkit-filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); + filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); } .bds-navbar__lang-pill--open .bds-navbar__lang-pill-icon { - filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); + -webkit-filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); + filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); } .bds-navbar__lang-wrapper { position: relative; } .bds-navbar__hamburger { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: none; cursor: pointer; + -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } @media (min-width: 576px) { @@ -15963,7 +17818,8 @@ html.dark .bds-navbar { background-color: #141414; } html.dark .bds-navbar__logo-symbol, html.dark .bds-navbar__logo-full, html.dark .bds-navbar__logo-text { - filter: invert(1); + -webkit-filter: invert(1); + filter: invert(1); } html.dark .bds-navbar__item { color: #FFFFFF; @@ -15979,7 +17835,8 @@ html.dark .bds-navbar__item:focus-visible { outline-offset: 2px; } html.dark .bds-navbar__icon img, html.dark .bds-navbar__icon svg { - filter: invert(1); + -webkit-filter: invert(1); + filter: invert(1); } html.dark .bds-navbar__icon:hover { opacity: 0.7; @@ -15993,7 +17850,8 @@ html.dark .bds-navbar__lang-pill { color: #FFFFFF; } html.dark .bds-navbar__lang-pill-icon, html.dark .bds-navbar__lang-pill-chevron { - filter: invert(1); + -webkit-filter: invert(1); + filter: invert(1); } html.dark .bds-navbar__lang-pill:hover { background-color: #232325; @@ -16006,14 +17864,18 @@ html.dark .bds-navbar__lang-pill--open { border-color: #21E46B; } html.dark .bds-navbar__lang-pill--open .bds-navbar__lang-pill-chevron { - transform: rotate(-90deg); - filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + -webkit-filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); + filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); } html.dark .bds-navbar__lang-pill--open .bds-navbar__lang-pill-icon { - filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); + -webkit-filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); + filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); } html.dark .bds-navbar__hamburger img, html.dark .bds-navbar__hamburger svg { - filter: invert(1); + -webkit-filter: invert(1); + filter: invert(1); } html.dark .bds-navbar__hamburger:hover { opacity: 0.7; @@ -16055,6 +17917,8 @@ html.dark .bds-submenu__sublink:hover { color: #21E46B; } html.dark .bds-submenu__sublink:hover .bds-submenu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } html.dark .bds-submenu__sublink:active { @@ -16104,6 +17968,8 @@ html.dark .bds-submenu a.bds-submenu__sublink:not(.bds-link):hover { text-decoration: none; } html.dark .bds-submenu a.bds-submenu__sublink:not(.bds-link):hover .bds-submenu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } html.dark .bds-submenu a.bds-submenu__sublink:not(.bds-link):active { @@ -16142,11 +18008,13 @@ html.dark .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible . html.dark .bds-submenu--network .bds-submenu__section { background-color: #111112 !important; - box-shadow: -8px 0 0 0 #343434, 8px 0 0 0 #343434, 0 -8px 0 0 #343434, 0 8px 0 0 #343434, -8px -8px 0 0 #343434, 8px -8px 0 0 #343434, -8px 8px 0 0 #343434, 8px 8px 0 0 #343434; + -webkit-box-shadow: -8px 0 0 0 #343434, 8px 0 0 0 #343434, 0 -8px 0 0 #343434, 0 8px 0 0 #343434, -8px -8px 0 0 #343434, 8px -8px 0 0 #343434, -8px 8px 0 0 #343434, 8px 8px 0 0 #343434; + box-shadow: -8px 0 0 0 #343434, 8px 0 0 0 #343434, 0 -8px 0 0 #343434, 0 8px 0 0 #343434, -8px -8px 0 0 #343434, 8px -8px 0 0 #343434, -8px 8px 0 0 #343434, 8px 8px 0 0 #343434; } html.dark .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(1), html.dark .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(2) { - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } html.dark .bds-mobile-menu { @@ -16187,6 +18055,8 @@ html.dark .bds-mobile-menu__sublink:hover { color: #21E46B; } html.dark .bds-mobile-menu__sublink:hover .bds-mobile-menu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } html.dark .bds-mobile-menu__sublink:active { @@ -16233,7 +18103,8 @@ html.dark .bds-mobile-menu__lang-pill { color: #FFFFFF; } html.dark .bds-mobile-menu__lang-pill-icon, html.dark .bds-mobile-menu__lang-pill-chevron { - filter: invert(1); + -webkit-filter: invert(1); + filter: invert(1); } html.dark .bds-mobile-menu__lang-pill:hover { background-color: #232325; @@ -16242,14 +18113,18 @@ html.dark .bds-mobile-menu__lang-pill--open { border-color: #21E46B; } html.dark .bds-mobile-menu__lang-pill--open .bds-mobile-menu__lang-pill-chevron { - transform: rotate(-90deg); - filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + -webkit-filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); + filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); } html.dark .bds-mobile-menu__lang-pill--open .bds-mobile-menu__lang-pill-icon { - filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); + -webkit-filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); + filter: invert(73%) sepia(48%) saturate(580%) hue-rotate(86deg) brightness(98%) contrast(93%); } html.dark .bds-mobile-menu__footer-icon img, html.dark .bds-mobile-menu__footer-icon svg { - filter: invert(1); + -webkit-filter: invert(1); + filter: invert(1); } html.dark .bds-mobile-menu__footer-icon:hover { opacity: 0.7; @@ -16266,6 +18141,8 @@ html.dark .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):hover { text-decoration: none; } html.dark .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):hover .bds-mobile-menu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } html.dark .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):active { @@ -16355,6 +18232,7 @@ html.dark:has(.bds-navbar) { background-color: rgba(230, 234, 240, 0.65); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); + -webkit-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out; } @media (min-width: 576px) { @@ -16373,23 +18251,52 @@ html.dark:has(.bds-navbar) { pointer-events: auto; } -@keyframes submenu-right-exit-diagonal { +@-webkit-keyframes submenu-right-exit-diagonal { 0% { - transform: translateX(0); + -webkit-transform: translateX(0); + transform: translateX(0); opacity: 1; } 100% { - transform: translate(-100%, -100%); + -webkit-transform: translate(-100%, -100%); + transform: translate(-100%, -100%); + opacity: 0; + } +} + +@keyframes submenu-right-exit-diagonal { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + 100% { + -webkit-transform: translate(-100%, -100%); + transform: translate(-100%, -100%); + opacity: 0; + } +} +@-webkit-keyframes submenu-left-exit-up { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + 100% { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); opacity: 0; } } @keyframes submenu-left-exit-up { 0% { - transform: translateY(0); + -webkit-transform: translateY(0); + transform: translateY(0); opacity: 1; } 100% { - transform: translateY(-100%); + -webkit-transform: translateY(-100%); + transform: translateY(-100%); opacity: 0; } } @@ -16398,7 +18305,8 @@ html.dark:has(.bds-navbar) { position: absolute; top: 100%; left: 50%; - transform: translateX(-50%); + -webkit-transform: translateX(-50%); + transform: translateX(-50%); z-index: 1001; pointer-events: none; overflow: hidden; @@ -16409,10 +18317,13 @@ html.dark:has(.bds-navbar) { padding: 8px; gap: 0; background-color: transparent; + -webkit-transition: opacity 100ms ease-out 400ms, visibility 0ms linear 500ms; transition: opacity 100ms ease-out 400ms, visibility 0ms linear 500ms; } @media (min-width: 576px) { .bds-submenu { + display: -webkit-box; + display: -ms-flexbox; display: flex; } } @@ -16421,30 +18332,42 @@ html.dark:has(.bds-navbar) { opacity: 1; visibility: visible; z-index: 1003; + -webkit-transition: opacity 0ms, visibility 0ms; transition: opacity 0ms, visibility 0ms; } .bds-submenu--active .bds-submenu__left { - transform: translateY(0); + -webkit-transform: translateY(0); + transform: translateY(0); opacity: 1; + -webkit-transition: opacity 150ms ease-out 100ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 100ms; + transition: opacity 150ms ease-out 100ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 100ms; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 100ms, opacity 150ms ease-out 100ms; + transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 100ms, opacity 150ms ease-out 100ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 100ms; } .bds-submenu--active .bds-submenu__right { - transform: translateX(0); + -webkit-transform: translateX(0); + transform: translateX(0); opacity: 1; + -webkit-transition: opacity 150ms ease-out 300ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 300ms; + transition: opacity 150ms ease-out 300ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 300ms; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 300ms, opacity 150ms ease-out 300ms; + transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 300ms, opacity 150ms ease-out 300ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 300ms; } .bds-submenu--closing { pointer-events: none; z-index: 1002; + -webkit-transition: opacity 100ms ease-out 250ms, visibility 0ms linear 350ms; transition: opacity 100ms ease-out 250ms, visibility 0ms linear 350ms; } .bds-submenu--closing .bds-submenu__left, .bds-submenu--closing .bds-submenu__right { background-color: transparent; - animation: submenu-left-exit-up 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; + -webkit-animation: submenu-left-exit-up 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; + animation: submenu-left-exit-up 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; } .bds-submenu--closing .bds-submenu__right { - animation: submenu-right-exit-diagonal 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; + -webkit-animation: submenu-right-exit-diagonal 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; + animation: submenu-right-exit-diagonal 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; } .bds-submenu-wrapper { position: absolute; @@ -16456,16 +18379,25 @@ html.dark:has(.bds-navbar) { .bds-submenu__left { position: relative; z-index: 2; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; width: 306px; height: 374px; padding-right: 8px; - transform: translateY(-100%); + -webkit-transform: translateY(-100%); + transform: translateY(-100%); opacity: 0; background-color: #E6EAF0; + -webkit-transition: opacity 150ms ease-in, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: opacity 150ms ease-in, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in; + transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-submenu__left::before { content: ""; @@ -16480,15 +18412,24 @@ html.dark:has(.bds-navbar) { .bds-submenu__right { position: relative; z-index: 1; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; width: 290px; height: 374px; - transform: translateX(-100%); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); opacity: 0; background-color: #E6EAF0; + -webkit-transition: opacity 150ms ease-in 150ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: opacity 150ms ease-in 150ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in 150ms; + transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in 150ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-submenu__right::before { content: ""; @@ -16501,40 +18442,69 @@ html.dark:has(.bds-navbar) { z-index: -1; } .bds-submenu__section { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: flex-start; - flex: 1 0 0; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; min-height: 1px; min-width: 1px; padding: 16px 24px; background-color: #FFFFFF; } .bds-submenu__tier1 { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; gap: 8px; width: 100%; } .bds-submenu:not(.bds-submenu--use-cases):not(.bds-submenu--community) .bds-submenu__left .bds-submenu__section { - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .bds-submenu__tier2 { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: flex-end; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; gap: 4px; padding-bottom: 16px; width: 100%; margin-top: auto; } .bds-submenu__icon { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 24px; height: 24px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; overflow: hidden; } .bds-submenu__icon img { @@ -16542,8 +18512,12 @@ html.dark:has(.bds-navbar) { height: 100%; } .bds-submenu__link { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 16px; color: #141414; text-decoration: none; @@ -16552,14 +18526,19 @@ html.dark:has(.bds-navbar) { font-weight: 400; line-height: 23.2px; white-space: nowrap; + -webkit-transition: color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), gap 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: color 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), gap 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-submenu__link--bold { font-weight: 500; } .bds-submenu__sublink { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 16px; color: #141414; text-decoration: none; @@ -16568,6 +18547,7 @@ html.dark:has(.bds-navbar) { font-weight: 400; line-height: 23.2px; white-space: nowrap; + -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .bds-submenu__sublink:hover, .bds-submenu__sublink:focus, .bds-submenu__sublink:active, .bds-submenu__sublink:visited { @@ -16578,6 +18558,8 @@ html.dark:has(.bds-navbar) { text-decoration: none; } .bds-submenu__sublink:hover .bds-submenu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } .bds-submenu__sublink:active { @@ -16585,6 +18567,8 @@ html.dark:has(.bds-navbar) { text-decoration: none; } .bds-submenu__sublink:active .bds-submenu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } .bds-submenu__sublink:focus { @@ -16598,15 +18582,22 @@ html.dark:has(.bds-navbar) { text-decoration: none; } .bds-submenu__sublink:focus-visible .bds-submenu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } .bds-submenu__sublink-arrow { display: none; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 15px; height: 14px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-submenu__sublink-arrow svg { width: 100%; @@ -16631,6 +18622,8 @@ html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link):hover { text-decoration: none; } html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link):hover .bds-submenu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } html.light .bds-submenu a.bds-submenu__sublink:not(.bds-link):active { @@ -16668,21 +18661,35 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible } .bds-submenu__arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 15px; height: 14px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: -webkit-transform 0.2s ease; + transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; + transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .bds-submenu__arrow svg { width: 100%; height: 100%; } .bds-submenu__parent-link { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; gap: 8px; width: 100%; text-decoration: none; @@ -16694,15 +18701,21 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible .bds-submenu__parent-link .bds-submenu__link { color: #141414; text-decoration: none; + -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .bds-submenu__parent-link .bds-submenu__link .bds-submenu__arrow svg path { stroke: #141414; + -webkit-transition: stroke 0.2s ease; transition: stroke 0.2s ease; } .bds-submenu__parent-link .bds-submenu__link .bds-submenu__arrow svg .arrow-horizontal { - transform-origin: right center; + -webkit-transform-origin: right center; + transform-origin: right center; + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-submenu__parent-link:hover { text-decoration: none; @@ -16716,7 +18729,8 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible stroke: #0DAA3E; } .bds-submenu__parent-link:hover .bds-submenu__link .bds-submenu__arrow svg .arrow-horizontal { - transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); } .bds-submenu__parent-link:active { text-decoration: none; @@ -16730,7 +18744,8 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible stroke: #078139; } .bds-submenu__parent-link:active .bds-submenu__link .bds-submenu__arrow svg .arrow-horizontal { - transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); } .bds-submenu__parent-link:focus { outline: none; @@ -16750,13 +18765,18 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible stroke: #0DAA3E; } .bds-submenu__parent-link:focus-visible .bds-submenu__link .bds-submenu__arrow svg .arrow-horizontal { - transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); } .bds-navbar__item-wrapper { position: relative; + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .bds-submenu--use-cases { @@ -16770,9 +18790,16 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible min-height: 374px; } .bds-submenu--use-cases .bds-submenu__section { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } .bds-submenu--use-cases .bds-submenu__tier2 { margin-top: 0; @@ -16791,27 +18818,39 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible height: 374px; } .bds-submenu--community .bds-submenu__section { - flex: none !important; + -webkit-box-flex: 0 !important; + -ms-flex: none !important; + flex: none !important; } .bds-submenu--community .bds-submenu__left .bds-submenu__section:nth-child(1) { height: 270px; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } .bds-submenu--community .bds-submenu__left .bds-submenu__section:nth-child(2) { height: 96px; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .bds-submenu--community .bds-submenu__right .bds-submenu__section:nth-child(1) { height: 270px; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } .bds-submenu--community .bds-submenu__right .bds-submenu__section:nth-child(2) { height: 96px; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .bds-submenu--community .bds-submenu__tier2 { margin-top: auto; - justify-content: flex-end; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; gap: 4px; } @@ -16820,7 +18859,10 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible height: 390px; gap: 0; background-color: transparent; - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } .bds-submenu--network .bds-submenu__left, .bds-submenu--network .bds-submenu__right { @@ -16828,62 +18870,96 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible } .bds-submenu--network .bds-submenu__section { position: relative; - flex: none !important; + -webkit-box-flex: 0 !important; + -ms-flex: none !important; + flex: none !important; width: 290px; height: 374px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; padding: 16px 24px; gap: 0; background-color: #FFFFFF !important; - box-shadow: -8px 0 0 0 #E6EAF0, 8px 0 0 0 #E6EAF0, 0 -8px 0 0 #E6EAF0, 0 8px 0 0 #E6EAF0, -8px -8px 0 0 #E6EAF0, 8px -8px 0 0 #E6EAF0, -8px 8px 0 0 #E6EAF0, 8px 8px 0 0 #E6EAF0; + -webkit-box-shadow: -8px 0 0 0 #E6EAF0, 8px 0 0 0 #E6EAF0, 0 -8px 0 0 #E6EAF0, 0 8px 0 0 #E6EAF0, -8px -8px 0 0 #E6EAF0, 8px -8px 0 0 #E6EAF0, -8px 8px 0 0 #E6EAF0, 8px 8px 0 0 #E6EAF0; + box-shadow: -8px 0 0 0 #E6EAF0, 8px 0 0 0 #E6EAF0, 0 -8px 0 0 #E6EAF0, 0 8px 0 0 #E6EAF0, -8px -8px 0 0 #E6EAF0, 8px -8px 0 0 #E6EAF0, -8px 8px 0 0 #E6EAF0, 8px 8px 0 0 #E6EAF0; } .bds-submenu--network .bds-submenu__section:nth-child(1) { z-index: 2; width: 298px; padding-right: 32px; - transform: translateY(-100%); + -webkit-transform: translateY(-100%); + transform: translateY(-100%); opacity: 0; + -webkit-transition: opacity 150ms ease-in, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-box-shadow 0ms; + transition: opacity 150ms ease-in, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-box-shadow 0ms; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in, box-shadow 0ms; + transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in, box-shadow 0ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-box-shadow 0ms; } .bds-submenu--network .bds-submenu__section:nth-child(2) { z-index: 1; - transform: translateX(-100%); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); opacity: 0; + -webkit-transition: opacity 150ms ease-in 150ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-box-shadow 0ms; + transition: opacity 150ms ease-in 150ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-box-shadow 0ms; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in 150ms, box-shadow 0ms; + transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-in 150ms, box-shadow 0ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-box-shadow 0ms; } .bds-submenu--network.bds-submenu--active .bds-submenu__section:nth-child(1) { - transform: translateY(0); + -webkit-transform: translateY(0); + transform: translateY(0); opacity: 1; + -webkit-transition: opacity 150ms ease-out, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: opacity 150ms ease-out, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-out; + transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 150ms ease-out, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-submenu--network.bds-submenu--active .bds-submenu__section:nth-child(2) { - transform: translateX(0); + -webkit-transform: translateX(0); + transform: translateX(0); opacity: 1; + -webkit-transition: opacity 150ms ease-out 200ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms; + transition: opacity 150ms ease-out 200ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms; transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms, opacity 150ms ease-out 200ms; + transition: transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms, opacity 150ms ease-out 200ms, -webkit-transform 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) 200ms; } .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(1), .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(2) { - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(1) { - animation: submenu-left-exit-up 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; + -webkit-animation: submenu-left-exit-up 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; + animation: submenu-left-exit-up 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; } .bds-submenu--network.bds-submenu--closing .bds-submenu__section:nth-child(2) { - animation: submenu-right-exit-diagonal 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; + -webkit-animation: submenu-right-exit-diagonal 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; + animation: submenu-right-exit-diagonal 300ms cubic-bezier(0.98, 0.12, 0.12, 0.98) forwards; } .bds-submenu--network .bds-submenu__tier1 { - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-submenu--network .bds-submenu__network-content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; margin-top: 108px; width: 242px; height: 210px; } .bds-submenu--network .bds-submenu__tier2 { - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; height: 80px; margin-top: 0; gap: 4px; @@ -16893,7 +18969,8 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible width: 242px; height: 114px; overflow: hidden; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-submenu--network .bds-submenu__pattern { width: 100%; @@ -16909,33 +18986,56 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible bottom: 0; background-color: #FFFFFF; z-index: 1002; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; overflow-y: auto; - transform: translateX(100%); + -webkit-transform: translateX(100%); + transform: translateX(100%); + -webkit-transition: -webkit-transform 300ms ease-out; + transition: -webkit-transform 300ms ease-out; transition: transform 300ms ease-out; + transition: transform 300ms ease-out, -webkit-transform 300ms ease-out; } @media (max-width: 575.98px) { .bds-mobile-menu { + display: -webkit-box; + display: -ms-flexbox; display: flex; } } .bds-mobile-menu--open { - transform: translateX(0); + -webkit-transform: translateX(0); + transform: translateX(0); } .bds-mobile-menu__header { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; height: 80px; padding: 24px; background-color: #FFFFFF; border-bottom: 1px solid #E6EAF0; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-mobile-menu__close { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 28px; height: 28px; padding: 0; @@ -16948,21 +19048,39 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible height: 100%; } .bds-mobile-menu__content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - flex: 1; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; width: 100%; padding: 0 16px; } .bds-mobile-menu__accordion { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; width: 100%; } .bds-mobile-menu__accordion-header { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; width: 100%; padding: 16px 8px; background-color: #FFFFFF; @@ -16980,12 +19098,21 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible background-color: #F0F3F7; } .bds-mobile-menu__chevron { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 13px; height: 8px; + -webkit-transition: color 200ms ease, -webkit-transform 200ms ease; + transition: color 200ms ease, -webkit-transform 200ms ease; transition: transform 200ms ease, color 200ms ease; + transition: transform 200ms ease, color 200ms ease, -webkit-transform 200ms ease; color: #141414; } .bds-mobile-menu__chevron img, .bds-mobile-menu__chevron svg { @@ -16993,12 +19120,14 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible height: 100%; } .bds-mobile-menu__chevron--expanded { - transform: rotate(180deg); + -webkit-transform: rotate(180deg); + transform: rotate(180deg); color: #21E46B; } .bds-mobile-menu__accordion-content { max-height: 0; overflow: hidden; + -webkit-transition: max-height 300ms ease-out; transition: max-height 300ms ease-out; background-color: #FFFFFF; border-bottom: 1px solid #CAD4DF; @@ -17007,31 +19136,52 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible max-height: 600px; } .bds-mobile-menu__tier-list { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 16px; padding: 8px 8px 16px 8px; } .bds-mobile-menu__tier1 { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 8px; width: 100%; } .bds-mobile-menu__tier2 { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 4px; width: 100%; padding-left: 26px; } .bds-mobile-menu__icon { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 18px; height: 18px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; overflow: hidden; } .bds-mobile-menu__icon img { @@ -17039,8 +19189,12 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible height: 100%; } .bds-mobile-menu__link { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 16px; color: #141414; text-decoration: none; @@ -17049,14 +19203,19 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible font-weight: 400; line-height: 20.1px; white-space: nowrap; + -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .bds-mobile-menu__link--bold { font-weight: 500; } .bds-mobile-menu__sublink { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 16px; color: #141414; text-decoration: none; @@ -17065,6 +19224,7 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible font-weight: 300; line-height: 20.1px; white-space: nowrap; + -webkit-transition: color 0.2s ease, font-weight 0.2s ease; transition: color 0.2s ease, font-weight 0.2s ease; } .bds-mobile-menu__sublink:hover, .bds-mobile-menu__sublink:focus, .bds-mobile-menu__sublink:active, .bds-mobile-menu__sublink:visited { @@ -17075,6 +19235,8 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible text-decoration: none; } .bds-mobile-menu__sublink:hover .bds-mobile-menu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } .bds-mobile-menu__sublink:active { @@ -17082,6 +19244,8 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible text-decoration: none; } .bds-mobile-menu__sublink:active .bds-mobile-menu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } .bds-mobile-menu__sublink:focus { @@ -17095,15 +19259,22 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible text-decoration: none; } .bds-mobile-menu__sublink:focus-visible .bds-mobile-menu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } .bds-mobile-menu__sublink-arrow { display: none; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 14px; height: 13px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-mobile-menu__sublink-arrow svg { width: 100%; @@ -17113,21 +19284,35 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible stroke: currentColor; } .bds-mobile-menu__arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 14px; height: 13px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: -webkit-transform 0.2s ease; + transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; + transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .bds-mobile-menu__arrow svg { width: 100%; height: 100%; } .bds-mobile-menu__parent-link { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 8px; width: 100%; text-decoration: none; @@ -17139,15 +19324,21 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible .bds-mobile-menu__parent-link .bds-mobile-menu__link { color: #141414; text-decoration: none; + -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .bds-mobile-menu__parent-link .bds-mobile-menu__link .bds-mobile-menu__arrow svg path { stroke: #141414; + -webkit-transition: stroke 0.2s ease; transition: stroke 0.2s ease; } .bds-mobile-menu__parent-link .bds-mobile-menu__link .bds-mobile-menu__arrow svg .arrow-horizontal { - transform-origin: right center; + -webkit-transform-origin: right center; + transform-origin: right center; + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-mobile-menu__parent-link:hover { text-decoration: none; @@ -17160,7 +19351,8 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible stroke: #0DAA3E; } .bds-mobile-menu__parent-link:hover .bds-mobile-menu__link .bds-mobile-menu__arrow svg .arrow-horizontal { - transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); } .bds-mobile-menu__parent-link:active { text-decoration: none; @@ -17173,7 +19365,8 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible stroke: #078139; } .bds-mobile-menu__parent-link:active .bds-mobile-menu__link .bds-mobile-menu__arrow svg .arrow-horizontal { - transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); } .bds-mobile-menu__parent-link:focus { outline: none; @@ -17192,16 +19385,23 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible stroke: #0DAA3E; } .bds-mobile-menu__parent-link:focus-visible .bds-mobile-menu__link .bds-mobile-menu__arrow svg .arrow-horizontal { - transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); } .bds-mobile-menu__footer { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 16px; padding: 24px; background-color: #FFFFFF; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; margin-top: auto; + position: -webkit-sticky; position: sticky; bottom: 0; z-index: 10; @@ -17210,8 +19410,12 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible position: relative; } .bds-mobile-menu__lang-pill { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 4px; height: 28px; padding: 8px 9px 8px 8px; @@ -17231,34 +19435,53 @@ html.light .bds-submenu a.bds-submenu__parent-link:not(.bds-link):focus-visible .bds-mobile-menu__lang-pill-icon { width: 16px; height: 16px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-mobile-menu__lang-pill-text { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 4px; } .bds-mobile-menu__lang-pill-chevron { width: 8px; height: 13px; - transform: rotate(90deg); - flex-shrink: 0; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: -webkit-transform 0.2s ease, -webkit-filter 0.2s ease; + transition: -webkit-transform 0.2s ease, -webkit-filter 0.2s ease; transition: transform 0.2s ease, filter 0.2s ease; + transition: transform 0.2s ease, filter 0.2s ease, -webkit-transform 0.2s ease, -webkit-filter 0.2s ease; } .bds-mobile-menu__lang-pill--open { border-color: #0DAA3E; } .bds-mobile-menu__lang-pill--open .bds-mobile-menu__lang-pill-chevron { - transform: rotate(-90deg); - filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + -webkit-filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); + filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); } .bds-mobile-menu__lang-pill--open .bds-mobile-menu__lang-pill-icon { - filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); + -webkit-filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); + filter: invert(42%) sepia(93%) saturate(1095%) hue-rotate(108deg) brightness(92%) contrast(93%); } .bds-mobile-menu__footer-icon { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 16px; height: 16px; padding: 0; @@ -17309,6 +19532,8 @@ html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):hover { text-decoration: none; } html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):hover .bds-mobile-menu__sublink-arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; } html.light .bds-mobile-menu a.bds-mobile-menu__sublink:not(.bds-link):active { @@ -17350,19 +19575,29 @@ html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):focus- top: calc(100% + 8px); right: 0; z-index: 1000; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 4px; padding: 4px; border-radius: 18px; min-width: 120px; background-color: #FFFFFF; border: 1.3px solid #141414; - animation: bds-dropdown-fade-in 0.2s ease; + -webkit-animation: bds-dropdown-fade-in 0.2s ease; + animation: bds-dropdown-fade-in 0.2s ease; } .bds-lang-dropdown__item { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; height: 32px; padding: 8px 13px 8px 12px; background: transparent; @@ -17375,6 +19610,7 @@ html.light .bds-mobile-menu a.bds-mobile-menu__parent-link:not(.bds-link):focus- line-height: 23.2px; text-align: left; white-space: nowrap; + -webkit-transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease; color: #141414; } @@ -17425,36 +19661,71 @@ html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active:active { color: #141414; } -@keyframes bds-dropdown-fade-in { +@-webkit-keyframes bds-dropdown-fade-in { from { opacity: 0; - transform: translateY(-4px); + -webkit-transform: translateY(-4px); + transform: translateY(-4px); } to { opacity: 1; - transform: translateY(0); + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes bds-dropdown-fade-in { + from { + opacity: 0; + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + } + to { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } .bds-lang-dropdown--mobile { top: auto; bottom: calc(100% + 8px); - animation: bds-dropdown-fade-in-mobile 0.2s ease; + -webkit-animation: bds-dropdown-fade-in-mobile 0.2s ease; + animation: bds-dropdown-fade-in-mobile 0.2s ease; +} + +@-webkit-keyframes bds-dropdown-fade-in-mobile { + from { + opacity: 0; + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + to { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } } @keyframes bds-dropdown-fade-in-mobile { from { opacity: 0; - transform: translateY(4px); + -webkit-transform: translateY(4px); + transform: translateY(4px); } to { opacity: 1; - transform: translateY(0); + -webkit-transform: translateY(0); + transform: translateY(0); } } .web-banner { text-decoration: none; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; height: 0; background: #32E685 !important; padding: 7px 35px; @@ -17473,8 +19744,12 @@ html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active:active { color: #FFFFFF; } .web-banner:hover .button-icon { - animation: iconJitter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; + -webkit-animation: iconJitter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; + animation: iconJitter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; + -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .web-banner::after { content: ""; @@ -17485,14 +19760,23 @@ html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active:active { height: 100%; background-color: #E0E500; z-index: 0; - transform: scaleX(0); - transform-origin: left; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: left; + transform-origin: left; + -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.7, 0, 0.84, 0); + transition: -webkit-transform 0.7s cubic-bezier(0.7, 0, 0.84, 0); transition: transform 0.7s cubic-bezier(0.7, 0, 0.84, 0); + transition: transform 0.7s cubic-bezier(0.7, 0, 0.84, 0), -webkit-transform 0.7s cubic-bezier(0.7, 0, 0.84, 0); will-change: transform; } .web-banner:hover::after { - transform: scaleX(1); + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .web-banner > * { position: relative; @@ -17520,7 +19804,10 @@ html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active:active { } .web-banner .banner-event-details { gap: 0px !important; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; text-align: left; line-height: 21px; } @@ -17529,15 +19816,20 @@ html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active:active { top: -5px; } .web-banner .banner-button { - align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; gap: 8px !important; margin-top: -2px !important; padding-top: 0px !important; } } .web-banner .banner-button { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 14.5px; padding-top: 1px; } @@ -17559,26 +19851,48 @@ html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active:active { } } .web-banner .banner-event-details { + display: -webkit-box; + display: -ms-flexbox; display: flex; gap: 32px; } .web-banner .button-icon { - transform-style: preserve-3d; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; aspect-ratio: 0.71; - object-fit: contain; - animation: none; - transform: rotateZ(0deg); + -o-object-fit: contain; + object-fit: contain; + -webkit-animation: none; + animation: none; + -webkit-transform: rotateZ(0deg); + transform: rotateZ(0deg); + -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); - align-self: stretch; + transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + -ms-flex-item-align: stretch; + align-self: stretch; margin: auto 0; transform-style: preserve-3d; } -@keyframes iconJitter { +@-webkit-keyframes iconJitter { from { - transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); + -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); + transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); } to { - transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); + -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); + transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); + } +} +@keyframes iconJitter { + from { + -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); + transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); + } + to { + -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); + transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); } } @@ -17587,23 +19901,45 @@ html.dark .bds-lang-dropdown .bds-lang-dropdown__item--active:active { } .button-icon { - animation: iconJitter 0.7s ease-in-out; - animation-iteration-count: 1; + -webkit-animation: iconJitter 0.7s ease-in-out; + animation: iconJitter 0.7s ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); +} + +@-webkit-keyframes iconReturn { + from { + -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); + transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); + } + to { + -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); + transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); + } } @keyframes iconReturn { from { - transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); + -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); + transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg); } to { - transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); + -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); + transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg); } } /* After the banner has been hovered once, on unhover run the reverse animation */ .web-banner.has-hover:not(:hover) .button-icon { - animation: iconReturn 0.7s ease-in-out forwards; + -webkit-animation: iconReturn 0.7s ease-in-out forwards; + animation: iconReturn 0.7s ease-in-out forwards; + -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + transition: -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); + transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } /* Content text styling (applies mostly to Markdown-generated content)------- */ @@ -17730,7 +20066,8 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov margin-left: auto; padding-right: 16px; padding-left: 16px; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } @media (min-width: 576px) { .bds-grid__container { @@ -17769,229 +20106,312 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } } .bds-grid__row { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; gap: 8px; } .bds-grid__col { - box-sizing: border-box; - flex: auto; - flex-shrink: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + -ms-flex-negative: 0; + flex-shrink: 0; width: 100%; max-width: 100%; } .bds-grid__col-fill { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; width: auto; } .bds-grid__col-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 1 + 8px * (1 - 1)); } @media (min-width: 576px) { .bds-grid__col-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); } } @media (min-width: 992px) { .bds-grid__col-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); } } .bds-grid__col-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 2 + 8px * (2 - 1)); } @media (min-width: 576px) { .bds-grid__col-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); } } @media (min-width: 992px) { .bds-grid__col-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); } } .bds-grid__col-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 3 + 8px * (3 - 1)); } @media (min-width: 576px) { .bds-grid__col-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); } } @media (min-width: 992px) { .bds-grid__col-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); } } .bds-grid__col-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); } } @media (min-width: 992px) { .bds-grid__col-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); } } .bds-grid__col-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); } } @media (min-width: 992px) { .bds-grid__col-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); } } .bds-grid__col-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); } } @media (min-width: 992px) { .bds-grid__col-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); } } .bds-grid__col-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); } } @media (min-width: 992px) { .bds-grid__col-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); } } .bds-grid__col-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); } } .bds-grid__col-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); } } .bds-grid__col-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); } } .bds-grid__col-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); } } .bds-grid__col-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1)); } @media (min-width: 576px) { .bds-grid__col-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } } @media (min-width: 992px) { .bds-grid__col-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); } } .bds-grid__col-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } @@ -18013,43 +20433,63 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov @media (min-width: 576px) { .bds-grid__col-md-fill { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; width: auto; } .bds-grid__col-md-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1)); } .bds-grid__col-md-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1)); } .bds-grid__col-md-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1)); } .bds-grid__col-md-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1)); } .bds-grid__col-md-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1)); } .bds-grid__col-md-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1)); } .bds-grid__col-md-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1)); } .bds-grid__col-md-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1)); } .bds-grid__col-md-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .bds-grid__offset-md-0 { @@ -18079,59 +20519,87 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } @media (min-width: 992px) { .bds-grid__col-lg-fill { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; width: auto; } .bds-grid__col-lg-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); } .bds-grid__col-lg-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); } .bds-grid__col-lg-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); } .bds-grid__col-lg-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); } .bds-grid__col-lg-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); } .bds-grid__col-lg-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); } .bds-grid__col-lg-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); } .bds-grid__col-lg-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); } .bds-grid__col-lg-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); } .bds-grid__col-lg-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); } .bds-grid__col-lg-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); } .bds-grid__col-lg-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); } .bds-grid__col-lg-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .bds-grid__offset-lg-0 { @@ -18173,59 +20641,87 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } @media (min-width: 1280px) { .bds-grid__col-xl-fill { - flex: 1 0 0; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; width: auto; } .bds-grid__col-xl-1 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); } .bds-grid__col-xl-2 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); } .bds-grid__col-xl-3 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); } .bds-grid__col-xl-4 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1)); } .bds-grid__col-xl-5 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1)); } .bds-grid__col-xl-6 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1)); } .bds-grid__col-xl-7 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1)); } .bds-grid__col-xl-8 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1)); } .bds-grid__col-xl-9 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1)); } .bds-grid__col-xl-10 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1)); } .bds-grid__col-xl-11 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1)); } .bds-grid__col-xl-12 { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1)); } .bds-grid__col-xl-auto { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: auto; } .bds-grid__offset-xl-0 { @@ -18266,10 +20762,17 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov } } .bds-link-icon { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-link-icon svg { display: block; @@ -18278,25 +20781,32 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov stroke: currentColor; } .bds-link-icon svg .arrow-horizontal { + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-link-icon--internal svg .arrow-horizontal { - transform-origin: right center; + -webkit-transform-origin: right center; + transform-origin: right center; } .bds-link-icon--external svg .arrow-horizontal { - transform-origin: 19px 2px; + -webkit-transform-origin: 19px 2px; + transform-origin: 19px 2px; } a:hover .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal, a:focus .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal { - transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); } a:hover .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal, a:focus .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal { - transform: scale(0); + -webkit-transform: scale(0); + transform: scale(0); } .bds-link-icon--disabled { @@ -18307,6 +20817,7 @@ a:focus .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizo stroke: currentColor; } .bds-link-icon--disabled svg .arrow-horizontal { + -webkit-transition: none; transition: none; } @@ -18371,11 +20882,18 @@ html:not(.light) .bds-link-icon--disabled svg path { } .bds-link { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 8px; text-decoration: none; + -webkit-transition: color 0.2s ease, -webkit-text-decoration 0.2s ease; + transition: color 0.2s ease, -webkit-text-decoration 0.2s ease; transition: color 0.2s ease, text-decoration 0.2s ease; + transition: color 0.2s ease, text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease; cursor: pointer; } .bds-link:focus-visible { @@ -18384,7 +20902,8 @@ html:not(.light) .bds-link-icon--disabled svg path { } .bds-link .bds-link-icon { margin-left: 0; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-link--small { @@ -18625,8 +21144,10 @@ hr.bds-divider, display: block; height: auto; min-height: 1px; - align-self: stretch; - flex-shrink: 0; + -ms-flex-item-align: stretch; + align-self: stretch; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-divider--thin.bds-divider--horizontal { @@ -18679,7 +21200,9 @@ html.light .bds-divider--green { } .bds-card-offgrid { - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; border: none; background: none; padding: 0; @@ -18690,13 +21213,21 @@ html.light .bds-divider--green { cursor: pointer; text-align: left; position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; width: 400px; height: 480px; padding: 24px; overflow: hidden; + -webkit-transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-offgrid:focus { @@ -18716,23 +21247,35 @@ html.light .bds-divider--green { inset: 0; pointer-events: none; z-index: 0; - clip-path: inset(100% 0 0 0); + -webkit-clip-path: inset(100% 0 0 0); + clip-path: inset(100% 0 0 0); + -webkit-transition: -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-offgrid--hovered .bds-card-offgrid__overlay { - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-card-offgrid__icon-container { position: relative; z-index: 1; + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 84px; height: 84px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-card-offgrid__icon-container > * { max-width: 68px; @@ -18744,14 +21287,20 @@ html.light .bds-divider--green { height: auto; max-width: 68px; max-height: 68px; - object-fit: contain; + -o-object-fit: contain; + object-fit: contain; } .bds-card-offgrid__content { position: relative; z-index: 1; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 40px; } @@ -18769,7 +21318,8 @@ html.light .bds-divider--green { } .bds-card-offgrid--neutral:active:not(.bds-card-offgrid--disabled) .bds-card-offgrid__overlay { background-color: rgba(114, 119, 126, 0.7); - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-card-offgrid--green { @@ -18781,7 +21331,8 @@ html.light .bds-divider--green { } .bds-card-offgrid--green:active:not(.bds-card-offgrid--disabled) .bds-card-offgrid__overlay { background-color: #0DAA3E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-card-offgrid--disabled { @@ -18812,7 +21363,8 @@ html.light .bds-card-offgrid--neutral.bds-card-offgrid--hovered { } html.light .bds-card-offgrid--neutral:active:not(.bds-card-offgrid--disabled) .bds-card-offgrid__overlay { background-color: #8A919A; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.light .bds-card-offgrid--green { background-color: #70EE97; @@ -18823,7 +21375,8 @@ html.light .bds-card-offgrid--green .bds-card-offgrid__overlay { } html.light .bds-card-offgrid--green:active:not(.bds-card-offgrid--disabled) .bds-card-offgrid__overlay { background-color: #0DAA3E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.light .bds-card-offgrid--disabled { background-color: #F0F3F7; @@ -18842,15 +21395,22 @@ html.light .bds-card-offgrid--disabled .bds-card-offgrid__icon-container { } } .bds-card-image { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 24px; width: 100%; background-color: #FFFFFF; cursor: pointer; } .bds-grid__col .bds-card-image { - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; width: 100%; } .bds-card-image:focus { @@ -18866,14 +21426,21 @@ html.light .bds-card-offgrid--disabled .bds-card-offgrid__icon-container { } .bds-card-image__image-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 100%; height: 400px; background-color: var(--bds-card-image-bg, #F0F3F7); overflow: hidden; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-card-image__image { @@ -18881,9 +21448,14 @@ html.light .bds-card-offgrid--disabled .bds-card-offgrid__icon-container { max-height: 100%; width: auto; height: auto; - object-fit: contain; - object-position: center; + -o-object-fit: contain; + object-fit: contain; + -o-object-position: center; + object-position: center; + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-transform 150ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-image--full-bleed { @@ -18900,24 +21472,40 @@ html.light .bds-card-offgrid--disabled .bds-card-offgrid__icon-container { height: 100%; max-width: none; max-height: none; - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; } .bds-card-image__content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; - flex: 1; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; padding: 0 8px; padding-bottom: 8px; min-height: 0; } .bds-card-image__text { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 12px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } .bds-card-image__title { @@ -18941,8 +21529,10 @@ html.light .bds-card-offgrid--disabled .bds-card-offgrid__icon-container { } .bds-card-image__content .bds-btn { - align-self: flex-start; - flex-shrink: 0; + -ms-flex-item-align: start; + align-self: flex-start; + -ms-flex-negative: 0; + flex-shrink: 0; margin-top: 24px; } @media (min-width: 576px) { @@ -18958,7 +21548,8 @@ html.light .bds-card-offgrid--disabled .bds-card-offgrid__icon-container { .bds-card-image--hovered:not(.bds-card-image--disabled) .bds-card-image__image, .bds-card-image:hover:not(.bds-card-image--disabled) .bds-card-image__image { - transform: scale(1.1); + -webkit-transform: scale(1.1); + transform: scale(1.1); } .bds-card-image--disabled { @@ -19034,7 +21625,9 @@ html.dark .bds-card-image--disabled .bds-card-image__subtitle { } .bds-tile-logo { - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; border: none; background: none; margin: 0; @@ -19043,13 +21636,21 @@ html.dark .bds-card-image--disabled .bds-card-image__subtitle { text-decoration: none; text-align: center; position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; overflow: hidden; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; width: 100%; cursor: pointer; + -webkit-transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-tile-logo:focus { @@ -19067,7 +21668,8 @@ html.dark .bds-card-image--disabled .bds-card-image__subtitle { .bds-tile-logo--square { aspect-ratio: 1; padding: 36px 20px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } @media (min-width: 576px) { .bds-tile-logo--square { @@ -19084,7 +21686,8 @@ html.dark .bds-card-image--disabled .bds-card-image__subtitle { aspect-ratio: 9/5; width: 100%; padding: 20px 36px; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } @media (min-width: 992px) { .bds-tile-logo--rectangle { @@ -19097,12 +21700,17 @@ html.dark .bds-card-image--disabled .bds-card-image__subtitle { inset: 0; pointer-events: none; z-index: 0; - clip-path: inset(100% 0 0 0); + -webkit-clip-path: inset(100% 0 0 0); + clip-path: inset(100% 0 0 0); + -webkit-transition: -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-tile-logo--hovered .bds-tile-logo__overlay { - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-tile-logo__image { @@ -19112,7 +21720,8 @@ html.dark .bds-card-image--disabled .bds-card-image__subtitle { max-height: 100%; width: auto; height: auto; - object-fit: contain; + -o-object-fit: contain; + object-fit: contain; } .bds-tile-logo--neutral { @@ -19123,7 +21732,8 @@ html.dark .bds-card-image--disabled .bds-card-image__subtitle { } .bds-tile-logo--neutral:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #8A919A; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-tile-logo--green { @@ -19134,7 +21744,8 @@ html.dark .bds-card-image--disabled .bds-card-image__subtitle { } .bds-tile-logo--green:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #0DAA3E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-tile-logo--disabled { @@ -19163,7 +21774,8 @@ html.dark .bds-tile-logo--neutral .bds-tile-logo__overlay { } html.dark .bds-tile-logo--neutral:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: rgba(114, 119, 126, 0.7); - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.dark .bds-tile-logo--green { background-color: #70EE97; @@ -19173,7 +21785,8 @@ html.dark .bds-tile-logo--green .bds-tile-logo__overlay { } html.dark .bds-tile-logo--green:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #0DAA3E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.dark .bds-tile-logo--disabled { background-color: rgba(114, 119, 126, 0.3); @@ -19197,7 +21810,8 @@ html.light .bds-tile-logo--neutral .bds-tile-logo__overlay { } html.light .bds-tile-logo--neutral:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #8A919A; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.light .bds-tile-logo--green { background-color: #70EE97; @@ -19207,7 +21821,8 @@ html.light .bds-tile-logo--green .bds-tile-logo__overlay { } html.light .bds-tile-logo--green:active:not(.bds-tile-logo--disabled) .bds-tile-logo__overlay { background-color: #0DAA3E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.light .bds-tile-logo--disabled { background-color: #F0F3F7; @@ -19218,7 +21833,9 @@ html.light .bds-tile-logo--disabled .bds-tile-logo__image { } .bds-card-icon { - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; border: none; background: none; margin: 0; @@ -19227,11 +21844,19 @@ html.light .bds-tile-logo--disabled .bds-tile-logo__image { text-decoration: none; text-align: left; position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; overflow: hidden; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; width: 100%; height: 136px; padding: 8px; @@ -19250,6 +21875,7 @@ html.light .bds-tile-logo--disabled .bds-tile-logo__image { } .bds-card-icon { cursor: pointer; + -webkit-transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-icon:hover { @@ -19272,20 +21898,31 @@ html.light .bds-tile-logo--disabled .bds-tile-logo__image { inset: 0; pointer-events: none; z-index: 0; - clip-path: inset(100% 0 0 0); + -webkit-clip-path: inset(100% 0 0 0); + clip-path: inset(100% 0 0 0); + -webkit-transition: -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-card-icon--hovered .bds-card-icon__overlay { - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-card-icon__icon { position: relative; z-index: 1; + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; width: 56px; height: 56px; } @@ -19307,15 +21944,22 @@ html.light .bds-tile-logo--disabled .bds-tile-logo__image { max-height: 100%; width: auto; height: auto; - object-fit: contain; + -o-object-fit: contain; + object-fit: contain; } .bds-card-icon__content { position: relative; z-index: 1; + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; width: 100%; } @@ -19337,20 +21981,23 @@ html.light .bds-tile-logo--disabled .bds-tile-logo__image { } .bds-card-icon__arrow { - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; color: #141414; } .bds-card-icon:hover .bds-card-icon__arrow .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal, .bds-card-icon:focus .bds-card-icon__arrow .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal, .bds-card-icon--hovered .bds-card-icon__arrow .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal { - transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); } .bds-card-icon:hover .bds-card-icon__arrow .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal, .bds-card-icon:focus .bds-card-icon__arrow .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal, .bds-card-icon--hovered .bds-card-icon__arrow .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal { - transform: scale(0); + -webkit-transform: scale(0); + transform: scale(0); } .bds-card-icon--neutral { @@ -19361,7 +22008,8 @@ html.light .bds-tile-logo--disabled .bds-tile-logo__image { } .bds-card-icon--neutral:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #8A919A; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-card-icon--green { @@ -19372,7 +22020,8 @@ html.light .bds-tile-logo--disabled .bds-tile-logo__image { } .bds-card-icon--green:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #0DAA3E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-card-icon--disabled { @@ -19421,7 +22070,8 @@ html.dark .bds-card-icon--neutral .bds-card-icon__overlay { } html.dark .bds-card-icon--neutral:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: rgba(114, 119, 126, 0.7); - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.dark .bds-card-icon--green { background-color: #21E46B; @@ -19435,7 +22085,8 @@ html.dark .bds-card-icon--green .bds-card-icon__overlay { } html.dark .bds-card-icon--green:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #0DAA3E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.dark .bds-card-icon--disabled { opacity: 0.3; @@ -19482,7 +22133,8 @@ html.light .bds-card-icon--neutral:focus { } html.light .bds-card-icon--neutral:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #8A919A; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.light .bds-card-icon--green { background-color: #70EE97; @@ -19499,7 +22151,8 @@ html.light .bds-card-icon--green:focus { } html.light .bds-card-icon--green:active:not(.bds-card-icon--disabled) .bds-card-icon__overlay { background-color: #0DAA3E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.light .bds-card-icon--disabled { opacity: 1; @@ -19528,12 +22181,22 @@ html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-im .bds-text-card { position: relative; overflow: hidden; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; text-decoration: none; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; height: 274px; padding: 16px; } @@ -19572,12 +22235,17 @@ html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-im inset: 0; pointer-events: none; z-index: 0; - clip-path: inset(100% 0 0 0); + -webkit-clip-path: inset(100% 0 0 0); + clip-path: inset(100% 0 0 0); + -webkit-transition: -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); + transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), -webkit-clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); } .bds-text-card:hover .bds-text-card__overlay { - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-text-card--green { @@ -19591,7 +22259,8 @@ html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-im } .bds-text-card--green:active .bds-text-card__overlay { background-color: #0DAA3E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-text-card--neutral-light { @@ -19605,7 +22274,8 @@ html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-im } .bds-text-card--neutral-light:active .bds-text-card__overlay { background-color: #8A919A; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-text-card--neutral-dark { @@ -19619,7 +22289,8 @@ html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-im } .bds-text-card--neutral-dark:active .bds-text-card__overlay { background-color: #8A919A; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-text-card--lilac { @@ -19633,7 +22304,8 @@ html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-im } .bds-text-card--lilac:active .bds-text-card__overlay { background-color: #7649E3; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-text-card--yellow { @@ -19647,7 +22319,8 @@ html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-im } .bds-text-card--yellow:active .bds-text-card__overlay { background-color: #DBF15E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-text-card--blue { @@ -19661,7 +22334,8 @@ html.light .bds-card-icon--disabled.bds-card-icon--green .bds-card-icon__icon-im } .bds-text-card--blue:active .bds-text-card__overlay { background-color: #428CFF; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } .bds-text-card__title { @@ -19729,7 +22403,8 @@ html.dark .bds-text-card--neutral-light .bds-text-card__overlay { } html.dark .bds-text-card--neutral-light:active .bds-text-card__overlay { background-color: #8A919A; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.dark .bds-text-card--neutral-dark { background-color: #8A919A; @@ -19742,7 +22417,8 @@ html.dark .bds-text-card--neutral-dark .bds-text-card__overlay { } html.dark .bds-text-card--neutral-dark:active .bds-text-card__overlay { background-color: #72777E; - clip-path: inset(0 0 0 0); + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); } html.dark a.bds-text-card.bds-text-card--neutral-light:focus { background-color: #E6EAF0; @@ -19810,9 +22486,16 @@ html.dark .bds-text-card--disabled .bds-text-card__overlay { } .bds-standard-card { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; padding: 16px; width: 100%; height: 100%; @@ -19843,8 +22526,13 @@ html.dark .bds-text-card--disabled .bds-text-card__overlay { background-color: #EDF4FF; } .bds-standard-card__content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; width: 100%; color: #141414; @@ -19857,7 +22545,9 @@ html.dark .bds-text-card--disabled .bds-text-card__overlay { .bds-standard-card__headline { word-break: break-word; overflow-wrap: break-word; - hyphens: auto; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; color: #141414; margin: 0; } @@ -19868,17 +22558,32 @@ html.dark .bds-text-card--disabled .bds-text-card__overlay { margin: 0; } .bds-standard-card__buttons { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; width: 100%; - flex-wrap: wrap; - align-items: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } @media (min-width: 992px) { .bds-standard-card__buttons { - flex-direction: row; - justify-content: flex-start; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } @@ -19914,8 +22619,12 @@ html.dark .bds-header-hero-primary-media { } .bds-header-hero-primary-media__headline { margin: 0; + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: flex-end; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; height: 100%; } .bds-header-hero-primary-media__headline * { @@ -19931,10 +22640,17 @@ html.light .bds-header-hero-primary-media__subtitle { color: #72777E; } .bds-header-hero-primary-media__cta-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 24px; - justify-content: flex-end; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; min-height: 100%; } @media (min-width: 992px) { @@ -19944,18 +22660,35 @@ html.light .bds-header-hero-primary-media__subtitle { } .bds-header-hero-primary-media__cta-buttons { width: 100%; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - flex-wrap: wrap; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; gap: 16px; } @media (min-width: 576px) { .bds-header-hero-primary-media__cta-buttons { - flex-direction: row; - justify-content: flex-start; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } @media (min-width: 992px) { @@ -19992,8 +22725,10 @@ html.light .bds-header-hero-primary-media__subtitle { .bds-header-hero-primary-media__media-element { width: 100%; height: 100%; - object-fit: cover; - object-position: center; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; } .bds-hero-split-media { @@ -20029,13 +22764,25 @@ html.light .bds-header-hero-primary-media__subtitle { } } .bds-hero-split-media__content-col { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .bds-hero-split-media__content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; width: 100%; min-height: 100%; } @@ -20045,8 +22792,13 @@ html.light .bds-header-hero-primary-media__subtitle { } } .bds-hero-split-media__title-group { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; max-width: 100%; } @@ -20116,8 +22868,13 @@ html.light .bds-header-hero-primary-media__subtitle { margin: 0; } .bds-hero-split-media__description-group { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 24px; margin-top: 32px; } @@ -20125,7 +22882,9 @@ html.light .bds-header-hero-primary-media__subtitle { .bds-hero-split-media__description-group { gap: 32px; margin-top: 32px; - justify-content: flex-end; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } } @media (min-width: 992px) { @@ -20174,19 +22933,36 @@ html.light .bds-header-hero-primary-media__subtitle { } } .bds-hero-split-media__cta { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } @media (min-width: 576px) { .bds-hero-split-media__cta { - flex-direction: row; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } .bds-hero-split-media__media-col { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .bds-hero-split-media__media { width: 100%; @@ -20206,8 +22982,10 @@ html.light .bds-header-hero-primary-media__subtitle { .bds-hero-split-media__media-img { width: 100%; height: 100%; - object-fit: cover; - object-position: center; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; } html.light .bds-hero-split-media { @@ -20282,7 +23060,9 @@ html.light .bds-hero-split-media--accent .bds-hero-split-media__subtitle { } .bds-hero-split-media--title-only .bds-hero-split-media__content { - justify-content: flex-start; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } .bds-hero-split-media--no-description .bds-hero-split-media__description-group { @@ -20294,8 +23074,13 @@ html.light .bds-hero-split-media--accent .bds-hero-split-media__subtitle { } @media (min-width: 576px) { .bds-button-group { - flex-direction: row !important; - align-items: center; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } @@ -20312,7 +23097,8 @@ html.light .bds-hero-split-media--accent .bds-hero-split-media__subtitle { } .bds-callout-media-banner { - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; min-height: 280px; } .bds-callout-media-banner { @@ -20348,11 +23134,16 @@ html.light .bds-hero-split-media--accent .bds-hero-split-media__subtitle { } .bds-callout-media-banner--centered .bds-callout-media-banner__content { - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .bds-callout-media-banner__text { - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; color: var(--bds-cmb-text-color, #232021); gap: 16px; } @@ -20559,8 +23350,13 @@ html.light .bds-callout-media-banner--image-text-black .bds-callout-media-banner } .bds-card-stats__header { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; margin-bottom: 24px; } @@ -20593,8 +23389,13 @@ html.dark .bds-card-stats__description { } .bds-carousel-card-list__header { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 24px; padding-left: 18px; padding-right: 18px; @@ -20608,9 +23409,16 @@ html.dark .bds-card-stats__description { } @media (min-width: 992px) { .bds-carousel-card-list__header { - flex-direction: row; - justify-content: space-between; - align-items: flex-start; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; gap: 40px; padding-left: 32px; padding-right: 32px; @@ -20618,8 +23426,13 @@ html.dark .bds-card-stats__description { } .bds-carousel-card-list__header-content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; max-width: 100%; } @@ -20644,57 +23457,19 @@ html.dark .bds-card-stats__description { } .bds-carousel-card-list__nav { + display: -webkit-box; + display: -ms-flexbox; display: flex; gap: 8px; - justify-content: flex-end; - flex-shrink: 0; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -ms-flex-negative: 0; + flex-shrink: 0; padding: 4px; margin: -4px; } -.bds-carousel-card-list__button { - appearance: none; - border: none; - background: none; - padding: 0; - margin: 0; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - width: 37px; - height: 37px; - transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); -} -@media (min-width: 992px) { - .bds-carousel-card-list__button { - width: 40px; - height: 40px; - } -} -.bds-carousel-card-list__button:focus { - outline: 2px solid #FFFFFF; - outline-offset: 2px; -} -.bds-carousel-card-list__button:focus:not(:focus-visible) { - outline: none; -} -.bds-carousel-card-list__button:focus-visible { - outline: 2px solid #FFFFFF; - outline-offset: 2px; -} - -.bds-carousel-card-list__arrow-icon { - width: 18px; - height: 16px; -} -@media (max-width: 991.98px) { - .bds-carousel-card-list__arrow-icon { - width: 18px; - height: 15px; - } -} - .bds-carousel-card-list__track-wrapper { margin-top: 24px; overflow: visible; @@ -20714,11 +23489,14 @@ html.dark .bds-card-stats__description { } .bds-carousel-card-list__track { + display: -webkit-box; + display: -ms-flexbox; display: flex; gap: 8px; overflow-x: auto; overflow-y: visible; - scroll-snap-type: x mandatory; + -ms-scroll-snap-type: x mandatory; + scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; @@ -20742,7 +23520,8 @@ html.dark .bds-card-stats__description { } .bds-carousel-card-list__card { - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; scroll-snap-align: start; } .bds-carousel-card-list__card .bds-card-offgrid { @@ -20776,6 +23555,7 @@ html.dark .bds-card-stats__description { text-decoration: none; } .bds-carousel-card-list__card .bds-card-offgrid .bds-card-offgrid__icon-container > * { + -webkit-transition: none; transition: none; } @@ -20786,63 +23566,6 @@ html.dark .bds-card-stats__description { color: #FFFFFF; } -.bds-carousel-card-list__button--neutral { - background-color: #CAD4DF; - color: #141414; -} -.bds-carousel-card-list__button--neutral:hover:not(:disabled) { - background-color: #E6EAF0; -} -.bds-carousel-card-list__button--neutral:active:not(:disabled) { - background-color: #CAD4DF; -} -.bds-carousel-card-list__button--neutral.bds-carousel-card-list__button--disabled, .bds-carousel-card-list__button--neutral:disabled { - background-color: #CAD4DF; - color: #8A919A; - opacity: 0.5; - cursor: not-allowed; -} - -.bds-carousel-card-list__button--green { - background-color: #21E46B; - color: #141414; -} -.bds-carousel-card-list__button--green:hover:not(:disabled) { - background-color: #70EE97; -} -.bds-carousel-card-list__button--green:active:not(:disabled) { - background-color: #21E46B; -} -.bds-carousel-card-list__button--green.bds-carousel-card-list__button--disabled, .bds-carousel-card-list__button--green:disabled { - background-color: #21E46B; - color: #8A919A; - opacity: 0.5; - cursor: not-allowed; -} - -.bds-carousel-card-list__button--black { - background-color: #FFFFFF; - color: #141414; -} -.bds-carousel-card-list__button--black:hover:not(:disabled) { - background-color: #E6EAF0; -} -.bds-carousel-card-list__button--black:active:not(:disabled) { - background-color: #FFFFFF; -} -.bds-carousel-card-list__button--black.bds-carousel-card-list__button--disabled, .bds-carousel-card-list__button--black:disabled { - background-color: #FFFFFF; - color: #8A919A; - opacity: 0.5; - cursor: not-allowed; -} - -html.light .bds-carousel-card-list__button:focus { - outline-color: #111112; -} -html.light .bds-carousel-card-list__button:focus-visible { - outline-color: #111112; -} html.light .bds-carousel-card-list__track:focus-visible { outline-color: #111112; } @@ -20852,53 +23575,444 @@ html.light .bds-carousel-card-list--green .bds-carousel-card-list__heading, html.light .bds-carousel-card-list--green .bds-carousel-card-list__description { color: #141414; } -html.light .bds-carousel-card-list__button--neutral { + +.bds-carousel-featured { + width: 100%; + overflow: hidden; background-color: #CAD4DF; + padding: 16px; +} +@media (min-width: 576px) { + .bds-carousel-featured { + padding: 24px; + } +} +@media (min-width: 992px) { + .bds-carousel-featured { + padding: 40px 32px; + } +} +@media (min-width: 1280px) { + .bds-carousel-featured { + max-width: 1280px; + margin-left: auto; + margin-right: auto; + } +} +.bds-carousel-featured--bg-grey { + background-color: #CAD4DF; +} +.bds-carousel-featured--bg-grey .bds-carousel-featured__heading, +.bds-carousel-featured--bg-grey .bds-carousel-featured__feature-title, +.bds-carousel-featured--bg-grey .bds-carousel-featured__feature-description { color: #141414; } -html.light .bds-carousel-card-list__button--neutral:hover:not(:disabled) { - background-color: #E6EAF0; +.bds-carousel-featured--bg-grey .bds-divider { + background-color: #141414; } -html.light .bds-carousel-card-list__button--neutral:active:not(:disabled) { - background-color: #CAD4DF; -} -html.light .bds-carousel-card-list__button--neutral.bds-carousel-card-list__button--disabled, html.light .bds-carousel-card-list__button--neutral:disabled { - background-color: #CAD4DF; - color: #8A919A; - opacity: 0.5; - cursor: not-allowed; -} -html.light .bds-carousel-card-list__button--green { - background-color: #21E46B; - color: #141414; -} -html.light .bds-carousel-card-list__button--green:hover:not(:disabled) { - background-color: #70EE97; -} -html.light .bds-carousel-card-list__button--green:active:not(:disabled) { - background-color: #21E46B; -} -html.light .bds-carousel-card-list__button--green.bds-carousel-card-list__button--disabled, html.light .bds-carousel-card-list__button--green:disabled { - background-color: #21E46B; - color: #8A919A; - opacity: 0.5; - cursor: not-allowed; -} -html.light .bds-carousel-card-list__button--black { +.bds-carousel-featured--bg-grey .bds-carousel-button--black { background-color: #141414; color: #FFFFFF; } -html.light .bds-carousel-card-list__button--black:hover:not(:disabled) { +.bds-carousel-featured--bg-grey .bds-carousel-button--black:hover:not(:disabled) { background-color: #72777E; } -html.light .bds-carousel-card-list__button--black:active:not(:disabled) { +.bds-carousel-featured--bg-grey .bds-carousel-button--black:active:not(:disabled) { background-color: #141414; } -html.light .bds-carousel-card-list__button--black.bds-carousel-card-list__button--disabled, html.light .bds-carousel-card-list__button--black:disabled { +.bds-carousel-featured--bg-neutral { background-color: #141414; +} +.bds-carousel-featured--bg-neutral .bds-carousel-featured__heading, +.bds-carousel-featured--bg-neutral .bds-carousel-featured__feature-title, +.bds-carousel-featured--bg-neutral .bds-carousel-featured__feature-description { + color: #FFFFFF; +} +.bds-carousel-featured--bg-neutral .bds-divider { + background-color: #FFFFFF; +} +.bds-carousel-featured--bg-neutral .bds-carousel-button--green { + background-color: #21E46B; + color: #141414; +} +.bds-carousel-featured--bg-neutral .bds-carousel-button--green:hover:not(:disabled) { + background-color: #70EE97; +} +.bds-carousel-featured--bg-neutral .bds-carousel-button--green:active:not(:disabled) { + background-color: #21E46B; +} +.bds-carousel-featured--bg-yellow { + background-color: #F3F1EB; +} +.bds-carousel-featured--bg-yellow .bds-carousel-featured__heading, +.bds-carousel-featured--bg-yellow .bds-carousel-featured__feature-title { + color: #141414; +} +.bds-carousel-featured--bg-yellow .bds-carousel-featured__feature-description { + color: #141414; +} +.bds-carousel-featured--bg-yellow .bds-divider { + background-color: #141414; +} +.bds-carousel-featured--bg-yellow .bds-carousel-button--black { + background-color: #141414; + color: #FFFFFF; +} +.bds-carousel-featured--bg-yellow .bds-carousel-button--black:hover:not(:disabled) { + background-color: #72777E; +} +.bds-carousel-featured--bg-yellow .bds-carousel-button--black:active:not(:disabled) { + background-color: #141414; +} + +.bds-carousel-featured__container.bds-grid__container { + padding-left: 0; + padding-right: 0; + max-width: none; +} +.bds-carousel-featured__container .bds-grid__row { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + gap: 24px; +} +@media (min-width: 576px) { + .bds-carousel-featured__container .bds-grid__row { + gap: 32px; + } +} +@media (min-width: 992px) { + .bds-carousel-featured__container .bds-grid__row { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + gap: 8px; + } +} + +.bds-carousel-featured__media { + width: 100%; + height: 100%; +} + +.bds-carousel-featured__content-col { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +@media (min-width: 992px) { + .bds-carousel-featured__content-col { + -ms-flex-item-align: stretch; + align-self: stretch; + padding-left: 8px; + } +} + +.bds-carousel-featured__content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + gap: 0; + min-height: 500px; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +@media (min-width: 576px) { + .bds-carousel-featured__content { + min-height: 440px; + } +} +@media (min-width: 992px) { + .bds-carousel-featured__content { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-height: auto; + } +} + +.bds-carousel-featured__header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + width: 100%; +} + +.bds-carousel-featured__heading { + margin: 0; + color: #FFFFFF; + max-width: 392px; +} + +.bds-carousel-featured__bottom { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 24px; +} +@media (min-width: 576px) { + .bds-carousel-featured__bottom { + gap: 32px; + } +} +@media (min-width: 992px) { + .bds-carousel-featured__bottom { + gap: 40px; + } +} + +.bds-carousel-featured__nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 8px; + -ms-flex-negative: 0; + flex-shrink: 0; +} +.bds-carousel-featured__nav--desktop { + display: none; +} +@media (min-width: 992px) { + .bds-carousel-featured__nav--desktop { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} +.bds-carousel-featured__nav--mobile { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +@media (min-width: 992px) { + .bds-carousel-featured__nav--mobile { + display: none; + } +} + +.bds-carousel-featured__features { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; +} + +.bds-carousel-featured__feature { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 8px; + width: 100%; +} +.bds-carousel-featured__feature:not(:first-child) { + padding-top: 16px; +} +@media (min-width: 992px) { + .bds-carousel-featured__feature:not(:first-child) { + padding-top: 24px; + } +} + +.bds-carousel-featured__feature-title { + margin: 0; + color: #FFFFFF; +} + +.bds-carousel-featured__feature-description { + margin: 0; color: #8A919A; - opacity: 0.5; - cursor: not-allowed; +} + +.bds-carousel-featured__cta { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + width: 100%; + gap: 16px; +} +@media (min-width: 576px) { + .bds-carousel-featured__cta { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + gap: 0; + } +} +@media (min-width: 992px) { + .bds-carousel-featured__cta { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + } +} + +.bds-carousel-featured__buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 16px; +} +@media (min-width: 576px) { + .bds-carousel-featured__buttons { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + gap: 0; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} + +.bds-carousel-featured__slides { + width: 100%; + overflow: hidden; + position: relative; +} + +.bds-carousel-featured__slide-track { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-transition: -webkit-transform 400ms cubic-bezier(0.4, 0, 0.2, 1); + transition: -webkit-transform 400ms cubic-bezier(0.4, 0, 0.2, 1); + transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); + transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 400ms cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} + +.bds-carousel-featured__slide { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + position: relative; + aspect-ratio: 343/193; +} +@media (min-width: 576px) { + .bds-carousel-featured__slide { + aspect-ratio: 16/9; + } +} +@media (min-width: 992px) { + .bds-carousel-featured__slide { + aspect-ratio: 1/1; + } +} + +.bds-carousel-featured__image { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + pointer-events: none; +} + +html.light .bds-carousel-featured { + background-color: #E6EAF0; +} +html.light .bds-carousel-featured .bds-carousel-featured__heading, +html.light .bds-carousel-featured .bds-carousel-featured__feature-title { + color: #141414; +} +html.light .bds-carousel-featured .bds-carousel-featured__feature-description { + color: #141414; +} +html.light .bds-carousel-featured .bds-divider { + background-color: #141414; +} +html.light .bds-carousel-featured--bg-grey { + background-color: #E6EAF0; +} +html.light .bds-carousel-featured--bg-grey .bds-carousel-featured__heading, +html.light .bds-carousel-featured--bg-grey .bds-carousel-featured__feature-title { + color: #141414; +} +html.light .bds-carousel-featured--bg-grey .bds-carousel-featured__feature-description { + color: #141414; +} +html.light .bds-carousel-featured--bg-grey .bds-divider { + background-color: #141414; +} +html.light .bds-carousel-featured--bg-neutral { + background-color: #FFFFFF; +} +html.light .bds-carousel-featured--bg-neutral .bds-carousel-featured__heading, +html.light .bds-carousel-featured--bg-neutral .bds-carousel-featured__feature-title { + color: #141414; +} +html.light .bds-carousel-featured--bg-neutral .bds-carousel-featured__feature-description { + color: #141414; +} +html.light .bds-carousel-featured--bg-neutral .bds-divider { + background-color: #141414; +} +html.light .bds-carousel-featured--bg-yellow { + background-color: #F3F1EB; +} +html.light .bds-carousel-featured--bg-yellow .bds-carousel-featured__heading, +html.light .bds-carousel-featured--bg-yellow .bds-carousel-featured__feature-title { + color: #141414; +} +html.light .bds-carousel-featured--bg-yellow .bds-carousel-featured__feature-description { + color: #141414; +} +html.light .bds-carousel-featured--bg-yellow .bds-divider { + background-color: #141414; } .bds-logo-square-grid { @@ -20963,8 +24077,13 @@ html.light .bds-carousel-card-list__button--black.bds-carousel-card-list__button } .bds-cards-featured__header { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; } @media (min-width: 576px) { @@ -20989,7 +24108,9 @@ html.light .bds-carousel-card-list__button--black.bds-carousel-card-list__button .bds-cards-featured__cards { display: grid; grid-template-columns: 1fr; - column-gap: 48px; + -webkit-column-gap: 48px; + -moz-column-gap: 48px; + column-gap: 48px; row-gap: 48px; width: 100%; margin-top: 24px; @@ -20997,7 +24118,9 @@ html.light .bds-carousel-card-list__button--black.bds-carousel-card-list__button @media (min-width: 576px) { .bds-cards-featured__cards { grid-template-columns: repeat(2, 1fr); - column-gap: 8px; + -webkit-column-gap: 8px; + -moz-column-gap: 8px; + column-gap: 8px; row-gap: 52px; margin-top: 32px; } @@ -21005,13 +24128,17 @@ html.light .bds-carousel-card-list__button--black.bds-carousel-card-list__button @media (min-width: 992px) { .bds-cards-featured__cards { grid-template-columns: repeat(3, 1fr); - column-gap: 8px; + -webkit-column-gap: 8px; + -moz-column-gap: 8px; + column-gap: 8px; row-gap: 56px; margin-top: 40px; } } .bds-cards-featured__card-wrapper { + display: -webkit-box; + display: -ms-flexbox; display: flex; min-width: 0; width: 100%; @@ -21103,9 +24230,13 @@ html.dark .bds-cards-featured__description { } @media (min-width: 992px) { .bds-feature-two-column__desktop-layout { + display: -webkit-box; + display: -ms-flexbox; display: flex; width: 100%; - align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } } .bds-feature-two-column__mobile-layout { @@ -21123,8 +24254,13 @@ html.dark .bds-cards-featured__description { gap: 0 !important; } .bds-feature-two-column__content-col { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; padding: 64px 0; } @media (min-width: 576px) { @@ -21173,8 +24309,13 @@ html.dark .bds-cards-featured__description { } } .bds-feature-two-column__media-col { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } @media (min-width: 992px) { .bds-feature-two-column__media-col { @@ -21186,14 +24327,28 @@ html.dark .bds-cards-featured__description { } } .bds-feature-two-column__media-col--mobile { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .bds-feature-two-column__content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: space-between; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; height: 100%; gap: 24px; } @@ -21209,21 +24364,33 @@ html.dark .bds-cards-featured__description { } .bds-feature-two-column__content--multiple { gap: 0; - justify-content: flex-start; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } @media (min-width: 992px) { .bds-feature-two-column__content--multiple { gap: 0; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } } .bds-feature-two-column__content--multiple > .bds-btn--secondary { - align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; } .bds-feature-two-column__button-group { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; gap: 16px; margin-top: 24px; } @@ -21247,8 +24414,13 @@ html.dark .bds-cards-featured__description { padding-left: 0 !important; } .bds-feature-two-column__text-group { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; } @media (min-width: 576px) { @@ -21318,46 +24490,89 @@ html.dark .bds-cards-featured__description { margin: 0; } .bds-feature-two-column__cta { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } @media (min-width: 576px) { .bds-feature-two-column__cta { - flex-direction: row; - flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } } .bds-feature-two-column__cta--single { - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } @media (min-width: 576px) { .bds-feature-two-column__cta--double { - flex-direction: row; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } .bds-feature-two-column__cta-row { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } @media (min-width: 576px) { .bds-feature-two-column__cta-row { - flex-direction: row; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } @media (min-width: 992px) { .bds-feature-two-column__cta-row { - flex-direction: row; - align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } .bds-feature-two-column__tertiary-group { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; gap: 0; } .bds-feature-two-column__tertiary-group .bds-btn--tertiary { @@ -21385,8 +24600,10 @@ html.dark .bds-cards-featured__description { .bds-feature-two-column__media-img { width: 100%; height: 100%; - object-fit: cover; - object-position: center; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; } .bds-feature-two-column--neutral { @@ -21425,11 +24642,17 @@ html.dark .bds-feature-two-column--green { } .bds-feature-two-column--right .bds-feature-two-column__row { - flex-direction: column-reverse !important; + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; } @media (min-width: 992px) { .bds-feature-two-column--right .bds-feature-two-column__desktop-layout { - flex-direction: row-reverse; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } } @media (min-width: 992px) { @@ -21471,24 +24694,38 @@ html.dark .bds-feature-two-column--green { @media (min-width: 992px) { .bds-cards-two-column__header { margin-bottom: 40px; - align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } } @media (min-width: 992px) { .bds-cards-two-column__header-left { min-height: 340px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } } @media (min-width: 992px) { .bds-cards-two-column__header-right { min-height: 340px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: flex-end; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } } @@ -21552,8 +24789,13 @@ html.dark .bds-standard-card-group-section { } .bds-standard-card-group-section__header { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; } @media (min-width: 576px) { @@ -22106,10 +25348,14 @@ html.light svg[fill=none] linearGradient stop[stop-color="#C1C1C2"] { width: 16px; height: 16px; background-position: center; + -webkit-transition: -webkit-transform 100ms ease-in-out; + transition: -webkit-transform 100ms ease-in-out; transition: transform 100ms ease-in-out; + transition: transform 100ms ease-in-out, -webkit-transform 100ms ease-in-out; } .external-link:hover::after { - transform: translate(3px, -3px); + -webkit-transform: translate(3px, -3px); + transform: translate(3px, -3px); } .external-link .fa-external-link { display: none; @@ -22158,6 +25404,7 @@ html.light svg[fill=none] linearGradient stop[stop-color="#C1C1C2"] { background-size: 1.5rem; padding: 0 0.5rem; background-position: left 0 bottom -0.1rem; + -webkit-transition: background-position 100ms ease-in-out; transition: background-position 100ms ease-in-out; } .li-links a:hover::after { @@ -22289,12 +25536,14 @@ blockquote, } @media (min-width: 992px) { .card, .cta-card, .q-wrapper { - box-shadow: 0px 5px 40px #141414; + -webkit-box-shadow: 0px 5px 40px #141414; + box-shadow: 0px 5px 40px #141414; } } #code-samples-deck .card { - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; margin: 0 2rem 5rem 2rem; } #code-samples-deck .card-header { @@ -22431,42 +25680,52 @@ a.card:hover h3, a.card:hover .h3 { } .cols-of-1 { + grid-template-rows: repeat(1, -webkit-min-content); grid-template-rows: repeat(1, min-content); } .cols-of-2 { + grid-template-rows: repeat(2, -webkit-min-content); grid-template-rows: repeat(2, min-content); } .cols-of-3 { + grid-template-rows: repeat(3, -webkit-min-content); grid-template-rows: repeat(3, min-content); } .cols-of-4 { + grid-template-rows: repeat(4, -webkit-min-content); grid-template-rows: repeat(4, min-content); } .cols-of-5 { + grid-template-rows: repeat(5, -webkit-min-content); grid-template-rows: repeat(5, min-content); } .cols-of-6 { + grid-template-rows: repeat(6, -webkit-min-content); grid-template-rows: repeat(6, min-content); } .cols-of-7 { + grid-template-rows: repeat(7, -webkit-min-content); grid-template-rows: repeat(7, min-content); } .cols-of-8 { + grid-template-rows: repeat(8, -webkit-min-content); grid-template-rows: repeat(8, min-content); } .cols-of-9 { + grid-template-rows: repeat(9, -webkit-min-content); grid-template-rows: repeat(9, min-content); } .cols-of-10 { + grid-template-rows: repeat(10, -webkit-min-content); grid-template-rows: repeat(10, min-content); } @@ -22475,7 +25734,9 @@ a.card:hover h3, a.card:hover .h3 { margin-left: -1.25rem; margin-right: -1.25rem; margin-bottom: 5rem; - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } @media (min-width: 992px) { .card-deck { @@ -22483,8 +25744,11 @@ a.card:hover h3, a.card:hover .h3 { } } .card-deck .card { - flex-grow: 0; - flex-basis: 100%; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; padding: 0; margin: 0 1.25rem 5rem 1.25rem; background-position: bottom; @@ -22492,7 +25756,8 @@ a.card:hover h3, a.card:hover .h3 { background-size: contain; } .card-deck.row-cols-1 .card { - flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; min-height: 264px; } @media (min-width: 576px) { @@ -22508,29 +25773,30 @@ a.card:hover h3, a.card:hover .h3 { } @media (min-width: 992px) { .card-deck.row-cols-lg-3 .card { - flex-basis: calc(33% - 2.5rem); + -ms-flex-preferred-size: calc(33% - 2.5rem); + flex-basis: calc(33% - 2.5rem); } } @media (min-width: 1280px) { .card-deck.row-cols-lg-3 .card { margin: 0 2.5rem 5rem 2.5rem; - flex-basis: calc(33% - 5rem); + -ms-flex-preferred-size: calc(33% - 5rem); + flex-basis: calc(33% - 5rem); } } @media (min-width: 992px) { .card-deck.row-cols-lg-4 .card { - flex-basis: calc(25% - 2.5rem); + -ms-flex-preferred-size: calc(25% - 2.5rem); + flex-basis: calc(25% - 2.5rem); } } .card-deck a.card { + -webkit-transition: all 0.35s ease-out; transition: all 0.35s ease-out; cursor: pointer; } .card-deck a.card:hover { -webkit-transform: translateY(-16px); - -moz-transform: translateY(-16px); - -ms-transform: translateY(-16px); - -o-transform: translateY(-16px); transform: translateY(-16px); } .card-deck .card-footer { @@ -22572,9 +25838,15 @@ main article .card-grid.card-grid-3xN .card .card-icon-container { width: 50px; height: 50px; background: #454549; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; - align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; border-radius: 50%; margin-bottom: 12px; } @@ -22858,10 +26130,12 @@ main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(9) .card-fo right: 0; width: 1.5rem; height: 1.5rem; + -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .landing .nav .nav-link:not(.external-link):hover::after { - animation: arrowDance2 1.2s infinite; + -webkit-animation: arrowDance2 1.2s infinite; + animation: arrowDance2 1.2s infinite; } .landing .nav .nav-link.external-link::after { content: " "; @@ -22873,10 +26147,12 @@ main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(9) .card-fo right: 7px; width: 1.5rem; height: 1.5rem; + -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .landing .nav .nav-link.external-link:hover::after { - animation: arrowDanceDiag 1.2s infinite; + -webkit-animation: arrowDanceDiag 1.2s infinite; + animation: arrowDanceDiag 1.2s infinite; } .landing .card-body .nav .nav-link { border-bottom: 1px solid #454549; @@ -22918,7 +26194,8 @@ main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(9) .card-fo } .interactive-block input:invalid { - box-shadow: inset 0 0 5px 5px #DC466F; + -webkit-box-shadow: inset 0 0 5px 5px #DC466F; + box-shadow: inset 0 0 5px 5px #DC466F; } .interactive-block .breadcrumbs-wrap { margin-bottom: 11px; @@ -23274,6 +26551,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments /* Dev Tool styles stuff ---------------------------------------------------- */ .command-list-wrapper { + position: -webkit-sticky; position: sticky; top: calc(var(--navbar-height) + var(--toc-offset-top)); max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top)); @@ -23321,7 +26599,9 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-tx-sender .input-group .form-control, .interactive-block-ui .input-group .form-control { - flex: 1 1 20%; + -webkit-box-flex: 1; + -ms-flex: 1 1 20%; + flex: 1 1 20%; height: auto; } @@ -23435,9 +26715,15 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments } .page-home #home-hero-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; - align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; width: 100%; padding-top: 54.8%; overflow: hidden; @@ -23446,7 +26732,8 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments width: 100%; max-width: 856px; height: auto; - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; content: url("../img/home-hero.svg"); margin-bottom: 24px; display: block; @@ -23696,7 +26983,8 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments font-size: 42px; } .page-uses::before { - transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); background-image: url(../img/backgrounds/use-cases-blue.svg); } .page-uses .card-grid { @@ -23713,37 +27001,53 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments } .page-uses .modal-content { position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; width: 100%; pointer-events: auto; background-color: #141414; background-clip: padding-box; border: none; border-radius: 0; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; outline: none; background: #111112; } .page-uses .modal-header { border: none; background: #111112; - box-shadow: 0px 1px 2px #141414; + -webkit-box-shadow: 0px 1px 2px #141414; + box-shadow: 0px 1px 2px #141414; } .page-uses .modal-header .cancel .chevron { - transform: rotate(90deg); + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } .page-uses .modal-header .apply .chevron { - transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } .page-uses .modal-footer { border: none; background: #111112; - box-shadow: 0px -1px 2px #141414; - align-items: unset; + -webkit-box-shadow: 0px -1px 2px #141414; + box-shadow: 0px -1px 2px #141414; + -webkit-box-align: unset; + -ms-flex-align: unset; + align-items: unset; padding: 0.75rem; - flex-direction: column; - flex-wrap: wrap; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } .page-uses .card-title { margin-bottom: 0.5rem; @@ -23753,12 +27057,14 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments padding: 16px; margin: 0; text-decoration: none; + -webkit-transition: all 0.35s ease-out; transition: all 0.35s ease-out; } .page-uses .card-uses:hover { text-decoration: none; color: #E6EAF0; - transform: translateY(-16px); + -webkit-transform: translateY(-16px); + transform: translateY(-16px); text-decoration: none; } .page-uses .card-body { @@ -23783,8 +27089,12 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments color: #ffffff; } .page-uses .category-checkbox { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .page-uses .category-checkbox label { font-weight: normal; @@ -23805,6 +27115,7 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments color: #C0A7FF; } .page-uses .category_sidebar { + position: -webkit-sticky; position: sticky; top: 10px; } @@ -24198,7 +27509,8 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments left: 0px; overflow: hidden; white-space: nowrap; - animation: bannermove 40s linear infinite; + -webkit-animation: bannermove 40s linear infinite; + animation: bannermove 40s linear infinite; } .page-ambassadors .photobanner-bottom { top: 112px; @@ -24206,12 +27518,24 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-ambassadors .photobanner img { margin: 0 0.5em; } -@keyframes bannermove { +@-webkit-keyframes bannermove { 0% { - transform: translate(0, 0); + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } 100% { - transform: translate(-50%, 0); + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + } +} +@keyframes bannermove { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 100% { + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); } } .page-ambassadors #carouselSlidesOnly { @@ -24232,7 +27556,10 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments content: url(../img/icons/arrow-right-purple.svg); vertical-align: middle; padding-left: 8px; + -webkit-transition: -webkit-transform 0.3s ease-out; + transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .page-ambassadors .btn-arrow:hover { text-decoration: none; @@ -24241,11 +27568,13 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments } .page-ambassadors .btn-arrow:hover::after { background-position: left 4px bottom 4px; - transform: translateX(4px); + -webkit-transform: translateX(4px); + transform: translateX(4px); } .autoscroll-content { - animation: autoscroll 15s linear infinite; + -webkit-animation: autoscroll 15s linear infinite; + animation: autoscroll 15s linear infinite; white-space: nowrap; overflow: hidden; max-width: 300px; @@ -24299,15 +27628,22 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-events .event-card { max-width: 311px; margin: 32px auto; + -webkit-transition: all 0.35s ease-out; transition: all 0.35s ease-out; position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; min-width: 0; word-wrap: break-word; background-clip: border-box; background-color: #232325; - box-shadow: 0px 5px 40px #141414; + -webkit-box-shadow: 0px 5px 40px #141414; + box-shadow: 0px 5px 40px #141414; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 8px; font-size: 16px; @@ -24360,7 +27696,8 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments } } .page-events a.event-card:hover { - transform: translateY(-16px); + -webkit-transform: translateY(-16px); + transform: translateY(-16px); text-decoration: none; } .page-events label { @@ -24527,7 +27864,8 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments position: relative; z-index: 5; width: 100%; - transform: translateY(0%); + -webkit-transform: translateY(0%); + transform: translateY(0%); } .page-faq .q-wrapper p a, .mini-faq .q-wrapper p a { @@ -24638,7 +27976,8 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments position: absolute; bottom: 0; left: 50%; - transform: translateX(-50%); + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } .page-docs-index #community-heading, .page-community #community-heading { @@ -24651,6 +27990,8 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments } .page-docs-index #community-heading .hero-title, .page-community #community-heading .hero-title { + min-width: -webkit-max-content; + min-width: -moz-max-content; min-width: max-content; bottom: -83%; } @@ -24659,9 +28000,6 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments .page-community #community-heading .parallax { position: absolute; -webkit-transition: all 0.1s ease; - -moz-transition: all 0.1s ease; - -ms-transition: all 0.1s ease; - -o-transition: all 0.1s ease; transition: all 0.1s ease; } .page-docs-index #community-heading .one, @@ -24753,10 +28091,10 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments vertical-align: middle; padding-left: 8px; -webkit-transition: transform 0.3s ease-out; - -moz-transition: transform 0.3s ease-out; - -ms-transition: transform 0.3s ease-out; - -o-transition: transform 0.3s ease-out; + -webkit-transition: -webkit-transform 0.3s ease-out; + transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .page-docs-index #xrpl-grants, .page-community #xrpl-grants { @@ -24907,18 +28245,26 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments } @media (max-width: 767.98px) { .page-dev-tools .nav-tabs { + display: -webkit-box; + display: -ms-flexbox; display: flex; list-style: none; margin-left: 0; padding-left: 0; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } .page-dev-tools .nav-item { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; width: auto; list-style: outside none none; } .page-dev-tools .nav-link { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; width: auto; padding: 1em 1em; @@ -24963,7 +28309,10 @@ html.light .page-dev-tools #trasaction-sender .card-footer { top: 1px; vertical-align: middle; padding-left: 8px; + -webkit-transition: -webkit-transform 0.3s ease-out; + transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .page-rwa-tokenization #events-orange, .use-case-payments #events-orange { @@ -24995,18 +28344,34 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .use-case-payments .token-title-container { gap: 32px; padding: 104px 40px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .page-rwa-tokenization .token-title-container .button-container, .use-case-payments .token-title-container .button-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; gap: 32px; - justify-content: center; - align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .page-rwa-tokenization .token-title-container .button-container .internal-link, .use-case-payments .token-title-container .button-container .internal-link { @@ -25016,8 +28381,12 @@ html.light .page-dev-tools #trasaction-sender .card-footer { font-weight: 700; text-decoration: none; cursor: pointer; + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; background: none !important; } @media (max-width: 767px) { @@ -25025,7 +28394,10 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .use-case-payments .token-title-container .button-container { padding-bottom: 0px; gap: 16px; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; width: 100%; } .page-rwa-tokenization .token-title-container .button-container .btn-primary.p-12, @@ -25046,10 +28418,19 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .page-rwa-tokenization .token-video-container, .use-case-payments .token-video-container { padding: 104px 64px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; - align-items: center; - justify-content: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; gap: 48px; max-width: 1200px; margin: 0 auto; @@ -25074,9 +28455,16 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .use-case-payments .token-video-container .token-video-text-container { max-width: 520px; width: 50%; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; text-align: left; gap: 24px; } @@ -25092,7 +28480,10 @@ html.light .page-dev-tools #trasaction-sender .card-footer { @media (max-width: 1145px) { .page-rwa-tokenization .token-video-container, .use-case-payments .token-video-container { - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 40px; padding: 80px 40px; max-width: 800px; @@ -25108,7 +28499,9 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .use-case-payments .token-video-container .token-video-text-container { width: 100%; max-width: 100%; - align-items: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; text-align: left; } .page-rwa-tokenization .token-video-container .token-video-text-container p, @@ -25132,16 +28525,29 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .token-cards-wrapper, .use-case-payments .token-cards-wrapper { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .page-rwa-tokenization .token-cards-container, .use-case-payments .token-cards-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; padding: 100px 40px; - flex-direction: column; - justify-content: center; - align-items: start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; gap: 40px; max-width: 1280px; } @@ -25163,9 +28569,16 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .token-cards-container .benefits-section, .use-case-payments .token-cards-container .benefits-section { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; overflow: hidden; } .page-rwa-tokenization .token-cards-container .section-title, @@ -25225,9 +28638,16 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .use-case-payments .token-cards-container .benefit-card { border-radius: 8px; background-color: var(--XRPL-Black-Black-80, #232325); + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; padding: 32px; min-height: 332px; } @@ -25278,9 +28698,16 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .upcoming-events, .use-case-payments .upcoming-events { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; overflow: hidden; padding: 100px 40px; max-width: 1200px; @@ -25296,7 +28723,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .page-rwa-tokenization .upcoming-events__title, .use-case-payments .upcoming-events__title { max-width: 630px; - align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; color: #fff; font: 700 32px/38px Work Sans, -apple-system, Roboto, Helvetica, sans-serif; margin-bottom: 64px; @@ -25309,21 +28737,34 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .upcoming-events__logo-container, .use-case-payments .upcoming-events__logo-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; gap: 60px; - justify-content: center; - flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } .page-rwa-tokenization .token-events-wrapper, .use-case-payments .token-events-wrapper { padding-top: 0px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .page-rwa-tokenization .company-logo, .use-case-payments .company-logo { - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; width: 140px; aspect-ratio: var(--aspect-ratio); background-size: contain; @@ -25341,7 +28782,9 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .upcoming-events__logo-container, .use-case-payments .upcoming-events__logo-container { - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } } @media (max-width: 575.98px) { @@ -25354,7 +28797,9 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .page-rwa-tokenization .company-logo, .use-case-payments .company-logo { cursor: pointer; - flex: 0 0 auto; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; max-width: 140px; aspect-ratio: var(--aspect-ratio); background-size: contain; @@ -25461,9 +28906,15 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .page-rwa-tokenization .payments-integration-section .feature-item__content, .use-case-payments .token-developer-tools-section .feature-item__content, .use-case-payments .payments-integration-section .feature-item__content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: space-between; - align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; margin-bottom: 16px; cursor: pointer; } @@ -25471,7 +28922,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .page-rwa-tokenization .payments-integration-section .feature-item__content:hover .right-arrow-item::after, .use-case-payments .token-developer-tools-section .feature-item__content:hover .right-arrow-item::after, .use-case-payments .payments-integration-section .feature-item__content:hover .right-arrow-item::after { - transform: translateX(4px); + -webkit-transform: translateX(4px); + transform: translateX(4px); /* Moves the arrow 4px to the right on hover */ } .page-rwa-tokenization .token-developer-tools-section .feature-item__title, @@ -25488,7 +28940,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .use-case-payments .payments-integration-section .feature-item__icon { width: 24px; height: 24px; - object-fit: contain; + -o-object-fit: contain; + object-fit: contain; } .page-rwa-tokenization .token-developer-tools-section .feature-item__divider, .page-rwa-tokenization .payments-integration-section .feature-item__divider, @@ -25553,8 +29006,12 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .token-features-section .cta-container, .use-case-payments .token-features-section .cta-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: flex-start; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; gap: 24px; } .page-rwa-tokenization .token-features-section .btn, @@ -25589,21 +29046,33 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .token-features-section .cta-container, .use-case-payments .token-features-section .cta-container { - flex-direction: column; - align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } .page-rwa-tokenization .token-features-section .feature-grid, .use-case-payments .token-features-section .feature-grid { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; gap: 40px; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; margin-bottom: 20px; } .page-rwa-tokenization .token-features-section .feature-grid .feature-card, .use-case-payments .token-features-section .feature-grid .feature-card { - flex: 1 0 100%; + -webkit-box-flex: 1; + -ms-flex: 1 0 100%; + flex: 1 0 100%; max-width: 100%; margin-bottom: 20px; position: relative; @@ -25611,20 +29080,25 @@ html.light .page-dev-tools #trasaction-sender .card-footer { @media (min-width: 768px) { .page-rwa-tokenization .token-features-section .feature-grid .feature-card, .use-case-payments .token-features-section .feature-grid .feature-card { - flex: 1 0 calc(50% - 40px); + -webkit-box-flex: 1; + -ms-flex: 1 0 calc(50% - 40px); + flex: 1 0 calc(50% - 40px); max-width: calc(50% - 40px); } } @media (min-width: 1200px) { .page-rwa-tokenization .token-features-section .feature-grid .feature-card, .use-case-payments .token-features-section .feature-grid .feature-card { - flex: 1 0 calc(25% - 30px); + -webkit-box-flex: 1; + -ms-flex: 1 0 calc(25% - 30px); + flex: 1 0 calc(25% - 30px); max-width: calc(25% - 30px); } } .page-rwa-tokenization .token-features-section .feature-card:hover .right-arrow-item::after, .use-case-payments .token-features-section .feature-card:hover .right-arrow-item::after { - transform: translateX(4px); + -webkit-transform: translateX(4px); + transform: translateX(4px); /* Moves the arrow 4px to the right on hover */ } .page-rwa-tokenization .token-features-section .feature-header, @@ -25634,30 +29108,43 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .token-features-section .feature-title, .use-case-payments .token-features-section .feature-title { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: flex-start; - justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; font-size: 20px; font-weight: 700; line-height: 26px; color: #fff; width: 100%; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } @media (max-width: 767px) { .page-rwa-tokenization .token-features-section .feature-title, .use-case-payments .token-features-section .feature-title { padding-right: 30px; - flex-wrap: nowrap; - justify-content: flex-start; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } } @media (min-width: 768px) and (max-width: 1199px) { .page-rwa-tokenization .token-features-section .feature-title, .use-case-payments .token-features-section .feature-title { - flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; padding-right: 30px; - justify-content: flex-start; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } } .page-rwa-tokenization .token-features-section .feature-icon, @@ -25678,7 +29165,9 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .custom-gap, .use-case-payments .custom-gap { - justify-content: start !important; + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: start !important; } .page-rwa-tokenization .mt-16, .use-case-payments .mt-16 { @@ -25688,6 +29177,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .use-case-payments .com-card { min-width: auto !important; padding: 40px !important; + height: -webkit-fit-content; + height: -moz-fit-content; height: fit-content; max-height: 388px !important; } @@ -25697,25 +29188,35 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding { + display: -webkit-box !important; + display: -ms-flexbox !important; display: flex !important; - flex-wrap: wrap !important; + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; gap: 32px; max-width: 1200px; margin: 80px auto; padding: 0px; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } @media (min-width: 768px) { .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding { gap: 40px; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } } @media (max-width: 767px) { .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding { - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 20px; margin: 40px auto; padding: 0px; @@ -25723,14 +29224,18 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card { - flex: 1 !important; + -webkit-box-flex: 1 !important; + -ms-flex: 1 !important; + flex: 1 !important; position: relative; margin: 0 !important; } @media (min-width: 768px) { .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card { - flex: 1 1 calc(50% - 20px); + -webkit-box-flex: 1; + -ms-flex: 1 1 calc(50% - 20px); + flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); min-width: calc(50% - 20px); width: auto; @@ -25743,18 +29248,27 @@ html.light .page-dev-tools #trasaction-sender .card-footer { max-width: 100% !important; min-width: 100% !important; margin-bottom: 0 !important; - flex: none !important; + -webkit-box-flex: 0 !important; + -ms-flex: none !important; + flex: none !important; } } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; height: 100%; } .page-rwa-tokenization .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-description, .use-case-payments .developer-resources-section .bottom-cards-section.bug-bounty.section-padding .com-card .card-content .card-description { - flex-grow: 1; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; margin-bottom: 24px; max-width: 560px; } @@ -25807,7 +29321,9 @@ html.light .page-dev-tools #trasaction-sender .card-footer { @media (min-width: 768px) { .page-rwa-tokenization .developer-resources-section.single-card .com-card, .use-case-payments .developer-resources-section.single-card .com-card { - flex: 1 1 100% !important; + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 100% !important; + flex: 1 1 100% !important; max-width: 100% !important; min-width: 100% !important; } @@ -25816,8 +29332,10 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .use-case-payments .developer-resources-section.single-card .com-card .bottom-right-img.bug-bounty-card-bg-2 { height: 714px; width: auto; - object-fit: cover; - object-position: right bottom; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: right bottom; + object-position: right bottom; } .page-rwa-tokenization .developer-resources-section.single-card .com-card .card-content, .use-case-payments .developer-resources-section.single-card .com-card .card-content { @@ -25832,7 +29350,9 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .use-case-payments .developer-resources-section.single-card .com-card .card-content .card-description { margin-bottom: 24px; margin-top: 0; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; padding: 0; } .page-rwa-tokenization .developer-resources-section.single-card .com-card .card-content .card-links, @@ -25987,7 +29507,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .json-view .json-view--deleting { outline: 1px solid #da0000; background-color: rgba(218, 0, 0, 0.0666666667); - text-decoration-line: line-through; + -webkit-text-decoration-line: line-through; + text-decoration-line: line-through; } :is(.json-view:hover, .json-view--pair:hover) > :is(.json-view--copy, .json-view--edit), @@ -26126,7 +29647,6 @@ html.light .page-dev-tools #trasaction-sender .card-footer { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; - -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; @@ -26134,7 +29654,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .dev-blog .image-container { - transform: translateY(15%); + -webkit-transform: translateY(15%); + transform: translateY(15%); z-index: 1; } .dev-blog .text-bg { @@ -26145,7 +29666,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } @media (min-width: 992px) { .dev-blog .image-container { - transform: translateX(15%); + -webkit-transform: translateX(15%); + transform: translateX(15%); } .dev-blog .text-bg { padding: 50px 60px; @@ -26166,7 +29688,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { color: #8A919A; } .dev-blog .hero-post-date { - text-decoration: overline solid #32E685 10%; + -webkit-text-decoration: overline solid #32E685 10%; + text-decoration: overline solid #32E685 10%; } .dev-blog .general .category-list img { content: url("../img/blog/general.png"); @@ -26174,6 +29697,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .general .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } .dev-blog .developer_reflections .category-list img { @@ -26182,6 +29707,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .developer_reflections .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } .dev-blog .amendments .category-list img { @@ -26190,6 +29717,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .amendments .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } .dev-blog .case_study .category-list img { @@ -26198,6 +29727,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .case_study .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } .dev-blog .advisories .category-list img { @@ -26206,6 +29737,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .advisories .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } .dev-blog .release_notes .category-list img { @@ -26214,6 +29747,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .release_notes .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } .dev-blog .development .category-list img { @@ -26222,6 +29757,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .development .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } .dev-blog .gateway_bulletins .category-list img { @@ -26230,6 +29767,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .gateway_bulletins .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } .dev-blog .features .category-list img { @@ -26238,6 +29777,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .features .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } .dev-blog .security .category-list img { @@ -26246,6 +29787,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 100%; } .dev-blog .security .category-list .label { + width: -webkit-fit-content; + width: -moz-fit-content; width: fit-content; } @media (min-width: 768px) and (max-width: 991px) { @@ -26262,12 +29805,17 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } } .dev-blog .category_sidebar { + position: -webkit-sticky; position: sticky; top: 80px; } .dev-blog .category-checkbox { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .dev-blog .dropdown { position: relative; @@ -26292,8 +29840,12 @@ html.light .page-dev-tools #trasaction-sender .card-footer { padding: 8px; } .dev-blog .dropdown-content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; background-color: #232325; padding: 16px 8px; width: 254px; @@ -26387,12 +29939,14 @@ html.light .page-dev-tools #trasaction-sender .card-footer { border: none !important; background-color: transparent !important; position: static !important; - box-shadow: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; width: auto !important; } #feedback-content .widget-form-wrapper { position: static !important; - box-shadow: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; display: block; background-color: #232325 !important; border-width: 0 !important; @@ -26413,7 +29967,9 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } #feedback-content .widget-form-wrapper .widget-header-title { background: none !important; - flex-grow: 0 !important; + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; padding-right: 1rem !important; height: auto !important; padding: 0 !important; @@ -26462,14 +30018,12 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .video-image { + -webkit-transition: all 0.35s ease-out; transition: all 0.35s ease-out; cursor: pointer; } .video-image:hover { -webkit-transform: translateY(-16px); - -moz-transform: translateY(-16px); - -ms-transform: translateY(-16px); - -o-transform: translateY(-16px); transform: translateY(-16px); } @@ -26498,8 +30052,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { position: relative; top: 50%; left: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); max-width: 982px; padding: 0 20px; } @@ -26541,6 +30095,7 @@ html.light .page-dev-tools #trasaction-sender .card-footer { padding: 9px 4px 0 8px; width: 2rem; background-position: left 8px bottom 0px; + -webkit-transition: background-position 100ms ease-in-out; transition: background-position 100ms ease-in-out; } .video-external-link.video-external-link:hover::after { @@ -26558,24 +30113,40 @@ html.light .page-dev-tools #trasaction-sender .card-footer { @media (max-width: 768px) { .page-community .sm-align-items-start { - align-items: start !important; + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: start !important; } } .page-community .numbers-animation { width: 218px; height: 96px; } -@keyframes bounce { +@-webkit-keyframes bounce { 0%, 100% { - transform: translateY(0); + -webkit-transform: translateY(0); + transform: translateY(0); } 50% { - transform: translateY(-10px); + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } +} +@keyframes bounce { + 0%, 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 50% { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); } } .page-community .bounce-arrow { - animation: bounce 1.5s infinite; - animation-timing-function: ease-in-out; + -webkit-animation: bounce 1.5s infinite; + animation: bounce 1.5s infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; height: 26px; width: 26px; position: relative; @@ -26773,8 +30344,12 @@ html.light .page-dev-tools #trasaction-sender .card-footer { content: url(../img/community/ic_stackoverflow.png); } .page-community .text-external-link { + display: -webkit-inline-box; + display: -ms-inline-flexbox; display: inline-flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; margin-left: 10px; } .page-community .external-link-contribute { @@ -26783,11 +30358,15 @@ html.light .page-dev-tools #trasaction-sender .card-footer { padding-right: 41px; height: 16px; background: url(../img/icons/arrow-up-right.svg) no-repeat center center; + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; /* smooth transition effect */ } .page-community .text-external-link:hover .external-link-contribute { - transform: translate(5px, -5px); + -webkit-transform: translate(5px, -5px); + transform: translate(5px, -5px); /* move 5px to the right and 5px up */ } .page-community table td { @@ -26799,7 +30378,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { position: absolute; right: 5px; top: 50%; - transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); } @media (max-width: 768px) { .page-community #community-table img { @@ -26825,23 +30405,40 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .page-community .xrpl-events-section { padding: 50px 40px; margin: 100px auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: space-around; - align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; max-width: 1280px; } @media screen and (max-width: 768px) { .page-community .xrpl-events-section { - flex-direction: column; - align-items: start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; } .page-community .xrpl-events-section .header-div { text-align: center; } .page-community .xrpl-events-section .header { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - align-items: start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; } .page-community .xrpl-events-section .header h6, .page-community .xrpl-events-section .header .h6 { margin-bottom: 0.5rem; @@ -26956,9 +30553,14 @@ html.light .page-dev-tools #trasaction-sender .card-footer { color: var(--black-black-30, #C1C1C2); } .page-community .community-funding { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; - justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; max-width: 1280px; margin: 100px auto; padding-right: 54px; @@ -26966,7 +30568,9 @@ html.light .page-dev-tools #trasaction-sender .card-footer { margin-top: 120px; } .page-community .funding-section { - flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; padding: 20px; color: var(--black-black-0); } @@ -26996,49 +30600,81 @@ html.light .page-dev-tools #trasaction-sender .card-footer { margin-bottom: 40px; } .page-community .stats { - flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } @media (max-width: 768px) { .page-community .stats { - flex-direction: column; - align-items: start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; text-align: start; padding-left: 7px; } } .page-community .stacked-stats { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } .page-community .stat { - align-self: center; + -ms-flex-item-align: center; + align-self: center; text-align: center; margin: 0 auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } @media (max-width: 768px) { .page-community .stat { margin: 0px; text-align: start; - align-self: start; + -ms-flex-item-align: start; + align-self: start; } } .page-community .number { opacity: 1; font-size: 88px; + display: -webkit-box; + display: -ms-flexbox; display: flex; padding: 10px; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; line-height: 96px; font-weight: 300; } @media screen and (max-width: 768px) { .page-community .community-funding { - flex-direction: column-reverse; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; padding-left: 16px; padding-right: 16px; } @@ -27055,8 +30691,12 @@ html.light .page-dev-tools #trasaction-sender .card-footer { max-width: 100%; } .page-community .carousel .flex-align { + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } @media (max-width: 768px) { .page-community .carousel { @@ -27081,15 +30721,23 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } } .page-community .image-container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: space-around; - align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; overflow: hidden; /* Hide overflow to keep the sliding effect clean */ } .page-community .image-container img { max-width: 100%; + -webkit-transition: opacity 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out; + transition: opacity 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out; transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out; + transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out; } .page-community #center-image { width: 100%; @@ -27119,28 +30767,33 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-community #left-image.exit, .page-community #right-image.exit { - transform: translateX(-100%); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); opacity: 0; } .page-community #left-image.enter, .page-community #right-image.enter { - transform: translateX(100%); + -webkit-transform: translateX(100%); + transform: translateX(100%); opacity: 0; } .page-community #center-image.exit { - transform: scale(0.8); + -webkit-transform: scale(0.8); + transform: scale(0.8); /* Shrink the center image a bit when exiting */ opacity: 0; } .page-community #center-image.enter { - transform: scale(1); + -webkit-transform: scale(1); + transform: scale(1); /* Return to normal size when entering */ opacity: 1; } .page-community .nav-btn { position: absolute; top: 50%; - transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); font-size: 24px; background: none; border: none; @@ -27156,8 +30809,13 @@ html.light .page-dev-tools #trasaction-sender .card-footer { position: absolute; bottom: 10px; left: 32px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 4px; } @media (max-width: 768px) { @@ -27182,8 +30840,12 @@ html.light .page-dev-tools #trasaction-sender .card-footer { /* 150% */ } .page-community .arrow-wrapper { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; padding-top: 24px; } .page-community :root { @@ -27192,6 +30854,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { --black-black-30: #C1C1C2; } .page-community .community-spotlight-wrapper { + display: -webkit-box; + display: -ms-flexbox; display: flex; padding: 20px; max-width: 1280px; @@ -27202,17 +30866,30 @@ html.light .page-dev-tools #trasaction-sender .card-footer { padding-left: 73px; } .page-community .community-spotlight { - flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; padding-right: 10px; /* for spacing */ } .page-community .projects-wrapper { - flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; gap: 48px; } @media (max-width: 768px) { @@ -27223,6 +30900,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .page-community .project-card { background-color: transparent; border-radius: 4px; + height: -webkit-fit-content; + height: -moz-fit-content; height: fit-content; width: 252px; max-height: 456px; @@ -27233,7 +30912,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } } .page-community .project-card.bottom-right { - align-self: end; + -ms-flex-item-align: end; + align-self: end; } .page-community .card-image { border-radius: 4px; @@ -27242,8 +30922,12 @@ html.light .page-dev-tools #trasaction-sender .card-footer { /* adjust as per your design */ background-color: rgb(44, 43, 43); /* placeholder */ + display: -webkit-box; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .page-community .spotlight-title, .page-community .project-title { @@ -27272,10 +30956,17 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-community .card-details { background-color: transparent; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; text-align: start; padding: 15px; + height: -webkit-fit-content; + height: -moz-fit-content; height: fit-content; } .page-community .view-project { @@ -27289,11 +30980,17 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } @media (max-width: 1076px) { .page-community .project-card.bottom-right { - align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; } .page-community .community-spotlight-wrapper { - flex-direction: column; - align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; margin-left: 0px; padding-right: 26px; padding-left: 26px; @@ -27305,10 +31002,19 @@ html.light .page-dev-tools #trasaction-sender .card-footer { padding: 0; } .page-community .projects-wrapper { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; position: static; } .page-community .card-image { @@ -27321,6 +31027,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { .page-community .project-card { position: static; margin: 20px 0; + height: -webkit-fit-content; + height: -moz-fit-content; height: fit-content; /* Space between the cards */ } @@ -27329,9 +31037,16 @@ html.light .page-dev-tools #trasaction-sender .card-footer { width: 222px; } .page-community .bottom-cards-section .com-card .card-content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; /* Add this line */ gap: 16px; position: relative; @@ -27348,15 +31063,23 @@ html.light .page-dev-tools #trasaction-sender .card-footer { /* You have a fixed height for the cards */ max-width: 352px; position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; /* This makes sure your card content is a flex container */ - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; /* Align children vertically */ - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; /* This will push the links to the bottom */ } .page-community .bottom-cards-section.bug-bounty { - justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } .page-community .bottom-cards-section.bug-bounty .com-card { min-width: 559px; @@ -27372,9 +31095,15 @@ html.light .page-dev-tools #trasaction-sender .card-footer { bottom: 28px; } .page-community .bottom-cards-section { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; - justify-content: space-around; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-pack: distribute; + justify-content: space-around; gap: 48px; max-width: 1280px; margin: 70px auto; @@ -27417,8 +31146,13 @@ html.light .page-dev-tools #trasaction-sender .card-footer { content: url(../img/community/card-bg-3.svg); } .page-community .bottom-cards-section .com-card .card-content { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 16px; position: relative; z-index: 1; @@ -27456,8 +31190,13 @@ html.light .page-dev-tools #trasaction-sender .card-footer { color: #7649E3; } .page-community .bottom-cards-section .com-card .card-content .card-links { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; gap: 8px; } .page-community .bottom-cards-section .com-card .card-content .com-card-link { @@ -27484,19 +31223,16 @@ html.light .page-dev-tools #trasaction-sender .card-footer { vertical-align: middle; padding-left: 8px; -webkit-transition: transform 0.3s ease-out; - -moz-transition: transform 0.3s ease-out; - -ms-transition: transform 0.3s ease-out; - -o-transition: transform 0.3s ease-out; + -webkit-transition: -webkit-transform 0.3s ease-out; + transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .page-community .bottom-cards-section .com-card .card-content .com-card-link:hover { border: none; } .page-community .bottom-cards-section .com-card .card-content .com-card-link:hover::after { -webkit-transform: translateX(4px); - -moz-transform: translateX(4px); - -ms-transform: translateX(4px); - -o-transform: translateX(4px); transform: translateX(4px); } .page-community { @@ -27512,15 +31248,23 @@ html.light .page-dev-tools #trasaction-sender .card-footer { bottom: 0px; } .page-community .bottom-cards-section { - flex-direction: column; - align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; padding: 20px; } .page-community .bottom-cards-section.bug-bounty { - justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } .page-community .bottom-cards-section.bug-bounty .com-card { min-width: 352px; + height: -webkit-fit-content; + height: -moz-fit-content; height: fit-content; max-width: 352px; } @@ -27556,8 +31300,13 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-community .header-div .header { gap: 10px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; padding-bottom: 35px; } .page-community .spotlight-subtitle { @@ -27576,7 +31325,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .sdk-img { - align-self: center; + -ms-flex-item-align: center; + align-self: center; } .light .sdk-img { @@ -27666,7 +31416,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-docs-index .dev-tools-link h6:hover, .page-docs-index .dev-tools-link .h6:hover { text-decoration: underline; - text-decoration-color: #7649E3; + -webkit-text-decoration-color: #7649E3; + text-decoration-color: #7649E3; background: none !important; } .page-docs-index .dev-tools-link:hover p { @@ -27688,7 +31439,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .page-docs-index .langs h5:hover, .page-docs-index .langs .h5:hover { text-decoration: underline; - text-decoration-color: #7649E3; + -webkit-text-decoration-color: #7649E3; + text-decoration-color: #7649E3; background: none !important; } .page-docs-index .langs a:hover { @@ -27701,7 +31453,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { height: 1.5rem; } .page-docs-index .langs h5, .page-docs-index .langs .h5 { - margin-block-start: 0 !important; + -webkit-margin-before: 0 !important; + margin-block-start: 0 !important; } .page-docs-index .langs h5::before, .page-docs-index .langs .h5::before { margin-top: 0; @@ -27777,7 +31530,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { padding: 32px 50px; height: 100%; width: 100%; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .flat-card-grid .flat-card-padding { margin-bottom: 75px; @@ -27793,7 +31547,8 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .flat-card-grid .nav-link:hover { text-decoration: underline; - text-decoration-color: #7649E3; + -webkit-text-decoration-color: #7649E3; + text-decoration-color: #7649E3; } .flat-card-grid .nav-link::after { content: none !important; @@ -27811,21 +31566,16 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .float-up-on-hover { + -webkit-transition: all 0.35s ease-out; transition: all 0.35s ease-out; cursor: pointer; } .float-up-on-hover:hover { -webkit-transform: translateY(-16px); - -moz-transform: translateY(-16px); - -ms-transform: translateY(-16px); - -o-transform: translateY(-16px); transform: translateY(-16px); } .float-up-on-hover .video-image:hover { -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - -o-transform: none; transform: none; } @@ -27836,8 +31586,12 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } } .center-image { + display: -webkit-box; + display: -ms-flexbox; display: flex; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .quickstart-card .quickstart-image { @@ -27863,11 +31617,13 @@ html.light .page-dev-tools #trasaction-sender .card-footer { } .osano-cm-close { - box-sizing: content-box !important; + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; } .osano-cm-switch { - box-sizing: content-box !important; + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; } .osano-cm-widget { @@ -27895,7 +31651,8 @@ html.light body { html.light #topnav-theme .custom-theme-toggle .form-check-input { background-color: transparent; background-position: bottom right; - transform: rotate(-15deg); + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); } html.light h1:not(.chip), html.light h2:not(.chip), @@ -27946,7 +31703,8 @@ html.light .eyebrow { color: #111112; } html.light .invertible-img { - filter: invert(100%); + -webkit-filter: invert(100%); + filter: invert(100%); } html.light .arrow-link::after { content: url("../img/lightmode/icon-long-arrow.svg"); @@ -28070,7 +31828,8 @@ html.light .top-nav #dropdown-hero-for-community > img { html.light .top-nav .dropdown-menu { background-color: #F0F3F7; border-color: #F0F3F7; - box-shadow: 0px 5px 20px 0px #CAD4DF; + -webkit-box-shadow: 0px 5px 20px 0px #CAD4DF; + box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light .top-nav .dropdown-menu a:hover, html.light .top-nav .dropdown-menu a.active { @@ -28147,7 +31906,8 @@ html.light .command-list li a .active { border-left-color: #5429A1; } html.light .footer-brand .logo { - filter: invert(100%); + -webkit-filter: invert(100%); + filter: invert(100%); } html.light .copyright-license { text-shadow: white 0px 0px 2px, white 1px 1px 2px, white 2px 2px 3px, white 2px 2px 4px, white 2px 2px 5px, white 2px 2px 6px, white -1px -1px 2px, white -2px -2px 3px, white -2px -2px 4px; @@ -28161,10 +31921,12 @@ html.light .cta-card, html.light aside .card { color: #141414; background-color: #F0F3F7; - box-shadow: 0px 5px 20px 0px #CAD4DF; + -webkit-box-shadow: 0px 5px 20px 0px #CAD4DF; + box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light #code-samples-deck .card { - box-shadow: 0px 5px 20px 0px #CAD4DF; + -webkit-box-shadow: 0px 5px 20px 0px #CAD4DF; + box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light #code-samples-deck .card-header { border-bottom: none; @@ -28181,7 +31943,8 @@ html.light .page-faq .q-wrapper, html.light .mini-faq .q-wrapper { background-color: #F0F3F7; color: #141414; - box-shadow: 0px 5px 20px 0px #CAD4DF; + -webkit-box-shadow: 0px 5px 20px 0px #CAD4DF; + box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light .page-faq .q-wrapper > h4 a.expander:hover, html.light .page-faq .q-wrapper > .h4 a.expander:hover, html.light .mini-faq .q-wrapper > h4 a.expander:hover, @@ -28214,7 +31977,8 @@ html.light .landing .circled-logo { background-color: #E6EAF0; } html.light .landing .circled-logo img[src="assets/img/logos/globe.svg"] { - filter: invert(100%); + -webkit-filter: invert(100%); + filter: invert(100%); } html.light .landing p a:not(.bds-link), html.light .landing .longform a:not(.bds-link) { @@ -28529,7 +32293,8 @@ html.light .page-uses #bitpay .biz-logo, html.light .page-uses #forte .biz-logo, html.light .page-uses #xrplorer .biz-logo, html.light .page-uses #gatehub .biz-logo { - filter: invert(100%); + -webkit-filter: invert(100%); + filter: invert(100%); } html.light .landing-bg { opacity: 0.4; @@ -28569,7 +32334,8 @@ html.light #feedback-content .widget-helpful .widget-header-title { color: #111112 !important; } html.light #feedback-content .widget-helpful .widget-header-icon { - filter: invert(100%); + -webkit-filter: invert(100%); + filter: invert(100%); } html.light .page-docs-index #software-and-sdks .card-deck .card:nth-child(1) .card-footer { background-image: url(../img/cards/lightmode/4col-green.svg); @@ -28695,7 +32461,8 @@ html.light .page-community #xrplGrantsDark g, html.light .page-community #xrplGrantsDark-small g, html.light .page-community #careersDark g, html.light .page-community #careersDark-small g { - filter: invert(100%) brightness(0.8); + -webkit-filter: invert(100%) brightness(0.8); + filter: invert(100%) brightness(0.8); } html.light #find-us-on-platforms .card-deck .card:nth-child(2) .card-footer { background-image: url(../img/cards/lightmode/4col-light-blue-3.svg); @@ -28730,7 +32497,8 @@ html.light .page-events label { html.light .page-events .event-card { color: #141414; background-color: #FCFCFD; - box-shadow: 0px 5px 20px 0px #CAD4DF; + -webkit-box-shadow: 0px 5px 20px 0px #CAD4DF; + box-shadow: 0px 5px 20px 0px #CAD4DF; } html.light .page-events a.event-card:hover { color: #141414; @@ -28823,7 +32591,8 @@ html.light .page-funding .funding-list #funding-04 { content: url("../img/funding/lightmode/funding-04.svg"); } html.light .page-funding #xrplGrantsDark { - filter: invert(100%) brightness(0.8); + -webkit-filter: invert(100%) brightness(0.8); + filter: invert(100%) brightness(0.8); } html.light .page-impact .connect-list #connect-01 { content: url("../img/impact/lightmode/connect-01.svg"); @@ -28883,7 +32652,8 @@ html.light .dev-blog .blog-filter[type=checkbox]:not(:disabled):hover::after { background: #F0F3F7; } html.light .dev-blog .post-date { - text-decoration: overline solid #145C35 10%; + -webkit-text-decoration: overline solid #145C35 10%; + text-decoration: overline solid #145C35 10%; } html.light .dev-blog #general-badge { background-color: #FFFFFF; @@ -28933,13 +32703,15 @@ html.light .dev-blog .dropdown-content { background-color: #E6EAF0; } html.light .page-tokenization .project-cards .project-logo { - filter: invert(100%); + -webkit-filter: invert(100%); + filter: invert(100%); } html.light .page-tokenization .article-card { background-color: #FFFFFF; } html.light .page-tokenization .article-card-background { - filter: drop-shadow(0px 1px 18px rgba(24, 24, 24, 0.5)); + -webkit-filter: drop-shadow(0px 1px 18px rgba(24, 24, 24, 0.5)); + filter: drop-shadow(0px 1px 18px rgba(24, 24, 24, 0.5)); } html.light .page-tokenization .evernode { content: url("../img/logos/evernode.svg"); @@ -28949,7 +32721,8 @@ html.light .page-tokenization .prev img { } html.light .page-tokenization .next img { content: url("../img/icons/prev_light.svg"); - transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } html.light .page-tokenization .arrow-button { background-color: #E6EAF0; @@ -29079,7 +32852,8 @@ html.light .use-case-payments .payments-integration-section .feature-item__divid } html.light .use-case-payments .payments-project-card { background: #FFF; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } html.light .use-case-payments .payments-project-card .first-word { color: var(--XRPL-Black-Black-80, #232325); @@ -29148,4 +32922,4 @@ html.light .use-case-payments .battle-tested-section .payments-project-card .pro content: url("../img/uses/lightmode/payments/friipay.png"); } -/*# sourceMappingURL=devportal2024-v1.css.map */ +/*# sourceMappingURL=devportal2024-v1.css.map */ \ No newline at end of file diff --git a/styles/xrpl.scss b/styles/xrpl.scss index 5d067d9bb3..23f6889144 100644 --- a/styles/xrpl.scss +++ b/styles/xrpl.scss @@ -82,6 +82,7 @@ $line-height-base: 1.5; @import "_helpers.scss"; @import "_buttons.scss"; @import "../shared/components/Button/Button.scss"; +@import "../shared/components/CarouselButton/CarouselButton.scss"; @import "../shared/components/CardStat/CardStat.scss"; @import "_tables.scss"; @import "_use-cases.scss"; @@ -107,6 +108,7 @@ $line-height-base: 1.5; @import "../shared/patterns/CalloutMediaBanner/CalloutMediaBanner.scss"; @import "../shared/patterns/CardStats/CardStats.scss"; @import "../shared/patterns/CarouselCardList/CarouselCardList.scss"; +@import "../shared/patterns/CarouselFeatured/CarouselFeatured.scss"; @import "../shared/patterns/LogoSquareGrid/LogoSquareGrid.scss"; @import "../shared/patterns/CardsFeatured/CardsFeatured.scss"; @import "../shared/patterns/LogoRectangleGrid/LogoRectangleGrid.scss";