), so keep the
size moderate: 18px mobile / 24px desktop. */
.unagpt-subject .el-text[style*="font-size:28px"]{font-size:18px !important}
@media (min-width:1024px){
.unagpt-subject .el-text[style*="font-size:28px"]{font-size:24px !important}
}
/* Some subject heroes split the tags across two lines (e.g. 數學科:
小學TSA / HKDSE 卷一 | HKDSE M1 / HKDSE M2). The default 1rem paragraph
margin leaves an awkward gap; lay the tag lines out as a tight wrapping
group instead. */
.unagpt-subject .el-text[style*="font-size:28px"]{
display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px;
}
.unagpt-subject .el-text[style*="font-size:28px"] p{ margin:0 !important; }
/* Two supplementary screenshots shown together in a feature's right column
(injected by pairImagesRight): side by side, smaller, sharing the column. */
.unagpt-subject .ugpt-img-row{ display:flex; gap:10px; align-items:flex-start; justify-content:center; }
.unagpt-subject .ugpt-img-row .el-img{ flex:1 1 0; min-width:0; width:auto; height:auto; border-radius:8px; box-shadow:0 6px 20px rgba(0,31,95,.08); }
/* UnaGPT 其他科目 師生感言 — reuses the /unagpt/ heading section + .el-tc
carousel verbatim, so no bespoke section styling is needed. Only the
fallback initial-letter avatar (when a student has no photo) is custom. */
.unagpt-subject .ugpt-ini-av{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#4195DE,#001F5F); color:#fff; font-weight:700; font-size:18px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
/* "big" variant (數學科 支援各類題型): widen the image column ~1.25× and narrow
the text. Selector mirrors the generic 2-col caps + the .ugpt-pair-big row
class so it outranks them. */
@media (min-width:1024px){
.unagpt-subject .el-row.ugpt-pair-big:has(> .el-col:nth-child(2):last-child):not(:has(.el-stat)) > .el-col:has(.el-widget-wrap){
max-width:57% !important;
}
.unagpt-subject .el-row.ugpt-pair-big:has(> .el-col:nth-child(2):last-child):not(:has(.el-stat)) > .el-col:not(:has(.el-widget-wrap)){
max-width:40% !important;
}
}
/* ===== Become Una Partner: clean, responsive layout =====
Neutralise Elementor's offset margins so columns align evenly and never
overlap the footer; the inner feature/benefit cards keep their own styling
(no double-card backgrounds). */
.partner-page .el-section{padding:2rem 0}
.partner-page .el-img{max-width:100%;height:auto;border-radius:12px;display:block;margin:0 auto}
.partner-page .el-col{margin:0 !important}
.partner-page .el-row{align-items:start;gap:24px}
.partner-page .el-feature + .el-feature{margin-top:24px}
/* Hero row: vertically centre the text column against the image; keep the copy
left-aligned but in a narrower block pushed toward the middle of the page. */
.partner-page > section.el-section:first-of-type > .wrap > .el-row{align-items:center}
.partner-page > section.el-section:first-of-type > .wrap > .el-row > .el-col:first-child{text-align:left}
.partner-page > section.el-section:first-of-type > .wrap > .el-row > .el-col:first-child > *{max-width:340px;margin-left:auto}
.partner-page > section.el-section:first-of-type > .wrap > .el-row > .el-col:first-child .el-btn-wrap{text-align:left!important}
@media(max-width:767px){
.partner-page .el-col[style*="padding:50px"]{padding:24px!important}
.partner-page .el-section{padding:1.25rem 0}
}
/* ===== Testimonials page (師生感言): masonry wall ===== */
.tw-section{padding-top:1.5rem}
.tw-heading{text-align:center;font-size:28px;color:var(--primary);margin:0 0 1.5rem}
.tw-video{max-width:760px;margin:0 auto 2rem}
/* Featured row: the intro video + the related 曾俊華 testimonial side by side. */
.tw-featured{display:grid;gap:1.5rem 2.5rem;align-items:center;max-width:1040px;margin:0 auto 2.75rem}
@media(min-width:860px){.tw-featured{grid-template-columns:1.25fr 1fr}}
.tw-featured .tw-video{max-width:none;margin:0}
.tw-featured-quote .el-tc-card{height:auto;min-height:0;box-shadow:none;border:none;background:transparent;padding:0;justify-content:center}
.tw-featured-quote .el-tc-content{font-size:1.1rem;line-height:1.7;color:var(--navy);margin:0 0 1rem;flex:0 0 auto}
.tw-featured-quote .el-tc-footer{margin-top:0}
.tw-featured-quote .who-name{display:block;font-weight:700;color:var(--navy)}
.tw-featured-quote .who-job{color:var(--muted);font-size:.9rem}
.tcard-wall{columns:1;column-gap:1.5rem}
@media(min-width:640px){.tcard-wall{columns:2}}
@media(min-width:992px){.tcard-wall{columns:3}}
.tcard-wall .el-tc-card{break-inside:avoid;display:block;min-height:0;height:auto;
margin:0 0 1.5rem;border:1px solid var(--line);box-shadow:0 2px 14px rgba(0,31,95,.06)}
/* Keep card layout vertical even with an avatar; show a small headshot next to
the name (override the single-carousel row/large-avatar styling). */
.tcard-wall .el-tc-card.el-tc-single:has(.el-tc-avatar){flex-direction:column;gap:0;padding:1.75rem 1.5rem 1.25rem}
.tcard-wall .el-tc-card .el-tc-content{font-size:14px;margin:0 0 1.1rem;align-self:auto}
.tcard-wall .el-tc-card .el-tc-footer{flex-direction:row;align-items:center;flex:none;gap:.7rem;order:0;text-align:left}
.tcard-wall .el-tc-card .el-tc-avatar{width:46px!important;height:46px!important}
/* ===== UnaGPT user-guide: guides (LHS) + video playlists (RHS) ===== */
.doc-cat-layout{display:grid;gap:2.5rem;align-items:start}
@media(min-width:992px){.doc-cat-layout{grid-template-columns:1fr 340px}}
/* Mobile: stack with the video list first, guide list second */
@media(max-width:991px){.doc-cat-videos{order:-1}}
.doc-cat-videos{min-width:0}
.yt-section-title{font-size:18px;color:var(--navy);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--light)}
.yt-playlist{margin-bottom:1.75rem}
.yt-note{font-size:.8rem;color:var(--muted);margin:0 0 1.25rem}
.yt-playlist-title{font-size:.98rem;color:var(--primary);margin:0 0 .6rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .7rem}
.yt-count{font-size:.72rem;font-weight:600;color:var(--muted);background:var(--light);border-radius:999px;padding:1px 9px}
.yt-playlist-link{font-size:.8rem;font-weight:600}
/* Compact list: small thumbnail + title per row */
.yt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.yt-item{display:flex;gap:.65rem;align-items:center;color:var(--ink);border-radius:8px;padding:.25rem;transition:background .15s}
.yt-item:hover{background:var(--light);text-decoration:none}
.yt-thumb{position:relative;flex-shrink:0;width:108px;height:61px;line-height:0}
.yt-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.yt-thumb i{position:absolute;inset:0;margin:auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.6);color:#fff;border-radius:50%;font-size:.6rem;padding-left:2px}
.yt-item-title{font-size:.82rem;line-height:1.35;color:var(--ink)}
/* ===== Homepage trust-row slideshow ===== */
.home-slideshow{display:grid;width:100%}
.home-slide{grid-area:1/1;width:100%;height:auto;opacity:0;transition:opacity .8s ease;border-radius:8px}
.home-slide.active{opacity:1}
/* ===== Image lightbox (course / event / press post content images) ===== */
img.zoomable{cursor:zoom-in;transition:opacity .18s,box-shadow .18s}
img.zoomable:hover{opacity:.9;box-shadow:0 4px 18px rgba(0,31,95,.18)}
.img-lightbox{
position:fixed;inset:0;z-index:1000;
display:none;align-items:center;justify-content:center;
background:rgba(0,0,0,.82);padding:4vh 4vw;cursor:zoom-out}
.img-lightbox.open{display:flex}
.img-lightbox-img{
max-width:96vw;max-height:92vh;width:auto;height:auto;
border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.5);cursor:default}
.img-lightbox-close{
position:absolute;top:16px;right:20px;
width:44px;height:44px;border:0;border-radius:50%;
background:rgba(255,255,255,.92);color:#222;
font-size:28px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.img-lightbox-close:hover{background:#fff}
@media(max-width:767px){
.img-lightbox-close{top:10px;right:12px;width:38px;height:38px;font-size:24px}
}
/* ===== Virtual Classroom: awards/partner image on #DCF4FF strip ===== */
/* The VC awards section has background-color:#DCF4FF with NO padding attribute.
All other DCF4FF sections (homepage features, UnaGPT) have explicit padding.
Sized to roughly match the UnaGPT awards image (~870px @ desktop). */
.el-section[style*="background-color:#DCF4FF"]:not([style*="padding"]) .el-img{
max-width:75%!important;margin-left:auto!important;margin-right:auto!important}
/* The award image itself should sit on a plain white background, not the light-blue strip. */
.el-section[style*="background-color:#DCF4FF"]:not([style*="padding"]){
background-color:#fff!important}
/* Mobile: the VC awards image spans full width (drops its 50% desktop cap). */
@media(max-width:767px){
.el-section[style*="background-color:#DCF4FF"]:not([style*="padding"]) .el-img{
max-width:100%!important}
}
/* ===== Course detail: 課程大綱 section heading + lesson rows styled like pricing table ===== */
/* Course content fills its column (drop the readable 880px cap + auto-centering)
so the 學習目標 / 課程大綱 tables span the full width of their frame. */
.detail-grid .prose{max-width:none;margin:0}
.detail-grid .prose h2{
background:linear-gradient(135deg,#001F5F 0%,#0D2444 100%);
color:#fff;border-radius:8px 8px 0 0;
padding:10px 16px;margin-top:2rem;margin-bottom:0;
font-size:.95rem;text-transform:uppercase;letter-spacing:.05em}
.detail-grid .prose h2 + .lesson:first-of-type,
.detail-grid .prose h2 + ul,
.detail-grid .prose h2 + p{margin-top:0}
.detail-grid .prose h3{
background:linear-gradient(90deg,#E8F4FD,#F4FAFF);
color:var(--navy);border-top:2px solid #C8DFF0;border-bottom:1px solid #D6EAF8;
padding:9px 16px;margin-top:1.5rem;margin-bottom:0;
font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;border-radius:0}
/* lesson rows */
.detail-grid .prose .lesson{
background:#fff;border:1px solid #EEF3F8;border-top:none;
border-radius:0;padding:12px 16px}
.detail-grid .prose .lesson:nth-child(even){background:#F7FBFF}
.detail-grid .prose .lesson:last-of-type{border-radius:0 0 8px 8px}
.detail-grid .prose .lesson:hover{background:#EBF5FB;transition:background .12s}
/* ===== Competitions page: replace banner image with a trophy icon ===== */
.el-col:has(img[src*="Tech-for-future-banner_0307"]){
display:flex!important;align-items:center!important;justify-content:center!important}
.el-col:has(img[src*="Tech-for-future-banner_0307"]) .el-widget-wrap{display:none!important}
.el-col:has(img[src*="Tech-for-future-banner_0307"])::after{
font-family:"Font Awesome 6 Free";font-weight:900;content:"\f091";
font-size:2.8rem;color:#4195DE;
flex:0 0 96px;height:96px; /* pin size so flex item is a perfect circle */
background:linear-gradient(135deg,#E8F4FD,#C8E8F8);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 18px rgba(65,149,222,.22)}
/* ===== Testimonial: constrain YouTube video facade size ===== */
.video[data-yt="bURqiTy_8og"]{max-width:440px;margin:0 auto}
/* ===== Join Us: reduce "We are hiring!" heading size ===== */
.el-h[style*="font-family:Trebuchet MS"]{
font-size:26px!important;font-family:var(--font)!important}
.el-h[style*="font-family:Trebuchet MS"] ~ .el-h:not([style*="font-size"]){
font-size:14px!important;font-weight:400!important;line-height:1.6}
/* ===== VC table mobile: horizontal-scroll with readable column widths ===== */
@media(max-width:767px){
.el-section[style*="padding:20px 15px 70px 15px"] .el-table{
table-layout:auto!important;width:auto!important;
min-width:460px!important;font-size:.8rem!important}
.el-section[style*="padding:20px 15px 70px 15px"] .el-table thead th:first-child,
.el-section[style*="padding:20px 15px 70px 15px"] .el-table tbody td:first-child{
min-width:120px!important;padding:8px 6px!important;white-space:normal!important}
.el-section[style*="padding:20px 15px 70px 15px"] .el-table thead th:not(:first-child),
.el-section[style*="padding:20px 15px 70px 15px"] .el-table tbody td:not(:first-child){
min-width:110px!important;padding:8px 6px!important}
}
/* ===== Microsoft Imagine Cup: hide first poster image (no HKSTP logo version) ===== */
.prose figure:has(img[src*="poster-v5"]){ display:none!important }
/* ===== Competition/press post: date directly under title ===== */
.prose h1 + .meta{margin-top:.25rem;margin-bottom:1.25rem;font-size:.95rem;color:var(--muted)}
/* ===== Virtual Classroom page: text style improvements ===== */
/* Hero heading (h4) – make it visually prominent */
.el-section:first-of-type .el-h[style*="font-size"]{line-height:1.2!important}
/* Body text paragraphs in el-text – comfortable reading size */
.el-section[style*="background-color:#F2F8FD"] .el-text p,
.el-section[style*="background-color:#F9FCFF"] .el-text p{font-size:14px!important;line-height:1.75!important}
/* Feature card descriptions */
.el-col > .el-widget-wrap > .el-text[style*="font-size:16px"]{
font-size:14px!important;line-height:1.7!important;color:var(--ink)!important}
/* =====================================================================
Testimonials page (師生感言 / 师生感言 / Testimonial)
Wrapper div.page-testimonials injected by gen-pages.11ty.js
===================================================================== */
/* Sections: remove excessive min-height, normalize padding */
.page-testimonials .el-section {
min-height:0!important;
padding:40px 15px!important;
}
/* Align all rows to center vertically */
.page-testimonials .el-row { align-items:center!important; }
/* Normalize photo height — .el-img IS the ![]()
element (not a wrapper) */
.page-testimonials .el-col:has(.el-img) .el-img {
height:300px!important;
width:100%!important;
object-fit:cover!important;
object-position:center 20%!important;
border-radius:10px!important;
display:block!important;
}
/* 3-column image rows: slightly smaller photos */
.page-testimonials .el-row:has(.el-col:nth-child(3)) .el-img {
height:220px!important;
}
/* Normalize column widths on tablet+
Strategy: fix image cols to 40%; free non-image cols from their max-width cap
so flex-grow can fill the remaining space naturally. */
@media(min-width:640px){
/* Image column: fixed 40% */
.page-testimonials .el-col:has(.el-img){
flex:0 0 40%!important;
max-width:40%!important;
}
/* Non-image column: remove max-width cap so it fills remainder */
.page-testimonials .el-col:not(:has(.el-img)){
max-width:none!important;
}
/* 3-column rows: equal thirds (overrides the 40% above) */
.page-testimonials .el-row:has(.el-col:nth-child(3)) .el-col{
flex:0 0 calc(33.33% - 22px)!important;
max-width:33.33%!important;
text-align:center!important;
}
}
@media(min-width:1024px){
.page-testimonials .el-col:has(.el-img){
flex:0 0 40%!important;
max-width:40%!important;
}
.page-testimonials .el-row:has(.el-col:nth-child(3)) .el-col{
flex:0 0 calc(33.33% - 27px)!important;
max-width:33.33%!important;
}
}
/* =====================================================================
GLOBAL VISUAL POLISH
===================================================================== */
/* 1. Mobile: halve Elementor's 80 px inline section padding */
@media(max-width:767px){
.el-section[style*="padding:80px"]{padding:36px 15px!important}
/* UnaGPT text column has a 102 px left indent for desktop — strip on mobile */
.el-col[style*="margin:0px 0px 0px 102px"]{margin:0!important}
/* Same fix written as the shorthand Elementor emits */
.el-col[style*="margin:102px"]{margin:0!important}
}
/* 2. Cards — crisper shadow, stronger hover lift */
.card{
border-color:rgba(0,31,95,.07)!important;
box-shadow:0 2px 14px rgba(0,31,95,.08)!important;
transition:transform .22s ease,box-shadow .22s ease!important;
}
.card:hover{
transform:translateY(-6px)!important;
box-shadow:0 14px 40px rgba(0,31,95,.15)!important;
}
.card h3{font-weight:700!important;line-height:1.3!important}
/* Press card subtitle + date (previously unstyled) */
.card .card-subtitle{
font-size:.87rem;color:var(--muted);line-height:1.45;margin:.1em 0 0;
}
.card .card-date{
font-size:.77rem;color:var(--muted);opacity:.72;
margin-top:auto;padding-top:6px;border-top:1px solid var(--line);
}
/* Placeholder background when thumb src is empty */
.card .thumb{background:linear-gradient(135deg,var(--light),var(--pale))!important}
/* Listing thumbnails (courses, events, flash-offer, competition, press): show
the whole image (fit by height) rather than cropping to fill — leaves empty
space left/right on a white backdrop. */
.card .thumb{object-fit:contain!important;background:#fff!important}
/* 3. Elementor buttons (Read More / 了解更多 / Learn More) */
.el-btn{
border-radius:999px!important;
font-weight:600!important;
letter-spacing:.01em!important;
box-shadow:0 2px 8px rgba(0,31,95,.14)!important;
transition:transform .2s ease,box-shadow .2s ease!important;
margin:14px 0!important;
}
.el-btn:hover{
transform:translateY(-2px)!important;
box-shadow:0 6px 20px rgba(0,31,95,.24)!important;
}
/* 4. Page hero — inner pages (press, courses, events, about …) */
.page-hero{
padding:clamp(52px,8vw,96px) 0!important;
background:linear-gradient(140deg,#001F5F 0%,#1a3a7c 55%,#255C99 100%)!important;
border-bottom:0!important;
}
.page-hero h1{
color:#fff!important;
font-size:26px!important;
line-height:1.15!important;
margin-bottom:.5em!important;
}
.page-hero .lead{
color:rgba(255,255,255,.85)!important;
font-size:1.05rem!important;
}
/* 5. Stats blocks — tighter numeral spacing */
.el-stat{letter-spacing:-.02em}
/* 6. Slightly wider column gap on very large screens */
@media(min-width:1200px){.el-row{gap:48px}}
/* 7. Prose body text */
.prose p{font-size:14px;line-height:1.78}
.prose li{font-size:14px;line-height:1.7}
/* 8. Press listing: grid gap */
.cols-4{gap:20px}
@media(min-width:1024px){.cols-4{gap:24px}}
/* =====================================================================
MOBILE LAYOUT ROUND 2
===================================================================== */
/* 1. Stats (400+ Schools / 60,000+ Students) — side-by-side at 50% each on mobile.
Default .el-col is flex:1 1 100% which stacks; override with fixed 50% basis. */
@media(max-width:767px){
.el-col:has(.el-icon-wrap + .el-h){
flex:0 0 calc(50% - 12px)!important;
max-width:calc(50% - 12px)!important;
}
}
/* 2. Feature 3-col (Learn / Obtain / Invent) — side-by-side 33% each on mobile.
Collapse margin+gap to zero so three 33.33% cols fit inside the viewport. */
@media(max-width:767px){
.el-row:has(.el-col[style*="--w:calc(33%"]){
flex-wrap:nowrap!important;
gap:0!important;
align-items:stretch!important;
}
.el-col[style*="--w:calc(33%"]{
flex:0 0 33.33%!important;
max-width:33.33%!important;
margin:0!important;
padding:4px!important;
overflow:hidden;
text-align:center!important;
}
/* Feature heading in narrow 33% column — body text size (column is ~100px wide) */
.el-col[style*="--w:calc(33%"] h2.el-h{
font-size:13px!important;
font-weight:400!important;
line-height:1.4!important;
margin-top:4px!important;
}
/* Keep images proportional */
.el-col[style*="--w:calc(33%"] .el-widget-wrap{
max-width:90%!important;
margin:0 auto!important;
}
}
/* Feature 3-col text (Learn… / Obtain… / Invent…) — style as body/paragraph text.
Same colour (#7A7A7A) and weight as the "We collaborated…" el-text blocks. */
.el-col[style*="--w:calc(33%"] h2.el-h{
font-weight:400!important;
color:#7A7A7A!important;
}
/* 3. Awards image section — full-bleed on mobile (remove horizontal padding).
The section has padding:0 15px and the inner .wrap has padding:0 20px;
strip both so the Awards banner stretches edge-to-edge. */
@media(max-width:767px){
.el-section:has(img[src*="Awards-v2026"]){
padding-left:0!important;
padding-right:0!important;
}
.el-section:has(img[src*="Awards-v2026"]) .wrap{
padding-left:0!important;
padding-right:0!important;
max-width:100%!important;
}
.el-section:has(img[src*="Awards-v2026"]) .el-col{
padding:0!important;
}
}
/* 4. "Read More >" button with DCF4FF pale-blue inline background.
The inline style also carries color:#4195DE!important which cannot be beaten
by any CSS !important (inline author !important always wins for color).
Solution: use a white background + blue border (outlined style) — the existing
blue text is clearly readable on white, and the button no longer looks washed-out. */
.el-btn[style*="background:#DCF4FF"]{
background:#fff!important;
border:2px solid var(--primary)!important;
/* text stays #4195DE from inline style — clearly readable on white background */
}
/* 5. "Trusted by Government…" section — image above text + smaller text on mobile. */
@media(max-width:767px){
/* Move the slider column above the text column */
.el-section:has(.el-slider) .el-col:has(.el-slider){
order:-1!important;
}
/* Body text in this section — covered by global 14px body rule above,
but kept for specificity in case of cascade conflicts */
.el-section:has(.el-slider) .el-text[style*="font-size:18px"]{
font-size:14px!important;
}
}
/* 6. Hero → Stats gap: reduce excess vertical space between the subtitle line and
the 400+/60 000+ stats block on mobile. */
@media(max-width:767px){
/* Hero section: strip min-height:600px (desktop-only constraint),
collapse all vertical padding so image → heading → subtitle sit tightly. */
.el-section[style*="min-height:600px"]{
min-height:0!important;
padding-top:0!important;
padding-bottom:0!important;
}
/* Collapse gap between stacked image col and text col */
.el-section[style*="min-height:600px"] .el-row{
gap:0!important;
}
/* Strip col padding — image col (last-child in DOM, order:-1 visually) */
.el-section[style*="min-height:600px"] .el-col:last-child{
padding-top:12px!important;
padding-bottom:0!important;
}
/* Strip col padding — text col (first-child in DOM, appears below image) */
.el-section[style*="min-height:600px"] .el-col:first-child{
padding-top:8px!important;
padding-bottom:8px!important;
}
/* Remove paragraph trailing margin under subtitle */
.el-section[style*="min-height:600px"] .el-text p{
margin-bottom:0!important;
}
}
/* 7. Social icon rows (About page) — 2×2 grid instead of 4×1 vertical stack.
el-feature-link is only used for the social media icon columns.
Row gap is 12px → each col must be calc(50% - 6px) so 2 fit per row. */
@media(max-width:767px){
.el-row:has(.el-feature-link) .el-col{
flex:0 0 calc(50% - 6px)!important;
max-width:calc(50% - 6px)!important;
}
}
/* 8. Footer — tighter on mobile so the copyright bar sits near the screen bottom. */
@media(max-width:767px){
.footer-grid{
padding-top:28px!important;
padding-bottom:28px!important;
gap:20px!important;
}
.footer-bar{
padding:10px 0!important;
}
}
/* ================================================================
GLOBAL TYPOGRAPHY APPLIED TO ALL PAGE TEMPLATES
H1 26px · H2 20px · H3 16px · Body 14px · Stats 22px
Typography sizes are now set globally — only layout overrides below.
================================================================ */
/* ---- Shared: page body text ---- */
.events-intro-text p,
.press-intro-text p,
.hc-cat-body p,
.courses-intro-desc,
.course-desc,
.feedback p { font-size:14px!important; line-height:1.65!important }
.feedback .who { font-size:14px!important }
.lesson,
.spec li,
.spec li b,
.spec li span { font-size:14px; line-height:1.6 }
.courses-featured-heading { font-size:20px }
.courses-find { font-size:20px }
/* ---- 3. Events detail: gallery layout ---- */
@media(max-width:767px){
/* Gallery: 2-per-row instead of fixed 175px (which single-stacks in a 335px container) */
.event-gallery .gallery img { width:calc(50% - 4px)!important }
}
/* ---- Courses: 3C grid layout ---- */
@media(max-width:767px){
.courses-3c { grid-template-columns:repeat(3,1fr)!important; gap:8px!important }
.c3-item { padding:10px 4px!important; gap:4px!important }
.c3-icon-circle { width:44px!important; height:44px!important; font-size:1.1rem!important }
.c3-item h2 { font-size:13px!important }
.c3-item p { font-size:12px!important; line-height:1.35!important }
}
/* ================================================================
MOBILE IMAGE + LAYOUT — PAGE-BY-PAGE AUDIT FIXES
================================================================ */
/* Fix A — UnaGPT product illustration
On desktop the image column is 50.73% wide with a widget-wrap capped at
72.364% — fine at 1200 px but leaves the image just 126 px on mobile.
Widen the column to 85 % and remove the widget-wrap cap so the image
fills most of the mobile viewport width. */
@media(max-width:767px){
.el-col:has(img[src*="Introducing-Una-GPT"]){
flex:0 0 85%!important;
max-width:85%!important;
padding:0!important;
}
.el-col:has(img[src*="Introducing-Una-GPT"]) .el-widget-wrap{
max-width:100%!important;
}
}
/* Fix B — Elementor feature cards (Virtual Classroom, UnaGPT product pages…)
The generic "33% grid" rule forces .el-col[style*="--w:calc(33%"] to stay
side-by-side, which is correct for the lightweight icon+text grids on the
homepage. But columns that hold a full .el-feature card (border, padding,
multi-line heading) are only ~104 px wide at that size — unreadable.
Override: those specific columns stack to 100 % width on mobile. */
@media(max-width:767px){
.el-row:has(.el-col > .el-feature){
flex-wrap:wrap!important;
gap:12px!important;
align-items:stretch!important;
}
.el-col[style*="--w:calc(33%"]:has(> .el-feature){
flex:0 0 100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
}
}
/* Fix C — Tighter default section padding on mobile (32 px → 24 px).
Keeps the vertical rhythm without oversized gaps on a small screen. */
@media(max-width:767px){
.el-section{
padding-top:24px!important;
padding-bottom:24px!important;
}
/* 80 px inline-padded sections: keep the existing 36 px cap but tighten slightly */
.el-section[style*="padding:80px"]{
padding:28px 15px!important;
}
}
/* Fix D — Team member grid: 3-col / 4-col → 1-col on mobile.
The global .el-col:has(>.jet-team-member){max-width:25%!important} rule
(no media-query wrapper) keeps team cards at ~73 px wide on mobile —
names and bios are completely unreadable. Override to 100 % so each
card stacks full-width, matching the live Elementor site behaviour. */
@media(max-width:767px){
.el-col:has(> .jet-team-member){
flex:0 0 100%!important;
max-width:100%!important;
}
}
/* Fix E — Testimonial carousel: dots above slides, arrows hidden on mobile.
Default position:absolute;top:50% lands the prev/next arrows at ~820 px
(half of the 1647 px-tall container) — well below the mobile fold, so
users never see them. Better: reorder the flex children so the dot
indicators appear ABOVE the slides, and hide the side arrows entirely
(the dots provide the same navigation on small screens). */
@media(max-width:767px){
.el-tc{
display:flex!important;
flex-direction:column!important;
padding:0 40px!important; /* gutters for the LHS/RHS arrows */
}
.el-tc-dots{order:-1!important;margin:0 0 .5rem!important}
/* Keep tappable prev/next arrows on mobile (swipe is unreliable). */
.el-tc-arrow{display:flex!important;width:34px;height:34px;font-size:1.3rem;
background:#fff;border-radius:50%;box-shadow:0 2px 10px rgba(0,31,95,.2);opacity:1}
/* Remove equal-height stretching on single-slide mobile view.
JS (site.js) syncs viewport height to the current slide after each nav. */
.el-tc-track{align-items:flex-start!important}
.el-tc-card{height:auto!important}
}
/* Fix F — About Us hero: reduce excessive padding on mobile.
The desktop rule sets padding:100px 0 180px 0 making the hero 720 px tall
— nearly the full mobile viewport. Keep enough bottom padding so the
social-card overlap (margin-top:-80px on the next section) still works,
but bring the hero height down to a reasonable ~360 px. */
@media(max-width:767px){
.el-section[style*="Una-Team"]{
padding:50px 0 110px 0!important;
}
}
/* ===== Desktop heading scale =====================================
The base sizes above (h1 26 / h2 20 / h3 16) are tuned mobile-first.
On wider viewports headings are lifted to a Major-Third (1.25)
modular scale anchored at the 16px body size — 16·1.25ⁿ ≈
25 / 31 / 39 — for clearer hierarchy and presence on desktop.
Applies to native headings, Elementor headings (.el-h, whose inline
sizes are normally clamped down to the mobile tier) and the page /
listing title classes. Stat numbers (.el-stat) keep their own size. */
@media (min-width:1024px){
h1{font-size:39px}
h2{font-size:31px}
h3{font-size:25px}
/* page / listing / section titles that sit at the h1 tier */
.hc-title,.courses-intro-title,.events-intro-title,
.event-detail-title,.courses-intro-title{font-size:34px}
/* Elementor headings — override the mobile clamps from the block above */
h1.el-h[style*="font-size"] { font-size:39px!important }
.el-h[style*="font-size:70px"],
.el-h[style*="font-size:60px"] { font-size:39px!important }
.el-h[style*="font-size:45px"],
.el-h[style*="font-size:44px"],
.el-h[style*="font-size:43px"],
.el-h[style*="font-size:36px"],
.el-h[style*="font-size:34px"] { font-size:31px!important }
h2.el-h:not([style*="font-size"]):not(.el-stat){ font-size:31px!important }
h3.el-h[style*="font-size"],
.el-h[style*="font-size:28px"],
.el-h[style*="font-size:24px"],
.el-h[style*="font-size:20px"] { font-size:25px!important }
h3.el-h:not([style*="font-size"]) { font-size:25px!important }
}
/* ===== Homepage hero & feature tweaks ===== */
/* Hero sub-headline ("Shaping Quality Education…") → h3 treatment */
.el-section[style*="min-height:600px"][style*="padding:25px 15px 10px 15px"]
.el-text[style*="font-size:24px"]{
font-size:16px!important;font-weight:400!important;line-height:1.3!important;color:#54595F!important}
@media (min-width:1024px){
.el-section[style*="min-height:600px"][style*="padding:25px 15px 10px 15px"]
.el-text[style*="font-size:24px"]{ font-size:25px!important }
}
/* Bare CTA buttons that follow a heading: drop to their own line (left-
aligned) with spacing above. */
.home-page .el-h + a.el-btn{display:block;width:fit-content;
margin-top:16px!important;margin-bottom:0!important;margin-left:0!important}
/* Stat numbers (400+ / 60,000+) read too small on desktop — lift to the
h1 tier so they stand out. */
@media (min-width:1024px){
h2.el-h.el-stat, .el-h.el-stat{font-size:31px!important}
}
/* Homepage AI feature-card captions → normal body text (not heading-sized) */
.home-page .el-col[style*="margin:15px 15px 15px 15px"] .el-h[style*="font-size:20px"]{
font-size:16px!important;font-weight:400!important;line-height:1.6!important}
/* UnaGPT "AI Grading accuracy" illustration is oversized when stacked on
mobile — cap and centre it. */
@media (max-width:767px){
.el-img[src*="AI-Grading-3"]{max-width:62%!important;margin-left:auto!important;margin-right:auto!important}
}
/* UnaGPT landing hero: description reads as a subheading on desktop. */
@media (min-width:1024px){
.el-section[style*="background-color:#C1EAFF"] .el-text[style*="font-size:23px"]{
font-size:20px !important; line-height:1.5 !important;
}
}
/* UnaGPT: add breathing room below the HOY TV press-video section before
the "多合一 AI 輔助學習套件" section. */
.el-section[style*="padding:0px 5px 0px 5px"]{margin-bottom:48px}
/* ══════════════════════════════════════════════════════════════
AI 行政 (AI Administration) landing page — scoped under .ai-admin.
Ported from the standalone una-ai-admin design; tokens are scoped
so they never leak into (or get clobbered by) the rest of the site.
══════════════════════════════════════════════════════════════ */
.ai-admin{
--aia-py:88px;
--fp:'Poppins',sans-serif;
--fz:'Noto Sans TC','PingFang HK','Microsoft JhengHei','Noto Sans TC',sans-serif;
--aia-max:1140px;
color:#54595F; line-height:1.7;
}
.ai-admin.lang-zh{ font-family:var(--fz); }
.ai-admin.lang-en{ font-family:var(--fp); }
.ai-admin img{ max-width:100%; display:block; }
.ai-admin a{ text-decoration:none; color:inherit; }
.ai-admin ul{ list-style:none; margin:0; padding:0; }
/* Type */
.ai-admin h1,.ai-admin h2,.ai-admin h3{ font-family:var(--fp); color:#001F5F; margin:0; }
.ai-admin h1{ font-size:2.44rem; font-weight:700; line-height:1.15; }
.ai-admin h2{ font-size:1.94rem; font-weight:700; line-height:1.22; }
.ai-admin h3{ font-size:1.2rem; font-weight:600; line-height:1.3; }
.ai-admin p{ font-size:1rem; color:#54595F; line-height:1.78; margin:0; }
/* Layout */
.ai-admin .container{ max-width:var(--aia-max); margin:0 auto; padding:0 40px; }
.ai-admin .aia-section{ padding:var(--aia-py) 0; }
.ai-admin .bg-lt{ background:#DCF4FF; }
.ai-admin .bg-grey{ background:#F5F7FA; }
/* Buttons */
.ai-admin .btn{ display:inline-block; border-radius:100px; font-weight:600; font-size:.95rem; padding:13px 34px; cursor:pointer; transition:background .18s,border-color .18s,color .18s; white-space:nowrap; font-family:inherit; }
.ai-admin .btn-primary{ background:#4195DE; color:#fff; border:2px solid #4195DE; }
.ai-admin .btn-primary:hover{ background:#255C99; border-color:#255C99; }
/* color !important needed to beat the global `.btn{color:#fff!important}` */
.ai-admin .btn-outline{ background:transparent; color:#001F5F !important; border:2px solid #001F5F; }
.ai-admin .btn-outline:hover{ background:#001F5F; color:#fff !important; }
/* Section header */
.ai-admin .sec-hd{ text-align:center; margin-bottom:56px; }
.ai-admin .sec-hd h2{ margin-bottom:10px; }
.ai-admin .sec-hd p{ color:#7A7A7A; max-width:540px; margin:0 auto; }
/* Hero */
.ai-admin .aia-hero{ padding:80px 0 72px; min-height:450px; display:flex; align-items:center; }
.ai-admin .hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.ai-admin .hero-h1{ margin-bottom:10px; }
.ai-admin .hero-sub{ font-size:1.2rem; font-weight:400; color:#7A7A7A; line-height:1.45; margin-bottom:22px; }
.ai-admin .hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.ai-admin .htag{ display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:#001F5F; }
.ai-admin .htag-dot{ width:20px; height:20px; background:#4195DE; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-admin .htag-dot svg{ width:11px; height:11px; }
.ai-admin .hero-desc{ font-size:.97rem; color:#54595F; margin-bottom:34px; line-height:1.8; max-width:500px; }
.ai-admin .hero-illus{ display:flex; justify-content:center; }
/* Pain cards */
.ai-admin .cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ai-admin .pain-card{ background:#fff; border-radius:12px; padding:32px 26px; box-shadow:0 6px 24px rgba(0,31,95,.08); transition:box-shadow .2s,transform .2s; }
.ai-admin .pain-card:hover{ box-shadow:0 12px 40px rgba(0,31,95,.12); transform:translateY(-2px); }
.ai-admin .pain-icon{ font-size:2.2rem; margin-bottom:16px; line-height:1; }
.ai-admin .pain-card h3{ margin-bottom:8px; font-size:1.1rem; }
.ai-admin .pain-card p{ font-size:.91rem; color:#7A7A7A; }
/* Feature sections */
.ai-admin .feat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.ai-admin .feat-grid.rev .feat-text{ order:2; }
.ai-admin .feat-grid.rev .feat-illus{ order:1; }
.ai-admin .feat-text h2{ margin-bottom:14px; }
.ai-admin .feat-sub{ font-size:1rem; font-weight:700; color:#4195DE; margin-bottom:12px; }
.ai-admin .feat-desc{ color:#54595F; margin-bottom:26px; font-size:.98rem; }
.ai-admin .feat-list{ display:flex; flex-direction:column; gap:11px; }
.ai-admin .feat-list li{ display:flex; align-items:center; gap:11px; font-size:.95rem; color:#54595F; }
.ai-admin .feat-list li::before{ content:''; width:8px; height:8px; border-radius:50%; background:#7A7A7A; flex-shrink:0; }
.ai-admin .aia-feat-btn{ margin-top:24px; }
.ai-admin .feat-illus{ display:flex; justify-content:center; }
.ai-admin .illus-card{ background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(0,31,95,.12); overflow:hidden; width:100%; max-width:400px; }
/* Steps */
.ai-admin .steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.ai-admin .steps-row::before{ content:''; position:absolute; top:36px; left:calc(16.67% + 16px); right:calc(16.67% + 16px); height:2px; background:#C1EAFF; z-index:0; }
.ai-admin .step{ text-align:center; position:relative; z-index:1; padding:0 12px; }
.ai-admin .step-num{ width:72px; height:72px; border-radius:50%; background:#4195DE; color:#fff; font-family:var(--fp); font-size:1.4rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 6px 20px rgba(65,149,222,.35); }
.ai-admin .step h3{ margin-bottom:10px; font-size:1.05rem; }
.ai-admin .step p{ font-size:.9rem; color:#7A7A7A; max-width:200px; margin:0 auto; }
/* Footer CTA */
.ai-admin #fcta{ text-align:center; padding:80px 0; }
.ai-admin #fcta h2{ margin-bottom:36px; }
.ai-admin .fcta-btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.ai-admin .fcta-contact{ margin-top:28px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.ai-admin .fcta-contact a{ display:flex; align-items:center; gap:8px; font-weight:600; color:#001F5F; font-size:.95rem; }
.ai-admin .fcta-contact a:hover{ color:#4195DE; }
.ai-admin .fcta-sep{ color:#C1EAFF; }
/* Scroll reveal */
.ai-admin .reveal{ opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; }
.ai-admin .reveal.in{ opacity:1; transform:none; }
@media (max-width:960px){
.ai-admin{ --aia-py:64px; }
.ai-admin h1{ font-size:2rem; }
.ai-admin h2{ font-size:1.6rem; }
.ai-admin .hero-grid,.ai-admin .feat-grid{ grid-template-columns:1fr; gap:36px; }
.ai-admin .feat-grid.rev .feat-text{ order:1; }
.ai-admin .feat-grid.rev .feat-illus{ order:2; }
.ai-admin .hero-illus{ order:-1; }
.ai-admin .cards-3{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
.ai-admin .steps-row{ grid-template-columns:1fr; gap:32px; }
.ai-admin .steps-row::before{ display:none; }
.ai-admin .illus-card{ max-width:100%; }
}
@media (max-width:600px){
.ai-admin .container{ padding:0 20px; }
.ai-admin h1{ font-size:1.75rem; }
.ai-admin .fcta-btns{ flex-direction:column; align-items:center; }
}
/* ══════════════════════════════════════════════════════════════
Una PDF Editor — 2nd page under AI 行政. Scoped under .pdf-editor.
Ported from the standalone design; section-level classes use the
pe- prefix to avoid clashing with the site's global .section etc.
══════════════════════════════════════════════════════════════ */
.pdf-editor{
--pe-navy:#001F5F; --pe-blue:#4195DE; --pe-blue-hov:#255C99;
--pe-blue-lt:#DCF4FF; --pe-blue-lt2:#C1EAFF;
--pe-grey1:#54595F; --pe-grey2:#7A7A7A; --pe-grey3:#F5F8FF;
--pe-radius:12px; --pe-shadow:0 6px 24px rgba(0,31,95,.08); --pe-shadow-md:0 12px 36px rgba(0,31,95,.12);
--fp:'Poppins',system-ui,sans-serif;
--fz:'Noto Sans TC','PingFang HK','Microsoft JhengHei',system-ui,sans-serif;
color:var(--pe-grey1); line-height:1.6;
}
.pdf-editor.lang-zh{ font-family:var(--fz); }
.pdf-editor.lang-en{ font-family:var(--fp); }
.pdf-editor img{ max-width:100%; display:block; }
.pdf-editor ul{ list-style:none; margin:0; padding:0; }
.pdf-editor h1,.pdf-editor h2,.pdf-editor h3,.pdf-editor h4{ color:var(--pe-navy); margin:0; font-family:var(--fp); }
.pdf-editor h1{ font-size:39px; font-weight:800; line-height:1.18; letter-spacing:-.02em; }
.pdf-editor h2{ font-size:31px; font-weight:700; line-height:1.22; letter-spacing:-.01em; }
.pdf-editor h3{ font-size:25px; font-weight:600; line-height:1.3; }
.pdf-editor h4{ font-size:19px; font-weight:600; line-height:1.4; }
.pdf-editor p{ font-size:16px; line-height:1.7; color:var(--pe-grey1); margin:0; }
.pdf-editor .container{ max-width:1140px; margin:0 auto; padding:0 24px; }
.pdf-editor .pe-section{ padding:80px 0; }
.pdf-editor .pe-bg-grey{ background:var(--pe-grey3); }
/* Buttons */
.pdf-editor .btn{ display:inline-block; background:var(--pe-blue); color:#fff; font-family:var(--fp); font-size:15px; font-weight:600; padding:13px 32px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; transition:background .18s,transform .12s; letter-spacing:.01em; }
.pdf-editor .btn:hover{ background:var(--pe-blue-hov); transform:translateY(-1px); }
.pdf-editor .btn-ghost{ background:transparent; border:2px solid var(--pe-blue); color:var(--pe-blue); }
.pdf-editor .btn-ghost:hover{ background:var(--pe-blue); color:#fff; }
/* Eyebrow + section head */
.pdf-editor .eyebrow{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--pe-blue); margin-bottom:10px; display:block; }
.pdf-editor .eyebrow-center{ display:flex; justify-content:center; }
.pdf-editor .section-head{ text-align:center; margin-bottom:48px; }
.pdf-editor .section-head p{ max-width:860px; margin:12px auto 0; }
/* Hero */
.pdf-editor .pe-hero{ min-height:520px; padding:72px 0 0; overflow:hidden; background:linear-gradient(160deg,#F2F8FF 0%,#fff 60%); }
.pdf-editor .hero-inner{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:1140px; margin:0 auto; padding:0 24px; }
.pdf-editor .hero-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--pe-blue-lt); color:var(--pe-blue-hov); font-size:13px; font-weight:600; padding:5px 14px; border-radius:999px; margin-bottom:20px; letter-spacing:.04em; }
.pdf-editor .hero-badge::before{ content:"✦"; font-size:11px; }
.pdf-editor .pe-hero h1{ margin-bottom:14px; }
.pdf-editor .hero-sub{ font-size:19px; color:var(--pe-grey1); margin-bottom:24px; line-height:1.55; font-weight:400; }
.pdf-editor .hero-checks{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-bottom:32px; }
.pdf-editor .hero-checks li{ display:flex; align-items:center; gap:8px; font-size:15px; color:var(--pe-navy); font-weight:500; }
.pdf-editor .hero-checks li::before{ content:""; display:inline-block; width:18px; height:18px; background:var(--pe-blue); border-radius:50%; flex-shrink:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7L5.5 10L11.5 4' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:12px; background-repeat:no-repeat; background-position:center; }
.pdf-editor .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.pdf-editor .hero-visual{ position:relative; display:flex; align-items:flex-end; justify-content:center; }
.pdf-editor .hero-screen{ width:100%; max-width:520px; border-radius:10px; box-shadow:var(--pe-shadow-md); overflow:hidden; border:1px solid rgba(0,31,95,.08); }
/* Divider stripe */
.pdf-editor .stripe{ height:4px; background:linear-gradient(90deg,var(--pe-blue-lt2),var(--pe-blue),var(--pe-navy)); }
/* Pain points */
.pdf-editor .pe-pain{ background:var(--pe-grey3); }
.pdf-editor .pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pdf-editor .pain-card{ background:#fff; border-radius:var(--pe-radius); padding:32px 28px; box-shadow:var(--pe-shadow); display:flex; flex-direction:column; gap:12px; }
.pdf-editor .pain-card .glyph{ font-size:36px; line-height:1; }
.pdf-editor .pain-card h3{ font-size:19px; }
.pdf-editor .pain-card p{ font-size:15px; color:var(--pe-grey2); }
/* Feature rows */
.pdf-editor .feat-row{ display:grid; grid-template-columns:1fr 1fr; gap:56px 48px; align-items:center; }
.pdf-editor .feat-row.reverse{ direction:rtl; }
.pdf-editor .feat-row.reverse>*{ direction:ltr; }
.pdf-editor .feat-text .eyebrow{ margin-bottom:8px; }
.pdf-editor .feat-text h2{ margin-bottom:14px; }
.pdf-editor .feat-desc{ font-size:17px; margin-bottom:24px; line-height:1.65; color:var(--pe-grey1); }
.pdf-editor .feat-points{ display:flex; flex-direction:column; gap:10px; }
.pdf-editor .feat-points li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--pe-grey1); }
.pdf-editor .feat-points li::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pe-grey2); margin-top:7px; flex-shrink:0; }
.pdf-editor .feat-img{ border-radius:var(--pe-radius); overflow:hidden; box-shadow:var(--pe-shadow-md); border:1px solid rgba(0,31,95,.07); background:#f0f4fa; }
.pdf-editor .feat-img img{ width:100%; }
/* How it works */
.pdf-editor .pe-steps{ background:var(--pe-grey3); }
.pdf-editor .steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; }
.pdf-editor .steps-row::before{ content:''; position:absolute; top:28px; left:calc(16.67% + 8px); right:calc(16.67% + 8px); height:2px; background:var(--pe-blue-lt2); border-radius:1px; z-index:0; }
.pdf-editor .step-card{ background:#fff; border-radius:var(--pe-radius); padding:32px 24px; box-shadow:var(--pe-shadow); text-align:center; position:relative; z-index:1; }
.pdf-editor .step-num{ width:52px; height:52px; border-radius:50%; background:var(--pe-blue); color:#fff; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-family:var(--fp); }
.pdf-editor .step-card h4{ margin-bottom:8px; }
.pdf-editor .step-card p{ font-size:15px; color:var(--pe-grey2); }
/* Stats */
.pdf-editor .pe-stats{ background:var(--pe-navy); padding:64px 0; }
.pdf-editor .stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; text-align:center; }
.pdf-editor .stat-num{ font-size:52px; font-weight:800; color:#fff; line-height:1; letter-spacing:-.02em; display:block; margin-bottom:8px; font-family:var(--fp); }
.pdf-editor .stat-label{ font-size:16px; color:rgba(255,255,255,.72); line-height:1.4; }
/* Testimonials */
.pdf-editor .testi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pdf-editor .testi-card{ background:#fff; border:1.5px solid rgba(65,149,222,.18); border-radius:var(--pe-radius); padding:28px; box-shadow:var(--pe-shadow); }
.pdf-editor .testi-card .quote{ font-size:17px; font-style:italic; color:var(--pe-navy); line-height:1.6; margin-bottom:20px; }
.pdf-editor .testi-card .quote::before{ content:"\201C"; }
.pdf-editor .testi-card .quote::after{ content:"\201D"; }
.pdf-editor .testi-author{ display:flex; align-items:center; gap:12px; }
.pdf-editor .testi-avatar{ width:42px; height:42px; border-radius:50%; background:var(--pe-blue-lt); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:var(--pe-blue-hov); flex-shrink:0; font-family:var(--fp); }
.pdf-editor .testi-name{ font-size:14px; font-weight:600; color:var(--pe-navy); }
.pdf-editor .testi-role{ font-size:13px; color:var(--pe-grey2); }
/* Closing CTA */
.pdf-editor .pe-cta{ background:linear-gradient(135deg,var(--pe-blue-lt) 0%,#ddf0ff 100%); padding:80px 0; text-align:center; }
.pdf-editor .pe-cta h2{ margin-bottom:14px; }
.pdf-editor .pe-cta p{ max-width:520px; margin:0 auto 32px; font-size:17px; }
.pdf-editor .cta-btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
@media (max-width:900px){
.pdf-editor .hero-inner{ grid-template-columns:1fr; }
.pdf-editor .hero-visual{ display:none; }
.pdf-editor .feat-row,.pdf-editor .feat-row.reverse{ grid-template-columns:1fr; direction:ltr; gap:32px; }
.pdf-editor .feat-row .feat-img,.pdf-editor .feat-row.reverse .feat-img{ order:-1; }
}
@media (max-width:768px){
.pdf-editor h1{ font-size:28px; }
.pdf-editor h2{ font-size:24px; }
.pdf-editor h3{ font-size:20px; }
.pdf-editor .pain-grid,.pdf-editor .steps-row,.pdf-editor .stats-grid,.pdf-editor .testi-grid{ grid-template-columns:1fr; }
.pdf-editor .steps-row::before{ display:none; }
.pdf-editor .stats-grid{ gap:36px; }
}
/* ══════════════════════════════════════════════════════════════
Una Interview Bot — 3rd page under AI 行政. Scoped under .interview-bot.
Ported from the standalone design (CSS mockups, no screenshots); the
hero section + hero rows use an `ib-` prefix, everything else keeps the
design's class names (safe because every selector is scoped). Keyframes
are `ib-`-prefixed to avoid any global name clash.
══════════════════════════════════════════════════════════════ */
.interview-bot{
--navy:#001F5F; --navy-2:#0a2c70; --blue:#4195DE; --blue-hover:#255C99;
--blue-50:#DCF4FF; --blue-100:#C1EAFF;
--gray-1:#54595F; --gray-2:#7A7A7A; --gray-3:#adb5bd; --gray-bg:#f7fafc; --line:#e5edf5; --white:#fff;
--shadow-soft:0 6px 24px rgba(0,31,95,.08); --shadow-card:0 4px 16px rgba(0,31,95,.06); --shadow-lift:0 14px 40px rgba(0,31,95,.12);
--radius:12px; --radius-lg:18px;
--fp:'Poppins',system-ui,sans-serif;
--fz:'PingFang HK','PingFang TC','Microsoft JhengHei','Noto Sans TC','Heiti TC',sans-serif;
--t-h1:39px; --t-h2:31px; --t-h3:25px; --t-lead:18px; --t-body:16px; --t-sm:14px;
color:var(--gray-1); line-height:1.6;
}
.interview-bot.lang-zh{ font-family:var(--fz); }
.interview-bot.lang-en{ font-family:var(--fp); }
.interview-bot .container{ max-width:1180px; margin:0 auto; padding:0 28px; }
.interview-bot h1,.interview-bot h2,.interview-bot h3,.interview-bot h4{ color:var(--navy); font-weight:700; line-height:1.2; letter-spacing:-.005em; margin:0; }
.interview-bot h1{ font-size:var(--t-h1); margin:0 0 18px; }
.interview-bot h2{ font-size:var(--t-h2); margin:0 0 16px; }
.interview-bot h3{ font-size:var(--t-h3); margin:0 0 12px; }
.interview-bot p{ margin:0 0 14px; }
.interview-bot a{ color:var(--blue); text-decoration:none; transition:color .2s; }
.interview-bot a:hover{ color:var(--blue-hover); }
/* Buttons */
.interview-bot .btn-primary,.interview-bot .btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 36px; border-radius:9999px; font-weight:600; font-size:15.5px; letter-spacing:.01em; text-decoration:none; transition:background .25s,color .25s,transform .15s,box-shadow .25s; border:none; cursor:pointer; font-family:inherit; }
.interview-bot .btn-primary{ background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(65,149,222,.35); }
.interview-bot .btn-primary:hover{ background:var(--blue-hover); color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px rgba(65,149,222,.4); }
.interview-bot .btn-secondary{ background:#fff; color:var(--navy); border:1.5px solid var(--blue); }
.interview-bot .btn-secondary:hover{ background:var(--blue-50); color:var(--blue-hover); }
.interview-bot .btn-link{ color:var(--blue); font-weight:600; font-size:15px; padding:14px 4px; }
.interview-bot .btn-link:hover{ color:var(--blue-hover); }
.interview-bot .cta-row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
/* Hero */
.interview-bot .ib-hero{ background:linear-gradient(180deg,#fff 0%,var(--blue-50) 100%); padding:80px 0 100px; overflow:hidden; }
.interview-bot .hero-inner{ max-width:1180px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; min-height:450px; }
.interview-bot .hero-text{ display:flex; flex-direction:column; gap:8px; }
.interview-bot .hero-title{ font-size:var(--t-h1); margin:0 0 12px; display:flex; flex-direction:column; gap:12px; }
.interview-bot .hero-title .brand-line{ font-size:56px; line-height:1.05; font-weight:800; color:var(--navy); letter-spacing:-.01em; font-family:var(--fp); }
.interview-bot .hero-title .hero-sub{ font-size:22px; font-weight:400; color:var(--gray-1); letter-spacing:0; }
.interview-bot .check-tags{ list-style:none; padding:0; margin:8px 0 18px; display:flex; flex-wrap:wrap; gap:14px 24px; }
.interview-bot .check-tags li{ display:inline-flex; align-items:center; gap:8px; color:var(--gray-1); font-weight:500; font-size:15px; }
.interview-bot .check-tags .fa-check{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:20px; height:20px; padding-right:2px; border-radius:50%; background:var(--blue-50); color:var(--blue); font-style:normal; font-weight:700; font-size:12px; line-height:1; }
.interview-bot .hero-desc{ font-size:var(--t-lead); color:var(--gray-1); margin:0 0 28px; line-height:1.65; max-width:480px; }
.interview-bot .hero-visual{ position:relative; height:460px; }
.interview-bot .hero-card{ position:absolute; inset:0; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lift); overflow:hidden; transform:perspective(1200px) rotateY(-4deg) rotateX(2deg); }
.interview-bot .hero-card-bar{ background:#fafbfd; border-bottom:1px solid var(--line); padding:14px 20px; display:flex; align-items:center; gap:8px; }
.interview-bot .hero-card-bar .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.interview-bot .hero-card-bar .dot.r{ background:#ff5f57; } .interview-bot .hero-card-bar .dot.y{ background:#febc2e; } .interview-bot .hero-card-bar .dot.g{ background:#28c840; }
.interview-bot .hero-card-title{ margin-left:16px; font-weight:600; font-size:13px; color:var(--gray-1); }
.interview-bot .hero-card-body{ padding:26px 28px; display:flex; flex-direction:column; gap:14px; }
.interview-bot .ib-hero-row{ display:flex; align-items:center; gap:16px; padding:14px 18px; border:1.5px solid var(--line); border-radius:var(--radius); background:#fff; transition:all .25s; }
.interview-bot .ib-hero-row.ib-hero-row-on{ border-color:var(--blue-100); background:linear-gradient(90deg,var(--blue-50) 0%,#fff 100%); }
.interview-bot .ib-hero-row.ib-hero-row-active{ border-color:var(--blue); box-shadow:0 6px 16px rgba(65,149,222,.18); background:#fff; }
.interview-bot .row-step{ width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff; font-weight:700; font-size:13px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--fp); }
.interview-bot .ib-hero-row:not(.ib-hero-row-on):not(.ib-hero-row-active) .row-step{ background:var(--gray-3); }
.interview-bot .row-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.interview-bot .row-text strong{ font-size:15px; color:var(--navy); font-weight:600; }
.interview-bot .row-text span{ font-size:13px; color:var(--gray-2); }
.interview-bot .row-badge{ width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.interview-bot .row-badge.ok{ background:#e6f7ee; color:#2ea260; }
.interview-bot .row-badge.live{ background:var(--blue); color:#fff; animation:ib-pulse 1.6s ease-in-out infinite; }
@keyframes ib-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(65,149,222,.4); } 50%{ box-shadow:0 0 0 8px rgba(65,149,222,0); } }
.interview-bot .hero-bubble{ position:absolute; background:#fff; border-radius:9999px; padding:10px 20px; font-size:14px; font-weight:600; color:var(--navy); box-shadow:var(--shadow-soft); border:1px solid var(--line); animation:ib-float 4s ease-in-out infinite; }
.interview-bot .hero-bubble.bubble-1{ top:-20px; right:-8px; animation-delay:0s; }
.interview-bot .hero-bubble.bubble-2{ bottom:-16px; left:-10px; animation-delay:1.2s; }
@keyframes ib-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
/* Section title */
.interview-bot .section-title{ text-align:center; }
.interview-bot .section-sub{ text-align:center; font-size:var(--t-lead); color:var(--gray-1); max-width:720px; margin:0 auto 48px; }
/* Pain */
.interview-bot .pain{ padding:96px 0; }
.interview-bot .pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.interview-bot .pain-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px 32px; text-align:center; box-shadow:var(--shadow-card); transition:transform .25s,box-shadow .25s; }
.interview-bot .pain-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.interview-bot .pain-icon{ font-size:48px; margin-bottom:18px; line-height:1; }
.interview-bot .pain-card h3{ font-size:22px; margin-bottom:10px; }
.interview-bot .pain-card p{ color:var(--gray-1); font-size:15px; margin:0; }
/* Feature sections */
.interview-bot .feature{ padding:96px 0; }
.interview-bot .feature-alt{ background:var(--blue-50); }
.interview-bot .feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; justify-content:center; }
.interview-bot .feature-row-reverse .feature-text{ order:2; }
.interview-bot .feature-row-reverse .feature-visual{ order:1; }
.interview-bot .eyebrow{ font-size:13px; font-weight:700; color:var(--blue); letter-spacing:.15em; text-transform:uppercase; margin:0 0 14px; }
.interview-bot .feature-text h2{ margin-bottom:18px; }
.interview-bot .feature-lead{ font-size:var(--t-lead); color:var(--gray-1); line-height:1.65; margin:0 0 20px; max-width:480px; }
.interview-bot .dot-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.interview-bot .dot-list li{ position:relative; padding-left:22px; color:var(--gray-1); font-size:15.5px; line-height:1.55; }
.interview-bot .dot-list li::before{ content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--gray-2); }
.interview-bot .feature-visual{ display:flex; align-items:center; justify-content:center; }
/* OCR mock */
.interview-bot .ocr-mock{ width:100%; max-width:540px; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.interview-bot .ocr-doc{ position:relative; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:28px 22px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.interview-bot .ocr-line{ display:block; height:7px; background:var(--line); border-radius:4px; }
.interview-bot .ocr-line.w-80{ width:80%; } .interview-bot .ocr-line.w-55{ width:55%; } .interview-bot .ocr-line.w-90{ width:90%; } .interview-bot .ocr-line.w-70{ width:70%; } .interview-bot .ocr-line.w-60{ width:60%; } .interview-bot .ocr-line.w-85{ width:85%; }
.interview-bot .ocr-line.highlight{ background:var(--blue-100); position:relative; }
.interview-bot .ocr-line.highlight::after{ content:''; position:absolute; inset:-3px; border:1.5px dashed var(--blue); border-radius:6px; }
.interview-bot .ocr-scan{ position:absolute; left:0; right:0; height:3px; background:var(--blue); top:60%; box-shadow:0 0 18px var(--blue),0 0 4px var(--blue); animation:ib-scan 2.6s ease-in-out infinite; opacity:.85; }
@keyframes ib-scan{ 0%,100%{ top:18%; opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 90%{ top:82%; opacity:0; } }
.interview-bot .ocr-out{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-card); border:1px solid var(--line); padding:22px 20px; display:flex; flex-direction:column; gap:10px; }
.interview-bot .ocr-out-head{ font-size:14px; font-weight:700; color:var(--blue); margin-bottom:4px; }
.interview-bot .ocr-field{ display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.interview-bot .ocr-field:last-child{ border-bottom:none; }
.interview-bot .ocr-field .k{ color:var(--gray-2); font-weight:500; }
.interview-bot .ocr-field .v{ color:var(--navy); font-weight:600; }
.interview-bot .ocr-field .v.badge-blue{ background:var(--blue-50); color:var(--blue-hover); padding:3px 10px; border-radius:9999px; font-size:12px; }
/* Calendar mock */
.interview-bot .cal-mock{ width:100%; max-width:540px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lift); border:1px solid var(--line); overflow:hidden; }
.interview-bot .cal-head{ padding:16px 22px; background:var(--navy); color:#fff; display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:600; }
.interview-bot .cal-tag{ background:rgba(255,255,255,.18); padding:4px 12px; border-radius:9999px; font-size:11.5px; }
.interview-bot .cal-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); }
.interview-bot .cal-col{ background:#fff; padding:14px 10px; display:flex; flex-direction:column; gap:6px; min-height:220px; }
.interview-bot .cal-day{ font-size:12px; font-weight:700; color:var(--gray-2); letter-spacing:.05em; margin-bottom:4px; }
.interview-bot .cal-event{ font-size:11px; padding:6px 8px; border-radius:6px; background:#eff6ff; color:#1e40af; line-height:1.3; font-weight:500; }
.interview-bot .cal-event.ok{ background:#e6f7ee; color:#2ea260; }
.interview-bot .cal-event.warn{ background:#fff3e0; color:#c2410c; }
/* WhatsApp mock */
.interview-bot .wa-mock{ width:100%; max-width:380px; background:#fff; border-radius:22px; box-shadow:var(--shadow-lift); overflow:hidden; border:1px solid var(--line); }
.interview-bot .wa-bar{ background:#075E54; color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px; }
.interview-bot .wa-av{ width:38px; height:38px; border-radius:50%; background:var(--blue-100); color:var(--navy); font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.interview-bot .wa-name{ font-size:15px; font-weight:600; }
.interview-bot .wa-status{ font-size:11px; color:rgba(255,255,255,.7); }
.interview-bot .wa-body{ background:#ECE5DD; padding:18px 16px 22px; display:flex; flex-direction:column; min-height:320px; background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px); background-size:14px 14px; }
.interview-bot .wa-date{ align-self:center; background:rgba(255,255,255,.85); color:var(--gray-2); padding:4px 12px; border-radius:8px; font-size:11px; font-weight:500; margin-bottom:8px; }
.interview-bot .wa-bubble{ padding:8px 12px 6px; border-radius:8px; font-size:13px; line-height:1.5; max-width:78%; margin:4px 0; box-shadow:0 1px 1px rgba(0,0,0,.08); white-space:pre-wrap; }
.interview-bot .wa-bubble.in{ background:#fff; align-self:flex-start; border-top-left-radius:2px; color:#111; }
.interview-bot .wa-bubble.out{ background:#DCF8C6; align-self:flex-end; border-top-right-radius:2px; color:#111; }
.interview-bot .wa-time{ display:block; font-size:10px; color:rgba(0,0,0,.45); text-align:right; margin-top:2px; }
/* Pipeline mock */
.interview-bot .pipeline-mock{ width:100%; max-width:540px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lift); border:1px solid var(--line); overflow:hidden; }
.interview-bot .pipeline-head{ padding:16px 22px; background:var(--navy); color:#fff; font-size:14px; font-weight:600; }
.interview-bot .pipeline-row{ padding:14px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.interview-bot .pipeline-row:last-child{ border-bottom:none; }
.interview-bot .pl-name{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.interview-bot .pl-name strong{ font-size:14.5px; color:var(--navy); font-weight:600; }
.interview-bot .pl-name span{ font-size:12.5px; color:var(--gray-2); font-family:ui-monospace,SFMono-Regular,monospace; }
.interview-bot .pl-badge{ display:inline-block; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:600; line-height:1.3; flex-shrink:0; }
.interview-bot .pl-badge.b-confirmed{ background:#d1fae5; color:#065f46; }
.interview-bot .pl-badge.b-contacted{ background:#dbeafe; color:#1e40af; }
.interview-bot .pl-badge.b-nophone{ background:#fef9c3; color:#854d0e; }
.interview-bot .pl-badge.b-preferred{ background:#fef3c7; color:#92400e; }
.interview-bot .pl-badge.b-declined{ background:#fee2e2; color:#991b1b; }
/* How it works */
.interview-bot .how{ padding:96px 0; background:var(--gray-bg); }
.interview-bot .how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.interview-bot .how-grid.how-grid-5{ grid-template-columns:repeat(5,1fr); gap:18px; }
.interview-bot .how-card{ background:#fff; border-radius:var(--radius); padding:36px 32px; position:relative; box-shadow:var(--shadow-card); transition:transform .25s,box-shadow .25s; }
.interview-bot .how-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.interview-bot .how-num{ font-size:56px; font-weight:800; color:var(--blue-100); line-height:1; display:block; margin-bottom:12px; font-family:var(--fp); letter-spacing:-.02em; }
.interview-bot .how-card h3{ font-size:22px; margin-bottom:10px; }
.interview-bot .how-card p{ color:var(--gray-1); font-size:15px; margin:0; }
/* Stats — three pillars (navy) */
.interview-bot .stats{ padding:80px 0; background:var(--navy); color:#fff; }
.interview-bot .stats-pillars{ padding:96px 0; }
.interview-bot .stats-pillars .section-title{ color:#fff; }
.interview-bot .stats-pillars .section-sub{ color:rgba(255,255,255,.72); }
.interview-bot .pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:12px; }
.interview-bot .pillar{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:36px 32px; text-align:center; }
.interview-bot .pillar-icon{ font-size:48px; line-height:1; margin-bottom:16px; }
.interview-bot .pillar h3{ color:#fff; font-size:22px; margin-bottom:10px; }
.interview-bot .pillar p{ color:rgba(255,255,255,.78); font-size:15px; margin:0; }
/* Closing CTA band */
.interview-bot .cta-band{ background:var(--blue-50); padding:96px 0; }
.interview-bot .cta-band-inner{ text-align:center; max-width:720px; margin:0 auto; padding:0 28px; }
.interview-bot .cta-band h2{ margin-bottom:14px; }
.interview-bot .cta-band p{ font-size:17px; color:var(--gray-1); margin:0 0 32px; }
.interview-bot .cta-band .cta-row{ justify-content:center; margin-bottom:28px; }
.interview-bot .cta-foot{ display:flex; justify-content:center; gap:32px; color:var(--gray-1); font-size:14.5px; flex-wrap:wrap; }
/* Responsive */
@media (max-width:980px){
.interview-bot{ --t-h1:32px; --t-h2:26px; --t-h3:21px; }
.interview-bot .hero-inner{ grid-template-columns:1fr; gap:60px; }
.interview-bot .hero-title .brand-line{ font-size:42px; }
.interview-bot .hero-title .hero-sub{ font-size:18px; }
.interview-bot .hero-visual{ order:-1; height:auto; min-height:340px; }
.interview-bot .feature-row{ grid-template-columns:1fr; gap:40px; }
.interview-bot .feature-row-reverse .feature-text{ order:1; }
.interview-bot .feature-row-reverse .feature-visual{ order:2; }
.interview-bot .feature-visual{ order:-1; }
.interview-bot .feature-row-reverse .feature-visual{ order:-1; }
.interview-bot .pain-grid,.interview-bot .how-grid,.interview-bot .how-grid.how-grid-5,.interview-bot .pillar-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
.interview-bot .ib-hero{ padding:60px 0 80px; }
.interview-bot .pain,.interview-bot .feature,.interview-bot .how,.interview-bot .cta-band{ padding:64px 0; }
}
/* ══════════════════════════════════════════════════════════════
Una Leave — 4th page under AI 行政. Scoped under .una-leave.
Ported from the standalone design (CSS mockups, no images). Section
wrappers use a `ul-` prefix; everything else keeps the design's class
names (safe because every selector is scoped). The .reveal fade reuses
the shared site.js IntersectionObserver (adds `.in`).
══════════════════════════════════════════════════════════════ */
.una-leave{
--navy:#001F5F; --navy-2:#00153d; --blue:#4195DE; --blue-hover:#255C99;
--blue-light:#DCF4FF; --blue-light-2:#C1EAFF;
--grey:#54595F; --grey-2:#7A7A7A; --grey-3:#b0b6bd; --line:#e8eaee; --line-2:#f1f3f6;
--paper:#fff; --paper-2:#f8fafc;
--shadow-sm:0 2px 8px rgba(0,31,95,.05); --shadow:0 6px 24px rgba(0,31,95,.08); --shadow-lg:0 12px 40px rgba(0,31,95,.10);
--radius:12px; --radius-lg:20px;
--fp:'Poppins',sans-serif; --ftc:'Noto Sans TC','PingFang HK','Microsoft JhengHei',sans-serif;
--container:1040px;
color:var(--grey); line-height:1.6; font-size:16px;
}
.una-leave.lang-zh{ font-family:var(--fp),var(--ftc); }
.una-leave.lang-en{ font-family:var(--fp),var(--ftc); }
.una-leave img,.una-leave svg{ display:block; max-width:100%; }
.una-leave ul{ list-style:none; margin:0; padding:0; }
.una-leave h1,.una-leave h2,.una-leave h3,.una-leave h4{ font-family:var(--fp),var(--ftc); font-weight:700; color:var(--navy); letter-spacing:-.01em; line-height:1.25; margin:0; }
.una-leave .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.una-leave section,.una-leave .ul-hero,.una-leave .ul-pains,.una-leave .ul-features,.una-leave .ul-how,.una-leave .ul-benefits,.una-leave .ul-cta{ padding:90px 0; }
/* Buttons */
.una-leave .btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 32px; border-radius:999px; font-family:var(--fp),var(--ftc); font-weight:600; font-size:15px; line-height:1; transition:all .2s ease; cursor:pointer; border:2px solid transparent; white-space:nowrap; text-decoration:none; }
.una-leave .btn-primary{ background:var(--blue); color:#fff; border-color:var(--blue); }
.una-leave .btn-primary:hover{ background:var(--blue-hover); border-color:var(--blue-hover); transform:translateY(-1px); box-shadow:0 8px 20px rgba(65,149,222,.30); }
.una-leave .btn-ghost{ background:transparent; color:var(--navy); border-color:rgba(0,31,95,.18); }
.una-leave .btn-ghost:hover{ background:rgba(0,31,95,.04); border-color:var(--navy); }
.una-leave .btn-lg{ padding:17px 40px; font-size:16px; }
/* Hero */
.una-leave .ul-hero{ position:relative; padding:80px 0 100px; background:radial-gradient(ellipse 80% 60% at 100% 0%,rgba(193,234,255,.4),transparent 70%),linear-gradient(180deg,#fff 0%,#fafcff 100%); overflow:hidden; min-height:600px; }
.una-leave .hero-inner{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
.una-leave .hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; background:var(--blue-light); border-radius:999px; color:var(--navy); font-weight:600; font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:22px; }
.una-leave .hero-eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); }
.una-leave .hero-h1{ font-size:64px; font-weight:800; color:var(--navy); line-height:1; letter-spacing:-.02em; margin-bottom:14px; font-family:var(--fp); }
.una-leave .hero-h1-accent{ color:var(--blue); }
.una-leave .hero-h2{ font-size:26px; font-weight:500; color:var(--grey); line-height:1.35; margin-bottom:22px; }
.una-leave .hero-checks{ display:flex; flex-wrap:wrap; gap:14px 24px; margin-bottom:22px; }
.una-leave .hero-checks li{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--navy); font-weight:500; }
.una-leave .check{ width:20px; height:20px; border-radius:50%; background:var(--blue); flex-shrink:0; position:relative; }
.una-leave .check::after{ content:''; position:absolute; left:6px; top:4px; width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); }
.una-leave .hero-desc{ font-size:16px; color:var(--grey); line-height:1.7; margin-bottom:30px; max-width:520px; }
.una-leave .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.una-leave .hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.una-leave .hero-deco{ position:absolute; border-radius:50%; z-index:0; }
.una-leave .hero-deco-1{ width:280px; height:280px; background:radial-gradient(circle,rgba(65,149,222,.12),transparent 60%); top:-40px; right:-30px; }
.una-leave .hero-deco-2{ width:200px; height:200px; background:radial-gradient(circle,rgba(0,31,95,.08),transparent 60%); bottom:-30px; left:-20px; }
.una-leave .hero-mock{ position:relative; z-index:2; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; width:100%; max-width:460px; }
.una-leave .hero-mock-tb{ background:linear-gradient(135deg,var(--navy) 0%,#0a3577 100%); color:#fff; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.una-leave .hero-mock-tb-brand{ font-weight:700; font-size:15px; }
.una-leave .hero-mock-tb-pill{ background:var(--blue); color:#fff; font-size:11px; font-weight:600; padding:3px 12px; border-radius:999px; letter-spacing:.5px; }
.una-leave .hero-mock-body{ padding:18px 20px 20px; }
.una-leave .hero-mock-balance{ background:linear-gradient(135deg,var(--blue-light) 0%,var(--blue-light-2) 100%); border:1px solid var(--blue-light-2); border-radius:8px; padding:14px 18px; margin-bottom:14px; }
.una-leave .hero-mock-lbl{ font-size:10.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--navy); opacity:.7; margin-bottom:3px; }
.una-leave .hero-mock-num{ font-size:38px; font-weight:800; color:var(--navy); line-height:1; margin-bottom:6px; font-family:var(--fp); }
.una-leave .hero-mock-num span{ font-size:14px; font-weight:500; color:var(--grey); margin-left:6px; }
.una-leave .hero-mock-meta{ font-size:12px; color:var(--grey); }
.una-leave .hero-mock-meta strong{ color:var(--navy); }
.una-leave .hero-mock-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13px; }
.una-leave .hero-mock-row:last-child{ border-bottom:none; }
.una-leave .tag-al,.una-leave .tag-cl,.una-leave .tag-sl{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:3px; flex-shrink:0; }
.una-leave .tag-al{ background:#dbeafe; color:#1e40af; } .una-leave .tag-cl{ background:#dcfce7; color:#166534; } .una-leave .tag-sl{ background:#fef9c3; color:#854d0e; }
.una-leave .hero-mock-name{ font-weight:600; color:var(--navy); flex-shrink:0; }
.una-leave .hero-mock-date{ color:var(--grey); flex:1; }
.una-leave .status-ok,.una-leave .status-pending{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px; }
.una-leave .status-ok{ background:#dcfce7; color:#166534; } .una-leave .status-pending{ background:#fef3c7; color:#92400e; }
/* Shared section bits */
.una-leave .section-eyebrow{ display:block; font-size:13px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--blue); margin-bottom:12px; text-align:center; }
.una-leave .section-h2{ font-size:36px; font-weight:700; color:var(--navy); text-align:center; margin-bottom:56px; line-height:1.25; }
/* Pains */
.una-leave .ul-pains{ background:var(--paper-2); }
.una-leave .pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.una-leave .pain-card{ background:#fff; border-radius:var(--radius); padding:36px 32px; box-shadow:var(--shadow-sm); border:1px solid var(--line-2); text-align:center; transition:transform .3s,box-shadow .3s; }
.una-leave .pain-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.una-leave .pain-ico{ font-size:44px; margin-bottom:18px; line-height:1; }
.una-leave .pain-card h3{ font-size:20px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.una-leave .pain-card p{ font-size:15px; color:var(--grey); line-height:1.65; }
/* Features */
.una-leave .ul-features{ background:#fff; }
.una-leave .feature{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:50px 0; }
.una-leave .feature:not(:last-child){ border-bottom:1px solid var(--line-2); }
.una-leave .feature-right .feature-text{ order:2; }
.una-leave .feature-right .feature-visual{ order:1; }
.una-leave .feature-num{ display:inline-block; font-family:var(--fp); font-size:14px; font-weight:800; letter-spacing:2px; color:var(--blue); background:var(--blue-light); padding:5px 14px; border-radius:6px; margin-bottom:18px; }
.una-leave .feature-text h3{ font-size:30px; font-weight:700; color:var(--navy); margin-bottom:16px; line-height:1.3; }
.una-leave .feature-text p{ font-size:16px; color:var(--grey); line-height:1.75; margin-bottom:22px; }
.una-leave .feature-list li{ position:relative; padding-left:22px; margin-bottom:10px; font-size:15px; color:var(--grey); }
.una-leave .feature-list li::before{ content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--grey-3); }
.una-leave .feature-visual{ display:flex; align-items:center; justify-content:center; }
/* Feature 1 — form mock */
.una-leave .mock-form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 26px; width:100%; max-width:380px; }
.una-leave .mock-form-head{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; color:var(--navy); margin-bottom:14px; }
.una-leave .mock-req{ color:#dc2626; font-size:12px; }
.una-leave .mock-types{ display:flex; gap:8px; margin-bottom:16px; }
.una-leave .mock-type{ flex:1; border:2px solid var(--line); border-radius:8px; text-align:center; padding:10px 6px; transition:all .2s; }
.una-leave .mock-type.sel{ border-color:var(--blue); background:var(--blue-light); }
.una-leave .mock-type .c{ font-size:16px; font-weight:700; }
.una-leave .mock-type .c-al{ color:#1e40af; } .una-leave .mock-type .c-cl{ color:#166534; } .una-leave .mock-type .c-sl{ color:#854d0e; }
.una-leave .mock-type .n{ font-size:10.5px; color:var(--grey); margin-top:2px; }
.una-leave .mock-result{ background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:12px 14px; font-size:12.5px; line-height:1.7; color:#7c2d12; }
.una-leave .mock-tag{ background:#fee2e2; color:#991b1b; padding:1px 6px; border-radius:3px; font-size:10.5px; font-weight:600; }
.una-leave .mock-result-ok{ margin-top:8px; padding-top:8px; border-top:1px solid #fed7aa; color:#166534; font-weight:600; }
/* Feature 2 — calendar mock */
.una-leave .mock-cal{ background:linear-gradient(135deg,var(--navy) 0%,#0a3577 100%); color:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; width:100%; max-width:380px; }
.una-leave .mock-cal-head{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; margin-bottom:14px; }
.una-leave .mock-cal-sync{ font-size:11px; color:rgba(255,255,255,.7); font-weight:500; }
.una-leave .mock-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:14px; }
.una-leave .ch{ font-size:10px; font-weight:600; text-align:center; color:rgba(255,255,255,.5); padding:4px 0; }
.una-leave .ch.we{ color:rgba(255,180,180,.6); }
.una-leave .cd{ font-size:12px; text-align:center; padding:7px 0; color:rgba(255,255,255,.85); border-radius:4px; }
.una-leave .cd.we{ color:rgba(255,180,180,.6); }
.una-leave .cd.dim{ opacity:.25; }
.una-leave .cd.today{ background:rgba(65,149,222,.4); color:#fff; font-weight:700; }
.una-leave .cd.range{ background:var(--blue); color:#fff; font-weight:700; }
.una-leave .cd.hol{ background:rgba(220,38,38,.25); color:#fff; font-weight:600; }
.una-leave .mock-cal-event{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:9px 12px; font-size:12px; color:#fff; }
.una-leave .event-dot{ width:8px; height:8px; background:var(--blue); border-radius:50%; flex-shrink:0; }
/* Feature 3 — leave types */
.una-leave .mock-types-grid{ display:grid; grid-template-columns:1fr; gap:12px; width:100%; max-width:380px; }
.una-leave .mock-leave-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px 22px; display:flex; align-items:center; gap:18px; }
.una-leave .leave-code{ width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; flex-shrink:0; }
.una-leave .al .leave-code{ background:#dbeafe; color:#1e40af; } .una-leave .cl .leave-code{ background:#dcfce7; color:#166534; } .una-leave .sl .leave-code{ background:#fef9c3; color:#854d0e; }
.una-leave .leave-name{ font-size:16px; font-weight:700; color:var(--navy); margin-bottom:3px; }
.una-leave .leave-detail{ font-size:12.5px; color:var(--grey); line-height:1.55; }
/* Feature 4 — admin table */
.una-leave .mock-admin{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 26px; width:100%; max-width:380px; }
.una-leave .mock-admin-head{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; color:var(--navy); border-bottom:2px solid var(--blue); padding-bottom:10px; margin-bottom:6px; }
.una-leave .mock-admin-tab{ font-size:11px; background:var(--blue-light); color:var(--navy); padding:3px 10px; border-radius:4px; font-weight:600; }
.una-leave .mock-admin-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:13px; }
.una-leave .mock-admin-row:last-child{ border-bottom:none; }
.una-leave .mock-admin-name{ font-weight:500; color:var(--navy); }
.una-leave .mock-admin-bal{ font-weight:700; font-family:var(--fp); }
.una-leave .mock-admin-bal.pos{ color:var(--blue); } .una-leave .mock-admin-bal.neg{ color:#dc2626; }
/* How it works */
.una-leave .ul-how{ background:var(--blue-light); }
.una-leave .how-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.una-leave .how-step{ background:#fff; border-radius:var(--radius); padding:32px 26px; text-align:center; position:relative; border:1px solid rgba(0,31,95,.06); transition:transform .3s,box-shadow .3s; }
.una-leave .how-step:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.una-leave .how-num{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--fp); font-weight:700; font-size:18px; margin-bottom:16px; }
.una-leave .how-step h3{ font-size:18px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.una-leave .how-step p{ font-size:14px; color:var(--grey); line-height:1.65; }
/* Benefits */
.una-leave .ul-benefits{ background:#fff; }
.una-leave .benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.una-leave .benefit-card{ position:relative; background:linear-gradient(135deg,var(--navy) 0%,#0a3577 100%); color:#fff; border-radius:var(--radius); padding:36px 32px; overflow:hidden; transition:transform .3s,box-shadow .3s; }
.una-leave .benefit-card.accent{ background:linear-gradient(135deg,var(--blue) 0%,#2680c8 100%); }
.una-leave .benefit-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.una-leave .benefit-card::before,.una-leave .benefit-card::after{ content:''; position:absolute; right:-30px; border-radius:50%; border:1px solid rgba(255,255,255,.15); }
.una-leave .benefit-card::before{ top:-30px; width:100px; height:100px; }
.una-leave .benefit-card::after{ top:-10px; right:-10px; width:60px; height:60px; border-color:rgba(255,255,255,.25); }
.una-leave .benefit-num{ position:absolute; top:18px; right:22px; font-family:var(--fp); font-size:38px; font-weight:800; color:rgba(255,255,255,.15); z-index:2; }
.una-leave .benefit-ico{ width:52px; height:52px; border-radius:12px; background:rgba(255,255,255,.15); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:18px; position:relative; z-index:2; }
.una-leave .benefit-card h3{ font-size:22px; font-weight:700; color:#fff; margin-bottom:12px; position:relative; z-index:2; line-height:1.35; }
.una-leave .benefit-card p{ font-size:14.5px; color:rgba(255,255,255,.85); line-height:1.7; position:relative; z-index:2; }
/* CTA */
.una-leave .ul-cta{ background:linear-gradient(135deg,var(--blue-light) 0%,var(--blue-light-2) 100%); position:relative; overflow:hidden; }
.una-leave .ul-cta::before{ content:''; position:absolute; right:-100px; top:-100px; width:400px; height:400px; background:radial-gradient(circle,rgba(65,149,222,.15),transparent 60%); border-radius:50%; }
.una-leave .cta-inner{ text-align:center; position:relative; z-index:2; }
.una-leave .cta-h2{ font-size:42px; font-weight:800; color:var(--navy); margin-bottom:14px; line-height:1.2; }
.una-leave .cta-sub{ font-size:18px; color:var(--grey); max-width:560px; margin:0 auto 32px; line-height:1.6; }
.una-leave .cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:28px; }
.una-leave .cta-contact{ display:inline-flex; align-items:center; gap:18px; font-size:14px; color:var(--grey); }
.una-leave .cta-sep{ width:4px; height:4px; border-radius:50%; background:var(--grey-3); }
/* Reveal (shared site.js observer adds .in) */
.una-leave .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.una-leave .reveal.in{ opacity:1; transform:translateY(0); }
@media (max-width:980px){
.una-leave .ul-hero{ padding:60px 0 70px; }
.una-leave .hero-inner{ grid-template-columns:1fr; gap:40px; }
.una-leave .hero-visual{ order:-1; }
.una-leave .hero-h1{ font-size:50px; }
.una-leave .hero-h2{ font-size:22px; }
.una-leave .section-h2{ font-size:28px; margin-bottom:40px; }
.una-leave .feature{ grid-template-columns:1fr; gap:32px; padding:36px 0; }
.una-leave .feature-right .feature-text,.una-leave .feature-right .feature-visual{ order:0; }
.una-leave .feature-text h3{ font-size:24px; }
.una-leave .pain-grid{ grid-template-columns:1fr; }
.una-leave .how-grid{ grid-template-columns:repeat(2,1fr); }
.una-leave .benefit-grid{ grid-template-columns:1fr; }
.una-leave .cta-h2{ font-size:30px; }
.una-leave section,.una-leave .ul-hero,.una-leave .ul-pains,.una-leave .ul-features,.una-leave .ul-how,.una-leave .ul-benefits,.una-leave .ul-cta{ padding:60px 0; }
}
@media (max-width:560px){
.una-leave .container{ padding:0 18px; }
.una-leave .hero-h1{ font-size:40px; }
.una-leave .hero-checks{ gap:10px 16px; }
.una-leave .how-grid{ grid-template-columns:1fr; }
.una-leave .cta-h2{ font-size:26px; }
.una-leave .btn{ padding:12px 24px; font-size:14px; }
.una-leave .btn-lg{ padding:14px 28px; }
}