/* ========================================================================= GOAL — Group of Optimization and Algorithms (UFOP) Design tokens ------------------------------------------------------------------------- The palette is built around the deep green of the GOAL logo (#074632). Every text/background pair below meets WCAG AA (4.5:1), in both themes. "*-ink" tokens are the text-safe versions of an accent; the plain token is for borders, fills and graphics. ========================================================================= */ :root { color-scheme: light dark; --ink: #11201B; /* primary text */ --ink-soft: #3A4A44; /* secondary text */ --paper: #EDF0EC; /* page background — pedra-sabão */ --paper-card: #FFFFFF; /* card / panel background */ --line: #C2CDC6; /* hairline borders */ --line-soft: #D9E1DB; --brand: #074632; /* GOAL logo green */ --teal: #0B5A44; /* graphics, borders, nodes */ --teal-ink: #0A4C39; /* accent text */ --teal-soft: #DCEBE4; /* accent tint background */ --gold: #B5801F; /* "optimal route" accent — graphics */ --gold-ink: #79540F; /* "optimal route" accent — text */ --gold-soft: #F4E7CB; /* ----------------------------------------------------------------------- Research-area colours. Each area of the group owns one colour, used to identify it everywhere it appears: section heading, area card, project tag in Software, and researcher card. Set with "area:" in the .md files. --area-none is the colour for anything without an area — Contato, Publicações, Prêmios, or a block where the field was left out. It is deliberately desaturated: the six areas are all saturated, so "no information" can never be mistaken for information. All seven meet WCAG AA against the page background and against white. ----------------------------------------------------------------------- */ --area-scheduling: #5B3A78; --area-scheduling-t: #EBE7EF; --area-routing: #0B5A44; --area-routing-t: #E2EBE9; --area-mining: #8A3324; --area-mining-t: #F1E7E5; --area-energy: #1C5A66; --area-energy-t: #E4EBED; --area-health: #2B4A7D; --area-health-t: #E6E9EF; --area-learning: #7A5410; --area-learning-t: #EFEAE2; --area-none: #5A6B63; --area-none-t: #E7EAE8; --shadow: 0 8px 24px rgba(17, 32, 27, 0.10); --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif; --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --maxw: 1120px; --header-h: 68px; } /* Dark theme. Follows the OS setting, and can be forced with / . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #E8EDE9; --ink-soft: #A9B7B0; --paper: #0E1714; --paper-card: #16211D; --line: #2A3B34; --line-soft: #223029; --brand: #7FC9AC; --teal: #7FC9AC; --teal-ink: #8FD6B8; --teal-soft: #1C332B; --gold: #E0A94A; --gold-ink: #EBBB68; --gold-soft: #3A2E17; /* Light equivalents of the area colours; the light-theme values sit at around 2:1 on this background and would be unreadable. */ --area-scheduling: #C4A6DF; --area-scheduling-t: #2F2934; --area-routing: #6FC6A4; --area-routing-t: #1F2F29; --area-mining: #EC9A8A; --area-mining-t: #362724; --area-energy: #7DC7D6; --area-energy-t: #222F32; --area-health: #93B6EA; --area-health-t: #262C36; --area-learning: #E0AC58; --area-learning-t: #342A1B; --area-none: #9AA8A1; --area-none-t: #272A28; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --ink: #E8EDE9; --ink-soft: #A9B7B0; --paper: #0E1714; --paper-card: #16211D; --line: #2A3B34; --line-soft: #223029; --brand: #7FC9AC; --teal: #7FC9AC; --teal-ink: #8FD6B8; --teal-soft: #1C332B; --gold: #E0A94A; --gold-ink: #EBBB68; --gold-soft: #3A2E17; /* Light equivalents of the area colours; the light-theme values sit at around 2:1 on this background and would be unreadable. */ --area-scheduling: #C4A6DF; --area-scheduling-t: #2F2934; --area-routing: #6FC6A4; --area-routing-t: #1F2F29; --area-mining: #EC9A8A; --area-mining-t: #362724; --area-energy: #7DC7D6; --area-energy-t: #222F32; --area-health: #93B6EA; --area-health-t: #262C36; --area-learning: #E0AC58; --area-learning-t: #342A1B; --area-none: #9AA8A1; --area-none-t: #272A28; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* ------------------------------------------------------------------------- Utility text styles ------------------------------------------------------------------------- */ /* A short label above a heading. Set in normal case: wide letter-spacing exists only to make capitals readable, so both go together. */ .eyebrow { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); display: block; border-left: 3px solid var(--c, var(--gold)); padding-left: 10px; } /* ------------------------------------------------------------------------- Brand band (home page only) — a prominent, generously spaced showcase of the full GOAL logo lockup. ------------------------------------------------------------------------- */ .brand-band { background: var(--paper-card); border-bottom: 1px solid var(--line); padding: 24px 0; text-align: center; } /* Vector logo — free to scale. */ .brand-band-logo { height: 58px; width: auto; max-width: 100%; margin: 0 auto; } @media (max-width: 640px) { .brand-band { padding: 20px 0; } .brand-band-logo { height: 34px; } } /* ------------------------------------------------------------------------- Header ------------------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } .brand-logo { height: 34px; width: auto; flex: none; } .header-right { display: flex; align-items: center; gap: 8px; position: relative; } .lang-toggle { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; flex: none; } .lang-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-decoration: none; color: var(--ink-soft); padding: 7px 11px; transition: background 0.15s ease, color 0.15s ease; } .lang-btn + .lang-btn { border-left: 1px solid var(--line); } .lang-btn:hover { background: var(--teal-soft); color: var(--teal-ink); } .lang-btn.active { background: var(--ink); color: var(--paper); } nav.main-nav ul { list-style: none; display: flex; gap: 1px; margin: 0; padding: 0; } nav.main-nav a { display: inline-block; padding: 8px 10px; border-radius: 6px; text-decoration: none; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-soft); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } nav.main-nav a:hover { background: var(--teal-soft); color: var(--teal-ink); } nav.main-nav a.active { color: var(--ink); background: var(--paper-card); border: 1px solid var(--line); } .nav-toggle { /* Hidden on wide screens; the @media (max-width: 900px) block below turns it into an inline-flex button. Do not redeclare "display" for .nav-toggle anywhere after that media query — media queries add no specificity, so a later plain rule would silently win and the mobile menu would disappear. */ display: none; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-family: var(--font-mono); font-size: 13px; color: var(--ink); cursor: pointer; } /* ------------------------------------------------------------------------- Hero (home page only) ------------------------------------------------------------------------- */ .hero { border-bottom: 1px solid var(--line); } .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 64px; } .hero h1 { font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 50px); line-height: 1.12; margin: 14px 0 20px; font-weight: 600; } /* The title accent is no longer coloured: gold means "route" throughout the site, and a word in a headline is not a route. */ .hero h1 .accent { color: inherit; font-style: normal; } .hero p.lede { color: var(--ink-soft); font-size: 18px; max-width: 46ch; margin: 0 0 28px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .btn { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.03em; text-decoration: none; padding: 12px 20px; border-radius: 7px; border: 1px solid var(--ink); display: inline-block; transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease; } .btn.primary { background: var(--ink); color: var(--paper); } .btn.primary:hover { background: var(--brand); border-color: var(--brand); } .btn.ghost { background: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--paper-card); } .btn:hover { transform: translateY(-1px); } .hero-graph { width: 100%; height: auto; } .hero-graph .edge { fill: none; stroke: var(--line); stroke-width: 1.6; } .hero-graph .edge.route { stroke: var(--gold); stroke-width: 2.6; stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw 1.8s ease forwards 0.2s; } .hero-graph .node { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1.4; } .hero-graph .node.on-route { fill: var(--gold); stroke: var(--ink); } .hero-graph .node.start { fill: var(--teal); stroke: var(--ink); } @keyframes draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .hero-graph .edge.route { animation: none; stroke-dashoffset: 0; } } /* ------------------------------------------------------------------------- Sections / cards ------------------------------------------------------------------------- */ section.block { padding: 56px 0; border-bottom: 1px solid var(--line-soft); } section.block:last-of-type { border-bottom: none; } .block h2 { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin: 6px 0 8px; } .block .lede { color: var(--ink-soft); max-width: 62ch; margin: 0 0 32px; } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .card { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: 22px; } .card .node-mark { width: 20px; height: 20px; border-radius: 50%; background: var(--teal-soft); border: 1.5px solid var(--teal); margin-bottom: 14px; } .card h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; } .card p { color: var(--ink-soft); font-size: 15px; margin: 0; } /* ------------------------------------------------------------------------- Software / repository list (layout: software) ------------------------------------------------------------------------- */ .repo-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .repo-row { padding: 22px 0; border-bottom: 1px solid var(--line); } .repo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .repo-name { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--ink); } .repo-tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--teal-ink); background: var(--teal-soft); border: 1px solid var(--teal); border-radius: 20px; padding: 2px 10px; white-space: nowrap; } .repo-desc { color: var(--ink-soft); font-size: 15px; } .repo-desc p { margin: 0 0 8px; } .repo-desc p:last-child { margin-bottom: 0; } .repo-desc a { color: var(--teal-ink); } .repo-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .repo-links .repo-link { font-family: var(--font-mono); font-size: 12.5px; color: var(--teal-ink); text-decoration: none; background: var(--teal-soft); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; } .repo-links .repo-link:hover { border-color: var(--teal); text-decoration: underline; } /* ------------------------------------------------------------------------- Article content (rendered markdown pages) ------------------------------------------------------------------------- */ .page-head { padding: 48px 0 8px; } .page-head h1 { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 42px); margin: 10px 0 6px; } .page-head .lede { color: var(--ink-soft); font-size: 17px; max-width: 60ch; } article.content { padding: 24px 0 64px; max-width: 74ch; } article.content h2 { font-family: var(--font-display); font-size: 23px; margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--line-soft); } article.content h2:first-child { border-top: none; padding-top: 0; margin-top: 0; } article.content h3 { font-family: var(--font-display); font-size: 19px; margin: 26px 0 8px; } article.content p { margin: 0 0 14px; color: var(--ink-soft); } article.content strong { color: var(--ink); } article.content a { color: var(--teal-ink); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 2px; } article.content ul { padding-left: 20px; color: var(--ink-soft); } article.content li { margin-bottom: 6px; } article.content hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; } article.content img { border-radius: 8px; margin: 12px 0; border: 1px solid var(--line); } article.content blockquote { margin: 0 0 14px; padding: 4px 0 4px 16px; border-left: 3px solid var(--gold); color: var(--ink-soft); font-style: italic; } article.content code { font-family: var(--font-mono); background: var(--paper-card); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 0.92em; } /* ------------------------------------------------------------------------- Person cards (Professors / Students) ------------------------------------------------------------------------- */ .person-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: none; } .person-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: 12px; padding: 26px; } .avatar-wrap { width: 64px; height: 64px; margin-bottom: 16px; position: relative; } .avatar-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); margin: 0; } .avatar-initials { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: #fff; letter-spacing: 0.02em; } .person-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0 0 4px; } .person-card .degree { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 14px; } .person-card .interests { font-size: 14.5px; color: var(--ink); margin: 0 0 14px; line-height: 1.55; } .person-card .interests strong { color: var(--ink); } .person-card .meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); margin: 0 0 16px; } .person-card .links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .person-card .links a { font-family: var(--font-mono); font-size: 12.5px; color: var(--teal-ink); text-decoration: none; background: var(--teal-soft); border-radius: 20px; padding: 4px 12px; } .person-card .links a:hover { text-decoration: underline; } @media (max-width: 720px) { .person-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- Research area cards ------------------------------------------------------------------------- */ .area-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .area-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: 12px; padding: 26px; } .area-card .node-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-soft); border: 1.5px solid var(--gold); margin-bottom: 16px; } .area-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0 0 10px; } .area-card .desc { color: var(--ink-soft); font-size: 15px; line-height: 1.6; } .area-card .desc p { margin: 0 0 10px; } .area-card .desc p:last-child { margin-bottom: 0; } .area-card .desc a { color: var(--teal-ink); } .area-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .area-card .tags span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; } @media (max-width: 720px) { .area-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- Awards list ------------------------------------------------------------------------- */ .award-list { display: flex; flex-direction: column; } .award-row { display: grid; grid-template-columns: 84px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line-soft); } .award-row:first-child { padding-top: 0; } .award-row:last-child { border-bottom: none; } .award-year { font-family: var(--font-mono); font-size: 14px; color: var(--ink); background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 7px; padding: 5px 0; text-align: center; height: fit-content; } .award-row h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 6px; } .award-row .desc { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0; } .award-row .desc p { margin: 0 0 8px; } .award-row .desc p:last-child { margin-bottom: 0; } .award-row .desc a { color: var(--teal-ink); } .award-row .award-link { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--teal-ink); text-decoration: none; } .award-row .award-link:hover { text-decoration: underline; } @media (max-width: 560px) { .award-row { grid-template-columns: 1fr; gap: 8px; } .award-year { width: fit-content; padding: 3px 10px; } } /* ------------------------------------------------------------------------- News & Events list ------------------------------------------------------------------------- */ .news-list { display: flex; flex-direction: column; } .news-row { display: grid; grid-template-columns: 130px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line-soft); } .news-row:first-child { padding-top: 0; } .news-row:last-child { border-bottom: none; } .news-meta-col { display: flex; flex-direction: column; gap: 8px; } .news-badge { font-family: var(--font-body); font-size: 12px; border-radius: 20px; padding: 3px 10px; width: fit-content; } .news-badge.type-news { background: var(--teal-soft); color: var(--teal-ink); border: 1px solid var(--teal); } .news-badge.type-event { background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold); } .news-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); } .news-row h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 6px; } .news-row .location { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); margin: 0 0 8px; } .news-row .desc { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0; } .news-row .desc p { margin: 0 0 8px; } .news-row .desc p:last-child { margin-bottom: 0; } .news-row .desc a { color: var(--teal-ink); } .news-row .news-link { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--teal-ink); text-decoration: none; } .news-row .news-link:hover { text-decoration: underline; } @media (max-width: 560px) { .news-row { grid-template-columns: 1fr; gap: 8px; } } /* ------------------------------------------------------------------------- Homepage news & events preview ------------------------------------------------------------------------- */ .news-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .news-preview-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; text-decoration: none; color: var(--ink); display: block; } .news-preview-card .news-badge { margin-bottom: 10px; } .news-preview-card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 6px; line-height: 1.35; } .news-preview-card .news-date { display: block; margin-bottom: 8px; } .news-preview-card p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 900px) { .news-preview-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .news-preview-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ footer.site-footer { border-top: 1px solid var(--line); padding: 40px 0 48px; margin-top: 24px; } footer.site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } footer.site-footer .fname { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 6px; } footer.site-footer p { margin: 2px 0; color: var(--ink-soft); font-size: 14.5px; } footer.site-footer .fright { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); text-align: right; } footer.site-footer .institutions { display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); } footer.site-footer .institutions-funding { margin-top: 16px; padding-top: 0; border-top: none; } footer.site-footer .inst-label { font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); } footer.site-footer .inst-logo { width: auto; flex: none; /* Institutional marks differ wildly in aspect ratio (CNPq is 3.2:1 wide, the UFOP crest is 1:2.3 tall), so each gets a height that gives it a similar optical weight instead of one shared height. */ height: 38px; } .inst-logo.is-ufop { height: 54px; } .inst-logo.is-iceb { height: 36px; } .inst-logo.is-decom { height: 36px; } .inst-logo.is-cnpq { height: 24px; } .inst-logo.is-capes { height: 40px; } .inst-logo.is-fapemig { height: 38px; } @media (max-width: 640px) { .inst-logo.is-ufop { height: 44px; } .inst-logo.is-iceb { height: 29px; } .inst-logo.is-decom { height: 30px; } .inst-logo.is-cnpq { height: 20px; } .inst-logo.is-capes { height: 32px; } .inst-logo.is-fapemig { height: 31px; } } /* ------------------------------------------------------------------------- Loading / empty states ------------------------------------------------------------------------- */ .state-msg { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-soft); padding: 40px 0; } /* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; padding-top: 40px; } .hero-graph { max-width: 420px; margin: 0 auto; } .card-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .brand-logo { height: 32px; } nav.main-nav { display: none; /* Anchored to .header-right (position: relative), so the panel hangs just below the button instead of at the viewport edge. */ position: absolute; top: calc(100% + 10px); right: 0; max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; background: var(--paper-card); border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-width: 180px; z-index: 30; box-shadow: var(--shadow); } nav.main-nav.open { display: block; } nav.main-nav ul { flex-direction: column; gap: 2px; } nav.main-nav a { display: block; font-size: 13.5px; padding: 9px 12px; } .nav-toggle { display: inline-flex; } footer.site-footer .wrap { flex-direction: column; } footer.site-footer .fright { text-align: left; } footer.site-footer .institutions { flex-wrap: wrap; } } @media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } } /* ========================================================================= v2 additions — tables, downloads, CSV data tables, breadcrumbs, groups ========================================================================= */ /* Skip link ------------------------------------------------------------- */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 13px; padding: 10px 16px; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 0; } /* Layout wrappers ------------------------------------------------------- */ .layout-block { padding-bottom: 64px; } .layout-block.narrow { max-width: 860px; } article.content.wide { max-width: var(--maxw); } .section-more { margin-top: 22px; } /* Tables ---------------------------------------------------------------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-card); margin: 18px 0; } .table-wrap:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .table-wrap table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; } .table-wrap th, .table-wrap td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .table-wrap thead th { position: sticky; top: 0; background: var(--paper-card); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); z-index: 1; } .table-wrap tbody tr:last-child td { border-bottom: none; } .table-wrap tbody tr:nth-child(even) { background: var(--paper); } .table-wrap td { color: var(--ink-soft); } .ta-right { text-align: right !important; } .ta-center { text-align: center !important; } .ta-left { text-align: left !important; } /* CSV-backed data tables ------------------------------------------------ */ .csv-table { margin: 18px 0; } .csv-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .csv-filter { font-family: var(--font-body); font-size: 14px; color: var(--ink); background: var(--paper-card); border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px; min-width: 220px; flex: 1; max-width: 320px; } .csv-filter:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } .csv-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); } .csv-table .data-table { max-height: 62vh; } .csv-sort { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .csv-sort:hover { color: var(--teal-ink); } .csv-sort:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .csv-arrow::after { content: "\2195"; opacity: 0.35; font-size: 11px; } .csv-sort[data-dir="asc"] .csv-arrow::after { content: "\2191"; opacity: 1; color: var(--teal-ink); } .csv-sort[data-dir="desc"] .csv-arrow::after { content: "\2193"; opacity: 1; color: var(--teal-ink); } /* Download lists (::: files) -------------------------------------------- */ .file-list { list-style: none; margin: 18px 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper-card); } .file-list li + li { border-top: 1px solid var(--line-soft); } .file-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; text-decoration: none; color: var(--ink); } .file-row:hover { background: var(--teal-soft); } .file-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } .file-ext { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--paper-card); background: var(--ink-soft); border-radius: 4px; padding: 4px 6px; min-width: 42px; text-align: center; flex: none; } .file-main { flex: 1; min-width: 0; } .file-name { display: block; font-size: 15px; } .file-row:hover .file-name { text-decoration: underline; } .file-note { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; } .file-size { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; flex: none; } /* Callouts (::: note) --------------------------------------------------- */ .callout { background: var(--paper-card); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 18px 0; } .callout p:last-child { margin-bottom: 0; } /* Institutional logos are links to each institution's site. ----------- */ .inst-link { display: inline-flex; align-items: center; padding: 4px 6px; border-radius: 8px; line-height: 0; transition: background-color 0.15s ease, opacity 0.15s ease; } .inst-link:hover { background: var(--teal-soft); } .inst-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* Breadcrumb ------------------------------------------------------------ */ .breadcrumb { display: inline-block; font-family: var(--font-mono); font-size: 12.5px; color: var(--teal-ink); text-decoration: none; margin-bottom: 14px; } .breadcrumb::before { content: "\2190"; margin-right: 6px; } .breadcrumb:hover { text-decoration: underline; } /* Grouped people cards -------------------------------------------------- */ .group-section + .group-section { margin-top: 44px; } .group-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .person-card .bio { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; } .person-card .bio p { margin: 0 0 8px; } .person-card .bio p:last-child { margin-bottom: 0; } /* Area card link -------------------------------------------------------- */ .area-card .card-link { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--teal-ink); text-decoration: none; } .area-card .card-link:hover { text-decoration: underline; } /* Ordered lists and code blocks in article content ---------------------- */ article.content ol { padding-left: 22px; color: var(--ink-soft); } article.content ol li, article.content ul li { margin-bottom: 6px; } article.content li > ul, article.content li > ol { margin-top: 6px; } article.content pre { background: var(--paper-card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 16px 0; } article.content pre code { background: none; border: none; padding: 0; font-size: 13.5px; line-height: 1.55; } /* Two-column prose (::: columns) ---------------------------------------- */ .md-columns { column-count: 2; column-gap: 40px; } .md-columns > *:first-child { margin-top: 0; } @media (max-width: 720px) { .md-columns { column-count: 1; } } /* Menu button — bars icon only; sizing and visibility live with the base .nav-toggle rule above, before the responsive media query. */ .nav-toggle-bars { width: 15px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; } .nav-toggle-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; } /* ========================================================================= Focus, theming details and print ========================================================================= */ /* Visible keyboard focus everywhere (mouse clicks stay clean). */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; } /* Anchors land below the sticky header instead of under it. */ :target { scroll-margin-top: calc(var(--header-h) + 16px); } article.content h2, article.content h3 { scroll-margin-top: calc(var(--header-h) + 16px); } /* The GOAL logo files are dark green on transparent/white, so in dark mode they sit on a light plate rather than being recoloured or inverted. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-band { background: var(--paper-card); } :root:not([data-theme="light"]) .brand-band-logo, :root:not([data-theme="light"]) .brand-logo { background: #fff; border-radius: 6px; padding: 5px 9px; } :root:not([data-theme="light"]) .institutions { background: #fff; border-radius: 10px; padding-top: 14px; padding-bottom: 14px; } :root:not([data-theme="light"]) .institutions .inst-label { color: #3A4A44; } :root:not([data-theme="light"]) .inst-link:hover { background: rgba(11, 90, 68, 0.12); } } :root[data-theme="dark"] .brand-band-logo, :root[data-theme="dark"] .brand-logo { background: #fff; border-radius: 6px; padding: 5px 9px; } :root[data-theme="dark"] .institutions { background: #fff; border-radius: 10px; padding-top: 14px; padding-bottom: 14px; } :root[data-theme="dark"] .institutions .inst-label { color: #3A4A44; } :root[data-theme="dark"] .inst-link:hover { background: rgba(11, 90, 68, 0.12); } /* File-type chips read better as outlines in dark mode. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .file-ext { color: var(--ink); background: var(--teal-soft); } } :root[data-theme="dark"] .file-ext { color: var(--ink); background: var(--teal-soft); } /* Selection follows the brand. */ ::selection { background: var(--teal-soft); color: var(--ink); } /* Print: drop the chrome, keep the content. */ @media print { .site-header, .site-footer, .brand-band, .hero-graph, .csv-toolbar, .nav-toggle, .lang-toggle, .skip-link { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .wrap { max-width: none; padding: 0; } .table-wrap { overflow: visible; border: none; } .table-wrap table { font-size: 9pt; } a { text-decoration: underline; } article.content a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; } } /* Fallback shown only when JavaScript is unavailable. */ .noscript-note { padding: 32px 28px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); } .noscript-note ul { padding-left: 20px; } .noscript-note a { color: var(--teal-ink); } /* Reserve the header's height before JavaScript fills it in, so the page does not jump once the navigation renders. */ .site-header:empty { min-height: var(--header-h); } /* ========================================================================= Research-area colour system ------------------------------------------------------------------------- Blocks that declare "area:" in their .md file get --c (the area colour) and --ct (its tint) set inline by site.js. Everything below reads those two variables with a fallback, so content without an area still renders correctly — and never borrows another area's colour by accident. The fallback has two levels on purpose: - structural marks (rails, dots, tags) fall back to --area-none, the desaturated grey that reads as "unclassified"; - text falls back to --ink, because an unclassified heading is still a normal heading, not a dimmed one. ========================================================================= */ /* Section headings carry the colour of the section they open. */ article.content h2, .page-head h2 { padding-left: 14px; border-left: 5px solid var(--c, var(--area-none)); line-height: 1.25; } /* Area cards and home cards */ .card, .area-card { border-radius: 0 6px 6px 0; border: 1px solid var(--line); border-left: 5px solid var(--c, var(--area-none)); box-shadow: none; } .card h3, .area-card h3 { color: var(--c, var(--ink)); } .card .node-mark, .area-card .node-mark { background: var(--c, var(--area-none)); border-color: var(--c, var(--area-none)); } .area-card .tags span { color: var(--c, var(--ink-soft)); background: var(--ct, transparent); } /* Software list: the tag repeats the taxonomy used on Research Areas, so a reader connects the project to the area without being told. */ .repo-row { border-left: 5px solid var(--c, var(--area-none)); padding-left: 18px; } .repo-tag { font-family: var(--font-body); color: var(--c, var(--area-none)); background: var(--ct, var(--area-none-t)); border-color: var(--c, var(--area-none)); } .repo-name { font-family: var(--font-body); font-weight: 600; font-size: 16.5px; } /* Researcher cards show which area the person works in. */ .person-card { border-top: 4px solid var(--c, var(--area-none)); } /* Monospace is reserved for what it actually signals — code, data and file names. It is removed from labels that are just small text. */ .lang-toggle, .news-badge, .card-link, .award-link, .news-link, .person-card .links a, .repo-links .repo-link { font-family: var(--font-body); } /* ========================================================================= Roster — dense people list (layout: roster) ------------------------------------------------------------------------- No box, no avatar: each person is a compact row, and the rows flow into two or three columns on wide screens. A list of forty students stays about a screen and a half instead of scrolling for pages. ========================================================================= */ .roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0 40px; } .roster-row { display: block; padding: 11px 0 11px 12px; border-bottom: 1px solid var(--line-soft); border-left: 3px solid var(--c, transparent); } .roster-name { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.35; } .roster-note, .roster-meta { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin-top: 2px; } .roster-meta { font-size: 12.5px; } .roster-links { display: inline-flex; flex-wrap: wrap; gap: 12px; margin-top: 5px; } .roster-links a { font-size: 12.5px; color: var(--teal-ink); text-decoration: none; } .roster-links a:hover { text-decoration: underline; } /* The count next to a section title makes the size of each group obvious without the reader having to tally the rows. */ .group-count { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--ink-soft); vertical-align: middle; margin-left: 4px; } @media (max-width: 720px) { .roster { grid-template-columns: 1fr; gap: 0; } } /* Long reference text in a data table should wrap instead of forcing the whole table sideways; only short columns stay on one line. */ .csv-table td { white-space: normal; max-width: 60ch; } .csv-table td:first-child, .csv-table th:first-child { white-space: nowrap; } .csv-table a { color: var(--teal-ink); } /* Introductory prose above a list layout. */ .layout-intro { margin-bottom: 26px; } .layout-intro p { color: var(--ink-soft); max-width: 72ch; margin: 0 0 10px; } .layout-intro a { color: var(--teal-ink); } /* ========================================================================= Methods band (home page) ------------------------------------------------------------------------- Deliberately unlike the research-area cards: full-width tinted band, no colour rail, two wide columns. Methods cut across every area, so they must not look like a seventh and eighth area. ========================================================================= */ .methods-band { background: var(--paper-card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; margin-top: 24px; } .method { padding-top: 18px; border-top: 2px solid var(--gold); } .method h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0 0 8px; color: var(--ink); } .method p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; } @media (max-width: 720px) { .method-grid { grid-template-columns: 1fr; gap: 22px; } } /* Methods appended to a list page (Research Areas). Same treatment as the home band, but inset: a tinted panel rather than a full-width strip, so it reads as a closing section instead of a seventh area card. */ .layout-outro { margin-top: 48px; } .methods-inline { background: var(--paper-card); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 0 0 10px 10px; padding: 30px 32px 34px; } .methods-inline .eyebrow { border-left: none; padding-left: 0; } .methods-inline h2 { margin: 10px 0 8px; padding-left: 0; border-left: none; } .methods-inline .lede { font-size: 15.5px; max-width: 70ch; margin-bottom: 4px; } .methods-inline .method-grid { margin-top: 22px; } @media (max-width: 640px) { .methods-inline { padding: 22px 20px 26px; } }