/* ── Reset ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-gutter: stable; } /* ══════════════════════════════════════════════════════════════════════════════ DESIGN TOKENS Light is the default (:root). Dark and Colour just re-point the same tokens, so every rule below is written once against the token names. Theme is set via by the inline script in . ══════════════════════════════════════════════════════════════════════════════ */ :root { /* Type & layout */ --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --gutter: clamp(1.25rem, 5vw, 4rem); --content-max: 1480px; /* centred container width (currently the services page) */ /* Corner radius */ --radius-img: 0; /* images & image cards — square (2026-09-17) */ --radius-pill: 999px; /* pills, buttons & rounded controls */ /* Surfaces & text */ --bg: #fff; /* page background */ --surface: #fff; /* raised panels: header, cards, inputs */ --surface-2: #f5f5f4; /* sunken (admin body, login bg) */ --field-bg: #faf9f7; /* form fields, builder rows */ --placeholder: #e0ddd8; /* empty image / thumbnail wells */ --fg: #1a1a1a; /* primary text */ --mid: #888; /* secondary text */ --muted-2: #aaa; /* tertiary text / field labels */ --faint: #ccc; /* light hairline borders */ --border: #e4e2df; /* UI borders (admin) */ --rule: #e5e5e5; /* divider rules */ /* Accent — emphasis fills, active & hover states. This is where the Colour theme's green comes through; in Light/Dark it's just the ink. */ --accent: #1a1a1a; --accent-fg: #fff; /* readable text on --accent */ /* Constant over photography (scrims, hero text) — never themed */ --on-photo: #fff; /* Status */ --danger: #c0392b; --info: #2563eb; --ok: #2e7d46; /* Elevation */ --shadow: 0 1px 2px rgba(20,22,30,0.04), 0 4px 12px rgba(20,22,30,0.06); --shadow-lg: 0 4px 10px rgba(20,22,30,0.06), 0 14px 30px rgba(20,22,30,0.12); color-scheme: light; } /* ── Dark ─────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #15171a; --surface: #1f2329; --surface-2: #101216; --field-bg: #191c21; --placeholder: #23262c; --fg: #e9e9e6; --mid: #9b9b96; --muted-2: #74746f; --faint: #34373d; --border: #2c3036; --rule: #2c3036; --accent: #ededed; --accent-fg: #15171a; --danger: #ef6f63; --info: #6699ff; --ok: #6fce8f; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.45); --shadow-lg: 0 6px 18px rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.55); color-scheme: dark; } /* ── Colour — navy + green from the SD/ badge ─────────────────────────────── */ :root[data-theme="colour"] { --bg: #0e1a4d; --surface: #16245f; --surface-2: #0a1440; --field-bg: #122158; --placeholder: #16245f; --fg: #eef1fb; --mid: #97a3d4; --muted-2: #6c79b3; --faint: #2b3970; --border: #2a3a78; --rule: #2a3a78; --accent: #39c24b; --accent-fg: #06122e; --danger: #ff7a7a; --info: #7ab0ff; --ok: #54cf7e; --shadow: 0 1px 2px rgba(2,4,20,0.35), 0 4px 14px rgba(2,4,22,0.4); --shadow-lg: 0 6px 18px rgba(2,4,22,0.45), 0 16px 40px rgba(2,4,24,0.5); color-scheme: dark; } /* While a theme switch is in flight, main.js adds .theme-transition to so the page cross-fades on one clock, then removes it (hover transitions stay untouched). Box properties don't inherit, so they fade on everything. Text colour DOES inherit — fading it on every element would compound the transition down the DOM tree (body → main → section → … → p) and make deep text take seconds to settle. So colour fades on the body + leaf-level text/controls only, never on structural containers. */ .theme-transition *, .theme-transition *::before, .theme-transition *::after { transition: background-color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important; transition-delay: 0s !important; } .theme-transition, .theme-transition body, .theme-transition p, .theme-transition li, .theme-transition span, .theme-transition a, .theme-transition button, .theme-transition h1, .theme-transition h2, .theme-transition h3, .theme-transition h4, .theme-transition dt, .theme-transition dd, .theme-transition label, .theme-transition small, .theme-transition strong, .theme-transition em, .theme-transition address, .theme-transition time, .theme-transition input, .theme-transition textarea, .theme-transition select { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important; transition-delay: 0s !important; } @media (prefers-reduced-motion: reduce) { .theme-transition, .theme-transition *, .theme-transition *::before, .theme-transition *::after { transition: none !important; } } /* ── Base ─────────────────────────────────────────────────────────────────── */ body { font-family: var(--font); font-weight: 400; background: var(--bg); color: var(--fg); min-height: 100vh; line-height: 1.6; display: flex; flex-direction: column; transition: background-color 0.3s ease, color 0.3s ease; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button { font-family: var(--font); cursor: pointer; } /* ── Accessibility ────────────────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════════════════════════════════════════ PUBLIC HEADER ══════════════════════════════════════════════════════════════════════════════ */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--gutter); background: var(--bg); } .has-hero .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: none; z-index: 10; } /* Homepage leads with a full-viewport hero, then scrolls down to the CTA strap + footer. Keep scrollbar-gutter auto so the hero stays edge-to-edge (no reserved gutter); horizontal overflow is still clipped globally on html. */ html:has(body.is-home) { scrollbar-gutter: auto; } .has-hero .site-wordmark, .has-hero .site-nav a, .has-hero .burger-btn { color: var(--on-photo); } /* Over a hero image the desktop nav is white — keep it white on hover so it doesn't flip to dark and clash with the image. (The mobile slide-in panel has a solid background, so it keeps the normal dark hover.) */ @media (min-width: 901px) { .has-hero .site-nav a:hover, .has-hero .site-nav a.active { color: var(--on-photo); } } /* Right-hand cluster: nav + theme switch + burger */ .header-tools { display: flex; align-items: center; gap: 1.5rem; } .site-wordmark { color: var(--fg); } .logo-main { position: relative; display: inline-block; font-size: 1rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; padding-bottom: 0.4em; margin-right: 1.5em; white-space: nowrap; } /* Horizontal underline */ .logo-main::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: currentColor; } /* Diagonal slash — passes through the right end of the underline, ~50/50 above and below */ .logo-main::after { content: ''; position: absolute; bottom: -3em; left: calc(100% - 1px); width: 1px; height: 6em; background: currentColor; transform-origin: 0 3em; transform: rotate(35deg); } .site-nav { display: flex; gap: 2.5rem; } .site-nav a { font-size: 1rem; font-weight: 400; color: var(--mid); transition: color 0.2s; display: inline-flex; align-items: center; } .site-nav a:hover { color: var(--accent); } .site-nav a.active { color: var(--accent); } /* Hamburger */ .burger-btn { display: none; background: none; border: none; padding: 0.25rem; color: var(--fg); line-height: 0; } .burger-btn svg { width: 20px; height: 20px; transition: transform 0.2s; } /* Only shown inside the mobile menu page */ .nav-close { display: none; } .nav-theme { display: none; } /* ── Theme switch ─────────────────────────────────────────────────────────── */ .theme-switch { display: inline-flex; align-items: center; gap: 2px; } .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; background: none; border: none; border-radius: var(--radius-pill); color: var(--mid); cursor: pointer; transition: color 0.2s, background 0.2s; } .theme-btn svg { width: 15px; height: 15px; display: block; } .theme-btn:hover { color: var(--fg); } /* Active state is driven by html[data-theme] (set pre-paint by the no-flash script) so the right button is highlighted on first paint — no flicker when navigating. .is-active is kept for the JS-driven click update. */ .theme-btn.is-active, html[data-theme="light"] .theme-btn[data-theme-set="light"], html[data-theme="dark"] .theme-btn[data-theme-set="dark"], html[data-theme="colour"] .theme-btn[data-theme-set="colour"], html:not([data-theme]) .theme-btn[data-theme-set="light"] { color: var(--accent-fg); background: var(--accent); } /* Homepage hides the header switcher to keep the hero clean; the footer switcher (added in page_foot) stays available everywhere, including home. */ .is-home .header-tools > .theme-switch { display: none; } /* Fit/contain mode — header overlaid as normal but using page colours (bg is light, not a dark photo) */ body.has-hero:has(.project-hero--contain) .site-wordmark, body.has-hero:has(.project-hero--contain) .site-nav a, body.has-hero:has(.project-hero--contain) .burger-btn, body.has-hero:has(.project-hero--contain) .theme-btn { color: var(--fg); } @media (min-width: 901px) { body.has-hero:has(.project-hero--contain) .site-nav a:hover, body.has-hero:has(.project-hero--contain) .site-nav a.active { color: var(--accent); } } /* Mobile nav — full-screen menu page */ @media (max-width: 900px) { .burger-btn { display: flex; align-items: center; justify-content: center; } /* Top bar stays wordmark + burger; colour modes move into the menu (.nav-theme) */ .header-tools > .theme-switch { display: none; } .site-nav { position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; background: var(--surface); padding: 2rem; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); z-index: 100; } .site-nav.open { transform: translateX(0); } /* Solid panel ⇒ always use the normal text colour (overrides the white-over-hero rule) */ .site-nav a, .has-hero .site-nav a { font-size: 1.5rem; font-weight: 300; letter-spacing: 0.02em; color: var(--fg); padding: 0.6rem 1rem; border-bottom: none; } .site-nav a:hover, .site-nav a.active { color: var(--accent); } /* Colour modes, inside the menu */ .nav-theme { display: block; margin-top: 2rem; } /* Close (✕), top-right of the menu page */ .nav-close { display: block; position: absolute; top: 1.25rem; right: 1.25rem; background: none; border: none; font-size: 2rem; line-height: 1; color: var(--fg); cursor: pointer; padding: 0.25rem 0.5rem; } } /* ══════════════════════════════════════════════════════════════════════════════ MAIN ══════════════════════════════════════════════════════════════════════════════ */ main { flex: 1 0 auto; min-height: 60vh; animation: page-enter 0.5s ease backwards; } @keyframes page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { main { animation: none; } body { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════════ HOME HERO ══════════════════════════════════════════════════════════════════════════════ */ .hero { width: 100%; } .home-hero { position: relative; width: 100%; height: 100svh; overflow: hidden; } /* Top scrim for nav readability */ .home-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.08) 30%, rgba(0,0,0,0) 55% ); pointer-events: none; z-index: 1; } .home-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Crop = "Fit": show the whole image (letterboxed on the page background) */ .home-hero--contain { background: var(--bg); } .home-hero--contain .home-hero-img { object-fit: contain; } .home-hero--contain::after { display: none; } .home-hero-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; padding: var(--gutter); } .home-hero-title { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-photo); margin-bottom: 1rem; } .home-hero-sub { font-size: clamp(1.25rem, 2.8vw, 2.25rem); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-photo); } .hero-placeholder { min-height: 60vh; display: flex; align-items: center; justify-content: center; background: var(--placeholder); } .hero-tagline { font-size: clamp(1rem, 2.5vw, 1.5rem); font-weight: 400; letter-spacing: 0.1em; color: var(--mid); text-transform: uppercase; } /* ══════════════════════════════════════════════════════════════════════════════ PAGE HEADER (Projects, Services, etc.) ══════════════════════════════════════════════════════════════════════════════ */ .page-header { padding: 3rem var(--gutter) 2rem; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .page-header h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 400; } /* Front-end expandable filter bar — same structure as admin, with gutters */ .projects-filter-bar { display: flex; flex-direction: column; gap: 1.25rem; padding: 0 var(--gutter) 2rem; } .filter-meta-search { } .filter-meta-search::placeholder { color: var(--mid); font-weight: 500; } .filter-meta-search:focus { outline: none; border-color: var(--accent); color: var(--fg); } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 0.9rem; height: 0.9rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; opacity: 0.6; } input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; } /* ══════════════════════════════════════════════════════════════════════════════ FILTER BAR ══════════════════════════════════════════════════════════════════════════════ */ .filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 var(--gutter) 2rem; } .filter-search { font-family: var(--font); font-size: 0.9rem; color: var(--fg); background: none; border: 1px solid var(--faint); border-radius: var(--radius-pill); padding: 0.55rem 1.4rem; margin-left: auto; min-width: 200px; } .filter-search::placeholder { color: var(--mid); } .filter-search:focus { outline: none; border-color: var(--accent); } @media (max-width: 540px) { .filter-search { margin-left: 0; width: 100%; } } .filter-btn { font-family: var(--font); font-size: 0.9rem; font-weight: 500; color: var(--mid); background: none; border: 1px solid var(--faint); border-radius: var(--radius-pill); padding: 0.55rem 1.4rem; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .filter-btn:hover { color: var(--accent); border-color: var(--accent); } .filter-btn.active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); } /* ══════════════════════════════════════════════════════════════════════════════ PROJECTS GRID ══════════════════════════════════════════════════════════════════════════════ */ .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5vw; padding: 0 var(--gutter) 5rem; } @media (max-width: 900px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .projects-grid { grid-template-columns: 1fr; } } .project-card { display: block; } .project-thumb-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--placeholder); border-radius: var(--radius-img); isolation: isolate; /* backdrop root for the frosted caption panel */ transform: translateZ(0); /* own compositing layer so the grayscale-filtered img is clipped to the rounded corners — without this it leaks a thin sliver past the bottom edge */ } .project-thumb { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.4s ease; } .project-card:hover .project-thumb { filter: grayscale(0%); } .project-thumb-empty { width: 100%; height: 100%; background: var(--placeholder); } /* Frosted-glass caption panel — same treatment as the admin cards: blur + dark tint faded in with a gradient mask so there's no hard edge. */ .project-thumb-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, rgba(14,16,22,0.82) 0%, rgba(14,16,22,0.50) 45%, rgba(14,16,22,0) 100%); -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%); mask-image: linear-gradient(to top, #000 45%, transparent 100%); pointer-events: none; } .project-card-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem; color: var(--on-photo); z-index: 1; } .project-card-title { margin: 0; font-size: 1rem; font-weight: 500; color: var(--on-photo); } .project-card-year { margin: 0.25rem 0 0; font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.78); } .no-results, .no-filter-results { grid-column: 1 / -1; padding: 3rem 0; font-size: 0.875rem; color: var(--mid); text-align: center; } /* ══════════════════════════════════════════════════════════════════════════════ PROJECT SINGLE ══════════════════════════════════════════════════════════════════════════════ */ .project-single { padding-bottom: 6rem; } /* Hero: browser-height image, vertically centred */ .project-hero { position: relative; width: 100%; height: 100svh; overflow: hidden; } /* Fit mode — shows the full image, background fills the sides */ .project-hero--contain { background: var(--bg); } .project-hero--contain .project-hero-img { object-fit: contain; } .project-hero--contain::after { display: none; } /* On mobile, portrait viewport + portrait image = natural fill, no letterbox needed */ @media (max-width: 640px) { .project-hero--contain { background: none; } .project-hero--contain .project-hero-img { object-fit: cover; } .project-hero--contain::after { display: block; } } /* Gradient scrim — keeps nav readable */ .project-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.08) 30%, rgba(0,0,0,0) 55% ); pointer-events: none; z-index: 1; } .project-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Info row below hero: title+meta left, description right */ .project-info { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; padding: 3rem var(--gutter); } .project-info h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 300; letter-spacing: 0.05em; margin-bottom: 2rem; } .project-desc { font-size: 0.9375rem; line-height: 1.75; font-weight: 400; } /* Fallback header (no hero image) */ .project-single-header { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; padding: 3rem var(--gutter); width: 100%; } .project-single-right { font-size: 0.9375rem; line-height: 1.75; font-weight: 400; } .project-single-header h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 300; letter-spacing: 0.05em; margin-bottom: 2rem; } @media (max-width: 768px) { .project-info { grid-template-columns: 1fr; gap: 1.5rem; } .project-single-header { grid-template-columns: 1fr; gap: 1.5rem; } } .project-meta { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; } .project-meta-row { display: flex; gap: 1.5rem; font-size: 0.8125rem; } .project-meta-row dt { font-weight: 400; font-size: 0.9rem; color: var(--muted-2); min-width: 6rem; } .project-meta-row dd { font-weight: 400; font-size: 0.9rem; } /* Image layouts */ .project-images { display: flex; flex-direction: column; gap: 5vw; padding: 0 var(--gutter); } .img-group { display: flex; gap: 5vw; } .img-group--full { flex-direction: column; } .img-group--pair .img-wrap { flex: 1; } .img-group--trio .img-wrap { flex: 1; } .project-img { width: 100%; height: auto; display: block; border-radius: var(--radius-img); } @media (max-width: 640px) { .img-group--pair, .img-group--trio { flex-direction: column; } } /* Prev / next project navigation */ .project-nav { display: flex; justify-content: space-between; padding: 4rem var(--gutter); border-top: 1px solid var(--faint); gap: 2rem; } .project-nav-prev, .project-nav-next { flex: 1; } .project-nav-next { text-align: right; } .project-nav a { display: flex; flex-direction: column; gap: 0.4rem; } .project-nav-next a { align-items: flex-end; } .project-nav-label { font-size: 0.9rem; font-weight: 400; color: var(--muted-2); } .project-nav-title { font-size: 1rem; color: var(--fg); } .project-nav a:hover .project-nav-title { text-decoration: underline; } /* CTA strip */ .project-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 4rem var(--gutter); background: var(--accent); color: var(--accent-fg); } .project-cta-text { font-size: clamp(1rem, 2vw, 1.375rem); font-weight: 400; letter-spacing: 0.02em; } .project-cta-btn { flex-shrink: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; color: var(--fg); background: var(--surface); border: none; border-radius: var(--radius-pill); padding: 0.75rem 2rem; transition: opacity 0.2s; } .project-cta-btn:hover { opacity: 0.85; } @media (max-width: 540px) { .project-cta { flex-direction: column; text-align: center; } .project-nav { flex-direction: column; gap: 2rem; } .project-nav-next { text-align: left; } .project-nav-next a { align-items: flex-start; } } /* ══════════════════════════════════════════════════════════════════════════════ PAGE TRANSITIONS & SCROLL REVEALS ══════════════════════════════════════════════════════════════════════════════ */ /* Scroll-triggered reveal */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger delay for project grid cards */ .projects-grid .reveal:nth-child(3n+2) { transition-delay: 0.08s; } .projects-grid .reveal:nth-child(3n+3) { transition-delay: 0.16s; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ══════════════════════════════════════════════════════════════════════════════ STATIC PAGES ══════════════════════════════════════════════════════════════════════════════ */ .static-content { padding: 0 var(--gutter) 5rem; max-width: 720px; font-size: 1rem; line-height: 1.8; } .static-content p + p { margin-top: 1.1rem; } .placeholder-text { color: var(--mid); font-style: italic; } /* ── Clients page ──────────────────────────────────────────────────────────── */ .clients-intro { margin-bottom: 2rem; } .clients-page { padding: 0 var(--gutter) 5rem; max-width: 1080px; } .clients-group { margin-bottom: 3rem; } .clients-group-title { font-size: 1rem; font-weight: 500; color: var(--muted-2); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); } .clients-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1.5rem; } .clients-list li { font-size: 0.95rem; line-height: 1.5; color: var(--fg); } @media (max-width: 600px) { .clients-list { grid-template-columns: repeat(2, 1fr); } } /* ── Services ──────────────────────────────────────────────────────────────── */ /* One full-width row per service: title far left (project-page h1 style), body far right — mirrors .project-info / .project-single-header. */ /* Centred container; every row = three steady zones: title / text / image */ .services-rows { padding-bottom: 3rem; max-width: var(--content-max); margin: 0 auto; } .service-row { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); padding: 3rem var(--gutter); } .service-row + .service-row { border-top: 1px solid var(--rule); } @media (max-width: 1080px) { .service-row { grid-template-columns: 1fr 1fr; } .service-img { grid-column: 2; } } @media (max-width: 768px) { .service-row { grid-template-columns: 1fr; gap: 1.5rem; } .service-img { grid-column: 1; } } .service-title { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 300; letter-spacing: 0.05em; margin: 0; } .service-body { font-size: 0.9375rem; line-height: 1.75; font-weight: 400; } .service-text { margin: 0 0 0.85rem; } .service-body :last-child { margin-bottom: 0; } .service-list { list-style: disc; margin: 0 0 0.85rem; padding-left: 1.1rem; } .service-list li { line-height: 1.75; } /* "Services" h1 sits tight above the intro, sharing the centred container */ .services-pagehead { max-width: var(--content-max); margin: 0 auto; padding: 2.5rem var(--gutter) 0.75rem; } /* Intro paragraphs as lead text — light like the section titles. Shares the centred container width so its left edge aligns with the rows. */ .services-intro { max-width: var(--content-max); margin: 0 auto; padding-bottom: 3rem; } .services-intro p { max-width: 62ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 300; line-height: 1.65; letter-spacing: 0.01em; } .services-intro p + p { margin-top: 1.25rem; } /* Top margin clears the logo's diagonal slash, which overhangs the header bar */ .services-hero { width: 100%; overflow: hidden; margin-top: 3.5rem; margin-bottom: 2rem; } .services-hero img { width: 100%; height: clamp(300px, 50vh, 560px); object-fit: cover; object-position: center; display: block; } .service-imgband { display: grid; gap: 1rem; padding: 2rem var(--gutter); } .service-imgband--pair { grid-template-columns: 1fr 1fr; } @media (max-width: 768px) { .service-imgband--pair { grid-template-columns: 1fr; } } .service-imgband img { width: 100%; height: auto; display: block; border-radius: var(--radius-img); } /* Uniform 4:3 frames give the column a steady rhythm regardless of source shape */ .service-img { display: grid; gap: 1rem; align-content: start; } .service-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius-img); } /* ── Who We Are — team ─────────────────────────────────────────────────────── */ .team { padding: 0 var(--gutter) 5rem; max-width: 1100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 5vw; } @media (max-width: 700px) { .team { grid-template-columns: 1fr; gap: 2.5rem; } } .team-member { max-width: 40rem; } .team-name { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.01em; margin: 0; } .team-role { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0.3rem 0 0.85rem; } .team-bio { font-size: 0.9375rem; line-height: 1.75; color: var(--fg); margin: 0; } .team-bio + .team-bio { margin-top: 0.85rem; } .not-found-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule); } .not-found-nav a { font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ══════════════════════════════════════════════════════════════════════════════ CONTACT ══════════════════════════════════════════════════════════════════════════════ */ .contact-intro { margin-bottom: 0.5rem; } .form-field { display: flex; flex-direction: column; gap: 0.5rem; } .form-field label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); } .form-field input, .form-field textarea { font-family: var(--font); font-weight: 400; font-size: 0.9375rem; color: var(--fg); background: transparent; border: none; border-bottom: 1px solid var(--faint); padding: 0.5rem 0; outline: none; transition: border-color 0.2s; resize: vertical; } .form-field input:focus, .form-field textarea:focus { border-bottom-color: var(--accent); } .btn-submit { align-self: flex-start; font-family: var(--font); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; background: var(--accent); color: var(--accent-fg); border: none; padding: 0.875rem 2.25rem; cursor: pointer; transition: opacity 0.2s; } .btn-submit:hover { opacity: 0.75; } .btn-submit:disabled { opacity: 0.4; cursor: not-allowed; } /* Static contact details (contact page) */ .contact-details { padding: 0 var(--gutter) 5rem; display: flex; flex-wrap: wrap; gap: 2.5rem 5rem; max-width: 720px; } .contact-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); margin: 0 0 0.75rem; } .contact-line { margin: 0.35rem 0; font-size: 0.9375rem; } .contact-line a { color: var(--fg); border-bottom: 1px solid var(--faint); transition: border-color 0.2s; } .contact-line a:hover { border-bottom-color: var(--accent); } /* ══════════════════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════════════════ */ .site-footer { border-top: 1px solid var(--faint); padding: 2.5rem var(--gutter); } .footer-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2.5rem; align-items: start; } /* Left — address */ .footer-address { font-style: normal; line-height: 1.8; font-size: 0.875rem; color: var(--mid); } /* Middle — email + phone */ .footer-reach { text-align: center; line-height: 1.8; font-size: 0.875rem; } .footer-reach a { color: var(--mid); transition: color 0.2s; } .footer-reach a:hover { color: var(--accent); } .footer-social { display: flex; justify-content: center; gap: 0.75rem; margin-top: 0.65rem; } .contact-social { display: flex; gap: 0.9rem; margin-top: 0.6rem; } .social-link { display: inline-flex; align-items: center; justify-content: center; color: var(--mid); transition: color 0.2s; } .social-link:hover { color: var(--accent); } .social-icon { width: 1.25rem; height: 1.25rem; display: block; } /* Right — nav, same style as the header nav */ .footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem 1.25rem; } .footer-nav a { font-size: 0.875rem; font-weight: 400; color: var(--mid); transition: color 0.2s; white-space: nowrap; } .footer-nav a:hover { color: var(--accent); } /* Copyright — centered beneath everything */ .footer-copy { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: var(--mid); } /* Bottom row: copyright stays centred; colour-mode switch sits bottom-right, in line with it (the empty left 1fr column balances the switch column). */ .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 1.5rem; } .footer-bottom .footer-copy { grid-column: 2; margin-top: 0; } .footer-bottom .footer-theme { grid-column: 3; justify-self: end; } /* Accreditation certificates — mono SVGs used as masks so they take the footer's text tone and adapt across light / dark / colour themes automatically. */ .footer-certs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.75rem; } .footer-cert { display: block; height: 42px; background-color: var(--mid); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .footer-cert--ssip { aspect-ratio: 1727 / 1115; -webkit-mask-image: url("/assets/img/ssip_logo.svg"); mask-image: url("/assets/img/ssip_logo.svg"); } .footer-cert--pqs { aspect-ratio: 1870 / 713; -webkit-mask-image: url("/assets/img/pqs_logo.svg"); mask-image: url("/assets/img/pqs_logo.svg"); } /* Admin keeps a simple single-line bar */ .footer-inner { display: flex; justify-content: center; font-size: 0.75rem; color: var(--mid); } @media (max-width: 640px) { .footer-top { grid-template-columns: 1fr; gap: 1.5rem; } .footer-address, .footer-reach { text-align: center; } .footer-nav { justify-content: center; } .footer-bottom { grid-template-columns: 1fr; justify-items: center; gap: 1.25rem; } .footer-bottom .footer-copy, .footer-bottom .footer-theme { grid-column: 1; justify-self: center; } } /* ══════════════════════════════════════════════════════════════════════════════ ADMIN — SHARED ══════════════════════════════════════════════════════════════════════════════ */ body.is-admin { font-weight: 400; display: block; --rail-w: 220px; } /* Admin nav rail — fixed left column across every admin page */ .admin-header { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 20; display: flex; flex-direction: column; gap: 2rem; padding: 1.5rem 1.25rem; background: var(--bg); border-right: 1px solid var(--border); overflow-y: auto; } .rail-brand { display: block; } .rail-logo { display: block; width: 100%; max-width: 165px; height: auto; } .rail-subtitle { display: block; margin-top: 0.45rem; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--mid); } /* Logo art is solid black; flip it to read on the dark / colour themes */ :root[data-theme="dark"] .rail-logo, :root[data-theme="colour"] .rail-logo { filter: invert(1); } .admin-nav { display: flex; flex-direction: column; gap: 0.15rem; } .admin-nav a { font-size: 0.9rem; font-weight: 400; color: var(--mid); padding: 0.4rem 0.6rem; border-radius: 8px; transition: color 0.2s, background 0.2s; } .admin-nav a:hover { color: var(--accent); } .admin-nav a.active { color: var(--fg); background: color-mix(in srgb, var(--accent) 8%, transparent); } .admin-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } .btn-logout { font-family: var(--font); font-size: 0.75rem; color: var(--mid); background: none; border: 1px solid var(--faint); border-radius: var(--radius-pill); padding: 0.375rem 1rem; cursor: pointer; white-space: nowrap; } /* Admin main — sits to the right of the fixed nav rail */ body.is-admin main { max-width: 1100px; margin-left: var(--rail-w); padding: 2rem 2rem 6rem; } /* The dashboard breaks out to full-width like the live projects page so its cards are just as wide; the form pages above keep the 1100px cap. */ body.is-admin.dashboard-page main { max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); } /* Narrow screens — collapse the rail back into a horizontal top bar */ @media (max-width: 768px) { body.is-admin .admin-header { position: static; width: auto; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; border-right: none; border-bottom: 1px solid var(--border); overflow: visible; } body.is-admin main { margin-left: 0; } .admin-nav { flex-direction: row; flex: 1; } .admin-rail-foot { margin-top: 0; flex-direction: row; align-items: center; } } /* Admin page header */ .admin-page-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .admin-page-header h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 400; } /* Dashboard stats — totals line + per-category chips */ .admin-page-header-titles { flex: 1; min-width: 0; } /* ── Admin filter bar ─────────────────────────────────────────────────────── */ .admin-filter-bar { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; } .admin-filter-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; width: 100%; } .filter-meta-subs { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; } .filter-meta-btn { font-family: var(--font); font-size: 0.9rem; font-weight: 500; color: var(--mid); background: none; border: 1px solid var(--faint); border-radius: var(--radius-pill); padding: 0.55rem 1.4rem; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .filter-meta-btn:hover { color: var(--accent); border-color: var(--accent); } .filter-meta-btn.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); } .admin-filter-group { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cat-stat { font-family: var(--font); font-size: 0.9rem; font-weight: 500; color: var(--mid); background: none; border: 1px solid var(--faint); border-radius: var(--radius-pill); padding: 0.55rem 1.4rem; white-space: nowrap; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .cat-stat:hover { color: var(--accent); border-color: var(--accent); } .cat-stat b { font-weight: 400; opacity: 0.6; margin-left: 0.3rem; } .cat-stat.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); } .cat-stat.is-active b { opacity: 0.85; } .cat-stat--none { font-style: italic; } /* Flash messages */ .flash { padding: 0.875rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.875rem; border-radius: 4px; } .flash--success { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } .flash--error { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); } /* Buttons */ .btn-primary { display: inline-block; font-family: var(--font); font-size: 0.8125rem; font-weight: 500; color: var(--accent-fg); background: var(--accent); border: none; border-radius: var(--radius-pill); padding: 0.625rem 1.25rem; cursor: pointer; text-decoration: none; } /* Badge */ .badge { display: inline-block; font-size: 0.6875rem; font-weight: 500; background: var(--accent); color: var(--accent-fg); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); } /* Empty state */ .empty-state { padding: 3rem 0; text-align: center; color: var(--mid); font-size: 0.9375rem; } .empty-state a { text-decoration: underline; } /* ── Admin dashboard — project cards (image-as-card, frosted panel) ──────────── */ .admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5vw; /* match the airy spacing of the live projects grid */ } @media (max-width: 900px) { .admin-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .admin-grid { grid-template-columns: 1fr; } } /* Admin project cards — reuse the front-end card look (greyscale thumb + gradient caption with title + year). .proj-card only anchors the overlays. */ .proj-card { position: relative; } .proj-card-cover-link { display: block; } .proj-card:hover .project-thumb { filter: grayscale(0%); } /* Edit button — white outline pill, overlaid bottom-right */ .card-btn { display: inline-block; font-family: var(--font); font-size: 0.72rem; font-weight: 500; color: var(--on-photo); background: transparent; border: 1px solid rgba(255,255,255,0.55); border-radius: var(--radius-pill); padding: 0.28rem 0.95rem; cursor: pointer; text-decoration: none; } .card-btn:hover { background: rgba(255,255,255,0.16); border-color: var(--on-photo); } .proj-card-edit { position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 3; } /* Header actions row (holds the New project button) */ .admin-page-header-actions { display: flex; align-items: center; gap: 1rem; } /* View toggle (grid / list) */ .view-toggle { display: flex; border: 1px solid var(--faint); border-radius: var(--radius-pill); overflow: hidden; } .view-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0.4rem 0.65rem; color: var(--mid); cursor: pointer; transition: color 0.15s, background 0.15s; } .view-btn svg { width: 14px; height: 14px; display: block; } .view-btn:hover { color: var(--fg); } .view-btn.is-active { color: var(--accent-fg); background: var(--accent); } /* List view — hide grid content, show list rows */ .proj-card-list-row { display: none; } .admin-grid.is-list { display: flex; flex-direction: column; gap: 0; } .admin-grid.is-list .proj-card { position: static; } .admin-grid.is-list .proj-card-cover-link, .admin-grid.is-list .proj-card-edit { display: none; } .admin-grid.is-list .proj-card-list-row { display: flex; align-items: center; gap: 1.5rem; padding: 0.7rem 0; border-bottom: 1px solid var(--faint); } .proj-card-list-title { font-size: 0.9375rem; font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: var(--fg); } .proj-card-list-title:hover { color: var(--accent); } .proj-card-list-cats, .proj-card-list-year { font-size: 0.8125rem; color: var(--mid); white-space: nowrap; } .proj-card-list-cats { min-width: 12rem; } .proj-card-list-year { min-width: 3rem; } .proj-card-list-edit { font-size: 0.8125rem; color: var(--mid); text-decoration: none; white-space: nowrap; } .proj-card-list-edit:hover { color: var(--accent); } .muted { color: var(--mid); } /* ── Admin form ─────────────────────────────────────────────────────────────── */ .admin-form { display: flex; flex-direction: column; gap: 0; } /* The form is a flex column, so buttons would otherwise stretch the full column width. Size submit buttons to their label and keep them left-aligned. */ .admin-form .btn-primary { align-self: flex-start; } .form-section { padding: 2rem 0; margin-bottom: 0; } .form-section:first-child { padding-top: 0; } .admin-form .form-field { margin-bottom: 1.25rem; } .admin-form .form-field:last-child { margin-bottom: 0; } .admin-form label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--mid); margin-bottom: 0.5rem; text-transform: none; letter-spacing: normal; } .admin-form input[type="text"], .admin-form input[type="email"], .admin-form input[type="file"], .admin-form textarea, .admin-form select { font-family: var(--font); font-size: 0.9375rem; font-weight: 400; color: var(--fg); width: 100%; background: transparent; border: 1px solid var(--border); border-radius: 12px; padding: 0.625rem 0.875rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .admin-form input[type="file"] { padding: 0.5rem; } .admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .admin-form textarea { resize: vertical; min-height: 5rem; } .admin-form small { font-size: 0.75rem; color: var(--mid); margin-top: 0.375rem; display: block; } .req { color: var(--danger); } /* Toggle */ .toggle-label { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; cursor: pointer; } .toggle-label input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--accent); flex-shrink: 0; } /* Pill buttons — used for category toggles and layout add buttons */ .pill-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 0.75rem; font-weight: 500; color: var(--mid); background: transparent; border: 1px solid var(--faint); border-radius: var(--radius-pill); padding: 0.5rem 1.25rem; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; white-space: nowrap; line-height: 1; position: relative; } .pill-btn:hover { color: var(--accent); border-color: var(--accent); } .pill-btn:has(input:checked), .pill-btn.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); } .pill-btn input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .cat-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.375rem; } .pill-btn--save { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); padding: 0.5rem 2rem; } .pill-btn--save:hover { color: var(--accent-fg); border-color: var(--accent); background: var(--accent); } /* ── Layout builder ─────────────────────────────────────────────────────────── */ .sections-list { display: flex; flex-direction: column; gap: 1.25rem; } .sections-empty { font-size: 0.8125rem; color: var(--mid); text-align: center; padding: 2rem 0; border: 2px dashed var(--border); border-radius: 4px; } .sections-empty.is-hidden { display: none; } .section-row { display: flex; align-items: stretch; gap: 0.75rem; } .section-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; flex-shrink: 0; } .section-side--right { justify-content: space-between; } .btn-section-order { width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--mid); background: none; border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; transition: color 0.15s, border-color 0.15s; line-height: 1; } .btn-section-order:hover { color: var(--fg); border-color: var(--border); } .btn-section-order:disabled { opacity: 0.25; cursor: default; pointer-events: none; } .section-layout-switcher { display: flex; flex-direction: column; gap: 0.3rem; } .section-layout-switcher .pill-btn--sm { border: 1px solid var(--faint); border-radius: var(--radius-pill); } .pill-btn--sm { font-size: 0.8rem; padding: 0.3rem 0.55rem; } .section-slots { flex: 1; display: grid; gap: 0.5rem; } .section-slots--full { grid-template-columns: 1fr; } .section-slots--pair { grid-template-columns: 1fr 1fr; } .section-slots--trio { grid-template-columns: 1fr 1fr 1fr; } .slot { position: relative; aspect-ratio: 4/3; background: var(--surface); border: 1.5px dashed var(--faint); border-radius: var(--radius-img); overflow: hidden; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .slot:not(.is-filled):hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } .slot.drag-over { border-color: var(--accent); border-style: solid; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } .slot.is-filled { border-style: solid; border-color: var(--border); } /* "Saved" confirmation — a green glow that fades out, fired on each AJAX success (upload, move/swap, replace, reorder, layout change, add row). */ @keyframes saved-flash { from { box-shadow: 0 0 0 2px rgba(57,194,75,1), 0 0 18px 5px rgba(57,194,75,0.6); } to { box-shadow: 0 0 0 2px rgba(57,194,75,0), 0 0 18px 5px rgba(57,194,75,0); } } .just-saved { animation: saved-flash 1.3s ease-out; } /* glow follows the element's own radius */ @media (prefers-reduced-motion: reduce) { .just-saved { animation: none; } } /* Per-field auto-save feedback on the details form (green = saved, red = failed) */ @keyframes field-saved-flash { from { box-shadow: 0 0 0 2px rgba(57,194,75,0.9); } to { box-shadow: 0 0 0 2px rgba(57,194,75,0); } } @keyframes field-error-flash { from { box-shadow: 0 0 0 2px rgba(214,69,56,0.9); } to { box-shadow: 0 0 0 2px rgba(214,69,56,0); } } .field-saved { animation: field-saved-flash 1.3s ease-out; border-radius: 6px; } .field-error { animation: field-error-flash 1.6s ease-out; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .field-saved, .field-error { animation: none; } } /* Empty slot — click to upload */ .slot-upload-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--mid); cursor: pointer; transition: background 0.15s, color 0.15s; } .slot-upload-placeholder svg { opacity: 0.5; transition: opacity 0.15s; } .slot-upload-placeholder span { font-size: 0.6875rem; } .slot:not(.is-filled):hover .slot-upload-placeholder { background: transparent; color: var(--accent); } .slot:not(.is-filled):hover .slot-upload-placeholder svg { opacity: 1; } /* Filled slot — image + hover overlay */ .slot-image { position: absolute; inset: 0; cursor: grab; } .slot-image:active { cursor: grabbing; } .slot-image.dragging { opacity: 0.4; } .slot-image img { width: 100%; height: 100%; object-fit: contain; display: block; } .slot-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: rgba(8,10,18,0.3); opacity: 0; transition: opacity 0.15s; pointer-events: none; } .slot-image:hover .slot-overlay { opacity: 1; pointer-events: auto; } .slot-action-btn { width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; color: var(--on-photo); background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.32); border-radius: var(--radius-pill); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .slot-action-btn:hover { background: rgba(255,255,255,0.3); } .slot-action-btn--danger:hover { background: var(--danger); border-color: var(--danger); } .btn-section-delete { align-self: flex-start; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; color: var(--mid); background: none; border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .btn-section-delete:hover { color: var(--danger); border-color: var(--danger); } /* Toast for upload errors */ .upload-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); font-size: 0.8125rem; padding: 0.75rem 1.25rem; border-radius: 4px; z-index: 1000; } .upload-toast--error { background: var(--danger); color: var(--on-photo); } /* Hero preview */ .hero-thumb { max-width: 360px; max-height: 220px; object-fit: cover; display: block; margin-bottom: 1.25rem; border-radius: var(--radius-img); } /* ── Login page ─────────────────────────────────────────────────────────────── */ body.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--surface-2); } body.login-page main { display: none; } .login-wrap { width: 100%; max-width: 380px; padding: 2rem; } .login-logo { font-size: 1rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; } .login-sub { font-size: 0.75rem; color: var(--mid); letter-spacing: 0.06em; margin-bottom: 2rem; } .login-form { display: flex; flex-direction: column; gap: 1.25rem; } .login-form .form-field label { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); margin-bottom: 0.5rem; } .login-form .form-field input { font-family: var(--font); font-size: 1rem; width: 100%; background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 0.75rem 1rem; outline: none; transition: border-color 0.2s; } .login-form .form-field input:focus { border-color: var(--accent); } .login-form .btn-submit { width: 100%; text-align: center; } /* ── Project editor — single-column live editor ─────────────────────────────── */ .editor { --editor-col: 840px; display: block; } /* Save + View live float bottom-right, always reachable (replaces the old top bar). Most fields auto-save; Save persists the hero crop and creates new projects. */ .editor-actions { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 30; display: flex; align-items: center; gap: 1rem; } .editor-viewlive { font-size: 0.8125rem; color: var(--mid); transition: color 0.2s; } .editor-viewlive:hover { color: var(--accent); } .editor-save { padding: 0.7rem 2rem; font-size: 0.85rem; } /* Details, image builder and danger zone share one centred column so the form and the image grid line up instead of drifting left / right. */ .editor-details { max-width: var(--editor-col); margin-inline: auto; display: flex; flex-direction: column; gap: 3rem; } .editor-images { max-width: var(--editor-col); margin-inline: auto; margin-top: 0.5rem; } .editor-details > .form-field, .editor-details > .credits { margin-bottom: 0; } /* Credits — compact inline "label [value]" pairs in two columns */ .credits { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 2.5rem; margin-bottom: 1.25rem; } .credit-field { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: 0.85rem; } .credit-field label { margin: 0; font-size: 0.85rem; } .admin-form .credits input { padding: 0.45rem 0.7rem; } @media (max-width: 600px) { .credits { grid-template-columns: 1fr; } } /* Category pills (and all admin pills) are title-case, never all-caps */ .pill-btn { text-transform: none; letter-spacing: normal; } /* Keep category pills at pill size — they're