/* BloomCraft. Structure comes from hairlines and alignment, not from boxes. Square corners, no gradients, restrained shadow. The type does the work: a soft serif for headings, a humanist grotesque for reading, and monospace kept for figures -- which is the one place it earns its width. COLOUR. A botanical set rather than a terminal one: paper and near-black are both biased green so no neutral here is a default grey, bloom-magenta leads from the server's own mark, and ember is rationed to the dungeon and to anything that wants attention. THEMES. Three states, not two. A visitor who picked one gets data-theme stamped on ; everyone else is un-stamped and separated only by prefers-color-scheme. Every colour is defined on bare :root first and only REDEFINED in the other two blocks -- a colour whose sole definition sits inside a media query never applies in the un-stamped state, which is how a page ends up with one theme's text on the other theme's ground. */ :root { --bg: #fbfcf9; /* paper, faintly green -- chosen, not inherited */ --raise: #f2f5ee; /* form fields and figure grounds */ --rule: #dde4d9; /* the hairline everything is built from */ --rule-lit: #c3d0c1; --text: #16211c; /* near-black with a green bias */ --muted: #55645b; /* 6.1:1 on paper */ --faint: #67766d; /* 4.7:1 -- the weaker of two de-emphasis levels, still AA */ --blue: #b23f86; /* bloom: links, focus, the primary voice */ --blue-deep: #8e2e6b; --pink: #b2542b; /* ember: the answering accent, used sparingly */ --gold: #a8792a; --leaf: #4f7f5e; --blurple: #5865f2; /* Discord's own, untouched */ --danger: #b3382b; --ink-soft: #33443b; /* long-form body copy, softer than --text */ --on-accent: #ffffff; /* text sitting on a filled accent */ /* The logo artwork paints its own near-black field, so the circle behind it matches in BOTH themes rather than flipping. A brand mark that inverts with the page is a different mark; if a light-mode logo is ever wanted it should be a second asset, not a background swap. */ --art-field: #08090c; --col: 70rem; --font: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; color-scheme: light; } /* Dark, for everyone who has not chosen -- guarded so an explicit light choice still beats a dark operating system. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #101512; --raise: #182019; --rule: #2a352e; --rule-lit: #3c4c42; --text: #eaf0ea; --muted: #8b9a90; --faint: #74837a; --blue: #e88bc2; --blue-deep: #8e2e6b; --pink: #e4915f; --gold: #e0be6a; --leaf: #8fc69c; --blurple: #7c86f7; --danger: #e88b7f; --ink-soft: #bcc9bf; --on-accent: #ffffff; --art-field: #08090c; color-scheme: dark; } } /* Dark, chosen deliberately. */ :root[data-theme="dark"] { --bg: #101512; --raise: #182019; --rule: #2a352e; --rule-lit: #3c4c42; --text: #eaf0ea; --muted: #8b9a90; --faint: #74837a; --blue: #e88bc2; --blue-deep: #8e2e6b; --pink: #e4915f; --gold: #e0be6a; --leaf: #8fc69c; --blurple: #7c86f7; --danger: #e88b7f; --ink-soft: #bcc9bf; --on-accent: #ffffff; --art-field: #08090c; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; font-variant-ligatures: none; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } ::selection { background: var(--pink); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin: 0; text-wrap: balance; } .wrap { width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 1.5rem; } /* Nothing may make the document wider than the screen: one overflowing element scrolls the whole page sideways and every line gets clipped at the right edge, which reads as random words being cut off in unrelated paragraphs. */ body { overflow-wrap: break-word; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--bg); border: 1px solid var(--rule-lit); padding: .5rem .9rem; } /* A micro-label. Wide tracking is what makes it read as a label and not as text. */ .eyebrow { font-size: .69rem; text-transform: uppercase; letter-spacing: .19em; color: var(--faint); } /* --- top bar ----------------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 0; } .discord-btn { display: inline-flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--text); border: 1px solid var(--rule-lit); padding: .42rem .8rem; transition: border-color .12s, color .12s; } .discord-btn:hover { border-color: var(--blurple); text-decoration: none; } .discord-btn svg { width: 15px; height: 15px; fill: var(--blurple); flex: none; } .discord-btn[aria-disabled="true"] { color: var(--faint); border-color: var(--rule); cursor: not-allowed; } .discord-btn[aria-disabled="true"] svg { fill: var(--faint); } .who { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--muted); } .who img { width: 20px; height: 20px; border-radius: 50%; flex: none; } .who .name { color: var(--text); } .who .badge { color: var(--pink); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; } .linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--faint); cursor: pointer; } .linkbtn:hover { color: var(--danger); } /* --- hero: logo, address, nav ------------------------------------------ */ .hero { display: flex; flex-direction: column; align-items: center; text-align: center; } .logo { display: grid; place-items: center; width: clamp(150px, 30vw, 268px); aspect-ratio: 1; border-radius: 50%; background: var(--art-field); /* the artwork's own field, per theme */ overflow: hidden; margin-top: clamp(1rem, 4vw, 2.75rem); } .logo img { width: 100%; height: 100%; object-fit: cover; display: block; } body.inner .logo { width: clamp(72px, 11vw, 92px); margin-top: 1rem; } .addr { margin-top: 1.15rem; display: inline-flex; align-items: baseline; gap: .8rem; font-size: .88rem; } .addr .copy { border: 0; background: none; padding: 0; font: inherit; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); cursor: pointer; } .addr .copy:hover { color: var(--text); } .addr .copy.done { color: var(--leaf); } .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 4vw, 2.25rem); margin-top: clamp(1.5rem, 4vw, 2.4rem); padding-bottom: clamp(1.5rem, 4vw, 2.4rem); } .nav a { color: var(--muted); font-size: .95rem; padding-bottom: 2px; border-bottom: 1px solid transparent; } .nav a:hover { color: var(--text); border-bottom-color: var(--rule-lit); text-decoration: none; } .nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--blue); } /* --- section headings: title, then a rule running to the edge ----------- */ main { padding-bottom: 6rem; } .section { margin-top: clamp(2.5rem, 7vw, 4rem); } .section-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; } .section-head h2 { font-size: clamp(1.1rem, 3vw, 1.3rem); flex: none; } .section-head .rule { flex: 1 1 auto; height: 1px; background: var(--rule); } .section-head .act { flex: none; font-size: .78rem; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; } .section-head .act:hover { color: var(--blue); } .page-title { font-size: clamp(1.9rem, 6vw, 2.75rem); margin: clamp(2rem, 6vw, 3rem) 0 .75rem; } .page-sub { color: var(--muted); margin: 0 0 2.5rem; max-width: 44rem; } /* --- changelog: a date rail, then the entry ----------------------------- */ .entries { border-top: 1px solid var(--rule); } .entry { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); } .entry-meta { font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: .15rem; } .entry-meta .mark { color: var(--pink); } .entry h3 { font-size: 1.12rem; letter-spacing: -.035em; } .entry h3 a { color: var(--text); } .entry h3 a:hover { color: var(--blue); text-decoration: none; } .entry .excerpt { margin: .45rem 0 0; color: var(--muted); font-size: .92rem; } .entry .byline { margin-top: .55rem; font-size: .76rem; color: var(--faint); } .empty { color: var(--faint); padding: 2.25rem 0; border-bottom: 1px solid var(--rule); } /* rendered update bodies */ .prose { color: var(--ink-soft); max-width: 44rem; } .prose p { margin: 0 0 1.15rem; } .prose ul { margin: 0 0 1.15rem; padding-left: 1.1rem; } .prose li { margin: .3rem 0; } .prose li::marker { color: var(--faint); } .prose strong { color: var(--text); font-weight: 700; } .prose code { color: var(--blue); } .prose a { text-decoration: underline; text-underline-offset: 3px; } /* --- key/value rows: guides, and anything else that is really a list ---- */ .rowlist { border-top: 1px solid var(--rule); margin: 0; } .rowlist > div { display: grid; grid-template-columns: 12rem 1fr; gap: 0 2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--rule); } .rowlist dt { color: var(--text); font-size: .92rem; } .rowlist dd { margin: 0; color: var(--muted); font-size: .92rem; } .rowlist dd code { color: var(--blue); } .rowlist dd a { text-decoration: underline; text-underline-offset: 3px; } /* --- guides: click to reveal ------------------------------------------- */ .guides { border-top: 1px solid var(--rule); } .guide { border-bottom: 1px solid var(--rule); } .guide > summary { cursor: pointer; list-style: none; /* the default triangle is not ours */ padding: 1.05rem 0; display: grid; grid-template-columns: 1.75rem 1fr; align-items: baseline; gap: 0 .5rem; } .guide > summary::-webkit-details-marker { display: none; } .guide > summary::before { content: "+"; color: var(--faint); font-size: .95rem; line-height: 1; } .guide[open] > summary::before { content: "\2212"; color: var(--blue); } .guide > summary:hover::before { color: var(--blue); } .guide > summary:hover .g-title { color: var(--blue); } .guide > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .g-title { color: var(--text); font-size: .98rem; } .g-gist { color: var(--faint); font-size: .85rem; display: block; margin-top: .12rem; } /* The body lines up under the title, not under the marker. */ .guide-body { padding: .25rem 0 1.75rem 2.25rem; max-width: 46rem; color: var(--ink-soft); font-size: .92rem; } .guide-body > :first-child { margin-top: 0; } .guide-body p { margin: 0 0 1rem; } .guide-body ul { margin: 0 0 1rem; padding-left: 1.1rem; } .guide-body li { margin: .28rem 0; } .guide-body li::marker { color: var(--faint); } .guide-body strong { color: var(--text); font-weight: 700; } .guide-body code { color: var(--blue); } .guide-body a { text-decoration: underline; text-underline-offset: 3px; } .guide-body h4 { font-size: .69rem; text-transform: uppercase; letter-spacing: .19em; color: var(--faint); font-weight: 400; margin: 1.75rem 0 .7rem; } /* a compact two-column fact table inside a guide */ .facts { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .88rem; } .facts td { padding: .32rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; } .facts tr:last-child td { border-bottom: 0; } .facts td:first-child { width: 14rem; color: var(--muted); padding-right: 1.5rem; } .facts td:last-child { font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .guide-body { padding-left: 0; } .facts td:first-child { width: 9.5rem; padding-right: .9rem; } } /* At 320px the 9.5rem label column leaves 117px for the value, and "bloomcraftmc.com" needs ~135px as a single unbreakable token -- so the row, and with it the page, overflowed. Stack the pairs rather than shaving the column further. */ @media (max-width: 480px) { .facts, .facts tbody, .facts tr, .facts td { display: block; width: auto; } .facts tr { padding: .45rem 0; border-bottom: 1px solid var(--rule); } .facts tr:last-child { border-bottom: 0; } .facts td { padding: 0; border-bottom: 0; } .facts td:first-child { width: auto; padding: 0 0 .1rem; font-size: .82rem; } } /* --- server records: one ranked list, chosen from a picker --------------- */ /* Tabs, not a