/* Styles extracted from oneofus.html to separate file
Purpose: keep page HTML slim and allow caching/reuse. */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
body {
/* keep Inter for UI but lean into a warmer serif for headings via fallbacks */
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial;
color: #3b2f2f;
/* warm dark brown for text */
background: #FBF5EE;
/* warm cream background */
margin: 0;
}
.container {
max-width: 61.25rem;
margin: 0 auto;
padding: 1.125rem;
}
.site-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.site-header .logo {
width: 5rem;
height: 5rem;
}
.brand {
font-weight: 300;
}
.tagline-pre {
white-space: pre-wrap;
font-family: monospace;
color: #6b4f3b;
/* softer brown */
/* Override box.css pre styles */
background: transparent;
padding: 0;
border: none;
}
/* Match modal background to the page background for a seamless look */
.modal-inner {
background: #FBF5EE;
}
.header-actions {
display: flex;
flex-direction: column;
gap: 0.625rem;
align-items: flex-end;
}
/* Stack app store links vertically at the top-right */
.app-links {
display: flex;
flex-direction: column;
gap: 0.625rem;
align-items: flex-end;
/* keep the store badges visually grouped with padding and a soft background */
padding: 0.5rem;
border-radius: 0.625rem;
background: rgba(255, 248, 239, 0.9);
/* warm translucent card */
border: 1px solid rgba(107, 79, 59, 0.06);
}
.app-links a {
display: block;
/* give each badge a little breathing room so they don't touch the container edges */
padding: 0.25rem 0.125rem;
}
.app-links img {
display: block;
width: 11.25rem;
height: auto;
}
/* tighten the gap between the lead h3 and the paragraph that follows it */
.lead h3 {
margin-bottom: 0.15rem;
/* reduce H3 bottom margin */
}
.lead h3+p {
margin-top: 0;
/* remove paragraph top margin for immediate sibling */
}
/* layout helper: lead with a small image on the left (marketing / badge) */
.lead-image-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.side-logo {
width: 5rem;
height: auto;
border-radius: 0.5rem;
display: block;
}
@media (max-width: 600px) {
.lead-image-row {
flex-direction: row;
}
.side-logo {
width: 56px;
}
}
/* Make the hero/comic sections full-bleed (width of the page) */
.hero {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
}
.hero .hero-inner {
max-width: 61.25rem;
margin: 0 auto;
padding: 0 1.125rem;
display: flex;
gap: 1.125rem;
align-items: flex-start;
}
/* Comic-strip styling */
.comic {
display: flex;
gap: 1.125rem;
align-items: flex-start;
background: #fff8ef;
/* warm off-white card */
border: none;
padding: 0.5rem;
border-radius: 0.375rem;
box-shadow: 0 6px 18px rgba(91, 64, 46, 0.06);
width: 100%;
}
.comic-image {
flex: 0 0 auto;
border-radius: 0.625rem;
overflow: hidden;
}
.comic img {
max-width: 12.5rem;
height: auto;
display: block;
border: 0.25rem solid #6b4f3b;
/* warm brown frame */
border-radius: 0.625rem;
box-shadow: 6px 6px 0 rgba(107, 79, 59, 0.06);
}
/* keep bubble full-width but make it less tall and avoid scrollbars */
.bubble {
background: #fffef9;
/* slightly warmer interior */
padding: 0.375rem 0.5rem;
border-radius: 0.375rem;
font-family: "Comic Neue", Bangers, "Comic Sans MS", cursive, "Inter";
font-size: 1.05rem;
line-height: 1.12;
border: 3px solid #6b4f3b;
/* warm brown outline */
position: relative;
flex: 1;
min-width: 0;
}
/* remove default paragraph margins inside the bubble */
.bubble:before {
content: "";
position: absolute;
left: -1.125rem;
top: 2rem;
width: 0;
height: 0;
border-top: 0.6875rem solid transparent;
border-bottom: 0.6875rem solid transparent;
border-right: 0.9375rem solid #6b4f3b;
}
.bubble:after {
content: "";
position: absolute;
left: -0.875rem;
top: 2.125rem;
width: 0;
height: 0;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.6875rem solid #fffef9;
}
/* Footer styling aligned with home2.css */
.site-footer {
border-top: 1px solid #efe3d8;
padding: 1.125rem;
margin-top: 1.125rem;
text-align: center;
color: #6b5a4a;
font-size: 0.95rem;
}
@media (max-width: 700px) {
.site-header {
flex-direction: column;
align-items: stretch;
}
.header-actions {
flex-direction: row;
justify-content: flex-start;
}
.app-links img {
width: 8.75rem;
}
.hero {
flex-direction: column;
}
/* make comic images a bit smaller on small screens and reduce padding */
.comic img {
max-width: 6.25rem;
}
.comic {
padding: 0.5rem;
}
}
/* reversed comic: image on right, bubble on left */
.comic.rev {
flex-direction: row;
}
.comic.rev .bubble:before {
left: auto;
right: -1.125rem;
border-right: none;
border-left: 0.9375rem solid #6b4f3b;
}
.comic.rev .bubble:after {
left: auto;
right: -0.875rem;
border-right: none;
border-left: 0.6875rem solid #fffef9;
}
/* Make all lists compact on pages that include box.css (detail pages) */
ul,
ol {
margin: 0.45rem 0;
padding-left: 1.15rem;
}
li {
margin: 0.18rem 0;
line-height: 1.25;
}
ul li::marker {
font-size: 0.98em;
}
/* Man page link style */
a.man-link {
font-family: "Courier New", Courier, monospace;
color: #000;
text-decoration: underline;
font-weight: bold;
font-size: 0.9rem;
}
a.man-link:hover {
background-color: #000;
color: #fff;
text-decoration: none;
}
/* Video section styles */
.video-container {
display: flex;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.video-frame {
flex: 1;
min-width: 300px;
}
.video-description {
flex: 1;
min-width: 300px;
display: flex;
align-items: flex-start;
}
.video-description-content {
margin-top: 0;
}
.video-description-content h4 {
margin-top: 0;
}
.video-iframe {
width: 100%;
height: 315px;
border: 0;
}
/* Iframe styles for modal content */
.modal-iframe {
width: 100%;
height: 640px;
border: 0;
}
.modal-iframe-possibilities {
width: 100%;
height: 220px;
border: 0;
}
.modal-iframe-wrapper {
width: 100%;
overflow: hidden;
}
.code {
font-family: "Courier Prime", monospace;
font-weight: 500;
/* font-size: 10px; */
/* color: #1B5E20; */
}
.json-text {
font-family: "Courier Prime", monospace;
font-weight: 700;
/* font-size: 10px; */
/* color: #1B5E20; */
}
.json-highlight {
font-family: "Courier Prime", monospace;
font-weight: 700;
/* font-size: 10px; */
color: #2196F3;
}