:root { --ink: #18211f; --muted: #68736e; --line: #d9e1dc; --paper: #f8faf8; --accent: #087f5b; --accent-dark: #056145; --warm: #e9c46a; --max: 1080px; } * { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; } a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; } header, main, footer { max-width: var(--max); margin: auto; padding-left: 24px; padding-right: 24px; } header { height: 68px; display: flex; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); } .brand { color: var(--ink); font-weight: 760; text-decoration: none; white-space: nowrap; } .header-search { position: relative; margin-left: auto; max-width: 340px; width: 100%; } input { width: 100%; border: 1px solid #b8c6bf; border-radius: 5px; background: #fff; color: var(--ink); padding: 10px 12px; font: inherit; } main { min-height: calc(100vh - 154px); padding-top: 36px; padding-bottom: 64px; } footer { color: var(--muted); border-top: 1px solid var(--line); font-size: 14px; padding-top: 24px; padding-bottom: 30px; } h1, h2, h3 { line-height: 1.16; letter-spacing: 0; } h1 { max-width: 760px; font-size: 42px; margin: 8px 0 12px; } h2 { font-size: 25px; margin: 0 0 16px; } h3 { font-size: 18px; margin: 28px 0 8px; } section { margin-top: 50px; } .hero { margin-top: 0; padding: 52px 0 30px; border-bottom: 1px solid var(--line); } .hero h1 { font-size: 48px; } .eyebrow { color: var(--accent-dark); font-size: 14px; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: .07em; } .hero-search { max-width: 650px; position: relative; margin-top: 28px; } .hero-search input { padding: 15px 17px; font-size: 17px; } .search-results { display: none; position: absolute; z-index: 10; width: 100%; top: calc(100% + 5px); background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px #18211f1c; } .search-results.active { display: block; } .search-results a { display: block; padding: 9px 12px; text-decoration: none; } .search-results a:hover { background: #edf5f0; } .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .category-grid a { background: #fff; min-height: 102px; padding: 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; } .category-grid strong, .category-grid span { display: block; } .category-grid span, .link-list span { color: var(--muted); font-size: 14px; } .link-list { list-style: none; padding: 0; margin: 0; } .link-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); } .columns { columns: 2; } .columns li { break-inside: avoid; } .breadcrumbs { color: var(--muted); font-size: 14px; margin-bottom: 28px; } .breadcrumbs span { padding: 0 7px; } .food-intro { margin-top: 0; } .calories { margin-top: 28px; font-size: 18px; } .calories strong { display: block; font-size: 58px; line-height: 1; } .calories span { color: var(--muted); font-size: 14px; } .macros { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 820px; border-top: 1px solid var(--line); margin-top: 36px; } .macros div { padding: 14px 10px 0 0; } dt { color: var(--muted); font-size: 14px; } dd { margin: 3px 0 0; font-weight: 700; } .calculator { background: #e8f3ed; padding: 24px; max-width: 680px; } .calculator label { display: flex; align-items: center; gap: 10px; max-width: 250px; } .calculator input { width: 100px; } .calculated-values { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; font-weight: 700; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; } table { border-collapse: collapse; width: 100%; min-width: 470px; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-size: 13px; font-weight: 700; } tbody tr:last-child td { border-bottom: 0; } .source { color: var(--muted); font-size: 14px; } @media (max-width: 640px) { header { padding-left: 16px; padding-right: 16px; } .header-search { display: none; } main, footer { padding-left: 16px; padding-right: 16px; } h1, .hero h1 { font-size: 34px; } .macros { grid-template-columns: repeat(2, 1fr); } .columns { columns: 1; } .category-grid { grid-template-columns: repeat(2, 1fr); } }