/* ============================================================ MINJEONG — Portfolio A minimal, monospace, editorial system. Light + dark themes via [data-theme] on . ============================================================ */ :root { --bg: #ffffff; --fg: #0d0d0d; --muted: #6b6b6b; /* secondary / labels */ --rule: #111111; /* crisp structural hairlines */ --rule-soft: #dcdcdc; /* faint borders */ --accent: #1b27d0; /* royal-blue frames + links */ --ph-bg: #f2f2f0; /* placeholder field */ --ph-ink: #b7b7b2; /* placeholder labels */ } [data-theme="dark"] { --bg: #0e0e0e; --fg: #d8d8d8; --muted: #8a8a8a; --rule: #3a3a3a; --rule-soft: #262626; --accent: #6173ff; --ph-bg: #161616; --ph-ink: #3b3b3b; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Inter", sans-serif; font-weight: 500; /* Medium by default */ font-size: 13px; line-height: 1.55; letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .35s ease, color .35s ease; } a { color: inherit; } /* ---------- Wordmark ---------- */ .wordmark { display: block; margin: 0 0 1.5rem; font-family: "Inter", sans-serif; font-weight: 700; /* Bold */ font-size: clamp(46px, 7.5vw, 84px); line-height: 0.92; letter-spacing: -0.015em; text-decoration: none; color: var(--fg); } /* ---------- Contact ---------- */ .contact { text-transform: uppercase; } .contact .block { margin-bottom: 1.05rem; } .contact .block:last-child { margin-bottom: 0; } .contact a { text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; } .contact a:hover { color: var(--accent); } /* ---------- Work list (index table) ---------- */ .worklist-head, .row { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 16px; } .worklist-head { margin-top: 46px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); text-transform: uppercase; color: var(--muted); } .worklist { display: block; } .row { position: relative; padding: 17px 0 13px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; align-items: baseline; transition: color .2s ease, padding-left .2s ease; } .row .num { position: absolute; top: 4px; left: 0; font-size: 9.5px; letter-spacing: 0.05em; color: var(--muted); transition: color .2s ease; } .row .title { text-transform: uppercase; } .row .title::after { content: " ↗"; opacity: 0; transition: opacity .2s ease; } .row .type, .row .year { text-transform: uppercase; color: var(--muted); transition: color .2s ease; } .row:hover, .row:focus-visible { color: var(--accent); outline: none; padding-left: 6px; } .row:hover .num, .row:hover .type, .row:hover .year, .row.active .num, .row.active .type, .row.active .year { color: var(--accent); } .row:hover .title::after { opacity: 1; } .row.active { color: var(--accent); } /* ---------- Footer ---------- */ .site-footer { margin-top: 38px; color: var(--muted); max-width: 62ch; } .site-footer .copyright { margin-top: 3px; } /* ============================================================ INDEX PAGE ============================================================ */ main.index { max-width: 820px; padding: 64px clamp(26px, 6vw, 84px) 96px; } /* ============================================================ WORK PAGE — sticky sidebar + scrolling feed ============================================================ */ main.work { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 56px; max-width: 1320px; margin: 0 auto; padding: 0 clamp(26px, 5vw, 72px); align-items: start; } .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: 60px 6px 40px 0; scrollbar-width: thin; } .sidebar .wordmark { font-size: clamp(30px, 4vw, 42px); } .sidebar .worklist-head { margin-top: 36px; } .back { display: inline-block; margin-top: 26px; text-transform: uppercase; text-decoration: none; color: var(--muted); transition: color .2s ease; } .back:hover { color: var(--accent); } /* ---------- Info panel (sidebar): About by default, project on select ---------- */ .info { margin: 2px 0 4px; } /* A short, safe fade-in on change. No "both" fill, and it animates from a visible base, so the panel can never get stuck hidden if the animation doesn't run (e.g. background tab). */ .info-inner { opacity: 1; animation: fadeIn .28s ease; } @keyframes fadeIn { from { opacity: 0.25; } to { opacity: 1; } } .js-home { cursor: pointer; text-decoration: none; } .js-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .ap-meta { border-top: 1px solid var(--rule); padding-top: 14px; } .ap-row { display: grid; grid-template-columns: 78px 1fr; gap: 10px; margin-bottom: 3px; } .ap-k { color: var(--muted); text-transform: uppercase; } .ap-v { color: var(--fg); } .ap-ref { margin-top: 18px; color: var(--muted); } .ap-desc { margin: 9px 0 0; max-width: 42ch; } @keyframes apIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* The description lives in the sidebar panel on desktop, so hide the in-feed copy there. On narrow screens the sidebar isn't sticky and can't track scrolling, so we flip it: hide the panel, show each project's description back in the feed (handled in RESPONSIVE below). */ @media (min-width: 881px) { .feed .desc { display: none; } } /* ---------- Feed ---------- */ .feed { padding: 60px 0 25vh; } .project { margin-bottom: 72px; scroll-margin-top: 36px; } .project:last-child { margin-bottom: 0; } .project-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 9px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); text-transform: uppercase; color: var(--muted); } .project-head .head-left { display: flex; gap: 16px; min-width: 0; } .project-head .pj-num { flex: none; } .project-head .pj-title { color: var(--fg); } .project-head .head-right { flex: none; text-align: right; white-space: nowrap; } .figure { margin: 0 0 24px; } .figure:last-of-type { margin-bottom: 18px; } .frame { border: 2px solid var(--accent); background: var(--ph-bg); overflow: hidden; line-height: 0; } .frame img { display: block; width: 100%; height: auto; } /* One image at a time; click the frame to advance to the next. */ .viewer { position: relative; } .viewer.multi { cursor: pointer; } .viewer.multi:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Fast / double clicks on the gallery and controls shouldn't highlight text (the blue selection flash). Descriptions stay selectable. */ .viewer, .hint, .cap, .project-head, .row, .worklist-head, .js-home { -webkit-user-select: none; user-select: none; } .hint { position: absolute; bottom: 0; right: 0; z-index: 1; padding: 4px 9px; background: var(--accent); color: #fff; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; } .ph { display: block; width: 100%; height: auto; color: var(--ph-ink); } .ph text { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; fill: var(--ph-ink); letter-spacing: 0.06em; } .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 7px; text-transform: uppercase; color: var(--muted); font-size: 11px; line-height: 1.45; } .cap-count { flex: none; color: var(--accent); } .desc { max-width: 56ch; margin: 16px 0 0; } /* ============================================================ THEME TOGGLE ============================================================ */ #theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 20; padding: 6px 13px; font: inherit; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--rule-soft); border-radius: 999px; cursor: pointer; transition: color .2s ease, border-color .2s ease; } #theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 880px) { main.work { grid-template-columns: 1fr; gap: 8px; } .sidebar { position: static; height: auto; overflow: visible; padding: 60px 0 0; } /* Hide the long index list on small screens — the feed already lists every project and shows each description inline there (the min-width rule above hides the in-feed copy on desktop). The About text stays visible at the top. */ .sidebar .worklist-head, .sidebar .worklist { display: none; } .feed { padding-top: 28px; } .project-head { flex-wrap: wrap; } }