feat: dark theme (#12)

pingcap-jp/bootstrap/blocks.php

@@ -89,8 +89,11 @@
 	'block-bg-none' => 'None',
 	'block-bg-image' => 'Image',
 	'bg-black' => 'Black',
+	'bg-black-dark' => 'Black(#000)',
 	'bg-blue' => 'Blue',
 	'bg-gray' => 'Gray',
+	'bg-gradient' => 'Gradient',
+	'bg-color-gradient' => 'Color Gradient',
 
 	'block-bg-none block-bg-split' => 'White / Black'
 ]);
@@ -99,18 +102,18 @@
  * Only allow specific background colors for the specified blocks
  */
 WPUtil\Vendor\BlueprintBlocks::restrict_backgrounds_for_blocks([
-	'cards' => ['block-bg-none', 'bg-black', 'bg-gray'],
+	'cards' => ['block-bg-none', 'bg-black', 'bg-black-dark', 'bg-gray', 'bg-gradient'],
 	'case-study' => ['block-bg-none'],
-	'columns' => ['block-bg-none', 'bg-black', 'bg-blue', 'bg-gray','block-bg-image'],
+	'columns' => ['block-bg-none', 'bg-black', 'bg-black-dark', 'bg-blue', 'bg-gray', 'block-bg-image', 'bg-gradient', 'bg-color-gradient'],
 	'community-activities' => ['block-bg-none'],
-	'cta' => ['block-bg-none', 'bg-black', 'bg-gray', 'block-bg-image'],
-	'icon-grid' => ['block-bg-none', 'bg-blue', 'bg-black'],
+	'cta' => ['block-bg-none', 'bg-black', 'bg-black-dark', 'bg-gray', 'block-bg-image'],
+	'icon-grid' => ['block-bg-none', 'bg-blue', 'bg-black', 'bg-black-dark', 'bg-gradient'],
 	'leadership' => ['block-bg-none'],
-	'logos' => ['block-bg-none'],
-	'media-content' => ['block-bg-none'],
+	'logos' => ['block-bg-none', 'bg-black', 'bg-black-dark'],
+	'media-content' => ['block-bg-none', 'bg-black', 'bg-black-dark', 'bg-gradient'],
 	'open-positions' => ['block-bg-none'],
 	'pricing' => ['bg-blue'],
-	'resources' => ['block-bg-none', 'block-bg-none block-bg-split','bg-gray'],
+	'resources' => ['block-bg-none', 'block-bg-none block-bg-split', 'bg-gray'],
 	'solutions' => ['block-bg-none'],
 	'stats' => ['block-bg-none'],
 	'table' => ['bg-blue'],

pingcap-jp/bootstrap/tinymce.php

@@ -39,6 +39,10 @@
 		),
 		'option' => array(
 			'value' => true
+		),
+		'embed' => array(
+			'type' => true,
+			'src' => true
 		)
 	)
 );

pingcap-jp/css/blocks/columns.scss

@@ -4,6 +4,21 @@
 			align-items: center;
 		}
 	}
+	&.container-border-top {
+		.block-inner {
+			border-top: 1px solid;
+			border-image: linear-gradient(
+					90deg,
+					#0ca6f2 -1.46%,
+					#0aadc4 7.56%,
+					#006fc2 16.61%,
+					#0ca6f2 23.05%,
+					#01ecb0 91.39%,
+					#28ea76 100%
+				)
+				1;
+		}
+	}
 	.block-inner {
 		display: grid;
 		grid-template-columns: repeat(var(--grid-num-cols, 1), minmax(0, 1fr));
@@ -275,10 +290,6 @@
 		@include media-min($large) {
 			padding-bottom: calc(var(--block-padding-lg-bottom));
 		}
-
-		&::before {
-			bottom: 0;
-		}
 	}
 
 	&__video-container {

pingcap-jp/css/blocks/cta.scss

@@ -31,7 +31,7 @@
 	&__column-title-container {
 		display: flex;
 		align-items: center;
-		gap: 1.7rem;
+		gap: 1.8rem;
 		margin-bottom: 1.5rem;
 	}
 

pingcap-jp/css/blocks/media-content.scss

@@ -3,7 +3,7 @@
 	position: relative;
 
 	&.last {
-		margin-bottom: 8rem;
+		padding-bottom: 8rem;
 	}
 
 	&__container {

pingcap-jp/css/components/banners/banner-default.scss

@@ -1,4 +1,10 @@
 .banner-default {
+	&.bg-black {
+		background-repeat: repeat-x;
+		background-position: top center;
+		background-image: linear-gradient(to bottom, rgba(14, 14, 14, 0.4) 0, #000000bd 100%),
+			url(https://static.pingcap.co.jp/files/2024/06/29150254/bg-hex-pattern.png);
+	}
 	&__inner {
 		/* stylelint-disable */
 		--bottom-padding-pull-up: 0;
@@ -255,7 +261,7 @@
 	&.tmpl-get-started,
 	&.tmpl-pricing {
 		padding-bottom: 5rem;
-		@include media-min($medium){
+		@include media-min($medium) {
 			height: 300px;
 		}
 		.banner-default__inner {

pingcap-jp/css/components/banners/banner-home.scss

@@ -1,21 +1,21 @@
 .banner-home {
 	position: relative;
 	padding-top: 3rem;
+	background-repeat: repeat-x;
+	background-position: top center;
+	background-image: linear-gradient(to bottom, rgba(14, 14, 14, 0.4) 0, #000000bd 100%),
+		url(https://static.pingcap.co.jp/files/2024/06/29150254/bg-hex-pattern.png);
 
-	&__title {
-		color: var(--color-black);
+	h1 {
+		line-height: 1.25;
 	}
 
 	&__content {
-		margin-top: 1.6rem;
+		margin-top: 2.4rem;
 		padding-right: 3.2rem;
 		p {
 			font-weight: 700;
 			font-size: 30px;
-			color: #8b8c93;
-		}
-		h3 {
-			color: #8b8c93;
 		}
 	}
 

pingcap-jp/css/components/cards/card-text-content.scss

@@ -1,28 +1,31 @@
 .card-text-content {
 	padding: 3.2rem;
 	border-radius: var(--card-border-radius);
-	border: 1px solid var(--card-border-color);
+	border: 1px solid transparent;
 	transition: all var(--default-transition-params);
 
+	background-clip: padding-box, border-box;
+	background-origin: padding-box, border-box;
+	background-image: var(--card-background-image);
+
 	&:hover {
 		box-shadow: var(--card-box-shadow);
-		transform:var(--card-transform);
+		transform: var(--card-transform);
 	}
 
-	&__label{
+	&__label {
 		margin-bottom: 1.6rem;
-		color: var(--color-black);
+		color: var(--card-label-color);
 	}
 
-
 	&__title-container {
 		display: flex;
 		align-items: center;
 		gap: 2rem;
 	}
 
-	h5{
-		color: #303EAB;
+	h5 {
+		color: var(--card-title-color);
 	}
 
 	&__icon {

pingcap-jp/css/components/case-study-testimonial.scss

@@ -10,7 +10,7 @@
 
 		&__blockquote-container {
 			grid-column: 6 / 12;
-			margin-top: 12rem;
+			margin-top: 6rem;
 		}
 	}
 

pingcap-jp/css/components/footer.scss

@@ -1,5 +1,6 @@
 .site-footer {
 	padding: 5rem 0;
+	background-color: #20222B;
 
 	a {
 		color: var(--color-white);
@@ -224,6 +225,7 @@
 	&__design,
 	&__copyright {
 		font-size: 1.2rem;
+		color: #fff;
 	}
 
 	&__beian {

pingcap-jp/css/components/header.scss

@@ -12,7 +12,23 @@ html.mobile-menu-cta-active {
 }
 
 .site-header {
+	background-color: #20222b;
 	transition: transform var(--header-transition-speed) ease-in-out;
+
+	&__bg-bar {
+		height: 4px;
+		background: linear-gradient(
+			90deg,
+			#0cb1f2 -0.01%,
+			#12c0c5 13.53%,
+			#256cd4 28.11%,
+			#15a1e6 40.61%,
+			#0ca6f2 64.05%,
+			#01ecb0 91.53%,
+			#0cf06e 99.98%
+		);
+	}
+
 	&-wrapper {
 		z-index: var(--z-header);
 		position: fixed;
@@ -23,10 +39,11 @@ html.mobile-menu-cta-active {
 
 	display: flex;
 	align-items: center;
-	padding: 1.5rem 0;
+	padding: 1.2rem 0;
 
 	&__top {
-		background-color: #404559;
+		background: linear-gradient(90deg, #13367d -1.46%, #0f3141 37.65%, #006f5d);
+
 		nav {
 			display: flex;
 			justify-content: flex-end;
@@ -37,7 +54,9 @@ html.mobile-menu-cta-active {
 				font-size: 1.4rem;
 				text-decoration: none;
 				line-height: 2rem;
-				font-weight: 500;
+				font-weight: 700;
+				display: flex;
+				align-items: center;
 			}
 		}
 		&-menu-icon {
@@ -71,9 +90,11 @@ html.mobile-menu-cta-active {
 
 	&__logo {
 		width: 132px;
+		height: 34px;
 
 		@include media-min($large) {
 			width: 150px;
+			height: 40px;
 		}
 	}
 
@@ -121,30 +142,30 @@ html.mobile-menu-cta-active {
 			width: 13.6rem;
 			min-width: unset;
 			min-height: unset;
-			height: 3.4rem;
+			height: 3.2rem;
 			padding: unset;
 		}
 	}
 
 	&__menu {
 		display: flex;
 		align-items: center;
-		gap: 3rem;
+		gap: 3.2rem;
 	}
 
 	&__menu-primary {
 		display: none;
 
 		@include media-min($large) {
 			display: flex;
-			gap: 3rem;
+			gap: 3.2rem;
 			flex-grow: 1;
 		}
 	}
 
 	&__primary-menu-link {
 		position: relative;
-		font-weight: var(--font-weight-medium);
+		font-weight: var(--font-weight-bold);
 		color: var(--color-white);
 		text-decoration: underline;
 		text-decoration-color: transparent;

pingcap-jp/css/components/menu-dropdowns/menu-dropdown.scss

@@ -15,6 +15,22 @@
 		}
 	}
 
+	&__item-ai {
+		display: flex;
+		flex-direction: column;
+		gap: 1.6rem;
+		padding-bottom: 24px;
+		a {
+			display: flex;
+			gap: 1.6rem;
+			align-items: center;
+			.icon-ai {
+				width: 2rem;
+				height: 2rem;
+			}
+		}
+	}
+
 	&__feature-column {
 		padding: 1.6rem 2.4rem;
 		min-width: 360px;
@@ -46,7 +62,7 @@
 		flex-direction: column;
 		gap: 1.6rem;
 		padding: 2.4rem 3rem;
-		
+
 		a {
 			display: flex;
 			font-size: 1.4rem;

pingcap-jp/css/components/mobile-menu.scss

@@ -1,4 +1,5 @@
 .mobile-menu {
+	background-color: #20222B;
 	z-index: calc(var(--z-header) + 1);
 	display: flex;
 	transition: opacity 0.25s ease-in-out;
@@ -41,7 +42,7 @@
 	.mobile-menu-default__primary-title-label,
 	&__primary-link {
 		padding: 2rem 0;
-		font-size: 1.7rem;
+		font-size: 1.8rem;
 		font-weight: var(--font-weight-bold);
 		color: var(--color-white);
 		text-transform: uppercase;
@@ -74,6 +75,7 @@
 		}
 
 		span {
+			color: var(--color-white);
 			transition: color var(--default-transition-params);
 		}
 	}
@@ -129,7 +131,7 @@
 
 		a {
 			font-size: 1.4rem;
-			color: var(--anchor-link-normal-color);
+			color: var(--color-white);
 			text-decoration: none;
 			transition: color var(--default-transition-params);