/* ============================================================= Personal academic page · Asier Bikandi-Noya Sober, single-page, rooted in ARG tokens. ============================================================= */ :root { /* Theming surface — re-mapped by data-theme + data-accent on */ --pg-bg: #FFFFFF; --pg-bg-soft: #FAFAF9; --pg-ink: #1A1A1A; --pg-ink-soft: #4D4D4D; --pg-ink-dim: #686868; --pg-rule: #E5E5E5; --pg-rule-soft: #ECECEC; --pg-accent: var(--color-cyan-deep); --pg-accent-wash: var(--color-cyan-wash); /* Density */ --pg-section-pad: 96px; --pg-stack: 40px; /* Page width */ --pg-width: 960px; } html[data-accent="red"] { --pg-accent: #B81212; --pg-accent-wash: #FCE5E5; } html[data-accent="cyan"] { --pg-accent: #007CA8; --pg-accent-wash: #E6F5FB; } html[data-accent="amber"] { --pg-accent: #C66F00; --pg-accent-wash: #FBEFD9; } html[data-accent="purple"] { --pg-accent: #502078; --pg-accent-wash: #EDE6F4; } html[data-accent="ink"] { --pg-accent: #1A1A1A; --pg-accent-wash: #ECECEC; } html[data-density="compact"] { --pg-section-pad: 64px; --pg-stack: 28px; } html[data-theme="dark"] { --pg-bg: #111113; --pg-bg-soft: #181819; --pg-ink: #F2F1EF; --pg-ink-soft: #B8B8B8; --pg-ink-dim: #8E8E8E; --pg-rule: #2A2A2C; --pg-rule-soft: #1F1F21; --pg-accent-wash: rgba(255,255,255,0.06); } html[data-theme="dark"][data-accent="cyan"] { --pg-accent: #4FC3E8; } html[data-theme="dark"][data-accent="red"] { --pg-accent: #F26B6B; } html[data-theme="dark"][data-accent="amber"] { --pg-accent: #F39200; } html[data-theme="dark"][data-accent="purple"] { --pg-accent: #B695DA; } html[data-theme="dark"][data-accent="ink"] { --pg-accent: #F2F1EF; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--pg-bg); color: var(--pg-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; scroll-behavior: smooth; } ::selection { background: var(--pg-accent); color: var(--pg-bg); } a { color: inherit; } /* ---------- Layout ---------- */ .page { max-width: var(--pg-width); margin: 0 auto; padding: 0 40px; } .page-wide { max-width: 1180px; margin: 0 auto; padding: 0 40px; } /* ---------- Top nav ---------- */ .topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--pg-bg) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--pg-rule); } .topnav-inner { max-width: var(--pg-width); margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .topnav .mark { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--pg-ink); } .topnav .mark .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--pg-accent); display: inline-block; transform: translateY(-1px); } .topnav .mark em { font-style: italic; color: var(--pg-ink-soft); font-weight: 400; } .topnav-links { display: flex; gap: 22px; align-items: center; } .topnav-links a { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--pg-ink-soft); text-decoration: none; transition: color 160ms ease; } .topnav-links a:hover { color: var(--pg-accent); } /* ---------- Hero ---------- */ .hero { padding: 88px 0 56px; position: relative; } .hero-grid { display: grid; grid-template-columns: 1fr 280px; gap: 64px; align-items: start; } .hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: 64px; line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 28px; color: var(--pg-ink); text-wrap: balance; } .hero h1 .last { font-style: italic; color: var(--pg-ink); } .hero h1 .accent-dot { color: var(--pg-accent); } .hero .role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-accent); font-weight: 500; margin-bottom: 24px; display: inline-flex; align-items: center; gap: 12px; } .hero .role::before { content: ""; width: 28px; height: 2px; background: currentColor; } .hero .bio { font-family: var(--font-sans); font-size: 18px; line-height: 1.55; color: var(--pg-ink-soft); max-width: 56ch; margin: 0 0 28px; text-wrap: pretty; } .hero .bio em { font-style: italic; color: var(--pg-ink); font-family: var(--font-serif); font-size: 1.05em; } .hero .bio a { color: var(--pg-ink); text-decoration-color: var(--pg-accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .hero .contact-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .hero .contact-row a { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--pg-ink); text-decoration: none; padding: 7px 12px; border: 1px solid var(--pg-rule); border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .hero .contact-row a:hover { border-color: var(--pg-accent); color: var(--pg-accent); background: var(--pg-accent-wash); } .hero .contact-row a svg { width: 14px; height: 14px; } /* ---------- Profile card ---------- */ .profile-card { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; } .profile-photo { width: 100%; aspect-ratio: 1; border-radius: 4px; background: var(--pg-bg-soft); border: 1px solid var(--pg-rule); overflow: hidden; position: relative; } .profile-photo svg { display: block; width: 100%; height: 100%; } .profile-meta { display: grid; grid-template-columns: 1fr; gap: 12px; font-family: var(--font-sans); font-size: 13px; color: var(--pg-ink-soft); } .profile-meta .row { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--pg-rule-soft); align-items: baseline; } .profile-meta .row:first-child { border-top: 1px solid var(--pg-rule); } .profile-meta .row:last-child { border-bottom: 1px solid var(--pg-rule); } .profile-meta .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-ink-dim); padding-top: 2px; } .profile-meta .v { color: var(--pg-ink); line-height: 1.4; } .profile-meta .v em { font-family: var(--font-serif); font-style: italic; color: var(--pg-ink-soft); } /* ---------- Sections ---------- */ .section { padding: var(--pg-section-pad) 0; border-top: 1px solid var(--pg-rule); } .section:first-of-type { border-top: 0; } .section-head { display: grid; grid-template-columns: 140px 1fr; gap: 40px; align-items: baseline; margin-bottom: var(--pg-stack); } .section-head .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pg-accent); font-weight: 600; padding-top: 12px; } .section-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--pg-ink); text-wrap: balance; } .section-head h2 em { font-style: italic; color: var(--pg-ink-soft); } /* ---------- News ---------- */ .news { display: grid; grid-template-columns: 140px 1fr; gap: 40px; } .news ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .news li { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 14px 0; border-top: 1px solid var(--pg-rule-soft); align-items: baseline; } .news li:first-child { border-top: 1px solid var(--pg-rule); padding-top: 16px; } .news li:last-child { border-bottom: 1px solid var(--pg-rule); padding-bottom: 16px; } .news .when { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--pg-ink-dim); text-transform: uppercase; } .news .what { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--pg-ink); } .news .what em { font-family: var(--font-serif); font-style: italic; color: var(--pg-ink-soft); } .news .what .tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-accent); background: var(--pg-accent-wash); padding: 2px 8px; border-radius: 3px; margin-right: 6px; vertical-align: 2px; } .news .what a { color: var(--pg-ink); text-decoration-color: var(--pg-accent); text-underline-offset: 3px; } /* ---------- Research lines ---------- */ .lines { display: flex; flex-direction: column; gap: 0; } .line { display: grid; grid-template-columns: 140px 1.1fr 0.9fr; gap: 40px; padding: 36px 0; border-top: 1px solid var(--pg-rule-soft); align-items: start; } .line:first-child { border-top: 1px solid var(--pg-rule); } .line:last-child { border-bottom: 1px solid var(--pg-rule); } .line .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pg-accent); font-weight: 600; } .line h3 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--pg-ink); text-wrap: balance; } .line p { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.55; color: var(--pg-ink-soft); margin: 0 0 16px; text-wrap: pretty; } .line .topics { display: flex; flex-wrap: wrap; gap: 6px; } .line .topics span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--pg-ink-soft); padding: 3px 8px; border: 1px solid var(--pg-rule); border-radius: 3px; } .line .figure { aspect-ratio: 4 / 3; background: var(--pg-bg-soft); background-size: cover; background-position: center; border: 1px solid var(--pg-rule); border-radius: 2px; } /* ---------- Publications feed (news-style + richer content) ---------- */ .pub-feed { display: flex; flex-direction: column; } .pub-feed li { display: grid; grid-template-columns: 88px 168px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--pg-rule-soft); align-items: start; } .pub-feed li:first-child { border-top: 1px solid var(--pg-rule); padding-top: 24px; } .pub-feed li:last-child { border-bottom: 1px solid var(--pg-rule); padding-bottom: 24px; } .pub-feed li.featured { background: var(--pg-accent-wash); padding: 22px; margin: -1px 0; border-top: 1px solid var(--pg-accent); border-bottom: 1px solid var(--pg-accent); border-radius: 4px; } .pub-feed li.featured + li:not(.featured) { border-top: 1px solid var(--pg-rule); } .pub-feed li.featured + li.featured { margin-top: 8px; } .pub-feed .thumb { width: 100%; aspect-ratio: 4 / 3; background: var(--pg-bg); border: 1px solid var(--pg-rule); border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .pub-feed .thumb img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--pg-bg); } html[data-theme="dark"] .pub-feed .thumb, html[data-theme="dark"] .pub-feed .thumb img { background: #FFFFFF; } .pub-feed .when { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--pg-ink); text-transform: uppercase; font-weight: 600; line-height: 1.4; padding-top: 2px; } .pub-feed .when .kind { display: block; margin-top: 4px; font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; color: var(--pg-ink-dim); text-transform: uppercase; } .pub-feed li.featured .when .kind { color: var(--pg-accent); } .pub-feed .what { display: block; } .pub-feed .what .tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; padding: 2px 8px; background: var(--pg-ink); color: var(--pg-bg); border-radius: 3px; margin-bottom: 10px; vertical-align: 1px; } .pub-feed .what .tag.tag-accent { background: var(--pg-accent); color: white; } .pub-feed .what h4 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.005em; margin: 0 0 8px; color: var(--pg-ink); text-wrap: balance; } .pub-feed .what h4 .me { color: var(--pg-accent); font-weight: 700; } .pub-feed .what .authors { font-family: var(--font-serif); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--pg-ink-soft); margin: 0 0 6px; } .pub-feed .what .authors .me-name { font-style: normal; font-family: var(--font-sans); font-weight: 600; color: var(--pg-accent); } .pub-feed .what .venue { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--pg-ink-soft); margin: 0 0 4px; } .pub-feed .what .venue em { font-family: var(--font-serif); font-style: italic; } .pub-feed .what .links { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .pub-feed .what .links a { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: -0.005em; color: var(--pg-ink); text-decoration: none; padding: 4px 10px; border: 1px solid var(--pg-rule); border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; background: var(--pg-bg); transition: all 160ms ease; } .pub-feed .what .links a:hover { border-color: var(--pg-accent); color: var(--pg-accent); background: var(--pg-accent-wash); } .pub-feed .what .links a.disabled { opacity: 0.5; pointer-events: none; } /* ---------- Publications (legacy classes kept; unused after merge) ---------- */ .pubgroup { display: grid; grid-template-columns: 140px 1fr; gap: 40px; padding-top: 24px; } .pubgroup + .pubgroup { padding-top: 32px; } .pubgroup .group-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--pg-ink-dim); padding-top: 18px; } .pubgroup .group-label .count { display: block; margin-top: 4px; color: var(--pg-accent); font-size: 22px; letter-spacing: 0; font-family: var(--font-serif); font-style: italic; text-transform: none; font-weight: 400; } .pub-list { display: flex; flex-direction: column; } .pub-row { display: grid; grid-template-columns: 92px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--pg-rule-soft); align-items: start; } .pub-row:first-child { border-top: 1px solid var(--pg-rule); } .pub-row:last-child { border-bottom: 1px solid var(--pg-rule); } .pub-row .thumb { width: 92px; aspect-ratio: 4 / 3; background: var(--pg-bg-soft); border: 1px solid var(--pg-rule); background-size: cover; background-position: center; border-radius: 2px; } .pub-row.featured { background: var(--pg-accent-wash); border-radius: 4px; padding: 18px; margin: -1px 0; border-top: 1px solid var(--pg-accent); border-bottom: 1px solid var(--pg-accent); grid-template-columns: 92px 1fr; } .pub .id { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--pg-ink-dim); font-weight: 600; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 8px; } .pub .id .pill { display: inline-block; padding: 1px 7px; background: var(--pg-ink); color: var(--pg-bg); border-radius: 2px; font-size: 10px; } .pub .id .pill.award { background: var(--pg-accent); color: white; } .pub h4 { font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 1.32; letter-spacing: -0.005em; margin: 0 0 6px; color: var(--pg-ink); text-wrap: balance; } .pub h4 .me { color: var(--pg-accent); font-weight: 700; } .pub .authors { font-family: var(--font-serif); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--pg-ink-soft); margin: 0 0 8px; } .pub .authors .me { font-style: normal; font-family: var(--font-sans); font-weight: 600; color: var(--pg-accent); } .pub .meta-line { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--pg-ink-dim); text-transform: uppercase; margin: 0 0 10px; } .pub .meta-line .dot { display: inline-block; width: 3px; height: 3px; background: var(--pg-ink-dim); border-radius: 50%; margin: 0 8px; vertical-align: 3px; } .pub .links { display: inline-flex; flex-wrap: wrap; gap: 6px; } .pub .links a { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: -0.005em; color: var(--pg-ink); text-decoration: none; padding: 4px 9px; border: 1px solid var(--pg-rule); border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; transition: all 160ms ease; } .pub .links a:hover { border-color: var(--pg-accent); color: var(--pg-accent); background: var(--pg-accent-wash); } .pub .links a.disabled { opacity: 0.5; pointer-events: none; } /* ---------- Awards ---------- */ .awards { display: grid; grid-template-columns: 140px 1fr; gap: 40px; } .awards .list { display: flex; flex-direction: column; } .award { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--pg-rule-soft); align-items: start; } .award:first-child { border-top: 1px solid var(--pg-rule); } .award:last-child { border-bottom: 1px solid var(--pg-rule); } .award .when { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--pg-ink-dim); text-transform: uppercase; } .award h4 { font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 1.3; margin: 0 0 4px; color: var(--pg-ink); text-wrap: balance; } .award h4 .rosette { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pg-accent); margin-right: 8px; vertical-align: 1px; } .award .where { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--pg-ink-soft); margin: 0 0 8px; } .award p { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; color: var(--pg-ink-soft); margin: 0; } /* ---------- CV / experience timeline ---------- */ .cv-grid { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 40px; } .cv-col h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pg-ink-dim); font-weight: 600; margin: 0 0 12px; } .cv-item { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--pg-rule-soft); align-items: baseline; } .cv-item:first-of-type { border-top: 1px solid var(--pg-rule); } .cv-item:last-of-type { border-bottom: 1px solid var(--pg-rule); } .cv-item .yr { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--pg-ink-dim); } .cv-item .body { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; color: var(--pg-ink); } .cv-item .body .role { font-weight: 600; display: block; font-size: 15px; margin-bottom: 2px; } .cv-item .body .org { color: var(--pg-ink-soft); } .cv-item .body .org em { font-family: var(--font-serif); font-style: italic; } .cv-item .body .where { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-ink-dim); margin-top: 4px; } /* ---------- Skills ---------- */ .skills { display: grid; grid-template-columns: 140px 1fr; gap: 40px; } .skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; } .skill-block { padding: 16px 0; border-top: 1px solid var(--pg-rule-soft); } .skill-block:nth-child(-n+2) { border-top: 1px solid var(--pg-rule); } .skill-block:nth-last-child(-n+2) { border-bottom: 1px solid var(--pg-rule); } .skill-block .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-ink-dim); margin-bottom: 8px; } .skill-block .items { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--pg-ink); } /* ---------- Contact ---------- */ .contact-card { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; padding: 40px; background: var(--pg-bg-soft); border: 1px solid var(--pg-rule); border-radius: 4px; } .contact-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--pg-ink); text-wrap: balance; } .contact-card h3 em { font-style: italic; color: var(--pg-accent); } .contact-card p { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.55; color: var(--pg-ink-soft); margin: 0 0 20px; } .contact-card .lines { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--pg-ink); } .contact-card .lines .row { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 8px 0; border-top: 1px solid var(--pg-rule-soft); align-items: baseline; } .contact-card .lines .row:first-child { border-top: none; padding-top: 0; } .contact-card .lines .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-ink-dim); } .contact-card .lines .v a { color: var(--pg-ink); text-decoration-color: var(--pg-accent); text-underline-offset: 3px; } /* ---------- Footer ---------- */ .foot { padding: 48px 0 64px; border-top: 1px solid var(--pg-rule); color: var(--pg-ink-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; } .foot-inner { display: flex; justify-content: space-between; gap: 24px; align-items: end; } .foot .sig { font-family: var(--font-serif); font-style: italic; font-size: 13px; letter-spacing: 0; color: var(--pg-ink-soft); } /* ---------- Decorative SVG hairline ---------- */ .blueprint { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 200ms ease; } html[data-decor="blueprint"] .blueprint { opacity: 1; } html[data-decor="blueprint"] .blueprint-bg { background-image: linear-gradient(to right, var(--pg-rule-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--pg-rule-soft) 1px, transparent 1px); background-size: 80px 80px; background-position: -1px -1px; } html[data-decor="blueprint"] body { background-image: linear-gradient(to right, var(--pg-rule-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--pg-rule-soft) 1px, transparent 1px); background-size: 80px 80px; } /* ---------- Misc ---------- */ .kbd-arrow { display: inline-block; transform: translateY(-1px); margin-left: 4px; font-family: var(--font-mono); }