/* ========================================================= SPOKANE WEB STUDIO — "modern" refinement layer (PROPOSAL) Loads AFTER brand.css + site.css. Purely additive — it does not modify any existing rule, so deleting this file returns the site exactly to its current state. What it adds 1. SCENES — full-bleed photographs sitting behind content under a translucent colour wash ("you can see through the colours"). Basalt scrim guarantees contrast; the copper/river tint is the part you see through. 2. PARALLAX — the photo drifts slower than the page as you scroll. CSS scroll-driven where supported, tiny JS fallback otherwise, off entirely for reduced-motion. 3. THE SIGNATURE, EXTENDED — the wash is banded into five vertical columns at the mark's rising heights, so even the photo treatment is the basalt-column motif. 4. Real portfolio screenshots in browser frames. ========================================================= */ /* --------------------------------------------------------- 1. Wash tokens. Three review variants, set on : .wash--whisper photo barely present (most conservative) .wash--balanced RECOMMENDED default .wash--immersive photo clearly visible through the colour The copy scrim is deliberately NOT part of the variant — it is the constant that keeps text at WCAG AA no matter which look is chosen. --------------------------------------------------------- */ :root { --scene-veil: .58; /* flat darkening across the whole band */ --scene-tint: .30; /* copper/river colour you see through */ --scene-band: .06; /* five-column banding, decoration only */ --scene-blur: 0px; } /* The blur is not decoration. The montage contains real headlines from real sites; unblurred, they compete with the actual H1 for the reader's eye. Softening them keeps the photograph a texture. */ body.wash--whisper { --scene-veil: .82; --scene-tint: .14; --scene-band: .04; --scene-blur: 4px; } body.wash--balanced { --scene-veil: .60; --scene-tint: .30; --scene-band: .06; --scene-blur: 2px; } body.wash--immersive { --scene-veil: .34; --scene-tint: .50; --scene-band: .09; --scene-blur: 1px; } /* Text tokens for use over a photograph. Lighter than the flat on-dark tokens because a photo raises the worst-case background luminance. Checked against a pure-white photo. */ :root { --on-scene: #FFFFFF; --on-scene-soft: #DCE0E4; } /* --------------------------------------------------------- 2. The scene primitive --------------------------------------------------------- */ .scene { position: relative; isolation: isolate; overflow: hidden; background: var(--basalt); color: var(--on-scene); } .scene > .wrap, .scene__inner { position: relative; z-index: 3; } .scene__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .scene__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; /* Oversized so the parallax drift never exposes an edge. */ transform: translate3d(0, 0, 0) scale(1.18); will-change: transform; filter: blur(var(--scene-blur)); } /* A short, wide band crops a 16:10 screenshot down to a sliver of chrome, which reads as an artefact rather than a photograph. --zoom pushes past the browser bar into the imagery itself. */ .scene--zoom .scene__media img { object-position: center 62%; transform: translate3d(0, 0, 0) scale(1.75); } /* --- Wash stack ------------------------------------------------ layer 1 flat veil (variant-controlled) layer 2 colour tint (variant-controlled — the "see through the colours" layer) layer 3 five-column band (the signature) layer 4 copy scrim (CONSTANT — this is what protects legibility, so the variants can never push text below AA) ---------------------------------------------------------------- */ .scene__wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .scene__wash::before { content: ""; position: absolute; inset: 0; background: /* layer 3 — five rising columns of wash, the mark as a filter */ linear-gradient(90deg, rgba(232, 200, 122, var(--scene-band)) 0 18%, rgba(232, 200, 122, calc(var(--scene-band) * .4)) 18% 20%, rgba(180, 73, 31, var(--scene-band)) 20% 38%, rgba(180, 73, 31, calc(var(--scene-band) * .4)) 38% 40%, rgba(31, 78, 95, var(--scene-band)) 40% 58%, rgba(31, 78, 95, calc(var(--scene-band) * .4)) 58% 60%, rgba(180, 73, 31, calc(var(--scene-band) * 1.8)) 60% 78%, rgba(180, 73, 31, calc(var(--scene-band) * .4)) 78% 80%, rgba(232, 200, 122, var(--scene-band)) 80% 100%), /* layer 2 — the colour you see through */ radial-gradient(120% 100% at 84% 4%, rgba(180, 73, 31, var(--scene-tint)), transparent 62%), radial-gradient(100% 90% at 4% 100%, rgba(31, 78, 95, var(--scene-tint)), transparent 66%), /* layer 1 — flat veil */ linear-gradient(rgba(20, 24, 29, var(--scene-veil)), rgba(20, 24, 29, var(--scene-veil))); } .scene__wash::after { content: ""; position: absolute; inset: 0; /* layer 4 — the contrast guarantee under the copy column. Constant across all three wash variants. */ background: linear-gradient(100deg, rgba(20, 24, 29, .93) 0%, rgba(20, 24, 29, .88) 34%, rgba(20, 24, 29, .52) 66%, rgba(20, 24, 29, .34) 100%); } .scene--center .scene__wash::after { background: linear-gradient(180deg, rgba(20, 24, 29, .58) 0%, rgba(20, 24, 29, .88) 46%, rgba(20, 24, 29, .88) 62%, rgba(20, 24, 29, .58) 100%); } /* Text colours inside a scene */ .scene .lead, .scene .section-head p, .scene p { color: var(--on-scene-soft); } .scene h1, .scene h2, .scene h3, .scene strong { color: var(--on-scene); } .scene .eyebrow { color: var(--wheat); } .scene .hero__sub, .scene .hero__trust p, .scene .stat__lab, .scene .step p { color: var(--on-scene-soft); } /* --------------------------------------------------------- 3. Parallax — photo drifts slower than the page. Preferred path is CSS scroll-driven animation: it runs off the main thread, so it costs essentially nothing in Core Web Vitals. js/modern.js only takes over if unsupported. --------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .scene__media img { animation: sceneDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } html[data-parallax="js"] .scene__media img { animation: none; } } } @keyframes sceneDrift { from { transform: translate3d(0, -7.5%, 0) scale(1.18); } to { transform: translate3d(0, 7.5%, 0) scale(1.18); } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .scene--zoom .scene__media img { animation-name: sceneDriftZoom; } } } @keyframes sceneDriftZoom { from { transform: translate3d(0, -5%, 0) scale(1.75); } to { transform: translate3d(0, 5%, 0) scale(1.75); } } /* --------------------------------------------------------- 4. Reveal on scroll — one quiet gesture, used once per block --------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html[data-reveal="on"] .reveal { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .62s var(--ease), transform .62s var(--ease); } html[data-reveal="on"] .reveal.is-in { opacity: 1; transform: none; } html[data-reveal="on"] .reveal-stagger > * { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } html[data-reveal="on"] .reveal-stagger.is-in > * { opacity: 1; transform: none; } } /* --------------------------------------------------------- 5. Hero adjustments for the photographic treatment --------------------------------------------------------- */ .hero.scene::before { display: none; } /* retire the flat gradient */ .hero.scene .hero__grid { padding-block: clamp(4.4rem, 9vw, 7.2rem); } .hero.scene h1 { text-wrap: balance; } .hero.scene .hero__trust { border-top-color: rgba(245, 242, 236, .28); } /* The rising columns now read as glass standing on the photo. They are the mark, so the silhouette has to stay crisp: the dark inner tint gives the glass body against a busy photograph, and the bright top edge keeps each column's shoulder legible. */ .scene .rise__col { background: linear-gradient(180deg, rgba(245, 242, 236, .20), rgba(245, 242, 236, .04) 42%), linear-gradient(180deg, rgba(20, 24, 29, .30), rgba(20, 24, 29, .52)); border-color: rgba(245, 242, 236, .46); backdrop-filter: blur(9px) saturate(125%); -webkit-backdrop-filter: blur(9px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 22px 52px rgba(0, 0, 0, .46); } .scene .rise__col::before { background: linear-gradient(180deg, rgba(232, 200, 122, .22), transparent); } .scene .rise__col--accent { background: linear-gradient(180deg, rgba(226, 112, 58, .95), rgba(156, 59, 20, .96)); border-color: rgba(255, 255, 255, .34); } /* --------------------------------------------------------- 6. Portfolio screenshots in a browser frame --------------------------------------------------------- */ .shot { position: relative; width: 100%; height: 100%; background: var(--basalt-2); display: flex; flex-direction: column; } .shot__bar { flex: none; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: linear-gradient(180deg, #2C343D, #222931); border-bottom: 1px solid rgba(0, 0, 0, .34); } .shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 242, 236, .28); } .shot__bar span { margin-left: 8px; font-family: var(--body); font-size: .64rem; font-weight: 600; letter-spacing: .04em; color: rgba(245, 242, 236, .62); background: rgba(0, 0, 0, .28); border-radius: 999px; padding: 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot__img { flex: 1; overflow: hidden; } .shot__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s var(--ease); } .work:hover .shot__img img { transform: scale(1.035); } /* Case-study media on the Work page */ .case__media .shot__img img { object-position: top center; } /* --------------------------------------------------------- 7. Proof + CTA scenes --------------------------------------------------------- */ .proof.scene .proof__card { background: rgba(245, 242, 236, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .proof.scene .proof__card p { color: var(--ink-soft); } .proof.scene .proof__card h3 { color: var(--ink); } .cta-band.scene { background: var(--copper); } .cta-band.scene .scene__wash::before { background: radial-gradient(110% 100% at 20% 0%, rgba(20, 24, 29, calc(var(--scene-tint) * .8)), transparent 64%), linear-gradient(rgba(180, 73, 31, calc(var(--scene-veil) + .30)), rgba(156, 59, 20, calc(var(--scene-veil) + .34))); } .cta-band.scene .scene__wash::after { background: linear-gradient(180deg, rgba(180, 73, 31, .60) 0%, rgba(156, 59, 20, .84) 50%, rgba(180, 73, 31, .60) 100%); } .cta-band.scene p { color: rgba(255, 255, 255, .96); } /* --------------------------------------------------------- 8. Homepage FAQ — the answers the JSON-LD already claims. (Structured data must match content a visitor can read.) --------------------------------------------------------- */ .faq-home { max-width: 52rem; margin-inline: auto; } .faq-home details { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem 1.3rem; margin-bottom: .7rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .faq-home details[open] { border-color: var(--copper); box-shadow: var(--shadow-sm); } .faq-home summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.06rem; padding: 1.05rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--ink); } .faq-home summary::-webkit-details-marker { display: none; } .faq-home summary::after { content: ""; flex: none; width: 13px; height: 13px; border-right: 2.5px solid var(--copper-ink); border-bottom: 2.5px solid var(--copper-ink); transform: rotate(45deg) translate(-2px, -2px); transition: transform .22s var(--ease); } .faq-home details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq-home details p { color: var(--ink-soft); margin: 0 0 1.1rem; font-size: .99rem; } /* --------------------------------------------------------- 9. Small polish --------------------------------------------------------- */ /* The header is sticky, so it floats over photographs, paper and copper alike. Keep it opaque enough that the nav never drops below AA over a light band. */ .site-header { background: rgba(20, 24, 29, .90); } .svc, .work, .member { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } /* Section label used above the photographic bands */ .scene .section-head { max-width: 44rem; } /* --------------------------------------------------------- 10. ACCESSIBILITY CORRECTIONS These two contrast failures are NOT caused by this layer — they exist in the site as it stands today, on every page. Fixed here so the proposal is clean; they should also be fixed properly in css/site.css. See the review notes. --------------------------------------------------------- */ /* (a) The "Get found" nav button renders its label in --on-dark-soft, not white: `.nav-links a` (0,1,1) outranks `.nav-cta` (0,1,0). Grey on copper measures 2.89:1 — it needs 4.5:1. Raising specificity restores the intended white. */ .nav-links .nav-cta, .nav-links .nav-cta:hover { color: #fff; } /* (b) An .eyebrow on a dark band keeps its paper colour (--copper-ink) unless the band also carries .on-dark. On basalt that measures 2.59:1. Where the eyebrow sits inside .section-head it is instead inheriting body grey, which passes but breaks the wheat convention. One rule fixes both. */ .section--dark .eyebrow, .section--dark .section-head .eyebrow, .scene .section-head .eyebrow { color: var(--wheat); } .section--dark .eyebrow::before, .scene .eyebrow::before { background: var(--copper-lite); } /* (c) Footer column headings were

directly after an

, skipping a level (WCAG 1.3.1). They are

in the proposal files; this keeps them looking identical. / .footer-grid .footcol { font-family: var(--body); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; color: var(--wheat); margin: 0 0 1rem; } @media (max-width: 900px) { / Keep the photo readable on a phone: tighten the scrim, drop the directional gradient to a straight vertical one. / .scenewash::after { background: linear-gradient(180deg, rgba(20, 24, 29, .80) 0%, rgba(20, 24, 29, .90) 100%) !important; } .scenemedia img { transform: translate3d(0, 0, 0) scale(1.10); } @keyframes sceneDrift { from { transform: translate3d(0, -4%, 0) scale(1.10); } to { transform: translate3d(0, 4%, 0) scale(1.10); } } } / --------------------------------------------------------- 5. Hero fold repair for the approved (longer) paragraph. The signed-off hero copy is four sentences instead of two, which pushed the buttons under the fold on a 1280x800 laptop and cut the paragraph in half on a phone. The copy is fixed, so the layout gives. All additive — site.css is untouched. --------------------------------------------------------- / / A slightly wider measure turns ~7 lines into ~5 without shrinking type. / .hero .herosub { max-width: 52ch; } / Short laptop screens: reclaim the generous hero padding so the two buttons — the only thing on the page that earns money — stay visible. / @media (min-width: 901px) and (max-height: 900px) { .hero .herogrid { padding-top: clamp(1.5rem, 3vh, 2.3rem); padding-bottom: clamp(1.5rem, 3vh, 2.3rem); } .hero h1 { margin-bottom: .85rem; font-size: clamp(2.3rem, 5.4vw, 3.7rem); } .hero .herosub { margin-bottom: 1.25rem; } .hero .herotrust { margin-top: 1.3rem; padding-top: 1rem; } } / Phone: put the message first. site.css sets `.rise { order: -1 }`, which stacks 240px of decoration above the headline — so on a phone you met the graphic before you met the sentence, and the paragraph fell off screen. Copy first, signature underneath it. / @media (max-width: 900px) { .hero .herogrid { padding-top: 1.7rem; padding-bottom: 2.4rem; gap: 1.8rem; } .hero .rise { order: 1; min-height: 170px; padding-top: .5rem; } .hero h1 { margin-bottom: .9rem; } .hero .herosub { margin-bottom: 1.25rem; max-width: 46ch; } .hero .herotrust { margin-top: 1.4rem; padding-top: 1rem; gap: .8rem 1.6rem; } } / Narrow phones: trim the headline a step so the two buttons clear the fold. / @media (max-width: 430px) { .hero h1 { font-size: 2.28rem; } .hero .herosub { font-size: 1.04rem; } } / --------------------------------------------------------- 11. INNER PAGES — Services / About / Contact Added 30 Jul when the three remaining pages were re-skinned to match the homepage. Same additive rule: nothing here modifies an existing declaration. --------------------------------------------------------- / / The inner-page head is now a photographic scene, so site.css's flat copper glow behind it is redundant. (It was already being painted over by the photograph — this just stops us rendering a gradient nobody can see.) / .pagehead.scene::before { display: none; } / Services: the small flag beside a service name. Replaces an inline-styled that read "· OUR EDGE" — same job, but as a proper chip that can also carry the "New" variant. / .svc-detailflag { display: inline-block; vertical-align: .18em; margin-left: .55rem; font-family: var(--body); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--copper); border-radius: 999px; padding: .26rem .62rem; white-space: nowrap; } / River blue rather than copper, so "New" reads as information and the copper chip stays the one that means "this is our edge". / .svc-detailflag--new { background: var(--river); } / The plain-English aside under the AI-chat service. Quieter than the body copy, but not a footnote — it carries the strongest argument. / .svc-detailaside { margin: 1rem 0 0; padding: .9rem 1.1rem; background: var(--wheat-tint); border-left: 3px solid var(--copper); border-radius: 0 var(--radius) var(--radius) 0; font-size: .93rem; color: var(--ink-soft); } / --------------------------------------------------------- 12. CONTACT — form outcome panels These replace the form in place, so the visitor gets one clear answer instead of a status line under a form they already filled. --------------------------------------------------------- / .form-result { border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--paper-2); } / Guard: an author `display` on .form-result would beat the UA's [hidden] rule and the panels would all show at once. / .form-result[hidden] { display: none; } .form-result h2 { font-size: 1.5rem; margin: .9rem 0 .6rem; } .form-result p { color: var(--ink-soft); margin: 0 0 .7rem; } .form-result p:last-of-type { margin-bottom: 0; } .form-resultico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; } .form-resultico svg { width: 24px; height: 24px; } .form-result--ok { border-color: var(--copper); box-shadow: var(--shadow-sm); } .form-result--ok .form-resultico { background: var(--copper); color: #fff; } .form-result--bad { border-color: var(--line-strong); background: var(--paper-3); } .form-result--bad .form-result__ico { background: var(--basalt); color: var(--wheat); } .form-result--bad .btn { margin-top: 1.1rem; } .form-result:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; } / --------------------------------------------------------- 13. ACCESSIBILITY FIXES from the 30 Jul audit --------------------------------------------------------- / / (a) WCAG 1.4.10 Reflow. contact.html scrolled sideways at 320px CSS width — 333px of content in a 320px window. Cause: a grid item's automatic minimum size is its min-content width, and the "What can we help with?"