BLOG & INSIGHTS

熱門文章

從第一線實務出發,分享 SPA、芳療、健康美學, 以及專業工作者持續成長所需要的知識。

文章分類
全部文章 SPA 專業實務 芳療與精油 健康美學 服務管理 講師成長
此分類目前尚無文章。
1 2 3
/* ========================================================= RESET ========================================================= */ .wy-blog, .wy-blog *, .wy-blog *::before, .wy-blog *::after{ box-sizing:border-box; } .wy-blog{ width:100%; margin:0; padding:88px 0 105px; overflow:hidden; background:#ffffff; color:#443e39; } .wy-blog-wrap{ width:min(1180px, calc(100% – 80px)); margin:0 auto; } /* ========================================================= HEADER ========================================================= */ .wy-blog-header{ margin:0 0 42px; } .wy-blog-en{ display:block; margin:0 0 10px; color:#426055; font-size:12px; font-weight:600; line-height:1.4; letter-spacing:.22em; } .wy-blog-header h1{ margin:0 0 14px; color:#443e39; font-size:42px; font-weight:500; line-height:1.35; letter-spacing:.07em; } .wy-blog-header p{ max-width:650px; margin:0; color:#817971; font-size:15px; line-height:1.9; letter-spacing:.03em; } /* ========================================================= FILTER WRAP ========================================================= */ .wy-blog-filter-wrap{ width:100%; margin:0 0 54px; padding:0 0 18px; border-bottom:1px solid #ebe8e3; } /* ========================================================= DESKTOP FILTER ========================================================= */ .wy-blog-category{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .wy-filter-btn{ appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 20px; border:1px solid #e0dcd6; border-radius:0; outline:none; background:#faf9f7; color:#69615a; font-family:inherit; font-size:13px; font-weight:400; line-height:1; letter-spacing:.04em; cursor:pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; } .wy-filter-btn:hover{ background:#ffffff; border-color:#426055; color:#426055; } .wy-filter-btn.active{ background:#426055; border-color:#426055; color:#ffffff; } /* ========================================================= MOBILE FILTER ========================================================= */ .wy-blog-mobile-filter{ display:none; } /* ========================================================= GRID ========================================================= */ .wy-blog-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap:32px; row-gap:62px; width:100%; } /* ========================================================= CARD ========================================================= */ .wy-blog-card{ display:block; width:100%; min-width:0; } /* ========================================================= IMAGE ========================================================= */ .wy-blog-image{ position:relative; display:block; width:100%; aspect-ratio:1.42 / 1; overflow:hidden; background:#f2f0ed; text-decoration:none; } .wy-blog-image img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .55s ease; } .wy-blog-card:hover .wy-blog-image img{ transform:scale(1.035); } /* ========================================================= BODY ========================================================= */ .wy-blog-body{ width:100%; padding:20px 0 0; } /* ========================================================= META ========================================================= */ .wy-blog-meta{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin:0 0 13px; } .wy-blog-tag{ color:#426055; font-size:11px; font-weight:600; line-height:1.5; letter-spacing:.08em; } .wy-blog-meta time{ flex:0 0 auto; color:#aaa29a; font-size:10px; line-height:1.5; letter-spacing:.08em; } /* ========================================================= TITLE ========================================================= */ .wy-blog-card h2{ margin:0 0 12px; color:#403b37; font-size:20px; font-weight:500; line-height:1.62; letter-spacing:.02em; } .wy-blog-card h2 a{ color:inherit; text-decoration:none; transition:color .25s ease; } .wy-blog-card h2 a:hover{ color:#426055; } /* ========================================================= DESCRIPTION ========================================================= */ .wy-blog-body p{ display:-webkit-box; margin:0 0 18px; overflow:hidden; color:#817a73; font-size:13px; line-height:1.9; letter-spacing:.02em; -webkit-line-clamp:3; -webkit-box-orient:vertical; } /* ========================================================= READ MORE ========================================================= */ .wy-blog-more{ display:inline-flex; align-items:center; gap:9px; color:#426055; font-size:11px; font-weight:600; line-height:1; letter-spacing:.08em; text-decoration:none; } .wy-blog-more span{ display:inline-block; transition:transform .25s ease; } .wy-blog-more:hover span{ transform:translateX(4px); } /* ========================================================= EMPTY ========================================================= */ .wy-blog-empty{ display:none; padding:60px 20px; text-align:center; color:#837b74; font-size:14px; line-height:1.8; } /* ========================================================= PAGINATION ========================================================= */ .wy-blog-pagination{ display:flex; align-items:center; justify-content:center; gap:7px; margin:84px 0 0; } .wy-blog-pagination a{ display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; background:#ffffff; border:1px solid #dedad5; color:#706963; font-size:12px; text-decoration:none; transition:.25s ease; } .wy-blog-pagination a:hover{ border-color:#426055; color:#426055; } .wy-blog-pagination a.active{ background:#426055; border-color:#426055; color:#ffffff; } .wy-blog-pagination .next{ gap:8px; padding:0 17px; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width:960px){ .wy-blog{ padding:72px 0 88px; } .wy-blog-wrap{ width:calc(100% – 48px); } .wy-blog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap:26px; row-gap:52px; } .wy-blog-header h1{ font-size:37px; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width:767px){ .wy-blog{ width:100%; padding:44px 0 70px; } .wy-blog-wrap{ width:100%; margin:0; } /* ========================= HEADER ========================== */ .wy-blog-header{ margin:0 20px 30px; } .wy-blog-en{ margin-bottom:8px; font-size:10px; } .wy-blog-header h1{ margin-bottom:10px; font-size:30px; } .wy-blog-header p{ max-width:none; font-size:14px; line-height:1.8; } /* ========================= FILTER ========================== */ .wy-blog-filter-wrap{ margin:0 0 36px; padding:0 20px 25px; border-bottom:1px solid #ebe8e3; } /* 桌機分類直接隱藏 */ .wy-blog-category{ display:none; } /* 顯示手機下拉 */ .wy-blog-mobile-filter{ display:block; width:100%; } .wy-blog-mobile-filter label{ display:block; margin:0 0 9px; color:#426055; font-size:11px; font-weight:600; line-height:1.5; letter-spacing:.12em; } .wy-blog-select-wrap{ position:relative; width:100%; } .wy-blog-select-wrap select{ appearance:none; -webkit-appearance:none; display:block; width:100%; height:50px; margin:0; padding:0 50px 0 16px; border:1px solid #dcd7d1; border-radius:0; outline:none; background:#ffffff; color:#443e39; font-family:inherit; font-size:14px; cursor:pointer; } .wy-blog-select-wrap select:focus{ border-color:#426055; } .wy-blog-select-arrow{ position:absolute; top:50%; right:18px; transform:translateY(-50%); color:#426055; font-size:14px; line-height:1; pointer-events:none; } /* ========================= GRID ========================== */ .wy-blog-grid{ display:block; width:100%; } /* ========================= CARD ========================== */ .wy-blog-card{ width:auto; margin:0 20px 50px; } .wy-blog-card:last-child{ margin-bottom:0; } /* ========================= IMAGE ========================== */ .wy-blog-image{ width:100%; aspect-ratio:4 / 3; } .wy-blog-image img{ width:100%; height:100%; object-fit:cover; } /* ========================= BODY ========================== */ .wy-blog-body{ padding-top:18px; } /* ========================= META ========================== */ .wy-blog-meta{ margin-bottom:11px; } .wy-blog-tag{ font-size:11px; } .wy-blog-meta time{ font-size:10px; } /* ========================= TITLE ========================== */ .wy-blog-card h2{ margin-bottom:10px; font-size:20px; line-height:1.55; } /* ========================= DESCRIPTION ========================== */ .wy-blog-body p{ margin-bottom:17px; font-size:13px; line-height:1.85; -webkit-line-clamp:3; } /* ========================= PAGINATION ========================== */ .wy-blog-pagination{ flex-wrap:wrap; gap:7px; margin:54px 0 0; padding:0 20px; } .wy-blog-pagination a{ min-width:36px; height:36px; padding:0 11px; font-size:11px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media screen and (max-width:390px){ .wy-blog-header{ margin-left:16px; margin-right:16px; } .wy-blog-filter-wrap{ padding-left:16px; padding-right:16px; } .wy-blog-card{ margin-left:16px; margin-right:16px; } .wy-blog-card h2{ font-size:19px; } } document.addEventListener(“DOMContentLoaded", function(){ const cards = document.querySelectorAll(“.wy-blog-card"); const buttons = document.querySelectorAll(“.wy-filter-btn"); const select = document.getElementById(“wyBlogFilter"); const empty = document.querySelector(“.wy-blog-empty"); /* ===================================================== FILTER FUNCTION ====================================================== */ function filterArticles(category){ let visibleCount = 0; cards.forEach(function(card){ const cardCategory = card.getAttribute(“data-category"); const show = category === “all" || cardCategory === category; if(show){ card.style.display = “"; visibleCount++; }else{ card.style.display = “none"; } }); /* 沒有文章時 */ if(empty){ if(visibleCount === 0){ empty.style.display = “block"; }else{ empty.style.display = “none"; } } } /* ===================================================== DESKTOP BUTTON FILTER ====================================================== */ buttons.forEach(function(button){ button.addEventListener(“click", function(){ const category = this.getAttribute(“data-filter"); /* active */ buttons.forEach(function(btn){ btn.classList.remove(“active"); }); this.classList.add(“active"); /* filter */ filterArticles(category); /* 同步手機 */ if(select){ select.value = category; } }); }); /* ===================================================== MOBILE SELECT FILTER ====================================================== */ if(select){ select.addEventListener(“change", function(){ const category = this.value; /* filter */ filterArticles(category); /* 同步桌機 */ buttons.forEach(function(btn){ const buttonCategory = btn.getAttribute(“data-filter"); if(buttonCategory === category){ btn.classList.add(“active"); }else{ btn.classList.remove(“active"); } }); }); } });

中華全技能發展協會

連絡人

WordPress 設計