/* ========================= PRICING (Joomla Academy) Clean + Mobile Full Width ========================= */ .pricing-wrapper{ padding:60px 20px; font-family:Inter, Arial, sans-serif; } /* FREE (top) */ .pricing-free{ display:flex; justify-content:center; margin-bottom:60px; } .pricing-free .price-card{ max-width:420px; width:100%; } /* PAID (below) */ .pricing-paid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:25px; } /* CARDS */ .price-card{ border:1px solid #ddd; border-radius:16px; padding:28px; text-align:center; background:#fff; } .price-card.main{ border-color:#b600d5; box-shadow:0 0 30px rgba(182,0,213,.25); } .price-card.free{ background:linear-gradient(180deg,#1a0033,#b600d5); color:#fff; box-shadow:0 0 40px rgba(182,0,213,.35); } .price-card h3{ margin-bottom:10px; } .desc{ font-size:14px; opacity:.85; margin-bottom:15px; } .price{ margin:15px 0; } .price .old{ text-decoration:line-through; opacity:.5; margin-right:8px; font-size:18px; } .price .new{ font-size:28px; font-weight:700; } .price-now{ font-size:34px; font-weight:800; margin:15px 0; } .note{ font-size:13px; opacity:.75; margin-bottom:20px; } /* BUTTONS */ .btn{ display:inline-block; padding:12px 26px; border-radius:30px; text-decoration:none; border:2px solid #b600d5; color:#b600d5; font-weight:600; } .btn.primary{ background:#b600d5; color:#fff; } .price-card.free .btn{ background:#fff; color:#1a0033; border-color:#fff; } /* ========================= HEADER (Cassiopeia) Replace logo + gradient ========================= */ /* header background like free card */ .container-header, .header, .header-bar{ background:linear-gradient(180deg,#1a0033 0%, #b600d5 100%) !important; } /* hide logo svg/img */ .container-header .navbar-brand img, .container-header .navbar-brand .brand-logo{ display:none !important; } /* hide any text brand if enabled */ .container-header .navbar-brand .brand-text, .container-header .navbar-brand .site-title{ display:none !important; } /* show "Joomla Академия" in place of logo */ .container-header .navbar-brand{ display:flex; align-items:center; margin:0 !important; /* keep it where Cassiopeia had it */ } .container-header .navbar-brand::after{ content:"Joomla Academy"; /* Joomla Академия */ font-weight:800; font-size:28px; letter-spacing:.5px; line-height:1; color:#fff; white-space:nowrap; display:inline-block; } /* ========================= MOBILE: FULL WIDTH CARDS ========================= */ @media (max-width: 900px){ .pricing-paid{ grid-template-columns:1fr; } } /* Force full width on small screens */ @media (max-width: 768px){ /* Cassiopeia containers can limit width */ .site-grid, .grid-child, .container, .container-fluid, main, #main, #site-content{ max-width:100% !important; width:100% !important; } /* section padding for mobile */ .pricing-wrapper{ padding:24px 12px !important; width:100% !important; } /* cards full width */ .pricing-free .price-card, .pricing-paid .price-card{ width:100% !important; max-width:100% !important; border-radius:18px; } /* header height slightly smaller */ .container-header{ padding-top:8px; padding-bottom:8px; } } .jl-gives { text-align: left; margin: 18px 0 10px; } .jl-gives-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; } .jl-gives-list { margin: 0; padding-left: 18px; font-size: 14px; opacity: .9; } .jl-gives-list li { margin: 6px 0; } .jl-result { margin-top: 10px; font-size: 13px; opacity: .85; } /* чтобы на бесплатном (тёмном) тоже читалось */ .price-card.free .jl-gives-list, .price-card.free .jl-result, .price-card.free .jl-gives-title { opacity: 0.95; } /* Cassiopeia: меню справа на линии логотипа (desktop) */ @media (min-width: 992px) { /* контейнер шапки в одну строку */ header .container-header .site-grid { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px; } /* левый блок (бренд/логотип) */ header .container-header .site-grid > .grid-child:first-child { flex: 0 0 auto; } /* правый блок (nav/меню) */ header .container-header .site-grid > .grid-child:last-child { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; } /* именно меню вправо */ header .container-header nav, header .container-header .container-nav, header .container-header .navbar-nav { margin-left: auto !important; justify-content: flex-end !important; align-items: center !important; } /* убрать “провал” вниз (часто даёт отступы у nav) */ header .container-header .container-nav, header .container-header nav { margin-top: 0 !important; padding-top: 0 !important; } } @media (min-width: 992px) { header .container-header nav .navbar-nav { flex-wrap: nowrap !important; } } /* BUNDLE BLOCK */ .pricing-bundle{ width: 100%; margin: 18px 0 0 0; } .bundle-card{ position: relative; border-radius: 18px; padding: 18px; border: 1px solid rgba(128,0,255,0.22); background: linear-gradient(180deg, rgba(26,0,51,0.92) 0%, rgba(182,0,213,0.90) 100%); box-shadow: 0 18px 50px rgba(0,0,0,0.16); overflow: hidden; } .bundle-badge{ display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.2px; } .bundle-head{ margin-top: 10px; color: #fff; } .bundle-head h3{ margin: 8px 0 6px 0; font-size: 28px; font-weight: 900; line-height: 1.15; } .bundle-head .desc{ margin: 0; opacity: 0.9; } .bundle-body{ margin-top: 14px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; } .bundle-col{ border-radius: 16px; background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.06); padding: 14px 16px; } .bundle-col strong{ display: inline-block; margin-bottom: 8px; } .bundle-col ul{ margin: 0; padding-left: 18px; } .bundle-col li{ margin: 6px 0; } .bundle-result{ margin: 0 0 12px 0; line-height: 1.6; opacity: 0.9; } .bundle-price{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 10px 0 12px 0; } .bundle-price .old{ text-decoration: line-through; opacity: 0.55; font-weight: 700; } .bundle-price .new{ font-size: 34px; font-weight: 900; line-height: 1; } .bundle-price .save{ padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.08); font-weight: 800; font-size: 13px; } /* responsive */ @media (max-width: 980px){ .bundle-body{ grid-template-columns: 1fr; } .bundle-head h3{ font-size: 24px; } .bundle-price .new{ font-size: 30px; } } /* ========================= FOOTER — Joomla Academy Cassiopeia override ========================= */ /* основной контейнер футера */ footer, .site-footer, .container-footer, .footer, #footer { background: linear-gradient(180deg, #1a0033 0%, #b600d5 100%) !important; color: #ffffff !important; } /* внутренняя сетка футера */ footer .site-grid, footer .grid-child, footer .container, footer .container-fluid { background: transparent !important; } /* ссылки в футере */ footer a { color: rgba(255,255,255,0.9) !important; text-decoration: none; font-weight: 500; } footer a:hover { color: #ffffff !important; text-decoration: underline; } /* текст футера */ footer, footer p, footer span, footer li { color: rgba(255,255,255,0.9) !important; } /* разделители (если есть) */ footer hr { border-color: rgba(255,255,255,0.15) !important; } /* убираем возможный верхний бордер cassiopeia */ footer { border-top: none !important; } .