:root { --bg: #16120d; --bg-alt: #1c1711; --bg-deep: #100d09; --paper: #ece4d3; --muted: #8f8470; --line: rgba(196, 161, 85, 0.20); --gold: #c4a155; --gold-soft: #d9bd7c; --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter", -apple-system, "Segoe UI", sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; } /* Merk: ikke sett overflow på — det gjør body til scroll-container og dreper window-scroll-hendelser (avsløringer + sticky nav slutter å virke). */ body { font-family: var(--sans); background: var(--bg); color: var(--paper); font-weight: 300; line-height: 1.7; font-size: 17px; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.14; } .eyebrow { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 500; } .eyebrow.light { color: var(--gold-soft); } /* ===== Avsløringer: kun opacity + transform (billig, robust) ===== */ /* Synlig som standard. Skjules kun når JS er aktivt, slik at en feilende JS aldri gir blank side (progressiv forbedring). */ html.js .reveal, html.js .reveal-line, html.js .reveal-title span { opacity: 0; transform: translateY(26px); } html.js .reveal-img img { opacity: 0; transform: scale(1.06); } html.js .reveal, html.js .reveal-line { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } html.js .reveal-title span { display: inline-block; transition: opacity 0.9s var(--ease), transform 1s var(--ease); } html.js .reveal-img img { transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); } html.js .reveal.in, html.js .reveal-line.in, html.js .reveal-title.in span { opacity: 1; transform: none; } html.js .reveal-img.in img { opacity: 1; transform: none; } /* Redusert bevegelse: ingen forflytning/skalering (tilgjengelighet), men behold en rolig opacity-fade så siden aldri føles "død". */ @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .reveal-line, html.js .reveal-title span, html.js .reveal-img img { transform: none !important; } html.js .reveal, html.js .reveal-line, html.js .reveal-title span, html.js .reveal-img img { transition: opacity 0.7s ease !important; } html.js .hero-media img { animation: none !important; } .hero-scroll span { animation: none !important; } } /* ===== Gate ===== */ .gate-body { min-height: 100vh; background: var(--bg-deep); display: grid; place-items: center; } .gate-bg { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(16,13,9,0.62), rgba(16,13,9,0.86)), url("../bilder/phoenix-northern-lights.webp") center/cover no-repeat; filter: brightness(0.55); } .gate-inner { position: relative; text-align: center; padding: 2rem; width: min(92vw, 460px); } .gate-title { font-size: clamp(3rem, 8vw, 4.6rem); margin: 0.7rem 0 1.1rem; } .gate-sub { color: rgba(236,228,211,0.6); font-size: 0.98rem; margin-bottom: 2.2rem; } .gate-field { display: flex; border-bottom: 1px solid rgba(196,161,85,0.42); } .gate-field:focus-within { border-color: var(--gold); } .gate-field input { flex: 1; background: none; border: none; color: var(--paper); font-family: var(--sans); font-size: 1rem; padding: 0.9rem 0.2rem; letter-spacing: 0.03em; } .gate-field input::placeholder { color: rgba(236,228,211,0.4); } .gate-field input:focus { outline: none; } .gate-field button { background: none; border: none; color: var(--gold-soft); font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; padding: 0 0.4rem; transition: color 0.3s; } .gate-field button:hover { color: var(--paper); } .gate-error { color: #e0a55f; font-size: 0.85rem; margin-top: 1rem; } /* ===== Nav (3-kolonne: dropdown venstre, midtstilt logo, lenker høyre) ===== */ .nav { position: fixed; inset: 0 0 auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.7rem clamp(1.5rem, 5vw, 4rem); z-index: 50; color: var(--paper); transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; } .nav.solid { background: rgba(16,13,9,0.92); padding-top: 1.05rem; padding-bottom: 1.05rem; border-bottom: 1px solid var(--line); } .nav-left { justify-self: start; } .nav-right { justify-self: end; display: flex; gap: 2.2rem; } .brand { justify-self: center; text-align: center; font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.03em; } .brand span { font-style: italic; color: var(--gold); margin-left: 0.14em; } .nav-right a, .dropdown-toggle { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; position: relative; padding-bottom: 3px; transition: color 0.3s; font-family: var(--sans); font-weight: 400; background: none; border: none; color: inherit; cursor: pointer; } .nav-right a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.4s var(--ease); } .nav-right a:hover, .nav-right a.active { color: var(--gold-soft); } .nav-right a:hover::after, .nav-right a.active::after { width: 100%; } /* Dropdown */ .dropdown { position: relative; } .dropdown-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0 3px 0; } .dropdown-toggle .dropdown-arrow { font-size: 0.7em; transition: transform 0.3s ease; color: var(--gold); } .dropdown:hover .dropdown-toggle, .dropdown.open .dropdown-toggle { color: var(--gold-soft); } .dropdown:hover .dropdown-arrow, .dropdown.open .dropdown-arrow { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 1.1rem); left: 0; background: rgba(16,13,9,0.96); border: 1px solid var(--line); padding: 0.5rem 0; min-width: 230px; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; } /* Usynlig bro mellom toggle og meny så hover ikke brytes i mellomrommet. */ .dropdown-menu::before { content: ""; position: absolute; top: -1.4rem; left: 0; right: 0; height: 1.4rem; } .dropdown:hover .dropdown-menu, .dropdown.open .dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .dropdown-menu a { display: block; padding: 0.85rem 1.3rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); transition: color 0.3s, background 0.3s; } .dropdown-menu a:hover, .dropdown-menu a.active { color: var(--gold-soft); background: rgba(196,161,85,0.07); } /* Statisk nav (uten gjennomsiktig over hero) for innholdssider. */ .nav.nav-static { background: rgba(16,13,9,0.92); border-bottom: 1px solid var(--line); padding-top: 1.05rem; padding-bottom: 1.05rem; } /* ===== Hero ===== */ .hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; color: var(--paper); } .hero-media { position: absolute; inset: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } html.js .hero-media img { animation: heroIn 1.4s var(--ease) both; } @keyframes heroIn { from { transform: scale(1.06); } to { transform: scale(1); } } .hero-grad { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 35%, transparent 40%, rgba(16,13,9,0.5) 100%), linear-gradient(180deg, rgba(16,13,9,0.34) 0%, rgba(16,13,9,0.05) 40%, rgba(16,13,9,0.74) 100%); } /* Subtilt filmkorn, gjør lavoppløst foto mer bevisst/kinematisk. Statisk = billig. */ body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .hero-content { position: relative; padding: 0 clamp(1.5rem,5vw,4rem) clamp(4rem,9vh,7rem); max-width: 900px; } .hero-content h1 { font-size: clamp(3.2rem, 10vw, 7.5rem); margin: 0.6rem 0 1.3rem; letter-spacing: 0.01em; } .hero-lead { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-style: italic; color: rgba(236,228,211,0.88); max-width: 28ch; line-height: 1.5; } html.js .reveal-title.in span { transition-delay: 0.12s; } html.js .hero-content .hero-lead.in { transition-delay: 0.4s; } .hero-scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); width: 1px; height: 52px; background: rgba(196,161,85,0.3); overflow: hidden; } .hero-scroll span { position: absolute; top: -52px; left: 0; width: 1px; height: 52px; background: var(--gold); animation: scrolldown 2.4s var(--ease) infinite; } @keyframes scrolldown { 0% { top: -52px; } 60%, 100% { top: 52px; } } /* ===== Chapter ===== */ .chapter { max-width: 1160px; margin: 0 auto; padding: clamp(6rem,15vh,11rem) clamp(1.5rem,5vw,4rem); } .chapter-grid { display: grid; grid-template-columns: 190px 1fr; gap: clamp(2rem,6vw,5.5rem); } .chapter-label { display: flex; flex-direction: column; gap: 0.9rem; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); height: max-content; position: sticky; top: 6.5rem; } .chapter-label .num { font-family: var(--serif); font-size: 1.55rem; color: var(--gold); letter-spacing: 0; } .chapter-label .line { width: 44px; height: 1px; background: var(--line); } .chapter-body h2 { font-size: clamp(1.9rem,3.4vw,3rem); max-width: 19ch; margin-bottom: 2.6rem; } .chapter-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; color: rgba(236,228,211,0.68); } .chapter-cols p { font-size: 1.02rem; } .meta { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--line); } .meta li { font-family: var(--serif); font-size: 1.08rem; color: var(--paper); } .meta li span { display: block; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.55rem; } /* ===== Spread ===== */ .spread { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2rem,6vw,5.5rem); max-width: 1300px; margin: 0 auto; padding: clamp(3rem,8vh,6rem) clamp(1.5rem,5vw,4rem); background: var(--bg); } .spread:nth-of-type(even) { background: var(--bg-alt); } .spread.reverse { direction: rtl; } .spread.reverse > * { direction: ltr; } .spread-media { overflow: hidden; } .spread-media img { width: 100%; height: clamp(340px,60vh,680px); object-fit: cover; transition: transform 1.2s var(--ease); } .spread-media:hover img { transform: scale(1.04); } .spread-text h3 { font-size: clamp(1.7rem,3vw,2.5rem); margin: 0.9rem 0 1.2rem; max-width: 16ch; } .spread-text p { color: rgba(236,228,211,0.68); max-width: 42ch; } /* ===== Gallery ===== */ .gallery-section { max-width: 1300px; margin: 0 auto; padding: clamp(6rem,13vh,10rem) clamp(1.5rem,5vw,4rem); } .gallery-section .chapter-label { flex-direction: row; align-items: center; position: static; margin-bottom: 2.6rem; } .gallery-section .chapter-label .line { width: 64px; } .gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(0.8rem,1.5vw,1.3rem); } .g-item { cursor: pointer; position: relative; overflow: hidden; } .g-item.wide { grid-column: 1 / -1; } .g-item img { width: 100%; height: clamp(260px,40vh,460px); object-fit: cover; transition: transform 1.1s var(--ease); } .g-item.wide img { height: clamp(360px,66vh,680px); } .g-item.tall img { height: clamp(360px,60vh,600px); } .g-item:hover img { transform: scale(1.04); } .g-item::after { content: "↗"; position: absolute; right: 1.1rem; bottom: 0.9rem; color: var(--gold-soft); font-size: 1.25rem; opacity: 0; transition: opacity 0.35s; } .g-item:hover::after { opacity: 1; } /* ===== Contact ===== */ .contact { background: var(--bg-deep); padding: clamp(6rem,13vh,10rem) clamp(1.5rem,5vw,4rem); } .contact .chapter-label { flex-direction: row; align-items: center; color: var(--muted); max-width: 1160px; margin: 0 auto 3rem; } .contact .chapter-label .line { background: var(--line); width: 64px; } .contact-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,7vw,6rem); } .contact-intro h2 { font-size: clamp(2rem,3.6vw,3rem); margin-bottom: 1.2rem; } .contact-intro p { color: rgba(236,228,211,0.58); max-width: 34ch; } .contact-form { display: grid; gap: 1.5rem; } .contact-form label { display: grid; gap: 0.45rem; } .contact-form label span { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .contact-form input, .contact-form textarea { background: none; border: none; border-bottom: 1px solid rgba(196,161,85,0.26); color: var(--paper); font-family: var(--sans); font-size: 1rem; font-weight: 300; padding: 0.65rem 0.1rem; transition: border-color 0.35s; } .contact-form textarea { resize: vertical; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); } .contact-form button { justify-self: start; margin-top: 0.7rem; background: none; border: 1px solid rgba(196,161,85,0.5); color: var(--gold-soft); font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 1rem 2.3rem; cursor: pointer; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease; } .contact-form button:hover { background: var(--gold); border-color: var(--gold); color: var(--bg-deep); } .contact-status { font-size: 0.9rem; } .contact-status.ok { color: var(--gold-soft); } .contact-status.err { color: #e0a55f; } /* ===== Footer ===== */ .footer { background: var(--bg-deep); color: var(--muted); display: flex; justify-content: space-between; align-items: center; padding: 2.2rem clamp(1.5rem,5vw,4rem); border-top: 1px solid var(--line); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; } .footer span:first-child { font-family: var(--serif); text-transform: none; font-size: 1.1rem; letter-spacing: 0.03em; color: var(--paper); } /* ===== Lightbox ===== */ .lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; background: rgba(12,10,7,0.96); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease; } .lightbox.show { opacity: 1; } .lightbox img { max-width: 88vw; max-height: 86vh; object-fit: contain; } .lb-close, .lb-nav { position: absolute; background: none; border: none; color: rgba(236,228,211,0.65); cursor: pointer; transition: color 0.3s; } .lb-close { top: 1.5rem; right: 1.9rem; font-size: 2.3rem; line-height: 1; } .lb-nav { top: 50%; transform: translateY(-50%); font-size: 2.8rem; padding: 1rem; } .lb-prev { left: 1.4rem; } .lb-next { right: 1.4rem; } .lb-close:hover, .lb-nav:hover { color: var(--gold-soft); } /* ===== Responsive ===== */ @media (max-width: 900px) { .nav-right { gap: 1.3rem; } .nav-right a, .dropdown-toggle { font-size: 0.64rem; letter-spacing: 0.12em; } .chapter-grid { grid-template-columns: 1fr; gap: 2.2rem; } .chapter-label { position: static; flex-direction: row; align-items: center; } .chapter-cols { grid-template-columns: 1fr; gap: 1.1rem; } .meta { grid-template-columns: 1fr 1fr; } .spread, .spread.reverse { grid-template-columns: 1fr; direction: ltr; } .spread-media { order: -1; } .spread-media img { height: 54vh; } .gallery { grid-template-columns: 1fr; } .g-item img, .g-item.wide img { height: 56vh; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { body { font-size: 16px; } .nav { padding: 1.1rem 1.2rem; grid-template-columns: 1fr; } .nav-left, .nav-right { display: none; } .brand { justify-self: center; } .footer { flex-direction: column; gap: 0.7rem; text-align: center; } } /* Plassholder for sider som venter på innhold */ .placeholder-body p { font-family: var(--serif); font-style: italic; color: rgba(236,228,211,0.45); font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 38ch; margin-top: 1rem; } /* ===== Film ===== */ .film { background: var(--bg-deep); padding: clamp(6rem,15vh,11rem) clamp(1.5rem,5vw,4rem); } .film-inner { max-width: 1160px; margin: 0 auto; text-align: center; } .film .chapter-label { justify-content: center; flex-direction: row; align-items: center; position: static; margin: 0 auto 2rem; width: max-content; color: var(--muted); } .film .chapter-label .line { width: 64px; background: var(--line); } .film-title { font-size: clamp(1.9rem,3.6vw,3rem); margin-bottom: 0.9rem; } .film-lead { color: rgba(236,228,211,0.62); font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-bottom: 2.6rem; } .film-frame { position: relative; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.45); overflow: hidden; } .film-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(196,161,85,0.18); z-index: 2; } .film-frame video { display: block; width: 100%; height: auto; background: #000; } /* ===== Hero film (autoplay bakgrunn) ===== */ .hero-film { background: #000; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-film .hero-grad { z-index: 1; } .hero-sound { position: absolute; bottom: clamp(1.5rem, 4vh, 2.4rem); right: clamp(1.5rem, 5vw, 4rem); display: inline-flex; align-items: center; gap: 0.65rem; background: rgba(16,13,9,0.55); border: 1px solid rgba(196,161,85,0.42); color: var(--paper); font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.7rem 1.1rem 0.7rem 0.95rem; cursor: pointer; z-index: 3; transition: background 0.35s, border-color 0.35s, color 0.35s; } .hero-sound:hover { background: rgba(16,13,9,0.85); border-color: var(--gold); color: var(--gold-soft); } .hero-sound-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(196,161,85,0.0); } .hero-sound.on .hero-sound-dot { animation: heroDot 1.8s ease-out infinite; } @keyframes heroDot { 0% { box-shadow: 0 0 0 0 rgba(196,161,85,0.55); } 100% { box-shadow: 0 0 0 16px rgba(196,161,85,0); } } @media (max-width: 560px) { .hero-sound { font-size: 0.64rem; padding: 0.6rem 0.95rem 0.6rem 0.8rem; } } /* ===== Studio-side ===== */ .studio { max-width: 880px; margin: 0 auto; padding: clamp(8rem, 18vh, 13rem) clamp(1.5rem, 5vw, 4rem) clamp(6rem, 15vh, 11rem); min-height: 72vh; } .studio h1 { font-size: clamp(3rem, 7vw, 5.4rem); margin: 0.4rem 0 2.4rem; letter-spacing: 0.01em; } .studio-body { max-width: 58ch; } .studio-body p { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: rgba(236,228,211,0.8); margin-bottom: 1.4rem; line-height: 1.55; } .studio-body p:last-child { margin-bottom: 0; } /* ===== Presentation (brosjyre-PDF) ===== */ .presentation { max-width: 1180px; margin: 0 auto; padding: clamp(7rem, 14vh, 11rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 8vh, 6rem); } .presentation-head { margin-bottom: 2.4rem; } .presentation-head h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 0.4rem 0 1.4rem; } .presentation-lead { color: rgba(236,228,211,0.7); font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 52ch; } .presentation-lead a { color: var(--gold-soft); border-bottom: 1px solid rgba(196,161,85,0.4); padding-bottom: 1px; transition: color 0.3s, border-color 0.3s; } .presentation-lead a:hover { color: var(--paper); border-color: var(--gold); } .presentation-frame { position: relative; background: #000; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.45); overflow: hidden; aspect-ratio: 4 / 5; max-height: 86vh; } .presentation-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #1a1611; } @media (max-width: 700px) { .presentation-frame { aspect-ratio: 3 / 4; } } /* Lås rulling på filmsiden, den skal "stoppe" med kun filmen. */ body.page-film, html:has(body.page-film) { overflow: hidden; height: 100%; } body.page-film .hero { height: 100vh; } /* ===== Direct contact card ===== */ .contact-card { display: grid; gap: 1.1rem; align-self: start; } .contact-card-name { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--paper); margin-bottom: 0.3rem; line-height: 1.2; } .contact-card-line { font-size: 1.05rem; color: rgba(236,228,211,0.78); } .contact-card-line a { border-bottom: 1px solid rgba(196,161,85,0.32); padding-bottom: 2px; transition: border-color 0.3s ease, color 0.3s ease; } .contact-card-line a:hover { color: var(--gold-soft); border-color: var(--gold); }