/* Fonts are loaded via in each page for non-blocking render. */ /* ─── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── Design Tokens ─────────────────────────────────────── */ :root { /* Aegean palette */ --sea: #1b3d6e; --sea-light: #2a5298; --sea-mist: #e8f0f8; --sand: #f5f0e8; --limestone: #ede8de; --terracotta: #b85c38; --marble: #faf9f6; --ink: #1a1c2e; --muted: #5a6070; --rule: #d0cec8; --rule-light: #e8e4de; /* Accent stage colors (used in about labels and project stages) */ --moss: #2a7a3a; --ochre: #c07000; --plum: #8a4a7a; /* Typography */ --serif: 'Lora', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } /* ─── Dark Mode ──────────────────────────────────────────── */ [data-theme="dark"] { --sand: #0f1623; --limestone: #161e2e; --marble: #1a2234; --ink: #e8eaf0; --muted: #8a92a0; --rule: #2a3348; --rule-light: #1e2840; --sea: #5b8fd4; --sea-light: #7aaae0; --sea-mist: #1a2840; --terracotta: #d4724a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sand: #0f1623; --limestone: #161e2e; --marble: #1a2234; --ink: #e8eaf0; --muted: #8a92a0; --rule: #2a3348; --rule-light: #1e2840; --sea: #5b8fd4; --sea-light: #7aaae0; --sea-mist: #1a2840; --terracotta: #d4724a; } } /* ─── Base ───────────────────────────────────────────────── */ html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--sand); color: var(--ink); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; transition: background-color 0.2s ease, color 0.2s ease; } a { color: var(--sea); text-decoration: none; } a:hover { text-decoration: underline; } img { display: block; max-width: 100%; } .skip-link { position: absolute; left: -9999px; top: 0; padding: 0.5rem 0.85rem; background: var(--sea); color: var(--marble); font-size: 0.85rem; z-index: 1000; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; text-decoration: none; } /* ─── Layout ─────────────────────────────────────────────── */ .container { max-width: 1020px; margin: 0 auto; padding: 0 2.5rem; width: 100%; } main { flex: 1; } /* ─── Navigation ─────────────────────────────────────────── */ nav { border-bottom: 1px solid var(--rule); padding: 1.2rem 0; position: sticky; top: 0; background: color-mix(in srgb, var(--sand) 97%, transparent); backdrop-filter: blur(6px); z-index: 100; } nav .container { display: flex; align-items: center; justify-content: space-between; } .nav-brand { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--sea); letter-spacing: 0.03em; text-decoration: none; } .nav-brand:hover { text-decoration: none; opacity: 0.8; } .nav-right { display: flex; align-items: center; gap: 2rem; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); font-weight: 500; transition: color 0.15s; } .nav-links a:hover, .nav-links a.active { color: var(--sea); text-decoration: none; } .theme-toggle { background: none; border: 1px solid var(--rule); border-radius: 4px; padding: 0.2rem 0.55rem; cursor: pointer; font-size: 0.85rem; color: var(--muted); line-height: 1.5; transition: color 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--sea); border-color: var(--sea); } /* ─── Section headings ───────────────────────────────────── */ .page-title { font-family: var(--serif); font-size: 2rem; font-weight: 500; margin: 3.5rem 0 0.4rem; line-height: 1.25; color: var(--ink); } .page-subtitle { color: var(--muted); font-size: 0.92rem; margin-bottom: 2.5rem; } .section-label { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 600; } hr.divider { border: none; border-top: 1px solid var(--rule); margin: 3rem 0; } /* ─── Callout ────────────────────────────────────────────── */ .callout { border-left: 3px solid var(--terracotta); background: var(--marble); padding: 0.85rem 1.2rem; border-radius: 0 4px 4px 0; font-size: 0.9rem; margin: 2rem 0; line-height: 1.6; border-top: 1px solid var(--rule-light); border-bottom: 1px solid var(--rule-light); border-right: 1px solid var(--rule-light); } .callout a { color: var(--terracotta); } .callout a:hover { color: var(--sea); } /* ─── Homepage Hero ──────────────────────────────────────── */ .hero { padding: 5rem 0 2.5rem; border-bottom: 1px solid var(--rule); } .hero-inner { display: grid; grid-template-columns: 55fr 45fr; gap: 3rem; align-items: center; } .hero-eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.8rem; } .hero h1 { font-family: var(--serif); font-size: 3.4rem; font-weight: 500; line-height: 1.1; color: var(--sea); margin-bottom: 1.2rem; } .hero .tagline { font-size: 1.05rem; line-height: 1.65; color: var(--ink); max-width: 560px; } .hero-motif { display: flex; justify-content: flex-end; align-items: center; } .hero-motif svg { width: 100%; max-width: 320px; color: var(--sea); opacity: 0.35; transition: opacity 0.3s; } .hero-motif svg:hover { opacity: 0.6; } [data-theme="dark"] .hero-motif svg { opacity: 0.25; } /* ─── Homepage About ─────────────────────────────────────── */ .about { padding: 2.5rem 0; } .about-items { display: flex; flex-direction: column; gap: 1.5rem; max-width: 700px; } .about-item-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.5rem; } .about-item-label::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; } .about-item-label.label-what::before { background: var(--terracotta); } .about-item-label.label-goals::before { background: var(--sea); } .about-item-label.label-risks::before { background: var(--sea-light); } .about-item-label.label-approach::before { background: var(--moss); } .about-item p { font-size: 0.97rem; line-height: 1.75; margin: 0; } /* ─── Homepage Recent Work ───────────────────────────────── */ .recent-work { padding: 2.5rem 0 1rem; border-top: 1px solid var(--rule); } .recent-work-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; } .recent-work-header h2 { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .recent-work-header a { font-size: 0.8rem; color: var(--sea); letter-spacing: 0.02em; } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .work-card { display: block; background: var(--marble); border: 1px solid var(--rule); border-top: 3px solid var(--sea); border-radius: 0 0 4px 4px; padding: 1.2rem; transition: border-color 0.15s, box-shadow 0.15s; color: var(--ink); } .work-card:hover { border-color: var(--sea); box-shadow: 0 2px 14px rgba(27, 61, 110, 0.1); text-decoration: none; } [data-theme="dark"] .work-card:hover { box-shadow: 0 2px 14px rgba(91, 143, 212, 0.15); } .work-card-venue { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sea); font-weight: 600; margin-bottom: 0.5rem; } .work-card-title { font-family: var(--serif); font-size: 0.9rem; font-weight: 500; line-height: 1.4; margin-bottom: 0.5rem; color: var(--ink); } .work-card-authors { font-size: 0.78rem; color: var(--muted); line-height: 1.4; } /* ─── Supported By ───────────────────────────────────────── */ .supported-by { padding: 1.4rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0.5rem 0 2.5rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .supported-by .label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; font-weight: 600; } .supported-by .funders { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.02em; } .supported-by .funders span + span::before { content: ' · '; color: var(--rule); } .affiliations { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0.5rem 0 2.5rem; padding: 0.85rem 0; display: flex; flex-direction: column; gap: 0.5rem; } .affil-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .affil-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; min-width: 8.5rem; } .affil-value { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.02em; } /* ─── Members Page ───────────────────────────────────────── */ .orbit-section { padding: 2rem 0 4rem; } .orbit-stage { position: relative; width: 560px; height: 560px; margin: 2rem auto 3rem; } .spinner.card-hovered, .spinner.card-hovered .member-card { animation-play-state: paused; } .spinner { position: absolute; top: 50%; left: 50%; width: 0; height: 0; } .spinner-1 { animation: spin1 28s linear infinite; } .spinner-2 { animation: spin2 28s linear infinite; } .spinner-3 { animation: spin3 28s linear infinite; } @keyframes spin1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin2 { from { transform: rotate(120deg); } to { transform: rotate(480deg); } } @keyframes spin3 { from { transform: rotate(240deg); } to { transform: rotate(600deg); } } .spinner .member-card { position: absolute; width: 176px; left: -88px; top: -242px; background: var(--marble); border: 1px solid var(--rule); padding: 1.2rem 1rem 1rem; text-align: center; transition: border-color 0.2s; display: block; color: inherit; } .spinner .member-card:hover { border-color: var(--sea); } .member-card-link { display: block; color: inherit; cursor: pointer; } .member-card-link:hover { text-decoration: none; } .member-card-link:focus-visible { outline: 2px solid var(--sea); outline-offset: 4px; } .spinner-1 .member-card { animation: counter1 28s linear infinite; } .spinner-2 .member-card { animation: counter2 28s linear infinite; } .spinner-3 .member-card { animation: counter3 28s linear infinite; } @media (prefers-reduced-motion: reduce) { .orbit-stage { display: none; } .member-mobile-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin: 1.5rem 0 3rem; } } @keyframes counter1 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes counter2 { from { transform: rotate(-120deg); } to { transform: rotate(-480deg); } } @keyframes counter3 { from { transform: rotate(-240deg); } to { transform: rotate(-600deg); } } .member-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 0.75rem; display: block; border: 1px solid var(--rule); } .member-name { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; line-height: 1.3; color: var(--ink); } .member-affil { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .member-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3rem 0.5rem; font-size: 0.7rem; letter-spacing: 0.04em; margin-top: 0.55rem; } .member-links a, .member-links span { color: var(--muted); border-bottom: 1px solid transparent; } .member-links a:hover { color: var(--sea); text-decoration: none; border-bottom-color: var(--sea); } /* Mobile member grid (shown only on small screens) */ .member-mobile-grid { display: none; } .mobile-member-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.25rem 1rem; background: var(--marble); border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); transition: border-color 0.15s; } .mobile-member-card:hover { border-color: var(--sea); } .mobile-member-card-link { display: block; color: inherit; text-align: center; } .mobile-member-card-link:hover { text-decoration: none; color: inherit; } .mobile-member-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); margin-bottom: 0.65rem; } .mobile-member-name { font-family: var(--serif); font-size: 0.88rem; font-weight: 600; margin-bottom: 0.2rem; color: var(--ink); } .mobile-member-affil { font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* Full member profiles below orbit */ .member-profiles { display: flex; flex-direction: column; gap: 2.5rem; } .member-profile { display: grid; grid-template-columns: 100px 1fr; gap: 1.5rem; align-items: start; padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); } .member-profile:last-child { border-bottom: none; } .profile-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); } .profile-name { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; margin-bottom: 0.15rem; } .profile-affil { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .profile-bio { font-size: 0.91rem; line-height: 1.7; margin-bottom: 0.7rem; max-width: 560px; } .profile-distinction { font-size: 0.8rem; color: var(--muted); font-style: italic; margin-bottom: 0.6rem; } .profile-links { display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; font-size: 0.78rem; letter-spacing: 0.04em; } .profile-links a { color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; } .profile-links a:hover { color: var(--sea); border-bottom-color: var(--sea); text-decoration: none; } /* ─── Projects / Kanban ──────────────────────────────────── */ .kanban { padding: 2rem 0 4rem; } .kanban-board { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--rule); background: var(--marble); } .kanban-col { padding: 1.5rem 1.4rem; } .kanban-col + .kanban-col { border-left: 1px solid var(--rule); } .kanban-col-header { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-bottom: 1rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--ink); } .kanban-col.completed .kanban-col-header { border-bottom-color: var(--muted); } .kanban-col.ongoing .kanban-col-header { border-bottom-color: var(--sea); } .kanban-col.planned .kanban-col-header { border-bottom-color: var(--rule); } .project-card { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); } .project-card:last-child { border-bottom: none; } .project-title { font-family: var(--serif); font-size: 0.9rem; font-weight: 500; line-height: 1.35; margin-bottom: 0.3rem; } .project-title a { color: var(--ink); } .project-title a:hover { color: var(--sea); text-decoration: none; } .project-desc { font-size: 0.79rem; color: var(--muted); line-height: 1.55; } .project-stage { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; } .project-stage::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 2px; flex-shrink: 0; } .project-stage.stage-de-risk::before { background: var(--sea-light); } .project-stage.stage-core-validation::before { background: var(--moss); } .project-stage.stage-scaling-up::before { background: var(--ochre); } .project-stage.stage-application::before { background: var(--plum); } /* ─── Individual Member Page ─────────────────────────────── */ .member-page { padding: 2.5rem 0 4rem; } .back-link { display: inline-block; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 2rem; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; } .back-link:hover { color: var(--sea); border-bottom-color: var(--sea); text-decoration: none; } .member-page-header { display: grid; grid-template-columns: 120px 1fr; gap: 2rem; align-items: start; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; } .member-page-photo { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); } .member-page-name { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; margin-bottom: 0.3rem; line-height: 1.2; } .member-page-affil { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; } .member-page-links { display: flex; gap: 0.5rem 1.2rem; flex-wrap: wrap; font-size: 0.8rem; } .member-page-links a { color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; } .member-page-links a:hover { color: var(--sea); border-bottom-color: var(--sea); text-decoration: none; } .member-page-body { max-width: 660px; } .member-page-body p { font-size: 0.95rem; line-height: 1.75; margin-bottom: 1rem; } .member-distinction { font-size: 0.82rem; color: var(--muted); font-style: italic; margin-top: 0.5rem; } /* ─── Footer ─────────────────────────────────────────────── */ footer { border-top: 1px solid var(--rule); padding: 2rem 0; margin-top: auto; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-brand { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--sea); text-decoration: none; } .footer-brand:hover { opacity: 0.8; text-decoration: none; } .footer-links { display: flex; gap: 1.5rem; list-style: none; } .footer-links a { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; transition: color 0.15s; } .footer-links a:hover { color: var(--sea); text-decoration: none; } .footer-copy { font-size: 0.75rem; color: var(--muted); opacity: 0.8; } .footer-affiliation { font-size: 0.78rem; color: var(--muted); line-height: 1.6; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule-light); max-width: 760px; } .footer-affiliation a { color: var(--muted); border-bottom: 1px solid var(--rule); } .footer-affiliation a:hover { color: var(--sea); border-bottom-color: var(--sea); text-decoration: none; } /* ─── Responsive ─────────────────────────────────────────── */ @media (max-width: 860px) { .work-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .hero-inner { grid-template-columns: 1fr; } .hero h1 { font-size: 2.4rem; } .hero-motif { display: none; } .nav-links { gap: 1rem; } .orbit-stage { display: none; } .member-mobile-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin: 1.5rem 0 3rem; } .work-grid { grid-template-columns: 1fr; } .kanban-board { grid-template-columns: 1fr; } .kanban-col + .kanban-col { border-left: none; border-top: 1px solid var(--rule); } .pub-entry { grid-template-columns: 1fr; } .pub-venue { text-align: left; } .member-profile { grid-template-columns: 1fr; } .profile-photo { width: 72px; height: 72px; } .member-page-header { grid-template-columns: 1fr; } .member-page-photo { width: 84px; height: 84px; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .footer-links { gap: 1rem; } } @media (max-width: 500px) { .member-mobile-grid { grid-template-columns: 1fr 1fr; } .nav-links { gap: 0.75rem; } .nav-links a { font-size: 0.72rem; } .container { padding: 0 1.25rem; } .recent-work-header { flex-direction: column; gap: 0.5rem; } } /* ─── Research Landing Page ──────────────────────────────── */ .research-hero { padding: 4.5rem 0 2.5rem; border-bottom: 1px solid var(--rule); } .research-hero h1 { font-family: var(--serif); font-size: 3rem; font-weight: 500; color: var(--sea); margin-bottom: 1rem; line-height: 1.1; } .research-hero .hero-subtitle { font-size: 1rem; line-height: 1.75; color: var(--ink); max-width: 720px; } .research-feed { padding: 3rem 0 4rem; } .research-year-group { margin-bottom: 3rem; } .research-year-heading { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); } .research-section-heading { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 3rem 0 0; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); } .research-feed .research-section-heading { margin-top: 0; } .research-other { margin-bottom: 4rem; } .other-pub-list { list-style: none; padding: 0; margin: 0; } .other-pub-item { padding: 0.9rem 0; border-bottom: 1px solid var(--rule-light); } .other-pub-item:last-child { border-bottom: none; } .other-pub-venue { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.2rem; } .other-pub-title { font-size: 0.93rem; line-height: 1.4; margin-bottom: 0.2rem; } .other-pub-title a { color: var(--ink); } .other-pub-title a:hover { color: var(--sea); text-decoration: none; } .other-pub-authors { font-size: 0.76rem; color: var(--muted); line-height: 1.45; } .research-card { padding: 1.5rem 0; border-bottom: 1px solid var(--rule-light); } .research-card:last-child { border-bottom: none; } .research-card-top { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .research-card-venue { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sea); font-weight: 600; } .research-card-badge { font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; border: 1px solid var(--terracotta); padding: 0.1em 0.45em; border-radius: 2px; } .core-tag { font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sea); font-weight: 600; border: 1px solid color-mix(in srgb, var(--sea) 40%, transparent); padding: 0.1em 0.45em; border-radius: 2px; } .research-card-title { font-family: var(--serif); font-size: 1.12rem; font-weight: 500; line-height: 1.35; margin-bottom: 0.35rem; } .research-card-title a { color: var(--ink); } .research-card-title a:hover { color: var(--sea); text-decoration: none; } .research-card-authors { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem; line-height: 1.5; } .research-card-authors strong { color: var(--ink); font-weight: 500; } .research-card-desc { font-size: 0.87rem; line-height: 1.68; color: var(--ink); max-width: 800px; margin-bottom: 0.85rem; } .research-card-figure { margin: 0.85rem 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule-light); background: var(--marble); } .research-card-figure img { display: block; width: 100%; max-width: 720px; height: auto; } .research-card-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .btn-read-more { font-size: 0.8rem; font-weight: 500; color: var(--sea); letter-spacing: 0.02em; transition: color 0.15s; } .btn-read-more:hover { color: var(--sea-light); text-decoration: none; } .btn-paper-ext { font-size: 0.76rem; color: var(--muted); border: 1px solid var(--rule); padding: 0.18rem 0.6rem; border-radius: 3px; transition: color 0.15s, border-color 0.15s; } .btn-paper-ext:hover { color: var(--sea); border-color: var(--sea); text-decoration: none; } /* ─── Individual Paper Page ──────────────────────────────── */ .paper-page { padding: 2rem 0 4rem; } .paper-header-card { background: var(--marble); border: 1px solid var(--rule); border-top: 3px solid var(--sea); border-radius: 0 0 4px 4px; padding: 2rem 2rem 1.75rem; margin-bottom: 2.5rem; } .paper-venue { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea); font-weight: 600; margin-bottom: 0.8rem; } .paper-title { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; line-height: 1.25; margin-bottom: 0.7rem; color: var(--ink); } .paper-authors { font-size: 0.86rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.25rem; } .paper-authors strong { color: var(--ink); font-weight: 500; } .paper-links { display: flex; gap: 0.6rem; flex-wrap: wrap; } .btn-arxiv { display: inline-block; font-size: 0.8rem; font-weight: 500; color: var(--marble); background: var(--sea); padding: 0.32rem 0.85rem; border-radius: 3px; transition: background 0.15s; } .btn-arxiv:hover { background: var(--sea-light); text-decoration: none; color: var(--marble); } .btn-pdf { display: inline-block; font-size: 0.8rem; font-weight: 500; color: var(--sea); border: 1px solid var(--sea); padding: 0.32rem 0.85rem; border-radius: 3px; transition: background 0.15s; } .btn-pdf:hover { background: var(--sea-mist); text-decoration: none; color: var(--sea); } .paper-figure { margin: 1.75rem 0 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); background: var(--marble); } .paper-figure img { display: block; width: 100%; height: auto; } .paper-figure figcaption { font-size: 0.76rem; color: var(--muted); padding: 0.5rem 0.75rem 0.6rem; border-top: 1px solid var(--rule-light); line-height: 1.5; } .paper-sections { display: flex; flex-direction: column; gap: 2rem; max-width: 760px; } .paper-section h2 { font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--ink); margin-bottom: 0.75rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--rule); } .paper-section p { font-size: 0.93rem; line-height: 1.78; color: var(--ink); margin-bottom: 0.9rem; } .paper-section p:last-child { margin-bottom: 0; } .paper-section + .paper-section { margin-top: 0.5rem; } .cite-block { background: var(--limestone); border: 1px solid var(--rule); border-radius: 4px; padding: 1.1rem 1.2rem; font-family: 'Courier New', Courier, monospace; font-size: 0.76rem; line-height: 1.65; color: var(--ink); overflow-x: auto; white-space: pre; } /* ─── Playground Page ────────────────────────────────────── */ .playground { padding: 1rem 0 4rem; } .cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } .app-card { display: flex; flex-direction: column; background: var(--marble); border: 1px solid var(--rule); border-top: 3px solid var(--sea); border-radius: 0 0 4px 4px; padding: 1.6rem 1.6rem 1.4rem; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; height: 100%; } .app-card:hover { border-color: var(--sea); box-shadow: 0 4px 18px rgba(27, 61, 110, 0.1); text-decoration: none; transform: translateY(-1px); } [data-theme="dark"] .app-card:hover { box-shadow: 0 4px 18px rgba(91, 143, 212, 0.15); } .app-card-motif { margin-bottom: 1rem; color: var(--sea); opacity: 0.55; } .app-card-motif svg { display: block; width: 100%; max-width: 140px; height: auto; } .app-card-kind { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea); font-weight: 600; margin-bottom: 0.4rem; } .app-card-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.3; color: var(--ink); margin-bottom: 0.6rem; } .app-card-desc { font-size: 0.9rem; line-height: 1.65; color: var(--ink); margin-bottom: 1rem; flex: 1; } .app-card-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--rule-light); padding-top: 0.85rem; } .app-card-host { font-family: 'Courier New', Courier, monospace; font-size: 0.78rem; color: var(--muted); } .app-card-open { font-size: 0.8rem; color: var(--sea); font-weight: 500; letter-spacing: 0.02em; } @media (max-width: 700px) { .cards-grid { grid-template-columns: 1fr; } } /* ─── Join Page ──────────────────────────────────────────── */ .join-section { max-width: 700px; margin-bottom: 2.5rem; } .join-heading { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--ink); margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); } .join-section p { font-size: 0.95rem; line-height: 1.75; margin-bottom: 0.9rem; } .join-list { list-style: none; padding: 0; margin: 0.5rem 0 0; } .join-list li { font-size: 0.93rem; line-height: 1.7; padding: 0.7rem 0 0.7rem 1rem; border-left: 2px solid var(--rule); margin-bottom: 0.5rem; } .join-list li strong { color: var(--ink); font-weight: 600; }