/*
* Lucidus Fortis — Unified CSS
*
* IMPORTANT: This file supplements Tailwind CSS. You MUST also load the Tailwind CDN
* (handled by lucidus-fortis.js) AND include these in your :
*
*
*
*
*
*
* For Elementor: Add the Google Fonts links and CSS/JS references in
* Appearance > Theme Editor > header.php, or use an "Insert Headers and Footers" plugin.
*/
/* ═══════════════════════════════════════════
1. CSS Custom Properties (Design Tokens)
═══════════════════════════════════════════ */
:root {
--lf-primary: #000000;
--lf-on-primary: #ffffff;
--lf-primary-container: #1b1b1b;
--lf-on-primary-container: #848484;
--lf-primary-fixed: #e2e2e2;
--lf-primary-fixed-dim: #c6c6c6;
--lf-on-primary-fixed: #1b1b1b;
--lf-on-primary-fixed-variant: #474747;
--lf-inverse-primary: #c6c6c6;
--lf-secondary: #7f5700;
--lf-on-secondary: #ffffff;
--lf-secondary-container: #feb316;
--lf-on-secondary-container: #6a4800;
--lf-secondary-fixed: #ffdead;
--lf-secondary-fixed-dim: #ffba3b;
--lf-on-secondary-fixed: #281900;
--lf-on-secondary-fixed-variant: #604100;
--lf-tertiary: #000000;
--lf-on-tertiary: #ffffff;
--lf-tertiary-container: #0f1d29;
--lf-on-tertiary-container: #778595;
--lf-tertiary-fixed: #d6e4f5;
--lf-tertiary-fixed-dim: #bac8d9;
--lf-on-tertiary-fixed: #0f1d29;
--lf-on-tertiary-fixed-variant: #3a4856;
--lf-error: #ba1a1a;
--lf-on-error: #ffffff;
--lf-error-container: #ffdad6;
--lf-on-error-container: #93000a;
--lf-background: #f8f9fa;
--lf-on-background: #191c1d;
--lf-surface: #f8f9fa;
--lf-on-surface: #191c1d;
--lf-surface-variant: #e1e3e4;
--lf-on-surface-variant: #4c4546;
--lf-surface-dim: #d9dadb;
--lf-surface-bright: #f8f9fa;
--lf-surface-container: #edeeef;
--lf-surface-container-high: #e7e8e9;
--lf-surface-container-highest: #e1e3e4;
--lf-surface-container-low: #f3f4f5;
--lf-surface-container-lowest: #ffffff;
--lf-surface-tint: #5e5e5e;
--lf-inverse-surface: #2e3132;
--lf-inverse-on-surface: #f0f1f2;
--lf-outline: #7e7576;
--lf-outline-variant: #cfc4c5;
--lf-wing-gold: #F2A900;
--lf-radius-default: 0px;
--lf-radius-lg: 0px;
--lf-radius-xl: 0px;
--lf-radius-full: 9999px;
--lf-radius-organic: 24px;
--lf-font-headline: 'Manrope', sans-serif;
--lf-font-body: 'Public Sans', sans-serif;
--lf-font-label: 'Public Sans', sans-serif;
}
/* ═══════════════════════════════════════════
2. Base Styles
═══════════════════════════════════════════ */
html {
scroll-behavior: smooth;
}
body {
font-family: var(--lf-font-body);
background-color: var(--lf-surface);
color: var(--lf-on-surface);
}
::selection {
background-color: var(--lf-secondary-container);
color: var(--lf-on-secondary-container);
}
h1, h2, h3, h4 {
font-family: var(--lf-font-headline);
}
/* ═══════════════════════════════════════════
3. Material Symbols Configuration
═══════════════════════════════════════════ */
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
display: inline-block;
line-height: 1;
}
/* ═══════════════════════════════════════════
4. Glass Navigation
═══════════════════════════════════════════ */
.glass-nav {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: rgba(248, 249, 250, 0.8);
}
/* ═══════════════════════════════════════════
5. Background Patterns & Textures
═══════════════════════════════════════════ */
.technical-grid {
background-image: radial-gradient(rgba(242, 169, 0, 0.05) 1px, transparent 1px);
background-size: 40px 40px;
}
.organic-gradient {
background:
radial-gradient(circle at top right, rgba(242, 169, 0, 0.08), transparent 40%),
radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.03), transparent 40%);
}
/* ═══════════════════════════════════════════
6. Typography Utilities
═══════════════════════════════════════════ */
.hero-text {
font-family: var(--lf-font-headline);
}
.headline {
font-family: var(--lf-font-headline);
}
.nav-item {
font-family: var(--lf-font-headline);
}
/* ═══════════════════════════════════════════
7. Form Elements
═══════════════════════════════════════════ */
button {
border-radius: 5px;
}
select {
border-radius: 5px;
}
/* ═══════════════════════════════════════════
8. Scrollbar & Overflow
═══════════════════════════════════════════ */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
html {
scrollbar-width: thin;
scrollbar-color: var(--lf-outline-variant) transparent;
}
/* ═══════════════════════════════════════════
9. Line Clamping
═══════════════════════════════════════════ */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ═══════════════════════════════════════════
10. Transitions
═══════════════════════════════════════════ */
.tonal-shift {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* ═══════════════════════════════════════════
11. Elementor Compatibility Overrides
═══════════════════════════════════════════ */
body.elementor-page {
overflow-x: hidden;
}
.elementor-widget-html {
overflow: visible !important;
}
.elementor-widget-html > .elementor-widget-container {
overflow: visible !important;
}
.elementor-section.elementor-section-stretched,
.elementor-section.elementor-section-full_width {
width: 100% !important;
max-width: 100% !important;
}
.elementor-column-gap-default {
gap: 0 !important;
}
/* Ensure Elementor canvas pages get full width */
.page-template-elementor_canvas {
overflow-x: hidden;
}
.page-template-elementor_canvas .elementor.elementor-99999 {
width: 100%;
}
/* Remove Elementor default padding that conflicts with our design */
.elementor-section-wrap > .elementor-element > .elementor-container {
max-width: 100% !important;
padding: 0 !important;
}
/* ═══════════════════════════════════════════
12. Responsive Adjustments for Elementor
═══════════════════════════════════════════ */
@media (max-width: 767px) {
.elementor-widget-html {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ═══════════════════════════════════════════
13. WordPress Overrides
═══════════════════════════════════════════ */
img {
max-width: 100%;
height: auto;
}
.entry-content img {
max-width: 100%;
}