/*
* Typography: Agenda (Greg Thompson). Agenda is licensed via Adobe Fonts / Typekit, not Google Fonts.
* To load it on the site: create a Web Project at https://fonts.adobe.com/fonts/agenda-one
* (or https://fonts.adobe.com/fonts/agenda), add weights 300, 400, 500, 700 (+ italic if you use em),
* then paste the provided into each page before styles.css.
* Until then, the stack below falls back to Arial / sans-serif.
*/
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Adobe web-project names are usually lowercase; quoted for hyphenated family */
--font-sans: "agenda-one", "agenda", "Agenda", Arial, Helvetica, sans-serif;
/* imec corporate–style palette (accent aligned with imec.com cyan-blue) */
--bg-primary: #ffffff;
--bg-secondary: #f4f6f8;
--text-primary: #1a1a1a;
--text-secondary: #4a4f55;
--text-muted: #6b7280;
/* Teal aligned with imec program pages (e.g. istart-style CTAs, ~#4497b9) */
--imec-accent: #4497b9;
--imec-accent-hover: #357896;
--accent: var(--imec-accent);
--accent-hover: var(--imec-accent-hover);
--border: #e2e6ea;
--border-light: #eef1f4;
--imec-blue: var(--imec-accent);
--imec-border: #e2e6ea;
--imec-light-gray: #6b7280;
--imec-white: #ffffff;
--nav-active-bg: #f0f3f6;
--shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.07);
--shadow-md: 0 2px 12px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.08);
--gradient-primary: linear-gradient(135deg, #357896 0%, var(--imec-accent) 52%, #5aa8c4 100%);
/* Section titles: short horizontal bar above heading (imec-style) */
--section-heading-accent: var(--imec-accent);
--section-heading-bar-width: 2.85rem;
--section-heading-bar-height: 3px;
--section-heading-bar-gap: 0.55rem;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
line-height: 1.65;
color: var(--text-primary);
background: var(--bg-primary);
overflow-x: hidden;
font-weight: 400;
letter-spacing: 0.01em;
}
button,
input,
select,
textarea {
font-family: inherit;
}
/* Headings: Agenda Medium (500) / Bold (700); body: Regular (400) or Light (300) where set below */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-sans);
}
/* Smooth fade-in animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
/* Header – sticky white bar (imec.com style) */
.header {
background: var(--bg-primary);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 1000;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.header.scrolled {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.header-container {
max-width: min(1320px, 100%);
margin: 0 auto;
padding: 0.85rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
color: var(--text-primary);
transition: transform 0.3s ease;
}
.logo:hover {
transform: scale(1.05);
}
.logo img {
height: 52px;
width: auto;
display: block;
flex-shrink: 0;
}
.logo-wordmark {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
white-space: nowrap;
}
.mobile-menu-toggle {
display: none;
border: 1px solid var(--border);
background: var(--bg-primary);
color: var(--text-primary);
border-radius: 8px;
width: 42px;
height: 42px;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.nav {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 0.25rem;
align-items: stretch;
justify-content: flex-end;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
padding: 0.65rem 0.95rem;
transition:
color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
display: inline-flex;
align-items: center;
letter-spacing: 0.04em;
line-height: 1.2;
border-radius: 2px;
}
.nav-link:hover {
color: var(--imec-accent);
background: rgba(68, 151, 185, 0.08);
}
.nav-link.active {
color: var(--text-primary);
background: var(--nav-active-bg);
box-shadow: inset 0 3px 0 0 var(--imec-accent);
}
/* Shiny CTA in top menu bar */
.nav-link-digital-twins {
position: relative;
color: #ffffff !important;
background: linear-gradient(120deg, #357896 0%, var(--imec-accent) 45%, #6db3cf 100%);
border-radius: 999px;
padding: 0.55rem 1rem;
border: 1px solid rgba(53, 137, 184, 0.45);
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
0 2px 12px rgba(68, 151, 185, 0.32);
}
.nav-link-digital-twins::after {
content: '';
position: absolute;
top: 0;
left: -140%;
width: 100%;
height: 100%;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 15%,
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 0) 85%
);
animation: twinsShine 2.2s ease-in-out infinite;
}
@keyframes twinsShine {
0% { left: -140%; }
60% { left: 140%; }
100% { left: 140%; }
}
/* Mobile sticky CTA below header */
.mobile-digital-twins-bar {
display: none;
}
/* Dropdown */
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 0;
padding-top: 0.5rem;
background: var(--bg-primary);
min-width: 220px;
border: 1px solid var(--border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 1001;
overflow: hidden;
animation: fadeInUp 0.3s ease-out;
pointer-events: auto;
padding: 0.5rem 0;
}
/* Show dropdown when hovering over the dropdown container (nav-item) */
.nav-item.dropdown:hover .dropdown-content {
display: block;
}
/* Keep dropdown visible when hovering directly over the content */
.dropdown-content:hover {
display: block;
}
.dropdown-content a {
color: var(--text-primary);
padding: 0.75rem 1.5rem;
text-decoration: none;
display: block;
transition: color 0.2s ease, background 0.2s ease;
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.02em;
}
.dropdown-content a:hover {
color: var(--accent);
background: var(--bg-secondary);
}
/* Main Content */
.main-content {
min-height: calc(100vh - 200px);
padding: 0;
position: relative;
background: var(--bg-primary);
}
.content-container {
max-width: 1200px;
margin: 0 auto;
padding: 3rem 3rem 4rem;
position: relative;
z-index: 1;
}
@media (min-width: 1440px) {
.content-container {
max-width: min(1400px, 96vw);
}
}
@media (orientation: landscape) and (min-width: 1024px) {
.main-content > .content-container {
max-width: min(1320px, 96vw);
}
}
.content-container > h1:not(.hero-title) {
font-size: clamp(2rem, 4vw, 3rem);
color: var(--text-primary);
margin-bottom: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.content-container > h1:not(.hero-title)::before {
content: "";
display: block;
width: var(--section-heading-bar-width);
height: var(--section-heading-bar-height);
margin-bottom: var(--section-heading-bar-gap);
background: var(--section-heading-accent);
border-radius: 1px;
}
/* Homepage: use full content column; widen with viewport / landscape */
#home-content.markdown-content {
max-width: 100%;
width: 100%;
margin: 0 auto;
padding: 3rem 0 4rem;
position: relative;
z-index: 2;
}
@media (min-width: 1200px) {
#home-content.markdown-content {
max-width: min(72rem, 100%);
}
}
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
#home-content.markdown-content {
max-width: min(76rem, 100%);
}
}
/* Markdown Content Styling */
.markdown-content {
line-height: 1.8;
}
.markdown-content h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--text-primary);
margin-bottom: 2rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
border: none;
padding-bottom: 0;
}
.markdown-content h1::before {
content: "";
display: block;
width: min(3.5rem, 18vw);
height: var(--section-heading-bar-height);
margin-bottom: calc(var(--section-heading-bar-gap) + 0.1rem);
background: var(--section-heading-accent);
border-radius: 1px;
}
.markdown-content h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--text-primary);
margin-top: 3rem;
margin-bottom: 1.5rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
padding-left: 0;
}
.markdown-content h2::before {
content: "";
display: block;
width: var(--section-heading-bar-width);
height: var(--section-heading-bar-height);
margin-bottom: var(--section-heading-bar-gap);
background: var(--section-heading-accent);
border-radius: 1px;
}
.markdown-content h3 {
font-size: 1.25rem;
color: var(--text-primary);
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: 500;
letter-spacing: -0.01em;
}
.markdown-content h3::before {
content: "";
display: block;
width: 2.25rem;
height: 2px;
margin-bottom: 0.45rem;
background: var(--section-heading-accent);
border-radius: 1px;
}
/* First section in a markdown column: avoid stacking extra top margin with container padding */
.markdown-content > h2:first-child {
margin-top: 0;
}
.markdown-content h4 {
font-size: 1.25rem;
color: var(--imec-light-gray);
margin-top: 1rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
.markdown-content p {
margin-bottom: 1.65rem;
color: var(--text-secondary);
line-height: 1.75;
font-size: 1.0625rem;
font-weight: 300;
}
.markdown-content ul,
.markdown-content ol {
margin-bottom: 1.65rem;
color: var(--text-secondary);
}
.markdown-content ol {
padding-left: 1.75rem;
list-style-position: outside;
}
/* Square teal bullets (program-page style) */
.markdown-content ul {
list-style: none;
padding-left: 0;
}
.markdown-content ul > li {
position: relative;
margin-bottom: 0.85rem;
padding-left: 1.35rem;
line-height: 1.75;
}
.markdown-content ul > li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 6px;
height: 6px;
background: var(--imec-accent);
border-radius: 0;
}
.markdown-content ul ul {
margin-top: 0.65rem;
margin-bottom: 0.35rem;
padding-left: 0;
}
.markdown-content ul ul > li {
padding-left: 1.15rem;
}
.markdown-content ul ul > li::before {
width: 5px;
height: 5px;
top: 0.65em;
opacity: 0.9;
}
.markdown-content li {
margin-bottom: 0.75rem;
line-height: 1.75;
}
.markdown-content a {
color: var(--accent);
text-decoration: none;
text-underline-offset: 3px;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.markdown-content a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* Optional: Read more — accent rule + arrow */
.markdown-content a.read-more {
display: inline-block;
margin-top: 0.25rem;
font-weight: 600;
font-size: 1rem;
color: var(--accent);
}
.markdown-content a.read-more::before {
content: "";
display: block;
width: 2.25rem;
height: 2px;
margin-bottom: 0.5rem;
background: var(--imec-accent);
border-radius: 1px;
}
.markdown-content a.read-more::after {
content: " →";
font-weight: 500;
}
.markdown-content strong {
font-weight: 700;
color: var(--text-primary);
}
.markdown-content em {
font-style: italic;
}
.markdown-content code {
background-color: var(--bg-secondary);
padding: 0.2rem 0.4rem;
border-radius: 2px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
color: var(--text-primary);
border: 1px solid var(--border);
}
.markdown-content pre {
background-color: var(--bg-secondary);
padding: 1rem;
border-radius: 4px;
overflow-x: auto;
margin-bottom: 1rem;
border: 1px solid var(--border);
}
.markdown-content pre code {
background-color: transparent;
padding: 0;
}
.markdown-content blockquote {
border-left: 1px solid var(--border);
padding-left: 1.5rem;
margin: 2rem 0;
color: var(--text-secondary);
font-style: normal;
background: transparent;
padding: 1rem 1.5rem;
}
.markdown-content hr {
border: none;
border-top: 1px solid var(--border);
margin: 3rem 0;
}
.markdown-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
}
.markdown-content th,
.markdown-content td {
padding: 0.75rem;
text-align: left;
}
.markdown-content th {
background-color: var(--bg-secondary);
font-weight: 400;
color: var(--text-primary);
border: 1px solid var(--border);
}
.markdown-content td {
border: 1px solid var(--border);
color: var(--text-secondary);
}
/* Projects List */
.projects-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.project-card {
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2rem;
transition: all 0.3s ease;
text-decoration: none;
color: inherit;
display: block;
position: relative;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.project-card:hover {
border-color: var(--accent);
background: var(--bg-primary);
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.12);
}
.project-card:hover h2 {
color: var(--text-primary);
}
.project-card h2 {
color: var(--text-primary);
margin-bottom: 1rem;
font-size: 1.5rem;
border: none;
padding: 0;
transition: all 0.3s ease;
font-weight: 500;
letter-spacing: -0.01em;
}
.project-card h2::before {
content: "";
display: block;
width: var(--section-heading-bar-width);
height: var(--section-heading-bar-height);
margin-bottom: var(--section-heading-bar-gap);
background: var(--section-heading-accent);
border-radius: 1px;
}
.project-card p {
color: var(--text-secondary);
margin-bottom: 0.5rem;
font-weight: 300;
}
.project-card .project-meta {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--imec-border);
font-size: 0.9rem;
color: var(--imec-light-gray);
}
/* Blog List */
.blog-list {
display: flex;
flex-direction: column;
gap: 2rem;
margin-top: 2rem;
}
.blog-card {
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2.5rem;
transition: all 0.3s ease;
text-decoration: none;
color: inherit;
display: block;
position: relative;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.blog-card:hover {
border-color: var(--accent);
background: var(--bg-primary);
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.12);
}
.blog-card:hover h2 {
color: var(--text-primary);
}
.blog-card h2 {
color: var(--text-primary);
margin-bottom: 1rem;
font-size: 1.75rem;
border: none;
padding: 0;
transition: all 0.3s ease;
font-weight: 500;
letter-spacing: -0.01em;
}
.blog-card h2::before {
content: "";
display: block;
width: var(--section-heading-bar-width);
height: var(--section-heading-bar-height);
margin-bottom: var(--section-heading-bar-gap);
background: var(--section-heading-accent);
border-radius: 1px;
}
.blog-card .blog-meta {
color: var(--text-muted);
font-size: 0.85rem;
margin-bottom: 1rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-card p {
color: var(--text-secondary);
margin-bottom: 0.5rem;
font-weight: 300;
}
/* Lab log – vertical timeline */
.lablog-intro {
color: var(--text-secondary);
margin-bottom: 2.5rem;
font-weight: 300;
max-width: 640px;
}
.lablog-timeline {
position: relative;
padding-left: 2rem;
margin-top: 1rem;
}
.lablog-timeline::before {
content: '';
position: absolute;
left: 0;
top: 0.5rem;
bottom: 0.5rem;
width: 2px;
background: linear-gradient(to bottom, var(--accent), var(--border));
border-radius: 1px;
}
.lablog-event {
position: relative;
padding-bottom: 2.5rem;
}
.lablog-event:last-child {
padding-bottom: 0.5rem;
}
.lablog-event-marker {
position: absolute;
left: -2rem;
top: 0.4rem;
width: 14px;
height: 14px;
margin-left: -6px;
background: var(--bg-primary);
border: 2px solid var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 3px var(--bg-secondary);
z-index: 1;
}
.lablog-event-content {
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1.5rem 1.75rem;
margin-left: 1rem;
box-shadow: var(--shadow-md);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lablog-event:hover .lablog-event-content {
border-color: var(--accent);
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
}
.lablog-event-date {
display: block;
font-size: 0.8rem;
font-weight: 500;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.5rem;
}
.lablog-event-title {
font-size: 1.25rem;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 0.75rem 0;
padding: 0;
border: none;
letter-spacing: -0.01em;
line-height: 1.3;
}
.lablog-event-title::before {
content: "";
display: block;
width: 2.25rem;
height: 2px;
margin-bottom: 0.45rem;
background: var(--section-heading-accent);
border-radius: 1px;
}
.lablog-event-description {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.7;
font-weight: 300;
}
.lablog-event-description p {
margin: 0 0 0.5rem 0;
}
.lablog-event-description p:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.lablog-timeline {
padding-left: 1.5rem;
}
.lablog-timeline::before {
left: 0;
width: 2px;
}
.lablog-event-marker {
left: -1.5rem;
width: 12px;
height: 12px;
margin-left: -5px;
}
.lablog-event-content {
margin-left: 0.5rem;
padding: 1.25rem 1.25rem;
}
}
/* Members Page */
.member-card {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--imec-border);
}
.member-card:last-of-type {
border-bottom: none;
}
.member-name {
margin-top: 0;
margin-bottom: 12px;
}
.member-row {
display: flex;
align-items: flex-start;
gap: 20px;
}
.member-row .member-photo {
width: 110px;
height: 110px;
border-radius: 10%;
object-fit: cover;
object-position: top;
flex-shrink: 0;
margin: 0;
box-shadow: none;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.member-row .member-photo:hover {
transform: none;
}
.member-info {
flex: 1;
min-width: 0;
}
/* About Page */
.section {
margin-bottom: 4rem;
}
.section h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--text-primary);
margin-bottom: 2rem;
font-weight: 300;
letter-spacing: -0.02em;
border: none;
padding-bottom: 0;
}
.join-us-content h2,
.contact-content h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--text-primary);
margin-top: 2rem;
margin-bottom: 1.5rem;
font-weight: 300;
letter-spacing: -0.01em;
}
.join-us-content p,
.contact-content p {
color: var(--text-secondary);
font-weight: 300;
line-height: 1.8;
}
.join-us-content h3,
.contact-content h3 {
font-size: 1.25rem;
color: var(--text-primary);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-weight: 300;
letter-spacing: -0.01em;
}
.position-card {
background: transparent;
border: 1px solid var(--border);
border-radius: 0;
padding: 2rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.position-card:hover {
border-color: var(--border-light);
background: var(--bg-secondary);
}
.position-card h3 {
color: var(--text-primary);
margin-bottom: 0.75rem;
font-weight: 300;
letter-spacing: -0.01em;
}
.position-card p {
margin-bottom: 0.5rem;
color: var(--text-secondary);
font-weight: 300;
}
.contact-details {
background: transparent;
border: 1px solid var(--border);
border-radius: 0;
padding: 2rem;
margin-top: 1.5rem;
}
.contact-details h3 {
color: var(--text-primary);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-weight: 300;
letter-spacing: -0.01em;
}
.contact-details h3:first-child {
margin-top: 0;
}
.contact-details p {
margin-bottom: 0.5rem;
color: var(--text-secondary);
font-weight: 300;
}
/* Footer */
.footer {
background: var(--bg-secondary);
color: var(--text-secondary);
padding: 3rem 0;
margin-top: 4rem;
position: relative;
border-top: 1px solid var(--border);
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 3rem;
text-align: center;
}
.footer p {
color: var(--text-muted);
margin: 0;
font-weight: 400;
font-size: 0.9rem;
}
/* Scroll Animations */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* Modern Button Styles */
.btn {
display: inline-block;
padding: 0.875rem 2rem;
background: var(--gradient-primary);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 700;
transition: all 0.3s ease;
box-shadow: var(--shadow-md);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn:active {
transform: translateY(0);
}
/* Responsive Design */
@media (max-width: 768px) {
.header-container {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.logo img {
height: 48px;
}
.logo-wordmark {
font-size: 1.15rem;
}
.mobile-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-link-digital-twins {
display: none !important;
}
.mobile-digital-twins-bar {
display: block;
position: sticky;
top: 0;
z-index: 999;
background: var(--bg-primary);
border-bottom: 1px solid var(--border-light);
padding: 0.5rem 1rem;
}
.mobile-digital-twins-link {
position: relative;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
background: linear-gradient(120deg, #0052a3 0%, #0066cc 45%, #1b84ff 100%);
border-radius: 999px;
padding: 0.62rem 0.9rem;
font-size: 0.9rem;
font-weight: 700;
overflow: hidden;
border: 1px solid rgba(0, 102, 204, 0.35);
box-shadow: 0 2px 10px rgba(0, 102, 204, 0.25);
}
.mobile-digital-twins-link::after {
content: '';
position: absolute;
top: 0;
left: -140%;
width: 100%;
height: 100%;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 15%,
rgba(255, 255, 255, 0.75) 50%,
rgba(255, 255, 255, 0) 85%
);
animation: twinsShine 2.2s ease-in-out infinite;
}
.nav {
display: none;
width: 100%;
margin-top: 0.75rem;
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
border-top: 1px solid var(--border-light);
padding-top: 0.75rem;
}
.header.nav-open .nav {
display: flex;
}
.nav-link {
width: 100%;
padding: 0.7rem 0.75rem;
}
.nav-item,
.dropdown {
width: 100%;
}
.content-container {
padding: 0 1rem;
}
.hero {
min-height: 320px;
}
.hero .hero-inner {
padding: 2rem 1.5rem 3rem;
}
.markdown-content h1 {
font-size: 2rem;
}
.markdown-content h2 {
font-size: 1.5rem;
}
.projects-list {
grid-template-columns: 1fr;
}
.dropdown-content {
position: static;
display: none;
box-shadow: none;
border: 1px solid var(--border-light);
border-radius: 8px;
margin-top: 0.5rem;
background: var(--bg-secondary);
min-width: 0;
}
.dropdown.mobile-open .dropdown-content {
display: block;
}
/* When a top-level dropdown is opened on mobile, show only its submenu view. */
.nav.mobile-submenu-open > * {
display: none !important;
}
.nav.mobile-submenu-open > .nav-item.dropdown.mobile-open {
display: flex !important;
flex-direction: column;
width: 100%;
}
.project-card,
.blog-card {
padding: 1.5rem;
}
.main-content {
padding: 0;
}
}
/* Loading State */
.loading {
text-align: center;
padding: 2rem;
color: var(--text-muted);
font-size: 1.1rem;
position: relative;
font-weight: 400;
}
.loading::after {
content: '...';
animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
0%, 20% {
content: '.';
}
40% {
content: '..';
}
60%, 100% {
content: '...';
}
}
.error {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1.5rem;
color: var(--text-secondary);
margin: 1rem 0;
font-weight: 400;
}
/* Additional Modern Effects */
.markdown-content img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: var(--shadow-lg);
margin: 2rem 0;
transition: transform 0.3s ease;
}
/* Optional: smaller, centered image (use class="img-size-60" in raw HTML img) */
.markdown-content img.img-size-60 {
width: 60%;
display: block;
margin-left: auto;
margin-right: auto;
}
.markdown-content img:hover {
transform: scale(1.02);
}
/* Gradient Text Effect */
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Modern Card Hover Effect */
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
/* Smooth Transitions */
* {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Selection Color */
::selection {
background: rgba(68, 151, 185, 0.28);
color: var(--text-primary);
}
::-moz-selection {
background: rgba(68, 151, 185, 0.28);
color: var(--text-primary);
}
/* Hero – full-width image, dark overlay, left-aligned copy (imec.com style) */
.hero {
position: relative;
width: 100%;
min-height: min(52vh, 520px);
display: flex;
align-items: flex-end;
background-color: #0d2137;
background-image:
linear-gradient(105deg, rgba(5, 25, 45, 0.88) 0%, rgba(10, 40, 65, 0.72) 45%, rgba(20, 55, 85, 0.55) 100%),
url("assets/hero-imec-reference.png");
background-size: cover;
background-position: center;
overflow: hidden;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.18) 0%,
rgba(0, 12, 28, 0.38) 55%,
rgba(0, 8, 20, 0.55) 100%
);
z-index: 1;
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: min(1320px, 100%);
margin: 0 auto;
padding: 2.5rem 2rem 3.25rem;
text-align: left;
}
.hero-breadcrumbs {
margin-bottom: 1.25rem;
}
.hero-breadcrumbs-list {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
margin: 0;
padding: 0;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.88);
}
.hero-breadcrumbs-list a {
color: rgba(255, 255, 255, 0.95);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
.hero-breadcrumbs-list a:hover {
color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.5);
}
.hero-breadcrumbs-sep {
color: rgba(255, 255, 255, 0.45);
user-select: none;
}
.hero-title {
font-size: clamp(1.35rem, 3.6vw, 2.85rem);
font-weight: 700;
color: #ffffff !important;
margin: 0 0 1rem;
line-height: 1.2;
letter-spacing: -0.02em;
max-width: none;
}
@media (min-width: 640px) {
.hero-title {
white-space: nowrap;
}
}
.hero-subtitle {
font-size: clamp(1rem, 1.9vw, 1.2rem);
font-weight: 300;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 1.75rem;
line-height: 1.65;
max-width: 42rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1.5rem;
background: var(--imec-accent);
color: #ffffff !important;
text-decoration: none;
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0.02em;
text-transform: none;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.22);
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.hero-cta:hover {
background: var(--imec-accent-hover);
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.hero-cta::after {
content: "→";
font-size: 1.05em;
font-weight: 400;
}
.hero-cta--no-arrow::after {
content: none;
}
/* GDPR / first-visit cookie notice (injected by script.js) */
body.gdpr-banner-active {
padding-bottom: env(safe-area-inset-bottom, 0);
}
.gdpr-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0));
background: rgba(255, 255, 255, 0.97);
border-top: 1px solid var(--border);
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
transform: translateY(100%);
opacity: 0;
transition: transform 0.35s ease, opacity 0.35s ease;
pointer-events: none;
}
.gdpr-banner--visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.gdpr-banner-inner {
max-width: min(1200px, 100%);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem 1.5rem;
}
.gdpr-banner-text {
flex: 1 1 280px;
min-width: 0;
}
.gdpr-banner-title {
margin: 0 0 0.5rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.gdpr-banner-desc {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-secondary);
font-weight: 400;
}
.gdpr-banner-desc a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.gdpr-banner-desc a:hover {
color: var(--accent-hover);
}
.gdpr-banner-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
flex-shrink: 0;
}
.gdpr-btn {
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
padding: 0.55rem 1.1rem;
border-radius: 6px;
border: 1px solid transparent;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gdpr-btn--primary {
background: var(--imec-blue);
color: #fff;
border-color: var(--imec-blue);
}
.gdpr-btn--primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.gdpr-btn--secondary {
background: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--border);
}
.gdpr-btn--secondary:hover {
background: var(--bg-primary);
border-color: var(--imec-blue);
}
@media (max-width: 520px) {
.gdpr-banner-actions {
width: 100%;
}
.gdpr-btn {
flex: 1 1 auto;
text-align: center;
}
}