/* Stilarna från "Aleida hemsida.dc.html".
*
* Två saker skiljer den här filen från originalet, båda av samma skäl —
* scrollen ska gå jämnt:
*
* 1. Ingenting som animeras rör layouten. Hero-kortets kollaps, blobbens
* resa och sektionernas entré körs på transform/opacity/inset i ett
* absolutpositionerat lager. Tidigare animerades padding och min-height på
* element i flödet, vilket byggde om hela dokumentet 0,62 s långt mitt i
* användarens första scroll — det var det som såg ut som att sidan laddade
* om medan man skrollade.
*
* 2. Tillståndet bor i CSS, inte i inline-stilar. hemsida.js sätter en enda
* klass (.scrolled på ) och resten är vanliga regler. Ingen
* stil-skrivning per bildruta, inga rect-mätningar i ett intervall.
*
* Mobilreglerna ligger sist, i ett eget block. De rör bara layouten under
* 900px — desktoputseendet är oförändrat.
*/
html { scroll-behavior: smooth; }
/* Samma rendering som App-Aleida (Tailwinds antialiased på body): utan detta
ritar macOS ljus text på mörk botten med subpixel-AA, som ser tjock och
suddig ut — det var skillnaden i skärpa mot riktiga ATS:et (2026-08-31). */
body { margin: 0; background: #FFFFFF; font-family: Archivo, sans-serif; color: #0F0F0E; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: #0F0F0E; text-decoration: none; }
a:hover { color: #C0402C; }
* { box-sizing: border-box; }
/* Ord med bindestreck bryts aldrig över rad — se src/lib/nobr.ts. */
.nobr { white-space: nowrap; }
/* ── standard-CTA (bläck, pill, mono-versaler) ───────────────────────────
Sajtens primärknapp. Padding 13px 24px är normen; navens variant sitter
tätare (10px 20px) via inline-stil, den här klassen är allt annat. */
.btn-ink {
display: inline-flex; align-items: center; justify-content: center;
padding: 13px 24px;
border-radius: 999px;
background: #1A1A18;
color: #FAF7F2;
font-family: 'JetBrains Mono', monospace;
font-size: 12.5px;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 20px 38px -22px rgba(15,15,14,.8);
transition: transform .35s cubic-bezier(.22,.7,.25,1), background .35s ease, box-shadow .35s ease;
}
.btn-ink:hover {
transform: translateY(-2px);
background: #0F0F0E;
color: #FAF7F2;
box-shadow: 0 26px 44px -20px rgba(15,15,14,.55);
}
/* ── hero-kortets kollaps ─────────────────────────────────────────────────
#heroPad har en fast höjd som aldrig ändras under scroll (svh, inte dvh —
dvh krymper när mobilens adressfält åker in och skulle flytta hela sidan).
#top ligger absolut inuti och drar in sina kanter. Dokumentets höjd är
densamma i båda lägena, så ingenting under hero rör sig. */
.heropad { position: relative; height: 100vh; height: 100svh; min-height: 620px; }
.herocard {
position: absolute; inset: 0;
border-radius: 0;
box-shadow: 0 0 0 rgba(15,15,14,0);
transition: inset .62s cubic-bezier(.62,.04,.32,1),
border-radius .62s cubic-bezier(.62,.04,.32,1),
box-shadow .62s cubic-bezier(.62,.04,.32,1);
}
.scrolled .herocard {
inset: 62px 74px;
border-radius: 30px;
box-shadow: 0 60px 120px -60px rgba(15,15,14,.55);
}
/* Glaslagret bakom navets innehåll. backdrop-filter ligger kvar hela tiden
och det är opaciteten som växlar: ett lager med opacity 0 målas inte alls,
medan en animerad blur() räknas om varje bildruta. */
.navglass {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
border: 1px solid rgba(255,255,255,.95);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -34px rgba(15,15,14,.5);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
opacity: 0;
transition: opacity .5s cubic-bezier(.62,.04,.32,1);
}
.scrolled .navglass { opacity: 1; }
.navpill { padding: 13px 13px 13px 26px; transition: padding .55s cubic-bezier(.62,.04,.32,1); }
.scrolled .navpill { padding-left: 18px; }
.navword { opacity: 1; width: 104px; transition: opacity .34s cubic-bezier(.62,.04,.32,1), width .55s cubic-bezier(.62,.04,.32,1); }
.scrolled .navword { opacity: 0; width: 0; }
/* Boknings-widgeten är sticky över hela sidan (Noa 2026-09-02) — den gamla
regeln som gömde den vid .scrolled är borttagen. */
.herowidget { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* ── entré när sektioner kommer in ────────────────────────────────────────
.js sätts inline i innan sidan målas. Utan skript syns allt direkt,
och elementen hinner aldrig ritas synliga för att sedan blinka till
osynliga — vilket var vad animation-fill-mode: both gjorde förut. */
.js [data-reveal] {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity .7s cubic-bezier(.22,.75,.24,1), transform .7s cubic-bezier(.22,.75,.24,1);
}
.js [data-reveal].anim { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: .08s; }
.js [data-reveal][data-delay="2"] { transition-delay: .16s; }
.js [data-reveal][data-delay="3"] { transition-delay: .24s; }
@keyframes drift { 0% { transform: translate(-34px,0) rotate(-3deg); } 25% { transform: translate(0,-18px) rotate(0deg); } 50% { transform: translate(34px,-4px) rotate(3deg); } 75% { transform: translate(0,-20px) rotate(0deg); } 100% { transform: translate(-34px,0) rotate(-3deg); } }
@keyframes shadowPulse { 0%,100% { transform: scaleX(1); opacity: .16; } 50% { transform: scaleX(.82); opacity: .08; } }
@keyframes dotpulse { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes marqueeL { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes marqueeR { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes sheen { 0% { transform: translate3d(-140%,0,0); } 60%,100% { transform: translate3d(260%,0,0); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
/* Marquee-raderna är stora textytor som annars målas om vid varje scrollsteg.
Egen kompositorlager gör dem gratis att scrolla förbi. */
.marquee { will-change: transform; backface-visibility: hidden; }
.marqueewrap { contain: paint; }
@keyframes arc { 0% { transform: translateY(0) rotate(0deg); } 20% { transform: translateY(-34px) rotate(-5deg); } 50% { transform: translateY(-44px) rotate(0deg); } 80% { transform: translateY(-34px) rotate(5deg); } 100% { transform: translateY(0) rotate(0deg); } }
@keyframes squash { 0% { transform: scale(1,1); } 9% { transform: scale(1.06,.93); } 22% { transform: scale(.93,1.09); } 50% { transform: scale(.97,1.03); } 82% { transform: scale(.94,1.07); } 93% { transform: scale(1.1,.9); } 100% { transform: scale(1,1); } }
@keyframes talk { 0% { transform: scale(1,1); } 22% { transform: scale(1.06,.94); } 48% { transform: scale(.965,1.04); } 72% { transform: scale(1.03,.97); } 88% { transform: scale(.99,1.01); } 100% { transform: scale(1,1); } }
/* Blobben reser på transform, inte på left: left tvingar fram en ny layout av
hero-trädet i varje bildruta av den 1,12 s långa resan, transform gör inte
det. --x sätts av hemsida.js. */
.blobtravel { position: absolute; bottom: 0; left: 50%; --x: 0px; transform: translateX(-50%) translateX(var(--x)); transition: transform 1.12s cubic-bezier(.42,0,.3,1); will-change: transform; }
.blobtravel.noslide { transition: none; }
.blobwrap.flight { animation: arc 1.12s cubic-bezier(.42,0,.3,1) both; }
.blobwrap.flight .squasher { animation: squash 1.12s cubic-bezier(.34,0,.34,1) both; transform-origin: 50% 96%; }
.blobwrap.speak .squasher { animation: talk .58s ease-in-out both; transform-origin: 50% 96%; }
.blobshadow { transition: transform 1.12s ease-in-out, opacity 1.12s ease-in-out; }
.blobtravel.flight .blobshadow { transform: scaleX(.66); opacity: .07; }
.swapline { transition: opacity .42s cubic-bezier(.33,.7,.3,1), transform .52s cubic-bezier(.24,.9,.3,1), filter .42s ease; }
.swapline.out { opacity: 0; transform: translateY(6px) scale(.992); }
.swapline.in { opacity: 1; transform: none; }
/* ══ mobil ════════════════════════════════════════════════════════════════
Allt här under är överskrivningar av inline-stilar, därav !important.
Desktop rör vi inte. */
@media (max-width: 900px) {
/* hero */
.heropad { min-height: 0; }
.scrolled .herocard { inset: 12px; border-radius: 22px; box-shadow: 0 34px 60px -40px rgba(15,15,14,.5); }
.herocard { padding: 104px 22px 84px !important; }
/* Två rader reserveras alltid: raderna byts i loop och några av dem radbryts
på telefonbredd. Hade höjden följt den aktuella raden skulle knappen hoppa
upp och ned vid varje byte. Knappens toppmarginal krymper i gengäld. */
.heroh1 { font-size: clamp(30px, 8.6vw, 58px) !important; min-height: 2.35em !important; }
.heroh1 + a { margin-top: 10px !important; }
.heroblob { width: 118px !important; height: 118px !important; }
.blobtravel { margin-bottom: -16px !important; }
.blobshadow { width: 78px !important; }
/* Marquee-texten lyste igenom rubriken på smal skärm — tätare slöja. */
.herofade { background: radial-gradient(84% 46% at 50% 50%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.92) 46%, rgba(255,255,255,0) 100%) !important; }
/* generella sektionsmått */
.sec { padding-left: 22px !important; padding-right: 22px !important; }
/* Undersidornas hjältar och sektioner: 190px topp är byggt för en
desktopskärm, på mobil blir det en tom skärm innan rubriken. */
.sub-hero { padding-top: 120px !important; padding-bottom: 64px !important; }
.sec-tight { padding-bottom: 88px !important; }
.sec-preem { padding-top: 56px !important; padding-bottom: 88px !important; }
.sec-intg { padding-top: 16px !important; padding-bottom: 88px !important; }
.sec-sak { padding-top: 48px !important; padding-bottom: 96px !important; }
/* .sec-cta äger sina egna mobilmått sedan avslutet byggdes om (2026-09-02),
de bor i FinalCta.astro tillsammans med resten av variant 2A. */
.sec-footer { padding: 36px 22px 0 !important; }
.sec-outro { padding: 0 !important; }
/* Preem-caset */
.preem-h { margin-bottom: 40px !important; }
.preem-media { min-height: 240px !important; }
/* produktsektionen: panel först, text under, inga negativa marginaler */
.prod-row { grid-template-columns: 1fr !important; padding: 0 22px 76px !important; gap: 30px; }
.prod-panel { order: 0; min-height: 0 !important; border-radius: 18px !important; border: 1px solid rgba(15,15,14,.05) !important; padding: 22px 16px !important; justify-content: center !important; }
.prod-col { order: 1; padding: 0 !important; }
.prod-card { width: 100% !important; margin: 0 !important; }
.prod-phone { width: min(300px, 74vw) !important; }
.rank-row { grid-template-columns: 20px 1fr 42px !important; gap: 12px !important; padding: 14px 18px !important; }
.rank-bar { display: none !important; }
/* integrationer */
.intg-home-grid { grid-template-columns: 1fr !important; }
.intg-dark { min-height: 0 !important; gap: 32px !important; }
.intg-glass { min-height: 0 !important; padding: 30px !important; gap: 20px !important; }
/* säkerhet */
.sak-home-card { grid-template-columns: 1fr 1fr !important; padding: 34px 24px !important; gap: 24px 18px !important; border-radius: 18px !important; }
.sak-label { grid-column: 1 / -1; }
.sak-spacer { display: none !important; }
/* outro-raden */
.outro-meta { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}
@media (max-width: 640px) {
/* flytande boknings-widget: bara ansiktet. Texten bredvid tar för mycket av
bredden på telefon och lägger sig över innehållet. */
.herowidget { right: 14px !important; bottom: 14px !important; }
.herowidget .widgettext { display: none !important; }
.herowidget a { padding: 9px !important; }
.prod-row { padding-bottom: 64px !important; }
.sak-home-card { grid-template-columns: 1fr !important; }
}
/* ── respekt för reducerad rörelse ────────────────────────────────────────
Marquee, blobbens resa och sektionsentréerna är dekor. Den som bett sitt
system om mindre rörelse ska få sidan stilla, inte snabbspolad. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
transition-delay: 0ms !important;
}
}