Changes for page Public Web Site

Summary

• Objects (1 modified, 0 added, 0 removed)
  • XWiki.StyleSheetExtension[0]

Details

XWiki.StyleSheetExtension[0]

code

...	...	@@ -1635,4 +1635,179 @@
1635	1635	background-image: none !important;
1636	1636	} */
1637	1637
	1638	+/* ========== Main Page Hero / SaaS Layout ========== */
1638	1638
	1640	+#mainContentArea .hero.hero-saas {
	1641	+ min-height: auto;
	1642	+ padding: 60px 0 34px;
	1643	+ display: flex;
	1644	+ align-items: center;
	1645	+ overflow: hidden;
	1646	+ background: transparent;
	1647	+}
	1648	+
	1649	+#mainContentArea .hero-layout {
	1650	+ max-width: 1120px;
	1651	+ margin: 0 auto;
	1652	+ display: grid;
	1653	+ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	1654	+ gap: 56px;
	1655	+ align-items: center;
	1656	+}
	1657	+
	1658	+#mainContentArea .hero-copy {
	1659	+ min-width: 0;
	1660	+ text-align: left;
	1661	+}
	1662	+
	1663	+#mainContentArea .hero.hero-saas h1 {
	1664	+ max-width: 640px;
	1665	+ margin: 0 0 26px;
	1666	+ font-size: 60px;
	1667	+ font-weight: 800;
	1668	+ line-height: 1;
	1669	+ letter-spacing: -3px;
	1670	+}
	1671	+
	1672	+#mainContentArea .hero.hero-saas h1 span {
	1673	+ color: @brand;
	1674	+}
	1675	+
	1676	+#mainContentArea .hero.hero-saas .lead {
	1677	+ max-width: 590px;
	1678	+ margin: 0 0 28px;
	1679	+ color: #334155;
	1680	+ text-align: left;
	1681	+ font-size: 18px;
	1682	+ line-height: 1.6;
	1683	+}
	1684	+
	1685	+#mainContentArea .hero.hero-saas .benefits {
	1686	+ max-width: 620px;
	1687	+ margin: 0 0 30px;
	1688	+ padding: 0;
	1689	+ display: grid;
	1690	+ grid-template-columns: repeat(2, minmax(0, 1fr));
	1691	+ gap: 10px 24px;
	1692	+ list-style: none;
	1693	+ color: #475569;
	1694	+ font-size: 15px;
	1695	+ text-align: left;
	1696	+}
	1697	+
	1698	+#mainContentArea .hero.hero-saas .benefits li {
	1699	+ display: grid;
	1700	+ grid-template-columns: 18px minmax(0, 1fr);
	1701	+ column-gap: 8px;
	1702	+ align-items: start;
	1703	+ margin: 0;
	1704	+ line-height: 1.45;
	1705	+}
	1706	+
	1707	+#mainContentArea .hero.hero-saas .benefits li::before {
	1708	+ content: "✓";
	1709	+ display: block;
	1710	+ width: 18px;
	1711	+ color: @brand;
	1712	+ font-weight: 900;
	1713	+ line-height: 1.45;
	1714	+ text-align: left;
	1715	+ margin: 0;
	1716	+}
	1717	+
	1718	+#mainContentArea .hero.hero-saas .hero-actions,
	1719	+#mainContentArea .hero.hero-saas #hero-cta {
	1720	+ display: flex;
	1721	+ flex-wrap: wrap;
	1722	+ justify-content: flex-start;
	1723	+ gap: 12px;
	1724	+ margin-top: 0;
	1725	+}
	1726	+
	1727	+#mainContentArea .hero-image-wrapper {
	1728	+ min-width: 0;
	1729	+ display: flex;
	1730	+ justify-content: center;
	1731	+ align-items: center;
	1732	+}
	1733	+
	1734	+#mainContentArea .hero-image {
	1735	+ display: block;
	1736	+ width: 100%;
	1737	+ max-width: 620px;
	1738	+ height: auto;
	1739	+ border: 0;
	1740	+}
	1741	+
	1742	+/* ========== Main Page Hero Responsive ========== */
	1743	+
	1744	+@media (max-width: 1100px) {
	1745	+ #mainContentArea .hero-layout {
	1746	+ max-width: 760px;
	1747	+ grid-template-columns: 1fr;
	1748	+ gap: 34px;
	1749	+ }
	1750	+
	1751	+ #mainContentArea .hero-copy {
	1752	+ order: 1;
	1753	+ text-align: center;
	1754	+ }
	1755	+
	1756	+ #mainContentArea .hero-image-wrapper {
	1757	+ order: 2;
	1758	+ }
	1759	+
	1760	+ #mainContentArea .hero.hero-saas h1 {
	1761	+ margin-left: auto;
	1762	+ margin-right: auto;
	1763	+ text-align: center;
	1764	+ }
	1765	+
	1766	+ #mainContentArea .hero.hero-saas .lead {
	1767	+ margin-left: auto;
	1768	+ margin-right: auto;
	1769	+ text-align: center;
	1770	+ }
	1771	+
	1772	+ #mainContentArea .hero.hero-saas .benefits {
	1773	+ margin-left: auto;
	1774	+ margin-right: auto;
	1775	+ }
	1776	+
	1777	+ #mainContentArea .hero.hero-saas .hero-actions,
	1778	+ #mainContentArea .hero.hero-saas #hero-cta {
	1779	+ justify-content: center;
	1780	+ }
	1781	+
	1782	+ #mainContentArea .hero-image {
	1783	+ max-width: 620px;
	1784	+ }
	1785	+}
	1786	+
	1787	+@media (max-width: 640px) {
	1788	+ #mainContentArea .hero.hero-saas {
	1789	+ padding: 42px 0 28px;
	1790	+ }
	1791	+
	1792	+ #mainContentArea .hero-layout {
	1793	+ gap: 28px;
	1794	+ }
	1795	+
	1796	+ #mainContentArea .hero.hero-saas h1 {
	1797	+ font-size: 42px;
	1798	+ letter-spacing: -1.5px;
	1799	+ }
	1800	+
	1801	+ #mainContentArea .hero.hero-saas .lead {
	1802	+ font-size: 17px;
	1803	+ }
	1804	+
	1805	+ #mainContentArea .hero.hero-saas .benefits {
	1806	+ grid-template-columns: 1fr;
	1807	+ }
	1808	+
	1809	+ #mainContentArea .hero-image {
	1810	+ max-width: 100%;
	1811	+ }
	1812	+}
	1813	+