/* ========================================================= TYPOS — grafisk designstudio style.css Roller: Bricolage Grotesque (display) · Inter (body) · Space Mono (utility) Tema: lyst som standard, [data-theme="dark"] på for mørkt ========================================================= */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap'); /* ---------- Tema-variabler ---------- */ :root{ --paper:#edece7; --surface:#e4e2db; --ink:#33322a; --muted:#6e6c63; --line:rgba(21,20,15,.14); --accent:#2233ff; /* trykksverte-blå */ --mark:#ff3a1e; /* korrektur-rød */ --paper-rgb:237,236,231; --maxw:1320px; --gutter:clamp(20px,5vw,72px); --r:14px; --ff-display:'Bricolage Grotesque',system-ui,sans-serif; --ff-body:'Inter',system-ui,sans-serif; --ff-mono:'Space Mono',ui-monospace,monospace; --ease:cubic-bezier(.2,.8,.2,1); --slow:cubic-bezier(.76,0,.24,1); } html[data-theme="dark"]{ --paper:#0c0c0a; --surface:#1b1916; --ink:#efede6; --muted:#908d84; --line:rgba(239,237,230,.16); --accent:#5a66ff; --mark:#ff5c42; --paper-rgb:16,15,13; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--ff-body); background:var(--paper); color:var(--ink); line-height:1.5; font-size:clamp(16px,1.05vw,18px); overflow-x:hidden; transition:background .5s var(--ease),color .5s var(--ease); } img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul{list-style:none} ::selection{background:var(--accent);color:#fff} /* ---------- Layout helpers ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .eyebrow{ font-family:var(--ff-mono); font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);display:inline-flex;align-items:center;gap:.6em; } .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;display:inline-block} .section{padding-block:clamp(72px,11vw,160px);border-top:1px solid var(--line)} .section-head{display:flex;flex-wrap:wrap;gap:1rem 3rem;align-items:baseline;margin-bottom:clamp(36px,6vw,72px)} .section-head h2{ font-family:var(--ff-display);font-weight:800;line-height:.95; font-size:clamp(2.1rem,6vw,4.4rem);letter-spacing:-.02em;flex:1 1 320px; } /* ---------- Mørk sone: Tjenester mørkner gradvis, styrt av scroll ---------- --p settes av JS (0 = lyst, 1 = helt mørkt). Alle fargene mikses kontinuerlig mellom lys og mørk palett med color-mix, så overgangen følger scroll-posisjonen i stedet for å bytte ved et punkt. */ #tjenester{ --p:0; --surface:color-mix(in srgb,#e4e2db, #1b1916 calc(var(--p)*100%)); --ink: color-mix(in srgb,#15140f, #efede6 calc(var(--p)*100%)); --muted: color-mix(in srgb,#6e6c63, #908d84 calc(var(--p)*100%)); --line: color-mix(in srgb,rgba(21,20,15,.14), rgba(239,237,230,.16) calc(var(--p)*100%)); --accent: color-mix(in srgb,#2233ff, #5a66ff calc(var(--p)*100%)); --mark: color-mix(in srgb,#ff3a1e, #ff5c42 calc(var(--p)*100%)); --paper: color-mix(in srgb,#edece7, #100f0d calc(var(--p)*100%)); background-color:var(--paper); color:var(--ink); } /* ---------- Header ---------- */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:60; display:flex;align-items:center;justify-content:space-between; padding:18px var(--gutter); mix-blend-mode:difference; /* logoen leses mot alt */ color:#fff; } html[data-theme="dark"] .site-header{mix-blend-mode:normal;color:var(--ink)} .brand{ font-family:var(--ff-display);font-weight:800;font-size:1.45rem; letter-spacing:-.02em;display:inline-flex;align-items:center;line-height:1; } .brand .caret{color:var(--mark);margin-left:.05em;animation:blink 1.1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .header-tools{display:flex;align-items:center;gap:clamp(10px,2vw,22px)} .tool{ font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.08em; display:inline-flex;align-items:center;gap:.4em;line-height:1; padding:6px 2px; } .lang-opt{opacity:.45;transition:opacity .25s} .lang-opt.is-active{opacity:1} .lang-sep{opacity:.45;margin-inline:.15em} .theme-toggle{width:34px;height:20px;border:1px solid currentColor;border-radius:20px;position:relative;padding:0} .theme-dot{position:absolute;top:50%;left:3px;width:12px;height:12px;border-radius:50%; background:currentColor;transform:translateY(-50%);transition:left .3s var(--slow)} html[data-theme="dark"] .theme-dot{left:17px} .menu-btn{ font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.6em; } .menu-btn::after{content:"";width:18px;height:8px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;display:inline-block;transition:transform .3s} .menu-btn:hover::after{transform:scaleX(.7)} /* ---------- Overlay-meny ---------- */ .overlay{ position:fixed;inset:0;z-index:80;background:var(--paper);color:var(--ink); display:grid;grid-template-rows:1fr auto; padding:clamp(90px,12vh,140px) var(--gutter) clamp(28px,5vh,48px); clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--slow); pointer-events:none; } .overlay.is-open{clip-path:inset(0 0 0 0);pointer-events:auto} .overlay-inner{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,80px);align-content:center;justify-content:space-between} .overlay-nav{flex:1 1 540px} .overlay-nav li{overflow:hidden} .overlay-nav a{ font-family:var(--ff-display);font-weight:700; font-size:clamp(2.6rem,9vw,6.5rem);line-height:1.02;letter-spacing:-.03em; display:inline-flex;align-items:center;gap:.25em; transform:translateY(110%);transition:transform .6s var(--slow); transition-delay:var(--d,0ms);color:var(--ink); } .overlay.is-open .overlay-nav a{transform:translateY(0)} .overlay-nav a .idx{font-family:var(--ff-mono);font-size:.85rem;font-weight:400;color:var(--muted);align-self:flex-start;margin-top:.4em} .overlay-nav a:hover{color:var(--accent)} .overlay-nav a::after{content:"‸";color:var(--mark);opacity:0;transform:translateX(-.3em);transition:.3s} .overlay-nav a:hover::after{opacity:1;transform:translateX(0)} .overlay-meta{flex:0 1 280px;display:flex;flex-direction:column;gap:1.8rem;align-self:center} .overlay-meta .col{display:flex;flex-direction:column;gap:.3em} .overlay-meta .label{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.4em} .overlay-meta a{transition:color .2s} .overlay-meta a:hover{color:var(--accent)} .overlay-foot{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding-top:18px;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)} .overlay-close{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em} .overlay-close::after{content:"×";font-size:1.4em;line-height:0} /* ---------- Hero ---------- */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding:120px var(--gutter) clamp(40px,7vh,72px);position:relative;overflow:hidden} .hero-showreel{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--surface)} .hero-showreel video,.hero-showreel .reel-fallback,.hero-showreel .reel-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* canvas-showreel ligger over den statiske fallbacken når JS er aktiv */ .reel-canvas{z-index:1;display:block} /* generativt "showreel" om ingen video er lagt inn */ .reel-fallback{ background: radial-gradient(120% 80% at 80% 10%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 60%), radial-gradient(90% 90% at 10% 90%,color-mix(in srgb,var(--mark) 18%,transparent),transparent 55%), var(--surface); } .reel-fallback::after{ content:"";position:absolute;inset:-40%; background:repeating-linear-gradient(115deg,transparent 0 38px,color-mix(in srgb,var(--ink) 5%,transparent) 38px 39px); animation:reeldrift 22s linear infinite; } @keyframes reeldrift{to{transform:translate(-39px,-39px)}} .hero::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(var(--paper-rgb),.9) 0%,rgba(var(--paper-rgb),.25) 45%,rgba(var(--paper-rgb),.05) 100%)} .hero > *{position:relative;z-index:2} .hero-eyebrow{margin-bottom:clamp(20px,4vh,40px)} .wordmark{ font-family:var(--ff-display);font-weight:800;line-height:.82; font-size:clamp(4.5rem,22vw,17rem);letter-spacing:-.04em; display:flex;align-items:flex-start; } .wordmark .caret{color:var(--mark);font-size:.32em;line-height:1;margin-top:.18em} .hero-kinetic{ font-family:var(--ff-display);font-weight:600; font-size:clamp(1.4rem,4.4vw,3rem);letter-spacing:-.02em;line-height:1.06; margin-top:clamp(14px,2.5vh,26px);max-width:18ch; } .rotator{color:var(--accent);position:relative;white-space:nowrap} .rotator.is-typo{color:var(--mark);text-decoration:line-through;text-decoration-thickness:.08em} .type-cursor{display:inline-block;width:.07em;height:1em;background:var(--ink);margin-left:.08em;transform:translateY(.12em);animation:blink 1s steps(1) infinite} .hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem; margin-top:clamp(30px,6vh,60px);border-top:1px solid var(--line);padding-top:18px} .hero-foot p{max-width:42ch;color:var(--muted)} .scrollcue{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;gap:.6em;align-items:center} .scrollcue::after{content:"↓";animation:bob 1.6s var(--ease) infinite} @keyframes bob{50%{transform:translateY(5px)}} /* ---------- Tjeneste-teaser / liste ---------- */ .svc-list{border-top:1px solid var(--line)} .svc{ display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,4vw,48px);align-items:center; padding:clamp(26px,4vw,46px) 0;border-bottom:1px solid var(--line); position:relative;transition:padding-left .4s var(--slow); } .svc .num{font-family:var(--ff-mono);font-size:.8rem;color:var(--muted);padding-top:.3em} .svc h3{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.8rem,5.5vw,3.6rem);letter-spacing:-.02em;line-height:1} .svc .svc-desc{color:var(--muted);max-width:46ch;grid-column:2;margin-top:.6em;font-size:.98rem} .svc .arrow{font-family:var(--ff-display);font-size:clamp(1.4rem,4vw,2.4rem);color:var(--accent);transition:transform .4s var(--slow);justify-self:end} .svc:hover{padding-left:clamp(8px,2vw,28px)} .svc:hover .arrow{transform:translate(8px,-8px)} .svc::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .5s var(--slow)} .svc:hover::after{width:100%} /* ---------- Marquee ---------- */ .marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:18px;display:flex} .marquee-track{display:flex;gap:2.2rem;white-space:nowrap;animation:marq 22s linear infinite;will-change:transform;transform:translateZ(0);backface-visibility:hidden} .marquee:hover .marquee-track{animation-play-state:paused} .marquee span{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.4rem,4vw,2.6rem);letter-spacing:-.02em;display:inline-flex;align-items:center;gap:2.2rem} .marquee span::after{content:"‸";color:var(--mark);font-size:.7em} @keyframes marq{to{transform:translateX(-50%)}} /* ---------- Project cards ---------- */ .proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(18px,3vw,32px)} .proj{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);transition:transform .4s var(--slow),border-color .3s,box-shadow .4s} .proj:hover{transform:scale(1.04);border-color:var(--accent);box-shadow:0 16px 48px rgba(0,0,0,.12)} .proj-vis{aspect-ratio:4/3;position:relative;overflow:hidden; background: radial-gradient(120% 90% at 20% 10%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%), radial-gradient(100% 100% at 90% 90%,color-mix(in srgb,var(--mark) 22%,transparent),transparent 55%), var(--surface)} .proj-vis .glyph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-display);font-weight:800; font-size:clamp(3rem,12vw,7rem);color:var(--ink);opacity:.9;letter-spacing:-.04em;mix-blend-mode:overlay} .proj-body{padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:.5em} .proj-body .meta{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .proj-body h3{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.4rem,3.2vw,2rem);letter-spacing:-.02em;line-height:1.04} .proj-soon{display:grid;place-items:center;text-align:center;border:1px dashed var(--line);border-radius:var(--r);padding:clamp(40px,8vw,90px) 24px;color:var(--muted);font-family:var(--ff-mono);font-size:.86rem;letter-spacing:.04em} /* ---------- Split / about ---------- */ .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(28px,5vw,72px);align-items:start} .lede{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.5rem,3.6vw,2.5rem);letter-spacing:-.02em;line-height:1.14} .lede .mark{color:var(--mark);text-decoration:line-through;text-decoration-thickness:.06em} .prose p{margin-bottom:1.1em;color:var(--muted);max-width:60ch} .prose p:last-child{margin-bottom:0} .stat-row{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,56px);margin-top:2.4em} .stat .n{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:-.03em;line-height:1} .stat .l{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.4em} /* ---------- CTA-band ---------- */ .cta-band{text-align:center;padding-block:clamp(80px,14vw,180px)} .cta-band a{font-family:var(--ff-display);font-weight:800;letter-spacing:-.03em;line-height:.9; font-size:clamp(2.6rem,12vw,9rem);display:inline-block;transition:color .3s} .cta-band a:hover{color:var(--accent)} .cta-band a .caret{color:var(--mark)} .cta-band .sub{font-family:var(--ff-mono);font-size:clamp(1rem,2.6vw,1.6rem);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2em;display:block} /* ---------- Forms ---------- */ .form{display:grid;gap:clamp(18px,3vw,28px);max-width:680px} .field{display:flex;flex-direction:column;gap:.5em} .field label{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .field input,.field textarea{ font-family:var(--ff-body);font-size:1.05rem;color:var(--ink); background:transparent;border:none;border-bottom:1px solid var(--line); padding:.7em 0;transition:border-color .3s; } .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .field textarea{resize:vertical;min-height:120px} .btn{ justify-self:start;font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--ink);border-radius:40px;padding:.95em 1.8em; display:inline-flex;align-items:center;gap:.7em;transition:.3s var(--ease); } .btn:hover{background:var(--ink);color:var(--paper)} .btn .caret{color:var(--mark)} .btn:hover .caret{color:var(--mark)} .form-note{font-family:var(--ff-mono);font-size:.78rem;color:var(--muted)} .form-status{font-family:var(--ff-mono);font-size:.84rem;min-height:1.4em} .form-status.ok{color:var(--accent)} .form-status.err{color:var(--mark)} .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(20px,4vw,40px);margin-top:clamp(40px,7vw,80px);border-top:1px solid var(--line);padding-top:clamp(28px,4vw,44px)} .contact-grid .label{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6em} .contact-grid a:hover{color:var(--accent)} /* ---------- Footer ---------- */ .site-footer{border-top:1px solid var(--line);padding:clamp(48px,7vw,90px) var(--gutter) clamp(28px,4vw,40px)} .footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem} .footer-mark{font-family:var(--ff-display);font-weight:800;font-size:clamp(3.4rem,16vw,12rem);letter-spacing:-.04em;line-height:.8} .footer-mark .caret{color:var(--mark)} .footer-cols{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,56px)} .footer-cols .label{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7em} .footer-cols a,.footer-cols span{display:block;line-height:1.7} .footer-cols a:hover{color:var(--accent)} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(40px,6vw,72px); font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)} /* ---------- Page hero (undersider) ---------- */ .page-hero{padding:clamp(150px,21vh,230px) var(--gutter) clamp(36px,6vw,72px)} .page-hero .wrap{max-width:var(--maxw);margin-inline:auto;padding:0} .page-hero h1{font-family:var(--ff-display);font-weight:800;line-height:.88; font-size:clamp(2.8rem,11vw,7.5rem);letter-spacing:-.035em;margin-top:.25em} .page-hero h1 .caret{color:var(--mark)} .page-hero .lede-intro{color:var(--muted);max-width:54ch;margin-top:1.2em;font-size:1.06rem} /* ---------- Reveal on scroll ---------- */ [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--rd,0ms)} [data-reveal].is-in{opacity:1;transform:none} /* ========================================================= INTRO — "siden bygger seg selv": CSS aktiveres linje for linje. Elementer starter i .raw (browser-default look) og får designet påført ett og ett ovenfra og ned. ========================================================= */ /* skjul siden til intro-bygget er klart (kun forsiden, settes av head-script) */ html.booting body{visibility:hidden} .raw{ font-family:Georgia,'Times New Roman',serif !important; color:#000 !important; background:transparent !important; letter-spacing:normal !important; text-transform:none !important; border-color:transparent !important; filter:none !important; } /* wordmark bygges gjennom 2 ulike "rå" fonter før den lander på sin egen */ .wordmark.wm-f1{font-family:Georgia,'Times New Roman',serif !important} .wordmark.wm-f2{font-family:'Courier New',ui-monospace,monospace !important} /* glimt når et element "får" CSS-en sin */ @keyframes builtflash{ 0%{opacity:0;transform:translateY(10px);filter:blur(3px)} 35%{opacity:1;background-color:color-mix(in srgb,var(--accent) 16%,transparent)} 100%{opacity:1;transform:translateY(0);filter:none;background-color:transparent} } .just-built{animation:builtflash .62s var(--ease) both} html[data-theme="dark"] .raw{color:#cfcfcf !important} .raw *{font-family:inherit !important;letter-spacing:normal !important} .raw .caret,.raw .arrow{color:#000 !important} .raw .hero::before,.raw.hero::before{opacity:0 !important} /* build-logg nede til venstre */ .buildlog{ position:fixed;right:var(--gutter);bottom:22px;z-index:90; font-family:var(--ff-mono);font-size:.72rem;line-height:1.7;color:var(--muted); pointer-events:none;max-width:60vw;text-align:right; } .buildlog b{color:var(--accent);font-weight:400} .buildlog .ok{color:var(--mark)} .buildlog.is-done{opacity:0;transition:opacity .6s .2s} /* ---------- Hero-video (showreel) ---------- */ .reel-video{z-index:1} /* ---------- "Snart"-tag på 3D i svc-liste (forside) ---------- */ .soon-tag{ font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--mark);border:1px solid currentColor;border-radius:40px; padding:.35em .8em;justify-self:end;align-self:center;line-height:1; } /* ---------- Tjenester: overskrifts-ankere ---------- */ .svc-story{scroll-margin-top:90px;padding-block:clamp(64px,10vw,140px);border-top:1px solid var(--line)} .svc-story.alt{background:var(--surface)} .story-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,44px);align-items:start;margin-bottom:clamp(36px,6vw,72px)} .story-num{font-family:var(--ff-mono);font-size:.9rem;color:var(--accent);padding-top:.5em} .story-head h2{ font-family:var(--ff-display);font-weight:800;line-height:.95; font-size:clamp(2rem,6vw,4rem);letter-spacing:-.02em; display:flex;flex-wrap:wrap;align-items:center;gap:.4em .6em; } .story-head .lede{margin-top:.5em;max-width:30ch;color:var(--muted)} /* storyline-spor */ .story-track{display:grid;gap:clamp(14px,2.5vw,22px);counter-reset:step;border-left:1px solid var(--line);padding-left:0} .story-step{ position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,34px);align-items:center; padding:clamp(22px,3.4vw,34px) clamp(20px,3vw,36px); border:1px solid var(--line);border-radius:var(--r);background:var(--paper); transition:transform .5s var(--slow),border-color .3s,box-shadow .4s; } .svc-story.alt .story-step{background:var(--paper)} .story-step:hover{transform:translateX(6px);border-color:var(--accent)} .story-step .step-idx{ font-family:var(--ff-mono);font-size:1.05rem;color:var(--mark); border:1px solid var(--line);border-radius:50%;width:3.3em;height:3.3em; display:grid;place-items:center;line-height:1;align-self:center; } .story-step .step-body h3{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.2rem,2.8vw,1.7rem);letter-spacing:-.01em;line-height:1.1;margin-bottom:.5em} .story-step .step-body p{color:var(--muted);max-width:60ch} .story-cta{ margin-top:clamp(28px,4vw,44px); font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--ink);border-radius:40px;padding:.95em 1.8em; display:inline-flex;align-items:center;gap:.6em;transition:.3s var(--ease); } .story-cta:hover{background:var(--ink);color:var(--paper)} .story-cta .caret{color:var(--mark)} /* ---------- Work in progress (3D) ---------- */ .wip-pill{ font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mark);border:1px solid currentColor;border-radius:40px; padding:.45em .9em;line-height:1;white-space:nowrap; } .svc-story.wip{scroll-margin-top:90px} .wip-panel{ border:1px dashed var(--line);border-radius:var(--r); padding:clamp(28px,5vw,56px);background:var(--surface);max-width:760px; } .wip-bar{height:6px;border-radius:40px;background:var(--line);overflow:hidden;margin-bottom:clamp(22px,4vw,34px)} .wip-fill{display:block;height:100%;width:38%;border-radius:40px;background:var(--mark); animation:wippulse 2.6s var(--ease) infinite alternate} @keyframes wippulse{from{width:26%}to{width:52%}} .wip-panel h3{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.2rem);letter-spacing:-.02em;margin-bottom:.6em} .wip-panel p{color:var(--muted);max-width:58ch;margin-bottom:1.4em} /* ---------- Prosjekt: lenke-hint på kort ---------- */ .proj-link{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:.4em} .proj:hover .proj-link{color:var(--accent)} /* ---------- Prosjekt-case (full side) ---------- */ .case-hero{padding:clamp(140px,20vh,220px) var(--gutter) clamp(24px,4vw,48px)} .case-hero .wrap{max-width:var(--maxw);margin-inline:auto;padding:0} .case-hero h1{font-family:var(--ff-display);font-weight:800;line-height:.88; font-size:clamp(2.8rem,11vw,7.5rem);letter-spacing:-.035em;margin-top:.25em} .case-hero h1 .caret{color:var(--mark)} .case-hero .lede-intro{color:var(--muted);max-width:54ch;margin-top:1.2em;font-size:1.06rem} .back-link{font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.4em;transition:color .25s} .back-link:hover{color:var(--accent)} .case-cover{padding:0 var(--gutter)} .case-cover .wrap{max-width:var(--maxw);margin-inline:auto;padding:0} .case-cover-vis{aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative; background: radial-gradient(120% 90% at 20% 10%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%), radial-gradient(100% 100% at 90% 90%,color-mix(in srgb,var(--mark) 22%,transparent),transparent 55%), var(--surface)} .case-cover-vis .glyph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-display);font-weight:800; font-size:clamp(4rem,18vw,11rem);color:var(--ink);opacity:.9;letter-spacing:-.04em;mix-blend-mode:overlay} .case-facts{display:flex;flex-wrap:wrap;gap:clamp(22px,5vw,52px);margin-top:2.4em} .case-facts .n{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.02em;line-height:1} .case-facts .l{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.4em} /* ---------- CEO / person bak ---------- */ .ceo-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center} .ceo-text .lede{margin-top:1rem} .ceo-text .eyebrow{margin-bottom:1.2rem} .ceo-name{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.3rem,3vw,1.9rem);letter-spacing:-.01em;margin-top:1.4rem;line-height:1.1} .ceo-role{font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.4em} .ceo-figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);aspect-ratio:4/5} .ceo-figure img{width:100%;height:100%;object-fit:cover;display:block} /* ---------- Responsiv ---------- */ @media (max-width:820px){ .svc{grid-template-columns:auto 1fr;gap:14px 20px} .svc .arrow{grid-column:2;justify-self:start} .svc .soon-tag{grid-column:2;justify-self:start} .svc .svc-desc{grid-column:1 / -1} .footer-top{flex-direction:column} .ceo-split{grid-template-columns:1fr} .ceo-figure{order:-1;max-width:420px} .story-head{grid-template-columns:auto 1fr} } @media (max-width:560px){ .header-tools{gap:12px} .hero-kinetic{max-width:14ch} .buildlog{font-size:.66rem;max-width:80vw} } /* ---------- Redusert bevegelse ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} [data-reveal]{opacity:1;transform:none} .reel-fallback::after,.marquee-track{animation:none} .type-cursor,.brand .caret{animation:none} } /* fokus-synlighet */ :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} /* ========================================================= POLISH-PASS — additive visuelle forbedringer Beholder identiteten (redaksjonelt/brutalistisk), men gir dybde, tekstur og rikere mikrointeraksjoner. Bruker kun eksisterende tema-variabler, så lys/mørk + scroll-mørksonen fungerer uendret. Alt respekterer prefers-reduced-motion. ========================================================= */ /* --- Konsistent elevasjons-/skyggeskala --- */ :root{ --shadow-1:0 1px 2px rgba(21,20,15,.05), 0 4px 14px rgba(21,20,15,.06); --shadow-2:0 10px 30px rgba(21,20,15,.10), 0 3px 8px rgba(21,20,15,.06); --shadow-3:0 28px 64px rgba(21,20,15,.16), 0 8px 20px rgba(21,20,15,.10); } html[data-theme="dark"]{ --shadow-1:0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.40); --shadow-2:0 12px 32px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.45); --shadow-3:0 32px 70px rgba(0,0,0,.65), 0 10px 22px rgba(0,0,0,.5); } /* --- Mykt anker-scroll (kun når bevegelse er ok) --- */ @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } /* --- Papir-grain: subtil trykk-tekstur over hele flaten. On-brand for et studio som leker med «trykksverte» og «korrektur». Svært lav opasitet – føles, sees nesten ikke. --- */ body::after{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; } html[data-theme="dark"] body::after{opacity:.08} /* --- Tjeneste-liste: rikere hover (tall + beskrivelse våkner) --- */ .svc .num{transition:color .35s var(--ease),transform .45s var(--slow)} .svc:hover .num{color:var(--accent);transform:translateY(-3px)} .svc .svc-desc{transition:color .35s var(--ease)} .svc:hover .svc-desc{color:var(--ink)} /* --- Prosjektkort: konsistent elevasjon + sveip-glans --- */ .proj{box-shadow:var(--shadow-1)} .proj:hover{box-shadow:var(--shadow-3)} .proj-vis::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.22) 50%,transparent 68%); transform:translateX(-130%);transition:transform .85s var(--slow); } .proj:hover .proj-vis::before{transform:translateX(130%)} /* --- Story-steg (tjenester-undersider): mild elevasjon --- */ .story-step{box-shadow:var(--shadow-1)} .story-step:hover{box-shadow:var(--shadow-2)} /* --- Knapper: animert fyll i stedet for hardt fargebytte --- */ .btn,.story-cta{position:relative;overflow:hidden;isolation:isolate;background:transparent} .btn::before,.story-cta::before{ content:"";position:absolute;inset:0;z-index:-1;background:var(--ink); transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--slow); } .btn:hover,.story-cta:hover{background:transparent;color:var(--paper)} .btn:hover::before,.story-cta:hover::before{transform:scaleX(1)} /* --- CTA-band: understrek tegnes inn som visuelt klimaks --- */ .cta-band a{position:relative} .cta-band a::after{ content:"";position:absolute;left:0;right:0;bottom:.06em;height:.05em; background:var(--accent);transform:scaleX(0);transform-origin:left; transition:transform .55s var(--slow); } .cta-band a:hover::after{transform:scaleX(1)} /* --- Skjult, men tilgjengelig tekst (SEO-H1 + skjermlesere) --- */ .sr-only{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* --- Hero-eyebrow i samme farge som resten av hero-teksten (begge tema) --- */ .hero-eyebrow{color:var(--ink)} /* --- Tjeneste-section følger tema: i mørk modus settes paletten fast til mørk, slik at scroll-mørksonen (som bare gir mening i lyst tema) ikke låser seksjonen til lys. I lyst tema beholdes scroll-effekten. --- */ html[data-theme="dark"] #tjenester{ --surface:#1b1916; --ink:#efede6; --muted:#908d84; --line:rgba(239,237,230,.16); --accent:#5a66ff; --mark:#ff5c42; --paper:#0c0c0a; } /* --- svc-story "alt"-band: matcher de andre seksjonene i mørk modus (var brunlig pga. --surface) --- */ html[data-theme="dark"] .svc-story.alt{background:var(--paper)} /* --- Klikkbar seksjonstittel ("Utvalgt arbeid" → prosjekter) --- */ .section-head .head-link{display:inline-flex;align-items:center;gap:.35em;flex:1 1 320px} .section-head .head-link h2{flex:0 1 auto;transition:color .3s var(--ease)} .section-head .head-link .head-arrow{ font-family:var(--ff-display);color:var(--accent);line-height:1; font-size:clamp(1.4rem,3.4vw,2.4rem);transition:transform .4s var(--slow); } .section-head .head-link:hover h2{color:var(--accent)} .section-head .head-link:hover .head-arrow{transform:translate(7px,-7px)} /* --- Nedtrekk i kontaktskjema (samme stil som input-feltene) --- */ .field select{ font-family:var(--ff-body);font-size:1.05rem;color:var(--ink); background:transparent;border:none;border-bottom:1px solid var(--line); padding:.7em 1.6em .7em 0;cursor:pointer;transition:border-color .3s; appearance:none;-webkit-appearance:none;border-radius:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5L7 7l6-5.5' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .1em center; } .field select:focus{outline:none;border-color:var(--accent)} .field select option{background:var(--paper);color:var(--ink)} /* ===================================================== BorderGlow — cursor-følgende mesh-glød (vanilla-port) Aktiveres ved å legge klassen .glow-vis på et visuelt felt (med position:relative) og sette inn ===================================================== */ .glow-vis{ --edge-proximity:0; --cursor-angle:45deg; --edge-sensitivity:30; --color-sensitivity:50; /* edge-sensitivity + 20 */ --glow-padding:24px; --cone-spread:25; --fill-opacity:.55; --card-bg:var(--surface); /* mesh-farger i merkevaren */ --mesh-a:hsla(230,100%,68%,1); /* blå (accent) */ --mesh-b:hsla(8,95%,60%,1); /* rød (mark) */ --mesh-c:hsla(205,100%,80%,1); /* lys blå */ --g1:radial-gradient(at 80% 55%,var(--mesh-a) 0px,transparent 50%); --g2:radial-gradient(at 69% 34%,var(--mesh-b) 0px,transparent 50%); --g3:radial-gradient(at 8% 6%,var(--mesh-c) 0px,transparent 50%); --g4:radial-gradient(at 41% 38%,var(--mesh-a) 0px,transparent 50%); --g5:radial-gradient(at 86% 85%,var(--mesh-b) 0px,transparent 50%); --g6:radial-gradient(at 82% 18%,var(--mesh-c) 0px,transparent 50%); --g7:radial-gradient(at 51% 4%,var(--mesh-b) 0px,transparent 50%); --gbase:linear-gradient(var(--mesh-a) 0 100%); isolation:isolate; } .glow-vis .glyph{z-index:2} .glow-fx{ position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1; } .glow-fx, .glow-fx::before, .glow-fx > .edge-light{ content:"";position:absolute;inset:0;border-radius:inherit; transition:opacity .25s ease-out; } /* fade ut når musa er borte */ .glow-vis:not(:hover) .glow-fx, .glow-vis:not(:hover) .glow-fx::before, .glow-vis:not(:hover) .glow-fx > .edge-light{ opacity:0;transition:opacity .6s ease-in-out; } /* farget mesh-kant */ .glow-fx{ border:1px solid transparent; background: linear-gradient(var(--card-bg) 0 100%) padding-box, var(--g1) border-box,var(--g2) border-box,var(--g3) border-box, var(--g4) border-box,var(--g5) border-box,var(--g6) border-box, var(--g7) border-box,var(--gbase) border-box; opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mask-image:conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread)*1%), transparent calc((var(--cone-spread) + 15)*1%), transparent calc((100 - var(--cone-spread) - 15)*1%), black calc((100 - var(--cone-spread))*1%)); } /* farget mesh-fyll mot kantene */ .glow-fx::before{ background: var(--g1) padding-box,var(--g2) padding-box,var(--g3) padding-box, var(--g4) padding-box,var(--g5) padding-box,var(--g6) padding-box, var(--g7) padding-box,var(--gbase) padding-box; mask-image: linear-gradient(to bottom,black,black), radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%), radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%), radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%), radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%), radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%), conic-gradient(from var(--cursor-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%); -webkit-mask-composite:source-out,source-over,source-over,source-over,source-over,source-over; mask-composite:subtract,add,add,add,add,add; opacity:calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mix-blend-mode:soft-light; } /* ytre glød-lag */ .glow-fx > .edge-light{ inset:calc(var(--glow-padding) * -1);z-index:1; mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%,transparent 10%,transparent 90%,black 97.5%); opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity))); mix-blend-mode:plus-lighter; } .glow-fx > .edge-light::before{ content:"";position:absolute;inset:var(--glow-padding);border-radius:inherit; box-shadow: inset 0 0 0 1px hsl(230 95% 67% / 100%), inset 0 0 1px 0 hsl(230 95% 67% / 60%), inset 0 0 3px 0 hsl(230 95% 67% / 50%), inset 0 0 6px 0 hsl(230 95% 67% / 40%), inset 0 0 15px 0 hsl(230 95% 67% / 30%), inset 0 0 25px 2px hsl(230 95% 67% / 20%), inset 0 0 50px 2px hsl(230 95% 67% / 10%), 0 0 1px 0 hsl(230 95% 67% / 60%), 0 0 3px 0 hsl(230 95% 67% / 50%), 0 0 6px 0 hsl(230 95% 67% / 40%), 0 0 15px 0 hsl(230 95% 67% / 30%), 0 0 25px 2px hsl(230 95% 67% / 20%), 0 0 50px 2px hsl(230 95% 67% / 10%); }