.craft-page {
--bg: #f5f7f2;
--surface: #fff;
--soft: #eef4ea;
--ink: #172017;
--muted: #61705f;
--line: #d7dfd2;
--green: #2f7d4f;
--green-dark: #205d3a;
--gold: #c98f26;
width: min(1120px, 100%);
margin: 0 auto;
color: var(--ink);
font-family: Tahoma, Arial, sans-serif;
line-height: 1.65;
}
.craft-page * { box-sizing: border-box; }
.craft-page button, .craft-page input { font: inherit; }
.craft-hero,
.selected-panel,
.finder-panel,
.guide-panel,
.faq-panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
box-shadow: 0 12px 30px rgba(24, 37, 24, .1);
margin: 0 0 18px;
padding: 24px;
}
.craft-hero {
display: flex;
gap: 20px;
align-items: flex-end;
justify-content: space-between;
background: linear-gradient(135deg, rgba(47,125,79,.14), rgba(44,109,147,.12)), #fff;
}
.eyebrow,
.section-label {
margin: 0 0 6px;
color: var(--green-dark);
font-size: .82rem;
font-weight: 700;
text-transform: uppercase;
}
.craft-page-title {
margin: 0;
font-size: clamp(2rem, 5vw, 3.6rem);
line-height: 1.1;
}
.craft-page h2 {
margin: 0;
font-size: 1.5rem;
line-height: 1.25;
}
.craft-page h3 { margin: 0 0 8px; font-size: 1.05rem; }
.craft-page p { overflow-wrap: anywhere; }
.intro {
max-width: 680px;
margin: 12px 0 0;
color: var(--muted);
font-size: 1.05rem;
}
.hero-badges,
.category-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hero-badges { justify-content: flex-end; }
.hero-badges span,
.category-tabs button {
border: 1px solid var(--line);
background: #fff;
border-radius: 999px;
color: var(--green-dark);
font-weight: 700;
padding: 7px 12px;
}
.selected-summary {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.muted { color: var(--muted); margin: 3px 0 0; }
.recipe-layout {
display: grid;
grid-template-columns: minmax(330px, 1fr) minmax(280px, .9fr);
gap: 22px;
}
.recipe-grid-wrap,
.recipe-info,
.info-box,
.guide-grid article {
border: 1px solid var(--line);
border-radius: 8px;
background: #fbfcfa;
}
.recipe-grid-wrap,
.recipe-info { padding: 18px; }
.crafting-row {
display: grid;
grid-template-columns: auto 34px auto;
align-items: center;
gap: 16px;
margin-top: 8px;
}
.crafting-grid {
display: grid;
grid-template-columns: repeat(3, minmax(72px, 1fr));
width: min(100%, 270px);
aspect-ratio: 1;
gap: 8px;
}
.slot,
.result-slot {
border: 2px solid #b9c7b2;
border-radius: 6px;
background: linear-gradient(180deg, #f8fbf6, #e7eee2);
display: grid;
place-items: center;
}
.slot { aspect-ratio: 1; }
.result-slot { width: 92px; height: 92px; }
.arrow {
color: var(--gold);
font-size: 2rem;
font-weight: 800;
text-align: center;
}
.item-icon {
width: 42px;
height: 42px;
border: 2px solid rgba(23,32,23,.16);
border-radius: 6px;
display: grid;
place-items: center;
background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.28)), var(--item-color, #c8d2c0);
box-shadow: inset 0 -8px 0 rgba(0,0,0,.1);
font-size: .72rem;
font-weight: 800;
text-align: center;
}
.item-icon img {
width: 32px;
height: 32px;
object-fit: contain;
image-rendering: pixelated;
}
.item-icon-lg { width: 74px; height: 74px; }
.item-icon-lg img { width: 52px; height: 52px; }
.slot .item-icon { width: 52px; height: 52px; }
.slot .item-icon img { width: 38px; height: 38px; }
.result-slot .item-icon { width: 58px; height: 58px; }
.result-slot .item-icon img { width: 42px; height: 42px; }
.slot-empty { color: #9aa895; font-size: .82rem; }
.ingredient-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
padding: 0;
margin: 8px 0 16px;
list-style: none;
}
.ingredient-list li {
display: flex;
gap: 10px;
align-items: center;
border: 1px solid var(--line);
border-radius: 8px;
padding: 9px;
background: #fff;
}
.ingredient-list strong { display: block; line-height: 1.2; }
.ingredient-list span,
.recipe-card span,
.guide-grid p,
.faq-panel p,
.site-note { color: var(--muted); }
.info-box { padding: 13px; margin-top: 12px; }
.finder-head {
display: flex;
gap: 18px;
align-items: end;
justify-content: space-between;
margin-bottom: 16px;
}
.search-box { flex: 0 1 440px; }
.search-box input {
width: 100%;
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px 14px;
}
.category-tabs { margin-bottom: 18px; }
.category-tabs button { cursor: pointer; }
.category-tabs button.active {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.recipe-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.recipe-card {
display: grid;
grid-template-columns: 42px 1fr;
gap: 10px;
align-items: center;
min-height: 74px;
width: 100%;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
color: var(--ink);
padding: 10px;
text-align: left;
cursor: pointer;
}
.recipe-card:hover,
.recipe-card.active {
border-color: var(--green);
background: var(--soft);
}
.recipe-card strong { display: block; line-height: 1.2; }
.empty-state {
border: 1px dashed var(--line);
border-radius: 8px;
padding: 18px;
color: var(--muted);
text-align: center;
}
.guide-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 14px;
}
.guide-grid article { padding: 16px; }
.faq-panel details {
border-top: 1px solid var(--line);
padding: 14px 0;
}
.faq-panel details:first-of-type { margin-top: 10px; }
.faq-panel summary { cursor: pointer; font-weight: 700; }
.site-note { font-size: .86rem; margin: 12px 4px 0; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
@media (max-width: 820px) {
.craft-hero,
.finder-head,
.selected-summary { display: block; }
.hero-badges {
justify-content: flex-start;
margin-top: 16px;
}
.recipe-layout,
.guide-grid { grid-template-columns: 1fr; }
.crafting-row {
grid-template-columns: 1fr;
justify-items: center;
}
.arrow { transform: rotate(90deg); }
.search-box {
display: block;
margin-top: 12px;
}
}
@media (max-width: 470px) {
.craft-hero,
.selected-panel,
.finder-panel,
.guide-panel,
.faq-panel { padding: 16px; }
.crafting-grid {
width: min(100%, 238px);
gap: 6px;
}
.recipe-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recipe-card {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
}