/* ------------------------------------------------------------------ The landing frame, and the wayfinder that stays with you. The home page holds its hero inside a frame: the page colour shows as a margin around a rounded panel. Every page now lands the same way, with the corner radius and the width of the margin set per page, so the shape carries something of the subject. A technical page is cut tight and square. A page about belief is softer. No markup changes. The hero keeps its own photograph or gradient and simply sits inside a smaller, rounded box. ------------------------------------------------------------------ */ :root{ --sg-paper:#f4f6ee; /* what shows through the gap */ --sg-frame:18px; /* the margin */ --sg-radius:16px; /* the corner */ } /* the shapes. One word per page, set on . */ :root[data-sg-shape="precise"]{ --sg-frame:16px; --sg-radius:8px } /* instruments, records */ :root[data-sg-shape="soft"] { --sg-frame:22px; --sg-radius:30px } /* belief, people */ :root[data-sg-shape="wide"] { --sg-frame:14px; --sg-radius:20px } /* landscape, reach */ :root[data-sg-shape="ledger"] { --sg-frame:20px; --sg-radius:4px } /* money, contracts */ body{background:var(--sg-paper)} .sg-hero{ margin:var(--sg-frame); border-radius:var(--sg-radius); overflow:hidden; min-height:calc(100dvh - (var(--sg-frame) * 2)); isolation:isolate} /* the logo sat against the screen edge; it now sits inside the panel */ .sg-hero .sg-logo{top:92px;left:calc(6% + 4px)} /* ---------- the hero, held the way the front door holds it ---------- The home page centres its hero in the panel, over a photograph. These pages were bottom left over a flat gradient, which left most of the frame empty and read as a different site. */ .sg-hero{display:flex;align-items:center;justify-content:center;text-align:center} .sg-hero .sg-wrap{width:100%;padding-top:104px;padding-bottom:104px} /* a photograph behind the words, for the pages that name one. A page that already carries its own photograph simply never sets the variable. */ .sg-hero::before{content:"";position:absolute;inset:0;z-index:0; background-image:var(--sg-hero-scrim,linear-gradient(180deg,rgba(8,14,8,.62),rgba(8,14,8,.45) 42%,rgba(8,14,8,.86))), var(--sg-hero-photo,none); background-size:cover;background-position:center; opacity:var(--sg-hero-photo-on,0)} /* type at display size wants tighter tracking than type at reading size */ .sg-hero .sg-h1{margin:22px auto 26px;max-width:21ch;letter-spacing:-.022em} .sg-hero .sg-lead{margin-left:auto;margin-right:auto;max-width:56ch} .sg-hero .sg-spine{justify-content:center;margin-top:36px} /* ---------- the scroll cue ---------- Lifted out of the flow and seated at the foot of the panel, so the words above it stay properly centred and the invitation sits where you would look for it. A hairline rail with a pulse running down it, and it leans toward the cursor when you come near. */ .sg-hero .sg-wrap{position:static} /* so the cue anchors to the panel */ .sg-hero .sg-scrollcue{ position:absolute;left:50%;bottom:30px;z-index:2; flex-direction:column;align-items:center;gap:13px; margin:0;padding:10px 16px 4px;opacity:1;cursor:pointer; /* the centring lives in the variables, so the magnet can move it without fighting the transform that keeps it in the middle */ transform:translate(calc(-50% + var(--sgc-x,0px)),var(--sgc-y,0px)) scale(var(--sgc-s,1)); transition:transform .5s cubic-bezier(.32,.72,0,1)} .sg-hero .sg-scrollcue.is-held{transition:transform .06s linear} .sg-hero .sg-scrollcue span, .sg-hero .sg-scrollcue{font-size:10.5px;letter-spacing:.22em;color:rgba(238,243,230,.62); transition:color .3s ease,transform .5s cubic-bezier(.32,.72,0,1)} .sg-hero .sg-scrollcue:hover{color:rgba(242,255,189,.95)} .sg-hero .sg-scrollcue:focus-visible{outline:2px solid var(--brass,#f2ffbd); outline-offset:4px;border-radius:8px} /* the rail, and the beat running down it */ .sg-hero .sg-scrollcue::after{ content:"";display:block;width:1px;height:58px;flex:none; background-color:rgba(238,243,230,.2); background-image:linear-gradient(180deg,transparent 0%,var(--brass,#f2ffbd) 48%,transparent 100%); background-size:100% 30px;background-repeat:no-repeat;background-position:0 -30px; animation:sgBeat 2.6s cubic-bezier(.42,0,.22,1) infinite} @keyframes sgBeat{ 0%{background-position:0 -30px;opacity:.45} 22%{opacity:1} 100%{background-position:0 58px;opacity:.45} } /* a page whose panel is pale needs the rail dark */ [data-sg-hero-pale] .sg-hero .sg-scrollcue{color:rgba(27,36,24,.6)} [data-sg-hero-pale] .sg-hero .sg-scrollcue::after{background-color:rgba(27,36,24,.2)} @media(prefers-reduced-motion:reduce){ .sg-hero .sg-scrollcue{transition:none} .sg-hero .sg-scrollcue::after{animation:none;background-position:0 14px;opacity:.8} } /* the eyebrow capsule is inline, so the centred line carries it */ .sg-hero .sg-hero-eyebrow{margin-bottom:0} /* the mark is padded in ems, so at display size it opened a hole before the full stop. The front door pads its own mark by a fixed 8px, which reads far tighter at this size. */ .sg-hero .sg-mark{padding-left:.15em;padding-right:.15em} @media(max-width:700px){ .sg-hero .sg-wrap{padding-top:88px;padding-bottom:88px} .sg-hero .sg-h1{max-width:none;margin:18px auto 22px} .sg-hero .sg-spine{margin-top:26px;gap:8px 0} .sg-hero .sg-scrollcue{bottom:22px;gap:11px} .sg-hero .sg-scrollcue::after{height:46px} } /* the frame closes on all four sides, so the panel reads as a held opening rather than a band running off the bottom of the screen */ /* A phone wants a narrower frame. These carry the attribute too, because a plain :root here loses to the shape rules above on specificity. */ @media(max-width:700px){ :root, :root[data-sg-shape="precise"], :root[data-sg-shape="wide"]{--sg-frame:10px} :root[data-sg-shape="soft"]{--sg-frame:12px;--sg-radius:22px} :root[data-sg-shape="ledger"]{--sg-frame:11px} /* the injected bar already carries the wordmark on a phone, so the one inside the panel would be the second of two */ .sg-hero .sg-logo{display:none} } /* ---------- the wayfinder ---------- */ /* A hairline of progress along the top edge, and a quiet capsule naming the part of the argument you are in. Both fixed, both cheap, neither asking for attention. */ .sgw-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:8000; transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,rgba(92,129,48,.55),var(--brass,#5c8130)); transition:transform .12s linear;pointer-events:none} .sgw{position:fixed;left:var(--sg-frame);bottom:var(--sg-frame);z-index:8000; display:inline-flex;align-items:center;gap:10px; padding:9px 15px 9px 13px;border-radius:999px; font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600; color:#e9efe0;background:rgba(12,20,12,.6); border:1px solid rgba(238,243,230,.16); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .4s cubic-bezier(.32,.72,0,1), transform .4s cubic-bezier(.32,.72,0,1), color .3s ease,background-color .3s ease,border-color .3s ease} .sgw.is-on{opacity:1;transform:translateY(0)} /* over the paper sections it inverts, so it stays legible without a scrim */ .sgw.on-paper{color:#26331f;background:rgba(255,255,255,.72); border-color:rgba(27,36,24,.14)} .sgw-n{font-variant-numeric:tabular-nums;color:var(--brass,#a9c86a);opacity:.95} .sgw.on-paper .sgw-n{color:#5c8130} .sgw-sep{width:1px;height:11px;background:currentColor;opacity:.22} .sgw-t{font-weight:500;letter-spacing:.1em;white-space:nowrap; max-width:44vw;overflow:hidden;text-overflow:ellipsis} @media(max-width:700px){ .sgw{padding:8px 13px 8px 11px;font-size:10px;gap:8px} .sgw-t{max-width:56vw} } @media(prefers-reduced-motion:reduce){ .sgw,.sgw-bar{transition:none} } @media(prefers-reduced-transparency:reduce){ .sgw{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,20,12,.92)} .sgw.on-paper{background:#fff} } @media print{ .sgw,.sgw-bar{display:none} }