640 lines
13 KiB
CSS
640 lines
13 KiB
CSS
/* Welcome to Codeium Editor!
|
|
Press Enter and use Tab to accept AI suggestions. Here's an example:*/
|
|
|
|
/* .action-button class with a hover effect. */
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.transition_wrap {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
/* Gradient reveal initial state - hide gradient layer chars until animated */
|
|
[data-gradient-reveal="gradient"]>span,
|
|
[data-gradient-reveal="gradient"] .fmtion-char {
|
|
opacity: 0;
|
|
}
|
|
|
|
:root {
|
|
--grid-breakout: [full-start] minmax(0, 1fr) [content-start] repeat(var(--site--column-count),
|
|
minmax(0, var(--site--column-width))) [content-end] minmax(0, 1fr) [full-end];
|
|
--grid-breakout-single: [full-start] minmax(0, 1fr) [content-start] minmax(0, calc(100% - var(--site--margin) * 2)) [content-end] minmax(0, 1fr) [full-end];
|
|
}
|
|
|
|
::before,
|
|
::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.w-embed:before,
|
|
.w-embed:after,
|
|
.w-richtext:before,
|
|
.w-richtext:after {
|
|
content: unset;
|
|
}
|
|
|
|
html {
|
|
background-color: var(--_theme---background);
|
|
}
|
|
|
|
button {
|
|
background-color: unset;
|
|
padding: unset;
|
|
text-align: inherit;
|
|
}
|
|
|
|
button:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
video {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* remove padding of empty element */
|
|
.wf-empty {
|
|
padding: 0;
|
|
}
|
|
|
|
svg {
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
option {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
img::selection {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Typography */
|
|
body {
|
|
text-transform: var(--_text-style---text-transform);
|
|
font-smoothing: antialiased;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Clear Defaults */
|
|
a:not([class]) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p,
|
|
blockquote,
|
|
label {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
line-height: inherit;
|
|
letter-spacing: inherit;
|
|
text-transform: inherit;
|
|
text-wrap: inherit;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
select:has(option[value=""]:checked) {
|
|
color: color-mix(in lab, currentcolor 60%, transparent);
|
|
}
|
|
|
|
/* Selection Color */
|
|
::selection {
|
|
background-color: var(--_theme---selection--background);
|
|
color: var(--_theme---selection--text);
|
|
}
|
|
|
|
/* Margin Trim */
|
|
:is(.u-margin-trim, .u-rich-text)> :not( :not(.w-condition-invisible, .u-cover-absolute, .u-ignore-trim) ~ :not(.w-condition-invisible,
|
|
.u-cover-absolute,
|
|
.u-ignore-trim)),
|
|
:is(.u-margin-trim, .u-rich-text)> :not( :not(.w-condition-invisible, .u-cover-absolute, .u-ignore-trim) ~ :not(.w-condition-invisible,
|
|
.u-cover-absolute,
|
|
.u-ignore-trim)).u-display-contents> :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
:is(.u-margin-trim, .u-rich-text)> :not( :has(~ :not(.w-condition-invisible,
|
|
.u-cover-absolute,
|
|
.u-ignore-trim))),
|
|
:is(.u-margin-trim, .u-rich-text)> :not( :has(~ :not(.w-condition-invisible,
|
|
.u-cover-absolute,
|
|
.u-ignore-trim))).u-display-contents> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Line Height Trim */
|
|
:is(h1, h2, h3, h4, h5, h6, p):not(.u-text-trim-off,
|
|
:has([class*="u-text-style-"]))::before,
|
|
[class*="u-text-style-"]:not(.u-text-trim-off,
|
|
:has(h1, h2, h3, h4, h5, h6, p))::before {
|
|
content: "";
|
|
display: table;
|
|
margin-bottom: calc(-0.5lh + var(--_text-style---trim-top));
|
|
}
|
|
|
|
:is(h1, h2, h3, h4, h5, h6, p):not(.u-text-trim-off,
|
|
:has([class*="u-text-style-"]))::after,
|
|
[class*="u-text-style-"]:not(.u-text-trim-off,
|
|
:has(h1, h2, h3, h4, h5, h6, p))::after {
|
|
content: "";
|
|
display: table;
|
|
margin-bottom: calc(-0.5lh + var(--_text-style---trim-bottom));
|
|
}
|
|
|
|
/* Rich Text Links */
|
|
.w-richtext a {
|
|
position: relative;
|
|
z-index: 4;
|
|
}
|
|
|
|
/* Line Clamp */
|
|
.u-line-clamp-1,
|
|
.u-line-clamp-2,
|
|
.u-line-clamp-3,
|
|
.u-line-clamp-4 {
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.u-line-clamp-2 {
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.u-line-clamp-3 {
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
|
|
.u-line-clamp-4 {
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
|
|
/* Child Contain */
|
|
.u-child-contain>* {
|
|
width: 100%;
|
|
max-width: inherit !important;
|
|
margin-inline: 0 !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
/* Hide */
|
|
.u-hide-if-empty:empty,
|
|
.u-hide-if-empty:not(:has(> :not(.w-condition-invisible))),
|
|
.u-hide-if-empty-cms:not(:has(.w-dyn-item)),
|
|
.u-embed-js,
|
|
.u-embed-css {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Focus State */
|
|
a,
|
|
button,
|
|
:where([tabindex]),
|
|
[data-outline],
|
|
input {
|
|
outline-offset: var(--focus--offset-outer);
|
|
}
|
|
|
|
a:focus-visible,
|
|
button:focus-visible,
|
|
[tabindex]:focus-visible,
|
|
input:focus-visible {
|
|
outline-color: var(--_theme---text);
|
|
outline-width: var(--focus--width);
|
|
outline-style: solid;
|
|
}
|
|
|
|
/* Disabled */
|
|
[data-button]:has(button:disabled) {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Global / Clickable Component */
|
|
.wf-design-mode .clickable_wrap {
|
|
z-index: 0;
|
|
}
|
|
|
|
.clickable_wrap a[href="#"] {
|
|
display: none;
|
|
}
|
|
|
|
.clickable_wrap a[href="#"]~button {
|
|
display: block;
|
|
}
|
|
|
|
/* Responsive Above */
|
|
@container threshold-large (width >=62em) {
|
|
.u-order-unset-above {
|
|
order: unset !important;
|
|
}
|
|
|
|
.u-all-unset-above {
|
|
all: unset !important;
|
|
}
|
|
|
|
.u-grid-below {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
@container threshold-medium (width >=48em) {
|
|
.u-order-unset-above {
|
|
order: unset !important;
|
|
}
|
|
|
|
.u-all-unset-above {
|
|
all: unset !important;
|
|
}
|
|
|
|
.u-grid-below {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
@container threshold-small (width >=30em) {
|
|
.u-order-unset-above {
|
|
order: unset !important;
|
|
}
|
|
|
|
.u-all-unset-above {
|
|
all: unset !important;
|
|
}
|
|
|
|
.u-grid-below {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
/* Responsive Below */
|
|
@container threshold-large (width < 62em) {
|
|
.u-order-unset-below {
|
|
order: unset !important;
|
|
}
|
|
|
|
.u-all-unset-below {
|
|
all: unset !important;
|
|
}
|
|
|
|
.u-grid-above {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
@container threshold-medium (width < 48em) {
|
|
.u-order-unset-below {
|
|
order: unset !important;
|
|
}
|
|
|
|
.u-all-unset-below {
|
|
all: unset !important;
|
|
}
|
|
|
|
.u-grid-above {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
@container threshold-small (width < 30em) {
|
|
.u-order-unset-below {
|
|
order: unset !important;
|
|
}
|
|
|
|
.u-all-unset-below {
|
|
all: unset !important;
|
|
}
|
|
|
|
.u-grid-above {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
/* State Manager */
|
|
[data-state] {
|
|
--_state---true: 1;
|
|
--_state---false: 0;
|
|
}
|
|
|
|
.is-active,
|
|
[data-state~="checked"]:is(:checked, :has(:checked)),
|
|
[data-state~="current"]:is(.w--current, :has(.w--current)),
|
|
[data-state~="open"]:is(.w--open, :has(.w--open)),
|
|
[data-state~="pressed"]:is([aria-pressed="true"],
|
|
:has([aria-pressed="true"])),
|
|
[data-state~="expanded"]:is([aria-expanded="true"],
|
|
:has([aria-expanded="true"])),
|
|
[data-state~="external"]:is([target="_blank"],
|
|
:has([target="_blank"])) {
|
|
--_state---true: 0;
|
|
--_state---false: 1;
|
|
}
|
|
|
|
.wf-design-mode [data-trigger~="preview"],
|
|
[data-trigger~="focus"]:is(:focus-visible, :has(:focus-visible)),
|
|
[data-trigger~="group"]:has([data-trigger~="focus-other"]:focus-visible,
|
|
[data-trigger~="focus-other"] :focus-visible) [data-trigger~="focus-other"]:not( :focus-visible,
|
|
:has(:focus-visible)) {
|
|
--_trigger---on: 0;
|
|
--_trigger---off: 1;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
|
|
[data-trigger~="hover"]:hover,
|
|
[data-trigger~="hover-if-clickable"]:has(.clickable_wrap:not(.w-condition-invisible)):hover,
|
|
[data-trigger~="group"]:has([data-trigger~="hover-other"]:hover) [data-trigger~="hover-other"]:not(:hover) {
|
|
--_trigger---on: 0;
|
|
--_trigger---off: 1;
|
|
}
|
|
|
|
[data-trigger~="hover-other"]:hover {
|
|
--_trigger---on: 1 !important;
|
|
--_trigger---off: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (hover: none) {
|
|
[data-trigger~="mobile"] {
|
|
--_trigger---on: 0;
|
|
--_trigger---off: 1;
|
|
}
|
|
}
|
|
|
|
/* Slot Styler */
|
|
[data-slot]>.w-dyn-list,
|
|
[data-slot]>.w-dyn-list>*,
|
|
[data-slot]>.w-dyn-list>*>*,
|
|
[data-slot]>.u-display-contents>.w-dyn-list,
|
|
[data-slot]>.u-display-contents>.w-dyn-list>*,
|
|
[data-slot]>.u-display-contents>.w-dyn-list>*>*,
|
|
[data-slot]>.u-display-contents>.u-display-contents>.w-dyn-list,
|
|
[data-slot]>.u-display-contents>.u-display-contents>.w-dyn-list>*,
|
|
[data-slot]>.u-display-contents>.u-display-contents>.w-dyn-list>*>* {
|
|
display: contents;
|
|
}
|
|
|
|
/* Gradient Accent */
|
|
.u-heading-accent strong,
|
|
.u-heading-accent b {
|
|
background: linear-gradient(45deg,
|
|
var(--swatch--green),
|
|
var(--swatch--gold),
|
|
var(--swatch--coral));
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
color: transparent;
|
|
-webkit-animation: GradientAnimation 5s ease infinite;
|
|
-moz-animation: GradientAnimation 5s ease infinite;
|
|
animation: GradientAnimation 5s ease infinite;
|
|
}
|
|
|
|
/* Gradient Background - add your data attribute name */
|
|
[data-gradient-bg] {
|
|
background: linear-gradient(300deg,
|
|
var(--swatch--green),
|
|
var(--swatch--gold),
|
|
var(--swatch--coral));
|
|
background-size: 180% 180%;
|
|
-webkit-animation: GradientAnimation 10s ease infinite;
|
|
-moz-animation: GradientAnimation 10s ease infinite;
|
|
animation: GradientAnimation 10s ease infinite;
|
|
}
|
|
|
|
/* Respect user's motion preferences */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
.u-heading-accent strong,
|
|
.u-heading-accent b {
|
|
-webkit-animation: none;
|
|
-moz-animation: none;
|
|
animation: none;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
[data-gradient-bg] {
|
|
-webkit-animation: none;
|
|
-moz-animation: none;
|
|
animation: none;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes GradientAnimation {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes GradientAnimation {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes GradientAnimation {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
/* Shadow */
|
|
[data-shadow] {
|
|
box-shadow: rgb(from var(--_theme---shadow) r g b / 0.02) 0 0.25em 0.5em 0,
|
|
rgb(from var(--_theme---shadow) r g b / 0.03) 0 0.5em 0.75em 0,
|
|
rgb(from var(--_theme---shadow) r g b / 0.04) 0 0.75em 1em 0,
|
|
rgb(from var(--_theme---shadow) r g b / 0.04) 0 1em 1.5em 0;
|
|
}
|
|
|
|
html.wf-design-mode .guide_wrap {
|
|
display: block;
|
|
}
|
|
|
|
.guide_layout {
|
|
counter-reset: gridguides;
|
|
}
|
|
|
|
.guide_layout>div::before {
|
|
counter-increment: gridguides;
|
|
content: counter(gridguides);
|
|
}
|
|
|
|
@container (min-width: 40em) {
|
|
.nav_desktop_wrap {
|
|
display: block;
|
|
}
|
|
|
|
.nav_desktop_wrap:not(.w-condition-invisible)~.nav_mobile_wrap,
|
|
.nav_desktop_wrap:not(.w-condition-invisible)~.nav_menu_backdrop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
body:has([data-tooltip]:hover) .tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-transition-wrap] {
|
|
display: none !important;
|
|
}
|
|
|
|
.button_menu_icon_line {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
.button_menu_wrap.is-active .button_menu_icon_line:first-child {
|
|
transform: translateY(0.175rem) rotate(45deg);
|
|
}
|
|
|
|
.button_menu_wrap.is-active .button_menu_icon_line:last-child {
|
|
transform: translateY(-0.175rem) rotate(-45deg);
|
|
}
|
|
|
|
.modal_dialog::backdrop {
|
|
opacity: 0;
|
|
}
|
|
|
|
.wf-design-mode [data-show-in-designer="true"] {
|
|
display: block;
|
|
}
|
|
|
|
@container (width < 40em) {
|
|
.form_fieldset_list:has(.form_fieldset_list) {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@container (width < 18em) {
|
|
.form_fieldset_list {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@container (width >=65em) {
|
|
.hero_home_layout {
|
|
gap: 6rem !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero_home_trigger.is-1 {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.hero_home_trigger.is-2 {
|
|
display: none !important;
|
|
}
|
|
|
|
.hero_home_wrap {
|
|
height: 100vh !important;
|
|
}
|
|
}
|
|
|
|
.wf-design-mode .hero_home_wrap {
|
|
height: 100vh !important;
|
|
}
|
|
|
|
.is-merchant {
|
|
clip-path: polygon(0.75rem 0%,
|
|
calc(100% - 0.75rem) 0%,
|
|
100% 50%,
|
|
calc(100% - 0.75rem) 100%,
|
|
0.75rem 100%,
|
|
0% 50%);
|
|
}
|
|
|
|
.is-studio {
|
|
clip-path: polygon(0% calc(0% + 0.4375rem),
|
|
calc(0% + 0.4375rem) calc(0% + 0.4375rem),
|
|
calc(0% + 0.4375rem) 0%,
|
|
calc(100% - 0.4375rem) 0%,
|
|
calc(100% - 0.4375rem) calc(0% + 0.4375rem),
|
|
100% calc(0% + 0.4375rem),
|
|
100% calc(100% - 0.4375rem),
|
|
calc(100% - 0.4375rem) calc(100% - 0.4375rem),
|
|
calc(100% - 0.4375rem) 100%,
|
|
calc(0% + 0.4375rem) 100%,
|
|
calc(0% + 0.4375rem) calc(100% - 0.4375rem),
|
|
0% calc(100% - 0.4375rem));
|
|
}
|
|
|
|
.is-gamer {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.product_lifestyle_wrap.is-right {
|
|
inset: auto -14% 20% auto;
|
|
}
|
|
|
|
#canvas-target canvas {
|
|
position: relative;
|
|
top: -1px;
|
|
left: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
max-width: unset;
|
|
pointer-events: all;
|
|
max-width: calc(100% + 2px);
|
|
max-height: calc(100% + 2px);
|
|
min-width: calc(100% + 2px);
|
|
min-height: calc(100% + 2px);
|
|
}
|
|
|
|
[data-credit-modal] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.5s;
|
|
}
|
|
|
|
[data-credit-modal].is-open {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
|
|
}
|
|
/* Fix: headings inside .c-heading should inherit font-size from parent */
|
|
.c-heading h1,
|
|
.c-heading h2,
|
|
.c-heading h3,
|
|
.c-heading h4,
|
|
.c-heading h5,
|
|
.c-heading h6 {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|