/* cnybees pdf: BentoPDF in the cnybees.buzz colours, with the house font on titles. apply_theme.py fills in better-vcr.df47bded42.woff2 and serves this file as /cnybees/cnybees..css. Most rules start with "html" so they still win over BentoPDF stylesheets that load later. */ @font-face { font-family: 'Better VCR'; src: url('better-vcr.df47bded42.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* The cnybees.buzz palette (beecams-with-light-toggle, the page's :root). */ --cny-bg: #141210; --cny-panel: #1c1815; --cny-panel2: #231e19; --cny-border: #3a2f24; --cny-accent: #ffb300; --cny-accent2: #e0592b; --cny-text: #efe4d4; --cny-muted: #8a7a67; --cny-body: #cfc2b0; --cny-ink: #141210; /* text on amber */ --font: 'Better VCR', ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace; /* Tailwind's grays become the cnybees browns. BentoPDF's pairings stay: 900 is the page, 800 the cards and bars, 700 the borders. */ --color-gray-50: #f8f3eb; --color-gray-100: #efe4d4; --color-gray-200: #e3d7c6; --color-gray-300: #cfc2b0; --color-gray-400: #a69683; --color-gray-500: #8a7a67; --color-gray-600: #4e4032; --color-gray-700: #3a2f24; --color-gray-800: #1c1815; --color-gray-900: #141210; --color-gray-950: #0c0b09; /* Indigo, BentoPDF's accent, becomes the cnybees amber. */ --color-indigo-50: #fff8e1; --color-indigo-100: #ffecb3; --color-indigo-200: #ffe082; --color-indigo-300: #ffd54f; --color-indigo-400: #ffb300; --color-indigo-500: #ffb300; --color-indigo-600: #ffb300; --color-indigo-700: #ffa000; --color-indigo-800: #ff8f00; --color-indigo-900: #5c3d00; --color-indigo-950: #3a2700; } html { scrollbar-color: var(--cny-border) var(--cny-panel); } ::selection { background: rgba(255, 179, 0, 0.35); color: var(--cny-text); } /* Colours BentoPDF writes out by hand (src/css/styles.css) rather than through Tailwind. */ html body { background-color: var(--cny-bg); color: var(--cny-body); } html .tool-card { background-color: var(--cny-panel); border-color: var(--cny-border); } html .tool-card:hover { border-color: var(--cny-accent2); } html .category-header { color: var(--cny-text); } html .category-header:hover, html .category-header:hover .category-chevron, html .faq-item.open .faq-question, html .legal-content h3, html .legal-content a { color: var(--cny-accent); } html .legal-content a:hover { color: var(--color-indigo-300); } html .legal-content p, html .legal-content ul { color: var(--color-gray-400); } html .compact-mode .tool-card { border-bottom-color: var(--cny-panel); } html .compact-mode .tool-card:hover { background-color: var(--cny-panel); border-color: var(--cny-panel); } ::-webkit-scrollbar-track, html #shortcuts-list::-webkit-scrollbar-track { background: var(--cny-panel); } ::-webkit-scrollbar-thumb, html #shortcuts-list::-webkit-scrollbar-thumb { background: var(--cny-border); } ::-webkit-scrollbar-thumb:hover, html #shortcuts-list::-webkit-scrollbar-thumb:hover { background: var(--cny-muted); } html #tool-interface { color: var(--cny-body); } html .sortable-ghost { border-color: var(--cny-accent); } html .pdf-panel { border-color: var(--cny-border); background-color: var(--cny-panel); } html .pill { background-color: var(--cny-border); color: var(--cny-body); } html .feature-card, html .testimonial-card { background-color: var(--cny-panel); border-color: var(--cny-border); } html .cta-button { background-color: var(--cny-accent); } html .cta-button:hover { background-color: var(--color-indigo-700); } html .btn-gradient { background-image: linear-gradient(to bottom, #ffc107, var(--cny-accent)); } html .btn-gradient:hover { box-shadow: 0 10px 15px -3px rgba(255, 179, 0, 0.3), 0 4px 6px -4px rgba(255, 179, 0, 0.3); } html .btn-gradient:focus { box-shadow: 0 0 0 2px var(--cny-bg), 0 0 0 4px var(--cny-accent); } html .marker-slanted::before { background: linear-gradient(120deg, var(--cny-accent), var(--cny-accent2)); } html .section-divider { background: linear-gradient(to right, transparent, var(--cny-accent), transparent); } html .solid-spinner { border-color: var(--cny-border); border-bottom-color: var(--cny-accent); } html .saved-signature.selected { border-color: var(--cny-accent); box-shadow: 0 0 10px rgba(255, 179, 0, 0.5); } html .shortcut-key { color: var(--cny-text); background-color: var(--cny-border); border-color: var(--color-gray-600); box-shadow: 0 1px 0 0 var(--cny-panel); } html .shortcut-input:focus { border-color: var(--cny-accent); box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.2); } html input[type='color'] { border-color: var(--color-gray-600); } /* Text fields look like the camera picker on cnybees.buzz. */ html :is(input, select, textarea).bg-gray-700 { background-color: var(--cny-panel2); } html :is(input, select, textarea).border-gray-600 { border-color: var(--cny-border); } /* White text becomes the cnybees cream ... */ .text-white, .hover\:text-white:hover { color: var(--cny-text); } /* ... except on amber, which is light: anything on it gets dark text. */ .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .hover\:bg-indigo-500:hover, .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover, .bg-indigo-500 .text-white, .bg-indigo-600 .text-white, .bg-indigo-700 .text-white, html .cta-button, html .btn-gradient { color: var(--cny-ink); } /* The house font (Better VCR, house-font repo) on titles only: tool names on the cards and on each tool's page, the page and section headings, and the brand. Descriptions and body text keep BentoPDF's DM Sans. The font has one weight, so no fake bold, and its letters are wide, so card titles are a little smaller. (No ID selectors in this list: :is() would give every title an ID's weight.) */ html :is( .tool-card h3, [id='tools-header'] h1, h1[data-i18n$='.name'], .category-header, :is(h1, h2, h3)[data-i18n$='.title'], :is(h1, h2, h3)[data-i18n$='Title'], nav[data-simple-nav] .cnybees-brand, footer .cnybees-brand ) { font-family: var(--font); font-weight: 400; font-synthesis: none; } html .tool-card h3 { font-size: 0.9rem; line-height: 1.35; color: var(--cny-text); transition: color 0.15s ease; } html .tool-card:hover h3 { color: var(--cny-accent); } /* The brand in the top bar and footer, like the title on cnybees.buzz. (The breadcrumb on tool pages is a