/* NØNOS, for git.nonos.software.
 *
 * The forge in the site's own language: the same ground, the same ink, the
 * same house blue, the same two typefaces. It is built on Forgejo's light
 * theme and changes what that theme exposes as tokens, so every page Forgejo
 * renders, including the ones nobody thought to check, comes out in NØNOS
 * colours rather than a mixture.
 *
 * A forge is dense in a way a website is not, so the site's 28px radius and
 * pill everything become a 10px radius and pills only on the primary action.
 * The blue is used the way the site uses it: for the thing you should press
 * and for where you are, and nowhere else.
 */
@import url("/assets/css/theme-forgejo-light.css");

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/GeistVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Type */
  --fonts-proportional: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonts-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --border-radius: 10px;
  --border-radius-medium: 12px;

  /* The house blue, and a scale built from it rather than picked by eye. */
  --color-primary: #2438ff;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #1f31e6;
  --color-primary-dark-2: #1a2acc;
  --color-primary-dark-3: #1624b3;
  --color-primary-dark-4: #131f99;
  --color-primary-dark-5: #101a80;
  --color-primary-dark-6: #0d1566;
  --color-primary-dark-7: #0a104d;
  --color-primary-light-1: #3d4fff;
  --color-primary-light-2: #5563ff;
  --color-primary-light-3: #7480ff;
  --color-primary-light-4: #939cff;
  --color-primary-light-5: #b3b9ff;
  --color-primary-light-6: #d3d6ff;
  --color-primary-light-7: #eef0ff;
  --color-primary-alpha-10: #2438ff19;
  --color-primary-alpha-20: #2438ff33;
  --color-primary-alpha-30: #2438ff4b;
  --color-primary-alpha-40: #2438ff66;
  --color-primary-alpha-50: #2438ff80;
  --color-primary-alpha-60: #2438ff99;
  --color-primary-alpha-70: #2438ffb3;
  --color-primary-alpha-80: #2438ffcc;
  --color-primary-alpha-90: #2438ffe1;
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);
  --color-accent: var(--color-primary);
  --color-small-accent: var(--color-primary-light-6);
  --color-highlight-fg: var(--color-primary-light-4);
  --color-highlight-bg: var(--color-primary-light-7);
  --color-reaction-active-bg: var(--color-primary-alpha-20);
  --color-reaction-hover-bg: var(--color-primary-alpha-30);
  --color-indicator-active: var(--color-primary);
  --color-blue: #2438ff;
  --color-blue-light: #3d4fff;
  --color-teal: #0aa5a5;

  /* Ground, surfaces and ink: the site's #f2f3f7 and #0a0b0d. */
  --color-body: #f4f6fa;
  --color-box-body: #ffffff;
  --color-box-body-highlight: #eef0ff;
  --color-box-header: #f7f8fb;
  --color-header-wrapper: #f4f6fa;
  --color-header-wrapper-transparent: #f4f6fa00;
  --color-card: #ffffff;
  --fancy-card-bg: #ffffff;
  --fancy-card-border: #e3e6ee;
  --color-footer: #f2f3f7;
  --color-menu: #ffffff;
  --color-secondary-bg: #f7f8fb;
  --color-nav-bg: rgba(244, 246, 250, .86);
  --color-nav-hover-bg: rgba(10, 11, 13, .05);
  --color-secondary-nav-bg: #f4f6fa;
  --color-text-dark: #000000;
  --color-text: #0a0b0d;
  --color-text-light: #45474d;
  --color-text-light-1: #55575d;
  --color-text-light-2: #66686e;
  --color-text-light-3: #7d7f86;
  --color-placeholder-text: #9a9ca3;
  --color-caret: #2438ff;

  /* Hairlines, not borders. */
  --color-secondary: #e3e6ee;
  --color-secondary-dark-1: #dde1ea;
  --color-secondary-dark-2: #d6dae4;
  --color-secondary-dark-3: #cdd2de;
  --color-secondary-dark-4: #b9bfcd;
  --color-secondary-dark-5: #a2a9b8;
  --color-secondary-dark-6: #8a92a3;
  --color-secondary-dark-7: #737b8d;
  --color-secondary-dark-8: #5d6576;
  --color-secondary-dark-9: #4a5162;
  --color-secondary-dark-10: #393f4d;
  --color-secondary-dark-11: #2b303b;
  --color-secondary-dark-12: #1d2129;
  --color-secondary-dark-13: #12151b;
  --color-secondary-light-1: #e9ecf2;
  --color-secondary-light-2: #f0f2f6;
  --color-secondary-light-3: #f4f6fa;
  --color-secondary-light-4: #f9fafc;
  --color-light-border: rgba(10, 11, 13, .10);
  --color-timeline: #e3e6ee;
  --color-input-text: #0a0b0d;
  --color-input-background: #ffffff;
  --color-input-border: #d6dae4;
  --color-input-border-hover: #b9bfcd;
  --color-button: #eef0f5;
  --color-hover: rgba(36, 56, 255, .06);
  --color-active: rgba(36, 56, 255, .10);
  --color-expand-button: #e3e6ee;
  --color-label-bg: rgba(10, 11, 13, .06);
  --color-label-hover-bg: rgba(10, 11, 13, .10);
  --color-label-active-bg: rgba(10, 11, 13, .16);

  /* Code and markup */
  --color-code-bg: #f7f8fb;
  --color-markup-code-block: #f4f6fa;
  --color-markup-code-inline: #eceff5;
  --color-editor-line-highlight: #f4f6fa;
  --color-selection-bg: #2438ff;
  --color-selection-fg: #ffffff;
  --color-tooltip-bg: #0a0b0df2;
  --color-overlay-backdrop: rgba(10, 11, 13, .55);
  --color-shadow: rgba(10, 11, 13, .18);
}

/* ---- Type ---------------------------------------------------------------- */

body { letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .ui.header { letter-spacing: -.02em; }
h1.ui.header, .ui.huge.header { letter-spacing: -.035em; }
code, pre, kbd, .ui.label.mono, .sha, .commit-id, .ui.sha.label { font-family: var(--fonts-monospace); }

/* The site's signature: a hairline of house blue across the top of the page. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 1000;
  background: linear-gradient(90deg, #2438ff 0%, #2438ff 62%, #66ffff 100%);
  pointer-events: none;
}

/* ---- The bar ----------------------------------------------------------- */

#navbar {
  background: var(--color-nav-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--color-light-border);
  min-height: 56px;
}
#navbar .item { font-weight: 500; letter-spacing: -.01em; }
#navbar #navbar-logo img { width: 26px; height: 29px; }
#navbar .item.active, #navbar a.item:hover { background: var(--color-nav-hover-bg); }

/* ---- Buttons: pills for the action, quiet for everything else ----------- */

.ui.primary.button, .ui.primary.buttons .button {
  border-radius: 999px; font-weight: 500; letter-spacing: -.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -8px rgba(36, 56, 255, .55);
}
.ui.button { font-weight: 500; }
.ui.basic.button, .ui.basic.buttons .button { box-shadow: 0 0 0 1px var(--color-secondary-dark-2) inset; }

/* ---- Surfaces ------------------------------------------------------------ */

.ui.segment, .ui.attached.segment, .ui.table, .ui.form .fields .field .ui.input,
.repository .ui.segment, .ui.menu:not(.secondary):not(.text):not(.tabular) {
  border-color: var(--color-secondary);
}
.ui.attached.header, .ui.top.attached.header { background: var(--color-box-header); }
.ui.cards > .card, .ui.card { box-shadow: 0 0 0 1px var(--color-secondary); border-radius: 12px; }

/* Where you are: underline in blue, the way the site marks the current section. */
.ui.secondary.pointing.menu .active.item, .ui.tabular.menu .active.item {
  border-color: var(--color-primary) !important; color: var(--color-text) !important; font-weight: 600;
}

/* ---- Lists: rows on a hairline, metadata in the mono -------------------- */

.flex-list > .flex-item { border-color: var(--color-secondary); padding-block: 14px; }
.flex-item-title { font-weight: 600; letter-spacing: -.01em; }
.flex-item-body, .flex-item .flex-text-block.text.grey { font-size: .92em; }
.repo-list .flex-item-trailing, .flex-item-trailing { font-family: var(--fonts-monospace); font-size: .78em; }

/* ---- Labels and tags ----------------------------------------------------- */

.ui.label { border-radius: 999px; font-weight: 500; }
.ui.basic.label { border-color: var(--color-secondary-dark-2); }

/* ---- Markdown: the READMEs are pages, and read like the site's ---------- */

.markup { font-size: 15.5px; line-height: 1.65; }
.markup h1, .markup h2 { border-bottom-color: var(--color-secondary) !important; letter-spacing: -.03em; }
.markup h1 { font-size: 2em; }
.markup a { color: var(--color-primary); }
.markup blockquote { border-left: 3px solid var(--color-primary); color: var(--color-text-light); }
.markup pre, .markup code { border-radius: 8px; }
.markup table tr:nth-child(2n) { background: var(--color-secondary-light-4); }

/* ---- Links ---------------------------------------------------------------- */

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark-2); }

/* ---- Footer --------------------------------------------------------------- */

.page-footer {
  background: var(--color-footer); border-top: 1px solid var(--color-secondary);
  font-size: .86em; color: var(--color-text-light-2);
}
.page-footer a { color: var(--color-text-light); }
.page-footer a:hover { color: var(--color-primary); }

/* ---- The landing page (templates/home.tmpl) ------------------------------
   The nonos.software homepage, at the same scale: the display headline with
   the blue arc behind it, the lede and pills on the right, then sections of
   a small mono label, a large statement and the body in the right column.
   The pinned repositories are listed the way the site's menu lists pages,
   and the page closes on the wordmark, as the site does. */

.nn-home { position: relative; overflow: hidden; padding: 0 clamp(20px, 4vw, 56px) 40px; }
.nn-home [hidden] { display: none !important; }

.nn-arc { position: absolute; left: 0; top: 0; width: 46vw; height: 94vh; z-index: 0; pointer-events: none; }
.nn-arc path { fill: none; stroke: var(--color-primary); stroke-width: 46; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: nn-draw 2.4s cubic-bezier(.16, 1, .3, 1) .2s forwards; }
@keyframes nn-draw { to { stroke-dashoffset: 0; } }

.nn-n { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px;
  font-family: var(--fonts-monospace); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--color-text-light-3); }
.nn-n::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }

.nn-hero { position: relative; z-index: 1; display: grid; padding: clamp(80px, 16vh, 180px) 0 clamp(60px, 10vh, 120px); }
.nn-hero-head { padding-left: 34vw; }
.nn-display { margin: 0; font-weight: 500; font-size: clamp(3rem, 8.4vw, 9.4rem); line-height: .92;
  letter-spacing: -.045em; color: var(--color-text); }
.nn-display em { font-style: normal; color: var(--color-primary); }
.nn-hero-side { justify-self: end; max-width: 44rem; margin-top: 8vh; display: grid; gap: 28px; justify-items: start; }
.nn-lede { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.7rem); line-height: 1.35; letter-spacing: -.01em; color: var(--color-text); }
.nn-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.nn-pill { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 999px;
  font-weight: 500; font-size: .95rem; letter-spacing: .01em; text-decoration: none !important;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s, color .25s; }
.nn-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.nn-pill.dark { background: #16181d; color: #fff !important; }
.nn-pill.light { background: #fff; color: var(--color-text) !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .03); }
.nn-pill:hover { background: var(--color-primary); color: #fff !important; }
.nn-pill:hover i { transform: scale(1.5); }

/* Sections: label, statement across the page, body in the right column. */
.nn-s { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px;
  padding: clamp(64px, 12vh, 140px) 0 0; }
.nn-s .nn-n, .nn-s h2 { grid-column: 1 / -1; }
.nn-s h2 { margin: 0 0 26px; max-width: 24ch; font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: .98;
  font-weight: 500; letter-spacing: -.04em; color: var(--color-text); }
.nn-s > p:last-child { grid-column: 2; margin: 0; max-width: 36rem; font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.45; color: var(--color-text-light); }

/* Pinned, listed like the site's menu: the name large, the facts small. */
.nn-list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-secondary-dark-2); }
.nn-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: clamp(14px, 2.2vh, 22px) 0; border-bottom: 1px solid var(--color-secondary-dark-2);
  color: var(--color-text) !important; text-decoration: none !important; }
.nn-list span { font-weight: 500; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.045em;
  transition: color .3s, transform .5s cubic-bezier(.16, 1, .3, 1); }
.nn-list small { font-family: var(--fonts-monospace); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--color-text-light-3); text-align: right; }
.nn-list a:hover span { color: var(--color-primary); transform: translateX(10px); }

.nn-clone pre { grid-column: 1 / -1; margin: 0 0 10px; padding: 18px 20px; border-radius: 14px; overflow-x: auto;
  background: #0a0b0f; color: #e9eeff; font: 13px/1.6 var(--fonts-monospace); }
.nn-clone pre .p { color: #66ffff; user-select: none; }

/* The close, as the site closes: the wordmark, with the Ø in blue. */
.nn-word { position: relative; z-index: 1; margin: clamp(80px, 14vh, 160px) 0 0 -.04em; font-weight: 600;
  font-size: clamp(5rem, 19.6vw, 21rem); line-height: .82; letter-spacing: -.06em; color: var(--color-text); user-select: none; }
.nn-word b { color: var(--color-primary); font-weight: 600; }

/* The bar: Forgejo's Help link points off-site; the site link replaces it. */
#navbar a[href*="forgejo.org"] { display: none !important; }

@media (max-width: 900px) {
  .nn-hero { padding: clamp(40px, 7vh, 72px) 0 8px; }
  .nn-hero-head { padding-left: 0; }
  .nn-display { font-size: clamp(3rem, 15vw, 6rem); line-height: .94; }
  .nn-hero-side { justify-self: stretch; max-width: none; margin-top: 32px; gap: 22px; }
  .nn-arc { display: none; }
  .nn-s { grid-template-columns: minmax(0, 1fr); padding-top: 72px; }
  .nn-s h2 { font-size: clamp(2rem, 8.6vw, 3.2rem); margin-bottom: 18px; }
  .nn-s > p:last-child { grid-column: 1; }
  .nn-list a { flex-direction: column; gap: 8px; }
  .nn-list span { font-size: clamp(1.9rem, 9vw, 3rem); }
  .nn-list small { text-align: left; }
  .nn-word { margin-top: 80px; font-size: clamp(5rem, 26vw, 14rem); }
}

/* Phones: the two actions become full-width buttons of one size, and the
   clone commands wrap instead of hiding their ends off the screen. */
@media (max-width: 520px) {
  .nn-home { padding: 0 20px 24px; }
  .nn-acts { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 10px; }
  .nn-pill { justify-content: space-between; height: 54px; }
  .nn-n { margin-bottom: 18px; }
  .nn-clone pre { white-space: pre-wrap; word-break: break-all; font-size: 12px; }
}
}