/* =========================================================================== Suki's Corner A blush-paper keepsake book. Soft light, hand-tilted photo frames, and one high-contrast serif doing all of the emotional work. Every colour is a token, and every token is declared twice — once here for the light theme, once in the [data-theme="dark"] block below it. Nothing past the token blocks hard-codes a colour, which is the only reason the theme toggle is as small as it is. Please keep it that way. =========================================================================== */ :root { /* Surface */ --paper: #fdf6f7; --paper-deep: #f8e9ee; --card: #ffffff; --frame: #fbeef2; /* Ink */ --ink: #3d2b33; --ink-body: #6b5560; --ink-muted: #9c8892; /* Accent */ --pink: #e8869f; --pink-deep: #c9627e; --pink-soft: #fbe8ee; --border: #f3e2e7; --rule: #f0dde4; /* Status */ --good: #4f9d7e; --good-soft: #e6f4ed; --warn: #b9822f; --warn-soft: #fbf0dc; --late: #cc5a5a; --late-soft: #fbe6e6; /* Type */ --display: "Fraunces", Georgia, "Times New Roman", serif; --hand: "Caveat Brush", "Segoe Script", cursive; --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* Elevation — pink-tinted, so shadows read as warm light rather than grey weight */ --lift: 0 10px 30px rgba(201, 98, 126, 0.10); --lift-high: 0 18px 46px rgba(201, 98, 126, 0.16); --tape: rgba(232, 134, 159, 0.20); /* Shape + motion */ --r-sm: 12px; --r: 20px; --r-lg: 28px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --gutter: clamp(20px, 5vw, 64px); --max: 1120px; --grain: 0.55; /* Passport stamp ink. Deliberately not the pink: a stamp reads as a stamp because the ink is a different colour from the page it is pressed onto. */ --stamp-ink: #6d7f9c; --stamp-page: #fffdf8; } :root[data-theme="dark"] { --paper: #191216; --paper-deep: #120d10; --card: #241a20; --frame: #2c2028; --ink: #f7eaef; --ink-body: #cdb5c0; --ink-muted: #9c8590; --pink: #ff9ec0; --pink-deep: #ffb9d1; --pink-soft: #35232c; --border: #3a2a33; --rule: #33242c; --good: #7fd3ae; --good-soft: #1e2f28; --warn: #e2b264; --warn-soft: #322818; --late: #f39292; --late-soft: #37211f; --lift: 0 10px 34px rgba(0, 0, 0, 0.45); --lift-high: 0 20px 50px rgba(0, 0, 0, 0.55); --tape: rgba(255, 158, 192, 0.14); --grain: 0.9; --stamp-ink: #93a9c9; --stamp-page: #1f1a1d; } /* =========================================================================== Base =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Photo frames tilt a degree or two past their column. This has to sit on the root element: overflow-x on propagates to the viewport instead of clipping, and `clip` avoids the side effects `hidden` has on sticky. */ html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color 400ms var(--ease), color 400ms var(--ease); } img, video { display: block; max-width: 100%; } h1, h2, h3 { margin: 0; font-weight: 400; } p { margin: 0; } ul, ol, dl, dd { margin: 0; padding: 0; } li { list-style: none; } ::selection { background: var(--pink-soft); color: var(--pink-deep); } :focus-visible { outline: 2.5px solid var(--pink); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: var(--lift); transform: translateY(-250%); transition: transform 200ms var(--ease); } .skip:focus-visible { transform: translateY(0); } /* Atmosphere: two soft pink lights, plus a grain wash over everything at a whisper so the blush never goes flat. Both decorative. */ .glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60vw 48vw at 82% -6%, var(--pink-soft), transparent 68%), radial-gradient(52vw 42vw at 4% 38%, var(--pink-soft), transparent 64%), linear-gradient(180deg, transparent 55%, var(--paper-deep) 100%); opacity: 0.85; } body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: calc(var(--grain) * 0.085); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* =========================================================================== Shared type =========================================================================== */ .eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pink-deep); } .section-head { margin-bottom: clamp(36px, 5vw, 56px); } .section-head h2 { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 80; font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.08; letter-spacing: -0.025em; } .section-head__sub { margin-top: 14px; max-width: 46ch; color: var(--ink-body); } .section-head--center { text-align: center; } .section-head--center .section-head__sub { margin-inline: auto; } .section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* =========================================================================== Layout =========================================================================== */ main { width: min(var(--max), calc(100% - var(--gutter) * 2)); margin-inline: auto; } main > section { padding-block: clamp(60px, 9vw, 116px); } main > section + section { border-top: 1px solid var(--rule); } .card { padding: clamp(24px, 3.4vw, 38px); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--lift); } /* =========================================================================== Masthead =========================================================================== */ .masthead { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color 300ms var(--ease); } .masthead.is-stuck { border-bottom-color: var(--border); } .masthead__inner { width: min(var(--max), calc(100% - var(--gutter) * 2)); margin-inline: auto; display: flex; align-items: center; gap: 20px; padding-block: 15px; } .brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: inherit; } .brand__paw { font-size: 19px; transition: transform 400ms var(--ease); } .brand:hover .brand__paw { transform: rotate(-16deg) scale(1.12); } .brand__name { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1; font-size: 21px; letter-spacing: -0.015em; white-space: nowrap; } .nav { display: flex; gap: 2px; } .nav a { padding: 7px 13px; border-radius: 999px; color: var(--ink-body); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 200ms var(--ease), background-color 200ms var(--ease); } .nav a:hover { color: var(--ink); background: var(--pink-soft); } .nav a.is-active { color: var(--pink-deep); background: var(--pink-soft); } .themer { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--ink-body); cursor: pointer; transition: transform 300ms var(--ease), border-color 200ms var(--ease); } .themer:hover { transform: rotate(-20deg); border-color: var(--pink); } .themer__icon { grid-area: 1 / 1; font-size: 16px; transition: opacity 260ms var(--ease), transform 260ms var(--ease); } .themer__icon--moon { opacity: 0; transform: scale(0.4) rotate(-90deg); } [data-theme="dark"] .themer__icon--sun { opacity: 0; transform: scale(0.4) rotate(90deg); } [data-theme="dark"] .themer__icon--moon { opacity: 1; transform: none; } /* =========================================================================== Hero =========================================================================== */ .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(32px, 6vw, 76px); } .hero__title { font-family: var(--display); font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 144; font-size: clamp(3rem, 8.4vw, 5.6rem); line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; } .hero__heart { display: inline-block; margin-left: 0.12em; color: var(--pink); font-size: 0.62em; vertical-align: 0.22em; animation: beat 2.8s var(--ease) infinite; } @keyframes beat { 0%, 62%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } 78% { transform: scale(1); } 86% { transform: scale(1.12); } } .hero__lede { margin-top: 22px; max-width: 42ch; font-size: 1.08rem; color: var(--ink-body); } /* Badges ------------------------------------------------------------------ */ .badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 500; box-shadow: var(--lift); transition: transform 300ms var(--ease), border-color 200ms var(--ease); } .badge:hover { transform: translateY(-3px) rotate(-1.5deg); border-color: var(--pink); } .badge__emoji { font-size: 15px; } /* =========================================================================== Media frames Shared by the hero, the timeline, the passport and the nap cam. A frame is a wrapper that holds the resting tilt plus an inner element that clips the media, so a frame can straighten on hover without flattening its contents. =========================================================================== */ .frame { position: relative; transform: rotate(var(--tilt, -1.2deg)); transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); } .frame:hover { transform: rotate(0deg) translateY(-4px); } .frame__inner { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); background: var(--frame); box-shadow: var(--lift); aspect-ratio: var(--ratio, 4 / 3); } .frame:hover .frame__inner { box-shadow: var(--lift-high); } .frame__inner img, .frame__inner video { width: 100%; height: 100%; object-fit: cover; } /* A strip of washi tape across the top edge — the one detail that makes the page read as something assembled by hand rather than generated. */ .frame__tape { position: absolute; top: -9px; left: 50%; z-index: 2; width: 86px; height: 22px; transform: translateX(-50%) rotate(var(--tape-tilt, -2deg)); background: var(--tape); border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04); } /* Empty state: a dashed frame with a paw and the caption, so an unfilled slot still looks deliberate. */ .frame--empty .frame__inner { display: grid; place-content: center; gap: 8px; border-style: dashed; border-color: var(--pink); background: color-mix(in srgb, var(--pink-soft) 60%, var(--card)); text-align: center; padding: 20px; } .frame--empty .frame__paw { font-size: 24px; opacity: 0.65; } .frame--empty .frame__hint { font-family: var(--hand); font-size: 19px; color: var(--pink-deep); } .frame__caption { margin-top: 12px; font-family: var(--hand); font-size: 18px; color: var(--ink-muted); text-align: center; } /* The play affordance shown for an ambient clip when the visitor has asked for reduced motion, so a paused poster never looks broken. */ .frame__play { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; border: 0; background: transparent; cursor: pointer; } .frame--stilled .frame__play { display: grid; } .frame__play::before { content: ""; width: 54px; height: 54px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: var(--lift); } .frame__play::after { content: ""; position: absolute; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--pink-deep); margin-left: 4px; } /* =========================================================================== About + current status =========================================================================== */ .about { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 30px); align-items: start; } .about__title { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 80; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; } .about__body { margin-top: 18px; color: var(--ink-body); } .status__list { display: flex; flex-direction: column; } .status__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--rule); } .status__row:last-child { border-bottom: 0; padding-bottom: 0; } .status__row dt { color: var(--ink-body); font-size: 15px; } .status__row dd { font-weight: 500; font-size: 15px; text-align: right; } .status__row dd.is-good { color: var(--good); } .status__row dd.is-warn { color: var(--warn); } .status__row dd.is-late { color: var(--late); } .status__row dd.is-none { color: var(--ink-muted); font-style: italic; } /* =========================================================================== Timeline =========================================================================== */ .rail { position: relative; display: flex; flex-direction: column; gap: clamp(44px, 6vw, 76px); } /* The spine, faded at both ends so it doesn't collide with the section rules. */ .rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--rule) 7%, var(--rule) 93%, transparent); } .chapter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; } .chapter__text { grid-column: 1; text-align: right; } .chapter__media { grid-column: 3; } /* Odd chapters mirror. Handed out by the renderer, not by nth-child, so a text-only chapter can't knock the alternation out of step. */ .chapter--flip .chapter__text { grid-column: 3; text-align: left; } .chapter--flip .chapter__media { grid-column: 1; } /* Two or more photos in one chapter sit as a cluster rather than a stack. The tape and tilt already vary per frame, so a little gap is all it needs to read as a handful of prints laid down together. */ .frames--cluster { display: grid; /* auto-fit rather than a fixed two, so the cluster drops to one column on a phone on its own. Below ~160px the washi tape is wider than the frame it is taped to, which is the point this has to stop splitting. */ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .chapter__year { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-deep); } .chapter__title { margin-top: 8px; font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 60; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; } .chapter__body { margin-top: 10px; color: var(--ink-body); font-size: 15.5px; } .chapter__marker { grid-column: 2; justify-self: center; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--pink); box-shadow: var(--lift); } .chapter__marker svg { width: 17px; height: 17px; display: block; } /* =========================================================================== Passport =========================================================================== */ .passport__sub { font-family: var(--hand); font-size: 20px; color: var(--pink-deep); } .stamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(18px, 2.4vw, 26px); perspective: 1400px; } /* Each stamp is one card with two faces. Both faces sit in the same grid cell so the card is exactly as tall as its taller side, and a fixed aspect ratio keeps every stamp the same size — a passport page of matching impressions rather than a ragged collage. */ .stamp { position: relative; } .stamp__card { display: grid; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transform: rotate(var(--tilt, 0deg)); transform-style: preserve-3d; transition: transform 700ms var(--ease); } .stamp__card:hover { transform: rotate(0deg) translateY(-4px); } .stamp__card:focus-visible { outline: 2px solid var(--pink); outline-offset: 6px; } .stamp.is-flipped .stamp__card { transform: rotateY(180deg); } .stamp.is-flipped .stamp__card:hover { transform: rotateY(180deg) translateY(-4px); } .stamp__face { grid-area: 1 / 1; overflow: hidden; border-radius: var(--r-sm); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--lift); } .stamp__card:hover .stamp__face { box-shadow: var(--lift-high); } .stamp__face--back { transform: rotateY(180deg); } /* ---- front: the stamp impression ---- */ .stamp__face--front { position: relative; display: grid; place-items: center; padding: 14px; background: var(--stamp-page); border: 1px solid var(--border); } /* The impression itself: a double rule in ink, sitting slightly askew on the page, the way a hand-pressed stamp never lands quite square. */ .stamp__ink { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 16px 10px; border: 2px solid var(--stamp-ink); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--stamp-page), inset 0 0 0 3px var(--stamp-ink); color: var(--stamp-ink); /* Rubber ink never prints solid. */ opacity: 0.88; transform: rotate(-3.5deg); } .stamp__emoji { font-size: 20px; line-height: 1; } .stamp__place { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.1; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; } .stamp__rule { width: 62%; height: 1px; background: currentColor; opacity: 0.55; } .stamp__date { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } /* The affordance. Small, in the page's own voice, not a button. */ .stamp__flip { position: absolute; inset-inline: 0; bottom: 10px; font-family: var(--hand); font-size: 15px; text-align: center; color: var(--ink-muted); opacity: 0; transition: opacity 250ms var(--ease); } .stamp__card:hover .stamp__flip, .stamp__card:focus-visible .stamp__flip { opacity: 1; } /* ---- back: the details ---- */ .stamp__face--back { display: grid; grid-template-rows: 1fr auto; background: var(--card); border: 1px solid var(--border); } .stamp__shots { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; min-height: 0; background: var(--border); } .stamp__shots img, .stamp__shots video { width: 100%; height: 100%; object-fit: cover; display: block; } .stamp__detail { padding: 14px 16px 16px; } /* Both faces are built from spans so they can live inside the