/* ==========================================================================
logo/kit.css: the brand kit shared by Locus and Kept (2026-10-11)
--------------------------------------------------------------------------
Two products, one voice. This file holds only what the two apps share:
THE TWO FIELDS the Locus blue and the Kept green as full-screen
colour fields, for the gate, the empty states and the
morning line, with the ink that reads on them.
THE ACCENT WORD one serif italic word per page head.
THE HELPER sizes and colour for the helper character.
Load it after /mobius.css and the app's own stylesheet:
and set the product on :
or
Fonts: Inter is the app face (profit/DESIGN.md). The accent word is
Instrument Serif italic, already a Google Font the Mobius tools load:
https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&family=Instrument+Serif:ital@0;1&display=swap
Rules (docs/two-products.md section 4 and 5):
- The field is the product's colour at full strength. Ink on it is white.
Nothing else on a field: one line, one button, the helper.
- The accent word is ONE word per page head, never a whole sentence.
- The helper never talks in paragraphs and never blocks a screen.
========================================================================== */
/* ---- 1. The two colours, named once ------------------------------------ */
:root{
/* Locus. The v2 Locus blue (profit/v2.css --brand), kept as the field. */
--locus:#2F62D9; /* the field and the accent, light theme */
--locus-deep:#2451B8; /* the field in the dark theme (less glare) */
--locus-ink:#2552BF; /* Locus blue as TEXT on a light surface */
--locus-soft:#EAF0FD; /* a tint for chips and the active pill */
--locus-rgb:47,98,217;
/* Kept. The Ledger green from /mobius.css (#5CC395) deepened until white
ink passes on it as a full field (5.3:1). Same hue, more weight. */
--kept:#1E7A52;
--kept-deep:#176443;
--kept-ink:#1B6B48;
--kept-soft:#E6F4EC;
--kept-rgb:30,122,82;
/* Ink on a field, both themes. The field is dark enough for white. */
--on-field:#FFFFFF;
--on-field-2:rgba(255,255,255,.74); /* the second line, the hint */
--on-field-line:rgba(255,255,255,.26);/* a hairline or a quiet border */
--on-field-well:rgba(255,255,255,.14);/* an input or a chip on a field */
/* The accent word. */
--accent-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
/* The helper at its three sizes: ask bar, card, commercial. */
--helper-sm:20px; --helper-md:48px; --helper-lg:200px;
}
/* ---- 2. The product picks its colour ------------------------------------ */
/* Each app reads --field, --field-ink, --field-soft and never the product
name, so a screen built for Locus draws green in Kept without a change. */
:root,
:root[data-product="locus"]{
--field:var(--locus); --field-deep:var(--locus-deep);
--field-ink:var(--locus-ink); --field-soft:var(--locus-soft);
--field-rgb:var(--locus-rgb);
}
:root[data-product="kept"]{
--field:var(--kept); --field-deep:var(--kept-deep);
--field-ink:var(--kept-ink); --field-soft:var(--kept-soft);
--field-rgb:var(--kept-rgb);
}
/* Dark theme (Locus: ; the OS setting when nothing
is saved). The field deepens a step so a full screen of it does not glare;
the ink on it stays white. Colour AS TEXT on the dark canvas lightens,
because #2F62D9 on #111113 is 3.5:1 and fails. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--locus-ink:#8FB3FF; --locus-soft:rgba(143,179,255,.14);
--kept-ink:#6FD0A4; --kept-soft:rgba(111,208,164,.14);
--field:var(--field-deep);
}
}
:root[data-theme="dark"]{
--locus-ink:#8FB3FF; --locus-soft:rgba(143,179,255,.14);
--kept-ink:#6FD0A4; --kept-soft:rgba(111,208,164,.14);
--field:var(--field-deep);
}
/* ---- 3. The field --------------------------------------------------------- */
/* A full-screen colour field: the gate, an empty state, the morning line.
One idea per field. The helper sits in it at --helper-md or larger. */
.kit-field{
background:var(--field); color:var(--on-field);
min-height:100dvh; display:grid; place-items:center;
padding:32px 20px; text-align:center;
}
.kit-field.inline{min-height:0; border-radius:14px; padding:28px 24px} /* a card-sized field */
.kit-field h1,.kit-field .kit-h1{font-weight:650; letter-spacing:-.02em; font-size:28px; line-height:1.15; text-wrap:balance; margin:0}
.kit-field p{color:var(--on-field-2); font-size:15px; line-height:1.5; max-width:38ch; margin:10px auto 0}
.kit-field a{color:var(--on-field)}
.kit-field .kit-btn{
display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; margin-top:20px;
border-radius:10px; border:0; background:var(--on-field); color:var(--field);
font:inherit; font-weight:600; font-size:14px; cursor:pointer;
}
.kit-field .kit-btn.quiet{background:var(--on-field-well); color:var(--on-field); border:1px solid var(--on-field-line)}
.kit-field input{
width:100%; height:40px; padding:0 12px; border-radius:10px; font:inherit; font-size:14px;
color:var(--on-field); background:var(--on-field-well); border:1px solid var(--on-field-line); outline:0;
}
.kit-field input::placeholder{color:var(--on-field-2)}
.kit-field input:focus{border-color:var(--on-field); box-shadow:0 0 0 3px var(--on-field-well)}
.kit-field .kit-helper{color:var(--on-field)}
/* The morning line: one sentence, the helper first, on a thin field. */
.kit-morning{
display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px;
background:var(--field); color:var(--on-field); font-size:15px; font-weight:500; line-height:1.4;
}
.kit-morning .kit-helper{flex:none; width:28px; height:28px}
.kit-morning time{color:var(--on-field-2); font-weight:400; font-variant-numeric:tabular-nums}
/* ---- 4. The accent word ------------------------------------------------- */
/* One word per page head. "what you actually kept". The serif
italic sits 8% larger than the sans around it so the x-heights match.
Use or inside .kit-head. Never two in a head. */
.kit-accent,
.kit-head em{
font-family:var(--accent-serif); font-style:italic; font-weight:400;
font-size:1.08em; letter-spacing:0; line-height:1;
color:var(--field-ink); /* on a surface: the product's colour */
}
.kit-field .kit-accent,
.kit-field .kit-head em{color:var(--on-field)} /* on the field: white, like the rest */
.kit-head{font-weight:650; letter-spacing:-.02em; line-height:1.15; text-wrap:balance}
/* ---- 5. The helper ------------------------------------------------------- */
/* The helper is an inline SVG (logo//direction-N-.svg)
drawn in currentColor. Give it a colour by giving its box a colour. */
.kit-helper{display:inline-block; width:var(--helper-md); height:var(--helper-md); color:var(--field); vertical-align:middle}
.kit-helper svg{width:100%; height:100%; display:block}
.kit-helper.sm{width:var(--helper-sm); height:var(--helper-sm)}
.kit-helper.lg{width:var(--helper-lg); height:var(--helper-lg)}
.kit-helper.on-field{color:var(--on-field)}
/* States are separate drawings, not CSS. Asleep is drawn dim in the file.
A thinking helper may breathe; nothing else moves on its own. */
@keyframes kit-think{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
.kit-helper.thinking svg{animation:kit-think 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.kit-helper.thinking svg{animation:none}}
/* ---- 6. The nudge card and the ask bar ---------------------------------- */
/* The tap on the shoulder: the helper, one sentence, one button. Nothing
else. Built on the Locus card (profit/DESIGN.md) with the kit's colour. */
.kit-nudge{
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
padding:14px 16px; border-radius:14px;
background:var(--surface,#fff); border:1px solid var(--line,rgba(15,15,20,.07));
color:var(--ink,#111114);
}
.kit-nudge .kit-helper{width:36px; height:36px}
.kit-nudge p{margin:0; font-size:14px; line-height:1.45; min-width:0}
.kit-nudge p b{font-weight:600}
.kit-nudge .kit-acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.kit-nudge .kit-acts button{
font:inherit; font-size:13px; font-weight:550; height:32px; padding:0 12px; border-radius:8px; cursor:pointer;
border:1px solid var(--line-strong,rgba(15,15,20,.12)); background:var(--surface,#fff); color:var(--ink,#111114);
}
.kit-nudge .kit-acts button.primary{background:var(--field); border-color:var(--field); color:var(--on-field)}
@media (max-width:480px){.kit-nudge{grid-template-columns:auto 1fr} .kit-nudge .kit-acts{grid-column:1 / -1; justify-content:flex-start}}
/* The ask bar carries the helper at --helper-sm, left of the text. */
.kit-ask{
display:flex; align-items:center; gap:10px; height:36px; padding:0 10px 0 8px; border-radius:10px;
background:var(--surface,#fff); border:1px solid var(--line-strong,rgba(15,15,20,.12)); color:var(--ink,#111114);
}
.kit-ask .kit-helper{width:var(--helper-sm); height:var(--helper-sm)}
.kit-ask input{flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:14px; color:inherit}
.kit-ask input::placeholder{color:var(--muted,#71717A)}
.kit-ask:focus-within{border-color:var(--field); box-shadow:0 0 0 3px var(--field-soft)}
/* ---- 7. The gate ----------------------------------------------------------- */
/* The sign-in screen of both apps (2026-10-11, the reference video read into
the apps): one character, alive, on a field with depth; the tagline with
its accent word; the lifted card. The markup is the same in
ledger/lg-core.js and profit/index.html (renderGate); each app only hides
its own chrome around it. The field is the product's colour in BOTH themes:
it is a brand field, not a surface, so the dark theme does not deepen it.
.kit-gate[data-gate="cashew|locus"]
.kit-gate-sky the drifting cost characters, behind everything
.kit-gate-body a two-column grid: the hero, the card
.kit-gate-hero the character, the label, the headline, the line
.kit-gate-char > .breathe > .move > img.rest + img.blink
.gate.kit-gate-card the app's own sign-in card, logic untouched
.kit-gate-foot one quiet line
Load order: the field paints at once; the character rises over 500ms, the
headline 150ms later, the card 150ms after that. Then calm: a 4s breathe,
a blink every 5 to 7 seconds (the asleep drawing for 120ms), Cashew bobs a
few pixels, the Locus ring rocks 6 degrees. Nothing bounces, and nothing
moves at all under prefers-reduced-motion. */
.kit-gate{
--gf:var(--locus); --gf-deep:var(--locus-deep); --gf-light:#5583EC;
--gx:19%; --gy:29%; /* where the light sits: behind the character */
position:relative; isolation:isolate; overflow:hidden; min-height:100dvh; box-sizing:border-box;
display:grid; place-items:center; padding:40px 24px; text-align:left;
color:var(--on-field); background-color:var(--gf);
/* two layers: a soft spot of the light tone behind the character, over a wide fall to the deep tone at the edges */
background-image:
radial-gradient(230px 205px at var(--gx) var(--gy), var(--gf-light) 0%, rgba(255,255,255,0) 100%),
radial-gradient(130% 120% at 30% 35%, var(--gf) 30%, var(--gf-deep) 100%);
}
:root[data-product="kept"] .kit-gate,
.kit-gate[data-gate="cashew"]{--gf:var(--kept); --gf-deep:var(--kept-deep); --gf-light:#2E9C6B}
/* The grain: an SVG turbulence tile at 4%, under the content, over the light. */
.kit-gate::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.04;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size:240px 240px;
}
/* The sky: the small cost characters from the bite family (a folded bill, a
box, a flame, a blob, a spiral; for Locus four tabs), drawn in the marks'
stroke family, white at 10%, drifting 30 to 60 seconds a loop, never in
front of the text. */
.kit-gate-sky{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.kit-bite{position:absolute; width:64px; height:64px; color:var(--on-field); opacity:.10; animation:kit-drift 48s ease-in-out infinite; will-change:transform}
.kit-bite svg{width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round}
.kit-bite.b1{top:9%; left:6%; animation-duration:44s}
.kit-bite.b2{top:13%; right:8%; width:54px; height:54px; animation-duration:58s; animation-delay:-21s}
.kit-bite.b3{bottom:16%; left:3.5%; width:58px; height:58px; animation-duration:38s; animation-delay:-9s}
.kit-bite.b4{top:48%; right:4%; width:72px; height:72px; animation-duration:52s; animation-delay:-33s}
.kit-bite.b5{bottom:9%; right:19%; width:56px; height:56px; animation-duration:34s; animation-delay:-15s}
/* The body */
.kit-gate-body{
position:relative; z-index:1; width:100%; max-width:1000px;
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,440px); gap:40px 72px; align-items:center;
}
.kit-gate-hero{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.kit-gate-char{width:220px; height:220px; margin:0 0 22px -10px; animation:kit-enter 500ms cubic-bezier(.23,1,.32,1) both}
.kit-gate-char .breathe{display:block; width:100%; height:100%; animation:kit-breathe 4s ease-in-out infinite alternate; transform-origin:50% 60%}
.kit-gate-char .move{display:block; position:relative; width:100%; height:100%; transform-origin:50% 50%}
.kit-gate-char img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none}
.kit-gate-char img.blink{opacity:0; animation:kit-blink 12s step-end infinite}
.kit-gate[data-gate="cashew"] .move{animation:kit-bob 5s ease-in-out infinite alternate}
.kit-gate[data-gate="locus"] .move{animation:kit-rock 6s ease-in-out infinite alternate}
.kit-gate-head{animation:kit-enter 500ms cubic-bezier(.23,1,.32,1) 150ms both; min-width:0}
.kit-gate-label{display:inline-flex; align-items:center; gap:9px; height:22px; margin:0 0 14px; font-size:14.5px; font-weight:600; letter-spacing:.01em; color:var(--on-field); opacity:.94}
.kit-gate-label img{height:20px; width:auto; display:block; filter:brightness(0) invert(1)}
.kit-gate-label svg{width:20px; height:20px; display:block; color:var(--on-field)}
.kit-gate h1{
font-family:inherit; font-size:clamp(34px,4.4vw,56px); font-weight:650; letter-spacing:-.025em; line-height:1.04;
margin:0; color:var(--on-field); text-wrap:balance;
}
.kit-gate h1 em{font-family:var(--accent-serif); font-style:italic; font-weight:400; font-size:1.08em; letter-spacing:0; line-height:1; color:var(--on-field)}
/* 90% white, not 80: measured on the screenshots, 80% white lands at 3.9:1 on both fields and 90% at 4.6:1,
the first that passes 4.5:1 for 17px text. The size gap to the headline carries the hierarchy. */
.kit-gate-line{margin:16px 0 0; font-size:17px; line-height:1.5; color:rgba(255,255,255,.9); max-width:38ch}
/* The card: white in both themes, 20px radius, a two-layer shadow, the
Continue with Google button in the product colour, the password fallback
as a quiet details element. The app's own tokens are pinned light inside
it so the dark theme cannot reach in. */
.kit-gate .gate{
--surface:#FFFFFF; --ink:#141716; --ink-2:#3B433F; --muted:#6B7470; --line:#E6E9E7; --line-strong:#D3D9D5;
--brand:var(--gf); --on-brand:#FFFFFF; --hd:#FFFFFF; --bad:#9C3A2E;
margin:0; width:100%; max-width:440px; box-sizing:border-box; justify-self:end;
background:#FFFFFF; color:#141716; border:0; border-radius:20px; padding:30px 30px 22px; text-align:left;
box-shadow:0 1px 2px rgba(8,16,12,.14), 0 3px 8px rgba(8,16,12,.08), 0 30px 60px -22px rgba(0,0,0,.5);
animation:kit-enter 500ms cubic-bezier(.23,1,.32,1) 300ms both;
}
.kit-gate .gate h1{font-size:20px; font-weight:650; letter-spacing:-.02em; line-height:1.2; color:#141716; margin:0 0 6px}
.kit-gate .gate p{color:#555E5A; font-size:14px; line-height:1.5; margin:0 0 18px}
.kit-gate .gate .cta{
display:flex; align-items:center; justify-content:center; width:100%; height:46px; margin:0; padding:0 16px;
border:0; border-radius:12px; background:var(--gf); color:#FFFFFF; font:inherit; font-weight:600; font-size:15px;
text-decoration:none; cursor:pointer; transition:background 150ms ease, transform 150ms ease;
}
.kit-gate .gate .cta:hover{background:var(--gf-deep)}
.kit-gate .gate .cta:active{transform:translateY(1px)}
.kit-gate .gate .err{color:#9C3A2E; font-size:13px; line-height:1.45; margin-top:12px}
.kit-gate .gate details{margin-top:14px; text-align:center}
.kit-gate .gate summary{display:inline-block; font-size:12.5px; color:#6B7470; cursor:pointer; padding:4px 2px; list-style:none}
.kit-gate .gate summary::-webkit-details-marker{display:none}
.kit-gate .gate summary::before{content:""; display:inline-block; width:0; height:0; border:4px solid transparent; border-left:5px solid #9AA39F; margin-right:6px; vertical-align:1px; transition:transform 150ms ease}
.kit-gate .gate details[open] summary::before{transform:rotate(90deg)}
.kit-gate .gate summary:hover{color:#141716}
.kit-gate .gate details[open]{text-align:left}
.kit-gate .gate details[open] summary{display:block; text-align:center; margin-bottom:4px}
.kit-gate .gate label{display:block; text-align:left; font-size:12px; font-weight:600; letter-spacing:.01em; text-transform:none; color:#6B7470; margin:12px 0 5px}
.kit-gate .gate input{
width:100%; height:40px; padding:0 12px; box-sizing:border-box; border:1px solid #D3D9D5; border-radius:10px;
background:#FFFFFF; color:#141716; font:inherit; font-size:14px; outline:0;
}
.kit-gate .gate input:focus{border-color:var(--gf); box-shadow:0 0 0 3px rgba(var(--field-rgb),.18)}
.kit-gate .gate details .cta{margin-top:12px; height:40px; font-size:14px}
.kit-gate-foot{grid-column:1 / -1; margin:8px 0 0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.7); text-align:center; animation:kit-enter 500ms cubic-bezier(.23,1,.32,1) 300ms both}
.kit-gate-foot a{color:var(--on-field); text-decoration:underline; text-underline-offset:3px}
.kit-gate-foot b{color:var(--on-field); font-weight:600}
/* Motion */
@keyframes kit-enter{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes kit-breathe{from{transform:scale(1)} to{transform:scale(1.03)}}
@keyframes kit-bob{from{transform:translateY(0)} to{transform:translateY(-5px)}}
@keyframes kit-rock{from{transform:rotate(-3deg)} to{transform:rotate(3deg)}}
/* 12s loop, two blinks: at 5s and again 7s later, each 120ms (1% of the loop). */
@keyframes kit-blink{0%,41.6%{opacity:0} 41.7%,42.6%{opacity:1} 42.7%,98.9%{opacity:0} 99%,100%{opacity:1}}
@keyframes kit-drift{
0%{transform:translate(0,0) rotate(0)}
30%{transform:translate(16px,-22px) rotate(5deg)}
60%{transform:translate(-12px,-42px) rotate(-4deg)}
100%{transform:translate(0,0) rotate(0)}
}
@media (prefers-reduced-motion:reduce){
.kit-gate-char,.kit-gate-head,.kit-gate .gate,.kit-gate-foot,.kit-gate-char .breathe,.kit-gate[data-gate] .move,.kit-bite{animation:none}
.kit-gate-char img.blink{display:none}
}
/* The phone: one column, the character above the headline, the card full
width inside 16px gutters, nothing scrolls sideways. */
@media (max-width:760px){
.kit-gate{--gx:22%; --gy:23%; padding:32px 16px 24px; place-items:start center}
.kit-gate-body{grid-template-columns:minmax(0,1fr); gap:24px; max-width:440px}
.kit-gate-char{width:150px; height:150px; margin:0 0 14px -6px}
.kit-gate h1{font-size:clamp(34px,9.5vw,44px)}
.kit-gate-line{font-size:15.5px}
.kit-gate .gate{max-width:none; justify-self:stretch; padding:24px 20px 18px}
.kit-bite.b4,.kit-bite.b5{display:none}
.kit-bite.b3{bottom:3%; left:auto; right:3%; width:50px; height:50px}
}
@media (max-width:760px) and (min-height:760px){.kit-gate{place-items:center}}