polished template
This commit is contained in:
GP_DEV
BIN
assets/images/hero-bg.png
Normal file
BIN
assets/images/hero-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 531 KiB |
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%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
153
header.php
153
header.php
@@ -9,27 +9,32 @@
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body <?php body_class('bg-[#f9f9f9] text-[#222]'); ?>>
|
||||
<?php
|
||||
$room = get_current_room();
|
||||
$base_classes = 'bg-[#f9f9f9] text-[#222]';
|
||||
|
||||
if ($room === 'gym') {
|
||||
$body_classes = $base_classes . ' dark';
|
||||
} else {
|
||||
$body_classes = $base_classes;
|
||||
}
|
||||
?>
|
||||
|
||||
<body <?php body_class($body_classes); ?>>
|
||||
|
||||
<?php do_action('tailpress_site_before'); ?>
|
||||
|
||||
<div id="page" class="min-h-screen flex flex-col">
|
||||
<?php do_action('tailpress_header'); ?>
|
||||
|
||||
<header>
|
||||
|
||||
<div class="mx-auto container mt-[24px]">
|
||||
<header class="container mx-auto absolute left-0 right-0 z-[1000] <?php echo is_admin_bar_showing() ? 'top-[32px]' : 'top-0'; ?>"
|
||||
id="site-header">
|
||||
<div class="pt-[24px] dark:text-[#f8f8f8]">
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<?php if (has_custom_logo()) { ?>
|
||||
<?php the_custom_logo(); ?>
|
||||
<?php } else { ?>
|
||||
<a href="<?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
||||
<?php echo get_bloginfo('name'); ?>
|
||||
</a>
|
||||
<?php } ?>
|
||||
<?php display_icon(get_current_room() === 'gym' ? 'dark_logo' : 'light_logo'); ?>
|
||||
</div>
|
||||
<?php get_template_part('template-parts/la-components/language-switcher'); ?>
|
||||
<div class="flex items-center gap-[12px]">
|
||||
@@ -47,22 +52,21 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[4px]">
|
||||
<a class="hover:[&>img]:brightness-150 transition" href="#">
|
||||
<?php
|
||||
display_icon('tg');
|
||||
?>
|
||||
<a class="dark:hover:[&>img]:brightness-90 hover:[&>img]:brightness-150 transition" href="#">
|
||||
<?php display_icon(get_current_room() === 'gym' ? 'tg_dark' : 'tg'); ?>
|
||||
</a>
|
||||
<a class="hover:[&>img]:brightness-150 transition" href="#">
|
||||
<?php
|
||||
display_icon('whatsapp');
|
||||
?>
|
||||
<a class="dark:hover:[&>img]:brightness-90 hover:[&>img]:brightness-150 transition" href="#">
|
||||
<?php display_icon(get_current_room() === 'gym' ? 'whatsapp_dark' : 'whatsapp'); ?>
|
||||
</a>
|
||||
</div>
|
||||
<a class="font-[700] text-[24px] !decoration-transparent hover:!decoration-inherit transition-colors" href="tel:+783822990019">
|
||||
<a class="dark:hover:text-[#c7c7c7] font-[700] text-[24px] !decoration-transparent hover:text-[#555] transition-colors"
|
||||
href="tel:+783822990019">
|
||||
+7 (3822) 99-00-19
|
||||
</a>
|
||||
<div>
|
||||
<button class="red-gradient-hover cursor-pointer flex text-[#f8f8f8] text-[16px] font-[600] justify-center h-[45px] w-[136px] rounded-[90px] flex items-center">Записаться</button>
|
||||
<button class="red-gradient-hover cursor-pointer flex text-[#f8f8f8] text-[16px] font-[600] justify-center h-[45px] w-[136px] rounded-[90px] flex items-center">
|
||||
Записаться
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -80,119 +84,52 @@
|
||||
*/ ?>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container mx-auto my-[24px]">
|
||||
<div class="py-[24px]">
|
||||
<div class="flex items-center justify-between gap-[32px]">
|
||||
<div class="group bg-white text-[16px] text-[#222] font-[600] rounded-[90px] h-[44px] px-[28px] flex items-center">
|
||||
<div class="
|
||||
group
|
||||
dark:border dark:border-white/[0.05]
|
||||
dark:text-[#f8f8f8]
|
||||
dark:bg-inherit
|
||||
dark:backdrop-blur-[20px]
|
||||
dark:bg-[linear-gradient(90deg,rgba(248,248,248,0.04)_65.8%,rgba(255,255,255,0.12)_100%)]
|
||||
dark:border-[rgba(248,_248,_248,_0.5)] bg-white text-[16px] text-[#222] font-[600] rounded-[90px] h-[44px] px-[28px] flex items-center">
|
||||
<?php get_template_part('template-parts/la-components/navigation-menu'); ?>
|
||||
</div>
|
||||
<div class="flex gap-[12px]">
|
||||
<button data-modal="time" class="font-[600] flex gap-[8px] h-[44px] px-[20px] items-center cursor-pointer border border-[#e0e0e0] rounded-[90px]"
|
||||
<button data-modal="time"
|
||||
class="dark:text-[#f8f8f8] dark:border-[rgba(248,_248,_248,_0.2)] font-[600] flex gap-[8px] h-[44px] px-[20px] items-center cursor-pointer border border-[#e0e0e0] rounded-[90px]"
|
||||
>
|
||||
<span class="w-[8px] h-[8px] rounded-full bg-[#e21e24]"></span>
|
||||
<span class="dark:bg-[#f8f8f8] w-[8px] h-[8px] rounded-full bg-[#e21e24]"></span>
|
||||
Расписание
|
||||
</button>
|
||||
<button
|
||||
class="font-[600] text-[#f8f8f8] dark-gradient-hover flex gap-[8px] h-[44px] px-[20px] items-center cursor-pointer rounded-[90px]"
|
||||
>
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 0.5C9.06087 0.5 10.0783 0.921427 10.8284 1.67157C11.5786 2.42172 12 3.43913 12 4.5C12 5.56087 11.5786 6.57828 10.8284 7.32843C10.0783 8.07857 9.06087 8.5 8 8.5C6.93913 8.5 5.92172 8.07857 5.17157 7.32843C4.42143 6.57828 4 5.56087 4 4.5C4 3.43913 4.42143 2.42172 5.17157 1.67157C5.92172 0.921427 6.93913 0.5 8 0.5ZM8 10.5C12.42 10.5 16 12.29 16 14.5V16.5H0V14.5C0 12.29 3.58 10.5 8 10.5Z" fill="#F8F8F8" />
|
||||
<path d="M8 0.5C9.06087 0.5 10.0783 0.921427 10.8284 1.67157C11.5786 2.42172 12 3.43913 12 4.5C12 5.56087 11.5786 6.57828 10.8284 7.32843C10.0783 8.07857 9.06087 8.5 8 8.5C6.93913 8.5 5.92172 8.07857 5.17157 7.32843C4.42143 6.57828 4 5.56087 4 4.5C4 3.43913 4.42143 2.42172 5.17157 1.67157C5.92172 0.921427 6.93913 0.5 8 0.5ZM8 10.5C12.42 10.5 16 12.29 16 14.5V16.5H0V14.5C0 12.29 3.58 10.5 8 10.5Z"
|
||||
fill="#F8F8F8"/>
|
||||
</svg>
|
||||
Личный кабинет
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div id="content" class="site-content grow">
|
||||
|
||||
<?php do_action('tailpress_content_start'); ?>
|
||||
|
||||
<main>
|
||||
<div class="container mx-auto">
|
||||
<main id="main-content">
|
||||
<div class="hidden">
|
||||
<button class="cursor-pointer p-[10px] rounded border" data-modal="example">Пример модалки</button>
|
||||
<button class="cursor-pointer p-[10px] rounded border" data-modal="room">Выбор зала</button>
|
||||
<button class="cursor-pointer p-[10px] rounded border" data-modal="form">Форма</button>
|
||||
</div>
|
||||
|
||||
|
||||
<?php
|
||||
$galleryData = [
|
||||
'reception' => [
|
||||
'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'
|
||||
]
|
||||
]
|
||||
]
|
||||
];
|
||||
?>
|
||||
<?php
|
||||
|
||||
|
||||
24
js/app.js
24
js/app.js
@@ -33,14 +33,22 @@ __webpack_require__.r(__webpack_exports__);
|
||||
\*****************************/
|
||||
/***/ (() => {
|
||||
|
||||
// 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);
|
||||
});*/
|
||||
|
||||
/***/ })
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import 'tailwindcss';
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
@import './theme.css';
|
||||
@import './fonts.css';
|
||||
@import './utilities.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%;
|
||||
@@ -81,3 +95,5 @@ html, body {
|
||||
background-position: 39.42% 0;
|
||||
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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);
|
||||
});*/
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
@@ -12,30 +12,31 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
grabCursor: true,
|
||||
on: {
|
||||
slideChange: function () {
|
||||
const realIndex = this.realIndex;
|
||||
updatePagination(block, this.realIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Функция обновления пагинации
|
||||
function updatePagination(block, activeIndex) {
|
||||
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 ';
|
||||
}
|
||||
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) => {
|
||||
|
||||
@@ -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) . ')"';
|
||||
}
|
||||
?>
|
||||
|
||||
<section class="container mx-auto hero-block">
|
||||
<div class="flex justify-between gap-[24px]">
|
||||
<div class="flex flex-col w-full mt-[26px]">
|
||||
<?php display_icon('logo_fitness') ?>
|
||||
<section class="pt-[161px] dark:text-[#f8f8f8] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>
|
||||
|
||||
<h1 class="font-[500] leading-[110%] text-[48px] mt-[20px]">
|
||||
<div class="container mx-auto">
|
||||
<div class="flex justify-between gap-[24px] ">
|
||||
<div class="flex flex-col w-full mt-[26px]">
|
||||
<?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name' : 'light_logo_name'); ?>
|
||||
|
||||
<h1 class=" font-[500] leading-[110%] text-[48px] mt-[20px]">
|
||||
<?php if (!empty($heading)): ?>
|
||||
<?php echo wp_kses_post($heading); ?>
|
||||
<?php endif; ?>
|
||||
@@ -76,7 +87,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
|
||||
<p>
|
||||
<b><?php echo !empty($address) ? esc_html($address) : 'Красноармейская, 120 — 2ой этаж'; ?></b>
|
||||
</p>
|
||||
<p>
|
||||
<p class="dark:text-[#6c6b6b]">
|
||||
<?php echo !empty($address_extra) ? esc_html($address_extra) : 'Главный вход со стороны ул. Косарева'; ?>
|
||||
</p>
|
||||
</div>
|
||||
@@ -84,7 +95,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-[648px] h-[575px] relative">
|
||||
<div class="swiper rounded-[25px] w-full h-full">
|
||||
<div class="swiper inverted-radius rounded-[25px] w-full h-full">
|
||||
<div class="swiper-wrapper">
|
||||
<?php foreach ($slides as $index => $slide): ?>
|
||||
<div class="swiper-slide [&>_img]:max-w-none">
|
||||
@@ -96,7 +107,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inverted-radius-wrapper absolute z-[1] pt-[15px] pr-[15px] rounded-[25px] rounded-bl-none rounded-br-none rounded-tl-none flex items-center gap-[4px] bg-[#f9f9f9] left-0 bottom-0">
|
||||
<div class="absolute z-[1] rounded-[25px] rounded-bl-none rounded-br-none rounded-tl-none flex items-center gap-[4px] left-0 bottom-0">
|
||||
<button class="group custom-prev cursor-pointer">
|
||||
<?php display_icon('slider-prev') ?>
|
||||
</button>
|
||||
@@ -107,18 +118,23 @@ if (!empty($slider_data) && is_array($slider_data)) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex gap-[24px] mt-[44px]">
|
||||
<?php foreach ($slides as $index => $slide): ?>
|
||||
<div class="pagination-item <?php echo $index === 0 ? 'flex-[2]' : 'flex-1' ?> cursor-pointer transition-all"
|
||||
<div class="pagination-item flex-1 cursor-pointer transition-all"
|
||||
data-active="<?php echo $index === 0 ? 'true' : 'false' ?>"
|
||||
data-slide="<?php echo $index ?>">
|
||||
<div class="pagination-line <?php echo $index === 0 ? 'bg-[#222]' : 'bg-gray-[#e0e0e0]' ?> h-[2px] rounded-[30px] transition-colors"></div>
|
||||
<div class="slide-text <?php echo $index === 0 ? 'opacity-100' : 'opacity-0' ?> transition-opacity">
|
||||
<div class="pagination-line h-[2px] rounded-[30px] transition-colors"></div>
|
||||
<div class="slide-text opacity-0 mt-[10px] text-[14px] text-[#222] font-[600] transition-opacity">
|
||||
<div class="w-fit dark:bg-gradient-to-r dark:from-[rgba(248,248,248,0.55)] dark:to-white dark:bg-clip-text dark:text-transparent">
|
||||
<span class="slide-number"><?php echo esc_html($slide['number']); ?>.</span>
|
||||
<span class="slide-title"><?php echo esc_html($slide['title']); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php if (is_admin()): ?>
|
||||
|
||||
@@ -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,17 +56,27 @@ 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,
|
||||
.pl-lang-switcher-container a.pl-lang-switcher-current {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="pl-lang-switcher-container" id="plLangSwitcherContainer">
|
||||
@@ -123,7 +145,7 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const container = document.getElementById('plLangSwitcherContainer');
|
||||
if (!container) return;
|
||||
|
||||
@@ -180,7 +202,7 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang
|
||||
}
|
||||
|
||||
function setupClickHandlers() {
|
||||
container.addEventListener('click', function(e) {
|
||||
container.addEventListener('click', function (e) {
|
||||
const link = e.target.closest('a');
|
||||
if (!link) return;
|
||||
|
||||
|
||||
@@ -152,7 +152,8 @@ if ($menu) {
|
||||
if ($index < count($menu_items) - 1): ?>
|
||||
<li class="menu-separator" role="none" aria-hidden="true">
|
||||
<span class="separator"><svg width="7" height="15" viewBox="0 0 7 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.574219 14.4345L5.55022 0.5625H6.92622L1.93422 14.4345H0.574219Z" fill="#E0E0E0"/>
|
||||
<path d="M0.574219 14.4345L5.55022 0.5625H6.92622L1.93422 14.4345H0.574219Z"
|
||||
class="fill-[#E0E0E0] dark:fill-[#F8F8F8] dark:opacity-20" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user