/* ========================================================================== Card Flip Deck A stack of cards where the top card folds open, around a hinge on its right edge, into a full bleed reading panel. The fold is one book object in the panel layer (.cf-book). Cover and blank back fill the same card-sized box — the blank stays flat underneath while the cover turns away, so the spine can never tear into two floating planes: 1. .cf-book__front rotates away ( 0deg -> -105deg ) 2. .cf-book grows from the card rect to full bleed Article content stays hidden until step 2 has settled. ========================================================================== */ /* Tokens live on both roots because the panel layer is portalled to the end of , outside the deck, and still needs to inherit them. */ .cf, .cf__panels { /* ---- geometry ------------------------------------------------------- */ --cf-card-w: clamp(15rem, 24vw, 21rem); --cf-card-ratio: 5 / 9; /* Card typography and spacing are sized from the card width, not the viewport, so the whole composition scales as one object. */ --cf-card-radius: calc(var(--cf-card-w) * 0.085); --cf-card-depth: 11px; --cf-panel-inset: clamp(0.75rem, 4.6vw, 4.5rem); --cf-panel-top: clamp(1rem, 7vh, 4.5rem); --cf-panel-radius: clamp(1.25rem, 2.2vw, 2.25rem); --cf-perspective: 1500px; /* ---- colour --------------------------------------------------------- */ --cf-accent: #1a56db; --cf-ink: #14161a; --cf-ink-soft: #5b6270; --cf-paper: #f2f0ec; --cf-paper-2: #fbfaf8; /* ---- motion --------------------------------------------------------- */ --cf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* strong settle, no overshoot */ --cf-ease-in: cubic-bezier(0.5, 0, 0.75, 0); --cf-ease-slot: cubic-bezier(0.2, 0.85, 0.25, 1); --cf-slot-dur: 620ms; --cf-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--cf-font); color: var(--cf-ink); } .cf { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; } .cf *, .cf *::before, .cf *::after, .cf__panels, .cf__panels *, .cf__panels *::before, .cf__panels *::after { box-sizing: border-box; } /* ========================================================================== Deck ========================================================================== */ .cf__deck-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; /* Tied to the card, like the fan offsets, so the controls stay clear of the spread cards at every width. */ gap: calc(var(--cf-card-w) * 0.5); width: 100%; } /* The perspective lives on the stage, not on the cards, so every card in the stack shares one vanishing point. */ .cf__stage { perspective: var(--cf-perspective); perspective-origin: 50% 50%; flex: 0 0 auto; } /* An un-transformed, card sized box. Every card is absolutely placed inside it, and it doubles as the reference rectangle used to measure the hinge. */ /* An un-transformed, card sized box. Every card is absolutely placed inside it, and it doubles as the reference rectangle used to measure the hinge. Interaction hangs off this box rather than off the card faces. Inside a perspective container Chrome's hit testing does not agree with what it painted: elementFromPoint returns this element, not the card, for every point on one side of the box's centre, even though elementsFromPoint lists the card there and the card is plainly visible. The box is hit reliably, so the cursor, the hover lift and the click all come from here. */ .cf__deck { position: relative; width: var(--cf-card-w); aspect-ratio: var(--cf-card-ratio); transform-style: preserve-3d; list-style: none; margin: 0; padding: 0; cursor: pointer; } .cf.is-open .cf__deck { cursor: default; } /* --- one card ------------------------------------------------------------ */ .cf-card { position: absolute; inset: 0; transform-style: preserve-3d; /* Per-slot values, set by [data-slot] below. */ --x: 0px; --y: 0px; --z: 0px; --ry: 0deg; --rz: 0deg; --s: 1; transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--s)); transition: transform var(--cf-slot-dur) var(--cf-ease-slot), opacity 360ms var(--cf-ease-slot); } /* Stack positions. Slot 0 is the readable card on top, the rest fan back and to the left the way the reference deck does. */ .cf-card[data-slot="0"] { --ry: -8deg; --rz: -1deg; z-index: 4; } .cf-card[data-slot="1"] { --x: calc(var(--cf-card-w) * -0.2); --y: 0.4rem; --z: -90px; --ry: -14deg; --rz: -4.5deg; z-index: 3; } .cf-card[data-slot="2"] { --x: calc(var(--cf-card-w) * -0.32); --y: 1rem; --z: -180px; --ry: -18deg; --rz: -8deg; z-index: 2; opacity: 0.92; } .cf-card[data-slot="3"] { --x: calc(var(--cf-card-w) * -0.4); --y: 1.5rem; --z: -260px; --ry: -21deg; --rz: -11deg; z-index: 1; opacity: 0.55; } /* Anything deeper waits off stage. */ .cf-card[data-slot="rest"] { --x: calc(var(--cf-card-w) * -0.44); --y: 1.8rem; --z: -330px; --ry: -22deg; --rz: -13deg; z-index: 0; opacity: 0; pointer-events: none; } /* A card that has just been sent to the back of the deck must not tween across the screen, so it is teleported while invisible. */ .cf-card.is-recycling { transition: none; opacity: 0; } /* While the book is opening, hide every card behind the top one — otherwise they show through the gap and read as a third detached surface. */ .cf.is-flipping .cf-card:not([data-slot="0"]) { opacity: 0 !important; transition: none; } /* The real deck card is replaced by the book twin in the panel layer. */ .cf-card.is-ghost { opacity: 0 !important; pointer-events: none; transition: none; } /* The hinge is the element that turns. Its origin sits on the card's right edge, which is exactly where the blank back unfolds from. */ .cf-card__hinge { position: absolute; inset: 0; transform-origin: 100% 50%; transform: rotateY(var(--turn, 0deg)); transform-style: preserve-3d; } /* --- slab: front + blank back + four side faces -------------------------- */ .cf-card__slab { position: absolute; inset: 0; transform-style: preserve-3d; border-radius: var(--cf-card-radius); } .cf-card__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--cf-card-w) * 0.062); border: 0; border-radius: var(--cf-card-radius); background: linear-gradient(157deg, var(--cf-paper-2) 20%, var(--cf-paper) 72%, #e9e5dd 100%); box-shadow: 0 1px 2px rgb(0 0 0 / 0.16), 0 1.5rem 2.75rem -1rem rgb(0 0 0 / 0.42), 0 3rem 5rem -2rem rgb(0 0 0 / 0.3); backface-visibility: hidden; overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: inherit; transform: translateZ(calc(var(--cf-card-depth) / 2)); transition: box-shadow 320ms var(--cf-ease-out), translate 320ms var(--cf-ease-out); } .cf-card__face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(103deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0) 26%); pointer-events: none; } /* Blank back of the physical card — same paper as the panel sheet. */ .cf-card__back { position: absolute; inset: 0; border-radius: var(--cf-card-radius); background: var(--cf-paper); transform: translateZ(calc(var(--cf-card-depth) / -2)) rotateY(180deg); backface-visibility: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.04); } .cf-card__side { position: absolute; background: linear-gradient(180deg, #f7f4ef 0%, #e4e0d8 55%, #d6d1c8 100%); backface-visibility: hidden; } .cf-card__side--right, .cf-card__side--left { top: 0; width: var(--cf-card-depth); height: 100%; } .cf-card__side--right { right: 0; transform-origin: right center; transform: rotateY(-90deg); } .cf-card__side--left { left: 0; transform-origin: left center; transform: rotateY(90deg); } .cf-card__side--top, .cf-card__side--bottom { left: 0; width: 100%; height: var(--cf-card-depth); } .cf-card__side--top { top: 0; transform-origin: center top; transform: rotateX(90deg); background: linear-gradient(90deg, #fbfaf8, #ebe7df); } .cf-card__side--bottom { bottom: 0; transform-origin: center bottom; transform: rotateX(-90deg); background: linear-gradient(90deg, #d8d3ca, #c9c3b8); } .cf__deck:hover .cf-card[data-slot="0"] .cf-card__face, .cf-card[data-slot="0"] .cf-card__face:focus-visible { translate: 0 -0.5rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.16), 0 2rem 3.5rem -1rem rgb(0 0 0 / 0.5), 0 4rem 6rem -2rem rgb(0 0 0 / 0.34); } .cf-card__face:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } /* --- card contents ------------------------------------------------------ */ .cf-badge { align-self: flex-start; padding: 0.32em 0.8em; border-radius: 999px; background: var(--cf-accent); color: #fff; font-size: clamp(0.66rem, 0.82vw, 0.84rem); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .cf-card .cf-badge { font-size: calc(var(--cf-card-w) * 0.043); } .cf-card__title { margin: calc(var(--cf-card-w) * 0.045) 0 0; font-size: calc(var(--cf-card-w) * 0.115); font-weight: 800; line-height: 1.03; letter-spacing: -0.028em; text-wrap: balance; } .cf-card__art { margin-top: auto; padding-top: 1rem; } .cf-art { display: block; width: 100%; height: auto; } .cf-card__meta { display: flex; align-items: center; gap: 0.5rem; margin-top: calc(var(--cf-card-w) * 0.045); color: var(--cf-ink-soft); font-size: calc(var(--cf-card-w) * 0.04); font-weight: 500; } .cf-card__meta b { color: var(--cf-ink); font-weight: 600; } .cf-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; } /* --- deck controls ------------------------------------------------------ */ .cf-action { appearance: none; border: 0; padding: 0.35rem 0; background: none; color: #fff; font: inherit; font-size: clamp(1rem, 1.5vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; border-bottom: 2px solid rgb(255 255 255 / 0.55); transition: border-color 200ms, opacity 200ms, translate 300ms var(--cf-ease-out); } .cf-action:hover { border-color: #fff; translate: 0 -2px; } .cf-action:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 4px; } .cf-action[disabled] { opacity: 0.4; cursor: default; translate: none; } .cf__counter { margin-top: clamp(1.25rem, 3vh, 2.5rem); color: rgb(255 255 255 / 0.75); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-align: center; } /* The deck is inert while a post is open. */ .cf.is-open .cf__stage, .cf.is-open .cf-action, .cf.is-open .cf__counter { pointer-events: none; } .cf.is-open .cf-action, .cf.is-open .cf__counter { opacity: 0; transition: opacity 120ms linear; } .cf-action, .cf__counter { transition: opacity 320ms 220ms linear, border-color 200ms, translate 300ms var(--cf-ease-out); } /* ========================================================================== Panel — the back of the card ========================================================================== */ /* Shares the deck's vanishing point so the fold lines up. */ .cf__panels { position: fixed; inset: 0; z-index: 50; perspective: var(--cf-perspective); perspective-origin: 50% 50%; pointer-events: none; } .cf-panel { position: absolute; inset: 0; display: none; /* Without this the sheet is not a 3D child of .cf__panels, the perspective never reaches it, and rotateY degrades into a horizontal squash. */ transform-style: preserve-3d; } .cf-panel.is-active { display: block; pointer-events: auto; } .cf-panel:focus { outline: none; } /* One 3D parent for both leaves. During the flip it is pinned to the card rect; after expand it fills the panel insets. Front and blank back are siblings here, so they share one hinge and one vanishing point. */ .cf-book { position: absolute; inset: var(--cf-panel-top) var(--cf-panel-inset) 0; transform-style: preserve-3d; pointer-events: none; visibility: hidden; } .cf-book.is-live, .cf-panel.is-expanded .cf-book { visibility: visible; } .cf-panel.is-expanded .cf-book { inset: var(--cf-panel-top) var(--cf-panel-inset) 0; pointer-events: auto; } .cf-book__front { position: absolute; inset: 0; transform-origin: 100% 50%; transform-style: preserve-3d; backface-visibility: hidden; border-radius: var(--cf-card-radius); pointer-events: none; z-index: 2; /* Sit just above the blank so the cover occludes it until it turns. */ transform: translateZ(1px); } .cf-panel.is-expanded .cf-book__front { visibility: hidden; } .cf-book__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--cf-card-w) * 0.062); border-radius: var(--cf-card-radius); background: linear-gradient(157deg, var(--cf-paper-2) 20%, var(--cf-paper) 72%, #e9e5dd 100%); box-shadow: 0 1px 2px rgb(0 0 0 / 0.16), 0 1.5rem 2.75rem -1rem rgb(0 0 0 / 0.42); overflow: hidden; text-align: left; color: var(--cf-ink); } .cf-book__face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(103deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0) 26%); pointer-events: none; } .cf-book__face .cf-badge { font-size: calc(var(--cf-card-w) * 0.043); } .cf-book__face .cf-card__title { margin: calc(var(--cf-card-w) * 0.045) 0 0; font-size: calc(var(--cf-card-w) * 0.115); font-weight: 800; line-height: 1.03; letter-spacing: -0.028em; } .cf-book__face .cf-card__meta { margin-top: calc(var(--cf-card-w) * 0.045); font-size: calc(var(--cf-card-w) * 0.04); } .cf-panel__sheet { position: absolute; inset: 0; border-radius: var(--cf-card-radius); background: var(--cf-paper); box-shadow: 0 -0.5rem 4rem rgb(0 0 0 / 0.28); overflow: hidden; /* Flat under the cover — no second rotation, so nothing can detach. */ transform: none; will-change: transform; z-index: 1; pointer-events: auto; } .cf-panel.is-expanded .cf-panel__sheet { border-radius: var(--cf-panel-radius) var(--cf-panel-radius) 0 0; } /* Content is a different element and stays invisible until the blank back has finished unfolding. */ .cf-panel:not(.is-open) .cf-panel__scroll, .cf-panel:not(.is-open) .cf-panel__close { opacity: 0; visibility: hidden; pointer-events: none; } .cf-panel__scroll { position: absolute; inset: 0; overflow: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .cf-panel.is-open .cf-panel__scroll { overflow-y: auto; } .cf-panel__close { position: absolute; top: clamp(1rem, 2.4vw, 2.25rem); right: clamp(1rem, 2.4vw, 2.25rem); z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--cf-ink); color: #fff; cursor: pointer; transition: scale 240ms var(--cf-ease-out), background-color 240ms; } .cf-panel__close:hover { scale: 1.08; } .cf-panel__close:focus-visible { outline: 3px solid var(--cf-accent); outline-offset: 3px; } .cf-panel__close svg { width: 1.05rem; height: 1.05rem; } /* --- article ------------------------------------------------------------ */ .cf-article { --cf-gutter: clamp(1.25rem, 6vw, 7rem); padding: clamp(2.5rem, 6vw, 5rem) var(--cf-gutter) 0; } .cf-article__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: start; gap: clamp(1.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); } .cf-article__title { margin: 1.1rem 0 0; font-size: clamp(2rem, 4.6vw, 4rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; } .cf-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1.25rem, 2.5vw, 2rem); color: var(--cf-ink-soft); font-size: 0.9rem; font-weight: 500; } .cf-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cf-accent); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; } .cf-article__lede { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; max-width: 34ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--cf-ink-soft); } .cf-article__lede strong { display: block; margin-bottom: 0.35rem; color: var(--cf-accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .cf-article__hero { align-self: center; width: 100%; max-width: 34rem; } .cf-article__body { padding: clamp(2rem, 4vw, 3.5rem) var(--cf-gutter) clamp(3rem, 6vw, 6rem); border-radius: var(--cf-panel-radius) var(--cf-panel-radius) 0 0; background-color: var(--cf-paper-2); transition: background-color 420ms var(--cf-ease-out) 140ms; } /* The sheet has to be blank while it folds: any block of colour inside it makes the scaling obvious. */ .cf-panel:not(.is-open) .cf-article__body { background-color: transparent; transition-delay: 0ms; } /* Left aligned on the same gutter as the title, not centred in the sheet. */ .cf-prose { max-width: 34rem; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.7; } .cf-prose > * + * { margin-top: 1.15em; } .cf-prose h3 { margin-top: 2.25em; font-size: 1.45em; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .cf-prose blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 3px solid var(--cf-accent); font-size: 1.15em; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; } .cf-prose ul { padding-left: 1.1rem; } .cf-prose li + li { margin-top: 0.5em; } .cf-prose code { padding: 0.15em 0.4em; border-radius: 5px; background: rgb(0 0 0 / 0.06); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; } .cf-article__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; max-width: 34rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-top: 2rem; border-top: 1px solid rgb(0 0 0 / 0.1); } .cf-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .cf-tag { padding: 0.3em 0.7em; border-radius: 999px; background: rgb(0 0 0 / 0.06); font-size: 0.78rem; font-weight: 600; color: var(--cf-ink-soft); } .cf-next { appearance: none; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.25rem; border: 0; border-radius: 999px; background: var(--cf-ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background-color 220ms, translate 260ms var(--cf-ease-out); } .cf-next:hover { background: var(--cf-accent); translate: 0 -2px; } .cf-next:focus-visible { outline: 3px solid var(--cf-accent); outline-offset: 3px; } /* --- staggered reveal --------------------------------------------------- */ /* Everything inside the panel starts hidden. The panel is blank while it folds open, which is also what hides the scale distortion, then the contents arrive one after another. */ .cf-panel [data-cf-reveal] { opacity: 0; translate: 0 1.25rem; } .cf-panel.is-open [data-cf-reveal] { opacity: 1; translate: none; transition: opacity 460ms var(--cf-ease-out), translate 620ms var(--cf-ease-out); transition-delay: calc(var(--cf-reveal-i, 0) * 48ms); } /* On the way out the contents leave together, and fast, so the fold closes over an empty sheet. */ .cf-panel.is-closing [data-cf-reveal] { opacity: 0; translate: none; transition: opacity 130ms linear; } /* The page behind the panel must not scroll while a post is open. */ html.cf-lock, html.cf-lock body { overflow: hidden; } /* ========================================================================== Background colour field ========================================================================== */ /* A tall ellipse that sweeps across the screen, so the colour change reads as a wipe rather than a cross fade. */ .cf-wipe { position: absolute; top: 50%; left: 50%; width: 55vmax; height: 240vmax; margin: -120vmax 0 0 -27.5vmax; border-radius: 50%; transform: translateX(-28vw) rotate(-4deg) scaleX(0); transform-origin: 50% 50%; will-change: transform; pointer-events: none; } /* ========================================================================== Small screens: the deck loses its fan, the panel stays full bleed ========================================================================== */ @media (max-width: 48rem) { .cf { --cf-card-w: min(74vw, 19rem); --cf-perspective: 1100px; } /* Deck on its own line, both actions side by side underneath it. */ .cf__deck-row { gap: 1.75rem 2.5rem; } .cf__stage { order: 1; flex: 0 0 100%; display: flex; justify-content: center; } .cf-action { order: 2; } /* Tighter fan: there is no room beside the deck to spread into. */ .cf-card[data-slot="1"] { --x: calc(var(--cf-card-w) * -0.06); } .cf-card[data-slot="2"] { --x: calc(var(--cf-card-w) * -0.1); } .cf-card[data-slot="3"] { --x: calc(var(--cf-card-w) * -0.13); } .cf-card[data-slot="rest"] { --x: calc(var(--cf-card-w) * -0.15); } .cf-article__head { grid-template-columns: minmax(0, 1fr); } .cf-panel__close { background: rgb(20 22 26 / 0.9); } } /* ========================================================================== Reduced motion: keep the meaning, drop the 3D ========================================================================== */ @media (prefers-reduced-motion: reduce) { .cf { --cf-slot-dur: 1ms; } .cf-card, .cf-card__face, .cf-action, .cf-next { transition-duration: 1ms; } .cf-panel [data-cf-reveal] { translate: none; } .cf-panel.is-revealing [data-cf-reveal], .cf-panel.is-open [data-cf-reveal] { transition-duration: 160ms; transition-delay: 0ms; } }