/* ============================================ KJØPSVIK STAY AS – Main CSS Fargeskjema: Marineblå + Mint + Off-white ============================================ */ /* --- Google Fonts --- */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap'); /* --- CSS Custom Properties --- */ :root { /* Grunnfarger fra logo */ --color-ink: #0A1A2E; --color-ink-soft: #142437; --color-ink-deep: #050E1B; --color-paper: #F4F6F8; --color-paper-soft: #E8EDF2; --color-white: #FFFFFF; /* Aksent — mint/turkis fra logo */ --color-mint: #5EE3C7; --color-mint-deep: #2BB39A; --color-mint-soft: rgba(94, 227, 199, 0.12); /* Tekst */ --color-text: #0F1823; --color-text-muted: #5C6773; --color-text-on-dark: #E8EDF2; --color-text-on-dark-muted: #9AA5B3; /* Border */ --color-border: #D7DEE5; --color-border-dark: rgba(255, 255, 255, 0.08); /* Typografi */ --font-heading: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Kinesisk støtte — lastes kun når */ /* Layout */ --max-width: 1240px; --max-width-narrow: 880px; --padding-x: 1.5rem; --padding-x-lg: 2.5rem; /* Radius */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(10, 26, 46, 0.08); --shadow-md: 0 6px 24px rgba(10, 26, 46, 0.10); --shadow-lg: 0 14px 48px rgba(10, 26, 46, 0.18); --transition: 0.25s ease; --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--color-text); background-color: var(--color-paper); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--transition); } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* --- Typografi --- */ h1, h2, h3, h4, h5 { font-family: var(--font-heading); line-height: 1.15; color: var(--color-ink); font-weight: 500; letter-spacing: -0.01em; } h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 500; line-height: 1.05; } h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 500; } h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500; } h4 { font-size: 1.15rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0; } p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } .eyebrow { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-mint-deep); margin-bottom: 0.8rem; display: block; } .lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--color-text-muted); line-height: 1.6; max-width: 56ch; } /* --- Layout --- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--padding-x); } .container--narrow { max-width: var(--max-width-narrow); } section { padding: clamp(4rem, 8vw, 7rem) 0; } section.section--compact { padding: clamp(2.5rem, 5vw, 4rem) 0; } section.section--dark { background: var(--color-ink); color: var(--color-text-on-dark); } section.section--dark h1, section.section--dark h2, section.section--dark h3 { color: var(--color-white); } /* --- Kinesisk språkstøtte (forberedt, ikke aktivert) --- */ html[lang="zh"] { --font-body: 'Noto Sans SC', 'Inter', system-ui, sans-serif; --font-heading: 'Noto Serif SC', 'Cormorant Garamond', serif; }