/* ============================================================ Design and Attitude Control of an Underwater Quadruped Robot Project page — Autonomous Robots Lab, NTNU Layout adapted from the CompliantWBC / Psi-Zero project page template; type and palette follow the FALCON project page (Google Sans / Noto Sans on a neutral white-and-grey ground). ============================================================ */ :root { /* ---- neutral academic palette (Bulma / FALCON) ---- */ --text: #4a4a4a; /* body copy */ --heading: #363636; /* headings and dark surfaces */ --subtext1: #4a4a4a; --subtext0: #6b6b6b; --overlay2: #7a7a7a; --overlay1: #8c8c8c; /* kickers, captions, hints */ --overlay0: #b5b5b5; /* disabled */ --page-bg: #ffffff; --card-bg: #f5f5f5; /* panel / card ground */ --card-bg-solid: #fafafa; --accent: #209cee; /* link blue - active state, highlights */ --accent-soft: rgba(32, 156, 238, 0.12); --ink: #363636; /* dark button background */ --ink-text: #ffffff; --media-bg: #000000; /* letterbox: matches the clips own black margins */ --radius-s: 6px; --radius-m: 10px; --radius-l: 10px; /* FALCON serves Google Sans for the title and author line and Noto Sans for everything else; both come from Google Fonts in . */ --sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --display: "Google Sans", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --line: #dbdbdb; --line-soft: #ededed; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; color: var(--text); background: var(--page-bg); font-family: var(--sans); line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { color: var(--heading); letter-spacing: normal; } img, video { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Brand / wordmark ---------- */ .brand { display: flex; align-items: center; justify-content: center; text-align: center; margin: clamp(8px, 2vw, 20px) 0 0; } .brand-logo { font-family: var(--sans); font-weight: 400; font-size: clamp(28px, 5vw, 62px); letter-spacing: -0.03em; line-height: 1; display: inline-flex; gap: 0.3ch; align-items: baseline; } .brand-a { color: var(--accent); } .brand-b { color: var(--ink); } /* ---------- Layout shell ---------- */ .page { padding: 28px 6vw 72px; display: flex; flex-direction: column; gap: 16px; max-width: 1100px; margin: 0 auto; position: relative; } .content { display: flex; flex-direction: column; gap: 16px; } .content-inner { max-width: 1080px; margin: 0 auto; width: 100%; } /* ---------- Sticky table of contents ---------- */ .page-toc { display: none; } .page-toc-label { margin: 0; font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--overlay1); } .page-toc-links { display: grid; gap: 6px; } .page-toc-links a { width: fit-content; padding-left: 12px; border-left: 1px solid var(--line-soft); font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--overlay1); transition: color 0.16s ease, border-color 0.16s ease; } .page-toc-links a:hover { color: var(--subtext0); } .page-toc-links a[aria-current="true"] { color: var(--text); border-left-color: var(--accent); } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; } .hero-copy h1 { font-family: var(--display); font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; margin: 14px 0 12px; text-align: center; } .hero-venue { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--subtext0); text-align: center; font-family: var(--sans); } .authors-inline { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 0 0.2ch; justify-content: center; font-family: var(--display); font-size: 13px; color: var(--subtext0); text-align: center; } .authors-inline a { color: var(--accent); border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .authors-inline a:hover { border-bottom-color: var(--accent); } .authors-inline span:not(:last-child)::after { content: ","; margin-right: 0.4ch; } .affiliations { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: 12px; color: var(--subtext0); font-family: var(--sans); text-align: center; } .hero-actions { display: grid; gap: 8px; margin: 16px 0 6px; } .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; } .cta { padding: 12px 22px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--ink-text); font-family: var(--sans); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; } .cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .cta svg { width: 15px; height: 15px; flex: none; } .cta svg[viewBox="0 0 448 512"] { width: 14px; height: 16px; } .hero-media { display: flex; justify-content: center; width: 100%; } .video-frame { width: 100%; max-width: 1080px; border-radius: var(--radius-m); background: #ffffff; position: relative; overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); } .video-frame img, .video-frame video { width: 100%; display: block; } .figure-caption { margin: 10px 2px 0; font-size: 13px; line-height: 1.45; color: var(--overlay1); font-family: var(--sans); text-align: center; } /* ---------- Section scaffolding ---------- */ .section { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 30px; padding-top: 24px; scroll-margin-top: 24px; } .section::before { content: ""; display: block; width: min(180px, 100%); height: 1px; background: linear-gradient(90deg, #dbdbdb, rgba(219, 219, 219, 0.15)); } .section-head { display: flex; flex-direction: column; gap: 6px; } .section-head h2 { font-family: var(--sans); font-size: clamp(30px, 4.4vw, 44px); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -0.02em; } .section-head p.lede { margin: 2px 0 0; max-width: 820px; font-size: 16px; line-height: 1.6; color: var(--subtext0); } .kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; color: var(--overlay1); font-family: var(--sans); } /* ---------- Abstract ---------- */ .abstract-card { margin-top: 22px; border-radius: var(--radius-l); border: 1px solid var(--line-soft); background: var(--card-bg); padding: 24px; display: grid; gap: 10px; scroll-margin-top: 24px; } .abstract-card p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text); } /* ---------- Contribution cards ---------- */ .contrib-grid { margin-top: 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .contrib { padding: 20px; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--card-bg); display: grid; gap: 10px; align-content: start; } .contrib .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-bg-solid); font-family: var(--sans); font-size: 12px; color: var(--accent); width: fit-content; } .contrib h4 { margin: 0; font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.16; letter-spacing: -0.015em; } .contrib p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--subtext0); } /* ---------- Method blocks ---------- */ .method-block { margin: 0; padding: 22px; border-radius: var(--radius-l); border: 1px solid var(--line-soft); background: var(--card-bg); display: grid; gap: 12px; } .method-block h3 { margin: 0; font-family: var(--sans); font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; } .method-block h4 { margin: 6px 0 0; font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.2; } .method-block p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--text); } .method-block a, .abstract-card a, .results-head a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; } .method-block figure { margin: 6px 0 0; display: grid; gap: 8px; } .method-block figure img { width: 100%; border-radius: var(--radius-s); background: #fff; border: 1px solid var(--line-soft); } .method-block figcaption { font-size: 14px; line-height: 1.5; color: var(--subtext0); } .method-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 18px; align-items: center; } .method-split .method-split-text { display: grid; gap: 10px; } .method-split img, .method-split video { width: 100%; border-radius: var(--radius-s); border: 1px solid var(--line-soft); background: #fff; } /* ---------- Spec / hardware list ---------- */ .spec-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; } .spec-list li { font-family: var(--sans); font-size: 12.5px; color: var(--subtext0); border-left: 1px solid var(--line); padding-left: 10px; line-height: 1.5; } .spec-list li b { color: var(--text); font-weight: 600; } /* ---------- Interactive 3-D model ---------- */ .model-full { display: grid; gap: 14px; } .model-side { display: grid; gap: 10px; align-content: start; } .model-side p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--subtext0); } .model3d { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-m); border: 1px solid var(--line-soft); background: #f5f5f5; overflow: hidden; } .model3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .model3d model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; } /* Click-to-load poster: keeps the third-party viewer off the critical path and gives a graceful still image if the embed cannot load. */ .model3d-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; font-family: inherit; } .model3d-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform 0.4s ease; } .model3d-poster:hover img { transform: scale(1.02); } .model3d-cue { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); font-family: var(--sans); font-size: 13px; color: var(--text); transition: transform 0.14s ease, box-shadow 0.14s ease; } .model3d-poster:hover .model3d-cue { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); } .model3d-cue svg { width: 16px; height: 16px; } .model3d-hint { position: absolute; left: 12px; bottom: 10px; font-family: var(--sans); font-size: 11px; color: var(--overlay1); pointer-events: none; } /* ---------- Waterproofing: paired figures ---------- */ .wp-subhead { margin: 20px 0 0; font-family: var(--sans); font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--heading); } /* animation beside the exploded render, then the two enclosure photos */ .wp-split, .wp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .wp-figure { margin: 0; display: grid; gap: 8px; align-content: start; } .wp-figure img { width: 100%; border-radius: var(--radius-s); border: 1px solid var(--line-soft); background: #ffffff; } /* the two enclosure photos differ slightly in aspect; a shared box makes them the same height, with contain so neither is cropped */ .wp-pair .wp-figure img { aspect-ratio: 8 / 5; object-fit: contain; } .wp-figure figcaption { font-size: 13.5px; line-height: 1.5; color: var(--subtext0); text-align: center; } /* Beside the animation, the exploded render sits in a box the same shape as the animation stage, so the two media line up top and bottom. The render is square, so contain leaves margins either side rather than cropping it. */ .wp-split .wp-figure img { aspect-ratio: 1300 / 937; object-fit: contain; } .assy figcaption { text-align: center; } /* ---------- Experiments: interactive clip explorer ---------- */ .exp { display: grid; gap: 14px; } .exp-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; } .exp-control { display: grid; gap: 6px; } .exp-control-label { margin: 0; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--overlay1); } /* segmented maneuver switch */ .seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.9); gap: 2px; } .seg button { font-family: var(--sans); font-size: 12.5px; padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: var(--subtext0); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .seg button:hover { color: var(--text); background: var(--accent-soft); } .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; } /* setpoint chips */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-family: var(--sans); font-size: 12.5px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.9); color: var(--subtext0); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .chip:hover:not(:disabled) { color: var(--text); border-color: var(--accent); transform: translateY(-1px); } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } .chip:disabled { color: var(--overlay0); background: #fafafa; border-color: var(--line-soft); cursor: not-allowed; transform: none; } .exp-stage { display: grid; } .exp-video { position: relative; width: 75%; margin: 0 auto; aspect-ratio: 26 / 27; background: var(--media-bg); border-radius: var(--radius-m); border: 1px solid var(--line-soft); overflow: hidden; } .exp-video video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--media-bg); } /* ---------- Results panels / tables ---------- */ .results-panel { border-radius: var(--radius-l); border: 1px solid var(--line-soft); background: var(--card-bg); padding: 20px; display: grid; gap: 14px; } .results-head { display: grid; gap: 6px; max-width: 820px; } .results-head h3 { margin: 0; font-family: var(--sans); font-size: clamp(22px, 3vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; } .results-head p { margin: 0; color: var(--text); line-height: 1.6; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th, table.data td { padding: 9px 10px; border-top: 1px solid var(--line); text-align: center; vertical-align: middle; } table.data thead th { border-top: none; font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--overlay1); line-height: 1.3; } table.data th:first-child, table.data td:first-child { text-align: left; } table.data tbody tr:first-child td { border-top: 1px solid var(--line); } table.data td { white-space: nowrap; } table.data td small { font-size: 0.8em; color: var(--overlay1); margin-left: 2px; } .note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--overlay1); font-family: var(--sans); } /* ---------- BibTeX ---------- */ .bibtex-panel { border-radius: var(--radius-l); border: 1px solid var(--line-soft); background: var(--card-bg); padding: 20px; display: grid; gap: 12px; } .bibtex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .copy-btn { border: 1px solid var(--line); background: var(--card-bg-solid); color: var(--text); border-radius: 999px; padding: 7px 16px; font-family: var(--sans); font-size: 12px; cursor: pointer; transition: background 0.15s ease; } .copy-btn:hover { background: #eeeeee; } pre.bibtex { margin: 0; padding: 16px; border-radius: var(--radius-s); background: #ffffff; border: 1px solid var(--line); overflow-x: auto; font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--subtext1); } /* ---------- Footer ---------- */ .site-footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-soft); display: grid; gap: 8px; justify-items: center; text-align: center; } .site-footer p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--overlay1); font-family: var(--sans); } .site-footer a { color: var(--subtext0); border-bottom: 1px solid var(--line); } /* ---------- Responsive ---------- */ @media (min-width: 1400px) { .page { max-width: 1220px; padding-left: 170px; } .page-toc { display: block; position: fixed; left: max(20px, calc((100vw - 1220px) / 2)); top: 50vh; transform: translateY(-50%); width: 128px; z-index: 3; } .page-toc-inner { display: grid; gap: 12px; } } @media (max-width: 820px) { .contrib-grid, .method-split { grid-template-columns: 1fr; } .wp-split, .wp-pair { grid-template-columns: 1fr; } } @media (max-width: 620px) { .page { padding-inline: 18px; } table.data { width: max-content; min-width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ---------- Assembly sequence scrubber ---------- */ .assy { margin: 6px 0 0; display: grid; gap: 10px; } .assy-stage { position: relative; width: 100%; border-radius: var(--radius-m); border: 1px solid var(--line-soft); background: #ffffff; overflow: hidden; } .assy-stage canvas { display: block; width: 100%; height: auto; } /* no-JS / still-loading fallback: overlays the canvas so it costs no layout */ .assy-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .assy-stage img[hidden] { display: none; } .assy-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; justify-items: center; background: rgba(255, 255, 255, 0.9); transition: opacity 0.25s ease; } .assy-loading.is-done { opacity: 0; pointer-events: none; } .assy-bar { display: block; width: 160px; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; } .assy-bar-fill { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.15s linear; } .assy-loading-text { font-family: var(--sans); font-size: 11.5px; color: var(--overlay1); } .assy-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .assy-play { flex: none; min-width: 74px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: #ffffff; color: var(--text); font-family: var(--sans); font-size: 12.5px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .assy-play:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .assy-play:disabled { color: var(--overlay0); cursor: default; } .assy-slider { flex: 1 1 120px; display: flex; align-items: center; } .assy-slider input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 3px; border-radius: 999px; background: var(--line); cursor: pointer; } .assy-slider input[type="range"]:disabled { cursor: default; opacity: 0.6; } .assy-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); } .assy-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #ffffff; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); } /* which part is arriving, so the sequence reads as steps and not just motion */ .assy-step { flex: none; min-width: 104px; text-align: right; font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .assy figcaption { font-size: 14px; line-height: 1.5; color: var(--subtext0); } @media (max-width: 620px) { .assy-step { min-width: 0; } }