Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Objects (2 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -900,215 +900,3 @@ 900 900 position: static; 901 901 } 902 902 } 903 -.agnease-product-page { 904 - color: @text; 905 - 906 - .container { 907 - max-width: 1040px; 908 - } 909 - 910 - .product-index-hero { 911 - padding: 56px 0 48px; 912 - text-align: center; 913 - background: 914 - radial-gradient(42rem 16rem at 50% -10%, @brand-soft 0%, transparent 65%), 915 - radial-gradient(42rem 16rem at 50% 0%, #E8F6F3 0%, transparent 60%); 916 - border-bottom: 1px solid @line; 917 - } 918 - 919 - .page-eyebrow { 920 - color: @brand; 921 - font-size: 13px; 922 - font-weight: 800; 923 - text-transform: uppercase; 924 - letter-spacing: .06em; 925 - margin: 0 0 10px; 926 - } 927 - 928 - h1 { 929 - margin: 0; 930 - color: @text; 931 - font-size: 36px; 932 - line-height: 1.2; 933 - font-weight: 700; 934 - } 935 - 936 - .page-lead { 937 - max-width: 760px; 938 - margin: 14px auto 0; 939 - color: @muted; 940 - font-size: 18px; 941 - line-height: 1.55; 942 - } 943 - 944 - .product-index-section { 945 - padding: 52px 0 56px; 946 - 947 - h2 { 948 - text-align: center; 949 - margin: 0 0 10px; 950 - color: @text; 951 - font-size: 28px; 952 - line-height: 1.25; 953 - font-weight: 600; 954 - } 955 - } 956 - 957 - .section-intro { 958 - max-width: 760px; 959 - margin: 0 auto 26px; 960 - text-align: center; 961 - color: @muted; 962 - font-size: 16px; 963 - line-height: 1.55; 964 - } 965 - 966 - .product-card-grid { 967 - max-width: 840px; 968 - margin: 0 auto; 969 - display: grid; 970 - grid-template-columns: 1fr; 971 - grid-gap: 18px; 972 - } 973 - 974 - .product-card { 975 - background: #fff; 976 - border: 1px solid @line; 977 - border-radius: @radius; 978 - box-shadow: @shadow-sm; 979 - padding: 28px; 980 - display: grid; 981 - grid-template-columns: 68px 1fr; 982 - grid-gap: 22px; 983 - align-items: start; 984 - } 985 - 986 - .product-card-icon { 987 - width: 58px; 988 - height: 58px; 989 - border-radius: 50%; 990 - background: fade(@brand, 10%); 991 - border: 1px solid fade(@brand, 20%); 992 - color: @brand; 993 - display: flex; 994 - align-items: center; 995 - justify-content: center; 996 - font-size: 22px; 997 - } 998 - 999 - .product-label { 1000 - display: inline-flex; 1001 - margin: 0 0 8px; 1002 - padding: 5px 10px; 1003 - border-radius: 999px; 1004 - color: @brand; 1005 - background: fade(@brand, 8%); 1006 - border: 1px solid fade(@brand, 18%); 1007 - font-size: 12px; 1008 - font-weight: 800; 1009 - text-transform: uppercase; 1010 - letter-spacing: .04em; 1011 - } 1012 - 1013 - .product-card h3 { 1014 - margin: 0 0 10px; 1015 - color: @text; 1016 - font-size: 23px; 1017 - line-height: 1.25; 1018 - font-weight: 600; 1019 - } 1020 - 1021 - .product-card p { 1022 - color: @muted; 1023 - line-height: 1.6; 1024 - } 1025 - 1026 - .product-highlights { 1027 - margin: 14px 0 20px; 1028 - padding-left: 18px; 1029 - color: @muted; 1030 - 1031 - li { 1032 - margin: 6px 0; 1033 - line-height: 1.45; 1034 - } 1035 - } 1036 - 1037 - .card-link { 1038 - margin: 0; 1039 - } 1040 - 1041 - .btn-secondary { 1042 - color: @brand; 1043 - background: #fff; 1044 - border: 1px solid fade(@brand, 35%); 1045 - 1046 - &:hover, 1047 - &:focus { 1048 - color: @brand-strong; 1049 - border-color: @brand; 1050 - background: @brand-bg; 1051 - text-decoration: none; 1052 - } 1053 - } 1054 - 1055 - .product-cta-section { 1056 - padding: 0 0 56px; 1057 - } 1058 - 1059 - .product-cta-panel { 1060 - max-width: 860px; 1061 - margin: 0 auto; 1062 - padding: 32px; 1063 - border-radius: @radius; 1064 - border: 1px solid fade(@brand, 20%); 1065 - background: 1066 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 1067 - box-shadow: @shadow-sm; 1068 - text-align: center; 1069 - 1070 - h2 { 1071 - margin: 0 0 12px; 1072 - color: @text; 1073 - font-size: 26px; 1074 - line-height: 1.25; 1075 - } 1076 - 1077 - p { 1078 - max-width: 680px; 1079 - margin: 0 auto 18px; 1080 - color: @muted; 1081 - line-height: 1.55; 1082 - } 1083 - } 1084 -} 1085 - 1086 -@media (max-width: 767px) { 1087 - .agnease-product-page { 1088 - .product-index-hero { 1089 - padding: 38px 0 34px; 1090 - } 1091 - 1092 - h1 { 1093 - font-size: 30px; 1094 - } 1095 - 1096 - .page-lead { 1097 - font-size: 16px; 1098 - } 1099 - 1100 - .product-card { 1101 - grid-template-columns: 1fr; 1102 - padding: 22px; 1103 - text-align: left; 1104 - } 1105 - 1106 - .product-card-icon { 1107 - margin-bottom: 2px; 1108 - } 1109 - 1110 - .product-cta-panel { 1111 - padding: 24px; 1112 - } 1113 - } 1114 -}
- XWiki.StyleSheetExtension[1]
-
- code
-
... ... @@ -7,53 +7,25 @@ 7 7 @line: #E4ECE9; 8 8 @brand-bg: #F4FCFA; 9 9 10 -/* Top-level menu items */ 11 - 12 -.agnease-services-menu, 13 -.agnease-products-menu { 10 +.agnease-services-menu { 14 14 .dropdown-toggle { 15 15 font-weight: inherit; 16 16 font-size: inherit; 17 17 } 18 18 19 - .caret { 20 - margin-left: 4px; 21 - } 22 - 23 23 &.open > .dropdown-toggle, 24 24 .dropdown-toggle:hover, 25 25 .dropdown-toggle:focus { 26 - color: @brand -strong;19 + color: @brand; 27 27 background: transparent; 28 - background-color: transparent; 29 - box-shadow: none; 30 30 } 31 -} 32 32 33 -/* Keep Agnease public top-level menu visually clean when hovered/open/focused */ 34 - 35 -.navbar-nav > li.agnease-services-menu > a, 36 -.navbar-nav > li.agnease-products-menu > a, 37 -.navbar-nav > li.agnease-services-menu > a:hover, 38 -.navbar-nav > li.agnease-products-menu > a:hover, 39 -.navbar-nav > li.agnease-services-menu > a:focus, 40 -.navbar-nav > li.agnease-products-menu > a:focus, 41 -.navbar-nav > li.agnease-services-menu.open > a, 42 -.navbar-nav > li.agnease-products-menu.open > a, 43 -.navbar-nav > li.agnease-services-menu.open > a:hover, 44 -.navbar-nav > li.agnease-products-menu.open > a:hover, 45 -.navbar-nav > li.agnease-services-menu.open > a:focus, 46 -.navbar-nav > li.agnease-products-menu.open > a:focus { 47 - background: transparent; 48 - background-color: transparent; 49 - color: @brand-strong; 50 - box-shadow: none; 23 + .caret { 24 + margin-left: 4px; 25 + } 51 51 } 52 52 53 -/* Dropdown panels */ 54 - 55 -.agnease-services-dropdown, 56 -.agnease-products-dropdown { 28 +.agnease-services-dropdown { 57 57 min-width: 360px; 58 58 padding: 10px; 59 59 border: 1px solid @line; ... ... @@ -130,23 +130,12 @@ 130 130 } 131 131 } 132 132 133 -/* Products dropdown can be slightly narrower for now */ 134 - 135 -.agnease-products-dropdown { 136 - min-width: 340px; 137 -} 138 - 139 -/* Mobile */ 140 - 141 141 @media (max-width: 767px) { 142 - .agnease-services-dropdown, 143 - .agnease-products-dropdown { 106 + .agnease-services-dropdown { 144 144 min-width: 0; 145 145 width: 100%; 146 146 padding: 6px; 147 147 border-radius: 0; 148 - border-left: 0; 149 - border-right: 0; 150 150 box-shadow: none; 151 151 152 152 > li > a { ... ... @@ -154,3 +154,15 @@ 154 154 } 155 155 } 156 156 } 118 +/* Keep the top-level Services menu visually clean when hovered/open/focused */ 119 +.navbar-nav > li.agnease-services-menu > a, 120 +.navbar-nav > li.agnease-services-menu > a:hover, 121 +.navbar-nav > li.agnease-services-menu > a:focus, 122 +.navbar-nav > li.agnease-services-menu.open > a, 123 +.navbar-nav > li.agnease-services-menu.open > a:hover, 124 +.navbar-nav > li.agnease-services-menu.open > a:focus { 125 + background: transparent; 126 + background-color: transparent; 127 + color: @brand-strong; 128 + box-shadow: none; 129 +}