127 lines
3 KiB
CSS
127 lines
3 KiB
CSS
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap');
|
||
|
|
@import "tailwindcss";
|
||
|
|
|
||
|
|
@theme {
|
||
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||
|
|
--font-display: "Outfit", sans-serif;
|
||
|
|
|
||
|
|
--color-brand: #0d9488; /* Teal 600 */
|
||
|
|
--color-brand-light: #2dd4bf; /* Teal 400 */
|
||
|
|
--color-brand-dark: #0f766e; /* Teal 700 */
|
||
|
|
|
||
|
|
--radius-xl: 1rem;
|
||
|
|
--radius-2xl: 1.5rem;
|
||
|
|
--radius-3xl: 2.5rem;
|
||
|
|
|
||
|
|
--spacing-section: 12rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide Google Translate Bar */
|
||
|
|
.goog-te-banner-frame.skiptranslate,
|
||
|
|
.goog-te-banner-frame,
|
||
|
|
#goog-gt-tt,
|
||
|
|
.goog-te-balloon-frame {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
top: 0 !important;
|
||
|
|
}
|
||
|
|
.goog-tooltip {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
.goog-tooltip:hover {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
.goog-text-highlight {
|
||
|
|
background-color: transparent !important;
|
||
|
|
border: none !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer base {
|
||
|
|
body {
|
||
|
|
@apply text-slate-900 antialiased bg-white font-sans selection:bg-brand/10 selection:text-brand;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2, h3, h4, h5, h6 {
|
||
|
|
@apply font-display tracking-tight text-slate-950;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer components {
|
||
|
|
.section-padding {
|
||
|
|
@apply py-32 sm:py-48;
|
||
|
|
}
|
||
|
|
.markdown-body {
|
||
|
|
@apply mx-auto max-w-3xl text-[18px] text-slate-600 leading-[1.8] font-sans;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-body h2 {
|
||
|
|
@apply text-3xl sm:text-4xl font-display font-bold mt-16 mb-8 tracking-tight text-slate-900 border-b border-slate-100 pb-4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-body h3 {
|
||
|
|
@apply text-2xl font-bold mt-12 mb-6 tracking-tight text-slate-800;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-body p {
|
||
|
|
@apply mb-6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-body ul, .markdown-body ol {
|
||
|
|
@apply mb-8 ml-6 space-y-3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-body blockquote {
|
||
|
|
@apply pl-8 border-l-4 border-brand-light italic text-slate-800 text-xl my-12 leading-relaxed bg-slate-50 py-8 pr-8 rounded-r-2xl;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-body strong {
|
||
|
|
@apply font-semibold text-slate-900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-body a {
|
||
|
|
@apply text-brand font-medium underline decoration-brand/30 underline-offset-4 hover:decoration-brand transition-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-body img {
|
||
|
|
@apply rounded-3xl my-12 shadow-md border border-slate-100;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Glass Effects */
|
||
|
|
.glass {
|
||
|
|
@apply bg-white/70 backdrop-blur-xl border border-white/20 shadow-sm;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-dark {
|
||
|
|
@apply bg-slate-950/80 backdrop-blur-xl border border-white/10 shadow-2xl;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Buttons */
|
||
|
|
.btn-primary {
|
||
|
|
@apply px-6 py-3 bg-brand text-white rounded-xl font-semibold hover:bg-brand-dark transition-all active:scale-95 shadow-sm hover:shadow-teal-200/50;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-outline {
|
||
|
|
@apply px-6 py-3 border border-slate-200 rounded-xl font-semibold hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95 text-slate-700;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Custom scrollbar */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: #e2e8f0;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #cbd5e1;
|
||
|
|
}
|