@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');
/* ==========================================================================
PrivoniX Base Stylesheet (base.css)
==========================================================================
DEVELOPER : Mayank Chawdhari ( PrivoniX Technologies )
VERSION : 1.0.0
THEME : Ash & Obsidian
TYPOGRAPHY: Merriweather (Serif)
TRADEMARK : © 2026 PrivoniX Technologies. All rights reserved.
FEATURES :
- Enterprise-grade CSS resets and baseline typography
- Centralized CSS Custom Properties (Variables)
- 3-Tier Button Architecture (Solid, Bordered, Dotted) with micro-animations
- Native support & alignment for Lucide Icons (Latest)
- Custom keyframe animations for UI components
HOW TO USE :
1. File Placement:
Ensure this file is located at `/Assets/Modules/base.css`.
2. HTML Integration:
Link this file in the of your HTML documents BEFORE any custom styles:
3. Lucide Icons Setup:
Include the Lucide script in your HTML right before the closing tag:
Use icons like:
4. Applying Buttons:
Use class combinations:
- Solid:
- Border:
- Dotted:
5. Animations:
Apply `.anim-fade-up` to any element you want to gracefully slide into view.
========================================================================== */
/* --------------------------------------------------------------------------
1. ROOT VARIABLES
-------------------------------------------------------------------------- */
:root {
/* Theme: Ash & Obsidian */
--bg-color: #F2F3F4;
--text-color: #0B0B0B;
--accent-color: #0B0B0B;
--button-text: #F2F3F4;
/* Typography */
--font-main: 'Merriweather', serif;
/* Structural & Animation Variables */
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
--border-radius-sm: 4px;
--border-radius-md: 6px;
/* Lucide Icon Defaults */
--icon-size: 20px;
--icon-stroke: 2px;
}
/* --------------------------------------------------------------------------
2. RESETS & BASE STYLING
-------------------------------------------------------------------------- */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scrollbar-width: thin;
scrollbar-color: rgba(11, 11, 11, 0.35) rgba(11, 11, 11, 0.08);
}
/* Custom Scrollbar (WebKit) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgba(11, 11, 11, 0.08);
}
::-webkit-scrollbar-thumb {
background: rgba(11, 11, 11, 0.35);
border-radius: 999px;
border: 2px solid rgba(11, 11, 11, 0.08);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(11, 11, 11, 0.5);
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-main);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.is-loading {
overflow: hidden;
}
/* --------------------------------------------------------------------------
PRELOADER
-------------------------------------------------------------------------- */
.ota-preloader {
position: fixed;
inset: 0;
background: #F2F3F4;
display: flex;
align-items: center;
justify-content: center;
z-index: 10002;
transition: opacity 0.45s ease, visibility 0.45s ease;
opacity: 1;
visibility: visible;
}
.ota-preloader.is-hidden {
opacity: 0;
visibility: hidden;
}
.ota-preloader-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.ota-preloader-spinner {
width: 54px;
height: 54px;
border-radius: 50%;
border: 3px solid rgba(11, 11, 11, 0.12);
border-top-color: rgba(11, 11, 11, 0.65);
animation: ota-spin 0.9s linear infinite;
}
.ota-preloader-text {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #0B0B0B;
}
@keyframes ota-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.ota-preloader-spinner {
animation: none;
}
}
/* Typography Defaults */
h1, h2, h3, h4, h5, h6 {
font-family: inherit;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: var(--text-color);
}
p {
margin-bottom: 1.5rem;
color: var(--text-color);
opacity: 0.9;
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
opacity: 0.7;
}
/* --------------------------------------------------------------------------
3. BUTTON ARCHITECTURE
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 32px;
font-family: var(--font-main);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast);
outline: none;
text-transform: uppercase;
}
/* Focus State for Accessibility */
.btn:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 4px;
}
/* Active (Click) Effect - Micro-animation */
.btn:active {
transform: scale(0.96);
}
/* A. Solid Button */
.btn-solid {
background-color: var(--accent-color);
color: var(--button-text);
border: 2px solid var(--accent-color);
}
.btn-solid:hover {
background-color: transparent;
color: var(--accent-color);
}
/* B. Bordered Button */
.btn-bordered {
background-color: transparent;
color: var(--text-color);
border: 2px solid var(--accent-color);
}
.btn-bordered:hover {
background-color: var(--accent-color);
color: var(--button-text);
}
/* C. Dotted Button */
.btn-dotted {
background-color: transparent;
color: var(--text-color);
border: 2px dotted var(--accent-color);
}
.btn-dotted:hover {
border-style: solid;
background-color: var(--bg-color); /* Maintains BG but solidifies border */
box-shadow: 0 4px 12px rgba(11, 11, 11, 0.1);
transform: translateY(-2px);
}
.btn-dotted:active {
transform: translateY(0) scale(0.96);
}
/* --------------------------------------------------------------------------
4. LUCIDE ICONS INTEGRATION
-------------------------------------------------------------------------- */
/* Ensures icons properly align with text inside buttons or paragraphs */
.lucide, .icon {
width: var(--icon-size);
height: var(--icon-size);
stroke-width: var(--icon-stroke);
stroke: currentColor;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
display: inline-block;
transition: transform var(--transition-fast);
}
/* Slight icon shift on button hover for dynamic feel */
.btn:hover .lucide {
transform: translateX(2px);
}
/* --------------------------------------------------------------------------
5. CUSTOM ANIMATIONS
-------------------------------------------------------------------------- */
@keyframes slideUpFade {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.anim-fade-up {
animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Delays for staggered loading */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }