/* The landing page. * * ⛔ THE CARD IS STYLED BY deck.css AND NOTHING ABOUT IT IS REPEATED HERE. This * file is the room the card stands in, and the room is PAPER — his call, and his * own reasoning, written in base.css long before this page existed: "the paper is * deliberately a shade DARKER than the card so the card still lifts off it, which * is how a real card on a real table actually reads." * * ⭐ WHICH IS ALSO WHY THIS PAGE IS NOT BLACK. A shadow cannot exist on black. On * a dark ground the card had no weight, no contact, and no light source — it was * a flat rectangle floating on night. Here it casts. */ /* ⛔ ONE SCREEN, AND IT IS A HARD CONSTRAINT. His note: the page is way too tall, it all needs to fit. So the hero owns whatever height is left after the nav and the footer, and the card is sized off the VIEWPORT rather than off a fixed number — a 326px card is right on a laptop and is most of a phone. */ #screen-land{height:100dvh;overflow:hidden;display:flex;flex-direction:column; position:relative;background:var(--s1);color:var(--txt1)} /* the constellation. Faint ink on paper — the colours come from here, so the same field is starlight when the page behind it is night. */ #screen-land #l-sky{position:absolute;inset:0;width:100%;height:100%; pointer-events:none;z-index:0; --con-dot:rgba(99,96,79,.42); --con-line:rgba(99,96,79,.26)} #screen-land > *:not(#l-sky){position:relative;z-index:1} /* ── the nav ────────────────────────────────────────────────────────────── Sign in and Make one are buttons up here, on his instruction, so the page can be about the product and the form is one click away rather than in the way. */ #screen-land .lnav{display:flex;align-items:center;justify-content:space-between; padding:20px 22px;gap:16px;max-width:1120px;width:100%;margin:0 auto;box-sizing:border-box} #screen-land .lmark{font-family:Fraunces,Georgia,serif;font-size:24px;font-weight:300; font-variation-settings:"SOFT" 60,"WONK" 1;letter-spacing:.01em;color:var(--txt1)} #screen-land .lmark em{font-style:normal;color:var(--lime-txt)} #screen-land .lnavr{display:flex;align-items:center;gap:8px} #screen-land .lin{background:none;border:none;font-family:inherit;font-size:13px; color:var(--txt2);cursor:pointer;padding:11px 10px;border-radius:100px} #screen-land .lin:hover{color:var(--txt1);background:var(--s2)} #screen-land .lup{font-family:inherit;font-size:13px;padding:11px 18px;border-radius:100px; border:1px solid var(--lime-edge2);background:var(--lime);color:var(--on-accent); cursor:pointer;transition:.16s;font-weight:500} #screen-land .lup:hover{background:var(--lime-hi)} /* ── the hero ───────────────────────────────────────────────────────────── The card leads on a phone: it is the argument, and the words explain it after. */ #screen-land .lhero{flex:1;min-height:0;display:grid;gap:clamp(14px,3vh,32px);align-content:center; grid-template-columns:1fr;justify-items:center; max-width:1120px;width:100%;margin:0 auto;padding:6px 22px 34px;box-sizing:border-box} #screen-land .lcopy{max-width:470px;text-align:center} #screen-land .leyebrow{font-size:clamp(9.5px,1.3vh,11px);letter-spacing:.26em; text-transform:uppercase;color:var(--lime-txt);margin-bottom:clamp(9px,1.6vh,18px);font-weight:500} #screen-land h1{font-family:Fraunces,Georgia,serif;font-weight:400; font-variation-settings:"SOFT" 40,"WONK" 1; font-size:clamp(24px,min(6.4vw,4.4vh),42px);line-height:1.05;letter-spacing:-.025em; color:var(--txt1);margin:0 0 16px;text-wrap:balance} #screen-land h1 em{font-style:normal;color:var(--lime-txt)} #screen-land .lsub{font-size:clamp(12px,1.7vh,14.5px);line-height:1.6;color:var(--txt2);margin:0} #screen-land .lcta{margin-top:clamp(12px,2.4vh,26px);display:flex;flex-direction:column;align-items:center;gap:11px} #screen-land .lup.big{font-size:15px;padding:15px 30px; box-shadow:0 12px 26px -14px rgba(90,115,0,.6)} #screen-land .lprice{font-size:11.5px;line-height:1.5;color:var(--dim1)} #screen-land .lstack{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%} #screen-land .lcardwrap{width:min(100%,326px,32vh);--r:26px} /* ⭐ THE CARD LIFTS OFF THE PAGE. A contact shadow tight under the edge and a long cast below it: the near one says it is touching the table, the far one says how high above it. One of them alone reads as a sticker. */ #screen-land .lcardwrap .face{ box-shadow:0 2px 3px rgba(60,50,35,.2), 0 26px 42px -20px rgba(60,50,35,.42), 0 58px 84px -52px rgba(60,50,35,.5)} #screen-land .lsay{min-height:clamp(58px,10vh,96px);width:min(100%,326px,32vh);text-align:center} #screen-land .lhint{display:inline-block;font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--dim1);padding-top:20px} #screen-land .lrule{display:flex;gap:10px;padding-top:16px} #screen-land .lrule button{flex:1;font-family:inherit;font-size:13.5px;padding:14px 10px; border-radius:100px;cursor:pointer;transition:.16s;letter-spacing:.01em;min-height:46px} #screen-land .lno{background:var(--s3);border:1px solid var(--edge2);color:var(--txt2)} #screen-land .lno:hover{border-color:var(--ember);color:var(--txt1)} #screen-land .lyes{background:var(--lime);border:1px solid var(--lime-edge2);color:var(--on-accent);font-weight:500} #screen-land .lyes:hover{background:var(--lime-hi)} #screen-land .lwhy{font-size:11px;line-height:1.5;color:var(--dim1);padding-top:12px} #screen-land .ldone{padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:13px} #screen-land .ldone p{font-size:14px;line-height:1.55;color:var(--txt2);margin:0} #screen-land .lsmall{font-size:11px;line-height:1.5;color:var(--dim1)} /* ── how it works ─────────────────────────────────────────────────────────── */ font-variation-settings:"SOFT" 40,"WONK" 1;color:var(--txt1);margin:0 0 8px} color:var(--lime-txt);display:block;margin-bottom:9px;font-weight:500} #screen-land .lfoot{flex:none;border-top:1px solid var(--edge2); padding:clamp(9px,1.6vh,14px) 22px;display:flex;flex-wrap:wrap;justify-content:center; gap:5px 10px;text-align:center;font-size:10.5px;line-height:1.55;color:var(--dim1)} #screen-land .lsep{opacity:.5} @media (min-width:880px){ #screen-land .lhero{grid-template-columns:1.05fr .95fr;align-items:center; justify-items:start;gap:clamp(28px,4vw,64px);padding:8px 22px 20px} #screen-land .lcopy{text-align:left;order:1} #screen-land h1{font-size:clamp(36px,3.6vw,50px)} #screen-land .lcta{align-items:flex-start} #screen-land .lstack{order:2} } /* ── NIGHT ──────────────────────────────────────────────────────────────────── * The same page in the dark theme, and it is NOT the light one with the colours * flipped. A shadow cannot exist on black, so the card stops taking light and * starts giving it: the bloom is thrown down and outward from the card's own * edge and falls off the way real light does. That is the difference between a * card that is lit and a gradient sitting behind a rectangle. * * ⭐ And the field becomes what it always looked like it wanted to be. Same * canvas, same code, two colours. */ :root[data-theme="dark"] #screen-land{ background:radial-gradient(130% 95% at 50% -14%, #17123a 0%, #0c0a1c 46%, var(--s0) 100%)} :root[data-theme="dark"] #screen-land #l-sky{ --con-dot:rgba(255,255,255,.55); --con-line:rgba(157,140,255,.30)} :root[data-theme="dark"] #screen-land .lcardwrap{position:relative} /* the light the card throws: down and out, warm at the centre, gone by the edge */ :root[data-theme="dark"] #screen-land .lcardwrap::before{ content:"";position:absolute;left:-16%;right:-16%;top:-8%;bottom:-14%; border-radius:44px;filter:blur(46px);pointer-events:none;z-index:0; background:radial-gradient(58% 54% at 50% 44%, rgba(255,214,173,.42), rgba(201,166,240,.36) 46%, rgba(159,216,208,.18) 70%, transparent 80%)} :root[data-theme="dark"] #screen-land .lcardwrap .stage{position:relative;z-index:1} :root[data-theme="dark"] #screen-land .lcardwrap .face{ box-shadow:0 30px 60px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.6), 0 0 68px -12px rgba(201,166,240,.45)} :root[data-theme="dark"] :root[data-theme="dark"] #screen-land .lin:hover{background:rgba(255,255,255,.06)} /* ⛔ THE BODY'S SIDE PADDING IS OFF FOR THIS SCREEN AND THIS SCREEN ONLY. body.v-auth carries `padding:0 22px !important` for the sign-in box, the interview and the local board — three screens that want a gutter. The landing page is the only full-bleed thing in the view, and that gutter was showing as a bar down each side of the night gradient and the footer band. */ body.v-auth.v-land{padding:0 !important} /* day / night, in the nav, because the theme lived in settings and settings needs an account — so a stranger could not see the version the product is named after */ #screen-land .lthemeb{display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;padding:0;border-radius:100px;cursor:pointer; background:none;border:1px solid transparent;color:var(--txt2);transition:.16s} #screen-land .lthemeb:hover{background:var(--s2);border-color:var(--edge2);color:var(--txt1)} #screen-land .lthemeb svg:nth-child(2){display:none} :root[data-theme="dark"] #screen-land .lthemeb svg:nth-child(1){display:none} :root[data-theme="dark"] #screen-land .lthemeb svg:nth-child(2){display:block} :root[data-theme="dark"] #screen-land .lthemeb:hover{background:rgba(255,255,255,.06); border-color:var(--edge2)} /* ── THE PILLS ──────────────────────────────────────────────────────────────── His note: make them more visually interesting. They were flat rectangles with rounded ends. These have an edge, a light source and something that happens when you touch them — and they are the same object in both themes rather than two designs. */ #screen-land .lnavr{gap:6px} #screen-land .lin,#screen-land .lthemeb{ border:1px solid transparent;background:transparent; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} #screen-land .lin{border-radius:100px;padding:10px 16px;transition:.18s ease} #screen-land .lin:hover,#screen-land .lthemeb:hover{ background:var(--s2);border-color:var(--edge2);color:var(--txt1);transform:translateY(-1px)} /* the primary. A lime pill with a light on it: a highlight along the top edge, a soft ground shadow, and a sheen that crosses when you touch it. */ #screen-land .lup{position:relative;overflow:hidden;isolation:isolate; border:1px solid var(--lime-edge2); background:linear-gradient(180deg,var(--lime-hi),var(--lime) 58%,var(--lime-edge2)); box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 -1px 0 rgba(0,0,0,.10) inset, 0 6px 18px -8px rgba(90,115,0,.55); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease} #screen-land .lup::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.75) 50%,transparent 68%); transform:translateX(-120%);transition:transform .55s cubic-bezier(.3,.7,.3,1)} #screen-land .lup:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 26px -10px rgba(90,115,0,.7)} #screen-land .lup:hover::after{transform:translateX(120%)} #screen-land .lup:active{transform:translateY(0)} #screen-land .lup.big{box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 12px 30px -12px rgba(90,115,0,.65)} /* keep and pass, the two a stranger actually presses */ #screen-land .lrule button{position:relative;overflow:hidden;isolation:isolate; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease} #screen-land .lno{box-shadow:0 1px 0 rgba(255,255,255,.35) inset} #screen-land .lno:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(60,50,35,.5)} #screen-land .lyes{background:linear-gradient(180deg,var(--lime-hi),var(--lime) 58%,var(--lime-edge2)); box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 8px 20px -10px rgba(90,115,0,.6)} #screen-land .lyes:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 12px 26px -10px rgba(90,115,0,.75)} /* ⛔ ON NIGHT THE PILLS ARE GLASS, not paint. Same objects, lit from a different room — a translucent ground, a hairline edge that catches the sky behind it. */ :root[data-theme="dark"] #screen-land .lin, :root[data-theme="dark"] #screen-land .lthemeb{ background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10);color:var(--txt2)} :root[data-theme="dark"] #screen-land .lin:hover, :root[data-theme="dark"] #screen-land .lthemeb:hover{ background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:var(--txt1)} :root[data-theme="dark"] #screen-land .lno{ background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14); box-shadow:0 1px 0 rgba(255,255,255,.08) inset} @media (prefers-reduced-motion: reduce){ #screen-land .lup::after{display:none} #screen-land .lin,#screen-land .lup,#screen-land .lrule button{transition:none} #screen-land .lin:hover,#screen-land .lup:hover,#screen-land .lrule button:hover{transform:none} } /* ⛔ THE PRIVACY PARAGRAPH IS ON THE PAGE, NOT IN A POLICY NOBODY OPENS. The product had no privacy statement anywhere and one false sentence buried in an interview hint. This is the accurate version, and it is stronger than the vague one precisely because it names what it does not cover. The four refusals under it are the mission, which the product has always had and has always filed as a feature list. */ /* the name of the thing, in the first line of the sub — plain weight everywhere else so it reads as a definition rather than as emphasis */ #screen-land .lsub strong{font-weight:500;color:var(--txt1)}