/* =========================================================== 子頁面 · 入口（webtv / 抖音·優酷）風格設計系統 ----------------------------------------------------------- 作用域：（由 includes/header.php 或 welcome.php 在 ?portal=1 時加上）。目的：讓從 webtv 入口點進來的子頁面（about / services / works / qa / contact / assess / welcome …）視覺與入口一致，同時共用同一套 design token 與響應式斷點。本檔載入於 theme-*.css 之後，故以下規則優先。 =========================================================== */ /* ---------- 共用 design token ---------- */ body.portal-mode{ --ps-bg: #0d0d11; /* 與 portal.css --pf-bg 一致 */ --ps-bg-2: #15151c; --ps-bg-3: #1c1c24; --ps-surface: #1c1c24; --ps-line: #26262f; --ps-text: #f2f2f7; --ps-text-2: #a7a7b2; --ps-red: #fe2c55; /* 抖音紅 */ --ps-blue: #00a1d6; /* 優酷藍 */ --ps-radius: 16px; --ps-radius-sm: 12px; --ps-pad-x: 48px; --ps-pad-y: 72px; --ps-maxw: 1100px; --ps-shadow: 0 12px 34px rgba(0,0,0,.45); background: var(--ps-bg); color: var(--ps-text); font-family:"Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif; } /* ---------- 基礎排版 ---------- */ body.portal-mode h1, body.portal-mode h2, body.portal-mode h3{ color: var(--ps-text); letter-spacing:-.02em; } body.portal-mode p{ color: var(--ps-text-2); } body.portal-mode a{ color: var(--ps-blue); } body.portal-mode a:hover{ color:#fff; text-decoration:none; } body.portal-mode .eyebrow{ color: var(--ps-red); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:12px; margin:0 0 10px; } body.portal-mode .section-title{ color: var(--ps-text); font-size:30px; font-weight:800; margin:0; } body.portal-mode .section-head{ margin-bottom:28px; } /* ---------- 頂部列（portal 風）---------- */ body.portal-mode .nav{ background:rgba(13,13,17,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--ps-line); padding:14px var(--ps-pad-x); position:sticky; top:0; z-index:50; } body.portal-mode .nav__logo{ height:34px; } body.portal-mode .nav__links a{ color:var(--ps-text-2); font-weight:600; } body.portal-mode .nav__links a:hover{ color:#fff; } body.portal-mode .nav__links a[style*="accent"]{ color:var(--ps-red)!important; } body.portal-mode .nav__toggle{ color:var(--ps-text); } /* portal 模式下「預約諮詢」按鈕轉為紅色實心 */ body.portal-mode .nav__links .btn--primary{ background:linear-gradient(135deg,var(--ps-red),#ff5c7c); color:#fff; border:none; } /* 返回入口連結（header.php 在 portal 模式插入） */ body.portal-mode .ps-back{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:700; font-size:14px; text-decoration:none; padding:8px 16px; border-radius:999px; background:var(--ps-bg-3); border:1px solid var(--ps-line); } body.portal-mode .ps-back:hover{ background:var(--ps-red); border-color:var(--ps-red); } /* ---------- 區塊容器 ---------- */ body.portal-mode .section{ padding:var(--ps-pad-y) 0; } body.portal-mode .section--alt{ background:var(--ps-bg-2); } body.portal-mode .section--plain{ background:transparent; } body.portal-mode .container{ max-width:var(--ps-maxw); padding:0 var(--ps-pad-x); } /* ---------- Hero ---------- */ body.portal-mode .page-hero{ background:radial-gradient(120% 120% at 50% 0%,#2a1320 0%,#0d0d11 60%); padding:120px var(--ps-pad-x) 72px; text-align:center; border-bottom:1px solid var(--ps-line); } body.portal-mode .page-hero__title{ color:#fff; font-size:42px; font-weight:900; } body.portal-mode .page-hero__sub{ color:#ffd0da; } /* ---------- 卡片 ---------- */ body.portal-mode .card{ background:var(--ps-surface); border:1px solid var(--ps-line); border-radius:var(--ps-radius); padding:26px; box-shadow:var(--ps-shadow); } body.portal-mode .card:hover{ transform:translateY(-4px); border-color:var(--ps-red); } body.portal-mode .card__marker{ width:36px; height:4px; border-radius:999px; background:linear-gradient(90deg,var(--ps-red),var(--ps-blue)); margin-bottom:14px; } body.portal-mode .card__title{ color:var(--ps-text); font-size:18px; font-weight:700; } body.portal-mode .card__desc{ color:var(--ps-text-2); } /* 圖卡（服務項目）：深色入口下圖片填滿、文字顏色正確 */ body.portal-mode .card--media{ padding:0; } body.portal-mode .card__media{ aspect-ratio:4/3; background:var(--ps-bg-3); } body.portal-mode .card__media img{ width:100%; height:100%; object-fit:cover; display:block; } body.portal-mode .card__body{ padding:18px 20px 20px; } /* ---------- 數據統計 ---------- */ body.portal-mode .stat__num{ color:var(--ps-red); } body.portal-mode .stat__label{ color:var(--ps-text-2); } /* ---------- 步驟 ---------- */ body.portal-mode .step__num{ color:var(--ps-red); font-size:30px; font-weight:900; font-style:italic; } body.portal-mode .step__title{ color:var(--ps-text); font-weight:700; } body.portal-mode .step__desc{ color:var(--ps-text-2); } /* ---------- 按鈕 ---------- */ body.portal-mode .btn{ border-radius:999px; font-weight:700; padding:13px 26px; border:none; transition:.18s; text-decoration:none; display:inline-block; } body.portal-mode .btn--primary, body.portal-mode .btn--light{ background:linear-gradient(135deg,var(--ps-red),#ff5c7c); color:#fff; } body.portal-mode .btn--ghost{ background:transparent; color:#fff; border:1.5px solid var(--ps-line); } body.portal-mode .btn--ghost:hover{ border-color:var(--ps-red); background:rgba(254,44,85,.12); } body.portal-mode .btn--sm{ padding:9px 18px; font-size:14px; } /* ---------- CTA ---------- */ body.portal-mode .cta{ background:radial-gradient(120% 140% at 50% 0%,#2a1320 0%,#15151c 70%); border-top:1px solid var(--ps-line); border-bottom:1px solid var(--ps-line); padding:72px var(--ps-pad-x); text-align:center; } body.portal-mode .cta__title{ color:#fff; } body.portal-mode .cta__sub{ color:#ffd0da; } body.portal-mode .cta .btn{ background:linear-gradient(135deg,var(--ps-red),#ff5c7c); color:#fff; } /* ---------- 表單欄位 ---------- */ body.portal-mode .field label{ color:var(--ps-text); } /* 補助評估 label 在淺色主題統一為 #2a1320；深色 portal 模式下改回淺色以保持可讀（#2a1320 在深色背景不可辨） */ body.portal-mode #assessApp label{ color:var(--ps-text); } body.portal-mode .field input, body.portal-mode .field textarea, body.portal-mode .field select{ background:var(--ps-bg-3); color:var(--ps-text); border:1px solid var(--ps-line); border-radius:var(--ps-radius-sm); } body.portal-mode .field input:focus, body.portal-mode .field textarea:focus, body.portal-mode .field select:focus{ border-color:var(--ps-red); outline:none; box-shadow:0 0 0 3px rgba(254,44,85,.25); } /* ---------- 頁尾 ---------- */ body.portal-mode .footer{ background:var(--ps-bg-2); border-top:1px solid var(--ps-line); color:var(--ps-text-2); } body.portal-mode .footer__logo img{ filter:brightness(0) invert(1); } body.portal-mode .footer__title{ color:var(--ps-text); } body.portal-mode .footer__col a, body.portal-mode .footer__col p{ color:var(--ps-text-2); } body.portal-mode .footer__col a:hover{ color:var(--ps-red); } body.portal-mode .footer__divider{ background:var(--ps-line); } body.portal-mode .footer__bottom{ color:var(--ps-text-2); } /* ---------- 歡迎頁（獨立頁）---------- */ body.portal-mode.welcome{ background:radial-gradient(120% 120% at 50% 0%,#2a1320 0%,#0d0d11 60%); display:flex; align-items:center; justify-content:center; min-height:100vh; } body.portal-mode .welcome__card{ background:var(--ps-surface); border:1px solid var(--ps-line); border-radius:var(--ps-radius); box-shadow:var(--ps-shadow); color:var(--ps-text-2); } body.portal-mode .welcome__title{ color:#fff; } body.portal-mode .welcome__sub{ color:var(--ps-red); font-weight:700; } body.portal-mode .welcome__btn--primary{ background:linear-gradient(135deg,var(--ps-red),#ff5c7c); color:#fff; border:none; } body.portal-mode .welcome__btn--ghost{ background:transparent; color:#fff; border:1.5px solid var(--ps-line); } /* ---------- 響應式斷點 ---------- */ /* 平板（768–1023px） */ @media (max-width:1023px){ body.portal-mode{ --ps-pad-x:32px; --ps-pad-y:56px; } body.portal-mode .page-hero{ padding:96px var(--ps-pad-x) 56px; } body.portal-mode .page-hero__title{ font-size:34px; } body.portal-mode .section-title{ font-size:26px; } body.portal-mode .cta__title{ font-size:28px; } } /* 手機（<768px） */ @media (max-width:768px){ body.portal-mode{ --ps-pad-x:18px; --ps-pad-y:44px; } body.portal-mode .nav{ padding:12px var(--ps-pad-x); } body.portal-mode .nav__links{ gap:16px; flex-wrap:wrap; } body.portal-mode .page-hero{ padding:76px var(--ps-pad-x) 44px; } body.portal-mode .page-hero__title{ font-size:28px; } body.portal-mode .section-title{ font-size:22px; } body.portal-mode .grid-3{ grid-template-columns:1fr; } body.portal-mode .about, body.portal-mode .ai, body.portal-mode .container.about{ grid-template-columns:1fr; } body.portal-mode .cta{ padding:52px var(--ps-pad-x); } body.portal-mode .cta__title{ font-size:24px; } body.portal-mode .footer__top{ flex-direction:column; gap:28px; } }