style.css

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Global font stack ──────────────────────────────────────────────────────── */

/* Body / UI — Inter */
body, html {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* Headings — Instrument Serif */
h1, h2,
.prose h1, .prose h2, .prose h3,
[class*="content"] h1, [class*="content"] h2, [class*="content"] h3:not(.sidebar-title) {
  font-family: 'Instrument Serif', serif !important;
}

/* h1 italic everywhere, matching the editorial/magazine style */
h1, .prose h1, [class*="content"] h1 {
  font-style: italic !important;
}

/* Mono — JetBrains Mono */
code, pre, kbd, samp,
[class*="mono"], [class*="font-mono"],
.prose code, .prose pre {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

:root {
  --default-border-color: var(--gray-200);
}

.dark {
  --default-border-color: var(--gray-800);
}

/* ─── Navbar icon link buttons — remove borders ─────────────────────────────── */

.navbar-link {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ─── Navbar: hide labels on desktop, show in mobile dropdown ────────────────── */

@media (min-width: 640px) {
  a[href*="github.com/MariaC27"],
  a[href*="linkedin.com/in/maria"],
  a[href*="medium.com/@maria"],
  a[href*="mailto:maria"] {
    font-size: 0 !important;
    overflow: hidden;
  }
}

/* ─── Sidebar nav + TOC — reset to Inter ────────────────────────────────────── */

h2.font-normal {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-style: normal !important;
}

/* ─── Sidebar nav ────────────────────────────────────────────────────────────── */

#sidebar .nav-dropdown-trigger {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0.375rem;
}

#sidebar .nav-dropdown-trigger:hover {
  background-color: rgb(0 0 0 / 0.04) !important;
}

.dark #sidebar .nav-dropdown-trigger:hover {
  background-color: rgb(255 255 255 / 0.06) !important;
}

#sidebar .nav-dropdown-trigger .nav-dropdown-item-icon {
  border: none !important;
  background: transparent !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
}

.nav-dropdown-content .nav-dropdown-item-icon {
  border: none !important;
  background: transparent !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
}

.nav-dropdown-content .nav-dropdown-item-description {
  display: none !important;
}

#sidebar .nav-anchor span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ─── Magazine: background ───────────────────────────────────────────────────── */

/* Page background (#F8F5EF cream) is set via docs.json background.color.
   Sidebar gets a slightly whiter bg so it reads as distinct chrome. */
#sidebar {
  background-color: #FFFFFF !important;
  border-right: 1px solid #E7E5E4;
}
.dark #sidebar {
  background-color: #141210 !important;
}

/* ─── Portfolio: home page frame ───────────────────────────────────────────── */

body:has([data-portfolio-index]) #sidebar a.nav-anchor[href='/'] {
  color: rgb(var(--primary)) !important;
  font-weight: 600 !important;
}

body:has([data-portfolio-index]) #sidebar a.nav-anchor[href='/'] span {
  color: inherit !important;
}

body:has([data-portfolio-index]) #sidebar a.nav-anchor[href='/'] svg {
  background-color: rgb(var(--primary)) !important;
}

.dark body:has([data-portfolio-index]) #sidebar a.nav-anchor[href='/'] {
  color: rgb(var(--primary-light)/var(--tw-text-opacity,1)) !important;
}

/* Home frame page: strip all wrapping backgrounds/padding so body cream shows through edge-to-edge */
:is(#content-area[data-current-path='/'], [data-current-path='/'] #content-area):has([data-portfolio-index]) {
  background: transparent !important;
  padding: 0 !important;
}

:is(#content-area[data-current-path='/'], [data-current-path='/'] #content-area):has([data-portfolio-index]) > div:first-child {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* ─── Portfolio: utility classes ────────────────────────────────────────────── */

/* Primary color text — works with Mintlify's CSS variable */
.portfolio-primary-text {
  color: rgb(var(--primary)) !important;
}
.dark .portfolio-primary-text {
  color: rgb(var(--primary-light)) !important;
}

/* ─── Skills: proficiency badges ───────────────────────────────────────────── */

.skill-badge-active {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background-color: #f0fdf4;
  padding: 0.25rem 0.625rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #15803d;
  box-shadow: inset 0 0 0 1px #16a34a33;
}

.dark .skill-badge-active {
  background-color: rgb(20 83 45 / 0.3);
  color: #4ade80;
}

.skill-badge-fluent {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background-color: #fefce8;
  padding: 0.25rem 0.625rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #a16207;
  box-shadow: inset 0 0 0 1px #ca8a0433;
}

.dark .skill-badge-fluent {
  background-color: rgb(113 63 18 / 0.3);
  color: #facc15;
}

.skill-badge-familiar {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background-color: #f9fafb;
  padding: 0.25rem 0.625rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4b5563;
  box-shadow: inset 0 0 0 1px #6b728033;
}

.dark .skill-badge-familiar {
  background-color: rgb(31 41 55 / 0.5);
  color: #9ca3af;
}

/* ─── Magazine: pull quotes, drop cap ───────────────────────────────────────── */

/* Accent border-left for pull quotes */
.portfolio-accent-border-l {
  border-color: rgb(var(--primary));
}

/* ─── Changelog: expandable entries ────────────────────────────────────────── */

.cl-entry summary { list-style: none; }
.cl-entry summary::-webkit-details-marker { display: none; }

.cl-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.cl-entry[open] .cl-chevron {
  transform: rotate(90deg);
}

.cl-title {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
  font-style: italic !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #111827;
}

.dark .cl-title {
  color: #f9fafb;
}

.cl-entry {
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.07);
  transition: background-color 0.15s;
}

.dark .cl-entry {
  background-color: rgba(17, 24, 39, 0.5);
  border-color: rgba(255, 255, 255, 0.07);
}

.cl-entry:hover {
  background-color: #fff;
}

.dark .cl-entry:hover {
  background-color: rgba(17, 24, 39, 0.8);
}

.cl-entry.cl-active {
  border-color: rgb(234 88 12 / 0.45) !important;
  background-color: rgb(234 88 12 / 0.04) !important;
}

.dark .cl-entry.cl-active {
  border-color: rgb(234 88 12 / 0.45) !important;
  background-color: rgb(234 88 12 / 0.08) !important;
}

/* ─── Inner pages: editorial typography ─────────────────────────────────────── */

/* Page title — match the manually-rendered h1 style on frame-mode pages */
#content-area h1 {
  font-size: 2.75rem;
  font-weight: 400 !important;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* h2 section breaks — subtle rule above for visual rhythm */
#content-area .prose h2 {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-top: 1.75rem;
  margin-top: 3rem;
}

.dark #content-area .prose h2 {
  border-top-color: rgba(255, 255, 255, 0.07);
}

/* Article byline — mono, with a rule below to separate from body */
.portfolio-byline {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: #6b7280;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .portfolio-byline {
  color: #9ca3af;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ─── Drop cap — float-left large italic initial ─────────────────────────────── */
.portfolio-dropcap {
  float: left;
  font-family: 'Instrument Serif', serif;
  font-size: 4.5rem;
  font-style: italic;
  line-height: 0.85;
  margin-right: 0.2em;
  margin-top: 0.1em;
  color: rgb(var(--primary));
}

/* ─── Card images — padding + matched border-radius ─────────────────────────── */

[data-component-part="card-image"] {
  height: 180px !important;
  padding: 0.75rem 0.75rem 0 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

[data-component-part="card-image"] img {
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
  border-radius: inherit !important;
}

/* ─── Card titles + content ─────────────────────────────────────────────────── */

[data-component-part="card-title"] {
  font-family: 'Instrument Serif', serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
}

[data-component-part="card-content"] {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

/* ─── Muted link (grey, no primary color bleed) ────────────────────────────── */

a.muted-link,
a.muted-link:visited {
  color: #9ca3af !important;
  text-decoration-color: #9ca3af !important;
  font-weight: 400 !important;
}

a.muted-link:hover {
  color: #6b7280 !important;
  text-decoration-color: #6b7280 !important;
}