/* =======================================================
alm_styles.css - Main Stylesheet for Aliniom
All styles prefixed with alm_ for namespace isolation
======================================================= */
/* =======================================================
CSS Variables - Theme Configuration
Controls: Global color scheme, typography, spacing
All colors use CSS variables for easy theme switching
======================================================= */
:root {
/* Brand Colors */
/*--alm-primary: #e0e0e0;*/ /*Deep Blue - Primary brand color*/
/*--alm-primary-light: #112b60;*/ /*darker gold for highlights*/
/*--alm-primary-dark: #112b60;*/ /*lighter gold for depth*/
--alm-primary: #112b60; /* Deep Blue - Primary brand color */
--alm-primary-light: #b59410; /* darker gold for highlights */
--alm-primary-dark: #d4af37; /* lighter gold for depth */
--alm-secondary: #5584d0; /*#6c757d; */ /* Grey for secondary elements */
--alm-secondary-light: #71706e;
--alm-secondary-dark: #b5b5b5;
/* Wordmark colours (see .alm-brand-ali / -ni / -om below): these match the
aliniom_dark.webp logo's arrow/lettering, the variant used on the
navy navbar in both light and dark site themes. */
--alm-brand-blue: #5584d0;
--alm-brand-silver: #b5b5b5;
--alm-brand-gold: #d4af37;
/* Status Colors */
--alm-success: #28a745; /* Green for success states */
--alm-danger: #dc3545; /* Red for errors/alerts */
--alm-warning: #ffc107; /* Yellow for warnings */
--alm-info: #17a2b8; /* Teal for information */
/* Semantic Status Colors */
--alm-pending: var(--alm-warning);
--alm-approved: var(--alm-success);
--alm-rejected: var(--alm-danger);
--alm-paid: var(--alm-success);
--alm-overdue: var(--alm-danger);
--alm-draft: var(--alm-secondary);
--alm-active: var(--alm-success);
--alm-inactive: var(--alm-secondary);
/* Base Colors - Light Mode */
--alm-white: #ffffff;
--alm-black: #000000;
--alm-gray-100: #f8f9fa;
--alm-gray-200: #e9ecef;
--alm-gray-300: #dee2e6;
--alm-gray-400: #ced4da;
--alm-gray-500: #adb5bd;
--alm-gray-600: #6c757d;
--alm-gray-700: #495057;
--alm-gray-800: #343a40;
--alm-gray-900: #212529;
/* Background Colors - Light Mode */
--alm-bg-light: var(--alm-white);
--alm-bg-light-secondary: var(--alm-gray-100);
--alm-bg-light-tertiary: var(--alm-gray-200);
/* Background Colors - Dark Mode */
/* --alm-bg-dark: #1a1a1a; */
--alm-bg-dark: #112b60;
--alm-bg-dark-secondary: #2d2d2d;
/*--alm-bg-dark-tertiary: #404040;*/
--alm-bg-dark-tertiary: #71706e;
/* Text Colors - Light Mode */
--alm-text-light: var(--alm-primary);
/*--alm-text-light: var(--alm-gray-900);*/
--alm-text-light-secondary: var(--alm-secondary-light);
/*--alm-text-light-muted: var(--alm-gray-500);*/
--alm-text-light-muted: var(--alm-text-light-secondary);
/* Text Colors - Dark Mode */
--alm-text-dark: var(--alm-secondary);
/*--alm-text-dark: var(--alm-gray-100);*/
--alm-text-dark-secondary: var(--alm-secondary-dark);
--alm-text-dark-muted: var(--alm-text-dark-secondary);
/*--alm-text-dark-muted: var(--alm-gray-500);*/
/* Border Colors */
--alm-border-light: var(--alm-gray-300);
/*--alm-border-dark: #404040;*/
--alm-border-dark: var(--alm-primary-dark);
/* Overlay Colors */
--alm-overlay-light: rgba(0, 0, 0, 0.5);
--alm-overlay-dark: rgba(0, 0, 0, 0.7);
/* Theme Switch Colors */
--alm-switch-bg-light: #e0e0e0;
--alm-switch-bg-dark: #2d2d2d;
--alm-switch-slider-light: #b5b5b5 /*var(--alm-white)*/;
--alm-switch-slider-dark: #3d3d3d;
--alm-switch-icon-light: #ffa726;
--alm-switch-icon-dark: #ffd54f;
/* Shadow Colors */
--alm-shadow-color: rgba(0, 0, 0, 0.1);
--alm-shadow-color-dark: rgba(0, 0, 0, 0.3);
--alm-shadow-color-light: rgba(0, 0, 0, 0.12);
/* Spacing */
--alm-spacing-xs: 0.25rem;
--alm-spacing-sm: 0.5rem;
--alm-spacing-md: 1rem;
--alm-spacing-lg: 1.5rem;
--alm-spacing-xl: 2rem;
--alm-spacing-xxl: 3rem;
/* Typography */
--alm-font-primary: 'Aptos', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--alm-font-secondary: 'Aptos', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--alm-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
/* Font Sizes */
--alm-font-xs: 0.75rem; /* 12px */
--alm-font-sm: 0.875rem; /* 14px */
--alm-font-md: 1rem; /* 16px */
--alm-font-lg: 1.125rem; /* 18px */
--alm-font-xl: 1.25rem; /* 20px */
--alm-font-xxl: 1.5rem; /* 24px */
--alm-font-xxxl: 2rem; /* 32px */
/* Border Radius */
--alm-radius-sm: 4px;
--alm-radius-md: 8px;
--alm-radius-lg: 12px;
--alm-radius-xl: 16px;
/* Shadows */
--alm-shadow-sm: 0 1px 3px var(--alm-shadow-color-light);
--alm-shadow-md: 0 4px 6px var(--alm-shadow-color);
--alm-shadow-lg: 0 10px 25px var(--alm-shadow-color);
--alm-shadow-xl: 0 20px 40px var(--alm-shadow-color-dark);
/* Transitions */
--alm-transition: all 0.3s ease;
--alm-transition-fast: all 0.15s ease;
--alm-transition-slow: all 0.5s ease;
/* Z-index layers */
--alm-z-dropdown: 1000;
--alm-z-sticky: 1020;
--alm-z-fixed: 1030;
--alm-z-modal-backdrop: 1040;
--alm-z-modal: 1050;
--alm-z-popover: 1060;
--alm-z-tooltip: 1070;
--alm-z-header: 1000;
}
/* =======================================================
Dark Mode Variables
Applied when body has alm-dark class
======================================================= */
body.alm-dark {
/*--alm-bg-primary: var(--alm-bg-dark);*/ /*used in main body*/
--alm-bg-primary: var(--alm-bg-dark); /*used in main body*/
--alm-bg-secondary: var(--alm-bg-dark-secondary);
/*--alm-bg-tertiary: var(--alm-bg-dark-tertiary);*/ /*used in footer*/
--alm-bg-tertiary: var(--alm-bg-dark-tertiary); /*used in footer*/
--alm-text-primary: var(--alm-text-dark);
--alm-text-secondary: var(--alm-text-dark-secondary);
--alm-text-muted: var(--alm-text-dark-muted);
/*--alm-border: var(--alm-border-dark);*/ /*container border */
--alm-border: var(--alm-border-dark); /*container border */
--alm-overlay: var(--alm-overlay-dark);
}
/* Light Mode (default) */
body:not(.alm-dark) {
--alm-bg-primary: var(--alm-bg-light);
--alm-bg-secondary: var(--alm-bg-light-secondary);
--alm-bg-tertiary: var(--alm-bg-light-tertiary);
--alm-text-primary: var(--alm-text-light);
--alm-text-secondary: var(--alm-text-light-secondary);
--alm-text-muted: var(--alm-text-light-muted);
--alm-border: var(--alm-border-light);
--alm-overlay: var(--alm-overlay-light);
}
/* =======================================================
Base Styles
======================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--alm-font-primary);
font-size: var(--alm-font-md);
/*line-height: 1.6;*/
line-height: 1.3;
color: var(--alm-text-primary);
background-color: var(--alm-bg-primary);
transition: background-color 0.3s ease, color 0.3s ease;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* =======================================================
Typography
======================================================= */
.alm-h1 {
font-size: var(--alm-font-xxxl);
font-weight: 700;
margin-bottom: var(--alm-spacing-lg);
/* color: var(--alm-primary); */
color: var(--alm-text-primary);
}
.alm-h2 {
font-size: var(--alm-font-xxl);
font-weight: 600;
margin-bottom: var(--alm-spacing-md);
color: var(--alm-primary-dark);
}
.alm-h3 {
font-size: var(--alm-font-xl);
font-weight: 600;
margin-bottom: var(--alm-spacing-sm);
}
.alm-h4 {
font-size: var(--alm-font-lg);
font-weight: 600;
margin-bottom: var(--alm-spacing-sm);
}
.alm-h5 {
font-size: var(--alm-font-md);
font-weight: 600;
margin-bottom: var(--alm-spacing-xs);
}
.alm-h6 {
font-size: var(--alm-font-sm);
font-weight: 600;
margin-bottom: var(--alm-spacing-xs);
}
.alm-text-primary {
color: var(--alm-text-primary);
}
.alm-text-secondary {
color: var(--alm-text-secondary);
}
.alm-text-muted {
color: var(--alm-text-muted);
}
.alm-text-success {
color: var(--alm-success);
}
.alm-text-danger {
color: var(--alm-danger);
}
.alm-text-warning {
color: var(--alm-warning);
}
.alm-text-info {
color: var(--alm-info);
}
.alm-text-center {
text-align: center;
}
.alm-text-left {
text-align: left;
}
.alm-text-right {
text-align: right;
}
/* =======================================================
Links
======================================================= */
.alm-link {
color: var(--alm-primary);
text-decoration: none;
transition: var(--alm-transition-fast);
}
.alm-link:hover {
color: var(--alm-primary-dark);
text-decoration: underline;
}
.alm-link:visited {
color: var(--alm-primary);
}
/* =======================================================
Layout Components
======================================================= */
.alm-container {
/*max-width: 1200px;*/
max-width: 90vw;
margin: 0 auto;
/*padding: 0 var(--alm-spacing-lg);*/
padding: 0 ;
}
.alm-container-fluid {
width: 100%;
/*padding: 0 var(--alm-spacing-lg);*/
padding: 0 ;
}
.alm-locktight {
/*max-width: 1400px;*/
margin: 0 auto;
/*padding: var(--alm-spacing-lg) var(--alm-spacing-xl);*/
background-color: var(--alm-primary);
}
.alm-row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(-1 * var(--alm-spacing-sm));
}
.alm-col {
flex: 1 0 0%;
padding: 0 var(--alm-spacing-sm);
}
/* Column widths */
.alm-col-1 {
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.alm-col-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.alm-col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.alm-col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.alm-col-5 {
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.alm-col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.alm-col-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.alm-col-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.alm-col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.alm-col-10 {
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.alm-col-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.alm-col-12 {
flex: 0 0 100%;
max-width: 100%;
}
/* .alm-form-row is the wrapper name used by the client add/edit forms
(alm_client_add.php, the client edit modal) to lay .alm-col-N fields
out side by side — but the class itself had no rule anywhere in this
file, so .alm-col-6's flex: 0 0 50% never had a flex container to
apply within and every "row" rendered as stacked, full-width fields
instead of two columns. Same treatment as .alm-row/.alm-col above,
with the gutter padding scoped to columns inside a form row
specifically, rather than changing .alm-col-N globally. */
.alm-form-row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(-1 * var(--alm-spacing-sm));
}
.alm-form-row > [class*="alm-col-"] {
padding: 0 var(--alm-spacing-sm);
}
/* Grid gaps */
.alm-gap-0 {
gap: 0;
}
.alm-gap-1 {
gap: var(--alm-spacing-xs);
}
.alm-gap-2 {
gap: var(--alm-spacing-sm);
}
.alm-gap-3 {
gap: var(--alm-spacing-md);
}
.alm-gap-4 {
gap: var(--alm-spacing-lg);
}
.alm-gap-5 {
gap: var(--alm-spacing-xl);
}
/* =======================================================
Fixed Header Styles
Header that stays at top when scrolling
======================================================= */
.alm-header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--alm-z-header);
background-color: var(--alm-bg-primary);
box-shadow: var(--alm-shadow-md);
transition: background-color 0.3s ease;
}
/* Adjust locktight size for fixed header */
.alm-header-fixed .alm-locktight,
.alm-header-static .alm-locktight {
padding: var(--alm-spacing-sm) var(--alm-spacing-lg);
}
/* =======================================================
Static (non-fixed) Header variant
Used on staff pages: the same header content (login details,
user bar, nav menu) as .alm-header-fixed, but left in normal
document flow so it scrolls away with the page instead of
staying pinned — unlike the public-facing pages, which keep
the fixed header. Cancels .alm-navbar's position:sticky (set
for the fixed variant, see Navigation Bar section below) so the
whole header scrolls as one block rather than the nav row
re-sticking on its own partway down. The adjacent-sibling rule
removes .alm-main's fixed-header compensation margin, since
it's no longer needed once the header is back in normal flow. */
.alm-header-static {
position: static;
background-color: var(--alm-bg-primary);
box-shadow: var(--alm-shadow-md);
transition: background-color 0.3s ease;
}
.alm-header-static .alm-navbar {
position: static;
top: auto;
}
.alm-header-static + .alm-main {
margin-top: 0;
}
/* Header top section for theme switch */
.alm-header-top {
display: flex;
justify-content: flex-end;
margin-bottom: var(--alm-spacing-sm);
}
/* =======================================================
Navigation Bar
======================================================= */
.alm-navbar {
background-color: var(--alm-primary);
color: var(--alm-white);
/* padding: var(--alm-spacing-md) var(--alm-spacing-lg); */
display: flex;
justify-content: space-between;
align-items: center;
/* box-shadow: var(--alm-shadow-md); */
position: sticky;
top: 0;
z-index: var(--alm-z-sticky);
}
.alm-navbar-brand {
display: flex;
align-items: center;
gap: var(--alm-spacing-sm);
}
.alm-navbar-logo {
height: 40px;
width: auto;
/* border-radius: 15%; */
border-bottom-left-radius: 25% ;
border-bottom-right-radius: 25% ;
border-top-left-radius: 50% ;
border-top-right-radius: 50% ;
}
.alm-navbar-title {
/*font-size: var(--alm-font-xxl);*/
font-size: var(--alm-font-xxl);
font-weight: 600;
text-decoration: none;
letter-spacing: 0.02em;
}
/* Wordmark lettering, split to match the logo graphic: the ALI in the
stylised A's blue swoosh, the NI in silver-grey, the OM in gold.
The navbar background is always navy (see .alm-locktight), so the same
three colours are used in both light and dark site themes — they're
already the pairing designed for a navy background (aliniom_dark.webp). */
.alm-brand-ali {
color: var(--alm-brand-blue);
}
.alm-brand-ni {
color: var(--alm-brand-silver);
}
.alm-brand-om {
color: var(--alm-brand-gold);
}
/* "The Name" reveal — homepage hero only (see index.php).
ALI / NI / OM = Latin "aliquid / nihil / omnia" (something / nothing /
everything). A single one-shot fade-and-rise on page load, staggered
per syllable, then the payoff line follows — deliberately not a loop
or a bounce/flashy effect, and it's off entirely for anyone with
prefers-reduced-motion set. */
.alm-origin {
text-align: center;
max-width: 640px;
margin: var(--alm-spacing-xl) auto 0;
padding-top: var(--alm-spacing-lg);
border-top: 1px solid var(--alm-border);
}
.alm-origin-label {
font-size: var(--alm-font-xs);
letter-spacing: 3px;
text-transform: uppercase;
color: var(--alm-text-muted);
margin-bottom: var(--alm-spacing-sm);
}
.alm-origin-intro {
font-size: var(--alm-font-sm);
color: var(--alm-text-secondary);
margin-bottom: var(--alm-spacing-lg);
}
.alm-origin-syllables {
display: flex;
justify-content: center;
align-items: flex-start;
gap: var(--alm-spacing-xl);
flex-wrap: wrap;
margin-bottom: var(--alm-spacing-md);
}
.alm-origin-syl {
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
transform: translateY(14px);
animation: almOriginFade 0.6s ease forwards;
animation-delay: calc(0.18s * var(--d, 0) + 0.15s);
}
.alm-origin-syl .alm-origin-latin {
font-size: var(--alm-font-xl);
font-weight: 500;
font-style: italic;
letter-spacing: 0.3px;
color: var(--alm-text-primary);
}
.alm-origin-syl .alm-origin-latin b {
font-style: normal;
font-weight: 800;
}
.alm-origin-syl .alm-origin-word {
font-size: var(--alm-font-xs);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--alm-text-secondary);
margin-top: var(--alm-spacing-xs);
}
.alm-origin-line {
font-size: var(--alm-font-md);
color: var(--alm-text-secondary);
opacity: 0;
transform: translateY(10px);
animation: almOriginFade 0.7s ease forwards;
animation-delay: 0.85s;
}
.alm-origin-line b {
font-weight: 700;
}
@keyframes almOriginFade {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.alm-origin-syl,
.alm-origin-line {
animation: none;
opacity: 1;
transform: none;
}
}
@media (max-width: 480px) {
.alm-origin-syllables {
gap: var(--alm-spacing-lg);
}
.alm-origin-syl .alm-origin-latin {
font-size: var(--alm-font-lg);
}
}
.alm-navbar-menu {
display: flex;
flex: 1 1 auto;
justify-content: flex-end;
gap: var(--alm-spacing-md);
align-items: center;
margin-right: var(--alm-spacing-md);
}
/* Wraps the theme switch and (on small screens) the hamburger toggle, so
they stay pinned to the right of the header regardless of whether the
nav-link list is shown inline or collapsed behind the toggle. */
.alm-navbar-actions {
display: flex;
align-items: center;
gap: var(--alm-spacing-md);
flex-shrink: 0;
}
/* Hamburger menu toggle - hidden by default, only shown at the mobile
breakpoint (see @media rule below). A plain button styled as three
bars, matching the theme switch's icon size roughly, so the two sit
comfortably side by side in the header on small screens. */
.alm-navbar-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
}
.alm-navbar-toggle-bar {
display: block;
width: 22px;
height: 2px;
background-color: var(--alm-white);
border-radius: 2px;
transition: var(--alm-transition-fast);
}
/* Animate into an "X" when the mobile menu is open, so the toggle
itself signals open/closed state without extra text. */
.alm-navbar-toggle.is-open .alm-navbar-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.alm-navbar-toggle.is-open .alm-navbar-toggle-bar:nth-child(2) {
opacity: 0;
}
.alm-navbar-toggle.is-open .alm-navbar-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.alm-navbar-item {
color: rgba(212, 175, 55, 0.9);
text-decoration: none;
padding: var(--alm-spacing-xs) var(--alm-spacing-sm);
border-radius: var(--alm-radius-sm);
transition: var(--alm-transition-fast);
}
.alm-navbar-item:hover {
/*color: var(--alm-white);*/
color: var(--alm-primary-light);
/*background-color: rgba(255, 255, 255, 0.1);*/
background-color: rgba(85,132,208, 0.35);
}
.alm-navbar-item.active {
color: var(--alm-white);
background-color: rgba(255, 255, 255, 0.3);
font-weight: 600;
}
.alm-navbar-dropdown {
position: relative;
display: inline-block;
}
.alm-navbar-dropdown-content {
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: var(--alm-bg-primary);
min-width: 200px;
box-shadow: var(--alm-shadow-lg);
border-radius: var(--alm-radius-sm);
z-index: var(--alm-z-dropdown);
border: 1px solid var(--alm-border);
}
.alm-navbar-dropdown:hover .alm-navbar-dropdown-content {
display: block;
}
.alm-navbar-dropdown-item {
color: var(--alm-text-primary);
padding: var(--alm-spacing-sm) var(--alm-spacing-md);
text-decoration: none;
display: block;
transition: var(--alm-transition-fast);
border-bottom: 1px solid var(--alm-border);
}
.alm-navbar-dropdown-item:last-child {
border-bottom: none;
}
.alm-navbar-dropdown-item:hover {
background-color: var(--alm-bg-tertiary);
color: var(--alm-primary);
}
/* =======================================================
User Info Bar (Staff area)
======================================================= */
.alm-userbar {
background-color: var(--alm-primary-dark);
color: var(--alm-white);
padding: var(--alm-spacing-sm) var(--alm-spacing-lg);
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--alm-font-sm);
}
.alm-userbar-info {
display: flex;
gap: var(--alm-spacing-md);
align-items: center;
}
.alm-userbar-greeting {
font-weight: 600;
}
.alm-userbar-actions {
display: flex;
gap: var(--alm-spacing-sm);
}
.alm-userbar-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--alm-white);
padding: var(--alm-spacing-xs) var(--alm-spacing-sm);
border-radius: var(--alm-radius-sm);
cursor: pointer;
transition: var(--alm-transition-fast);
text-decoration: none;
font-size: var(--alm-font-sm);
}
.alm-userbar-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
/* =======================================================
Main Content Area
Includes margin-top to account for fixed header
======================================================= */
.alm-main {
flex: 1;
padding: var(--alm-spacing-xl) 0;
/*margin-top: 140px;*/ /* Adjust based on header height */
margin-top: 31px; /* Adjust based on header height */
}
/* =======================================================
Footer
======================================================= */
.alm-footer {
background-color: var(--alm-bg-tertiary);
color: var(--alm-text-secondary);
padding: var(--alm-spacing-lg) 0;
margin-top: auto;
border-top: 1px solid var(--alm-border);
}
.alm-footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--alm-spacing-lg);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--alm-spacing-md);
}
.alm-footer-links {
display: flex;
gap: var(--alm-spacing-md);
flex-wrap: wrap;
}
.alm-footer-link {
color: var(--alm-text-secondary);
text-decoration: none;
font-size: var(--alm-font-sm);
}
.alm-footer-link:hover {
color: var(--alm-primary);
}
/* =======================================================
Cards
======================================================= */
.alm-card {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-lg);
box-shadow: var(--alm-shadow-sm);
transition: var(--alm-transition);
}
.alm-card:hover {
box-shadow: var(--alm-shadow-md);
}
.alm-card-header {
border-bottom: 1px solid var(--alm-border);
padding-bottom: var(--alm-spacing-sm);
margin-bottom: var(--alm-spacing-md);
font-weight: 600;
color: var(--alm-primary);
}
.alm-card-footer {
border-top: 1px solid var(--alm-border);
padding-top: var(--alm-spacing-sm);
margin-top: var(--alm-spacing-md);
}
/* =======================================================
Forms
======================================================= */
.alm-form-group {
margin-bottom: var(--alm-spacing-md);
}
.alm-form-label {
display: block;
margin-bottom: var(--alm-spacing-xs);
font-weight: 600;
color: var(--alm-text-primary);
font-size: var(--alm-font-sm);
}
.alm-form-control {
width: 100%;
padding: var(--alm-spacing-sm) var(--alm-spacing-md);
font-size: var(--alm-font-md);
font-family: var(--alm-font-primary);
color: var(--alm-text-primary);
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
transition: var(--alm-transition-fast);
}
.alm-form-control:focus {
outline: none;
border-color: var(--alm-primary);
box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}
.alm-form-control.error {
border-color: var(--alm-danger);
}
.alm-form-control.error:focus {
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}
.alm-form-textarea {
min-height: 100px;
resize: vertical;
}
.alm-form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23212529' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--alm-spacing-sm) center;
background-size: 16px;
padding-right: calc(var(--alm-spacing-md) * 2);
}
.alm-form-check {
display: flex;
align-items: center;
gap: var(--alm-spacing-xs);
cursor: pointer;
}
.alm-form-check-input {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--alm-primary);
}
.alm-form-check-label {
cursor: pointer;
user-select: none;
}
.alm-form-radio-group {
display: flex;
gap: var(--alm-spacing-md);
flex-wrap: wrap;
}
.alm-form-radio {
display: flex;
align-items: center;
gap: var(--alm-spacing-xs);
cursor: pointer;
}
.alm-form-radio-input {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--alm-primary);
}
.alm-form-help {
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
margin-top: var(--alm-spacing-xs);
}
.alm-form-error {
font-size: var(--alm-font-xs);
color: var(--alm-danger);
margin-top: var(--alm-spacing-xs);
}
/* =======================================================
Buttons
======================================================= */
.alm-btn {
display: inline-block;
padding: var(--alm-spacing-sm) var(--alm-spacing-lg);
font-size: var(--alm-font-md);
font-weight: 600;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--alm-radius-sm);
cursor: pointer;
transition: var(--alm-transition-fast);
line-height: 1.5;
margin-top:1.5rem;
}
.alm-btn-primary {
/*background-color: var(--alm-primary);*/
background-color: var(--alm-text-primary);
color: var(--alm-white);
}
.alm-btn-primary:hover {
background-color: var(--alm-primary-dark);
color: var(--alm-white);
text-decoration: none;
}
.alm-btn-secondary {
background-color: var(--alm-secondary);
color: var(--alm-white);
}
.alm-btn-secondary:hover {
background-color: var(--alm-gray-700);
color: var(--alm-white);
}
.alm-btn-success {
background-color: var(--alm-success);
color: var(--alm-white);
}
.alm-btn-success:hover {
background-color: #218838;
color: var(--alm-white);
}
.alm-btn-danger {
background-color: var(--alm-danger);
color: var(--alm-white);
}
.alm-btn-danger:hover {
background-color: #c82333;
color: var(--alm-white);
}
.alm-btn-warning {
background-color: var(--alm-warning);
color: var(--alm-gray-900);
}
.alm-btn-warning:hover {
background-color: #e0a800;
color: var(--alm-gray-900);
}
.alm-btn-info {
background-color: var(--alm-info);
color: var(--alm-white);
}
.alm-btn-info:hover {
background-color: #138496;
color: var(--alm-white);
}
.alm-btn-outline {
background-color: transparent;
border: 1px solid var(--alm-primary);
color: var(--alm-primary);
}
.alm-btn-outline:hover {
background-color: var(--alm-primary);
color: var(--alm-white);
}
.alm-btn-sm {
padding: var(--alm-spacing-xs) var(--alm-spacing-sm);
font-size: var(--alm-font-sm);
}
.alm-btn-lg {
padding: var(--alm-spacing-md) var(--alm-spacing-xl);
font-size: var(--alm-font-lg);
}
.alm-btn-block {
display: block;
width: 100%;
}
.alm-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* =======================================================
Tables
======================================================= */
.alm-table-container {
overflow-x: auto;
margin-bottom: var(--alm-spacing-lg);
border-radius: var(--alm-radius-md);
border: 1px solid var(--alm-border);
}
.alm-table {
width: 100%;
border-collapse: collapse;
background-color: var(--alm-bg-primary);
font-size: var(--alm-font-sm);
}
.alm-table th {
background-color: var(--alm-bg-tertiary);
padding: var(--alm-spacing-sm) var(--alm-spacing-md);
text-align: left;
font-weight: 600;
color: var(--alm-text-primary);
border-bottom: 2px solid var(--alm-border);
white-space: nowrap;
}
.alm-table td {
padding: var(--alm-spacing-sm) var(--alm-spacing-md);
border-bottom: 1px solid var(--alm-border);
color: var(--alm-text-primary);
}
.alm-table tbody tr:hover {
background-color: var(--alm-bg-secondary);
}
.alm-table-striped tbody tr:nth-child(even) {
background-color: var(--alm-bg-secondary);
}
.alm-table-bordered th,
.alm-table-bordered td {
border: 1px solid var(--alm-border);
}
.alm-table-sm th,
.alm-table-sm td {
padding: var(--alm-spacing-xs) var(--alm-spacing-sm);
}
/* Status badges in tables */
.alm-status-badge {
display: inline-block;
padding: var(--alm-spacing-xs) var(--alm-spacing-sm);
border-radius: var(--alm-radius-sm);
font-size: var(--alm-font-xs);
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.alm-status-badge.alm-status-pending {
background-color: var(--alm-pending);
color: var(--alm-gray-900);
}
.alm-status-badge.alm-status-approved {
background-color: var(--alm-approved);
color: var(--alm-white);
}
.alm-status-badge.alm-status-rejected {
background-color: var(--alm-rejected);
color: var(--alm-white);
}
.alm-status-badge.alm-status-paid {
background-color: var(--alm-paid);
color: var(--alm-white);
}
.alm-status-badge.alm-status-overdue {
background-color: var(--alm-overdue);
color: var(--alm-white);
}
.alm-status-badge.alm-status-draft {
background-color: var(--alm-draft);
color: var(--alm-white);
}
.alm-status-badge.alm-status-active {
background-color: var(--alm-active);
color: var(--alm-white);
}
.alm-status-badge.alm-status-inactive {
background-color: var(--alm-inactive);
color: var(--alm-white);
}
/* =======================================================
Alerts / Messages
======================================================= */
.alm-alert {
padding: var(--alm-spacing-md) var(--alm-spacing-lg);
border-radius: var(--alm-radius-sm);
margin-bottom: var(--alm-spacing-lg);
border: 1px solid transparent;
position: relative;
}
.alm-alert-success {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.alm-alert-danger {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
.alm-alert-warning {
background-color: #fff3cd;
border-color: #ffeaa7;
color: #856404;
}
.alm-alert-info {
background-color: #d1ecf1;
border-color: #bee5eb;
color: #0c5460;
}
.alm-alert-close {
position: absolute;
top: var(--alm-spacing-md);
right: var(--alm-spacing-md);
background: transparent;
border: none;
font-size: var(--alm-font-xl);
cursor: pointer;
color: inherit;
opacity: 0.5;
}
.alm-alert-close:hover {
opacity: 1;
}
/* =======================================================
Modals
======================================================= */
.alm-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--alm-overlay);
z-index: var(--alm-z-modal-backdrop);
align-items: center;
justify-content: center;
}
.alm-modal {
display: none;
/* header/body/footer stack vertically; without this the modal's
default flex-direction: row would lay them out side by side once
.open switches display to flex below. */
flex-direction: column;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--alm-bg-primary);
border-radius: var(--alm-radius-lg);
box-shadow: var(--alm-shadow-xl);
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
z-index: var(--alm-z-modal);
}
.alm-modal.open,
.alm-modal-overlay.open {
display: flex;
}
/* Larger variant for content-heavy modals (e.g. the client
view/edit modals, with tabbed sections and two-column form
rows) — the default 500px is sized for short confirmation
dialogs. */
.alm-modal.alm-modal-lg {
max-width: 800px;
}
/* Stacks a modal above another already-open one (e.g. the Save
changes? confirmation popping up on top of the Edit modal). */
.alm-modal-overlay.alm-modal-overlay-top {
z-index: calc(var(--alm-z-modal-backdrop) + 10);
}
.alm-modal.alm-modal-top {
z-index: calc(var(--alm-z-modal) + 10);
}
.alm-modal-header {
padding: var(--alm-spacing-lg);
border-bottom: 1px solid var(--alm-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.alm-modal-title {
font-size: var(--alm-font-xl);
font-weight: 600;
margin: 0;
}
.alm-modal-close {
background: transparent;
border: none;
font-size: var(--alm-font-xxl);
cursor: pointer;
color: var(--alm-text-muted);
line-height: 1;
}
.alm-modal-close:hover {
color: var(--alm-text-primary);
}
.alm-modal-body {
padding: var(--alm-spacing-lg);
}
.alm-modal-footer {
padding: var(--alm-spacing-lg);
border-top: 1px solid var(--alm-border);
display: flex;
justify-content: flex-end;
gap: var(--alm-spacing-sm);
}
/* Groups the prev/next navigation and the close (×) button on the
right side of a modal header, so .alm-modal-header keeps its
existing two-child space-between layout (title on the left, this
group on the right) rather than needing a three-column rework. */
.alm-modal-header-actions {
display: flex;
align-items: center;
gap: var(--alm-spacing-md);
flex-shrink: 0;
}
.alm-modal-nav {
display: flex;
align-items: center;
gap: var(--alm-spacing-xs);
}
.alm-modal-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
background: transparent;
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
color: var(--alm-text-primary);
cursor: pointer;
font-size: var(--alm-font-md);
line-height: 1;
transition: var(--alm-transition-fast);
}
.alm-modal-nav-btn:hover:not(:disabled) {
border-color: var(--alm-primary);
color: var(--alm-primary);
}
.alm-modal-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.alm-modal-nav-position {
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
white-space: nowrap;
}
/* Read-only label/value rows used in the client View modal's
Contact / Address / Payment Terms / Notes sections. */
.alm-detail-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--alm-spacing-sm);
padding: var(--alm-spacing-sm) 0;
border-bottom: 1px solid var(--alm-border);
}
.alm-detail-row:last-child {
border-bottom: none;
}
.alm-detail-label {
color: var(--alm-text-muted);
font-weight: 600;
font-size: var(--alm-font-sm);
}
.alm-detail-value {
color: var(--alm-text-primary);
text-align: right;
overflow-wrap: anywhere;
}
.alm-detail-value.alm-detail-value-block {
flex-basis: 100%;
text-align: left;
white-space: pre-line;
}
.alm-modal-loading {
padding: var(--alm-spacing-xl);
text-align: center;
color: var(--alm-text-muted);
}
/* =======================================================
Dropzone (File Upload)
======================================================= */
.alm-dropzone {
border: 2px dashed var(--alm-primary);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-xl);
text-align: center;
cursor: pointer;
transition: var(--alm-transition);
background-color: var(--alm-bg-secondary);
margin-bottom: var(--alm-spacing-md);
}
.alm-dropzone:hover,
.alm-dropzone.alm-dragover {
background-color: rgba(0, 86, 179, 0.05);
border-color: var(--alm-primary-dark);
}
.alm-dropzone-icon {
font-size: 3rem;
margin-bottom: var(--alm-spacing-md);
color: var(--alm-primary);
}
.alm-dropzone-text {
color: var(--alm-text-secondary);
margin: 0;
}
.alm-file-preview {
display: flex;
flex-wrap: wrap;
gap: var(--alm-spacing-sm);
margin-top: var(--alm-spacing-md);
}
.alm-file-preview-item {
position: relative;
width: 150px;
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
overflow: hidden;
background-color: var(--alm-bg-primary);
}
.alm-file-preview-image {
width: 100%;
height: 120px;
object-fit: cover;
}
.alm-file-preview-info {
padding: var(--alm-spacing-xs);
font-size: var(--alm-font-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: var(--alm-bg-tertiary);
}
.alm-file-preview-remove {
position: absolute;
top: 5px;
right: 5px;
background: var(--alm-danger);
color: var(--alm-white);
border: none;
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--alm-font-sm);
line-height: 1;
}
.alm-file-preview-remove:hover {
background-color: #c82333;
}
/* =======================================================
Progress Bars
======================================================= */
.alm-progress {
background-color: var(--alm-bg-tertiary);
border-radius: var(--alm-radius-sm);
height: 20px;
overflow: hidden;
margin-bottom: var(--alm-spacing-sm);
}
.alm-progress-bar {
height: 100%;
background-color: var(--alm-primary);
transition: width 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--alm-font-xs);
color: var(--alm-white);
}
.alm-progress-bar-success {
background-color: var(--alm-success);
}
.alm-progress-bar-danger {
background-color: var(--alm-danger);
}
.alm-progress-bar-warning {
background-color: var(--alm-warning);
color: var(--alm-gray-900);
}
/* =======================================================
Tabs
======================================================= */
.alm-tabs {
display: flex;
border-bottom: 1px solid var(--alm-border);
margin-bottom: var(--alm-spacing-lg);
flex-wrap: wrap;
gap: var(--alm-spacing-xs);
}
.alm-tab {
padding: var(--alm-spacing-sm) var(--alm-spacing-lg);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: var(--alm-font-md);
color: var(--alm-text-secondary);
transition: var(--alm-transition-fast);
}
.alm-tab:hover {
color: var(--alm-primary);
}
.alm-tab.active {
color: var(--alm-primary);
border-bottom-color: var(--alm-primary);
font-weight: 600;
}
/* --alm-primary is the constant brand navy (not theme-swapped), which
reads fine on the light theme's near-white modal/card background
but is nearly invisible against the dark theme's own navy
background — swap to the brand gold for contrast in dark mode. */
body.alm-dark .alm-tab:hover {
color: var(--alm-primary-dark);
}
body.alm-dark .alm-tab.active {
color: var(--alm-primary-dark);
border-bottom-color: var(--alm-primary-dark);
}
.alm-tab-content {
display: none;
}
.alm-tab-content.active {
display: block;
}
/* =======================================================
Theme Switch / Dark Mode Toggle
Controls light/dark mode switching with slider animation
======================================================= */
.alm-theme-switch-wrapper {
position: fixed;
top: 20px;
right: 20px;
z-index: calc(var(--alm-z-header) + 1);
}
.alm-theme-switch {
width: 60px;
height: 30px;
background-color: var(--alm-switch-bg-light);
border-radius: 30px;
cursor: pointer;
position: relative;
box-shadow: var(--alm-shadow-md);
transition: background-color 0.3s ease;
}
.alm-dark .alm-theme-switch {
background-color: var(--alm-switch-bg-dark);
}
.alm-theme-switch-slider {
width: 26px;
height: 26px;
background-color: var(--alm-switch-slider-light);
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--alm-shadow-md);
}
.alm-dark .alm-theme-switch-slider {
transform: translateX(30px);
background-color: var(--alm-switch-slider-dark);
}
.alm-theme-switch-icon {
position: absolute;
font-size: 16px;
line-height: 1;
transition: opacity 0.3s ease;
}
.alm-theme-switch-light {
opacity: 1;
color: var(--alm-switch-icon-light);
}
.alm-theme-switch-dark {
opacity: 0;
color: var(--alm-switch-icon-dark);
}
.alm-dark .alm-theme-switch-light {
opacity: 0;
}
.alm-dark .alm-theme-switch-dark {
opacity: 1;
}
/* =======================================================
Cookie Consent
======================================================= */
.alm-cookie-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--alm-overlay);
z-index: 9998;
display: none;
}
.alm-cookie-consent {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 420px;
width: 90%;
background: var(--alm-bg-primary);
color: var(--alm-text-primary);
padding: var(--alm-spacing-lg);
border-radius: var(--alm-radius-md);
box-shadow: var(--alm-shadow-xl);
z-index: 9999;
display: none;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--alm-spacing-md);
border: 1px solid var(--alm-border);
}
.alm-cookie-logo {
width: 60%;
max-width: 200px;
height: auto;
display: block;
margin: 0 auto;
}
.alm-cookie-content {
width: 100%;
}
.alm-cookie-actions {
display: flex;
gap: var(--alm-spacing-sm);
justify-content: center;
margin-top: var(--alm-spacing-sm);
}
.alm-cookie-btn {
border: none;
border-radius: var(--alm-radius-sm);
padding: var(--alm-spacing-sm) var(--alm-spacing-lg);
cursor: pointer;
font-size: var(--alm-font-md);
transition: var(--alm-transition-fast);
}
.alm-cookie-btn-accept {
background: var(--alm-primary);
color: var(--alm-white);
}
.alm-cookie-btn-accept:hover {
background: var(--alm-primary-dark);
}
.alm-cookie-btn-deny {
background: transparent;
color: var(--alm-text-primary);
border: 1px solid var(--alm-border);
}
.alm-cookie-btn-deny:hover {
background: var(--alm-bg-tertiary);
}
/* =======================================================
Login Page
======================================================= */
.alm-login-container {
max-width: 400px;
margin: var(--alm-spacing-xxl) auto;
padding: 0 var(--alm-spacing-md);
}
.alm-login-form {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-lg);
padding: var(--alm-spacing-xl);
box-shadow: var(--alm-shadow-lg);
}
.alm-login-logo {
text-align: center;
margin-bottom: var(--alm-spacing-lg);
}
.alm-login-logo img {
max-width: 200px;
height: auto;
}
.alm-login-title {
text-align: center;
margin-bottom: var(--alm-spacing-lg);
/*color: var(--alm-primary);*/
color: var(--alm-text-primary) ;
}
.alm-login-links {
text-align: center;
margin-top: var(--alm-spacing-lg);
}
.alm-login-link {
color: var(--alm-text-secondary);
text-decoration: none;
font-size: var(--alm-font-sm);
}
.alm-login-link:hover {
color: var(--alm-primary);
}
/* =======================================================
Dashboard Cards
======================================================= */
.alm-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--alm-spacing-lg);
margin-bottom: var(--alm-spacing-xl);
}
.alm-dashboard-card {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-lg);
box-shadow: var(--alm-shadow-sm);
transition: var(--alm-transition);
}
.alm-dashboard-card:hover {
box-shadow: var(--alm-shadow-md);
transform: translateY(-2px);
}
.alm-dashboard-card-title {
font-size: var(--alm-font-lg);
font-weight: 600;
margin-bottom: var(--alm-spacing-md);
color: var(--alm-primary);
border-bottom: 1px solid var(--alm-border);
padding-bottom: var(--alm-spacing-xs);
}
.alm-dashboard-stat {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--alm-spacing-sm);
}
.alm-dashboard-stat-label {
color: var(--alm-text-secondary);
font-size: var(--alm-font-sm);
}
.alm-dashboard-stat-value {
font-weight: 600;
font-size: var(--alm-font-lg);
color: var(--alm-primary);
}
/* =======================================================
Timesheet Entries (Mobile Optimized)
======================================================= */
.alm-timesheet-entry {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-md);
margin-bottom: var(--alm-spacing-sm);
}
.alm-timesheet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--alm-spacing-sm);
flex-wrap: wrap;
gap: var(--alm-spacing-xs);
}
.alm-timesheet-date {
font-weight: 600;
color: var(--alm-primary);
}
.alm-timesheet-project {
background-color: var(--alm-bg-tertiary);
padding: var(--alm-spacing-xs) var(--alm-spacing-sm);
border-radius: var(--alm-radius-sm);
font-size: var(--alm-font-xs);
}
.alm-timesheet-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--alm-spacing-sm);
margin-bottom: var(--alm-spacing-sm);
}
.alm-timesheet-field {
display: flex;
flex-direction: column;
}
.alm-timesheet-label {
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
margin-bottom: 2px;
}
.alm-timesheet-value {
font-weight: 500;
}
.alm-timesheet-description {
background-color: var(--alm-bg-secondary);
padding: var(--alm-spacing-sm);
border-radius: var(--alm-radius-sm);
font-size: var(--alm-font-sm);
margin-top: var(--alm-spacing-sm);
border-left: 3px solid var(--alm-primary);
}
/* =======================================================
Expense Entry (Mobile Optimized)
======================================================= */
.alm-expense-entry {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-md);
margin-bottom: var(--alm-spacing-sm);
}
.alm-expense-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--alm-spacing-sm);
flex-wrap: wrap;
gap: var(--alm-spacing-xs);
}
.alm-expense-date {
font-weight: 600;
color: var(--alm-primary);
}
.alm-expense-supplier {
background-color: var(--alm-bg-tertiary);
padding: var(--alm-spacing-xs) var(--alm-spacing-sm);
border-radius: var(--alm-radius-sm);
font-size: var(--alm-font-xs);
}
.alm-expense-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--alm-spacing-sm);
margin-bottom: var(--alm-spacing-sm);
}
.alm-expense-amount {
font-weight: 600;
text-align: right;
}
.alm-expense-amount.alm-positive {
color: var(--alm-success);
}
.alm-expense-amount.alm-negative {
color: var(--alm-danger);
}
.alm-expense-actions {
display: flex;
gap: var(--alm-spacing-xs);
margin-top: var(--alm-spacing-sm);
flex-wrap: wrap;
}
.alm-expense-action-btn {
flex: 1;
min-width: 80px;
padding: var(--alm-spacing-xs);
font-size: var(--alm-font-xs);
}
/* =======================================================
Mileage Entry (Mobile Optimized)
======================================================= */
.alm-mileage-entry {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-md);
margin-bottom: var(--alm-spacing-sm);
}
.alm-mileage-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--alm-spacing-sm);
}
.alm-mileage-vehicle {
font-weight: 600;
color: var(--alm-primary);
}
.alm-mileage-date {
color: var(--alm-text-secondary);
font-size: var(--alm-font-sm);
}
.alm-mileage-readings {
display: flex;
gap: var(--alm-spacing-md);
margin-bottom: var(--alm-spacing-sm);
flex-wrap: wrap;
}
.alm-mileage-reading {
flex: 1;
text-align: center;
padding: var(--alm-spacing-xs);
background-color: var(--alm-bg-secondary);
border-radius: var(--alm-radius-sm);
}
.alm-mileage-label {
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
display: block;
}
.alm-mileage-value {
font-weight: 600;
font-size: var(--alm-font-lg);
}
.alm-mileage-total {
font-weight: 700;
color: var(--alm-primary);
}
.alm-mileage-passengers {
display: flex;
align-items: center;
gap: var(--alm-spacing-xs);
margin-top: var(--alm-spacing-sm);
padding: var(--alm-spacing-xs);
background-color: var(--alm-bg-tertiary);
border-radius: var(--alm-radius-sm);
}
/* =======================================================
Invoice Summary
======================================================= */
.alm-invoice-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--alm-spacing-md);
margin-bottom: var(--alm-spacing-xl);
}
.alm-summary-card {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-md);
text-align: center;
}
.alm-summary-label {
font-size: var(--alm-font-sm);
color: var(--alm-text-muted);
margin-bottom: var(--alm-spacing-xs);
}
.alm-summary-value {
font-size: var(--alm-font-xl);
font-weight: 700;
color: var(--alm-primary);
}
.alm-summary-value.alm-positive {
color: var(--alm-success);
}
.alm-summary-value.alm-negative {
color: var(--alm-danger);
}
/* =======================================================
Filters Bar
======================================================= */
.alm-filters-bar {
background-color: var(--alm-bg-secondary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-md);
margin-bottom: var(--alm-spacing-lg);
display: flex;
flex-wrap: wrap;
gap: var(--alm-spacing-sm);
align-items: center;
}
.alm-filter-group {
flex: 1;
min-width: 200px;
}
.alm-filter-label {
display: block;
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
margin-bottom: 2px;
}
.alm-filter-select,
.alm-filter-input {
width: 100%;
padding: var(--alm-spacing-xs);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
background-color: var(--alm-bg-primary);
color: var(--alm-text-primary);
}
.alm-filter-actions {
display: flex;
gap: var(--alm-spacing-xs);
margin-left: auto;
}
/* =======================================================
Public marketing page (homepage) sections
Controls: hero banner, About/Services/Contact sections,
service cards, on the single-page public site.
======================================================= */
.alm-hero {
text-align: center;
padding: var(--alm-spacing-xxl) var(--alm-spacing-lg);
}
.alm-hero-logo {
max-width: 220px;
width: 45vw;
margin: var(--alm-spacing-lg) 0;
}
/* Homepage-only: halves the top padding above the logo and the logo's own
top margin, closing up the gap under the fixed navbar. Other pages using
.alm-hero (e.g. about.php) keep the standard spacing. */
.alm-hero-tight {
padding-top: calc(var(--alm-spacing-xxl) / 2);
}
.alm-hero-tight .alm-hero-logo {
margin-top: calc(var(--alm-spacing-lg) / 2);
}
/* Forces the hero H1 onto two lines on larger screens (see markup); on
smaller screens the
is hidden so the heading wraps naturally
instead of forcing the same break at a width where it may not fit. */
.alm-hero-title-break {
display: none;
}
@media (min-width: 769px) {
.alm-hero-title-break {
display: block;
}
}
.alm-hero-tagline {
max-width: 720px;
margin: 0 auto;
color: var(--alm-text-secondary);
font-size: var(--alm-font-lg);
}
.alm-hero-actions {
display: flex;
justify-content: center;
gap: var(--alm-spacing-md);
margin-top: var(--alm-spacing-lg);
flex-wrap: wrap;
}
.alm-section {
padding: var(--alm-spacing-xxl) var(--alm-spacing-lg);
border-top: 1px solid var(--alm-border);
}
.alm-section-intro {
max-width: 760px;
margin: 0 auto var(--alm-spacing-xl) auto;
text-align: center;
color: var(--alm-text-secondary);
}
.alm-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--alm-spacing-lg);
max-width: 1200px;
margin: 0 auto;
}
/* Cards with more content (a longer intro paragraph plus a fuller bullet
list) read as cramped once the grid above wraps into 3-4 narrow
columns on larger screens, so this modifier lets a card claim the
full row width instead of squeezing into one column alongside the
shorter cards. Below the point the grid is already a single column
(narrow/mobile viewports), this has no effect - it's already full
width by default. */
.alm-service-card-wide {
grid-column: 1 / -1;
}
@media (min-width: 992px) {
.alm-service-card-wide {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
}
.alm-service-card {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-lg);
box-shadow: var(--alm-shadow-sm);
transition: var(--alm-transition);
}
.alm-service-card:hover {
box-shadow: var(--alm-shadow-md);
transform: translateY(-2px);
}
.alm-service-card-title {
color: var(--alm-primary-dark);
margin-bottom: var(--alm-spacing-sm);
}
.alm-service-card ul {
margin: var(--alm-spacing-sm) 0 0 var(--alm-spacing-md);
color: var(--alm-text-secondary);
font-size: var(--alm-font-sm);
}
.alm-service-card ul li {
margin-bottom: var(--alm-spacing-xs);
}
/* Bullet list used inline in body copy (e.g. About page qualifications):
browsers indent a plain via its default left padding, which leaves
the bullet sitting noticeably right of the paragraph text above it.
list-style-position: inside puts the marker flush with that text
instead, so the list reads as a continuation of the paragraph rather
than a separately-indented block. */
.alm-list-flush {
padding-left: 0;
list-style-position: inside;
}
.alm-list-flush li {
margin-bottom: var(--alm-spacing-xs);
}
.alm-about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--alm-spacing-lg);
max-width: 1000px;
margin: var(--alm-spacing-xl) auto 0 auto;
}
.alm-contact-card {
max-width: 560px;
margin: 0 auto;
text-align: center;
}
/* =======================================================
Responsive Utilities
======================================================= */
@media (max-width: 768px) {
.alm-container {
padding: 0 var(--alm-spacing-md);
}
.alm-h1 {
font-size: var(--alm-font-xxl);
}
.alm-h2 {
font-size: var(--alm-font-xl);
}
.alm-h3 {
font-size: var(--alm-font-lg);
}
/* Stack columns on mobile */
.alm-col-1, .alm-col-2, .alm-col-3, .alm-col-4, .alm-col-5, .alm-col-6,
.alm-col-7, .alm-col-8, .alm-col-9, .alm-col-10, .alm-col-11, .alm-col-12 {
flex: 0 0 100%;
max-width: 100%;
}
/* Mobile navigation: logo stays left, theme switch + hamburger toggle
stay right, both on one line - the full link list collapses behind
the toggle instead of wrapping across multiple rows underneath. */
.alm-navbar {
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
gap: var(--alm-spacing-sm);
padding: var(--alm-spacing-sm);
}
.alm-navbar-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex: none;
flex-direction: column;
align-items: stretch;
gap: 0;
margin-right: 0;
background-color: var(--alm-primary);
box-shadow: var(--alm-shadow-md);
padding: var(--alm-spacing-sm);
z-index: var(--alm-z-dropdown);
}
.alm-navbar-menu.is-open {
display: flex;
}
.alm-navbar-item {
width: 100%;
text-align: center;
padding: var(--alm-spacing-sm);
}
.alm-navbar-toggle {
display: flex;
}
/* On small screens the "Tools" dropdown trigger sits centred and
full-width like the other nav items, and its sub-items expand in
normal document flow directly below it on tap (toggled via the
.is-open class in js/alm_nav.js) instead of the desktop
hover-triggered floating panel. The !important on display: none
guards against the desktop :hover rule above still matching on a
touchscreen's simulated hover state. */
.alm-navbar-dropdown {
display: block;
width: 100%;
}
/* The trigger span is a flex child of .alm-navbar-dropdown (a
plain block), not of .alm-navbar-menu directly, so it misses
out on the flex "stretch" sizing the other, top-level nav
items get — without display: block here, width: 100% and
text-align: center from the general .alm-navbar-item mobile
rule above have no effect on an inline , leaving the
trigger's text left-aligned instead of centred like its
siblings. */
.alm-navbar-dropdown > .alm-navbar-item {
display: block;
}
.alm-navbar-dropdown-content {
display: none !important;
position: static;
margin-top: var(--alm-spacing-xs);
min-width: 0;
background-color: rgba(0, 0, 0, 0.15);
border: none;
box-shadow: none;
}
.alm-navbar-dropdown.is-open .alm-navbar-dropdown-content {
display: block !important;
}
.alm-navbar-dropdown-item {
color: var(--alm-white);
text-align: center;
border-bottom: none;
}
.alm-navbar-dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.15);
color: var(--alm-white);
}
.alm-userbar {
flex-direction: column;
gap: var(--alm-spacing-xs);
text-align: center;
}
.alm-userbar-info {
flex-direction: column;
gap: var(--alm-spacing-xs);
}
/* Modal adjustments */
.alm-modal {
width: 95%;
margin: 5% auto;
}
/* Table adjustments */
.alm-table th,
.alm-table td {
padding: var(--alm-spacing-xs);
font-size: var(--alm-font-xs);
}
/* Filter bar */
.alm-filters-bar {
flex-direction: column;
align-items: stretch;
}
.alm-filter-group {
min-width: 100%;
}
.alm-filter-actions {
margin-left: 0;
justify-content: flex-end;
}
/* Footer */
.alm-footer-content {
flex-direction: column;
text-align: center;
}
.alm-footer-links {
justify-content: center;
}
/* Fixed header adjustments */
.alm-main {
/*margin-top: 180px;*/ /* Larger for mobile */
margin-top: 80px; /* Just clears the collapsed mobile navbar (~78px) */
}
/* Closes up the gap between the navbar and the page heading on mobile
(About/Services/Contact etc.) — home page layers its own additional
.alm-hero-tight treatment on top of this. */
.alm-hero {
padding-top: var(--alm-spacing-md);
}
.alm-theme-switch-wrapper {
top: 10px;
right: 10px;
}
.alm-theme-switch {
width: 50px;
height: 25px;
}
.alm-theme-switch-slider {
width: 21px;
height: 21px;
}
.alm-dark .alm-theme-switch-slider {
transform: translateX(25px);
}
}
@media (max-width: 480px) {
.alm-dashboard-grid {
grid-template-columns: 1fr;
}
.alm-btn {
width: 100%;
margin-bottom: var(--alm-spacing-xs);
}
.alm-form-radio-group {
flex-direction: column;
gap: var(--alm-spacing-xs);
}
.alm-expense-details,
.alm-timesheet-details {
grid-template-columns: 1fr;
}
.alm-mileage-readings {
flex-direction: column;
gap: var(--alm-spacing-xs);
}
.alm-locktight {
padding: var(--alm-spacing-md);
}
}
/* =======================================================
Print Styles
======================================================= */
@media print {
.alm-navbar,
.alm-userbar,
.alm-footer,
.alm-btn,
.alm-filters-bar,
.alm-modal-overlay,
.alm-header-fixed,
.alm-theme-switch-wrapper {
display: none !important;
}
body {
background-color: var(--alm-white);
color: var(--alm-black);
}
.alm-main {
margin-top: 0 !important;
}
.alm-card,
.alm-table {
box-shadow: none;
border: 1px solid var(--alm-border-light);
}
.alm-table th {
background-color: var(--alm-gray-200);
}
}
/* =======================================================
Utility Classes
======================================================= */
.alm-m-0 {
margin: 0;
}
.alm-mt-0 {
margin-top: 0;
}
.alm-mb-0 {
margin-bottom: 0;
}
.alm-ml-0 {
margin-left: 0;
}
.alm-mr-0 {
margin-right: 0;
}
.alm-m-1 {
margin: var(--alm-spacing-xs);
}
.alm-mt-1 {
margin-top: var(--alm-spacing-xs);
}
.alm-mb-1 {
margin-bottom: var(--alm-spacing-xs);
}
.alm-ml-1 {
margin-left: var(--alm-spacing-xs);
}
.alm-mr-1 {
margin-right: var(--alm-spacing-xs);
}
.alm-m-2 {
margin: var(--alm-spacing-sm);
}
.alm-mt-2 {
margin-top: var(--alm-spacing-sm);
}
.alm-mb-2 {
margin-bottom: var(--alm-spacing-sm);
}
.alm-ml-2 {
margin-left: var(--alm-spacing-sm);
}
.alm-mr-2 {
margin-right: var(--alm-spacing-sm);
}
.alm-m-3 {
margin: var(--alm-spacing-md);
}
.alm-mt-3 {
margin-top: var(--alm-spacing-md);
}
.alm-mb-3 {
margin-bottom: var(--alm-spacing-md);
}
.alm-ml-3 {
margin-left: var(--alm-spacing-md);
}
.alm-mr-3 {
margin-right: var(--alm-spacing-md);
}
.alm-m-4 {
margin: var(--alm-spacing-lg);
}
.alm-mt-4 {
margin-top: var(--alm-spacing-lg);
}
.alm-mb-4 {
margin-bottom: var(--alm-spacing-lg);
}
.alm-ml-4 {
margin-left: var(--alm-spacing-lg);
}
.alm-mr-4 {
margin-right: var(--alm-spacing-lg);
}
.alm-m-5 {
margin: var(--alm-spacing-xl);
}
.alm-mt-5 {
margin-top: var(--alm-spacing-xl);
}
.alm-mb-5 {
margin-bottom: var(--alm-spacing-xl);
}
.alm-ml-5 {
margin-left: var(--alm-spacing-xl);
}
.alm-mr-5 {
margin-right: var(--alm-spacing-xl);
}
/* Padding utilities */
.alm-p-0 {
padding: 0;
}
.alm-pt-0 {
padding-top: 0;
}
.alm-pb-0 {
padding-bottom: 0;
}
.alm-pl-0 {
padding-left: 0;
}
.alm-pr-0 {
padding-right: 0;
}
.alm-p-1 {
padding: var(--alm-spacing-xs);
}
.alm-pt-1 {
padding-top: var(--alm-spacing-xs);
}
.alm-pb-1 {
padding-bottom: var(--alm-spacing-xs);
}
.alm-pl-1 {
padding-left: var(--alm-spacing-xs);
}
.alm-pr-1 {
padding-right: var(--alm-spacing-xs);
}
.alm-p-2 {
padding: var(--alm-spacing-sm);
}
.alm-pt-2 {
padding-top: var(--alm-spacing-sm);
}
.alm-pb-2 {
padding-bottom: var(--alm-spacing-sm);
}
.alm-pl-2 {
padding-left: var(--alm-spacing-sm);
}
.alm-pr-2 {
padding-right: var(--alm-spacing-sm);
}
.alm-p-3 {
padding: var(--alm-spacing-md);
}
.alm-pt-3 {
padding-top: var(--alm-spacing-md);
}
.alm-pb-3 {
padding-bottom: var(--alm-spacing-md);
}
.alm-pl-3 {
padding-left: var(--alm-spacing-md);
}
.alm-pr-3 {
padding-right: var(--alm-spacing-md);
}
.alm-p-4 {
padding: var(--alm-spacing-lg);
}
.alm-pt-4 {
padding-top: var(--alm-spacing-lg);
}
.alm-pb-4 {
padding-bottom: var(--alm-spacing-lg);
}
.alm-pl-4 {
padding-left: var(--alm-spacing-lg);
}
.alm-pr-4 {
padding-right: var(--alm-spacing-lg);
}
.alm-p-5 {
padding: var(--alm-spacing-xl);
}
.alm-pt-5 {
padding-top: var(--alm-spacing-xl);
}
.alm-pb-5 {
padding-bottom: var(--alm-spacing-xl);
}
.alm-pl-5 {
padding-left: var(--alm-spacing-xl);
}
.alm-pr-5 {
padding-right: var(--alm-spacing-xl);
}
/* Display utilities */
.alm-d-none {
display: none;
}
.alm-d-block {
display: block;
}
.alm-d-flex {
display: flex;
}
.alm-d-inline {
display: inline;
}
.alm-d-inline-block {
display: inline-block;
}
.alm-d-grid {
display: grid;
}
/* Flex utilities */
.alm-flex-row {
flex-direction: row;
}
.alm-flex-column {
flex-direction: column;
}
.alm-flex-wrap {
flex-wrap: wrap;
}
.alm-flex-nowrap {
flex-wrap: nowrap;
}
.alm-justify-start {
justify-content: flex-start;
}
.alm-justify-end {
justify-content: flex-end;
}
.alm-justify-center {
justify-content: center;
}
.alm-justify-between {
justify-content: space-between;
}
.alm-justify-around {
justify-content: space-around;
}
.alm-align-start {
align-items: flex-start;
}
.alm-align-end {
align-items: flex-end;
}
.alm-align-center {
align-items: center;
}
.alm-align-stretch {
align-items: stretch;
}
/* Width utilities */
.alm-w-25 {
width: 25%;
}
.alm-w-50 {
width: 50%;
}
.alm-w-75 {
width: 75%;
}
.alm-w-100 {
width: 100%;
}
.alm-w-auto {
width: auto;
}
/* Height utilities */
.alm-h-25 {
height: 25%;
}
.alm-h-50 {
height: 50%;
}
.alm-h-75 {
height: 75%;
}
.alm-h-100 {
height: 100%;
}
.alm-h-auto {
height: auto;
}
/* Border utilities */
.alm-border {
border: 1px solid var(--alm-border);
}
.alm-border-top {
border-top: 1px solid var(--alm-border);
}
.alm-border-bottom {
border-bottom: 1px solid var(--alm-border);
}
.alm-border-left {
border-left: 1px solid var(--alm-border);
}
.alm-border-right {
border-right: 1px solid var(--alm-border);
}
.alm-border-0 {
border: none;
}
/* Border radius */
.alm-rounded-sm {
border-radius: var(--alm-radius-sm);
}
.alm-rounded-md {
border-radius: var(--alm-radius-md);
}
.alm-rounded-lg {
border-radius: var(--alm-radius-lg);
}
.alm-rounded-xl {
border-radius: var(--alm-radius-xl);
}
.alm-rounded-circle {
border-radius: 50%;
}
.alm-rounded-0 {
border-radius: 0;
}
/* Font utilities */
.alm-fw-light {
font-weight: 300;
}
.alm-fw-normal {
font-weight: 400;
}
.alm-fw-medium {
font-weight: 500;
}
.alm-fw-semibold {
font-weight: 600;
}
.alm-fw-bold {
font-weight: 700;
}
.alm-fs-xs {
font-size: var(--alm-font-xs);
}
.alm-fs-sm {
font-size: var(--alm-font-sm);
}
.alm-fs-md {
font-size: var(--alm-font-md);
}
.alm-fs-lg {
font-size: var(--alm-font-lg);
}
.alm-fs-xl {
font-size: var(--alm-font-xl);
}
.alm-fs-xxl {
font-size: var(--alm-font-xxl);
}
/* Color utilities */
.alm-color-primary {
color: var(--alm-primary);
}
.alm-color-success {
color: var(--alm-success);
}
.alm-color-danger {
color: var(--alm-danger);
}
.alm-color-warning {
color: var(--alm-warning);
}
.alm-color-info {
color: var(--alm-info);
}
.alm-color-muted {
color: var(--alm-text-muted);
}
/* Background utilities */
.alm-bg-primary {
background-color: var(--alm-primary);
}
.alm-bg-success {
background-color: var(--alm-success);
}
.alm-bg-danger {
background-color: var(--alm-danger);
}
.alm-bg-warning {
background-color: var(--alm-warning);
}
.alm-bg-info {
background-color: var(--alm-info);
}
.alm-bg-light {
background-color: var(--alm-bg-secondary);
}
.alm-bg-dark {
background-color: var(--alm-primary-dark);
}
/* Text alignment */
.alm-text-left {
text-align: left;
}
.alm-text-center {
text-align: center;
}
.alm-text-right {
text-align: right;
}
.alm-text-justify {
text-align: justify;
}
/* Float */
.alm-float-left {
float: left;
}
.alm-float-right {
float: right;
}
.alm-float-none {
float: none;
}
/* Clearfix */
.alm-clearfix::after {
content: "";
clear: both;
display: table;
}
/* Position */
.alm-relative {
position: relative;
}
.alm-absolute {
position: absolute;
}
.alm-fixed {
position: fixed;
}
.alm-sticky {
position: sticky;
}
/* Z-index */
.alm-z-0 {
z-index: 0;
}
.alm-z-10 {
z-index: 10;
}
.alm-z-20 {
z-index: 20;
}
.alm-z-30 {
z-index: 30;
}
.alm-z-40 {
z-index: 40;
}
.alm-z-50 {
z-index: 50;
}
.alm-z-auto {
z-index: auto;
}
/* Overflow */
.alm-overflow-auto {
overflow: auto;
}
.alm-overflow-hidden {
overflow: hidden;
}
.alm-overflow-scroll {
overflow: scroll;
}
.alm-overflow-visible {
overflow: visible;
}
.alm-overflow-x-auto {
overflow-x: auto;
}
.alm-overflow-y-auto {
overflow-y: auto;
}
/* Visibility */
.alm-visible {
visibility: visible;
}
.alm-invisible {
visibility: hidden;
}
/* Opacity */
.alm-opacity-0 {
opacity: 0;
}
.alm-opacity-25 {
opacity: 0.25;
}
.alm-opacity-50 {
opacity: 0.5;
}
.alm-opacity-75 {
opacity: 0.75;
}
.alm-opacity-100 {
opacity: 1;
}
/* Cursor */
.alm-cursor-pointer {
cursor: pointer;
}
.alm-cursor-default {
cursor: default;
}
.alm-cursor-wait {
cursor: wait;
}
.alm-cursor-text {
cursor: text;
}
.alm-cursor-move {
cursor: move;
}
.alm-cursor-not-allowed {
cursor: not-allowed;
}
/* Responsive visibility */
@media (max-width: 768px) {
.alm-d-sm-none {
display: none;
}
.alm-d-sm-block {
display: block;
}
.alm-d-sm-flex {
display: flex;
}
}
@media (max-width: 480px) {
.alm-d-xs-none {
display: none;
}
.alm-d-xs-block {
display: block;
}
.alm-d-xs-flex {
display: flex;
}
}
/* =======================================================
Material Quantity Calculator (includes/tools/convert.php)
This tool's markup uses "alm-converter-" class names (carried
over from an earlier build) rather than the "alm_" ones used
elsewhere on the site — the classes themselves weren't renamed,
only the page content. Rather than touch ~3,800 lines of working
calculator markup/JS to rename every class, this block styles
those existing class names directly, using the same Aliniom
colour and spacing tokens as the rest of the site so the tool
reads as part of the site rather than a bolt-on.
======================================================= */
.alm-converter-container {
max-width: 1200px;
margin: 0 auto;
padding: var(--alm-spacing-lg);
}
.alm-converter-header {
text-align: center;
margin-bottom: var(--alm-spacing-xl);
}
.alm-converter-h1 {
font-size: var(--alm-font-xxxl);
font-weight: 700;
color: var(--alm-text-primary);
margin-bottom: var(--alm-spacing-sm);
}
.alm-converter-subtitle {
color: var(--alm-text-secondary);
font-size: var(--alm-font-lg);
max-width: 700px;
margin: 0 auto;
}
/* Tabs */
.alm-converter-tab-container {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
box-shadow: var(--alm-shadow-sm);
overflow: hidden;
}
.alm-converter-tabs {
display: flex;
flex-wrap: wrap;
background-color: var(--alm-primary);
}
.alm-converter-tab {
padding: var(--alm-spacing-sm) var(--alm-spacing-md);
color: rgba(212, 175, 55, 0.9);
cursor: pointer;
font-weight: 600;
font-size: var(--alm-font-sm);
transition: var(--alm-transition-fast);
border-bottom: 3px solid transparent;
}
.alm-converter-tab:hover {
background-color: rgba(85, 132, 208, 0.35);
color: var(--alm-white);
}
.alm-converter-tab.alm-converter-active {
color: var(--alm-white);
border-bottom-color: var(--alm-primary-dark);
background-color: rgba(255, 255, 255, 0.08);
}
.alm-converter-disclaim {
padding: var(--alm-spacing-sm) var(--alm-spacing-lg);
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
background-color: var(--alm-bg-secondary);
border-bottom: 1px solid var(--alm-border);
}
.alm-converter-tab-content {
display: none;
padding: var(--alm-spacing-lg);
}
.alm-converter-tab-content.alm-converter-active {
display: block;
}
/* Calculator grid + cards.
minmax(min(320px, 100%), 1fr) instead of a bare minmax(320px, 1fr):
on wide screens the 320px floor still gives the same multi-column
layout as before, but on any screen narrower than 320px the track
can shrink to fill the available width instead of forcing a fixed
320px column that overflows the viewport and gets clipped. */
.alm-converter-calculator-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: var(--alm-spacing-lg);
}
.alm-converter-calc-card,
.alm-converter-paint-calculator {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-lg);
box-shadow: var(--alm-shadow-sm);
}
.alm-converter-h3 {
font-size: var(--alm-font-lg);
font-weight: 600;
color: var(--alm-primary-dark);
margin-bottom: var(--alm-spacing-md);
display: flex;
align-items: center;
gap: var(--alm-spacing-sm);
}
.alm-converter-icon {
color: var(--alm-primary-dark);
}
/* Forms */
.alm-converter-form-group {
margin-bottom: var(--alm-spacing-md);
}
.alm-converter-form-row {
display: flex;
flex-wrap: wrap;
gap: var(--alm-spacing-md);
}
.alm-converter-form-row > .alm-converter-form-group {
flex: 1;
min-width: 160px;
}
.alm-converter-select,
.alm-converter-input,
.alm-converter-unit-select {
width: 100%;
padding: var(--alm-spacing-sm) var(--alm-spacing-md);
font-size: var(--alm-font-md);
font-family: var(--alm-font-primary);
color: var(--alm-text-primary);
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
}
.alm-converter-input-with-unit {
position: relative;
display: flex;
align-items: center;
gap: var(--alm-spacing-xs);
}
.alm-converter-input-with-unit .alm-converter-input {
flex: 1;
}
.alm-converter-unit-display {
padding: var(--alm-spacing-xs) var(--alm-spacing-sm);
background-color: var(--alm-bg-secondary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
font-size: var(--alm-font-sm);
color: var(--alm-text-secondary);
white-space: nowrap;
}
.alm-converter-paste-btn,
.alm-converter-copy-btn,
.alm-converter-delete-btn {
background: transparent;
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
color: var(--alm-text-secondary);
padding: var(--alm-spacing-xs) var(--alm-spacing-sm);
cursor: pointer;
transition: var(--alm-transition-fast);
}
.alm-converter-paste-btn:hover,
.alm-converter-copy-btn:hover {
color: var(--alm-primary);
border-color: var(--alm-primary);
}
.alm-converter-delete-btn:hover {
color: var(--alm-danger);
border-color: var(--alm-danger);
}
.alm-converter-conversion-direction {
display: flex;
align-items: center;
justify-content: center;
gap: var(--alm-spacing-xs);
color: var(--alm-text-muted);
font-size: var(--alm-font-sm);
font-weight: 600;
margin: var(--alm-spacing-sm) 0;
}
/* Results */
.alm-converter-results-area {
background-color: var(--alm-bg-secondary);
border-radius: var(--alm-radius-sm);
padding: var(--alm-spacing-md);
margin: var(--alm-spacing-md) 0;
}
.alm-converter-result-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--alm-spacing-xs) var(--alm-spacing-sm);
}
.alm-converter-result-label {
color: var(--alm-text-secondary);
font-size: var(--alm-font-sm);
}
.alm-converter-result-value {
font-weight: 700;
font-size: var(--alm-font-lg);
color: var(--alm-primary-dark);
overflow-wrap: anywhere;
}
/* Buttons */
.alm-converter-btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--alm-spacing-sm);
margin-top: var(--alm-spacing-sm);
}
.alm-converter-button {
display: inline-flex;
align-items: center;
gap: var(--alm-spacing-xs);
padding: var(--alm-spacing-sm) var(--alm-spacing-lg);
border-radius: var(--alm-radius-sm);
font-weight: 600;
font-size: var(--alm-font-sm);
cursor: pointer;
border: 1px solid transparent;
transition: var(--alm-transition-fast);
background-color: var(--alm-primary);
color: var(--alm-white);
}
.alm-converter-button:hover {
background-color: var(--alm-primary-dark);
color: var(--alm-primary);
}
.alm-converter-button.alm-converter-secondary {
background-color: transparent;
color: var(--alm-primary);
border-color: var(--alm-primary);
}
.alm-converter-button.alm-converter-secondary:hover {
background-color: var(--alm-primary);
color: var(--alm-white);
}
.alm-converter-button.alm-converter-outline {
background-color: transparent;
color: var(--alm-text-secondary);
border-color: var(--alm-border);
}
.alm-converter-button.alm-converter-info {
background-color: var(--alm-info);
color: var(--alm-white);
}
/* Notifications (toast) */
.alm-converter-notification {
position: fixed;
bottom: var(--alm-spacing-lg);
right: var(--alm-spacing-lg);
padding: var(--alm-spacing-md) var(--alm-spacing-lg);
border-radius: var(--alm-radius-sm);
box-shadow: var(--alm-shadow-lg);
color: var(--alm-white);
background-color: var(--alm-primary);
z-index: var(--alm-z-tooltip, 2000);
}
.alm-converter-notification.success {
background-color: var(--alm-success);
}
.alm-converter-notification.warning {
background-color: var(--alm-warning);
color: var(--alm-gray-900);
}
.alm-converter-notification.info {
background-color: var(--alm-info);
}
/* Storage / stored-area list (area calculator "add to list" feature) */
.alm-converter-storage-area {
margin-top: var(--alm-spacing-lg);
padding-top: var(--alm-spacing-lg);
border-top: 1px solid var(--alm-border);
}
.alm-converter-stored-areas {
display: flex;
flex-direction: column;
gap: var(--alm-spacing-xs);
margin: var(--alm-spacing-sm) 0;
}
.alm-converter-storage-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--alm-spacing-sm);
background-color: var(--alm-bg-secondary);
border-radius: var(--alm-radius-sm);
}
.alm-converter-total-area,
.alm-converter-total-stored-area {
font-weight: 700;
color: var(--alm-primary-dark);
}
/* Volume calculator (multi-dimension entries) */
.alm-converter-volume-dimensions {
display: flex;
flex-direction: column;
gap: var(--alm-spacing-sm);
}
.alm-converter-volume-dimension {
display: flex;
gap: var(--alm-spacing-sm);
align-items: center;
}
.alm-converter-volume-item {
display: flex;
justify-content: space-between;
padding: var(--alm-spacing-xs) 0;
border-bottom: 1px solid var(--alm-border);
}
.alm-converter-volume-total {
font-weight: 700;
color: var(--alm-primary-dark);
margin-top: var(--alm-spacing-sm);
}
/* Brick/block wall config + border/waste options */
.alm-converter-wall-config,
.alm-converter-wall-layer {
display: flex;
flex-wrap: wrap;
gap: var(--alm-spacing-sm);
margin-bottom: var(--alm-spacing-sm);
}
.alm-converter-border-options,
.alm-converter-waste-factor,
.alm-converter-apply-depth-section {
background-color: var(--alm-bg-secondary);
border-radius: var(--alm-radius-sm);
padding: var(--alm-spacing-sm) var(--alm-spacing-md);
margin-top: var(--alm-spacing-sm);
}
/* Paint calculator specifics */
.alm-converter-paint-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: var(--alm-spacing-lg);
}
.alm-converter-paint-cans {
font-weight: 700;
color: var(--alm-primary-dark);
}
.alm-converter-paint-notes {
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
margin-top: var(--alm-spacing-sm);
}
@media (max-width: 600px) {
.alm-converter-tabs {
flex-direction: column;
}
.alm-converter-btn-group {
flex-direction: column;
}
.alm-converter-button {
justify-content: center;
}
/* Tighter padding and smaller headings so cards have more room for
their own content on small screens, instead of the desktop
spacing/font sizes eating into the available width. */
.alm-converter-container {
padding: var(--alm-spacing-md);
}
.alm-converter-h1 {
font-size: var(--alm-font-xl);
}
.alm-converter-subtitle {
font-size: var(--alm-font-sm);
}
.alm-converter-tab-content {
padding: var(--alm-spacing-md);
}
.alm-converter-calc-card,
.alm-converter-paint-calculator {
padding: var(--alm-spacing-md);
}
.alm-converter-h3 {
font-size: var(--alm-font-md);
}
.alm-converter-result-value {
font-size: var(--alm-font-md);
}
}
@media (max-width: 360px) {
/* Very narrow phones: the paste/copy icon buttons next to each
input don't need their own dedicated column at this width. */
.alm-converter-unit-display {
font-size: var(--alm-font-xs);
padding: var(--alm-spacing-xs) var(--alm-spacing-xs);
}
.alm-converter-h1 {
font-size: var(--alm-font-lg);
}
}
/* =======================================================
PDF Compressor (includes/tools/pdf_compressor.php)
Converted from a standalone HTML page into the site's shared
header/footer include pattern (matching convert.php). Class
names use the "alm-pdfcompress-" prefix, following the same
convention as convert.php's "alm-converter-" classes, and are
styled with the site's brand/theme tokens so the tool reads as
part of Aliniom rather than a generic bolt-on tool.
======================================================= */
.alm-pdfcompress-container {
max-width: 1200px;
margin: 0 auto;
padding: var(--alm-spacing-lg);
}
.alm-pdfcompress-header {
text-align: center;
margin-bottom: var(--alm-spacing-xl);
}
.alm-pdfcompress-h1 {
font-size: var(--alm-font-xxxl);
font-weight: 700;
color: var(--alm-text-primary);
margin-bottom: var(--alm-spacing-sm);
}
.alm-pdfcompress-subtitle {
color: var(--alm-text-secondary);
font-size: var(--alm-font-lg);
max-width: 700px;
margin: 0 auto;
}
.alm-pdfcompress-app {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
gap: var(--alm-spacing-lg);
align-items: start;
}
.alm-pdfcompress-panel {
background-color: var(--alm-bg-primary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-md);
box-shadow: var(--alm-shadow-sm);
padding: var(--alm-spacing-lg);
}
.alm-pdfcompress-h2 {
font-size: var(--alm-font-lg);
font-weight: 600;
color: var(--alm-primary-dark);
margin-bottom: var(--alm-spacing-md);
}
/* Upload area */
.alm-pdfcompress-upload-area {
position: relative;
border: 2px dashed var(--alm-border);
border-radius: var(--alm-radius-md);
padding: var(--alm-spacing-xl) var(--alm-spacing-lg);
text-align: center;
background-color: var(--alm-bg-secondary);
transition: var(--alm-transition-fast);
}
.alm-pdfcompress-upload-area.alm-pdfcompress-dragover {
border-color: var(--alm-primary-dark);
background-color: rgba(212, 175, 55, 0.08);
}
.alm-pdfcompress-upload-icon {
font-size: 2.5rem;
color: var(--alm-primary);
margin-bottom: var(--alm-spacing-sm);
}
.alm-pdfcompress-or {
color: var(--alm-text-muted);
font-size: var(--alm-font-sm);
margin: var(--alm-spacing-xs) 0;
}
.alm-pdfcompress-file-input {
display: none;
}
.alm-pdfcompress-file-count {
position: absolute;
top: var(--alm-spacing-sm);
right: var(--alm-spacing-sm);
display: flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 var(--alm-spacing-xs);
border-radius: var(--alm-radius-pill, 999px);
background-color: var(--alm-primary);
color: var(--alm-white);
font-size: var(--alm-font-xs);
font-weight: 700;
}
/* File count summary */
.alm-pdfcompress-file-count-display {
margin-top: var(--alm-spacing-md);
padding: var(--alm-spacing-md);
background-color: var(--alm-bg-secondary);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
}
.alm-pdfcompress-file-count-display h4 {
font-size: var(--alm-font-sm);
font-weight: 600;
color: var(--alm-text-primary);
margin-bottom: var(--alm-spacing-xs);
display: flex;
align-items: center;
gap: var(--alm-spacing-xs);
}
.alm-pdfcompress-count-item {
display: flex;
justify-content: space-between;
font-size: var(--alm-font-sm);
color: var(--alm-text-secondary);
padding: 2px 0;
}
.alm-pdfcompress-count-value {
font-weight: 600;
color: var(--alm-text-primary);
}
.alm-pdfcompress-count-value.alm-pdfcompress-remaining {
color: var(--alm-success);
}
.alm-pdfcompress-count-value.alm-pdfcompress-at-limit {
color: var(--alm-warning);
}
.alm-pdfcompress-count-value.alm-pdfcompress-over-limit {
color: var(--alm-danger);
}
/* File list */
.alm-pdfcompress-file-list {
margin-top: var(--alm-spacing-md);
max-height: 320px;
overflow-y: auto;
}
.alm-pdfcompress-empty-state {
text-align: center;
color: var(--alm-text-muted);
font-size: var(--alm-font-sm);
padding: var(--alm-spacing-lg) 0;
}
.alm-pdfcompress-file-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--alm-spacing-sm);
padding: var(--alm-spacing-sm);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
margin-bottom: var(--alm-spacing-xs);
background-color: var(--alm-bg-primary);
}
.alm-pdfcompress-file-info {
flex: 1;
min-width: 0;
}
.alm-pdfcompress-file-name {
font-weight: 600;
font-size: var(--alm-font-sm);
color: var(--alm-text-primary);
overflow-wrap: anywhere;
}
.alm-pdfcompress-file-size {
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
}
.alm-pdfcompress-file-status {
font-size: var(--alm-font-xs);
color: var(--alm-text-secondary);
margin-top: 2px;
}
.alm-pdfcompress-file-status.alm-pdfcompress-compressing {
color: var(--alm-primary-dark);
}
.alm-pdfcompress-file-status.alm-pdfcompress-success-text {
color: var(--alm-success);
}
.alm-pdfcompress-file-status.alm-pdfcompress-failed {
color: var(--alm-danger);
}
.alm-pdfcompress-file-progress {
display: none;
height: 4px;
border-radius: 2px;
background-color: var(--alm-bg-secondary);
overflow: hidden;
margin-top: var(--alm-spacing-xs);
}
.alm-pdfcompress-file-progress-bar {
height: 100%;
width: 0;
background-color: var(--alm-primary-dark);
transition: width 0.3s ease;
}
.alm-pdfcompress-file-actions {
flex-shrink: 0;
}
.alm-pdfcompress-btn-icon {
background: transparent;
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
color: var(--alm-text-secondary);
width: 1.75rem;
height: 1.75rem;
cursor: pointer;
transition: var(--alm-transition-fast);
}
.alm-pdfcompress-btn-icon:hover {
color: var(--alm-danger);
border-color: var(--alm-danger);
}
/* Limits + storage notes */
.alm-pdfcompress-limits-warning {
margin-top: var(--alm-spacing-md);
padding: var(--alm-spacing-md);
background-color: rgba(255, 193, 7, 0.1);
border: 1px solid var(--alm-warning);
border-radius: var(--alm-radius-sm);
font-size: var(--alm-font-sm);
color: var(--alm-text-secondary);
}
.alm-pdfcompress-limits-warning h4 {
color: var(--alm-text-primary);
font-size: var(--alm-font-sm);
margin-bottom: var(--alm-spacing-xs);
display: flex;
align-items: center;
gap: var(--alm-spacing-xs);
}
.alm-pdfcompress-limits-warning p {
margin: 2px 0;
}
.alm-pdfcompress-storage-info {
margin-top: var(--alm-spacing-md);
padding: var(--alm-spacing-md);
background-color: var(--alm-bg-secondary);
border-radius: var(--alm-radius-sm);
font-size: var(--alm-font-sm);
color: var(--alm-text-secondary);
}
.alm-pdfcompress-storage-info h3 {
font-size: var(--alm-font-sm);
font-weight: 600;
color: var(--alm-primary-dark);
margin-bottom: var(--alm-spacing-xs);
}
.alm-pdfcompress-storage-info ul {
margin: var(--alm-spacing-xs) 0 0 var(--alm-spacing-lg);
padding: 0;
}
/* Compression options */
.alm-pdfcompress-option-title {
font-weight: 600;
color: var(--alm-text-primary);
margin-bottom: var(--alm-spacing-sm);
}
.alm-pdfcompress-levels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: var(--alm-spacing-sm);
margin-bottom: var(--alm-spacing-md);
}
.alm-pdfcompress-level {
text-align: center;
padding: var(--alm-spacing-sm);
border: 1px solid var(--alm-border);
border-radius: var(--alm-radius-sm);
cursor: pointer;
background-color: var(--alm-bg-primary);
transition: var(--alm-transition-fast);
}
.alm-pdfcompress-level:hover {
border-color: var(--alm-primary);
}
.alm-pdfcompress-level.alm-pdfcompress-active {
border-color: var(--alm-primary-dark);
background-color: rgba(212, 175, 55, 0.12);
}
.alm-pdfcompress-level-name {
font-weight: 600;
font-size: var(--alm-font-sm);
color: var(--alm-text-primary);
}
.alm-pdfcompress-level-percent {
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
}
.alm-pdfcompress-quality-note {
display: flex;
gap: var(--alm-spacing-xs);
align-items: flex-start;
padding: var(--alm-spacing-sm) var(--alm-spacing-md);
margin-bottom: var(--alm-spacing-md);
background-color: rgba(85, 132, 208, 0.1);
border: 1px solid var(--alm-secondary);
border-radius: var(--alm-radius-sm);
font-size: var(--alm-font-xs);
color: var(--alm-text-secondary);
line-height: 1.5;
}
.alm-pdfcompress-quality-note i {
color: var(--alm-secondary);
margin-top: 2px;
}
.alm-pdfcompress-slider-container {
margin-bottom: var(--alm-spacing-md);
}
.alm-pdfcompress-slider-labels {
display: flex;
justify-content: space-between;
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
margin-bottom: var(--alm-spacing-xs);
}
.alm-pdfcompress-slider-labels span:nth-child(2) {
font-weight: 700;
color: var(--alm-primary-dark);
}
.alm-pdfcompress-slider {
width: 100%;
accent-color: var(--alm-primary);
}
/* Size comparison / results */
.alm-pdfcompress-preview {
padding: var(--alm-spacing-md);
background-color: var(--alm-bg-secondary);
border-radius: var(--alm-radius-sm);
margin-bottom: var(--alm-spacing-md);
}
.alm-pdfcompress-preview-title {
font-weight: 600;
color: var(--alm-text-primary);
margin-bottom: var(--alm-spacing-sm);
}
.alm-pdfcompress-size-comparison {
display: flex;
justify-content: space-around;
text-align: center;
}
.alm-pdfcompress-size-value {
font-size: var(--alm-font-xl);
font-weight: 700;
color: var(--alm-primary-dark);
}
.alm-pdfcompress-size-label {
font-size: var(--alm-font-xs);
color: var(--alm-text-muted);
}
.alm-pdfcompress-savings {
text-align: center;
margin-top: var(--alm-spacing-sm);
font-weight: 600;
color: var(--alm-success);
}
.alm-pdfcompress-results {
display: none;
padding: var(--alm-spacing-md);
background-color: var(--alm-bg-secondary);
border-radius: var(--alm-radius-sm);
margin-bottom: var(--alm-spacing-md);
}
.alm-pdfcompress-results.alm-pdfcompress-active-block {
display: block;
}
/* Actions */
.alm-pdfcompress-actions {
display: flex;
gap: var(--alm-spacing-sm);
justify-content: flex-end;
}
.alm-pdfcompress-btn {
display: inline-flex;
align-items: center;
gap: var(--alm-spacing-xs);
padding: var(--alm-spacing-sm) var(--alm-spacing-lg);
border-radius: var(--alm-radius-sm);
font-weight: 600;
font-size: var(--alm-font-sm);
cursor: pointer;
border: 1px solid transparent;
transition: var(--alm-transition-fast);
}
.alm-pdfcompress-btn-primary {
background-color: var(--alm-primary);
color: var(--alm-white);
}
.alm-pdfcompress-btn-primary:hover:not(:disabled) {
background-color: var(--alm-primary-dark);
color: var(--alm-primary);
}
.alm-pdfcompress-btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.alm-pdfcompress-btn-secondary {
background-color: transparent;
color: var(--alm-primary);
border-color: var(--alm-primary);
}
.alm-pdfcompress-btn-secondary:hover {
background-color: var(--alm-primary);
color: var(--alm-white);
}
/* Loading */
.alm-pdfcompress-loading {
display: none;
text-align: center;
margin-top: var(--alm-spacing-lg);
}
.alm-pdfcompress-loading.alm-pdfcompress-active-block {
display: block;
}
.alm-pdfcompress-spinner {
width: 36px;
height: 36px;
margin: 0 auto var(--alm-spacing-sm);
border: 4px solid var(--alm-bg-secondary);
border-top-color: var(--alm-primary);
border-radius: 50%;
animation: alm-pdfcompress-spin 0.8s linear infinite;
}
@keyframes alm-pdfcompress-spin {
to { transform: rotate(360deg); }
}
.alm-pdfcompress-progress-bar {
width: 100%;
height: 8px;
border-radius: 4px;
background-color: var(--alm-bg-secondary);
overflow: hidden;
margin: var(--alm-spacing-sm) 0;
}
.alm-pdfcompress-progress-fill {
height: 100%;
width: 0;
background-color: var(--alm-primary-dark);
transition: width 0.3s ease;
}
@media (max-width: 768px) {
.alm-pdfcompress-container {
padding: var(--alm-spacing-md);
}
.alm-pdfcompress-h1 {
font-size: var(--alm-font-xl);
}
.alm-pdfcompress-actions {
flex-direction: column-reverse;
}
.alm-pdfcompress-actions .alm-pdfcompress-btn {
width: 100%;
justify-content: center;
}
}