/* Bulma v1 custom theme for AI-auto-pages, pure CSS-variables method.
Official guide (bulma.io/documentation/customize, with-css-variables):
keep Bulma's base CSS intact, load this file AFTER bulma.min.css, and
create the theme by overwriting Bulma variables under :root. Colour
variables are given as HSL components (-h / -s / -l), as Bulma expects,
so Bulma's own helpers (is-primary, is-success, soft / light shades)
are generated from the same tokens. No Sass build is needed.
Load order:
Fonts: Bulma default, deliberately NOT overridden here.
ONLY the card-header look below is carried over from the old site, as
the user asked to keep it: gradient background, a teal-to-gold accent
bar before the title (::before), and a fading gradient line after
the title (::after). Everything else in this file is a fresh design. */
:root,
[data-theme="light"] {
/* --- Colour tokens (HSL, Bulma style) --- */
/* Primary: deep teal, the same family as the card-header accent.
Slightly desaturated vs Bulma default, so it reads calm, not neon. */
--bulma-primary-h: 174;
--bulma-primary-s: 65%;
--bulma-primary-l: 27%;
/* Link: a touch darker than primary, for readable links on paper. */
--bulma-link-h: 174;
--bulma-link-s: 65%;
--bulma-link-l: 24%;
/* Info: calm slate-blue, not Bulma's default bright blue. */
--bulma-info-h: 210;
--bulma-info-s: 30%;
--bulma-info-l: 48%;
/* Success: soft leaf green, close to teal so it sits with primary. */
--bulma-success-h: 158;
--bulma-success-s: 45%;
--bulma-success-l: 38%;
/* Warning / gold accent: kept for the card-header bar and warnings. */
--bulma-warning-h: 32;
--bulma-warning-s: 85%;
--bulma-warning-l: 44%;
/* Danger: softer, less harsh red than Bulma default. */
--bulma-danger-h: 357;
--bulma-danger-s: 55%;
--bulma-danger-l: 48%;
/* --- Scheme: soft warm paper, not stark white, not grey ---
Page #f3f0e9, cards #fdfbf6 (warm off-white, never pure #fff),
text #3a352e (soft charcoal-brown, never pure black). Contrast
is kept for readability, but nothing is pure black on pure white,
so it reads soft and fresh rather than harsh. */
--bulma-scheme-main: #f3f0e9;
--bulma-scheme-main-bis: #fdfbf6;
--bulma-scheme-main-ter: #ece8dd;
--bulma-background: #f3f0e9;
--bulma-text: #3a352e;
--bulma-text-strong: #2b2620;
--bulma-text-weak: #7d766a;
/* Primary button text: Bulma defaults invert to the darkest shade,
which is dark text on dark teal. Force the light shade so primary
buttons read white on teal. */
--bulma-primary-invert-l: 96%;
/* Inline links: Bulma's link-on-scheme is a bright mid-teal.
Force the dark teal so links are readable on paper / light boxes. */
--bulma-link-on-scheme-l: 27%;
--bulma-text-title: #2b2620;
--bulma-border: #e2dccf;
--bulma-border-weak: #ebe7db;
/* Custom tokens for boxes that Bulma does not theme by itself.
Defined here (light) and again in the dark block, so every
custom box switches with the theme instead of staying light. */
--theme-text-soft: #5c554b;
--theme-link: #0f766e;
--theme-link-soft: #e6f4f1;
/* --- Shape: modern, but not bubbly --- */
--bulma-radius: 10px;
--bulma-radius-large: 14px;
--bulma-radius-small: 8px;
--bulma-radius-rounded: 9999px;
/* --- Depth: one layered soft shadow, used by cards and boxes --- */
--bulma-shadow: 0 1px 2px rgba(60, 50, 35, 0.04), 0 12px 32px rgba(60, 50, 35, 0.07);
--bulma-card-shadow: 0 1px 2px rgba(60, 50, 35, 0.04), 0 12px 32px rgba(60, 50, 35, 0.07);
--bulma-box-shadow: 0 1px 2px rgba(60, 50, 35, 0.04), 0 12px 32px rgba(60, 50, 35, 0.07);
/* --- Type scale: a little larger, a little tighter --- */
--bulma-size-normal: 15px;
--bulma-body-line-height: 1.65;
--bulma-title-weight: 800;
--bulma-content-heading-weight: 700;
/* --- Controls --- */
--bulma-control-radius: 10px;
--bulma-control-radius-small: 8px;
--bulma-input-border-l: 88%;
--bulma-input-focus-border-l: 27%;
--bulma-button-weight: 600;
}
/* Dark theme: eye-protecting, soft, never harsh.
Root cause of the mobile bug this replaces: the old file only
darkened a few custom boxes under
`@media (prefers-color-scheme: dark)`, while text stayed on the
light :root tokens (Bulma dark only applies under
[data-theme="dark"], which nothing ever set). Result: dark cards
with dark text, unreadable. That media block is deleted below.
Now theme is chosen in JS (see the head script in index.html /
edit.html): light / dark / system. System means JS sets
data-theme to dark or light from matchMedia and listens for
changes, so this [data-theme="dark"] block is the single source
for dark, in every case. Never re-add a prefers-color-scheme
media block that darkens surfaces on its own, or manual Light
on a dark phone will break again.
Palette: warm dark brown, never pure black; text warm off-white,
never pure white; colours desaturated and lightened just enough
to read on dark, never neon. */
[data-theme="dark"] {
--bulma-primary-h: 174;
--bulma-primary-s: 50%;
--bulma-primary-l: 42%;
--bulma-link-h: 174;
--bulma-link-s: 45%;
--bulma-link-l: 65%;
--bulma-info-h: 210;
--bulma-info-s: 30%;
--bulma-info-l: 65%;
--bulma-success-h: 158;
--bulma-success-s: 40%;
--bulma-success-l: 55%;
--bulma-warning-h: 38;
--bulma-warning-s: 70%;
--bulma-warning-l: 60%;
--bulma-danger-h: 357;
--bulma-danger-s: 50%;
--bulma-danger-l: 62%;
--bulma-scheme-main: #201d1a;
--bulma-scheme-main-bis: #2b2723;
--bulma-scheme-main-ter: #35302a;
--bulma-background: #201d1a;
--bulma-text: #e6dfd2;
--bulma-text-strong: #f3eee3;
--bulma-text-weak: #a89f8d;
--bulma-primary-invert-l: 96%;
--bulma-link-on-scheme-l: 70%;
--bulma-text-title: #f3eee3;
--bulma-border: #403a30;
--bulma-border-weak: #352f27;
--theme-text-soft: #d0c8b8;
--theme-link: #8ad8cc;
--theme-link-soft: #1f3d3a;
--bulma-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
--bulma-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
--bulma-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
--bulma-input-focus-border-l: 65%;
}
/* ============ Layout: Bulma container width, centred, not a custom fixed width ============
Width is NOT set here any more. The HTML uses Bulma's own
.container.is-max-tablet (705px in the bundled Bulma 1.0.4, full
width below the desktop breakpoint, centred on desktop and up),
so the content column is centred and not too wide without a
hard-coded pixel/rem cap in this file. .site-container /
.edit-container below are only hooks for positioning (the theme
switch is absolutely positioned at the container's top-right)
and for the homepage flex layout; they set no width. */
.site-container {
position: relative;
}
.edit-container {
position: relative;
/* Room for the theme button above the first card: the button is
absolutely positioned at the container's top-right, so without
this padding it would sit on top of the first card's header. */
padding-top: 44px;
}
.section {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
.site-section {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.site-section .site-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
/* ============ Reveal gate: page and data appear together ============
The wide layout above spreads the blocks over the full viewport
height with space-between, so if the short static skeleton were
painted first and data/site.json filled the FAQ card in a moment
later, every gap would be re-distributed and the middle content
would visibly jump (the refresh jitter). Instead the section
stays visibility:hidden - layout is still computed at full size,
only the paint is held back - until the main script has loaded
the data, populated the page and added .ready to (see
index.html; the fetch already starts in , in parallel with
the stylesheets, so in practice the gate opens at the same moment
the first paint would have happened). A 3s timer in the head
script and the noscript style in index.html are the safety nets,
so the page can never stay hidden. The edit page is unaffected:
it uses .edit-section, not .site-section. */
html:not(.ready) .site-section {
visibility: hidden;
}
/* ============ Site title: solid ink for readability, with a centred
teal-to-gold bar underneath echoing the card-header accent.
Gradient text looked black/olive in screenshots and hurt contrast,
so the gradient is now a visible bar, not the text itself. ============ */
.site-container > .title {
font-size: 30px;
letter-spacing: 0.04em;
margin-bottom: 1.25rem;
color: var(--bulma-text-strong);
}
.site-container > .title::after {
content: "";
display: block;
width: 56px;
height: 4px;
margin: 12px auto 0;
border-radius: 2px;
background: linear-gradient(90deg, #0f766e, #d97706);
}
/* ============ Cards: white, soft border, layered shadow ============ */
.card {
background: var(--bulma-scheme-main-bis);
border: 1px solid var(--bulma-border);
border-radius: var(--bulma-radius-large);
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-content {
padding: 20px 22px;
}
/* ============ KEPT: card-header, exactly as before ============
Gradient background, accent bar before the title, fading line
after the title. Colours are hard-coded here (not via variables)
so this look never drifts when the rest of the theme changes. */
.card-header {
background: linear-gradient(90deg, rgba(15, 118, 110, 0.09), rgba(15, 118, 110, 0) 72%);
border-bottom: 1px solid var(--bulma-border);
box-shadow: none;
align-items: center;
gap: 11px;
padding: 10px 18px;
}
.card-header::before {
content: "";
width: 5px;
height: 20px;
border-radius: 3px;
background: linear-gradient(180deg, #0f766e, #d97706);
flex: none;
}
.card-header-title {
padding: 0;
font-size: 17px;
letter-spacing: 0.02em;
/* Bulma defaults flex-grow to 1, which makes the title box stretch
and leaves blank space after the text. Keep it text-width only,
so the ::after gradient line fills the rest. */
flex-grow: 0 !important;
flex-shrink: 0;
}
.card-header::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(15, 118, 110, 0.25), rgba(15, 118, 110, 0));
margin-left: 4px;
}
/* ============ Buttons ============
Standalone primary buttons may lift and gain shadow on hover.
Small buttons and Form-addons buttons must NOT lift or shadow:
lift breaks the joined input+button line, and on a 30px button
a shadow reads as noise, not feedback. There, hover is only
a background / border darkening. */
.button {
border-radius: var(--bulma-control-radius);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.button:not(:disabled):hover {
transform: translateY(-1px);
}
.button:not(:disabled):active {
transform: translateY(0);
}
.button.is-primary {
color: #fff !important;
box-shadow: 0 6px 18px rgba(15, 118, 110, 0.28);
}
.button.is-primary:hover,
.button.is-primary:active,
.button.is-primary:focus {
color: #fff !important;
}
.button.is-primary:not(:disabled):hover {
background-color: #0b5f58;
border-color: #0b5f58;
box-shadow: 0 10px 28px rgba(15, 118, 110, 0.38);
transform: translateY(-1px);
}
.button.is-primary:disabled {
/* Readable muted disabled, not pale teal with faint text.
Every property needs !important here: .button.is-primary
sets white text with !important, which otherwise wins over
this rule and leaves white text on a pale background. */
opacity: 1 !important;
background: var(--bulma-scheme-main-ter) !important;
border-color: var(--bulma-border) !important;
color: var(--bulma-text-weak) !important;
box-shadow: none !important;
transform: none !important;
}
.button.is-danger.is-outlined:hover {
background: #fef2f2;
border-color: #fca5a5;
color: #b91c1c;
transform: none;
box-shadow: none;
}
/* Small buttons: larger touch target, no lift, background-only hover. */
.buttons.are-small .button {
min-height: 36px;
padding: 7px 12px;
font-size: 13px;
}
.buttons.are-small .button:not(:disabled):hover {
transform: none;
box-shadow: none;
background: var(--bulma-scheme-main-ter);
border-color: var(--bulma-border);
}
/* Add buttons: tinted, so they are not lost in the long list. */
#addBtn,
#addFaqBtn {
background: #f0fdfa;
border-color: #99f6e4;
color: #0f766e;
font-weight: 700;
}
/* Small danger button keeps its red hover, not the generic grey hover. */
.buttons.are-small .button.is-danger.is-outlined:hover {
background: #fef2f2;
border-color: #fca5a5;
color: #b91c1c;
}
#addBtn:hover,
#addFaqBtn:hover {
background: #ccfbf1;
border-color: #5eead4;
}
a:focus-visible,
.button:focus-visible {
outline: 2px solid var(--bulma-primary);
outline-offset: 2px;
}
/* ============ Forms: white fields, teal focus ring ============ */
.field:not(:last-child) {
margin-bottom: 18px;
}
.label {
font-size: 13px;
font-weight: 650;
letter-spacing: 0.02em;
color: var(--bulma-text-strong);
margin-bottom: 8px;
}
.input::placeholder,
.textarea::placeholder {
color: var(--bulma-text-weak);
opacity: 1;
}
.order-control .input::placeholder {
/* Order placeholder is the current position, not an empty hint:
make it darker so it is not mistaken for a faint placeholder. */
color: var(--bulma-text);
}
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.input,
.textarea,
.select select {
background: var(--bulma-scheme-main-bis);
border-color: var(--bulma-border);
border-radius: var(--bulma-control-radius);
box-shadow: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus,
.textarea:focus,
.select select:focus,
.input:focus-visible,
.textarea:focus-visible {
border-color: var(--bulma-primary);
box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.20);
}
.textarea {
min-height: 150px;
line-height: 1.6;
resize: vertical;
padding: 12px 14px;
}
.select:not(.is-multiple)::after {
border-color: var(--bulma-text-weak);
}
/* ============ Detail / preview boxes: tips and FAQ answers ============ */
.detail,
.preview {
display: none;
/* Keep CJK words together (e.g. “密码” must not split across
lines) while long Latin URLs inside may still break. */
word-break: keep-all;
overflow-wrap: break-word;
margin-top: 14px;
padding: 14px 16px;
background: var(--bulma-scheme-main-ter);
border: 1px solid var(--bulma-border);
border-left: 3px solid var(--bulma-primary);
border-radius: 10px;
max-height: 210px;
overflow-y: auto;
}
.detail.show,
.preview.show {
display: block;
animation: detailIn 0.2s ease;
}
@keyframes detailIn {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: none; }
}
.edit .preview {
display: block;
margin-top: 12px;
}
.preview p,
.detail p {
margin: 8px 0;
overflow-wrap: break-word;
}
.detail a,
.preview a {
font-weight: 600;
color: var(--theme-link);
overflow-wrap: anywhere;
}
.detail a:hover,
.preview a:hover {
text-decoration: underline;
}
.detail .has-text-danger,
.preview .has-text-danger {
font-weight: 700;
}
/* ============ FAQ: summary as a soft pill, + / - as a badge ============ */
details {
padding: 2px 0;
}
summary {
cursor: pointer;
font-weight: 650;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--bulma-scheme-main-ter);
border: 1px solid var(--bulma-border-weak);
border-radius: 10px;
transition: background-color 0.15s ease, color 0.15s ease;
}
summary:hover {
background: var(--bulma-primary-soft);
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
content: "";
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--bulma-scheme-main-bis);
border: 1px solid var(--bulma-border);
/* Plus icon, drawn, not typed: horizontal + vertical bars,
both centred in the circle. No font metrics involved. */
background-image:
linear-gradient(var(--bulma-text-weak), var(--bulma-text-weak)),
linear-gradient(var(--bulma-text-weak), var(--bulma-text-weak));
background-size: 12px 2px, 2px 12px;
background-position: center;
background-repeat: no-repeat;
}
details[open] summary {
background: var(--bulma-primary-soft);
color: var(--bulma-primary);
}
details[open] summary::after {
/* Minus icon, drawn: horizontal bar only, same centre, same size. */
background-image:
linear-gradient(var(--bulma-primary), var(--bulma-primary));
background-size: 12px 2px;
border-color: #99f6e4;
}
details > div {
margin: 10px 0 2px;
padding: 12px 14px;
background: var(--bulma-scheme-main-ter);
border: 1px solid var(--bulma-border-weak);
border-radius: 10px;
color: var(--theme-text-soft);
font-size: 14px;
line-height: 1.7;
}
details > div p {
margin: 8px 0;
}
details > div p:first-child {
margin-top: 0;
}
details > div p:last-child {
margin-bottom: 0;
}
/* FAQ card head: buttons are right-aligned via Bulma .buttons.is-right
(see edit.html), and the head gets the same bottom spacing as a
project card's .level head (1.5rem), so the first field sits at
the same distance in both card types. */
.faq-head {
display: flex;
justify-content: flex-end;
margin-bottom: 1.5rem;
}
.faq-head .field {
margin-bottom: 0;
}
/* ============ Notifications: soft tinted, not flat Bulma colour ============ */
.notification {
border-radius: 12px;
border: 1px solid var(--bulma-border);
box-shadow: none;
}
.notification.is-success {
background: #ecfdf5;
border-color: #a7f3d0;
color: #065f46;
}
.notification.is-danger {
background: #fef2f2;
border-color: #fecaca;
color: #991b1b;
}
/* ============ Edit page: section title, JSON preview, save bar ============ */
.edit .section-title {
font-size: 16px;
font-weight: 750;
margin: 22px 0 6px;
color: var(--bulma-text-strong);
}
.edit .json-preview {
white-space: pre-wrap;
word-break: break-all;
font-size: 12px;
line-height: 1.6;
max-height: 320px;
overflow: auto;
/* Gap from the summary above: it was margin:0, so the pre block
touched the summary pill. 16px matches the card padding rhythm. */
margin: 16px 0 0;
background: var(--bulma-scheme-main-ter);
border: 1px solid var(--bulma-border-weak);
border-radius: 10px;
padding: 12px 14px;
}
.edit .preview-label {
font-size: 13px;
color: var(--bulma-text-weak);
margin: 16px 0 8px;
}
.savebar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--bulma-scheme-main-bis);
border-top: 1px solid var(--bulma-border);
box-shadow: 0 -8px 24px rgba(33, 29, 25, 0.08);
padding: 14px 16px;
z-index: 20;
}
.savebar-inner {
/* Width and centring come from Bulma .container.is-max-tablet
in edit.html, matching the edit content column. No custom
max-width here, so the save bar cannot drift from the form. */
}
/* Savebar per Bulma Form general, has-addons + is-expanded: