/* The homepage on phones and small tablets (public/home.html, <= 860px).
*
* Kristan, 10 Sep 2026: the homepage "just needs to be the mobile version of
* the current home page", using Jeanne's mobile pass —
* "Hello Kin Home - Nulu (standalone, mobile).html" (9 Sep).
*
* That export is the waitlist lineage of this page (nulu.life): same markup,
* same data-kin-ids, different wording (waitlist buttons, no Log in, no
* Memberships). So its mobile stylesheet is carried over here VERBATIM — the
* first block below, unedited — and applied to this page's own content. It
* keys off data-kin-id and section ids only, and 73 of the 78 elements it
* targets carry the same id here; the other five differ only in their text.
*
* The second block is what this page needs that hers does not cover: the
* Memberships section (#pricing), the gutter her page script sets and this
* page script predates, and a document-level horizontal guard, because here
* the document scrolls rather than the artboard (see home-fixes.css).
*
* Load order matters: this file comes after home-fixes.css, so her
* min-height:100dvh on the hero wins over its 100vh.
*/
/* ============================================================
MOBILE — added pass. Nothing above this block was changed.
The page was authored as a fixed desktop artboard: every layout
value lives in an inline style attribute, so each override here
has to carry !important to outrank it. Rules are grouped by
section and keyed off the data-kin-id / id hooks already in the
markup, so the desktop composition is untouched above 860px.
Two breakpoints:
<= 860px tablet portrait and down — the structural reflow
<= 560px phones — tightens type and spacing further
============================================================ */
@media (max-width: 860px) {
/* ---- Document ---------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
/* The scroller is a nested overflow container, so the horizontal guard
belongs on it as well as the document. */
[data-kin-id="kin-5"] { overflow-x: hidden !important; }
/* Photographs and the badge are the only things that can push the
measure wider than the viewport. */
img { max-width: 100%; }
/* Scroll reveals are switched off on mobile — deliberately.
Every [data-reveal] element ships at opacity:0 and is only ever made
visible by the IntersectionObserver callback, so any target the
observer misses is a permanently blank section rather than a missing
animation. Stacking the grids into one column makes several targets
taller than the viewport, which is exactly when that goes wrong.
Testing showed whole sections ("For hosts" in particular) staying
blank. The animation is decorative; the copy is not.
This also drops an IntersectionObserver and a pile of compositing
work off the critical path on the least powerful devices. */
[data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* The hero is content-height because its min-height:100% resolves
against an auto-height parent. On desktop the artboard gave it a
viewport to fill; on a phone it stops short and the next section
crowds in above the fold. */
[data-kin-id="kin-27"] { min-height: 100dvh !important; }
/* Toast rail — full-bleed 420px rail would sit off-canvas. */
[data-kin-id="kin-3"] { max-width: 100% !important; padding: 12px !important; }
/* ---- Navigation -------------------------------------------------- */
/* 104px of chrome is a sixth of a phone screen. The negative margin
below it pulls the hero up underneath and must track the height
exactly or the hero photo starts a bar's-worth too low. */
[data-kin-id="kin-6"] { height: 68px !important; margin-bottom: -68px !important; }
[data-kin-id="kin-7"] { column-gap: 12px !important; }
/* The three anchors do not survive alongside the wordmark and the CTA
at this width. They point at sections the reader scrolls through
anyway, so the CTA keeps the slot. */
[data-kin-id="kin-10"] { display: none !important; }
[data-kin-id="kin-8"] img { width: 116px !important; }
/* The nav CTA gives up the top-right slot to the burger. It is not
lost — the drawer carries it, and every section still has its own. */
[data-kin-id="kin-19"] { display: none !important; }
/* The burger already exists in the markup, shipped as display:none.
With the links and the CTA both gone it is the only remaining grid
item besides the wordmark, so auto-placement would drop it into
column 2 — it has to be pinned to the third column to sit right. */
[data-kin-id="kin-21"] {
display: inline-flex !important;
align-items: center;
justify-content: center;
grid-column: 3;
justify-self: end;
width: 44px;
height: 44px;
margin-right: -10px;
background: none;
border: 0;
padding: 0;
cursor: pointer;
/* Overridden at runtime to match the nav links, which flip from cream
over the hero photo to forest once the bar goes solid. */
color: var(--cream-200);
}
/* ---- Hero -------------------------------------------------------- */
[data-kin-id="kin-34"] {
padding-top: 104px !important;
padding-bottom: 36px !important;
}
[data-kin-id="kin-36"] {
padding-top: 0 !important;
margin-top: 0 !important;
gap: 16px !important;
max-width: 100% !important;
}
/* Eyebrow carries a -38px pull tuned to the desktop gap; reset it and
let the container gap do the spacing. */
[data-kin-id="kin-36"] > p:first-child {
margin: 0 !important;
font-size: 11px !important;
letter-spacing: 0.14em !important;
}
/* The two headline beats are hard-coded at 88.09px with negative
margins (-82/-28/-26) that interlock at that exact size. Rescaling
the type without clearing those margins collapses the lines into
each other, so both go at once and the
spacer comes out. */
[data-kin-id="kin-37"] {
font-size: clamp(34px, 9.6vw, 56px) !important;
line-height: 1.14 !important;
}
[data-kin-id="kin-38"],
[data-kin-id="kin-40"] {
font-size: clamp(34px, 9.6vw, 56px) !important;
margin: 0 !important;
}
[data-kin-id="kin-39"] { display: none !important; }
[data-kin-id="kin-41"] {
font-size: 16px !important;
max-width: 38ch !important;
}
/* Primary CTA goes full-bleed — the button is nowrap, so at 15px it
would otherwise sit as a short pill against a lot of empty gutter. */
/* The hero CTA row is a flex item of a column flex parent set to
align-items: flex-start, so it shrinks to its content and a
100%-wide button inside it stays button-sized. It needs the explicit
width before the button below can fill anything. */
/* Two buttons since 17 Sep (Take the Quiz + Browse experiences): stacked,
12px apart. The wrappers are display:contents, so the gap
lands between the buttons themselves. */
[data-kin-id="kin-42"] {
margin: 20px 0 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
width: 100% !important;
}
/* Each Button is wrapped in a div by , so these have to be
descendant selectors — a child selector matches the wrapper, not the
button, and silently does nothing. One button per section. */
[data-kin-id="kin-42"] button,
#experiences button,
#host button,
#hundred-club button {
width: 100% !important;
white-space: normal !important;
}
/* Trust row is nowrap on desktop: three uppercase labels, two thread
marks and a 148px circle. It has to wrap here. */
[data-kin-id="kin-47"] {
flex-wrap: wrap !important;
gap: 18px !important;
margin-top: 28px !important;
}
[data-kin-id="kin-48"] { gap: 8px 14px !important; }
[data-kin-id="kin-48"] img { width: 24px !important; height: 24px !important; }
/* Circle drops to its own row and centres. Auto margins on both sides
absorb the free space, so it stays centred whatever the row's
justify-content is doing. Desktop keeps it hard right per the board. */
[data-kin-id="kin-52"] {
width: 96px !important;
height: 96px !important;
font-size: 11px !important;
margin: 4px auto 0 !important;
}
/* ---- Section rhythm ---------------------------------------------- */
#how { padding: 72px 0 !important; }
#experiences { padding: 72px 0 !important; }
#host { padding: 76px 0 !important; }
#hundred-club { padding: 72px 0 !important; }
#about { padding: 56px 0 32px !important; }
/* ---- What is Nulu ------------------------------------------------ */
[data-kin-id="kin-57"] { margin-bottom: 28px !important; }
[data-kin-id="kin-59"] {
font-size: clamp(30px, 7.6vw, 40px) !important;
line-height: 1.14 !important;
margin-bottom: 0 !important;
}
/* Empty
acting as a desktop spacer. */
#how > div > p[data-reveal-delay="150"] { display: none !important; }
/* Two columns filled top-to-bottom by grid-auto-flow: column. Both the
flow and the row template have to be reset or the six items keep
laying out in a 3-row block. */
#how ul {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
grid-auto-flow: row !important;
gap: 22px !important;
}
/* ---- Experiences -------------------------------------------------- */
#experiences [style*="repeat(3"] {
grid-template-columns: 1fr !important;
gap: 16px !important;
margin-bottom: 32px !important;
}
#experiences > div > div:first-child { margin-bottom: 28px !important; }
#experiences h2 { font-size: clamp(28px, 7.4vw, 38px) !important; }
/* ---- For hosts ---------------------------------------------------- */
[data-kin-id="kin-80"] { margin-bottom: 32px !important; }
[data-kin-id="kin-82"] {
font-size: clamp(26px, 6.6vw, 34px) !important;
line-height: 1.16 !important;
}
/* -39px bottom pull is desktop trim against the grid below it. */
[data-kin-id="kin-83"] { margin: 12px 0 0 !important; font-size: 15px !important; }
/* Empty grid placeholder still contributing 56px of dead space. */
[data-kin-id="kin-84"] { margin-bottom: 0 !important; }
#host ul {
grid-template-columns: 1fr !important;
gap: 22px !important;
margin-bottom: 36px !important;
}
/* ---- The 100 Club -------------------------------------------------- */
#hundred-club > div {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
/* Badge is a fixed 320px square. */
#hundred-club [style*="320px"] {
width: min(210px, 58vw) !important;
height: min(210px, 58vw) !important;
}
#hundred-club h2 { font-size: clamp(27px, 7vw, 34px) !important; }
/* ---- Footer -------------------------------------------------------- */
/* 96px flex gap with a margin-left:auto second column. */
[data-kin-id="kin-189"] {
flex-direction: column !important;
gap: 32px !important;
margin-bottom: 36px !important;
}
[data-kin-id="kin-189"] > div:last-child { margin-left: 0 !important; }
[data-kin-id="kin-190"] { max-width: 100% !important; }
/* Hard
in the strapline breaks awkwardly at phone widths. */
[data-kin-id="kin-193"] br { display: none !important; }
/* Bring the two social icons up to a 44px touch target. */
#about a[aria-label] { width: 44px !important; height: 44px !important; }
}
/* ---- Phones ---------------------------------------------------------- */
@media (max-width: 560px) {
[data-kin-id="kin-34"] { padding-top: 96px !important; }
/* Body copy floor — 16px keeps iOS from zooming and holds the measure. */
#how p, #host p, #hundred-club p { font-size: 15px !important; }
#how h3, #host h3 { font-size: 19px !important; }
/* At this width each trust label already fills its own line, so laid
out as a row the infinity marks ended up stranded at the end of
lines one and two, reading as dangling punctuation. Stacking the
group puts each mark between the labels it separates — which is the
job it does on the brand board — and centring it picks up the line
of the Solo Friendly circle directly below. */
[data-kin-id="kin-48"] {
flex-direction: column !important;
align-items: center !important;
gap: 7px !important;
width: 100% !important;
text-align: center !important;
}
[data-kin-id="kin-48"] img {
display: block !important;
width: 26px !important;
height: 26px !important;
}
#experiences [style*="repeat(3"] { gap: 14px !important; }
}
/* ---- Large phones and tablet portrait -------------------------------- */
/* Between 640 and the 860 breakpoint there is room for two columns; one
column here reads as a very long sparse ribbon. */
@media (min-width: 640px) and (max-width: 860px) {
#experiences [style*="repeat(3"],
#how ul,
#host ul {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#how ul, #host ul { gap: 26px 40px !important; }
/* Badge back beside the copy. */
#hundred-club > div {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important;
gap: 40px !important;
align-items: center !important;
}
/* A full-bleed pill at 800px reads as a banner, not a button. */
[data-kin-id="kin-42"] button,
#experiences button,
#host button,
#hundred-club button {
max-width: 420px !important;
}
}
/* ---- Mobile navigation dropdown ---------------------------------------
Built in JS and appended to — deliberately outside the React
tree, which is reconciled on every nav state change. Mobile only: it
is force-hidden above the breakpoint regardless of open state.
It hangs off the bottom edge of the 68px nav and is only as tall as
its three links, so the hero stays visible behind it. */
#nulu-mobile-menu {
position: fixed;
top: 68px;
left: 0;
right: 0;
z-index: 200;
padding: 2px clamp(20px, 5.5vw, 40px) 10px;
background: var(--forest-600);
color: var(--cream-200);
border-top: 1px solid rgba(233, 223, 209, 0.14);
box-shadow: 0 18px 30px rgba(15, 26, 19, 0.26);
}
#nulu-mobile-menu[data-open="false"] { display: none; }
@media (min-width: 861px) { #nulu-mobile-menu { display: none !important; } }
#nulu-mobile-menu .nmm-links {
display: flex;
flex-direction: column;
}
#nulu-mobile-menu .nmm-links a {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.2;
color: var(--cream-200);
text-decoration: none;
padding: 15px 0;
border-bottom: 1px solid rgba(233, 223, 209, 0.18);
}
/* The panel edge closes off the last row; a rule there would read as a
stray line. */
#nulu-mobile-menu .nmm-links a:last-child { border-bottom: 0; }
/* ============================================================
ADDED FOR THIS PAGE — not part of Jeanne's pass.
============================================================ */
@media (max-width: 860px) {
/* Her pass sets the gutter from the page script below 860px
(clamp(20px, 5.5vw, 40px)). This page's script predates that change and
sets 128px, so the stylesheet supplies her value; !important outranks
the script's inline one. */
[data-kin-id="kin-5"] { --page-gutter: clamp(20px, 5.5vw, 40px) !important; }
/* Here the document scrolls, not kin-5, so the horizontal guard has to be
clip, not her hidden. Pairing hidden with the visible that
home-fixes.css sets computes overflow-y to auto, which makes kin-5 a
scroll container again — the sticky nav then pins to a box that never
scrolls and rides away with the page. clip guards the same edge without
that side effect, and the document gets the same guard. */
[data-kin-id="kin-5"] { overflow-x: clip !important; }
html, body { overflow-x: clip; }
/* ---- Memberships (her waitlist page has no such section) ------------
The same treatment her pass gives Experiences: one column, her section
rhythm and heading scale, and the buttons full width. */
#pricing { padding: 72px 0 !important; }
#pricing > div > div:first-child { margin-bottom: 28px !important; }
#pricing h2 { font-size: clamp(28px, 7.4vw, 38px) !important; }
#pricing [style*="repeat(3"] {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
#pricing [style*="repeat(3"] > div { padding: 24px !important; }
#pricing button {
width: 100% !important;
white-space: normal !important;
}
}
/* Three tiers do not split evenly into two columns, so tablets keep one
column at a readable width rather than orphaning the third card. */
@media (min-width: 640px) and (max-width: 860px) {
#pricing [style*="repeat(3"] { max-width: 520px; }
}
/* The drawer here also carries the nav's button (Log in), which her
waitlist nav did not have to. Lime pill, forest label — the one action
colour, as everywhere else on the page. */
#nulu-mobile-menu .nmm-cta {
display: block;
width: 100%;
margin: 14px 0 8px;
padding: 14px 20px;
border: 0;
border-radius: 999px;
background: var(--lime-500);
color: var(--forest-900);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
cursor: pointer;
}