/* ============================================================
Hello World lab - shared stylesheet for the static pages
(docs / terms / privacy / org / age / contact / report / copyright)
Mirrors the app's visual language from src/index.css:
--phos #00ff41 . bg rgb(1 3 1) . panel rgb(6 18 8) . text rgb(201 255 207)
Fonts are loaded per page with tags (see the head snippet in
the handoff notes) - no @import here.
============================================================ */
/* ---- 1. tokens ------------------------------------------------------ */
:root {
--phos: #00ff41;
--phos-rgb: 0 255 65;
--phos-soft: rgb(var(--phos-rgb) / 0.62);
--bg-rgb: 1 3 1;
--panel-rgb: 6 18 8;
--text-rgb: 201 255 207;
--bg: rgb(var(--bg-rgb));
--panel: rgb(var(--panel-rgb));
--text: rgb(var(--text-rgb));
--muted: rgb(var(--text-rgb) / 0.68);
--dim: rgb(var(--phos-rgb) / 0.70);
--line: rgb(var(--phos-rgb) / 0.2);
--line-2: rgb(var(--phos-rgb) / 0.32);
--line-3: rgb(var(--phos-rgb) / 0.4);
--font-display: 'VT323', 'Noto Sans KR', ui-monospace, monospace;
--font-body: 'IBM Plex Mono', 'Noto Sans KR', ui-monospace, 'Consolas', monospace;
--rail: 248px;
--prose: 42rem;
--shell: 1400px;
--header-h: 4rem;
}
/* ---- 2. base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
background: var(--bg);
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.7;
min-height: 100vh;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
[class^="ri-"], [class*=" ri-"] { line-height: 1; vertical-align: -0.08em; }
::selection { background: var(--phos); color: var(--bg); }
:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgb(var(--phos-rgb) / 0.35); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--phos); }
/* ---- 3. CRT overlays (same values as the app) ----------------------- */
/* put class="scanline" on , and one */
.scanline { position: relative; }
.scanline::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.28) 0px,
rgba(0, 0, 0, 0.28) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: multiply;
}
.scanline::after {
content: "";
position: fixed;
left: 0;
right: 0;
top: -20%;
height: 18%;
pointer-events: none;
z-index: 9998;
background: linear-gradient(
to bottom,
transparent,
rgb(var(--phos-rgb) / 0.035),
transparent
);
/* transform (compositor-only) instead of animating `top` */
transform: translateY(0);
will-change: transform;
animation: scan-sweep 6s linear infinite;
}
@keyframes scan-sweep {
0% { transform: translateY(0); }
100% { transform: translateY(140vh); }
}
.crt-vignette {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9997;
background: radial-gradient(
ellipse at center,
transparent 55%,
rgba(0, 0, 0, 0.45) 100%
);
}
.glow-text { text-shadow: 0 0 6px rgb(var(--phos-rgb) / 0.7), 0 0 18px rgb(var(--phos-rgb) / 0.35); }
.glow-soft { text-shadow: 0 0 4px rgb(var(--phos-rgb) / 0.45); }
@media (prefers-reduced-motion: reduce) {
.scanline::after { animation: none; will-change: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ---- 4. header ------------------------------------------------------ */
.site-header {
position: sticky;
top: 0;
z-index: 40;
border-bottom: 1px solid var(--line);
background: rgb(var(--bg-rgb) / 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.site-header .hdr {
max-width: var(--shell);
margin: 0 auto;
height: var(--header-h);
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
text-decoration: none;
color: inherit;
}
.logo-box {
width: 2.25rem;
height: 2.25rem;
border-radius: 6px;
background: var(--phos);
color: var(--bg);
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.35rem;
line-height: 1;
box-shadow: 0 0 10px rgb(var(--phos-rgb) / 0.55), 0 0 26px rgb(var(--phos-rgb) / 0.25),
0 0 0 2px rgb(var(--phos-rgb) / 0.4);
}
.logo-title {
font-family: var(--font-display);
font-size: 1.5rem;
line-height: 1;
letter-spacing: -0.01em;
white-space: nowrap;
text-shadow: 0 0 4px rgb(var(--phos-rgb) / 0.45);
}
.logo-sub {
margin-top: 0.15rem;
font-size: 10px;
line-height: 1.2;
color: var(--dim);
letter-spacing: 0.06em;
}
.back-link {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.4rem;
height: 2.25rem;
padding: 0 0.7rem;
border: 1px solid var(--line-3);
border-radius: 6px;
font-size: 12px;
color: var(--text);
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.back-link:hover {
color: var(--phos);
border-color: var(--phos);
background: rgb(var(--phos-rgb) / 0.1);
text-shadow: none;
}
@media (max-width: 640px) {
.logo-sub { display: none; }
.logo-title { font-size: 1.3rem; }
.site-header .hdr { padding: 0 0.75rem; }
}
/* ---- 5. shell + left rail ------------------------------------------- */
.shell {
display: flex;
max-width: var(--shell);
margin: 0 auto;
align-items: flex-start;
}
.nav {
width: var(--rail);
flex-shrink: 0;
border-right: 1px solid var(--line);
padding: 1.75rem 1.25rem 3rem;
position: sticky;
top: var(--header-h);
max-height: calc(100vh - var(--header-h));
overflow: auto;
}
.nav .sec {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dim);
margin: 1.35rem 0 0.45rem;
}
.nav .sec:first-child { margin-top: 0; }
.nav a {
display: block;
position: relative;
padding: 0.3rem 0 0.3rem 0.85rem;
border-left: 2px solid transparent;
font-size: 13px;
line-height: 1.5;
color: var(--muted);
text-decoration: none;
transition: color 0.15s, border-color 0.15s;
}
.nav a::before {
content: "\203A";
position: absolute;
left: 0.2rem;
color: rgb(var(--phos-rgb) / 0.45);
}
.nav a:hover { color: var(--text); text-shadow: none; }
.nav a:hover::before { color: var(--phos); }
.nav a.on {
color: var(--phos);
border-left-color: var(--phos);
text-shadow: 0 0 4px rgb(var(--phos-rgb) / 0.45);
}
.nav a.on::before { color: var(--phos); }
.main {
flex: 1;
min-width: 0;
padding: 2.5rem 3rem 6rem;
}
@media (max-width: 1023px) {
.shell { display: block; }
.nav {
width: auto;
position: static;
max-height: none;
overflow: visible;
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 0.9rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem 0.9rem;
}
.nav .sec { margin: 0; }
.nav a { padding: 0.15rem 0 0.15rem 0.8rem; border-left-width: 0; }
.nav a.on { border-left-width: 2px; }
.main { padding: 1.75rem 1.25rem 4.5rem; }
}
/* ---- 6. prose ------------------------------------------------------- */
.prose { max-width: var(--prose); }
.prose h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.4rem, 7vw, 3.25rem);
line-height: 1.05;
color: var(--phos);
margin-bottom: 0.5rem;
text-shadow: 0 0 6px rgb(var(--phos-rgb) / 0.7), 0 0 18px rgb(var(--phos-rgb) / 0.35);
}
.prose h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.85rem;
line-height: 1.15;
color: var(--phos);
margin: 2.6rem 0 0.75rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
text-shadow: 0 0 4px rgb(var(--phos-rgb) / 0.45);
}
.prose h3 {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.02em;
color: var(--text);
margin: 1.6rem 0 0.5rem;
}
.prose p { margin: 0 0 0.85rem; line-height: 1.7; }
.prose ul, .prose ol { margin: 0 0 1.1rem 1.3em; }
.prose li { margin: 0.3rem 0; line-height: 1.7; }
.prose strong { color: var(--phos); font-weight: 600; }
a { color: var(--phos); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #b6ffc9; text-shadow: 0 0 6px rgb(var(--phos-rgb) / 0.5); }
code, pre { font-family: var(--font-body); }
code {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 4px;
padding: 0.08em 0.35em;
font-size: 0.9em;
color: var(--phos);
}
pre {
background: var(--panel);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 0.9rem 1rem;
margin: 0.7rem 0 1.3rem;
overflow-x: auto;
line-height: 1.55;
font-size: 13px;
color: var(--text);
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.table-wrap {
overflow-x: auto;
margin: 0.9rem 0 1.4rem;
border: 1px solid var(--line-2);
border-radius: 8px;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
text-align: left;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
vertical-align: top;
}
th:last-child, td:last-child { border-right: 0; }
tr:last-child td { border-bottom: 0; }
th {
background: rgb(var(--phos-rgb) / 0.07);
color: var(--dim);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
blockquote {
border-left: 3px solid var(--phos);
padding: 0.1rem 0 0.1rem 1rem;
margin: 0.9rem 0 1.3rem;
color: var(--muted);
}
blockquote p:last-child { margin-bottom: 0; }
hr {
border: 0;
border-top: 1px dashed var(--line-3);
margin: 2rem 0;
}
/* ---- 7. parts ------------------------------------------------------- */
.crumb {
font-size: 12px;
color: var(--muted);
margin-bottom: 1rem;
}
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--phos); text-decoration: underline; }
.lead {
font-size: 1.05rem;
line-height: 1.65;
color: var(--muted);
margin: 0 0 1.6rem;
}
.md-twin {
font-size: 12px;
color: var(--muted);
margin: 0.5rem 0 1.75rem;
padding: 0.45rem 0.7rem;
border: 1px dashed var(--line);
border-radius: 6px;
background: rgb(var(--panel-rgb) / 0.6);
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.1rem 0.5rem;
border: 1px solid var(--line-3);
border-radius: 4px;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--phos);
background: rgb(var(--phos-rgb) / 0.07);
white-space: nowrap;
}
.links {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
margin: 1rem 0 1.75rem;
font-size: 13px;
}
.call {
border: 1px solid var(--line);
border-left: 3px solid var(--line-3);
border-radius: 8px;
background: var(--panel);
padding: 0.75rem 0.9rem;
margin: 1rem 0 1.4rem;
font-size: 14px;
}
.call strong {
display: block;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dim);
margin-bottom: 0.25rem;
font-weight: 600;
}
.call.tip { border-left-color: var(--phos); }
.call.ok { border-left-color: #57ff8f; }
.call.note { border-left-color: rgb(var(--phos-rgb) / 0.55); }
details {
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);
padding: 0.6rem 0.9rem;
margin: 0.5rem 0;
}
summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text); }
details[open] summary { color: var(--phos); }
details p { margin-top: 0.5rem; font-size: 14px; color: var(--muted); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
height: 2.25rem;
padding: 0 1rem;
border: 1px solid transparent;
border-radius: 6px;
background: var(--phos);
color: var(--bg);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: #86efac; color: var(--bg); text-shadow: none; }
.btn-outline {
background: transparent;
border-color: var(--line-3);
color: var(--text);
}
.btn-outline:hover { background: rgb(var(--phos-rgb) / 0.1); border-color: var(--phos); color: var(--phos); }
.footer {
max-width: var(--prose);
margin: 3.5rem 0 0;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
text-align: center;
font-size: 12px;
color: var(--muted);
}
.footer a { color: var(--dim); text-decoration: none; }
.footer a:hover { color: var(--phos); text-decoration: underline; }