-
{{ __('Search Results') }}
+
+
Search Results
- {% if data.query.q %}
-
- {{ __('Showing Results for ') }}'{{ data.query.q }} '
-
- {% endif %}
+ {% if data.query.q %}
+
+ Showing
+ {{ data.total or data.docs|length }}
+ Results for
+ "{{ data.query.q }}"
+
+ {% endif %}
+
{% if data.docs|length > 0 %}
-
- {% for doc in data.docs %}
- {% if doc.type == 'case-studies' %}
- {% set meta = __('Case Study') %}
- {% set resultUrl = doc._url %}
- {% elif doc.type == 'team-members' %}
- {% set meta = __('Team Member') %}
- {% set resultUrl = '/meet-the-team' %}
- {% elif doc.type == 'testimonials' %}
- {% set meta = __('Testimonial') %}
- {% set resultUrl = '/cases' %}
- {% elif doc.type == 'vacancies' %}
- {% set meta = __('Job Opening') %}
- {% set resultUrl = '/careers' %}
- {% elif doc.type == 'business-partner' %}
- {% set meta = __('Partner') %}
- {% set resultUrl = '/about-us' %}
- {% else %}
- {% set meta = __('Page') %}
- {% set resultUrl = doc._url %}
- {% endif %}
+
+ {% for doc in data.docs %}
+ {% if doc.type == 'case-studies' %}
+ {% set meta = 'Case Studies' %}
+ {% set resultUrl = doc._url %}
+ {% elif doc.type == 'team-members' %}
+ {% set meta = 'Team Member' %}
+ {% set resultUrl = '/meet-the-team' %}
+ {% elif doc.type == 'testimonials' %}
+ {% set meta = 'Testimonial' %}
+ {% set resultUrl = '/cases' %}
+ {% elif doc.type == 'vacancies' %}
+ {% set meta = 'Careers' %}
+ {% set resultUrl = '/careers' %}
+ {% elif doc.type == 'business-partner' %}
+ {% set meta = 'Partner' %}
+ {% set resultUrl = '/about-us' %}
+ {% else %}
+ {% set meta = 'Page' %}
+ {% set resultUrl = doc._url %}
+ {% endif %}
-
+ →
+
+ {% endfor %}
+
{% else %}
-
- {{ __('Sorry, there are no results that match your search.') }}
-
+
+ Sorry, there are no results that match your search.
+
{% endif %}
{% if data.totalPages > 1 %}
-
- {{
- pager.render({ page: data.currentPage, total: data.totalPages, class: 'c-pagination', shown: 2 }, data.url)
- }}
-
+
{% endif %}
+
+
-{% endblock %}
+
+
+
diff --git a/website/modules/home-simplified/views/page.html b/website/modules/home-simplified/views/page.html
index e91c1196..68756635 100644
--- a/website/modules/home-simplified/views/page.html
+++ b/website/modules/home-simplified/views/page.html
@@ -21,10 +21,10 @@
-
Speed & Function is an engineering and AI consultancy. For over a decade we've partnered with purpose-driven companies to design, build, and scale software products that carry their mission further.
+
Software thatyour mission further.
- Here's what matters most while
+ For over a decade S&F has partnered with purpose-driven companies to design, build, and scale products that matter.
diff --git a/website/public/css/home-simplified/home-simplified.css b/website/public/css/home-simplified/home-simplified.css
index cdabea37..2de714f6 100644
--- a/website/public/css/home-simplified/home-simplified.css
+++ b/website/public/css/home-simplified/home-simplified.css
@@ -174,23 +174,31 @@ body {
}
.ca-hero h1 {
- font-size: 52px;
+ font-size: 120px;
font-weight: 700;
- line-height: 1.22;
- letter-spacing: -1px;
+ line-height: 0.9;
+ letter-spacing: -2.8px;
+ vertical-align: middle;
max-width: 1180px;
text-wrap: balance;
color: #141414;
+ padding-right: 6px;
animation: fade-up .8s cubic-bezier(.16,1,.3,1) .1s both;
}
+.ca-hero h1 .h1-break {
+ display: none;
+}
+
.ca-hero h1 .grad {
font-weight: 800;
- background: linear-gradient(95deg, #0173D7 0%, #00A896 45%, #00897B 80%, #F57600 100%);
+ background: linear-gradient(90deg, #0173D7 0%, #009BA6 42%, #10FFE5 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
+ padding-right: 0.05em;
+ margin-right: -0.05em;
}
.ca-cue {
@@ -202,11 +210,13 @@ body {
}
.ca-cue .cue-txt {
- font-size: 18px;
- font-weight: 600;
+ font-size: 30px;
+ font-weight: 500;
letter-spacing: 0.01em;
color: #6B6B6B;
- line-height: 1.4;
+ line-height: 1.2;
+ max-width: 1000px;
+ display: block;
}
.ca-cue .cue-txt br {
@@ -214,7 +224,7 @@ body {
}
.ca-search {
- margin-top: 44px;
+ margin-top: 80px;
display: flex;
align-items: center;
gap: 20px;
@@ -236,14 +246,14 @@ svg.sicon {
background: transparent;
outline: none;
font-family: inherit;
- font-size: 21px;
+ font-size: 30px;
font-weight: 500;
letter-spacing: -0.2px;
color: #141414;
}
.ca-search input::placeholder {
- color: #9A9A9A;
+ color: #9DA0A6;
}
.ca-search .sgo {
@@ -419,9 +429,15 @@ svg.sicon {
}
.ca-hero h1 {
- font-size: 26px;
- line-height: 1.24;
- letter-spacing: -0.4px;
+ font-size: 40px;
+ line-height: 0.9;
+ letter-spacing: -2.8px;
+ max-width: none;
+ padding-right: 4px;
+ }
+
+ .ca-hero h1 .h1-break {
+ display: block;
}
.ca-cue {
@@ -430,7 +446,10 @@ svg.sicon {
}
.ca-cue .cue-txt {
- font-size: 13px;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.2;
+ max-width: 360px;
}
.ca-cue .cue-txt br {
@@ -438,7 +457,7 @@ svg.sicon {
}
.ca-search {
- margin-top: 28px;
+ margin-top: 44px;
gap: 12px;
min-height: 44px;
padding-bottom: 14px;
@@ -450,12 +469,17 @@ svg.sicon {
min-width: 0;
}
+ .ca-search input::placeholder {
+ color: #6b6b6b;
+ }
+
.ca-search:focus-within {
border-bottom-color: #00897B;
}
.ca-search .sgo {
font-size: 16px;
+ color: #9a9a9a;
}
.ca-index {
@@ -492,15 +516,15 @@ svg.sicon {
}
.ca-row .rn {
- font-size: 10px;
+ font-size: 7px;
letter-spacing: 0.06em;
flex: 0 0 auto;
}
.ca-row .rt {
- font-size: 16px;
+ font-size: 14px;
letter-spacing: -0.2px;
- line-height: 1.3;
+ line-height: 1.2;
}
.ca-row .ra {
diff --git a/website/public/css/search-results/search-results.css b/website/public/css/search-results/search-results.css
new file mode 100644
index 00000000..b7bea012
--- /dev/null
+++ b/website/public/css/search-results/search-results.css
@@ -0,0 +1,498 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --gradient-field-calm:
+ radial-gradient(60% 50% at 30% 30%, rgba(50,155,255,0.18) 0%, transparent 70%),
+ radial-gradient(55% 45% at 70% 70%, rgba(0,168,150,0.16) 0%, transparent 70%),
+ radial-gradient(60% 55% at 85% 20%, rgba(80,228,210,0.14) 0%, transparent 75%),
+ radial-gradient(50% 45% at 15% 85%, rgba(245,118,0,0.10) 0%, transparent 75%);
+}
+
+body {
+ color: #141414;
+ font-family: Poppins, sans-serif;
+ background: #F7F9F9;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.sr {
+ min-height: 100vh;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ background: #F7F9F9;
+}
+
+.sr-topgrad-field {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 0;
+ height: 100%;
+ background: var(--gradient-field-calm);
+ mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
+ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
+}
+
+.sr-noise {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ opacity: .04;
+ mix-blend-mode: multiply;
+ z-index: 0;
+ height: 100%;
+ background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px);
+ background-size: 100% 100%;
+}
+
+.sr-wrap {
+ position: relative;
+ z-index: 1;
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 0 56px;
+ width: 100%;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.sr-top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 36px 0 0;
+ position: relative;
+}
+
+.sr-mark {
+ font-size: 14px;
+ font-weight: 900;
+ letter-spacing: 0.14em;
+ color: #141414;
+ text-decoration: none;
+}
+
+@media (max-width: 600px) {
+ .sr-mark {
+ font-size: 11px;
+ letter-spacing: 0.1em;
+ }
+}
+
+.sr-menu {
+ width: 32px;
+ height: 32px;
+ position: relative;
+ cursor: pointer;
+ border: none;
+ background: none;
+ padding: 0;
+ z-index: 20;
+}
+
+.sr-menu:hover,
+.sr-menu:focus {
+ .sr-menu__grid {
+ background: #6B6B6B;
+ }
+}
+
+.sr-menu__grid {
+ display: block;
+ position: absolute;
+ width: 6px;
+ height: 6px;
+ background-color: #4A4A4A;
+ border-radius: 1px;
+ transition: 0.4s ease;
+
+ &:nth-child(1) {
+ top: 7px;
+ left: 7px;
+ }
+
+ &:nth-child(2) {
+ top: 7px;
+ right: 7px;
+ }
+
+ &:nth-child(3) {
+ bottom: 7px;
+ left: 7px;
+ }
+
+ &:nth-child(4) {
+ bottom: 7px;
+ right: 7px;
+ }
+}
+
+.sr-menu.open {
+ .sr-menu__grid:nth-child(1) {
+ top: 13px;
+ left: 13px;
+ transform: rotate(45deg);
+ }
+
+ .sr-menu__grid:nth-child(2) {
+ top: 13px;
+ right: 13px;
+ transform: rotate(-45deg);
+ }
+
+ .sr-menu__grid:nth-child(3) {
+ bottom: 13px;
+ left: 13px;
+ transform: rotate(-45deg);
+ }
+
+ .sr-menu__grid:nth-child(4) {
+ bottom: 13px;
+ right: 13px;
+ transform: rotate(45deg);
+ }
+}
+
+.sf-nav {
+ position: absolute;
+ background-color: #F7F9F9;
+ z-index: 10;
+ transform: translateY(-200%);
+ visibility: hidden;
+ transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
+ overflow: hidden;
+ overflow-y: auto;
+ width: 100%;
+ top: 64px;
+ right: 0;
+
+ @media (min-width: 768px) {
+ top: 40px;
+ right: 30px;
+ width: 230px;
+ padding-right: 10px;
+ }
+}
+
+.sf-nav.open {
+ transform: translateY(0);
+ visibility: visible;
+
+ @media (min-width: 768px) {
+ transform: translateY(40px);
+ }
+}
+
+.sf-nav__list {
+ text-align: center;
+ list-style-type: none;
+ padding-right: 30px;
+ margin-left: 0;
+ margin-top: 0;
+ margin-bottom: 50px;
+
+ @media (min-width: 768px) {
+ text-align: right;
+ padding-right: 10px;
+ border-right: 1px solid rgba(20,20,20,0.1);
+ margin-bottom: 20px;
+ }
+}
+
+.sf-nav__list li {
+ position: relative;
+ margin-bottom: 20px;
+ display: block;
+}
+
+.sf-nav__list a {
+ position: relative;
+ font-size: 10px;
+ color: #6B6B6B;
+ font-weight: 500;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ transition: all 0.3s ease;
+
+ &.active {
+ font-weight: 700;
+ color: #4A4A4A;
+ }
+
+ &:hover,
+ &:focus {
+ font-weight: 700;
+ color: #4A4A4A;
+ }
+
+ @media (min-width: 768px) {
+ font-size: 14px;
+
+ &:hover,
+ &:focus {
+ padding-right: 10px;
+ }
+ }
+}
+
+.sr-hero {
+ padding: 88px 0 76px;
+}
+
+.sr-pulse {
+ width: 8px;
+ height: 8px;
+ background: #00A896;
+ border-radius: 4px;
+ position: relative;
+}
+
+.sr-pulse::after {
+ content: '';
+ position: absolute;
+ inset: -14px;
+ border: 1px solid #00A896;
+ border-radius: 17.5px;
+ opacity: 0.3;
+ animation: pulse-ring 2s ease-out infinite;
+}
+
+@keyframes pulse-ring {
+ 0% {
+ transform: scale(1);
+ opacity: 0.3;
+ }
+ 100% {
+ transform: scale(1.5);
+ opacity: 0;
+ }
+}
+
+.sr-hero h1 {
+ font-size: 50px;
+ font-weight: 800;
+ line-height: 1.2;
+ color: #141414;
+ margin-bottom: 24px;
+}
+
+.sr-status {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 14px;
+ font-weight: 800;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: #4A4A4A;
+}
+
+.sr-status-text {
+ color: #4A4A4A;
+}
+
+.sr-status-count,
+.sr-status-query {
+ color: #00897B;
+ text-decoration: underline;
+ text-decoration-skip-ink: none;
+ text-underline-position: from-font;
+}
+
+.sr-results {
+ margin-top: 0;
+}
+
+.sr-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 34px 0;
+ border-bottom: 1px solid rgba(20,20,20,0.14);
+ text-decoration: none;
+ position: relative;
+ gap: 28px;
+}
+
+.sr-row-content {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex: 1;
+}
+
+.sr-category {
+ font-size: 12px;
+ font-weight: 700;
+ color: #00897B;
+ letter-spacing: 0.1em;
+}
+
+.sr-title {
+ font-size: 30px;
+ font-weight: 700;
+ letter-spacing: -0.8px;
+ color: #141414;
+ transition: transform .3s cubic-bezier(.16,1,.3,1);
+}
+
+.sr-arrow {
+ font-size: 22px;
+ color: #9A9A9A;
+ display: inline-block;
+ flex: 0 0 auto;
+ transition: transform .3s cubic-bezier(.16,1,.3,1), color .3s ease;
+}
+
+.sr-row:hover .sr-title {
+ transform: translateX(18px);
+}
+
+.sr-row:hover .sr-arrow {
+ transform: translateX(10px) rotate(45deg);
+ color: #141414;
+}
+
+.sr-empty {
+ font-size: 18px;
+ color: #6B6B6B;
+ margin-top: 40px;
+}
+
+.sr-pagination {
+ margin-top: 60px;
+}
+
+.sr-foot {
+ padding: 120px 0 60px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 16px;
+}
+
+.sr-foot a {
+ color: #4A4A4A;
+ text-decoration: none;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+}
+
+.sr-foot a:hover {
+ color: #141414;
+}
+
+.sr-foot-l,
+.sr-foot-r {
+ display: flex;
+ gap: 28px;
+ align-items: center;
+}
+
+@media (max-width: 600px) {
+ .sr-wrap {
+ padding: 0 24px;
+ max-width: 440px;
+ }
+
+ .sr-top {
+ padding: 22px 0 0;
+ }
+
+ .sr-mark {
+ font-size: 11px;
+ letter-spacing: 0.1em;
+ }
+
+ .sr-hero {
+ padding: 26px 0 30px;
+ }
+
+ .sr-hero h1 {
+ font-size: 30px;
+ line-height: 1.2;
+ }
+
+ .sr-status {
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ }
+
+ .sr-row {
+ gap: 12px;
+ min-height: 44px;
+ padding: 16px 0;
+ }
+
+ .sr-category {
+ font-size: 10px;
+ letter-spacing: 0.06em;
+ flex: 0 0 auto;
+ }
+
+ .sr-title {
+ font-size: 16px;
+ letter-spacing: -0.2px;
+ line-height: 1.3;
+ }
+
+ .sr-arrow {
+ font-size: 16px;
+ flex: 0 0 auto;
+ }
+
+ .sr-row:hover .sr-title {
+ transform: none;
+ }
+
+ .sr-row:hover .sr-arrow {
+ transform: none;
+ color: #9A9A9A;
+ }
+
+ .sr-row:active .sr-arrow {
+ transform: translateX(4px);
+ }
+
+ .sr-empty {
+ font-size: 14px;
+ }
+
+ .sr-foot {
+ padding: 44px 0 32px;
+ flex-direction: column;
+ align-items: stretch;
+ justify-content: flex-start;
+ gap: 10px;
+ }
+
+ .sr-foot-l,
+ .sr-foot-r {
+ justify-content: space-between;
+ gap: 12px;
+ }
+
+ .sr-foot a {
+ font-size: 11px;
+ letter-spacing: 0.02em;
+ display: inline-flex;
+ align-items: center;
+ min-height: 24px;
+ }
+
+ .sr-foot a:active {
+ color: #141414;
+ }
+}
diff --git a/website/public/js/search-results-menu.js b/website/public/js/search-results-menu.js
new file mode 100644
index 00000000..b0e910e0
--- /dev/null
+++ b/website/public/js/search-results-menu.js
@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const menuButton = document.getElementById('nav-icon');
+ const menu = document.querySelector('[data-menu]');
+
+ if (!menuButton || !menu) return;
+
+ menuButton.addEventListener('click', () => {
+ const isOpen = menu.classList.toggle('open');
+ menuButton.classList.toggle('open');
+ menuButton.setAttribute('aria-expanded', isOpen);
+ });
+
+ const menuLinks = menu.querySelectorAll('a');
+ menuLinks.forEach((link) => {
+ link.addEventListener('click', () => {
+ menu.classList.remove('open');
+ menuButton.classList.remove('open');
+ menuButton.setAttribute('aria-expanded', 'false');
+ });
+ });
+
+ // Close menu when clicking outside
+ document.addEventListener('click', (event) => {
+ if (!menu.contains(event.target) && !menuButton.contains(event.target)) {
+ menu.classList.remove('open');
+ menuButton.classList.remove('open');
+ menuButton.setAttribute('aria-expanded', 'false');
+ }
+ });
+});