/* Shared styles for recipes.joeymeyer.com Per-recipe accent colors are set by the theme-* class on . */ :root { --bg: #1a1410; --bg-card: #241e18; --bg-card-alt: #2c2419; --border: #3d3226; --border-light: #4a3c2e; --text: #e8ddd0; --text-dim: #a69882; --text-warm: #d4a96a; --input-bg: #1e1812; --shadow: rgba(0,0,0,0.4); /* Defaults, overridden per theme */ --accent: #c7652e; --accent-glow: #e07a3a; --accent-soft: rgba(199,101,46,0.1); --accent-line: rgba(199,101,46,0.25); --accent-ring: rgba(199,101,46,0.15); --tint-a: rgba(199,101,46,0.08); --tint-b: rgba(168,58,42,0.06); } body.theme-chili { --accent: #c7652e; --accent-glow: #e07a3a; --accent-soft: rgba(199,101,46,0.1); --accent-line: rgba(199,101,46,0.25); --accent-ring: rgba(199,101,46,0.15); --tint-a: rgba(199,101,46,0.08); --tint-b: rgba(168,58,42,0.06); } body.theme-banana { --accent: #c9962e; --accent-glow: #e5b449; --accent-soft: rgba(201,150,46,0.1); --accent-line: rgba(201,150,46,0.25); --accent-ring: rgba(201,150,46,0.15); --tint-a: rgba(229,180,73,0.08); --tint-b: rgba(150,110,40,0.06); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: 'Source Serif 4', Georgia, serif; min-height: 100vh; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 20% 0%, var(--tint-a) 0%, transparent 60%), radial-gradient(ellipse at 80% 100%, var(--tint-b) 0%, transparent 60%); pointer-events: none; z-index: 0; } .container { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } /* Header */ header { text-align: center; margin-bottom: 3rem; padding-top: 1.5rem; } .subtitle { font-weight: 300; font-style: italic; color: var(--text-dim); font-size: 0.95rem; letter-spacing: 0.08em; margin-bottom: 0.5rem; } h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 700; color: var(--text); line-height: 1.15; margin-bottom: 0.4rem; } h1 span { color: var(--accent); } .tagline { font-size: 0.9rem; color: var(--text-dim); font-weight: 300; margin-top: 0.75rem; line-height: 1.5; } .divider { width: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); margin: 1.5rem auto; } /* Back link */ .back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-dim); text-decoration: none; font-size: 0.85rem; font-style: italic; transition: color 0.2s; } .back-link:hover { color: var(--text-warm); } /* Recipe index cards */ .recipe-grid { display: grid; gap: 1rem; } .recipe-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--card-accent, var(--accent)); border-radius: 12px; padding: 1.5rem 1.75rem; text-decoration: none; color: inherit; box-shadow: 0 8px 32px var(--shadow); transition: transform 0.2s ease, border-color 0.2s ease; } .recipe-card:hover { transform: translateY(-2px); border-color: var(--border-light); border-left-color: var(--card-accent, var(--accent)); } .recipe-card-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 0.35rem; } .recipe-card-kicker { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--card-accent, var(--accent)); margin-bottom: 0.6rem; } .recipe-card-desc { font-size: 0.92rem; color: var(--text-dim); line-height: 1.6; } /* Input section */ .input-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 8px 32px var(--shadow); } .input-label { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--text-warm); margin-bottom: 1rem; display: block; } .input-row { display: flex; align-items: center; gap: 1rem; } .input-row input[type="number"] { font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 500; color: var(--accent-glow); background: var(--input-bg); border: 1.5px solid var(--border-light); border-radius: 8px; padding: 0.5rem 1rem; width: 140px; text-align: center; outline: none; transition: border-color 0.3s, box-shadow 0.3s; } .input-row input[type="number"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .input-row input[type="number"]::-webkit-inner-spin-button, .input-row input[type="number"]::-webkit-outer-spin-button { opacity: 1; height: 36px; } .input-unit { font-size: 1.15rem; color: var(--text-dim); font-style: italic; } .base-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.75rem; font-style: italic; } /* Results */ .results { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; } .results.visible { opacity: 1; transform: translateY(0); } .section-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--text-warm); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; } .section-title .rule { flex: 1; height: 1px; background: var(--border); } .reset-btn { font-family: 'Source Serif 4', serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); background: none; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer; transition: color 0.2s, border-color 0.2s, opacity 0.2s; } .reset-btn:hover { color: var(--text-warm); border-color: var(--border-light); } .reset-btn[hidden] { display: none; } /* Checkboxes: the native input is hidden and the styled box is its label. */ .visually-hidden-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .check-box, .step-num { flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); border-radius: 6px; color: var(--accent); cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .check-box:hover, .step-num:hover { border-color: var(--accent); } .visually-hidden-check:focus-visible + .check-box, .visually-hidden-check:focus-visible + .step-num { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .visually-hidden-check:checked + .check-box, .visually-hidden-check:checked + .step-num { background: var(--accent); border-color: var(--accent); color: var(--bg); } /* Totals / shopping list */ .totals-list { list-style: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .total-item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.7rem 1rem; border-top: 1px solid rgba(61,50,38,0.6); } .total-item:first-of-type { border-top: none; } .total-body { flex: 1; min-width: 0; } .total-item .check-box { width: 20px; height: 20px; margin-top: 0.15rem; font-size: 0.75rem; } .total-item .check-box::before { content: '✓'; opacity: 0; } .visually-hidden-check:checked + .check-box::before { opacity: 1; } .total-item .ingredient-row { padding: 0; } .total-item .ingredient-note { padding: 0.15rem 0 0; } .total-item.is-done .ingredient-name, .total-item.is-done .ingredient-amount, .total-item.is-done .ingredient-note { opacity: 0.4; } .total-item.is-done .ingredient-name { text-decoration: line-through; } .totals-note { font-size: 0.78rem; color: var(--text-dim); font-style: italic; margin-top: 0.75rem; line-height: 1.5; } /* Ingredients, shown inside the step that uses them */ .step-ingredients { list-style: none; margin-top: 0.85rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .step-ingredient { border-top: 1px solid rgba(61,50,38,0.6); } .step-ingredient:first-child { border-top: none; } .ingredient-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; } .ingredient-name { font-size: 0.95rem; color: var(--text); flex: 1; } .ingredient-amount { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 500; color: var(--accent-glow); text-align: right; white-space: nowrap; } .ingredient-note { font-size: 0.8rem; color: var(--text-dim); font-style: italic; padding: 0 1rem 0.65rem; margin-top: -0.15rem; } .is-optional .ingredient-name, .is-optional .ingredient-amount { opacity: 0.72; } .optional-tag { margin-left: 0.5rem; font-family: 'Source Serif 4', serif; font-style: normal; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); border: 1px solid var(--border-light); border-radius: 4px; padding: 0.1rem 0.35rem; vertical-align: 0.08em; } /* Garnishes / notes list */ .garnish-section { margin-top: 2.5rem; } .garnish-list { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; color: var(--text-dim); font-style: italic; font-size: 0.95rem; line-height: 1.7; } /* Yield badge */ .servings-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; padding: 0.6rem 1.2rem; margin-top: 1.5rem; font-size: 0.95rem; color: var(--text-warm); } .servings-badge strong { font-family: 'JetBrains Mono', monospace; color: var(--accent-glow); font-size: 1.1rem; } /* Recipe steps */ .steps-section { margin-top: 2.5rem; } .step-list { counter-reset: steps; list-style: none; padding: 0; } .step-list li { counter-increment: steps; display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .step-list li:last-child { border-bottom: none; } .step-body { flex: 1; min-width: 0; } .step-text { display: block; line-height: 1.65; font-size: 0.95rem; cursor: pointer; } /* The step number doubles as its checkbox — it becomes a tick once the step is done. */ .step-num { width: 30px; height: 30px; font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; } .step-num::before { content: counter(steps); } .visually-hidden-check:checked + .step-num::before { content: '✓'; } .step.is-done .step-text { text-decoration: line-through; opacity: 0.45; } .step.is-done .step-ingredients { opacity: 0.4; } /* Footer */ footer { text-align: center; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.8rem; font-style: italic; line-height: 1.6; } footer a { color: var(--text-warm); text-decoration: none; border-bottom: 1px dotted var(--border-light); } footer a:hover { color: var(--accent-glow); } @media (max-width: 500px) { .container { padding: 1.25rem 1rem 3rem; } .input-section { padding: 1.5rem; } .input-row input[type="number"] { font-size: 1.5rem; width: 110px; } .ingredient-row { padding: 0.7rem 0.85rem; } .ingredient-amount { font-size: 0.95rem; } .ingredient-note { padding: 0 0.85rem 0.65rem; } .step-list li { gap: 0.75rem; } .recipe-card { padding: 1.25rem; } }