/* DOKKEN OG FORKLARINGEN ER SKJULT (29/9, proeve), som paa Benchmark, saa fanerne staar samme sted paa de tre sider. Elementerne bliver staaende: gen-customer saetter sin egen blok ind efter dokken paa de offentlige sider. */ #deck,#legend{display:none} /* Ingen overskriftsmaerke over titlen (30/9, Jesper): menuen ved siden af Sort siger hvilken side det er, og saa staar kontrollerne samme sted paa de tre sider. */ .hero .eyebrow{display:none} /* SPALTEN ER DEN SAMME HELE VEJEN NED, 21/9. Tabellen er ikke prosa og skal ikke have prosaens bredde: paa 720px ombroed 113 af de 138 etiketter paa Benchmark. Men da kortet alene blev bredt, stak det firs pixels ud til hver side af logoet, overskriften, fanerne og vaelgerne, og siden laeste som to lag der ikke hoerte sammen. `--col` er den ene knap: `canvas.css` giver header, main, footer OG kortet den samme bredde ud af den. Saettes den her, flytter hele siden sig samlet, og de tre rapportsider deler stadig kant, saa fanerne ikke hopper naar man skifter. Maalt paa Loop mod Hears, 142 raekker, hvor kun spalten aendres: ved 720 ombryder nitten etiketter, ved 800 er der to tilbage (og de to ER saetninger, ikke etiketter), og over 800 koeber hver ekstra pixel ingenting. Fra 800 til 880 falder ombrydningen med een raekke, mens afstanden fra etiket til foerste tal vokser niogtredive pixels, og sidehoejden rykker sig 0,2 procent. Tomrummet mellem etiket og tal er selve den fejl den gamle femkolonne-tabel havde, saa spalten stopper ved knaekket. */ /* Broedteksten foelger ikke med ud. En dok paa 21px over 832px er femogfirs tegn pr. linje; oejet taber linjen paa vej tilbage. Venstrekanten er den samme, og det er den der binder siden sammen. */ .deck{max-width:62ch} /* KORTENE STAAR VED SIDEN AF HINANDEN NAAR DER ER FLERE BRANDS. `auto-fit` og en mindstebredde goer arbejdet: er der plads til to kolonner paa 380px, bliver det to; er der ikke, falder de tilbage under hinanden af sig selv. Saa virker den samme regel paa en telefon og paa en skaerm med otte brands, uden et brudpunkt der skal vedligeholdes. `align-items:start` saa et kort med faa raekker ikke straekkes ned til hoejden af nabokortet. */ /* Samme luft ned til kortet som `.card` giver paa de to andre sider. */ /* INGEN EGEN MARGEN OVER TABELLEN (29/9). Kortet inde i den har allerede 22px fra canvas.css, og de to lagt sammen gav 44px under forklaringen mod 22px paa Benchmark. */ .chgrid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start} #out.wide .chgrid{grid-template-columns:1fr} .brandkort{min-width:0} /* En aendring er een linje indtil man beder om mere. Tallene og forklaringen laa aabent under hver raekke, og med 21 raekker blev ugens billede til fire skaerme tekst; man kunne ikke se HVAD der havde flyttet sig uden at laese hvorfor. Nu: maalet og aendringen staar, resten kommer paa klik. */ .chrow{width:100%;text-align:left;font:inherit;color:inherit;background:transparent; border:0;border-bottom:1px solid var(--hair);padding:13px 18px;cursor:pointer; display:grid;grid-template-columns:16px minmax(0,1fr) minmax(0,auto); align-items:baseline;gap:12px} .chrow:hover{background:oklch(0.975 0.014 85)} .chrow[aria-expanded="true"]{background:var(--tint)} /* SAMME STOERRELSE SOM BENCHMARK. `.r .m` staar i 17/1.35 der, og raekkerne her stod i 18/1.4 — den samme slags raekke, et punkt stoerre, paa to faner man skifter imellem. */ .chrow .lab{margin:0;font-size:17px;line-height:1.35} .chrow .caret{font-family:'DM Sans',Helvetica,sans-serif;font-size:13px; color:oklch(0.55 0.03 60)} .delta{font-family:'DM Sans',Helvetica,sans-serif;font-size:14px; display:inline-block;padding:3px 9px;border-radius:6px;white-space:nowrap;font-weight:700} /* FARVE ER EN DOM, IKKE EN RETNING, 28/9 (C14). Groen sagde "leads" paa Benchmark og "up" her, og "Test pages in the public sitemap -49" stod roed selv om nul er maalet. Nu siger pilen retningen, graa i alle chips, og farven kommer kun hvor Benchmark selv har en dom om maalet (`low`/`neutral` i cmpmeta): groen naar brandet i raekken flyttede sig den gode vej, roed naar det gik den anden vej. */ .d-good{background:var(--winBg);color:var(--winFg)} .d-bad{background:var(--loseBg);color:var(--loseFg)} .d-flat{background:var(--tieBg);color:var(--tieFg);font-weight:500} .card .r2:last-child,.card .chrow:last-child{border-bottom:0} /* NEEDS A LOOK. Samme baand-form som resten af siden, saa den ikke laeses som en reklame-stribe, men med rollens roede kant: det er de raekker der ikke kan vente. Raekkerne under den staar ogsaa laengere nede under deres eget baand — striben er en genvej, ikke et andet saet. */ .band.ch.nal{--sect:#bb4635;--sectbg:#fbf1ef;} /* RAEKKERNE I STRIBEN SER UD SOM ALLE ANDRE RAEKKER, 21/9. De stod halvfede med et roedt udraabstegn foran, altsaa tre markeringer af det samme: baandets navn, dets roede kant, og saa hver enkelt raekke igen. Overskriften er markeringen; raekkerne er raekker. De samme raekker staar desuden laengere nede under deres eget baand — striben er en genvej, ikke et andet saet — og dér har de aldrig haft hverken fed eller udraabstegn. */ .nalnote{margin:.2em 0 1.1em;padding:0 0 0 1.45em;font-size:12px;line-height:1.5;color:#7c756b;} /* Beviset staar inde i den udfoldede raekke, ikke som endnu et foldeud: har man foerst spurgt hvad der skete, er listen svaret og ikke et nyt spoergsmaal. */ .evid{border-top:1px solid var(--hair);padding-top:12px;margin-top:2px} .evhead{margin:0;font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:700; font-size:14px;letter-spacing:.04em} .evintro{margin:5px 0 0;font-size:15px;line-height:1.55;color:oklch(0.42 0.02 60);max-width:62ch} .rowdet .cav{margin:0 0 10px;padding:9px 12px;border-radius:10px; background:oklch(0.93 0.055 75);color:oklch(0.34 0.09 55);font-size:15px;line-height:1.5} .evlist li .evmeta{margin-left:8px;font-family:'DM Sans',Helvetica,sans-serif; font-size:12.5px;color:var(--mute)} .evlist li .evnote{display:block;font-size:13.5px;color:var(--mute);margin-top:2px} .evlist li a{color:oklch(0.42 0.09 60)} .evlist{margin:9px 0 0;padding-left:19px;display:grid;gap:3px; font-size:15px;line-height:1.5;color:oklch(0.36 0.02 60)} .evlist li::marker{color:oklch(0.7 0.02 60)} .evmore{margin:9px 0 0;font-family:'Bricolage Grotesque',Helvetica,sans-serif; font-size:13px;color:var(--mute)} /* FLERE BRANDS ER KOLONNER PAA SAMME RAEKKE, ikke kort ved siden af hinanden. To kort betyder at man skal finde den samme maaling to steder og huske det ene tal mens man leder efter det andet. En raekke med to celler er det samme data og et andet spoergsmaal: hvem flyttede sig mest paa DEN HER maaling. Kolonnebredden er fast, saa tallene staar under hinanden; navnet faar resten. */ .fuldt{font-size:12.5px;color:var(--mute);font-style:italic;align-self:center} .chtab{--kol:minmax(120px,170px)} /* SIDSTE UDVEJ, saa en lang etiket aldrig klipper en kolonne af: kortet ruller selv. Siden goer det ikke - den regel staar paa .card og ikke paa . */ .chtab .card{overflow-x:auto} .chtab .chhead,.chtab .chrow{display:grid; grid-template-columns:16px minmax(0,1fr) repeat(var(--n),var(--kol)); align-items:baseline;gap:12px} .chtab .chhead{padding:9px 18px;border-bottom:1px solid var(--hair); font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:12.5px; letter-spacing:.05em;text-transform:uppercase;color:var(--mute)} .chtab .chhead .bn{font-weight:700;color:oklch(0.34 0.02 60);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .chtab .cell{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0} /* CHIPPEN MAA BRYDE HER, OG KUN HER. Paa kortet staar den alene i hoejre side og har hele bredden; i en kolonne paa 150px er "no change vs last week" bredere end cellen, og med nowrap skubbede den den sidste kolonne ud over kantet paa kortet. */ .chtab .delta{white-space:normal;line-height:1.35;max-width:100%} .chtab .cell .nu{font-family:'DM Sans',Helvetica,sans-serif;font-size:13px; color:var(--mute)} /* ET HUL ER IKKE ET NUL. En tom celle laeses som "nul", og nul er lavere end alt andet. Derfor staar der hvad der mangler, og hvem det mangler for. */ .chtab .cell .ingen{font-size:13px;font-style:italic;color:var(--mute);line-height:1.35; white-space:normal} /* Udfoldningen deles af kolonnerne, saa hvert brand faar sit eget afsnit med sit navn. */ /* "Now 19 · was 13" oeverst i den udfoldede raekke (29/9, proeve), se `nuTal`. */ .rowdet .nutal{margin:0 0 8px;font-family:'DM Sans',Helvetica,sans-serif;font-size:15px; color:var(--ink2);font-variant-numeric:tabular-nums} .chtab .perbrand{border-top:1px solid var(--hair);padding-top:10px;margin-top:10px} .chtab .perbrand:first-child{border-top:0;padding-top:0;margin-top:0} .chtab .perbrand > .bnavn{margin:0 0 6px;font-family:'Bricolage Grotesque',Helvetica,sans-serif; font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:oklch(0.42 0.09 60)} /* En sektionsraekke har samme kolonner som tabellen siden 29/9 (proeve), se `cellerFor`. */ .chtab .chrow.mere .lab{font-size:15px;color:var(--mute)} /* Historien under etiketten: hoejst to linjer, resten staar i den udfoldede raekke. */ .chrow .lab .hist{display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;margin-top:4px;font-size:14px;line-height:1.45;color:var(--mute)} .band.ch.under{font-size:.92em;opacity:.85} @media (max-width:820px){ .chtab{--kol:minmax(96px,120px)} .chtab .chhead,.chtab .chrow{grid-template-columns:16px minmax(0,1fr) repeat(var(--n),var(--kol))} } /* PAA EN TELEFON FAAR ETIKETTEN HELE BREDDEN, 28/9 (C11). Ved 390px stod den i en kolonne paa fyrre pixels ("Searc / dema / for...") og "MEASURE" oven i "LOOP". Nu staar maalets navn paa sin egen linje og tallene under det, et brand pr. kolonne. */ @media (max-width:600px){ .chtab .chhead,.chtab .chrow{grid-template-columns:16px repeat(var(--n),minmax(0,1fr))} .chtab .chhead > span:nth-child(2){display:none} .chtab .chrow .lab{grid-column:2 / -1} .chtab .chrow .lab + .cell{grid-column-start:2} } /* INDE I EN RAMME: SIDENS EGEN BUND SKAL IKKE VAERE DER. Forsiden indlejrer rapporten, og skifter man fane inde i rammen, kom siden ind med sin egen footer — "Kvasano.com / About / Privacy / Contact" midt inde i forsiden, lige over prisafsnittet. Headeren bliver staaende: forsiden klipper de foerste 293px af, og skjuler man den, flytter alt op og klippet skaerer ind i indholdet. Flaget kommer fra `?indlejret=1`, som fanerne baerer videre (se `href` i canvas-report.js). */ html.indlejret > body > footer, html.indlejret main.rapport > .tail .back { display: none !important; } html.indlejret > body { padding-bottom: 0 }