/* Sagetree: shared section styles (light reading band + mandate ring card). Kept out of the per-page style blocks, which must stay byte-identical across all 8 pages. Linked by index.html and who-we-are.html. */ .bleed { margin-left: -4rem; margin-right: -4rem; } .bleed-in { max-width: 1240px; margin: 0 auto; padding: 0 4rem; } /* The card ends the light band, so cancel the parent section's bottom padding rather than leaving a tall empty strip beneath it. */ .light-band.flush-bottom { margin-bottom: -7rem; } /* Cancel the parent section's top padding too, so the cream band meets the band above it instead of leaving a redundant dark strip. */ .light-band.flush-top { margin-top: -7rem; } @media (max-width: 960px) { .light-band.flush-top { margin-top: -4rem; } .light-band.flush-bottom { margin-bottom: -4rem; } } /* ═══ LIGHT READING BAND ═══════════════════════════════════════ */ .light-band { /* Flat, not a gradient. Two adjacent bands each restarted the ramp, so one ended at #efe9db while the next began at #f6f2e8, and that tone step read as a line across continuous cream. */ background: #f3efe5; /* No hairlines. Two adjacent cream bands each drew one, putting a line across otherwise continuous cream. The cream-against-emerald contrast already separates the sections, and the emerald boxes mark the segments within them, so the rules were noise. */ padding: 6rem 0 0; /* margin-top only: a margin shorthand here would reset the negative inline margins .bleed uses to break out to full width. */ margin-top: 3.5rem; position: relative; } .light-band .section-title { color: #08211f; } .light-band .section-title strong { background: none; -webkit-text-fill-color: #8a6a33; color: #8a6a33; font-weight: 600; } .light-band .section-tagline { color: #7a6437; font-weight: 600; } .light-band .who-body p, .light-band .phil-teaser p { font-size: 1rem; line-height: 1.8; } .light-band .gold-line { background: linear-gradient(90deg, #8a6a33, transparent); } .light-band .who-body p { color: rgba(18,54,52,0.80); } .light-band .who-pull blockquote p { color: #0c2b29; } .light-band .who-pull::before { color: rgba(138,106,51,0.30); } .light-band .who-pull-rule { background: linear-gradient(90deg, #8a6a33, transparent); } .light-band .phil-teaser { border-left-color: rgba(138,106,51,0.45); } .light-band .phil-teaser p { color: rgba(18,54,52,0.82); } .light-band .btn-ghost { color: rgba(18,54,52,0.70); } .light-band .btn-ghost:hover { color: #8a6a33; } /* The section label now lives on the cream ground with the copy it introduces, so it must be recoloured for that ground. */ .light-band .chapter-bar { margin-bottom: 2.6rem; } .light-band .cb-name { color: #7a6437; } .light-band .cb-rule { background: linear-gradient(90deg, rgba(138,106,51,0.45), transparent); } .light-band .cb-tree svg { opacity: 0.85; } .light-band .back-link { color: rgba(18,54,52,0.62); } .light-band .back-link:hover { color: #8a6a33; } /* ═══ MANDATE: RING CROSS-SECTION ══════════════════════════════ */ /* A narrower card than the page, so its width itself is a contrast. Copy sits top-left; the trunk is anchored into the bottom-right corner and bleeds past it, the way a large object should meet a frame. */ .rings-band { --r-ease: cubic-bezier(.22,.68,.24,1); background: radial-gradient(115% 90% at 78% 88%, rgba(26,85,80,0.34) 0%, rgba(14,61,58,0.12) 46%, transparent 74%), linear-gradient(180deg, #0a2f2d 0%, #082828 100%); border: 1px solid rgba(201,169,110,0.16); border-radius: 24px; position: relative; overflow: hidden; /* the trunk bleeds into the corner */ max-width: 1520px; margin: 4.5rem auto 0; box-shadow: 0 34px 90px rgba(3,18,18,0.30), inset 0 1px 0 rgba(255,255,255,0.05); } .rings-scroll { position: relative; } .rings-pin { padding: 0; } .rings-stage { position: relative; width: 100%; min-height: 520px; /* long and low, not square */ padding: 2.8rem 3.2rem 2.6rem; } /* ---- copy, top left ---- */ .rings-copy { position: relative; z-index: 2; max-width: 50%; } .rings-copy .section-label { justify-content: flex-start; } .rings-band .section-title { font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 200; line-height: 1.14; margin-bottom: 0.6rem; text-align: left; } .rings-band .gold-line { margin: 0.8rem 0 0.9rem; } .rings-intro { color: var(--muted); font-size: 0.95rem; line-height: 1.55; max-width: 52ch; margin: 0 0 1.2rem; } /* ---- the four decks ---- */ /* No rules between the principles. Spacing and the live state separate them; hairlines only added noise. */ .decks { display: grid; gap: 0.15rem; } .deck { display: grid; grid-template-columns: 2.6rem 1fr; align-items: start; gap: 0 0.6rem; padding: 0.72rem 0; text-align: left; background: none; border: 0; font: inherit; color: inherit; width: 100%; cursor: default; position: relative; } .deck::before { content: ''; position: absolute; left: -1.4rem; top: 0; bottom: 0; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--r-ease); } .deck.live::before { transform: scaleY(1); } .deck:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; } .deck-num { font-family: var(--heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; color: rgba(245,240,232,0.34); padding-top: 0.35rem; transition: color .45s var(--r-ease); } .deck.live .deck-num { color: var(--gold); text-shadow: 0 0 12px rgba(201,169,110,0.5); } .deck-ttl { display: block; font-family: var(--heading); font-weight: 400; font-size: 1.02rem; line-height: 1.35; color: var(--muted); transition: font-size .5s var(--r-ease), color .45s var(--r-ease), font-weight .45s var(--r-ease); } /* the glow enlarges the text, as asked */ .deck.live .deck-ttl { font-size: 1.32rem; font-weight: 500; color: var(--gold-light); text-shadow: 0 0 16px rgba(226,201,138,0.5), 0 0 42px rgba(201,169,110,0.26); } .deck-desc { display: grid; grid-template-rows: 1fr; opacity: 1; margin-top: 0.45rem; transition: grid-template-rows .5s var(--r-ease), opacity .4s ease, margin-top .5s var(--r-ease); } .deck-desc > span { overflow: hidden; display: block; } .deck-p { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1.65; max-width: 44ch; } .rings-band.js-on .deck { cursor: pointer; } .rings-band.js-on .deck-desc { grid-template-rows: 0fr; opacity: 0; margin-top: 0; } .rings-band.js-on .deck.live .deck-desc { grid-template-rows: 1fr; opacity: 1; margin-top: 0.45rem; } .rings-band.js-on .deck:hover .deck-ttl { color: var(--gold-light); } /* The dark card is nested inside the light band, so the light-ground text overrides further up would otherwise apply inside it. Undo them here. */ .light-band .rings-band .section-title { color: var(--white); } .light-band .rings-band .section-title strong { color: var(--gold); -webkit-text-fill-color: var(--gold); background: none; } .light-band .rings-band .section-label { color: var(--gold-light); } .light-band .rings-band .rings-intro, .light-band .rings-band .deck-p { color: var(--muted); } .light-band .rings-band .deck-ttl { color: var(--muted); } .light-band .rings-band .deck.live .deck-ttl { color: var(--gold-light); } .light-band .rings-band .deck-num { color: rgba(245,240,232,0.34); } .light-band .rings-band .deck.live .deck-num { color: var(--gold); } .light-band .rings-band .gold-line { background: linear-gradient(90deg, var(--gold), transparent); } /* ---- connector: joins the live deck to the ring it names ---- */ .deck-link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; /* over the trunk */ } .deck-link-path { fill: none; stroke: var(--gold-light); stroke-width: 1.3; stroke-opacity: 0.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(8,40,40,0.9)); /* legible over the wood */ transition: stroke-dashoffset .75s var(--r-ease), stroke-opacity .4s ease; } .deck-link-tip { fill: #f0dca5; opacity: 0; r: 5; transition: opacity .4s ease .25s; filter: drop-shadow(0 0 5px rgba(240,220,165,0.85)); } .deck-link.on .deck-link-tip { opacity: 1; } /* Desktop only. With the trunk stacked under the copy on mobile there is no sensible line to draw, and the attempt read badly. */ @media (max-width: 960px) { .deck-link { display: none; } } /* ---- trunk, anchored into the bottom-right corner ---- */ .trunk { position: absolute; z-index: 1; width: 620px; height: 620px; right: -150px; bottom: -190px; pointer-events: none; } .rings-glow { position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(201,169,110,0.20) 0%, rgba(201,169,110,0.08) 42%, transparent 70%), radial-gradient(closest-side, rgba(26,90,84,0.30) 0%, transparent 62%); opacity: 0.85; will-change: opacity; animation: glowBreathe 13s ease-in-out infinite; } @keyframes glowBreathe { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } } .rings-glow.glint { animation: glowBreathe 13s ease-in-out infinite, glintFlare 1.15s ease-out; } @keyframes glintFlare { 0% { filter: brightness(1) saturate(1); } 28% { filter: brightness(2.1) saturate(1.3); } 100% { filter: brightness(1) saturate(1); } } /* a full, continuous 360 turn */ .trunk-rotor { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; animation: trunkSpin 48s linear infinite; } @keyframes trunkSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .trunk-photo { position: absolute; inset: 0; display: block; } .trunk-photo img { width: 100%; height: 100%; object-fit: contain; display: block; filter: saturate(0.92) contrast(1.04); -webkit-mask-image: radial-gradient(circle at 50% 50%, #fff 56%, rgba(255,255,255,0.45) 66%, transparent 74%); mask-image: radial-gradient(circle at 50% 50%, #fff 56%, rgba(255,255,255,0.45) 66%, transparent 74%); } .trunk-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #rRingsDark { mix-blend-mode: multiply; } .r-ring-dark { fill: none; stroke: #2a1a0a; stroke-width: 2.6; stroke-opacity: 0.38; transition: stroke-width .45s var(--r-ease), stroke-opacity .45s var(--r-ease); } .r-ring-dark.seen { stroke-opacity: 0.5; stroke-width: 3.4; } .r-ring-dark.live { stroke-opacity: 1; stroke-width: 13; } .r-ring { fill: none; stroke: rgba(201,169,110,0); stroke-width: 1.2; transition: stroke .45s var(--r-ease), stroke-width .45s var(--r-ease), filter .45s var(--r-ease); } .r-ring.seen { stroke: rgba(201,169,110,0.22); } .r-ring.live { stroke: rgba(246,226,168,0.95); stroke-width: 3; filter: drop-shadow(0 0 7px rgba(226,201,138,0.75)); } @media (max-width: 960px) { .bleed { margin-left: -1.5rem; margin-right: -1.5rem; } .light-band { padding: 3.5rem 0 0; margin-top: 2.5rem; } .rings-band { border-radius: 14px; margin: 2.5rem 0.75rem 0; overflow: hidden; } .rings-stage { padding: 2.4rem 1.5rem 2rem; min-height: 0; } .rings-copy { max-width: none; } .rings-band .section-title { font-size: clamp(1.6rem, 7vw, 2.1rem); } .rings-intro { font-size: 1rem; } /* trunk moves below the copy and sits into the corner at a size that fits */ .trunk { position: relative; right: auto; bottom: auto; width: min(74vw, 300px); height: min(74vw, 300px); margin: 2.2rem auto 0.5rem; /* centred */ } .deck { grid-template-columns: 2.2rem 1fr; min-height: 48px; } .deck-num { font-size: 0.78rem; } .deck.live .deck-ttl { font-size: 1.2rem; } .deck-p { font-size: 0.95rem; } .deck::before { left: -0.7rem; } } @media (prefers-reduced-motion: reduce) { .rings-glow, .trunk-rotor { animation: none; } .r-ring, .r-ring-dark, .deck-num, .deck-ttl, .deck-desc, .deck::before { transition: none; } } /* The stats grid is driven from script as the hero docks; give it a transition so it still settles smoothly if a frame is dropped, and a sensible resting state when script does not run. */ .stats-grid { will-change: transform, opacity; } /* ═══ SERVICES ON CREAM, CARDS IN EMERALD ══════════════════════ */ .light-band .services-header .section-title { color: #08211f; } .light-band .services-header .section-title strong { color: #8a6a33; -webkit-text-fill-color: #8a6a33; background: none; } .light-band .section-desc { color: rgba(18,54,52,0.78); } .light-band .section-desc em { color: #8a6a33 !important; } .light-band .view-all, .light-band .services-more .btn-ghost { color: rgba(18,54,52,0.70); } .light-band .view-all:hover, .light-band .services-more .btn-ghost:hover { color: #8a6a33; } /* the cards keep the emerald so they read as objects on the cream */ .light-band .svc-card { background: linear-gradient(180deg, #0e3d3a 0%, #0a2f2d 100%); border-color: rgba(201,169,110,0.22); box-shadow: 0 18px 44px rgba(3,18,18,0.22); backdrop-filter: none; -webkit-backdrop-filter: none; } .light-band .svc-card:hover { border-color: rgba(201,169,110,0.42); } .light-band .svc-card-title { color: var(--white); } .light-band .svc-card-desc { color: rgba(245,240,232,0.74); } .light-band .svc-card-list li { color: var(--cream); } .light-band .svc-card-tag, .light-band .svc-card-cta { color: var(--gold-light); } @media (max-width: 960px) { /* project rule: nothing below ~11.5px on mobile. These two were 9.6px and 9.9px, inherited from the original card styles. */ .light-band .svc-card-tag { font-size: 0.75rem; } .light-band .svc-card-cta { font-size: 0.75rem; } } /* A real button on the cream ground. As a faint ghost link at 0.65rem in muted cream it was effectively invisible, and it sat hard against the band's bottom edge with no room to breathe. */ .light-band .teaser-more { margin-top: 2.8rem; padding-bottom: 0.5rem; } .btn-cream { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: #6d5427; background: transparent; border: 1px solid rgba(138,106,51,0.55); border-radius: 2px; padding: 0.95rem 1.9rem; min-height: 48px; transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } .btn-cream:hover { background: #8a6a33; border-color: #8a6a33; color: #f6f2e8; box-shadow: 0 8px 22px rgba(138,106,51,0.28); } .btn-cream:focus-visible { outline: 2px solid #8a6a33; outline-offset: 3px; } @media (max-width: 960px) { .btn-cream { width: 100%; justify-content: center; padding: 1rem 1.4rem; } .light-band .teaser-more { margin-top: 2rem; } } /* flush-bottom pulls the band over the section's bottom padding, which is right for the mandate card (it ends the band) but leaves the services button pressed against the edge. Give this band its own bottom room. */ .services-section .light-band { padding-bottom: 5rem; } @media (max-width: 960px) { .services-section .light-band { padding-bottom: 3rem; } } /* Adjacent cream bands should read as one sheet of paper, not two. Deliberately does NOT set margin-top: it has the same specificity as .light-band.flush-top and would cancel the flush, leaving a block of section padding showing as a dark strip between the two bands. */ /* The hero must not paint its own ground. Any colour it paints, animated or not, is a second surface composited over the same orbs as the section below, and two surfaces can always be told apart. With none, the gutter revealed as the hero docks IS the page ground, identical by construction to the stats section and everything after it. */ .hero { background: transparent !important; } /* ═══ WHO WE SERVE: cream ground, emerald panel ════════════════ */ .light-band .serve-section .section-title, .serve-section .light-band .section-title { color: #08211f; } .serve-section .light-band .section-title strong { color: #8a6a33; -webkit-text-fill-color: #8a6a33; background: none; } .serve-section .light-band .section-desc { color: rgba(18,54,52,0.78); } /* WHO WE SERVE: a cream panel holding the root system, with the six segments as emerald cards either side. Gold on this cream ground is #8a6a33, not the --gold used on the dark sections, which is too light to read here. */ .serve-panel { position: relative; background: #f8f4ec; border: 1px solid rgba(138,106,51,0.18); border-radius: 24px; padding: 2.6rem 2.4rem; margin-top: 2.6rem; box-shadow: 0 22px 56px rgba(60,45,20,0.10); overflow: hidden; } /* One grid: cards left, roots centre, cards right. The grid places everything, so two cards cannot occupy the same space however the copy grows, and the six segments exist once in the DOM rather than once per layout. */ .srv-stage { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 40%) 1fr; grid-template-rows: repeat(3, auto); gap: 1rem 1.5rem; align-items: stretch; } .srv-card[data-side="l"] { grid-column: 1; } .srv-card[data-side="r"] { grid-column: 3; } .srv-card[data-n="01"], .srv-card[data-n="02"] { grid-row: 1; } .srv-card[data-n="03"], .srv-card[data-n="04"] { grid-row: 2; } .srv-card[data-n="05"], .srv-card[data-n="06"] { grid-row: 3; } .srv-roots { position: relative; grid-column: 2; grid-row: 1 / 4; align-self: center; } .srv-roots img { display: block; width: 100%; height: auto; } /* The root system is not animated in. A 2.4s clip-path wipe, plus the delay before the cards followed, left the section visibly assembling itself for over three seconds. The artwork now simply renders; only the cards move. */ .srv-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; } /* the halo keeps the connector legible where it crosses dark wood */ .srv-link-halo { fill: none; stroke: #f8f4ec; stroke-width: 3.4; stroke-opacity: 0.55; } .srv-link { fill: none; stroke: #8a6a33; stroke-width: 1.2; stroke-opacity: 0.75; } .srv-dot { fill: #c9a96e; stroke: #f8f4ec; stroke-width: 1.2; } .srv-card { background: linear-gradient(180deg, #0e3d3a 0%, #0a2f2d 100%); border: 1px solid rgba(201,169,110,0.26); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 14px 34px rgba(3,18,18,0.18); position: relative; z-index: 2; transition: opacity 0.45s cubic-bezier(0.22,0.68,0.24,1), transform 0.45s cubic-bezier(0.22,0.68,0.24,1); } .srv-stage.js .srv-card { opacity: 0; transform: translateY(10px); } .srv-stage.js.grown .srv-card { opacity: 1; transform: none; } /* a short stagger by number, so the six arrive in sequence rather than as one block. Last card starts at 300ms, so the whole section settles under 0.8s. */ .srv-stage.js .srv-card[data-n="02"] { transition-delay: 0.06s; } .srv-stage.js .srv-card[data-n="03"] { transition-delay: 0.12s; } .srv-stage.js .srv-card[data-n="04"] { transition-delay: 0.18s; } .srv-stage.js .srv-card[data-n="05"] { transition-delay: 0.24s; } .srv-stage.js .srv-card[data-n="06"] { transition-delay: 0.30s; } /* the connectors follow the cards they point from */ .srv-stage.js .srv-links { opacity: 0; transition: opacity 0.5s ease 0.25s; } .srv-stage.js.grown .srv-links { opacity: 1; } .srv-card.flash { border-color: rgba(201,169,110,0.9); box-shadow: 0 0 0 2px rgba(201,169,110,0.25); } /* project rule: nothing below ~11.5px. 0.72rem is 11.52px. */ .srv-num { display: block; font-family: var(--heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; color: var(--gold-light); margin-bottom: 0.25rem; } .srv-ttl { display: block; font-weight: 500; font-size: 0.95rem; color: var(--white); line-height: 1.3; margin-bottom: 0.3rem; } .srv-desc { display: block; font-size: 0.8rem; font-weight: 300; color: var(--muted); line-height: 1.6; } .srv-pins { position: absolute; left: 0; right: 0; pointer-events: none; display: none; z-index: 3; } .srv-pin { position: absolute; transform: translate(-50%,-50%); pointer-events: auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: none; color: var(--gold-light); font-family: var(--heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; transition: color 0.3s; /* 44px stays the touch target. The visible disc sits inside it, so a full breath never reaches a neighbour even at 320px. Per-orb rhythm is set from JS: no two of the six breathe alike. */ --amp: 1.06; --dx: 0px; --dy: -4px; --dur: 6s; --del: 0s; --gdur: 7s; --gdel: 0s; --sel: 1; animation: srvOrbFloat var(--dur) var(--del) ease-in-out infinite; } .srv-pin::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; z-index: -1; background: linear-gradient(180deg, #0e3d3a 0%, #0a2f2d 100%); border: 1px solid rgba(201,169,110,0.6); box-shadow: 0 4px 12px rgba(3,18,18,0.3); transition: background 0.3s; } .srv-pin::after { content: ''; position: absolute; inset: -11px; border-radius: 50%; pointer-events: none; z-index: -2; background: radial-gradient(circle, rgba(201,169,110,0.42), rgba(201,169,110,0) 70%); animation: srvOrbGlow var(--gdur) var(--gdel) ease-in-out infinite; } .srv-pin.on { color: #f6f2e8; --sel: 1.08; } .srv-pin.on::before { background: var(--gold); } @keyframes srvOrbFloat { 0%, 100% { transform: translate(-50%,-50%) translate(0,0) scale(var(--sel)); } 50% { transform: translate(-50%,-50%) translate(var(--dx), var(--dy)) scale(calc(var(--sel) * var(--amp))); } } @keyframes srvOrbGlow { 0%, 100% { opacity: 0.18; transform: scale(0.94); } 50% { opacity: 0.62; transform: scale(1.1); } } @media (max-width: 960px) { /* .bleed-in keeps its 4rem padding on mobile, which leaves only 258px of content at a 390px viewport. The heading stays on that measure so it lines up with the sections above and below, but the root system needs the width, so the panel alone claws back all but 1.25rem of it. */ .serve-panel { padding: 1.4rem 1.1rem; border-radius: 14px; margin-top: 1.8rem; margin-left: -2.75rem; margin-right: -2.75rem; } /* the roots come first, the six segments stack underneath in DOM order */ .srv-stage { grid-template-columns: 1fr; grid-template-rows: none; gap: 0.7rem; } .srv-card[data-side="l"], .srv-card[data-side="r"] { grid-column: 1; } .srv-card { grid-row: auto !important; scroll-margin-top: calc(var(--hdr) + 14px); } .srv-roots { grid-column: 1; grid-row: auto; align-self: auto; margin-bottom: 0.5rem; } .srv-links { display: none; } .srv-pins { display: block; } } @media (prefers-reduced-motion: reduce) { .srv-roots, .srv-card, .srv-pin, .srv-links { transition: none; } .srv-pin, .srv-pin::after { animation: none; } } /* ── KNOWLEDGE BANK: the notes laid on a desk ───────────────────────────── The band takes the same measure as .rings-band, so the two feature panels on the homepage sit on one width. */ .kb-band { max-width: 1520px; margin: 2.6rem auto 0; border-radius: 24px; padding: 2.8rem 3.2rem 2.6rem; background: #0c1f1e; border: 1px solid rgba(201,169,110,0.16); box-shadow: 0 34px 90px rgba(3,18,18,0.30), inset 0 1px 0 rgba(255,255,255,0.05); } .kb-stage { position: relative; max-width: 1240px; margin: 0 auto; } .kb-frame { position: relative; } /* No drop-shadow filter here. A 60px blur on a 1240px image costs real paint work on a section the reader scrolls through, and against #0c1f1e the desk's dark edges gave it nothing visible to cast onto. */ .kb-desk { display: block; width: 100%; height: auto; } /* the reveal only runs once the script is in; without it the desk simply shows */ .kb-stage.js .kb-desk { opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 1s cubic-bezier(0.22,0.68,0.24,1), transform 1.2s cubic-bezier(0.22,0.68,0.24,1); } .kb-stage.js.in .kb-desk { opacity: 1; transform: none; } /* the lamp already lights the desk in the photograph; this only carries that pool of light onto what is laid on top of it */ .kb-pool { position: absolute; left: 52%; top: 2%; width: 56%; height: 78%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,214,140,0.20), rgba(255,214,140,0) 78%); } .kb-stage.js .kb-pool { opacity: 0; transition: opacity 1.4s cubic-bezier(0.22,0.68,0.24,1) 0.5s; } .kb-stage.js.in .kb-pool { opacity: 1; } /* Papers on the desk. Positions are percentages of the artwork, so they hold at any size the band is rendered at. The lamp sits top right, so the three notes take the clear left two thirds. */ .kb-papers { display: contents; } .kb-note { position: absolute; text-align: left; border-radius: 3px; padding: 1rem 1.05rem; background: linear-gradient(168deg, #f5f1e6, #ece6d8); box-shadow: 0 22px 34px -14px rgba(0,0,0,0.72), 0 3px 9px rgba(0,0,0,0.38); transition: transform 0.55s cubic-bezier(0.22,0.68,0.24,1), box-shadow 0.45s cubic-bezier(0.22,0.68,0.24,1); } .kb-note:nth-of-type(1) { left: 6.5%; top: 17%; width: 20.5%; height: 47%; --rot: -1.4deg; } .kb-note:nth-of-type(2) { left: 30%; top: 19%; width: 20.5%; height: 47%; --rot: 0.8deg; } .kb-note:nth-of-type(3) { left: 53.5%; top: 17.5%; width: 20.5%; height: 47%; --rot: -0.6deg; } .kb-stage .kb-note { transform: rotate(var(--rot)); } .kb-stage.js .kb-note { opacity: 0; transition: opacity 0.8s cubic-bezier(0.22,0.68,0.24,1), transform 0.55s cubic-bezier(0.22,0.68,0.24,1), box-shadow 0.45s cubic-bezier(0.22,0.68,0.24,1); } .kb-stage.js.in .kb-note { opacity: 1; } .kb-stage.in .kb-note:hover { transform: rotate(calc(var(--rot) * 0.3)) translateY(-9px); box-shadow: 0 34px 48px -16px rgba(0,0,0,0.78), 0 5px 12px rgba(0,0,0,0.42); } .kb-tag { display: block; font-family: var(--heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #8a6a33; margin-bottom: 0.3rem; } .kb-rule { display: block; width: 26px; height: 1px; background: rgba(138,106,51,0.45); margin-bottom: 0.7rem; } .kb-ttl { display: block; font-family: var(--heading); font-size: 0.95rem; font-weight: 600; color: #122f2c; line-height: 1.28; margin-bottom: 0.45rem; } .kb-ex { display: block; font-size: 0.78rem; font-weight: 300; color: rgba(18,47,44,0.68); line-height: 1.6; } .kb-soon { display: block; font-family: var(--heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8a6a33; margin-top: auto; padding-top: 0.8rem; } .kb-note { display: flex; flex-direction: column; } .kb-seeall { display: none; } /* ── narrow: the desk is cropped, the notes become one sheet of headings ── The artwork is only fully opaque inside x 4..96% and y 1..87%: below that are the drawers, the knee hole and the ragged front edge. The crop is sized so the whole visible window falls inside that region, which is what keeps the sheet from appearing to hang off the desk. */ @media (max-width: 960px) { .kb-band { padding: 2.4rem 1.5rem 2rem; border-radius: 14px; margin-bottom: 2.5rem; } .kb-stage { max-width: none; } .kb-frame { height: 400px; overflow: hidden; border-radius: 8px; --dh: 525px; --dx: -62%; --dtop: -5px; box-shadow: 0 16px 26px rgba(0,0,0,0.4); } /* .kb-stage.js.in .kb-desk sets transform:none for the wide entrance and outranks a bare .kb-desk, so the crop offset needs matching specificity */ .kb-stage .kb-desk, .kb-stage.js.in .kb-desk { position: absolute; top: var(--dtop); left: 0; height: var(--dh); width: auto; max-width: none; opacity: 1; transform: translateX(var(--dx)); filter: none; border-radius: 0; } .kb-stage.js .kb-frame { opacity: 0; transition: opacity 1s cubic-bezier(0.22,0.68,0.24,1); } .kb-stage.js.in .kb-frame { opacity: 1; } .kb-pool { display: none; } .kb-papers { display: block; position: absolute; left: 9%; right: 9%; bottom: 7%; background: linear-gradient(168deg, #f5f1e6, #ece6d8); border-radius: 3px; padding: 0.7rem 0.85rem; transform: rotate(-1deg); box-shadow: 0 20px 32px -12px rgba(0,0,0,0.72), 0 3px 9px rgba(0,0,0,0.4); } /* .kb-note:nth-of-type() outranks a bare .kb-note, so the desktop geometry has to be undone at matching specificity */ .kb-note:nth-of-type(1), .kb-note:nth-of-type(2), .kb-note:nth-of-type(3) { left: auto; top: auto; width: 100%; height: auto; } .kb-note { position: static; display: block; padding: 0.42rem 0; opacity: 1; background: none; box-shadow: none; border-radius: 0; transform: none !important; border-bottom: 1px solid rgba(138,106,51,0.2); } .kb-note:last-of-type { border-bottom: 0; } .kb-rule, .kb-ex, .kb-soon { display: none; } .kb-tag { margin-bottom: 0.12rem; } .kb-ttl { font-size: 0.86rem; line-height: 1.25; margin-bottom: 0; } .kb-seeall { display: block; width: 100%; min-height: 44px; margin-top: 0.8rem; padding: 0.75rem; border: 0; border-radius: 3px; cursor: pointer; font-family: var(--heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2a2013; background: linear-gradient(180deg, var(--gold-light), var(--gold)); box-shadow: 0 6px 14px -6px rgba(0,0,0,0.5); } /* opened: the sheet leaves the desk and becomes the full three notes */ .kb-stage.open .kb-papers { position: static; transform: none; margin-top: 0.9rem; padding: 0.9rem 1rem; } .kb-stage.open .kb-note { padding: 0.75rem 0; } .kb-stage.open .kb-ex { display: block; font-size: 0.8rem; margin-top: 0.25rem; } .kb-stage.open .kb-soon { display: block; padding-top: 0.5rem; } .kb-stage.open .kb-ttl { font-size: 0.95rem; margin-bottom: 0.1rem; } } @media (max-width: 360px) { /* a narrower window, so the lamp takes a bigger share of it and the object is unmistakably a desk */ .kb-frame { height: 300px; --dh: 357px; --dx: -61%; --dtop: -4px; } .kb-papers { left: 7%; right: 7%; } .kb-ttl { font-size: 0.82rem; } } @media (prefers-reduced-motion: reduce) { .kb-desk, .kb-note, .kb-frame, .kb-pool { transition: none; } } /* The heading sits on cream; the subscribe row lives inside the dark panel with the desk, so it keeps the original dark-ground palette. */ .knowledge-section .light-band .section-desc { color: rgba(18,54,52,0.78); } /* Subscribe closes the panel rather than trailing after it on the cream, where it finished a few pixels from the section boundary. A hairline separates it from the desk so it reads as a footer to the panel, not as a second piece of content competing with it. */ .kb-band .knowledge-subscribe { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.4rem; padding: 1.9rem 0 0; border-top: 1px solid rgba(201,169,110,0.16); } .kb-band .knowledge-subscribe-text { min-width: 0; } .kb-band .knowledge-subscribe-title { margin-bottom: 0.3rem; } .kb-band .knowledge-subscribe-desc { max-width: 52ch; } /* .light-band has no bottom padding and .flush-bottom cancels the section's, so the cream would end hard against the panel. Give it room to finish. */ .knowledge-section .light-band { padding-bottom: 5.5rem; } @media (max-width: 960px) { .knowledge-section .light-band { padding-bottom: 3rem; } .kb-band .knowledge-subscribe { margin-top: 1.6rem; padding-top: 1.4rem; } } /* ── CONTACT: the post box closes the chapter ──────────────────────────── Scoped with :has() because .cta-section is shared by all eight pages and only the homepage carries the plaque. */ .cta-section:has(.cta-plaque) { /* No painted background, so the page's emerald and its breathing orbs show through exactly as they do behind the stats cards under the hero. The page opens and closes on the same ground. */ background: none; padding-top: 6.5rem; } .cta-section:has(.cta-plaque)::before { display: none; } /* the orbs do this already */ /* The post box sits straight on the emerald. A cream mount read as a frame around a frame, since the door carries its own moulding. */ .cta-plaque { max-width: 720px; margin: 2.6rem auto 2.8rem; } .cta-plaque picture { display: block; } .cta-plaque img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 38px 80px rgba(0,0,0,0.5), 0 6px 18px rgba(0,0,0,0.35); } .cta-section:has(.cta-plaque) .cta-title { margin-top: 0; } @media (max-width: 960px) { .cta-section:has(.cta-plaque) { padding-top: 4rem; } .cta-plaque { margin: 1.8rem auto 2rem; } .cta-plaque img { border-radius: 9px; box-shadow: 0 18px 34px rgba(0,0,0,0.45); } }