/* Kati Horak — website draft v2 ("The Atelier Edit") Brand tokens locked from Branding/Brandingprofil/project — Playfair Display + Wix Madefor Text + Fraunces italic, sage/paper/cream palette. This is not a re-skin: the composition language changed from a template split-hero/card-grid layout to an editorial-magazine system — asymmetric hero, numbered index rows instead of cards, masonry portfolio, a hidden-by-default masthead nav (index page, not a link bar), ghost-type texture, clip-path image reveals instead of generic fade-ups. See /frontend-design skill. */ /* Fontene lastes fra index.html — @import her ga en seriell render-blokk-kjede (styles.css → fonts.googleapis) på ~2,2s mobil. */ :root { --sage-900: #3c3e34; --sage-800: #4a4c40; --sage-700: #54564a; --sage-600: #636657; --sage-500: #7c7e6c; --sage-400: #999b87; --sage-300: #bcbeac; --sage-200: #dadcd0; --sage-100: #ecece3; --paper: #fbfaf6; --cream: #f3f1e9; --sand: #e9e6da; --ink: #2b2a25; --ink-soft: #55534a; --white: #ffffff; --font-display: 'Playfair Display', Georgia, serif; --font-alt: 'Fraunces', 'Playfair Display', serif; --font-body: 'Wix Madefor Text', Arial, sans-serif; --margin-page: clamp(20px, 5vw, 64px); --header-h: 116px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink-soft); font-family: var(--font-body); font-weight: 400; line-height: 1.6; position: relative; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; text-wrap: balance; } .eyebrow { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em; color: var(--sage-600); } .quote { font-family: var(--font-alt); font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.5; color: var(--ink); } /* ---------- film-grain atmosphere — subtle, fixed, never blocks interaction ---------- */ .grain-overlay { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- ghost display type — background texture, never load-bearing content ---------- */ .ghost-word { position: absolute; z-index: 0; pointer-events: none; -webkit-user-select: none; user-select: none; font-family: var(--font-display); font-weight: 500; color: var(--sand); line-height: 0.8; white-space: nowrap; opacity: 0.55; } .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; padding: 16px 34px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink); background: transparent; transition: color 420ms var(--ease); isolation: isolate; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform 420ms var(--ease); } .btn:hover { color: var(--paper); } .btn:hover::before { transform: translateY(0); } .btn-inverse { border-color: var(--paper); color: var(--paper); } .btn-inverse::before { background: var(--paper); } .btn-inverse:hover { color: var(--sage-900); } .btn-sm { padding: 12px 24px; font-size: 0.72rem; } .link-arrow { position: relative; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-600); padding-bottom: 3px; background-image: linear-gradient(var(--sage-600), var(--sage-600)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: background-size 350ms var(--ease); } .link-arrow:hover { background-size: 100% 1px; } /* ---------- masthead — an index toggle, not a link bar ---------- .is-inverse (toggled by JS, home route only, while the hero image still reaches under the header) drops the background so the hero photo shows through and swaps the menu button to a light color for contrast — same idea as Amado's inverse header, scoped tighter here since only the hero image (not every page) ever sits behind this header. */ .site-header { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--margin-page); background: var(--paper); transition: background 300ms var(--ease); } .site-header.is-inverse { background: transparent; } .wordmark img { height: 76px; width: auto; display: block; } .masthead-right { display: flex; align-items: center; gap: 32px; } /* Language switcher — EN · NO pill group, same idea as Amado's .lang-switch-group but styled to the Atelier Edit masthead (letter-spaced caps like .menu-toggle-label, underline marks the active locale). Follows the header's .is-inverse swap so it stays readable over the home hero. */ .lang-switch { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } /* sage-700, ikke sage-500 — 500 ga 3,6:1 kontrast mot paper på liten tekst (WCAG-krav 4,5:1) */ .lang-switch a { color: var(--sage-700); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 300ms var(--ease), border-color 300ms var(--ease); } .lang-switch a:hover { color: var(--ink); } .lang-switch a.is-active { color: var(--ink); border-bottom-color: var(--ink); } .lang-sep { color: var(--sage-300); } .site-header.is-inverse .lang-switch a { color: rgba(251, 250, 246, 0.72); } .site-header.is-inverse .lang-switch a:hover, .site-header.is-inverse .lang-switch a.is-active { color: var(--paper); } .site-header.is-inverse .lang-switch a.is-active { border-bottom-color: var(--paper); } .site-header.is-inverse .lang-sep { color: rgba(251, 250, 246, 0.4); } .menu-toggle { display: flex; align-items: center; gap: 12px; border: none; background: none; padding: 4px; } .menu-toggle-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); transition: color 300ms var(--ease); } .menu-toggle .bars { display: flex; flex-direction: column; gap: 5px; } .site-header.is-inverse .menu-toggle-label { color: var(--paper); } .site-header.is-inverse .menu-toggle .bars span { background: var(--paper); } .menu-toggle .bars span { width: 22px; height: 1.5px; background: var(--ink); display: block; transition: transform 300ms var(--ease), width 300ms var(--ease), background 300ms var(--ease); } .menu-toggle:hover .bars span:first-child { width: 16px; } .scroll-progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0%; background: var(--sage-600); transition: width 80ms linear; } /* ---------- index-style menu overlay ---------- */ .menu-overlay { position: fixed; inset: 0; z-index: 100; background: var(--sage-900); color: var(--paper); display: flex; flex-direction: column; height: 100dvh; opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease); } .menu-overlay.is-open { opacity: 1; pointer-events: auto; } .menu-overlay-top { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 22px var(--margin-page); } .menu-eyebrow { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage-300); } .menu-close { background: none; border: none; color: var(--paper); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } .menu-links { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 12px var(--margin-page); } .menu-links a { display: flex; align-items: baseline; gap: 20px; font-family: var(--font-display); font-size: clamp(2rem, 8vw, 4.2rem); font-weight: 400; padding: 8px 0; color: var(--paper); opacity: 0.5; border-bottom: 1px solid rgba(251,250,246,0.12); transition: opacity 350ms var(--ease), padding-left 350ms var(--ease), gap 350ms var(--ease); } .menu-num { font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--sage-400); } .menu-links a:hover, .menu-links a.is-active { opacity: 1; padding-left: 14px; gap: 26px; } .menu-links a.is-active .menu-num, .menu-links a:hover .menu-num { color: var(--sage-300); } .menu-foot { flex: 0 0 auto; padding: 18px var(--margin-page) 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(251,250,246,0.12); } .menu-foot-note { font-size: 0.78rem; color: var(--sage-300); max-width: 32ch; } .menu-foot-links { display: flex; gap: 24px; font-size: 0.8rem; color: var(--paper); } .menu-foot-links a:hover { color: var(--sage-300); } /* ---------- sections ---------- */ .section { position: relative; padding: 110px var(--margin-page); max-width: 1360px; margin: 0 auto; } .section-dark { background: var(--sage-900); color: var(--sage-200); overflow: hidden; } .reveal { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-soft), transform 800ms var(--ease-soft); } .reveal.is-visible { opacity: 1; transform: none; } .img-reveal { position: relative; overflow: hidden; } .img-reveal img { transform: scale(1.08); transition: transform 1100ms var(--ease-soft); } .img-reveal::after { content: ""; position: absolute; inset: 0; background: var(--paper); z-index: 1; transform-origin: left; transition: transform 900ms var(--ease-soft); } .img-reveal.is-visible::after { transform: scaleX(0); } .img-reveal.is-visible img { transform: scale(1); } .section-dark .img-reveal::after { background: var(--sage-900); } /* Hero (LCP-elementet): bildet er synlig fra første frame — kun en transform-settle, aldri et dekkende overlegg. Lighthouse teller ikke LCP som malt før bildet faktisk vises, så wipe-mønsteret over hører ikke hjemme på hero-bildet. */ .img-settle { position: relative; overflow: hidden; } .img-settle img { animation: imgSettle 1100ms var(--ease-soft) both; } @keyframes imgSettle { from { transform: scale(1.06); } to { transform: none; } } /* ---------- hero: asymmetric, ghost-type, image bleeds to the right edge and up behind the header — capped to the screen height, not scaled by column width. .hero-media is deliberately taken out of the grid and pinned with negative top offset (-var(--header-h)) so it reaches y:0; the header itself goes transparent (.is-inverse, toggled in app.js) only while that image still sits under it, so nothing else on the page ever needs this treatment. */ .hero { position: relative; padding: 0; min-height: calc(100vh - var(--header-h)); } .hero-ghost { top: 0.35em; left: var(--margin-page); font-size: clamp(3.6rem, 12vw, 8.8rem); z-index: 0; } .hero-copy { position: relative; z-index: 2; width: 50%; min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--header-h) var(--margin-page) 0; } .hero-copy .eyebrow { display: block; margin-bottom: 20px; } .hero-copy h1 { font-size: clamp(3.08rem, 5.5vw, 4.62rem); line-height: 1.04; max-width: 13ch; } .hero-note { font-family: var(--font-alt); font-style: italic; font-size: clamp(1.15rem, 1.65vw, 1.32rem); color: var(--ink); margin: 24px auto 0; max-width: 34ch; } .hero-copy p.hero-desc { font-size: 1rem; max-width: 42ch; line-height: 1.75; margin: 20px auto 30px; } .hero-media { position: absolute; z-index: 1; top: calc(-1 * var(--header-h)); right: 0; bottom: 0; width: 50%; } .hero-media-inner { position: relative; overflow: hidden; width: 100%; height: 100%; } /* må selv fylle boksen — ellers regnes img-ens %-høyde mot picture- elementets auto-høyde og full-bleed-utsnittet kollapser. */ .hero-media-inner picture { display: block; width: 100%; height: 100%; } .hero-media-inner img { width: 100%; height: 100%; object-fit: cover; } .hero-media-tag { position: absolute; left: -18px; bottom: 34px; z-index: 2; background: var(--paper); padding: 16px 25px; max-width: 253px; font-size: 0.83rem; letter-spacing: 0.04em; color: var(--ink-soft); line-height: 1.5; box-shadow: 0 18px 40px rgba(43,42,37,0.14); } @media (max-width: 900px) { .hero { min-height: 0; padding: 64px 0 0 0; } .hero-copy { width: auto; max-width: none; min-height: 0; align-items: flex-start; text-align: left; padding: 0 24px 32px; } .hero-copy h1, .hero-note, .hero-copy p.hero-desc { margin-left: 0; margin-right: 0; } .hero-ghost { display: none; } .hero-media { position: static; width: 100%; margin-top: 0; } .hero-media-inner { aspect-ratio: 4/5; } .hero-media-tag { left: 16px; } } /* ---------- colophon stat strip ---------- */ .stat-strip { position: relative; z-index: 1; display: flex; flex-wrap: wrap; } .stat-cell { flex: 1 1 200px; padding: 40px var(--margin-page); border-left: 1px solid rgba(220,224,208,0.18); } .stat-cell:first-child { border-left: none; } .stat-cell .stat-value { font-family: var(--font-display); font-size: 1.5rem; color: var(--paper); } .stat-cell .stat-label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-400); margin-top: 8px; } .stat-cell .stat-link { display: inline-block; margin-top: 14px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-200); border-bottom: 1px solid rgba(220,224,208,0.3); padding-bottom: 2px; transition: color 250ms var(--ease); } .stat-cell .stat-link:hover { color: var(--paper); } @media (max-width: 720px) { .stat-cell { border-left: none; border-top: 1px solid rgba(220,224,208,0.18); flex-basis: 100%; } .stat-cell:first-child { border-top: none; } } /* ---------- section head ---------- */ .section-head { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; } .section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: 14px; max-width: 14ch; } .section-head .section-head-meta { max-width: 34ch; font-size: 0.92rem; color: var(--ink-soft); padding-bottom: 6px; } /* ---------- editorial index rows (services) ---------- */ .index-rows { position: relative; z-index: 1; } .index-row { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 40px 0; border-top: 1px solid var(--sand); } .index-row:last-child { border-bottom: 1px solid var(--sand); } .index-row .row-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--sage-400); } .index-row .row-body { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .index-row h3 { font-size: 1.5rem; } .index-row .row-text { flex: 1 1 380px; } .index-row .row-text p { font-size: 0.96rem; line-height: 1.75; margin: 14px 0 0; max-width: 52ch; } .index-row .row-cta { flex: 0 0 auto; align-self: flex-end; } @media (max-width: 640px) { .index-row { grid-template-columns: 44px 1fr; gap: 16px; } .index-row .row-cta { align-self: flex-start; } } /* ---------- split rows (about teaser / about page) — asymmetric, offset ---------- */ .split-row { position: relative; display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: 0; } .split-row.is-reverse { grid-template-columns: 1.08fr 0.92fr; } .split-row .split-media { position: relative; min-width: 0; aspect-ratio: 4/5; } .split-row .split-media img { width: 100%; height: 100%; object-fit: cover; } .split-row .split-copy { position: relative; z-index: 1; padding: 0 clamp(28px, 6vw, 88px); } .split-row .split-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; max-width: 12ch; } .split-row .split-copy p { font-size: 1rem; max-width: 40ch; line-height: 1.75; margin: 20px 0 0; } .split-row .split-copy .link-arrow, .split-row .split-copy .btn { margin-top: 26px; display: inline-block; } @media (max-width: 860px) { .split-row, .split-row.is-reverse { grid-template-columns: 1fr; } .split-row .split-copy { padding: 40px 24px 56px; } } /* ---------- film credit block (about page) — contained, not edge-to-edge like split-row: this one's framed inside .section's own max-width/margin-page so it reads as a deliberate, centered media block rather than a bleeding photo. */ .film-block { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: clamp(32px, 5vw, 64px); } .film-block .film-video { position: relative; aspect-ratio: 16/9; border-radius: 3px; overflow: hidden; background: var(--sage-900); box-shadow: 0 24px 60px rgba(43,42,37,0.16); } .film-block .film-video video { width: 100%; height: 100%; display: block; } .film-block .film-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; margin-top: 14px; } .film-block .film-copy h2 em { font-family: var(--font-alt); font-style: italic; font-weight: 400; } .film-block .film-copy p { font-size: 1rem; max-width: 42ch; line-height: 1.75; margin: 20px 0 0; } @media (max-width: 860px) { .film-block { grid-template-columns: 1fr; gap: 28px; } } /* ---------- masonry portfolio grid ---------- True column-flow masonry, not a CSS grid with forced aspect-ratio boxes — each tile keeps the photo's real proportions (no object-fit: cover crop), sized down via a higher column-count instead of a fixed aspect-ratio. */ .masonry { position: relative; z-index: 1; columns: 3; column-gap: 16px; } /* Tiles er