/* ========================================================================== * Global CSS Variables - Optimized for OGS Branding * ========================================================================== */ /** * :root pseudo-class targets the root element of the document (). * Defines custom properties (CSS variables) for consistent styling across the application. * Naming convention: --[category]-[property]-[modifier] */ :root { /* OGS Brand Palette - Optimized */ --color-brand-primary: #11366D; /* Main OGS blue (Blu Zaffiro Profondo) */ --color-brand-secondary: #18b3dd; /* Accent OGS cyan */ --color-action-default: #005a9c; /* Default action color (links, buttons) */ --color-action-hover: #194680; /* Hover state aggiornato per il nuovo primary */ --color-action-active: #0D2952; /* Active/pressed state aggiornato */ --color-link: var(--color-action-default); /* Link color uses default action color */ /* Interactive State Colors - Optimized */ --color-state-error: #d32f2f; /* Error state (validation, alerts) */ --color-state-error-light: #ffebee; /* Light background for error states */ --color-state-success: #2e7d32; /* Success state */ --color-state-success-light: #e8f5e8; /* Light background for success states */ --color-state-info: var(--color-brand-secondary); /* Info state uses accent cyan */ --color-state-info-light: #e1f5fe; /* Light background for info states */ --color-state-warning: #f57c00; /* Warning state */ --color-state-warning-light: #fff3e0; /* Light background for warning states */ /* Neutral Colors & Backgrounds - Optimized */ --color-neutral-light: #fff; /* White */ --color-neutral-dark: #193153; /* Dark blue-gray for text */ --color-neutral-darker: #0f1f38; /* Even darker shade */ --color-neutral-border: #b3b9c5; /* Standard border color */ --color-neutral-border-light: #e1e5eb; /* Lighter border color */ --color-neutral-background: #f8fafc; /* Main background color for the body */ --color-neutral-gray: #64748b; /* Mid-gray for secondary text */ /* Header & Footer Background - Solid Color */ --gradient-primary: var(--color-brand-primary); /* Uses OGS primary blue */ /* Text Colors - Optimized */ --color-text-default: var(--color-neutral-dark); /* Default text color */ --color-text-light: var(--color-neutral-gray); /* Lighter text (e.g., help text) */ --color-text-code: #e2e8f0; /* Text color for code blocks */ --color-text-note: #334e68; /* Text color for notes/asides */ /* Specific Backgrounds - Optimized */ --color-bg-body: var(--color-neutral-background); /* Body background */ --color-bg-main: var(--color-neutral-light); /* Main content container background */ --color-bg-help: #f0f7ff; /* Background for help sections */ --color-bg-component: #f8fbff; /* Background for components like fieldsets, cards */ --color-bg-note: #f9fafb; /* Background for note areas */ --color-bg-code: #1e293b; /* Background for code blocks */ --color-bg-disabled: #f1f5f9; /* Background for disabled elements */ /* Shadows - Optimized */ --shadow-opacity-low: 0.08; --shadow-opacity-medium: 0.15; --shadow-opacity-high: 0.25; --shadow-color-accent: 0, 90, 156; /* RGB values for accent shadow color */ --shadow-color-light: 148, 163, 184; /* RGB values for light shadow color */ --shadow-main: 0 2px 8px rgba(var(--shadow-color-light), var(--shadow-opacity-medium)); /* Main container shadow */ --shadow-component: 0 1px 4px rgba(var(--shadow-color-accent), var(--shadow-opacity-low)); /* Component shadow */ --shadow-hover: 0 4px 12px rgba(var(--shadow-color-light), var(--shadow-opacity-high)); /* Hover shadow effect */ /* Borders - Optimized */ --border-width-lg: 0.375rem; /* Thick border (e.g., help section left border) */ --border-width-md: 2px; /* Medium border */ --border-width-sm: 1px; /* Standard border */ --border-width-focus: 2px; /* Focus outline width */ /* Spacing Scale - Optimized (based on 0.5rem increments) */ --space-10x: 5rem; /* 80px */ --space-9x: 4.5rem; /* 72px */ --space-8x: 4rem; /* 64px */ --space-7x: 3.5rem; /* 56px */ --space-6_25: 3.125rem; /* 50px */ --space-6x: 3rem; /* 48px */ --space-5x: 2.5rem; /* 40px */ --space-4x: 2rem; /* 32px */ --space-3x: 1.5rem; /* 24px */ --space-2x: 1rem; /* 16px */ --space-1x: 0.5rem; /* 8px */ --space-0_5x: 0.25rem; /* 4px */ /* Border Radii - Optimized */ --radius-xl: 1rem; /* Extra large radius */ --radius-lg: 0.75rem; /* Large radius */ --radius-md: 0.5rem; /* Medium radius */ --radius-sm: 0.375rem; /* Small radius */ --radius-xs: 0.25rem; /* Extra small radius */ --radius-full: 50%; /* Circle */ /* Breakpoints - Optimized (aligned with common device widths) */ --breakpoint-mobile: 480px; --breakpoint-tablet: 768px; --breakpoint-desktop: 992px; --breakpoint-large: 1200px; /* Transitions - Reduced for snappier feel */ --transition-fast: 0.1s ease; --transition-normal: 0.15s ease; --transition-slow: 0.2s ease; /* Responsive Font Sizes - Optimized using clamp() */ /* clamp(MIN, VAL, MAX) allows fluid scaling between min/max based on viewport width */ --font-h1: clamp(1.4rem, 5vw, 2.2rem); --font-h2: clamp(1.2rem, 4vw, 1.8rem); --font-h3: clamp(1.1rem, 3vw, 1.4rem); /* Added H4-H6 variables for completeness */ --font-h4: clamp(1rem, 2.5vw, 1.25rem); --font-h5: clamp(0.95rem, 2.2vw, 1.1rem); --font-h6: clamp(0.9rem, 2vw, 1rem); --font-header-title: clamp(1.2rem, 3vw, 1.6rem); /* NUOVA: Dimensione reattiva per il titolo header */ /* ---------------------- */ --font-body: clamp(0.9rem, 2vw, 1.05rem); --font-small: clamp(0.85rem, 1.8vw, 0.95rem); --font-xsmall: clamp(0.8rem, 1.6vw, 0.875rem); /* Z-index Scale - Standard stacking order */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1040; --z-popover: 1050; --z-tooltip: 1060; } /* ========================================================================== * Base Styles & Reset - Optimized * ========================================================================== */ /** * Basic reset using border-box sizing and removing default margins/paddings. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /** * Basic HTML element setup: smooth scrolling and text size adjustment. */ html { font-size: 100%; /* Base font size */ scroll-behavior: smooth; /* Smooth scrolling for anchor links */ -webkit-text-size-adjust: 100%; /* Prevent text zooming on mobile */ } /** * Body styling: background, font, line-height, text color, font smoothing. */ body { background: var(--color-bg-body); font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; /* Font stack with fallbacks */ font-size: var(--font-body); /* Responsive base font size */ line-height: 1.6; /* Readable line height */ color: var(--color-text-default); /* Default text color */ -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit */ -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox (macOS) */ } /** * Adds vertical space between the header and the main content area. */ main#main { margin-top: var(--space-4x); /* Add 2rem space above main content */ } /* ========================================================================== * Typography - Optimized * ========================================================================== */ /** * Basic heading styles: line-height, margin, color, weight. */ h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin-bottom: var(--space-2x); color: var(--color-text-default); font-weight: 700; /* Bold headings */ } h1 { font-size: var(--font-h1); margin-bottom: var(--space-4x); } h2 { font-size: var(--font-h2); margin-top: var(--space-6x); /* Add space above h2 for section separation */ margin-bottom: var(--space-3x); } h3 { font-size: var(--font-h3); margin-top: var(--space-4x); margin-bottom: var(--space-2x); } /* Apply added H4-H6 variables */ h4 { font-size: var(--font-h4); margin-top: var(--space-3x); margin-bottom: var(--space-1x); } h5 { font-size: var(--font-h5); margin-top: var(--space-2x); margin-bottom: var(--space-1x); font-weight: 600; /* Slightly less emphasis */ } h6 { font-size: var(--font-h6); margin-top: var(--space-2x); margin-bottom: var(--space-1x); font-weight: 600; color: var(--color-text-light); /* Often used for less important headings */ } /** * Specific title styles for main page title and section legends. * Ensures consistent appearance for key headings. */ .it-title, .custom-legend, #token-title, #selector-title, #download-title { font-family: inherit; /* Use body font */ font-weight: 700; line-height: 1.3; margin-bottom: var(--space-3x); color: var(--color-text-default); } /* ========================================================================== * Text Components - Optimized * ========================================================================== */ /** * Base styles for common text elements like help sections, messages, feedback, notes, and copyright. */ .help, #limit-message, .invalid-feedback, .note, .footer-copy { font-family: inherit; font-size: var(--font-body); line-height: 1.5; color: var(--color-text-default); margin-bottom: var(--space-2x); } /** * Ensure lists within help sections use the standard body font size for consistency. */ .help ul, #limit-message ul { font-size: var(--font-body); /* Matches paragraph text */ } .help li, #limit-message li { font-size: var(--font-body); /* Matches paragraph text */ margin-bottom: var(--space-1x); } /** * Styles for labels and visually hidden text used for accessibility. */ .it-label, .visually-hidden, #form-desc { font-family: inherit; font-size: var(--font-small); line-height: 1.4; font-weight: 600; color: var(--color-text-default); } /* ========================================================================== * Form Labels - Optimized * ========================================================================== */ /** * Ensures consistent styling for form labels, overriding potential Bootstrap defaults. * Uses !important to guarantee precedence. * MODIFIED: Use --font-small for consistency with .it-label. */ .form-label, label:not(.form-check-label):not(.custom-control-label) { font-family: inherit !important; font-size: var(--font-small) !important; /* Use --font-small */ line-height: 1.4 !important; font-weight: 600 !important; color: var(--color-text-default) !important; margin-bottom: var(--space-1x) !important; display: block; /* Ensure labels take full width */ } /** * Specific adjustments for labels within Bootstrap form groups/floating labels. * MODIFIED: Use --font-small for consistency. */ .form-group label, .form-floating label { font-size: var(--font-small) !important; /* Use --font-small */ font-weight: 600 !important; } /* ========================================================================== * Main Content Container - Optimized * ========================================================================== */ /** * Styles the main content wrapper (.site-container). * Provides background, padding, rounded corners, max-width, and centering. * Uses clamp() for responsive margins and padding. */ .site-container { border-radius: var(--radius-xl); margin: clamp(var(--space-3x), 5vw, var(--space-6_25)) auto; /* Responsive top/bottom margin */ padding: clamp(var(--space-2x), 4vw, var(--space-4x)); /* Responsive padding */ max-width: min(980px, 95%); /* Max width, limited to 95% on smaller screens */ width: 95%; /* Fallback/base width */ background: var(--color-bg-main); box-shadow: var(--shadow-main); } /* ========================================================================== * Header - Optimized & Overridden * ========================================================================== */ /** * Header Overrides: * Forza un colore di sfondo solido coerente, superando i gradienti/stili predefiniti di Bootstrap Italia. * Usa il ::before e anche il wrapper principale per garantire la massima copertura. */ /* Sovrascrivi il wrapper principale per massima sicurezza (nessun sfondo, nessuna ombra) */ body .it-header-wrapper { position: relative !important; /* Mantenuto per il posizionamento del pseudo-elemento */ background: transparent !important; background-image: none !important; box-shadow: none !important; /* Rimuovi eventuali ombre che alterano il colore */ } /* Applica il colore di sfondo tramite pseudo-elemento (IL BLOCCO CHIAVE) */ body .it-header-wrapper::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; /* FORZA COLORE SOLIDO E UNIFORME AL FOOTER */ background: var(--color-brand-primary) !important; background-color: var(--color-brand-primary) !important; background-image: none !important; z-index: 0 !important; pointer-events: none !important; box-shadow: none !important; /* Assicura che anche il pseudo-elemento non abbia ombre */ } /* Ensure inner header wrappers are transparent */ body .it-header-wrapper .it-header-slim-wrapper, body .it-header-wrapper .it-header-center-wrapper, body .it-header-wrapper .it-header-navbar-wrapper { background: transparent !important; background-image: none !important; position: relative; /* Needed for z-index */ z-index: 1; /* Place above pseudo-elemento */ } /** * Increases header height by adding padding, specifically below the content. * !important overrides Bootstrap Italia's py-4 utility class. */ body .it-header-wrapper .it-header-center-wrapper { background: transparent !important; background-image: none !important; position: relative; z-index: 1; padding-top: var(--space-3x) !important; /* 1.5rem (Matches original py-4 top) */ padding-bottom: var(--space-7x) !important; /* 3.5rem (Increased bottom padding for height) */ } /* Further ensure transparency for nested elements */ body .it-header-wrapper .it-header-slim-wrapper, body .it-header-wrapper .it-header-slim-wrapper .container, body .it-header-wrapper .it-header-slim-wrapper .row, body .it-header-wrapper .it-header-slim-wrapper .col-12, /* .it-header-center-wrapper removed to avoid overriding padding */ body .it-header-wrapper .it-header-center-wrapper .container, body .it-header-wrapper .it-header-center-wrapper .row, body .it-header-wrapper .it-header-center-wrapper .col-12, body .it-header-wrapper .it-header-navbar-wrapper, body .it-header-wrapper .it-header-navbar-wrapper .container, body .it-header-wrapper .it-header-navbar-wrapper .row, body .it-header-wrapper .it-header-navbar-wrapper .col-12 { background: transparent !important; background-image: none !important; } /* Force white text color for most header elements */ body .it-header-wrapper, body .it-header-wrapper *:not(.dropdown-menu):not(.dropdown-item):not(.dropdown-menu *) { color: #ffffff !important; } /* Keep dropdowns readable with standard background/text colors */ body .it-header-wrapper .dropdown-menu, body .it-header-wrapper .dropdown-menu *, body .it-header-wrapper .dropdown-item, body .it-header-wrapper .dropdown-item * { background: #ffffff !important; color: #000000 !important; } /* Ensure brand text elements are white and increase size */ .it-brand-text, .it-brand-text h2, .it-brand-text h3, .it-brand-text h5, .it-brand-text .d-none.d-md-block, .it-brand-text .d-md-none, .it-header-center-wrapper .it-brand-text, .it-header-center-wrapper .it-brand-text h2, .it-header-center-wrapper .it-brand-text h3, .it-header-center-wrapper .it-brand-text h5 { color: #ffffff !important; text-align: center !important; } /* Increase font size for the H5 within the header brand text */ .it-header-center-wrapper .it-brand-text h5 { font-size: var(--font-header-title); /* MODIFICATO: Usa la variabile reattiva dedicata */ margin-bottom: 0; /* Remove default h5 margin */ } /** * Global rule to vertically center header items (logo vs. language/CRS block). * Targets the main flex container within the header row. */ .it-header-center-wrapper .col-12.d-flex { align-items: center !important; /* Vertically center flex items */ } /** * Global rule to center the right-hand block (lang + title) * This overrides the HTML 'align-items-end' */ .it-header-center-wrapper .col-12 > div.d-flex.flex-column { align-items: center !important; /* Horizontally center lang buttons and title block */ } /** * Ensure the text *within* the brand block is centered * This overrides the 'text-end' in the HTML but is superseded by the rule above for h5 */ .it-header-center-wrapper .it-brand-text { text-align: center !important; /* MODIFICATO: Corregge l'allineamento */ } /* Ensure buttons and links in the header are white */ body .it-header-wrapper .btn, body .it-header-wrapper .nav-link, body .it-header-wrapper a:not(.dropdown-item) { color: #ffffff !important; } /* Ensure mobile header background applies correctly */ @media (max-width: 991.98px) { body .it-header-wrapper::before { background: var(--gradient-primary) !important; box-shadow: none !important; } /* Reset mobile menu background if needed */ body .it-header-wrapper .it-header-navbar-wrapper .navbar, body .it-header-wrapper .it-header-navbar-wrapper .navbar-collapse { background: transparent !important; } } /* ========================================================================== * Language Selector - Optimized & Auto-Selection * ========================================================================== */ .lang-selector { margin-bottom: var(--space-0_1x); /* *** MODIFICA: Spazio ulteriormente ridotto a 0.25rem *** */ } /* Style the button group container */ .lang-selector .btn-group { gap: 0; /* Remove space between buttons */ display: inline-flex; border-radius: var(--radius-sm); overflow: hidden; /* Clip inner button corners */ border: var(--border-width-sm) solid var(--color-neutral-border); /* Light border */ } /* Base button style within the group */ .lang-selector .btn-group .btn { margin: 0; border-radius: 0 !important; /* Remove individual button radius */ padding: var(--space-0_5x) var(--space-1x); line-height: 1.4; border: none; font-size: var(--font-small); font-weight: 600; background: var(--color-neutral-light); color: var(--color-text-default); flex: 1; /* Allow buttons to grow equally */ min-width: auto; text-decoration: none; transition: all var(--transition-fast); } /* Apply radius to the first and last buttons to match the group container */ .lang-selector .btn-group .btn:first-child { border-top-left-radius: var(--radius-xs) !important; border-bottom-left-radius: var(--radius-xs) !important; } .lang-selector .btn-group .btn:last-child { border-top-right-radius: var(--radius-xs) !important; border-bottom-right-radius: var(--radius-xs) !important; } .lang-selector .btn-group .btn:hover { background-color: var(--color-action-hover); color: var(--color-neutral-light); } /* Visible focus state for keyboard navigation */ .lang-selector .btn-group .btn:focus-visible { outline: var(--border-width-focus) solid var(--color-action-default); outline-offset: 2px; z-index: var(--z-popover); /* Ensure focus outline is visible */ } /** * Automatic Language Selection Styling: * Highlights the button corresponding to the current page language (based on html[lang]). */ html[lang="it"] .lang-selector .btn[data-lang="it"], body[lang="it"] .lang-selector .btn[data-lang="it"] { background-color: var(--color-action-default) !important; color: var(--color-neutral-light) !important; font-weight: 700; } html[lang="en"] .lang-selector .btn[data-lang="en"], body[lang="en"] .lang-selector .btn[data-lang="en"] { background-color: var(--color-action-default) !important; color: var(--color-neutral-light) !important; font-weight: 700; } /** * Styles for the existing .btn-outline-light buttons in the header language selector. * Ensures they are white and transparent, matching the header theme. */ .lang-selector .btn-group .btn.btn-outline-light { background-color: transparent !important; color: #ffffff !important; border: 1px solid #ffffff !important; } /* Highlight active language for outline buttons */ html[lang="it"] .lang-selector .btn.btn-outline-light[data-lang="it"], body[lang="it"] .lang-selector .btn.btn-outline-light[data-lang="it"] { background-color: var(--color-action-default) !important; color: var(--color-neutral-light) !important; border-color: var(--color-action-default) !important; } html[lang="en"] .lang-selector .btn.btn-outline-light[data-lang="en"], body[lang="en"] .lang-selector .btn.btn-outline-light[data-lang="en"] { background-color: var(--color-action-default) !important; color: var(--color-neutral-light) !important; border-color: var(--color-action-default) !important; } .lang-selector .btn-group .btn.btn-outline-light:hover { background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle hover effect */ color: #ffffff !important; } /* ========================================================================== * Footer - Optimized & Overridden * ========================================================================== */ /** * Footer Overrides: * Applies the same solid background color as the header. * Ensures all inner containers are transparent to allow the main background to show. * Sets text color to light for readability. * Forces left alignment for content on desktop. */ footer.it-footer { background: var(--gradient-primary) !important; /* Solid blue */ background-image: var(--gradient-primary) !important; color: var(--color-neutral-light); margin-top: var(--space-8x); padding: 0 !important; /* Reset padding, handled by inner elements */ } /* Ensure all inner elements are transparent */ footer.it-footer .it-footer-main, footer.it-footer .it-footer-small-prints, footer.it-footer .footer-copy, footer.it-footer .it-footer-main .container, footer.it-footer .it-footer-small-prints .container, footer.it-footer .py-5, /* Bootstrap utility class override */ footer.it-footer .row, footer.it-footer .col-12, footer.it-footer .col-md-6, footer.it-footer .col-lg-4, footer.it-footer .monitoring-section, footer.it-footer .contact-info, footer.it-footer address, footer.it-footer ul, footer.it-footer li, footer.it-footer a, footer.it-footer h4, footer.it-footer h5 { background: transparent !important; background-image: none !important; } /* Padding for the main footer section */ footer.it-footer .it-footer-main { padding: var(--space-6x) 0 var(--space-4x) 0 !important; background: transparent !important; } /* Style for the small prints/copyright area */ footer.it-footer .it-footer-small-prints { background: transparent !important; padding: 0 !important; border-top: var(--border-width-sm) solid rgba(255, 255, 255, 0.1) !important; /* Subtle top border */ } footer.it-footer .it-footer-small-prints .container { background: transparent !important; padding: 0 !important; } /* Copyright text styling */ footer.it-footer .footer-copy { text-align: center; font-size: var(--font-xsmall); padding: var(--space-3x) 0 !important; margin: 0 !important; color: var(--color-neutral-light) !important; background: transparent !important; font-weight: 500; letter-spacing: 0.02em; width: 100%; border: none !important; } /* Override potentially conflicting Bootstrap background classes */ footer.it-footer .bg-dark { background: transparent !important; } footer.it-footer .py-5 { background: transparent !important; padding: 3rem 0 !important; } /* Ensure contact info text is light */ footer.it-footer .contact-info, footer.it-footer .contact-info *, footer.it-footer address, footer.it-footer address * { color: var(--color-neutral-light) !important; } /* Footer section headings */ footer.it-footer h4, footer.it-footer h5, footer.it-footer .monitoring-section h4 { color: var(--color-neutral-light) !important; font-weight: 600; margin-bottom: var(--space-2x); } /* Force left alignment on desktop */ footer.it-footer .contact-info, footer.it-footer .logo-footer, footer.it-footer .monitoring-section { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } footer.it-footer .contact-info ul, footer.it-footer .monitoring-section ul { text-align: left !important; display: block !important; margin-left: 0 !important; margin-right: auto !important; } footer.it-footer address { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } /* Specific alignment for the footer logo */ footer.it-footer .logo-footer { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; margin-bottom: var(--space-4x) !important; } /* Footer link styling */ footer.it-footer a { color: #cbd5e1 !important; /* Lighter shade for links */ text-decoration: none; padding: var(--space-0_5x) 0; display: inline-block; transition: color var(--transition-fast); } footer.it-footer a:hover, footer.it-footer a:focus { color: var(--color-neutral-light) !important; /* Full white on hover/focus */ text-decoration: underline; } /* Footer list styling */ footer.it-footer ul { list-style: none; padding: 0; margin: 0; } footer.it-footer li { margin-bottom: var(--space-1x); color: var(--color-neutral-light) !important; } /* Ensure columns are left-aligned on desktop */ footer.it-footer .it-footer-main .container .row > div:nth-child(1), footer.it-footer .it-footer-main .container .row > div:nth-child(2) { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } /* Desktop Footer Layout (2 columns, left-aligned) */ @media (min-width: 992px) { footer.it-footer .it-footer-main .container .row { display: flex; justify-content: flex-start; /* Align columns to the start */ align-items: flex-start; gap: var(--space-6x); /* Space between columns */ } footer.it-footer .it-footer-main .container .row > div:nth-child(1), footer.it-footer .it-footer-main .container .row > div:nth-child(2) { flex: 1; /* Allow columns to share space */ text-align: left !important; max-width: 50%; /* Prevent columns from becoming too wide */ } } /* Base Mobile Footer Layout (single column, left-aligned) - Will be overridden by specific mobile styles below */ @media (max-width: 991.98px) { footer.it-footer .it-footer-main .container .row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4x); } footer.it-footer .it-footer-main .container .row > div { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } footer.it-footer .monitoring-section, footer.it-footer .monitoring-section ul { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } } /* Ensure footer container width is constrained */ footer.it-footer .it-footer-main .container { max-width: 1200px; margin: 0 auto; background: transparent !important; } /* ========================================================================== * Logo Styles - Optimized * ========================================================================== */ .logo-header, .logo-footer { /* MODIFICATO: Aumenta la dimensione del logo per un maggiore impatto visivo. */ /* Nuovo range: MIN 220px (mobile) | VAL 30vw (reattivo) | MAX 500px (desktop) */ max-width: clamp(220px, 30vw, 500px); /* Responsive max-width aumentata */ width: 100%; /* Ensure image scales down */ height: auto; /* Maintain aspect ratio */ display: block; /* Remove extra space below image */ user-select: none; /* Prevent selection */ margin: var(--space-3x) auto; /* Center logo by default */ } /* Specific margin for footer logo to override default centering */ .logo-footer { margin: var(--space-3x) 0 !important; /* Align left (margin-right: auto is handled elsewhere) */ } /* ========================================================================== * Help & Note Sections - Optimized * ========================================================================== */ /** * Styles for the highlighted help sections. */ .help { background: var(--color-bg-help); border-left: var(--border-width-lg) solid var(--color-action-default); border-radius: var(--radius-md); box-shadow: var(--shadow-component); margin-bottom: var(--space-5x); padding: clamp(var(--space-2x), 4vw, var(--space-3x)); /* Responsive padding */ } /* Indentation for lists within help sections */ .help ul, #limit-message ul { padding-left: 1.5em; margin: 0; } .help li, #limit-message li { margin-bottom: var(--space-1x); } /** * Styles for secondary informational notes. */ .note { color: var(--color-text-note); display: block; margin: var(--space-1x) 0 var(--space-2x); font-style: italic; font-size: var(--font-small); line-height: 1.4; } /* ========================================================================== * Custom Fieldsets - Optimized * ========================================================================== */ /** * Custom styling for fieldset elements for better visual grouping. */ .custom-fieldset { background: var(--color-bg-component); border: var(--border-width-md) solid var(--color-neutral-border-light); border-radius: var(--radius-md); margin-bottom: var(--space-5x); padding: clamp(var(--space-2x), 4vw, var(--space-3x)); position: relative; /* Needed for legend positioning */ } /* Subtle focus state for accessibility */ .custom-fieldset:focus-within { border-color: var(--color-action-default); box-shadow: 0 0 0 2px rgba(0, 90, 156, 0.1); } /** * Styles for the legend element within custom fieldsets. */ .custom-legend { color: var(--color-text-default); font-size: var(--font-h3); font-weight: 700; padding: 0 var(--space-1x); background: var(--color-bg-component); /* Match fieldset background */ margin-left: var(--space-1x); /* Position adjustments might be needed depending on exact layout */ } /* ========================================================================== * Card Highlight - Optimized * ========================================================================== */ /** * Styles for highlighted card-like containers, often used for form sections. */ .card-highlight { background: var(--color-bg-component); border: var(--border-width-sm) solid var(--color-action-default); /* Use action color for border */ border-radius: var(--radius-md); box-shadow: var(--shadow-component); padding: clamp(var(--space-2x), 4vw, var(--space-3x)); position: relative; } /* ========================================================================== * Input Groups - Optimized * ========================================================================== */ .input-group { position: relative; /* For positioning addons/text */ } /* Styling for text addons within input groups */ .input-group-text { background: transparent !important; /* Override Bootstrap background */ border: none !important; padding: var(--space-1x) !important; color: var(--color-text-light); font-weight: 500; } /* ========================================================================== * Code & Command Boxes - Optimized * ========================================================================== */ /** * Styles for displaying code snippets or terminal commands. */ .cmd-box { background: var(--color-bg-code); border: var(--border-width-md) solid var(--color-action-default); border-radius: var(--radius-md); color: var(--color-text-code); font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; /* Monospace font stack */ font-size: var(--font-small); margin: var(--space-2x) 0; overflow-x: auto; /* Enable horizontal scrolling for long lines */ padding: clamp(var(--space-1x), 3vw, var(--space-2x)); white-space: pre-wrap; /* Preserve whitespace and wrap lines */ word-break: break-word; /* Break long words if necessary */ user-select: text; /* Allow text selection */ line-height: 1.5; position: relative; /* For pseudo-elemento */ } /* Add a visual cue (like a terminal prompt) */ .cmd-box::before { content: "»"; color: var(--color-brand-secondary); margin-right: var(--space-1x); font-weight: bold; } /* ========================================================================== * Station Checkbox List - Optimized * ========================================================================== */ /** * Styles for the container holding the station/channel selection checkboxes. */ .station-header-group { margin-top: var(--space-4x); /* Space above the checkbox group */ } /* Spacing for the 'Select All' checkbox */ .station-header-group .form-check { margin-bottom: var(--space-2x) !important; padding: var(--space-1x); border-radius: var(--radius-sm); } /* Grid layout for the checkbox list */ .station-checkbox-list { display: grid; gap: var(--space-1x); grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); /* Responsive columns */ max-height: min(400px, 50vh); /* Limit height and enable scrolling */ overflow-y: auto; padding: var(--space-1x); border: var(--border-width-sm) solid var(--color-neutral-border-light); border-radius: var(--radius-md); background: var(--color-neutral-light); } /* ========================================================================== * Form Validation Feedback - Optimized * ========================================================================== */ /** * Styles for displaying validation error messages. */ .invalid-feedback { display: none; /* Hidden by default */ color: var(--color-state-error); margin-top: var(--space-1x); font-weight: 600; font-size: var(--font-xsmall); padding: var(--space-0_5x) var(--space-1x); background: var(--color-state-error-light); border-radius: var(--radius-sm); border-left: var(--border-width-sm) solid var(--color-state-error); width: fit-content; /* Size to content */ max-width: 100%; } /* Show feedback when associated input has .is-invalid */ .is-invalid ~ .invalid-feedback { display: block; } /* Style invalid input fields */ .is-invalid { border-color: var(--color-state-error) !important; box-shadow: 0 0 0 0.1rem rgba(211, 47, 47, 0.1); /* Subtle red glow */ } /* Style invalid checkbox list containers */ #station-checkbox-list.is-invalid, #channel-checkbox-list.is-invalid { border-color: var(--color-state-error) !important; box-shadow: 0 0 0 0.1rem rgba(211, 47, 47, 0.1) !important; } /* ========================================================================== * Copy Button - Optimized * ========================================================================== */ .copy-btn { background: var(--color-action-default); border: none; border-radius: var(--radius-sm); color: var(--color-neutral-light); cursor: pointer; margin-top: var(--space-1x); padding: var(--space-1x) var(--space-3x); text-decoration: none; display: inline-flex; /* Align icon and text */ align-items: center; gap: var(--space-1x); font-size: var(--font-small); font-weight: 600; user-select: none; /* Prevent text selection */ transition: background-color var(--transition-normal); width: fit-content; } .copy-btn:hover, .copy-btn:focus-visible { background-color: var(--color-action-hover); color: var(--color-neutral-light); } .copy-btn:focus-visible { outline: var(--border-width-focus) solid var(--color-action-default); outline-offset: var(--space-0_5x); } .copy-btn:active { background-color: var(--color-action-active); } /* ========================================================================== * Copy Feedback Message - Optimized * ========================================================================== */ /** * Styles for the "Command copied!" feedback message. */ .copy-feedback { color: var(--color-state-success); display: none; /* Hidden by default, shown via JS */ margin-left: var(--space-2x); font-weight: 600; font-size: var(--font-small); padding: var(--space-0_5x) var(--space-1x); background: var(--color-state-success-light); border-radius: var(--radius-sm); width: fit-content; } /* ========================================================================== * Alerts - Optimized * ========================================================================== */ /** * Base styles and specific styles for different alert types (info, success, warning, error). * All alerts are now inline-flex and width: auto by default (Desktop-first). * They stack vertically on narrow mobile screens (<768px). */ /* Alert Info */ .alert.alert-info, .alert-info { border: var(--border-width-sm) solid var(--color-brand-secondary); border-radius: var(--radius-md); padding: var(--space-2x) var(--space-3x); background: var(--color-state-info-light); color: var(--color-text-default); font-weight: 600; text-align: left; display: inline-flex; /* Align icon and text, size to content */ align-items: flex-start; /* Align icon to top of text */ gap: var(--space-1x); font-size: var(--font-body); line-height: 1.5; white-space: normal; /* Allow text wrapping */ word-spacing: normal; word-break: normal; overflow-wrap: break-word; width: auto; /* Size to content */ max-width: 100%; margin-left: 0; margin-right: auto; margin-bottom: var(--space-3x); letter-spacing: normal; } .alert.alert-info::before, .alert-info::before { content: ""; flex-shrink: 0; /* Prevent icon shrinking */ width: 1.25em; height: 1.25em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2318b3dd'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); /* SVG info icon */ background-repeat: no-repeat; background-position: center; background-size: contain; margin-top: 0.125em; /* Fine-tune vertical alignment */ } /* Specific Info Message (#limit-message) */ #limit-message { display: flex !important; /* Ensure flex display */ align-items: flex-start; gap: var(--space-1x); padding: var(--space-2x) var(--space-3x) !important; margin-top: var(--space-2x); font-style: italic; color: var(--color-text-default); background-color: var(--color-state-info-light); border: var(--border-width-sm) solid var(--color-brand-secondary); border-radius: var(--radius-md); line-height: 1.5; font-size: var(--font-body); font-family: inherit; box-sizing: border-box; width: auto; /* Size to content */ max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; position: relative; margin-left: 0; margin-right: auto; word-spacing: normal; letter-spacing: normal; } #limit-message svg.icon { /* Style for SVG icon if used */ flex-shrink: 0; height: 1.25em; width: 1.25em; color: var(--color-brand-secondary); margin-top: 0.125em; } #limit-message span { /* Ensure text wraps correctly */ flex: 1; min-width: 0; } /* Alert Success (Result Message) - Now inline-flex and auto-width globally */ .alert.alert-success.alert-result, .alert-success.alert-result { margin-top: var(--space-2x); border: var(--border-width-sm) solid var(--color-state-success); border-radius: var(--radius-md); padding: var(--space-2x) var(--space-3x); background: var(--color-state-success-light); color: var(--color-state-success); font-weight: 600; text-align: left; display: inline-flex; /* *** CORRETTO: come alert-info *** */ align-items: flex-start; /* *** CORRETTO: come alert-info *** */ gap: var(--space-1x); /* *** CORRETTO: come alert-info *** */ font-size: var(--font-body); line-height: 1.5; white-space: normal; word-spacing: normal; word-break: normal; overflow-wrap: break-word; width: auto; /* *** CORRETTO: come alert-info *** */ max-width: 100%; margin-left: 0; margin-right: auto; margin-bottom: var(--space-3x); letter-spacing: normal; } .alert.alert-success.alert-result::before, .alert-success.alert-result::before { content: ""; flex-shrink: 0; /* *** CORRETTO: come alert-info *** */ width: 1.25em; height: 1.25em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e7d32'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; margin-top: 0.125em; /* *** CORRETTO: come alert-info *** */ } /* Alert Warning */ .alert.alert-warning, .alert-warning { border: var(--border-width-sm) solid var(--color-state-warning); /* (Styles similar to alert-info) */ border-radius: var(--radius-md); padding: var(--space-2x) var(--space-3x); background: var(--color-state-warning-light); color: var(--color-state-warning); font-weight: 600; text-align: left; display: inline-flex; align-items: flex-start; gap: var(--space-1x); font-size: var(--font-body); line-height: 1.5; white-space: normal; word-spacing: normal; word-break: normal; overflow-wrap: break-word; width: auto; max-width: 100%; margin-left: 0; margin-right: auto; margin-bottom: var(--space-3x); letter-spacing: normal; } .alert.alert-warning::before, .alert-warning::before { content: ""; flex-shrink: 0; width: 1.25em; height: 1.25em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f57c00'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); /* SVG warning icon */ background-repeat: no-repeat; background-position: center; background-size: contain; margin-top: 0.125em; } /* Alert Error/Danger */ .alert.alert-danger, .alert-danger { border: var(--border-width-sm) solid var(--color-state-error); /* (Styles similar to alert-info) */ border-radius: var(--radius-md); padding: var(--space-2x) var(--space-3x); background: var(--color-state-error-light); color: var(--color-state-error); font-weight: 600; text-align: left; display: inline-flex; align-items: flex-start; gap: var(--space-1x); font-size: var(--font-body); line-height: 1.5; white-space: normal; word-spacing: normal; word-break: normal; overflow-wrap: break-word; width: auto; max-width: 100%; margin-left: 0; margin-right: auto; margin-bottom: var(--space-3x); letter-spacing: normal; } .alert.alert-danger::before, .alert-danger::before { content: ""; flex-shrink: 0; width: 1.25em; height: 1.25em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d32f2f'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); /* SVG error icon */ background-repeat: no-repeat; background-position: center; background-size: contain; margin-top: 0.125em; } /* Ensure code blocks within alerts maintain proper formatting */ .alert .cmd-box { white-space: pre-wrap; word-spacing: normal; word-break: normal; font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; font-size: var(--font-small); line-height: 1.5; margin: var(--space-2x) 0; width: 100%; } /* ========================================================================== * Copy Button Container Structure * ========================================================================== */ /* Container for copy button and result alert */ .copy-button-container { display: block; /* Ensure it takes full width */ width: 100%; margin-top: var(--space-2x); } /* Wrapper for button and feedback text */ .copy-btn-wrapper { display: flex; align-items: center; gap: var(--space-2x); flex-wrap: wrap; /* Allow feedback to wrap on small screens */ margin-bottom: var(--space-1x); } /* Ensure result alert is always below the button wrapper */ .alert-result-container { width: 100%; display: block; /* Ensures it sits on its own line */ } /* ========================================================================== * Hidden Elements * ========================================================================== */ /* Hide the queryauth checkbox and its label completely */ #queryauth, #queryauth + label { display: none !important; } /* ========================================================================== * Form Styles - Optimized * ========================================================================== */ /** * Consistent styling for form selects and inputs, overriding Bootstrap defaults. */ .form-select.it-select, .form-control.it-input { border: var(--border-width-sm) solid var(--color-neutral-border) !important; border-radius: var(--radius-sm) !important; padding: var(--space-1x) var(--space-2x) !important; font-size: var(--font-body) !important; background: var(--color-neutral-light) !important; } /* Consistent focus style for form elements */ .form-select.it-select:focus, .form-control.it-input:focus { border-color: var(--color-action-default) !important; box-shadow: 0 0 0 2px rgba(0, 90, 156, 0.1) !important; /* Subtle focus glow */ outline: none; /* Remove default browser outline */ } /* Specific overrides for elements within a .card-highlight */ .card-highlight #channel.form-control { border: var(--border-width-sm) solid var(--color-neutral-border-light) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; background-color: var(--color-neutral-light) !important; } .card-highlight #channel.form-control:focus { border-color: var(--color-action-default) !important; box-shadow: 0 0 0 2px rgba(0, 90, 156, 0.1) !important; } /* ========================================================================== * Custom Scrollbar - Optimized * ========================================================================== */ /** * Custom scrollbar styling for the station checkbox list (WebKit browsers). */ .station-checkbox-list::-webkit-scrollbar { width: 6px; /* Narrower scrollbar */ } .station-checkbox-list::-webkit-scrollbar-thumb { background-color: rgba(var(--shadow-color-accent), 0.3); /* Semi-transparent thumb */ border-radius: var(--radius-sm); } .station-checkbox-list::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--shadow-color-accent), 0.5); /* Darker thumb on hover */ } .station-checkbox-list::-webkit-scrollbar-track { background-color: var(--color-bg-note); /* Light track background */ border-radius: var(--radius-sm); } /* ========================================================================== * Media Queries & Responsive Adjustments - Optimized * ========================================================================== */ /** * Tablet and smaller screens (max-width: 991.98px) */ @media (max-width: 991.98px) { /* Adjust main container */ .site-container { border-radius: var(--radius-lg); margin: var(--space-3x) auto; padding: var(--space-2x); width: 97%; } /* Enlarge logos slightly */ .logo-header, .logo-footer { max-width: clamp(220px, 30vw, 500px); /* Responsive max-width */ } /* --- Mobile Footer Layout --- */ /* Stack columns vertically and center them */ .it-footer-main .container .row { display: flex; flex-direction: column; align-items: center; /* Center the column blocks */ gap: var(--space-5x); /* Consistent spacing between blocks */ } /* Reorder footer blocks: Networks first */ .it-footer-main .container .row > div:nth-child(2) { /* Monitoring Networks column */ order: -1; /* Move to the top */ margin-bottom: 0 !important; /* Remove bottom margin, use gap instead */ } .logo-footer { order: initial; /* Reset order if previously set */ } .it-footer-main .container .row > div:nth-child(1) { /* Logo + Contacts column */ order: 1; /* Move below Networks */ } /* Center text content within footer columns */ footer.it-footer .row > div { text-align: center !important; margin: 0 auto; /* Ensure block itself is centered */ } /* Override specific text-start utility class */ footer.it-footer .row > div .text-start { text-align: center !important; } /* Center the footer logo block */ footer.it-footer .it-brand-wrapper { margin-left: auto !important; margin-right: auto !important; text-align: center !important; display: block !important; } /* Center the image within the logo block */ footer.it-footer .it-brand-wrapper img { margin: 0 auto !important; display: block !important; } /* Center address text */ footer.it-footer address { text-align: center !important; } /* Center list items (by making the ul inline-block) */ footer.it-footer ul { display: inline-block; text-align: center !important; } /* --- Mobile Header Adjustments --- */ /* Center header content horizontally */ .it-header-center-wrapper .container > .row > .col-12 { text-align: center; } /* Vertical centering rule is global */ /* Make language buttons smaller and less tall */ .lang-selector .btn-group .btn { padding: 0.125rem var(--space-0_5x); /* Reduce vertical padding */ font-size: var(--font-xsmall); min-width: 55px; /* Reduce min-width */ line-height: 1.3; /* Reduce line-height */ } /* --- Mobile Alert Width Adjustments --- */ /* All alerts inherit width:auto from global scope */ #limit-message svg.icon { height: 1.125em; width: 1.125em; } /* Ensure copy button container behaves correctly */ .copy-button-container { display: block; } .copy-btn-wrapper { justify-content: flex-start; /* Align button/feedback to the start */ width: 100%; } } /** * Smaller Mobile screens (max-width: 767.98px) */ @media (max-width: 767.98px) { /* Adjust base font sizes for smaller screens */ :root { --font-h1: clamp(1.3rem, 5vw, 1.7rem); --font-h2: clamp(1.1rem, 4vw, 1.4rem); } /* Reduce container margins/padding */ .site-container { margin: var(--space-2x) auto; padding: var(--space-2x); border-radius: var(--radius-md); } /* Adjust heading sizes and margins */ .it-title { font-size: var(--font-h1); margin-bottom: var(--space-3x); } h2 { font-size: var(--font-h2); margin-top: var(--space-4x); } /* Adjust list padding */ .help ul, #limit-message ul { padding-left: 1.2em; } .help li, #limit-message li { font-size: var(--font-body); } /* Il comportamento globale (inline-flex, width: auto, max-width: 100%) è ora corretto */ /* Stack copy button and feedback vertically */ .copy-button-container { display: block; } .copy-btn-wrapper { flex-direction: column; align-items: flex-start; gap: var(--space-1x); } .copy-btn { width: 100%; /* Full width button */ justify-content: center; } .copy-feedback { margin-left: 0; text-align: center; width: 100%; } /* Force single column for checkbox list */ .station-checkbox-list { grid-template-columns: 1fr; max-height: 300px; } /* Center language buttons group */ .lang-selector .btn-group { width: 100%; justify-content: center; } /* Adjust language button width if needed */ .lang-selector .btn-group .btn { flex: 0 1 auto; /* Prevent growing, allow shrinking */ min-width: 70px; /* Styles inherited from tablet query */ } } /** * Very Small Mobile screens (max-width: 480px) */ @media (max-width: 480px) { /* Reduce alert padding */ #limit-message, .alert.alert-info, .alert-info, .alert.alert-success.alert-result, .alert-success.alert-result, .alert.alert-warning, .alert-warning, .alert.alert-danger, .alert-danger { padding: var(--space-2x) var(--space-1x) !important; /* Width/Display inherited from global scope */ } #limit-message svg.icon { height: 1em; /* Slightly smaller icon */ width: 1em; } /* Minor adjustments to copy button layout */ .copy-button-container { display: block; } .copy-btn-wrapper { gap: var(--space-1x); } .copy-btn { width: 100%; justify-content: center; } /* Reduce max-height for checkbox list */ .station-checkbox-list { max-height: 250px; grid-template-columns: 1fr; gap: var(--space-0_5x); } /* Adjust language button width */ .lang-selector .btn-group .btn { min-width: 60px; /* Other styles inherited */ } .copy-btn { width: 100%; justify-content: center; } /* Reduce overall spacing */ .site-container { padding: var(--space-1x); margin: var(--space-1x) auto; } .help, .custom-fieldset, .card-highlight { padding: var(--space-2x); margin-bottom: var(--space-3x); } /* Compact footer */ footer.it-footer { padding: var(--space-4x) 0 0 0; margin-top: var(--space-6x); } footer.it-footer .footer-copy { padding: var(--space-2x) 0; font-size: 0.75rem; /* Smaller copyright text */ } } /* ========================================================================== * Accessibility & User Preferences * ========================================================================== */ /** * Reduce motion for users who prefer it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; /* Disable smooth scrolling */ } } /** * Increase contrast for users who prefer it. */ @media (prefers-contrast: high) { :root { --color-neutral-border: #000; --color-action-default: #0000ff; /* High contrast blue */ --color-state-error: #ff0000; /* High contrast red */ } } /** * Ensure visible focus states for keyboard navigation. */ *:focus-visible { outline: var(--border-width-focus) solid var(--color-action-default); outline-offset: var(--space-0_5x); } /** * Style text selection highlight. */ ::selection { background: rgba(0, 90, 156, 0.2); /* Light blue highlight */ color: var(--color-text-default); } /* ========================================================================== * Utility Classes * ========================================================================== */ /** * Visually hide an element while keeping it accessible to screen readers. * Standard accessibility pattern. */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; /* Avoid affecting layout */ overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; /* Prevent line breaks */ border: 0 !important; } /** * Simple text centering utility. */ .text-center { text-align: center; } /** * Deprecated alias for visually-hidden (common in older frameworks). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }