/* ========================================================================== auth.css — login og oprettelse, logget UD. Kilde: jydsk-redesign/pages/auth-f4.html (Marcs eget design, Claude Design). Den er porteret, ikke genfortolket: geometri, farver og rækkefølge er designets. Det der er ændret, er dokumenteret på stedet. HVAD DESIGNET LØSER. Marcs brief efter F10 og F11: "noget mere hieraki og overlap på z-indeks der laver nogle forskellige mønstre eller leder kunden hen på det der er vigtigt." Grebet er to overlap og ikke fem: lag 0 collagen bag den mørke væg lag 1 væggen (--ink) lag 2 formularsiden (--snow) lag 5 skiven, der ligger PÅ sømmen mellem de to lag 6 kontaktbåndet, der går på tværs af begge Skiven er det eneste element der bryder sømmen, og den peger på formularen. Båndet lukker siden nedadtil. Alt andet holder sig i sin egen halvdel. ALT ER SCOPET UNDER .jsl-auth. Designet bruger meget generiske klassenavne (.left, .right, .band, .note, .n, .l, .k), og fire af dem findes allerede i theme.css: .note, .k, .n, .l (målt). Uden scope ville porten ændre sider den ikke har noget at gøre med. Ét klassenavn i roden koster ingenting og fjerner hele klassen af fejl. BREAKPOINTS — designets tal er snappet til husets egne, ellers skifter login-siden form ved andre bredder end resten af sitet: mock ≤1400 -> 1440 (samme tærskel som F11 brugte) mock ≤1200 -> 1200 (skivens egen geometri, intet husnummer i nærheden) mock ≤1080 -> 1100 (husets tal, 10 forekomster) mock ≤760 -> 700 (husets tal, 20 forekomster) mock ≤560 -> 600 (husets tal, 4 forekomster) Husets målte sæt i assets/css/*.css: 1100 (10x), 1000 (15x), 900 (32x), 700 (20x), 600 (4x). FIRE TING DESIGNET IKKE DÆKKER, og som er tilføjet her: 1. >=1600px. Mocken capper --pad ved 104px og lader split'en være 1,04fr/1fr. Ved 2560 gav det en 472px formular alene i en ~1200px tom kolonne — nøjagtig det Marc klagede over på sin iMac. Se @media (min-width: 1600px). 2. Højden. Mocken regner med 132px header+footer via calc(100vh - 132px). Denne side er standalone og har ingen af delene; de 132px er nu bånd + legal, og enheden er svh så iOS' URL-bjælke ikke får siden til at hoppe. 3. Berøringsmål. .band__cells a er 2px høj padding i mocken. Under 44px på touch. Rettet i @media (pointer: coarse). 4. Overløb. Mocken bruger body{overflow-x:hidden}. Globalt knækker det position:sticky i temaet, så det er scopet til .jsl-auth med clip. FELTERNE. Marc besluttede at beholde WooCommerces og Addifys EGNE registreringsfelter og style dem. Derfor rammer feltreglerne to sæt markup på én gang: vores egen .f/.iw og WC's p.form-row + input.input-text. Et Addify-felt der dukker op i morgen, arver udseendet uden en kodeændring. ========================================================================== */ .jsl-auth { --pad: clamp(20px, 5.4vw, 104px); /* Målt højde på bånd + legal ved >=1100px. Bruges kun til at give .split et rimeligt gulv, aldrig til at positionere noget. */ --auth-foot: 132px; /* Hvor langt skiven rager ind over væggen fra sømmen: .folk står på left:51% og trækkes præcis dette tal tilbage med et negativt venstremargin, så forkanten ligger 0,70 x skivebredden inde i den mørke halvdel. Tallet gør nu to ting med samme værdi: det POSITIONERER skiven, og det er loftet for væggens tekstmål og billedteksten, som skal stoppe FØR den kant, ellers løber de ind under en lys cirkel. Skifter skivebredden, skal tallet med — se @media nedenfor. */ --wall-lead: 224px; /* Skivens diameter. Står som variabel fordi TRE ting skal kende den og ikke må komme ud af takt: .folk's bredde, .disc selv, og ringenes centrum, som regnes fra væggens højre kant og derfor skal lægge en halv skive til. Før stod tallet fire steder pr. breakpoint. */ --disc: 320px; display: flex; flex-direction: column; min-height: 100svh; /* clip, ikke hidden: hidden på en forfader gør position:sticky til en scroll-container og dræber den. clip gør ikke. Skiven stikker ud til venstre af det negative --wall-lead-margin, og det er dét vi klipper. */ overflow-x: clip; background: var(--snow); } .jsl-auth .split { position: relative; display: grid; grid-template-columns: 1.04fr 1fr; flex: 1; min-height: min(860px, calc(100svh - var(--auth-foot))); isolation: isolate; } /* ── VÆGGEN ──────────────────────────────────────────────────────────────── */ /* Marc 27/8: "skriften / boksen med info til venstre bliver sat ned i bunden. Skal der tilføjes noget øverst eller har du andre gode forslag?" Nej — der skal ikke tilføjes indhold. Fejlen er ikke for lidt tekst, det er justify-content: space-between. Væggen er ét spor i et grid, og sporet bliver lige så højt som ansøgningsformularen ved siden af. Målt på preview ved 2560: sporet 1732 px højt, logoet i y=40, tekstblokken i y=1286 — altså 1246 px tom mørk væg over folden, og hele budskabet under den. På login-fanen, hvor formularen er kort, så det rigtigt ud. Det er derfor det ikke blev fanget. Rettelsen har to led: 1. Blokken centreres i stedet for at blive skubbet til bunden (auto-margener i stedet for space-between). Ved 1732 px lander den i y≈664, altså over folden på både 1134 og 900 px høje skærme. 2. Den bliver siddende, mens kunden udfylder formularen (sticky). Væggen er argumentet for at ansøge, og en lang formular er præcis der argumentet skal blive stående. Det koster ingen markup og ingen ekstra tekst. .jsl-auth har overflow-x: clip og overflow-y: visible, hvilket ikke danner en rullecontainer — sticky hænger derfor stadig på vinduet. */ .jsl-auth .left { position: relative; z-index: 1; background: var(--ink); color: var(--snow); padding: 40px var(--pad); display: flex; flex-direction: column; justify-content: flex-start; gap: 48px; } .jsl-auth .leftbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .jsl-auth .glow { position: absolute; right: -18%; top: 50%; transform: translateY(-50%); width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(31, 93, 196, .55) 0%, rgba(31, 93, 196, .12) 52%, transparent 72%); filter: blur(34px); } /* Collagen er de rigtige produktbilleder fra stof-nyheder (transient i form-login.php), ikke mockens picsum.photos. 4x6 = 24 felter. */ .jsl-auth .tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); opacity: .15; filter: blur(2px); } .jsl-auth .tiles span { background-size: cover; background-position: center; } .jsl-auth .leftbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(13, 16, 25, .9) 0%, rgba(13, 16, 25, .76) 44%, rgba(13, 16, 25, .93) 100%); } .jsl-auth .brandlink, .jsl-auth .lbody { position: relative; z-index: 1; } .jsl-auth .brandlink img { height: 44px; width: auto; display: block; } /* Målet på væggen. IKKE ch: `ch` regnes mod elementets EGEN skriftstørrelse, ikke mod overskriftens. Målt ved 2560: .lbody arver 15,5px, så designets 19ch blev 188px, og h1'en brød til fem linjer ("To / mand, / ét / lager, / 600+ / print.") midt i en 1305px kolonne. Målet hører til kolonnen, ikke til brødteksten, så det står i px og stopper der hvor skiven begynder: 51vw til sømmen, minus skivens forkant, minus væggens padding, minus 40px luft så tekst og cirkel ikke rører hinanden. 620px er loftet — derover holder en overskrift op med at være en overskrift. */ .jsl-auth .lbody { max-width: min(620px, calc(51vw - var(--wall-lead) - var(--pad) - 40px)); } /* Se noten ved .left. Første forsøg centrerede blokken i sporet med auto-margener over OG under. Målt på preview 27/8: sporet er 1805px højt på ansøgningsfanen, så midten ligger i y=902 — og blokken landede i y=746 på en 1134px skærm, altså stadig i den nederste tredjedel. At centrere i et spor der er halvanden skærm højt er ikke det samme som at centrere i det kunden ser. Derfor kun auto NEDENUNDER: blokken hænger under logoet i y≈132, er fuldt synlig ved første blik uanset hvor lang formularen er, og sticky holder den ved siden af formularen mens kunden ruller. Skiven sidder i y≈712 på sømmen og fylder den nedre del af væggen, så der bliver ikke et tomt hul under teksten. */ .jsl-auth .lbody { margin-block: 0 auto; position: sticky; top: clamp(24px, 9vh, 104px); } /* Overskriftens eget mål, i em og ikke i px, fordi `em` på h1'en regnes mod h1'ens EGEN skriftstørrelse og derfor følger clamp'en hele vejen ned. Målt: "To mand, ét lager, 600+ print." fylder 11,65em på én linje ved ALLE elleve bredder (676px ved 58px, 419px ved 36px — forholdet er konstant). Uden loftet stod den derfor som ÉN lang linje ved 1100, 1024, 834 og i landskab, hvor .lbody's 620px er bredere end de 500px teksten fylder, og en overskrift på én linje er en underrubrik, ikke den plakat Marc bad om. 9em ligger mellem de to tal der betyder noget: over 7,26em, så "To mand, ét lager," bliver på første linje, og under 11,65em, så der overhovedet brydes. Ved 1280 og på telefon er kolonnen smallere end 9em, og så vinder den. */ .jsl-auth .lbody h1 { font-weight: 400; font-size: clamp(36px, 3.9vw, 58px); letter-spacing: -.032em; line-height: 1.03; margin: 24px 0 0; max-width: 9em; } .jsl-auth .lbody h1 em { font-style: italic; color: var(--cobalt-soft); } .jsl-auth .lbody .said { margin-top: 26px; max-width: 33ch; font-size: 15px; line-height: 1.62; color: rgba(248, 248, 244, .82); } /* fit-content, ikke auto: de to vandrette streger er specrækkens EGNE kanter, og med et bredere mål (620px ved 2560) løb de 190px videre end det sidste tal og lignede en uafsluttet tabel. Målt ved 2560: indhold 350px, streg 620px. max-width holder den inde når indholdet er bredere end kolonnen. */ .jsl-auth .specrow { display: flex; margin-top: 40px; width: fit-content; max-width: 100%; border-top: 1px solid rgba(248, 248, 244, .2); border-bottom: 1px solid rgba(248, 248, 244, .2); } .jsl-auth .specrow > div { padding: 18px 28px 18px 0; margin-right: 28px; border-right: 1px solid rgba(248, 248, 244, .16); } .jsl-auth .specrow > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .jsl-auth .specrow .n { font-size: 22px; font-weight: 500; letter-spacing: -.022em; line-height: 1; } .jsl-auth .specrow .n span { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; } .jsl-auth .specrow .l { font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(248, 248, 244, .55); margin-top: 7px; } .jsl-auth .certline { display: flex; align-items: center; gap: 15px; margin-top: 24px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(248, 248, 244, .62); flex-wrap: wrap; } .jsl-auth .certline i { width: 5px; height: 5px; border-radius: 50%; background: var(--cobalt-soft); } /* ── SKIVEN PÅ SØMMEN ────────────────────────────────────────────────────── */ /* Marc 27/8, runde 1: "måske ringen skal skjules bag formularen". Runde 2, da han så resultatet: "ringene er nu selve baggrunden på højre side, de skulle kun være bag ved selve formularen eller felterne. Det skaber dynamik og spil." Runde 1 lagde ringene under .right — og .right bar en uigennemsigtig var(--snow), så hele den lyse halvdel virkede som ét stort låg. Ringene stoppede i sømmen og krydsningen, altså hele grebet, forsvandt. Rettelsen er ikke et nyt z-index. Lagdelingen ring < .right er præcis den Marc bad om, for .right laver sit eget stacking context, så ALT indhold i formularsiden — felter, knap, perks, tekst — ligger over ringene uanset hvad. Det der var galt, var pladen: .right's egen baggrund. Den er nu væk (se FORMULARSIDEN nedenfor). Ringene løber derfor synligt ud over det lyse felt og dukker først væk dér hvor de rammer noget uigennemsigtigt, altså felterne. Målt: kun yderringen når ind over formularen, 14px ved 2560 og 38px ved 1600 — en kort, næsten lodret bue langs felternes venstre kant. RUNDE 3, Marc 27/8: "meget bedre med ringene, men det skal gerne gå bag ved al tekst også samt checkboxes, så allerbedst: på siden, men lige foran baggrunden." Det holdt for den lyse halvdel, men IKKE for væggen. Ringene lå i .folk, altså som søskende til .left, og med samme z-index vinder den sidste i dokumentet — ringene lå derfor oven på væggens overskrift, tal og logo. Løsningen er ikke et tal, det er en flytning: ringene er nu børn af .left og ligger i z-index 0, efter .leftbg og før indholdet. Inde i væggens egen stacking context males der da i denne rækkefølge: den mørke bund, collagen, RINGENE, og øverst overskrift og logo. Præcis "lige foran baggrunden". Den del af ringene der stikker ud over sømmen følger med hele .left-laget (z1) og ligger derfor stadig under .right (z2) og alt i den. Grunden til at det SKAL være en flytning: et barn kan aldrig komme uden om sin forælders stacking context, så en ring i .folk kunne umuligt havne under væggens tekst, uanset hvilket z-index den fik. Samme lektie kostede runde 2: .folk havde dengang transform: translate(), og en transform laver ALTID et stacking context, uanset z-index. Ringene lå derfor låst inde på .folk's eget niveau (5) og kunne umuligt komme under .right. Transformen er væk, og lagene i .split's isolerede context er nu: væg 1 (med ringene indeni), .right 2, skive/billedtekst 3, segl 4, bånd 6. Erstatningen er ikke en ny udregning. translateX(-70%) af 320px ER 224px, og 224px er præcis --wall-lead — samme tal, som allerede vedligeholdes gennem alle breakpoints (199/284 = .70, 187/252 = .74). Et negativt venstremargin giver derfor pixel for pixel den samme forkant og fjerner samtidig den håndholdte dublet af det forhold. Lodret: top/bottom 0 + auto-margener centrerer nøjagtig som translateY(-50%) gjorde. */ .jsl-auth .folk { position: absolute; /* 1.04fr / (1.04fr + 1fr) = 50,980392 %, altså PRÆCIS sømmen mellem de to grid-spor. Stod før som et afrundet 51 %, hvilket var 0,3px ved siden af. Det betød intet dengang, men ringene regnes nu fra væggens egen højre kant, og de to skal være koncentriske, så referencen skal være den samme for begge. */ left: 50.980392%; top: 0; bottom: 0; /* height er skiven og INTET andet — se noten ved .folkcap. */ width: var(--disc); height: var(--disc); margin: auto 0 auto calc(var(--wall-lead) * -1); } /* Ringene er tegning, ikke betjening, og de skal IKKE kunne klikkes på. En ring er kun en streg at se på, men elementet er en 468px firkant med runde hjørner, og hele skiven inde i den rammer i hit-testen. Målt 27/8 ved 2560: .ring--2 rager 13px ind over .fwrap's venstre kant, og fordi .folk står i z-index 5 og .right kun i 2, lå ringen ØVERST. document.elementFromPoint på e-mailfeltets egen venstre kant (x = felt+3px, y = midt i feltet) returnerede SPAN.ring--2 — altså gik klikket til ringen i stedet for til inputtet, i en 13px bred stribe hele vejen ned langs felternes venstre side. Marc så overlappet 27/8 og spurgte om det var et problem. Visuelt nej, overlappet er selve grebet. I hit-testen ja. pointer-events: none løser præcis det ene og rører ikke ved udseendet. Ikke sat på .folk, for billedteksten under skiven skal stadig kunne markeres. Ringene ligger nu under både væggens indhold og .right, så klikket ville falde rigtigt ud af sig selv begge steder. Reglen bliver alligevel stående: en 468px firkant med runde hjørner er stadig en usynlig fælde hvis nogen senere hæver den, og det koster ingenting at lade den blive. */ .jsl-auth .ring { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(248, 248, 244, .26); /* Centrum = skivens centrum, regnet fra VÆGGENS højre kant: 100% er sømmen, --wall-lead trækker tilbage til skivens forkant, og en halv skive frem igen rammer midten. Lodret centrerer .left sig selv, for væggen er lige så høj som .split og skiven står midt i den. */ left: calc(100% - var(--wall-lead) + var(--disc) / 2); top: 50%; transform: translate(-50%, -50%); width: 396px; height: 396px; } .jsl-auth .ring--2 { width: 468px; height: 468px; border-color: rgba(74, 130, 219, .28); } .jsl-auth .disc { position: relative; z-index: 3; width: var(--disc); height: var(--disc); border-radius: 50%; overflow: hidden; background: var(--snow); box-shadow: 0 46px 80px -28px rgba(0, 0, 0, .62); } /* Figuren er en udskåret illustration med alfa, ikke et beskåret foto (Marc 26/8): Marc med en stofrulle under armen. Målt i skiven ved 320 px: contain gav en 211 px bred figur med et 40 px hoved midt i en tom cirkel. cover + top-forankring fylder skiven, holder hovedet helt og lader rullen løbe ud gennem den nederste kant. Falder vi tilbage til portrætfotoet, sætter PHP klassen .disc__img--crop, som flytter fokus ned på ansigtet. */ .jsl-auth .disc__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; } .jsl-auth .disc__img--crop { object-fit: cover; object-position: 50% 22%; } /* SEGLET. Marc 27/8: "cirklen med 32 år er lidt mærkelig. Måske der mangler en rund hvid streg måske takket, hele vejen rundt i cirklen, og så skal teksten stå tættere sammen eller udfylde mere, for meget padding mellem dem." Tre greb, i den rækkefølge: 1. En hvid streg hele vejen rundt. Den ydre er heltrukken og 2 px, så seglet får en kant mod både den mørke væg og det lyse felt — i dag flød koboltten sammen med skiven, og det var derfor den så ufærdig ud. 2. Den takkede. En stiplet ring inde i den heltrukne. Stiplinger på en cirkel tegnes som buer, og det er præcis perforeringen på et frimærke eller et kvalitetsstempel. conic-gradient ville give samme billede med tre gange så meget kode og ingen kontrol over tandbredden ved forskellige diametre. 3. Tættere tekst. Seglet vokser fra 80 til 88 px, så den nye ring får sin plads uden at æde af tallet. RUNDE 2, Marc 27/8: "32 år står stadig for langt fra hinanden." Han havde ret, og runde 1 ramte ved siden af, fordi jeg skruede på skriftstørrelserne i stedet for at finde årsagen. Den er denne: display:grid med to auto-rækker arver align-content: normal, og normal opfører sig som STRETCH i grid. De to rækker voksede derfor hver til 40px for at fylde de 88px, og place-items: center centrerede så 32 og ÅR hver for sig midt i hver sin strakte række. Målt på preview: 32 sluttede i y=334, ÅR begyndte i y=360 — 26px tom luft som ingen font-size i verden kunne lukke. align-content: center får rækkerne til at klemme sig om deres eget indhold og centrerer PARRET som én blok. Nu er afstanden 1px, sat af gap og ikke af layoutet. Samtidig gøres typen til en brøkdel af seglets egen diameter (--seal), så telefonens 66px-segl får samme forhold uden en anden regel. RUNDE 3, Marc 27/8: "vi skal måske have skiftet teksten 32 år til fx hej eller andet i den stil." Seglet sidder på skulderen af en figur der vinker, og et tal dér er et argument, ikke en hilsen — argumentet står i forvejen på væggen som ENGROS · IKAST SIDEN 1994, hvor 32 år er den samme oplysning. Seglet er nu ét ord. Det løser samtidig et oversættelsesproblem der ville være kommet: en anden linje under hilsenen skulle bære VELKOMMEN / WELCOME / TERVETULOA, og de 10 tegn i den finske er bredere end de ~71px der er inde i den stiplede ring. Hej / Hi / Hei er højst tre tegn på alle tre sprog og kan ikke løbe over. Med kun én linje er align-content-fælden fra runde 2 heller ikke længere i spil — der er ingen anden række at skubbe fra. RUNDE 4, Marc 27/8: "Dav er for jydsk, så måske hej fra ikast er bedre." Altså to linjer igen, men med et poststempel som forbillede i stedet for et nøgletal. Det kræver mere plads, og hvor meget er målt, ikke gættet. REGNESTYKKET, så ingen skal gætte igen. Den brugbare indvendige diameter er ikke seglets diameter: 2px kant + 2 x 5px inset + 1,5px stiplet ring x 2 spises af rammen, altså diameter minus 17. Ved 88px er det 71px (r = 35,5). To linjer med samlet højde H tvinger BEGGE linjer ud til |d| = H/2 fra midten, og dér er den brugbare korde 2 x sqrt(r^2 - (H/2)^2) — ikke diameteren. Målt i browseren ved 88px: "Hej" i .42 er 51,4px mod en korde på 51,8px, altså på kanten allerede med ÉN linje, og "FRA IKAST" i .12 er 59,5px mod en korde på 53,8px. Parret kan ikke være der. Derfor 96px og et lavere typeforhold. MÅL DEN LÆNGSTE OVERSÆTTELSE, ikke den danske: dansk FRA IKAST og finsk IKASTISTA er begge 9 tegn, men engelsk FROM IKAST er 10, og det er den der bestemmer. Første forsøg (.105 + .08em, 74px på telefon) holdt på dansk og finsk med 3,9px til overs og løb 3,9px OVER på engelsk — nøjagtig samme tal, med modsat fortegn. Rettet til .095 + .05em og 78px på telefon, hvor engelsk måler 45,6px mod en korde på 50,6. Rører du de fire tal (.33, .095, .05em, --seal), så mål EN, DA og FI. */ .jsl-auth .seal { --seal: 96px; position: absolute; z-index: 4; top: -8px; right: -18px; width: var(--seal); height: var(--seal); border-radius: 50%; background: var(--cobalt); color: #fff; /* align-content: center er ikke det samme som place-items: center når der er TO rækker: uden den fordeler grid'et rækkerne over hele højden og laver et hul mellem linjerne, som Marc så i runde 2. gap sætter afstanden, ikke layoutet. */ display: grid; place-items: center; align-content: center; gap: 1px; text-align: center; border: 2px solid var(--snow); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .5); } .jsl-auth .seal::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .72); } .jsl-auth .seal b { display: block; font-size: calc(var(--seal) * .33); font-weight: 500; letter-spacing: -.02em; line-height: 1; } /* Versalerne står i CSS og ikke i strengen. Oversætteren skal have "fra Ikast" at arbejde med, ikke et råb — finsk og engelsk bøjer selv, og et versalt msgid gør det kun sværere at se hvad der står. */ .jsl-auth .seal span { display: block; font-size: calc(var(--seal) * .095); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; line-height: 1; color: rgba(255, 255, 255, .82); } /* Billedteksten må IKKE være lige så bred som skiven. Skiven ligger med vilje hen over sømmen, men teksten er snefarvet, og de sidste ~90px af den landede på den lyse halvdel og forsvandt (målt ved 2560: kassen slutter i 1402, sømmen er i 1305; samme ~86px ved 1440). --wall-lead er præcis den del af skiven der ligger på væggen, så teksten centreres under DEN og bliver på mørk bund hele vejen. Ved <=1100px står skiven på det lyse felt og har sin egen regel nedenfor. */ /* Billedteksten hænger UNDER skiven og tæller ikke med i .folk's højde. Det er ikke pynt, det er selve grunden til at ringene kan sidde koncentrisk: .folk centrerer sig lodret i .split med auto-margener, så hvis billedteksten tæller med, bliver GRUPPENS midte centreret og skiven selv står 31px for højt (målt ved 2560). Ringene regner fra .left's midte, altså .split's midte, og så var de 31px under skiven. Ét objekt, én reference: .folk er skiven og kun skiven, og billedteksten sættes ud af strømmen med top: 100 % + de 22px den altid har haft. Ved <=1100px står skiven i normal strøm, og teksten skal med tilbage — se nulstillingen i det breakpoint. */ .jsl-auth .folkcap { position: absolute; z-index: 3; top: calc(100% + 22px); left: 0; text-align: center; width: var(--wall-lead); } .jsl-auth .folkcap b { display: block; font-weight: 500; font-size: 13.5px; letter-spacing: -.01em; color: var(--snow); } .jsl-auth .folkcap span { display: block; font-size: 11.5px; color: rgba(248, 248, 244, .62); margin-top: 2px; } /* ── FORMULARSIDEN ───────────────────────────────────────────────────────── */ /* INGEN baggrund her, med vilje. .jsl-auth maler allerede hele siden i var(--snow), så farven er nøjagtig den samme — men uden en plade i vejen kan ringene ses krydse ind over det lyse felt, som Marc bad om 27/8. z-index 2 bliver stående: det gør .right til sit eget stacking context, så hvert eneste element i formularen ligger over ringene og skjuler dem lokalt. Felterne og knappen er uigennemsigtige (--paper og --cobalt), og det er dér ringen forsvinder. Sætter du en baggrund tilbage på .right, er vi tilbage i runde 1. */ .jsl-auth .right { position: relative; z-index: 2; padding: 40px var(--pad); display: flex; flex-direction: column; } .jsl-auth .rtop { display: flex; justify-content: flex-end; gap: 24px; align-items: center; font-size: 12.5px; color: var(--ink-mute); } .jsl-auth .rtop a:hover { color: var(--cobalt); } /* Sprogskifteren er temaets egen (jydsk_v2_language_switcher), ikke mockens hårdkodede DA/EN/FI. Den kommer med sin egen markup, så her sættes kun typografien. */ .jsl-auth .rtop .lang, .jsl-auth .rtop .langswitch { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; } .jsl-auth .rtop .lang a[aria-current], .jsl-auth .rtop .langswitch a[aria-current] { color: var(--ink); } .jsl-auth .fwrap { margin: auto; width: 100%; max-width: 472px; padding: 40px 0; } /* Fanerne. Uden JS er de skjult og begge paneler vises — se .no-js nederst. */ .jsl-auth .seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--snow-deep); border-radius: var(--r-pill); padding: 3px; margin-bottom: 32px; } .jsl-auth .seg button { height: 44px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; color: var(--ink-mute); transition: all var(--d-fast) var(--ease); } .jsl-auth .seg button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 7px -2px rgba(13, 16, 25, .22); } .jsl-auth .seg button:hover { color: var(--ink); } .jsl-auth .seg button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; } .jsl-auth .pane { display: none; } .jsl-auth .pane[data-on="true"] { display: block; animation: jslAuthUp var(--d-med) var(--ease); } @keyframes jslAuthUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .jsl-auth .pane[data-on="true"] { animation: none; } } /* .fwrap > h2 er glemt-adgangskode og nulstilling: dér er der ingen faner, og tpl-auth.php sætter overskriften direkte. Samme typografi som en pane. */ .jsl-auth .pane h2, .jsl-auth .fwrap > h2 { font-weight: 400; font-size: clamp(30px, 2.9vw, 40px); letter-spacing: -.03em; line-height: 1.04; margin: 0; } .jsl-auth .pane h2 em, .jsl-auth .fwrap > h2 em { font-style: italic; color: var(--cobalt); } .jsl-auth .pane .lede, .jsl-auth .fwrap > .lede { color: var(--ink-mute); font-size: 14px; margin: 12px 0 0; line-height: 1.55; max-width: 40ch; } /* ── FELTER — vores egne OG WooCommerces/Addifys ─────────────────────────── */ /* Venstre side af hver kommasepareret liste er mockens markup, højre side er det WC og Addify selv skriver ud gennem woocommerce_register_form. Begge sæt skal se ens ud, ellers stritter et Addify-felt ud midt i formularen. */ .jsl-auth .f, .jsl-auth .fwrap p.form-row, .jsl-auth .fwrap .woocommerce-form-row { margin-top: 20px; } .jsl-auth .f label, .jsl-auth .fwrap p.form-row > label, .jsl-auth .fwrap .woocommerce-form-row > label { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; } .jsl-auth .f label .h { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--cobalt); } .jsl-auth .f label .m { font-family: var(--font-mono); font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--ink-faint); } .jsl-auth .fwrap .required { color: var(--cobalt); text-decoration: none; border: 0; } /* space-between ovenfor er sat for .h og .m, de to hjælpetekster der SKAL stå yderst til højre i etiketten. Stjernen skal ikke. Målt 27/8: stjernen på FIRMA-E-MAIL blev slynget 461px ud til højre kant, mens Addifys egne etiketter (ikke flexbokse) skrev "BY*" samlet. margin-right: auto lægger den frie plads til HØJRE for stjernen i stedet for til venstre, så stjernen følger teksten og .h/.m stadig lander yderst. */ .jsl-auth .f label > .required, .jsl-auth .fwrap p.form-row > label > .required, .jsl-auth .fwrap .woocommerce-form-row > label > .required { margin: 0 auto 0 2px; } .jsl-auth .iw { position: relative; } .jsl-auth .f input, .jsl-auth .f select, .jsl-auth .fwrap input.input-text, .jsl-auth .fwrap input[type="text"], .jsl-auth .fwrap input[type="email"], .jsl-auth .fwrap input[type="tel"], .jsl-auth .fwrap input[type="password"], .jsl-auth .fwrap select, .jsl-auth .fwrap textarea { width: 100%; height: 54px; padding: 0 16px; font-family: var(--font-sans); font-size: 15px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-1); color: var(--ink); transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); } .jsl-auth .fwrap textarea { height: auto; min-height: 108px; padding: 14px 16px; line-height: 1.5; } .jsl-auth .f input:focus, .jsl-auth .f select:focus, .jsl-auth .fwrap input:focus, .jsl-auth .fwrap select:focus, .jsl-auth .fwrap textarea:focus { outline: 0; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-tint); } .jsl-auth .fwrap input::placeholder { color: var(--ink-faint); } .jsl-auth .fwrap input[aria-invalid="true"], .jsl-auth .fwrap .woocommerce-invalid input.input-text { border-color: var(--error); } /* Vis/skjul-knappen ligger inde i .iw og må ikke dække teksten i feltet. */ .jsl-auth .rev { position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 14px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); } .jsl-auth .rev:hover { color: var(--cobalt); } .jsl-auth .rev:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; } /* WooCommerce leverer sin egen øjenknap på nogle felter. Én knap er nok. */ .jsl-auth .fwrap .show-password-input { display: none; } .jsl-auth .err { display: none; color: var(--error); font-size: 12px; margin-top: 7px; } .jsl-auth .f[data-e="true"] .err { display: block; } .jsl-auth .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .jsl-auth .two > .f { margin-top: 20px; } .jsl-auth .rb { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 12px; flex-wrap: wrap; } .jsl-auth .chk { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); cursor: pointer; } /* "Hold mig logget ind" stod i to linjer med en rå browser-checkbox over teksten. Målt 27/8: WooCommerces egen regel .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme vejer (0,3,0) og sætter inline-block, mens .jsl-auth .chk kun vejer (0,2,0). Inline-block blev derefter blokificeret til block, fordi .rb er en flexbox, og så faldt .bx og teksten fra hinanden. label.chk vejer (0,3,1) og vinder. Klassenavnet er WooCommerces og må ikke fjernes fra markuppen. */ .jsl-auth .fwrap label.chk { display: inline-flex; } .jsl-auth .chk input { position: absolute; opacity: 0; } .jsl-auth .chk .bx { width: 18px; height: 18px; border: 1.5px solid var(--ink-mute); border-radius: var(--r-1); display: grid; place-items: center; flex-shrink: 0; } .jsl-auth .chk input:checked + .bx { background: var(--cobalt); border-color: var(--cobalt); } .jsl-auth .chk .bx svg { width: 11px; height: 11px; stroke: #fff; opacity: 0; } .jsl-auth .chk input:checked + .bx svg { opacity: 1; } .jsl-auth .chk input:focus-visible + .bx { box-shadow: 0 0 0 3px var(--cobalt-tint); } .jsl-auth .mini { font-size: 13px; color: var(--cobalt); } .jsl-auth .pane .btn { margin-top: 26px; } /* WOOCOMMERCE-KERNENS EGNE KNAPPER — glemt adgangskode og nulstilling. De to templates er WC's, og vi har med vilje ikke overskrevet dem (se tpl-auth.php's afvigelse 2): de arver rammen gennem the_content() og skal bare klædes på. Deklarationerne herunder er .btn + .btn--brand + .btn--big + .btn--block fra tokens-v4.css. De er kopieret og ikke arvet, fordi klasserne står i WooCommerces markup og ikke i vores — ændres knappen i tokens, skal denne blok med. Det gælder præcis to knapper. */ .jsl-auth .fwrap button.button, .jsl-auth .fwrap button.woocommerce-Button, .jsl-auth .fwrap input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 60px; padding: 0 32px; margin-top: 26px; font-family: var(--font-sans); font-size: 15.5px; font-weight: 500; letter-spacing: -.005em; line-height: 1; white-space: nowrap; background: var(--cobalt); color: var(--snow); border: 1.5px solid var(--cobalt); border-radius: var(--r-1); transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); } .jsl-auth .fwrap button.button:hover, .jsl-auth .fwrap button.woocommerce-Button:hover, .jsl-auth .fwrap input[type="submit"]:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); } /* WOOCOMMERCE-LAYOUT — den ene regel der vælter glemt/nulstil-formularen. Målt på serveren 27/8 (WooCommerce 10.9.1). Hverken 'woocommerce', 'woocommerce-layout' eller 'woocommerce-smallscreen' dequeues nogen steder (grep efter woocommerce_enqueue_styles og handle-navnene i hele vaulten: nul træf), og [woocommerce_my_account] pakker sit output i
(class-wc-shortcodes.php:659). WC's egne formularregler rammer derfor alt inde i .fwrap. Den farlige er form-row-first. WC's form-lost-password.php sætter den på sit ENESTE felt, og form-reset-password.php sætter first+last på de to kodeordsfelter: .woocommerce form .form-row-first { width: 47%; float: left } Uden denne blok står e-mailfeltet i 47 % bredde med knappen klemt op ad siden af det. WooCommerce retter det selv — men kun under 768 px, i woocommerce-smallscreen.css: .woocommerce .lost_reset_password .form-row-first { width:100%; float:none } Blokken herunder er den samme rettelse uden bredde-gaten. De to kodeordsfelter stables med vilje i stedet for at stå som WC's to 47 %-søjler: feltrytmen i .fwrap er stablet hele vejen, og 'Gentag ny adgangskode' er for lang til en halv formularbredde. Specificiteten er valgt så den ikke kan tabe. WC's regler er 0,2,1 og 0,3,1; disse er 0,3,1 og 0,4,1 med tema-arket sidst i . En ren tie ville blive afgjort af rækkefølgen, og den ejer vi ikke: et combine-plugin kan bytte om. Note: .screen-reader-text i WC's markup skjules af WC's eget ark (én regel med !important). Temaet har ingen fallback — dequeues woocommerce.css nogensinde, står der et synligt "Påkrævet" efter hver stjerne. */ .jsl-auth .fwrap form .form-row-first, .jsl-auth .fwrap form .form-row-last { float: none; width: 100%; margin-right: 0; margin-left: 0; } /* WC lægger padding:3px + margin:0 0 6px på hver .form-row. Vores egen margin-top vinder kun på rækkefølge; her sættes den fast. */ .jsl-auth .fwrap form .form-row { padding: 0; margin: 20px 0 0; } /* WC skjuler stjernen (visibility:hidden, 0,3,1) og viser i stedet "optional" på de frivillige. Her er alt påkrævet, så stjernen skal frem igen. */ .jsl-auth .fwrap form .form-row .required { visibility: visible; color: var(--cobalt); font-weight: 500; } /* Labelrækken er display:flex med space-between, fordi vores egne felter har en hjælpetekst i højre side. WC's og Addifys labels har ingen hjælpetekst — kun stjernen — så space-between skubbede den hele vejen ud til feltets højre kant, hvor den stod som et løsrevet mærke over ingenting. Målt 1512 px: label på x=893, stjerne på x=1252. Den skal stå lige efter teksten. */ .jsl-auth .fwrap form .form-row > label { justify-content: flex-start; } /* Landefeltet på ansøgningsfanen. WC's egen select-regel er 0,2,2 (.woocommerce form .form-row select) og slår derfor vores 0,2,1 (.jsl-auth .fwrap select) uanset rækkefølge. Målt på kontrolfladen 27/8: dropdownen stod 35 px høj mellem 54 px felter, med WC's 4 px radius, 1 px ramme og pluginets egen indlejrede chevron-SVG. Denne er 0,3,2. appearance sættes tilbage til auto, så feltet får systemets egen pil — samme greb som temaets CF7-felter (theme.css:697). */ .jsl-auth .fwrap form .form-row select { height: 54px; padding: 0 16px; line-height: normal; background-color: var(--paper); background-image: none; border: 1.5px solid var(--line); border-radius: var(--r-1); color: var(--ink); appearance: auto; -webkit-appearance: auto; } /* ========================================================================== ADDIFYS EGNE FELTER — vi tager ejerskabet (Marc 27/8). Marc: "der står teksten firma email uden for boksen" og "stylingen af de to formularer har heller ikke samme look og baggrundsfarve". ÅRSAG, målt på preview ved 2560 px, ikke gættet. Pluginets eget ark siger (afreg_front.css:47): .afreg_full_field { width: 100% !important; float: left } Alle syv adresserækker er altså floats, og deres wrapper .afreg_extra_fields indeslutter dem ikke. Målt: wrapperen er 478 x 0 px, mens rækkerne står 71 px høje UDEN for den. Vores eget e-mailfelt begynder derfor oven i float-stakken, og de to dele af det opfører sig forskelligt: -