-elementer. De ligger derfor i en
— en
kan ikke inneholde en annen, og nettleseren lukket den ytre med det samme, slik at bredde og typografi falt bort og linjene ble altfor lange. */ .brod > p + p, .dus > p + p{margin-top:1.35em} ::selection{background:var(--messing);color:var(--bein)} :focus-visible{outline:2px solid var(--messing);outline-offset:3px} .wrap{max-width:var(--bredde);margin:0 auto;padding:0 var(--marg)} .smal{max-width:900px;margin:0 auto;padding:0 var(--marg)} /* Forsidens intro: overskriften faar bredere spalte enn broedteksten, saa den engelske utgaven ogsaa faar plass til to hele setninger paa to linjer. */ .smal--vid{max-width:1160px} .skjul{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .hopp{position:absolute;left:-9999px;top:0;background:var(--gronn);color:var(--bein);padding:14px 20px;z-index:100} .hopp:focus{left:0} /* ---------- Typografi ---------- */ .merke{font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--messing);line-height:1.6;display:block} .merke--lys{color:var(--messing-lys)} .merke--ink{color:rgba(20,18,14,.62)} .merke--dus{color:rgba(242,237,225,.66)} .brod{font-size:clamp(16px,1.15vw,17px);line-height:1.78;color:rgba(20,18,14,.84)} .brod--lys{color:rgba(242,237,225,.8)} .dus{color:rgba(242,237,225,.66)} .sitat{font-family:var(--kursiv);font-style:italic;font-weight:300;line-height:1.4} h1{font-size:clamp(38px,6.2vw,70px)} h2{font-size:clamp(30px,4.4vw,52px)} h3{font-size:clamp(22px,2.6vw,32px)} /* ---------- Streker ---------- */ .strek{display:flex;flex-direction:column;gap:3px;width:100%} .strek i{display:block;height:1px;background:rgba(168,132,46,.55)} .strek i:last-child{background:rgba(168,132,46,.22)} .strek--ink i{background:rgba(20,18,14,.5)} .strek--ink i:last-child{background:rgba(20,18,14,.18)} .strek--enkel i:last-child{display:none} /* ---------- Lenker ---------- */ .lenke{ font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--messing); border-bottom:1px solid rgba(168,132,46,.55);padding:10px 0 8px;display:inline-block; line-height:26px;transition:color .25s,border-color .25s; } .lenke:hover,.lenke:focus-visible{color:var(--ink);border-color:var(--ink)} .lenke--lys{color:var(--messing-lys);border-bottom-color:rgba(215,180,90,.55)} .lenke--lys:hover,.lenke--lys:focus-visible{color:var(--bein);border-color:var(--bein)} /* ---------- Logo ---------- */ .logo{display:inline-flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;align-self:flex-start} /* Størrelsene: bokstavene styrer em-målene i resten av lockupen. */ .logo--topp{font-size:clamp(14px,4.6vw,20px)} .logo--topp .logo__segl{height:clamp(34px,10.5vw,54px)} .logo--topp .logo__siden{font-size:clamp(8px,2.4vw,9.4px)} .logo--bunn{font-size:13px} .logo--bunn .logo__segl{height:38px} .logo--bunn .logo__rad{height:calc(var(--bunnlinje,48px) - 11px)} .logo--bunn .logo__siden{font-size:8px} /* Seglet skal stå i den geometriske midten — altså midt på streken og rett over SINCE 1967. Ordene får derfor hvert sitt like brede felt, og siden MONRIK er ett tegn lengre enn WINES deles forskjellen på sperringen: MONRIK litt strammere, WINES litt luftigere. */ /* Symmetrisk innrykk gjør at streken under stikker like langt ut på begge sider — omtrent bredden av én bokstav. Seglet står uendret i midten. */ .logo__rad{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,1.2vw,16px);padding:0 .62em} /* Ordene senkes ned mot streken. Seglet er høyere enn bokstavene, og uten dette ville streken lagt seg 31 px under bokstavene men bare 10 px under seglet. Nå er avstanden over streken den samme som under den. */ .logo__ord{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1;white-space:nowrap; align-self:end;transform:translateY(.18em)} /* Halen etter siste bokstav i hvert ord trekkes bort, slik at luften rundt seglet blir like stor på begge sider. Sperringen på WINES er så justert til 0.65em — målt på piksler — slik at streken under stikker like langt ut forbi M-en som forbi S-en. */ .logo__ord--forst{justify-self:end;letter-spacing:.34em;margin-right:-.34em} .logo__ord--siste{justify-self:start;letter-spacing:.65em;margin-right:-.65em} .logo__segl{width:auto;display:block;flex-shrink:0} .logo__strek{width:100%;height:1px;background:rgba(168,132,46,.8)} .logo__siden{font-weight:500;letter-spacing:.44em;text-indent:.44em;color:var(--messing);line-height:1;white-space:nowrap} .logo--lys .logo__ord{color:var(--bein)} .logo--lys .logo__strek{background:rgba(215,180,90,.7)} .logo--lys .logo__siden{color:rgba(215,180,90,.95)} /* ---------- Masthead ---------- */ .topp{background:var(--bein);position:relative;z-index:20} .topp__rad{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding-top:38px} .topp__meny{display:flex;gap:clamp(20px,3.4vw,48px);justify-content:center;flex-wrap:wrap} .topp__meny a{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(20,18,14,.72);line-height:1;padding:16px 0;display:inline-block;transition:color .2s} .topp__meny a:hover,.topp__meny a[aria-current="page"]{color:var(--messing)} .topp__meny a.topp__meny-hjem{display:none} .topp__knapp{justify-self:end} .topp__burger{display:none;justify-self:end;background:none;border:0;padding:12px;cursor:pointer;min-width:48px;min-height:48px;align-items:center;justify-content:flex-end;flex-direction:column;gap:5px} .topp__burger span{display:block;width:24px;height:1px;background:var(--messing)} .topp__burger span:last-child{width:16px} /* ---------- Bilder ---------- */ .foto{width:100%;height:100%;object-fit:cover} .foto--flaske{object-fit:contain} .bue{border-radius:999px 999px 2px 2px;overflow:hidden} .bildetekst{display:flex;align-items:center;gap:20px;margin-top:22px} .bildetekst span:first-child{font-size:9px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(168,132,46,.95);line-height:1.6} .bildetekst i{flex-grow:1;height:1px;background:rgba(168,132,46,.35);display:block} .bildetekst--lys span:first-child{color:rgba(215,180,90,.9)} .plass{background:linear-gradient(168deg,var(--gronn-medium),var(--gronn-mork));display:flex;align-items:center;justify-content:center;text-align:center;padding:20px} .plass span{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(215,180,90,.8);border:1px solid rgba(215,180,90,.4);padding:8px 12px;line-height:1} .korn{position:relative} .korn::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:overlay; 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='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---------- Seksjoner ---------- */ .seksjon{padding:clamp(60px,8vw,110px) 0} .seksjon--bein{background:var(--bein)} .seksjon--bein2{background:var(--bein-2)} .seksjon--gronn{background:var(--gronn)} .seksjon--mork{background:var(--gronn-mork)} .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center} .duo--venstre{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)} .duo--hoyre{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)} .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,38px)} .kvartett{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3vw,44px)} .stabel{display:flex;flex-direction:column;gap:22px} .stabel--tett{gap:16px} .midtstilt{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center} .topplinje{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap} /* ---------- Sitatbånd ---------- */ .band{position:relative;overflow:hidden;height:clamp(300px,38vw,520px)} .band__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Sløret er lettet: teksten står mot 86 % dekning i venstre kant og slipper bildet fram mot høyre. Målt kontrast på sitatteksten er 8,9:1 i det lyseste punktet den faktisk dekker — godt over AA-kravet på 4,5:1. */ .band__slor{position:absolute;inset:0;display:flex;align-items:center; background:linear-gradient(90deg,rgba(11,33,26,.86) 0%,rgba(11,33,26,.54) 58%,rgba(11,33,26,.32) 100%)} .band__tekst{font-size:clamp(26px,3.6vw,44px);color:var(--bein);max-width:26ch;line-height:1.28} .band--apen .band__slor{background:linear-gradient(180deg,rgba(11,33,26,.30) 0%,rgba(11,33,26,.10) 46%,rgba(11,33,26,.34) 100%)} /* ---------- Nøkkeltall ---------- */ .tall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .tall > div{padding:36px 40px 40px;display:flex;flex-direction:column;gap:12px;border-left:1px solid rgba(20,18,14,.16)} .tall > div:first-child{border-left:0;padding-left:0} .tall > div:last-child{padding-right:0} .tall__verdi{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,26px);color:var(--gronn);line-height:1.15;letter-spacing:-.01em;min-height:2.3em} /* ---------- Kort ---------- */ .kort{display:flex;flex-direction:column;gap:22px} .kort__bilde{height:clamp(300px,30vw,440px);overflow:hidden} .kort__bilde--bue{height:clamp(280px,26vw,380px);border-radius:999px 999px 2px 2px} .kort p{font-size:15px;color:rgba(20,18,14,.74)} /* Kortene i en trio er like høye (grid strekker dem), men lenken lå rett under teksten — og med ulikt lange ingresser havnet strekene i utakt. Auto-marg skyver den siste lenken ned til kortets bunn, slik at strekene står på samme linje uansett hvor mange linjer teksten tar. */ .kort > .lenke:last-child{margin-top:auto} /* ---------- Liste med streker ---------- */ .rad{display:grid;gap:clamp(24px,4vw,60px);padding:30px 0;align-items:baseline} .rad--to{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)} .spek{display:grid;grid-template-columns:clamp(118px,24%,158px) minmax(0,1fr); gap:clamp(16px,3%,26px);padding:20px 0} /* ---------- Skjema ---------- */ .felt{display:flex;flex-direction:column;gap:10px} .felt label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(242,237,225,.7)} .felt input,.felt select,.felt textarea{ min-height:48px;border:0;border-bottom:1px solid rgba(242,237,225,.26);background:transparent; color:var(--bein);font-family:var(--sans);font-size:16px;padding:0 0 11px;border-radius:0; appearance:none;transition:border-color .2s; } .felt textarea{min-height:120px;padding-top:14px;resize:vertical;line-height:1.6} .felt input::placeholder,.felt textarea::placeholder{color:rgba(242,237,225,.34)} .felt input:focus,.felt select:focus,.felt textarea:focus{outline:none;border-bottom-color:var(--messing-lys)} .felt select{color:rgba(242,237,225,.6); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D7B45A' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 2px center} .felt select option{background:var(--gronn-mork);color:var(--bein)} .skjema{display:flex;flex-direction:column;gap:clamp(26px,3vw,38px)} .skjema__rad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3vw,38px)} .avkryss{display:flex;align-items:flex-start;gap:14px;font-size:14px;color:rgba(242,237,225,.62);cursor:pointer} .avkryss input{width:16px;height:16px;margin:5px 0 0;accent-color:var(--messing-lys);flex-shrink:0} .knapp{ align-self:flex-start;background:none;cursor:pointer;font-family:var(--sans); font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--messing-lys); border:0;border-bottom:1px solid rgba(215,180,90,.55);padding:12px 0 10px;transition:color .25s,border-color .25s; } .knapp:hover,.knapp:focus-visible{color:var(--bein);border-color:var(--bein)} /* ---------- Bunn ---------- */ .bunn{background:var(--gronn-mork);padding:clamp(52px,6.4vw,82px) 0 46px; --bunnlinje:48px} /* én strek går tvers over bunnen, i logoen og over spaltene */ .bunn__rad{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,3.4vw,54px)} .bunn a,.bunn p{font-size:13.5px;line-height:1.5;color:rgba(242,237,225,.62)} .bunn p{margin:0} .bunn a{transition:color .25s var(--ro)} .bunn a:hover{color:var(--messing-lys)} /* Hver spalte har en overskrift på hårstrek, og lenkene ligger tett. */ .bunn__lenker{display:flex;flex-direction:column;gap:0} .bunn__lenker > .merke,.bunn__rad .stabel > .merke{ display:flex;align-items:flex-start; height:var(--bunnlinje);margin-bottom:13px; border-bottom:1px solid rgba(215,180,90,.24)} .bunn__lenker > a{position:relative;width:-moz-fit-content;width:fit-content;padding:5px 0} .bunn__lenker > a::after{content:"";position:absolute;left:0;bottom:3px;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ro)} .bunn__lenker > a:hover::after,.bunn__lenker > a:focus-visible::after{transform:scaleX(1)} .bunn__lenker > p{margin-top:12px} .bunn__nyhet{display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid rgba(215,180,90,.4);padding-bottom:10px;margin-top:6px} .bunn__nyhet input{flex-grow:1;background:none;border:0;color:var(--bein);font-family:var(--sans);font-size:15px;min-height:44px;padding:0} .bunn__nyhet input::placeholder{color:rgba(242,237,225,.38)} .bunn__nyhet button{background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--messing-lys);padding:12px 0;white-space:nowrap} .bunn__slutt{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap; font-size:11.5px;color:rgba(242,237,225,.42);letter-spacing:.08em} /* ========================================================================== Mobil og nettbrett ========================================================================== */ @media (max-width:1080px){ .kvartett{grid-template-columns:repeat(2,minmax(0,1fr))} .tall{grid-template-columns:repeat(2,minmax(0,1fr))} .tall > div:nth-child(3){border-left:0;padding-left:0} .bunn__rad{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px} } @media (max-width:860px){ /* På mobil: språkvelger og meny på øverste linje, logoen sentrert under. */ .topp__rad{ grid-template-columns:auto auto; grid-template-areas:"sprak burger" "logo logo"; justify-content:space-between; padding-top:14px;row-gap:18px;column-gap:16px; } .topp__rad .sprak{grid-area:sprak;justify-self:start} /* Menyknappen skal stå på linje med toppen av NO / EN, ikke midtstilt i raden. */ .topp__rad .topp__burger{ grid-area:burger;justify-self:end;align-self:start; justify-content:flex-start;padding-top:19px; } .topp__rad .logo{grid-area:logo;justify-self:center;align-self:center} .topp__knapp{display:none} .topp__burger{display:flex} .topp__meny{ display:none;flex-direction:column;align-items:flex-start;gap:0; padding:10px 0 20px; } .topp .strek--ink:first-of-type{margin-top:22px!important} .topp__meny.apen{display:flex} .topp__meny a{padding:15px 0;font-size:13px;width:100%;border-bottom:1px solid rgba(20,18,14,.12)} .topp__meny a.topp__meny-hjem{display:inline-block} .duo,.duo--venstre,.duo--hoyre,.trio,.rad--to,.skjema__rad{grid-template-columns:minmax(0,1fr)} .duo{gap:38px} .spek{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0} .band__slor{background:linear-gradient(180deg,rgba(11,33,26,.62) 0%,rgba(11,33,26,.88) 100%)} .kort__bilde{height:320px} .kort__bilde--bue{height:320px} } @media (max-width:560px){ .bunn__rad > .stabel > .logo--bunn{margin-left:auto;margin-right:auto} .tall{grid-template-columns:minmax(0,1fr)} .tall > div{border-left:0;padding:24px 0} .tall > div + div{border-top:1px solid rgba(20,18,14,.16)} .bunn__rad{grid-template-columns:minmax(0,1fr)} .topplinje{align-items:flex-start;gap:22px} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } @media print{ .topp__meny,.topp__burger,.bunn__nyhet{display:none} body{background:#fff;color:#000} } /* ========================================================================== Språkvelger ========================================================================== */ .sprak{display:flex;align-items:center;gap:12px} .sprak__valg{font-size:10px;font-weight:500;letter-spacing:.24em;color:rgba(20,18,14,.5); padding:14px 2px;line-height:1;transition:color .2s;min-height:44px;display:inline-flex;align-items:center} .sprak__valg:hover{color:var(--messing)} .sprak__valg--aktiv{color:var(--ink);border-bottom:1px solid var(--messing)} .sprak__strek{width:1px;height:11px;background:rgba(20,18,14,.28);display:block} /* ========================================================================== Vinkort ========================================================================== */ /* Én vin per rad: flasken på den ene siden, ordene på den andre, annenhver vei. */ .viner{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(56px,7vw,110px)} .vin{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:clamp(30px,4vw,64px);align-items:center} .vin--speil > .vin__bilde{order:2} .vin__ord{display:flex;flex-direction:column;gap:16px;max-width:56ch} .vin__bilde{aspect-ratio:4/5;overflow:hidden;position:relative} .vin h3{font-size:clamp(24px,2.6vw,32px)} .vin__fakta{margin:4px 0 0;display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px 20px} .vin__fakta dt{padding-top:4px} .vin__fakta dd{margin:0;font-size:15px;line-height:1.6;color:rgba(20,18,14,.76)} .vin--lys .vin__fakta dd{color:rgba(242,237,225,.76)} .vin--lys h3{color:var(--bein)} .vin__lenker{display:flex;gap:30px;flex-wrap:wrap;margin-top:6px} @media (max-width:860px){ .viner{gap:56px} .vin{grid-template-columns:minmax(0,1fr);gap:22px} .vin--speil > .vin__bilde{order:0} .vin__bilde{aspect-ratio:5/4} .vin__fakta{grid-template-columns:76px minmax(0,1fr)} .topp__rad .sprak{order:-1} } @media (max-width:480px){ .vin__fakta{grid-template-columns:minmax(0,1fr);gap:4px 0} .vin__fakta dt{padding-top:12px} } /* ========================================================================== Filmtopp på forsiden ========================================================================== */ .film{position:relative;width:100%;height:clamp(320px,46vw,680px);overflow:hidden;background:var(--gronn-mork)} .film__video{width:100%;height:100%;object-fit:cover;display:block} .film__slor{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(11,33,26,.34) 0%,rgba(11,33,26,0) 26%,rgba(11,33,26,0) 62%,rgba(11,33,26,.42) 100%)} .film__lyd,.film__start{ position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,30px);z-index:2; display:inline-flex;align-items:center;gap:10px;cursor:pointer; min-height:44px;padding:11px 18px; font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase; color:var(--bein);background:rgba(11,33,26,.52);border:1px solid rgba(215,180,90,.55); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:background .25s,border-color .25s,color .25s; } .film__lyd:hover,.film__start:hover,.film__lyd:focus-visible,.film__start:focus-visible{ background:rgba(11,33,26,.8);border-color:var(--messing-lys);color:var(--messing-lys)} .film__start{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%)} .film__ikon{display:inline-flex;color:var(--messing-lys)} .film__lyd .film__kryss{display:none} .film__lyd[aria-pressed="false"] .film__bolge{display:none} .film__lyd[aria-pressed="false"] .film__kryss{display:block} @media (max-width:860px){ .film{height:clamp(300px,72vh,560px)} .film__lyd,.film__start{right:16px;bottom:16px;padding:11px 15px;letter-spacing:.2em} } @media (prefers-reduced-motion:reduce){ .film__video{display:block} } /* Instagram-lenke med ikon */ .sosial{display:inline-flex;align-items:center;gap:9px} .sosial svg{flex-shrink:0} /* ---------- Vinside ---------- */ .vin__tilbake{display:inline-block;transition:color .2s} .vin__tilbake:hover{color:var(--messing)} .vin__navn{color:inherit;text-decoration:none;transition:color .2s} .vin__navn:hover{color:var(--messing)} .vin__navn--lys{color:var(--bein)} .vin__navn--lys:hover{color:var(--messing-lys)} a.vin__bilde{display:block} a.vin__kort{color:inherit;text-decoration:none} a.vin__kort h3{transition:color .2s} a.vin__kort:hover h3{color:var(--messing)} .vin__blaa{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px 40px;align-items:center} .vin__blaa a{text-decoration:none} .vin__blaa-navn{display:block;font-family:var(--serif);font-size:clamp(19px,2vw,25px);color:var(--bein);line-height:1.2;margin-top:8px;transition:color .2s} .vin__blaa a:hover .vin__blaa-navn{color:var(--messing-lys)} .vin__blaa-alle{white-space:nowrap;padding:12px 0} /* ---------- Juridiske sider ---------- */ .juridisk{display:flex;flex-direction:column;gap:clamp(38px,4vw,56px)} .juridisk__blokk h2{font-size:clamp(22px,2.4vw,29px);margin-bottom:18px} .juridisk__blokk .brod p{margin:0 0 14px} .juridisk__blokk .brod p:last-child{margin-bottom:0} .juridisk__blokk .brod a{border-bottom:1px solid rgba(168,132,46,.4)} /* ---------- Bransjeliste ---------- */ .liste{display:flex;flex-direction:column} .liste__hode,.liste__rad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) 80px 118px minmax(0,1fr); gap:20px;align-items:baseline;padding:17px 0;border-top:1px solid rgba(242,237,225,.16)} .liste__hode{border-top:0;padding-bottom:12px} .liste__rad{color:rgba(242,237,225,.72);font-size:15px;text-decoration:none;transition:background .2s} .liste__rad:hover{background:rgba(242,237,225,.05)} .liste__prod{color:rgba(242,237,225,.5);font-size:13px;letter-spacing:.02em} .liste__navn{font-family:var(--serif);font-size:clamp(17px,1.6vw,20px);color:var(--bein);line-height:1.25} .liste__rad:hover .liste__navn{color:var(--messing-lys)} /* ---------- Bunnlinje ---------- */ .bunn__juridisk{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center} .bunn__juridisk a{color:rgba(242,237,225,.7);transition:color .2s} .bunn__juridisk a:hover{color:var(--messing-lys)} @media (max-width:860px){ .vin__blaa{grid-template-columns:minmax(0,1fr);text-align:left;gap:26px} .vin__blaa > div:last-child{text-align:left!important} .vin__blaa-alle{justify-self:start;order:3} .liste__hode{display:none} .liste__rad{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:20px 0} .liste__prod{grid-column:1/-1;order:1} .liste__navn{grid-column:1/-1;order:2;margin-bottom:4px} .liste__rad > span:nth-child(3){order:3} .liste__rad > span:nth-child(4){order:4;text-align:right} .liste__rad > span:nth-child(5){order:5;grid-column:1/-1;font-size:13px;color:rgba(242,237,225,.5)} } /* ---------- Flaskeplate ---------- */ .plate{position:relative} .plate:not(.plass){background:var(--plate)} /* Skyggen er brent inn i flaskebildene: en bred omgivelsesskygge og en smal kontaktskygge, begge regnet ut fra flaskens egen bredde i bildet. Den lå før som en pseudo-element på 10,2 % av platens høyde, og kunne havne oppå flasken hvis nettleseren regnet platehøyden i to omganger. Nå skalerer den med bildet og kan ikke komme i utakt med det. */ .vin__hero{aspect-ratio:4/5} /* ---------- Produsentlogoer ---------- */ .prodlogo{height:auto;display:block;max-width:100%} .husene{display:flex;align-items:center;justify-content:center;gap:clamp(46px,8vw,110px);flex-wrap:wrap} .husene a{display:flex;align-items:center;opacity:.85;transition:opacity .25s} .husene a:hover{opacity:1} @media (max-width:600px){ .husene{gap:38px} } /* ---------- Historien ---------- */ .hist__topp{position:relative;min-height:clamp(440px,62vh,660px);display:flex;align-items:flex-end;overflow:hidden;background:var(--gronn-mork)} .hist__topp > .foto{position:absolute;inset:0} .hist__slor{position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,33,26,.34) 0%,rgba(11,33,26,.30) 32%,rgba(11,33,26,.82) 72%,rgba(11,33,26,.95) 100%)} /* Det lette sløret måtte tåle et lyst bilde. Med gropene i La Geria — mye himmel og lys aske — sto merkelappen i messing nesten usynlig mot bunnen. Nå tetter sløret raskere fra midten og ned, der teksten faktisk står. */ .hist__slor--lett{background:linear-gradient(180deg,rgba(11,33,26,.18) 0%,rgba(11,33,26,.34) 34%,rgba(11,33,26,.72) 68%,rgba(11,33,26,.93) 100%)} .hist__hero{position:relative;padding-bottom:clamp(46px,6vw,84px);display:flex;flex-direction:column;gap:20px;max-width:var(--bredde)} .hist__hero h1{color:var(--bein);max-width:14ch} .hist__hero .brod{max-width:52ch} .hist__band{position:relative;height:clamp(300px,46vw,620px);display:flex;align-items:flex-end;overflow:hidden;background:var(--gronn-mork)} .hist__band > .foto{position:absolute;inset:0} .hist__bandtekst{position:relative;padding-bottom:clamp(34px,4vw,56px);display:flex;flex-direction:column;gap:14px} .hist__bandtekst .sitat{color:var(--bein);font-size:clamp(22px,3.4vw,40px);max-width:22ch} .kap{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start} .kap--med-bilde{grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,1.05fr)} .kap__spor{display:flex;flex-direction:column;gap:14px;grid-row:1/-1} .kap__aar{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,74px);line-height:.9; letter-spacing:-.02em;color:var(--gronn);display:block} .kap__aar--lys{color:var(--messing-lys)} .kap__tekst{display:flex;flex-direction:column;gap:22px;grid-column:2} .kap__tekst h2{font-size:clamp(26px,3.2vw,40px);max-width:18ch} /* Kapittelspalten er bred nok til over hundre tegn i linjen. Teksten får sitt eget leseformat, slik overskriften alt har. */ .kap__tekst .brod{max-width:66ch} .kap__tekst .brod p{margin:0 0 18px} .kap__tekst .brod p:last-child{margin-bottom:0} .kap__notat{font-size:15px;line-height:1.7;color:rgba(20,18,14,.62);border-top:1px solid rgba(20,18,14,.18);padding-top:16px} .kap__notat--lys{color:rgba(242,237,225,.62);border-top-color:rgba(242,237,225,.2)} .kap__bilder{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)} .ark{margin:0;background:var(--plate);padding:clamp(16px,1.6vw,24px)} .ark img{width:100%;height:auto;display:block} .ark figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:16px; font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;line-height:1.6;color:rgba(20,18,14,.58)} .ark__nr{white-space:nowrap;color:rgba(20,18,14,.4)} .ark--mork{background:rgba(242,237,225,.07)} .ark--mork figcaption{color:rgba(242,237,225,.6)} .ark--mork .ark__nr{color:rgba(242,237,225,.38)} .hist__sporsmal{font-family:var(--kursiv);font-style:italic;font-weight:200; font-size:clamp(28px,4.8vw,62px);line-height:1.14;color:var(--bein);max-width:26ch;text-wrap:balance} .hist__opptakt{max-width:54ch;margin-bottom:clamp(10px,1.4vw,20px)} .hist__opptakt p{margin:0 0 16px} .hist__opptakt p:last-child{margin-bottom:0} .hist__sagt{margin-top:-4px} .hist__coda{max-width:56ch;margin-top:clamp(14px,2vw,26px);padding-top:clamp(22px,2.4vw,32px); border-top:1px solid rgba(215,180,90,.34)} .hist__coda p{margin:0;font-size:15.5px;line-height:1.78;color:rgba(242,237,225,.66)} .navnet{display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);flex-wrap:wrap;justify-content:center} .navnet__ord{font-family:var(--serif);font-size:clamp(24px,3.4vw,42px);color:rgba(20,18,14,.34);line-height:1} .navnet__ord b{font-weight:400;color:var(--ink)} .navnet__pluss{font-family:var(--serif);font-size:clamp(18px,2vw,26px);color:var(--messing)} .navnet__sum{font-family:var(--serif);font-size:clamp(38px,6vw,78px);color:var(--gronn);line-height:1; letter-spacing:.02em;margin-top:-6px} .portretter{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,2.6vw,38px); max-width:720px;margin:clamp(46px,5vw,72px) auto 0} .hist__navntekst{max-width:52ch} .hist__navntekst p{margin:0 0 14px} .hist__navntekst p:last-child{margin-bottom:0} .portretter .ark{display:flex;flex-direction:column;padding:clamp(12px,1.1vw,16px)} .portretter .ark img{aspect-ratio:13/18;object-fit:cover;width:100%} .portretter .ark figcaption{margin-top:auto;padding-top:15px;flex-direction:column;align-items:flex-start; gap:6px;letter-spacing:.18em} .portretter .ark__nr{white-space:normal;letter-spacing:.2em} .hist__galleri{grid-column:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(22px,2.6vw,38px);margin-top:clamp(40px,5vw,68px);align-items:stretch} .hist__galleri--en{grid-template-columns:minmax(0,640px);justify-content:center} .hist__galleri .ark{display:flex;flex-direction:column} .hist__galleri .ark img{margin:auto 0} .hist__galleri .ark figcaption{margin-top:auto;padding-top:16px} .kap__spor--tom::before{content:"";display:block;width:56px;height:1px;background:rgba(20,18,14,.35)} /* Generasjonsskiftet. Ingen bilder, ingen spalter, ingen arkivnummer — bare luft. To ganger så mye toppmarg som et vanlig kapittel, aarstallene satt stort og stille i display-snittet, og en kort messingstrek som deler før fra etter. Det er en pause i lesningen, og det er meningen: her slutter ett kapittel i familien og et annet begynner. */ .hist__minne{background:var(--gronn-mork);color:var(--bein); padding:clamp(110px,15vw,220px) var(--marg);position:relative;overflow:hidden} .hist__minne::before,.hist__minne::after{content:"";position:absolute;left:50%; transform:translateX(-50%);width:min(560px,72vw);height:1px; background:linear-gradient(90deg,transparent,rgba(215,180,90,.34),transparent)} .hist__minne::before{top:clamp(48px,7vw,96px)} .hist__minne::after{bottom:clamp(48px,7vw,96px)} .hist__minne-inn{max-width:52ch;margin:0 auto;display:flex;flex-direction:column; align-items:center;text-align:center;gap:clamp(18px,2.2vw,28px)} .hist__minne-aar{font-family:var(--serif);font-weight:300; font-size:clamp(38px,6.4vw,84px);line-height:1;letter-spacing:.01em; color:var(--messing-lys);white-space:nowrap} .hist__minne-strek{display:block;width:1px;height:clamp(34px,5vw,62px); background:linear-gradient(180deg,rgba(215,180,90,.5),rgba(215,180,90,0))} .hist__minne h2{color:var(--bein);font-size:clamp(24px,3vw,38px);max-width:20ch;margin:0} .hist__minne-tekst{max-width:50ch} .hist__minne-tekst p{margin:0 0 clamp(16px,1.8vw,22px);font-size:clamp(16px,1.15vw,17.5px); line-height:1.95;color:rgba(242,237,225,.78)} .hist__minne-tekst p:last-child{margin-bottom:0;color:rgba(242,237,225,.58)} /* Oppslaget: to bilder i full bredde, kant i kant, uten arkivramme. Arkivet ligger i plater med nummer; vår egen tid gjør ikke det. Skiftet i format er hele poenget — leseren merker at vi har kommet ut av arkivet. */ .hist__oppslag{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--gronn-mork)} .hist__oppslag-bilde{margin:0;position:relative;overflow:hidden} .hist__oppslag-bilde img{width:100%;height:100%;object-fit:cover;display:block; aspect-ratio:4 / 5;transition:transform 1.4s var(--ro)} .hist__oppslag:hover .hist__oppslag-bilde img{transform:scale(1.02)} /* Bildeteksten kan havne over hva som helst — hvit flis, lys aske, himmel. Derfor et eget lite mørkefall i bunnen av hvert bilde, ikke bare skygge på skriften. */ .hist__oppslag-bilde::after{content:"";position:absolute;left:0;right:0;bottom:0; height:38%;pointer-events:none; background:linear-gradient(180deg,rgba(11,33,26,0) 0%,rgba(11,33,26,.58) 72%,rgba(11,33,26,.8) 100%)} .hist__oppslag-bilde figcaption{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(14px,1.8vw,24px); right:clamp(16px,2vw,28px);z-index:2;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase; line-height:1.6;color:rgba(242,237,225,.92)} .hist__oppslag-merke{position:absolute;left:50%;top:clamp(20px,3vw,40px);transform:translateX(-50%); z-index:2;padding:9px 18px;background:rgba(11,33,26,.72); border:1px solid rgba(215,180,90,.34);white-space:nowrap} @media (max-width:700px){ .hist__oppslag{grid-template-columns:minmax(0,1fr)} .hist__oppslag-bilde img{aspect-ratio:5 / 4} /* Stablet står merkelappen i skjøten og legger seg oppå bildeteksten. Da hører den heller hjemme øverst. */ .hist__oppslag-merke{top:clamp(14px,4vw,22px);bottom:auto} } @media (max-width:980px){ .kap,.kap--med-bilde{grid-template-columns:minmax(0,1fr);gap:30px} .kap__spor{grid-row:auto} .kap__tekst,.hist__galleri{grid-column:1} .kap__spor{flex-direction:row;align-items:baseline;gap:18px} .kap__aar{font-size:clamp(34px,10vw,52px)} } /* ---------- Monrik Evenings, toppbånd ---------- */ .ev__topp{display:grid;grid-template-columns:1.42fr 1fr 1fr;height:clamp(300px,44vw,640px);gap:2px;background:var(--gronn-mork)} .ev__topp > div{overflow:hidden;position:relative} @media (max-width:860px){ .ev__topp{grid-template-columns:1fr 1fr;height:clamp(240px,58vw,380px)} .ev__topp > div:nth-child(1){grid-column:1/-1;height:clamp(240px,62vw,420px)} } @media (max-width:520px){ .ev__topp{grid-template-columns:1fr;height:auto} .ev__topp > div{height:300px} .ev__topp > div:nth-child(1){height:340px} .ev__topp > div:nth-child(3){display:none} } /* ========================================================================== Bevegelse — tre grep, holdt så lave som mulig. Alt ligger bak .js, så innhold aldri kan bli usynlig om skriptet feiler. ========================================================================== */ /* 1 · Hårstreken tegnes fra venstre når den kommer til syne */ .js .strek i{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ro)} .js .strek.inne i{transform:scaleX(1)} .js .strek.inne i:last-child{transition-delay:.12s} /* 1b · Arkivmonteringene på Historien legges rolig ned */ .js .ark{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ro),transform .8s var(--ro)} .js .ark.inne{opacity:1;transform:none} .js .hist__galleri .ark.inne:nth-child(2){transition-delay:.08s} .js .hist__galleri .ark.inne:nth-child(3){transition-delay:.16s} /* 2 · Flasken blir stående mens smaksnotater og nøkkeltall passerer. Høyre spalte er nå lang nok til at det er noe å henge i. */ .vin__hero{position:sticky;top:24px;align-self:start} .vin__sans{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px 20px;padding:14px 0;align-items:baseline} .vin__sans p{margin:0;font-size:16px;line-height:1.7;color:rgba(20,18,14,.8)} .vin__spek{grid-template-columns:130px minmax(0,1fr);gap:20px;padding:13px 0; border-bottom:1px solid rgba(20,18,14,.12)} .vin__spek p{margin:0;font-size:15.5px;line-height:1.65;color:rgba(20,18,14,.82)} /* 3 · Årstallet blir hengende gjennom sitt eget kapittel */ .kap__spor{position:sticky;top:22px} @media (max-width:980px){ .kap__spor{position:static} } @media (max-width:860px){ .vin__hero{position:static} .vin__sans{grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 0} .vin__spek{grid-template-columns:minmax(0,1fr);gap:4px} .js .ark{transform:translateY(7px)} .js .hist__galleri .ark.inne:nth-child(2), .js .hist__galleri .ark.inne:nth-child(3){transition-delay:0s} } @media (prefers-reduced-motion:reduce){ .js .strek i{transform:none!important} .js .ark{opacity:1!important;transform:none!important} } /* ========================================================================== Produsentens film — hvelvet ramme, plakaten ligger stille til man ber om noe annet. Ingenting spiller av seg selv, ingenting bråker. ========================================================================== */ .pfilm{margin:0;display:grid;gap:clamp(18px,2vw,26px)} .pfilm__hvelv{position:relative;aspect-ratio:16/9;overflow:hidden; background:var(--gronn-mork); border-radius:clamp(54px,11vw,170px) clamp(54px,11vw,170px) 2px 2px; box-shadow:0 1px 0 rgba(20,18,14,.06),0 26px 60px -40px rgba(11,33,26,.55)} .pfilm__plakat,.pfilm__video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .pfilm__video{opacity:0;visibility:hidden;transition:opacity .7s var(--ro)} .pfilm__slor{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(11,33,26,.30) 0%,rgba(11,33,26,.06) 34%,rgba(11,33,26,.10) 62%,rgba(11,33,26,.52) 100%); transition:opacity .7s var(--ro)} .pfilm__spill{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; display:inline-flex;align-items:center;gap:13px;cursor:pointer; min-height:44px;padding:13px 22px 13px 16px; font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.26em; text-transform:uppercase;color:var(--bein); background:rgba(11,33,26,.42);border:1px solid rgba(215,180,90,.5); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); transition:background .3s var(--ro),border-color .3s var(--ro),color .3s var(--ro),opacity .5s var(--ro)} .pfilm__spill:hover,.pfilm__spill:focus-visible{ background:rgba(11,33,26,.72);border-color:var(--messing-lys);color:var(--messing-lys)} .pfilm__ring{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%; border:1px solid rgba(215,180,90,.6);color:var(--messing-lys); padding-left:3px;flex:0 0 auto} .pfilm__hvelv.spiller .pfilm__video{opacity:1;visibility:visible} .pfilm__hvelv.spiller .pfilm__plakat, .pfilm__hvelv.spiller .pfilm__slor, .pfilm__hvelv.spiller .pfilm__spill{opacity:0;pointer-events:none} .pfilm__tekst{display:grid;gap:9px;max-width:52ch} .pfilm__tekst p{margin:0;font-size:16px;line-height:1.7;color:rgba(20,18,14,.72)} .pfilm--lys .pfilm__tekst p{color:rgba(242,237,225,.7)} @media (max-width:640px){ .pfilm__spill{padding:12px 17px 12px 13px;letter-spacing:.2em;gap:10px} .pfilm__ring{width:26px;height:26px} } .pfilm__rom{max-width:1000px;margin:0 auto clamp(46px,5vw,74px)} /* ========================================================================== Monrik Evenings — kvelden. Siden holdes mørk hele veien, bildene står i buer som et par vinduer, og lyset kommer innenfra. ========================================================================== */ /* Porten inn til kvelden: ett bilde, et hvelv tegnet i messing, og ordene inni. Alt kommer til syne etter hverandre når man lander på siden. */ /* Buens bredde er ett tall. Både hvelvet og tekstspalten regnes ut fra det, så teksten aldri kan vokse ut av karmene — heller ikke på smale skjermer. Karmene ligger på 40/520 av 560 i viewBoxen, altså 0.857 av bredden; 0.74 gir teksten luft innenfor dem. */ .ev__port{position:relative;overflow:hidden;background:var(--gronn-mork); --bue:min(780px,94vw,80vh); min-height:max(clamp(560px,84vh,860px),calc(var(--bue) * 1.26)); display:flex;align-items:flex-end; padding:clamp(56px,8vw,110px) var(--marg) calc(var(--bue) * .10)} .ev__port-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ev__port-slor{position:absolute;inset:0; background: radial-gradient(126% 84% at 50% 62%,rgba(11,33,26,.16) 0%,rgba(11,33,26,.78) 68%,rgba(11,33,26,.95) 100%), linear-gradient(180deg,rgba(11,33,26,.62) 0%,rgba(11,33,26,.20) 30%,rgba(11,33,26,.80) 100%)} /* Hvelvet tegnes opp av seg selv. To streker, den innerste litt etter. */ .ev__hvelv{position:absolute;left:50%;bottom:0;transform:translateX(-50%); width:var(--bue);height:auto;aspect-ratio:560 / 660;pointer-events:none;overflow:visible; filter:drop-shadow(0 2px 10px rgba(11,33,26,.6))} /* Butte ender: den runde enden ville stukket en drøy piksel inn under sluttstenen. Nå slutter streken presist i kanten. */ .ev__hvelv-strek{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:butt} .ev__hvelv-strek--ytre{stroke-width:2.4;opacity:.92} .ev__hvelv-strek--karm{stroke-width:1.2;opacity:.62} .ev__hvelv-strek--haar{stroke-width:.8;opacity:.34} .ev__port-inn{position:relative;z-index:2;width:100%; max-width:calc(var(--bue) * .64);margin:0 auto; display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(14px,1.6vw,20px)} /* Navnet står på én linje — da rammer buen det, i stedet for å hvelve seg over. */ .ev__port-inn h1{color:var(--bein);margin:0;white-space:nowrap; font-size:max(26px,calc(var(--bue) * .086));max-width:none} .ev__port-inn > p{max-width:calc(var(--bue) * .54);margin:0; font-size:max(15px,calc(var(--bue) * .0255))} .ev__port-inn .merke{max-width:26em} .ev__segl-plass{position:absolute;left:50%; bottom:calc(var(--bue) * .947); transform:translate(-50%,50%);z-index:2;line-height:0} .ev__segl{width:calc(var(--bue) * .098);height:auto;opacity:.9;display:block} .ev__port-strek{width:min(220px,52%)} /* Lenkene får bruke buens fulle indre bredde, ikke tekstspaltens — da står de fire på én linje, fortsatt godt innenfor karmene. */ .ev__port-nav{display:flex;gap:14px 22px;flex-wrap:wrap;justify-content:center;margin-top:4px; width:max-content;max-width:calc(var(--bue) * .64)} .ev__port-lenker{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;margin-top:6px} /* Vinen helles opp — sakte, uten lyd, i sløyfe. */ .ev__hell{position:relative;height:clamp(320px,40vw,560px);overflow:hidden; background:var(--gronn-mork);display:flex;align-items:center} .ev__hell-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 86%} .ev__hell-slor{position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,33,26,.76) 0%,rgba(11,33,26,.12) 44%,rgba(11,33,26,.82) 100%)} @media (max-width:640px){ .ev__port{min-height:clamp(560px,90vh,760px);padding-bottom:clamp(26px,6vw,52px); --bue:min(700px,90vw,78vh)} .ev__segl-plass{bottom:calc(var(--bue) * .93)} .ev__port-inn h1{white-space:normal;max-width:11ch} /* på telefon får navnet bryte */ .ev__port-inn .merke{font-size:9px;letter-spacing:.16em;max-width:24em} .ev__port-lenker{gap:22px} } /* Et par buer ved siden av hverandre — smale, høye, som vinduer. */ .ev__par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:end} .ev__bue{height:clamp(280px,34vw,500px);overflow:hidden;position:relative; background:var(--gronn-mork); box-shadow:0 24px 56px -40px rgba(0,0,0,.9)} .ev__par > .ev__bue:nth-child(2){height:clamp(238px,29vw,428px)} .ev__bue::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(11,33,26,.24) 0%,rgba(11,33,26,0) 44%,rgba(11,33,26,.44) 100%)} /* Programmet ligger på øyen om natten. */ .ev__program{position:relative;overflow:hidden} .ev__program-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:.30;filter:saturate(.7)} .ev__program::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(110% 78% at 50% 44%,rgba(11,33,26,.42) 0%,rgba(11,33,26,.94) 100%)} @media (max-width:640px){ .ev__par{gap:12px} .ev__bue{height:clamp(230px,52vw,340px)} .ev__par > .ev__bue:nth-child(2){height:clamp(196px,45vw,296px)} } /* ========================================================================== Inngang — det som møter deg skal komme til syne, ikke stå der ferdig. ========================================================================== */ .js .ev__port [data-inn]{opacity:0;transform:translateY(16px); transition:opacity 1s var(--ro),transform 1s var(--ro)} .js .ev__port.inne [data-inn]{opacity:1;transform:none} .js .ev__port.inne [data-inn="1"]{transition-delay:.10s} .js .ev__port.inne [data-inn="2"]{transition-delay:.30s} .js .ev__port.inne [data-inn="3"]{transition-delay:.46s} .js .ev__port.inne [data-inn="4"]{transition-delay:.66s} .js .ev__port.inne [data-inn="5"]{transition-delay:.82s} .js .ev__port.inne [data-inn="6"]{transition-delay:1.00s} .js .ev__port.inne [data-inn="7"]{transition-delay:1.14s} /* Sluttstenen settes FØRST, og buen tegnes opp til den. Slik en bue faktisk bygges: stenen henges i lærret, og vangene mures opp mot den. Hver ring er to baner. Den lengste halvdelen måler 1043 skjermpiksler ved største bue (780px bred, 1,393x skala), så 1200 dekker den med margin. Strekmålet leses i skjermpiksler, ikke viewBox-enheter — det er derfor tallet ikke ser ut som noe i SVG-en. */ .js .ev__hvelv-strek{stroke-dasharray:1200;stroke-dashoffset:1200; transition:stroke-dashoffset 2.3s var(--ro)} .js .ev__port.inne .ev__hvelv-strek{stroke-dashoffset:0;transition-delay:.62s} .js .ev__port.inne .ev__hvelv-strek--karm{transition-delay:.88s} .js .ev__port.inne .ev__hvelv-strek--haar{transition-delay:1.08s} .js .ev__nisje,.js .ev__slutt,.js .ev__sokkel{opacity:0; transition:opacity 1.6s var(--ro)} .js .ev__slutt{transition-duration:1.1s} .js .ev__port.inne .ev__slutt{opacity:1;transition-delay:.10s} .js .ev__port.inne .ev__nisje{opacity:1;transition-delay:1.1s} .js .ev__port.inne .ev__sokkel{opacity:1;transition-delay:2.1s} /* Bildet puster så vidt inn bak det hele. */ .js .ev__port-foto{transform:scale(1.06);opacity:.001; transition:transform 3.2s var(--ro),opacity 1.6s var(--ro)} .js .ev__port.inne .ev__port-foto{transform:none;opacity:1} @media (prefers-reduced-motion:reduce){ .js .ev__port [data-inn], .js .ev__port-foto, .js .ev__nisje,.js .ev__slutt,.js .ev__sokkel{opacity:1!important;transform:none!important;transition:none!important} .js .ev__hvelv-strek{stroke-dashoffset:0!important;transition:none!important} } /* Et hugget tall bak hvert element — relieff, ikke dekor. */ .ev__stabel{position:relative} .ev__tall{position:absolute;left:-.06em;top:-.26em;z-index:0;pointer-events:none; font-family:var(--serif);font-size:clamp(120px,15vw,210px);line-height:.8; color:rgba(215,180,90,.075);letter-spacing:-.02em} .ev__stabel > *:not(.ev__tall){position:relative;z-index:1} .js .ev__tall{opacity:0;transform:translateY(18px); transition:opacity 1.4s var(--ro),transform 1.4s var(--ro);transition-delay:.15s} .js .ev__tall.inne{opacity:1;transform:none} /* Kanalkortene på Kontakt: lenkene står på linje, uansett tekstlengde. */ .kanal{height:100%} .kanal__lenke{align-self:flex-start;margin-top:auto;padding-top:clamp(14px,1.6vw,22px)} /* ========================================================================== Øyen — toppen. Bildet ligger under, omrisset av Lanzarote svever over. ========================================================================== */ .oy__topp{position:relative;overflow:hidden;background:var(--gronn-mork); height:clamp(340px,50vw,720px)} .oy__topp-ramme{position:absolute;inset:-6% 0;display:block;will-change:transform} .oy__topp-foto{width:100%;height:100%;object-fit:cover;object-position:50% 46%; display:block;will-change:transform} .oy__topp-slor{position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,33,26,.44) 0%,rgba(11,33,26,.04) 34%,rgba(11,33,26,.18) 66%,rgba(11,33,26,.72) 100%)} /* Øya tegner seg opp midt i bildet, og navnet kommer når streken er ferdig. */ .omriss{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:clamp(210px,26vw,420px);color:var(--messing-lys);pointer-events:none; will-change:transform;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,30px)} .omriss__strek{display:block;width:100%;height:auto; filter:drop-shadow(0 2px 20px rgba(11,33,26,.85))} .navnestrek{position:relative;display:flex;align-items:center;gap:clamp(14px,1.6vw,26px); font-family:var(--sans);font-weight:500; font-size:clamp(12px,1.25vw,17px);letter-spacing:.46em;text-transform:uppercase; color:var(--messing-lys);white-space:nowrap; text-shadow:0 2px 16px rgba(11,33,26,.9)} .navnestrek::before,.navnestrek::after{content:"";display:block; width:clamp(22px,3vw,52px);height:1px;background:currentColor;opacity:.6} .navnestrek > span{padding-left:.46em} @media (max-width:640px){ .omriss{width:min(230px,62vw);gap:14px} .omriss__ord{font-size:10px;letter-spacing:.36em} } /* Navnet kommer mens streken fortsatt tegnes, og trekker seg sammen med den. */ .js .navnestrek{opacity:0;transform:translateY(10px);letter-spacing:.66em; transition:opacity 2.4s var(--ro) 1.0s,transform 2.4s var(--ro) 1.0s,letter-spacing 6.5s var(--ro) 1.0s} .js .omriss.inne .navnestrek{opacity:1;transform:none;letter-spacing:.44em} /* Et merke med navnet sitt under — samme skrift, kortere forløp. */ .tegnord{position:absolute;z-index:3;pointer-events:none; display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,26px); will-change:transform} .tegnord .tegn{position:static;margin:0;width:clamp(150px,16vw,260px);opacity:1} .tegnord--h{right:clamp(28px,7vw,120px);top:47%;transform:translateY(-50%)} .tegnord--v{left:clamp(28px,7vw,120px);top:50%;transform:translateY(-50%)} .js .tegnord .navnestrek{ transition:opacity 1.4s var(--ro) .5s,transform 1.4s var(--ro) .5s,letter-spacing 2.4s var(--ro) .5s} .js .tegnord.inne .navnestrek{opacity:1;transform:none;letter-spacing:.46em} /* På smale skjermer fyller sitatet hele båndet. Da får merket vike — heller ingenting enn noe som ligger oppå teksten. */ @media (max-width:860px){ .band .tegnord{display:none} } @media (max-width:640px){ .tegnord .tegn{width:clamp(104px,26vw,152px)} .tegnord--h{right:16px} .tegnord .navnestrek{font-size:10px;letter-spacing:.34em;gap:10px} .tegnord .navnestrek::before,.tegnord .navnestrek::after{width:16px} } @media (prefers-reduced-motion:reduce){ .js .navnestrek{opacity:1!important;transform:none!important;transition:none!important} } /* ========================================================================== Merkene — fem tegn fra øya, tegnet for oss. De ligger oppå fotografiene, tegner seg opp når de kommer til syne, og driver sakte mens man ruller. ========================================================================== */ .tegn{position:absolute;z-index:3;pointer-events:none;display:block; width:clamp(96px,11vw,178px);color:var(--messing-lys);will-change:transform} .tegn svg{display:block;width:100%;height:auto; filter:drop-shadow(0 1px 10px rgba(11,33,26,.7))} .tegn--ink{color:var(--messing)} .tegn--ov{top:clamp(20px,3vw,44px);right:clamp(20px,5vw,80px)} .tegn--nv{top:clamp(20px,3vw,44px);left:clamp(20px,5vw,80px)} .tegn--sv{bottom:clamp(20px,3vw,44px);left:clamp(20px,5vw,80px)} .tegn--so{bottom:clamp(20px,3vw,44px);right:clamp(20px,5vw,80px)} .tegn--midt-h{top:50%;right:clamp(20px,5vw,80px);transform:translateY(-50%)} /* Streken tegner seg opp; konstruksjonen kommer sist, som et ekko. */ .js .tegn .merke__figur path,.js .tegn .merke__figur circle{ stroke-dasharray:640;stroke-dashoffset:640; transition:stroke-dashoffset 2.2s var(--ro)} .js .tegn .merke__konstr,.js .tegn .merke__skygge{opacity:0; transition:opacity 1.4s var(--ro)} .js .tegn.inne .merke__figur path,.js .tegn.inne .merke__figur circle{stroke-dashoffset:0} .js .tegn.inne .merke__konstr{opacity:.32;transition-delay:1.5s} .js .tegn.inne .merke__skygge{opacity:.55;transition-delay:1.3s} @media (max-width:640px){ .tegn{width:clamp(78px,22vw,110px)} .tegn--ov,.tegn--nv{top:16px} .tegn--sv,.tegn--so{bottom:16px} .tegn--ov,.tegn--so,.tegn--midt-h{right:14px} .tegn--nv,.tegn--sv{left:14px} } @media (prefers-reduced-motion:reduce){ .js .tegn .merke__figur path,.js .tegn .merke__figur circle{stroke-dashoffset:0!important;transition:none!important} .js .tegn .merke__konstr{opacity:.32!important} .js .tegn .merke__skygge{opacity:.55!important} } /* Et merke satt som avslutning på et parti, ikke svevende. */ .tegn--fast{position:static;margin:clamp(46px,5.5vw,76px) auto 0; width:clamp(88px,9vw,132px);opacity:.85} /* Merket over hvert av øyens tre ledd: asken, gropen, muren. */ .oy__ledd{display:flex;flex-direction:column;align-items:center} .oy__ledd-tegn{margin:0 auto clamp(16px,1.8vw,24px);opacity:1} .oy__ledd > .ramme{width:100%} /* Strek for strek: JS måler hver linje og gir den sin egen tid. CSS-en holder dem skjult til elementet er i syne. */ .js [data-strek].inne path,.js [data-strek].inne circle, .js [data-strek].inne line,.js [data-strek].inne polyline{stroke-dashoffset:0!important} @media (prefers-reduced-motion:reduce){ .js [data-strek] path,.js [data-strek] circle, .js [data-strek] line,.js [data-strek] polyline{ stroke-dashoffset:0!important;transition:none!important} } /* Ekkoet: samme merke i stort, mørkt og gjennomskinnelig. Ikke noe man ser med én gang — men rammen får dybde av det. */ .ekko{position:absolute;z-index:1;pointer-events:none;display:block; width:min(96%,760px);color:#04120D;opacity:.30;mix-blend-mode:multiply} .ekko svg{display:block;width:100%;height:auto} .ekko svg [stroke-width]{stroke-width:1.1} .ekko--midt{left:50%;top:50%;transform:translate(-50%,-50%)} .ekko--v{left:-6%;top:50%;transform:translateY(-50%)} .ekko--h{right:-6%;top:50%;transform:translateY(-50%)} .ekko--lys{color:var(--bein);opacity:.14;mix-blend-mode:screen} /* ========================================================================== Plansjen — øya som et gravert oppslag: fotografiet, en ramme som trekkes opp, og de tre kreftene tegnet inn etter tur. ========================================================================== */ .plansje{position:relative;overflow:hidden;background:var(--gronn-mork); min-height:clamp(440px,58vw,760px);display:flex;align-items:center; padding:clamp(40px,6vw,86px) var(--marg)} .plansje__ramme-foto{position:absolute;inset:-5% 0;display:block;will-change:transform} .plansje__foto{width:100%;height:100%;object-fit:cover;object-position:50% 40%; display:block;will-change:transform} .plansje__slor{position:absolute;inset:0; background:radial-gradient(96% 62% at 50% 52%,rgba(11,33,26,.62) 0%,rgba(11,33,26,.26) 58%,rgba(11,33,26,.12) 100%), linear-gradient(180deg,rgba(11,33,26,.42) 0%,rgba(11,33,26,.06) 34%,rgba(11,33,26,.40) 100%)} /* Rammen trekkes opp, én kant av gangen. */ .plansje__ramme{position:absolute;inset:clamp(16px,2.4vw,34px);pointer-events:none;z-index:2} .plansje__ramme i{position:absolute;background:rgba(215,180,90,.5);display:block} .plansje__ramme i:nth-child(1){top:0;left:0;height:1px;width:100%;transform-origin:left} .plansje__ramme i:nth-child(2){top:0;right:0;width:1px;height:100%;transform-origin:top} .plansje__ramme i:nth-child(3){bottom:0;right:0;height:1px;width:100%;transform-origin:right} .plansje__ramme i:nth-child(4){bottom:0;left:0;width:1px;height:100%;transform-origin:bottom} .plansje__inn{position:relative;z-index:3;width:100%;max-width:var(--bredde);margin:0 auto; display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vw,40px);text-align:center} .plansje__merke{letter-spacing:.42em} /* Toppstilt: forklaringslinjene under navnene er ulikt lange, og med bunnstilling loeftet de to-linjers figurene tegningen sin en linje opp. */ .plansje__rad{display:flex;gap:clamp(34px,7vw,120px);align-items:flex-start;justify-content:center;flex-wrap:wrap} .plansje__kraft{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.4vw,20px)} .plansje__kraft .tegn{margin:0;width:clamp(98px,10vw,152px);opacity:1} /* Tre elementer, tre grunner. Navnet sier hva det er, linjen under hvorfor det finnes — samme tredeling som forklaringene lenger nede på siden. */ .plansje__navn{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:20ch} .plansje__hvorfor{font-size:13.5px;line-height:1.55;text-align:center; color:rgba(242,237,225,.62);text-wrap:balance} .plansje__linje{margin:0;font-family:var(--kursiv);font-style:italic; font-size:clamp(19px,2.1vw,27px);color:rgba(242,237,225,.9);max-width:32ch;line-height:1.4} @media (max-width:640px){ .plansje{min-height:clamp(500px,120vw,720px)} .plansje__rad{gap:26px} .plansje__kraft .tegn{width:80px} .plansje__hvorfor{font-size:12.5px} } /* Kantene kommer først, så tegnene. */ .js .plansje__ramme i{transform:scale(0)} .js .plansje__ramme i:nth-child(1),.js .plansje__ramme i:nth-child(3){transform:scaleX(0)} .js .plansje__ramme i:nth-child(2),.js .plansje__ramme i:nth-child(4){transform:scaleY(0)} .js .plansje__ramme i{transition:transform 1.1s var(--ro)} .js .plansje.inne .plansje__ramme i{transform:none} .js .plansje.inne .plansje__ramme i:nth-child(2){transition-delay:.9s} .js .plansje.inne .plansje__ramme i:nth-child(3){transition-delay:1.7s} .js .plansje.inne .plansje__ramme i:nth-child(4){transition-delay:2.5s} .js .plansje__merke,.js .plansje__linje,.js .plansje__kraft figcaption{ opacity:0;transform:translateY(10px);transition:opacity 1.1s var(--ro),transform 1.1s var(--ro)} .js .plansje.inne .plansje__merke{opacity:1;transform:none;transition-delay:.4s} .js .plansje.inne .plansje__kraft:nth-child(1) figcaption{opacity:1;transform:none;transition-delay:2.6s} .js .plansje.inne .plansje__kraft:nth-child(2) figcaption{opacity:1;transform:none;transition-delay:4.5s} .js .plansje.inne .plansje__kraft:nth-child(3) figcaption{opacity:1;transform:none;transition-delay:6.4s} .js .plansje.inne .plansje__linje{opacity:1;transform:none;transition-delay:7.4s} @media (prefers-reduced-motion:reduce){ .js .plansje__ramme i{transform:none!important;transition:none!important} .js .plansje__merke,.js .plansje__linje,.js .plansje__kraft figcaption{ opacity:1!important;transform:none!important;transition:none!important} } /* Nisjen på forsiden: en bue inn i et mørkt rom. Man ser nok til å bli nysgjerrig, og ikke mer. */ .nisje{position:relative;display:block;overflow:hidden; aspect-ratio:3/4;background:var(--gronn-mork); border-radius:999px 999px 3px 3px; box-shadow:0 30px 70px -46px rgba(11,33,26,.85)} .nisje__foto{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover; object-position:50% 48%;will-change:transform; transition:filter 1.1s var(--ro)} .nisje__slor{position:absolute;inset:0;pointer-events:none; background:radial-gradient(78% 58% at 50% 46%,rgba(11,33,26,0) 0%,rgba(11,33,26,.42) 62%,rgba(11,33,26,.86) 100%); transition:opacity 1.1s var(--ro)} .nisje__karm{position:absolute;inset:11px;pointer-events:none; border:1px solid rgba(215,180,90,.34); border-radius:999px 999px 2px 2px; transition:border-color 1.1s var(--ro)} .nisje:hover .nisje__foto,.nisje:focus-visible .nisje__foto{filter:brightness(1.28)} .nisje:hover .nisje__slor,.nisje:focus-visible .nisje__slor{opacity:.62} .nisje:hover .nisje__karm,.nisje:focus-visible .nisje__karm{border-color:var(--messing-lys)} /* Buen står nøyaktig så høy som teksten ved siden av: toppen på linje med kapitélen, bunnen på linje med streken under lenken. Bildeteksten henger under uten å påvirke den høyden. */ .duo--strekk{align-items:stretch} .ev__port-liten{position:relative;width:100%;display:flex;flex-direction:column} .ev__port-liten > .nisje{flex:1 1 auto;aspect-ratio:auto;min-height:0} .ev__port-liten > .bildetekst{position:absolute;top:100%;left:0;right:0;margin-top:14px} /* Båndbildet får litt spillerom, så det kan drive med rullingen. */ .band__foto--driv{inset:-6% 0;height:112%;will-change:transform} /* Ekkoet dreier så vidt — man ser det ikke skje, bare at det ikke står stille. */ @keyframes monrik-dreier{from{transform:rotate(0)}to{transform:rotate(360deg)}} .ekko svg{animation:monrik-dreier 240s linear infinite} @media (prefers-reduced-motion:reduce){ .ekko svg{animation:none} } /* Bildene på Øyen puster ut når de kommer til syne — samme bevegelse som porten på Monrik Evenings. */ .js .oy__topp-foto,.js .plansje__foto{transform:scale(1.07); transition:transform 3.4s var(--ro)} .js .oy__topp.inne .oy__topp-foto,.js .plansje.inne .plansje__foto{transform:none} @media (prefers-reduced-motion:reduce){ .js .oy__topp-foto,.js .plansje__foto{transform:none!important;transition:none!important} } /* Plansjen: rammen og tekstene følger de raskere tegnene. */ .js .plansje.inne .plansje__ramme i:nth-child(2){transition-delay:.55s} .js .plansje.inne .plansje__ramme i:nth-child(3){transition-delay:1.05s} .js .plansje.inne .plansje__ramme i:nth-child(4){transition-delay:1.55s} .js .plansje.inne .plansje__kraft:nth-child(1) figcaption{transition-delay:1.45s} .js .plansje.inne .plansje__kraft:nth-child(2) figcaption{transition-delay:2.40s} .js .plansje.inne .plansje__kraft:nth-child(3) figcaption{transition-delay:3.35s} .js .plansje.inne .plansje__linje{transition-delay:4.10s} /* Når spaltene legger seg under hverandre finnes det ingen tekst å måle buen mot, så da får den sitt eget forhold igjen. */ @media (max-width:860px){ .duo--strekk{align-items:start} .ev__port-liten > .nisje{flex:0 0 auto;aspect-ratio:3/4} .ev__port-liten > .bildetekst{position:static;margin-top:14px} } /* ========================================================================== Karmen — hårstreken som løper langs innsiden av bilderammen, slik den gjør i porten på Evenings. Ligger på alle innrammede bilder. ========================================================================== */ .ramme{position:relative;display:block;overflow:hidden} .ramme.plass{display:flex} /* plassholderen skal fortsatt sentrere teksten sin */ .karm{position:absolute;inset:clamp(8px,.95vw,13px);pointer-events:none;z-index:2; border:1px solid rgba(215,180,90,.34); transition:border-color 1s var(--ro)} .bue > .karm,.kort__bilde--bue > .karm{border-radius:999px 999px 2px 2px} .karm--ink{border-color:rgba(168,132,46,.42)} .ramme > .foto{transition:filter 1.1s var(--ro)} a.ramme:hover > .foto,a.ramme:focus-visible > .foto{filter:brightness(1.24)} a.ramme:hover > .karm,a.ramme:focus-visible > .karm{border-color:var(--messing-lys)} a.ramme:focus-visible{outline:2px solid var(--messing-lys);outline-offset:3px} /* ========================================================================== Registeret — hele utvalget i én rolig oversikt øverst på Vinene, med de fire ordene som filter. Fortellingen om kjellerne står urørt under. ========================================================================== */ .reg__topp{display:flex;align-items:baseline;justify-content:space-between; gap:clamp(18px,3vw,44px);flex-wrap:wrap;margin-bottom:clamp(26px,3vw,42px)} .reg__filter{display:none;gap:clamp(16px,2.4vw,36px);flex-wrap:wrap;align-items:baseline} .js .reg__filter{display:flex} /* uten JS står alle tolv der, og ordene skjules */ .reg__ord{position:relative;background:none;border:0;padding:6px 0 10px;cursor:pointer; font-family:var(--sans);font-weight:500;font-size:clamp(10px,1vw,11.5px); letter-spacing:.26em;text-transform:uppercase;color:rgba(20,18,14,.5); transition:color .3s var(--ro)} .reg__ord i{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--messing); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ro)} .reg__ord:hover,.reg__ord:focus-visible{color:var(--ink)} .reg__ord.er-valgt{color:var(--messing)} .reg__ord.er-valgt i{transform:scaleX(1)} .reg__tall{margin:0;color:rgba(20,18,14,.42);white-space:nowrap} .reg__rutenett{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(30px,3.2vw,48px) clamp(24px,2.6vw,40px);align-items:stretch} .reg__celle{transition:opacity .5s var(--ro)} .reg__celle[hidden]{display:none} .reg__kort{display:flex;flex-direction:column;gap:12px;text-decoration:none;height:100%} .reg__bilde{display:block;position:relative;aspect-ratio:4/5;overflow:hidden} .reg__bilde .foto--flaske{transition:transform .9s var(--ro)} .reg__kort:hover .foto--flaske,.reg__kort:focus-visible .foto--flaske{transform:scale(1.045)} .reg__navn{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.25;color:var(--ink)} .reg__kort:hover .reg__navn{color:var(--messing)} .reg__aar{font-size:9px;line-height:1.7} .reg__kort:focus-visible{outline:2px solid var(--messing);outline-offset:4px} @media (max-width:980px){ .reg__rutenett{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:640px){ .reg__rutenett{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .reg__topp{flex-direction:column;align-items:flex-start;gap:14px} .reg__filter{gap:14px 20px} } /* ========================================================================== Utvalget — hele listen på ett brett, gruppert etter kjeller. Erstatter de lange radene: hver vin står ett sted, og sin egen side har resten. ========================================================================== */ .reg__filtre{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px)} .reg__filter--utvalg .reg__ord{font-size:clamp(9px,.85vw,10px);letter-spacing:.22em; color:rgba(20,18,14,.38)} .reg__filter--utvalg .reg__ord.er-valgt{color:var(--ink)} .reg__filter--utvalg .reg__ord i{background:rgba(20,18,14,.55)} /* Kjelleroverskriften er et felt som spenner hele rutenettet. Skjuler man den — som når man filtrerer — flyter kortene sammen til én rad. */ .kjeller__topp{grid-column:1/-1; display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) auto; gap:clamp(20px,3vw,52px);align-items:end; padding-bottom:clamp(16px,1.8vw,24px);margin-top:clamp(26px,3.4vw,54px); border-bottom:1px solid rgba(20,18,14,.16)} .kjeller__topp:first-child{margin-top:0} .kjeller__topp[hidden]{display:none} .kjeller__navn{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .kjeller__navn .prodlogo{margin-bottom:2px} .kjeller__kort{margin:0;font-size:16px;line-height:1.65;color:rgba(20,18,14,.72);max-width:52ch} .kjeller__lenke{white-space:nowrap} .reg__kort-tekst{font-size:14.5px;line-height:1.6;color:rgba(20,18,14,.66); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .reg__bunn{display:flex;flex-direction:column;align-items:flex-start;gap:5px; margin-top:auto;padding-top:11px;border-top:1px solid rgba(20,18,14,.13)} .reg__pris{font-family:var(--kursiv);font-size:17px;color:var(--ink);white-space:nowrap} .reg__utvalg{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:rgba(20,18,14,.42);line-height:1.5;white-space:nowrap} @media (max-width:420px){ .reg__utvalg{letter-spacing:.12em;font-size:8.5px} } .reg__utvalg--basis{color:var(--messing)} .reg__fotnote{margin:clamp(6px,1vw,14px) 0 0;font-size:13.5px;line-height:1.6; color:rgba(20,18,14,.48);max-width:66ch} @media (max-width:980px){ .kjeller__topp{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start} .kjeller__lenke{justify-self:start} } @media (max-width:640px){ .reg__kort-tekst{-webkit-line-clamp:2;font-size:13.5px} .reg__bunn{gap:6px} } .reg__tomt{margin:0 0 clamp(20px,2.4vw,34px);font-family:var(--kursiv);font-style:italic; font-size:clamp(17px,1.7vw,21px);color:rgba(20,18,14,.55);max-width:44ch} .reg__tomt[hidden]{display:none} /* På telefon er buen for liten til å ramme både navn, kapitél, brødtekst og lenker. Da lar vi den stå som et hvelv bak innholdet i stedet: den indre karmen tones ut, og det finnes ingen strek å kollidere med. */ @media (max-width:560px){ .ev__port{--bue:min(760px,112vw);min-height:clamp(600px,92vh,820px)} .ev__port-inn{gap:11px} .ev__segl-plass{bottom:calc(var(--bue) * .95)} .ev__segl{width:calc(var(--bue) * .095)} .ev__hvelv{filter:none} .ev__hvelv-strek--ytre{opacity:.44;stroke-width:1.5} .ev__hvelv-strek--karm{opacity:.16} .ev__hvelv-strek--haar{opacity:0} .ev__slutt{opacity:.55} .ev__nisje{opacity:1} .ev__port-inn{max-width:min(38ch,86vw)} .ev__port-inn > p{max-width:38ch;font-size:16px} .ev__port-inn h1{font-size:clamp(30px,7.4vw,54px)} .ev__port-nav{max-width:min(100vw - 2 * var(--marg),calc(var(--bue) * .70))} } /* Smale telefoner: buen blir litt hoyere, og satsen litt strammere, slik at seglet faar staa under sluttstenen uten aa komme nedi kapitelet. */ @media (max-width:400px){ .ev__port{--bue:min(760px,124vw)} .ev__port-inn{gap:9px} .ev__port-inn h1{font-size:clamp(26px,7vw,44px)} .ev__port-inn > p{font-size:15px;line-height:1.62} } /* --- Kveldene på Monrik Evenings --------------------------------------- Et månedsrutenett, ikke en liste: nesten alle kvelder er åpne, og da er det de få bookede som er informasjonen. Mandag og søndag står grå. */ .kal{--rute:clamp(38px,4vw,54px)} .kal__topp{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-bottom:16px;border-bottom:1px solid rgba(215,180,90,.26)} .kal__maned{font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:var(--bein); line-height:1.2} .kal__pil{background:none;border:0;cursor:pointer;color:var(--messing-lys); padding:10px 8px;line-height:0;transition:color .25s var(--ro),opacity .25s var(--ro)} .kal__pil:hover:not(:disabled){color:var(--bein)} .kal__pil:disabled{opacity:.22;cursor:default} .kal__pil:focus-visible{outline:2px solid var(--messing);outline-offset:2px} .kal__ukerad,.kal__rutenett{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))} .kal__ukerad{margin-top:16px;gap:2px} .kal__ukerad span{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:rgba(242,237,225,.36);text-align:center;padding-bottom:8px} .kal__rutenett{gap:2px} .kal__dag{display:flex;align-items:center;justify-content:center; height:var(--rute);font-family:var(--sans);font-size:14px; color:rgba(242,237,225,.30);background:none;border:0;padding:0} .kal__dag--tom{visibility:hidden} .kal__dag--av{color:rgba(242,237,225,.16)} /* Ledig kveld: en flate man kan trykke på. */ button.kal__dag--ledig{cursor:pointer;color:var(--bein); border:1px solid rgba(215,180,90,.30); transition:background-color .28s var(--ro),border-color .28s var(--ro),color .28s var(--ro)} button.kal__dag--ledig:hover,button.kal__dag--ledig:focus-visible{ background:rgba(215,180,90,.16);border-color:var(--messing-lys);color:var(--bein)} button.kal__dag--ledig:focus-visible{outline:2px solid var(--messing);outline-offset:2px} /* Booket kveld: streket over, ikke til å trykke på. */ .kal__dag--tatt{color:rgba(242,237,225,.30);position:relative} .kal__dag--tatt::after{content:"";position:absolute;left:24%;right:24%;top:50%;height:1px; background:rgba(242,237,225,.34)} .kal__nokkel{display:flex;align-items:center;gap:8px;margin:18px 0 0; font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:rgba(242,237,225,.46)} .kal__nokkel .kal__prikk:nth-of-type(2){margin-left:16px} .kal__prikk{width:11px;height:11px;flex-shrink:0} .kal__prikk--ledig{border:1px solid rgba(215,180,90,.55)} .kal__prikk--tatt{position:relative} .kal__prikk--tatt::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px; background:rgba(242,237,225,.34)} @media (max-width:860px){ .kal{--rute:clamp(40px,11vw,58px);max-width:420px} } /* --- Lenke ut til produsentens egen side -------------------------------- Skal leses som en henvisning, ikke en knapp: kapitél, messinghårstrek under, og et lite hjørnetegn som sier at man forlater nettstedet. */ .uthus{display:inline-flex;align-items:center;gap:9px;align-self:flex-start; margin-top:6px;padding-bottom:6px;text-decoration:none; font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:rgba(20,18,14,.62); border-bottom:1px solid rgba(168,132,46,.42); transition:color .28s var(--ro),border-color .28s var(--ro)} .uthus svg{opacity:.6;transition:opacity .28s var(--ro),transform .28s var(--ro)} .uthus:hover,.uthus:focus-visible{color:var(--messing);border-color:var(--messing)} .uthus:hover svg,.uthus:focus-visible svg{opacity:1;transform:translate(1.5px,-1.5px)} .uthus:focus-visible{outline:2px solid var(--messing);outline-offset:5px} @media (max-width:560px){ .uthus{font-size:10.5px;letter-spacing:.18em} } /* ---------- Håndverket, på vinsiden ---------- */ /* Radene med duft/smak og nøkkeltall ligger i hver sin blokk, slik at stabelens luft bare skiller blokkene og ikke hver enkelt rad. */ .vin__blokk{display:block} .vin__blokk > .merke{display:block} .handverk__tittel{font-size:clamp(28px,3.4vw,44px);max-width:16ch;margin:10px 0 clamp(30px,3.4vw,46px)} .handverk__trinn{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(36px,5vw,88px);row-gap:clamp(26px,3vw,40px)} .steg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start} .steg__nr{font-family:var(--serif);font-size:15px;letter-spacing:.06em;color:var(--messing); padding-top:3px;font-variant-numeric:tabular-nums} .steg h3{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gronn); font-weight:600;margin:0 0 8px;font-family:var(--sans)} .steg p{margin:0;font-size:15.5px;line-height:1.72;color:rgba(20,18,14,.82)} .steg em{font-style:italic} .handverk__skiller{margin-top:clamp(40px,4.6vw,70px);padding-top:clamp(26px,3vw,38px); border-top:1px solid rgba(168,132,46,.42);text-align:center} .handverk__skiller p{font-family:var(--serif);font-size:clamp(19px,2.1vw,26px);line-height:1.5; color:var(--gronn);max-width:26ch;margin:14px auto 0} @media (max-width:760px){ .handverk__trinn{grid-template-columns:minmax(0,1fr);row-gap:24px} .steg{gap:14px} } /* ---------- Arkivnotat hos en produsent ---------- */ .arkiv{display:flex;gap:22px;align-items:flex-start;max-width:56ch; margin-top:4px;padding-top:24px;border-top:1px solid rgba(20,18,14,.14)} .arkiv__bilde{flex:0 0 124px;width:124px;height:155px; border-radius:999px 999px 2px 2px;overflow:hidden;isolation:isolate} .arkiv__bilde .foto{width:100%;height:100%;object-fit:cover;display:block} .arkiv__bilde > .karm{inset:6px;border-radius:999px 999px 2px 2px} .arkiv__tekst{font-size:15px;line-height:1.6;color:rgba(20,18,14,.7)} .arkiv__tekst .merke{margin-bottom:8px} @media(max-width:560px){ .arkiv{gap:16px} .arkiv__bilde{flex:0 0 96px;width:96px;height:120px} .arkiv__tekst{font-size:14.5px} } /* ---------- Porten på Monrik Evenings: merke og nav på én linje ---------- Den engelske teksten er lengre enn den norske. Når merket eller navigasjonen brøt til to linjer, vokste stabelen oppover (den er bunnforankret) og traff seglet. Begge holdes nå på én linje, og skaleres med buen i stedet. */ @media (min-width:641px){ .ev__port-inn{gap:clamp(10px,calc(var(--bue) * .027),20px)} .ev__port-inn > .merke{ width:max-content;max-width:calc(var(--bue) * .94);white-space:nowrap; font-size:max(9px,calc(var(--bue) * .0132));letter-spacing:.26em} .ev__port-inn > p{max-width:calc(var(--bue) * .60)} .ev__port-nav{flex-wrap:nowrap;max-width:calc(var(--bue) * .94); gap:0 clamp(13px,calc(var(--bue) * .030),24px)} .ev__port-nav .merke{white-space:nowrap} } /* Mellom burger (861px) og full bredde brøt hovedmenyen til flere linjer — åtte punkter, og de engelske er lengre enn de norske. Sporing og mellomrom strammes i dette båndet, slik at menyen står på én linje hele veien ned. */ @media (min-width:861px) and (max-width:1180px){ .topp__meny{gap:clamp(11px,1.9vw,30px);flex-wrap:nowrap} .topp__meny a{font-size:10.5px;letter-spacing:.13em;white-space:nowrap} } /* ---------- Årstallet henger med også på mobil ---------- På PC spenner kapittelsporet over hele raden, og årstallet blir stående mens teksten passerer. Stablet hadde sporet bare sin egen høyde å henge i, så det sto stille. Kapittelet legges derfor ut som blokk på smal skjerm, og sporet får henge øverst — på seksjonens egen farge, med en kort overgang under, slik at teksten glir inn under det uten skarp kant. */ @media (max-width:980px){ .kap,.kap--med-bilde{display:block} .kap > .kap__bilder,.kap > .hist__galleri{margin-top:clamp(26px,5vw,38px)} .seksjon--bein .kap__spor{--spor-bunn:var(--bein)} .seksjon--bein2 .kap__spor{--spor-bunn:var(--bein-2)} .seksjon--gronn .kap__spor{--spor-bunn:var(--gronn)} .seksjon--mork .kap__spor{--spor-bunn:var(--gronn-mork)} .kap__spor{position:sticky;top:0;z-index:3; background:var(--spor-bunn,var(--bein)); padding:13px 0 11px;margin:0 0 20px} .kap__spor::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px; pointer-events:none; background:linear-gradient(to bottom,var(--spor-bunn,var(--bein)),transparent)} .kap__spor--tom{padding-top:0} .kap__aar{font-size:clamp(30px,8.4vw,46px)} } /* ========================================================================== Mobilmenyen: knappen blir stående oppe til høyre gjennom hele siden, og menyen åpner seg som et eget felt over innholdet. Tre streker, den nederste kortere — nok til å leses som en meny, uten å bli et ikon. Rører ikke PC-oppsettet: alt ligger under 861px. ========================================================================== */ .topp__burger span:not(.skjul){transition:transform .34s var(--ro),opacity .2s linear,width .34s var(--ro)} .topp__meny-fot{display:none} @media (max-width:860px){ .topp__burger{ position:fixed;top:12px;right:var(--marg);z-index:60; width:46px;height:46px;min-width:46px;min-height:46px; padding:0;gap:5px;align-items:center;justify-content:center; background:transparent;border:0;border-radius:50%;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} /* Øverst står knappen naken, akkurat der den alltid har stått. Det frostede feltet ligger i et eget lag bak strekene, og tones ut mot kanten med en maske — da finnes det ingen synlig sirkelkant, bare et mykt pust som løfter strekene fra bildet under. */ .topp__burger::before{ content:"";position:absolute;left:50%;top:50%; width:56px;height:56px;transform:translate(-50%,-50%); border-radius:50%;opacity:0;transition:opacity .55s var(--ro);pointer-events:none} .rullet .topp__burger::before{ opacity:1; -webkit-backdrop-filter:blur(15px) saturate(1.05) brightness(1.08); backdrop-filter:blur(15px) saturate(1.05) brightness(1.08); -webkit-mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,0) 100%); mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,0) 100%)} .topp__burger span:not(.skjul){position:relative;z-index:1} /* Ingen skive, ingen ramme — bare et frostet felt. Strekene får i stedet en hårfin skygge, så de holder seg mot lyse bilder uten at noe tegnes rundt dem. Over beinfargen merkes skyggen ikke. */ .rullet .topp__burger span:not(.skjul){ filter:drop-shadow(0 1px 1.5px rgba(11,33,26,.45))} .topp__burger span:not(.skjul){width:24px} .topp__burger span:last-child{width:16px} /* Raden trenger ikke lenger plass til knappen. Den gamle regelen for knappen i toppraden satte topp-innrykk og venstrestilling — den må vike, ellers står strekene i overkant av sirkelen i stedet for i midten. */ .topp__rad{grid-template-areas:"sprak sprak" "logo logo";padding-top:16px} .topp__rad .topp__burger{ position:fixed;padding:0;align-self:auto; align-items:center;justify-content:center} /* Åpen ligger knappen på selve panelet — ingen frost, ingen skygge, og strekene legger seg i kryss. */ .topp__burger[aria-expanded="true"]{ background:transparent;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} .topp__burger[aria-expanded="true"]::before{opacity:0} .rullet .topp__burger[aria-expanded="true"] span:not(.skjul){filter:none} .topp__burger[aria-expanded="true"] span:nth-of-type(2){transform:translateY(3px) rotate(45deg);width:22px} .topp__burger[aria-expanded="true"] span:nth-of-type(3){transform:translateY(-3px) rotate(-45deg);width:22px} /* Menyfeltet legger seg over siden, uansett hvor langt ned man er. */ .topp__meny.apen{ position:fixed;inset:0;z-index:55; background:var(--bein); padding:78px var(--marg) calc(34px + env(safe-area-inset-bottom)); overflow-y:auto;-webkit-overflow-scrolling:touch; display:flex;flex-direction:column;align-items:stretch;gap:0} .topp__meny.apen a{font-size:16px;letter-spacing:.2em;padding:17px 0} .topp__meny.apen a:first-of-type{border-top:1px solid rgba(20,18,14,.12)} .meny-apen{overflow:hidden} .topp__meny.apen .topp__meny-fot{ display:flex;flex-direction:column;align-items:flex-start;gap:22px; margin-top:auto;padding-top:30px;border:0} .topp__meny.apen .topp__meny-knapp{ display:inline-block;width:auto;align-self:flex-start; border:1px solid rgba(168,132,46,.55); padding:15px 24px;color:var(--messing);font-size:10px;letter-spacing:.26em} .topp__meny.apen .sprak--meny{display:flex;align-items:center;gap:12px} .topp__meny.apen .sprak--meny a{padding:4px 0;border:0;font-size:11px;width:auto} .topp__meny.apen .sprak--meny .sprak__valg--aktiv{border-bottom:1px solid var(--messing)} .topp__meny.apen .sprak--meny .sprak__strek{align-self:center} } /* ========================================================================== Nyhetsbrev — to lister, holdt tydelig fra hverandre. Forbruker står i bunnteksten på hver side, bransje på sin egen side. ========================================================================== */ .bunn__nyhet-tittel{font-family:var(--serif);font-size:19px;line-height:1.3; color:var(--bein)!important;margin:2px 0 2px;max-width:16ch} .nyhet{display:flex;flex-direction:column;gap:16px;margin-top:14px} .nyhet__felter{display:flex;flex-direction:column;gap:6px} .nyhet input[type=text],.nyhet input[type=email]{ width:100%;background:none;border:0;border-bottom:1px solid rgba(215,180,90,.34); color:var(--bein);font-family:var(--sans);font-size:15px;min-height:44px;padding:0 0 8px; border-radius:0;appearance:none;transition:border-color .25s} .nyhet input[type=text]+label+input{margin-top:4px} .nyhet input::placeholder{color:rgba(242,237,225,.38)} .nyhet input:focus{outline:none;border-bottom-color:var(--messing-lys)} .nyhet__knapp{align-self:flex-start;background:none;border:0;cursor:pointer; font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase; color:var(--messing-lys);padding:11px 0 9px;border-bottom:1px solid rgba(215,180,90,.5); transition:color .25s,border-color .25s} .nyhet__knapp:hover,.nyhet__knapp:focus-visible{color:var(--bein);border-color:var(--bein)} /* Samtykket: aldri forhåndskrysset, og teksten skal være til å lese. */ .samtykke{display:flex;align-items:flex-start;gap:12px;cursor:pointer; font-size:12.5px;line-height:1.55;color:rgba(242,237,225,.54);max-width:38ch} .samtykke input{appearance:none;-webkit-appearance:none;position:relative; width:15px;height:15px;margin:3px 0 0;flex-shrink:0;cursor:pointer;border-radius:1px; border:1px solid rgba(215,180,90,.5);background:transparent; transition:background .2s var(--ro),border-color .2s var(--ro)} .samtykke input:checked{background:var(--messing-lys);border-color:var(--messing-lys)} .samtykke input:checked::after{content:"";position:absolute;left:4.5px;top:1px; width:3.5px;height:8px;border:solid var(--gronn-mork);border-width:0 1.6px 1.6px 0; transform:rotate(42deg)} .samtykke input:focus-visible{outline:2px solid var(--messing-lys);outline-offset:2px} .samtykke a{font-size:inherit;color:rgba(215,180,90,.85);text-decoration:underline; text-underline-offset:2px} .samtykke--ink{color:rgba(20,18,14,.6);max-width:46ch;font-size:13px} .samtykke--ink input{border-color:rgba(168,132,46,.6)} .samtykke--ink input:checked{background:var(--messing);border-color:var(--messing)} .samtykke--ink input:checked::after{border-color:var(--bein)} .samtykke--ink input:focus-visible{outline-color:var(--messing)} .samtykke--ink a{color:var(--messing)} /* Bransjeskjemaet står på lys bunn — feltene må snus. */ .trade .felt label{color:rgba(20,18,14,.55)} .trade .felt input{color:var(--ink);border-bottom-color:rgba(20,18,14,.22)} .trade .felt input::placeholder{color:rgba(20,18,14,.32)} .trade .felt input:focus{border-bottom-color:var(--messing)} .knapp--ink{color:var(--messing);border-bottom-color:rgba(168,132,46,.5)} .knapp--ink:hover,.knapp--ink:focus-visible{color:var(--ink);border-color:var(--ink)} @media (max-width:860px){ .nyhet{gap:14px} .samtykke{max-width:none} } /* HoReCa er et innarbeidet bransjeord, og leses på stavelsene — Hotel, Restaurant, Café. Versalisert blir det et ord ingen kjenner igjen, så dette ene punktet beholder sin egen skrivemåte. */ .uord{text-transform:none!important}