custom.css

/*
 * Copyright 2024 CodeRabbit AI Inc
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Work+Sans:wght@400;500;600;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
	--ifm-color-primary: #ff570a;
	--ifm-color-primary-dark: #ff570ae5;
	--ifm-color-primary-darker: #ff570a;
	--ifm-color-primary-darkest: #ff570a;
	--ifm-color-primary-light: #ff570a1a;
	--ifm-color-primary-lighter: #ff570a33;
	--ifm-color-primary-lightest: #ff8b51;
	--ifm-code-font-size: 95%;
	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
	--ifm-navbar-height: 5rem;
	--ifm-font-family-base: "Poppins", "Work Sans", sans-serif;
	--ifm-background-color-primary: #f6f6f1;
}

[data-theme="dark"] {
	--ifm-color-primary: #ff865be5;
	--ifm-color-primary-dark: #ff865bcc;
	--ifm-color-primary-darker: #ff865b80;
	--ifm-color-primary-darkest: #ff865b80;
	--ifm-color-primary-light: #ff865b;
	--ifm-color-primary-lighter: #ff865b1a;
	--ifm-color-primary-lightest: #171717;
	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
	--ifm-background-color-primary: #171717;
}

#__docusaurus {
	background-color: var(--ifm-background-color-primary);
	font-family: var(--ifm-font-family-base);
}

.navbar .navbar__item {
	align-items: center;
	display: flex;
	font-size: 1.25rem;
	font-weight: 700;
}

a[docid="docs"] > svg {
	display: none;
}

/* Adjustments for mobile view */
@media (max-width: 768px) {
	/* Reduce the logo size for smaller screens */
	.navbar__logo img {
		height: 32px;
		align-items: center;
	}

	/* Reduce the padding around the logo for smaller screens */
	.navbar__logo {
		padding: 2px; /* Adjust the padding for smaller screens */
	}
}

/* Center the Discord link within its parent */
.navbar__items.navbar__items--right {
	display: flex;
	justify-content: center;
	align-items: center;
}

[data-theme="light"] img[src$="#gh-dark-mode-only"],
[data-theme="dark"] img[src$="#gh-light-mode-only"] {
	display: none;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	background: #000;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.navbar .navbar__item {
	align-items: center;
	display: flex;
	font-size: 1.25rem;
	font-weight: 700;
}

a[docid="docs"] > svg {
	display: none;
}

/* Adjustments for mobile view */
@media (max-width: 768px) {
	/* Reduce the logo size for smaller screens */
	.navbar__logo img {
		height: 32px;
		align-items: center;
	}

	/* Reduce the padding around the logo for smaller screens */
	.navbar__logo {
		padding: 2px; /* Adjust the padding for smaller screens */
	}
}

/* Center the Discord link within its parent */
.navbar__items.navbar__items--right {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Light mode Discord icon */
/* .header-discord-link:before {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    content: "";
    display: flex;
    height: 16px;
    width: 20px;
} */

/* Dark mode Discord icon */
/* .header-discord-link:before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='20' viewBox='0 0 640 512'%3E%3Cpath fill='%23FFFFFF' d='M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z'/%3E%3C/svg%3E")
        no-repeat;
} */

/* GitHub icon styles - adding to existing CSS without modifications */
.github-link:before {
	content: "";
	width: 24px;
	height: 24px;
	display: flex;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
		no-repeat;
}

.github-link {
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0.5rem;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.github-link:hover {
	opacity: 1;
}

/* Dark mode adjustments */
[data-theme="dark"] .github-link:before {
	filter: invert(1);
}

/* Responsive adjustments to match existing patterns */
@media screen and (max-width: 480px) {
	.github-link {
		margin: 0 0.25rem;
	}
}

/* Remove external link symbol */
.navbar__items .navbar__link svg {
	display: none;
}

/* Custom navbar styles */
.navbar {
	padding: 0.5rem 1rem;
}

/* Active section indicator */
.navbar-link-active {
	font-weight: 600;
	position: relative;
}

.navbar-icon-link {
	padding: 0 0.75rem;
	display: flex;
	align-items: center;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.navbar-icon-link:hover {
	opacity: 1;
}

.navbar-icon-link::before {
	content: "";
	width: 24px;
	height: 24px;
	display: flex;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Light mode specific styles */
[data-theme="light"] .navbar-icon-link::before {
	opacity: 0.7;
}

[data-theme="light"] .navbar-icon-link:hover::before {
	opacity: 0.9;
}

[data-theme="light"] .discord-link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36' fill='%23424242'%3E%3Cpath d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E");
}

[data-theme="light"] .github-link::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23424242'%3E%3Cpath d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E");
}

/* Dark mode specific styles */
[data-theme="dark"] .navbar-icon-link::before {
	opacity: 0.85;
}

[data-theme="dark"] .navbar-icon-link:hover::before {
	opacity: 1;
}

[data-theme="dark"] .discord-link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36' fill='%23fff'%3E%3Cpath d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .github-link::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E");
}

.center-image {
	text-align: center;
}

@media screen and (max-width: 480px) {
	a.navbar__item.navbar__link[href="/"] {
		display: none;
	}
}

@media screen and (max-width: 480px) {
	a.navbar__item.navbar__link[href*="https://docs.coderabbit.ai"]
	{
		display: none;
	}
}

@media screen and (max-width: 480px) {
	a.navbar__item.navbar__link[href*="https://coderabbit.ai/blog"]
	{
		display: none;
	}
}