/* ============================================================ Photodermatology VPP — Custom Styles Colour palette: Navy #0f2554 | Gold #c8a45a Taupe #5c544e | Cream #f7f5f2 ============================================================ */ /* Google Fonts already loaded via in */ body { font-family: 'Inter', system-ui, sans-serif; background-color: #f7f5f2; color: #1c1c1c; } h1, h2, h3, .font-serif { font-family: 'Playfair Display', Georgia, serif; } /* ---- Navigation -------------------------------------------- */ .nav-link { position: relative; padding-bottom: 2px; transition: color 0.2s; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background-color: #c8a45a; transform: scaleX(0); transition: transform 0.2s; } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .nav-link.active { color: #c8a45a !important; } /* Mobile menu hidden by default */ #mobile-menu { display: none; } #mobile-menu.open { display: block; } /* ---- Hero -------------------------------------------------- */ .hero-gradient { background: linear-gradient(140deg, #091840 0%, #0f2554 50%, #162d6b 100%); } .page-hero { background: linear-gradient(140deg, #091840 0%, #0f2554 60%, #162d6b 100%); } /* ---- Reusable section accent ----------------------------- */ .gold-bar { display: block; width: 52px; height: 3px; background-color: #c8a45a; border-radius: 2px; margin: 0.75rem 0 1.5rem; } /* ---- Cards ----------------------------------------------- */ .card-hover { transition: transform 0.22s ease, box-shadow 0.22s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(15, 37, 84, 0.14); } .prog-card { border-top: 4px solid #c8a45a; transition: transform 0.22s ease, box-shadow 0.22s ease; } .prog-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(15, 37, 84, 0.14); } /* ---- Lists ----------------------------------------------- */ .diamond-list li { padding-left: 1.4rem; position: relative; margin-bottom: 0.5rem; } .diamond-list li::before { content: '◆'; color: #c8a45a; font-size: 0.45rem; position: absolute; left: 0; top: 0.45rem; } /* ---- Faculty card ---------------------------------------- */ .faculty-card { border-left: 4px solid #c8a45a; } /* ---- Table ----------------------------------------------- */ .req-table th { background-color: #0f2554; color: #f7f5f2; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem 1rem; text-align: left; } .req-table td { padding: 0.875rem 1rem; font-size: 0.9rem; vertical-align: top; border-bottom: 1px solid #e8e3dc; } .req-table tr:hover td { background-color: #ede9e3; } /* ---- Affiliation list ----------------------------------- */ .affil-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #e8e3dc; } .affil-item:last-child { border-bottom: none; } .affil-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background-color: #c8a45a; margin-top: 0.45rem; } /* ---- Smooth scroll --------------------------------------- */ html { scroll-behavior: smooth; } /* ---- Print ----------------------------------------------- */ @media print { nav, footer, #mobile-menu { display: none !important; } }