/* ========================================================================== TMSS Grand Health Sector — Modern Theme A clean, healthcare-forward design system: deep clinical green + calm teal, generous whitespace, soft organic shapes instead of hard boxes. ========================================================================== */ :root{ /* --- Brand palette (kept the organisation's signature green) --- */ --green-900:#07421f; --green-800:#0a5c2c; --green-700:#0b8e36; /* brand green, unchanged from the original site */ --green-600:#12a344; --green-100:#e6f5ea; --teal-700:#0e6e83; /* companion accent — calm clinical teal */ --teal-500:#1490ab; --gold-500:#d79a2c; /* small warm accent for dates / highlights only */ --ink-900:#0e2016; --ink-700:#2b3b32; --ink-500:#5c6d63; --ink-300:#93a49a; --bg-page:#f6f9f7; --bg-card:#ffffff; --line:#e3ece5; --radius-lg:22px; --radius-md:14px; --radius-sm:9px; --shadow-sm:0 2px 10px rgba(14,32,22,.06); --shadow-md:0 10px 30px rgba(10,60,30,.10); --shadow-lg:0 24px 60px rgba(10,60,30,.16); --font-head:'Poppins', 'Nunito', sans-serif; --font-body:'Nunito', sans-serif; --container:1200px; } /* --------------------------------- Reset --------------------------------- */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth; scroll-padding-top:110px;} body{ margin:0; font-family:var(--font-body); color:var(--ink-700); background:var(--bg-page); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--ink-900);margin:0 0 .5em;font-weight:700;line-height:1.25;} p{margin:0 0 1em;} .container{max-width:var(--container);margin:0 auto;padding:0 24px;} section{position:relative;} button{font-family:inherit;} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} } /* Focus visibility */ a:focus-visible,button:focus-visible,input:focus-visible{ outline:3px solid var(--teal-500); outline-offset:2px; border-radius:4px; } /* ------------------------------ Reveal-on-scroll -------------------------- Content is visible by default (no-JS safe). The hidden starting state only applies once html.js-anim is set by a tiny inline script in . The effect uses CSS keyframes on `translate`/`opacity`, so it never fights with the `transform` used by hover animations on cards. */ html.js-anim .reveal, html.js-anim .reveal-stagger > *{opacity:0;} html.js-anim .reveal.in-view{animation:rise .7s ease both;} html.js-anim .reveal-stagger.in-view > *{animation:rise .6s ease both;} html.js-anim .reveal-stagger.in-view > *:nth-child(1){animation-delay:.05s;} html.js-anim .reveal-stagger.in-view > *:nth-child(2){animation-delay:.14s;} html.js-anim .reveal-stagger.in-view > *:nth-child(3){animation-delay:.23s;} html.js-anim .reveal-stagger.in-view > *:nth-child(4){animation-delay:.32s;} html.js-anim .reveal-stagger.in-view > *:nth-child(5){animation-delay:.40s;} html.js-anim .reveal-stagger.in-view > *:nth-child(6){animation-delay:.48s;} @keyframes rise{ from{opacity:0;translate:0 26px;} to{opacity:1;translate:0 0;} } /* --------------------------------------------------------------------------- Section heading --------------------------------------------------------------------------- */ .section-head{max-width:640px;margin:0 auto 46px;text-align:center;} .section-head .kicker{ display:inline-flex;align-items:center;gap:8px; color:var(--green-700);font-weight:700;font-size:.82rem;letter-spacing:.02em; margin-bottom:10px; } .section-head .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-700);} .section-head h2{font-size:clamp(1.6rem,2.6vw,2.3rem);} .section-head p{color:var(--ink-500);} .section-pad{padding:88px 0;} @media (max-width:768px){.section-pad{padding:56px 0;}} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 26px;border-radius:999px;font-weight:700;font-size:.95rem; border:2px solid transparent;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease; white-space:nowrap; } .btn:hover{transform:translateY(-3px);} .btn-primary{background:var(--green-700);color:#fff;box-shadow:var(--shadow-sm);} .btn-primary:hover{background:var(--green-800);box-shadow:var(--shadow-md);} .btn-outline{background:transparent;border-color:var(--green-700);color:var(--green-700);} .btn-outline:hover{background:var(--green-700);color:#fff;} .btn-outline-teal{background:transparent;border-color:var(--teal-700);color:var(--teal-700);} .btn-outline-teal:hover{background:var(--teal-700);color:#fff;} .btn-sm{padding:8px 16px;font-size:.82rem;} .btn-ghost-light{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(6px);} .btn-ghost-light:hover{background:#fff;color:var(--green-800);} /* --------------------------------------------------------------------------- Top utility bar --------------------------------------------------------------------------- */ .topbar{ background:var(--green-900); color:#dcf3e3; font-size:.85rem; } .topbar .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:8px;padding-bottom:8px;} .topbar .tb-phone{display:flex;align-items:center;gap:8px;font-weight:600;} .topbar .tb-phone i{color:var(--green-600);} .topbar .tb-phone a{color:inherit;} .topbar .tb-social{display:flex;gap:10px;} .topbar .tb-social a{ width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center;font-size:.8rem; transition:background .2s ease, transform .2s ease; } .topbar .tb-social a:hover{background:var(--green-600);transform:translateY(-2px);} /* --------------------------------------------------------------------------- Main navigation --------------------------------------------------------------------------- */ .site-header{position:sticky;top:0;z-index:1000;overflow-x:clip;background:#fff;transition:box-shadow .3s ease, padding .3s ease;box-shadow:0 1px 0 var(--line);} .site-header.is-scrolled{box-shadow:var(--shadow-md);} .navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;transition:padding .3s ease;} .site-header.is-scrolled .navbar{padding:9px 0;} .brand{display:flex;align-items:center;gap:10px;} .brand img{height:46px;width:auto;transition:height .3s ease;} .site-header.is-scrolled .brand img{height:38px;} .nav-toggle{ display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line); background:#fff;align-items:center;justify-content:center;cursor:pointer; } .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ content:"";display:block;width:20px;height:2px;background:var(--ink-900);position:relative;transition:.25s; } .nav-toggle span::before{position:absolute;top:-7px;} .nav-toggle span::after{position:absolute;top:7px;} .nav-toggle.active span{background:transparent;} .nav-toggle.active span::before{top:0;transform:rotate(45deg);} .nav-toggle.active span::after{top:0;transform:rotate(-45deg);} .main-menu{display:flex;align-items:center;gap:2px;} .main-menu > li{position:relative;} .main-menu > li > a{ display:flex;align-items:center;gap:6px;padding:12px 16px;font-weight:700;font-size:.95rem; color:var(--ink-900);border-radius:10px;transition:color .2s ease,background .2s ease; } .main-menu > li > a i{font-size:.65em;opacity:.6;} .main-menu > li > a:hover,.main-menu > li.open > a{color:var(--green-700);background:var(--green-100);} .main-menu > li.active > a{color:var(--green-700);} .submenu{ position:absolute;top:100%;left:0;min-width:260px;background:#fff;border-radius:var(--radius-md); box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .22s ease,transform .22s ease,visibility .22s ease;border:1px solid var(--line); z-index:50; } .main-menu > li:hover > .submenu,.main-menu > li.open > .submenu{opacity:1;visibility:visible;transform:translateY(0);} .submenu li{position:relative;} .submenu li > a{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:11px 14px;border-radius:8px;font-weight:600;font-size:.9rem;color:var(--ink-700);} .submenu li > a:hover{background:var(--green-100);color:var(--green-800);} .submenu .submenu{top:0;left:100%;margin-left:6px;} @media (min-width:993px){ .submenu li:hover > .submenu{opacity:1;visibility:visible;transform:translateY(0);} } @media (max-width:992px){ .nav-toggle{display:flex;} .main-menu{ position:fixed;top:0;right:0;height:100vh;width:min(340px,86vw);background:#fff; flex-direction:column;align-items:stretch;padding:90px 18px 30px;gap:2px; box-shadow:-10px 0 40px rgba(0,0,0,.18); transform:translateX(100%);transition:transform .35s ease;overflow-y:auto; } .main-menu.open{transform:translateX(0);} .main-menu > li > a{padding:14px 12px;} .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none; max-height:0;overflow:hidden;padding:0 0 0 14px;transition:max-height .3s ease;} .submenu li > a{padding:10px 12px;} .main-menu > li.open > .submenu{max-height:1200px;padding-top:6px;padding-bottom:6px;} .submenu .submenu{margin-left:0;} .nav-backdrop{position:fixed;inset:0;background:rgba(8,20,13,.5);opacity:0;visibility:hidden;transition:.3s;z-index:900;} .nav-backdrop.open{opacity:1;visibility:visible;} } /* --------------------------------------------------------------------------- News ticker --------------------------------------------------------------------------- */ .ticker{background:var(--green-700);color:#fff;} .ticker .container{display:flex;align-items:stretch;gap:18px;padding:0;} .ticker-label{ flex:none;display:flex;align-items:center;gap:8px;padding:11px 18px 11px 0;font-weight:800;font-size:.9rem; white-space:nowrap; } .ticker-label i{font-size:1rem;} .ticker-track-wrap{flex:1;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);} .ticker-track{display:flex;gap:60px;white-space:nowrap;padding:11px 0;animation:ticker 32s linear infinite;width:max-content;} .ticker:hover .ticker-track{animation-play-state:paused;} .ticker-track a{font-size:.92rem;font-weight:600;opacity:.96;} @keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}} .ticker.is-empty{display:none;} /* --------------------------------------------------------------------------- Hero --------------------------------------------------------------------------- */ .hero{position:relative;height:min(78vh,640px);min-height:400px;overflow:hidden;background:var(--green-900);} .hero-slide{ position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease; background-size:cover;background-position:center; } .hero-slide.active{opacity:1;} .hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(7,44,22,.55) 0%,rgba(7,44,22,.35) 40%,rgba(7,44,22,.82) 100%); z-index:1; } .hero-content{position:absolute;z-index:2;inset:0;display:flex;align-items:flex-end;padding-bottom:96px;} .hero-content .eyebrow{color:#bdf0cd;font-weight:700;letter-spacing:.02em;margin-bottom:10px;display:flex;align-items:center;gap:8px;} .hero-content .eyebrow::before{content:"";width:30px;height:2px;background:var(--green-600);} .hero-content h1{color:#fff;font-size:clamp(1.9rem,4.2vw,3.1rem);max-width:720px;text-shadow:0 4px 24px rgba(0,0,0,.35);} .hero-content p{color:#e7f5ea;max-width:560px;font-size:1.05rem;} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;} .hero-nav{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;display:flex;align-items:center;justify-content:center; cursor:pointer;transition:background .2s ease;backdrop-filter:blur(4px);} .hero-nav:hover{background:rgba(255,255,255,.32);} .hero-prev{left:20px;} .hero-next{right:20px;} @media (max-width:640px){.hero-nav{display:none;}} .hero-dots{position:absolute;z-index:3;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:9px;} .hero-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:.25s;} .hero-dots button.active{background:#fff;width:26px;border-radius:6px;} /* --------------------------------------------------------------------------- Quick-link feature cards (overlapping hero bottom edge) --------------------------------------------------------------------------- */ .quick-links{position:relative;z-index:5;margin-top:-64px;} .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} @media (max-width:900px){.quick-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:480px){.quick-grid{grid-template-columns:1fr;}} .quick-card{ position:relative;overflow:hidden;display:block; background:#fff;border-radius:var(--radius-md);padding:26px 20px;text-align:center;box-shadow:var(--shadow-md); border:1px solid var(--line); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease; } .quick-card::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px; background:linear-gradient(90deg,var(--green-600),var(--teal-500)); transform:scaleX(0);transform-origin:left;transition:transform .45s ease; } .quick-card::after{ content:"\f061";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.85rem; position:absolute;right:16px;bottom:14px;color:var(--green-700); opacity:0;transform:translateX(-10px);transition:opacity .3s ease,transform .3s ease; } .quick-card:hover,.quick-card:focus-visible{ transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:var(--green-100); } .quick-card:hover::before,.quick-card:focus-visible::before{transform:scaleX(1);} .quick-card:hover::after,.quick-card:focus-visible::after{opacity:1;transform:translateX(0);} .quick-card .icon-wrap{ width:68px;height:68px;border-radius:50%;background:var(--green-100);display:flex;align-items:center;justify-content:center; margin:0 auto 16px;position:relative; transition:transform .45s cubic-bezier(.3,1.6,.5,1),background .3s ease,box-shadow .3s ease; } .quick-card .icon-wrap::after{ content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--green-600); opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .4s ease; } .quick-card:hover .icon-wrap,.quick-card:focus-visible .icon-wrap{ transform:scale(1.14) rotate(-6deg);background:#fff;box-shadow:0 8px 22px rgba(11,142,54,.25); } .quick-card:hover .icon-wrap::after,.quick-card:focus-visible .icon-wrap::after{opacity:.55;transform:scale(1);} .quick-card .icon-wrap img{width:36px;height:36px;object-fit:contain;transition:transform .45s ease;} .quick-card:hover .icon-wrap img{transform:translateY(-2px) scale(1.06);} .quick-card h4{font-size:1.02rem;margin:0;transition:color .3s ease;} .quick-card:hover h4{color:var(--green-700);} /* --------------------------------------------------------------------------- Leadership messages --------------------------------------------------------------------------- */ .leader-row{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:center;} .leader-row.reverse{grid-template-columns:1fr 280px;} .leader-row.reverse .leader-photo{order:2;} .leader-row + .leader-row{margin-top:56px;padding-top:56px;border-top:1px solid var(--line);} @media (max-width:760px){ .leader-row,.leader-row.reverse{grid-template-columns:1fr;text-align:center;} .leader-row.reverse .leader-photo{order:0;} } .leader-photo{position:relative;} .leader-photo .blob{ position:absolute;inset:-14px;z-index:0;border-radius:44% 56% 60% 40% / 46% 40% 60% 54%; background:linear-gradient(135deg,var(--green-600),var(--teal-500));opacity:.18; } .leader-photo img{ position:relative;z-index:1;width:230px;height:230px;object-fit:cover;border-radius:50%; margin:0 auto;border:6px solid #fff;box-shadow:var(--shadow-md); } .leader-copy .kicker{color:var(--teal-700);font-weight:700;font-size:.85rem;margin-bottom:6px;display:block;} .leader-copy h3{font-size:1.35rem;margin-bottom:2px;} .leader-copy h5{color:var(--ink-500);font-weight:700;font-size:.92rem;margin-bottom:14px;} .leader-copy p{color:var(--ink-700);text-align:justify;} /* --------------------------------------------------------------------------- Institutes / Prospectus — horizontal snap carousels --------------------------------------------------------------------------- */ .hcarousel-wrap{position:relative;} .hcarousel{ display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 22px; scrollbar-width:thin;scrollbar-color:var(--green-700) var(--line); } .hcarousel::-webkit-scrollbar{height:7px;} .hcarousel::-webkit-scrollbar-thumb{background:var(--green-700);border-radius:10px;} .hcarousel::-webkit-scrollbar-track{background:var(--line);border-radius:10px;} .inst-card{ flex:none;scroll-snap-align:start;width:270px;border-radius:var(--radius-md);overflow:hidden; background:#fff;box-shadow:var(--shadow-sm);border:1px solid var(--line);cursor:pointer; transition:transform .3s ease,box-shadow .3s ease; } .inst-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .inst-card .thumb{height:170px;overflow:hidden;position:relative;} .inst-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .inst-card:hover .thumb img{transform:scale(1.08);} .inst-card .tag{ position:absolute;top:10px;left:10px;background:rgba(10,60,30,.85);color:#fff;font-size:.72rem;font-weight:700; padding:4px 10px;border-radius:999px;letter-spacing:.02em; } .inst-card .cap{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;} .inst-card .cap span{font-weight:700;font-size:.92rem;color:var(--ink-900);} .inst-card .cap i{color:var(--green-700);transition:transform .25s ease;} .inst-card:hover .cap i{transform:translateX(4px);} .pros-card{ flex:none;scroll-snap-align:start;width:190px;border-radius:var(--radius-md);overflow:hidden; background:#fff;box-shadow:var(--shadow-sm);border:1px solid var(--line);cursor:pointer;text-align:center; transition:transform .3s ease,box-shadow .3s ease; } .pros-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .pros-card .thumb{height:230px;background:var(--green-100);display:flex;align-items:center;justify-content:center;overflow:hidden;} .pros-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .pros-card:hover .thumb img{transform:scale(1.07);} .pros-card .cap{padding:12px 10px;} .pros-card .cap b{display:block;font-size:.86rem;color:var(--ink-900);margin-bottom:6px;} .pros-card .cap span{font-size:.76rem;color:var(--green-700);font-weight:700;} .hcarousel-btn{ position:absolute;top:44%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff; border:1px solid var(--line);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center; cursor:pointer;z-index:5;color:var(--green-800);transition:background .2s ease; } .hcarousel-btn:hover{background:var(--green-100);} .hcarousel-prev{left:-6px;} .hcarousel-next{right:-6px;} @media (max-width:640px){.hcarousel-btn{display:none;}} /* --------------------------------------------------------------------------- Notice / News / Research / Bulletin two-up lists --------------------------------------------------------------------------- */ .split-two{display:grid;grid-template-columns:1fr 1fr;gap:34px;} @media (max-width:820px){.split-two{grid-template-columns:1fr;}} .info-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow-sm);} .info-panel .panel-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;} .info-panel .panel-head .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff;flex:none;} .info-panel .panel-head h3{margin:0;font-size:1.2rem;} .ic-green{background:var(--green-700);} .ic-teal{background:var(--teal-700);} .notice-list{display:flex;flex-direction:column;gap:4px;max-height:290px;overflow-y:auto;padding-right:4px;} .notice-list::-webkit-scrollbar{width:6px;} .notice-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;} .notice-row{display:flex;align-items:center;gap:16px;padding:13px 4px;border-bottom:1px dashed var(--line);} .notice-row:last-child{border-bottom:none;} .date-chip{ flex:none;width:58px;height:58px;border-radius:12px;background:var(--green-100);color:var(--green-800); display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1.05; } .date-chip b{font-size:1.15rem;} .date-chip small{font-size:.65rem;font-weight:700;opacity:.8;} .notice-row a{font-weight:700;color:var(--ink-900);font-size:.94rem;} .notice-row a:hover{color:var(--green-700);} .dl-list{display:flex;flex-direction:column;gap:14px;max-height:290px;overflow-y:auto;padding-right:4px;margin-bottom:18px;} .dl-list::-webkit-scrollbar{width:6px;} .dl-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;} .dl-row{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px dashed var(--line);} .dl-row:last-child{border-bottom:none;padding-bottom:0;} .dl-row p{margin:0;font-size:.92rem;color:var(--ink-700);text-align:left;font-weight:600;} .dl-row .btn{flex:none;} /* --------------------------------------------------------------------------- Gallery --------------------------------------------------------------------------- */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} @media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:480px){.gallery-grid{grid-template-columns:1fr;}} .gallery-item{position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;box-shadow:var(--shadow-sm);} .gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .gallery-item:hover img{transform:scale(1.1);} .gallery-item .zoom-hint{ position:absolute;inset:0;background:rgba(9,40,22,0);display:flex;align-items:center;justify-content:center; transition:background .3s ease; } .gallery-item:hover .zoom-hint{background:rgba(9,40,22,.35);} .gallery-item .zoom-hint i{color:#fff;font-size:1.4rem;opacity:0;transform:scale(.7);transition:.3s ease;} .gallery-item:hover .zoom-hint i{opacity:1;transform:scale(1);} .lightbox{position:fixed;inset:0;background:rgba(6,20,12,.92);z-index:2000;display:none;align-items:center;justify-content:center;padding:30px;} .lightbox.open{display:flex;} .lightbox img{max-width:min(90vw,1000px);max-height:86vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);} .lightbox-close{position:absolute;top:26px;right:30px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;} .lightbox-close:hover{background:rgba(255,255,255,.25);} /* --------------------------------------------------------------------------- Footer --------------------------------------------------------------------------- */ .site-footer{background:var(--green-900);color:#cfe7d7;} .footer-top{padding:70px 0 40px;} .footer-grid{display:grid;grid-template-columns:1.3fr 1.4fr 1fr;gap:44px;} @media (max-width:900px){.footer-grid{grid-template-columns:1fr;}} .footer-grid h4{color:#fff;font-size:1.05rem;margin-bottom:18px;position:relative;} .f-about img{height:44px;margin-bottom:16px;filter:brightness(0) invert(1);opacity:.95;} .f-about p{color:#aecdb8;font-size:.92rem;text-align:justify;} .f-links-grid{columns:2;column-gap:20px;} .f-links-grid li{margin-bottom:10px;break-inside:avoid;} .f-links-grid a{font-size:.86rem;color:#bfdcc9;line-height:1.4;display:inline-block;} .f-links-grid a:hover{color:#fff;} .f-contact li{display:flex;gap:10px;margin-bottom:12px;font-size:.92rem;color:#cfe7d7;} .f-contact li i{color:var(--green-600);margin-top:3px;} .f-hours{margin-top:20px;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;} .f-hours .row-h{display:flex;justify-content:space-between;font-size:.88rem;padding:5px 0;color:#bfdcc9;} .f-hours .closed{color:#e79c9c;font-weight:700;} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;text-align:center;font-size:.85rem;color:#9fc2ac;} .footer-bottom a{color:#fff;font-weight:700;} /* Back to top */ .back-top{ position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--green-700);color:#fff; display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);cursor:pointer;z-index:500; opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s ease; } .back-top.show{opacity:1;visibility:visible;transform:translateY(0);} .back-top:hover{background:var(--green-800);} /* ============================================================================ Inner-page components These pages keep their original Bootstrap 4 grid (.container/.row/.col-*) and a few of the site's original component classes (.vcard, .btn-vd, tables, forms) so their existing layouts survive unchanged — this section just re-skins those in the new palette/type instead of rebuilding 37 pages of markup from scratch. ========================================================================== */ /* Page hero / breadcrumb banner, replacing the old .breadcrumb-area */ .page-hero{ position:relative;padding:78px 0 50px;color:#fff;text-align:center; background:linear-gradient(120deg,rgba(7,35,18,.92),rgba(10,70,38,.72)),url(../img/banner-1.png) center/cover; } .page-hero .crumbs{display:flex;gap:8px;justify-content:center;align-items:center;font-size:.86rem;font-weight:700;color:#bfe6cc;margin-bottom:14px;} .page-hero .crumbs a{color:#bfe6cc;} .page-hero .crumbs a:hover{color:#fff;} .page-hero .crumbs .sep{opacity:.6;} .page-hero h1{color:#fff;font-size:clamp(1.5rem,3.4vw,2.3rem);margin:0;max-width:820px;margin-inline:auto;text-shadow:0 4px 20px rgba(0,0,0,.3);} /* Generic content typography inside kept legacy markup */ .page-body{padding:56px 0 20px;} .page-body h3,.page-body h4,.page-body h5{color:var(--ink-900);} .page-body h4.glance,.page-body h4{margin-top:.2em;} .page-body p{color:var(--ink-700);line-height:1.8;} .page-body .info{margin-bottom:10px;} .page-body ol.list-group{padding-left:1.2rem;} .page-body ol.list-group li{list-style:decimal;color:var(--ink-700);padding:6px 0;border:none !important;background:transparent !important;} .page-body hr{border-color:var(--line);} /* Tables (Bootstrap .table.table-bordered kept as-is structurally) */ .page-body table.table,.page-body table.table-bordered{ background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm); border-collapse:separate !important;border-spacing:0;width:100%;margin-bottom:1.6rem; } .page-body table.table-bordered th,.page-body table.table-bordered td{border-color:var(--line) !important;padding:12px 14px;vertical-align:middle;} .page-body table.table thead th{background:var(--green-700);color:#fff;font-weight:700;border-color:var(--green-700) !important;} .page-body table tbody tr:hover{background:var(--green-100);} .page-body table .management-img img,.page-body table td.management-img img{ width:64px;height:64px;object-fit:cover;border-radius:50%;border:2px solid var(--line); } .page-body table a{color:var(--green-800);font-weight:700;} .page-body table a:hover{color:var(--teal-700);} /* Bootstrap button variants used inline in original content */ .page-body .btn,.btn-vd{border-radius:999px;font-weight:700;} .page-body .btn-success{background:var(--green-700);border-color:var(--green-700);} .page-body .btn-success:hover{background:var(--green-800);border-color:var(--green-800);} .page-body .btn-outline-success{color:var(--green-700);border-color:var(--green-700);background:transparent;} .page-body .btn-outline-success:hover{background:var(--green-700);color:#fff;} .page-body .btn-outline-primary{color:var(--teal-700);border-color:var(--teal-700);background:transparent;} .page-body .btn-outline-primary:hover{background:var(--teal-700);color:#fff;border-color:var(--teal-700);} .page-body .btn-dark{background:var(--ink-900);border-color:var(--ink-900);} .page-body .btn-gradient{background:linear-gradient(120deg,var(--green-700),var(--teal-700));border:none;color:#fff;} /* Directory / "View details" cards (.vcard / .btn-vd used across hub pages) */ .page-body .vcard{border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;} .page-body .vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);} .page-body .vcard-subtitle{color:var(--ink-900);font-weight:700;} .page-body .line{background:var(--green-600);} .page-body .btn-vd{color:var(--green-800);} .page-body .btn-vd:hover{color:var(--teal-700);} /* Staff / management photo used inline (dep-img, single portraits) */ .page-body img.dep-img{ width:150px;height:150px;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:var(--shadow-sm); } /* Forms (contact / login / register) */ .page-body .form-control,.form-control{ border-radius:10px;border:1px solid var(--line);padding:11px 14px;font-family:var(--font-body); } .page-body .form-control:focus,.form-control:focus{border-color:var(--green-700);box-shadow:0 0 0 3px var(--green-100);outline:none;} /* Bootstrap tabs (biotech profile pages) reimplemented without bootstrap.js */ .nav-tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:2px solid var(--line);margin-bottom:22px;list-style:none;padding:0;} .nav-tabs li{list-style:none;} .nav-tabs a.nav-link{ display:inline-block;padding:11px 18px;border-radius:10px 10px 0 0;font-weight:700;color:var(--ink-500); border:1px solid transparent; } .nav-tabs a.nav-link:hover{color:var(--green-700);} .nav-tabs a.nav-link.active{color:var(--green-800);background:var(--green-100);border-color:var(--line);border-bottom-color:var(--green-100);} .tab-pane{display:none;} .tab-pane.active,.tab-pane.show.active{display:block;} /* Simple login/register auth card (login.html / register.html) */ .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 16px; background:linear-gradient(135deg,var(--green-900),var(--teal-700));} .auth-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:40px 36px;max-width:420px;width:100%;} .auth-card img{height:44px;margin:0 auto 22px;display:block;} .auth-card .form-group{position:relative;margin-bottom:16px;} .auth-card .form-group i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-300);} .auth-card .form-control{padding-left:38px;width:100%;} .auth-card button[type="submit"]{ width:100%;padding:12px;border-radius:999px;border:none;background:var(--green-700);color:#fff;font-weight:700; cursor:pointer;transition:background .2s ease; } .auth-card button[type="submit"]:hover{background:var(--green-800);} .auth-card .link{text-align:right;margin-bottom:14px;font-size:.85rem;} .auth-card .link a{color:var(--teal-700);} .auth-card .sign-up{text-align:center;margin-top:16px;font-size:.9rem;color:var(--ink-500);} .auth-card .sign-up a{color:var(--green-700);font-weight:700;} .auth-card .social-login{text-align:center;margin-top:20px;border-top:1px solid var(--line);padding-top:16px;} .auth-card .social-login h5{font-size:.82rem;color:var(--ink-500);margin-bottom:12px;} .auth-card .social-login ul{display:flex;justify-content:center;gap:10px;list-style:none;padding:0;} .auth-card .social-login a{width:38px;height:38px;border-radius:50%;background:var(--green-100);color:var(--green-800);display:flex;align-items:center;justify-content:center;} .auth-card .social-login a:hover{background:var(--green-700);color:#fff;} /* --- Click safety: decorative overlays and hidden menus never intercept clicks --- */ .hero::after,.page-banner::after,.quick-card::before,.quick-card::after{pointer-events:none;} .hero-content{pointer-events:none;} .hero-content a,.hero-content .btn{pointer-events:auto;} .submenu{pointer-events:none;} .main-menu > li:hover > .submenu,.main-menu > li.open > .submenu,.submenu li:hover > .submenu{pointer-events:auto;} @media (max-width:992px){.submenu{pointer-events:auto;}} @media (min-width:993px){.nav-backdrop{display:none;}}