/* ========================================================================== 彩虹世紀 — 新視覺（Theme 2026） 載在 style.css 與 refine.css 之後，整層覆蓋，移除這一行即可回到舊樣式。 方向取自 udilife.com 的骨架：純白底、暖灰褐內文、無襯線、大圓角、輕盈。 但不抄它的橘色 —— 品牌色改用你們自己 logo 上的那支橘 #D73578 與藍 #1C1F87， 識別才是自己的。 三個原則： 1. 底色只有兩階（純白／暖灰），靠卡片與陰影做層次，不用色塊切段 2. 圓角統一成三級：小 10px、卡片 18px、膠囊 999px 3. 內文不用純黑，用暖灰褐，整體會柔很多 ========================================================================== */ :root{ --navy:#1C1F87; /* 取自 logo 的藍，比原本 #1C1F87 亮 */ --deep:#171A73; /* 深色面用 */ --brand:#D73578; /* 取自 logo 的橘，當行動色 */ --brand-soft:#FDEEF5; --gold:#D73578; --red:#D73578; --ink:#17212E; /* 標題 */ --body:#475569; /* 內文暖灰褐 */ --muted:#6B7280; --paper:#FFFFFF; --band:#F2F3F6; /* 淺暖灰帶 */ --line:#E6EAF2; /* B2B 的分隔線色，全 app 用 18 次 */ --hair:#E6EAF2; --r-sm:10px; --r-md:12px; /* B2B 內頁最常用的圓角 */ --r-pill:999px; } body{background:var(--paper);color:var(--body);font-size:16px;line-height:1.85} /* ---- 字體：全站無襯線，標題加粗收緊 ---- */ h1,h2,h3,h4, .hero h1,.statement h2,.sec-head h2,.channel-strip h2, .page-hero h1,.cat-card strong,.facts dd b{ font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif !important; color:var(--ink); font-weight:700; letter-spacing:-.01em} .hero h1,.page-hero h1{line-height:1.35;font-weight:800} .statement h2,.sec-head h2{line-height:1.4} .eyebrow{color:var(--brand);letter-spacing:.16em;font-weight:700;font-size:.72rem} /* ---- 頁首：白底、細線、圓角膠囊鍵 ---- */ .site-header{ background:rgba(255,255,255,.92); border-top-width:3px; border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(58,51,46,.03),0 10px 30px -22px rgba(58,51,46,.35)} .site-header nav a{color:var(--body)} .site-header nav a:hover{color:var(--ink)} /* ---- 底色分層：只有白與暖灰兩階 ---- */ .cat-section,.svc-section,.partner-band{background:var(--band)} .maker-section{background:var(--paper)} .statement{background:var(--paper);border-bottom:0} .section+.section{border-top:0} /* ---- 深色面改用亮一階的藍，不再是沉重的海軍藍 ---- */ .facts,.channel-strip{ background:linear-gradient(135deg,#1C1F87 0%,#1C1F87 55%,#171A73 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 18px 44px -24px rgba(28,31,135,.6)} .facts dl>div::before{background:rgba(255,255,255,.28)} .facts dt,.channel-strip .eyebrow{color:#F7C4DC} .facts dd b{color:#fff;font-weight:800;letter-spacing:-.02em} .channel-strip h2{color:#fff} /* ---- 圓角統一 ---- */ .cat-card,.lineup-card,.image-card{border-radius:var(--r-md);overflow:hidden} .cat-photo{border-radius:0} .maker-wall li,.svc-grid a{border-radius:var(--r-sm)} .button,.nav-contact,.channel-actions a,.ch-wall a{border-radius:var(--r-pill)} .original-content .original-image,.hero-image img{border-radius:var(--r-md)} /* ---- 卡片：白底、細線、柔陰影 ---- */ .cat-card,.lineup-card{ background:#fff;border:1px solid var(--line); box-shadow:0 2px 6px -3px rgba(58,51,46,.10), 0 18px 36px -22px rgba(58,51,46,.28)} .cat-card:hover,.lineup-card:hover{ border-color:transparent; box-shadow:0 6px 14px -6px rgba(58,51,46,.14), 0 34px 60px -28px rgba(58,51,46,.38)} .cat-card strong{color:var(--ink);font-size:1.18rem} .cat-en,.lineup-brand{color:var(--brand)} .cat-area,.lineup-meta{color:var(--muted)} /* ---- 網格面板：改成獨立圓角卡，不再用格線切 ---- */ .maker-wall,.svc-grid{background:transparent;gap:.9rem;border:0} .maker-wall li,.svc-grid a{ background:#fff;border:1px solid var(--line); box-shadow:0 2px 6px -4px rgba(58,51,46,.10)} .maker-wall li{color:var(--ink);font-weight:600} .maker-wall li:hover,.svc-grid a:hover{ border-color:transparent; box-shadow:0 6px 14px -6px rgba(58,51,46,.14), 0 26px 44px -26px rgba(58,51,46,.34)} .svc-grid strong{color:var(--ink)} .svc-no{color:var(--brand)} /* ---- 按鍵：膠囊、實色、不用漸層 ---- */ .button.primary,.nav-contact{ background:var(--brand);border-color:var(--brand);color:#fff; box-shadow:0 2px 6px -2px rgba(232,134,46,.45), 0 14px 26px -14px rgba(232,134,46,.55)} .button.primary:hover,.nav-contact:hover{ background:#B82C64;border-color:#B82C64; box-shadow:0 4px 10px -3px rgba(232,134,46,.5), 0 22px 40px -18px rgba(232,134,46,.6)} .button.secondary{ background:#fff;border-color:var(--line);color:var(--ink); box-shadow:0 2px 6px -4px rgba(58,51,46,.12)} .button.secondary:hover{border-color:var(--brand);color:var(--brand)} .button.secondary::after{display:none} .channel-actions a:hover{color:var(--navy)} /* ---- 通路膠囊 ---- */ .ch-wall a{background:#fff;border-color:var(--line);color:var(--body)} .ch-wall a:hover{border-color:var(--brand);color:var(--brand); box-shadow:0 10px 22px -12px rgba(232,134,46,.5)} /* ---- 圖示：改成圓形底襯，更接近參考站的調性 ---- */ .svc-grid .ico{ color:var(--brand);width:22px;height:22px; box-sizing:content-box;padding:9px;border-radius:50%; background:var(--brand-soft)} .svc-grid a:hover .ico{background:var(--brand);color:#fff} .facts .ico{color:rgba(255,255,255,.7)} .facts dl>div:hover .ico{color:#F7C4DC} /* ---- 連結與細節 ---- */ .sec-more{color:var(--brand)} .sec-more:hover{border-bottom-color:var(--brand)} .product-lineup>h2::after,.sec-head h2::after{background:var(--brand)} footer{background:var(--band);border-top:1px solid var(--line)} footer::before{height:3px} .original-content strong{color:var(--ink)} .original-content ul li::before{background:var(--brand)} /* -------------------------------------------------------------------------- 分類卡改用線條插圖 首頁原本 1 張主視覺 + 8 張分類照，照片把版面吃掉了，而且那些照片在 內頁還會再出現一次。改成插圖後首頁只剩主視覺一張照片。 -------------------------------------------------------------------------- */ .cat-card .cat-photo{ aspect-ratio:4/3;display:grid;place-items:center; background:linear-gradient(160deg,#FBFAF8 0%,#F4F1EA 100%); box-shadow:inset 0 -1px 0 var(--line)} .cat-ico{ width:56%;max-width:118px;height:auto;color:var(--navy); transition:color .3s ease,transform .5s cubic-bezier(.2,.7,.3,1)} .cat-card:hover .cat-ico{color:var(--brand);transform:translateY(-3px) scale(1.04)} .cat-card .cat-body{padding:1.15rem 1.3rem 1.35rem} /* 進場時線條自己描一遍 */ [data-reveal-ready] .cat-card.reveal .cat-ico path, [data-reveal-ready] .cat-card.reveal .cat-ico circle{ stroke-dasharray:220;stroke-dashoffset:220; transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.3,1) calc(var(--reveal-delay,0ms) + 140ms)} [data-reveal-ready] .cat-card.reveal.is-in .cat-ico path, [data-reveal-ready] .cat-card.reveal.is-in .cat-ico circle{stroke-dashoffset:0} @media (prefers-reduced-motion:reduce){ .cat-ico{transition:none} .cat-card:hover .cat-ico{transform:none} [data-reveal-ready] .cat-card.reveal .cat-ico path, [data-reveal-ready] .cat-card.reveal .cat-ico circle{ stroke-dasharray:none;stroke-dashoffset:0;transition:none} } /* -------------------------------------------------------------------------- Logo 換成正方形標誌 舊 logo 是 600x160 的橫式，樣式用 width:150px 控制； 新的是 1064x998 接近正方，同樣寬度會變成 141px 高，把 92px 的頁首撐爆。 改成用高度控制，寬度自動。 -------------------------------------------------------------------------- */ /* 標誌裡的字是圖的一部分，縮太小會糊，所以撐到頁首容得下的極限 */ .site-header{height:100px} .logo img{width:auto;height:76px;display:block} footer img{width:auto;height:84px} @media (max-width:900px){.site-header{height:88px}.logo img{height:64px}} @media (max-width:640px){.site-header{height:76px}.logo img{height:56px}footer img{height:68px}} /* -------------------------------------------------------------------------- 頁首字標：logo 圖上寫的是「日安工坊 HIYASU」， 公司名稱要另外用文字顯示，否則訪客看不到彩虹世紀。 -------------------------------------------------------------------------- */ .logo{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none} .brand-wordmark{display:flex;flex-direction:column;line-height:1.15} .brand-wordmark b{font-size:1.16rem;font-weight:800;color:var(--navy); letter-spacing:.06em} .brand-wordmark i{font-style:normal;font-size:.6rem;letter-spacing:.2em; color:var(--muted);font-weight:600;margin-top:.22rem} @media (max-width:900px){ .brand-wordmark b{font-size:1.02rem} .brand-wordmark i{font-size:.54rem;letter-spacing:.16em} } @media (max-width:420px){.brand-wordmark i{display:none}}