/* =========================================================
Carl.work Custom CSS
Version: 11.0 — Mainland Homepage + Site Typography
For: Divi 5 + Child Theme
Design reference: carl-work-home-mainland-preview.html
Last updated: 2026-09-05
Audit markers:
- Hero action Code Module: carl-hero-actions
- Hero proof Code Module: carl-hero-proof
- Method left Column: carl-method-copy
- Hero illustration: carl-web-mockup
- Hero audience: carl-hero-audience
- V8 Hero illustration: carl-hero-visual-v8
- V8 Hero audience: carl-hero-audience-v8
- Case dossier namespace: carl-dossier-*
- About profile namespace: carl-about-*
- Contact page namespace: carl-contact-*
- Active theme path: /assets/css/custom.css
========================================================= */
/* ==============================
01. Brand Variables
============================== */
:root {
--carl-ink: #1E2A36;
--carl-ink-soft: #334758;
--carl-blue-gray: #2F5D7C;
--carl-blue-action: #2D7DD2;
--carl-blue-action-dark: #1E5FA8;
--carl-warm-bg: #FAF8F4;
--carl-cream: #FFFDF8;
--carl-soft-blue: #EEF4F8;
--carl-soft-sand: #F3EBDD;
--carl-gold: #D6A85A;
--carl-gold-soft: #F4DFB9;
--carl-wechat: #07C160;
--carl-wechat-dark: #059A4A;
--carl-text-gray: #5E6B75;
--carl-line: #DDE5EA;
--carl-white: #FFFFFF;
--carl-shadow: 0 22px 60px rgba(30, 42, 54, 0.11);
--carl-shadow-soft: 0 12px 34px rgba(30, 42, 54, 0.07);
}
/* ==============================
02. Global Fixes
============================== */
/* 防止 Divi / 瀏覽器把裝飾元素中的 撐出文字高度 */
.carl-web-mockup [aria-hidden="true"] {
font-size: 0 !important;
line-height: 0 !important;
}
/* Code Module 內的插畫避免被裁切 */
.carl-web-mockup,
.et_pb_code_inner:has(.carl-web-mockup),
.et_pb_code:has(.carl-web-mockup) {
overflow: visible !important;
}
/* Header / Canvas / Code Module 避免被裁切 */
.carl-glass-header,
.carl-glass-header .et_pb_row,
.carl-glass-header .et_pb_column,
.carl-mobile-header,
.carl-mobile-header .et_pb_row,
.carl-mobile-header .et_pb_column,
.carl-mobile-overlay,
.carl-mobile-overlay .et_pb_row,
.carl-mobile-overlay .et_pb_column {
overflow: visible !important;
}
/* 通用：避免 Header 內模組默認 margin 破壞垂直居中 */
.carl-glass-header .et_pb_module,
.carl-mobile-header .et_pb_module,
.carl-mobile-overlay .et_pb_module {
margin-bottom: 0 !important;
}
/* 建議給只在手機顯示的模組使用 */
@media (min-width: 981px) {
.carl-mobile-only {
display: none !important;
}
}
/* 建議給只在桌面顯示的模組使用 */
@media (max-width: 980px) {
.carl-desktop-only {
display: none !important;
}
}
/* ==============================
03. Hero Section
Section CSS Class: carl-home-hero
============================== */
.carl-home-hero {
position: relative;
overflow: hidden;
padding-top: 152px !important;
padding-bottom: 84px !important;
background:
radial-gradient(circle at 84% 6%, rgba(214, 168, 90, 0.16), transparent 28%),
radial-gradient(circle at 12% 12%, rgba(45, 125, 210, 0.12), transparent 26%),
linear-gradient(135deg, #FFFDF8 0%, #FAF8F4 46%, #EEF4F8 100%) !important;
}
/* Hero 右下角大圓背景 */
.carl-home-hero::before {
content: "";
position: absolute;
right: -160px;
bottom: -220px;
width: 640px;
height: 640px;
border-radius: 50%;
border: 1px solid rgba(47, 93, 124, 0.10);
box-shadow:
0 0 0 76px rgba(45, 125, 210, 0.030),
0 0 0 156px rgba(214, 168, 90, 0.035);
pointer-events: none;
}
.carl-home-hero > .et_pb_row {
position: relative;
z-index: 2;
}
/* ==============================
04. Eyebrow Labels
Text Module CSS Class:
carl-eyebrow + one of:
carl-eyebrow-line / carl-eyebrow-dot /
carl-eyebrow-dot-simple / carl-eyebrow-line-gradient
============================== */
.carl-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--carl-blue-gray);
font-size: var(--carl-type-eyebrow) ;
font-weight: 850;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* 方案 1：橫線 */
.carl-eyebrow-line::before {
content: "";
width: 30px;
height: 2px;
flex-shrink: 0;
border-radius: 999px;
background: var(--carl-blue-gray);
}
/* 方案 2：小圓點，有外圈 */
.carl-eyebrow-dot::before {
content: "";
width: 9px;
height: 9px;
flex-shrink: 0;
border-radius: 50%;
background: var(--carl-gold);
box-shadow: 0 0 0 6px rgba(214, 168, 90, 0.18);
}
/* 方案 3：小金點，沒有外圈 */
.carl-eyebrow-dot-simple::before {
content: "";
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 50%;
background: var(--carl-gold);
}
/* 方案 4：漸變橫線 */
.carl-eyebrow-line-gradient::before {
content: "";
width: 34px;
height: 2px;
flex-shrink: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--carl-blue-gray), var(--carl-gold));
}
/* 金色橫線版本：Text Module 只需填入文字，不要手動輸入「——」
CSS Class: carl-eyebrow carl-eyebrow--gold */
.carl-eyebrow--gold,
.carl-eyebrow--gold .et_pb_text_inner,
.carl-eyebrow--gold p {
color: var(--carl-gold) !important;
}
.carl-eyebrow--gold::before {
content: "";
width: 30px;
height: 2px;
flex: 0 0 30px;
border-radius: 999px;
background: currentColor !important;
}
/* 深色背景上的白色版本（可選）
CSS Class: carl-eyebrow carl-eyebrow-line carl-eyebrow--light */
.carl-eyebrow--light,
.carl-eyebrow--light .et_pb_text_inner,
.carl-eyebrow--light p {
color: rgba(255, 255, 255, 0.72) !important;
}
.carl-eyebrow--light::before {
background: currentColor !important;
}
/* Hero title */
.carl-hero-title h1,
.carl-hero-title h2 {
color: var(--carl-ink) !important;
font-size: var(--carl-type-h1) !important;
line-height: var(--carl-type-h1-line) !important;
letter-spacing: -.04em ;
}
.carl-hero-title strong {
color: var(--carl-blue-gray);
}
/* Hero lead */
.carl-hero-lead,
.carl-hero-lead p {
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-lead) !important;
line-height: 1.75 !important;
}
/* Buttons */
.carl-btn-primary,
.carl-btn-primary .et_pb_button,
.carl-btn-primary.et_pb_button {
color: #ffffff !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--carl-blue-action), var(--carl-blue-action-dark)) !important;
box-shadow: 0 16px 30px rgba(45, 125, 210, 0.22);
font-weight: 800 !important;
padding: 13px 24px !important;
}
.carl-btn-secondary,
.carl-btn-secondary .et_pb_button,
.carl-btn-secondary.et_pb_button {
color: var(--carl-blue-gray) !important;
border: 1px solid rgba(47, 93, 124, 0.15) !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.72) !important;
font-weight: 800 !important;
padding: 13px 24px !important;
}
/* ==============================
05. Desktop Transparent Header
Section CSS Class: carl-glass-header
重要邏輯：
- 頁面頂部：完全透明底
- 滾動後：由 JS 給 body 加上 carl-scrolled，才出現毛玻璃
============================== */
.carl-glass-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999;
width: 100% !important;
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border-bottom: 1px solid transparent !important;
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease,
backdrop-filter 0.25s ease;
}
/* WordPress 登入狀態下避免被管理員工具列遮住 */
body.admin-bar .carl-glass-header {
top: 32px !important;
}
@media (max-width: 782px) {
body.admin-bar .carl-glass-header {
top: 46px !important;
}
}
/* Divi Sticky class 只保留 fixed，不讓它自動產生毛玻璃底 */
.carl-glass-header.et_pb_sticky,
.et_pb_sticky .carl-glass-header,
.carl-glass-header.et_pb_sticky--top,
.et_pb_sticky--top .carl-glass-header {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border-bottom-color: transparent !important;
}
/* 滾動後才出現毛玻璃 */
body.carl-scrolled .carl-glass-header,
body.carl-scrolled .carl-glass-header.et_pb_sticky,
body.carl-scrolled .et_pb_sticky .carl-glass-header {
background: rgba(255, 253, 248, 0.54) !important;
-webkit-backdrop-filter: blur(16px) saturate(118%) !important;
backdrop-filter: blur(16px) saturate(118%) !important;
box-shadow: 0 10px 28px rgba(30, 42, 54, 0.065) !important;
border-bottom: 1px solid rgba(47, 93, 124, 0.065) !important;
}
/* 回到頂部強制透明 */
body:not(.carl-scrolled) .carl-glass-header {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border-bottom-color: transparent !important;
}
.carl-glass-header .et_pb_row {
width: min(92%, 1180px) !important;
max-width: 1180px !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
background: transparent !important;
box-shadow: none !important;
}
.carl-glass-header .et_pb_column,
.carl-glass-header .et_pb_menu,
.carl-glass-header .et_pb_menu_inner_container,
.carl-glass-header .et_pb_menu__wrap {
background: transparent !important;
box-shadow: none !important;
}
.carl-glass-header .et_pb_menu__menu > nav > ul > li > a {
color: var(--carl-ink) !important;
font-weight: 700;
letter-spacing: 0.01em;
}
.carl-glass-header .et_pb_menu__menu > nav > ul > li > a:hover,
.carl-glass-header .et_pb_menu__menu > nav > ul > li.current-menu-item > a,
.carl-glass-header .et_pb_menu__menu > nav > ul > li.current_page_item > a {
color: var(--carl-blue-action) !important;
opacity: 1;
}
/* Desktop Dropdown menu */
.carl-glass-header .nav li ul {
background: rgba(255, 253, 248, 0.90) !important;
-webkit-backdrop-filter: blur(18px) saturate(125%);
backdrop-filter: blur(18px) saturate(125%);
border-top: 3px solid var(--carl-gold);
box-shadow: 0 16px 36px rgba(30, 42, 54, 0.12);
}
.carl-glass-header .nav li ul a {
color: var(--carl-ink) !important;
}
.carl-glass-header .nav li ul a:hover {
background: var(--carl-soft-blue) !important;
color: var(--carl-blue-gray) !important;
}
/* Divi default mobile hamburger color，僅作備用 */
.carl-glass-header .mobile_menu_bar::before {
color: var(--carl-ink) !important;
}
/* Header CTA Button Fix
防止透明 Header 規則誤傷 Button Module */
.carl-glass-header .carl-btn-primary,
.carl-glass-header .carl-btn-primary .et_pb_button,
.carl-glass-header .carl-btn-primary.et_pb_button,
.carl-glass-header .et_pb_button.carl-btn-primary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #ffffff !important;
background: linear-gradient(
135deg,
var(--carl-blue-action),
var(--carl-blue-action-dark)
) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 16px 30px rgba(45, 125, 210, 0.22) !important;
font-weight: 800 !important;
line-height: 1.2 !important;
padding: 13px 24px !important;
text-decoration: none !important;
}
.carl-glass-header .carl-btn-primary:hover,
.carl-glass-header .carl-btn-primary .et_pb_button:hover,
.carl-glass-header .carl-btn-primary.et_pb_button:hover,
.carl-glass-header .et_pb_button.carl-btn-primary:hover {
color: #ffffff !important;
background: linear-gradient(
135deg,
var(--carl-blue-action-dark),
var(--carl-blue-action)
) !important;
box-shadow: 0 18px 34px rgba(45, 125, 210, 0.26) !important;
}
.carl-glass-header .carl-btn-secondary,
.carl-glass-header .carl-btn-secondary .et_pb_button,
.carl-glass-header .carl-btn-secondary.et_pb_button,
.carl-glass-header .et_pb_button.carl-btn-secondary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--carl-blue-gray) !important;
background: rgba(255, 255, 255, 0.72) !important;
border: 1px solid rgba(47, 93, 124, 0.15) !important;
border-radius: 999px !important;
box-shadow: none !important;
font-weight: 800 !important;
line-height: 1.2 !important;
padding: 13px 24px !important;
text-decoration: none !important;
}
.carl-glass-header .carl-btn-secondary:hover,
.carl-glass-header .carl-btn-secondary .et_pb_button:hover,
.carl-glass-header .carl-btn-secondary.et_pb_button:hover,
.carl-glass-header .et_pb_button.carl-btn-secondary:hover {
color: var(--carl-blue-action) !important;
background: rgba(255, 255, 255, 0.86) !important;
border-color: rgba(45, 125, 210, 0.20) !important;
}
/* Button Module wrapper 保持透明，真正背景由 a.et_pb_button 承擔 */
.carl-glass-header .et_pb_button_module_wrapper.carl-btn-primary,
.carl-glass-header .et_pb_button_module_wrapper.carl-btn-secondary {
background: transparent !important;
box-shadow: none !important;
}
/* ==============================
06. Mobile / Tablet Transparent Header
Section CSS Class: carl-mobile-header
Row CSS Class: carl-mobile-header-row
Logo Module CSS Class: carl-mobile-logo
Hamburger Icon CSS Class: carl-mobile-menu-trigger
重要：
- 不要把手機頂部 Header 設為 carl-mobile-overlay
- 手機頂部 Header 建議只放 Logo + Hamburger
- 預約按鈕放到 Overlay 裡，不放在頂部 Header
============================== */
.carl-mobile-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999;
width: 100% !important;
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border-bottom: 1px solid transparent !important;
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease,
backdrop-filter 0.25s ease;
}
/* WordPress 登入狀態下避免被管理員工具列遮住 */
body.admin-bar .carl-mobile-header {
top: 32px !important;
}
@media (max-width: 782px) {
body.admin-bar .carl-mobile-header {
top: 46px !important;
}
}
/* Divi Sticky class 只保留 fixed，不讓它自動產生毛玻璃底 */
.carl-mobile-header.et_pb_sticky,
.et_pb_sticky .carl-mobile-header,
.carl-mobile-header.et_pb_sticky--top,
.et_pb_sticky--top .carl-mobile-header {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border-bottom-color: transparent !important;
}
/* 滾動後才出現毛玻璃 */
body.carl-scrolled .carl-mobile-header,
body.carl-scrolled .carl-mobile-header.et_pb_sticky,
body.carl-scrolled .et_pb_sticky .carl-mobile-header {
background: rgba(255, 253, 248, 0.54) !important;
-webkit-backdrop-filter: blur(16px) saturate(118%) !important;
backdrop-filter: blur(16px) saturate(118%) !important;
box-shadow: 0 10px 28px rgba(30, 42, 54, 0.065) !important;
border-bottom: 1px solid rgba(47, 93, 124, 0.065) !important;
}
/* 回到頂部強制透明 */
body:not(.carl-scrolled) .carl-mobile-header {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border-bottom-color: transparent !important;
}
/* 手機 / 平板 Header Row：控制 Logo 和 hamburger 位置 */
.carl-mobile-header > .et_pb_row,
.carl-mobile-header-row {
width: min(calc(100% - 32px), 1180px) !important;
max-width: 1180px !important;
min-height: 74px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 10px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
background: transparent !important;
box-shadow: none !important;
}
.carl-mobile-header > .et_pb_row > .et_pb_column,
.carl-mobile-header-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
background: transparent !important;
box-shadow: none !important;
}
.carl-mobile-header > .et_pb_row > .et_pb_column:first-child,
.carl-mobile-header-row > .et_pb_column:first-child {
justify-content: flex-start !important;
flex: 1 1 auto !important;
}
.carl-mobile-header > .et_pb_row > .et_pb_column:last-child,
.carl-mobile-header-row > .et_pb_column:last-child {
justify-content: flex-end !important;
flex: 0 0 auto !important;
}
/* 手機 Logo 模組 */
.carl-mobile-logo,
.carl-mobile-logo .et_pb_image_wrap,
.carl-mobile-logo img {
display: block !important;
margin: 0 !important;
}
.carl-mobile-logo img {
max-height: 46px !important;
width: auto !important;
}
/* 若手機 Header 裡誤放了預約按鈕，先隱藏，避免和 Logo 重疊。
預約 CTA 建議放在全屏覆蓋菜單裡。 */
.carl-mobile-header .carl-btn-primary,
.carl-mobile-header .carl-btn-secondary,
.carl-mobile-header .carl-mobile-header-cta {
display: none !important;
}
/* 手機 Header 右側 hamburger button */
.carl-mobile-menu-trigger {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 15px;
border: 1px solid rgba(47, 93, 124, 0.10);
background: rgba(255, 253, 248, 0.34);
-webkit-backdrop-filter: blur(10px) saturate(112%);
backdrop-filter: blur(10px) saturate(112%);
box-shadow: 0 10px 24px rgba(30, 42, 54, 0.045);
color: var(--carl-ink) !important;
cursor: pointer;
}
/* 滾動後 hamburger 按鈕稍微提高可讀性，但仍保持輕透 */
body.carl-scrolled .carl-mobile-menu-trigger {
background: rgba(255, 253, 248, 0.46);
-webkit-backdrop-filter: blur(12px) saturate(115%);
backdrop-filter: blur(12px) saturate(115%);
box-shadow: 0 12px 26px rgba(30, 42, 54, 0.055);
}
/* 回到頂部時，hamburger 也恢復更透明 */
body:not(.carl-scrolled) .carl-mobile-menu-trigger {
background: rgba(255, 253, 248, 0.34);
box-shadow: 0 10px 24px rgba(30, 42, 54, 0.045);
}
.carl-mobile-menu-trigger .et-pb-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
color: var(--carl-ink) !important;
font-size: 28px !important;
line-height: 1 !important;
}
.carl-mobile-header .et_pb_image,
.carl-mobile-header .et_pb_text,
.carl-mobile-header .et_pb_code,
.carl-mobile-header .et_pb_icon {
margin-bottom: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* ==============================
07. Mobile Fullscreen Overlay Menu
Overlay Section CSS Class: carl-mobile-overlay
Overlay Row CSS Class: carl-mobile-overlay-inner
============================== */
/*
前台預設隱藏 Overlay。
Divi 5 Interactions 點擊 Show / Toggle 時，inline style 會覆蓋這條 display:none。
*/
body:not(.et-fb) .carl-mobile-overlay {
display: none;
}
/* 全屏覆蓋菜單本體：毛玻璃效果 */
.carl-mobile-overlay {
position: fixed !important;
inset: 0 !important;
z-index: 100000 !important;
width: 100vw !important;
max-width: none !important;
min-height: 100vh !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain;
background:
radial-gradient(circle at 84% 6%, rgba(214, 168, 90, 0.18), transparent 32%),
radial-gradient(circle at 12% 12%, rgba(45, 125, 210, 0.12), transparent 30%),
linear-gradient(135deg, rgba(255, 253, 248, 0.60) 0%, rgba(250, 248, 244, 0.66) 46%, rgba(238, 244, 248, 0.62) 100%) !important;
-webkit-backdrop-filter: blur(26px) saturate(118%);
backdrop-filter: blur(26px) saturate(118%);
}
/* Overlay 背後淡淡的大圓裝飾 */
.carl-mobile-overlay::before {
content: "";
position: fixed;
right: -170px;
bottom: -170px;
width: 420px;
height: 420px;
border-radius: 50%;
border: 1px solid rgba(47, 93, 124, 0.10);
box-shadow:
0 0 0 54px rgba(45, 125, 210, 0.035),
0 0 0 112px rgba(214, 168, 90, 0.035);
pointer-events: none;
}
.carl-mobile-overlay > .et_pb_row {
position: relative;
z-index: 2;
}
/* Overlay 內層容器 */
.carl-mobile-overlay .carl-mobile-overlay-inner,
.carl-mobile-overlay-inner {
width: 100% !important;
max-width: 560px !important;
min-height: 100vh !important;
min-height: 100dvh !important;
margin: 0 auto !important;
padding: 22px 26px 36px !important;
display: flex !important;
flex-direction: column !important;
}
.carl-mobile-overlay-inner > .et_pb_column {
width: 100% !important;
min-height: calc(100vh - 58px);
min-height: calc(100dvh - 58px);
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* 手機菜單品牌區 */
.carl-mobile-brand {
margin-bottom: 68px !important;
padding-right: 72px !important;
}
.carl-mobile-brand h1,
.carl-mobile-brand h2,
.carl-mobile-brand h3,
.carl-mobile-brand h4 {
margin: 0 0 4px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h3) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
}
.carl-mobile-brand p {
margin: 0 !important;
padding: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.45 !important;
font-weight: 700 !important;
letter-spacing: 0.03em;
}
/* Overlay 右上角 close button */
.carl-mobile-close {
position: fixed !important;
top: 16px !important;
right: 18px !important;
z-index: 100010 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 16px;
border: 1px solid rgba(47, 93, 124, 0.14);
background: rgba(255, 253, 248, 0.62);
-webkit-backdrop-filter: blur(14px) saturate(125%);
backdrop-filter: blur(14px) saturate(125%);
box-shadow: 0 16px 30px rgba(30, 42, 54, 0.075);
color: var(--carl-ink) !important;
cursor: pointer;
}
.carl-mobile-close .et-pb-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
color: var(--carl-ink) !important;
font-size: 28px !important;
line-height: 1 !important;
}
/* 手機菜單文字項目 */
.carl-mobile-menu-link {
position: relative;
margin: 0 0 22px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
transform: translateX(0);
transition: transform 0.22s ease, color 0.22s ease;
}
.carl-mobile-menu-link,
.carl-mobile-menu-link .et_pb_text_inner,
.carl-mobile-menu-link a {
color: var(--carl-ink) !important;
font-size: var(--carl-type-menu) !important;
line-height: 1.08 !important;
font-weight: 850 !important;
letter-spacing: -0.04em !important;
text-decoration: none !important;
}
.carl-mobile-menu-link::before {
content: "";
position: absolute;
left: -17px;
top: 50%;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--carl-gold);
opacity: 0;
transform: translateY(-50%) scale(0.6);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.carl-mobile-menu-link:hover,
.carl-mobile-menu-link:focus-within {
color: var(--carl-blue-gray) !important;
transform: translateX(8px);
}
.carl-mobile-menu-link:hover::before,
.carl-mobile-menu-link:focus-within::before {
opacity: 1;
transform: translateY(-50%) scale(1);
}
/* 手機菜單底部 CTA */
.carl-mobile-menu-cta {
margin-top: 28px !important;
margin-bottom: 0 !important;
}
.carl-mobile-menu-cta .et_pb_button,
.carl-mobile-menu-cta.et_pb_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-height: 52px;
padding: 14px 24px !important;
border: 0 !important;
border-radius: 999px !important;
color: #ffffff !important;
background: linear-gradient(135deg, var(--carl-blue-action), var(--carl-blue-action-dark)) !important;
box-shadow: 0 18px 34px rgba(45, 125, 210, 0.23);
font-size: var(--carl-type-button) !important;
line-height: 1.2 !important;
font-weight: 850 !important;
text-decoration: none !important;
}
/* Overlay 底部可選說明文字 */
.carl-mobile-overlay-note {
margin-top: auto !important;
padding-top: 34px !important;
}
.carl-mobile-overlay-note,
.carl-mobile-overlay-note p {
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1.6 !important;
}
/*
Divi Sticky 兼容補強：
有時候 Divi 會把 sticky class 加在父層或 Section 自身，
以下選擇器確保回到頂部 / 滾動後狀態都能正常套用。
*/
.et_pb_section.carl-glass-header,
.et_pb_section.carl-mobile-header {
will-change: background-color, backdrop-filter, box-shadow;
}
/* ==============================
08. CSS Website Mockup
Code Module wrapper: carl-web-mockup
============================== */
.carl-web-mockup {
position: relative !important;
z-index: 8 !important;
display: block !important;
width: 100% !important;
max-width: 560px !important;
height: auto !important;
min-height: 0 !important;
margin: 0 auto;
padding: 28px 0 38px;
overflow: visible !important;
isolation: isolate;
}
/* Browser frame */
.carl-browser {
position: relative !important;
z-index: 3 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: hidden;
border: 1px solid rgba(58, 85, 110, 0.14);
border-radius: 28px;
background: #FFFFFF;
box-shadow:
0 28px 70px rgba(33, 44, 58, 0.12),
0 8px 22px rgba(33, 44, 58, 0.05);
transform: rotate(1.2deg);
transform-origin: 50% 50%;
}
/* Browser top */
.carl-browser-top {
display: flex;
align-items: center;
gap: 7px;
height: 42px;
padding: 0 16px;
border-bottom: 0;
background: #F4F7F9;
}
.carl-browser-top span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #CAD5DC;
}
.carl-browser-top span:first-child {
background: #CAD5DC;
}
.carl-address-bar {
width: 42%;
height: 8px;
margin-left: 12px;
border-radius: 999px;
background: #E2E9ED;
}
/* Browser body */
.carl-browser-body {
padding: 26px;
background: linear-gradient(145deg, #FFFFFF 0%, #F7FAFB 100%);
}
.carl-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
}
.carl-logo-line {
width: 58px;
height: 12px;
border-radius: 999px;
background: var(--carl-blue-gray);
}
.carl-menu-lines {
display: flex;
gap: 8px;
}
.carl-menu-lines span {
width: 32px;
height: 6px;
border-radius: 999px;
background: #DCE5EA;
}
/* Inner website hero: matches carl-work-homepage-decision-copy.html. */
.carl-hero-card {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 24px;
align-items: center;
min-height: 238px;
padding: 0;
border-radius: 0;
background: transparent;
}
.carl-copy {
width: auto;
min-width: 0;
}
.carl-title-line {
width: 92%;
height: 18px;
margin: 10px 0;
border-radius: 999px;
background: var(--carl-ink-soft);
}
.carl-text-line {
height: 11px;
margin: 10px 0;
border-radius: 999px;
background: #DBE4E9;
}
.carl-text-line.medium {
width: 66%;
}
.carl-text-line.long {
width: 82%;
}
.carl-text-line.short {
width: 66%;
}
.carl-button-line {
width: 92px;
height: 28px;
margin-top: 22px;
border-radius: 999px;
background: var(--carl-blue-action);
box-shadow: none;
}
.carl-visual-circle {
width: 100%;
max-width: 206px;
height: auto;
aspect-ratio: 1;
justify-self: end;
border-radius: 24px 24px 68px 24px;
background:
radial-gradient(circle at 64% 32%, #FFFFFF 0 8%, transparent 9%),
linear-gradient(145deg, #DFEAF0 0%, #8EB2C7 100%);
box-shadow: none;
}
/* Bottom cards */
.carl-card-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 0;
}
.carl-small-card {
min-height: 84px;
padding: 14px;
border: 1px solid #E1E8EC;
border-radius: 13px;
background: #FFFFFF;
}
.carl-small-card span {
display: block;
width: 24px;
height: 24px;
margin-bottom: 12px;
border-radius: 8px;
background: var(--carl-soft-sand);
}
.carl-small-card p {
width: 88%;
height: 6px;
margin: 7px 0 0;
border-radius: 999px;
background: #DFE6EA;
}
.carl-small-card p.short {
width: 66%;
}
/* Floating tags */
.carl-floating-tag {
position: absolute;
z-index: 10 !important;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
border-radius: 12px;
border: 1px solid rgba(47, 93, 124, 0.11);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 16px 40px rgba(30, 42, 54, 0.09);
color: var(--carl-blue-gray);
font-size: var(--carl-type-meta) ;
line-height: 1.35;
font-weight: 800;
white-space: nowrap;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.carl-floating-tag::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #D8B36A;
}
.carl-floating-tag.tag-top {
top: 0;
right: 28px;
}
.carl-floating-tag.tag-bottom {
left: -28px;
bottom: 14px;
}
/* ==============================
09. Trust Strip Bridge
Section CSS Class: carl-trust-strip
Row CSS Class: carl-trust-row
Next Section CSS Class: carl-content-section
============================== */
/* 過渡橋：避免 Hero 與下方內容區斷層 */
.carl-trust-strip {
position: relative;
z-index: 6;
margin-top: -42px !important;
padding-top: 0 !important;
padding-bottom: 54px !important;
background:
linear-gradient(
180deg,
rgba(238, 244, 248, 0) 0%,
rgba(238, 244, 248, 0.48) 22%,
rgba(250, 248, 244, 0.82) 58%,
#FAF8F4 100%
) !important;
}
.carl-trust-row {
display: grid !important;
grid-template-columns: 1.12fr repeat(3, 1fr);
gap: 1px;
width: 90% !important;
max-width: 1180px !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 24px;
border: 1px solid rgba(47, 93, 124, 0.13);
background: rgba(221, 229, 234, 0.82);
box-shadow:
0 18px 44px rgba(30, 42, 54, 0.075),
0 2px 0 rgba(255, 255, 255, 0.55) inset;
}
/* 清除 Divi 預設欄寬 */
.carl-trust-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
padding: 26px 28px;
background: rgba(255, 253, 248, 0.86);
backdrop-filter: blur(8px);
}
.carl-trust-row > .et_pb_column:first-child {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, #FFFDF8 0%, #F7EFE1 100%);
}
.carl-trust-row .et_pb_module {
margin-bottom: 0 !important;
}
.carl-trust-row h3 {
margin: 0 0 6px;
padding: 0;
color: var(--carl-ink);
font-size: var(--carl-type-card-title) ;
line-height: 1.5 ;
font-weight: 700 ;
}
.carl-trust-row p {
margin: 0;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.6;
}
.carl-trust-row > .et_pb_column:first-child p {
color: var(--carl-blue-gray);
font-size: var(--carl-type-small) ;
font-weight: 850;
line-height: 1.5;
}
/* 下方正式內容區 */
.carl-content-section {
background: #FAF8F4 !important;
padding-top: 42px !important;
}
/* ==============================
10. Responsive
============================== */
/* Desktop */
@media (min-width: 981px) {
.carl-mobile-header {
display: none !important;
}
.carl-mobile-menu-trigger {
display: none !important;
}
}
/* Tablet + Phone */
@media (max-width: 980px) {
.carl-glass-header {
display: none !important;
}
.carl-mobile-header {
display: block !important;
}
.carl-home-hero {
padding-top: 128px !important;
padding-bottom: 72px !important;
}
.carl-home-hero::before {
width: 470px;
height: 470px;
right: -210px;
bottom: -140px;
}
.carl-web-mockup {
max-width: 520px !important;
}
.carl-trust-strip {
margin-top: -32px !important;
padding-bottom: 42px !important;
}
.carl-trust-row {
grid-template-columns: repeat(2, 1fr);
width: calc(100% - 40px) !important;
}
/*
使用自訂全屏 Overlay Menu 時，隱藏 Divi 預設手機選單。
否則會同時出現 Divi 原生下拉菜單 + 自訂 Overlay Menu。
*/
.carl-glass-header .et_pb_menu .et_mobile_nav_menu,
.carl-glass-header .et_pb_menu .et_mobile_menu,
.carl-mobile-header .et_pb_menu .et_mobile_nav_menu,
.carl-mobile-header .et_pb_menu .et_mobile_menu {
display: none !important;
}
.carl-mobile-menu-trigger {
display: inline-flex !important;
}
}
/* Phone */
@media (max-width: 767px) {
.carl-mobile-header > .et_pb_row,
.carl-mobile-header-row {
width: calc(100% - 28px) !important;
min-height: 70px !important;
padding: 10px 0 !important;
}
.carl-mobile-menu-trigger {
width: 44px !important;
height: 44px !important;
border-radius: 14px;
}
.carl-mobile-logo .et_pb_image_wrap,
.carl-mobile-logo img {
max-height: 40px !important;
}
.carl-home-hero {
padding-top: 112px !important;
padding-bottom: 58px !important;
}
.carl-home-hero::before {
width: 320px;
height: 320px;
right: -150px;
bottom: -80px;
box-shadow:
0 0 0 45px rgba(45, 125, 210, 0.030),
0 0 0 88px rgba(214, 168, 90, 0.035);
}
.carl-btn-primary,
.carl-btn-primary .et_pb_button,
.carl-btn-secondary,
.carl-btn-secondary .et_pb_button {
width: 100%;
text-align: center;
}
/* Mobile Overlay compact */
.carl-mobile-overlay .carl-mobile-overlay-inner,
.carl-mobile-overlay-inner {
padding: 18px 24px 34px !important;
}
.carl-mobile-brand {
margin-bottom: 64px !important;
padding-right: 70px !important;
}
.carl-mobile-close {
top: 14px !important;
right: 16px !important;
width: 46px !important;
height: 46px !important;
}
.carl-mobile-menu-link {
margin-bottom: 21px !important;
}
.carl-mobile-menu-link,
.carl-mobile-menu-link .et_pb_text_inner,
.carl-mobile-menu-link a {
font-size: var(--carl-type-menu) !important;
}
.carl-mobile-menu-cta .et_pb_button,
.carl-mobile-menu-cta.et_pb_button {
min-height: 52px;
padding: 14px 22px !important;
font-size: var(--carl-type-button) !important;
}
/* Mobile mockup compact */
.carl-web-mockup {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
height: auto !important;
padding-top: 22px !important;
padding-bottom: 32px !important;
overflow: visible !important;
}
.carl-browser {
border-radius: 22px !important;
transform: none !important;
}
.carl-browser-top {
height: 42px !important;
padding: 0 16px !important;
gap: 7px !important;
}
.carl-browser-top span {
width: 8px !important;
height: 8px !important;
}
.carl-address-bar {
height: 8px !important;
width: 42% !important;
margin-left: 12px !important;
}
.carl-browser-body {
padding: 18px !important;
}
.carl-nav {
margin-bottom: 0 !important;
}
.carl-logo-line {
width: 58px !important;
height: 12px !important;
}
.carl-menu-lines {
gap: 8px !important;
}
.carl-menu-lines span {
width: 28px !important;
height: 6px !important;
}
.carl-hero-card {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
gap: 14px !important;
min-height: 190px !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.carl-copy {
width: auto !important;
}
.carl-title-line {
width: 92% !important;
height: 16px !important;
margin: 9px 0 !important;
}
.carl-text-line {
height: 8px !important;
margin: 8px 0 !important;
}
.carl-button-line {
width: 72px !important;
height: 24px !important;
margin-top: 14px !important;
}
.carl-visual-circle {
width: 100% !important;
max-width: 148px !important;
height: auto !important;
aspect-ratio: 1 !important;
border-radius: 19px 19px 48px 19px !important;
box-shadow: none !important;
}
.carl-card-row {
grid-template-columns: repeat(3, 1fr) !important;
gap: 7px !important;
margin-top: 0 !important;
}
.carl-small-card {
min-height: 66px !important;
padding: 9px !important;
border-radius: 12px !important;
}
.carl-small-card span {
width: 24px !important;
height: 24px !important;
margin-bottom: 9px !important;
border-radius: 7px !important;
}
.carl-small-card p {
height: 5px !important;
margin-bottom: 6px !important;
}
.carl-floating-tag {
font-size: var(--carl-type-meta) !important;
padding: 8px 10px !important;
border-radius: 12px !important;
}
.carl-floating-tag::before {
width: 6px !important;
height: 6px !important;
}
.carl-floating-tag.tag-top {
top: 0 !important;
right: 10px !important;
}
.carl-floating-tag.tag-bottom {
left: 8px !important;
bottom: 8px !important;
}
/* Mobile trust strip */
.carl-trust-strip {
margin-top: -22px !important;
padding-bottom: 34px !important;
}
.carl-trust-row {
grid-template-columns: 1fr;
width: calc(100% - 28px) !important;
border-radius: 20px;
}
.carl-trust-row > .et_pb_column {
padding: 22px 24px;
}
.carl-content-section {
padding-top: 30px !important;
}
/* Mobile Eyebrow */
.carl-eyebrow {
gap: 10px;
font-size: var(--carl-type-eyebrow) ;
letter-spacing: 0.04em;
}
.carl-eyebrow-line::before {
width: 24px;
}
.carl-eyebrow-line-gradient::before {
width: 26px;
}
.carl-eyebrow-dot::before {
width: 8px;
height: 8px;
box-shadow: 0 0 0 5px rgba(214, 168, 90, 0.16);
}
.carl-eyebrow-dot-simple::before {
width: 7px;
height: 7px;
}
}
/* ==============================
11. Overlay Glass Effect Fix
目的：
讓手機 / 平板全屏覆蓋菜單真正呈現「毛玻璃」，
可以隱約看到下面頁面內容，而不是像實色背景。
============================== */
/* 全屏覆蓋菜單本體：更透明 + 更強 blur */
.carl-mobile-overlay {
isolation: isolate;
background:
radial-gradient(circle at 84% 6%, rgba(214, 168, 90, 0.12), transparent 34%),
radial-gradient(circle at 12% 12%, rgba(45, 125, 210, 0.10), transparent 32%),
linear-gradient(
135deg,
rgba(255, 253, 248, 0.46) 0%,
rgba(250, 248, 244, 0.50) 48%,
rgba(238, 244, 248, 0.46) 100%
) !important;
-webkit-backdrop-filter: blur(30px) saturate(125%) !important;
backdrop-filter: blur(30px) saturate(125%) !important;
}
/* 用 ::after 再加一層非常淡的玻璃膜，避免太花，但仍能看到下面內容 */
.carl-mobile-overlay::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: rgba(255, 253, 248, 0.12);
-webkit-backdrop-filter: blur(10px) saturate(112%);
backdrop-filter: blur(10px) saturate(112%);
}
/* 確保內容在玻璃膜之上 */
.carl-mobile-overlay > .et_pb_row,
.carl-mobile-overlay .carl-mobile-overlay-inner,
.carl-mobile-overlay-inner,
.carl-mobile-overlay .et_pb_column,
.carl-mobile-overlay .et_pb_module {
position: relative;
z-index: 2;
}
/* 清掉 Divi 可能加在 Overlay 內部 Row / Column / Module 上的白底 */
.carl-mobile-overlay .et_pb_row,
.carl-mobile-overlay .et_pb_column,
.carl-mobile-overlay .et_pb_module,
.carl-mobile-overlay .et_pb_text,
.carl-mobile-overlay .et_pb_text_inner,
.carl-mobile-overlay .et_pb_code,
.carl-mobile-overlay .et_pb_code_inner {
background: transparent !important;
box-shadow: none !important;
}
/* 關閉 X 也改成半透明毛玻璃 */
.carl-mobile-close {
background: rgba(255, 253, 248, 0.42) !important;
-webkit-backdrop-filter: blur(16px) saturate(118%) !important;
backdrop-filter: blur(16px) saturate(118%) !important;
box-shadow: 0 16px 30px rgba(30, 42, 54, 0.075) !important;
}
/* CTA 保持實色，避免全屏菜單太淡時行動按鈕不清楚 */
.carl-mobile-overlay .carl-mobile-menu-cta .et_pb_button,
.carl-mobile-overlay .carl-mobile-menu-cta.et_pb_button {
background: linear-gradient(135deg, var(--carl-blue-action), var(--carl-blue-action-dark)) !important;
color: #ffffff !important;
}
/* 瀏覽器不支援 backdrop-filter 時的備用底色 */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
.carl-mobile-overlay {
background: rgba(255, 253, 248, 0.88) !important;
}
}
/* =========================================================
12. Homepage Content Blocks
Added on top of the CURRENT working CSS version.
This section does not replace or rewrite:
- Header
- Mobile overlay
- Hero
- CSS mockup
- Trust strip
========================================================= */
/* ==============================
12.1 Common Problems / Pain Block
Divi 5 classes:
Section: carl-pain-section
Row: carl-pain-grid
Left Column: carl-pain-note
Right Column: carl-pain-list
Each Blurb: carl-pain-item
Optional Tag Text Module: carl-pain-tag
============================== */
.carl-pain-section {
background: var(--carl-warm-bg) !important;
}
.carl-pain-grid {
display: grid !important;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 72px;
align-items: start;
}
.carl-pain-grid > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
/* 左側深色說明卡 */
.carl-pain-note {
position: sticky;
top: 110px;
padding: 32px !important;
overflow: hidden;
border-radius: 28px;
color: #FFFFFF;
background:
radial-gradient(
circle at 88% 10%,
rgba(214, 168, 90, 0.15),
transparent 34%
),
linear-gradient(150deg, #334758, #1E2A36);
box-shadow: var(--carl-shadow);
}
.carl-pain-note h1,
.carl-pain-note h2,
.carl-pain-note h3,
.carl-pain-note h4 {
color: #FFFFFF !important;
}
.carl-pain-note p {
color: rgba(255, 255, 255, 0.76) !important;
}
.carl-pain-tag {
display: inline-flex;
width: fit-content;
margin-top: 22px !important;
padding: 9px 13px !important;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.88) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1.4 !important;
font-weight: 800 !important;
}
/* 右側問題卡列表 */
.carl-pain-list {
display: grid !important;
gap: 14px;
counter-reset: carl-pain;
}
.carl-pain-list > .et_pb_module,
.carl-pain-list > .et_pb_blurb {
margin-bottom: 0 !important;
}
.carl-pain-item {
position: relative;
counter-increment: carl-pain;
margin-bottom: 0 !important;
padding: 24px 24px 24px 84px !important;
border: 1px solid var(--carl-line) !important;
border-radius: 18px !important;
background: #FFFFFF !important;
box-shadow: none;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.carl-pain-item:hover {
transform: translateY(-4px);
border-color: rgba(47, 93, 124, 0.16) !important;
box-shadow: var(--carl-shadow-soft);
}
/* 自動生成 01 / 02 / 03 / 04 */
.carl-pain-item::before {
content: "0" counter(carl-pain);
position: absolute;
top: 24px;
left: 24px;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--carl-soft-blue);
color: var(--carl-blue-gray);
font-size: 14px;
line-height: 1;
font-weight: 850;
}
.carl-pain-item .et_pb_blurb_content {
max-width: none !important;
margin: 0 !important;
}
.carl-pain-item .et_pb_main_blurb_image {
display: none !important;
}
.carl-pain-item .et_pb_module_header {
margin: 0 0 8px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-card-title) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
}
.carl-pain-item .et_pb_blurb_description,
.carl-pain-item .et_pb_blurb_description p {
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.7 !important;
}
/* ==============================
12.2 Services Grid
Divi 5 classes:
Section: carl-services-section
Row: carl-service-grid
Every Column: carl-service-card
Featured Column: add carl-service-featured
Blurb Module: normal Divi Blurb
Tag Text Module: carl-service-tags
Tag Text Module content example:
首頁設計內頁系統
============================== */
.carl-services-section {
background: #FFFFFF !important;
}
.carl-service-grid {
display: grid !important;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 18px;
width: 90% !important;
max-width: 1180px !important;
}
.carl-service-grid > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
/* 第一、第四張較寬；第二、第三張較窄 */
.carl-service-grid > .et_pb_column:nth-child(1),
.carl-service-grid > .et_pb_column:nth-child(4) {
grid-column: span 7;
}
.carl-service-grid > .et_pb_column:nth-child(2),
.carl-service-grid > .et_pb_column:nth-child(3) {
grid-column: span 5;
}
.carl-service-card {
position: relative;
display: flex !important;
flex-direction: column !important;
min-height: 300px;
padding: 30px !important;
overflow: hidden;
border: 1px solid var(--carl-line);
border-radius: 24px;
background: #FFFFFF;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.carl-service-card:hover {
transform: translateY(-5px);
border-color: rgba(47, 93, 124, 0.16);
box-shadow: var(--carl-shadow-soft);
}
.carl-service-card > .et_pb_module:last-child {
margin-bottom: 0 !important;
}
.carl-service-card .et_pb_blurb {
margin-bottom: 24px !important;
}
.carl-service-card .et_pb_blurb_content {
max-width: none !important;
margin: 0 !important;
}
.carl-service-card .et_pb_main_blurb_image {
margin-bottom: 32px !important;
}
.carl-service-card .et_pb_image_wrap {
display: grid !important;
place-items: center;
width: 54px !important;
height: 54px !important;
border-radius: 16px;
background: var(--carl-soft-blue);
}
.carl-service-card .et-pb-icon {
color: var(--carl-blue-gray) !important;
font-size: 26px !important;
}
.carl-service-card .et_pb_module_header {
margin: 0 0 12px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-card-title) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
}
.carl-service-card .et_pb_blurb_description,
.carl-service-card .et_pb_blurb_description p {
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.75 !important;
}
/* 標籤放到卡片底部 */
.carl-service-tags {
margin-top: auto !important;
margin-bottom: 0 !important;
}
.carl-service-tags .et_pb_text_inner {
display: flex !important;
flex-wrap: wrap;
gap: 8px;
}
.carl-service-tags span {
display: inline-flex;
align-items: center;
padding: 7px 10px;
border-radius: 999px;
background: var(--carl-warm-bg);
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
line-height: 1.2;
font-weight: 800;
}
/* 首張深色重點服務卡 */
.carl-service-featured {
color: #FFFFFF;
border: 0 !important;
background:
radial-gradient(
circle at 90% 8%,
rgba(214, 168, 90, 0.18),
transparent 28%
),
linear-gradient(145deg, #334758, #1E2A36) !important;
}
.carl-service-featured:hover {
border-color: transparent !important;
}
.carl-service-featured .et_pb_image_wrap {
background: rgba(255, 255, 255, 0.12) !important;
}
.carl-service-featured .et-pb-icon,
.carl-service-featured .et_pb_module_header {
color: #FFFFFF !important;
}
.carl-service-featured .et_pb_blurb_description,
.carl-service-featured .et_pb_blurb_description p {
color: rgba(255, 255, 255, 0.74) !important;
}
.carl-service-featured .carl-service-tags span {
background: rgba(255, 255, 255, 0.11);
color: rgba(255, 255, 255, 0.88);
}
/* ==============================
12.3 Difference / Method Block
Divi 5 classes:
Section: carl-difference-section
Row: carl-difference-grid
Left Code Module HTML wrapper: carl-compare-panel
Right list parent: carl-difference-list
Each right-side Blurb: carl-difference-item
============================== */
.carl-difference-section {
background:
linear-gradient(
180deg,
#EEF4F8 0%,
#FAF8F4 68%,
#FFFFFF 100%
) !important;
}
.carl-difference-grid {
display: grid !important;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 70px;
align-items: center;
}
.carl-difference-grid > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
/* 左側比較表 */
.carl-compare-panel {
position: relative;
z-index: 1;
padding: 34px;
border: 1px solid var(--carl-line);
border-radius: 30px;
background: #FFFFFF;
box-shadow: var(--carl-shadow-soft);
}
.carl-compare-panel::before {
content: "";
position: absolute;
z-index: -1;
top: -22px;
right: -16px;
width: 92px;
height: 92px;
border-radius: 28px;
background:
linear-gradient(
135deg,
rgba(45, 125, 210, 0.20),
rgba(214, 168, 90, 0.20)
);
transform: rotate(18deg);
}
.carl-compare-row {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 18px;
padding: 20px 0;
border-bottom: 1px solid var(--carl-line);
}
.carl-compare-row:last-child {
border-bottom: 0;
}
.carl-compare-row strong {
color: var(--carl-ink);
font-weight: 850;
}
.carl-compare-row span {
color: var(--carl-text-gray);
}
/* 右側方法重點 */
.carl-difference-list {
display: grid !important;
gap: 18px;
margin-top: 32px !important;
}
.carl-difference-item {
margin-bottom: 0 !important;
}
.carl-difference-item .et_pb_blurb_content {
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr);
gap: 14px;
max-width: none !important;
margin: 0 !important;
}
.carl-difference-item .et_pb_main_blurb_image {
grid-column: 1;
margin: 2px 0 0 !important;
}
.carl-difference-item .et_pb_image_wrap {
display: grid !important;
place-items: center;
width: 30px !important;
height: 30px !important;
border-radius: 10px;
background:
linear-gradient(
135deg,
var(--carl-blue-action),
var(--carl-blue-action-dark)
);
}
.carl-difference-item .et-pb-icon {
color: #FFFFFF !important;
font-size: 16px !important;
}
.carl-difference-item .et_pb_blurb_container {
grid-column: 2;
}
.carl-difference-item .et_pb_module_header {
margin-bottom: 6px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-card-title) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
}
.carl-difference-item .et_pb_blurb_description,
.carl-difference-item .et_pb_blurb_description p {
color: var(--carl-text-gray) !important;
line-height: 1.7 !important;
}
/* ==============================
12.4 FAQ Block - Divi Toggle Modules
Divi 5 classes:
Section: carl-faq-section
Row: carl-faq-grid
Left Column or Text wrapper: carl-faq-intro
Right Column: carl-faq-list
Each Toggle Module: carl-faq-toggle
============================== */
.carl-faq-section {
background: var(--carl-warm-bg) !important;
}
.carl-faq-grid {
display: grid !important;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 70px;
align-items: start;
}
.carl-faq-grid > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
.carl-faq-intro {
position: sticky;
top: 110px;
}
.carl-faq-list {
display: grid !important;
gap: 12px;
}
.carl-faq-list > .et_pb_module {
margin-bottom: 0 !important;
}
.carl-faq-toggle.et_pb_toggle {
margin-bottom: 0 !important;
padding: 0 !important;
overflow: hidden;
border: 1px solid var(--carl-line) !important;
border-radius: 18px !important;
background: #FFFFFF !important;
box-shadow: none;
transition:
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.carl-faq-toggle.et_pb_toggle_open {
border-color: rgba(47, 93, 124, 0.18) !important;
box-shadow: var(--carl-shadow-soft);
}
.carl-faq-toggle .et_pb_toggle_title {
position: relative;
padding: 22px 64px 22px 24px !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-faq-title) !important;
line-height: 1.45 !important;
font-weight: 850 !important;
}
/* 用純 CSS 繪製加號／減號，取代 Divi icon font */
.carl-faq-toggle .et_pb_toggle_title::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
right: 24px !important;
width: 18px !important;
height: 18px !important;
margin-top: 0 !important;
transform: translateY(-50%);
background:
linear-gradient(
var(--carl-blue-action),
var(--carl-blue-action)
) center / 2px 18px no-repeat,
linear-gradient(
var(--carl-blue-action),
var(--carl-blue-action)
) center / 18px 2px no-repeat;
font-family: inherit !important;
opacity: 1 !important;
}
.carl-faq-toggle.et_pb_toggle_open .et_pb_toggle_title::before {
background:
linear-gradient(
var(--carl-blue-action),
var(--carl-blue-action)
) center / 18px 2px no-repeat;
}
.carl-faq-toggle .et_pb_toggle_content {
padding: 0 24px 22px !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.75 !important;
}
.carl-faq-toggle .et_pb_toggle_content p:last-child {
margin-bottom: 0 !important;
}
/* ==============================
12.5 Responsive Additions
Only for the four new homepage blocks
============================== */
/* Tablet */
@media (max-width: 980px) {
.carl-pain-grid,
.carl-difference-grid,
.carl-faq-grid {
grid-template-columns: 1fr;
gap: 42px;
}
.carl-pain-note,
.carl-faq-intro {
position: static;
}
.carl-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: calc(100% - 40px) !important;
}
}
/* Phone */
@media (max-width: 767px) {
.carl-pain-grid,
.carl-difference-grid,
.carl-faq-grid {
gap: 30px;
}
.carl-pain-note {
padding: 26px !important;
border-radius: 22px;
}
.carl-pain-item {
padding: 22px 20px 22px 72px !important;
}
.carl-pain-item::before {
top: 22px;
left: 20px;
width: 38px;
height: 38px;
}
.carl-pain-item .et_pb_module_header {
font-size: var(--carl-type-card-title) !important;
}
.carl-pain-item .et_pb_blurb_description,
.carl-pain-item .et_pb_blurb_description p {
font-size: var(--carl-type-small) !important;
}
.carl-service-grid {
grid-template-columns: 1fr;
width: calc(100% - 28px) !important;
}
.carl-service-card {
min-height: auto;
padding: 24px !important;
}
.carl-compare-panel {
padding: 28px;
border-radius: 24px;
}
.carl-compare-panel::before {
width: 74px;
height: 74px;
top: -16px;
right: -8px;
}
.carl-compare-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 17px 0;
}
.carl-faq-toggle .et_pb_toggle_title {
padding: 20px 54px 20px 20px !important;
font-size: var(--carl-type-faq-title) !important;
}
.carl-faq-toggle .et_pb_toggle_title::before {
right: 20px !important;
width: 16px !important;
height: 16px !important;
background:
linear-gradient(
var(--carl-blue-action),
var(--carl-blue-action)
) center / 2px 16px no-repeat,
linear-gradient(
var(--carl-blue-action),
var(--carl-blue-action)
) center / 16px 2px no-repeat;
}
.carl-faq-toggle.et_pb_toggle_open .et_pb_toggle_title::before {
background:
linear-gradient(
var(--carl-blue-action),
var(--carl-blue-action)
) center / 16px 2px no-repeat;
}
.carl-faq-toggle .et_pb_toggle_content {
padding: 0 20px 20px !important;
font-size: var(--carl-type-small) !important;
}
}
/* =========================================================
13. Homepage 2026 - Case / Method / Process / Owner / Pricing
Added for the optimized Carl.work homepage.
All selectors use the carl- prefix to avoid Divi/plugin collisions.
========================================================= */
/* ==============================
13.0 Shared type and spacing
Heading Text Module: carl-section-title
Lead Text Module: carl-section-lead
============================== */
.carl-section-title,
.carl-section-title h1,
.carl-section-title h2,
.carl-section-title h3 {
color: var(--carl-ink) !important;
}
.carl-section-title h2 {
margin: 0 !important;
padding: 0 !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
letter-spacing: -.025em ;
font-weight: 700 !important;
}
.carl-section-lead,
.carl-section-lead p {
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-intro) !important;
line-height: 1.78 !important;
}
.carl-section-lead p:last-child {
margin-bottom: 0 !important;
}
/* ==============================
13.1 Representative case study
Section: carl-case-section
Row: carl-case-row
Left Column: carl-case-visual
Right Column: carl-case-copy
============================== */
.carl-case-section {
overflow: hidden;
padding: 108px 0 !important;
color: #FFFFFF;
background:
radial-gradient(circle at 8% 12%, rgba(45, 125, 210, 0.11), transparent 27%),
#1E2A36 !important;
}
.carl-case-row {
display: grid !important;
grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
gap: 66px;
align-items: center;
width: 88% !important;
max-width: 1180px !important;
}
.carl-case-row > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-case-visual {
position: relative;
min-height: 520px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 30px;
background:
linear-gradient(180deg, rgba(47, 93, 124, 0.84) 0%, rgba(16, 29, 39, 0.98) 100%);
box-shadow: 0 30px 76px rgba(7, 14, 20, 0.28);
}
.carl-case-visual::after {
content: "";
position: absolute;
z-index: 1;
inset: 48% 0 0;
background: linear-gradient(180deg, transparent, rgba(10, 18, 25, 0.88));
pointer-events: none;
}
.carl-case-visual .et_pb_module,
.carl-case-visual .et_pb_code,
.carl-case-visual .et_pb_code_inner {
margin-bottom: 0 !important;
}
.carl-case-window {
position: absolute;
z-index: 1;
top: 38px;
left: 38px;
right: 38px;
height: 300px;
overflow: hidden;
border-radius: 20px;
background: #FFFFFF;
box-shadow: 0 18px 44px rgba(8, 19, 27, 0.22);
transform: rotate(-1.2deg);
}
.carl-case-window-top {
height: 38px;
border-bottom: 1px solid #E3E9ED;
background: #EEF3F6;
}
.carl-case-layout {
display: grid;
grid-template-columns: 0.62fr 1fr;
gap: 14px;
height: calc(100% - 38px);
padding: 16px;
}
.carl-case-sidebar {
border-radius: 12px;
background: #EAF4EE;
}
.carl-case-main {
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.carl-case-main span {
display: block;
border-radius: 10px;
background: #E6EDF1;
}
.carl-case-main span:first-child {
background: #006B32;
}
.carl-case-label {
position: absolute;
z-index: 3;
right: 38px;
bottom: 34px;
left: 38px;
}
.carl-case-label small {
display: block;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.62);
font-size: var(--carl-type-meta) ;
line-height: 1.5;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.carl-case-label strong {
display: block;
color: #FFFFFF;
font-size: var(--carl-type-case-title) ;
line-height: 1.5 ;
font-weight: 700 ;
}
.carl-case-copy h1,
.carl-case-copy h2,
.carl-case-copy h3 {
color: #FFFFFF !important;
}
.carl-case-copy .carl-section-title h2 {
font-size: var(--carl-type-h2) !important;
}
.carl-case-copy > .et_pb_text:not(.carl-section-title):not(.carl-eyebrow):not(.carl-case-footnote),
.carl-case-copy > .et_pb_text:not(.carl-section-title):not(.carl-eyebrow):not(.carl-case-footnote) p {
color: rgba(255, 255, 255, 0.70) !important;
font-size: var(--carl-type-eyebrow) !important;
line-height: 1.75 !important;
}
.carl-case-points {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 30px 0 24px;
}
.carl-case-point {
padding: 18px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
background: rgba(255, 255, 255, 0.055);
}
.carl-case-point strong {
display: block;
margin-bottom: 4px;
color: #FFFFFF;
font-size: var(--carl-type-small) ;
line-height: 1.45;
font-weight: 850;
}
.carl-case-point span {
color: rgba(255, 255, 255, 0.58);
font-size: var(--carl-type-small) ;
line-height: 1.65;
}
.carl-case-footnote {
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.carl-case-footnote,
.carl-case-footnote p {
color: rgba(255, 255, 255, 0.48) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1.75 !important;
}
/* ==============================
13.2 Working method
Section: carl-method-section
Row: carl-method-row
Left Column: carl-method-copy
Each left Blurb: carl-method-check
Right Code HTML: carl-method-grid / carl-method-card
============================== */
.carl-method-section {
padding: 104px 0 !important;
background:
radial-gradient(circle at 5% 0%, rgba(45, 125, 210, 0.055), transparent 30%),
#FFFFFF !important;
}
.carl-method-row {
display: grid !important;
grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
gap: 72px;
align-items: center;
width: 88% !important;
max-width: 1180px !important;
}
.carl-method-row > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-method-copy {
min-width: 0;
}
.carl-method-copy > .et_pb_module:last-child {
margin-bottom: 0 !important;
}
.carl-method-checks {
display: grid !important;
gap: 18px;
margin-top: 30px !important;
}
.carl-method-check {
margin-bottom: 0 !important;
}
.carl-method-check + .carl-method-check {
margin-top: 18px !important;
}
.carl-method-check .et_pb_blurb_content {
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr);
gap: 14px;
max-width: none !important;
margin: 0 !important;
}
.carl-method-check .et_pb_main_blurb_image {
grid-column: 1;
margin: 2px 0 0 !important;
}
.carl-method-check .et_pb_image_wrap {
display: grid !important;
place-items: center;
width: 30px !important;
height: 30px !important;
border-radius: 10px;
background: linear-gradient(135deg, var(--carl-blue-action), var(--carl-blue-action-dark));
}
.carl-method-check .et-pb-icon {
color: #FFFFFF !important;
font-size: 16px !important;
}
.carl-method-check .et_pb_blurb_container {
grid-column: 2;
}
.carl-method-check .et_pb_module_header {
margin: 0 0 6px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-card-title) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
}
.carl-method-check .et_pb_blurb_description,
.carl-method-check .et_pb_blurb_description p {
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.7 !important;
}
.carl-method-grid,
.carl-method-grid .et_pb_code_inner {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
.carl-method-card {
min-height: 220px;
padding: 26px;
border: 1px solid var(--carl-line);
border-radius: 22px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 10px 28px rgba(30, 42, 54, 0.045);
}
.carl-method-card .carl-method-step {
display: inline-flex;
margin-bottom: 30px;
color: var(--carl-blue-action);
font-size: var(--carl-type-meta) ;
line-height: 1.3;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.carl-method-card h3 {
margin: 0 0 10px;
color: var(--carl-ink);
font-size: var(--carl-type-card-title) ;
line-height: 1.5 ;
font-weight: 700 ;
}
.carl-method-card p {
margin: 0;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.7;
}
/* ==============================
13.3 Cooperation process
Section: carl-process-section
Cards Row: carl-process-grid
Every Column: carl-process-card
============================== */
.carl-process-section {
padding: 104px 0 !important;
background: #FFFFFF !important;
}
.carl-process-section > .et_pb_row {
width: 88% !important;
max-width: 1180px !important;
}
.carl-process-grid {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
margin-top: 42px;
counter-reset: carl-process;
}
.carl-process-grid > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-process-card {
position: relative;
min-height: 260px;
padding: 26px !important;
border: 1px solid var(--carl-line);
border-radius: 22px;
background: #FFFFFF;
box-shadow: 0 10px 24px rgba(30, 42, 54, 0.05);
counter-increment: carl-process;
}
.carl-process-card::before {
content: "0" counter(carl-process);
display: inline-block;
margin-bottom: 34px;
color: var(--carl-blue-action);
font-size: 14px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.08em;
}
.carl-process-card:not(:last-child)::after {
content: "";
position: absolute;
z-index: 2;
top: 48px;
right: -20px;
width: 22px;
height: 1px;
background: var(--carl-line);
}
.carl-process-card .et_pb_module {
margin-bottom: 0 !important;
}
.carl-process-card h3 {
margin: 0 0 10px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-card-title) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
}
.carl-process-card p {
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.72 !important;
}
/* ==============================
13.4 Independent owner block
Section: carl-owner-section
Row: carl-owner-panel
Left Mark Text: carl-owner-mark
Right Column: carl-owner-list
Each Blurb: carl-owner-item
============================== */
.carl-owner-section {
padding: 96px 0 !important;
background: #FFFFFF !important;
}
.carl-owner-panel {
position: relative;
display: grid !important;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 64px;
align-items: center;
width: 88% !important;
max-width: 1180px !important;
padding: 56px !important;
overflow: hidden;
border: 1px solid rgba(47, 93, 124, 0.12);
border-radius: 32px;
background:
radial-gradient(circle at 92% 10%, rgba(214, 168, 90, 0.18), transparent 30%),
linear-gradient(135deg, #FFFDF8 0%, #F7F4EE 54%, #EEF4F8 100%);
box-shadow: var(--carl-shadow-soft);
}
.carl-owner-panel > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-owner-mark {
display: grid !important;
place-items: center;
width: 112px;
height: 112px;
margin-bottom: 26px !important;
border-radius: 32px;
color: #FFFFFF !important;
background: linear-gradient(135deg, var(--carl-blue-gray), var(--carl-blue-action));
box-shadow: 0 22px 48px rgba(47, 93, 124, 0.22);
font-size: 42px !important;
line-height: 1 !important;
font-weight: 900 !important;
}
.carl-owner-mark .et_pb_text_inner,
.carl-owner-mark p {
color: #FFFFFF !important;
font-size: inherit !important;
line-height: 1 !important;
font-weight: inherit !important;
}
.carl-owner-list {
display: grid !important;
gap: 14px;
}
.carl-owner-list > .et_pb_module {
margin-bottom: 0 !important;
}
.carl-owner-item {
padding: 18px !important;
border: 1px solid rgba(47, 93, 124, 0.11) !important;
border-radius: 17px !important;
background: rgba(255, 255, 255, 0.68) !important;
}
.carl-owner-item .et_pb_blurb_content {
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr);
gap: 14px;
max-width: none !important;
margin: 0 !important;
}
.carl-owner-item .et_pb_main_blurb_image {
grid-column: 1;
margin: 2px 0 0 !important;
}
.carl-owner-item .et_pb_image_wrap {
display: grid !important;
place-items: center;
width: 30px !important;
height: 30px !important;
border-radius: 10px;
background: linear-gradient(135deg, var(--carl-blue-action), var(--carl-blue-action-dark));
}
.carl-owner-item .et-pb-icon {
color: #FFFFFF !important;
font-size: 16px !important;
}
.carl-owner-item .et_pb_blurb_container {
grid-column: 2;
}
.carl-owner-item .et_pb_module_header {
margin: 0 0 5px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-card-title) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
}
.carl-owner-item .et_pb_blurb_description,
.carl-owner-item .et_pb_blurb_description p {
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.7 !important;
}
/* ==============================
13.5 Pricing
Section: carl-pricing-section
Heading Row: carl-pricing-head
Budget Module: carl-price-range
Cards Row: carl-pricing-row
Every Column: carl-price-card
Middle Column: add carl-price-card--featured
============================== */
.carl-pricing-section {
padding: 104px 0 !important;
background:
radial-gradient(circle at 12% 0%, rgba(45, 125, 210, 0.08), transparent 28%),
var(--carl-warm-bg) !important;
}
.carl-pricing-section > .et_pb_row {
width: 88% !important;
max-width: 1180px !important;
}
.carl-pricing-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
gap: 40px;
align-items: end;
}
.carl-pricing-head > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-price-range {
margin: 0 !important;
padding: 16px 18px !important;
border: 1px solid rgba(47, 93, 124, 0.12);
border-radius: 16px;
background: rgba(255, 255, 255, 0.76);
}
.carl-price-range,
.carl-price-range p {
color: var(--carl-ink-soft) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.65 !important;
font-weight: 850 !important;
}
.carl-pricing-row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
margin-top: 42px;
}
.carl-pricing-row > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-price-card {
position: relative;
display: flex !important;
flex-direction: column !important;
min-height: 590px;
padding: 32px !important;
border: 1px solid var(--carl-line);
border-radius: 26px;
background: #FFFFFF;
box-shadow: 0 12px 34px rgba(30, 42, 54, 0.055);
}
.carl-price-card > .et_pb_module {
flex: 0 0 auto;
}
.carl-price-card > .et_pb_module:last-child {
margin-top: auto !important;
margin-bottom: 0 !important;
}
.carl-price-card--featured {
color: #FFFFFF;
border-color: transparent;
background:
radial-gradient(circle at 90% 4%, rgba(214, 168, 90, 0.25), transparent 26%),
linear-gradient(150deg, #334758, #1E2A36);
box-shadow: 0 24px 58px rgba(30, 42, 54, 0.18);
transform: translateY(-10px);
}
.carl-price-badge {
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
width: fit-content;
margin: 0 !important;
padding: 7px 11px !important;
border-radius: 999px;
background: var(--carl-soft-sand);
}
.carl-price-badge,
.carl-price-badge .et_pb_text_inner,
.carl-price-badge p {
color: var(--carl-ink-soft) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1 !important;
font-weight: 900 !important;
}
.carl-price-kicker,
.carl-price-kicker p {
color: var(--carl-blue-gray) !important;
font-size: var(--carl-type-eyebrow) !important;
line-height: 1.4 !important;
font-weight: 900 !important;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.carl-price-card--featured .carl-price-kicker,
.carl-price-card--featured .carl-price-kicker p {
color: #F1D7A3 !important;
}
.carl-price-title h3 {
margin: 0 !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-plan-title) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
}
.carl-price-card--featured .carl-price-title h3 {
color: #FFFFFF !important;
}
.carl-price-value {
margin: 24px 0 8px !important;
}
.carl-price-value span {
color: var(--carl-ink);
font-size: var(--carl-type-price) ;
line-height: 1;
font-weight: 900;
letter-spacing: -0.05em;
}
.carl-price-value small {
margin-left: 4px;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1;
font-weight: 700;
}
.carl-price-card--featured .carl-price-value span {
color: #FFFFFF;
}
.carl-price-card--featured .carl-price-value small {
color: rgba(255, 255, 255, 0.60);
}
.carl-price-summary,
.carl-price-summary p {
min-height: 54px;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.7 !important;
}
.carl-price-card--featured .carl-price-summary,
.carl-price-card--featured .carl-price-summary p {
color: rgba(255, 255, 255, 0.60) !important;
}
.carl-price-list {
margin: 26px 0 30px !important;
padding-top: 24px;
border-top: 1px solid var(--carl-line);
}
.carl-price-list ul {
display: grid;
gap: 12px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.carl-price-list li {
position: relative;
padding-left: 24px;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.65;
}
.carl-price-list li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
color: var(--carl-blue-action);
font-weight: 900;
}
.carl-price-card--featured .carl-price-list {
border-color: rgba(255, 255, 255, 0.12);
}
.carl-price-card--featured .carl-price-list li {
color: rgba(255, 255, 255, 0.72);
}
.carl-price-card--featured .carl-price-list li::before {
color: #F1D7A3;
}
.carl-price-button,
.carl-price-button .et_pb_button,
.carl-price-button.et_pb_button {
width: 100%;
border: 1px solid var(--carl-line) !important;
border-radius: 999px !important;
color: var(--carl-ink) !important;
background: #FFFFFF !important;
font-weight: 850 !important;
text-align: center;
}
.carl-price-button:hover,
.carl-price-button .et_pb_button:hover,
.carl-price-button.et_pb_button:hover {
border-color: rgba(47, 93, 124, 0.24) !important;
background: var(--carl-soft-blue) !important;
}
.carl-price-card--featured .carl-price-button,
.carl-price-card--featured .carl-price-button .et_pb_button,
.carl-price-card--featured .carl-price-button.et_pb_button {
border-color: transparent !important;
color: var(--carl-ink-soft) !important;
background: var(--carl-cream) !important;
}
.carl-pricing-note {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr);
gap: 18px;
align-items: start;
margin-top: 30px !important;
padding: 24px !important;
border: 1px solid rgba(47, 93, 124, 0.12);
border-radius: 20px;
background: rgba(255, 255, 255, 0.78);
}
.carl-pricing-note > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-pricing-info {
display: grid !important;
place-items: center;
width: 42px;
height: 42px;
margin: 0 !important;
border-radius: 12px;
color: var(--carl-ink-soft) !important;
background: var(--carl-soft-sand);
font-size: var(--carl-type-small) !important;
line-height: 1 !important;
font-weight: 900 !important;
}
.carl-pricing-note-copy,
.carl-pricing-note-copy p {
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1.75 !important;
}
.carl-pricing-note-copy strong {
color: var(--carl-ink-soft);
}
/* ==============================
13.6 Responsive rules for the five sections
============================== */
@media (max-width: 980px) {
.carl-case-section,
.carl-method-section,
.carl-process-section,
.carl-owner-section,
.carl-pricing-section {
padding: 82px 0 !important;
}
.carl-case-row,
.carl-method-row,
.carl-owner-panel {
grid-template-columns: 1fr;
gap: 46px;
}
.carl-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.carl-process-card:not(:last-child)::after {
display: none;
}
.carl-pricing-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.carl-price-card--featured {
transform: none;
}
}
@media (max-width: 767px) {
.carl-case-section,
.carl-method-section,
.carl-process-section,
.carl-owner-section,
.carl-pricing-section {
padding: 64px 0 !important;
}
.carl-case-row,
.carl-method-row,
.carl-owner-panel,
.carl-process-section > .et_pb_row,
.carl-pricing-section > .et_pb_row {
width: calc(100% - 32px) !important;
}
.carl-section-title h2,
.carl-case-copy .carl-section-title h2 {
font-size: var(--carl-type-h2) !important;
}
.carl-section-lead,
.carl-section-lead p {
font-size: var(--carl-type-intro) !important;
}
.carl-case-row,
.carl-method-row {
gap: 38px;
}
.carl-case-visual {
min-height: 440px;
}
.carl-case-window {
top: 28px;
right: 24px;
left: 24px;
height: 246px;
}
.carl-case-label {
right: 24px;
bottom: 28px;
left: 24px;
}
.carl-case-points,
.carl-method-grid,
.carl-method-grid .et_pb_code_inner,
.carl-process-grid,
.carl-pricing-row {
grid-template-columns: 1fr;
}
.carl-process-card,
.carl-price-card {
min-height: auto;
}
.carl-owner-panel {
gap: 34px;
padding: 34px 26px !important;
border-radius: 26px;
}
.carl-owner-mark {
width: 86px;
height: 86px;
border-radius: 24px;
font-size: 32px !important;
}
.carl-pricing-head {
grid-template-columns: 1fr;
gap: 24px;
}
.carl-price-range {
max-width: none;
}
.carl-pricing-note {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.carl-case-visual {
min-height: 400px;
}
.carl-case-window {
top: 24px;
height: 220px;
}
.carl-case-points {
gap: 10px;
}
.carl-method-card,
.carl-process-card,
.carl-price-card {
padding: 24px !important;
}
}
/* ==============================
14. Divi 5 layout fixes
Fix A: keep every eyebrow line/dot beside the text even when Divi changes
the outer Text Module display mode.
Fix B: anchor case-study media and labels to the visual Column instead of
the Image / Code Module wrapper, which Divi positions relatively.
============================== */
/* 14.1 Eyebrow: use the stable Text Module inner wrapper as the flex row. */
.carl-eyebrow {
display: block !important;
width: fit-content;
max-width: 100%;
}
.carl-eyebrow::before,
.carl-eyebrow-line::before,
.carl-eyebrow-line-gradient::before,
.carl-eyebrow-dot::before,
.carl-eyebrow-dot-simple::before,
.carl-eyebrow--gold::before {
content: none !important;
}
.carl-eyebrow .et_pb_text_inner {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
width: auto !important;
max-width: 100%;
text-align: left !important;
}
.carl-eyebrow .et_pb_text_inner > p {
margin: 0 !important;
padding: 0 !important;
}
/* 一般版本固定使用品牌藍灰；避免 Divi Text Design 的顏色蓋過外層。 */
.carl-eyebrow:not(.carl-eyebrow--light):not(.carl-eyebrow--gold),
.carl-eyebrow:not(.carl-eyebrow--light):not(.carl-eyebrow--gold) .et_pb_text_inner,
.carl-eyebrow:not(.carl-eyebrow--light):not(.carl-eyebrow--gold) p {
color: var(--carl-blue-gray) !important;
}
.carl-eyebrow-line .et_pb_text_inner::before,
.carl-eyebrow--gold .et_pb_text_inner::before {
content: "";
display: block;
width: 30px;
height: 2px;
flex: 0 0 30px;
border-radius: 999px;
background: currentColor !important;
}
.carl-eyebrow-line-gradient .et_pb_text_inner::before {
content: "";
display: block;
width: 34px;
height: 2px;
flex: 0 0 34px;
border-radius: 999px;
background: linear-gradient(90deg, var(--carl-blue-gray), var(--carl-gold));
}
.carl-eyebrow-dot .et_pb_text_inner::before {
content: "";
display: block;
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 50%;
background: var(--carl-gold);
box-shadow: 0 0 0 6px rgba(214, 168, 90, 0.18);
}
.carl-eyebrow-dot-simple .et_pb_text_inner::before {
content: "";
display: block;
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--carl-gold);
}
/* 14.2 Case media: remove Divi's intermediate positioning context. */
.carl-case-visual {
isolation: isolate;
}
.carl-case-visual > .et_pb_code,
.carl-case-visual > .et_pb_code > .et_pb_code_inner {
position: static !important;
}
/* Image Module, optional HTML wrapper, or a raw image in a Code Module. */
.carl-case-visual > .et_pb_image,
.carl-case-visual .carl-case-media,
.carl-case-visual > .et_pb_code > .et_pb_code_inner > img {
position: absolute !important;
z-index: 1 !important;
top: 38px !important;
right: 38px !important;
bottom: auto !important;
left: 38px !important;
width: auto !important;
max-width: none !important;
height: 300px !important;
min-height: 0 !important;
margin: 0 !important;
overflow: hidden;
border-radius: 20px;
transform: none !important;
}
.carl-case-visual > .et_pb_image .et_pb_image_wrap,
.carl-case-visual .carl-case-media > a,
.carl-case-visual .carl-case-media img {
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
}
.carl-case-visual > .et_pb_image img,
.carl-case-visual .carl-case-media img,
.carl-case-visual > .et_pb_code > .et_pb_code_inner > img {
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
object-fit: cover;
object-position: top center;
}
.carl-case-visual::after {
z-index: 2;
}
.carl-case-label {
position: absolute !important;
z-index: 3 !important;
top: auto !important;
right: 38px !important;
bottom: 34px !important;
left: 38px !important;
width: auto !important;
margin: 0 !important;
transform: none !important;
}
@media (max-width: 767px) {
.carl-eyebrow .et_pb_text_inner {
gap: 10px !important;
}
.carl-eyebrow-line .et_pb_text_inner::before,
.carl-eyebrow--gold .et_pb_text_inner::before {
width: 24px;
flex-basis: 24px;
}
.carl-eyebrow-line-gradient .et_pb_text_inner::before {
width: 26px;
flex-basis: 26px;
}
.carl-case-visual > .et_pb_image,
.carl-case-visual .carl-case-media,
.carl-case-visual > .et_pb_code > .et_pb_code_inner > img {
top: 28px !important;
right: 24px !important;
left: 24px !important;
height: 246px !important;
}
.carl-case-label {
right: 24px !important;
bottom: 28px !important;
left: 24px !important;
}
}
@media (max-width: 520px) {
.carl-case-visual > .et_pb_image,
.carl-case-visual .carl-case-media,
.carl-case-visual > .et_pb_code > .et_pb_code_inner > img {
top: 24px !important;
height: 220px !important;
}
}
/* ==============================
15. Banner SVG tags, final CTA and global footer
Banner SVG tag:
carl-floating-tag carl-floating-tag--icon tag-top / tag-bottom
CTA Section: carl-cta-section
CTA Row: carl-cta-panel
CTA title: carl-cta-title
CTA copy: carl-cta-copy
CTA button: carl-cta-button
Footer Section: carl-footer-section
Footer Row: carl-footer-row
Copyright Text: carl-footer-copy
Menu Module: carl-footer-menu
Optional HTML nav wrapper: carl-footer-links
============================== */
/* 15.1 Inline SVG icons inside the two Banner floating tags. */
.carl-floating-tag--icon::before {
content: none !important;
}
.carl-floating-tag--icon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 20px;
color: var(--carl-blue-action);
stroke: currentColor;
}
/* 15.2 Final call-to-action panel. */
.carl-cta-section {
padding: 96px 0 !important;
background: #FFFFFF !important;
}
.carl-cta-panel {
position: relative !important;
isolation: isolate;
width: calc(100% - 40px) !important;
max-width: 1180px !important;
padding: 64px !important;
overflow: hidden;
border-radius: 34px;
color: #FFFFFF;
background:
radial-gradient(circle at 92% 8%, rgba(214, 168, 90, 0.22), transparent 28%),
linear-gradient(135deg, #334758, #1E2A36 72%) !important;
box-shadow: var(--carl-shadow);
}
.carl-cta-panel::before {
content: "";
position: absolute;
z-index: -1;
right: -110px;
bottom: -160px;
width: 320px;
height: 320px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
box-shadow:
0 0 0 60px rgba(255, 255, 255, 0.04),
0 0 0 120px rgba(255, 255, 255, 0.025);
pointer-events: none;
}
.carl-cta-panel > .et_pb_column {
position: relative;
z-index: 2;
float: none !important;
width: 100% !important;
margin: 0 !important;
}
.carl-cta-panel .et_pb_module:last-child {
margin-bottom: 0 !important;
}
.carl-cta-title h2 {
max-width: 760px;
margin: 0 !important;
padding: 0 !important;
color: #FFFFFF !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.025em ;
}
.carl-cta-copy {
max-width: 680px;
margin-top: 18px !important;
}
.carl-cta-copy,
.carl-cta-copy .et_pb_text_inner,
.carl-cta-copy p {
color: rgba(255, 255, 255, 0.75) !important;
font-size: var(--carl-type-intro) !important;
line-height: 1.75 !important;
}
.carl-cta-copy p:last-child {
margin-bottom: 0 !important;
}
.carl-cta-button {
margin-top: 30px !important;
}
.carl-cta-button .et_pb_button,
a.et_pb_button.carl-cta-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 13px 24px !important;
border: 0 !important;
border-radius: 999px !important;
color: var(--carl-ink) !important;
background: var(--carl-cream) !important;
box-shadow: none !important;
font-size: var(--carl-type-button) !important;
line-height: 1.2 !important;
font-weight: 850 !important;
}
.carl-cta-button .et_pb_button:hover,
a.et_pb_button.carl-cta-button:hover {
color: var(--carl-ink) !important;
background: var(--carl-soft-sand) !important;
}
.carl-cta-button .et_pb_button::after,
a.et_pb_button.carl-cta-button::after {
position: static !important;
margin: 0 0 0 10px !important;
opacity: 1 !important;
font-size: 18px !important;
line-height: 1 !important;
}
/* 15.3 Global footer: copyright on the left, text menu on the right. */
.carl-footer-section {
padding: 28px 0 38px !important;
border-top: 1px solid var(--carl-line);
background: #FFFFFF !important;
}
.carl-footer-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
width: calc(100% - 40px) !important;
max-width: 1180px !important;
}
.carl-footer-row > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-footer-row .et_pb_module {
margin-bottom: 0 !important;
}
.carl-footer-copy,
.carl-footer-copy .et_pb_text_inner,
.carl-footer-copy p {
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1.6 !important;
}
.carl-footer-menu {
background: transparent !important;
}
.carl-footer-menu .et_pb_menu_inner_container,
.carl-footer-menu .et_pb_menu__wrap {
justify-content: flex-end !important;
background: transparent !important;
}
.carl-footer-menu .et_pb_menu__logo-wrap,
.carl-footer-menu .et_mobile_nav_menu {
display: none !important;
}
.carl-footer-menu .et_pb_menu__menu {
display: flex !important;
}
.carl-footer-menu .et_pb_menu__menu > nav > ul,
.carl-footer-links {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-end;
gap: 18px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.carl-footer-menu .et_pb_menu__menu > nav > ul > li {
margin: 0 !important;
padding: 0 !important;
}
.carl-footer-menu .et_pb_menu__menu > nav > ul > li > a,
.carl-footer-links a {
margin: 0 !important;
padding: 0 !important;
color: var(--carl-blue-gray) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1.6 !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
.carl-footer-menu .et_pb_menu__menu > nav > ul > li > a:hover,
.carl-footer-menu .et_pb_menu__menu > nav > ul > li.current-menu-item > a,
.carl-footer-links a:hover {
color: var(--carl-blue-action) !important;
opacity: 1 !important;
}
@media (max-width: 980px) {
.carl-cta-section {
padding: 82px 0 !important;
}
.carl-cta-panel {
padding: 46px 34px !important;
}
}
@media (max-width: 767px) {
.carl-floating-tag--icon svg {
width: 16px;
height: 16px;
flex-basis: 16px;
}
.carl-cta-section {
padding: 64px 0 !important;
}
.carl-cta-panel {
width: calc(100% - 32px) !important;
padding: 40px 26px !important;
border-radius: 26px;
}
.carl-cta-title h2 {
font-size: var(--carl-type-h2) !important;
}
.carl-cta-copy,
.carl-cta-copy .et_pb_text_inner,
.carl-cta-copy p {
font-size: var(--carl-type-intro) !important;
}
.carl-footer-row {
grid-template-columns: 1fr;
gap: 18px;
width: calc(100% - 32px) !important;
}
.carl-footer-menu .et_pb_menu_inner_container,
.carl-footer-menu .et_pb_menu__wrap,
.carl-footer-menu .et_pb_menu__menu > nav > ul,
.carl-footer-links {
justify-content: flex-start !important;
}
}
/* ==============================
16. Compact homepage + header brand lockup
Header brand column: carl-header-brand
Image Module: carl-header-logo
Text Module: carl-header-brand-copy
Text inner HTML: carl-header-brand-name / carl-header-brand-tagline
Optional hero audience Text / Code Module: carl-hero-audience
Compact owner Row: carl-owner-panel--compact
Pricing Toggle Module: carl-price-toggle
These rules support the reduced-content homepage structure while keeping
one semantic content set for desktop, tablet and phone.
============================== */
/* 16.1 Header: separate Image and Text Modules behave like one logo lockup. */
.carl-header-brand {
display: flex !important;
min-width: 0;
align-items: center !important;
gap: 12px;
}
.carl-header-brand > .et_pb_module {
margin: 0 !important;
}
.carl-header-logo {
width: 44px !important;
max-width: 44px !important;
flex: 0 0 44px;
}
.carl-header-logo .et_pb_image_wrap,
.carl-header-logo a,
.carl-header-logo img {
display: block !important;
width: 44px !important;
height: 44px !important;
}
.carl-header-logo img {
border-radius: 14px;
object-fit: contain;
box-shadow: 0 10px 24px rgba(30, 42, 54, 0.16);
}
.carl-header-brand-copy {
min-width: 0;
flex: 1 1 auto;
}
.carl-header-brand-copy .et_pb_text_inner {
display: grid !important;
gap: 4px;
line-height: 1.15 !important;
}
.carl-header-brand-name {
display: block;
color: var(--carl-ink) !important;
font-size: var(--carl-type-brand) ;
line-height: 1.12;
font-weight: 900;
letter-spacing: -0.025em;
white-space: nowrap;
}
.carl-header-brand-tagline {
display: block;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-brand-small) ;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.035em;
white-space: nowrap;
}
/* 16.2 The old trust strip is replaced by one compact module inside Hero.
Important: only the Code/Text inner wrapper is the three-column grid.
Making both the Divi module and its inner wrapper a grid would place the
whole inner wrapper in column one and leave a large empty area on the right. */
.carl-hero-audience {
display: block !important;
width: 100% !important;
max-width: none !important;
margin-top: 28px !important;
margin-right: 0 !important;
margin-left: 0 !important;
overflow: hidden;
border: 1px solid rgba(47, 93, 124, 0.11);
border-radius: 16px;
background: rgba(47, 93, 124, 0.10);
}
.carl-hero-audience > .et_pb_code_inner,
.carl-hero-audience > .et_pb_text_inner {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
width: 100% !important;
min-width: 0;
}
.carl-hero-audience > .et_pb_code_inner > span,
.carl-hero-audience > .et_pb_text_inner > span {
display: grid;
min-height: 40px;
padding: 10px 9px;
place-items: center;
color: var(--carl-blue-gray);
background: rgba(255, 255, 255, 0.74);
font-size: var(--carl-type-meta) ;
line-height: 1.35;
font-weight: 850;
text-align: center;
}
/* 16.3 Compact sections: the same modules, fewer repeated messages. */
.carl-services-section,
.carl-case-section,
.carl-method-section,
.carl-owner-section,
.carl-pricing-section,
.carl-faq-section,
.carl-cta-section {
scroll-margin-top: 96px;
}
.carl-owner-panel--compact {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
gap: 54px !important;
padding: 52px !important;
}
.carl-owner-panel--compact .carl-owner-item {
min-height: 62px;
padding: 16px 18px !important;
}
.carl-owner-panel--compact .carl-owner-item .et_pb_module_header {
margin: 0 !important;
font-size: var(--carl-type-card-title) !important;
}
.carl-owner-panel--compact .carl-owner-item .et_pb_blurb_description:empty {
display: none !important;
}
/* Pricing list as a Divi Toggle: always expanded on desktop, progressive
disclosure on phone. Set the featured plan Open and the other two Closed. */
.carl-price-toggle.et_pb_toggle {
margin: 24px 0 30px !important;
padding: 0 !important;
border: 0 !important;
border-top: 1px solid var(--carl-line) !important;
background: transparent !important;
}
.carl-price-card--featured .carl-price-toggle.et_pb_toggle {
border-top-color: rgba(255, 255, 255, 0.12) !important;
}
.carl-price-toggle .et_pb_toggle_title {
color: var(--carl-blue-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.4 !important;
font-weight: 850 !important;
}
.carl-price-toggle .et_pb_toggle_title::before {
color: var(--carl-blue-action) !important;
}
.carl-price-card--featured .carl-price-toggle .et_pb_toggle_title,
.carl-price-card--featured .carl-price-toggle .et_pb_toggle_title::before {
color: #F1D7A3 !important;
}
.carl-price-toggle .et_pb_toggle_content {
padding-top: 4px !important;
}
.carl-price-toggle .et_pb_toggle_content ul {
display: grid;
gap: 12px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.carl-price-toggle .et_pb_toggle_content li {
position: relative;
padding-left: 24px;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.65;
}
.carl-price-toggle .et_pb_toggle_content li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
color: var(--carl-blue-action);
font-weight: 900;
}
.carl-price-card--featured .carl-price-toggle .et_pb_toggle_content li {
color: rgba(255, 255, 255, 0.72);
}
.carl-price-card--featured .carl-price-toggle .et_pb_toggle_content li::before {
color: #F1D7A3;
}
@media (min-width: 768px) {
.carl-price-toggle .et_pb_toggle_title {
display: none !important;
}
.carl-price-toggle .et_pb_toggle_content {
display: block !important;
padding-top: 24px !important;
}
}
@media (max-width: 980px) {
.carl-owner-panel--compact {
grid-template-columns: 1fr !important;
gap: 36px !important;
padding: 42px 34px !important;
}
.carl-pricing-row > .carl-price-card--featured {
order: -1;
transform: none !important;
}
}
@media (max-width: 767px) {
.carl-services-section,
.carl-case-section,
.carl-method-section,
.carl-owner-section,
.carl-pricing-section,
.carl-faq-section,
.carl-cta-section {
scroll-margin-top: 80px;
}
.carl-header-brand {
gap: 10px;
}
.carl-header-logo,
.carl-header-logo .et_pb_image_wrap,
.carl-header-logo a,
.carl-header-logo img {
width: 38px !important;
height: 38px !important;
max-width: 38px !important;
}
.carl-header-logo {
flex-basis: 38px;
}
.carl-header-logo img {
border-radius: 12px;
}
.carl-header-brand-name {
font-size: var(--carl-type-brand) ;
}
.carl-header-brand-tagline {
font-size: var(--carl-type-brand-small) ;
letter-spacing: 0.02em;
}
.carl-hero-audience {
margin-top: 24px !important;
}
.carl-hero-audience > .et_pb_code_inner > span,
.carl-hero-audience > .et_pb_text_inner > span {
min-height: 38px;
padding: 9px 5px;
font-size: var(--carl-type-meta) ;
}
.carl-service-tags {
display: none !important;
}
.carl-method-card {
min-height: 0 !important;
}
.carl-owner-panel--compact {
gap: 28px !important;
padding: 32px 24px !important;
}
.carl-owner-panel--compact .carl-owner-item {
min-height: 0;
padding: 14px !important;
}
.carl-price-toggle.et_pb_toggle {
margin: 18px 0 24px !important;
}
.carl-price-toggle .et_pb_toggle_title {
display: block !important;
padding: 14px 34px 14px 0 !important;
}
.carl-price-toggle .et_pb_toggle_content {
padding: 2px 0 4px !important;
}
}
@media (max-width: 380px) {
.carl-header-brand-name {
font-size: var(--carl-type-brand) ;
}
.carl-header-brand-tagline {
font-size: var(--carl-type-brand-small) ;
letter-spacing: 0;
}
.carl-hero-audience > .et_pb_code_inner,
.carl-hero-audience > .et_pb_text_inner {
grid-template-columns: 1fr;
}
}
/* =========================================================
CASE-01. Case Showcase — Dossier Page
For: showcase-02 / 案例檔案
Namespace: carl-dossier-*
Important:
- These rules are intentionally namespaced so they do not
override the homepage's existing carl-case-* components.
- Keep the live filename as /assets/css/custom.css.
========================================================= */
/* CASE-01.1 Shared rows and Code Module resets */
.carl-dossier-hero-row,
.carl-dossier-proof-row,
.carl-dossier-cases-head-row,
.carl-dossier-cases-row,
.carl-dossier-trust-row,
.carl-dossier-contact-row {
width: min(1200px, calc(100% - 48px)) !important;
max-width: 1200px !important;
margin-right: auto !important;
margin-left: auto !important;
padding: 0 !important;
}
.carl-dossier-hero .et_pb_module,
.carl-dossier-proof .et_pb_module,
.carl-dossier-cases .et_pb_module,
.carl-dossier-trust .et_pb_module,
.carl-dossier-contact .et_pb_module {
margin-bottom: 0;
}
.carl-dossier-hero .et_pb_code,
.carl-dossier-hero .et_pb_code_inner,
.carl-dossier-proof .et_pb_code,
.carl-dossier-proof .et_pb_code_inner,
.carl-dossier-cases .et_pb_code,
.carl-dossier-cases .et_pb_code_inner,
.carl-dossier-trust .et_pb_code,
.carl-dossier-trust .et_pb_code_inner,
.carl-dossier-contact .et_pb_code,
.carl-dossier-contact .et_pb_code_inner {
width: 100%;
overflow: visible;
}
.carl-dossier-kicker p {
display: inline-flex;
align-items: center;
gap: 11px;
margin: 0 !important;
color: var(--carl-gold) !important;
font-size: var(--carl-type-eyebrow) !important;
line-height: 1.4 !important;
font-weight: 850 !important;
letter-spacing: 0.19em;
text-transform: uppercase;
}
.carl-dossier-kicker p::before {
content: "";
width: 30px;
height: 2px;
flex: 0 0 30px;
background: currentColor;
}
.carl-dossier-kicker--dark p {
color: var(--carl-blue-gray) !important;
}
/* CASE-01.2 Hero */
.carl-dossier-hero {
position: relative;
overflow: hidden;
padding: 96px 0 88px !important;
background:
radial-gradient(circle at 10% 10%, rgba(214, 168, 90, 0.12), transparent 32%),
var(--carl-warm-bg) !important;
}
.carl-dossier-hero::after {
content: "";
position: absolute;
right: -340px;
bottom: -400px;
width: 620px;
height: 620px;
border: 1px solid rgba(47, 93, 124, 0.13);
border-radius: 50%;
pointer-events: none;
}
.carl-dossier-hero-row {
position: relative;
z-index: 1;
display: grid !important;
grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.98fr);
align-items: center;
gap: clamp(52px, 8vw, 110px);
}
.carl-dossier-hero-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
.carl-dossier-hero-title h1 {
max-width: 720px;
margin: 22px 0 27px !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h1) !important;
line-height: var(--carl-type-h1-line) !important;
letter-spacing: -.04em ;
}
.carl-dossier-hero-title p {
max-width: 650px;
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-lead) !important;
line-height: 1.85 !important;
}
.carl-dossier-hero-actions {
display: flex;
align-items: center;
gap: 25px;
margin-top: 36px;
}
.carl-dossier-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 14px 19px;
font-size: var(--carl-type-button) ;
line-height: 1.25;
font-weight: 850;
text-decoration: none !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.carl-dossier-btn:hover {
transform: translateY(-2px);
}
.carl-dossier-btn--primary {
color: var(--carl-white) !important;
background: linear-gradient(135deg, var(--carl-blue-action), var(--carl-blue-action-dark));
box-shadow: 0 12px 28px rgba(45, 125, 210, 0.22);
}
.carl-dossier-text-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--carl-blue-gray) !important;
font-size: var(--carl-type-button) ;
line-height: 1.5;
font-weight: 800;
text-decoration: none !important;
}
.carl-dossier-text-link span {
color: var(--carl-gold);
}
.carl-dossier-stack {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 25px;
padding: 25px;
color: var(--carl-white);
background: linear-gradient(145deg, var(--carl-ink-soft), #17222c);
box-shadow: 0 34px 80px rgba(30, 42, 54, 0.24);
}
.carl-dossier-stack::before {
content: "";
position: absolute;
top: -150px;
right: -130px;
width: 270px;
height: 270px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
}
.carl-dossier-stack-top {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
color: #91a1ae;
font-size: var(--carl-type-meta) ;
letter-spacing: 0.14em;
}
.carl-dossier-stack-top b {
color: var(--carl-gold);
}
.carl-dossier-stack-list {
position: relative;
display: grid;
}
.carl-dossier-stack-list a {
display: grid;
grid-template-columns: 34px 1fr auto;
align-items: center;
gap: 15px;
min-height: 71px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
color: var(--carl-white) !important;
text-decoration: none !important;
transition: padding 0.2s ease, background 0.2s ease;
}
.carl-dossier-stack-list a:hover {
padding-right: 8px;
padding-left: 8px;
background: rgba(255, 255, 255, 0.035);
}
.carl-dossier-stack-list > a > span {
color: var(--carl-gold);
font-size: var(--carl-type-meta) ;
font-weight: 850;
}
.carl-dossier-stack-list div {
display: grid;
gap: 5px;
}
.carl-dossier-stack-list b {
font-size: var(--carl-type-meta) ;
}
.carl-dossier-stack-list small {
color: #93a3af;
font-size: var(--carl-type-meta) ;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.carl-dossier-stack-list i {
color: #8fa0ad;
font-size: var(--carl-type-meta) ;
font-style: normal;
}
.carl-dossier-stack-note {
display: grid;
grid-template-columns: 90px 1fr;
gap: 15px;
align-items: start;
padding-top: 21px;
}
.carl-dossier-stack-note span {
color: var(--carl-gold);
font-size: var(--carl-type-meta) ;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.carl-dossier-stack-note p {
margin: 0;
color: #b6c2cb;
font-size: var(--carl-type-meta) ;
line-height: 1.65;
}
/* CASE-01.3 Trust summary strip */
.carl-dossier-proof {
padding: 0 !important;
border-top: 1px solid rgba(30, 42, 54, 0.12);
border-bottom: 1px solid rgba(30, 42, 54, 0.12);
background: rgba(255, 255, 255, 0.62) !important;
}
.carl-dossier-proof-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.carl-dossier-proof-grid > div {
min-height: 104px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
padding: 20px 27px;
border-left: 1px solid rgba(30, 42, 54, 0.12);
}
.carl-dossier-proof-grid > div:last-child {
border-right: 1px solid rgba(30, 42, 54, 0.12);
}
.carl-dossier-proof-grid strong {
color: var(--carl-blue-gray);
font-size: var(--carl-type-meta) ;
line-height: 1.35;
font-weight: 850;
}
.carl-dossier-proof-grid span {
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
line-height: 1.5;
}
/* CASE-01.4 Case archive heading and index */
.carl-dossier-cases {
padding: 112px 0 122px !important;
background: var(--carl-warm-bg) !important;
}
.carl-dossier-cases-head-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 70px;
align-items: end;
margin-bottom: 64px !important;
}
.carl-dossier-cases-head-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
.carl-dossier-section-title h2 {
max-width: 700px;
margin: 16px 0 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
letter-spacing: -.025em ;
}
.carl-dossier-section-intro p {
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-intro) !important;
line-height: 1.8 !important;
}
.carl-dossier-cases-row {
display: grid !important;
grid-template-columns: 220px minmax(0, 1fr);
gap: 42px;
align-items: start;
overflow: visible !important;
}
.carl-dossier-cases-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
/* 索引本身只控制內容排版，不再負責 sticky */
.carl-dossier-index {
position: static;
top: auto;
display: grid;
}
/* 桌機：固定整個左側 Column */
@media (min-width: 981px) {
.carl-dossier-cases {
overflow: visible !important;
}
.carl-dossier-index-col {
position: sticky !important;
top: 105px !important;
align-self: start;
height: fit-content;
z-index: 2;
}
}
/* 平板及手機：取消固定，索引回到正常頁面流 */
@media (max-width: 980px) {
.carl-dossier-cases-row {
grid-template-columns: minmax(0, 1fr);
gap: 38px;
}
.carl-dossier-index-col {
position: static !important;
top: auto !important;
height: auto;
}
}
.carl-dossier-index-label {
margin-bottom: 14px;
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
font-weight: 800;
letter-spacing: 0.17em;
text-transform: uppercase;
}
.carl-dossier-index a {
display: grid;
grid-template-columns: 30px 1fr;
gap: 9px;
padding: 15px 0;
border-top: 1px solid rgba(30, 42, 54, 0.12);
color: var(--carl-ink) !important;
font-size: var(--carl-type-small) ;
text-decoration: none !important;
}
.carl-dossier-index a:nth-last-of-type(1) {
border-bottom: 1px solid rgba(30, 42, 54, 0.12);
}
.carl-dossier-index a span {
color: var(--carl-gold);
font-weight: 850;
}
.carl-dossier-index a b {
font-weight: 750;
}
.carl-dossier-index a:hover {
color: var(--carl-blue-action) !important;
}
.carl-dossier-index > p {
margin: 22px 0 0;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.7;
}
.carl-dossier-files-col > .et_pb_code {
margin-bottom: 34px !important;
}
.carl-dossier-files-col > .et_pb_code:last-child {
margin-bottom: 0 !important;
}
/* CASE-01.5 Individual case files */
.carl-dossier-file {
overflow: hidden;
scroll-margin-top: 104px;
border: 1px solid rgba(30, 42, 54, 0.12);
border-radius: 26px;
background: var(--carl-white);
box-shadow: 0 10px 38px rgba(30, 42, 54, 0.05);
}
.carl-dossier-file--placeholder {
border-style: dashed;
}
.carl-dossier-file-head {
display: grid;
grid-template-columns: 58px 1fr auto;
align-items: center;
gap: 20px;
padding: 28px 32px;
border-bottom: 1px solid rgba(30, 42, 54, 0.12);
}
.carl-dossier-number {
width: 51px;
height: 51px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--carl-white);
background: var(--carl-ink);
font-size: var(--carl-type-meta) ;
font-weight: 850;
}
.carl-dossier-file--placeholder .carl-dossier-number {
background: var(--carl-blue-gray);
}
.carl-dossier-file-title small {
display: block;
margin-bottom: 7px;
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
font-weight: 750;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.carl-dossier-file-title h3 {
margin: 0;
color: var(--carl-ink);
font-size: var(--carl-type-case-title) ;
line-height: 1.5 ;
letter-spacing: -0.04em;
}
.carl-dossier-status {
border-radius: 999px;
padding: 8px 11px;
font-size: var(--carl-type-meta) ;
line-height: 1.25;
font-weight: 850;
letter-spacing: 0.06em;
}
.carl-dossier-status--confirmed {
color: #27623d;
background: #edf7f0;
}
.carl-dossier-status--owned {
color: var(--carl-blue-gray);
background: var(--carl-soft-blue);
}
.carl-dossier-status--placeholder {
color: #856425;
background: #fff4df;
}
.carl-dossier-file-main {
padding: 35px 32px 31px;
}
.carl-dossier-summary {
max-width: 760px;
margin: 0 0 25px;
color: var(--carl-ink);
font-size: var(--carl-type-lead) ;
line-height: 1.65;
letter-spacing: -0.015em;
}
.carl-dossier-role {
display: grid;
grid-template-columns: 118px 1fr;
gap: 18px;
margin-bottom: 30px;
padding: 15px 18px;
border-left: 3px solid var(--carl-gold);
background: var(--carl-warm-bg);
}
.carl-dossier-role small {
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
font-weight: 820;
letter-spacing: 0.1em;
}
.carl-dossier-role b {
color: var(--carl-ink);
font-size: var(--carl-type-meta) ;
line-height: 1.65;
}
.carl-dossier-visual {
position: relative;
overflow: hidden;
margin-bottom: 16px;
border-radius: 18px;
padding: 18px;
background: var(--carl-soft-blue);
}
.carl-dossier-visual--02 {
background: var(--carl-soft-sand);
}
.carl-dossier-visual--03,
.carl-dossier-visual--04 {
background: #f0f2f3;
}
.carl-dossier-visual-toolbar {
height: 36px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
color: var(--carl-text-gray);
font-size: 8px;
font-weight: 780;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.carl-dossier-visual-toolbar > span:nth-child(2) {
text-align: center;
}
.carl-dossier-visual-toolbar > b {
justify-self: end;
color: var(--carl-blue-gray);
}
.carl-dossier-visual-dots {
display: flex;
gap: 4px;
}
.carl-dossier-visual-dots i {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(30, 42, 54, 0.2);
}
.carl-dossier-visual-screen {
overflow: hidden;
border: 1px solid rgba(30, 42, 54, 0.1);
border-radius: 13px;
background: var(--carl-white);
box-shadow: 0 18px 42px rgba(30, 42, 54, 0.12);
}
/* Optional: replace the CSS mockup with a real project screenshot. */
.carl-dossier-project-shot {
display: block;
width: 100%;
height: auto;
border: 1px solid rgba(30, 42, 54, 0.1);
border-radius: 13px;
background: var(--carl-white);
box-shadow: 0 18px 42px rgba(30, 42, 54, 0.12);
}
.carl-dossier-visual-hero {
min-height: 215px;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 28px;
align-items: center;
padding: 32px 40px;
background: linear-gradient(135deg, #fbfaf7, #eef4f8);
}
.carl-dossier-visual--02 .carl-dossier-visual-hero {
background: linear-gradient(135deg, #fffdf8, #f3ebdd);
}
.carl-dossier-visual--03 .carl-dossier-visual-hero,
.carl-dossier-visual--04 .carl-dossier-visual-hero {
background: linear-gradient(135deg, #fafafa, #eef1f3);
}
.carl-dossier-visual-hero small {
display: block;
margin-bottom: 15px;
color: var(--carl-gold);
font-size: 7px;
font-weight: 850;
letter-spacing: 0.15em;
}
.carl-dossier-visual-hero > div:first-child > span {
display: block;
width: 92%;
height: 12px;
margin: 0 0 8px;
border-radius: 3px;
background: var(--carl-ink);
}
.carl-dossier-visual-hero > div:first-child > span:nth-of-type(2) {
width: 68%;
height: 6px;
background: #aebbc4;
}
.carl-dossier-visual-hero em {
display: block;
width: 67px;
height: 23px;
margin-top: 20px;
border-radius: 999px;
background: var(--carl-blue-action);
}
.carl-dossier-visual-shape {
position: relative;
min-height: 145px;
overflow: hidden;
border-radius: 48% 24% 42% 29%;
background: linear-gradient(145deg, var(--carl-ink), var(--carl-blue-gray));
}
.carl-dossier-visual--02 .carl-dossier-visual-shape {
background: linear-gradient(145deg, var(--carl-blue-action), var(--carl-ink));
}
.carl-dossier-visual--placeholder .carl-dossier-visual-shape {
background: linear-gradient(145deg, #a7b3bb, #687781);
}
.carl-dossier-visual-shape i {
position: absolute;
top: 20%;
right: 15%;
width: 90px;
height: 90px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
}
.carl-dossier-visual-shape b {
position: absolute;
bottom: 22%;
left: 17%;
width: 65%;
height: 12px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.22);
}
.carl-dossier-visual-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 10px;
}
.carl-dossier-visual-cards > div {
min-height: 72px;
display: grid;
grid-template-columns: auto 1fr;
align-content: center;
column-gap: 9px;
padding: 12px;
border-radius: 8px;
background: #f7f8f8;
}
.carl-dossier-visual-cards small {
grid-row: 1 / 3;
align-self: start;
color: var(--carl-gold);
font-size: 7px;
}
.carl-dossier-visual-cards b {
color: var(--carl-ink);
font-size: 8px;
}
.carl-dossier-visual-cards span {
width: 64%;
height: 4px;
margin-top: 7px;
border-radius: 3px;
background: #c6cfd4;
}
.carl-dossier-replace-note {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
padding: 9px 13px;
color: var(--carl-white);
background: rgba(30, 42, 54, 0.82);
font-size: var(--carl-type-meta) ;
font-weight: 850;
letter-spacing: 0.08em;
white-space: nowrap;
}
.carl-dossier-evidence-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.carl-dossier-evidence-grid article {
min-height: 192px;
padding: 22px;
border-radius: 15px;
background: var(--carl-soft-blue);
}
.carl-dossier-evidence-grid article:nth-child(2) {
background: var(--carl-soft-sand);
}
.carl-dossier-evidence-grid article:nth-child(3) {
background: #edf2f5;
}
.carl-dossier-evidence-grid span {
display: block;
margin-bottom: 31px;
color: var(--carl-blue-gray);
font-size: var(--carl-type-meta) ;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.carl-dossier-evidence-grid h4 {
margin: 0 0 8px;
color: var(--carl-ink);
font-size: var(--carl-type-body) ;
line-height: 1.4;
}
.carl-dossier-evidence-grid p {
margin: 0;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.7;
}
.carl-dossier-deliverables {
display: grid;
grid-template-columns: 135px 1fr;
gap: 18px;
align-items: start;
margin-top: 25px;
}
.carl-dossier-deliverables > small {
padding-top: 7px;
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
font-weight: 820;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.carl-dossier-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.carl-dossier-tags span {
border: 1px solid rgba(30, 42, 54, 0.12);
border-radius: 999px;
padding: 7px 10px;
color: var(--carl-blue-gray);
font-size: var(--carl-type-meta) ;
font-weight: 760;
}
.carl-dossier-file-foot {
min-height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 17px 32px;
color: var(--carl-white);
background: var(--carl-ink);
}
.carl-dossier-file-foot p {
max-width: 620px;
margin: 0;
color: #b7c3cc;
font-size: var(--carl-type-meta) ;
line-height: 1.6;
}
.carl-dossier-file-foot a {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--carl-gold) !important;
font-size: var(--carl-type-meta) ;
font-weight: 850;
text-decoration: none !important;
white-space: nowrap;
}
/* CASE-01.6 Why this works */
.carl-dossier-trust {
padding: 100px 0 !important;
background: var(--carl-soft-blue) !important;
}
.carl-dossier-trust-row {
display: grid !important;
grid-template-columns: 0.9fr 1.1fr;
gap: 95px;
align-items: center;
}
.carl-dossier-trust-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
.carl-dossier-trust-title h2 {
max-width: 540px;
margin: 15px 0 20px !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
letter-spacing: -.025em ;
}
.carl-dossier-trust-title p {
max-width: 560px;
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.82 !important;
}
.carl-dossier-principles {
display: grid;
gap: 10px;
}
.carl-dossier-principles article {
display: grid;
grid-template-columns: 43px 1fr;
gap: 17px;
padding: 20px;
border: 1px solid rgba(30, 42, 54, 0.08);
border-radius: 16px;
background: rgba(255, 255, 255, 0.72);
}
.carl-dossier-principles article > span {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--carl-gold);
background: var(--carl-ink);
font-size: var(--carl-type-small) ;
font-weight: 850;
}
.carl-dossier-principles h3 {
margin: 1px 0 5px;
color: var(--carl-ink);
font-size: var(--carl-type-card-title) ;
line-height: 1.5 ;
}
.carl-dossier-principles p {
margin: 0;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.65;
}
/* CASE-01.7 Final CTA */
.carl-dossier-contact {
padding: 104px 0 !important;
background: var(--carl-warm-bg) !important;
}
.carl-dossier-contact-row {
position: relative;
overflow: hidden;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 60px;
align-items: center;
border-radius: 28px;
padding: 58px 62px !important;
color: var(--carl-white);
background: linear-gradient(145deg, var(--carl-ink-soft), #17222c);
box-shadow: var(--carl-shadow);
}
.carl-dossier-contact-row::after {
content: "";
position: absolute;
top: -200px;
right: -170px;
width: 320px;
height: 320px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.carl-dossier-contact-row > .et_pb_column {
z-index: 1;
width: auto !important;
margin: 0 !important;
}
.carl-dossier-contact-copy h2 {
margin: 15px 0 12px !important;
color: var(--carl-white) !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
letter-spacing: -.025em ;
}
.carl-dossier-contact-copy p {
margin: 0 !important;
color: #b7c3cc !important;
font-size: var(--carl-type-small) !important;
line-height: 1.75 !important;
}
.carl-dossier-contact-actions {
display: grid;
justify-items: center;
gap: 12px;
}
.carl-dossier-btn--light {
color: var(--carl-ink) !important;
background: var(--carl-white);
}
.carl-dossier-btn--light:hover {
background: var(--carl-gold);
}
.carl-dossier-contact-actions small {
color: #91a1ad;
font-size: var(--carl-type-meta) ;
}
/* CASE-01.8 Responsive behaviour */
@media (max-width: 980px) {
.carl-dossier-hero-row,
.carl-dossier-cases-head-row,
.carl-dossier-cases-row,
.carl-dossier-trust-row {
grid-template-columns: minmax(0, 1fr);
}
.carl-dossier-hero-row {
gap: 50px;
}
.carl-dossier-stack {
max-width: 650px;
}
.carl-dossier-cases-head-row {
gap: 22px;
}
.carl-dossier-section-intro p {
max-width: 650px;
}
.carl-dossier-cases-row {
gap: 38px;
}
.carl-dossier-index {
position: relative;
top: auto;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.carl-dossier-index-label,
.carl-dossier-index > p {
grid-column: 1 / -1;
}
.carl-dossier-index a {
display: block;
border: 1px solid rgba(30, 42, 54, 0.12) !important;
border-radius: 12px;
padding: 13px;
}
.carl-dossier-index a span {
display: block;
margin-bottom: 5px;
}
.carl-dossier-trust-row {
gap: 44px;
}
}
@media (max-width: 767px) {
.carl-dossier-hero-row,
.carl-dossier-proof-row,
.carl-dossier-cases-head-row,
.carl-dossier-cases-row,
.carl-dossier-trust-row,
.carl-dossier-contact-row {
width: min(1200px, calc(100% - 30px)) !important;
}
.carl-dossier-hero {
padding: 68px 0 60px !important;
}
.carl-dossier-hero-row {
gap: 40px;
}
.carl-dossier-hero-title h1 {
font-size: var(--carl-type-h1) !important;
}
.carl-dossier-hero-title p {
font-size: var(--carl-type-lead) !important;
}
.carl-dossier-hero-actions {
align-items: flex-start;
flex-direction: column;
gap: 18px;
}
.carl-dossier-stack {
border-radius: 20px;
padding: 20px;
}
.carl-dossier-stack-list a {
min-height: 65px;
}
.carl-dossier-proof-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.carl-dossier-proof-grid > div:nth-child(2) {
border-right: 1px solid rgba(30, 42, 54, 0.12);
}
.carl-dossier-proof-grid > div:nth-child(n/**/+3) {
border-top: 1px solid rgba(30, 42, 54, 0.12);
}
.carl-dossier-proof-grid > div {
min-height: 88px;
padding: 17px;
}
.carl-dossier-cases {
padding: 76px 0 82px !important;
}
.carl-dossier-cases-head-row {
margin-bottom: 40px !important;
}
.carl-dossier-section-title h2 {
font-size: var(--carl-type-h2) !important;
}
.carl-dossier-index {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.carl-dossier-file {
scroll-margin-top: 78px;
border-radius: 20px;
}
.carl-dossier-file-head {
grid-template-columns: 48px 1fr;
gap: 14px;
padding: 22px 20px;
}
.carl-dossier-number {
width: 44px;
height: 44px;
}
.carl-dossier-status {
grid-column: 2;
justify-self: start;
}
.carl-dossier-file-main {
padding: 26px 20px 24px;
}
.carl-dossier-summary {
font-size: var(--carl-type-lead) ;
}
.carl-dossier-role {
grid-template-columns: 1fr;
gap: 7px;
}
.carl-dossier-visual {
margin-right: -4px;
margin-left: -4px;
border-radius: 14px;
padding: 10px;
}
.carl-dossier-visual-toolbar {
height: 29px;
}
.carl-dossier-visual-screen {
border-radius: 9px;
}
.carl-dossier-project-shot {
border-radius: 9px;
}
.carl-dossier-visual-hero {
min-height: 150px;
gap: 16px;
padding: 22px 18px;
}
.carl-dossier-visual-shape {
min-height: 105px;
}
.carl-dossier-visual-cards {
gap: 5px;
padding: 6px;
}
.carl-dossier-visual-cards > div {
min-height: 59px;
display: block;
padding: 9px;
}
.carl-dossier-visual-cards small {
display: none;
}
.carl-dossier-visual-cards b {
display: block;
}
.carl-dossier-evidence-grid {
grid-template-columns: minmax(0, 1fr);
}
.carl-dossier-evidence-grid article {
min-height: auto;
}
.carl-dossier-evidence-grid span {
margin-bottom: 20px;
}
.carl-dossier-deliverables {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.carl-dossier-file-foot {
align-items: flex-start;
flex-direction: column;
padding: 18px 20px;
}
.carl-dossier-trust {
padding: 70px 0 !important;
}
.carl-dossier-trust-title h2 {
font-size: var(--carl-type-h2) !important;
}
.carl-dossier-contact {
padding: 70px 0 !important;
}
.carl-dossier-contact-row {
grid-template-columns: minmax(0, 1fr);
gap: 30px;
padding: 38px 25px !important;
}
.carl-dossier-contact-actions {
justify-items: start;
}
}
@media (max-width: 390px) {
.carl-dossier-hero-row,
.carl-dossier-proof-row,
.carl-dossier-cases-head-row,
.carl-dossier-cases-row,
.carl-dossier-trust-row,
.carl-dossier-contact-row {
width: min(1200px, calc(100% - 24px)) !important;
}
.carl-dossier-hero-title h1 {
font-size: var(--carl-type-h1) !important;
}
.carl-dossier-stack {
padding: 17px;
}
.carl-dossier-stack-list small {
font-size: var(--carl-type-meta) ;
}
.carl-dossier-index {
grid-template-columns: minmax(0, 1fr);
}
.carl-dossier-index a {
display: grid;
grid-template-columns: 30px 1fr;
}
.carl-dossier-index a span {
margin: 0;
}
.carl-dossier-visual-toolbar > span:nth-child(2) {
display: none;
}
.carl-dossier-visual-toolbar {
grid-template-columns: 1fr auto;
}
}
@media (prefers-reduced-motion: reduce) {
.carl-dossier-hero *,
.carl-dossier-cases *,
.carl-dossier-trust *,
.carl-dossier-contact * {
transition-duration: 0.01ms !important;
}
}
/* =========================================================
17. Decision-copy homepage final alignment
Design reference: carl-work-home-mainland-preview.html
This final override layer aligns the existing Divi 5 components with the
approved colour system, section composition, decision-copy pricing and
responsive behaviour. Header dropdown / mobile-overlay rules above remain
unchanged.
========================================================= */
/* ==============================
17.1 Hero composition
Section: carl-home-hero
Row: carl-hero-row
Left Column: carl-hero-copy
Button Row: carl-hero-actions
Proof Code: carl-hero-proof
Micro Text: carl-hero-micro
Audience Code:carl-hero-audience
Right Code: carl-web-mockup
============================== */
.carl-home-hero {
padding-top: 160px !important;
padding-bottom: 84px !important;
}
.carl-hero-row {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
gap: 52px;
align-items: center;
width: calc(100% - 40px) !important;
max-width: 1180px !important;
}
.carl-hero-row > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-hero-copy > .et_pb_module:last-child {
margin-bottom: 0 !important;
}
.carl-hero-actions,
.carl-hero-actions .et_pb_code_inner {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
}
.carl-hero-actions {
margin-top: 30px !important;
}
.carl-hero-actions > .et_pb_module {
width: auto !important;
margin: 0 !important;
}
.carl-hero-proof,
.carl-hero-proof .et_pb_code_inner,
.carl-hero-proof .et_pb_text_inner {
margin: 0 !important;
padding: 0 !important;
}
.carl-hero-proof ul,
ul.carl-hero-proof {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin: 28px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.carl-hero-proof li {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0 !important;
padding: 0 !important;
color: var(--carl-ink-soft);
font-size: var(--carl-type-small) ;
line-height: 1.45;
font-weight: 750;
}
.carl-hero-proof svg {
display: block;
width: 17px;
height: 17px;
flex: 0 0 17px;
color: var(--carl-blue-action);
stroke: currentColor;
}
.carl-hero-micro,
.carl-hero-micro .et_pb_text_inner,
.carl-hero-micro p {
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1.6 !important;
}
.carl-hero-micro {
margin-top: 12px !important;
}
/* ==============================
17.2 Full-width dark problem section
============================== */
.carl-pain-section {
padding: 96px 0 !important;
color: #FFFFFF;
background: linear-gradient(145deg, #263A4B, #172532) !important;
}
.carl-pain-grid {
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: 68px;
align-items: start;
width: calc(100% - 40px) !important;
max-width: 1180px !important;
}
.carl-pain-note {
position: static !important;
top: auto !important;
padding: 0 !important;
overflow: visible;
border-radius: 0;
color: #FFFFFF;
background: transparent !important;
box-shadow: none;
}
.carl-pain-section .carl-eyebrow,
.carl-pain-section .carl-eyebrow .et_pb_text_inner,
.carl-pain-section .carl-eyebrow p {
color: var(--carl-gold-soft) !important;
}
.carl-pain-section .carl-section-title h2 {
color: #FFFFFF !important;
font-size: var(--carl-type-h2) !important;
}
.carl-pain-section .carl-section-lead,
.carl-pain-section .carl-section-lead p,
.carl-pain-note > .et_pb_text:not(.carl-section-title):not(.carl-eyebrow):not(.carl-pain-tag),
.carl-pain-note > .et_pb_text:not(.carl-section-title):not(.carl-eyebrow):not(.carl-pain-tag) p {
color: rgba(255, 255, 255, 0.67) !important;
}
.carl-pain-tag {
margin-top: 12px !important;
padding: 8px 12px !important;
color: var(--carl-gold-soft) !important;
background: rgba(214, 168, 90, 0.12) !important;
}
.carl-pain-list {
gap: 12px;
}
.carl-pain-item {
min-height: 0;
padding: 22px 22px 22px 90px !important;
border: 1px solid rgba(255, 255, 255, 0.11) !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.045) !important;
box-shadow: none !important;
}
.carl-pain-item:hover {
transform: none;
border-color: rgba(255, 255, 255, 0.18) !important;
background: rgba(255, 255, 255, 0.065) !important;
box-shadow: none !important;
}
.carl-pain-item::before {
top: 25px;
left: 22px;
display: block;
width: 50px;
height: auto;
border-radius: 0;
color: var(--carl-gold-soft);
background: transparent;
font-size: 13px;
line-height: 1.4;
font-weight: 900;
letter-spacing: 0.08em;
}
.carl-pain-item .et_pb_module_header {
color: #FFFFFF !important;
}
.carl-pain-item .et_pb_blurb_description,
.carl-pain-item .et_pb_blurb_description p {
color: rgba(255, 255, 255, 0.62) !important;
font-size: var(--carl-type-small) !important;
}
/* ==============================
17.3 Equal two-column service cards
The featured card is a light warm-to-blue gradient.
============================== */
.carl-services-section {
padding: 96px 0 !important;
background: #FFFFFF !important;
}
.carl-services-section > .et_pb_row:not(.carl-service-grid) {
width: calc(100% - 40px) !important;
max-width: 1180px !important;
}
.carl-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
width: calc(100% - 40px) !important;
max-width: 1180px !important;
}
.carl-service-grid > .et_pb_column:nth-child(n) {
grid-column: auto;
}
.carl-service-card {
min-height: 258px;
padding: 30px !important;
border-radius: 22px;
box-shadow: 0 8px 24px rgba(30, 42, 54, 0.035);
}
.carl-service-card .et_pb_main_blurb_image {
margin-bottom: 24px !important;
}
.carl-service-card .et_pb_image_wrap {
width: 42px !important;
height: 42px !important;
border-radius: 13px;
}
.carl-service-card .et-pb-icon {
color: var(--carl-blue-action) !important;
font-size: 21px !important;
}
.carl-service-card .et_pb_module_header {
font-size: var(--carl-type-card-title) !important;
}
.carl-service-card .et_pb_blurb_description,
.carl-service-card .et_pb_blurb_description p {
font-size: var(--carl-type-small) !important;
}
.carl-service-tags span {
padding: 5px 9px;
color: var(--carl-blue-gray);
background: var(--carl-soft-blue);
}
.carl-service-featured {
color: var(--carl-ink) !important;
border: 1px solid var(--carl-line) !important;
background: linear-gradient(145deg, var(--carl-cream), var(--carl-soft-blue)) !important;
}
.carl-service-featured .et_pb_image_wrap {
background: var(--carl-soft-blue) !important;
}
.carl-service-featured .et-pb-icon {
color: var(--carl-blue-action) !important;
}
.carl-service-featured .et_pb_module_header {
color: var(--carl-ink) !important;
}
.carl-service-featured .et_pb_blurb_description,
.carl-service-featured .et_pb_blurb_description p {
color: var(--carl-text-gray) !important;
}
.carl-service-featured .carl-service-tags span {
color: var(--carl-blue-gray);
background: var(--carl-soft-blue);
}
/* ==============================
17.4 Case, combined method and owner panel
============================== */
.carl-case-section {
padding: 96px 0 !important;
background: #1D2D3B !important;
}
.carl-case-row {
grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
gap: 64px;
}
.carl-case-visual {
min-height: 510px;
background: linear-gradient(180deg, #28485D, #07131D);
}
.carl-method-section {
padding: 96px 0 !important;
}
.carl-method-row {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 68px;
}
.carl-method-card {
min-height: 210px;
padding: 25px;
border-radius: 21px;
}
.carl-method-card .carl-method-step {
margin-bottom: 24px;
}
.carl-owner-section {
padding: 0 0 96px !important;
}
.carl-owner-panel,
.carl-owner-panel--compact {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
gap: 56px !important;
padding: 52px !important;
border-radius: 30px;
background: linear-gradient(135deg, #FFFDF8, #EEF4F8);
}
.carl-owner-mark {
width: 74px;
height: 74px;
margin-bottom: 24px !important;
border-radius: 22px;
font-size: 30px !important;
}
.carl-owner-panel--compact .carl-owner-item {
min-height: 0;
}
/* ==============================
17.5 Decision pricing
Diagnostic Row: carl-diagnostic-offer
Left Text: carl-diagnostic-copy
Right Text: carl-diagnostic-price
Fit Text: carl-price-fit
Scope Text: carl-scope-note
============================== */
.carl-pricing-section {
padding: 96px 0 !important;
background: linear-gradient(180deg, #F7F9FA, var(--carl-warm-bg)) !important;
}
.carl-pricing-head {
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
}
.carl-price-range {
max-width: 310px;
margin-bottom: 38px !important;
padding: 14px 16px !important;
}
.carl-diagnostic-offer {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
width: 88% !important;
max-width: 1180px !important;
margin-top: -8px !important;
margin-bottom: 28px !important;
padding: 18px 20px !important;
border: 1px solid rgba(45, 125, 210, 0.18);
border-radius: 18px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(238, 244, 248, 0.90));
}
.carl-diagnostic-offer > .et_pb_column {
float: none !important;
width: auto !important;
margin: 0 !important;
}
.carl-diagnostic-offer .et_pb_module {
margin-bottom: 0 !important;
}
.carl-diagnostic-copy strong {
display: block;
margin-bottom: 3px;
color: var(--carl-ink);
font-size: var(--carl-type-small) ;
line-height: 1.55;
font-weight: 900;
}
.carl-diagnostic-copy,
.carl-diagnostic-copy .et_pb_text_inner,
.carl-diagnostic-copy p,
.carl-diagnostic-copy span {
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.65 !important;
}
.carl-diagnostic-price,
.carl-diagnostic-price .et_pb_text_inner,
.carl-diagnostic-price p {
margin: 0 !important;
color: var(--carl-blue-gray) !important;
font-size: var(--carl-type-lead) !important;
line-height: 1.2 !important;
font-weight: 900 !important;
white-space: nowrap;
}
.carl-pricing-row {
gap: 16px;
margin-top: 0;
}
.carl-price-card {
min-height: 650px;
padding: 30px !important;
border-radius: 24px;
}
.carl-price-summary,
.carl-price-summary p {
min-height: 58px;
}
.carl-price-fit {
margin: 4px 0 0 !important;
padding: 11px 12px !important;
border-radius: 12px;
color: var(--carl-ink-soft) !important;
background: var(--carl-soft-blue);
}
.carl-price-fit,
.carl-price-fit .et_pb_text_inner,
.carl-price-fit p {
color: var(--carl-ink-soft) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.55 !important;
}
.carl-price-fit strong {
color: var(--carl-blue-gray) !important;
}
.carl-price-card--featured .carl-price-fit {
color: rgba(255, 255, 255, 0.72) !important;
background: rgba(255, 255, 255, 0.08);
}
.carl-price-card--featured .carl-price-fit,
.carl-price-card--featured .carl-price-fit .et_pb_text_inner,
.carl-price-card--featured .carl-price-fit p {
color: rgba(255, 255, 255, 0.72) !important;
}
.carl-price-card--featured .carl-price-fit strong {
color: var(--carl-gold-soft) !important;
}
.carl-price-toggle.et_pb_toggle {
margin-top: 15px !important;
}
.carl-scope-note {
width: 88% !important;
max-width: 1180px !important;
margin: 22px auto 0 !important;
padding: 16px 18px !important;
border: 1px solid var(--carl-line);
border-radius: 16px;
background: rgba(255, 255, 255, 0.72);
}
.carl-scope-note > .et_pb_column {
float: none !important;
width: 100% !important;
margin: 0 !important;
}
.carl-scope-note .et_pb_module {
margin-bottom: 0 !important;
}
.carl-scope-note,
.carl-scope-note .et_pb_text_inner,
.carl-scope-note p {
margin-bottom: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1.7 !important;
}
.carl-scope-note strong {
color: var(--carl-ink-soft);
}
/* ==============================
17.6 FAQ, CTA note and footer alignment
============================== */
.carl-faq-section {
padding: 96px 0 !important;
background: #FFFFFF !important;
}
.carl-faq-grid {
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
gap: 68px;
width: calc(100% - 40px) !important;
max-width: 1180px !important;
}
.carl-faq-intro {
position: static;
top: auto;
}
.carl-faq-list {
gap: 10px;
}
.carl-faq-toggle.et_pb_toggle {
border-radius: 16px !important;
}
.carl-faq-toggle .et_pb_toggle_title {
padding: 20px 54px 20px 20px !important;
}
.carl-faq-toggle .et_pb_toggle_title::before {
right: 20px !important;
}
.carl-faq-toggle .et_pb_toggle_content {
padding: 0 20px 20px !important;
}
.carl-cta-note {
display: block;
margin-top: 14px !important;
}
.carl-cta-note,
.carl-cta-note .et_pb_text_inner,
.carl-cta-note p {
color: rgba(255, 255, 255, 0.52) !important;
font-size: var(--carl-type-meta) !important;
line-height: 1.55 !important;
}
/* ==============================
17.7 Final responsive behaviour
============================== */
@media (max-width: 980px) {
.carl-home-hero {
padding-top: 136px !important;
}
.carl-hero-row,
.carl-pain-grid,
.carl-case-row,
.carl-method-row,
.carl-owner-panel,
.carl-owner-panel--compact,
.carl-faq-grid {
grid-template-columns: 1fr !important;
gap: 48px;
}
.carl-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.carl-owner-section {
padding-bottom: 82px !important;
}
.carl-pricing-head {
grid-template-columns: 1fr;
}
.carl-price-range {
max-width: none;
margin-bottom: 30px !important;
}
.carl-pricing-row {
grid-template-columns: 1fr;
max-width: 680px !important;
margin-right: auto !important;
margin-left: auto !important;
}
.carl-price-card {
min-height: auto;
}
}
@media (max-width: 767px) {
.carl-home-hero {
padding-top: 118px !important;
padding-bottom: 62px !important;
}
.carl-hero-row,
.carl-pain-grid,
.carl-services-section > .et_pb_row:not(.carl-service-grid),
.carl-service-grid,
.carl-faq-grid {
width: calc(100% - 32px) !important;
}
.carl-hero-row {
gap: 42px;
}
.carl-hero-actions,
.carl-hero-actions .et_pb_code_inner {
display: grid !important;
grid-template-columns: 1fr;
}
.carl-hero-actions > .et_pb_module,
.carl-hero-actions .et_pb_code_inner > * {
width: 100% !important;
}
.carl-hero-actions .carl-btn-primary,
.carl-hero-actions .carl-btn-primary .et_pb_button {
width: 100% !important;
}
.carl-hero-actions .carl-btn-secondary,
.carl-hero-actions .carl-btn-secondary .et_pb_button {
width: fit-content !important;
min-height: auto !important;
padding: 6px 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.carl-hero-proof ul,
ul.carl-hero-proof {
gap: 8px 14px;
}
.carl-pain-section,
.carl-services-section,
.carl-case-section,
.carl-method-section,
.carl-pricing-section,
.carl-faq-section {
padding: 64px 0 !important;
}
.carl-pain-grid {
gap: 32px !important;
}
.carl-pain-item {
padding: 18px 18px 18px 68px !important;
}
.carl-pain-item::before {
top: 20px;
left: 18px;
width: 38px;
}
.carl-service-grid {
grid-template-columns: 1fr;
}
.carl-service-card {
min-height: 0;
padding: 24px !important;
}
.carl-case-row,
.carl-method-row {
gap: 38px !important;
}
/* Keep the complete case screenshot visible and remove the fixed-height gap. */
.carl-case-visual {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
min-height: 0 !important;
padding: 18px !important;
border-radius: 24px;
}
.carl-case-visual::after {
display: none;
}
.carl-case-visual > .et_pb_image,
.carl-case-visual .carl-case-media,
.carl-case-visual > .et_pb_code > .et_pb_code_inner > img {
position: relative !important;
inset: auto !important;
flex: 0 0 auto;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
aspect-ratio: 1536 / 1080;
border-radius: 16px;
}
.carl-case-visual > .et_pb_image .et_pb_image_wrap,
.carl-case-visual .carl-case-media > a {
display: block !important;
width: 100% !important;
height: auto !important;
}
.carl-case-visual > .et_pb_image img,
.carl-case-visual .carl-case-media img,
.carl-case-visual > .et_pb_code > .et_pb_code_inner > img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 1536 / 1080;
object-fit: contain !important;
object-position: center center !important;
}
.carl-case-visual > .et_pb_code,
.carl-case-visual > .et_pb_code > .et_pb_code_inner {
position: relative !important;
width: 100% !important;
height: auto !important;
}
.carl-case-visual > .et_pb_code {
flex: 0 0 auto;
}
.carl-case-label {
position: relative !important;
inset: auto !important;
width: auto !important;
margin: 20px 6px 8px !important;
}
.carl-owner-section {
padding-bottom: 64px !important;
}
.carl-owner-panel,
.carl-owner-panel--compact {
gap: 32px !important;
padding: 32px 24px !important;
border-radius: 25px;
}
.carl-owner-mark {
width: 64px;
height: 64px;
margin-bottom: 20px !important;
border-radius: 19px;
font-size: 26px !important;
}
.carl-diagnostic-offer {
grid-template-columns: 1fr;
width: calc(100% - 32px) !important;
margin-top: 0 !important;
padding: 16px !important;
}
.carl-diagnostic-price,
.carl-diagnostic-price .et_pb_text_inner,
.carl-diagnostic-price p {
white-space: normal;
}
.carl-pricing-row,
.carl-scope-note {
width: calc(100% - 32px) !important;
}
.carl-price-card {
padding: 25px !important;
border-radius: 21px;
}
.carl-price-summary,
.carl-price-summary p {
min-height: 0;
}
.carl-faq-grid {
gap: 28px !important;
}
.carl-faq-toggle .et_pb_toggle_title {
padding: 18px 52px 18px 18px !important;
}
.carl-faq-toggle .et_pb_toggle_title::before {
right: 18px !important;
}
.carl-faq-toggle .et_pb_toggle_content {
padding: 0 18px 18px !important;
}
}
/* =========================================================
18. Hero V8 — self-contained Divi 5 components
Purpose:
- The component class lives inside the Code Module HTML.
- No class attribute or Target Element setting is required.
- Unique V8 names prevent legacy Hero rules from overriding the result.
- Visual reference: carl-work-homepage-decision-copy.html.
========================================================= */
/* Divi wrappers containing the V8 components must not constrain their width. */
.et_pb_code:has(.carl-hero-audience-v8),
.et_pb_code_inner:has(> .carl-hero-audience-v8),
.et_pb_code:has(.carl-hero-visual-v8),
.et_pb_code_inner:has(> .carl-hero-visual-v8) {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.et_pb_code:has(.carl-hero-visual-v8),
.et_pb_code_inner:has(> .carl-hero-visual-v8),
.et_pb_column:has(.carl-hero-visual-v8) {
overflow: visible !important;
}
/* 18.1 Hero audience strip */
.carl-hero-audience-v8 {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
width: 100% !important;
max-width: none !important;
margin: 34px 0 0 !important;
padding: 0 !important;
overflow: hidden;
border: 1px solid rgba(47, 93, 124, 0.11);
border-radius: 16px;
background: rgba(47, 93, 124, 0.10);
}
.carl-hero-audience-v8 > span {
display: grid;
min-width: 0;
min-height: 42px;
padding: 11px 8px;
place-items: center;
color: var(--carl-blue-gray);
background: rgba(255, 255, 255, 0.74);
font-size: var(--carl-type-meta) ;
line-height: 1.35;
font-weight: 850;
text-align: center;
}
/* 18.2 Hero website illustration */
.carl-hero-visual-v8,
.carl-hero-visual-v8 * {
box-sizing: border-box;
}
.carl-hero-visual-v8 {
position: relative;
z-index: 8;
display: block;
width: 100% !important;
max-width: 560px !important;
min-width: 0;
margin: 0 auto !important;
padding: 28px 0 38px;
overflow: visible !important;
isolation: isolate;
}
.carl-hero-visual-v8 .carl-v8-browser {
position: relative;
z-index: 2;
overflow: hidden;
border: 1px solid rgba(47, 93, 124, 0.12);
border-radius: 28px;
background: #FFFFFF;
box-shadow: var(--carl-shadow);
transform: rotate(1.2deg);
transform-origin: 50% 50%;
}
.carl-hero-visual-v8 .carl-v8-browser-top {
display: flex;
height: 42px;
padding: 0 16px;
align-items: center;
gap: 7px;
background: #F4F7F9;
}
.carl-hero-visual-v8 .carl-v8-browser-top > span {
display: block;
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #CAD5DC;
}
.carl-hero-visual-v8 .carl-v8-browser-url {
width: 42%;
height: 8px;
margin-left: 12px;
border-radius: 999px;
background: #E2E9ED;
}
.carl-hero-visual-v8 .carl-v8-browser-screen {
padding: 26px;
background: linear-gradient(145deg, #FFFFFF, #F7FAFB);
}
.carl-hero-visual-v8 .carl-v8-mock-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.carl-hero-visual-v8 .carl-v8-mock-logo {
width: 58px;
height: 12px;
border-radius: 999px;
background: var(--carl-blue-gray);
}
.carl-hero-visual-v8 .carl-v8-mock-links {
display: flex;
gap: 8px;
}
.carl-hero-visual-v8 .carl-v8-mock-links > span {
display: block;
width: 32px;
height: 6px;
border-radius: 999px;
background: #DCE5EA;
}
.carl-hero-visual-v8 .carl-v8-mock-hero {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 24px;
align-items: center;
min-height: 238px;
}
.carl-hero-visual-v8 .carl-v8-mock-copy {
min-width: 0;
}
.carl-hero-visual-v8 .carl-v8-line {
height: 11px;
margin: 10px 0;
border-radius: 999px;
background: #DBE4E9;
}
.carl-hero-visual-v8 .carl-v8-line--big {
width: 92%;
height: 18px;
background: var(--carl-ink-soft);
}
.carl-hero-visual-v8 .carl-v8-line--mid {
width: 74%;
height: 18px;
background: var(--carl-ink-soft);
}
.carl-hero-visual-v8 .carl-v8-line--small {
width: 82%;
}
.carl-hero-visual-v8 .carl-v8-line--w66 {
width: 66%;
}
.carl-hero-visual-v8 .carl-v8-mock-button {
width: 92px;
height: 28px;
margin-top: 22px;
border-radius: 999px;
background: var(--carl-blue-action);
}
.carl-hero-visual-v8 .carl-v8-mock-art {
width: 100%;
aspect-ratio: 1;
border-radius: 24px 24px 68px 24px;
background:
radial-gradient(circle at 64% 32%, #FFFFFF 0 8%, transparent 9%),
linear-gradient(145deg, #DFEAF0, #8EB2C7);
}
.carl-hero-visual-v8 .carl-v8-mock-card-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.carl-hero-visual-v8 .carl-v8-mock-card {
min-width: 0;
padding: 14px;
border: 1px solid #E1E8EC;
border-radius: 13px;
background: #FFFFFF;
}
.carl-hero-visual-v8 .carl-v8-mock-card > i {
display: block;
width: 24px;
height: 24px;
margin-bottom: 12px;
border-radius: 8px;
background: var(--carl-soft-sand);
}
.carl-hero-visual-v8 .carl-v8-mock-card > span {
display: block;
width: 88%;
height: 6px;
margin-top: 7px;
border-radius: 999px;
background: #DFE6EA;
}
.carl-hero-visual-v8 .carl-v8-mock-card > .carl-v8-w66 {
width: 66%;
}
.carl-hero-visual-v8 .carl-v8-mock-card > .carl-v8-w72 {
width: 72%;
}
.carl-hero-visual-v8 .carl-v8-mock-card > .carl-v8-w75 {
width: 75%;
}
.carl-hero-visual-v8 .carl-v8-floating-note {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
border: 1px solid rgba(47, 93, 124, 0.11);
border-radius: 12px;
color: var(--carl-blue-gray);
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--carl-shadow-soft);
font-size: 12px;
line-height: 1.35;
font-weight: 800;
white-space: nowrap;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.carl-hero-visual-v8 .carl-v8-floating-note svg {
display: block;
width: 18px;
height: 18px;
flex: 0 0 18px;
color: var(--carl-blue-action);
stroke: currentColor;
}
.carl-hero-visual-v8 .carl-v8-note-one {
top: 0;
right: 28px;
}
.carl-hero-visual-v8 .carl-v8-note-two {
bottom: 14px;
left: -28px;
}
@media (max-width: 980px) {
.carl-hero-visual-v8 {
max-width: 650px !important;
}
}
@media (max-width: 767px) {
.carl-hero-audience-v8 {
margin-top: 26px !important;
}
.carl-hero-audience-v8 > span {
min-height: 40px;
padding: 10px 6px;
font-size: var(--carl-type-meta) ;
}
.carl-hero-visual-v8 {
max-width: none !important;
padding-top: 22px;
padding-bottom: 32px;
}
.carl-hero-visual-v8 .carl-v8-browser {
border-radius: 22px;
transform: none;
}
.carl-hero-visual-v8 .carl-v8-browser-screen {
padding: 18px;
}
.carl-hero-visual-v8 .carl-v8-mock-links > span {
width: 28px;
}
.carl-hero-visual-v8 .carl-v8-mock-hero {
gap: 14px;
min-height: 190px;
}
.carl-hero-visual-v8 .carl-v8-line--big,
.carl-hero-visual-v8 .carl-v8-line--mid {
height: 16px;
}
.carl-hero-visual-v8 .carl-v8-line {
margin-top: 8px;
margin-bottom: 8px;
}
.carl-hero-visual-v8 .carl-v8-mock-button {
width: 72px;
height: 24px;
margin-top: 14px;
}
.carl-hero-visual-v8 .carl-v8-mock-art {
border-radius: 19px 19px 48px 19px;
}
.carl-hero-visual-v8 .carl-v8-mock-card-row {
gap: 7px;
}
.carl-hero-visual-v8 .carl-v8-mock-card {
padding: 9px;
}
.carl-hero-visual-v8 .carl-v8-mock-card > i {
margin-bottom: 9px;
}
.carl-hero-visual-v8 .carl-v8-floating-note {
padding: 8px 10px;
font-size: 11px;
}
.carl-hero-visual-v8 .carl-v8-floating-note svg {
width: 16px;
height: 16px;
flex-basis: 16px;
}
.carl-hero-visual-v8 .carl-v8-note-one {
top: 0;
right: 10px;
}
.carl-hero-visual-v8 .carl-v8-note-two {
bottom: 8px;
left: 8px;
}
}
@media (max-width: 380px) {
.carl-hero-audience-v8 {
grid-template-columns: 1fr;
}
.carl-hero-visual-v8 .carl-v8-mock-links > span:nth-child(3) {
display: none;
}
}
/* =========================================================
ABOUT-01. About — Profile Page
For: about-01-profile / 關於我
Namespace: carl-about-* on Divi Sections, Rows and Modules
Important:
- Reuse the existing Theme Builder header and footer.
- Add classes in Divi 5 through Advanced > Attributes.
- Project cards contain their own anchor; leave the Code
Module's Content > Link field empty to avoid nested links.
========================================================= */
/* ABOUT-01.1 Shared rows, headings and Code Module resets */
.carl-about-hero-row,
.carl-about-story-row,
.carl-about-skills-head-row,
.carl-about-skills-row,
.carl-about-work-head-row,
.carl-about-work-row,
.carl-about-recognition-row,
.carl-about-contact-row {
width: min(1160px, calc(100% - 48px)) !important;
max-width: 1160px !important;
margin-right: auto !important;
margin-left: auto !important;
padding: 0 !important;
}
.carl-about-hero .et_pb_module,
.carl-about-story .et_pb_module,
.carl-about-skills .et_pb_module,
.carl-about-work .et_pb_module,
.carl-about-recognition .et_pb_module,
.carl-about-contact .et_pb_module {
margin-bottom: 0;
}
.carl-about-hero .et_pb_code,
.carl-about-hero .et_pb_code_inner,
.carl-about-story .et_pb_code,
.carl-about-story .et_pb_code_inner,
.carl-about-skills .et_pb_code,
.carl-about-skills .et_pb_code_inner,
.carl-about-work .et_pb_code,
.carl-about-work .et_pb_code_inner,
.carl-about-recognition .et_pb_code,
.carl-about-recognition .et_pb_code_inner,
.carl-about-contact .et_pb_code,
.carl-about-contact .et_pb_code_inner {
width: 100%;
overflow: visible;
}
.carl-about-hero-row::after,
.carl-about-story-row::after,
.carl-about-skills-head-row::after,
.carl-about-work-head-row::after,
.carl-about-recognition-row::after,
.carl-about-contact-row::after {
display: none !important;
}
.carl-about-kicker p {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 !important;
color: var(--carl-blue-gray) !important;
font-size: var(--carl-type-eyebrow) !important;
line-height: 1.4 !important;
font-weight: 900 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.carl-about-kicker p::before {
content: "";
width: 28px;
height: 2px;
flex: 0 0 28px;
border-radius: 999px;
background: var(--carl-gold);
}
.carl-about-section-title h2 {
margin: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
letter-spacing: -.025em ;
}
.carl-about-section-intro p {
max-width: 620px;
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-intro) !important;
line-height: 1.78 !important;
}
.carl-about-btn {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid transparent;
border-radius: 999px;
padding: 0 21px;
font-size: var(--carl-type-button) ;
line-height: 1.25;
font-weight: 850;
text-decoration: none !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.carl-about-btn:hover,
.carl-about-btn:focus-visible {
transform: translateY(-2px);
}
.carl-about-btn--primary {
color: var(--carl-white) !important;
background: linear-gradient(135deg, var(--carl-blue-action), var(--carl-blue-action-dark));
box-shadow: 0 14px 32px rgba(45, 125, 210, 0.22);
}
.carl-about-btn--secondary {
border-color: rgba(47, 93, 124, 0.15);
color: var(--carl-blue-gray) !important;
background: rgba(255, 255, 255, 0.74);
}
/* ABOUT-01.2 Hero */
.carl-about-hero {
position: relative;
overflow: hidden;
padding: 142px 0 84px !important;
background:
radial-gradient(circle at 88% 8%, rgba(214, 168, 90, 0.18), transparent 25rem),
radial-gradient(circle at 5% 85%, rgba(45, 125, 210, 0.08), transparent 26rem),
linear-gradient(135deg, var(--carl-cream), var(--carl-warm-bg) 52%, var(--carl-soft-blue)) !important;
}
.carl-about-hero::after {
content: "CARL";
position: absolute;
right: -30px;
bottom: -71px;
color: rgba(47, 93, 124, 0.035);
font-size: clamp(144px, 22vw, 336px);
line-height: 0.82;
font-weight: 950;
letter-spacing: -0.08em;
pointer-events: none;
}
.carl-about-hero-row {
position: relative;
z-index: 2;
display: grid !important;
grid-template-columns: minmax(310px, 0.74fr) minmax(0, 1.26fr);
gap: clamp(46px, 6vw, 82px);
align-items: center;
}
.carl-about-hero-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
.carl-about-profile-card {
position: relative;
min-height: 532px;
overflow: hidden;
border: 1px solid rgba(47, 93, 124, 0.12);
border-radius: 146px 28px 28px 28px;
padding: 25px;
background: rgba(255, 255, 255, 0.77);
box-shadow: var(--carl-shadow);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.carl-about-profile-art {
position: relative;
display: grid;
height: 347px;
overflow: hidden;
place-items: center;
border-radius: 122px 22px 22px 22px;
color: var(--carl-white);
background:
radial-gradient(circle at 72% 20%, rgba(214, 168, 90, 0.35), transparent 9rem),
linear-gradient(150deg, #263d50, var(--carl-blue-gray) 48%, var(--carl-blue-action));
}
.carl-about-profile-photo {
display: block;
width: 100%;
height: 347px;
object-fit: cover;
object-position: center;
border-radius: 122px 22px 22px 22px;
}
.carl-about-profile-card .carl-about-profile-art::before,
.carl-about-profile-card .carl-about-profile-art::after {
display: none !important;
content: none !important;
}
.carl-about-profile-art::before,
.carl-about-profile-art::after {
content: "";
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.23);
border-radius: 50%;
}
.carl-about-profile-art::before {
top: -100px;
right: -92px;
width: 276px;
height: 276px;
box-shadow: 0 0 0 45px rgba(255, 255, 255, 0.045);
}
.carl-about-profile-art::after {
bottom: -84px;
left: -76px;
width: 174px;
height: 174px;
}
.carl-about-profile-letter {
position: relative;
z-index: 2;
margin-left: -0.08em;
font-size: clamp(104px, 11vw, 138px);
line-height: 1;
font-weight: 950;
letter-spacing: -0.09em;
}
.carl-about-profile-label {
position: absolute;
z-index: 3;
top: 23px;
left: 24px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
padding: 7px 10px;
color: rgba(255, 255, 255, 0.78);
background: rgba(20, 39, 54, 0.22);
font-size: var(--carl-type-meta) ;
line-height: 1.35;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
.carl-about-profile-copy {
padding: 22px 7px 2px;
}
.carl-about-profile-copy > strong {
display: block;
color: var(--carl-ink);
font-size: var(--carl-type-h3) ;
line-height: 1.5 ;
letter-spacing: -0.035em;
}
.carl-about-profile-copy > span {
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
}
.carl-about-profile-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 17px;
border-top: 1px solid var(--carl-line);
padding-top: 16px;
}
.carl-about-profile-meta small {
display: block;
margin-bottom: 2px;
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.carl-about-profile-meta b {
color: var(--carl-ink-soft);
font-size: var(--carl-type-meta) ;
}
.carl-about-hero-title h1 {
max-width: 760px;
margin: 16px 0 23px !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h1) !important;
line-height: var(--carl-type-h1-line) !important;
letter-spacing: -.04em ;
}
.carl-about-hero-title h1 span {
color: var(--carl-blue-gray);
}
.carl-about-hero-lead p {
max-width: 680px;
margin: 0 !important;
color: var(--carl-text-gray) !important;
font-size: var(--carl-type-lead) !important;
line-height: 1.68 !important;
}
.carl-about-actions {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin-top: 29px;
}
.carl-about-focus-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 35px;
border-top: 1px solid rgba(47, 93, 124, 0.14);
padding-top: 23px;
}
.carl-about-focus-item {
padding-right: 18px;
}
.carl-about-focus-item + .carl-about-focus-item {
border-left: 1px solid rgba(47, 93, 124, 0.12);
padding-left: 18px;
}
.carl-about-focus-item small {
display: block;
margin-bottom: 3px;
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.carl-about-focus-item strong {
color: var(--carl-ink-soft);
font-size: var(--carl-type-meta) ;
line-height: 1.45;
}
/* ABOUT-01.3 Background */
.carl-about-story {
padding: 96px 0 !important;
background: var(--carl-white) !important;
}
.carl-about-story-row {
display: grid !important;
grid-template-columns: minmax(300px, 0.67fr) minmax(0, 1fr);
gap: 84px;
align-items: start;
}
.carl-about-story-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
.carl-about-story-title h2 {
margin: 15px 0 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
letter-spacing: -.025em ;
}
.carl-about-story-copy p {
margin: 0 0 18px !important;
color: var(--carl-ink-soft) !important;
font-size: var(--carl-type-body) !important;
line-height: 1.75 !important;
}
.carl-about-story-copy p:first-child {
font-size: var(--carl-type-lead) !important;
line-height: 1.65 !important;
font-weight: 720;
}
.carl-about-approach {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 13px;
}
.carl-about-approach-item {
min-height: 114px;
border: 1px solid var(--carl-line);
border-radius: 18px;
padding: 19px;
background: linear-gradient(145deg, var(--carl-cream), var(--carl-soft-blue));
}
.carl-about-approach-item small {
display: block;
margin-bottom: 8px;
color: var(--carl-blue-action);
font-size: var(--carl-type-meta) ;
font-weight: 900;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.carl-about-approach-item strong {
display: block;
color: var(--carl-ink);
font-size: var(--carl-type-meta) ;
line-height: 1.42;
}
/* ABOUT-01.4 Skills */
.carl-about-skills {
padding: 96px 0 !important;
background: linear-gradient(180deg, #f7f9fa, var(--carl-warm-bg)) !important;
}
.carl-about-skills-head-row,
.carl-about-work-head-row {
display: grid !important;
grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1fr);
gap: 72px;
align-items: end;
margin-bottom: 40px !important;
}
.carl-about-skills-head-row > .et_pb_column,
.carl-about-work-head-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
.carl-about-skill-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
.carl-about-skill-grid > .et_pb_code {
height: 100%;
margin: 0 !important;
}
.carl-about-skill-grid > .et_pb_code > .et_pb_code_inner {
height: 100%;
}
.carl-about-skill-card {
position: relative;
min-height: 248px;
height: 100%;
overflow: hidden;
border: 1px solid var(--carl-line);
border-radius: 23px;
padding: 30px;
background: var(--carl-white);
box-shadow: 0 10px 32px rgba(30, 42, 54, 0.035);
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.carl-about-skill-card:hover {
transform: translateY(-4px);
border-color: rgba(45, 125, 210, 0.25);
box-shadow: var(--carl-shadow-soft);
}
.carl-about-skill-no {
display: inline-grid;
width: 37px;
height: 37px;
place-items: center;
border-radius: 12px;
color: var(--carl-blue-action);
background: var(--carl-soft-blue);
font-size: var(--carl-type-meta) ;
font-weight: 950;
letter-spacing: 0.06em;
}
.carl-about-skill-card h3 {
margin: 28px 0 10px;
color: var(--carl-ink);
font-size: var(--carl-type-card-title) ;
line-height: 1.5 ;
letter-spacing: -0.035em;
}
.carl-about-skill-card p {
max-width: 490px;
margin: 0 0 18px;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.68;
}
.carl-about-skill-output {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.carl-about-skill-output li {
border-radius: 999px;
padding: 5px 9px;
color: var(--carl-blue-gray);
background: var(--carl-soft-blue);
font-size: var(--carl-type-meta) ;
line-height: 1.35;
font-weight: 800;
}
/* ABOUT-01.5 Selected work and clickable project cards */
.carl-about-work {
padding: 96px 0 !important;
background: var(--carl-white) !important;
}
.carl-about-project-grid {
display: grid;
grid-template-columns: minmax(0, 1.24fr) minmax(310px, 0.76fr);
gap: 16px;
}
.carl-about-project-grid > .et_pb_code {
height: 100%;
margin: 0 !important;
}
.carl-about-project-grid > .et_pb_code > .et_pb_code_inner {
height: 100%;
}
.carl-about-work .carl-project {
position: relative;
min-height: 470px;
height: 100%;
overflow: hidden;
border-radius: 27px;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.carl-about-work .carl-project:hover {
transform: translateY(-5px);
box-shadow: var(--carl-shadow-soft);
}
.carl-about-work .carl-project-featured {
color: var(--carl-white);
background:
radial-gradient(circle at 10% 0%, rgba(214, 168, 90, 0.24), transparent 23rem),
linear-gradient(145deg, #314a5e, #1b2a37);
}
.carl-about-work .carl-project-secondary {
border: 1px solid var(--carl-line);
color: var(--carl-ink);
background: linear-gradient(145deg, var(--carl-cream), var(--carl-soft-blue));
}
.carl-about-work .carl-project-card-link {
position: relative;
z-index: 1;
display: flex;
min-height: 470px;
height: 100%;
flex-direction: column;
padding: 38px;
color: inherit !important;
text-decoration: none !important;
}
.carl-about-work .carl-project-secondary .carl-project-card-link {
padding: 34px;
}
.carl-about-work .carl-project-card-link:focus-visible {
outline: 3px solid rgba(214, 168, 90, 0.88);
outline-offset: -7px;
border-radius: 27px;
}
.carl-about-work .carl-project-index {
color: var(--carl-gold);
font-size: var(--carl-type-meta) ;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.carl-about-work .carl-project-secondary .carl-project-index {
color: var(--carl-blue-action);
}
.carl-about-work .carl-project h3 {
position: relative;
z-index: 2;
max-width: 540px;
margin: 48px 0 13px;
color: inherit;
font-size: var(--carl-type-case-title) ;
line-height: 1.5 ;
letter-spacing: -0.045em;
}
.carl-about-work .carl-project-secondary h3 {
font-size: var(--carl-type-case-title) ;
}
.carl-about-work .carl-project-description {
position: relative;
z-index: 2;
max-width: 520px;
margin: 0 0 23px;
color: inherit;
opacity: 0.74;
font-size: var(--carl-type-small) ;
line-height: 1.68;
}
.carl-about-work .carl-tags {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.carl-about-work .carl-tags span {
border-radius: 999px;
padding: 5px 9px;
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.09);
font-size: var(--carl-type-meta) ;
line-height: 1.35;
font-weight: 800;
}
.carl-about-work .carl-project-secondary .carl-tags span {
color: var(--carl-blue-gray);
background: rgba(45, 125, 210, 0.08);
}
.carl-about-work .carl-project-role {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
width: min(100%, 500px);
margin-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
padding-top: 20px;
}
.carl-about-work .carl-project-secondary .carl-project-role {
margin-top: auto;
border-top-color: rgba(47, 93, 124, 0.13);
}
.carl-about-work .carl-project-role small {
color: var(--carl-gold);
font-size: var(--carl-type-meta) ;
font-weight: 900;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.carl-about-work .carl-project-secondary .carl-project-role small {
color: var(--carl-blue-action);
}
.carl-about-work .carl-project-role strong {
color: inherit;
font-size: var(--carl-type-meta) ;
line-height: 1.55;
}
.carl-about-work .carl-project-view {
position: relative;
z-index: 3;
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 9px;
margin-top: 23px;
border-bottom: 1px solid rgba(255, 255, 255, 0.34);
padding-bottom: 4px;
color: var(--carl-white);
font-size: var(--carl-type-button) ;
line-height: 1.4;
font-weight: 850;
letter-spacing: 0.02em;
}
.carl-about-work .carl-project-secondary .carl-project-view {
border-bottom-color: rgba(47, 93, 124, 0.28);
color: var(--carl-blue-gray);
}
.carl-about-work .carl-project-view span {
color: var(--carl-gold);
transition: transform 0.2s ease;
}
.carl-about-work .carl-project-card-link:hover .carl-project-view span,
.carl-about-work .carl-project-card-link:focus-visible .carl-project-view span {
transform: translateX(4px);
}
.carl-about-work .carl-project-window {
position: absolute;
right: -41px;
bottom: -54px;
width: 46%;
height: 218px;
border-radius: 18px;
padding: 12px;
background: var(--carl-white);
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.25);
transform: rotate(-3deg);
pointer-events: none;
}
.carl-about-work .carl-project-window::before {
content: "";
display: block;
height: 18px;
border-bottom: 1px solid var(--carl-line);
background: radial-gradient(circle at 5px 7px, #d7dfe4 0 3px, transparent 3.4px);
background-size: 12px 12px;
background-repeat: repeat-x;
}
.carl-about-work .carl-window-body {
display: grid;
height: 160px;
margin-top: 8px;
place-items: center;
border-radius: 10px;
color: #00642c;
background: linear-gradient(145deg, #f5faf7, #d9eadf);
font-size: 18px;
font-weight: 950;
letter-spacing: 0.08em;
}
/* ABOUT-01.6 Awards and professional recognition
Exact Divi structure: one 2-column Row.
Left Column = heading copy; right Column = three Code Modules stacked vertically. */
.carl-about-recognition {
padding: 96px 0 !important;
background: var(--carl-warm-bg) !important;
}
.carl-about-recognition-row {
display: grid !important;
grid-template-columns: minmax(280px, 0.66fr) minmax(0, 1.34fr);
gap: 70px;
align-items: start;
}
.carl-about-recognition-row > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
.carl-about-recognition-copy .carl-about-section-title h2 {
margin: 14px 0 15px !important;
font-size: var(--carl-type-h2) !important;
}
.carl-about-recognition-copy .carl-about-section-intro p {
margin: 0 0 19px !important;
}
.carl-about-recognition-preview p,
.carl-about-recognition-preview {
display: inline-flex;
margin: 0 !important;
border-radius: 999px;
padding: 6px 10px;
color: #806331 !important;
background: rgba(214, 168, 90, 0.15);
font-size: var(--carl-type-meta) !important;
line-height: 1.4 !important;
font-weight: 900 !important;
letter-spacing: 0.06em;
}
.carl-about-recognition-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-flow: row;
gap: 10px;
align-content: start;
}
.carl-about-recognition-list > .et_pb_module,
.carl-about-recognition-list > .et_pb_code {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.carl-about-recognition-item {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
min-height: 84px;
border: 1px dashed #c9d2d8;
border-radius: 18px;
padding: 20px;
background: rgba(255, 255, 255, 0.72);
}
.carl-about-recognition-number {
display: grid;
width: 44px;
height: 44px;
place-items: center;
border-radius: 14px;
color: var(--carl-blue-action);
background: var(--carl-soft-blue);
font-size: var(--carl-type-meta) ;
line-height: 1;
font-weight: 950;
}
.carl-about-recognition-item h3 {
margin: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-body) !important;
line-height: 1.35 !important;
letter-spacing: -0.02em;
}
.carl-about-recognition-detail {
display: block;
margin-top: 3px;
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
line-height: 1.55;
}
.carl-about-recognition-year {
color: var(--carl-blue-gray);
font-size: var(--carl-type-meta) ;
line-height: 1.4;
font-weight: 850;
text-align: right;
}
/* ABOUT-01.7 Final CTA */
.carl-about-contact {
padding: 22px 0 82px !important;
background: var(--carl-white) !important;
}
.carl-about-contact-row {
position: relative;
overflow: hidden;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 42px;
align-items: center;
min-height: 245px;
border-radius: 29px;
padding: 50px !important;
color: var(--carl-white);
background:
radial-gradient(circle at 84% 0%, rgba(214, 168, 90, 0.27), transparent 21rem),
linear-gradient(145deg, var(--carl-blue-gray), #1b2a37);
}
.carl-about-contact-row > .et_pb_column {
position: relative;
z-index: 2;
width: auto !important;
margin: 0 !important;
}
.carl-about-contact-copy h2 {
max-width: 720px;
margin: 0 0 11px !important;
color: var(--carl-white) !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
letter-spacing: -.025em ;
}
.carl-about-contact-copy p {
margin: 0 !important;
color: rgba(255, 255, 255, 0.68) !important;
font-size: var(--carl-type-small) !important;
line-height: 1.7 !important;
}
.carl-about-contact-action > .et_pb_code_inner {
display: flex;
justify-content: flex-end;
}
.carl-about-btn--light {
flex: 0 0 auto;
color: var(--carl-ink) !important;
background: var(--carl-white);
}
.carl-about-btn--light:hover,
.carl-about-btn--light:focus-visible {
background: var(--carl-gold);
}
/* ABOUT-01.8 Responsive behaviour */
@media (max-width: 980px) {
.carl-about-hero-row {
grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
gap: 42px;
}
.carl-about-profile-card {
min-height: 455px;
}
.carl-about-profile-art {
height: 286px;
}
.carl-about-profile-photo {
height: 286px;
}
.carl-about-profile-letter {
font-size: 102px;
}
.carl-about-project-grid {
grid-template-columns: minmax(0, 1fr);
}
.carl-about-work .carl-project-secondary,
.carl-about-work .carl-project-secondary .carl-project-card-link {
min-height: 370px;
}
.carl-about-work .carl-project-secondary .carl-project-role {
margin-top: 28px;
}
}
@media (max-width: 767px) {
.carl-about-hero-row,
.carl-about-story-row,
.carl-about-skills-head-row,
.carl-about-skills-row,
.carl-about-work-head-row,
.carl-about-work-row,
.carl-about-recognition-row,
.carl-about-contact-row {
width: min(1160px, calc(100% - 28px)) !important;
}
.carl-about-hero {
padding: 112px 0 68px !important;
}
.carl-about-story,
.carl-about-skills,
.carl-about-work,
.carl-about-recognition {
padding: 70px 0 !important;
}
.carl-about-hero-row,
.carl-about-story-row,
.carl-about-skills-head-row,
.carl-about-work-head-row,
.carl-about-recognition-row,
.carl-about-contact-row {
grid-template-columns: minmax(0, 1fr);
gap: 31px;
}
.carl-about-intro-col {
order: -1;
}
.carl-about-hero-title h1 {
font-size: var(--carl-type-h1) !important;
}
.carl-about-profile-card {
width: min(100%, 430px);
min-height: 0;
margin-inline: auto;
border-radius: 112px 22px 22px 22px;
padding: 18px;
}
.carl-about-profile-art {
height: 304px;
border-radius: 96px 17px 17px 17px;
}
.carl-about-profile-photo {
height: 304px;
border-radius: 96px 17px 17px 17px;
}
.carl-about-profile-copy {
padding-right: 5px;
padding-left: 5px;
}
.carl-about-focus-strip,
.carl-about-approach,
.carl-about-skill-grid {
grid-template-columns: minmax(0, 1fr);
}
.carl-about-focus-strip {
gap: 12px;
}
.carl-about-focus-item {
padding: 0;
}
.carl-about-focus-item + .carl-about-focus-item {
border-top: 1px solid rgba(47, 93, 124, 0.1);
border-left: 0;
padding: 12px 0 0;
}
.carl-about-approach-item,
.carl-about-skill-card {
min-height: 0;
}
.carl-about-skill-card {
padding: 25px;
}
.carl-about-work .carl-project,
.carl-about-work .carl-project-card-link,
.carl-about-work .carl-project-secondary,
.carl-about-work .carl-project-secondary .carl-project-card-link {
min-height: 430px;
}
.carl-about-work .carl-project-card-link,
.carl-about-work .carl-project-secondary .carl-project-card-link {
padding: 28px;
}
.carl-about-work .carl-project-window {
width: 58%;
opacity: 0.45;
}
.carl-about-contact {
padding: 8px 0 66px !important;
}
.carl-about-contact-row {
min-height: 0;
padding: 36px 27px !important;
}
.carl-about-contact-action > .et_pb_code_inner {
justify-content: flex-start;
}
}
@media (max-width: 430px) {
.carl-about-actions {
display: grid;
}
.carl-about-actions .carl-about-btn {
width: 100%;
}
.carl-about-profile-meta {
grid-template-columns: minmax(0, 1fr);
}
.carl-about-work .carl-project-window {
display: none;
}
.carl-about-work .carl-project h3,
.carl-about-work .carl-project-secondary h3 {
font-size: var(--carl-type-case-title) ;
}
.carl-about-recognition-item {
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
}
.carl-about-recognition-year {
grid-column: 2;
text-align: left;
}
}
@media (prefers-reduced-motion: reduce) {
.carl-about-hero *,
.carl-about-story *,
.carl-about-skills *,
.carl-about-work *,
.carl-about-recognition *,
.carl-about-contact * {
scroll-behavior: auto !important;
transition: none !important;
}
}
/* =========================================================
CONTACT-01. Contact — Mainland China Page
For: contact / 聯繫
Namespace: carl-contact-*
Important:
- Reuse the existing Theme Builder header and footer.
- WeChat and phone are primary; email is secondary.
- Replace the QR placeholder, WeChat ID and phone before launch.
- Page-level HTML belongs in Code Modules; keep CSS here.
========================================================= */
/* CONTACT-01.1 Shared rows and Divi Code Module resets */
.carl-contact-hero-row,
.carl-contact-guide-row,
.carl-contact-direct-row {
width: min(1180px, calc(100% - 48px)) !important;
max-width: 1180px !important;
margin-right: auto !important;
margin-left: auto !important;
padding: 0 !important;
}
.carl-contact-hero .et_pb_module,
.carl-contact-guide .et_pb_module,
.carl-contact-direct .et_pb_module {
margin-bottom: 0;
}
.carl-contact-hero-copy-module,
.carl-contact-hero-copy-module > .et_pb_code_inner,
.carl-contact-channel-module,
.carl-contact-channel-module > .et_pb_code_inner,
.carl-contact-guide-module,
.carl-contact-guide-module > .et_pb_code_inner,
.carl-contact-direct-module,
.carl-contact-direct-module > .et_pb_code_inner {
width: 100%;
min-width: 0;
}
.carl-contact-kicker {
display: inline-flex;
align-items: center;
gap: 11px;
margin: 0;
padding: 0 !important;
color: var(--carl-blue-gray);
font-size: var(--carl-type-eyebrow) ;
line-height: 1.4;
font-weight: 850;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.carl-contact-kicker::before {
content: "";
width: 30px;
height: 2px;
flex: 0 0 30px;
border-radius: 99px;
background: var(--carl-gold);
}
.carl-contact-hero a:focus-visible,
.carl-contact-guide a:focus-visible,
.carl-contact-direct a:focus-visible,
.carl-contact-copy-button:focus-visible {
outline: 3px solid rgba(45, 125, 210, 0.45);
outline-offset: 3px;
}
/* CONTACT-01.2 Hero — contact-first layout */
.carl-contact-hero {
position: relative;
overflow: hidden;
padding: 150px 0 112px !important;
background:
radial-gradient(circle at 7% 10%, rgba(214, 168, 90, 0.14), transparent 28%),
radial-gradient(circle at 93% 20%, rgba(45, 125, 210, 0.11), transparent 30%),
linear-gradient(135deg, var(--carl-cream) 0%, var(--carl-warm-bg) 52%, var(--carl-soft-blue) 100%) !important;
}
.carl-contact-hero::before {
content: "";
position: absolute;
right: -280px;
bottom: -360px;
width: 660px;
height: 660px;
border: 1px solid rgba(47, 93, 124, 0.13);
border-radius: 50%;
box-shadow:
0 0 0 74px rgba(45, 125, 210, 0.025),
0 0 0 150px rgba(214, 168, 90, 0.03);
pointer-events: none;
}
.carl-contact-hero-row {
position: relative;
z-index: 1;
display: grid !important;
grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
gap: clamp(54px, 8vw, 104px);
align-items: center;
}
.carl-contact-hero-row > .et_pb_column {
width: auto !important;
min-width: 0;
margin: 0 !important;
}
.carl-contact-hero-copy {
min-width: 0;
}
.carl-contact-hero-copy h1 {
max-width: 720px;
margin: 25px 0 28px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h1) !important;
line-height: var(--carl-type-h1-line) !important;
font-weight: 700 !important;
letter-spacing: -.04em ;
}
.carl-contact-hero-lead {
max-width: 650px;
margin: 0;
padding: 0 !important;
color: var(--carl-text-gray);
font-size: var(--carl-type-lead) ;
line-height: 1.85;
}
.carl-contact-quick-actions {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
gap: 12px;
margin-top: 38px;
}
.carl-contact-channel-button {
min-width: 0;
min-height: 84px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 13px;
align-items: center;
padding: 14px 17px;
border: 1px solid transparent;
border-radius: 18px;
text-decoration: none !important;
box-shadow: var(--carl-shadow-soft);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.carl-contact-channel-button:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(30, 42, 54, 0.14);
}
.carl-contact-channel-button--wechat {
color: var(--carl-white) !important;
background: linear-gradient(135deg, var(--carl-wechat), var(--carl-wechat-dark));
}
.carl-contact-channel-button--phone {
border-color: rgba(47, 93, 124, 0.15);
color: var(--carl-ink) !important;
background: rgba(255, 253, 248, 0.9);
}
.carl-contact-channel-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 13px;
background: rgba(255, 255, 255, 0.17);
}
.carl-contact-channel-button--phone .carl-contact-channel-icon {
color: var(--carl-blue-gray);
background: var(--carl-soft-blue);
}
.carl-contact-channel-icon svg {
width: 23px;
height: 23px;
}
.carl-contact-channel-button small,
.carl-contact-channel-button strong {
display: block;
}
.carl-contact-channel-button small {
margin-bottom: 2px;
color: inherit;
font-size: var(--carl-type-meta) ;
line-height: 1.35;
font-weight: 650;
opacity: 0.78;
}
.carl-contact-channel-button strong {
overflow: hidden;
color: inherit;
font-size: var(--carl-type-button) ;
line-height: 1.35;
font-weight: 850;
text-overflow: ellipsis;
white-space: nowrap;
}
.carl-contact-channel-arrow {
width: 18px;
height: 18px;
opacity: 0.72;
}
.carl-contact-email-fallback {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 7px 12px;
margin-top: 17px;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
}
.carl-contact-email-fallback a {
color: var(--carl-blue-gray) !important;
font-size: var(--carl-type-small) ;
font-weight: 800;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.carl-contact-promises {
display: grid;
gap: 13px;
margin: 35px 0 0;
padding: 0;
list-style: none;
}
.carl-contact-promises li {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--carl-ink-soft);
font-size: var(--carl-type-meta) ;
line-height: 1.6;
}
.carl-contact-promises svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
margin-top: 2px;
color: var(--carl-blue-action);
}
/* CONTACT-01.3 WeChat / phone contact card */
.carl-contact-brief {
position: relative;
overflow: hidden;
padding: 34px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 28px;
color: var(--carl-white);
background:
radial-gradient(circle at 100% 0%, rgba(214, 168, 90, 0.18), transparent 31%),
linear-gradient(145deg, var(--carl-ink-soft), #17222C 74%);
box-shadow: 0 34px 80px rgba(30, 42, 54, 0.2);
animation: carl-contact-rise 0.7s ease both;
}
.carl-contact-brief::after {
content: "";
position: absolute;
top: -170px;
right: -150px;
width: 300px;
height: 300px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
pointer-events: none;
}
.carl-contact-brief-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 23px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.carl-contact-brief-head span,
.carl-contact-brief-head b {
font-size: var(--carl-type-meta) ;
line-height: 1.4;
font-weight: 750;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.carl-contact-brief-head span {
color: #9CABB6;
}
.carl-contact-brief-head b {
color: var(--carl-gold);
}
.carl-contact-channel-body {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(180px, 214px) minmax(0, 1fr);
gap: 28px;
align-items: center;
margin-top: 29px;
}
.carl-contact-qr-placeholder {
position: relative;
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 22px;
border: 1px dashed rgba(47, 93, 124, 0.34);
border-radius: 21px;
color: var(--carl-ink);
background: var(--carl-white);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
text-align: center;
}
.carl-contact-qr-placeholder::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(47, 93, 124, 0.09);
border-radius: 14px;
pointer-events: none;
}
.carl-contact-qr-mark {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 13px;
border-radius: 16px;
color: var(--carl-white);
background: var(--carl-wechat);
font-size: 17px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.08em;
}
.carl-contact-qr-placeholder strong {
position: relative;
z-index: 1;
color: var(--carl-ink);
font-size: var(--carl-type-meta) ;
line-height: 1.35;
font-weight: 900;
}
.carl-contact-qr-placeholder small {
position: relative;
z-index: 1;
margin-top: 5px;
color: var(--carl-text-gray);
font-size: var(--carl-type-meta) ;
line-height: 1.45;
}
.carl-contact-qr-placeholder.carl-contact-qr-ready {
display: block;
padding: 12px;
border-style: solid;
}
.carl-contact-qr-placeholder.carl-contact-qr-ready::after {
content: none;
}
.carl-contact-qr-image {
position: relative;
z-index: 2;
display: block;
width: 100%;
height: 100%;
border-radius: 12px;
object-fit: contain;
}
.carl-contact-wechat-badge {
display: inline-flex;
align-items: center;
min-height: 27px;
padding: 4px 10px;
border-radius: 999px;
color: #B9F5CF;
background: rgba(7, 193, 96, 0.14);
font-size: var(--carl-type-meta) ;
line-height: 1;
font-weight: 850;
letter-spacing: 0.08em;
}
.carl-contact-wechat-copy h2 {
margin: 12px 0 8px !important;
padding: 0 !important;
color: var(--carl-white) !important;
font-size: var(--carl-type-h3) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
letter-spacing: -0.04em;
}
.carl-contact-wechat-copy > p {
margin: 0;
padding: 0 !important;
color: #AFBEC8;
font-size: var(--carl-type-small) ;
line-height: 1.7;
}
.carl-contact-channel-details {
display: grid;
margin: 20px 0 0;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 15px;
background: rgba(255, 255, 255, 0.045);
}
.carl-contact-channel-details > div {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
padding: 11px 13px;
}
.carl-contact-channel-details > div + div {
border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.carl-contact-channel-details dt {
color: #8194A1;
font-size: var(--carl-type-meta) ;
line-height: 1.5;
font-weight: 700;
}
.carl-contact-channel-details dd {
min-width: 0;
margin: 0;
color: var(--carl-white);
font-size: var(--carl-type-small) ;
line-height: 1.5;
font-weight: 800;
overflow-wrap: anywhere;
}
.carl-contact-channel-details a {
color: var(--carl-gold-soft) !important;
text-underline-offset: 3px;
}
.carl-contact-placeholder-note {
position: relative;
z-index: 1;
margin: 20px 0 0;
padding: 16px 0 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #7F929F;
font-size: var(--carl-type-meta) ;
line-height: 1.55;
}
/* CONTACT-01.4 First-message guide */
.carl-contact-guide {
padding: 108px 0 116px !important;
background: var(--carl-white) !important;
}
.carl-contact-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 390px;
gap: 70px;
align-items: end;
margin-bottom: 54px;
}
.carl-contact-section-head h2 {
max-width: 710px;
margin: 18px 0 0 !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.025em ;
}
.carl-contact-section-head > p {
margin: 0;
padding: 0 !important;
color: var(--carl-text-gray);
font-size: var(--carl-type-intro) ;
line-height: 1.8;
}
.carl-contact-guide-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--carl-line);
border-bottom: 1px solid var(--carl-line);
}
.carl-contact-guide-item {
min-height: 250px;
display: flex;
flex-direction: column;
padding: 28px 25px 31px;
border-left: 1px solid var(--carl-line);
background: var(--carl-white);
transition: background 0.2s ease;
}
.carl-contact-guide-item:last-child {
border-right: 1px solid var(--carl-line);
}
.carl-contact-guide-item:hover {
background: var(--carl-warm-bg);
}
.carl-contact-guide-number {
margin-bottom: 41px;
color: var(--carl-gold);
font-size: var(--carl-type-meta) ;
font-weight: 850;
letter-spacing: 0.12em;
}
.carl-contact-guide-item h3 {
margin: 0 0 13px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-card-title) !important;
line-height: 1.5 !important;
font-weight: 700 !important;
letter-spacing: -0.025em;
}
.carl-contact-guide-item p {
margin: 0;
padding: 0 !important;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.75;
}
/* CONTACT-01.5 Direct conversation and WeChat message */
.carl-contact-direct {
padding: 102px 0 !important;
background: var(--carl-soft-blue) !important;
}
.carl-contact-direct-card {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
gap: clamp(45px, 7vw, 92px);
align-items: center;
padding: 54px;
border: 1px solid rgba(47, 93, 124, 0.12);
border-radius: 30px;
background: rgba(255, 255, 255, 0.84);
box-shadow: var(--carl-shadow-soft);
}
.carl-contact-direct-card::after {
content: "";
position: absolute;
right: -180px;
bottom: -230px;
width: 410px;
height: 410px;
border: 1px solid rgba(47, 93, 124, 0.1);
border-radius: 50%;
pointer-events: none;
}
.carl-contact-person {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
gap: 22px;
align-items: center;
}
.carl-contact-person-photo {
width: 116px;
aspect-ratio: 1122 / 1402;
overflow: hidden;
border-radius: 19px;
background: var(--carl-soft-sand);
box-shadow: 0 14px 32px rgba(30, 42, 54, 0.12);
}
.carl-contact-person-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.carl-contact-person-copy small {
display: block;
margin-bottom: 7px;
color: var(--carl-blue-gray);
font-size: var(--carl-type-meta) ;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.carl-contact-person-copy strong {
display: block;
margin-bottom: 8px;
color: var(--carl-ink);
font-size: var(--carl-type-h3) ;
line-height: 1.5 ;
font-weight: 700 ;
letter-spacing: -0.03em;
}
.carl-contact-person-copy p {
margin: 0;
padding: 0 !important;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.7;
}
.carl-contact-template {
position: relative;
z-index: 1;
min-width: 0;
}
.carl-contact-template h2 {
margin: 16px 0 15px !important;
padding: 0 !important;
color: var(--carl-ink) !important;
font-size: var(--carl-type-h2) !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.025em ;
}
.carl-contact-template > p {
margin: 0 0 24px;
padding: 0 !important;
color: var(--carl-text-gray);
font-size: var(--carl-type-small) ;
line-height: 1.8;
}
.carl-contact-template-box {
position: relative;
margin: 0;
padding: 22px 62px 22px 23px;
border: 1px solid var(--carl-line);
border-radius: 17px;
color: var(--carl-ink-soft);
background: var(--carl-cream);
font-size: var(--carl-type-small) ;
line-height: 1.75;
}
.carl-contact-copy-button {
position: absolute;
top: 13px;
right: 13px;
width: 38px;
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 999px;
color: var(--carl-blue-gray);
background: var(--carl-soft-blue);
cursor: pointer;
transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.carl-contact-copy-button:hover {
color: var(--carl-white);
background: var(--carl-blue-action);
transform: translateY(-1px);
}
.carl-contact-copy-button svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.carl-contact-template-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 22px;
margin-top: 23px;
}
.carl-contact-direct-link {
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 22px;
border-radius: 999px;
color: var(--carl-white) !important;
background: linear-gradient(135deg, var(--carl-blue-action), var(--carl-blue-action-dark));
box-shadow: 0 14px 28px rgba(45, 125, 210, 0.2);
font-size: var(--carl-type-button) ;
font-weight: 850;
text-decoration: none !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.carl-contact-direct-link:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(45, 125, 210, 0.25);
}
.carl-contact-direct-link svg {
width: 18px;
height: 18px;
}
.carl-contact-copy-status {
min-height: 1.4em;
margin: 0;
padding: 0 !important;
color: var(--carl-blue-gray);
font-size: var(--carl-type-meta) ;
}
@keyframes carl-contact-rise {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: none;
}
}
/* CONTACT-01.6 Responsive */
@media (max-width: 1040px) {
.carl-contact-hero-row {
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
gap: 48px;
}
.carl-contact-quick-actions {
grid-template-columns: minmax(0, 1fr);
}
.carl-contact-channel-body {
grid-template-columns: 184px minmax(0, 1fr);
gap: 23px;
}
.carl-contact-guide-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.carl-contact-guide-item:nth-child(2) {
border-right: 1px solid var(--carl-line);
}
.carl-contact-guide-item:nth-child(n + 3) {
border-top: 1px solid var(--carl-line);
}
.carl-contact-direct-card {
grid-template-columns: minmax(265px, 0.72fr) minmax(0, 1.28fr);
gap: 45px;
padding: 44px;
}
.carl-contact-person {
grid-template-columns: 96px minmax(0, 1fr);
}
.carl-contact-person-photo {
width: 96px;
}
}
@media (max-width: 900px) {
.carl-contact-hero {
padding: 130px 0 90px !important;
}
.carl-contact-hero-row,
.carl-contact-section-head,
.carl-contact-direct-card {
grid-template-columns: minmax(0, 1fr);
}
.carl-contact-hero-row {
gap: 58px;
}
.carl-contact-quick-actions {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.carl-contact-channel-body {
grid-template-columns: 220px minmax(0, 1fr);
}
.carl-contact-section-head {
gap: 22px;
}
.carl-contact-section-head > p {
max-width: 680px;
}
.carl-contact-direct-card {
gap: 42px;
}
.carl-contact-person {
max-width: 420px;
}
}
@media (max-width: 767px) {
.carl-contact-hero-row,
.carl-contact-guide-row,
.carl-contact-direct-row {
width: min(calc(100% - 32px), 1180px) !important;
}
.carl-contact-hero {
padding: 112px 0 72px !important;
}
.carl-contact-hero::before {
right: -420px;
bottom: -430px;
}
.carl-contact-hero-row {
gap: 43px;
}
.carl-contact-hero-copy h1 {
margin: 20px 0 22px !important;
font-size: var(--carl-type-h1) !important;
}
.carl-contact-hero-lead {
font-size: var(--carl-type-lead) ;
line-height: 1.78;
}
.carl-contact-quick-actions {
grid-template-columns: minmax(0, 1fr);
margin-top: 30px;
}
.carl-contact-channel-button {
min-height: 78px;
}
.carl-contact-promises {
margin-top: 28px;
}
.carl-contact-brief {
padding: 27px 20px;
border-radius: 22px;
}
.carl-contact-channel-body {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.carl-contact-qr-placeholder {
width: min(100%, 230px);
justify-self: center;
}
.carl-contact-wechat-copy {
text-align: center;
}
.carl-contact-channel-details {
text-align: left;
}
.carl-contact-guide {
padding: 76px 0 80px !important;
}
.carl-contact-section-head {
margin-bottom: 37px;
}
.carl-contact-section-head h2 {
font-size: var(--carl-type-h2) !important;
}
.carl-contact-guide-grid {
grid-template-columns: minmax(0, 1fr);
}
.carl-contact-guide-item,
.carl-contact-guide-item:nth-child(2),
.carl-contact-guide-item:last-child {
min-height: 0;
border-right: 1px solid var(--carl-line);
}
.carl-contact-guide-item:nth-child(n + 2) {
border-top: 1px solid var(--carl-line);
}
.carl-contact-guide-number {
margin-bottom: 25px;
}
.carl-contact-direct {
padding: 70px 0 !important;
}
.carl-contact-direct-card {
gap: 37px;
padding: 31px 23px;
border-radius: 24px;
}
.carl-contact-person {
grid-template-columns: 82px minmax(0, 1fr);
gap: 17px;
}
.carl-contact-person-photo {
width: 82px;
border-radius: 15px;
}
.carl-contact-person-copy strong {
font-size: var(--carl-type-h3) ;
}
.carl-contact-template h2 {
font-size: var(--carl-type-h2) !important;
}
.carl-contact-template-box {
padding: 21px 57px 21px 19px;
}
}
@media (max-width: 390px) {
.carl-contact-hero-row,
.carl-contact-guide-row,
.carl-contact-direct-row {
width: min(calc(100% - 24px), 1180px) !important;
}
.carl-contact-hero-copy h1 {
font-size: var(--carl-type-h1) !important;
}
.carl-contact-brief {
padding-right: 17px;
padding-left: 17px;
}
.carl-contact-brief-head {
align-items: flex-start;
flex-direction: column;
gap: 7px;
}
.carl-contact-channel-button {
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: 11px;
padding-right: 14px;
padding-left: 14px;
}
.carl-contact-channel-icon {
width: 40px;
height: 40px;
}
.carl-contact-person {
grid-template-columns: 72px minmax(0, 1fr);
}
.carl-contact-person-photo {
width: 72px;
}
}
@media (prefers-reduced-motion: reduce) {
.carl-contact-hero *,
.carl-contact-guide *,
.carl-contact-direct * {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =========================================================
22. iPhone contact flow + compact mobile header
- Keeps the Header transparent at the top.
- Restores Divi's absolute Header Row without allowing it
to expand the fixed Section.
- Applies the scrolled glass surface to the inset Row only.
- Forces Contact columns and Code Modules back into normal
document flow on phone widths.
========================================================= */
@media (max-width: 767px) {
/* Homepage: keep the secondary scope / pricing action centered below
the full-width primary action. */
.carl-hero-actions .carl-btn-secondary,
.carl-hero-actions .carl-btn-secondary .et_pb_button {
justify-self: center !important;
margin-right: auto !important;
margin-left: auto !important;
text-align: center !important;
}
.carl-mobile-header,
.carl-mobile-header.et_pb_section {
display: block !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
left: 0 !important;
width: 100% !important;
height: 76px !important;
min-height: 76px !important;
max-height: 76px !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: 0 !important;
box-shadow: none !important;
}
body.admin-bar .carl-mobile-header,
body.admin-bar .carl-mobile-header.et_pb_section {
top: 46px !important;
}
.carl-mobile-header > .et_pb_row,
.carl-mobile-header-row {
display: flex !important;
position: absolute !important;
top: 6px !important;
right: auto !important;
bottom: auto !important;
left: 50% !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
transform: translateX(-50%) !important;
width: calc(100% - 32px) !important;
max-width: 420px !important;
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
margin: 0 !important;
padding: 10px 12px !important;
overflow: visible !important;
border: 1px solid transparent !important;
border-radius: 20px;
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
.carl-mobile-header > .et_pb_row > .et_pb_column,
.carl-mobile-header-row > .et_pb_column {
height: auto !important;
min-height: 0 !important;
flex-wrap: nowrap !important;
}
.carl-mobile-logo,
.carl-mobile-logo .et_pb_image_wrap,
.carl-mobile-logo img {
display: block !important;
flex: 0 0 40px !important;
width: 40px !important;
max-width: 40px !important;
height: 40px !important;
max-height: 40px !important;
}
.carl-mobile-menu-trigger {
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
}
body.carl-scrolled .carl-mobile-header,
body.carl-scrolled .carl-mobile-header.et_pb_sticky,
body.carl-scrolled .et_pb_sticky .carl-mobile-header {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: 0 !important;
box-shadow: none !important;
}
body.carl-scrolled .carl-mobile-header > .et_pb_row,
body.carl-scrolled .carl-mobile-header-row {
border-color: rgba(47, 93, 124, 0.12) !important;
background: rgba(255, 253, 248, 0.88) !important;
-webkit-backdrop-filter: blur(16px) saturate(118%) !important;
backdrop-filter: blur(16px) saturate(118%) !important;
box-shadow: 0 12px 30px rgba(30, 42, 54, 0.10) !important;
}
.carl-home-hero,
.carl-contact-hero {
padding-top: 132px !important;
}
/* iPhone Safari + Divi Flex: prevent the single-column Contact Hero
grid from stretching its two automatic tracks to a taller flex area. */
.carl-contact-hero,
.carl-contact-hero.et_pb_section,
.carl-contact-hero-row,
.carl-contact-hero-row.et_pb_row {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.carl-contact-hero,
.carl-contact-hero.et_pb_section {
display: block !important;
}
.carl-contact-hero-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: repeat(2, max-content) !important;
grid-auto-rows: max-content !important;
align-items: start !important;
align-content: start !important;
align-self: auto !important;
flex: 0 0 auto !important;
gap: 44px !important;
}
.carl-contact-hero-row > .et_pb_column,
.carl-contact-hero-copy-col,
.carl-contact-channel-col {
display: block !important;
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
transform: none !important;
}
.carl-contact-hero-copy-module,
.carl-contact-channel-module,
.carl-contact-hero-copy-module > .et_pb_code_inner,
.carl-contact-channel-module > .et_pb_code_inner,
.carl-contact-hero-copy {
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
overflow: visible !important;
transform: none !important;
}
}
/* =========================================================
Carl.work — shared type scale / V11.0
Reference: carl-work-home-mainland-preview.html
All sizes are CSS px. System fonts follow the approved preview.
========================================================= */
:root {
--carl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
--carl-type-h1: clamp(40px, 4.5vw, 65px);
--carl-type-h2: clamp(29px, 3vw, 43px);
--carl-type-h3: 22px;
--carl-type-card-title: 20px;
--carl-type-case-title: 28px;
--carl-type-plan-title: 23px;
--carl-type-body: 16px;
--carl-type-lead: 18px;
--carl-type-intro: 16px;
--carl-type-small: 14px;
--carl-type-meta: 12px;
--carl-type-eyebrow: 13px;
--carl-type-button: 16px;
--carl-type-faq-title: 16px;
--carl-type-price: 38px;
--carl-type-menu: clamp(28px, 8vw, 42px);
--carl-type-brand: 20px;
--carl-type-brand-small: 13px;
--carl-type-h1-line: 1.24;
}
@media (min-width:768px) and (max-width:1000px) {
:root { --carl-type-brand:17px; --carl-type-price:32px; }
}
@media (max-width:767px) {
:root {
--carl-type-h1:clamp(34px,9.6vw,48px);
--carl-type-h2:29px;
--carl-type-card-title:18px;
--carl-type-case-title:24px;
--carl-type-lead:16px;
--carl-type-intro:15px;
--carl-type-eyebrow:11px;
--carl-type-faq-title:15px;
--carl-type-price:39px;
--carl-type-brand:15px;
--carl-type-brand-small:10px;
--carl-type-h1-line:1.3;
--carl-type-menu:clamp(28px,9.4vw,40px);
}
}
/* Type only: avoid universal font-family rules that break ETmodules icons. */
body #page-container,
body #page-container :where(h1,h2,h3,h4,h5,h6,p,a,li,dt,dd,summary,button,input,textarea,select,label,strong,small,b,em,.et_pb_text,.et_pb_text_inner,.et_pb_blurb_description,span:not(.et-pb-icon):not(.et_pb_icon_wrap)) {
font-family:var(--carl-font) !important;
}
:where(#main-content,.et-l--body,.carl-h26) {
font-size:var(--carl-type-body);
line-height:1.85;
}
:where(#main-content,.et-l--body) :where(.et_pb_text,.et_pb_blurb_description) {
font-size:var(--carl-type-body);
line-height:1.85;
}
:where(#main-content,.et-l--body) :where(p,li,dt,dd) { line-height:1.85; }
:where(#main-content,.et-l--body) h1 {font-size:var(--carl-type-h1) !important;line-height:1.24 !important;font-weight:700 !important;letter-spacing:-.04em !important;}
:where(#main-content,.et-l--body) h2 {font-size:var(--carl-type-h2) !important;line-height:1.4 !important;font-weight:700 !important;letter-spacing:-.025em !important;}
:where(#main-content,.et-l--body) h3 {font-size:var(--carl-type-h3) !important;line-height:1.5 !important;font-weight:700 !important;}
:where(#main-content,.et-l--body) :where(h4,h5,h6) {font-size:var(--carl-type-body);line-height:1.5;}
@media(max-width:767px){:where(#main-content,.et-l--body) h1{line-height:1.3 !important;}}
/* Scoped approved homepage */
.carl-h26, .carl-h26 * {box-sizing:border-box;}
.carl-h26 a {color:inherit;text-decoration:none;}
.carl-h26 button,
.carl-h26 summary {font:inherit;}
.carl-h26 button,
.carl-h26 a,
.carl-h26 summary {-webkit-tap-highlight-color:transparent;}
.carl-h26 a:focus-visible,
.carl-h26 button:focus-visible,
.carl-h26 summary:focus-visible {outline:3px solid var(--ch26-gold);outline-offset:5px;}
.carl-h26 .wrap {width:min(1180px,calc(100% - 80px));margin:auto;}
.carl-h26.hero {padding:184px 0 94px;background:radial-gradient(ellipse at 5% 20%,#e7eff5,transparent 55%),radial-gradient(ellipse at 100% 0%,#f5ead7,transparent 55%);}
.carl-h26 .eyebrow {display:flex;align-items:center;gap:14px;color:var(--ch26-blue);font-size:var(--carl-type-eyebrow)!important;font-weight:750;letter-spacing:.12em;margin:0 0 24px;}
.carl-h26 .eyebrow:before {content:"";height:2px;width:30px;background:currentColor;flex:none;}
.carl-h26 h1,
.carl-h26 h2,
.carl-h26 h3,
.carl-h26 p {margin-top:0;}
.carl-h26 h1 {font-size:var(--carl-type-h1)!important;line-height:1.24;letter-spacing:-.04em;margin-bottom:27px;}
.carl-h26 h1 em {font-style:normal;color:var(--ch26-blue);}
.carl-h26 h2 {font-size:var(--carl-type-h2)!important;line-height:1.4;letter-spacing:-.025em;margin-bottom:20px;}
.carl-h26 h3 {font-size:var(--carl-type-h3)!important;line-height:1.5;margin-bottom:13px;}
.carl-h26 p {line-height:1.85;}
.carl-h26 .lead {font-size:var(--carl-type-lead)!important;color:var(--ch26-muted);max-width:650px;}
.carl-h26 .hero-grid {display:grid;grid-template-columns:1.2fr .8fr;gap:65px;align-items:center;}
.carl-h26 .actions {display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:30px 0;}
.carl-h26 .btn {display:inline-flex;align-items:center;justify-content:center;gap:15px;border:0;border-radius:40px;background:linear-gradient(110deg,#2d7dd2,#205b98);color:white;padding:14px 27px;font-weight:700;box-shadow:0 12px 26px #2d7dd225;cursor:pointer;}
.carl-h26 .text-link {font-weight:700;color:var(--ch26-blue);border-bottom:1px solid #2f5d7c44;padding-bottom:3px;}
.carl-h26 .proof {display:flex;gap:12px 22px;flex-wrap:wrap;font-size:14px!important;font-weight:600;}
.carl-h26 .proof span:before {content:"✓";color:var(--ch26-action);margin-right:8px;}
.carl-h26 .note {font-size:13px!important;color:var(--ch26-muted);margin:20px 0 0;}
.carl-h26 .tags {display:flex;gap:9px;flex-wrap:wrap;margin-top:26px;}
.carl-h26 .tags span {font-size:12px!important;padding:4px 12px;border:1px solid var(--ch26-line);border-radius:20px;color:var(--ch26-muted);}
.carl-h26 .hero-aside {background:#ffffffb3;border:1px solid white;border-radius:28px;box-shadow:0 24px 60px #18394b12;padding:32px;}
.carl-h26 .aside-label {font-size:11px!important;letter-spacing:.16em;color:var(--ch26-blue);font-weight:700;}
.carl-h26 .hero-aside h3 {font-size:27px!important;margin:12px 0 25px;}
.carl-h26 .outcome {border-top:1px solid var(--ch26-line);padding:17px 0;display:grid;grid-template-columns:35px 1fr;gap:8px;}
.carl-h26 .outcome b {color:var(--ch26-gold);font-size:13px!important;}
.carl-h26 .outcome strong {font-size:16px!important;}
.carl-h26 .outcome p {font-size:13px!important;color:var(--ch26-muted);margin:4px 0 0;}
.carl-h26 .aside-foot {font-size:12px!important;color:var(--ch26-blue);border-top:1px solid var(--ch26-line);padding-top:16px;margin:0;}
.carl-h26 {padding:90px 0;}
.carl-h26.dark {background:#1b2d3c;color:#f7f9fa;}
.carl-h26.dark .eyebrow {color:#d6a85a;}
.carl-h26.dark .sub,
.carl-h26.dark p {color:#b8c7d1;}
.carl-h26 .sub {color:var(--ch26-muted);max-width:720px;margin-bottom:32px;}
.carl-h26 .split {display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;}
.carl-h26 .rows article {padding:23px 0;border-bottom:1px solid #ffffff20;}
.carl-h26 .rows article:first-child {padding-top:0;}
.carl-h26 .rows h3 {font-size:21px!important;margin-bottom:8px;}
.carl-h26 .rows p {font-size:15px!important;margin:0;}
.carl-h26 .section-head {max-width:780px;margin-bottom:40px;}
.carl-h26 .grid4 {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.carl-h26 .card {padding:27px;background:white;border:1px solid var(--ch26-line);border-radius:20px;}
.carl-h26 .card .num {display:block;color:var(--ch26-blue);font-size:12px!important;letter-spacing:.12em;margin-bottom:24px;}
.carl-h26 .card h3 {font-size:var(--carl-type-card-title)!important;}
.carl-h26 .card p {color:var(--ch26-muted);font-size:var(--carl-type-small)!important;margin:0;}
.carl-h26 .case-grid {display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;}
.carl-h26 .case-visual {border:1px solid #ffffff22;background:linear-gradient(150deg,#294d60,#0c1821);padding:22px;border-radius:24px;overflow:hidden;}
.carl-h26 .case-visual img {width:100%;height:auto;display:block;border-radius:13px;}
.carl-h26 .case-caption {padding:22px 3px 0;}
.carl-h26 .case-caption small {color:#b7c4cd;font-size:10px!important;letter-spacing:.13em;}
.carl-h26 .case-caption h3 {font-size:var(--carl-type-case-title)!important;margin:6px 0 0;}
.carl-h26 .case-list {padding-left:20px;color:#c4d0d9;font-size:15px!important;}
.carl-h26 .case-list li {margin:10px 0;}
.carl-h26.dark .text-link {color:#ecd5ac;border-color:#ecd5ac66;}
.carl-h26 .steps {display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.carl-h26 .step {border-top:2px solid var(--ch26-line);padding-top:20px;}
.carl-h26 .step span {font-size:12px!important;letter-spacing:.1em;color:var(--ch26-blue);}
.carl-h26 .step h3 {margin-top:13px;font-size:21px!important;}
.carl-h26 .step p {font-size:14px!important;color:var(--ch26-muted);}
.carl-h26.owner {padding:0 0 80px;}
.carl-h26 .owner-panel {padding:35px 40px;border-radius:24px;background:#eaf0f3;display:grid;grid-template-columns:90px 1fr;gap:30px;align-items:center;}
.carl-h26 .owner-panel img {width:80px;}
.carl-h26 .owner-panel h3 {font-size:25px!important;margin-bottom:8px;}
.carl-h26 .owner-panel p {margin:0;color:var(--ch26-muted);}
.carl-h26.pricing {background:#f0f3f5;}
.carl-h26 .price-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.carl-h26 .price-card {display:flex;flex-direction:column;padding:30px;background:white;border:1px solid var(--ch26-line);border-radius:23px;position:relative;}
.carl-h26 .price-card.featured {border:2px solid var(--ch26-blue);box-shadow:0 16px 35px #254b6510;}
.carl-h26 .badge {color:var(--ch26-blue);font-size:12px!important;letter-spacing:.05em;font-weight:700;margin-bottom:17px;min-height:20px;}
.carl-h26 .price-card h3 {font-size:var(--carl-type-plan-title)!important;}
.carl-h26 .price {font-size:var(--carl-type-price)!important;line-height:1.3;font-weight:800;letter-spacing:-.04em;margin:10px 0 18px;}
.carl-h26 .price small {font-size:14px!important;letter-spacing:0;font-weight:500;color:var(--ch26-muted);}
.carl-h26 .fit {color:var(--ch26-muted);font-size:14px!important;min-height:76px;}
.carl-h26 .price-card ul {padding-left:19px;font-size:14px!important;margin:5px 0 25px;}
.carl-h26 .price-card li {margin:9px 0;}
.carl-h26 .price-card>.btn {margin-top:auto;box-shadow:none;font-size:14px!important;}
.carl-h26 .price-card:not(.featured)>.btn {background:#edf3f7;color:var(--ch26-blue);}
.carl-h26 details {border-top:1px solid var(--ch26-line);font-size:14px!important;margin-bottom:22px;}
.carl-h26 summary {font-weight:700;padding:14px 0;cursor:pointer;}
.carl-h26 details p {color:var(--ch26-muted);font-size:14px!important;margin:0 0 15px;}
.carl-h26 .scope {font-size:13px!important;color:var(--ch26-muted);margin:25px 0 0;padding:20px 0;border-top:1px solid #ccd6dc;}
.carl-h26 .small-offers {display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;}
.carl-h26 .offer {padding:27px;border:1px solid #d5dfe4;border-radius:20px;background:#ffffff88;}
.carl-h26 .offer-top {display:flex;justify-content:space-between;gap:10px;align-items:start;}
.carl-h26 .offer h3 {font-size:19px!important;}
.carl-h26 .offer strong {white-space:nowrap;color:var(--ch26-blue);}
.carl-h26 .offer p {font-size:14px!important;color:var(--ch26-muted);margin-bottom:10px;}
.carl-h26 .offer .text-link {font-size:14px!important;}
.carl-h26 .maintenance {font-size:13px!important;color:var(--ch26-muted);margin:24px 0 0;}
.carl-h26 .faq-layout {display:grid;grid-template-columns:.75fr 1.25fr;gap:75px;}
.carl-h26.faq details {margin:0;font-size:16px!important;}
.carl-h26.faq summary {padding:21px 0;}
.carl-h26.faq details p {line-height:1.9;}
.carl-h26.cta {background:linear-gradient(125deg,#233e51,#142634);}
.carl-h26.cta .wrap {display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:center;}
.carl-h26 .contact-box {border:1px solid #ffffff29;background:#ffffff07;border-radius:24px;padding:30px;}
.carl-h26 .contact-box h3 {color:#fff;}
.carl-h26 .contact-links {display:grid;gap:15px;}
.carl-h26 .contact-links a,
.carl-h26 .contact-links button {display:block;padding:13px 16px;border-radius:12px;text-align:left;border:1px solid #ffffff26;color:white;background:#ffffff09;font-size:16px!important;cursor:pointer;}
.carl-h26 .contact-links small {display:block;font-size:11px!important;color:#b8c7d1;}
.carl-h26 .contact-links .wechat {background:#f4ead9;color:#203444;}
.carl-h26 .wechat small {color:#53616a;}
.carl-h26 .contact-box .note {font-size:12px!important;margin-bottom:0;}
@media (min-width:1500px){.carl-h26.hero {padding-top:210px;}
}
@media (max-width:1000px){.carl-h26 .hero-grid {grid-template-columns:1fr;gap:35px;}
.carl-h26 .hero-aside {max-width:650px;}
.carl-h26 .grid4 {grid-template-columns:repeat(2,1fr);}
.carl-h26 .price-grid {gap:12px;}
.carl-h26 .price-card {padding:22px;}
.carl-h26 .price {font-size:var(--carl-type-price)!important;}
.carl-h26 .split,
.carl-h26 .case-grid {gap:38px;}
.carl-h26 .wrap {width:calc(100% - 48px);}
}
@media (max-width:767px){.carl-h26 .wrap {width:calc(100% - 36px);}
.carl-h26.hero {padding:127px 0 54px;}
.carl-h26 .hero-grid {gap:30px;}
.carl-h26 h1 {font-size:var(--carl-type-h1)!important;margin-bottom:23px;line-height:1.3;}
.carl-h26 h2 {font-size:var(--carl-type-h2)!important;}
.carl-h26 .eyebrow {font-size:var(--carl-type-eyebrow)!important;margin-bottom:20px;letter-spacing:.06em;gap:10px;}
.carl-h26 .eyebrow:before {width:23px;}
.carl-h26 .lead {font-size:var(--carl-type-lead)!important;}
.carl-h26 .actions {display:flex;flex-direction:column;align-items:stretch;gap:18px;margin:25px 0;}
.carl-h26 .actions .text-link {align-self:center;text-align:center;}
.carl-h26 .btn {padding:13px 20px;}
.carl-h26 .proof {font-size:12px!important;gap:8px 15px;}
.carl-h26 .note {font-size:12px!important;}
.carl-h26 .hero-aside {padding:25px;}
.carl-h26 .hero-aside h3 {font-size:23px!important;}
.carl-h26 {padding:57px 0;}
.carl-h26 .split,
.carl-h26 .case-grid,
.carl-h26 .faq-layout,
.carl-h26.cta .wrap {grid-template-columns:1fr;gap:29px;}
.carl-h26 .grid4 {gap:12px;}
.carl-h26 .card {padding:20px;}
.carl-h26 .card h3 {font-size:var(--carl-type-card-title)!important;}
.carl-h26 .card .num {margin-bottom:16px;}
.carl-h26 .card p {font-size:var(--carl-type-small)!important;}
.carl-h26 .section-head {margin-bottom:28px;}
.carl-h26 .case-visual {padding:15px;}
.carl-h26 .case-caption {padding-top:16px;}
.carl-h26 .case-caption h3 {font-size:var(--carl-type-case-title)!important;}
.carl-h26 .steps {grid-template-columns:1fr 1fr;gap:20px;}
.carl-h26 .step h3 {font-size:19px!important;}
.carl-h26.owner {padding-bottom:55px;}
.carl-h26 .owner-panel {padding:25px;grid-template-columns:1fr;gap:18px;}
.carl-h26 .owner-panel img {width:55px;}
.carl-h26 .owner-panel h3 {font-size:22px!important;}
.carl-h26 .owner-panel p {font-size:14px!important;}
.carl-h26 .price-grid,
.carl-h26 .small-offers {grid-template-columns:1fr;gap:20px;}
.carl-h26 .price-card {padding:27px;}
.carl-h26 .price {font-size:var(--carl-type-price)!important;}
.carl-h26 .fit {min-height:0;}
.carl-h26 .badge {margin-bottom:12px;min-height:0;}
.carl-h26 .contact-box {padding:23px;}
.carl-h26 .scope {font-size:12px!important;}
.carl-h26 .offer-top {flex-wrap:wrap;}
.carl-h26 .offer-top h3 {margin-bottom:6px;}
.carl-h26 .offer-top {margin-bottom:12px;}
.carl-h26.faq summary {font-size:var(--carl-type-faq-title)!important;}
.carl-h26 .sub {font-size:15px!important;}
}
@media (prefers-reduced-motion:reduce){.carl-h26, .carl-h26 * {transition:none!important;}
}
/* =========================================================
V11.0 homepage adapters — one Section / Row / Column / Code per block.
Do not reuse the former carl-home-hero or carl-pricing-section classes here.
========================================================= */
.carl-h26-section.et_pb_section {
display:block !important;padding:0 !important;margin:0 !important;
height:auto !important;min-height:0 !important;max-height:none !important;
background:transparent !important;overflow:visible !important;
}
.carl-h26-row.et_pb_row {
display:block !important;width:100% !important;max-width:none !important;
padding:0 !important;margin:0 !important;height:auto !important;min-height:0 !important;
}
.carl-h26-row.et_pb_row::after {display:none !important;}
.carl-h26-row > .et_pb_column {
display:block !important;width:100% !important;max-width:none !important;
flex:none !important;margin:0 !important;padding:0 !important;min-width:0;
height:auto !important;min-height:0 !important;
}
.carl-h26-module.et_pb_module,
.carl-h26-module > .et_pb_code_inner {
display:block !important;width:100% !important;max-width:none !important;
padding:0 !important;margin:0 !important;height:auto !important;min-height:0 !important;
}
.carl-h26 {
--ch26-ink:#1e2a36;--ch26-muted:#60707a;--ch26-blue:#2f5d7c;
--ch26-action:#2d7dd2;--ch26-gold:#d6a85a;--ch26-paper:#faf8f4;--ch26-line:#dce2e5;
display:block;color:var(--ch26-ink);background:var(--ch26-paper);
font-family:var(--carl-font);font-size:16px;line-height:1.85;
scroll-margin-top:112px;height:auto;min-height:0;
}
.carl-h26 p,.carl-h26 h1,.carl-h26 h2,.carl-h26 h3 {padding-bottom:0;}
.carl-h26 p{margin-bottom:1em;}
.carl-h26 .case-list,.carl-h26 .price-card ul{list-style:disc;}
.carl-h26 details > summary{display:list-item;}
.carl-h26 button{font:inherit;}
.carl-h26 .btn{font-size:var(--carl-type-button);line-height:1.85;}
.carl-h26 h1,.carl-h26 h2,.carl-h26 h3{font-weight:700;color:inherit;}
.carl-h26 h1 em{font-family:inherit;}
.carl-h26 .hero-aside h3{font-size:27px !important;}
.carl-h26 .owner-panel h3{font-size:25px !important;}
.carl-h26 .offer h3{font-size:19px !important;}
.carl-h26 .outcome p{margin-bottom:0;}
.carl-h26 .case-visual img{height:auto !important;max-height:none !important;aspect-ratio:auto !important;object-fit:contain;}
@media(max-width:767px){
.carl-h26 .hero-aside h3{font-size:23px !important;}
.carl-h26 .owner-panel h3{font-size:22px !important;}
.carl-h26 .actions .text-link{align-self:center;text-align:center;}
}
/* Keep header geometry/scroll behavior from V10.7; only shared text tokens change. */
.carl-header-brand-name {font-size:var(--carl-type-brand);}
.carl-header-brand-tagline {font-size:var(--carl-type-brand-small);}