:root { color-scheme: light; --paper: #FFFFFF; /* page ground */ --surface: #FFFFFF; /* cards, nav bar, footer, menus */ --surface-glass: rgba(255, 255, 255, .92); /* Every illustration, publication figure and portrait on this site is a white-background image, so the boxes holding them stay white in BOTH themes. Flipping them would frame each picture in a glaring white slab. */ --figure-bg: #FFFFFF; --paper-line: #E0E0E0; --rule-strong: #CFD4DA; --ink: #202124; --ink-title: #494D52; --ink-soft: #5F6368; --ink-faint: #9AA0A6; --blue: #1A73E8; /* links and accents drawn as text */ --blue-dark: #174EA6; /* Filled buttons are a separate pair: the dark theme needs a light blue for legible accent text, and white type on light blue would not pass. */ --accent-fill: #1A73E8; --accent-fill-hover: #174EA6; --on-accent: #FFFFFF; --bg-tint: #F8F9FA; --gold: #D9A400; /* Scrim over the banner photo, left (strong) to right (clear). */ --scrim-1: rgba(255, 255, 255, .78); --scrim-2: rgba(255, 255, 255, .72); --scrim-3: rgba(255, 255, 255, .55); --scrim-4: rgba(255, 255, 255, .16); --scrim-5: rgba(255, 255, 255, .04); /* Subpage hero wash. */ --wash-a: #EFF5FD; --wash-b: #F8F9FA; --wash-c: #FBFBFC; /* News category chips. */ --tag-funding-bg: #E8F0FE; --tag-funding-fg: #1747A6; --tag-people-bg: #E4F5EA; --tag-people-fg: #0B6B3A; --tag-paper-bg: #F3E8FD; --tag-paper-fg: #6A1B9A; --tag-award-bg: #FDF0E0; --tag-award-fg: #A8530B; --tag-talk-bg: #FCE7EF; --tag-talk-fg: #A01247; --tag-lab-bg: #EFF1F3; --tag-lab-fg: #47494D; --font-display: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --font-body: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } /* The dark palette is applied only when the attribute is present. A script in every page's sets it before first paint, from the visitor's saved choice or, failing that, their OS setting -- so there is no light flash and no need to repeat this block inside a prefers-color-scheme query. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #1C1F23; --surface: #24282D; --surface-glass: rgba(36, 40, 45, .92); --figure-bg: #FFFFFF; /* unchanged on purpose -- see the note above */ --paper-line: #363B41; --rule-strong: #454B52; --ink: #E9EBEE; --ink-title: #C9CDD3; --ink-soft: #A5ABB2; --ink-faint: #7A7F85; --blue: #8AB4F8; --blue-dark: #AECBFA; --accent-fill: #8AB4F8; --accent-fill-hover: #AECBFA; --on-accent: #1C1F23; --bg-tint: #212429; --gold: #E3B341; --scrim-1: rgba(28, 31, 35, .86); --scrim-2: rgba(28, 31, 35, .80); --scrim-3: rgba(28, 31, 35, .62); --scrim-4: rgba(28, 31, 35, .26); --scrim-5: rgba(28, 31, 35, .10); --wash-a: #2B313B; --wash-b: #272C32; --wash-c: #23272C; --tag-funding-bg: #24365A; --tag-funding-fg: #B3CDFB; --tag-people-bg: #1C3D2A; --tag-people-fg: #93DDB0; --tag-paper-bg: #342447; --tag-paper-fg: #DCBCF7; --tag-award-bg: #46341C; --tag-award-fg: #F3CE96; --tag-talk-bg: #421F34; --tag-talk-fg: #F5B2CC; --tag-lab-bg: #2C3035; --tag-lab-fg: #C2C6CB; } * { box-sizing: border-box; } /* Colour only -- transitioning every property would make layout changes and the mobile menu animate as a side effect. */ body, .nav, .footer, .team-card, .research-row, .pub-channel, .news-filter, .gallery-carousel, .dropdown-menu, .btn-ghost, .theme-toggle, .nav-toggle { transition: background-color .18s ease, border-color .18s ease, color .18s ease; } @media (prefers-reduced-motion: reduce) { body, .nav, .footer, .team-card, .research-row, .pub-channel, .news-filter, .gallery-carousel, .dropdown-menu, .btn-ghost, .theme-toggle, .nav-toggle { transition: none; } } /* Author `display` rules outrank the UA sheet's [hidden] rule, so scripts toggling el.hidden need this to actually hide grid/flex elements. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.25; font-weight: 400; } p { margin: 0; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } .section-inner { max-width: 900px; margin: 0 auto; padding: 56px 24px; } /* ---------- NAV ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--paper-line); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 11px 24px; display: flex; align-items: center; justify-content: space-between; } .brand { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--ink); text-decoration: none; } /* "Lab" is the descriptor, "AiMIND" is the name — so Lab recedes rather than taking the accent colour. Blue is reserved for links/actions elsewhere. */ .brand span { color: var(--ink-soft); font-weight: 400; margin-left: 0.24em; /* inline-flex eats plain whitespace */ } .brand:hover { text-decoration: none; } .nav-links { display: flex; gap: 24px; font-size: 15px; } .nav-links a { color: var(--ink-soft); text-decoration: none; } .nav-links a:hover { color: var(--blue); text-decoration: none; } .nav-links a.active { color: var(--blue); font-weight: 500; } /* Hidden above 860px, where the links sit on the bar themselves. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--paper-line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; } .nav-toggle svg { display: block; } .nav-toggle .icon-close { display: none; } .nav-inner.is-open .nav-toggle .icon-open { display: none; } .nav-inner.is-open .nav-toggle .icon-close { display: block; } /* Shares the hamburger's box so the two sit as a matched pair on the bar. Unlike the hamburger it is shown at every width. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--paper-line); border-radius: 6px; background: var(--surface); color: var(--ink-soft); cursor: pointer; } .theme-toggle:hover { color: var(--blue); border-color: var(--blue); } .theme-toggle svg { display: block; } /* Show the icon for the theme the button switches TO, which is how these controls are read: a moon means "go dark". */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Ordering on the bar: brand, then the two buttons pushed to the right by the links' auto margin. Below 860px the links drop to their own row (order 3) and the buttons stay up top beside the brand. */ .nav-inner { justify-content: flex-start; gap: 14px; } .nav-links { margin-left: auto; } .theme-toggle { order: 1; } .nav-toggle { order: 2; } .nav-links { order: 3; } .nav-cta { font-size: 15px; font-weight: 500; white-space: nowrap; padding: 9px 20px; background: var(--accent-fill); color: var(--on-accent); border-radius: 4px; } .nav-cta:hover { background: var(--accent-fill-hover); text-decoration: none; } /* ---------- HERO ---------- */ .hero { background: var(--bg-tint); border-bottom: 1px solid var(--paper-line); } /* The banner photo sits behind the hero text, the way the original site put its page title on the building shot. Two stacked layers: the blurred photo, then a scrim that keeps the dark text readable over it. */ .hero-photo { position: relative; overflow: hidden; min-height: clamp(360px, 30vw, 470px); display: flex; align-items: center; background-size: cover; background-position: center 45%; background-repeat: no-repeat; } .hero-photo::before { content: ""; position: absolute; inset: -16px; /* overscan so the blur cannot fade the edges */ background-image: inherit; background-size: cover; background-position: center 45%; background-repeat: no-repeat; filter: blur(0.5px); } .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--scrim-1) 0%, var(--scrim-2) 52%, var(--scrim-3) 68%, var(--scrim-4) 86%, var(--scrim-5) 100%); } .hero-photo .hero-inner { position: relative; z-index: 1; width: 100%; } /* Short gold rule under the title, echoing the original site's accent. */ .hero-accent { display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--gold); margin-top: 20px; } .hero-inner { max-width: 1100px; margin: 0 auto; padding: 64px 24px 72px; display: grid; grid-template-columns: 1fr; /* single column since the hero graphic was removed */ gap: 40px; align-items: center; } .hero-kicker { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; } .hero-photo .hero-text { max-width: 820px; } /* stop short of the building */ .hero-text h1 { font-size: 30px; font-weight: 400; color: var(--ink); } /* Contact keeps the banner photo but titles itself the way the ten .page-hero subpages do -- the page name large, the sentence beneath it small. Without this it would inherit the 30px meant for the home page's much longer title, and "Contact" would read smaller than "Team" or "Research". */ .hero-photo .hero-text h1.page-title { font-size: clamp(34px, 4vw, 46px); color: var(--ink-title); letter-spacing: -0.015em; } .hero-lede { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); } /* Body copy folded in from the old "About the lab" section. */ .hero-about { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); } .hero-actions { margin-top: 28px; display: flex; gap: 12px; } .btn { display: inline-block; padding: 10px 20px; border-radius: 4px; font-size: 14px; font-weight: 500; font-family: var(--font-body); } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent-fill); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-fill-hover); } .btn-ghost { border: 1px solid var(--paper-line); color: var(--ink); background: var(--surface); } .btn-ghost:hover { border-color: var(--blue); color: var(--blue); } .btn-dark { background: var(--accent-fill); color: var(--on-accent); } .btn-dark:hover { background: var(--accent-fill-hover); } /* Two files rather than a CSS filter: the wordmark under the brain is a dark neutral grey that vanishes on the dark ground, while the brain is gold and must not shift. No single filter lifts one without wrecking the other, so the dark copy has only its grey pixels lightened. */ .brand-logo-dark { display: none; } :root[data-theme="dark"] .brand-logo-light { display: none; } :root[data-theme="dark"] .brand-logo-dark { display: inline-block; } .brand-logo { height: 42px; width: auto; flex: none; margin-right: 9px; /* not `gap` — that would also split AiMIND from Lab */ } /* ---------- SECTIONS ---------- */ .section-light { background: var(--paper); } .section-dark { background: var(--paper); } .eyebrow { font-size: 13px; font-weight: 500; color: var(--blue); margin-bottom: 10px; } .eyebrow-light { color: var(--blue); } .section-title { font-size: 26px; font-weight: 500; max-width: 26ch; color: var(--ink); } .section-title-light { color: var(--ink); } .section-title-dark { color: var(--ink); } .section-body { margin-top: 18px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 65ch; } .section-body-dark { color: var(--ink-soft); } /* ---------- RESEARCH GRID (card style like the original) ---------- */ .research-list { margin-top: 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; border-top: none; } .research-row { display: block; padding: 0 0 24px; border: 1px solid var(--paper-line); border-radius: 8px; background: var(--surface); overflow: hidden; } .research-img { width: 100%; height: 200px; object-fit: contain; background: var(--figure-bg); /* the illustrations are white; a tint showed as grey bands */ display: block; margin-bottom: 18px; } .research-row .research-body { padding: 0 24px; } /* Every area tag is the same size and weight -- AI4AD is distinguished by the Flagship label beside it and the accent rule above, not by a larger tag. The margin sets the tag a clear line apart from the heading it labels. */ .research-tag { /* Block, not inline-block: .research-area-head h2 is an inline-flex box, so an inline tag would set on the same line as the heading it labels. Inside .research-tag-row the flex container blockifies it either way. */ display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--blue); letter-spacing: 0.03em; margin-bottom: 14px; /* Vertical rule down the left of every area tag. Because the tag is a block, the border runs exactly the height of its one line of text. */ border-left: 3px solid var(--blue); padding-left: 10px; } .research-tag-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } /* The row owns the gap below it; a margin on the tags inside would add to the row's own height and pull the two labels out of vertical alignment. */ .research-tag-row .research-tag { margin-bottom: 0; } .research-area-head h2 { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .research-body h3 { font-size: 17px; font-weight: 500; color: var(--ink); } .research-body p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); } /* ---------- RESEARCH DETAIL PAGE ---------- */ .research-area { padding: 52px 0 44px; } /* Clear rule between the four areas — --paper-line is too faint at this scale. */ .research-area + .research-area { border-top: 2px solid var(--rule-strong); } .research-area:first-of-type { padding-top: 4px; } .research-area:last-of-type { padding-bottom: 8px; } .research-area-head h2 { font-size: 24px; font-weight: 500; color: var(--ink); } .research-area-lede { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; } /* No box around the flagship area. The tinted panel enclosed the one section that already had the most to say, which pushed its heading and figure inward and broke the left edge the other three areas share. The accent rule and the louder tag row below mark it instead, without indenting anything. */ .research-area-featured { padding-left: 0; padding-right: 0; border: 0; border-radius: 0; background: none; } /* A plain label, not a badge: the filled gold pill was the only decorated element on a page whose other tags are flat text, so it read as an ornament rather than as information. The rule before it does the separating that the pill shape used to. */ /* Outlined rather than barred: it sits beside AI4AD's left rule, and a second vertical bar there would read as a repeat of the same mark. The border is hairline and unfilled -- enough to bound the word, not enough to become a badge. */ .research-tag-flagship { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); border: 1px solid rgba(26, 115, 232, 0.45); border-radius: 4px; padding: 3px 8px; } /* Illustration beside the topic list rather than floating above it. */ .research-area-main { display: grid; grid-template-columns: 175px 1fr; gap: 28px; align-items: start; margin-top: 26px; } .research-lead { width: 100%; max-height: 190px; object-fit: contain; object-position: top left; display: block; border-radius: 8px; background: var(--figure-bg); } .research-topics { display: flex; flex-direction: column; gap: 22px; } .research-topic-with-visual { display: none; } .research-topic h3 { font-size: 14px; font-weight: 500; color: var(--ink); padding-left: 10px; border-left: 3px solid var(--blue); margin-bottom: 10px; } .research-topics ul { list-style: none; margin: 0; padding: 0; } .research-topics li { position: relative; padding: 4px 0 4px 15px; font-size: 14px; line-height: 1.6; color: var(--ink); } /* A small dot instead of the old full-width hairline between every item. */ .research-topics li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); opacity: .55; } /* Supporting figures for an area. Click one to open it full size. */ .research-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 20px; margin: 30px 0 8px; } .research-figs figure { margin: 0; } .research-figs a { display: block; border: 1px solid var(--paper-line); border-radius: 6px; overflow: hidden; background: var(--figure-bg); line-height: 0; } .research-figs a:hover { border-color: var(--blue); text-decoration: none; } .research-figs img { display: block; width: 100%; height: 160px; object-fit: contain; background: var(--figure-bg); } .research-figs figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); } @media (max-width: 760px) { .research-area-main { grid-template-columns: 1fr; gap: 20px; } .research-lead { max-width: 240px; max-height: 220px; } } .image-lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 24, 39, 0.72); z-index: 200; } .image-lightbox.is-open { display: flex; } .image-lightbox img { max-width: min(90vw, 1100px); max-height: 88vh; object-fit: contain; border-radius: 12px; background: var(--figure-bg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.33); user-select: none; cursor: grab; } .image-lightbox img:active { cursor: grabbing; } .lightbox-close { position: absolute; top: 22px; right: 22px; border: 0; background: rgba(255,255,255,0.12); color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; } /* ---------- TIMELINE (simple list like the original news feed) ---------- */ .timeline { margin-top: 32px; border-left: none; padding-left: 0; } .timeline-item { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--paper-line); position: relative; } .timeline-item::before { content: none; } .timeline-date { font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .timeline-body p { font-size: 14px; line-height: 1.6; color: var(--ink); max-width: 62ch; margin-top: 5px; } /* ---------- NEWS CATEGORIES ---------- */ .news-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } /* Chips and the show-all button only do something with JS, so the script reveals them; without it every item is already visible. */ .news-filters, .news-more { display: none; } .js-news .news-filters { display: flex; } .js-news .news-more { display: inline-block; } .news-filter { border: 1px solid var(--paper-line); border-radius: 16px; background: var(--surface); color: var(--ink-soft); font-family: var(--font-body); font-size: 13px; padding: 6px 14px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .news-filter span { font-size: 11px; color: var(--ink-soft); margin-left: 5px; font-variant-numeric: tabular-nums; } .news-filter:hover { border-color: var(--blue); color: var(--blue); } .news-filter.is-active { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); } .news-filter.is-active span { color: rgba(255, 255, 255, .8); } .news-tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 3px; letter-spacing: .01em; } .news-tag-funding { background: var(--tag-funding-bg); color: var(--tag-funding-fg); } .news-tag-people { background: var(--tag-people-bg); color: var(--tag-people-fg); } .news-tag-paper { background: var(--tag-paper-bg); color: var(--tag-paper-fg); } .news-tag-award { background: var(--tag-award-bg); color: var(--tag-award-fg); } .news-tag-talk { background: var(--tag-talk-bg); color: var(--tag-talk-fg); } .news-tag-lab { background: var(--tag-lab-bg); color: var(--tag-lab-fg); } .news-more { margin-top: 22px; border: 1px solid var(--paper-line); border-radius: 4px; background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 9px 18px; cursor: pointer; } .news-more:hover { border-color: var(--blue); color: var(--blue); } .news-link { font-size: 13px; font-weight: 500; white-space: nowrap; } .news-empty { margin-top: 24px; font-size: 14px; color: var(--ink-soft); } /* ---------- POSITIONS BAND ---------- */ .section-accent { background: var(--bg-tint); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); } .positions-inner { padding-top: 56px; padding-bottom: 56px; } .positions-inner .btn-dark { margin-top: 22px; } /* ---------- FOOTER ---------- */ .footer { background: var(--surface); color: var(--ink-soft); border-top: 1px solid var(--paper-line); } /* Only "Back to top" is left in this row, so the 56px the .section-inner padding puts above it is far more air than one link needs. */ .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; padding-top: 28px; padding-bottom: 16px; } .footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .footer-copy { max-width: 900px; margin: 0 auto; padding: 0 24px 28px; font-size: 12px; color: var(--ink-faint); } /* ---------- RESPONSIVE ---------- */ /* The nav links are still shown down to 860px, and the enlarged logo/type does not fit alongside them in that band — scale it back just there. */ @media (max-width: 1100px) { .brand { font-size: 21px; } .brand-logo { height: 34px; margin-right: 7px; } .nav-links { gap: 15px; font-size: 14px; } .nav-cta { font-size: 14px; padding: 8px 14px; } } @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; padding-top: 48px; } .hero-text h1 { font-size: 32px; } .research-list { grid-template-columns: 1fr; } .timeline-item { grid-template-columns: 84px 1fr; gap: 14px; } /* Below this width the links do not fit on the bar, so they move into a panel behind the toggle. They used to be simply display:none with nothing in their place, which left a phone with no way to reach any page but the one it landed on. */ .nav-toggle { display: inline-flex; } .nav-inner { flex-wrap: wrap; } .nav-links { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; padding: 6px 0 10px; } .nav-inner.is-open .nav-links { display: flex; } .nav-links > a, .dropdown-menu a { /* 44px of height is the smallest comfortable touch target; padding rather than a fixed height so a wrapped label still gets its full row. */ padding: 12px 2px; font-size: 16px; border-bottom: 1px solid var(--paper-line); } /* Hover cannot open anything on a touch screen, so the four Publications children are simply always listed, indented under their parent. Every selector here is prefixed with .nav-links: the desktop dropdown rules are declared further down this file, so at equal specificity they would win over this block no matter that it sits in a media query. */ .nav-links .nav-item-dropdown { position: static; } .nav-links .nav-item-dropdown::after { display: none; } .nav-links .nav-item-dropdown > a { display: block; padding: 12px 2px; font-size: 16px; border-bottom: 1px solid var(--paper-line); } .nav-links .dropdown-menu { display: block; position: static; margin-top: 0; border: 0; border-radius: 0; padding: 0; min-width: 0; } .nav-links .dropdown-menu a { padding: 11px 2px 11px 18px; font-size: 15px; color: var(--ink-soft); border-bottom: 1px solid var(--paper-line); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- PAGE HERO (subpages) ---------- */ /* The wash carries the home hero's pale blue across to the subpages, which otherwise opened on a flat grey band. Deliberately not the banner photo: one building repeated across eleven pages wears thin, and the source is only 1039x256, too small for a band this wide. */ .page-hero { background: linear-gradient(120deg, var(--wash-a) 0%, var(--wash-b) 55%, var(--wash-c) 100%); border-bottom: 1px solid var(--paper-line); padding: 48px 0 8px; } .page-hero h1 { /* Larger and lighter: 400 is the lightest weight loaded, and the ink is softened off full --ink so the title reads as a heading, not a shout. */ font-size: clamp(34px, 4vw, 46px); font-weight: 400; color: var(--ink-title); letter-spacing: -0.015em; } .page-hero p { margin-top: 12px; font-size: 16px; color: var(--ink-soft); } /* ---------- NAV DROPDOWN ---------- */ .nav-item-dropdown { position: relative; } /* The menu is offset 14px below the trigger. Without this bridge the pointer leaves .nav-item-dropdown while crossing that gap, :hover drops, and the menu disappears before it can be clicked. The bridge is part of the container, so hovering it keeps the container hovered. */ .nav-item-dropdown::after { content: ""; position: absolute; top: 100%; left: -14px; width: 190px; height: 16px; } .dropdown-menu { display: none; position: absolute; top: 100%; left: -14px; margin-top: 14px; background: var(--surface); border: 1px solid var(--paper-line); border-radius: 6px; padding: 6px 0; min-width: 190px; z-index: 60; } .nav-item-dropdown:hover .dropdown-menu, .nav-item-dropdown:focus-within .dropdown-menu { display: block; } .dropdown-menu a { display: block; padding: 9px 16px; font-size: 14px; color: var(--ink-soft); } .dropdown-menu a:hover { color: var(--blue); text-decoration: none; background: var(--bg-tint); } /* ---------- SECTION HEADING (reused across subpages) ---------- */ .subsection-heading { font-size: 18px; font-weight: 500; color: var(--ink); margin-top: 48px; padding-bottom: 10px; border-bottom: 1px solid var(--paper-line); } .subsection-heading:first-of-type { margin-top: 36px; } /* ---------- TEAM ---------- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 22px; margin-top: 28px; } .team-card { border: 1px solid var(--paper-line); border-radius: 8px; overflow: hidden; background: var(--surface); } /* Portraits are square, circle-cropped PNGs with transparent corners, so they render as centred avatars rather than a full-width banner crop. */ .team-card img { display: block; width: 150px; height: 150px; margin: 24px auto 4px; border-radius: 50%; object-fit: cover; background: var(--figure-bg); } .team-card-body { padding: 16px 18px 20px; } .team-role { font-size: 12px; color: var(--blue); font-weight: 500; margin-bottom: 6px; } .team-card h3 { font-size: 16px; font-weight: 500; } .team-meta { font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; } .team-meta-item { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; } /* Line icons rather than emoji: emoji are drawn by the OS, so the set was six different illustration styles at six different weights, and they ignore the theme. These inherit currentColor and sit at one stroke weight. */ .team-meta-item .team-icon .ic { width: 14px; height: 14px; margin-top: 4px; opacity: .85; } .team-meta-item .team-icon { width: 16px; min-width: 16px; display: flex; justify-content: center; color: var(--blue); line-height: 1.8; } .team-links { margin-top: 10px; } .team-links a { font-size: 13px; margin-right: 14px; } /* ---------- PUBLICATIONS ---------- */ .pub-item { padding: 16px 0; border-bottom: 1px solid var(--paper-line); } .pub-id { font-size: 12px; color: var(--blue); font-weight: 500; font-family: var(--font-display); } .pub-title { font-size: 15px; font-weight: 500; margin-top: 4px; color: var(--ink); } /* English patent title under the Korean one. */ .pub-title-en { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-top: 3px; } .pub-authors { font-size: 13px; color: var(--ink-soft); margin-top: 4px; } .pub-venue { font-size: 13px; color: var(--ink-soft); font-style: italic; margin-top: 2px; } .pub-link { font-size: 13px; margin-top: 4px; display: inline-block; } /* Figures sit small in a left-hand column next to the entry text, the way the previous site laid them out. Click a thumbnail to open it full size. */ .pub-item-fig { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; } /* Figures sit in a row, not a column: an entry with a cover *and* a figure was twice as tall as every other row when they stacked. */ .pub-figure { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; } .pub-figure > .pub-thumb { flex: 1 1 auto; min-width: 0; } /* The cover is a portrait page and stays narrow, leaving the paper's own figure the larger share of the column. */ .pub-cover { flex: 0 0 84px; display: flex; flex-direction: column; gap: 5px; } .pub-thumb { display: block; border: 1px solid var(--paper-line); border-radius: 4px; background: var(--figure-bg); overflow: hidden; line-height: 0; } .pub-thumb:hover { border-color: var(--blue); text-decoration: none; } .pub-thumb img { display: block; width: 100%; height: auto; } /* An issue cover is a portrait page, so it gets a little more room and a label. */ .pub-thumb-cover img { background: var(--figure-bg); } .pub-cover-note { align-self: flex-start; /* flex items stretch by default; keep the badge tight */ margin-top: -2px; padding: 2px 7px; border-radius: 3px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 500; } @media (max-width: 720px) { .pub-item-fig { grid-template-columns: 1fr; } .pub-figure { flex-wrap: wrap; max-width: 320px; } } /* Publications hub: one card per channel, each linking to its own page. */ .pub-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; margin-top: 8px; } .pub-channel { display: block; padding: 22px 22px 20px; border: 1px solid var(--paper-line); border-radius: 8px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .pub-channel:hover { border-color: var(--blue); box-shadow: 0 2px 10px rgba(26, 115, 232, .10); text-decoration: none; } .pub-channel-count { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--blue); } .pub-channel h3 { font-size: 16px; font-weight: 500; color: var(--ink); margin-top: 10px; } .pub-channel p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 8px; } .pub-channel-go { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--blue); } /* ---------- SIMPLE LISTS (projects / courses) ---------- */ .simple-list { list-style: none; padding: 0; margin-top: 20px; } .simple-list li { position: relative; padding: 14px 0 14px 16px; border-bottom: 1px solid var(--paper-line); font-size: 14px; line-height: 1.7; color: var(--ink); } /* The same dot the research topics use, rather than an emoji: it is the marker this site already has, and it does not change shape or colour between platforms the way a glyph does. */ .simple-list li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); opacity: .55; } /* Finished work is stated, not flagged -- the grey dot separates the two lists without adding a second symbol to read. */ .simple-list-done li::before { background: var(--ink-soft); opacity: .38; } .simple-list li:last-child { border-bottom: none; } .course-year { font-size: 20px; font-weight: 500; margin-top: 36px; color: var(--ink); } /* ---------- GALLERY ---------- */ .gallery-entry { margin-top: 44px; } .gallery-entry h3 { font-size: 17px; font-weight: 500; color: var(--ink); } .gallery-entry .gallery-date { font-size: 13px; color: var(--ink-soft); margin-top: 4px; } .gallery-entry p.gallery-desc { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); } /* One photo at a time, with arrows. The viewport is a scroll-snap strip so it stays swipeable (and scrollable) even if the script does not run. */ .gallery-carousel { position: relative; margin-top: 16px; border: 1px solid var(--paper-line); border-radius: 8px; background: var(--surface); overflow: hidden; } .carousel-viewport { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carousel-viewport::-webkit-scrollbar { display: none; } .carousel-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; height: clamp(280px, 34vw, 460px); background: var(--figure-bg); } .carousel-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; border: 0; border-radius: 0; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 1px solid var(--paper-line); border-radius: 50%; background: var(--surface-glass); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 2px; transition: border-color .15s, color .15s, opacity .15s; } .carousel-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); } .carousel-btn:disabled { opacity: .3; cursor: default; } .carousel-prev { left: 12px; } .carousel-next { right: 12px; } .carousel-status { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 11px; background: rgba(32, 33, 36, .78); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; } /* A single-photo entry needs no controls. */ .gallery-carousel[data-count="1"] .carousel-btn, .gallery-carousel[data-count="1"] .carousel-status { display: none; } /* ---------- CONTACT ---------- */ .contact-block { margin-top: 32px; } .contact-block h3 { font-size: 15px; font-weight: 500; color: var(--ink); } .contact-block p { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); } .map-frame { width: 100%; height: 320px; border: 1px solid var(--paper-line); border-radius: 8px; margin-top: 28px; } @media (max-width: 860px) { .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }