forked from UKSOURCE/hailearning.edu.vn
160 lines
4.4 KiB
CSS
160 lines
4.4 KiB
CSS
/* ============================================
|
|
Contact Page — Scoped Styles
|
|
Scope: .contact-page
|
|
============================================ */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
|
|
|
|
/* Reset heading override từ main.css */
|
|
.contact-page h1,
|
|
.contact-page h2,
|
|
.contact-page h3,
|
|
.contact-page h4 {
|
|
font-size: unset;
|
|
font-weight: unset;
|
|
line-height: unset;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Typography */
|
|
.contact-page .contact-heading {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
font-weight: 700;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.contact-page .contact-card-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.contact-page .contact-form-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.contact-page .contact-pin-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Color token: --primary */
|
|
.contact-page .text-primary,
|
|
.contact-page .hover\:text-primary:hover { color: rgb(38, 60, 111); }
|
|
|
|
.contact-page .bg-primary { background-color: rgb(38, 60, 111) !important; }
|
|
|
|
.contact-page .border-primary { border-color: rgb(38, 60, 111); }
|
|
|
|
.contact-page .focus\:border-primary:focus { border-color: rgb(38, 60, 111); }
|
|
.contact-page .focus\:ring-primary:focus { --tw-ring-color: rgb(38, 60, 111); }
|
|
|
|
/* group-hover bg-primary */
|
|
.contact-page .group:hover .group-hover\:bg-primary { background-color: rgb(38, 60, 111) !important; }
|
|
.contact-page .group:hover .group-hover\:text-white { color: #fff; }
|
|
|
|
/* Color token: --dark */
|
|
.contact-page .text-dark { color: #111827; }
|
|
|
|
/* bg-white/5, /10 */
|
|
.contact-page .bg-white\/5 { background-color: rgba(255,255,255,0.05); }
|
|
.contact-page .bg-white\/10 { background-color: rgba(255,255,255,0.10); }
|
|
|
|
/* border-white/20, /50 */
|
|
.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); }
|
|
.contact-page .border-white\/50 { border-color: rgba(255,255,255,0.50); }
|
|
|
|
/* text-white/80, /90 */
|
|
.contact-page .text-white\/80 { color: rgba(255,255,255,0.80); }
|
|
.contact-page .text-white\/90 { color: rgba(255,255,255,0.90); }
|
|
|
|
/* bg-white/95 */
|
|
.contact-page .bg-white\/95 { background-color: rgba(255,255,255,0.95); }
|
|
|
|
/* border-t border-white/20 */
|
|
.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); }
|
|
|
|
/* rounded fixes — main.css có thể reset border-radius */
|
|
.contact-page .rounded-\[16px\] { border-radius: 16px !important; }
|
|
.contact-page .rounded-\[24px\] { border-radius: 24px !important; }
|
|
.contact-page .rounded-\[12px\] { border-radius: 12px !important; }
|
|
.contact-page .rounded-full { border-radius: 9999px !important; }
|
|
.contact-page .rounded-\[12px\] { border-radius: 12px !important; }
|
|
|
|
/* button reset */
|
|
.contact-page button,
|
|
.contact-page input,
|
|
.contact-page select,
|
|
.contact-page textarea {
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* Send Message button */
|
|
.contact-page .bg-primary.rounded-\[12px\] {
|
|
border-radius: 12px !important;
|
|
background-color: rgb(38, 60, 111) !important;
|
|
}
|
|
|
|
.contact-page .bg-primary.rounded-\[12px\]:hover {
|
|
background-color: rgba(38, 60, 111, 0.9) !important;
|
|
}
|
|
|
|
/* Icon color fix */
|
|
.contact-page .text-primary i,
|
|
.contact-page i.text-primary,
|
|
.contact-page .text-primary svg,
|
|
.contact-page svg.text-primary {
|
|
color: rgb(38, 60, 111) !important;
|
|
}
|
|
|
|
/* Icon box bg-blue-50 */
|
|
.contact-page .bg-blue-50 {
|
|
background-color: rgb(239, 246, 255) !important;
|
|
}
|
|
|
|
/* blue-100 border */
|
|
.contact-page .border-blue-100 {
|
|
border-color: rgb(219, 234, 254) !important;
|
|
}
|
|
|
|
/* info box bg-blue-50 text-primary */
|
|
.contact-page .bg-blue-50.rounded-\[12px\] {
|
|
background-color: rgb(239, 246, 255) !important;
|
|
}
|
|
|
|
/* Icon box hover — đổi icon sang trắng khi hover card */
|
|
.contact-page .group:hover .group-hover\:text-white i,
|
|
.contact-page .group:hover .group-hover\:text-white svg {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Form inputs border-radius và placeholder */
|
|
.contact-page input,
|
|
.contact-page select,
|
|
.contact-page textarea {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.contact-page input::placeholder,
|
|
.contact-page textarea::placeholder {
|
|
color: #9ca3af !important;
|
|
}
|
|
|
|
/* contact-form-title size */
|
|
.contact-page .contact-form-title {
|
|
font-size: 2rem !important;
|
|
}
|
|
|
|
/* Consent checkbox alignment */
|
|
.contact-page .custom-checkbox {
|
|
margin-top: 2px !important;
|
|
flex-shrink: 0;
|
|
}
|