/* ========================================================= OPG Kostešić — Kako naručiti (How To Order) - Honey-drip divider na vrhu (transparentni dio se prelije u prethodnu sekciju, žuti dio nastavlja u tijelo sekcije) - Žuto tijelo sekcije (#f7bd00 brand) ========================================================= */ .opg-order { /* Cream bg ispunjava prostor iznad drip siluete (gdje je slika transparentna) — usklađuje se s prethodnom sekcijom (.opg-products koja također koristi --opg-cream). Bez ovoga propadne na bijelu boju -a. */ background: var(--opg-cream, #f9f4f0); font-family: var(--opg-font-body, 'Open Sans', system-ui, sans-serif); } .opg-order__drip { display: block; width: 100%; height: auto; margin-bottom: -1px; /* zatvara hairline između drip slike i body bg-a */ pointer-events: none; user-select: none; } .opg-order__body { background: #f7bd00; padding-block: 24px 80px; color: var(--opg-ink, #5a3733); } @media (min-width: 1024px) { .opg-order__body { padding-block: 32px 110px; } } .opg-order__container { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 32px); } /* ========================================================= Header ========================================================= */ .opg-order__header { text-align: center; max-width: 720px; margin: 0 auto 48px; } @media (min-width: 1024px) { .opg-order__header { margin-bottom: 64px; } } .opg-order__eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--opg-brand-dark, #eb6d2f); margin: 0 0 12px; } .opg-order__heading { font-family: var(--opg-font-heading, 'Signika Negative', system-ui, sans-serif); font-size: clamp(28px, 4.5vw, 44px); font-weight: 700; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.005em; color: var(--opg-ink, #5a3733); margin: 0 0 16px; } .opg-order__lead { font-size: 15px; line-height: 1.65; color: var(--opg-ink, #5a3733); opacity: 0.85; margin: 0; } /* ========================================================= 3 koraka (heksagonalni) ========================================================= */ .opg-order__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 36px; } @media (min-width: 768px) { .opg-order__steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .opg-step { text-align: center; padding-inline: 8px; } /* Heksagon — clip-path polygon, bijeli ispunjen krug s drop shadow-om */ .opg-step__hex { width: 92px; height: 102px; margin: 0 auto 20px; background: #fff; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.25s ease; } .opg-step:hover .opg-step__hex { transform: translateY(-4px); } .opg-step__icon { display: inline-flex; align-items: center; justify-content: center; } .opg-step__icon svg { display: block; } .opg-step__title { font-family: var(--opg-font-heading, 'Signika Negative', system-ui, sans-serif); font-size: 20px; font-weight: 700; color: var(--opg-ink, #5a3733); margin: 0 0 8px; text-transform: none; letter-spacing: 0; } .opg-step__num { color: var(--opg-ink, #5a3733); margin-right: 4px; } .opg-step__desc { font-size: 14px; line-height: 1.6; color: var(--opg-ink, #5a3733); opacity: 0.78; margin: 0; max-width: 260px; margin-inline: auto; } /* ========================================================= CTA gumb ========================================================= */ .opg-order__cta { text-align: center; margin-top: 48px; } @media (min-width: 1024px) { .opg-order__cta { margin-top: 64px; } } .opg-order__cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: var(--opg-brand-dark, #eb6d2f); color: #fff; font-family: var(--opg-font-body, 'Open Sans', sans-serif); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; border-radius: 999px; box-shadow: 0 4px 14px rgba(90, 55, 51, 0.18); transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease; } .opg-order__cta-btn:hover, .opg-order__cta-btn:focus-visible { background: var(--opg-ink, #5a3733); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(90, 55, 51, 0.24); color: #fff; } @media (prefers-reduced-motion: reduce) { .opg-step__hex, .opg-order__cta-btn { transition: none; } }