/* LNDIN Networks — cold Nordic light. Ice ground, ink type, one cobalt signal. Display: Space Grotesk (variable). Body: IBM Plex Sans (variable). Utility: IBM Plex Mono — everything "network" speaks mono. */ @font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-var.woff2") format("woff2"); font-weight: 100 700; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } :root { --ice: #f2f5f9; --paper: #ffffff; --ink: #0c1522; --slate: #55677e; --signal: #1e56e8; --signal-deep: #12399f; --pulse: #12b886; --hairline: #d9e1eb; --terminal: #0e1726; --term-border: transparent; --glow: rgba(30, 86, 232, 0.14); --flash-ok-bg: #e3f7ef; --flash-ok-fg: #0a6e4f; --flash-ok-bd: #b5e6d4; --flash-err-bg: #fdecec; --flash-err-fg: #8f1d1d; --flash-err-bd: #f3c2c2; --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* Mörkt tema: systempreferens om inget val gjorts, annars data-theme (sätts av inline-skriptet i + toggeln i headern). */ :root[data-theme="dark"] { --ice: #0a111d; --paper: #101a2b; --ink: #e8eef7; --slate: #93a5bc; --signal: #5b8cff; --signal-deep: #85a9ff; --pulse: #22c993; --hairline: #1d2b42; --terminal: #0d1524; --term-border: #1d2b42; --glow: rgba(91, 140, 255, 0.16); --flash-ok-bg: #0e2b22; --flash-ok-fg: #5fd4ac; --flash-ok-bd: #1c4a3a; --flash-err-bg: #2f1414; --flash-err-fg: #f0a2a2; --flash-err-bd: #562222; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ice: #0a111d; --paper: #101a2b; --ink: #e8eef7; --slate: #93a5bc; --signal: #5b8cff; --signal-deep: #85a9ff; --pulse: #22c993; --hairline: #1d2b42; --terminal: #0d1524; --term-border: #1d2b42; --glow: rgba(91, 140, 255, 0.16); --flash-ok-bg: #0e2b22; --flash-ok-fg: #5fd4ac; --flash-ok-bd: #1c4a3a; --flash-err-bg: #2f1414; --flash-err-fg: #f0a2a2; --flash-err-bd: #562222; } } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-weight: 400; color: var(--ink); background: var(--ice); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } a { color: var(--signal); text-decoration: none; } a:hover { color: var(--signal-deep); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.015em; } h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; margin-bottom: 1.4rem; } h3 { font-size: 1.06rem; font-weight: 600; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin-bottom: 0.9rem; } .eyebrow::before { content: "// "; color: var(--slate); } .up { color: var(--pulse); font-style: normal; } /* ---------- header ---------- */ .site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ice) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); } .head-row { display: flex; align-items: center; gap: 28px; height: 60px; } .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.02em; color: var(--ink); display: flex; align-items: baseline; gap: 6px; } .wordmark:hover { color: var(--ink); } .wordmark-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); align-self: center; } .wordmark-sub { font-family: var(--font-mono); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; color: var(--slate); } .site-nav { display: flex; gap: 22px; margin-left: auto; } .site-nav a { color: var(--slate); font-size: 0.92rem; font-weight: 500; } .site-nav a:hover { color: var(--ink); } .lang-switch { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--slate); border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 12px; background: var(--paper); } .lang-switch:hover { border-color: var(--signal); color: var(--ink); } .lang-switch svg { border-radius: 2px; display: block; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--paper); color: var(--slate); cursor: pointer; padding: 0; } .theme-toggle:hover { border-color: var(--signal); color: var(--ink); } .theme-toggle svg { display: block; } /* Visa rätt ikon för aktivt tema (måne i ljust, sol i mörkt). OBS: .theme-toggle-prefix krävs för att slå .theme-toggle svg ovan. */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* ---------- hero ---------- */ .hero { padding: 88px 0 72px; position: relative; overflow: hidden; } /* Ambient nätverksmesh bakom heron — noder, länkar och vandrande paket. */ .hero-mesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; } .hero-mesh .mesh-link { stroke: var(--hairline); stroke-width: 1; } .hero-mesh .mesh-node { fill: var(--slate); opacity: 0.55; } .hero-mesh .mesh-packet { fill: var(--signal); } .hero .wrap { position: relative; } @media (prefers-reduced-motion: reduce) { .hero-mesh .mesh-packet { display: none; } .term-cursor { animation: none; } } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .lead { color: var(--slate); font-size: 1.08rem; margin-top: 1.1rem; max-width: 46ch; } .hero-actions { display: flex; gap: 14px; margin-top: 2rem; flex-wrap: wrap; } .btn { display: inline-block; font-weight: 600; font-size: 0.95rem; padding: 12px 22px; border-radius: 8px; border: 1px solid transparent; font-family: var(--font-body); cursor: pointer; } .btn-primary { background: var(--signal); color: #fff; } .btn-primary:hover { background: var(--signal-deep); color: #fff; } .btn-ghost { border-color: var(--hairline); color: var(--ink); background: var(--paper); } .btn-ghost:hover { border-color: var(--signal); color: var(--signal); } /* ---------- terminal (signature) ---------- */ .terminal { background: var(--terminal); border-radius: 12px; border: 1px solid var(--term-border); box-shadow: 0 24px 60px -24px rgba(12, 21, 34, 0.45), 0 0 48px -12px var(--glow); overflow: hidden; font-family: var(--font-mono); position: relative; z-index: 1; } .term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .term-light { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); } .term-title { margin-left: auto; font-size: 0.66rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.4); } .term-body { padding: 18px 20px 20px; font-size: 0.78rem; line-height: 1.9; color: #c9d6e6; overflow-x: auto; } .term-prompt { color: var(--pulse); } .hop { display: block; } .term-done { color: #8fa3ba; } .term-cursor { display: inline-block; width: 8px; height: 14px; background: #c9d6e6; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .terminal.animate .hop { opacity: 0; animation: hop-in 0.3s ease forwards; } /* Child 1 är prompt-spannen; hoppen är barn 2–8. */ .terminal.animate .hop:nth-child(2) { animation-delay: 0.5s; } .terminal.animate .hop:nth-child(3) { animation-delay: 0.9s; } .terminal.animate .hop:nth-child(4) { animation-delay: 1.3s; } .terminal.animate .hop:nth-child(5) { animation-delay: 1.7s; } .terminal.animate .hop:nth-child(6) { animation-delay: 2.1s; } .terminal.animate .hop:nth-child(7) { animation-delay: 2.5s; } .terminal.animate .hop:nth-child(8) { animation-delay: 3.1s; } .terminal.animate .hop:nth-child(9) { animation-delay: 3.6s; } @keyframes hop-in { to { opacity: 1; } } /* ---------- bands & cards ---------- */ .band { padding: 76px 0; } .band-alt { background: var(--paper); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .svc-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px; padding: 26px 26px 24px; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .band-alt .svc-card { background: var(--ice); } .svc-card h3 { margin-bottom: 0.5rem; } .svc-card p { color: var(--slate); font-size: 0.95rem; } .svc-card:hover, .prod-card:hover { border-color: color-mix(in srgb, var(--signal) 55%, var(--hairline)); transform: translateY(-2px); box-shadow: 0 12px 32px -16px var(--glow), 0 0 0 3px var(--glow); } /* Protokoll-/plattformschips — mono, som taggade capabilities. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.6rem 0 2rem; } .chip { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--slate); border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 12px; background: var(--paper); transition: border-color 0.2s ease, color 0.2s ease; } .band-alt .chip { background: var(--ice); } .chip:hover { border-color: var(--signal); color: var(--signal); } .prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .prod-card { background: var(--ice); border: 1px solid var(--hairline); border-radius: 12px; padding: 28px; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .prod-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.4rem; } .prod-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; } .prod-name em { font-style: normal; color: var(--signal); } .prod-status { font-family: var(--font-mono); font-size: 0.68rem; color: var(--slate); letter-spacing: 0.06em; } .prod-tag { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.8rem; } .prod-card > p:not(.prod-tag) { color: var(--slate); font-size: 0.97rem; } .prod-link { display: inline-block; margin-top: 1.1rem; font-weight: 600; font-size: 0.95rem; } .prod-note { margin-top: 1.4rem; color: var(--slate); font-size: 0.9rem; } /* ---------- company ---------- */ .co-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: start; } .co-body { color: var(--slate); max-width: 54ch; } .co-facts { border-top: 1px solid var(--hairline); } .co-facts > div { display: flex; justify-content: space-between; gap: 18px; padding: 14px 2px; border-bottom: 1px solid var(--hairline); } .co-facts dt { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); padding-top: 3px; } .co-facts dd { font-weight: 500; text-align: right; } /* ---------- contact ---------- */ .ct-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .ct-copy p { color: var(--slate); } .ct-mail { margin-top: 1.2rem; font-family: var(--font-mono); font-size: 0.95rem; } .ct-form { display: grid; gap: 16px; } .ct-form label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink); } .ct-form input, .ct-form textarea { font-family: var(--font-body); font-size: 0.97rem; color: var(--ink); background: var(--ice); border: 1px solid var(--hairline); border-radius: 8px; padding: 11px 13px; width: 100%; } .ct-form input:focus, .ct-form textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 15%, transparent); } .ct-form textarea { resize: vertical; } .ct-form .btn { justify-self: start; } .hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; } .flash { border-radius: 8px; padding: 11px 14px; font-size: 0.92rem; } .flash-ok { background: var(--flash-ok-bg); color: var(--flash-ok-fg); border: 1px solid var(--flash-ok-bd); } .flash-error { background: var(--flash-err-bg); color: var(--flash-err-fg); border: 1px solid var(--flash-err-bd); } /* ---------- legal (privacy) ---------- */ .legal-wrap { max-width: 680px; } .legal-title { margin-bottom: 0.3rem; } .legal-updated { font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate); margin-bottom: 2rem; } .legal-wrap h2 { font-size: 1.1rem; margin: 1.8rem 0 0.5rem; } .legal-wrap p { color: var(--slate); font-size: 0.97rem; } .legal-wrap code { font-family: var(--font-mono); font-size: 0.85em; } /* ---------- footer ---------- */ .site-foot { border-top: 1px solid var(--hairline); padding: 34px 0 42px; } .foot-row { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: baseline; } .foot-name { font-family: var(--font-display); font-weight: 600; margin-right: 12px; } .foot-meta, .foot-legal { font-family: var(--font-mono); font-size: 0.72rem; color: var(--slate); letter-spacing: 0.04em; } .foot-links { display: flex; gap: 20px; margin-left: auto; } .foot-links a { font-size: 0.88rem; } .foot-legal { width: 100%; } /* ---------- reveal ---------- */ /* Gatat på .js (sätts av site.js): utan skript förblir allt synligt. */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .terminal.animate .hop { opacity: 1; animation: none; } } /* ---------- responsive ---------- */ @media (max-width: 860px) { .hero { padding: 56px 0 48px; } .hero-grid, .co-grid, .ct-grid { grid-template-columns: 1fr; gap: 36px; } .svc-grid, .prod-grid { grid-template-columns: 1fr; } .site-nav { display: none; } .band { padding: 56px 0; } }