/* ───────────────────────────────────────────────────────────── 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); } /* Mörkt läge borttaget för detta projekt — sajten är låst till ljust. */ /* ─── 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; } 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); }