/* The couple's front page — what `/` looks like once two people have paired. * * Loaded by the landing document alongside landing.css, whose tokens it uses wholesale: same cream * ground, same ink, same teal system voice. Pink and blue appear here doing the one job the brand * allows them — they are the two people — and nowhere as decoration. * * R5 rebuilt the LOOK and none of the behaviour (docs/R5-INTERFACE.md, "home"). What went: * the mono uppercase kicker with `01 ·` in front of it, the dot-grid tray, the outline on every * card, and the row of stat tiles that said the same numbers the top of the page had already said. * What arrived: a hero with their two names in the serif and their real tree standing on it, one * question card that owns the main column, one row of 44px chips, and two counts underneath. * * MEASURED PAIRINGS (docs/STYLE-GUIDE.md §02; light / dark, computed 2026-09-07): * --ink on --cream 15.9 / 14.6 the sentence, the names when a name is unset * --ink-soft on --cream 5.4 / 6.6 the hero sentence, every card's sub-line * --ink-faint on --cream 4.6 / 5.5 the eyebrow, the quiet furniture * --pink-label on --cream 5.3 / 8.0 one name, and the streak chip's ink on its tint * --blue-label on --cream 5.7 / 8.6 the other name * --on-pink-tint on --pink-tint 5.4 / 8.1 the streak chip, the nudge pill, the join card * --on-blue-tint on --blue-tint 5.6 / 8.4 the waiting-for-them card * --teal-deep on --paper-raised 5.9 / 7.9 the one system voice (kickers, "read everything") * Nothing on this page puts white on pink, on blue or on a gradient, and every colour above is a * token declared in a bare `:root` (landing.css, base.css) before any theme block touches it. * * The visibility switch lives at the top, because it is the load-bearing part: `data-visitor` is * stamped on by an inline script in the head, BEFORE the first paint, so a couple never sees * a frame of the marketing page on their own home. With no JavaScript at all nothing is stamped, * the landing renders exactly as it always did, and this file changes nothing. */ html[data-visitor='paired'] > body > .topbar, html[data-visitor='paired'] > body > #main, html[data-visitor='paired'] > body > .footer, html[data-visitor='onboarded'] > body > .topbar, html[data-visitor='onboarded'] > body > #main, html[data-visitor='onboarded'] > body > .footer { display: none !important; } #couple-home[hidden] { display: none; } .chome { min-height: 100vh; min-height: 100dvh; background: var(--cream); color: var(--ink); padding: 24px 0 64px; } .chome__wrap { display: flex; flex-direction: column; gap: 20px; } /* ---- the kicker ----------------------------------------------------------------------------- * Sentence case, no numbering, no mono, no letter-spacing. The teal is the product's one system * voice and --teal-deep is its readable member at this size (5.90:1 on a card). BRAND §3's old * rule — "mono, uppercase, letter-spaced, teal and numbered" — is the sentence that produced the * look Evan objected to, and the shell has rewritten it. */ .chome__k { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--teal-deep); } /* ---- the hero ------------------------------------------------------------------------------- * Their two names, one sentence about them, and the tree they have grown standing beside it. On a * phone the tree drops under the words and centres; there is no width at which it is decoration * beside a paragraph, because it is the one picture on the page that is actually theirs. */ .chome__hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 4px 0 2px; } .chome__hero-text { display: flex; flex-direction: column; gap: 10px; flex: 1 1 320px; min-width: 0; } .chome__eyebrow { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-faint); letter-spacing: 0; text-transform: none; } /* The names are the page's title and they are set in the serif, because the two of them are the kept thing and the serif is the only voice here that is not the software talking. */ .chome__together { margin: 0; font-family: var(--serif, Georgia, serif); font-size: clamp(30px, 7.5vw, 52px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; text-wrap: balance; } .chome__name[data-color='pink'] { color: var(--pink-label); } .chome__name[data-color='blue'] { color: var(--blue-label); } .chome__and { color: var(--ink-faint); font-size: .62em; } .chome__lead { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; max-width: 40ch; } /* The streak: a line, not a tile. A small tinted chip carries the count and the server's own sentence follows it. --on-pink-tint on --pink-tint is 5.4:1 light and 8.1:1 dark. */ .chome__streak { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 15px; color: var(--ink-soft); } .chome__streak-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: var(--r-pill); background: var(--pink-tint); color: var(--on-pink-tint); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .chome__streak-chip .chome__ic { color: inherit; } /* A streak that is not alive keeps its shape and loses its warmth rather than its place: --ink-soft on --paper is 5.2:1 light and 6.3:1 dark. */ .chome__streak[data-alive='false'] .chome__streak-chip { background: var(--paper); color: var(--ink-soft); } /* The tree, on a soft patch of ground. The patch is --green-tint, which is a surface and never carries text; the drawing is the couple's own (public/art/tree/stage.svg). */ .chome__grow { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; margin-inline: auto; text-decoration: none; color: inherit; } .chome__ground { display: grid; place-items: end center; width: 190px; height: 168px; padding-bottom: 8px; background: radial-gradient(ellipse 58% 22% at 50% 92%, var(--green-tint) 0%, transparent 72%); } .chome__tree-art { width: 150px; height: 150px; object-fit: contain; } .chome__stage { margin: 0; font-size: 13px; color: var(--ink-soft); text-align: center; } .chome__grow:hover .chome__stage { color: var(--ink); } /* ---- the two people, as discs --------------------------------------------------------------- * Two coloured discs at the top of the hero, overlapping slightly, saying which colour is whose * before the two names underneath are read in those colours. They are the legend for the one piece * of colour-coding the product uses everywhere. `.chome__solo` is the invite view's single disc, * which shares this stylesheet and is one person waiting. */ .chome__pair { display: flex; align-items: center; } .chome__pair .chome__disc + .chome__disc { margin-left: -10px; } .chome__person, .chome__solo { display: flex; align-items: center; gap: 10px; } .chome__amp { font: 600 20px/1 inherit; color: var(--ink-faint); align-self: center; } .chome__disc { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 700 15px/1 inherit; flex: 0 0 auto; /* A ring in the page's own ground, so the overlap reads as two objects rather than one blob. */ box-shadow: 0 0 0 3px var(--cream); } /* The invite view's disc is on its own and stands at the size it always did. */ .chome__solo .chome__disc { width: 46px; height: 46px; font-size: 19px; box-shadow: none; } /* A name on a solid identity disc: --pink-ink / --blue-ink are the *label-on-tint* tokens and sit at 2.48:1 and 2.31:1 on the solid fills (the §08 name-chip failure, again, 2026-09-04). --on-pink and --on-blue are the tokens base.css defines for a solid fill: 7.48:1 and 6.92:1, and they do not flip with the theme because the fills stay pale in both. */ .chome__disc.is-pink { background: var(--pink); color: var(--on-pink, #2A0A14); } .chome__disc.is-blue { background: var(--blue); color: var(--on-blue, #06152B); } .chome__who { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .chome__h1 { margin: 0; font-size: clamp(26px, 6.4vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; } /* ---- the shape of the page ------------------------------------------------------------------ * One column on a phone, two from 1024px: the question owns the main column and the doors sit * beside it. A real grid rather than the `columns: 2` flow this page used to run on — that was * chosen when this stylesheet did not own the DOM, and could not say which things belong in which * column. home.js builds `.chome__main` and `.chome__side` now, so it can. */ .chome__body { display: flex; flex-direction: column; gap: 20px; } .chome__main, .chome__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* ---- today's question ----------------------------------------------------------------------- * The card's own rules live in client/ui/ritual.css (shared with the Hub); this is only how it * sits and reads on THIS page. It owns the main column, so the question itself gets a size up. */ .chome__ritual { display: flex; flex-direction: column; gap: 12px; } .chome__ritual:empty { display: none; } .chome__ritual-msg { margin: -4px 0 0; font-size: 14px; color: var(--teal-deep); } .chome__ritual-msg[hidden] { display: none; } .chome__ritual .ritual, .chome__ritual .ritual-carry { border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 22px 20px 24px; } .chome__ritual .ritual { box-shadow: var(--shadow-card); } .chome__ritual .ritual-q { font-size: clamp(23px, 4.4vw, 31px); line-height: 1.24; } /* The card's own kickers, on THIS page. `hub/scenes/ritual.js` writes them in literal capitals * and `client/ui/ritual.css` sets them in mono with .18em of tracking — which is precisely the * chrome R5 exists to remove, sitting on the one card that owns the screen. Neither file is this * agent's, so the fix is scoped to this page and done in CSS: lower-case the shout, put the first * letter back, drop the mono and the tracking. It is idempotent — run it on "Them" and you get * "Them" — so it survives whoever rewrites those strings properly later. * * The scale day's legend is deliberately NOT in this list: its keys are inline spans, and * `::first-letter` on their container would capitalise the row rather than each key. That one is * a copy fix in ritual.js and belongs to whoever owns that file. */ /* Three class names deep, not two: ritual.css writes `.ritual .piece-kicker` and is linked AFTER * this file in landing/index.html, so an equally specific rule here loses the tie and the tracking * stays at .18em. `.chome` in front is what wins it. (Caught by home.spec.js, which measured 1.8px * where it expected none — exactly the failure a spec that reads computed style exists for.) */ .chome .chome__ritual .piece-kicker, .chome .chome__ritual .answer-who, .chome .chome__ritual .ritual-deck { font-family: inherit; letter-spacing: 0; text-transform: lowercase; } .chome .chome__ritual .piece-kicker { font-size: 13px; font-weight: 700; } .chome .chome__ritual .answer-who, .chome .chome__ritual .ritual-deck { font-size: 12px; font-weight: 600; } .chome .chome__ritual .piece-kicker::first-letter, .chome .chome__ritual .answer-who::first-letter, .chome .chome__ritual .ritual-deck::first-letter { text-transform: uppercase; } /* The two answers: stacked on a phone, side by side on anything wider. The shared card grids at `1fr 1fr` at every width, which on a 360px screen is two 150px columns of prose. */ .chome__ritual .ritual-answers { grid-template-columns: 1fr; } @media (min-width: 560px) { .chome__ritual .ritual-answers { grid-template-columns: 1fr 1fr; } } /* Waiting for them. The shared card draws this as a grey hatched box, which reads as "unavailable" when what it means is "they have not looked yet, and neither have you". Here it is a soft blue card with a lock on it: --on-blue-tint on --blue-tint is 5.6:1 light and 8.4:1 dark, and the lock itself is the sprite's, prepended by home.js because a pseudo-element cannot reach it. */ .chome__ritual .answer-card.is-sealed { background: var(--blue-tint); border-color: transparent; color: var(--on-blue-tint); } .chome__ritual .answer-card.is-sealed .answer-who, .chome__ritual .answer-card.is-sealed .answer-sealed { color: var(--on-blue-tint); } .chome__ritual .answer-card.is-sealed .answer-sealed { font-style: normal; } .chome__lock { display: block; color: var(--on-blue-tint); margin: 0 0 6px; } /* ---- one row of chips ----------------------------------------------------------------------- * "Say something" and "leave something" were two rows under two kickers, and a reader had to work * out that both were the same offer. One row now, every chip 44px, every chip an icon and a word. * The nudge sender is `display: contents` so its three chips are laid out by THIS row rather than * by a box of their own. */ .chome__chips { display: flex; flex-wrap: wrap; gap: 8px; } .chome__nudge-send, .chome__nudge-row { display: contents; } .chome__chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px; border-radius: var(--r-pill); background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-card); border: 0; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; } .chome__chip:hover { box-shadow: var(--shadow-lift, var(--shadow-2)); } /* Six chips and a picker is a lot for 390px. They stay 44px tall — that is the floor and it does not move — and buy the room back sideways, which costs a phone one wrapped row instead of two. */ @media (max-width: 559px) { .chome__chips { gap: 6px; } .chome__chip { padding: 0 12px; gap: 6px; font-size: 13px; } .chome__nudge-game { max-width: 8.5em; } } .chome__chip:disabled { opacity: .55; cursor: default; } .chome__ic { display: inline-flex; flex: 0 0 auto; color: var(--teal-deep); } .chome__chip .chome__ic { color: var(--ink-soft); } .chome__nudge-play { display: inline-flex; align-items: center; gap: 6px; } .chome__nudge-game { max-width: 11em; min-height: var(--tap); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 14px; } .chome__nudge-msg, .chome__note-msg, .chome__dayone-msg { margin: 0; font-size: 13px; color: var(--ink-soft); } .chome__nudge-msg[hidden], .chome__note-msg[hidden], .chome__dayone-msg[hidden] { display: none; } /* ---- every card ------------------------------------------------------------------------------ * No border, one shadow, one radius (S5). The dot-grid tray is gone and the cards stand on the * cream on their own. */ .chome__card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--paper-raised); border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; } a.chome__card:hover { box-shadow: var(--shadow-lift, var(--shadow-2)); } /* ---- tonight --------------------------------------------------------------------------------- */ .chome__next-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; } .chome__next-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .chome__next-t { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; } .chome__next-why { font-size: 13px; color: var(--ink-soft); } .chome__next .chome__ic { color: var(--ink-faint); } /* The tinted icon wells are the shell's (`.iwell`, base.css, S6) and this page only says which tone each row wears: lavender for tonight, green for what you did last, pink for the streak. Each tint is paired with its own readable ink there, so nothing on them is under AA. */ /* ---- the last strip they kept ----------------------------------------------------------------- */ .chome__strip[hidden] { display: none; } .chome__strip-img { width: 100%; max-height: 220px; object-fit: contain; object-position: center; border-radius: var(--r-ctrl); background: var(--paper); margin-top: 4px; } .chome__strip-when { font-size: 13px; color: var(--ink-faint); margin-top: 6px; } /* ---- day one ---------------------------------------------------------------------------------- */ .chome__date { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; } .chome__sub { font-size: 13px; color: var(--ink-soft); } /* ---- the counts under the hero ---------------------------------------------------------------- * Two numbers the hero did NOT say, side by side, with the C6 knowing card across the bottom when * there is one. Nothing here is a tile on a texture any more — three cards on the cream. */ .chome__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .chome__count { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } /* ---- from your story --------------------------------------------------------------------------- */ .chome__story { gap: 6px; } .chome__story-q { margin: 0; font-family: var(--serif, Georgia, serif); font-size: 18px; line-height: 1.35; } .chome__story-answers { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; } .chome__story-a { margin: 0; padding: 8px 12px; font-size: 14px; line-height: 1.45; border-radius: var(--r-ctrl); background: var(--paper); border-left: 3px solid var(--line-strong); white-space: pre-wrap; overflow-wrap: anywhere; } .chome__story-a[data-side='a'] { border-left-color: var(--pink); } .chome__story-a[data-side='b'] { border-left-color: var(--blue); } .chome__story-when { margin: 0; font-size: 12px; color: var(--ink-faint); } /* The card is a link to the whole record. The affordance is quiet on purpose: what is being offered is their own past, not a button. 13px and not bold, so AA asks 4.5 — --teal-deep is 5.90 on a card. */ .chome__story-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--teal-deep); } .chome__story-more .chome__ic { color: inherit; } /* ---- the last thing --------------------------------------------------------------------------- */ .chome__last { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--paper-raised); box-shadow: var(--shadow-card); } .chome__last-t { font-size: 15px; } /* ---- what they sent you ------------------------------------------------------------------------ */ .chome__nudge { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-card); background: var(--pink-tint); color: var(--on-pink-tint); font-size: 15px; font-weight: 600; } .chome__nudge .chome__ic { color: inherit; } a.chome__nudge--go { text-decoration: none; } a.chome__nudge--go:hover { background: color-mix(in srgb, var(--pink-tint) 82%, var(--ink)); } /* ---- the code field (the alone state) ----------------------------------------------------- */ .chome__code { display: flex; flex-direction: column; gap: 6px; } .chome__code-row { display: flex; gap: 8px; } .chome__code-input { flex: 1; min-width: 0; padding: 12px 14px; font-family: var(--mono, ui-monospace, monospace); font-size: 20px; letter-spacing: 0.28em; text-transform: uppercase; background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); } .chome__code-msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--ink-soft); } .chome__hubcode { margin: 0; font-size: 13px; color: var(--ink-soft); } .chome__mono { font-family: var(--mono, ui-monospace, monospace); letter-spacing: 0.12em; } /* ---- the quiet furniture ------------------------------------------------------------------ */ .chome__offline { margin: 0; font-size: 13px; color: var(--ink-faint); } .chome__unpair { align-self: flex-start; margin-top: 18px; padding: 0; background: none; border: 0; font-size: 13px; color: var(--ink-faint); text-decoration: underline; cursor: pointer; } .chome__unpair:hover { color: var(--ink-soft); } /* ---- the unpair dialog's two lists -------------------------------------------------------- */ .unpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 8px 0; text-align: left; } .unpair__k { margin: 0 0 4px; font-size: 13px; font-weight: 700; } .unpair__list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; } .unpair__list li { margin-bottom: 4px; } /* ---- the laptop ------------------------------------------------------------------------------ * The question owns the main column and the doors sit beside it. 1.5fr / 1fr rather than halves: * a question card is a paragraph and a tonight card is a line, and giving them equal width makes * the important one narrow. */ @media (min-width: 1024px) { .chome { padding: 40px 0 84px; } .chome__hero { gap: 24px 44px; flex-wrap: nowrap; } .chome__hero-text { gap: 12px; } /* Beside the words rather than under them, so it stops being centred on its own line. */ .chome__grow { margin-inline: 0; } .chome:not(.chome--invite) .chome__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; } } @media (prefers-reduced-motion: reduce) { .chome__chip, .chome__card, .chome__last { transition: none; } } /* ================================================================ keep-your-home card * * APPENDED BLOCK, owned by the doors agent (docs/FS-INTERFACE.md S4). Everything above belongs to * the shell; nothing here is a layout rule for the page and nothing here redefines a token. * * The one sign-in ask in the product (client/couple/keep.js), sitting under the two names. It is * deliberately the quietest card on the home: no shadow, no fill — an offer, not a wall. If it * ever starts competing with today's question, it has become the wrong thing. * * Measured pairings (§02): * --ink on --paper-raised 16.60:1 light / 14.3:1 dark the sentence * --teal-deep on --paper-raised 5.90:1 light / 7.9:1 dark the kicker * --ink-faint on --paper-raised 4.81:1 light / 5.3:1 dark "Not now" and the failure note */ .chome__keep { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-card); } .chome__keep[hidden] { display: none; } .chome__keep .chome__k { margin: 0; } .keep__t { margin: 0; font-size: 15px; line-height: 1.5; max-width: 52ch; } .keep__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .keep__go { min-height: 44px; } /* "Not now" is a link, not a second button: two buttons side by side would read as a choice with equal weight, and this one has an obvious answer for anybody who does not want an account. */ .keep__later { padding: 0; background: none; border: 0; font-size: 14px; color: var(--ink-faint); text-decoration: underline; cursor: pointer; } .keep__later:hover { color: var(--ink-soft); } .keep__note:empty { display: none; } .keep__note { margin: 0; font-size: 13px; color: var(--ink-faint); } /* ================================================================ knowing each other * * APPENDED BLOCK, owned by the card agent (docs/C6-INTERFACE.md S4). Nothing here redefines a * token; the card takes `.chome__card` and adds one row and seven dots. * * WHY IT SPANS. The count row is two columns, so a third card in a single cell would leave a hole * beside it at every width. Spanning also gives seven dots the room they want. * * Measured pairings (docs/STYLE-GUIDE.md §02): * --ink on --paper-raised 16.60:1 light the count and the first line * --ink-soft on --paper-raised 5.62:1 light the two sub-lines, 13px * --teal-deep on --paper-raised 5.90:1 light the kicker * * The dots are not text and carry no text, so §02's small-type rule does not reach them: they are * --pink and --blue doing the one job the brand allows, which is being the two people. A dot for a * wrong guess is HOLLOW and never --red (§4d) — a guess nobody got is not an error state, it is * the thing this whole card exists to celebrate learning from. */ .chome__card--knowing { grid-column: 1 / -1; } .chome__card--knowing[hidden] { display: none; } .chome__know-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; } /* Baseline-aligned so the count and the words it belongs to sit on one line, and the second line drops under both by taking the whole row. */ .chome__know-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; flex: 1 1 220px; min-width: 0; } .chome__know-text .chome__count[hidden], .chome__know-text .chome__sub[hidden] { display: none; } .chome__know-sub { flex: 1 0 100%; } .chome__know-dots { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; } .chome__know-dots[hidden] { display: none; } .chome__know-dot { --kdot: var(--ink-faint); display: block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--kdot); box-sizing: border-box; } /* Whose guess it was. A dot with no side is a dot the payload could not colour — it stays the quiet ink rather than borrowing one of the two people's colours at random. */ .chome__know-dot[data-side='a'] { --kdot: var(--pink); } .chome__know-dot[data-side='b'] { --kdot: var(--blue); } /* Got it: filled. Close: half. Nope: the ring alone. */ .chome__know-dot[data-v='got'] { background: var(--kdot); } .chome__know-dot[data-v='close'] { background: linear-gradient(90deg, var(--kdot) 0 50%, transparent 50% 100%); } .chome__know-dot[data-v='nope'] { background: transparent; } /* ---- the home's own controls (R2 S7) -------------------------------------------------------- * Four things the page can now DO. They are deliberately the quietest objects on it: the point of * S7 is that setting a date or leaving a sentence stops being a journey, not that the home turns * into a form. `[hidden]` is `display: none !important` in base.css, so `hidden` alone does the * folding and nothing here has to restate it. */ /* Day one, in the card. The field is `.chome__card`'s own child, so it inherits the card's ground and only has to draw its edges. `accent-color` makes the native picker the product's pink rather than the browser's blue — the one place a system control is allowed a colour here. */ .chome__dayone { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .chome__dayone-in { flex: 1 1 9.5em; min-width: 0; min-height: var(--tap); padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; accent-color: var(--pink); } .chome__dayone-in:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } .chome__dayone-save { min-height: var(--tap); padding: 6px 16px; border: 1px solid var(--teal); border-radius: var(--r-pill); background: var(--paper-raised); color: var(--teal-deep); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .chome__dayone-save:disabled { opacity: .55; cursor: default; } /* "change" looks like a link and is still a control, so it keeps the 44px the guide asks of every one of them (STYLE-GUIDE §05) — bought with padding on the block axis, which leaves the word itself exactly where it was. 13px and not bold, so AA asks 4.5; --teal-deep is 5.90 on a card. */ .chome__dayone-edit { align-self: flex-start; margin-top: 2px; padding: 12px 0; min-height: var(--tap); border: 0; background: none; color: var(--teal-deep); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; } /* The note composer. */ .chome__note { display: flex; flex-direction: column; gap: 8px; } .chome__note-in { width: 100%; box-sizing: border-box; resize: vertical; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.45; } .chome__note-in:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } .chome__note-row { display: flex; align-items: center; gap: 12px; } .chome__note-count { flex: 1; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .chome__note-send { min-height: var(--tap); padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--pink); color: var(--on-pink); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; } .chome__note-send:disabled { opacity: .55; cursor: default; } /* The join card. It wears the nudge pill's colours on purpose — this is the same kind of message, "your person is over here", and the one that has a room behind it. It sits above the daily question because a room that is open right now outranks a question that will keep. */ .chome__join { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--pink-tint); color: var(--on-pink-tint); box-shadow: var(--shadow-card); text-decoration: none; font-size: 15px; } .chome__join:hover { background: color-mix(in srgb, var(--pink-tint) 82%, var(--ink)); } .chome__join .chome__ic { color: inherit; } .chome__join-t { flex: 1; min-width: 0; font-weight: 650; } .chome__join-go { font-weight: 700; white-space: nowrap; } /* The tab bar (client/ui/base.css) is fixed, so this page owns the floor that keeps its last row off it. */ body.has-tabbar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }