/* /ru/flower — цветы по подписке. Продолжение главной v2: plum, огромное слово, таймлайн и тарифы-карты. Здесь только своё: наклейка с ценой, переключатель частоты, карты S/M/L, сезоны, подарок и гарантия. */ /* ───── hero: «Цветы» + наклейка «от 8 900 ֏» ───── */ .fw-word { position: relative; justify-self: start; font-size: clamp(84px, 15vw, 220px); } .fw-word__sticker { position: absolute; top: -8px; right: -64px; font-style: normal; letter-spacing: 0; } .fw-word__sticker .bc-flower > span { line-height: 1.05; text-align: center; max-width: 76%; white-space: pre-line; } .fw-next { margin: 0; font-size: 15px; color: #e9c9d5; } .fw-next svg { vertical-align: -3px; margin-right: 6px; } .fw-next b { color: var(--bc-bg); font-weight: 600; } /* ───── переключатель частоты: как «Переезжаю / Уже живу» ───── */ .fw-freq { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); } .fw-freq button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-family: var(--bc-font-head); font-weight: 600; font-size: 16px; color: var(--bc-bg); cursor: pointer; } .fw-freq button:hover { color: var(--bc-pink); } .fw-freq button[aria-checked='true'] { background: var(--bc-pink); color: var(--bc-plum); } .fw-freq__save { padding: 2px 8px; border-radius: 999px; background: var(--bc-home); color: var(--bc-home-ink); font-size: 12px; font-weight: 700; } /* ───── карты S / M / L ───── */ .fw-plan { position: relative; } .fw-plan__badge { position: absolute; z-index: 1; top: -12px; right: 16px; padding: 5px 12px; border-radius: 999px; background: var(--bc-home); color: var(--bc-home-ink); font-size: 13px; font-weight: 700; transform: rotate(3deg); } .fw-plan__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 24px; } .fw-card { grid-template-areas: 'club chip' '. .' 'name name' 'price price'; } /* вместо «чипа» банковской карты — крупная буква размера */ .fw-card__letter { grid-area: chip; font-family: var(--bc-font-head); font-weight: 800; font-style: italic; font-size: 56px; line-height: 0.8; letter-spacing: -0.04em; } .fw-card .h-card__price small { font-weight: 500; font-size: 14px; opacity: 0.75; } .fw-plan[data-size='s'] .h-card { border: 1.5px solid rgba(246, 195, 211, 0.45); color: var(--bc-bg); } .fw-plan[data-size='m'] .h-card { background: var(--bc-pink); } .fw-plan[data-size='l'] .h-card { background: var(--bc-perks); } .fw-plan[data-size='m'] .h-plan__cta { background: var(--bc-pink); border-color: var(--bc-pink); color: var(--bc-plum); } .fw-plan[data-size='l'] .h-plan__cta { background: var(--bc-perks); border-color: var(--bc-perks); color: var(--bc-plum); } .fw-plan[data-size='l'] .h-plan__list svg { color: var(--bc-perks); } .fw-plan[data-size='m'] .h-plan__cta:hover, .fw-plan[data-size='l'] .h-plan__cta:hover { opacity: 0.92; } .fw-plan__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; } .fw-plan__facts span { padding: 5px 12px; border-radius: 999px; border: 1.5px solid rgba(246, 195, 211, 0.3); font-size: 13px; font-weight: 600; color: #f4dce5; } .fw-plan__anchor { margin: -6px 4px 0; font-size: 14px; color: #d9b4c3; } .fw-plan__anchor s { text-decoration-thickness: 1.5px; } .fw-plan__month { margin: 0 4px; font-family: var(--bc-font-head); font-weight: 600; font-size: 16px; } .fw-plan__month b { color: var(--bc-home); font-weight: 600; } .fw-plans__note { margin: 0; padding: 0 8px; font-size: 14px; color: #d9b4c3; } /* ───── сезоны ───── */ .fw-section { display: flex; flex-direction: column; gap: 28px; margin-top: 56px; } .fw-seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .fw-season { display: flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 26px; border-radius: 32px; } .fw-season h3 { margin: 0; font-family: var(--bc-font-head); font-weight: 800; font-style: italic; font-size: 30px; letter-spacing: -0.02em; } .fw-season p { margin: auto 0 0; font-size: 15px; line-height: 1.5; } /* ───── подарок из-за рубежа + гарантия ───── */ .fw-duo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; margin-top: 56px; } .fw-gift, .fw-guarantee { display: flex; flex-direction: column; gap: 14px; padding: 36px; border-radius: 36px; } .fw-gift { background: var(--bc-blue); color: var(--bc-blue-ink); } .fw-guarantee { background: var(--bc-home); color: var(--bc-home-ink); } .fw-gift h2, .fw-guarantee h2 { margin: 0; font-family: var(--bc-font-head); font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; } .fw-gift p, .fw-guarantee p { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.5; } .fw-kicker { font-family: var(--bc-font-head); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; } .fw-gift__prices { display: flex; flex-wrap: wrap; gap: 8px; } .fw-gift__prices div { display: flex; flex-direction: column; padding: 12px 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.55); } .fw-gift__prices b { font-family: var(--bc-font-head); font-weight: 800; font-style: italic; font-size: 30px; line-height: 1; } .fw-gift__prices span { margin-top: 4px; font-size: 13px; } .fw-gift__cta { align-self: flex-start; margin-top: 6px; height: 52px; background: var(--bc-blue-ink); color: #fff; } .fw-gift__cta:hover { color: #fff; opacity: 0.92; } /* ───── вопросы: розовый блок с белыми карточками из landing.css ───── */ .fw-faq-wrap { display: flex; flex-direction: column; gap: 28px; margin-top: 56px; } .fw-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; } @media (max-width: 1000px) { .fw-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .fw-duo { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .fw-word__sticker { top: auto; bottom: -18px; right: -40px; } .fw-word__sticker .bc-flower { width: 88px !important; height: 88px !important; } .fw-word__sticker .bc-flower svg { width: 88px; height: 88px; } .fw-freq { align-self: stretch; } .fw-freq button { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 14px; } .fw-seasons, .fw-faq { grid-template-columns: minmax(0, 1fr); } .fw-season { min-height: 0; } .fw-gift, .fw-guarantee { padding: 26px 22px; border-radius: 28px; } }