/* Perusta: muuttujat, nollaus ja ne kolme elementtiä joita landing.css
 * olettaa ympärillään olevan.
 *
 * landing.css on kopioitu sovelluksesta sellaisenaan, ja se olettaa
 * style.css:n -- sovelluksen karttapuolen tyylitiedoston -- antavan
 * muuttujat, nollauksen ja nappien perusilmeen. Koko style.css olisi täällä
 * väärin: siitä 240 riviä on karttaa, palkkia ja laitelistaa, eikä tällä
 * sivulla ole kumpaakaan. Täällä on se osa jota landing.css käyttää, ja
 * arvot ovat samat kuin sovelluksessa, jotta sivu näyttää täsmälleen siltä
 * miltä se näytti lauma.cloudissa. */

:root {
  --bg: #12161a;
  --panel: #1b2127;
  --panel-2: #232b33;
  --line: #2e3841;
  --text: #e8edf2;
  --dim: #93a1ad;
  --accent: #7ec27a;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* overflow: hidden, ja vieritys on .landingin sisällä -- se on
 * position: fixed, inset: 0, overflow-y: auto. Sama rakenne kuin
 * sovelluksessa, jossa sen syy oli kartta; täällä syytä ei enää ole, mutta
 * tyylit ovat yhteiset, ja kahdesta vierityskontekstista vain tämä on se
 * jonka kanssa landing.css on koskaan ollut oikeassa. */
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font: 15px/1.4 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%;
}

.hidden { display: none !important; }

button { font: inherit; }

/* Kirjautuminen ja tilin luonti ovat linkkejä, eivät nappeja: ne vievät
 * toiseen osoitteeseen, eivät avaa laatikkoa tässä sivussa. Selain saa
 * kohdella niitä linkkeinä -- keskinapsautus, "avaa uuteen välilehteen",
 * osoitteen näkeminen alareunassa -- ja ilme on silti navin napin ilme,
 * koska lukijalle ne ovat samassa rivissä samoja asioita. */
.landing .lcta {
  display: inline-block; text-decoration: none; white-space: nowrap;
  background: var(--accent); color: #10201a; border: 0; border-radius: 9px;
  padding: 10px 18px; font-weight: 600; cursor: pointer;
}
.landing .lcta.ghost {
  background: transparent; color: var(--text); border: 1px solid var(--line);
  padding: 9px 17px;        /* reunaviiva syö yhden pikselin kummaltakin */
}
.landing .lcta.ghost:hover { border-color: var(--dim); }

/* Alatunnisteen linkit.
 *
 * Sovelluksessa näille ei ole sääntöä, joten selain piirtää ne sinisinä ja
 * alleviivattuina keskelle tummaa palkkia. Siellä se on pikkuvirhe sivulla
 * jonka on jo nähnyt se joka on kirjautumassa sisään; täällä se on ensimmäinen
 * asia jonka tulija näkee sivun pohjalla, joten se korjataan -- tässä
 * tiedostossa, ei landing.css:ssä, jotta kopioitu tiedosto pysyy kopiona. */
.lfoot a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.lfoot a:hover { color: var(--text); }