Brompton: Repliocate the header circle in the footer

brompton/sass/_extra-child-theme.scss

@@ -357,14 +357,16 @@ table,
 // Footer
 #colophon {
 	flex-direction: column;
-	padding-bottom: 5px;
+	padding-bottom: #{5 + map-deep-get($config-global, "spacing", "vertical")};
 
 	.site-info {
 		background: #{map-deep-get($config-global, "color", "foreground", "default")};
 		border-bottom: 5px solid #{map-deep-get($config-global, "color", "primary", "default")};
 		border-top: 5px solid #{map-deep-get($config-global, "color", "primary", "default")};
 		font-weight: 900;
-		padding: #{0.5 * map-deep-get($config-global, "spacing", "vertical")} #{map-deep-get($config-global, "spacing", "horizontal")};
+		min-height: #{110 - map-deep-get($config-global, "spacing", "vertical")};
+		padding: #{map-deep-get($config-global, "spacing", "vertical")} #{map-deep-get($config-global, "spacing", "horizontal")};
+		position: relative;
 		text-transform: uppercase;
 		@extend %responsive-width-full;
 
@@ -379,6 +381,36 @@ table,
 		.site-name {
 			font-weight: inherit;
 		}
+
+		& > * {
+			position: relative;
+		}
+
+		&:before,
+		&:after {
+			background: #{map-deep-get($config-global, "color", "foreground", "default")};
+			border-bottom-left-radius: 200px;
+			border-bottom-right-radius: 200px;
+			content: "";
+			display: block;
+			height: 100px;
+			left: 50%;
+			margin-left: -100px;
+			position: absolute;
+			bottom: -#{map-deep-get($config-global, "spacing", "vertical")};
+			width: 200px;
+		}
+
+		&:after {
+			background: #{map-deep-get($config-global, "color", "primary", "default")};
+			border-bottom-left-radius: 210px;
+			border-bottom-right-radius: 210px;
+			height: 110px;
+			margin-left: -105px;
+			transform: translateY(5px);
+			width: 210px;
+			z-index: -1;
+		}
 	}
 }
 

brompton/style-rtl.css

@@ -3147,6 +3147,8 @@ table th,
 
 #masthead:after {
 	background: #C04239;
+	border-top-right-radius: 210px;
+	border-top-left-radius: 210px;
 	height: 110px;
 	margin-right: -105px;
 	transform: translateY(-5px);
@@ -3435,7 +3437,7 @@ table th,
 
 #colophon {
 	flex-direction: column;
-	padding-bottom: 5px;
+	padding-bottom: 37px;
 }
 
 #colophon .site-info {
@@ -3443,7 +3445,8 @@ table th,
 	border-bottom: 5px solid #C04239;
 	border-top: 5px solid #C04239;
 	font-weight: 900;
-	padding: 16px 16px;
+	padding: 32px 16px;
+	position: relative;
 	text-transform: uppercase;
 }
 
@@ -3461,6 +3464,35 @@ table th,
 	font-weight: inherit;
 }
 
+#colophon .site-info > * {
+	position: relative;
+}
+
+#colophon .site-info:before, #colophon .site-info:after {
+	background: #252E36;
+	border-bottom-right-radius: 200px;
+	border-bottom-left-radius: 200px;
+	content: "";
+	display: block;
+	height: 100px;
+	right: 50%;
+	margin-right: -100px;
+	position: absolute;
+	bottom: -32px;
+	width: 200px;
+}
+
+#colophon .site-info:after {
+	background: #C04239;
+	border-bottom-right-radius: 210px;
+	border-bottom-left-radius: 210px;
+	height: 110px;
+	margin-right: -105px;
+	transform: translateY(5px);
+	width: 210px;
+	z-index: -1;
+}
+
 .comments-area .comment-list,
 .comments-area .children {
 	border: 0;

brompton/style.css

@@ -3442,7 +3442,7 @@ table th,
 
 #colophon {
 	flex-direction: column;
-	padding-bottom: 5px;
+	padding-bottom: 37px;
 }
 
 #colophon .site-info {
@@ -3450,7 +3450,9 @@ table th,
 	border-bottom: 5px solid #C04239;
 	border-top: 5px solid #C04239;
 	font-weight: 900;
-	padding: 16px 16px;
+	min-height: 78px;
+	padding: 32px 16px;
+	position: relative;
 	text-transform: uppercase;
 }
 
@@ -3468,6 +3470,35 @@ table th,
 	font-weight: inherit;
 }
 
+#colophon .site-info > * {
+	position: relative;
+}
+
+#colophon .site-info:before, #colophon .site-info:after {
+	background: #252E36;
+	border-bottom-left-radius: 200px;
+	border-bottom-right-radius: 200px;
+	content: "";
+	display: block;
+	height: 100px;
+	left: 50%;
+	margin-left: -100px;
+	position: absolute;
+	bottom: -32px;
+	width: 200px;
+}
+
+#colophon .site-info:after {
+	background: #C04239;
+	border-bottom-left-radius: 210px;
+	border-bottom-right-radius: 210px;
+	height: 110px;
+	margin-left: -105px;
+	transform: translateY(5px);
+	width: 210px;
+	z-index: -1;
+}
+
 .comments-area .comment-list,
 .comments-area .children {
 	border: 0;