/* ==================================================================== *
 * hashcat.net, refreshed.
 *
 * Same markup, same words, same palette. What changes is typography,
 * spacing and layout: the fixed 720px column becomes a grid that works
 * on a phone, the 11px Bitstream Vera becomes the reader's own system
 * font at a readable size, and the download table gets the weight it
 * deserves as the thing most visitors came for.
 * ==================================================================== */

:root
{
  color-scheme: light dark;

  --bg:            #ffffff;
  --surface:       #fbfbfa;
  --text:          #1a1d21;
  --muted:         #6b7177;
  --title:         #0b0d0f;
  --link:          #4a5157;
  --rule:          #e4e4e2;
  --rule-soft:     #efefed;
  --accent:        #067306;
  --accent-soft:   #eef7ee;
  --highlight:     #fdf4e0;
  --shadow:        0 1px 2px rgba(16,18,20,.05), 0 8px 24px -12px rgba(16,18,20,.14);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --logo:    url(/s/i/hashcat-icon.png);
  --bullet:  url(/s/i/point.png);
}

@media (prefers-color-scheme: dark)
{
  :root
  {
    --bg:          #14161a;
    --surface:     #1a1d22;
    --text:        #d7dade;
    --muted:       #949ba3;
    --title:       #f0f2f4;
    --link:        #aab2bb;
    --rule:        #2c3138;
    --rule-soft:   #23272d;
    --accent:      #7ec27e;
    --accent-soft: #18221a;
    --highlight:   #2d2a21;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
    --bullet:      url(/s/i/point-dark.png);
  }
}

*, *::before, *::after {box-sizing: border-box;}

html
{
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body
{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a
{
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
a:hover {color: var(--title); border-bottom-color: var(--accent);}
a:focus-visible
{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- layout ---------- */

.bdin
{
  max-width: 990px;
  margin: 0 auto;
  padding: 40px 24px 88px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  /* row 1 is sized by the brand, row 2 takes whatever the content needs.
     Without the explicit 1fr the content, which spans both rows, splits its
     height between them and pushes the navigation thousands of pixels down. */
  grid-template-rows: auto 1fr;
  grid-template-areas: "brand main" "nav main";
  column-gap: 44px;
  align-items: start;
  background: none;
  min-height: 0;
}

.header    {grid-area: brand; position: static; width: auto; height: auto;}
.sidebar_l {grid-area: nav;   position: sticky; top: 32px; width: auto;}
.content   {grid-area: main;  margin: 0; width: auto;}
.social, .sidebar_r {display: none;}

/* ---------- brand ---------- */

.header
{
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  background: none;
  margin-bottom: 28px;
}
.header hr {display: none;}
.header h1 {margin: 0; font-size: inherit; font-weight: normal;}
.header h1 a
{
  display: block;
  padding: 0;
  color: inherit;
  border: 0;
  padding-top: 144px;
  background: var(--logo) 0 0 / 128px 128px no-repeat;
}
.header h1 a:hover {color: inherit;}
.header h1 span
{
  display: block;
  margin: 0 0 2px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--title);
  font-family: var(--sans);
}
.header h1 span i {display: none;}

/* ---------- navigation ---------- */

.navigation h2 {display: none;}
.navigation ul {margin: 0; padding: 0; list-style: none;}
.navigation ul li {margin: 0 0 2px; padding: 0; background: none;}
.navigation ul li::before {display: none;}   /* the generic list bullet must not leak into the nav */
.navigation a
{
  display: block;
  width: auto;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--link);
  transition: background .15s ease, color .15s ease;
}
.navigation a:hover {background: var(--surface); color: var(--title);}
.navigation ul li.open > a
{
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  padding: 7px 12px;
  border: 0;
}

/* ---------- sections ---------- */

.content .section {margin: 0 0 34px; padding: 0;}
.content .section h2
{
  margin: 0 0 14px;
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
/* A page whose whole content is a single notice uses its h2 as the page
   title, not as a section label, so it keeps sentence case and the title
   colour instead of the small uppercase treatment. */
.content .section.pagehead h2
{
  margin: 0 0 18px;
  padding: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--title);
  border-bottom: 0;
}

h3 {font-size: 15px; font-weight: 600; color: var(--title); margin: 1.6em 0 .5em;}
p  {margin: 0 0 1em;}

/* ---------- lists ---------- */

ul {margin: 0 0 1em; padding: 0; list-style: none;}
ul li
{
  position: relative;
  margin: 0 0 2px;
  padding-left: 18px;
  background: none;
}
ul li::before
{
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rule);
}
ul li.gap-after {margin-bottom: 1.3em;}

/* ---------- tables, the download list above all ---------- */

table
{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 1em;
  font-size: 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow);
}
caption
{
  text-align: left;
  font-weight: 600;
  color: var(--title);
  padding-bottom: .6em;
}
th
{
  background: var(--surface);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--rule);
}
td
{
  font-family: var(--mono);
  font-size: 13px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  color: var(--text);
}
tr:last-child td {border-bottom: 0;}
tbody tr {transition: background .12s ease;}
tbody tr:hover td {background: var(--surface);}
td.nodata {border: 0;}
td[align=right] {text-align: right;}

/* ---------- the signing key line ---------- */

/* One long unbreakable fact: a key id and a 40 digit fingerprint, 132
   characters that cannot be split anywhere useful. At the body size it runs
   past the column and wraps, so it gets a size of its own. Past 1224px the
   content column stops growing at 928px, which 13px clears comfortably, and
   below that 11px is the largest that still fits a 1024px window. */

.pgpkey {font-size: 11px; color: var(--muted);}

/* ---------- the algorithm list ---------- */

/* 485 hash modes in two columns. The longest name is 55 characters, so this is
   sized from that: monospace keeps every column the same width per character,
   and the bullet is dropped because its indent costs 18px of the little room
   each column has. */

#features-algos ul
{
  column-gap: 24px !important;
  margin-bottom: 1.4em;
}

/* The page is 990px like the forum and the wiki, so the content column is a
   constant 718px on any desktop and each of the two algorithm columns is
   347px. The longest mode name is 55 characters, which at monospace needs
   about 0.602em each, so 10px is the largest size that fits all 485 of them
   without a wrap. Sizing this off the viewport would be wrong now: the column
   no longer grows with the window. */

#features-algos ul li
{
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
  margin: 0;
  padding-left: 0;
  float: none;
  width: auto;
  break-inside: avoid;
}

#features-algos ul li::before {display: none;}

/* Below this the page stops being 990px wide and each column drops under the
   347px a 55 character name needs, so the list runs as one. */
@media (max-width: 1000px)
{
  #features-algos ul {column-count: 1 !important;}
}

/* ---------- inline emphasis ---------- */

#features .features li b,
#features-algos b,
#features-attackmodes b
{
  font-weight: 500;
  background: var(--highlight);
  border: 0;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}
#features .special {color: var(--accent); font-family: var(--sans); font-weight: 600; float: none; width: auto;}
#features .features li.lite {color: var(--accent); font-family: var(--sans); font-weight: 600;}
sup {color: var(--accent);}

/* ---------- buttons ---------- */

#help ul {display: flex; flex-wrap: wrap; gap: 10px; height: auto; margin: 0 0 1.2em;}
#help ul li {margin: 0; padding: 0; width: auto; float: none; text-align: left;}
#help ul li::before {display: none;}
#help ul li a, a.button
{
  display: inline-block;
  width: auto;
  padding: 9px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--title);
  font-size: 14px;
  font-weight: 500;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
#help ul li a:hover, a.button:hover
{
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-1px);
}
#help p {clear: none; margin-top: 1em !important;}

/* ---------- screenshot ---------- */

.content .image img, #screenshot img
{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
}

/* ---------- alerts ---------- */

.error
{
  background: var(--highlight);
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin: 0 0 16px;
  padding: 14px 16px;
}

/* ---------- panels used by the converter pages ---------- */

#email, #cap2hccap, #cap2hccapx, #cap2hashcat, #trac, #notfound
{
  position: static;
  width: auto;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px;
}
#email table, #cap2hashcat table {background: none; box-shadow: none;}

/* The utility pages are notices and forms rather than the front page, so they
   run a notch smaller than the main page does. */
.content .section.pagehead            {font-size: 13px;}
.content .section.pagehead h2         {font-size: 18px;}
.content .section.pagehead input[type=text],
.content .section.pagehead input[type=email],
.content .section.pagehead input[type=file],
.content .section.pagehead textarea,
.content .section.pagehead input[type=submit] {font-size: 13px;}

/* A link in running text was quieter than the text around it, because --link
   sits below --text in both palettes. Inline links take the accent colour and
   an underline so they read as links. Buttons keep their own treatment. */
.content .section a:link,
.content .section a:visited           {color: var(--accent);}
.content .section p a, .content .section li a
{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.content .section p a:hover,
.content .section li a:hover          {text-decoration-thickness: 2px;}

.content .section a.button:link,
.content .section a.button:visited    {color: var(--title); text-decoration: none;}
.content .section a.button:hover      {color: var(--accent);}

/* A contact form is a utility, not a landing page. The panel wraps the form
   instead of running the full width of the column, which stopped it reading as
   the most important thing on the site. */
.content .section#email                {max-width: 500px; padding: 15px;}
.content .section#email h2             {font-size: 15px; margin-bottom: 14px;}
.content .section#email .form label    {font-size: 12px;}

/* A credit line under a borrowed image. */
.credit {font-size: 12px; color: var(--muted);}
.credit a:link, .credit a:visited {color: var(--muted);}

/* ---------- forms ---------- */

.form {display: grid; gap: 12px; max-width: 460px;}
.form p {margin: 0;}
.form label
{
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--title);
}
.form .req {color: var(--accent); font-weight: 400;}

input[type=text], input[type=email], input[type=file], textarea, select
{
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 7px 10px;
}
textarea {min-height: 110px; resize: vertical;}
input[type=file] {background: var(--surface); cursor: pointer;}

input[type=text]:focus, input[type=email]:focus, textarea:focus
{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type=submit], button
{
  justify-self: start;
  display: inline-block;
  width: auto;
  padding: 7px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--title);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
input[type=submit]:hover, button:hover
{
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- rules, and output from the converter ---------- */

.content hr
{
  height: 1px;
  margin: 22px 0;
  border: 0;
  background: var(--rule);
}

pre
{
  margin: 0 0 1em;
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- phones and small tablets ---------- */

@media (max-width: 880px)
{
  .bdin
  {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "nav" "main";
    padding: 28px 18px 64px;
    row-gap: 0;
  }

  .header {margin-bottom: 18px;}
  .header h1 a {padding-top: 0; padding-left: 60px; min-height: 48px; background-size: 48px 48px;}
  .header h1 span {font-size: 22px;}

  .sidebar_l {position: static; margin: 0 0 26px;}
  .navigation ul {display: flex; flex-wrap: wrap; gap: 6px;}
  .navigation ul li {margin: 0;}
  .navigation a {padding: 6px 12px; font-size: 14px;}

  .content {max-width: none;}
  .content .section {margin-bottom: 34px;}

  /* wide tables scroll rather than overflow the screen */
  table {display: block; overflow-x: auto; white-space: nowrap; border-radius: 8px;}
}

@media (max-width: 420px)
{
  body {font-size: 14.5px;}
  .bdin {padding: 22px 14px 56px;}
}

/* ---------- respect reduced motion ---------- */

@media (prefers-reduced-motion: reduce)
{
  * {transition: none !important; scroll-behavior: auto !important;}
  a.button:hover, #help ul li a:hover {transform: none;}
}