Pages Medium
Science — Conference Poster
A single-sheet academic conference poster on a fixed A0-proportioned canvas, scaled responsively. It pairs a bold gradient title band carrying authors and text-logo institutions with a three-column grid of accent-headed panels — Introduction, Methods, Results, Conclusion, References, and a Contact box — featuring a CSS bar-chart figure, a results table, an inline equation, a CSS-drawn QR code, and a fit-to-screen versus actual-size zoom toggle for print-poster review.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #1a4f8a;
--accent-d: #123a66;
--accent-50: #e9f0f9;
--teal: #0f7d78;
--teal-50: #e4f3f1;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 8px 28px rgba(15, 27, 45, 0.08);
--serif: "Source Serif 4", Georgia, serif;
--ui: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
body {
font-family: var(--serif);
background: var(--bg-alt);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-top: 64px;
}
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* ============ TOOLBAR ============ */
.toolbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
height: 56px;
display: flex;
align-items: center;
gap: 14px;
padding: 0 18px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
font-family: var(--ui);
}
.toolbar__brand {
font-weight: 700;
letter-spacing: 0.02em;
color: var(--accent-d);
font-size: 15px;
}
.toolbar__group {
display: flex;
border: 1px solid var(--line-2);
border-radius: var(--r-md);
overflow: hidden;
}
.seg {
font-family: var(--ui);
font-size: 13px;
font-weight: 600;
padding: 7px 14px;
border: 0;
background: var(--bg);
color: var(--ink-2);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.seg + .seg { border-left: 1px solid var(--line); }
.seg:hover { background: var(--accent-50); }
.seg.is-active { background: var(--accent); color: #fff; }
.toolbar__zoom {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.toolbar__readout {
font-family: var(--mono);
font-size: 13px;
min-width: 48px;
text-align: center;
color: var(--ink-2);
}
.iconbtn {
font-family: var(--ui);
font-weight: 700;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--ink);
cursor: pointer;
font-size: 16px;
transition: background 0.15s, border-color 0.15s;
}
.iconbtn:hover { background: var(--accent-50); border-color: var(--accent); }
.iconbtn:active { transform: translateY(1px); }
.iconbtn--wide { width: auto; padding: 0 14px; font-size: 13px; }
/* ============ STAGE / POSTER ============ */
.stage {
display: flex;
justify-content: center;
padding: 28px 18px 60px;
overflow: auto;
}
.poster {
/* A0 portrait proportion ~ 841 x 1189 → scaled */
width: 880px;
background: var(--bg);
border: 1px solid var(--line);
box-shadow: var(--shadow);
transform-origin: top center;
transition: transform 0.25s ease;
}
/* ============ BANNER ============ */
.banner {
background: linear-gradient(135deg, var(--accent-d), var(--accent));
color: #fff;
padding: 26px 34px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 26px;
border-bottom: 5px solid var(--teal);
}
.banner__logos { display: flex; flex-direction: column; gap: 12px; }
.logo {
font-family: var(--ui);
font-weight: 800;
font-size: 15px;
letter-spacing: 0.04em;
line-height: 1.05;
display: flex;
flex-direction: column;
padding: 7px 11px;
border-radius: var(--r-sm);
border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.logo small {
font-size: 9px;
font-weight: 500;
letter-spacing: 0.18em;
opacity: 0.82;
margin-top: 2px;
}
.logo--b { border-style: dashed; }
.banner__kicker {
font-family: var(--ui);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 8px;
color: var(--accent-50);
font-weight: 600;
}
.banner__title {
font-family: var(--serif);
font-weight: 700;
font-size: 32px;
line-height: 1.18;
margin: 0 0 14px;
text-wrap: balance;
}
.banner__authors {
font-family: var(--ui);
font-weight: 600;
font-size: 17px;
margin: 0 0 4px;
}
.banner__authors sup, .banner__affil sup { font-size: 0.62em; }
.banner__affil {
font-family: var(--ui);
font-size: 12.5px;
margin: 0;
color: rgba(255, 255, 255, 0.86);
}
.banner__id { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.pill {
font-family: var(--mono);
font-size: 12px;
padding: 5px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.3);
white-space: nowrap;
}
.pill--muted { opacity: 0.78; }
/* ============ GRID ============ */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 24px;
background: var(--bg-alt);
}
.col { display: flex; flex-direction: column; gap: 20px; }
/* ============ PANELS ============ */
.panel {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
transition: box-shadow 0.18s, transform 0.18s;
}
.panel:hover, .panel:focus-within {
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.panel__head {
font-family: var(--ui);
font-weight: 700;
font-size: 17px;
margin: 0;
padding: 11px 16px;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.01em;
}
.panel--accent .panel__head { background: var(--teal); }
.panel--contact .panel__head { background: var(--accent-d); }
.panel__no {
font-family: var(--mono);
font-size: 12px;
background: rgba(255, 255, 255, 0.22);
padding: 2px 7px;
border-radius: var(--r-sm);
}
.panel__body { padding: 14px 16px 18px; font-size: 14.5px; color: var(--ink-2); }
.panel__body p { margin: 0 0 10px; }
.panel__body p:last-child { margin-bottom: 0; }
.panel__body strong { color: var(--ink); }
.bullets { margin: 8px 0 0; padding-left: 18px; }
.bullets li { margin-bottom: 6px; }
.bullets strong { color: var(--accent-d); }
/* ============ EQUATION ============ */
.eq {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 14px 0 2px;
padding: 14px 10px;
background: var(--accent-50);
border-radius: var(--r-sm);
border: 1px solid var(--line);
}
.eq__body {
font-family: var(--serif);
font-size: 18px;
color: var(--ink);
}
.eq__body i { font-style: italic; }
.eq__num {
position: absolute;
right: 12px;
font-family: var(--mono);
font-size: 13px;
color: var(--muted);
}
/* ============ FIGURES ============ */
.figure { margin: 14px 0 4px; }
figcaption {
font-family: var(--ui);
font-size: 12px;
color: var(--muted);
line-height: 1.45;
margin-top: 7px;
}
figcaption strong { color: var(--ink-2); }
.schematic {
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 8px;
position: relative;
}
.schematic svg { width: 100%; height: auto; display: block; }
.schematic__tide {
position: absolute;
top: 8px; right: 12px;
display: flex;
gap: 8px;
font-family: var(--mono);
font-size: 9px;
color: var(--accent-d);
}
.wave { stroke-dasharray: 200; animation: drift 7s linear infinite; }
@keyframes drift { to { stroke-dashoffset: -200; } }
@media (prefers-reduced-motion: reduce) { .wave { animation: none; } }
/* ============ CHART ============ */
.chart {
display: grid;
grid-template-columns: 28px 1fr;
grid-template-rows: 1fr auto;
gap: 4px 6px;
height: 220px;
padding: 6px 4px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-sm);
}
.chart__yaxis {
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
font-family: var(--mono);
font-size: 10px;
color: var(--muted);
padding-right: 2px;
}
.chart__plot {
grid-row: 1;
grid-column: 2;
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 12px;
border-left: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
position: relative;
padding: 0 6px;
}
.cluster {
display: flex;
align-items: flex-end;
gap: 4px;
height: 100%;
}
.bar {
width: 16px;
border-radius: 3px 3px 0 0;
position: relative;
cursor: pointer;
transition: filter 0.15s, transform 0.15s;
align-self: flex-end;
}
.bar:hover, .bar:focus-visible { filter: brightness(1.12); transform: scaleY(1.02); }
.bar::after {
content: attr(data-cap);
position: absolute;
top: -2px; left: 50%;
width: 60%;
transform: translateX(-50%);
border-top: 2px solid rgba(15, 27, 45, 0.5);
}
.bar__tip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: var(--ink);
color: #fff;
font-family: var(--mono);
font-size: 10px;
padding: 4px 7px;
border-radius: var(--r-sm);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: 5;
}
.bar:hover .bar__tip, .bar:focus-visible .bar__tip { opacity: 1; }
.cluster__lbl {
position: absolute;
bottom: -16px;
left: 0; right: 0;
text-align: center;
font-family: var(--ui);
font-size: 10px;
color: var(--muted);
}
.chart__legend {
grid-column: 2;
grid-row: 2;
display: flex;
flex-wrap: wrap;
gap: 12px;
font-family: var(--ui);
font-size: 10.5px;
color: var(--ink-2);
padding-top: 8px;
}
.chart__legend span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
/* ============ TABLE ============ */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
table {
border-collapse: collapse;
width: 100%;
font-family: var(--ui);
font-size: 12.5px;
min-width: 320px;
}
caption {
caption-side: top;
text-align: left;
padding: 8px 10px 4px;
font-family: var(--ui);
font-size: 12px;
color: var(--ink-2);
}
thead th {
background: var(--accent-50);
color: var(--accent-d);
font-weight: 700;
text-align: right;
padding: 7px 10px;
border-bottom: 1.5px solid var(--line-2);
vertical-align: bottom;
}
thead th:first-child { text-align: left; }
thead small { font-weight: 400; color: var(--muted); }
tbody td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--line); }
tbody td:first-child { text-align: left; font-weight: 500; color: var(--ink); }
tbody tr:nth-child(even) { background: var(--bg-alt); }
tbody tr:hover { background: var(--teal-50); }
/* ============ CALLOUTS ============ */
.callouts { display: flex; gap: 12px; margin: 12px 0; }
.callout {
flex: 1;
background: var(--accent-50);
border-radius: var(--r-md);
padding: 12px;
text-align: center;
border: 1px solid var(--line);
}
.callout--teal { background: var(--teal-50); }
.callout__big {
display: block;
font-size: 28px;
font-weight: 500;
color: var(--accent-d);
line-height: 1.1;
}
.callout--teal .callout__big { color: var(--teal); }
.callout__lbl {
display: block;
font-family: var(--ui);
font-size: 11px;
color: var(--muted);
margin-top: 4px;
}
/* ============ REFS ============ */
.refs { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-2); }
.refs li { margin-bottom: 9px; line-height: 1.45; }
.refs .mono { font-size: 10.5px; color: var(--accent); }
/* ============ CONTACT / QR ============ */
.contact { display: flex; gap: 16px; align-items: flex-start; }
.qr {
width: 96px; height: 96px;
flex-shrink: 0;
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-template-rows: repeat(11, 1fr);
gap: 0;
padding: 6px;
background: #fff;
border: 1.5px solid var(--ink);
border-radius: var(--r-sm);
}
.qr i { background: var(--ink); }
.contact__info { font-size: 13px; }
.contact__name { font-family: var(--ui); font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.contact__line { font-size: 11.5px; color: var(--ink-2); margin: 0 0 3px; }
.contact__data { font-family: var(--ui); font-size: 11px; color: var(--muted); margin: 8px 0 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.copybtn {
margin-top: 8px;
font-family: var(--ui);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border: 1px solid var(--accent);
background: var(--bg);
color: var(--accent);
border-radius: var(--r-sm);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.copybtn:hover { background: var(--accent); color: #fff; }
/* ============ FOOT ============ */
.poster__foot {
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 14px 34px;
background: var(--accent-d);
color: rgba(255, 255, 255, 0.88);
font-family: var(--ui);
font-size: 11.5px;
}
.poster__foot .mono { color: var(--accent-50); }
/* ============ TOAST ============ */
.toast {
position: fixed;
bottom: 24px; left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--ink);
color: #fff;
font-family: var(--ui);
font-size: 13px;
padding: 10px 18px;
border-radius: 999px;
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
z-index: 100;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ============ RESPONSIVE ============ */
@media (max-width: 940px) {
.poster { width: 720px; }
.banner__title { font-size: 26px; }
}
@media (max-width: 640px) {
body { padding-top: 104px; }
.toolbar {
height: auto;
flex-wrap: wrap;
padding: 8px 12px;
gap: 8px;
}
.toolbar__zoom { margin-left: 0; }
.stage { padding: 14px 8px 40px; }
.poster {
width: 100%;
transform: none !important;
}
.banner {
grid-template-columns: 1fr;
gap: 14px;
padding: 18px;
text-align: left;
}
.banner__logos { flex-direction: row; flex-wrap: wrap; }
.banner__id { flex-direction: row; align-items: flex-start; }
.banner__title { font-size: 22px; }
.grid { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
.callouts { flex-direction: column; }
.contact { flex-direction: column; align-items: center; text-align: center; }
}
@media print {
body { padding-top: 0; background: #fff; }
.toolbar, .toast { display: none !important; }
.stage { padding: 0; }
.poster { box-shadow: none; border: 0; transform: none !important; width: 100%; }
.panel:hover { transform: none; box-shadow: none; }
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 2200);
}
/* ---------- build results chart ---------- */
// depth bands × tidal phases (particles kg^-1, of max 60)
var phases = [
{ key: "Flood", color: "#1a4f8a" },
{ key: "Slack", color: "#0f7d78" },
{ key: "Ebb", color: "#c9821f" }
];
var bands = [
{ label: "0–4 cm", vals: [22.1, 18.4, 14.0], se: [2.1, 1.8, 1.6] },
{ label: "4–8 cm", vals: [38.6, 27.0, 17.5], se: [3.0, 2.2, 1.9] },
{ label: "8–12 cm", vals: [52.7, 33.1, 19.8], se: [3.8, 2.6, 2.0] }
];
var MAX = 60;
var plot = document.getElementById("chart-plot");
var legend = document.getElementById("chart-legend");
if (plot) {
bands.forEach(function (band) {
var cluster = document.createElement("div");
cluster.className = "cluster";
band.vals.forEach(function (v, i) {
var bar = document.createElement("div");
bar.className = "bar";
bar.style.height = (v / MAX * 100) + "%";
bar.style.background = phases[i].color;
bar.setAttribute("tabindex", "0");
bar.setAttribute("role", "img");
bar.setAttribute(
"aria-label",
phases[i].key + " tide, " + band.label + ": " +
v.toFixed(1) + " particles per kilogram, plus or minus " +
band.se[i].toFixed(1)
);
var tip = document.createElement("span");
tip.className = "bar__tip";
tip.textContent = phases[i].key + " · " + v.toFixed(1) + " ±" + band.se[i].toFixed(1);
bar.appendChild(tip);
bar.addEventListener("click", function () {
toast(phases[i].key + " / " + band.label + " — " + v.toFixed(1) + " part·kg⁻¹");
});
cluster.appendChild(bar);
});
var lbl = document.createElement("span");
lbl.className = "cluster__lbl";
lbl.textContent = band.label;
cluster.appendChild(lbl);
plot.appendChild(cluster);
});
}
if (legend) {
phases.forEach(function (p) {
var span = document.createElement("span");
var sw = document.createElement("span");
sw.className = "swatch";
sw.style.background = p.color;
span.appendChild(sw);
span.appendChild(document.createTextNode(p.key + " tide"));
legend.appendChild(span);
});
}
/* ---------- CSS-drawn QR code (deterministic pseudo-pattern) ---------- */
var qr = document.getElementById("qr");
if (qr) {
var N = 11;
// deterministic seed pattern
var seed = 0x9e3779b9;
function rnd() {
seed = (seed * 1103515245 + 12345) & 0x7fffffff;
return seed / 0x7fffffff;
}
function isFinder(r, c) {
var inBox = function (r0, c0) {
return r >= r0 && r <= r0 + 2 && c >= c0 && c <= c0 + 2;
};
return inBox(0, 0) || inBox(0, N - 3) || inBox(N - 3, 0);
}
var frag = document.createDocumentFragment();
for (var r = 0; r < N; r++) {
for (var c = 0; c < N; c++) {
var cell = document.createElement("i");
var on;
if (isFinder(r, c)) {
// finder ring pattern
var rr = r < 3 ? r : r - (N - 3);
var cc = c < 3 ? c : c - (N - 3);
on = !(rr === 1 && cc === 1) ? (rr === 0 || rr === 2 || cc === 0 || cc === 2) : false;
on = on || (rr === 1 && cc === 1);
} else {
on = rnd() > 0.52;
}
if (!on) cell.style.background = "transparent";
frag.appendChild(cell);
}
}
qr.appendChild(frag);
}
/* ---------- copy DOI ---------- */
var copyBtn = document.getElementById("copy-doi");
if (copyBtn) {
copyBtn.addEventListener("click", function () {
var doi = "10.5281/zenodo.9920441";
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(doi).then(
function () { toast("DOI copied to clipboard"); },
function () { toast("DOI: " + doi); }
);
} else {
toast("DOI: " + doi);
}
});
}
/* ---------- zoom / fit controls ---------- */
var poster = document.getElementById("poster");
var stage = document.getElementById("stage");
var readout = document.getElementById("zoom-readout");
var btnFit = document.getElementById("btn-fit");
var btnActual = document.getElementById("btn-actual");
var zoomIn = document.getElementById("zoom-in");
var zoomOut = document.getElementById("zoom-out");
var BASE_W = 880; // poster intrinsic width
var scale = 1;
var mode = "fit"; // 'fit' | 'actual' | 'manual'
function isMobile() {
return window.matchMedia("(max-width: 640px)").matches;
}
function apply() {
if (isMobile()) {
poster.style.transform = "";
readout.textContent = "100%";
return;
}
poster.style.transform = "scale(" + scale + ")";
readout.textContent = Math.round(scale * 100) + "%";
}
function fitScale() {
var avail = stage.clientWidth - 36;
return Math.min(1, avail / BASE_W);
}
function setMode(m) {
mode = m;
if (m === "fit") scale = fitScale();
else if (m === "actual") scale = 1;
btnFit.classList.toggle("is-active", m === "fit");
btnFit.setAttribute("aria-pressed", String(m === "fit"));
btnActual.classList.toggle("is-active", m === "actual");
btnActual.setAttribute("aria-pressed", String(m === "actual"));
apply();
}
function clampZoom(s) {
return Math.max(0.4, Math.min(1.6, s));
}
if (poster && stage) {
btnFit.addEventListener("click", function () { setMode("fit"); });
btnActual.addEventListener("click", function () { setMode("actual"); });
zoomIn.addEventListener("click", function () {
mode = "manual";
btnFit.classList.remove("is-active");
btnActual.classList.remove("is-active");
btnFit.setAttribute("aria-pressed", "false");
btnActual.setAttribute("aria-pressed", "false");
scale = clampZoom(scale + 0.1);
apply();
});
zoomOut.addEventListener("click", function () {
mode = "manual";
btnFit.classList.remove("is-active");
btnActual.classList.remove("is-active");
btnFit.setAttribute("aria-pressed", "false");
btnActual.setAttribute("aria-pressed", "false");
scale = clampZoom(scale - 0.1);
apply();
});
window.addEventListener("resize", function () {
if (mode === "fit") { scale = fitScale(); apply(); }
else apply();
});
// start fitted
setMode("fit");
}
/* ---------- print ---------- */
var btnPrint = document.getElementById("btn-print");
if (btnPrint) {
btnPrint.addEventListener("click", function () {
toast("Opening print dialog…");
setTimeout(function () { window.print(); }, 300);
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Conference Poster — Coastal Microplastic Transport</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Floating control bar -->
<div class="toolbar" role="toolbar" aria-label="Poster viewing controls">
<span class="toolbar__brand">A0 Poster</span>
<div class="toolbar__group" role="group" aria-label="Zoom mode">
<button id="btn-fit" class="seg is-active" aria-pressed="true">Fit to screen</button>
<button id="btn-actual" class="seg" aria-pressed="false">Actual size</button>
</div>
<div class="toolbar__zoom" aria-live="polite">
<button id="zoom-out" class="iconbtn" aria-label="Zoom out">−</button>
<span id="zoom-readout" class="toolbar__readout">100%</span>
<button id="zoom-in" class="iconbtn" aria-label="Zoom in">+</button>
</div>
<button id="btn-print" class="iconbtn iconbtn--wide" aria-label="Print poster">Print</button>
</div>
<div class="stage" id="stage">
<article class="poster" id="poster" aria-label="Academic conference poster">
<!-- TITLE BAND -->
<header class="banner">
<div class="banner__logos" aria-hidden="true">
<span class="logo logo--a">MERIDIAN<small>OCEAN INST.</small></span>
<span class="logo logo--b">KAELRWOOD<small>UNIVERSITY</small></span>
</div>
<div class="banner__main">
<p class="banner__kicker">14th International Symposium on Marine Particulate Dynamics · Reykjavík · 2026</p>
<h1 class="banner__title">Tidal Forcing Governs Subsurface Microplastic Transport Across the Vellmar Shelf</h1>
<p class="banner__authors">
E. R. Saldívar<sup>1</sup>, M. Þorsteinsdóttir<sup>2</sup>, J. K. Owusu-Banahene<sup>1</sup>, L. Castellanos<sup>1,2</sup>, & H. Nakamura<sup>2</sup>
</p>
<p class="banner__affil">
<sup>1</sup>Meridian Ocean Institute, Dept. of Physical Oceanography ·
<sup>2</sup>Kaelrwood University, Coastal Systems Lab
</p>
</div>
<div class="banner__id">
<span class="pill">Poster #B-217</span>
<span class="pill pill--muted">Session B · Wed 16:30</span>
</div>
</header>
<!-- COLUMN GRID -->
<div class="grid">
<!-- COLUMN 1 -->
<section class="col">
<article class="panel" tabindex="0">
<h2 class="panel__head"><span class="panel__no">01</span> Introduction</h2>
<div class="panel__body">
<p>Microplastic (MP) particles < 5 mm accumulate in coastal sediments, yet the physical drivers of their <em>vertical</em> redistribution remain poorly constrained. Prevailing models treat the seabed as a passive sink, neglecting tidal pumping through permeable shelf sands.</p>
<p>We hypothesise that semidiurnal tidal forcing modulates pore-water advection sufficiently to mobilise buoyant MP fragments to depths exceeding <span class="mono">12 cm</span>. The Vellmar Shelf—a well-mixed, sandy embayment—offers an ideal natural laboratory.</p>
<ul class="bullets">
<li><strong>Q1.</strong> Does tidal phase predict MP concentration at depth?</li>
<li><strong>Q2.</strong> What is the characteristic mobilisation timescale?</li>
<li><strong>Q3.</strong> Can a 1-D advection–diffusion model reproduce observed profiles?</li>
</ul>
</div>
</article>
<article class="panel" tabindex="0">
<h2 class="panel__head"><span class="panel__no">02</span> Methods</h2>
<div class="panel__body">
<p>Sediment cores (<span class="mono">n = 48</span>) were collected over 6 tidal cycles at 3 cross-shelf stations using a hand-driven push corer. Cores were sectioned at <span class="mono">2 cm</span> intervals; MP fragments isolated by density separation (ZnCl<sub>2</sub>, <span class="mono">ρ = 1.6 g cm<sup>-3</sup></span>) and counted under fluorescence.</p>
<figure class="figure">
<div class="schematic" aria-hidden="true">
<div class="schematic__tide"><span>flood</span><span>ebb</span></div>
<svg viewBox="0 0 320 120" role="img" aria-label="Cross-shelf sampling schematic">
<defs>
<linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#cfe3f5"/><stop offset="1" stop-color="#e9f0f9"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="320" height="60" fill="url(#water)"/>
<path d="M0 60 Q80 78 160 62 T320 64 L320 120 L0 120 Z" fill="#d8c39a"/>
<path class="wave" d="M0 14 Q40 4 80 14 T160 14 T240 14 T320 14" fill="none" stroke="#1a4f8a" stroke-width="2"/>
<g class="station" font-family="JetBrains Mono" font-size="9" fill="#123a66">
<circle cx="70" cy="64" r="4"/><text x="62" y="92">S1</text>
<circle cx="160" cy="62" r="4"/><text x="152" y="92">S2</text>
<circle cx="250" cy="66" r="4"/><text x="242" y="94">S3</text>
</g>
</svg>
</div>
<figcaption><strong>Figure 1.</strong> Cross-shelf sampling design. Three stations (S1–S3) spanning the intertidal-to-subtidal gradient; cores logged against tidal phase.</figcaption>
</figure>
<div class="eq" role="math" aria-label="Governing advection diffusion equation">
<span class="eq__body"><i>∂C</i>/<i>∂t</i> = <i>D</i> <i>∂</i><sup>2</sup><i>C</i>/<i>∂z</i><sup>2</sup> − <i>w</i>(<i>t</i>) <i>∂C</i>/<i>∂z</i></span>
<span class="eq__num">(1)</span>
</div>
</div>
</article>
</section>
<!-- COLUMN 2 -->
<section class="col">
<article class="panel panel--accent" tabindex="0">
<h2 class="panel__head"><span class="panel__no">03</span> Results</h2>
<div class="panel__body">
<p>MP concentration at <span class="mono">10–12 cm</span> depth tracked tidal phase with a lag of <span class="mono">~2.4 h</span> (<span class="mono">r = 0.81</span>, <span class="mono">p < 0.001</span>). Flood tides drove a <span class="mono">3.4×</span> enrichment relative to slack water.</p>
<figure class="figure">
<div class="chart" id="chart" role="img" aria-label="Bar chart of microplastic concentration by depth across tidal phases">
<div class="chart__yaxis" aria-hidden="true">
<span>60</span><span>40</span><span>20</span><span>0</span>
</div>
<div class="chart__plot" id="chart-plot"></div>
<div class="chart__legend" id="chart-legend"></div>
</div>
<figcaption><strong>Figure 2.</strong> MP concentration (particles kg−¹ dry sediment) by depth band across tidal phase. Hover/tap bars for exact values. Error caps = ±1 SE.</figcaption>
</figure>
<figure class="figure figure--table">
<div class="tablewrap" tabindex="0">
<table>
<caption><strong>Table 1.</strong> Phase-binned MP flux estimates (S2, subtidal).</caption>
<thead>
<tr><th scope="col">Tidal phase</th><th scope="col">Mean C<br><small>part kg⁻¹</small></th><th scope="col">w(t)<br><small>mm h⁻¹</small></th><th scope="col">Flux<br><small>part m⁻² d⁻¹</small></th></tr>
</thead>
<tbody>
<tr><td>Flood</td><td class="mono">52.7</td><td class="mono">+0.94</td><td class="mono">118.3</td></tr>
<tr><td>High slack</td><td class="mono">41.2</td><td class="mono">+0.08</td><td class="mono">9.6</td></tr>
<tr><td>Ebb</td><td class="mono">19.8</td><td class="mono">−0.71</td><td class="mono">−66.4</td></tr>
<tr><td>Low slack</td><td class="mono">15.4</td><td class="mono">−0.05</td><td class="mono">−4.1</td></tr>
</tbody>
</table>
</div>
<figcaption>Positive <span class="mono">w(t)</span> indicates downward pore-water advection. Model fit (Eq. 1) shown as solid line in Fig. 2.</figcaption>
</figure>
</div>
</article>
</section>
<!-- COLUMN 3 -->
<section class="col">
<article class="panel" tabindex="0">
<h2 class="panel__head"><span class="panel__no">04</span> Conclusion</h2>
<div class="panel__body">
<p>Tidal pumping is a <strong>first-order control</strong> on MP burial in permeable shelf sediments. A simple 1-D advection–diffusion model (Eq. 1) reproduced <span class="mono">87%</span> of observed depth-profile variance.</p>
<div class="callouts">
<div class="callout"><span class="callout__big mono">3.4×</span><span class="callout__lbl">flood-tide enrichment at depth</span></div>
<div class="callout callout--teal"><span class="callout__big mono">87%</span><span class="callout__lbl">profile variance explained</span></div>
</div>
<p>Coastal MP budgets that ignore tidal advection may <strong>underestimate</strong> deep-sediment storage by up to one order of magnitude. Future work will extend sampling to muddy substrates.</p>
</div>
</article>
<article class="panel" tabindex="0">
<h2 class="panel__head"><span class="panel__no">05</span> References</h2>
<div class="panel__body">
<ol class="refs">
<li>Saldívar, E. R. & Nakamura, H. (2024). Pore-water advection in tidal flats. <i>J. Coastal Sediment Dyn.</i> 18(3), 211–229. <span class="mono">doi:10.5281/zenodo.8841207</span></li>
<li>Þorsteinsdóttir, M. et al. (2023). Density separation protocols for marine MP. <i>Mar. Methods</i> 7, 44–58. <span class="mono">doi:10.1016/j.marmet.2023.04.011</span></li>
<li>Castellanos, L. (2025). 1-D transport modelling of buoyant particulates. <i>Ocean Model.</i> 191, 102388. <span class="mono">doi:10.1016/j.ocemod.2025.102388</span></li>
<li>Owusu-Banahene, J. K. (2022). Tidal phase & sediment exchange. <i>Estuar. Sci.</i> 41, 9–27. <span class="mono">doi:10.1007/s12237-022-01099-x</span></li>
</ol>
</div>
</article>
<article class="panel panel--contact" tabindex="0">
<h2 class="panel__head"><span class="panel__no">06</span> Contact & Data</h2>
<div class="panel__body contact">
<div class="qr" id="qr" role="img" aria-label="QR code linking to the open dataset"></div>
<div class="contact__info">
<p class="contact__name">Dr. Elena R. Saldívar</p>
<p class="mono contact__line">[email protected]</p>
<p class="mono contact__line">@saldivar_ocean</p>
<p class="contact__data">Open dataset & code:</p>
<p class="mono contact__line">doi:10.5281/zenodo.9920441</p>
<button class="copybtn" id="copy-doi">Copy DOI</button>
</div>
</div>
</article>
</section>
</div>
<footer class="poster__foot">
<span>Funded by the Nordic Coastal Resilience Fund (grant NCR-2024-0188)</span>
<span class="mono">Meridian Ocean Institute · Vellmar Shelf Programme · v2.6</span>
</footer>
</article>
</div>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Conference Poster
A print-ready academic poster rendered on a fixed A0-portrait canvas that scales to fit any viewport. A gradient title band anchors the sheet with the paper title, a fictional author list, superscript affiliations, two text-style institution logos, and a session pill. Below it, a three-column grid lays out six accent-headed panels — Introduction, Methods, Results, Conclusion, References, and Contact — each numbered and color-banded in the institutional blue and teal palette.
The Results panel carries the data weight: a grouped CSS bar chart built entirely in JavaScript shows microplastic concentration by depth band across flood, slack, and ebb tides, with hover and keyboard-focusable tooltips, error caps, and a legend, alongside a scrollable results table and an inline LaTeX-styled advection–diffusion equation with a right-aligned number. Methods includes an inline-SVG cross-shelf sampling schematic with a gently drifting wave.
A floating toolbar drives the viewing experience: a Fit-to-screen / Actual-size segmented toggle, plus-minus zoom stepper with a live percentage readout, and a Print action. The Contact panel renders a deterministic CSS-grid QR code and a Copy DOI button that confirms via a toast. Every figure carries a bold “Figure N.” caption, controls are keyboard-usable with visible focus, and the whole sheet reflows to a single column under 640px.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.