/* STUDIO SEM · delad sidfot * * EN sidfot på alla sidor: index.html, services.html och about.html. De två * v2-filerna som stod här förut finns inte längre i repot. * * Egen fil och inte inklistrad i fyra stilmallar. Sidorna kör olika ark * (styles.css, v2.css, services-v2.css, about.css), och en sidfot som ska se * likadan ut överallt får inte finnas i fyra kopior som glider isär vid första * ändringen. Ändra här, ändras överallt. * * LÄNKAS SIST i varje , efter sidans egen stilmall. Två av arken har * egna regler på .foot-links och .wordmark, och den här filen ska vinna. * * LJUS SIDFOT. Grunden är --white (#FFFCF3), samma varmvita yta som de ljusa * banden på sidorna, så sidan tonar ut i stället för att sluta i ett svart * block. Låg en stund som inline-stil på alla tre sidorna. Den ligger här nu: * services.html hade hunnit få color: var(--cream) på samma element, alltså * cream på varmvitt = 1,03:1, en sidfot som inte gick att läsa. * * Därför bär sidfoten INTE längre klassen .dark. cursor.js inverterar markören * över .dark (cursor.js rad 73), och på en cream sidfot blir det fel håll: * markören blev cream mot cream och försvann. Sätt inte tillbaka klassen för * att komma åt någon annan .dark-regel, den drar med sig inverteringen. * * Selektorerna bär ändå elementet (footer.v2-foot, inte bara .v2-foot) med * flit: två av sidorna har egna regler på .foot-links och .wordmark, och den * här filen ska vinna utan att behöva !important. * * Variablerna (--ink, --cream, --red, --display, --label, --maxw, --gutter) * definieras redan av varje sidas eget ark. Den här filen deklarerar inga * egna, så sidfoten ärver respektive sidas rutnätsbredd. Det är avsiktligt: * den ska linjera med innehållet ovanför, inte med en egen bredd. */ footer.v2-foot { /* Reserv i var(): --white finns i v2.css, styles.css och about.css, men en sidfot som ska gälla överallt ska inte bli genomskinlig den dagen ett fjärde ark saknar variabeln. */ background: var(--white, #FFFFFF); color: var(--espresso); /* taupe · 8,6:1 mot varmvitt */ padding: 54px 0 40px; /* Hårfin linje i stället för färgskifte. Cream mot cream syns inte, och utan linjen flyter sidfoten ihop med sektionen ovanför. */ border-top: 1px solid var(--line); } footer.v2-foot .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } footer.v2-foot .wordmark { font-family: var(--wide); font-size: 1.05rem; font-weight: 400; text-transform: uppercase; letter-spacing: .18em; /* .sem-mark ritas som CSS-mask med background-color: currentColor (nav.css), så logotypen tar färgen härifrån. Svart på cream. */ color: var(--espresso); text-decoration: none; white-space: nowrap; } footer.v2-foot .foot-links { display: flex; gap: 1.6rem; flex-wrap: wrap; font-family: var(--label); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; /* about.css satte text-align: right på sin .foot-links. Nollställs här, annars ärver raden en högerställning den inte ska ha. */ text-align: left; } footer.v2-foot .foot-links a { color: var(--espresso); /* taupe på cream · 8,4:1 */ text-decoration: none; } footer.v2-foot .foot-links a:hover { color: var(--espresso); } /* about.css used to give .v2-foot a:focus-visible its own softened outline colour, left over from when the footer was a dark band. It is reset to the site accent here so that every focus ring on every page is the same colour. A focus ring that changes colour between pages reads as a bug to the one visitor who most needs it to be obvious. */ footer.v2-foot a:focus-visible { outline-color: var(--accent); } footer.v2-foot .foot-legal { font-family: var(--label); font-size: .62rem; letter-spacing: .1em; /* Etikettgrå ur paletten. 4,9:1 mot cream, alltså AA för småtext. Taupe med opacitet i stället hade fallit under gränsen. */ color: var(--muted); margin: 0; max-width: none; } @media (max-width: 700px) { footer.v2-foot .wrap { flex-direction: column; align-items: flex-start; gap: 1.4rem; } footer.v2-foot .foot-links { gap: .6rem 1.2rem; } }