/* /ai-automation — "AI hub". Weapps editorial designsystem, speglar services.css:
bläck #1a1a31, dämpad sage #74b393, lavendel #c0b7e9, grått #f7f7f7.
Ljusa sektioner (vitt/grått, alternerande), skarpa hörn, mörkt (teal-bläck)
BARA i CTA-bandet, grönt sparsamt (kickers, inline-länkar, tunna accenter).
Mycket luft, Neue Plak Extended i rubriker. Referens: /work, /services, start. */
:root {
--aia-ink: #1a1a31;
--aia-green: #5fd086;
/* Mörkgrön för text/accenter (kicker, inline-länkar): fördjupad till ~5,4:1 på
vitt för WCAG AA, i linje med services. */
--aia-green-dk: #0a7a3c;
/* Dämpad sage för tunna grafik-accenter (case-borders, stegprickar): mjukare än
den ljusa brandgröna som poppade för mycket på ljus bakgrund. */
--aia-green-soft: #74b393;
--aia-gray: #f7f7f7;
--aia-lav: #c0b7e9;
--aia-line: rgba(26, 26, 49, 0.12);
--aia-line-dark: rgba(255, 255, 255, 0.18);
/* Brödtext mörkare (som start/work/about) — en hårsmån mjukare än ren ink. */
--aia-soft: #33343f;
/* Mörkt band: work-footerns teal-bläck (rgb 38,69,79), inte ren ink. */
--aia-dark: #26454f;
--aia-wrap: 76rem;
}
/* Sajten är ljus-only. Lås färgschemat till light så sidan renderas identiskt
oavsett OS/browser-läge och formkontroller/scrollbars inte blir mörka. */
html:has(.aia-body) { color-scheme: light; }
/* Neutralisera Semplice-basens absolutpositionering för content-holder. */
.aia-body { background: #fff; color-scheme: light; }
.is-frontend #content-holder.aia,
.aia-body #content-holder.aia {
position: static; width: auto; min-height: 100vh; top: auto; left: auto;
}
#content-holder.aia {
background: #fff;
color: var(--aia-ink);
font-family: 'Neue-Plak-Regular', system-ui, sans-serif;
font-size: 1rem;
line-height: 1.5;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
.aia * { box-sizing: border-box; }
.aia h1, .aia h2, .aia h3 { margin: 0; }
.aia p { margin: 0; }
.aia a:not([class]) { color: inherit; }
.aia-wrap { max-width: var(--aia-wrap); margin: 0 auto; padding: 0 2rem; width: 100%; }
#content-holder.aia h1 {
font-family: 'Neue-Plak-Extended-SemiBold', sans-serif;
font-size: clamp(2.3rem, 6.5vw, 5.5rem);
line-height: 1.02;
letter-spacing: -0.025em;
text-wrap: balance;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
#content-holder.aia h2 {
font-family: 'Neue-Plak-Extended-SemiBold', sans-serif;
font-size: clamp(1.8rem, 4.2vw, 2.9rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
#content-holder.aia h3 {
font-family: 'Neue-Plak-SemiBold', sans-serif;
font-size: 1.2rem; line-height: 1.22; letter-spacing: -0.01em;
}
/* ---------- Knappar ---------- */
.aia-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 1rem;
text-decoration: none; padding: 0.95rem 1.7rem; border-radius: 0; border: 0; cursor: pointer;
transition: background 0.15s ease, transform 0.06s ease, border-color 0.15s ease, color 0.15s ease;
}
.aia-btn:active { transform: scale(0.98); }
/* Primär = ink-fylld (som resten av sajten). Grönt sparas till CTA-kontaktlänkar. */
.aia-btn-primary { background: var(--aia-ink); color: #fff; }
.aia-btn-primary:hover { background: #2a2a4a; }
.aia-btn-ink { background: var(--aia-ink); color: #fff; }
.aia-btn-ink:hover { background: #2a2a4a; }
.aia-btn-line { background: transparent; border: 1px solid var(--aia-ink); color: var(--aia-ink); }
.aia-btn-line:hover { background: var(--aia-ink); color: #fff; }
/* ---------- Synliga fokus-stilar (tangentbord) ---------- */
.aia :where(a, button, summary):focus-visible {
outline: 3px solid var(--aia-ink);
outline-offset: 2px;
}
.aia-cta a:focus-visible { outline-color: #fff; }
/* ---------- HERO (ljus, editorial – jfr /work, /services) ----------
Toppadding rensar den fixed:a huvudmenyn (64px) plus luft. */
.aia-hero { background: #fff; color: var(--aia-ink); padding: calc(64px + 4.5rem) 0 4.5rem; }
.aia-hero-eyebrow {
font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 0.82rem;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--aia-green-dk);
display: block; margin-bottom: 1.5rem;
}
/* Radbrytningen styrs manuellt i markup (
). Ingen snäv max-width: 16ch
klippte den balanserade raden "AI and automation" mot overflow-x: clip. */
.aia-hero h1 { color: var(--aia-ink); max-width: none; text-wrap: pretty; }
.aia-hero-sub { margin-top: 2.1rem; font-size: 1.2rem; line-height: 1.5; color: var(--aia-soft); max-width: 54ch; }
.aia-hero-actions { margin-top: 2.4rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.aia-hero-trust { margin-top: 3.2rem; font-size: 0.92rem; color: var(--aia-soft); line-height: 1.7; max-width: 60ch; }
.aia-hero-trust b { color: var(--aia-ink); font-family: 'Neue-Plak-SemiBold', sans-serif; font-weight: 400; }
/* Nyckelords-remsa: liten, dämpad, avskild med en tunn linje. */
.aia-hero-strip {
margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--aia-line);
font-family: 'Neue-Plak-SemiBold', sans-serif;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem;
color: var(--aia-soft); line-height: 2;
}
/* Reveal: sätts av JS (opacity 0→1). Utan JS syns allt. */
.aia-reveal-init { opacity: 0; transform: translateY(14px); }
/* ---------- Klibbig ankarmeny (pill, scrollspy) ---------- */
.aia-anchornav {
position: sticky; top: 0; z-index: 40;
background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(8px);
border-bottom: 1px solid var(--aia-line);
}
.aia-anchornav-inner {
max-width: var(--aia-wrap); margin: 0 auto; padding: 0.7rem 2rem;
display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none;
/* Självdöljande scroll-shadow i kanterna (som services). */
background:
linear-gradient(to right, #fff, rgba(255, 255, 255, 0)) 0 0 / 28px 100% no-repeat local,
linear-gradient(to left, #fff, rgba(255, 255, 255, 0)) 100% 0 / 28px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(26, 26, 49, 0.16), rgba(26, 26, 49, 0)) 0 0 / 14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(26, 26, 49, 0.16), rgba(26, 26, 49, 0)) 100% 0 / 14px 100% no-repeat scroll;
}
.aia-anchornav-inner::-webkit-scrollbar { display: none; }
.aia-anchor {
flex: 0 0 auto; font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 0.9rem;
color: var(--aia-soft); text-decoration: none; padding: 0.45rem 0.9rem; border-radius: 0;
border: 1px solid transparent; white-space: nowrap; transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.aia-anchor:hover { color: var(--aia-ink); }
.aia-anchor.is-active { color: var(--aia-ink); background: var(--aia-gray); border-color: var(--aia-line); }
/* Ihållande boknings-CTA sist i naven. */
.aia-anchor-book { margin-inline-start: auto; background: var(--aia-ink); color: #fff; border-color: var(--aia-ink); }
.aia-anchor-book:hover { background: #2a2a4a; color: #fff; }
/* ---------- Sektionsrytm (ljust: vitt/grått, alternerande) ---------- */
/* scroll-margin rensar BÅDE fixad navbar (64px) och den klibbiga ankarnaven. */
.aia-section, .aia-book { padding: 6.5rem 0; scroll-margin-top: 140px; }
.aia-section-gray { background: var(--aia-gray); }
.aia-kicker {
font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 0.82rem;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--aia-green-dk);
display: block; margin-bottom: 1.5rem;
}
.aia-lede { margin-top: 1.6rem; font-size: 1.15rem; line-height: 1.5; color: var(--aia-soft); max-width: 58ch; }
.aia-inlink { color: var(--aia-green-dk); text-decoration: none; }
.aia-inlink:hover { color: var(--aia-ink); }
/* ---------- AI-boken (feature) ---------- */
.aia-book-inner { display: grid; gap: 2.5rem; align-items: center; }
.aia-book-copy p { color: var(--aia-soft); max-width: 52ch; margin-top: 1.1rem; font-size: 1.05rem; line-height: 1.55; }
.aia-book-actions { margin-top: 1.9rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.aia-book-cover-img {
width: 100%; max-width: 260px; height: auto; border-radius: 0;
box-shadow: 0 22px 48px -20px rgba(26, 26, 49, 0.45); justify-self: center;
}
.aia-book-usps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.aia-book-usps li { font-size: 0.97rem; color: var(--aia-soft); line-height: 1.5; padding-left: 1.1rem; position: relative; }
.aia-book-usps li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--aia-ink); }
.aia-book-note { margin-top: 1.2rem; font-size: 0.85rem; color: var(--aia-soft); }
/* ---------- Case & kunder (klientfrontat, ) ---------- */
.aia-clients { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--aia-line); }
.aia-client { border-bottom: 1px solid var(--aia-line); }
.aia-client > summary {
list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem;
padding: 1.6rem 0.2rem;
}
.aia-client > summary::-webkit-details-marker { display: none; }
.aia-client-name {
font-family: 'Neue-Plak-Extended-SemiBold', sans-serif;
font-size: clamp(1.3rem, 2.8vw, 1.9rem); color: var(--aia-ink); line-height: 1.15;
}
.aia-client-count { color: var(--aia-soft); font-size: 0.95rem; }
.aia-client-chevron {
margin-left: auto; width: 1.3rem; height: 1.3rem; flex: 0 0 auto;
transition: transform 0.25s ease; color: var(--aia-ink);
}
.aia-client[open] .aia-client-chevron { transform: rotate(90deg); }
.aia-case { margin: 0 0.2rem 1.6rem; }
.aia-chips-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.3rem; }
.aia-chip {
font: inherit; font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 0.86rem; color: var(--aia-soft);
background: transparent; cursor: pointer;
border: 1px solid var(--aia-line); border-radius: 0; padding: 0.4rem 0.9rem;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.aia-chip:hover { border-color: var(--aia-ink); color: var(--aia-ink); }
.aia-chip.is-active { border-color: var(--aia-ink); background: var(--aia-ink); color: #fff; }
.aia-case-panel {
display: flex; flex-direction: column; gap: 0.35rem;
border-left: 2px solid var(--aia-green-soft); padding-left: 1.1rem;
}
.aia-case-panel[hidden] { display: none; }
.aia-project-t { font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 1.05rem; color: var(--aia-ink); }
.aia-project-t a { color: var(--aia-green-dk); text-decoration: none; }
.aia-project-t a:hover { color: var(--aia-ink); }
.aia-project-d { color: var(--aia-soft); font-size: 0.97rem; line-height: 1.5; }
.aia-project-res {
margin-top: 0.6rem; align-self: flex-start;
font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 0.9rem; color: var(--aia-ink);
padding-top: 0.6rem; border-top: 1px solid var(--aia-line);
}
.aia-project-res::before { content: '→ '; color: var(--aia-green-dk); }
.aia-client-tal {
font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 0.72rem;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--aia-soft);
border: 1px solid var(--aia-line); padding: 0.2rem 0.6rem; border-radius: 0; flex: 0 0 auto;
}
.aia-more { margin-top: 2.4rem; }
.aia-more a {
font-family: 'Neue-Plak-SemiBold', sans-serif; color: var(--aia-green-dk); text-decoration: none;
}
.aia-more a:hover { color: var(--aia-ink); }
.aia-trust {
margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--aia-line);
font-size: 0.95rem; color: var(--aia-soft); line-height: 1.7; max-width: 62ch;
}
.aia-trust b { color: var(--aia-ink); font-family: 'Neue-Plak-SemiBold', sans-serif; font-weight: 400; }
/* ---------- AI-assets (rutnät, luftiga kort) ---------- */
.aia-assets-grid { display: grid; gap: 1.6rem; margin-top: 3rem; }
.aia-asset {
background: #fff; border: 1px solid var(--aia-line); border-radius: 0;
padding: 1.8rem 1.7rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.aia-asset-type {
align-self: flex-start; font-family: 'Neue-Plak-SemiBold', sans-serif;
font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--aia-soft); border-bottom: 1px solid var(--aia-line); padding-bottom: 0.4rem; margin-bottom: 0.3rem;
}
.aia-asset h3 { color: var(--aia-ink); }
.aia-asset p { color: var(--aia-soft); font-size: 0.97rem; line-height: 1.5; flex: 1; }
.aia-asset .aia-btn { align-self: flex-start; margin-top: 0.8rem; font-size: 0.9rem; padding: 0.7rem 1.3rem; }
/* ---------- Compliance-wizards (entrékort + stegindikator) ---------- */
.aia-wizard {
margin-top: 3rem; background: #fff; border: 1px solid var(--aia-line); border-radius: 0;
padding: 2.2rem; display: grid; gap: 1.5rem;
}
.aia-section-gray .aia-wizard { background: #fff; }
.aia-wizard h3 { font-family: 'Neue-Plak-Extended-SemiBold', sans-serif; font-size: 1.5rem; color: var(--aia-ink); }
.aia-wizard p { color: var(--aia-soft); max-width: 54ch; line-height: 1.5; }
.aia-steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.aia-step { display: flex; align-items: center; gap: 0.6rem; }
.aia-step-dot {
width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 0.85rem;
border: 1px solid var(--aia-line); color: var(--aia-soft); background: #fff;
}
.aia-step.is-active .aia-step-dot { background: var(--aia-ink); border-color: var(--aia-ink); color: #fff; }
.aia-step-label { font-size: 0.9rem; color: var(--aia-soft); }
.aia-step-line { width: 2rem; height: 1px; background: var(--aia-line); margin: 0 0.5rem; }
.aia-wizard .aia-btn { justify-self: flex-start; }
/* ---------- Så jobbar vi (leveransmodell, teaser) ---------- */
.aia-model-grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
.aia-model {
background: var(--aia-gray); border: 1px solid var(--aia-line); border-radius: 0;
padding: 1.9rem 1.7rem; position: relative; display: flex; flex-direction: column;
}
.aia-model.hl { border-color: var(--aia-ink); }
.aia-model-tag {
position: absolute; top: 1.5rem; right: 1.6rem;
font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 0.68rem;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--aia-ink);
}
.aia-model-num {
font-family: 'Neue-Plak-SemiBold', sans-serif; font-size: 0.8rem;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--aia-ink);
display: block; margin-bottom: 1.1rem;
}
.aia-model h3 { font-family: 'Neue-Plak-Extended-SemiBold', sans-serif; font-size: 1.45rem; color: var(--aia-ink); margin-bottom: 0.35rem; }
.aia-model-role { font-size: 0.9rem; color: var(--aia-soft); display: block; margin-bottom: 1.3rem; }
.aia-model ul { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin: 0; padding: 0; }
.aia-model li { font-size: 0.95rem; color: var(--aia-soft); line-height: 1.5; padding-left: 1.1rem; position: relative; }
.aia-model li::before { content: ''; position: absolute; left: 0; top: 0.6rem; width: 5px; height: 5px; border-radius: 50%; background: var(--aia-ink); }
.aia-model-foot { margin-top: 2.4rem; font-size: 1rem; color: var(--aia-soft); line-height: 1.5; }
.aia-model-foot a { color: var(--aia-green-dk); text-decoration: none; }
.aia-model-foot a:hover { color: var(--aia-ink); }
/* ---------- Kunskap (länkar in) ---------- */
.aia-know-list { list-style: none; padding: 0; margin: 3rem 0 0; border-top: 1px solid var(--aia-line); }
.aia-know-list li { border-bottom: 1px solid var(--aia-line); }
.aia-know-list a {
display: flex; align-items: center; gap: 1rem; padding: 1.3rem 0.2rem;
color: var(--aia-ink); text-decoration: none;
}
.aia-know-list a:hover .aia-know-t { color: var(--aia-green-dk); }
.aia-know-t { font-family: 'Neue-Plak-SemiBold', sans-serif; }
.aia-know-arrow { margin-left: auto; color: var(--aia-soft); width: 1.15rem; height: 1.15rem; transition: transform 0.2s ease; }
.aia-know-list a:hover .aia-know-arrow { transform: translateX(3px); color: var(--aia-ink); }
/* ---------- Avslutande CTA-band (teal-bläck, som /work-footern) ---------- */
.aia-cta { background: var(--aia-dark); color: #fff; padding: 6rem 0; }
.aia-cta h2 { color: #fff; }
.aia-cta p { margin: 1.2rem 0 2.2rem; max-width: 54ch; font-size: 1.15rem; line-height: 1.5; color: #c9cad6; }
/* CTA-knappen: vit outline på det mörka bandet (som work-footerns "Email us"). */
.aia-cta .aia-btn-primary,
.aia-cta .aia-btn-ink { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); }
.aia-cta .aia-btn-primary:hover,
.aia-cta .aia-btn-ink:hover { background: #fff; color: var(--aia-dark); }
.aia-cta-contact { margin: 1.6rem 0 0; font-size: 0.98rem; color: #9a9cb0; }
.aia-cta-contact a { color: var(--aia-green); text-decoration: none; }
.aia-cta-contact a:hover { color: #fff; }
.aia-cta-contact span { margin: 0 0.5rem; color: #6a6c85; }
/* ---------- Responsivt ---------- */
@media (min-width: 720px) {
.aia-assets-grid { grid-template-columns: repeat(3, 1fr); }
.aia-model-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
.aia-book-inner { grid-template-columns: 1fr 300px; }
}
/* ---------- Mobil: stramare vertikal rytm ---------- */
@media (max-width: 640px) {
.aia-section, .aia-book { padding: 3rem 0; }
.aia-hero { padding: calc(64px + 2.6rem) 0 2.5rem; }
.aia-hero-sub { margin-top: 2.4rem; }
.aia-hero-trust { margin-top: 2.8rem; }
.aia-wrap { padding: 0 1.4rem; }
.aia-asset, .aia-model, .aia-wizard { padding: 1.6rem 1.4rem; }
.aia-anchornav-inner { padding: 0.6rem 1.4rem; }
}
/* Respektera reduktion av rörelse för scrollspy-scroll (JS läser detta) */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}