*{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--white);color:var(--ink); font-family:var(--sans);line-height:var(--lh-normal);letter-spacing:var(--ls-body); overflow-x:hidden; } ::selection{background:var(--sea-blue);color:#fff;} .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,48px);} .wrap.narrow{max-width:940px;} img{max-width:100%;display:block;} /* 頁首樣式已抽至共用 /css/header.css（於 內引用） */ /* ================= hero ================= */ .hero{ position:relative;min-height:100svh; display:flex;flex-direction:column;justify-content:center; padding:120px 0 40px;overflow:hidden;background:var(--white); } /* giant outline watermark */ .hero .watermark{ position:absolute;top:38%;left:0;white-space:nowrap;z-index:0; font-family:var(--en);font-weight:800;font-size:var(--fs-watermark); letter-spacing:.06em;color:transparent; -webkit-text-stroke:1px #EDEBE6; user-select:none;pointer-events:none; animation:drift 60s linear infinite; } @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}} .hero-band{ position:absolute;top:31%;left:0;right:0;z-index:0; display:flex;justify-content:center;gap:clamp(22px,4.5vw,64px); pointer-events:none; display:none; /* 作品照片暫時隱藏——要顯示時把這行 display:none 刪掉即可 */ } .hero-band .strip{ width:clamp(120px,20vw,280px);height:clamp(46px,6.4vw,80px); min-width:0;flex:none;opacity:.92; } .hero-band .strip.s1{transform:rotate(-2deg) translateY(-10px);} .hero-band .strip.s2{transform:rotate(1.4deg) translateY(14px);} .hero-band .strip.s3{transform:rotate(-1deg) translateY(-2px);} @media(max-width:760px){ .hero-band{gap:14px;top:26%;} .hero-band .strip.s3{display:none;} } .hero-stage{position:relative;z-index:1;} /* 標題為單一

，三行以 分行（保持語意完整） */ .hero-h1{ font-weight:900;font-size:var(--fs-display); line-height:1.28;letter-spacing:.04em; } .h-line{ display:flex;align-items:center;gap:clamp(14px,3vw,34px); margin-bottom:clamp(2px,1vw,10px);white-space:nowrap; } .h-line.l2{justify-content:flex-end;} .h-line.l3{padding-left:clamp(0px,6vw,80px);} .strip{ height:clamp(38px,6vw,72px);border-radius:10px;flex:0 1 auto; min-width:clamp(90px,16vw,230px); background-size:cover;background-position:center; box-shadow:0 6px 18px rgba(0,0,0,.12); transform:rotate(-.5deg); } .strip.s1{background:linear-gradient(120deg,var(--sea-blue) 0%,color-mix(in srgb,var(--sea-blue),white 38%) 60%,color-mix(in srgb,var(--sea-blue),white 68%) 100%);} .strip.s2{background:linear-gradient(120deg,var(--dark) 0%,color-mix(in srgb,var(--dark),white 26%) 60%,color-mix(in srgb,var(--dark),white 55%) 100%);transform:rotate(.6deg);} .strip.s3{background:linear-gradient(120deg,#E9E4DA 0%,#CDC4B2 60%,#A79C86 100%);transform:rotate(-.4deg);} .strip span{ display:flex;height:100%;align-items:center;justify-content:center; font-size:var(--fs-2xs);letter-spacing:var(--ls-label);color:rgba(255,255,255,.85);font-weight:500; } .strip.s3 span{color:rgba(80,72,58,.75);} .hero-sub{ margin-top:clamp(26px,4vw,44px); display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-end; } .hero-sub .desc{max-width:34em;font-size:var(--fs-re);color:var(--ink-soft);font-weight:400;} .hero-sub .desc b{color:var(--ink);font-weight:700;} .news{ flex:0 0 auto;border-left:1px solid var(--line);padding-left:22px;font-size:var(--fs-xs); } .news .nt{font-family:var(--en);font-weight:700;letter-spacing:.2em;font-size:var(--fs-2xs);color:var(--sea-blue);display:block;} .news a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .25s,color .25s;} .news a:hover{color:var(--sea-blue);border-color:var(--sea-blue);} /* 首屏事實列：三項可查證事實（診斷書 6.5 ③） */ .hero-facts{ margin-top:clamp(20px,3vw,30px);list-style:none; display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(16px,2.4vw,28px); font-size:var(--fs-ss);color:var(--ink-soft);letter-spacing:.08em; } .hero-facts li{display:flex;align-items:center;gap:10px;} .hero-facts li+li::before{ content:"";width:1px;height:14px;background:var(--line); margin-right:clamp(6px,1.2vw,14px); } .hero-facts b{color:var(--ink);font-weight:700;} /* 首屏雙 CTA（診斷書 6.5 ④） */ .hero-cta{margin-top:clamp(22px,3vw,32px);display:flex;flex-wrap:wrap;gap:14px;} .hero-cta .btn{font-size:var(--fs-ss);padding:15px 30px;} /* ================= hello speech circle ================= */ .hello{position:relative;padding:40px 0 130px;background:var(--white);} .hello-circle{ position:relative;margin:0 auto; width:clamp(320px,52vw,560px);height:clamp(320px,52vw,560px); background:var(--sea-blue);border-radius:50%; color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center; /* 左右留白比上下窄，讓標題維持設計稿的兩行斷行 */ text-align:center;padding:clamp(34px,6vw,80px) clamp(24px,3.4vw,46px); box-shadow:0 24px 60px var(--acc-sh); } .hello-circle::after{ /* speech tail */ content:"";position:absolute;left:12%;bottom:6%; width:54px;height:54px;background:var(--sea-blue);border-radius:50% 50% 0 50%; transform:rotate(35deg);z-index:-1; } .hello-circle .hi{ font-weight:900;font-size:var(--fs-t2);line-height:1.55;letter-spacing:.04em;margin-bottom:18px; } /* 窄螢幕圓形內寬只剩約 270px，標題需縮一階才守得住設計稿的兩行 */ @media(max-width:560px){ .hello-circle{padding:clamp(34px,6vw,80px) 36px;} .hello-circle .hi{font-size:clamp(18px,5vw,24px);letter-spacing:.02em;} } .hello-circle p{ font-size:var(--fs-ss);font-weight:400;line-height:2;letter-spacing:.05em; color:rgba(255,255,255,.94);max-width:26em; } .hello-circle p b{font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);} /* ================= service marquee ================= */ .marquee-band{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:20px 0;overflow:hidden;background:var(--paper); } .marquee{display:flex;width:max-content;animation:mq 30s linear infinite;} .marquee-band:hover .marquee{animation-play-state:paused;} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .mq-set{display:flex;align-items:center;} .mq-item{ display:flex;align-items:center;gap:26px;padding:0 26px; font-weight:700;font-size:var(--fs-md);letter-spacing:.12em;white-space:nowrap; } .mq-item svg{flex:none;} @media(prefers-reduced-motion:reduce){.marquee{animation:none;}.hero .watermark{animation:none;}} /* ================= space（全幅照片橫幅｜捲動視差） ================= */ /* 設計稿的圖比版位高 40%（1440×672 放進 1440×480），多出來的高度就是視差的位移量 */ .space-band{ position:relative;height:clamp(240px,33vw,480px); overflow:hidden;background:var(--paper); } .space-band img{ position:absolute;left:0;right:0;top:-20%; width:100%;height:140%;object-fit:cover;object-position:center; will-change:transform; } /* 圖片以比頁面慢的速度移動：版位掃過視窗時，圖在版位內從 -14.3% 位移到 +14.3% （＝版位高度的 ±20%，剛好用完上下多出來的那 40%） */ @keyframes space-parallax{ from{transform:translate3d(0,-14.3%,0);} to{transform:translate3d(0,14.3%,0);} } @supports (animation-timeline:view()){ /* 時間軸掛在版位上（而不是比版位高的圖上），位移才會對齊版位掃過視窗的行程 */ .space-band{view-timeline-name:--space-band;} .space-band img{ animation-name:space-parallax; animation-timing-function:linear; animation-fill-mode:both; animation-duration:auto; /* 捲動時間軸必須是 auto，用簡寫會被寫成 0s 而不會動 */ animation-timeline:--space-band; animation-range:cover 0% cover 100%; } } @media(prefers-reduced-motion:reduce){ .space-band img{animation:none;transform:none;} } /* ================= stats dark band ================= */ .stats{background:var(--dark);color:#fff;padding:96px 0 70px;} /* ================= testimonials (hand-drawn bubbles) ================= */ .testi-head{ margin:0 0 34px;display:flex;align-items:center;gap:14px; } .testi-head .tt{ font-family:var(--en);font-weight:700;font-size:var(--fs-xs);letter-spacing:var(--ls-label); color:var(--amb);text-transform:uppercase; } .testi-head .tz{font-weight:900;font-size:var(--fs-t3);letter-spacing:.08em;color:#fff;} .testi-head .tz small{ display:block;margin-top:6px;font-weight:400;font-size:var(--fs-xs); letter-spacing:.1em;color:#9C9C98; } .testi-head .ln{flex:1;height:1px;background:var(--dark-line);} .testi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} @media(max-width:880px){.testi-row{grid-template-columns:1fr;max-width:520px;}} .testi{ position:relative;padding:40px 38px 90px; transition:transform .35s cubic-bezier(.2,.8,.2,1); } .testi:nth-child(1){transform:rotate(-.6deg);} .testi:nth-child(2){transform:rotate(.5deg);} .testi:nth-child(3){transform:rotate(-.4deg);} .testi:hover{transform:rotate(0deg) translateY(-4px);} .testi .bub{ position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:#9FC3DC; } .testi .bub path{ fill:none;stroke:currentColor;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;filter:url(#pencil); } .testi .qm{ font-family:var(--en);font-weight:800;font-size:34px;line-height:1; color:var(--amb);display:block;margin-bottom:12px; } .testi p{ position:relative;font-size:var(--fs-ss);color:#D6E4EF;font-weight:400;line-height:2;letter-spacing:.04em; } .testi .who{ position:relative;display:block;margin-top:16px; font-size:var(--fs-xs);letter-spacing:.14em;color:var(--amb);font-weight:700; } .testi .who small{display:block;margin-top:3px;font-weight:400;letter-spacing:.1em;color:#8FA6B8;} /* ================= sections base ================= */ section{position:relative;} .sec-pad{padding:120px 0;} .sec-label{ display:inline-flex;align-items:center;gap:12px;margin-bottom:22px; font-family:var(--en);font-weight:700;font-size:var(--fs-xs);letter-spacing:var(--ls-label);color:var(--sea-blue); text-transform:uppercase; } .sec-label::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sea-blue);} .sec-title{font-weight:900;font-size:var(--fs-t2);line-height:1.55;letter-spacing:.05em;} .sec-sub{margin-top:16px;color:var(--ink-soft);font-size:var(--fs-re);max-width:38em;} /* reveal */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);} .reveal.in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}} /* ================= pain cards (課題解決) ================= */ .pains{background:var(--white);} .pain-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start;} @media(max-width:880px){.pain-grid{grid-template-columns:1fr;gap:40px;}} .pain-sticky{position:sticky;top:120px;} @media(max-width:880px){.pain-sticky{position:static;}} /* ================= works light (solutions-style) ================= */ .works-lt{background:var(--paper);border-top:1px solid var(--line);} .works-lt .sec-title small{ display:block;margin-top:8px;font-size:var(--fs-ss);font-weight:400; letter-spacing:.08em;color:var(--ink-soft); } .wl-cards{display:flex;flex-direction:column;gap:18px;} .wl-card{ background:var(--white);border:1px solid var(--line);border-radius:18px; padding:28px 30px 26px;position:relative;text-decoration:none;display:block;color:var(--ink); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s; } .wl-card:hover{transform:translateY(-5px);border-color:var(--sea-blue);box-shadow:0 18px 40px var(--acc-sh);} .wl-card .no{ position:absolute;top:22px;right:26px; font-family:var(--en);font-weight:700;font-size:var(--fs-re);color:var(--sea-blue); } .wl-img{ aspect-ratio:21/9;border-radius:12px;margin-bottom:18px; background:linear-gradient(120deg,color-mix(in srgb,var(--sea-blue),white 78%) 0%,color-mix(in srgb,var(--sea-blue),white 90%) 100%); display:flex;align-items:center;justify-content:center; font-size:var(--fs-2xs);letter-spacing:var(--ls-label);color:var(--sea-blue-deep); } .wl-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;} .wl-tags .chip{ border-color:var(--line);color:var(--ink-soft);background:var(--paper); font-size:var(--fs-2xs);padding:4px 12px; } .wl-card h3{font-weight:900;font-size:var(--fs-t4);letter-spacing:.05em;line-height:1.7;margin-bottom:8px;padding-right:40px;} .wl-card p{font-size:var(--fs-ss);color:var(--ink-soft);line-height:1.95;} .wl-result{ display:block;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line); font-size:var(--fs-xs);color:var(--ink-soft); } .wl-result b{color:var(--sea-blue);font-weight:700;letter-spacing:.08em;} .wl-result .wl-time{display:inline-block;} .wl-result .wl-time b{color:var(--amb-deep);} /* 案例詳細頁尚未上線：卡片維持展示，但不做成假連結 */ .wl-card.soon{cursor:default;} .wl-card.soon:hover{transform:none;border-color:var(--line);box-shadow:none;} .wl-result .wl-note{ display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px; background:var(--paper);border:1px dashed var(--line); font-size:var(--fs-2xs);letter-spacing:.1em;color:var(--ink-soft); } .wl-cta{ border:1.5px dashed color-mix(in srgb,var(--sea-blue),white 45%);border-radius:18px; padding:30px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; text-decoration:none;color:var(--ink);transition:border-color .3s,background .3s; } .wl-cta:hover{border-color:var(--sea-blue);background:var(--white);} .wl-cta .t{font-weight:900;font-size:var(--fs-t4);letter-spacing:.06em;} .wl-cta .t small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--ink-soft);letter-spacing:.1em;margin-top:6px;} .wl-cta .cir{ flex:none;width:50px;height:50px;border-radius:50%;background:var(--amb);color:#1C2B36; display:flex;align-items:center;justify-content:center;font-size:var(--fs-t4);transition:transform .3s; } .wl-cta:hover .cir{transform:translateX(6px);} /* ================= services (dark) ================= */ .services{background:var(--dark);color:#fff;} .services .sec-title{color:#fff;} .services .sec-sub{color:#B9B9B4;} /* 三張服務卡等寬並排；卡片內為「圖示＋標題」橫向排列 */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:stretch;} @media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:700px){.svc-grid{grid-template-columns:1fr;}} .svc-card{ background:var(--dark-2);border:1px solid var(--dark-line);border-radius:18px; padding:36px 26px 30px;position:relative;overflow:hidden; display:flex;flex-direction:column; transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s; } .svc-card:hover{transform:translateY(-5px);border-color:var(--sea-blue);} .svc-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;} .svc-ttl{min-width:0;} .svc-card .en-tag{ font-family:var(--en);font-weight:700;font-size:var(--fs-2xs);letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--sea-blue);display:block;margin-top:4px; } .svc-card h3{font-weight:900;font-size:var(--fs-t4);letter-spacing:.05em;line-height:1.4;color:#fff;} .svc-card p{font-size:var(--fs-ss);color:#B9B9B4;font-weight:400;} .svc-card .main-flag,.svc-card .hot-flag{ position:absolute;top:0;right:0;background:var(--sea-blue);color:#fff; font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--ls-label);padding:7px 18px 7px 22px; border-radius:0 0 0 14px; } /* 「適合」與說明之間以一條分隔線隔開，並固定貼齊卡片底部 */ .svc-lang{ margin-top:auto;padding-top:22px;border-top:1px solid var(--dark-line); display:flex;flex-direction:column;gap:6px; font-size:var(--fs-ss);color:#B9B9B4; } .svc-lang .lang-label{ font-size:var(--fs-2xs);letter-spacing:.2em;color:var(--sea-blue);font-weight:600; } .svc-lang .lang-list{color:#D6D6D2;letter-spacing:.05em;} .chip{ border:1px solid #4A4A4A;border-radius:999px;padding:5px 16px; font-size:var(--fs-xs);letter-spacing:.14em;color:#D6D6D2;font-weight:500; } .chip.on{background:var(--sea-blue);border-color:var(--sea-blue);color:#fff;font-weight:700;} /* 服務範圍標籤列：設計稿改放在說明之後、卡片之前，靠左排列 */ .svc-tags{ margin-top:26px; } .svc-tags .tag-row{display:flex;flex-wrap:wrap;gap:10px;} .svc-aside{ margin-top:40px;text-align:center; font-size:var(--fs-ss);color:var(--on-dark);line-height:1.95;letter-spacing:.06em; } .svc-aside b{color:#fff;font-weight:700;} .svc-cta{margin-top:40px;text-align:center;} /* ================= process ================= */ .process{background:var(--paper);} .steps{margin-top:60px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;} @media(max-width:920px){.steps{grid-template-columns:1fr;max-width:560px;}} .steps::before{ content:"";position:absolute;top:33px;left:8%;right:8%;height:1px; background:var(--line); } @media(max-width:920px){.steps::before{left:33px;right:auto;top:8%;bottom:8%;width:1px;height:auto;}} .step{position:relative;padding:0 18px;text-align:center;} @media(max-width:920px){ .step{display:grid;grid-template-columns:66px 1fr;gap:20px;text-align:left;padding:22px 0;align-items:start;} } .step .no{ width:66px;height:66px;border-radius:50%;margin:0 auto 20px; background:var(--white);border:1px solid var(--line);color:var(--ink); font-family:var(--en);font-weight:800;font-size:var(--fs-lg); display:flex;align-items:center;justify-content:center;position:relative;z-index:2; transition:background .3s,color .3s,border-color .3s,transform .35s; } @media(max-width:920px){.step .no{margin:0;}} .step:hover .no{background:var(--sea-blue);border-color:var(--sea-blue);color:#fff;transform:scale(1.08);} .step h3{font-weight:900;font-size:var(--fs-lg);letter-spacing:.08em;margin-bottom:8px;} .step h3 .en{display:block;font-family:var(--en);font-weight:700;font-size:var(--fs-2xs);letter-spacing:var(--ls-label);color:var(--sea-blue);text-transform:uppercase;margin-bottom:6px;} .step p{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.95;text-align:left;} .step .bdg{ display:inline-block;margin-top:12px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em; border-radius:999px;padding:4px 14px; } .step .bdg.free{background:#EAF3EC;color:#2E7D4F;} .step .bdg.paid{background:color-mix(in srgb,var(--sea-blue),white 88%);color:var(--sea-blue-deep);} .mq-item svg circle,.mq-item svg rect{stroke:var(--sea-blue);} .mq-item svg path{fill:var(--sea-blue);} /* ================= works (實戰案例) ================= */ .works{background:var(--dark);color:#fff;} .works .sec-title{color:#fff;} .works .sec-sub{color:#B9B9B4;} .wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:54px;} @media(max-width:840px){.wk-grid{grid-template-columns:1fr;}} .wk-card{ background:var(--dark-2);border:1px solid var(--dark-line);border-radius:18px;overflow:hidden; display:flex;flex-direction:column;text-decoration:none;color:#fff; transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s; } .wk-card:hover{transform:translateY(-6px);border-color:var(--sea-blue);} .wk-img{ aspect-ratio:16/9;position:relative; display:flex;align-items:center;justify-content:center; font-size:var(--fs-2xs);letter-spacing:var(--ls-label);color:rgba(255,255,255,.7); } .wk-img.g1{background:linear-gradient(135deg,var(--sea-blue) 0%,color-mix(in srgb,var(--sea-blue),black 35%) 100%);} .wk-img.g2{background:linear-gradient(135deg,color-mix(in srgb,var(--dark),white 30%) 0%,var(--dark) 100%);} .wk-body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;flex:1;} .wk-tags{display:flex;flex-wrap:wrap;gap:8px;} .wk-tags .chip{font-size:var(--fs-2xs);padding:4px 12px;} .wk-body h3{font-weight:900;font-size:var(--fs-t4);letter-spacing:.05em;line-height:1.7;} .wk-body p{font-size:var(--fs-ss);color:#B9B9B4;line-height:1.95;} .wk-result{ margin-top:auto;padding-top:14px;border-top:1px dashed var(--dark-line); font-size:var(--fs-xs);color:#D6D6D2; } .wk-result b{color:var(--sea-blue);font-weight:700;letter-spacing:.08em;} .wk-cta{ margin-top:24px;border:1.5px dashed var(--dark-line);border-radius:18px; padding:34px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; text-decoration:none;color:#fff;transition:border-color .3s,background .3s; } .wk-cta:hover{border-color:var(--sea-blue);background:var(--dark-2);} .wk-cta .t{font-weight:900;font-size:var(--fs-t4);letter-spacing:.06em;} .wk-cta .t small{display:block;font-weight:400;font-size:var(--fs-xs);color:#B9B9B4;letter-spacing:.1em;margin-top:6px;} .wk-cta .cir{ flex:none;width:52px;height:52px;border-radius:50%;background:var(--sea-blue);color:#fff; display:flex;align-items:center;justify-content:center;font-size:var(--fs-t4);transition:transform .3s; } .wk-cta:hover .cir{transform:translateX(6px);} /* ================= amber 琥珀點綴 ================= */ /* 首頁刻意使用較亮的琥珀（其餘頁面用 tokens.css 的 #FFBB44）。 若要全站統一，刪掉這一行即可。 */ body{--amb:#FFC93C;--amb-deep:#C7920A;} .sec-label::before{background:var(--amb);} .sec-label{color:var(--sea-blue-deep);} .svc-card .hot-flag{background:var(--amb);color:#1C2B36;} .mq-item svg path{fill:var(--amb);} .tk-item .d{color:var(--amb-deep);} .news .nt{color:var(--amb-deep);} .strip.s3{background:linear-gradient(120deg,#FFE08A 0%,#FFC93C 55%,#E8AC12 100%);} .strip.s3 span{color:rgba(78,55,10,.6);} .step .bdg.paid{background:#FFF3C4;color:#A87F00;} .wk-cta .cir{background:var(--amb);color:#1C2B36;} .wk-result b{color:var(--amb);} .hello-circle .hi::after{ content:"";display:block;width:52px;height:4px;border-radius:2px; background:var(--amb);margin:16px auto 0; } /* ================= pencil sketch decorations ================= */ .deco{position:absolute;pointer-events:none;z-index:0;color:var(--deco);} .deco path,.deco circle,.deco line{ fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; filter:url(#pencil); } .deco .amb{color:#FFD668;} .deco-hero{left:0;right:0;bottom:-6px;width:100%;height:150px;opacity:.75;} .deco-sun{top:12%;left:6%;width:clamp(84px,10vw,132px);height:auto;opacity:.85;} .deco-sun .sun-rays{transform-origin:60px 60px;animation:sunSpin 26s linear infinite;} .deco-boat{top:20%;right:7%;width:clamp(120px,15vw,190px);height:auto;opacity:.85;} .deco-boat .boat-body{transform-origin:88px 96px;animation:boatBob 5s ease-in-out infinite;} .deco-boat .boat-wave{animation:waveShift 5s ease-in-out infinite;} @keyframes sunSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes boatBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-6px) rotate(1.5deg)}} @keyframes waveShift{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}} @media(max-width:760px){.deco-sun,.deco-boat{display:none;}} @media(prefers-reduced-motion:reduce){ .deco-sun .sun-rays,.deco-boat .boat-body,.deco-boat .boat-wave{animation:none;} } .deco-gulls{top:16%;right:8%;width:180px;height:90px;opacity:.8;} .deco-hello-l{left:2%;bottom:12%;width:200px;height:150px;opacity:.7;} .deco-hello-r{right:3%;top:14%;width:150px;height:150px;opacity:.7;} .deco-contact{left:0;right:0;bottom:0;width:100%;height:170px;opacity:.65;} .deco-process{right:3%;top:110px;width:150px;height:190px;opacity:.55;} @media(max-width:760px){.deco-gulls,.deco-hello-l,.deco-hello-r,.deco-process{display:none;}} .step .bdg.plain{background:#EFEEEA;color:var(--ink-soft);} .process-note{ margin-top:46px;text-align:center;font-size:var(--fs-ss);color:var(--ink-soft); } .process-note b{color:var(--sea-blue);font-weight:700;} /* ================= contact ================= */ .contact{background:var(--white);text-align:center;padding:130px 0 110px;position:relative;overflow:hidden;} .contact .mini-circle{ width:110px;height:110px;border-radius:50%;background:var(--sea-blue);margin:0 auto 30px; display:flex;align-items:center;justify-content:center;color:#fff; font-weight:900;font-size:var(--fs-re);letter-spacing:.1em;line-height:1.6; box-shadow:0 14px 34px var(--acc-sh);position:relative; } .contact .mini-circle::after{ content:"";position:absolute;left:6px;bottom:2px;width:22px;height:22px; background:var(--sea-blue);border-radius:50% 50% 0 50%;transform:rotate(35deg);z-index:-1; } .contact h2{font-weight:900;font-size:var(--fs-t2);letter-spacing:.06em;line-height:1.7;} .contact h2 .rd{color:var(--sea-blue);} .contact p.note{margin:20px auto 44px;color:var(--ink-soft);font-size:var(--fs-re);max-width:34em;} .c-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;} .btn{ display:inline-flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;border:none; font-family:var(--sans);font-weight:700;font-size:var(--fs-re);letter-spacing:.12em; padding:17px 36px;border-radius:999px; transition:transform .3s,background .25s,color .25s,box-shadow .3s; } .btn-primary{background:var(--sea-blue);color:#fff;box-shadow:0 10px 26px var(--acc-sh);} .btn-primary:hover{background:var(--sea-blue-deep);transform:translateY(-3px);} .btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink);} .btn-line:hover{background:var(--ink);color:#fff;transform:translateY(-3px);} /* 次要按鈕（外框），與 LINE 按鈕區分開來 */ .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);} .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-3px);} .btn .ar{transition:transform .3s;} .btn:hover .ar{transform:translateX(5px);} .contact .fine{margin-top:30px;font-size:var(--fs-xs);letter-spacing:.12em;color:var(--ink-soft);} /* ================= FAQ（對應 FAQPage schema，內容需一致） ================= */ .faq-sec{background:var(--paper);border-top:1px solid var(--line);} .faq{margin-top:44px;display:flex;flex-direction:column;gap:14px;} .faq details{ border:1px solid var(--line);border-radius:14px;padding:0 24px;background:var(--white); transition:border-color .25s; } .faq details[open]{border-color:var(--sea-blue);} .faq summary{ list-style:none;cursor:pointer;padding:20px 0;font-weight:700;font-size:var(--fs-md);letter-spacing:.03em; display:flex;align-items:center;justify-content:space-between;gap:16px; } .faq summary::-webkit-details-marker{display:none;} .faq summary .ic{ flex:none;width:26px;height:26px;border-radius:50%;background:var(--sea-blue);color:#fff; display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);transition:transform .25s; } .faq details[open] summary .ic{transform:rotate(45deg);} .faq details p{font-size:var(--fs-re);line-height:1.95;color:var(--ink-soft);padding:0 0 22px;margin:0;} .faq details p a{color:var(--sea-blue-deep);font-weight:700;} /* 頁尾樣式已抽至共用 /css/header.css（於 內引用） */ /* ================= inquiry form ================= */ .inquiry{background:var(--paper);padding:120px 0 130px;position:relative;overflow:hidden;scroll-margin-top:64px;} .inq-head{text-align:center;max-width:44em;margin:0 auto 44px;position:relative;z-index:1;} .inq-head .mini-circle{ width:110px;height:110px;border-radius:50%;background:var(--sea-blue);margin:0 auto 30px; display:flex;align-items:center;justify-content:center;color:#fff; font-weight:900;font-size:var(--fs-re);letter-spacing:.1em;line-height:1.6; box-shadow:0 14px 34px var(--acc-sh);position:relative; } .inq-head .mini-circle::after{ content:"";position:absolute;left:6px;bottom:2px;width:22px;height:22px; background:var(--sea-blue);border-radius:50% 50% 0 50%;transform:rotate(35deg);z-index:-1; } .inq-head .rd{color:var(--sea-blue);} .inq-head .sec-sub{margin-left:auto;margin-right:auto;} .inq-alt{position:relative;z-index:1;text-align:center;margin-top:30px;} .inq-alt .fine{margin-top:18px;font-size:var(--fs-xs);letter-spacing:.12em;color:var(--ink-soft);} .inq-card{ position:relative;z-index:1;max-width:720px;margin:0 auto;background:var(--white); border:1px solid var(--line);border-radius:24px; padding:clamp(26px,5vw,52px);box-shadow:0 24px 60px rgba(0,0,0,.07); } .inq-progress{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:36px;} .inq-steps{display:flex;align-items:center;flex:1;max-width:190px;} .istep{ width:32px;height:32px;border-radius:50%;flex:none;border:1.5px solid var(--line);background:var(--white); display:flex;align-items:center;justify-content:center;font-family:var(--en);font-weight:700;font-size:var(--fs-sm);color:var(--ink-soft);transition:.3s; } .istep.on{background:var(--sea-blue);border-color:var(--sea-blue);color:#fff;} .iline{flex:1;height:2px;background:var(--line);margin:0 10px;border-radius:2px;position:relative;overflow:hidden;} .iline i{position:absolute;inset:0;background:var(--sea-blue);transform:scaleX(0);transform-origin:left;transition:transform .45s;} .iline.on i{transform:scaleX(1);} .inq-count{font-family:var(--en);font-weight:700;font-size:var(--fs-xs);letter-spacing:.18em;color:var(--ink-soft);white-space:nowrap;} .inq-count b{color:var(--sea-blue);} .q{margin-bottom:28px;} .q:last-child{margin-bottom:0;} .q-label{display:block;font-weight:900;font-size:var(--fs-md);letter-spacing:.03em;line-height:1.7;margin-bottom:8px;} .q-label .req{ font-family:var(--sans);font-weight:700;font-size:var(--fs-2xs);letter-spacing:.1em;margin-left:9px; padding:2px 9px;border-radius:999px;vertical-align:2px;white-space:nowrap; background:color-mix(in srgb,var(--sea-blue),white 86%);color:var(--sea-blue-deep); } .q-label .req.is-opt{background:#EEEDE9;color:var(--ink-soft);} .q-hint{font-size:var(--fs-xs);color:var(--ink-soft);margin:-2px 0 12px;line-height:1.8;} .q-input{ width:100%;font-family:var(--sans);font-size:var(--fs-re);color:var(--ink);line-height:1.7; background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:13px 16px; transition:border-color .25s,background .25s,box-shadow .25s; } .q-input::placeholder{color:color-mix(in srgb,var(--ink-soft),white 22%);} .q-input:focus{outline:none;border-color:var(--sea-blue);background:var(--white);box-shadow:0 0 0 4px var(--acc-sh);} textarea.q-input{resize:vertical;min-height:92px;} .opts{display:flex;flex-wrap:wrap;gap:10px;} .opts.col{flex-direction:column;flex-wrap:nowrap;} .opt{ position:relative;display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none; border:1.5px solid var(--line);border-radius:12px;padding:12px 18px;background:var(--white); font-size:var(--fs-ss);font-weight:500;letter-spacing:.02em;line-height:1.55;color:var(--ink); transition:border-color .2s,background .2s,color .2s,transform .2s; } .opts.col .opt{border-radius:14px;} .opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;} .opt:hover{border-color:var(--sea-blue);transform:translateY(-1px);} .opt.sel{background:var(--sea-blue);border-color:var(--sea-blue);color:#fff;font-weight:700;} .opt.sel:hover{background:var(--sea-blue-deep);} .reveal-field{margin-top:10px;} .reveal-field[hidden]{display:none;} .q-err{display:none;margin-top:10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;color:var(--sea-blue-deep);} .q.bad .q-err{display:block;} .q.bad .q-input{border-color:var(--sea-blue);background:color-mix(in srgb,var(--sea-blue),white 93%);} .q.bad .opts{animation:inqShake .3s;} .reveal-field.bad .q-input{border-color:var(--sea-blue);background:color-mix(in srgb,var(--sea-blue),white 93%);} @keyframes inqShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} @media(prefers-reduced-motion:reduce){.q.bad .opts{animation:none;}} .inq-nav{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid var(--line);} .inq-btn{ font-family:var(--sans);font-weight:700;font-size:var(--fs-sm);letter-spacing:.1em;cursor:pointer; padding:14px 30px;border-radius:999px;border:1.5px solid transparent;transition:.25s; } .inq-btn.solid{background:var(--sea-blue);color:#fff;box-shadow:0 10px 24px var(--acc-sh);margin-left:auto;} .inq-btn.solid:hover{background:var(--sea-blue-deep);transform:translateY(-2px);} .inq-btn.ghost{background:transparent;color:var(--ink-soft);border-color:var(--line);} .inq-btn.ghost:hover{color:var(--ink);border-color:var(--ink);} .inq-btn[hidden]{display:none;} .inq-done{text-align:center;padding:20px 0 8px;} .inq-done .done-circle{ width:104px;height:104px;border-radius:50%;background:var(--sea-blue);margin:0 auto 26px;position:relative; display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:var(--fs-md);line-height:1.5;letter-spacing:.08em; box-shadow:0 16px 36px var(--acc-sh); } .inq-done .done-circle::after{content:"";position:absolute;left:6px;bottom:2px;width:20px;height:20px;background:var(--sea-blue);border-radius:50% 50% 0 50%;transform:rotate(35deg);z-index:-1;} .inq-done h3{font-weight:900;font-size:var(--fs-t3);letter-spacing:.06em;margin-bottom:14px;} .inq-done p{font-size:var(--fs-sm);color:var(--ink-soft);line-height:2;} .inq-done p b{color:var(--sea-blue);font-weight:700;} .done-book{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);} .done-book .bk-note{font-size:var(--fs-ss);color:var(--ink-soft);margin-bottom:18px;} .done-book .btn{cursor:pointer;} @media(max-width:520px){ .inq-progress{margin-bottom:28px;} .opt{padding:11px 15px;font-size:var(--fs-ss);} .inq-btn{padding:13px 22px;font-size:var(--fs-ss);} } /* ================= 手繪圖示 c-ico ================= */ /* fill/stroke 系列是可繼承的 presentation property，設在 .c-ico 上會傳進 的 shadow tree； filter 不可繼承、外部選擇器也選不到 shadow tree，因此筆觸濾鏡與琥珀色寫在 partials/icons.html 內。 */ .c-ico{ width:56px;height:56px;display:block;margin-bottom:18px; color:var(--deco);transition:color .3s ease; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; } .svc-card .c-ico{width:64px;height:64px;flex:none;margin-bottom:0;} /* svc-card 底色是 --dark-2，hover 用 --white 才看得見 */ .svc-card:hover .c-ico{color:var(--white);} @media(prefers-reduced-motion:reduce){.c-ico{transition:none;}}