forked from UKSOURCE/hailearning.edu.vn
feat: add Contact and Accreditation pages
This commit is contained in:
hkiett265
159
app/contactus/contact.css
Normal file
159
app/contactus/contact.css
Normal file
@@ -0,0 +1,159 @@
|
||||
/* ============================================
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user