/* ========================================================================== kirinsan.co.jp v3 — Global Styles EmDash + Astro | Migrated from v2.1 Nuxt (_tokens.scss + _headings.scss + main.scss) ========================================================================== */ /* Adobe Fonts (sonar-sans) — で タグとして読み込み（@import はレンダーブロッキングチェインを生むため） */ /* Google Fonts (Klee One) — 同上 */ /* ========================================================================== Design Tokens (from _tokens.scss) ========================================================================== */ :root { /* Colors */ --color-primary: #007acc; --color-secondary: #6c757d; --color-success: #28a745; --color-danger: #dc3545; --color-warning: #ffc107; --color-info: #17a2b8; --color-light: #f8f9fa; --color-dark: #343a40; --color-white: #ffffff; --color-black: #000000; --color-text: #333333; --color-bg: #ffffff; --brand-keycolor: #F0FF05; /* Components & Layouts */ --aspect-ratio-card: 16/9; --radius-card: 12px; --radius-pill: 999px; --radius-detail-bar: 6px; --detail-header-padding: 0.0rem 0 0.5rem 2.5rem; --detail-header-bar-width: 6px; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Font Sizes — rem based (1rem = 10px due to 62.5%) */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-body-pc: 1.6rem; --font-size-body-sp: 1.4rem; --font-size-h1-pc: 4.0rem; --font-size-h1-sp: 3.0rem; --font-size-h2-pc: 2.4rem; --font-size-h2-sp: 2.0rem; --font-size-h3-pc: 2.0rem; --font-size-h3-sp: 1.6rem; --font-size-h4-pc: 1.6rem; --font-size-h4-sp: 1.4rem; /* Breakpoints (reference) */ --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; /* Font Families */ --font-display: 'sonar-sans', sans-serif; --font-body: "LINE Seed JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --font-mono: 'Courier New', monospace; } /* ========================================================================== Reset & Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; /* 1rem = 10px */ scroll-behavior: smooth; scroll-padding-top: 80px; /* Offset for 64px header + spacing */ } body { font-family: var(--font-body); font-size: var(--font-size-body-pc); color: var(--color-text); background: var(--color-bg); line-height: 1.8; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } @media (max-width: 768px) { body { font-size: var(--font-size-body-sp); } } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* ========================================================================== Headings (from _headings.scss — converted SCSS mixins to plain CSS) ========================================================================== */ /* Portable Text のコンテンツ内の見出しスタイル */ .portable-text-content h1, .portable-text-content h2, .portable-text-content h3, .portable-text-content h4 { font-weight: 700; line-height: 1.4; position: relative; color: #000; word-break: auto-phrase; overflow-wrap: break-word; } /* H1 — 下線付き */ .portable-text-content h1 { font-family: var(--font-display); font-size: var(--font-size-h1-pc); letter-spacing: 0.1em; margin-top: 3rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; } .portable-text-content h1::after { content: ""; display: block; width: 100px; height: 2px; background-color: #000; border-radius: 2px; position: absolute; bottom: 0; left: 0; } @media (max-width: 767px) { .portable-text-content h1 { font-size: var(--font-size-h1-sp); margin-top: 4rem; } .portable-text-content h1::after { width: 75px; } } /* H2 — 下線（フルワイド）へのデザイン変更により記事タイトルとの競合を解消 */ .portable-text-content h2 { font-size: var(--font-size-h2-pc); letter-spacing: 0.05em; padding-bottom: 0.75rem; border-bottom: 2px solid #000; margin-top: 5.0rem; margin-bottom: 2.0rem; } @media (max-width: 767px) { .portable-text-content h2 { font-size: var(--font-size-h2-sp); margin-top: 4.0rem; } } /* H3 — 少し控えめな左バー */ .portable-text-content h3 { font-size: var(--font-size-h3-pc); letter-spacing: 0.05em; padding-left: 1.2rem; margin-top: 4.0rem; margin-bottom: 1.5rem; } .portable-text-content h3::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background-color: #000; border-radius: 2px; } @media (max-width: 767px) { .portable-text-content h3 { font-size: var(--font-size-h3-sp); padding-left: 1.0rem; margin-top: 3.0rem; } .portable-text-content h3::before { width: 4px; } } /* H4 — よりシンプルに */ .portable-text-content h4 { font-size: var(--font-size-h4-pc); letter-spacing: 0.05em; padding-left: 1rem; color: #333; margin-top: 3.0rem; margin-bottom: 1.0rem; } .portable-text-content h4::before { content: "・"; position: absolute; left: -0.5rem; top: 0; transform: none; width: auto; height: auto; background: none; color: #888; } @media (max-width: 767px) { .portable-text-content h4 { font-size: var(--font-size-h4-sp); margin-top: 2.5rem; } } /* Portable Text — 段落・リスト・引用 */ .portable-text-content { line-height: 2.0; /* Adjusted from 2.2 for tighter rhythm */ } .portable-text-content p { margin-bottom: 2.4rem; /* More generous paragraph spacing */ } .portable-text-content ul, .portable-text-content ol { margin: 1.5rem 0; padding-left: 2rem; } .portable-text-content li { margin-bottom: 0.5rem; } .portable-text-content blockquote { border-left: 4px solid #ddd; padding: 1rem 2rem; margin: 2rem 0; background: #f9f9f9; color: #555; } .portable-text-content img { border-radius: 8px; margin: 3rem 0; } /* ========================================================================== Page Title (from _headings.scss page-title mixin) ========================================================================== */ .page-title { text-align: center; padding-top: 10rem; margin-bottom: 6rem; } .page-title h1 { font-family: var(--font-display); font-size: 5rem; letter-spacing: 0.1em; padding-left: 0.1em; margin-bottom: 2rem; line-height: 1; position: relative; display: inline-block; font-weight: 700; color: #000; } .page-title h1::after { content: ""; display: block; width: 60px; height: 4px; background-color: #000; border-radius: 2px; position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); } .page-title .subtitle { font-size: 1.4rem; color: #888; letter-spacing: 0.2em; margin-top: 1.5rem; } @media (max-width: 767px) { .page-title { padding-top: 6rem; margin-bottom: 4rem; } .page-title h1 { font-size: 3.6rem; margin-bottom: 1.5rem; } .page-title h1::after { bottom: -1rem; } .page-title .subtitle { margin-top: 1rem; } } /* ========================================================================== Header (from Header.vue scoped styles) ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); font-family: var(--font-display); transition: background-color 0.4s ease, color 0.4s ease; } .site-header.is-home.is-white-mode { background-color: transparent; backdrop-filter: none; color: #fff; } .site-header.is-about.is-transparent-black-mode { background-color: transparent; backdrop-filter: blur(10px); color: #000; } .site-header.is-home.is-black-mode, .site-header.is-about.is-black-mode, .site-header:not(.is-home):not(.is-about):not(.is-dark) { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000; } /* 404など暗い背景向け：上から半透明黒→透明のグラデーション＋ブラー＋白文字 */ .site-header.is-dark { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.0) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; } .site-nav { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; height: 64px; position: relative; } /* Nav Brand — Centered Logo */ .nav-brand { --size: 4rem; width: var(--size); height: var(--size); position: absolute; left: 50%; top: 1.1rem; margin: 0 calc(var(--size) * -0.5); display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; } @media (max-width: 767px) { body.menu-open { overflow: hidden; /* Prevent scrolling when drawer is open */ } body.menu-open .nav-brand { transform: translateY(-40px); opacity: 0; pointer-events: none; } } .nav-brand img { width: 100%; height: auto; object-fit: contain; transition: filter 0.4s ease; } .is-white-mode .nav-brand img, .is-dark .nav-brand img { filter: invert(1); } /* Desktop Nav */ .nav-links { display: none; width: 100%; } @media (min-width: 768px) { .nav-links { display: flex; } .nav-links-inner { display: flex; margin: 0 auto; width: 100%; max-width: 960px; list-style: none; height: 100%; } /* 4 items: 2 left + logo gap + 2 right */ .nav-links-inner li { width: calc(100% / 5); /* 5 slots: 4 items + 1 logo gap */ text-align: center; position: relative; height: 100%; display: flex; align-items: center; justify-content: center; } /* Left/right divider lines */ .nav-links-inner li::before { content: ""; display: block; border-left: 1px solid currentColor; height: 100%; position: absolute; left: 0; top: 0; transition: border-color 0.4s ease; } .nav-links-inner li:last-child::after, .nav-links-inner li:nth-child(2)::after { content: ""; display: block; border-left: 1px solid currentColor; height: 100%; position: absolute; right: 0; top: 0; } /* Logo gap after 2nd item (between left and right groups) */ .nav-links-inner li:nth-child(2) { margin-right: calc(100% / 5); } } .nav-link { --dot-size: 4px; color: currentColor; text-decoration: none; padding: 0.5rem 1rem; border-radius: 6px; transition: all 0.3s ease; font-size: 1.8rem; font-weight: 600; text-transform: uppercase; position: relative; } .nav-link::after { content: ""; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: currentColor; position: absolute; left: calc(50% - var(--dot-size) / 2); bottom: -0.5em; transform: translateY(-50%); opacity: 0; transition: all 0.1s ease-in-out; } .nav-link:hover::after, .nav-link:focus::after { opacity: 0.5; bottom: -0.1em; } .nav-link.is-active::after { opacity: 1; bottom: -0.1em; } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; margin-left: auto; color: inherit; } @media (min-width: 768px) { .mobile-menu-toggle { display: none; } } .hamburger-line { width: 24px; height: 2px; background: currentColor; transition: all 0.3s ease; margin: 2px 0; } .mobile-menu-toggle.is-open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle.is-open .hamburger-line:nth-child(2) { opacity: 0; } .mobile-menu-toggle.is-open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } /* Mobile Menu Overlay */ .mobile-menu { display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; flex-direction: column; overflow-y: auto; background: rgba(10, 10, 10, 0.98); /* Premium dark background */ backdrop-filter: blur(15px); padding: 2rem 2.5rem; align-items: flex-start; justify-content: flex-start; /* フェードインアニメーション用の設定 */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; } .mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: all; } .mobile-menu .close-button { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: #fff; font-size: 4rem; font-weight: 300; line-height: 1; cursor: pointer; z-index: 100; transition: color 0.3s ease, transform 0.3s ease; } .mobile-menu .close-button:hover { color: var(--brand-keycolor); transform: rotate(90deg); } /* メニュー内レイアウト */ .menu-container-inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%; padding-top: 1rem; } .menu-logo { margin-bottom: 6rem; width: 48px; /* Small, chic size */ opacity: 0; transform: translateY(-20px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu.is-open .menu-logo { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .menu-logo img { filter: invert(1); /* White logo on dark background */ } .mobile-nav-links { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; width: 100%; } .mobile-menu .menu-link { display: block; text-decoration: none; color: #fff; text-align: left; font-family: var(--font-display); font-size: clamp(3.2rem, 11vw, 6rem); /* Huge modern typography */ font-weight: 700; letter-spacing: 0.05em; line-height: 1.1; opacity: 0; transform: translateY(20px); transition: color 0.3s ease; } /* Open state staggered animation */ .mobile-menu.is-open .menu-link { animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .mobile-menu.is-open .menu-link:nth-child(1) { animation-delay: 0.1s; } .mobile-menu.is-open .menu-link:nth-child(2) { animation-delay: 0.15s; } .mobile-menu.is-open .menu-link:nth-child(3) { animation-delay: 0.2s; } .mobile-menu.is-open .menu-link:nth-child(4) { animation-delay: 0.25s; } .mobile-menu.is-open .menu-link:nth-child(5) { animation-delay: 0.3s; } @keyframes slideUpFade { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .mobile-menu .menu-link:hover, .mobile-menu .menu-link:active { color: var(--brand-keycolor); } /* Mobile Menu Footer (Social & Mini Menu) */ .mobile-menu-footer { margin-top: auto; padding-top: 4rem; width: 100%; opacity: 0; transform: translateY(20px); } .mobile-menu.is-open .mobile-menu-footer { animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.35s; } .mobile-menu .socialmedia { justify-content: flex-start; margin: 0 0 2.5rem 0; gap: 1.5rem; } .mobile-menu .socialmedia a { color: #000; background-color: #fff; width: 44px; height: 44px; } .mobile-menu .socialmedia svg { width: 22px; height: 22px; } .mobile-menu .socialmedia a:hover { color: #000; background-color: var(--brand-keycolor); } .mobile-menu .footer-minimenu { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; } .mobile-menu .footer-minimenu li { display: block; } .mobile-menu .footer-minimenu li::after { content: none; } .mobile-menu .footer-minimenu a { color: rgba(255, 255, 255, 0.7); font-size: 1.1rem; letter-spacing: 0; transition: color 0.3s ease; } .mobile-menu .footer-minimenu a:hover { color: #fff; } @media (min-width: 768px) { .mobile-menu { display: none !important; } } /* ========================================================================== Footer (from Footer.vue scoped styles) ========================================================================== */ .site-footer { background-color: var(--brand-keycolor); padding: 2em 0; margin-top: 6em; position: relative; text-align: center; font-family: var(--font-display); font-weight: 400; } /* Wave animation */ .footer-wave { position: relative; } .footer-wave svg { display: block; width: 100%; height: 60px; max-height: 60px; position: absolute; left: 0; bottom: 0; } .waveform-1 > use { animation: wave1 10s linear infinite; fill: #9dff05; } .waveform-2 > use { animation: wave2 8s linear infinite; fill: #c6ff05; } .waveform-3 > use { animation: wave3 6s linear infinite; fill: #ffe405; } .waveform-4 > use { animation: wave4 4s linear infinite; fill: #F0FF05; } @keyframes wave1 { 0% { transform: translate(85px, 0); } 100% { transform: translate(-90px, 0); } } @keyframes wave2 { 0% { transform: translate(-90px, 0); } 100% { transform: translate(85px, 0); } } @keyframes wave3 { 0% { transform: translate(85px, 0); } 100% { transform: translate(-90px, 0); } } @keyframes wave4 { 0% { transform: translate(-90px, 0); } 100% { transform: translate(85px, 0); } } .footer-lead { height: 30rem; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; letter-spacing: 0.05em; font-weight: 600; } .footer-lead small { font-weight: 400; font-size: 60%; } .footer-divider { width: 50%; max-width: 200px; margin: 0 auto; border: none; border-bottom: 1.75px dotted #000; } /* Social Media */ .socialmedia { list-style: none; padding: 0; margin: 1rem auto; display: flex; gap: 1rem; justify-content: center; } .socialmedia a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: #333; transition: all 0.3s ease; text-decoration: none; } .socialmedia a:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .socialmedia svg { width: 20px; height: 20px; fill: currentColor; } /* Footer Mini Menu */ .footer-minimenu { font-size: 1rem; list-style: none; padding: 0; } .footer-minimenu a { color: inherit; } .footer-minimenu li { display: inline-block; } .footer-minimenu li::after { content: "|"; margin: 0 0.5em; } .footer-minimenu li:last-child::after { content: ""; } .footer-copy { font-size: 1.2rem; border-top: 1px dotted #000; max-width: 200px; margin: 2em auto 0; padding: 2em 0; } /* ========================================================================== Container ========================================================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* ========================================================================== Article Detail Header (Works, Blog, News) ========================================================================== */ .article-top-header { display: flex; flex-direction: column-reverse; /* WORKSラベルを上に、パンくずを下に */ align-items: flex-start; /* 左寄せ */ gap: 1rem; /* 間隔を詰める */ margin-bottom: 1.5rem; /* 下の要素（メインビジュアルなど）との間隔を詰める */ padding-top: 4rem; /* top padding to replace the removed PageTitle */ } /* Breadcrumbコンポーネントが持つ不要な下部余白を確実に打ち消す */ .article-top-header .breadcrumb ol { margin-bottom: 0 !important; } @media (max-width: 768px) { .article-top-header { padding-top: 2rem; } } .article-category-label { display: none; /* PCでは非表示 */ font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; line-height: 1; letter-spacing: 0.1em; padding-bottom: 0.5rem; border-bottom: 4px solid #000; margin: 0; text-transform: uppercase; } @media (max-width: 768px) { .article-category-label { display: block; /* モバイル時のみ表示 */ font-size: 1.6rem; border-bottom-width: 2px; } } /* ========================================================================== Animated Icons (>> and → SVG) ========================================================================== */ .animated-icon { width: var(--icon-size, 16px); height: var(--icon-size, 16px); border-radius: 50%; overflow: hidden; position: relative; display: inline-flex; flex-shrink: 0; vertical-align: middle; } .animated-icon .icon-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); font-weight: 700; } .animated-icon .icon-inner svg { width: var(--svg-size, 10px); height: var(--svg-size, 10px); } .animated-icon .is-black { background-color: var(--icon-bg-default, #000); color: var(--icon-color-default, #fff); transform: translateX(0); } .animated-icon .is-white { background-color: var(--icon-bg-white, #fff); color: var(--icon-color-white, #000); transform: translateX(0); } .animated-icon .is-yellow { background-color: var(--icon-bg-hover, var(--brand-keycolor, #F0FF05)); color: var(--icon-color-hover, #000); transform: translateX(-100%); } :where(a, button, .feature-card, .news-item):hover .animated-icon .is-black, :where(a, button, .feature-card, .news-item):hover .animated-icon .is-white { transform: translateX(100%); } :where(a, button, .feature-card, .news-item):hover .animated-icon .is-yellow { transform: translateX(0); } /* ========================================================================== Page Transition Loader ========================================================================== */ .page-loader { position: fixed; top: 0; left: 0; width: 100vw; height: 4px; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: transparent; } .page-loader::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; /* FooterのWaveカラー4色を使用し、後端がフェードアウトする彗星風グラデーション */ background: linear-gradient(90deg, rgba(157, 255, 5, 0) 0%, #9dff05 30%, #c6ff05 60%, #ffe405 85%, #F0FF05 100%); transform: translateX(-100%); border-radius: 0 2px 2px 0; } .page-loader.is-loading { opacity: 1; } .page-loader.is-loading::before { animation: sweep-line 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes sweep-line { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } /* ========================================================================== Header Initial Animation ========================================================================== */ @keyframes navLogoFadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes navDividerDraw { 0% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } } @keyframes navItemBounceIn { 0% { opacity: 0; transform: translateY(-20px); } 60% { opacity: 1; transform: translateY(5px); } 80% { transform: translateY(-2px); } 100% { opacity: 1; transform: translateY(0); } } .site-header.is-initial-entry .nav-brand { opacity: 0; animation: navLogoFadeIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } @media (min-width: 768px) { .site-header.is-initial-entry .nav-links-inner li::before, .site-header.is-initial-entry .nav-links-inner li::after { clip-path: inset(0 0 100% 0); } .site-header.is-initial-entry .nav-link { opacity: 0; /* Needed to let transform work properly if it's inline */ display: inline-block; } /* Random delays for 6 dividers */ .site-header.is-initial-entry .nav-links-inner li:nth-child(1)::before { animation: navDividerDraw 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s forwards; } .site-header.is-initial-entry .nav-links-inner li:nth-child(2)::before { animation: navDividerDraw 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards; } .site-header.is-initial-entry .nav-links-inner li:nth-child(2)::after { animation: navDividerDraw 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s forwards; } .site-header.is-initial-entry .nav-links-inner li:nth-child(3)::before { animation: navDividerDraw 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s forwards; } .site-header.is-initial-entry .nav-links-inner li:nth-child(4)::before { animation: navDividerDraw 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.65s forwards; } .site-header.is-initial-entry .nav-links-inner li:nth-child(4)::after { animation: navDividerDraw 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s forwards; } /* Sequential delays for 4 menu items (left to right) */ .site-header.is-initial-entry .nav-links-inner li:nth-child(1) .nav-link { animation: navItemBounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards; } .site-header.is-initial-entry .nav-links-inner li:nth-child(2) .nav-link { animation: navItemBounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards; } .site-header.is-initial-entry .nav-links-inner li:nth-child(3) .nav-link { animation: navItemBounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s forwards; } .site-header.is-initial-entry .nav-links-inner li:nth-child(4) .nav-link { animation: navItemBounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards; } } @media (max-width: 767px) { .site-header.is-initial-entry .mobile-menu-toggle { opacity: 0; animation: navLogoFadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards; } }