/* ==========================================================================
PRIVONIX /Assets/Modules/base.css
--------------------------------------------------------------------------
File: base.css
Location: /Assets/Modules/base.css
Version: 1.1.0
Date: 2026-02-15
Author: Chawdhari Ji
License: Proprietary (internal) — © Privonix Technologies. All rights reserved.
Purpose: Canonical design token file and component primitives used across
the Privonix web properties. This file defines:
• core tokens (colors, fonts, radii, shadows)
• default browser resets and base styles so consumers don't
need to repeat common rules
• component primitives: buttons (5 types), icons, badges,
toasts, modal layer, cards, inputs, grids, micro-animations
• accessibility helpers and usage guidance
SUMMARY (what this file supplies)
- Single accent color (CRIMSON: #dc2626) implementing the 60–30–10 rule:
--color-60 : main canvas / background (60%)
--color-30 : surfaces / panels (30%)
--color-10 : accent / highlights (10%) -> CRIMSON
- Three typography roles (primary, secondary, tertiary)
• Primary: Exo (premium headings & UI)
• Secondary: Inter (UI body / system)
• Tertiary: Space Mono (monospace tokens)
- Five button variants with micro-interactions and a polished shimmer/shine
effect for CTAs, including keyboard-focus and active states.
- Icon system: circular border, no-bg default, 3D uplift, filled variant.
- Lightweight toast + modal systems with recommended z-index and semantics.
- Utilities: grid, container, spacing, text helpers, badges, input styles.
- Export location: /Assets/Modules/base.css (import once; do not duplicate)
VERSIONING & CHANGELOG
- 1.0.0 (initial): tokens, multi-theme scaffolding, components.
- 1.1.0 (this): locked accent to CRIMSON, enriched header docs, thorough
base resets, more helpers (container, grid, spacing, accessible focus),
polished button shimmer and 3D lifts, usage examples added.
CONVENTIONS (follow these)
- Tokens: always reference --token names (do not hardcode colors).
- Components: prefer classes (.btn1, .icon) — avoid inline styles for tokens.
- The body MUST have data-theme="crimson" (default) if you rely on tokens.
- Extend the system by creating `/Assets/Modules/base.ext.css` and import
after this file; do NOT edit this file for one-off tweaks.
ACCESSIBILITY NOTES
- Focus-visible styles are provided. Use keyboard only to test flows.
- Ensure text overlays (badges, icons) meet contrast with underlying surfaces.
- For dark patterns override variables at body[data-theme] level only.
USAGE EXAMPLES
Get Started
security
STORAGE LOCATION
- Put this file at: /Assets/Modules/base.css
- Will be imported by nav.php as it will be included everywhere.
========================================================================== */
/* -------------------------
CORE TOKENS (DEFAULT & ACCESSIBLE)
------------------------- */
:root{
/* Typography (three roles) */
--font-primary: 'Exo', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
/* 60-30-10 color tokens - locked to CRIMSON accent per spec */
--color-60: #ffffff; /* 60% base / canvas */
--color-30: #0b1220; /* 30% secondary / panels (deep navy) */
--color-10: #dc2626; /* 10% accent (CRIMSON) */
/* Semantic tokens derived */
--bg-canvas: var(--color-60);
--bg-panel: color-mix(in srgb, var(--color-30) 7%, var(--color-60) 93%);
--accent: var(--color-10);
--accent-strong: color-mix(in srgb, var(--accent) 85%, black 15%);
--accent-glow: color-mix(in srgb, var(--accent) 20%, white 80%);
--text-main: #0b1220;
--text-inverse: #f8fafc;
--text-muted: rgba(11,18,32,0.56);
--border-light: rgba(11,18,32,0.06);
/* Radii */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
/* Elevation / shadows */
--shadow-1: 0 6px 14px rgba(7,10,20,0.06);
--shadow-2: 0 12px 30px rgba(7,10,20,0.10);
--shadow-3: 0 20px 60px rgba(7,10,20,0.16);
--shadow-inset: inset 0 1px 0 rgba(255,255,255,0.03);
/* Sizes & layout */
--control-height: 48px;
--control-height-sm: 40px;
--form-gap: 12px;
/* Motion & timing */
--ease: cubic-bezier(.16,1,.3,1);
--duration-fast: 160ms;
--duration-base: 280ms;
--duration-slow: 560ms;
/* Focus & accessibility */
--focus-ring: 4px;
--focus-color: color-mix(in srgb, var(--accent) 28%, white 72%);
/* Utility */
--ui-border: 1px solid var(--border-light);
/* z-index layers */
--z-toast: 7000;
--z-modal: 8000;
--z-topbar: 6000;
}
body[data-theme="crimson"], body:not([data-theme]) {
--color-60: #ffffff;
--color-30: #0b1220;
--color-10: #dc2626;
--font-primary: 'Exo', var(--font-primary);
--font-secondary: 'Inter', var(--font-secondary);
--font-tertiary: 'Space Mono', var(--font-tertiary);
}
/* -------------------------
GLOBAL RESET & DEFAULTS
- add robust base so consumers don't need to repeat
------------------------- */
*,
*::before,
*::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 16px; }
body {
margin: 0; padding: 0; min-height: 100vh; background: var(--bg-canvas);
color: var(--text-main); font-family: var(--font-secondary); line-height: 1.45;
-webkit-tap-highlight-color: transparent; -webkit-font-smoothing:antialiased;
text-rendering: optimizeLegibility; -moz-osx-font-smoothing:grayscale;
}
/* sensible base typography */
h1, .h1 { font-family: var(--font-primary); font-size: clamp(20px, 3vw, 34px); margin: 0 0 8px; font-weight: 800; line-height: 1.02; letter-spacing: -0.6px; }
h2, .h2 { font-family: var(--font-primary); font-size: clamp(18px, 2.6vw, 22px); margin: 0 0 6px; font-weight: 700; }
h3, .h3 { font-family: var(--font-primary); font-size: 16px; margin: 0 0 6px; font-weight: 700; }
p, .p { margin: 0 0 12px; color: var(--text-main); font-size: 14px; }
/* lists and small elements */
ul, ol { margin: 0 0 12px 20px; padding: 0; color: var(--text-main); }
small { font-size: 12px; color: var(--text-muted); }
/* links */
a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
a:hover, a:focus { color: var(--accent-strong); text-decoration: underline; }
/* images and media */
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
/* form elements reset */
input, textarea, select, button { font-family: inherit; font-size: 14px; }
/* utility container & grid */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }
/* panels */
.panel {
background: var(--bg-panel);
border-radius: var(--radius-md);
padding: 18px;
box-shadow: var(--shadow-1);
border: var(--ui-border);
}
/* small utility spacing helpers */
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mb-8 { margin-bottom: 8px; }
/* -------------------------
BUTTON SYSTEM (5 types)
- base .btn1 and variants
- keyboard accessible, focus-visible, active states
------------------------- */
/* Base button */
.btn1{
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
height: var(--control-height); padding: 0 18px; min-width: 108px; border-radius: 12px;
font-weight: 700; font-size: 14px; cursor: pointer; user-select: none; position: relative;
white-space: nowrap; border: 1px solid transparent; transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), opacity var(--duration-fast);
background: transparent; color: var(--text-main);
}
/* keyboard focus visible */
.btn1:focus-visible{
outline: none;
box-shadow: 0 0 0 var(--focus-ring) var(--focus-color);
transform: none;
}
/* ACTIVE / DISABLED states */
.btn1:active{ transform: translateY(1px) scale(.995); transition-duration: var(--duration-fast); }
.btn1[disabled], .btn1.is-disabled{ opacity: .5; pointer-events: none; transform: none; }
/* 1) Bordered (no bg) */
.btn1--border {
background: transparent; border: 1.5px solid color-mix(in srgb, var(--text-main) 8%, transparent); color: var(--text-main);
}
.btn1--border:hover{ transform: translateY(-3px); box-shadow: var(--shadow-1); }
/* 2) Filled (with background) */
.btn1--filled {
background: linear-gradient(180deg, color-mix(in srgb, var(--color-30) 12%, var(--color-60) 88%), var(--color-30));
color: color-contrast(var(--color-30) vs #fff, #fff); border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 10px 30px rgba(2,6,23,0.10);
}
.btn1--filled:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }
/* 3) CTA (animated with shimmer/shine) */
.btn1--cta {
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, black 10%));
color: #fff; border: none; box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 18%, black 85%);
overflow: hidden; border-radius: 14px; padding: 0 22px; height: 52px; font-size: 15px;
will-change: transform, box-shadow;
}
.btn1--cta:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 26px 64px color-mix(in srgb, var(--accent) 20%, black 80%); }
/* shimmer shine */
.btn1--cta::after{
content: ""; position: absolute; left: -70%; top: 0; height: 100%; width: 70%; transform: skewX(-20deg);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
transition: left var(--duration-slow) var(--ease);
pointer-events: none; opacity: 0.95;
}
.btn1--cta:hover::after{ left: 120%; transition: left 700ms var(--ease); }
/* optional CTA micro-pulse via data attribute */
.btn1--cta[data-anim="pulse"]{ animation: ctaPulse 2.6s ease-in-out infinite; }
@keyframes ctaPulse {
0% { transform: translateY(0); box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 12%, black 88%); }
50% { transform: translateY(-4px); box-shadow: 0 32px 80px color-mix(in srgb, var(--accent) 20%, black 80%); }
100% { transform: translateY(0); box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 12%, black 88%); }
}
/* 4) Ghost (transparent, subtle) */
.btn1--ghost {
background: transparent; color: var(--text-main); border: 1px solid transparent; padding: 0 14px; height: var(--control-height-sm);
border-radius: 10px;
}
.btn1--ghost:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); transform: translateY(-2px); }
/* 5) 3D (off-white raised) */
.btn1--3d {
background: linear-gradient(180deg, color-mix(in srgb, var(--color-60) 98%, black 2%), color-mix(in srgb, var(--color-60) 92%, black 8%));
color: var(--color-30); border: 1px solid rgba(0,0,0,0.04);
box-shadow: 0 18px 38px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn1--3d:active { transform: translateY(2px); box-shadow: 0 8px 18px rgba(2,6,23,0.06); }
/* button icon helper */
.btn1__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; margin-right: 8px; }
/* -------------------------
ICON SYSTEM: circular, no-bg default, colored and 3D uplift
------------------------- */
.icon {
display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--text-main) 8%, transparent);
background: transparent; font-size: 20px; color: var(--accent);
box-shadow: 0 12px 30px rgba(6,8,12,0.08), var(--shadow-inset);
}
.icon--sm { width: 44px; height: 44px; font-size: 16px; }
.icon--muted { color: color-mix(in srgb, var(--text-main) 45%, white 55%); }
.icon--filled {
background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, black 30%));
color: #fff; border: none; box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 12%, black 88%);
}
/* icon small label helper */
.icon-label { display: block; margin-top: 6px; font-size: 12px; color: var(--text-muted); text-align: center; }
/* -------------------------
BADGES & TAGS
------------------------- */
.badge {
display: inline-block; padding: 6px 10px; border-radius: var(--radius-pill); font-weight: 800; font-size: 12px;
background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb,var(--accent) 8%, transparent);
box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.badge--accent { background: linear-gradient(90deg,var(--accent), color-mix(in srgb,var(--accent) 60%, black 20%)); color: #fff; }
/* status tags */
.tag { display:inline-block; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; font-family: var(--font-tertiary); color: var(--text-muted); background: color-mix(in srgb,var(--color-30) 4%, var(--color-60) 96%); }
/* -------------------------
TOASTS (non-blocking notifications)
------------------------- */
.toasts {
position: fixed; right: 20px; top: 20px; display: flex; flex-direction: column; gap: 12px; z-index: var(--z-toast);
}
.toast {
min-width: 280px; padding: 12px 14px; border-radius: 10px; color: #fff; font-weight: 700; display: flex; align-items: center; gap: 10px;
box-shadow: var(--shadow-2); transform: translateY(-8px) scale(.98); opacity: 0; transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast--success { background: linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 40%, black 20%)); }
.toast--info { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.toast--warn { background: linear-gradient(90deg, #f59e0b, #fb923c); }
.toast .close { margin-left: auto; background: transparent; border: none; color: rgba(255,255,255,0.9); cursor: pointer; font-weight: 800; }
/* -------------------------
MODAL LAYER
------------------------- */
.modal-overlay {
position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(3,6,18,0.6); backdrop-filter: blur(8px); z-index: var(--z-modal);
opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
width: min(920px, 94%); max-width: 820px; border-radius: var(--radius-lg); background: var(--bg-panel);
padding: 28px; box-shadow: var(--shadow-3); transform: translateY(8vh) scale(.98); transition: transform var(--duration-base) var(--ease);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal .modal-header { display:flex; gap:12px; align-items:center; }
.modal .modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
/* -------------------------
CARDS / PANELS / LAYOUT
------------------------- */
.card { grid-column: span 4; background: var(--bg-panel); border-radius: var(--radius-md); padding: 18px; border: var(--ui-border); box-shadow: var(--shadow-1); transition: transform var(--duration-fast) var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
/* hero / stat */
.card-hero { background: radial-gradient(circle at top right, var(--accent-glow), transparent 45%), var(--bg-canvas); border: 1px solid color-mix(in srgb, var(--color-30) 6%, transparent); }
/* -------------------------
FORMS / INPUTS
------------------------- */
.form-row { display:flex; gap: var(--form-gap); align-items:center; }
.input {
height: var(--control-height); padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-light); background: transparent;
color: var(--text-main); font-size: 14px; transition: border var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.input:focus { border-color: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
/* textarea */
.textarea { min-height: 120px; padding: 12px 14px; border-radius: 12px; resize: vertical; }
/* select */
.select { height: var(--control-height); padding: 0 12px; border-radius: 10px; }
/* help text / error */
.help { font-size: 12px; color: var(--text-muted); }
.error { color: #dc2626; font-weight: 700; }
/* -------------------------
MICRO ANIMATIONS / UTILITIES
------------------------- */
.fade-in { animation: fadeIn var(--duration-base) var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.scale-up { transform-origin: center center; transition: transform var(--duration-fast) var(--ease); }
.scale-up:hover { transform: scale(1.02); }
/* subtle glass shimmer for large panels (use sparingly) */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after{
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0) 100%);
pointer-events: none; mix-blend-mode: overlay; transform: translateX(-100%); transition: transform 1.8s var(--ease);
}
.shimmer:hover::after { transform: translateX(100%); }
/* utilities */
.text-muted { color: var(--text-muted); }
.text-strong { font-weight: 800; }
.center { text-align: center; }
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
/* -------------------------
ACCESSIBILITY / PRINT
------------------------- */
:focus-visible { outline: none; }
@media print {
body { background: #fff; color: #000; }
.no-print { display: none !important; }
}
/* -------------------------
USAGE NOTES & EXAMPLES (copy into markup)
-------------------------
Buttons:
Get Started
Primary
Border
Ghost
3D
Icons:
security
bolt
Toasts (JS):
// Create element and append to .toasts container.
Modal:
// Toggle .open on .modal-overlay to show/hide.
Extending tokens:
- Create /Assets/Modules/base.ext.css and import AFTER this file.
- Do not mutate this file for one-off page styles.
-------------------------
END OF FILE (version 1.1.0)
------------------------- */