/* ---------------------------------------------------------------------------
* Landing / digital-twin-reveal styles.
*
* Everything is scoped under #landing-root and every class is prefixed
* "dt-" (digital twin) so nothing here can leak into, or be overridden by,
* TwinBuild's own src/style.css — which already defines generically-named
* classes like `.canvas-wrap` for its own "Digital tvilling" viewer panel.
* ------------------------------------------------------------------------- */
/* #login-screen and #app render unconditionally (display:flex, no default
* display:none) and sit in normal document flow right after #landing-root.
* While the landing page is mounted, keep them out of the flow entirely —
* otherwise scrolling far enough down the (now much longer) marketing page
* runs straight into that raw, unauthenticated app/login markup. */
body.dt-landing-active #login-screen,
body.dt-landing-active #app {
display: none !important;
}
/* Horizontal clipping (the full-bleed section-tint box-shadow trick, plus a
* general safety net against any decorative element bleeding past the
* viewport) belongs on body, not #landing-root. `overflow-x: hidden` on
* #landing-root itself would silently turn it into a scroll container —
* per spec, position:sticky on the nav (its direct child) then sticks
* relative to THAT container's scrollport instead of the real viewport,
* and since #landing-root never actually scrolls internally, the nav just
* scrolls away with the page instead of staying pinned. */
body.dt-landing-active {
overflow-x: hidden;
}
#landing-root {
--dt-ink: #16181c;
--dt-ink-soft: #4a4e57;
--dt-paper: #f7f8fb;
--dt-paper-dim: #edf0f7;
--dt-line: rgba(22, 24, 28, 0.12);
color-scheme: light;
position: relative;
/* Isolated so the decorative ::before below (z-index: -1) is contained to
this subtree instead of racing z-index with anything outside it. */
isolation: isolate;
/* Flat paper base — the colour blooms and grain live on the fixed
::before/::after layers below instead of directly on this element's own
background. This element spans the ENTIRE page (it's ~17000px tall on
the long scroll section), so painting a multi-layer gradient +
blended-noise background directly on it would force the browser to
keep a backing surface that tall around for the whole scroll —
noticeably heavy/janky. A viewport-sized `position: fixed` layer costs
the same regardless of page length, since it never needs to grow past
one screen. */
background: var(--dt-paper);
color: var(--dt-ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Soft colour blooms + a very faint film-grain texture, both fixed to the
viewport (not the document) so the decorative surface stays a single
screen-sized layer no matter how long the page is — see the note on
#landing-root's own background above. #landing-root is a direct child of
with no transformed/filtered ancestor, so `position: fixed` here
really does pin to the real viewport rather than getting hijacked into a
local containing block. Sections with their own opaque background (nav,
tint stripes, dark blocks, cards) simply paint over this where they sit. */
#landing-root::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient(1100px circle at 12% 3%, rgba(180, 205, 255, 0.4), transparent 60%),
radial-gradient(900px circle at 88% 14%, rgba(255, 214, 170, 0.22), transparent 55%),
radial-gradient(1200px circle at 14% 34%, rgba(190, 218, 255, 0.32), transparent 55%),
radial-gradient(950px circle at 86% 52%, rgba(210, 195, 255, 0.24), transparent 55%),
radial-gradient(1150px circle at 16% 70%, rgba(180, 205, 255, 0.3), transparent 55%),
radial-gradient(900px circle at 88% 88%, rgba(255, 214, 170, 0.2), transparent 55%);
}
#landing-root::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.035;
mix-blend-mode: multiply;
background-repeat: repeat;
background-image: url("data:image/svg+xml;utf8, links (real cross-page navigations to
/kontakt/ instead of same-page smooth-scrolling), sharing this class
with the handful still rendered as — these two properties are
no-ops on a button but keep a link from rendering as underlined inline
text. */
display: inline-block;
text-decoration: none;
}
.dt-cta-btn:hover {
background: #1d4ed8;
transform: translateY(-1px);
}
.dt-cta-btn-large {
font-size: 15px;
padding: 15px 32px;
}
.dt-cta-btn-ghost {
background: transparent;
color: var(--dt-ink);
border: 1px solid var(--dt-line);
}
.dt-cta-btn-ghost:hover {
background: #fff;
border-color: var(--dt-ink);
}
/* ---------- Scroll reveal ---------- */
.dt-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.dt-reveal-visible {
opacity: 1;
transform: translateY(0);
}
/* ---------- Scroll aids (progress bar + back-to-top) ---------- */
.dt-scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 200;
background: transparent;
pointer-events: none;
}
.dt-scroll-progress-fill {
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
background: #2563eb;
}
.dt-back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 150;
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid var(--dt-line);
background: #fff;
color: var(--dt-ink);
font-size: 17px;
cursor: pointer;
box-shadow: 0 14px 30px -10px rgba(20, 20, 20, 0.25);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.2s, transform 0.2s, border-color 0.15s;
}
.dt-back-to-top-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.dt-back-to-top:hover {
border-color: #2563eb;
color: #2563eb;
}
/* ---------- Nav ---------- */
.dt-nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
gap: 28px;
padding: 14px 5vw;
background: rgba(251, 251, 249, 0.86);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--dt-line);
}
.dt-nav-logo {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: #1e2d4e;
text-decoration: none;
flex-shrink: 0;
}
.dt-nav-logo b {
color: #2563eb;
font-weight: 700;
}
.dt-nav-links {
display: flex;
align-items: center;
gap: 22px;
flex: 1;
}
.dt-nav-link {
font-size: 13.5px;
color: var(--dt-ink-soft);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s;
}
.dt-nav-link:hover {
color: var(--dt-ink);
}
.dt-nav-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.dt-nav-login {
background: none;
border: none;
font-size: 13.5px;
color: var(--dt-ink);
cursor: pointer;
/* Var 31 px hög och 60 px bred; det här ger 38 px höjd och luft i sidled. */
padding: 11px 12px;
}
.dt-nav-login:hover {
text-decoration: underline;
}
.dt-nav-demo {
padding: 10px 20px;
font-size: 13px;
}
.dt-nav-download {
padding: 9px 16px;
font-size: 13px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
}
/* Shown only inside the mobile burger dropdown (see .dt-nav-links below) —
the desktop nav already has the real button in .dt-nav-actions. */
.dt-nav-download-mobile {
display: none;
}
/* Menyknappen var 18x25 px — ett bart tecken utan yta runt om, och den enda
vägen till navigeringen på en telefon. 44 px är den rekommenderade minsta
tryckytan för ett finger. Negativ marginal så att den optiska kanten ligger
kvar där den låg, trots att ytan blivit större. */
.dt-nav-burger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-right: -10px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--dt-ink);
flex-shrink: 0;
}
/* ---------- Hero (Hem) ---------- */
.dt-hero-ctas {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
flex-wrap: wrap;
justify-content: center;
}
.dt-hero-hint {
margin-top: 14px;
font-size: 12.5px;
color: var(--dt-ink-soft);
}
.dt-hero-steps {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 10px;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--dt-line);
font-size: 12.5px;
color: var(--dt-ink-soft);
}
.dt-hero-steps-arrow {
color: #93c5fd;
}
.dt-hero-scrolldown {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 22px;
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--dt-ink-soft);
text-transform: uppercase;
}
.dt-hero-scrolldown-line {
width: 1px;
height: 24px;
background: var(--dt-ink-soft);
animation: dt-hint-pulse 1.8s ease-in-out infinite;
}
.dt-hero-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 6vw;
background: #eff4ff;
color: #1e3a8a;
font-size: 13.5px;
border-top: 1px solid var(--dt-line);
}
.dt-hero-banner a {
color: #2563eb;
text-decoration: none;
font-weight: 600;
}
/* ---------- Shared section scaffolding ---------- */
.dt-section {
padding: 12vh 6vw;
max-width: 1180px;
margin: 0 auto;
}
/* A couple of sections get a subtle full-bleed tint so the long page reads
* as distinct chapters while scrolling, not one flat, endless sheet. The
* section itself is a centered, max-width box (so its background alone
* would just be a boxed card) — the box-shadow/clip-path pair is the usual
* trick to paint a full-viewport-width band behind a constrained box
* without adding an extra wrapper element around every section. */
.dt-section-tint {
background: var(--dt-paper-dim);
box-shadow: 0 0 0 100vmax var(--dt-paper-dim);
clip-path: inset(0 -100vmax);
}
.dt-section-head {
max-width: 720px;
margin: 0 auto 7vh;
text-align: center;
}
.dt-section-head h2 {
font-size: clamp(26px, 3.4vw, 40px);
margin: 14px 0 16px;
}
.dt-section-lead {
color: var(--dt-ink-soft);
font-size: 16px;
line-height: 1.7;
}
.dt-block {
margin: 0 auto 12vh;
max-width: 1040px;
}
.dt-block:last-child {
margin-bottom: 0;
}
/* Only the direct-child heading gets centered here — not one nested inside
a two-column layout like .dt-app-teaser, which needs to stay left-aligned
with the rest of its column (kicker, paragraph, list, form). */
.dt-block > h2 {
font-size: clamp(24px, 3vw, 34px);
margin: 12px 0 36px;
text-align: center;
}
/* The kicker label above a centered .dt-block heading was left sitting at
the block's left edge while its h2 centered underneath it — pair them up
so the two lines share the same alignment. Scoped to kickers directly
followed by an h2 so it doesn't touch left-aligned kickers used elsewhere
(e.g. inside .dt-feature-hero-copy, or the ones with no heading below). */
.dt-block > .dt-copy-kicker:has(+ h2) {
text-align: center;
}
.dt-block-split h2 {
text-align: center;
}
.dt-block-callout {
text-align: center;
}
/* #landing-root prefix needed here: the global "#landing-root p, #landing-root
ul { margin: 0 }" reset further down is ID-scoped, so it otherwise beats a
plain .dt-callout-lead rule and silently zeroes out this auto-centering
(the box keeps its max-width, but sits pinned to the left instead of
centered). Same fix as .dt-mission below. */
#landing-root .dt-callout-lead {
max-width: 680px;
margin: 0 auto;
color: var(--dt-ink-soft);
font-size: 15.5px;
line-height: 1.7;
}
.dt-closing-cta {
text-align: center;
padding: 8vh 4vw 2vh;
max-width: 640px;
margin: 0 auto;
}
.dt-closing-cta h2 {
font-size: clamp(22px, 2.8vw, 30px);
margin-bottom: 14px;
}
.dt-closing-cta p {
color: var(--dt-ink-soft);
font-size: 14.5px;
margin-bottom: 20px;
}
/* ---------- Hem: pain/solution, steps, segments, stat bar, pilot ---------- */
.dt-hem-rest {
padding: 12vh 6vw 0;
max-width: 1180px;
margin: 0 auto;
}
.dt-pain-solution {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 880px;
margin: 0 auto;
}
.dt-pain-col,
.dt-solution-col {
padding: 30px 28px;
border-radius: 14px;
border: 1px solid var(--dt-line);
}
.dt-pain-col {
background: var(--dt-paper-dim);
}
.dt-solution-col {
background: #eff4ff;
border-color: #cddcfb;
}
.dt-pain-col h3,
.dt-solution-col h3 {
font-size: 15px;
margin-bottom: 16px;
}
.dt-pain-col ul,
.dt-solution-col ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.dt-pain-col li,
.dt-solution-col li {
font-size: 14px;
line-height: 1.6;
color: var(--dt-ink-soft);
padding-left: 18px;
position: relative;
}
.dt-pain-col li::before {
content: '–';
position: absolute;
left: 0;
color: #b3392f;
}
.dt-solution-col li::before {
content: '✓';
position: absolute;
left: 0;
color: #2563eb;
}
.dt-steps-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.dt-steps-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.dt-step-card {
display: block;
padding: 26px 22px;
border: 1px solid var(--dt-line);
border-radius: 14px;
text-decoration: none;
color: inherit;
background: #fff;
transition: border-color 0.15s, transform 0.15s;
}
a.dt-step-card:hover {
border-color: #2563eb;
transform: translateY(-2px);
}
.dt-step-num {
display: block;
font-family: 'Fraunces', serif;
font-size: 26px;
color: #93c5fd;
margin-bottom: 10px;
}
.dt-step-card h3 {
font-size: 15.5px;
margin-bottom: 8px;
}
.dt-step-card p {
font-size: 13.5px;
color: var(--dt-ink-soft);
line-height: 1.6;
}
.dt-segments-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.dt-segment-card {
position: relative;
padding: 22px 20px;
border: 1px solid var(--dt-line);
border-radius: 14px;
background: #fff;
}
.dt-segment-card h3 {
font-size: 15px;
margin-bottom: 8px;
}
.dt-segment-card p {
font-size: 13.5px;
color: var(--dt-ink-soft);
line-height: 1.6;
}
.dt-segment-featured {
background: #eff4ff;
border-color: #cddcfb;
}
.dt-segment-tag {
display: inline-block;
font-size: 11px;
letter-spacing: 0.06em;
font-weight: 600;
color: #fff;
background: #2563eb;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.dt-quote-pair {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 26px;
flex-wrap: wrap;
font-family: 'Fraunces', serif;
font-size: clamp(16px, 1.8vw, 20px);
}
.dt-quote-before {
color: var(--dt-ink-soft);
font-style: italic;
}
.dt-quote-arrow {
color: #93c5fd;
}
.dt-quote-after {
color: #1e3a8a;
font-style: italic;
}
.dt-stat-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 1040px;
margin: 0 auto 12vh;
padding: 34px 6px;
border-top: 1px solid var(--dt-line);
border-bottom: 1px solid var(--dt-line);
text-align: center;
}
.dt-stat-bar div {
display: flex;
flex-direction: column;
gap: 6px;
}
.dt-stat-bar b {
font-family: 'Fraunces', serif;
font-size: 22px;
color: #2563eb;
}
.dt-stat-bar span {
font-size: 12.5px;
color: var(--dt-ink-soft);
}
.dt-pilot-box {
text-align: center;
padding: 6vh 6vw;
border-radius: 20px;
background: #0f1b3d;
color: #fff;
}
.dt-pilot-box .dt-copy-kicker {
color: #93c5fd;
}
.dt-pilot-box h2 {
color: #fff;
}
.dt-pilot-list {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 26px;
margin: 0 0 26px;
font-size: 13.5px;
color: #cbd5f5;
}
.dt-pilot-list li::before {
content: '✓ ';
color: #93c5fd;
}
.dt-pilot-steps {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 13px;
color: #93c5fd;
margin-bottom: 30px;
}
.dt-pilot-steps span:nth-child(odd) {
color: #fff;
}
/* ---------- Feature hero (Plattform / Laserskanning) ---------- */
.dt-feature-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6vw;
align-items: center;
margin-bottom: 12vh;
}
/* The scan crossfade reads best big — give it noticeably more room than a
plain 1fr/1fr split so the transformation is easy to actually see. */
.dt-feature-hero-scan {
grid-template-columns: 0.5fr 1.5fr;
gap: 4vw;
}
.dt-feature-hero-copy p {
color: var(--dt-ink-soft);
font-size: 15px;
line-height: 1.75;
margin-bottom: 14px;
}
.dt-feature-hero-copy h3 {
font-size: clamp(20px, 2.4vw, 27px);
margin: 10px 0 16px;
}
.dt-feature-list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 18px;
}
.dt-feature-list li {
font-size: 14px;
color: var(--dt-ink-soft);
padding-left: 20px;
position: relative;
}
.dt-feature-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #2563eb;
}
.dt-mock-viewer {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--dt-line);
background: #0f1b3d;
box-shadow: 0 40px 70px -36px rgba(20, 20, 20, 0.25);
}
.dt-mock-viewer-shot {
display: block;
width: 100%;
height: auto;
aspect-ratio: 754 / 938;
object-fit: cover;
background: #0f1b3d;
}
.dt-mock-viewer-wrap {
display: flex;
flex-direction: column;
gap: 14px;
}
.dt-mock-flow {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 10px;
padding: 12px 16px;
border: 1px solid var(--dt-line);
border-radius: 12px;
background: var(--dt-paper-dim);
font-size: 12px;
color: var(--dt-ink-soft);
text-align: center;
}
.dt-mock-flow-arrow {
color: #93c5fd;
}
.dt-mock-room {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 20px;
background: #fff;
border-radius: 10px;
border: 1px solid var(--dt-line);
box-shadow: 0 20px 40px -20px rgba(20, 20, 20, 0.3);
}
/* Floats the room card on top of the real product screenshot, like a
tooltip pointing at what happens when you click a room in the app. */
.dt-mock-room-overlay {
position: absolute;
left: 20px;
bottom: 20px;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.5);
}
.dt-mock-room-name {
font-weight: 600;
font-size: 14px;
}
.dt-mock-room-meta {
font-size: 12px;
color: var(--dt-ink-soft);
}
.dt-mock-room-ok {
color: #15803d;
}
/* ---------- Feature grid / tiles ---------- */
/* Deliberately NOT a grid of white bordered/shadowed cards — that treatment
is the single most recognisable "generic AI SaaS landing page" cliché,
and with 6 items (Plattformen's FUNKTIONER block) it reads as a wall of
boxes rather than content. A plain numbered list instead: a hairline left
rule and a quiet counter (the same light-blue numeral treatment as the
section kickers' 01/02/03, via .dt-kicker-num) stand in for the card
chrome, so it reads as an editorial list rather than a tile grid — no
fill, no border-radius, no shadow, nothing to hover-lift. counter-reset
lives on the grid so numbering restarts per section instead of running
across the whole page. */
.dt-feature-grid,
.dt-tech-grid,
.dt-outcome-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 34px;
counter-reset: dt-feature-count;
}
.dt-feature-tile {
padding-left: 18px;
border-left: 2px solid var(--dt-line);
}
.dt-feature-tile::before {
counter-increment: dt-feature-count;
content: counter(dt-feature-count, decimal-leading-zero);
display: block;
font-size: 12px;
letter-spacing: 0.06em;
color: #93c5fd;
margin-bottom: 8px;
}
.dt-feature-tile h3 {
font-size: 15px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.dt-feature-tile p {
font-size: 13.5px;
color: var(--dt-ink-soft);
line-height: 1.6;
}
.dt-soon {
font-size: 10px;
letter-spacing: 0.04em;
font-weight: 600;
color: #2563eb;
background: #eff4ff;
padding: 3px 8px;
border-radius: 999px;
}
/* ---------- App teaser ---------- */
.dt-app-teaser {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6vw;
/* The phone mockup is much taller than this column's short copy block
(kicker + heading + a 3-item list + a one-line form) — center-aligning
the row, like .dt-feature-hero does for its own more evenly-matched
columns, left the text floating in the middle of a lot of empty space
above and below. Top-aligning keeps it pinned to the same line as the
phone instead. */
align-items: start;
}
.dt-notify-form {
display: flex;
gap: 10px;
margin-top: 22px;
max-width: 380px;
}
.dt-notify-input {
flex: 1;
padding: 12px 16px;
border-radius: 999px;
border: 1px solid var(--dt-line);
font-size: 13.5px;
font-family: inherit;
}
.dt-notify-input:focus {
outline: none;
border-color: #2563eb;
}
.dt-notify-fine {
margin-top: 12px;
font-size: 12.5px;
color: var(--dt-ink-soft);
}
.dt-mock-phone {
justify-self: center;
width: min(220px, 60vw);
aspect-ratio: 9 / 18.5;
border-radius: 34px;
background: #0f1b3d;
padding: 12px;
box-shadow: 0 40px 80px -30px rgba(20, 20, 20, 0.35);
}
.dt-mock-phone-screen {
height: 100%;
border-radius: 24px;
background: #eef3ff;
padding: 20px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.dt-mock-phone-bar {
height: 10px;
width: 60%;
border-radius: 999px;
background: #cddcfb;
}
.dt-mock-phone-card {
flex: 1;
border-radius: 14px;
background: #fff;
border: 1px solid #dbe6fc;
}
/* ---------- Laserskanning figure ---------- */
.dt-scan-figure {
margin: 0;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--dt-line);
background: #0f1b3d;
box-shadow: 0 40px 70px -36px rgba(20, 20, 20, 0.25);
}
.dt-scan-figure img {
display: block;
width: 100%;
height: auto;
}
/* Two-line pain-point -> solution caption, stacked in the same grid cell so
both lines share one box (sized to the taller of the two) instead of the
caption resizing as it switches — and crossfaded via `data-caption` on
the figure, kept in lockstep with the image crossfade by scan-crossfade.js. */
.dt-scan-figure figcaption.dt-scan-caption {
display: grid;
padding: 14px 18px;
font-size: 12.5px;
line-height: 1.5;
background: #0f1b3d;
}
.dt-scan-caption-before,
.dt-scan-caption-after {
grid-area: 1 / 1;
transition: opacity 1.4s ease;
}
.dt-scan-caption-before {
color: #93c5fd;
opacity: 1;
}
.dt-scan-caption-after {
color: #bcd4f7;
opacity: 0;
}
.dt-scan-figure[data-caption='after'] .dt-scan-caption-before {
opacity: 0;
}
.dt-scan-figure[data-caption='after'] .dt-scan-caption-after {
opacity: 1;
}
/* Crossfade: "before" sets the box's natural height/aspect ratio; "after"
is stacked exactly on top and fades in/out over it via opacity, so only
the building itself appears to morph. */
.dt-scan-crossfade {
position: relative;
}
.dt-scan-crossfade-after {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.4s ease;
}
/* ---------- Service cards (Tjänster) ---------- */
.dt-service-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 12vh;
}
.dt-service-card {
position: relative;
padding: 28px 24px;
border: 1px solid var(--dt-line);
border-radius: 16px;
background: #fff;
display: flex;
flex-direction: column;
gap: 14px;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.dt-service-card-cta {
margin-top: auto;
padding-top: 6px;
font-size: 13px;
font-weight: 600;
color: #2563eb;
}
.dt-service-card h3 {
font-size: 16px;
}
.dt-service-card p {
font-size: 13.5px;
color: var(--dt-ink-soft);
line-height: 1.6;
}
.dt-service-quote {
font-family: 'Fraunces', serif;
font-style: italic;
color: var(--dt-ink-soft) !important;
}
.dt-service-card ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.dt-service-card li {
font-size: 13px;
color: var(--dt-ink-soft);
padding-left: 18px;
position: relative;
}
.dt-service-card li::before {
content: '✓';
position: absolute;
left: 0;
color: #2563eb;
}
.dt-service-featured {
background: #eff4ff;
border-color: #93c5fd;
transform: translateY(-6px);
}
/* ---------- Compare columns (Förr vs Nu) ---------- */
.dt-compare-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 940px;
margin: 0 auto 12vh;
}
.dt-compare-columns .dt-pain-col,
.dt-compare-columns .dt-solution-col {
padding: 32px 30px;
}
.dt-compare-columns li i {
font-style: normal;
opacity: 0.75;
}
.dt-scenario-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.dt-scenario-card {
padding: 24px 22px;
border: 1px solid var(--dt-line);
border-radius: 14px;
background: #fff;
}
.dt-scenario-card h3 {
font-size: 15px;
margin-bottom: 14px;
}
.dt-scenario-before,
.dt-scenario-after {
font-size: 13px;
line-height: 1.6;
margin-bottom: 6px;
}
.dt-scenario-before {
color: #b3392f;
}
.dt-scenario-after {
color: #15803d;
}
/* ---------- Om oss ---------- */
/* #landing-root prefix needed here too, for the same reason as
.dt-callout-lead above: it must outrank the ID-scoped paragraph reset. */
#landing-root .dt-mission {
max-width: 680px;
margin: 0 auto 20px;
text-align: center;
font-family: 'Fraunces', serif;
font-size: clamp(18px, 2.2vw, 23px);
line-height: 1.6;
color: var(--dt-ink);
}
.dt-faq {
max-width: 760px;
margin: 4vh auto 0;
text-align: center;
}
.dt-faq h2 {
font-size: clamp(22px, 2.8vw, 30px);
margin: 12px 0 30px;
}
.dt-faq-list {
text-align: left;
display: flex;
flex-direction: column;
gap: 10px;
}
.dt-faq-item {
border: 1px solid var(--dt-line);
border-radius: 12px;
padding: 16px 20px;
background: #fff;
}
.dt-faq-item summary {
cursor: pointer;
font-size: 14.5px;
font-weight: 500;
color: var(--dt-ink);
list-style: none;
}
.dt-faq-item summary::-webkit-details-marker {
display: none;
}
.dt-faq-item summary::after {
content: '+';
float: right;
color: #2563eb;
font-size: 16px;
}
.dt-faq-item[open] summary::after {
content: '–';
}
.dt-faq-item p {
margin-top: 12px;
font-size: 13.5px;
color: var(--dt-ink-soft);
line-height: 1.6;
}
/* ---------- Kontakt ---------- */
.dt-contact-layout {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 6vw;
align-items: start;
}
.dt-contact-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.dt-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.dt-form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.dt-form-field label {
font-size: 12.5px;
color: var(--dt-ink-soft);
}
.dt-form-field input,
.dt-form-field select,
.dt-form-field textarea {
padding: 11px 14px;
border-radius: 8px;
border: 1px solid var(--dt-line);
font-family: inherit;
font-size: 14px;
color: var(--dt-ink);
background: #fff;
}
.dt-form-field input:focus,
.dt-form-field select:focus,
.dt-form-field textarea:focus {
outline: none;
border-color: #2563eb;
}
.dt-form-field textarea {
resize: vertical;
}
.dt-contact-side {
display: flex;
flex-direction: column;
gap: 18px;
}
.dt-contact-info {
padding: 22px;
border: 1px solid var(--dt-line);
border-radius: 14px;
background: #fff;
}
.dt-contact-info p {
font-size: 14px;
color: var(--dt-ink-soft);
margin-bottom: 6px;
}
.dt-contact-info p:first-child {
color: var(--dt-ink);
}
.dt-trust-box {
padding: 22px;
border-radius: 14px;
background: #eff4ff;
border: 1px solid #cddcfb;
}
.dt-trust-box b {
display: block;
font-size: 14px;
color: #1e3a8a;
margin-bottom: 8px;
}
.dt-trust-box p {
font-size: 13px;
color: #3752a4;
line-height: 1.6;
}
.dt-contact-success {
text-align: center;
padding: 8vh 4vw;
}
.dt-contact-success h2 {
font-size: clamp(24px, 3vw, 32px);
margin-bottom: 12px;
}
.dt-contact-success p {
color: var(--dt-ink-soft);
}
/* ---------- Footer ---------- */
.dt-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
padding: 5vh 6vw;
border-top: 1px solid var(--dt-line);
background: var(--dt-paper-dim);
}
.dt-footer p {
font-size: 12.5px;
color: var(--dt-ink-soft);
}
.dt-footer a:not(.dt-nav-logo) {
font-size: 12.5px;
color: var(--dt-ink-soft);
text-decoration: none;
}
.dt-footer a:not(.dt-nav-logo):hover {
color: var(--dt-ink);
}
/* ---------- Pinned transform section ---------- */
.dt-transform-section {
position: relative;
z-index: 1;
width: 100%;
height: 100vh;
background: var(--dt-paper);
overflow: hidden;
}
.dt-transform-viewport {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, var(--dt-paper) 62%, var(--dt-paper-dim) 100%);
}
/* ---------- Phase 1 / 2 stage (old drawing -> clean 2D plan) ---------- */
.dt-stage-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
will-change: opacity, transform;
}
.dt-stage-frame {
position: relative;
width: min(70vw, 1180px);
aspect-ratio: 1491 / 1055;
background: #fff;
box-shadow:
0 60px 100px -40px rgba(20, 20, 20, 0.28),
0 8px 30px -12px rgba(20, 20, 20, 0.12);
}
.dt-stage-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.dt-stage-img-old {
z-index: 1;
}
.dt-stage-img-plan {
z-index: 2;
opacity: 0;
background: #fff;
}
.dt-stage-grid {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0;
background-image: linear-gradient(rgba(40, 100, 220, 0.55) 1px, transparent 1px),
linear-gradient(90deg, rgba(40, 100, 220, 0.55) 1px, transparent 1px);
background-size: 26px 26px;
mix-blend-mode: multiply;
}
.dt-stage-scanline {
position: absolute;
left: 0;
right: 0;
height: 3px;
z-index: 4;
opacity: 0;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(70, 150, 255, 0.95), transparent);
box-shadow: 0 0 20px 5px rgba(70, 150, 255, 0.55);
animation: dt-scanline-move 2.4s linear infinite;
}
@keyframes dt-scanline-move {
0% { top: -2%; }
100% { top: 102%; }
}
.dt-stage-vignette {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
box-shadow: inset 0 0 130px 46px rgba(70, 58, 32, 0.16);
}
.dt-stage-border {
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
border: 1px solid var(--dt-line);
}
/* ---------- Phase 3 / 4 canvas ---------- */
.dt-canvas-wrap {
position: absolute;
inset: 0;
will-change: opacity;
}
.dt-canvas-bottom-scrim {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 32vh;
pointer-events: none;
background: linear-gradient(to top, var(--dt-paper) 0%, rgba(251, 251, 249, 0.75) 35%, transparent 100%);
}
/* Fades in once the building is fully revealed and dragging is live, and
fades back out for good the first time a visitor actually drags — it has
done its job. Purely decorative, so it never intercepts the drag itself. */
.dt-orbit-hint {
position: absolute;
left: 50%;
bottom: 16vh;
transform: translateX(-50%);
padding: 8px 16px;
border-radius: 999px;
background: rgba(22, 24, 28, 0.72);
color: #fff;
font-size: 12.5px;
letter-spacing: 0.02em;
white-space: nowrap;
pointer-events: none;
z-index: 18;
opacity: 0;
transition: opacity 0.4s ease;
}
/* ---------- Copy overlays ---------- */
.dt-copy-block {
position: absolute;
z-index: 10;
opacity: 0;
will-change: opacity, transform;
}
.dt-copy-block-left {
left: 6vw;
top: 50%;
transform: translateY(-50%);
max-width: 360px;
text-align: left;
}
.dt-copy-block-center {
left: 50%;
bottom: 9vh;
transform: translate(-50%, 0);
max-width: 560px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.dt-copy-kicker {
display: block;
font-size: 12px;
letter-spacing: 0.2em;
color: var(--dt-ink-soft);
margin-bottom: 12px;
}
.dt-copy-body {
font-family: 'Fraunces', 'Inter', serif;
font-size: clamp(19px, 2vw, 26px);
line-height: 1.5;
color: var(--dt-ink);
}
/* ---------- Progress rail ---------- */
.dt-progress-rail {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--dt-line);
z-index: 20;
}
.dt-progress-fill {
position: absolute;
inset: 0;
background: var(--dt-ink);
transform-origin: left center;
transform: scaleX(0);
}
/* ---------- Scroll hint ---------- */
.dt-scroll-hint {
position: absolute;
left: 50%;
bottom: 6vh;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 15;
color: var(--dt-ink-soft);
font-size: 11px;
letter-spacing: 0.24em;
pointer-events: none;
}
.dt-scroll-hint-line {
width: 1px;
height: 36px;
background: var(--dt-ink-soft);
animation: dt-hint-pulse 1.8s ease-in-out infinite;
}
@keyframes dt-hint-pulse {
0%, 100% { opacity: 0.25; }
50% { opacity: 1; }
}
/* ---------- Reduced-motion fallback ---------- */
.dt-reduced-motion-section {
display: flex;
flex-direction: column;
}
.dt-reduced-motion-step {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
padding: 8vh 6vw;
background: var(--dt-paper);
}
.dt-reduced-motion-step img {
max-width: min(82vw, 900px);
width: 100%;
height: auto;
background: #fff;
box-shadow: 0 40px 70px -32px rgba(20, 20, 20, 0.25);
}
.dt-reduced-motion-step figcaption {
text-align: center;
}
.dt-reduced-motion-step figcaption p {
font-family: 'Fraunces', 'Inter', serif;
font-size: clamp(20px, 2.4vw, 28px);
margin-top: 6px;
color: var(--dt-ink);
}
/* ---------- Softer cards + refined hover motion ---------- */
/* A lighter, shadow-led card treatment layered on top of the per-class
* rules above (background/tint colors declared earlier are untouched) —
* plus a consistent, smoother easing curve on hover across the whole page
* instead of each element inventing its own. #landing-root gives these
* enough specificity to win without having to reorder anything above. */
#landing-root .dt-step-card,
#landing-root .dt-segment-card,
#landing-root .dt-service-card,
#landing-root .dt-scenario-card,
#landing-root .dt-faq-item,
#landing-root .dt-mock-viewer {
box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 16px 32px -22px rgba(20, 20, 20, 0.14);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.35s ease;
}
#landing-root .dt-step-card:hover,
#landing-root .dt-segment-card:hover,
#landing-root .dt-service-card:hover,
#landing-root .dt-scenario-card:hover,
#landing-root .dt-faq-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(20, 20, 20, 0.05), 0 26px 48px -22px rgba(20, 20, 20, 0.18);
}
/* .dt-feature-tile now reads as an editorial numbered list (see its own
rule above), not a card — its own hover still gets a quiet cue, just not
the lift+shadow treatment shared by the actual cards above. */
#landing-root .dt-feature-tile {
transition: border-color 0.25s ease;
}
#landing-root .dt-feature-tile:hover {
border-left-color: #2563eb;
}
#landing-root .dt-cta-btn {
transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#landing-root .dt-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px -12px rgba(37, 99, 235, 0.4);
}
#landing-root .dt-cta-btn-ghost:hover {
box-shadow: none;
}
/* Nav links get a soft sliding underline instead of just a color swap. */
.dt-nav-link {
position: relative;
}
.dt-nav-link::after {
content: '';
position: absolute;
left: 0;
right: 100%;
bottom: -4px;
height: 1px;
background: #2563eb;
transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dt-nav-link:hover::after {
right: 0;
}
/* The page you're currently on gets the same underline treatment as hover,
permanently on — a quiet "you are here" instead of inviting a click to
navigate to the page already showing. */
.dt-nav-link-active {
color: var(--dt-ink);
}
.dt-nav-link-active::after {
right: 0;
}
/* Faint numeral prefix on each section's kicker — a quiet "you are here,
* N of N" cue that also just looks considered rather than accidental. */
.dt-kicker-num {
color: #93c5fd;
margin-right: 8px;
}
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.dt-stage-frame {
width: 92vw;
}
.dt-copy-block-left {
left: 6vw;
right: 6vw;
top: 9%;
transform: none;
max-width: none;
text-align: left;
}
.dt-copy-block-center {
left: 50%;
bottom: 6vh;
max-width: 88vw;
}
.dt-copy-body {
font-size: 18px;
}
.dt-scroll-hint {
bottom: 4vh;
}
.dt-outro-features {
grid-template-columns: 1fr;
}
.dt-nav {
gap: 14px;
padding: 12px 5vw;
}
.dt-nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 2px;
background: var(--dt-paper);
border-bottom: 1px solid var(--dt-line);
padding: 10px 5vw 16px;
display: none;
}
.dt-nav.dt-nav-open .dt-nav-links {
display: flex;
}
.dt-nav-link {
padding: 8px 0;
}
.dt-nav-actions .dt-nav-demo {
display: none;
}
.dt-nav-actions .dt-nav-download {
display: none;
}
.dt-nav-download-mobile {
display: block;
color: var(--dt-ink);
font-weight: 600;
border-bottom: 1px solid var(--dt-line);
padding-bottom: 12px;
margin-bottom: 4px;
}
.dt-nav-burger {
display: flex;
}
.dt-hero-ctas {
flex-direction: column;
width: 100%;
}
.dt-hero-ctas .dt-cta-btn {
width: 100%;
text-align: center;
}
.dt-hero-banner {
flex-direction: column;
text-align: center;
gap: 4px;
}
.dt-section {
padding: 9vh 6vw;
}
.dt-pain-solution,
.dt-compare-columns,
.dt-feature-hero,
.dt-app-teaser,
.dt-contact-layout {
grid-template-columns: 1fr;
}
.dt-app-teaser .dt-mock-phone {
order: -1;
margin-bottom: 20px;
}
.dt-steps-3,
.dt-steps-4,
.dt-segments-grid,
.dt-feature-grid,
.dt-tech-grid,
.dt-outcome-grid,
.dt-service-cards,
.dt-scenario-grid {
grid-template-columns: 1fr;
}
.dt-service-featured {
transform: none;
}
.dt-stat-bar {
grid-template-columns: repeat(2, 1fr);
gap: 24px 16px;
}
.dt-form-row {
grid-template-columns: 1fr;
}
}