/* =================================================================== Valencia Arlin Halim — portfolio styles ------------------------------------------------------------------- NAVIGATION — search for a banner (each starts with "===") to jump: SHARED SECTION PRIMITIVES ... .section / .section-inner / .eyebrow / .hairline HERO ......................... the pinned scroll hero (all .hero-* classes) 01 · FEATURED WORK ........... #sec-work — filter tabs + bento cards 02 · LIFE AROUND THE WORK .... #work-gallery — horizontal photo pan 03 · OTHER WORK .............. #sec-other — two-column list 04 · HOBBIES ................. #sec-hobbies — tessellation columns 05 · ASK MY PORTFOLIO ........ #sec-ask — search-to-answer panel CONTACT ...................... #sec-contact — final reveal PAGE LOADER .................. #page-loader splash COMPONENTS RENDERED BY app.js cards / caps / modal drawer Responsive overrides live in the @media blocks near the end. DESIGN TOKENS: colours, font families/sizes/weights, line-heights, letter-spacing, the page gutter, and radii all live in tokens.css and are referenced here via var(--…). Change a reused value there, not here. =================================================================== */ html, body { margin: 0; background: var(--c-bg); color: var(--c-heading); /* default warm-ivory text — the dc runtime used to supply this; restored so colourless headings (.hero-panel-title/.section-title/.ask-h2/.contact-h2) aren't black */ scroll-behavior: smooth; overflow-x: clip; max-width: 100%; } /* The rubber-band / elastic overscroll gap is painted by the ROOT () background only — fixed/absolute hero layers clip to the viewport and can't reach it. The hero's top edge is the aperture's flat dark field, sampled at #06080e — matching the root to that EXACT colour makes the field read as continuing into the bounce with no visible seam. (Update this if the aperture PNG changes: sample the field colour just above the silhouette's crown.) */ html { background-color: #06080e; } /* shared utility classes (extracted from repeated inline styles) */ .accent { font-style: italic; color: var(--c-italic); } /* the serif italic accent on headings (was repeated inline) */ *::-webkit-scrollbar { width: 10px; } *::-webkit-scrollbar-thumb { background: var(--c-surface-2); border-radius: 6px; } @keyframes driftSlow { from { background-position: 0 0; } to { background-position: -720px 30px; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* floating menu */ .menu-wrap { position: fixed; inset: 0; z-index: 44; pointer-events: none; opacity: 0; visibility: hidden; } .menu-wrap.open { pointer-events: auto; opacity: 1; visibility: visible; } .menu-back { position: absolute; inset: 0; background: rgba(8, 12, 20, 0); transition: background 0.4s ease; } .menu-wrap.open .menu-back { background: rgba(8, 12, 20, 0.55); backdrop-filter: blur(3px); } .menu-panel { position: absolute; top: 84px; right: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } /* fixed circular hamburger, top-right (fades in past the hero — see app.js) */ .ham { position: fixed; top: 24px; right: 24px; z-index: 47; width: 44px; height: 44px; border-radius: var(--r-round); border: 1px solid var(--c-border-pill); background: var(--c-glass); backdrop-filter: blur(var(--blur)); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .ham img { width: 18px; height: 18px; display: block; } .ham.show { opacity: 1; visibility: visible; transform: none; } .menu-link { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-family: var(--font-sans); font-size: var(--fs-body); letter-spacing: 0.02em; color: var(--c-btn-text); text-decoration: none; cursor: pointer; background: transparent; opacity: 0; transform: translateY(-8px); transition: color var(--transition); } .menu-link span { position: relative; z-index: 2; } .menu-link::before { content: ""; position: absolute; inset: 0; background: rgba(143, 176, 198, 0.2); transform: translateX(-103%); z-index: 1; transition: transform 0.35s var(--ease); } .menu-wrap.open .menu-link { animation: mIn 0.45s ease forwards; } .menu-wrap.open .menu-link:nth-child(1) { animation-delay: 0.04s; } .menu-wrap.open .menu-link:nth-child(2) { animation-delay: 0.12s; } .menu-wrap.open .menu-link:nth-child(3) { animation-delay: 0.2s; } .menu-wrap.open .menu-link:nth-child(4) { animation-delay: 0.28s; } .menu-wrap.open .menu-link:nth-child(5) { animation-delay: 0.36s; } @keyframes mIn { to { opacity: 1; transform: none; } } .menu-link:hover { color: var(--c-heading-hi); } .menu-link:hover::before { transform: translateX(0); } .mstar { position: relative; z-index: 2; color: var(--c-accent-deep); font-size: var(--fs-body-lg); line-height: var(--lh-none); display: none; } .menu-link.active .mstar { display: inline-block; } /* =================================================================== CONTACT / FINAL REVEAL (#sec-contact) — night-scene close with a curved top edge that overlaps the section above it. =================================================================== */ #sec-contact { position: relative; z-index: 2; margin-top: -6vw; border-top-left-radius: 50% 6vw; border-top-right-radius: 50% 6vw; min-height: 90dvh; display: flex; align-items: center; justify-content: center; background: var(--c-bg); overflow: hidden; } .contact-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 82%; } .contact-scrim { position: absolute; inset: 0; background: radial-gradient( 120% 90% at 50% 38%, rgba(10, 16, 26, 0.5) 0%, rgba(8, 12, 20, 0.72) 60%, rgba(7, 11, 18, 0.9) 100% ); } #sec-contact .topo { opacity: 0.05; } .contact-inner { position: relative; text-align: center; max-width: 900px; padding: 60px 40px; } .contact-portrait { width: 150px; height: 150px; border-radius: var(--r-round); object-fit: cover; object-position: center center; border: 1px solid rgba(159, 192, 216, 0.3); margin-bottom: 34px; animation: breath 8s ease-in-out infinite; } .contact-h2 { font-family: var(--font-serif); font-weight: var(--fw-light); font-size: var(--fs-display-lg); line-height: var(--lh-heading); margin: 0 0 22px; } .contact-cursive { font-family: var(--font-script); font-style: normal; font-weight: var(--fw-bold); font-size: var(--fs-hero); color: var(--c-pink); line-height: 0.6; } .contact-lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--c-text-soft); max-width: 540px; margin: 0 auto 36px; } /* contact channels — each is "[icon] underlined-link". Desktop: all four on one centered row. Tablet/mobile (≤1024, see below): stacked into a single left-aligned column. */ .contact-links { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 48px); } .contact-link { display: flex; flex-direction: row; /* icon to the left of the text */ align-items: center; gap: 14px; text-decoration: none; } .contact-ico { width: 22px; height: 22px; object-fit: contain; opacity: 0.85; transition: opacity var(--transition); } .contact-link:hover .contact-ico { opacity: 1; } /* the value doubles as the link text — underlined to read as clickable */ .contact-value { font-family: var(--font-mono); font-size: var(--fs-body); letter-spacing: 0.01em; color: var(--c-text-bright); text-decoration: underline; text-decoration-color: rgba(159, 176, 200, 0.5); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--transition), text-decoration-color var(--transition); } .contact-link:hover .contact-value { color: var(--c-pink); text-decoration-color: var(--c-pink); } /* tablet + mobile: stack into a column whose items are left-aligned, but the column itself is centered on the viewport (shrink to content, then auto-margin) */ @media (max-width: 1024px) { .contact-links { flex-direction: column; align-items: flex-start; gap: 18px; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; } } @keyframes breath { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } } .topo { position: absolute; inset: -60px; pointer-events: none; background: url("assets/effects/topo.svg") repeat; background-size: 720px 520px; animation: driftSlow 90s linear infinite; } .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* =================================================================== SHARED SECTION PRIMITIVES — reused by every content section below (Featured Work, Other Work, Hobbies, Ask, Contact). Change the look of all section headers in one place here. =================================================================== */ .section { position: relative; overflow: hidden; scroll-margin-top: 80px; background: var(--c-bg); } .section-inner { position: relative; max-width: 1280px; margin: 0 auto; } /* small monospace label above a section title ("01 / Selected Work") */ .eyebrow { font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: var(--ls-eyebrow); color: var(--c-accent); text-transform: uppercase; } /* horizontal fade-out rule that trails an eyebrow/heading */ .hairline { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(143, 176, 198, 0.4), transparent); } /* header row: eyebrow + hairline sharing one baseline */ .section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 40px; } /* serif section title ("Selected work.") */ .section-title { font-family: var(--font-serif); font-weight: var(--fw-light); font-size: var(--fs-hero); line-height: var(--lh-none); margin: 0 0 18px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 18px; background: rgba(160, 176, 196, 0.08); border: 1px solid var(--c-border); font-size: var(--fs-body-sm); color: var(--c-text-soft); } .askbar { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 7px 0 20px; border-radius: 26px; background: rgba(16, 22, 34, 0.7); border: 1px solid rgba(160, 176, 196, 0.2); cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .askbar:hover { border-color: rgba(143, 176, 198, 0.55); background: rgba(20, 28, 42, 0.85); transform: translateY(-2px); } .tab { font-size: var(--fs-body-sm); letter-spacing: 0.01em; color: var(--c-muted); padding: 8px 2px; cursor: pointer; white-space: nowrap; border-bottom: 1px solid transparent; transition: 0.25s; } /* =================================================================== 01 · FEATURED WORK (#sec-work) — filter tabs + bento card grid =================================================================== */ #sec-work { padding: 120px var(--gutter); } #sec-work > .topo { opacity: 0.16; } /* header: title block on the left, room to grow on the right */ .work-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .work-head-main { flex: 1; min-width: 300px; } .work-head .eyebrow { margin-bottom: 16px; } .work-sub { font-family: var(--font-serif); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--c-text-soft); margin: 0; max-width: 440px; } /* soft italic emphasis inside body copy ("meaningful") — reused in Ask/Contact */ .em-soft { font-style: italic; color: var(--c-text); } .dash-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--c-border-line); margin-bottom: 30px; padding-top: 30px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .dash-tabs::-webkit-scrollbar { display: none; height: 0; } .dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 18px; } .tab:hover { color: var(--c-btn-text); } .hero-nav-link { color: var(--c-text-soft); text-decoration: none; cursor: pointer; transition: color var(--transition); } .hero-nav-link:hover { color: var(--c-heading-hi); } /* pill & icon buttons (hero résumé, icon circles, top button) share one interaction: a base transition + a fill/border/lift on hover. Defined once here; the individual boxes (padding, radius, glass) differ below. */ .hero-resume, .icirc, .topbtn, .ask-reset { transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } .hero-resume:hover, .icirc:hover, .topbtn:hover, .ask-reset:hover { background: var(--c-hover-fill) !important; border-color: var(--c-hover-border) !important; color: var(--c-heading-hi); } .hero-resume:hover, .icirc:hover, .ask-reset:hover { transform: translateY(-2px); } .hero-resume { padding: 8px 16px; border: 1px solid rgba(170, 180, 196, 0.32); border-radius: 20px; color: var(--c-btn-text); cursor: pointer; } /* fixed "↑ Top" pill, bottom-center */ .topbtn { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 22px; border: 1px solid var(--c-border-pill); background: var(--c-glass); backdrop-filter: blur(var(--blur)); cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: var(--ls-label); color: var(--c-text); text-transform: uppercase; } /* keeps the centering translateX while adding the shared lift */ .topbtn:hover { transform: translateX(-50%) translateY(-2px) !important; } .tab.on { color: var(--c-heading); border-color: var(--c-accent); } /* =================================================================== 03 · OTHER WORK (#sec-other) — two-column list of secondary projects =================================================================== */ #sec-other { padding: 110px var(--gutter); background: var(--c-bg-alt); } .other-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(40px, 5vw, 96px); } /* rows built by app.js renderOther() */ .other-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 0; border-top: 1px solid var(--c-border-line); cursor: pointer; transition: background var(--transition), padding-left var(--transition); } .other-row:hover { background: rgba(143, 176, 198, 0.06); padding-left: 12px; } .other-name { font-family: var(--font-serif); font-size: var(--fs-lead); color: var(--c-name); display: flex; align-items: baseline; gap: 12px; } .other-arrow { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--c-accent); opacity: 0; transition: opacity var(--transition), transform var(--transition); } .other-kind { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--c-muted); letter-spacing: 0.08em; white-space: nowrap; } /* =================================================================== 05 · ASK MY PORTFOLIO (#sec-ask) — centered search-to-answer panel =================================================================== */ #sec-ask { position: relative; padding: 230px var(--gutter); background: var(--c-bg-alt); } .ask-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } #sec-ask .topo { opacity: 0.2; } .ask-inner { position: relative; max-width: 820px; margin: 0 auto; text-align: center; } #sec-ask .eyebrow { margin-bottom: 22px; } .ask-h2 { font-family: var(--font-serif); font-weight: var(--fw-light); font-size: var(--fs-display-lg); line-height: 1.14; margin: 0 0 38px; } .ask-icon { width: 20px; height: 20px; flex: none; } /* the large search bar in this section (vs. the compact hero one) */ .ask-wrap .askbar { width: 100%; height: 58px; padding: 0 12px 0 22px; box-sizing: border-box; border: 1px solid rgba(143, 176, 198, 0.34); } .ask-wrap { position: relative; max-width: 620px; margin: 0 auto; text-align: left; } .ask-input { flex: 1; background: transparent; border: none; outline: none; font-family: var(--font-sans); font-size: var(--fs-body); color: var(--c-heading); } .ask-input::placeholder { color: var(--c-placeholder); } .ask-send { width: 40px; height: 40px; flex: none; border-radius: var(--r-round); border: none; background: rgba(159, 192, 216, 0.2); display: flex; align-items: center; justify-content: center; color: var(--c-text-bright); cursor: pointer; transition: background var(--transition), transform var(--transition); } .ask-send:hover { background: rgba(159, 192, 216, 0.34); transform: translateY(-1px); } .ask-suggest { position: absolute; left: 0; right: 0; top: 66px; z-index: 20; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 8px; box-shadow: 0 18px 50px rgba(4, 8, 16, 0.6); animation: fadeUp var(--transition); } .ask-sg { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; border: none; border-radius: 9px; background: transparent; color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-body); cursor: pointer; transition: background var(--transition); } .ask-sg:hover { background: rgba(143, 176, 198, 0.12); color: var(--c-heading); } .ask-sg-ic { color: var(--c-accent); font-size: var(--fs-body); } .ask-thread { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; } @keyframes askPulse { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } /* =================================================================== PAGE LOADER — full-screen splash shown until assets are ready (app.js adds .hidden to fade it out). Dots use .transit-dots below. =================================================================== */ #page-loader { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--c-bg); transition: opacity 0.7s ease, visibility 0.7s ease; } .loader-mark { font-family: var(--font-serif); font-size: var(--fs-display); letter-spacing: var(--ls-caps); color: var(--c-white); } .loader-text { font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: var(--ls-eyebrow); color: var(--c-accent); text-transform: uppercase; } #page-loader.hidden { opacity: 0; visibility: hidden; } .hero-askbar { margin-top: 24px; max-width: 320px; position: relative; z-index: 30; cursor: pointer; outline: none; } .transit { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(8, 12, 20, 0.86); backdrop-filter: blur(var(--blur)); animation: fadeUp var(--transition); } .transit-txt { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-title); color: var(--c-white); } .transit-dots span { display: inline-block; width: 7px; height: 7px; margin: 0 3px; border-radius: var(--r-round); background: var(--c-accent); animation: askPulse 1.1s ease-in-out infinite; } .transit-dots span:nth-child(2) { animation-delay: 0.18s; } .transit-dots span:nth-child(3) { animation-delay: 0.36s; } .ask-reset { margin-top: 16px; padding: 8px 16px; font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: var(--ls-tag); color: var(--c-btn-text); text-transform: uppercase; cursor: pointer; background: none; border: 1px solid var(--c-border-pill); border-radius: 20px; } /* fuzzy-search result cards (Ask my portfolio) */ @keyframes askFade { from { opacity: 0; } to { opacity: 1; } } .ask-card { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; padding: 16px 18px; border-radius: var(--r-md); cursor: pointer; background: var(--c-searchbar); border: 1px solid var(--c-border-soft); transition: transform 0.3s var(--ease), opacity var(--transition), border-color 0.3s, background 0.3s; } .ask-card:hover { transform: translateY(-2px); border-color: rgba(143, 176, 198, 0.45); background: var(--c-searchbar-hover); } .ask-card-thumb { flex: none; width: 76px; height: 76px; border-radius: var(--r-sm); background-size: cover; background-position: center; background-color: var(--c-surface-2); border: 1px solid var(--c-border-softer); } .ask-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ask-card-title { font-family: var(--font-serif); font-size: var(--fs-lead); color: var(--c-heading); line-height: var(--lh-heading); } .ask-card-desc { font-size: var(--fs-body); color: var(--c-text-soft); line-height: 1.45; } .ask-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } /* squarish highlight — the same fill the menu links use (rgba(143,176,198,.2)), but always present rather than wiping in on hover. No pill radius, no outline. */ .ask-tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-tight); color: var(--c-btn-text); padding: 3px 9px; border-radius: 3px; background: rgba(143, 176, 198, 0.2); } .ask-card-arrow { flex: none; color: var(--c-accent); font-size: var(--fs-title); line-height: var(--lh-none); transition: transform 0.3s, color 0.3s; } .ask-card:hover .ask-card-arrow { color: var(--c-white); transform: translateX(3px); } /* empty state (no matches) */ .ask-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 20px 30px; animation: askFade var(--transition) both; } .ask-empty-img { width: 116px; height: auto; opacity: 0.85; margin-bottom: 22px; } .ask-empty-title { font-family: var(--font-serif); font-size: var(--fs-title); color: var(--c-name); } .ask-empty-sub { font-size: var(--fs-body); color: var(--c-muted); margin-top: 8px; } .other-row:hover .other-arrow { opacity: 1; transform: translateX(3px); } /* =================================================================== COMPONENTS RENDERED BY app.js — capabilities list, project cards, and the project modal drawer. (Markup lives in the app.js render and openProject functions; only truly dynamic bits — image URLs, --accent, grid span — stay inline there.) =================================================================== */ /* capabilities list (Skillsets, renderCaps) */ .caprow { display: flex; gap: 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--c-border); } .cap-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); } .cap-body { flex: 1; } .captitle { font-family: var(--font-serif); font-size: var(--fs-title); color: var(--c-heading); line-height: 1.12; } .cap-tools { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--c-accent); letter-spacing: 0.06em; margin-top: 7px; } /* project modal (openProject) — large centered panel: media left, details right. Occupies ~85% of the screen. See the ≤860px block for the stacked mobile variant. */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .modal-back { position: absolute; inset: 0; background: rgba(6, 9, 15, 0.72); backdrop-filter: blur(3px); } .modal-panel { position: relative; /* holds the pinned close button; the scroll area fills it */ width: 85vw; max-width: 1180px; /* caps the detail column's reading width on large monitors */ height: 85vh; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-tile); overflow: hidden; box-shadow: 0 40px 100px -20px var(--c-shadow); animation: fadeUp 0.4s ease; } /* Two panes that scroll INDEPENDENTLY: the words stay put on the left while the pictures scroll on the right. Single-column media so images of any aspect ratio stack cleanly with even spacing — no ragged grid gaps, and the text is always in view (no dead whitespace). */ .modal-scrollarea { display: flex; height: 100%; } /* ---- LEFT: detail pane (words) ---- */ .mp-detail { flex: 0 0 46%; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding: 2.125em 1.75em 2.5em 2.125em; } /* ---- RIGHT: media pane — one full-width column, aspect ratios kept (never cropped) ---- */ .mp-media { flex: 1 1 0; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding: 2.125em 2.125em 1.25em; } .mp-hero, .mp-shot { display: block; width: 100%; height: auto; margin: 0 0 0.9em; background: none; border-radius: var(--r-tile); } .mp-hero:last-child, .mp-shot:last-child { margin-bottom: 0; } video.mp-hero, video.mp-shot { background: #000; object-fit: contain; } /* a hairline between the panes + always-visible scrollbars make the two independent scroll columns legible (the global overlay thumb is near-invisible on this surface). */ .mp-media { border-left: 1px solid var(--c-border-line); } .mp-detail, .mp-media { scrollbar-width: thin; scrollbar-color: rgba(159, 192, 216, 0.5) transparent; /* Firefox: thumb / track */ } .mp-detail::-webkit-scrollbar, .mp-media::-webkit-scrollbar { width: 12px; } .mp-detail::-webkit-scrollbar-track, .mp-media::-webkit-scrollbar-track { background: transparent; } .mp-detail::-webkit-scrollbar-thumb, .mp-media::-webkit-scrollbar-thumb { background: rgba(159, 192, 216, 0.55); border-radius: 8px; border: 2px solid var(--c-surface); /* inset padding so the thumb reads as a pill */ background-clip: padding-box; } .mp-detail::-webkit-scrollbar-thumb:hover, .mp-media::-webkit-scrollbar-thumb:hover { background: rgba(159, 192, 216, 0.78); background-clip: padding-box; } .mp-cat { font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: var(--ls-tag); color: var(--c-accent); text-transform: uppercase; margin-bottom: 1.1em; } .mp-title { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--fs-display); line-height: var(--lh-heading-tight); margin: 0 0 0.45em; } /* meta rows: [icon] [label + content] */ .mp-rows { display: flex; flex-direction: column; margin-top: 1.4em; border-top: 1px solid var(--c-border-line); } .mp-row { display: grid; grid-template-columns: 2.125em 1fr; gap: 1em; padding: 1.15em 0; border-bottom: 1px solid var(--c-border-line); } .mp-row:last-child { border-bottom: 0; } /* header icon (assets/icons/