apollo-light.css

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,300;1,700&display=swap');

@import "apollo-colors.css";
@import "anatomy.css";

:root {
  --body-font-family: Source Sans Pro,sans-serif;
  background: var(--body-background-color);
  color: var(--body-text-color);
  --body-background-color: #FFF;
  --body-text-color: var(--grey-dark);
  --button-background-color: var(--grey-darker);
  --highlight-border-color: var(--yellow-base);
  --highlight-background: none;
}


/*** Header ***/
header > h1 {
  color: var(--black-lighter);
  text-align: center;
  font-size: 250%;
  margin-bottom: 0;
  margin-top: 1em !important;
}

header h2 {
  font-size: 150%;
  font-style: italic;
  color: var(--black-lighter);
  margin-top: 0;
  text-align: center;
}

.spec-data {
  margin: auto;
}

.spec-data td {
  border: 0;
  color: var(--grey-dark);
}

.spec-data td:first-of-type {
  color: var(--grey-dark);
  font-style: italic;
  text-align: right;
}

.spec-data td:first-of-type::after {
  content: ": ";
}

/*** Headers & Text ***/

h1,h2,h3,h4,h5,h6 {
  color: var(--black-lighter);
}

h1 {
  margin-top: 2rem;
}

h2 {
  margin-top: 2rem;
}

a {
  color: var(--indigo-dark);
}

.spec-note {
  background: none;
  border-color: var(--yellow-base);
}

.spec-note > a:first-of-type {
  color: var(--yellow-dark);
}

/*** Table of Contents ***/
/***** Inline TOC ******/
.spec-secid a {
  color: var(--indigo-dark);
}

/***** Sidebar ******/
.spec-sidebar {
  background: none;
  backdrop-filter: blur(25px);
  box-shadow: none !important;
  left: 0;
}

@media (min-width: 1220px) {
  .spec-sidebar {
    backdrop-filter: none;
  }
}

article {
  display: table;
  margin: auto;
  box-sizing: border-box;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
}

p {
  max-width: calc(100vw - 2em);
}

figure {
  max-width: calc(100vw - 2em);
}

@media (min-width: 720px) {
  article {
    margin-left: auto;
  }
}

@media (min-width: 1220px) {
  article {
    padding-left: calc(50vw - var(--sidebar-width) + 5rem);
    margin-left: auto;
    margin-right: calc(50vw - var(--sidebar-width));
  }
}

@media (min-width: 1500px) {
  article {
    padding-left: calc(50vw - var(--sidebar-width));
  }
}

body {
  padding: 0 !important;
  margin: 0 !important;
}

.spec-sidebar .viewing > a::after {
  color: var(--yellow-base)
}

/*** Figures ***/
figure {
  border-color: transparent;
}

.spec-example {
  border-color: var(--indigo-lighter);
}

.spec-counter-example {
  border-color: var(--red-light);
}

.spec-counter-example > figcaption > a {
  color: var(--red-light);
}

.spec-example > figcaption > a {
  color: var(--indigo-light);
}

.spec-example > pre {
  overflow-y: auto;
  background: none;
}

.spec-example-num {
  opacity: 1;
}

/*** Code ***/
var {
  border: thin solid transparent;
}

var:hover {
  background: none;
  border-color: var(--highlight-border-color);
}

code {
  padding: .1em .3em;
  border-radius: .3em;
  font-size: .9em;
  color: var(--pink-base);
  background: var(--silver-base);
}

.token.operator {
  background: none;
}

.spec-definition > pre {
  padding: 1rem;
}

.spec-definition > pre > code {
  font-family: var(--body-font-family);
  font-style: italic;
  font-size: 130%;
  font-weight: bold;
  line-height: 120%;
}

@media (min-width: 720px) {
  .spec-definition > pre {
    margin-left: 3em;
    transform: scaleX(1.02);
  }
}

h2.spec-definition-head, h3.spec-definition-head {
  font-size: inherit;
  color: var(--black-darker);
}


/*** Selections ***/
::selection {
  background-color: var(--yellow-light);
}

.selection-link,
.outdated-selection-link {
  box-shadow: 2px 2px 5px var(--body-background-color);
  color: var(--indigo-dark);
}

.selection-link {
  background-color: var(--indigo-lightest);
  border: thin solid var(--indigo-dark);
}

.selection-link:hover {
  background-color: var(--indigo-lightest);
  color: var(--indigo-dark);
}

.outdated-selection-link {
  background-color: var(--midnight-base);
  border: thin solid var(--red-dark);
}

.outdated-selection-link:hover {
  background-color: var(--red-base);
  color: var(--midnight-dark);
}


/*** Sidebar ***/
.spec-sidebar-toggle + label[for="spec-sidebar-toggle"] > .spec-sidebar-button {
  color: var(--grey-lighter);
  z-index: 10001;
  left: 0;
  right: auto;
  top: auto;
  bottom: 0;
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

/*** RFC 2119 Requirements ***/
.spec-requirement {
  font-weight: bold;
  color: var(--requirement-color);
  --requirement-color: var(--green-light);
  border-radius: 0.2rem;
  transition: color 115ms, background 115ms;
  padding: 0 0.1rem 0.2rem 0.1rem;
}

.spec-requirement:hover {
  background: var(--requirement-color);
  color: var(--body-background-color);
  text-decoration: none;
}

.spec-requirement.required {
  --requirement-color: var(--green-base);
}

.spec-requirement.not.required {
  --requirement-color: var(--red-base);
}

.spec-requirement.recommended {
  --requirement-color: var(--teal-dark);
}

.spec-requirement.not.recommended {
  --requirement-color: var(--orange-base);
}

.spec-requirement.optional {
  --requirement-color: var(--indigo-base);
}

.spec-toc a:hover {
  opacity: 0.8;
}

.spec-toc a .spec-secid {
  color: var(--indigo-dark);
}

.spec-toc .title {
  margin-top: 2em;
}

.apollo-specs-logo a:hover {
  text-decoration: none;
}

.spec-sidebar {
  border-right: 1px solid var(--silver-dark);
  overflow-y: auto;
}