/* Self-hosted fonts — Inter + JetBrains Mono */ @font-face {font-family:"Inter"; src:url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face {font-family:"Inter"; src:url("/fonts/Inter-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face {font-family:"Inter"; src:url("/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face {font-family:"Inter"; src:url("/fonts/Inter-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face {font-family:"Inter"; src:url("/fonts/Inter-Bold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; } @font-face {font-family:"JetBrains Mono"; src:url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face {font-family:"JetBrains Mono"; src:url("/fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } /* === variables.css === */  *, *::before, *::after {margin:0; padding:0; box-sizing:border-box; } :root {--paper:#f3efe6; --steel:#ebe4d6; --ink:#1a1814; --paper-dim:#5c574c; --paper-mute:#6f6a60; --rule:rgba(26, 24, 20, 0.14); --rule-strong:rgba(26, 24, 20, 0.22); --brass:#9a4a08; --rust:#8f3b2a; --cyan:#06b6d4; --emerald:#047857; --purple:#a855f7; --red:#b91c1c; --mono:"JetBrains Mono", ui-monospace,"Cascadia Code","SF Mono", Consolas, monospace; --sans:"Inter", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, sans-serif; } html {scrollbar-width:thin; scrollbar-color:var(--rule-strong) var(--paper); } /* ============================================================ SCROLL PROGRESS BAR ============================================================ */ #scroll-progress {position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg, var(--brass), var(--cyan), var(--purple)); z-index:99999; width:0%; transition:width 0.1s linear; box-shadow:none; } html {scroll-padding-top:70px; } body {font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.6; overflow-x:hidden; cursor:default; } ::-webkit-scrollbar {width:6px; } ::-webkit-scrollbar-track {background:var(--paper); } ::-webkit-scrollbar-thumb {background:var(--rule-strong); border-radius:3px; } /* ============================================================ FOCUS VISIBLE ============================================================ */ :focus-visible {outline:2px solid var(--brass); outline-offset:2px; } :focus:not(:focus-visible) {outline:none; } /* ============================================================ PRINT STYLES ============================================================ */ @media print {body {background:white !important; color:black !important; }  #scroll-progress {display:none !important; } nav, footer {display:none !important; } section {page-break-inside:avoid; } a {color:black; text-decoration:underline; } body::before, body::after {display:none !important; }  } /* ============================================================ NAVIGATION ============================================================ */ /* Scope to primary chrome only — page-local <nav > (e.g. .be-jump) must not inherit fixed full-width. */ #navbar {position:fixed; top:0; width:100%; z-index:1000; background:var(--paper); backdrop-filter:none; border-bottom:1px solid var(--rule); transition:border-color 0.3s, box-shadow 0.3s; } #navbar.scrolled {border-color:var(--brass); box-shadow:none; } .nav-inner {max-width:1200px; margin:0 auto; padding:0.8rem 2rem; display:flex; justify-content:space-between; align-items:center; } .nav-logo {font-family:var(--mono); font-size:0.9rem; font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:0.1em; text-transform:uppercase; transition:opacity 0.2s ease, color 0.2s ease; display:flex; align-items:center; gap:0.5rem; } .nav-logo-img {height:3em; width:auto; max-width:none; object-fit:contain; vertical-align:middle; transition:opacity 0.2s ease, transform 0.2s ease; } /* ============================================================ NAV LIVE CLOCK ============================================================ */ .nav-links {display:flex; gap:2rem; list-style:none; align-items:center; } .nav-toggle {display:none; background:none; border:1px solid var(--rule); color:var(--ink); padding:0.4rem 0.6rem; border-radius:4px; cursor:pointer; font-family:var(--mono); font-size:0.8rem; } .nav-toggle:hover {border-color:var(--brass); color:var(--brass); }  /* Mobile nav overlay — above fixed nav (z-index 1000) so close is tappable */ .nav-overlay {position:fixed; inset:0; background:var(--paper); backdrop-filter:none; z-index:1100; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.3s, visibility 0.3s; } .nav-overlay.active {opacity:1; visibility:visible; pointer-events:auto; } .nav-close {position:absolute; top:max(0.75rem, env(safe-area-inset-top, 0px)); right:max(0.75rem, env(safe-area-inset-right, 0px)); z-index:2; background:none; border:1px solid var(--rule); border-radius:4px; color:var(--paper-mute); font-family:var(--mono); font-size:1.25rem; line-height:1; min-width:2.75rem; min-height:2.75rem; padding:0.5rem; cursor:pointer; -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; justify-content:center; } .nav-close:hover, .nav-close:focus-visible {color:var(--brass); border-color:var(--brass); outline:none; } .nav-links a {font-family:var(--mono); color:var(--paper-dim); text-decoration:none; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.15em; transition:color 0.2s, text-shadow 0.2s; position:relative; } .nav-links a.active, .nav-links a[aria-current="page"] {color:var(--brass); } .nav-links a::after {content:""; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--brass); transition:width 0.3s; box-shadow:none; } .nav-links a:hover {color:var(--brass); text-shadow:0 0 10px transparent; } .nav-links a:hover::after {width:100%; } /* ============================================================ MOBILE NAV RESPONSIVE ============================================================ */ @media (max-width:1100px) and (min-width:769px) {.nav-links {gap:0.85rem; } .nav-links a {font-size:0.68rem; letter-spacing:0.08em; } .nav-inner {padding:0.8rem 1rem; }  } .nav-inner {gap:0.75rem; } .nav-links {flex-wrap:wrap; justify-content:flex-end; max-width:min(820px, 100%); } @media (max-width:768px) {.nav-links {display:none !important; } .nav-toggle {display:block !important; }  } @media (min-width:769px) {.nav-links {display:flex !important; } .nav-toggle {display:none !important; }  } /* ============================================================ HERO SECTION — Fonnebust AS ============================================================ */ .hero {position:relative; min-height:100vh; display:flex; /* ~ 50% closer to top than true vertical center (nav-safe) */ align-items:flex-start; justify-content:center; padding:clamp(5rem, 12vh, 8.5rem) 2rem 2.5rem; overflow:hidden; z-index:1; }  .hero-title {font-size:clamp(3rem, 8vw, 6rem); font-weight:800; letter-spacing:-0.03em; line-height:1.12; margin-bottom:1.75rem; padding-bottom:0.12em; position:relative; } .hero-title .line1 {display:block; color:var(--ink); } .hero-title .line2 {display:block; background:linear-gradient(135deg, var(--brass), var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; padding-bottom:0.08em; } .hero-cta-group {display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; } .btn-primary {display:inline-flex; align-items:center; gap:0.5rem; padding:0.8rem 2rem; background:var(--brass); color:#000; font-family:var(--mono); font-size:0.8rem; font-weight:600; text-decoration:none; text-transform:uppercase; letter-spacing:0.1em; border-radius:4px; border:none; cursor:pointer; transition:all 0.3s; position:relative; overflow:hidden; } .btn-primary::before {content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform:translateX(-100%); transition:transform 0.5s; } .btn-primary:hover::before {transform:translateX(100%); } .btn-primary:hover {box-shadow:none; transform:translateY(-2px); } /* Solid cyan CTA — filled like .btn-primary (amber), cyan brand */ .btn-cyan {display:inline-flex; align-items:center; gap:0.5rem; padding:0.8rem 2rem; background:var(--cyan); color:#000; font-family:var(--mono); font-size:0.8rem; font-weight:600; text-decoration:none; text-transform:uppercase; letter-spacing:0.1em; border-radius:4px; border:none; cursor:pointer; transition:all 0.3s; position:relative; overflow:hidden; } .btn-cyan::before {content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform:translateX(-100%); transition:transform 0.5s; } .btn-cyan:hover::before {transform:translateX(100%); } .btn-cyan:hover {box-shadow:0 0 60px rgba(6, 182, 212, 0.25); transform:translateY(-2px); color:#000; } .hero-cta-group{display:flex; flex-wrap:wrap; gap:0.85rem 1rem; align-items:center; justify-content:center; width:100%; margin-left:auto; margin-right:auto; } /* ============================================================ SECTIONS — Shared styles for services + portfolio pages ============================================================ */ section {position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:6rem 2rem; } .section-header {text-align:center; margin-bottom:4rem; } .section-label {font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.3em; color:var(--brass); margin-bottom:0.8rem; display:flex; align-items:center; justify-content:center; gap:0.8rem; } .section-label::before, .section-label::after {content:""; width:30px; height:1px; background:var(--brass); opacity:0.5; } .section-title {font-size:clamp(1.8rem, 4vw, 2.8rem); font-weight:700; letter-spacing:-0.02em; margin-bottom:1rem; } .section-desc {color:var(--paper-dim); max-width:600px; margin:0 auto; font-size:1rem; } /* ============================================================ FOOTER (Services page) ============================================================ */ .footer-inner {display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; } .footer-left {display:flex; align-items:center; gap:1.5rem; } .footer-logo {font-family:var(--mono); font-size:0.8rem; font-weight:700; color:var(--ink); letter-spacing:0.1em; text-transform:uppercase; }  .footer-right {display:flex; align-items:center; gap:1rem; }  .footer-privacy {font-family:var(--mono); font-size:0.65rem; color:var(--emerald); } @media (max-width:900px) {.market-signals-grid {grid-template-columns:1fr; gap:1rem; }  } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce) {*, *::before, *::after {animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* ============================================================ NAV OVERLAY LINKS ============================================================ */ .nav-overlay-links {list-style:none; text-align:center; display:flex; flex-direction:column; gap:2rem; } .nav-overlay-links a {font-family:var(--mono); font-size:1.5rem; color:var(--paper-dim); text-decoration:none; text-transform:uppercase; letter-spacing:0.2em; transition:color 0.2s; } .nav-overlay-links a:hover {color:var(--brass); text-shadow:0 0 20px transparent; } /* ============================================================ ABOUT — lead + profile stats strip + design-target callout ============================================================ */ #advantage .section-header {margin-bottom:1.75rem; } #advantage .section-desc {max-width:46rem; } /* Services page shell */ .services-main {max-width:1100px; margin:0 auto; padding:6.5rem 1.5rem 4rem; } .services-page-section .section-title {margin-bottom:0.5rem; } .services-page-section h1.section-title {font-size:clamp(1.85rem, 4.2vw, 2.6rem); font-weight:800; letter-spacing:-0.03em; line-height:1.15; } #services .section-header {text-align:left; margin-bottom:2.75rem; } #services .section-label {justify-content:flex-start; } #services .section-label::before, #services .section-label::after {display:none; } #services .section-desc {margin-left:0; max-width:44rem; font-size:1.05rem; line-height:1.7; } /* ============================================================ COLOR UTILITIES — Extracted from inline styles ============================================================ */ /* Contact availability value */ .availability-open {color:var(--emerald); } /* Footer norshapes link */ .market-signals {padding:4rem 2rem; } .market-signals-inner {max-width:1200px; margin:0 auto; } .market-signals-header {text-align:center; margin-bottom:3rem; } .market-signals-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; } .market-signal-card {display:flex; gap:1rem; padding:1.5rem; background:var(--steel); border:1px solid var(--rule); border-radius:8px; transition:all 0.3s; align-items:flex-start; } .market-signal-card:hover {border-color:var(--brass); box-shadow:none; transform:translateY(-2px); } .market-signal-icon {font-size:1.5rem; flex-shrink:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(249, 115, 22, 0.08); border-radius:6px; } .market-signal-body {flex:1; min-width:0; } .market-signal-title {font-size:0.95rem; font-weight:600; color:var(--ink); margin-bottom:0.4rem; line-height:1.3; } .market-signal-desc {font-size:0.82rem; color:var(--paper-dim); line-height:1.6; margin:0; } /* ============================================================ RESPONSIVE — Missing section overrides ============================================================ */ @media (max-width:900px) {.market-signals-grid {grid-template-columns:1fr; gap:1rem; }  } /* .nav-overlay-link - mobile nav overlay links */ .nav-overlay-link {display:block; padding:1rem 1.5rem; color:var(--ink); text-decoration:none; font-size:1rem; transition:color 0.2s; } .nav-overlay-link:hover {color:var(--brass); } /* ============================================================ FOOTER ============================================================ */ footer {position:relative; z-index:1; text-align:center; padding:2rem; border-top:1px solid var(--rule); } .footer-inner {max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.55rem; text-align:center; padding:0 2rem; } .footer-left {display:flex; flex-direction:column; align-items:center; gap:0.35rem; } .footer-right {display:flex; flex-direction:column; align-items:center; gap:0.35rem; } .footer-logo {font-family:var(--mono); font-size:0.8rem; font-weight:700; color:var(--ink); letter-spacing:0.1em; }  .footer-privacy {font-family:var(--mono); font-size:0.7rem; color:var(--emerald); } .footer-copy {font-size:0.7rem; color:var(--paper-mute); } /* ============================================================ FOOTER + STATUS RESPONSIVE ============================================================ */ @media (max-width:768px) {.footer-inner {flex-direction:column; gap:0.5rem; text-align:center; } .footer-left, .footer-right {flex-direction:column; gap:0.3rem; } } /* ============================================================ REVEAL ANIMATIONS ============================================================ */ .reveal {opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; } .reveal.visible {opacity:1; transform:translateY(0); } /* ============================================================ RESPONSIVE — Shared overrides ============================================================ */  @media (max-width:768px) {section {padding:4rem 1rem; } } @media (max-width:480px) {.hero {/* Keep nav clearance; still tighter to top than centered */ padding-top:5rem; padding-bottom:2rem; }  .hero-title {font-size:2rem; } .hero-cta-group {flex-direction:column; align-items:center; } } /* ============================================================ COMPLIANCE COMPARISON — Local AI vs Cloud EU vs Cloud US Three-column comparison cards ============================================================ */ .compliance-inner {max-width:1200px; margin:0 auto; } .compliance-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-top:2.5rem; } .compliance-card {background:var(--steel); border:1px solid var(--rule); border-radius:10px; overflow:hidden; transition:all 0.3s; display:flex; flex-direction:column; } .compliance-card:hover {border-color:var(--rule-strong); transform:translateY(-2px); box-shadow:0 8px 30px rgba(0, 0, 0, 0.3); } /* Card accent color by tier */ .compliance-card.local {border-top:2px solid var(--emerald); } .compliance-card.eu {border-top:2px solid var(--brass); } .compliance-card.us {border-top:2px solid var(--red); } .compliance-card-header {display:flex; align-items:center; gap:0.8rem; padding:1.2rem 1.5rem; border-bottom:1px solid var(--rule); } .compliance-tier {font-size:1rem; flex-shrink:0; } .compliance-card-title {font-size:0.95rem; font-weight:600; color:var(--ink); } .compliance-card-body {padding:1.2rem 1.5rem; display:flex; flex-direction:column; gap:0.8rem; flex:1; } .compliance-stat {display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:0.72rem; } .compliance-stat-label {color:var(--paper-mute); text-transform:uppercase; letter-spacing:0.08em; } .compliance-stat-value {font-weight:600; } .compliance-stat-value.amber {color:var(--brass); } .compliance-stat-value.emerald {color:var(--emerald); } .compliance-stat-value.red {color:var(--red); } .compliance-card-footer {padding:1rem 1.5rem; border-top:1px solid var(--rule); background:rgba(255, 255, 255, 0.01); } .compliance-note {font-size:0.72rem; color:var(--paper-mute); line-height:1.5; } .compliance-bottom-line {margin-top:2rem; padding:1rem 1.5rem; text-align:center; background:rgba(16, 185, 129, 0.05); border:1px solid rgba(16, 185, 129, 0.15); border-radius:8px; } .compliance-bl-text {font-family:var(--mono); font-size:0.78rem; color:var(--emerald); line-height:1.5; } /* Responsive */ @media (max-width:900px) {.compliance-grid {grid-template-columns:1fr; gap:1rem; }  } /* ============================================================ PROOF LANDER — compact open surface (depth on /about/) ============================================================ */ /* Keep same fixed chrome as home so all nav destinations stay visible above content */ .about-page #navbar {position:fixed; top:0; left:0; right:0; width:100%; z-index:1000; } .about-main {position:relative; z-index:5; padding:6rem 1.25rem 4rem; } /* Contact page */ .contact-main {max-width:720px; margin:0 auto; padding:6.5rem 1.5rem 4rem; position:relative; z-index:1; } .contact-page-section .section-title {margin-bottom:1.5rem; }