/* Innsýn — Custom Styles */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { --navy: #0D1F2D; --teal: #1A6B72; --teal-dark: #14555B; --ice: #A8D5DA; --frost: #E8F4F6; --white: #FFFFFF; --gray: #6B7280; --radius: 12px; --radius-sm: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--navy); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Typography ── */ /* Display = Space Grotesk (headlines), body = Inter (set on ). */ .font-display { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; } /* ── Navigation ── */ .nav-glass { background: rgba(13, 31, 45, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(168, 213, 218, 0.12); } .nav-link { color: rgba(255, 255, 255, 0.75); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.03em; text-decoration: none; transition: color 0.2s ease; padding: 0.25rem 0; position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--ice); transition: width 0.25s ease; } .nav-link:hover { color: var(--ice); } .nav-link:hover::after { width: 100%; } .nav-link.active { color: var(--ice); } .nav-link.active::after { width: 100%; } .break-spaces{ white-space: break-spaces; } /* ── Hero ── */ .hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.03); transition: transform 8s ease-out; } .hero-bg.loaded { transform: scale(1); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(13, 31, 45, 0.80) 0%, rgba(13, 31, 45, 0.48) 42%, rgba(13, 31, 45, 0.12) 100% ), linear-gradient(to top, rgba(13, 31, 45, 0.45), rgba(13, 31, 45, 0) 35%); } .hero-content { position: relative; z-index: 10; } /* ── Buttons ── */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--teal); color: var(--white); padding: 0.875rem 1.75rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; border: 1px solid var(--teal); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(26, 107, 114, 0.25); } .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--white); padding: 0.875rem 1.75rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn-outline:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--white); color: var(--white); transform: translateY(-1px); } /* ── Section Label ── */ .section-label { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; } /* ── Service Cards ── */ .service-card { padding: 2.5rem; border: 1px solid #E5EDF0; background: var(--white); border-radius: var(--radius); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .service-card:hover { border-color: var(--ice); box-shadow: 0 14px 36px rgba(13, 31, 45, 0.09); transform: translateY(-3px); } .service-icon { width: 52px; height: 52px; background: var(--frost); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--teal); transition: background 0.25s ease, color 0.25s ease; } .service-card:hover .service-icon { background: var(--teal); color: var(--white); } /* ── Image Sections ── */ .img-landscape { position: relative; overflow: hidden; border-radius: var(--radius); } .img-landscape img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; } .img-landscape:hover img { transform: scale(1.03); } /* Showcase loop video — fills its .img-landscape frame, no hover zoom. */ .showcase-video { display: block; width: 100%; height: 100%; object-fit: cover; } .logo{ width: 36px; height: 36px; overflow: hidden; border-radius: 1000px; } .logo img { position: relative; max-width:none; top: -6px; left: -9px; } /* ── Founder Cards ── */ .founder-card { padding: 2.5rem; border: 1px solid #E5EDF0; background: var(--white); border-radius: var(--radius); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .founder-card:hover { border-color: var(--ice); box-shadow: 0 14px 36px rgba(13, 31, 45, 0.09); transform: translateY(-3px); } /* ── Footer ── */ .footer { background: var(--navy); color: rgba(255, 255, 255, 0.55); } .footer-link { color: rgba(255, 255, 255, 0.55); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; } .footer-link:hover { color: var(--ice); } /* ── Divider ── */ .divider { height: 1px; background: linear-gradient(to right, transparent, var(--ice), transparent); opacity: 0.3; } /* ── Utility ── */ .section-pad { padding: 6rem 0; } .section-pad-sm { padding: 4rem 0; } /* ── Language Switcher ── */ .lang-btn { background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; padding: 2px 0; transition: color 0.2s ease; font-family: 'Inter', system-ui, sans-serif; } .lang-btn:hover { color: var(--ice); } .lang-btn.active-lang { color: var(--ice); } .lang-sep { color: rgba(255, 255, 255, 0.2); font-size: 0.65rem; user-select: none; } /* ── Scroll Reveal ── */ /* Gated on `.js` (set on before paint) so no-JS readers and crawlers always see fully visible content. */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .js .reveal.in { opacity: 1; transform: none; } } /* ── Media queries ── */ @media (max-width: 767px) { /* Hero */ .hero { min-height: 480px; } /* Section spacing */ .section-pad { padding: 3rem 0; } .section-pad-sm { padding: 2rem 0; } /* Cards: tighter padding on small screens */ .service-card, .founder-card { padding: 1.5rem; } /* Buttons: full-width on very small screens */ .btn-primary, .btn-outline { width: 100%; justify-content: center; } } @media (min-width: 768px) and (max-width: 1023px) { /* Tablet */ .section-pad { padding: 5rem 0; } .section-pad-sm { padding: 3rem 0; } }