.RV-Spacing__Outer--small { margin: 10px; --outer-spacing: 10px; } .RV-Spacing__Outer--medium { margin: 25px; --outer-spacing: 25px; } .RV-Spacing__Outer--large { margin: 35px; --outer-spacing: 35px; } .RV-Spacing__Inner--small { padding: 10px; gap: 10px; column-gap: 10px; --inner-spacing: 10px; } .RV-Spacing__Inner--medium { padding: 25px; gap: 25px; column-gap: 25px; --inner-spacing: 25px; } .RV-Spacing__Inner--large { padding: 35px; gap: 35px; column-gap: 35px; --inner-spacing: 35px; } .RV-BoxShadow { --color: #6b5690; position: relative; float: left; background-color: #fff; } .RV-BoxShadow:before, .RV-BoxShadow:after { content: ''; position: absolute; z-index: -2; } .RV-BoxShadow--simple { box-shadow: 0 0 10px 3px var(--color); } .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { bottom: 15px; left: 10px; width: 50%; height: 20%; box-shadow: 0 15px 8px var(--color); transform: rotate(-5deg); } .RV-BoxShadow--liftedCorners:after { right: 10px; left: auto; transform: rotate(5deg); } .RV-BoxShadow--levitating { box-shadow: var(--color) 0px 1px 1px 0px inset, var(--color) 0px 40px 80px -15px, var(--color) 0px 30px 60px -30px; } .RV-BoxShadow--stacked { --color: 107, 86, 144; box-shadow: rgba(var(--color), 0.4) 0px 5px, rgba(var(--color), 0.3) 0px 10px, rgba(var(--color), 0.2) 0px 15px, rgba(var(--color), 0.1) 0px 20px, rgba(var(--color), 0.05) 0px 25px; } .RV-BoxShadow--drop { position: relative; box-shadow: 0 1px 4px var(--color); } .RV-BoxShadow--drop:after { box-shadow: 0 0 40px var(--color); bottom: 0px; left: 10%; right: 10%; width: 80%; height: 50%; border-radius: 100%; } .RV-Iconized--extraSmall .RV-Iconized__Icon { width: 1em; height: 1em; position: relative; top: 0.125em; } .RV-Iconized--small { top: -0.25em; } .RV-Iconized--small .RV-Iconized__Icon { width: 1.5em; height: 1.5em; position: relative; top: 0.45em; } .RV-Iconized--medium { top: -0.5em; } .RV-Iconized--medium .RV-Iconized__Icon { width: 2em; height: 2em; position: relative; top: 0.625em; } .RV-Iconized--large { top: -1.03073em; } .RV-Iconized--large .RV-Iconized__Icon { width: 3em; height: 3em; position: relative; top: 1.15573em; } .RV-Iconized--huge { top: -2.05em; } .RV-Iconized--huge .RV-Iconized__Icon { width: 5em; height: 5em; position: relative; top: 2.175em; } .RV-Iconized__Icon { margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0; } .RV-Sizes--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; width: 50%; } .RV-Sizes--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.333333333333336%; width: 33.333333333333336%; } .RV-Sizes--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; width: 25%; } .RV-Sizes--fixedSize { flex-grow: 0; flex-shrink: 0; width: min-content; flex-basis: 100px; } .RV-Sizes--content { flex-grow: 0; flex-shrink: 0; width: max-content; flex-basis: max-content; } .RV-ContentCrop { display: block; overflow: hidden; } .RV-ContentCrop--bottom .RV-Image * { object-position: bottom; } .RV-ContentCrop--top .RV-Image * { object-position: top; } .RV-ContentCrop--right .RV-Image * { object-position: right; } .RV-ContentCrop--left .RV-Image * { object-position: left; } .RV-ContentCrop--center .RV-Image * { object-position: center; } .RV-ContentCrop--square { width: 100%; padding-top: 100%; position: relative; } .RV-ContentCrop--square .RV-Image *, .RV-ContentCrop--square div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop__Image .RV-Image *, .RV-ContentCrop__Image .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-ContentCrop__Text { --cc: 'text'; } .RV-ContentCrop__Text .RV-Text { overflow: hidden; display: block; text-overflow: ellipsis; line-height: 1.1; position: relative; background-color: #fff; max-height: 88%; padding: 0; margin: 0; } .RV-ContentCrop__Text .RV-Text * { margin: 0; padding-bottom: 17.6px; } .RV-ContentCrop__Text .RV-Text *:last-child { padding-bottom: unset; } .RV-ContentCrop__Text--ellipsis:after { position: relative; display: block; bottom: 1.2em; left: calc(100% - 3ch); content: '...'; font-size: 1.2em; min-width: 2em; background-color: #fff; padding: 0 2px; } .RV-ContentCrop__Text--fade:after { background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); display: block; content: ' '; opacity: 0.8; position: relative; top: -25%; width: 100%; height: 25%; z-index: 10; } .RV-FullWidthContent { width: 100%; } .RV-FullWidthContent__Item { --cc: 'text'; width: 100%; } .RV-FullWidthContent__Item .RV-Text { overflow: hidden; display: block; text-overflow: ellipsis; line-height: 1.1; position: relative; background-color: #fff; max-height: 88%; padding: 0; margin: 0; } .RV-FullWidthContent__Item .RV-Text * { margin: 0; padding-bottom: 17.6px; } .RV-FullWidthContent__Item .RV-Text *:last-child { padding-bottom: unset; } .RV-FullWidthContent__Item .RV-Image *, .RV-FullWidthContent__Item .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-FlexRow { display: flex; height: 100%; --width: 100px; --localBreakPoint: 500px; --mediaBreakPoint: 100vw; } .RV-FlexRow--auto { flex-direction: row; } .RV-FlexRow--vertical { flex-direction: column; } .RV-FlexRow--breakPoint { flex-wrap: wrap; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0; gap: 0px; } .RV-FlexRow--breakPoint *:first-child:nth-last-child(1), .RV-FlexRow--breakPoint *:first-child:nth-last-child(1)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (1 - 1))) / 1 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(2), .RV-FlexRow--breakPoint *:first-child:nth-last-child(2)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (2 - 1))) / 2 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(3), .RV-FlexRow--breakPoint *:first-child:nth-last-child(3)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (3 - 1))) / 3 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(4), .RV-FlexRow--breakPoint *:first-child:nth-last-child(4)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (4 - 1))) / 4 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(5), .RV-FlexRow--breakPoint *:first-child:nth-last-child(5)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (5 - 1))) / 5 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(6), .RV-FlexRow--breakPoint *:first-child:nth-last-child(6)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (6 - 1))) / 6 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(7), .RV-FlexRow--breakPoint *:first-child:nth-last-child(7)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (7 - 1))) / 7 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(8), .RV-FlexRow--breakPoint *:first-child:nth-last-child(8)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (8 - 1))) / 8 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(9), .RV-FlexRow--breakPoint *:first-child:nth-last-child(9)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (9 - 1))) / 9 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(10), .RV-FlexRow--breakPoint *:first-child:nth-last-child(10)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (10 - 1))) / 10 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(11), .RV-FlexRow--breakPoint *:first-child:nth-last-child(11)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (11 - 1))) / 11 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(12), .RV-FlexRow--breakPoint *:first-child:nth-last-child(12)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (12 - 1))) / 12 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(13), .RV-FlexRow--breakPoint *:first-child:nth-last-child(13)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (13 - 1))) / 13 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(14), .RV-FlexRow--breakPoint *:first-child:nth-last-child(14)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (14 - 1))) / 14 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(15), .RV-FlexRow--breakPoint *:first-child:nth-last-child(15)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (15 - 1))) / 15 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(16), .RV-FlexRow--breakPoint *:first-child:nth-last-child(16)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (16 - 1))) / 16 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(17), .RV-FlexRow--breakPoint *:first-child:nth-last-child(17)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (17 - 1))) / 17 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(18), .RV-FlexRow--breakPoint *:first-child:nth-last-child(18)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (18 - 1))) / 18 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(19), .RV-FlexRow--breakPoint *:first-child:nth-last-child(19)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (19 - 1))) / 19 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(20), .RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (20 - 1))) / 20 - (2 * var(--spacing-inner))); } @media (max-width: var(--mediaBreakPoint)) { .RV-FlexRow--breakPoint { flex-direction: row; } } .RV-FlexRow--breakPoint .RV-FlexRow__Item { min-width: initial; flex-basis: calc(var(--localBreakPoint) * 999 - 100% * 999); overflow: hidden; } .RV-FlexRow--auto { flex-direction: row; flex-wrap: wrap; } .RV-FlexRow__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; } .RV-FlexRow__Item--narrower { flex-grow: 1; flex-shrink: 5; } .RV-FlexRow__Item--narrow { flex-grow: 2; flex-shrink: 4; } .RV-FlexRow__Item--wide { flex-grow: 4; flex-shrink: 2; } .RV-FlexRow__Item--wider { flex-grow: 5; flex-shrink: 1; } .RV-FlexRow__Item--fixedSize { flex-grow: 0; flex-shrink: 0; width: min-content; flex-basis: var(--width); } .RV-FlexRow__Item--narrower { flex-grow: 1; flex-shrink: 5; } .RV-FlexRow__Item--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; width: 50%; } .RV-FlexRow__Item--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.333333333333336%; width: 33.333333333333336%; } .RV-FlexRow__Item--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; width: 25%; } .RV-FlexRow__Item--content { flex-grow: 0; flex-shrink: 0; width: max-content; flex-basis: max-content; } .RV-FlexGrid { --item-height: 300px; --item-width: 300px; display: grid; } .RV-FlexGrid--autoWidth { grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); grid-template-rows: repeat(auto-fill, minmax(var(--item-height), 1fr)); grid-auto-rows: minmax(var(--item-height), 1fr); } .RV-FlexGrid--fixedSize { grid-template-rows: repeat(auto-fill, minmax(var(--item-height), 1fr)); grid-auto-rows: minmax(var(--item-height), 1fr); grid-template-columns: repeat(auto-fill, var(--item-width)); justify-content: space-between; } .RV-FlexGrid--masonry { display: block; column-count: auto; column-width: var(--item-width); } .RV-FlexGrid--masonry .RV-FlexGrid__Item { margin-bottom: var(--inner-spacing); } .RV-FlexGrid--masonry .RV-FlexGrid__Item * { margin-bottom: unset; } .RV-Fan { --base-height: 280px; --base-width: 320px; display: flex; } .RV-Fan--fullWidth { flex-flow: row wrap; } .RV-Fan--fullWidth .RV-Fan__Surface { width: calc(100% - var(--base-width)); min-width: var(--base-width); height: var(--base-height); } .RV-Fan--fullWidth .RV-Fan__Base { flex-grow: 1; } .RV-Fan--fullWidth .RV-Fan__Surface { flex-grow: 1; } .RV-Fan--vertical { flex-direction: column; width: max-content; } .RV-Fan--vertical .RV-Fan__Surface { width: var(--base-width); min-height: var(--base-height); } .RV-Fan--horizontal { flex-direction: row; } .RV-Fan--horizontal .RV-Fan__Surface { min-width: var(--base-width); height: var(--base-height); } .RV-Fan--auto { flex-flow: row wrap; } .RV-Fan--auto .RV-Fan__Surface { width: calc(100% - var(--base-width)); min-width: var(--base-width); height: var(--base-height); } .RV-Fan__Surface { --cc: 'text'; display: block; overflow: hidden; } .RV-Fan__Surface .RV-Text { overflow: hidden; display: block; text-overflow: ellipsis; line-height: 1.1; position: relative; background-color: #fff; max-height: 88%; padding: 0; margin: 0; } .RV-Fan__Surface .RV-Text * { margin: 0; padding-bottom: 17.6px; } .RV-Fan__Surface .RV-Text *:last-child { padding-bottom: unset; } .RV-Fan__Surface .RV-Image *, .RV-Fan__Surface .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-Fan__Surface--fixedWidth { max-width: var(--base-width); } .RV-Fan__Surface--fixedHeight { height: var(--base-height); } .RV-Fan__Base { height: var(--base-height); width: var(--base-width); flex: 0 0 auto; } .RV-Alignment { display: grid; } .RV-Alignment--top { display: grid; align-content: start; } .RV-Alignment--bottom { display: grid; align-content: end; } .RV-Alignment--left { display: grid; justify-content: start; } .RV-Alignment--right { display: grid; justify-content: end; } .RV-Alignment--center { display: grid; justify-content: center; } .RV-Alignment--center { display: grid; align-items: center; } .RV-Alignment--center { display: grid; justify-content: center; display: grid; align-items: center; } * { margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0; }