/* Her public page.
*
* Moved out of utyk/templates/uk_woman.html on 2026-08-31: the 1 top-level
* block of it. 0 blocks stayed inline because they render inside
* {% if %} and a cannot be conditional.
*
* Inline CSS is re-sent on every request and cached by nobody.
* url_for('static', ...) keys this URL on the file's own CONTENT hash
* and serves it immutable for a year.
*/
* { box-sizing:border-box; }
body { margin:0; background:var(--uk-backdrop); color:var(--uk-text);
font-family:'Inter','Noto Sans Thai',system-ui,-apple-system,sans-serif; }
a { color:var(--uk-accent); text-decoration:none; }
.page { max-width:760px; margin:0 auto; background:var(--uk-bg);
border-left:1px solid var(--uk-line); border-right:1px solid var(--uk-line);
min-height:100vh; padding:0 24px 72px; }
.nav { display:flex; align-items:center; justify-content:space-between;
padding:20px 0; border-bottom:1px solid var(--uk-line); }
/* 19px of paint. Same expander as the other public shells. This page is
the one a lady sends to a customer herself, so it gets more cold phone
traffic than any other, and the wordmark is the only way off it. */
.logo { font-weight:900; font-size:19px; letter-spacing:-.02em;
position:relative; }
.logo::before { content:''; position:absolute; left:0; right:0;
top:-12px; bottom:-12px; }
.logo span { color:var(--uk-accent); }
/* `hidden` is only a UA `display:none`, the weakest rule there is,
so the `display` on the rule below cancels it and the element the
JS hides never goes away. Same defect as the Shop's date field,
2026-08-12. Specificity, not order, is what makes this win. */
.btn[hidden] { display: none; }
.btn { display:inline-flex; align-items:center; justify-content:center;
min-height:var(--utyk-tap-min); padding:0 22px; border-radius:12px;
font-weight:800; font-size:var(--utyk-fs-body); border:0; }
.btn-primary { background:var(--utyk-accent); color:var(--utyk-on-accent); }
.btn-primary:hover { background:var(--utyk-accent-hover); }
/* Secondary to "Write to her", and firmly so: sending the page on is a
good outcome and writing to her is the one this page is for. */
.btn-quiet { background:transparent; color:var(--uk-dim);
border:1px solid var(--uk-line); cursor:pointer;
font-family:inherit; }
.btn-quiet:hover { border-color:var(--utyk-accent-line);
color:var(--uk-text); }
.btn-quiet:focus-visible { outline:none; box-shadow:var(--utyk-focus); }
.btn-quiet[hidden] { display:none; }
.acts { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.hero { display:flex; gap:24px; align-items:flex-start; padding:36px 0 8px;
flex-wrap:wrap; }
/* Contained over a tinted field, never cropped: these are drawn characters
and a crop cuts through the face. The same treatment she gets on every
other screen, so she looks like herself here too. */
.face { width:170px; height:210px; flex:0 0 auto; border-radius:16px;
background:var(--tint,var(--uk-raised)); object-fit:contain;
border:1px solid var(--uk-line); }
.who { flex:1; min-width:240px; }
/* This page prints two strings she typed at the two biggest sizes on it,
and it is the public one: 217 of these are in the sitemap, they are
what a search engine indexes, and the link is the one she sends to a
customer herself. Her name has no guarantee of a space in it, and
neither does a 90-character tagline that turns out to be a pasted URL.
Nothing here clips, so the overflow does not stop at the element. It
runs out of the page and gives the whole DOCUMENT horizontal scroll,
measured against the live page with a 39-character handle:
1440 14px 1280 94px 1024 222px
and 832 / 912 / 1040px at the 40-character cap. The tagline is worse
still at 760px, because 90 characters is more than twice the name.
`anywhere` also shrinks min-content, which matters here specifically:
.who is a flex item, so without it a long word does not merely
overflow, it stretches the column and drags the layout with it. */
h1, .said, .said-en { overflow-wrap:anywhere; }
h1 { font-size:40px; line-height:1.05; letter-spacing:-.03em; margin:0 0 8px;
font-weight:900; }
.city { color:var(--uk-dim); font-size:var(--utyk-fs-body); margin:0 0 14px; }
.pills { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.pill { font-size:var(--utyk-fs-quiet); font-weight:800; border-radius:999px;
padding:5px 11px; border:1px solid var(--uk-line);
color:var(--uk-label); background:var(--uk-raised); }
.pill-fast { color:var(--uk-ok); border-color:var(--utyk-fast-line);
background:var(--utyk-fast-wash); }
/* Her own words, in her own script, which is the most convincing thing on
the page and the only sentence here she wrote. */
.said { margin:0 0 20px; padding:14px 16px; border-radius:12px;
background:var(--uk-panel); border:1px solid var(--uk-line);
color:var(--uk-text); font-size:var(--utyk-fs-msg); line-height:1.55; }
.said-en { display:block; margin-top:6px; color:var(--uk-dim);
font-size:var(--utyk-fs-meta); }
.cta-note { color:var(--uk-muted); font-size:var(--utyk-fs-meta);
margin:10px 0 0; }
.how { margin-top:40px; padding-top:26px; border-top:1px solid var(--uk-line); }
.how h2 { font-size:21px; letter-spacing:-.02em; margin:0 0 12px; }
.how p { color:var(--uk-dim); font-size:var(--utyk-fs-body); line-height:1.65;
margin:0 0 12px; max-width:60ch; }
.others { margin-top:40px; padding-top:26px; border-top:1px solid var(--uk-line); }
.others h2 { font-size:19px; margin:0 0 14px; letter-spacing:-.02em; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:12px; }
.card { display:block; border:1px solid var(--uk-line); border-radius:12px;
overflow:hidden; background:var(--uk-card); }
.card img { width:100%; aspect-ratio:4/5; object-fit:contain;
background:var(--uk-raised); display:block; }
.card b { display:block; padding:8px 10px; font-size:var(--utyk-fs-meta);
color:var(--uk-text); }
footer { margin-top:48px; padding-top:20px; border-top:1px solid var(--uk-line);
color:var(--uk-muted); font-size:var(--utyk-fs-meta);
display:flex; gap:16px; flex-wrap:wrap; }
footer a { color:var(--uk-dim); }
@media (max-width:560px) {
.page { padding:0 18px 56px; }
h1 { font-size:31px; }
.face { width:130px; height:162px; }
}
/* ---- 2026-08-15 redesign, appended so it wins on source order --------
THE SHARE PAGE, not the app's profile.
She sends this link to a man who has no account, so its job is not the
handoff's Her profile screen (that one is `/chat//about`, and it
has Message / a drink / Spoil her along the bottom because the reader is
already a customer). This one has to make a stranger want an account,
and its structure is right for that. What moves is the type and the
shapes, so the page a lady sends looks like the product she is sending
him to.
THE 760px MEASURE STAYS, and it is the one place on this host a
page-level cap is correct: this is a column of prose read cold, on a
phone, by somebody who has never seen the product. The no-max-width
rule in the handoff is about the APP, where the width is spent on panes
of content he is working through. */
body { font-family:'Hanken Grotesk','IBM Plex Sans Thai',system-ui,-apple-system,sans-serif; }
.logo { font-family:Archivo,system-ui,sans-serif; font-stretch:112%;
font-weight:800; font-size:17px; letter-spacing:-.015em; }
.page { background:var(--bg); border-color:var(--ln); }
.nav { border-bottom-color:var(--ln); }
/* Buttons and pills take the app's shapes: fully round, amber only on the
one action this page exists for. */
.btn { min-height:44px; height:44px; padding:0 24px; border-radius:999px;
font-weight:700; font-size:14px; letter-spacing:-.01em; }
.btn-primary { background:var(--ac); color:var(--aci); }
.btn-primary:hover { background:var(--act); color:var(--aci); }
.btn-quiet { border:1px solid var(--ln2); color:var(--t1); font-weight:600;
background:transparent; }
.btn-quiet:hover { background:var(--p2); border-color:var(--ln2);
color:var(--t1); }
.pill { display:inline-flex; align-items:center; gap:7px; height:30px;
padding:0 13px; border-radius:999px; border:1px solid var(--ln2);
background:transparent; font-size:12.5px; color:var(--t2); }
/* Jade, never a fill: reply speed is a fact about her, not a control. */
.pill-fast { color:var(--jade);
border-color:color-mix(in srgb, var(--jade) 42%, transparent); }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
/* Her picture at 4:5, the shape every photograph in this product is
cropped to. `contain` stays: these are drawn characters as often as
photographs, and a square crop of a standing figure is a midriff. */
.face { aspect-ratio:4/5; border-radius:20px; background:var(--p3);
border:1px solid var(--ln); }
.who { min-width:0; }
/* Her name in the display face, and her own words as a statement rather
than a caption. */
.who h1, .who .name { font-family:Archivo,system-ui,sans-serif;
font-stretch:112%; font-weight:700; letter-spacing:-.025em; }
.city { font-size:13px; color:var(--t3); }
.said { font-family:Archivo,system-ui,sans-serif; font-stretch:110%;
font-weight:600; font-size:24px; line-height:1.2;
letter-spacing:-.025em; color:var(--t1); text-wrap:pretty; }
.said-en { display:block; margin-top:6px; font-family:'Hanken Grotesk',
system-ui,sans-serif; font-weight:400; font-size:14px;
line-height:1.6; letter-spacing:0; color:var(--t3); }
.cta-note { font-size:12.5px; color:var(--t3); }
.how, .others { border-top:1px solid var(--ln); }
.how h2, .others h2 { font-family:Archivo,system-ui,sans-serif;
font-stretch:112%; font-weight:700; font-size:19px;
letter-spacing:-.02em; }
/* The other women, as the app's own card: 4:5 media, her name over the
bottom gradient. */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
gap:12px; }
.card { border:1px solid var(--ln); border-radius:18px; background:var(--p2);
overflow:hidden; color:var(--t1); }
.card:hover { border-color:var(--ln2); }
.card img { aspect-ratio:4/5; width:100%; object-fit:cover;
object-position:top; display:block; }
@media (max-width:720px) {
.page { padding:0 16px 56px; border-left:0; border-right:0; }
.said { font-size:20px; }
}
/* STACKED ON A PHONE, and it has to be said here rather than left to the
wrap above. `.hero` wraps at `.who { min-width:240px }`, and the
redesign's `.who { min-width:0 }` (which is there to stop a long
unbroken tagline giving the whole document horizontal scroll) cancels
exactly the rule that made it wrap. So at 375px the hero stayed one
row: the picture took 130 and everything she has to say was squeezed
into 189, which broke her tagline every fourteen characters and put
both buttons in a column beside 250px of empty space under the
portrait. This is the link SHE sends to somebody with no account, so
it is the one page where a bad first screen costs a signup. */
@media (max-width:560px) {
.hero { flex-direction:column; gap:18px; }
/* 170, not full width. Stacked, the picture is the only thing between
the top of the page and the button, and at 230 it pushed "Write to
Aommi" below the fold on a 375x812 phone. At 170 (the width it has
on a desktop) everything from her name to the button is on the first
screen and the picture is still the biggest thing on it. */
.face { width:170px; max-width:100%; height:auto; }
}