/* ==========================================================================
SERVICES PAGE
Loaded on top of style.css by services.html only, and every rule is
scoped inside #sg-services-page. That scope is deliberate: the slider
restyles headings, buttons and layout heavily, and without it those
rules would follow the visitor to every other page.
The page is a full-screen horizontal slider that advances itself, with
ordinary scrolling content underneath it.
========================================================================== */
/* WHAT IS IN HERE
STAGE AND TRACK
ARROWS AND NAV
BLOCKS BELOW
BUTTONS
CAPABILITY BAND
CLOSING CTA
SLIDE BACKGROUNDS
SLIDE CONTENT
RESPONSIVE
FOOTER TWEAK
Sections run alphabetically apart from the pinned ones.
STAGE AND TRACK is pinned first because every other section styles
something inside it. RESPONSIVE and the footer tweak are pinned last
because they override what is above them.
Rules inside a section stay in the order they were written. Sorting
those would change which rule wins when two carry the same weight. */
/* ==========================================================================
STAGE AND TRACK
The slider frame: the fixed-height stage, the scrolling track inside
it and the slides themselves. Pinned first because everything else
sits inside this.
========================================================================== */
#sg-services-page{
/* Local tokens. Scoped to this element, so they cannot leak either. */
--sgs-yellow:#ffb700;
--sgs-shell:#000;
--sgs-ink:#fff;
display:block;
background:var(--sgs-shell);
color:var(--sgs-ink);
/* nothing on this page may push the document sideways */
overflow-x:hidden;
}
#sg-services-page .sgs-stage{
position:relative;
background:#000;
}
/* A horizontally scrolling element with snap points, moved only by the
script. The visitor cannot scroll it themselves - see the note on
overflow below - so the arrows, the labels and the keyboard are the way
through it, and scrolling down the page over it does nothing. */
#sg-services-page .sgs-track{
display:flex;
/* hidden, not auto. The track still scrolls - scrollTo() from the
arrows, the labels and the keyboard works exactly as before - but
the visitor cannot scroll it themselves.
auto meant a trackpad reading a fraction of sideways movement in a
downward swipe fed it to the track, and snap then pulled the slide
back into place. Scrolling down the page over the banner stuttered
and fought back. The banner is driven by its buttons now, so
scrolling past it does nothing at all. */
overflow-x:hidden;
overflow-y:hidden;
/* No scroll snapping. Snap exists to catch a user's swipe and tidy it
onto a slide - and there are no swipes to catch any more. Worse, it
is mandatory: it rejects any scroll position that is not a snap
point, so it would undo every intermediate frame of the animation in
services.js and the banner would never move at all. */
/* No scroll-behavior:smooth either, and scrollTo's own smooth option
does nothing on a box the user cannot scroll - the browser simply
ignores it. services.js animates scrollLeft frame by frame instead,
which it has to do anyway to keep control of the timing. */
/* the scrollbar would cut across the photography */
scrollbar-width:none;
-ms-overflow-style:none;
}
#sg-services-page .sgs-track::-webkit-scrollbar{ display:none; }
#sg-services-page .sgs-track:focus-visible{
outline:2px solid var(--sgs-yellow);
outline-offset:-4px;
}
#sg-services-page .sgs-slide{
position:relative;
flex:0 0 100%;
width:100%;
/* No scroll-snap-align. The track no longer snaps - see the note on
it above. */
display:flex;
align-items:center;
/* Full height. The menu floats over the top of it rather than pushing
it down, so this fills the screen exactly.
svh rather than vh so the address bar appearing on a phone does not
leave the bottom of the slide cut off. The page scrolls past it
normally - nothing is pinned and nothing is held. */
height:100vh;
height:100svh;
overflow:hidden;
background-color:#0a0a0a;
}
/* The photograph. A separate layer rather than a background on the slide
itself, so the gradient underneath still shows if the file is missing. */
#sg-services-page .sgs-slide::before{
content:"";
position:absolute;
inset:0;
background-image:var(--sgs-img);
background-size:cover;
background-position:center;
z-index:0;
}
/* A different gradient per slide, so the page has some variety while the
photography is still being collected - and so a photo dropped on top has
something warm underneath it rather than flat black. */
/* ==========================================================================
ARROWS AND NAV
Moving between slides: the arrows, the list of slide names, the
compact counter on narrow screens and the progress bar.
========================================================================== */
#sg-services-page .sgs-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:4;
width:52px;
height:52px;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid rgba(255,255,255,.35);
background:rgba(0,0,0,.45);
color:#fff;
font-size:1.9rem;
line-height:1;
cursor:pointer;
transition:background-color .2s, border-color .2s, opacity .2s;
}
#sg-services-page .sgs-arrow span{
/* the chevron glyph sits low in its box */
margin-top:-4px;
}
#sg-services-page .sgs-arrow-prev{ left:18px; }
#sg-services-page .sgs-arrow-next{ right:18px; }
#sg-services-page .sgs-arrow:hover{
background:var(--sgs-yellow);
border-color:var(--sgs-yellow);
color:#0a0a0a;
}
#sg-services-page .sgs-arrow:focus-visible{
outline:3px solid var(--sgs-yellow);
outline-offset:3px;
}
/* At either end the arrow has nowhere to go */
#sg-services-page .sgs-arrow[disabled]{
opacity:.25;
cursor:default;
}
#sg-services-page .sgs-arrow[disabled]:hover{
background:rgba(0,0,0,.45);
border-color:rgba(255,255,255,.35);
color:#fff;
}
#sg-services-page .sgs-nav{
position:absolute;
left:0;
right:0;
bottom:52px;
z-index:4;
max-width:var(--sg-max-width, 1200px);
margin:0 auto;
padding:0 6%;
}
/* nowrap, deliberately.
The yellow marker underneath measures the active label and sits under
it, which only works while they are all on one line. A tenth slide
pushed Trailer Stage onto a second row and left the marker under
nothing. Below 1080px the compact "04 / 10" line takes over instead of
letting it wrap. */
#sg-services-page .sgs-nav-list{
display:flex;
flex-wrap:nowrap;
gap:8px 22px;
list-style:none;
margin:0 0 14px;
padding:0;
}
#sg-services-page .sgs-nav-list button{
background:none;
border:0;
padding:6px 0;
cursor:pointer;
font-family:var(--sg-font-accent);
font-size:.72rem;
font-weight:bold;
letter-spacing:.2em;
text-transform:uppercase;
color:rgba(255,255,255,.55);
transition:color .2s;
}
#sg-services-page .sgs-nav-list button:hover{ color:#fff; }
#sg-services-page .sgs-nav-list button[aria-current="true"]{
color:var(--sgs-yellow);
}
#sg-services-page .sgs-nav-list button:focus-visible{
outline:2px solid var(--sgs-yellow);
outline-offset:3px;
}
/* Shown instead of the seven labels on a narrow screen */
#sg-services-page .sgs-nav-compact{
display:none;
font-family:var(--sg-font-accent);
font-size:.76rem;
font-weight:bold;
letter-spacing:.2em;
text-transform:uppercase;
color:#fff;
margin:0 0 12px;
}
#sg-services-page .sgs-nav-compact b{
color:var(--sgs-yellow);
font-weight:bold;
}
#sg-services-page .sgs-progress{
height:2px;
background:rgba(255,255,255,.18);
border-radius:2px;
overflow:hidden;
}
#sg-services-page .sgs-progress span{
display:block;
height:100%;
width:11.111%; /* one slide of nine, until the script runs */
background:var(--sgs-yellow);
transition:width .35s ease, transform .35s ease;
}
/* ==========================================================================
BLOCKS BELOW
The ordinary scrolling content under the slider.
========================================================================== */
#sg-services-page .sgs-block{
padding:92px 6%;
background:#0a0a0a;
}
#sg-services-page .sgs-wrap{
max-width:var(--sg-max-width, 1200px);
margin:0 auto;
}
#sg-services-page .sgs-block h2{
font-family:var(--sg-font-display);
font-size:clamp(1.9rem, 5vw, 3.4rem);
line-height:1.02;
letter-spacing:-1px;
text-transform:uppercase;
color:#fff;
margin:0 0 24px;
}
#sg-services-page .sgs-kicker{
font-family:var(--sg-font-accent);
font-size:.74rem;
font-weight:bold;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--sgs-yellow);
margin:0 0 16px;
}
/* ==========================================================================
BUTTONS
The slide buttons. Their own treatment rather than the site buttons,
because they sit on photographs.
========================================================================== */
#sg-services-page .sgs-actions{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:26px;
}
#sg-services-page .sgs-btn{
display:inline-block;
padding:16px 30px;
border-radius:50px;
border:2px solid transparent;
font-family:var(--sg-font-accent);
font-size:.8rem;
font-weight:bold;
letter-spacing:.18em;
text-transform:uppercase;
text-align:center;
text-decoration:none;
cursor:pointer;
transition:background-color .2s, color .2s, border-color .2s, transform .2s;
}
#sg-services-page .sgs-btn-primary{
background:var(--sgs-yellow);
border-color:var(--sgs-yellow);
color:#0a0a0a;
}
#sg-services-page .sgs-btn-primary:hover{
background:#ffc93a;
border-color:#ffc93a;
transform:translateY(-2px);
}
#sg-services-page .sgs-btn-ghost{
background:rgba(0,0,0,.35);
border-color:rgba(255,255,255,.55);
color:#fff;
}
#sg-services-page .sgs-btn-ghost:hover{
background:#fff;
border-color:#fff;
color:#0a0a0a;
transform:translateY(-2px);
}
#sg-services-page .sgs-btn:focus-visible{
outline:3px solid var(--sgs-yellow);
outline-offset:3px;
}
/* ==========================================================================
CAPABILITY BAND
The what-we-bring band, with its script accent and the list of
capabilities.
========================================================================== */
#sg-services-page .sgs-band{
border-bottom:1px solid var(--sg-border, #222);
padding-top:76px;
padding-bottom:64px;
}
#sg-services-page .sgs-band-top{
display:grid;
/* copy | button | the handwritten mark */
grid-template-columns:minmax(0, 1fr) auto auto;
align-items:center;
gap:48px;
margin-bottom:56px;
}
#sg-services-page .sgs-band-copy h2{
margin-bottom:18px;
}
#sg-services-page .sgs-band-lead{
color:var(--sg-muted, #d0d0d0);
font-size:1rem;
line-height:1.75;
max-width:56ch;
margin:0 0 14px;
}
/* The last one carries no gap, so the block still sits flush against
whatever follows it however many paragraphs it grows to. */
#sg-services-page .sgs-band-lead:last-of-type{ margin-bottom:0; }
/* The full stops are the accent. Two short sentences with a coloured beat
between them reads as a statement; the same words in one flat colour
read as a sentence that happens to be large. */
#sg-services-page .sgs-band-copy h2 span{ color:var(--sg-gold); }
/* Outlined rather than filled, so the yellow reads as a line of type on a
dark band instead of a second solid block competing with the slider. */
#sg-services-page .sgs-btn-outline{
background:transparent;
border-color:var(--sgs-yellow);
color:var(--sgs-yellow);
white-space:nowrap;
}
#sg-services-page .sgs-btn-outline:hover{
background:var(--sgs-yellow);
color:#0a0a0a;
}
#sg-services-page .sgs-btn-outline span{
margin-left:10px;
}
/* The handwritten mark. Uses the script face already in style.css, tilted
slightly and given a hand drawn underline, so it reads as something
written on the page rather than another heading. */
#sg-services-page .sgs-script{
font-family:var(--sg-font-script);
font-size:clamp(1.7rem, 3.2vw, 2.7rem);
line-height:1;
color:#fff;
text-align:right;
margin:0;
transform:rotate(-6deg);
white-space:nowrap;
}
#sg-services-page .sgs-script::after{
content:"";
display:block;
height:2px;
margin-top:8px;
margin-left:auto;
width:76%;
background:#fff;
border-radius:2px;
transform:rotate(1.5deg);
opacity:.85;
}
/* The row of capabilities --------------------------------------------------
Six across, divided by hairlines. Icons are drawn inline in the HTML. */
#sg-services-page .sgs-caps{
display:grid;
grid-template-columns:repeat(6, 1fr);
list-style:none;
margin:0;
padding:0;
}
#sg-services-page .sgs-caps li{
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
padding:8px 14px;
text-align:center;
border-left:1px solid var(--sg-border, #222);
}
#sg-services-page .sgs-caps li:first-child{
border-left:0;
}
#sg-services-page .sgs-cap-icon{
width:46px;
height:46px;
flex:0 0 auto;
fill:none;
stroke:#fff;
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round;
transition:stroke .2s, transform .2s;
}
#sg-services-page .sgs-caps span{
font-family:var(--sg-font-accent);
font-size:.72rem;
font-weight:bold;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--sg-muted, #d0d0d0);
}
#sg-services-page .sgs-caps li:hover .sgs-cap-icon{
stroke:var(--sgs-yellow);
transform:translateY(-3px);
}
/* ==========================================================================
CLOSING CTA
The area-served line and the closing call to action.
========================================================================== */
/* THE CLOSING CALL TO ACTION
It was centred, on a flat gradient, with the copy and the button stacked
down the middle of a lot of empty black. It read as a full stop rather
than an invitation.
Now it is a band: the ask on the left over a photograph, and the three
things somebody wants to know before they get in touch on the right. */
#sg-services-page .sgs-cta{
position:relative;
overflow:hidden;
text-align:left;
border-top:1px solid var(--sg-border, #222);
padding-top:52px;
padding-bottom:52px;
}
/* The photograph, behind everything. A background rather than an ![]()
,
so a file that is not there yet leaves the gradient showing instead of
a broken image. */
#sg-services-page .sgs-cta-media{
position:absolute;
inset:0;
--sgs-cta-img:url('images/services/cta.webp');
background:
linear-gradient(90deg, rgba(8,8,8,.95) 26%, rgba(8,8,8,.55) 70%, rgba(8,8,8,.8) 100%),
var(--sgs-cta-img, none),
radial-gradient(90% 120% at 20% 0%, #2a1403 0%, #0a0a0a 58%);
background-size:cover;
background-position:center;
}
#sg-services-page .sgs-cta-inner{
position:relative;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:34px 48px;
}
#sg-services-page .sgs-cta-copy{
flex:1 1 420px;
max-width:560px;
}
/* Smaller than the headings above it, and deliberately. At the page's
normal h2 size this one ran to two lines and the band grew to 424px -
a closing invitation should be a band you pass through, not another
full screen. */
#sg-services-page .sgs-cta h2{
text-align:left;
font-size:clamp(1.5rem, 3vw, 2rem);
margin-bottom:10px;
}
/* One word in the accent. The heading is a question, and colouring the
noun it turns on makes it read as one rather than as a banner. */
#sg-services-page .sgs-cta h2 span{ color:var(--sg-orange, #ff6b00); }
#sg-services-page .sgs-cta-lead{
color:var(--sg-muted, #d0d0d0);
font-size:1rem;
line-height:1.7;
max-width:50ch;
margin:0 0 24px;
}
/* The three assurances. A column on a wide screen, beside the ask rather
than under it, so the band stays one line of thought. */
#sg-services-page .sgs-assurances{
display:grid;
gap:16px;
list-style:none;
margin:0;
padding:0;
flex:0 1 auto;
}
#sg-services-page .sgs-assurances li{
display:flex;
align-items:center;
gap:11px;
color:var(--sg-muted, #d0d0d0);
font-family:var(--sg-font-accent);
font-size:.72rem;
font-weight:bold;
letter-spacing:1.4px;
text-transform:uppercase;
white-space:nowrap;
}
#sg-services-page .sgs-assurances svg{
width:22px;
height:22px;
flex:0 0 auto;
fill:none;
stroke:var(--sgs-yellow);
stroke-width:1.8;
stroke-linejoin:round;
stroke-linecap:round;
}
#sg-services-page .sgs-cta .sgs-btn-primary{
display:inline-flex;
align-items:center;
gap:10px;
}
/* ==========================================================================
SLIDE BACKGROUNDS
One photograph per slide, plus the scrim that keeps the type readable
over it.
========================================================================== */
#sg-services-page .sgs-intro { background-image:linear-gradient(135deg, #2a1403 0%, #0a0a0a 62%); }
#sg-services-page .sgs-weddings { background-image:linear-gradient(135deg, #241528 0%, #0a0a0a 62%); }
#sg-services-page .sgs-corporate{ background-image:linear-gradient(135deg, #0f2a18 0%, #0a0a0a 62%); }
#sg-services-page .sgs-bands { background-image:linear-gradient(135deg, #2a0d14 0%, #0a0a0a 62%); }
#sg-services-page .sgs-dj { background-image:linear-gradient(135deg, #1c1c22 0%, #0a0a0a 62%); }
#sg-services-page .sgs-functions{ background-image:linear-gradient(135deg, #2d1030 0%, #0a0a0a 62%); }
#sg-services-page .sgs-community{ background-image:linear-gradient(135deg, #2b1f08 0%, #0a0a0a 62%); }
#sg-services-page .sgs-festivals{ background-image:linear-gradient(135deg, #3a1d02 0%, #0a0a0a 62%); }
#sg-services-page .sgs-sporting { background-image:linear-gradient(135deg, #06231f 0%, #0a0a0a 62%); }
#sg-services-page .sgs-screens { background-image:linear-gradient(135deg, #0d2033 0%, #0a0a0a 62%); }
#sg-services-page .sgs-trailer { background-image:linear-gradient(135deg, #2b2205 0%, #0a0a0a 62%); }
#sg-services-page .sgs-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}
/* Just enough wash to hold the words, and no more - the photography is
what sells this page, so most of the frame is left alone.
It only really darkens the left third, where the text sits. Across the
middle and right the picture is close to untouched. The two faint bands
top and bottom are only there so the menu and the slide labels stay
legible over a bright photo. */
#sg-services-page .sgs-scrim{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(95deg,
rgba(0,0,0,.68) 0%,
rgba(0,0,0,.44) 34%,
rgba(0,0,0,.10) 64%,
rgba(0,0,0,.06) 100%),
linear-gradient(180deg,
rgba(0,0,0,.34) 0%,
transparent 20%,
transparent 66%,
rgba(0,0,0,.58) 100%);
}
/* ==========================================================================
SLIDE CONTENT
The wording on a slide: eyebrow, title, description and place line.
========================================================================== */
#sg-services-page .sgs-content{
position:relative;
z-index:2;
width:100%;
max-width:var(--sg-max-width, 1200px);
margin:0 auto;
padding:0 6%;
/* clear of the menu at the top and the slide nav at the bottom */
padding-top:calc(var(--sg-nav-height, 88px) + 24px);
padding-bottom:190px;
}
#sg-services-page .sgs-eyebrow{
font-family:var(--sg-font-accent);
font-size:clamp(.72rem, 1.6vw, .9rem);
font-weight:bold;
letter-spacing:.42em;
text-transform:uppercase;
color:var(--sgs-yellow);
margin-bottom:14px;
}
#sg-services-page .sgs-title{
font-family:var(--sg-font-display);
font-size:clamp(2.6rem, 8.4vw, 6.6rem);
line-height:.92;
letter-spacing:-2px;
text-transform:uppercase;
color:#fff;
margin:0 0 22px;
text-shadow:0 6px 40px rgba(0,0,0,.6);
/* Wide enough for the longest single word on any slide.
ENTERTAINMENT is 13 characters and was breaking across two lines at
14ch, which put a lone T underneath it. Every title sets its own
line breaks with
, so this only ever acts as a safety net. */
max-width:16ch;
overflow-wrap:normal;
word-break:normal;
}
/* The smaller lines carry their own shadow rather than leaning on the
scrim. That is what lets the wash stay light: the text holds up on its
own over a bright patch of photo, instead of the whole frame being
darkened to protect it.
The sentence of description that used to sit above this line is gone -
a heading, a sentence, a list and a button was four things competing on
one photograph, and the list says what the sentence said in a quarter
of the space. */
#sg-services-page .sgs-line{
font-family:var(--sg-font-accent);
font-size:clamp(.72rem, 1.6vw, .86rem);
letter-spacing:.2em;
text-transform:uppercase;
color:#fff;
margin-bottom:10px;
text-shadow:0 2px 12px rgba(0,0,0,.9);
}
#sg-services-page .sgs-place{
font-family:var(--sg-font-accent);
font-size:clamp(.68rem, 1.5vw, .8rem);
letter-spacing:.28em;
text-transform:uppercase;
color:#c8c8c8;
margin-bottom:30px;
text-shadow:0 2px 12px rgba(0,0,0,.9);
}
#sg-services-page .sgs-eyebrow{
text-shadow:0 2px 12px rgba(0,0,0,.9);
}
/* ==========================================================================
TRUSTED BY
A pale band, deliberately. Partner logos are drawn to sit on white and
most arrive as dark marks on a transparent background - on the black
page they would simply disappear.
========================================================================== */
#sg-services-page .sgs-trusted{
background:#fff;
color:#111;
padding-top:64px;
padding-bottom:56px;
}
#sg-services-page .sgs-trusted h2{
color:#111;
margin-bottom:12px;
}
#sg-services-page .sgs-kicker-dark{
color:#d95b00; /* the site orange darkened enough to read on white */
}
#sg-services-page .sgs-trusted-lead{
color:#444;
font-size:1rem;
line-height:1.7;
max-width:58ch;
margin:0 0 40px;
}
/* The strip. auto-fit rather than a fixed seven, so the row stays even
whether there are four logos or nine.
No rules between them any more. Seven marks of different shapes, each
boxed off, read as a table of contents rather than a row of partners -
and the dividers drew more attention than the logos did. Space does the
separating instead, which is also what lets each one breathe. */
#sg-services-page .sgs-logos{
display:grid;
/* 120px, not 140. auto-fit fits as many columns as the minimum
allows, and at 140 with a 34px gap the seventh logo did not make it
onto the row - seven marks became six and a lonely one underneath. */
grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
gap:18px 24px;
align-items:center;
list-style:none;
margin:0;
padding:0;
}
#sg-services-page .sgs-logo{
display:grid;
place-items:center;
padding:6px;
}
/* THE BOX EVERY LOGO IS DRAWN IN
Fixed on both edges and object-fit:contain, so a mark of any shape or
size lands inside the same space without stretching and without pushing
the row about. A tall crest and a long wordmark both sit correctly.
It also means a logo that arrives far too large is still drawn at the
right size - it just costs the visitor the whole file to do it, which is
what tools/fit-logo.ps1 is for. */
/* max-width:100%, not a fixed 180px.
The columns are 1fr and can end up narrower than 180 once seven of them
share the row, and a wide mark then drew past its own cell and over the
one beside it - the council logo was sitting on top of Grand View.
Tying it to the cell means it can never do that, whatever the width. */
#sg-services-page .sgs-logo img{
display:block;
max-width:100%;
max-height:64px;
width:auto;
height:auto;
object-fit:contain;
}
/* The fallback name, hidden while there is a picture. The onerror in the
markup removes the image and adds .is-missing, so a logo that has not
been supplied yet reads as a name rather than a broken image icon. */
#sg-services-page .sgs-logo span{ display:none; }
#sg-services-page .sgs-logo.is-missing span{
display:block;
text-align:center;
color:#666;
font-family:var(--sg-font-accent);
font-size:.68rem;
font-weight:bold;
letter-spacing:1.2px;
text-transform:uppercase;
line-height:1.5;
}
/* ==========================================================================
OUR REGION
The truck band. A photograph with the words over the left of it and the
places we travel to across the bottom.
========================================================================== */
#sg-services-page .sgs-region{
position:relative;
overflow:hidden;
padding-top:0;
padding-bottom:0;
border-top:1px solid var(--sg-border, #222);
}
/* THE SPLIT
Where the cursor is, as a percentage across the band. 50% until the
mouse arrives, and 50% is where it stays on a touch screen or for
anyone who has asked for less motion - the band reads perfectly well
cut down the middle. */
#sg-services-page .sgs-region{
--sgs-split:50%;
}
#sg-services-page .sgs-region-media{
position:absolute;
inset:0;
overflow:hidden;
}
#sg-services-page .sgs-region-half{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
}
/* The outback fills the whole width. The coast is laid over it and clipped
to the split, so the cursor wipes between the two rather than fading
one into the other - a hard edge reads as two places, a fade reads as
a mistake. */
#sg-services-page .sgs-region-half.is-outback{
background-image:
var(--sgs-outback, none),
linear-gradient(120deg, #3a2109, #0a0a0a 70%);
}
#sg-services-page .sgs-region-half.is-coast{
background-image:
var(--sgs-coast, none),
linear-gradient(120deg, #12202e, #0a0a0a 70%);
clip-path:inset(0 calc(100% - var(--sgs-split)) 0 0);
}
/* The seam. A hairline rather than a bar - it marks the join without
turning into a piece of furniture. */
#sg-services-page .sgs-region-seam{
position:absolute;
top:0;
bottom:0;
left:var(--sgs-split);
width:1px;
background:rgba(255,255,255,.45);
transform:translateX(-0.5px);
}
/* THE OVERLAY
Above both halves, not on them, so the words are equally readable
whichever picture happens to be underneath at the time. Heavier on the
left where the headline sits, and it keeps a floor across the whole
band so the right-hand label stays legible over bright sky. */
#sg-services-page .sgs-region-media::after{
content:"";
position:absolute;
inset:0;
/* Two gradients stacked, so they compound - .55 over .85 is not .85,
it is .93. The first pass was dark enough to lose the picture
entirely, which defeats putting one there.
Heavy only where the headline actually sits, light across the
middle where the photograph is the point, and a low wash along the
bottom so the two labels stay readable over bright sand. */
background:
linear-gradient(90deg, rgba(5,5,5,.88) 12%, rgba(5,5,5,.34) 52%, rgba(5,5,5,.28) 100%),
linear-gradient(to top, rgba(5,5,5,.62), rgba(5,5,5,0) 46%);
}
#sg-services-page .sgs-region{
--sgs-coast:url('images/services/region-coast.jpg');
--sgs-outback:url('images/services/region-outback.jpg');
}
#sg-services-page .sgs-region-inner{
position:relative;
padding-top:84px;
padding-bottom:64px;
}
#sg-services-page .sgs-region h2{
margin-bottom:16px;
}
#sg-services-page .sgs-region-lead{
color:var(--sg-muted, #d0d0d0);
font-size:1rem;
line-height:1.75;
max-width:44ch;
margin:0;
}
/* The places, across the foot of the picture. A flex row with dots between
rather than a list with bullets, so it reads as one line of travel
rather than eight separate facts. */
#sg-services-page .sgs-places{
position:relative;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:10px 24px;
list-style:none;
margin:0;
/* No side padding of its own. The section around it already carries
6%, and adding a second helping pushed this row in past the
headline above it - visibly out of line with everything else in
the band. */
padding:0 0 44px;
max-width:var(--sg-max-width, 1200px);
margin-left:auto;
margin-right:auto;
font-family:var(--sg-font-accent);
font-size:.72rem;
font-weight:bold;
letter-spacing:.18em;
text-transform:uppercase;
color:#fff;
}
/* One label per half, pushed to opposite ends so each sits under the
picture it names. No dots between them any more - there are two things
now, not a list of eight. */
#sg-services-page .sgs-places li{
display:flex;
align-items:center;
gap:10px;
}
#sg-services-page .sgs-places li::before{
content:'';
width:5px;
height:5px;
flex:0 0 auto;
border-radius:50%;
background:var(--sgs-yellow);
}
/* ==========================================================================
RESPONSIVE
Pinned last - these override everything above them.
========================================================================== */
/* Tablet */
@media (max-width:900px){
#sg-services-page .sgs-content{
padding-bottom:200px;
}
#sg-services-page .sgs-title{
max-width:none;
}
#sg-services-page .sgs-block{
padding:70px 6%;
}
/* Six across is too tight once the band narrows, so it becomes two
rows of three and the hairlines move with them. */
#sg-services-page .sgs-caps{
grid-template-columns:repeat(3, 1fr);
row-gap:34px;
}
#sg-services-page .sgs-caps li:nth-child(3n+1){
border-left:0;
}
/* The pitch, the button and the handwritten mark stop sitting in a
row - there is not the width for all three. */
#sg-services-page .sgs-band-top{
grid-template-columns:1fr;
gap:26px;
margin-bottom:44px;
}
#sg-services-page .sgs-band-cta{
justify-self:start;
}
#sg-services-page .sgs-script{
display:none;
}
}
/* TEN LABELS NEED THE ROOM
They fit one row down to about 1080px and no further. Below that the
compact "04 / 10" line takes over, which is what it is for - a row that
wrapped, or one scrolled sideways, is worse than a counter. The arrows
stay either way.
This used to be 900px, which was right for eight labels and half a
slide too optimistic for ten. */
@media (max-width:1080px){
#sg-services-page .sgs-nav-list{ display:none; }
#sg-services-page .sgs-nav-compact{ display:block; }
}
/* Phone */
@media (max-width:700px){
/* the compact line is already in charge from 900px down */
#sg-services-page .sgs-nav{
bottom:44px;
}
/* Arrows are dropped on touch screens - swiping is the natural gesture
and the arrows sit right on top of the photography. */
#sg-services-page .sgs-arrow{ display:none; }
/* The scrim leans to the bottom rather than the left, because the text
now sits over the bottom of the picture rather than beside it. The
top two thirds of the photo are left nearly clear. */
#sg-services-page .sgs-scrim{
background:linear-gradient(
180deg,
rgba(0,0,0,.5) 0%,
rgba(0,0,0,.1) 24%,
rgba(0,0,0,.34) 56%,
rgba(0,0,0,.84) 100%
);
}
#sg-services-page .sgs-content{
padding:calc(var(--sg-nav-height, 88px) + 18px) 7% 170px;
/* words sit low, so a face or a stage in the photo is not covered */
align-self:flex-end;
}
#sg-services-page .sgs-slide{
align-items:flex-end;
}
/* Sized so the longest single word on the page - ENTERTAINMENT, at 13
characters - still fits across a 375px screen. Any larger and it
runs off the edge and gets clipped by the slide. */
#sg-services-page .sgs-title{
font-size:clamp(1.9rem, 8.4vw, 3.2rem);
letter-spacing:-1px;
margin-bottom:16px;
}
/* full width, easy to hit with a thumb */
#sg-services-page .sgs-actions{
flex-direction:column;
gap:10px;
}
#sg-services-page .sgs-actions .sgs-btn,
#sg-services-page .sgs-content > .sgs-btn{
display:block;
width:100%;
padding:17px 20px;
}
#sg-services-page .sgs-block{
padding:58px 7%;
}
/* Two rows of three would leave the labels cramped on a phone, so it
goes to two across - the icons stay big enough to read. */
#sg-services-page .sgs-caps{
grid-template-columns:repeat(2, 1fr);
row-gap:30px;
}
#sg-services-page .sgs-caps li{
padding:6px 8px;
gap:12px;
}
/* the hairline now belongs to every second one */
#sg-services-page .sgs-caps li:nth-child(3n+1){
border-left:1px solid var(--sg-border, #222);
}
#sg-services-page .sgs-caps li:nth-child(odd){
border-left:0;
}
#sg-services-page .sgs-cap-icon{
width:38px;
height:38px;
}
#sg-services-page .sgs-band-cta{
width:100%;
text-align:center;
}
#sg-services-page .sgs-cta{
padding-top:52px;
padding-bottom:52px;
}
/* The assurances drop under the ask and lie flat, rather than keeping
a tall thin column beside it that would squeeze the heading. */
#sg-services-page .sgs-assurances{
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:12px 22px;
width:100%;
}
}
@media (prefers-reduced-motion:reduce){
#sg-services-page .sgs-track{
scroll-behavior:auto;
}
#sg-services-page .sgs-btn,
#sg-services-page .sgs-arrow,
#sg-services-page .sgs-progress span{
transition:none;
}
#sg-services-page .sgs-btn:hover{
transform:none;
}
}
/* ==========================================================================
ANNUAL EVENTS ROW
The band at the foot of the page: a headline on the left, four words on
the right, and a row of tall cards underneath that pages four at a time.
Not a grid of eleven. The point of the row is that it is a row - a glance
says "these people have us back every year" without eleven tiles
competing with the events we are actually selling further up.
HOW IT MOVES WITHOUT MEASURING ANYTHING
The track is a grid of columns sized against the window it sits in, so
the track itself is exactly one window wide however many cards hang out
of it. That makes translateX(-100%) exactly one page, and it means the
script never reads a width - it sets a number and the browser does the
arithmetic. Which is why it is right before the first paint, and why
nothing breaks when a card is added or removed.
--sgs-an-per is the only thing the media queries at the bottom change,
and the script reads it back to know how many pages there are.
========================================================================== */
#sg-services-page .sgs-annual{
--sgs-an-per:4;
--sgs-an-gap:20px;
padding:clamp(60px, 9vw, 110px) 0 clamp(50px, 7vw, 90px);
/* Its own ground, a shade off the page, so the band reads as a place
the page arrives at rather than more of the same scroll. */
background:linear-gradient(180deg, #0d0d0d 0%, #0a0a0a 100%);
border-top:1px solid var(--sg-border);
}
#sg-services-page .sgs-annual-inner{
max-width:var(--sg-max-width);
margin:auto;
padding:0 20px;
}
/* --------------------------------------------------------------------------
HEAD
Headline left, the four words and the arrows right. They stack below
900px, where there is no room for two columns and the headline should
have the width.
-------------------------------------------------------------------------- */
#sg-services-page .sgs-annual-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:40px;
margin-bottom:clamp(28px, 4vw, 44px);
}
#sg-services-page .sgs-an-eyebrow{
color:var(--sg-orange);
font-size:.7rem;
font-weight:bold;
letter-spacing:.22em;
text-transform:uppercase;
margin-bottom:14px;
}
#sg-services-page .sgs-annual-intro h2{
font-family:var(--sg-font-display);
font-size:clamp(2.4rem, 6vw, 4.4rem);
line-height:.92;
letter-spacing:-1.5px;
text-transform:uppercase;
text-align:left;
margin:0;
}
/* The second line in gold. One word, so it can carry the colour without
the headline turning into a paint chart. */
#sg-services-page .sgs-annual-intro h2 span{
color:var(--sg-gold);
}
#sg-services-page .sgs-an-lead{
max-width:46ch;
margin-top:18px;
color:var(--sg-dim);
line-height:1.6;
}
#sg-services-page .sgs-annual-side{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:26px;
flex-shrink:0;
}
/* Four words under a short rule. aria-hidden in the markup: it is a mood,
not information, and read aloud between the headline and the cards it
would only be four nouns in the way. */
#sg-services-page .sgs-an-words{
list-style:none;
margin:0;
padding:14px 0 0;
border-top:2px solid var(--sg-orange);
min-width:150px;
color:var(--sg-dim);
font-size:.68rem;
line-height:2.05;
letter-spacing:.18em;
text-transform:uppercase;
}
#sg-services-page .sgs-an-arrows{
display:flex;
gap:10px;
}
#sg-services-page .sgs-an-arrow{
width:46px;
height:46px;
border-radius:50%;
border:1px solid var(--sg-border);
background:var(--sg-panel);
color:#fff;
font-size:1.5rem;
line-height:1;
cursor:pointer;
transition:background-color .2s ease, border-color .2s ease,
color .2s ease, opacity .2s ease;
}
#sg-services-page .sgs-an-arrow:hover:not(:disabled){
background:var(--sg-orange);
border-color:var(--sg-orange);
color:#0a0a0a;
}
/* Dimmed rather than hidden at the ends. A control that disappears makes
the row jump, and it stops telling you the row has ends. */
#sg-services-page .sgs-an-arrow:disabled{
opacity:.28;
cursor:default;
}
/* --------------------------------------------------------------------------
THE ROW
-------------------------------------------------------------------------- */
#sg-services-page .sgs-an-view{
overflow:hidden;
/* The cards lift on hover, so the window needs room above them or the
lift is clipped. Pulled back in underneath so the row still lines up
with the foot of the band. */
padding:10px 0;
margin:-10px 0;
}
#sg-services-page .sgs-an-track{
--sgs-an-page:0;
display:grid;
grid-auto-flow:column;
grid-auto-columns:calc(
(100% - (var(--sgs-an-per) - 1) * var(--sgs-an-gap)) / var(--sgs-an-per)
);
gap:var(--sgs-an-gap);
list-style:none;
margin:0;
padding:0;
transform:translateX(calc(var(--sgs-an-page) * (-100% - var(--sgs-an-gap))));
transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* --------------------------------------------------------------------------
A CARD
The photograph is the card. Everything else sits on top of it at the
bottom, over a gradient that exists only to keep the type readable -
which is why the picture still reads as a picture rather than as a
header for a box of text.
Nothing here links anywhere: these are other people's events, not ours
to send anybody to, so the card is not a button and does not pretend to
be one.
-------------------------------------------------------------------------- */
#sg-services-page .sgs-an-card{
position:relative;
aspect-ratio:3 / 4;
overflow:hidden;
border:1px solid var(--sg-border);
border-radius:16px;
background:#141414;
transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
#sg-services-page .sgs-an-card:hover{
transform:translateY(-5px);
border-color:#3a3a3a;
box-shadow:0 22px 46px rgba(0,0,0,.55);
}
#sg-services-page .sgs-an-art{
position:absolute;
inset:0;
background-image:var(--sgs-an-art);
background-size:cover;
background-position:center;
filter:brightness(.82) saturate(.9);
transition:filter .3s ease, transform .6s ease;
}
#sg-services-page .sgs-an-card:hover .sgs-an-art{
filter:brightness(1) saturate(1);
transform:scale(1.05);
}
/* The gradient is on the body rather than a layer of its own, so it can
never end up stacked over the type it is there to support. */
#sg-services-page .sgs-an-body{
position:absolute;
inset:auto 0 0 0;
padding:20px 18px 18px;
background:linear-gradient(
to top,
rgba(0,0,0,.94) 0%,
rgba(0,0,0,.82) 42%,
rgba(0,0,0,.35) 74%,
rgba(0,0,0,0) 100%
);
}
#sg-services-page .sgs-an-body h3{
font-family:var(--sg-font-display);
font-size:1.1rem;
line-height:1.15;
letter-spacing:-.3px;
text-transform:uppercase;
margin:0 0 8px;
}
#sg-services-page .sgs-an-date{
color:var(--sg-gold);
font-size:.74rem;
font-weight:bold;
letter-spacing:.12em;
text-transform:uppercase;
margin:0;
}
/* The pin is drawn here rather than sat in the markup eleven times over.
A mask rather than an image, so it takes its colour from the text and
changes with it. */
#sg-services-page .sgs-an-place{
display:flex;
align-items:center;
gap:6px;
margin:6px 0 0;
color:var(--sg-dim);
font-size:.7rem;
letter-spacing:.1em;
text-transform:uppercase;
--ev-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
#sg-services-page .sgs-an-place::before{
content:"";
width:10px;
height:12px;
flex-shrink:0;
background-color:currentColor;
-webkit-mask:var(--ev-pin) center / contain no-repeat;
mask:var(--ev-pin) center / contain no-repeat;
}
/* What we supplied. Small, quiet, and allowed to wrap onto a second line -
the cards are all the same height, so a card with four tags and a card
with none still line up. */
#sg-services-page .sgs-an-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
list-style:none;
margin:14px 0 0;
padding:0;
}
#sg-services-page .sgs-an-tags li{
padding:5px 10px;
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
background:rgba(255,255,255,.07);
color:#ddd;
font-size:.6rem;
letter-spacing:.1em;
text-transform:uppercase;
white-space:nowrap;
}
/* --------------------------------------------------------------------------
FOOT
One dash per page, and the same thing in words for anybody who cannot
see which dash is lit.
-------------------------------------------------------------------------- */
#sg-services-page .sgs-an-foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-top:26px;
}
#sg-services-page .sgs-an-dots{
display:flex;
gap:8px;
}
#sg-services-page .sgs-an-dots button{
width:30px;
height:3px;
padding:0;
border:0;
border-radius:2px;
background:#333;
cursor:pointer;
transition:background-color .25s ease, width .25s ease;
}
#sg-services-page .sgs-an-dots button[aria-selected="true"]{
width:44px;
background:var(--sg-gold);
}
#sg-services-page .sgs-an-count{
color:var(--sg-dim);
font-size:.72rem;
letter-spacing:.14em;
text-transform:uppercase;
margin:0;
}
/* --------------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width:1100px){
#sg-services-page .sgs-annual{ --sgs-an-per:3; }
}
@media (max-width:900px){
#sg-services-page .sgs-annual-head{
flex-direction:column;
gap:26px;
}
/* The words have done their job on a wide screen. On a narrow one they
are four lines between the headline and the cards, so they go and
the arrows come back to the left. */
#sg-services-page .sgs-an-words{ display:none; }
#sg-services-page .sgs-annual-side{
align-items:flex-start;
width:100%;
}
}
@media (max-width:820px){
#sg-services-page .sgs-annual{ --sgs-an-per:2; }
}
@media (max-width:560px){
#sg-services-page .sgs-annual{ --sgs-an-per:1; --sgs-an-gap:16px; }
/* One card across is a lot of height for a 3:4 picture, so it squares
off rather than filling the screen. */
#sg-services-page .sgs-an-card{ aspect-ratio:4 / 3; }
}
@media (prefers-reduced-motion:reduce){
#sg-services-page .sgs-an-track,
#sg-services-page .sgs-an-card,
#sg-services-page .sgs-an-art,
#sg-services-page .sgs-an-dots button{ transition:none; }
#sg-services-page .sgs-an-card:hover{ transform:none; }
#sg-services-page .sgs-an-card:hover .sgs-an-art{ transform:none; }
}