/* ============================================================================= * style.css — Keisuke Suzuki personal site * Clean, academic, responsive. Light + dark (prefers-color-scheme). * ========================================================================== */ /* ---- design tokens ------------------------------------------------------- */ :root { --bg: #ffffff; --surface: #f6f8fb; --surface-2: #eef2f7; --text: #1b2330; --muted: #5c6675; --border: #e3e8ef; --accent: #2f6fb0; --accent-strong: #1f4e7a; --accent-soft: #e9f1fa; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06); --radius: 14px; --maxw: 920px; --font: "Inter", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; } /* Dark theme: applied via [data-theme="dark"] on (toggle in header). Default (no attribute / "light") uses the light tokens in :root above. */ :root[data-theme="dark"] { --bg: #0f1318; --surface: #161b22; --surface-2: #1c232c; --text: #e7ecf3; --muted: #9aa6b4; --border: #2a323d; --accent: #6aa9e0; --accent-strong: #9cc6ef; --accent-soft: #16222f; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); } /* ---- base ---------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.72; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; } h1, h2, h3 { line-height: 1.25; font-weight: 700; letter-spacing: -.01em; } h1 { font-size: 2rem; margin: 0 0 .4em; } img { max-width: 100%; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .page { padding-top: 36px; padding-bottom: 64px; } .lead { color: var(--muted); font-size: 1.05rem; margin-top: -.2em; } /* ---- header / nav -------------------------------------------------------- */ #site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .header__inner { display: flex; align-items: center; gap: 16px; height: 64px; } .brand { display: flex; flex-direction: column; line-height: 1.15; color: var(--text); } .brand:hover { text-decoration: none; } .brand__name { font-weight: 700; letter-spacing: -.01em; } .brand__role { font-size: .76rem; color: var(--muted); } .nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .nav > a { color: var(--muted); padding: 8px 12px; border-radius: 9px; font-size: .94rem; font-weight: 500; } .nav > a:hover { color: var(--text); background: var(--surface); text-decoration: none; } .nav > a.active { color: var(--accent-strong); background: var(--accent-soft); } .lang-toggle, .theme-toggle, .nav-toggle { font: inherit; cursor: pointer; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px; font-size: .88rem; font-weight: 600; } .lang-toggle:hover, .theme-toggle:hover { border-color: var(--accent); color: var(--accent-strong); } .lang-toggle { margin-left: 8px; } .theme-toggle { margin-left: 6px; padding: 7px 10px; line-height: 1; } .nav-toggle { display: none; margin-left: auto; } /* ---- hero ---------------------------------------------------------------- */ .hero { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); padding: 52px 0 44px; } .hero__inner { display: flex; gap: 36px; align-items: center; } .hero__text { flex: 1; min-width: 0; } .hero h1 { font-size: 2.4rem; margin-bottom: .15em; } .hero__sub { color: var(--muted); font-weight: 500; margin: 0 0 1em; } .hero__intro { font-size: 1.06rem; margin: 0 0 1.3em; max-width: 56ch; } /* ---- avatar (with graceful placeholder) ---------------------------------- */ .avatar { position: relative; width: 120px; height: 120px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); } .avatar--lg { width: 168px; height: 168px; } .avatar--hero { width: 220px; height: 270px; border-radius: 16px; } .avatar__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 2.6rem; letter-spacing: .06em; opacity: .92; } .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---- generic blocks ------------------------------------------------------ */ .block { padding: 30px 0; border-top: 1px solid var(--border); } .block:first-child { border-top: 0; } .block__title { font-size: 1.32rem; margin: 0 0 .8em; display: inline-block; padding-bottom: .15em; border-bottom: 3px solid var(--accent); } .more { margin-top: 18px; } .more a { font-weight: 600; } /* ---- tags ---------------------------------------------------------------- */ .tags { display: flex; flex-wrap: wrap; gap: 9px; } .tag { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 6px 13px; border-radius: 999px; font-size: .9rem; } .tag--soft { background: transparent; color: var(--muted); } /* ---- pills (contact / CV) ------------------------------------------------ */ .pills { display: flex; flex-wrap: wrap; gap: 10px; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; font-size: .9rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .pill:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; } .pill--accent { background: var(--accent); border-color: var(--accent); color: #fff; } .pill--accent:hover { background: var(--accent-strong); color: #fff; } /* ---- research areas ------------------------------------------------------ */ .areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .area { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; } .area h3 { font-size: 1.08rem; margin: 0 0 .5em; color: var(--accent-strong); } .area__topics { margin: 0; padding-left: 1.1em; } .area__topics li { margin: .2em 0; } .area__pubs-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1em 0 .3em; } .area__pubs { margin: 0; padding-left: 1.1em; font-size: .9rem; color: var(--muted); } .area__pubs li { margin: .3em 0; } .area--link { display: block; color: var(--text); transition: border-color .15s ease, transform .15s ease; } .area--link:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); } .area__tagline { margin: .35em 0 0; color: var(--muted); } /* ---- theme cards (home overview + research landing) --------------------- */ .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 6px; } .theme-card { display: flex; flex-direction: column; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .theme-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); } .theme-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); } .theme-card__media img { width: 100%; height: 100%; object-fit: cover; } .theme-card__body { padding: 16px 18px; } .theme-card__body h2 { font-size: 1.18rem; margin: 0 0 .35em; color: var(--accent-strong); } .theme-card__body h3 { font-size: 1.08rem; margin: 0 0 .35em; color: var(--accent-strong); } .theme-card__tagline { margin: 0; color: var(--muted); font-size: .95rem; } .theme-card__more { display: inline-block; margin-top: .9em; font-weight: 600; color: var(--accent); font-size: .9rem; } /* ---- reference / publication lists --------------------------------------- */ .ref-list { list-style: none; margin: 0; padding: 0; } .ref-list li { padding: .45em 0; border-bottom: 1px solid var(--border); } .ref-list li:last-child { border-bottom: 0; } .pub-list { margin: 0; padding-left: 1.4em; } .pub-list li { margin: .55em 0; padding-left: .2em; } ol.pub-list li::marker { color: var(--muted); font-size: .85em; } .pub-list a { word-break: break-word; } .year-group { margin-bottom: 1.1em; } .year { font-size: 1rem; color: var(--accent-strong); margin: 0 0 .2em; border-bottom: 1px solid var(--border); padding-bottom: .15em; } /* ---- scholar metrics ----------------------------------------------------- */ .metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; margin: 4px 0 26px; } .metrics > strong { color: var(--accent-strong); } .metrics__link { color: var(--accent-strong); font-weight: 700; } .metrics__link:hover { text-decoration: underline; } .metric { color: var(--muted); font-size: .95rem; } .metric b { color: var(--text); font-size: 1.05rem; } .metric--muted { margin-left: auto; font-size: .82rem; } /* ---- profile page -------------------------------------------------------- */ .profile-grid { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; } .profile-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; } .profile-side .avatar { margin: 0 auto; } .credit { font-size: .78rem; color: var(--muted); text-align: center; margin: -6px 0 4px; } .profile-main h1 { margin-bottom: .2em; } /* ---- projects ------------------------------------------------------------ */ .projects { display: flex; flex-direction: column; gap: 26px; margin-top: 8px; } .project { display: grid; grid-template-columns: 320px 1fr; gap: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .project__media { margin: 0; display: flex; flex-direction: column; } .project__media .frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); } .project__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; color: #fff; font-weight: 600; opacity: .9; font-size: .95rem; } .project__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .project__media figcaption { font-size: .8rem; color: var(--muted); padding: 10px 14px; background: var(--surface-2); } .project__body { padding: 22px 24px 22px 0; } .project__body h2 { font-size: 1.25rem; margin: 0 0 .5em; } .project__ref { font-size: .88rem; color: var(--muted); margin-top: 1em; } .project__ref span { font-weight: 700; color: var(--text); } .project__ref-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.1em 0 .3em; font-weight: 700; } .ref-list--compact li { font-size: .92rem; padding: .4em 0; } /* ---- single research theme page ---------------------------------------- */ .theme-page { max-width: 820px; } .back { margin: 0 0 14px; } .back a { font-weight: 600; } .theme-hero { margin: 0 0 24px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .theme-hero img { width: 100%; max-height: 360px; object-fit: cover; display: block; } .theme-desc { font-size: 1.05rem; } .theme-desc p { margin: 0 0 1.1em; } /* ---- media page (logo cards) -------------------------------------------- */ .media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 10px; } .media-card { display: flex; flex-direction: column; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .media-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); } .media-card__logo { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border-bottom: 1px solid var(--border); } .media-card__logo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .media-card__body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; } .media-card__outlet { font-weight: 700; color: var(--accent-strong); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; } .media-card__title { font-size: 1rem; line-height: 1.45; } /* ---- CV page ----------------------------------------------------------- */ .cv-page { max-width: 860px; } .cv-summary { font-size: 1.06rem; } .cv-scholar { color: var(--muted); font-size: .9rem; margin: -.4em 0 1.2em; } .cv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; } .cv-list { display: flex; flex-direction: column; } .cv-row { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: .55em 0; border-bottom: 1px solid var(--border); } .cv-row:last-child { border-bottom: 0; } .cv-row__p { color: var(--muted); font-size: .9rem; font-weight: 600; } .cv-row__d b { color: var(--accent-strong); font-weight: 700; } /* ---- footer -------------------------------------------------------------- */ #site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 40px; } .footer__inner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 26px 22px; color: var(--muted); font-size: .9rem; } #site-footer p { margin: 0; } /* ---- responsive ---------------------------------------------------------- */ @media (max-width: 760px) { body { font-size: 16px; } .nav-toggle { display: inline-block; } .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 16px 16px; box-shadow: var(--shadow); } .nav.open { display: flex; } .nav > a { padding: 11px 12px; } .lang-toggle { margin: 8px 0 0; align-self: flex-start; } .hero { padding: 34px 0 30px; } .hero__inner { flex-direction: column; text-align: center; gap: 20px; } .hero h1 { font-size: 2rem; } .pills { justify-content: center; } .hero__intro { margin-left: auto; margin-right: auto; } .areas { grid-template-columns: 1fr; } .theme-grid { grid-template-columns: 1fr; } .media-grid { grid-template-columns: 1fr; } .cv-row { grid-template-columns: 1fr; gap: 2px; } .cv-row__p { font-size: .82rem; } .avatar--hero { width: 200px; height: 240px; } .profile-grid { grid-template-columns: 1fr; gap: 24px; } .profile-side { position: static; } .project { grid-template-columns: 1fr; } .project__body { padding: 0 20px 22px; } .media-item { flex-direction: column; align-items: flex-start; gap: 4px; } .media-item__brand { width: auto; } }