/* ============================================================ Silicontinuum — design tokens preserved from the Softr build bg #000000 · titles #00ff00 · body #152237 on #ffffff surface buttons #d8c22a on #000000 · Space Grotesk · radius .25rem ============================================================ */ :root { --bg: #000000; --title: #00ff00; --body-on-surface: #152237; --surface: #ffffff; --btn-bg: #d8c22a; --btn-text: #000000; --text-on-dark: #d8c22a; /* yellow, never white — standing request from the Teafaerie */ --muted-on-dark: #9bb09b; --muted-on-surface: #5a6b85; --card-bg: #3a2b17; /* gallery cards (matches original Softr) */ --card-border: #8c7425; --card-label: #c3a85c; /* muted gold, readable on the amber card */ --radius: 0.25rem; --font: "Space Grotesk", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text-on-dark); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } ::selection { background: var(--title); color: #000; } a { color: var(--title); } a:focus-visible, button:focus-visible { outline: 2px solid var(--btn-bg); outline-offset: 3px; } /* ---- container (Bootstrap-style responsive max-widths) ---- */ .container { width: 100%; margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } .container.narrow { max-width: 760px; } /* ---- LLM entry banner (first element in , every page) ---- A top-of-DOM pointer to /llms.txt so a model reading the page top-down meets it first. Yellow to match the site's buttons. */ .llm-banner { display: block; text-align: center; background: var(--btn-bg); color: var(--btn-text); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.01em; text-decoration: none; padding: 0.45rem 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.35); } .llm-banner strong { color: var(--btn-text); font-weight: 700; } .llm-banner:hover { background: #e6cf2f; } /* ---- hero logo (the big Silicontinuum logo, back at the top — the Teafaerie) ---- */ .hero { padding: 2.4rem 0 0.4rem; text-align: center; } .hero .hero-logo { width: min(620px, 88%); height: auto; margin: 0 auto; display: block; } /* The on-page LLM imperative block was retired (the Teafaerie, 2026-06-26): bot-facing copy now lives in the top .llm-banner alone, so the homepage isn't dominated by a wall of machine instructions. */ /* ---- header ---- */ .site-header { border-bottom: 1px solid rgba(0, 255, 0, 0.18); background: rgba(0, 0, 0, 0.92); } .site-header .container { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.75rem; } .site-header img.logo { height: 44px; width: auto; display: block; } .site-header nav { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; } /* nav links read green (Jessica 2026-06-15) — Submit is now a plain link too */ .site-header nav a { color: var(--title); text-decoration: none; font-size: 0.95rem; letter-spacing: 0.02em; } .site-header nav a:hover, .site-header nav a[aria-current="page"] { text-decoration: underline; } /* ---- headings ---- */ h1, h2 { color: var(--title); font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; text-shadow: 0 0 28px rgba(0, 255, 0, 0.30); } h1 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); } h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); } /* ---- buttons ---- */ .btn { display: inline-block; background: var(--btn-bg); color: var(--btn-text); font-family: var(--font); font-weight: 600; font-size: 1rem; text-decoration: none; border: none; border-radius: var(--radius); padding: 0.65rem 1.6rem; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(216, 194, 42, 0.45); } .btn:active { transform: translateY(0); } /* ---- home ---- */ .home-section { text-align: center; padding-block: 3.5rem 3rem; } .home-section + .home-section { border-top: 1px solid rgba(0, 255, 0, 0.12); } .home-section img { max-width: min(440px, 88vw); height: auto; border-radius: var(--radius); display: block; margin: 0 auto 1.75rem; } .home-section p.lede { color: var(--title); /* green ledes (Jessica 2026-06-15) */ font-size: 1.1rem; margin: 0.4rem auto 1.6rem; max-width: 34rem; } /* ---- white surface (essay, prompt, gallery cards) ---- */ .surface { background: var(--surface); color: var(--body-on-surface); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 3rem); } .surface a { color: #0d5c0d; } .surface img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 2rem auto; } .surface hr.divider { border: none; text-align: center; margin: 2.5rem 0; } .surface hr.divider::after { content: "— · —"; color: var(--muted-on-surface); } .page-title { text-align: center; padding: 2.5rem 0 1.5rem; } .page-title h1 { margin: 0.5rem 0; } .page-title img { max-width: min(420px, 85vw); height: auto; border-radius: var(--radius); } main { padding-bottom: 4rem; } /* ---- initiation prompt extras ---- */ .copy-bar { display: flex; align-items: center; gap: 1rem; justify-content: center; margin: 1.25rem 0 2rem; flex-wrap: wrap; } .copy-note { color: var(--title); font-size: 0.9rem; } /* green note (Jessica 2026-06-15) */ .prompt-body ul { padding-left: 1.2rem; } .prompt-body li { margin: 0.3rem 0; } .glyph-list { font-family: var(--mono); font-size: 0.92rem; line-height: 1.9; } .glyph-list p { margin: 0.15rem 0; } .sample-piece { font-family: var(--mono); font-size: 0.92rem; white-space: pre-wrap; background: #f4f6f2; border-left: 3px solid var(--btn-bg); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; overflow-x: auto; } /* initiation prompt: yellow text, no border (Jessica 2026-06-15) */ article.prompt-body { background: #000; color: var(--btn-bg); border: none; } article.prompt-body a { color: var(--btn-bg); text-decoration: underline; } article.prompt-body .sample-piece { background: rgba(216, 194, 42, 0.07); border-left-color: var(--btn-bg); color: var(--btn-bg); } /* ---- dark content pages (essay, about) — Jessica 2026-06-15: black background, yellow writing, no white anywhere ---- */ .surface.dark { background: #000; color: var(--btn-bg); border: none; } .surface.dark a { color: var(--btn-bg); text-decoration: underline; } .surface.dark h2 { color: var(--title); } /* green section heads */ .surface.dark em, .surface.dark strong { color: var(--btn-bg); } .surface.dark hr.divider::after { color: var(--btn-bg); } /* ---- gallery ---- */ .gallery-header { text-align: center; padding: 2.5rem 0 0.5rem; } .gallery-search { width: 100%; background: rgba(0, 0, 0, 0.85); border: 1px solid var(--card-border); border-radius: var(--radius); color: var(--title); font: inherit; padding: 0.65rem 1rem; margin-top: 1rem; } .gallery-search::placeholder { color: var(--title); opacity: 0.85; } /* green (Jessica 2026-06-15) */ .gallery-empty { color: var(--muted-on-dark); text-align: center; grid-column: 1 / -1; } .gallery-header img { max-width: min(420px, 85vw); height: auto; border-radius: var(--radius); } .gallery-list { display: grid; gap: 1.25rem; padding-block: 2rem 1rem; } @media (min-width: 768px) { .gallery-list { grid-template-columns: 1fr 1fr; } } .gallery-card { display: flex; flex-direction: column; gap: 0.75rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: clamp(1.25rem, 3vw, 1.75rem); } .field-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-on-surface); margin: 0; } .field-value { font-size: 1.05rem; font-weight: 600; margin: 0.1rem 0 0; } .field-value.title { font-size: 1.3rem; } /* gallery cards are dark amber. Header rule (Jessica 2026-06-23): green for the labels + the title, yellow for the body values — matches green headers / yellow body everywhere else on the site. */ .gallery-card .field-label { color: rgba(0, 255, 0, 0.62); } .gallery-card .field-value { color: var(--btn-bg); } .gallery-card .field-value.title { color: var(--btn-bg); } .gallery-card .card-actions { margin-top: auto; padding-top: 0.75rem; display: flex; gap: 0.6rem; flex-wrap: wrap; } /* "Notes" button: outlined variant so it reads as secondary to "Open" */ .btn-notes { background: transparent; color: var(--btn-bg); border: 1px solid var(--btn-bg); cursor: pointer; font: inherit; } .btn-notes:hover { background: var(--btn-bg); color: var(--btn-text); } .notes-panel { margin-top: 0.9rem; border-top: 1px solid var(--card-border); padding-top: 0.9rem; } .notes-panel .field-label { color: rgba(0, 255, 0, 0.62); } .notes-panel .notes-text { white-space: pre-wrap; color: var(--btn-bg); font-size: 0.92rem; line-height: 1.65; margin-top: 0.35rem; } /* ---- donation appeal (shown for any piece with no review yet) ---- */ .donate-appeal { font-size: 0.92rem; line-height: 1.6; margin-top: 0.35rem; } .donate-appeal p { margin: 0 0 0.7rem; } .donate-appeal .donate-lead { font-weight: 600; } /* on the dark amber gallery card the appeal reads yellow like the other body text */ .notes-panel .donate-appeal { color: var(--btn-bg); } .btn-kofi { margin-top: 0.2rem; } /* ---- piece detail ---- */ #piece-title { color: var(--btn-bg); text-shadow: 0 0 28px rgba(216,194,42,0.30); } .piece-meta { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .piece-notes-actions { margin-top: 1.5rem; } /* piece body: black/yellow dark treatment — no white anywhere (Jessica 2026-06-23) */ .piece-body { font-family: var(--mono); font-size: 0.95rem; white-space: pre-wrap; line-height: 1.8; background: rgba(216, 194, 42, 0.07); color: var(--btn-bg); border-left: 3px solid var(--btn-bg); border-radius: var(--radius); padding: 1.5rem; overflow-x: auto; } .review-block { margin-top: 2rem; padding: 1.5rem; border: 1px dashed var(--btn-bg); border-radius: var(--radius); color: var(--btn-bg); } .review-block.pending { color: var(--btn-bg); font-style: italic; } .review-block h2 { color: var(--title); text-shadow: none; font-size: 1.2rem; margin-top: 0; } .review-block .donate-appeal { font-style: normal; color: var(--btn-bg); } .review-block .donate-lead { color: var(--btn-bg); } /* piece detail surface itself is the dark treatment; the meta fields on it read green labels / yellow values like the gallery cards */ .surface.dark .field-label { color: rgba(0, 255, 0, 0.62); } .surface.dark .field-value { color: var(--btn-bg); } .surface.dark .field-value.title { color: var(--btn-bg); } /* ---- site footer (Ko-fi / support, on every page) ---- */ .site-footer { border-top: 1px solid rgba(0, 255, 0, 0.18); background: rgba(0, 0, 0, 0.92); text-align: center; padding: 2rem 0; margin-top: 2rem; } /* footer: "runs on donations" yellow, "Support it on Ko-fi" green (Jessica 2026-06-15) */ .site-footer p { margin: 0.3rem 0; color: var(--btn-bg); font-size: 0.95rem; } .site-footer a { color: var(--title); } .site-footer .kofi { font-weight: 600; color: var(--title); } /* visible route to the machine layer for any agent reading rendered HTML, even one that doesn't know the llms.txt convention (machine-readability audit 2026-06-15) */ .site-footer .bot-breadcrumb { font-size: 0.82rem; opacity: 0.85; margin-top: 0.6rem; } /* ---- about the human ---- */ .about-body p { margin: 0 0 1.1rem; } .about-body .contact { margin-top: 1.5rem; font-size: 0.95rem; } /* ---- submission form (in-house; posts to /api/submit) ---- */ .submit-intro { color: var(--text-on-dark); font-size: 1.02rem; margin: 0 0 2rem; } .submit-intro a { color: var(--title); } /* prefill from a chatbot link (#piece=…). The notice confirms the form was filled from a link; the paste box is the lenient fallback for a mangled hash. */ .prefill-notice { background: rgba(0, 255, 0, 0.06); border: 1px solid rgba(0, 255, 0, 0.28); border-radius: var(--radius); color: var(--title); font-size: 0.95rem; padding: 0.75rem 1rem; margin: 0 0 1.5rem; } .prefill-paste { display: flex; flex-direction: column; gap: 0.9rem; background: #000; border: 1px solid var(--card-border); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); margin: 0 0 1.5rem; } .prefill-paste .field-name { color: var(--title); font-weight: 600; font-size: 0.95rem; } .prefill-paste .field-hint { color: var(--btn-bg); font-size: 0.85rem; line-height: 1.5; } .prefill-paste code { font-family: var(--mono); font-size: 0.85em; } .prefill-paste textarea { background: #1f1708; border: 1px solid var(--card-border); border-radius: var(--radius); color: var(--btn-bg); font-family: var(--mono); font-size: 0.95rem; line-height: 1.6; padding: 0.65rem 0.8rem; width: 100%; resize: vertical; } .prefill-paste textarea:focus { outline: none; border-color: var(--btn-bg); box-shadow: 0 0 14px rgba(216, 194, 42, 0.3); } .prefill-paste .btn { align-self: flex-start; } /* submission form: yellow/brown boxes on black to match the about/essay dark theme (Jessica 2026-06-23). Labels stay green (header-like); hints + the box text are yellow; boxes are dark brown with a gold border. */ .art-form { display: flex; flex-direction: column; gap: 1.5rem; background: #000; border: 1px solid var(--card-border); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); } .art-form .field { display: flex; flex-direction: column; gap: 0.4rem; } .art-form .field-name { color: var(--title); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; } .art-form .field-name .req { color: var(--btn-bg); } .art-form .field-hint { color: var(--btn-bg); font-size: 0.85rem; line-height: 1.5; } .art-form input, .art-form textarea { background: #1f1708; border: 1px solid var(--card-border); border-radius: var(--radius); color: var(--btn-bg); font-family: var(--mono); font-size: 0.95rem; line-height: 1.6; padding: 0.65rem 0.8rem; width: 100%; resize: vertical; } .art-form input::placeholder, .art-form textarea::placeholder { color: rgba(216, 194, 42, 0.5); } .art-form input:focus, .art-form textarea:focus { outline: none; border-color: var(--btn-bg); box-shadow: 0 0 14px rgba(216, 194, 42, 0.3); } .art-form .btn { align-self: flex-start; } .submit-note { color: var(--btn-bg); font-size: 0.85rem; margin: 0; } .submit-result { margin: 2rem 0 1rem; } .result-panel { border: 1px solid rgba(0, 255, 0, 0.28); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); background: #050a05; color: var(--text-on-dark); } .result-panel .result-lead { font-weight: 600; color: var(--title); margin: 0 0 0.6rem; } .result-panel.pending { border-style: dashed; } .result-panel.error { border-color: rgba(255, 90, 90, 0.55); } .result-panel.error .result-lead { color: #ff7a7a; } .result-panel .notes-text { white-space: pre-wrap; color: var(--title); font-size: 0.92rem; line-height: 1.7; margin: 0.8rem 0 1.2rem; } .result-panel .donate-appeal { color: var(--title); margin: 0.8rem 0 1.2rem; } .result-panel .btn { margin-top: 0.3rem; }