/* Cleaned styles.css - duplicates removed, rules consolidated */ /* VARIABLES */ :root { --dragon-primary: #152850; /* Renamed from --dg-primary */ --dragon-secondary: #C2BEB7; /* Renamed from --dg-secondary */ --dragon-text: #222; /* Renamed from --dg-text */ --dragon-muted: #6b6262; /* Renamed from --dg-muted */ --dragon-white: #ffffff; /* Renamed from --dg-white */ /* Index-specific variables (use by adding .page-index on body) */ --idx-dragon-primary: #7C0E03; /* Renamed from --idx-dg-primary */ /* --idx-dragon-secondary: #a39898; */ /* Renamed from --idx-dg-secondary */ --idx-dragon-text: #2b2b2b; /* Renamed from --idx-dg-text */ --idx-dragon-muted: #6b6b6b; /* Renamed from --idx-dg-muted */ } /* BODY (global) */ body { background-color: var(--dragon-secondary); color: var(--dragon-text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Optional per-page index override: Add class="page-index" to to apply these overrides. */ .page-index { background-color: var(--idx-dragon-secondary); color: var(--idx-dragon-text); } /* NAVBAR */ .navbar { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 1030; transition: background-color 0.3s ease; overflow: visible; } .brand-logo { max-height: 100px; width: auto; display: block; transform: scale(2); transform-origin: left center; transition: transform 0.2s ease; will-change: transform; backface-visibility: hidden; } @media (max-width: 767.98px) { .brand-logo { transform: none !important; max-height: 48px; height: auto; } } /* TYPOGRAPHY */ .navbar-brand .fw-bold { margin-left: 60px; } .navbar-brand .brand-text { font-size: 1.5rem; } /* BUTTONS */ .btn-dg, .btn-dg-primary { background-color: #C6A667 !important; border-color: #C6A667 !important; color: #fff !important; transition: all 0.2s ease; } .navLink { color: #152850 !important; } .btn-dg:hover, .btn-dg-primary:hover { background-color: #5f0b02; border-color: #5f0b02; color: #fff !important; } /* Variant for pages using index variables (when .page-index on body) */ .page-index .btn-dg { background-color: var(--idx-dragon-primary); border-color: var(--idx-dragon-primary); } .page-index .btn-dg:hover { background-color: #5f0b02; } /* Outline buttons */ .btn-outline-dark, .btn-outline-secondary { color: var(--dragon-primary); border-color: var(--dragon-primary); } .btn-outline-dark:hover, .btn-outline-secondary:hover { background-color: var(--dragon-primary); color: var(--dragon-white); } /* HERO / PAGE HERO (main hero variants used across pages) */ .page-hero, .page-hero-partner, .page-hero-apply, .page-hero-contact, .hero { color: #fff; padding: 3rem 0; background-size: cover; background-position: center; position: relative; } .partner-universites { color: white; margin-top: 30px; } /* Specific hero backgrounds or overlays */ .page-hero { background: linear-gradient(rgba(124, 14, 3, 0.75), rgba(124, 14, 3, 0.65)), url('assets/img/hero/banner-home.webp') center/cover no-repeat; padding: 5rem 0; } .hero { min-height: 80vh; display: grid; align-items: center; } .hero::after, .page-hero-partner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 10% 10%, #152850 0%); z-index: 0; } .hero .hero-content, .page-hero .hero-content { z-index: 1; } /* ABOUT HERO */ .about-hero { padding: clamp(4rem, 6vw, 6rem) 0; background: radial-gradient(120% 140% at 10% 10%, #152850 0%); position: relative; overflow: hidden; } .about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 8, 5, 0.4) 0%, rgba(20, 8, 5, 0) 55%); pointer-events: none; } .about-hero .container { position: relative; z-index: 1; } .about-hero .hero-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.9); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; } .about-hero h1 { font-size: clamp(2.75rem, 4vw, 3.5rem); line-height: 1.1; margin-bottom: 1.5rem; } .about-hero .lead { color: rgba(255, 255, 255, 0.88); max-width: 62ch; } .about-hero .btn-dg, .about-hero .btn-dg-primary { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); } .about-hero .btn-light { color: var(--dragon-primary); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 12px 30px rgba(12, 6, 4, 0.25); } .about-hero .btn-light:hover { background: #fff; color: var(--dragon-primary); } .about-hero .hero-media img { border-radius: 1.25rem; } /* CARD COMPONENTS */ .mission-card, .card-service, .service-card, .form-card, .contact-card { background: #fff; border-radius: 12px; padding: 1.4rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); border: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-service:hover, .service-card:hover, .mission-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } /* ABOUT PAGE CARDS & LAYOUT */ .page-about .mission-card, .page-about .card-service, .page-about .service-card, .page-about .card, .page-about .partner-card { border-radius: 1.25rem; border: 1px solid rgba(124, 14, 3, 0.12); box-shadow: 0 18px 40px rgba(20, 12, 8, 0.12); } .page-about .mission-card { padding: clamp(2rem, 4vw, 2.5rem); } .page-about .partner-card { background: #fff; padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .page-about .partner-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(20, 12, 8, 0.18); } .page-about .form-card, .page-about .contact-card { padding: clamp(2rem, 4vw, 2.5rem); } /* MISC ABOUT */ .about-overview { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(245, 241, 235, 0.94) 100%); padding: clamp(4rem, 6vw, 5.5rem) 0; } .about-story { padding: clamp(4rem, 6vw, 5.5rem) 0; background: #ffffff; } .about-story .section-heading { max-width: 640px; margin: 0 auto 2.5rem auto; } .about-story .timeline { background: #fff; border-radius: 1.5rem; padding: clamp(2rem, 4vw, 2.75rem); border: 1px solid rgba(124, 14, 3, 0.08); box-shadow: 0 20px 45px rgba(18, 12, 8, 0.1); } .about-story .timeline::before { background: rgba(124, 14, 3, 0.2); } .about-story .timeline li::before { background: #7C0E03 } .about-team { padding: clamp(4rem, 6vw, 5.5rem) 0; background: #f5efea; } .about-team .team-member { background: #fff; border-radius: 1.5rem; padding: 2rem 1.5rem; box-shadow: 0 20px 45px rgba(18, 12, 8, 0.08); border: 1px solid rgba(124, 14, 3, 0.08); height: 100%; } .about-team .team-member img { border-width: 4px; border-color: rgba(124, 14, 3, 0.7); margin-bottom: 1rem; } /* TIMELINE */ .timeline { list-style: none; padding: 0; margin: 0; } .timeline li { position: relative; padding-left: 3rem; margin-bottom: 2rem; } .timeline::before { content: ""; position: absolute; top: 0; left: 0.9rem; height: 100%; width: 2px; background: rgba(124, 14, 3, 0.2); } .timeline li::before { content: ""; position: absolute; left: 0.6rem; top: 0.4rem; width: 14px; height: 14px; border-radius: 50%; background: var(--dragon-primary); box-shadow: 0 0 0 4px rgba(124, 14, 3, 0.12); z-index: 1; } /* TEAM IMAGES */ .team-member img { max-width: 140px; height: 140px; object-fit: cover; border: 3px solid var(--dragon-primary); } .team-member { margin-bottom: 1rem; } /* PARTNERS */ .partner-logo-container { background: var(--dragon-white); border-radius: 12px; padding: 1.5rem; height: 140px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); transition: box-shadow 0.3s ease; } .partner-logo-container:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .partner-logo { max-height: 80px; width: 100%; object-fit: contain; filter: grayscale(100%) brightness(1.2); opacity: .65; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .partner-logo:hover { filter: grayscale(0%) brightness(1); opacity: 1; transform: scale(1.05); } /* SEARCH / FILTER */ .search-filter { background: #fff; border-radius: 10px; padding: .6rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); width: 100%; } .search-filter button { min-width: fit-content; } /* FAQ / ACCORDION */ .faq .accordion-item { border-radius: 10px; margin-bottom: .5rem; } .faq .accordion-button:not(.collapsed) { color: #fff; background-color: var(--dragon-primary); } /* CTA STRIP */ .cta-strip { background: var(--dragon-primary); color: #fff; padding: 1.6rem; border-radius: 10px; } /* MAP / PLACEHOLDERS */ .map-placeholder, .about-presence .map-embed { border-radius: 1.5rem; overflow: hidden; box-shadow: 0 28px 65px rgba(18, 12, 8, 0.18); border: 1px solid rgba(124, 14, 3, 0.08); } .map-placeholder iframe, .about-presence .map-embed iframe { border: 0; width: 100%; height: 100%; display: block; } .map-placeholder img, .about-presence .map-embed img { width: 100%; height: 100%; object-fit: cover; display: block; } /* FOOTER */ footer { background: #222; color: #ddd; padding: 3rem 0 1.5rem 0; } footer img { filter: invert(1); opacity: .85; } footer a.text-muted:hover { color: #fff !important; } .footer-divider { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem; margin-top: 1.5rem; } /* MISC */ .note-muted { color: var(--dragon-muted); font-size: .9rem; } /* CONTACT CARD FIX */ .contact-card .col-12.d-flex { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .contact-card .col-12.d-flex div:last-child { width: 100%; } .contact-card .col-12.d-flex .btn-dg { width: 100%; } /* ABOUT OFFER GRID */ .about-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } /* HERO BUTTONS */ .page-hero .btn-lg { padding: .5rem 1rem; font-size: .95rem; line-height: 1.2; border-radius: .5rem; min-width: 140px; max-width: 100%; } .page-hero .d-grid.d-sm-block .btn-lg { width: 100%; display: block; margin-left: auto; margin-right: auto; max-width: 420px; } @media (min-width: 576px) { .page-hero .d-grid.d-sm-block .btn-lg { width: auto; display: inline-block; margin: 0 .5rem 0 0; max-width: none; min-width: 160px; } .page-hero .d-grid.d-sm-block .btn-lg:last-child { margin-right: 0; } } .page-hero .btn-light { padding: .45rem .9rem; font-weight: 500; } /* RESPONSIVE (consolidated) */ @media (max-width: 374.98px) { .brand-logo { max-height: 40px; transform: none; } .page-hero-contact { padding: 2rem 0; text-align: center; } .page-hero-contact .display-6 { font-size: 1.8rem; } .page-hero-contact .lead { font-size: .95rem; } .page-hero-contact .btn-lg { font-size: .9rem; padding: .5rem 1rem; max-width: 300px; width: 100%; } .col-6.col-sm-4.col-md-3 { width: 100%; max-width: 160px; margin: 0 auto; } .team-member img { max-width: 100px; height: 100px; } } @media (max-width: 767.98px) { .page-hero { padding: 4rem 0; } .hero { min-height: 50vh; padding: 1.5rem 0; text-align: center; } .page-hero .display-6, .hero .display-5 { font-size: 2.25rem; } .hero .lead, .page-hero .lead { font-size: 1rem; } .page-hero-contact { padding: 3rem 0; text-align: center; } .page-hero-contact .btn-group, .page-hero-contact .mt-4 { display: flex; flex-direction: column; gap: 1rem; align-items: center; } .page-hero-contact .btn-lg { width: 100%; max-width: 300px; } .brand-logo { max-height: 48px; transform: none !important; } .col-6.col-sm-4.col-md-3 { width: 50%; } .team-member img { max-width: 120px; height: 120px; } .mission-card { margin-bottom: 1.5rem; } .d-grid.d-sm-block .btn-lg, .cta-bar .btn-lg { width: 100%; } .ratio-16x9 { margin-top: 1.5rem; } .about-hero h1 { font-size: clamp(2.25rem, 8vw, 2.75rem); } .about-hero .btn-light, .about-hero .btn-dg { width: 100%; } .about-team .team-member { padding: 1.5rem 1rem; } .contact-card .col-12.d-flex { align-items: flex-start; } } @media (min-width: 768px) and (max-width: 1279.98px) { .page-hero, .hero { padding: 4rem 0; } .page-hero .display-6, .page-hero-partner .display-6 { font-size: 2.5rem; } .page-hero-contact { padding: 4rem 0; } .page-hero-contact .display-6 { font-size: 2.5rem; } .page-hero-contact .lead { font-size: 1.1rem; } .page-hero_contact .btn-lg { font-size: 1rem; } .team-member img { max-width: 130px; height: 130px; } .col-6.col-sm-4.col-md-3 { width: 25%; } .timeline { padding-left: 2rem; } .timeline::before { left: .4rem; } .timeline li::before { left: .1rem; } }