ghost · desktop
Au reposCorrespondance de 100 %26 mesures correspondent
SurvolCorrespondance de 100 %22 mesures correspondent
FocusCorrespondance de 100 %22 mesures correspondent
Confiance de l’extraction
Jetons de design extraits par analyse de fréquence de la CSSOM, sans interprétation par un LLM.
ghost · desktop
Au reposCorrespondance de 100 %26 mesures correspondent
SurvolCorrespondance de 100 %22 mesures correspondent
FocusCorrespondance de 100 %22 mesures correspondent
ghost · desktop
Au reposCorrespondance de 100 %22 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
ghost · desktop
Label : y vaut 59px, le site a 0px.
Au reposCorrespondance de 100 %1 mesures sur 57 diffèrent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
ghost · desktop
Non vérifiable : des photos, médias ou publicités placés par la page en couvrent la majeure partie et rien d’autre ne diffère, la comparaison ne dit donc rien de la recette.
Au reposCorrespondance de 100 %35 mesures correspondent
FocusCorrespondance de 61 %18 mesures correspondent
primary · desktop
Au reposCorrespondance de 100 %26 mesures correspondent
SurvolCorrespondance de 100 %22 mesures correspondent
FocusCorrespondance de 100 %22 mesures correspondent
primary · desktop
Label 2 : y vaut 27px, le site a 9px.
Au reposCorrespondance de 100 %1 mesures sur 29 diffèrent
SurvolCorrespondance de 91 %22 mesures correspondent
FocusCorrespondance de 76 %22 mesures correspondent
primary · desktop
Group : y vaut 27px, le site a 9px; Label 2 : y vaut 28px, le site a 10px et 2 autres.
Au reposCorrespondance de 100 %4 mesures sur 55 diffèrent
SurvolCorrespondance de 91 %22 mesures correspondent
FocusCorrespondance de 76 %22 mesures correspondent
primary · desktop
Son rendu ressemble au site à 95 %, sous le seuil de 97 %.
Au reposCorrespondance de 95 %25 mesures correspondent
SurvolCorrespondance de 95 %22 mesures correspondent
FocusCorrespondance de 94 %22 mesures correspondent
primary · desktop
Son rendu ressemble au site à 96 %, sous le seuil de 97 %.
Au reposCorrespondance de 96 %25 mesures correspondent
SurvolCorrespondance de 96 %22 mesures correspondent
FocusCorrespondance de 94 %22 mesures correspondent
secondary · desktop
Au reposCorrespondance de 100 %26 mesures correspondent
SurvolCorrespondance de 100 %22 mesures correspondent
FocusCorrespondance de 99 %22 mesures correspondent
secondary · desktop
Au reposCorrespondance de 100 %26 mesures correspondent
SurvolCorrespondance de 100 %22 mesures correspondent
FocusCorrespondance de 100 %22 mesures correspondent
secondary · desktop
Racine : width vaut 138px, le site a 202px; Racine : height vaut 64px, le site a 92px.
Au reposCorrespondance de 97 %2 mesures sur 22 diffèrent
SurvolCorrespondance de 97 %18 mesures correspondent
FocusCorrespondance de 97 %18 mesures correspondent
desktop
Au focus, son rendu ressemble au site à 89 %, sous le seuil de 97 %.
Au reposCorrespondance de 99 %90 mesures correspondent
FocusCorrespondance de 89 %22 mesures correspondent
desktop
Media : y vaut 93px, le site a 57px; Text : y vaut 149px, le site a 106px et 3 autres.
Au reposCorrespondance de 100 %5 mesures sur 201 diffèrent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %1 mesures sur 18 diffèrent
Au repos, instance 2Correspondance de 100 %5 mesures sur 201 diffèrent
Au repos, instance 3Correspondance de 100 %5 mesures sur 201 diffèrent
Au repos, instance 4Correspondance de 100 %5 mesures sur 201 diffèrent
Au repos, instance 5Correspondance de 100 %5 mesures sur 201 diffèrent
Au repos, instance 6Correspondance de 100 %5 mesures sur 201 diffèrent
desktop
Break : y vaut 110px, le site a 138px; Text : y vaut 138px, le site a 166px.
Au reposCorrespondance de 100 %2 mesures sur 73 diffèrent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %1 mesures sur 18 diffèrent
Au repos, instance 2Correspondance de 100 %2 mesures sur 73 diffèrent
Au repos, instance 3Correspondance de 100 %2 mesures sur 73 diffèrent
desktop
Group : y vaut 0px, le site a 77px; Media : y vaut 0px, le site a 77px et 14 autres.
Au reposCorrespondance de 100 %16 mesures sur 190 diffèrent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
Au repos, instance 2Correspondance de 100 %16 mesures sur 190 diffèrent
Au repos, instance 3Correspondance de 100 %16 mesures sur 190 diffèrent
Au repos, instance 4Correspondance de 100 %16 mesures sur 190 diffèrent
Au repos, instance 5Correspondance de 100 %16 mesures sur 190 diffèrent
Au repos, instance 6Correspondance de 100 %16 mesures sur 190 diffèrent
desktop
Au reposCorrespondance de 99 %154 mesures correspondent
Au repos, instance 2Correspondance de 99 %154 mesures correspondent
Au repos, instance 3Correspondance de 99 %154 mesures correspondent
Au repos, instance 4Correspondance de 100 %154 mesures correspondent
desktop
Non vérifiable : des photos, médias ou publicités placés par la page en couvrent la majeure partie et rien d’autre ne diffère, la comparaison ne dit donc rien de la recette.
Au reposCorrespondance de 100 %66 mesures correspondent
Au repos, instance 2Correspondance de 100 %66 mesures correspondent
Au repos, instance 3Correspondance de 100 %66 mesures correspondent
desktop
Non vérifiable : des photos, médias ou publicités placés par la page en couvrent la majeure partie et rien d’autre ne diffère, la comparaison ne dit donc rien de la recette.
Au reposCorrespondance de 100 %149 mesures correspondent
Au repos, instance 2Correspondance de 100 %149 mesures correspondent
Au repos, instance 3Correspondance de 100 %149 mesures correspondent
Au repos, instance 4Correspondance de 100 %149 mesures correspondent
Au repos, instance 5Correspondance de 100 %149 mesures correspondent
desktop
Non vérifiable : des photos, médias ou publicités placés par la page en couvrent la majeure partie et rien d’autre ne diffère, la comparaison ne dit donc rien de la recette.
Au reposCorrespondance de 100 %63 mesures correspondent
Au repos, instance 2Correspondance de 100 %63 mesures correspondent
Au repos, instance 3Correspondance de 100 %63 mesures correspondent
desktop
Au reposCorrespondance de 100 %119 mesures correspondent
Au repos, instance 2Correspondance de 100 %119 mesures correspondent
Au repos, instance 3Correspondance de 100 %119 mesures correspondent
desktop
Title : y vaut 5px, le site a 124px; Body : y vaut 123px, le site a 241px et 2 autres.
Au reposCorrespondance de 95 %4 mesures sur 111 diffèrent
Au repos, instance 2Correspondance de 100 %4 mesures sur 111 diffèrent
Au repos, instance 3Correspondance de 100 %4 mesures sur 111 diffèrent
desktop
Racine : height vaut 78px, le site a 56px; Group 2 : height vaut 44px, le site a 22px et 2 autres.
Au reposCorrespondance de 100 %4 mesures sur 109 diffèrent
desktop
Au focus, son rendu ressemble au site à 91 %, sous le seuil de 96 %.
Au reposCorrespondance de 100 %21 mesures correspondent
FocusCorrespondance de 91 %18 mesures correspondent
desktop
Group 2 : y vaut 87px, le site a 98px; Text : y vaut 87px, le site a 98px.
Au reposCorrespondance de 100 %2 mesures sur 67 diffèrent
FocusCorrespondance de 93 %18 mesures correspondent
desktop
Au focus, son rendu ressemble au site à 88 %, sous le seuil de 96 %.
Au reposCorrespondance de 100 %23 mesures correspondent
FocusCorrespondance de 88 %18 mesures correspondent
desktop
Non vérifiable : des photos, médias ou publicités placés par la page en couvrent la majeure partie et rien d’autre ne diffère, la comparaison ne dit donc rien de la recette.
Au reposCorrespondance de 99 %149 mesures correspondent
Au repos, instance 2Correspondance de 100 %149 mesures correspondent
Au repos, instance 3Correspondance de 100 %149 mesures correspondent
Au repos, instance 4Correspondance de 100 %149 mesures correspondent
Au repos, instance 5Correspondance de 100 %149 mesures correspondent
Au repos, instance 6Correspondance de 100 %149 mesures correspondent
desktop
List : width vaut 225px, le site a 176px; Item : width vaut 225px, le site a 176px et 31 autres.
Au reposCorrespondance de 100 %33 mesures sur 776 diffèrent
desktop
Au reposCorrespondance de 100 %56 mesures correspondent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
Au reposCorrespondance de 100 %98 mesures correspondent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
Au reposCorrespondance de 100 %56 mesures correspondent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
Au reposCorrespondance de 100 %98 mesures correspondent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
List : width vaut 225px, le site a 176px; Item : width vaut 225px, le site a 176px et 31 autres.
Au reposCorrespondance de 100 %33 mesures sur 776 diffèrent
desktop
List : width vaut 225px, le site a 176px; Item : width vaut 225px, le site a 176px et 31 autres.
Au reposCorrespondance de 100 %33 mesures sur 776 diffèrent
desktop
Au reposCorrespondance de 100 %22 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
Au reposCorrespondance de 100 %22 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
Au reposCorrespondance de 100 %22 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
Son rendu ressemble au site à 50 %, sous le seuil de 96 %.
Au reposCorrespondance de 50 %192 mesures correspondent
SurvolCorrespondance de 50 %18 mesures correspondent
FocusCorrespondance de 50 %1 mesures sur 18 diffèrent
Au repos, instance 2Correspondance de 100 %192 mesures correspondent
Au repos, instance 3Correspondance de 100 %192 mesures correspondent
desktop
Group : y vaut 8px, le site a 12px; Group : width vaut 1180px, le site a 1154px et 30 autres.
Au reposCorrespondance de 100 %32 mesures sur 374 diffèrent
desktop
Au reposCorrespondance de 99 %91 mesures correspondent
SurvolCorrespondance de 99 %19 mesures correspondent
FocusCorrespondance de 99 %19 mesures correspondent
Au repos, instance 2Correspondance de 100 %91 mesures correspondent
Au repos, instance 3Correspondance de 100 %91 mesures correspondent
Au repos, instance 4Correspondance de 100 %91 mesures correspondent
Au repos, instance 5Correspondance de 100 %91 mesures correspondent
Au repos, instance 6Correspondance de 100 %91 mesures correspondent
desktop
Au reposCorrespondance de 100 %77 mesures correspondent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
Au reposCorrespondance de 100 %77 mesures correspondent
SurvolCorrespondance de 100 %18 mesures correspondent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
Group : y vaut 8px, le site a 12px; Group : height vaut 43px, le site a 36px et 32 autres.
Au reposCorrespondance de 100 %34 mesures sur 418 diffèrent
desktop
Text 2 : y vaut 33px, le site a 17px; Group : width vaut 0px, le site a 4px.
Au reposCorrespondance de 100 %2 mesures sur 234 diffèrent
desktop
Racine : height vaut 105px, le site a 96px; Text : height vaut 74px, le site a 65px et 7 autres.
Au reposCorrespondance de 100 %9 mesures sur 72 diffèrent
FocusCorrespondance de 97 %18 mesures correspondent
desktop
Group 3 : y vaut 55px, le site a 66px; Text : y vaut 55px, le site a 66px.
Au reposCorrespondance de 100 %2 mesures sur 87 diffèrent
FocusCorrespondance de 100 %18 mesures correspondent
desktop
Au focus, son rendu ressemble au site à 35 %, sous le seuil de 96 %.
Au reposCorrespondance de 100 %21 mesures correspondent
FocusCorrespondance de 35 %18 mesures correspondent
desktop
Racine : width vaut 138px, le site a 202px; Racine : height vaut 64px, le site a 92px.
Au reposCorrespondance de 74 %2 mesures sur 22 diffèrent
FocusCorrespondance de 74 %18 mesures correspondent
desktop
Group : x vaut 713px, le site a 1146px; Icon 2 : x vaut 713px, le site a 1146px.
Au reposCorrespondance de 100 %2 mesures sur 308 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur nav link 2Correspondance de 100 %18 mesures correspondent
Survol sur nav link 2Correspondance de 100 %18 mesures correspondent
Focus sur nav link 3Correspondance de 100 %18 mesures correspondent
Survol sur nav link 3Correspondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
desktop
Group : x vaut 713px, le site a 1146px; Icon 2 : x vaut 713px, le site a 1146px.
Au reposCorrespondance de 100 %2 mesures sur 308 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur nav link 2Correspondance de 100 %18 mesures correspondent
Survol sur nav link 2Correspondance de 100 %18 mesures correspondent
Focus sur nav link 3Correspondance de 100 %18 mesures correspondent
Survol sur nav link 3Correspondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
desktop
Group 4 : y vaut 52px, le site a -3px; Group 4 : height vaut 59px, le site a 41px et 5 autres.
Au reposCorrespondance de 98 %7 mesures sur 228 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur ctaCorrespondance de 97 %22 mesures correspondent
Survol sur ctaCorrespondance de 98 %22 mesures correspondent
Focus sur logoCorrespondance de 94 %18 mesures correspondent
desktop
Group : x vaut 713px, le site a 1146px; Icon 2 : x vaut 713px, le site a 1146px.
Au reposCorrespondance de 100 %2 mesures sur 308 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur nav link 2Correspondance de 100 %18 mesures correspondent
Survol sur nav link 2Correspondance de 100 %18 mesures correspondent
Focus sur nav link 3Correspondance de 100 %18 mesures correspondent
Survol sur nav link 3Correspondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
mobile
Nav link 2 : x vaut 261px, le site a 246px; Group : x vaut 277px, le site a 262px et 2 autres.
Au reposCorrespondance de 100 %4 mesures sur 385 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur menu toggleCorrespondance de 100 %18 mesures correspondent
Survol sur menu toggleCorrespondance de 100 %18 mesures correspondent
Focus sur nav link 2Correspondance de 99 %18 mesures correspondent
Survol sur nav link 2Correspondance de 100 %18 mesures correspondent
Focus sur nav link 3Correspondance de 99 %18 mesures correspondent
Survol sur nav link 3Correspondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
mobile
Au focus, son rendu ressemble au site à 94 %, sous le seuil de 96 %.
Au reposCorrespondance de 100 %207 mesures correspondent
Survolnon vérifié
Focusnon vérifié
Focus sur ctaCorrespondance de 100 %22 mesures correspondent
Survol sur ctaCorrespondance de 100 %22 mesures correspondent
Focus sur logoCorrespondance de 94 %18 mesures correspondent
mobile
Nav link 2 : x vaut 261px, le site a 246px; Group : x vaut 277px, le site a 262px et 2 autres.
Au reposCorrespondance de 100 %4 mesures sur 385 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur menu toggleCorrespondance de 100 %18 mesures correspondent
Survol sur menu toggleCorrespondance de 100 %18 mesures correspondent
Focus sur nav link 2Correspondance de 99 %18 mesures correspondent
Survol sur nav link 2Correspondance de 100 %18 mesures correspondent
Focus sur nav link 3Correspondance de 99 %18 mesures correspondent
Survol sur nav link 3Correspondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
mobile
Nav link 2 : x vaut 261px, le site a 246px; Group : x vaut 277px, le site a 262px et 2 autres.
Au reposCorrespondance de 100 %4 mesures sur 385 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur menu toggleCorrespondance de 100 %18 mesures correspondent
Survol sur menu toggleCorrespondance de 100 %18 mesures correspondent
Focus sur nav link 2Correspondance de 99 %18 mesures correspondent
Survol sur nav link 2Correspondance de 100 %18 mesures correspondent
Focus sur nav link 3Correspondance de 99 %18 mesures correspondent
Survol sur nav link 3Correspondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
desktop
Inner : height vaut 5418px, le site a 7902px; Group : height vaut 5418px, le site a 7280px et 5 autres.
Au reposCorrespondance de 100 %7 mesures sur 1504 diffèrent
Focusnon vérifié
Focus sur link 2Correspondance de 100 %18 mesures correspondent
Focus sur linkCorrespondance de 98 %18 mesures correspondent
desktop
Inner : height vaut 1244px, le site a 2174px; Group : height vaut 727px, le site a 1552px et 122 autres.
Au reposCorrespondance de 100 %124 mesures sur 1804 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur nav link 2Correspondance de 100 %18 mesures correspondent
Survol sur nav link 2Correspondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
desktop
Inner : height vaut 838px, le site a 1131px; Group : height vaut 320px, le site a 509px et 115 autres.
Au reposCorrespondance de 100 %117 mesures sur 2107 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur nav link 2Correspondance de 100 %18 mesures correspondent
Survol sur nav link 2Correspondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
desktop
Inner : height vaut 647px, le site a 773px; List : height vaut 22px, le site a 0px et 2 autres.
Au reposCorrespondance de 100 %4 mesures sur 2124 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur nav link 2Correspondance de 100 %18 mesures correspondent
Survol sur nav link 2Correspondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
desktop
Inner : height vaut 870px, le site a 996px; Group 4 : height vaut 323px, le site a 349px et 2 autres.
Au reposCorrespondance de 100 %4 mesures sur 2214 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur linkCorrespondance de 100 %18 mesures correspondent
Focus sur nav linkCorrespondance de 100 %18 mesures correspondent
Survol sur nav linkCorrespondance de 100 %18 mesures correspondent
mobile
Inner : height vaut 2134px, le site a 4222px; Group : height vaut 1575px, le site a 3584px et 170 autres.
Au reposCorrespondance de 99 %172 mesures sur 1615 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur buttonCorrespondance de 99 %18 mesures correspondent
Survol sur buttonCorrespondance de 99 %18 mesures correspondent
Focus sur nav linkCorrespondance de 99 %18 mesures correspondent
Survol sur nav linkCorrespondance de 99 %18 mesures correspondent
mobile
La recette n’a pas pu être rendue seule.
Rien n’a été comparé pour ce composant.
Recette dans le DESIGN.mdmobile
La recette n’a pas pu être rendue seule.
Rien n’a été comparé pour ce composant.
Recette dans le DESIGN.mdmobile
La recette n’a pas pu être rendue seule.
Rien n’a été comparé pour ce composant.
Recette dans le DESIGN.mdmobile
Racine : height vaut 1554px, le site a 1433px; Inner : height vaut 1554px, le site a 1433px et 143 autres.
Au reposCorrespondance de 98 %145 mesures sur 1880 diffèrent
Survolnon vérifié
Focusnon vérifié
Focus sur buttonCorrespondance de 98 %18 mesures correspondent
Survol sur buttonCorrespondance de 98 %18 mesures correspondent
Focus sur link 2Correspondance de 98 %18 mesures correspondent
Focus sur link 3Correspondance de 98 %18 mesures correspondent
Survol sur link 3Correspondance de 98 %18 mesures correspondent
Focus sur link 4Correspondance de 98 %18 mesures correspondent
Survol sur link 4Correspondance de 98 %18 mesures correspondent
Focus sur linkCorrespondance de 98 %18 mesures correspondent
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.Ce fichier DESIGN.md est en anglais, la langue dans laquelle les agents de code IA le lisent.
Extrait du site public de Apple, pas une charte de marque officielle. Vérifier les polices d’un autre site

Jetons de design extraits par analyse de fréquence de la CSSOM, sans interprétation par un LLM.

Le système de design d'Airbnb repose sur une unique police variable propriétaire (Airbnb Cereal VF) et sur une palette neutre presque monochrome, ancrée par un anthracite profond (#222222) et des gris clairs. Le rose corail signature de la marque, « Rausch » (#ff385c), est réservé exclusivement aux appels à l'action principaux et au logo. La mise en page est une grille responsive de cartes photo, avec des rapports image-texte généreux, des coins arrondis de 20px sur les cartes et un système d'ombres ambiantes à plusieurs couches qui crée une profondeur subtile sans contraste marqué. La barre de recherche, en forme de pilule bien visible, regroupe l'action principale de l'utilisateur.
IKEA présente sur sa page d'accueil mondiale un système de design affirmé et à plat, dont l'élément central est le jaune IKEA (#ffdb00), utilisé comme surface d'action principale, tandis que le bleu IKEA (#0058a3) sert d'accent au logo de la marque. Toute la typographie repose sur une police personnalisée unique, Noto IKEA, déclinée en graisses 400 et 700 selon une échelle étroitement définie, des textes courants à 14px jusqu'aux titres d'affichage à 51px. La hiérarchie visuelle passe entièrement par le contraste des couleurs et la structure de la mise en page, sans recours aux ombres. La mise en page s'appuie sur un conteneur d'une largeur maximale de 90rem, avec un espacement de grille de 1,5rem sur ordinateur, et un rayon de bordure homogène de 8px appliqué aux éléments interactifs. Le fond blanc cassé (#fffefb) apporte de la chaleur face au texte #111111 très contrasté, pour une lecture à fort contraste et accessible.

La page d'accueil marketing de Notion associe une section héros bleu marine profond (#02093a) à un corps de page clair (#f6f5f4), avec une police personnalisée (NotionInter) pour tous les rôles de texte. Le design repose sur une grille de 12 colonnes avec des gouttières de 28px, un langage de rayons double (8px pour les cartes, 9999px pour les pastilles) et un système d'ombres progressives à plusieurs couches pour les éléments flottants. Le bleu de marque (#2537b1) guide les boutons d'appel à l'action et les accents, tandis qu'une échelle de gris sémantique (de gray-200 à gray-900) structure toute la hiérarchie des textes et des surfaces.

Le système de design de Railway est une interface de plateforme pour développeurs pensée d'abord pour le mode sombre, reposant sur des surfaces bleu marine presque noir (#13111c, #0b0b0f), un texte blanc cassé à fort contraste (#f7f7f8) et un accent violet distinctif (#853bce / #553f83). La section héros utilise IBM Plex Serif pour un poids éditorial, tandis qu'Inter assure tout le texte de l'interface et que JetBrains Mono / SF Mono sont réservées aux contextes de code. L'élévation repose sur des bordures à lueur blanche en retrait (rgba(255,255,255,0.2) 1.5px inset) plutôt que sur des ombres portées, ce qui donne à l'interface une esthétique de panneaux en verre. Le système d'espacement est basé sur une grille de 4px, avec un rythme marqué de 8/12/16/24/32. Les rayons de bordure sont serrés (4px dominant), avec des valeurs de 8px et 16px appliquées sélectivement aux cartes et aux conteneurs du héros.

Le site marketing de Shopify s'ouvre sur un héros vidéo plein écran et spectaculaire, dont le fond quasi noir (#02090a) contraste fortement avec la barre de navigation blanche située au-dessus. L'accent de marque principal est un vert menthe éclatant (#36f4a4), utilisé avec parcimonie pour les mises en avant et les états interactifs. La typographie repose sur deux familles : NeueHaasGrotesk pour les titres display et éditoriaux, et Inter-Variable pour le texte d'interface. Les boutons d'appel à l'action adoptent des formes pilule entièrement arrondies (border-radius: 9999px). L'ensemble du système est affirmé, très contrasté et aspirationnel, conçu pour convertir les visiteurs en marchands.