Skip to Content

Changes for page Public Web Site

Last modified by Alex Cotiuga on 2026/07/27 04:27
From version 31.4
edited by Alex Cotiuga
on 2026/07/27 04:27
Change comment: There is no comment for this version
To version 25.28
edited by Alex Cotiuga
on 2026/06/30 11:34
Change comment: There is no comment for this version

Summary

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: 10px auto 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 ========== */
... ... @@ -324,6 +324,7 @@
324 324  .pathway-card,
325 325  .service-card,
326 326  .resource-card {
333 + 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;
529 + 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: .95fr 1.05fr;
587 + 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;
591 + 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;
597 + 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 - }
601 + color: @muted;
602 + 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: 24px 26px 24px 82px;
690 - margin-bottom: 18px;
615 + padding: 16px 16px 16px 58px;
616 + margin-bottom: 12px;
617 + 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;
627 + left: 16px;
628 + top: 16px;
629 + width: 28px;
630 + height: 28px;
709 709   border-radius: 50%;
710 - background: @brand;
711 - color: #fff;
632 + background: fade(@brand, 10%);
633 + 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;
643 + 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;
750 + padding: @section-padding;
861 861  
862 862   .contact-inline {
863 863   margin: 0;
... ... @@ -867,72 +867,68 @@
867 867   color: @brand;
868 868   }
869 869   }
760 +}
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;
762 +.cta-panel {
763 + max-width: 860px;
764 + margin: 0 auto;
765 + padding: 32px;
766 + border-radius: @radius;
767 + border: 1px solid fade(@brand, 20%);
768 + box-shadow: @shadow-sm;
769 + 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 - }
771 + h2 {
772 + margin-top: 0;
773 + }
897 897  
898 - > h2,
899 - > p,
900 - > form,
901 - > .hero-actions,
902 - > .cta-actions,
903 - > .reviewNotifications {
904 - position: relative;
905 - z-index: 1;
906 - }
775 + p {
776 + color: @muted;
777 + line-height: 1.55;
778 + }
779 +}
907 907  
908 - > h2 {
909 - max-width: 760px;
910 - margin: 0 auto 16px;
911 - color: #fff;
912 - }
781 +.resource-inline-cta {
782 + display: flex;
783 + align-items: center;
784 + justify-content: space-between;
785 + gap: 22px;
786 + margin: 30px 0;
787 + padding: 20px 22px;
788 + border: 1px solid fade(@brand, 22%);
789 + border-radius: @radius;
790 + background: @brand-bg;
791 + box-shadow: @shadow-sm;
913 913  
914 - > p {
915 - max-width: 760px;
916 - margin: 0 auto 28px;
917 - color: #DBE4EF;
918 - font-size: 16px;
919 - line-height: 1.6;
920 - }
793 + p {
794 + margin: 0;
795 + color: @muted;
796 + line-height: 1.55;
797 + }
921 921  
922 - .btn-primary {
923 - border-color: #fff;
924 - background: #fff;
925 - color: @text;
926 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
799 + strong {
800 + color: @text;
801 + }
927 927  
928 - &:hover,
929 - &:focus {
930 - border-color: #fff;
931 - background: #fff;
932 - color: @brand-strong;
933 - text-decoration: none;
934 - }
803 + .btn {
804 + flex-shrink: 0;
805 + }
806 +}
807 +
808 +@media (max-width: 767px) {
809 + .resource-inline-cta {
810 + display: block;
811 + text-align: center;
812 +
813 + p {
814 + margin-bottom: 14px;
935 935   }
816 +
817 + .btn {
818 + display: inline-block;
819 + margin-left: auto;
820 + margin-right: auto;
821 + }
936 936   }
937 937  }
938 938  
... ... @@ -950,29 +950,11 @@
950 950   grid-template-columns: 1fr;
951 951   }
952 952  
953 - .split-copy {
954 - padding: 34px 28px;
955 -
956 - h2 {
957 - text-align: center;
958 - }
839 + .split-copy h2 {
840 + text-align: center;
959 959   }
960 960  }
961 961  
962 -/* ========== XWiki notifications inside public CTA panels ========== */
963 -
964 -#mainContentArea {
965 - .cta-panel {
966 - .reviewNotifications {
967 - position: relative;
968 - z-index: 1;
969 - max-width: 920px;
970 - margin: 22px auto 0;
971 - text-align: left;
972 - }
973 - }
974 -}
975 -
976 976  @media (max-width: 760px) {
977 977   section[id] {
978 978   scroll-margin-top: 132px;
... ... @@ -1037,35 +1037,12 @@
1037 1037   padding: 20px;
1038 1038   }
1039 1039  
1040 - .split-copy {
1041 - padding: 30px 22px;
1042 - border-radius: 20px;
1043 - }
1044 -
1045 - .process-list li {
1046 - padding: 22px 20px 22px 68px;
1047 -
1048 - &:before {
1049 - left: 20px;
1050 - top: 22px;
1051 - width: 32px;
1052 - height: 32px;
1053 - }
1054 - }
1055 -
1056 1056   .services .service {
1057 1057   gap: 14px;
1058 1058   }
1059 1059  
1060 - .cta-section {
1061 - .cta-panel {
1062 - padding: 30px 22px;
1063 - border-radius: 20px;
1064 -
1065 - .btn-primary {
1066 - width: 100%;
1067 - }
1068 - }
912 + .cta-panel {
913 + padding: 24px 20px;
1069 1069   }
1070 1070  }
1071 1071  
... ... @@ -1078,6 +1078,9 @@
1078 1078  .resource-header {
1079 1079   padding: @section-padding;
1080 1080   border-top: none;
926 + background:
927 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
928 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
1081 1081  
1082 1082   h1 {
1083 1083   margin: 0 auto 14px;
... ... @@ -1145,7 +1145,7 @@
1145 1145  
1146 1146  .resource-note {
1147 1147   border-left: 4px solid @brand;
1148 - background: #fff;
996 + background: @brand-bg;
1149 1149   padding: 16px 18px;
1150 1150   margin: 22px 0;
1151 1151   border-radius: 0 @radius @radius 0;
... ... @@ -1225,6 +1225,7 @@
1225 1225   border: 1px solid @line;
1226 1226   border-radius: @radius;
1227 1227   padding: 18px;
1076 + background: #fff;
1228 1228   box-shadow: @shadow-sm;
1229 1229  
1230 1230   h4 {
... ... @@ -1277,43 +1277,9 @@
1277 1277   }
1278 1278  }
1279 1279  
1280 -.resource-inline-cta {
1281 - display: flex;
1282 - align-items: center;
1283 - justify-content: space-between;
1284 - gap: 22px;
1285 - margin: 30px 0;
1286 - padding: 20px 22px;
1287 - border: 1px solid @line;
1288 - border-left: 4px solid @brand;
1289 - border-radius: @radius;
1290 - background: #fff;
1291 - box-shadow: @shadow-sm;
1292 -
1293 - p {
1294 - margin: 0;
1295 - color: @muted;
1296 - line-height: 1.55;
1297 - }
1298 -
1299 - strong {
1300 - display: block;
1301 - margin-bottom: 4px;
1302 - color: @text;
1303 - font-size: 17px;
1304 - line-height: 1.3;
1305 - }
1306 -
1307 - .btn {
1308 - flex-shrink: 0;
1309 - white-space: nowrap;
1310 - }
1311 -}
1312 -
1313 1313  .resource-note,
1314 1314  .resource-checklist,
1315 -.resource-cta,
1316 -.resource-inline-cta {
1131 +.resource-cta {
1317 1317   display: flow-root;
1318 1318  }
1319 1319  
... ... @@ -1323,22 +1323,6 @@
1323 1323   }
1324 1324  }
1325 1325  
1326 -@media (max-width: 767px) {
1327 - .resource-inline-cta {
1328 - display: block;
1329 -
1330 - p {
1331 - margin-bottom: 14px;
1332 - }
1333 -
1334 - .btn {
1335 - display: block;
1336 - width: 100%;
1337 - white-space: normal;
1338 - }
1339 - }
1340 -}
1341 -
1342 1342  @media (max-width: 900px) {
1343 1343   .resource-layout {
1344 1344   padding-top: 22px;
... ... @@ -1373,6 +1373,7 @@
1373 1373  
1374 1374  .product-card {
1375 1375   position: relative;
1175 + background: #fff;
1376 1376   border: 1px solid @line;
1377 1377   border-radius: @radius;
1378 1378   box-shadow: @shadow-sm;
... ... @@ -1472,6 +1472,17 @@
1472 1472   }
1473 1473  }
1474 1474  
1275 +.product-card-contact {
1276 + color: @brand;
1277 + font-weight: 700;
1278 + text-decoration: underline;
1279 +
1280 + &:hover,
1281 + &:focus {
1282 + color: @brand-strong;
1283 + }
1284 +}
1285 +
1475 1475  @media (max-width: 640px) {
1476 1476   .product-card {
1477 1477   grid-template-columns: 1fr;
... ... @@ -1511,6 +1511,7 @@
1511 1511  .product-info-card,
1512 1512  .product-feature,
1513 1513  .product-gallery-panel {
1325 + background: #fff;
1514 1514   border: 1px solid @line;
1515 1515   border-radius: @radius;
1516 1516   box-shadow: @shadow-sm;
... ... @@ -1837,180 +1837,3 @@
1837 1837   background: #fff !important;
1838 1838   background-image: none !important;
1839 1839  } */
1840 -
1841 -/* ========== Main Page Hero / SaaS Layout ========== */
1842 -
1843 -#mainContentArea .hero.hero-saas {
1844 - min-height: auto;
1845 - padding: 60px 0 34px;
1846 - display: flex;
1847 - align-items: center;
1848 - overflow: hidden;
1849 - background: transparent;
1850 -}
1851 -
1852 -#mainContentArea .hero-layout {
1853 - max-width: 1120px;
1854 - margin: 0 auto;
1855 - display: grid;
1856 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1857 - gap: 56px;
1858 - align-items: center;
1859 -}
1860 -
1861 -#mainContentArea .hero-copy {
1862 - min-width: 0;
1863 - text-align: left;
1864 -}
1865 -
1866 -#mainContentArea .hero.hero-saas h1 {
1867 - max-width: 640px;
1868 - margin: 0 0 26px;
1869 - font-size: 60px;
1870 - font-weight: 800;
1871 - line-height: 1;
1872 - letter-spacing: -3px;
1873 -}
1874 -
1875 -#mainContentArea .hero.hero-saas h1 span {
1876 - color: @brand;
1877 -}
1878 -
1879 -#mainContentArea .hero.hero-saas .lead {
1880 - max-width: 590px;
1881 - margin: 0 0 28px;
1882 - color: #334155;
1883 - text-align: left;
1884 - font-size: 18px;
1885 - line-height: 1.6;
1886 -}
1887 -
1888 -#mainContentArea .hero.hero-saas .benefits {
1889 - max-width: 620px;
1890 - margin: 0 0 30px;
1891 - padding: 0;
1892 - display: grid;
1893 - grid-template-columns: repeat(2, minmax(0, 1fr));
1894 - gap: 10px 24px;
1895 - list-style: none;
1896 - color: #475569;
1897 - font-size: 15px;
1898 - text-align: left;
1899 -}
1900 -
1901 -#mainContentArea .hero.hero-saas .benefits li {
1902 - display: grid;
1903 - grid-template-columns: 18px minmax(0, 1fr);
1904 - column-gap: 8px;
1905 - align-items: start;
1906 - margin: 0;
1907 - line-height: 1.45;
1908 -}
1909 -
1910 -#mainContentArea .hero.hero-saas .benefits li::before {
1911 - content: "✓";
1912 - display: block;
1913 - width: 18px;
1914 - color: @brand;
1915 - font-weight: 900;
1916 - line-height: 1.45;
1917 - text-align: left;
1918 - margin: 0;
1919 -}
1920 -
1921 -#mainContentArea .hero.hero-saas .hero-actions,
1922 -#mainContentArea .hero.hero-saas #hero-cta {
1923 - display: flex;
1924 - flex-wrap: wrap;
1925 - justify-content: flex-start;
1926 - gap: 12px;
1927 - margin-top: 0;
1928 -}
1929 -
1930 -#mainContentArea .hero-image-wrapper {
1931 - min-width: 0;
1932 - display: flex;
1933 - justify-content: center;
1934 - align-items: center;
1935 -}
1936 -
1937 -#mainContentArea .hero-image {
1938 - display: block;
1939 - width: 100%;
1940 - max-width: 620px;
1941 - height: auto;
1942 - border: 0;
1943 -}
1944 -
1945 -/* ========== Main Page Hero Responsive ========== */
1946 -
1947 -@media (max-width: 1100px) {
1948 - #mainContentArea .hero-layout {
1949 - max-width: 760px;
1950 - grid-template-columns: 1fr;
1951 - gap: 34px;
1952 - }
1953 -
1954 - #mainContentArea .hero-copy {
1955 - order: 1;
1956 - text-align: center;
1957 - }
1958 -
1959 - #mainContentArea .hero-image-wrapper {
1960 - order: 2;
1961 - }
1962 -
1963 - #mainContentArea .hero.hero-saas h1 {
1964 - margin-left: auto;
1965 - margin-right: auto;
1966 - text-align: center;
1967 - }
1968 -
1969 - #mainContentArea .hero.hero-saas .lead {
1970 - margin-left: auto;
1971 - margin-right: auto;
1972 - text-align: center;
1973 - }
1974 -
1975 - #mainContentArea .hero.hero-saas .benefits {
1976 - margin-left: auto;
1977 - margin-right: auto;
1978 - }
1979 -
1980 - #mainContentArea .hero.hero-saas .hero-actions,
1981 - #mainContentArea .hero.hero-saas #hero-cta {
1982 - justify-content: center;
1983 - }
1984 -
1985 - #mainContentArea .hero-image {
1986 - max-width: 620px;
1987 - }
1988 -}
1989 -
1990 -@media (max-width: 640px) {
1991 - #mainContentArea .hero.hero-saas {
1992 - padding: 42px 0 28px;
1993 - }
1994 -
1995 - #mainContentArea .hero-layout {
1996 - gap: 28px;
1997 - }
1998 -
1999 - #mainContentArea .hero.hero-saas h1 {
2000 - font-size: 42px;
2001 - letter-spacing: -1.5px;
2002 - }
2003 -
2004 - #mainContentArea .hero.hero-saas .lead {
2005 - font-size: 17px;
2006 - }
2007 -
2008 - #mainContentArea .hero.hero-saas .benefits {
2009 - grid-template-columns: 1fr;
2010 - }
2011 -
2012 - #mainContentArea .hero-image {
2013 - max-width: 100%;
2014 - }
2015 -}
2016 -