/* ============================================================ layout.css — reset, base type, header, seam, page scaffolding ============================================================ */ *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:var(--font-body); background:var(--bone); color:var(--ink); overflow-x:hidden; } a{ color:inherit; text-decoration:none; } /* Pages that open on the dark Ink background (e.g. Lab) */ body.theme-ink{ background:var(--ink); color:var(--bone); } /* ---------- SEAM ---------- */ .seam{ position:fixed; left:22px; top:0; bottom:0; width:2px; z-index:100; background:repeating-linear-gradient(to bottom, var(--steel) 0 4px, transparent 4px 9px); mix-blend-mode:difference; } body.theme-ink .seam{ mix-blend-mode:normal; } .seam-fill{ position:absolute; left:-2px; top:0; width:6px; height:0%; background:var(--steel); box-shadow:0 0 8px 1px currentColor; transition:background .3s ease; } .seam-knot{ position:absolute; left:-4px; top:0; width:10px; height:10px; border-radius:50%; background:var(--steel); transform:translateY(-50%); transition:background .2s, box-shadow .2s; } /* ---------- HEADER ---------- Colour is driven by JS (js/seam.js → tintHeader): it reads the tone of the section currently under the header and toggles `.on-dark`. This works reliably on mobile, where mix-blend-mode did not repaint on scroll. */ header{ position:fixed; top:0; left:0; right:0; z-index:90; display:flex; justify-content:space-between; align-items:center; padding:28px 40px 28px 56px; color:var(--ink); transition:color .3s ease; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; } header.on-dark{ color:var(--bone); } /* light text over a dark section */ /* Pages that open dark (Lab) start with light header text + a soft scrim. */ body.theme-ink header{ color:var(--bone); background:linear-gradient(to bottom, rgba(11,12,16,.9), transparent); } header .wordmark{ font-weight:700; } header nav{ display:flex; gap:32px; align-items:center; } header nav a{ opacity:.75; transition:opacity .2s; } header nav a:hover{ opacity:1; } /* ---------- THEME TOGGLE ---------- */ .theme-toggle{ background:none; border:1px solid currentColor; color:inherit; cursor:pointer; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1; opacity:.7; transition:opacity .2s, transform .3s; font-family:inherit; padding:0; } .theme-toggle:hover{ opacity:1; transform:rotate(-15deg); } .theme-toggle:focus-visible{ outline:2px solid var(--cobalt); outline-offset:2px; } section{ padding:0 56px; position:relative; } main{ padding:150px 56px 0; } /* ---------- FOOTER ---------- */ footer{ background:var(--bone); color:var(--ink); padding:100px 56px 60px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; } footer .about-pull{ max-width:460px; font-family:var(--font-sub); font-weight:500; font-size:20px; } footer .meta{ font-family:var(--font-mono); font-size:11px; color:var(--steel); text-align:right; letter-spacing:.05em; } /* ============================================================ DARK MODE — toggled via (see js/theme.js). Only the light surfaces need flipping; sections that are already Ink (the work index, Lab) stay as they are. ============================================================ */ html[data-theme="dark"] body{ background:var(--ink); color:var(--bone); } html[data-theme="dark"] footer{ background:var(--ink); color:var(--bone); } html[data-theme="dark"] .slider-caption b{ color:var(--bone); } html[data-theme="dark"] .hero h1 .div2{ color:#5a9bd4; } /* lift the title blue for contrast */ html[data-theme="dark"] .gallery .img-slot{ background-image:repeating-linear-gradient(45deg, #1a1b1f 0 2px, #232427 2px 22px); } html[data-theme="dark"] .handle::before, html[data-theme="dark"] .handle-grip{ background:var(--bone); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .seam-fill, .seam-knot{ transition:none; } } /* ---------- shared breakpoints ---------- */ @media (max-width:720px){ /* keep a clear gap between the seam (at 22px) and the content */ header{ padding:20px 24px 20px 40px; font-size:10px; gap:16px; } header nav{ gap:16px; } section{ padding:0 24px 0 40px; } main{ padding:120px 24px 0 40px; } footer{ padding:80px 24px 48px 40px; } }