/* A Smiling Day Counselling – overrides (loaded after main.css) Palette: red #96423c · dark cerulean #134a69 · ink #141f2c */ :root { --asd-red:#96423c; --asd-blue:#134a69; --asd-ink:#141f2c; --asd-rose:#f0b9b9; } /* Header: solid blue bar, same before and after scrolling */ #xb-header-area { top: 0; } #xb-header-area .xb-header, #xb-header-area .stricked-menu { background: var(--asd-blue); } #xb-header-area .header__wrap, #xb-header-area .stricked-menu .header__wrap { margin: 0 40px; padding: 10px 0; border-radius: 0; background: transparent; border: 0; } #xb-header-area .header-right-inner { background: transparent; padding: 0; border-radius: 0; } #xb-header-area .main-menu ul li a, #xb-header-area .stricked-menu .main-menu ul li a { color: #fff; } #xb-header-area .main-menu ul li a:hover, #xb-header-area .main-menu ul li.active > a { color: var(--asd-rose); } #xb-header-area .xb-nav-mobile, #xb-header-area .stricked-menu .xb-nav-mobile { color: #fff; border: 2px solid #fff; } #xb-header-area .xb-header-logo img, #xb-header-area .stricked-menu .xb-header-logo img:nth-child(1) { display: block; height: 76px; width: auto; } #xb-header-area .header-btn .thm-btn, #xb-header-area .stricked-menu .header-btn .thm-btn { background: var(--asd-red); color: #fff; min-width: 0; } #xb-header-area .header-btn .thm-btn:hover, #xb-header-area .stricked-menu .header-btn .thm-btn:hover { background: #fff; color: var(--asd-blue); } .stricked-menu { box-shadow: 0 4px 24px rgba(0,0,0,.18); } @media (max-width: 1199px) { #xb-header-area .header__wrap, #xb-header-area .stricked-menu .header__wrap { margin: 0 20px; } } @media (max-width: 767px) { #xb-header-area .header__wrap, #xb-header-area .stricked-menu .header__wrap { margin: 0 15px; padding: 8px 0; } #xb-header-area .xb-header-logo img { height: 58px; } } /* hero sits below the bar now */ .hero-style-three { padding-top: 200px; } /* Language switch */ .lang-switch { display: flex; align-items: center; gap: 8px; margin-left: 28px; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.5); } .lang-switch a { color: #fff; opacity: .8; transition: opacity .2s; } .lang-switch a:hover { opacity: 1; } .lang-switch .is-current { color: #fff; border-bottom: 2px solid var(--asd-rose); padding-bottom: 1px; } .lang-switch--mobile { margin: 30px 0 0; color: rgba(20,31,44,.4); font-size: 17px; } .lang-switch--mobile a { color: var(--asd-ink); } .lang-switch--mobile .is-current { color: var(--asd-ink); border-bottom-color: var(--asd-red); } @media (max-width: 991px) { .lang-switch:not(.lang-switch--mobile) { display: none; } } /* Logos elsewhere */ .xb-logo-mobile img { height: 88px; width: auto; } .counselling-footer-logo { max-width: 230px; } .loader .loader-icon { width: 140px; } .loader .loader-icon img { width: 120px; } /* Simplified Mandarin typography */ html[lang="zh-CN"] { --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; --font-heading: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; --font-family: var(--font-body); } html[lang="zh-CN"] body { font-family: var(--font-body); line-height: 1.8; } html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4, html[lang="zh-CN"] h5, html[lang="zh-CN"] h6, html[lang="zh-CN"] .xb-item--title { font-family: var(--font-heading); letter-spacing: 0; font-weight: 700; line-height: 1.35; } html[lang="zh-CN"] .main-menu ul li a, html[lang="zh-CN"] .thm-btn { letter-spacing: .02em; } /* ===== Soft page background (cream, from the logo) ===== */ :root { --color-body: #f7f2ea; --asd-cream: #f7f2ea; } html, body { background: var(--asd-cream); } .gradient-bg-4 { background: linear-gradient(357deg, #eef3f6 0%, #e4edf3 100%); } .gradient-bg-5 { background: linear-gradient(180deg, #f1e3df 0%, #f8f0ed 100%); } /* ===== Hero ===== */ .asd-kicker { display: block; font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--asd-rose); margin-bottom: 22px; } .counselling-hero-content .xb-item--title { font-size: clamp(34px, 3.6vw, 58px); line-height: 1.18; } .counselling-hero-content .xb-item--content { font-size: 21px; line-height: 1.6; max-width: 640px; } html[lang="zh-CN"] .counselling-hero-content .xb-item--title { font-size: clamp(30px, 3vw, 46px); line-height: 1.4; } .counselling-hero-cta .xb-item--content { max-width: 260px; } .hero-brand { background: var(--asd-blue); display: flex; align-items: center; justify-content: center; } .hero-brand img { width: min(58%, 520px); height: auto; } @media (max-width: 1199px) { .hero-brand img { width: min(60%, 320px); } } /* ===== Content sections ===== */ .asd-section { padding: 90px 50px; } .asd-section--tint { background: linear-gradient(180deg, #f1e3df 0%, #f8f0ed 100%); border-radius: 20px; margin: 0 20px; } .asd-wrap { max-width: 1120px; margin: 0 auto; } .asd-wrap--narrow { max-width: 820px; } .asd-title { font-family: var(--font-heading); color: var(--asd-ink); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; margin-bottom: 28px; } .asd-lead { font-family: var(--font-heading); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.4; color: var(--asd-blue); } .asd-prose p { font-size: 19px; line-height: 1.8; color: var(--asd-ink); margin-bottom: 1.15em; } .asd-prose a { color: var(--asd-red); text-decoration: underline; } html[lang="zh-CN"] .asd-prose p { font-size: 18px; line-height: 2; } .asd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .asd-split--wide-right { grid-template-columns: 5fr 7fr; } @media (max-width: 991px) { .asd-section { padding: 64px 20px; } .asd-split, .asd-split--wide-right { grid-template-columns: 1fr; gap: 32px; } .asd-section--tint { margin: 0 10px; } } .asd-btnrow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .asd-quote { border-left: 4px solid var(--asd-red); padding-left: 28px; } .asd-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; } .asd-fact { background: #fff; border-radius: 20px; padding: 34px 30px; border: 1px solid rgba(19,74,105,.12); } .asd-fact strong { display: block; font-family: var(--font-heading); font-size: 26px; line-height: 1.25; color: var(--asd-blue); margin-bottom: 10px; } .asd-fact span { font-size: 17px; color: rgba(20,31,44,.78); line-height: 1.55; } @media (max-width: 991px) { .asd-facts { grid-template-columns: 1fr; } } .asd-card { background: #fff; border-radius: 20px; padding: 36px 34px; border: 1px solid rgba(19,74,105,.12); } .asd-card h3 { font-family: var(--font-heading); font-size: 26px; color: var(--asd-blue); margin-bottom: 18px; } .asd-card ul { list-style: none; margin: 0; padding: 0; } .asd-card li { padding: 12px 0; border-top: 1px solid rgba(19,74,105,.12); font-size: 18px; line-height: 1.5; } .asd-card li:first-child { border-top: 0; padding-top: 0; } .asd-card li b { color: var(--asd-red); display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; } .asd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .asd-step { background: #fff; border-radius: 20px; padding: 32px 28px; border: 1px solid rgba(19,74,105,.12); } .asd-step .n { width: 44px; height: 44px; border-radius: 50%; background: var(--asd-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 18px; } .asd-step p { font-size: 17px; line-height: 1.7; margin: 0; } @media (max-width: 991px) { .asd-steps { grid-template-columns: 1fr; } } .asd-band { background: var(--asd-blue); border-radius: 20px; margin: 0 20px 40px; padding: 80px 30px; text-align: center; color: #fff; } .asd-band h2 { font-family: var(--font-heading); color: #fff; font-size: clamp(28px, 3vw, 42px); line-height: 1.3; max-width: 820px; margin: 0 auto 18px; } .asd-band p { font-size: 19px; max-width: 700px; margin: 0 auto 30px; color: rgba(255,255,255,.88); } @media (max-width: 767px) { .asd-band { margin: 0 10px 30px; padding: 56px 20px; } } .asd-contact-list { list-style: none; margin: 0 0 8px; padding: 0; } .asd-contact-list li { padding: 14px 0; border-top: 1px solid rgba(19,74,105,.12); font-size: 19px; line-height: 1.5; } .asd-contact-list li:first-child { border-top: 0; } .asd-contact-list b { display: block; color: var(--asd-red); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; } .asd-contact-list small { display: block; color: rgba(20,31,44,.65); font-size: 15px; } .asd-contact-list a { color: var(--asd-ink); } .asd-map iframe { width: 100%; height: 340px; border: 0; border-radius: 20px; margin-top: 28px; } .asd-form label { display: block; font-weight: 600; margin: 18px 0 6px; font-size: 16px; } .asd-form input[type=text], .asd-form input[type=email], .asd-form input[type=tel], .asd-form textarea { width: 100%; border: 1px solid rgba(19,74,105,.25); border-radius: 12px; padding: 14px 16px; font-size: 17px; background: #fff; font-family: inherit; } .asd-form textarea { min-height: 150px; } .asd-form .asd-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 15px; line-height: 1.5; } .asd-form .asd-check input { margin-top: 4px; } .asd-form button { margin-top: 26px; } .asd-form .asd-hp { position: absolute; left: -9999px; } .asd-status { margin-top: 16px; font-weight: 600; } .asd-empty { text-align: center; padding: 40px 0 20px; } .breadcrumb-title { font-size: clamp(32px, 4.4vw, 60px); } html[lang="zh-CN"] .breadcrumb-title { line-height: 1.35; } .footer-ids { font-size: 15px; opacity: .85; line-height: 1.7; text-align: center; margin: 22px 0 6px; } /* ===== Fixes after first render ===== */ #xb-header-area .header-btn .thm-btn, #xb-header-area .stricked-menu .header-btn .thm-btn { min-width: 236px; } @media (max-width: 1199px) { #xb-header-area .header-btn .thm-btn { min-width: 200px; } } .asd-prose a.thm-btn, .asd-prose a.thm-btn:hover { text-decoration: none; } .asd-prose a.thm-btn--primary { color: #fff; } .asd-prose a.thm-btn--primary:hover { color: #fff; } .counselling-hero-content .xb-item--content { text-transform: none; } .hero-style-three { min-height: 760px; padding-bottom: 60px; } @media (max-width: 1199px) { .hero-style-three { min-height: 0; } } .footer-ids, .footer-ids * { color: #fff; } .site-footer .footer-nav-links a, .site-footer .footer-nav-links li { color: #fff; } html[lang="zh-CN"] { --font-heading: "JazminAlt", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; } html[lang="zh-CN"] .counselling-hero-content .xb-item--title { font-family: "Noto Serif SC","Songti SC",serif; } /* sticky bar keeps the light logo (template hides image 1 there) */ #xb-header-area .stricked-menu .xb-header-logo img:nth-child(1) { opacity: 1 !important; display: block !important; } .counselling-hero-cta { max-width: 680px; } .counselling-hero-cta .anim-btn, .counselling-hero-cta .button-text { white-space: nowrap; } /* old-site salvage: portrait, ACA logo */ .asd-portrait { display: block; width: 180px; height: auto; border-radius: 50%; object-fit: cover; aspect-ratio: 1; margin: 0 auto 24px; } .footer-aca { display: inline-block; background: #fff; border-radius: 10px; padding: 8px 14px; margin-bottom: 12px; } .footer-aca img { height: 38px; width: auto; display: block; } /* ===================================================================== Round 3: Source Serif 4 Medium, header room, compact titles, About, footer, contact ===================================================================== */ @font-face { font-family: 'Source Serif 4'; src: url('../fonts/SourceSerif4-Medium.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --font-heading: 'Source Serif 4', 'Noto Serif SC', Georgia, serif; } html[lang="zh-CN"] { --font-heading: 'Source Serif 4', 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif; } html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4, html[lang="zh-CN"] h5, html[lang="zh-CN"] h6, html[lang="zh-CN"] .xb-item--title { font-family: var(--font-heading); font-weight: 500; } html[lang="zh-CN"] .counselling-hero-content .xb-item--title { font-family: var(--font-heading); } .counselling-hero-content .xb-item--title { font-size: clamp(32px, 3.3vw, 52px); line-height: 1.2; } /* header: the bar sits in the page flow, with more breathing room */ #xb-header-area.header-transparent { position: relative; } #xb-header-area .header__wrap { margin: 0 clamp(24px, 4.4vw, 72px); padding: 18px 0; } #xb-header-area .stricked-menu .header__wrap { margin: 0 clamp(24px, 4.4vw, 72px); padding: 10px 0; } #xb-header-area .stricked-menu .xb-header-logo img:nth-child(1) { height: 58px; } #xb-header-area .header-btn { margin-left: 56px; } #xb-header-area .lang-switch { margin-left: 40px; } #xb-header-area .header-btn .thm-btn, #xb-header-area .stricked-menu .header-btn .thm-btn { min-width: 224px; padding: 12px 24px; font-size: 17px; } @media (max-width: 1199px) { #xb-header-area .header__wrap { margin: 0 20px; padding: 10px 0; } #xb-header-area .stricked-menu .header__wrap { margin: 0 20px; } #xb-header-area .header-btn { margin-left: 20px; } } @media (max-width: 767px) { #xb-header-area .header__wrap, #xb-header-area .stricked-menu .header__wrap { margin: 0 15px; padding: 8px 0; } } /* home hero: shorter, and no logo panel unless it sits beside the text */ .hero-style-three { min-height: 0; padding-top: 72px; padding-bottom: 72px; } @media (max-width: 1199px) { .hero-brand { display: none !important; } .hero-style-three { padding-top: 40px; padding-bottom: 36px; } } .asd-fact strong { font-size: 22px; line-height: 1.3; } .asd-fact span { display: block; } .asd-fact span::before { content: '→ '; color: var(--asd-red); font-weight: 700; } /* inner-page title band */ .page-title--compact { min-height: 0; display: block; padding: 46px 20px 42px; border-radius: 0 0 20px 20px; text-align: center; } .page-title--compact .breadcrumb-title { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.2; } html[lang="zh-CN"] .page-title--compact .breadcrumb-title { line-height: 1.35; } @media (max-width: 767px) { .page-title--compact { padding: 30px 16px 28px; border-radius: 0 0 16px 16px; } } /* about */ .asd-about { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; } .asd-about .asd-portrait { width: 200px; margin: 0; } @media (max-width: 767px) { .asd-about { grid-template-columns: 1fr; gap: 22px; } .asd-about .asd-portrait { width: 120px; margin: 0 auto; } } .asd-section--creds { padding-top: 10px; padding-bottom: 70px; } .asd-small-title { font-family: var(--font-heading); font-size: 22px; color: var(--asd-blue); margin-bottom: 18px; } .asd-creds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .asd-creds li { background: #fff; border: 1px solid rgba(19,74,105,.12); border-radius: 14px; padding: 18px 20px; font-size: 16px; line-height: 1.5; } .asd-creds b { display: block; color: var(--asd-red); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; } @media (max-width: 991px) { .asd-creds { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .asd-creds { grid-template-columns: 1fr; } } /* footer */ .footer-compact { padding-top: 56px !important; } .site-footer .counselling-footer-bottom { margin-top: 24px; } /* contact: details, form, then map; nothing may be wider than the screen */ .asd-split > * { min-width: 0; } .asd-split--contact { grid-template-columns: 1fr 1fr; grid-template-areas: "details form" "map form"; grid-template-rows: auto 1fr; gap: 0 64px; } .asd-c-details { grid-area: details; } .asd-c-form { grid-area: form; align-self: start; } .asd-c-map { grid-area: map; } .asd-c-map iframe { margin-top: 28px; } .asd-form button.thm-btn { width: 100%; min-width: 0; } @media (max-width: 991px) { .asd-split--contact { grid-template-columns: 1fr; grid-template-areas: "details" "form" "map"; grid-template-rows: auto; gap: 32px 0; } .asd-c-map iframe { margin-top: 0; height: 280px; } } @media (max-width: 575px) { .asd-card { padding: 26px 20px; } .asd-section { padding: 48px 16px; } } /* hero text aligns with header logo margin */ .hero-style-three .counselling-hero-content { padding-left: clamp(24px, 4.4vw, 72px); padding-right: 32px; box-sizing: border-box; } @media (max-width: 1199px) { .hero-style-three .counselling-hero-content { padding-left: 16px; padding-right: 16px; } } .hero-style-three .counselling-hero-cta { margin-left: clamp(24px, 4.4vw, 72px); } @media (max-width: 1199px) { .hero-style-three .counselling-hero-cta { margin-left: 16px; margin-right: 16px; } } @media (min-width: 1200px) { .hero-style-three { padding-top: 48px; padding-bottom: 48px; } } /* ---- Round 4: dropdown, template sections, call-back block, FAQ ---- */ #xb-header-area .main-menu .submenu { min-width: 340px; border-radius: 14px; padding: 10px 0; background: #fff; box-shadow: 0 14px 40px rgba(20,31,44,.18); } #xb-header-area .main-menu .submenu li a { color: var(--asd-ink); padding: 12px 24px; white-space: normal; } #xb-header-area .main-menu .submenu li a:hover { color: var(--asd-red); } .xb-header-nav .submenu a { font-size: 17px; } .asd-service { margin: 30px 16px 0; padding: 80px 0 90px; } .asd-service .xb-item--title { font-size: clamp(30px, 3.4vw, 48px); } .asd-service .service-item .xb-item--title { font-size: 26px; line-height: 1.25; } .asd-service .service-item .xb-item--content { font-size: 17px; } @media (max-width: 767px) { .asd-service { padding: 48px 0 56px; margin: 20px 8px 0; } .asd-service .service-item { padding: 28px 22px; } } .footer-callback { padding: 10px 0 70px; max-width: 1100px; margin: 0 auto; } .footer-callback .footer-subscribe-title { font-size: clamp(24px, 2.6vw, 34px); font-family: var(--font-heading); font-weight: 500; text-transform: none; } .footer-callback .footer-subscribe-form .xb-input-field input { height: 64px; font-size: 18px; } .footer-callback .footer-subscribe-form .xb-input-field label { font-size: 18px; } .footer-callback .footer-title { font-size: clamp(30px, 4vw, 56px); text-align: center; margin-top: 48px; } .asd-status--footer { color: #fff; margin: 14px 0 0; min-height: 1.4em; } @media (max-width: 767px) { .footer-callback { padding-bottom: 40px; } .footer-callback .footer-subscribe-form .thm-btn { width: 100%; min-width: 0; } } .asd-faq .accordion_box .acc-btn { font-size: 21px; } .asd-faq .accordion_box .content { font-size: 17px; line-height: 1.7; } @media (max-width: 767px) { .asd-faq .accordion_box .acc-btn { font-size: 18px; } } .asd-wrap--narrow .sec-title { margin-bottom: 24px; } .asd-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .footer-callback .footer-subscribe-form .thm-btn { min-width: 270px; white-space: nowrap; } .footer-callback .footer-subscribe-form .thm-btn span { margin-left: 0; } .footer-callback .footer-subscribe-form { align-items: stretch; } .asd-faq .accordion_box .acc_body .content { max-width: none; padding-right: 40px; } .xb-header-mobile-search { display: none !important; } #xb-header-area .main-menu .submenu { min-width: 400px; } @media (min-width: 1200px) and (max-width: 1360px) { .main-menu > ul > li { margin-left: 0 !important; margin-right: 0 !important; } .main-menu > ul > li > a { padding-left: 14px !important; padding-right: 14px !important; } .header-btn { margin-left: 24px !important; } .lang-switch { margin-left: 16px !important; } } /* ===== Photos (Oct 2026) ===== */ .hero-photo { background: var(--asd-blue); overflow: hidden; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; } @media (max-width: 1199px) { .hero-photo { display: block !important; height: 420px; margin-top: 24px; border-radius: 20px; } } @media (max-width: 767px) { .hero-photo { height: 360px; } } .asd-photo { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(19,74,105,.12); } .asd-photo--mt { margin-top: 24px; } .asd-photo--contact { max-width: 420px; aspect-ratio: 4/3; object-fit: cover; object-position: 50% 30%; margin-bottom: 28px; } .asd-about { grid-template-columns: 340px 1fr; } .asd-about-photos { display: grid; gap: 18px; } .asd-photo--tall { aspect-ratio: 3/4; object-fit: cover; object-position: 50% 15%; } @media (max-width: 767px) { .asd-about { grid-template-columns: 1fr; } .asd-about-photos { grid-template-columns: 1fr 1fr; gap: 12px; } .asd-about-photos .asd-photo { aspect-ratio: 3/4; object-fit: cover; } } .asd-space { padding-top: 70px; } .asd-space .sec-title p { max-width: 640px; margin: 0 auto; } .asd-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .asd-gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; display: block; } @media (max-width: 991px) { .asd-gallery { grid-template-columns: repeat(2, 1fr); } } /* ===== Hero photo: caption + compact arch on phones (template mh-about-image shape) ===== */ .hero-photo { position: absolute; } .hero-photo-img { position: absolute; inset: 0; } .hero-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 40px 34px; background: linear-gradient(180deg, rgba(19,74,105,0) 0%, rgba(19,74,105,.85) 100%); color: #fff; } .hero-photo-cap strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 30px; line-height: 1.2; } .hero-photo-cap span { display: block; font-size: 15px; opacity: .9; margin-top: 4px; } @media (max-width: 1199px) { .hero-photo { position: relative !important; display: flex !important; align-items: center; gap: 22px; height: auto !important; width: auto !important; background: none; margin-top: 26px; border-radius: 0; overflow: visible; } .hero-photo-img { position: relative; inset: auto; flex: 0 0 132px; height: 172px; overflow: hidden; border-radius: 50px 350px 225px 225px; box-shadow: 0 10px 26px rgba(0,0,0,.18); border: 3px solid rgba(255,255,255,.85); } .hero-photo-img img { object-position: 50% 12%; } .hero-photo-cap { position: static; padding: 0; background: none; } .hero-photo-cap strong { font-size: 24px; } .hero-photo-cap span { font-size: 14px; } } @media (max-width: 767px) { .hero-photo { height: auto !important; } } .hero-photo-img picture { display: block; width: 100%; height: 100%; } .hero-photo-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; } @media (max-width: 1199px) { .hero-photo-img img { object-position: 50% 20%; } } @media (max-width: 1199px) { .hero-photo { padding-left: 16px; } } /* ===== Hero CTA: single pill button (template index hero style) ===== */ .asd-hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 38px; } .asd-hero-cta .thm-btn span { white-space: nowrap; } .asd-hero-phone { color: #fff; opacity: .85; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.4); white-space: nowrap; } .asd-hero-phone:hover { color: #fff; opacity: 1; text-decoration-color: #fff; } @media (max-width: 767px) { .asd-hero-cta { margin-top: 26px; } } .hero-style-three .asd-hero-cta { padding-left: clamp(24px, 4.4vw, 72px); } @media (max-width: 1199px) { .hero-style-three .asd-hero-cta { padding-left: 16px; } } @media (max-width: 767px) { .hero-style-three .asd-hero-cta { gap: 16px; } .asd-hero-cta .thm-btn { padding-left: 34px; padding-right: 34px; } } .asd-hero-cta { flex-direction: column; align-items: flex-start; gap: 18px; } .asd-hero-cred { display: flex; align-items: center; gap: 10px; margin: 0; color: rgba(255,255,255,.88); font-size: 15px; letter-spacing: .02em; } .asd-hero-cred img { width: 18px; height: auto; opacity: .9; } .asd-hero-cta { margin-top: 22px; } /* ===== Credentials as leaf-framed photos (template mh-about-image shapes) ===== */ .asd-creds--photos { gap: 22px; } .asd-creds--photos li { background: none; border: 0; padding: 0; text-align: center; } .asd-leaf { overflow: hidden; aspect-ratio: 3 / 4.4; border-radius: 30px 220px 150px 150px; box-shadow: 0 12px 28px rgba(19,74,105,.14); margin-bottom: 16px; } .asd-creds--photos li:nth-child(3) .asd-leaf, .asd-creds--photos li:nth-child(4) .asd-leaf { border-radius: 220px 30px 150px 150px; } .asd-leaf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; } .asd-leaf-text { padding: 0 6px; font-size: 16px; line-height: 1.5; } @media (max-width: 991px) { .asd-creds--photos { gap: 26px 16px; } .asd-leaf { border-radius: 24px 160px 110px 110px; } .asd-creds--photos li:nth-child(3) .asd-leaf, .asd-creds--photos li:nth-child(4) .asd-leaf { border-radius: 160px 24px 110px 110px; } } .asd-photo--side { margin-top: 34px; } @media (max-width: 767px) { .asd-creds--photos { grid-template-columns: 1fr 1fr; gap: 22px 12px; } .asd-leaf { aspect-ratio: 3/4; border-radius: 18px 120px 80px 80px; } .asd-creds--photos li:nth-child(3) .asd-leaf, .asd-creds--photos li:nth-child(4) .asd-leaf { border-radius: 120px 18px 80px 80px; } .asd-leaf-text { font-size: 14px; padding: 0; } } .asd-photo--contact { object-position: 50% 55%; } .asd-hero-link { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--font-heading); font-size: 22px; line-height: 1.3; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,.55); } .asd-hero-link span { text-decoration: none; transition: transform .2s; } .asd-hero-link:hover { color: #fff; text-decoration-color: #fff; } .asd-hero-link:hover span { transform: translateX(4px); } @media (max-width: 767px) { .asd-hero-link { font-size: 20px; } } /* ===== Gentle motion ===== */ @keyframes asd-kenburns { from { transform: scale(1.0) translate(0,0); } to { transform: scale(1.07) translate(-1.2%, -1%); } } @keyframes asd-drift { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(14px,-10px) rotate(4deg); } } @keyframes asd-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } } @keyframes asd-twinkle { 0%,100% { opacity: .9; transform: scale(1) rotate(0deg); } 50% { opacity: .45; transform: scale(.8) rotate(20deg); } } @media (min-width: 1200px) { .hero-photo-img img { animation: asd-kenburns 22s ease-in-out infinite alternate; transform-origin: 60% 30%; } } .counselling-hero-shape img { animation: asd-drift 16s ease-in-out infinite; } @media (max-width: 1199px) { .hero-photo-img { animation: asd-breathe 7s ease-in-out infinite; } } .asd-hero-cred img { animation: asd-twinkle 3.5s ease-in-out infinite; } .asd-leaf img, .asd-gallery img { transition: transform .8s ease; } .asd-leaf:hover img { transform: scale(1.05); } .asd-gallery img:hover { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .hero-photo-img img, .counselling-hero-shape img, .hero-photo-img, .asd-hero-cred img { animation: none !important; } } /* ===== Logo draw-in intro ===== */ #preloader { background: var(--asd-cream); } #preloader .loader-container { display: none; } .asd-intro-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(260px, 60vw); } .asd-intro-logo img { width: 100%; height: auto; display: block; } html.asd-intro-seen #preloader { display: none !important; } /* ===================================================================== Polish: script accents, diamond rules, typography, light footer ===================================================================== */ :root { --asd-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cpath d='M0 6H68M92 6H160' stroke='%2396423c' stroke-width='1' opacity='.55'/%3E%3Cpath d='M80 1.5L84.5 6 80 10.5 75.5 6Z' fill='none' stroke='%2396423c' stroke-width='1.2'/%3E%3Ccircle cx='71' cy='6' r='1.3' fill='%2396423c'/%3E%3Ccircle cx='89' cy='6' r='1.3' fill='%2396423c'/%3E%3C/svg%3E"); } /* 1. Script accent replaces the grey pill (English); Mandarin gets small red caps */ .sec-title .xb-item--subtitle { background: none !important; padding: 0 !important; border-radius: 0; } html[lang="zh-CN"] .sec-title .xb-item--subtitle { font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .2em; margin-bottom: 12px; } /* 3. Diamond rules from the logo */ .sec-title .xb-item--title::after, .asd-wrap > .asd-title[style*="center"]::after, .asd-section--tint .asd-title::after, .asd-band h2::after { content: ""; display: block; width: 150px; height: 12px; margin: 16px auto 0; background: var(--asd-diamond) center / contain no-repeat; } .asd-band h2::after { filter: brightness(0) invert(1); opacity: .7; } .page-title--compact .breadcrumb-title::after { content: ""; display: block; width: 130px; height: 11px; margin: 12px auto 0; background: var(--asd-diamond) center / contain no-repeat; filter: brightness(0) invert(1); opacity: .65; } .asd-section-rule { width: 220px; height: 14px; margin: 10px auto; background: var(--asd-diamond) center / contain no-repeat; } .asd-diamond-rule { display: block; width: 170px; height: 12px; margin: 50px auto 0; background: var(--asd-diamond) center / contain no-repeat; } /* 5. Typography polish */ h1, h2, h3, .asd-lead, .breadcrumb-title, .xb-item--title { text-wrap: balance; } p, li, .asd-prose { text-wrap: pretty; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; font-variant-ligatures: common-ligatures; } .asd-prose p { line-height: 1.75; } .asd-quote { hanging-punctuation: first; } .asd-prose p + p { margin-top: 1.1em; } /* 6. Light footer (remove "asd-footer-light" from the