/* css/podbor.css — page-specific styles, migrated from podbor.html (Phase 2 fix) */ /* === Podbor page specific styles === */ .sel-hero { padding: 0; text-align: center; position: relative; overflow: hidden; min-height: 520px; } .sel-hero__bg { position: absolute; inset: 0; z-index: 0; } .sel-hero__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; } .sel-hero__bg-img.active { opacity: 1; } .sel-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,10,15,0.6), rgba(10,10,15,0.85)); z-index: 1; } .sel-hero__content { position: relative; z-index: 2; padding: 60px 24px 80px; } .sel-hero__title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: 0.5rem; } .sel-hero__subtitle { font-size: 1.1rem; color: var(--text-secondary, #aaa); max-width: 700px; margin: 0.75rem auto 0; line-height: 1.6; } /* Advantages */ .sel-adv__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .sel-adv__card { background: var(--card-bg, #1a1a2e); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; transition: border-color 0.2s; } .sel-adv__card:hover { border-color: rgba(240,192,64,0.3); } .sel-adv__icon { font-size: 2rem; margin-bottom: 0.75rem; } .sel-adv__card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; } .sel-adv__card p { font-size: 0.9rem; color: var(--text-secondary, #aaa); line-height: 1.6; } /* Pricing */ .sel-pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 900px; margin: 2rem auto 0; } @media (max-width: 700px) { .sel-pricing__grid { grid-template-columns: 1fr; } } .sel-pricing__card { background: var(--card-bg, #1a1a2e); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 32px; } .sel-pricing__card--main { border-color: rgba(240,192,64,0.3); } .sel-pricing__price { font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--accent, #f0c040); margin-bottom: 0.5rem; } .sel-pricing__card h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; } .sel-pricing__list { list-style: none; padding: 0; margin: 0; } .sel-pricing__list li { padding: 6px 0; font-size: 0.9rem; color: var(--text-secondary, #aaa); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; } .sel-pricing__list li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f0c040' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } .sel-pricing__bonus { margin-top: 16px; padding-top: 16px; border-top: 2px dashed rgba(240,192,64,0.3); display: flex; flex-direction: column; gap: 10px; } .sel-pricing__bonus-row { display: flex; align-items: center; gap: 12px; } .sel-pricing__bonus-label { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--accent, #f0c040); color: #000; font-size: 18px; font-weight: 800; border-radius: 50%; } .sel-pricing__bonus-row span { color: var(--accent, #f0c040); font-weight: 700; font-size: 0.95rem; } .sel-pricing__extras { max-width: 900px; margin: 1.5rem auto 0; } .sel-pricing__extra-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 0.9rem; color: var(--text-secondary, #aaa); } .sel-pricing__extra-item::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } /* Checklist */ .sel-check__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .sel-check__category { background: var(--card-bg, #1a1a2e); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden; } .sel-check__header { padding: 20px 24px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; transition: background 0.2s; } .sel-check__header:hover { background: rgba(240,192,64,0.05); } .sel-check__header h3 { font-size: 1.05rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; } .sel-check__header h3 .sel-check__icon { font-size: 1.3rem; } .sel-check__count { font-size: 0.8rem; color: var(--accent, #f0c040); background: rgba(240,192,64,0.1); padding: 2px 10px; border-radius: 20px; white-space: nowrap; } .sel-check__arrow { flex-shrink: 0; width: 20px; height: 20px; transition: transform 0.3s; color: var(--text-secondary, #aaa); } .sel-check__category.open .sel-check__arrow { transform: rotate(180deg); } .sel-check__body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .sel-check__category.open .sel-check__body { max-height: 600px; } .sel-check__list { padding: 0 24px 20px; list-style: none; margin: 0; } .sel-check__list li { padding: 5px 0; font-size: 0.88rem; color: var(--text-secondary, #aaa); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; } .sel-check__list li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f0c040' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } .sel-check__pdf { text-align: center; margin-top: 2rem; } /* Steps */ .sel-steps { max-width: 720px; margin: 2rem auto 0; } .sel-step { display: flex; gap: 1.25rem; margin-bottom: 2rem; align-items: flex-start; } .sel-step__num { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--accent, #f0c040); color: #111; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; } .sel-step__body h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.25rem; } .sel-step__body p { font-size: 0.9rem; color: var(--text-secondary, #aaa); line-height: 1.6; } /* Languages */ .sel-langs { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; } .sel-lang { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 500; } .sel-lang__flag { font-size: 2rem; } /* CTA */ .sel-cta { padding: 60px 0; text-align: center; } .sel-cta__title { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 0.75rem; } .sel-cta__text { color: var(--text-secondary, #aaa); margin-bottom: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; } .sel-cta__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }