/* ========================================================================== MyBuddhaJ — global styles Load order matters: this file is pulled in after the DevExpress Fluent theme, so anything here wins over theme defaults for plain HTML. DevExpress *components* are themed through their own --dxbl-* custom properties and are adjusted in the scoped .razor.css files, not here. Bootstrap is deliberately NOT referenced by this project. The handful of Bootstrap-shaped class names the markup uses (.card, .btn, .form-control, .w-100, .mt-3, .text-danger, .small, .fw-bold) are defined at the bottom of this file. Do not add more of them ad hoc — either define it here or use a real class. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { /* Brand — Tibetan maroon and gold. */ --mbj-primary: #6B2737; --mbj-primary-dark: #4A1A26; --mbj-primary-deep: #2A1016; --mbj-primary-tint: #8A4152; --mbj-accent: #C8952B; --mbj-accent-bright: #E3B65A; /* Neutrals — warm, so they sit with the maroon instead of fighting it. */ --mbj-surface: #FBF8F4; --mbj-card: #FFFFFF; --mbj-ink: #2A2024; --mbj-ink-muted: #6E6167; --mbj-border: #E9E1D9; --mbj-danger: #A32C2C; /* Parchment — the second, warmer palette. It began as literals inside About.razor.css and is now shared, because the Blog post page adopts the same scheme. Distinct from the maroon brand above on purpose: these pages are for reading rather than for using, and they are quieter. **Brass is for borders and rules, never for text.** #A97D3D on the paper tone is about 3.0:1 — fine for a 2px rule, under the 4.5:1 body-text minimum. Pine is the text accent at roughly 6.9:1, and is what links use. */ --mbj-parchment-bg: #E8E2D3; --mbj-parchment-paper: #EFE9DC; --mbj-parchment-ink: #24231F; --mbj-parchment-ink-soft: #55524A; --mbj-parchment-pine: #445640; --mbj-parchment-brass: #A97D3D; --mbj-parchment-line: #C9C0AC; /* The parchment pages' webfonts. Unlike the two stacks below these are Google-hosted and requested per page (see About's HeadContent), so they do not follow the "no webfont request" rule the rest of the app keeps to. */ --mbj-font-parchment-display: 'Fraunces', Georgia, 'Times New Roman', serif; --mbj-font-parchment-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mbj-font-parchment-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type. Both stacks are system fonts: no webfont request, so the PWA renders identically offline and there is nothing to precache. */ --mbj-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mbj-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; /* Elevation and shape. Shadows are tinted with the brand rather than pure black, which is what keeps them from looking grey and cheap. */ --mbj-shadow-sm: 0 1px 2px rgba(42, 16, 22, .06), 0 1px 3px rgba(42, 16, 22, .08); --mbj-shadow-md: 0 2px 4px rgba(42, 16, 22, .05), 0 8px 24px rgba(42, 16, 22, .10); --mbj-shadow-lg: 0 4px 8px rgba(42, 16, 22, .06), 0 16px 40px rgba(42, 16, 22, .13); --mbj-radius: 12px; --mbj-radius-sm: 8px; /* Content measure — one source of truth for every page container. */ --mbj-measure: 720px; --mbj-measure-wide: 960px; /* Focus ring. Deliberately NOT --mbj-accent: #C8952B on white measures 2.70:1, under the 3:1 WCAG minimum for a focus indicator. This darker gold measures 4.51:1 and keeps the same character. On the dark drawer the bright gold is used instead, where it measures 3.95:1. */ --mbj-focus: #9A6F16; /* Bridge to the --bs-* names the scaffolded template CSS already reads. --bs-primary in particular is what Drawer.razor.css fell back off of. */ --bs-primary: var(--mbj-primary); --bs-secondary-color: var(--mbj-ink-muted); /* ---------------------------------------------------------------------- DevExpress Fluent accent ramp. THIS IS THE LINE THAT DOES THE WORK on DevExpress 26.1+. The whole ramp is derived from this one base colour, so setting it retints DxButton Primary, DxPopup, DxTextBox focus and the RichEdit ribbon in one go. ---------------------------------------------------------------------- */ --dxbl-accent-color: #6B2737; /* ---------------------------------------------------------------------- The per-stop overrides below, and why they stopped being enough. On 25.2 the theme loaded accents/blue.min.css, which set --dxds-primary-NN: var(--dxbl-accent-color-NN, ) so defining the 17 stops here was the whole fix, and the old comment here correctly noted "nothing else declares these". **That is no longer true.** On 26.1.3, core.min.css declares on :root: --dxbl-accent-color-90: oklch(from var(--dxbl-accent-color) l c h) and it loads *after* app.css, so it wins. With no --dxbl-accent-color defined, that oklch() is invalid, the stop computes to nothing, and --dxds-primary-90 falls all the way back to Fluent blue #0f6cbd -- which is exactly what the Save button on /journal was rendering. The stops are kept because they cost nothing and still apply on any build where DevExpress does not redeclare them. But **if the accent looks blue again, fix --dxbl-accent-color above, not these.** ---------------------------------------------------------------------- */ --dxbl-accent-color-10: #FAEEF1; --dxbl-accent-color-20: #F3DAE0; --dxbl-accent-color-30: #EBC4CE; --dxbl-accent-color-40: #E0AAB8; --dxbl-accent-color-50: #D28FA1; --dxbl-accent-color-60: #C1748A; --dxbl-accent-color-70: #AC5A72; --dxbl-accent-color-80: #8E3D56; --dxbl-accent-color-90: #6B2737; --dxbl-accent-color-100: #612333; --dxbl-accent-color-110: #551E2C; --dxbl-accent-color-120: #4A1A26; --dxbl-accent-color-130: #3E1520; --dxbl-accent-color-140: #33111A; --dxbl-accent-color-150: #2A1016; --dxbl-accent-color-160: #1E0B10; --dxbl-accent-color-170: #140709; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--mbj-surface); color: var(--mbj-ink); font-family: var(--mbj-font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--mbj-font-display); color: var(--mbj-primary); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 0.75rem; text-wrap: balance; } h1 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.25rem); } h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.6rem); } h3 { font-size: 1.2rem; } /* The scaffold suppressed the focus ring on h1 because Blazor focuses the heading on navigation. Keep it invisible for mouse users but restore a real ring for keyboard users. */ h1:focus { outline: none; } h1:focus-visible { outline: 2px solid var(--mbj-focus); outline-offset: 4px; border-radius: 2px; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--mbj-primary); text-decoration-color: color-mix(in srgb, var(--mbj-primary) 35%, transparent); text-underline-offset: 0.15em; transition: color .15s ease, text-decoration-color .15s ease; } a:hover { color: var(--mbj-primary-tint); text-decoration-color: currentColor; } /* One consistent keyboard ring for everything focusable. */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mbj-focus); outline-offset: 2px; border-radius: var(--mbj-radius-sm); } hr { border: 0; border-top: 1px solid var(--mbj-border); margin: 2rem 0; } ::selection { background: color-mix(in srgb, var(--mbj-accent) 30%, transparent); } /* -------------------------------------------------------------------------- 3. Layout -------------------------------------------------------------------------- */ /* Every page wraps itself in .main-content. Before this it was an undefined class doing nothing and each page re-invented its own container. */ .main-content { width: 100%; max-width: var(--mbj-measure); margin-inline: auto; padding: 2rem 1rem 3rem; box-sizing: border-box; } .main-content--wide { max-width: var(--mbj-measure-wide); } /* -------------------------------------------------------------------------- 4. Card -------------------------------------------------------------------------- */ .card { background: var(--mbj-card); border: 1px solid var(--mbj-border); border-radius: var(--mbj-radius); box-shadow: var(--mbj-shadow-md); overflow: hidden; /* Thin brand rule across the top — the cheapest way to make a plain white box read as part of a designed system. */ border-top: 3px solid var(--mbj-primary); } .card-body { padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); } .card-body > h1:first-child, .card-body > h2:first-child { margin-top: 0; } /* Lead paragraph — the first line of body copy on a page. */ .lead { font-size: 1.08rem; color: var(--mbj-ink-muted); } /* Centered page intro used by Meditation and available to future pages. */ .page-header { text-align: center; margin-bottom: 1.75rem; } .page-subtitle { color: var(--mbj-ink-muted); margin-top: 0.5rem; font-size: 1.05rem; } /* Small gold divider — a decorative full stop under a heading. */ .rule-accent { width: 56px; height: 2px; border: 0; margin: 1.25rem auto; background: linear-gradient(90deg, transparent, var(--mbj-accent), transparent); } /* -------------------------------------------------------------------------- 5. Buttons and form controls These exist because Bootstrap is not loaded; Login.razor asks for them. -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1.15rem; border: 1px solid transparent; border-radius: var(--mbj-radius-sm); font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--mbj-primary); border-color: var(--mbj-primary); color: #fff; box-shadow: var(--mbj-shadow-sm); } .btn-primary:hover { background-color: var(--mbj-primary-tint); border-color: var(--mbj-primary-tint); color: #fff; } .form-control { display: block; width: 100%; padding: 0.55rem 0.75rem; background-color: #fff; border: 1px solid var(--mbj-border); border-radius: var(--mbj-radius-sm); color: var(--mbj-ink); font: inherit; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus { border-color: var(--mbj-primary-tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mbj-primary) 15%, transparent); outline: none; } .form-control::placeholder { color: var(--mbj-ink-muted); opacity: .75; } /* -------------------------------------------------------------------------- 6. Validation — carried over from the scaffold, retinted -------------------------------------------------------------------------- */ .valid.modified:not([type=checkbox]) { outline: 1px solid #2E7D4F; } .invalid { outline: 1px solid var(--mbj-danger); } .validation-message { color: var(--mbj-danger); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* -------------------------------------------------------------------------- 7. Icons Inline SVG delivered as a CSS mask rather than a background-image. The mask only supplies the shape; the colour comes from background-color:currentColor, so an icon tints itself to whatever the surrounding text colour is and picks up hover/active states for free. A background-image data URI would bake the fill in and could not do that. No network request, nothing extra to precache, works offline. -------------------------------------------------------------------------- */ .mbj-ico { display: inline-block; width: 1.15em; height: 1.15em; flex: 0 0 auto; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .mbj-ico-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.2l9 7.4'/%3E%3Cpath d='M5.6 9.6V20.4h12.8V9.6'/%3E%3Cpath d='M9.9 20.4v-5.2h4.2v5.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.2l9 7.4'/%3E%3Cpath d='M5.6 9.6V20.4h12.8V9.6'/%3E%3Cpath d='M9.9 20.4v-5.2h4.2v5.2'/%3E%3C/svg%3E"); } /* Lotus. */ .mbj-ico-lotus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.4c0 3.6 3.6 6.1 8 6.1s8-2.5 8-6.1'/%3E%3Cpath d='M4 13.4c1.7-1.4 3.8-1.6 5.4-.5'/%3E%3Cpath d='M20 13.4c-1.7-1.4-3.8-1.6-5.4-.5'/%3E%3Cpath d='M12 19.5c-2.3-1.7-3.5-3.9-3.5-6.4S9.7 8.3 12 6.4c2.3 1.9 3.5 4.4 3.5 6.7s-1.2 4.7-3.5 6.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.4c0 3.6 3.6 6.1 8 6.1s8-2.5 8-6.1'/%3E%3Cpath d='M4 13.4c1.7-1.4 3.8-1.6 5.4-.5'/%3E%3Cpath d='M20 13.4c-1.7-1.4-3.8-1.6-5.4-.5'/%3E%3Cpath d='M12 19.5c-2.3-1.7-3.5-3.9-3.5-6.4S9.7 8.3 12 6.4c2.3 1.9 3.5 4.4 3.5 6.7s-1.2 4.7-3.5 6.4z'/%3E%3C/svg%3E"); } /* Open book. */ .mbj-ico-journal { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.4C10.3 6.1 8.2 5.4 5.6 5.4H3v12.3h2.6c2.6 0 4.7.7 6.4 2'/%3E%3Cpath d='M12 7.4c1.7-1.3 3.8-2 6.4-2H21v12.3h-2.6c-2.6 0-4.7.7-6.4 2'/%3E%3Cpath d='M12 7.4v12.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.4C10.3 6.1 8.2 5.4 5.6 5.4H3v12.3h2.6c2.6 0 4.7.7 6.4 2'/%3E%3Cpath d='M12 7.4c1.7-1.3 3.8-2 6.4-2H21v12.3h-2.6c-2.6 0-4.7.7-6.4 2'/%3E%3Cpath d='M12 7.4v12.3'/%3E%3C/svg%3E"); } /* Article — lines on a page. */ .mbj-ico-blog { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='4.2' width='16.8' height='15.6' rx='2.4'/%3E%3Cpath d='M7.2 8.7h9.6'/%3E%3Cpath d='M7.2 12h9.6'/%3E%3Cpath d='M7.2 15.3h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='4.2' width='16.8' height='15.6' rx='2.4'/%3E%3Cpath d='M7.2 8.7h9.6'/%3E%3Cpath d='M7.2 12h9.6'/%3E%3Cpath d='M7.2 15.3h6'/%3E%3C/svg%3E"); } .mbj-ico-person { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.7'/%3E%3Cpath d='M4.8 20.3c0-3.5 3.2-5.9 7.2-5.9s7.2 2.4 7.2 5.9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.7'/%3E%3Cpath d='M4.8 20.3c0-3.5 3.2-5.9 7.2-5.9s7.2 2.4 7.2 5.9'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 8. Utilities — only the ones the markup actually uses -------------------------------------------------------------------------- */ .w-100 { width: 100%; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .fw-bold { font-weight: 700; } .small { font-size: 0.875rem; } .text-danger { color: var(--mbj-danger); } .text-muted { color: var(--mbj-ink-muted); } /* -------------------------------------------------------------------------- 9. Blog — shared between the index and the post page These live here rather than in either page's scoped CSS because both pages render the same three things: a date, a quotation, and its attribution. Scoped files would mean two copies free to drift apart, which is the exact problem that moved the old page