www.unturf.com/css/unturf.css

/* ============================================================
   unturf. shared stylesheet
   ============================================================ */

:root {
  --primary: #43a047;
}

/* ---- brand ---- */
.unturf-brand {
  font-family: 'chunkfiveregular', sans-serif;
}

.site-title {
  font-family: 'chunkfiveregular', sans-serif;
  margin-bottom: 0px;
}

.nav-links {
  margin-bottom: 2em;
}

.content-wide {
  max-width: 960px;
}

.content-narrow {
  max-width: 460px;
}

/* ---- diagrams ---- */
.diagram {
  margin: 1.5em 0;
  text-align: center;
}

.diagram img {
  max-width: 100%;
  height: auto;
}

.diagram figcaption {
  font-size: 0.85em;
  color: #888;
  margin-top: 0.5em;
}

/* ---- step labels ---- */
.step-label {
  display: inline-block;
  background: #263238;
  color: #CDDC39;
  padding: 0.2em 0.6em;
  font-size: 0.8em;
  margin-bottom: 0.5em;
}

/* ---- honest box (warnings / caveats) ---- */
.honest-box {
  border-left: 4px solid #F44336;
  padding: 0.5em 1em;
  margin: 1em 0;
  background: rgba(244, 67, 54, 0.05);
}

.honest-box b {
  color: #F44336;
}

/* ---- footnotes ---- */
sup a {
  text-decoration: none;
  color: #CDDC39;
  font-weight: bold;
}

sup a:hover {
  text-decoration: underline;
}

.footnotes {
  font-size: 0.85em;
  line-height: 1.6;
}

.footnotes ol {
  padding-left: 1.5em;
}

.footnotes li {
  margin-bottom: 0.75em;
}

.footnotes li:target {
  background: rgba(205, 220, 57, 0.1);
  padding: 0.25em;
  border-left: 3px solid #CDDC39;
}

/* ---- capital cards (eight forms of capital) ---- */
.capital-card {
  border-left: 4px solid var(--primary);
  padding: 0.5em 1em;
  margin: 1em 0;
}

.capital-card h4 {
  margin-bottom: 0.25em;
}

.capital-card--living       { border-color: #4CAF50; }
.capital-card--living h4    { color: #4CAF50; }
.capital-card--material     { border-color: #795548; }
.capital-card--material h4  { color: #795548; }
.capital-card--financial    { border-color: #607D8B; }
.capital-card--financial h4 { color: #607D8B; }
.capital-card--intellectual       { border-color: #2196F3; }
.capital-card--intellectual h4    { color: #2196F3; }
.capital-card--experiential       { border-color: #009688; }
.capital-card--experiential h4    { color: #009688; }
.capital-card--social       { border-color: #FF9800; }
.capital-card--social h4    { color: #FF9800; }
.capital-card--cultural     { border-color: #9C27B0; }
.capital-card--cultural h4  { color: #9C27B0; }
.capital-card--spiritual    { border-color: #E91E63; }
.capital-card--spiritual h4 { color: #E91E63; }

/* ---- recipe page ---- */
.recipe-box {
  border-left: 4px solid #4CAF50;
  padding: 0.5em 1em;
  margin: 1em 0;
  background: rgba(76, 175, 80, 0.05);
}

.recipe-box b {
  color: #4CAF50;
}

.warning-box {
  border-left: 4px solid #FF9800;
  padding: 0.5em 1em;
  margin: 1em 0;
  background: rgba(255, 152, 0, 0.05);
}

.warning-box b {
  color: #FF9800;
}

/* ---- software page ---- */
.software-page * {
  box-sizing: border-box;
}

.software-page body {
  overflow-x: hidden;
}

.software-page h1,
.software-page h2 {
  font-family: 'chunkfiveregular', sans-serif;
}

.software-page h1 a,
.software-page h2 a {
  color: inherit;
  text-decoration: none;
}

.unsandbox-logo {
  font-family: ArialPixel, system-ui, sans-serif;
  color: #c4b550;
}

.neopig-logo {
  font-family: system-ui, sans-serif;
  font-weight: 900;
  background: linear-gradient(135deg, #ff6b6b, #ff8e53, #ff6b9d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.software-page hgroup {
  margin-bottom: 1rem;
}

.software-page hgroup p {
  margin-top: 0;
}

.logo-container a {
  display: block;
}

.logo-container {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 8px;
  display: inline-block;
  max-width: 100%;
}

@media (prefers-color-scheme: light) {
  .logo-container {
    background: rgba(0, 0, 0, 0.03);
  }
}

.software-page article {
  margin-bottom: 1rem;
}

.software-page article h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.software-page article p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.software-page article img {
  max-width: 100%;
  height: auto;
  display: block;
}

.software-page article nav ul {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: 0;
  margin: 0.5rem 0;
}

.software-page article nav ul li a {
  font-size: 0.85rem;
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1rem;
  }

  .project-uncloseai {
    grid-column: 1 / -1;
  }

  .software-page article nav ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .project-makepostsell nav ul,
  .project-remarkbox nav ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .logo-container {
    max-width: 400px;
  }
}