* * That is the lantern and carved arch photograph, held at 10–12% over brown. * Rather than add new ornament, the same layer is re-pointed at the relief * derived from that very artwork — so the geometry is the site's own, now * reading as shallow cream-on-cream carving instead of a dim photograph. */ /* * ONE ornament system, not two. * * The scroll-revealed relief in cream-reveal.css now carries the lantern, arch * and motif field for the whole cream span, from the supplied artwork. The * storefront's own decorative layer would sit underneath it as a second, static * copy of the same idea — two ornament systems fighting for the same wall — so * it is switched off here rather than left to double up. */ #partners > div.pointer-events-none.absolute, #contact > div.pointer-events-none.absolute { background-image: none !important; opacity: 0 !important; } /* * The opposite edge: the geometric field, strongest at the outside and fading * inward so the centre stays quiet behind the text. * * Only one motif file is needed. The lantern already holds the left edge, so * the geometry only ever appears on the right — there is no mirrored second * copy to ship, and the asset itself was authored with its inner edge already * faded out so it dissolves rather than stopping on a line. */ /* The right-hand motif field is likewise the reveal's job now, so the static copy that used to sit here is gone. Nothing replaces it: the relief behind the page already reaches both edges of every cream section. */ /* Content sits above both decorative layers. */ #partners > div:not(.pointer-events-none), #contact > div:not(.pointer-events-none) { position: relative; z-index: 1; } /* ------------------------------------------------------- foreground colour --*/ /* * Only what the cream actually requires. Font, size, position and wording are * untouched; these rules change colour and nothing else. */ #partners, #contact { color: var(--oa-cream-ink) !important; } #partners .text-ivory, #contact .text-ivory { color: var(--oa-cream-ink) !important; } /* The storefront's ivory-at-opacity body copy becomes the soft ink. */ #partners [class*="text-ivory/"], #contact [class*="text-ivory/"] { color: var(--oa-cream-ink-soft) !important; } /* The script line and the bullet dots: bronze-soft was tuned for brown and is too pale on cream, so it steps down to the darker bronze already in the palette. Same hue family, readable ground. */ #partners .text-bronze-soft, #contact .text-bronze-soft { color: var(--oa-cream-bronze) !important; } #partners .bg-bronze-soft, #contact .bg-bronze-soft { background-color: var(--oa-cream-bronze) !important; } /* * Buttons keep their shape and size exactly; only the two colours swap so the * primary stays primary. Cream-on-brown becomes brown-on-cream. */ #partners .btn-ink.bg-ivory, #contact .btn-ink.bg-ivory { background-color: var(--oa-cream-ink) !important; color: var(--oa-cream) !important; } #partners .btn-ink.bg-ivory:hover, #contact .btn-ink.bg-ivory:hover { background-color: hsl(26 45% 15%) !important; } #partners .btn-outline, #contact .btn-outline { border-color: var(--oa-cream-ink) !important; color: var(--oa-cream-ink) !important; } #partners .btn-outline:hover, #contact .btn-outline:hover { background-color: hsl(38 46% 91%) !important; } /* Hairlines drawn for a dark ground. */ #partners [class*="border-ivory/"], #contact [class*="border-ivory/"] { border-color: var(--oa-cream-line) !important; } /* ------------------------------------------------- paper-like scrolling ----*/ /* * One sheet sliding past another. * * A shallow shadow along the top edge of each cream section, its opacity driven * by --oa-seam, which paper-scroll.js writes from the real scroll position. At * rest the value is 0 and the surface is seamless again — the shadow exists only * during the overlap. * * It is a pseudo-element, so it cannot affect layout, hit-testing or the * horizontal swipes inside these sections. Nothing is transformed and no height * is added anywhere. */ .oa-paper-ready #shop ~ section::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 26px; pointer-events: none; /* * Behind the content, deliberately. * * At z-index 2 this sat above the section's text. The fade that used to share * this corner did exactly that and washed out the reviews heading; a * decorative edge must never be able to cover a word, so it is put behind * everything the visitor reads. The sections paint no background of their * own, so it still shows against the cream. */ z-index: -1; opacity: var(--oa-seam, 0); background-image: linear-gradient( to bottom, hsl(28 30% 52% / .16) 0%, hsl(28 30% 52% / .07) 45%, hsla(28 30% 52% / 0) 100% ); /* A hairline where the two sheets meet, the same warm grey as the shadow. */ box-shadow: inset 0 1px 0 hsl(30 24% 62% / .28); transition: opacity .12s linear; } /* With the fade gone, the reviews boundary needs no special case — the one rule above now covers every cream section, reviews included. */ @media (prefers-reduced-motion: reduce) { /* Static sheet: no edge shadow at all. */ .oa-paper-ready #shop ~ section::before { opacity: 0; } } /* ------------------------------------------------- the scrolled reveal ----*/ /* * The canvas the frame sequence draws into. * * Body level and absolutely positioned in document coordinates, so it scrolls * with the page and React never sees it. Behind everything: z-index 0 against * content that establishes its own stacking above, plus a hard * pointer-events:none so it can never intercept a tap. */ #oa-reveal-seq { position: absolute; left: 0; width: 100%; z-index: 0; pointer-events: none; opacity: 0; /* raised to 1 by the first successful paint */ transition: opacity .35s linear; } /* * ONE reveal renderer at a time. * * Two exist on purpose. cream-reveal.js paints a single relief image behind a * travelling CSS mask — cheap, 137 KB, and a faithful enough approximation * because the supplied clip is a monotonic upward wipe. This canvas plays the * clip's actual 90 frames, which costs 1.4 MB and reproduces whatever the video * really does, including the cloth at the top that the mask version has to crop * away. * * The frames win when they are present; the mask is the automatic fallback when * they are not. cream-reveal.js bows out in script when a sequence is * configured, and this hides its host as well, so the lantern can never be * drawn twice by two systems disagreeing about where it is. */ .oa-seq-ready #oa-reveal { display: none !important; } /* Content sits above the canvas on every cream section. The static relief only ever needed this on Partners and Contact; the canvas spans them all. */ .oa-seq-ready body main > section:not(#shop) > div { position: relative; z-index: 1; } /* --------------------------------------------------------------- the footer --*/ /* * Untouched, and stated explicitly so a future edit does not sweep it up. The * cream stops at this boundary. */ footer.bg-ink { background-color: hsl(30 28% 11%) !important; background-image: none !important; } /* ------------------------------------------------------------------ mobile --*/ @media (max-width: 700px) { /* * Crop the decoration at the edges rather than shrinking the whole desktop * scene behind the text: the relief keeps its real size and simply runs off * the side, which is how carved plaster behaves on a narrow wall. */ #partners > div.pointer-events-none.absolute, #contact > div.pointer-events-none.absolute { background-size: auto 105% !important; background-position: left -120px top !important; } #partners::after, #contact::after { width: 44%; background-size: auto 100%; background-position: right top; } } /* --------------------------------------------------------- reduced motion --*/ /* Nothing here animates, but the paper grain is the one thing worth dropping for anyone who has asked for a calmer page on a slow device. */ @media (prefers-reduced-motion: reduce) { body { background-image: none; } }