/* Color theme */ :root{ --blue:#003063; --orange:#FF9914; --text:#1a1d23; --muted:#566072; --bg:#f8fbff; --surface:#ffffff; --border:#d9e1ec; --shadow:0 8px 20px rgba(0,0,0,.12); } /* Dark mode overrides (toggled via [data-theme="dark"] on ) */ html[data-theme="dark"]{ --bg:#0d1117; --surface:#0f1520; --text:#e8eef6; --muted:#a9b3c2; --border:#1f2a3a; --shadow:0 10px 28px rgba(0,0,0,.36); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:var(--bg); } /* Layout helpers */ .container{max-width:1120px; margin:0 auto; padding:0 16px} /* Header and nav */ .site-header{ position:sticky; top:0; z-index:1000; background:linear-gradient(0deg,var(--blue),var(--blue)); color:#fff; border-bottom:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow); } .nav{display:flex; align-items:center; justify-content:space-between; min-height:64px} .brand{color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px; font-size:1.25rem} .brand span{color:var(--orange)} .site-menu{display:flex; gap:12px} .site-menu a{ color:#fff; text-decoration:none; padding:8px 10px; border-radius:8px; transition:.2s; } .site-menu a:hover,.site-menu a.active{background:#fff; color:var(--blue)} .nav-toggle{display:none; color:#fff; font-size:1.6rem; background:none; border:0; cursor:pointer} /* Hero */ .hero{ padding:80px 0 48px; background: radial-gradient(1000px 400px at 80% -10%, rgba(255,153,20,.25), transparent 60%), linear-gradient(180deg,#eaf2ff 0%, #ffffff 40%, var(--bg) 100%); } .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center} .title{font-size:46px; margin:0 0 6px; color:var(--blue)} .subtitle{color:var(--orange); margin:0 0 10px; font-weight:700} .intro{color:var(--muted)} .cta{display:flex; gap:12px; margin-top:16px} .btn{ display:inline-block; border:2px solid var(--orange); background:var(--orange); color:#fff; padding:10px 16px; border-radius:12px; font-weight:700; text-decoration:none; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; } .btn:hover{transform:translateY(-3px)} .btn-outline{background:#fff; color:var(--blue); border-color:#fff} .btn-ghost{background:transparent; color:var(--blue); border-color:var(--orange)} .hero-photo img{ width:80%; border-radius:18px; box-shadow:var(--shadow); transform:perspective(700px) rotateY(0); transition:transform .5s ease; } .hero-photo img:hover{transform:perspective(700px) rotateY(8deg)} .scroll-down{display:block; text-align:center; margin-top:8px; color:var(--blue); font-size:24px; text-decoration:none} /* Sections */ .section{padding:64px 0; background:transparent} .section.alt{background:linear-gradient(180deg,#f3f7fd 0%, var(--bg) 100%)} .section h2{margin:0 0 10px; color:var(--blue); font-size:28px} .section-lead{margin:0 0 14px; color:var(--muted)} .tag-cloud { display:flex; flex-wrap:wrap; gap:10px } .tag[disabled]{ background:#FF9914; /* Orange */ color:#fff; border:none; padding:8px 14px; border-radius:999px; font:600 14px/1 system-ui, sans-serif; pointer-events:none; /* Not clickable */ cursor:default; /* Arrow cursor */ box-shadow:0 2px 6px rgba(0,0,0,.1); } .tag[disabled]:hover, .tag[disabled]:focus { /* No hover/focus effects */ transform:none; box-shadow:0 2px 6px rgba(0,0,0,.1); outline:none; } /* Timeline */ .timeline{list-style:none; padding:0; margin:0; border-left:2px solid var(--blue)} .timeline li{position:relative; padding-left:16px; margin:22px 0} .timeline li::before{ content:''; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 3px #fff; } .tl-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow) } .tl-card .meta{color:var(--muted)} /* Cards grid */ .cards{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)} .card{ grid-column:span 12; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease, filter .3s ease; transform-style:preserve-3d; } .card header{margin-bottom:6px} .card .meta{color:var(--muted)} .card:hover{transform:translateY(-6px) scale(1.02); filter:saturate(1.04)} @media(min-width:860px){ .card{grid-column:span 6} } /* Publications */ .pub-head{display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap} #pub-search{ flex:1 0 240px; max-width:420px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text) } .accordion{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; margin:10px 0; box-shadow:var(--shadow)} .accordion summary{cursor:pointer; font-weight:800; color:var(--text)} .pub-list{list-style:none; margin:10px 0 0; padding:0} .pub{ display:flex; justify-content:space-between; gap:10px; padding:10px 6px; border-top:1px dashed var(--border) } .pub:first-child{border-top:0} .pub .pub-meta{color:var(--muted)} /* Check lists and grid-3 */ .grid-3{display:grid; gap:16px} @media(min-width:860px){ .grid-3{grid-template-columns:repeat(3,1fr)} } .check{list-style:none; padding:0; margin:0} .check li{padding-left:24px; position:relative; margin:8px 0} .check li::before{content:'✓'; position:absolute; left:0; color:var(--orange); font-weight:900} /* ===== Contact (blue #003063 / orange #FF9914) ===== */ #contact { padding: 72px 0; background: var(--bg, #f8fbff); } #contact .container { max-width: 840px; /* comfortable width */ margin: 0 auto; padding: 0 16px; } /* Heading with accent underline */ #contact h2 { margin: 0 0 16px; color: var(--blue, #003063); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; text-align: center; position: relative; } #contact h2::after { content: ""; display: block; width: 72px; height: 4px; margin: 10px auto 0; border-radius: 999px; background: var(--orange, #FF9914); } /* Grid wrapper centered */ .contact-grid { display: grid; place-items: center; /* centers the card */ } /* Card */ .contact-card { width: 100%; max-width: 520px; /* keeps it tidy */ text-align: center; background: var(--surface, #fff); border: 1px solid var(--border, #d9e1ec); border-radius: 16px; padding: 24px; box-shadow: 0 10px 24px rgba(0,0,0,.10); transition: transform .25s ease, box-shadow .25s ease; } .contact-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.14); } /* Text + links */ .contact-card p { margin: 12px 0; font-size: 0.98rem; color: var(--text, #1a1d23); } .contact-card strong { color: var(--blue, #003063); } .contact-card a { color: var(--blue, #003063); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .contact-card a:hover { color: var(--orange, #FF9914); border-color: var(--orange, #FF9914); } /* Image */ .contact-card img { width: 80%; max-width: 360px; height: auto; margin-top: 14px; border-radius: 12px; box-shadow: 0 6px 14px rgba(0,0,0,.10); object-fit: cover; } /* Responsive tweaks */ @media (min-width: 920px) { #contact .container { max-width: 960px; } .contact-card { padding: 28px; } } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { .contact-card { transition: none; } } /* Optional dark-theme support if you use [data-theme="dark"] */ html[data-theme="dark"] #contact { background: #0f1520; } html[data-theme="dark"] .contact-card { background: #0f1520; border-color: #1f2a3a; box-shadow: 0 12px 28px rgba(0,0,0,.36); } html[data-theme="dark"] .contact-card p, html[data-theme="dark"] #contact h2 { color: #e8eef6; } /* Footer */ .site-footer{border-top:1px solid var(--border); padding:20px 0; color:var(--muted); text-align:center; background:#fff} .to-top{ display:inline-block; margin-left:8px; padding:6px 10px; border-radius:10px; border:1px solid var(--border); color:var(--blue); text-decoration:none; transition:.2s; } .to-top:hover{transform:translateY(-2px)} /* Responsive nav */ @media(max-width:860px){ .hero-grid{grid-template-columns:1fr} .site-menu{display:none; position:absolute; right:16px; top:64px; background:var(--surface); padding:10px; border:1px solid var(--border); border-radius:12px; flex-direction:column; min-width:220px; box-shadow:var(--shadow)} .site-menu a{color:var(--text)} .site-menu.open{display:flex} .nav-toggle{display:block} } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }