/* bunny ★ bloom library — retro-ish, simple html vibes */
/* full style.css (copy/paste) */
/* =========================
THEME TOKENS (DEFAULT / LIBRARY)
========================= */
:root{
--bg: #0b0c10;
--panel: #11131a;
--panel-2: #0f1117;
--text: #e9ecf1;
--muted: #b8c0cc;
--line: rgba(255,255,255,.18);
--accent: #ffd1f3;
--accent-2: #b7f7ff;
--radius: 0px; /* square corners */
--link-underline: #39ff14; /* slime tech green */
}
/* light-mode palette (auto) */
@media (prefers-color-scheme: light) {
:root{
--bg: #fbfbfd;
--panel: #ffffff;
--panel-2: #f3f5f8;
--text: #11131a;
--muted: #465061;
--line: rgba(17,19,26,.22);
--accent: #b4008a;
--accent-2: #006a73;
--link-underline: #39ff14;
}
}
/* =========================
BUNNY PAGE THEME OVERRIDE
(only applies to )
========================= */
.bunny-page{
--clay:#7a564f;
--wine:#8f2a32;
--ember:#a83813;
--bg:#3C3F44;
--panel:#2f3237;
--panel-2:#272a2f;
--text:#f2ecea;
--muted:#d7c6c2;
--line:#7a564f;
--accent: var(--ember);
--accent-2: var(--wine);
--link-underline: var(--ember);
}
/* =========================
BASE / RESET
========================= */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
img{ max-width: 100%; height: auto; display: block; }
/* IMPORTANT: stop grid/flex children from forcing overflow */
*{ min-width: 0; }
body{
margin: 0;
font-family: Verdana, Tahoma, Arial, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
color: var(--text);
line-height: 1.6;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px),
repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 16px),
var(--bg);
}
/* Bunny page gets its own background texture */
.bunny-page{
background:
radial-gradient(circle at 15% 10%, rgba(168,56,19,.18), transparent 42%),
radial-gradient(circle at 80% 70%, rgba(143,42,50,.16), transparent 46%),
repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
var(--bg);
}
/* =========================
LINKS
========================= */
a{
color: inherit;
text-decoration-line: underline;
text-decoration-color: var(--link-underline);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
a:hover,
a:focus-visible{
text-decoration-thickness: 2px;
background: rgba(255,255,255,.06);
}
/* Bunny page links = ember */
.bunny-page a{
color: var(--accent);
text-decoration-color: var(--accent);
}
.bunny-page a:hover,
.bunny-page a:focus-visible{
background: rgba(168,56,19,.12);
}
/* =========================
WRAP
========================= */
.wrap{
width: min(980px, calc(100% - 28px));
margin: 0 auto;
}
/* =========================
A11Y
========================= */
.skip-link{
position: absolute;
left: -999px;
top: 10px;
background: var(--panel);
padding: 10px 12px;
border: 2px solid var(--line);
z-index: 999;
text-decoration: none;
}
.skip-link:focus{ left: 10px; }
/* =========================
LIBRARY HEADER / NAV
========================= */
.site-header{
position: static;
background: var(--panel);
border-bottom: 2px dashed var(--line);
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding: 14px 0;
}
.brand{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
}
.brand:hover{ opacity:.95; }
.brand-mark{
width:44px;
height:44px;
border:2px solid var(--line);
background: var(--panel-2);
padding: 6px;
}
.brand-title{ font-weight:700; }
.brand-subtitle{ color: var(--muted); font-size:.95rem; }
.nav{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}
.nav a{
padding: 2px 4px;
background: transparent;
}
.nav a:hover{ background: rgba(255,255,255,.08); }
/* =========================
BUTTONS (old-web bevel)
========================= */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:10px 12px;
border: 2px outset rgba(255,255,255,.22);
background: var(--panel-2);
text-decoration:none;
font-weight:700;
text-transform: lowercase;
}
.btn:hover{ filter: brightness(1.06); }
.btn:active{ border-style: inset; filter: brightness(0.98); }
.btn.small{ padding:7px 10px; font-size:.95rem; }
.btn.ghost{ background: transparent; }
/* =========================
TYPOGRAPHY
========================= */
h1, h2, h3{ margin: 0 0 10px; line-height: 1.2; }
h1{ font-size: clamp(1.9rem, 4.8vw, 2.8rem); }
h2{ font-size: clamp(1.25rem, 3vw, 1.8rem); }
h3{ font-size: 1.05rem; }
.small{ font-size: .95rem; }
.muted{ color: var(--muted); }
.lead{ color: var(--muted); font-size: 1.03rem; margin: 0 0 16px; }
/* =========================
CARDS / PANELS (library)
========================= */
.card, .hero-card, .note, .join-card, .item, .member-card{
border: 2px solid rgba(255,255,255,.18);
background: var(--panel);
box-shadow: none;
overflow: hidden; /* stops embeds from spilling out */
}
.hero-card, .card, .note, .join-card{ padding: 16px; }
.note{ border-style: dashed; background: var(--panel-2); }
.kv{
padding: 10px;
border: 1px solid rgba(255,255,255,.18);
background: var(--panel-2);
}
.k{ color: var(--muted); font-size: .92rem; }
.v{ font-weight: 700; }
/* =========================
SECTIONS / GRIDS (library)
========================= */
.section{ padding: 34px 0; }
.section.alt{
background: transparent;
border-top: 2px dashed rgba(255,255,255,.18);
border-bottom: 2px dashed rgba(255,255,255,.18);
}
.grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:12px;
margin-top:14px;
}
.grid.two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 920px){
.grid{ grid-template-columns: 1fr; }
.grid.two{ grid-template-columns: 1fr; }
}
.bullets{ margin:0; padding-left:18px; color: var(--muted); }
.bullets li{ margin: 8px 0; }
/* =========================
TAGS
========================= */
.tag{
display:inline-flex;
align-items:center;
padding:6px 9px;
border: 1px solid rgba(255,255,255,.18);
background: transparent;
font-size:.9rem;
color: var(--muted);
text-decoration:none;
}
.tag.bloomed{ color: var(--accent); }
.tag.sprouting{ color: var(--accent-2); }
.tag.seed{ color: #ffe9a8; }
.tag.zine{ color: #baffc9; }
/* =========================
MEMBERS GRID
========================= */
.member-cards{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:12px;
margin-top:18px;
}
@media (max-width: 920px){
.member-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
.member-cards{ grid-template-columns: 1fr; }
}
.member-card-inner{
display:grid;
grid-template-columns: 120px 1fr;
gap:12px;
padding:14px;
}
.member-photo{
width:120px;
height:150px;
overflow:hidden;
border:2px solid rgba(255,255,255,.18);
background: var(--panel-2);
}
.member-photo img{ width:100%; height:100%; object-fit:cover; }
/* =========================
READING TABLE
========================= */
.reading-table{
width:100%;
border-collapse: collapse;
font-size: .95rem;
}
.reading-table th, .reading-table td{
padding:10px 12px;
border-bottom: 1px solid rgba(255,255,255,0.12);
vertical-align: top;
}
.reading-table th{ text-align:left; font-weight:700; }
.reading-table details summary{ cursor:pointer; }
.reading-table details p{ margin:8px 0 0 0; }
/* =========================
BLOG / POETRY LAYOUT
========================= */
.blog-layout{
display:grid;
grid-template-columns: 320px 1fr;
gap:18px;
align-items:start;
}
@media (max-width: 900px){
.blog-layout{ grid-template-columns: 1fr; }
}
.blog-sidebar .card{ margin-bottom: 14px; }
.pixel-box{
border: 2px solid rgba(255,255,255,0.18);
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);
}
.button-wall{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-mini{ padding:2px 8px; font-size:.9em; }
.poem-search{
display:flex;
gap:10px;
align-items:center;
margin-top:10px;
flex-wrap:wrap;
}
.poem-search input[type="search"]{
width:min(520px, 100%);
padding:10px 12px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 0;
background: rgba(0,0,0,0.18);
color: inherit;
}
/* =========================
FOOTER (library)
========================= */
.site-footer{
border-top: 2px dashed rgba(255,255,255,.18);
padding: 18px 0;
color: var(--muted);
}
.footer-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
/* =========================
BUNNY PROFILE PAGE STYLES
========================= */
.bunny-page .wrap{ padding: 16px; }
.topbar{
margin-top: 16px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
border: 1px solid var(--line);
padding: 10px 12px;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.topbar .brand img{
width:36px;
height:36px;
image-rendering: pixelated;
}
.brand-text{ min-width:0; }
.brand-title{
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.brand-sub{
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.profile-grid{
margin-top:14px;
display:grid;
grid-template-columns: 230px minmax(0, 1fr) 230px; /* minmax prevents overflow */
gap:12px;
}
/* KEY: prevent grid children from forcing columns wider */
.profile-grid > *{ min-width: 0; }
@media (max-width: 860px){
.profile-grid{ grid-template-columns: 1fr; }
.topbar{ align-items:flex-start; }
}
.panel{
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.10));
border: 1px solid var(--line);
padding: 10px;
overflow: hidden; /* KEY: keep embeds inside */
}
.panel h2{
margin: 0 0 8px 0;
font-size: 13px;
text-transform: lowercase;
letter-spacing: .6px;
color: var(--accent-2);
}
.hr{
border:0;
border-top: 1px dashed rgba(122,86,79,.8);
margin: 10px 0;
}
.photo{
width:100%;
aspect-ratio: 1 / 1;
border: 1px solid var(--line);
background: rgba(0,0,0,.10);
overflow:hidden;
}
.photo img{
width:100%;
height:100%;
object-fit:cover;
}
.status{
margin-top:10px;
border: 1px solid var(--line);
background: rgba(0,0,0,.12);
padding: 8px;
font-size: 12px;
color: var(--muted);
}
.status b{ color: #f2c38c; }
.stats{
margin-top:10px;
display:grid;
gap:6px;
font-size:12px;
}
.stat{
display:flex;
justify-content:space-between;
gap:10px;
border: 1px solid var(--line);
background: rgba(0,0,0,.12);
padding: 6px 8px;
}
.label{ color: var(--muted); }
.headline{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.headline h1{
margin:0;
font-size:16px;
text-transform:lowercase;
letter-spacing:.4px;
}
.tagline{ color: var(--muted); font-size: 12px; }
.box{
border: 1px solid var(--line);
background: rgba(0,0,0,.12);
padding: 10px;
overflow:hidden;
}
.box-title{
color: var(--accent-2);
font-weight:700;
margin-bottom:6px;
}
.quote{ margin:0; }
.mini-links{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
}
.mini-links a{
font-size:12px;
border: 1px solid var(--line);
background: rgba(0,0,0,.16);
padding: 4px 8px;
text-decoration:none;
}
.mini-links a:hover{ background: rgba(168,56,19,.12); }
.bullet{
margin: 8px 0 0 0;
padding-left: 18px;
}
.bullet li{ margin: 4px 0; }
.widget{
border: 1px solid var(--line);
background: rgba(0,0,0,.10);
padding: 10px;
overflow:hidden;
}
/* =========================
CBOX EMBED — HARD STOP OVERFLOW FIX
========================= */
.message-box{ width:100%; max-width:100%; overflow:hidden; }
.cbox-frame{ width:100%; max-width:100%; overflow:hidden; border:1px solid var(--line); padding:6px; }
.cbox-frame iframe{
display:block;
width:100% !important;
max-width:100% !important;
height: 280px;
border: 0;
background: transparent;
}
.message-note{
margin: 6px 0 0 0;
font-size: 12px;
color: var(--muted);
}
/* =========================
MISC
========================= */
.anarchy-a{ color:#cc0000; font-weight: bold; }
.poem-text{
white-space: pre-wrap; /* keeps indents + wraps */
margin: 0;
font: inherit; /* same font as site */
line-height: inherit;
}
/* bunny profile add-ons */
.bunny-page .small { font-size: 0.95rem; line-height: 1.35; }
.bunny-page .muted { opacity: 0.85; }
.bunny-page .bullet.small li { margin: 0.15rem 0; }
.bunny-page .callout {
margin-top: 0.75rem;
padding: 0.65rem 0.75rem;
border: 1px dashed currentColor;
border-radius: 8px;
}
.bunny-page .callout-title {
font-weight: 700;
margin-bottom: 0.25rem;
letter-spacing: 0.02em;
}
/* --- TRIPLOG PAGE (simple logbook layout) --- */
.triplog-page .small { font-size: 0.95rem; line-height: 1.35; }
.triplog-page .muted { opacity: 0.85; }
.triplog-shell { margin-top: 1rem; }
.triplog-intro {
margin-bottom: 1rem;
padding: 0.75rem 0.9rem;
border: 1px solid currentColor;
border-radius: 10px;
}
.triplog-grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 1rem;
align-items: start;
}
@media (max-width: 900px) {
.triplog-grid { grid-template-columns: 1fr; }
}
/* left column */
.triplog-index .index-links {
list-style: none;
padding-left: 0;
margin: 0.25rem 0 0;
}
.triplog-index .index-links li { margin: 0.25rem 0; }
/* tags */
.triplog-page .tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.triplog-page .tag {
display: inline-block;
padding: 0.15rem 0.5rem;
border: 1px dashed currentColor;
border-radius: 999px;
text-decoration: none;
}
/* boxes + entries */
.triplog-box,
.triplog-entry {
padding: 0.9rem;
border: 1px solid currentColor;
border-radius: 10px;
margin-bottom: 1rem;
}
.triplog-entry { margin-top: 0.75rem; }
/* entry header */
.triplog-head { margin-bottom: 0.55rem; }
.triplog-title { font-weight: 800; letter-spacing: 0.02em; }
.triplog-meta {
opacity: 0.9;
font-size: 0.95rem;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
align-items: center;
}
.triplog-meta .dot { opacity: 0.75; }
/* badges */
.triplog-badges {
display: inline-flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.triplog-badge {
display: inline-block;
padding: 0.12rem 0.45rem;
border: 1px solid currentColor;
border-radius: 999px;
text-decoration: none;
font-size: 0.9rem;
}
/* code snippet block */
.triplog-code {
overflow: auto;
padding: 0.75rem;
border: 1px dashed currentColor;
border-radius: 10px;
white-space: pre;
}
/* tiny anchor targets for tag links */
.triplog-tag-anchors { height: 1px; overflow: hidden; }
/* --- TRIPLOG (inherits bunny color scheme) --- */
.triplog-shell { margin-top: 1rem; }
.triplog-page .small { font-size: 0.95rem; line-height: 1.35; }
.triplog-grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 1rem;
margin-top: 1rem;
}
@media (max-width: 900px) {
.triplog-grid { grid-template-columns: 1fr; }
}
.trip-entry { margin: 0.75rem 0 1rem; }
.trip-entry-head { margin-bottom: 0.5rem; }
.trip-entry-title { font-weight: 800; }
.trip-entry-meta { opacity: 0.85; font-size: 0.95rem; }
.triplog-code {
overflow: auto;
padding: 0.75rem;
border: 1px dashed currentColor;
border-radius: 10px;
white-space: pre;
}