/* BASE STYLES - Modern Sans-Serif Stack */ body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #ffffff; color: #000000; margin: 0; padding: 10px; line-height: 1.6; max-width: 900px; margin-left: auto; margin-right: auto; } /* ENGLISH SANS SERIF STACK */ [lang="en"]{ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* TAMIL SERIF STACK */ [lang="ta"] { /* Updated to Tiro Tamil */ font-family: 'Tiro Tamil', 'Tamil MN', serif; font-size: 0.95em; /* Tiro is slightly more delicate than Noto, so 0.95em is usually safe */ } /* HINDI SERIF STACK */ [lang="hi"] { font-family: 'Tiro Devanagari Hindi', 'Devanagari Sangam MN', serif; } /* MARATHI SERIF STACK */ [lang="mr"] { /* Tiro has a specific variant for Marathi typesetting */ font-family: 'Tiro Devanagari Marathi', 'Devanagari Sangam MN', serif; } /* SANSKRIT SERIF STACK */ [lang="sa"] { font-family: 'Tiro Devanagari Sanskrit', serif; } /* LINK COLOR: #0077CC (Recommended) */ a { color: #0077CC; text-decoration: none; } a:hover { text-decoration: underline; } /* HEADER & RAINBOW LINES */ header { margin-bottom: 30px; } /* The Rainbow Line */ .rainbow-line { height: 4px; border: none; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); margin: 15px 0; } /* QUOTE SECTION */ .quote-block { max-width: 75%; margin: 0 auto; padding-bottom: 10px; } .quote-line { font-size: 1.2em; text-align: center; margin-top: 10px; font-style: italic; } .attribution { font-size: 0.7em; display: block; text-align: right; margin-bottom: 5px; } /* 2. QUOTE OVERRIDE RULE (NEW): This targets the quote on the Tamil page (only where html[lang="ta"] is active). The factor 1.29em (1.2 / 0.93 ≈ 1.29) is used to perfectly compensate for the 0.93em scaling from the parent tag, making the final computed size exactly 1.2em of the root size. */ html[lang="ta"] .quote-line { font-size: 1.29em; } html[lang="ta"] .attribution { font-size: 0.753em; } /* PROFILE SECTION: MAIN CONTAINERS (APPLYING 0.75 WIDTH) */ .profile-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 30px; max-width: 75%; margin-left: auto; margin-right: auto; } /* CONTACT INFO: TYPOGRAPHY AND SPACING */ .contact-info { flex: 1; padding-right: 10px; } /* Styling the H1 to look visually like an H2 */ .contact-info h1 { font-size: 1.8em; margin-top: 0; margin-bottom: 5px; } .contact-info p.name-translations { font-size: 1.2em; line-height: 1.1; margin-top: 5px; margin-bottom: 15px; font-weight: normal; } /* 2. NAME TRANSLATIONS on TAMIL PAGE This targets the name translations on the Tamil page (only where html[lang="ta"] is active). The factor 1.29em (1.2 / 0.93 ≈ 1.29) is used to perfectly compensate for the 0.93em scaling from the parent tag, making the final computed size exactly 1.2em of the root size. */ .contact-info p.name-translations-tamil { font-size: 1.29em; line-height: 1.1; margin-top: 5px; margin-bottom: 15px; font-weight: normal; } .contact-info p { margin-top: 15px; margin-bottom: 0; } .profile-photo { flex: 0 0 auto; text-align: center; } .profile-photo img { max-width: 200px; height: auto; } /* BIO SECTION (Full width since no constraint applied) */ .bio { margin-bottom: 30px; text-align: justify; } /* NAVIGATION */ nav ul { padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 15px; border-top: 1px solid #ccc; padding-top: 15px; } nav li { font-weight: bold; } .nav-center-text { text-align: center; } /* General Separator Rule for new line */ .separator { border: 0; height: 1px; background-color: #ccc; margin: 20px 0; } /* MOBILE TWEAKS */ @media (max-width: 768px) { .profile-container { max-width: 95%; flex-direction: column; margin-left: auto; margin-right: auto; align-items: center; } .profile-photo { margin: 0 auto; display: block; } .contact-info { padding-right: 0; text-align: center; } nav ul { flex-direction: column; justify-content: flex-start; } .nav-center-text { text-align: left; } .quote-block { max-width: 95%; } } /* --- Custom Rules for Denser Content (e.g., Students Page) --- */ /* Targets all main content within the compact section */ .compact-content h1, .compact-content h2 { margin-top: 20px; margin-bottom: 8px; /* Reduces space below headers */ } /* Targets paragraphs within a compact section */ .compact-content p { margin-top: 5px; margin-bottom: 5px; } /* Targets ordered and unordered lists within a compact section */ .compact-content ol, .compact-content ul { line-height: 1.4; /* Reduces line spacing (default is 1.6) */ padding-left: 25px; margin-top: 5px; margin-bottom: 5px; } /* Targets list items within a compact section */ .compact-content ol li, .compact-content ul li { margin-bottom: 2px; /* Minimizes space between list items */ } /* --- Mobile Tweak for Denser Lists on Small Screens (for students.html) --- */ @media (max-width: 500px) { /* Only applies to screens 500px wide or less (typical phone size) */ .compact-content ol, .compact-content ul { line-height: 1.5; /* Slightly less dense than the desktop 1.4 */ padding-left: 20px; } .compact-content ol li, .compact-content ul li { margin-bottom: 5px; /* Adds a bit more space between list items on mobile */ } /* Ensure long links/text can break gracefully */ .compact-content p, .compact-content li { word-wrap: break-word; overflow-wrap: break-word; } } /* TEXT WRAPPING STYLE */ .inline-photo-right { float: right; margin-left: 25px; /* Space between text and image */ margin-bottom: 15px; /* Space below the image */ max-width: 350px; /* Constrains the image size so text has room */ } .inline-photo-right img { width: 100%; height: auto; display: block; border: 1px solid #eee; /* Optional: subtle border */ } .inline-photo-right figcaption { font-size: 0.8em; color: #555; margin-top: 8px; text-align: center; line-height: 1.3; } /* MOBILE RESPONSIVENESS: Reset to centered when screen is narrow */ @media (max-width: 600px) { .inline-photo-right { float: none; /* Stops wrapping */ margin: 20px auto; /* Centers the block */ max-width: 90%; /* Allows it to be wider on mobile */ } } /* NEWS ITEM HIGHLIGHT BLOCK */ .news-item { margin-bottom: 20px; padding: 10px; background-color: #f0f7ff; border-left: 4px solid #0077CC; }