Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/01 17:17
From version 25.23
edited by Agnease
on 2026/06/30 11:31
Change comment: There is no comment for this version
To version 25.39
edited by Agnease
on 2026/06/30 11:57
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[0]
code
... ... @@ -185,9 +185,6 @@
185 185  
186 186   &.hero-centered {
187 187   text-align: center;
188 - background:
189 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
190 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
191 191   display: flex;
192 192   align-items: center;
193 193   justify-content: center;
... ... @@ -528,7 +528,6 @@
528 528   align-items: flex-start;
529 529   gap: 16px;
530 530   padding: 22px;
531 - background: #fff;
532 532   border: 1px solid @line;
533 533   border-radius: @radius;
534 534   box-shadow: @shadow-sm;
... ... @@ -616,7 +616,6 @@
616 616   position: relative;
617 617   padding: 16px 16px 16px 58px;
618 618   margin-bottom: 12px;
619 - background: #fff;
620 620   border: 1px solid @line;
621 621   border-radius: @radius;
622 622   box-shadow: @shadow-sm;
... ... @@ -767,8 +767,6 @@
767 767   padding: 32px;
768 768   border-radius: @radius;
769 769   border: 1px solid fade(@brand, 20%);
770 - background:
771 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
772 772   box-shadow: @shadow-sm;
773 773   text-align: center;
774 774  
... ... @@ -927,9 +927,6 @@
927 927  .resource-header {
928 928   padding: @section-padding;
929 929   border-top: none;
930 - background:
931 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
932 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
933 933  
934 934   h1 {
935 935   margin: 0 auto 14px;
... ... @@ -1077,7 +1077,6 @@
1077 1077   border: 1px solid @line;
1078 1078   border-radius: @radius;
1079 1079   padding: 18px;
1080 - background: #fff;
1081 1081   box-shadow: @shadow-sm;
1082 1082  
1083 1083   h4 {
... ... @@ -1176,7 +1176,6 @@
1176 1176  
1177 1177  .product-card {
1178 1178   position: relative;
1179 - background: #fff;
1180 1180   border: 1px solid @line;
1181 1181   border-radius: @radius;
1182 1182   box-shadow: @shadow-sm;
... ... @@ -1326,7 +1326,6 @@
1326 1326  .product-info-card,
1327 1327  .product-feature,
1328 1328  .product-gallery-panel {
1329 - background: #fff;
1330 1330   border: 1px solid @line;
1331 1331   border-radius: @radius;
1332 1332   box-shadow: @shadow-sm;
... ... @@ -1569,7 +1569,6 @@
1569 1569  /* ========== Resources Index ========== */
1570 1570  
1571 1571  .resources-index-page {
1572 - background: #fff;
1573 1573  
1574 1574   .services-grid {
1575 1575   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1654,3 +1654,283 @@
1654 1654   background: #fff !important;
1655 1655   background-image: none !important;
1656 1656  } */
1643 +
1644 +
1645 +/* ========== Hero ========== */
1646 +#mainContentArea .hero.hero-saas {
1647 + min-height: auto;
1648 + padding: 60px 0 34px;
1649 + display: flex;
1650 + align-items: center;
1651 + overflow: hidden;
1652 + background: transparent;
1653 +}
1654 +#mainContentArea .hero-layout {
1655 + max-width: 1120px;
1656 + margin: 0 auto;
1657 + display: grid;
1658 + grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
1659 + gap: 56px;
1660 + align-items: center;
1661 +}
1662 +#mainContentArea .hero-copy,
1663 +#mainContentArea .hero.hero-saas .lead {
1664 + text-align: left;
1665 +}
1666 +#mainContentArea .hero.hero-saas h1 {
1667 + max-width: 640px;
1668 + margin: 0 0 26px;
1669 + font-size: 60px;
1670 + font-weight: 800;
1671 + line-height: 1;
1672 + letter-spacing: -3px;
1673 +}
1674 +#mainContentArea .hero.hero-saas h1 span {
1675 + color: @brand;
1676 +}
1677 +#mainContentArea .hero.hero-saas .lead {
1678 + max-width: 590px;
1679 + margin: 0 0 28px;
1680 + color: #334155;
1681 + font-size: 18px;
1682 + line-height: 1.6;
1683 +}
1684 +#mainContentArea .hero.hero-saas .benefits {
1685 + max-width: 620px;
1686 + margin: 0 0 30px;
1687 + padding: 0;
1688 + display: grid;
1689 + grid-template-columns: repeat(2, minmax(0, 1fr));
1690 + gap: 10px 24px;
1691 + list-style: none;
1692 + color: #475569;
1693 + font-size: 15px;
1694 + text-align: left;
1695 +}
1696 +#mainContentArea .hero.hero-saas .benefits li {
1697 + display: grid;
1698 + grid-template-columns: 18px minmax(0, 1fr);
1699 + column-gap: 8px;
1700 + align-items: start;
1701 + margin: 0;
1702 + line-height: 1.45;
1703 +}
1704 +#mainContentArea .hero.hero-saas .benefits li::before {
1705 + content: "✓";
1706 + display: block;
1707 + width: 18px;
1708 + color: @brand;
1709 + font-weight: 900;
1710 + line-height: 1.45;
1711 + text-align: left;
1712 + margin: 0;
1713 +}
1714 +#mainContentArea .hero-actions,
1715 +#mainContentArea #hero-cta {
1716 + display: flex;
1717 + flex-wrap: wrap;
1718 + justify-content: flex-start;
1719 + gap: 12px;
1720 +}
1721 +#mainContentArea .hero-visual {
1722 + position: relative;
1723 + min-height: 540px;
1724 +}
1725 +#mainContentArea .hero-browser,
1726 +#mainContentArea .hero-floating {
1727 + border: 1px solid @line;
1728 + background: fade(#fff, 94%);
1729 + box-shadow: @shadow;
1730 + backdrop-filter: blur(14px);
1731 +}
1732 +#mainContentArea .hero-browser {
1733 + position: absolute;
1734 + top: 8px;
1735 + right: 0;
1736 + width: 100%;
1737 + max-width: 720px;
1738 + overflow: hidden;
1739 + border-radius: 18px;
1740 + background: fade(#fff, 88%);
1741 +}
1742 +#mainContentArea .hero-browser-top {
1743 + height: 58px;
1744 + display: flex;
1745 + align-items: center;
1746 + gap: 10px;
1747 + padding: 0 24px;
1748 + border-bottom: 1px solid @line;
1749 + background: fade(#fff, 74%);
1750 +}
1751 +#mainContentArea .hero-dot,
1752 +#mainContentArea .hero-status-dot {
1753 + border-radius: 50%;
1754 +}
1755 +#mainContentArea .hero-dot {
1756 + width: 10px;
1757 + height: 10px;
1758 + background: #CBD5E1;
1759 +}
1760 +#mainContentArea .hero-status-dot {
1761 + width: 8px;
1762 + height: 8px;
1763 + background: @brand;
1764 +}
1765 +#mainContentArea .hero-search {
1766 + margin-left: auto;
1767 + width: 170px;
1768 + height: 26px;
1769 + border: 1px solid #E2E8F0;
1770 + border-radius: 20px;
1771 + background: #F1F5F9;
1772 +}
1773 +#mainContentArea .hero-browser-body {
1774 + display: grid;
1775 + grid-template-columns: 150px minmax(0, 1fr);
1776 +}
1777 +#mainContentArea .hero-sidebar {
1778 + padding: 24px 18px;
1779 + border-right: 1px solid @line;
1780 + background: #F8FAFC;
1781 +}
1782 +#mainContentArea .hero-nav-item,
1783 +#mainContentArea .hero-status-row,
1784 +#mainContentArea .hero-version-flow,
1785 +#mainContentArea .hero-flow {
1786 + display: flex;
1787 + align-items: center;
1788 +}
1789 +#mainContentArea .hero-nav-item {
1790 + gap: 9px;
1791 + padding: 10px 8px;
1792 + color: #334155;
1793 + font-size: 13px;
1794 +}
1795 +#mainContentArea .hero-nav-icon {
1796 + width: 20px;
1797 + height: 20px;
1798 + border: 1px solid #CBD5E1;
1799 + border-radius: 5px;
1800 +}
1801 +#mainContentArea .hero-content-panel {
1802 + padding: 26px;
1803 +}
1804 +#mainContentArea .hero-panel-title,
1805 +#mainContentArea .hero-card-title {
1806 + color: @text;
1807 + font-weight: 800;
1808 +}
1809 +#mainContentArea .hero-panel-title {
1810 + margin-bottom: 18px;
1811 + font-size: 20px;
1812 +}
1813 +#mainContentArea .hero-skeleton {
1814 + height: 8px;
1815 + margin-bottom: 10px;
1816 + border-radius: 10px;
1817 + background: #E2E8F0;
1818 +}
1819 +#mainContentArea .hero-skeleton.short {
1820 + width: 64%;
1821 +}
1822 +#mainContentArea .hero-dashboard-grid {
1823 + margin-top: 28px;
1824 + display: grid;
1825 + grid-template-columns: repeat(2, minmax(0, 1fr));
1826 + gap: 18px;
1827 +}
1828 +#mainContentArea .hero-mini-card {
1829 + padding: 18px;
1830 + border: 1px solid @line;
1831 + border-radius: 14px;
1832 + background: #fff;
1833 +}
1834 +#mainContentArea .hero-mini-card h4 {
1835 + margin: 0 0 14px;
1836 + font-size: 15px;
1837 +}
1838 +#mainContentArea .hero-status-row {
1839 + gap: 10px;
1840 + margin: 11px 0;
1841 + color: #475569;
1842 + font-size: 13px;
1843 +}
1844 +#mainContentArea .hero-floating {
1845 + position: absolute;
1846 + border-radius: 16px;
1847 +}
1848 +#mainContentArea .hero-upgrade-card {
1849 + left: 0;
1850 + bottom: 72px;
1851 + width: 320px;
1852 + padding: 20px;
1853 +}
1854 +#mainContentArea .hero-security-card {
1855 + right: 20px;
1856 + top: 260px;
1857 + width: 260px;
1858 + padding: 22px;
1859 +}
1860 +#mainContentArea .hero-security-card ul {
1861 + margin: 0;
1862 + padding: 0;
1863 + list-style: none;
1864 +}
1865 +#mainContentArea .hero-security-card li {
1866 + margin: 12px 0;
1867 + font-size: 14px;
1868 +}
1869 +#mainContentArea .hero-security-card li::before {
1870 + content: "✓";
1871 + margin-right: 8px;
1872 + color: @brand;
1873 + font-weight: 900;
1874 +}
1875 +#mainContentArea .hero-card-title {
1876 + margin-bottom: 16px;
1877 +}
1878 +#mainContentArea .hero-version-flow {
1879 + gap: 8px;
1880 +}
1881 +#mainContentArea .hero-version {
1882 + width: 62px;
1883 + height: 54px;
1884 + padding: 0 8px;
1885 + display: grid;
1886 + place-items: center;
1887 + box-sizing: border-box;
1888 + border-radius: 8px;
1889 + background: #F1F5F9;
1890 + color: #334155;
1891 + text-align: center;
1892 + font-size: 13px;
1893 + line-height: 1.25;
1894 +}
1895 +#mainContentArea .hero-version.active {
1896 + width: 84px;
1897 + background: @text;
1898 + color: #fff;
1899 +}
1900 +#mainContentArea .hero-arrow {
1901 + color: #64748B;
1902 +}
1903 +#mainContentArea .hero-flow {
1904 + position: absolute;
1905 + right: 48px;
1906 + bottom: 18px;
1907 + gap: 12px;
1908 +}
1909 +#mainContentArea .hero-env {
1910 + min-width: 130px;
1911 + padding: 16px 20px;
1912 + border: 1px solid @line;
1913 + border-radius: 12px;
1914 + background: #fff;
1915 + color: #475569;
1916 + text-align: center;
1917 + text-transform: uppercase;
1918 + font-size: 12px;
1919 + letter-spacing: 1.3px;
1920 + box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
1921 +}
1922 +