/* ============================================================
ServiceBuddy — Design System (refined)
Archetype: SaaS / Product · Premium · HIGH complexity
Type: Instrument Sans (display) + Inter (body) + JetBrains Mono (UI)
Color: Ink #0A0A14 · Brand Teal #00B2CC · Mint #00E5A0 · Cream #FAFAF7
Structural: Deep Teal #2C4750 · Copper #A85D3B (mascot palette)
============================================================ */
/* -------- Tokens -------- */
:root {
--ink: #0A0A14;
--ink-2: #14141F;
--ink-3: #1E1E2C;
--ink-soft: #353542;
--violet: #00B2CC; /* brand teal — "Buddy" accent, all interactive */
--violet-2: #33C2D4;
--violet-3: #80DCEA;
--violet-glow: rgba(0, 178, 204, 0.28);
--mint: #00E5A0;
--mint-2: #62F0BC;
--mint-glow: rgba(0, 229, 160, 0.30);
--teal: #2C4750; /* mascot body */
--teal-bright: #00B2CC; /* brand accent — bridges mascot palette to UI */
--copper: #A85D3B; /* mascot trim */
--cream: #FAFAF7;
--cream-2: #F4F2EC;
--cream-3: #E8E6DD;
--line: #E8E6DD;
--line-strong: #D6D3C7;
--muted: #6B6B76;
--muted-2: #8B8B95;
--on-dark-muted: #9794B5;
--primary: var(--violet);
--accent: var(--mint);
--f-display: 'Instrument Sans', 'Inter', system-ui, -apple-system, sans-serif;
--f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--f-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
--container: 1240px;
--gutter: clamp(20px, 4vw, 40px);
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--shadow-card: 0 1px 2px rgba(10,10,20,.04), 0 6px 18px rgba(10,10,20,.06);
--shadow-float: 0 12px 30px rgba(10,10,20,.12), 0 2px 4px rgba(10,10,20,.04);
--shadow-violet: 0 18px 40px rgba(0,178,204,.18);
--shadow-mint: 0 18px 40px rgba(0,229,160,.22);
--shadow-stage: 0 40px 90px rgba(10,10,20,.22), 0 4px 12px rgba(10,10,20,.06), inset 0 0 0 1px rgba(255,255,255,.6);
/* Panel surfaces — cinematic cream gradient with subtle violet/mint mood */
--panel-grad: radial-gradient(120% 100% at 50% 0%, #FBFAF5, #EDEAE0 78%, #E2DFD3);
--panel-grad-warm: radial-gradient(120% 100% at 30% 10%, #FBF8F1, rgba(232,230,221,.95) 70%, #DFDDD0);
}
/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
margin: 0;
font-family: var(--f-body);
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
/* -------- Layout -------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--gutter);
}
section { position: relative; }
.eyebrow {
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 4px rgba(0,229,160,.18);
}
h1, h2, h3, h4 {
font-family: var(--f-display);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0 0 .4em;
color: var(--ink);
}
h1 { font-size: clamp(40px, 6.5vw, 76px); letter-spacing: -0.035em; line-height: 1; }
h2 { font-size: clamp(30px, 4.2vw, 48px); letter-spacing: -0.025em; line-height: 1.05; }
h3 { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.015em; }
p { margin: 0 0 1em; color: var(--ink-soft); }
.lead { font-size: clamp(16px, 1.3vw, 19px); color: var(--muted); max-width: 56ch; }
/* -------- Buttons -------- */
.btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border-radius: 999px;
font-weight: 500;
font-size: 15px;
letter-spacing: -0.005em;
transition: transform .25s ease, background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
white-space: nowrap;
min-height: 48px;
isolation: isolate;
}
.btn-primary {
background: var(--ink);
color: var(--cream);
box-shadow: 0 8px 18px rgba(10,10,20,.18);
}
.btn-primary::after {
content: '';
position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(135deg, var(--violet), var(--mint));
opacity: 0;
transition: opacity .25s ease;
z-index: -1;
}
.btn-primary:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 16px 32px rgba(0,178,204,.32); }
.btn-primary:hover::after { opacity: 1; }
.btn-ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-light {
background: rgba(255,255,255,.08);
color: var(--cream);
border: 1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.btn-light:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* -------- Header — modernized -------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(250,250,247,.78);
-webkit-backdrop-filter: saturate(180%) blur(18px);
backdrop-filter: saturate(180%) blur(18px);
border-bottom: 1px solid transparent;
transition: border-color .25s ease, background .25s ease;
}
.site-header.scrolled {
border-bottom-color: var(--line);
background: rgba(250,250,247,.92);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
padding-inline: var(--gutter);
max-width: var(--container);
margin: 0 auto;
gap: 24px;
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-display);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.02em;
flex-shrink: 0;
}
/* Brand mark — mascot avatar chip */
.brand-mark {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--panel-grad);
display: grid; place-items: center;
position: relative; overflow: hidden;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(10,10,20,.10), inset 0 0 0 1px rgba(255,255,255,.6);
transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.brand:hover .brand-mark { transform: rotate(-5deg) scale(1.06); }
.brand-mark img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 22%;
}
/* Wordmark — text-only, two-tone */
.brand-text { display: inline-flex; align-items: center; }
.brand-service { color: #1F2D3D; }
.brand-buddy { color: #2A9090; }
/* On dark backgrounds (footer, CTA bands) */
.brand-dark .brand-service { color: rgba(250,250,247,.92); }
.brand-dark .brand-buddy { color: #4EC4C4; }
.nav-links {
display: flex;
align-items: center;
gap: clamp(16px, 2.4vw, 32px);
margin: 0; padding: 0;
list-style: none;
}
.nav-links li { list-style: none; padding: 0; margin: 0; }
.nav-links li::before, .nav-links li::marker { content: none; display: none; }
.nav-links a {
position: relative;
font-size: 14.5px;
color: var(--ink-soft);
font-weight: 450;
padding: 8px 4px;
display: inline-block;
transition: color .2s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); }
.nav-cta { display: inline-flex; gap: 10px; align-items: center; flex-shrink: 0; }
.nav-cta .btn { padding: 10px 18px; min-height: 40px; font-size: 14px; }
/* Mobile-only CTA lives inside the slide-out panel — hidden on desktop */
.nav-links .mobile-cta { display: none; }
.nav-toggle {
display: none;
width: 44px; height: 44px;
align-items: center; justify-content: center;
border-radius: 12px;
border: 1px solid var(--line);
background: rgba(255,255,255,.5);
transition: border-color .2s ease, background .2s ease;
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle span { width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s ease; }
.nav-toggle span::before, .nav-toggle span::after {
content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
transition: transform .25s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
/* -------- Hero -------- */
.hero {
position: relative;
background: var(--ink);
color: var(--cream);
overflow: hidden;
isolation: isolate;
padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 7vw, 90px);
}
/* ===========================================================
Immersive cinematic hero image — fades into hero background
=========================================================== */
.hero-cinematic {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-cinematic img {
position: absolute;
top: 42%;
right: -8%;
transform: translateY(-50%);
width: clamp(720px, 74%, 1560px);
height: auto;
max-height: 120%;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
/* Soft horizontal fade — left edge dissolves into hero background */
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 8%, rgba(0,0,0,.55) 22%, #000 38%, #000 100%),
linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 8%, rgba(0,0,0,.55) 22%, #000 38%, #000 100%),
linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
mask-composite: intersect;
}
/* Tightening: layer two soft fade zones over the image so text-side is even darker */
.hero-cinematic::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, var(--ink) 0%, rgba(10,10,20,.85) 14%, rgba(10,10,20,.35) 28%, transparent 50%),
radial-gradient(60% 80% at 12% 50%, rgba(10,10,20,.75), transparent 55%);
pointer-events: none;
z-index: 2;
}
/* Subtle vignette on the right edge so image doesn't feel pasted to the viewport edge */
.hero-cinematic::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(40% 70% at 100% 50%, rgba(10,10,20,.55), transparent 70%),
linear-gradient(180deg, rgba(10,10,20,.45) 0%, transparent 18%, transparent 82%, rgba(10,10,20,.65) 100%);
pointer-events: none;
z-index: 3;
}
/* Lift content above cinematic bg */
.hero .container { position: relative; z-index: 4; }
.hero .ambient-dust { z-index: 1; }
/* Homepage hero is taller than inner-page heroes — offset top so robot head
aligns visually with the H1 start, matching the cinematic page heroes. */
.hero .hero-cinematic img { top: 36%; }
/* Immersive stage = empty placeholder column for grid balance */
.hero-stage-immersive {
min-height: clamp(380px, 50vw, 560px);
pointer-events: none;
}
/* -----------------------------------------------------------
Hero image — responsive composition tiers
Default rule (above) targets ≥1500px wide screens with strong
cinematic bleed. Below 1500px the laptop tiers below tighten
bleed and prioritize keeping the floating UI cards visible
inside the viewport instead of clipped at the right edge.
----------------------------------------------------------- */
/* TIER 2 — laptop standard (1024–1499px)
Reduce rightward bleed so right cards land safely inside viewport. */
@media (min-width: 981px) and (max-width: 1499px) {
.hero-cinematic img {
right: -3%;
width: clamp(720px, 70%, 1180px);
}
.hero-cinematic::before {
background:
linear-gradient(90deg, var(--ink) 0%, rgba(10,10,20,.85) 16%, rgba(10,10,20,.40) 30%, transparent 52%),
radial-gradient(60% 80% at 12% 50%, rgba(10,10,20,.75), transparent 55%);
}
}
/* TIER 3 — small laptop / tablet landscape (981–1279px)
Most conservative bleed so all card content is in the safe area. */
@media (min-width: 981px) and (max-width: 1279px) {
.hero-cinematic img {
right: -1%;
width: clamp(700px, 76%, 980px);
}
.hero-cinematic::before {
background:
linear-gradient(90deg, var(--ink) 0%, rgba(10,10,20,.90) 18%, rgba(10,10,20,.45) 33%, transparent 55%),
radial-gradient(55% 80% at 14% 50%, rgba(10,10,20,.80), transparent 58%);
}
}
/* TIER 1c — large laptop / small desktop (1500–1899px)
Continues the safe positioning from Tier 2 (1280–1499) upward.
Without this rule the default cinematic bleed at the top of the file
(right: -8%) re-engages at 1500px and clips floating cards on laptops. */
@media (min-width: 1500px) and (max-width: 1899px) {
.hero-cinematic img {
right: -3%;
width: clamp(900px, 70%, 1320px);
}
}
/* TIER 1b — wide desktop / ultra-wide (≥1900px)
Allow more cinematic bleed only when the viewport is wide enough
for the right cards to still land safely inside the visible canvas. */
@media (min-width: 1900px) {
.hero-cinematic img {
right: -5%;
width: clamp(1000px, 70%, 1480px);
}
}
/* ===========================================================
Page-hero cinematic variant — reuses .hero-cinematic system.
Used by losningar.html and any future inner page that needs
the same immersive responsive image treatment as the homepage.
=========================================================== */
.page-hero--cinematic {
padding-bottom: clamp(60px, 8vw, 100px);
}
.page-hero--cinematic .hero-cinematic { z-index: 0; }
.page-hero--cinematic .container { position: relative; z-index: 4; }
.page-hero--cinematic .page-hero-grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.page-hero-stage-immersive {
min-height: clamp(320px, 42vw, 480px);
pointer-events: none;
}
@media (max-width: 980px) {
.page-hero--cinematic .page-hero-grid { grid-template-columns: 1fr; }
.page-hero-stage-immersive { min-height: clamp(220px, 50vw, 360px); }
}
/* .page-hero--cinematic mobile: image stays as a full-height atmospheric background
at every breakpoint. The global ≤980px rule repositions .hero-cinematic to
inset:auto 0 0 0 for the homepage stacked-robot effect — these overrides cancel
that for the inner-page cinematic variant so the image never becomes a block
stacked below the hero text. */
@media (max-width: 980px) {
.page-hero--cinematic {
min-height: clamp(380px, 60vw, 520px);
}
.page-hero--cinematic .hero-cinematic {
position: absolute;
inset: 0;
height: auto;
}
.page-hero--cinematic .hero-cinematic img {
top: 0;
left: auto;
right: -5%;
width: clamp(460px, 110vw, 720px);
height: 100%;
object-fit: cover;
object-position: center right;
transform: none;
max-height: none;
}
.page-hero--cinematic .hero-cinematic::before {
background:
linear-gradient(90deg, var(--ink) 0%, rgba(10,10,20,.96) 38%, rgba(10,10,20,.78) 58%, rgba(10,10,20,.45) 78%, transparent 100%),
linear-gradient(180deg, rgba(10,10,20,.55) 0%, transparent 40%);
}
.page-hero--cinematic .hero-cinematic::after {
background:
linear-gradient(180deg, transparent 55%, rgba(10,10,20,.70) 100%);
}
.page-hero--cinematic .page-hero-stage-immersive {
display: none;
min-height: 0;
}
}
@media (max-width: 430px) {
.page-hero--cinematic .hero-cinematic img {
right: -20%;
width: 150vw;
object-position: 70% center;
}
.page-hero--cinematic .hero-cinematic::before {
background:
linear-gradient(90deg, var(--ink) 0%, rgba(10,10,20,.98) 48%, rgba(10,10,20,.85) 68%, rgba(10,10,20,.55) 85%, transparent 100%),
linear-gradient(180deg, rgba(10,10,20,.65) 0%, transparent 35%);
}
}
/* ===========================================================
Glassmorphism industry bar — sits in its own strip below the hero.
=========================================================== */
.solutions-industry-strip {
background: var(--ink);
padding: 0 0 clamp(40px, 6vw, 80px);
}
.industry-bar-wrap {
position: relative;
z-index: 5;
margin-top: 0;
pointer-events: none;
}
.industry-bar {
pointer-events: auto;
max-width: 1320px;
margin: 0 auto;
padding: 28px clamp(20px, 3vw, 36px);
border-radius: 28px;
position: relative;
isolation: isolate;
background:
linear-gradient(180deg, rgba(20,20,32,.72), rgba(10,10,20,.78));
backdrop-filter: blur(22px) saturate(140%);
-webkit-backdrop-filter: blur(22px) saturate(140%);
border: 1px solid rgba(255,255,255,.08);
box-shadow:
0 30px 80px rgba(0,0,0,.55),
0 1px 0 rgba(255,255,255,.05) inset,
0 -1px 0 rgba(0,0,0,.30) inset;
}
.industry-bar::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(60% 80% at 0% 0%, rgba(0,178,204,.10), transparent 55%),
radial-gradient(60% 80% at 100% 100%, rgba(0,229,160,.07), transparent 55%);
z-index: -1;
}
.industry-bar-label {
display: block;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: #B0AECF;
margin-bottom: 18px;
position: relative;
padding-left: 28px;
}
.industry-bar-label::before {
content: '';
position: absolute;
left: 0; top: 50%;
width: 18px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(176,174,207,.6));
transform: translateY(-50%);
}
.industry-bar-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.industry-bar-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 14px;
padding: 18px 12px;
border-radius: 16px;
position: relative;
cursor: default;
transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, color .25s ease;
}
.industry-bar-item:not(:last-child)::after {
content: '';
position: absolute;
right: -3px; top: 28%; bottom: 28%;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,.10), transparent);
pointer-events: none;
}
.industry-bar-item:hover {
transform: translateY(-3px);
background: linear-gradient(180deg, rgba(0,178,204,.10), rgba(110,91,255,.04));
color: var(--cream);
}
.industry-bar-item:hover .ib-icon {
color: var(--mint);
box-shadow:
0 0 0 1px rgba(0,229,160,.20) inset,
0 0 18px rgba(0,229,160,.20);
}
.ib-icon {
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
border: 1px solid rgba(255,255,255,.08);
color: var(--teal-bright);
transition: color .25s ease, box-shadow .25s ease, background .25s ease;
}
.ib-icon svg {
width: 22px; height: 22px;
}
.ib-label {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: #C9C7E0;
line-height: 1.4;
white-space: nowrap;
}
/* Tablet — wrap to 4 cols (2 rows) */
@media (max-width: 1100px) {
.industry-bar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.industry-bar-item:nth-child(4)::after { display: none; }
.industry-bar-item:nth-child(8)::after { display: none; }
}
/* Smaller tablet — 3 cols */
@media (max-width: 820px) {
.industry-bar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.industry-bar-item::after { display: none; }
}
/* Mobile — horizontal scroll strip */
@media (max-width: 600px) {
.industry-bar { padding: 20px 18px 22px; border-radius: 22px; }
.industry-bar-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
gap: 8px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
margin: 0 -4px;
}
.industry-bar-grid::-webkit-scrollbar { display: none; }
.industry-bar-grid { scrollbar-width: none; }
.industry-bar-item {
flex: 0 0 auto;
min-width: 96px;
scroll-snap-align: start;
padding: 14px 10px;
}
.industry-bar-item::after { display: none; }
}
.hero::before {
content: '';
position: absolute; inset: -10% -5% auto -5%;
height: 75%;
background:
radial-gradient(60% 70% at 18% 30%, rgba(0,178,204,.22), transparent 60%),
radial-gradient(45% 60% at 82% 20%, rgba(0,229,160,.18), transparent 65%);
filter: blur(2px);
z-index: -1;
}
.hero::after {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000, transparent 75%);
mask-image: radial-gradient(80% 60% at 50% 30%, #000, transparent 75%);
z-index: -1;
opacity: .6;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(36px, 5vw, 64px);
align-items: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px 7px 8px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: 999px;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #C9C7E0;
margin-bottom: 28px;
}
.hero-badge .pill {
background: linear-gradient(135deg, var(--violet), var(--mint));
color: var(--ink);
padding: 3px 9px;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.06em;
}
.hero h1 { color: var(--cream); }
.hero h1 .grad {
background: linear-gradient(135deg, var(--violet-2) 10%, var(--mint) 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.hero-sub {
font-size: clamp(16px, 1.35vw, 19px);
color: #C9C7E0;
margin: 22px 0 32px;
max-width: 50ch;
line-height: 1.55;
}
.hero-cta {
display: flex; gap: 12px; flex-wrap: wrap;
margin-bottom: 32px;
}
.hero-cta .btn-primary {
background: var(--cream); color: var(--ink);
}
.hero-cta .btn-primary:hover { color: var(--ink); }
/* Hero meta — icon row (replaces dash separators) */
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: #B0AECF;
}
.hero-meta .meta-item {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 4px 0;
}
.hero-meta .meta-icon {
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(0,229,160,.12);
display: grid; place-items: center;
color: var(--mint);
flex-shrink: 0;
position: relative;
box-shadow: inset 0 0 0 1px rgba(0,229,160,.24), 0 0 12px rgba(0,229,160,.1);
}
.hero-meta .meta-item:nth-child(2) .meta-icon {
background: rgba(0,188,214,.16);
color: var(--violet-2);
box-shadow: inset 0 0 0 1px rgba(0,188,214,.28), 0 0 12px rgba(0,178,204,.12);
}
.hero-meta .meta-item:nth-child(3) .meta-icon {
background: rgba(0,229,160,.10);
color: var(--mint);
}
.hero-meta .meta-icon svg { width: 12px; height: 12px; stroke-width: 2; }
.hero-meta .meta-icon::after {
content: '';
position: absolute; inset: -2px;
border-radius: 50%;
background: inherit;
filter: blur(8px);
opacity: .35;
z-index: -1;
}
/* -------- Mascot stage (hero) -------- */
.hero-stage {
position: relative;
min-height: 460px;
display: grid;
place-items: center;
}
.mascot-stage {
position: relative;
width: 100%;
max-width: 540px;
margin-inline: auto;
}
.mascot-panel {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background: radial-gradient(70% 60% at 50% 0%, #1A1A2A 0%, #10101C 60%, #08080F 100%);
box-shadow: var(--shadow-stage);
isolation: isolate;
aspect-ratio: 1 / 1;
}
.mascot-panel::before {
content: '';
position: absolute; inset: -1px;
background:
radial-gradient(50% 40% at 50% 110%, rgba(0,178,204,.10), transparent 70%),
radial-gradient(40% 30% at 80% 0%, rgba(0,229,160,.08), transparent 70%);
pointer-events: none;
z-index: 0;
}
.mascot-panel::after {
/* Subtle floor reflection so mascot feels grounded */
content: '';
position: absolute;
left: 12%; right: 12%;
bottom: 0; height: 18%;
background: radial-gradient(60% 100% at 50% 100%, rgba(10,10,20,.10), transparent 80%);
pointer-events: none;
z-index: 0;
}
.mascot-img {
display: block;
user-select: none;
-webkit-user-drag: none;
}
.mascot-stage .mascot-img {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center 20%;
}
.mascot-corner-tag {
position: absolute;
top: 18px; left: 18px;
background: rgba(10,10,20,.85);
color: var(--cream);
border-radius: 999px;
padding: 7px 13px 7px 9px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
z-index: 3;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.mascot-corner-tag .dot {
width: 7px; height: 7px;
background: var(--mint);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,229,160,.18);
animation: livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse {
0%,100% { box-shadow: 0 0 0 4px rgba(0,229,160,.18); }
50% { box-shadow: 0 0 0 10px rgba(0,229,160,0); }
}
/* Float cards anchored to mascot panel */
.float-card {
position: absolute;
background: var(--cream);
color: var(--ink);
border-radius: 14px;
padding: 12px 16px;
box-shadow: 0 22px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.6);
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
z-index: 4;
}
.float-card .fc-mark {
width: 36px; height: 36px;
border-radius: 10px;
display: grid; place-items: center;
background: var(--ink); color: var(--cream);
flex-shrink: 0;
}
.float-card .fc-mark.is-mint { background: var(--mint); color: var(--ink); }
.float-card .fc-mark.is-violet { background: var(--violet); color: var(--cream); }
.float-card .fc-text strong { display: block; font-weight: 600; font-size: 13.5px; }
.float-card .fc-text span { color: var(--muted); font-size: 11.5px; font-family: var(--f-mono); }
.mascot-stage .float-1 { top: 10%; left: -10%; animation: floatA 6s ease-in-out infinite; }
.mascot-stage .float-2 { bottom: 14%; right: -10%; animation: floatB 7s ease-in-out infinite; }
.mascot-stage .float-3 {
bottom: -4%; left: 12%;
background: var(--ink);
color: var(--cream);
animation: floatC 8s ease-in-out infinite;
box-shadow: 0 22px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
.mascot-stage .float-3 .fc-text span { color: rgba(255,255,255,.65); }
@keyframes floatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes floatC { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(-2deg); } }
/* -------- Sections -------- */
.sec { padding: clamp(72px, 10vw, 130px) 0; }
.sec-head {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 60px);
align-items: end;
margin-bottom: clamp(40px, 6vw, 70px);
}
.sec-head .lead { margin: 0; }
/* -------- Product showcase -------- */
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature {
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 24px 24px 22px;
display: flex;
flex-direction: column;
gap: 18px;
transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.feature:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
border-color: var(--line-strong);
}
.feature h3 { margin: 0; }
.feature p { margin: 0; font-size: 14.5px; color: var(--muted); }
.feature-cta {
margin-top: auto;
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.feature-cta::after { content: '→'; transition: transform .2s ease; }
.feature:hover .feature-cta::after { transform: translateX(4px); }
/* Feature mascot panel (homepage cards) */
.feature-mascot {
position: relative;
aspect-ratio: 5 / 4;
background: radial-gradient(70% 60% at 50% 0%, #1A1A2A 0%, #10101C 60%, #08080F 100%);
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;
}
.feature-mascot::after {
content: '';
position: absolute;
left: 12%; right: 12%; bottom: 0; height: 16%;
background: radial-gradient(60% 100% at 50% 100%, rgba(10,10,20,.08), transparent 80%);
z-index: 0;
}
.feature-mascot img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 10%;
z-index: 1;
}
.feature-mascot .pill {
position: absolute;
top: 14px; left: 14px;
background: rgba(10,10,20,.85);
color: var(--cream);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 2;
}
.feature-mascot .pill.is-mint { background: var(--mint); color: var(--ink); }
.feature-mascot .pill.is-violet { background: var(--violet); color: var(--cream); }
/* Mini-mock (kept for ekonomi card on funktioner page) */
.feature-visual {
aspect-ratio: 5 / 3;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(160deg, #14141F, #1E1E2C);
position: relative;
border: 1px solid rgba(255,255,255,.04);
}
.mini-mock {
position: absolute; inset: 0;
padding: 14px;
display: grid;
gap: 8px;
font-family: var(--f-mono);
font-size: 10.5px;
color: #B0AECF;
}
.mini-mock .line {
background: rgba(255,255,255,.06);
border-radius: 6px;
height: 14px;
position: relative;
overflow: hidden;
}
.mini-mock .line::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(0,178,204,.4) 50%, transparent);
animation: shimmer 3s infinite;
}
.mini-mock .line.short { width: 60%; }
.mini-mock .line.tall { height: 22px; background: linear-gradient(90deg, rgba(0,178,204,.3), rgba(0,229,160,.18)); }
.mini-mock .line.tag { width: 40%; height: 10px; background: rgba(0,229,160,.18); }
.mini-mock .pill {
align-self: start;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255,255,255,.06);
font-size: 9.5px;
letter-spacing: 0.08em;
color: #C9C7E0;
text-transform: uppercase;
border: 1px solid rgba(255,255,255,.06);
}
.mini-mock .pill.is-mint { background: rgba(0,229,160,.16); color: var(--mint); }
.mini-mock .pill.is-violet { background: rgba(0,178,204,.18); color: var(--violet-3); }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* -------- Solutions tab switcher -------- */
.solutions {
background: var(--ink);
color: var(--cream);
border-radius: var(--radius-xl);
padding: clamp(36px, 6vw, 64px);
position: relative;
overflow: hidden;
}
.solutions::before {
content: '';
position: absolute; inset: -20%;
background: radial-gradient(40% 40% at 80% 20%, rgba(0,229,160,.18), transparent 70%);
pointer-events: none;
}
.solutions h2 { color: var(--cream); }
.solutions .lead { color: #C9C7E0; }
.solutions .eyebrow { color: var(--mint); }
.solutions .eyebrow::before { background: var(--mint); }
.sol-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 36px 0 28px;
padding: 6px;
background: rgba(255,255,255,.04);
border-radius: 14px;
border: 1px solid rgba(255,255,255,.06);
width: fit-content;
}
.sol-tab {
padding: 11px 18px;
border-radius: 10px;
font-size: 14px;
color: #C9C7E0;
font-family: var(--f-body);
font-weight: 500;
transition: background .25s ease, color .25s ease;
}
.sol-tab:hover { color: var(--cream); }
.sol-tab.is-active { background: var(--cream); color: var(--ink); }
.sol-panel {
display: none;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
animation: fadeUp .4s ease both;
}
.sol-panel.is-active { display: grid; }
.sol-panel h3 { color: var(--cream); font-size: clamp(22px, 2.4vw, 30px); }
.sol-panel p { color: #C9C7E0; font-size: 15.5px; }
.sol-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.sol-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14.5px; color: #DAD8F0;
}
.sol-list li::before {
content: '';
width: 16px; height: 16px;
border-radius: 50%;
background: linear-gradient(135deg, var(--violet), var(--mint));
flex-shrink: 0;
margin-top: 4px;
}
.sol-visual {
aspect-ratio: 4 / 3;
border-radius: 18px;
background: linear-gradient(160deg, #1E1E2C, #14141F);
border: 1px solid rgba(255,255,255,.06);
position: relative;
overflow: hidden;
}
.sol-mascot {
aspect-ratio: 4 / 3;
border-radius: 18px;
background: radial-gradient(70% 60% at 50% 0%, #1A1A2A 0%, #10101C 60%, #08080F 100%);
overflow: hidden;
position: relative;
isolation: isolate;
box-shadow: 0 28px 60px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.5);
}
.sol-mascot::after {
content: '';
position: absolute;
left: 12%; right: 12%; bottom: 0; height: 16%;
background: radial-gradient(60% 100% at 50% 100%, rgba(10,10,20,.08), transparent 80%);
z-index: 0;
}
.sol-mascot img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 10%;
z-index: 1;
}
.sol-mascot .pill {
position: absolute;
top: 14px; left: 14px;
background: rgba(10,10,20,.88);
color: var(--cream);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
z-index: 2;
}
.sol-mascot .pill.is-mint { background: var(--mint); color: var(--ink); }
.sol-mascot .pill.is-violet { background: var(--violet); color: var(--cream); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* -------- Workflow / how it works -------- */
.workflow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(36px, 6vw, 80px);
align-items: center;
}
.steps { display: grid; gap: 18px; }
.step {
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
padding: 20px 22px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.step:hover { border-color: var(--ink); transform: translateX(4px); box-shadow: var(--shadow-card); }
.step-num {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--ink);
color: var(--cream);
display: grid; place-items: center;
font-family: var(--f-mono);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.02em;
}
.step.is-mint .step-num { background: var(--mint); color: var(--ink); }
.step.is-violet .step-num { background: var(--violet); color: var(--cream); }
.step-body h3 { font-size: 19px; margin-bottom: 6px; letter-spacing: -0.02em; }
.step-body p { margin: 0; font-size: 14.5px; color: var(--muted); }
/* Workflow mascot — cinematic, integrated, no edge clipping */
.workflow-mascot-img {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-xl);
background: radial-gradient(70% 60% at 50% 0%, #1A1A2A 0%, #10101C 60%, #08080F 100%);
overflow: hidden;
box-shadow: var(--shadow-stage);
isolation: isolate;
}
.workflow-mascot-img::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 30% 0%, rgba(0,178,204,.18), transparent 60%),
radial-gradient(50% 40% at 80% 100%, rgba(0,229,160,.18), transparent 70%);
z-index: 0;
}
.workflow-mascot-img::after {
/* Soft floor shadow to ground the mascot */
content: '';
position: absolute; left: 8%; right: 8%; bottom: 0; height: 22%;
background: radial-gradient(60% 100% at 50% 100%, rgba(10,10,20,.16), transparent 80%);
z-index: 0;
}
.workflow-mascot-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
z-index: 1;
}
.workflow-mascot-img .pill-set {
position: absolute;
top: 22px; left: 22px;
display: grid;
gap: 8px;
z-index: 2;
}
.workflow-mascot-img .pill-set .pill {
background: rgba(10,10,20,.88);
color: var(--cream);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.workflow-mascot-img .pill-set .pill .pulse-dot {
width: 6px; height: 6px;
background: var(--mint);
border-radius: 50%;
animation: livePulse 2.4s ease-in-out infinite;
}
/* -------- Metrics / proof -------- */
.metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 50px;
padding: 36px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.metric { border-right: 1px solid var(--line); padding-right: 24px; }
.metric:last-child { border-right: 0; }
.metric .num {
font-family: var(--f-display);
font-size: clamp(32px, 4vw, 44px);
font-weight: 600;
letter-spacing: -0.03em;
color: var(--ink);
line-height: 1;
margin-bottom: 6px;
background: linear-gradient(135deg, var(--violet), var(--mint));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.metric .label { font-size: 13.5px; color: var(--muted); }
/* Testimonial */
.testimonial {
background: var(--cream-2);
border-radius: var(--radius-xl);
padding: clamp(36px, 5vw, 60px);
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
border: 1px solid var(--line);
}
.testimonial blockquote {
margin: 0;
font-family: var(--f-display);
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink);
}
.testimonial blockquote::before {
content: '“';
font-size: 80px;
line-height: 0.6;
display: block;
color: var(--violet);
margin-bottom: 12px;
}
.testimonial-byline {
margin-top: 22px;
display: flex;
align-items: center;
gap: 14px;
font-size: 14px;
}
.testimonial-byline strong { display: block; }
.testimonial-byline span { color: var(--muted); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; }
.testimonial-stat {
background: var(--ink);
color: var(--cream);
border-radius: var(--radius-lg);
padding: 30px 28px;
text-align: left;
}
.testimonial-stat .num {
font-family: var(--f-display);
font-size: clamp(36px, 5vw, 56px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1;
background: linear-gradient(135deg, var(--violet-2), var(--mint));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 8px;
}
.testimonial-stat .lbl {
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #B0AECF;
}
/* -------- Pricing -------- */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
align-items: center;
}
.plan {
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px 28px;
display: flex;
flex-direction: column;
position: relative;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.plan.is-pop {
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
box-shadow: 0 28px 72px rgba(0,178,204,.24), 0 0 0 1px rgba(0,178,204,.12);
transform: scale(1.04);
z-index: 2;
}
.plan.is-pop:hover {
transform: scale(1.04) translateY(-3px);
box-shadow: 0 36px 90px rgba(0,178,204,.34), 0 0 0 1px rgba(0,178,204,.18);
}
.plan.is-pop p, .plan.is-pop .plan-feat li { color: #C9C7E0; }
.plan.is-pop h3 { color: var(--cream); }
.plan-tag {
position: absolute;
top: -14px;
left: 50%;
right: auto;
transform: translateX(-50%);
white-space: nowrap;
padding: 5px 14px;
border-radius: 999px;
background: var(--mint);
color: var(--ink);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
.plan-name {
font-family: var(--f-mono);
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
.plan.is-pop .plan-name { color: var(--mint); }
.plan h3 { font-size: 24px; margin-bottom: 14px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.plan-price .amount {
font-family: var(--f-display);
font-size: 44px;
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1;
}
.plan-price .per {
font-family: var(--f-mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
}
.plan.is-pop .plan-price .per { color: #B0AECF; }
.plan-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.plan-feat {
list-style: none; padding: 0; margin: 0 0 26px;
display: grid; gap: 9px;
font-size: 14px;
}
.plan-feat li { display: flex; align-items: flex-start; gap: 10px; }
.plan-feat li::before {
content: '';
width: 16px; height: 16px; border-radius: 50%;
background: var(--mint);
display: inline-block; flex-shrink: 0; margin-top: 3px;
-webkit-mask: url("data:image/svg+xml;utf8,") center/12px no-repeat;
mask: url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.plan .btn { margin-top: auto; justify-content: center; width: 100%; }
.plan.is-pop .btn-primary { background: var(--cream); color: var(--ink); }
.plan.is-pop .btn-primary:hover { color: var(--ink); }
/* -------- Billing toggle -------- */
.billing-toggle-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 44px;
}
.billing-toggle {
position: relative;
display: inline-flex;
background: rgba(10,10,20,.06);
border-radius: 999px;
padding: 4px;
box-shadow: inset 0 0 0 1px rgba(10,10,20,.08);
}
.btgl-indicator {
position: absolute;
top: 4px;
left: var(--btgl-x, 4px);
width: var(--btgl-w, 50%);
height: calc(100% - 8px);
background: var(--ink);
border-radius: 999px;
transition: left .22s cubic-bezier(.2,.8,.2,1), width .22s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
z-index: 0;
}
.btgl-opt {
position: relative;
z-index: 1;
background: none;
border: none;
padding: 9px 26px;
font-family: var(--f-body);
font-size: 14px;
font-weight: 500;
color: var(--muted);
border-radius: 999px;
cursor: pointer;
transition: color .18s ease;
white-space: nowrap;
line-height: 1;
-webkit-tap-highlight-color: transparent;
}
.btgl-opt.is-active { color: var(--cream); }
.btgl-opt:hover:not(.is-active) { color: var(--ink); }
.btgl-opt:focus-visible {
outline: 2px solid var(--violet);
outline-offset: 2px;
border-radius: 999px;
}
.billing-save-note {
font-family: var(--f-mono);
font-size: 11.5px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--violet);
margin: 0;
}
.plan-billing-period {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: .04em;
margin: 0 0 12px;
visibility: hidden;
line-height: 1.4;
}
.plan-billing-period.is-visible { visibility: visible; }
.plan.is-pop .plan-billing-period { color: #8A88B0; }
.pricing-footer-note {
text-align: center;
margin-top: 30px;
font-family: var(--f-mono);
font-size: 13px;
color: var(--muted);
letter-spacing: .04em;
}
/* -------- FAQ -------- */
.faq-list {
display: grid;
gap: 0;
border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
list-style: none;
cursor: pointer;
font-family: var(--f-display);
font-size: clamp(17px, 1.4vw, 20px);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
padding: 4px 0;
transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--line-strong);
display: grid; place-items: center;
font-family: var(--f-mono);
font-size: 18px;
flex-shrink: 0;
transition: transform .25s ease, background .2s ease, color .2s ease;
}
.faq-item[open] summary { color: var(--violet); }
.faq-item[open] summary::after {
content: '−';
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
transform: rotate(180deg);
}
.faq-item .faq-body { padding: 14px 0 4px; color: var(--muted); font-size: 15px; max-width: 70ch; }
/* -------- CTA band -------- */
.cta-band {
background: var(--ink);
color: var(--cream);
border-radius: var(--radius-xl);
padding: clamp(48px, 8vw, 90px);
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 40px;
align-items: stretch;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute; inset: -10%;
background:
radial-gradient(40% 60% at 90% 30%, rgba(0,229,160,.22), transparent 60%),
radial-gradient(45% 60% at 10% 70%, rgba(0,178,204,.30), transparent 65%);
pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--cream); }
.cta-band .lead { color: #C9C7E0; max-width: 50ch; }
.cta-band .btn-primary { background: var(--cream); color: var(--ink); }
.cta-band .btn-primary:hover { color: var(--ink); }
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
/* CTA mascot — full-height panel flush with card right edge */
.cta-mascot-img {
align-self: stretch;
justify-self: stretch;
position: relative;
/* Break out of the card's uniform padding on top, right, bottom */
margin-top: calc(-1 * clamp(48px, 8vw, 90px));
margin-right: calc(-1 * clamp(48px, 8vw, 90px));
margin-bottom: calc(-1 * clamp(48px, 8vw, 90px));
width: auto;
max-width: none;
aspect-ratio: unset;
/* Right corners match card radius; left side is straight — connected look */
border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
background: radial-gradient(70% 60% at 50% 0%, #1A1A2A 0%, #10101C 60%, #08080F 100%);
overflow: hidden;
isolation: isolate;
box-shadow: none;
}
.cta-mascot-img::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 40% at 50% 0%, rgba(0,178,204,.10), transparent 70%),
radial-gradient(40% 30% at 80% 100%, rgba(0,229,160,.10), transparent 70%);
z-index: 0;
}
.cta-mascot-img::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 65%, rgba(10,10,20,.45) 100%);
z-index: 2;
}
.cta-mascot-img img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 42%;
transform: scale(1.06);
transform-origin: center 45%;
z-index: 1;
will-change: transform;
}
/* -------- Footer -------- */
.site-footer {
background: var(--ink);
color: var(--cream);
padding: 80px 0 40px;
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
gap: 48px;
padding-bottom: 50px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand p { color: #B0AECF; font-size: 14px; max-width: 36ch; margin: 16px 0 24px; }
.footer-newsletter { display: flex; gap: 0; max-width: 340px; }
.footer-newsletter input {
flex: 1;
min-width: 0;
padding: 12px 14px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-right: none;
border-radius: 10px 0 0 10px;
color: var(--cream);
font-family: inherit;
font-size: 14px;
}
.footer-newsletter input::placeholder { color: #8B8B95; }
.footer-newsletter input:focus { outline: none; border-color: var(--violet); }
.footer-newsletter button {
padding: 0 16px;
background: var(--cream);
color: var(--ink);
border-radius: 0 10px 10px 0;
font-weight: 500;
font-size: 14px;
white-space: nowrap;
flex-shrink: 0;
transition: background .2s ease, color .2s ease;
}
.footer-newsletter button:hover { background: var(--mint); }
.footer-col h4,
.footer-col h3,
.footer-col .footer-col-h {
font-family: var(--f-mono);
font-size: 11.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #C9C7E0;
margin: 0 0 18px;
font-weight: 500;
}
/* Screen-reader-only heading utility — gives Lighthouse a semantic anchor without changing the visual layout */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Mobile performance — lighten heavy backdrop-filter blur on small screens */
@media (max-width: 640px) {
.industry-bar {
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
.marquee { will-change: auto; }
.marquee-track { animation-duration: 50s; }
}
/* Slightly stronger muted text contrast (preserves brand tone, fixes WCAG AA on tiny labels) */
.footer-col a { color: #DEDCEF; }
.trust-strip-eyebrow { color: #C9C7E0; }
.industry-bar-label { color: #C9C7E0; }
.marquee-item { color: #E2E0F2; }
.ib-label { color: #DAD8F0; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { font-size: 14px; color: #DAD8F0; transition: color .2s ease; }
.footer-col a:hover { color: var(--mint); }
.footer-bottom {
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
font-size: 13px;
color: #B0AECF;
font-family: var(--f-mono);
}
.footer-bottom .legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-credit {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
color: #B0AECF;
font-family: var(--f-body);
letter-spacing: 0;
}
.qrious-link {
text-decoration: none;
font-weight: 600;
color: inherit;
transition: color 0.2s ease;
}
.qrious-link:hover, .qrious-link:focus { text-decoration: none; color: var(--mint); }
/* -------- Page hero (interior pages) -------- */
.page-hero {
background: var(--ink);
color: var(--cream);
padding: clamp(80px, 11vw, 140px) 0 clamp(60px, 8vw, 100px);
position: relative;
overflow: hidden;
isolation: isolate;
}
.page-hero::before {
content: '';
position: absolute; inset: -10%;
background:
radial-gradient(50% 70% at 80% 20%, rgba(0,229,160,.18), transparent 65%),
radial-gradient(60% 60% at 10% 90%, rgba(0,178,204,.25), transparent 70%);
z-index: -1;
}
.page-hero h1 { color: var(--cream); max-width: 18ch; }
.page-hero h1 .grad {
background: linear-gradient(135deg, var(--violet-2) 10%, var(--mint) 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-hero .lead { color: #C9C7E0; max-width: 60ch; margin-top: 22px; }
.page-hero .eyebrow { color: var(--mint); margin-bottom: 22px; }
.page-hero .eyebrow::before { background: var(--mint); }
.page-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
}
.page-hero-mascot-img {
width: 100%;
max-width: 420px;
justify-self: center;
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-xl);
background: radial-gradient(70% 60% at 50% 0%, #1A1A2A 0%, #10101C 60%, #08080F 100%);
overflow: hidden;
isolation: isolate;
box-shadow: 0 30px 60px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.5);
}
.page-hero-mascot-img::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 30% 0%, rgba(0,178,204,.14), transparent 60%),
radial-gradient(50% 40% at 80% 100%, rgba(0,229,160,.14), transparent 70%);
z-index: 0;
}
.page-hero-mascot-img::after {
content: '';
position: absolute; left: 12%; right: 12%; bottom: 0; height: 18%;
background: radial-gradient(60% 100% at 50% 100%, rgba(10,10,20,.14), transparent 80%);
z-index: 0;
}
.page-hero-mascot-img img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 20%;
z-index: 1;
}
.page-hero-mascot-img .pill {
position: absolute;
top: 18px; left: 18px;
background: rgba(10,10,20,.85);
color: var(--cream);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: 999px;
z-index: 2;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* -------- Avatar (testimonial, FAQ helper) -------- */
.mascot-avatar {
width: 56px; height: 56px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--panel-grad);
box-shadow: 0 4px 12px rgba(10,10,20,.14), inset 0 0 0 2px rgba(255,255,255,.6);
}
.mascot-avatar img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 18%;
}
.faq-helper {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 18px 8px 8px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 13.5px;
color: var(--muted);
margin-top: 14px;
}
.faq-helper .mascot-avatar { width: 40px; height: 40px; }
.faq-helper strong { color: var(--ink); font-weight: 500; }
/* -------- Feature deep-dive (funktioner page) -------- */
.feature-deep {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
padding: 50px 0;
border-bottom: 1px solid var(--line);
}
.feature-deep:nth-child(even) { direction: rtl; }
.feature-deep:nth-child(even) > * { direction: ltr; }
.feature-deep-text .eyebrow { margin-bottom: 18px; }
.feature-deep-text h2 { font-size: clamp(26px, 3vw, 36px); }
.feature-deep-text ul {
list-style: none; padding: 0; margin: 18px 0 0;
display: grid; gap: 8px;
}
.feature-deep-text li {
display: flex; gap: 10px; align-items: flex-start;
font-size: 14.5px; color: var(--muted);
}
.feature-deep-text li::before {
content: '\2713';
color: var(--violet);
font-weight: 700;
font-family: var(--f-mono);
flex-shrink: 0;
}
.feature-deep-mascot {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
background: radial-gradient(70% 60% at 50% 0%, #1A1A2A 0%, #10101C 60%, #08080F 100%);
overflow: hidden;
isolation: isolate;
box-shadow: 0 24px 50px rgba(10,10,20,.18), inset 0 0 0 1px rgba(255,255,255,.6);
}
.feature-deep-mascot::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 30% 0%, rgba(0,178,204,.10), transparent 60%),
radial-gradient(40% 30% at 90% 100%, rgba(0,229,160,.10), transparent 70%);
z-index: 0;
}
.feature-deep-mascot::after {
content: '';
position: absolute; left: 10%; right: 10%; bottom: 0; height: 16%;
background: radial-gradient(60% 100% at 50% 100%, rgba(10,10,20,.10), transparent 80%);
z-index: 0;
}
.feature-deep-mascot img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 10%;
z-index: 1;
}
.feature-deep-mascot .pill {
position: absolute;
top: 16px; left: 16px;
background: rgba(10,10,20,.85);
color: var(--cream);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
z-index: 2;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.feature-deep-mascot .pill.is-mint { background: var(--mint); color: var(--ink); }
.feature-deep-mascot .pill.is-violet { background: var(--violet); color: var(--cream); }
.feature-deep-visual { aspect-ratio: 4 / 3; border-radius: 18px; background: linear-gradient(160deg, #14141F, #0A0A14); border: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; }
#historik .feature-deep-mascot img { object-position: center center; }
#team .feature-deep-mascot img { object-position: center 18%; }
/* -------- Industry grid -------- */
.industry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.industry-card {
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.industry-card:hover {
transform: translateY(-4px);
border-color: var(--ink);
box-shadow: var(--shadow-card);
}
.industry-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--violet), var(--mint));
display: grid; place-items: center;
color: var(--cream);
margin-bottom: 4px;
}
.industry-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.industry-card h3 { font-size: 19px; margin: 0; }
.industry-card p { font-size: 14px; color: var(--muted); margin: 0; }
.industry-card .tags {
margin-top: auto;
display: flex; gap: 6px; flex-wrap: wrap;
padding-top: 14px;
border-top: 1px dashed var(--line);
}
.industry-card .tag {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
background: var(--cream-2);
padding: 4px 9px;
border-radius: 999px;
}
/* -------- Reveal -------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* -------- Page-specific blocks -------- */
.prose { max-width: 70ch; margin: 0 auto; }
.prose p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 1.2em; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.5em; font-size: 20px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 70px); align-items: start; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.value-card:hover { border-color: rgba(168,93,59,.45); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.value-card .v-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--violet), var(--mint)); display: grid; place-items: center; color: var(--cream); margin-bottom: 16px; }
.value-card .v-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.value-card h3 { font-size: 19px; margin: 0 0 8px; }
.value-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
.contact-form { display: grid; gap: 16px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.contact-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
.contact-form input, .contact-form textarea, .contact-form select { font: inherit; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(0,178,204,.18); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .btn-primary { justify-self: start; }
.contact-channels { display: grid; gap: 18px; }
.channel-card { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 20px 22px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s ease, transform .2s ease; }
.channel-card:hover { border-color: rgba(168,93,59,.50); transform: translateX(2px); }
.channel-card .ch-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--ink); color: var(--cream); display: grid; place-items: center; }
.channel-card .ch-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.channel-card h3 { font-size: 17px; margin: 0 0 4px; letter-spacing: -0.015em; }
.channel-card p { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.channel-card .ch-link { font-family: var(--f-mono); font-size: 13px; color: var(--violet); }
.search-bar { display: flex; gap: 0; background: var(--cream); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 6px 6px 22px; max-width: 640px; margin: 24px 0 50px; transition: border-color .2s ease, box-shadow .2s ease; }
.search-bar:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(0,178,204,.16); }
.search-bar svg { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 2; align-self: center; }
.search-bar input { flex: 1; border: 0; background: transparent; padding: 14px 16px; font-size: 15px; color: var(--ink); outline: none; }
.search-bar input::placeholder { color: var(--muted); }
.search-bar button { padding: 12px 22px; background: var(--ink); color: var(--cream); border-radius: 999px; font-size: 14px; font-weight: 500; transition: background .2s ease; }
.search-bar button:hover { background: var(--violet); }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.help-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.help-card:hover { transform: translateY(-4px); border-color: rgba(168,93,59,.45); box-shadow: var(--shadow-card); }
.help-card .h-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--cream-2); color: var(--violet); display: grid; place-items: center; }
.help-card .h-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.help-card h3 { font-size: 17px; margin: 0; }
.help-card p { font-size: 13.5px; color: var(--muted); margin: 0; }
.help-card .h-meta { margin-top: auto; font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; padding-top: 10px; border-top: 1px dashed var(--line); }
.status-overall { display: flex; align-items: center; gap: 18px; padding: 26px 28px; background: linear-gradient(135deg, rgba(0,229,160,.16), rgba(0,229,160,.04)); border: 1px solid rgba(0,229,160,.30); border-radius: var(--radius-lg); margin-bottom: 36px; }
.status-overall .so-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(0,229,160,.20); animation: livePulse 2.4s ease-in-out infinite; }
.status-overall h2 { font-size: 22px; margin: 0; letter-spacing: -0.015em; }
.status-overall .so-meta { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-left: auto; letter-spacing: .04em; }
.status-list { display: grid; gap: 0; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.status-row { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.status-row:last-child { border-bottom: 0; }
.status-row .sr-name { font-weight: 500; font-size: 15px; }
.status-row .sr-bars { display: flex; gap: 2px; }
.status-row .sr-bars span { width: 4px; height: 24px; background: var(--mint); border-radius: 2px; opacity: .9; }
.status-row .sr-bars span.dn { background: #FFD166; opacity: .7; }
.status-row .sr-bars span.bk { background: #FF6B6B; opacity: .8; }
.status-row .sr-state { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mint); text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.status-row .sr-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.status-row.is-degraded .sr-state { color: #C09000; }
.status-row.is-degraded .sr-state::before { background: #FFD166; }
.incident-list { display: grid; gap: 16px; margin-top: 36px; }
.incident { padding: 20px 24px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); border-left: 3px solid var(--mint); }
.incident.is-degraded { border-left-color: #FFD166; }
.incident.is-resolved { border-left-color: var(--mint); opacity: .85; }
.incident header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.incident header strong { font-weight: 600; font-size: 15.5px; }
.incident header time { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.incident p { font-size: 14px; color: var(--muted); margin: 0; }
.role-list { display: grid; gap: 14px; margin-top: 24px; }
.role-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 24px 28px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.role-card:hover { border-color: rgba(168,93,59,.45); transform: translateX(2px); box-shadow: var(--shadow-card); }
.role-card h3 { font-size: 18px; margin: 0 0 6px; letter-spacing: -0.015em; }
.role-card .r-meta { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.role-card .r-meta span::before { content: '\B7'; margin-right: 8px; color: var(--line-strong); }
.role-card .r-meta span:first-child::before { content: none; }
.role-card .role-cta { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); transition: background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; }
.role-card .role-cta:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.perk { padding: 22px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }
.perk .p-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--cream-2); color: var(--ink); display: grid; place-items: center; margin-bottom: 12px; }
.perk .p-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.perk h4 { font-size: 15.5px; margin: 0 0 4px; letter-spacing: -0.01em; font-family: var(--f-display); font-weight: 600; }
.perk p { font-size: 13.5px; color: var(--muted); margin: 0; }
/* ============================================================
CINEMATIC POLISH LAYER
============================================================ */
/* Universal mascot bottom-fade — all mascots dissolve into panels */
.mascot-stage .mascot-img,
.feature-mascot img,
.feature-deep-mascot img,
.sol-mascot img,
.cta-mascot-img img,
.page-hero-mascot-img img,
.workflow-mascot-img img {
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
/* CTA full-panel: override universal bottom fade — ::after gradient handles depth instead */
.cta-band .cta-mascot-img img {
-webkit-mask-image: none;
mask-image: none;
}
/* Dark cinematic panel variant — for workflow + select CTAs */
.workflow-mascot-img.is-dark,
.cta-mascot-img.is-dark,
.page-hero-mascot-img.is-dark {
background:
radial-gradient(70% 60% at 50% 0%, #1A1A2A 0%, #10101C 60%, #08080F 100%) !important;
box-shadow:
0 40px 90px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(255,255,255,.06),
inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.workflow-mascot-img.is-dark::before,
.cta-mascot-img.is-dark::before,
.page-hero-mascot-img.is-dark::before {
background:
radial-gradient(55% 45% at 30% 18%, rgba(0,178,204,.32), transparent 65%),
radial-gradient(45% 35% at 80% 90%, rgba(0,229,160,.20), transparent 70%),
radial-gradient(40% 30% at 75% 30%, rgba(168,93,59,.14), transparent 70%) !important;
z-index: 0;
}
.workflow-mascot-img.is-dark::after,
.cta-mascot-img.is-dark::after,
.page-hero-mascot-img.is-dark::after {
background: radial-gradient(60% 100% at 50% 100%, rgba(0,0,0,.55), transparent 80%) !important;
}
.workflow-mascot-img.is-dark img,
.cta-mascot-img.is-dark img,
.page-hero-mascot-img.is-dark img {
filter: contrast(1.04) saturate(1.06);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 100%);
}
.workflow-mascot-img.is-dark .pill,
.workflow-mascot-img.is-dark .pill-set .pill,
.cta-mascot-img.is-dark .pill,
.page-hero-mascot-img.is-dark .pill {
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.12);
}
/* ===========================================================
Trust marquee — scrolling category strip
=========================================================== */
.trust-strip {
margin-top: clamp(48px, 7vw, 80px);
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 30px;
}
.trust-strip-eyebrow {
font-family: var(--f-mono);
font-size: 11.5px;
letter-spacing: .10em;
text-transform: uppercase;
color: #B0AECF;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.trust-strip-eyebrow::before {
content: '';
width: 24px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(176,174,207,.55));
display: inline-block;
}
.marquee {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee-track {
display: flex;
align-items: center;
gap: clamp(36px, 5vw, 56px);
width: max-content;
animation: marquee-scroll 38s linear infinite;
will-change: transform;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
animation-play-state: paused;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 10px;
color: #DAD8F0;
font-family: var(--f-display);
font-weight: 500;
font-size: 15.5px;
letter-spacing: -.01em;
white-space: nowrap;
padding: 8px 16px 8px 12px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
border: 1px solid rgba(255,255,255,.06);
transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.marquee-item:hover {
border-color: rgba(0,178,204,.28);
background: linear-gradient(180deg, rgba(0,178,204,.07), rgba(0,229,160,.03));
color: #F1F0FF;
}
.marquee-item .mq-icon {
width: 18px; height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
color: var(--teal-bright);
filter: drop-shadow(0 0 6px rgba(0,178,204,.35));
}
.marquee-item:nth-child(2n) .mq-icon { color: var(--mint); filter: drop-shadow(0 0 6px rgba(0,229,160,.35)); }
.marquee-item:nth-child(3n) .mq-icon { color: var(--violet); filter: drop-shadow(0 0 6px rgba(110,91,255,.40)); }
.marquee-item .mq-icon svg {
width: 100%; height: 100%;
}
@keyframes marquee-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.marquee {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.marquee-track {
animation: none;
transform: none;
}
}
/* Ambient particle dust in hero */
.hero .ambient-dust {
position: absolute; inset: 0;
pointer-events: none;
background-image:
radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.4) 50%, transparent 100%),
radial-gradient(1px 1px at 32% 48%, rgba(255,255,255,.3) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 64% 18%, rgba(0,229,160,.5) 50%, transparent 100%),
radial-gradient(1px 1px at 78% 62%, rgba(255,255,255,.35) 50%, transparent 100%),
radial-gradient(1px 1px at 88% 32%, rgba(0,178,204,.5) 50%, transparent 100%),
radial-gradient(1px 1px at 12% 70%, rgba(255,255,255,.25) 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 48% 84%, rgba(0,229,160,.4) 50%, transparent 100%),
radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.35) 50%, transparent 100%);
-webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 95%);
mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 95%);
z-index: 0;
animation: dust 22s ease-in-out infinite;
}
@keyframes dust {
0%,100% { opacity: .55; transform: translateY(0); }
50% { opacity: .9; transform: translateY(-3px); }
}
.hero > .container { position: relative; z-index: 1; }
/* Refined navbar — gradient hairline on scroll */
.site-header { border-bottom: 0; }
.site-header::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(0,178,204,.0) 8%, rgba(0,178,204,.35) 35%, rgba(0,229,160,.40) 50%, rgba(0,178,204,.35) 65%, rgba(0,178,204,.0) 92%, transparent 100%);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
}
.site-header.scrolled::after { opacity: .6; }
/* Nav links — soft pill background on hover/active (no dots, no underline) */
.nav-links a::before {
content: '';
position: absolute;
inset: 4px -8px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(0,178,204,.10), rgba(110,91,255,.06));
border: 1px solid rgba(255,255,255,0);
opacity: 0;
transform: translateY(2px);
transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
pointer-events: none;
z-index: -1;
}
.nav-links a:hover::before,
.nav-links a.is-active::before {
opacity: 1;
transform: translateY(0);
border-color: rgba(0,178,204,.18);
}
/* Hero meta icons — pulse breathing */
.hero-meta .meta-icon { animation: metaBreath 3.6s ease-in-out infinite; }
.hero-meta .meta-item:nth-child(2) .meta-icon { animation-name: metaBreathV; animation-delay: .8s; }
.hero-meta .meta-item:nth-child(3) .meta-icon { animation-delay: 1.6s; }
@keyframes metaBreath {
0%,100% { box-shadow: inset 0 0 0 1px rgba(0,229,160,.24), 0 0 12px rgba(0,229,160,.10); }
50% { box-shadow: inset 0 0 0 1px rgba(0,229,160,.42), 0 0 20px rgba(0,229,160,.24); }
}
@keyframes metaBreathV {
0%,100% { box-shadow: inset 0 0 0 1px rgba(0,178,204,.22), 0 0 10px rgba(0,178,204,.10); }
50% { box-shadow: inset 0 0 0 1px rgba(0,178,204,.38), 0 0 16px rgba(0,178,204,.20); }
}
/* Float cards — refined frosted glass */
.float-card {
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
background: rgba(250,250,247,.92);
border: 1px solid rgba(255,255,255,.7);
}
.mascot-stage .float-3 {
background: rgba(10,10,20,.92);
border-color: rgba(255,255,255,.08);
}
/* CTA band cinematic depth */
.cta-band {
box-shadow:
0 60px 120px rgba(0,178,204,.14),
0 0 0 1px rgba(255,255,255,.04) inset;
}
/* Subtle copper-thread accent on hover for various surfaces */
.feature:hover { border-color: rgba(168,93,59,.40); }
.industry-card:hover { border-color: rgba(168,93,59,.50); }
@media (prefers-reduced-motion: reduce) {
.hero .ambient-dust { animation: none; }
.hero-meta .meta-icon { animation: none; }
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 980px) {
.solutions-inner { grid-template-columns: 1fr !important; gap: 30px !important; }
.hero-grid { grid-template-columns: 1fr; }
.hero-stage { min-height: 380px; margin-top: 16px; }
.hero-stage-immersive { min-height: clamp(280px, 60vw, 420px); margin-top: 12px; }
.mascot-stage .float-1 { left: 0; }
.mascot-stage .float-2 { right: 0; }
.mascot-stage .float-3 { left: 6%; }
/* Mobile: cinematic image becomes a stacked block below text — tighter crop on robot */
.hero-cinematic {
position: absolute;
inset: auto 0 0 0;
height: clamp(280px, 60vw, 440px);
}
.hero-cinematic img {
position: absolute;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%);
width: clamp(440px, 112%, 760px);
max-height: 100%;
object-position: center center;
}
.hero-cinematic::before {
background:
linear-gradient(180deg, var(--ink) 0%, rgba(10,10,20,.45) 18%, transparent 35%),
linear-gradient(90deg, rgba(10,10,20,.40) 0%, transparent 30%);
}
.hero-cinematic::after {
background:
radial-gradient(60% 50% at 100% 60%, rgba(10,10,20,.40), transparent 70%),
linear-gradient(180deg, transparent 60%, rgba(10,10,20,.55) 100%);
}
.sec-head { grid-template-columns: 1fr; gap: 16px; }
.product-grid, .pricing-grid, .industry-grid, .help-grid, .value-grid, .perks-grid { grid-template-columns: 1fr 1fr; }
.plan.is-pop { transform: none; }
.plan.is-pop:hover { transform: translateY(-3px); box-shadow: 0 28px 72px rgba(0,178,204,.24), 0 0 0 1px rgba(0,178,204,.12); }
.testimonial { grid-template-columns: 1fr; }
.workflow { grid-template-columns: 1fr; }
.feature-deep { grid-template-columns: 1fr; padding: 36px 0; }
.feature-deep:nth-child(even) { direction: ltr; }
.cta-band { grid-template-columns: 1fr; text-align: left; }
.cta-mascot-img {
margin-top: 32px;
margin-right: calc(-1 * clamp(48px, 8vw, 90px));
margin-bottom: calc(-1 * clamp(48px, 8vw, 90px));
margin-left: calc(-1 * clamp(48px, 8vw, 90px));
width: auto;
max-width: none;
aspect-ratio: 4 / 3;
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
justify-self: stretch;
}
.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.page-hero-grid { grid-template-columns: 1fr; }
.page-hero-mascot-img { max-width: 320px; justify-self: start; }
.metrics { grid-template-columns: 1fr 1fr; padding: 24px; }
.metric { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 18px; }
.metric:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.metric:nth-child(-n+2) { padding-bottom: 18px; }
.sol-panel { grid-template-columns: 1fr; gap: 24px; }
.two-col { grid-template-columns: 1fr; }
.contact-form .form-grid { grid-template-columns: 1fr; }
.role-card { grid-template-columns: 1fr; }
}
/* Homepage hero mobile: image stays as atmospheric background, never stacks below text.
Overrides the global ≤980px rules (inset:auto 0 0 0 / fixed height) that create a
stacked image block — those rules now only matter if a non-scoped hero variant exists. */
@media (max-width: 980px) {
.hero .hero-cinematic {
position: absolute;
inset: 0;
height: auto;
}
.hero .hero-cinematic img {
top: 0;
left: auto;
right: -5%;
width: clamp(460px, 110vw, 720px);
height: 100%;
object-fit: cover;
object-position: center right;
transform: none;
max-height: none;
}
.hero .hero-cinematic::before {
background:
linear-gradient(90deg, var(--ink) 0%, rgba(10,10,20,.96) 38%, rgba(10,10,20,.78) 58%, rgba(10,10,20,.45) 78%, transparent 100%),
linear-gradient(180deg, rgba(10,10,20,.55) 0%, transparent 40%);
}
.hero .hero-cinematic::after {
background:
linear-gradient(180deg, transparent 55%, rgba(10,10,20,.75) 100%);
}
.hero .hero-stage-immersive {
display: none;
min-height: 0;
margin-top: 0;
}
}
@media (max-width: 430px) {
.hero .hero-cinematic img {
right: -20%;
width: 150vw;
object-position: 70% center;
}
.hero .hero-cinematic::before {
background:
linear-gradient(90deg, var(--ink) 0%, rgba(10,10,20,.98) 48%, rgba(10,10,20,.85) 68%, rgba(10,10,20,.55) 85%, transparent 100%),
linear-gradient(180deg, rgba(10,10,20,.65) 0%, transparent 35%);
}
}
@media (max-width: 700px) {
.nav-toggle { display: flex; }
.nav-cta { display: none; }
.nav-links {
position: fixed;
inset: 72px 0 0 0;
height: calc(100dvh - 72px);
background: #FAFAF7;
-webkit-backdrop-filter: none;
backdrop-filter: none;
flex-direction: column;
justify-content: flex-start;
padding: 40px var(--gutter) max(40px, env(safe-area-inset-bottom, 24px));
gap: 0;
align-items: stretch;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.2,.8,.2,1);
z-index: 200;
border-top: 1px solid #E8E6DD;
box-shadow: -4px 0 32px rgba(10,10,20,.10);
overflow: hidden;
}
.nav-open .nav-links { transform: translateX(0); }
.nav-links a {
font-size: 18px;
font-family: var(--f-display);
font-weight: 500;
letter-spacing: -0.02em;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.nav-links .mobile-cta { display: block; margin-top: 14px; border-bottom: 0; padding: 0; }
.nav-links .mobile-cta .btn { width: 100%; justify-content: center; }
.nav-links .mobile-cta .btn-primary { color: #ffffff; background: var(--ink); border-bottom: 0; padding: 14px 22px; font-size: 15px; }
.nav-links .mobile-cta .btn-primary:hover { color: var(--ink); }
.nav-links a:hover { color: var(--ink); }
.nav-links .mobile-cta a:hover { color: inherit; }
.product-grid, .pricing-grid, .industry-grid, .help-grid, .value-grid, .perks-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.float-card { padding: 10px 12px; font-size: 12px; }
.float-card .fc-mark { width: 30px; height: 30px; }
.testimonial { padding: 30px 22px; }
.testimonial blockquote::before { font-size: 56px; }
.solutions { padding: 32px 22px; }
.sol-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.sol-tab { white-space: nowrap; }
.cta-band { padding: 36px 24px; }
.cta-mascot-img {
margin-right: -24px;
margin-bottom: -36px;
margin-left: -24px;
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.step { padding: 16px; }
.step-num { width: 38px; height: 38px; }
.metrics { grid-template-columns: 1fr; padding: 20px; }
.metric { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.metric:last-child { border-bottom: 0; padding-bottom: 0; }
.status-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 20px; }
.status-overall { flex-wrap: wrap; }
.status-overall .so-meta { margin-left: 0; flex-basis: 100%; }
}
/* Short-viewport fallback: allow scroll only when height is very constrained (landscape phone) */
@media (max-width: 700px) and (max-height: 560px) {
.nav-links { overflow-y: auto; }
}
/* ============================================================
Billing toggle (priser.html) — supports script.js #billingToggle
============================================================ */
.billing-toggle-wrap { display: grid; place-items: center; margin: 0 0 30px; }
.billing-toggle {
position: relative;
display: inline-flex;
padding: 5px;
background: var(--cream-2);
border: 1px solid var(--line);
border-radius: 999px;
gap: 0;
--btgl-x: 5px;
--btgl-w: 0px;
}
.billing-toggle::before {
content: '';
position: absolute;
top: 5px; bottom: 5px;
left: var(--btgl-x);
width: var(--btgl-w);
background: var(--ink);
border-radius: 999px;
transition: left .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1);
z-index: 0;
}
.billing-toggle button {
position: relative;
z-index: 1;
padding: 10px 20px;
border-radius: 999px;
font-family: var(--f-body);
font-size: 14px;
font-weight: 500;
color: var(--ink-soft);
background: transparent;
cursor: pointer;
transition: color .25s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.billing-toggle button.is-active { color: var(--cream); }
.billing-toggle .save-tag {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--mint);
color: var(--ink);
padding: 2px 7px;
border-radius: 999px;
font-weight: 600;
}
.billing-toggle button.is-active .save-tag { background: var(--cream); color: var(--ink); }
.plan-billing-period {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.04em;
margin-top: -4px;
margin-bottom: 10px;
opacity: 0;
transition: opacity .25s ease;
height: 0;
overflow: hidden;
}
.plan-billing-period.is-visible { opacity: 1; height: auto; }
.plan.is-pop .plan-billing-period { color: #B0AECF; }
/* ============================================================
PRODUCT UI MOCKUPS — realistic software views
Used in feature cards, workflow timeline, and deep-dives.
No mascot, no marketing decoration — just real product UI.
============================================================ */
/* Base mockup panel — looks like an actual ServiceBuddy panel */
.uimock {
position: relative;
background: linear-gradient(180deg, #FFFFFF 0%, #F4F2EC 100%);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 20px 18px;
box-shadow:
0 1px 2px rgba(10,10,20,.04),
0 10px 28px rgba(10,10,20,.08);
font-family: var(--f-body);
display: flex;
flex-direction: column;
gap: 12px;
isolation: isolate;
overflow: hidden;
}
.uimock::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(60% 50% at 50% 0%, rgba(110,91,255,.06), transparent 70%);
pointer-events: none;
z-index: 0;
}
.uimock > * { position: relative; z-index: 1; }
.uimock-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--line);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.uimock-header .um-title {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-weight: 500;
}
.uimock-header .um-title svg {
width: 13px; height: 13px;
stroke: currentColor; fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.uimock-pill {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
font-weight: 600;
background: rgba(0,229,160,.18);
color: #0A7E4F;
}
.uimock-pill.is-amber { background: rgba(255,209,102,.22); color: #946800; }
.uimock-pill.is-violet { background: rgba(110,91,255,.16); color: var(--violet); }
.uimock-pill.is-muted { background: rgba(10,10,20,.06); color: var(--muted); }
/* Generic row — used for customer rows, reminder queue rows, etc. */
.uimock-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
background: rgba(10,10,20,.03);
border-radius: 10px;
border: 1px solid transparent;
font-size: 13px;
transition: border-color .2s ease, background .2s ease;
}
.uimock-row:hover {
border-color: var(--line-strong);
background: rgba(10,10,20,.05);
}
.uimock-row .um-icon {
width: 30px; height: 30px;
border-radius: 8px;
background: linear-gradient(135deg, var(--violet), var(--mint));
color: var(--cream);
display: grid; place-items: center;
font-family: var(--f-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.uimock-row .um-meta { display: grid; gap: 2px; min-width: 0; }
.uimock-row .um-name {
font-size: 13.5px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uimock-row .um-sub {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uimock-row .um-tag {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
font-weight: 600;
background: rgba(255,209,102,.22);
color: #946800;
flex-shrink: 0;
}
.uimock-row .um-tag.is-ok { background: rgba(0,229,160,.20); color: #0A7E4F; }
.uimock-row .um-tag.is-soon { background: rgba(110,91,255,.18); color: var(--violet); }
.uimock-row .um-tag.is-late { background: rgba(255,107,107,.18); color: #B23434; }
.uimock-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 10px;
margin-top: 4px;
border-top: 1px dashed var(--line);
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.04em;
}
.uimock-footer .um-stat {
display: inline-flex;
align-items: center;
gap: 6px;
}
.uimock-footer .um-stat strong {
color: var(--ink);
font-weight: 600;
}
/* Email preview mockup */
.uimock-email .um-from {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
display: grid;
gap: 3px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 6px;
}
.uimock-email .um-from strong { color: var(--ink); font-weight: 500; }
.uimock-email .um-subject {
font-size: 14.5px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.015em;
line-height: 1.3;
}
.uimock-email .um-body {
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.55;
display: grid; gap: 6px;
}
.uimock-email .um-cta-btn {
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--ink);
color: var(--cream);
border-radius: 8px;
font-size: 12px;
font-weight: 500;
font-family: var(--f-body);
width: fit-content;
}
/* Service timeline */
.uimock-timeline {
display: grid;
gap: 0;
position: relative;
padding: 4px 4px;
}
.uimock-timeline::before {
content: '';
position: absolute;
left: 13px; top: 16px; bottom: 16px;
width: 2px;
background: var(--line-strong);
border-radius: 2px;
z-index: 0;
}
.uimock-timeline .tl-item {
position: relative;
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
align-items: start;
padding: 8px 0;
z-index: 1;
}
.uimock-timeline .tl-dot {
width: 14px; height: 14px;
border-radius: 50%;
background: var(--cream);
border: 2px solid var(--line-strong);
margin-left: 6px;
margin-top: 4px;
flex-shrink: 0;
}
.uimock-timeline .tl-item.is-done .tl-dot {
background: var(--ink);
border-color: var(--ink);
}
.uimock-timeline .tl-item.is-current .tl-dot {
background: var(--mint);
border-color: var(--mint);
box-shadow: 0 0 0 4px rgba(0,229,160,.20);
animation: livePulse 2.4s ease-in-out infinite;
}
.uimock-timeline .tl-item.is-future .tl-dot {
border-style: dashed;
}
.uimock-timeline .tl-meta {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.04em;
}
.uimock-timeline .tl-title {
font-size: 13.5px;
font-weight: 500;
color: var(--ink);
margin-top: 2px;
letter-spacing: -0.005em;
}
.uimock-timeline .tl-item.is-done .tl-title { color: var(--muted); }
.uimock-timeline .tl-item.is-future .tl-title { color: var(--ink); }
/* Interval settings list */
.uimock-intervals {
display: grid;
gap: 6px;
}
.uimock-intervals .iv-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 14px;
align-items: center;
padding: 11px 14px;
background: rgba(10,10,20,.03);
border-radius: 10px;
border: 1px solid transparent;
transition: border-color .2s ease;
}
.uimock-intervals .iv-row:hover { border-color: var(--line-strong); }
.uimock-intervals .iv-name { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.uimock-intervals .iv-value {
font-family: var(--f-mono);
font-size: 12px;
color: var(--violet);
font-weight: 500;
}
.uimock-intervals .iv-lead {
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.04em;
}
/* Customer overview mockup */
.uimock-customer .um-name-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.uimock-customer .um-customer-name {
font-size: 16px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.015em;
}
.uimock-customer .um-since {
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.04em;
}
.uimock-customer .um-product {
display: grid;
gap: 2px;
padding: 10px 12px;
background: rgba(10,10,20,.03);
border-radius: 10px;
}
.uimock-customer .um-product strong {
font-size: 13px;
color: var(--ink);
font-weight: 500;
}
.uimock-customer .um-product .um-product-meta {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.uimock-customer .um-product .um-product-meta span::before {
content: '·'; margin-right: 6px; color: var(--line-strong);
}
.uimock-customer .um-product .um-product-meta span:first-child::before { content: none; }
/* Wrap mockup inside a feature card visual area */
.feature .uimock,
.feature-deep .uimock {
margin: 0;
}
.feature .uimock-shell {
/* Container that gives the mockup a colored backdrop matching the card */
position: relative;
aspect-ratio: 5 / 4;
background: linear-gradient(180deg, #F4F2EC 0%, #E8E6DD 100%);
border-radius: var(--radius);
padding: 18px 14px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
}
.feature .uimock-shell::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 30% 0%, rgba(110,91,255,.10), transparent 60%),
radial-gradient(40% 30% at 90% 100%, rgba(0,229,160,.10), transparent 70%);
pointer-events: none;
}
.feature .uimock-shell .uimock {
width: 100%;
max-width: 320px;
margin: 0;
position: relative;
z-index: 1;
transform: translateY(0);
transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.feature:hover .uimock-shell .uimock { transform: translateY(-4px); }
/* Workflow visual switched to dark stage holding a UI mockup */
.workflow-uimock {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-xl);
background:
radial-gradient(70% 60% at 50% 0%, #1A1A2A 0%, #10101C 60%, #08080F 100%);
box-shadow:
0 40px 90px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(255,255,255,.06),
inset 0 1px 0 rgba(255,255,255,.10);
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
padding: 36px 28px;
}
.workflow-uimock::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(55% 45% at 30% 18%, rgba(110,91,255,.32), transparent 65%),
radial-gradient(45% 35% at 80% 90%, rgba(0,229,160,.20), transparent 70%);
z-index: 0;
}
.workflow-uimock .uimock {
width: 100%;
max-width: 360px;
position: relative;
z-index: 1;
background: linear-gradient(180deg, #FFFFFF, #F8F6F0);
box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.6);
}
.workflow-uimock .pill-set {
position: absolute;
top: 22px; left: 22px;
display: grid;
gap: 8px;
z-index: 2;
}
.workflow-uimock .pill-set .pill {
background: rgba(255,255,255,.08);
color: var(--cream);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.workflow-uimock .pill-set .pulse-dot {
width: 6px; height: 6px;
background: var(--mint);
border-radius: 50%;
animation: livePulse 2.4s ease-in-out infinite;
}
/* Deep-dive panel that holds a UI mockup instead of a mascot */
.feature-deep-mockup {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, #F4F2EC 0%, #E8E6DD 100%);
padding: 22px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
box-shadow: 0 24px 50px rgba(10,10,20,.18), inset 0 0 0 1px rgba(255,255,255,.6);
}
.feature-deep-mockup::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 30% 0%, rgba(110,91,255,.10), transparent 60%),
radial-gradient(40% 30% at 90% 100%, rgba(0,229,160,.10), transparent 70%);
z-index: 0;
}
.feature-deep-mockup .uimock {
width: 100%;
max-width: 380px;
position: relative;
z-index: 1;
}
.feature-deep-mockup .pill {
position: absolute;
top: 16px; left: 16px;
background: rgba(10,10,20,.85);
color: var(--cream);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
z-index: 2;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.feature-deep-mockup .pill.is-mint { background: var(--mint); color: var(--ink); }
.feature-deep-mockup .pill.is-violet { background: var(--violet); color: var(--cream); }
/* ============================================================
PRODUCT-DEMO LAYER — realistic in-product views
Customer list, empty states, onboarding checklist, status pills
============================================================ */
/* Customer list table */
.uimock-list {
display: grid;
gap: 0;
font-size: 12.5px;
}
.uimock-list .ul-head {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 90px;
gap: 10px;
padding: 8px 12px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 1px solid var(--line);
}
.uimock-list .ul-row {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 90px;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
transition: background .15s ease;
}
.uimock-list .ul-row:last-child { border-bottom: 0; }
.uimock-list .ul-row:hover { background: rgba(10,10,20,.03); }
.uimock-list .ul-name {
font-weight: 500;
color: var(--ink);
display: flex; align-items: center; gap: 8px;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uimock-list .ul-name::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--mint);
flex-shrink: 0;
}
.uimock-list .ul-row.is-stale .ul-name::before { background: #FFD166; }
.uimock-list .ul-row.is-late .ul-name::before { background: #FF6B6B; }
.uimock-list .ul-meta {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uimock-list .ul-status {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
background: rgba(0,229,160,.18);
color: #0A7E4F;
font-weight: 600;
text-align: center;
}
.uimock-list .ul-row.is-stale .ul-status {
background: rgba(255,209,102,.20);
color: #946800;
}
.uimock-list .ul-row.is-late .ul-status {
background: rgba(255,107,107,.18);
color: #B23434;
}
.uimock-list .ul-row.is-new .ul-status {
background: rgba(110,91,255,.16);
color: var(--violet);
}
/* Customer detail layout */
.uimock-detail .ud-header {
display: flex; flex-direction: column; gap: 4px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--line);
margin-bottom: 4px;
}
.uimock-detail .ud-name {
font-size: 16px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.015em;
}
.uimock-detail .ud-meta {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
display: flex; gap: 14px; flex-wrap: wrap;
}
.uimock-detail .ud-section {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-top: 6px;
}
.uimock-detail .ud-prod {
display: grid;
gap: 4px;
padding: 10px 12px;
background: rgba(10,10,20,.03);
border-radius: 10px;
}
.uimock-detail .ud-prod strong {
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.uimock-detail .ud-prod .ud-prod-meta {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
display: flex; gap: 14px; flex-wrap: wrap;
}
/* Empty state */
.uimock-empty {
text-align: center;
padding: 30px 20px 20px;
display: grid;
gap: 14px;
justify-items: center;
}
.uimock-empty .ue-icon {
width: 48px; height: 48px;
border-radius: 14px;
background: var(--cream-2);
display: grid; place-items: center;
color: var(--muted);
}
.uimock-empty .ue-icon svg {
width: 22px; height: 22px;
stroke: currentColor; fill: none;
stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.uimock-empty .ue-title {
font-size: 15px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.015em;
}
.uimock-empty .ue-body {
font-size: 12.5px;
color: var(--muted);
max-width: 28ch;
line-height: 1.5;
}
.uimock-empty .ue-hint {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--f-mono);
font-size: 11px;
color: var(--violet);
margin-top: 4px;
}
/* Onboarding checklist */
.uimock-onboarding {
display: grid;
gap: 8px;
}
.uimock-onboarding .ob-step {
display: grid;
grid-template-columns: 22px 1fr;
gap: 12px;
align-items: center;
padding: 10px 12px;
background: rgba(10,10,20,.03);
border-radius: 10px;
font-size: 13px;
}
.uimock-onboarding .ob-step.is-done {
background: rgba(0,229,160,.10);
}
.uimock-onboarding .ob-step .ob-check {
width: 18px; height: 18px;
border-radius: 50%;
border: 1.5px solid var(--line-strong);
background: var(--cream);
display: grid; place-items: center;
}
.uimock-onboarding .ob-step.is-done .ob-check {
background: var(--mint);
border-color: var(--mint);
}
.uimock-onboarding .ob-step.is-done .ob-check::before {
content: '✓';
color: var(--ink);
font-weight: 700;
font-size: 11px;
font-family: var(--f-mono);
}
.uimock-onboarding .ob-step.is-current .ob-check {
border-color: var(--violet);
border-style: dashed;
}
.uimock-onboarding .ob-text {
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.uimock-onboarding .ob-step.is-done .ob-text {
color: var(--muted);
text-decoration: line-through;
text-decoration-color: rgba(10,10,20,.18);
}
.uimock-onboarding .ob-step.is-current .ob-text {
color: var(--ink);
}
/* "Så ser det ut" demo grid section */
#produktvy {
background:
radial-gradient(ellipse 80% 50% at 50% 15%, rgba(110,91,255,.04) 0%, transparent 65%),
radial-gradient(ellipse 55% 40% at 85% 90%, rgba(0,178,204,.03) 0%, transparent 55%);
}
.demo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.demo-grid + .demo-grid {
margin-top: 48px;
}
.demo-cell {
display: flex;
flex-direction: column;
gap: 20px;
}
.demo-cell .demo-shell {
position: relative;
background: linear-gradient(180deg, #F4F2EC 0%, #E8E6DD 100%);
border-radius: var(--radius-lg);
padding: 28px;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
overflow: hidden;
min-height: 380px;
box-shadow: 0 24px 50px rgba(10,10,20,.10), inset 0 0 0 1px rgba(255,255,255,.65);
transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s cubic-bezier(.2,.8,.2,1);
}
.demo-cell .demo-shell:hover {
transform: translateY(-5px);
box-shadow: 0 36px 72px rgba(10,10,20,.16), 0 2px 8px rgba(10,10,20,.07), inset 0 0 0 1px rgba(255,255,255,.72);
}
.demo-cell .demo-shell::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(65% 55% at 25% 0%, rgba(110,91,255,.10), transparent 60%),
radial-gradient(45% 35% at 90% 100%, rgba(0,229,160,.09), transparent 70%);
z-index: 0;
}
.demo-cell .demo-shell .uimock {
width: 100%;
max-width: 380px;
position: relative;
z-index: 1;
}
.demo-cell .demo-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.demo-cell .demo-title {
font-family: var(--f-display);
font-weight: 600;
font-size: 17px;
color: var(--ink);
letter-spacing: -0.015em;
line-height: 1.3;
}
.demo-cell .demo-tag {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.demo-cell .demo-body {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
margin: 0;
}
/* Make customer list scale better in narrow shells */
.demo-cell .demo-shell .uimock-list .ul-head,
.demo-cell .demo-shell .uimock-list .ul-row {
grid-template-columns: 1.4fr 1fr 80px;
}
.demo-cell .demo-shell .uimock-list .ul-meta:nth-child(3) { display: none; }
.demo-cell .demo-shell .uimock-list .ul-head span:nth-child(3) { display: none; }
/* Desktop: right-column cards drop slightly for a staggered, composed rhythm */
@media (min-width: 981px) {
.demo-cell:nth-child(even) { margin-top: 28px; }
}
@media (max-width: 980px) {
.demo-grid { grid-template-columns: 1fr; gap: 28px; }
.demo-grid + .demo-grid { margin-top: 32px; }
}
@media (max-width: 700px) {
.uimock-list .ul-head,
.uimock-list .ul-row { grid-template-columns: 1fr 90px; gap: 8px; }
.uimock-list .ul-meta { display: none; }
.uimock-list .ul-head span:nth-child(2),
.uimock-list .ul-head span:nth-child(3) { display: none; }
}
/* ============================================================
APP SHELL — real in-product views
Sidebar + topbar + content layout. Linear/Notion calm.
Uses ../styles.css from /app/* paths.
============================================================ */
.app-body {
background: #FBFAF5;
min-height: 100vh;
margin: 0;
font-family: var(--f-body);
color: var(--ink);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.app-shell {
display: grid;
grid-template-columns: 248px 1fr;
min-height: 100vh;
}
/* Sidebar */
.app-sidebar {
background: var(--cream);
border-right: 1px solid var(--line);
padding: 22px 16px;
display: flex;
flex-direction: column;
gap: 18px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.app-sidebar .as-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 10px;
font-family: var(--f-display);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.02em;
color: var(--ink);
text-decoration: none;
}
.app-sidebar .as-brand .as-mark {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--panel-grad);
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(10,10,20,.10), inset 0 0 0 1px rgba(255,255,255,.6);
}
.app-sidebar .as-brand .as-mark img {
width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
}
.app-sidebar .as-section {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted-2);
padding: 6px 12px 4px;
margin-top: 8px;
}
.app-sidebar .as-nav {
display: flex;
flex-direction: column;
gap: 1px;
}
.app-sidebar .as-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
font-size: 14px;
color: var(--ink-soft);
font-weight: 450;
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.app-sidebar .as-link:hover { background: rgba(10,10,20,.04); color: var(--ink); }
.app-sidebar .as-link.is-active {
background: var(--ink);
color: var(--cream);
font-weight: 500;
}
.app-sidebar .as-link svg {
width: 16px; height: 16px;
stroke: currentColor; fill: none;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0;
}
.app-sidebar .as-link .as-count {
margin-left: auto;
font-family: var(--f-mono);
font-size: 11px;
background: rgba(10,10,20,.06);
padding: 2px 7px;
border-radius: 999px;
color: var(--muted);
font-weight: 500;
}
.app-sidebar .as-link.is-active .as-count {
background: rgba(255,255,255,.16);
color: var(--cream);
}
.app-sidebar .as-user {
margin-top: auto;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(10,10,20,.03);
font-size: 13px;
}
.app-sidebar .as-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--violet), var(--mint));
color: var(--cream);
display: grid; place-items: center;
font-family: var(--f-mono);
font-weight: 600;
font-size: 12px;
}
.app-sidebar .as-user-meta { line-height: 1.2; }
.app-sidebar .as-user-meta strong { font-size: 13px; font-weight: 500; color: var(--ink); display: block; }
.app-sidebar .as-user-meta span { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
/* Top bar */
.app-main {
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 0;
}
.app-topbar {
position: sticky;
top: 0;
z-index: 5;
background: rgba(251,250,245,.92);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
padding: 14px 32px;
display: flex;
align-items: center;
gap: 18px;
}
.app-topbar .at-search {
flex: 1;
max-width: 480px;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 13.5px;
color: var(--muted);
transition: border-color .15s ease, background .15s ease;
}
.app-topbar .at-search:focus-within {
border-color: var(--ink);
background: #fff;
}
.app-topbar .at-search svg {
width: 14px; height: 14px;
stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round;
flex-shrink: 0;
}
.app-topbar .at-search input {
border: 0;
background: transparent;
font: inherit;
color: var(--ink);
outline: none;
flex: 1;
min-width: 0;
}
.app-topbar .at-search .at-kbd {
font-family: var(--f-mono);
font-size: 10.5px;
background: rgba(10,10,20,.06);
padding: 2px 6px;
border-radius: 4px;
color: var(--muted);
flex-shrink: 0;
}
.app-topbar .at-actions { display: flex; align-items: center; gap: 8px; }
.app-topbar .at-btn {
padding: 8px 14px;
border-radius: 8px;
font-family: var(--f-body);
font-size: 13.5px;
font-weight: 500;
color: var(--ink);
background: var(--cream);
border: 1px solid var(--line);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background .15s ease, border-color .15s ease;
}
.app-topbar .at-btn:hover { border-color: var(--line-strong); background: #fff; }
.app-topbar .at-btn.is-primary {
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
}
.app-topbar .at-btn.is-primary:hover { background: #1a1a26; }
/* Content area */
.app-content {
padding: 32px 32px 80px;
flex: 1;
}
.app-content > .ac-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.app-content > .ac-head h1 {
font-family: var(--f-display);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 4px;
}
.app-content > .ac-head .ac-sub {
font-family: var(--f-mono);
font-size: 12.5px;
color: var(--muted);
letter-spacing: 0.02em;
}
/* Section heading inside app */
.ac-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 28px 0 12px;
}
.ac-section-head h2 {
font-family: var(--f-display);
font-size: 17px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.015em;
margin: 0;
}
.ac-section-head .ac-meta {
font-family: var(--f-mono);
font-size: 11.5px;
color: var(--muted);
letter-spacing: 0.02em;
}
/* Card / list container in app */
.ac-card {
background: var(--cream);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.ac-card.is-strong { box-shadow: 0 1px 2px rgba(10,10,20,.04), 0 6px 20px rgba(10,10,20,.05); }
/* Stat cards row */
.ac-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 20px;
}
.ac-stat {
background: var(--cream);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ac-stat .ac-stat-label {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.ac-stat .ac-stat-value {
font-family: var(--f-display);
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.1;
}
.ac-stat .ac-stat-meta {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
}
.ac-stat.is-warn .ac-stat-value { color: #946800; }
.ac-stat.is-late .ac-stat-value { color: #B23434; }
.ac-stat.is-ok .ac-stat-value { color: #0A7E4F; }
/* App table (extends uimock-list with full-width app polish) */
.ac-table {
background: var(--cream);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.ac-table .at-row,
.ac-table .at-thead {
display: grid;
grid-template-columns: 22px 2fr 1.4fr 1.2fr 1fr 110px;
gap: 14px;
align-items: center;
padding: 10px 18px;
border-bottom: 1px solid var(--line);
font-size: 13px;
}
.ac-table .at-row:last-child { border-bottom: 0; }
.ac-table .at-thead {
background: rgba(10,10,20,.02);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 1px solid var(--line-strong);
padding: 10px 18px;
}
.ac-table .at-row {
transition: background .15s ease;
cursor: pointer;
}
.ac-table .at-row:hover { background: rgba(10,10,20,.025); }
.ac-table .at-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--mint);
}
.ac-table .at-row.is-stale .at-dot { background: #FFD166; }
.ac-table .at-row.is-late .at-dot { background: #FF6B6B; }
.ac-table .at-row.is-new .at-dot { background: var(--violet); }
.ac-table .at-name {
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.ac-table .at-name .at-sub {
display: block;
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
font-weight: 400;
margin-top: 2px;
letter-spacing: 0;
}
.ac-table .at-meta {
font-family: var(--f-mono);
font-size: 12px;
color: var(--ink-soft);
}
.ac-table .at-meta.is-muted { color: var(--muted); }
.ac-table .at-status {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
background: rgba(0,229,160,.18);
color: #0A7E4F;
font-weight: 600;
text-align: center;
width: fit-content;
}
.ac-table .at-row.is-stale .at-status { background: rgba(255,209,102,.20); color: #946800; }
.ac-table .at-row.is-late .at-status { background: rgba(255,107,107,.18); color: #B23434; }
.ac-table .at-row.is-new .at-status { background: rgba(110,91,255,.16); color: var(--violet); }
.ac-table .at-action {
font-family: var(--f-mono);
font-size: 11px;
color: var(--violet);
text-align: right;
letter-spacing: 0.04em;
}
/* Filter bar */
.ac-filter-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px 10px 12px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.ac-chip {
font-family: var(--f-body);
font-size: 12.5px;
padding: 6px 12px;
border-radius: 999px;
background: transparent;
color: var(--ink-soft);
cursor: pointer;
border: 1px solid transparent;
transition: background .15s ease, color .15s ease;
}
.ac-chip:hover { background: rgba(10,10,20,.04); color: var(--ink); }
.ac-chip.is-active {
background: var(--ink);
color: var(--cream);
}
.ac-chip .ac-chip-count {
margin-left: 6px;
font-family: var(--f-mono);
font-size: 10.5px;
opacity: .8;
}
.ac-filter-bar .ac-search-mini {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(10,10,20,.03);
border-radius: 8px;
font-size: 12.5px;
color: var(--muted);
}
.ac-filter-bar .ac-search-mini svg {
width: 13px; height: 13px;
stroke: currentColor; fill: none; stroke-width: 2;
}
/* Customer-detail layout */
.ac-detail {
display: grid;
grid-template-columns: 1fr 320px;
gap: 28px;
align-items: start;
}
.ac-detail-main { display: grid; gap: 18px; }
.ac-detail-side { display: grid; gap: 14px; position: sticky; top: 86px; }
.ac-customer-head {
display: grid;
gap: 6px;
padding: 22px 24px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 12px;
}
.ac-customer-head .ac-customer-name {
font-family: var(--f-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
}
.ac-customer-head .ac-customer-meta {
font-family: var(--f-mono);
font-size: 12px;
color: var(--muted);
display: flex;
gap: 14px;
flex-wrap: wrap;
letter-spacing: 0.02em;
}
.ac-customer-head .ac-customer-meta span::before { content: '·'; margin-right: 8px; color: var(--line-strong); }
.ac-customer-head .ac-customer-meta span:first-child::before { content: none; }
.ac-customer-head .ac-customer-tags {
display: flex;
gap: 6px;
margin-top: 6px;
flex-wrap: wrap;
}
/* ============================================================
HERO TRUST PANEL — glassmorphism value strip
Shared by: priser.html, kontakt.html, funktioner.html
============================================================ */
.hero-trust-panel {
margin-top: clamp(24px, 3vw, 44px);
}
.hero-trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: rgba(10,10,20,.68);
-webkit-backdrop-filter: blur(20px) saturate(130%);
backdrop-filter: blur(20px) saturate(130%);
border: 1px solid rgba(0,178,204,.16);
border-radius: 14px;
box-shadow:
0 8px 40px rgba(10,10,20,.55),
inset 0 1px 0 rgba(255,255,255,.07);
overflow: hidden;
}
.hero-trust-item {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 18px 18px;
border-right: 1px solid rgba(255,255,255,.07);
transition: background .22s ease;
}
.hero-trust-item:last-child { border-right: 0; }
.hero-trust-item:hover { background: rgba(0,178,204,.05); }
.hero-trust-icon {
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(0,178,204,.13);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--violet);
transition: background .22s ease, box-shadow .22s ease;
}
.hero-trust-item:hover .hero-trust-icon {
background: rgba(0,178,204,.22);
box-shadow: 0 0 14px rgba(0,178,204,.16);
}
.hero-trust-icon svg { width: 15px; height: 15px; }
.hero-trust-label { flex: 1; min-width: 0; }
.hero-trust-title {
font-size: 12.5px;
font-weight: 600;
color: var(--cream);
line-height: 1.3;
letter-spacing: -.01em;
font-family: var(--f-display);
}
.hero-trust-text {
font-size: 11px;
color: rgba(250,250,247,.48);
margin-top: 3px;
line-height: 1.35;
font-family: var(--f-body);
}
.hero-trust-highlight {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 8px;
padding: 13px 18px;
background: rgba(0,178,204,.07);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(0,178,204,.20);
border-radius: 11px;
transition: background .22s ease;
}
.hero-trust-highlight:hover { background: rgba(0,178,204,.11); }
.hero-trust-highlight-icon {
color: var(--mint);
flex-shrink: 0;
margin-top: 1px;
}
.hero-trust-highlight-icon svg { width: 17px; height: 17px; }
.hero-trust-highlight-text {
font-size: 12.5px;
font-weight: 600;
color: var(--cream);
line-height: 1.45;
margin: 0;
font-family: var(--f-display);
}
.hero-trust-highlight-sub {
font-size: 11px;
color: rgba(250,250,247,.48);
margin: 3px 0 0;
line-height: 1.4;
font-family: var(--f-body);
}
/* Responsive — 4 col → 2 col → 1 col */
@media (max-width: 980px) {
.hero-trust-grid { grid-template-columns: repeat(2, 1fr); }
.hero-trust-item:nth-child(2n) { border-right: 0; }
.hero-trust-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 600px) {
.hero-trust-item { padding: 14px 14px; gap: 10px; }
.hero-trust-icon { width: 30px; height: 30px; border-radius: 8px; }
.hero-trust-icon svg { width: 13px; height: 13px; }
.hero-trust-highlight { padding: 11px 14px; gap: 10px; }
}
@media (max-width: 340px) {
.hero-trust-grid { grid-template-columns: 1fr; }
.hero-trust-item { border-right: 0; }
.hero-trust-item:nth-child(n+2) {
border-top: 1px solid rgba(255,255,255,.07);
border-right: 0;
}
}