ghost · desktop
Bình thườngKhớp 100%26 số đo khớp
HoverKhớp 100%22 số đo khớp
FocusKhớp 100%22 số đo khớp
Độ tin cậy của lượt trích xuất
Các design token được trích xuất từ phân tích tần suất CSSOM, không qua diễn giải của LLM.
ghost · desktop
Bình thườngKhớp 100%26 số đo khớp
HoverKhớp 100%22 số đo khớp
FocusKhớp 100%22 số đo khớp
ghost · desktop
Bình thườngKhớp 100%22 số đo khớp
FocusKhớp 100%18 số đo khớp
ghost · desktop
Label y là 59px, trang web có 0px.
Bình thườngKhớp 100%1 trên 57 số đo khác nhau
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%18 số đo khớp
ghost · desktop
Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.
Bình thườngKhớp 100%35 số đo khớp
FocusKhớp 61%18 số đo khớp
primary · desktop
Bình thườngKhớp 100%26 số đo khớp
HoverKhớp 100%22 số đo khớp
FocusKhớp 100%22 số đo khớp
primary · desktop
Label 2 y là 27px, trang web có 9px.
Bình thườngKhớp 100%1 trên 29 số đo khác nhau
HoverKhớp 91%22 số đo khớp
FocusKhớp 76%22 số đo khớp
primary · desktop
Group y là 27px, trang web có 9px; Label 2 y là 28px, trang web có 10px và thêm 2 khác.
Bình thườngKhớp 100%4 trên 55 số đo khác nhau
HoverKhớp 91%22 số đo khớp
FocusKhớp 76%22 số đo khớp
primary · desktop
Bản render giống trang web ở mức 95%, dưới ngưỡng 97%.
Bình thườngKhớp 95%25 số đo khớp
HoverKhớp 95%22 số đo khớp
FocusKhớp 94%22 số đo khớp
primary · desktop
Bản render giống trang web ở mức 96%, dưới ngưỡng 97%.
Bình thườngKhớp 96%25 số đo khớp
HoverKhớp 96%22 số đo khớp
FocusKhớp 94%22 số đo khớp
secondary · desktop
Bình thườngKhớp 100%26 số đo khớp
HoverKhớp 100%22 số đo khớp
FocusKhớp 99%22 số đo khớp
secondary · desktop
Bình thườngKhớp 100%26 số đo khớp
HoverKhớp 100%22 số đo khớp
FocusKhớp 100%22 số đo khớp
secondary · desktop
Gốc width là 138px, trang web có 202px; Gốc height là 64px, trang web có 92px.
Bình thườngKhớp 97%2 trên 22 số đo khác nhau
HoverKhớp 97%18 số đo khớp
FocusKhớp 97%18 số đo khớp
desktop
Khi focus, bản render giống trang web ở mức 89%, dưới ngưỡng 97%.
Bình thườngKhớp 99%90 số đo khớp
FocusKhớp 89%22 số đo khớp
desktop
Media y là 93px, trang web có 57px; Text y là 149px, trang web có 106px và thêm 3 khác.
Bình thườngKhớp 100%5 trên 201 số đo khác nhau
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%1 trên 18 số đo khác nhau
Bình thường, lần xuất hiện 2Khớp 100%5 trên 201 số đo khác nhau
Bình thường, lần xuất hiện 3Khớp 100%5 trên 201 số đo khác nhau
Bình thường, lần xuất hiện 4Khớp 100%5 trên 201 số đo khác nhau
Bình thường, lần xuất hiện 5Khớp 100%5 trên 201 số đo khác nhau
Bình thường, lần xuất hiện 6Khớp 100%5 trên 201 số đo khác nhau
desktop
Break y là 110px, trang web có 138px; Text y là 138px, trang web có 166px.
Bình thườngKhớp 100%2 trên 73 số đo khác nhau
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%1 trên 18 số đo khác nhau
Bình thường, lần xuất hiện 2Khớp 100%2 trên 73 số đo khác nhau
Bình thường, lần xuất hiện 3Khớp 100%2 trên 73 số đo khác nhau
desktop
Group y là 0px, trang web có 77px; Media y là 0px, trang web có 77px và thêm 14 khác.
Bình thườngKhớp 100%16 trên 190 số đo khác nhau
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%18 số đo khớp
Bình thường, lần xuất hiện 2Khớp 100%16 trên 190 số đo khác nhau
Bình thường, lần xuất hiện 3Khớp 100%16 trên 190 số đo khác nhau
Bình thường, lần xuất hiện 4Khớp 100%16 trên 190 số đo khác nhau
Bình thường, lần xuất hiện 5Khớp 100%16 trên 190 số đo khác nhau
Bình thường, lần xuất hiện 6Khớp 100%16 trên 190 số đo khác nhau
desktop
Bình thườngKhớp 99%154 số đo khớp
Bình thường, lần xuất hiện 2Khớp 99%154 số đo khớp
Bình thường, lần xuất hiện 3Khớp 99%154 số đo khớp
Bình thường, lần xuất hiện 4Khớp 100%154 số đo khớp
desktop
Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.
Bình thườngKhớp 100%66 số đo khớp
Bình thường, lần xuất hiện 2Khớp 100%66 số đo khớp
Bình thường, lần xuất hiện 3Khớp 100%66 số đo khớp
desktop
Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.
Bình thườngKhớp 100%149 số đo khớp
Bình thường, lần xuất hiện 2Khớp 100%149 số đo khớp
Bình thường, lần xuất hiện 3Khớp 100%149 số đo khớp
Bình thường, lần xuất hiện 4Khớp 100%149 số đo khớp
Bình thường, lần xuất hiện 5Khớp 100%149 số đo khớp
desktop
Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.
Bình thườngKhớp 100%63 số đo khớp
Bình thường, lần xuất hiện 2Khớp 100%63 số đo khớp
Bình thường, lần xuất hiện 3Khớp 100%63 số đo khớp
desktop
Bình thườngKhớp 100%119 số đo khớp
Bình thường, lần xuất hiện 2Khớp 100%119 số đo khớp
Bình thường, lần xuất hiện 3Khớp 100%119 số đo khớp
desktop
Title y là 5px, trang web có 124px; Body y là 123px, trang web có 241px và thêm 2 khác.
Bình thườngKhớp 95%4 trên 111 số đo khác nhau
Bình thường, lần xuất hiện 2Khớp 100%4 trên 111 số đo khác nhau
Bình thường, lần xuất hiện 3Khớp 100%4 trên 111 số đo khác nhau
desktop
Gốc height là 78px, trang web có 56px; Group 2 height là 44px, trang web có 22px và thêm 2 khác.
Bình thườngKhớp 100%4 trên 109 số đo khác nhau
desktop
Khi focus, bản render giống trang web ở mức 91%, dưới ngưỡng 96%.
Bình thườngKhớp 100%21 số đo khớp
FocusKhớp 91%18 số đo khớp
desktop
Group 2 y là 87px, trang web có 98px; Text y là 87px, trang web có 98px.
Bình thườngKhớp 100%2 trên 67 số đo khác nhau
FocusKhớp 93%18 số đo khớp
desktop
Khi focus, bản render giống trang web ở mức 88%, dưới ngưỡng 96%.
Bình thườngKhớp 100%23 số đo khớp
FocusKhớp 88%18 số đo khớp
desktop
Không thể xác minh: ảnh, nội dung đa phương tiện hoặc quảng cáo mà trang đặt vào phủ gần hết phần tử và không có gì khác biệt, nên phép so sánh không nói lên điều gì về công thức.
Bình thườngKhớp 99%149 số đo khớp
Bình thường, lần xuất hiện 2Khớp 100%149 số đo khớp
Bình thường, lần xuất hiện 3Khớp 100%149 số đo khớp
Bình thường, lần xuất hiện 4Khớp 100%149 số đo khớp
Bình thường, lần xuất hiện 5Khớp 100%149 số đo khớp
Bình thường, lần xuất hiện 6Khớp 100%149 số đo khớp
desktop
List width là 225px, trang web có 176px; Item width là 225px, trang web có 176px và thêm 31 khác.
Bình thườngKhớp 100%33 trên 776 số đo khác nhau
desktop
Bình thườngKhớp 100%56 số đo khớp
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%18 số đo khớp
desktop
Bình thườngKhớp 100%98 số đo khớp
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%18 số đo khớp
desktop
Bình thườngKhớp 100%56 số đo khớp
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%18 số đo khớp
desktop
Bình thườngKhớp 100%98 số đo khớp
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%18 số đo khớp
desktop
List width là 225px, trang web có 176px; Item width là 225px, trang web có 176px và thêm 31 khác.
Bình thườngKhớp 100%33 trên 776 số đo khác nhau
desktop
List width là 225px, trang web có 176px; Item width là 225px, trang web có 176px và thêm 31 khác.
Bình thườngKhớp 100%33 trên 776 số đo khác nhau
desktop
Bình thườngKhớp 100%22 số đo khớp
FocusKhớp 100%18 số đo khớp
desktop
Bình thườngKhớp 100%22 số đo khớp
FocusKhớp 100%18 số đo khớp
desktop
Bình thườngKhớp 100%22 số đo khớp
FocusKhớp 100%18 số đo khớp
desktop
Bản render giống trang web ở mức 50%, dưới ngưỡng 96%.
Bình thườngKhớp 50%192 số đo khớp
HoverKhớp 50%18 số đo khớp
FocusKhớp 50%1 trên 18 số đo khác nhau
Bình thường, lần xuất hiện 2Khớp 100%192 số đo khớp
Bình thường, lần xuất hiện 3Khớp 100%192 số đo khớp
desktop
Group y là 8px, trang web có 12px; Group width là 1180px, trang web có 1154px và thêm 30 khác.
Bình thườngKhớp 100%32 trên 374 số đo khác nhau
desktop
Bình thườngKhớp 99%91 số đo khớp
HoverKhớp 99%19 số đo khớp
FocusKhớp 99%19 số đo khớp
Bình thường, lần xuất hiện 2Khớp 100%91 số đo khớp
Bình thường, lần xuất hiện 3Khớp 100%91 số đo khớp
Bình thường, lần xuất hiện 4Khớp 100%91 số đo khớp
Bình thường, lần xuất hiện 5Khớp 100%91 số đo khớp
Bình thường, lần xuất hiện 6Khớp 100%91 số đo khớp
desktop
Bình thườngKhớp 100%77 số đo khớp
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%18 số đo khớp
desktop
Bình thườngKhớp 100%77 số đo khớp
HoverKhớp 100%18 số đo khớp
FocusKhớp 100%18 số đo khớp
desktop
Group y là 8px, trang web có 12px; Group height là 43px, trang web có 36px và thêm 32 khác.
Bình thườngKhớp 100%34 trên 418 số đo khác nhau
desktop
Text 2 y là 33px, trang web có 17px; Group width là 0px, trang web có 4px.
Bình thườngKhớp 100%2 trên 234 số đo khác nhau
desktop
Gốc height là 105px, trang web có 96px; Text height là 74px, trang web có 65px và thêm 7 khác.
Bình thườngKhớp 100%9 trên 72 số đo khác nhau
FocusKhớp 97%18 số đo khớp
desktop
Group 3 y là 55px, trang web có 66px; Text y là 55px, trang web có 66px.
Bình thườngKhớp 100%2 trên 87 số đo khác nhau
FocusKhớp 100%18 số đo khớp
desktop
Khi focus, bản render giống trang web ở mức 35%, dưới ngưỡng 96%.
Bình thườngKhớp 100%21 số đo khớp
FocusKhớp 35%18 số đo khớp
desktop
Gốc width là 138px, trang web có 202px; Gốc height là 64px, trang web có 92px.
Bình thườngKhớp 74%2 trên 22 số đo khác nhau
FocusKhớp 74%18 số đo khớp
desktop
Group x là 713px, trang web có 1146px; Icon 2 x là 713px, trang web có 1146px.
Bình thườngKhớp 100%2 trên 308 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên nav link 2Khớp 100%18 số đo khớp
Hover trên nav link 2Khớp 100%18 số đo khớp
Focus trên nav link 3Khớp 100%18 số đo khớp
Hover trên nav link 3Khớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
desktop
Group x là 713px, trang web có 1146px; Icon 2 x là 713px, trang web có 1146px.
Bình thườngKhớp 100%2 trên 308 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên nav link 2Khớp 100%18 số đo khớp
Hover trên nav link 2Khớp 100%18 số đo khớp
Focus trên nav link 3Khớp 100%18 số đo khớp
Hover trên nav link 3Khớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
desktop
Group 4 y là 52px, trang web có -3px; Group 4 height là 59px, trang web có 41px và thêm 5 khác.
Bình thườngKhớp 98%7 trên 228 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên ctaKhớp 97%22 số đo khớp
Hover trên ctaKhớp 98%22 số đo khớp
Focus trên logoKhớp 94%18 số đo khớp
desktop
Group x là 713px, trang web có 1146px; Icon 2 x là 713px, trang web có 1146px.
Bình thườngKhớp 100%2 trên 308 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên nav link 2Khớp 100%18 số đo khớp
Hover trên nav link 2Khớp 100%18 số đo khớp
Focus trên nav link 3Khớp 100%18 số đo khớp
Hover trên nav link 3Khớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
mobile
Nav link 2 x là 261px, trang web có 246px; Group x là 277px, trang web có 262px và thêm 2 khác.
Bình thườngKhớp 100%4 trên 385 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên menu toggleKhớp 100%18 số đo khớp
Hover trên menu toggleKhớp 100%18 số đo khớp
Focus trên nav link 2Khớp 99%18 số đo khớp
Hover trên nav link 2Khớp 100%18 số đo khớp
Focus trên nav link 3Khớp 99%18 số đo khớp
Hover trên nav link 3Khớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
mobile
Khi focus, bản render giống trang web ở mức 94%, dưới ngưỡng 96%.
Bình thườngKhớp 100%207 số đo khớp
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên ctaKhớp 100%22 số đo khớp
Hover trên ctaKhớp 100%22 số đo khớp
Focus trên logoKhớp 94%18 số đo khớp
mobile
Nav link 2 x là 261px, trang web có 246px; Group x là 277px, trang web có 262px và thêm 2 khác.
Bình thườngKhớp 100%4 trên 385 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên menu toggleKhớp 100%18 số đo khớp
Hover trên menu toggleKhớp 100%18 số đo khớp
Focus trên nav link 2Khớp 99%18 số đo khớp
Hover trên nav link 2Khớp 100%18 số đo khớp
Focus trên nav link 3Khớp 99%18 số đo khớp
Hover trên nav link 3Khớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
mobile
Nav link 2 x là 261px, trang web có 246px; Group x là 277px, trang web có 262px và thêm 2 khác.
Bình thườngKhớp 100%4 trên 385 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên menu toggleKhớp 100%18 số đo khớp
Hover trên menu toggleKhớp 100%18 số đo khớp
Focus trên nav link 2Khớp 99%18 số đo khớp
Hover trên nav link 2Khớp 100%18 số đo khớp
Focus trên nav link 3Khớp 99%18 số đo khớp
Hover trên nav link 3Khớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
desktop
Inner height là 5418px, trang web có 7902px; Group height là 5418px, trang web có 7280px và thêm 5 khác.
Bình thườngKhớp 100%7 trên 1504 số đo khác nhau
Focuschưa kiểm tra
Focus trên link 2Khớp 100%18 số đo khớp
Focus trên linkKhớp 98%18 số đo khớp
desktop
Inner height là 1244px, trang web có 2174px; Group height là 727px, trang web có 1552px và thêm 122 khác.
Bình thườngKhớp 100%124 trên 1804 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên nav link 2Khớp 100%18 số đo khớp
Hover trên nav link 2Khớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
desktop
Inner height là 838px, trang web có 1131px; Group height là 320px, trang web có 509px và thêm 115 khác.
Bình thườngKhớp 100%117 trên 2107 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên nav link 2Khớp 100%18 số đo khớp
Hover trên nav link 2Khớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
desktop
Inner height là 647px, trang web có 773px; List height là 22px, trang web có 0px và thêm 2 khác.
Bình thườngKhớp 100%4 trên 2124 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên nav link 2Khớp 100%18 số đo khớp
Hover trên nav link 2Khớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
desktop
Inner height là 870px, trang web có 996px; Group 4 height là 323px, trang web có 349px và thêm 2 khác.
Bình thườngKhớp 100%4 trên 2214 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên linkKhớp 100%18 số đo khớp
Focus trên nav linkKhớp 100%18 số đo khớp
Hover trên nav linkKhớp 100%18 số đo khớp
mobile
Inner height là 2134px, trang web có 4222px; Group height là 1575px, trang web có 3584px và thêm 170 khác.
Bình thườngKhớp 99%172 trên 1615 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên buttonKhớp 99%18 số đo khớp
Hover trên buttonKhớp 99%18 số đo khớp
Focus trên nav linkKhớp 99%18 số đo khớp
Hover trên nav linkKhớp 99%18 số đo khớp
mobile
Không thể render riêng công thức này.
Không có gì được so sánh cho component này.
Công thức trong DESIGN.mdmobile
Không thể render riêng công thức này.
Không có gì được so sánh cho component này.
Công thức trong DESIGN.mdmobile
Không thể render riêng công thức này.
Không có gì được so sánh cho component này.
Công thức trong DESIGN.mdmobile
Gốc height là 1554px, trang web có 1433px; Inner height là 1554px, trang web có 1433px và thêm 143 khác.
Bình thườngKhớp 98%145 trên 1880 số đo khác nhau
Hoverchưa kiểm tra
Focuschưa kiểm tra
Focus trên buttonKhớp 98%18 số đo khớp
Hover trên buttonKhớp 98%18 số đo khớp
Focus trên link 2Khớp 98%18 số đo khớp
Focus trên link 3Khớp 98%18 số đo khớp
Hover trên link 3Khớp 98%18 số đo khớp
Focus trên link 4Khớp 98%18 số đo khớp
Hover trên link 4Khớp 98%18 số đo khớp
Focus trên linkKhớp 98%18 số đo khớp
Apple
Apple's site is product-first minimalism at its most disciplined. The page is a sequence of tall, full-bleed bands, alternating Parchment (surface-alt, #F5F5F7), pure white (surface, #FFFFFF) and near-black (surface-dark, #1D1D1F). Each band holds a centered headline, a one-line tagline, a pair of pill CTAs and a large product render. Photography and product lighting do the emotional work. The UI stays out of the way: ink-colored type, almost no chrome, and color held back for interaction.
Density is deliberately low on marketing surfaces and rises only in utility zones. The Shop pages carry card carousels and tab rails. The footer is a dense field of 12px links on Parchment. Hierarchy comes from scale and weight, not color. SF Pro Display at weight 600 steps down from hero-display (80px) through display-md (48px) to title-md (28px). SF Pro Text at 17px (body) carries everything conversational. A secondary gray continuation line (muted, #6E6E73) set in the same size and weight as the dark headline is a signature move on the Shop pages.
Color is almost entirely interactive. Action Blue (primary, #0071E3) fills pill CTAs and draws every focus ring. Link Blue (link, #0066CC) and Sky Link (link-on-dark, #2997FF) mark text links on light and dark grounds. Depth is quiet and comes from three sources: a single soft card shadow, a frosted translucent global nav, and tonal contrast between bands.
Key Characteristics:
primary, #0071E3) is reserved for primary CTA fills and the 2px focus ring.pill radius (980px); content cards use rounded.xl (18px).#00000014 2px 4px 12px 0px) plus the frosted nav blur (saturate(1.8) blur(20px)).caption, using translucent black text alphas on Parchment.The palette is a near-monochrome ladder of neutrals plus a tight blue family for interaction. Two small accents appear only in editorial copy and badges.
primary, #0071E3): the fill of primary CTAs (button-primary, button-primary-2, button-primary-3, the card-cta and promo-banner-cta parts). Hover shifts the fill to #0076DF. Never use it for body text or decorative fills.primary-focus, #0071E3): the same hue, used as the universal 2px solid #0071E3 focus outline on buttons, nav links, footer links and inputs.link, #0066CC): inline text links and outlined light-ground buttons (button-ghost, button-secondary-2 carry a 1px solid #0066CC border).link-on-dark, #2997FF): links and outlined buttons on dark bands (button-secondary uses #2997FF text and a 1px border in the same color).on-primary, #FFFFFF): label color on any Action Blue fill.surface, #FFFFFF): the default page and card face. card-4, card-8 and the card-5/card-7 groups sit as white tiles.surface-alt, #F5F5F7): alternate bands, the Shop canvas, and every footer (footer-landing background).surface-dark, #1D1D1F): dark hero bands. Translucent at 80% alpha (#1D1D1FCC) it becomes the landing nav bar behind the blur.black, #000000): pure-black product bands and the selected state of toggle-button-active.ink, #1D1D1F): primary text everywhere on light grounds, including headlines, body and card titles. Use it instead of pure black.ink-secondary, #424245): secondary copy that must stay strongly legible.muted, #6E6E73): gray continuation headlines, tab labels (tab-2, tab-3), eyebrow text (card-8-body) and table headers.muted-light, #86868B): the quietest captions and disclaimers.on-dark, #E8E8ED): nav and body text on dark bands.hairline, #D2D2D7): 1px dividers under tab items and table rows. Footers instead use a translucent #00000029 bottom border on their grouping blocks.accent-orange, #B64400): small highlighted text such as "New"-style callouts. Use it sparingly, as text only.accent-indigo, #686CCC): a rare surface accent tied to specific product storytelling, not a UI color.chip, #DEDEE3): measured only on components, never in page sampling. It appears as the translucent hover fill of the circular control button-ghost-3 (#DEDEE3B2, flagged: label y did not reproduce). The resting fill of that control is #D2D2D7A3. Treat it as a control-state color, not a palette surface.No CSS gradients were measured. Any glow or chrome in the heroes lives inside the product imagery.
title-md card titles, subtitle/lead taglines. Fallback stack: "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif.title-lg (34px) is the one Text-family exception above that size. The footer stacks add "Myriad Set Pro" and system-ui before Helvetica.| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
hero-display | 80px | 600 | 1.05 | -1.2px | Page-defining H1 on product heroes |
display-xl | 64px | 600 | 1.05 | -0.576px | Large section headlines |
display-lg | 56px | 600 | 1.05 | -0.28px | Home hero / promo-banner titles |
display-md | 48px | 600 | 1.1 | -0.144px | Section H2s, card-9 titles |
title-lg | 34px | 600 | 1.45 | -0.374px | SF Pro Text page titles on Shop flows |
title-md | 28px | 600 | 1.15 | 0.196px | Card titles, carousel section heads, Shop dark+gray headlines |
subtitle | 21px | 400 | 1.2 | 0.231px | Hero taglines, single line |
lead | 21px | 400 | 1.4 | 0.231px | Multi-line intro paragraphs |
body | 17px | 400 | 1.45 | -0.374px | Default running text |
body-strong | 17px | 600 | 1.45 | -0.374px | Inline emphasis, card eyebrows, H4s |
body-bold | 17px | 700 | 1.45 | -0.374px | Rare heavy emphasis (pricing callouts) |
button | 17px | 400 | 1.2 | -0.374px | 44px pill CTA labels |
link-strong | 17px | 600 | 1.25 | -0.374px | Bold standalone links |
body-sm | 14px | 400 | 1.3 | -0.224px | Compact 36px pill labels, tab labels |
caption | 12px | 400 | 1.35 | -0.12px | Footer text, legal, table headers |
caption-strong | 12px | 600 | 1.35 | -0.12px | Footer column headings |
nav-link | 12px | 400 | 1 | -0.12px | Global nav links |
body-bold. Weights 300 and 500 are absent; don't introduce them.button) or 1 (nav-link) so they center in fixed-height bars.muted) keeps the same size and weight as its ink lead.SF Pro is proprietary and licensed for Apple platforms only. The closest open-source stand-in is Inter: use Inter Display (or Inter with optical sizing) for the Display roles and Inter for the Text roles. Inter runs slightly wider, so add roughly -0.01em on top of the token letter-spacing at display sizes, and keep the token line-heights. On Apple devices, -apple-system / system-ui resolves to SF Pro and should lead the stack.
No base step or section-rhythm token was verified. The only verified spacing measurements are the internal paddings of the pill buttons:
| Token | Value | Read on |
|---|---|---|
button-primary-padding-y | 11px | button-primary root |
button-primary-padding-x | 21px | button-primary root |
button-secondary-padding-y | 11px | button-secondary root |
button-secondary-padding-x | 21px | button-secondary root |
button-ghost-padding-y | 11px | button-ghost root |
button-ghost-padding-x | 21px | button-ghost root |
button-secondary-2-padding-y | 8px | button-secondary-2 root |
button-secondary-2-padding-x | 15px | button-secondary-2 root |
The pattern is consistent. Full-size pills use button-primary-padding-y (11px) by button-primary-padding-x (21px) in every variant, filled or outlined. The compact pill tightens to button-secondary-2-padding-y (8px) by button-secondary-2-padding-x (15px).
No container max-width or grid-gap token was verified, so don't hard-code them from this document. From the screenshots:
Whitespace is the primary luxury signal. Each band is tall enough to read as its own scene, and copy is limited to a headline and one line. Tight gutters between tiles contrast with the generous air inside them. Density appears only where users scan: footers, tabs and comparison tables. Don't fill empty band space with extra copy or decoration.
Every spacing token restates a measurement of a verified component recipe, or the step those measurements share.
button-primary-padding-y: 11px (button-primary, vertical padding of the root)button-primary-padding-x: 21px (button-primary, horizontal padding of the root)button-secondary-padding-y: 11px (button-secondary, vertical padding of the root)button-secondary-padding-x: 21px (button-secondary, horizontal padding of the root)button-secondary-2-padding-y: 8px (button-secondary-2, vertical padding of the root)button-secondary-2-padding-x: 15px (button-secondary-2, horizontal padding of the root)button-ghost-padding-y: 11px (button-ghost, vertical padding of the root)button-ghost-padding-x: 21px (button-ghost, horizontal padding of the root)The card-4 grid lays out in 8 columns; the card-8 grid in 3 columns; the tab grid in 6 columns at desktop.
| Level | Treatment | Use |
|---|---|---|
| 0 · Flat tonal | No shadow. Depth comes from switching band color between surface, surface-alt and surface-dark | Hero and product bands, footers |
| 1 · Hairline | 1px solid hairline (#D2D2D7) bottom border on tab and table rows; #00000029 bottom border on footer groups (footer-landing-group) | Separating list items, tab rails, footer sections |
| 2 · Soft card shadow | #00000014 2px 4px 12px 0px (page-sampled as rgba(0, 0, 0, 0.08) 2px 4px 12px 0px) on a white rounded.xl face | card-4 group tiles on Parchment Shop canvases. Also on card-5 and card-7 (not verifiable: page media covers most of the card) |
| 3 · Frosted glass | backdrop-filter: saturate(1.8) blur(20px) over a translucent fill: #1D1D1FCC dark, or #FAFAFCCC light | Global nav header-landing (flagged: group x did not reproduce) and header-inner (flagged: group x did not reproduce), plus the Shop sticky bar in header-inner-3 (flagged: group y did not reproduce) |
| Focus | 2px solid #0071E3 outline, offset 3px on pills, -7px (inset) on nav items, 1px on text links | All interactive elements |
Shadow philosophy. Apple uses exactly one shadow, and it is barely there: an 8%-black, 12px-blur drop shadow offset down and to the right. It lifts white product cards off the Parchment Shop canvas. It never appears on buttons, heroes or the nav. The nav earns its separation through translucency and blur instead, a frosted layer that saturates the content scrolling beneath it. Everything else is flat. Tonal band changes and 1px hairlines do the structural work. To add depth, use one of these four tiers; never stack shadows or deepen the one that exists.
| Token | Value | Use |
|---|---|---|
rounded.xs | 8px | Small elements seen in page sampling; no measured component |
rounded.sm | 10px | card-8 content face (white tile with media) |
rounded.md | 11px | Dark country-selector input (flagged: render matched 89% of pixels on focus) |
rounded.lg | 14px | Occasional tiles in page sampling; no measured component |
rounded.xl | 18px | The standard card radius: card-4 group face, also card-5 and card-7 |
rounded.2xl | 20px | Larger tiles in page sampling; no measured component |
rounded.3xl | 48px | Large selector chips button-secondary-3 and toggle-button-active (both flagged: width did not reproduce 202px) |
rounded.4xl | 56px | Circular carousel control button-ghost-3, 56px high, so it renders as a circle (flagged: label y did not reproduce) |
rounded.pill | 980px | Every CTA: button-primary, button-secondary, button-secondary-2, button-ghost, card-cta, nav CTA header-inner-3-cta |
rounded.full | 9999px | Rare true-circle elements in page sampling |
The geometry is soft and continuous. There are no sharp corners on interactive or container elements, and no hard square tiles. Buttons are always full pills: the 980px value guarantees a capsule at any height (44px, 36px or 24px). Cards use rounded.xl, and smaller media-led tiles step down to rounded.sm. Circles appear for carousel arrows (rounded.4xl on a 56px control) and avatar/icon chips. Photography is mostly unframed cut-out product renders, so imagery rarely needs a radius of its own.
Each component below was distilled from the live page: the recipe is a standalone, placeholder-filled reproduction with literal values, and every frontmatter key named in the anatomy carries the same measurements. A verified component reproduced the original in every check; a flagged one is shipped with the reason it did not; one marked not verifiable could not be compared with the original, which says nothing about the recipe.
Button, primary
Verification: verified against the live page at desktop.
Anatomy
button-primary: the component root, a <a> (.c-button-primary), 10-character labelRecipe
<div class="c-button-primary-scope">
<a class="c-button-primary" href="#">lorem ipsu</a>
</div>
.c-button-primary-scope {
background-color: #000000;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-button-primary {
display: inline-block;
border-spacing: 0px;
min-width: 26px;
padding: 11px 21px;
background-color: #0071E3;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 20.0002px;
letter-spacing: -0.374px;
text-decoration-line: none;
text-align: center;
white-space: nowrap;
}
.c-button-primary:hover {
background-color: #0076DF;
}
.c-button-primary:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
button-primary-hover): background-color #0076DFButton, secondary
Verification: verified against the live page at desktop.
Anatomy
button-secondary: the component root, a <a> (.c-button-secondary), 3-character labelRecipe
<div class="c-button-secondary-scope">
<a class="c-button-secondary" href="#">lor</a>
</div>
.c-button-secondary-scope {
background-color: #000000;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-button-secondary {
display: inline-block;
border-spacing: 0px;
min-width: 26px;
padding: 11px 21px;
color: #2997FF;
border: 1px solid #2997FF;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 20.0002px;
letter-spacing: -0.374px;
text-decoration-line: none;
text-align: center;
white-space: nowrap;
}
.c-button-secondary:hover {
background-color: #0076DF;
color: #FFFFFF;
border: 1px solid transparent;
}
.c-button-secondary:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
button-secondary-hover): background-color #0076DF, color #FFFFFF, border 1px solid transparentButton, secondary (2)
Verification: verified against the live page at desktop.
Anatomy
button-secondary-2: the component root, a <a> (.c-button-secondary-2), 3-character labelRecipe
<div class="c-button-secondary-2-scope">
<a class="c-button-secondary-2" href="#">lor</a>
</div>
.c-button-secondary-2-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-button-secondary-2 {
display: inline-block;
border-spacing: 0px;
min-width: 28px;
padding: 8px 15px;
color: #0066CC;
border: 1px solid #0066CC;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
letter-spacing: -0.224px;
text-decoration-line: none;
text-align: center;
white-space: nowrap;
}
.c-button-secondary-2:hover {
background-color: #0076DF;
color: #FFFFFF;
border: 1px solid transparent;
}
.c-button-secondary-2:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
button-secondary-2-hover): background-color #0076DF, color #FFFFFF, border 1px solid transparentButton, ghost
Verification: verified against the live page at desktop.
Anatomy
button-ghost: the component root, a <a> (.c-button-ghost), 12-character labelRecipe
<div class="c-button-ghost-scope">
<a class="c-button-ghost" href="#">lorem ipsum</a>
</div>
.c-button-ghost-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-button-ghost {
display: inline-block;
border-spacing: 0px;
min-width: 26px;
padding: 11px 21px;
color: #0066CC;
border: 1px solid #0066CC;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 20.0002px;
letter-spacing: -0.374px;
text-decoration-line: none;
text-align: center;
white-space: nowrap;
}
.c-button-ghost:hover {
background-color: #0076DF;
color: #FFFFFF;
border: 1px solid transparent;
}
.c-button-ghost:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
button-ghost-hover): background-color #0076DF, color #FFFFFF, border 1px solid transparentButton, ghost (2)
Verification: verified against the live page at desktop.
Anatomy
button-ghost-2: the component root, a <button> (.c-button-ghost-2)Recipe
<div class="c-button-ghost-2-scope">
<button class="c-button-ghost-2" type="button"></button>
</div>
.c-button-ghost-2-scope {
background-color: #FAFAFCCC;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-button-ghost-2 {
display: flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
width: 22px;
padding: 0px;
position: absolute;
top: 0px;
right: -7px;
background-color: transparent;
color: #000000CC;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: normal;
text-transform: none;
text-align: center;
list-style-type: none;
}
.c-button-ghost-2:focus {
z-index: 1;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
Button, primary (2)
Verification: flagged, the button-primary-2-label-2 y did not reproduce the measured 9px after 2 correction attempts.
Anatomy
button-primary-2: the component root, a <a> (.c-button-primary-2)button-primary-2-label: label text, 3 characters (.c-button-primary-2__label)button-primary-2-label-2: label text, 13 characters (.c-button-primary-2__label-2)Recipe
<div class="c-button-primary-2-scope">
<a class="c-button-primary-2" href="#">
<span class="c-button-primary-2__label">lor</span>
<span class="c-button-primary-2__label-2">lorem ipsum d</span>
</a>
</div>
.c-button-primary-2-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
}
.c-button-primary-2 {
display: inline-block;
align-self: flex-end;
border-spacing: 0px;
padding: 8px 15px;
background-color: #0071E3;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
letter-spacing: -0.224px;
text-decoration-line: none;
text-align: center;
white-space: nowrap;
}
.c-button-primary-2__label-2 {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-button-primary-2:hover {
background-color: #0076DF;
}
.c-button-primary-2:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
button-primary-2-hover): background-color #0076DFButton, ghost (3)
Verification: flagged, the button-ghost-3-label y did not reproduce the measured 0px after 2 correction attempts.
Anatomy
button-ghost-3: the component root, a <button> (.c-button-ghost-3)button-ghost-3-group: inner group (.c-button-ghost-3__group)button-ghost-3-icon: icon placeholder, 56px (.c-button-ghost-3__icon)button-ghost-3-label: label text, 17 characters (.c-button-ghost-3__label)Recipe
<div class="c-button-ghost-3-scope">
<button class="c-button-ghost-3" type="button">
<span class="c-button-ghost-3__group">
<span class="c-button-ghost-3__icon" aria-hidden="true"></span>
</span>
<span class="c-button-ghost-3__label">lorem ipsum dolor</span>
</button>
</div>
.c-button-ghost-3-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-button-ghost-3 {
display: inline-block;
border-spacing: 0px;
width: 56px;
height: 56px;
padding: 0px;
position: absolute;
top: 49%;
right: 18px;
overflow-x: hidden;
overflow-y: hidden;
background-color: #D2D2D7A3;
color: #FFFFFF;
border: 0;
border-radius: 56px;
cursor: pointer;
transform: matrix(1, 0, 0, 1, 0, 0);
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 17px;
letter-spacing: normal;
text-transform: none;
text-align: center;
list-style-type: none;
transition-duration: 0.5s;
transition-timing-function: ease-in, cubic-bezier(0.15, 0, 0.2, 1);
transition-property: transform, opacity;
}
.c-button-ghost-3__group {
display: inline;
}
.c-button-ghost-3__icon {
display: inline-block;
flex-shrink: 0;
width: 56px;
height: 56px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-button-ghost-3__label {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-button-ghost-3:hover {
background-color: #DEDEE3B2;
}
.c-button-ghost-3:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
button-ghost-3-hover): background-color #DEDEE3B2Button, primary (3)
Verification: flagged, the button-primary-3-group y did not reproduce the measured 9px after 2 correction attempts.
Anatomy
button-primary-3: the component root, a <a> (.c-button-primary-3)button-primary-3-label: label text, 3 characters (.c-button-primary-3__label)button-primary-3-group: inner group (.c-button-primary-3__group)button-primary-3-label-2: label text, 23 characters (.c-button-primary-3__label-2)button-primary-3-group-2: line break (.c-button-primary-3__group-2)button-primary-3-group-3: line break (.c-button-primary-3__group-3)Recipe
<div class="c-button-primary-3-scope">
<a class="c-button-primary-3" href="#">
<span class="c-button-primary-3__label">lor</span>
<span class="c-button-primary-3__group">
<span class="c-button-primary-3__label-2">lorem ipsum dolor sit a</span>
<br class="c-button-primary-3__group-2">
<br class="c-button-primary-3__group-3">
</span>
</a>
</div>
.c-button-primary-3-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
}
.c-button-primary-3 {
display: inline-block;
align-self: flex-end;
border-spacing: 0px;
padding: 8px 15px;
background-color: #0071E3;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
letter-spacing: -0.224px;
text-decoration-line: none;
text-align: center;
white-space: nowrap;
}
.c-button-primary-3__group {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-button-primary-3:hover {
background-color: #0076DF;
}
.c-button-primary-3:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
button-primary-3-hover): background-color #0076DFButton, ghost (4)
Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.
Anatomy
button-ghost-4: the component root, a <button> (.c-button-ghost-4)button-ghost-4-image: image placeholder, 54px (.c-button-ghost-4__image)Recipe
<div class="c-button-ghost-4-scope">
<button class="c-button-ghost-4" type="button">
<span class="c-button-ghost-4__image" aria-hidden="true"></span>
</button>
</div>
.c-button-ghost-4-scope {
background-color: #ADD8FF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-button-ghost-4 {
display: inline-flex;
border-spacing: 0px;
padding: 0px;
background-color: transparent;
color: #1D1D1F;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: normal;
text-transform: none;
text-align: center;
}
.c-button-ghost-4__image {
display: block;
flex-shrink: 0;
width: 54px;
height: 54px;
aspect-ratio: auto 54 / 54;
overflow-x: clip;
overflow-y: clip;
background-color: currentcolor;
border-radius: 50%;
}
.c-button-ghost-4:focus {
padding: 3px;
border-radius: 50%;
outline: 2px solid #0071E3;
outline-offset: 1px;
}
States
button-ghost-4-focus): padding 3px, border-radius 50%, outline 2px solid #0071E3, outline-offset 1pxButton, primary (4)
Verification: flagged, the render came out 42 px narrower than the original after 2 correction attempts.
Anatomy
button-primary-4: the component root, a <button> (.c-button-primary-4), 24-character labelRecipe
<div class="c-button-primary-4-scope">
<button class="c-button-primary-4" type="button">lorem ipsum dolor sit am</button>
</div>
.c-button-primary-4-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-button-primary-4 {
display: inline-block;
border-spacing: 0px;
min-width: 26px;
padding: 11px 21px;
background-color: #0071E3;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 20.0002px;
letter-spacing: -0.374px;
text-transform: none;
text-align: center;
white-space: nowrap;
}
.c-button-primary-4:hover {
background-color: #0076DF;
}
.c-button-primary-4:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
button-primary-4-hover): background-color #0076DFButton, primary (5)
Verification: flagged, the render came out 21 px narrower than the original after 2 correction attempts.
Anatomy
button-primary-5: the component root, a <button> (.c-button-primary-5), 24-character labelRecipe
<div class="c-button-primary-5-scope">
<button class="c-button-primary-5" type="button">lorem ipsum dolor sit am</button>
</div>
.c-button-primary-5-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 12px;
}
.c-button-primary-5 {
display: inline-block;
border-spacing: 0px;
min-width: 23px;
padding: 3px 10px;
background-color: #0071E3;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
text-transform: none;
text-align: center;
white-space: nowrap;
}
.c-button-primary-5:hover {
background-color: #0076DF;
}
.c-button-primary-5:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
button-primary-5-hover): background-color #0076DFButton, secondary (3)
Verification: flagged, the button-secondary-3 width did not reproduce the measured 202px after 2 correction attempts.
Anatomy
button-secondary-3: the component root, a <button> (.c-button-secondary-3), 8-character labelRecipe
<div class="c-button-secondary-3-scope">
<button class="c-button-secondary-3" type="button">lorem ip</button>
</div>
.c-button-secondary-3-scope {
background-color: #FFFFFF;
color: #000000CC;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
}
.c-button-secondary-3 {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
border-spacing: 0px;
width: 138px;
padding: 32px;
vertical-align: bottom;
background-color: transparent;
color: #6E6E73;
border: 0;
border-radius: 48px;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.216px;
text-transform: none;
text-align: center;
white-space: nowrap;
list-style-type: none;
transition: opacity 0.1s ease-in-out;
}
.c-button-secondary-3:hover {
color: #000000;
}
.c-button-secondary-3:focus {
outline: none;
}
States
button-secondary-3-hover): color #000000Verification: flagged, the render matched 89% of the original pixels, below the 97% required on focus after 2 correction attempts.
Anatomy
input: the component root, a <div> (.c-input)input-group: inner group (.c-input__group)input-group-2: inner group (.c-input__group-2)input-label: label text, 11 characters (.c-input__label)input-group-3: inner block (.c-input__group-3)Recipe
<div class="c-input-scope">
<div class="c-input">
<span class="c-input__group">
<span class="c-input__group-2"></span>
<span class="c-input__label">lorem ipsum</span>
</span>
<div class="c-input__group-3"></div>
</div>
</div>
.c-input-scope {
background-color: #161617;
color: #FFFFFFEB;
font-family: "SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, system-ui, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-input {
display: block;
border-spacing: 0px;
box-sizing: border-box;
height: 42px;
position: relative;
z-index: 2;
background-color: #161617;
color: #FFFFFFEB;
border: 3px solid #FFFFFF14;
border-radius: 11px;
cursor: default;
font-family: "SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, system-ui, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 41px;
list-style-type: none;
padding-right: 14px;
padding-left: 14px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1);
transition-property: background-color, border-color;
}
.c-input::after {
content: "";
display: block;
width: 15px;
height: 34px;
position: absolute;
top: 3px;
right: 13px;
bottom: -1px;
left: 314.828px;
z-index: 1;
color: #FFFFFFCC;
font-family: "SF Pro Icons", "Apple Legacy Icons";
font-size: 21px;
font-weight: 300;
line-height: 30px;
}
.c-input__group {
display: inline;
}
.c-input__group-2 {
display: block;
position: absolute;
font-size: 24px;
font-weight: 300;
line-height: 36px;
}
.c-input__group-2::after {
content: "";
display: inline-block;
width: 17px;
height: 24px;
position: relative;
top: -3px;
right: 2px;
bottom: 3px;
left: -2px;
z-index: 1;
font-family: "SF Pro Icons", "Apple Legacy Icons";
line-height: 24px;
}
.c-input__label {
display: inline-block;
width: calc(100% - 48px);
overflow-x: hidden;
overflow-y: hidden;
line-height: 36px;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 29px;
}
.c-input__group-3 {
display: block;
}
.c-input__group-3::after {
content: "";
display: block;
width: 343px;
height: 36px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #FFFFFF29;
border-radius: 8px;
}
.c-input:focus {
outline: 2px solid #0071E3;
outline-offset: 0px;
}
States
Card
Verification: flagged, the card-media y did not reproduce the measured 57px after 2 correction attempts.
Anatomy
card: the component root, a <div> (.c-card)card-link: link (.c-card__link)card-group: inner flex column (.c-card__group)card-group-2: inner block (.c-card__group-2)card-title: heading, 0 characters (.c-card__title)card-media: image placeholder, 277x49px (.c-card__media)card-text: label text, 19 characters (.c-card__text)card-body: label text, 27 characters (.c-card__body)card-group-3: inner grid (.c-card__group-3)card-cta: link, 10-character label (.c-card__cta)card-cta-2: link, 3-character label (.c-card__cta-2)card-group-4: inner block (.c-card__group-4)card-media-2: image placeholder, 702x580px (.c-card__media-2)Recipe
<div class="c-card-scope">
<div class="c-card">
<a class="c-card__link" href="#"></a>
<div class="c-card__group">
<div class="c-card__group-2">
<h3 class="c-card__title">
<span class="c-card__media" aria-hidden="true"></span>
<span class="c-card__text">lorem ipsum dolor s</span>
</h3>
<p class="c-card__body">lorem ipsum dolor sit amet</p>
</div>
<div class="c-card__group-3">
<a class="c-card__cta" href="#">lorem ipsu</a>
<a class="c-card__cta-2" href="#">lor</a>
</div>
</div>
<div class="c-card__group-4">
<span class="c-card__media-2" aria-hidden="true"></span>
</div>
</div>
</div>
.c-card-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-card {
display: inline-flex;
justify-content: center;
border-spacing: 0px;
box-sizing: border-box;
min-height: 580px;
position: relative;
overflow-x: clip;
overflow-y: clip;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
text-align: center;
padding-top: 53px;
padding-bottom: 60px;
}
.c-card__link {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
cursor: pointer;
text-decoration-line: none;
}
.c-card__group {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.c-card__group-2 {
display: block;
position: relative;
z-index: 2;
}
.c-card__title {
display: block;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 40px;
font-weight: 600;
line-height: 44px;
margin-right: auto;
margin-left: auto;
}
.c-card__media {
display: inline-block;
flex-shrink: 0;
width: 277px;
height: 49px;
background-color: currentcolor;
}
.c-card__text {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-card__body {
display: block;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 21px;
letter-spacing: 0.231px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.c-card__group-3 {
display: grid;
justify-content: center;
column-gap: 14px;
margin-top: 12px;
}
.c-card__cta {
display: block;
min-width: 28px;
padding: 8px 15px;
background-color: #0071E3;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 980px;
cursor: pointer;
font-size: 14px;
line-height: 18.0008px;
letter-spacing: -0.224px;
text-decoration-line: none;
white-space: nowrap;
}
.c-card__cta-2 {
display: block;
min-width: 28px;
padding: 8px 15px;
border-width: 1px;
border-style: solid;
border-radius: 980px;
cursor: pointer;
font-size: 14px;
line-height: 18.0008px;
letter-spacing: -0.224px;
text-decoration-line: none;
white-space: nowrap;
}
.c-card__group-4 {
display: block;
width: 100%;
height: 580px;
position: absolute;
}
.c-card__media-2 {
display: block;
flex-shrink: 0;
width: 702px;
height: 580px;
background-color: currentcolor;
}
.c-card:hover {
background-color: #000000;
}
.c-card:focus {
background-color: #000000;
}
States
card-hover): background-color #000000card-focus): background-color #000000Card (2)
Verification: flagged, the card-2-break y did not reproduce the measured 138px after 2 correction attempts.
Anatomy
card-2: the component root, a <div> (.c-card-2)card-2-group: inner block (.c-card-2__group)card-2-icon: icon placeholder, 72x106px (.c-card-2__icon)card-2-body: inner group (.c-card-2__body)card-2-text: label text, 23 characters (.c-card-2__text, 2 instances)card-2-break: line break (.c-card-2__break)Recipe
<div class="c-card-2-scope">
<div class="c-card-2">
<div class="c-card-2__group">
<span class="c-card-2__icon" aria-hidden="true"></span>
</div>
<p class="c-card-2__body">
<span class="c-card-2__text">lorem ipsum dolor sit a</span>
<br class="c-card-2__break">
<span class="c-card-2__text">lorem ipsum d</span>
</p>
</div>
</div>
.c-card-2-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-card-2 {
display: inline-block;
flex-basis: 33.3333%;
border-spacing: 0px;
box-sizing: border-box;
max-width: 33.3333%;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
text-align: center;
}
.c-card-2__group {
display: block;
}
.c-card-2__icon {
display: inline-block;
flex-shrink: 0;
width: 72px;
height: 106px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-card-2__body {
display: block;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.216px;
margin-top: -3px;
margin-bottom: 0px;
}
.c-card-2:hover {
padding: 0px 48px 0px 0px;
}
.c-card-2:focus {
padding: 0px 48px 0px 0px;
}
States
Card (3)
Verification: flagged, the card-3-group y did not reproduce the measured 77px after 2 correction attempts.
Anatomy
card-3: the component root, a <li> (.c-card-3)card-3-group: inner block (.c-card-3__group)card-3-media: image placeholder, 288x256px (.c-card-3__media)card-3-group-2: inner block (.c-card-3__group-2)card-3-title: heading, 6 characters (.c-card-3__title)card-3-body: inner group (.c-card-3__body)card-3-text: label text, 12 characters (.c-card-3__text)card-3-text-2: label text, 6 characters (.c-card-3__text-2, 5 instances)card-3-text-3: label text, 9 characters (.c-card-3__text-3, 3 instances)card-3-group-3: inner group (.c-card-3__group-3)card-3-body-2: inner group (.c-card-3__body-2)card-3-link: link, 11-character label (.c-card-3__link)Recipe
<div class="c-card-3-scope">
<li class="c-card-3">
<div class="c-card-3__group">
<span class="c-card-3__media" aria-hidden="true"></span>
</div>
<div class="c-card-3__group-2">
<h3 class="c-card-3__title">lorem</h3>
<p class="c-card-3__body">
<span class="c-card-3__text">lorem ipsum</span>
<span class="c-card-3__text-2">lorem</span>
<span class="c-card-3__text-2">lore</span>
<span class="c-card-3__text-3">lorem ips</span>
<span class="c-card-3__text-2">lorem</span>
<span class="c-card-3__text-2">lor</span>
<span class="c-card-3__text-3">lorem</span>
<sup class="c-card-3__group-3">
<span class="c-card-3__text-3">lorem ip</span>
<span class="c-card-3__text-2">l</span>
</sup>
</p>
<p class="c-card-3__body-2">
<a class="c-card-3__link" href="#">lorem ipsum</a>
</p>
</div>
</li>
</div>
.c-card-3-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-card-3 {
flex-basis: 33.3333%;
border-spacing: 0px;
box-sizing: border-box;
max-width: 33.3333%;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
text-align: center;
list-style-type: none;
}
.c-card-3__group {
display: block;
margin-top: 77px;
}
.c-card-3__media {
display: inline-block;
flex-shrink: 0;
width: 288px;
height: 256px;
aspect-ratio: auto 288 / 256;
overflow-x: clip;
overflow-y: clip;
background-color: currentcolor;
}
.c-card-3__group-2 {
display: block;
}
.c-card-3__title {
display: block;
margin: 24px 0px 7.956px;
font-size: 19.89px;
font-weight: 600;
line-height: 29.25px;
}
.c-card-3__body {
display: block;
margin: 0px;
font-weight: 600;
}
.c-card-3__text {
display: block;
}
.c-card-3__text-3 {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-card-3__group-3 {
display: inline;
position: relative;
top: -5.1px;
font-size: 10.2px;
line-height: 15px;
}
.c-card-3__body-2 {
display: block;
margin: 13.6px 0px 0px;
}
.c-card-3__link {
display: inline;
color: #0066CC;
cursor: pointer;
text-decoration-line: none;
}
.c-card-3__link::after {
content: "";
display: inline-block;
width: 12px;
height: 17px;
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 1;
font-family: "SF Pro Icons";
line-height: 17px;
padding-left: 4.08px;
}
.c-card-3:hover {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.c-card-3:focus {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
States
Card (4)
Verification: verified against the live page at desktop.
Anatomy
card-4: the component root, a <div> (.c-card-4)card-4-group: inner flex row (.c-card-4__group)card-4-group-2: inner flex column (.c-card-4__group-2)card-4-group-3: inner block (.c-card-4__group-3), content not capturedcard-4-group-4: inner block (.c-card-4__group-4), content not capturedcard-4-list: inner flex row (.c-card-4__list), content not capturedcard-4-group-5: inner flex column (.c-card-4__group-5), content not capturedRecipe
<div class="c-card-4-scope">
<div class="c-card-4">
<div class="c-card-4__group">
<div class="c-card-4__group-2">
<div class="c-card-4__group-3"></div>
<div class="c-card-4__group-4"></div>
<ul class="c-card-4__list"></ul>
<div class="c-card-4__group-5"></div>
</div>
</div>
</div>
</div>
.c-card-4-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-card-4 {
display: inline-block;
border-spacing: 0px;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
white-space: nowrap;
}
.c-card-4__group {
display: flex;
height: 500px;
transform: matrix(1, 0, 0, 1, 140, 0);
margin-right: 20px;
}
.c-card-4__group-2 {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 400px;
height: 500px;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
background-color: #FFFFFF;
border-radius: 18px;
box-shadow: #00000014 2px 4px 12px 0px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
}
.c-card-4__group-3 {
display: block;
box-sizing: border-box;
width: 100%;
padding: 28px 28px 16px;
}
.c-card-4__group-4 {
display: block;
flex-grow: 1;
flex-basis: 0%;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
}
.c-card-4__list {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 24px 0px 0px;
margin: 0px auto;
list-style-type: none;
}
.c-card-4__group-5 {
display: flex;
flex-direction: column;
height: 80px;
position: relative;
padding-top: 10px;
}
States
Card (5)
Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.
Anatomy
card-5: the component root, a <div> (.c-card-5)card-5-group: inner flex row (.c-card-5__group)card-5-group-2: inner flex row (.c-card-5__group-2), content not capturedRecipe
<div class="c-card-5-scope">
<div class="c-card-5">
<div class="c-card-5__group">
<div class="c-card-5__group-2"></div>
</div>
</div>
</div>
.c-card-5-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-card-5 {
display: inline-block;
border-spacing: 0px;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
white-space: nowrap;
}
.c-card-5__group {
display: flex;
height: 500px;
transform: matrix(1, 0, 0, 1, 140, 0);
margin-right: 20px;
}
.c-card-5__group-2 {
display: flex;
justify-content: center;
width: 480px;
height: 500px;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
background-color: #FFFFFF;
border-radius: 18px;
box-shadow: #00000014 2px 4px 12px 0px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
}
States
Card (6)
Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.
Anatomy
card-6: the component root, a <div> (.c-card-6)card-6-group: inner block (.c-card-6__group)card-6-group-2: inner block (.c-card-6__group-2)card-6-title: heading, 17 characters (.c-card-6__title)card-6-text: label text, 29 characters (.c-card-6__text)card-6-group-3: inner block (.c-card-6__group-3)card-6-group-4: inner block (.c-card-6__group-4), content not capturedcard-6-group-5: inner flex row (.c-card-6__group-5), content not capturedRecipe
<div class="c-card-6-scope">
<div class="c-card-6">
<div class="c-card-6__group">
<div class="c-card-6__group-2">
<h2 class="c-card-6__title">lorem ipsum dolor</h2>
<span class="c-card-6__text">lorem ipsum dolor sit amet co</span>
</div>
<div class="c-card-6__group-3">
<div class="c-card-6__group-4"></div>
<div class="c-card-6__group-5"></div>
</div>
</div>
</div>
</div>
.c-card-6-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-card-6 {
display: block;
border-spacing: 0px;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
padding-bottom: 46px;
}
.c-card-6__group {
display: block;
}
.c-card-6__group-2 {
display: block;
padding-bottom: 8px;
margin-left: 140px;
}
.c-card-6__title {
display: inline;
margin: 0px;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
}
.c-card-6__text {
display: inline;
color: #6E6E73;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
margin-top: 22.4px;
}
.c-card-6__group-3 {
display: block;
position: relative;
}
.c-card-6__group-4 {
display: block;
height: 500px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 38px;
}
.c-card-6__group-5 {
display: flex;
justify-content: center;
list-style-type: none;
}
States
Card (7)
Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.
Anatomy
card-7: the component root, a <div> (.c-card-7)card-7-group: inner flex row (.c-card-7__group)card-7-group-2: inner flex row (.c-card-7__group-2), content not capturedRecipe
<div class="c-card-7-scope">
<div class="c-card-7">
<div class="c-card-7__group">
<div class="c-card-7__group-2"></div>
</div>
</div>
</div>
.c-card-7-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-card-7 {
display: inline-block;
border-spacing: 0px;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
white-space: nowrap;
}
.c-card-7__group {
display: flex;
height: 500px;
transform: matrix(1, 0, 0, 1, 140, 0);
margin-right: 20px;
}
.c-card-7__group-2 {
display: flex;
justify-content: center;
width: 480px;
height: 500px;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
background-color: #FFFFFF;
border-radius: 18px;
box-shadow: #00000014 2px 4px 12px 0px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
}
States
Card (8)
Verification: verified against the live page at desktop.
Anatomy
card-8: the component root, a <li> (.c-card-8)card-8-group: inner flex row (.c-card-8__group)card-8-group-2: inner block (.c-card-8__group-2)card-8-group-3: inner block (.c-card-8__group-3)card-8-media: image placeholder, 375x228px (.c-card-8__media)card-8-group-4: inner block (.c-card-8__group-4)card-8-body: label text, 6 characters (.c-card-8__body)card-8-body-2: label text, 26 characters (.c-card-8__body-2)card-8-body-3: label text, 108 characters (.c-card-8__body-3)Recipe
<div class="c-card-8-scope">
<li class="c-card-8">
<div class="c-card-8__group">
<div class="c-card-8__group-2">
<div class="c-card-8__group-3">
<span class="c-card-8__media" aria-hidden="true"></span>
</div>
<div class="c-card-8__group-4">
<p class="c-card-8__body">lorem</p>
<p class="c-card-8__body-2">lorem ipsum dolor sit amet</p>
<p class="c-card-8__body-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet cons</p>
</div>
</div>
</div>
</li>
</div>
.c-card-8-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-card-8 {
display: inline-flex;
flex-basis: 33.3333%;
border-spacing: 0px;
box-sizing: border-box;
max-width: 33.3333%;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
list-style-type: none;
}
.c-card-8__group {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 5px 10px;
}
.c-card-8__group-2 {
display: block;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
background-color: #FFFFFF;
border-radius: 10px;
}
.c-card-8__group-3 {
display: block;
}
.c-card-8__media {
display: inline-block;
flex-shrink: 0;
width: 375px;
height: 228px;
aspect-ratio: auto 375 / 228;
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow-x: clip;
overflow-y: clip;
background-color: currentcolor;
}
.c-card-8__group-4 {
display: block;
padding: 36px;
}
.c-card-8__body {
display: block;
margin: 0px;
color: #6E6E73;
font-weight: 600;
}
.c-card-8__body-2 {
display: block;
margin: 5.6px 0px 11.2px;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
}
.c-card-8__body-3 {
display: block;
margin: 0px;
}
States
Card (9)
Verification: flagged, the card-9-title y did not reproduce the measured 124px after 2 correction attempts.
Anatomy
card-9: the component root, a <li> (.c-card-9)card-9-group: inner flex row (.c-card-9__group)card-9-group-2: inner block (.c-card-9__group-2)card-9-group-3: inner block (.c-card-9__group-3)card-9-title: heading, 21 characters (.c-card-9__title)card-9-body: label text, 104 characters (.c-card-9__body)card-9-body-2: inner group (.c-card-9__body-2), content not capturedRecipe
<div class="c-card-9-scope">
<li class="c-card-9">
<div class="c-card-9__group">
<div class="c-card-9__group-2">
<div class="c-card-9__group-3">
<h3 class="c-card-9__title">lorem ipsum dolor sit</h3>
<p class="c-card-9__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</p>
<p class="c-card-9__body-2"></p>
</div>
</div>
</div>
</li>
</div>
.c-card-9-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-card-9 {
display: inline-flex;
flex-basis: 33.3333%;
border-spacing: 0px;
box-sizing: border-box;
max-width: 33.3333%;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
list-style-type: none;
}
.c-card-9__group {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 5px 10px;
}
.c-card-9__group-2 {
width: 100%;
}
.c-card-9__group-3 {
display: block;
}
.c-card-9__title {
display: block;
margin: 0px 5% 0px 0px;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 52.0077px;
letter-spacing: -0.144px;
}
.c-card-9__body {
display: block;
margin: 13.6px 8% 0px 0px;
}
.c-card-9__body-2 {
display: block;
margin: 23.8px 0px 0px;
}
States
Verification: flagged, the render matched 50% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.
Anatomy
promo-banner: the component root, a <div> (.c-promo-banner)promo-banner-link: link (.c-promo-banner__link)promo-banner-group: inner flex column (.c-promo-banner__group)promo-banner-group-2: inner block (.c-promo-banner__group-2, 2 instances)promo-banner-title: heading, 13 characters (.c-promo-banner__title)promo-banner-body: label text, 12 characters (.c-promo-banner__body)promo-banner-cta: link, 10-character label (.c-promo-banner__cta)promo-banner-cta-2: link, 3-character label (.c-promo-banner__cta-2)promo-banner-group-3: inner block (.c-promo-banner__group-3)promo-banner-media: image placeholder, 1440x692px (.c-promo-banner__media)Recipe
<div class="c-promo-banner-scope">
<div class="c-promo-banner">
<a class="c-promo-banner__link" href="#"></a>
<div class="c-promo-banner__group">
<div class="c-promo-banner__group-2">
<h2 class="c-promo-banner__title">lorem ipsum d</h2>
<p class="c-promo-banner__body">lorem ipsum</p>
</div>
<div class="c-promo-banner__group-2">
<a class="c-promo-banner__cta" href="#">lorem ipsu</a>
<a class="c-promo-banner__cta-2" href="#">lor</a>
</div>
</div>
<div class="c-promo-banner__group-3">
<span class="c-promo-banner__media" aria-hidden="true"></span>
</div>
</div>
</div>
.c-promo-banner-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-promo-banner {
display: inline-flex;
justify-content: center;
border-spacing: 0px;
box-sizing: border-box;
min-height: 692px;
position: relative;
overflow-x: clip;
overflow-y: clip;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
text-align: center;
padding-top: 56px;
padding-bottom: 63px;
}
.c-promo-banner__link {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
cursor: pointer;
text-decoration-line: none;
}
.c-promo-banner__group {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.c-promo-banner__title {
display: block;
margin: 0px auto;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 56px;
font-weight: 600;
line-height: 60px;
letter-spacing: -0.28px;
}
.c-promo-banner__body {
display: block;
margin: 6px auto 0px;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
line-height: 32px;
letter-spacing: 0.196px;
}
.c-promo-banner__cta {
display: block;
min-width: 26px;
padding: 11px 21px;
background-color: #0071E3;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 980px;
cursor: pointer;
line-height: 20.0002px;
text-decoration-line: none;
white-space: nowrap;
}
.c-promo-banner__cta-2 {
display: block;
min-width: 26px;
padding: 11px 21px;
border-width: 1px;
border-style: solid;
border-radius: 980px;
cursor: pointer;
line-height: 20.0002px;
text-decoration-line: none;
white-space: nowrap;
}
.c-promo-banner__group-3 {
display: block;
width: 100%;
height: 692px;
position: absolute;
bottom: 0px;
}
.c-promo-banner__media {
display: block;
flex-shrink: 0;
width: 1440px;
height: 692px;
background-color: currentcolor;
}
.c-promo-banner:hover {
background-color: #000000;
}
.c-promo-banner:focus {
background-color: #000000;
}
States
promo-banner-hover): background-color #000000promo-banner-focus): background-color #000000Verification: flagged, the nav-link-list width did not reproduce the measured 176px after 2 correction attempts.
Anatomy
nav-link: the component root, a <nav> (.c-nav-link), content not capturednav-link-group: inner block (.c-nav-link__group, 2 instances)nav-link-group-2: inner block (.c-nav-link__group-2, 2 instances)nav-link-title: heading, 0 characters (.c-nav-link__title, 4 instances)nav-link-text: label text, 14 characters (.c-nav-link__text, 4 instances)nav-link-list: inner group (.c-nav-link__list, 4 instances), content not capturednav-link-item: inner group (.c-nav-link__item, 18 instances), content not capturednav-link-item-2: inner group (.c-nav-link__item-2, 3 instances), content not capturednav-link-group-3: inner block (.c-nav-link__group-3, 2 instances)Recipe
<div class="c-nav-link-scope">
<nav class="c-nav-link">
<div class="c-nav-link__group">
<div class="c-nav-link__group-2">
<h3 class="c-nav-link__title">
<span class="c-nav-link__text">lorem ipsum do</span>
</h3>
<ul class="c-nav-link__list">
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item-2"></li>
</ul>
</div>
<div class="c-nav-link__group-3">
<h3 class="c-nav-link__title">
<span class="c-nav-link__text">lorem ipsum</span>
</h3>
<ul class="c-nav-link__list">
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item-2"></li>
</ul>
</div>
</div>
<div class="c-nav-link__group">
<div class="c-nav-link__group-2">
<h3 class="c-nav-link__title">
<span class="c-nav-link__text">lorem i</span>
</h3>
<ul class="c-nav-link__list">
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item-2"></li>
</ul>
</div>
<div class="c-nav-link__group-3">
<h3 class="c-nav-link__title">
<span class="c-nav-link__text">lorem ipsum d</span>
</h3>
<ul class="c-nav-link__list">
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
<li class="c-nav-link__item"></li>
</ul>
</div>
</div>
</nav>
</div>
.c-nav-link-scope {
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
}
.c-nav-link {
display: flex;
border-spacing: 0px;
color: #0000008F;
font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
padding-top: 20px;
}
.c-nav-link__group {
display: block;
flex-basis: 25%;
}
.c-nav-link__group-2 {
display: block;
}
.c-nav-link__title {
display: block;
margin: 0px;
color: #000000E0;
font-size: 12px;
font-weight: 400;
}
.c-nav-link__text {
display: block;
font-weight: 600;
margin-right: 20px;
margin-bottom: 9.6px;
}
.c-nav-link__list {
display: block;
padding: 0px;
margin: 0px 20px 0px 0px;
list-style-type: none;
}
.c-nav-link__item {
display: block;
margin-bottom: 9.6px;
}
.c-nav-link__item-2 {
display: block;
}
.c-nav-link__group-3 {
display: block;
padding-top: 24px;
}
States
Verification: verified against the live page at desktop.
Anatomy
nav-menu-item: the component root, a <button> (.c-nav-menu-item)Recipe
<div class="c-nav-menu-item-scope">
<button class="c-nav-menu-item" type="button"></button>
</div>
.c-nav-menu-item-scope {
background-color: #1D1D1FCC;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-nav-menu-item {
display: flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
width: 22px;
padding: 0px;
position: absolute;
top: 0px;
right: -7px;
background-color: transparent;
color: #FFFFFFCC;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: normal;
text-transform: none;
text-align: center;
list-style-type: none;
}
.c-nav-menu-item:focus {
z-index: 1;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
Header (landing)
Verification: desktop flagged, the header-landing-group x did not reproduce the measured 1146px after 2 correction attempts; mobile flagged, the header-landing-mobile-nav-link-2 x did not reproduce the measured 246px after 2 correction attempts.
Variant observed on https://www.apple.com/.
Anatomy
header-landing: the component root, a <nav> (.c-header-landing)header-landing-inner: inner block (.c-header-landing__inner)header-landing-nav: inner flex row (.c-header-landing__nav)header-landing-nav-item: inner group (.c-header-landing__nav-item)header-landing-nav-link: link (.c-header-landing__nav-link)header-landing-group: inner flex row (.c-header-landing__group, 3 instances)header-landing-icon: icon placeholder, 14x44px (.c-header-landing__icon, 2 instances)header-landing-text: label text, 5 characters (.c-header-landing__text)header-landing-nav-link-2: link (.c-header-landing__nav-link-2)header-landing-icon-2: icon placeholder, 15x44px (.c-header-landing__icon-2)header-landing-group-2: inner block (.c-header-landing__group-2)header-landing-nav-link-3: link (.c-header-landing__nav-link-3)header-landing-group-3: inner group (.c-header-landing__group-3)header-landing-group-4: inner group (.c-header-landing__group-4)header-landing-text-2: label text, 1 characters (.c-header-landing__text-2)Desktop recipe
<div class="c-header-landing-scope">
<nav class="c-header-landing">
<div class="c-header-landing__inner">
<ul class="c-header-landing__nav">
<li class="c-header-landing__nav-item">
<a class="c-header-landing__nav-link" href="#">
<span class="c-header-landing__group">
<span class="c-header-landing__icon" aria-hidden="true"></span>
</span>
<span class="c-header-landing__text">lorem</span>
</a>
</li>
<a class="c-header-landing__nav-link-2" href="#">
<span class="c-header-landing__group">
<span class="c-header-landing__icon-2" aria-hidden="true"></span>
</span>
</a>
<div class="c-header-landing__group-2">
<a class="c-header-landing__nav-link-3" href="#">
<span class="c-header-landing__group">
<span class="c-header-landing__icon" aria-hidden="true"></span>
</span>
<span class="c-header-landing__group-3">
<span class="c-header-landing__group-4"></span>
<span class="c-header-landing__text-2">l</span>
</span>
</a>
</div>
</ul>
</div>
</nav>
</div>
.c-header-landing-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-header-landing {
display: block;
border-spacing: 0px;
height: 48px;
min-width: 320px;
max-height: 44px;
position: fixed;
top: 70px;
right: 0px;
left: 0px;
z-index: 9999;
background-color: #1D1D1FCC;
color: #1D1D1F;
backdrop-filter: saturate(1.8) blur(20px);
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-header-landing__inner {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 1024px;
padding-right: 22px;
padding-left: 22px;
margin-right: auto;
margin-left: auto;
}
.c-header-landing__nav {
display: flex;
justify-content: space-between;
height: 44px;
padding: 0px;
margin: 0px -8px;
cursor: default;
list-style-type: none;
}
.c-header-landing__nav-item {
display: block;
box-sizing: border-box;
height: 44px;
}
.c-header-landing__nav-link {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #FFFFFFCC;
cursor: pointer;
font-weight: 600;
line-height: 21.0012px;
text-decoration-line: none;
white-space: nowrap;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-header-landing__group {
display: flex;
}
.c-header-landing__icon {
display: block;
flex-shrink: 0;
width: 14px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-header-landing__text {
display: flex;
align-items: center;
width: 1px;
height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
margin-left: 4px;
}
.c-header-landing__nav-link-2 {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #FFFFFFCC;
cursor: pointer;
font-size: 12px;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-header-landing__icon-2 {
display: block;
flex-shrink: 0;
width: 15px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-header-landing__group-2 {
display: block;
position: relative;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-landing__nav-link-3 {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
position: relative;
z-index: 1;
color: #FFFFFFCC;
cursor: pointer;
font-size: 12px;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-header-landing__group-3 {
display: block;
box-sizing: border-box;
width: 13px;
height: 13px;
position: absolute;
right: 11px;
bottom: 11px;
left: 15px;
z-index: 1;
color: #000000;
transform: matrix(0, 0, 0, 0, 0, 0);
font-size: 10px;
line-height: 13px;
letter-spacing: -0.08px;
text-align: center;
}
.c-header-landing__group-3::before {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #FFFFFF;
border-radius: 13px;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-landing__group-3::after {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #FFFFFF;
border-radius: 13px;
}
.c-header-landing__group-4 {
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0px;
right: 6.5px;
background-color: #FFFFFF;
transform: matrix(0, 0, 0, 1, 0, 0);
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-landing__text-2 {
display: block;
position: relative;
z-index: 2;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-landing__nav-link:hover {
color: #FFFFFF;
}
.c-header-landing__nav-link:focus {
color: #FFFFFF;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-landing__nav-link-2:hover {
color: #FFFFFF;
}
.c-header-landing__nav-link-2:focus {
color: #FFFFFF;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-landing__nav-link-3:hover {
color: #FFFFFF;
}
.c-header-landing__nav-link-3:focus {
color: #FFFFFF;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
Mobile anatomy
header-landing-mobile: the component root, a <nav> (.c-header-landing-mobile)header-landing-mobile-inner: inner flex row (.c-header-landing-mobile__inner)header-landing-mobile-nav: inner flex row (.c-header-landing-mobile__nav)header-landing-mobile-nav-item: inner group (.c-header-landing-mobile__nav-item)header-landing-mobile-nav-link: link (.c-header-landing-mobile__nav-link)header-landing-mobile-group: inner flex row (.c-header-landing-mobile__group, 3 instances)header-landing-mobile-icon: icon placeholder, 17x48px (.c-header-landing-mobile__icon, 3 instances)header-landing-mobile-text: label text, 5 characters (.c-header-landing-mobile__text)header-landing-mobile-nav-item-2: inner group (.c-header-landing-mobile__nav-item-2)header-landing-mobile-nav-link-2: link (.c-header-landing-mobile__nav-link-2)header-landing-mobile-group-2: inner block (.c-header-landing-mobile__group-2)header-landing-mobile-nav-link-3: link (.c-header-landing-mobile__nav-link-3)header-landing-mobile-group-3: inner group (.c-header-landing-mobile__group-3)header-landing-mobile-group-4: inner group (.c-header-landing-mobile__group-4)header-landing-mobile-text-2: label text, 1 characters (.c-header-landing-mobile__text-2)header-landing-mobile-group-5: inner block (.c-header-landing-mobile__group-5)header-landing-mobile-menu-toggle: button (.c-header-landing-mobile__menu-toggle)header-landing-mobile-menu-toggle-icon: icon placeholder, 18px (.c-header-landing-mobile__menu-toggle-icon)Mobile recipe
<div class="c-header-landing-mobile-scope">
<nav class="c-header-landing-mobile">
<div class="c-header-landing-mobile__inner">
<ul class="c-header-landing-mobile__nav">
<li class="c-header-landing-mobile__nav-item">
<a class="c-header-landing-mobile__nav-link" href="#">
<span class="c-header-landing-mobile__group">
<span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
</span>
<span class="c-header-landing-mobile__text">lorem</span>
</a>
</li>
<li class="c-header-landing-mobile__nav-item-2">
<a class="c-header-landing-mobile__nav-link-2" href="#">
<span class="c-header-landing-mobile__group">
<span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
</span>
</a>
</li>
<div class="c-header-landing-mobile__group-2">
<a class="c-header-landing-mobile__nav-link-3" href="#">
<span class="c-header-landing-mobile__group">
<span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
</span>
<span class="c-header-landing-mobile__group-3">
<span class="c-header-landing-mobile__group-4"></span>
<span class="c-header-landing-mobile__text-2">l</span>
</span>
</a>
</div>
</ul>
<div class="c-header-landing-mobile__group-5">
<button class="c-header-landing-mobile__menu-toggle" type="button">
<span class="c-header-landing-mobile__menu-toggle-icon" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
</div>
.c-header-landing-mobile-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-header-landing-mobile {
display: block;
border-spacing: 0px;
height: 48px;
min-width: 320px;
position: fixed;
top: 135px;
right: 0px;
left: 0px;
z-index: 9999;
color: #1D1D1F;
backdrop-filter: saturate(1.8) blur(20px);
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-header-landing-mobile__inner {
display: flex;
box-sizing: border-box;
width: 100%;
height: 100%;
max-width: 1024px;
position: absolute;
top: 0px;
z-index: 2;
background-color: #1D1D1FCC;
transition: background 0.422s cubic-bezier(0.4, 0, 0.6, 1);
margin-right: auto;
margin-left: auto;
}
.c-header-landing-mobile__nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
flex-basis: 0%;
box-sizing: border-box;
padding: 0px 48px 0px 0px;
margin: 0px;
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 1;
cursor: default;
list-style-type: none;
}
.c-header-landing-mobile__nav-item {
display: block;
flex-grow: 1;
box-sizing: border-box;
width: 48px;
height: 100%;
text-align: left;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
.c-header-landing-mobile__nav-link {
display: flex;
justify-content: center;
align-items: center;
width: max-content;
height: 48px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #FFFFFFCC;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 23px;
letter-spacing: 0.228px;
text-decoration-line: none;
white-space: nowrap;
padding-right: 16px;
padding-left: 16px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-landing-mobile__group {
display: flex;
}
.c-header-landing-mobile__icon {
display: block;
flex-shrink: 0;
width: 17px;
height: 48px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-header-landing-mobile__text {
display: flex;
align-items: center;
width: 1px;
height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
margin-left: 4px;
}
.c-header-landing-mobile__nav-item-2 {
display: list-item;
box-sizing: border-box;
width: 48px;
height: 100%;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
.c-header-landing-mobile__nav-link-2 {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #FFFFFFCC;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.196px;
text-decoration-line: none;
white-space: nowrap;
padding-right: 8px;
padding-left: 8px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-landing-mobile__group-2 {
display: block;
position: relative;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-landing-mobile__nav-link-3 {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
position: relative;
z-index: 1;
color: #FFFFFFCC;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.196px;
text-decoration-line: none;
white-space: nowrap;
padding-right: 8px;
padding-left: 8px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-landing-mobile__group-3 {
display: block;
box-sizing: border-box;
width: 13px;
height: 13px;
position: absolute;
right: 11px;
bottom: 13px;
left: 22px;
z-index: 1;
color: #000000;
transform: matrix(0, 0, 0, 0, 0, 0);
font-size: 10px;
line-height: 13px;
letter-spacing: -0.08px;
text-align: center;
}
.c-header-landing-mobile__group-3::before {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #FFFFFF;
border-radius: 13px;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-landing-mobile__group-3::after {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #FFFFFF;
border-radius: 13px;
}
.c-header-landing-mobile__group-4 {
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0px;
right: 6.5px;
background-color: #FFFFFF;
transform: matrix(0, 0, 0, 1, 0, 0);
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-landing-mobile__text-2 {
display: block;
position: relative;
z-index: 2;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-landing-mobile__group-5 {
display: block;
width: 48px;
position: absolute;
right: 0px;
z-index: 3;
}
.c-header-landing-mobile__menu-toggle {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
padding: 0px;
position: relative;
background-color: transparent;
color: #FFFFFF;
border: 0;
opacity: 0.8;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: normal;
text-transform: none;
text-align: center;
transition-duration: 0.32s, 0.32s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1);
transition-property: opacity, color;
}
.c-header-landing-mobile__menu-toggle-icon {
display: block;
flex-shrink: 0;
width: 18px;
height: 18px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-header-landing-mobile__nav-link:hover {
color: #FFFFFF;
}
.c-header-landing-mobile__nav-link:focus {
color: #FFFFFF;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-landing-mobile__nav-link-2:hover {
color: #FFFFFF;
}
.c-header-landing-mobile__nav-link-2:focus {
color: #FFFFFF;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-landing-mobile__nav-link-3:hover {
color: #FFFFFF;
}
.c-header-landing-mobile__nav-link-3:focus {
color: #FFFFFF;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-landing-mobile__menu-toggle:hover {
opacity: 1;
}
.c-header-landing-mobile__menu-toggle:focus {
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
header-landing-nav-link hover (header-landing-nav-link-hover): color #FFFFFFheader-landing-nav-link focus (header-landing-nav-link-focus): color #FFFFFF, outline 2px solid #0071E3, outline-offset -7pxheader-landing-nav-link-2 hover (header-landing-nav-link-2-hover): color #FFFFFFheader-landing-nav-link-2 focus (header-landing-nav-link-2-focus): color #FFFFFF, outline 2px solid #0071E3, outline-offset -7pxheader-landing-nav-link-3 hover (header-landing-nav-link-3-hover): color #FFFFFFheader-landing-nav-link-3 focus (header-landing-nav-link-3-focus): color #FFFFFF, outline 2px solid #0071E3, outline-offset -7pxheader-landing-mobile-nav-link hover (header-landing-mobile-nav-link-hover): color #FFFFFFheader-landing-mobile-nav-link focus (header-landing-mobile-nav-link-focus): color #FFFFFF, outline 2px solid #0071E3, outline-offset -7pxheader-landing-mobile-nav-link-2 hover (header-landing-mobile-nav-link-2-hover): color #FFFFFFheader-landing-mobile-nav-link-2 focus (header-landing-mobile-nav-link-2-focus): color #FFFFFF, outline 2px solid #0071E3, outline-offset -7pxheader-landing-mobile-nav-link-3 hover (header-landing-mobile-nav-link-3-hover): color #FFFFFFheader-landing-mobile-nav-link-3 focus (header-landing-mobile-nav-link-3-focus): color #FFFFFF, outline 2px solid #0071E3, outline-offset -7pxheader-landing-mobile-menu-toggle hover: opacity 1header-landing-mobile-menu-toggle focus: outline 2px solid #0071E3, outline-offset -7pxHeader (inner)
Verification: desktop flagged, the header-inner-group x did not reproduce the measured 1146px after 2 correction attempts; mobile flagged, the header-inner-mobile-nav-link-2 x did not reproduce the measured 246px after 2 correction attempts.
Variant observed on https://www.apple.com/us/shop/goto/payment_plan.
Anatomy
header-inner: the component root, a <nav> (.c-header-inner)header-inner-inner: inner block (.c-header-inner__inner)header-inner-nav: inner flex row (.c-header-inner__nav)header-inner-nav-item: inner group (.c-header-inner__nav-item)header-inner-nav-link: link (.c-header-inner__nav-link)header-inner-group: inner flex row (.c-header-inner__group, 3 instances)header-inner-icon: icon placeholder, 14x44px (.c-header-inner__icon, 2 instances)header-inner-text: label text, 5 characters (.c-header-inner__text)header-inner-nav-link-2: link (.c-header-inner__nav-link-2)header-inner-icon-2: icon placeholder, 15x44px (.c-header-inner__icon-2)header-inner-group-2: inner block (.c-header-inner__group-2)header-inner-nav-link-3: link (.c-header-inner__nav-link-3)header-inner-group-3: inner group (.c-header-inner__group-3)header-inner-group-4: inner group (.c-header-inner__group-4)header-inner-text-2: label text, 1 characters (.c-header-inner__text-2)Desktop recipe
<div class="c-header-inner-scope">
<nav class="c-header-inner">
<div class="c-header-inner__inner">
<ul class="c-header-inner__nav">
<li class="c-header-inner__nav-item">
<a class="c-header-inner__nav-link" href="#">
<span class="c-header-inner__group">
<span class="c-header-inner__icon" aria-hidden="true"></span>
</span>
<span class="c-header-inner__text">lorem</span>
</a>
</li>
<a class="c-header-inner__nav-link-2" href="#">
<span class="c-header-inner__group">
<span class="c-header-inner__icon-2" aria-hidden="true"></span>
</span>
</a>
<div class="c-header-inner__group-2">
<a class="c-header-inner__nav-link-3" href="#">
<span class="c-header-inner__group">
<span class="c-header-inner__icon" aria-hidden="true"></span>
</span>
<span class="c-header-inner__group-3">
<span class="c-header-inner__group-4"></span>
<span class="c-header-inner__text-2">l</span>
</span>
</a>
</div>
</ul>
</div>
</nav>
</div>
.c-header-inner-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-header-inner {
display: block;
border-spacing: 0px;
height: 48px;
min-width: 320px;
max-height: 44px;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
z-index: 9999;
background-color: #FAFAFCCC;
color: #1D1D1F;
backdrop-filter: saturate(1.8) blur(20px);
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-header-inner__inner {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 1024px;
padding-right: 22px;
padding-left: 22px;
margin-right: auto;
margin-left: auto;
}
.c-header-inner__nav {
display: flex;
justify-content: space-between;
height: 44px;
padding: 0px;
margin: 0px -8px;
cursor: default;
list-style-type: none;
}
.c-header-inner__nav-item {
display: block;
box-sizing: border-box;
height: 44px;
}
.c-header-inner__nav-link {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-weight: 600;
line-height: 21.0012px;
text-decoration-line: none;
white-space: nowrap;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-header-inner__group {
display: flex;
}
.c-header-inner__icon {
display: block;
flex-shrink: 0;
width: 14px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-header-inner__text {
display: flex;
align-items: center;
width: 1px;
height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
margin-left: 4px;
}
.c-header-inner__nav-link-2 {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-size: 12px;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-header-inner__icon-2 {
display: block;
flex-shrink: 0;
width: 15px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-header-inner__group-2 {
display: block;
position: relative;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner__nav-link-3 {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
position: relative;
z-index: 1;
color: #000000CC;
cursor: pointer;
font-size: 12px;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-header-inner__group-3 {
display: block;
box-sizing: border-box;
width: 13px;
height: 13px;
position: absolute;
right: 11px;
bottom: 11px;
left: 15px;
z-index: 1;
color: #FFFFFF;
transform: matrix(0, 0, 0, 0, 0, 0);
font-size: 10px;
line-height: 13px;
letter-spacing: -0.08px;
text-align: center;
}
.c-header-inner__group-3::before {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner__group-3::after {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
}
.c-header-inner__group-4 {
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0px;
right: 6.5px;
background-color: #000000;
transform: matrix(0, 0, 0, 1, 0, 0);
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner__text-2 {
display: block;
position: relative;
z-index: 2;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner__nav-link:hover {
color: #000000;
}
.c-header-inner__nav-link:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner__nav-link-2:hover {
color: #000000;
}
.c-header-inner__nav-link-2:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner__nav-link-3:hover {
color: #000000;
}
.c-header-inner__nav-link-3:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
Mobile anatomy
header-inner-mobile: the component root, a <nav> (.c-header-inner-mobile)header-inner-mobile-inner: inner flex row (.c-header-inner-mobile__inner)header-inner-mobile-nav: inner flex row (.c-header-inner-mobile__nav)header-inner-mobile-nav-item: inner group (.c-header-inner-mobile__nav-item)header-inner-mobile-nav-link: link (.c-header-inner-mobile__nav-link)header-inner-mobile-group: inner flex row (.c-header-inner-mobile__group, 3 instances)header-inner-mobile-icon: icon placeholder, 17x48px (.c-header-inner-mobile__icon, 3 instances)header-inner-mobile-text: label text, 5 characters (.c-header-inner-mobile__text)header-inner-mobile-nav-item-2: inner group (.c-header-inner-mobile__nav-item-2)header-inner-mobile-nav-link-2: link (.c-header-inner-mobile__nav-link-2)header-inner-mobile-group-2: inner block (.c-header-inner-mobile__group-2)header-inner-mobile-nav-link-3: link (.c-header-inner-mobile__nav-link-3)header-inner-mobile-group-3: inner group (.c-header-inner-mobile__group-3)header-inner-mobile-group-4: inner group (.c-header-inner-mobile__group-4)header-inner-mobile-text-2: label text, 1 characters (.c-header-inner-mobile__text-2)header-inner-mobile-group-5: inner block (.c-header-inner-mobile__group-5)header-inner-mobile-menu-toggle: button (.c-header-inner-mobile__menu-toggle)header-inner-mobile-menu-toggle-icon: icon placeholder, 18px (.c-header-inner-mobile__menu-toggle-icon)Mobile recipe
<div class="c-header-inner-mobile-scope">
<nav class="c-header-inner-mobile">
<div class="c-header-inner-mobile__inner">
<ul class="c-header-inner-mobile__nav">
<li class="c-header-inner-mobile__nav-item">
<a class="c-header-inner-mobile__nav-link" href="#">
<span class="c-header-inner-mobile__group">
<span class="c-header-inner-mobile__icon" aria-hidden="true"></span>
</span>
<span class="c-header-inner-mobile__text">lorem</span>
</a>
</li>
<li class="c-header-inner-mobile__nav-item-2">
<a class="c-header-inner-mobile__nav-link-2" href="#">
<span class="c-header-inner-mobile__group">
<span class="c-header-inner-mobile__icon" aria-hidden="true"></span>
</span>
</a>
</li>
<div class="c-header-inner-mobile__group-2">
<a class="c-header-inner-mobile__nav-link-3" href="#">
<span class="c-header-inner-mobile__group">
<span class="c-header-inner-mobile__icon" aria-hidden="true"></span>
</span>
<span class="c-header-inner-mobile__group-3">
<span class="c-header-inner-mobile__group-4"></span>
<span class="c-header-inner-mobile__text-2">l</span>
</span>
</a>
</div>
</ul>
<div class="c-header-inner-mobile__group-5">
<button class="c-header-inner-mobile__menu-toggle" type="button">
<span class="c-header-inner-mobile__menu-toggle-icon" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
</div>
.c-header-inner-mobile-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-header-inner-mobile {
display: block;
border-spacing: 0px;
height: 48px;
min-width: 320px;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
z-index: 9999;
color: #1D1D1F;
backdrop-filter: saturate(1.8) blur(20px);
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-header-inner-mobile__inner {
display: flex;
box-sizing: border-box;
width: 100%;
height: 100%;
max-width: 1024px;
position: absolute;
top: 0px;
z-index: 2;
background-color: #FAFAFCCC;
transition: background 0.422s cubic-bezier(0.4, 0, 0.6, 1);
margin-right: auto;
margin-left: auto;
}
.c-header-inner-mobile__nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
flex-basis: 0%;
box-sizing: border-box;
padding: 0px 48px 0px 0px;
margin: 0px;
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 1;
cursor: default;
list-style-type: none;
}
.c-header-inner-mobile__nav-item {
display: block;
flex-grow: 1;
box-sizing: border-box;
width: 48px;
height: 100%;
text-align: left;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
.c-header-inner-mobile__nav-link {
display: flex;
justify-content: center;
align-items: center;
width: max-content;
height: 48px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 23px;
letter-spacing: 0.228px;
text-decoration-line: none;
white-space: nowrap;
padding-right: 16px;
padding-left: 16px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner-mobile__group {
display: flex;
}
.c-header-inner-mobile__icon {
display: block;
flex-shrink: 0;
width: 17px;
height: 48px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-header-inner-mobile__text {
display: flex;
align-items: center;
width: 1px;
height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
margin-left: 4px;
}
.c-header-inner-mobile__nav-item-2 {
display: list-item;
box-sizing: border-box;
width: 48px;
height: 100%;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
.c-header-inner-mobile__nav-link-2 {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.196px;
text-decoration-line: none;
white-space: nowrap;
padding-right: 8px;
padding-left: 8px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner-mobile__group-2 {
display: block;
position: relative;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner-mobile__nav-link-3 {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
position: relative;
z-index: 1;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.196px;
text-decoration-line: none;
white-space: nowrap;
padding-right: 8px;
padding-left: 8px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner-mobile__group-3 {
display: block;
box-sizing: border-box;
width: 13px;
height: 13px;
position: absolute;
right: 11px;
bottom: 13px;
left: 22px;
z-index: 1;
color: #FFFFFF;
transform: matrix(0, 0, 0, 0, 0, 0);
font-size: 10px;
line-height: 13px;
letter-spacing: -0.08px;
text-align: center;
}
.c-header-inner-mobile__group-3::before {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner-mobile__group-3::after {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
}
.c-header-inner-mobile__group-4 {
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0px;
right: 6.5px;
background-color: #000000;
transform: matrix(0, 0, 0, 1, 0, 0);
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner-mobile__text-2 {
display: block;
position: relative;
z-index: 2;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner-mobile__group-5 {
display: block;
width: 48px;
position: absolute;
right: 0px;
z-index: 3;
}
.c-header-inner-mobile__menu-toggle {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
padding: 0px;
position: relative;
background-color: transparent;
color: #000000;
border: 0;
opacity: 0.8;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: normal;
text-transform: none;
text-align: center;
transition-duration: 0.32s, 0.32s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1);
transition-property: opacity, color;
}
.c-header-inner-mobile__menu-toggle-icon {
display: block;
flex-shrink: 0;
width: 18px;
height: 18px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-header-inner-mobile__nav-link:hover {
color: #000000;
}
.c-header-inner-mobile__nav-link:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner-mobile__nav-link-2:hover {
color: #000000;
}
.c-header-inner-mobile__nav-link-2:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner-mobile__nav-link-3:hover {
color: #000000;
}
.c-header-inner-mobile__nav-link-3:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner-mobile__menu-toggle:hover {
opacity: 1;
}
.c-header-inner-mobile__menu-toggle:focus {
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
header-inner-nav-link hover (header-inner-nav-link-hover): color #000000header-inner-nav-link focus (header-inner-nav-link-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-nav-link-2 hover (header-inner-nav-link-2-hover): color #000000header-inner-nav-link-2 focus (header-inner-nav-link-2-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-nav-link-3 hover (header-inner-nav-link-3-hover): color #000000header-inner-nav-link-3 focus (header-inner-nav-link-3-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-mobile-nav-link hover (header-inner-mobile-nav-link-hover): color #000000header-inner-mobile-nav-link focus (header-inner-mobile-nav-link-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-mobile-nav-link-2 hover (header-inner-mobile-nav-link-2-hover): color #000000header-inner-mobile-nav-link-2 focus (header-inner-mobile-nav-link-2-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-mobile-nav-link-3 hover (header-inner-mobile-nav-link-3-hover): color #000000header-inner-mobile-nav-link-3 focus (header-inner-mobile-nav-link-3-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-mobile-menu-toggle hover: opacity 1header-inner-mobile-menu-toggle focus: outline 2px solid #0071E3, outline-offset -7pxHeader (inner, 2)
Verification: desktop flagged, the header-inner-2-group x did not reproduce the measured 1146px after 2 correction attempts; mobile flagged, the header-inner-2-mobile-nav-link-2 x did not reproduce the measured 246px after 2 correction attempts.
Variant observed on https://www.apple.com/us/shop/goto/buy_mac.
Anatomy
header-inner-2: the component root, a <nav> (.c-header-inner-2)header-inner-2-inner: inner block (.c-header-inner-2__inner)header-inner-2-nav: inner flex row (.c-header-inner-2__nav)header-inner-2-nav-item: inner group (.c-header-inner-2__nav-item)header-inner-2-nav-link: link (.c-header-inner-2__nav-link)header-inner-2-group: inner flex row (.c-header-inner-2__group, 3 instances)header-inner-2-icon: icon placeholder, 14x44px (.c-header-inner-2__icon, 2 instances)header-inner-2-text: label text, 5 characters (.c-header-inner-2__text)header-inner-2-nav-link-2: link (.c-header-inner-2__nav-link-2)header-inner-2-icon-2: icon placeholder, 15x44px (.c-header-inner-2__icon-2)header-inner-2-group-2: inner block (.c-header-inner-2__group-2)header-inner-2-nav-link-3: link (.c-header-inner-2__nav-link-3)header-inner-2-group-3: inner group (.c-header-inner-2__group-3)header-inner-2-group-4: inner group (.c-header-inner-2__group-4)header-inner-2-text-2: label text, 1 characters (.c-header-inner-2__text-2)Desktop recipe
<div class="c-header-inner-2-scope">
<nav class="c-header-inner-2">
<div class="c-header-inner-2__inner">
<ul class="c-header-inner-2__nav">
<li class="c-header-inner-2__nav-item">
<a class="c-header-inner-2__nav-link" href="#">
<span class="c-header-inner-2__group">
<span class="c-header-inner-2__icon" aria-hidden="true"></span>
</span>
<span class="c-header-inner-2__text">lorem</span>
</a>
</li>
<a class="c-header-inner-2__nav-link-2" href="#">
<span class="c-header-inner-2__group">
<span class="c-header-inner-2__icon-2" aria-hidden="true"></span>
</span>
</a>
<div class="c-header-inner-2__group-2">
<a class="c-header-inner-2__nav-link-3" href="#">
<span class="c-header-inner-2__group">
<span class="c-header-inner-2__icon" aria-hidden="true"></span>
</span>
<span class="c-header-inner-2__group-3">
<span class="c-header-inner-2__group-4"></span>
<span class="c-header-inner-2__text-2">l</span>
</span>
</a>
</div>
</ul>
</div>
</nav>
</div>
.c-header-inner-2-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-header-inner-2 {
display: block;
border-spacing: 0px;
height: 48px;
min-width: 320px;
max-height: 44px;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
z-index: 9999;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-header-inner-2__inner {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 1024px;
padding-right: 22px;
padding-left: 22px;
margin-right: auto;
margin-left: auto;
}
.c-header-inner-2__nav {
display: flex;
justify-content: space-between;
height: 44px;
padding: 0px;
margin: 0px -8px;
cursor: default;
list-style-type: none;
}
.c-header-inner-2__nav-item {
display: block;
box-sizing: border-box;
height: 44px;
}
.c-header-inner-2__nav-link {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-weight: 600;
line-height: 21.0012px;
text-decoration-line: none;
white-space: nowrap;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-header-inner-2__group {
display: flex;
}
.c-header-inner-2__icon {
display: block;
flex-shrink: 0;
width: 14px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-header-inner-2__text {
display: flex;
align-items: center;
width: 1px;
height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
margin-left: 4px;
}
.c-header-inner-2__nav-link-2 {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-size: 12px;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-header-inner-2__icon-2 {
display: block;
flex-shrink: 0;
width: 15px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-header-inner-2__group-2 {
display: block;
position: relative;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner-2__nav-link-3 {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
position: relative;
z-index: 1;
color: #000000CC;
cursor: pointer;
font-size: 12px;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-header-inner-2__group-3 {
display: block;
box-sizing: border-box;
width: 13px;
height: 13px;
position: absolute;
right: 11px;
bottom: 11px;
left: 15px;
z-index: 1;
color: #FFFFFF;
transform: matrix(0, 0, 0, 0, 0, 0);
font-size: 10px;
line-height: 13px;
letter-spacing: -0.08px;
text-align: center;
}
.c-header-inner-2__group-3::before {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner-2__group-3::after {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
}
.c-header-inner-2__group-4 {
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0px;
right: 6.5px;
background-color: #000000;
transform: matrix(0, 0, 0, 1, 0, 0);
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner-2__text-2 {
display: block;
position: relative;
z-index: 2;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner-2__nav-link:hover {
color: #000000;
}
.c-header-inner-2__nav-link:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner-2__nav-link-2:hover {
color: #000000;
}
.c-header-inner-2__nav-link-2:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner-2__nav-link-3:hover {
color: #000000;
}
.c-header-inner-2__nav-link-3:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
Mobile anatomy
header-inner-2-mobile: the component root, a <nav> (.c-header-inner-2-mobile)header-inner-2-mobile-inner: inner flex row (.c-header-inner-2-mobile__inner)header-inner-2-mobile-nav: inner flex row (.c-header-inner-2-mobile__nav)header-inner-2-mobile-nav-item: inner group (.c-header-inner-2-mobile__nav-item)header-inner-2-mobile-nav-link: link (.c-header-inner-2-mobile__nav-link)header-inner-2-mobile-group: inner flex row (.c-header-inner-2-mobile__group, 3 instances)header-inner-2-mobile-icon: icon placeholder, 17x48px (.c-header-inner-2-mobile__icon, 3 instances)header-inner-2-mobile-text: label text, 5 characters (.c-header-inner-2-mobile__text)header-inner-2-mobile-nav-item-2: inner group (.c-header-inner-2-mobile__nav-item-2)header-inner-2-mobile-nav-link-2: link (.c-header-inner-2-mobile__nav-link-2)header-inner-2-mobile-group-2: inner block (.c-header-inner-2-mobile__group-2)header-inner-2-mobile-nav-link-3: link (.c-header-inner-2-mobile__nav-link-3)header-inner-2-mobile-group-3: inner group (.c-header-inner-2-mobile__group-3)header-inner-2-mobile-group-4: inner group (.c-header-inner-2-mobile__group-4)header-inner-2-mobile-text-2: label text, 1 characters (.c-header-inner-2-mobile__text-2)header-inner-2-mobile-group-5: inner block (.c-header-inner-2-mobile__group-5)header-inner-2-mobile-menu-toggle: button (.c-header-inner-2-mobile__menu-toggle)header-inner-2-mobile-menu-toggle-icon: icon placeholder, 18px (.c-header-inner-2-mobile__menu-toggle-icon)Mobile recipe
<div class="c-header-inner-2-mobile-scope">
<nav class="c-header-inner-2-mobile">
<div class="c-header-inner-2-mobile__inner">
<ul class="c-header-inner-2-mobile__nav">
<li class="c-header-inner-2-mobile__nav-item">
<a class="c-header-inner-2-mobile__nav-link" href="#">
<span class="c-header-inner-2-mobile__group">
<span class="c-header-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
<span class="c-header-inner-2-mobile__text">lorem</span>
</a>
</li>
<li class="c-header-inner-2-mobile__nav-item-2">
<a class="c-header-inner-2-mobile__nav-link-2" href="#">
<span class="c-header-inner-2-mobile__group">
<span class="c-header-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</a>
</li>
<div class="c-header-inner-2-mobile__group-2">
<a class="c-header-inner-2-mobile__nav-link-3" href="#">
<span class="c-header-inner-2-mobile__group">
<span class="c-header-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
<span class="c-header-inner-2-mobile__group-3">
<span class="c-header-inner-2-mobile__group-4"></span>
<span class="c-header-inner-2-mobile__text-2">l</span>
</span>
</a>
</div>
</ul>
<div class="c-header-inner-2-mobile__group-5">
<button class="c-header-inner-2-mobile__menu-toggle" type="button">
<span class="c-header-inner-2-mobile__menu-toggle-icon" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
</div>
.c-header-inner-2-mobile-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-header-inner-2-mobile {
display: block;
border-spacing: 0px;
height: 48px;
min-width: 320px;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
z-index: 9999;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-header-inner-2-mobile__inner {
display: flex;
box-sizing: border-box;
width: 100%;
height: 100%;
max-width: 1024px;
position: absolute;
top: 0px;
z-index: 2;
transition: background 0.422s cubic-bezier(0.4, 0, 0.6, 1);
margin-right: auto;
margin-left: auto;
}
.c-header-inner-2-mobile__nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
flex-basis: 0%;
box-sizing: border-box;
padding: 0px 48px 0px 0px;
margin: 0px;
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 1;
cursor: default;
list-style-type: none;
}
.c-header-inner-2-mobile__nav-item {
display: block;
flex-grow: 1;
box-sizing: border-box;
width: 48px;
height: 100%;
text-align: left;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
.c-header-inner-2-mobile__nav-link {
display: flex;
justify-content: center;
align-items: center;
width: max-content;
height: 48px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 23px;
letter-spacing: 0.228px;
text-decoration-line: none;
white-space: nowrap;
padding-right: 16px;
padding-left: 16px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner-2-mobile__group {
display: flex;
}
.c-header-inner-2-mobile__icon {
display: block;
flex-shrink: 0;
width: 17px;
height: 48px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-header-inner-2-mobile__text {
display: flex;
align-items: center;
width: 1px;
height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
margin-left: 4px;
}
.c-header-inner-2-mobile__nav-item-2 {
display: list-item;
box-sizing: border-box;
width: 48px;
height: 100%;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
.c-header-inner-2-mobile__nav-link-2 {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.196px;
text-decoration-line: none;
white-space: nowrap;
padding-right: 8px;
padding-left: 8px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner-2-mobile__group-2 {
display: block;
position: relative;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner-2-mobile__nav-link-3 {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
position: relative;
z-index: 1;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.196px;
text-decoration-line: none;
white-space: nowrap;
padding-right: 8px;
padding-left: 8px;
transition-duration: 0.24s, 0.24s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
transition-property: opacity, visibility;
}
.c-header-inner-2-mobile__group-3 {
display: block;
box-sizing: border-box;
width: 13px;
height: 13px;
position: absolute;
right: 11px;
bottom: 13px;
left: 22px;
z-index: 1;
color: #FFFFFF;
transform: matrix(0, 0, 0, 0, 0, 0);
font-size: 10px;
line-height: 13px;
letter-spacing: -0.08px;
text-align: center;
}
.c-header-inner-2-mobile__group-3::before {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner-2-mobile__group-3::after {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
}
.c-header-inner-2-mobile__group-4 {
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0px;
right: 6.5px;
background-color: #000000;
transform: matrix(0, 0, 0, 1, 0, 0);
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner-2-mobile__text-2 {
display: block;
position: relative;
z-index: 2;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-header-inner-2-mobile__group-5 {
display: block;
width: 48px;
position: absolute;
right: 0px;
z-index: 3;
}
.c-header-inner-2-mobile__menu-toggle {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
padding: 0px;
position: relative;
background-color: transparent;
color: #000000;
border: 0;
opacity: 0.8;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: normal;
text-transform: none;
text-align: center;
transition-duration: 0.32s, 0.32s;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1);
transition-property: opacity, color;
}
.c-header-inner-2-mobile__menu-toggle-icon {
display: block;
flex-shrink: 0;
width: 18px;
height: 18px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-header-inner-2-mobile__nav-link:hover {
color: #000000;
}
.c-header-inner-2-mobile__nav-link:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner-2-mobile__nav-link-2:hover {
color: #000000;
}
.c-header-inner-2-mobile__nav-link-2:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner-2-mobile__nav-link-3:hover {
color: #000000;
}
.c-header-inner-2-mobile__nav-link-3:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
.c-header-inner-2-mobile__menu-toggle:hover {
opacity: 1;
}
.c-header-inner-2-mobile__menu-toggle:focus {
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
header-inner-2-nav-link hover (header-inner-2-nav-link-hover): color #000000header-inner-2-nav-link focus (header-inner-2-nav-link-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-2-nav-link-2 hover (header-inner-2-nav-link-2-hover): color #000000header-inner-2-nav-link-2 focus (header-inner-2-nav-link-2-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-2-nav-link-3 hover (header-inner-2-nav-link-3-hover): color #000000header-inner-2-nav-link-3 focus (header-inner-2-nav-link-3-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-2-mobile-nav-link hover (header-inner-2-mobile-nav-link-hover): color #000000header-inner-2-mobile-nav-link focus (header-inner-2-mobile-nav-link-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-2-mobile-nav-link-2 hover (header-inner-2-mobile-nav-link-2-hover): color #000000header-inner-2-mobile-nav-link-2 focus (header-inner-2-mobile-nav-link-2-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-2-mobile-nav-link-3 hover (header-inner-2-mobile-nav-link-3-hover): color #000000header-inner-2-mobile-nav-link-3 focus (header-inner-2-mobile-nav-link-3-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxheader-inner-2-mobile-menu-toggle hover: opacity 1header-inner-2-mobile-menu-toggle focus: outline 2px solid #0071E3, outline-offset -7pxHeader (inner, 3)
Verification: desktop flagged, the header-inner-3-group-4 y did not reproduce the measured -3px after 2 correction attempts; mobile flagged, the render matched 94% of the original pixels, below the 96% required on header-inner-3-mobile-logo focus after 2 correction attempts.
Variant observed on https://www.apple.com/us/shop/goto/trade_in.
Anatomy
header-inner-3: the component root, a <nav> (.c-header-inner-3)header-inner-3-group: inner block (.c-header-inner-3__group)header-inner-3-group-2: inner block (.c-header-inner-3__group-2)header-inner-3-inner: inner block (.c-header-inner-3__inner)header-inner-3-group-3: inner block (.c-header-inner-3__group-3)header-inner-3-logo: link, 14-character label (.c-header-inner-3__logo)header-inner-3-group-4: inner block (.c-header-inner-3__group-4)header-inner-3-group-5: inner block (.c-header-inner-3__group-5, 2 instances)header-inner-3-group-6: inner block (.c-header-inner-3__group-6)header-inner-3-cta: the button-primary-5 button, 24-character label (.c-header-inner-3__cta)Desktop recipe
<div class="c-header-inner-3-scope">
<nav class="c-header-inner-3">
<div class="c-header-inner-3__group">
<div class="c-header-inner-3__group-2"></div>
<div class="c-header-inner-3__inner">
<div class="c-header-inner-3__group-3">
<a class="c-header-inner-3__logo" href="#">lorem ipsum do</a>
</div>
<div class="c-header-inner-3__group-4">
<div class="c-header-inner-3__group-5"></div>
<div class="c-header-inner-3__group-5">
<div class="c-header-inner-3__group-6">
<button class="c-header-inner-3__cta" type="button">lorem ipsum dolor sit am</button>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
.c-header-inner-3-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-header-inner-3 {
display: block;
border-spacing: 0px;
height: 52px;
min-width: 1024px;
position: sticky;
top: 0px;
left: 0px;
z-index: 9997;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-header-inner-3__group {
display: block;
width: 100%;
min-height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.c-header-inner-3__group-2 {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background-color: #FAFAFCCC;
backdrop-filter: saturate(1.8) blur(20px);
transition: background 0.24s cubic-bezier(0.28, 0.11, 0.32, 1);
padding-top: 44px;
margin-top: -44px;
}
.c-header-inner-3__group-2::after {
content: "";
display: block;
width: 1440px;
height: 1px;
position: absolute;
top: 95px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 1;
background-color: #00000029;
}
.c-header-inner-3__inner {
display: block;
height: 52px;
max-width: 980px;
position: relative;
z-index: 2;
padding-right: 22px;
padding-left: 22px;
margin-right: auto;
margin-left: auto;
}
.c-header-inner-3__inner::before {
content: "";
display: table;
}
.c-header-inner-3__inner::after {
content: "";
display: table;
}
.c-header-inner-3__group-3 {
display: block;
min-height: 52px;
color: #000000;
cursor: default;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.231px;
white-space: nowrap;
transition: color 0.24s cubic-bezier(0.28, 0.11, 0.32, 1);
margin-top: 14px;
margin-bottom: -14px;
}
.c-header-inner-3__logo {
display: flex;
flex-direction: column-reverse;
color: #000000;
opacity: 0.88;
cursor: pointer;
text-decoration-line: none;
transition: color 0.24s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.c-header-inner-3__group-4 {
display: block;
font-size: 12px;
line-height: 12px;
letter-spacing: -0.12px;
margin-top: -3px;
}
.c-header-inner-3__group-5 {
display: block;
padding-top: 18px;
}
.c-header-inner-3__group-6 {
display: block;
margin-left: 24px;
}
.c-header-inner-3__cta {
display: inline-block;
min-width: 23px;
padding: 3px 10px;
background-color: #0071E3;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
text-transform: none;
text-align: center;
white-space: nowrap;
margin-top: -1px;
}
.c-header-inner-3__logo:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-header-inner-3__cta:hover {
background-color: #0076DF;
}
.c-header-inner-3__cta:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
Mobile anatomy
header-inner-3-mobile: the component root, a <nav> (.c-header-inner-3-mobile)header-inner-3-mobile-group: inner block (.c-header-inner-3-mobile__group)header-inner-3-mobile-group-2: inner block (.c-header-inner-3-mobile__group-2)header-inner-3-mobile-inner: inner block (.c-header-inner-3-mobile__inner)header-inner-3-mobile-group-3: inner block (.c-header-inner-3-mobile__group-3)header-inner-3-mobile-logo: link, 14-character label (.c-header-inner-3-mobile__logo)header-inner-3-mobile-group-4: inner block (.c-header-inner-3-mobile__group-4)header-inner-3-mobile-group-5: inner block (.c-header-inner-3-mobile__group-5)header-inner-3-mobile-group-6: inner block (.c-header-inner-3-mobile__group-6)header-inner-3-mobile-cta: button, 24-character label (.c-header-inner-3-mobile__cta)Mobile recipe
<div class="c-header-inner-3-mobile-scope">
<nav class="c-header-inner-3-mobile">
<div class="c-header-inner-3-mobile__group">
<div class="c-header-inner-3-mobile__group-2"></div>
<div class="c-header-inner-3-mobile__inner">
<div class="c-header-inner-3-mobile__group-3">
<a class="c-header-inner-3-mobile__logo" href="#">lorem ipsum do</a>
</div>
<div class="c-header-inner-3-mobile__group-4">
<div class="c-header-inner-3-mobile__group-5">
<div class="c-header-inner-3-mobile__group-6">
<button class="c-header-inner-3-mobile__cta" type="button">lorem ipsum dolor sit am</button>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
.c-header-inner-3-mobile-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-header-inner-3-mobile {
display: block;
border-spacing: 0px;
width: 390px;
height: 48px;
min-width: 320px;
position: sticky;
top: 0px;
left: 0px;
z-index: 9997;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-header-inner-3-mobile__group {
display: block;
width: 100%;
min-height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.c-header-inner-3-mobile__group-2 {
display: block;
width: 100%;
height: 100%;
min-height: 48px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background-color: #FAFAFCCC;
backdrop-filter: saturate(1.8) blur(20px);
transition: background 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-top: 48px;
margin-top: -48px;
}
.c-header-inner-3-mobile__group-2::after {
content: "";
display: block;
width: 390px;
height: 1px;
position: absolute;
top: 95px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 1;
background-color: #00000029;
transition-duration: 0.32s;
transition-timing-function: ease-out;
transition-property: margin-inline-start, width, inset-inline-start;
}
.c-header-inner-3-mobile__inner {
display: block;
height: 48px;
max-width: 980px;
position: relative;
z-index: 2;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
}
.c-header-inner-3-mobile__inner::before {
content: "";
display: table;
}
.c-header-inner-3-mobile__inner::after {
content: "";
display: table;
}
.c-header-inner-3-mobile__group-3 {
display: block;
min-height: 48px;
color: #000000;
cursor: default;
font-weight: 600;
line-height: 24.0014px;
white-space: nowrap;
transition: color 0.24s cubic-bezier(0.28, 0.11, 0.32, 1);
margin-top: 12px;
margin-bottom: -12px;
}
.c-header-inner-3-mobile__logo {
display: flex;
flex-direction: column-reverse;
color: #000000;
opacity: 0.88;
cursor: pointer;
text-decoration-line: none;
transition: color 0.24s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.c-header-inner-3-mobile__group-4 {
display: block;
width: 100%;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.28px;
}
.c-header-inner-3-mobile__group-5 {
display: block;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
padding-top: 16px;
padding-right: 16px;
padding-left: 16px;
}
.c-header-inner-3-mobile__group-6 {
display: block;
margin-top: -3px;
margin-left: 24px;
}
.c-header-inner-3-mobile__cta {
display: inline-block;
min-width: 23px;
padding: 3px 10px;
background-color: #0071E3;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 980px;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
text-transform: none;
text-align: center;
white-space: nowrap;
margin-top: -1px;
}
.c-header-inner-3-mobile__logo:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-header-inner-3-mobile__cta:hover {
background-color: #0076DF;
}
.c-header-inner-3-mobile__cta:focus {
outline: 2px solid #0071E3;
outline-offset: 3px;
}
States
header-inner-3-logo focus: outline 2px solid #0071E3, outline-offset 1pxheader-inner-3-cta hover (header-inner-3-cta-hover): background-color #0076DFheader-inner-3-cta focus: outline 2px solid #0071E3, outline-offset 3pxheader-inner-3-mobile-logo focus: outline 2px solid #0071E3, outline-offset 1pxheader-inner-3-mobile-cta hover (header-inner-3-mobile-cta-hover): background-color #0076DFheader-inner-3-mobile-cta focus: outline 2px solid #0071E3, outline-offset 3pxFooter (landing)
Verification: desktop flagged, the footer-landing-inner height did not reproduce the measured 996px after 2 correction attempts; mobile flagged, the footer-landing-mobile height did not reproduce the measured 1433px after 2 correction attempts.
Variant observed on https://www.apple.com/.
Anatomy
footer-landing: the component root, a <footer> (.c-footer-landing)footer-landing-inner: inner block (.c-footer-landing__inner), content not capturedfooter-landing-heading: heading, 12 characters (.c-footer-landing__heading)footer-landing-group: inner group (.c-footer-landing__group)footer-landing-list: inner group (.c-footer-landing__list)footer-landing-item: inner group (.c-footer-landing__item, 6 instances)footer-landing-text: label text, 207 characters (.c-footer-landing__text, 4 instances)footer-landing-link: link, 20-character label (.c-footer-landing__link, 2 instances)footer-landing-list-2: inner group (.c-footer-landing__list-2)footer-landing-group-2: inner group (.c-footer-landing__group-2, 2 instances)footer-landing-text-2: label text, 370 characters (.c-footer-landing__text-2)footer-landing-text-3: label text, 203 characters (.c-footer-landing__text-3, 2 instances)footer-landing-nav: inner flex row (.c-footer-landing__nav), content not capturedfooter-landing-group-3: inner block (.c-footer-landing__group-3, 3 instances)footer-landing-group-4: inner block (.c-footer-landing__group-4, 3 instances)footer-landing-heading-2: heading, 0 characters (.c-footer-landing__heading-2, 5 instances)footer-landing-text-4: label text, 14 characters (.c-footer-landing__text-4, 5 instances)footer-landing-list-3: inner group (.c-footer-landing__list-3, 5 instances), content not capturedfooter-landing-nav-item: inner group (.c-footer-landing__nav-item, 35 instances), content not capturedfooter-landing-nav-link: link, 5-character label (.c-footer-landing__nav-link, 38 instances)footer-landing-nav-item-2: inner group (.c-footer-landing__nav-item-2, 4 instances)footer-landing-group-5: inner block (.c-footer-landing__group-5, 2 instances)Desktop recipe
<div class="c-footer-landing-scope">
<footer class="c-footer-landing">
<div class="c-footer-landing__inner">
<h2 class="c-footer-landing__heading">lorem ipsum</h2>
<section class="c-footer-landing__group">
<ol class="c-footer-landing__list">
<li class="c-footer-landing__item">
<span class="c-footer-landing__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<a class="c-footer-landing__link" href="#">lorem ipsum dolor si</a>
<span class="c-footer-landing__text">l</span>
</li>
<li class="c-footer-landing__item">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</li>
</ol>
<ul class="c-footer-landing__list-2">
<li class="c-footer-landing__item">
<span class="c-footer-landing__group-2">
<p class="c-footer-landing__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do</p>
<p class="c-footer-landing__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing</p>
<p class="c-footer-landing__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectet</p>
</span>
</li>
<li class="c-footer-landing__item">
<span class="c-footer-landing__group-2">
<span class="c-footer-landing__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do</span>
<a class="c-footer-landing__link" href="#">lorem ipsum dolor sit amet co</a>
<span class="c-footer-landing__text">l</span>
</span>
</li>
<li class="c-footer-landing__item">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsu</li>
<li class="c-footer-landing__item">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing</li>
</ul>
</section>
<nav class="c-footer-landing__nav">
<div class="c-footer-landing__group-3">
<div class="c-footer-landing__group-4">
<h3 class="c-footer-landing__heading-2">
<span class="c-footer-landing__text-4">lorem ipsum do</span>
</h3>
<ul class="c-footer-landing__list-3">
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lor</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lore</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem i</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ips</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum</a>
</li>
<li class="c-footer-landing__nav-item-2">
<a class="c-footer-landing__nav-link" href="#">lorem ipsu</a>
</li>
</ul>
</div>
<div class="c-footer-landing__group-5">
<h3 class="c-footer-landing__heading-2">
<span class="c-footer-landing__text-4">lorem ipsum</span>
</h3>
<ul class="c-footer-landing__list-3">
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsu</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ips</a>
</li>
<li class="c-footer-landing__nav-item-2">
<a class="c-footer-landing__nav-link" href="#">lorem ipsu</a>
</li>
</ul>
</div>
</div>
<div class="c-footer-landing__group-3">
<div class="c-footer-landing__group-4">
<h3 class="c-footer-landing__heading-2">
<span class="c-footer-landing__text-4">lorem i</span>
</h3>
<ul class="c-footer-landing__list-3">
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum dolor sit ame</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum dolor s</a>
</li>
<li class="c-footer-landing__nav-item-2">
<a class="c-footer-landing__nav-link" href="#">lorem ipsu</a>
</li>
</ul>
</div>
<div class="c-footer-landing__group-5">
<h3 class="c-footer-landing__heading-2">
<span class="c-footer-landing__text-4">lorem ipsum d</span>
</h3>
<ul class="c-footer-landing__list-3">
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ips</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ip</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum</a>
</li>
<li class="c-footer-landing__nav-item-2">
<a class="c-footer-landing__nav-link" href="#">lorem ips</a>
</li>
</ul>
</div>
</div>
<div class="c-footer-landing__group-3">
<div class="c-footer-landing__group-4">
<h3 class="c-footer-landing__heading-2">
<span class="c-footer-landing__text-4">lorem ipsum</span>
</h3>
<ul class="c-footer-landing__list-3">
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsu</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum dolor</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsu</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum dol</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum dolor sit</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum d</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ips</a>
</li>
<li class="c-footer-landing__nav-item">
<a class="c-footer-landing__nav-link" href="#">lorem ipsum dolor sit</a>
</li>
<li class="c-footer-landing__nav-item"></li>
</ul>
</div>
</div>
</nav>
</div>
</footer>
</div>
.c-footer-landing-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-landing {
display: block;
border-spacing: 0px;
min-width: 1024px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-landing__inner {
display: block;
max-width: 980px;
padding-right: 22px;
padding-left: 22px;
margin-right: auto;
margin-left: auto;
}
.c-footer-landing__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 12px;
font-weight: 400;
}
.c-footer-landing__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-landing__list {
display: block;
padding: 0px 17px;
margin: 0px;
list-style-type: decimal;
}
.c-footer-landing__item {
display: list-item;
padding-bottom: 9.6px;
}
.c-footer-landing__link {
display: inline;
color: #000000B8;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #000000B8;
}
.c-footer-landing__list-2 {
display: block;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.c-footer-landing__group-2 {
display: inline;
}
.c-footer-landing__text-2 {
display: block;
margin: 0px;
}
.c-footer-landing__text-3 {
display: block;
margin: 0px;
padding-top: 9.6px;
}
.c-footer-landing__nav {
display: flex;
padding-top: 20px;
}
.c-footer-landing__group-3 {
display: block;
flex-basis: 25%;
}
.c-footer-landing__group-4 {
display: block;
}
.c-footer-landing__heading-2 {
display: block;
margin: 0px;
color: #000000E0;
font-size: 12px;
font-weight: 400;
}
.c-footer-landing__text-4 {
display: block;
font-weight: 600;
margin-right: 20px;
margin-bottom: 9.6px;
}
.c-footer-landing__list-3 {
display: block;
padding: 0px;
margin: 0px 20px 0px 0px;
list-style-type: none;
}
.c-footer-landing__nav-item {
display: block;
margin-bottom: 9.6px;
}
.c-footer-landing__nav-link {
display: inline-block;
position: relative;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
padding-top: 4px;
padding-right: 20px;
padding-bottom: 4px;
margin-top: -4px;
margin-right: -20px;
margin-bottom: -4px;
}
.c-footer-landing__nav-item-2 {
display: block;
}
.c-footer-landing__group-5 {
display: block;
padding-top: 24px;
}
.c-footer-landing__link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-landing__nav-link:hover {
text-decoration-line: underline;
}
.c-footer-landing__nav-link:focus {
outline: none;
}
.c-footer-landing__nav-link:focus::before {
content: "";
display: block;
width: 28px;
height: 16px;
position: absolute;
top: 4px;
right: 20px;
bottom: 4px;
left: 0px;
outline: 2px solid #0071E3;
outline-offset: 1px;
}
Mobile anatomy
footer-landing-mobile: the component root, a <footer> (.c-footer-landing-mobile)footer-landing-mobile-inner: inner block (.c-footer-landing-mobile__inner)footer-landing-mobile-heading: heading, 12 characters (.c-footer-landing-mobile__heading)footer-landing-mobile-group: inner group (.c-footer-landing-mobile__group)footer-landing-mobile-list: inner group (.c-footer-landing-mobile__list)footer-landing-mobile-item: inner group (.c-footer-landing-mobile__item, 6 instances)footer-landing-mobile-text: label text, 207 characters (.c-footer-landing-mobile__text, 20 instances)footer-landing-mobile-link: link, 20-character label (.c-footer-landing-mobile__link, 2 instances)footer-landing-mobile-list-2: inner group (.c-footer-landing-mobile__list-2)footer-landing-mobile-group-2: inner group (.c-footer-landing-mobile__group-2, 2 instances)footer-landing-mobile-text-2: label text, 370 characters (.c-footer-landing-mobile__text-2)footer-landing-mobile-text-3: label text, 203 characters (.c-footer-landing-mobile__text-3, 2 instances)footer-landing-mobile-nav: inner flex column (.c-footer-landing-mobile__nav)footer-landing-mobile-group-3: inner block (.c-footer-landing-mobile__group-3, 5 instances)footer-landing-mobile-group-4: inner block (.c-footer-landing-mobile__group-4, 11 instances)footer-landing-mobile-heading-2: heading, 0 characters (.c-footer-landing-mobile__heading-2, 11 instances)footer-landing-mobile-button: button (.c-footer-landing-mobile__button, 11 instances)footer-landing-mobile-group-5: inner flex row (.c-footer-landing-mobile__group-5, 11 instances)footer-landing-mobile-icon: icon placeholder, 11x6px (.c-footer-landing-mobile__icon, 11 instances)footer-landing-mobile-group-6: inner group (.c-footer-landing-mobile__group-6)footer-landing-mobile-group-7: inner block (.c-footer-landing-mobile__group-7)footer-landing-mobile-link-2: link, 19-character label (.c-footer-landing-mobile__link-2, 3 instances)footer-landing-mobile-group-8: inner group (.c-footer-landing-mobile__group-8)footer-landing-mobile-group-9: inner block (.c-footer-landing-mobile__group-9)footer-landing-mobile-group-10: inner block (.c-footer-landing-mobile__group-10)footer-landing-mobile-link-3: link, 13-character label (.c-footer-landing-mobile__link-3)footer-landing-mobile-group-11: inner block (.c-footer-landing-mobile__group-11)footer-landing-mobile-text-4: label text, 48 characters (.c-footer-landing-mobile__text-4)footer-landing-mobile-list-3: inner group (.c-footer-landing-mobile__list-3)footer-landing-mobile-item-2: inner group (.c-footer-landing-mobile__item-2, 5 instances)footer-landing-mobile-link-4: link, 14-character label (.c-footer-landing-mobile__link-4, 5 instances)Mobile recipe
<div class="c-footer-landing-mobile-scope">
<footer class="c-footer-landing-mobile">
<div class="c-footer-landing-mobile__inner">
<h2 class="c-footer-landing-mobile__heading">lorem ipsum</h2>
<section class="c-footer-landing-mobile__group">
<ol class="c-footer-landing-mobile__list">
<li class="c-footer-landing-mobile__item">
<span class="c-footer-landing-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor si</a>
<span class="c-footer-landing-mobile__text">l</span>
</li>
<li class="c-footer-landing-mobile__item">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</li>
</ol>
<ul class="c-footer-landing-mobile__list-2">
<li class="c-footer-landing-mobile__item">
<span class="c-footer-landing-mobile__group-2">
<p class="c-footer-landing-mobile__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do</p>
<p class="c-footer-landing-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing</p>
<p class="c-footer-landing-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectet</p>
</span>
</li>
<li class="c-footer-landing-mobile__item">
<span class="c-footer-landing-mobile__group-2">
<span class="c-footer-landing-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do</span>
<a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor sit amet co</a>
<span class="c-footer-landing-mobile__text">l</span>
</span>
</li>
<li class="c-footer-landing-mobile__item">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsu</li>
<li class="c-footer-landing-mobile__item">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing</li>
</ul>
</section>
<nav class="c-footer-landing-mobile__nav">
<div class="c-footer-landing-mobile__group-3">
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum do</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-landing-mobile__group-3">
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem i</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum d</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-landing-mobile__group-3">
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-landing-mobile__group-3">
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum d</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum do</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum do</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-landing-mobile__group-3">
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-landing-mobile__group-4">
<h3 class="c-footer-landing-mobile__heading-2">
<button class="c-footer-landing-mobile__button" type="button">
<span class="c-footer-landing-mobile__text">lorem ipsum</span>
<span class="c-footer-landing-mobile__group-5">
<span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
</nav>
<section class="c-footer-landing-mobile__group-6">
<div class="c-footer-landing-mobile__group-7">
<span class="c-footer-landing-mobile__text">lorem ipsum dolor</span>
<a class="c-footer-landing-mobile__link-2" href="#">lorem ipsum dolor s</a>
<span class="c-footer-landing-mobile__text">lo</span>
<a class="c-footer-landing-mobile__link-2" href="#">lorem ipsum do</a>
<span class="c-footer-landing-mobile__text">lorem ips</span>
<span class="c-footer-landing-mobile__group-8">
<span class="c-footer-landing-mobile__text">lorem i</span>
<a class="c-footer-landing-mobile__link-2" href="#">lorem ipsum do</a>
<span class="c-footer-landing-mobile__text">lorem ipsum dolor</span>
</span>
</div>
<div class="c-footer-landing-mobile__group-9">
<div class="c-footer-landing-mobile__group-10">
<a class="c-footer-landing-mobile__link-3" href="#">lorem ipsum d</a>
</div>
<div class="c-footer-landing-mobile__group-11">
<div class="c-footer-landing-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscin</div>
<ul class="c-footer-landing-mobile__list-3">
<li class="c-footer-landing-mobile__item-2">
<a class="c-footer-landing-mobile__link-4" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-landing-mobile__item-2">
<a class="c-footer-landing-mobile__link-4" href="#">lorem ipsum</a>
</li>
<li class="c-footer-landing-mobile__item-2">
<a class="c-footer-landing-mobile__link-4" href="#">lorem ipsum dolor</a>
</li>
<li class="c-footer-landing-mobile__item-2">
<a class="c-footer-landing-mobile__link-4" href="#">lorem</a>
</li>
<li class="c-footer-landing-mobile__item-2">
<a class="c-footer-landing-mobile__link-4" href="#">lorem ip</a>
</li>
</ul>
</div>
</div>
</section>
</div>
</footer>
</div>
.c-footer-landing-mobile-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-landing-mobile {
display: block;
border-spacing: 0px;
min-width: 320px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-landing-mobile__inner {
display: block;
max-width: 980px;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
}
.c-footer-landing-mobile__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 12px;
font-weight: 400;
}
.c-footer-landing-mobile__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-landing-mobile__list {
display: block;
padding: 0px 17px;
margin: 0px;
list-style-type: decimal;
}
.c-footer-landing-mobile__item {
display: list-item;
padding-bottom: 9.6px;
}
.c-footer-landing-mobile__link {
display: inline;
color: #000000B8;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #000000B8;
}
.c-footer-landing-mobile__list-2 {
display: block;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.c-footer-landing-mobile__group-2 {
display: inline;
}
.c-footer-landing-mobile__text-2 {
display: block;
margin: 0px;
}
.c-footer-landing-mobile__text-3 {
display: block;
margin: 0px;
padding-top: 9.6px;
}
.c-footer-landing-mobile__nav {
display: flex;
flex-direction: column;
padding-top: 20px;
}
.c-footer-landing-mobile__group-3 {
display: block;
}
.c-footer-landing-mobile__group-4 {
display: block;
box-sizing: border-box;
width: calc(100% + 8px);
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
padding-right: 4px;
padding-bottom: 1px;
padding-left: 4px;
margin-left: -4px;
}
.c-footer-landing-mobile__group-4::after {
content: "";
display: block;
width: 358px;
height: 1px;
position: absolute;
top: 36px;
right: 4px;
bottom: 0px;
left: 4px;
z-index: 3;
background-color: #00000029;
}
.c-footer-landing-mobile__heading-2 {
display: block;
margin: 0px;
color: #000000E0;
font-size: 12px;
font-weight: 400;
}
.c-footer-landing-mobile__button {
display: block;
width: 100%;
padding: 10px 0px;
position: relative;
z-index: 2;
background-color: #F5F5F7;
color: #000000E0;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
text-transform: none;
text-align: start;
}
.c-footer-landing-mobile__button::after {
content: "";
display: block;
width: 366px;
height: 36px;
position: absolute;
top: 0px;
right: -4px;
bottom: 0px;
left: -4px;
}
.c-footer-landing-mobile__group-5 {
display: flex;
justify-content: center;
align-items: center;
width: 11px;
font-size: 14px;
line-height: 18.6672px;
transition: transform 0.3s ease;
margin-top: 5px;
}
.c-footer-landing-mobile__icon {
display: block;
flex-shrink: 0;
width: 11px;
height: 6px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-footer-landing-mobile__group-6 {
display: block;
padding-top: 17px;
padding-bottom: 9px;
}
.c-footer-landing-mobile__group-7 {
display: block;
max-height: 9999px;
padding-bottom: 8px;
margin-bottom: 8px;
}
.c-footer-landing-mobile__link-2 {
display: inline;
color: #0066CC;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #0066CC;
}
.c-footer-landing-mobile__group-8 {
display: inline-block;
white-space: nowrap;
}
.c-footer-landing-mobile__group-9 {
display: block;
justify-content: space-between;
}
.c-footer-landing-mobile__group-10 {
display: block;
position: relative;
top: -3px;
z-index: 2;
white-space: nowrap;
padding-top: 4px;
margin-top: 5px;
}
.c-footer-landing-mobile__link-3 {
display: inline-block;
position: relative;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
padding-top: 4px;
padding-bottom: 4px;
margin-top: -4px;
margin-bottom: -4px;
}
.c-footer-landing-mobile__group-11 {
display: block;
position: relative;
top: -3px;
z-index: 1;
padding-top: 12px;
}
.c-footer-landing-mobile__group-11::before {
content: "";
display: table;
}
.c-footer-landing-mobile__group-11::after {
content: "";
display: table;
}
.c-footer-landing-mobile__text-4 {
display: block;
max-height: 9999px;
list-style-type: none;
margin-top: 5px;
}
.c-footer-landing-mobile__list-3 {
display: block;
padding: 0px;
margin: 5px 0px 0px;
position: relative;
top: -5px;
z-index: 1;
list-style-type: none;
}
.c-footer-landing-mobile__item-2 {
display: inline-block;
position: relative;
margin-top: 8px;
margin-right: 6px;
}
.c-footer-landing-mobile__item-2::before {
content: "";
display: block;
width: 73px;
height: 16px;
position: absolute;
top: 0px;
right: 9px;
bottom: 0px;
left: 0px;
}
.c-footer-landing-mobile__item-2::after {
content: "";
display: block;
width: 1px;
height: 10px;
position: absolute;
top: 0px;
right: -1px;
bottom: 0px;
left: 82.4219px;
background-color: #0000007A;
margin-top: 3px;
margin-bottom: 3px;
}
.c-footer-landing-mobile__link-4 {
display: inline-block;
padding: 4px 9px;
position: relative;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
white-space: nowrap;
margin-top: -4px;
margin-bottom: -4px;
margin-left: -9px;
}
.c-footer-landing-mobile__link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-landing-mobile__button:hover {
color: #000000;
}
.c-footer-landing-mobile__button:hover::after {
color: #000000;
}
.c-footer-landing-mobile__button:focus {
outline: none;
}
.c-footer-landing-mobile__button:focus::after {
outline: 2px solid #0071E3;
outline-offset: -2px;
}
.c-footer-landing-mobile__link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-landing-mobile__link-3:hover {
text-decoration-line: underline;
}
.c-footer-landing-mobile__link-3:focus {
outline: none;
}
.c-footer-landing-mobile__link-3:focus::after {
content: "";
display: block;
width: 71px;
height: 16px;
position: absolute;
top: 4px;
right: 0px;
bottom: 4px;
left: 0px;
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-landing-mobile__link-4:hover {
text-decoration-line: underline;
}
.c-footer-landing-mobile__link-4:focus {
outline: none;
}
States
footer-landing-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-landing-nav-link hover: text-decoration-line underlinefooter-landing-nav-link focus: outline none, ::before content "", ::before display block, ::before width 28px, ::before height 16px, ::before position absolute, ::before top 4px, ::before right 20px, ::before bottom 4px, ::before left 0px, ::before outline 2px solid #0071E3, ::before outline-offset 1pxfooter-landing-mobile-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-landing-mobile-button hover (footer-landing-mobile-button-hover): color #000000, ::after color #000000footer-landing-mobile-button focus: outline none, ::after outline 2px solid #0071E3, ::after outline-offset -2pxfooter-landing-mobile-link-2 focus: outline 2px solid #0071E3, outline-offset 1pxfooter-landing-mobile-link-3 hover: text-decoration-line underlinefooter-landing-mobile-link-3 focus: outline none, ::after content "", ::after display block, ::after width 71px, ::after height 16px, ::after position absolute, ::after top 4px, ::after right 0px, ::after bottom 4px, ::after left 0px, ::after outline 2px solid #0071E3, ::after outline-offset 1pxfooter-landing-mobile-link-4 hover: text-decoration-line underlinefooter-landing-mobile-link-4 focus: outline noneFooter (inner)
Verification: desktop flagged, the footer-inner-inner height did not reproduce the measured 7902px after 2 correction attempts; mobile flagged, the recipe could not be rendered on its own.
Variant observed on https://www.apple.com/us/shop/goto/payment_plan.
Anatomy
footer-inner: the component root, a <footer> (.c-footer-inner)footer-inner-inner: inner block (.c-footer-inner__inner), content not capturedfooter-inner-heading: heading, 6 characters (.c-footer-inner__heading)footer-inner-heading-2: heading, 9 characters (.c-footer-inner__heading-2)footer-inner-group: inner block (.c-footer-inner__group), content not capturedfooter-inner-group-2: inner block (.c-footer-inner__group-2), content not capturedfooter-inner-group-3: inner group (.c-footer-inner__group-3)footer-inner-text: label text, 818 characters (.c-footer-inner__text, 49 instances)footer-inner-link: link (.c-footer-inner__link, 3 instances)footer-inner-text-2: label text, 23 characters (.c-footer-inner__text-2, 4 instances)footer-inner-group-4: inner group (.c-footer-inner__group-4, 53 instances)footer-inner-text-3: label text, 995 characters (.c-footer-inner__text-3)footer-inner-text-4: label text, 66 characters (.c-footer-inner__text-4, 19 instances)footer-inner-text-5: label text, 19 characters (.c-footer-inner__text-5, 22 instances)footer-inner-link-2: link (.c-footer-inner__link-2)footer-inner-break: line break (.c-footer-inner__break, 4 instances)footer-inner-text-6: label text, 1213 characters (.c-footer-inner__text-6), content not capturedDesktop recipe
<div class="c-footer-inner-scope">
<footer class="c-footer-inner">
<div class="c-footer-inner__inner">
<h2 class="c-footer-inner__heading">lorem</h2>
<h3 class="c-footer-inner__heading-2">lorem ips</h3>
<div class="c-footer-inner__group">
<div class="c-footer-inner__group-2">
<p class="c-footer-inner__group-3">
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscin</span>
<a class="c-footer-inner__link" href="#">
<span class="c-footer-inner__text">lorem ipsum dolor sit amet conse</span>
<span class="c-footer-inner__text-2">lorem ipsum dolor sit a</span>
</a>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsu</span>
</p>
<p class="c-footer-inner__group-4"></p>
<span class="c-footer-inner__text">l</span>
<span class="c-footer-inner__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod t</span>
<p class="c-footer-inner__group-4">
<span class="c-footer-inner__text">l</span>
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eius</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod te</span>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet co</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</span>
</p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet co</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ip</span>
</p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet co</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem</span>
</p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipiscing e</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</span>
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet cons</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consecte</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum do</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetu</span>
</p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet conse</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tem</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum do</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempo</span>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do ei</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ips</span>
<a class="c-footer-inner__link" href="#">
<span class="c-footer-inner__text">lorem ipsum dolor</span>
<span class="c-footer-inner__text-2">lorem ipsum dolor sit a</span>
</a>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet co</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum do</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectet</span>
</p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipis</strong>
</p>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscin</span>
<a class="c-footer-inner__link-2" href="#">
<span class="c-footer-inner__text">lorem ipsum dolor</span>
<span class="c-footer-inner__text-2">lorem ipsum dolor sit a</span>
</a>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed</span>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum do</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempo</span>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consec</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eius</span>
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod temp</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum do</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</span>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipisc</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet cons</span>
<br class="c-footer-inner__break">
<br class="c-footer-inner__break">
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do</span>
<br class="c-footer-inner__break">
<br class="c-footer-inner__break">
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem</span>
</p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet conse</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusm</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum do</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed d</span>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipis</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</span>
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adip</span>
<a class="c-footer-inner__link" href="#">
<span class="c-footer-inner__text">lorem ipsum dolor</span>
<span class="c-footer-inner__text-2">lorem ipsum dolor sit a</span>
</a>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit ame</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum do</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adip</span>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consec</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit am</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod t</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempo</span>
</p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum do</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</span>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<strong class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do</strong>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscin</span>
</p>
<p class="c-footer-inner__group-4"></p>
<p class="c-footer-inner__group-4">
<em class="c-footer-inner__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet conse</span>
</p>
<p class="c-footer-inner__text-6">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed</p>
</div>
</div>
</div>
</footer>
</div>
.c-footer-inner-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-inner {
display: block;
border-spacing: 0px;
min-width: 1024px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-inner__inner {
display: block;
max-width: 980px;
padding-right: 22px;
padding-left: 22px;
margin-right: auto;
margin-left: auto;
}
.c-footer-inner__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 18px;
font-weight: 600;
line-height: 24.0007px;
}
.c-footer-inner__heading-2 {
display: block;
width: 1px;
height: 1px;
margin: 5.616px 0px 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
margin-top: 9.6px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner__group-2 {
display: block;
}
.c-footer-inner__group-3 {
display: block;
margin: 0px;
}
.c-footer-inner__link {
display: inline;
color: #000000B8;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #000000B8;
}
.c-footer-inner__text-2 {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-footer-inner__group-4 {
display: block;
margin: 9.6px 0px 0px;
}
.c-footer-inner__text-3 {
display: inline;
margin-top: 9.6px;
}
.c-footer-inner__text-4 {
display: inline;
font-weight: 600;
}
.c-footer-inner__text-5 {
display: inline;
font-style: italic;
}
.c-footer-inner__link-2 {
display: inline;
color: #000000B8;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #000000B8;
margin-top: 9.6px;
}
.c-footer-inner__text-6 {
display: block;
margin: 9.6px 0px 0px;
}
.c-footer-inner__link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner__link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
Mobile anatomy
footer-inner-mobile: the component root, a <footer> (.c-footer-inner-mobile)footer-inner-mobile-inner: inner block (.c-footer-inner-mobile__inner), content not capturedfooter-inner-mobile-heading: heading, 6 characters (.c-footer-inner-mobile__heading)footer-inner-mobile-heading-2: heading, 9 characters (.c-footer-inner-mobile__heading-2)footer-inner-mobile-group: inner block (.c-footer-inner-mobile__group), content not capturedfooter-inner-mobile-group-2: inner block (.c-footer-inner-mobile__group-2), content not capturedfooter-inner-mobile-group-3: inner group (.c-footer-inner-mobile__group-3)footer-inner-mobile-text: label text, 818 characters (.c-footer-inner-mobile__text, 49 instances)footer-inner-mobile-link: link (.c-footer-inner-mobile__link, 3 instances)footer-inner-mobile-text-2: label text, 23 characters (.c-footer-inner-mobile__text-2, 4 instances)footer-inner-mobile-group-4: inner group (.c-footer-inner-mobile__group-4, 53 instances)footer-inner-mobile-text-3: label text, 995 characters (.c-footer-inner-mobile__text-3)footer-inner-mobile-text-4: label text, 66 characters (.c-footer-inner-mobile__text-4, 19 instances)footer-inner-mobile-text-5: label text, 19 characters (.c-footer-inner-mobile__text-5, 22 instances)footer-inner-mobile-link-2: link (.c-footer-inner-mobile__link-2)footer-inner-mobile-break: line break (.c-footer-inner-mobile__break, 4 instances)footer-inner-mobile-text-6: label text, 1213 characters (.c-footer-inner-mobile__text-6), content not capturedMobile recipe
<div class="c-footer-inner-mobile-scope">
<footer class="c-footer-inner-mobile">
<div class="c-footer-inner-mobile__inner">
<h2 class="c-footer-inner-mobile__heading">lorem</h2>
<h3 class="c-footer-inner-mobile__heading-2">lorem ips</h3>
<div class="c-footer-inner-mobile__group">
<div class="c-footer-inner-mobile__group-2">
<p class="c-footer-inner-mobile__group-3">
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscin</span>
<a class="c-footer-inner-mobile__link" href="#">
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet conse</span>
<span class="c-footer-inner-mobile__text-2">lorem ipsum dolor sit a</span>
</a>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsu</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<span class="c-footer-inner-mobile__text">l</span>
<span class="c-footer-inner-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod t</span>
<p class="c-footer-inner-mobile__group-4">
<span class="c-footer-inner-mobile__text">l</span>
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eius</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod te</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet co</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet co</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ip</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet co</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing e</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</span>
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet cons</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consecte</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum do</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetu</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet conse</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tem</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum do</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempo</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do ei</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ips</span>
<a class="c-footer-inner-mobile__link" href="#">
<span class="c-footer-inner-mobile__text">lorem ipsum dolor</span>
<span class="c-footer-inner-mobile__text-2">lorem ipsum dolor sit a</span>
</a>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet co</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum do</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectet</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipis</strong>
</p>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscin</span>
<a class="c-footer-inner-mobile__link-2" href="#">
<span class="c-footer-inner-mobile__text">lorem ipsum dolor</span>
<span class="c-footer-inner-mobile__text-2">lorem ipsum dolor sit a</span>
</a>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed</span>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum do</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempo</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consec</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eius</span>
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod temp</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum do</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipisc</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet cons</span>
<br class="c-footer-inner-mobile__break">
<br class="c-footer-inner-mobile__break">
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do</span>
<br class="c-footer-inner-mobile__break">
<br class="c-footer-inner-mobile__break">
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet conse</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusm</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum do</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed d</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipis</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</span>
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</strong>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adip</span>
<a class="c-footer-inner-mobile__link" href="#">
<span class="c-footer-inner-mobile__text">lorem ipsum dolor</span>
<span class="c-footer-inner-mobile__text-2">lorem ipsum dolor sit a</span>
</a>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit ame</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum do</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adip</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consec</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit am</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod t</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor sit</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempo</span>
</p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum do</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<strong class="c-footer-inner-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do</strong>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscin</span>
</p>
<p class="c-footer-inner-mobile__group-4"></p>
<p class="c-footer-inner-mobile__group-4">
<em class="c-footer-inner-mobile__text-5">lorem ipsum dolor s</em>
<span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet conse</span>
</p>
<p class="c-footer-inner-mobile__text-6">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed</p>
</div>
</div>
</div>
</footer>
</div>
.c-footer-inner-mobile-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-inner-mobile {
display: block;
border-spacing: 0px;
min-width: 320px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-inner-mobile__inner {
display: block;
max-width: 980px;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
}
.c-footer-inner-mobile__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 18px;
font-weight: 600;
line-height: 24.0007px;
}
.c-footer-inner-mobile__heading-2 {
display: block;
width: 1px;
height: 1px;
margin: 5.616px 0px 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-mobile__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
margin-top: 9.6px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-mobile__group-2 {
display: block;
}
.c-footer-inner-mobile__group-3 {
display: block;
margin: 0px;
}
.c-footer-inner-mobile__link {
display: inline;
color: #000000B8;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #000000B8;
}
.c-footer-inner-mobile__text-2 {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-footer-inner-mobile__group-4 {
display: block;
margin: 9.6px 0px 0px;
}
.c-footer-inner-mobile__text-3 {
display: inline;
margin-top: 9.6px;
}
.c-footer-inner-mobile__text-4 {
display: inline;
font-weight: 600;
}
.c-footer-inner-mobile__text-5 {
display: inline;
font-style: italic;
}
.c-footer-inner-mobile__link-2 {
display: inline;
color: #000000B8;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #000000B8;
margin-top: 9.6px;
}
.c-footer-inner-mobile__text-6 {
display: block;
margin: 9.6px 0px 0px;
}
.c-footer-inner-mobile__link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-mobile__link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
States
footer-inner-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-link-2 focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-mobile-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-mobile-link-2 focus: outline 2px solid #0071E3, outline-offset 1pxFooter (inner, 2)
Verification: desktop flagged, the footer-inner-2-inner height did not reproduce the measured 2174px after 2 correction attempts; mobile flagged, the footer-inner-2-mobile-inner height did not reproduce the measured 4222px after 2 correction attempts.
Variant observed on https://www.apple.com/us/shop/goto/buy_mac.
Anatomy
footer-inner-2: the component root, a <footer> (.c-footer-inner-2)footer-inner-2-inner: inner block (.c-footer-inner-2__inner), content not capturedfooter-inner-2-heading: heading, 6 characters (.c-footer-inner-2__heading)footer-inner-2-heading-2: heading, 9 characters (.c-footer-inner-2__heading-2)footer-inner-2-group: inner block (.c-footer-inner-2__group)footer-inner-2-group-2: inner block (.c-footer-inner-2__group-2, 3 instances)footer-inner-2-group-3: inner block (.c-footer-inner-2__group-3)footer-inner-2-list: inner group (.c-footer-inner-2__list)footer-inner-2-item: inner group (.c-footer-inner-2__item, 9 instances)footer-inner-2-text: label text, 8 characters (.c-footer-inner-2__text, 11 instances)footer-inner-2-text-2: label text, 0 characters (.c-footer-inner-2__text-2, 6 instances), content not capturedfooter-inner-2-text-3: label text, 823 characters (.c-footer-inner-2__text-3, 13 instances)footer-inner-2-item-2: inner flex row (.c-footer-inner-2__item-2, 2 instances)footer-inner-2-text-4: label text, 2 characters (.c-footer-inner-2__text-4, 2 instances)footer-inner-2-text-5: label text, 0 characters (.c-footer-inner-2__text-5, 2 instances), content not capturedfooter-inner-2-text-6: label text, 162 characters (.c-footer-inner-2__text-6)footer-inner-2-nav: inner group (.c-footer-inner-2__nav)footer-inner-2-nav-link: link (.c-footer-inner-2__nav-link)footer-inner-2-group-4: inner group (.c-footer-inner-2__group-4)footer-inner-2-group-5: inner block (.c-footer-inner-2__group-5)footer-inner-2-list-2: inner group (.c-footer-inner-2__list-2)footer-inner-2-nav-item: label text, 18 characters (.c-footer-inner-2__nav-item, 2 instances)footer-inner-2-nav-2: inner flex row (.c-footer-inner-2__nav-2), content not capturedfooter-inner-2-group-6: inner block (.c-footer-inner-2__group-6, 2 instances)footer-inner-2-heading-3: heading, 0 characters (.c-footer-inner-2__heading-3, 4 instances)footer-inner-2-text-7: label text, 14 characters (.c-footer-inner-2__text-7, 4 instances)footer-inner-2-list-3: inner group (.c-footer-inner-2__list-3, 4 instances), content not capturedfooter-inner-2-nav-item-2: inner group (.c-footer-inner-2__nav-item-2, 20 instances)footer-inner-2-nav-link-2: link, 5-character label (.c-footer-inner-2__nav-link-2, 23 instances)footer-inner-2-nav-item-3: inner group (.c-footer-inner-2__nav-item-3, 3 instances)footer-inner-2-group-7: inner block (.c-footer-inner-2__group-7, 2 instances)Desktop recipe
<div class="c-footer-inner-2-scope">
<footer class="c-footer-inner-2">
<div class="c-footer-inner-2__inner">
<h2 class="c-footer-inner-2__heading">lorem</h2>
<h3 class="c-footer-inner-2__heading-2">lorem ips</h3>
<div class="c-footer-inner-2__group">
<div class="c-footer-inner-2__group-2">
<div class="c-footer-inner-2__group-3">
<ul class="c-footer-inner-2__list">
<li class="c-footer-inner-2__item">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-2">
<span class="c-footer-inner-2__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<span class="c-footer-inner-2__text-3">lorem ipsum dolor sit amet conse</span>
</span>
</li>
<li class="c-footer-inner-2__item">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-2">l</span>
</li>
<li class="c-footer-inner-2__item">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-2">l</span>
</li>
<li class="c-footer-inner-2__item">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tem</span>
</li>
<li class="c-footer-inner-2__item">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusm</span>
</li>
<li class="c-footer-inner-2__item">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-2">
<span class="c-footer-inner-2__text-3">l</span>
<span class="c-footer-inner-2__text-3">lor</span>
<span class="c-footer-inner-2__text-3">lorem ipsum dolor sit</span>
</span>
</li>
<li class="c-footer-inner-2__item">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmo</span>
</li>
<li class="c-footer-inner-2__item">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
</li>
<li class="c-footer-inner-2__item-2">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-4">lo</span>
<span class="c-footer-inner-2__text-5">
<span class="c-footer-inner-2__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor</span>
<span class="c-footer-inner-2__text-3">l</span>
</span>
</li>
<li class="c-footer-inner-2__item-2">
<span class="c-footer-inner-2__text">lorem ip</span>
<span class="c-footer-inner-2__text-4">lo</span>
<span class="c-footer-inner-2__text-5">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur</span>
</li>
<li class="c-footer-inner-2__item">
<span class="c-footer-inner-2__text-2">
<span class="c-footer-inner-2__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur a</span>
<span class="c-footer-inner-2__text-3">lorem</span>
</span>
</li>
</ul>
</div>
</div>
<p class="c-footer-inner-2__text-6">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ip</p>
</div>
<nav class="c-footer-inner-2__nav">
<a class="c-footer-inner-2__nav-link" href="#">
<span class="c-footer-inner-2__group-4"></span>
<span class="c-footer-inner-2__text">lorem</span>
</a>
<div class="c-footer-inner-2__group-5">
<ol class="c-footer-inner-2__list-2">
<li class="c-footer-inner-2__nav-item">lorem ipsum dolor</li>
<li class="c-footer-inner-2__nav-item">
<span class="c-footer-inner-2__text-2">lorem ip</span>
</li>
</ol>
</div>
</nav>
<nav class="c-footer-inner-2__nav-2">
<div class="c-footer-inner-2__group-6">
<div class="c-footer-inner-2__group-2">
<h3 class="c-footer-inner-2__heading-3">
<span class="c-footer-inner-2__text-7">lorem ipsum do</span>
</h3>
<ul class="c-footer-inner-2__list-3">
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lor</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lore</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem i</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-2__nav-item-3">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsu</a>
</li>
</ul>
</div>
<div class="c-footer-inner-2__group-7">
<h3 class="c-footer-inner-2__heading-3">
<span class="c-footer-inner-2__text-7">lorem ipsum</span>
</h3>
<ul class="c-footer-inner-2__list-3">
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsu</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-2__nav-item-3">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsu</a>
</li>
</ul>
</div>
</div>
<div class="c-footer-inner-2__group-6">
<div class="c-footer-inner-2__group-2">
<h3 class="c-footer-inner-2__heading-3">
<span class="c-footer-inner-2__text-7">lorem i</span>
</h3>
<ul class="c-footer-inner-2__list-3">
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsum dolor sit ame</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsum dolor s</a>
</li>
<li class="c-footer-inner-2__nav-item-3">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsu</a>
</li>
</ul>
</div>
<div class="c-footer-inner-2__group-7">
<h3 class="c-footer-inner-2__heading-3">
<span class="c-footer-inner-2__text-7">lorem ipsum d</span>
</h3>
<ul class="c-footer-inner-2__list-3">
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ip</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-2__nav-item-2">
<a class="c-footer-inner-2__nav-link-2" href="#">lorem ipsum do</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</footer>
</div>
.c-footer-inner-2-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-inner-2 {
display: block;
border-spacing: 0px;
min-width: 1024px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-inner-2__inner {
display: block;
max-width: 980px;
padding-right: 22px;
padding-left: 22px;
margin-right: auto;
margin-left: auto;
}
.c-footer-inner-2__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 18px;
font-weight: 600;
line-height: 24.0007px;
}
.c-footer-inner-2__heading-2 {
display: block;
width: 1px;
height: 1px;
margin: 5.616px 0px 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-2__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
margin-top: 9.6px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-2__group-2 {
display: block;
}
.c-footer-inner-2__group-3 {
display: block;
color: #6E6E73;
}
.c-footer-inner-2__list {
display: block;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-2__item {
display: list-item;
padding-bottom: 9.6px;
}
.c-footer-inner-2__text {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-footer-inner-2__text-2 {
display: inline;
}
.c-footer-inner-2__item-2 {
display: flex;
padding-bottom: 9.6px;
}
.c-footer-inner-2__text-4 {
display: block;
width: 20px;
white-space: pre-wrap;
}
.c-footer-inner-2__text-5 {
display: block;
flex-grow: 1;
flex-basis: 0%;
}
.c-footer-inner-2__text-6 {
display: block;
margin: 0px;
}
.c-footer-inner-2__nav {
display: block;
position: relative;
z-index: 1;
color: #000000B8;
padding-top: 17px;
padding-bottom: 17px;
}
.c-footer-inner-2__nav::before {
content: "";
display: table;
}
.c-footer-inner-2__nav::after {
content: "";
display: table;
}
.c-footer-inner-2__nav-link {
display: block;
position: absolute;
top: 17px;
left: 0px;
z-index: 2;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-2__group-4 {
display: block;
width: 14px;
height: 18px;
position: relative;
z-index: 2;
background-color: #000000B8;
color: transparent;
}
.c-footer-inner-2__group-5 {
display: block;
position: relative;
z-index: 1;
}
.c-footer-inner-2__group-5::before {
content: "";
display: table;
}
.c-footer-inner-2__group-5::after {
content: "";
display: table;
}
.c-footer-inner-2__list-2 {
display: block;
max-height: 9999px;
padding: 0px 0px 0px 25px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-2__nav-item {
display: list-item;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 3px;
margin-right: 7px;
}
.c-footer-inner-2__nav-item::before {
content: "";
display: inline-block;
width: 6px;
height: 11px;
vertical-align: middle;
background-color: #0000007A;
margin-top: -1px;
margin-right: 11px;
}
.c-footer-inner-2__nav-2 {
display: flex;
}
.c-footer-inner-2__group-6 {
display: block;
flex-basis: 25%;
}
.c-footer-inner-2__heading-3 {
display: block;
margin: 0px;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-2__text-7 {
display: block;
font-size: 12px;
line-height: 16.0005px;
margin-right: 20px;
margin-bottom: 9.6px;
}
.c-footer-inner-2__list-3 {
display: block;
padding: 0px;
margin: 0px 20px 0px 0px;
list-style-type: none;
}
.c-footer-inner-2__nav-item-2 {
display: block;
margin-bottom: 9.6px;
}
.c-footer-inner-2__nav-link-2 {
display: inline;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-2__nav-item-3 {
display: block;
}
.c-footer-inner-2__group-7 {
display: block;
padding-top: 24px;
}
.c-footer-inner-2__nav-link:hover {
text-decoration-line: underline;
}
.c-footer-inner-2__nav-link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-2__nav-link-2:hover {
text-decoration-line: underline;
}
.c-footer-inner-2__nav-link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
Mobile anatomy
footer-inner-2-mobile: the component root, a <footer> (.c-footer-inner-2-mobile)footer-inner-2-mobile-inner: inner block (.c-footer-inner-2-mobile__inner), content not capturedfooter-inner-2-mobile-heading: heading, 6 characters (.c-footer-inner-2-mobile__heading)footer-inner-2-mobile-heading-2: heading, 9 characters (.c-footer-inner-2-mobile__heading-2)footer-inner-2-mobile-group: inner block (.c-footer-inner-2-mobile__group)footer-inner-2-mobile-group-2: inner block (.c-footer-inner-2-mobile__group-2, 6 instances), content not capturedfooter-inner-2-mobile-group-3: inner block (.c-footer-inner-2-mobile__group-3)footer-inner-2-mobile-list: inner group (.c-footer-inner-2-mobile__list)footer-inner-2-mobile-item: inner group (.c-footer-inner-2-mobile__item, 9 instances)footer-inner-2-mobile-text: label text, 8 characters (.c-footer-inner-2-mobile__text, 11 instances)footer-inner-2-mobile-text-2: label text, 0 characters (.c-footer-inner-2-mobile__text-2, 5 instances), content not capturedfooter-inner-2-mobile-text-3: label text, 823 characters (.c-footer-inner-2-mobile__text-3, 23 instances)footer-inner-2-mobile-item-2: inner flex row (.c-footer-inner-2-mobile__item-2, 2 instances)footer-inner-2-mobile-text-4: label text, 2 characters (.c-footer-inner-2-mobile__text-4, 2 instances)footer-inner-2-mobile-text-5: label text, 0 characters (.c-footer-inner-2-mobile__text-5, 2 instances), content not capturedfooter-inner-2-mobile-text-6: label text, 162 characters (.c-footer-inner-2-mobile__text-6)footer-inner-2-mobile-nav: inner group (.c-footer-inner-2-mobile__nav)footer-inner-2-mobile-nav-link: link (.c-footer-inner-2-mobile__nav-link)footer-inner-2-mobile-group-4: inner group (.c-footer-inner-2-mobile__group-4)footer-inner-2-mobile-group-5: inner block (.c-footer-inner-2-mobile__group-5)footer-inner-2-mobile-list-2: inner group (.c-footer-inner-2-mobile__list-2)footer-inner-2-mobile-nav-item: label text, 18 characters (.c-footer-inner-2-mobile__nav-item, 2 instances)footer-inner-2-mobile-nav-2: inner flex column (.c-footer-inner-2-mobile__nav-2)footer-inner-2-mobile-group-6: inner block (.c-footer-inner-2-mobile__group-6, 10 instances)footer-inner-2-mobile-heading-3: heading, 0 characters (.c-footer-inner-2-mobile__heading-3, 10 instances)footer-inner-2-mobile-button: button (.c-footer-inner-2-mobile__button, 10 instances)footer-inner-2-mobile-group-7: inner flex row (.c-footer-inner-2-mobile__group-7, 10 instances), content not capturedfooter-inner-2-mobile-icon: icon placeholder, 11x6px (.c-footer-inner-2-mobile__icon, 9 instances)Mobile recipe
<div class="c-footer-inner-2-mobile-scope">
<footer class="c-footer-inner-2-mobile">
<div class="c-footer-inner-2-mobile__inner">
<h2 class="c-footer-inner-2-mobile__heading">lorem</h2>
<h3 class="c-footer-inner-2-mobile__heading-2">lorem ips</h3>
<div class="c-footer-inner-2-mobile__group">
<div class="c-footer-inner-2-mobile__group-2">
<div class="c-footer-inner-2-mobile__group-3">
<ul class="c-footer-inner-2-mobile__list">
<li class="c-footer-inner-2-mobile__item">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-2">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit amet conse</span>
</span>
</li>
<li class="c-footer-inner-2-mobile__item">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-2">l</span>
</li>
<li class="c-footer-inner-2-mobile__item">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-2">l</span>
</li>
<li class="c-footer-inner-2-mobile__item">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tem</span>
</li>
<li class="c-footer-inner-2-mobile__item">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusm</span>
</li>
<li class="c-footer-inner-2-mobile__item">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-2">
<span class="c-footer-inner-2-mobile__text-3">l</span>
<span class="c-footer-inner-2-mobile__text-3">lor</span>
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit</span>
</span>
</li>
<li class="c-footer-inner-2-mobile__item">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmo</span>
</li>
<li class="c-footer-inner-2-mobile__item">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
</li>
<li class="c-footer-inner-2-mobile__item-2">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-4">lo</span>
<span class="c-footer-inner-2-mobile__text-5">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor</span>
<span class="c-footer-inner-2-mobile__text-3">l</span>
</span>
</li>
<li class="c-footer-inner-2-mobile__item-2">
<span class="c-footer-inner-2-mobile__text">lorem ip</span>
<span class="c-footer-inner-2-mobile__text-4">lo</span>
<span class="c-footer-inner-2-mobile__text-5">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur</span>
</li>
<li class="c-footer-inner-2-mobile__item">
<span class="c-footer-inner-2-mobile__text-2">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur a</span>
<span class="c-footer-inner-2-mobile__text-3">lorem</span>
</span>
</li>
</ul>
</div>
</div>
<p class="c-footer-inner-2-mobile__text-6">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ip</p>
</div>
<nav class="c-footer-inner-2-mobile__nav">
<a class="c-footer-inner-2-mobile__nav-link" href="#">
<span class="c-footer-inner-2-mobile__group-4"></span>
<span class="c-footer-inner-2-mobile__text">lorem</span>
</a>
<div class="c-footer-inner-2-mobile__group-5">
<ol class="c-footer-inner-2-mobile__list-2">
<li class="c-footer-inner-2-mobile__nav-item">lorem ipsum dolor</li>
<li class="c-footer-inner-2-mobile__nav-item">lorem ip</li>
</ol>
</div>
</nav>
<nav class="c-footer-inner-2-mobile__nav-2">
<div class="c-footer-inner-2-mobile__group-2">
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum do</span>
<span class="c-footer-inner-2-mobile__group-7">
<span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-2-mobile__group-7">
<span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-2-mobile__group-2">
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem i</span>
<span class="c-footer-inner-2-mobile__group-7">
<span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum d</span>
<span class="c-footer-inner-2-mobile__group-7">
<span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-2-mobile__group-2">
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-2-mobile__group-7">
<span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-2-mobile__group-2">
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-2-mobile__group-7">
<span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum d</span>
<span class="c-footer-inner-2-mobile__group-7">
<span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum do</span>
<span class="c-footer-inner-2-mobile__group-7">
<span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum do</span>
<span class="c-footer-inner-2-mobile__group-7">
<span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-2-mobile__group-2">
<div class="c-footer-inner-2-mobile__group-6">
<h3 class="c-footer-inner-2-mobile__heading-3">
<button class="c-footer-inner-2-mobile__button" type="button">
<span class="c-footer-inner-2-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-2-mobile__group-7"></span>
</button>
</h3>
</div>
</div>
</nav>
</div>
</footer>
</div>
.c-footer-inner-2-mobile-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-inner-2-mobile {
display: block;
border-spacing: 0px;
min-width: 320px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-inner-2-mobile__inner {
display: block;
max-width: 980px;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
}
.c-footer-inner-2-mobile__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 18px;
font-weight: 600;
line-height: 24.0007px;
}
.c-footer-inner-2-mobile__heading-2 {
display: block;
width: 1px;
height: 1px;
margin: 5.616px 0px 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-2-mobile__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
margin-top: 9.6px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-2-mobile__group-2 {
display: block;
}
.c-footer-inner-2-mobile__group-3 {
display: block;
color: #6E6E73;
}
.c-footer-inner-2-mobile__list {
display: block;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-2-mobile__item {
display: list-item;
padding-bottom: 9.6px;
}
.c-footer-inner-2-mobile__text {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-footer-inner-2-mobile__text-2 {
display: inline;
}
.c-footer-inner-2-mobile__item-2 {
display: flex;
padding-bottom: 9.6px;
}
.c-footer-inner-2-mobile__text-4 {
display: block;
width: 20px;
white-space: pre-wrap;
}
.c-footer-inner-2-mobile__text-5 {
display: block;
flex-grow: 1;
flex-basis: 0%;
}
.c-footer-inner-2-mobile__text-6 {
display: block;
margin: 0px;
}
.c-footer-inner-2-mobile__nav {
display: block;
position: relative;
z-index: 1;
color: #000000B8;
padding-top: 17px;
padding-bottom: 17px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-2-mobile__nav::before {
content: "";
display: table;
}
.c-footer-inner-2-mobile__nav::after {
content: "";
display: table;
}
.c-footer-inner-2-mobile__nav-link {
display: block;
position: absolute;
top: 17px;
left: 0px;
z-index: 2;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-2-mobile__group-4 {
display: block;
width: 14px;
height: 18px;
position: relative;
z-index: 2;
background-color: #000000B8;
color: transparent;
}
.c-footer-inner-2-mobile__group-5 {
display: block;
position: relative;
z-index: 1;
}
.c-footer-inner-2-mobile__group-5::before {
content: "";
display: table;
}
.c-footer-inner-2-mobile__group-5::after {
content: "";
display: table;
}
.c-footer-inner-2-mobile__list-2 {
display: block;
max-height: 9999px;
padding: 0px 0px 0px 25px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-2-mobile__nav-item {
display: list-item;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 3px;
margin-right: 7px;
}
.c-footer-inner-2-mobile__nav-item::before {
content: "";
display: inline-block;
width: 6px;
height: 11px;
vertical-align: middle;
background-color: #0000007A;
margin-top: -1px;
margin-right: 11px;
}
.c-footer-inner-2-mobile__nav-2 {
display: flex;
flex-direction: column;
}
.c-footer-inner-2-mobile__group-6 {
display: block;
box-sizing: border-box;
width: calc(100% + 8px);
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
padding-right: 4px;
padding-bottom: 1px;
padding-left: 4px;
margin-left: -4px;
}
.c-footer-inner-2-mobile__group-6::after {
content: "";
display: block;
width: 358px;
height: 1px;
position: absolute;
top: 36px;
right: 4px;
bottom: 0px;
left: 4px;
z-index: 3;
background-color: #00000029;
}
.c-footer-inner-2-mobile__heading-3 {
display: block;
margin: 0px;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-2-mobile__button {
display: block;
width: 100%;
padding: 10px 0px;
position: relative;
z-index: 2;
background-color: #F5F5F7;
color: #000000E0;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
text-transform: none;
text-align: start;
}
.c-footer-inner-2-mobile__button::after {
content: "";
display: block;
width: 366px;
height: 36px;
position: absolute;
top: 0px;
right: -4px;
bottom: 0px;
left: -4px;
}
.c-footer-inner-2-mobile__group-7 {
display: flex;
justify-content: center;
align-items: center;
width: 11px;
font-size: 14px;
line-height: 18.6672px;
transition: transform 0.3s ease;
margin-top: 5px;
}
.c-footer-inner-2-mobile__icon {
display: block;
flex-shrink: 0;
width: 11px;
height: 6px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-footer-inner-2-mobile__nav-link:hover {
text-decoration-line: underline;
}
.c-footer-inner-2-mobile__nav-link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-2-mobile__button:hover {
color: #000000;
}
.c-footer-inner-2-mobile__button:hover::after {
color: #000000;
}
.c-footer-inner-2-mobile__button:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-2-mobile__button:focus::after {
outline: 2px solid #0071E3;
outline-offset: -2px;
}
States
footer-inner-2-nav-link hover: text-decoration-line underlinefooter-inner-2-nav-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-2-nav-link-2 hover: text-decoration-line underlinefooter-inner-2-nav-link-2 focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-2-mobile-nav-link hover: text-decoration-line underlinefooter-inner-2-mobile-nav-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-2-mobile-button hover (footer-inner-2-mobile-button-hover): color #000000, ::after color #000000footer-inner-2-mobile-button focus: outline 2px solid #0071E3, outline-offset 1px, ::after outline 2px solid #0071E3, ::after outline-offset -2pxFooter (inner, 3)
Verification: desktop flagged, the footer-inner-3-inner height did not reproduce the measured 1131px after 2 correction attempts; mobile flagged, the recipe could not be rendered on its own.
Variant observed on https://www.apple.com/us/shop/goto/buy_vision.
Anatomy
footer-inner-3: the component root, a <footer> (.c-footer-inner-3)footer-inner-3-inner: inner block (.c-footer-inner-3__inner), content not capturedfooter-inner-3-heading: heading, 6 characters (.c-footer-inner-3__heading)footer-inner-3-heading-2: heading, 9 characters (.c-footer-inner-3__heading-2)footer-inner-3-group: inner block (.c-footer-inner-3__group)footer-inner-3-group-2: inner block (.c-footer-inner-3__group-2, 4 instances)footer-inner-3-group-3: inner block (.c-footer-inner-3__group-3)footer-inner-3-list: inner group (.c-footer-inner-3__list)footer-inner-3-item: inner group (.c-footer-inner-3__item, 2 instances)footer-inner-3-text: label text, 8 characters (.c-footer-inner-3__text, 3 instances)footer-inner-3-text-2: label text, 0 characters (.c-footer-inner-3__text-2, 2 instances), content not capturedfooter-inner-3-text-3: label text, 823 characters (.c-footer-inner-3__text-3, 8 instances)footer-inner-3-text-4: label text, 162 characters (.c-footer-inner-3__text-4)footer-inner-3-nav: inner group (.c-footer-inner-3__nav)footer-inner-3-nav-link: link (.c-footer-inner-3__nav-link)footer-inner-3-group-4: inner group (.c-footer-inner-3__group-4)footer-inner-3-group-5: inner block (.c-footer-inner-3__group-5)footer-inner-3-list-2: inner group (.c-footer-inner-3__list-2)footer-inner-3-nav-item: label text, 16 characters (.c-footer-inner-3__nav-item, 2 instances)footer-inner-3-nav-2: inner flex row (.c-footer-inner-3__nav-2), content not capturedfooter-inner-3-group-6: inner block (.c-footer-inner-3__group-6, 3 instances)footer-inner-3-heading-3: heading, 0 characters (.c-footer-inner-3__heading-3, 5 instances)footer-inner-3-text-5: label text, 14 characters (.c-footer-inner-3__text-5, 5 instances)footer-inner-3-list-3: inner group (.c-footer-inner-3__list-3, 5 instances), content not capturedfooter-inner-3-nav-item-2: inner group (.c-footer-inner-3__nav-item-2, 31 instances), content not capturedfooter-inner-3-nav-link-2: link, 5-character label (.c-footer-inner-3__nav-link-2, 34 instances)footer-inner-3-nav-item-3: inner group (.c-footer-inner-3__nav-item-3, 4 instances)footer-inner-3-group-7: inner block (.c-footer-inner-3__group-7, 2 instances)Desktop recipe
<div class="c-footer-inner-3-scope">
<footer class="c-footer-inner-3">
<div class="c-footer-inner-3__inner">
<h2 class="c-footer-inner-3__heading">lorem</h2>
<h3 class="c-footer-inner-3__heading-2">lorem ips</h3>
<div class="c-footer-inner-3__group">
<div class="c-footer-inner-3__group-2">
<div class="c-footer-inner-3__group-3">
<ul class="c-footer-inner-3__list">
<li class="c-footer-inner-3__item">
<span class="c-footer-inner-3__text">lorem ip</span>
<span class="c-footer-inner-3__text-2">
<span class="c-footer-inner-3__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<span class="c-footer-inner-3__text-3">lorem ipsum dolor sit amet conse</span>
</span>
</li>
<li class="c-footer-inner-3__item">
<span class="c-footer-inner-3__text">lorem ip</span>
<span class="c-footer-inner-3__text-2">
<span class="c-footer-inner-3__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consecte</span>
<span class="c-footer-inner-3__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</span>
<span class="c-footer-inner-3__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do</span>
<span class="c-footer-inner-3__text-3">lorem ipsum dolor sit amet conse</span>
<span class="c-footer-inner-3__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum d</span>
<span class="c-footer-inner-3__text-3">l</span>
</span>
</li>
</ul>
</div>
</div>
<p class="c-footer-inner-3__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ip</p>
</div>
<nav class="c-footer-inner-3__nav">
<a class="c-footer-inner-3__nav-link" href="#">
<span class="c-footer-inner-3__group-4"></span>
<span class="c-footer-inner-3__text">lorem</span>
</a>
<div class="c-footer-inner-3__group-5">
<ol class="c-footer-inner-3__list-2">
<li class="c-footer-inner-3__nav-item">lorem ipsum dolo</li>
<li class="c-footer-inner-3__nav-item">lorem ipsum dolor si</li>
</ol>
</div>
</nav>
<nav class="c-footer-inner-3__nav-2">
<div class="c-footer-inner-3__group-6">
<div class="c-footer-inner-3__group-2">
<h3 class="c-footer-inner-3__heading-3">
<span class="c-footer-inner-3__text-5">lorem ipsum do</span>
</h3>
<ul class="c-footer-inner-3__list-3">
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lor</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lore</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem i</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-3__nav-item-3">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsu</a>
</li>
</ul>
</div>
<div class="c-footer-inner-3__group-7">
<h3 class="c-footer-inner-3__heading-3">
<span class="c-footer-inner-3__text-5">lorem ipsum</span>
</h3>
<ul class="c-footer-inner-3__list-3">
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsu</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-3__nav-item-3">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsu</a>
</li>
</ul>
</div>
</div>
<div class="c-footer-inner-3__group-6">
<div class="c-footer-inner-3__group-2">
<h3 class="c-footer-inner-3__heading-3">
<span class="c-footer-inner-3__text-5">lorem i</span>
</h3>
<ul class="c-footer-inner-3__list-3">
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum dolor sit ame</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum dolor s</a>
</li>
<li class="c-footer-inner-3__nav-item-3">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsu</a>
</li>
</ul>
</div>
<div class="c-footer-inner-3__group-7">
<h3 class="c-footer-inner-3__heading-3">
<span class="c-footer-inner-3__text-5">lorem ipsum d</span>
</h3>
<ul class="c-footer-inner-3__list-3">
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ip</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-3__nav-item-3">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ips</a>
</li>
</ul>
</div>
</div>
<div class="c-footer-inner-3__group-6">
<div class="c-footer-inner-3__group-2">
<h3 class="c-footer-inner-3__heading-3">
<span class="c-footer-inner-3__text-5">lorem ipsum</span>
</h3>
<ul class="c-footer-inner-3__list-3">
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsu</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsu</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum dol</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum dolor sit</a>
</li>
<li class="c-footer-inner-3__nav-item-2">
<a class="c-footer-inner-3__nav-link-2" href="#">lorem ipsum d</a>
</li>
<li class="c-footer-inner-3__nav-item-2"></li>
</ul>
</div>
</div>
</nav>
</div>
</footer>
</div>
.c-footer-inner-3-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-inner-3 {
display: block;
border-spacing: 0px;
min-width: 1024px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-inner-3__inner {
display: block;
max-width: 980px;
padding-right: 22px;
padding-left: 22px;
margin-right: auto;
margin-left: auto;
}
.c-footer-inner-3__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 18px;
font-weight: 600;
line-height: 24.0007px;
}
.c-footer-inner-3__heading-2 {
display: block;
width: 1px;
height: 1px;
margin: 5.616px 0px 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-3__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
margin-top: 9.6px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-3__group-2 {
display: block;
}
.c-footer-inner-3__group-3 {
display: block;
color: #6E6E73;
}
.c-footer-inner-3__list {
display: block;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-3__item {
display: list-item;
padding-bottom: 9.6px;
}
.c-footer-inner-3__text {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-footer-inner-3__text-2 {
display: inline;
}
.c-footer-inner-3__text-4 {
display: block;
margin: 0px;
}
.c-footer-inner-3__nav {
display: block;
position: relative;
z-index: 1;
color: #000000B8;
padding-top: 17px;
padding-bottom: 17px;
}
.c-footer-inner-3__nav::before {
content: "";
display: table;
}
.c-footer-inner-3__nav::after {
content: "";
display: table;
}
.c-footer-inner-3__nav-link {
display: block;
position: absolute;
top: 17px;
left: 0px;
z-index: 2;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-3__group-4 {
display: block;
width: 14px;
height: 18px;
position: relative;
z-index: 2;
background-color: #000000B8;
color: transparent;
}
.c-footer-inner-3__group-5 {
display: block;
position: relative;
z-index: 1;
}
.c-footer-inner-3__group-5::before {
content: "";
display: table;
}
.c-footer-inner-3__group-5::after {
content: "";
display: table;
}
.c-footer-inner-3__list-2 {
display: block;
max-height: 9999px;
padding: 0px 0px 0px 25px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-3__nav-item {
display: list-item;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 3px;
margin-right: 7px;
}
.c-footer-inner-3__nav-item::before {
content: "";
display: inline-block;
width: 6px;
height: 11px;
vertical-align: middle;
background-color: #0000007A;
margin-top: -1px;
margin-right: 11px;
}
.c-footer-inner-3__nav-2 {
display: flex;
}
.c-footer-inner-3__group-6 {
display: block;
flex-basis: 25%;
}
.c-footer-inner-3__heading-3 {
display: block;
margin: 0px;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-3__text-5 {
display: block;
font-size: 12px;
line-height: 16.0005px;
margin-right: 20px;
margin-bottom: 9.6px;
}
.c-footer-inner-3__list-3 {
display: block;
padding: 0px;
margin: 0px 20px 0px 0px;
list-style-type: none;
}
.c-footer-inner-3__nav-item-2 {
display: block;
margin-bottom: 9.6px;
}
.c-footer-inner-3__nav-link-2 {
display: inline;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-3__nav-item-3 {
display: block;
}
.c-footer-inner-3__group-7 {
display: block;
padding-top: 24px;
}
.c-footer-inner-3__nav-link:hover {
text-decoration-line: underline;
}
.c-footer-inner-3__nav-link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-3__nav-link-2:hover {
text-decoration-line: underline;
}
.c-footer-inner-3__nav-link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
Mobile anatomy
footer-inner-3-mobile: the component root, a <footer> (.c-footer-inner-3-mobile)footer-inner-3-mobile-inner: inner block (.c-footer-inner-3-mobile__inner)footer-inner-3-mobile-heading: heading, 6 characters (.c-footer-inner-3-mobile__heading)footer-inner-3-mobile-heading-2: heading, 9 characters (.c-footer-inner-3-mobile__heading-2)footer-inner-3-mobile-group: inner block (.c-footer-inner-3-mobile__group)footer-inner-3-mobile-group-2: inner block (.c-footer-inner-3-mobile__group-2, 6 instances)footer-inner-3-mobile-group-3: inner block (.c-footer-inner-3-mobile__group-3)footer-inner-3-mobile-list: inner group (.c-footer-inner-3-mobile__list)footer-inner-3-mobile-item: inner group (.c-footer-inner-3-mobile__item, 2 instances)footer-inner-3-mobile-text: label text, 8 characters (.c-footer-inner-3-mobile__text, 3 instances)footer-inner-3-mobile-text-2: label text, 0 characters (.c-footer-inner-3-mobile__text-2, 2 instances), content not capturedfooter-inner-3-mobile-text-3: label text, 823 characters (.c-footer-inner-3-mobile__text-3, 25 instances)footer-inner-3-mobile-text-4: label text, 162 characters (.c-footer-inner-3-mobile__text-4)footer-inner-3-mobile-nav: inner group (.c-footer-inner-3-mobile__nav)footer-inner-3-mobile-nav-link: link (.c-footer-inner-3-mobile__nav-link)footer-inner-3-mobile-group-4: inner group (.c-footer-inner-3-mobile__group-4)footer-inner-3-mobile-group-5: inner block (.c-footer-inner-3-mobile__group-5)footer-inner-3-mobile-list-2: inner group (.c-footer-inner-3-mobile__list-2)footer-inner-3-mobile-nav-item: label text, 16 characters (.c-footer-inner-3-mobile__nav-item, 2 instances)footer-inner-3-mobile-nav-2: inner flex column (.c-footer-inner-3-mobile__nav-2)footer-inner-3-mobile-group-6: inner block (.c-footer-inner-3-mobile__group-6, 11 instances)footer-inner-3-mobile-heading-3: heading, 0 characters (.c-footer-inner-3-mobile__heading-3, 11 instances)footer-inner-3-mobile-button: button (.c-footer-inner-3-mobile__button, 11 instances)footer-inner-3-mobile-group-7: inner flex row (.c-footer-inner-3-mobile__group-7, 11 instances)footer-inner-3-mobile-icon: icon placeholder, 11x6px (.c-footer-inner-3-mobile__icon, 11 instances)footer-inner-3-mobile-group-8: inner block (.c-footer-inner-3-mobile__group-8)footer-inner-3-mobile-group-9: inner block (.c-footer-inner-3-mobile__group-9)footer-inner-3-mobile-group-10: inner group (.c-footer-inner-3-mobile__group-10)footer-inner-3-mobile-link: link, 19-character label (.c-footer-inner-3-mobile__link)footer-inner-3-mobile-link-2: link, 14-character label (.c-footer-inner-3-mobile__link-2)footer-inner-3-mobile-text-5: label text, 0 characters (.c-footer-inner-3-mobile__text-5)footer-inner-3-mobile-group-11: inner block (.c-footer-inner-3-mobile__group-11)footer-inner-3-mobile-group-12: inner block (.c-footer-inner-3-mobile__group-12)footer-inner-3-mobile-link-3: link, 13-character label (.c-footer-inner-3-mobile__link-3)footer-inner-3-mobile-group-13: inner block (.c-footer-inner-3-mobile__group-13)footer-inner-3-mobile-text-6: label text, 48 characters (.c-footer-inner-3-mobile__text-6)footer-inner-3-mobile-list-3: inner group (.c-footer-inner-3-mobile__list-3), content not capturedfooter-inner-3-mobile-item-2: inner group (.c-footer-inner-3-mobile__item-2, 4 instances), content not capturedfooter-inner-3-mobile-link-4: link, 14-character label (.c-footer-inner-3-mobile__link-4, 3 instances)Mobile recipe
<div class="c-footer-inner-3-mobile-scope">
<footer class="c-footer-inner-3-mobile">
<div class="c-footer-inner-3-mobile__inner">
<h2 class="c-footer-inner-3-mobile__heading">lorem</h2>
<h3 class="c-footer-inner-3-mobile__heading-2">lorem ips</h3>
<div class="c-footer-inner-3-mobile__group">
<div class="c-footer-inner-3-mobile__group-2">
<div class="c-footer-inner-3-mobile__group-3">
<ul class="c-footer-inner-3-mobile__list">
<li class="c-footer-inner-3-mobile__item">
<span class="c-footer-inner-3-mobile__text">lorem ip</span>
<span class="c-footer-inner-3-mobile__text-2">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</span>
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum dolor sit amet conse</span>
</span>
</li>
<li class="c-footer-inner-3-mobile__item">
<span class="c-footer-inner-3-mobile__text">lorem ip</span>
<span class="c-footer-inner-3-mobile__text-2">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consecte</span>
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</span>
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do</span>
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum dolor sit amet conse</span>
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum d</span>
<span class="c-footer-inner-3-mobile__text-3">l</span>
</span>
</li>
</ul>
</div>
</div>
<p class="c-footer-inner-3-mobile__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ip</p>
</div>
<nav class="c-footer-inner-3-mobile__nav">
<a class="c-footer-inner-3-mobile__nav-link" href="#">
<span class="c-footer-inner-3-mobile__group-4"></span>
<span class="c-footer-inner-3-mobile__text">lorem</span>
</a>
<div class="c-footer-inner-3-mobile__group-5">
<ol class="c-footer-inner-3-mobile__list-2">
<li class="c-footer-inner-3-mobile__nav-item">lorem ipsum dolo</li>
<li class="c-footer-inner-3-mobile__nav-item">lorem ipsum dolor si</li>
</ol>
</div>
</nav>
<nav class="c-footer-inner-3-mobile__nav-2">
<div class="c-footer-inner-3-mobile__group-2">
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum do</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-3-mobile__group-2">
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem i</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum d</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-3-mobile__group-2">
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-3-mobile__group-2">
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum d</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum do</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum do</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-3-mobile__group-2">
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-3-mobile__group-6">
<h3 class="c-footer-inner-3-mobile__heading-3">
<button class="c-footer-inner-3-mobile__button" type="button">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-3-mobile__group-7">
<span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
</nav>
<div class="c-footer-inner-3-mobile__group-8">
<div class="c-footer-inner-3-mobile__group-9">
<p class="c-footer-inner-3-mobile__group-10">
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum dolor</span>
<a class="c-footer-inner-3-mobile__link" href="#">lorem ipsum dolor s</a>
<span class="c-footer-inner-3-mobile__text-3">lo</span>
<a class="c-footer-inner-3-mobile__link-2" href="#">lorem ipsum do</a>
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum</span>
<span class="c-footer-inner-3-mobile__text-5">
<span class="c-footer-inner-3-mobile__text-3">lore</span>
<span class="c-footer-inner-3-mobile__text-3">lorem ipsum do</span>
</span>
<span class="c-footer-inner-3-mobile__text-3">l</span>
</p>
</div>
<div class="c-footer-inner-3-mobile__group-11">
<div class="c-footer-inner-3-mobile__group-12">
<a class="c-footer-inner-3-mobile__link-3" href="#">lorem ipsum d</a>
</div>
<div class="c-footer-inner-3-mobile__group-13">
<div class="c-footer-inner-3-mobile__text-6">lorem ipsum dolor sit amet consectetur adipiscin</div>
<ul class="c-footer-inner-3-mobile__list-3">
<li class="c-footer-inner-3-mobile__item-2">
<a class="c-footer-inner-3-mobile__link-4" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-inner-3-mobile__item-2">
<a class="c-footer-inner-3-mobile__link-4" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-3-mobile__item-2">
<a class="c-footer-inner-3-mobile__link-4" href="#">lorem ipsum dolor</a>
</li>
<li class="c-footer-inner-3-mobile__item-2"></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
.c-footer-inner-3-mobile-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-inner-3-mobile {
display: block;
border-spacing: 0px;
min-width: 320px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-inner-3-mobile__inner {
display: block;
max-width: 980px;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
}
.c-footer-inner-3-mobile__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 18px;
font-weight: 600;
line-height: 24.0007px;
}
.c-footer-inner-3-mobile__heading-2 {
display: block;
width: 1px;
height: 1px;
margin: 5.616px 0px 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-3-mobile__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
margin-top: 9.6px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-3-mobile__group-2 {
display: block;
}
.c-footer-inner-3-mobile__group-3 {
display: block;
color: #6E6E73;
}
.c-footer-inner-3-mobile__list {
display: block;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-3-mobile__item {
display: list-item;
padding-bottom: 9.6px;
}
.c-footer-inner-3-mobile__text {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-footer-inner-3-mobile__text-2 {
display: inline;
}
.c-footer-inner-3-mobile__text-4 {
display: block;
margin: 0px;
}
.c-footer-inner-3-mobile__nav {
display: block;
position: relative;
z-index: 1;
color: #000000B8;
padding-top: 17px;
padding-bottom: 17px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-3-mobile__nav::before {
content: "";
display: table;
}
.c-footer-inner-3-mobile__nav::after {
content: "";
display: table;
}
.c-footer-inner-3-mobile__nav-link {
display: block;
position: absolute;
top: 17px;
left: 0px;
z-index: 2;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-3-mobile__group-4 {
display: block;
width: 14px;
height: 18px;
position: relative;
z-index: 2;
background-color: #000000B8;
color: transparent;
}
.c-footer-inner-3-mobile__group-5 {
display: block;
position: relative;
z-index: 1;
}
.c-footer-inner-3-mobile__group-5::before {
content: "";
display: table;
}
.c-footer-inner-3-mobile__group-5::after {
content: "";
display: table;
}
.c-footer-inner-3-mobile__list-2 {
display: block;
max-height: 9999px;
padding: 0px 0px 0px 25px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-3-mobile__nav-item {
display: list-item;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 3px;
margin-right: 7px;
}
.c-footer-inner-3-mobile__nav-item::before {
content: "";
display: inline-block;
width: 6px;
height: 11px;
vertical-align: middle;
background-color: #0000007A;
margin-top: -1px;
margin-right: 11px;
}
.c-footer-inner-3-mobile__nav-2 {
display: flex;
flex-direction: column;
}
.c-footer-inner-3-mobile__group-6 {
display: block;
box-sizing: border-box;
width: calc(100% + 8px);
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
padding-right: 4px;
padding-bottom: 1px;
padding-left: 4px;
margin-left: -4px;
}
.c-footer-inner-3-mobile__group-6::after {
content: "";
display: block;
width: 358px;
height: 1px;
position: absolute;
top: 36px;
right: 4px;
bottom: 0px;
left: 4px;
z-index: 3;
background-color: #00000029;
}
.c-footer-inner-3-mobile__heading-3 {
display: block;
margin: 0px;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-3-mobile__button {
display: block;
width: 100%;
padding: 10px 0px;
position: relative;
z-index: 2;
background-color: #F5F5F7;
color: #000000E0;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
text-transform: none;
text-align: start;
}
.c-footer-inner-3-mobile__button::after {
content: "";
display: block;
width: 366px;
height: 36px;
position: absolute;
top: 0px;
right: -4px;
bottom: 0px;
left: -4px;
}
.c-footer-inner-3-mobile__group-7 {
display: flex;
justify-content: center;
align-items: center;
width: 11px;
font-size: 14px;
line-height: 18.6672px;
transition: transform 0.3s ease;
margin-top: 5px;
}
.c-footer-inner-3-mobile__icon {
display: block;
flex-shrink: 0;
width: 11px;
height: 6px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-footer-inner-3-mobile__group-8 {
display: block;
padding-top: 17px;
padding-bottom: 9px;
}
.c-footer-inner-3-mobile__group-9 {
display: block;
max-height: 9999px;
padding-bottom: 8px;
margin-bottom: 8px;
}
.c-footer-inner-3-mobile__group-10 {
display: block;
margin: 0px;
}
.c-footer-inner-3-mobile__link {
display: inline;
color: #0066CC;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #0066CC;
white-space: nowrap;
}
.c-footer-inner-3-mobile__link-2 {
display: inline;
color: #0066CC;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #0066CC;
}
.c-footer-inner-3-mobile__text-5 {
display: inline-block;
white-space: nowrap;
}
.c-footer-inner-3-mobile__group-11 {
display: block;
justify-content: space-between;
}
.c-footer-inner-3-mobile__group-12 {
display: block;
position: relative;
top: -3px;
z-index: 2;
white-space: nowrap;
padding-top: 4px;
margin-top: 5px;
}
.c-footer-inner-3-mobile__link-3 {
display: inline-block;
position: relative;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-3-mobile__link-3::after {
content: "";
display: block;
width: 71px;
height: 16px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.c-footer-inner-3-mobile__group-13 {
display: block;
position: relative;
top: -3px;
z-index: 1;
padding-top: 12px;
}
.c-footer-inner-3-mobile__group-13::before {
content: "";
display: table;
}
.c-footer-inner-3-mobile__group-13::after {
content: "";
display: table;
}
.c-footer-inner-3-mobile__text-6 {
display: block;
max-height: 9999px;
list-style-type: none;
margin-top: 5px;
}
.c-footer-inner-3-mobile__list-3 {
display: block;
padding: 0px;
margin: 5px 0px 0px;
position: relative;
top: -5px;
z-index: 1;
list-style-type: none;
}
.c-footer-inner-3-mobile__item-2 {
display: inline-block;
position: relative;
margin-top: 5px;
margin-right: 6px;
}
.c-footer-inner-3-mobile__item-2::before {
content: "";
display: block;
width: 73px;
height: 16px;
position: absolute;
top: 0px;
right: 9px;
bottom: 0px;
left: 0px;
}
.c-footer-inner-3-mobile__item-2::after {
content: "";
display: block;
width: 1px;
height: 10px;
position: absolute;
top: 0px;
right: -1px;
bottom: 0px;
left: 82.4219px;
background-color: #0000007A;
margin-top: 3px;
margin-bottom: 3px;
}
.c-footer-inner-3-mobile__link-4 {
display: inline-block;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
white-space: nowrap;
padding-right: 9px;
padding-left: 9px;
margin-left: -9px;
}
.c-footer-inner-3-mobile__nav-link:hover {
text-decoration-line: underline;
}
.c-footer-inner-3-mobile__nav-link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-3-mobile__button:hover {
color: #000000;
}
.c-footer-inner-3-mobile__button:hover::after {
color: #000000;
}
.c-footer-inner-3-mobile__button:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-3-mobile__button:focus::after {
outline: 2px solid #0071E3;
outline-offset: -2px;
}
.c-footer-inner-3-mobile__link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-3-mobile__link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-3-mobile__link-3:hover {
text-decoration-line: underline;
}
.c-footer-inner-3-mobile__link-3:focus {
outline: none;
}
.c-footer-inner-3-mobile__link-3:focus::after {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-3-mobile__link-4:hover {
text-decoration-line: underline;
}
.c-footer-inner-3-mobile__link-4:focus {
outline: none;
}
States
footer-inner-3-nav-link hover: text-decoration-line underlinefooter-inner-3-nav-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-3-nav-link-2 hover: text-decoration-line underlinefooter-inner-3-nav-link-2 focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-3-mobile-nav-link hover: text-decoration-line underlinefooter-inner-3-mobile-nav-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-3-mobile-button hover (footer-inner-3-mobile-button-hover): color #000000, ::after color #000000footer-inner-3-mobile-button focus: outline 2px solid #0071E3, outline-offset 1px, ::after outline 2px solid #0071E3, ::after outline-offset -2pxfooter-inner-3-mobile-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-3-mobile-link-2 focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-3-mobile-link-3 hover: text-decoration-line underlinefooter-inner-3-mobile-link-3 focus: outline none, ::after outline 2px solid #0071E3, ::after outline-offset 1pxfooter-inner-3-mobile-link-4 hover: text-decoration-line underlinefooter-inner-3-mobile-link-4 focus: outline noneFooter (inner, 4)
Verification: desktop flagged, the footer-inner-4-inner height did not reproduce the measured 773px after 2 correction attempts; mobile flagged, the recipe could not be rendered on its own.
Variant observed on https://www.apple.com/us/shop/goto/trade_in.
Anatomy
footer-inner-4: the component root, a <footer> (.c-footer-inner-4)footer-inner-4-inner: inner block (.c-footer-inner-4__inner), content not capturedfooter-inner-4-heading: heading, 6 characters (.c-footer-inner-4__heading)footer-inner-4-heading-2: heading, 9 characters (.c-footer-inner-4__heading-2)footer-inner-4-group: inner block (.c-footer-inner-4__group)footer-inner-4-group-2: inner block (.c-footer-inner-4__group-2)footer-inner-4-item: inner group (.c-footer-inner-4__item)footer-inner-4-text: label text, 8 characters (.c-footer-inner-4__text, 2 instances)footer-inner-4-text-2: label text, 1068 characters (.c-footer-inner-4__text-2)footer-inner-4-text-3: label text, 162 characters (.c-footer-inner-4__text-3)footer-inner-4-nav: inner group (.c-footer-inner-4__nav)footer-inner-4-nav-link: link (.c-footer-inner-4__nav-link)footer-inner-4-group-3: inner group (.c-footer-inner-4__group-3)footer-inner-4-group-4: inner block (.c-footer-inner-4__group-4)footer-inner-4-list: inner group (.c-footer-inner-4__list)footer-inner-4-nav-item: label text, 14 characters (.c-footer-inner-4__nav-item)footer-inner-4-nav-2: inner flex row (.c-footer-inner-4__nav-2), content not capturedfooter-inner-4-group-5: inner block (.c-footer-inner-4__group-5, 3 instances)footer-inner-4-group-6: inner block (.c-footer-inner-4__group-6, 3 instances)footer-inner-4-heading-3: heading, 0 characters (.c-footer-inner-4__heading-3, 5 instances)footer-inner-4-text-4: label text, 14 characters (.c-footer-inner-4__text-4, 5 instances)footer-inner-4-list-2: inner group (.c-footer-inner-4__list-2, 5 instances), content not capturedfooter-inner-4-nav-item-2: inner group (.c-footer-inner-4__nav-item-2, 33 instances)footer-inner-4-nav-link-2: link, 5-character label (.c-footer-inner-4__nav-link-2, 37 instances)footer-inner-4-nav-item-3: inner group (.c-footer-inner-4__nav-item-3, 4 instances)footer-inner-4-group-7: inner block (.c-footer-inner-4__group-7, 2 instances)Desktop recipe
<div class="c-footer-inner-4-scope">
<footer class="c-footer-inner-4">
<div class="c-footer-inner-4__inner">
<h2 class="c-footer-inner-4__heading">lorem</h2>
<h3 class="c-footer-inner-4__heading-2">lorem ips</h3>
<div class="c-footer-inner-4__group">
<div class="c-footer-inner-4__group-2">
<li class="c-footer-inner-4__item">
<span class="c-footer-inner-4__text">lorem ip</span>
<span class="c-footer-inner-4__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusm</span>
</li>
</div>
<p class="c-footer-inner-4__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ip</p>
</div>
<nav class="c-footer-inner-4__nav">
<a class="c-footer-inner-4__nav-link" href="#">
<span class="c-footer-inner-4__group-3"></span>
<span class="c-footer-inner-4__text">lorem</span>
</a>
<div class="c-footer-inner-4__group-4">
<ol class="c-footer-inner-4__list">
<li class="c-footer-inner-4__nav-item">lorem ipsum do</li>
</ol>
</div>
</nav>
<nav class="c-footer-inner-4__nav-2">
<div class="c-footer-inner-4__group-5">
<div class="c-footer-inner-4__group-6">
<h3 class="c-footer-inner-4__heading-3">
<span class="c-footer-inner-4__text-4">lorem ipsum do</span>
</h3>
<ul class="c-footer-inner-4__list-2">
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lor</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lore</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem i</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-4__nav-item-3">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsu</a>
</li>
</ul>
</div>
<div class="c-footer-inner-4__group-7">
<h3 class="c-footer-inner-4__heading-3">
<span class="c-footer-inner-4__text-4">lorem ipsum</span>
</h3>
<ul class="c-footer-inner-4__list-2">
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsu</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-4__nav-item-3">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsu</a>
</li>
</ul>
</div>
</div>
<div class="c-footer-inner-4__group-5">
<div class="c-footer-inner-4__group-6">
<h3 class="c-footer-inner-4__heading-3">
<span class="c-footer-inner-4__text-4">lorem i</span>
</h3>
<ul class="c-footer-inner-4__list-2">
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum dolor sit ame</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum dolor s</a>
</li>
<li class="c-footer-inner-4__nav-item-3">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsu</a>
</li>
</ul>
</div>
<div class="c-footer-inner-4__group-7">
<h3 class="c-footer-inner-4__heading-3">
<span class="c-footer-inner-4__text-4">lorem ipsum d</span>
</h3>
<ul class="c-footer-inner-4__list-2">
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ip</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-4__nav-item-3">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ips</a>
</li>
</ul>
</div>
</div>
<div class="c-footer-inner-4__group-5">
<div class="c-footer-inner-4__group-6">
<h3 class="c-footer-inner-4__heading-3">
<span class="c-footer-inner-4__text-4">lorem ipsum</span>
</h3>
<ul class="c-footer-inner-4__list-2">
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsu</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsu</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum dol</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum dolor sit</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum d</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ips</a>
</li>
<li class="c-footer-inner-4__nav-item-2">
<a class="c-footer-inner-4__nav-link-2" href="#">lorem ipsum dolor sit</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</footer>
</div>
.c-footer-inner-4-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-inner-4 {
display: block;
border-spacing: 0px;
min-width: 1024px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-inner-4__inner {
display: block;
max-width: 980px;
padding-right: 22px;
padding-left: 22px;
margin-right: auto;
margin-left: auto;
}
.c-footer-inner-4__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 18px;
font-weight: 600;
line-height: 24.0007px;
}
.c-footer-inner-4__heading-2 {
display: block;
width: 1px;
height: 1px;
margin: 5.616px 0px 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-4__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
margin-top: 9.6px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-4__group-2 {
display: block;
color: #6E6E73;
}
.c-footer-inner-4__item {
display: list-item;
list-style-type: none;
padding-bottom: 9.6px;
}
.c-footer-inner-4__text {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-footer-inner-4__text-3 {
display: block;
margin: 0px;
}
.c-footer-inner-4__nav {
display: block;
position: relative;
z-index: 1;
color: #000000B8;
padding-top: 17px;
padding-bottom: 17px;
}
.c-footer-inner-4__nav::before {
content: "";
display: table;
}
.c-footer-inner-4__nav::after {
content: "";
display: table;
}
.c-footer-inner-4__nav-link {
display: block;
position: absolute;
top: 17px;
left: 0px;
z-index: 2;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-4__group-3 {
display: block;
width: 14px;
height: 18px;
position: relative;
z-index: 2;
background-color: #000000B8;
color: transparent;
}
.c-footer-inner-4__group-4 {
display: block;
position: relative;
z-index: 1;
}
.c-footer-inner-4__group-4::before {
content: "";
display: table;
}
.c-footer-inner-4__group-4::after {
content: "";
display: table;
}
.c-footer-inner-4__list {
display: block;
max-height: 9999px;
padding: 0px 0px 0px 25px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-4__nav-item {
display: list-item;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 3px;
margin-right: 7px;
}
.c-footer-inner-4__nav-item::before {
content: "";
display: inline-block;
width: 6px;
height: 11px;
vertical-align: middle;
background-color: #0000007A;
margin-top: -1px;
margin-right: 11px;
}
.c-footer-inner-4__nav-2 {
display: flex;
}
.c-footer-inner-4__group-5 {
display: block;
flex-basis: 25%;
}
.c-footer-inner-4__group-6 {
display: block;
}
.c-footer-inner-4__heading-3 {
display: block;
margin: 0px;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-4__text-4 {
display: block;
font-size: 12px;
line-height: 16.0005px;
margin-right: 20px;
margin-bottom: 9.6px;
}
.c-footer-inner-4__list-2 {
display: block;
padding: 0px;
margin: 0px 20px 0px 0px;
list-style-type: none;
}
.c-footer-inner-4__nav-item-2 {
display: block;
margin-bottom: 9.6px;
}
.c-footer-inner-4__nav-link-2 {
display: inline;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-4__nav-item-3 {
display: block;
}
.c-footer-inner-4__group-7 {
display: block;
padding-top: 24px;
}
.c-footer-inner-4__nav-link:hover {
text-decoration-line: underline;
}
.c-footer-inner-4__nav-link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-4__nav-link-2:hover {
text-decoration-line: underline;
}
.c-footer-inner-4__nav-link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
Mobile anatomy
footer-inner-4-mobile: the component root, a <footer> (.c-footer-inner-4-mobile)footer-inner-4-mobile-inner: inner block (.c-footer-inner-4-mobile__inner)footer-inner-4-mobile-heading: heading, 6 characters (.c-footer-inner-4-mobile__heading)footer-inner-4-mobile-heading-2: heading, 9 characters (.c-footer-inner-4-mobile__heading-2)footer-inner-4-mobile-group: inner block (.c-footer-inner-4-mobile__group)footer-inner-4-mobile-group-2: inner block (.c-footer-inner-4-mobile__group-2)footer-inner-4-mobile-item: inner group (.c-footer-inner-4-mobile__item)footer-inner-4-mobile-text: label text, 8 characters (.c-footer-inner-4-mobile__text, 2 instances)footer-inner-4-mobile-text-2: label text, 1068 characters (.c-footer-inner-4-mobile__text-2, 18 instances)footer-inner-4-mobile-text-3: label text, 162 characters (.c-footer-inner-4-mobile__text-3)footer-inner-4-mobile-nav: inner group (.c-footer-inner-4-mobile__nav)footer-inner-4-mobile-nav-link: link (.c-footer-inner-4-mobile__nav-link)footer-inner-4-mobile-group-3: inner group (.c-footer-inner-4-mobile__group-3)footer-inner-4-mobile-group-4: inner block (.c-footer-inner-4-mobile__group-4)footer-inner-4-mobile-list: inner group (.c-footer-inner-4-mobile__list)footer-inner-4-mobile-nav-item: label text, 14 characters (.c-footer-inner-4-mobile__nav-item)footer-inner-4-mobile-nav-2: inner flex column (.c-footer-inner-4-mobile__nav-2)footer-inner-4-mobile-group-5: inner block (.c-footer-inner-4-mobile__group-5, 5 instances)footer-inner-4-mobile-group-6: inner block (.c-footer-inner-4-mobile__group-6, 11 instances)footer-inner-4-mobile-heading-3: heading, 0 characters (.c-footer-inner-4-mobile__heading-3, 11 instances)footer-inner-4-mobile-button: button (.c-footer-inner-4-mobile__button, 11 instances)footer-inner-4-mobile-group-7: inner flex row (.c-footer-inner-4-mobile__group-7, 11 instances)footer-inner-4-mobile-icon: icon placeholder, 11x6px (.c-footer-inner-4-mobile__icon, 11 instances)footer-inner-4-mobile-group-8: inner block (.c-footer-inner-4-mobile__group-8)footer-inner-4-mobile-group-9: inner block (.c-footer-inner-4-mobile__group-9)footer-inner-4-mobile-group-10: inner group (.c-footer-inner-4-mobile__group-10)footer-inner-4-mobile-link: link, 19-character label (.c-footer-inner-4-mobile__link)footer-inner-4-mobile-link-2: link, 14-character label (.c-footer-inner-4-mobile__link-2)footer-inner-4-mobile-text-4: label text, 0 characters (.c-footer-inner-4-mobile__text-4)footer-inner-4-mobile-group-11: inner block (.c-footer-inner-4-mobile__group-11)footer-inner-4-mobile-group-12: inner block (.c-footer-inner-4-mobile__group-12)footer-inner-4-mobile-link-3: link, 13-character label (.c-footer-inner-4-mobile__link-3)footer-inner-4-mobile-group-13: inner block (.c-footer-inner-4-mobile__group-13)footer-inner-4-mobile-text-5: label text, 48 characters (.c-footer-inner-4-mobile__text-5)footer-inner-4-mobile-list-2: inner group (.c-footer-inner-4-mobile__list-2)footer-inner-4-mobile-item-2: inner group (.c-footer-inner-4-mobile__item-2, 5 instances)footer-inner-4-mobile-link-4: link, 14-character label (.c-footer-inner-4-mobile__link-4, 5 instances)Mobile recipe
<div class="c-footer-inner-4-mobile-scope">
<footer class="c-footer-inner-4-mobile">
<div class="c-footer-inner-4-mobile__inner">
<h2 class="c-footer-inner-4-mobile__heading">lorem</h2>
<h3 class="c-footer-inner-4-mobile__heading-2">lorem ips</h3>
<div class="c-footer-inner-4-mobile__group">
<div class="c-footer-inner-4-mobile__group-2">
<li class="c-footer-inner-4-mobile__item">
<span class="c-footer-inner-4-mobile__text">lorem ip</span>
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusm</span>
</li>
</div>
<p class="c-footer-inner-4-mobile__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ip</p>
</div>
<nav class="c-footer-inner-4-mobile__nav">
<a class="c-footer-inner-4-mobile__nav-link" href="#">
<span class="c-footer-inner-4-mobile__group-3"></span>
<span class="c-footer-inner-4-mobile__text">lorem</span>
</a>
<div class="c-footer-inner-4-mobile__group-4">
<ol class="c-footer-inner-4-mobile__list">
<li class="c-footer-inner-4-mobile__nav-item">lorem ipsum do</li>
</ol>
</div>
</nav>
<nav class="c-footer-inner-4-mobile__nav-2">
<div class="c-footer-inner-4-mobile__group-5">
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum do</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-4-mobile__group-5">
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem i</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum d</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-4-mobile__group-5">
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-4-mobile__group-5">
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum d</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum do</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum do</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
<div class="c-footer-inner-4-mobile__group-5">
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
<div class="c-footer-inner-4-mobile__group-6">
<h3 class="c-footer-inner-4-mobile__heading-3">
<button class="c-footer-inner-4-mobile__button" type="button">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum</span>
<span class="c-footer-inner-4-mobile__group-7">
<span class="c-footer-inner-4-mobile__icon" aria-hidden="true"></span>
</span>
</button>
</h3>
</div>
</div>
</nav>
<div class="c-footer-inner-4-mobile__group-8">
<div class="c-footer-inner-4-mobile__group-9">
<p class="c-footer-inner-4-mobile__group-10">
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum dolor</span>
<a class="c-footer-inner-4-mobile__link" href="#">lorem ipsum dolor s</a>
<span class="c-footer-inner-4-mobile__text-2">lo</span>
<a class="c-footer-inner-4-mobile__link-2" href="#">lorem ipsum do</a>
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum</span>
<span class="c-footer-inner-4-mobile__text-4">
<span class="c-footer-inner-4-mobile__text-2">lore</span>
<span class="c-footer-inner-4-mobile__text-2">lorem ipsum do</span>
</span>
<span class="c-footer-inner-4-mobile__text-2">l</span>
</p>
</div>
<div class="c-footer-inner-4-mobile__group-11">
<div class="c-footer-inner-4-mobile__group-12">
<a class="c-footer-inner-4-mobile__link-3" href="#">lorem ipsum d</a>
</div>
<div class="c-footer-inner-4-mobile__group-13">
<div class="c-footer-inner-4-mobile__text-5">lorem ipsum dolor sit amet consectetur adipiscin</div>
<ul class="c-footer-inner-4-mobile__list-2">
<li class="c-footer-inner-4-mobile__item-2">
<a class="c-footer-inner-4-mobile__link-4" href="#">lorem ipsum do</a>
</li>
<li class="c-footer-inner-4-mobile__item-2">
<a class="c-footer-inner-4-mobile__link-4" href="#">lorem ipsum</a>
</li>
<li class="c-footer-inner-4-mobile__item-2">
<a class="c-footer-inner-4-mobile__link-4" href="#">lorem ipsum dolor</a>
</li>
<li class="c-footer-inner-4-mobile__item-2">
<a class="c-footer-inner-4-mobile__link-4" href="#">lorem</a>
</li>
<li class="c-footer-inner-4-mobile__item-2">
<a class="c-footer-inner-4-mobile__link-4" href="#">lorem ip</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
.c-footer-inner-4-mobile-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-footer-inner-4-mobile {
display: block;
border-spacing: 0px;
min-width: 320px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-inner-4-mobile__inner {
display: block;
max-width: 980px;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
}
.c-footer-inner-4-mobile__heading {
display: block;
width: 1px;
height: 1px;
margin: 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 18px;
font-weight: 600;
line-height: 24.0007px;
}
.c-footer-inner-4-mobile__heading-2 {
display: block;
width: 1px;
height: 1px;
margin: 5.616px 0px 0px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-4-mobile__group {
display: block;
padding-top: 17px;
padding-bottom: 11px;
margin-top: 9.6px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-4-mobile__group-2 {
display: block;
color: #6E6E73;
}
.c-footer-inner-4-mobile__item {
display: list-item;
list-style-type: none;
padding-bottom: 9.6px;
}
.c-footer-inner-4-mobile__text {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-footer-inner-4-mobile__text-3 {
display: block;
margin: 0px;
}
.c-footer-inner-4-mobile__nav {
display: block;
position: relative;
z-index: 1;
color: #000000B8;
padding-top: 17px;
padding-bottom: 17px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00000029;
}
.c-footer-inner-4-mobile__nav::before {
content: "";
display: table;
}
.c-footer-inner-4-mobile__nav::after {
content: "";
display: table;
}
.c-footer-inner-4-mobile__nav-link {
display: block;
position: absolute;
top: 17px;
left: 0px;
z-index: 2;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-4-mobile__group-3 {
display: block;
width: 14px;
height: 18px;
position: relative;
z-index: 2;
background-color: #000000B8;
color: transparent;
}
.c-footer-inner-4-mobile__group-4 {
display: block;
position: relative;
z-index: 1;
}
.c-footer-inner-4-mobile__group-4::before {
content: "";
display: table;
}
.c-footer-inner-4-mobile__group-4::after {
content: "";
display: table;
}
.c-footer-inner-4-mobile__list {
display: block;
max-height: 9999px;
padding: 0px 0px 0px 25px;
margin: 0px;
list-style-type: none;
}
.c-footer-inner-4-mobile__nav-item {
display: list-item;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 3px;
margin-right: 7px;
}
.c-footer-inner-4-mobile__nav-item::before {
content: "";
display: inline-block;
width: 6px;
height: 11px;
vertical-align: middle;
background-color: #0000007A;
margin-top: -1px;
margin-right: 11px;
}
.c-footer-inner-4-mobile__nav-2 {
display: flex;
flex-direction: column;
}
.c-footer-inner-4-mobile__group-5 {
display: block;
}
.c-footer-inner-4-mobile__group-6 {
display: block;
box-sizing: border-box;
width: calc(100% + 8px);
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
padding-right: 4px;
padding-bottom: 1px;
padding-left: 4px;
margin-left: -4px;
}
.c-footer-inner-4-mobile__group-6::after {
content: "";
display: block;
width: 358px;
height: 1px;
position: absolute;
top: 36px;
right: 4px;
bottom: 0px;
left: 4px;
z-index: 3;
background-color: #00000029;
}
.c-footer-inner-4-mobile__heading-3 {
display: block;
margin: 0px;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-inner-4-mobile__button {
display: block;
width: 100%;
padding: 10px 0px;
position: relative;
z-index: 2;
background-color: #F5F5F7;
color: #000000E0;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
text-transform: none;
text-align: start;
}
.c-footer-inner-4-mobile__button::after {
content: "";
display: block;
width: 366px;
height: 36px;
position: absolute;
top: 0px;
right: -4px;
bottom: 0px;
left: -4px;
}
.c-footer-inner-4-mobile__group-7 {
display: flex;
justify-content: center;
align-items: center;
width: 11px;
font-size: 14px;
line-height: 18.6672px;
transition: transform 0.3s ease;
margin-top: 5px;
}
.c-footer-inner-4-mobile__icon {
display: block;
flex-shrink: 0;
width: 11px;
height: 6px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-footer-inner-4-mobile__group-8 {
display: block;
padding-top: 17px;
padding-bottom: 9px;
}
.c-footer-inner-4-mobile__group-9 {
display: block;
max-height: 9999px;
padding-bottom: 8px;
margin-bottom: 8px;
}
.c-footer-inner-4-mobile__group-10 {
display: block;
margin: 0px;
}
.c-footer-inner-4-mobile__link {
display: inline;
color: #0066CC;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #0066CC;
white-space: nowrap;
}
.c-footer-inner-4-mobile__link-2 {
display: inline;
color: #0066CC;
cursor: pointer;
text-decoration-line: underline;
text-decoration-color: #0066CC;
}
.c-footer-inner-4-mobile__text-4 {
display: inline-block;
white-space: nowrap;
}
.c-footer-inner-4-mobile__group-11 {
display: block;
justify-content: space-between;
}
.c-footer-inner-4-mobile__group-12 {
display: block;
position: relative;
top: -3px;
z-index: 2;
white-space: nowrap;
padding-top: 4px;
margin-top: 5px;
}
.c-footer-inner-4-mobile__link-3 {
display: inline-block;
position: relative;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-footer-inner-4-mobile__link-3::after {
content: "";
display: block;
width: 71px;
height: 16px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.c-footer-inner-4-mobile__group-13 {
display: block;
position: relative;
top: -3px;
z-index: 1;
padding-top: 12px;
}
.c-footer-inner-4-mobile__group-13::before {
content: "";
display: table;
}
.c-footer-inner-4-mobile__group-13::after {
content: "";
display: table;
}
.c-footer-inner-4-mobile__text-5 {
display: block;
max-height: 9999px;
list-style-type: none;
margin-top: 5px;
}
.c-footer-inner-4-mobile__list-2 {
display: block;
padding: 0px;
margin: 5px 0px 0px;
position: relative;
top: -5px;
z-index: 1;
list-style-type: none;
}
.c-footer-inner-4-mobile__item-2 {
display: inline-block;
position: relative;
margin-top: 5px;
margin-right: 6px;
}
.c-footer-inner-4-mobile__item-2::before {
content: "";
display: block;
width: 73px;
height: 16px;
position: absolute;
top: 0px;
right: 9px;
bottom: 0px;
left: 0px;
}
.c-footer-inner-4-mobile__item-2::after {
content: "";
display: block;
width: 1px;
height: 10px;
position: absolute;
top: 0px;
right: -1px;
bottom: 0px;
left: 82.4219px;
background-color: #0000007A;
margin-top: 3px;
margin-bottom: 3px;
}
.c-footer-inner-4-mobile__link-4 {
display: inline-block;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
white-space: nowrap;
padding-right: 9px;
padding-left: 9px;
margin-left: -9px;
}
.c-footer-inner-4-mobile__nav-link:hover {
text-decoration-line: underline;
}
.c-footer-inner-4-mobile__nav-link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-4-mobile__button:hover {
color: #000000;
}
.c-footer-inner-4-mobile__button:hover::after {
color: #000000;
}
.c-footer-inner-4-mobile__button:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-4-mobile__button:focus::after {
outline: 2px solid #0071E3;
outline-offset: -2px;
}
.c-footer-inner-4-mobile__link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-4-mobile__link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-4-mobile__link-3:hover {
text-decoration-line: underline;
}
.c-footer-inner-4-mobile__link-3:focus {
outline: none;
}
.c-footer-inner-4-mobile__link-3:focus::after {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
.c-footer-inner-4-mobile__link-4:hover {
text-decoration-line: underline;
}
.c-footer-inner-4-mobile__link-4:focus {
outline: none;
}
States
footer-inner-4-nav-link hover: text-decoration-line underlinefooter-inner-4-nav-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-4-nav-link-2 hover: text-decoration-line underlinefooter-inner-4-nav-link-2 focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-4-mobile-nav-link hover: text-decoration-line underlinefooter-inner-4-mobile-nav-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-4-mobile-button hover (footer-inner-4-mobile-button-hover): color #000000, ::after color #000000footer-inner-4-mobile-button focus: outline 2px solid #0071E3, outline-offset 1px, ::after outline 2px solid #0071E3, ::after outline-offset -2pxfooter-inner-4-mobile-link focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-4-mobile-link-2 focus: outline 2px solid #0071E3, outline-offset 1pxfooter-inner-4-mobile-link-3 hover: text-decoration-line underlinefooter-inner-4-mobile-link-3 focus: outline none, ::after outline 2px solid #0071E3, ::after outline-offset 1pxfooter-inner-4-mobile-link-4 hover: text-decoration-line underlinefooter-inner-4-mobile-link-4 focus: outline noneVerification: flagged, the footer-link-list width did not reproduce the measured 176px after 2 correction attempts.
Anatomy
footer-link: the component root, a <nav> (.c-footer-link), content not capturedfooter-link-group: inner block (.c-footer-link__group, 2 instances)footer-link-group-2: inner block (.c-footer-link__group-2, 2 instances)footer-link-title: heading, 0 characters (.c-footer-link__title, 4 instances)footer-link-text: label text, 14 characters (.c-footer-link__text, 4 instances)footer-link-list: inner group (.c-footer-link__list, 4 instances), content not capturedfooter-link-item: inner group (.c-footer-link__item, 18 instances), content not capturedfooter-link-item-2: inner group (.c-footer-link__item-2, 3 instances), content not capturedfooter-link-group-3: inner block (.c-footer-link__group-3, 2 instances)Recipe
<div class="c-footer-link-scope">
<nav class="c-footer-link">
<div class="c-footer-link__group">
<div class="c-footer-link__group-2">
<h3 class="c-footer-link__title">
<span class="c-footer-link__text">lorem ipsum do</span>
</h3>
<ul class="c-footer-link__list">
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item-2"></li>
</ul>
</div>
<div class="c-footer-link__group-3">
<h3 class="c-footer-link__title">
<span class="c-footer-link__text">lorem ipsum</span>
</h3>
<ul class="c-footer-link__list">
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item-2"></li>
</ul>
</div>
</div>
<div class="c-footer-link__group">
<div class="c-footer-link__group-2">
<h3 class="c-footer-link__title">
<span class="c-footer-link__text">lorem i</span>
</h3>
<ul class="c-footer-link__list">
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item-2"></li>
</ul>
</div>
<div class="c-footer-link__group-3">
<h3 class="c-footer-link__title">
<span class="c-footer-link__text">lorem ipsum d</span>
</h3>
<ul class="c-footer-link__list">
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
<li class="c-footer-link__item"></li>
</ul>
</div>
</div>
</nav>
</div>
.c-footer-link-scope {
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
}
.c-footer-link {
display: flex;
border-spacing: 0px;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-footer-link__group {
display: block;
flex-basis: 25%;
}
.c-footer-link__group-2 {
display: block;
}
.c-footer-link__title {
display: block;
margin: 0px;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-footer-link__text {
display: block;
font-size: 12px;
line-height: 16.0005px;
margin-right: 20px;
margin-bottom: 9.6px;
}
.c-footer-link__list {
display: block;
padding: 0px;
margin: 0px 20px 0px 0px;
list-style-type: none;
}
.c-footer-link__item {
display: block;
margin-bottom: 9.6px;
}
.c-footer-link__item-2 {
display: block;
}
.c-footer-link__group-3 {
display: block;
padding-top: 24px;
}
States
Verification: flagged, the breadcrumb height did not reproduce the measured 56px after 2 correction attempts.
Anatomy
breadcrumb: the component root, a <nav> (.c-breadcrumb)breadcrumb-link: link (.c-breadcrumb__link)breadcrumb-group: inner group (.c-breadcrumb__group)breadcrumb-text: label text, 5 characters (.c-breadcrumb__text)breadcrumb-group-2: inner block (.c-breadcrumb__group-2)breadcrumb-list: inner group (.c-breadcrumb__list)breadcrumb-item: label text, 9 characters (.c-breadcrumb__item, 2 instances)Recipe
<div class="c-breadcrumb-scope">
<nav class="c-breadcrumb">
<a class="c-breadcrumb__link" href="#">
<span class="c-breadcrumb__group"></span>
<span class="c-breadcrumb__text">lorem</span>
</a>
<div class="c-breadcrumb__group-2">
<ol class="c-breadcrumb__list">
<li class="c-breadcrumb__item">lorem ips</li>
<li class="c-breadcrumb__item">lorem ipsum dolor si</li>
</ol>
</div>
</nav>
</div>
.c-breadcrumb-scope {
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
}
.c-breadcrumb {
display: block;
border-spacing: 0px;
position: relative;
z-index: 1;
color: #000000B8;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
padding-top: 17px;
padding-bottom: 17px;
}
.c-breadcrumb::before {
content: "";
display: table;
}
.c-breadcrumb::after {
content: "";
display: table;
}
.c-breadcrumb__link {
display: block;
position: absolute;
top: 17px;
left: 0px;
z-index: 2;
color: #000000B8;
cursor: pointer;
text-decoration-line: none;
}
.c-breadcrumb__group {
display: block;
width: 14px;
height: 18px;
position: relative;
z-index: 2;
background-color: #000000B8;
color: transparent;
}
.c-breadcrumb__text {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-breadcrumb__group-2 {
display: block;
position: relative;
z-index: 1;
}
.c-breadcrumb__group-2::before {
content: "";
display: table;
}
.c-breadcrumb__group-2::after {
content: "";
display: table;
}
.c-breadcrumb__list {
display: block;
max-height: 9999px;
padding: 0px 0px 0px 25px;
margin: 0px;
list-style-type: none;
}
.c-breadcrumb__item {
display: list-item;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 3px;
margin-right: 7px;
}
.c-breadcrumb__item::before {
content: "";
display: inline-block;
width: 6px;
height: 11px;
vertical-align: middle;
background-color: #0000007A;
margin-top: -1px;
margin-right: 11px;
}
States
Icon link
Verification: verified against the live page at desktop.
Anatomy
icon-link: the component root, a <a> (.c-icon-link)icon-link-group: inner flex row (.c-icon-link__group)icon-link-icon: icon placeholder, 15x44px (.c-icon-link__icon)Recipe
<div class="c-icon-link-scope">
<a class="c-icon-link" href="#">
<span class="c-icon-link__group">
<span class="c-icon-link__icon" aria-hidden="true"></span>
</span>
</a>
</div>
.c-icon-link-scope {
background-color: #FAFAFCCC;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-icon-link {
display: flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
height: 44px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
list-style-type: none;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-icon-link__group {
display: flex;
}
.c-icon-link__icon {
display: block;
flex-shrink: 0;
width: 15px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-icon-link:hover {
color: #000000;
}
.c-icon-link:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
icon-link-hover): color #000000icon-link-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxIcon link (2)
Verification: verified against the live page at desktop.
Anatomy
icon-link-2: the component root, a <a> (.c-icon-link-2)icon-link-2-group: inner flex row (.c-icon-link-2__group)icon-link-2-icon: icon placeholder, 14x44px (.c-icon-link-2__icon)icon-link-2-group-2: inner group (.c-icon-link-2__group-2)icon-link-2-group-3: inner group (.c-icon-link-2__group-3)icon-link-2-text: label text, 1 characters (.c-icon-link-2__text)Recipe
<div class="c-icon-link-2-scope">
<a class="c-icon-link-2" href="#">
<span class="c-icon-link-2__group">
<span class="c-icon-link-2__icon" aria-hidden="true"></span>
</span>
<span class="c-icon-link-2__group-2">
<span class="c-icon-link-2__group-3"></span>
<span class="c-icon-link-2__text">l</span>
</span>
</a>
</div>
.c-icon-link-2-scope {
background-color: #FAFAFCCC;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-icon-link-2 {
display: flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
height: 44px;
position: relative;
z-index: 1;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
list-style-type: none;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-icon-link-2__group {
display: flex;
}
.c-icon-link-2__icon {
display: block;
flex-shrink: 0;
width: 14px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-icon-link-2__group-2 {
display: block;
box-sizing: border-box;
width: 13px;
height: 13px;
position: absolute;
right: 11px;
bottom: 11px;
left: 15px;
z-index: 1;
color: #FFFFFF;
transform: matrix(0, 0, 0, 0, 0, 0);
font-size: 10px;
line-height: 13px;
letter-spacing: -0.08px;
text-align: center;
}
.c-icon-link-2__group-2::before {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-icon-link-2__group-2::after {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
}
.c-icon-link-2__group-3 {
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0px;
right: 6.5px;
background-color: #000000;
transform: matrix(0, 0, 0, 1, 0, 0);
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-icon-link-2__text {
display: block;
position: relative;
z-index: 2;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-icon-link-2:hover {
color: #000000;
}
.c-icon-link-2:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
icon-link-2-hover): color #000000icon-link-2-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxVerification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.
Anatomy
carousel-section: the component root, a <div> (.c-carousel-section)carousel-section-group: inner block (.c-carousel-section__group)carousel-section-group-2: inner block (.c-carousel-section__group-2)carousel-section-title: heading, 11 characters (.c-carousel-section__title)carousel-section-text: label text, 15 characters (.c-carousel-section__text)carousel-section-group-3: inner block (.c-carousel-section__group-3)carousel-section-group-4: inner block (.c-carousel-section__group-4), content not capturedcarousel-section-group-5: inner flex row (.c-carousel-section__group-5), content not capturedRecipe
<div class="c-carousel-section-scope">
<div class="c-carousel-section">
<div class="c-carousel-section__group">
<div class="c-carousel-section__group-2">
<h2 class="c-carousel-section__title">lorem ipsum</h2>
<span class="c-carousel-section__text">lorem ipsum dol</span>
</div>
<div class="c-carousel-section__group-3">
<div class="c-carousel-section__group-4"></div>
<div class="c-carousel-section__group-5"></div>
</div>
</div>
</div>
</div>
.c-carousel-section-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-carousel-section {
display: block;
border-spacing: 0px;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
padding-bottom: 46px;
}
.c-carousel-section__group {
display: block;
}
.c-carousel-section__group-2 {
display: block;
padding-bottom: 8px;
margin-left: 140px;
}
.c-carousel-section__title {
display: inline;
margin: 0px;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
}
.c-carousel-section__text {
display: inline;
color: #6E6E73;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
margin-top: 22.4px;
}
.c-carousel-section__group-3 {
display: block;
position: relative;
}
.c-carousel-section__group-4 {
display: block;
height: 500px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 38px;
}
.c-carousel-section__group-5 {
display: flex;
justify-content: center;
list-style-type: none;
}
States
Text link
Verification: flagged, the text-link height did not reproduce the measured 96px after 2 correction attempts.
Anatomy
text-link: the component root, a <a> (.c-text-link)text-link-badge: label text, 19 characters (.c-text-link__badge)text-link-break: line break (.c-text-link__break)text-link-text: label text, 54 characters (.c-text-link__text, 2 instances)text-link-group: inner group (.c-text-link__group)text-link-group-2: inner group (.c-text-link__group-2)text-link-text-2: label text, 8 characters (.c-text-link__text-2)Recipe
<div class="c-text-link-scope">
<a class="c-text-link" href="#">
<span class="c-text-link__badge">lorem ipsum dolor s</span>
<br class="c-text-link__break">
<span class="c-text-link__text">lorem ipsum dolor sit amet consectetur adipiscing elit</span>
<span class="c-text-link__group">
<sup class="c-text-link__group-2">
<span class="c-text-link__text-2">lorem ip</span>
<span class="c-text-link__text">l</span>
</sup>
</span>
</a>
</div>
.c-text-link-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
}
.c-text-link {
display: inline-block;
border-spacing: 0px;
color: #1D1D1F;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
text-decoration-line: none;
}
.c-text-link__badge {
display: inline-block;
background-image: linear-gradient(108deg, #0079D0 0px, #9E52D8 32%, #DA365C 84%, #D04901 100%);
background-clip: text;
}
.c-text-link__group {
display: inline;
}
.c-text-link__group-2 {
display: inline;
position: relative;
}
.c-text-link__text-2 {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-text-link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
States
Text link (2)
Verification: flagged, the text-link-2-group-3 y did not reproduce the measured 66px after 2 correction attempts.
Anatomy
text-link-2: the component root, a <a> (.c-text-link-2)text-link-2-group: inner block (.c-text-link-2__group)text-link-2-text: label text, 55 characters (.c-text-link-2__text, 2 instances)text-link-2-group-2: inner group (.c-text-link-2__group-2)text-link-2-group-3: inner group (.c-text-link-2__group-3)text-link-2-text-2: label text, 8 characters (.c-text-link-2__text-2)Recipe
<div class="c-text-link-2-scope">
<a class="c-text-link-2" href="#">
<div class="c-text-link-2__group">
<span class="c-text-link-2__text">lorem ipsum dolor sit amet consectetur adipiscing elit</span>
<span class="c-text-link-2__group-2">
<sup class="c-text-link-2__group-3">
<span class="c-text-link-2__text-2">lorem ip</span>
<span class="c-text-link-2__text">l</span>
</sup>
</span>
</div>
</a>
</div>
.c-text-link-2-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
}
.c-text-link-2 {
display: inline-block;
border-spacing: 0px;
color: #1D1D1F;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
text-decoration-line: none;
}
.c-text-link-2__group {
display: block;
margin-right: 10%;
}
.c-text-link-2__group-2 {
display: inline;
}
.c-text-link-2__group-3 {
display: inline;
position: relative;
top: -8.4px;
font-size: 16.8px;
line-height: 19.2px;
}
.c-text-link-2__text-2 {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-text-link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
States
Text link (3)
Verification: flagged, the render matched 35% of the original pixels, below the 96% required on focus after 2 correction attempts.
Anatomy
text-link-3: the component root, a <a> (.c-text-link-3), 19-character labelRecipe
<div class="c-text-link-3-scope">
<a class="c-text-link-3" href="#">lorem ipsum dolor s</a>
</div>
.c-text-link-3-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
}
.c-text-link-3 {
display: inline;
border-spacing: 0px;
color: #1D1D1F;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
text-decoration-line: none;
text-align: center;
}
.c-text-link-3:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
States
Verification: flagged, the link-list-list width did not reproduce the measured 176px after 2 correction attempts.
Anatomy
link-list: the component root, a <nav> (.c-link-list), content not capturedlink-list-group: inner block (.c-link-list__group, 2 instances)link-list-group-2: inner block (.c-link-list__group-2, 2 instances)link-list-title: heading, 0 characters (.c-link-list__title, 4 instances)link-list-text: label text, 14 characters (.c-link-list__text, 4 instances)link-list-list: inner group (.c-link-list__list, 4 instances), content not capturedlink-list-item: inner group (.c-link-list__item, 18 instances), content not capturedlink-list-item-2: inner group (.c-link-list__item-2, 3 instances), content not capturedlink-list-group-3: inner block (.c-link-list__group-3, 2 instances)Recipe
<div class="c-link-list-scope">
<nav class="c-link-list">
<div class="c-link-list__group">
<div class="c-link-list__group-2">
<h3 class="c-link-list__title">
<span class="c-link-list__text">lorem ipsum do</span>
</h3>
<ul class="c-link-list__list">
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item-2"></li>
</ul>
</div>
<div class="c-link-list__group-3">
<h3 class="c-link-list__title">
<span class="c-link-list__text">lorem ipsum</span>
</h3>
<ul class="c-link-list__list">
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item-2"></li>
</ul>
</div>
</div>
<div class="c-link-list__group">
<div class="c-link-list__group-2">
<h3 class="c-link-list__title">
<span class="c-link-list__text">lorem i</span>
</h3>
<ul class="c-link-list__list">
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item-2"></li>
</ul>
</div>
<div class="c-link-list__group-3">
<h3 class="c-link-list__title">
<span class="c-link-list__text">lorem ipsum d</span>
</h3>
<ul class="c-link-list__list">
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
<li class="c-link-list__item"></li>
</ul>
</div>
</div>
</nav>
</div>
.c-link-list-scope {
background-color: #F5F5F7;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
}
.c-link-list {
display: flex;
border-spacing: 0px;
color: #0000008F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-link-list__group {
display: block;
flex-basis: 25%;
}
.c-link-list__group-2 {
display: block;
}
.c-link-list__title {
display: block;
margin: 0px;
color: #000000E0;
font-size: 14.04px;
font-weight: 600;
line-height: 18.7206px;
}
.c-link-list__text {
display: block;
font-size: 12px;
line-height: 16.0005px;
margin-right: 20px;
margin-bottom: 9.6px;
}
.c-link-list__list {
display: block;
padding: 0px;
margin: 0px 20px 0px 0px;
list-style-type: none;
}
.c-link-list__item {
display: block;
margin-bottom: 9.6px;
}
.c-link-list__item-2 {
display: block;
}
.c-link-list__group-3 {
display: block;
padding-top: 24px;
}
States
Verification: flagged, the tab-bar-group y did not reproduce the measured 12px after 2 correction attempts.
Anatomy
tab-bar: the component root, a <div> (.c-tab-bar)tab-bar-group: inner block (.c-tab-bar__group)tab-bar-group-2: inner block (.c-tab-bar__group-2)tab-bar-group-3: inner block (.c-tab-bar__group-3, 8 instances)tab-bar-group-4: inner block (.c-tab-bar__group-4, 8 instances), content not capturedRecipe
<div class="c-tab-bar-scope">
<div class="c-tab-bar">
<div class="c-tab-bar__group">
<div class="c-tab-bar__group-2">
<div class="c-tab-bar__group-3">
<div class="c-tab-bar__group-4"></div>
</div>
<div class="c-tab-bar__group-3">
<div class="c-tab-bar__group-4"></div>
</div>
<div class="c-tab-bar__group-3">
<div class="c-tab-bar__group-4"></div>
</div>
<div class="c-tab-bar__group-3">
<div class="c-tab-bar__group-4"></div>
</div>
<div class="c-tab-bar__group-3">
<div class="c-tab-bar__group-4"></div>
</div>
<div class="c-tab-bar__group-3">
<div class="c-tab-bar__group-4"></div>
</div>
<div class="c-tab-bar__group-3">
<div class="c-tab-bar__group-4"></div>
</div>
<div class="c-tab-bar__group-3">
<div class="c-tab-bar__group-4"></div>
</div>
</div>
</div>
</div>
</div>
.c-tab-bar-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-tab-bar {
display: flex;
align-items: center;
border-spacing: 0px;
max-width: 1300px;
position: relative;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-tab-bar__group {
display: block;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-bottom: 1px;
}
.c-tab-bar__group-2 {
display: block;
}
.c-tab-bar__group-3 {
display: inline-block;
}
.c-tab-bar__group-4 {
display: block;
margin: 5px 35px 5px 5px;
color: #F5F5F7;
}
States
Verification: verified against the live page at desktop.
Anatomy
navigation-menu-item: the component root, a <button> (.c-navigation-menu-item)Recipe
<div class="c-navigation-menu-item-scope">
<button class="c-navigation-menu-item" type="button"></button>
</div>
.c-navigation-menu-item-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-navigation-menu-item {
display: flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
width: 22px;
padding: 0px;
position: absolute;
top: 0px;
right: -7px;
background-color: transparent;
color: #000000CC;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: normal;
text-transform: none;
text-align: center;
list-style-type: none;
}
.c-navigation-menu-item:focus {
z-index: 1;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
Card links
Verification: flagged, the render matched 91% of the original pixels, below the 96% required on focus after 2 correction attempts.
Anatomy
card-link: the component root, a <a> (.c-card-link), 38-character labelRecipe
<div class="c-card-link-scope">
<a class="c-card-link" href="#">lorem ipsum dolor sit amet consectetur</a>
</div>
.c-card-link-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
}
.c-card-link {
display: inline-block;
border-spacing: 0px;
color: #1D1D1F;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
text-decoration-line: none;
}
.c-card-link:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
States
Card links (2)
Verification: flagged, the card-link-2-group-2 y did not reproduce the measured 98px after 2 correction attempts.
Anatomy
card-link-2: the component root, a <a> (.c-card-link-2)card-link-2-text: label text, 101 characters (.c-card-link-2__text, 2 instances)card-link-2-group: inner group (.c-card-link-2__group)card-link-2-group-2: inner group (.c-card-link-2__group-2)card-link-2-text-2: label text, 8 characters (.c-card-link-2__text-2)Recipe
<div class="c-card-link-2-scope">
<a class="c-card-link-2" href="#">
<span class="c-card-link-2__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit am</span>
<span class="c-card-link-2__group">
<sup class="c-card-link-2__group-2">
<span class="c-card-link-2__text-2">lorem ip</span>
<span class="c-card-link-2__text">l</span>
</sup>
</span>
</a>
</div>
.c-card-link-2-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
}
.c-card-link-2 {
display: inline-block;
border-spacing: 0px;
color: #1D1D1F;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
text-decoration-line: none;
}
.c-card-link-2__group {
display: inline;
}
.c-card-link-2__group-2 {
display: inline;
position: relative;
top: -8.4px;
font-size: 16.8px;
line-height: 19.2px;
}
.c-card-link-2__text-2 {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-card-link-2:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
States
Card links (3)
Verification: flagged, the render matched 88% of the original pixels, below the 96% required on focus after 2 correction attempts.
Anatomy
card-link-3: the component root, a <a> (.c-card-link-3)card-link-3-text: label text, 42 characters (.c-card-link-3__text)Recipe
<div class="c-card-link-3-scope">
<a class="c-card-link-3" href="#">
<div class="c-card-link-3__text">lorem ipsum dolor sit amet consectetur adi</div>
</a>
</div>
.c-card-link-3-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
}
.c-card-link-3 {
display: inline-block;
border-spacing: 0px;
color: #1D1D1F;
cursor: pointer;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.196px;
text-decoration-line: none;
}
.c-card-link-3__text {
display: block;
margin-right: 10%;
}
.c-card-link-3:focus {
outline: 2px solid #0071E3;
outline-offset: 1px;
}
States
Verification: flagged, the sub-navigation-group y did not reproduce the measured 12px after 2 correction attempts.
Anatomy
sub-navigation: the component root, a <div> (.c-sub-navigation)sub-navigation-group: inner block (.c-sub-navigation__group)sub-navigation-group-2: inner block (.c-sub-navigation__group-2)sub-navigation-group-3: inner block (.c-sub-navigation__group-3, 7 instances)sub-navigation-group-4: inner block (.c-sub-navigation__group-4, 7 instances), content not capturedRecipe
<div class="c-sub-navigation-scope">
<div class="c-sub-navigation">
<div class="c-sub-navigation__group">
<div class="c-sub-navigation__group-2">
<div class="c-sub-navigation__group-3">
<div class="c-sub-navigation__group-4"></div>
</div>
<div class="c-sub-navigation__group-3">
<div class="c-sub-navigation__group-4"></div>
</div>
<div class="c-sub-navigation__group-3">
<div class="c-sub-navigation__group-4"></div>
</div>
<div class="c-sub-navigation__group-3">
<div class="c-sub-navigation__group-4"></div>
</div>
<div class="c-sub-navigation__group-3">
<div class="c-sub-navigation__group-4"></div>
</div>
<div class="c-sub-navigation__group-3">
<div class="c-sub-navigation__group-4"></div>
</div>
<div class="c-sub-navigation__group-3">
<div class="c-sub-navigation__group-4"></div>
</div>
</div>
</div>
</div>
</div>
.c-sub-navigation-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-sub-navigation {
display: flex;
align-items: center;
border-spacing: 0px;
max-width: 1300px;
position: relative;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-sub-navigation__group {
display: block;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-bottom: 1px;
}
.c-sub-navigation__group-2 {
display: block;
}
.c-sub-navigation__group-3 {
display: inline-block;
}
.c-sub-navigation__group-4 {
display: block;
margin: 5px 35px 5px 5px;
color: #F5F5F7;
}
States
Verification: verified against the live page at desktop.
Anatomy
navigation-link: the component root, a <button> (.c-navigation-link)Recipe
<div class="c-navigation-link-scope">
<button class="c-navigation-link" type="button"></button>
</div>
.c-navigation-link-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-navigation-link {
display: flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
width: 22px;
padding: 0px;
position: absolute;
top: 0px;
right: -7px;
background-color: transparent;
color: #000000CC;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: normal;
text-transform: none;
text-align: center;
list-style-type: none;
}
.c-navigation-link:focus {
z-index: 1;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
Icon buttons
Verification: verified against the live page at desktop.
Anatomy
icon-button: the component root, a <a> (.c-icon-button)icon-button-group: inner flex row (.c-icon-button__group)icon-button-icon: icon placeholder, 15x44px (.c-icon-button__icon)Recipe
<div class="c-icon-button-scope">
<a class="c-icon-button" href="#">
<span class="c-icon-button__group">
<span class="c-icon-button__icon" aria-hidden="true"></span>
</span>
</a>
</div>
.c-icon-button-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-icon-button {
display: flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
height: 44px;
position: relative;
z-index: 1;
overflow-x: hidden;
overflow-y: hidden;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
list-style-type: none;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-icon-button__group {
display: flex;
}
.c-icon-button__icon {
display: block;
flex-shrink: 0;
width: 15px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-icon-button:hover {
color: #000000;
}
.c-icon-button:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
icon-button-hover): color #000000icon-button-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxIcon buttons (2)
Verification: verified against the live page at desktop.
Anatomy
icon-button-2: the component root, a <a> (.c-icon-button-2)icon-button-2-group: inner flex row (.c-icon-button-2__group)icon-button-2-icon: icon placeholder, 14x44px (.c-icon-button-2__icon)icon-button-2-group-2: inner group (.c-icon-button-2__group-2)icon-button-2-group-3: inner group (.c-icon-button-2__group-3)icon-button-2-text: label text, 1 characters (.c-icon-button-2__text)Recipe
<div class="c-icon-button-2-scope">
<a class="c-icon-button-2" href="#">
<span class="c-icon-button-2__group">
<span class="c-icon-button-2__icon" aria-hidden="true"></span>
</span>
<span class="c-icon-button-2__group-2">
<span class="c-icon-button-2__group-3"></span>
<span class="c-icon-button-2__text">l</span>
</span>
</a>
</div>
.c-icon-button-2-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-icon-button-2 {
display: flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
height: 44px;
position: relative;
z-index: 1;
color: #000000CC;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 12px;
letter-spacing: -0.12px;
text-decoration-line: none;
white-space: nowrap;
list-style-type: none;
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
padding-right: 8px;
padding-left: 8px;
}
.c-icon-button-2__group {
display: flex;
}
.c-icon-button-2__icon {
display: block;
flex-shrink: 0;
width: 14px;
height: 44px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.c-icon-button-2__group-2 {
display: block;
box-sizing: border-box;
width: 13px;
height: 13px;
position: absolute;
right: 11px;
bottom: 11px;
left: 15px;
z-index: 1;
color: #FFFFFF;
transform: matrix(0, 0, 0, 0, 0, 0);
font-size: 10px;
line-height: 13px;
letter-spacing: -0.08px;
text-align: center;
}
.c-icon-button-2__group-2::before {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-icon-button-2__group-2::after {
content: "";
display: block;
width: 13px;
height: 13px;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #000000;
border-radius: 13px;
}
.c-icon-button-2__group-3 {
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0px;
right: 6.5px;
background-color: #000000;
transform: matrix(0, 0, 0, 1, 0, 0);
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-icon-button-2__text {
display: block;
position: relative;
z-index: 2;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.3, 1);
}
.c-icon-button-2:hover {
color: #000000;
}
.c-icon-button-2:focus {
color: #000000;
outline: 2px solid #0071E3;
outline-offset: -7px;
}
States
icon-button-2-hover): color #000000icon-button-2-focus): color #000000, outline 2px solid #0071E3, outline-offset -7pxTabs
Verification: verified against the live page at desktop.
Anatomy
tab: the component root, a <li> (.c-tab)tab-button-active: button (.c-tab__button-active)tab-group: inner group (.c-tab__group)tab-group-2: inner block (.c-tab__group-2)tab-icon: icon placeholder, 41x75px (.c-tab__icon)tab-text: label text, 6 characters (.c-tab__text)Recipe
<div class="c-tab-scope">
<li class="c-tab">
<button class="c-tab__button-active" type="button">
<span class="c-tab__group">
<div class="c-tab__group-2">
<span class="c-tab__icon" aria-hidden="true"></span>
</div>
<div class="c-tab__text">lorem</div>
</span>
</button>
</li>
</div>
.c-tab-scope {
background-color: #FFFFFF;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
}
.c-tab {
display: inline-block;
border-spacing: 0px;
box-sizing: border-box;
min-width: 140px;
position: relative;
vertical-align: bottom;
color: #000000CC;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
letter-spacing: -0.224px;
text-align: center;
white-space: nowrap;
list-style-type: none;
transition: color 0.12s ease-out;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D2D2D7;
}
.c-tab__button-active {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 100%;
min-height: 122px;
padding: 0px 0px 15px;
vertical-align: bottom;
background-color: transparent;
border-width: 0px;
border-style: none;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 21.8582px;
letter-spacing: -0.224px;
text-transform: none;
text-align: center;
transition: opacity 0.1s ease-in-out;
margin-top: 3px;
margin-left: 4px;
}
.c-tab__group {
display: block;
align-items: center;
box-sizing: border-box;
line-height: 20.4px;
}
.c-tab__group-2 {
display: block;
box-sizing: border-box;
}
.c-tab__icon {
display: inline-block;
flex-shrink: 0;
box-sizing: border-box;
width: 41px;
height: 75px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-tab__text {
display: block;
box-sizing: border-box;
font-size: 14px;
line-height: 18.0008px;
margin-top: 3px;
}
.c-tab:hover {
right: auto;
color: #000000;
}
.c-tab:focus {
right: auto;
}
States
tab-hover): right auto, color #000000Tabs (2)
Verification: verified against the live page at desktop.
Anatomy
tab-2: the component root, a <button> (.c-tab-2)tab-2-group: inner group (.c-tab-2__group)tab-2-group-2: inner block (.c-tab-2__group-2)tab-2-icon: icon placeholder, 65x75px (.c-tab-2__icon)tab-2-text: label text, 11 characters (.c-tab-2__text)Recipe
<div class="c-tab-2-scope">
<button class="c-tab-2" type="button">
<span class="c-tab-2__group">
<div class="c-tab-2__group-2">
<span class="c-tab-2__icon" aria-hidden="true"></span>
</div>
<div class="c-tab-2__text">lorem ipsum</div>
</span>
</button>
</div>
.c-tab-2-scope {
background-color: #FFFFFF;
color: #000000CC;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
}
.c-tab-2 {
display: flex;
flex-direction: column;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
min-height: 122px;
padding: 0px 0px 15px;
vertical-align: bottom;
background-color: transparent;
color: #6E6E73;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 21.8582px;
letter-spacing: -0.224px;
text-transform: none;
text-align: center;
white-space: nowrap;
list-style-type: none;
transition: opacity 0.1s ease-in-out;
}
.c-tab-2__group {
display: block;
align-items: center;
box-sizing: border-box;
line-height: 20.4px;
}
.c-tab-2__group-2 {
display: block;
box-sizing: border-box;
}
.c-tab-2__icon {
display: inline-block;
flex-shrink: 0;
box-sizing: border-box;
width: 65px;
height: 75px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-tab-2__text {
display: block;
box-sizing: border-box;
font-size: 14px;
line-height: 18.0008px;
margin-top: 3px;
}
.c-tab-2:hover {
color: #000000;
}
.c-tab-2:focus {
outline: none;
}
States
tab-2-hover): color #000000Tabs (3)
Verification: verified against the live page at desktop.
Anatomy
tab-3: the component root, a <button> (.c-tab-3)tab-3-group: inner group (.c-tab-3__group)tab-3-group-2: inner block (.c-tab-3__group-2)tab-3-icon: icon placeholder, 47x75px (.c-tab-3__icon)tab-3-text: label text, 4 characters (.c-tab-3__text)Recipe
<div class="c-tab-3-scope">
<button class="c-tab-3" type="button">
<span class="c-tab-3__group">
<div class="c-tab-3__group-2">
<span class="c-tab-3__icon" aria-hidden="true"></span>
</div>
<div class="c-tab-3__text">lore</div>
</span>
</button>
</div>
.c-tab-3-scope {
background-color: #FFFFFF;
color: #000000CC;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
}
.c-tab-3 {
display: flex;
flex-direction: column;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
min-height: 122px;
padding: 0px 0px 15px;
vertical-align: bottom;
background-color: transparent;
color: #6E6E73;
border: 0;
cursor: pointer;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 21.8582px;
letter-spacing: -0.224px;
text-transform: none;
text-align: center;
white-space: nowrap;
list-style-type: none;
transition: opacity 0.1s ease-in-out;
}
.c-tab-3__group {
display: block;
align-items: center;
box-sizing: border-box;
line-height: 20.4px;
}
.c-tab-3__group-2 {
display: block;
box-sizing: border-box;
}
.c-tab-3__icon {
display: inline-block;
flex-shrink: 0;
box-sizing: border-box;
width: 47px;
height: 75px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-tab-3__text {
display: block;
box-sizing: border-box;
font-size: 14px;
line-height: 18.0008px;
margin-top: 3px;
}
.c-tab-3:hover {
color: #000000;
}
.c-tab-3:focus {
outline: none;
}
States
tab-3-hover): color #000000Verification: flagged, the table-text-2 y did not reproduce the measured 17px after 2 correction attempts.
Anatomy
table: the component root, a <table> (.c-table)table-caption: label text, 22 characters (.c-table__caption)table-head: inner group (.c-table__head)table-row: inner group (.c-table__row, 2 instances)table-header-cell: label text, 11 characters (.c-table__header-cell)table-header-cell-2: inner group (.c-table__header-cell-2)table-text: label text, 9 characters (.c-table__text, 2 instances)table-break: line break (.c-table__break)table-text-2: label text, 8 characters (.c-table__text-2)table-group: inner group (.c-table__group), content not capturedtable-body: inner group (.c-table__body)table-row-2: inner group (.c-table__row-2, 3 instances)table-cell: label text, 17 characters (.c-table__cell, 4 instances)table-cell-2: label text, 10 characters (.c-table__cell-2, 4 instances)Recipe
<div class="c-table-scope">
<table class="c-table">
<caption class="c-table__caption">lorem ipsum dolor sit</caption>
<thead class="c-table__head">
<tr class="c-table__row">
<th class="c-table__header-cell">lorem ipsum</th>
<th class="c-table__header-cell-2">
<span class="c-table__text">lorem ips</span>
<br class="c-table__break">
<span class="c-table__text">lorem ipsum do</span>
<span class="c-table__text-2">lorem ip</span>
<span class="c-table__group"></span>
</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row-2">
<td class="c-table__cell">lorem ipsum dolor</td>
<td class="c-table__cell-2">lorem ipsu</td>
</tr>
<tr class="c-table__row-2">
<td class="c-table__cell">lorem ipsum d</td>
<td class="c-table__cell-2">lorem ipsu</td>
</tr>
<tr class="c-table__row-2">
<td class="c-table__cell">lorem ipsu</td>
<td class="c-table__cell-2">lorem ipsu</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">lorem ips</td>
<td class="c-table__cell-2">lorem ipsu</td>
</tr>
</tbody>
</table>
</div>
.c-table-scope {
background-color: #F5F5F7;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
}
.c-table {
display: table;
border-collapse: collapse;
border-spacing: 0px;
box-sizing: border-box;
color: #1D1D1F;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.374px;
}
.c-table__caption {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
text-align: left;
}
.c-table__head {
display: table-header-group;
vertical-align: middle;
color: #6E6E73;
font-size: 12px;
line-height: 16.0005px;
letter-spacing: -0.12px;
}
.c-table__row {
display: table-row;
vertical-align: middle;
}
.c-table__header-cell {
display: table-cell;
padding: 1px;
vertical-align: bottom;
font-weight: 400;
text-align: left;
}
.c-table__header-cell-2 {
display: table-cell;
padding: 1px;
vertical-align: bottom;
font-weight: 400;
text-align: end;
}
.c-table__text-2 {
display: block;
width: 1px;
height: 1px;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
}
.c-table__group {
display: inline;
}
.c-table__body {
display: table-row-group;
vertical-align: middle;
}
.c-table__row-2 {
display: table-row;
vertical-align: middle;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D2D2D7;
}
.c-table__cell {
display: table-cell;
padding: 5px 5px 5px 0px;
vertical-align: bottom;
}
.c-table__cell-2 {
display: table-cell;
padding: 5px 0px;
vertical-align: bottom;
font-weight: 600;
text-align: end;
}
States
Verification: flagged, the toggle-button-active width did not reproduce the measured 202px after 2 correction attempts.
Anatomy
toggle-button-active: the component root, a <button> (.c-toggle-button-active), 6-character labelRecipe
<div class="c-toggle-button-active-scope">
<button class="c-toggle-button-active" type="button">lorem</button>
</div>
.c-toggle-button-active-scope {
background-color: #FFFFFF;
color: #000000CC;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18.0008px;
}
.c-toggle-button-active {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
border-spacing: 0px;
width: 138px;
padding: 32px;
position: relative;
vertical-align: bottom;
background-color: #000000;
color: #FFFFFF;
border: 0;
border-radius: 48px;
cursor: default;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0.216px;
text-transform: none;
text-align: center;
white-space: nowrap;
list-style-type: none;
transition: opacity 0.1s ease-in-out;
}
.c-toggle-button-active:focus {
outline: none;
}
States
primary, #0071E3) and white labels (on-primary). The site applies this fill on button-primary and the primary CTA parts (card-cta, promo-banner-cta), and hover shifts it to #0076DF.pill radius (980px), as button-primary, button-secondary, button-secondary-2 and button-ghost all do.button-primary, button-secondary, button-ghost and button-ghost-2; 36px for the compact button-secondary-2.link (#0066CC) outline on light bands, link-on-dark (#2997FF) outline on dark bands.saturate(1.8) blur(20px) over a translucent surface-dark fill on header-landing. Don't replace it with an opaque bar.rounded.xl cards on surface-alt with the single #00000014 2px 4px 12px 0px shadow, as card-4 does. card-4 instances sit in an 8-column grid and card-8 in a 3-column grid.2px solid #0071E3 outline (primary-focus).primary as a text, background or decorative color. Body links take link, and links on dark bands take link-on-dark.black on light grounds. Use ink (#1D1D1F), then muted (#6E6E73) for secondary lines.rounded.sm/rounded.md) on CTAs. Buttons are pills.hairline (#D2D2D7) as a fill. It is a 1px divider on tabs and table rows, and appears in translucent form on circular controls.display-lg/hero-display), one tagline (subtitle), at most two pills.This is a two-viewport analysis (desktop and mobile captures only). No breakpoint values were observed, and none should be inferred from this document.
nav-link text links with search and bag icons; header-landing is 44px high. On mobile it collapses to logo, search, bag and a hamburger toggle; header-landing-mobile is 48px high, with a 48px header-landing-mobile-menu-toggle carrying an 18px icon. Both viewports keep the saturate(1.8) blur(20px) frosted fill (mobile recipe flagged: nav-link x did not reproduce).footer-landing-mobile-button on surface-alt with an 11×6px chevron icon, separated by #00000029 hairlines (flagged: footer height did not reproduce).Primary controls are 44px tall (button-primary, button-ghost, nav-menu-item). Mobile nav targets grow to 48px (header-landing-mobile-nav-link-2, the menu toggle). The compact button-secondary-2 (36px) and the Shop nav CTA button-primary-5 (24px, flagged: render 21px narrower) fall below that and should be kept to secondary or desktop contexts.
primary, ink, surface-alt, rounded.pill, body. The only hexes outside tokens are the measured state values: hover #0076DF, the nav translucencies #1D1D1FCC / #FAFAFCCC, and the footer hairline #00000029. Those belong inside their component recipes.button-primary (filled), button-secondary (outlined on dark, link-on-dark), button-ghost (outlined on light, link) and button-secondary-2 (compact 36px). Extend this family; don't invent new button shapes or fills.primary may appear as a CTA fill or a focus ring, nowhere else. A new feature that needs emphasis gets weight or size from the type ladder, not color.#00000014 2px 4px 12px 0px card shadow, and the saturate(1.8) blur(20px) frosted nav. Pick one; never combine shadow and blur on the same surface.rounded.pill; cards use rounded.xl (or rounded.sm for media tiles). Square corners break the system.card, card-2, card-3, card-9), promo-banner, input, table and several CTAs are flagged, mostly for position or size drift. Their colors and typography are reliable; their geometry is not.card-5, card-7, card-6, carousel-section and button-ghost-4 (not verifiable: page media covers most of each component).footer-inner mobile variants could not be rendered on their own: footer-inner-mobile, footer-inner-3-mobile and footer-inner-4-mobile.Tệp DESIGN.md này viết bằng tiếng Anh, ngôn ngữ mà các agent lập trình AI dùng để đọc nó.
Được trích xuất từ website công khai của Apple, không phải hướng dẫn thương hiệu chính thức. Kiểm tra font chữ của trang web khác

Các token thiết kế được trích xuất từ phân tích tần suất CSSOM, không qua diễn giải bằng LLM.

Hệ thống thiết kế của Airbnb được xây dựng quanh một phông chữ biến thiên độc quyền duy nhất (Airbnb Cereal VF), với bảng màu trung tính gần như đơn sắc, lấy màu than đậm (#222222) và các sắc xám nhạt làm nền tảng. Màu hồng san hô đặc trưng của thương hiệu, "Rausch" (#ff385c), chỉ được dành riêng cho các nút kêu gọi hành động chính và logo. Bố cục là lưới thẻ ảnh đáp ứng, với tỷ lệ ảnh so với chữ rộng rãi, các thẻ bo góc mềm 20px và hệ thống bóng đổ môi trường nhiều lớp tạo chiều sâu tinh tế mà không gây tương phản gắt. Thanh tìm kiếm dạng viên thuốc nổi bật, quy tụ hành động cốt lõi của người dùng.
IKEA là hệ thống thiết kế phẳng, táo bạo trên trang chủ toàn cầu, lấy màu vàng IKEA đặc trưng (#ffdb00) làm bề mặt hành động chính và xanh IKEA (#0058a3) làm điểm nhấn cho logo thương hiệu. Toàn bộ hệ thống chữ được xây dựng trên một kiểu chữ tùy chỉnh duy nhất là Noto IKEA, dùng hai độ đậm 400 và 700 trên thang cỡ chữ được xác định chặt chẽ, từ chữ nội dung 14px đến tiêu đề hiển thị 51px. Độ nổi được truyền tải hoàn toàn bằng độ tương phản màu sắc và cấu trúc bố cục thay vì bóng đổ. Bố cục dùng container có chiều rộng tối đa 90rem với khoảng cách lưới 1.5rem trên máy tính, và một token bo góc 8px nhất quán áp dụng cho các phần tử tương tác. Nền trắng ngà (#fffefb) mang lại cảm giác ấm áp khi đặt cạnh chữ #111111 đậm nét, tạo nên trải nghiệm đọc có độ tương phản cao và dễ tiếp cận.

Trang chủ tiếp thị của Notion kết hợp phần hero màu xanh navy đậm (#02093a) với nội dung chính màu sáng (#f6f5f4), sử dụng một kiểu chữ tùy chỉnh (NotionInter) cho mọi vai trò văn bản. Thiết kế dựa trên lưới 12 cột với khoảng cách rãnh 28px, hệ thống bo góc kép gồm 8px cho thẻ và 9999px cho các nút dạng viên thuốc, cùng hệ thống đổ bóng nhiều lớp tăng dần cho các thành phần nổi. Màu xanh thương hiệu (#2537b1) dẫn dắt các nút kêu gọi hành động và điểm nhấn, trong khi thang màu xám ngữ nghĩa từ gray-200 đến gray-900 tạo nên cấu trúc phân cấp cho toàn bộ văn bản và bề mặt.

Hệ thống thiết kế của Railway là giao diện nền tối ưu tiên cho nền tảng dành cho nhà phát triển, được neo bởi các bề mặt xanh navy gần như đen sâu (#13111c, #0b0b0f), chữ off-white độ tương phản cao (#f7f7f8), và màu nhấn thương hiệu tím đặc trưng (#853bce / #553f83). Phần hero sử dụng IBM Plex Serif để tạo độ đậm mang phong cách biên tập, trong khi Inter đảm nhiệm toàn bộ nội dung giao diện, còn JetBrains Mono và SF Mono phục vụ các ngữ cảnh mã nguồn. Độ nổi khối được tạo bằng viền phát sáng trắng inset (rgba(255,255,255,0.2) 1.5px inset) thay vì bóng đổ, mang lại phong cách bảng kính mờ. Hệ thống khoảng cách dựa trên bội số 4px với nhịp điệu 8/12/16/24/32 rõ rệt. Bo góc chủ yếu là 4px, kết hợp có chọn lọc 8px và 16px cho thẻ và khung hero.

Trang chủ tiếp thị của Shopify sử dụng một khu vực hero video toàn màn hình đầy kịch tính, với nền gần đen (#02090a) tương phản rõ rệt với thanh điều hướng màu trắng phía trên. Màu nhấn thương hiệu chủ đạo là xanh bạc hà rực rỡ (#36f4a4), được dùng tiết chế cho các điểm nhấn và trạng thái tương tác. Kiểu chữ được phân chia giữa NeueHaasGrotesk cho tiêu đề hiển thị và mang tính biên tập, và Inter-Variable cho nội dung giao diện người dùng. Các nút kêu gọi hành động (CTA) có hình viên thuốc bo tròn hoàn toàn (border-radius: 9999px). Tổng thể hệ thống thiết kế tự tin, độ tương phản cao và đầy khát vọng, được xây dựng để biến khách truy cập thành người bán hàng.