/* ======================================================== Plan Widget theme（plan widget 契約 v1 —— ArkiTeki 皮膚） ======================================================== 僅 page.plans / page.addons 兩頁載入。 作用對象＝契約凍結的結構 class（plan-table / plan-box / …）， 基底自 archiac subscription.css 的方案皮膚移植，變數對齊 archidb app.css， 缺少的 highlight 系列變數於此定義。 */ :root { --plan-highlight-bg-color: #FBF6E8; --plan-highlight-text-color: #E7D6A7; --plan-highlight-mid-text-color: #D7C79D; --plan-highlight-dark-text-color: #C2B38C; --plan-highlight-border-color: #D7C79D; } #page-plans h2, #page-addons h2 { text-align: center; color: var(--theme-text-color); font-size: 2em; font-weight: 500; margin: 30px 0;} #page-plans .tooltipster-base, #page-addons .tooltipster-base { max-width: 210px; } #page-plans .tooltipster-content, #page-addons .tooltipster-content { color: #666; font-size: 13px; line-height: 1.5em; } #plan-list-wrapper { max-width: 1300px; margin: auto;} #plan-list-wrapper.narrow { max-width: 840px;} #plan-list-wrapper.narrow .plan-table .col-item { width: 47.5%; margin-right: 5%;} #plan-list-wrapper.narrow .plan-table .col-item:nth-child(2n) { margin-right: 0;} .plan-table { } .plan-table .col-item { width: 30%; margin-right: 5%; position: relative; } .plan-table .plan-box { min-height: 100%; background-color: #fff; border: 1px solid var(--light-border-color); border-radius: 15px; } .plan-table .plan-box.is-preview { opacity: .6;} .plan-table .plan-box.hide-button .body { padding-top: 0;} .plan-table .header { padding:30px 8% 0 8%;} .plan-table .title { height: 55px; font-size: 1.8em; letter-spacing: .02em; padding-bottom: 30px; margin-bottom: 20px; color: var(--mid-text-color); border-bottom: 2px solid var(--light-border-color);} .plan-table .title .postfix { font-weight: 400; background: var(--mid-text-color); color: #fff; border-radius: 5px; font-size: .55em; padding: .5em .6em .6em .6em; margin-left: 10px;} .plan-table .price { display:flex; align-items: flex-end; margin-bottom: 5px;} .plan-table .amount { font-size: 2.4em; font-weight: 500; color: var(--theme-text-color);} .plan-table .period { font-size: .9em; color: #222; margin-left: .5em;} .plan-table .price-note { font-size: .9em; color: #888; margin-left: auto;} .plan-table .buy { margin-top: 20px;} .plan-table .buy .buttons { margin-top: 15px; gap: 8px; } .plan-table .buy .buttons button, .plan-table .buy .buttons a { color: var(--mid-text-color); border: 2px solid var(--light-border-color); background: none; border-radius: 30px; transition: all .2s; cursor: pointer;} .plan-table .buy .buttons button:hover, .plan-table .buy .buttons a:hover { background-color: var(--theme-bg-color); border: 1px solid var(--theme-border-color); color: #fff;} .plan-table .buy .buttons .sep { margin: 0 8px; display: inline-block; font-size: 12px; transform: translateY(-2px); } /* archidb 全站 CSS 無 .full class（archiac common.css 才有），widget markup 用 button-md full，此處補齊全寬 */ .plan-table .buy .buttons .button.full, .plan-table .buy .buttons .button-md.full { width: 100%; } .plan-table .option-selector-wrapper { margin-top: 15px;} /* archidb 全域 select2 高度為 36px（app.css），此處覆寫為與方案盒一致的 40px */ .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single { height: 40px; border: 2px solid var(--light-border-color); border-radius: 30px; } .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; text-align: center; color: var(--mid-text-color);} .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px;} .plan-table .body { padding: 15px 10% 40px 10%;} .plan-table .spec { color: #414042; margin-top: 20px; margin-bottom: 5px; font-size: 1.02em;} .plan-table .features { margin-top: 20px; } .plan-table .features li { padding: .7em .5em .7em 0; font-size: 1.05em; color: #414042;} .plan-table .features .fa-check { font-size: .8em; margin-right: 4px; color: var(--theme-text-color);} .plan-table .features .quota { color: var(--theme-text-color); font-weight: 500; margin-left: .5em;} .plan-table .features .tooltip { color: #ddd; font-size: .88em; margin-left: 1px;} .plan-table .plan-group-switch { position: absolute; right: 8%; top: 27px; border-radius: 40px; background-color: #f7f7f7; cursor: pointer;} .plan-table .plan-group-switch .switch-button { position: absolute; left: 0; top: 0; width: 60px; height: 100%; background-color: #fff; border: 1px solid var(--light-border-color); border-radius: 40px; transition: all .3s; } .plan-table .plan-group-switch ul { display: flex; position: relative; z-index: 1; } .plan-table .plan-group-switch li { white-space:nowrap; padding: .7em 1.1em; color: #888; font-weight: 500; transition: .2s all; } .plan-table .plan-group-switch li.active { color: var(--mid-text-color);} .plan-table .plan-box.highlighted { border: 3px solid var(--plan-highlight-border-color); box-shadow: 3px 3px 10px rgb(232,214,168,.12);} .plan-table .plan-box.highlighted .title { color: var(--plan-highlight-mid-text-color); border-bottom: 2px solid var(--plan-highlight-text-color); } .plan-table .plan-box.highlighted .title .postfix { background-color: var(--plan-highlight-border-color); } .plan-table .plan-box.highlighted .amount { color: var(--plan-highlight-dark-text-color);} .plan-table .plan-box.highlighted .buttons button, .plan-table .plan-box.highlighted .buttons a { color: var(--plan-highlight-text-color); border: 2px solid var(--plan-highlight-border-color); box-shadow: 3px 3px 10px rgb(232,214,168,.12);} .plan-table .plan-box.highlighted .buttons button:hover, .plan-table .plan-box.highlighted .buttons a:hover { background-color: var(--plan-highlight-border-color); border: 2px solid var(--plan-highlight-border-color); color: #fff; } .plan-table .plan-box.highlighted .features .fa-check, .plan-table .plan-box.highlighted .features .quota { color: var(--plan-highlight-text-color); } .plan-table .plan-box.coming-soon { background-color: rgba(200,200,200,.5); } .plan-table .plan-box.coming-soon .buy button, .plan-table .plan-box.coming-soon .buy a, .plan-table .plan-box.coming-soon .buy button:hover, .plan-table .plan-box.coming-soon .buy a:hover { color: #bbb; border: 2px solid #bbb; background: none; pointer-events: none;} .plan-table .plan-box.coming-soon .amount, .plan-table .plan-box.coming-soon .period, .plan-table .plan-box.coming-soon .price-note, .plan-table .plan-box.coming-soon .spec, .plan-table .plan-box.coming-soon .features li, .plan-table .plan-box.coming-soon .features .fa-check, .plan-table .plan-box.coming-soon .features .quota { color: #aaa; } .plan-table .plan-box.coming-soon .features .tooltip { display: none;} .plan-table .plan-box.coming-soon .double-dash { font-weight: 200; margin-right: 10px;} .plan-table .plan-group-switch.highlighted { background-color: var(--plan-highlight-bg-color);} .plan-table .plan-group-switch li.active.highlighted { color: var(--plan-highlight-mid-text-color); } .plan-table .plan-group-switch .switch-button.highlighted { border: 1px solid var(--plan-highlight-border-color); } .plan-table .remark { margin-top: 12px; font-size: .92em; color: var(--mid-text-color); } .plan-table .remark i { font-size: 1.1em; margin-right: 3px;} /** Addons **/ .plan-table .addon-active-badge { color: #444; margin-top: 15px;} .plan-table .addon-quantity-row { margin: 20px 0;} .plan-table .addon-quantity-row label { color: var(--mid-text-color); } .plan-table [name="quantity"] { width: 60px; height: 30px; padding: 0 .7em; text-align: center; background-color: #fff; border: 1px solid var(--light-border-color);} .plan-table .addon-subtotal { margin: -8px 0 12px; font-size: .95em; color: var(--mid-text-color); text-align: center; } .addon-scope-toggle { display: flex; width: fit-content; margin: 0 0 25px auto; padding: 3px; border: 1px solid var(--light-border-color); border-radius: 30px; background: #f4f4f4; } .addon-scope-toggle button { border: none; background: none; padding: .5em 1.5em; border-radius: 30px; color: var(--mid-text-color); cursor: pointer; font-size: .95em; transition: all .2s; } .addon-scope-toggle button.active { background-color: #fff; color: var(--theme-text-color); box-shadow: 0 1px 3px rgba(0,0,0,.15); } /* 加購格：等高（以最長為準）+ 等間距。改用 flex gap，不依賴 nth-child margin（過濾隱藏卡片時會錯亂） */ #addon-list-wrapper .plan-table { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; } #addon-list-wrapper .plan-table .col-item { width: calc((100% - 48px) / 3); margin: 0; display: flex; } #addon-list-wrapper .plan-table .col-item .plan-box { width: 100%; } /** Comparison table **/ #comparison-table-nav { display: none;} #comparison-table-nav li { flex-grow: 1; text-align: center;} #comparison-table-wrapper { max-width: 1300px; margin: 80px auto; overflow: hidden; background-color: #fff; border: 1px solid var(--light-border-color); border-radius: 15px;} #comparison-table-wrapper.narrow { max-width: 840px;} .comparison-table { border: none; width: 100%; } .comparison-table th, .comparison-table td { padding: 1.2em 0; border: none; border-bottom: 1px solid var(--soft-border-color); } .comparison-table tr:last-child td { border-bottom: none;} .comparison-table th { font-size: 1.4em; text-align: center; border-bottom: 1px solid var(--mid-border-color); color: #444;} .comparison-table td { font-size: 1.1em; text-align: center; color: var(--theme-text-color); font-weight: 500; } .comparison-table td:first-child { padding-left: 5%; text-align: left; color: #444; font-weight: normal; } .comparison-table th.highlighted { background-color: var(--plan-highlight-bg-color); color: var(--theme-text-color);} .comparison-table td.highlighted { background-color: var(--plan-highlight-bg-color);} /* ================================ Responsive Layout ================================ */ /* for 1280px or less */ @media screen and (max-width: 1280px) { .plan-table .col-item { width: 32%; margin-right: 2%; } .plan-table .title { height: 40px; font-size: 1.5em;} .plan-table .amount { font-size: 2em;} .plan-table .plan-group-switch { top: 24px;} .plan-table .plan-group-switch li { padding: .5em .9em;} .plan-table .spec { font-size: 1.05em;} .plan-table .features li { font-size: 1.05em;} #comparison-table-wrapper { margin: 50px auto 0 auto;} .comparison-table th { font-size: 1.2em;} .comparison-table td { font-size: 1.05em; } } /* for 1024px or less */ @media screen and (max-width: 1024px) { #page-plans h2, #page-addons h2 { font-size: 1.6em; margin-bottom: 30px;} } /* for 768px or less */ @media screen and (max-width: 768px) { .plan-table .col-item { width: 100% !important; margin-right: 0 !important; margin: 10px 0 !important;} .plan-table .header { padding: 20px 6% 0 6%;} .plan-table .title { padding-bottom: 20px;} .plan-table .body { padding: 15px 6% 20px 6%;} .plan-table .features li { padding: .6em .4em .6em 0; font-size: 1em;} .plan-table .plan-group-switch { top: 18px; right: 6%;} #comparison-table-nav { display: flex; justify-content: space-between; margin: 40px 0 25px 0;} #comparison-table-nav li { margin: 0 5%; font-size: 1.2em; font-weight: 500; color: #444; cursor: pointer;} #comparison-table-nav li.mobile-active { color: var(--theme-text-color);} #comparison-table-wrapper { margin-top: 0;} .comparison-table th { width: 50% !important; font-size: 1.1em;} .comparison-table td { width: 50% !important; font-size: 1em;} }