diff --git a/src/components/SubLayout.jsx b/src/components/SubLayout.jsx index 72b3540..0df7039 100644 --- a/src/components/SubLayout.jsx +++ b/src/components/SubLayout.jsx @@ -1,4 +1,4 @@ -// import { useEffect } from "react"; +import { useEffect } from "react"; import { Outlet } from "react-router-dom"; import Header from "./Header"; import Footer from "./Footer"; @@ -24,7 +24,10 @@ function SubLayout() { // document.body.classList.remove("is-dark-hero"); // }; // }, []); - + useEffect(() => { + document.body.classList.add("is-sub"); + return () => document.body.classList.remove("is-sub"); + }, []); return ( <>
diff --git a/src/css/header.css b/src/css/header.css index 4495113..8f43f07 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -1,14 +1,19 @@ /*header.*/ -.pal-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:box-shadow .45s cubic-bezier(.22,1,.36,1);} -.pal-header::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.3);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.22,1,.36,1),background .45s cubic-bezier(.22,1,.36,1),backdrop-filter .45s cubic-bezier(.22,1,.36,1);} +.pal-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:top .4s cubic-bezier(.22,1,.36,1),padding .4s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1);} +.pal-header::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.5);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.22,1,.36,1),background .45s cubic-bezier(.22,1,.36,1),backdrop-filter .45s cubic-bezier(.22,1,.36,1);} .pal-header.is-scrolled::before,.pal-header.is-open::before,.pal-header.is-mobile-open::before{opacity:1;} .pal-header.is-scrolled,.pal-header.is-open,.pal-header.is-mobile-open{box-shadow:0 10px 30px rgba(15,23,42,.04);} +/*서브 전용 floating pill*/ +body.is-sub .pal-header.is-scrolled{top:12px;padding:0 16px;box-shadow:none;} +body.is-sub .pal-header.is-scrolled::before{opacity:0;} +body.is-sub .pal-header.is-scrolled .pal-header-inner{height:64px;background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:20px;border:1px solid rgba(17,17,17,.07);box-shadow:0 8px 32px rgba(15,23,42,.1);padding:0 28px;} +body.is-sub .pal-header.is-scrolled .pal-header-logo img{width:140px;} -.pal-header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:1440px;height:96px;margin:0 auto;z-index:2;} +.pal-header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:1440px;height:96px;margin:0 auto;z-index:2;transition:height .4s cubic-bezier(.22,1,.36,1),background .4s cubic-bezier(.22,1,.36,1),border-radius .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),padding .4s cubic-bezier(.22,1,.36,1);} .pal-header-logo{flex:0 0 auto;margin:0;font-size:0;line-height:1;} .pal-header-logo a{display:inline-flex;align-items:center;font-size:28px;font-weight:800;line-height:1;color:#111;text-decoration:none;letter-spacing:-0.03em;} -.pal-header-logo img{width:180px;display:block;} +.pal-header-logo img{width:160px;display:block;transition:width .4s cubic-bezier(.22,1,.36,1);} .pal-gnb{flex:1 1 auto;display:flex;justify-content:center;height:100%;} .pal-gnb-depth1{display:flex;align-items:center;gap:4px;height:100%;margin:0;padding:0;list-style:none;} @@ -16,7 +21,7 @@ .pal-gnb-link{position:relative;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0 20px;border:0;background:none;color:#111;text-decoration:none;cursor:pointer;transition:color .3s ease,transform .3s ease;} .pal-gnb-link:hover,.pal-gnb-link:focus-visible{color:var(--color-primary);transform:translateY(-2px);outline:none;} .pal-gnb-link-text{position:relative;z-index:1;font-size:16px;font-weight:700;line-height:1;letter-spacing:-0.02em;text-transform:uppercase;} -.pal-gnb-link-line{position:absolute;left:20px;right:20px;bottom:26px;height:2px;border-radius:999px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .32s ease;} +.pal-gnb-link-line{position:absolute;left:20px;right:20px;bottom:16px;height:2px;border-radius:999px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .32s ease;} .pal-gnb-item.is-active .pal-gnb-link{color:var(--color-primary);transform:translateY(-2px);} .pal-gnb-item.is-active .pal-gnb-link-line{transform:scaleX(1);}