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,272 @@
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	+
	1814	+/* ========== Accessibility / Contrast Improvements ========== */
	1815	+
	1816	+/* Make the global background softer and less distracting. */
	1817	+body {
	1818	+ background:
	1819	+ radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
	1820	+ radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
	1821	+ linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
	1822	+ background-attachment: scroll;
	1823	+}
	1824	+
	1825	+/* Keep the article area readable while preserving the page background around it. */
	1826	+#mainContentArea .resource-layout {
	1827	+ padding: 28px;
	1828	+ border: 1px solid fade(@line, 85%);
	1829	+ border-radius: @radius;
	1830	+ background: rgba(255, 255, 255, .88);
	1831	+ box-shadow: @shadow-sm;
	1832	+}
	1833	+
	1834	+/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
	1835	+#mainContentArea .widget,
	1836	+#mainContentArea .pathway-card,
	1837	+#mainContentArea .service-card,
	1838	+#mainContentArea .resource-card,
	1839	+#mainContentArea .services .service,
	1840	+#mainContentArea .product-card,
	1841	+#mainContentArea .product-feature,
	1842	+#mainContentArea .product-summary-card,
	1843	+#mainContentArea .product-info-card {
	1844	+ background: #fff;
	1845	+}
	1846	+
	1847	+/* Make notes more readable and visually stronger. */
	1848	+#mainContentArea .resource-note {
	1849	+ border: 1px solid fade(@brand, 18%);
	1850	+ border-left: 4px solid @brand;
	1851	+ background: #fff;
	1852	+ box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
	1853	+}
	1854	+
	1855	+/* Keep the sidebar clearly separated from the background. */
	1856	+#mainContentArea .resource-sidebar {
	1857	+ background: #fff;
	1858	+}
	1859	+
	1860	+/* Make CTA panels stand out more clearly. */
	1861	+#mainContentArea .cta-panel,
	1862	+#mainContentArea .resource-cta,
	1863	+#mainContentArea .resource-inline-cta {
	1864	+ background: #fff;
	1865	+}
	1866	+
	1867	+/* Improve table readability on long resource pages. */
	1868	+#mainContentArea .resource-content table {
	1869	+ background: #fff;
	1870	+}
	1871	+
	1872	+#mainContentArea .resource-content table th {
	1873	+ color: @text;
	1874	+ background: #F8FAFC;
	1875	+}
	1876	+
	1877	+#mainContentArea .resource-content table td {
	1878	+ color: @text-soft;
	1879	+}
	1880	+
	1881	+/* Slightly improve paragraph/list contrast in long articles. */
	1882	+#mainContentArea .resource-content p,
	1883	+#mainContentArea .resource-content li {
	1884	+ color: @text-soft;
	1885	+}
	1886	+
	1887	+#mainContentArea .resource-content .resource-note p,
	1888	+#mainContentArea .resource-content .resource-checklist li,
	1889	+#mainContentArea .resource-content .process-list li {
	1890	+ color: @muted;
	1891	+}
	1892	+
	1893	+@media (max-width: 900px) {
	1894	+ #mainContentArea .resource-layout {
	1895	+ padding: 22px;
	1896	+ }
	1897	+}
	1898	+
	1899	+@media (max-width: 640px) {
	1900	+ #mainContentArea .resource-layout {
	1901	+ padding: 18px;
	1902	+ border-radius: 14px;
	1903	+ }
	1904	+}
	1905	+
	1906	+