инструкция
Внутри <main class="container"> вставь <section class="hero"> с padding 120px 0 80px. Внутри: <h1>Кофе, который снится</h1> огромный (font-size clamp(56px, 9vw, 112px), font-family Playfair Display, font-weight 700, letter-spacing -0.03em, line-height 1.02, color #f5e6d3). Под ним <p class="lead"> в 2-3 строки про атмосферу зала и качество зерна (max-width 540px, font-size 18px, line-height 1.6, color rgba(245,230,211,0.7), margin 24px 0 36px). Кнопка-ссылка <a class="cta" href="#">Забронировать столик →</a>: padding 14px 28px, background #d4a574, color #0c0805 (тёмный текст на золоте), font-weight 600, letter-spacing 0.02em, border-radius 4px, display inline-flex, align-items center, gap 8px, transition 0.2s. На :hover — translateY(-2px), box-shadow 0 8px 24px rgba(212,165,116,0.3).
что обратить внимание
- ›clamp() даёт адаптивный размер без media-queries
- ›letter-spacing -0.03em на больших Playfair-заголовках сжимает их и делает «дороже»
- ›CTA-кнопка с тёплой золотой заливкой подталкивает к действию
- ›Hover с translateY и тенью даёт ощущение «живого» интерфейса