/* ========================================================= prisma.css — 封面（index.html）專用：深色電影感 Prisma 排版只作用於，不影響其他 5 頁。表單彈窗 / 過場 / app.js 仍沿用 styles.css。 ========================================================= */ :root{ --px-bg:#FBF8F1; /* 紙底（與其他頁一致） */ --px-about:#F5F1E8; /* About 卡片底 */ --px-feat:#FFFFFF; /* Feature 卡片底 */ --px-ink:#E1E0CC; /* Hero 影片上的淺色字 */ --px-dark:#3A3633; /* 內容區主深色字 */ --px-dark-2:#5C564E; /* 內容區次深色字 */ --px-primary:#E96F4A; /* 品牌橘・強調 */ --px-navlink:rgba(225,224,204,.85); --px-gray400:#5C564E; --px-gray500:#8A8378; } /* ---------- 全域底色與字體 ---------- */ body.px{ background:var(--px-bg); color:var(--px-ink); font-family:"Iansui","Quicksand","LXGW WenKai",system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.px .grain{display:none} /* 蓋掉原本的紙紋 */ body.px .progress-rail{background:rgba(58,54,51,.12)} body.px #progBar{background:var(--px-primary)} .px-serif{font-family:'Instrument Serif',"Iansui","LXGW WenKai",serif;font-style:italic;} .px-display{font-family:"Iansui","LXGW WenKai","Klee One",cursive;} /* ---------- 噪點材質（SVG feTurbulence） ---------- */ .noise-overlay{ position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:220px 220px; } .bg-noise{ position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); background-size:240px 240px; } /* ============ 首訪品牌開場（intro overlay） ============ */ #intro-overlay{position:fixed;inset:0;z-index:120;background:var(--px-bg); display:none;align-items:center;justify-content:center;overflow:hidden} #intro-overlay.show{display:flex} #intro-overlay.fade-out{animation:introFade .6s ease forwards} @keyframes introFade{from{opacity:1}to{opacity:0;visibility:hidden}} .intro-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:blur(34px) brightness(1.04);transform:scale(1.18);opacity:.9} .intro-stage{position:relative;z-index:2;height:100svh;display:flex;align-items:center;justify-content:center} .intro-video{height:100svh;width:auto;max-width:100vw;display:block;object-fit:contain} @media(max-width:880px){ .intro-bg{display:none} .intro-video{width:100vw;height:100svh;object-fit:cover} } .intro-skip{position:absolute;top:max(16px,env(safe-area-inset-top));right:18px;z-index:4; font-family:"Iansui","LXGW WenKai","Klee One",cursive;font-size:1rem;font-weight:600;color:#fff; padding:9px 18px;border-radius:99px;border:1.5px solid rgba(255,255,255,.7); background:rgba(58,54,51,.34);backdrop-filter:blur(4px);cursor:pointer; display:inline-flex;align-items:center;gap:7px;transition:background .2s,transform .15s} .intro-skip:hover{background:rgba(58,54,51,.5);transform:translateY(-1px)} .intro-skip svg{width:15px;height:15px} @media(prefers-reduced-motion:reduce){#intro-overlay{display:none!important}} /* ========================================================= 導覽列：黑色藥丸從頂端垂下、置中 ========================================================= */ .px-navwrap{position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;z-index:45;pointer-events:none;} .px-nav{ pointer-events:auto; background:rgba(58,54,51,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-radius:0 0 1.25rem 1.25rem; padding:.55rem 1.1rem;display:flex;align-items:center; gap:clamp(.75rem,2.6vw,3.5rem);max-width:96vw;overflow-x:auto; scrollbar-width:none;box-shadow:0 6px 22px rgba(58,54,51,.20); } .px-nav::-webkit-scrollbar{display:none} @media(min-width:768px){.px-nav{border-radius:0 0 1.75rem 1.75rem;padding:.6rem 2rem;}} .px-nav a{ color:var(--px-navlink);text-decoration:none;white-space:nowrap; font-size:clamp(10px,1.3vw,14px);letter-spacing:.02em;transition:color .25s ease; } .px-nav a:hover,.px-nav a.active{color:#E1E0CC;} /* ========================================================= SECTION 1 — HERO ========================================================= */ .px-hero{height:100vh;height:100svh;padding:1rem;} @media(min-width:768px){.px-hero{padding:1.5rem;}} .px-hero-frame{ position:relative;width:100%;height:100%; border-radius:1rem;overflow:hidden;background:#0a0a0a; } @media(min-width:768px){.px-hero-frame{border-radius:2rem;}} .px-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.18) saturate(1.05);transform:translateZ(0);backface-visibility:hidden;will-change:transform;} .px-hero-frame .noise-overlay{opacity:.08;} .px-hero-grad{position:absolute;inset:0;pointer-events:none; background: linear-gradient(to bottom,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.22) 62%,rgba(0,0,0,.7) 100%), radial-gradient(120% 80% at 25% 100%,rgba(0,0,0,.5),transparent 62%);} /* 底部內容 */ .px-hero-content{position:absolute;left:0;right:0;bottom:0;padding:clamp(1rem,3vw,2.25rem);z-index:20;} .px-hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.25rem;align-items:end;} .px-hero-head{grid-column:1 / -1;} .px-hero-side{grid-column:1 / -1;} @media(min-width:1024px){ .px-hero-head{grid-column:1 / span 6;} .px-hero-side{grid-column:1 / span 7;padding-bottom:.6rem;} } .px-eyebrow{ display:inline-block;color:rgba(255,255,255,.9); font-size:clamp(15px,1.9vw,19px);letter-spacing:.08em;text-transform:uppercase; margin-bottom:.7rem;text-shadow:0 1px 8px rgba(0,0,0,.5); } /* hero 痛點副標（影片標題當主角，痛點縮小當鉤子壓在底部；關鍵詞螢光黃底線） */ .px-h1{ font-family:"Iansui","LXGW WenKai","Klee One",cursive;font-weight:600; color:#fff;line-height:1.55;letter-spacing:-.01em;margin:.1rem 0 1rem; font-size:clamp(1.02rem,1.7vw,1.32rem);text-shadow:0 2px 18px rgba(0,0,0,.6); max-width:22em; } .px-h1-hl{position:relative;white-space:nowrap;color:#3A3633;z-index:0;padding:0 .1em;text-shadow:none;} .px-h1-hl::before{content:'';position:absolute;left:-.04em;right:-.04em;bottom:.04em;height:.62em;z-index:-1; background:#FFF07A;border-radius:4px 7px 5px 8px;transform:rotate(-1.2deg);opacity:.95;} .px-title{ font-family:"Iansui","LXGW WenKai","Klee One",cursive;font-weight:600; color:var(--px-ink);line-height:.85;letter-spacing:-.04em; font-size:18vw;margin:0;position:relative; } @media(min-width:640px){.px-title{font-size:17vw;}} @media(min-width:768px){.px-title{font-size:16vw;}} @media(min-width:1024px){.px-title{font-size:14.5vw;letter-spacing:-.05em;}} .px-title .px-star{ font-size:.30em;font-weight:400;color:var(--px-primary); vertical-align:super;margin-left:.05em; } .px-hero-desc{ color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.45); max-width:38rem; font-size:clamp(16px,2.4vw,24px);line-height:1.55;margin:0 0 1.5rem; } .px-hero-cta{ display:inline-flex;align-items:center;gap:.5rem; background:var(--px-primary);color:#000;border:none;cursor:pointer; border-radius:999px;padding:.6rem .65rem .6rem 1.55rem; font-size:clamp(15px,1.9vw,19px);font-weight:700; font-family:inherit;transition:gap .25s ease; box-shadow:0 10px 26px -8px rgba(233,111,74,.6); } .px-hero-cta:hover{gap:.75rem;} .px-hero-cta .px-cta-circle{ display:grid;place-items:center;background:#000;border-radius:999px; width:2.25rem;height:2.25rem;transition:transform .25s ease; } @media(min-width:640px){.px-hero-cta .px-cta-circle{width:2.5rem;height:2.5rem;}} .px-hero-cta:hover .px-cta-circle{transform:scale(1.1);} .px-hero-cta .px-cta-circle svg{width:1.05rem;height:1.05rem;stroke:var(--px-ink);} /* ========================================================= SECTION 2 — ABOUT ========================================================= */ .px-about{background:var(--px-bg);padding:clamp(3.5rem,9vw,7rem) 1rem;} .px-about-card{ background:var(--px-about);border-radius:1.75rem;border:1px solid rgba(58,54,51,.08); max-width:72rem;margin:0 auto;text-align:center; padding:clamp(2.25rem,6vw,5rem) clamp(1.25rem,5vw,4rem); } .px-about-label{display:block;color:var(--px-dark-2); font-size:clamp(10px,1.4vw,13px);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.5rem;} .px-about-h{ max-width:48rem;margin:0 auto;color:var(--px-dark); font-size:clamp(1.5rem,4vw,3.1rem);line-height:1.15;font-weight:400; } @media(min-width:640px){.px-about-h{line-height:1.1;}} /* 強調句改墨色＋楷體＋螢光黃底線（原本珊瑚橘字壓暖米底只有 2.72:1，幾乎隱形） */ .px-about-h .seg-serif{ font-family:"Iansui","LXGW WenKai","Klee One",cursive;color:var(--px-dark); position:relative;white-space:nowrap;z-index:0;padding:0 .08em; } .px-about-h .seg-serif::before{content:'';position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.5em;z-index:-1; background:#FFF07A;border-radius:5px 8px 6px 9px;transform:rotate(-1deg);opacity:.9;} .px-about-h .px-about-h2{ display:block;width:100%;margin-top:.7em; font-size:.5em;color:var(--px-dark-2);line-height:1.4; } .px-about-body{ max-width:46rem;margin:clamp(1.75rem,5vw,3rem) auto 0; color:var(--px-dark-2);font-size:clamp(16px,2.1vw,22px);line-height:1.85; } .px-about-body .ch{transition:opacity .15s linear;} /* ========================================================= SECTION 3 — FEATURES ========================================================= */ .px-feat{position:relative;min-height:100vh;background:var(--px-bg);overflow:hidden; padding:clamp(3.5rem,9vw,7rem) clamp(1rem,4vw,2.5rem) clamp(4rem,10vw,8rem);} .px-feat .bg-noise{opacity:.05;z-index:0;} .px-feat-inner{position:relative;z-index:1;max-width:84rem;margin:0 auto;} .px-feat-head{ color:var(--px-dark); font-size:clamp(1.9rem,5vw,3.4rem);font-weight:600;line-height:1.25; margin:0 0 clamp(2rem,5vw,3.5rem);max-width:52rem; } .px-feat-head .feat-line{display:block;} .px-feat-head .line2{color:var(--px-gray500);} .px-cards{display:grid;grid-template-columns:1fr;gap:.75rem;} @media(min-width:768px){.px-cards{grid-template-columns:repeat(2,1fr);gap:.5rem;}} @media(min-width:1024px){.px-cards{grid-template-columns:repeat(4,1fr);gap:.25rem;height:620px;}} .px-card{ position:relative;border-radius:1.25rem;overflow:hidden; background:var(--px-feat);border:1px solid rgba(58,54,51,.08); padding:1.5rem;display:flex;flex-direction:column; min-height:300px; } @media(min-width:1024px){.px-card{min-height:0;height:100%;}} /* 卡 1：影片（直式，完整呈現不裁切，無外框） */ .px-card-video{padding:0;background:var(--px-bg);border:none;aspect-ratio:720/1280;} @media(min-width:1024px){.px-card-video{aspect-ratio:auto;}} .px-card-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--px-bg);} .px-card-video .vgrad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 55%);} .px-card-video .vlabel{ position:relative;margin-top:auto;z-index:2;color:var(--px-ink); font-size:clamp(15px,1.8vw,19px);font-weight:700;line-height:1.15; } /* ========================================================= 卡 2：翻牌（正面影片 / 背面文字補充） ========================================================= */ .px-flip{padding:0;background:transparent;border:none;overflow:visible;perspective:1200px;cursor:pointer;aspect-ratio:720/1280;} @media(min-width:1024px){.px-flip{aspect-ratio:auto;}} .px-flip-inner{ position:relative;width:100%;height:100%;min-height:inherit; transition:transform .7s cubic-bezier(.22,1,.36,1); transform-style:preserve-3d; } .px-flip:hover .px-flip-inner, .px-flip:focus-visible .px-flip-inner, .px-flip.is-flipped .px-flip-inner{transform:rotateY(180deg);} .px-flip-face{ position:absolute;inset:0;width:100%;height:100%; -webkit-backface-visibility:hidden;backface-visibility:hidden; border-radius:1.25rem;overflow:hidden; display:flex;flex-direction:column; } /* 正面：影片（完整呈現不裁切，底色同紙底） */ .px-flip-front{background:var(--px-bg);} .px-flip-front video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--px-bg);} .px-flip-front .vgrad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),transparent 55%);} .px-flip-frontlabel{ position:relative;margin-top:auto;z-index:2;padding:1.5rem; display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;color:#fff; } .px-flip-frontlabel h3{font-size:clamp(15px,1.9vw,19px);font-weight:700;margin:0;line-height:1.1;} .px-flip-frontlabel .px-card-num{color:rgba(255,255,255,.7);} .px-flip-hint{ width:100%;margin-top:.4rem;font-size:12px;color:var(--px-primary); display:inline-flex;align-items:center;gap:.3rem; } .px-flip-hint::before{content:"↻";font-size:14px;} /* 背面：文字補充 */ .px-flip-back{ transform:rotateY(180deg); background:var(--px-feat);border:1px solid rgba(58,54,51,.08); padding:1.5rem;justify-content:flex-start; } /* 卡 2–4：清單卡 */ .px-card-ic{width:2.5rem;height:2.5rem;border-radius:.75rem; background:rgba(58,54,51,.06);display:grid;place-items:center;margin-bottom:auto;} @media(min-width:640px){.px-card-ic{width:3rem;height:3rem;}} .px-card-ic svg{width:1.35rem;height:1.35rem;} .px-card-title{display:flex;align-items:baseline;gap:.5rem;margin:1.5rem 0 1rem;} .px-card-num{color:var(--px-gray500);font-size:.8rem;font-variant-numeric:tabular-nums;} .px-card-title h3{font-size:clamp(15px,1.9vw,19px);font-weight:700;color:var(--px-dark);margin:0;line-height:1.1;} .px-card-ribbon{font-size:10px;color:var(--px-primary);border:1px solid rgba(233,111,74,.4); border-radius:999px;padding:.1rem .45rem;letter-spacing:.05em;} .px-check{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.7rem;} .px-check svg{width:1rem;height:1rem;color:var(--px-primary);flex-shrink:0;margin-top:.15rem;stroke:var(--px-primary);} .px-check span{color:var(--px-gray400);font-size:clamp(12px,1.4vw,14px);line-height:1.35;} .px-learn{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem; color:var(--px-primary);text-decoration:none;font-size:13px;transition:gap .2s ease;} .px-learn:hover{gap:.6rem;} .px-learn svg{width:.95rem;height:.95rem;transform:rotate(-45deg);stroke:currentColor;} /* ========================================================= FOOTER（沿用結構，改深色） ========================================================= */ body.px footer{background:var(--px-bg);color:var(--px-dark-2);border-top:1px solid rgba(58,54,51,.1);} body.px .foot-brand{color:var(--px-dark);} body.px .foot-links a{color:var(--px-dark-2);} body.px .foot-links a:hover{color:var(--px-dark);} body.px .foot-fine{color:var(--px-gray500);} /* ========================================================= 進場動畫（由 prisma.js 加上 .px-ready 才隱藏；無 JS 則全顯示） ========================================================= */ .px-ready [data-pullup] .w{opacity:0;transform:translateY(20px);} [data-pullup] .w{display:inline-block;will-change:transform,opacity; transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1);} [data-pullup].on .w{opacity:1;transform:none;} .px-ready .px-fade{opacity:0;transform:translateY(20px);} .px-fade{transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s cubic-bezier(.16,1,.3,1);} .px-fade.on{opacity:1;transform:none;} .px-ready .px-card{opacity:0;transform:scale(.95);} .px-card{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s cubic-bezier(.22,1,.36,1);} .px-card.on{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ .px-ready [data-pullup] .w,.px-ready .px-fade,.px-ready .px-card{opacity:1;transform:none;} .px-hero-cta,.px-card,.px-learn{transition:none;} } /* ========================================================= 接回首頁的「免費 vs 686」價格區 + 最終 CTA（沿用 styles.css 的 .band 系統）覆寫 body.px 的淺色文字繼承，確保在淺底卡上是深墨字 ========================================================= */ .px-plans,.px-final{color:var(--px-dark);} .px-final-note{margin-top:18px;margin-bottom:0;font-size:.88rem;color:var(--px-dark-2);} /* ===== Version A：靜態書照 hero（淺底，無烤死標題，文字改深墨可讀） ===== */ .px-hero-static .px-hero-frame{background:#EFE9DB;} /* hero 可放靜態書照（）或無標題翻頁 loop（