/* ========================================================================== Design System - Color Palette & Variables Primary: Deep Teal #1b646d | Accent: Warm Gold | Mood: Dark & Premium ========================================================================== */ :root { /* ── Fonts ── */ --font-heading: "Rajdhani", sans-serif; --font-body: "Inter", sans-serif; /* ── Primary (Deep Teal) ── */ --primary-50: #e8f4f5; --primary-100: #c5e3e6; --primary-200: #9ecfd4; --primary-300: #74bac1; --primary-400: #4fa5ae; --primary-500: #2a8f9b; --primary-600: #1b646d; /* ← Brand color */ --primary-700: #155158; --primary-800: #103e43; --primary-900: #0b2b2e; /* ── Accent (Warm Gold) ── */ --accent-50: #fdf6ec; --accent-100: #f9e6c8; --accent-200: #f2cf96; --accent-300: #e8b562; --accent-400: #d4a04a; --accent-500: #c49a5c; --accent-600: #a87d3a; --accent-700: #8a6430; --accent-800: #6d4e26; --accent-900: #4a351a; /* ── Orange (Burnt / Terracotta) ── */ --orange-50: #fef3ec; --orange-100: #fce0c8; --orange-200: #f8c49a; --orange-300: #f0a56b; --orange-400: #e8884a; --orange-500: #d47630; /* ← Orange principal */ --orange-600: #b5622a; --orange-700: #934e22; --orange-800: #713b1a; --orange-900: #4e2912; /* ── Neutrals (Cool-tinted) ── */ --neutral-50: #f8fafb; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* ── Semantic ── */ --success: #16a34a; --success-light:#dcfce7; --warning: #d97706; --warning-light:#fef3c7; --error: #dc2626; --error-light: #fee2e2; --info: #2a8f9b; --info-light: #e8f4f5; /* ── Spacing (8px base) ── */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 3rem; /* 48px */ --space-6: 4rem; /* 64px */ --space-8: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* ── Border Radius ── */ --radius-sm: 4px; --radius: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ── Transitions ── */ --transition-fast: 150ms ease; --transition: 250ms ease; --transition-slow: 400ms ease; } /* ── Light Mode (default) ── */ :root { --bg: #faf7f2; --bg-surface: #f3efe8; --bg-elevated: #ffffff; --text-primary: var(--neutral-900); --text-secondary: var(--neutral-500); --text-muted: var(--neutral-400); --text-inverse: #ffffff; --border: var(--neutral-200); --border-strong: var(--neutral-300); --primary: var(--primary-600); --primary-hover: var(--primary-700); --primary-text: #ffffff; --accent: var(--accent-500); --accent-hover: var(--accent-600); --accent-text: #ffffff; --orange: var(--orange-500); --orange-hover: var(--orange-600); --orange-text: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12); } /* ── Warm Dark Mode ── Fond profond #0D1017 avec textes et accents chauds. Activation : ajouter la classe .theme-warm-dark sur ou ──────────────────────────────────────────────────────────────────── */ .theme-warm-dark { --bg: #0D1017; --bg-surface: #151921; --bg-elevated: #1c212b; --text-primary: #f1ece5; --text-secondary: #a89f93; --text-muted: #5e5649; --text-inverse: #0D1017; --border: #232a34; --border-strong: #343c48; --primary: var(--primary-400); --primary-hover: var(--primary-300); --primary-text: #0D1017; --accent: var(--accent-300); --accent-hover: var(--accent-200); --accent-text: #0D1017; --orange: var(--orange-400); --orange-hover: var(--orange-300); --orange-text: #0D1017; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.50); } /* Warm Dark — heading variant overrides */ .theme-warm-dark .heading--glitch h1, .theme-warm-dark .heading--glitch h2, .theme-warm-dark .heading--glitch h3 { text-shadow: 2px 2px 0 #1c212b, -1px -1px 0 rgba(212, 118, 48, 0.3); } .theme-warm-dark .heading--highlight mark, .theme-warm-dark .heading--highlight .highlight { background: linear-gradient(180deg, transparent 50%, rgba(196, 154, 92, 0.25) 50%); } /* ── Dark Mode (cold — system preference) ── */ @media (prefers-color-scheme: dark) { :root:not(.theme-warm-dark) { --bg: #0c1117; --bg-surface: #141b24; --bg-elevated: #1a2332; --text-primary: var(--neutral-100); --text-secondary: var(--neutral-400); --text-muted: var(--neutral-600); --text-inverse: var(--neutral-900); --border: var(--neutral-800); --border-strong: var(--neutral-700); --primary: var(--primary-400); --primary-hover: var(--primary-300); --primary-text: var(--neutral-900); --accent: var(--accent-300); --accent-hover: var(--accent-200); --accent-text: var(--neutral-900); --orange: var(--orange-400); --orange-hover: var(--orange-300); --orange-text: var(--neutral-900); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5); } } /* ========================================================================== Design System - Typography ========================================================================== */ body { margin: 0; font-family: var(--font-body); font-size: 1rem; /* 16px */ font-weight: 400; line-height: 1.6; color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Body Text - Inter ========================================================================== */ p { margin-top: 0; margin-bottom: 1rem; line-height: 1.7; } .lead { font-size: 1.25rem; /* 20px */ font-weight: 400; line-height: 1.6; color: var(--text-secondary); } small, .small { font-size: 0.875rem; /* 14px */ line-height: 1.5; } .caption { font-size: 0.75rem; /* 12px */ font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); } strong, b { font-weight: 600; } /* Links */ a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--primary-hover); } /* Navigation Typography */ .navbar-brand { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text-primary) !important; } /* ========================================================================== START Headings Collection - Rajdhani Semi-Bold Scale ratio ~1.333 (Perfect Fourth) H1: 64px | H2: 48px | H3: 36px | H4: 28px | H5: 22px | H6: 18px ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; margin-top: 0; margin-bottom: 0.5em; color: var(--text-primary); letter-spacing: -0.01em; text-transform: uppercase; } h1 { font-size: 4rem; /* 64px */ line-height: 1.1; letter-spacing: -0.02em; } h2 { font-size: 3rem; /* 48px */ line-height: 1.12; letter-spacing: -0.015em; } h3 { font-size: 2.25rem; /* 36px */ line-height: 1.15; } h4 { font-size: 1.75rem; /* 28px */ line-height: 1.2; } h5 { font-size: 1.375rem; /* 22px */ line-height: 1.25; } h6 { font-size: 1.125rem; /* 18px */ line-height: 1.3; } /* ========================================================================== START Heading Variants Collection Variants: gradient | underline | left-border | badge-label | highlight | outline-stroke | split | decorated | glitch | minimal-dot ========================================================================== */ /* ── Heading Container Base ── */ .heading-container { margin-bottom: var(--space-4); } .heading-container p { color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.7; max-width: 600px; margin-bottom: 0; } .heading-container.text-center p { margin-left: auto; margin-right: auto; } /* ───────────────────────────────────────────────────────────────────────── V1 — Gradient Text Teal → Gold gradient on the title text ───────────────────────────────────────────────────────────────────────── */ .heading--gradient h1, .heading--gradient h2, .heading--gradient h3, .heading--gradient h4, .heading--gradient h5, .heading--gradient h6 { background: linear-gradient(135deg, var(--primary-600), var(--accent-400), var(--orange-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ───────────────────────────────────────────────────────────────────────── V2 — Accent Underline Short colored bar below the title ───────────────────────────────────────────────────────────────────────── */ .heading--underline h1, .heading--underline h2, .heading--underline h3, .heading--underline h4, .heading--underline h5, .heading--underline h6 { padding-bottom: 0.75rem; position: relative; display: inline-block; } .heading--underline h1::after, .heading--underline h2::after, .heading--underline h3::after, .heading--underline h4::after, .heading--underline h5::after, .heading--underline h6::after { content: ""; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--primary), var(--accent)); } .heading--underline.text-center h1, .heading--underline.text-center h2, .heading--underline.text-center h3, .heading--underline.text-center h4, .heading--underline.text-center h5, .heading--underline.text-center h6 { display: block; } .heading--underline.text-center h1::after, .heading--underline.text-center h2::after, .heading--underline.text-center h3::after, .heading--underline.text-center h4::after, .heading--underline.text-center h5::after, .heading--underline.text-center h6::after { left: 50%; transform: translateX(-50%); } /* ───────────────────────────────────────────────────────────────────────── V3 — Left Border Thick left accent line, tech/editorial feel ───────────────────────────────────────────────────────────────────────── */ .heading--left-border { padding-left: var(--space-3); border-left: 4px solid var(--primary); } .heading--left-border p { padding-left: 0; } /* Gradient border variant */ .heading--left-border-gradient { padding-left: var(--space-3); position: relative; } .heading--left-border-gradient::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius-full); background: linear-gradient(180deg, var(--primary), var(--orange), var(--accent)); } /* ───────────────────────────────────────────────────────────────────────── V4 — Badge Label Small uppercase label/tag above the title ───────────────────────────────────────────────────────────────────────── */ .heading--badge .heading-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); background: var(--primary-50); padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: var(--space-2); } .heading--badge .heading-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ───────────────────────────────────────────────────────────────────────── V5 — Highlight Key word has a colored background highlight like a marker ───────────────────────────────────────────────────────────────────────── */ .heading--highlight mark, .heading--highlight .highlight { background: linear-gradient(180deg, transparent 50%, var(--accent-100) 50%); -webkit-text-fill-color: initial; color: inherit; padding: 0 4px; } /* Dark mode highlight */ @media (prefers-color-scheme: dark) { .heading--highlight mark, .heading--highlight .highlight { background: linear-gradient(180deg, transparent 50%, rgba(196, 154, 92, 0.25) 50%); } } /* ───────────────────────────────────────────────────────────────────────── V6 — Outline Stroke Transparent text with visible stroke border — bold & techy ───────────────────────────────────────────────────────────────────────── */ .heading--outline h1, .heading--outline h2, .heading--outline h3 { color: transparent; -webkit-text-stroke: 2px var(--primary); text-stroke: 2px var(--primary); transition: all var(--transition); } .heading--outline:hover h1, .heading--outline:hover h2, .heading--outline:hover h3 { -webkit-text-stroke: 0px; text-stroke: 0px; color: var(--primary); } /* ───────────────────────────────────────────────────────────────────────── V7 — Split Color First word in accent/orange, rest in primary dark ───────────────────────────────────────────────────────────────────────── */ .heading--split .heading-accent { color: var(--primary); } .heading--split .heading-rest { color: var(--text-primary); } /* Orange variant */ .heading--split-orange .heading-accent { color: var(--orange); } /* Gold variant */ .heading--split-gold .heading-accent { color: var(--accent); } /* ───────────────────────────────────────────────────────────────────────── V8 — Decorated Center Centered title flanked by decorative lines — elegant ───────────────────────────────────────────────────────────────────────── */ .heading--decorated h1, .heading--decorated h2, .heading--decorated h3, .heading--decorated h4, .heading--decorated h5, .heading--decorated h6 { display: flex; align-items: center; gap: var(--space-3); } .heading--decorated h1::before, .heading--decorated h1::after, .heading--decorated h2::before, .heading--decorated h2::after, .heading--decorated h3::before, .heading--decorated h3::after, .heading--decorated h4::before, .heading--decorated h4::after, .heading--decorated h5::before, .heading--decorated h5::after, .heading--decorated h6::before, .heading--decorated h6::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); } /* Diamond center variant */ .heading--decorated-diamond h1, .heading--decorated-diamond h2, .heading--decorated-diamond h3, .heading--decorated-diamond h4 { display: flex; align-items: center; gap: var(--space-2); justify-content: center; } .heading--decorated-diamond h1::before, .heading--decorated-diamond h1::after, .heading--decorated-diamond h2::before, .heading--decorated-diamond h2::after, .heading--decorated-diamond h3::before, .heading--decorated-diamond h3::after, .heading--decorated-diamond h4::before, .heading--decorated-diamond h4::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: var(--border-strong); } /* ───────────────────────────────────────────────────────────────────────── V9 — Glitch / Tech Double offset shadow for a techy/futuristic vibe ───────────────────────────────────────────────────────────────────────── */ .heading--glitch h1, .heading--glitch h2, .heading--glitch h3 { position: relative; text-shadow: 2px 2px 0 var(--primary-100), -1px -1px 0 var(--orange-100); transition: text-shadow var(--transition-fast); } .heading--glitch:hover h1, .heading--glitch:hover h2, .heading--glitch:hover h3 { text-shadow: 3px 3px 0 var(--primary-200), -2px -2px 0 var(--orange-200); } @media (prefers-color-scheme: dark) { .heading--glitch h1, .heading--glitch h2, .heading--glitch h3 { text-shadow: 2px 2px 0 var(--primary-800), -1px -1px 0 var(--orange-800); } .heading--glitch:hover h1, .heading--glitch:hover h2, .heading--glitch:hover h3 { text-shadow: 3px 3px 0 var(--primary-700), -2px -2px 0 var(--orange-700); } } /* ───────────────────────────────────────────────────────────────────────── V10 — Minimal Dot Small dot/bullet before the title — clean & minimal ───────────────────────────────────────────────────────────────────────── */ .heading--dot h1, .heading--dot h2, .heading--dot h3, .heading--dot h4, .heading--dot h5, .heading--dot h6 { display: flex; align-items: center; gap: var(--space-1); } .heading--dot h1::before, .heading--dot h2::before, .heading--dot h3::before, .heading--dot h4::before, .heading--dot h5::before, .heading--dot h6::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); flex-shrink: 0; } /* Dot color variants */ .heading--dot-orange h1::before, .heading--dot-orange h2::before, .heading--dot-orange h3::before, .heading--dot-orange h4::before, .heading--dot-orange h5::before, .heading--dot-orange h6::before { background: var(--orange); } .heading--dot-gold h1::before, .heading--dot-gold h2::before, .heading--dot-gold h3::before, .heading--dot-gold h4::before, .heading--dot-gold h5::before, .heading--dot-gold h6::before { background: var(--accent); } /* ========================================================================== END Heading Variants Collection ========================================================================== */ /* ========================================================================== END Headings Collection ========================================================================== */ /* ========================================================================== START Buttons Collection Variants: Primary | Secondary | Outline | Ghost | Destructive Sizes: sm (32px) | md (40px - default) | lg (48px) ========================================================================== */ /* ── Button Base ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; /* 15px */ line-height: 1; padding: 0.625rem 1.5rem; /* 10px 24px */ border-radius: 10px; border: 2px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all 0.25s ease; -webkit-font-smoothing: antialiased; } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ── Primary (Teal) ── */ .btn-primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); box-shadow: none; } /* ── Orange (Burnt Terracotta) ── */ .btn-orange { background: var(--orange); color: var(--orange-text); border-color: var(--orange); } .btn-orange:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--orange-text); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-orange:active { transform: translateY(0); box-shadow: none; } /* ── Secondary (Gold) ── */ .btn-secondary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .btn-secondary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-secondary:active { transform: translateY(0); box-shadow: none; } /* ── Outline ── */ .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--primary-text); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-outline:active { transform: translateY(0); box-shadow: none; } /* ── Ghost ── */ .btn-ghost { background: transparent; color: var(--text-primary); border-color: transparent; } .btn-ghost:hover { background: var(--bg-surface); color: var(--primary); } .btn-ghost:active { background: var(--border); } /* ── Destructive ── */ .btn-destructive { background: var(--error); color: #ffffff; border-color: var(--error); } .btn-destructive:hover { background: #b91c1c; border-color: #b91c1c; color: #ffffff; box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-destructive:active { transform: translateY(0); box-shadow: none; } /* ── Button Sizes ── */ .btn-sm { font-size: 0.8125rem; /* 13px */ padding: 0.375rem 1rem; /* 6px 16px */ border-radius: 8px; } .btn-lg { font-size: 1.0625rem; /* 17px */ padding: 0.8125rem 2rem; /* 13px 32px */ border-radius: 12px; } /* ── Button with Icon ── */ .btn .btn-icon { width: 1em; height: 1em; flex-shrink: 0; } /* ── Icon-only Button ── */ .btn-icon-only { padding: 0.625rem; aspect-ratio: 1; } .btn-icon-only.btn-sm { padding: 0.375rem; } .btn-icon-only.btn-lg { padding: 0.8125rem; } /* ── Disabled State ── */ .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } /* ========================================================================== END Buttons Collection ========================================================================== */ /* ========================================================================== START Layout Collection Containers, Sections, Grid, Flex, Gap Utilities ========================================================================== */ /* ── Container ── */ .container-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-3); } .container-narrow { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 var(--space-3); } .container-wide { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--space-3); } /* ── Section Spacing ── */ .section { padding: var(--space-8) 0; } .section-sm { padding: var(--space-5) 0; } .section-lg { padding: var(--space-10) 0; } .section--pattern { background: var(--bg-surface); } /* ── Grid System ── */ .grid { display: grid; gap: var(--space-4); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 991px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ── Flexbox Utilities ── */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-start { display: flex; align-items: center; justify-content: flex-start; } .flex-end { display: flex; align-items: center; justify-content: flex-end; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; } /* ── Gap Utilities ── */ .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } /* ── Spacing Utilities (Margin & Padding) ── */ .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .m-auto { margin: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .m-1 { margin: var(--space-1); } .mt-1 { margin-top: var(--space-1); } .mb-1 { margin-bottom: var(--space-1); } .ml-1 { margin-left: var(--space-1); } .mr-1 { margin-right: var(--space-1); } .mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); } .my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); } .m-2 { margin: var(--space-2); } .mt-2 { margin-top: var(--space-2); } .mb-2 { margin-bottom: var(--space-2); } .ml-2 { margin-left: var(--space-2); } .mr-2 { margin-right: var(--space-2); } .mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); } .my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .m-3 { margin: var(--space-3); } .mt-3 { margin-top: var(--space-3); } .mb-3 { margin-bottom: var(--space-3); } .ml-3 { margin-left: var(--space-3); } .mr-3 { margin-right: var(--space-3); } .mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); } .my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); } .m-4 { margin: var(--space-4); } .mt-4 { margin-top: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); } .p-0 { padding: 0; } .p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .pt-0 { padding-top: 0; } .pb-0 { padding-bottom: 0; } .px-0 { padding-left: 0; padding-right: 0; } .pt-2 { padding-top: var(--space-2); } .pb-2 { padding-bottom: var(--space-2); } .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .pt-3 { padding-top: var(--space-3); } .pb-3 { padding-bottom: var(--space-3); } .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .pt-4 { padding-top: var(--space-4); } .pb-4 { padding-bottom: var(--space-4); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } /* ── Width Utilities ── */ .w-full { width: 100%; } .w-auto { width: auto; } .max-w-full { max-width: 100%; } /* ── Height Utilities ── */ .h-full { height: 100%; } .min-h-screen { min-height: 100vh; } /* ── Text Utilities ── */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } .tracking-tight { letter-spacing: -0.02em; } .tracking-normal { letter-spacing: 0; } .tracking-wide { letter-spacing: 0.02em; } /* ========================================================================== END Layout Collection ========================================================================== */ /* ========================================================================== START Cards Collection Variants: Default | Bordered | Elevated | Accent-top | Dark | Horizontal ========================================================================== */ /* ── Card Base ── */ .card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); } .card-body { padding: var(--space-4); } .card-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.375rem; /* 22px */ text-transform: uppercase; margin-bottom: 0.5rem; color: var(--text-primary); } .card-subtitle { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: var(--space-2); } .card-text { color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-3); } .card-img { width: 100%; height: 220px; object-fit: cover; display: block; } .card-footer { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } /* ── Default (bordered) ── */ .card-default { border: 1px solid var(--border); } .card-default:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } /* ── Elevated ── */ .card-elevated { border: none; box-shadow: var(--shadow-md); } .card-elevated:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } /* ── Accent Top (colored top border) ── */ .card-accent-primary { border: 1px solid var(--border); border-top: 4px solid var(--primary); } .card-accent-orange { border: 1px solid var(--border); border-top: 4px solid var(--orange); } .card-accent-gold { border: 1px solid var(--border); border-top: 4px solid var(--accent); } /* ── Dark Card ── */ .card-dark { background: var(--neutral-900); border: none; } .card-dark .card-title { color: var(--neutral-50); } .card-dark .card-subtitle { color: var(--neutral-400); } .card-dark .card-text { color: var(--neutral-300); } .card-dark .card-footer { border-color: var(--neutral-700); } /* ── Horizontal Card ── */ .card-horizontal { display: flex; flex-direction: row; border: 1px solid var(--border); } .card-horizontal .card-img { width: 260px; height: auto; min-height: 200px; flex-shrink: 0; } .card-horizontal .card-body { display: flex; flex-direction: column; justify-content: center; } @media (max-width: 575px) { .card-horizontal { flex-direction: column; } .card-horizontal .card-img { width: 100%; height: 200px; } } /* ── Interactive Card ── */ .card-interactive { cursor: pointer; } .card-interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ========================================================================== END Cards Collection ========================================================================== */ /* ========================================================================== START Forms Collection Elements: Label | Input | Textarea | Select | Checkbox | Radio | Hint | Error ========================================================================== */ /* ── Form Group (label + input wrapper) ── */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); } /* ── Labels ── */ .form-label { font-family: var(--font-body); font-size: 0.875rem; /* 14px */ font-weight: 500; color: var(--text-primary); } .form-label-required::after { content: " *"; color: var(--error); } /* ── Input Base ── */ .form-input, .form-textarea, .form-select { font-family: var(--font-body); font-size: 0.9375rem; /* 15px */ font-weight: 400; color: var(--text-primary); background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.625rem 0.875rem; /* 10px 14px */ width: 100%; transition: all var(--transition-fast); outline: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-input:hover, .form-textarea:hover, .form-select:hover { border-color: var(--neutral-400); } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27, 100, 109, 0.12); } /* ── Input Sizes ── */ .form-input-sm { font-size: 0.8125rem; /* 13px */ padding: 0.375rem 0.75rem; /* 6px 12px */ } .form-input-lg { font-size: 1.0625rem; /* 17px */ padding: 0.8125rem 1rem; /* 13px 16px */ } /* ── Textarea ── */ .form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; } /* ── Select ── */ .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='%2364748b' 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 12px center; padding-right: 2.5rem; cursor: pointer; } /* ── Checkbox & Radio ── */ .form-check { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 8px; } .form-check-input { width: 18px; height: 18px; accent-color: var(--primary-600); cursor: pointer; flex-shrink: 0; } .form-check-label { font-size: 0.9375rem; color: var(--text-primary); cursor: pointer; } /* ── Hint & Error Text ── */ .form-hint { font-size: 0.8125rem; /* 13px */ color: var(--text-muted); margin-top: 2px; } .form-error-text { font-size: 0.8125rem; color: var(--error); margin-top: 2px; } /* ── Validation States ── */ .form-input-error, .form-textarea-error, .form-select-error { border-color: var(--error); } .form-input-error:focus, .form-textarea-error:focus, .form-select-error:focus { border-color: var(--error); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); } .form-input-success, .form-textarea-success { border-color: var(--success); } .form-input-success:focus, .form-textarea-success:focus { border-color: var(--success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12); } /* ── Disabled ── */ .form-input:disabled, .form-textarea:disabled, .form-select:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bg-surface); } /* ── Input with Icon (wrapper) ── */ .form-input-icon { position: relative; } .form-input-icon .form-input { padding-left: 2.5rem; } .form-input-icon i, .form-input-icon .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1rem; pointer-events: none; } /* ========================================================================== END Forms Collection ========================================================================== */ /* ========================================================================== START Badges Collection Variants: Solid | Soft | Outline | Dot Colors: Primary | Orange | Gold | Success | Warning | Error | Neutral ========================================================================== */ /* ── Badge Base ── */ .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.75rem; /* 12px */ font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: var(--radius-full); white-space: nowrap; letter-spacing: 0.02em; text-transform: uppercase; } /* ── Solid Badges ── */ .badge-primary { background: var(--primary-100); color: var(--primary-800); } .badge-orange { background: var(--orange-100); color: var(--orange-800); } .badge-gold { background: var(--accent-100); color: var(--accent-800); } .badge-success { background: var(--success-light); color: var(--success); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-error { background: var(--error-light); color: var(--error); } .badge-neutral { background: var(--neutral-200); color: var(--neutral-700); } .badge-dark { background: var(--neutral-900); color: var(--neutral-50); } /* ── Soft Badges (light background) ── */ .badge-soft-primary { background: var(--primary-50); color: var(--primary-700); } .badge-soft-orange { background: var(--orange-50); color: var(--orange-700); } .badge-soft-gold { background: var(--accent-50); color: var(--accent-700); } .badge-soft-success { background: var(--success-light); color: var(--success); } .badge-soft-warning { background: var(--warning-light); color: var(--warning); } .badge-soft-error { background: var(--error-light); color: var(--error); } .badge-soft-neutral { background: var(--neutral-100); color: var(--neutral-600); } /* ── Outline Badges ── */ .badge-outline-primary { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); } .badge-outline-orange { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); } .badge-outline-gold { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); } .badge-outline-success { background: transparent; color: var(--success); box-shadow: inset 0 0 0 1.5px var(--success); } .badge-outline-error { background: transparent; color: var(--error); box-shadow: inset 0 0 0 1.5px var(--error); } .badge-outline-neutral { background: transparent; color: var(--neutral-500); box-shadow: inset 0 0 0 1.5px var(--neutral-300); } /* ── Dot indicator ── */ .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ── Badge Sizes ── */ .badge-sm { font-size: 0.625rem; /* 10px */ padding: 3px 7px; } .badge-lg { font-size: 0.875rem; /* 14px */ padding: 6px 14px; } /* ========================================================================== END Badges Collection ========================================================================== */ /* ========================================================================== START Alerts Collection Variants: Success | Warning | Error | Info | Neutral Styles: Default (soft) | Bordered | Dark ========================================================================== */ /* ── Alert Base ── */ .alert { display: flex; align-items: flex-start; gap: 12px; padding: var(--space-2); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.5; position: relative; } .alert-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .alert-content { flex: 1; } .alert-title { font-weight: 600; margin-bottom: 4px; } .alert-text { color: inherit; opacity: 0.85; } .alert-dismiss { background: none; border: none; cursor: pointer; opacity: 0.5; font-size: 1.125rem; padding: 0; line-height: 1; color: inherit; transition: opacity var(--transition-fast); } .alert-dismiss:hover { opacity: 1; } /* ── Success ── */ .alert-success { background: var(--success-light); color: var(--success); } /* ── Warning ── */ .alert-warning { background: var(--warning-light); color: var(--warning); } /* ── Error ── */ .alert-error { background: var(--error-light); color: var(--error); } /* ── Info ── */ .alert-info { background: var(--info-light); color: var(--info); } /* ── Neutral ── */ .alert-neutral { background: var(--neutral-100); color: var(--neutral-700); } /* ── Bordered variant (left accent) ── */ .alert-bordered { background: var(--bg-elevated); border: 1px solid var(--border); border-left: 4px solid currentColor; } .alert-bordered.alert-success { background: var(--bg-elevated); color: var(--success); border-color: var(--border); border-left-color: var(--success); } .alert-bordered.alert-warning { background: var(--bg-elevated); color: var(--warning); border-color: var(--border); border-left-color: var(--warning); } .alert-bordered.alert-error { background: var(--bg-elevated); color: var(--error); border-color: var(--border); border-left-color: var(--error); } .alert-bordered.alert-info { background: var(--bg-elevated); color: var(--info); border-color: var(--border); border-left-color: var(--info); } .alert-bordered .alert-text { color: var(--text-secondary); } /* ── Dark variant ── */ .alert-dark { color: var(--neutral-50); } .alert-dark.alert-success { background: var(--success); } .alert-dark.alert-warning { background: var(--warning); } .alert-dark.alert-error { background: var(--error); } .alert-dark.alert-info { background: var(--primary-600); } .alert-dark .alert-text { opacity: 0.9; } /* ========================================================================== END Alerts Collection ========================================================================== */ /* ========================================================================== START Dividers Collection Variants: Default | With Text | With Icon | Accent | Dashed | Vertical ========================================================================== */ /* ── Default Divider ── */ .divider { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; } .divider-strong { border-top-color: var(--border-strong); } /* ── Dashed ── */ .divider-dashed { border-top-style: dashed; } /* ── Spacing Variants ── */ .divider-sm { margin: var(--space-2) 0; } .divider-lg { margin: var(--space-6) 0; } /* ── Accent Dividers (colored) ── */ .divider-primary { border-top: 2px solid var(--primary); } .divider-orange { border-top: 2px solid var(--orange); } .divider-gold { border-top: 2px solid var(--accent); } /* ── Gradient Divider ── */ .divider-gradient { border: none; height: 2px; background: linear-gradient(90deg, var(--primary), var(--orange), var(--accent)); margin: var(--space-4) 0; } /* ── Divider with Text ── */ .divider-text { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; color: var(--text-muted); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } .divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ── Divider with Icon ── */ .divider-icon { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; color: var(--text-muted); } .divider-icon::before, .divider-icon::after { content: ""; flex: 1; height: 1px; background: var(--border); } .divider-icon i { font-size: 0.875rem; } /* ── Vertical Divider ── */ .divider-vertical { display: inline-block; width: 1px; height: 1.25em; background: var(--border-strong); margin: 0 var(--space-2); vertical-align: middle; } /* ========================================================================== END Dividers Collection ========================================================================== */ /* ========================================================================== START Shadows & Elevation Collection Levels: 0 (flat) | 1 (subtle) | 2 (medium) | 3 (high) | 4 (floating) Extras: Inner | Colored | Glow ========================================================================== */ /* ── Elevation Levels ── */ .elevation-0 { box-shadow: none; } .elevation-1 { box-shadow: var(--shadow-sm); } .elevation-2 { box-shadow: var(--shadow-md); } .elevation-3 { box-shadow: var(--shadow-lg); } .elevation-4 { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08); } /* ── Inner Shadow ── */ .shadow-inner { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08); } /* ── Colored Shadows ── */ .shadow-primary { box-shadow: 0 4px 16px rgba(27, 100, 109, 0.25); } .shadow-orange { box-shadow: 0 4px 16px rgba(212, 118, 48, 0.25); } .shadow-gold { box-shadow: 0 4px 16px rgba(196, 154, 92, 0.25); } /* ── Glow Effects ── */ .glow-primary { box-shadow: 0 0 20px rgba(27, 100, 109, 0.3), 0 0 40px rgba(27, 100, 109, 0.1); } .glow-orange { box-shadow: 0 0 20px rgba(212, 118, 48, 0.3), 0 0 40px rgba(212, 118, 48, 0.1); } .glow-gold { box-shadow: 0 0 20px rgba(196, 154, 92, 0.3), 0 0 40px rgba(196, 154, 92, 0.1); } /* ── Hover Elevation (add to any element) ── */ .hover-lift { transition: all var(--transition); } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .hover-lift-sm { transition: all var(--transition); } .hover-lift-sm:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ========================================================================== END Shadows & Elevation Collection ========================================================================== */ .site-header { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 10; } /* Bootstrap Navbar overrides */ .navbar { padding: 0.5rem 0; } .navbar>.container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .navbar-nav { display: flex !important; flex-direction: row !important; padding-left: 0; margin-bottom: 0; margin-left: auto !important; list-style: none; } .navbar-nav .nav-item { display: inline-block !important; float: none !important; } .navbar-nav .nav-item>a { display: inline-block; } .navbar-nav .nav-link { display: block; padding: 0.5rem 1rem; margin: 0 0.25rem; } .navbar-nav .nav-link { font-family: var(--font-body); color: var(--text-primary); font-size: 0.9375rem; /* 15px */ font-weight: 500; padding: 0.5rem 1rem !important; letter-spacing: 0.01em; transition: color 0.2s ease; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--primary); } .navbar-toggler { border: none; padding: 0.5rem; } @media (min-width: 992px) { .navbar-collapse { display: flex !important; } .navbar-nav { flex-direction: row; } } @media (max-width: 991px) { .navbar-collapse { padding-top: 1rem; } .navbar-nav { flex-direction: column !important; } .navbar-nav .nav-item { display: block !important; } } /* Force primary-menu to be horizontal */ .primary-menu { display: flex !important; flex-direction: row !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .primary-menu li { display: inline-block !important; float: none !important; } /* Social Icons */ .footer { background: var(--bg-surface); padding: 1.5rem 0; border-top: 1px solid var(--border); } .social-icons { display: flex; justify-content: center; justify-content: md-end; gap: 1rem; } .social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-900); color: var(--text-inverse); font-size: 1.1rem; transition: all 0.3s ease; text-decoration: none; } .social-icons a:hover { background: var(--primary); color: var(--primary-text); transform: translateY(-3px); } /* Dropdown Menu - Desktop */ .sub-menu { display: none; position: absolute; list-style: none; padding: 0.5rem 0; margin: 0; background: var(--bg-elevated); box-shadow: var(--shadow-md); border-radius: 0.375rem; min-width: 180px; z-index: 1000; } .menu-item-has-children { position: relative; } .menu-item-has-children:hover>.sub-menu, .menu-item-has-children:focus-within>.sub-menu { display: block; } .sub-menu li { padding: 0; } .sub-menu a { display: block; padding: 0.5rem 1rem; color: var(--text-primary); text-decoration: none; } .sub-menu a:hover { background: var(--bg-surface); color: var(--primary); } /* Dropdown arrow */ .menu-item-has-children>a::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: 0.5rem; vertical-align: middle; } /* Mobile dropdown */ @media (max-width: 991px) { .sub-menu { display: block !important; position: static; box-shadow: none; background: transparent; padding-left: 1rem; } .menu-item-has-children>a::after { display: none; } } /* ========================================================================== START Search Form Collection Modern search form — Oubadium Design System ========================================================================== */ /* ── Accessibility helper ── */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; } /* ── Form wrapper ── */ .search-form { width: 100%; } .search-form__wrapper { position: relative; width: 100%; } /* ── Input group (icon + input + button) ── */ .search-form__input-group { display: flex; align-items: center; position: relative; background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); transition: all var(--transition-fast); overflow: hidden; } .search-form__input-group:hover { border-color: var(--neutral-400); } .search-form__input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27, 100, 109, 0.12); } /* ── Search icon ── */ .search-form__icon { position: absolute; left: 1rem; color: var(--text-muted); font-size: 1rem; pointer-events: none; z-index: 1; transition: color var(--transition-fast); } .search-form__input-group:focus-within .search-form__icon { color: var(--primary); } /* ── Input field (override .form-input defaults) ── */ .search-form__input.form-input { flex: 1; border: none; background: transparent; padding: 0.875rem 1rem 0.875rem 2.75rem; font-size: 0.9375rem; color: var(--text-primary); min-width: 0; border-radius: 0; } .search-form__input.form-input:focus { border: none; box-shadow: none; outline: none; } .search-form__input.form-input::placeholder { color: var(--text-muted); } /* ── Submit button ── */ .search-form__submit.btn.btn-primary { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; margin: 4px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; white-space: nowrap; cursor: pointer; transition: all var(--transition-fast); } .search-form__submit.btn.btn-primary:hover { background: var(--primary-hover); transform: none; } /* ── Navbar search (top-right compact version) ── */ .navbar-search { flex-shrink: 0; width: 280px; } .navbar-search .search-form__input.form-input { padding: 0.5rem 0.75rem 0.5rem 2.25rem; font-size: 0.875rem; } .navbar-search .search-form__icon { left: 0.75rem; font-size: 0.875rem; } .navbar-search .search-form__submit.btn.btn-primary { padding: 0.5rem 1rem; margin: 3px; font-size: 0.8125rem; } .navbar-search .search-form__submit-text { display: none; } /* ── Responsive ── */ @media (max-width: 991px) { .navbar-search { width: 100%; margin-top: 0.75rem; } } @media (max-width: 575px) { .search-form__submit-text { display: none; } .search-form__submit.btn.btn-primary { padding: 0.75rem; aspect-ratio: 1; } } /* ========================================================================== END Search Form Collection ========================================================================== */ /* ========================================================================== START Theme Toggle Button ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; margin-left: 12px; transition: all var(--transition-fast); position: relative; } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-elevated); transform: rotate(15deg); } .theme-toggle:active { transform: rotate(0deg) scale(0.95); } .theme-toggle__icon { font-size: 1rem; line-height: 1; pointer-events: none; } /* Light mode: show sun, hide moon */ .theme-toggle__icon--light { display: block; } .theme-toggle__icon--dark { display: none; } /* Warm Dark mode: show moon, hide sun */ .theme-warm-dark .theme-toggle__icon--light { display: none; } .theme-warm-dark .theme-toggle__icon--dark { display: block; } @media (max-width: 991px) { .theme-toggle { margin-left: 0; margin-top: 12px; } } /* ========================================================================== END Theme Toggle Button ========================================================================== */ /* ========================================================================== START Search Results Page ========================================================================== */ /* ── Search Header ── */ .search-header__inner { max-width: 640px; margin: 0 auto; } .search-header__query { color: var(--primary); } .search-header__form { margin-top: var(--space-3); max-width: 520px; margin-left: auto; margin-right: auto; } /* ── Results List ── */ .search-results { display: flex; flex-direction: column; gap: var(--space-3); } /* ── Result Card ── */ .search-result-card.card-horizontal { transition: all var(--transition); } .search-result-card.card-horizontal:hover { border-color: var(--primary); box-shadow: var(--shadow-md); } .search-result-card__img { width: 220px; height: auto; min-height: 180px; object-fit: cover; flex-shrink: 0; } /* No thumbnail placeholder */ .search-result-card__no-thumb { width: 220px; min-height: 180px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); color: var(--text-muted); font-size: 2.5rem; text-decoration: none; } /* Meta row (badge + date) */ .search-result-card__meta { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1); } .search-result-card__date { font-size: 0.8125rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; } /* Title link */ .search-result-card .card-title a { color: var(--text-primary); text-decoration: none; transition: color var(--transition-fast); } .search-result-card .card-title a:hover { color: var(--primary); } @media (max-width: 575px) { .search-result-card.card-horizontal { flex-direction: column; } .search-result-card__img, .search-result-card__no-thumb { width: 100%; height: 180px; min-height: auto; } } /* ── Pagination ── */ .search-pagination { margin-top: var(--space-5); display: flex; justify-content: center; } .search-pagination .nav-links { display: flex; align-items: center; gap: 4px; } .search-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); background: var(--bg-elevated); border: 1.5px solid var(--border); text-decoration: none; transition: all var(--transition-fast); } .search-pagination .page-numbers:hover { border-color: var(--primary); color: var(--primary); } .search-pagination .page-numbers.current { background: var(--primary); color: var(--primary-text); border-color: var(--primary); } .search-pagination .prev, .search-pagination .next { gap: 6px; } /* ── No Results ── */ .search-no-results { text-align: center; padding: var(--space-8) 0; max-width: 480px; margin: 0 auto; } .search-no-results__icon { width: 80px; height: 80px; margin: 0 auto var(--space-3); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-surface); color: var(--text-muted); font-size: 2rem; } .search-no-results h2 { margin-bottom: var(--space-1); } .search-no-results p { color: var(--text-secondary); margin-bottom: var(--space-4); } .search-no-results__form { max-width: 400px; margin: 0 auto; } /* ========================================================================== END Search Results Page ========================================================================== */ /* ========================================================================== START Sliders Collection — Swiper.js Overrides Variants: Hero | Cards | Testimonials | Gallery+Thumbs | Logo | Fullscreen ========================================================================== */ /* ── Shared: Navigation Arrows ── */ .slider .swiper-button-next, .slider .swiper-button-prev { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-elevated); border: 1.5px solid var(--border); color: var(--text-primary); transition: all var(--transition-fast); } .slider .swiper-button-next::after, .slider .swiper-button-prev::after { font-size: 1rem; font-weight: 700; } .slider .swiper-button-next:hover, .slider .swiper-button-prev:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-text); box-shadow: var(--shadow-md); } /* ── Shared: Pagination Bullets ── */ .slider .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--border-strong); opacity: 1; transition: all var(--transition-fast); } .slider .swiper-pagination-bullet-active { background: var(--primary); width: 28px; border-radius: var(--radius-full); } /* ── Shared: Progress Bar ── */ .slider .swiper-pagination-progressbar { background: var(--border); height: 3px !important; } .slider .swiper-pagination-progressbar-fill { background: var(--primary) !important; } /* ── Shared: Fraction ── */ .slider .swiper-pagination-fraction { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.05em; } .slider .swiper-pagination-current { color: var(--primary); font-size: 1.25rem; } /* ───────────────────────────────────────────────────────────────────────── V1 — Hero Slider Full-width, overlay text, arrows + bullets, autoplay ───────────────────────────────────────────────────────────────────────── */ .slider--hero { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-lg); } .slider--hero .swiper-slide { position: relative; height: 500px; overflow: hidden; } .slider--hero .slider__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; } .slider--hero .swiper-slide-active .slider__image { transform: scale(1.05); } .slider--hero .slider__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13, 16, 23, 0.75) 0%, rgba(13, 16, 23, 0.3) 100%); display: flex; flex-direction: column; justify-content: center; padding: var(--space-6); z-index: 1; } .slider--hero .slider__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-400); margin-bottom: var(--space-2); } .slider--hero .slider__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .slider--hero .slider__title { color: #ffffff; font-size: 3rem; max-width: 600px; margin-bottom: var(--space-2); } .slider--hero .slider__desc { color: rgba(255, 255, 255, 0.75); font-size: 1.0625rem; max-width: 500px; margin-bottom: var(--space-3); line-height: 1.7; } .slider--hero .swiper-button-next, .slider--hero .swiper-button-prev { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; } .slider--hero .swiper-button-next:hover, .slider--hero .swiper-button-prev:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-text); } .slider--hero .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.4); } .slider--hero .swiper-pagination-bullet-active { background: #ffffff; } @media (max-width: 767px) { .slider--hero .swiper-slide { height: 380px; } .slider--hero .slider__overlay { padding: var(--space-3); } .slider--hero .slider__title { font-size: 2rem; } .slider--hero .swiper-button-next, .slider--hero .swiper-button-prev { display: none; } } /* ───────────────────────────────────────────────────────────────────────── V2 — Cards Carousel Multiple visible cards, navigation arrows, responsive ───────────────────────────────────────────────────────────────────────── */ .slider--cards { position: relative; padding-bottom: var(--space-5); } .slider--cards .swiper { overflow: visible; } .slider--cards .swiper-slide { height: auto; } .slider--cards .slider-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: all var(--transition); } .slider--cards .slider-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-4px); } .slider--cards .slider-card__img { width: 100%; height: 200px; object-fit: cover; } .slider--cards .slider-card__body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; } .slider--cards .slider-card__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; margin-bottom: 0.375rem; color: var(--text-primary); } .slider--cards .slider-card__text { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.6; flex: 1; margin-bottom: var(--space-2); } .slider--cards .swiper-button-next, .slider--cards .swiper-button-prev { top: 40%; } /* ───────────────────────────────────────────────────────────────────────── V3 — Testimonials Centered quote, avatar, name, role ───────────────────────────────────────────────────────────────────────── */ .slider--testimonials { position: relative; padding: var(--space-5) 0; } .slider--testimonials .swiper-slide { text-align: center; padding: 0 var(--space-4); box-sizing: border-box; } .slider--testimonials .slider-quote__icon { font-size: 2.5rem; color: var(--primary); margin-bottom: var(--space-2); opacity: 0.4; } .slider--testimonials .slider-quote__text { font-size: 1.25rem; font-style: italic; line-height: 1.8; color: var(--text-primary); margin-bottom: var(--space-3); max-width: 600px; margin-left: auto; margin-right: auto; } .slider--testimonials .slider-quote__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--space-1); border: 3px solid var(--primary-100); } .slider--testimonials .slider-quote__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; text-transform: uppercase; color: var(--text-primary); margin-bottom: 2px; } .slider--testimonials .slider-quote__role { font-size: 0.8125rem; color: var(--text-muted); } /* ───────────────────────────────────────────────────────────────────────── V4 — Image Gallery + Thumbs Main image + thumbnail strip below ───────────────────────────────────────────────────────────────────────── */ .slider--gallery { position: relative; } .slider--gallery-main { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-1); } .slider--gallery-main .swiper-slide img { width: 100%; height: 420px; object-fit: cover; display: block; } .slider--gallery-thumbs { padding: 0 var(--space-1); } .slider--gallery-thumbs .swiper-slide { width: 90px; height: 64px; border-radius: var(--radius); overflow: hidden; cursor: pointer; opacity: 0.5; border: 2px solid transparent; transition: all var(--transition-fast); } .slider--gallery-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--primary); } .slider--gallery-thumbs .swiper-slide:hover { opacity: 0.85; } .slider--gallery-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 575px) { .slider--gallery-main .swiper-slide img { height: 260px; } } /* ───────────────────────────────────────────────────────────────────────── V5 — Logo Carousel Auto-scrolling brand logos, grayscale → color on hover ───────────────────────────────────────────────────────────────────────── */ .slider--logos { position: relative; padding: var(--space-3) 0; } .slider--logos .swiper-slide { display: flex; align-items: center; justify-content: center; height: 80px; } .slider--logos .slider-logo { max-width: 120px; max-height: 48px; object-fit: contain; filter: grayscale(100%); opacity: 0.5; transition: all var(--transition); } .slider--logos .slider-logo:hover { filter: grayscale(0%); opacity: 1; } /* ───────────────────────────────────────────────────────────────────────── V6 — Fullscreen Parallax Full viewport slides with Ken Burns + parallax ───────────────────────────────────────────────────────────────────────── */ .slider--fullscreen { position: relative; width: 100%; } .slider--fullscreen .swiper-slide { position: relative; height: 100vh; overflow: hidden; } .slider--fullscreen .slider__image { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; } .slider--fullscreen .slider__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 23, 0.2) 0%, rgba(13, 16, 23, 0.8) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-8) var(--space-6); z-index: 1; } .slider--fullscreen .slider__title { color: #ffffff; font-size: 4rem; max-width: 700px; margin-bottom: var(--space-2); } .slider--fullscreen .slider__desc { color: rgba(255, 255, 255, 0.7); font-size: 1.125rem; max-width: 550px; margin-bottom: var(--space-4); line-height: 1.7; } .slider--fullscreen .swiper-pagination-fraction { color: rgba(255, 255, 255, 0.5); bottom: var(--space-4) !important; left: var(--space-6) !important; width: auto !important; } .slider--fullscreen .swiper-pagination-current { color: #ffffff; } .slider--fullscreen .swiper-button-next, .slider--fullscreen .swiper-button-prev { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; } .slider--fullscreen .swiper-button-next:hover, .slider--fullscreen .swiper-button-prev:hover { background: var(--primary); border-color: var(--primary); } @media (max-width: 767px) { .slider--fullscreen .swiper-slide { height: 85vh; } .slider--fullscreen .slider__overlay { padding: var(--space-4) var(--space-3); } .slider--fullscreen .slider__title { font-size: 2.5rem; } .slider--fullscreen .swiper-button-next, .slider--fullscreen .swiper-button-prev { display: none; } } /* ========================================================================== END Sliders Collection ========================================================================== */ /* ========================================================================== HERO SECTION — Split typographique bold (theme-aware) ========================================================================== */ /* ── Keyframes ── */ @keyframes hero-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes hero-float-slow { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-8px) rotate(1deg); } } @keyframes hero-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } } @keyframes hero-scroll-line { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @keyframes hero-progress-in { from { width: 0 !important; } to { /* uses inline width */ } } /* ── Section base ── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--bg); overflow: hidden; padding: var(--space-10) 0 var(--space-8); } /* ── Ambient glows ── */ .hero__glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; } .hero__glow--teal { width: 600px; height: 600px; background: radial-gradient(circle, rgba(42, 143, 155, .12) 0%, transparent 70%); top: -100px; right: 10%; } .hero__glow--orange { width: 400px; height: 400px; background: radial-gradient(circle, rgba(212, 118, 48, .08) 0%, transparent 70%); bottom: 50px; right: 25%; } /* Glows plus visibles en dark */ .theme-warm-dark .hero__glow--teal { background: radial-gradient(circle, rgba(42, 143, 155, .22) 0%, transparent 70%); } .theme-warm-dark .hero__glow--orange { background: radial-gradient(circle, rgba(212, 118, 48, .14) 0%, transparent 70%); } /* ── Inner layout ── */ .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 55fr 45fr; align-items: center; gap: var(--space-8); } /* ── Badge ── */ .hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(42, 143, 155, .1); border: 1px solid rgba(42, 143, 155, .25); border-radius: var(--radius-full); padding: 6px 16px; font-size: .75rem; font-family: var(--font-body); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-600); margin-bottom: var(--space-4); } .theme-warm-dark .hero__badge { color: var(--primary-400); background: rgba(42, 143, 155, .12); border-color: rgba(42, 143, 155, .3); } .hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-500); animation: hero-pulse-dot 2s ease-in-out infinite; } /* ── Title ── */ .hero__title { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 700; line-height: 1.0; color: var(--text-primary); margin-bottom: var(--space-4); letter-spacing: -.02em; } .hero__title-gradient { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-400) 40%, var(--orange-500) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Subtitle ── */ .hero__subtitle { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: var(--space-5); } /* ── CTA Buttons ── */ .hero__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); } .hero__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-full); font-family: var(--font-body); font-size: .95rem; font-weight: 600; text-decoration: none; transition: all .25s ease; cursor: pointer; white-space: nowrap; } .hero__btn--primary { background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 100%); color: #fff; box-shadow: 0 4px 24px rgba(42, 143, 155, .25); } .hero__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(42, 143, 155, .4); color: #fff; text-decoration: none; } .hero__btn--outline { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border); } .hero__btn--outline:hover { background: var(--bg-surface); border-color: var(--text-secondary); color: var(--text-primary); text-decoration: none; transform: translateY(-2px); } /* ── Stats row ── */ .hero__stats { display: flex; align-items: center; gap: var(--space-4); } .hero__stat-num { display: block; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .hero__stat-label { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 3px; white-space: nowrap; } .hero__stat-divider { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; } /* ── Visual / Mock UI ── */ .hero__visual { position: relative; height: 480px; } /* ── Mock cards shared ── */ .hero__mock { position: absolute; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0, 0, 0, .1); } .theme-warm-dark .hero__mock { box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } /* ── Main mock card ── */ .hero__mock--main { top: 0; left: 0; right: 60px; animation: hero-float-slow 6s ease-in-out infinite; } .hero__mock-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .hero__mock-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .hero__mock-label { font-size: .7rem; color: var(--text-muted); font-family: var(--font-body); margin-left: 6px; } .hero__mock-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; } /* Color swatches */ .hero__mock-row { display: flex; gap: 6px; } .hero__mock-swatch { width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; } /* Component preview */ .hero__mock-component { display: flex; gap: 12px; align-items: flex-start; } .hero__mock-img-placeholder { width: 72px; height: 72px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(42, 143, 155, .2) 0%, rgba(212, 118, 48, .15) 100%); flex-shrink: 0; } .hero__mock-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; padding-top: 4px; } .hero__mock-line { height: 8px; background: var(--bg-surface); border-radius: var(--radius-sm); width: 100%; } .theme-warm-dark .hero__mock-line { background: rgba(255, 255, 255, .1); } .hero__mock-line--title { height: 11px; width: 75%; background: var(--border); } .theme-warm-dark .hero__mock-line--title { background: rgba(255, 255, 255, .18); } .hero__mock-line--short { width: 50%; } .hero__mock-line--btn { height: 22px; width: 80px; background: linear-gradient(135deg, rgba(27, 100, 109, .4) 0%, rgba(42, 143, 155, .4) 100%); border-radius: var(--radius-full); margin-top: 2px; } /* Progress bars */ .hero__mock-bars { display: flex; flex-direction: column; gap: 10px; } .hero__mock-progress-row { display: flex; align-items: center; gap: 10px; } .hero__mock-progress-label { font-size: .65rem; color: var(--text-muted); font-family: var(--font-body); width: 68px; flex-shrink: 0; } .hero__mock-progress-track { flex: 1; height: 5px; background: var(--bg-surface); border-radius: var(--radius-full); overflow: hidden; } .theme-warm-dark .hero__mock-progress-track { background: rgba(255, 255, 255, .07); } .hero__mock-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary-700), var(--primary-500)); border-radius: var(--radius-full); animation: hero-progress-in .8s ease-out both; animation-delay: .5s; } /* ── Notification card ── */ .hero__mock--notif { display: flex; align-items: center; gap: 10px; padding: 12px 16px; bottom: 80px; right: 0; width: 200px; animation: hero-float 4s ease-in-out infinite; animation-delay: 1s; } .hero__mock-notif-icon { width: 32px; height: 32px; border-radius: var(--radius); background: rgba(40, 200, 64, .12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero__mock-notif-title { font-size: .8rem; font-weight: 600; color: var(--text-primary); margin: 0; font-family: var(--font-body); } .hero__mock-notif-sub { font-size: .68rem; color: var(--text-muted); margin: 0; font-family: var(--font-body); } /* ── Tech badge card ── */ .hero__mock--badge { display: flex; align-items: center; gap: 8px; padding: 10px 14px; top: 40px; right: 0; font-size: .75rem; font-weight: 500; color: var(--text-secondary); font-family: var(--font-body); animation: hero-float 5s ease-in-out infinite; animation-delay: .5s; } /* ── Scroll indicator ── */ .hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; } .hero__scroll-line { width: 1.5px; height: 40px; background: linear-gradient(to bottom, var(--text-muted), transparent); animation: hero-scroll-line 2s ease-in-out infinite; } .hero__scroll span { font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-body); } /* ── Responsive ── */ @media (max-width: 991.98px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__badge { margin-left: auto; margin-right: auto; } .hero__actions { justify-content: center; } .hero__stats { justify-content: center; } .hero__visual { height: 340px; max-width: 480px; margin: 0 auto; } .hero__scroll { display: none; } } @media (max-width: 575.98px) { .hero { padding: var(--space-8) 0 var(--space-6); } .hero__title { font-size: 2.8rem; } .hero__stats { flex-wrap: wrap; gap: var(--space-3); } .hero__stat-divider { display: none; } .hero__visual { height: 280px; } .hero__mock--main { right: 0; } .hero__mock--badge { display: none; } } /* ========================================================================== END Hero Section ========================================================================== */