#recipe-single {
background: var(--neutral-light);
color: var(--neutral-body);
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
#recipe-single article {
max-width: 860px;
margin: 0 auto;
} #recipe-single nav[aria-label="Breadcrumb"] {
margin-bottom: 1.5rem;
font-size: 0.875rem;
color: #6b7280;
}
#recipe-single nav a {
color: #6b7280;
text-decoration: none;
transition: color .25s ease;
}
#recipe-single nav a:hover {
color: #000;
} .recipe-hero {
position: relative;
border-radius: 1.25rem;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0,0,0,0.05);
}
.recipe-hero img {
width: 100%;
height: auto;
display: block;
transform: scale(1.02);
transition: transform 4s ease-out;
}
.recipe-hero:hover img { transform: scale(1.04); }
.recipe-hero .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}
.recipe-hero .hero-text {
position: absolute;
bottom: 0;
padding: 2rem 1.5rem;
color: #fff;
}
.recipe-hero .hero-text p {
text-transform: uppercase;
letter-spacing: .08em;
font-size: .75rem;
opacity: .9;
margin-bottom: .5rem;
}
.recipe-hero .hero-text h1 {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
}
@media (min-width:640px){ .recipe-hero .hero-text h1 { font-size: 3rem; } } .recipe-meta {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
gap: 1rem;
text-align: center;
background: #fff;
border: 1px solid var(--neutral-border);
border-radius: 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
padding: 1rem 1.5rem;
margin: 2rem auto 2.5rem;
}
.recipe-meta .meta-card p.label {
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .08em;
color: #6b7280;
margin-bottom: .25rem;
}
.recipe-meta .meta-card p.value {
font-weight: 700;
font-size: 1.1rem;
color: #000;
} #recipe-single h2 {
font-size: 1.75rem;
font-weight: 750;
color: #000;
margin-top: 2.5rem;
margin-bottom: 1rem;
position: relative;
}
#recipe-single h2::after {
content: "";
position: absolute;
left: 0;
bottom: -0.25rem;
width: 40px;
height: 3px;
background: var(--brand-mint);
border-radius: 2px;
} .recipe-ingredients ul {
background: #fff;
border: 1px solid var(--neutral-border);
border-radius: 1rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
padding: 1.25rem 1.75rem;
list-style: disc;
color: #222;
font-size: 1.05rem;
line-height: 1.8;
}
.recipe-ingredients li::marker {
color: var(--brand-mint);
} .recipe-prep ol {
counter-reset: step;
background: #fff;
border: 1px solid var(--neutral-border);
border-radius: 1rem;
padding: 1.5rem 1.75rem;
font-size: 1.05rem;
line-height: 1.8;
}
.recipe-prep li {
margin-bottom: .85rem;
position: relative;
padding-left: 2.25rem;
}
.recipe-prep li::before {
counter-increment: step;
content: counter(step);
position: absolute;
left: 0;
top: 0.1em;
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
background: var(--brand-mint);
color: #fff;
font-size: .9rem;
font-weight: 700;
line-height: 1.5rem;
text-align: center;
} .fitchef-tip-inline,
.fitchef-note-inline {
border-radius: 1rem;
padding: 1.25rem 1.5rem;
font-size: 1.05rem;
line-height: 1.8;
box-shadow: 0 4px 18px rgba(0,0,0,0.04);
margin: 2.25rem auto;
}
.fitchef-tip-inline {
background: linear-gradient(180deg, #ffffff 0%, #f7fdfa 100%);
border-left: 4px solid var(--brand-mint);
}
.fitchef-note-inline {
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
border-left: 4px solid #000;
}
.fitchef-tip-inline strong,
.fitchef-note-inline strong {
display: inline-block;
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 0.35rem;
color: #000;
} .fitchef-summary {
background: #f9fafb;
border-left: 4px solid var(--brand-mint);
border-radius: 1rem;
padding: 1rem 1.25rem;
margin: 2rem 0 2.5rem;
font-size: 1.05rem;
line-height: 1.7;
color: #111;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
} .recipe-cta {
display: inline-block;
margin-top: 2.5rem;
background: #000;
color: #fff;
font-weight: 600;
border-radius: 9999px;
padding: 0.75rem 1.75rem;
text-decoration: none;
transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.recipe-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
filter: brightness(1.1);
} @media (max-width:640px){
.recipe-hero .hero-text h1 { font-size: 2.25rem; }
.recipe-meta { grid-template-columns: repeat(2,1fr); padding: 1rem; }
.recipe-ingredients ul,
.recipe-prep ol { padding: 1rem 1.25rem; }
}