Back to Home

Style guide

01. Site Container & Layout Specs Max 1440px
CSS Variables: –container-width: 1440px –container-padding-desktop: 50px –container-padding-mobile: 20px –container-padding-x (50px / 20px) Class: .container / .site-container
← Left Padding: 50px (Mobile 20px) Max Content: 1440px Right Padding: 50px (Mobile 20px) →
✓ Automatically applied to: .container, .site-container, .pmhk-container, .site-header, .site-main, .site-footer, .alignwide, .wide-max-width.
02. Color Palette 7 Colors
Black
HEX: #272727
VAR: –color-black
CLASS: .text-black
Orange
HEX: #FF8700
VAR: –color-orange
CLASS: .text-orange
White
HEX: #FFFFFF
VAR: –color-white
CLASS: .text-white
Cream
HEX: #FAF5EF
VAR: –color-cream
CLASS: .text-cream
Blue
HEX: #234677
VAR: –color-blue
CLASS: .text-blue
Blue Tint (25%)
HEX: #3975FF40
VAR: –color-blue-tint
CLASS: .text-blue-tint
Light Blue
HEX: #EFF3F7
VAR: –color-light-blue
CLASS: var(–color-light-blue)
03. Typography System & CSS Variables (Figma Specs) Fluid 390px – 1440px
H1 · Heading 1
Gambarino · 400 Fluid: 40/50 → 70/84 Uppercase Center .typo-h1
Copy Variables: –font-size-h1 –line-height-h1

PMHK KLN EXHIBITION

H2 · Heading 2
Gambarino · 400 Fluid: 30/40 → 60/75 .typo-h2
Copy Variables: –font-size-h2 –line-height-h2

Art & Cultural Heritage Experience

H3 · Heading 3
Gambarino · 400 Static: 42/52 .typo-h3
Copy Variables: –font-size-h3 –line-height-h3

Preserving History Through Modern Discovery

H4 · Heading 4
Gambarino · 400 Static: 27/37 Center .typo-h4
Copy Variables: –font-size-h4 –line-height-h4

Special Collections & Galleries

Lead in 1
Gambarino · 400 Static: 22/30 Center .typo-lead-in-1
Copy Variables: –font-size-lead-in-1 –line-height-lead-in-1
Welcome to the Kowloon Cultural Heritage Portal
Lead in 2
Gambarino · 400 Fluid: 16/26 → 19/26 Uppercase Mobile Center .typo-lead-in-2
Copy Variables: –font-size-lead-in-2 –line-height-lead-in-2
EXPLORE OUR EXCLUSIVE EXHIBITIONS
Body – R (Regular)
Red Hat Display · 400 Fluid: 16/26 → 17/28 Mobile Center .typo-body-r
Copy Variables: –font-size-body-r –line-height-body-r

This is the standard body text used across all articles and editorial descriptions. It is optimized with fluid scaling between 16px on mobile (390px) up to 17px on desktop (1440px), maintaining comfortable readability and typographic harmony with the Traditional Chinese font pairing.

Body – M (Medium)
Red Hat Display · 500 Fluid: 16/26 → 17/28 .typo-body-m
Copy Variables: –font-size-body-m –line-height-body-m

This is the medium-weight body text used for emphasized descriptions, lead paragraphs, card highlights, and key informational summaries.

Button Text
Red Hat Display · 500 Fluid: 16/25 → 17/25 .typo-button
Copy Variables: –font-size-button –line-height-button
Book Tickets Register Event Learn More →
Remark (Footnote / Caption)
Red Hat Display · 400 Static: 13/20 .typo-remark
Copy Variables: –font-size-remark –line-height-remark
* Terms and conditions apply. Exhibition opening hours are subject to weather conditions and public holidays.
Menu Navigation
Red Hat Display · 400 Static: 16/24 Uppercase .typo-menu
Copy Variables: –font-size-menu –line-height-menu
Live stream
Red Hat Display · 400 Static: 20/28 .typo-live-stream
Copy Variables: –font-size-live-stream –line-height-live-stream
🔴 Live Streaming: Opening Ceremony & Curator Tour
Zen Antique Soft · Regular 36px
Zen Antique Soft · 400 Static: 36/36 Tracking: -4% Small-Caps .typo-zen-antique-36 .font-zen-antique-soft
Copy Variables: –font-zen-antique –font-size-zen-36: 36px –line-height-zen-36: 36px –letter-spacing-neg-4: -0.04em
Blessed Assurance, Jesus Is Mine
Cinzel · Bold 16px
Cinzel · 700 Static: 16/16 Tracking: 3% Bold .typo-cinzel-bold-16 .font-cinzel-bold
Copy Variables: –font-cinzel –font-size-cinzel-16: 16px –line-height-cinzel-16: 16px –letter-spacing-3: 0.03em
HYMN NO. 101 · SACRED CHORAL COLLECTION
Tag Gambarino (Uppercase Tag / Subhead)
Gambarino · 400 Fluid: 16/26 → 19/26 Uppercase Tracking: 2% .typo-tag-gambarino .tag-gambarino
Copy Variables: –font-headings –font-size-lead-in-2 –line-height-lead-in-2 –letter-spacing-2: 0.02em
KOWLOON CHURCH SACRED MUSIC & HERITAGE ARCHIVE
Traditional Chinese (TC) Typography Overrides
Noto Sans TC · 400 / 500 / 700 Scoped :lang(zh) / body.tc body.tc :lang(zh)
Mapping Tokens: –font-noto-tc: ‘Noto Sans TC’ –font-headings → Noto Sans TC

中華基督教會香港區會九龍堂 · 信仰與傳承

當頁面包含繁體中文或帶有 body.tc / :lang(zh) 屬性時，標題字體會自動平滑切換至 Noto Sans TC，確保中文字符顯示清晰且排版風格統一。

05. Button Components Figma Specs · 8.5px / 25px · Border 1px · Radius 0
Outline Blue Button (Default State → Hover Fill)
font button Padding: 8.5px 25px Border: 1px #2346774D Radius: 0 (Flat) .btn .btn-outline-blue
Copy Tokens & Classes: .btn .btn-outline-blue –btn-padding-y: 8.5px –btn-padding-x: 25px –btn-blue-border-default: #2346774D
Book Tickets Register Event →
06. Input Component (.pmhk-input)
Bg: #00000008 Padding: 10px 25px Directly on <input>
Input Field & Search Box (.pmhk-input)
Font: Body – R Bg: #00000008 Focus: #0000000f Padding: 10px 25px Border-radius: 0 Border: None .pmhk-input .pmhk-input-wrap
Copy Tokens & Classes: .pmhk-input bg: #00000008 padding: 10px 25px search padding: 10px 58px 10px 62px –font-size-body-r –line-height-body-r .pmhk-input-wrap
Áp dụng trực tiếp vào thẻ <input>, padding 10px 25px, nền xám trong suốt #00000008.
Icon kính lúp cách mép trái 25px, nút mũi tên cách mép phải 25px. Khoảng cách (gap) giữa text với icon và button là 17px (padding: 10px 58px 10px 62px).
📌 Lưu ý kiến trúc chuẩn:
  • Style trực tiếp vào <input>: Thuộc tính background: #00000008, padding: 10px 25px, font Body-R và border radius 0 được định nghĩa vào chính thẻ <input>, không gắn vào thẻ <form> bọc ngoài.
  • Khoảng cách riêng trong Input Search: Text trong input có khoảng cách (gap) chính xác 17px so với icon kính lúp (20×20) bên trái và button mũi tên (16×12) bên phải. Áp dụng padding-left: 62px (25px mép + 20px icon + 17px gap) và padding-right: 58px (25px mép + 16px button + 17px gap).
  • Focus State: Khi focus, nền chuyển mượt sang #0000000f, outline none sạch sẽ và hiện đại.
07. Custom Select Dropdown Component
Select: Orange Option: #FAF5EF GSAP 3 Animation
Custom Select Dropdown (.pmhk-select)
Font: Body – R Bg: Orange (Hover giữ nguyên) Options: #FAF5EF (No Border) Padding: 8.5px 25px Gap: 20px Border-radius: 0 Box-shadow: none .pmhk-select
Copy Tokens & Classes: –color-orange: #FF8700 –color-cream: #FAF5EF –color-black: #272727 –font-size-body-r –line-height-body-r .pmhk-select
📌 Đặc điểm thiết kế & hành vi:
  • Select: Font Body – R, nền cam #FF8700 (hover giữ nguyên màu cam), chữ trắng, padding 8.5px 25px, gap 20px với icon angle_down.svg, không có border radius, không có box shadow.
  • Options: Nền kem #FAF5EF, không có border bao ngoài, không box shadow, padding tương tự select (8.5px 25px), chữ căn center, hover đổi màu cam.
  • Giới hạn chiều cao & Cuộn mượt: Menu tự động giới hạn max-height: 250px kèm thanh cuộn thanh mảnh 5px tone cam/xám, overscroll-behavior: contain ngăn scroll lan ra trang web. Tự động cuộn item vào tầm nhìn khi duyệt bằng bàn phím.
  • Placeholder thông minh: Hỗ trợ <option value="" disabled selected hidden> hoặc data-placeholder: trigger hiển thị placeholder khi chưa chọn, danh sách options xổ xuống chỉ gồm các lựa chọn thực (không xuất hiện placeholder).
  • Sự kiện: Hỗ trợ đầy đủ 100% sự kiện native của thẻ select (change, input, focus, blur, form reset, phím mũi tên Lên/Xuống, Enter, Space, Escape, Tab và type-ahead search).
08. Global Pagination Component (.pmhk-pagination)
Hover: Orange (No Zoom) Font H4 · Gap 50px Global Site Component
Pagination (.pmhk-pagination)
Font: H4 (Gambarino) Mobile: Lead in 1 (22px) Gap: 50px (Mobile clamp) Prev/Next: 29x22px Disabled: Opacity 30% Hover: Orange (No Scale) .pmhk-pagination
Copy Tokens & Classes: .pmhk-pagination .pmhk-pagination__numbers–desktop .pmhk-pagination__numbers–mobile .pmhk-pagination__num .pmhk-pagination__arrow –font-size-h4 (27px) gap: 50px / clamp PHP: pmhk_render_pagination()
⚡ Interactive Demo (Click số trang hoặc mũi tên để thử chuyển trang trực tiếp):
Đang ở trang: 1 / 5
📌 Quy chuẩn thiết kế Pagination toàn site:
  • Kích thước nút mũi tên: Kích thước 29px x 22px, màu đen, khi bị disable (ở trang đầu hoặc trang cuối) thì mờ với opacity: 0.3.
  • Typography số trang: Font H4 (Gambarino) kích thước 27px trên Desktop, xuống Mobile chuyển sang font Mobile/Lead in 1 (22px). Trang hiện tại có màu đen #272727, các trang chưa chọn có màu mờ rgba(39, 39, 39, 0.4).
  • Hiệu ứng Hover: Khi rê chuột vào số trang hoặc nút mũi tên, chỉ đổi màu sang cam #FF8700, tuyệt đối không phóng to (transform scale) để tránh giật bố cục.
  • Khoảng cách (Gap): Giữa các item trong thanh phân trang là 50px ở Desktop, clamp(20px, 6vw, 40px) ở Mobile.
  • Hỗ trợ Mobile 3 trang: Trên mobile, sử dụng .pmhk-pagination__numbers--desktop và .pmhk-pagination__numbers--mobile để giới hạn tối đa 3 số trang tránh tràn màn hình.
  • Hỗ trợ AJAX & PHP Render: Dùng hàm PHP pmhk_render_pagination( $paged, $max_pages ) hoặc module JS PMHKAjaxListing để tải trước dữ liệu AJAX khi load trang.
09. Global Toast Notification System (.pmhk-toast)
Bg: #234677 Border: Orange (Success/Info) Border: Red (Error) Global Site Component
Toast Notification (.pmhk-toast)
Font: Body – R Position: Fixed Bottom-Right Z-Index: 999999 Auto-dismiss: 4s .pmhk-toast .pmhk-toast–error
Copy Tokens & JS Helpers: .pmhk-toast-container .pmhk-toast .pmhk-toast–error JS: pmhkToast.show(‘msg’, ‘success’) JS: pmhkToast.show(‘msg’, ‘error’)
⚡ Interactive Triggers (Click để hiển thị Toast thật góc phải dưới màn hình):
Preview các kiểu Toast tĩnh (Static Visual States):
Item added to your collection successfully!
Audio playback failed: File could not be loaded.
📌 Quy chuẩn thông báo Toast toàn site:
  • Container cố định: .pmhk-toast-container cố định ở góc dưới bên phải màn hình (bottom: 30px, right: 30px, mobile: 20px). Tự động xếp chồng từ dưới lên trên.
  • Màu sắc & Điểm nhấn: Nền màu Blue thương hiệu #234677, chữ trắng, đổ bóng mềm mại box-shadow: 0 10px 30px rgba(0,0,0,0.22). Đường viền bên trái dày 4px màu cam #FF8700 cho thông báo chung/thành công, hoặc màu đỏ #ef4444 khi có lỗi.
  • Tự động đóng & Diễn hoạt: Trượt êm từ dưới lên (pmhkToastSlideIn 0.35s) và tự động mờ dần biến mất sau 4 giây, hoặc người dùng có thể nhấn nút [X] để đóng tức thì. Chống thông báo trùng lặp nội dung.
  • API Javascript: Gọi trực tiếp window.pmhkToast.show( message, 'info' | 'success' | 'error' ) bất kỳ lúc nào trên toàn site (được khởi tạo tự động trong main.js).
Live Streaming

Live Streaming

Connect with us online as we bring the spirit of our church directly to you through live streaming.

View More