Good-Production
/
Fakel-Gym
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

polished template

Browse Source
main
GP_DEV 2 months ago
parent f8688ae00b
commit a6bb81cbe1
13 changed files with 676 additions and 258 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      assets/images/hero-bg.png
  2. 228
      css/app.css
  3. 272
      css/editor-style.css
  4. 187
      header.php
  5. 24
      js/app.js
  6. 1
      resources/css/app.css
  7. 16
      resources/css/theme.css
  8. 24
      resources/js/app.js
  9. 58
      template-parts/la-components/blocks/hero-block/hero-block.css
  10. 39
      template-parts/la-components/blocks/hero-block/hero-block.js
  11. 52
      template-parts/la-components/blocks/hero-block/hero-block.php
  12. 30
      template-parts/la-components/language-switcher.php
  13. 3
      template-parts/la-components/navigation-menu.php

BIN
assets/images/hero-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 531 KiB

228
css/app.css
Unescape View File

@ -25,8 +25,6 @@
--container-2xl: 42rem; --container-2xl: 42rem;
--text-sm: var(--wp--preset--font-size--sm, 0.875rem); --text-sm: var(--wp--preset--font-size--sm, 0.875rem);
--text-sm--line-height: calc(1.25 / 0.875); --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: var(--wp--preset--font-size--xl, 1.25rem);
--text-xl--line-height: calc(1.75 / 1.25); --text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: var(--wp--preset--font-size--2xl, 1.5rem); --text-2xl: var(--wp--preset--font-size--2xl, 1.5rem);
@ -236,12 +234,21 @@
.inset-0 { .inset-0 {
inset: calc(var(--spacing) * 0); inset: calc(var(--spacing) * 0);
} }
.top-0 {
top: calc(var(--spacing) * 0);
}
.top-1\/2 { .top-1\/2 {
top: calc(1/2 * 100%); top: calc(1/2 * 100%);
} }
.top-4 { .top-4 {
top: calc(var(--spacing) * 4); top: calc(var(--spacing) * 4);
} }
.top-\[32px\] {
top: 32px;
}
.right-0 {
right: calc(var(--spacing) * 0);
}
.right-4 { .right-4 {
right: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4);
} }
@ -263,6 +270,9 @@
.z-\[1\] { .z-\[1\] {
z-index: 1; z-index: 1;
} }
.z-\[1000\] {
z-index: 1000;
}
.container { .container {
width: 100%; width: 100%;
} }
@ -308,9 +318,6 @@
.my-8 { .my-8 {
margin-block: calc(var(--spacing) * 8); margin-block: calc(var(--spacing) * 8);
} }
.my-\[24px\] {
margin-block: 24px;
}
.mt-4 { .mt-4 {
margin-top: calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 4);
} }
@ -488,6 +495,10 @@
.w-\[136px\] { .w-\[136px\] {
width: 136px; width: 136px;
} }
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full { .w-full {
width: 100%; width: 100%;
} }
@ -529,9 +540,6 @@
.flex-1 { .flex-1 {
flex: 1; flex: 1;
} }
.flex-\[2\] {
flex: 2;
}
.flex-shrink-0 { .flex-shrink-0 {
flex-shrink: 0; flex-shrink: 0;
} }
@ -719,12 +727,6 @@
.bg-\[\#10b981\] { .bg-\[\#10b981\] {
background-color: #10b981; background-color: #10b981;
} }
.bg-\[\#222\] {
background-color: #222;
}
.bg-\[\#e0e0e0\] {
background-color: #e0e0e0;
}
.bg-\[\#e21e24\] { .bg-\[\#e21e24\] {
background-color: #e21e24; background-color: #e21e24;
} }
@ -758,6 +760,18 @@
.bg-white { .bg-white {
background-color: var(--color-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 { .object-contain {
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
@ -805,8 +819,14 @@
.py-\[12px\] { .py-\[12px\] {
padding-block: 12px; padding-block: 12px;
} }
.pt-\[15px\] { .py-\[24px\] {
padding-top: 15px; padding-block: 24px;
}
.pt-\[14px\] {
padding-top: 14px;
}
.pt-\[24px\] {
padding-top: 24px;
} }
.pt-\[40px\] { .pt-\[40px\] {
padding-top: 40px; padding-top: 40px;
@ -817,8 +837,11 @@
.pt-\[80px\] { .pt-\[80px\] {
padding-top: 80px; padding-top: 80px;
} }
.pr-\[15px\] { .pt-\[161px\] {
padding-right: 15px; padding-top: 161px;
}
.pb-\[30px\] {
padding-bottom: 30px;
} }
.text-center { .text-center {
text-align: center; text-align: center;
@ -831,10 +854,6 @@
font-size: var(--text-5xl); font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height)); 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 { .text-sm {
font-size: var(--text-sm); font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height)); line-height: var(--tw-leading, var(--text-sm--line-height));
@ -961,9 +980,6 @@
.text-white { .text-white {
color: var(--color-white); color: var(--color-white);
} }
.uppercase {
text-transform: uppercase;
}
.\!no-underline { .\!no-underline {
text-decoration-line: none !important; text-decoration-line: none !important;
} }
@ -1053,6 +1069,26 @@
background-color: var(--color-gray-100); 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) { @media (hover: hover) {
.hover\:text-gray-700:hover { .hover\:text-gray-700:hover {
color: var(--color-gray-700); 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); 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 { .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); --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); 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; 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 { .\[\&\>_img\]\:max-w-none> img {
max-width: none; 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,); 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 { html, body {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
@ -1244,6 +1367,19 @@ html, body {
background-position: 39.42% 0; background-position: 39.42% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1); 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 { .red-gradient-hover {
background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%); background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
background-size: 177% 100%; background-size: 177% 100%;
@ -1536,6 +1672,48 @@ html, body {
syntax: "*"; syntax: "*";
inherits: false; 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%;
}

272
css/editor-style.css
Unescape View File

@ -25,8 +25,6 @@
--container-2xl: 42rem; --container-2xl: 42rem;
--text-sm: var(--wp--preset--font-size--sm, 0.875rem); --text-sm: var(--wp--preset--font-size--sm, 0.875rem);
--text-sm--line-height: calc(1.25 / 0.875); --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: var(--wp--preset--font-size--xl, 1.25rem);
--text-xl--line-height: calc(1.75 / 1.25); --text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: var(--wp--preset--font-size--2xl, 1.5rem); --text-2xl: var(--wp--preset--font-size--2xl, 1.5rem);
@ -236,12 +234,21 @@
.inset-0 { .inset-0 {
inset: calc(var(--spacing) * 0); inset: calc(var(--spacing) * 0);
} }
.top-0 {
top: calc(var(--spacing) * 0);
}
.top-1\/2 { .top-1\/2 {
top: calc(1/2 * 100%); top: calc(1/2 * 100%);
} }
.top-4 { .top-4 {
top: calc(var(--spacing) * 4); top: calc(var(--spacing) * 4);
} }
.top-\[32px\] {
top: 32px;
}
.right-0 {
right: calc(var(--spacing) * 0);
}
.right-4 { .right-4 {
right: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4);
} }
@ -263,6 +270,9 @@
.z-\[1\] { .z-\[1\] {
z-index: 1; z-index: 1;
} }
.z-\[1000\] {
z-index: 1000;
}
.container { .container {
width: 100%; width: 100%;
} }
@ -308,9 +318,6 @@
.my-8 { .my-8 {
margin-block: calc(var(--spacing) * 8); margin-block: calc(var(--spacing) * 8);
} }
.my-\[24px\] {
margin-block: 24px;
}
.mt-4 { .mt-4 {
margin-top: calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 4);
} }
@ -488,6 +495,10 @@
.w-\[136px\] { .w-\[136px\] {
width: 136px; width: 136px;
} }
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full { .w-full {
width: 100%; width: 100%;
} }
@ -524,9 +535,6 @@
.flex-1 { .flex-1 {
flex: 1; flex: 1;
} }
.flex-\[2\] {
flex: 2;
}
.flex-shrink-0 { .flex-shrink-0 {
flex-shrink: 0; flex-shrink: 0;
} }
@ -714,12 +722,6 @@
.bg-\[\#10b981\] { .bg-\[\#10b981\] {
background-color: #10b981; background-color: #10b981;
} }
.bg-\[\#222\] {
background-color: #222;
}
.bg-\[\#e0e0e0\] {
background-color: #e0e0e0;
}
.bg-\[\#e21e24\] { .bg-\[\#e21e24\] {
background-color: #e21e24; background-color: #e21e24;
} }
@ -753,6 +755,18 @@
.bg-white { .bg-white {
background-color: var(--color-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 { .object-contain {
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
@ -800,8 +814,14 @@
.py-\[12px\] { .py-\[12px\] {
padding-block: 12px; padding-block: 12px;
} }
.pt-\[15px\] { .py-\[24px\] {
padding-top: 15px; padding-block: 24px;
}
.pt-\[14px\] {
padding-top: 14px;
}
.pt-\[24px\] {
padding-top: 24px;
} }
.pt-\[40px\] { .pt-\[40px\] {
padding-top: 40px; padding-top: 40px;
@ -812,8 +832,11 @@
.pt-\[80px\] { .pt-\[80px\] {
padding-top: 80px; padding-top: 80px;
} }
.pr-\[15px\] { .pt-\[161px\] {
padding-right: 15px; padding-top: 161px;
}
.pb-\[30px\] {
padding-bottom: 30px;
} }
.text-center { .text-center {
text-align: center; text-align: center;
@ -826,10 +849,6 @@
font-size: var(--text-5xl); font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height)); 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 { .text-sm {
font-size: var(--text-sm); font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height)); line-height: var(--tw-leading, var(--text-sm--line-height));
@ -956,9 +975,6 @@
.text-white { .text-white {
color: var(--color-white); color: var(--color-white);
} }
.uppercase {
text-transform: uppercase;
}
.\!no-underline { .\!no-underline {
text-decoration-line: none !important; text-decoration-line: none !important;
} }
@ -1048,6 +1064,26 @@
background-color: var(--color-gray-100); 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) { @media (hover: hover) {
.hover\:text-gray-700:hover { .hover\:text-gray-700:hover {
color: var(--color-gray-700); 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); 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 { .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); --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); 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; 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 { .\[\&\>_img\]\:max-w-none> img {
max-width: none; 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,); 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 { html, body {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
@ -1239,6 +1406,19 @@ html, body {
background-position: 39.42% 0; background-position: 39.42% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1); 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 { .red-gradient-hover {
background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%); background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
background-size: 177% 100%; background-size: 177% 100%;
@ -1476,5 +1656,47 @@ html, body {
syntax: "*"; syntax: "*";
inherits: false; 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%;
}

187
header.php
Unescape View File

@ -9,27 +9,32 @@
<?php wp_head(); ?> <?php wp_head(); ?>
</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'); ?> <?php do_action('tailpress_site_before'); ?>
<div id="page" class="min-h-screen flex flex-col"> <div id="page" class="min-h-screen flex flex-col">
<?php do_action('tailpress_header'); ?> <?php do_action('tailpress_header'); ?>
<header> <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="mx-auto container mt-[24px]"> <div class="pt-[24px] dark:text-[#f8f8f8]">
<div> <div>
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<?php if (has_custom_logo()) { ?> <?php display_icon(get_current_room() === 'gym' ? 'dark_logo' : 'light_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 } ?>
</div> </div>
<?php get_template_part('template-parts/la-components/language-switcher'); ?> <?php get_template_part('template-parts/la-components/language-switcher'); ?>
<div class="flex items-center gap-[12px]"> <div class="flex items-center gap-[12px]">
@ -47,22 +52,21 @@
</div> </div>
</div> </div>
<div class="flex gap-[4px]"> <div class="flex gap-[4px]">
<a class="hover:[&>img]:brightness-150 transition" href="#"> <a class="dark:hover:[&>img]:brightness-90 hover:[&>img]:brightness-150 transition" href="#">
<?php <?php display_icon(get_current_room() === 'gym' ? 'tg_dark' : 'tg'); ?>
display_icon('tg');
?>
</a> </a>
<a class="hover:[&>img]:brightness-150 transition" href="#"> <a class="dark:hover:[&>img]:brightness-90 hover:[&>img]:brightness-150 transition" href="#">
<?php <?php display_icon(get_current_room() === 'gym' ? 'whatsapp_dark' : 'whatsapp'); ?>
display_icon('whatsapp');
?>
</a> </a>
</div> </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 +7 (3822) 99-00-19
</a> </a>
<div> <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>
</div> </div>
@ -80,119 +84,52 @@
*/ ?> */ ?>
</div> </div>
</div> </div>
</header> <div class="py-[24px]">
<div class="container mx-auto my-[24px]"> <div class="flex items-center justify-between gap-[32px]">
<div class="flex items-center justify-between gap-[32px]"> <div class="
<div class="group bg-white text-[16px] text-[#222] font-[600] rounded-[90px] h-[44px] px-[28px] flex items-center"> group
<?php get_template_part('template-parts/la-components/navigation-menu'); ?> dark:border dark:border-white/[0.05]
</div> dark:text-[#f8f8f8]
<div class="flex gap-[12px]"> dark:bg-inherit
<button data-modal="time" class="font-[600] flex gap-[8px] h-[44px] px-[20px] items-center cursor-pointer border border-[#e0e0e0] rounded-[90px]" dark:backdrop-blur-[20px]
> dark:bg-[linear-gradient(90deg,rgba(248,248,248,0.04)_65.8%,rgba(255,255,255,0.12)_100%)]
<span class="w-[8px] h-[8px] rounded-full bg-[#e21e24]"></span> 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'); ?>
</button> </div>
<button <div class="flex gap-[12px]">
class="font-[600] text-[#f8f8f8] dark-gradient-hover flex gap-[8px] h-[44px] px-[20px] items-center cursor-pointer 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]"
<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" /> <span class="dark:bg-[#f8f8f8] w-[8px] h-[8px] rounded-full bg-[#e21e24]"></span>
</svg> Расписание
Личный кабинет </button>
</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"/>
</svg>
Личный кабинет
</button>
</div>
</div> </div>
</div> </div>
</div> </header>
<div id="content" class="site-content grow"> <div id="content" class="site-content grow">
<?php do_action('tailpress_content_start'); ?> <?php do_action('tailpress_content_start'); ?>
<main> <main id="main-content">
<div class="container mx-auto"> <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="example">Пример модалки</button>
<button class="cursor-pointer p-[10px] rounded border" data-modal="room">Выбор зала</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> <button class="cursor-pointer p-[10px] rounded border" data-modal="form">Форма</button>
</div> </div>
<?php <?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'
]
]
]
];
?>

24
js/app.js
Unescape View File

@ -33,14 +33,22 @@ __webpack_require__.r(__webpack_exports__);
\*****************************/ \*****************************/
/***/ (() => { /***/ (() => {
// Navigation toggle /*
window.addEventListener('load', function () { document.addEventListener('DOMContentLoaded', function() {
var main_navigation = document.querySelector('#primary-menu'); const header = document.getElementById('site-header');
document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) { const main = document.getElementById('main-content');
e.preventDefault();
main_navigation.classList.toggle('hidden'); function updateMainPadding() {
}); const headerHeight = header.offsetHeight;
}); main.style.paddingTop = headerHeight + 'px';
// Показываем контент с плавной анимацией
main.classList.remove('opacity-0');
}
updateMainPadding();
window.addEventListener('resize', updateMainPadding);
});*/
/***/ }) /***/ })

1
resources/css/app.css
Unescape View File

@ -1,4 +1,5 @@
@import 'tailwindcss'; @import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@import './theme.css'; @import './theme.css';
@import './fonts.css'; @import './fonts.css';
@import './utilities.css'; @import './utilities.css';

16
resources/css/theme.css
Unescape View File

@ -57,6 +57,20 @@ html, body {
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1); 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 { .red-gradient-hover {
background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%); background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
background-size: 177% 100%; background-size: 177% 100%;
@ -81,3 +95,5 @@ html, body {
background-position: 39.42% 0; background-position: 39.42% 0;
transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
} }

24
resources/js/app.js
Unescape View File

@ -1,8 +1,16 @@
// Navigation toggle /*
window.addEventListener('load', function () { document.addEventListener('DOMContentLoaded', function() {
let main_navigation = document.querySelector('#primary-menu'); const header = document.getElementById('site-header');
document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) { const main = document.getElementById('main-content');
e.preventDefault();
main_navigation.classList.toggle('hidden'); function updateMainPadding() {
}); const headerHeight = header.offsetHeight;
}); main.style.paddingTop = headerHeight + 'px';
// Показываем контент с плавной анимацией
main.classList.remove('opacity-0');
}
updateMainPadding();
window.addEventListener('resize', updateMainPadding);
});*/

58
template-parts/la-components/blocks/hero-block/hero-block.css
Unescape View File

@ -1,26 +1,34 @@
.inverted-radius-wrapper:before {
content: ''; .pagination-item[data-active="true"] {
display: block; flex: 2;
width: 40px; }
height: 25px;
background-color: transparent; .pagination-item[data-active="false"] .pagination-line {
border-radius: 0 0 0 25px; background: #e0e0e0;
box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9; }
position: absolute; .pagination-item[data-active="true"] .pagination-line {
z-index: -1; background: #222;
left: -1px; }
bottom: 100%;
} .dark .pagination-item[data-active="false"] .pagination-line {
.inverted-radius-wrapper:after { background: rgba(248, 248, 248, 0.15);
content: ''; }
display: block; .dark .pagination-item[data-active="true"] .pagination-line {
width: 40px; background: linear-gradient(90deg, rgba(250, 248, 245, 0.7) 0%, rgba(250, 248, 245, 0.7) 100%);
height: 25px; }
background-color: transparent;
border-radius: 0 0 0 25px; .pagination-item[data-active="true"] .slide-text {
box-shadow: calc(15px * -0.5) calc(15px * 0.5) 0 0 #f9f9f9; opacity: 1;
position: absolute; }
z-index: -1;
left: calc(100% - 1px); .inverted-radius{
bottom: 0; -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%);
} }

39
template-parts/la-components/blocks/hero-block/hero-block.js
Unescape View File

@ -12,30 +12,31 @@ document.addEventListener('DOMContentLoaded', function() {
grabCursor: true, grabCursor: true,
on: { on: {
slideChange: function () { slideChange: function () {
const realIndex = this.realIndex; updatePagination(block, 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 ';
}
});
} }
} }
}); });
// Функция обновления пагинации
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()); const prevBtn = block.querySelector('.custom-prev');
block.querySelector('.custom-next')?.addEventListener('click', () => swiper.slideNext()); 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) => { block.querySelectorAll('.pagination-item').forEach((item, index) => {

52
template-parts/la-components/blocks/hero-block/hero-block.php
Unescape View File

@ -16,7 +16,6 @@ if (!empty($block['align'])) {
$className .= ' align' . $block['align']; $className .= ' align' . $block['align'];
} }
// Получаем данные из ACF полей
$slider_data = get_field('slider') ?: []; $slider_data = get_field('slider') ?: [];
$text_data = get_field('text') ?: []; $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"> <section class="pt-[161px] dark:text-[#f8f8f8] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>
<div class="flex justify-between gap-[24px]">
<div class="container mx-auto">
<div class="flex justify-between gap-[24px] ">
<div class="flex flex-col w-full mt-[26px]"> <div class="flex flex-col w-full mt-[26px]">
<?php display_icon('logo_fitness') ?> <?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name' : 'light_logo_name'); ?>
<h1 class="font-[500] leading-[110%] text-[48px] mt-[20px]"> <h1 class=" font-[500] leading-[110%] text-[48px] mt-[20px]">
<?php if (!empty($heading)): ?> <?php if (!empty($heading)): ?>
<?php echo wp_kses_post($heading); ?> <?php echo wp_kses_post($heading); ?>
<?php endif; ?> <?php endif; ?>
@ -76,7 +87,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
<p> <p>
<b><?php echo !empty($address) ? esc_html($address) : 'Красноармейская, 120 — 2ой этаж'; ?></b> <b><?php echo !empty($address) ? esc_html($address) : 'Красноармейская, 120 — 2ой этаж'; ?></b>
</p> </p>
<p> <p class="dark:text-[#6c6b6b]">
<?php echo !empty($address_extra) ? esc_html($address_extra) : 'Главный вход со стороны ул. Косарева'; ?> <?php echo !empty($address_extra) ? esc_html($address_extra) : 'Главный вход со стороны ул. Косарева'; ?>
</p> </p>
</div> </div>
@ -84,7 +95,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
</div> </div>
<div class="w-full max-w-[648px] h-[575px] relative"> <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"> <div class="swiper-wrapper">
<?php foreach ($slides as $index => $slide): ?> <?php foreach ($slides as $index => $slide): ?>
<div class="swiper-slide [&>_img]:max-w-none"> <div class="swiper-slide [&>_img]:max-w-none">
@ -96,7 +107,7 @@ if (!empty($slider_data) && is_array($slider_data)) {
</div> </div>
</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"> <button class="group custom-prev cursor-pointer">
<?php display_icon('slider-prev') ?> <?php display_icon('slider-prev') ?>
</button> </button>
@ -107,17 +118,22 @@ if (!empty($slider_data) && is_array($slider_data)) {
</div> </div>
</div> </div>
<div class="flex gap-[24px] mt-[44px]">
<?php foreach ($slides as $index => $slide): ?> <div class="flex gap-[24px] mt-[44px]">
<div class="pagination-item <?php echo $index === 0 ? 'flex-[2]' : 'flex-1' ?> cursor-pointer transition-all" <?php foreach ($slides as $index => $slide): ?>
data-slide="<?php echo $index ?>"> <div class="pagination-item flex-1 cursor-pointer transition-all"
<div class="pagination-line <?php echo $index === 0 ? 'bg-[#222]' : 'bg-gray-[#e0e0e0]' ?> h-[2px] rounded-[30px] transition-colors"></div> data-active="<?php echo $index === 0 ? 'true' : 'false' ?>"
<div class="slide-text <?php echo $index === 0 ? 'opacity-100' : 'opacity-0' ?> transition-opacity"> data-slide="<?php echo $index ?>">
<span class="slide-number"><?php echo esc_html($slide['number']); ?>.</span> <div class="pagination-line h-[2px] rounded-[30px] transition-colors"></div>
<span class="slide-title"><?php echo esc_html($slide['title']); ?></span> <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> </div>
</div> <?php endforeach; ?>
<?php endforeach; ?> </div>
</div> </div>
</section> </section>

30
template-parts/la-components/language-switcher.php
Unescape View File

@ -24,6 +24,14 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang
gap: 4px; 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-button,
.pl-lang-switcher-container a { .pl-lang-switcher-container a {
position: relative; position: relative;
@ -33,7 +41,7 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang
color: #636363; color: #636363;
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 15px;
line-height: 110%; line-height: 40%;
text-align: center; text-align: center;
border-radius: 90px; border-radius: 90px;
cursor: pointer; cursor: pointer;
@ -48,17 +56,27 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang
padding-right: 12px; padding-right: 12px;
} }
.dark .pl-lang-switcher-button,
.dark .pl-lang-switcher-container a {
color: #b9b7b9;
}
.pl-lang-switcher-button:hover, .pl-lang-switcher-button:hover,
.pl-lang-switcher-container a:hover { .pl-lang-switcher-container a(not:.pl-lang-switcher-current):hover {
color: #222; color: #222;
} }
.pl-lang-switcher-button.pl-lang-switcher-active, .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-active,
.pl-lang-switcher-container a.pl-lang-switcher-current { .pl-lang-switcher-container a.pl-lang-switcher-current {
color: #f8f8f8; color: #f8f8f8;
} }
.dark a.pl-lang-switcher-current {
color: #303030;
}
.pl-lang-switcher-slider { .pl-lang-switcher-slider {
position: absolute; position: absolute;
height: 29px; height: 29px;
@ -69,6 +87,10 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang
transform: translateX(var(--pl-slider-x)); transform: translateX(var(--pl-slider-x));
transition: all 180ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: all 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
} }
.dark .pl-lang-switcher-slider {
background: #faf8f5;
}
</style> </style>
<div class="pl-lang-switcher-container" id="plLangSwitcherContainer"> <div class="pl-lang-switcher-container" id="plLangSwitcherContainer">
@ -123,7 +145,7 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang
</div> </div>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
const container = document.getElementById('plLangSwitcherContainer'); const container = document.getElementById('plLangSwitcherContainer');
if (!container) return; if (!container) return;
@ -180,7 +202,7 @@ if (!function_exists('pll_languages_list') || !function_exists('pll_current_lang
} }
function setupClickHandlers() { function setupClickHandlers() {
container.addEventListener('click', function(e) { container.addEventListener('click', function (e) {
const link = e.target.closest('a'); const link = e.target.closest('a');
if (!link) return; if (!link) return;

3
template-parts/la-components/navigation-menu.php
Unescape View File

@ -152,7 +152,8 @@ if ($menu) {
if ($index < count($menu_items) - 1): ?> if ($index < count($menu_items) - 1): ?>
<li class="menu-separator" role="none" aria-hidden="true"> <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"> <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> </svg>
</span> </span>
</li> </li>

Write Preview
Loading…
Cancel
Save