/*
* index.html-only styles (the hero). Loaded in addition to site.css,
* only on the homepage.
*/
/* Centre the hero in the available space, but never clip it if the
viewport is short — flex centring alone would cut off the top. */
#contentArea {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
#contentArea > .case-header { padding: 72px 56px; }
/* Centring the hero only makes sense while there is spare height to centre
it in. On phones and portrait tablets it just pushes the name down the
screen, so start from the top instead. */
@media (max-width: 860px) {
#contentArea { justify-content: flex-start; }
#contentArea > .case-header { padding: 40px 24px 48px; }
}
/* ---- Homepage sidebar ----
The hero already carries the name, the role and all four case studies,
so the nav cards would just restate the tiles. They stay on every other
page, where there is no hero doing that job. */
.sidebar .sidebar-section.work { display: none; }
.sidebar .sidebar-section .heading { margin-bottom: 10px; }
/* Narrower than the 320px used elsewhere, but only while the sidebar is
actually a sidebar. Below 861px it becomes a full-width bar, and an
unscoped width here would override that and leave the bar stranded at
268px. */
@media (min-width: 861px) {
.sidebar { width: 268px; }
}
/* ---- Headline ---- */
.hero-head {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(36px, 5.4vw, 60px);
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0 0 22px;
}
.hero-head .wave {
font-size: 0.62em;
vertical-align: 0.12em;
margin-right: 0.12em;
}
.hero-role { color: var(--accent); }
/* No max-width: the sub sits directly above the four tiles, which run the
full width of the header. Capping the measure made it wrap short and read
as a ragged block floating over a full-width row. */
.hero-sub {
font-size: 18px;
line-height: 1.5;
color: var(--muted);
margin: 0;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
/* ---- Inline company pill, with a preview card on hover/focus ----
The pill is a real link to the case study, so it's keyboard-reachable
and the card is a preview rather than the only way to reach anything. */
.co-pill {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 2px 11px 2px 6px;
border: 1px solid var(--line);
border-radius: 100px;
background: var(--card);
color: var(--ink);
font-size: 0.92em;
font-weight: 600;
text-decoration: none;
vertical-align: baseline;
transition: border-color 0.16s ease;
}
.co-pill:hover { border-color: var(--accent); }
.co-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.co-pill .co-mark {
width: 20px; height: 20px;
border-radius: 5px;
border: 1px solid var(--line);
background: #FFFFFF;
padding: 2px;
flex-shrink: 0;
}
.co-pill .co-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.co-card {
position: absolute;
top: calc(100% + 12px);
left: 50%;
width: 296px;
transform: translate(-50%, -6px);
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px;
box-shadow: 0 16px 36px -10px rgba(26, 25, 23, 0.20), 0 2px 6px rgba(26, 25, 23, 0.06);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 20;
}
.co-pill:hover .co-card,
.co-pill:focus-visible .co-card {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
/* Small arrow tying the card back to the pill it belongs to. */
.co-card::before {
content: "";
position: absolute;
top: -5px;
left: 50%;
width: 9px;
height: 9px;
margin-left: -4.5px;
background: var(--card);
border-left: 1px solid var(--line);
border-top: 1px solid var(--line);
transform: rotate(45deg);
}
.co-card img {
width: 100%;
border-radius: 7px;
display: block;
border: 1px solid var(--line);
height: auto;
}
.co-card .co-name {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--ink);
margin: 10px 0 1px;
}
.co-card .co-desc {
display: block;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: var(--muted);
margin-bottom: 3px;
}
@media (prefers-reduced-motion: reduce) {
.co-card { transition: opacity 0.18s ease, visibility 0.18s; transform: translate(-50%, 0); }
}
@media (max-width: 700px) {
.co-card { display: none; }
}
/* ---- Case study tiles ---- */
.hero-tiles {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.hero-tiles a {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 16px 16px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--card);
text-decoration: none;
color: inherit;
transition: border-color 0.18s ease, transform 0.18s ease;
}
.hero-tiles a:hover { border-color: var(--accent); transform: translateY(-3px); }
.hero-tiles a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Matches the sidebar nav-card swatch so the two read as one system.
Per-logo padding is set inline, as it is in the sidebar. */
.hero-tiles .sw {
width: 34px;
height: 34px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hero-tiles .sw img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-tiles .nm { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.hero-tiles .cl { font-size: 13px; color: var(--muted); line-height: 1.45; }
.hero-tiles .go {
margin-top: auto;
padding-top: 10px;
font-family: var(--mono);
font-size: 11px;
color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.hero-tiles a { transition: border-color 0.18s ease; }
.hero-tiles a:hover { transform: none; }
}
@media (max-width: 1100px) { .hero-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
#contentArea > .case-header { padding: 48px 24px; }
.hero-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .hero-tiles { grid-template-columns: 1fr; } }