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;
--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%;
}

272
css/editor-style.css
Unescape View File

@ -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%;
}

187
header.php
Unescape View File

@ -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="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">
<?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]"
>
<span class="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" />
</svg>
Личный кабинет
</button>
<div class="py-[24px]">
<div class="flex items-center justify-between gap-[32px]">
<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="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="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"/>
</svg>
Личный кабинет
</button>
</div>
</div>
</div>
</div>
</header>
<div id="content" class="site-content grow">
<?php do_action('tailpress_content_start'); ?>
<main>
<div class="container mx-auto">
<button class="cursor-pointer p-[10px] rounded border" data-modal="example">Пример модалки</button>
<button class="cursor-pointer p-[10px] rounded border" data-modal="room">Выбор зала</button>
<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
Unescape View File

@ -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
resources/css/app.css
Unescape View File

@ -1,4 +1,5 @@
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@import './theme.css';
@import './fonts.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);
}
.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);
}

24
resources/js/app.js
Unescape View File

@ -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);
});*/

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

@ -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%;
}
.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="true"] {
flex: 2;
}
.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%);
}

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

@ -12,30 +12,31 @@ document.addEventListener('DOMContentLoaded', function() {
grabCursor: true,
on: {
slideChange: function () {
const realIndex = this.realIndex;
const paginationItems = block.querySelectorAll('.pagination-item');
paginationItems.forEach((item, index) => {
const line = item.querySelector('.pagination-line');
const text = item.querySelector('.slide-text');
if (index === realIndex) {
item.className = 'pagination-item flex-[2] cursor-pointer transition-all ';
line.className = 'pagination-line bg-[#222] h-[2px] rounded-[30px] transition-colors ';
text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-100 transition-opacity ';
} else {
item.className = 'pagination-item flex-1 cursor-pointer transition-all ';
line.className = 'pagination-line bg-[#e0e0e0] h-[2px] rounded-[30px] transition-colors ';
text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-0 transition-opacity ';
}
});
updatePagination(block, this.realIndex);
}
}
});
// Функция обновления пагинации
function updatePagination(block, activeIndex) {
const paginationItems = block.querySelectorAll('.pagination-item');
paginationItems.forEach((item, index) => {
item.setAttribute('data-active', index === activeIndex ? 'true' : 'false');
});
}
// Навигация
block.querySelector('.custom-prev')?.addEventListener('click', () => swiper.slidePrev());
block.querySelector('.custom-next')?.addEventListener('click', () => swiper.slideNext());
const prevBtn = block.querySelector('.custom-prev');
const nextBtn = block.querySelector('.custom-next');
if (prevBtn) {
prevBtn.addEventListener('click', () => swiper.slidePrev());
}
if (nextBtn) {
nextBtn.addEventListener('click', () => swiper.slideNext());
}
// Пагинация
block.querySelectorAll('.pagination-item').forEach((item, index) => {

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'];
}
// Получаем данные из 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]">
<section class="pt-[161px] dark:text-[#f8f8f8] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>
<div class="container mx-auto">
<div class="flex justify-between gap-[24px] ">
<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 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,17 +118,22 @@ 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"
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">
<span class="slide-number"><?php echo esc_html($slide['number']); ?>.</span>
<span class="slide-title"><?php echo esc_html($slide['title']); ?></span>
<div class="flex gap-[24px] mt-[44px]">
<?php foreach ($slides as $index => $slide): ?>
<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 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>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
</div>
</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;
}
.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;

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

@ -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>

Write Preview
Loading…
Cancel
Save