with an */ .ph { display: grid; place-items: center; aspect-ratio: var(--ph-ar, 16 / 9); border-radius: var(--radius); background: repeating-linear-gradient(135deg, var(--tile) 0 14px, transparent 14px 28px), var(--tile); border: 1px dashed var(--dim); color: var(--dim); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-align: center; padding: 16px; } /* Placeholder copy, so it's obvious what still needs writing */ .todo { color: var(--dim); font-style: italic; } .study-index { display: grid; gap: 28px var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: 1600px; margin: 0 auto; } .study-index a { display: block; } .study-index .num { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .2em; color: var(--dim); } .study-index h3 { margin: 4px 0 0; font-size: 20px; font-weight: 400; line-height: 1.3; } .study-index a:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .study { max-width: 1600px; margin: 120px auto 0; scroll-margin-top: 24px; } .study-head { border-top: 1px solid var(--ink); padding-top: 22px; text-align: center; } .study-head .kicker { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); } .study-head h2 { margin: 12px auto 0; max-width: 24ch; font-size: clamp(26px, 3.2vw, 40px); font-weight: 400; letter-spacing: .02em; line-height: 1.2; } .study-head p { max-width: 62ch; margin: 20px auto 0; font-size: 19px; line-height: 1.65; } .study .story { margin: 56px auto; } .to-top { display: block; text-align: right; margin-top: 24px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .to-top:hover { color: var(--ink); } /* ---------- CV page ---------- */ .cv { max-width: 1100px; margin: 0 auto; } .cv-section { display: grid; grid-template-columns: 220px 1fr; gap: 12px 48px; border-top: 1px solid var(--rule); padding: 32px 0 36px; } .cv-section > h2 { margin: 4px 0 0; font-size: 14px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); } .cv-entry + .cv-entry { margin-top: 28px; } .cv-entry .line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; } .cv-entry h3 { margin: 0; font-size: 19px; font-weight: 400; } .cv-entry h3 a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; } .cv-entry h3 a:hover { text-decoration-color: var(--ink); } .cv-entry .role { margin-top: 2px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .cv-entry .when { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } .cv-entry p { margin: 8px 0 0; line-height: 1.65; } .cv-entry ul { margin: 10px 0 0; padding-left: 1.1em; } .cv-entry li { margin: 6px 0; line-height: 1.6; } .cv-entry .me { font-weight: 400; } .cv-list { margin: 0; padding: 0; list-style: none; } .cv-list li + li { margin-top: 18px; } .cv-list li { line-height: 1.6; } .cv-list .meta { display: block; margin-top: 4px; font-size: 15px; color: var(--dim); } .cv-list a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; overflow-wrap: anywhere; } @media (max-width: 760px) { .cv-section { grid-template-columns: 1fr; } } /* ---------- Publications page ---------- */ .pub-list { margin: 0; padding: 0; list-style: none; } .pub { display: grid; grid-template-columns: 72px 1fr; gap: 6px 24px; padding: 22px 0; border-top: 1px solid var(--rule); } .pub:first-child { border-top: 0; padding-top: 4px; } .pub .year { font-size: 15px; letter-spacing: .12em; color: var(--dim); padding-top: 3px; } .pub h3 { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.4; } .pub .authors { margin: 6px 0 0; font-size: 16px; } .pub .venue { margin: 4px 0 0; font-size: 15px; color: var(--dim); line-height: 1.6; } .pub .links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; } .pub .links a { color: var(--dim); border-bottom: 1px solid var(--rule); padding-bottom: 2px; } .pub .links a:hover { color: var(--ink); border-color: var(--ink); } .tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); vertical-align: 3px; } @media (max-width: 760px) { .pub { grid-template-columns: 1fr; } } /* ---------- Contact page ---------- */ .contact { max-width: 640px; margin: 0 auto; } .field { margin-bottom: 22px; } .field label { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } .field input, .field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; color: var(--ink); font: 300 17px/1.5 "Jost", "Futura", sans-serif; } .field textarea { min-height: 180px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .send { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--bg); font: 400 14px "Jost", sans-serif; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; } .send:hover { background: transparent; color: var(--ink); } .send:disabled { opacity: .5; cursor: wait; } .form-status { margin-top: 18px; min-height: 1.6em; } .form-status.ok { color: #2f6b3a; } .form-status.err { color: #a3322a; } /* ========================================================================== Motion (driven by js/site.js). All of it switches off for "reduce motion". ========================================================================== */ /* Gentle reveal: elements below the fold fade up as they scroll into view */ .will-reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .will-reveal.in { opacity: 1; transform: none; } /* Self-drawing divider lines: the top rule draws in from left to right */ .rule-draw { --line: var(--rule); } .study-head.rule-draw { --line: var(--ink); } .will-draw { position: relative; border-top-color: transparent !important; } .will-draw::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .1s; } .will-draw.in::before { transform: scaleX(1); } /* Gentoo penguin easter egg: waddles across the footer now and then (or on click) */ .site-footer.has-penguin { position: relative; overflow-x: clip; overflow-y: visible; padding-top: 64px; } .waddler { position: absolute; left: 0; bottom: 18px; width: 34px; height: 45px; animation: waddle-across 9s linear forwards; pointer-events: none; } .waddler .bob { width: 100%; height: 100%; transform-origin: 50% 100%; animation: waddle 0.42s ease-in-out infinite alternate; } .waddler svg, .glide svg { width: 100%; height: 100%; display: block; } @keyframes waddle-across { from { transform: translateX(-60px); } to { transform: translateX(calc(100vw + 60px)); } } @keyframes waddle { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(7deg) translateY(-2px); } } /* 404 page: the penguin swims laps */ .swim-pool { position: relative; height: 150px; max-width: 760px; margin: 0 auto 8px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(180deg, rgba(42,111,143,.08), rgba(42,111,143,.22)); } .swimmer { position: absolute; top: 34px; left: 0; width: 70px; height: 90px; animation: swim 7s linear infinite; } .glide { width: 100%; height: 100%; transform: rotate(78deg); animation: glide 1.6s ease-in-out infinite alternate; } .bubble { position: absolute; left: -6px; top: 40px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(42,111,143,.6); animation: bubble 1.8s ease-out infinite; opacity: 0; } .bubble.b2 { animation-delay: .6s; width: 5px; height: 5px; } .bubble.b3 { animation-delay: 1.2s; width: 4px; height: 4px; } @keyframes swim { from { transform: translateX(-90px); } to { transform: translateX(830px); } } @keyframes glide { from { transform: rotate(74deg) translateY(-4px); } to { transform: rotate(84deg) translateY(4px); } } @keyframes bubble { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-26px,-34px); } } @media (prefers-reduced-motion: reduce) { .waddler, .swimmer, .glide, .bubble { animation: none !important; } .swimmer { left: 50%; transform: translateX(-50%); } } /* Research page: colour deepens with scroll (js/site.js → ocean). Text flips light in deep water. */ body[data-ocean] { transition: color .5s ease; } body[data-ocean].in-water { --rule: rgba(27,26,24,.22); } body[data-ocean].in-deep { --ink: #eef3f5; --rule: rgba(238,243,245,.3); color: var(--ink); } body[data-ocean] .ph { transition: color .5s ease, border-color .5s ease; } /* ---------- Trimble page: little excavator moving dirt (with a LiDAR on the cab) ---------- */ .dig-site { max-width: 760px; margin: 72px auto 0; } .dig-site svg { display: block; width: 100%; height: auto; overflow: visible; } .dig-site .ground { stroke: var(--rule); stroke-width: 1.5; } .dig-site .dirt { fill: #9a7350; } .dig-site .dirt-dark, .dig-site .load circle, .dig-site .spill circle { fill: #7a5a3c; } .dig-site .ink { fill: var(--ink); } .dig-site .wheel-dots circle { fill: #5d5a55; } .dig-site .body { fill: #e9a828; } .dig-site .body-dark { fill: #c98b17; } .dig-site .arm { fill: #e2a124; } .dig-site .arm-dark { fill: #cf9219; } .dig-site .glass { fill: #cfe3ea; } .dig-site .silver { fill: #b9bcbf; } .dig-site .pin { fill: #5d5a55; } .dig-site .beam { fill: rgba(42, 111, 143, .16); } .dig-site .upper, .dig-site .boom, .dig-site .stick, .dig-site .bucket, .dig-site .beam { transform-box: view-box; } .dig-site .upper { transform-origin: 303px 0; animation: dig-swing 7s ease-in-out infinite; } .dig-site .boom { transform-origin: 288px 112px; animation: dig-boom 7s ease-in-out infinite; } .dig-site .stick { transform-origin: 218px 112px; animation: dig-stick 7s ease-in-out infinite; } .dig-site .bucket { transform-origin: 218px 162px; animation: dig-bucket 7s ease-in-out infinite; } .dig-site .load { animation: dig-load 7s linear infinite; } .dig-site .spill circle { animation: dig-spill 7s ease-in infinite; opacity: 0; } .dig-site .spill circle:nth-child(2) { animation-delay: .12s; } .dig-site .spill circle:nth-child(3) { animation-delay: .24s; } .dig-site .beam { transform-origin: 306px 84px; animation: lidar-scan 1.6s ease-in-out infinite alternate; } @keyframes dig-swing { 0%, 42% { transform: scaleX(1); } 50%, 76% { transform: scaleX(-1); } 84%, 100% { transform: scaleX(1); } } @keyframes dig-boom { 0% { transform: rotate(30deg); } 14% { transform: rotate(10deg); } 28% { transform: rotate(27deg); } 40%, 54% { transform: rotate(36deg); } 66% { transform: rotate(30deg); } 100% { transform: rotate(30deg); } } @keyframes dig-stick { 0% { transform: rotate(10deg); } 14% { transform: rotate(36deg); } 28% { transform: rotate(14deg); } 40%, 54% { transform: rotate(4deg); } 62% { transform: rotate(22deg); } 74%, 100% { transform: rotate(10deg); } } @keyframes dig-bucket { 0%, 14% { transform: rotate(10deg); } 28%, 54% { transform: rotate(-70deg); } 62%, 68% { transform: rotate(40deg); } 80%, 100% { transform: rotate(10deg); } } @keyframes dig-load { 0%, 20% { opacity: 0; } 26%, 59% { opacity: 1; } 62%, 100% { opacity: 0; } } @keyframes dig-spill { 0%, 59% { opacity: 0; transform: translateY(118px); } 61% { opacity: 1; transform: translateY(124px); } 70% { opacity: 1; transform: translateY(146px); } 72%, 100% { opacity: 0; transform: translateY(148px); } } @keyframes lidar-scan { from { transform: rotate(-14deg); opacity: .5; } to { transform: rotate(14deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dig-site * { animation: none !important; } .dig-site .load { opacity: 0; } } /* ========================================================================== Little project scenes at the bottom of project pages (flat SVG, CSS motion) ========================================================================== */ .scene { max-width: 760px; margin: 72px auto 0; } .scene svg { display: block; width: 100%; height: auto; overflow: visible; } .scene .ground { stroke: var(--rule); stroke-width: 1.5; } .scene g, .scene path, .scene circle, .scene ellipse { transform-box: view-box; } /* Wren page: a wren flies past in bounding swoops */ .scene-wren .twig { fill: none; stroke: #7a5a3c; stroke-width: 3; stroke-linecap: round; } .scene-wren .leaf { fill: #7b9a5b; } .wren-body, .wren-tail { fill: #8a6440; } .wren-belly { fill: #d2b48c; } .wren-beak { fill: #3b2f25; } .wren-eye { fill: #1b1a18; } .wren-brow { stroke: #f1e6d4; stroke-width: 1.4; stroke-linecap: round; } .wren-wing path { fill: #6b4a2f; } .wren-x { animation: wren-x 8s linear infinite; } .wren-y { animation: wren-y .62s ease-in-out infinite alternate; } .wren-wing { transform-origin: 2px -4px; animation: wren-flap .16s ease-in-out infinite alternate; } .wren-tail { transform-origin: -12px -2px; animation: wren-tail .62s ease-in-out infinite alternate; } @keyframes wren-x { 0% { transform: translate(-60px, 92px); } 62% { transform: translate(660px, 58px); } 100% { transform: translate(660px, 58px); } } @keyframes wren-y { from { transform: translateY(-9px); } to { transform: translateY(9px); } } @keyframes wren-flap { from { transform: scaleY(1); } to { transform: scaleY(-.75); } } @keyframes wren-tail { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } } /* Flavor bottle page: a little pile of fruit (a blueberry drops in now and then) */ .scene-fruit .orange { fill: #e8873a; } .scene-fruit .orange-dot { fill: #f2b07a; } .scene-fruit .lemon { fill: #e9c13b; } .scene-fruit .lime { fill: #8fb04a; } .scene-fruit .straw { fill: #d24a43; } .scene-fruit .straw-leaf, .scene-fruit .mint { fill: #6f9a52; } .scene-fruit .seeds circle { fill: #f6d78a; } .scene-fruit .blue { fill: #3a4f7a; } .fruit-rock { transform-origin: 236px 151px; animation: fruit-rock 3.2s ease-in-out infinite alternate; } .berry-drop { opacity: 0; animation: berry-drop 5s ease-in infinite; } @keyframes fruit-rock { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } } @keyframes berry-drop { 0%, 30% { opacity: 0; transform: translateY(-20px); } 32% { opacity: 1; transform: translateY(-20px); } 44% { transform: translateY(114px); animation-timing-function: ease-out; } 50% { transform: translateY(100px); animation-timing-function: ease-in; } 56% { transform: translateY(114px); } 80% { opacity: 1; transform: translateY(114px); } 86%, 100% { opacity: 0; transform: translateY(114px); } } /* Kohler Splash page: a water droplet falls and splashes */ .scene-drop .pool { fill: rgba(140,196,214,.45); } .scene-drop .drop, .crown circle { fill: #5fa6c0; } .ripple ellipse { fill: none; stroke: #2a6f8f; stroke-width: 1.2; } .drop-fall { animation: drop-fall 2.8s ease-in infinite; } .ripple { transform-origin: 300px 148px; opacity: 0; animation: ripple 2.8s ease-out infinite; } .ripple.r2 { animation-name: ripple2; } .crown { opacity: 0; animation: 2.8s ease-out infinite; } .crown.c1 { animation-name: crown1; } .crown.c2 { animation-name: crown2; } .crown.c3 { animation-name: crown3; } .crown.c4 { animation-name: crown4; } @keyframes drop-fall { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 40% { opacity: 1; transform: translateY(128px); } 41%, 100% { opacity: 0; transform: translateY(128px); } } @keyframes ripple { 0%, 40% { opacity: 0; transform: scale(.2); } 42% { opacity: .9; } 100% { opacity: 0; transform: scale(3.4); } } @keyframes ripple2 { 0%, 52% { opacity: 0; transform: scale(.2); } 54% { opacity: .7; } 100% { opacity: 0; transform: scale(2.4); } } @keyframes crown1 { 0%, 40% { opacity: 0; transform: translate(300px, 146px); } 41% { opacity: 1; } 52% { transform: translate(282px, 122px); } 66% { opacity: 1; transform: translate(274px, 147px); } 67%, 100% { opacity: 0; transform: translate(274px, 147px); } } @keyframes crown2 { 0%, 40% { opacity: 0; transform: translate(300px, 146px); } 41% { opacity: 1; } 52% { transform: translate(318px, 118px); } 66% { opacity: 1; transform: translate(328px, 147px); } 67%, 100% { opacity: 0; transform: translate(328px, 147px); } } @keyframes crown3 { 0%, 40% { opacity: 0; transform: translate(300px, 146px); } 41% { opacity: 1; } 54% { transform: translate(294px, 108px); } 70% { opacity: 1; transform: translate(290px, 147px); } 71%, 100% { opacity: 0; transform: translate(290px, 147px); } } @keyframes crown4 { 0%, 40% { opacity: 0; transform: translate(300px, 146px); } 41% { opacity: 1; } 51% { transform: translate(308px, 126px); } 63% { opacity: 1; transform: translate(312px, 147px); } 64%, 100% { opacity: 0; transform: translate(312px, 147px); } } /* P49 page: a skier carves S-turns down the page as you scroll (seen from above) */ .ski-page { position: relative; } .ski-run { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .ski-tracks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; } .ski-tracks .track { fill: none; stroke: rgba(154,167,176,.55); stroke-width: 1.4; stroke-linecap: round; } .skier-run { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; will-change: transform; } .skier-run svg { width: 100%; height: 100%; display: block; overflow: visible; } .skier-run .ski { stroke: #1b1a18; stroke-width: 2.2; stroke-linecap: round; } .skier-run .pole { stroke: #5d5a55; stroke-width: 1.2; stroke-linecap: round; } .skier-run .jacket { fill: #d4593a; } .skier-run .helmet { fill: #1b1a18; } @media (max-width: 900px) { .ski-run { display: none; } } /* Spent page: food scraps compost and a sprout grows */ .scene-compost .soil { fill: #5b4330; } .scene-compost .grain circle { fill: #7a5a3c; } .scene-compost .stem { fill: none; stroke: #6f9a52; stroke-width: 3; stroke-linecap: round; } .scene-compost .leaf { fill: #7b9a5b; } .scene-compost .apple { fill: #d24a43; } .scene-compost .core { fill: none; stroke: #f3e2c0; stroke-width: 2.5; stroke-linecap: round; } .scene-compost .stalk { stroke: #5b4330; stroke-width: 1.6; stroke-linecap: round; } .scene-compost .banana { fill: #e9c13b; stroke: #a8862a; stroke-width: 1; } .scene-compost .egg { fill: #f6efe3; stroke: #d8cbb5; stroke-width: 1; } .scene-compost .carrot { fill: #e8873a; } .scene-compost .carrot-leaf { fill: none; stroke: #6f9a52; stroke-width: 1.8; stroke-linecap: round; } .scene-compost .worm path { fill: none; stroke: #c98a86; stroke-width: 4.5; stroke-linecap: round; } .sprout { transform-origin: 300px 124px; animation: sprout 7s ease-in-out infinite; } .leaf-l { transform-origin: 300px 96px; animation: leaf-open 7s ease-in-out infinite; } .leaf-r { transform-origin: 300px 90px; animation: leaf-open 7s ease-in-out .25s infinite; } .worm { transform-origin: 367px 151px; animation: worm 4s ease-in-out infinite; } @keyframes sprout { 0% { transform: scale(0); } 25%, 80% { transform: scale(1); } 95%, 100% { transform: scale(0); } } @keyframes leaf-open { 0%, 15% { transform: scale(0); } 32%, 80% { transform: scale(1); } 92%, 100% { transform: scale(0); } } @keyframes worm { 0%, 30% { transform: translateY(12px); } 45% { transform: translateY(0) skewX(-6deg); } 55% { transform: translateY(0) skewX(6deg); } 65% { transform: translateY(0) skewX(-4deg); } 80%, 100% { transform: translateY(12px); } } /* PhD Research page: a gentoo swims beneath icebergs (drawn for the deep-water end of the page) */ .scene-ice .surface { stroke: rgba(236,241,243,.45); stroke-width: 1.2; } .scene-ice .berg { fill: #f4f8fa; } .scene-ice .berg-under { fill: rgba(220,236,242,.16); } .pg-body { fill: #141414; stroke: rgba(236,241,243,.35); stroke-width: .8; } .pg-belly, .pg-band, .pg-eye { fill: #ffffff; } .pg-beak, .pg-foot { fill: #e8642c; } .pg-flipper path { fill: #141414; stroke: rgba(236,241,243,.3); stroke-width: .6; } .bub circle { fill: none; stroke: rgba(220,236,242,.7); stroke-width: 1; } .pg-x { animation: pg-x 10s linear infinite; } .pg-y { animation: pg-y 1.3s ease-in-out infinite alternate; } .pg { animation: pg-tilt 1.3s ease-in-out infinite alternate; } .pg-flipper { transform-origin: 4px -1px; animation: pg-flap .32s ease-in-out infinite alternate; } .bub { opacity: 0; animation: 10s linear infinite; } .bub.b1 { animation-name: bub1; } .bub.b2 { animation-name: bub2; } .bub.b3 { animation-name: bub3; } @keyframes pg-x { 0% { transform: translate(-60px, 140px); } 100% { transform: translate(660px, 128px); } } @keyframes pg-y { from { transform: translateY(-6px); } to { transform: translateY(6px); } } @keyframes pg-tilt { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } @keyframes pg-flap { from { transform: rotate(-38deg); } to { transform: rotate(26deg); } } @keyframes bub1 { 0%, 22% { opacity: 0; transform: translate(98px, 134px); } 24% { opacity: .9; } 40% { opacity: 0; transform: translate(92px, 60px); } 100% { opacity: 0; transform: translate(92px, 60px); } } @keyframes bub2 { 0%, 50% { opacity: 0; transform: translate(296px, 132px); } 52% { opacity: .9; } 68% { opacity: 0; transform: translate(302px, 56px); } 100% { opacity: 0; transform: translate(302px, 56px); } } @keyframes bub3 { 0%, 72% { opacity: 0; transform: translate(452px, 130px); } 74% { opacity: .9; } 90% { opacity: 0; transform: translate(446px, 58px); } 100% { opacity: 0; transform: translate(446px, 58px); } } /* Reduce motion: every scene shows as a still picture */ @media (prefers-reduced-motion: reduce) { .scene * { animation: none !important; } .wren-x { transform: translate(300px, 74px); } .berry-drop, .drop-fall, .crown, .ripple { display: none; } .pg-x { transform: translate(260px, 130px); } .bub { display: none; } } /* Project scenes live in the footer: small, centred between the bottom divider and the copyright line */ .site-footer { position: relative; } .site-footer:has(.scene, .dig-site) { padding-top: 64px; } .site-footer .scene, .site-footer .dig-site { position: absolute; left: 50%; top: -18px; width: min(240px, 58vw); margin: 0; transform: translateX(-50%); pointer-events: none; text-transform: none; }