/* 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) ------------------------------ */

.nn-home { max-width: 1120px; margin: 0 auto; padding: clamp(40px, 9vh, 110px) 24px 80px; }
.nn-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font-family: var(--fonts-monospace); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--color-text-light-3);
}
.nn-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.nn-title {
  margin: 0; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: .98; font-weight: 500;
  letter-spacing: -.045em; color: var(--color-text); max-width: 14ch;
}
.nn-title em { font-style: normal; color: var(--color-primary); }
.nn-lede { margin: 26px 0 0; max-width: 56ch; font-size: 1.12rem; line-height: 1.6; color: var(--color-text-light); }
.nn-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; }
.nn-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px;
  font-weight: 500; letter-spacing: -.01em; text-decoration: none !important; transition: transform .2s, background .2s;
}
.nn-pill::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nn-pill.dark { background: var(--color-text); color: #fff !important; }
.nn-pill.dark:hover { background: var(--color-primary); transform: translateY(-1px); }
.nn-pill.line { box-shadow: 0 0 0 1px var(--color-secondary-dark-3) inset; color: var(--color-text) !important; }
.nn-pill.line:hover { box-shadow: 0 0 0 1px var(--color-primary) inset; color: var(--color-primary) !important; }

.nn-stroke { position: absolute; right: -2vw; top: 8vh; width: min(30vw, 380px); height: auto; pointer-events: none; opacity: .95; }
.nn-stroke path { fill: none; stroke: var(--color-primary); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: nn-draw 2.2s cubic-bezier(.16, 1, .3, 1) .3s forwards; }
@keyframes nn-draw { to { stroke-dashoffset: 0; } }
.nn-hero { position: relative; }

.nn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 72px 0 0;
  border-top: 1px solid var(--color-secondary); }
.nn-fact { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--color-secondary); }
.nn-fact b { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; color: var(--color-text); }
.nn-fact span { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.5; color: var(--color-text-light-2); }

.nn-clone { margin: 56px 0 0; }
.nn-clone h2 { margin: 0 0 14px; font-size: 11px; font-family: var(--fonts-monospace); letter-spacing: .26em;
  text-transform: uppercase; color: var(--color-text-light-3); font-weight: 400; }
.nn-clone pre {
  margin: 0 0 10px; padding: 16px 18px; border-radius: 12px; overflow-x: auto;
  background: #0a0b0f; color: #e9eeff; font: 13px/1.6 var(--fonts-monospace);
}
.nn-clone pre .p { color: #66ffff; user-select: none; }

@media (max-width: 760px) {
  .nn-stroke { display: none; }
  .nn-facts { grid-template-columns: 1fr; }
}