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, 1 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -3,193 +3,190 @@ 3 3 #set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome')) 4 4 {{html clean="false"}} 5 5 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> 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 + 10 10 <p class="lead"> 11 - Helpingorganizationssafelyupgrade,maintain,customize,andintegrate theirXWiki environments.16 + Agnease helps companies keep XWiki secure, stable, up-to-date and adapted to real business processes. 12 12 </p> 13 13 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 + 14 14 <ul class="benefits"> 15 - <li> <ahref="/services/xwiki-upgrades">Smoothupgrades</a></li>16 - <li> Reliable supportplans</li>17 - <li>Custom i ntegrations</li>18 - <li> Secure, optimizedplatforms</li>25 + <li>Safe LTS upgrades</li> 26 + <li>Support and recovery</li> 27 + <li>Custom XWiki applications</li> 28 + <li>Integrations and migrations</li> 19 19 </ul> 20 20 21 - <div class="ct a-row">22 - <a class="btn-ma in" href="mailto:alex@agnease.com">ContactAgnease</a>23 - <a class="btn-secondary" href=" /services">View services</a>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')">View XWiki services</a> 24 24 </div> 25 25 </div> 26 26 </section> 27 27 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 - }]) 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> 50 50 51 - <section aria-labelledby=" why-title">49 + <section aria-labelledby="platform-title"> 52 52 <div class="container"> 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> 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> 55 55 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 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> 69 69 </div> 70 70 </div> 71 71 </section> 72 72 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"> 116 + <section class="split-section" aria-labelledby="why-title"> 127 127 <div class="container"> 128 - <h2 id="services-title">Services</h2> 129 - <p class="lead">All the XWiki services you need, delivered with precision and care</p> 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> 130 130 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 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> 157 157 </div> 158 158 </div> 159 159 </section> 160 160 161 - ## CTA 162 - <section id="contact" class="cta-section"> 149 + <section class="resource-strip" aria-labelledby="resources-title"> 163 163 <div class="container"> 164 - <p class="text-center contact-inline"> 165 - Need help with your XWiki? <a href="mailto:alex@agnease.com">Contact Agnease</a>. 151 + <h2 id="resources-title">Useful XWiki resources</h2> 152 + <p class="section-intro"> 153 + Practical guidance for organizations running XWiki in production. 166 166 </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> 167 167 </div> 168 168 </section> 169 - {{/html}} 170 -#end 171 171 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> 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> 179 179 </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> 190 190 </div> 191 - </div> 192 - </div> 187 + </section> 188 + 189 + {{/html}} 193 193 #end 194 194 195 195 #macro (stripHTMLMacro $displayOutput)
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -1,16 +1,19 @@ 1 -/* ========== Agnease Public Website Theme========== */1 +/* ========== Agnease Public Website ========== */ 2 2 3 3 @brand: #00937D; 4 4 @brand-strong: #007B6A; 5 +@brand-soft: #E7FFF8; 6 +@brand-bg: #F4FCFA; 5 5 @text: #2D3A34; 6 6 @muted: #5B6B64; 7 7 @line: #E4ECE9; 8 -@soft: #F6FBF9; 9 9 @radius: 16px; 10 -@shadow-sm: 0 6px 20px rgba(0,0,0,.06); 11 -@shadow: 0 12px 36px rgba(0,0,0,.08); 11 +@shadow-sm: 0 6px 20px rgba(0, 0, 0, .06); 12 +@shadow: 0 12px 36px rgba(0, 0, 0, .08); 12 12 @maxw: 1140px; 13 13 15 +/* ========== Base ========== */ 16 + 14 14 #mainContentArea { 15 15 padding: 0; 16 16 } ... ... @@ -19,203 +19,336 @@ 19 19 max-width: @maxw; 20 20 margin-left: auto; 21 21 margin-right: auto; 25 + padding-left: 18px; 26 + padding-right: 18px; 22 22 } 23 23 24 -.text-center { 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 { 25 25 text-align: center; 55 + margin-top: 0; 26 26 } 27 27 28 28 .lead { 29 29 color: @muted; 30 30 text-align: center; 31 - line-height:1.5;61 + margin-bottom: 0; 32 32 } 33 33 34 -. page-lead{64 +.section-intro { 35 35 max-width: 760px; 36 - margin: 0 auto; 37 - color: @muted; 38 - font-size: 18px; 39 - line-height: 1.5; 66 + margin: 0 auto 22px; 40 40 text-align: center; 68 + color: @muted; 69 + font-size: 16px; 70 + line-height: 1.55; 41 41 } 42 42 43 -section { 44 - padding: 32px 0; 45 - border-top: 1px solid @line; 73 +a { 74 + color: @brand; 46 46 47 - &:first-of-type { 48 - border-top: none; 76 + &:hover, 77 + &:focus { 78 + color: @brand-strong; 49 49 } 50 50 } 51 51 52 -h1, h2, h3, h4 { 53 - color: @text; 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); 54 54 } 55 55 56 -h2 { 57 - text-align: center; 93 +.header-inner { 94 + min-height: 72px; 95 + display: flex; 96 + align-items: center; 97 + justify-content: space-between; 98 + gap: 24px; 58 58 } 59 59 60 -/* ===== Buttons / links ===== */ 101 +.site-nav { 102 + display: flex; 103 + align-items: center; 104 + gap: 22px; 105 + font-size: 15px; 61 61 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; 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 + } 70 70 } 71 71 72 -.btn-main { 73 - color: #fff; 135 +/* ========== Buttons ========== */ 136 + 137 +.btn-primary { 74 74 background: @brand; 139 + border-color: @brand; 140 + color: #fff; 75 75 76 76 &:hover, 77 77 &:focus { 78 - color: #fff; 79 79 background: @brand-strong; 80 - text-decoration: none; 145 + border-color: @brand-strong; 146 + color: #fff; 81 81 } 82 82 } 83 83 84 84 .btn-secondary { 85 85 color: @brand; 86 - background: f ade(@brand, 8%);87 - border: 1px solid fade(@brand, 20%);152 + background: #fff; 153 + border: 1px solid fade(@brand, 35%); 88 88 89 89 &:hover, 90 90 &:focus { 91 91 color: @brand-strong; 92 - b ackground:fade(@brand, 12%);93 - text-decoration: none;158 + border-color: @brand; 159 + background: @brand-bg; 94 94 } 95 95 } 96 96 97 -.cta-row { 98 - display: flex; 99 - gap: 10px; 100 - flex-wrap: wrap; 101 - justify-content: center; 102 - margin-top: 16px; 103 -} 163 +/* ========== Hero ========== */ 104 104 105 -/* ===== Landing page hero ===== */ 165 +.hero { 166 + overflow: hidden; 167 + background-repeat: no-repeat; 168 + background-attachment: scroll; 106 106 107 -. landing-hero {108 - text-align: center; 109 - min-height:340px;110 - di splay:flex;111 - a lign-items:center;112 - justify-content:center;113 - background:114 - radial-gradient(50rem 18rem at50% -10%, #E7FFF8 0%, transparent60%),115 - radial-gradient(50rem18rem at 50% 0%, #E8F6F30%, transparent 60%);116 -} 170 + &.hero-centered { 171 + text-align: center; 172 + background: 173 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 174 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 175 + display: flex; 176 + align-items: center; 177 + justify-content: center; 178 + min-height: 330px; 179 + } 117 117 118 -.landing-hero-inner { 119 - max-width: 860px; 120 - margin: 0 auto; 121 -} 181 + .hero-inner { 182 + max-width: 860px; 183 + margin: 0 auto; 184 + display: flex; 185 + flex-direction: column; 186 + align-items: center; 187 + } 122 122 123 -.landing-hero h1 { 124 - margin: 0 0 10px; 125 - font-size: 36px; 126 - line-height: 1.18; 127 -} 189 + h1 { 190 + max-width: 790px; 191 + margin-left: auto; 192 + margin-right: auto; 193 + line-height: 1.18; 194 + } 128 128 129 - .landing-hero.lead {130 - ma rgin: 0auto 12px;131 - max-width:760px;132 - font-size: 18px;133 -} 196 + .lead { 197 + max-width: 760px; 198 + font-size: 19px; 199 + line-height: 1.55; 200 + } 134 134 135 -/* ===== Compact page header for section pages ===== */ 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; 136 136 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%); 212 + li + li::before { 213 + content: "•"; 214 + margin: 0 6px; 215 + } 216 + } 143 143 } 144 144 145 -.page-header-compact .container { 146 - max-width: 850px; 147 -} 148 - 149 -.page-eyebrow { 150 - margin: 0 0 8px; 219 +.hero-kicker { 220 + display: inline-flex; 221 + align-items: center; 222 + gap: 8px; 151 151 color: @brand; 152 - font-size: 12px; 153 - font-weight: 800; 154 - text-transform: uppercase; 155 - letter-spacing: .08em; 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; 156 156 } 157 157 158 -.page-header-compact h1 { 159 - margin: 0 0 10px; 160 - font-size: 34px; 161 - line-height: 1.15; 233 +.hero-support { 234 + max-width: 760px; 235 + margin: 14px auto 0; 236 + color: @muted; 237 + line-height: 1.55; 162 162 } 163 163 164 -/* ===== Benefits / chips ===== */ 165 - 166 -.benefits, 167 -.inline-benefits { 240 +.hero-actions, 241 +#hero-cta { 168 168 display: flex; 243 + gap: 12px; 169 169 flex-wrap: wrap; 170 170 justify-content: center; 171 - gap: 8px; 172 - list-style: none; 173 - padding: 0; 174 - margin: 12px 0 0; 246 + margin-top: 22px; 175 175 } 176 176 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; 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 + } 185 185 } 186 186 187 -/* ===== Cards ===== */281 +/* ========== Reusable Grids ========== */ 188 188 283 +.card-grid, 284 +.pathways, 285 +.services-grid, 286 +.resource-grid, 189 189 .widgets { 190 - margin-top: 16px; 191 191 display: grid; 192 - grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 193 - grid-gap: 16px; 289 + grid-gap: 18px; 290 + margin-left: auto; 291 + margin-right: auto; 194 194 } 195 195 196 -.widget { 197 - padding: 18px; 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 { 198 198 background: #fff; 199 199 border: 1px solid @line; 200 200 border-radius: @radius; 201 201 box-shadow: @shadow-sm; 202 202 transition: transform .18s ease, box-shadow .18s ease; 203 - display: flex; 204 - flex-direction: column; 205 - height: 100%; 206 206 207 207 &:hover { 208 208 transform: translateY(-2px); 209 209 box-shadow: @shadow; 210 210 } 338 +} 211 211 340 +/* ========== Small Widgets ========== */ 341 + 342 +.widget { 343 + padding: 18px; 344 + display: flex; 345 + flex-direction: column; 346 + height: 100%; 347 + 212 212 .icon { 213 213 display: flex; 214 214 align-items: center; 215 215 gap: 10px; 216 - padding-bottom: 6px;217 - margin-bottom: 8px;218 - border-bottom: 1px solid fade(@line, 60%);352 + padding-bottom: 8px; 353 + margin-bottom: 10px; 354 + border-bottom: 1px solid fade(@line, 70%); 219 219 220 220 i { 221 221 color: @brand; ... ... @@ -223,7 +223,7 @@ 223 223 224 224 h4 { 225 225 margin: 0; 226 - line-height: 1.2; 362 + line-height: 1.25; 227 227 color: @text; 228 228 } 229 229 } ... ... @@ -233,278 +233,945 @@ 233 233 color: @muted; 234 234 line-height: 1.45; 235 235 } 372 +} 236 236 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 + 237 237 .card-link { 238 - margin-top: 12px; 421 + margin-top: auto; 422 + padding-top: 4px; 239 239 240 240 a { 241 241 color: @brand; 242 242 font-weight: 700; 243 - text-decoration: n one;427 + text-decoration: underline; 244 244 245 - &:hover { 429 + &:hover, 430 + &:focus { 246 246 color: @brand-strong; 247 - text-decoration: underline; 248 248 } 249 249 } 250 250 } 251 251 } 252 252 253 -/* ===== Service / listingrows===== */437 +/* ========== Services ========== */ 254 254 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; 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 + } 264 264 } 265 265 266 -.service { 267 - flex: 0 1 calc(50% - 12px); 268 - display: flex; 269 - align-items: flex-start; 270 - gap: 16px; 271 - margin-bottom: 8px; 504 +/* ========== Split / Process Section ========== */ 505 + 506 +.split-section { 507 + background: 508 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 272 272 } 273 273 274 -.service-icon { 275 - width: 42px; 276 - height: 42px; 277 - border-radius: 50%; 278 - display: flex; 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; 279 279 align-items: center; 280 - justify-content: center; 281 - color: @brand; 282 - background: fade(@brand, 10%); 283 - flex-shrink: 0; 284 - margin-top: 3px; 285 285 } 286 286 287 -.service-body { 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 + 288 288 h4 { 289 - margin: 0 0 4px; 290 - font-size: 1.125rem; 291 - font-weight: 800; 584 + margin: 0 0 8px; 585 + color: @text; 586 + font-size: 18px; 587 + line-height: 1.25; 588 + } 292 292 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 + } 621 + 622 + .resource-content { 623 + order: 1; 624 + } 625 +} 626 + 627 +/* ========== CTA ========== */ 628 + 629 +.cta-section { 630 + padding: 32px 0 24px; 631 + 632 + .contact-inline { 633 + margin: 0; 634 + color: @muted; 635 + 293 293 a { 294 - color: @text; 295 - text-decoration: none; 637 + color: @brand; 638 + } 639 + } 640 +} 296 296 297 - &:hover { 298 - color: @brand; 299 - text-decoration: underline; 642 +.cta-panel { 643 + max-width: 860px; 644 + margin: 0 auto; 645 + padding: 32px; 646 + border-radius: @radius; 647 + border: 1px solid fade(@brand, 20%); 648 + background: 649 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 650 + box-shadow: @shadow-sm; 651 + text-align: center; 652 + 653 + h2 { 654 + margin-top: 0; 655 + } 656 + 657 + p { 658 + color: @muted; 659 + line-height: 1.55; 660 + } 661 +} 662 + 663 +/* ========== Responsive ========== */ 664 + 665 +@media (max-width: 980px) { 666 + .widgets, 667 + .pathways, 668 + .services-grid, 669 + .resource-grid { 670 + grid-template-columns: repeat(2, minmax(0, 1fr)); 671 + } 672 + 673 + .split-grid { 674 + grid-template-columns: 1fr; 675 + } 676 + 677 + .split-copy h2 { 678 + text-align: center; 679 + } 680 +} 681 + 682 +@media (max-width: 760px) { 683 + section[id] { 684 + scroll-margin-top: 132px; 685 + } 686 + 687 + .header-inner { 688 + min-height: auto; 689 + padding-top: 14px; 690 + padding-bottom: 14px; 691 + flex-direction: column; 692 + align-items: center; 693 + gap: 12px; 694 + } 695 + 696 + .site-nav { 697 + width: 100%; 698 + justify-content: center; 699 + flex-wrap: wrap; 700 + gap: 10px 16px; 701 + font-size: 14px; 702 + 703 + .nav-cta { 704 + padding: 7px 12px; 705 + } 706 + } 707 + 708 + .hero.hero-centered { 709 + min-height: 280px; 710 + } 711 + 712 + .hero { 713 + .lead { 714 + font-size: 17px; 715 + } 716 + 717 + .benefits { 718 + gap: 4px 10px; 719 + 720 + li + li::before { 721 + content: none; 300 300 } 301 301 } 302 302 } 725 +} 303 303 727 +@media (max-width: 640px) { 728 + section { 729 + padding: 34px 0; 730 + } 731 + 732 + .widgets, 733 + .pathways, 734 + .services-grid, 735 + .resource-grid { 736 + grid-template-columns: 1fr; 737 + } 738 + 739 + .pathway-card, 740 + .services .service, 741 + .resource-card, 742 + .widget { 743 + padding: 20px; 744 + } 745 + 746 + .services .service { 747 + gap: 14px; 748 + } 749 + 750 + .cta-panel { 751 + padding: 24px 20px; 752 + } 753 +} 754 +/* ========== Resource / Article Pages ========== */ 755 + 756 +.resource-page { 757 + padding-top: 34px; 758 +} 759 + 760 +.resource-header { 761 + padding: 40px 0 30px; 762 + border-top: none; 763 + background: 764 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 765 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 766 + 767 + h1 { 768 + margin: 0 auto 14px; 769 + text-align: center; 770 + line-height: 1.18; 771 + } 772 + 773 + .resource-summary { 774 + max-width: 780px; 775 + margin: 0 auto; 776 + color: @muted; 777 + text-align: center; 778 + font-size: 18px; 779 + line-height: 1.55; 780 + } 781 +} 782 + 783 +.resource-layout { 784 + display: grid; 785 + grid-template-columns: minmax(0, 760px) 280px; 786 + gap: 42px; 787 + max-width: 1080px; 788 + margin: 0 auto; 789 + align-items: start; 790 +} 791 + 792 +.resource-content { 793 + color: @text; 794 + font-size: 16px; 795 + line-height: 1.68; 796 + 797 + h2 { 798 + text-align: left; 799 + margin: 34px 0 12px; 800 + line-height: 1.28; 801 + } 802 + 803 + h3 { 804 + margin: 24px 0 8px; 805 + line-height: 1.3; 806 + } 807 + 304 304 p { 305 - margin: 0 0 6px; 809 + margin: 0 0 16px; 810 + } 811 + 812 + ul, 813 + ol { 814 + margin: 0 0 18px; 815 + padding-left: 22px; 816 + } 817 + 818 + li { 819 + margin: 6px 0; 820 + } 821 + 822 + strong { 306 306 color: @text; 307 - line-height: 1.5; 308 308 } 825 +} 309 309 827 +.resource-note { 828 + border-left: 4px solid @brand; 829 + background: @brand-bg; 830 + padding: 16px 18px; 831 + margin: 22px 0; 832 + border-radius: 0 @radius @radius 0; 833 + 834 + p:last-child { 835 + margin-bottom: 0; 836 + } 837 +} 838 + 839 +.resource-checklist { 840 + margin: 18px 0 24px; 841 + padding: 0; 842 + list-style: none; 843 + 844 + li { 845 + position: relative; 846 + padding: 10px 0 10px 34px; 847 + border-bottom: 1px solid @line; 848 + 849 + &:before { 850 + content: "\f00c"; 851 + font-family: FontAwesome; 852 + position: absolute; 853 + left: 0; 854 + top: 11px; 855 + color: @brand; 856 + } 857 + } 858 +} 859 + 860 +.resource-sidebar { 861 + position: sticky; 862 + top: 96px; 863 + border: 1px solid @line; 864 + border-radius: @radius; 865 + padding: 18px; 866 + background: #fff; 867 + box-shadow: @shadow-sm; 868 + 869 + h4 { 870 + margin: 0 0 10px; 871 + } 872 + 310 310 ul { 311 - margin: .45rem00;312 - padding-left: 1 .1rem;874 + margin: 0; 875 + padding-left: 18px; 313 313 color: @muted; 314 - font-size: 13px; 315 315 } 316 316 317 317 li { 318 - margin: .25rem 0; 319 - line-height: 1.45; 880 + margin: 8px 0; 320 320 } 321 321 322 - .service-link { 323 - margin-top: .45rem; 324 - font-size: 13px; 883 + a { 884 + color: @brand; 885 + font-weight: 600; 886 + } 887 +} 325 325 326 - a { 327 - color: @brand; 328 - font-weight: 700; 329 - text-decoration: none; 889 +.resource-cta { 890 + margin-top: 36px; 891 + padding: 22px; 892 + border: 1px solid fade(@brand, 20%); 893 + border-radius: @radius; 894 + background: @brand-bg; 330 330 331 - &:hover { 332 - color: @brand-strong; 333 - text-decoration: underline; 334 - } 335 - } 896 + h3 { 897 + margin-top: 0; 336 336 } 899 + 900 + p { 901 + color: @muted; 902 + } 337 337 } 338 338 339 -/* ===== Split section ===== */ 905 +@media (max-width: 900px) { 906 + .resource-layout { 907 + grid-template-columns: 1fr; 908 + } 340 340 341 -.split-section { 910 + .resource-sidebar { 911 + position: static; 912 + } 913 +} 914 +/* ========== Products / Extensions Pages ========== */ 915 + 916 +.product-index-section { 917 + padding: 52px 0 56px; 918 + 919 + h2 { 920 + margin-bottom: 10px; 921 + } 922 +} 923 + 924 +.product-card-grid { 925 + max-width: 840px; 926 + margin: 28px auto 0; 342 342 display: grid; 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; 928 + grid-template-columns: 1fr; 929 + grid-gap: 18px; 348 348 } 349 349 350 -.pa nel{932 +.product-card { 351 351 background: #fff; 352 352 border: 1px solid @line; 353 353 border-radius: @radius; 354 354 box-shadow: @shadow-sm; 355 - padding: 20px; 937 + padding: 28px; 938 + display: grid; 939 + grid-template-columns: 68px 1fr; 940 + grid-gap: 22px; 941 + align-items: start; 942 + transition: transform .18s ease, box-shadow .18s ease; 943 + 944 + &:hover { 945 + transform: translateY(-2px); 946 + box-shadow: @shadow; 947 + } 948 + 949 + .product-card-icon { 950 + width: 58px; 951 + height: 58px; 952 + border-radius: 50%; 953 + background: fade(@brand, 10%); 954 + border: 1px solid fade(@brand, 20%); 955 + color: @brand; 956 + display: flex; 957 + align-items: center; 958 + justify-content: center; 959 + font-size: 22px; 960 + flex-shrink: 0; 961 + } 962 + 963 + h3 { 964 + margin: 0 0 10px; 965 + color: @text; 966 + font-size: 23px; 967 + line-height: 1.25; 968 + font-weight: 800; 969 + } 970 + 971 + p { 972 + color: @muted; 973 + line-height: 1.6; 974 + } 975 + 976 + .card-link { 977 + margin: 0; 978 + 979 + a { 980 + font-weight: 700; 981 + } 982 + } 356 356 } 357 357 358 -.panel h3 { 359 - margin-top: 0; 985 +.product-card-kicker { 986 + margin-bottom: 10px; 987 + padding: 5px 10px; 988 + font-size: 12px; 989 + text-transform: uppercase; 990 + letter-spacing: .04em; 360 360 } 361 361 362 -/* ===== Contact / form page ===== */ 993 +.product-highlights { 994 + margin: 14px 0 20px; 995 + padding-left: 18px; 996 + color: @muted; 363 363 364 -.contact-layout { 998 + li { 999 + margin: 6px 0; 1000 + line-height: 1.45; 1001 + } 1002 +} 1003 + 1004 +/* ========== Individual Product Pages ========== */ 1005 + 1006 +.product-layout { 365 365 display: grid; 366 - grid-template-columns: minmax(0,.85fr)minmax(320px, 1.15fr);367 - gap: 3 2px;368 - max-width: 100 0px;1008 + grid-template-columns: 1.1fr .9fr; 1009 + grid-gap: 36px; 1010 + max-width: 1040px; 369 369 margin: 0 auto; 370 370 align-items: start; 371 371 } 372 372 373 -.contact-card { 1015 +.product-summary-card, 1016 +.product-info-card, 1017 +.product-gallery-panel { 374 374 background: #fff; 375 375 border: 1px solid @line; 376 376 border-radius: @radius; 377 377 box-shadow: @shadow-sm; 378 - padding: 20px; 379 379 } 380 380 381 -.contact-card h3 { 382 - margin-top: 0; 383 -} 1024 +.product-summary-card { 1025 + padding: 26px; 384 384 385 - .contact-list{386 - list-style:none;387 - padding: 0;388 - margin: 12px 0 0;1027 + h2 { 1028 + text-align: left; 1029 + margin-top: 0; 1030 + } 389 389 390 - li { 391 - margin: 8px 0; 1032 + p { 392 392 color: @muted; 1034 + line-height: 1.6; 393 393 } 394 394 395 - i { 396 - color: @brand; 397 - margin-right: 8px; 1037 + p:last-child { 1038 + margin-bottom: 0; 398 398 } 1040 +} 399 399 400 - a { 401 - color: @brand; 1042 +.product-info-card { 1043 + padding: 22px; 1044 + 1045 + h3 { 1046 + margin-top: 0; 1047 + margin-bottom: 12px; 402 402 } 1049 + 1050 + ul { 1051 + margin: 0; 1052 + padding-left: 20px; 1053 + color: @muted; 1054 + } 1055 + 1056 + li { 1057 + margin: 8px 0; 1058 + line-height: 1.45; 1059 + } 403 403 } 404 404 405 -.form-panel { 1062 +.product-feature-grid { 1063 + display: grid; 1064 + grid-template-columns: repeat(3, minmax(0, 1fr)); 1065 + grid-gap: 18px; 1066 + max-width: 1040px; 1067 + margin: 26px auto 0; 1068 +} 1069 + 1070 +.product-feature { 406 406 background: #fff; 407 407 border: 1px solid @line; 408 408 border-radius: @radius; 409 409 box-shadow: @shadow-sm; 410 410 padding: 22px; 1076 + transition: transform .18s ease, box-shadow .18s ease; 1077 + 1078 + &:hover { 1079 + transform: translateY(-2px); 1080 + box-shadow: @shadow; 1081 + } 1082 + 1083 + .feature-icon { 1084 + width: 46px; 1085 + height: 46px; 1086 + border-radius: 50%; 1087 + background: fade(@brand, 10%); 1088 + color: @brand; 1089 + display: flex; 1090 + align-items: center; 1091 + justify-content: center; 1092 + margin-bottom: 14px; 1093 + font-size: 18px; 1094 + } 1095 + 1096 + h3 { 1097 + margin: 0 0 8px; 1098 + color: @text; 1099 + font-size: 18px; 1100 + line-height: 1.25; 1101 + } 1102 + 1103 + p { 1104 + margin: 0; 1105 + color: @muted; 1106 + line-height: 1.5; 1107 + } 411 411 } 412 412 413 -.form-panel .xform dl { 414 - margin: 0; 1110 +.product-gallery-panel { 1111 + max-width: 1040px; 1112 + margin: 20px auto 0; 1113 + padding: 26px; 1114 + 1115 + h2 { 1116 + margin-top: 0; 1117 + text-align: center; 1118 + } 1119 + 1120 + .gallery-note { 1121 + max-width: 700px; 1122 + margin: 0 auto 18px; 1123 + color: @muted; 1124 + text-align: center; 1125 + line-height: 1.55; 1126 + } 415 415 } 416 416 417 -.form-panel .xform dt { 418 - margin-top: 12px; 1129 +.product-gallery-placeholder { 1130 + min-height: 260px; 1131 + padding: 28px; 1132 + border: 1px dashed fade(@brand, 40%); 1133 + border-radius: @radius; 1134 + background: fade(@brand, 5%); 1135 + color: @muted; 1136 + text-align: center; 1137 + display: flex; 1138 + align-items: center; 1139 + justify-content: center; 419 419 } 420 420 421 -.form-panel .xform dt:first-child { 422 - margin-top: 0; 1142 +.product-section-muted { 1143 + background: 1144 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 423 423 } 424 424 425 -.form-panel .xform label { 426 - color: @text; 427 - font-weight: 700; 1147 +@media (max-width: 980px) { 1148 + .product-layout, 1149 + .product-feature-grid { 1150 + grid-template-columns: 1fr; 1151 + } 1152 + 1153 + .product-summary-card h2 { 1154 + text-align: center; 1155 + } 428 428 } 429 429 430 -.form-panel .xform .xHint { 431 - display: block; 1158 +@media (max-width: 640px) { 1159 + .product-card { 1160 + grid-template-columns: 1fr; 1161 + padding: 22px; 1162 + text-align: left; 1163 + 1164 + .product-card-icon { 1165 + margin-bottom: 2px; 1166 + } 1167 + } 1168 + 1169 + .product-summary-card, 1170 + .product-info-card, 1171 + .product-feature, 1172 + .product-gallery-panel { 1173 + padding: 20px; 1174 + } 1175 +} 1176 +/* ========== Resources Index ========== */ 1177 + 1178 +.resources-index-page { 1179 + padding: 56px 0 72px; 1180 + background: @brand-bg; 1181 +} 1182 + 1183 +.resources-intro { 1184 + max-width: 820px; 1185 + margin: 0 auto 32px; 1186 + text-align: center; 1187 +} 1188 + 1189 +.resources-intro p { 432 432 color: @muted; 433 - font-size: 12px; 434 - margin-top: 2px; 1191 + font-size: 17px; 1192 + line-height: 1.7; 1193 + margin: 0; 435 435 } 436 436 437 -.form-panel .xform dd { 438 - margin-left: 0; 439 - margin-bottom: 10px; 1196 +.resources-grid { 1197 + display: grid; 1198 + grid-template-columns: repeat(2, minmax(0, 1fr)); 1199 + gap: 24px; 1200 + margin-bottom: 36px; 440 440 } 441 441 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%; 1203 +.resource-card { 1204 + display: flex; 1205 + gap: 18px; 1206 + background: #fff; 448 448 border: 1px solid @line; 449 - border-radius: 8px; 450 - padding: 8px 10px; 1208 + border-radius: @radius; 1209 + box-shadow: @shadow-sm; 1210 + padding: 24px; 451 451 } 452 452 453 -/* ===== CTA ===== */ 1213 +.resource-card-icon { 1214 + flex: 0 0 46px; 1215 + width: 46px; 1216 + height: 46px; 1217 + border-radius: 14px; 1218 + background: @brand-soft; 1219 + color: @brand-strong; 1220 + display: flex; 1221 + align-items: center; 1222 + justify-content: center; 1223 + font-size: 20px; 1224 +} 454 454 455 -.cta-section { 456 - padding: 24px 0 16px; 1226 +.resource-card-label { 1227 + color: @brand-strong; 1228 + font-size: 13px; 1229 + font-weight: 700; 1230 + text-transform: uppercase; 1231 + letter-spacing: .04em; 1232 + margin-bottom: 8px; 457 457 } 458 458 459 -.contact-inline { 460 - margin: 0; 1235 +.resource-card h2 { 1236 + font-size: 22px; 1237 + line-height: 1.25; 1238 + margin: 0 0 12px; 1239 +} 1240 + 1241 +.resource-card h2 a { 1242 + color: @text; 1243 + text-decoration: none; 1244 +} 1245 + 1246 +.resource-card h2 a:hover { 1247 + color: @brand-strong; 1248 + text-decoration: none; 1249 +} 1250 + 1251 +.resource-card p { 461 461 color: @muted; 1253 + font-size: 15px; 1254 + line-height: 1.65; 1255 + margin: 0 0 16px; 1256 +} 462 462 463 - a {464 - color: @brand;465 - font-weight: 700;466 - }1258 +.resource-card-link { 1259 + color: @brand-strong; 1260 + font-weight: 700; 1261 + text-decoration: none; 467 467 } 468 468 469 -/* ===== Compact sections ===== */ 1264 +.resource-card-link:hover { 1265 + color: @brand; 1266 + text-decoration: none; 1267 +} 470 470 471 -.compact-section { 472 - padding: 28px 0; 1269 +.resources-next { 1270 + max-width: 820px; 1271 + margin: 0 auto 32px; 1272 + text-align: center; 473 473 } 474 474 475 -. compact-sectionh2 {476 - margin-top:0;477 - margin -bottom: 14px;1275 +.resources-next h2 { 1276 + font-size: 26px; 1277 + margin: 0 0 10px; 478 478 } 479 479 480 -/* ===== Responsive ===== */ 1280 +.resources-next p { 1281 + color: @muted; 1282 + font-size: 16px; 1283 + line-height: 1.7; 1284 + margin: 0; 1285 +} 481 481 482 482 @media (max-width: 767px) { 483 - section {484 - padding: 26px 0;1288 + .resources-index-page { 1289 + padding: 36px 0 52px; 485 485 } 486 486 487 - .landing-hero { 488 - min-height: 280px; 1292 + .resources-intro { 1293 + text-align: left; 1294 + margin-bottom: 24px; 489 489 } 490 490 491 - . landing-heroh1,492 - .page-header-compacth1{493 - font-size:28px;1297 + .resources-grid { 1298 + grid-template-columns: 1fr; 1299 + gap: 18px; 494 494 } 495 495 496 - .page-lead, 497 - .landing-hero .lead { 498 - font-size: 16px; 1302 + .resource-card { 1303 + padding: 20px; 499 499 } 500 500 501 - . service {502 - f lex: 01 100%;1306 + .resource-card h2 { 1307 + font-size: 20px; 503 503 } 504 504 505 - .split-section, 506 - .contact-layout { 507 - grid-template-columns: 1fr; 508 - gap: 20px; 1310 + .resources-next { 1311 + text-align: left; 509 509 } 510 510 }
- XWiki.StyleSheetExtension[1]
-
- cache
-
... ... @@ -1,0 +1,1 @@ 1 +long - code
-
... ... @@ -1,0 +1,237 @@ 1 +/* ========== Agnease Public Top Menu ========== */ 2 + 3 +/* Keep the public menu aligned to the right on desktop */ 4 +@media (min-width: 768px) { 5 + .navbar-nav { 6 + float: right; 7 + } 8 + 9 + .site-nav { 10 + margin-left: auto; 11 + justify-content: flex-end; 12 + } 13 +} 14 + 15 +/* Top-level menu items */ 16 + 17 +.agnease-menu-item { 18 + .dropdown-toggle { 19 + color: @brand; 20 + font-weight: 600; 21 + font-size: 17px; 22 + padding-left: 16px; 23 + padding-right: 16px; 24 + background: transparent !important; 25 + background-color: transparent !important; 26 + background-image: none !important; 27 + box-shadow: none !important; 28 + } 29 + 30 + .caret { 31 + margin-left: 5px; 32 + border-top-color: @brand; 33 + border-bottom-color: @brand; 34 + } 35 + 36 + &.open > .dropdown-toggle, 37 + &.active > .dropdown-toggle, 38 + .dropdown-toggle:hover, 39 + .dropdown-toggle:focus, 40 + .dropdown-toggle:active { 41 + color: @brand-strong; 42 + background: transparent !important; 43 + background-color: transparent !important; 44 + background-image: none !important; 45 + box-shadow: none !important; 46 + outline: none; 47 + } 48 + 49 + &.open > .dropdown-toggle .caret, 50 + &.active > .dropdown-toggle .caret, 51 + .dropdown-toggle:hover .caret, 52 + .dropdown-toggle:focus .caret, 53 + .dropdown-toggle:active .caret { 54 + border-top-color: @brand-strong; 55 + border-bottom-color: @brand-strong; 56 + } 57 +} 58 + 59 +/* Remove Bootstrap/XWiki gray backgrounds from top-level nav states */ 60 + 61 +.navbar-nav > li > a, 62 +.navbar-nav > li > a:hover, 63 +.navbar-nav > li > a:focus, 64 +.navbar-nav > li > a:active, 65 +.navbar-nav > li.open > a, 66 +.navbar-nav > li.open > a:hover, 67 +.navbar-nav > li.open > a:focus, 68 +.navbar-nav > li.open > a:active, 69 +.navbar-nav > li.active > a, 70 +.navbar-nav > li.active > a:hover, 71 +.navbar-nav > li.active > a:focus, 72 +.navbar-nav > li.active > a:active, 73 +.nav .open > a, 74 +.nav .open > a:hover, 75 +.nav .open > a:focus { 76 + background: transparent !important; 77 + background-color: transparent !important; 78 + background-image: none !important; 79 + box-shadow: none !important; 80 +} 81 + 82 +/* Contact item should visually match the dropdown top-level entries */ 83 +.navbar-nav > li > a { 84 + color: @brand; 85 + font-size: 17px; 86 + font-weight: 600; 87 +} 88 + 89 +.navbar-nav > li > a:hover, 90 +.navbar-nav > li > a:focus, 91 +.navbar-nav > li > a:active { 92 + color: @brand-strong; 93 +} 94 + 95 +/* Dropdown panels */ 96 + 97 +.agnease-dropdown { 98 + min-width: 310px; 99 + padding: 10px 8px; 100 + border: 1px solid fade(@brand, 18%); 101 + border-radius: 12px; 102 + background: #fff; 103 + box-shadow: 0 12px 32px fade(@brand-strong, 12%); 104 + 105 + > li > a { 106 + display: flex; 107 + align-items: center; 108 + gap: 12px; 109 + padding: 11px 14px; 110 + border-radius: 0; 111 + color: @brand; 112 + background: transparent !important; 113 + background-color: transparent !important; 114 + background-image: none !important; 115 + white-space: nowrap; 116 + font-size: 16px; 117 + font-weight: 600; 118 + line-height: 1.3; 119 + box-shadow: none !important; 120 + 121 + i { 122 + width: 20px; 123 + flex: 0 0 20px; 124 + color: @brand; 125 + text-align: center; 126 + font-size: 15px; 127 + } 128 + 129 + &:hover, 130 + &:focus, 131 + &:active { 132 + color: @brand-strong; 133 + background: transparent !important; 134 + background-color: transparent !important; 135 + background-image: none !important; 136 + text-decoration: none; 137 + outline: none; 138 + box-shadow: none !important; 139 + 140 + i { 141 + color: @brand-strong; 142 + } 143 + } 144 + } 145 + 146 + > .active > a, 147 + > .active > a:hover, 148 + > .active > a:focus, 149 + > .active > a:active { 150 + color: @brand-strong; 151 + background: transparent !important; 152 + background-color: transparent !important; 153 + background-image: none !important; 154 + text-decoration: none; 155 + box-shadow: none !important; 156 + 157 + i { 158 + color: @brand-strong; 159 + } 160 + } 161 + 162 + .divider { 163 + margin: 8px 0; 164 + background-color: fade(@brand, 16%); 165 + } 166 +} 167 + 168 +.agnease-products-dropdown, 169 +.agnease-resources-dropdown { 170 + min-width: 290px; 171 +} 172 + 173 +/* Remove Bootstrap/XWiki gray backgrounds from dropdown entries globally */ 174 + 175 +.dropdown-menu > li > a, 176 +.dropdown-menu > li > a:hover, 177 +.dropdown-menu > li > a:focus, 178 +.dropdown-menu > li > a:active, 179 +.dropdown-menu > .active > a, 180 +.dropdown-menu > .active > a:hover, 181 +.dropdown-menu > .active > a:focus, 182 +.dropdown-menu > .active > a:active { 183 + background: transparent !important; 184 + background-color: transparent !important; 185 + background-image: none !important; 186 + box-shadow: none !important; 187 +} 188 + 189 +/* ========== Mobile Menu ========== */ 190 + 191 +@media (max-width: 767px) { 192 + .navbar-nav { 193 + float: none; 194 + } 195 + 196 + .navbar-nav > li > a, 197 + .agnease-menu-item .dropdown-toggle { 198 + font-size: 16px; 199 + padding-top: 9px; 200 + padding-bottom: 9px; 201 + } 202 + 203 + .agnease-dropdown { 204 + min-width: 0; 205 + width: 100%; 206 + padding: 4px 8px 8px 18px; 207 + border: 0; 208 + border-radius: 0; 209 + box-shadow: none; 210 + background: transparent; 211 + 212 + > li > a { 213 + padding: 8px 10px; 214 + white-space: normal; 215 + font-size: 15px; 216 + color: @brand; 217 + background: transparent !important; 218 + 219 + i { 220 + width: 18px; 221 + flex-basis: 18px; 222 + } 223 + 224 + &:hover, 225 + &:focus, 226 + &:active { 227 + color: @brand-strong; 228 + background: transparent !important; 229 + } 230 + } 231 + 232 + .divider { 233 + margin: 5px 0; 234 + background-color: fade(@brand, 16%); 235 + } 236 + } 237 +} - contentType
-
... ... @@ -1,0 +1,1 @@ 1 +LESS - name
-
... ... @@ -1,0 +1,1 @@ 1 +Menu - use
-
... ... @@ -1,0 +1,1 @@ 1 +onDemand