/* ========================================================================= HVN Brand Stylesheet — Halal Việt Nam (HVN) -------------------------------------------------------------------------- Owner: Halal Vietnam (HVN) — Tổ chức Chứng nhận Halal Việt Nam Scope: HVN landing, form, thank-you, certificate pages Brand line: Navy (institutional) · Gold (heritage accent) · Merriweather Sans Do NOT mix: This stylesheet must NOT be loaded on Halal Muslim Consulting (HMC) pages. HMC uses a separate green-toned identity. -------------------------------------------------------------------------- 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 — HVN */ --hvn-navy-50: #EEF5FB; --hvn-navy-100: #D6E6F4; --hvn-navy-500: #1A67B2; --hvn-navy-700: #0F4275; --hvn-navy-800: #0A2F55; --hvn-navy-900: #051D36; --hvn-gold-200: #E8CF82; --hvn-gold-300: #DBB752; --hvn-gold-400: #C9A24A; --hvn-gold-600: #856626; /* Typography scale — baseline 17px, calibrated for senior readers */ --fs-body: 17px; /* paragraph, input value */ --fs-note: 15px; /* secondary copy, field label, captions */ --fs-footnote: 13px; /* disclaimer, copyright, legal small print */ --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(26,103,178,.18); --sh-card: 0 10px 40px -16px rgba(26,103,178,.22); --sh-lift: 0 24px 50px -20px rgba(26,103,178,.30); } /* ------------------------------------------------------------------------ */ /* 2. GLOBAL — body, scroll, baseline typography */ /* ------------------------------------------------------------------------ */ html { scroll-behavior: smooth; /* Allow 17px baseline without breaking Tailwind's text-* utilities */ -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: #0F172A; background: #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)); } /* Density on small screens for long landing sections */ 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(26,103,178,.10) 1px, transparent 1px); background-size: 18px 18px; } .text-balance { text-wrap: balance; } .gradient-navy { background: linear-gradient(135deg, #0A2F55 0%, #155591 40%, #1A67B2 100%); } .gradient-blue-soft { background: linear-gradient(135deg, #4691CB 0%, #1A67B2 100%); } .gradient-gold { background: linear-gradient(135deg, #C9A24A 0%, #856626 100%); } .text-grad-brand { background: linear-gradient(90deg, #0A2F55 0%, #1A67B2 55%, #C9A24A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .ring-soft { box-shadow: 0 0 0 1px rgba(26,103,178,.10), 0 12px 40px -18px rgba(26,103,178,.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(26,103,178,.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(--hvn-navy-700); } .kicker::before { content: ''; width: 28px; height: 2px; background: linear-gradient(90deg, #1A67B2, #C9A24A); border-radius: 2px; } .kicker.on-dark { color: var(--hvn-gold-400); } .kicker.on-dark::before { background: linear-gradient(90deg, #C9A24A, #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(26,103,178,.08), 0 8px 24px -12px rgba(26,103,178,.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(--hvn-navy-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(201,162,74,.18), 0 0 0 14px rgba(201,162,74,.08); } .pulse-dot { position: relative; } .pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--hvn-navy-500); opacity: .6; animation: hvn-pulse 1.8s ease-out infinite; } @keyframes hvn-pulse { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } } .check-pop { animation: hvn-pop .6s cubic-bezier(.34,1.56,.64,1) both; } @keyframes hvn-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: hvn-scroll 40s linear infinite; } @keyframes hvn-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, #EEF5FB 0%, #D6E6F4 50%, #EEF5FB 100%), repeating-linear-gradient(45deg, rgba(26,103,178,.05) 0 10px, transparent 10px 20px); background-blend-mode: multiply; border: 1.5px dashed rgba(26,103,178,.35); color: var(--hvn-navy-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 — calibrated for senior readers */ /* ------------------------------------------------------------------------ */ .field-label { display: block; font-size: var(--fs-note); /* 15px */ font-weight: 600; color: var(--hvn-navy-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(--hvn-navy-100); border-radius: .625rem; font-family: inherit; font-size: var(--fs-body); /* 17px — same as body */ line-height: 1.45; color: var(--hvn-navy-800); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .field-input::placeholder, .field-textarea::placeholder { font-size: var(--fs-note); /* 15px */ color: #94A3B8; } .field-input:focus, .field-select:focus, .field-textarea:focus { outline: none; border-color: var(--hvn-navy-500); box-shadow: 0 0 0 4px rgba(26,103,178,.15); } .field-textarea { resize: vertical; min-height: 110px; } /* Radio group — segmented control style */ .radio-group { display: inline-flex; border: 1px solid var(--hvn-navy-100); border-radius: .5rem; overflow: hidden; } .radio-group label { font-size: var(--fs-note); font-weight: 600; color: var(--hvn-navy-700); cursor: pointer; transition: all .15s ease; } .radio-group input { display: none; } .radio-group input:checked + span { background: var(--hvn-navy-500); color: #fff; } .radio-group span { display: inline-block; padding: .6rem 1.25rem; } /* ------------------------------------------------------------------------ */ /* 14. COURSE CARD / LEVEL BADGES */ /* (used in HVN training pages only — NOT for HMC kien-thuc-halal) */ /* ------------------------------------------------------------------------ */ .course-thumb { background-image: linear-gradient(135deg, #EEF5FB 0%, #D6E6F4 60%, #ADCCE8 100%), repeating-linear-gradient(45deg, rgba(26,103,178,.05) 0 10px, transparent 10px 20px); background-blend-mode: multiply; border-bottom: 1px solid rgba(26,103,178,.12); position: relative; overflow: hidden; } .course-thumb svg.deco { position: absolute; right: -20px; bottom: -20px; width: 140px; height: 140px; opacity: .35; color: var(--hvn-navy-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: #EEF5FB; color: #155591; } .level-trung-cap { background: #FBF6E8; color: #856626; } .level-nang-cao { background: #0F4275; 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: #EEF5FB; color: #155591; } .progress-pill.done { background: #FBF6E8; color: #856626; } /* ------------------------------------------------------------------------ */ /* 15. ARABIC TYPOGRAPHY — sizing safety net */ /* Amiri rends smaller per em than Latin. Bump baseline a notch. */ /* ------------------------------------------------------------------------ */ .font-arabic, [lang="ar"] { font-size: 1.08em; letter-spacing: 0; }