diff --git a/assets/images/hero-bg.png b/assets/images/hero-bg.png new file mode 100644 index 0000000..027e64f Binary files /dev/null and b/assets/images/hero-bg.png differ diff --git a/css/app.css b/css/app.css index 2e18afe..79128c6 100644 --- a/css/app.css +++ b/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: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-via { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-to { + syntax: ""; + 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: ""; + inherits: false; + initial-value: 0%; +} +@property --tw-gradient-via-position { + syntax: ""; + inherits: false; + initial-value: 50%; +} +@property --tw-gradient-to-position { + syntax: ""; + inherits: false; + initial-value: 100%; +} diff --git a/css/editor-style.css b/css/editor-style.css index a821f15..4b77279 100644 --- a/css/editor-style.css +++ b/css/editor-style.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%; } @@ -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: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-via { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-to { + syntax: ""; + 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: ""; + inherits: false; + initial-value: 0%; +} +@property --tw-gradient-via-position { + syntax: ""; + inherits: false; + initial-value: 50%; +} +@property --tw-gradient-to-position { + syntax: ""; + inherits: false; + initial-value: 100%; +} diff --git a/header.php b/header.php index 7affef0..0dcfc92 100644 --- a/header.php +++ b/header.php @@ -9,27 +9,32 @@ -> + + +>
-
- -
+
-
-
-
-
- -
-
- - +
+
+
+ +
+
+ + +
-
+ +
-
-
- - +
+ - [ - 'title' => 'Зона ресепшен', - 'images' => [ - [ - 'src' => 'https://placehold.co/800x600/4a5568/ffffff?text=Ресепшен+1', - 'thumb' => 'https://placehold.co/150x100/4a5568/ffffff?text=Р1', - 'alt' => 'Ресепшен 1' - ], - [ - 'src' => 'https://placehold.co/800x600/2d3748/ffffff?text=Ресепшен+2', - 'thumb' => 'https://placehold.co/150x100/2d3748/ffffff?text=Р2', - 'alt' => 'Ресепшен 2' - ], - [ - 'src' => 'https://placehold.co/800x600/1a202c/ffffff?text=Ресепшен+3', - 'thumb' => 'https://placehold.co/150x100/1a202c/ffffff?text=Р3', - 'alt' => 'Ресепшен 3' - ], - [ - 'src' => 'https://placehold.co/800x600/718096/ffffff?text=Ресепшен+4', - 'thumb' => 'https://placehold.co/150x100/718096/ffffff?text=Р4', - 'alt' => 'Ресепшен 4' - ] - ] - ], - 'gym' => [ - 'title' => 'Зона тренажерного зала', - 'images' => [ - [ - 'src' => 'https://placehold.co/800x600/dc2626/ffffff?text=Тренажёрный+1', - 'thumb' => 'https://placehold.co/150x100/dc2626/ffffff?text=Т1', - 'alt' => 'Тренажерный зал 1' - ], - [ - 'src' => 'https://placehold.co/800x600/b91c1c/ffffff?text=Тренажёрный+2', - 'thumb' => 'https://placehold.co/150x100/b91c1c/ffffff?text=Т2', - 'alt' => 'Тренажерный зал 2' - ], - [ - 'src' => 'https://placehold.co/800x600/991b1b/ffffff?text=Тренажёрный+3', - 'thumb' => 'https://placehold.co/150x100/991b1b/ffffff?text=Т3', - 'alt' => 'Тренажерный зал 3' - ], - [ - 'src' => 'https://placehold.co/800x600/7f1d1d/ffffff?text=Тренажёрный+4', - 'thumb' => 'https://placehold.co/150x100/7f1d1d/ffffff?text=Т4', - 'alt' => 'Тренажерный зал 4' - ], - [ - 'src' => 'https://placehold.co/800x600/ef4444/ffffff?text=Тренажёрный+5', - 'thumb' => 'https://placehold.co/150x100/ef4444/ffffff?text=Т5', - 'alt' => 'Тренажерный зал 5' - ] - ] - ], - 'group' => [ - 'title' => 'Залы для групповых тренировок', - 'images' => [ - [ - 'src' => 'https://placehold.co/800x600/059669/ffffff?text=Групповые+1', - 'thumb' => 'https://placehold.co/150x100/059669/ffffff?text=Г1', - 'alt' => 'Групповые тренировки 1' - ], - [ - 'src' => 'https://placehold.co/800x600/047857/ffffff?text=Групповые+2', - 'thumb' => 'https://placehold.co/150x100/047857/ffffff?text=Г2', - 'alt' => 'Групповые тренировки 2' - ], - [ - 'src' => 'https://placehold.co/800x600/065f46/ffffff?text=Групповые+3', - 'thumb' => 'https://placehold.co/150x100/065f46/ffffff?text=Г3', - 'alt' => 'Групповые тренировки 3' - ] - ] - ] - ]; - ?> + { -// Navigation toggle -window.addEventListener('load', function () { - var main_navigation = document.querySelector('#primary-menu'); - document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) { - e.preventDefault(); - main_navigation.classList.toggle('hidden'); - }); -}); +/* +document.addEventListener('DOMContentLoaded', function() { + const header = document.getElementById('site-header'); + const main = document.getElementById('main-content'); + + function updateMainPadding() { + const headerHeight = header.offsetHeight; + main.style.paddingTop = headerHeight + 'px'; + + // Показываем контент с плавной анимацией + main.classList.remove('opacity-0'); + } + + updateMainPadding(); + window.addEventListener('resize', updateMainPadding); +});*/ /***/ }) diff --git a/resources/css/app.css b/resources/css/app.css index 04ded56..60f2e44 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,4 +1,5 @@ @import 'tailwindcss'; +@custom-variant dark (&:where(.dark, .dark *)); @import './theme.css'; @import './fonts.css'; @import './utilities.css'; diff --git a/resources/css/theme.css b/resources/css/theme.css index 40c35b3..8928845 100644 --- a/resources/css/theme.css +++ b/resources/css/theme.css @@ -57,6 +57,20 @@ html, body { 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%; @@ -80,4 +94,6 @@ html, body { .dark-gradient-hover:hover { background-position: 39.42% 0; transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1); -} \ No newline at end of file +} + + diff --git a/resources/js/app.js b/resources/js/app.js index e6d266a..f9a3b3a 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,8 +1,16 @@ -// Navigation toggle -window.addEventListener('load', function () { - let main_navigation = document.querySelector('#primary-menu'); - document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) { - e.preventDefault(); - main_navigation.classList.toggle('hidden'); - }); -}); +/* +document.addEventListener('DOMContentLoaded', function() { + const header = document.getElementById('site-header'); + const main = document.getElementById('main-content'); + + function updateMainPadding() { + const headerHeight = header.offsetHeight; + main.style.paddingTop = headerHeight + 'px'; + + // Показываем контент с плавной анимацией + main.classList.remove('opacity-0'); + } + + updateMainPadding(); + window.addEventListener('resize', updateMainPadding); +});*/ diff --git a/template-parts/la-components/blocks/hero-block/hero-block.css b/template-parts/la-components/blocks/hero-block/hero-block.css index 17700ac..092efa9 100644 --- a/template-parts/la-components/blocks/hero-block/hero-block.css +++ b/template-parts/la-components/blocks/hero-block/hero-block.css @@ -1,26 +1,34 @@ -.inverted-radius-wrapper:before { - content: ''; - display: block; - width: 40px; - height: 25px; - background-color: transparent; - border-radius: 0 0 0 25px; - box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9; - position: absolute; - z-index: -1; - left: -1px; - bottom: 100%; + +.pagination-item[data-active="true"] { + flex: 2; } -.inverted-radius-wrapper:after { - content: ''; - display: block; - width: 40px; - height: 25px; - background-color: transparent; - border-radius: 0 0 0 25px; - box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9; - position: absolute; - z-index: -1; - left: calc(100% - 1px); - bottom: 0; + +.pagination-item[data-active="false"] .pagination-line { + background: #e0e0e0; +} +.pagination-item[data-active="true"] .pagination-line { + background: #222; +} + +.dark .pagination-item[data-active="false"] .pagination-line { + background: rgba(248, 248, 248, 0.15); +} +.dark .pagination-item[data-active="true"] .pagination-line { + background: linear-gradient(90deg, rgba(250, 248, 245, 0.7) 0%, rgba(250, 248, 245, 0.7) 100%); +} + +.pagination-item[data-active="true"] .slide-text { + opacity: 1; +} + +.inverted-radius{ + -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20648%20575%22%3E%3Cpath%20d%3D%22M0%2C0H648A0%2C0%200%2C0%2C1%20648%2C0V575A0%2C0%200%2C0%2C1%20648%2C575H130A20%2C20%200%2C0%2C1%20110%2C555L110%2C535A20%2C20%200%2C0%2C0%2090%2C515L20%2C515A20%2C20%200%2C0%2C1%200%2C495V0A0%2C0%200%2C0%2C1%200%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain; + mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20648%20575%22%3E%3Cpath%20d%3D%22M0%2C0H648A0%2C0%200%2C0%2C1%20648%2C0V575A0%2C0%200%2C0%2C1%20648%2C575H130A20%2C20%200%2C0%2C1%20110%2C555L110%2C535A20%2C20%200%2C0%2C0%2090%2C515L20%2C515A20%2C20%200%2C0%2C1%200%2C495V0A0%2C0%200%2C0%2C1%200%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain; + width: 648px; + background-color: #ffffff; + aspect-ratio: 648 / 575; +} + +.radient-bg { + background: linear-gradient(180deg, #f9f9f9 69.59%, #ededed 100%); } \ No newline at end of file diff --git a/template-parts/la-components/blocks/hero-block/hero-block.js b/template-parts/la-components/blocks/hero-block/hero-block.js index d134d49..1f0f288 100644 --- a/template-parts/la-components/blocks/hero-block/hero-block.js +++ b/template-parts/la-components/blocks/hero-block/hero-block.js @@ -12,30 +12,31 @@ document.addEventListener('DOMContentLoaded', function() { grabCursor: true, on: { slideChange: function () { - const realIndex = this.realIndex; - const paginationItems = block.querySelectorAll('.pagination-item'); - - paginationItems.forEach((item, index) => { - const line = item.querySelector('.pagination-line'); - const text = item.querySelector('.slide-text'); - - if (index === realIndex) { - item.className = 'pagination-item flex-[2] cursor-pointer transition-all '; - line.className = 'pagination-line bg-[#222] h-[2px] rounded-[30px] transition-colors '; - text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-100 transition-opacity '; - } else { - item.className = 'pagination-item flex-1 cursor-pointer transition-all '; - line.className = 'pagination-line bg-[#e0e0e0] h-[2px] rounded-[30px] transition-colors '; - text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-0 transition-opacity '; - } - }); + updatePagination(block, this.realIndex); } } }); + // Функция обновления пагинации + function updatePagination(block, activeIndex) { + const paginationItems = block.querySelectorAll('.pagination-item'); + + paginationItems.forEach((item, index) => { + item.setAttribute('data-active', index === activeIndex ? 'true' : 'false'); + }); + } + // Навигация - block.querySelector('.custom-prev')?.addEventListener('click', () => swiper.slidePrev()); - block.querySelector('.custom-next')?.addEventListener('click', () => swiper.slideNext()); + const prevBtn = block.querySelector('.custom-prev'); + const nextBtn = block.querySelector('.custom-next'); + + if (prevBtn) { + prevBtn.addEventListener('click', () => swiper.slidePrev()); + } + + if (nextBtn) { + nextBtn.addEventListener('click', () => swiper.slideNext()); + } // Пагинация block.querySelectorAll('.pagination-item').forEach((item, index) => { diff --git a/template-parts/la-components/blocks/hero-block/hero-block.php b/template-parts/la-components/blocks/hero-block/hero-block.php index c675967..09e3cbb 100644 --- a/template-parts/la-components/blocks/hero-block/hero-block.php +++ b/template-parts/la-components/blocks/hero-block/hero-block.php @@ -16,7 +16,6 @@ if (!empty($block['align'])) { $className .= ' align' . $block['align']; } -// Получаем данные из ACF полей $slider_data = get_field('slider') ?: []; $text_data = get_field('text') ?: []; @@ -42,15 +41,27 @@ if (!empty($slider_data) && is_array($slider_data)) { } } +$room = get_current_room(); +$base_classes = 'hero-block pb-[30px] pt-[14px]'; +if ($room === 'fitness') { + $section_classes = $base_classes . 'radient-bg'; + $style_attr = ''; +} else { + $section_classes = $base_classes . ' bg-cover bg-center bg-no-repeat'; + $bg_image = get_template_directory_uri() . '/assets/images/hero-bg.png'; + $style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"'; +} ?> -
-
+
> + +
+
- + -

+

@@ -76,7 +87,7 @@ if (!empty($slider_data) && is_array($slider_data)) {

-

+

@@ -84,7 +95,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
-
+
$slide): ?>
@@ -96,7 +107,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
-
+
@@ -107,17 +118,22 @@ if (!empty($slider_data) && is_array($slider_data)) {
-
- $slide): ?> -
-
-
- . - + +
+ $slide): ?> +
+
+
+
+ . + +
+
-
- + +
diff --git a/template-parts/la-components/language-switcher.php b/template-parts/la-components/language-switcher.php index e30482f..67f2ced 100644 --- a/template-parts/la-components/language-switcher.php +++ b/template-parts/la-components/language-switcher.php @@ -24,6 +24,14 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang gap: 4px; } + .dark .pl-lang-switcher-container { + border: 1px solid rgba(248, 248, 248, 0.05); + backdrop-filter: blur(20px); + background: linear-gradient(90deg, rgba(248, 248, 248, 0.04) 65.8%, rgba(255, 255, 255, 0.12) 100%); + background-position: -1px 0; + background-size: 101%; + } + .pl-lang-switcher-button, .pl-lang-switcher-container a { position: relative; @@ -33,7 +41,7 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang color: #636363; font-weight: 600; font-size: 15px; - line-height: 110%; + line-height: 40%; text-align: center; border-radius: 90px; cursor: pointer; @@ -48,10 +56,16 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang padding-right: 12px; } + .dark .pl-lang-switcher-button, + .dark .pl-lang-switcher-container a { + color: #b9b7b9; + } + .pl-lang-switcher-button:hover, - .pl-lang-switcher-container a:hover { + .pl-lang-switcher-container a(not:.pl-lang-switcher-current):hover { color: #222; } + .pl-lang-switcher-button.pl-lang-switcher-active, .pl-lang-switcher-container a.pl-lang-switcher-active, @@ -59,6 +73,10 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang color: #f8f8f8; } + .dark a.pl-lang-switcher-current { + color: #303030; + } + .pl-lang-switcher-slider { position: absolute; height: 29px; @@ -69,6 +87,10 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang transform: translateX(var(--pl-slider-x)); transition: all 180ms cubic-bezier(0.4, 0.0, 0.2, 1); } + + .dark .pl-lang-switcher-slider { + background: #faf8f5; + }
@@ -123,7 +145,7 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang