/* ========================================================================== THE MURNANS · the trip pages honeymoon.html and the highlights, all built to one template by assets/js/trip.js. Loaded after site.css, year.css and map.css, and built from the same tokens: the ink keyline, color printed a little off register, small tilts. -------------------------------------------------------------------------- 1. The page 3. The stops 5. The way on 7. Responsive 2. The head 4. The map column 6. The hub ========================================================================== */ /* 1 ── THE PAGE ────────────────────────────────────────────────────────── */ /* The accent color of each trip page is already set in site.css: rose for the honeymoon, khaki for the highlights. overflow-x: hidden on turns it into a scroll container, and a sticky child of a scroll container that never scrolls never sticks. "clip" clips the same way without making one, which is what holds the day rail and the map in place. Scoped to these pages, with hidden left in site.css as the fallback for anything that does not know clip. */ body[data-page="honeymoon"], body[data-page="highlights"] { overflow-x: hidden; overflow-x: clip; } /* 2 ── THE HEAD ────────────────────────────────────────────────────────── */ .thead { padding-bottom: clamp(2.5rem, 5vw, 4rem); } .thead__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); column-gap: clamp(2rem, 5.5vw, 5.5rem); align-items: center; } .thead__text { min-width: 0; } .thead__back { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } .thead__back:hover { color: var(--page-ink); } /* Six prints from the trip, pinned up at their own angles and dealt fresh on every visit. They develop from the top as they come in, one after the other, the way the photo strips down the page do. The gallery fills its column now. Capped at 400px and pushed to the right of a 596px column, it left about 200px of nothing between the last line of the title and the first print, on top of the column gap that was supposed to be the whole of the space between them. Three across rather than two keeps the block from growing taller as it grows wider: six of these come out shorter than four of the old ones, so the first day of the trip starts higher up the page, not lower. */ .tgal { display: grid; gap: 1rem; margin: 0; min-width: 0; width: 100%; justify-self: stretch; } .tgal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 1.4vw, 1.1rem); align-items: start; /* room on the right and underneath for the off-register shadows */ padding: 0 10px 10px 0; } [data-reveal="wipe"].tgal__grid > *:nth-child(4) { transition-delay: calc(var(--d) + 390ms); } [data-reveal="wipe"].tgal__grid > *:nth-child(5) { transition-delay: calc(var(--d) + 520ms); } [data-reveal="wipe"].tgal__grid > *:nth-child(6) { transition-delay: calc(var(--d) + 650ms); } .tgal__pic { aspect-ratio: 4 / 5; rotate: var(--tilt, 0deg); box-shadow: 7px 7px 0 var(--off, var(--gold)); transition: rotate .55s var(--ease), translate .45s var(--ease), box-shadow .45s var(--ease); } .tgal__pic:hover, .tgal__pic:focus-visible { rotate: 0deg; translate: 4px 4px; box-shadow: 4px 4px 0 var(--off, var(--gold)); } /* the middle column rides low, so the six read as a pinned-up handful rather than a grid of six */ .tgal__pic:nth-child(2), .tgal__pic:nth-child(5) { margin-top: clamp(.9rem, 2vw, 1.7rem); } .tgal__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .tgal__zoom { color: var(--brass-ink); } /* 3 ── THE STOPS ───────────────────────────────────────────────────────── */ .ttl { padding-top: 0; } /* our own line about a stop, next to David's paragraphs but lighter, so his words and ours never read as one voice */ .stop__line { max-width: 60ch; margin: 0; font-size: .95rem; line-height: 1.62; color: var(--ink-3); } .chap--stop .chap__place { font-size: clamp(1.6rem, 2.8vw, 2.4rem); } /* A line someone said to us, the way David wrote it into the post: the front desk lady on the Narrows. */ .stop__quote { display: grid; gap: .5rem; margin: 0; padding-left: 1.1rem; border-left: 2px solid var(--brass); } .stop__quote-text { margin: 0; font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.3; } .stop__quote-who { font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); } /* a link straight to a stop lands below the bar rather than under it */ .chap--stop { scroll-margin-top: calc(var(--nav-h) + 4.5rem); } /* 4 ── THE MAP COLUMN ──────────────────────────────────────────────────── */ @media (min-width: 1180px) { .moon { grid-template-columns: minmax(0, 1fr) var(--map-w, clamp(250px, 23vw, 330px)); } /* The piece of the atlas a trip shows is a different shape every time, so the map is sized by both of them at once: as wide as the column, and no taller than what is left of the screen under the two bars. --map-ar is that piece's width over its height, set by assets/js/trip.js. */ .routemap--trip svg { width: min(100%, calc((100svh - var(--nav-h) - 13rem) * var(--map-ar, 1))); height: auto; max-width: none; overflow: hidden; } } /* The state names come and go with the piece of map on screen, the same way the stop names do, and take the same paper halo so a name that lands on the route still reads. */ .routemap--trip .routemap__state, .tripsheet .routemap__state { paint-order: stroke; stroke: var(--paper); stroke-width: calc(3px / var(--mapk, .7)); stroke-linejoin: round; opacity: 0; transition: opacity .35s; pointer-events: none; } .routemap--trip .routemap__state.is-on, .tripsheet .routemap__state.is-on { opacity: 1; } /* The whole trip, in the window the band opens. The window centers what is inside it, which leaves the map at the size the atlas happens to be drawn at, so the box it sits in is stretched across the window first. */ .tripsheet .routesheet__map { justify-self: stretch; width: 100%; } .tripsheet .routesheet__map svg { width: min(100%, calc((100svh - 13rem) * var(--map-ar, 1))); height: auto; max-width: none; overflow: hidden; } /* 5 ── THE WAY ON ──────────────────────────────────────────────────────── */ .tclose { display: grid; gap: 1rem; max-width: 66ch; } #closing.band { padding-bottom: clamp(3rem, 6vw, 5.5rem); } /* 6 ── THE HIGHLIGHTS HUB ────────────────────────────────────────────── highlights.html: one card a highlight, three across or one under the other, never two and one. A highlight that has not happened yet keeps its card and shows the same doodle an empty photo slot does on a year page. */ .hcards { list-style: none; margin: 0; padding: 0; display: grid; /* one column per card, set in the markup: auto-fit drops to two at some widths and strands the third */ grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .hcard__slot { min-width: 0; } .hcard { display: grid; gap: .5rem; color: var(--ink); } .hcard__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: .85rem; border: var(--keyline); border-radius: var(--r-sm); background: var(--paper-3); box-shadow: 8px 8px 0 var(--off, var(--blue)); rotate: var(--tilt, 0deg); transition: rotate .5s var(--ease), translate .5s var(--ease), box-shadow .5s var(--ease); } .hcard__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .hcard:hover .hcard__pic, .hcard:focus-visible .hcard__pic { rotate: 0deg; translate: 0 -6px; box-shadow: 8px 14px 0 var(--off, var(--blue)); } .hcard:hover .hcard__pic img { transform: scale(1.05); } /* a highlight still to come: a wash of color and the snapshot doodle */ .hcard__pic--empty { display: grid; place-items: center; align-content: center; color: var(--ink-2); background: radial-gradient(120% 90% at 18% 12%, color-mix(in srgb, var(--wash) 34%, transparent), transparent 62%), radial-gradient(110% 100% at 88% 92%, color-mix(in srgb, var(--wash) 26%, transparent), transparent 66%), color-mix(in srgb, var(--wash) 14%, var(--paper)); } [data-theme="dusk"] .hcard__pic--empty { background: radial-gradient(120% 90% at 18% 12%, color-mix(in srgb, var(--wash) 20%, transparent), transparent 62%), radial-gradient(110% 100% at 88% 92%, color-mix(in srgb, var(--wash) 14%, transparent), transparent 66%), color-mix(in srgb, var(--wash) 10%, var(--paper)); } .hcard__doodle { width: clamp(38px, 22%, 62px); height: auto; opacity: .6; transition: rotate .6s var(--ease), scale .6s var(--ease); } .hcard:hover .hcard__doodle { rotate: -8deg; scale: 1.08; } .hcard__k { font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-ink); } .hcard__title { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.12; transition: color .4s; } .hcard:hover .hcard__title { color: var(--page-ink); } .hcard__note { font-size: .92rem; line-height: 1.62; color: var(--ink-3); } .hcard__go { display: inline-flex; align-items: center; gap: .6rem; margin-top: .45rem; font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; } .hcard__go svg { transition: transform .5s var(--ease); } .hcard:hover .hcard__go svg { transform: translateX(6px); } .hcard__tag { padding: .3em .85em .24em; border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink-3); font-size: .6rem; letter-spacing: .16em; } .hcard:hover .hcard__tag { border-color: var(--ink-3); color: var(--ink-2); } /* ── The way between the highlights ────────────────────────────────────── The section every highlight page ends on, above the footer: the whole set of them in the order they happened, with the one being read marked rather than left out, so it reads as a place in a set and not as two leftovers. Built by assets/js/highlights.js from the one list of highlights there. It sits on the oxblood band, which has already turned the ink cream, so the cards only need the ground behind a photograph that has not arrived and a slightly finer keyline than the cream one the band would give. */ .hnav { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); } .hnav__head { display: grid; gap: .55rem; } #closing.band .hnav__head .t-lg { margin: 0; } /* Navigation, not a third gallery: the photograph is here to say which page this is, so it takes a letterbox rather than the album shape the hub gave it, and the whole section stays about a third of a screen. */ .hnav .hcard__pic { aspect-ratio: 3 / 2; margin-bottom: .7rem; box-shadow: 6px 6px 0 var(--off, var(--blue)); } .hnav .hcard { gap: .35rem; } .hnav .hcard__title { font-size: clamp(1.3rem, 1.8vw, 1.6rem); } .hnav .hcard__note { font-size: .86rem; line-height: 1.5; } .hnav .hcard__tag, .hnav .hcard__go { justify-self: start; } /* Three across the whole way down to the phone. The hub stacked its cards below 900px because they were the page; these are the way off it, and stacking three of them on a tablet is the tall section this replaced. */ @media (min-width: 621px) { .hnav .hcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 2.5rem); } } .band--deep .hcard__pic { background: #ffffff14; border-width: 1.5px; } .band--deep .hcard__note { color: var(--deep-ink-3); } .band--deep .hcard:hover .hcard__title { color: var(--brass-2); } /* Where you already are: it keeps its card, sits straight, and says so instead of offering an arrow to itself. */ .hcard--here { cursor: default; } .hcard--here .hcard__pic { opacity: .5; box-shadow: none; } .hcard--here .hcard__title { color: var(--ink-3); } .hcard--here .hcard__note { opacity: .7; } @media (max-width: 900px) { /* one card a line: three across no longer fit, and two and one would leave the last card alone */ .hcards { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 2.75rem); } .hcard__pic { aspect-ratio: 16 / 9; } } /* ── The same three on a phone ─────────────────────────────────────────── Three cards stacked is three screens of navigation at the end of a page somebody has just finished reading. So the card folds down into a line: a thumbnail, the month, the name, and the way in. The note goes, because the name and the month already say which one it is. */ /* Scoped the same way the rules above are: a media query carries no weight of its own, so .hcard on its own here would lose to .hnav .hcard. */ @media (max-width: 620px) { .hnav .hcards { grid-template-columns: minmax(0, 1fr); gap: .6rem; } .hnav .hcard { grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "pic when go" "pic name go"; align-items: center; gap: .05rem .9rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--r-md); } .hnav .hcard__pic { grid-area: pic; aspect-ratio: 1; margin: 0; rotate: 0deg; box-shadow: none; } .hnav .hcard:hover .hcard__pic, .hnav .hcard:focus-visible .hcard__pic { translate: none; box-shadow: none; } .hnav .hcard__k { grid-area: when; } .hnav .hcard__title { grid-area: name; font-size: 1.12rem; } .hnav .hcard__note { display: none; } .hnav .hcard__go, .hnav .hcard__tag { grid-area: go; justify-self: end; margin: 0; } /* The words go and the arrow stays: at this size the whole line is the label. The words are taken out of the flow rather than shrunk, because a collapsed text node is still a row of the grid and a gap away from the arrow, which leaves the arrow sitting low in its circle. Screen readers still read them. */ .hnav .hcard__go { width: 34px; height: 34px; display: grid; place-items: center; gap: 0; border: 1.5px solid var(--line); border-radius: 50%; transition: translate .45s var(--ease), border-color .3s var(--ease-soft); } /* Beside the words on a wide screen the arrow slides out of the line and that reads as going somewhere. Inside a circle it just leaves the middle. So here the circle goes with it and the arrow stays where it was put. */ .hnav .hcard:hover .hcard__go, .hnav .hcard:focus-visible .hcard__go { translate: 5px 0; border-color: var(--brass-2); } .hnav .hcard:hover .hcard__go svg, .hnav .hcard:focus-visible .hcard__go svg { transform: none; } .hnav .hcard__word { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hnav .hcard__go svg { display: block; } .hnav .hcard__tag { font-size: .54rem; padding: .3em .7em .24em; } } @media (prefers-reduced-motion: reduce) { .hcard__pic, .hcard__doodle { transition: none; } } /* 7 ── RESPONSIVE ──────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* stacked, so the gallery has the whole measure and does not need capping */ .thead__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 5vw, 2.75rem); } .tgal { width: min(100%, 560px); } } @media (max-width: 620px) { .tgal__grid { gap: .6rem; padding: 0 6px 6px 0; } .tgal__pic { box-shadow: 5px 5px 0 var(--off, var(--gold)); } .tgal__pic:nth-child(2), .tgal__pic:nth-child(5) { margin-top: .8rem; } .tgal__cap { font-size: .56rem; letter-spacing: .14em; } } /* A phone on its side, the same measurement site.css, year.css and map.css use: there is room for the prints beside the title, and on a screen this short a stacked head is a whole screen before the first stop. */ @media (min-width: 700px) and (max-height: 520px) and (orientation: landscape) { .thead__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } /* smaller again sideways: there is no height to spare, and the four of them are the tallest thing in the head */ .tgal { width: min(100%, 270px); justify-self: end; } .tgal__grid { gap: .6rem; } .tgal__pic:nth-child(2) { margin-top: .8rem; } .tgal__pic:nth-child(3) { margin-bottom: .8rem; } .page-head.thead { padding-top: clamp(6rem, 22vh, 8rem); padding-bottom: clamp(1.5rem, 6vh, 3rem); } } @media (prefers-reduced-motion: reduce) { .tgal__pic { transition: none; } } /* 8 ── THE CITIZENSHIP PAGE ──────────────────────────────────────────── highlights-citizenship.html is one morning, not a trip: no stops, no route, one photograph, and David's letter to the family as the whole of the page. It borrows the trip head and the facts row and adds two things of its own: a single large print in the gallery slot, and the letter set as printed stationery with a postmark over its top edge. */ /* One print instead of four. The grid is two columns for a handful of photographs; with one it has to be told to stop halving the slot. */ .thead--one .thead__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); } .tgal--one { width: min(100%, 520px); } .tgal--one .tgal__grid { grid-template-columns: minmax(0, 1fr); padding: 0 12px 12px 0; } .tgal--one .tgal__pic { aspect-ratio: 4 / 3; box-shadow: 10px 10px 0 var(--off, var(--gold)); } .tgal--one .tgal__pic:hover, .tgal--one .tgal__pic:focus-visible { box-shadow: 5px 5px 0 var(--off, var(--gold)); } /* The measure lives on the block, not on the card: "ch" is relative to the element's own type size, so a label and a card that both asked for 74ch would come out different widths. The block is set at the letter's body size and the two sit flush. */ .letter-block { max-width: 74ch; margin-inline: auto; font-size: 1.02rem; } .letter__label { display: block; margin: 0 0 clamp(.9rem, 2vw, 1.35rem); } /* The letter: paper with the ink keyline, color printed off register, and a finer frame inside it the way the vows are set. */ .letter { position: relative; padding: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1.5rem, 4vw, 3.2rem) clamp(1.5rem, 3vw, 2.4rem); background: color-mix(in srgb, var(--khaki) 12%, var(--paper)); border: var(--keyline); border-radius: var(--r-md); box-shadow: 10px 10px 0 var(--khaki); } /* Dusk only, for the reason given against the same rule in year.css: the khaki in the ground turns the page a gray-olive on the dark. */ [data-theme="dusk"] .letter-block .letter { background: var(--paper-2); } .letter::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid color-mix(in srgb, var(--khaki) 70%, var(--paper)); border-radius: 9px; pointer-events: none; } /* The postmark, over the top edge on the right. Its colors are pinned the way the "I do" sticker's are: dark ink on gold, the same in both themes, so it never lands as cream on yellow. */ .letter__stamp { position: absolute; z-index: 2; top: calc(-1 * clamp(.9rem, 2vw, 1.5rem)); right: clamp(1rem, 3vw, 2.4rem); width: clamp(74px, 7.5vw, 102px); aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: .15rem; border: 2px solid #14110D; border-radius: 50%; background: #F0CE84; color: #14110D; box-shadow: 3px 3px 0 #14110D; rotate: -9deg; text-align: center; transition: rotate .6s cubic-bezier(.34, 1.56, .64, 1), scale .6s cubic-bezier(.34, 1.56, .64, 1); } .letter:hover .letter__stamp { rotate: 4deg; scale: 1.05; } .letter__stamp b { font-family: var(--hand); font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: .95; } .letter__stamp span { font-size: .5rem; font-weight: 600; letter-spacing: .2em; } /* "New citizen" is a phrase, not a date: it takes two lines and a smaller size so both words sit inside the circle. */ .letter__stamp--word b { font-size: clamp(.95rem, 1.5vw, 1.25rem); line-height: 1.04; } /* the date and place he headed it with. The rule stops short of the postmark rather than running under it. */ .letter__meta { margin: 0 0 clamp(1.3rem, 2.4vw, 1.9rem); padding: 0 clamp(5rem, 9vw, 7rem) .75rem 0; border-bottom: 1px solid var(--line); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); } .letter__to { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.1; } .letter__p { margin: 0 0 clamp(1rem, 1.8vw, 1.35rem); font-size: 1.02rem; line-height: 1.72; color: var(--ink); } .letter__p--open { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.6; } .letter__off { margin: clamp(1.5rem, 3vw, 2.1rem) 0 0; font-size: 1rem; color: var(--ink-2); } .letter__sign { display: block; width: clamp(128px, 13vw, 172px); height: auto; margin: -.7rem 0 -1rem .1rem; rotate: -4deg; filter: invert(var(--art-invert)); } @media (max-width: 900px) { .thead--one .thead__grid { grid-template-columns: minmax(0, 1fr); } .tgal--one { width: min(100%, 560px); } } @media (max-width: 620px) { .tgal--one .tgal__grid { padding: 0 7px 7px 0; } .tgal--one .tgal__pic { box-shadow: 6px 6px 0 var(--off, var(--gold)); } .letter { box-shadow: 6px 6px 0 var(--khaki); } .letter__stamp { right: .8rem; box-shadow: 2px 2px 0 #14110D; } } @media (prefers-reduced-motion: reduce) { .letter__stamp { transition: none; } }