/* ------------------------------------------- Receipt Ticket Theme (light + mono accents) Applies when -------------------------------------------- */ body.theme-receipt { background: linear-gradient(180deg, #fbf6ea 0%, #f4efdf 55%, #f1ebda 100%); color: #171717; } /* Make common text readable against light bg */ body.theme-receipt .section-title, body.theme-receipt .hero h1, body.theme-receipt .page-hero h1, body.theme-receipt h2, body.theme-receipt h3 { color: #121212; } body.theme-receipt .section-intro, body.theme-receipt .hero-body, body.theme-receipt .small, body.theme-receipt p { color: rgba(18, 18, 18, 0.78); } /* Header + demo banner */ body.theme-receipt .site-header { background: rgba(251, 246, 234, 0.92); border-bottom: 1px solid rgba(0,0,0,0.08); backdrop-filter: blur(8px); } body.theme-receipt .site-nav a { color: rgba(18,18,18,0.72); } body.theme-receipt .site-nav li.active a { color: #121212; border-bottom-color: rgba(0,0,0,0.35); } body.theme-receipt .demo-banner { background: #fffaf0; border-bottom: 1px solid rgba(0,0,0,0.08); } body.theme-receipt .demo-banner-pill { background: #f3ead5; border: 1px solid rgba(0,0,0,0.10); color: rgba(18,18,18,0.85); } /* Hero blocks (your screenshots show “missing hero css” here) */ body.theme-receipt .hero, body.theme-receipt .page-hero { background: linear-gradient(180deg, #fffaf0 0%, #f4efdf 100%); color: #121212; } body.theme-receipt .hero-overlay, body.theme-receipt .page-hero .hero-overlay { background: radial-gradient(circle at 30% 20%, rgba(0,0,0,0.04), transparent 55%), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.03), transparent 60%); } /* Buttons: keep your structure, just make them fit light mode */ body.theme-receipt .btn.btn-primary { background: #121212; color: #fff; border-color: rgba(0,0,0,0.25); } body.theme-receipt .btn.btn-outline { background: transparent; color: #121212; border-color: rgba(0,0,0,0.25); } /* Menu filter box */ body.theme-receipt .section-menu-filters { background: transparent; } body.theme-receipt .menu-public-filters { background: rgba(255,255,255,0.76); border: 1px solid rgba(0,0,0,0.10); box-shadow: 0 18px 50px rgba(0,0,0,0.10); backdrop-filter: blur(10px); } body.theme-receipt .menu-public-search { background: #fff; border: 1px dashed rgba(0,0,0,0.22); color: #121212; } body.theme-receipt .menu-public-search::placeholder { color: rgba(18,18,18,0.40); } /* Tag + category pills */ body.theme-receipt .menu-tag-pill, body.theme-receipt .menu-category-pill { background: #fff; color: rgba(18,18,18,0.80); border: 1px dashed rgba(0,0,0,0.20); } body.theme-receipt .menu-tag-pill:hover, body.theme-receipt .menu-category-pill:hover { border-color: rgba(0,0,0,0.35); } body.theme-receipt .menu-tag-pill.is-active { background: #121212; color: #fff; border-color: rgba(0,0,0,0.35); } body.theme-receipt .menu-category-pill.is-hidden-by-filter { display: none !important; } /* Receipt-style menu cards (hide image, go “ticket list” vibe) */ body.theme-receipt .menu-card { background: rgba(255,255,255,0.84); border: 1px dashed rgba(0,0,0,0.22); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.08); } body.theme-receipt .menu-card-image { display: none !important; /* receipt look */ } body.theme-receipt .menu-card-title { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: 0.02em; } body.theme-receipt .price-old { color: rgba(18,18,18,0.35); text-decoration-color: rgba(18,18,18,0.35); } body.theme-receipt .price-new { color: #0f766e; font-weight: 700; } /* Per-item tags */ body.theme-receipt .menu-item-tag { background: #f6efdf; border: 1px dashed rgba(0,0,0,0.18); color: rgba(18,18,18,0.72); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Theme switcher: make it light too */ body.theme-receipt .theme-switcher-panel { background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 24px 70px rgba(0,0,0,0.18); } body.theme-receipt .theme-option { background: #fff; border: 1px solid rgba(0,0,0,0.10); } body.theme-receipt .theme-option.is-active { border-color: rgba(0,0,0,0.30); } body.theme-receipt .theme-switcher-tab { background: rgba(255,255,255,0.90); border: 1px solid rgba(0,0,0,0.12); color: rgba(18,18,18,0.88); } /* ========================================================= Receipt Ticket Theme – finishing pass Paste at BOTTOM of theme-receipt.css so it overrides base. ========================================================= */ body.theme-receipt, body[data-theme="receipt"] { /* Core palette (paper + ink) */ --r-paper: #fbf6ed; --r-paper-2: #f3ecdf; --r-surface: #fffdf8; --r-ink: #1f2328; --r-muted: #586270; --r-border: rgba(15, 23, 42, 0.14); /* Accent: darker, “print-like” teal (less neon) */ --r-accent: #0b6f68; --r-accent-2: #0a5e58; /* Shadow */ --r-shadow: 0 18px 50px rgba(0, 0, 0, 0.14); background: var(--r-paper); color: var(--r-ink); } /* Kill the “everything dark” problem: Any big wrapper that was dark in other themes gets paper here. */ body.theme-receipt :is( .bg-dark, .section-dark, .panel-dark, .band-dark, .strip-dark, .hero-dark, .footer-dark, .dark, .menu-hero, .menu-hero-wrap, .menu-hero-bg ), body[data-theme="receipt"] :is( .bg-dark, .section-dark, .panel-dark, .band-dark, .strip-dark, .hero-dark, .footer-dark, .dark, .menu-hero, .menu-hero-wrap, .menu-hero-bg ) { background: var(--r-paper-2) !important; color: var(--r-ink) !important; } /* Header / nav readability */ body.theme-receipt :is(header, .site-header, .topbar, .header), body[data-theme="receipt"] :is(header, .site-header, .topbar, .header) { background: var(--r-paper-2); border-bottom: 1px solid var(--r-border); } body.theme-receipt :is(.brand, .site-brand, .brand-title, .logo-text), body[data-theme="receipt"] :is(.brand, .site-brand, .brand-title, .logo-text) { color: var(--r-ink); } body.theme-receipt :is(nav a, .nav a, .topnav a), body[data-theme="receipt"] :is(nav a, .nav a, .topnav a) { color: var(--r-ink); opacity: 0.86; } body.theme-receipt :is(nav a:hover, nav a:focus), body[data-theme="receipt"] :is(nav a:hover, nav a:focus) { opacity: 1; } /* Accent tuning (prices + little teal bits) */ body.theme-receipt :is(.price, .menu-price, .item-price, .card-price, .pill-price), body[data-theme="receipt"] :is(.price, .menu-price, .item-price, .card-price, .pill-price) { color: var(--r-accent) !important; font-weight: 700; } body.theme-receipt :is(.accent, .teal, .link-accent), body[data-theme="receipt"] :is(.accent, .teal, .link-accent) { color: var(--r-accent-2) !important; } /* Cards / menu items: keep them “receipt paper”, not grey-on-black */ body.theme-receipt :is(.card, .panel, .menu-card, .menu-item, .menu-tile), body[data-theme="receipt"] :is(.card, .panel, .menu-card, .menu-item, .menu-tile) { background: var(--r-surface) !important; color: var(--r-ink) !important; border: 1px solid var(--r-border) !important; box-shadow: 0 10px 26px rgba(0,0,0,0.08); } /* Pills (tags/categories) should go “receipt UI” instead of neon chips */ body.theme-receipt :is(.pill, .tag-pill, .filter-pill, .chip, button), body[data-theme="receipt"] :is(.pill, .tag-pill, .filter-pill, .chip, button) { border-color: var(--r-border); } body.theme-receipt :is(.pill.active, .tag-pill.active, .filter-pill.active, .chip.active), body[data-theme="receipt"] :is(.pill.active, .tag-pill.active, .filter-pill.active, .chip.active) { background: rgba(11, 111, 104, 0.10) !important; border-color: rgba(11, 111, 104, 0.35) !important; color: var(--r-ink) !important; } /* Theme switcher panel (this is what looks “unstyled/dark” in Receipt) */ body.theme-receipt :is( .theme-drawer, .theme-panel, .theme-picker, .theme-menu, #themeDrawer, #themePanel, #themePicker, #themeMenu ), body[data-theme="receipt"] :is( .theme-drawer, .theme-panel, .theme-picker, .theme-menu, #themeDrawer, #themePanel, #themePicker, #themeMenu ) { background: var(--r-surface) !important; color: var(--r-ink) !important; border: 1px solid var(--r-border) !important; box-shadow: var(--r-shadow) !important; } body.theme-receipt :is( .theme-drawer h3, .theme-panel h3, .theme-picker h3, .theme-drawer .title, .theme-panel .title ), body[data-theme="receipt"] :is( .theme-drawer h3, .theme-panel h3, .theme-picker h3, .theme-drawer .title, .theme-panel .title ) { color: var(--r-ink) !important; } /* Footer – stop inheriting the neon-dark footer */ body.theme-receipt :is(footer, .site-footer, .footer), body[data-theme="receipt"] :is(footer, .site-footer, .footer) { background: var(--r-paper-2) !important; color: var(--r-ink) !important; border-top: 1px dashed rgba(0,0,0,0.18); } body.theme-receipt :is(footer a, .site-footer a, .footer a), body[data-theme="receipt"] :is(footer a, .site-footer a, .footer a) { color: var(--r-accent) !important; text-decoration: underline; text-underline-offset: 2px; } body.theme-receipt :is(.footer-muted, footer .muted), body[data-theme="receipt"] :is(.footer-muted, footer .muted) { color: var(--r-muted) !important; } /* ============================================================ Receipt Ticket theme — stop dark-base bleed-through Paste at BOTTOM of theme-receipt.css ============================================================ */ /* 1) Map Receipt palette -> shared site tokens (base CSS uses these) */ body.theme-receipt, body[data-theme="receipt"] { --bg: var(--r-paper, #fbf6ed); --bg-alt: var(--r-paper-2, #f3ecdf); --surface: var(--r-surface, #fffdf8); --text: var(--r-ink, #1f2328); --muted: var(--r-muted, #586270); --border: var(--r-border, rgba(15, 23, 42, 0.14)); /* Darker teal = better readability (your current teal is a bit “glowy”) */ --accent: #0a5a55; --accent-2: #0a5a55; --accent-soft: rgba(10, 90, 85, 0.14); --shadow: 0 18px 50px rgba(0,0,0,0.14); } body.theme-receipt { background: radial-gradient(1100px 700px at 50% 0%, #ffffff 0%, var(--bg) 55%, var(--bg-alt) 100%); color: var(--text); } /* 2) Kill the “dark section” backgrounds/overlays from base styles */ body.theme-receipt .section, body.theme-receipt .section-alt, body.theme-receipt .page-hero, body.theme-receipt .page-hero-small, body.theme-receipt .section-menu-nav, body.theme-receipt .section-menu-filters, body.theme-receipt .demo-banner, body.theme-receipt .site-footer { background: transparent !important; background-image: none !important; } body.theme-receipt .section::before, body.theme-receipt .section::after, body.theme-receipt .section-alt::before, body.theme-receipt .section-alt::after, body.theme-receipt .page-hero::before, body.theme-receipt .page-hero::after, body.theme-receipt .site-footer::before, body.theme-receipt .site-footer::after { content: none !important; display: none !important; } /* Give the menu filter block a light “ticket panel” look */ body.theme-receipt .section-menu-nav .section-inner, body.theme-receipt .section-menu-filters .section-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); } /* 3) Contrast fixes (logo text, prices, links, forms, theme switcher, footer) */ /* Header text: make the teal wordmark readable everywhere */ body.theme-receipt .site-header, body.theme-receipt .site-header a { color: var(--text); } body.theme-receipt .site-header .brand, body.theme-receipt .site-header .brand-title, body.theme-receipt .site-header .wordmark { color: var(--text) !important; } /* Links / accents */ body.theme-receipt a { color: var(--accent); } body.theme-receipt a:hover { text-decoration: underline; } /* Prices (handles a few likely classnames so you don’t have to chase it) */ body.theme-receipt .menu-item-price, body.theme-receipt .item-price, body.theme-receipt .price, body.theme-receipt .menu-card-price, body.theme-receipt .menu-card .price { color: var(--accent) !important; font-weight: 800; } /* Contact form inputs were inheriting dark theme */ body.theme-receipt input[type="text"], body.theme-receipt input[type="email"], body.theme-receipt input[type="tel"], body.theme-receipt textarea, body.theme-receipt select { background: #fff !important; color: var(--text) !important; border: 1px solid rgba(15, 23, 42, 0.18) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset !important; } body.theme-receipt input::placeholder, body.theme-receipt textarea::placeholder { color: rgba(31, 35, 40, 0.45) !important; } /* Theme switcher: keep it “paper” and readable */ body.theme-receipt .theme-switcher-panel { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } body.theme-receipt .theme-switcher-tab { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } body.theme-receipt .theme-option { background: #fff !important; border: 1px solid rgba(0,0,0,0.10) !important; color: var(--text) !important; } body.theme-receipt .theme-option.is-active { border-color: rgba(10, 90, 85, 0.35) !important; box-shadow: 0 0 0 3px rgba(10, 90, 85, 0.10) !important; } /* Footer: light + clean (not the dark slab) */ body.theme-receipt .site-footer { background: var(--bg-alt) !important; border-top: 1px solid var(--border) !important; color: var(--muted) !important; } body.theme-receipt .site-footer h4, body.theme-receipt .site-footer strong { color: var(--text) !important; } /* ------------------------------------------------------------------ Receipt Ticket theme — override a few shared “dark UI” components that still have hard-coded backgrounds in styles.css ------------------------------------------------------------------ */ /* (Optional) soften the teal so it feels more “receipt ink” than neon */ body.theme-receipt{ --accent: #2d5f5b; --accent-2: #2d5f5b; --accent-soft: rgba(45, 95, 91, 0.12); /* used by some shared components */ --border-soft: rgba(15, 23, 42, 0.12); --shadow-soft: 0 18px 50px rgba(0,0,0,0.10); } /* These two cards are still picking up dark backgrounds from styles.css */ body.theme-receipt .kin-card, body.theme-receipt .story-side-card{ background: var(--surface); color: var(--text); border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft); } body.theme-receipt .kin-card h1, body.theme-receipt .kin-card h2, body.theme-receipt .kin-card h3, body.theme-receipt .story-side-card h1, body.theme-receipt .story-side-card h2, body.theme-receipt .story-side-card h3{ color: var(--text); } /* Back-to-top button: override the default “dark orb” styling */ body.theme-receipt .back-to-top{ background: rgba(255, 253, 248, 0.95); border: 1px solid var(--border-soft); color: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,0.18); } body.theme-receipt .back-to-top:hover{ background: #ffffff; transform: translateY(-2px); }