/* =========================================================================
HMC Brand Stylesheet — Halal Muslim Consulting (HMC)
--------------------------------------------------------------------------
Owner: Halal Muslim Consulting — Training & Advisory entity
Scope: HMC Knowledge Hub (kien-thuc-halal.html), module pages
(module-1..6.html), and future HMC website pages
(home/about/service/contact)
Brand line: Emerald (institutional) · Sand (warm accent) · Merriweather Sans
Do NOT mix: This stylesheet must NOT be loaded on Halal Việt Nam (HVN)
pages. HVN uses a separate navy/gold identity.
--------------------------------------------------------------------------
Brand separation rationale:
ISO/IEC 17065 §4.2 — separation of authority. HMC (training/consulting)
must be visually distinct from HVN (certification body).
--------------------------------------------------------------------------
Load order required in :
1.
2.
3. Google Fonts: Merriweather Sans + Amiri (Arabic) + Inter (fallback)
4. THIS FILE
========================================================================= */
/* ------------------------------------------------------------------------ */
/* 1. DESIGN TOKENS — single source of truth */
/* ------------------------------------------------------------------------ */
:root {
/* Brand colors — HMC */
--hmc-emerald-50: #ECFDF5;
--hmc-emerald-100: #D1FAE5;
--hmc-emerald-200: #A7F3D0;
--hmc-emerald-500: #0E7C66;
--hmc-emerald-600: #047857;
--hmc-emerald-700: #065F46;
--hmc-emerald-800: #064E3B;
--hmc-emerald-900: #022C22;
--hmc-sand-50: #FAF7F2;
--hmc-sand-100: #F2EBDD;
--hmc-sand-200: #E6D9BF;
--hmc-sand-300: #D6BF95;
--hmc-sand-400: #C2A06B;
--hmc-sand-500: #A98349;
--hmc-sand-600: #866635;
--hmc-sand-700: #624A26;
--hmc-ink-700: #2A2722;
--hmc-ink-800: #1A1815;
--hmc-ink-900: #0E0D0B;
/* Typography scale — baseline 17px (mirrors HVN for institutional unity) */
--fs-body: 17px;
--fs-note: 15px;
--fs-footnote: 13px;
--fs-h1: clamp(28px, 4vw, 44px);
--fs-h2: clamp(22px, 2.6vw, 28px);
--fs-h3: 20px;
--fs-kicker: 12.5px;
--fs-button: 16px;
/* Line heights */
--lh-tight: 1.25;
--lh-snug: 1.35;
--lh-normal: 1.55;
--lh-relaxed: 1.7;
/* Shadows */
--sh-soft: 0 6px 30px -10px rgba(14,124,102,.18);
--sh-card: 0 10px 40px -16px rgba(14,124,102,.22);
--sh-lift: 0 24px 50px -20px rgba(14,124,102,.30);
--sh-sand: 0 6px 24px -10px rgba(169,131,73,.25);
}
/* ------------------------------------------------------------------------ */
/* 2. GLOBAL — body, scroll, baseline typography */
/* ------------------------------------------------------------------------ */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Merriweather Sans', 'Inter', system-ui, -apple-system, sans-serif;
font-size: var(--fs-body);
line-height: var(--lh-normal);
color: var(--hmc-ink-800);
background: #FAFAF7; /* warm off-white, distinguishes from HVN cool #F8FAFC */
font-feature-settings: 'kern' 1, 'liga' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Mobile safe-area bottom padding for sticky bottom nav */
@media (max-width: 767px) {
body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
section.py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
/* Arabic / Quranic typography */
.font-arabic, .font-serif {
font-family: 'Amiri', 'Georgia', serif;
}
/* ------------------------------------------------------------------------ */
/* 3. UTILITIES — patterns, backgrounds, gradient text */
/* ------------------------------------------------------------------------ */
.pattern-dots {
background-image: radial-gradient(rgba(14,124,102,.10) 1px, transparent 1px);
background-size: 18px 18px;
}
.pattern-sand {
background-image: radial-gradient(rgba(169,131,73,.12) 1px, transparent 1px);
background-size: 22px 22px;
}
.text-balance { text-wrap: balance; }
.gradient-emerald { background: linear-gradient(135deg, #022C22 0%, #065F46 40%, #0E7C66 100%); }
.gradient-emerald-soft { background: linear-gradient(135deg, #34D399 0%, #0E7C66 100%); }
.gradient-sand { background: linear-gradient(135deg, #C2A06B 0%, #866635 100%); }
.text-grad-brand {
background: linear-gradient(90deg, #022C22 0%, #0E7C66 55%, #C2A06B 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ring-soft { box-shadow: 0 0 0 1px rgba(14,124,102,.10), 0 12px 40px -18px rgba(14,124,102,.18); }
.glass {
background: rgba(255,255,255,.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.16);
}
.blob {
position: absolute;
border-radius: 999px;
filter: blur(60px);
opacity: .5;
pointer-events: none;
}
.corner-orn::before {
content: '';
position: absolute;
right: -12px; top: -12px;
width: 80px; height: 80px;
background: radial-gradient(circle at 30% 30%, rgba(14,124,102,.18), transparent 70%);
border-radius: 50%;
}
/* ------------------------------------------------------------------------ */
/* 4. KICKER — section eyebrow */
/* ------------------------------------------------------------------------ */
.kicker {
display: inline-flex;
align-items: center;
gap: .625rem;
font-size: var(--fs-kicker);
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--hmc-emerald-700);
}
.kicker::before {
content: '';
width: 28px; height: 2px;
background: linear-gradient(90deg, #0E7C66, #C2A06B);
border-radius: 2px;
}
.kicker.on-dark { color: var(--hmc-sand-300); }
.kicker.on-dark::before { background: linear-gradient(90deg, #C2A06B, #fff); }
/* ------------------------------------------------------------------------ */
/* 5. BUTTONS — shine effect */
/* ------------------------------------------------------------------------ */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
transition: left .6s ease;
}
.btn-shine:hover::after { left: 120%; }
/* ------------------------------------------------------------------------ */
/* 6. CARDS & SECTIONS */
/* ------------------------------------------------------------------------ */
.section-card {
background: #fff;
border-radius: 1rem;
box-shadow: 0 0 0 1px rgba(14,124,102,.08), 0 8px 24px -12px rgba(14,124,102,.10);
}
.card-lift {
transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.card-lift:hover {
transform: translateY(-6px);
box-shadow: var(--sh-lift);
}
/* ------------------------------------------------------------------------ */
/* 7. NAV LINK — underline hover */
/* ------------------------------------------------------------------------ */
.nav-link::after {
content: '';
display: block;
height: 2px;
width: 0;
background: var(--hmc-emerald-500);
transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }
/* ------------------------------------------------------------------------ */
/* 8. SCROLL REVEAL */
/* ------------------------------------------------------------------------ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ------------------------------------------------------------------------ */
/* 9. ANIMATIONS */
/* ------------------------------------------------------------------------ */
.badge-glow { box-shadow: 0 0 0 6px rgba(194,160,107,.18), 0 0 0 14px rgba(194,160,107,.08); }
.pulse-dot { position: relative; }
.pulse-dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--hmc-emerald-500);
opacity: .6;
animation: hmc-pulse 1.8s ease-out infinite;
}
@keyframes hmc-pulse {
0% { transform: scale(.8); opacity: .7; }
100% { transform: scale(1.8); opacity: 0; }
}
.check-pop { animation: hmc-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes hmc-pop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.15); }
100% { transform: scale(1); opacity: 1; }
}
.marquee {
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { animation: hmc-scroll 40s linear infinite; }
@keyframes hmc-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ------------------------------------------------------------------------ */
/* 10. CLIP PATHS — process arrow steps */
/* ------------------------------------------------------------------------ */
.clip-arrow {
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
}
.clip-arrow-first {
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}
/* ------------------------------------------------------------------------ */
/* 11. IMAGE PLACEHOLDER */
/* ------------------------------------------------------------------------ */
.img-ph {
background-image:
linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 50%, #ECFDF5 100%),
repeating-linear-gradient(45deg, rgba(14,124,102,.05) 0 10px, transparent 10px 20px);
background-blend-mode: multiply;
border: 1.5px dashed rgba(14,124,102,.35);
color: var(--hmc-emerald-700);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: var(--fs-footnote);
font-weight: 600;
letter-spacing: .05em;
}
.img-ph svg { opacity: .5; }
/* ------------------------------------------------------------------------ */
/* 12. DETAILS / ACCORDION */
/* ------------------------------------------------------------------------ */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }
.chev { transition: transform .2s ease; }
/* ------------------------------------------------------------------------ */
/* 13. FORM FIELDS */
/* HMC uses inline contact forms only (no Apps Script endpoint). */
/* Style retained for future HMC contact page reuse. */
/* ------------------------------------------------------------------------ */
.field-label {
display: block;
font-size: var(--fs-note);
font-weight: 600;
color: var(--hmc-emerald-700);
letter-spacing: .01em;
}
.field-required::after {
content: ' *';
color: #B91C1C;
}
.field-input,
.field-select,
.field-textarea {
width: 100%;
padding: .85rem 1.05rem;
border: 1px solid var(--hmc-emerald-100);
border-radius: .625rem;
font-family: inherit;
font-size: var(--fs-body);
line-height: 1.45;
color: var(--hmc-emerald-800);
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.field-input::placeholder,
.field-textarea::placeholder {
font-size: var(--fs-note);
color: #94A3B8;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
outline: none;
border-color: var(--hmc-emerald-500);
box-shadow: 0 0 0 4px rgba(14,124,102,.15);
}
.field-textarea {
resize: vertical;
min-height: 110px;
}
/* ------------------------------------------------------------------------ */
/* 14. COURSE CARD / LEVEL BADGES (HMC variant — emerald-toned) */
/* ------------------------------------------------------------------------ */
.course-thumb {
background-image:
linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 60%, #A7F3D0 100%),
repeating-linear-gradient(45deg, rgba(14,124,102,.05) 0 10px, transparent 10px 20px);
background-blend-mode: multiply;
border-bottom: 1px solid rgba(14,124,102,.12);
position: relative;
overflow: hidden;
}
.course-thumb svg.deco {
position: absolute;
right: -20px; bottom: -20px;
width: 140px; height: 140px;
opacity: .35;
color: var(--hmc-emerald-500);
}
.level-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.level-co-ban { background: #ECFDF5; color: #065F46; }
.level-trung-cap { background: #FAF7F2; color: #866635; }
.level-nang-cao { background: #065F46; color: #fff; }
.progress-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: #ECFDF5;
color: #065F46;
}
.progress-pill.done { background: #FAF7F2; color: #866635; }
/* ------------------------------------------------------------------------ */
/* 15. ARABIC TYPOGRAPHY — sizing safety net */
/* ------------------------------------------------------------------------ */
.font-arabic, [lang="ar"] {
font-size: 1.08em;
letter-spacing: 0;
}
/* ========================================================================= */
/* HMC-ONLY: HALAL MOTIFS */
/* The visual vocabulary that distinguishes HMC (training/heritage) from */
/* HVN (regulatory/institutional). Use these to reinforce Islamic identity */
/* on learning hub + module pages. */
/* ========================================================================= */
/* ------------------------------------------------------------------------ */
/* 16. GIRIH PATTERN — 10-fold geometric Islamic tessellation */
/* ------------------------------------------------------------------------ */
/* Subtle background tile suitable for section dividers + dark hero band.
Uses inline SVG data URI so no extra HTTP request. */
.girih-bg {
background-color: #022C22;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px 80px;
}
.girih-bg-light {
background-color: #FAF7F2;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px 80px;
}
/* ------------------------------------------------------------------------ */
/* 17. ARABESQUE DIVIDER — horizontal flourish between sections */
/* ------------------------------------------------------------------------ */
.arabesque-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 2.5rem auto;
gap: 1rem;
color: var(--hmc-sand-500);
}
.arabesque-divider::before,
.arabesque-divider::after {
content: '';
flex: 1;
max-width: 220px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--hmc-sand-400), transparent);
}
.arabesque-divider .ornament {
width: 32px;
height: 32px;
flex: 0 0 32px;
}
/* ------------------------------------------------------------------------ */
/* 18. MIHRAB-ARCHED FRAME — pointed-arch border for hero card / quote */
/* ------------------------------------------------------------------------ */
.mihrab-frame {
position: relative;
padding: 2.25rem 1.75rem 1.75rem;
background: #fff;
border: 1px solid var(--hmc-sand-200);
border-radius: 0 0 1rem 1rem;
}
.mihrab-frame::before {
content: '';
position: absolute;
inset: -48px 0 auto 0;
height: 48px;
background: #fff;
border: 1px solid var(--hmc-sand-200);
border-bottom: none;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
clip-path: ellipse(50% 100% at 50% 100%);
}
.mihrab-frame.dark {
background: var(--hmc-emerald-900);
border-color: var(--hmc-emerald-700);
color: #FAF7F2;
}
.mihrab-frame.dark::before {
background: var(--hmc-emerald-900);
border-color: var(--hmc-emerald-700);
}
/* ------------------------------------------------------------------------ */
/* 19. CALLIGRAPHY H2 — Arabic phrase + Latin translation pairing */
/* Pattern: */
/* حلالاً طيباً */
/* Halalan Tayyiban */
/*
*/
/* ------------------------------------------------------------------------ */
.calligraphy-h2 {
display: flex;
flex-direction: column;
align-items: center;
gap: .25rem;
margin: 1.5rem 0 1.25rem;
text-align: center;
}
.calligraphy-h2 .ar {
font-family: 'Amiri', 'Georgia', serif;
font-size: clamp(28px, 4.2vw, 44px);
font-weight: 700;
color: var(--hmc-emerald-700);
line-height: 1.2;
direction: rtl;
}
.calligraphy-h2 .vi {
font-size: var(--fs-note);
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--hmc-sand-600);
}
.calligraphy-h2.on-dark .ar { color: var(--hmc-sand-200); }
.calligraphy-h2.on-dark .vi { color: var(--hmc-sand-300); }
/* ------------------------------------------------------------------------ */
/* 20. SAND ORNAMENT DIVIDER — short inline marker */
/* ------------------------------------------------------------------------ */
.sand-ornament {
display: inline-block;
width: 60px;
height: 6px;
background:
radial-gradient(circle at 50% 50%, var(--hmc-sand-500) 2px, transparent 2.5px) 0 0/12px 6px repeat-x,
linear-gradient(90deg, transparent, var(--hmc-sand-400), transparent);
opacity: .8;
}
/* ------------------------------------------------------------------------ */
/* 21. 8-POINT STAR — corner accent for cards (khatim sulemani style) */
/* ------------------------------------------------------------------------ */
.star-8point {
position: absolute;
width: 36px;
height: 36px;
background: var(--hmc-sand-400);
clip-path: polygon(
50% 0%, 61% 35%, 100% 39%, 68% 57%, 79% 91%,
50% 70%, 21% 91%, 32% 57%, 0% 39%, 39% 35%
);
opacity: .8;
}
.star-8point.tl { top: -12px; left: -12px; }
.star-8point.tr { top: -12px; right: -12px; }
.star-8point.bl { bottom: -12px; left: -12px; }
.star-8point.br { bottom: -12px; right: -12px; }
/* ------------------------------------------------------------------------ */
/* 22. AUTHORITY CARD — for JAKIM/OIC-SMIIC/BPJPH/GSO reference blocks */
/* ------------------------------------------------------------------------ */
.authority-card {
background: #fff;
border: 1px solid var(--hmc-sand-200);
border-left: 4px solid var(--hmc-emerald-600);
border-radius: .75rem;
padding: 1.25rem 1.5rem;
position: relative;
}
.authority-card .auth-label {
font-size: var(--fs-footnote);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--hmc-sand-600);
}
.authority-card .auth-source {
font-size: var(--fs-note);
font-weight: 600;
color: var(--hmc-emerald-700);
margin-top: .25rem;
}
.authority-card .auth-quote {
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--hmc-ink-800);
margin-top: .5rem;
}
/* ------------------------------------------------------------------------ */
/* 23. QUR'AN / HADITH CITATION BLOCK */
/* ------------------------------------------------------------------------ */
.scripture-block {
background: var(--hmc-sand-50);
border-radius: 1rem;
padding: 1.75rem 1.5rem;
text-align: center;
position: relative;
}
.scripture-block .ar-text {
font-family: 'Amiri', 'Georgia', serif;
font-size: clamp(22px, 3vw, 30px);
line-height: 1.7;
color: var(--hmc-emerald-800);
direction: rtl;
margin-bottom: 1rem;
}
.scripture-block .translit {
font-style: italic;
font-size: var(--fs-note);
color: var(--hmc-sand-600);
margin-bottom: .5rem;
}
.scripture-block .meaning {
font-size: var(--fs-body);
color: var(--hmc-ink-800);
line-height: var(--lh-relaxed);
max-width: 60ch;
margin: 0 auto;
}
.scripture-block .source {
display: inline-block;
margin-top: 1rem;
font-size: var(--fs-footnote);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--hmc-emerald-700);
}
/* ------------------------------------------------------------------------ */
/* 24. STATS BAR — hero stats strip */
/* ------------------------------------------------------------------------ */
.stat-cell {
text-align: center;
padding: .75rem 1rem;
}
.stat-cell .num {
font-size: clamp(24px, 3vw, 32px);
font-weight: 800;
color: var(--hmc-emerald-600);
line-height: 1.1;
}
.stat-cell .label {
font-size: var(--fs-footnote);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--hmc-sand-600);
margin-top: .25rem;
}
/* ------------------------------------------------------------------------ */
/* 25. LEARNING PATH STEP — visual roadmap 1→6 */
/* ------------------------------------------------------------------------ */
.path-step {
position: relative;
padding: 1rem 1.25rem;
background: #fff;
border: 1px solid var(--hmc-emerald-100);
border-radius: .75rem;
min-height: 84px;
}
.path-step .step-num {
position: absolute;
top: -14px;
left: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--hmc-emerald-600);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
}
.path-step.done {
background: var(--hmc-sand-50);
border-color: var(--hmc-sand-300);
}
.path-step.done .step-num {
background: var(--hmc-sand-500);
}