/* ==================== Variables ==================== */
html.navy {
--bg: #0c0f11;
--fg: #dedad2;
--sidebar-bg: #12161a;
--sidebar-fg: #a9a8a0;
--sidebar-non-existant: #505050;
--sidebar-active: #2ec4b6;
--sidebar-spacer: #252a2e;
--scrollbar: #8a8a82;
--icons: #707068;
--icons-hover: #c0c0b0;
--links: #2ec4b6;
--inline-code-color: #e79a6e;
--theme-popup-bg: #12161a;
--theme-popup-border: #252a2e;
--theme-hover: #1a1e22;
--quote-bg: #14181c;
--quote-border: #252a2e;
--table-border-color: #1e2327;
--table-header-bg: #14181c;
--table-alternate-bg: #12161a;
--searchbar-border-color: #252a2e;
--searchbar-bg: #14181c;
--searchbar-fg: #dedad2;
--searchbar-shadow-color: #0c0f11;
--searchresults-header-fg: #a9a8a0;
--searchresults-border-color: #252a2e;
--searchresults-li-bg: #14181c;
--search-mark-bg: #2ec4b6;
--color-scheme: dark;
--copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%)
contrast(87%);
--copy-button-filter-hover: invert(51%) sepia(55%) saturate(531%) hue-rotate(160deg)
brightness(104%) contrast(101%);
--footnote-highlight: #2ec4b6;
--overlay-bg: rgba(12, 15, 17, 0.6);
--blockquote-note-color: #4493f8;
--blockquote-tip-color: #2ec4b6;
--blockquote-important-color: #1a9e93;
--blockquote-warning-color: #d29922;
--blockquote-caution-color: #f21424;
--sidebar-header-border-color: #2ec4b6;
--warning-border: #d06b38;
--content-max-width: 1100px;
}
/* ==================== Background ==================== */
html.navy body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at 20% 50%, rgba(222, 218, 210, 0.02) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(46, 196, 182, 0.02) 0%, transparent 50%),
radial-gradient(ellipse at 50% 80%, rgba(198, 93, 44, 0.015) 0%, transparent 50%),
linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
background-size:
100% 100%,
100% 100%,
100% 100%,
60px 60px,
60px 60px;
pointer-events: none;
z-index: 0;
}
/* ==================== Menu Bar ==================== */
html.navy #menu-bar {
background: rgba(12, 15, 17, 0.86);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid #252a2e;
}
html.navy .menu-title {
font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
font-weight: 700;
color: #dedad2;
}
/* ==================== Content ==================== */
html.navy .content {
padding-top: 36px;
padding-bottom: 36px;
}
html.navy .content main {
background: rgb(18 22 26 / 92%);
border-radius: 12px;
padding: 32px;
}
/* ==================== Headings ==================== */
html.navy .content h1 {
font-family: var(--font-mono);
font-weight: 800;
background: linear-gradient(135deg, #2ec4b6, #1a9e93);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
html.navy .content h2,
html.navy .content h3 {
font-family: var(--font-mono);
font-weight: 700;
color: #dedad2;
}
html.navy .content main > h1:first-child,
html.navy .content main > h2:first-child,
html.navy .content main > h3:first-child {
margin-top: 0;
}
/* ==================== Code Blocks ==================== */
html.navy .content pre {
background: #14181c !important;
border: 1px solid #252a2e;
border-radius: 12px;
margin: 1.5em 0;
position: relative;
overflow-x: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: 0;
}
html.navy .content pre::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(135deg, rgba(46, 196, 182, 0.5), rgba(198, 93, 44, 0.3));
border-radius: 12px 12px 0 0;
}
html.navy .content pre code {
font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
background: #14181c;
display: block;
padding: 24px;
}
/* ==================== Copy Button ==================== */
html.navy .content pre > .buttons button {
padding: 1px 3px;
font-size: 13px;
position: relative;
left: -1px;
}
html.navy .content pre > .buttons button.clip-button::before {
content: url('data:image/svg+xml,<svg width="16" height="15" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard"><path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/></svg>');
filter: var(--copy-button-filter);
}
/* ==================== Tables ==================== */
html.navy .content table {
border-collapse: collapse;
margin: 1.5em 0;
font-size: 0.95em;
overflow: hidden;
border: 1px solid #252a2e;
border-radius: 8px;
width: 100%;
background: #252a2e;
backdrop-filter: none;
isolation: isolate;
position: relative;
}
html.navy .content table::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(135deg, rgba(46, 196, 182, 0.5), rgba(198, 93, 44, 0.3));
z-index: 1;
}
html.navy .content table thead {
background: #14181c;
}
html.navy .content table th {
padding: 12px 16px;
text-align: left;
font-weight: 600;
color: #dedad2;
border-bottom: 2px solid #252a2e;
font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
html.navy .content table td {
padding: 10px 16px;
border-bottom: 1px solid #252a2e;
color: #a9a8a0;
background: #14181c;
}
html.navy .content table tr:hover td {
background: rgba(46, 196, 182, 0.06);
}
html.navy .content table tbody tr:nth-child(2n) {
background: #14181c;
}
html.navy .content table {
backdrop-filter: none;
isolation: isolate;
}
html.navy .hljs-variable,
html.navy .hljs-attribute,
html.navy .hljs-attr,
html.navy .hljs-tag,
html.navy .hljs-regexp {
color: #d06b38;
}
html.navy .hljs {
background: #111213;
}
html.navy .hljs-comment {
color: #6d7578;
}