:root{
--primary:#0f4d64;
--background:#f4f7fa;
--border:#e5e7eb;
--text:#1f2937;
}
*{box-sizing:border-box;}
/* Modern Sticky Header Offset Fix */
#1, #A, #B, #C, #D, #E, #F, #G, #H, #I, #J, #K, #L, #M, #N, #O, #P, #Q, #R, #S, #T, #U, #V, #W, #X, #Y, #Z
{
scroll-margin-top: 180px; /* Accounts for the entire height of the header */
}
/* Adjust dynamically for mobile if the A-Z row wraps and makes the header taller */
@media (max-width: 768px) {
#1, #A, #B, #C, #D, #E, #F, #G, #H, #I, #J, #K, #L, #M, #N, #O, #P, #Q, #R, #S, #T, #U, #V, #W, #X, #Y, #Z
{
scroll-margin-top: 220px; 
}
}
/* Responsive Heading Styles */
h1, h2, h3 {
color: var(--primary);
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.5em;
}
h1 {
/* Scales continuously from 2rem (mobile) to 3.25rem (desktop) */
font-size: clamp(1.5rem, 5vw, 2.5rem);
}
h2 {
/* Scales continuously from 1.5rem (mobile) to 2.25rem (desktop) */
font-size: clamp(1rem, 3.5vw, 1.5rem);
}
h3 {
/* Scales continuously from 1.25rem (mobile) to 1.65rem (desktop) */
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
main h2[id] {
scroll-margin-top: 180px;
}
@media (max-width: 768px) {
main h2[id] {
scroll-margin-top: 250px;
}
}
html {
scroll-behavior: auto;
}
body{
margin:0;
font-family:Inter, Arial, sans-serif;
background:var(--background);
color:var(--text);
}
header{
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.top-banner{
background:var(--primary);
color:white;
height:72px; /* Restored back to fixed height since wrapping is now disabled */
display:flex;
justify-content:space-between;
align-items:center;
padding:0 40px;
flex-wrap: nowrap; /* Forces everything strictly onto one single line */
overflow: hidden;
}
.main-nav{
background:white;
border-bottom:1px solid var(--border);
display:flex;
gap:32px;
padding:16px 40px;
}
.main-nav a{
text-decoration:none;
color:#334155;
font-weight:500;
}
.brand{
display:flex;
gap:12px;
align-items:center;
font-size: clamp(0.95rem, 2vw, 1.2rem); /* Fluid font size scales dynamically */
font-weight:600;
min-width: 0; /* Allows text elements to properly contract if needed */
}
.brand-text {
white-space: nowrap; /* Prevents text from breaking into 2-3 lines */
}
.atoz-nav {
display: flex;
flex-wrap: wrap;           /* Allows letters to wrap into a second row on small mobile screens */
white-space: normal;
justify-content: center;   /* Centers the alphabet nicely if it wraps */
/*gap: clamp(6px, 1.5vw, 12px);*/ /* Scales the gap dynamically between letters depending on screen width */
gap:32px;
padding: 12px 16px;
background: white;
border-bottom: 1px solid var(--border);
}
.atoz-nav a {
text-decoration: none;
color: #334155;
font-weight: 500;
font-size: clamp(0.85rem, 2.5vw, 1rem); /* Dynamically shrinks text size down to 0.85rem on tiny screens */
padding: 6px 8px;          /* Gives a good tap target area for mobile fingers */
border-radius: 4px;
transition: background 0.2s;
}
.atoz-nav a:hover {
background: #f1f5f9;
}
.atoz{
display:flex;
gap:12px;
align-items:center;
font-size: clamp(0.75rem, 2vw, 1.1rem); /* Fluid font size scales dynamically */
font-weight:600;
min-width: 0; /* Allows text elements to properly contract if needed */
}
.atoz-text {
display: block;
text-align: center;
white-space: normal;
word-wrap: break-word;
}
.atoz-text a {
display: inline-block;
padding: 6px 8px; /* Great for mobile finger taps */
margin: 2px;
text-decoration: none;
font-size: 0.95rem;
}
.logo{
width:42px;
height:42px;
border:1px solid rgba(255,255,255,.4);
border-radius:10px;
display:grid;
place-items:center;
flex-shrink:0; /* Ensures the icon doesn't squish down */
}
.university-logo {
flex-shrink: 0; /* Guarantees your Uni logo block doesn't compress or warp */
}
.container{
max-width:1400px;
margin:auto;
padding:32px;
}
.card,.hero-card{
background:white;
border:1px solid var(--border);
border-radius:18px;
padding:32px;
margin-bottom:24px;
box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.hero-card{
display:flex;
gap:32px;
}
.hero-icon{
width:90px;
height:90px;
border-radius:50%;
/* background:var(--primary);*/
color:white;
display:grid;
place-items:center;
font-size:2rem;
flex-shrink:0;
}
.hero-icon-wide{
width:180px;
height:90px;
border-radius:50%;
/* background:var(--primary);*/
color:white;
display:grid;
place-items:center;
font-size:2rem;
flex-shrink:0;
}
.hero-content h1{
margin:0 0 16px;
font-size: clamp(1.5rem, 5vw, 2.5rem);
}
.hero-content-wide h1{
margin:0 20px 16px;
ffont-size: clamp(1.5rem, 5vw, 2.5rem);
}
.card {
position: relative; /* Anchors absolute-positioned children to this card */
padding: 20px;       /* Keeps heading content from overlapping */
}
.card-image {
position: absolute;
top: 16px;           /* Adjust offset from the top edge */
right: 16px;         /* Adjust offset from the right edge */
height: clamp(30px, 3vw, 40px);
display: block;
width: auto;
}
.badges{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:24px;
}
.badge{
padding:8px 14px;
border-radius:10px;
background:#f1f5f9;
border:1px solid var(--border);
}
.green{background:#e7f7eb;color:#2f7d32;}
.blue{background:#edf5ff;color:#1f5fbf;}
.red{background:#FFDDDD;color:#FF0000;}
.yellow{background:#FFFFC0;color:#808000;}
.purple{background:#E4C5FF;color:#510096;}
.grey{background:#D6D6D6;color:#404040}
.lightgrey{background:#F3F4F6;color:#1F2937}
.mintgreen{background:#D1FAE5;color:#065F46}
.warmamber{background:#FEF3C7;color:#92400E}
.softcrimson{background:#FEE2E2;color:#991B1B}
.skyblue{background:#E0F2FE;color:#075985}
.softlavender{background:#E0E7FF;color:#3730A3}
.softviolet{background:#F3E8FF;color:#6B21A8}
.softiceteal{background:#CCFBF1;color:#115E59}
.blossompink{background:#FCE7F3;color:#9D174D}
.percent{
background:#dff5df;
color:#2f7d32;
padding:4px 10px;
border-radius:8px;
}
.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
.row{
padding:16px 0;
border-bottom:1px solid var(--border);
}
.row:last-child{border-bottom:none;}
.substance-card{
padding:24px;
border-radius:12px;
background:#EFFBEF;
border:1px solid #cfe8d0;
}
.substance-item {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Crucial: lets the concentration drop to the next line if squeezed */
gap: 12px;
padding: 8px 0;
}
.substance-name {
font-weight: 500;
flex: 1 1 200px; /* Allows the name to take up space, minimum 200px before wrapping */
min-width: 0;    /* Prevents layout overflow bugs */
word-break: break-word; /* Safe fallback for massive chemical names */
}
.substance-concentration {
font-weight: 600;
/* color: #0284c7;  /* Standout color for the metric */
white-space: nowrap; /* Ensures g/L stays glued to the number */
}
.formulation-item {
display: flex;
flex-direction: column; /* Stacked by default (narrow card / mobile) */
gap: 4px;
padding: 8px 0;
}
.formulation-rowheader {
font-weight: 500;
word-break: break-word; /* Safe fallback for massive chemical names */
}
/* Treat formulation-value as a block or flex box */
.formulation-value {
font-weight: 600;
/* color: #0284c7;  /* Standout color for the metric */
word-break: break-word;
display: block; 
text-align: left; /* Left-aligned on small screens */
width: 100%;
}
/* Ensure inline elements like tooltips & images align properly */
.formulation-value * {
display: inline-block;
vertical-align: baseline;
}
/* Desktop / Wide Screen View */
@media screen and (min-width: 600px) {
.formulation-item {
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
}
.formulation-rowheader {
flex: 0 0 auto !important;
max-width: 50%;
}
.formulation-value {
flex: 1 1 auto !important;
text-align: right !important; /* Forces right-alignment */
width: auto !important;
}
}
/* Clean up the bulleted list inside formulation-value */
.formulation-value ul {
margin: 0;             /* Removes huge browser default margins */
padding-left: 18px;    /* Pulls bullets flush to the left boundary */
}
.formulation-value li {
margin-bottom: 4px;    /* Tight, neat spacing between listed items */
color: #1e293b;
line-height: 1.4;
}
.row ul {
margin: 0;             /* Removes huge browser default margins */
padding-left: 18px;    /* Pulls bullets flush to the left boundary */
}
.row li {
margin-bottom: 4px;    /* Tight, neat spacing between listed items */
color: #1e293b;
line-height: 1.4;
}
.summary-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
.summary-box{
border:1px solid var(--border);
border-radius:12px;
padding:20px;
}
/* Mobile Responsiveness Optimizations */
@media(max-width:900px){
.container {
padding: 16px;
}
.top-banner {
padding: 0 16px; /* Tightens header edges to maximize horizontal space */
gap: 12px;
}
.hero-card {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.hero-content h1{
font-size:2.5rem;
}
.badges {
justify-content: center;
}
.grid,
.summary-grid{
grid-template-columns: 1fr;
}
.main-nav{
padding:16px 20px;
flex-wrap:wrap;
gap: 16px;
justify-content: center;
}
}
/* Hard cutoff adjustment for small mobile phones (e.g., widths under 480px) */
@media(max-width:480px){
.pfcphoto {
display: none; /* Hides the small chemical icon placeholder on tiny phones to save space */
}
.logo {
display: none; /* Hides the small chemical icon placeholder on tiny phones to save space */
}
.brand-text {
font-size: 0.85rem; /* Scales text down slightly further so everything sits neatly side-by-side */
}
.atoz-text {
font-size: 0.75rem; /* Scales text down slightly further so everything sits neatly side-by-side */
}
}
/* ---------- Image styling ----------  */
.logoWide {
/* Clamps height: min size 20px on small screens, scale automatically up to max 42px on desktop */
height: clamp(20px, 3.5vw, 42px); 
display: block;
width: auto;
}
.DiagramWide {
/* Clamps height: min size 20px on small screens, scale automatically up to max 42px on desktop */
height: clamp(60px, 50vw, 800px); 
display: block;
width: auto;
}
.logoTall {
height: clamp(60px, 5vw, 120px);
display: block;
width: auto;
}
/* ---- Tooltip styles ---- */
/* ---- Tooltip container ---- */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
.tooltip2 {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext,
.tooltip2 .tooltiptext {
visibility: hidden;
position: absolute;
bottom: 125%;
/* Default state: Perfectly centered over text */
left: 50%;
transform: translateX(-50%);
width: 320px;
max-width: calc(100vw - 20px); /* Prevents overflow on ultra-narrow screens */
box-sizing: border-box;
background-color: #215868;
color: #FFFFFF;
text-align: center;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid #FFFFFF;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Link Styling */
.tooltip .tooltiptext a,
.tooltip .tooltiptext a:link,
.tooltip .tooltiptext a:visited,
.tooltip .tooltiptext a:hover,
.tooltip .tooltiptext a:active,
.tooltip2 .tooltiptext a,
.tooltip2 .tooltiptext a:link,
.tooltip2 .tooltiptext a:visited,
.tooltip2 .tooltiptext a:hover,
.tooltip2 .tooltiptext a:active {
color: #28FEF1 !important;
text-decoration: underline;
}
/* Downward Arrow */
.tooltip .tooltiptext::after,
.tooltip2 .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #215868 transparent transparent transparent;
}
/* Display on Hover */
.tooltip:hover .tooltiptext,
.tooltip2:hover .tooltiptext {
visibility: visible;
}
/* --- Dropdown Container for menu --- */
.dropdown {
position: relative;
display: inline-block;
outline: none; /* Removes default browser focus outline on tap */
}
/* Ensure the top link inside the dropdown matches other nav links */
.dropdown .dropdown-toggle {
text-decoration: none;
color: #334155;
font-weight: 500;
cursor: pointer;
display: inline-block;
}
/* --- Dropdown Menu Box --- */
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
background-color: #ffffff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 8px 0;
margin-top: 8px; /* Gap between link and dropdown */
z-index: 1001;
}
/* Invisible bridge to prevent menu closing when moving cursor over the gap */
.dropdown-menu::before {
content: "";
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
/* Menu Item Links */
.dropdown-menu a {
display: block;
padding: 8px 16px;
color: #334155;
text-decoration: none;
font-size: 0.95rem;
font-weight: 400;
transition: background 0.2s, color 0.2s;
}
.dropdown-menu a:hover {
background-color: #f1f5f9;
color: var(--primary);
}
/* --- Trigger: Show menu on Hover (Desktop) OR Click/Tap Focus (Touchscreen) --- */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
display: block;
}
/* ---- Pure CSS Pop-Up Windows (Scrollbar-Safe) ---- */
/* Overlay: Dimmed screen background */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6); /* Dims background */
z-index: 99999;
/* Centering alignment */
display: flex;
justify-content: center;
align-items: center;
/* Hidden state by default */
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease, visibility 0.2s ease;
/* Prevent clicks through invisible container */
pointer-events: none;
}
/* Shows the pop-up when targeted */
.popup-overlay:target {
visibility: visible;
opacity: 1;
pointer-events: auto; /* Re-enable pointer events when visible */
}
/* BACKDROP LINK: Covers screen behind the box */
.popup-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
cursor: default;
}
/* Main Box Window */
.popup-box {
position: relative;
z-index: 2; /* <--- THIS WAS MISSING: Places the box above the backdrop link */
background-color: #FFFFFF;
color: #333333;
width: 480px;
max-width: 85vw;
max-height: 80vh;
/* FIXED: Prevent flexbox height bugs in Android WebKit */
height: auto;
display: flex;
flex-direction: column;
border-radius: 8px;
border: 2px solid #215868;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
}
/* INNER SCROLLING CONTAINER: Keeps scrollbar isolated */
.popup-content {
/* FIXED: Force vertical scrolling engine on mobile */
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* Momentum scrolling for mobile */
padding: 24px 28px 24px 24px; /* Extra padding on right for scrollbar clearance */
max-height: calc(80vh - 4px);
box-sizing: border-box;
}
/* FORCED MOBILE SCROLLBAR VISIBILITY (Samsung Internet / WebKit) */
.popup-content::-webkit-scrollbar {
width: 6px; /* Gives the scrollbar a physical width */
display: block;
}
.popup-content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05); /* Light background track */
border-radius: 4px;
}
.popup-content::-webkit-scrollbar-thumb {
background-color: #215868; /* Scrollbar thumb matches theme */
border-radius: 4px;
}
.popup-content h3 {
margin-top: 0;
color: #215868;
}
/* Close Button ('X') */
.popup-close {
position: absolute;
top: 10px;
right: 14px;
font-size: 24px;
font-weight: bold;
color: #215868;
text-decoration: none;
line-height: 1;
z-index: 3; /* Sits above content */
background: #FFFFFF;
padding: 2px 6px;
border-radius: 4px;
}
.popup-close:hover {
color: #28FEF1;
}
/* Hyperlink style */
.info-link {
color: #215868;
font-weight: bold;
text-decoration: none;
}