Oxygit

lidfood.html1088 lines
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Рецепты на день — курс для беременных</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <style>
    :root {
      --terra: #c66645;
      --terra-deep: #b55a3c;
      --cream: #f2ede4;
      --cream-soft: #f7f3ec;
      --blue: #c2d6e3;
      --ink: #2b231d;
      --ink-soft: rgba(43, 35, 29, 0.72);
      --ink-mute: rgba(43, 35, 29, 0.5);
      --line: rgba(43, 35, 29, 0.14);
      --pad: clamp(1.25rem, 4vw, 3rem);
      --radius-pill: 999px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: "Montserrat", system-ui, sans-serif;
      background: var(--cream-soft);
      color: var(--ink);
      line-height: 1.55;
      min-height: 100vh;
    }

    /* ——— Intro strip ——— */
    .intro {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(12rem, 0.55fr) minmax(12rem, 0.55fr);
      min-height: min(72vh, 640px);
      background: var(--cream);
      overflow: hidden;
    }

    .intro-photo {
      position: relative;
      min-height: 320px;
      background:
        linear-gradient(180deg, transparent 55%, rgba(43, 35, 29, 0.18) 100%),
        url("recipe-01-omelette.png")
          center / cover no-repeat;
      animation: fade-scale 1.1s ease both;
    }

    .badge-arc {
      position: absolute;
      top: 0;
      left: 0;
      width: clamp(7.5rem, 18vw, 11rem);
      height: clamp(7.5rem, 18vw, 11rem);
      background: var(--blue);
      border-radius: 0 0 100% 0;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 1.1rem 0 0 1.1rem;
      animation: arc-in 0.9s ease 0.15s both;
    }

    .badge-arc span {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--ink);
    }

    .intro-mid {
      background: var(--terra);
      color: var(--cream);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(1.5rem, 3vw, 2.5rem);
      animation: slide-up 0.85s ease 0.1s both;
    }

    .intro-mid .eyebrow {
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      opacity: 0.9;
      margin-bottom: 0.45rem;
    }

    .intro-mid h1 {
      font-size: clamp(1.55rem, 2.8vw, 2.15rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
      text-transform: lowercase;
      max-width: 10ch;
    }

    .intro-mid .rule {
      width: 2.4rem;
      height: 2px;
      background: var(--cream);
      margin-top: 1.35rem;
      opacity: 0.85;
    }

    .intro-side {
      background: var(--cream);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(1.25rem, 2.5vw, 2rem);
      animation: slide-up 0.85s ease 0.2s both;
    }

    .big-num {
      font-size: clamp(4.5rem, 10vw, 7.5rem);
      font-weight: 800;
      line-height: 0.85;
      letter-spacing: -0.04em;
      color: var(--ink);
    }

    .intro-side .meta {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding-bottom: 0.5rem;
    }

    .intro-side .rule {
      width: 2.2rem;
      height: 2px;
      background: var(--terra);
    }

    .intro-side .title {
      font-size: clamp(1rem, 1.6vw, 1.2rem);
      font-weight: 500;
      text-transform: lowercase;
      line-height: 1.3;
      max-width: 12ch;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      padding: 0.45rem 1.05rem;
      border: 1.5px solid var(--terra);
      border-radius: var(--radius-pill);
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--ink);
      background: transparent;
    }

    /* ——— Page body ——— */
    .page {
      max-width: 1100px;
      margin: 0 auto;
      padding: clamp(2rem, 5vw, 3.5rem) var(--pad) clamp(3rem, 6vw, 5rem);
    }

    .lead {
      max-width: 42ch;
      color: var(--ink-soft);
      font-size: 0.95rem;
      margin-bottom: clamp(2rem, 4vh, 3rem);
      animation: slide-up 0.8s ease 0.25s both;
    }

    .toc {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
    }

    .toc a {
      text-decoration: none;
      color: var(--ink);
      font-size: 0.78rem;
      font-weight: 500;
      padding: 0.4rem 0.95rem;
      border: 1.5px solid var(--line);
      border-radius: var(--radius-pill);
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .toc a:hover {
      border-color: var(--terra);
      background: rgba(198, 102, 69, 0.08);
    }

    /* ——— Recipe card ——— */
    .recipe {
      margin-bottom: clamp(2.5rem, 5vh, 4rem);
      background: #fff;
      box-shadow: 0 18px 40px rgba(43, 35, 29, 0.06);
      animation: slide-up 0.75s ease both;
    }

    .recipe:nth-of-type(1) { animation-delay: 0.05s; }
    .recipe:nth-of-type(2) { animation-delay: 0.1s; }
    .recipe:nth-of-type(3) { animation-delay: 0.15s; }
    .recipe:nth-of-type(4) { animation-delay: 0.2s; }
    .recipe:nth-of-type(5) { animation-delay: 0.25s; }
    .recipe:nth-of-type(6) { animation-delay: 0.3s; }

    .recipe-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(9rem, 0.5fr) minmax(9rem, 0.55fr);
      min-height: 260px;
    }

    .recipe-photo {
      position: relative;
      min-height: 240px;
      overflow: hidden;
    }

    .recipe-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.7s ease;
    }

    .recipe:hover .recipe-photo img {
      transform: scale(1.04);
    }

    .recipe-photo .badge-arc {
      width: clamp(5.5rem, 12vw, 7.5rem);
      height: clamp(5.5rem, 12vw, 7.5rem);
      padding: 0.85rem 0 0 0.85rem;
    }

    .recipe-photo .badge-arc span {
      font-size: 0.68rem;
    }

    .recipe-mid {
      background: var(--terra);
      color: var(--cream);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 1.35rem 1.25rem;
    }

    .recipe-mid .eyebrow {
      font-size: 0.72rem;
      font-weight: 500;
      opacity: 0.88;
      margin-bottom: 0.35rem;
    }

    .recipe-mid h2 {
      font-size: clamp(1.15rem, 2vw, 1.45rem);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
      text-transform: lowercase;
    }

    .recipe-mid .rule {
      width: 2rem;
      height: 2px;
      background: var(--cream);
      margin-top: 1.1rem;
      opacity: 0.85;
    }

    .recipe-side {
      background: var(--cream);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 1.15rem 1.2rem 1.35rem;
    }

    .recipe-side .big-num {
      font-size: clamp(3.2rem, 7vw, 5rem);
    }

    .recipe-side .meta {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .recipe-side .rule {
      width: 1.8rem;
      height: 2px;
      background: var(--terra);
    }

    .recipe-side .title {
      font-size: clamp(0.92rem, 1.4vw, 1.05rem);
      font-weight: 500;
      text-transform: lowercase;
      line-height: 1.35;
      max-width: 14ch;
    }

    .recipe-body {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: clamp(1.25rem, 3vw, 2.5rem);
      padding: clamp(1.35rem, 3vw, 2rem);
      border-top: 1px solid var(--line);
    }

    .recipe-body h3 {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 0.75rem;
    }

    .recipe-body ul,
    .recipe-body ol {
      padding-left: 1.1rem;
      color: var(--ink-soft);
      font-size: 0.92rem;
    }

    .recipe-body li + li { margin-top: 0.35rem; }

    .note {
      grid-column: 1 / -1;
      margin-top: 0.25rem;
      padding: 0.95rem 1.1rem;
      background: rgba(194, 214, 227, 0.35);
      border-left: 3px solid var(--blue);
      font-size: 0.88rem;
      color: var(--ink);
      font-weight: 500;
      line-height: 1.45;
    }

    .section-label {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin: 0.5rem 0 1.25rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--line);
    }

    .footer-note {
      margin: 2rem auto 0;
      padding: 1.75rem 2rem;
      background: var(--cream);
      border: 1px solid var(--line);
      font-size: 1.05rem;
      line-height: 1.55;
      color: var(--ink-soft);
      max-width: 42rem;
      text-align: center;
    }

    .footer-note strong {
      color: var(--ink);
      font-weight: 600;
    }

    @keyframes fade-scale {
      from { opacity: 0; transform: scale(1.04); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes arc-in {
      from { opacity: 0; transform: translate(-12px, -12px); }
      to { opacity: 1; transform: translate(0, 0); }
    }

    @keyframes slide-up {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 820px) {
      .intro,
      .recipe-hero {
        grid-template-columns: 1fr;
      }

      .intro {
        min-height: auto;
      }

      .intro-photo {
        min-height: 42vh;
      }

      .intro-mid,
      .recipe-mid {
        min-height: auto;
        padding: 1.5rem 1.35rem;
      }

      .intro-side,
      .recipe-side {
        flex-direction: row;
        align-items: flex-end;
        gap: 1.25rem;
        min-height: auto;
      }

      .intro-side .big-num,
      .recipe-side .big-num {
        font-size: 3.5rem;
        flex-shrink: 0;
      }

      .intro-side .meta,
      .recipe-side .meta {
        flex: 1;
      }

      .recipe-body {
        grid-template-columns: 1fr;
      }

      .recipe-photo {
        min-height: 220px;
        aspect-ratio: 16 / 10;
      }
    }
    /* Compact lead-magnet treatment */
    .intro { min-height: min(48vh, 430px); grid-template-columns: minmax(0, 1.2fr) minmax(12rem, .7fr) minmax(10rem, .55fr); }
    .intro-photo { min-height: 240px; }
    .intro-mid { padding: clamp(1.2rem, 2.5vw, 2rem); }
    .intro-side { padding: clamp(1rem, 2vw, 1.5rem); }
    .page { max-width: 980px; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
    .lead { max-width: 62ch; font-size: .88rem; margin-bottom: 1.2rem; }
    .toc { gap: .4rem; margin-bottom: 1.8rem; }
    .toc a { font-size: .7rem; padding: .32rem .72rem; }
    .section-label { margin: .35rem 0 .7rem; padding-top: .35rem; font-size: .7rem; }
    .recipe { margin-bottom: 1.3rem; border-radius: 0 0 10px 10px; }
    .recipe-hero { grid-template-columns: minmax(0, 1.2fr) minmax(8rem, .55fr) minmax(8rem, .55fr); min-height: 180px; }
    .recipe-photo { min-height: 180px; }
    .recipe-mid { padding: 1rem; }
    .recipe-side { padding: .85rem .95rem 1rem; }
    .recipe-side .big-num { font-size: clamp(2.7rem, 6vw, 4.2rem); }
    .recipe-side .meta { gap: .55rem; }
    .recipe-side .title { font-size: .88rem; }
    .recipe-side .pill { font-size: .66rem; padding: .3rem .65rem; }
    .recipe-body { gap: 1.2rem; padding: 1rem 1.15rem 1.1rem; }
    .recipe-body h3 { font-size: .65rem; margin-bottom: .45rem; }
    .recipe-body ul, .recipe-body ol { font-size: .78rem; padding-left: .95rem; line-height: 1.4; }
    .recipe-body li + li { margin-top: .18rem; }
    .note { padding: .65rem .8rem; font-size: .72rem; }
    .lead-magnet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; margin: 1.8rem 0 1rem; padding: 1.35rem 1.5rem; background: var(--terra); color: var(--cream); }
    .lead-magnet .eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .82; margin-bottom: .35rem; }
    .lead-magnet h2 { font-size: clamp(1.25rem, 2.5vw, 1.8rem); line-height: 1.08; max-width: 24ch; }
    .lead-magnet p { font-size: .78rem; max-width: 48ch; margin-top: .5rem; opacity: .9; }
    .lead-magnet .pill { border-color: var(--cream); color: var(--cream); white-space: nowrap; }
    .footer-note { margin-top: .8rem; padding: 1rem 1.2rem; font-size: .78rem; }
    @media (max-width: 820px) {
      .intro, .recipe-hero { grid-template-columns: 1fr; }
      .intro { min-height: auto; }
      .intro-photo { min-height: 34vh; aspect-ratio: 16 / 8; }
      .recipe-photo { min-height: 0; aspect-ratio: 16 / 8; }
      .recipe-mid, .recipe-side { min-height: 0; padding: 1rem 1.15rem; }
      .recipe-side { flex-direction: row; align-items: flex-end; }
      .recipe-side .meta { flex: 1; }
      .recipe-body { padding: 1rem; }
    }
    @media (max-width: 560px) {
      .lead-magnet { grid-template-columns: 1fr; gap: .8rem; padding: 1.1rem; }
      .lead-magnet .pill { justify-self: start; }
      .recipe-body { grid-template-columns: 1fr; gap: .9rem; }
    }
    /* Final compact card layout */
    .recipe { margin-bottom: 1rem; border-radius: 10px; overflow: hidden; }
    .recipe-hero { grid-template-columns: clamp(118px, 16vw, 176px) minmax(8rem, .75fr) minmax(12rem, 1.35fr); min-height: 176px; }
    .recipe-photo { min-height: 0; aspect-ratio: 1 / 1; }
    .recipe-photo img { aspect-ratio: 1 / 1; object-fit: cover; }
    .recipe-mid { padding: .85rem 1rem; }
    .recipe-side { padding: .8rem 1rem .9rem; }
    .recipe-side .title { max-width: none; font-size: clamp(1.3rem, 2.6vw, 1.95rem); line-height: 1.02; letter-spacing: -.035em; }
    .recipe-side .big-num { font-size: clamp(2.3rem, 5vw, 3.8rem); }
    .recipe-body { gap: 1rem; padding: .85rem 1rem .95rem; }
    .recipe-body ul, .recipe-body ol { font-size: .74rem; line-height: 1.34; }
    .recipe-body li + li { margin-top: .12rem; }
    .note { padding: .55rem .7rem; font-size: .68rem; }
    @media (max-width: 820px) {
      .recipe-hero { grid-template-columns: 120px 1fr; min-height: 120px; }
      .recipe-photo { grid-row: span 2; min-height: 0; }
      .recipe-mid { min-height: 0; padding: .8rem .9rem .35rem; }
      .recipe-side { min-height: 0; padding: .25rem .9rem .8rem; }
      .recipe-side .big-num { display: none; }
      .recipe-side .title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
      .recipe-side .meta { gap: .35rem; }
      .recipe-side .meta .rule { display: none; }
    }
    @media (max-width: 560px) {
      .recipe-hero { grid-template-columns: 104px 1fr; }
      .recipe-photo { aspect-ratio: 1 / 1; }
      .recipe-mid { padding: .7rem .8rem .25rem; }
      .recipe-side { padding: .2rem .8rem .7rem; }
      .recipe-body { padding: .85rem; }
    }

    /* Two-up grid, titles only — no big numbers */
    .page { max-width: 1120px; }
    .intro-side { justify-content: flex-end; }
    .intro-side .big-num,
    .recipe-side .big-num { display: none; }

    .recipes-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.9rem;
      margin-bottom: 0.4rem;
    }

    .recipe {
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .recipe-hero {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      min-height: 108px;
    }

    .recipe-photo {
      min-height: 0;
      aspect-ratio: 1 / 1;
    }

    .recipe-photo .badge-arc {
      width: 3.5rem;
      height: 3.5rem;
      padding: 0.42rem 0 0 0.42rem;
    }

    .recipe-photo .badge-arc span { font-size: 0.5rem; }

    .recipe-head {
      background: var(--terra);
      color: var(--cream);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.4rem;
      padding: 0.8rem 0.95rem;
      min-width: 0;
    }

    .recipe-head .eyebrow {
      font-size: 0.64rem;
      font-weight: 500;
      opacity: 0.88;
      margin: 0;
    }

    .recipe-head h2 {
      font-size: clamp(0.98rem, 1.6vw, 1.22rem);
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.025em;
      text-transform: lowercase;
      max-width: none;
    }

    .recipe-head .rule {
      width: 1.8rem;
      height: 2px;
      background: var(--cream);
      opacity: 0.85;
    }

    .recipe-head .pill {
      border-color: rgba(242, 237, 228, 0.7);
      color: var(--cream);
      font-size: 0.62rem;
      padding: 0.22rem 0.55rem;
      width: fit-content;
    }

    .recipe-body {
      grid-template-columns: 1fr;
      gap: 0.65rem;
      padding: 0.75rem 0.9rem 0.85rem;
      flex: 1;
    }

    .recipe-body ul,
    .recipe-body ol {
      font-size: 0.72rem;
      line-height: 1.32;
    }

    .note { padding: 0.5rem 0.65rem; font-size: 0.65rem; }

    @media (max-width: 820px) {
      .recipes-grid { grid-template-columns: 1fr; }
      .recipe-hero { grid-template-columns: 100px 1fr; min-height: 100px; }
      .recipe-head { padding: 0.75rem 0.85rem; }
    }

    @media (max-width: 560px) {
      .recipe-hero { grid-template-columns: 88px 1fr; min-height: 88px; }
      .recipe-head h2 { font-size: 1.02rem; }
    }

    /* Compact header bar — same width as page content / menu */
    .intro {
      min-height: 0;
      height: auto;
      align-items: stretch;
      grid-template-columns: 128px minmax(8rem, 0.7fr) minmax(16rem, 1.5fr);
      width: calc(100% - 2 * var(--pad));
      max-width: calc(1280px - 2 * var(--pad));
      margin-inline: auto;
    }
    .intro-photo {
      min-height: 128px;
      height: auto;
    }
    .intro .badge-arc {
      width: 4rem;
      height: 4rem;
      padding: 0.5rem 0 0 0.5rem;
    }
    .intro .badge-arc span { font-size: 0.55rem; }
    .intro-mid {
      padding: 0.75rem 1.05rem;
      justify-content: center;
    }
    .intro-mid .eyebrow {
      font-size: 0.64rem;
      margin-bottom: 0.15rem;
    }
    .intro-mid h1 {
      font-size: clamp(1.12rem, 1.9vw, 1.4rem);
      max-width: none;
    }
    .intro-mid .rule {
      margin-top: 0.55rem;
      width: 1.6rem;
    }
    .intro-side {
      padding: 0.75rem 1.15rem;
      justify-content: center;
    }
    .intro-side .meta {
      gap: 0.45rem;
      padding-bottom: 0;
    }
    .intro-side .lead {
      max-width: 46ch;
      font-size: clamp(0.78rem, 1.15vw, 0.9rem);
      line-height: 1.4;
      color: var(--ink-soft);
      margin: 0;
    }
    .intro-side .title {
      font-size: clamp(0.95rem, 1.5vw, 1.1rem);
      max-width: none;
    }
    .intro-side .pill {
      font-size: 0.64rem;
      padding: 0.22rem 0.6rem;
    }

    @media (max-width: 820px) {
      .intro {
        grid-template-columns: 96px 1fr 1.4fr;
        height: auto;
        min-height: 0;
      }
      .intro-photo {
        min-height: 96px;
        height: auto;
        aspect-ratio: auto;
      }
      .intro-mid,
      .intro-side {
        padding: 0.6rem 0.75rem;
        min-height: 0;
      }
    }

    @media (max-width: 560px) {
      .intro {
        grid-template-columns: 84px 1fr;
        height: auto;
      }
      .intro-photo {
        grid-row: span 2;
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
      }
      .intro-mid { padding: 0.55rem 0.7rem 0.2rem; }
      .intro-side { padding: 0.15rem 0.7rem 0.55rem; }
      .intro-mid .rule,
      .intro-side .rule { display: none; }
      .intro-side .lead { font-size: 0.76rem; max-width: none; }
    }

    /* CTA: smaller heading, solid button */
    .lead-magnet {
      align-items: center;
      gap: 1.15rem;
      margin: 0 0 1rem;
      padding: 1.1rem 1.25rem;
    }
    .lead-magnet h2 {
      font-size: clamp(1.02rem, 1.8vw, 1.28rem);
      max-width: 28ch;
      line-height: 1.18;
    }
    .lead-magnet p { font-size: 0.74rem; margin-top: 0.4rem; }
    .reminder {
      margin: 0.35rem 0 1rem;
      padding: 0.7rem 0.9rem;
      background: rgba(194, 214, 227, 0.35);
      border-left: 3px solid var(--blue);
      font-size: 0.78rem;
      line-height: 1.45;
      color: var(--ink);
    }
    .reminder strong { font-weight: 700; }
    .section-label {
      font-size: 1.4rem;
      letter-spacing: 0.04em;
      margin: 0.7rem 0 0.95rem;
      padding-top: 0.55rem;
    }
    .lead-magnet .cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      padding: 0.78rem 1.45rem;
      background: var(--cream);
      color: var(--terra-deep);
      border: none;
      border-radius: var(--radius-pill);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      white-space: nowrap;
      box-shadow: 0 10px 22px rgba(43, 35, 29, 0.22);
    }

    /* Three recipes per row */
    .page { max-width: 1280px; }
    .recipes-grid {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0.75rem;
    }
    .recipe-hero {
      grid-template-columns: 84px minmax(0, 1fr);
      min-height: 84px;
    }
    .recipe-head { padding: 0.65rem 0.75rem; gap: 0.28rem; }
    .recipe-head h2 { font-size: clamp(0.86rem, 1.15vw, 1.02rem); }
    .recipe-body { padding: 0.65rem 0.75rem 0.75rem; }
    .recipe-body ul,
    .recipe-body ol { font-size: 0.68rem; }

    @media (max-width: 980px) {
      .recipes-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 820px) {
      .lead-magnet .cta-btn { justify-self: start; }
    }
    @media (max-width: 560px) {
      .recipes-grid { grid-template-columns: 1fr; }
      .lead-magnet .cta-btn { width: 100%; }
    }
  </style>
</head>
<body>
  <header class="intro">
    <div class="intro-photo" aria-hidden="true">
      <div class="badge-arc"><span>#sekta</span></div>
    </div>
    <div class="intro-mid">
      <p class="eyebrow">курс для</p>
      <h1>беременных</h1>
      <div class="rule" aria-hidden="true"></div>
    </div>
    <div class="intro-side">
      <div class="meta">
        <p class="lead">Меню на один день с рецептами по рекомендациям курса: три основных приёма пищи и три перекуса на выбор.</p>
        <span class="pill">6 блюд</span>
      </div>
    </div>
  </header>

  <main class="page">
    <aside class="lead-magnet" aria-label="О курсе">
      <div>
        <p class="eyebrow">это только один день</p>
        <h2>В курсе будет ещё больше таких классных рецептов</h2>
        <p>Соберём полноценное меню, идеи для быстрых приёмов пищи и понятные заготовки, чтобы питаться разнообразно и без лишней суеты.</p>
      </div>
      <span class="cta-btn">смотреть курс</span>
    </aside>

    <nav class="toc" aria-label="К рецептам">
      <a href="#r01">завтрак</a>
      <a href="#r02">обед</a>
      <a href="#r03">ужин</a>
      <a href="#r04">перекус 1</a>
      <a href="#r05">перекус 2</a>
      <a href="#r06">перекус 3</a>
    </nav>

    <p class="reminder"><strong>Напоминание:</strong> при беременности яйца, рыбу и птицу всегда готовить полностью. Хлеб рекомендуем ржаной или цельнозерновой.</p>

    <p class="section-label">основные приёмы пищи</p>

    <div class="recipes-grid">
    <!-- 01 завтрак -->
    <article class="recipe" id="r01">
      <div class="recipe-hero">
        <figure class="recipe-photo">
          <div class="badge-arc"><span>#sekta</span></div>
          <img
            src="recipe-01-omelette.png"
            alt="Зелёный омлет с творогом и тостом"
          />
        </figure>
        <div class="recipe-head">
          <p class="eyebrow">завтрак</p>
          <h2>зелёный омлет с творогом</h2>
          <span class="pill">12 минут</span>
        </div>
      </div>
      <div class="recipe-body">
        <div>
          <h3>Ингредиенты</h3>
          <ul>
            <li>2 яйца</li>
            <li>80–100 г мягкого творога 5% (или греческого йогурта без сахара)</li>
            <li>горсть шпината или рукколы</li>
            <li>½ помидора или ¼ авокадо</li>
            <li>1 тонкий ломтик ржаного или цельнозернового хлеба (не из муки высшего сорта)</li>
            <li>соль, перец</li>
            <li>1 ч. л. оливкового масла</li>
          </ul>
        </div>
        <div>
          <h3>Приготовление</h3>
          <ol>
            <li>Яйца взбить с щепоткой соли.</li>
            <li>На сковороде разогреть масло, обжарить шпинат 30 секунд, влить яйца, свернуть омлет.</li>
            <li>Сверху выложить творог, добавить помидор или авокадо.</li>
            <li>Хлеб подсушить в тостере и подать к омлету.</li>
          </ol>
        </div>
        <p class="note">Важно при беременности: яйца готовить полностью — желток и белок должны схватиться, без «всмятку» и жидкой середины.</p>
      </div>
    </article>

    <!-- 02 обед -->
    <article class="recipe" id="r02">
      <div class="recipe-hero">
        <figure class="recipe-photo">
          <div class="badge-arc"><span>#sekta</span></div>
          <img
            src="recipe-02-turkey.png"
            alt="Индейка с киноа и свежим салатом"
          />
        </figure>
        <div class="recipe-head">
          <p class="eyebrow">обед</p>
          <h2>индейка, салат и киноа</h2>
          <span class="pill">20 минут</span>
        </div>
      </div>
      <div class="recipe-body">
        <div>
          <h3>Ингредиенты</h3>
          <ul>
            <li>150–180 г филе индейки (или курицы)</li>
            <li>40–50 г сухой киноа (или ~100–120 г готовой)</li>
            <li>огурец, редис, листовой салат, зелень</li>
            <li>1 ч. л. оливкового масла</li>
            <li>лимон или яблочный уксус</li>
            <li>паприка, сухой чеснок, соль, перец</li>
          </ul>
        </div>
        <div>
          <h3>Приготовление</h3>
          <ol>
            <li>Киноа промыть, залить водой 1:2, варить 12–15 минут (или разогреть готовую).</li>
            <li>Индейку нарезать полосками, обвалять в специях, жарить на среднем огне 6–8 минут до готовности.</li>
            <li>Овощи крупно нарезать, заправить маслом и лимоном.</li>
            <li>Подать индейку с киноа и салатом.</li>
          </ol>
        </div>
        <p class="note">Важно при беременности: птицу готовить полностью — сок должен быть прозрачным, розового мяса внутри быть не должно. Лучше проверить самый толстый кусок.</p>
      </div>
    </article>

    <!-- 03 ужин -->
    <article class="recipe" id="r03">
      <div class="recipe-hero">
        <figure class="recipe-photo">
          <div class="badge-arc"><span>#sekta</span></div>
          <img
            src="recipe-03-salmon.png"
            alt="Лосось с цукини и йогуртовым соусом"
          />
        </figure>
        <div class="recipe-head">
          <p class="eyebrow">ужин</p>
          <h2>лосось с цукини-лентами</h2>
          <span class="pill">15 минут</span>
        </div>
      </div>
      <div class="recipe-body">
        <div>
          <h3>Ингредиенты</h3>
          <ul>
            <li>120–150 г лосося, трески или минтая</li>
            <li>1–2 цукини</li>
            <li>2 ст. л. греческого йогурта без сахара</li>
            <li>1 зубчик чеснока (или сухой чеснок)</li>
            <li>укроп или петрушка</li>
            <li>лимон</li>
            <li>1 ч. л. масла</li>
            <li>соль, перец</li>
          </ul>
        </div>
        <div>
          <h3>Приготовление</h3>
          <ol>
            <li>Цукини нарезать овощечисткой лентами (или кружками). Обжарить 2–3 минуты с каплей масла — должны остаться с хрустом.</li>
            <li>Рыбу посолить, поперчить, жарить 3–4 минуты с каждой стороны (треска — чуть меньше).</li>
            <li>Соус: смешать йогурт, чеснок, зелень и каплю лимона.</li>
            <li>Подать рыбу с цукини и соусом.</li>
          </ol>
        </div>
        <p class="note">Важно при беременности: рыбу готовить полностью — мясо должно легко разделяться на волокна, сырой и полусырой середины быть не должно. Не использовать сырую рыбу и слабосолёную.</p>
      </div>
    </article>

    </div>

    <p class="section-label">перекусы</p>

    <div class="recipes-grid">
    <!-- 04 перекус -->
    <article class="recipe" id="r04">
      <div class="recipe-hero">
        <figure class="recipe-photo">
          <div class="badge-arc"><span>#sekta</span></div>
          <img
            src="recipe-04-cottage.png"
            alt="Творог с ягодами и корицей"
          />
        </figure>
        <div class="recipe-head">
          <p class="eyebrow">перекус 1</p>
          <h2>творог с ягодами</h2>
          <span class="pill">5 минут</span>
        </div>
      </div>
      <div class="recipe-body">
        <div>
          <h3>Ингредиенты</h3>
          <ul>
            <li>100–120 г творога 5%</li>
            <li>80–100 г свежих или размороженных ягод</li>
            <li>щепотка корицы</li>
            <li>по желанию: 1 ч. л. семян льна или измельчённых орехов</li>
          </ul>
        </div>
        <div>
          <h3>Приготовление</h3>
          <ol>
            <li>Творог выложить в миску.</li>
            <li>Сверху добавить ягоды, посыпать корицей.</li>
            <li>При желании посыпать семенами льна или орехами.</li>
          </ol>
        </div>
      </div>
    </article>

    <!-- 05 перекус -->
    <article class="recipe" id="r05">
      <div class="recipe-hero">
        <figure class="recipe-photo">
          <div class="badge-arc"><span>#sekta</span></div>
          <img
            src="recipe-05-hummus.png"
            alt="Хумус с овощными палочками"
          />
        </figure>
        <div class="recipe-head">
          <p class="eyebrow">перекус 2</p>
          <h2>хумус с овощами</h2>
          <span class="pill">5 минут</span>
        </div>
      </div>
      <div class="recipe-body">
        <div>
          <h3>Ингредиенты</h3>
          <ul>
            <li>2–3 ст. л. хумуса</li>
            <li>1 огурец</li>
            <li>1 морковь</li>
            <li>по желанию: стебель сельдерея или сладкий перец</li>
          </ul>
        </div>
        <div>
          <h3>Приготовление</h3>
          <ol>
            <li>Овощи вымыть, нарезать палочками.</li>
            <li>Хумус выложить в небольшую миску.</li>
            <li>Есть, макая овощи в хумус.</li>
          </ol>
        </div>
      </div>
    </article>

    <!-- 06 перекус -->
    <article class="recipe" id="r06">
      <div class="recipe-hero">
        <figure class="recipe-photo">
          <div class="badge-arc"><span>#sekta</span></div>
          <img
            src="recipe-06-toast.png"
            alt="Ржаной тост с авокадо и яйцом"
          />
        </figure>
        <div class="recipe-head">
          <p class="eyebrow">перекус 3</p>
          <h2>тост с авокадо и яйцом</h2>
          <span class="pill">10 минут</span>
        </div>
      </div>
      <div class="recipe-body">
        <div>
          <h3>Ингредиенты</h3>
          <ul>
            <li>1 ломтик ржаного или цельнозернового хлеба (не из муки высшего сорта)</li>
            <li>½ небольшого авокадо</li>
            <li>1 яйцо</li>
            <li>соль, перец</li>
            <li>капля лимонного сока</li>
            <li>1 ч. л. масла для жарки</li>
          </ul>
        </div>
        <div>
          <h3>Приготовление</h3>
          <ol>
            <li>Хлеб подсушить в тостере.</li>
            <li>Яйцо пожарить на масле до полной готовности — желток должен схватиться.</li>
            <li>Авокадо размять вилкой с солью, перцем и каплей лимона, намазать на тост.</li>
            <li>Сверху выложить яйцо.</li>
          </ol>
        </div>
        <p class="note">Важно при беременности: яйцо готовить полностью, без жидкого желтка.</p>
      </div>
    </article>
    </div>
  </main>
</body>
</html>
sekta / marketing / course-files/pregnant2026/lidfood.html
