/* ───────────────────────────────────────────────────────────── liot-style — designtokens + basreset Kopiera in i ditt projekts style.css. Lägg Google Fonts-länken i : Instrument Serif (ital), Space Grotesk (300–700), Space Mono (400, 700). ───────────────────────────────────────────────────────────── */ :root { --black: #000000; --white: #ffffff; --off-white: #f5f5f5; --grey-100: #e8e8e8; --grey-200: #d0d0d0; --grey-400: #888888; --grey-600: #555555; --grey-800: #222222; --grey-900: #111111; --ai-yellow: #f0c800; --ai-yellow-soft: #fff7c2; --f-serif: 'Instrument Serif', Georgia, serif; --f-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --f-mono: 'Space Mono', ui-monospace, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); } :root, [data-theme="light"] { --bg: var(--off-white); --card: var(--white); --card-2: #ececec; --text: var(--black); --text-2: var(--grey-800); --subtext: var(--grey-400); --dim: var(--grey-600); --border: var(--grey-100); --border-strong: var(--grey-200); --input-bg: var(--white); --input-border: var(--grey-200); --pill-bg: var(--grey-100); --pill-text: var(--grey-800); } [data-theme="dark"] { --bg: var(--black); --card: var(--grey-900); --card-2: #1a1a1a; --text: var(--white); --text-2: var(--grey-200); --subtext: #b0b0b0; --dim: #999999; --border: var(--grey-800); --border-strong: #3a3a3a; --input-bg: #0d0d0d; --input-border: #2a2a2a; --pill-bg: var(--grey-800); --pill-text: var(--grey-200); --ai-yellow-soft: #2a2308; } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--f-sans); font-size: 14px; -webkit-font-smoothing: antialiased; transition: background .3s var(--ease), color .3s var(--ease); } body { display: flex; flex-direction: column; position: relative; overflow-x: hidden; } /* Signatur: brusoverlay på 3 % opacity. Ta bort denna regel om du inte vill ha den, men det är en del av karaktären. */ body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 128px 128px; } ::selection { background: var(--text); color: var(--bg); } a { color: var(--text); } /* ─── Knappar ─── */ .btn-primary, .cta-primary { background: var(--text); color: var(--bg); border: 1px solid var(--text); border-radius: 0; padding: 16px 28px; font-family: var(--f-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .btn-primary:hover, .cta-primary:hover { background: transparent; color: var(--text); } .btn-secondary, .cta-secondary { background: transparent; color: var(--text); border: 1px solid var(--text); border-radius: 0; padding: 15px 22px; font-family: var(--f-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .btn-secondary:hover, .cta-secondary:hover { background: var(--text); color: var(--bg); } .theme-btn { background: transparent; color: var(--text); border: 1px solid var(--text); border-radius: 0; padding: 8px 14px; cursor: pointer; font-family: var(--f-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: background .2s var(--ease), color .2s var(--ease); } .theme-btn:hover { background: var(--text); color: var(--bg); } /* ─── Inputs ─── */ input[type="text"], input[type="email"], input[type="search"], select, textarea { width: 100%; padding: 10px 12px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 0; font-family: var(--f-sans); font-size: 13px; color: var(--text); outline: none; transition: border-color .15s var(--ease); } input:focus, select:focus, textarea:focus { border-color: var(--text); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; } /* ─── Typografi ─── */ .eyebrow { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } .lede { font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; color: var(--text-2); max-width: 760px; } .hero-h1 { font-family: var(--f-serif); font-size: clamp(56px, 9vw, 110px); font-weight: 400; letter-spacing: -0.03em; line-height: 0.95; } .section-h2 { font-family: var(--f-serif); font-size: clamp(36px, 5vw, 56px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; } /* ─── Chips / pills ─── */ .chip { display: inline-block; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 7px; background: var(--pill-bg); color: var(--pill-text); white-space: nowrap; border: 1px solid transparent; } .chip.chip-outline { background: transparent; border-color: var(--border-strong); color: var(--text-2); } .chip.chip-strong { background: transparent; border: 1px solid var(--text); color: var(--text); } .chip.chip-ai { background: var(--ai-yellow); color: #000; border-color: var(--ai-yellow); } .chip.chip-dashed { background: transparent; border: 1px dashed var(--border-strong); color: var(--dim); } .chip.chip-placeholder{ background: transparent; border: 1px dashed var(--text); color: var(--text); } /* ─── Stats / steps — sömlöst 1px-rutnät ─── */ .grid-frame { display: grid; gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .grid-frame > .cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--card); padding: 20px 16px; } .grid-frame.stats { grid-template-columns: repeat(6, 1fr); } .grid-frame.steps { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .grid-frame.stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .grid-frame.steps { grid-template-columns: 1fr; } } @media (max-width: 540px) { .grid-frame.stats { grid-template-columns: repeat(2, 1fr); } } .stat-num { font-family: var(--f-serif); font-size: 42px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; } .stat-num.ai { background: var(--ai-yellow); color: #000; padding: 0 8px; display: inline-block; } .stat-label { font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); line-height: 1.3; } /* ─── AI-explainer ─── */ .ai-explainer { background: var(--card-2); border-left: 3px solid var(--ai-yellow); padding: 22px 24px; max-width: 760px; } .ai-explainer p { font-size: 14px; line-height: 1.55; color: var(--text-2); } .ai-tag { display: inline-block; background: var(--ai-yellow); color: #000; padding: 2px 8px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; } /* ─── Email-/quote-row ─── */ .quote-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--card-2); border-left: 2px solid var(--text); font-family: var(--f-mono); font-size: 11px; color: var(--text); } /* ───────────────────────────────────────────────────────────── Landing-page — scrollytelling ───────────────────────────────────────────────────────────── */ html { scroll-padding-top: 64px; } html.snap { scroll-snap-type: y proximity; } @media (prefers-reduced-motion: reduce) { html.snap { scroll-snap-type: none; } } .section { scroll-snap-align: start; scroll-snap-stop: normal; } .land-ease-out { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ── Section dots ── */ .section-dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 95; display: flex; flex-direction: column; gap: 14px; pointer-events: auto; } .section-dot { position: relative; display: block; width: 10px; height: 10px; border: 1px solid var(--text); background: transparent; border-radius: 50%; transition: background .2s var(--ease), transform .2s var(--ease); } .section-dot.is-active { background: var(--text); transform: scale(1.25); } .section-dot:hover { background: var(--text); } .section-dot::after { content: attr(aria-label); position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(4px); font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); background: var(--bg); border: 1px solid var(--text); padding: 3px 8px 2px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); } .section-dot:hover::after, .section-dot:focus::after { opacity: 1; transform: translateY(-50%) translateX(0); } @media (max-width: 720px) { .section-dots { display: none; } } /* ── Top nav ── */ .top-nav { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), padding .25s var(--ease); } .top-nav.is-scrolled { border-bottom-color: var(--border); padding-top: 12px; padding-bottom: 12px; } .top-wordmark { font-family: var(--f-serif); font-weight: 400; font-size: 22px; letter-spacing: 0.01em; line-height: 1; color: var(--text); text-decoration: none; transition: opacity .15s var(--ease); } .top-wordmark:hover { opacity: .72; } .top-actions { display: flex; align-items: center; gap: 14px; } .top-link { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .15s var(--ease), border-color .15s var(--ease); } .top-link:hover { color: var(--text); border-bottom-color: var(--text); } .top-cta { font-family: var(--f-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 8px 14px; border: 1px solid var(--text); color: var(--text); background: transparent; transition: background .15s var(--ease), color .15s var(--ease); } .top-cta:hover { background: var(--text); color: var(--bg); } @media (max-width: 720px) { .top-wordmark { font-size: 18px; } .top-cta { font-size: 10px; padding: 7px 10px; } .top-actions { gap: 10px; } .top-link { font-size: 10px; } .top-nav { padding: 12px 18px; } } /* ── Reveal primitive ── */ [data-reveal] { opacity: 0; transition: opacity .8s cubic-bezier(0.22, 1, 0.36, 1), transform .8s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal].reveal-slide { transform: translateY(20px); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal][data-delay="1"] { transition-delay: 0.1s; } [data-reveal][data-delay="2"] { transition-delay: 0.2s; } [data-reveal][data-delay="3"] { transition-delay: 0.3s; } [data-reveal][data-delay="4"] { transition-delay: 0.4s; } [data-reveal][data-delay="5"] { transition-delay: 0.5s; } [data-reveal][data-delay="6"] { transition-delay: 0.6s; } [data-reveal][data-delay="7"] { transition-delay: 0.7s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ── Section base ── */ .section { padding: clamp(80px, 14vh, 160px) 32px; width: 100%; max-width: 1200px; margin: 0 auto; text-align: center; position: relative; } .section-head { max-width: 720px; margin: 0 auto 48px; } .kicker { display: inline-block; padding: 4px 10px; background: var(--text); color: var(--bg); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 20px; } .kicker-yellow { background: var(--ai-yellow); color: #000; } .section h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(40px, 6vw, 76px); letter-spacing: 0.01em; line-height: 1.05; margin-bottom: 24px; } .section h2 em { font-style: italic; background: var(--ai-yellow); padding: 0 8px; margin: 0 -4px; } .section-head p, .section > p:not(.kicker) { font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 2vw, 24px); color: var(--text-2); max-width: 620px; margin: 0 auto 28px; line-height: 1.5; } /* ── Hero ── */ .hero { min-height: calc(100vh - 60px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 60px; padding-bottom: 80px; } .hero .kicker { margin-bottom: 28px; } .hero-title { font-family: var(--f-serif); font-weight: 400; font-size: clamp(72px, 14vw, 180px); letter-spacing: 0.01em; line-height: 0.9; margin-bottom: 28px; } .hero-lede { font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 2.5vw, 28px); color: var(--text-2); max-width: 600px; margin: 0 auto 40px; line-height: 1.45; } .hero-cta { margin-top: 8px; } .hero-alt-link { display: inline-block; margin-top: 24px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 2px; transition: color .15s var(--ease), border-color .15s var(--ease); } .hero-alt-link:hover { color: var(--text); border-color: var(--text); } .scroll-hint { margin-top: 64px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 10px; justify-content: center; } .scroll-hint .arrow { display: inline-block; animation: scrollHintBob 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes scrollHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ── CTA row (landing variant: centered) ── */ .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; } .cta-primary:hover, .cta-secondary:hover { transform: translateY(-1px); } /* ── Quote (problem) section ── */ .section-quote { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .section-quote .quote-pre, .section-quote .quote-post, .section-quote .quote-sub { font-family: var(--f-serif); font-style: italic; font-size: clamp(28px, 5vw, 56px); color: var(--text-2); line-height: 1.1; margin: 12px 0; } .section-quote .quote-sub { color: var(--dim); font-size: clamp(20px, 3vw, 30px); margin-top: 32px; } .section-quote .quote-num { font-family: var(--f-serif); font-size: clamp(140px, 22vw, 320px); font-weight: 400; line-height: 0.9; letter-spacing: -0.02em; margin: 16px 0; } .section-quote .quote-num.has-yellow { background: var(--ai-yellow); color: #000; padding: 0 24px; display: inline-block; } /* ── Demo card (mini-app preview) ── */ .demo-card { max-width: 720px; margin: 0 auto; } .demo-frame { position: relative; background: var(--card); border: 1px solid var(--text); padding: 32px 28px; box-shadow: 0 12px 40px rgba(0,0,0,0.08); text-align: left; } .demo-eyebrow { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin-bottom: 22px; } .demo-persons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } @media (max-width: 540px) { .demo-persons { grid-template-columns: 1fr; } } .demo-person { background: var(--card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 20px; } .demo-pname { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; } .demo-pamt-wrap { line-height: 1; } .demo-pamt { font-family: var(--f-serif); font-weight: 400; font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.02em; line-height: 1; background: transparent; color: var(--text); padding: 2px 8px; display: inline-block; transition: background .5s cubic-bezier(0.22, 1, 0.36, 1); } .demo-pamt.is-on { background: var(--ai-yellow); color: #000; } .demo-psub { font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 12px; } .demo-caption { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); text-align: center; margin-top: 16px; } /* ── Modes list ── */ .modes-list { max-width: 760px; margin: 0 auto; text-align: left; } .mode-row { padding: 36px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 80px 1fr 240px; gap: 32px; align-items: baseline; } .mode-row:first-child { border-top: none; } .mode-row .mode-num span { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--dim); font-weight: 700; } .mode-row h3 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.01em; margin-bottom: 12px; line-height: 1.15; } .mode-row p { font-family: var(--f-sans); font-style: normal; font-size: 16px; color: var(--text-2); line-height: 1.6; max-width: 540px; margin: 0; } .mode-example { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; line-height: 1.7; color: var(--text-2); border-left: 2px solid var(--ai-yellow); padding: 12px 14px; background: var(--card-2); } .mode-example b { color: var(--text); font-weight: 700; } @media (max-width: 800px) { .mode-row { grid-template-columns: 1fr; gap: 14px; } } /* ── Privacy / local-first ── */ .section-privacy { background: var(--text); color: var(--bg); max-width: none; padding-left: 32px; padding-right: 32px; } .section-privacy .privacy-mark { margin-bottom: 24px; } .section-privacy .privacy-claim { font-family: var(--f-serif); font-weight: 400; font-size: clamp(48px, 8vw, 96px); letter-spacing: 0.01em; line-height: 1.05; margin-bottom: 24px; } .section-privacy .privacy-claim em { font-style: italic; background: var(--ai-yellow); color: #000; padding: 0 12px; } .section-privacy p.privacy-sub { font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 2vw, 24px); color: #e0e0e0 !important; max-width: 640px; margin: 0 auto 48px; line-height: 1.5; } .privacy-list { list-style: none; max-width: 540px; margin: 0 auto; text-align: left; } .privacy-list li { padding: 14px 0; border-top: 1px solid #222; font-family: var(--f-sans); font-size: 16px; color: #d0d0d0; display: flex; align-items: baseline; gap: 14px; } .privacy-list li:first-child { border-top: none; } .privacy-list .check { color: var(--ai-yellow); font-size: 10px; line-height: 1; } .privacy-list code { font-family: var(--f-mono); font-size: 13px; background: #222; color: var(--ai-yellow); padding: 1px 5px; } /* ── Stats grid (count-up) ── */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); max-width: 960px; margin: 0 auto; } .stat-cell { padding: 36px 16px; border-right: 1px solid var(--border); text-align: center; } .stat-cell:last-child { border-right: none; } .stat-cell .num { font-family: var(--f-serif); font-size: clamp(48px, 6vw, 80px); font-weight: 400; letter-spacing: 0.01em; line-height: 1; margin-bottom: 10px; } .stat-cell .num-plus { font-size: 0.6em; vertical-align: 0.3em; margin-left: 4px; } .stat-cell .label { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); } @media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-cell { border-bottom: 1px solid var(--border); } .stat-cell:nth-child(odd) { border-right: 1px solid var(--border); } .stat-cell:nth-child(even) { border-right: none; } } /* ── Final CTA ── */ .section-cta { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .section-cta h2 { font-size: clamp(48px, 8vw, 96px); } .section-cta > p { font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 2.5vw, 28px); margin-bottom: 36px; color: var(--text-2); } /* ── Page footer ── */ .page-footer { border-top: 1px solid var(--border); padding: 28px 32px; font-family: var(--f-mono); font-size: 11px; color: var(--dim); line-height: 1.6; letter-spacing: 0.02em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; } .page-footer a { color: var(--text); border-bottom: 1px solid var(--border-strong); text-decoration: none; padding-bottom: 1px; } .page-footer a:hover { border-color: var(--text); } .page-footer .sep { color: var(--dim); margin: 0 8px; } @media (max-width: 720px) { .section { padding: 80px 18px; } .section-privacy { padding-left: 18px; padding-right: 18px; } .page-footer { padding: 22px 18px; } }