/* ────────────────────────────────────────────────────────────────── Sandbox Tweaks — vibe / accent / hero overrides. Scoped to [data-sb-*] on so they layer cleanly over sandbox.css. ────────────────────────────────────────────────────────────────── */ /* ============= ACCENT — re-tints the brand-green identity ============= */ [data-sb-accent="sandstone"] { --green-50: #FFF6EB; --green-100: #FEEBC8; --green-200: #FBD38D; --green-300: #F6AD55; --green-600: #ED8936; --green-700: #C05621; --green-800: #9C4221; --brand-700: #C05621; --success-50: #FFF6EB; --success-600: #C05621; } [data-sb-accent="cobalt"] { --green-50: #E0EAFF; --green-100: #CDD7FE; --green-200: #A4BCFD; --green-300: #6C8DFC; --green-600: #3B82F6; --green-700: #1E4FCC; --green-800: #1E40AF; --brand-700: #1E4FCC; --success-50: #E0EAFF; --success-600: #1E4FCC; } [data-sb-accent="plum"] { --green-50: #F3E8FF; --green-100: #E9D5FF; --green-200: #D8B4FE; --green-300: #C084FC; --green-600: #A855F7; --green-700: #6B21A8; --green-800: #581C87; --brand-700: #6B21A8; --success-50: #F3E8FF; --success-600: #6B21A8; } /* Accent-aware response-hero gradient (sandbox.css uses a fixed green gradient) */ [data-sb-accent="sandstone"] .sb-hero-photo { background: linear-gradient(135deg, #FEEBC8, #F6AD55); } [data-sb-accent="cobalt"] .sb-hero-photo { background: linear-gradient(135deg, #CDD7FE, #6C8DFC); } [data-sb-accent="plum"] .sb-hero-photo { background: linear-gradient(135deg, #E9D5FF, #C084FC); } /* ============= HERO — reshape the photo card ============= */ [data-sb-hero="banner"] .sb-hero-photo { aspect-ratio: auto; height: 78px; padding: 0 16px; } [data-sb-hero="banner"] .sb-hero-photo .em { font-size: 44px; filter: drop-shadow(0 2px 4px rgba(14,22,18,.18)); } [data-sb-hero="banner"] .sb-hero-photo .badge { top: 50%; transform: translateY(-50%); right: 14px; } [data-sb-hero="banner"] .sb-hero-photo .meta { bottom: 50%; transform: translateY(50%); left: 80px; right: 200px; } [data-sb-hero="hidden"] .sb-hero-photo { display: none; } [data-sb-hero="hidden"] .sb-result-head { background: #fff; } /* ============= VIBE: Editorial — warm cream + display serif, posterized cards ============= */ [data-sb-vibe="editorial"] .sb-wrap { background: #F4EFE6; } [data-sb-vibe="editorial"] .sb-top { background: #FAF7F0; border-bottom-color: rgba(63,42,16,.10); } [data-sb-vibe="editorial"] .sb-page-head h1 { font-size: 52px; line-height: 1; letter-spacing: -.028em; margin-bottom: 14px; } [data-sb-vibe="editorial"] .sb-page-head p { font-size: 16px; max-width: 560px; color: #5C4A30; line-height: 1.6; } [data-sb-vibe="editorial"] .sb-banner { background: rgba(192,86,33,.05); border-color: rgba(192,86,33,.15); color: #5C4A30; border-radius: 4px; } [data-sb-vibe="editorial"] .sb-tabs { background: rgba(63,42,16,.06); border-radius: 4px; } [data-sb-vibe="editorial"] .sb-tabs button { border-radius: 2px; font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: .01em; } [data-sb-vibe="editorial"] .sb-tabs button.on { background: #FAF7F0; box-shadow: 0 1px 0 rgba(63,42,16,.10); } [data-sb-vibe="editorial"] .sb-panel { background: #FAF7F0; border: 1px solid rgba(63,42,16,.12); border-radius: 4px; box-shadow: 0 1px 0 rgba(63,42,16,.04); } [data-sb-vibe="editorial"] .sb-panel-head { border-bottom: 1px solid rgba(63,42,16,.10); padding: 18px 22px; } [data-sb-vibe="editorial"] .sb-panel-head .t { font-family: var(--serif); font-size: 16px; font-weight: 700; } [data-sb-vibe="editorial"] .sb-panel-body { padding: 22px; } [data-sb-vibe="editorial"] .sb-field input, [data-sb-vibe="editorial"] .sb-field select, [data-sb-vibe="editorial"] .sb-field textarea { background: rgba(255,255,255,.6); border-color: rgba(63,42,16,.14); border-radius: 2px; font-size: 15px; padding: 12px 14px; } [data-sb-vibe="editorial"] .sb-field label { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; } [data-sb-vibe="editorial"] .sb-result-head .nm h3 { font-size: 34px; line-height: 1; letter-spacing: -.022em; } [data-sb-vibe="editorial"] .sb-result-head .emoji-tile { display: none; } [data-sb-vibe="editorial"] .sb-result-head { padding: 26px 26px 22px; background: #FAF7F0; } [data-sb-vibe="editorial"] .sb-result-body { padding: 22px 26px 28px; } [data-sb-vibe="editorial"] .sb-nutr-grid { grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(63,42,16,.12); border-bottom: 1px solid rgba(63,42,16,.12); margin: 18px 0; } [data-sb-vibe="editorial"] .sb-nutr { background: transparent; border: 0; border-right: 1px solid rgba(63,42,16,.10); border-radius: 0; padding: 16px 12px; text-align: center; } [data-sb-vibe="editorial"] .sb-nutr:last-child { border-right: 0; } [data-sb-vibe="editorial"] .sb-nutr .lbl { font-family: var(--serif); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: #8C7A5A; } [data-sb-vibe="editorial"] .sb-nutr .val { font-size: 32px; font-weight: 400; font-family: var(--serif); } [data-sb-vibe="editorial"] .sb-section-lbl { font-family: var(--serif); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: #8C7A5A; } [data-sb-vibe="editorial"] .sb-tag { border-radius: 2px; font-weight: 600; } /* ============= VIBE: Terminal — dark page, mono everywhere, code-first ============= */ [data-sb-vibe="terminal"] .sb-wrap { background: #0E1612; } [data-sb-vibe="terminal"] .sb-top { background: #11181A; border-bottom-color: #233028; } [data-sb-vibe="terminal"] .sb-brand .name, [data-sb-vibe="terminal"] .sb-bcrumb strong { color: #C9E8A0; } [data-sb-vibe="terminal"] .sb-bcrumb, [data-sb-vibe="terminal"] .sb-bcrumb a { color: #6F8475; } [data-sb-vibe="terminal"] .sb-page-head h1 { font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; font-weight: 600; letter-spacing: -.01em; color: #C9E8A0; } [data-sb-vibe="terminal"] .sb-page-head h1::before { content: "> "; color: #6F8475; } [data-sb-vibe="terminal"] .sb-page-head p { color: #8FA98D; } [data-sb-vibe="terminal"] .sb-banner { background: rgba(182,220,133,.05); border-color: #2F4A22; color: #B6DC85; border-radius: 4px; } [data-sb-vibe="terminal"] .sb-banner .ic, [data-sb-vibe="terminal"] .sb-banner strong { color: #C9E8A0; } [data-sb-vibe="terminal"] .sb-tabs { background: #141D17; border: 1px solid #233028; border-radius: 4px; } [data-sb-vibe="terminal"] .sb-tabs button { font-family: ui-monospace, monospace; font-size: 12.5px; font-weight: 500; color: #8FA98D; border-radius: 2px; } [data-sb-vibe="terminal"] .sb-tabs button.on { background: #0E1612; color: #C9E8A0; box-shadow: none; border: 1px solid #2F4A22; } [data-sb-vibe="terminal"] .sb-tabs .badge { background: rgba(182,220,133,.12); color: #B6DC85; border-radius: 2px; } [data-sb-vibe="terminal"] .sb-panel { background: #141D17; border: 1px solid #233028; border-radius: 4px; } [data-sb-vibe="terminal"] .sb-panel-head { background: #11181A; border-bottom-color: #233028; padding: 10px 14px; } [data-sb-vibe="terminal"] .sb-panel-head .t { color: #C9E8A0; font-family: ui-monospace, monospace; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; } [data-sb-vibe="terminal"] .sb-panel-head .t .method { background: #0E1612; color: #95EAFF; border: 1px solid #2F4A22; } [data-sb-vibe="terminal"] .sb-panel-head .actions button { color: #8FA98D; } [data-sb-vibe="terminal"] .sb-panel-head .actions button:hover { background: #0E1612; color: #C9E8A0; } [data-sb-vibe="terminal"] .sb-field label { color: #B6DC85; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-field label::before { content: "$ "; color: #6F8475; } [data-sb-vibe="terminal"] .sb-field input, [data-sb-vibe="terminal"] .sb-field select, [data-sb-vibe="terminal"] .sb-field textarea { background: #0E1612; border-color: #233028; color: #C9E8A0; font-family: ui-monospace, monospace; border-radius: 4px; } [data-sb-vibe="terminal"] .sb-field input::placeholder { color: #6F8475; } [data-sb-vibe="terminal"] .sb-field input:focus, [data-sb-vibe="terminal"] .sb-field select:focus { border-color: #B6DC85; box-shadow: 0 0 0 3px rgba(182,220,133,.12); } [data-sb-vibe="terminal"] .sb-field .hint { color: #6F8475; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-suggest { background: #141D17; border-color: #233028; } [data-sb-vibe="terminal"] .sb-suggest button { color: #C9E8A0; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-suggest button:hover { background: #0E1612; } [data-sb-vibe="terminal"] .sb-suggest button .meta { color: #6F8475; } [data-sb-vibe="terminal"] .sb-search-wrap .ic, [data-sb-vibe="terminal"] .sb-search-wrap .clear { color: #8FA98D; } [data-sb-vibe="terminal"] .sb-result-head { background: linear-gradient(135deg, #11181A 0%, #141D17 100%); border-bottom-color: #233028; } [data-sb-vibe="terminal"] .sb-result-head .nm h3 { color: #C9E8A0; font-family: ui-monospace, monospace; font-weight: 600; letter-spacing: -.005em; } [data-sb-vibe="terminal"] .sb-result-head .nm .sub { color: #8FA98D; font-family: ui-monospace, monospace; font-size: 11.5px; } [data-sb-vibe="terminal"] .sb-result-head .nm .sub strong { color: #C9E8A0; } [data-sb-vibe="terminal"] .sb-result-head .emoji-tile { background: #0E1612; border-color: #2F4A22; } [data-sb-vibe="terminal"] .sb-nutr-grid { gap: 6px; } [data-sb-vibe="terminal"] .sb-nutr { background: #0E1612; border-color: #233028; border-radius: 4px; } [data-sb-vibe="terminal"] .sb-nutr .lbl { color: #6F8475; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-nutr .val { color: #C9E8A0; font-family: ui-monospace, monospace; font-weight: 600; } [data-sb-vibe="terminal"] .sb-nutr .val .u { color: #6F8475; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-section-lbl { color: #6F8475; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-section-lbl::before { content: "# "; color: #2F4A22; } [data-sb-vibe="terminal"] .sb-tag { border-radius: 2px; font-family: ui-monospace, monospace; font-weight: 500; font-size: 11px; } [data-sb-vibe="terminal"] .sb-tag.health { background: rgba(182,220,133,.10); color: #B6DC85; border-color: #2F4A22; } [data-sb-vibe="terminal"] .sb-tag.allergen { background: rgba(254,108,108,.10); color: #FCA5A5; border-color: rgba(254,108,108,.30); } [data-sb-vibe="terminal"] .sb-tag.diet { background: rgba(149,234,255,.10); color: #95EAFF; border-color: rgba(149,234,255,.30); } [data-sb-vibe="terminal"] .sb-tag.muted { background: rgba(255,255,255,.04); color: #8FA98D; border-color: #233028; } [data-sb-vibe="terminal"] .sb-tag.warn { background: rgba(252,201,92,.10); color: #FCC95C; border-color: rgba(252,201,92,.30); } [data-sb-vibe="terminal"] .sb-source { background: #0E1612; border-color: #2F4A22; color: #8FA98D; } [data-sb-vibe="terminal"] .sb-source strong { color: #C9E8A0; } [data-sb-vibe="terminal"] .sb-source a { color: #95EAFF; } [data-sb-vibe="terminal"] .sb-verify.verified, [data-sb-vibe="terminal"] .sb-verify.approved { background: rgba(182,220,133,.10); color: #B6DC85; border-color: #2F4A22; } [data-sb-vibe="terminal"] .sb-view-toggle { background: #0E1612; border: 1px solid #233028; } [data-sb-vibe="terminal"] .sb-view-toggle button { color: #8FA98D; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-view-toggle button.on { background: #141D17; color: #C9E8A0; border: 1px solid #2F4A22; } [data-sb-vibe="terminal"] .sb-empty .ic { background: #141D17; color: #6F8475; } [data-sb-vibe="terminal"] .sb-empty h3 { color: #C9E8A0; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-empty p { color: #8FA98D; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-mode-badge { background: rgba(252,201,92,.10); color: #FCC95C; border-color: rgba(252,201,92,.30); border-radius: 2px; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-catalog-item { background: #141D17; border-color: #233028; } [data-sb-vibe="terminal"] .sb-catalog-item:hover { background: #0E1612; border-color: #2F4A22; } [data-sb-vibe="terminal"] .sb-catalog-item .nm { color: #C9E8A0; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-catalog-item .cat { color: #6F8475; font-family: ui-monospace, monospace; } /* Hero photo: tone down the saturated gradient for terminal — looks alien against the dark UI */ [data-sb-vibe="terminal"] .sb-hero-photo { background: linear-gradient(135deg, #1A2620 0%, #233028 100%) !important; border-bottom: 1px solid #2F4A22; } [data-sb-vibe="terminal"] .sb-hero-photo::before { display: none; } [data-sb-vibe="terminal"] .sb-hero-photo .badge { background: rgba(14,22,18,.85); color: #B6DC85; border: 1px solid #2F4A22; backdrop-filter: none; } [data-sb-vibe="terminal"] .sb-hero-photo .meta .chip { background: rgba(14,22,18,.85); border: 1px solid #2F4A22; font-family: ui-monospace, monospace; } /* Recipe ingredients list */ [data-sb-vibe="terminal"] .sb-recipe-ings li { color: #8FA98D; font-family: ui-monospace, monospace; } [data-sb-vibe="terminal"] .sb-recipe-ings li::marker { color: #B6DC85; } [data-sb-vibe="terminal"] .sb-recipe-ings li::before { content: "→ "; color: #2F4A22; } [data-sb-vibe="editorial"] .sb-recipe-ings li { font-family: var(--serif); font-size: 15px; color: #5C4A30; }