.ds-sm {
–red: #ff2a13;
–red-lt: #ff5040;
–red-bg: rgba(255,42,19,0.06);
–red-bd: rgba(255,42,19,0.2);
–dark: #272727;
–text: #666666;
–muted: #999999;
–border: #e0e0e0;
–divider: #eeeeee;
–bg: #f3f3f3;
–white: #ffffff;
–font: Lato, ‘Segoe UI’, Arial, sans-serif;
–shadow: 0 2px 10px rgba(0,0,0,0.06);
–trans: all 0.2s ease;
font-family: var(–font);
color: var(–text);
background: var(–white);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
width: 100%;
}
.ds-sm a, .ds-sm a:link, .ds-sm a:visited,
.ds-sm a:hover, .ds-sm a:active {
text-decoration: none !important;
color: inherit !important;
}
.ds-sm-stats {
display: flex;
gap: 1px;
background: var(–border);
border: 1px solid var(–border);
overflow: hidden;
margin-bottom: 2rem;
}
.ds-sm-stat {
flex: 1;
background: var(–white);
padding: 0.9rem 1rem;
text-align: center;
}
.ds-sm-stat-num {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(–dark);
line-height: 1;
}
.ds-sm-stat-lbl {
display: block;
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(–muted);
margin-top: 0.2rem;
}
.ds-sm-group { margin-bottom: 2.25rem; }
.ds-sm-group:last-child { margin-bottom: 0; }
.ds-sm-group-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.9rem;
padding-bottom: 0.6rem;
border-bottom: 2px solid var(–divider);
position: relative;
}
.ds-sm-group-header::after {
content: ”;
position: absolute;
bottom: -2px; left: 0;
width: 28px; height: 2px;
background: var(–red);
}
.ds-sm-group-title {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(–dark);
}
.ds-sm-group-count {
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(–red);
background: var(–red-bg);
border: 1px solid var(–red-bd);
border-radius: 20px;
padding: 0.15rem 0.5rem;
}
.ds-sm-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 0.65rem;
}
.ds-sm-card {
display: block;
background: var(–white);
border: 1px solid var(–border);
padding: 0.75rem 0.9rem;
transition: var(–trans);
position: relative;
overflow: hidden;
}
.ds-sm-card::before {
content: ”;
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(–red);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s;
}
.ds-sm-card:hover {
border-color: var(–red-bd);
box-shadow: var(–shadow);
}
.ds-sm-card:hover::before { transform: scaleX(1); }
.ds-sm-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.ds-sm-card-type {
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(–red);
}
.ds-sm-card-arrow {
color: var(–border);
font-size: 0.8rem;
transition: var(–trans);
line-height: 1;
}
.ds-sm-card:hover .ds-sm-card-arrow { color: var(–red); }
.ds-sm-card-title {
font-size: 0.8rem;
font-weight: 400;
color: var(–dark);
line-height: 1.4;
}
#ds-sm-loading {
padding: 2rem 0;
font-size: 0.82rem;
color: var(–muted);
letter-spacing: 0.04em;
}
@media (max-width: 480px) {
.ds-sm-grid { grid-template-columns: 1fr; }
.ds-sm-stats { flex-wrap: wrap; }
.ds-sm-stat { flex: 1 1 50%; }
}
Loading…
—
Total
—
Studios
—
Services
—
Articles
(function () {
var base = ‘https://www.69dropsstudio.co.uk/wp-json/wp/v2/’;
var exclude = [‘home’,’blog’,’testing-layout’,’privacy-policy’,’cookie-policy’,’opt-out’,’terms-and-conditions’,’checkout’,’my-account’,’cart’];
var GROUPS = [
{
id: ‘studios’,
label: ‘Our Studios’,
test: function(s, tp) {
return tp === ‘page’ && /^studio-[1-4]$|infinity-cove/.test(s);
}
},
{
id: ‘services’,
label: ‘Photography Services’,
test: function(s, tp) {
return tp === ‘page’ && /headshot|food-photo|still-life|creative-photo|ecommerce|product-photo/.test(s);
}
},
{
id: ‘hire’,
label: ‘Studio Hire & Booking’,
test: function(s, tp) {
return tp === ‘page’ && /photography-studio-hire|hire-rates|equipment|booking-form|catering|studio-services|book$|safety/.test(s);
}
},
{
id: ‘blog’,
label: ‘Blog Articles’,
test: function(s, tp) { return tp === ‘post’; }
},
{
id: ‘company’,
label: ‘Company’,
test: function() { return true; }
}
];
function assignGroup(item) {
for (var i = 0; i < GROUPS.length; i++) {
if (GROUPS[i].test(item.slug, item.type)) return GROUPS[i].id;
}
return 'company';
}
function decode(str) {
var el = document.createElement('span');
el.innerHTML = str;
return el.textContent || el.innerText || str;
}
function fetchAll(type) {
var items = [];
function getPage(n) {
return fetch(base + type + '?per_page=100&page=' + n + '&_fields=title,link,slug')
.then(function(r) {
var total = parseInt(r.headers.get('X-WP-TotalPages')) || 1;
return r.json().then(function(d) { return { d: d, total: total }; });
})
.then(function(res) {
res.d.forEach(function(item) {
if (exclude.indexOf(item.slug) === -1) {
items.push({
title: decode(item.title.rendered || item.slug),
url: item.link,
slug: item.slug,
type: type === 'pages' ? 'page' : 'post'
});
}
});
return n < res.total ? getPage(n + 1) : items;
});
}
return getPage(1);
}
Promise.all([fetchAll('pages'), fetchAll('posts')])
.then(function(results) {
var all = results[0].concat(results[1]);
all.sort(function(a, b) { return a.title.localeCompare(b.title); });
all.forEach(function(item) { item.group = assignGroup(item); });
var studios = 0, services = 0, blog = 0;
all.forEach(function(item) {
if (item.group === 'studios') studios++;
else if (item.group === 'services' || item.group === 'hire') services++;
else if (item.group === 'blog') blog++;
});
document.getElementById('ds-sm-total').textContent = all.length;
document.getElementById('ds-sm-studios').textContent = studios;
document.getElementById('ds-sm-services').textContent = services;
document.getElementById('ds-sm-blog').textContent = blog;
document.getElementById('ds-sm-statsbar').style.display = '';
var html = '';
GROUPS.forEach(function(group) {
var items = all.filter(function(item) { return item.group === group.id; });
if (!items.length) return;
html += '';
html += '';
html += '' + group.label + '';
html += '' + items.length + '';
html += '';
items.forEach(function(item) {
html += '';
html += '' + (item.type === 'post' ? 'Article' : 'Page') + '↗';
html += '' + item.title + '';
html += '';
});
html += '';
});
document.getElementById('ds-sm-loading').style.display = 'none';
document.getElementById('ds-sm-groups').innerHTML = html;
})
.catch(function() {
document.getElementById('ds-sm-loading').textContent = 'Unable to load — please refresh.';
});
})();
\n\n[/cs_content_seo][/cs_element_layout_div][/cs_element_section][/cs_content]