/* ========================================================================== PLOP! — the end of the day, and the strip of paper under it. Everything gets quieter. The table darkens to a warm dusk (finale.js writes --table-now on ), the decorative objects are gone, two pieces of tape are all that is left, and the last photograph grows until it nearly fills the viewport. The little paper sun from the hero crosses it and stops at the horizon; when it stops, the page stops. That is the ending. --fp is the section's own progress, written by assets/js/site/finale.js. ========================================================================== */ .final { padding-block: clamp(4rem, 12vw, 8rem); overflow: clip; } .final__stage { position: relative; width: min(96vw, 1400px); margin-inline: auto; } .final__photo { position: relative; /* it arrives as a print on the table and grows into the frame */ width: calc(70% + var(--fp, 1) * 30%); margin-inline: auto; border: clamp(.4rem, calc(1.1rem - var(--fp, 1) * .8rem), 1.1rem) solid #fff; box-shadow: var(--lift-photo); rotate: calc(2deg - var(--fp, 1) * 2deg); } .final__photo img { height: clamp(20rem, 74vh, 46rem); object-fit: cover; } .final__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 12, 8, .74) 0%, rgba(20, 12, 8, .40) 34%, rgba(20, 12, 8, .10) 62%, transparent 82%); } /* the paper sun: the same yellow disc as the hero, on its way down */ .final__sun { position: absolute; z-index: 3; width: clamp(3.4rem, 7vw, 5.6rem); aspect-ratio: 1; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 6px rgba(245, 200, 66, .22); left: calc(10% + var(--fp, 1) * 52%); top: calc(6% + var(--fp, 1) * 46%); opacity: calc(.35 + var(--fp, 1) * .65); } .final__tape { z-index: 4; } .final__tape--a { left: 6%; top: -1.2rem; rotate: -7deg; opacity: calc(1 - var(--fp, 1) * .5); } .final__tape--b { right: 8%; bottom: -1rem; rotate: 5deg; opacity: calc(1 - var(--fp, 1) * .5); } .final__words { position: absolute; left: 50%; translate: -50% 0; bottom: clamp(1.6rem, 5vw, 3.4rem); width: min(88%, 1000px); z-index: 5; color: var(--paper); display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; text-shadow: 0 3px 20px rgba(10, 6, 4, .55); } /* the first line hands over to the second as the scene settles */ .final__first { opacity: calc(1 - var(--fp, 1) * 1.6); } .final__second { opacity: calc(var(--fp, 1) * 1.4 - .3); margin-top: calc(var(--fp, 1) * -4.6rem); } .final__small { opacity: .82; white-space: pre-line; } .final__actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .5rem; } /* with no script --fp never arrives; the CSS default of 1 means a reader without JavaScript gets the settled scene rather than a half-drawn one */ @media (max-width: 899px) { .final__photo { width: calc(88% + var(--fp, 1) * 12%); } .final__photo img { height: 62vh; } .final__words { bottom: 1.2rem; } .final__second { margin-top: calc(var(--fp, 1) * -3.2rem); } } /* ========================================================================== The footer: one small strip of paper at the bottom of the table. Not a second page of navigation after the ending. ========================================================================== */ .foot { padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) clamp(2.5rem, 6vw, 4rem); } .foot__strip { width: var(--measure); margin-inline: auto; background: var(--paper); background-image: var(--grain); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--lift-card); rotate: -.5deg; display: grid; grid-template-columns: auto 1fr auto; gap: clamp(.8rem, 2.5vw, 2rem); align-items: start; } .foot__mark { font-size: 1.6rem; } .foot__mark .wordmark__c:nth-child(1) { color: var(--cobalt); } .foot__mark .wordmark__c:nth-child(2) { color: var(--tomato); } .foot__mark .wordmark__c:nth-child(3) { color: var(--butter); } .foot__mark .wordmark__c:nth-child(4) { color: var(--grass); } .foot__mark .wordmark__c:nth-child(5) { color: var(--tomato); } .foot__links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; } .foot__links a { color: var(--ink); font-weight: 700; font-size: var(--t-small); letter-spacing: var(--track-label); text-decoration: none; border-bottom: 2px solid transparent; } .foot__links a:hover { border-bottom-color: var(--tomato); } .foot__contact { display: flex; flex-direction: column; gap: .3rem; font-size: var(--t-small); } .foot__k { display: inline-block; min-width: 5.5rem; color: var(--ink-soft); font-size: var(--t-tiny); letter-spacing: var(--track-label); text-transform: uppercase; } /* placeholder contact details are labelled as placeholders, in the page, so a reader is never left thinking a fictional address might reach someone */ .foot__ph { margin-left: .4rem; padding: .05rem .35rem; background: rgba(23, 23, 23, .10); font-style: normal; font-size: var(--t-tiny); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .foot__lang { grid-column: 3; display: flex; flex-direction: column; gap: .3rem; } .foot__langs { display: flex; gap: .4rem; } .foot__langbtn { padding: .35rem .7rem; border: 2px solid rgba(23, 23, 23, .25); background: transparent; font-family: var(--body); font-weight: 600; font-size: var(--t-small); cursor: pointer; rotate: -1deg; } .foot__langbtn[aria-pressed="true"] { background: var(--butter); border-color: transparent; } .foot__legal { grid-column: 1 / -1; margin-top: .6rem; padding-top: .8rem; border-top: 1px dashed rgba(23, 23, 23, .2); font-size: var(--t-tiny); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); } @media (max-width: 899px) { .foot__strip { grid-template-columns: 1fr; rotate: 0deg; } .foot__lang { grid-column: 1; } }