Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 1 removed)
Details
- Page properties
-
- Content
-
... ... @@ -3,190 +3,193 @@ 3 3 #set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome')) 4 4 {{html clean="false"}} 5 5 6 - <section class="hero hero-centered" aria-labelledby="hero-title"> 7 - <div class="container hero-inner"> 8 - <div class="hero-kicker"> 9 - <i class="fa fa-shield" aria-hidden="true"></i> 10 - Your trusted partner for professional XWiki services 11 - </div> 12 - 13 - <h1 id="hero-title">Reliable XWiki engineering for organizations that depend on their knowledge platform</h1> 14 - 6 + ## LANDING HERO 7 + <section class="landing-hero" aria-labelledby="hero-title"> 8 + <div class="container landing-hero-inner"> 9 + <h1 id="hero-title">Keep Your XWiki Platform Secure, Stable and Up-to-Date</h1> 15 15 <p class="lead"> 16 - Agnease helpscompanieskeep XWikisecure,stable, up-to-date and adaptedto realbusinessprocesses.11 + Helping organizations safely upgrade, maintain, customize, and integrate their XWiki environments. 17 17 </p> 18 18 19 - <p class="hero-support"> 20 - From LTS upgrades and maintenance to custom applications, integrations, workflows and migrations, 21 - Agnease provides focused XWiki expertise with practical delivery and long-term care. 22 - </p> 23 - 24 24 <ul class="benefits"> 25 - <li> SafeLTS upgrades</li>26 - <li> Support and recovery</li>27 - <li>Custom XWikiapplications</li>28 - <li> Integrations andmigrations</li>15 + <li><a href="/services/xwiki-upgrades">Smooth upgrades</a></li> 16 + <li>Reliable support plans</li> 17 + <li>Custom integrations</li> 18 + <li>Secure, optimized platforms</li> 29 29 </ul> 30 30 31 - <div class=" hero-actions">32 - <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Request a consultation</a>33 - <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">ViewXWikiservices</a>21 + <div class="cta-row"> 22 + <a class="btn-main" href="mailto:alex@agnease.com">Contact Agnease</a> 23 + <a class="btn-secondary" href="/services">View services</a> 34 34 </div> 35 35 </div> 36 36 </section> 37 37 38 - <section class="trust-strip" aria-label="Agnease experience"> 39 - <div class="container"> 40 - <ul> 41 - <li><i class="fa fa-check-circle" aria-hidden="true"></i> 11+ years of XWiki experience</li> 42 - <li><i class="fa fa-check-circle" aria-hidden="true"></i> Upgrades, support and custom development</li> 43 - <li><i class="fa fa-check-circle" aria-hidden="true"></i> Security-aware maintenance</li> 44 - <li><i class="fa fa-check-circle" aria-hidden="true"></i> Practical long-term collaboration</li> 45 - </ul> 46 - </div> 47 - </section> 28 + ## WHY CHOOSE 29 + #set ($whySectionData = [{ 30 + 'title': 'Stability & security', 31 + 'icon': 'shield', 32 + 'content': 'Proven upgrade steps, rollback safety, and proactive hardening keep your wiki reliable.', 33 + 'url': '/services/xwiki-upgrades' 34 + },{ 35 + 'title': 'Predictable delivery', 36 + 'icon': 'check-square-o', 37 + 'content': 'Clear scope, defined steps, and documented results to avoid surprises.', 38 + 'url': '' 39 + },{ 40 + 'title': 'Clean integrations', 41 + 'icon': 'link', 42 + 'content': 'Maintainable SSO, API, and system connections tailored to your environment.', 43 + 'url': '/services/xwiki-integrations' 44 + },{ 45 + 'title': 'Long-term support', 46 + 'icon': 'life-ring', 47 + 'content': 'Guaranteed response times, regular checks, and fast assistance when needed.', 48 + 'url': '/services/xwiki-maintenance-support' 49 + }]) 48 48 49 - <section aria-labelledby=" platform-title">51 + <section aria-labelledby="why-title"> 50 50 <div class="container"> 51 - <h2 id="platform-title">When XWiki becomes business-critical, it needs professional care</h2> 52 - <p class="section-intro"> 53 - Many organizations start with XWiki as a documentation platform. Over time, it becomes a knowledge base, 54 - intranet, SOP portal, workflow system, audit trail or integration hub. At that point, upgrades, security, 55 - performance, permissions and maintainability are no longer optional technical details. 56 - </p> 53 + <h2 id="why-title">Why choose Agnease</h2> 54 + <p class="lead">10+ years of XWiki expertise with structured delivery and lasting collaboration</p> 57 57 58 - <div class="pathways"> 59 - <article class="pathway-card"> 60 - <div class="pathway-icon"> 61 - <i class="fa fa-refresh" aria-hidden="true"></i> 62 - </div> 63 - <h3>Keep XWiki current</h3> 64 - <p> 65 - Plan and execute safe upgrades to supported XWiki versions, with compatibility checks and rollback planning. 66 - </p> 67 - <ul> 68 - <li>LTS upgrade planning</li> 69 - <li>Extension and custom code review</li> 70 - <li>Production rollout validation</li> 71 - </ul> 72 - <p class="card-link"> 73 - <a href="$xwiki.getURL('services.xwiki-upgrades')">View upgrade services</a> 74 - </p> 75 - </article> 76 - 77 - <article class="pathway-card"> 78 - <div class="pathway-icon"> 79 - <i class="fa fa-life-ring" aria-hidden="true"></i> 80 - </div> 81 - <h3>Keep XWiki reliable</h3> 82 - <p> 83 - Get long-term technical care for instances that need to stay stable, secure and recoverable. 84 - </p> 85 - <ul> 86 - <li>Troubleshooting and recovery</li> 87 - <li>Performance and log analysis</li> 88 - <li>Security-aware maintenance</li> 89 - </ul> 90 - <p class="card-link"> 91 - <a href="$xwiki.getURL('services.xwiki-maintenance-support')">View support services</a> 92 - </p> 93 - </article> 94 - 95 - <article class="pathway-card"> 96 - <div class="pathway-icon"> 97 - <i class="fa fa-cogs" aria-hidden="true"></i> 98 - </div> 99 - <h3>Adapt XWiki to your business</h3> 100 - <p> 101 - Build workflows, custom applications, dashboards, integrations and automation around your processes. 102 - </p> 103 - <ul> 104 - <li>Custom XWiki applications</li> 105 - <li>Workflows and approvals</li> 106 - <li>SSO, LDAP, APIs and integrations</li> 107 - </ul> 108 - <p class="card-link"> 109 - <a href="$xwiki.getURL('services.xwiki-development-integrations')">View development services</a> 110 - </p> 111 - </article> 56 + <div class="widgets"> 57 + #foreach ($entry in $whySectionData) 58 + <article class="widget"> 59 + <div class="icon" aria-hidden="true"> 60 + <i class="fa fa-$entry.icon"></i> 61 + <h4>$entry.title</h4> 62 + </div> 63 + <p>$entry.content</p> 64 + #if ($entry.url && $entry.url != '') 65 + <p class="card-link"><a href="$entry.url">Learn more</a></p> 66 + #end 67 + </article> 68 + #end 112 112 </div> 113 113 </div> 114 114 </section> 115 115 116 - <section class="split-section" aria-labelledby="why-title"> 73 + ## SERVICES 74 + #set ($servicesSectionData = [{ 75 + 'title': 'XWiki Upgrades', 76 + 'icon': 'refresh', 77 + 'url': '/services/xwiki-upgrades', 78 + 'content': 'Stay current with the latest XWiki LTS and reduce security, stability, and compatibility risks.', 79 + 'items': [ 80 + 'Audit setup, extensions, and configurations', 81 + 'Test upgrades with backups and validation', 82 + 'Safe production rollout with minimal downtime' 83 + ] 84 + },{ 85 + 'title': 'Maintenance, Support & Recovery', 86 + 'icon': 'stethoscope', 87 + 'url': '/services/xwiki-maintenance-support', 88 + 'content': 'Ensure long-term stability and quick response when issues appear.', 89 + 'items': [ 90 + 'Monitoring and performance checks', 91 + 'Security patching, log analysis, triage', 92 + 'Issue recovery, data repair, hardening' 93 + ] 94 + },{ 95 + 'title': 'Development & Integrations', 96 + 'icon': 'cogs', 97 + 'url': '/services/xwiki-development-integrations', 98 + 'content': 'Extend and connect XWiki to fit your workflow and systems.', 99 + 'items': [ 100 + 'Custom apps, macros, automation', 101 + 'SSO, REST APIs, LDAP, CRM links', 102 + 'Maintainable extensions for long-term use' 103 + ] 104 + },{ 105 + 'title': 'Hosting & Deployment', 106 + 'icon': 'cloud', 107 + 'url': '/services/xwiki-hosting-deployment', 108 + 'content': 'Cloud-ready environments designed for reliability and performance.', 109 + 'items': [ 110 + 'Containerized deployment and TLS', 111 + 'Backups, restore strategy, observability', 112 + 'Optimization and load tuning' 113 + ] 114 + },{ 115 + 'title': 'Migrations to XWiki', 116 + 'icon': 'exchange', 117 + 'url': '/services/xwiki-migrations', 118 + 'content': 'Move from Confluence, SharePoint, or MediaWiki to XWiki with full data integrity and structure.', 119 + 'items': [ 120 + 'Preserve hierarchy, attachments, and permissions', 121 + 'Convert macros, categories, and metadata for XWiki', 122 + 'Redirect old URLs and maintain SEO consistency' 123 + ] 124 + }]) 125 + 126 + <section class="services" aria-labelledby="services-title"> 117 117 <div class="container"> 118 - <div class="split-grid"> 119 - <div class="split-copy"> 120 - <h2 id="why-title">Why choose Agnease</h2> 121 - <p> 122 - Agnease brings more than 11 years of hands-on XWiki expertise to organizations that need reliable 123 - knowledge platforms, secure upgrades, custom applications, integrations, migrations and long-term support. 124 - </p> 125 - <p> 126 - The approach is practical and engineering-focused: understand the current system, reduce risk, 127 - document the work and leave your XWiki easier to maintain. 128 - </p> 129 - </div> 128 + <h2 id="services-title">Services</h2> 129 + <p class="lead">All the XWiki services you need, delivered with precision and care</p> 130 130 131 - <ol class="process-list"> 132 - <li> 133 - <strong>Review the current situation</strong> 134 - Version, extensions, infrastructure, authentication, custom code and business-critical features. 135 - </li> 136 - <li> 137 - <strong>Define a safe path forward</strong> 138 - Clear scope, expected effort, risks, rollback options and recommended next steps. 139 - </li> 140 - <li> 141 - <strong>Deliver and document the work</strong> 142 - Practical implementation, validation and documentation for future maintenance. 143 - </li> 144 - </ol> 131 + <div class="services-grid"> 132 + #foreach ($entry in $servicesSectionData) 133 + <article class="service"> 134 + <div class="service-icon"> 135 + <i class="fa fa-$entry.icon" aria-hidden="true"></i> 136 + </div> 137 + <div class="service-body"> 138 + <h4> 139 + #if ($entry.url && $entry.url != '') 140 + <a href="$entry.url">$entry.title</a> 141 + #else 142 + $entry.title 143 + #end 144 + </h4> 145 + <p>$entry.content</p> 146 + <ul> 147 + #foreach ($item in $entry.items) 148 + <li>$item</li> 149 + #end 150 + </ul> 151 + #if ($entry.url && $entry.url != '') 152 + <p class="service-link"><a href="$entry.url">Learn more</a></p> 153 + #end 154 + </div> 155 + </article> 156 + #end 145 145 </div> 146 146 </div> 147 147 </section> 148 148 149 - <section class="resource-strip" aria-labelledby="resources-title"> 161 + ## CTA 162 + <section id="contact" class="cta-section"> 150 150 <div class="container"> 151 - <h2 id="resources-title">Useful XWiki resources</h2> 152 - <p class="section-intro"> 153 - Practical guidance for organizations running XWiki in production. 164 + <p class="text-center contact-inline"> 165 + Need help with your XWiki? <a href="mailto:alex@agnease.com">Contact Agnease</a>. 154 154 </p> 155 - 156 - <div class="resource-grid"> 157 - <article class="resource-card"> 158 - <h4>Why upgrade your XWiki instance?</h4> 159 - <p> 160 - A business-focused explanation of why regular LTS upgrades reduce security, compatibility and maintenance risk. 161 - </p> 162 - <a href="$xwiki.getURL('resources.why-upgrade-xwiki')">Read the resource</a> 163 - </article> 164 - 165 - <article class="resource-card"> 166 - <h4>XWiki upgrade services</h4> 167 - <p> 168 - How Agnease approaches safe XWiki upgrades for real production environments with customizations and integrations. 169 - </p> 170 - <a href="$xwiki.getURL('services.xwiki-upgrades')">View the service</a> 171 - </article> 172 - </div> 173 173 </div> 174 174 </section> 169 + {{/html}} 170 +#end 175 175 176 - <section class="cta-section" aria-labelledby="contact-title"> 177 - <div class="container"> 178 - <div class="cta-panel"> 179 - <h2 id="contact-title">Need help with XWiki?</h2> 180 - <p> 181 - Send your current XWiki version, the problem you are facing, or the type of project you want to build. 182 - A short description is enough to start the conversation. 183 - </p> 184 - <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Contact Agnease</a> 172 +#macro(requestConsultationModal) 173 + <div class="modal fade" id="requestConsultation" tabindex="-1" role="dialog"> 174 + <div class="modal-dialog"> 175 + <div class="modal-content"> 176 + <div class="modal-header"> 177 + <button type="button" class="close" data-dismiss="modal">×</button> 178 + <h4 class="modal-title">Request a consultation</h4> 185 185 </div> 180 + <div class="modal-body"> 181 + <div> 182 + ##Need help with your XWiki? <a href="mailto:alex@agnease.com">Contact Agnease</a> 183 + #displayFormFromSheetCode() 184 + </div> 185 + </div> 186 + <div class="modal-footer"> 187 + ##<input id="continueCategorySelection" type="button" class="btn btn-default" data-dismiss="modal" 188 + ## value="$escapetool.xml($services.localization.render('yesno_1'))"> 189 + </div> 186 186 </div> 187 - </section> 188 - 189 - {{/html}} 191 + </div> 192 + </div> 190 190 #end 191 191 192 192 #macro (stripHTMLMacro $displayOutput)
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -1,19 +1,16 @@ 1 -/* ========== Agnease Public Website ========== */ 1 +/* ========== Agnease Public Website Theme ========== */ 2 2 3 3 @brand: #00937D; 4 4 @brand-strong: #007B6A; 5 -@brand-soft: #E7FFF8; 6 -@brand-bg: #F4FCFA; 7 7 @text: #2D3A34; 8 8 @muted: #5B6B64; 9 9 @line: #E4ECE9; 8 +@soft: #F6FBF9; 10 10 @radius: 16px; 11 -@shadow-sm: 0 6px 20px rgba(0, 0,0,.06);12 -@shadow: 0 12px 36px rgba(0, 0,0,.08);10 +@shadow-sm: 0 6px 20px rgba(0,0,0,.06); 11 +@shadow: 0 12px 36px rgba(0,0,0,.08); 13 13 @maxw: 1140px; 14 14 15 -/* ========== Base ========== */ 16 - 17 17 #mainContentArea { 18 18 padding: 0; 19 19 } ... ... @@ -22,336 +22,203 @@ 22 22 max-width: @maxw; 23 23 margin-left: auto; 24 24 margin-right: auto; 25 - padding-left: 18px; 26 - padding-right: 18px; 27 27 } 28 28 29 -html { 30 - scroll-behavior: smooth; 31 -} 32 - 33 -section { 34 - padding: 42px 0; 35 - border-top: 1px solid @line; 36 - 37 - &:first-of-type { 38 - border-top: none; 39 - } 40 -} 41 - 42 -section[id] { 43 - scroll-margin-top: 92px; 44 -} 45 - 46 -h1, 47 -h2, 48 -h3, 49 -h4 { 50 - color: @text; 51 -} 52 - 53 -h2 { 24 +.text-center { 54 54 text-align: center; 55 - margin-top: 0; 56 56 } 57 57 58 58 .lead { 59 59 color: @muted; 60 60 text-align: center; 61 - margin-bottom:0;31 + line-height: 1.5; 62 62 } 63 63 64 -. section-intro{34 +.page-lead { 65 65 max-width: 760px; 66 - margin: 0 auto 22px; 67 - text-align: center; 36 + margin: 0 auto; 68 68 color: @muted; 69 - font-size: 16px; 70 - line-height: 1.55; 38 + font-size: 18px; 39 + line-height: 1.5; 40 + text-align: center; 71 71 } 72 72 73 -a { 74 - color: @brand; 43 +section { 44 + padding: 32px 0; 45 + border-top: 1px solid @line; 75 75 76 - &:hover, 77 - &:focus { 78 - color: @brand-strong; 47 + &:first-of-type { 48 + border-top: none; 79 79 } 80 80 } 81 81 82 -/* ========== Header / Navigation ========== */ 83 - 84 -.site-header { 85 - position: sticky; 86 - top: 0; 87 - z-index: 1000; 88 - background: fade(#fff, 96%); 89 - border-bottom: 1px solid fade(@line, 85%); 90 - backdrop-filter: blur(8px); 52 +h1, h2, h3, h4 { 53 + color: @text; 91 91 } 92 92 93 -.header-inner { 94 - min-height: 72px; 95 - display: flex; 96 - align-items: center; 97 - justify-content: space-between; 98 - gap: 24px; 56 +h2 { 57 + text-align: center; 99 99 } 100 100 101 -.site-nav { 102 - display: flex; 103 - align-items: center; 104 - gap: 22px; 105 - font-size: 15px; 60 +/* ===== Buttons / links ===== */ 106 106 107 - a { 108 - color: @text; 109 - text-decoration: none; 110 - font-weight: 600; 111 - 112 - &:hover, 113 - &:focus { 114 - color: @brand; 115 - text-decoration: none; 116 - } 117 - } 118 - 119 - .nav-cta { 120 - color: #fff; 121 - background: @brand; 122 - border: 1px solid @brand; 123 - border-radius: 6px; 124 - padding: 8px 14px; 125 - 126 - &:hover, 127 - &:focus { 128 - color: #fff; 129 - background: @brand-strong; 130 - border-color: @brand-strong; 131 - } 132 - } 62 +.btn-main, 63 +.btn-secondary { 64 + display: inline-block; 65 + border-radius: 8px; 66 + padding: 9px 14px; 67 + font-weight: 700; 68 + text-decoration: none; 69 + line-height: 1.2; 133 133 } 134 134 135 -/* ========== Buttons ========== */ 136 - 137 -.btn-primary { 138 - background: @brand; 139 - border-color: @brand; 72 +.btn-main { 140 140 color: #fff; 74 + background: @brand; 141 141 142 142 &:hover, 143 143 &:focus { 144 - background: @brand-strong; 145 - border-color: @brand-strong; 146 146 color: #fff; 79 + background: @brand-strong; 80 + text-decoration: none; 147 147 } 148 148 } 149 149 150 150 .btn-secondary { 151 151 color: @brand; 152 - background: #fff;153 - border: 1px solid fade(@brand, 35%);86 + background: fade(@brand, 8%); 87 + border: 1px solid fade(@brand, 20%); 154 154 155 155 &:hover, 156 156 &:focus { 157 157 color: @brand-strong; 158 - b order-color: @brand;159 - background:@brand-bg;92 + background: fade(@brand, 12%); 93 + text-decoration: none; 160 160 } 161 161 } 162 162 163 -/* ========== Hero ========== */ 97 +.cta-row { 98 + display: flex; 99 + gap: 10px; 100 + flex-wrap: wrap; 101 + justify-content: center; 102 + margin-top: 16px; 103 +} 164 164 165 -.hero { 166 - overflow: hidden; 167 - background-repeat: no-repeat; 168 - background-attachment: scroll; 105 +/* ===== Landing page hero ===== */ 169 169 170 - &.hero-centered{171 - text-align: center;172 - background:173 - radial-gradient(50rem18rem at 50% -10%, @brand-soft 0%, transparent 60%),174 - radial-gradient(50rem18rem at 50% 0%, #E8F6F3 0%, transparent60%);175 - display:flex;176 - align-items:center;177 - justify-content:center;178 - min-height:330px;179 - }107 +.landing-hero { 108 + text-align: center; 109 + min-height: 340px; 110 + display: flex; 111 + align-items: center; 112 + justify-content: center; 113 + background: 114 + radial-gradient(50rem 18rem at 50% -10%, #E7FFF8 0%, transparent 60%), 115 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 116 +} 180 180 181 - .hero-inner { 182 - max-width: 860px; 183 - margin: 0 auto; 184 - display: flex; 185 - flex-direction: column; 186 - align-items: center; 187 - } 118 +.landing-hero-inner { 119 + max-width: 860px; 120 + margin: 0 auto; 121 +} 188 188 189 - h1 { 190 - max-width: 790px; 191 - margin-left: auto; 192 - margin-right: auto; 193 - line-height: 1.18; 194 - } 123 +.landing-hero h1 { 124 + margin: 0 0 10px; 125 + font-size: 36px; 126 + line-height: 1.18; 127 +} 195 195 196 - .lead {197 - max-width:760px;198 - font-size:19px;199 - line-height: 1.55;200 - }129 +.landing-hero .lead { 130 + margin: 0 auto 12px; 131 + max-width: 760px; 132 + font-size: 18px; 133 +} 201 201 202 - .benefits { 203 - display: flex; 204 - flex-wrap: wrap; 205 - justify-content: center; 206 - list-style: none; 207 - padding: 0; 208 - margin: 14px 0 0; 209 - color: @muted; 210 - font-size: 14px; 135 +/* ===== Compact page header for section pages ===== */ 211 211 212 - li + li::before { 213 - content: "•"; 214 - margin: 0 6px; 215 - } 216 - } 137 +.page-header-compact { 138 + padding: 34px 0 28px; 139 + text-align: center; 140 + border-top: none; 141 + background: 142 + radial-gradient(42rem 12rem at 50% -20%, #E7FFF8 0%, transparent 65%); 217 217 } 218 218 219 -.hero-kicker { 220 - display: inline-flex; 221 - align-items: center; 222 - gap: 8px; 145 +.page-header-compact .container { 146 + max-width: 850px; 147 +} 148 + 149 +.page-eyebrow { 150 + margin: 0 0 8px; 223 223 color: @brand; 224 - background: fade(@brand, 8%); 225 - border: 1px solid fade(@brand, 18%); 226 - border-radius: 999px; 227 - padding: 6px 12px; 228 - margin-bottom: 14px; 229 - font-size: 13px; 230 - font-weight: 700; 152 + font-size: 12px; 153 + font-weight: 800; 154 + text-transform: uppercase; 155 + letter-spacing: .08em; 231 231 } 232 232 233 -.hero-support { 234 - max-width: 760px; 235 - margin: 14px auto 0; 236 - color: @muted; 237 - line-height: 1.55; 158 +.page-header-compact h1 { 159 + margin: 0 0 10px; 160 + font-size: 34px; 161 + line-height: 1.15; 238 238 } 239 239 240 -.hero-actions, 241 -#hero-cta { 164 +/* ===== Benefits / chips ===== */ 165 + 166 +.benefits, 167 +.inline-benefits { 242 242 display: flex; 243 - gap: 12px; 244 244 flex-wrap: wrap; 245 245 justify-content: center; 246 - margin-top: 22px; 171 + gap: 8px; 172 + list-style: none; 173 + padding: 0; 174 + margin: 12px 0 0; 247 247 } 248 248 249 -/* ========== Trust Strip ========== */ 250 - 251 -.trust-strip { 252 - padding: 18px 0; 253 - border-top: 1px solid @line; 254 - border-bottom: 1px solid @line; 255 - background: #fff; 256 - 257 - ul { 258 - max-width: 960px; 259 - margin: 0 auto; 260 - padding: 0; 261 - list-style: none; 262 - display: flex; 263 - justify-content: center; 264 - gap: 22px; 265 - flex-wrap: wrap; 266 - color: @muted; 267 - font-size: 13px; 268 - } 269 - 270 - li { 271 - display: flex; 272 - align-items: center; 273 - gap: 7px; 274 - } 275 - 276 - i { 277 - color: @brand; 278 - } 177 +.benefits li, 178 +.inline-benefits li { 179 + color: @muted; 180 + font-size: 13px; 181 + background: fade(@brand, 8%); 182 + border: 1px solid fade(@brand, 18%); 183 + border-radius: 999px; 184 + padding: 4px 10px; 279 279 } 280 280 281 -/* ===== =====Reusable Grids ==========*/187 +/* ===== Cards ===== */ 282 282 283 -.card-grid, 284 -.pathways, 285 -.services-grid, 286 -.resource-grid, 287 287 .widgets { 190 + margin-top: 16px; 288 288 display: grid; 289 - grid-gap: 18px; 290 - margin-left: auto; 291 - margin-right: auto; 192 + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 193 + grid-gap: 16px; 292 292 } 293 293 294 -.card-grid, 295 -.pathways, 296 -.services-grid { 297 - grid-template-columns: repeat(3, minmax(0, 1fr)); 298 - max-width: 1040px; 299 - margin-top: 26px; 300 -} 301 - 302 -.resource-grid { 303 - grid-template-columns: repeat(2, minmax(0, 1fr)); 304 - max-width: 1040px; 305 - margin-top: 22px; 306 -} 307 - 308 -.widgets { 309 - grid-template-columns: repeat(4, minmax(0, 1fr)); 310 - max-width: 1040px; 311 - margin-top: 20px; 312 -} 313 - 314 -.card-grid > *, 315 -.pathways > *, 316 -.services-grid > *, 317 -.resource-grid > *, 318 -.widgets > * { 319 - min-width: 0; 320 -} 321 - 322 -/* ========== Shared Card Style ========== */ 323 - 324 -.widget, 325 -.pathway-card, 326 -.service-card, 327 -.resource-card { 196 +.widget { 197 + padding: 18px; 328 328 background: #fff; 329 329 border: 1px solid @line; 330 330 border-radius: @radius; 331 331 box-shadow: @shadow-sm; 332 332 transition: transform .18s ease, box-shadow .18s ease; 203 + display: flex; 204 + flex-direction: column; 205 + height: 100%; 333 333 334 334 &:hover { 335 335 transform: translateY(-2px); 336 336 box-shadow: @shadow; 337 337 } 338 -} 339 339 340 -/* ========== Small Widgets ========== */ 341 - 342 -.widget { 343 - padding: 18px; 344 - display: flex; 345 - flex-direction: column; 346 - height: 100%; 347 - 348 348 .icon { 349 349 display: flex; 350 350 align-items: center; 351 351 gap: 10px; 352 - padding-bottom: 8px;353 - margin-bottom: 10px;354 - border-bottom: 1px solid fade(@line, 70%);216 + padding-bottom: 6px; 217 + margin-bottom: 8px; 218 + border-bottom: 1px solid fade(@line, 60%); 355 355 356 356 i { 357 357 color: @brand; ... ... @@ -359,7 +359,7 @@ 359 359 360 360 h4 { 361 361 margin: 0; 362 - line-height: 1.2 5;226 + line-height: 1.2; 363 363 color: @text; 364 364 } 365 365 } ... ... @@ -369,946 +369,278 @@ 369 369 color: @muted; 370 370 line-height: 1.45; 371 371 } 372 -} 373 373 374 -/* ========== Homepage Pathway Cards ========== */ 375 - 376 -.pathway-card { 377 - padding: 24px; 378 - display: flex; 379 - flex-direction: column; 380 - min-height: 100%; 381 - 382 - .pathway-icon { 383 - width: 52px; 384 - height: 52px; 385 - border-radius: 50%; 386 - display: flex; 387 - align-items: center; 388 - justify-content: center; 389 - color: @brand; 390 - background: fade(@brand, 10%); 391 - margin-bottom: 18px; 392 - font-size: 19px; 393 - } 394 - 395 - h3 { 396 - margin: 0 0 10px; 397 - color: @text; 398 - font-size: 22px; 399 - line-height: 1.25; 400 - } 401 - 402 - p { 403 - color: @muted; 404 - line-height: 1.55; 405 - margin: 0 0 16px; 406 - } 407 - 408 - ul { 409 - margin: 0 0 22px; 410 - padding-left: 18px; 411 - color: @muted; 412 - font-size: 14px; 413 - line-height: 1.55; 414 - } 415 - 416 - li { 417 - margin: 6px 0; 418 - } 419 - 420 420 .card-link { 421 - margin-top: auto; 422 - padding-top: 4px; 238 + margin-top: 12px; 423 423 424 424 a { 425 425 color: @brand; 426 426 font-weight: 700; 427 - text-decoration: underline;243 + text-decoration: none; 428 428 429 - &:hover, 430 - &:focus { 245 + &:hover { 431 431 color: @brand-strong; 247 + text-decoration: underline; 432 432 } 433 433 } 434 434 } 435 435 } 436 436 437 -/* ===== =====Services ==========*/253 +/* ===== Service / listing rows ===== */ 438 438 439 -.services { 440 - .services-grid { 441 - max-width: 1040px; 442 - } 443 - 444 - .service { 445 - display: flex; 446 - align-items: flex-start; 447 - gap: 16px; 448 - padding: 22px; 449 - background: #fff; 450 - border: 1px solid @line; 451 - border-radius: @radius; 452 - box-shadow: @shadow-sm; 453 - transition: transform .18s ease, box-shadow .18s ease; 454 - 455 - &:hover { 456 - transform: translateY(-2px); 457 - box-shadow: @shadow; 458 - } 459 - 460 - .service-icon { 461 - width: 46px; 462 - height: 46px; 463 - border-radius: 50%; 464 - display: flex; 465 - align-items: center; 466 - justify-content: center; 467 - font-size: 18px; 468 - color: @brand; 469 - background: fade(@brand, 10%); 470 - flex-shrink: 0; 471 - margin-top: 2px; 472 - } 473 - 474 - .service-body { 475 - h4 { 476 - margin: 0 0 6px; 477 - font-size: 18px; 478 - line-height: 1.25; 479 - font-weight: 800; 480 - color: @text; 481 - } 482 - 483 - p { 484 - margin: 0 0 8px; 485 - color: @muted; 486 - line-height: 1.5; 487 - } 488 - 489 - ul { 490 - margin: 9px 0 0; 491 - padding-left: 18px; 492 - color: @muted; 493 - font-size: 13px; 494 - line-height: 1.5; 495 - } 496 - 497 - li { 498 - margin: 4px 0; 499 - } 500 - } 501 - } 255 +.services-grid { 256 + margin-top: 20px; 257 + display: flex; 258 + flex-wrap: wrap; 259 + gap: 24px; 260 + max-width: 960px; 261 + margin-left: auto; 262 + margin-right: auto; 263 + justify-content: center; 502 502 } 503 503 504 -/* ========== Split / Process Section ========== */ 505 - 506 -.split-section { 507 - background: 508 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 266 +.service { 267 + flex: 0 1 calc(50% - 12px); 268 + display: flex; 269 + align-items: flex-start; 270 + gap: 16px; 271 + margin-bottom: 8px; 509 509 } 510 510 511 -.split-grid { 512 - display: grid; 513 - grid-template-columns: 1.1fr .9fr; 514 - grid-gap: 36px; 515 - max-width: 1040px; 516 - margin: 0 auto; 274 +.service-icon { 275 + width: 42px; 276 + height: 42px; 277 + border-radius: 50%; 278 + display: flex; 517 517 align-items: center; 280 + justify-content: center; 281 + color: @brand; 282 + background: fade(@brand, 10%); 283 + flex-shrink: 0; 284 + margin-top: 3px; 518 518 } 519 519 520 -.split-copy { 521 - h2 { 522 - text-align: left; 523 - margin-top: 0; 524 - } 525 - 526 - p { 527 - color: @muted; 528 - line-height: 1.6; 529 - } 530 -} 531 - 532 -.process-list { 533 - counter-reset: process; 534 - margin: 0; 535 - padding: 0; 536 - list-style: none; 537 - 538 - li { 539 - counter-increment: process; 540 - position: relative; 541 - padding: 16px 16px 16px 58px; 542 - margin-bottom: 12px; 543 - background: #fff; 544 - border: 1px solid @line; 545 - border-radius: @radius; 546 - box-shadow: @shadow-sm; 547 - color: @muted; 548 - line-height: 1.5; 549 - 550 - &:before { 551 - content: counter(process); 552 - position: absolute; 553 - left: 16px; 554 - top: 16px; 555 - width: 28px; 556 - height: 28px; 557 - border-radius: 50%; 558 - background: fade(@brand, 10%); 559 - color: @brand; 560 - display: flex; 561 - align-items: center; 562 - justify-content: center; 563 - font-weight: 800; 564 - } 565 - 566 - strong { 567 - display: block; 568 - color: @text; 569 - margin-bottom: 3px; 570 - } 571 - } 572 -} 573 - 574 -/* ========== Resources ========== */ 575 - 576 -.resource-strip { 577 - background: @brand-bg; 578 -} 579 - 580 -.resource-card { 581 - padding: 20px; 582 - 287 +.service-body { 583 583 h4 { 584 - margin: 0 0 8px; 585 - color: @text; 586 - font-size: 18px; 587 - line-height: 1.25; 588 - } 289 + margin: 0 0 4px; 290 + font-size: 1.125rem; 291 + font-weight: 800; 589 589 590 - p { 591 - color: @muted; 592 - margin: 0 0 12px; 593 - line-height: 1.5; 594 - } 595 - 596 - a { 597 - color: @brand; 598 - font-weight: 700; 599 - } 600 -} 601 - 602 -.resource-content { 603 - order: 1; 604 -} 605 - 606 -.resource-sidebar { 607 - order: 2; 608 -} 609 - 610 -@media (max-width: 767px) { 611 - .resource-layout { 612 - display: flex; 613 - flex-direction: column; 614 - } 615 - 616 - .resource-sidebar { 617 - order: 0; 618 - position: static; 619 - width: 100%; 620 - margin-bottom: 24px; 621 - } 622 - 623 - .resource-content { 624 - order: 1; 625 - } 626 -} 627 - 628 -/* ========== CTA ========== */ 629 - 630 -.cta-section { 631 - padding: 32px 0 24px; 632 - 633 - .contact-inline { 634 - margin: 0; 635 - color: @muted; 636 - 637 637 a { 638 - color: @brand; 639 - } 640 - } 641 -} 294 + color: @text; 295 + text-decoration: none; 642 642 643 -.cta-panel { 644 - max-width: 860px; 645 - margin: 0 auto; 646 - padding: 32px; 647 - border-radius: @radius; 648 - border: 1px solid fade(@brand, 20%); 649 - background: 650 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 651 - box-shadow: @shadow-sm; 652 - text-align: center; 653 - 654 - h2 { 655 - margin-top: 0; 656 - } 657 - 658 - p { 659 - color: @muted; 660 - line-height: 1.55; 661 - } 662 -} 663 - 664 -/* ========== Responsive ========== */ 665 - 666 -@media (max-width: 980px) { 667 - .widgets, 668 - .pathways, 669 - .services-grid, 670 - .resource-grid { 671 - grid-template-columns: repeat(2, minmax(0, 1fr)); 672 - } 673 - 674 - .split-grid { 675 - grid-template-columns: 1fr; 676 - } 677 - 678 - .split-copy h2 { 679 - text-align: center; 680 - } 681 -} 682 - 683 -@media (max-width: 760px) { 684 - section[id] { 685 - scroll-margin-top: 132px; 686 - } 687 - 688 - .header-inner { 689 - min-height: auto; 690 - padding-top: 14px; 691 - padding-bottom: 14px; 692 - flex-direction: column; 693 - align-items: center; 694 - gap: 12px; 695 - } 696 - 697 - .site-nav { 698 - width: 100%; 699 - justify-content: center; 700 - flex-wrap: wrap; 701 - gap: 10px 16px; 702 - font-size: 14px; 703 - 704 - .nav-cta { 705 - padding: 7px 12px; 706 - } 707 - } 708 - 709 - .hero.hero-centered { 710 - min-height: 280px; 711 - } 712 - 713 - .hero { 714 - .lead { 715 - font-size: 17px; 716 - } 717 - 718 - .benefits { 719 - gap: 4px 10px; 720 - 721 - li + li::before { 722 - content: none; 297 + &:hover { 298 + color: @brand; 299 + text-decoration: underline; 723 723 } 724 724 } 725 725 } 726 -} 727 727 728 -@media (max-width: 640px) { 729 - section { 730 - padding: 34px 0; 731 - } 732 - 733 - .widgets, 734 - .pathways, 735 - .services-grid, 736 - .resource-grid { 737 - grid-template-columns: 1fr; 738 - } 739 - 740 - .pathway-card, 741 - .services .service, 742 - .resource-card, 743 - .widget { 744 - padding: 20px; 745 - } 746 - 747 - .services .service { 748 - gap: 14px; 749 - } 750 - 751 - .cta-panel { 752 - padding: 24px 20px; 753 - } 754 -} 755 -/* ========== Resource / Article Pages ========== */ 756 - 757 -.resource-page { 758 - padding-top: 34px; 759 -} 760 - 761 -.resource-header { 762 - padding: 40px 0 30px; 763 - border-top: none; 764 - background: 765 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 766 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 767 - 768 - h1 { 769 - margin: 0 auto 14px; 770 - text-align: center; 771 - line-height: 1.18; 772 - } 773 - 774 - .resource-summary { 775 - max-width: 780px; 776 - margin: 0 auto; 777 - color: @muted; 778 - text-align: center; 779 - font-size: 18px; 780 - line-height: 1.55; 781 - } 782 -} 783 - 784 -.resource-layout { 785 - display: grid; 786 - grid-template-columns: minmax(0, 760px) 280px; 787 - gap: 42px; 788 - max-width: 1080px; 789 - margin: 0 auto; 790 - align-items: start; 791 -} 792 - 793 -.resource-content { 794 - color: @text; 795 - font-size: 16px; 796 - line-height: 1.68; 797 - 798 - h2 { 799 - text-align: left; 800 - margin: 34px 0 12px; 801 - line-height: 1.28; 802 - } 803 - 804 - h3 { 805 - margin: 24px 0 8px; 806 - line-height: 1.3; 807 - } 808 - 809 809 p { 810 - margin: 0 0 16px; 811 - } 812 - 813 - ul, 814 - ol { 815 - margin: 0 0 18px; 816 - padding-left: 22px; 817 - } 818 - 819 - li { 820 - margin: 6px 0; 821 - } 822 - 823 - strong { 305 + margin: 0 0 6px; 824 824 color: @text; 307 + line-height: 1.5; 825 825 } 826 -} 827 827 828 -.resource-note { 829 - border-left: 4px solid @brand; 830 - background: @brand-bg; 831 - padding: 16px 18px; 832 - margin: 22px 0; 833 - border-radius: 0 @radius @radius 0; 834 - 835 - p:last-child { 836 - margin-bottom: 0; 837 - } 838 -} 839 - 840 -.resource-checklist { 841 - margin: 18px 0 24px; 842 - padding: 0; 843 - list-style: none; 844 - 845 - li { 846 - position: relative; 847 - padding: 10px 0 10px 34px; 848 - border-bottom: 1px solid @line; 849 - 850 - &:before { 851 - content: "\f00c"; 852 - font-family: FontAwesome; 853 - position: absolute; 854 - left: 0; 855 - top: 11px; 856 - color: @brand; 857 - } 858 - } 859 -} 860 - 861 -.resource-sidebar { 862 - position: sticky; 863 - top: 96px; 864 - border: 1px solid @line; 865 - border-radius: @radius; 866 - padding: 18px; 867 - background: #fff; 868 - box-shadow: @shadow-sm; 869 - 870 - h4 { 871 - margin: 0 0 10px; 872 - } 873 - 874 874 ul { 875 - margin: 0; 876 - padding-left: 1 8px;311 + margin: .45rem 0 0; 312 + padding-left: 1.1rem; 877 877 color: @muted; 314 + font-size: 13px; 878 878 } 879 879 880 880 li { 881 - margin: 8px 0; 318 + margin: .25rem 0; 319 + line-height: 1.45; 882 882 } 883 883 884 - a { 885 - color: @brand; 886 - font-weight: 600; 887 - } 888 -} 322 + .service-link { 323 + margin-top: .45rem; 324 + font-size: 13px; 889 889 890 -.resource-cta { 891 - margin-top: 36px; 892 - padding: 22px; 893 - border: 1px solid fade(@brand, 20%); 894 - border-radius: @radius; 895 - background: @brand-bg; 326 + a { 327 + color: @brand; 328 + font-weight: 700; 329 + text-decoration: none; 896 896 897 - h3 { 898 - margin-top: 0; 331 + &:hover { 332 + color: @brand-strong; 333 + text-decoration: underline; 334 + } 335 + } 899 899 } 900 - 901 - p { 902 - color: @muted; 903 - } 904 904 } 905 905 906 -@media (max-width: 900px) { 907 - .resource-layout { 908 - grid-template-columns: 1fr; 909 - } 339 +/* ===== Split section ===== */ 910 910 911 - .resource-sidebar { 912 - position: static; 913 - } 914 -} 915 -/* ========== Products / Extensions Pages ========== */ 916 - 917 -.product-index-section { 918 - padding: 52px 0 56px; 919 - 920 - h2 { 921 - margin-bottom: 10px; 922 - } 923 -} 924 - 925 -.product-card-grid { 926 - max-width: 840px; 927 - margin: 28px auto 0; 341 +.split-section { 928 928 display: grid; 929 - grid-template-columns: 1fr; 930 - grid-gap: 18px; 343 + grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); 344 + gap: 32px; 345 + align-items: start; 346 + max-width: 960px; 347 + margin: 0 auto; 931 931 } 932 932 933 -.p roduct-card{350 +.panel { 934 934 background: #fff; 935 935 border: 1px solid @line; 936 936 border-radius: @radius; 937 937 box-shadow: @shadow-sm; 938 - padding: 28px; 939 - display: grid; 940 - grid-template-columns: 68px 1fr; 941 - grid-gap: 22px; 942 - align-items: start; 943 - transition: transform .18s ease, box-shadow .18s ease; 944 - 945 - &:hover { 946 - transform: translateY(-2px); 947 - box-shadow: @shadow; 948 - } 949 - 950 - .product-card-icon { 951 - width: 58px; 952 - height: 58px; 953 - border-radius: 50%; 954 - background: fade(@brand, 10%); 955 - border: 1px solid fade(@brand, 20%); 956 - color: @brand; 957 - display: flex; 958 - align-items: center; 959 - justify-content: center; 960 - font-size: 22px; 961 - flex-shrink: 0; 962 - } 963 - 964 - h3 { 965 - margin: 0 0 10px; 966 - color: @text; 967 - font-size: 23px; 968 - line-height: 1.25; 969 - font-weight: 800; 970 - } 971 - 972 - p { 973 - color: @muted; 974 - line-height: 1.6; 975 - } 976 - 977 - .card-link { 978 - margin: 0; 979 - 980 - a { 981 - font-weight: 700; 982 - } 983 - } 355 + padding: 20px; 984 984 } 985 985 986 -.product-card-kicker { 987 - margin-bottom: 10px; 988 - padding: 5px 10px; 989 - font-size: 12px; 990 - text-transform: uppercase; 991 - letter-spacing: .04em; 358 +.panel h3 { 359 + margin-top: 0; 992 992 } 993 993 994 -.product-highlights { 995 - margin: 14px 0 20px; 996 - padding-left: 18px; 997 - color: @muted; 362 +/* ===== Contact / form page ===== */ 998 998 999 - li { 1000 - margin: 6px 0; 1001 - line-height: 1.45; 1002 - } 1003 -} 1004 - 1005 -/* ========== Individual Product Pages ========== */ 1006 - 1007 -.product-layout { 364 +.contact-layout { 1008 1008 display: grid; 1009 - grid-template-columns: 1.1fr .9fr;1010 - g rid-gap: 36px;1011 - max-width: 10 40px;366 + grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr); 367 + gap: 32px; 368 + max-width: 1000px; 1012 1012 margin: 0 auto; 1013 1013 align-items: start; 1014 1014 } 1015 1015 1016 -.product-summary-card, 1017 -.product-info-card, 1018 -.product-gallery-panel { 373 +.contact-card { 1019 1019 background: #fff; 1020 1020 border: 1px solid @line; 1021 1021 border-radius: @radius; 1022 1022 box-shadow: @shadow-sm; 378 + padding: 20px; 1023 1023 } 1024 1024 1025 -.product-summary-card { 1026 - padding: 26px; 381 +.contact-card h3 { 382 + margin-top: 0; 383 +} 1027 1027 1028 - h2{1029 - text-align:left;1030 - margin-top: 0;1031 - }385 +.contact-list { 386 + list-style: none; 387 + padding: 0; 388 + margin: 12px 0 0; 1032 1032 1033 - p { 390 + li { 391 + margin: 8px 0; 1034 1034 color: @muted; 1035 - line-height: 1.6; 1036 1036 } 1037 1037 1038 - p:last-child { 1039 - margin-bottom: 0; 395 + i { 396 + color: @brand; 397 + margin-right: 8px; 1040 1040 } 1041 -} 1042 1042 1043 -.product-info-card { 1044 - padding: 22px; 1045 - 1046 - h3 { 1047 - margin-top: 0; 1048 - margin-bottom: 12px; 400 + a { 401 + color: @brand; 1049 1049 } 1050 - 1051 - ul { 1052 - margin: 0; 1053 - padding-left: 20px; 1054 - color: @muted; 1055 - } 1056 - 1057 - li { 1058 - margin: 8px 0; 1059 - line-height: 1.45; 1060 - } 1061 1061 } 1062 1062 1063 -.product-feature-grid { 1064 - display: grid; 1065 - grid-template-columns: repeat(3, minmax(0, 1fr)); 1066 - grid-gap: 18px; 1067 - max-width: 1040px; 1068 - margin: 26px auto 0; 1069 -} 1070 - 1071 -.product-feature { 405 +.form-panel { 1072 1072 background: #fff; 1073 1073 border: 1px solid @line; 1074 1074 border-radius: @radius; 1075 1075 box-shadow: @shadow-sm; 1076 1076 padding: 22px; 1077 - transition: transform .18s ease, box-shadow .18s ease; 1078 - 1079 - &:hover { 1080 - transform: translateY(-2px); 1081 - box-shadow: @shadow; 1082 - } 1083 - 1084 - .feature-icon { 1085 - width: 46px; 1086 - height: 46px; 1087 - border-radius: 50%; 1088 - background: fade(@brand, 10%); 1089 - color: @brand; 1090 - display: flex; 1091 - align-items: center; 1092 - justify-content: center; 1093 - margin-bottom: 14px; 1094 - font-size: 18px; 1095 - } 1096 - 1097 - h3 { 1098 - margin: 0 0 8px; 1099 - color: @text; 1100 - font-size: 18px; 1101 - line-height: 1.25; 1102 - } 1103 - 1104 - p { 1105 - margin: 0; 1106 - color: @muted; 1107 - line-height: 1.5; 1108 - } 1109 1109 } 1110 1110 1111 -.product-gallery-panel { 1112 - max-width: 1040px; 1113 - margin: 20px auto 0; 1114 - padding: 26px; 1115 - 1116 - h2 { 1117 - margin-top: 0; 1118 - text-align: center; 1119 - } 1120 - 1121 - .gallery-note { 1122 - max-width: 700px; 1123 - margin: 0 auto 18px; 1124 - color: @muted; 1125 - text-align: center; 1126 - line-height: 1.55; 1127 - } 413 +.form-panel .xform dl { 414 + margin: 0; 1128 1128 } 1129 1129 1130 -.product-gallery-placeholder { 1131 - min-height: 260px; 1132 - padding: 28px; 1133 - border: 1px dashed fade(@brand, 40%); 1134 - border-radius: @radius; 1135 - background: fade(@brand, 5%); 1136 - color: @muted; 1137 - text-align: center; 1138 - display: flex; 1139 - align-items: center; 1140 - justify-content: center; 417 +.form-panel .xform dt { 418 + margin-top: 12px; 1141 1141 } 1142 1142 1143 -.product-section-muted { 1144 - background: 1145 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 421 +.form-panel .xform dt:first-child { 422 + margin-top: 0; 1146 1146 } 1147 1147 1148 -@media (max-width: 980px) { 1149 - .product-layout, 1150 - .product-feature-grid { 1151 - grid-template-columns: 1fr; 1152 - } 1153 - 1154 - .product-summary-card h2 { 1155 - text-align: center; 1156 - } 425 +.form-panel .xform label { 426 + color: @text; 427 + font-weight: 700; 1157 1157 } 1158 1158 1159 -@media (max-width: 640px) { 1160 - .product-card { 1161 - grid-template-columns: 1fr; 1162 - padding: 22px; 1163 - text-align: left; 1164 - 1165 - .product-card-icon { 1166 - margin-bottom: 2px; 1167 - } 1168 - } 1169 - 1170 - .product-summary-card, 1171 - .product-info-card, 1172 - .product-feature, 1173 - .product-gallery-panel { 1174 - padding: 20px; 1175 - } 1176 -} 1177 -/* ========== Resources Index ========== */ 1178 - 1179 -.resources-index-page { 1180 - padding: 56px 0 72px; 1181 - background: @brand-bg; 1182 -} 1183 - 1184 -.resources-intro { 1185 - max-width: 820px; 1186 - margin: 0 auto 32px; 1187 - text-align: center; 1188 -} 1189 - 1190 -.resources-intro p { 430 +.form-panel .xform .xHint { 431 + display: block; 1191 1191 color: @muted; 1192 - font-size: 17px; 1193 - line-height: 1.7; 1194 - margin: 0; 433 + font-size: 12px; 434 + margin-top: 2px; 1195 1195 } 1196 1196 1197 -.resources-grid { 1198 - display: grid; 1199 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1200 - gap: 24px; 1201 - margin-bottom: 36px; 437 +.form-panel .xform dd { 438 + margin-left: 0; 439 + margin-bottom: 10px; 1202 1202 } 1203 1203 1204 -.resource-card { 1205 - display: flex; 1206 - gap: 18px; 1207 - background: #fff; 442 +.form-panel input[type="text"], 443 +.form-panel input[type="email"], 444 +.form-panel textarea, 445 +.form-panel select { 446 + width: 100%; 447 + max-width: 100%; 1208 1208 border: 1px solid @line; 1209 - border-radius: @radius; 1210 - box-shadow: @shadow-sm; 1211 - padding: 24px; 449 + border-radius: 8px; 450 + padding: 8px 10px; 1212 1212 } 1213 1213 1214 -.resource-card-icon { 1215 - flex: 0 0 46px; 1216 - width: 46px; 1217 - height: 46px; 1218 - border-radius: 14px; 1219 - background: @brand-soft; 1220 - color: @brand-strong; 1221 - display: flex; 1222 - align-items: center; 1223 - justify-content: center; 1224 - font-size: 20px; 1225 -} 453 +/* ===== CTA ===== */ 1226 1226 1227 -.resource-card-label { 1228 - color: @brand-strong; 1229 - font-size: 13px; 1230 - font-weight: 700; 1231 - text-transform: uppercase; 1232 - letter-spacing: .04em; 1233 - margin-bottom: 8px; 455 +.cta-section { 456 + padding: 24px 0 16px; 1234 1234 } 1235 1235 1236 -.resource-card h2 { 1237 - font-size: 22px; 1238 - line-height: 1.25; 1239 - margin: 0 0 12px; 1240 -} 1241 - 1242 -.resource-card h2 a { 1243 - color: @text; 1244 - text-decoration: none; 1245 -} 1246 - 1247 -.resource-card h2 a:hover { 1248 - color: @brand-strong; 1249 - text-decoration: none; 1250 -} 1251 - 1252 -.resource-card p { 459 +.contact-inline { 460 + margin: 0; 1253 1253 color: @muted; 1254 - font-size: 15px; 1255 - line-height: 1.65; 1256 - margin: 0 0 16px; 1257 -} 1258 1258 1259 - .resource-card-link{1260 - color: @brand -strong;1261 - font-weight: 700; 1262 - text-decoration: none;463 + a { 464 + color: @brand; 465 + font-weight: 700; 466 + } 1263 1263 } 1264 1264 1265 -.resource-card-link:hover { 1266 - color: @brand; 1267 - text-decoration: none; 1268 -} 469 +/* ===== Compact sections ===== */ 1269 1269 1270 -.resources-next { 1271 - max-width: 820px; 1272 - margin: 0 auto 32px; 1273 - text-align: center; 471 +.compact-section { 472 + padding: 28px 0; 1274 1274 } 1275 1275 1276 -. resources-next h2 {1277 - font-size:26px;1278 - margin: 0 010px;475 +.compact-section h2 { 476 + margin-top: 0; 477 + margin-bottom: 14px; 1279 1279 } 1280 1280 1281 -.resources-next p { 1282 - color: @muted; 1283 - font-size: 16px; 1284 - line-height: 1.7; 1285 - margin: 0; 1286 -} 480 +/* ===== Responsive ===== */ 1287 1287 1288 1288 @media (max-width: 767px) { 1289 - .resources-index-page{1290 - padding: 36px 052px;483 + section { 484 + padding: 26px 0; 1291 1291 } 1292 1292 1293 - .resources-intro { 1294 - text-align: left; 1295 - margin-bottom: 24px; 487 + .landing-hero { 488 + min-height: 280px; 1296 1296 } 1297 1297 1298 - . resources-grid{1299 - grid-template-columns:1fr;1300 - gap:18px;491 + .landing-hero h1, 492 + .page-header-compact h1 { 493 + font-size: 28px; 1301 1301 } 1302 1302 1303 - .resource-card { 1304 - padding: 20px; 496 + .page-lead, 497 + .landing-hero .lead { 498 + font-size: 16px; 1305 1305 } 1306 1306 1307 - . resource-cardh2{1308 - f ont-size:20px;501 + .service { 502 + flex: 0 1 100%; 1309 1309 } 1310 1310 1311 - .resources-next { 1312 - text-align: left; 505 + .split-section, 506 + .contact-layout { 507 + grid-template-columns: 1fr; 508 + gap: 20px; 1313 1313 } 1314 1314 }
- XWiki.StyleSheetExtension[1]
-
- cache
-
... ... @@ -1,1 +1,0 @@ 1 -long - code
-
... ... @@ -1,189 +1,0 @@ 1 -/* ========== Agnease Public Top Menu ========== */ 2 - 3 -.agnease-menu-item { 4 - .dropdown-toggle { 5 - font-weight: inherit; 6 - font-size: inherit; 7 - } 8 - 9 - .caret { 10 - margin-left: 4px; 11 - border-top-color: @brand; 12 - border-bottom-color: @brand; 13 - } 14 - 15 - &.open > .dropdown-toggle, 16 - .dropdown-toggle:hover, 17 - .dropdown-toggle:focus { 18 - color: @brand-strong; 19 - background: transparent; 20 - background-color: transparent; 21 - box-shadow: none; 22 - } 23 - 24 - &.open > .dropdown-toggle .caret, 25 - .dropdown-toggle:hover .caret, 26 - .dropdown-toggle:focus .caret { 27 - border-top-color: @brand-strong; 28 - border-bottom-color: @brand-strong; 29 - } 30 -} 31 - 32 -/* Keep Agnease public top-level menu visually clean when hovered/open/focused */ 33 - 34 -.navbar-nav > li.agnease-services-menu > a, 35 -.navbar-nav > li.agnease-products-menu > a, 36 -.navbar-nav > li.agnease-services-menu > a:hover, 37 -.navbar-nav > li.agnease-products-menu > a:hover, 38 -.navbar-nav > li.agnease-services-menu > a:focus, 39 -.navbar-nav > li.agnease-products-menu > a:focus, 40 -.navbar-nav > li.agnease-services-menu.open > a, 41 -.navbar-nav > li.agnease-products-menu.open > a, 42 -.navbar-nav > li.agnease-services-menu.open > a:hover, 43 -.navbar-nav > li.agnease-products-menu.open > a:hover, 44 -.navbar-nav > li.agnease-services-menu.open > a:focus, 45 -.navbar-nav > li.agnease-products-menu.open > a:focus { 46 - background: transparent; 47 - background-color: transparent; 48 - color: @brand-strong; 49 - box-shadow: none; 50 -} 51 - 52 -/* Dropdown panels */ 53 - 54 -.agnease-dropdown { 55 - min-width: 270px; 56 - padding: 8px; 57 - border: 1px solid fade(@brand, 18%); 58 - border-radius: 12px; 59 - background: #fff; 60 - box-shadow: 0 12px 32px fade(@brand-strong, 12%); 61 - 62 - > li > a { 63 - display: flex; 64 - align-items: center; 65 - gap: 10px; 66 - padding: 9px 11px; 67 - border-radius: 9px; 68 - color: @brand; 69 - background: transparent; 70 - white-space: nowrap; 71 - font-size: 14px; 72 - font-weight: 700; 73 - line-height: 1.25; 74 - 75 - i { 76 - width: 18px; 77 - flex: 0 0 18px; 78 - color: @brand; 79 - text-align: center; 80 - font-size: 14px; 81 - } 82 - 83 - &:hover, 84 - &:focus, 85 - &:active { 86 - color: @brand-strong; 87 - background: fade(@brand, 8%); 88 - text-decoration: none; 89 - outline: none; 90 - 91 - i { 92 - color: @brand-strong; 93 - } 94 - } 95 - } 96 - 97 - > .active > a, 98 - > .active > a:hover, 99 - > .active > a:focus { 100 - color: @brand-strong; 101 - background: fade(@brand, 10%); 102 - text-decoration: none; 103 - 104 - i { 105 - color: @brand-strong; 106 - } 107 - } 108 - 109 - .divider { 110 - margin: 7px 0; 111 - background-color: fade(@brand, 16%); 112 - } 113 -} 114 - 115 -.agnease-products-dropdown, 116 -.agnease-resources-dropdown { 117 - min-width: 260px; 118 -} 119 - 120 -/* Remove gray Bootstrap dropdown item states */ 121 -.dropdown-menu > li > a:hover, 122 -.dropdown-menu > li > a:focus { 123 - background-image: none; 124 -} 125 - 126 -/* ========== Mobile Menu ========== */ 127 - 128 -@media (max-width: 767px) { 129 - .navbar-nav > li.agnease-menu-item > a, 130 - .navbar-nav > li > a { 131 - padding-top: 8px; 132 - padding-bottom: 8px; 133 - } 134 - 135 - .agnease-dropdown { 136 - min-width: 0; 137 - width: 100%; 138 - padding: 4px 8px 8px 18px; 139 - border: 0; 140 - border-radius: 0; 141 - box-shadow: none; 142 - background: #fff; 143 - 144 - > li > a { 145 - padding: 8px 10px; 146 - white-space: normal; 147 - font-size: 14px; 148 - border-radius: 8px; 149 - color: @brand; 150 - 151 - i { 152 - width: 16px; 153 - flex-basis: 16px; 154 - } 155 - 156 - &:hover, 157 - &:focus, 158 - &:active { 159 - color: @brand-strong; 160 - background: fade(@brand, 8%); 161 - } 162 - } 163 - 164 - .divider { 165 - margin: 5px 0; 166 - background-color: fade(@brand, 16%); 167 - } 168 - } 169 -} 170 -/* Remove gray background from opened top-level public menu items */ 171 - 172 -.site-nav .dropdown.open > a, 173 -.site-nav .dropdown.open > a:hover, 174 -.site-nav .dropdown.open > a:focus, 175 -.site-nav .agnease-menu-item.open > a, 176 -.site-nav .agnease-menu-item.open > a:hover, 177 -.site-nav .agnease-menu-item.open > a:focus, 178 -.navbar-nav > li.dropdown.open > a, 179 -.navbar-nav > li.dropdown.open > a:hover, 180 -.navbar-nav > li.dropdown.open > a:focus, 181 -.navbar-nav > li.agnease-menu-item.open > a, 182 -.navbar-nav > li.agnease-menu-item.open > a:hover, 183 -.navbar-nav > li.agnease-menu-item.open > a:focus { 184 - color: @brand-strong; 185 - background: transparent !important; 186 - background-color: transparent !important; 187 - background-image: none !important; 188 - box-shadow: none !important; 189 -} - contentType
-
... ... @@ -1,1 +1,0 @@ 1 -LESS - name
-
... ... @@ -1,1 +1,0 @@ 1 -Menu - use
-
... ... @@ -1,1 +1,0 @@ 1 -onDemand