/* assets/css/style.css */ /* ----------------------------- 0) Base tokens (common) ------------------------------ */ :root{ /* radius / spacing */ --bs-border-radius: .85rem; --bs-border-radius-sm: .6rem; --bs-border-radius-lg: 1.1rem; /* focus ring (cyan) */ --focus-ring: 0 0 0 .2rem rgba(0, 209, 255, .25); /* brand accents (cyan / steel) */ --brand-cyan: #00d1ff; --brand-cyan-2: #38bdf8; --brand-steel: #2b3440; /* subtle shadows */ --shadow-soft: 0 10px 30px rgba(0,0,0,.18); --shadow-tight: 0 6px 16px rgba(0,0,0,.16); } /* Background image helper (optional) You can set your page background in your template: ... */ .bg-s3ntyn3l{ min-height: calc(100vh-3rem); background-image: url("../img/s3ntin3l-fond-01.png"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; /* optionnel */ } html[data-bs-theme="dark"] .bg-s3ntyn3l{ background-image: url("../img/s3ntin3l-fond-dark.png"); } html[data-bs-theme="light"] .bg-s3ntyn3l{ background-image: url("../img/s3ntin3l-fond-light.png"); } /* Make content readable above cinematic background */ .bg-s3ntyn3l::before{ content:""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 40%, rgba(0, 209, 255, .10), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55)); z-index: -1; } /* ----------------------------- 1) DARK THEME (data-bs-theme="dark") ------------------------------ */ html[data-bs-theme="dark"]{ --bs-body-bg: #070b13; --bs-body-color: #e6edf6; /* surfaces */ --bs-tertiary-bg: rgba(15, 27, 51, .72); /* used by bg-body-tertiary */ --bs-secondary-bg: rgba(10, 18, 34, .74); --surface-1: rgba(9, 16, 30, .55); /*rgba(15, 27, 51, .72);*/ --surface-2: rgba(9, 16, 30, .52); /* borders */ --bs-border-color: rgba(255,255,255,.12); /* links */ --bs-link-color: var(--brand-cyan); --bs-link-hover-color: var(--brand-cyan-2); --bs-back-color :rgba(9, 16, 30, .65); --bs-table-s3-bg :rgba(9, 16, 30, .75); } /* ----------------------------- 2) LIGHT THEME (data-bs-theme="light") ------------------------------ */ html[data-bs-theme="light"]{ --bs-body-bg: #f6f8fc; --bs-body-color: #0b1220; --bs-tertiary-bg: rgba(255,255,255,.82); --bs-secondary-bg: rgba(245, 248, 252, .92); --surface-1: rgba(255,255,255,.86); --surface-2: rgba(245, 248, 252, .20); --bs-border-color: rgba(2, 6, 23, .12); --bs-link-color: #0089b5; --bs-link-hover-color: #00a7d9; --bs-back-color :rgba(245, 248, 252, .60); --bs-table-s3-bg :rgba(245, 248, 252, .60); } /* ----------------------------- 3) Global component polish ------------------------------ */ /* Cards / panels / dropdown / offcanvas */ .card, .dropdown-menu, .offcanvas, .modal-content{ border-radius: var(--bs-border-radius-lg); box-shadow: var(--shadow-soft); border-color: var(--bs-border-color); } .dropdown-menu{ --bs-dropdown-padding-y: 0 !important; --bs-dropdown-font-size: 0.875rem; } .dropdown-menu hr { margin:0; } html[data-bs-theme="dark"] .card { --bs-card-bg: var(--bs-back-color); } html[data-bs-theme="light"] .card { --bs-card-bg: var(--bs-back-color); } html[data-bs-theme="dark"] table{ --bs-table-bg :var(--bs-table-s3-bg) } html[data-bs-theme="light"] table{ --bs-table-bg :var(--bs-table-s3-bg) } /* Dropdown menu: more “glass” on dark */ html[data-bs-theme="dark"] .dropdown-menu{ background: var(--surface-1); backdrop-filter: blur(10px); } html[data-bs-theme="light"] .dropdown-menu{ background: var(--surface-1); backdrop-filter: blur(10px); } /* Offcanvas: same surfaces */ html[data-bs-theme="dark"] .offcanvas{ background: var(--surface-2); backdrop-filter: blur(10px); } html[data-bs-theme="light"] .offcanvas{ background: var(--surface-2); backdrop-filter: blur(10px); } /* Navbar: works with bg-body-tertiary */ .navbar.bg-body-tertiary{ background: var(--surface-2) !important; /*backdrop-filter: blur(10px);*/ border-bottom: 1px solid var(--bs-border-color); } /* Buttons */ html[data-bs-theme="dark"] .btn{ color:#ffffff; } html[data-bs-theme="light"] .btn{ color:#ffffff; } .btn{ border-radius: var(--bs-border-radius); } .btn:focus{ box-shadow: none; } .btn.show{ border: none; } [data-bs-theme=dark] { --brand-cyan: blue; } [data-bs-theme=light] { --brand-cyan: red; } /* Primary button as brand-cyan */ .btn-primary{ --bs-btn-bg: var(--brand-cyan); --bs-btn-border-color: rgba(0,0,0,0); --bs-btn-hover-bg: var(--brand-cyan-2); --bs-btn-hover-border-color: rgba(0,0,0,0); --bs-btn-active-bg: #0ea5e9; --bs-btn-active-border-color: rgba(0,0,0,0); --bs-btn-color: #031018; --bs-btn-hover-color: #031018; } /* Outline secondary that looks good on both themes */ .btn-outline-secondary{ border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .btn-outline-secondary{ color: rgba(255,255,255,.86); } html[data-bs-theme="light"] .btn-outline-secondary{ color: rgba(2,6,23,.86); } /* Inputs */ .form-control, .form-select{ border-radius: var(--bs-border-radius); border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select{ /*background: rgba(5, 10, 20, .55);*/ color: var(--bs-body-color); } .form-control:focus, .form-select:focus{ box-shadow: var(--focus-ring); border-color: rgba(0, 209, 255, .45); } /* List group */ .list-group-item{ border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .list-group-item{ background: var(--bs-back-color); color: var(--bs-body-color); } html[data-bs-theme="light"] .list-group-item{ background: var(--bs-back-color); color: var(--bs-body-color); } html[data-bs-theme="dark"] .list-group-item-action:hover{ background: rgba(0, 209, 255, .10); } html[data-bs-theme="light"] .list-group-item-action:hover{ background: rgba(245, 248, 252, .20) } /* Badges */ .badge.text-bg-light{ background: rgba(255,255,255,.92) !important; color: #0b1220 !important; } /* Alerts: slightly more cinematic */ html[data-bs-theme="dark"] .alert{ background: rgba(9, 16, 30, .65); border-color: var(--bs-border-color); } /* Optional: keep headings crisp on dark */ html[data-bs-theme="dark"] h1, html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3{ text-shadow: 0 1px 0 rgba(0,0,0,.35); } :root, [data-bs-theme=light] { --bs-blue: #008cba; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #e83e8c; --bs-red: #f04124; --bs-orange: #fd7e14; --bs-yellow: #e99002; --bs-green: #43ac6a; --bs-teal: #20c997; --bs-cyan: #5bc0de; --bs-black: #000; --bs-white: #fff; --bs-gray: #888; --bs-gray-dark: #333; --bs-gray-100: #f8f9fa; --bs-gray-200: #eee; --bs-gray-300: #dee2e6; --bs-gray-400: #ccc; --bs-gray-500: #adb5bd; --bs-gray-600: #888; --bs-gray-700: #495057; --bs-gray-800: #333; --bs-gray-900: #222; --bs-primary: #008cba; --bs-secondary: #eee; --bs-success: #43ac6a; --bs-info: #5bc0de; --bs-warning: #e99002; --bs-danger: #f04124; --bs-light: #eee; --bs-dark: #333; --bs-primary-rgb: 0, 140, 186; --bs-secondary-rgb: 238, 238, 238; --bs-success-rgb: 67, 172, 106; --bs-info-rgb: 91, 192, 222; --bs-warning-rgb: 233, 144, 2; --bs-danger-rgb: 240, 65, 36; --bs-light-rgb: 238, 238, 238; --bs-dark-rgb: 51, 51, 51; --bs-primary-text-emphasis: #00384a; --bs-secondary-text-emphasis: #5f5f5f; --bs-success-text-emphasis: #1b452a; --bs-info-text-emphasis: #244d59; --bs-warning-text-emphasis: #5d3a01; --bs-danger-text-emphasis: #601a0e; --bs-light-text-emphasis: #495057; --bs-dark-text-emphasis: #495057; --bs-primary-bg-subtle: #cce8f1; --bs-secondary-bg-subtle: #fcfcfc; --bs-success-bg-subtle: #d9eee1; --bs-info-bg-subtle: #def2f8; --bs-warning-bg-subtle: #fbe9cc; --bs-danger-bg-subtle: #fcd9d3; --bs-light-bg-subtle: #fcfcfd; --bs-dark-bg-subtle: #ccc; --bs-primary-border-subtle: #99d1e3; --bs-secondary-border-subtle: #f8f8f8; --bs-success-border-subtle: #b4dec3; --bs-info-border-subtle: #bde6f2; --bs-warning-border-subtle: #f6d39a; --bs-danger-border-subtle: #f9b3a7; --bs-light-border-subtle: #eee; --bs-dark-border-subtle: #adb5bd; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; --bs-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #222; --bs-body-color-rgb: 34, 34, 34; --bs-body-bg: #fff; --bs-body-bg-rgb: 255, 255, 255; --bs-emphasis-color: #000; --bs-emphasis-color-rgb: 0, 0, 0; --bs-secondary-color: rgba(34, 34, 34, 0.75); --bs-secondary-color-rgb: 34, 34, 34; --bs-secondary-bg: #eee; --bs-secondary-bg-rgb: 238, 238, 238; --bs-tertiary-color: rgba(34, 34, 34, 0.5); --bs-tertiary-color-rgb: 34, 34, 34; --bs-tertiary-bg: #f8f9fa; --bs-tertiary-bg-rgb: 248, 249, 250; --bs-heading-color: inherit; --bs-link-color: #008cba; --bs-link-color-rgb: 0, 140, 186; --bs-link-decoration: underline; --bs-link-hover-color: #007095; --bs-link-hover-color-rgb: 0, 112, 149; --bs-code-color: #e83e8c; --bs-highlight-color: #222; --bs-highlight-bg: #fbe9cc; --bs-border-width: 1px; --bs-border-style: solid; --bs-border-color: #dee2e6; --bs-border-color-translucent: rgba(0, 0, 0, 0.175); --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 1rem; --bs-border-radius-xxl: 2rem; --bs-border-radius-2xl: var(--bs-border-radius-xxl); --bs-border-radius-pill: 50rem; --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: rgba(0, 140, 186, 0.25); --bs-form-valid-color: #43ac6a; --bs-form-valid-border-color: #43ac6a; --bs-form-invalid-color: #f04124; --bs-form-invalid-border-color: #f04124; } [data-bs-theme=dark] { color-scheme: dark; --bs-body-color: #dee2e6; --bs-body-color-rgb: 222, 226, 230; --bs-body-bg: #222; --bs-body-bg-rgb: 34, 34, 34; --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: rgba(222, 226, 230, 0.75); --bs-secondary-color-rgb: 222, 226, 230; --bs-secondary-bg: #333; --bs-secondary-bg-rgb: 51, 51, 51; --bs-tertiary-color: rgba(222, 226, 230, 0.5); --bs-tertiary-color-rgb: 222, 226, 230; --bs-tertiary-bg: #2b2b2b; --bs-tertiary-bg-rgb: 43, 43, 43; --bs-primary-text-emphasis: #66bad6; --bs-secondary-text-emphasis: whitesmoke; --bs-success-text-emphasis: #8ecda6; --bs-info-text-emphasis: #9dd9eb; --bs-warning-text-emphasis: #f2bc67; --bs-danger-text-emphasis: #f68d7c; --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #dee2e6; --bs-primary-bg-subtle: #001c25; --bs-secondary-bg-subtle: #303030; --bs-success-bg-subtle: #0d2215; --bs-info-bg-subtle: #12262c; --bs-warning-bg-subtle: #2f1d00; --bs-danger-bg-subtle: #300d07; --bs-light-bg-subtle: #333; --bs-dark-bg-subtle: #1a1a1a; --bs-primary-border-subtle: #005470; --bs-secondary-border-subtle: #8f8f8f; --bs-success-border-subtle: #286740; --bs-info-border-subtle: #377385; --bs-warning-border-subtle: #8c5601; --bs-danger-border-subtle: #902716; --bs-light-border-subtle: #495057; --bs-dark-border-subtle: #333; --bs-heading-color: inherit; --bs-link-color: #66bad6; --bs-link-hover-color: #85c8de; --bs-link-color-rgb: 102, 186, 214; --bs-link-hover-color-rgb: 133, 200, 222; --bs-code-color: #f18bba; --bs-highlight-color: #dee2e6; --bs-highlight-bg: #5d3a01; --bs-border-color: #495057; --bs-border-color-translucent: rgba(255, 255, 255, 0.15); --bs-form-valid-color: #8ecda6; --bs-form-valid-border-color: #8ecda6; --bs-form-invalid-color: #f68d7c; --bs-form-invalid-border-color: #f68d7c; }