style.css

/*
Theme Name: Saija
Author: fukuo
Author URI: https://fukuo.design/
Theme URI: 
Tags: full-site-editing, block-patterns
Text Domain: saija
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.4
Version: 100.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Styles intended only for the front.*/
html {
    scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* Main structure */
body .wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: calc(
        100dvh - var(--wp-admin--admin-bar--height, 0px)
    ) !important;
}

body .wp-site-blocks main {
    flex-grow: 1;
}

/* Navigation styling */
body
    .wp-site-blocks
    header
    .wp-block-navigation
    .wp-block-navigation-item
    > a.wp-block-navigation-item__content {
    padding: 0.6rem 1rem;
    border-radius: 30px;
}

body:is(.home)
    .wp-site-blocks
    > header
    .wp-block-navigation
    > .wp-block-navigation-item:nth-child(1)
    > a.wp-block-navigation-item__content,
body
    .wp-site-blocks
    header
    .wp-block-navigation
    .current-menu-item
    > a.wp-block-navigation-item__content {
    background: #ddd;
}


body:is(.page-id-27)
.wp-site-blocks
header
.wp-block-navigation
.current-menu-item
> a.wp-block-navigation-item__content {
  background: var(--wp--preset--color--contrast-2);
}

body:is(.home)
    .wp-site-blocks
    > header
    .wp-block-navigation
    .wp-block-buttons:nth-child(1)
    > .wp-block-button:nth-child(1)
    > a {
    background: #ddd !important;
}

/* Marquee styling */
body:not(.editor-styles-wrapper) [class*="is-style-saija-marquee"] {
    display: block;
    overflow: hidden;
    position: relative;
}

body:not(.editor-styles-wrapper) [class*="is-style-saija-marquee"] > * {
    display: flex;
    gap: var(--wp--preset--spacing--80, inherit);
}

/* Card styling */
body:not(.editor-styles-wrapper) [class*="is-style-saija-card"] {
    transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

body:not(.editor-styles-wrapper) [class*="is-style-saija-card"]:hover {
    transform: translateY(-10px);
}

body:not(.editor-styles-wrapper)
    [class*="is-style-saija-card"]
    .wp-block-cover__inner-container
    :where(.wp-block-group.wp-block-group-is-layout-constrained) {
    position: unset;
}

body:not(.editor-styles-wrapper)
    [class*="is-style-saija-card"]
    .wp-block-cover__inner-container
    :where(.wp-block-group.wp-block-group-is-layout-constrained)
    .wp-block-post-title
    a::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Clock styling */
body:not(.editor-styles-wrapper) [class*="is-style-saija-clock-blink"] {
    animation: blink-animation 1s infinite;
    transition: opacity 1s ease-in-out;
}

/* Sticky header */
@media (min-width: 1024px) {
    body header.site-header nav.wp-block-navigation {
        border-color: #ededed;
        border-width: 1px;
        border-style: solid;
        border-radius: 100px;
        padding-top: var(--wp--preset--spacing--10);
        padding-right: var(--wp--preset--spacing--10);
        padding-bottom: var(--wp--preset--spacing--10);
        padding-left: var(--wp--preset--spacing--10);
        background-color: var(--wp--preset--color--white);
        box-shadow: var(--wp--preset--shadow--natural);
    }

    body:is(.page-id-27) header.site-header nav.wp-block-navigation {
      background-color: var(--wp--preset--color--contrast);
      border-color:  var(--wp--preset--color--contrast);
    }

    header.site-header {
        position: sticky;
        top: 3rem;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        will-change: transform, opacity;

        z-index: 1001;
    }

    header.site-header.is-sticky {
        opacity: 1;
        transform: translateY(0);
    }

    header.site-header.is-hidden {
        opacity: 0;
        transform: translateY(-100%);
    }
}

/* Animation */
@keyframes blink-animation {
    0%,
    40%,
    100% {
        opacity: 1;
    }
    50%,
    90% {
        opacity: 0;
    }
}