Changes for page Public Web Site
Last modified by Alex Cotiuga on 2026/07/25 17:30
From version 30.13
edited by Alex Cotiuga
on 2026/07/25 17:08
on 2026/07/25 17:08
Change comment:
There is no comment for this version
To version 25.22
edited by Alex Cotiuga
on 2026/06/30 11:27
on 2026/06/30 11:27
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Attachments (0 modified, 0 added, 1 removed)
-
Objects (1 modified, 0 added, 1 removed)
Details
- Page properties
-
- Content
-
... ... @@ -2,45 +2,7 @@ 2 2 #macro (displayPublicContent) 3 3 #set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome')) 4 4 {{html clean="false"}} 5 - <section class="hero hero-saas" id="top"> 6 - <div class="container"> 7 - <div class="hero-layout"> 8 - <div class="hero-copy"> 9 - <h1>Professional XWiki consulting <span>and engineering</span></h1> 10 10 11 - <p class="lead"> 12 - Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care. 13 - </p> 14 - 15 - <ul class="benefits"> 16 - <li>XWiki LTS upgrades</li> 17 - <li>Maintenance and support</li> 18 - <li>Custom XWiki development</li> 19 - <li>Migrations and integrations</li> 20 - </ul> 21 - 22 - <div class="hero-actions" id="hero-cta"> 23 - <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06"> 24 - Book a free discussion 25 - </a> 26 - <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a> 27 - </div> 28 - </div> 29 - 30 - <div class="hero-image-wrapper"> 31 - <img 32 - class="hero-image" 33 - src="$xwiki.getDocument('PublicWebSite.WebHome').getAttachmentURL('agnease-xwiki-hero.png')" 34 - alt="Illustration of a professional XWiki platform dashboard with upgrade, security and maintenance elements" 35 - width="1200" 36 - height="900" 37 - loading="eager" 38 - /> 39 - </div> 40 - </div> 41 - </div> 42 - </section> 43 -#* 44 44 <section class="hero hero-centered" aria-labelledby="hero-title"> 45 45 <div class="container hero-inner"> 46 46 <h1 id="hero-title">Professional XWiki consulting and engineering</h1> ... ... @@ -64,7 +64,7 @@ 64 64 </div> 65 65 </div> 66 66 </section> 67 - *#29 + 68 68 <section class="trust-strip" aria-label="Agnease experience"> 69 69 <div class="container"> 70 70 <ul> ... ... @@ -249,7 +249,6 @@ 249 249 A short description is enough to define practical next steps. 250 250 </p> 251 251 <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Contact Agnease</a> 252 - <a class="btn btn-secondary" href="$xwiki.getURL('pricing.WebHome')">View service packages</a> 253 253 </div> 254 254 </div> 255 255 </section>
- agnease-xwiki-hero.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.Admin - Size
-
... ... @@ -1,1 +1,0 @@ 1 -981.8 KB - Content
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -79,7 +79,7 @@ 79 79 80 80 .section-intro { 81 81 max-width: 760px; 82 - margin: 10pxauto 22px;82 + margin: 0 auto 22px; 83 83 text-align: center; 84 84 color: @muted; 85 85 font-size: 16px; ... ... @@ -150,7 +150,7 @@ 150 150 151 151 /* ========== Buttons ========== */ 152 152 153 - /*.btn-primary {153 +.btn-primary { 154 154 background: @brand; 155 155 border-color: @brand; 156 156 color: #fff; ... ... @@ -162,12 +162,18 @@ 162 162 color: #fff; 163 163 } 164 164 } 165 - */165 + 166 166 .btn-secondary { 167 - color: @ text;167 + color: @brand; 168 168 background: #fff; 169 - border: 1px solid fade(@ text, 35%);169 + border: 1px solid fade(@brand, 35%); 170 170 171 + &:hover, 172 + &:focus { 173 + color: @brand-strong; 174 + border-color: @brand; 175 + background: @brand-bg; 176 + } 171 171 } 172 172 173 173 /* ========== Hero ========== */ ... ... @@ -179,6 +179,9 @@ 179 179 180 180 &.hero-centered { 181 181 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%); 182 182 display: flex; 183 183 align-items: center; 184 184 justify-content: center; ... ... @@ -324,6 +324,7 @@ 324 324 .pathway-card, 325 325 .service-card, 326 326 .resource-card { 336 + background: #fff; 327 327 border: 1px solid @line; 328 328 border-radius: @radius; 329 329 box-shadow: @shadow-sm; ... ... @@ -519,6 +519,7 @@ 519 519 align-items: flex-start; 520 520 gap: 16px; 521 521 padding: 22px; 532 + background: #fff; 522 522 border: 1px solid @line; 523 523 border-radius: @radius; 524 524 box-shadow: @shadow-sm; ... ... @@ -576,104 +576,23 @@ 576 576 577 577 .split-grid { 578 578 display: grid; 579 - grid-template-columns: . 95fr1.05fr;590 + grid-template-columns: 1.1fr .9fr; 580 580 grid-gap: 36px; 581 581 max-width: 1040px; 582 582 margin: 0 auto; 583 - align-items: stretch;594 + align-items: center; 584 584 } 585 585 586 586 .split-copy { 587 - position: relative; 588 - overflow: hidden; 589 - min-height: 100%; 590 - padding: 42px 38px; 591 - border-radius: 26px; 592 - background: 593 - radial-gradient(circle at 86% 12%, fade(@brand, 22%) 0%, transparent 32%), 594 - linear-gradient(135deg, @text 0%, @text-soft 100%); 595 - color: #fff; 596 - box-shadow: @shadow; 597 - 598 - &::before { 599 - content: ""; 600 - position: absolute; 601 - inset: 0; 602 - background: 603 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 604 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 605 - background-size: 48px 48px; 606 - opacity: .36; 607 - pointer-events: none; 608 - } 609 - 610 - h2, 611 - p { 612 - position: relative; 613 - z-index: 1; 614 - } 615 - 616 616 h2 { 617 617 text-align: left; 618 - margin: 0 0 18px; 619 - color: #fff; 620 - font-size: 30px; 621 - line-height: 1.18; 622 - letter-spacing: -.02em; 600 + margin-top: 0; 623 623 } 624 624 625 625 p { 626 - margin: 0 0 18px; 627 - color: #DBE4EF; 628 - line-height: 1.65; 629 - 630 - &:last-child { 631 - margin-bottom: 0; 632 - } 604 + color: @muted; 605 + line-height: 1.6; 633 633 } 634 - 635 - h3, 636 - h4 { 637 - position: relative; 638 - z-index: 1; 639 - margin: 0 0 16px; 640 - color: #fff; 641 - font-size: 24px; 642 - line-height: 1.2; 643 - font-weight: 800; 644 - } 645 - 646 - h2 i, 647 - h3 i, 648 - h4 i { 649 - margin-right: 8px; 650 - color: @brand; 651 - } 652 - 653 - ul { 654 - position: relative; 655 - z-index: 1; 656 - margin: 18px 0 0; 657 - padding: 0; 658 - list-style: none; 659 - } 660 - 661 - li { 662 - position: relative; 663 - margin: 10px 0; 664 - padding-left: 28px; 665 - color: #DBE4EF; 666 - line-height: 1.5; 667 - 668 - &::before { 669 - content: "\f00c"; 670 - font-family: FontAwesome; 671 - position: absolute; 672 - left: 0; 673 - top: 1px; 674 - color: @brand; 675 - } 676 - } 677 677 } 678 678 679 679 .process-list { ... ... @@ -685,75 +685,39 @@ 685 685 li { 686 686 counter-increment: process; 687 687 position: relative; 688 - min-height: 104px;689 - padding: 24px26px 24px 82px;690 - margin-bottom:18px;618 + padding: 16px 16px 16px 58px; 619 + margin-bottom: 12px; 620 + background: #fff; 691 691 border: 1px solid @line; 692 692 border-radius: @radius; 693 - background: #fff; 694 694 box-shadow: @shadow-sm; 695 695 color: @muted; 696 696 line-height: 1.5; 697 697 698 - &:last-child { 699 - margin-bottom: 0; 700 - } 701 - 702 702 &:before { 703 703 content: counter(process); 704 704 position: absolute; 705 - left: 26px;706 - top: 26px;707 - width: 38px;708 - height: 38px;630 + left: 16px; 631 + top: 16px; 632 + width: 28px; 633 + height: 28px; 709 709 border-radius: 50%; 710 - background: @brand; 711 - color: #fff;635 + background: fade(@brand, 10%); 636 + color: @brand; 712 712 display: flex; 713 713 align-items: center; 714 714 justify-content: center; 715 715 font-weight: 800; 716 - box-shadow: 0 0 0 8px fade(@brand, 10%); 717 717 } 718 718 719 719 strong { 720 720 display: block; 721 721 color: @text; 722 - margin-bottom: 5px; 723 - font-size: 16px; 724 - line-height: 1.3; 646 + margin-bottom: 3px; 725 725 } 726 726 } 727 727 } 728 728 729 -/* ===== Contact page side panel ===== */ 730 - 731 -.contact-side-panel { 732 - padding-top: 10px; 733 -} 734 - 735 -.contact-help-panel { 736 - margin-bottom: 18px; 737 - padding: 30px 28px; 738 -} 739 - 740 -.contact-help-panel h2 { 741 - font-size: 24px; 742 -} 743 - 744 -.contact-process-list li { 745 - min-height: auto; 746 -} 747 - 748 -/* CSS for hidden field to identify requests filled by bots. */ 749 -.contact-hp-wrapper { 750 - position: absolute; 751 - left: -9999px; 752 - width: 1px; 753 - height: 1px; 754 - overflow: hidden; 755 -} 756 - 757 757 /* ========== Resources ========== */ 758 758 759 759 .resource-strip { ... ... @@ -761,7 +761,6 @@ 761 761 } 762 762 763 763 .resource-card { 764 - background-color: #fff; 765 765 padding: 20px; 766 766 767 767 h4 { ... ... @@ -857,7 +857,7 @@ 857 857 /* ========== CTA ========== */ 858 858 859 859 .cta-section { 860 - border:none;753 + padding: @section-padding; 861 861 862 862 .contact-inline { 863 863 margin: 0; ... ... @@ -867,68 +867,69 @@ 867 867 color: @brand; 868 868 } 869 869 } 763 +} 870 870 871 - .cta-panel { 872 - position: relative; 873 - overflow: hidden; 874 - max-width: 1040px; 875 - margin: 0 auto; 876 - padding: 48px 40px; 877 - border: 0; 878 - border-radius: 26px; 879 - background: 880 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%), 881 - linear-gradient(135deg, @text 0%, @text-soft 100%); 882 - color: #fff; 883 - box-shadow: @shadow; 884 - text-align: center; 765 +.cta-panel { 766 + max-width: 860px; 767 + margin: 0 auto; 768 + padding: 32px; 769 + border-radius: @radius; 770 + border: 1px solid fade(@brand, 20%); 771 + background: 772 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 773 + box-shadow: @shadow-sm; 774 + text-align: center; 885 885 886 - &::before { 887 - content: ""; 888 - position: absolute; 889 - inset: 0; 890 - background: 891 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 892 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 893 - background-size: 48px 48px; 894 - opacity: .4; 895 - pointer-events: none; 896 - } 776 + h2 { 777 + margin-top: 0; 778 + } 897 897 898 - h2, 899 - p, 900 - .btn { 901 - position: relative; 902 - z-index: 1; 903 - } 780 + p { 781 + color: @muted; 782 + line-height: 1.55; 783 + } 784 +} 904 904 905 - h2 { 906 - max-width: 760px; 907 - margin: 0 auto 16px; 908 - color: #fff; 909 - } 786 +.resource-inline-cta { 787 + display: flex; 788 + align-items: center; 789 + justify-content: space-between; 790 + gap: 22px; 791 + margin: 30px 0; 792 + padding: 20px 22px; 793 + border: 1px solid fade(@brand, 22%); 794 + border-radius: @radius; 795 + background: @brand-bg; 796 + box-shadow: @shadow-sm; 910 910 798 + p { 799 + margin: 0; 800 + color: @muted; 801 + line-height: 1.55; 802 + } 803 + 804 + strong { 805 + color: @text; 806 + } 807 + 808 + .btn { 809 + flex-shrink: 0; 810 + } 811 +} 812 + 813 +@media (max-width: 767px) { 814 + .resource-inline-cta { 815 + display: block; 816 + text-align: center; 817 + 911 911 p { 912 - max-width: 760px; 913 - margin: 0 auto 28px; 914 - color: #DBE4EF; 915 - font-size: 16px; 916 - line-height: 1.6; 819 + margin-bottom: 14px; 917 917 } 918 918 919 - .btn-primary { 920 - border-color: #fff; 921 - background: #fff; 922 - color: @text; 923 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18); 924 - 925 - &:hover, 926 - &:focus { 927 - border-color: #fff; 928 - background: #fff; 929 - color: @brand-strong; 930 - text-decoration: none; 931 - } 822 + .btn { 823 + display: inline-block; 824 + margin-left: auto; 825 + margin-right: auto; 932 932 } 933 933 } 934 934 } ... ... @@ -947,12 +947,8 @@ 947 947 grid-template-columns: 1fr; 948 948 } 949 949 950 - .split-copy { 951 - padding: 34px 28px; 952 - 953 - h2 { 954 - text-align: center; 955 - } 844 + .split-copy h2 { 845 + text-align: center; 956 956 } 957 957 } 958 958 ... ... @@ -1020,35 +1020,12 @@ 1020 1020 padding: 20px; 1021 1021 } 1022 1022 1023 - .split-copy { 1024 - padding: 30px 22px; 1025 - border-radius: 20px; 1026 - } 1027 - 1028 - .process-list li { 1029 - padding: 22px 20px 22px 68px; 1030 - 1031 - &:before { 1032 - left: 20px; 1033 - top: 22px; 1034 - width: 32px; 1035 - height: 32px; 1036 - } 1037 - } 1038 - 1039 1039 .services .service { 1040 1040 gap: 14px; 1041 1041 } 1042 1042 1043 - .cta-section { 1044 - .cta-panel { 1045 - padding: 30px 22px; 1046 - border-radius: 20px; 1047 - 1048 - .btn-primary { 1049 - width: 100%; 1050 - } 1051 - } 917 + .cta-panel { 918 + padding: 24px 20px; 1052 1052 } 1053 1053 } 1054 1054 ... ... @@ -1061,6 +1061,9 @@ 1061 1061 .resource-header { 1062 1062 padding: @section-padding; 1063 1063 border-top: none; 931 + background: 932 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 933 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 1064 1064 1065 1065 h1 { 1066 1066 margin: 0 auto 14px; ... ... @@ -1128,7 +1128,7 @@ 1128 1128 1129 1129 .resource-note { 1130 1130 border-left: 4px solid @brand; 1131 - background: #fff;1001 + background: @brand-bg; 1132 1132 padding: 16px 18px; 1133 1133 margin: 22px 0; 1134 1134 border-radius: 0 @radius @radius 0; ... ... @@ -1208,6 +1208,7 @@ 1208 1208 border: 1px solid @line; 1209 1209 border-radius: @radius; 1210 1210 padding: 18px; 1081 + background: #fff; 1211 1211 box-shadow: @shadow-sm; 1212 1212 1213 1213 h4 { ... ... @@ -1260,43 +1260,9 @@ 1260 1260 } 1261 1261 } 1262 1262 1263 -.resource-inline-cta { 1264 - display: flex; 1265 - align-items: center; 1266 - justify-content: space-between; 1267 - gap: 22px; 1268 - margin: 30px 0; 1269 - padding: 20px 22px; 1270 - border: 1px solid @line; 1271 - border-left: 4px solid @brand; 1272 - border-radius: @radius; 1273 - background: #fff; 1274 - box-shadow: @shadow-sm; 1275 - 1276 - p { 1277 - margin: 0; 1278 - color: @muted; 1279 - line-height: 1.55; 1280 - } 1281 - 1282 - strong { 1283 - display: block; 1284 - margin-bottom: 4px; 1285 - color: @text; 1286 - font-size: 17px; 1287 - line-height: 1.3; 1288 - } 1289 - 1290 - .btn { 1291 - flex-shrink: 0; 1292 - white-space: nowrap; 1293 - } 1294 -} 1295 - 1296 1296 .resource-note, 1297 1297 .resource-checklist, 1298 -.resource-cta, 1299 -.resource-inline-cta { 1136 +.resource-cta { 1300 1300 display: flow-root; 1301 1301 } 1302 1302 ... ... @@ -1306,22 +1306,6 @@ 1306 1306 } 1307 1307 } 1308 1308 1309 -@media (max-width: 767px) { 1310 - .resource-inline-cta { 1311 - display: block; 1312 - 1313 - p { 1314 - margin-bottom: 14px; 1315 - } 1316 - 1317 - .btn { 1318 - display: block; 1319 - width: 100%; 1320 - white-space: normal; 1321 - } 1322 - } 1323 -} 1324 - 1325 1325 @media (max-width: 900px) { 1326 1326 .resource-layout { 1327 1327 padding-top: 22px; ... ... @@ -1356,6 +1356,7 @@ 1356 1356 1357 1357 .product-card { 1358 1358 position: relative; 1180 + background: #fff; 1359 1359 border: 1px solid @line; 1360 1360 border-radius: @radius; 1361 1361 box-shadow: @shadow-sm; ... ... @@ -1455,6 +1455,17 @@ 1455 1455 } 1456 1456 } 1457 1457 1280 +.product-card-contact { 1281 + color: @brand; 1282 + font-weight: 700; 1283 + text-decoration: underline; 1284 + 1285 + &:hover, 1286 + &:focus { 1287 + color: @brand-strong; 1288 + } 1289 +} 1290 + 1458 1458 @media (max-width: 640px) { 1459 1459 .product-card { 1460 1460 grid-template-columns: 1fr; ... ... @@ -1494,6 +1494,7 @@ 1494 1494 .product-info-card, 1495 1495 .product-feature, 1496 1496 .product-gallery-panel { 1330 + background: #fff; 1497 1497 border: 1px solid @line; 1498 1498 border-radius: @radius; 1499 1499 box-shadow: @shadow-sm; ... ... @@ -1736,6 +1736,7 @@ 1736 1736 /* ========== Resources Index ========== */ 1737 1737 1738 1738 .resources-index-page { 1573 + background: #fff; 1739 1739 1740 1740 .services-grid { 1741 1741 grid-template-columns: repeat(2, minmax(0, 1fr)); ... ... @@ -1820,402 +1820,3 @@ 1820 1820 background: #fff !important; 1821 1821 background-image: none !important; 1822 1822 } */ 1823 - 1824 -/* ========== Main Page Hero / SaaS Layout ========== */ 1825 - 1826 -#mainContentArea .hero.hero-saas { 1827 - min-height: auto; 1828 - padding: 60px 0 34px; 1829 - display: flex; 1830 - align-items: center; 1831 - overflow: hidden; 1832 - background: transparent; 1833 -} 1834 - 1835 -#mainContentArea .hero-layout { 1836 - max-width: 1120px; 1837 - margin: 0 auto; 1838 - display: grid; 1839 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); 1840 - gap: 56px; 1841 - align-items: center; 1842 -} 1843 - 1844 -#mainContentArea .hero-copy { 1845 - min-width: 0; 1846 - text-align: left; 1847 -} 1848 - 1849 -#mainContentArea .hero.hero-saas h1 { 1850 - max-width: 640px; 1851 - margin: 0 0 26px; 1852 - font-size: 60px; 1853 - font-weight: 800; 1854 - line-height: 1; 1855 - letter-spacing: -3px; 1856 -} 1857 - 1858 -#mainContentArea .hero.hero-saas h1 span { 1859 - color: @brand; 1860 -} 1861 - 1862 -#mainContentArea .hero.hero-saas .lead { 1863 - max-width: 590px; 1864 - margin: 0 0 28px; 1865 - color: #334155; 1866 - text-align: left; 1867 - font-size: 18px; 1868 - line-height: 1.6; 1869 -} 1870 - 1871 -#mainContentArea .hero.hero-saas .benefits { 1872 - max-width: 620px; 1873 - margin: 0 0 30px; 1874 - padding: 0; 1875 - display: grid; 1876 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1877 - gap: 10px 24px; 1878 - list-style: none; 1879 - color: #475569; 1880 - font-size: 15px; 1881 - text-align: left; 1882 -} 1883 - 1884 -#mainContentArea .hero.hero-saas .benefits li { 1885 - display: grid; 1886 - grid-template-columns: 18px minmax(0, 1fr); 1887 - column-gap: 8px; 1888 - align-items: start; 1889 - margin: 0; 1890 - line-height: 1.45; 1891 -} 1892 - 1893 -#mainContentArea .hero.hero-saas .benefits li::before { 1894 - content: "✓"; 1895 - display: block; 1896 - width: 18px; 1897 - color: @brand; 1898 - font-weight: 900; 1899 - line-height: 1.45; 1900 - text-align: left; 1901 - margin: 0; 1902 -} 1903 - 1904 -#mainContentArea .hero.hero-saas .hero-actions, 1905 -#mainContentArea .hero.hero-saas #hero-cta { 1906 - display: flex; 1907 - flex-wrap: wrap; 1908 - justify-content: flex-start; 1909 - gap: 12px; 1910 - margin-top: 0; 1911 -} 1912 - 1913 -#mainContentArea .hero-image-wrapper { 1914 - min-width: 0; 1915 - display: flex; 1916 - justify-content: center; 1917 - align-items: center; 1918 -} 1919 - 1920 -#mainContentArea .hero-image { 1921 - display: block; 1922 - width: 100%; 1923 - max-width: 620px; 1924 - height: auto; 1925 - border: 0; 1926 -} 1927 - 1928 -/* ========== Main Page Hero Responsive ========== */ 1929 - 1930 -@media (max-width: 1100px) { 1931 - #mainContentArea .hero-layout { 1932 - max-width: 760px; 1933 - grid-template-columns: 1fr; 1934 - gap: 34px; 1935 - } 1936 - 1937 - #mainContentArea .hero-copy { 1938 - order: 1; 1939 - text-align: center; 1940 - } 1941 - 1942 - #mainContentArea .hero-image-wrapper { 1943 - order: 2; 1944 - } 1945 - 1946 - #mainContentArea .hero.hero-saas h1 { 1947 - margin-left: auto; 1948 - margin-right: auto; 1949 - text-align: center; 1950 - } 1951 - 1952 - #mainContentArea .hero.hero-saas .lead { 1953 - margin-left: auto; 1954 - margin-right: auto; 1955 - text-align: center; 1956 - } 1957 - 1958 - #mainContentArea .hero.hero-saas .benefits { 1959 - margin-left: auto; 1960 - margin-right: auto; 1961 - } 1962 - 1963 - #mainContentArea .hero.hero-saas .hero-actions, 1964 - #mainContentArea .hero.hero-saas #hero-cta { 1965 - justify-content: center; 1966 - } 1967 - 1968 - #mainContentArea .hero-image { 1969 - max-width: 620px; 1970 - } 1971 -} 1972 - 1973 -@media (max-width: 640px) { 1974 - #mainContentArea .hero.hero-saas { 1975 - padding: 42px 0 28px; 1976 - } 1977 - 1978 - #mainContentArea .hero-layout { 1979 - gap: 28px; 1980 - } 1981 - 1982 - #mainContentArea .hero.hero-saas h1 { 1983 - font-size: 42px; 1984 - letter-spacing: -1.5px; 1985 - } 1986 - 1987 - #mainContentArea .hero.hero-saas .lead { 1988 - font-size: 17px; 1989 - } 1990 - 1991 - #mainContentArea .hero.hero-saas .benefits { 1992 - grid-template-columns: 1fr; 1993 - } 1994 - 1995 - #mainContentArea .hero-image { 1996 - max-width: 100%; 1997 - } 1998 -} 1999 -#mainContentArea { 2000 - .theme-section { 2001 - padding-top: 58px; 2002 - padding-bottom: 58px; 2003 - } 2004 - 2005 - .theme-section-alt { 2006 - background: #F8FAFC; 2007 - } 2008 - 2009 - .theme-heading { 2010 - max-width: 900px; 2011 - margin: 0 auto 20px; 2012 - display: flex; 2013 - align-items: center; 2014 - justify-content: center; 2015 - gap: 16px; 2016 - 2017 - h2 { 2018 - margin: 2px 0 0; 2019 - text-align: left; 2020 - } 2021 - } 2022 - 2023 - .theme-icon { 2024 - width: 54px; 2025 - height: 54px; 2026 - flex: 0 0 54px; 2027 - display: grid; 2028 - place-items: center; 2029 - border: 1px solid fade(@brand, 18%); 2030 - border-radius: 16px; 2031 - background: fade(@brand, 9%); 2032 - color: @brand; 2033 - font-size: 20px; 2034 - } 2035 - 2036 - .theme-icon-dark { 2037 - border-color: fade(@text, 20%); 2038 - background: @text; 2039 - color: #fff; 2040 - } 2041 - 2042 - .theme-type { 2043 - display: block; 2044 - margin-bottom: 3px; 2045 - color: @brand-strong; 2046 - font-size: 12px; 2047 - font-weight: 800; 2048 - letter-spacing: .06em; 2049 - text-transform: uppercase; 2050 - } 2051 - 2052 - .theme-description { 2053 - max-width: 860px; 2054 - margin: 0 auto 30px; 2055 - color: @text-soft; 2056 - font-size: 16px; 2057 - line-height: 1.7; 2058 - 2059 - p:last-child { 2060 - margin-bottom: 0; 2061 - } 2062 - } 2063 - 2064 - .theme-gallery { 2065 - max-width: 1120px; 2066 - margin: 0 auto; 2067 - display: grid; 2068 - grid-template-columns: repeat(3, minmax(0, 1fr)); 2069 - gap: 20px; 2070 - } 2071 - 2072 - .theme-gallery-item { 2073 - min-width: 0; 2074 - margin: 0; 2075 - overflow: hidden; 2076 - border: 1px solid @line; 2077 - border-radius: 18px; 2078 - background: #fff; 2079 - box-shadow: @shadow-sm; 2080 - 2081 - a { 2082 - display: block; 2083 - overflow: hidden; 2084 - background: #F8FAFC; 2085 - } 2086 - 2087 - img { 2088 - width: 100%; 2089 - aspect-ratio: 16 / 10; 2090 - display: block; 2091 - object-fit: cover; 2092 - object-position: top center; 2093 - transition: transform .2s ease; 2094 - } 2095 - 2096 - a:hover img, 2097 - a:focus img { 2098 - transform: scale(1.015); 2099 - } 2100 - 2101 - figcaption { 2102 - padding: 12px 14px; 2103 - color: @text; 2104 - font-size: 14px; 2105 - font-weight: 700; 2106 - text-align: center; 2107 - } 2108 - } 2109 - 2110 - .theme-request-card { 2111 - padding: 30px; 2112 - border: 1px solid @line; 2113 - border-radius: 22px; 2114 - background: #fff; 2115 - box-shadow: @shadow-sm; 2116 - text-align: center; 2117 - 2118 - h3 { 2119 - margin: 0 0 18px; 2120 - } 2121 - } 2122 - 2123 - .theme-request-icon { 2124 - width: 54px; 2125 - height: 54px; 2126 - margin: 0 auto 16px; 2127 - display: grid; 2128 - place-items: center; 2129 - border-radius: 16px; 2130 - background: fade(@brand, 10%); 2131 - color: @brand; 2132 - font-size: 21px; 2133 - } 2134 - 2135 - .theme-request-list { 2136 - max-width: 270px; 2137 - margin: 0 auto 22px; 2138 - padding: 0; 2139 - list-style: none; 2140 - color: @muted; 2141 - text-align: left; 2142 - 2143 - li { 2144 - position: relative; 2145 - margin: 8px 0; 2146 - padding-left: 22px; 2147 - 2148 - &::before { 2149 - content: "\f00c"; 2150 - position: absolute; 2151 - left: 0; 2152 - color: @brand; 2153 - font-family: FontAwesome; 2154 - } 2155 - } 2156 - } 2157 - 2158 - .theme-request-note { 2159 - margin: 16px 0 0; 2160 - color: @muted; 2161 - font-size: 13px; 2162 - line-height: 1.5; 2163 - } 2164 - 2165 - .industry-trust-section { 2166 - .industry-tags a { 2167 - display: inline-flex; 2168 - align-items: center; 2169 - padding: 8px 13px; 2170 - border: 1px solid fade(#fff, 18%); 2171 - border-radius: 999px; 2172 - background: fade(#fff, 7%); 2173 - color: #fff; 2174 - font-size: 13px; 2175 - font-weight: 700; 2176 - text-decoration: none; 2177 - 2178 - &:hover, 2179 - &:focus { 2180 - border-color: fade(#fff, 35%); 2181 - background: fade(#fff, 12%); 2182 - color: #fff; 2183 - text-decoration: none; 2184 - } 2185 - } 2186 - } 2187 -} 2188 - 2189 -@media (max-width: 980px) { 2190 - #mainContentArea { 2191 - .theme-gallery { 2192 - grid-template-columns: repeat(2, minmax(0, 1fr)); 2193 - } 2194 - } 2195 -} 2196 - 2197 -@media (max-width: 640px) { 2198 - #mainContentArea { 2199 - .theme-section { 2200 - padding-top: 40px; 2201 - padding-bottom: 40px; 2202 - } 2203 - 2204 - .theme-heading { 2205 - align-items: flex-start; 2206 - justify-content: flex-start; 2207 - 2208 - h2 { 2209 - font-size: 26px; 2210 - } 2211 - } 2212 - 2213 - .theme-gallery { 2214 - grid-template-columns: 1fr; 2215 - } 2216 - 2217 - .theme-request-card { 2218 - padding: 24px 20px; 2219 - } 2220 - } 2221 -}
- XWiki.StyleSheetExtension[2]
-
- cache
-
... ... @@ -1,1 +1,0 @@ 1 -long - name
-
... ... @@ -1,1 +1,0 @@ 1 -Color Themes