stylus-leg-br

stylus-leg-br.css

@import url('https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css');

:root {
  color-scheme: light dark;
  --body-color: light-dark(hsl(0 45 15), hsl(0 0 95));
  --body-background: light-dark(white, hsl(220 5 10));
  --title-color: light-dark(#555, hsl(100 0 90));
  --subtitle-color: light-dark(rgb(102, 102, 102), hsl(100 0 80));
  --link-color: light-dark(#1351b4, #61afef);
  --link-color-hover: light-dark(#1351b4, white);
  --link-background-hover: light-dark(#d9e3f3, #296799);
  --dou-color: light-dark(red, red);
}

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

* {
  margin: 0;
  font: 500 1rem/1.5 Rawline, system-ui, sans-serif;
  color: var(--body-color);
}

::selection {
  background: #61afef;
  color: #162937;
}

body {
  max-width: 48rem;
  margin-inline: auto;
  padding: 1rem;
  background: var(--body-background);
}

a, a:visited {
  color: var(--link-color);
  
  &:hover {
    background: var(--link-background-hover);
    color: var(--link-color-hover);
  }
  
  font, font small {
    color: var(--link-color);
  }
  
  font:hover, font small:hover {
    background: var(--link-background-hover);
    color: var(--link-color-hover);
  }
}

p {
  margin: 0 0 1.5rem;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

table {
  min-width: 100%;
  border-collapse: collapse;
}

/* cabeçalho */

table:first-child {
  margin-bottom: 1rem;
  
  p {
    margin: 0;
  }
  
  tr {
    display: flex;
    flex-direction: column;
    place-content: center;
    gap: 1rem;
  }
  
  td {
    min-width: 100%;
    height: auto;
  }
  
  /* brasão */
  td:first-child img {
    display: block;
    width: 100px;
    height: 100px;
    content: url('https://upload.wikimedia.org/wikipedia/commons/b/bf/Coat_of_arms_of_Brazil.svg');
    background-size: cover;
    background-position: center;
    opacity: .9;
  }
  
  /* título */
  td:nth-child(2) font {
    big {
      font-family: "Times New Roman", Times, serif;
      font-size: 2rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--title-color);
    }
    
    /* subtítulo */
    strong {
      color: var(--subtitle-color);
    }
  }
}

/* ementa */
table:nth-child(4) font[color='#800000'] {
  color: var(--subtitle-color);
}

/* footer dou */
font[color='#ff0000'] {
  color: var(--dou-color);
}