/* Unestål Mental Träning — landing page
Layout lives in inline styles on the markup (design-tool output).
This file holds resets, hover states, animations and responsive overrides. */
/* ---- Fonts, served from here rather than from Google ----
These were ed from fonts.googleapis.com, which sends every visitor's
IP address to Google before the page has asked anyone anything. A German
court found that a GDPR violation in 2022 and it has been the basis of
claims since. It also sat badly beside the app, where Sentry runs in the EU
region and the account id was taken out of crash reports on purpose: the
product is careful with visitor data and the page advertising it was not.
Self-hosting also removes two render-blocking round trips to a third party
before any text can paint.
Latin subset only — that covers å ä ö, which is the whole requirement for a
Swedish page. Two of the four are variable, so one file covers every weight
used: Manrope at 400 through 800, Cormorant Garamond at 400 and 500. The
italic Cormorant is a separate static face because the hero sets it, and a
browser asked for an italic it does not have will slant the upright one
itself — which on a display serif looks like a mistake, because it is one.
112 KB for all four. */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('fonts/manrope-var-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('fonts/cormorant-garamond-var-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('fonts/cormorant-garamond-italic-500-latin.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/jetbrains-mono-400-latin.woff2') format('woff2');
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: #10294a;
color: #eef2f7;
font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
/* `height: auto` is not optional here, it is the other half of width/height.
Every carries width and height attributes so the browser can reserve
the right box before the file arrives, which is what stops the page jumping
as it loads. The cost is that those attributes are also a presentational
height: the moment `max-width` shrinks an image below its attribute width,
the attribute height still applies at full value and the picture stretches.
`height: auto` hands the height back to the aspect ratio. Elements that
genuinely want a fixed height — the logo at 176px, the footer mark at 64px —
set it inline, and an inline style beats this. */
img { max-width: 100%; height: auto; }
a { color: #f0c761; text-decoration: none; transition: color 0.15s ease, opacity 0.15s ease; }
a:hover { color: #f7dc9c; }
a.hg:hover { color: #f7dc9c !important; }
a.hw:hover { color: #eef2f7 !important; }
a.hop:hover { opacity: 0.86; }
:focus-visible { outline: 2px solid #f0c761; outline-offset: 3px; }
/* ---- Appfältet högst upp, på telefon ----
Ersätter Apples Smart App Banner, som ritas av Safari och kräver ett riktigt
App Store-id. Samma plats och samma jobb, men den här går att formge och
fungerar innan appen är godkänd.
Dolt som utgångsläge och påslaget först under 680 px: på en dator installerar
man ingen telefonapp, och ett fastnitat fält högst upp vore bara brus.
`position: sticky` och inte `fixed`, så fältet tar egen plats i flödet i
stället för att lägga sig över hjältebilden. Inget behov av att kompensera
med padding på body, och inget som kan glida isär om höjden ändras. */
.appbar { display: none; }
@media (max-width: 680px) {
.appbar {
display: flex;
align-items: center;
gap: 12px;
position: sticky;
top: 0;
z-index: 50;
padding: 9px 16px;
background: rgba(8, 22, 42, 0.94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(238, 242, 247, 0.12);
text-decoration: none;
}
.appbar img {
width: 40px;
height: 40px;
border-radius: 9px;
flex: none;
}
/* Texten krymper, knappen gör det inte — samma regel som priset i appens
listrader. Det som får plockas bort är undertexten, inte uppmaningen. */
.appbar-text {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.appbar-text strong {
font-size: 14px;
font-weight: 700;
color: #eef2f7;
line-height: 1.2;
}
.appbar-text small {
font-size: 11.5px;
color: rgba(238, 242, 247, 0.62);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.appbar-cta {
flex: none;
padding: 8px 17px;
border-radius: 999px;
background: #f0c761;
color: #10294a;
font-size: 13.5px;
font-weight: 700;
}
}
/* ---- "Snart på Google Play" ----
Ours, deliberately, rather than Google's badge greyed out. The badge may
only be used to link to a live store listing, and altering it — dimming,
overlaying, adding words — is specifically not allowed. The real file is in
badges/google-play-sv.png, waiting for the account.
Sized to stand beside the App Store badge rather than to imitate it: same
height, squarer corners, no logo. It should read as a note, not as a second
button somebody will try to press.
Not a and not a