/* ============================================================
InBetween — site stylesheet
Brand carries forward from the original coming-soon index:
- cream #f5f1e8 (background)
- ink #1a1a1a (text)
- accent #8b1a2b (burgundy / wine)
- Montserrat (default body + display)
- Caveat (the cursive script accents) — self-hosted, see @font-face
Layout patterns adapted from dianamoss.co.za (structure only):
- asymmetric hero with offset right CTA
- 3-col portfolio grid
- portfolio detail = wide image stack + sticky right description
============================================================ */
/* @font-face declarations live in /static/css/fonts.css — that file is
shared between the public site and the admin so the brand fonts are
defined in exactly one place. */
:root {
/* Palette */
--cream: #f5f1e8;
--cream-deep: #ece5d3;
--ink: #1a1a1a;
--ink-soft: #3a3a3a;
--ink-mute: #6a6a6a;
--accent: #691919;
--accent-soft: #b34357;
--line: rgba(26, 26, 26, 0.12);
--shade: rgba(26, 26, 26, 0.04);
/* Type */
--font-sans: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-script: 'Caveat', cursive;
/* Layout rhythm.
Container max-width is intentionally smaller than the laptop-class
breakpoint (~1280px) so the content panel never sits flush against the
viewport edge; combined with the bumped gutter clamp this gives every
page a comfortable side margin from ~1024px upward and a wider
breathing area on the awkward 1200px-ish viewports specifically. */
--container: 1140px;
--container-narrow: 880px;
/* Side gutter for every .container.
Roughly one-third of the previous values now that the .section
shorthand-padding bug is fixed and the gutter actually applies.
Floor 14px → cap 16px keeps content close to the viewport edge on
narrow phones without quite touching it; the 1.6vw slope is barely
perceptible but lets larger screens take an extra hair of breathing
room. Outer container margin still grows above 1140px viewports. */
--gutter: clamp(0.875rem, 1.6vw, 1rem);
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.75rem;
--space-lg: 3rem;
--space-xl: 5.5rem;
--space-xxl: 8rem;
/* Misc */
--radius: 6px;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 30px rgba(0, 0, 0, 0.06);
/* Motion design tokens.
--ease-soft is the gentlest curve we use — quick start, long
graceful decel — and is the right default for hovers, page
fades, and image reveals. --ease-standard is Material's curve,
reserved for purely-functional state transitions. Durations are
deliberately on the slow side of comfortable so the site reads
as composed rather than snappy. */
--ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 180ms;
--dur-base: 320ms;
--dur-slow: 800ms;
}
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
/* Smooth in-page anchor scrolling. Falls back gracefully on older
browsers (no jump-cut, just no easing). */
html {
scroll-behavior: smooth;
}
/* Page-load fade-in. Subtle (8px lift, 600ms) so it reads as polish,
not as a transition the visitor has to wait through. The
prefers-reduced-motion override at the bottom of this file
short-circuits this for accessibility. */
body {
opacity: 0;
animation: page-in var(--dur-slow) var(--ease-soft) 60ms forwards;
}
@keyframes page-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
/* Image reveal: opacity flips to 1 once ![]()
finishes loading
(site.js sets data-loaded on each img after load/error). Without
this, every page-load shows raw image-pop as the network resolves —
with it, photos, logos, and PDFs slide in like the rest of the page. */
img {
transition: opacity var(--dur-base) var(--ease-soft);
}
img:not([data-loaded]) {
opacity: 0;
}
img[data-loaded] {
opacity: 1;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--cream);
color: var(--ink);
font-family: var(--font-sans);
font-weight: 400;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--accent);
text-decoration: none;
transition: color 120ms ease, border-color 120ms ease;
}
a:hover, a:focus-visible {
color: var(--ink);
}
a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ---------- Layout primitives ---------- */
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
.container--narrow {
max-width: var(--container-narrow);
margin: 0 auto;
padding: 0 var(--gutter);
}
.divider {
border: none;
border-top: 1.5px solid var(--accent);
width: 100%;
max-width: 600px;
margin: var(--space-md) auto;
}
/* Section paddings use longhand top/bottom only.
Using `padding: VAL 0` shorthand here (or `VAL 0 VAL`) zeroes out the
left/right padding inherited from .container, leaving content flush
against the viewport edge. Longhand keeps the .container gutter intact. */
.section {
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
}
.section--tight {
padding-top: var(--space-lg);
padding-bottom: var(--space-lg);
}
.section--alt {
background: var(--cream-deep);
}
/* ---------- Header / nav ---------- */
.site-header {
padding: var(--space-md) 0 var(--space-sm);
position: relative;
z-index: 5;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.site-header__brand a {
display: inline-block;
color: var(--ink);
}
.nav {
display: flex;
align-items: center;
gap: var(--space-md);
}
.nav__list {
display: flex;
gap: var(--space-md);
list-style: none;
margin: 0;
padding: 0;
}
.nav__list a {
color: var(--ink);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: lowercase;
border-bottom: 1.5px solid transparent;
padding: 0.25rem 0;
}
.nav__list a:hover, .nav__list a[aria-current="page"] {
color: var(--accent);
border-color: var(--accent);
}
/* CTA needs higher specificity than `.nav__list a` so the cream-on-ink
color sticks. Without the `.nav__list a` qualifier the descendant rule
above wins (it's specificity 0,1,1 vs the bare class's 0,1,0) and you
get black text on a black background. */
.nav__list a.nav__cta {
background: var(--ink);
color: var(--cream);
padding: 0.55rem 1.1rem;
border-radius: var(--radius);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: none;
/* override the underline-on-hover treatment */
}
.nav__list a.nav__cta:hover,
.nav__list a.nav__cta:focus-visible,
.nav__list a.nav__cta[aria-current="page"] {
background: var(--accent);
color: var(--cream);
border-bottom: none;
}
.nav__toggle {
display: none;
background: none;
border: 1px solid var(--ink);
color: var(--ink);
font-family: inherit;
font-size: 0.85rem;
padding: 0.45rem 0.9rem;
border-radius: var(--radius);
cursor: pointer;
}
@media (max-width: 720px) {
.nav__toggle {
display: inline-flex;
}
.nav__list {
display: none;
}
.nav.is-open .nav__list {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-sm);
position: absolute;
right: var(--gutter);
top: 100%;
background: var(--cream);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
}
/* ---------- Logo ----------
The brand mark is now a flat SVG file under /static/img/. The hero version
includes the wordmark + tagline strip; the small version is just the
horizontal wordmark. We set max-width on the hero and a fixed height on
the small variant so they sit right at every breakpoint without distorting. */
.logo {
display: inline-block;
line-height: 0;
}
.logo--hero {
display: block;
text-align: center;
margin: 0 auto;
}
.logo--hero img {
/* Hero mark: wide aspect (~1.4:1). Cap by width so it scales down
gracefully on small screens. */
width: 100%;
max-width: 720px;
height: auto;
display: inline-block;
}
.logo--sm img {
/* Header / footer / admin-sidebar wordmark — fixed height, natural
aspect-driven width. Tweak the height to taste. */
height: 2.6rem;
width: auto;
display: block;
}
@media (max-width: 540px) {
.logo--hero img {
max-width: 95%;
}
.logo--sm img {
height: 2.1rem;
}
}
/* ---------- Hero ---------- */
.hero {
/* Vertical padding only — horizontal is supplied by .container's gutter.
Shorthand `padding: VAL 0 VAL` would zero the gutter (see comment on
.section above). */
padding-top: var(--space-xl);
padding-bottom: var(--space-lg);
position: relative;
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--space-lg);
align-items: end;
}
.hero__lead {
font-family: var(--font-sans);
font-weight: 600;
/* Lower clamp floor (was 2rem) so the heading shrinks far enough on
narrow phones to fit "humming" / "in-between" on a single line.
Slope steeper (5.5vw) so it grows back up on tablets+. Capped at
2.5rem (40px) per design. */
font-size: clamp(1.6rem, 5.5vw, 2.5rem);
line-height: 1.12;
letter-spacing: -0.005em;
margin: 0 0 var(--space-sm);
color: var(--ink);
/* max-width is in ch (which scales with font-size). It stops wide
lines on desktop without forcing a min-width on phones. The
`min(...)` prevents 22ch from ever exceeding the column when the
font-size is at its floor. */
max-width: min(22ch, 100%);
/* Last-line defense: if a single word is still too wide for the
column, break it instead of overflowing the viewport. */
overflow-wrap: anywhere;
word-wrap: break-word;
/* legacy alias; iOS Safari < 16 needs it */
hyphens: auto;
}
.hero__lead em {
font-family: var(--font-script);
font-style: normal;
color: var(--accent);
font-weight: 700;
font-size: larger;
}
.hero__sub {
font-size: clamp(1rem, 1.6vw, 1.2rem);
color: var(--ink-soft);
line-height: 1.6;
max-width: min(38ch, 100%);
overflow-wrap: anywhere;
}
.hero__cta {
text-align: right;
align-self: end;
}
.hero__cta-text {
font-size: clamp(1.1rem, 2.2vw, 1.6rem);
color: var(--ink-soft);
line-height: 1.4;
margin-bottom: var(--space-sm);
max-width: min(28ch, 100%);
margin-left: auto;
overflow-wrap: anywhere;
}
.hero__cta-link {
display: inline-block;
border-bottom: 2px solid var(--accent);
color: var(--accent);
font-weight: 600;
padding-bottom: 2px;
}
.hero__cta-link:hover {
color: var(--ink);
border-color: var(--ink);
}
/* Stack the hero, portfolio-detail, and contact-grid columns earlier
(was 820px). Below ~960px the asymmetric 1.4fr/1fr split leaves the
right column too narrow for its CTA and inline arrow, and the 50/50
contact split makes form labels run too tight. 960px keeps the
2-column layout for desktop-ish viewports only. */
@media (max-width: 960px) {
.hero__inner {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.hero__cta {
text-align: left;
}
.hero__cta-text {
margin-left: 0;
}
}
/* Hero specific: home page logo block */
.brand-block {
text-align: center;
margin-bottom: var(--space-md);
}
.brand-block .logo {
display: inline-block;
}
.brand-block .tagline {
font-weight: 500;
font-size: clamp(1rem, 2vw, 1.3rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
margin-top: var(--space-sm);
}
.brand-block .tagline .accent {
color: var(--accent);
}
/* ---------- Section heads ---------- */
.section-head {
margin-bottom: var(--space-lg);
}
.section-head__eyebrow {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent);
display: inline-block;
margin-bottom: var(--space-xs);
}
.section-head__title {
font-size: clamp(1.7rem, 3.5vw, 2.6rem);
line-height: 1.15;
font-weight: 600;
margin: 0 0 var(--space-sm);
max-width: 32ch;
}
.section-head__lede {
font-size: 1.1rem;
color: var(--ink-soft);
max-width: 56ch;
margin: 0;
}
/* ---------- Service cards ---------- */
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-md);
}
.service-card {
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.service-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: var(--accent);
}
.service-card__num {
font-family: var(--font-script);
font-size: 1.8rem;
color: var(--accent);
line-height: 1;
}
.service-card__name {
font-size: 1.4rem;
font-weight: 600;
margin: 0;
color: var(--ink);
}
.service-card__tag {
font-size: 0.95rem;
color: var(--ink-soft);
margin: 0;
}
.service-card__more {
margin-top: auto;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
color: var(--accent);
}
/* ---------- Portfolio grid (3-col) ---------- */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
@media (max-width: 900px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
}
.portfolio-card {
display: block;
aspect-ratio: 1 / 1;
background: var(--cream-deep);
border-radius: var(--radius);
overflow: hidden;
position: relative;
color: var(--ink);
}
.portfolio-card img {
width: 100%;
height: 100%;
object-fit: contain;
/* show the whole image — no cropping */
padding: 0.75rem;
transition: transform var(--dur-slow) var(--ease-soft);
}
.portfolio-card:hover img {
transform: scale(1.03);
}
.portfolio-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--ink-mute);
font-style: italic;
font-size: 0.95rem;
background:
repeating-linear-gradient(135deg,
var(--cream-deep) 0 12px,
var(--cream) 12px 24px);
}
.portfolio-card__caption {
padding: 0.75rem 0.25rem 0;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-sm);
}
.portfolio-card__title {
font-weight: 600;
margin: 0;
font-size: 1rem;
}
.portfolio-card__svc {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
}
/* ---------- Category grid (portfolio index) ----------
3-column grid of category cards. Each card is a single anchor with a
full-bleed cover and a name overlay that slides up on hover. On
touch devices (no hover) the overlay is always shown so the user can
read the label. */
.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
@media (max-width: 900px) {
.category-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.category-grid {
grid-template-columns: 1fr;
}
}
.category-card {
position: relative;
display: block;
aspect-ratio: 1 / 1;
border-radius: var(--radius);
overflow: hidden;
background: var(--cream-deep);
color: var(--ink);
transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.category-card:hover,
.category-card:focus-visible {
transform: translateY(-2px);
box-shadow: var(--shadow);
color: var(--ink);
outline: none;
}
.category-card__cover {
width: 100%;
height: 100%;
object-fit: contain;
/* show the whole cover — don't crop */
display: block;
padding: 0.75rem;
background: var(--cream-deep);
transition: transform var(--dur-slow) var(--ease-soft);
}
.category-card:hover .category-card__cover {
transform: scale(1.04);
}
.category-card__placeholder {
width: 100%;
height: 100%;
background:
repeating-linear-gradient(135deg,
var(--cream-deep) 0 12px,
var(--cream) 12px 24px);
}
.category-card__overlay {
position: absolute;
inset: auto 0 0 0;
padding: var(--space-md);
background: linear-gradient(to top, rgba(26, 26, 26, 0.78) 0%, rgba(26, 26, 26, 0) 100%);
color: var(--cream);
transform: translateY(100%);
transition: transform var(--dur-base) var(--ease-soft);
display: flex;
align-items: flex-end;
min-height: 40%;
}
.category-card:hover .category-card__overlay,
.category-card:focus-visible .category-card__overlay {
transform: translateY(0);
}
.category-card__name {
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(1.1rem, 2vw, 1.5rem);
letter-spacing: 0.02em;
line-height: 1.2;
}
/* Touch / coarse-pointer devices have no hover state, so always show the
overlay. We use (hover: none) which fires for true touchscreens and
spares mouse users from the reveal we already do via :hover. */
@media (hover: none) {
.category-card__overlay {
transform: translateY(0);
}
}
/* Asset grid — used inside a category page when the category has
tagged assets directly attached. Each card is a link to the asset
detail page; caption (if any) sits underneath. */
.asset-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
@media (max-width: 900px) {
.asset-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.asset-grid {
grid-template-columns: 1fr;
}
}
.asset-card {
display: block;
color: var(--ink);
text-decoration: none;
}
.asset-card img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
/* show the whole image — no cropping */
border-radius: var(--radius);
background: var(--cream-deep);
padding: 0.5rem;
/* a touch of breathing room around it */
transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.asset-card:hover img {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.asset-card__caption {
display: block;
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--ink-soft);
}
.asset-card__pdf {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--radius);
background: var(--cream-deep);
color: var(--ink-mute);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.12em;
transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.asset-card:hover .asset-card__pdf {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.asset-card__pdf svg {
width: 2rem;
height: 2rem;
}
/* Inline-PDF preview tile: same footprint as .asset-card img, but the