{"id":8,"date":"2026-08-11T23:49:58","date_gmt":"2026-08-11T15:49:58","guid":{"rendered":"https:\/\/cpd.tw\/?page_id=8"},"modified":"2026-08-11T23:59:12","modified_gmt":"2026-08-11T15:59:12","slug":"coming-soon","status":"publish","type":"page","link":"https:\/\/cpd.tw\/","title":{"rendered":"Coming Soon"},"content":{"rendered":"\n<div class=\"cs-stage\" id=\"cs-stage\" aria-labelledby=\"cs-title\">\n  <div class=\"cs-sky\" aria-hidden=\"true\"><\/div>\n  <div class=\"cs-glow\" aria-hidden=\"true\"><\/div>\n  <div class=\"cs-orb cs-orb--one\" aria-hidden=\"true\"><\/div>\n  <div class=\"cs-orb cs-orb--two\" aria-hidden=\"true\"><\/div>\n\n  <main class=\"cs-content\">\n    <p class=\"cs-kicker\">Content Production Digital<\/p>\n    <h1 class=\"cs-title\" id=\"cs-title\" aria-label=\"Coming Soon\">\n      <span class=\"cs-word\" aria-hidden=\"true\">\n        <span style=\"--i:0\">C<\/span><span style=\"--i:1\">o<\/span><span style=\"--i:2\">m<\/span><span style=\"--i:3\">i<\/span><span style=\"--i:4\">n<\/span><span style=\"--i:5\">g<\/span>\n      <\/span>\n      <span class=\"cs-word\" aria-hidden=\"true\">\n        <span style=\"--i:6\">S<\/span><span style=\"--i:7\">o<\/span><span style=\"--i:8\">o<\/span><span style=\"--i:9\">n<\/span>\n      <\/span>\n    <\/h1>\n    <p class=\"cs-tagline\">Something fresh is making waves.<\/p>\n  <\/main>\n\n  <div class=\"cs-water\" aria-hidden=\"true\">\n    <div class=\"cs-wave cs-wave--back\">\n      <svg viewBox=\"0 0 1440 420\" preserveAspectRatio=\"none\">\n        <path d=\"M-120 194C120 58 302 319 555 178c235-131 387 64 611-36 166-74 272-30 394 61v260H-120Z\"\/>\n      <\/svg>\n    <\/div>\n    <div class=\"cs-wave cs-wave--mid\">\n      <svg viewBox=\"0 0 1440 420\" preserveAspectRatio=\"none\">\n        <path d=\"M-140 235C70 86 284 315 518 221c220-88 354 58 564-54 172-92 331-42 498 88v208H-140Z\"\/>\n      <\/svg>\n    <\/div>\n    <div class=\"cs-wave cs-wave--front\">\n      <svg viewBox=\"0 0 1440 420\" preserveAspectRatio=\"none\">\n        <path d=\"M-160 265C28 136 261 333 472 251c238-92 361 84 596-34 192-96 365-23 532 92v154H-160Z\"\/>\n      <\/svg>\n    <\/div>\n    <div class=\"cs-foam cs-foam--one\"><\/div>\n    <div class=\"cs-foam cs-foam--two\"><\/div>\n  <\/div>\n\n  <div class=\"cs-ripples\" aria-hidden=\"true\"><\/div>\n  <button class=\"cs-motion\" type=\"button\" hidden>\n    <span class=\"cs-motion__icon\">\u25cc<\/span>\n    Enable motion\n  <\/button>\n  <p class=\"cs-hint\" aria-hidden=\"true\">Move to make waves<\/p>\n<\/div>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@500;600&family=Fredoka:wght@600;700&display=swap');\n\n:root { --cs-teal-950:#042f2e; --cs-teal-800:#115e59; --cs-teal-600:#0d9488; --cs-teal-500:#14b8a6; --cs-teal-300:#5eead4; --cs-teal-100:#ccfbf1; }\nhtml:has(.cs-stage), body:has(.cs-stage) { margin:0!important; overflow:hidden!important; }\nbody:has(.cs-stage) > *:not(.wp-site-blocks) { display:none!important; }\nbody:has(.cs-stage) .wp-site-blocks > * { visibility:hidden!important; }\n.cs-stage, .cs-stage * { box-sizing:border-box; visibility:visible!important; }\n.cs-stage {\n  --mx:0; --my:0; --tx:0; --ty:0; --energy:0;\n  position:fixed; inset:0; z-index:999999; overflow:hidden; isolation:isolate;\n  width:100vw!important; max-width:none!important; margin:0!important;\n  min-height:100svh; color:var(--cs-teal-950);\n  background:linear-gradient(155deg,#fff 4%,#f0fdfa 43%,#d9fbf5 100%);\n  font-family:\"DM Sans\",system-ui,sans-serif;\n  cursor:crosshair; touch-action:pan-y;\n}\n.cs-sky {\n  position:absolute; inset:-12%; z-index:-5;\n  background:\n    radial-gradient(circle at calc(64% + var(--mx)*5%) calc(22% + var(--my)*4%),rgba(255,255,255,.98) 0 6%,transparent 26%),\n    radial-gradient(circle at calc(30% + var(--mx)*-4%) 35%,rgba(94,234,212,.28),transparent 24%),\n    linear-gradient(145deg,#fff 10%,#f0fdfa 55%,#ccfbf1);\n  transform:translate3d(calc(var(--mx)*-7px),calc(var(--my)*-5px),0) scale(1.04);\n}\n.cs-glow {\n  position:absolute; width:42rem; aspect-ratio:1; left:50%; top:46%; z-index:-4;\n  border-radius:50%; pointer-events:none; filter:blur(34px);\n  background:radial-gradient(circle,rgba(45,212,191,.28),rgba(94,234,212,.12) 32%,transparent 70%);\n  transform:translate3d(calc(-50% + var(--mx)*52px),calc(-50% + var(--my)*35px),0) scale(calc(1 + var(--energy)*.08));\n}\n.cs-orb {\n  position:absolute; z-index:-3; border:1px solid rgba(20,184,166,.18); border-radius:50%;\n  background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(94,234,212,.08));\n  box-shadow:inset -14px -14px 32px rgba(13,148,136,.06),inset 10px 10px 24px #fff,0 16px 50px rgba(13,148,136,.08);\n  backdrop-filter:blur(3px); animation:cs-float 7s ease-in-out infinite;\n}\n.cs-orb--one { width:clamp(5rem,10vw,9rem); aspect-ratio:1; left:8%; top:14%; transform:translate3d(calc(var(--mx)*-18px),calc(var(--my)*-15px),0); }\n.cs-orb--two { width:clamp(3rem,6vw,5rem); aspect-ratio:1; right:10%; top:22%; animation-delay:-3s; transform:translate3d(calc(var(--mx)*26px),calc(var(--my)*18px),0); }\n.cs-content {\n  position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center;\n  padding:1.5rem 1.5rem 17vh; text-align:center; pointer-events:none;\n  transform:perspective(900px) rotateX(calc(var(--my)*-2.3deg)) rotateY(calc(var(--mx)*3.2deg)) translate3d(calc(var(--mx)*10px),calc(var(--my)*7px),0);\n}\n.cs-kicker {\n  margin:0 0 clamp(1rem,2.5vw,1.6rem); color:var(--cs-teal-800); font-size:clamp(.7rem,1.2vw,.9rem);\n  font-weight:600; letter-spacing:.24em; text-transform:uppercase;\n}\n.cs-kicker::before,.cs-kicker::after { content:\"\"; display:inline-block; width:2.2em; height:1px; margin:0 .8em .28em; background:currentColor; opacity:.38; }\n.cs-title {\n  display:flex; flex-wrap:wrap; justify-content:center; gap:.1em .28em; margin:0; color:var(--cs-teal-950);\n  font:700 clamp(4rem,13vw,10.5rem)\/.82 \"Fredoka\",sans-serif; letter-spacing:-.065em;\n  text-shadow:0 .035em 0 #fff,0 .075em 0 rgba(45,212,191,.35),0 .13em .22em rgba(15,118,110,.17);\n  filter:drop-shadow(0 20px 22px rgba(13,148,136,.08));\n}\n.cs-word { display:inline-flex; white-space:nowrap; }\n.cs-word > span {\n  display:inline-block; transform-origin:50% 85%;\n  animation:cs-letter 3.4s cubic-bezier(.45,0,.25,1) calc(var(--i)*-.12s) infinite;\n}\n.cs-tagline { margin:clamp(1.5rem,3.8vw,2.5rem) 0 0; color:var(--cs-teal-800); font-size:clamp(.95rem,1.8vw,1.2rem); letter-spacing:.055em; }\n.cs-water { position:absolute; inset:auto -7% -8% -7%; height:min(46vh,34rem); z-index:3; perspective:700px; pointer-events:none; }\n.cs-wave { position:absolute; inset:0 -12% -15%; transform-origin:50% 100%; will-change:transform; }\n.cs-wave svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 -10px 24px rgba(13,148,136,.1)); }\n.cs-wave--back { opacity:.7; transform:translate3d(calc(var(--mx)*-16px),calc(var(--my)*8px),-80px) rotateX(7deg); animation:cs-drift-back 10s ease-in-out infinite alternate; }\n.cs-wave--back path { fill:url(\"#none\"); fill:#99f6e4; }\n.cs-wave--mid { opacity:.9; transform:translate3d(calc(var(--mx)*25px),calc(var(--my)*14px),-30px) rotateX(5deg); animation:cs-drift-mid 8s ease-in-out infinite alternate; }\n.cs-wave--mid path { fill:#2dd4bf; }\n.cs-wave--front { transform:translate3d(calc(var(--mx)*-35px),calc(var(--my)*22px),20px) rotateX(3deg); animation:cs-drift-front 6s ease-in-out infinite alternate; }\n.cs-wave--front path { fill:#0f766e; }\n.cs-foam { position:absolute; left:-8%; width:116%; height:13%; border-radius:50%; filter:blur(1px); opacity:.58; }\n.cs-foam--one { top:48%; border-top:3px solid rgba(255,255,255,.78); transform:rotate(-2deg) translateX(calc(var(--mx)*20px)); }\n.cs-foam--two { top:59%; border-top:1px solid rgba(255,255,255,.55); transform:rotate(2deg) translateX(calc(var(--mx)*-26px)); }\n.cs-ripples { position:absolute; inset:0; z-index:8; overflow:hidden; pointer-events:none; }\n.cs-ripple { position:absolute; width:1rem; height:1rem; margin:-.5rem; border:2px solid rgba(13,148,136,.42); border-radius:50%; animation:cs-ripple .9s ease-out forwards; }\n.cs-motion {\n  position:absolute; z-index:20; left:50%; bottom:1.25rem; transform:translateX(-50%);\n  border:1px solid rgba(15,118,110,.2); border-radius:999px; padding:.7rem 1rem; color:var(--cs-teal-800);\n  background:rgba(255,255,255,.72); box-shadow:0 8px 30px rgba(15,118,110,.1);\n  font:600 .76rem\/1 \"DM Sans\",sans-serif; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(10px); cursor:pointer;\n}\n.cs-motion:hover { background:#fff; transform:translateX(-50%) translateY(-2px); }\n.cs-motion__icon { display:inline-block; margin-right:.4rem; font-size:1.1em; animation:cs-spin 2.4s linear infinite; }\n.cs-hint { position:absolute; z-index:12; right:1.25rem; bottom:1rem; margin:0; color:rgba(4,47,46,.48); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }\n\n@keyframes cs-letter { 0%,100%{transform:translateY(0) rotate(0)} 42%{transform:translateY(-.055em) rotate(-1deg)} 62%{transform:translateY(.025em) rotate(1deg)} }\n@keyframes cs-float { 0%,100%{margin-top:0} 50%{margin-top:-18px} }\n@keyframes cs-drift-back { to{margin-left:-4%; margin-bottom:1.4%} }\n@keyframes cs-drift-mid { to{margin-left:3%; margin-bottom:-1%} }\n@keyframes cs-drift-front { to{margin-left:-2%; margin-bottom:1.6%} }\n@keyframes cs-ripple { to{width:14rem;height:14rem;margin:-7rem;opacity:0;border-width:1px} }\n@keyframes cs-spin { to{transform:rotate(360deg)} }\n\n@media (max-width:700px) {\n  .cs-content { padding-bottom:22vh; }\n  .cs-title { font-size:clamp(3.8rem,20vw,6.6rem); line-height:.88; gap:.2em; }\n  .cs-kicker::before,.cs-kicker::after { width:1.2em; }\n  .cs-water { height:39vh; bottom:-3%; }\n  .cs-orb--one { left:-2%; top:10%; }\n  .cs-hint { display:none; }\n}\n@media (prefers-reduced-motion:reduce) {\n  .cs-stage * { animation-duration:.001ms!important; animation-iteration-count:1!important; transition:none!important; }\n  .cs-stage { --mx:0!important; --my:0!important; --energy:0!important; }\n  .cs-motion,.cs-hint { display:none!important; }\n}\n<\/style>\n\n<script>\n(() => {\n  const stage = document.getElementById('cs-stage');\n  if (!stage || stage.dataset.ready) return;\n  stage.dataset.ready = 'true';\n  const ripples = stage.querySelector('.cs-ripples');\n  const motionButton = stage.querySelector('.cs-motion');\n  const reduced = matchMedia('(prefers-reduced-motion: reduce)');\n  const state = { x:0, y:0, tx:0, ty:0, energy:0, targetEnergy:0, raf:0, paused:false };\n\n  const clamp = (n,min,max) => Math.max(min,Math.min(max,n));\n  const setTarget = (x,y) => {\n    state.tx = clamp((x \/ innerWidth - .5) * 2,-1,1);\n    state.ty = clamp((y \/ innerHeight - .5) * 2,-1,1);\n    state.targetEnergy = .8;\n  };\n  const frame = () => {\n    if (!state.paused && !reduced.matches) {\n      state.x += (state.tx-state.x)*.065;\n      state.y += (state.ty-state.y)*.065;\n      state.energy += (state.targetEnergy-state.energy)*.08;\n      state.targetEnergy *= .96;\n      stage.style.setProperty('--mx',state.x.toFixed(4));\n      stage.style.setProperty('--my',state.y.toFixed(4));\n      stage.style.setProperty('--energy',state.energy.toFixed(4));\n    }\n    state.raf=requestAnimationFrame(frame);\n  };\n  const ripple = (x,y) => {\n    if (reduced.matches) return;\n    const el=document.createElement('i');\n    el.className='cs-ripple'; el.style.left=x+'px'; el.style.top=y+'px';\n    ripples.appendChild(el); el.addEventListener('animationend',()=>el.remove(),{once:true});\n    state.targetEnergy=1;\n  };\n\n  stage.addEventListener('pointermove',e=>setTarget(e.clientX,e.clientY),{passive:true});\n  stage.addEventListener('pointerdown',e=>ripple(e.clientX,e.clientY),{passive:true});\n  stage.addEventListener('pointerleave',()=>{state.tx=0;state.ty=0});\n  document.addEventListener('visibilitychange',()=>{state.paused=document.hidden});\n\n  const orient = e => {\n    if (e.gamma == null || e.beta == null) return;\n    state.tx=clamp(e.gamma\/28,-1,1);\n    state.ty=clamp((e.beta-45)\/35,-1,1);\n    state.targetEnergy=.45;\n  };\n  const enableOrientation = async () => {\n    try {\n      if (typeof DeviceOrientationEvent.requestPermission==='function') {\n        const result=await DeviceOrientationEvent.requestPermission();\n        if (result!=='granted') return;\n      }\n      addEventListener('deviceorientation',orient,{passive:true});\n      motionButton.hidden=true;\n    } catch (_) {\n      motionButton.textContent='Motion unavailable';\n      setTimeout(()=>motionButton.hidden=true,1600);\n    }\n  };\n  if ('DeviceOrientationEvent' in window) {\n    if (typeof DeviceOrientationEvent.requestPermission==='function') {\n      motionButton.hidden=false;\n      motionButton.addEventListener('click',enableOrientation);\n    } else {\n      enableOrientation();\n    }\n  }\n  state.raf=requestAnimationFrame(frame);\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Content Production Digital Coming Soon Something fresh  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cpd.tw\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cpd.tw\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cpd.tw\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cpd.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cpd.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":3,"href":"https:\/\/cpd.tw\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/cpd.tw\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/cpd.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}