You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Fakel-Gym/resources/css/theme.css

99 lines
3.1 KiB

@theme {
--breakpoint-xs: 480px;
--breakpoint-sm: 600px;
--breakpoint-md: 782px;
--breakpoint-lg: 960px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1440px;
--color-primary: var(--wp--preset--color--primary);
--color-secondary: var(--wp--preset--color--secondary);
--color-dark: var(--wp--preset--color--dark);
--color-light: var(--wp--preset--color--light);
--text-xs: var(--wp--preset--font-size--xs, 0.75rem);
--text-sm: var(--wp--preset--font-size--sm, 0.875rem);
--text-base: var(--wp--preset--font-size--base, 1rem);
--text-lg: var(--wp--preset--font-size--lg, 1.125rem);
--text-xl: var(--wp--preset--font-size--xl, 1.25rem);
--text-2xl: var(--wp--preset--font-size--2xl, 1.5rem);
--text-3xl: var(--wp--preset--font-size--3xl, 1.875rem);
--text-4xl: var(--wp--preset--font-size--4xl, 2.25rem);
--text-5xl: var(--wp--preset--font-size--5xl, 3rem);
--text-6xl: var(--wp--preset--font-size--6xl, 3.75rem);
--text-7xl: var(--wp--preset--font-size--7xl, 4.5rem);
--text-8xl: var(--wp--preset--font-size--8xl, 6rem);
--text-9xl: var(--wp--preset--font-size--9xl, 8rem);
--font-family-sans: 'Gilroy', ui-sans-serif, system-ui, sans-serif;
}
html, body {
font-family: var(--font-family-sans);
color: #222;
}
.red-gradient {
background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
}
.dark-gradient {
background: linear-gradient(90deg, #2b2c35 39.42%, #6e7996 92.9%);
}
.grey-gradient {
background: linear-gradient(90deg, #9d9994 39.42%, #c5c5b9 92.9%);
}
.grey-gradient-hover {
background: linear-gradient(90deg, #9d9994 39.42%, #c5c5b9 92.9%);
background-size: 177% 100%;
background-position: 0% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.grey-gradient-hover:hover {
background-position: 39.42% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.dark .grey-gradient-hover {
border: 1px solid rgba(248, 248, 248, 0.12);
backdrop-filter: blur(20px);
background: linear-gradient(90deg, #2b2c35 39.42%, #6e7996 92.9%);
background-size: 177% 100%;
background-position: -1px 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.dark .grey-gradient-hover:hover {
background-position: 9.42% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.red-gradient-hover {
background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
background-size: 177% 100%;
background-position: 0% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.red-gradient-hover:hover {
background-position: 39.42% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.dark-gradient-hover {
background: linear-gradient(90deg, #2b2c35 0%, #6e7996 53.48%);
background-size: 177% 100%;
background-position: 0% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.dark-gradient-hover:hover {
background-position: 39.42% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
}