/* ────────────────────────────────────────────────────────────── HERO AW26 — "Weightless Warmth" Reglene og verdiene er tatt uendret fra designfila. Eneste endring er at selektorene er scopet under .hero-aw26 slik at de ikke kolliderer med main.css (som allerede har .hero, h1 osv.). HÅNDKALIBRERT TIL hero_6712cc79.webp — IKKE ENDRE: hår-maske ellipse 13% 12% at 70% 14% + .p-hair transform-origin 60% 20% flare senter 19% 55% bakgrunn background-position 50% 40% Avvik fra designfila: - flarens radius: «circle 23%» er ugyldig CSS (prosent-radius er bare lov på ellipse), byttet til «ellipse 23% 23%». Samme tall. - tag-laget (.p-tag / .tag / @keyframes dangle) er tatt ut, se kommentaren ved parallakse-laga under. ────────────────────────────────────────────────────────────── */ :root { --mx:0; --my:0; --gust:0; } /* Kampanjeflata overstyrer paletten LOKALT og med vilje: den er tegnet mot sitt eget fotografi, ikke mot butikkens hvite underlag. Navnene er de samme som globalt, så en leser ser at dette er en overstyring og ikke et sidespor. Uten den lokale --rod ville pila og prikken her hoppet til merkerødt da paletten ble byttet 10. september. */ .hero-aw26 { --paper:#f3f1ec; --ink:#2a2622; --rod:#d8342b; font-family:'Inter',system-ui,sans-serif; color:var(--ink); } /* Bevegelsen i heroen peker paa punkter i selve fotografiet: masken maa ligge over haaret, flaren over det virkelige lyset. Verdiene under er for dagens bilde. Byttes bildet, settes de per blokk — ellers vaier en tom flekk himmel og vi legger et lysglimt der sola ikke er. */ .hero-aw26 { --hair-x:70%; --hair-y:14%; --hair-rx:13%; --hair-ry:12%; --flare-x:19%; --flare-y:55%; } .hero-aw26 { position:relative; width:100vw; height:100vh; min-height:100svh; overflow:hidden; background:#fff; cursor:crosshair; } /* cinematic focus-pull intro (one-shot, cheap after) */ .hero-aw26 .stage { position:absolute; inset:0; z-index:1; animation:focuspull 1.9s cubic-bezier(.16,1,.3,1) both; } @keyframes focuspull { 0%{filter:blur(13px) brightness(1.3);transform:scale(1.06)} 100%{filter:blur(0) brightness(1);transform:scale(1)} } .hero-aw26 .p { position:absolute; inset:0; will-change:transform; } .hero-aw26 .p-base { transform:translate(calc(var(--mx)*6px), calc(var(--my)*6px)); } .hero-aw26 .p-hair { transform-origin:60% 20%; transform:translate(calc(var(--mx)*14px), calc(var(--my)*14px)) rotate(calc(var(--gust)*-2.2deg)); } /* Designfila hadde et tredje lag her, .p-tag, som lot den røde taggen dingle i samme vind som håret. Det er tatt ut: taggen er liten, hard i kanten og sterk i fargen, og delte seg synlig i overgangen mellom det maskerte laget og baselaget. Håret tåler det samme fordi det er mykt og trådete. Se git-historikken hvis den skal inn igjen. */ .hero-aw26 .layer { position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:50% 40%; filter:contrast(.96) brightness(1.02) saturate(1.03) sepia(.02); } .hero-aw26 .base { animation:kenburns 34s ease-in-out infinite alternate; transform-origin:60% 46%; } @keyframes kenburns { from{transform:scale(1.0)} to{transform:scale(1.028)} } /* HAIR — swaying tail, masked over clean white (upper-right). Transform-only = runs cool */ .hero-aw26 .hair { animation:kenburns 34s ease-in-out infinite alternate, sway 7s ease-in-out infinite; -webkit-mask-image:radial-gradient(ellipse var(--hair-rx) var(--hair-ry) at var(--hair-x) var(--hair-y), #000 32%, rgba(0,0,0,.5) 60%, transparent 82%); mask-image:radial-gradient(ellipse var(--hair-rx) var(--hair-ry) at var(--hair-x) var(--hair-y), #000 32%, rgba(0,0,0,.5) 60%, transparent 82%); } @keyframes sway { 0%,100%{transform:scale(1) rotate(0) translateX(0) skewX(0)} 50%{transform:scale(1) rotate(-0.9deg) translateX(-4px) skewX(0.5deg)} } /* SUN FLARE — enhances the real optical flare; breathes, drifts, follows cursor */ .hero-aw26 .flare { position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; transform:translate(calc(var(--mx)*-22px), calc(var(--my)*-22px)); } /* NB: designfila hadde «circle 23%». CSS tillater ikke prosent-radius på circle — bare på ellipse — så gradienten var ugyldig og tegnet ingenting. «ellipse 23% 23%» er samme tall, nå gyldig. Senter 19% 55% er urørt. */ .hero-aw26 .bloom { position:absolute; inset:0; background:radial-gradient(ellipse 23% 23% at var(--flare-x) var(--flare-y), rgba(255,244,220,.8), rgba(255,240,210,0) 58%); animation:breathe 10s ease-in-out infinite; } .hero-aw26 .streak { position:absolute; left:0; width:50%; top:calc(var(--flare-y) - 1%); height:3px; background:linear-gradient(90deg, rgba(255,238,210,.55) 6%, rgba(255,238,210,.35) 30%, transparent 70%); filter:blur(1px); animation:streak 12s ease-in-out infinite; } /* Staar sola til hoeyre i bildet, maa stripa ut fra den samme veien. Gradienten snus i stedet for elementet — streak-animasjonen eier transform. */ .hero-aw26.sol-hoyre .streak { left:auto; right:0; background:linear-gradient(270deg, rgba(255,238,210,.55) 6%, rgba(255,238,210,.35) 30%, transparent 70%); } @keyframes breathe { 0%,100%{opacity:.6} 50%{opacity:.95} } @keyframes streak { 0%,100%{opacity:.35;transform:translateY(0)} 50%{opacity:.7;transform:translateY(-6px)} } /* Sloeret fra venstre er det som gjoer at moerk tekst kan staa rett paa fotografiet. Hvor sterkt det maa vaere, avhenger av bildet: et hoeyt studiobilde trenger nesten ingenting, et motiv med moerkt skybaand under teksten trenger mer. Derfor er styrke og rekkevidde variabler. */ .hero-aw26 { --wash-styrke:.55; --wash-rekkevidde:40%; } .hero-aw26 .wash { position:absolute; inset:0; z-index:4; pointer-events:none; background: linear-gradient(105deg, rgba(243,241,236,var(--wash-styrke)), rgba(243,241,236,0) var(--wash-rekkevidde)), radial-gradient(130% 130% at 55% 45%, transparent 62%, rgba(120,108,92,.12) 100%); } .hero-aw26 .grain { position:absolute; inset:-60px; z-index:5; pointer-events:none; background:url("data:image/svg+xml;utf8,"); background-size:160px 160px; opacity:.05; mix-blend-mode:soft-light; animation:grainshift 1.1s steps(3) infinite; } @keyframes grainshift { 0%{transform:translate(0,0)} 33%{transform:translate(-11px,7px)} 66%{transform:translate(8px,-9px)} 100%{transform:translate(0,0)} } /* COPY — upper-left negative space, dark on white */ /* Heroen starter bak båndet og menyen, så top måles fra skjermkanten, og logoen slutter på 88 px (34 bånd + 28 luft + 26 logo). Med 17vh sto «Kolleksjon 2026» 34–80 px under den — 43 på en 1366×768-laptop. Torunn syntes det var for tett (14. september). 24vh gir 85–142 px. Lavere går ikke uten at knappen havner over dunjakka nede til venstre i bildet: målt uten sløret står den nå på 188–231 av 255 i snitt, mot 205–236 før. */ .hero-aw26 .copy { position:absolute; z-index:7; left:clamp(24px,6vw,110px); top:clamp(132px,24vh,230px); max-width:min(760px,52vw); } .hero-aw26 .eyebrow { font-size:clamp(10px,.9vw,12px); letter-spacing:.5em; text-transform:uppercase; font-weight:400; color:#6a625a; opacity:0; animation:fade 1s ease 1.3s forwards; } /* Pinnen og ikke en rund prikk, som foran etikettene lenger ned på sida (Torunn, 14. september). Høyden styrer; fila er beskåret tett. */ .hero-aw26 .eyebrow .pin { display:inline-block; height:11px; width:auto; vertical-align:-1px; margin-right:16px; transform:scale(0); animation:pop .6s cubic-bezier(.2,1.4,.4,1) 1.5s forwards; } @keyframes pop { to{transform:scale(1)} } /* STOERRELSEN ER BUNDET TIL OVERSKRIFTEN SOM STAAR DER. «Vektløs / Varme» var 3.03 og 2.41 em bred og taalte 108px i en 600px-spalte. «Born in History / Designed for Tomorrow.» (16. september) er 6.26 og 8.65 em — den kursive linja maaler 934px ved 108px og hadde brutt i to midt i ordet «Tomorrow». Tallene er maalt i selve fontfila, ikke anslaatt. 8.65 em er det som bestemmer: spalta maa vaere minst 8.65 x font, og her er den ca. 9 % romsligere enn det overalt fra 769px og opp. Byttes overskriften til noe kortere igjen, hoerer et stoerre tall hjemme her. */ .hero-aw26 h1 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:300; font-size:clamp(40px,4.2vw,84px); line-height:.92; letter-spacing:.008em; margin:.45em 0 .55em; color:var(--ink); } /* Margen var .28/.24 em. Halen paa g i «Designed» gaar .28 em under grunnlinja og sto da nesten nede i underteksten; Morten ba om mer luft i blokka, 17. september, foerst paa mobil og saa paa PC. */ /* overflow:hidden er masken linjene glir opp bak. Med line-height .92 stakk underlengdene ut av boksen og ble kappet: halen paa g i «Designed» og y i «History» forsvant (Mortens skjermbilde fra iPhone, 17. september). Maalt i fontfila: g, y og kursiv f gaar .28 em under grunnlinja, og med denne linjehoeyden ligger grunnlinja bare ca. .15 em over bunnen av boksen. Boksen faar derfor .26 em ekstra i bunnen, og like mye negativ margin, saa linjeavstanden er uendret. Startpunktet flyttes tilsvarende (112 % -> 142 %), ellers ville toppen av bokstavene stikke fram i den ekstra plassen foer animasjonen. */ .hero-aw26 h1 .line { display:block; overflow:hidden; padding-bottom:.26em; margin-bottom:-.26em; } .hero-aw26 h1 .line > span { display:block; transform:translateY(142%); animation:lineup 1.15s cubic-bezier(.19,1,.22,1) forwards; } .hero-aw26 h1 .l1 > span { animation-delay:1.45s; } .hero-aw26 h1 .l2 > span { animation-delay:1.58s; } .hero-aw26 h1 em { font-style:italic; font-weight:400; } @keyframes lineup { to{transform:translateY(0)} } .hero-aw26 .sub { font-size:clamp(12px,1.05vw,15px); color:#4c463f; font-weight:300; letter-spacing:.03em; line-height:1.6; margin-bottom:2.6em; max-width:30ch; opacity:0; animation:rise 1.2s ease 2s forwards; } .hero-aw26 .cta { display:inline-flex; align-items:center; gap:14px; font-size: var(--t-fin); letter-spacing:.24em; text-transform:uppercase; font-weight:500; color:var(--ink); text-decoration:none; padding:2px 0 8px; border-bottom:1px solid var(--gronn); opacity:0; animation:rise 1.2s ease 2.2s forwards; transition:.4s ease; } /* Streken er aksentgrønn, som understreken i menyen (Torunn, 14. september). Den var gråbrun på 40 %. --gronn er ikke overstyrt i paletten over, så det er butikkens grønne og ikke en egen kampanjefarge. */ .hero-aw26 .cta:hover { letter-spacing:.3em; } .hero-aw26 .cta .arrow { color:var(--rod); transition:transform .4s ease; } .hero-aw26 .cta:hover .arrow { transform:translateX(7px); } @keyframes rise { to{opacity:1; transform:translateY(0)} } @keyframes fade { to{opacity:1} } .hero-aw26 .badge { position:absolute; z-index:7; right:clamp(24px,6vw,64px); bottom:clamp(38px,9vh,74px); font-size: var(--t-micro); letter-spacing:.28em; text-transform:uppercase; text-align:right; line-height:2.1; color:#6a625a; text-decoration:none; opacity:0; animation:rise 1.4s ease 2.4s forwards; transition:color .4s ease; } /* Groenn strek, som under heroens knapp og i menyen — mockupen 16. september har den der ogsaa. Den var graabrun paa 28 %, altsaa nesten borte: to understreker paa samme skjerm, den ene groenn og den andre knapt synlig, leste som at merket nede til hoeyre var mindre klikkbart enn knappen. */ .hero-aw26 .badge b { color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--gronn); padding-bottom:2px; transition:border-color .4s ease; } .hero-aw26 .badge .arrow { color:var(--rod); display:inline-block; transition:transform .4s ease; } .hero-aw26 .badge:hover .arrow { transform:translateX(5px); } /* Paa mobil er merket skjult; se mobilblokka. */ .hero-aw26 .scroll { position:absolute; z-index:7; left:50%; bottom:26px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-size: var(--t-micro); letter-spacing:.34em; text-transform:uppercase; color:#6a625a; opacity:0; animation:fade 1.2s ease 2.6s forwards; } .hero-aw26 .scroll .track { width:1px; height:46px; background:rgba(106,98,90,.35); position:relative; overflow:hidden; } .hero-aw26 .scroll .track::after { content:''; position:absolute; left:0; top:-50%; width:1px; height:50%; background:var(--ink); animation:scrolldot 2.2s cubic-bezier(.7,0,.3,1) infinite; } @keyframes scrolldot { 0%{top:-50%} 60%,100%{top:100%} } @media (prefers-reduced-motion:reduce) { .hero-aw26 .stage{animation:none} .hero-aw26 .base,.hero-aw26 .hair,.hero-aw26 .bloom,.hero-aw26 .streak,.hero-aw26 .grain{animation:none!important} .hero-aw26 .p-base,.hero-aw26 .p-hair,.hero-aw26 .flare{transform:none!important} .hero-aw26 .eyebrow,.hero-aw26 .sub,.hero-aw26 .cta,.hero-aw26 .badge,.hero-aw26 .scroll{opacity:1!important;animation:none!important} .hero-aw26 h1 .line>span{transform:none!important;animation:none!important} .hero-aw26 .eyebrow .pin{transform:scale(1);animation:none} } /* ── NAV over den lyse heroen ── Heroen er hvit, så den lyse logoen og de hvite ikonene ville blitt usynlige på toppen. Reglene gjelder bare mens nav er gjennomsiktig; så snart du scroller får nav .scrolled, som er hvit med mørkt blekk fra 10. september, og main.css tar over. Ingen endring i nav-markup eller main.js. */ body.page-hero-aw26 nav#mainNav:not(.scrolled) .nav-logo .logo-on-dark { display:none; } body.page-hero-aw26 nav#mainNav:not(.scrolled) .nav-logo .logo-on-light { display:block; } body.page-hero-aw26 nav#mainNav:not(.scrolled) .nav-icons svg, body.page-hero-aw26 nav#mainNav:not(.scrolled) .nav-icons a svg { stroke: var(--ink); } /* Blekk og ikke #6a625a, som skissen. Logo og ikoner var allerede blekk her, så de grå lenkene var det eneste som skiftet farge når menyen ble hvit. Mot heroen der lenkene står er blekk 16.9:1 i snitt og 15.4:1 i de mørkeste 5 % av flaten; den grå var 5.1 og 4.7 — over kravet på 4.5, men bare med dette bildet. Hover er den grønne understreken, ikke et fargeskifte. */ body.page-hero-aw26 nav#mainNav:not(.scrolled) .nav-links a, body.page-hero-aw26 nav#mainNav:not(.scrolled) .nav-links a:hover { color: var(--ink); } /* Understreken er grønn også over den lyse heroen, som i skissen. */ body.page-hero-aw26 nav#mainNav:not(.scrolled) .nav-links a::after { background: var(--gronn); } /* ── HELE BILDET PAA PC ── For et staaende eller kvadratisk fotografi viser 16:9-utsnittet bare halve hoeyden. hero_836b90b9 (6040x7037) mistet toppen av hodet og alt under knaerne, og merket ville se hele figuren (17. september). Her staar hele bildet i skjermens hoeyde, til hoeyre for teksten. Studiobakgrunnen er 244-251 i kantene, ikke hvit, saa bildet glir over i hvitt de siste 12 % paa hver side i stedet for aa staa som en graa flis. Flaren og haaret er plassert i prosent av det gamle 16:9-bildet og treffer ingenting her; de slaas av. Mobil (under 769 px) er uberoert. */ @media (min-width:769px) { .hero-aw26.pc-hele .stage .layer.base { inset:0 4vw 0 auto; width:min(calc(100vh * var(--hele-forhold)), 60vw); background-image:var(--img-hele); background-size:contain; background-position:50% 100%; background-repeat:no-repeat; -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } /* Kornlaget er filmkorn til det gamle stemningsbildet. Over et skarpt studiofoto paa hvitt leste det som stoey i bildet, ikke som stemning. */ .hero-aw26.pc-hele .p-hair, .hero-aw26.pc-hele .flare, .hero-aw26.pc-hele .grain { display:none; } } /* ── MASKENE ER BUNDET TIL 16:9 ── Maskene måles i % av elementet, ikke av bildet. background-size:cover treffer derfor bare når vinduet har omtrent samme format som bildet (2560x1440). Regnestykket: håret ligger på 70% av bildebredden, og masken treffer innenfor en halv maskeradius så lenge bredde/høyde er mellom ca. 1.34 og 2.63. Utenfor det (mobil og nettbrett i portrett, ekstrem ultrawide) slår vi av de maskerte laga og flaren i stedet for å flytte på maskeverdiene. Basebildet, korn, wash og tekst står igjen. */ @media (max-aspect-ratio:4/3), (min-aspect-ratio:8/3) { .hero-aw26 .p-hair, .hero-aw26 .flare { display:none; } } /* ── MOBIL — bilde oeverst, tekst paa cream under ── Bildet er 16:9 og mobilen er nesten omvendt. Full hoeyde betyr da at over halve bredden faller utenfor: staar hun ikke midt i motivet, blir hun delt av skjermkanten. Sentrerer vi henne i stedet, havner overskriften i ansiktet hennes og merket paa de svarte stoevlettene — moerk tekst paa svart dun. Fotografiet kan ikke loese det selv; det finnes ingen himmel over hodet hennes aa legge tekst i. Derfor faar bildet et baand oeverst og teksten sin egen flate under, slik trykte sider gjoer det. */ @media (max-width:768px) { .hero-aw26 { cursor:default; background:var(--paper); } .hero-aw26 .stage, .hero-aw26 .flare, .hero-aw26 .wash { inset:0 0 44% 0; } /* Kornet henger 60px utenfor i sidene fordi det driver frem og tilbake, men nedover maa det stoppe ved bildet — ellers stoever det paa creamen. */ .hero-aw26 .grain { inset:-60px -60px 44% -60px; } /* 30% og ikke 50%: hun staar til venstre for midten i motivet. Bakgrunner har ingen srcset, saa den mindre fila kobles inn her. */ .hero-aw26 .layer { background-position:30% 0; background-image:var(--img-small, var(--img)); } .hero-aw26 .copy { top:56%; left:24px; right:24px; max-width:none; margin-top:30px; } /* Samme regnestykke som paa desktop: spalta er 100vw - 48, og 8.65 em maa inn i den. 9.4vw gir ca. 7 % klaring paa 320px og oppover. */ .hero-aw26 h1 { font-size:clamp(28px,9.4vw,44px); } .hero-aw26 .sub { font-size: var(--t-fin); max-width:24ch; margin-bottom:1.6em; } .hero-aw26 .eyebrow { font-size: var(--t-micro); letter-spacing:.38em; } .hero-aw26 .eyebrow .pin { margin-right:12px; } /* Merket skjules paa mobil: med hele bildet i full bredde er plagget allerede det eneste i ruta, og merket konkurrerte med CTA-en rett over. */ .hero-aw26 .badge { display:none; } /* Scroll-pinnen er til for aa vise at det finnes noe under folden. Naar teksten allerede staar paa cream, sier flata det selv. */ .hero-aw26 .scroll { display:none; } /* ── FINNES DET ET STAAENDE UTSNITT, TRENGS IKKE BAANDET ── Da fyller bildet foersteskjermen slik det gjoer paa desktop, og teksten staar i himmelen over henne. Baandet over er fallbacken for bilder som ikke har et eget mobilutsnitt — den maa bli staaende, ellers blir en ny opplasting uten portrettfil delt av skjermkanten. */ /* 100vh er skjermen UTEN adresselinja, altsaa hoeyere enn det du ser. Da havner bunnen av bildet under folden og hun ser ut til aa staa for lavt. svh er den synlige hoeyden. */ /* Bakgrunnen er hentet fra bildets egen kantfarge. cover kan la staa igjen en pikselbred stripe ytterst paa skjermer med brøkdels pikselforhold, og da lyste den hvitt mot himmelen. Naa er den umulig aa se. */ .hero-aw26.har-portrett { background:#adb3bf; height:100svh; } .hero-aw26.har-portrett .stage, .hero-aw26.har-portrett .flare, .hero-aw26.har-portrett .wash { inset:0; } .hero-aw26.har-portrett .grain { inset:-60px; } /* Bunnforankret: er skjermen kortere enn utsnittet, er det himmel som forsvinner oeverst — ikke foettene hennes. Himmel taaler aa miste noen piksler, det gjoer ikke et plagg. */ .hero-aw26.har-portrett .layer { background-image:var(--img-portrett); background-position:50% 100%; background-size:cover; } /* Teksten staar nede paa isen, ikke oppe i himmelen. Grunnen er maalt: nede er flata moerk og hvit skrift gir 5,7-17,9:1, oppe er himmelen lys og moerk skrift gir 7-8:1. Med teksten nede slipper hun ogsaa aa dele plass med overskriften naar adresselinja korter ned skjermen. */ .hero-aw26.har-portrett .copy { top:auto; bottom:clamp(104px,15vh,150px); margin-top:0; } .hero-aw26.har-portrett .eyebrow { color:rgba(255,255,255,.85); } .hero-aw26.har-portrett h1 { color:#fff; } .hero-aw26.har-portrett .sub { color:rgba(255,255,255,.92); max-width:28ch; } .hero-aw26.har-portrett .cta { color:#fff; border-bottom-color:rgba(255,255,255,.5); } /* Sloeret fra venstre er til for moerk skrift paa lys himmel. Naar teksten staar nede og er hvit, skal det motsatte til. */ .hero-aw26.har-portrett .wash { background:linear-gradient(to top, rgba(16,22,30,.55), rgba(16,22,30,0) 46%); } .hero-aw26.har-portrett .scroll { color:rgba(255,255,255,.8); } .hero-aw26.har-portrett .scroll .track { background:rgba(255,255,255,.4); } .hero-aw26.har-portrett .scroll .track::after { background:#fff; } /* Scroll-pinnen sto midt i den nye tekstblokka. */ .hero-aw26.har-portrett .scroll { display:none; } /* ── MOERK TEKST PAA MOBIL ── For et stående mobilbilde der bunnen er lys: Balaclava White i hvitt mot hvit studiobakgrunn (17. september). Hvit skrift maalte 1,5:1 i snitt og 1,1:1 i det lyseste der teksten staar. Sloeret snus derfor til hvitt, og all tekst og merket blir blekk. Valget staar i forsidebyggeren (mobil_tekst), fordi det er bildet som avgjoer det, ikke koden. */ .hero-aw26.har-portrett.mobil-mork-tekst { background:#fff; } .hero-aw26.har-portrett.mobil-mork-tekst .wash { background:linear-gradient(to top, rgba(255,255,255,.82), rgba(255,255,255,.55) 32%, rgba(255,255,255,0) 58%); } .hero-aw26.har-portrett.mobil-mork-tekst .eyebrow { color:var(--ink); } .hero-aw26.har-portrett.mobil-mork-tekst h1 { color:var(--ink); } .hero-aw26.har-portrett.mobil-mork-tekst .sub { color:var(--ink); } .hero-aw26.har-portrett.mobil-mork-tekst .cta { color:var(--ink); border-bottom-color:rgba(10,10,10,.4); } /* ── HELE BILDET PAA MOBIL, TEKST I OVERGANGEN ── Utsnittet fyller skjermen og forankres i bunnen. En telefon med adresselinje er ca. 402x750, altsaa lavere enn 1170x2532-utsnittet, og da forsvant toppen av bildet — ansiktet (Morten, 17. september: «hele hun maa vises»). Her staar hele fotografiet i skjermens bredde under menyen, og heroen er akkurat saa hoey som bildet. Teksten har staatt begge steder. Helt under bildet startet overskriften der skjermen sluttet (Morten ville ha den synlig uten aa scrolle). Helt over beina, med heroen strukket til 100lvh, ble det ca. 300 px hvitt mellom bildet og karusellen (Morten, 17. september). Festet 64 px opp i utfadingen gikk underteksten og knappen bak Safaris verktoeylinje (skjermbilde 6: linja starter ca. 95 px over bunnen av en 402x874-skjerm). Paa 110 px over skjermbunnen sto knappen kant i kant med linja (Morten), saa den staar naa 134 px over, altsaa 86 px over heroen som slutter 48 px over skjermkanten. Mellomrommet ned til karusellens overskrift er da ca. 134 px, og lavere gaar det ikke: det er linja pluss litt luft, og alt under den er enten skjult eller tittet fram (skjermbilde 5). Blekk som skrift — plaggene er hvite mot hvit bakgrunn, og hvit skrift maalte 1,5:1 der. */ .hero-aw26.mobil-hele { /* Bildet starter rett under tickeren. Heroen begynner bak baandet, og med 60 px sto det igjen ca. 26 px hvitt mellom det groenne og bildets lysegraa kant (Mortens skjermbilde 8). Menyen staar oppaa studiobakgrunnen oeverst, og hestehalen gaar opp mellom logoen og ikonene. */ --bildetopp:var(--ticker-h, 0px); --bildeh:calc(100vw / var(--mobil-forhold)); height:calc(var(--bildetopp) + var(--bildeh)); background:#fff; /* Minst hele skjermhoeyden. Bildet alene er ca. 600 px paa en iPhone, og toppen av «Utvalgte favoritter» stakk opp nederst (Mortens skjermbilde 4). svh var ikke nok: Safaris verktoeylinje flyter gjennomsiktig oppaa sida, og overskriften syntes gjennom den (skjermbilde 5). lvh er hele skjermen, ogsaa bak linja. Bildet staar fortsatt oeverst; det som blir til overs er hvitt under det. 48 px trekkes fra: det er karusellens hvite toppluft paa mobil (main.css), saa overskriften der starter fortsatt akkurat under skjermkanten, men heroen slutter 48 px tidligere. Flyttes en blokk med mindre toppluft opp rett under heroen, vil den titte fram. */ min-height:calc(100vh - var(--ticker-h, 0px) - 48px); min-height:calc(100lvh - var(--ticker-h, 0px) - 48px); } .hero-aw26.mobil-hele .stage, .hero-aw26.mobil-hele .wash { inset:0; } .hero-aw26.mobil-hele .stage .layer.base { inset:var(--bildetopp) 0 auto 0; height:var(--bildeh); background-image:var(--img-mobil-hele); background-size:100% 100%; background-position:50% 0; /* Studiobakgrunnen er lysegraa (244-251), ikke hvit, og sto som en boks mot sida: hard kant nederst og en svak strek i venstre kant (Mortens skjermbilde 4). Kantene glir derfor over i hvitt — sidene de ytterste 5 %, bunnen de siste 20 % — lenger enn sidene, fordi teksten staar i den nederste biten og ikke skal ha beina i ryggen. */ -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, #000 80%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, #000 80%, transparent); mask-composite:intersect; } .hero-aw26.mobil-hele .grain { display:none; } /* Overskriften staar over stoevlene igjen, og der trengs sloeret. */ .hero-aw26.mobil-hele .wash { background:linear-gradient(to top, rgba(255,255,255,.88), rgba(255,255,255,.62) 30%, rgba(255,255,255,0) 52%); } .hero-aw26.mobil-hele .copy { top:auto; bottom:86px; left:24px; right:24px; margin:0; } /* Luft mellom leddene (Morten, 17. september). Halen paa g i «Designed» gaar .28 em under grunnlinja og hadde ca. 4 px klaring ned til underteksten; .55 em gir ca. 16 px. Underteksten staar i tre linjer paa en telefon og trenger linjeavstand, ikke bare avstand under. */ .hero-aw26.mobil-hele h1 { margin:.4em 0 .55em; } .hero-aw26.mobil-hele .sub { line-height:1.55; margin-bottom:1.9em; } .hero-aw26.mobil-hele .eyebrow, .hero-aw26.mobil-hele h1, .hero-aw26.mobil-hele .sub { color:var(--ink); } .hero-aw26.mobil-hele .cta { color:var(--ink); border-bottom-color:rgba(10,10,10,.4); } }