/* ==========================================================================
Oola Systems — Design System Foundation
Enterprise · Modern · Elegant · Minimal · Technology Consulting
========================================================================== */
:root {
--color-bg: #0a0a0a;
--color-surface: #171717;
--color-surface-2: #1e1e1e;
/* --color-primary: #ff6347; */
--color-primary: #35d0ba;
/* --color-primary: #0069f8; */
--color-accent: #ff826e;
--color-text: #ffffff;
--color-text-secondary: #bfbfbf;
--color-muted: #8f8f8f;
--color-card: #171717;
--color-border: #2b2b2b;
--color-success: #3ddc84;
--color-error: #ff5c5c;
--color-focus-ring: rgba(255, 99, 71, 0.4);
--color-overlay: rgba(10, 10, 10, 0.7);
--font-sans:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
--radius-sm: 8px;
--radius-button: 999px;
--radius-card: 22px;
--radius-hero: 32px;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
--space-12: 96px;
--space-16: 128px;
--container-max: 1800px;
--container-max-wide: 1840px;
--container-padding: clamp(0.75rem, 1vw, 1.25rem);
--shadow-card: 0 24px 70px rgba(0, 0, 0, 0.35);
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 200ms;
--duration-base: 500ms;
}
/* --------------------------------------------------------------------------
1. Reset & Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--color-bg);
background-image:
radial-gradient(
circle at top left,
rgba(255, 99, 71, 0.12),
transparent 28%
),
radial-gradient(
circle at bottom right,
rgba(255, 99, 71, 0.08),
transparent 24%
);
color: var(--color-text);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
.site-body {
min-height: 100vh;
}
.skip-link {
position: absolute;
top: -48px;
left: 16px;
z-index: 2000;
padding: 12px 20px;
border-radius: var(--radius-sm);
background: var(--color-primary);
color: #fff;
transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
top: 16px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* --------------------------------------------------------------------------
2. Typography
-------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 var(--space-2);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
}
.display {
font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h1 {
font-size: clamp(1.9rem, 4vw, 3rem);
}
h2 {
font-size: clamp(1.6rem, 3vw, 2.25rem);
}
h3 {
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}
p {
margin: 0 0 var(--space-2);
color: var(--color-text-secondary);
}
.text-body-lg,
.page-subtitle,
.section-subtitle,
.content-text,
.text-prose {
color: var(--color-text-secondary);
line-height: 1.75;
}
.eyebrow {
font-family: var(--font-mono);
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
}
@media (max-width: 768px) {
.display {
font-size: 2.4rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.625rem;
}
h3 {
font-size: 1.25rem;
}
}
@media (max-width: 576px) {
.page-title {
font-size: 2rem;
}
.page-subtitle {
font-size: 1rem;
}
}
/* --------------------------------------------------------------------------
3. Layout & Sections
-------------------------------------------------------------------------- */
.main-container {
width: 100%;
}
.site-shell {
width: 100%;
max-width: 1800px;
margin: 0 auto;
}
.site-shell .container,
.site-shell .container-fluid,
.site-shell .container-sm,
.site-shell .container-md,
.site-shell .container-lg,
.site-shell .container-xl,
.site-shell .container-xxl {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.site-shell .section-block {
padding-inline: 0;
}
.content-area {
width: 100%;
padding-bottom: var(--space-8);
}
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
max-width: var(--container-max-wide);
}
.section-block {
width: 90%;
max-width: 1800px;
margin: 0 auto;
padding: clamp(4rem, 6vw, 6rem) 0;
}
.section-accent,
.section-purple {
max-width: none;
margin-inline: 0;
padding-inline: calc(var(--container-padding) + 0.5rem);
background:
radial-gradient(
ellipse 80% 60% at 20% 0%,
rgba(255, 99, 71, 0.12),
transparent 60%
),
radial-gradient(
ellipse 60% 50% at 90% 100%,
rgba(255, 99, 71, 0.08),
transparent 55%
),
var(--color-card);
border-block: 1px solid var(--color-border);
}
.section-accent .section-title,
.section-purple .section-title,
.section-accent .section-subtitle,
.section-purple .section-subtitle,
.section-accent .content-text,
.section-purple .content-text {
color: var(--color-text);
}
.section-accent p,
.section-purple p {
color: var(--color-text-secondary);
}
.section-block > .container,
.section-block.container-fluid {
max-width: 100%;
}
.page-title {
max-width: 1100px;
margin: 0 auto var(--space-2);
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
text-align: center;
}
.page-subtitle {
max-width: 850px;
margin: 0 auto;
font-size: clamp(1.025rem, 2vw, 1.2rem);
text-align: center;
}
.section-title {
font-size: clamp(1.6rem, 2.8vw, 2.15rem);
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-2);
letter-spacing: -0.02em;
}
.section-subtitle {
max-width: 680px;
margin-inline: auto;
font-size: 1.03rem;
}
.content-text {
font-size: 1.0625rem;
}
.text-prose {
text-align: justify;
}
@media (max-width: 768px) {
.section-block {
padding: clamp(3rem, 8vw, 4rem) var(--container-padding);
}
}
/* --------------------------------------------------------------------------
4. Buttons
-------------------------------------------------------------------------- */
.btn-oola-primary,
.btn-oola-secondary,
.btn-oola-ghost,
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
font-weight: 500;
font-size: 1rem;
padding: 14px 32px;
border-radius: var(--radius-button);
border: 1px solid transparent;
cursor: pointer;
transition:
transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.btn-oola-primary,
.btn-primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.btn-oola-primary:hover,
.btn-primary:hover,
.btn-primary:focus {
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-accent)
);
border-color: var(--color-accent);
box-shadow: 0 8px 30px rgba(255, 99, 71, 0.25);
transform: scale(1.02);
color: #fff;
}
.btn-oola-primary:active,
.btn-primary:active {
transform: scale(0.98);
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.btn-oola-secondary {
background: transparent;
border-color: var(--color-border);
color: var(--color-text);
}
.btn-oola-secondary:hover {
border-color: rgba(255, 99, 71, 0.5);
background: rgba(255, 255, 255, 0.02);
color: var(--color-text);
}
.btn-oola-ghost {
background: transparent;
color: var(--color-text);
padding: 8px 4px;
}
.btn-oola-ghost:hover {
color: var(--color-accent);
}
.btn-sm.btn-primary {
padding: 8px 16px;
font-size: 0.875rem;
}
.btn-danger {
background: var(--color-error);
border-color: var(--color-error);
}
/* --------------------------------------------------------------------------
5. Navigation
-------------------------------------------------------------------------- */
.top-progress-bar {
position: fixed;
top: 0;
left: 0;
z-index: 2100;
width: 0%;
height: 3px;
background: linear-gradient(
90deg,
var(--color-primary),
var(--color-accent)
);
transition: width 100ms linear;
}
.oola-navbar {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(10, 10, 10, 0.78);
border-bottom: 1px solid transparent;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition:
background var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.oola-navbar-container {
width: 95%;
max-width: 1800px;
margin: 0 auto;
}
.oola-navbar.is-scrolled {
border-bottom-color: var(--color-border);
}
.oola-navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 76px;
padding: 18px 0;
}
.oola-navbar__brand {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text);
font-weight: 600;
min-width: 0;
padding-inline: 0.25rem;
}
.oola-navbar__logo {
display: block;
height: 60px;
width: auto;
/* max-width: 80%; */
object-fit: contain;
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
}
/* ==========================================================
Brand
========================================================== */
.oola-navbar__brand {
display: flex;
align-items: center;
gap: 1.25rem;
text-decoration: none;
}
.oola-navbar__logo {
height: 64px;
width: auto;
flex-shrink: 0;
}
/* ==========================================================
Divider
========================================================== */
.oola-navbar__divider {
width: 1px;
height: 58px;
background: rgba(255, 255, 255, 0.28);
flex-shrink: 0;
}
/* ==========================================================
Tagline
========================================================== */
.oola-navbar__tagline {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.15;
white-space: nowrap;
}
.oola-navbar__tagline .line-1 {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
background: linear-gradient(
180deg,
#ffffff 0%,
#f5f9ff 35%,
#cfe7ff 70%,
#7ebbff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.18);
}
.oola-navbar__tagline .line-2 {
margin-top: 0.4rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
background: linear-gradient(
90deg,
#6fd9ff 0%,
#2e8fe8 35%,
#ffffff 52%,
#4faeff 70%,
#1d63c6 100%
);
background-size: 220% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 8px rgba(46, 143, 232, 0.25);
}
/* ==========================================================
Responsive
========================================================== */
@media (max-width: 1500px) {
.oola-navbar__tagline {
display: none;
}
.oola-navbar__divider {
display: none;
}
}
.oola-navbar__links {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
margin: 0 1.75rem;
gap: 1.65rem;
padding: 0;
list-style: none;
}
.oola-navbar__link {
position: relative;
display: inline-flex;
align-items: center;
padding: 0.35rem 0;
color: var(--color-text);
font-size: 0.98rem;
font-weight: 600;
white-space: nowrap;
transition:
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.oola-navbar__link:hover,
.oola-navbar__link:focus-visible,
.oola-navbar__link.is-active {
color: var(--color-primary);
transform: translateY(-1px);
}
.oola-navbar__link.is-active::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary);
}
.oola-navbar__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.oola-navbar__cta {
padding: 10px 22px;
font-size: 0.94rem;
}
.oola-navbar__toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: 8px;
border: 0;
background: transparent;
cursor: pointer;
}
.oola-dropdown-menu {
min-width: 640px;
padding: 1.25rem 1.25rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: rgba(10, 10, 10, 0.97);
box-shadow: var(--shadow-card);
}
.oola-dropdown-menu--compact {
min-width: 280px;
}
.oola-dropdown__title {
margin-bottom: 0.65rem;
color: var(--color-primary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.oola-dropdown__list {
margin: 0;
padding: 0;
list-style: none;
}
.oola-dropdown__list li + li {
margin-top: 0.35rem;
}
.oola-dropdown__list a {
color: var(--color-text-secondary);
font-size: 0.8rem;
padding: 6px 12px;
margin: 2px 0;
transition: color var(--duration-fast) var(--ease-out);
}
.oola-dropdown__list a:hover,
.oola-dropdown__list a:focus-visible {
/* background: #f8f9fa; */
color: #ff6347;
padding: auto 10px;
}
/* Make each dropdown a positioning context for its mega menu */
.oola-navbar__links > .dropdown {
position: relative;
}
/* Anchor the mega menu below the parent and center it horizontally */
.oola-navbar__links .dropdown-menu {
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 10px;
}
.oola-navbar__toggle-bar {
width: 24px;
height: 2px;
border-radius: 2px;
background: var(--color-text);
}
.oola-mobile-menu {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
flex-direction: column;
padding: var(--space-3);
background: rgba(10, 10, 10, 0.97);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition:
transform var(--duration-base) var(--ease-out),
opacity var(--duration-base) var(--ease-out),
visibility 0s linear var(--duration-base);
}
.oola-mobile-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
transition:
transform var(--duration-base) var(--ease-out),
opacity var(--duration-base) var(--ease-out),
visibility 0s;
}
.oola-mobile-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-6);
}
.oola-mobile-menu__logo {
height: 32px;
width: auto;
}
.oola-mobile-menu__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--color-border);
border-radius: 50%;
background: transparent;
color: var(--color-text);
font-size: 1.25rem;
cursor: pointer;
}
.oola-mobile-accordion {
flex-grow: 1;
overflow-y: auto;
margin-bottom: var(--space-4);
}
.oola-mobile-accordion .accordion-item {
background: transparent;
border: none;
border-bottom: 1px solid var(--color-border);
}
.oola-mobile-accordion .accordion-item:last-child {
border-bottom: none;
}
.oola-mobile-accordion .accordion-button {
background: transparent;
color: var(--color-text);
font-size: 1.5rem;
font-weight: 600;
padding: 1rem 0;
box-shadow: none;
}
.oola-mobile-accordion .accordion-button:not(.collapsed) {
color: var(--color-primary);
background: transparent;
box-shadow: none;
}
.oola-mobile-accordion .accordion-button::after {
filter: invert(1);
transition: transform var(--duration-fast) var(--ease-out);
}
.oola-mobile-accordion .accordion-button:not(.collapsed)::after {
filter: invert(0.7) sepia(1) saturate(5) hue-rotate(130deg);
}
.oola-mobile-accordion a.accordion-button {
text-decoration: none;
}
.oola-mobile-accordion a.accordion-button::after {
display: none;
}
.oola-mobile-accordion .accordion-button.is-active {
color: var(--color-primary);
}
.oola-mobile-accordion .accordion-body {
padding: 0 0 1rem 0;
}
.oola-mobile-accordion .accordion-body ul li a {
display: block;
padding: 0.5rem 0;
color: var(--color-text-secondary);
font-size: 1.1rem;
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.oola-mobile-accordion .accordion-body ul li a:hover,
.oola-mobile-accordion .accordion-body ul li a.is-active {
color: var(--color-primary);
}
/* Mobile Learnings: group headings */
.oola-mobile-accordion .accordion-body .oola-dropdown__title {
margin: 1rem 0 0.35rem;
font-size: 0.95rem;
font-weight: 600;
}
.oola-mobile-accordion .accordion-body ul li:first-child .oola-dropdown__title {
margin-top: 0;
}
/* ==========================================================
OOLA TUTORIALS — SIDEBAR & CHAPTER NAVIGATION
========================================================== */
.oola-mobile-accordion .accordion-body ul li a {
padding: 0.35rem 0 0.35rem 0.75rem;
font-size: 0.9rem;
}
.tutorial-page {
--tutorial-surface: #171717;
--tutorial-hover: #202725;
--tutorial-border: #343a39;
--tutorial-text: #f5f7f7;
--tutorial-muted: #bfbfbf;
--tutorial-accent: #35d0ba;
--tutorial-accent-soft: rgba(53, 208, 186, 0.12);
}
/* Chapter sidebar container */
.tutorial-sidebar {
overflow: hidden;
border: 1px solid var(--tutorial-border);
border-radius: 14px;
background: var(--tutorial-surface);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
/* Chapter links */
.tutorial-sidebar .list-group-item {
display: block;
padding: 0.85rem 1rem;
border: 0;
border-bottom: 1px solid var(--tutorial-border);
border-radius: 0;
background: transparent;
color: var(--tutorial-muted);
font-size: 0.94rem;
line-height: 1.5;
text-decoration: none;
overflow-wrap: anywhere;
transition:
color 180ms ease,
background-color 180ms ease;
}
.tutorial-sidebar .list-group-item:last-child {
border-bottom: 0;
}
/* Hover and keyboard focus */
.tutorial-sidebar .list-group-item:hover,
.tutorial-sidebar .list-group-item:focus-visible {
background: var(--tutorial-hover);
color: var(--tutorial-accent);
}
/* Currently selected chapter */
.tutorial-sidebar .list-group-item.active,
.tutorial-sidebar .list-group-item.active:hover {
border-color: var(--tutorial-border);
background: var(--tutorial-accent-soft);
color: var(--tutorial-accent);
font-weight: 650;
box-shadow: inset 3px 0 0 var(--tutorial-accent);
}
/* Bottom navigation row */
.tutorial-navigation {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 1rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: 1.5rem;
border-top: 1px solid var(--tutorial-border);
}
.tutorial-navigation > div:first-child {
justify-self: start;
}
.tutorial-navigation > div:nth-child(2) {
justify-self: center;
}
.tutorial-navigation > div:last-child {
justify-self: end;
}
/* Common button appearance */
.tutorial-navigation .tutorial-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-width: 112px;
min-height: 44px;
padding: 0.7rem 1.15rem;
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.94rem;
font-weight: 650;
line-height: 1.2;
text-decoration: none;
box-shadow: none;
transition:
color 180ms ease,
background-color 180ms ease,
border-color 180ms ease,
transform 180ms ease;
}
/* Previous button — outlined teal */
.tutorial-navigation .tutorial-nav-btn.btn-outline-primary {
border-color: var(--tutorial-accent);
background: transparent;
color: var(--tutorial-accent);
}
.tutorial-navigation .tutorial-nav-btn.btn-outline-primary:hover {
background: var(--tutorial-accent-soft);
color: #ffffff;
}
/* Top button — subtle dark style */
.tutorial-navigation .tutorial-nav-btn.btn-dark {
border-color: var(--tutorial-border);
background: var(--tutorial-surface);
color: var(--tutorial-text);
}
.tutorial-navigation .tutorial-nav-btn.btn-dark:hover {
border-color: var(--tutorial-accent);
background: var(--tutorial-hover);
color: var(--tutorial-accent);
}
/* Next button — primary teal */
.tutorial-navigation .tutorial-nav-btn.btn-primary {
border-color: var(--tutorial-accent);
background: var(--tutorial-accent);
color: #071411;
}
.tutorial-navigation .tutorial-nav-btn.btn-primary:hover,
.tutorial-navigation .tutorial-nav-btn.btn-primary:focus-visible {
border-color: var(--tutorial-accent);
background: #27bda8;
color: #071411;
box-shadow: 0 6px 18px rgba(53, 208, 186, 0.18);
}
/* Subtle movement on hover */
.tutorial-navigation .tutorial-nav-btn:hover {
transform: translateY(-1px);
}
.tutorial-navigation .tutorial-nav-btn:active {
transform: translateY(0);
}
/* Mobile layout */
@media (max-width: 575.98px) {
.tutorial-sidebar .list-group-item {
padding: 0.75rem 0.85rem;
font-size: 0.9rem;
}
.tutorial-navigation {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.tutorial-navigation > div:nth-child(2) {
grid-column: 1 / -1;
grid-row: 1;
justify-self: center;
}
.tutorial-navigation > div:first-child {
justify-self: start;
}
.tutorial-navigation > div:last-child {
justify-self: end;
}
.tutorial-navigation .tutorial-nav-btn {
min-width: 0;
min-height: 42px;
padding: 0.65rem 0.9rem;
font-size: 0.9rem;
}
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
.tutorial-sidebar .list-group-item,
.tutorial-navigation .tutorial-nav-btn {
transition: none;
}
}
/* ==========================================================
OOLA TUTORIALS — SIDEBAR & NAVIGATION
========================================================== */
.code-block-wrapper {
position: relative;
margin: 1.25rem 0;
}
/* Copy button */
.code-block-wrapper .copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin: 0.5rem 0 0.25rem;
padding: 0.45rem 0.9rem;
background: #202020 !important;
color: #35d0ba !important;
border: 1px solid #35d0ba !important;
border-radius: 8px;
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
box-shadow: none;
transition:
background-color 180ms ease,
color 180ms ease,
border-color 180ms ease,
transform 180ms ease;
}
/* Hover and keyboard focus */
.code-block-wrapper .copy-btn:hover,
.code-block-wrapper .copy-btn:focus-visible {
background: #35d0ba !important;
color: #071411 !important;
border-color: #35d0ba !important;
}
.code-block-wrapper .copy-btn:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* Click feedback */
.code-block-wrapper .copy-btn:active {
transform: scale(0.97);
}
/* Successfully copied */
.code-block-wrapper .copy-btn.copied {
background: #35d0ba !important;
color: #071411 !important;
border-color: #35d0ba !important;
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
.code-block-wrapper .copy-btn {
transition: none;
}
}
:root {
--tutorial-bg: #171717;
--tutorial-hover: #202725;
--tutorial-border: #343a39;
--tutorial-text: #d0d0d0;
--tutorial-accent: #35d0ba;
--tutorial-accent-soft: rgba(53, 208, 186, 0.12);
}
/* Chapter sidebar */
.tutorial-sidebar {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--tutorial-bg) !important;
border: 1px solid var(--tutorial-border) !important;
border-radius: 14px !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.tutorial-sidebar .list-group-item {
display: block;
padding: 14px 18px;
border: 0 !important;
border-bottom: 1px solid var(--tutorial-border) !important;
border-radius: 0 !important;
background: var(--tutorial-bg) !important;
color: var(--tutorial-text) !important;
font-size: 0.95rem;
line-height: 1.5;
text-decoration: none;
overflow-wrap: anywhere;
transition: background-color 180ms ease, color 180ms ease;
}
.tutorial-sidebar .list-group-item:last-child {
border-bottom: 0 !important;
}
.tutorial-sidebar .list-group-item:hover,
.tutorial-sidebar .list-group-item:focus-visible {
background: var(--tutorial-hover) !important;
color: var(--tutorial-accent) !important;
}
/* Active chapter */
.tutorial-sidebar .list-group-item.active {
padding-left: 15px;
border-left: 3px solid var(--tutorial-accent) !important;
background: var(--tutorial-accent-soft) !important;
color: var(--tutorial-accent) !important;
font-weight: 700;
}
/* Bottom navigation */
.tutorial-navigation {
display: flex !important;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--tutorial-border);
}
.tutorial-navigation > div {
flex: 0 0 auto;
}
.tutorial-navigation > div:nth-child(2) {
margin-inline: auto;
}
/* Shared button styles */
.tutorial-navigation .tutorial-nav-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 120px;
min-height: 46px;
padding: 11px 20px !important;
border: 1px solid transparent !important;
border-radius: 999px !important;
font-size: 0.95rem;
font-weight: 650;
line-height: 1.2;
text-decoration: none;
text-shadow: none;
box-shadow: none;
transition:
background-color 180ms ease,
color 180ms ease,
border-color 180ms ease,
transform 180ms ease;
}
.tutorial-navigation .tutorial-nav-btn i {
color: inherit !important;
}
/* Previous */
.tutorial-navigation .tutorial-nav-btn.btn-outline-primary {
background: transparent !important;
color: var(--tutorial-accent) !important;
border-color: var(--tutorial-accent) !important;
}
.tutorial-navigation .tutorial-nav-btn.btn-outline-primary:hover {
background: var(--tutorial-accent-soft) !important;
color: #ffffff !important;
}
/* Top */
.tutorial-navigation .tutorial-nav-btn.btn-dark {
background: #202020 !important;
color: #ffffff !important;
border-color: #404040 !important;
}
.tutorial-navigation .tutorial-nav-btn.btn-dark:hover {
background: #252525 !important;
color: var(--tutorial-accent) !important;
border-color: var(--tutorial-accent) !important;
}
/* Next */
.tutorial-navigation .tutorial-nav-btn.btn-primary {
background: var(--tutorial-accent) !important;
color: #071411 !important;
border-color: var(--tutorial-accent) !important;
}
.tutorial-navigation .tutorial-nav-btn.btn-primary:hover,
.tutorial-navigation .tutorial-nav-btn.btn-primary:focus-visible {
background: #27bda8 !important;
color: #071411 !important;
border-color: #27bda8 !important;
box-shadow: 0 6px 18px rgba(53, 208, 186, 0.18);
}
.tutorial-navigation .tutorial-nav-btn:hover {
transform: translateY(-1px);
}
.tutorial-navigation .tutorial-nav-btn:active {
transform: translateY(0);
}
/* Mobile */
@media (max-width: 575.98px) {
.tutorial-sidebar .list-group-item {
padding: 12px 14px;
font-size: 0.9rem;
}
.tutorial-navigation {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.tutorial-navigation > div:nth-child(2) {
grid-column: 1 / -1;
grid-row: 1;
justify-self: center;
margin-inline: 0;
}
.tutorial-navigation > div:first-child {
grid-column: 1;
grid-row: 2;
justify-self: start;
}
.tutorial-navigation > div:last-child {
grid-column: 2;
grid-row: 2;
justify-self: end;
}
.tutorial-navigation .tutorial-nav-btn {
min-width: 0;
min-height: 42px;
padding: 10px 14px !important;
font-size: 0.9rem;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.tutorial-sidebar .list-group-item,
.tutorial-navigation .tutorial-nav-btn {
transition: none;
}
.tutorial-navigation .tutorial-nav-btn:hover {
transform: none;
}
}
.oola-mobile-menu__cta {
width: 100%;
margin-top: auto;
}
@media (max-width: 991.98px) {
.oola-navbar__links {
display: none;
}
.oola-navbar__toggle {
display: flex;
}
.oola-navbar__actions .oola-navbar__cta {
display: none;
}
}
@media (max-width: 767.98px) {
.oola-navbar__logo {
height: 46px;
max-width: 220px;
}
.oola-navbar__inner {
min-height: 70px;
padding: 14px 0;
}
}
@media (max-width: 575.98px) {
.oola-navbar__logo {
height: 40px;
max-width: 180px;
}
.oola-navbar__inner {
min-height: 64px;
padding: 12px 0;
}
}
/* --------------------------------------------------------------------------
6. Cards & Media
-------------------------------------------------------------------------- */
.feature-card,
.service-card,
.oola-card,
.oola-form-card,
.portfolio-card {
display: flex;
flex-direction: column;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: var(--space-3);
transition:
transform var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.feature-card:hover,
.service-card:hover,
.oola-card:hover,
.card-hover:hover,
.portfolio-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 99, 71, 0.35);
box-shadow: var(--shadow-card);
}
.feature-card img,
.service-card img {
margin-bottom: var(--space-2);
border-radius: var(--radius-sm);
}
.feature-card h5,
.feature-card h6,
.service-card h5,
.service-card h6 {
margin-bottom: var(--space-1);
color: var(--color-text);
font-size: 1.0625rem;
}
.feature-card p,
.service-card p {
font-size: 0.9375rem;
margin-bottom: 0;
}
.value-card-simple {
height: 100%;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: rgba(255, 255, 255, 0.03);
text-align: center;
transition:
border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.value-card-simple:hover {
border-color: rgba(255, 99, 71, 0.4);
background: rgba(255, 99, 71, 0.04);
}
.value-card-simple h5 {
margin-bottom: var(--space-1);
color: var(--color-primary);
font-size: 1.125rem;
}
.value-card-simple p {
font-size: 0.9375rem;
margin-bottom: 0;
}
.portfolio-card {
display: flex;
flex-direction: column;
overflow: hidden;
}
.portfolio-img {
aspect-ratio: 16 / 10;
overflow: hidden;
background: #111;
}
.portfolio-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-base) var(--ease-out);
}
.portfolio-card:hover .portfolio-img img {
transform: scale(1.04);
}
.portfolio-content {
display: flex;
flex: 1;
flex-direction: column;
padding: var(--space-3);
}
.portfolio-title {
margin-bottom: var(--space-1);
color: var(--color-text);
font-size: 1.125rem;
font-weight: 600;
}
.portfolio-desc {
flex-grow: 1;
margin-bottom: var(--space-2);
color: var(--color-text-secondary);
font-size: 0.9375rem;
}
.portfolio-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-bottom: var(--space-2);
}
.portfolio-tags span,
.tech-tag {
display: inline-block;
padding: 4px 12px;
border: 1px solid rgba(255, 99, 71, 0.2);
border-radius: 999px;
background: rgba(255, 99, 71, 0.1);
color: var(--color-accent);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.portfolio-metrics {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: 0 0 var(--space-2);
padding: 0;
list-style: none;
}
.portfolio-metrics li {
padding: 4px 10px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
color: var(--color-text-secondary);
font-size: 0.8125rem;
}
.portfolio-actions {
margin-top: auto;
padding-top: var(--space-1);
}
.img-fluid.rounded.shadow {
border: 1px solid var(--color-border);
border-radius: var(--radius-card) !important;
box-shadow: var(--shadow-card) !important;
}
@media (max-width: 576px) {
.img-fluid.rounded.shadow {
border-radius: var(--radius-sm) !important;
}
}
/* --------------------------------------------------------------------------
7. Hero, Stats & CTA
-------------------------------------------------------------------------- */
.hero {
position: relative;
overflow: hidden;
padding: var(--space-12) var(--space-3) var(--space-10);
text-align: center;
}
.hero-mesh {
background:
radial-gradient(
ellipse 70% 50% at 50% -10%,
rgba(255, 99, 71, 0.15),
transparent 65%
),
radial-gradient(
ellipse 40% 30% at 90% 80%,
rgba(255, 99, 71, 0.06),
transparent 60%
),
var(--color-bg);
}
.hero__title {
max-width: 900px;
margin-inline: auto;
margin-bottom: var(--space-3);
font-size: clamp(2.25rem, 6vw, 4rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--color-text);
}
.hero__subtitle {
max-width: 680px;
margin-inline: auto;
margin-bottom: var(--space-4);
font-size: clamp(1.05rem, 2vw, 1.25rem);
color: var(--color-text-secondary);
line-height: 1.7;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
}
/* --------------------------------------------------------------------------
HERO SECTION
-------------------------------------------------------------------------- */
.hero-banner {
position: relative;
min-height: 610px; /* Reduced by ~20% */
max-width: 90%; /* Reduced width by 5% */
margin: 0 auto;
border-radius: 28px;
overflow: hidden;
background: url("../images/home-hero.png") center center / cover no-repeat;
display: flex;
align-items: center;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(4, 10, 28, 0.82) 0%,
rgba(6, 16, 42, 0.74) 22%,
rgba(6, 16, 42, 0.28) 48%,
rgba(0, 0, 0, 0) 72%
);
}
.hero-content {
position: relative;
z-index: 2;
width: 48%;
padding-left: 3.5rem;
padding-right: 2rem;
}
.hero-badge {
display: inline-block;
margin-bottom: 1.5rem;
color: var(--color-primary);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.hero-title {
margin-bottom: 2rem;
color: #fff;
font-size: clamp(2.16rem, 3.5vw, 3.6rem);
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.04em;
}
.hero-gradient {
background: linear-gradient(
180deg,
#8ed8ff 0%,
#55b8ff 35%,
#2e8fe8 70%,
#1b62d1 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
max-width: 620px;
margin-bottom: 2.2rem;
color: #d4d9e4;
font-size: 1.12rem;
line-height: 1.7;
}
.page-actions {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
}
.page-actions .btn {
min-width: 205px;
padding: 0.85rem 1.8rem;
font-size: 1rem;
}
/* ==========================================================
Hero - Tablet
========================================================== */
@media (max-width: 1199px) {
.hero-banner {
min-height: 520px;
background-position: 72% center;
}
.hero-content {
width: 58%;
padding-left: 2.5rem;
}
.hero-title {
font-size: clamp(2.4rem, 4vw, 3.6rem);
}
.hero-description {
font-size: 1rem;
max-width: 520px;
}
}
/* ==========================================================
Hero - Mobile
========================================================== */
@media (max-width: 991px) {
.hero-banner {
min-height: auto;
padding: 3rem 1.5rem;
border-radius: 24px;
align-items: flex-start;
background-position: 78% center;
}
.hero-overlay {
background: linear-gradient(
180deg,
rgba(3, 8, 24, 0.9) 0%,
rgba(4, 10, 28, 0.82) 40%,
rgba(5, 12, 34, 0.55) 100%
);
}
.hero-content {
width: 100%;
padding: 0;
text-align: center;
}
.hero-badge {
display: block;
margin-bottom: 1rem;
font-size: 0.82rem;
letter-spacing: 0.15em;
}
.hero-title {
font-size: clamp(2.1rem, 9vw, 3rem);
line-height: 1.08;
margin-bottom: 1.3rem;
}
.hero-description {
margin: 0 auto 2rem;
max-width: 100%;
font-size: 1rem;
line-height: 1.75;
}
.page-actions {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.page-actions .btn {
width: 100%;
max-width: 320px;
}
}
/* ==========================================================
Hero - Small Mobile
========================================================== */
@media (max-width: 576px) {
.hero-banner {
margin: 0 0.5rem;
padding: 2.5rem 1.25rem;
min-height: 620px;
background-position: 72% bottom;
background-size: cover;
}
.hero-title {
font-size: 2.4rem;
}
.hero-gradient {
display: block;
margin-top: 0.35rem;
}
.hero-description {
font-size: 0.95rem;
}
.hero-badge {
font-size: 0.78rem;
}
}
.stat-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-2);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-card);
}
.stat-bar__item {
padding: var(--space-2);
text-align: center;
}
.stat-bar__value {
display: block;
margin-bottom: var(--space-1);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
line-height: 1.1;
color: var(--color-primary);
}
.stat-bar__label {
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.cta-band {
margin-inline: 0;
padding: var(--space-8) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-hero);
background:
radial-gradient(
ellipse 60% 80% at 50% 100%,
rgba(255, 99, 71, 0.12),
transparent 70%
),
var(--color-card);
text-align: center;
}
.cta-band__title {
margin-bottom: var(--space-2);
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--color-text);
}
.cta-band__subtitle {
max-width: 560px;
margin-inline: auto;
margin-bottom: var(--space-3);
color: var(--color-text-secondary);
}
@media (max-width: 576px) {
.hero {
padding: var(--space-12) var(--space-3) var(--space-8);
}
.cta-band {
margin-inline: 0;
border-radius: var(--radius-card);
}
}
/* --------------------------------------------------------------------------
8. Forms & Info Cards
-------------------------------------------------------------------------- */
.oola-form-card {
height: 100%;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-card);
}
.oola-form-card h4 {
margin-bottom: var(--space-1);
color: var(--color-text);
}
.oola-form-card label {
margin-bottom: 6px;
color: var(--color-text-secondary);
font-size: 0.875rem;
font-weight: 500;
}
.oola-info-card {
padding: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.03);
}
.oola-info-card p,
.oola-info-card li {
color: var(--color-text-secondary);
}
.oola-info-card strong,
.oola-info-card .fw-semibold {
color: var(--color-text);
}
/* --------------------------------------------------------------------------
9. Footer
-------------------------------------------------------------------------- */
.footer {
margin-top: auto;
padding: var(--space-6) var(--space-3);
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(
180deg,
rgba(23, 23, 23, 0.96),
rgba(12, 12, 12, 1)
);
}
.footer-main {
padding-top: clamp(2.5rem, 5vw, 3.5rem);
padding-bottom: clamp(2rem, 4vw, 2.5rem);
}
.footer-main .row {
align-items: flex-start;
}
.footer-heading {
position: relative;
margin-bottom: 0.9rem;
padding-bottom: 0.55rem;
color: var(--color-text);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer-heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 36px;
height: 2px;
border-radius: 999px;
background: var(--color-primary);
}
.footer ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer ul li {
margin-bottom: 0.45rem;
}
.footer ul li:last-child {
margin-bottom: 0;
}
.footer ul li a {
display: inline-block;
color: var(--color-text-secondary);
font-size: 0.9rem;
line-height: 1.5;
text-decoration: none;
transition:
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.footer ul li a:hover,
.footer ul li a:focus-visible {
color: var(--color-primary);
transform: translateX(2px);
}
.footer-divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
}
.footer-bottom {
color: var(--color-text-secondary);
font-size: 0.9rem;
}
.footer-bottom a {
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
color: var(--color-primary);
}
.footer-metrics {
margin-top: clamp(1.75rem, 3vw, 2.25rem);
margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}
.footer-metric-card {
height: 100%;
padding: 1.25rem;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1rem;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.04),
rgba(255, 255, 255, 0.02)
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.03),
0 8px 24px rgba(0, 0, 0, 0.15);
}
.footer-metric-icon {
display: inline-block;
margin-bottom: 0.55rem;
color: var(--color-primary);
font-size: 1.4rem;
}
.footer-metric-card__value {
margin-bottom: 0.25rem;
color: var(--color-teal);
font-size: clamp(1.15rem, 2vw, 1.45rem);
font-weight: 700;
letter-spacing: -0.02em;
}
.footer-metric-card__label {
color: var(--color-text-secondary);
font-size: 0.9rem;
font-weight: 500;
}
/* Contact column */
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-bottom: 0.75rem;
color: var(--color-text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
.footer-contact-item i {
margin-top: 0.18rem;
color: var(--color-primary);
flex-shrink: 0;
}
.footer-contact-item a {
color: inherit;
text-decoration: none;
}
.footer-contact-item a:hover {
color: var(--color-primary);
}
/* Social Icons */
.social-icons {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
}
.social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--color-border);
border-radius: 50%;
background: transparent;
color: var(--color-text-secondary);
font-size: 1.05rem;
transition:
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.social-icons a:hover,
.social-icons a:focus-visible {
color: var(--color-primary);
border-color: var(--color-primary);
background: rgba(0, 212, 201, 0.08);
transform: translateY(-2px);
}
/* --------------------------------------------------------------------------
10. Carousel / Banner
-------------------------------------------------------------------------- */
#mainBanner.carousel {
border-bottom: 1px solid var(--color-border);
}
.banner-img {
max-height: 480px;
object-fit: cover;
opacity: 0.85;
}
.carousel-indicators [data-bs-target] {
background-color: var(--color-primary);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: invert(1);
}
/* --------------------------------------------------------------------------
11. Animations
-------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 {
transition-delay: 100ms;
}
.reveal-delay-2 {
transition-delay: 200ms;
}
.reveal-delay-3 {
transition-delay: 300ms;
}
.reveal-delay-4 {
transition-delay: 400ms;
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fade-in-up var(--duration-base) var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
12. Bootstrap 5 Overrides
-------------------------------------------------------------------------- */
.text-muted {
color: var(--color-text-secondary) !important;
}
.text-primary {
color: var(--color-primary) !important;
}
.text-light {
color: var(--color-text-secondary) !important;
}
.text-white {
color: var(--color-text) !important;
}
.text-dark {
color: var(--color-text) !important;
}
.bg-white,
.bg-light {
background-color: var(--color-card) !important;
color: var(--color-text);
}
.bg-light.text-dark,
.bg-white .text-dark {
color: var(--color-text) !important;
}
.form-control,
.form-select {
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: rgba(255, 255, 255, 0.04);
color: var(--color-text);
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.form-control::placeholder {
color: rgba(191, 191, 191, 0.6);
}
.form-control:focus,
.form-select:focus {
border-color: rgba(255, 99, 71, 0.6);
box-shadow: 0 0 0 3px var(--color-focus-ring);
background-color: rgba(255, 255, 255, 0.06);
color: var(--color-text);
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bfbfbf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option {
background: var(--color-card);
color: var(--color-text);
}
.form-control.is-invalid,
.form-select.is-invalid {
border-color: var(--color-error);
}
.invalid-feedback {
color: var(--color-error);
font-size: 0.8125rem;
}
.alert-success {
border: 1px solid rgba(61, 220, 132, 0.3);
border-radius: var(--radius-sm);
background: rgba(61, 220, 132, 0.1);
color: var(--color-success);
}
.alert-danger {
border: 1px solid rgba(255, 92, 92, 0.3);
border-radius: var(--radius-sm);
background: rgba(255, 92, 92, 0.1);
color: var(--color-error);
}
.alert-danger ul {
margin-bottom: 0;
}
.accordion {
--bs-accordion-bg: transparent;
--bs-accordion-border-color: var(--color-border);
--bs-accordion-btn-bg: var(--color-card);
--bs-accordion-btn-color: var(--color-text);
--bs-accordion-active-bg: rgba(255, 99, 71, 0.08);
--bs-accordion-active-color: var(--color-text);
--bs-accordion-body-padding-x: var(--space-3);
--bs-accordion-body-padding-y: var(--space-2);
}
.accordion-item {
margin-bottom: var(--space-1);
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-sm) !important;
background: var(--color-card);
overflow: hidden;
}
.accordion-button {
padding: var(--space-2) var(--space-3);
box-shadow: none !important;
font-weight: 500;
font-size: 1rem;
}
.accordion-button:not(.collapsed) {
color: var(--color-primary);
}
.accordion-button::after {
filter: invert(0.7);
}
.accordion-body {
border-top: 1px solid var(--color-border);
color: var(--color-text-secondary);
font-size: 0.9375rem;
line-height: 1.7;
}
.oola-accordion .accordion-button:focus {
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--color-text-secondary);
--bs-table-border-color: var(--color-border);
--bs-table-striped-bg: rgba(255, 255, 255, 0.02);
--bs-table-hover-bg: rgba(255, 99, 71, 0.06);
}
.table-dark {
--bs-table-bg: var(--color-card);
--bs-table-color: var(--color-text);
}
.table-bordered {
border-color: var(--color-border);
}
/* ==========================================================
Markdown Tables — Oola Systems Purple Theme
========================================================== */
.markdown-body table {
width: 100%;
margin: 1.5rem 0;
border-collapse: collapse;
border: 1px solid #8b79b8;
color: #f1edf9;
background-color: #211a30;
}
/* Header: distinct deep purple */
.markdown-body thead th {
padding: 0.85rem 1rem;
text-align: left;
font-weight: 700;
color: #ffffff;
background-color: #59358c;
border: 1px solid #a994d6;
}
/* Cell borders and spacing */
.markdown-body tbody td {
padding: 0.75rem 1rem;
border: 1px solid #786493;
vertical-align: top;
}
/* Alternating purple-tinted rows */
.markdown-body tbody tr:nth-child(odd) {
background-color: #302440;
}
.markdown-body tbody tr:nth-child(even) {
background-color: #3b2b50;
}
/* Subtle hover highlight */
.markdown-body tbody tr {
transition: background-color 180ms ease;
}
.markdown-body tbody tr:hover {
background-color: #4b3768;
}
/* Mobile: allow wide tables to scroll horizontally */
@media (max-width: 768px) {
.markdown-body table {
display: block;
overflow-x: auto;
}
.markdown-body thead th,
.markdown-body tbody td {
min-width: 110px;
padding: 0.65rem 0.75rem;
}
}
.badge.bg-warning {
background: rgba(255, 193, 7, 0.15) !important;
color: #ffc107;
}
.badge.bg-success {
background: rgba(61, 220, 132, 0.15) !important;
color: var(--color-success);
}
.pagination {
--bs-pagination-bg: var(--color-card);
--bs-pagination-border-color: var(--color-border);
--bs-pagination-color: var(--color-text-secondary);
--bs-pagination-hover-bg: rgba(255, 99, 71, 0.1);
--bs-pagination-hover-color: var(--color-primary);
--bs-pagination-active-bg: var(--color-primary);
--bs-pagination-active-border-color: var(--color-primary);
}
hr {
border-color: var(--color-border);
opacity: 1;
}
.shadow,
.shadow-sm {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
}
.rounded {
border-radius: var(--radius-sm) !important;
}
/* --------------------------------------------------------------------------
13. Utility Classes
-------------------------------------------------------------------------- */
.text-gradient {
background: linear-gradient(135deg, var(--color-text), var(--color-accent));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.border-oola {
border: 1px solid var(--color-border);
}
.surface-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-card);
}
.tech-stack {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: 40px;
}
.tech-badge {
padding: 10px 22px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
font-weight: 600;
transition: 0.3s;
}
.tech-badge:hover {
background: #ff6347;
color: #fff;
transform: translateY(-3px);
}
.leader-photo {
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.leader-section {
margin-bottom: 5rem;
}
.service-icon {
font-size: 2.6rem;
color: #ff6347;
transition: all 0.3s ease;
}
#services-preview .feature-card {
padding: 2rem 1rem;
transition: all 0.3s ease;
}
#services-preview .feature-card:hover {
transform: translateY(-6px);
}
#services-preview .feature-card:hover .service-icon {
transform: scale(1.15);
}
.industry-icon {
font-size: 2.6rem;
color: #35d0ba;
transition: all 0.3s ease;
}
#industries-preview .feature-card {
padding: 2rem 1rem;
transition: all 0.3s ease;
}
#industries-preview .feature-card:hover {
transform: translateY(-6px);
}
#industries-preview .feature-card:hover .industry-icon {
transform: scale(1.15);
}
.resource-icon {
font-size: 2.6rem;
color: #35d0ba;
transition: 0.3s ease;
}
#resources-preview .feature-card {
padding: 2rem 1rem;
transition: 0.3s ease;
}
#resources-preview .feature-card:hover {
transform: translateY(-6px);
}
#resources-preview .feature-card:hover .resource-icon {
transform: scale(1.15);
}
.manage-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
gap: 2rem;
flex-wrap: wrap;
}
.manage-toolbar {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.manage-toolbar input {
flex: 1;
min-width: 280px;
}
.manage-table {
width: 100%;
border-collapse: collapse;
}
.manage-table th {
font-weight: 700;
}
.manage-table td,
.manage-table th {
padding: 1rem;
}
.status-badge {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
}
.status-new {
background: #eaf4ff;
color: #0d6efd;
}
.status-read {
background: #fff6dd;
color: #c58b00;
}
.status-closed {
background: #eaf9f0;
color: #198754;
}
.table-actions {
display: flex;
gap: 0.5rem;
}
/* ==========================================================
Authentication
========================================================== */
.auth-page {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
/* ==========================================================================
ADMIN DASHBOARD
========================================================================== */
/* --------------------------------------------------------------------------
KPI Cards
-------------------------------------------------------------------------- */
.dashboard-kpi {
position: relative;
min-height: 188px;
padding: 1.15rem !important;
overflow: hidden;
border-top: 2px solid transparent;
}
.dashboard-kpi__main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.dashboard-kpi__label {
color: var(--color-text-secondary);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.dashboard-kpi__value {
margin-top: 0.35rem;
color: var(--color-text);
font-size: clamp(2rem, 3vw, 2.65rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
}
.dashboard-kpi__description {
margin-top: 0.55rem;
color: var(--color-muted);
font-size: 0.76rem;
line-height: 1.35;
}
.dashboard-kpi__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 12px;
font-size: 1.45rem;
background: rgba(255, 255, 255, 0.045);
}
.dashboard-kpi__footer {
margin-top: auto;
padding-top: 1rem;
}
.dashboard-view-all {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--color-text-secondary);
font-size: 0.78rem;
font-weight: 600;
transition:
color var(--duration-fast) var(--ease-out),
gap var(--duration-fast) var(--ease-out);
}
.dashboard-view-all:hover {
color: var(--color-primary);
gap: 0.65rem;
}
.dashboard-view-all i {
font-size: 0.72rem;
}
/* --------------------------------------------------------------------------
KPI Identity Colors
-------------------------------------------------------------------------- */
.dashboard-kpi--primary {
border-top-color: var(--color-primary);
}
.dashboard-kpi--success {
border-top-color: var(--color-success);
}
.dashboard-kpi--info {
border-top-color: #3b82f6;
}
.dashboard-kpi--warning {
border-top-color: #f5b942;
}
.dashboard-kpi--cyan {
border-top-color: #22d3ee;
}
.dashboard-kpi--danger {
border-top-color: var(--color-error);
}
.dashboard-kpi__icon--primary {
color: var(--color-primary);
background: rgba(53, 208, 186, 0.1);
}
.dashboard-kpi__icon--success {
color: var(--color-success);
background: rgba(61, 220, 132, 0.1);
}
.dashboard-kpi__icon--info {
color: #60a5fa;
background: rgba(59, 130, 246, 0.1);
}
.dashboard-kpi__icon--warning {
color: #f5b942;
background: rgba(245, 185, 66, 0.1);
}
.dashboard-kpi__icon--cyan {
color: #22d3ee;
background: rgba(34, 211, 238, 0.1);
}
.dashboard-kpi__icon--danger {
color: var(--color-error);
background: rgba(255, 92, 92, 0.1);
}
/* --------------------------------------------------------------------------
Dashboard Chart Cards
-------------------------------------------------------------------------- */
.dashboard-chart-card {
min-height: 390px;
}
.dashboard-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.dashboard-chart-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
border: 1px solid rgba(53, 208, 186, 0.22);
border-radius: 11px;
background: rgba(53, 208, 186, 0.08);
color: var(--color-primary);
font-size: 1.15rem;
}
.dashboard-chart-icon--temperature {
border-color: rgba(245, 185, 66, 0.22);
background: rgba(245, 185, 66, 0.08);
color: #f5b942;
}
.dashboard-chart-container {
position: relative;
width: 100%;
height: 280px;
}
.dashboard-chart-container--doughnut {
height: 285px;
}
/* --------------------------------------------------------------------------
Dashboard Secondary Metric Cards
-------------------------------------------------------------------------- */
.dashboard-metric-card {
height: 100%;
padding: 1.1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.025);
transition:
border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.dashboard-metric-card:hover {
transform: translateY(-2px);
border-color: rgba(53, 208, 186, 0.35);
background: rgba(255, 255, 255, 0.04);
}
.dashboard-metric-card__label {
color: var(--color-text-secondary);
font-size: 0.78rem;
line-height: 1.35;
}
.dashboard-metric-card__value {
margin-top: 0.35rem;
color: var(--color-text);
font-size: 1.7rem;
font-weight: 700;
line-height: 1.1;
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
.dashboard-kpi {
min-height: 175px;
}
}
@media (max-width: 767.98px) {
.dashboard-kpi {
min-height: 165px;
}
.dashboard-chart-card {
min-height: 350px;
}
.dashboard-chart-container {
height: 250px;
}
}
@media (max-width: 575.98px) {
.dashboard-kpi {
min-height: 155px;
}
.dashboard-kpi__value {
font-size: 2rem;
}
.dashboard-kpi__icon {
width: 42px;
height: 42px;
flex-basis: 42px;
font-size: 1.2rem;
}
}
/* ==========================================================
OOLA AI CHATBOT
========================================================== */
.oola-chatbot {
position: fixed;
inset: 0;
z-index: 1050;
pointer-events: none;
}
/* ==========================================================
CHATBOT PANEL
========================================================== */
.oola-chatbot-panel {
position: fixed;
right: 24px;
bottom: 96px;
width: 390px;
max-width: calc(100vw - 32px);
height: 600px;
max-height: calc(100vh - 120px);
display: flex;
flex-direction: column;
background: var(--bs-body-bg, #ffffff);
border: 1px solid rgba(127, 0, 255, 0.15);
border-radius: 18px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(0.97);
transform-origin: bottom right;
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
pointer-events: auto;
}
/* Open state */
.oola-chatbot.is-open .oola-chatbot-panel {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* ==========================================================
HEADER
========================================================== */
.oola-chatbot-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 16px;
background: linear-gradient(135deg, #7f00ff, #6c5ce7);
color: #ffffff;
}
.oola-chatbot-avatar {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
font-size: 18px;
}
.oola-chat-avatar-small {
width: 30px;
height: 30px;
font-size: 14px;
background: #7f00ff;
}
.oola-chatbot-title {
font-size: 0.95rem;
font-weight: 700;
}
.oola-chatbot-status {
display: flex;
align-items: center;
gap: 5px;
margin-top: 2px;
font-size: 0.72rem;
opacity: 0.85;
}
.oola-chatbot-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #6eff9a;
}
.oola-chatbot-close {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
transition:
background 0.15s ease,
transform 0.15s ease;
}
.oola-chatbot-close:hover {
background: rgba(255, 255, 255, 0.22);
transform: scale(1.05);
}
/* ==========================================================
MESSAGES
========================================================== */
.oola-chatbot-messages {
flex: 1;
padding: 18px 16px;
overflow-y: auto;
background: linear-gradient(
180deg,
rgba(127, 0, 255, 0.025),
transparent 30%
);
}
.oola-chat-message {
display: flex;
gap: 9px;
margin-bottom: 14px;
}
.oola-chat-message-ai {
align-items: flex-start;
}
.oola-chat-message-user .oola-chat-bubble-text {
background: #7f00ff;
color: #ffffff;
border-radius: 14px 4px 14px 14px;
}
.oola-chat-bubble {
max-width: 82%;
}
.oola-chat-bubble-text {
padding: 11px 13px;
border-radius: 4px 14px 14px 14px;
background: #f2effa;
color: #25223a;
font-size: 0.88rem;
line-height: 1.5;
}
/* ==========================================================
QUICK REPLIES
========================================================== */
.oola-chatbot-quick-replies {
display: flex;
flex-direction: column;
gap: 8px;
margin-left: 39px;
margin-bottom: 18px;
}
.oola-chatbot-option {
width: 100%;
display: flex;
align-items: center;
gap: 9px;
padding: 9px 12px;
border: 1px solid rgba(127, 0, 255, 0.2);
border-radius: 10px;
background: #ffffff;
color: #5b21b6;
font-size: 0.82rem;
font-weight: 600;
text-align: left;
transition:
background 0.15s ease,
border-color 0.15s ease,
transform 0.15s ease;
}
.oola-chatbot-option:hover {
background: #f7f2ff;
border-color: #7f00ff;
transform: translateX(2px);
}
.oola-chatbot-option i {
width: 18px;
color: #7f00ff;
}
/* ==========================================================
INPUT
========================================================== */
.oola-chatbot-input-area {
padding: 12px 14px 10px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
background: var(--bs-body-bg, #ffffff);
}
.oola-chatbot-input-wrapper {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 5px 5px 12px;
border: 1px solid rgba(127, 0, 255, 0.2);
border-radius: 14px;
background: #ffffff;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.oola-chatbot-input-wrapper:focus-within {
border-color: #7f00ff;
box-shadow: 0 0 0 3px rgba(127, 0, 255, 0.08);
}
.oola-chatbot-input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font-size: 0.86rem;
}
.oola-chatbot-input::placeholder {
color: #999;
}
.oola-chatbot-send {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 0;
border-radius: 10px;
background: #7f00ff;
color: #ffffff;
transition:
background 0.15s ease,
transform 0.15s ease;
}
.oola-chatbot-send:hover {
background: #6c5ce7;
transform: translateY(-1px);
}
.oola-chatbot-disclaimer {
margin-top: 6px;
color: #999;
font-size: 0.65rem;
text-align: center;
}
/* ==========================================================
LAUNCHER
========================================================== */
.oola-chatbot-launcher {
position: fixed;
right: 24px;
bottom: 24px;
width: 58px;
height: 58px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: linear-gradient(135deg, #7f00ff, #6c5ce7);
color: #ffffff;
box-shadow: 0 10px 30px rgba(127, 0, 255, 0.35);
pointer-events: auto;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.oola-chatbot-launcher:hover {
transform: translateY(-3px);
box-shadow: 0 14px 35px rgba(127, 0, 255, 0.45);
}
.oola-chatbot-launcher-icon,
.oola-chatbot-launcher-close {
display: inline-flex;
transition:
opacity 0.15s ease,
transform 0.15s ease;
}
.oola-chatbot-launcher-close {
position: absolute;
opacity: 0;
transform: rotate(-45deg);
}
.oola-chatbot.is-open .oola-chatbot-launcher-icon {
opacity: 0;
transform: rotate(45deg);
}
.oola-chatbot.is-open .oola-chatbot-launcher-close {
opacity: 1;
transform: rotate(0);
}
/* ==========================================================
PROACTIVE INVITATION
========================================================== */
.oola-chatbot-invite {
position: fixed;
right: 24px;
bottom: 92px;
width: 300px;
max-width: calc(100vw - 32px);
padding: 15px 16px;
border: 1px solid rgba(127, 0, 255, 0.12);
border-radius: 14px;
background: #ffffff;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
pointer-events: auto;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}
.oola-chatbot.is-invited .oola-chatbot-invite {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.oola-chatbot-invite-title {
padding-right: 20px;
color: #25223a;
font-size: 0.88rem;
font-weight: 700;
}
.oola-chatbot-invite-text {
margin-top: 4px;
color: #6b7280;
font-size: 0.78rem;
line-height: 1.45;
}
.oola-chatbot-invite-close {
position: absolute;
top: 8px;
right: 9px;
border: 0;
background: transparent;
color: #999;
font-size: 16px;
}
/* ==========================================================
AI CHATBOT
Floating Assistant
========================================================== */
.ai-chatbot {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;
font-family: inherit;
}
/* ----------------------------------------------------------
Floating Button
---------------------------------------------------------- */
.ai-chatbot-toggle {
width: 58px;
height: 58px;
border: 1px solid rgba(0, 255, 220, 0.55);
border-radius: 50%;
background: linear-gradient(145deg, #17151d, #0d0d12);
color: #20e0ca;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
cursor: pointer;
box-shadow:
0 0 0 1px rgba(32, 224, 202, 0.08),
0 8px 28px rgba(0, 0, 0, 0.45),
0 0 22px rgba(32, 224, 202, 0.12);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
animation: ai-chatbot-pulse 3s ease-in-out infinite;
}
.ai-chatbot-toggle:hover {
transform: translateY(-3px) scale(1.04);
border-color: rgba(32, 224, 202, 0.95);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.5),
0 0 28px rgba(32, 224, 202, 0.25);
}
.ai-chatbot-toggle:focus-visible {
outline: 2px solid #20e0ca;
outline-offset: 4px;
}
/* ----------------------------------------------------------
Pulse
---------------------------------------------------------- */
@keyframes ai-chatbot-pulse {
0%,
100% {
box-shadow:
0 0 0 1px rgba(32, 224, 202, 0.08),
0 8px 28px rgba(0, 0, 0, 0.45),
0 0 18px rgba(32, 224, 202, 0.1);
}
50% {
box-shadow:
0 0 0 6px rgba(32, 224, 202, 0.04),
0 8px 30px rgba(0, 0, 0, 0.48),
0 0 30px rgba(32, 224, 202, 0.22);
}
}
/* ----------------------------------------------------------
Chat Panel
---------------------------------------------------------- */
.ai-chatbot-panel {
position: absolute;
right: 0;
bottom: 72px;
width: 370px;
max-width: calc(100vw - 32px);
height: 520px;
max-height: calc(100vh - 110px);
display: flex;
flex-direction: column;
overflow: hidden;
background: linear-gradient(
160deg,
rgba(24, 23, 29, 0.98),
rgba(12, 12, 16, 0.98)
);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.6),
0 0 35px rgba(32, 224, 202, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(15px) scale(0.96);
transform-origin: bottom right;
pointer-events: none;
transition:
opacity 0.22s ease,
transform 0.22s ease,
visibility 0.22s ease;
}
/* ----------------------------------------------------------
Open State
---------------------------------------------------------- */
.ai-chatbot.is-open .ai-chatbot-panel {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* ----------------------------------------------------------
Header
---------------------------------------------------------- */
.ai-chatbot-header {
min-height: 72px;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(
135deg,
rgba(32, 224, 202, 0.1),
rgba(127, 0, 255, 0.08)
);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-chatbot-avatar {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(32, 224, 202, 0.1);
border: 1px solid rgba(32, 224, 202, 0.3);
color: #20e0ca;
font-size: 1.15rem;
}
.ai-chatbot-header .fw-semibold {
color: #ffffff;
font-size: 0.95rem;
}
.ai-chatbot-header small {
color: rgba(255, 255, 255, 0.55);
}
/* ----------------------------------------------------------
Close Button
---------------------------------------------------------- */
.ai-chatbot-close {
width: 32px;
height: 32px;
border: 0;
border-radius: 8px;
background: transparent;
color: rgba(255, 255, 255, 0.65);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.18s ease,
color 0.18s ease;
}
.ai-chatbot-close:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
/* ----------------------------------------------------------
Messages
---------------------------------------------------------- */
.ai-chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: rgba(32, 224, 202, 0.3) transparent;
}
.ai-chatbot-message {
display: flex;
max-width: 88%;
}
.ai-chatbot-message-bot {
align-self: flex-start;
}
.ai-chatbot-message-user {
align-self: flex-end;
justify-content: flex-end;
}
.ai-chatbot-message-content {
padding: 11px 14px;
border-radius: 14px;
font-size: 0.88rem;
line-height: 1.55;
}
.ai-chatbot-message-bot .ai-chatbot-message-content {
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.88);
border-bottom-left-radius: 5px;
}
.ai-chatbot-message-user .ai-chatbot-message-content {
background: linear-gradient(135deg, #20cdb9, #18a997);
color: #071312;
font-weight: 500;
border-bottom-right-radius: 5px;
}
/* ----------------------------------------------------------
Input
---------------------------------------------------------- */
.ai-chatbot-input-area {
display: flex;
gap: 8px;
padding: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.15);
}
.ai-chatbot-input-area input {
min-width: 0;
height: 44px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.045);
color: #ffffff;
padding: 0 13px;
}
.ai-chatbot-input-area input::placeholder {
color: rgba(255, 255, 255, 0.42);
}
.ai-chatbot-input-area input:focus {
border-color: rgba(32, 224, 202, 0.55);
box-shadow: 0 0 0 3px rgba(32, 224, 202, 0.08);
outline: none;
}
.ai-chatbot-send {
flex: 0 0 44px;
width: 44px;
height: 44px;
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, #20d7c2, #16ad9b);
color: #071312;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
transform 0.18s ease,
filter 0.18s ease;
}
.ai-chatbot-send:hover {
transform: translateY(-1px);
filter: brightness(1.1);
}
/* ----------------------------------------------------------
Surprise Greeting
---------------------------------------------------------- */
.ai-chatbot-greeting {
position: absolute;
right: 4px;
bottom: 70px;
width: 250px;
padding: 13px 15px;
background: rgba(24, 23, 29, 0.98);
border: 1px solid rgba(32, 224, 202, 0.28);
border-radius: 14px;
color: rgba(255, 255, 255, 0.88);
font-size: 0.84rem;
line-height: 1.45;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(0.96);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s ease;
}
.ai-chatbot-greeting::after {
content: "";
position: absolute;
right: 18px;
bottom: -7px;
width: 13px;
height: 13px;
background: rgba(24, 23, 29, 0.98);
border-right: 1px solid rgba(32, 224, 202, 0.28);
border-bottom: 1px solid rgba(32, 224, 202, 0.28);
transform: rotate(45deg);
}
.ai-chatbot.show-greeting .ai-chatbot-greeting {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* ----------------------------------------------------------
Mobile
---------------------------------------------------------- */
@media (max-width: 575px) {
.ai-chatbot {
right: 16px;
bottom: 16px;
}
.ai-chatbot-toggle {
width: 54px;
height: 54px;
}
.ai-chatbot-panel {
right: 0;
bottom: 66px;
width: calc(100vw - 32px);
height: min(520px, calc(100vh - 100px));
border-radius: 16px;
}
.ai-chatbot-greeting {
right: 0;
width: min(250px, calc(100vw - 90px));
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 575px) {
.oola-chatbot-panel {
right: 8px;
bottom: 76px;
width: calc(100vw - 16px);
height: calc(100vh - 92px);
max-height: none;
border-radius: 16px;
}
.oola-chatbot-launcher {
right: 16px;
bottom: 16px;
width: 54px;
height: 54px;
}
.oola-chatbot-invite {
right: 16px;
bottom: 82px;
width: calc(100vw - 32px);
}
}
/* ==========================================================
CHATBOT INQUIRY FORM
=========================================================== */
.ai-chatbot-inquiry-form {
padding: 14px;
overflow-y: auto;
max-height: 420px;
}
/*
* The reusable inquiry form is being displayed
* inside the chatbot, so reduce unnecessary spacing.
*/
.ai-chatbot-inquiry-form .inquiry-form {
margin: 0;
}
.ai-chatbot-inquiry-form .form-control,
.ai-chatbot-inquiry-form .form-select {
font-size: 0.9rem;
}
.ai-chatbot-inquiry-form .mb-3 {
margin-bottom: 0.75rem !important;
}
.ai-chatbot-inquiry-form textarea {
min-height: 110px;
}
/* ==========================================================================
Learnings mega menu
Uses the existing Oola navbar tokens and Bootstrap dropdown behavior.
========================================================================== */
.oola-dropdown-menu--learnings {
width: min(880px, calc(100vw - 40px));
min-width: min(720px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
padding: 1.35rem 1.5rem 1rem;
border: 1px solid rgba(32, 191, 175, 0.22);
border-radius: 18px;
background: rgba(13, 13, 16, 0.98);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(16px);
}
.oola-learnings-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.4rem 1.6rem;
}
.oola-learning-group {
min-width: 0;
}
.oola-dropdown-menu--learnings .oola-dropdown__title {
min-height: 2.1em;
margin: 0 0 0.55rem;
color: var(--color-primary);
font-size: 0.76rem;
line-height: 1.4;
letter-spacing: 0.075em;
}
.oola-dropdown-menu--learnings .oola-dropdown__list li + li {
margin-top: 0.2rem;
}
.oola-dropdown-menu--learnings .oola-dropdown__list a {
display: block;
padding: 0.38rem 0.55rem;
margin: 0;
border-radius: 7px;
color: var(--color-text-secondary);
font-size: 0.87rem;
line-height: 1.4;
text-decoration: none;
transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.oola-dropdown-menu--learnings .oola-dropdown__list a:hover,
.oola-dropdown-menu--learnings .oola-dropdown__list a:focus-visible {
padding: 0.38rem 0.55rem;
color: var(--color-primary);
background: rgba(32, 191, 175, 0.09);
transform: translateX(2px);
outline: none;
}
.oola-learnings-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.15rem;
padding-top: 0.9rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-text-secondary);
font-size: 0.8rem;
}
.oola-learnings-footer a,
.oola-mobile-learning-overview {
color: var(--color-primary);
font-weight: 650;
text-decoration: none;
}
.oola-learnings-footer a:hover,
.oola-mobile-learning-overview:hover {
text-decoration: underline;
}
.oola-mobile-learning-body {
padding-top: 0.15rem !important;
}
.oola-mobile-learning-overview {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 0;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
}
.oola-mobile-learning-group {
padding: 0.65rem 0 0.45rem;
}
.oola-mobile-learning-group + .oola-mobile-learning-group {
border-top: 1px solid var(--color-border);
}
.oola-mobile-learning-group h3 {
margin: 0 0 0.45rem;
color: var(--color-primary);
font-size: 0.76rem;
font-weight: 750;
letter-spacing: 0.07em;
line-height: 1.45;
text-transform: uppercase;
}
.oola-mobile-learning-group ul {
margin: 0;
}
.oola-mobile-learning-group li + li {
margin-top: 0.15rem;
}
.oola-mobile-learning-group a {
display: block;
padding: 0.42rem 0.15rem;
color: var(--color-text-secondary);
text-decoration: none;
}
.oola-mobile-learning-group a:hover,
.oola-mobile-learning-group a:focus-visible {
color: var(--color-primary);
}
@media (max-width: 1199.98px) and (min-width: 992px) {
.oola-dropdown-menu--learnings {
width: min(760px, calc(100vw - 24px));
min-width: min(680px, calc(100vw - 24px));
}
.oola-learnings-grid {
gap: 1.15rem 1rem;
}
}
@media (max-width: 991.98px) {
.oola-dropdown-menu--learnings {
width: auto;
min-width: 0;
}
}