polished template
This commit is contained in:
GP_DEV
228
css/app.css
228
css/app.css
@@ -25,8 +25,6 @@
|
||||
--container-2xl: 42rem;
|
||||
--text-sm: var(--wp--preset--font-size--sm, 0.875rem);
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-lg: var(--wp--preset--font-size--lg, 1.125rem);
|
||||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: var(--wp--preset--font-size--xl, 1.25rem);
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-2xl: var(--wp--preset--font-size--2xl, 1.5rem);
|
||||
@@ -236,12 +234,21 @@
|
||||
.inset-0 {
|
||||
inset: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1/2 * 100%);
|
||||
}
|
||||
.top-4 {
|
||||
top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.top-\[32px\] {
|
||||
top: 32px;
|
||||
}
|
||||
.right-0 {
|
||||
right: calc(var(--spacing) * 0);
|
||||
}
|
||||
.right-4 {
|
||||
right: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -263,6 +270,9 @@
|
||||
.z-\[1\] {
|
||||
z-index: 1;
|
||||
}
|
||||
.z-\[1000\] {
|
||||
z-index: 1000;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -308,9 +318,6 @@
|
||||
.my-8 {
|
||||
margin-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
.my-\[24px\] {
|
||||
margin-block: 24px;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -488,6 +495,10 @@
|
||||
.w-\[136px\] {
|
||||
width: 136px;
|
||||
}
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -529,9 +540,6 @@
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex-\[2\] {
|
||||
flex: 2;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -719,12 +727,6 @@
|
||||
.bg-\[\#10b981\] {
|
||||
background-color: #10b981;
|
||||
}
|
||||
.bg-\[\#222\] {
|
||||
background-color: #222;
|
||||
}
|
||||
.bg-\[\#e0e0e0\] {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
.bg-\[\#e21e24\] {
|
||||
background-color: #e21e24;
|
||||
}
|
||||
@@ -758,6 +760,18 @@
|
||||
.bg-white {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
.bg-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
.bg-center {
|
||||
background-position: center;
|
||||
}
|
||||
.bg-no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.fill-\[\#E0E0E0\] {
|
||||
fill: #E0E0E0;
|
||||
}
|
||||
.object-contain {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
@@ -805,8 +819,14 @@
|
||||
.py-\[12px\] {
|
||||
padding-block: 12px;
|
||||
}
|
||||
.pt-\[15px\] {
|
||||
padding-top: 15px;
|
||||
.py-\[24px\] {
|
||||
padding-block: 24px;
|
||||
}
|
||||
.pt-\[14px\] {
|
||||
padding-top: 14px;
|
||||
}
|
||||
.pt-\[24px\] {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.pt-\[40px\] {
|
||||
padding-top: 40px;
|
||||
@@ -817,8 +837,11 @@
|
||||
.pt-\[80px\] {
|
||||
padding-top: 80px;
|
||||
}
|
||||
.pr-\[15px\] {
|
||||
padding-right: 15px;
|
||||
.pt-\[161px\] {
|
||||
padding-top: 161px;
|
||||
}
|
||||
.pb-\[30px\] {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
@@ -831,10 +854,6 @@
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
}
|
||||
.text-lg {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--tw-leading, var(--text-lg--line-height));
|
||||
}
|
||||
.text-sm {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
@@ -961,9 +980,6 @@
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.\!no-underline {
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
@@ -1053,6 +1069,26 @@
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-\[\#222\]:hover {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-\[\#444\]:hover {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-\[\#555\]:hover {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-\[\#888\]:hover {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-gray-700:hover {
|
||||
color: var(--color-gray-700);
|
||||
@@ -1069,6 +1105,12 @@
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:brightness-150:hover {
|
||||
--tw-brightness: brightness(150%);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
.focus\:ring-2:focus {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@@ -1211,6 +1253,81 @@
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
.dark\:border:where(.dark, .dark *) {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.dark\:border-\[rgba\(248\,248\,248\,0\.05\)\]:where(.dark, .dark *) {
|
||||
border-color: rgba(248,248,248,0.05);
|
||||
}
|
||||
.dark\:border-\[rgba\(248\,_248\,_248\,_0\.2\)\]:where(.dark, .dark *) {
|
||||
border-color: rgba(248, 248, 248, 0.2);
|
||||
}
|
||||
.dark\:border-\[rgba\(248\,_248\,_248\,_0\.5\)\]:where(.dark, .dark *) {
|
||||
border-color: rgba(248, 248, 248, 0.5);
|
||||
}
|
||||
.dark\:border-white\/\[0\.05\]:where(.dark, .dark *) {
|
||||
border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
|
||||
}
|
||||
.dark\:border-white\/\[0\.12\]:where(.dark, .dark *) {
|
||||
border-color: color-mix(in oklab, var(--color-white) 12%, transparent);
|
||||
}
|
||||
.dark\:bg-\[\#f8f8f8\]:where(.dark, .dark *) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.dark\:bg-inherit:where(.dark, .dark *) {
|
||||
background-color: inherit;
|
||||
}
|
||||
.dark\:bg-gradient-to-r:where(.dark, .dark *) {
|
||||
--tw-gradient-position: to right in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.dark\:bg-\[linear-gradient\(90deg\,rgba\(248\,248\,248\,0\.04\)_65\.8\%\,rgba\(255\,255\,255\,0\.12\)_100\%\)\]:where(.dark, .dark *) {
|
||||
background-image: linear-gradient(90deg,rgba(248,248,248,0.04) 65.8%,rgba(255,255,255,0.12) 100%);
|
||||
}
|
||||
.dark\:from-\[rgba\(248\,248\,248\,0\.55\)\]:where(.dark, .dark *) {
|
||||
--tw-gradient-from: rgba(248,248,248,0.55);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.dark\:to-white:where(.dark, .dark *) {
|
||||
--tw-gradient-to: var(--color-white);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.dark\:bg-clip-text:where(.dark, .dark *) {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
.dark\:fill-\[\#F8F8F8\]:where(.dark, .dark *) {
|
||||
fill: #F8F8F8;
|
||||
}
|
||||
.dark\:text-\[\#6c6b6b\]:where(.dark, .dark *) {
|
||||
color: #6c6b6b;
|
||||
}
|
||||
.dark\:text-\[\#f8f8f8\]:where(.dark, .dark *) {
|
||||
color: #f8f8f8;
|
||||
}
|
||||
.dark\:text-transparent:where(.dark, .dark *) {
|
||||
color: transparent;
|
||||
}
|
||||
.dark\:opacity-20:where(.dark, .dark *) {
|
||||
opacity: 20%;
|
||||
}
|
||||
.dark\:backdrop-blur-\[20px\]:where(.dark, .dark *) {
|
||||
--tw-backdrop-blur: blur(20px);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.dark\:hover\:text-\[\#c7c7c7\]:where(.dark, .dark *):hover {
|
||||
color: #c7c7c7;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.dark\:hover\:brightness-90:where(.dark, .dark *):hover {
|
||||
--tw-brightness: brightness(90%);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
.\[\&\>_img\]\:max-w-none> img {
|
||||
max-width: none;
|
||||
}
|
||||
@@ -1220,6 +1337,12 @@
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.dark\:hover\:\[\&\>img\]\:brightness-90:where(.dark, .dark *):hover>img {
|
||||
--tw-brightness: brightness(90%);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
}
|
||||
html, body {
|
||||
font-family: var(--font-family-sans);
|
||||
@@ -1244,6 +1367,19 @@ html, body {
|
||||
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);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
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%;
|
||||
@@ -1536,6 +1672,48 @@ html, body {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-position {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-from {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-via {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-to {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-stops {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-via-stops {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-from-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 0%;
|
||||
}
|
||||
@property --tw-gradient-via-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 50%;
|
||||
}
|
||||
@property --tw-gradient-to-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -25,8 +25,6 @@
|
||||
--container-2xl: 42rem;
|
||||
--text-sm: var(--wp--preset--font-size--sm, 0.875rem);
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-lg: var(--wp--preset--font-size--lg, 1.125rem);
|
||||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: var(--wp--preset--font-size--xl, 1.25rem);
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-2xl: var(--wp--preset--font-size--2xl, 1.5rem);
|
||||
@@ -236,12 +234,21 @@
|
||||
.inset-0 {
|
||||
inset: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1/2 * 100%);
|
||||
}
|
||||
.top-4 {
|
||||
top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.top-\[32px\] {
|
||||
top: 32px;
|
||||
}
|
||||
.right-0 {
|
||||
right: calc(var(--spacing) * 0);
|
||||
}
|
||||
.right-4 {
|
||||
right: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -263,6 +270,9 @@
|
||||
.z-\[1\] {
|
||||
z-index: 1;
|
||||
}
|
||||
.z-\[1000\] {
|
||||
z-index: 1000;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -308,9 +318,6 @@
|
||||
.my-8 {
|
||||
margin-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
.my-\[24px\] {
|
||||
margin-block: 24px;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -488,6 +495,10 @@
|
||||
.w-\[136px\] {
|
||||
width: 136px;
|
||||
}
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -524,9 +535,6 @@
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex-\[2\] {
|
||||
flex: 2;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -714,12 +722,6 @@
|
||||
.bg-\[\#10b981\] {
|
||||
background-color: #10b981;
|
||||
}
|
||||
.bg-\[\#222\] {
|
||||
background-color: #222;
|
||||
}
|
||||
.bg-\[\#e0e0e0\] {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
.bg-\[\#e21e24\] {
|
||||
background-color: #e21e24;
|
||||
}
|
||||
@@ -753,6 +755,18 @@
|
||||
.bg-white {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
.bg-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
.bg-center {
|
||||
background-position: center;
|
||||
}
|
||||
.bg-no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.fill-\[\#E0E0E0\] {
|
||||
fill: #E0E0E0;
|
||||
}
|
||||
.object-contain {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
@@ -800,8 +814,14 @@
|
||||
.py-\[12px\] {
|
||||
padding-block: 12px;
|
||||
}
|
||||
.pt-\[15px\] {
|
||||
padding-top: 15px;
|
||||
.py-\[24px\] {
|
||||
padding-block: 24px;
|
||||
}
|
||||
.pt-\[14px\] {
|
||||
padding-top: 14px;
|
||||
}
|
||||
.pt-\[24px\] {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.pt-\[40px\] {
|
||||
padding-top: 40px;
|
||||
@@ -812,8 +832,11 @@
|
||||
.pt-\[80px\] {
|
||||
padding-top: 80px;
|
||||
}
|
||||
.pr-\[15px\] {
|
||||
padding-right: 15px;
|
||||
.pt-\[161px\] {
|
||||
padding-top: 161px;
|
||||
}
|
||||
.pb-\[30px\] {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
@@ -826,10 +849,6 @@
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
}
|
||||
.text-lg {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--tw-leading, var(--text-lg--line-height));
|
||||
}
|
||||
.text-sm {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
@@ -956,9 +975,6 @@
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.\!no-underline {
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
@@ -1048,6 +1064,26 @@
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-\[\#222\]:hover {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-\[\#444\]:hover {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-\[\#555\]:hover {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-\[\#888\]:hover {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:text-gray-700:hover {
|
||||
color: var(--color-gray-700);
|
||||
@@ -1064,6 +1100,12 @@
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hover\:brightness-150:hover {
|
||||
--tw-brightness: brightness(150%);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
.focus\:ring-2:focus {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@@ -1206,6 +1248,123 @@
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:border {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:border-\[rgba\(248\,248\,248\,0\.05\)\] {
|
||||
border-color: rgba(248,248,248,0.05);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:border-\[rgba\(248\,_248\,_248\,_0\.2\)\] {
|
||||
border-color: rgba(248, 248, 248, 0.2);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:border-\[rgba\(248\,_248\,_248\,_0\.5\)\] {
|
||||
border-color: rgba(248, 248, 248, 0.5);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:border-white\/\[0\.05\] {
|
||||
border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:border-white\/\[0\.12\] {
|
||||
border-color: color-mix(in oklab, var(--color-white) 12%, transparent);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-\[\#f8f8f8\] {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-inherit {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-gradient-to-r {
|
||||
--tw-gradient-position: to right in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-\[linear-gradient\(90deg\,rgba\(248\,248\,248\,0\.04\)_65\.8\%\,rgba\(255\,255\,255\,0\.12\)_100\%\)\] {
|
||||
background-image: linear-gradient(90deg,rgba(248,248,248,0.04) 65.8%,rgba(255,255,255,0.12) 100%);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:from-\[rgba\(248\,248\,248\,0\.55\)\] {
|
||||
--tw-gradient-from: rgba(248,248,248,0.55);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:to-white {
|
||||
--tw-gradient-to: var(--color-white);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-clip-text {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:fill-\[\#F8F8F8\] {
|
||||
fill: #F8F8F8;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:text-\[\#6c6b6b\] {
|
||||
color: #6c6b6b;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:text-\[\#f8f8f8\] {
|
||||
color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:text-transparent {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:opacity-20 {
|
||||
opacity: 20%;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:backdrop-blur-\[20px\] {
|
||||
--tw-backdrop-blur: blur(20px);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@media (hover: hover) {
|
||||
.dark\:hover\:text-\[\#c7c7c7\]:hover {
|
||||
color: #c7c7c7;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@media (hover: hover) {
|
||||
.dark\:hover\:brightness-90:hover {
|
||||
--tw-brightness: brightness(90%);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
}
|
||||
.\[\&\>_img\]\:max-w-none> img {
|
||||
max-width: none;
|
||||
}
|
||||
@@ -1215,6 +1374,14 @@
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@media (hover: hover) {
|
||||
.dark\:hover\:\[\&\>img\]\:brightness-90:hover>img {
|
||||
--tw-brightness: brightness(90%);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
html, body {
|
||||
font-family: var(--font-family-sans);
|
||||
@@ -1239,6 +1406,19 @@ html, body {
|
||||
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);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
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%;
|
||||
@@ -1476,5 +1656,47 @@ html, body {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-position {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-from {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-via {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-to {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-stops {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-via-stops {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-from-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 0%;
|
||||
}
|
||||
@property --tw-gradient-via-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 50%;
|
||||
}
|
||||
@property --tw-gradient-to-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user