/* ---------------------------------------------------------------------------
* 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;
padding: 8px 4px;
}
.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;
}
.dt-nav-burger {
display: none;
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: block;
}
.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;
}
}