/* ============================================================================ AsomeCMS — Corporate Theme Font: Manrope (geometric sans-serif throughout) ============================================================================ */ /* --- Design Tokens -------------------------------------------------------- */ :root, [data-bs-theme="light"] { --font-display: 'Manrope', system-ui, -apple-system, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; /* Primary — Corporate Blue (default accent palette) */ --app-primary: #2563EB; --app-primary-hover: #1D4ED8; --app-primary-light: #60A5FA; --app-primary-dark: #1E40AF; --app-primary-subtle: #EFF6FF; /* RGB triplets so we can compose rgba() with the accent variable */ --app-primary-rgb: 37, 99, 235; --app-primary-light-rgb: 96, 165, 250; /* Sync Bootstrap's primary tokens so .alert-primary, .text-bg-primary, focus rings, links, etc. follow the active accent palette. */ --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-link-color: var(--app-primary); --bs-link-color-rgb: var(--app-primary-rgb); --bs-link-hover-color: var(--app-primary-hover); /* Backgrounds — Clean Blue-White */ --app-bg-body: #F8FAFC; --app-bg-secondary: #F1F5F9; --app-bg-tertiary: #E2E8F0; --app-surface: #FFFFFF; --app-surface-hover: #F8FAFC; /* Text — Slate */ --app-text-primary: #0F172A; --app-text-secondary: #334155; --app-text-muted: #64748B; --app-text-subtle: #94A3B8; /* Borders */ --app-border: #E2E8F0; --app-border-light: #F1F5F9; --app-border-dark: #CBD5E1; /* Semantic */ --app-success: #16A34A; --app-success-bg: #F0FDF4; --app-warning: #CA8A04; --app-warning-bg: #FEFCE8; --app-danger: #DC2626; --app-danger-bg: #FEF2F2; --app-info: #2563EB; --app-info-bg: #EFF6FF; /* Shadows */ --app-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --app-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --app-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); --app-shadow-lg: 0 8px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.04); --app-shadow-xl: 0 20px 40px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.04); /* Radius — tight, corporate */ --app-radius: 0.375rem; --app-radius-sm: 0.25rem; --app-radius-lg: 0.5rem; --app-radius-xl: 0.75rem; --app-radius-full: 9999px; /* Transitions */ --app-transition: all 0.15s ease; --app-transition-fast: all 0.1s ease; --app-transition-slow: all 0.25s ease; } /* --- Dark Mode ------------------------------------------------------------ */ [data-bs-theme="dark"] { --app-primary: #60A5FA; --app-primary-hover: #93C5FD; --app-primary-light: #3B82F6; --app-primary-dark: #BFDBFE; --app-primary-subtle: #172554; --app-primary-rgb: 96, 165, 250; --app-primary-light-rgb: 59, 130, 246; --app-bg-body: #0B1120; --app-bg-secondary: #111827; --app-bg-tertiary: #1E293B; --app-surface: #0F1729; --app-surface-hover: #1A2538; --app-text-primary: #F1F5F9; --app-text-secondary: #CBD5E1; --app-text-muted: #94A3B8; --app-text-subtle: #64748B; --app-border: #1E293B; --app-border-light: #334155; --app-border-dark: #0F172A; --app-success: #4ADE80; --app-success-bg: #052E16; --app-warning: #FACC15; --app-warning-bg: #422006; --app-danger: #F87171; --app-danger-bg: #450A0A; --app-info: #60A5FA; --app-info-bg: #172554; --app-shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --app-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --app-shadow-md: 0 4px 12px rgba(0,0,0,0.5); --app-shadow-lg: 0 8px 24px rgba(0,0,0,0.6); --app-shadow-xl: 0 20px 40px rgba(0,0,0,0.7); } /* --- Accent Palettes ------------------------------------------------------ Selected via set by the Settings entity. The default 'blue' palette is defined in the base :root block above — no override needed. Each non-default palette overrides only the primary tokens and their RGB triplets. The "Midnight" CTA + Contact info panel blooms remain locked to cobalt by design and do not respond to accent. */ [data-accent="amber"][data-bs-theme="light"], [data-accent="amber"]:not([data-bs-theme="dark"]) { --app-primary: #D97706; --app-primary-hover: #B45309; --app-primary-light: #F59E0B; --app-primary-dark: #92400E; --app-primary-subtle: #FEF3C7; --app-primary-rgb: 217, 119, 6; --app-primary-light-rgb: 245, 158, 11; --app-info: #D97706; --app-info-bg: #FEF3C7; } [data-accent="amber"][data-bs-theme="dark"] { --app-primary: #F59E0B; --app-primary-hover: #FBBF24; --app-primary-light: #D97706; --app-primary-dark: #FED7AA; --app-primary-subtle: #422006; --app-primary-rgb: 245, 158, 11; --app-primary-light-rgb: 217, 119, 6; --app-info: #F59E0B; --app-info-bg: #422006; } [data-accent="forest"][data-bs-theme="light"], [data-accent="forest"]:not([data-bs-theme="dark"]) { --app-primary: #15803D; --app-primary-hover: #166534; --app-primary-light: #4ADE80; --app-primary-dark: #14532D; --app-primary-subtle: #DCFCE7; --app-primary-rgb: 21, 128, 61; --app-primary-light-rgb: 74, 222, 128; --app-info: #15803D; --app-info-bg: #DCFCE7; } [data-accent="forest"][data-bs-theme="dark"] { --app-primary: #4ADE80; --app-primary-hover: #86EFAC; --app-primary-light: #22C55E; --app-primary-dark: #BBF7D0; --app-primary-subtle: #052E16; --app-primary-rgb: 74, 222, 128; --app-primary-light-rgb: 34, 197, 94; --app-info: #4ADE80; --app-info-bg: #052E16; } [data-accent="rose"][data-bs-theme="light"], [data-accent="rose"]:not([data-bs-theme="dark"]) { --app-primary: #E11D48; --app-primary-hover: #BE123C; --app-primary-light: #FB7185; --app-primary-dark: #9F1239; --app-primary-subtle: #FFE4E6; --app-primary-rgb: 225, 29, 72; --app-primary-light-rgb: 251, 113, 133; --app-info: #E11D48; --app-info-bg: #FFE4E6; } [data-accent="rose"][data-bs-theme="dark"] { --app-primary: #FB7185; --app-primary-hover: #FDA4AF; --app-primary-light: #F43F5E; --app-primary-dark: #FECDD3; --app-primary-subtle: #4C0519; --app-primary-rgb: 251, 113, 133; --app-primary-light-rgb: 244, 63, 94; --app-info: #FB7185; --app-info-bg: #4C0519; } [data-accent="slate"][data-bs-theme="light"], [data-accent="slate"]:not([data-bs-theme="dark"]) { --app-primary: #475569; --app-primary-hover: #334155; --app-primary-light: #94A3B8; --app-primary-dark: #1E293B; --app-primary-subtle: #F1F5F9; --app-primary-rgb: 71, 85, 105; --app-primary-light-rgb: 148, 163, 184; --app-info: #475569; --app-info-bg: #F1F5F9; } [data-accent="slate"][data-bs-theme="dark"] { --app-primary: #94A3B8; --app-primary-hover: #CBD5E1; --app-primary-light: #64748B; --app-primary-dark: #E2E8F0; /* Subtle is bumped to slate-700 (#334155) so it stays visible against Bootstrap's dark --bs-tertiary-bg (#2b3035). The previous value (#1E293B) collided with tertiary backgrounds, making focus rings and hero gradients disappear under the slate palette specifically. */ --app-primary-subtle: #334155; --app-primary-rgb: 148, 163, 184; --app-primary-light-rgb: 100, 116, 139; --app-info: #94A3B8; --app-info-bg: #334155; } /* --- Animations ----------------------------------------------------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* --- Base ----------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--app-text-primary); background-color: var(--app-bg-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.65; font-size: 0.9375rem; } ::selection { background-color: var(--app-primary); color: #fff; } /* --- Typography ----------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); color: var(--app-text-primary); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; } h1, .h1 { font-size: 2.25rem; } h2, .h2 { font-size: 1.75rem; } h3, .h3 { font-size: 1.375rem; } h4, .h4 { font-size: 1.125rem; } .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .lead { color: var(--app-text-secondary); font-size: 1.0625rem; font-weight: 400; line-height: 1.7; } .text-muted { color: var(--app-text-muted) !important; } /* --- Navbar --------------------------------------------------------------- */ .navbar { background-color: var(--app-surface) !important; border-bottom: 1px solid var(--app-border); padding: 0.625rem 0; transition: var(--app-transition); } @supports (backdrop-filter: blur(1px)) { .navbar.sticky-top { backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); } [data-bs-theme="light"] .navbar.sticky-top { background-color: rgba(255, 255, 255, 0.92) !important; } [data-bs-theme="dark"] .navbar.sticky-top { background-color: rgba(15, 23, 41, 0.92) !important; } } .navbar-brand { font-weight: 800; font-size: 1.125rem; color: var(--app-text-primary) !important; letter-spacing: -0.03em; transition: var(--app-transition-fast); } .navbar-brand:hover { color: var(--app-primary) !important; } .navbar-brand-logo { height: 30px; width: auto; } /* Theme-aware logo display */ [data-bs-theme="light"] .navbar-brand .logo-light { display: inline-block !important; } [data-bs-theme="light"] .navbar-brand .logo-dark { display: none !important; } [data-bs-theme="dark"] .navbar-brand .logo-light { display: none !important; } [data-bs-theme="dark"] .navbar-brand .logo-dark { display: inline-block !important; } .navbar-toggler { border: 1px solid var(--app-border); padding: 0.35rem 0.55rem; border-radius: var(--app-radius-sm); } .navbar-toggler:focus { box-shadow: 0 0 0 2px var(--app-primary-subtle); } [data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); } .navbar-nav .nav-link { color: var(--app-text-secondary); font-weight: 500; font-size: 0.875rem; padding: 0.45rem 0.75rem; transition: var(--app-transition-fast); border-radius: var(--app-radius-sm); } .navbar-nav .nav-link:hover { color: var(--app-text-primary); background-color: var(--app-bg-secondary); } .navbar-nav .nav-link.active { color: var(--app-primary); font-weight: 600; } @media (min-width: 992px) { .navbar-nav .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0.75rem; right: 0.75rem; height: 2px; background: var(--app-primary); border-radius: 1px; } .navbar-nav .nav-link { position: relative; } } /* Dropdowns */ .navbar .dropdown-menu { background-color: var(--app-surface); border: 1px solid var(--app-border); box-shadow: var(--app-shadow-lg); border-radius: var(--app-radius-lg); padding: 0.25rem; margin-top: 0.25rem; animation: scaleIn 0.12s ease; transform-origin: top; } .navbar .dropdown-item { color: var(--app-text-secondary); font-size: 0.875rem; padding: 0.45rem 0.75rem; border-radius: var(--app-radius-sm); transition: var(--app-transition-fast); } .navbar .dropdown-item:hover { background-color: var(--app-bg-secondary); color: var(--app-text-primary); } .navbar .dropdown-item.active { background-color: var(--app-primary); color: white; } .navbar .dropdown-divider { border-color: var(--app-border); margin: 0.25rem 0; } @media (min-width: 992px) { .navbar .dropdown-hover:hover > .dropdown-menu { display: block; } .navbar .dropdown-hover .dropdown-menu { margin-top: 0; } } /* --- Home Hero ------------------------------------------------------------ */ .home-hero { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 60vh; padding: 5rem 0; position: relative; background: linear-gradient(180deg, var(--app-bg-body) 0%, var(--app-bg-secondary) 100%); } .home-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 25% 35%, var(--app-primary-subtle) 0%, transparent 50%), radial-gradient(circle at 75% 65%, var(--app-primary-subtle) 0%, transparent 50%); pointer-events: none; opacity: 0.6; } .home-hero__content { position: relative; max-width: 700px; margin: 0 auto; } .home-hero__content > * { animation: fadeUp 0.6s ease both; } .home-hero__content > *:nth-child(1) { animation-delay: 0.05s; } .home-hero__content > *:nth-child(2) { animation-delay: 0.12s; } .home-hero__content > *:nth-child(3) { animation-delay: 0.19s; } .home-hero__content > *:nth-child(4) { animation-delay: 0.26s; } .home-hero__label { display: inline-block; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-primary); background: var(--app-primary-subtle); padding: 0.3rem 0.75rem; border-radius: var(--app-radius-full); margin-bottom: 1.25rem; } .home-hero__title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 1.25rem; } .home-hero__subtitle { font-size: 1.0625rem; color: var(--app-text-secondary); line-height: 1.7; margin-bottom: 2rem; max-width: 540px; margin-left: auto; margin-right: auto; } /* --- Page Hero ------------------------------------------------------------ */ .page-hero { padding: 4rem 0; text-align: center; position: relative; overflow: hidden; } .page-hero--plain { background: linear-gradient(180deg, var(--app-bg-body) 0%, var(--app-bg-secondary) 100%); border-bottom: 1px solid var(--app-border); } .page-hero--image { background-size: cover; background-position: center; color: #fff; } .page-hero--image .page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); } .page-hero--image .page-hero__content { position: relative; z-index: 1; } .page-hero--image h1 { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.2); } .page-hero--image .lead, .page-hero--image p { color: rgba(255,255,255,0.9); } .page-hero h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 0.625rem; } .page-hero .lead { max-width: 600px; margin-left: auto; margin-right: auto; } /* Simple page header (non-hero) */ .page-header { padding: 2.5rem 0 1.5rem; text-align: center; } .page-header h1 { margin-bottom: 0.5rem; } .page-header .page-description { color: var(--app-text-muted); max-width: 600px; margin: 0 auto; } /* --- Content Blocks ------------------------------------------------------- */ .page-content { } .block-content { color: var(--app-text-primary); line-height: 1.75; } .block-content h2, .block-content h3, .block-content h4 { margin-top: 2rem; margin-bottom: 0.75rem; } .block-content h2:first-child, .block-content h3:first-child, .block-content h4:first-child { margin-top: 0; } .block-content p { margin-bottom: 1rem; } .block-content a { color: var(--app-primary); text-decoration: underline; text-decoration-color: var(--app-primary-light); text-underline-offset: 2px; transition: var(--app-transition-fast); } .block-content a:hover { color: var(--app-primary-hover); text-decoration-color: var(--app-primary-hover); } .block-content img { max-width: 100%; height: auto; cursor: pointer; border-radius: var(--app-radius); transition: var(--app-transition); } .block-content img:hover { box-shadow: var(--app-shadow-md); } .block-content figure { max-width: 100%; margin: 1.5rem 0; } .block-content .block-content-figure { margin: 1.5rem auto; max-width: 100%; text-align: center; } .block-content .block-content-figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; cursor: pointer; border-radius: var(--app-radius); transition: var(--app-transition); } .block-content .block-content-figure img:hover { box-shadow: var(--app-shadow-md); } .block-content .block-content-figure figcaption, .block-content figcaption { color: var(--app-text-muted); font-size: 0.8125rem; text-align: center; margin-top: 0.5rem; } .block-content ul, .block-content ol { margin-bottom: 1rem; padding-left: 1.5rem; } .block-content li { margin-bottom: 0.375rem; } .block-content blockquote { border-left: 3px solid var(--app-primary); padding: 0.75rem 0 0.75rem 1.25rem; margin: 1.5rem 0; color: var(--app-text-secondary); font-size: 1.0625rem; } .block-content code { background-color: var(--app-bg-tertiary); color: var(--app-primary-dark); padding: 0.125rem 0.35rem; border-radius: var(--app-radius-sm); font-size: 0.85em; } .block-content pre { background-color: var(--app-bg-tertiary); border: 1px solid var(--app-border); border-radius: var(--app-radius); padding: 1rem; overflow-x: auto; margin: 1.5rem 0; } .block-content pre code { background-color: transparent; padding: 0; color: var(--app-text-primary); } /* Section spacing */ .content-section { margin-bottom: 2rem; } .content-section:last-child { margin-bottom: 0; } .block-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; text-align: center; margin-bottom: 0.375rem; position: relative; padding-bottom: 0.75rem; } .block-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 2.5rem; height: 3px; background: var(--app-primary); border-radius: 2px; } .block-title:not(:has(+ .block-subtitle)) { margin-bottom: 1.75rem; } .block-subtitle { color: var(--app-text-muted); font-size: 0.9375rem; text-align: center; margin-bottom: 1.25rem; max-width: 600px; margin-left: auto; margin-right: auto; } /* --- Image Gallery -------------------------------------------------------- */ .gallery-item { overflow: hidden; border-radius: var(--app-radius); } .gallery-item__link { display: block; position: relative; text-decoration: none; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--app-radius); } .image-block-thumb { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .gallery-item__link:hover .image-block-thumb, .gallery-item__link:focus-visible .image-block-thumb { transform: scale(1.04); } /* Caption slides up from the bottom on hover. Uses a dark gradient so light captions stay readable regardless of the underlying image colors. */ .gallery-item__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 0.875rem 0.75rem; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.78) 70%, rgba(15, 23, 42, 0.92) 100%); color: #fff; font-size: 0.8125rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .gallery-item__link:hover .gallery-item__caption, .gallery-item__link:focus-visible .gallery-item__caption { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .image-block-thumb, .gallery-item__caption { transition: none !important; } .gallery-item__link:hover .image-block-thumb, .gallery-item__link:focus-visible .image-block-thumb { transform: none !important; } } /* --- Cards ---------------------------------------------------------------- */ .card { background-color: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-sm); transition: var(--app-transition); overflow: hidden; } .card:hover { box-shadow: var(--app-shadow-md); transform: translateY(-1px); } .card.no-hover:hover { transform: none; box-shadow: var(--app-shadow-sm); } .card-header { background-color: var(--app-bg-secondary); border-bottom: 1px solid var(--app-border); padding: 0.875rem 1.125rem; font-weight: 600; font-size: 0.9375rem; color: var(--app-text-primary); } .card-body { padding: 1.25rem; color: var(--app-text-primary); } .card-footer { background-color: var(--app-bg-secondary); border-top: 1px solid var(--app-border); padding: 0.875rem 1.125rem; } .card-title { color: var(--app-text-primary); font-weight: 700; font-size: 1.0625rem; margin-bottom: 0.375rem; } .card-text { color: var(--app-text-secondary); font-size: 0.9375rem; line-height: 1.6; } a.card-link-wrapper { text-decoration: none; color: inherit; display: block; } a.card-link-wrapper:hover .card { border-color: var(--app-primary); } /* --- Buttons -------------------------------------------------------------- */ .btn { font-family: var(--font-body); font-weight: 600; border-radius: var(--app-radius); padding: 0.5rem 1.125rem; transition: var(--app-transition-fast); border-width: 1px; font-size: 0.875rem; letter-spacing: -0.005em; } .btn-lg { padding: 0.625rem 1.5rem; font-size: 0.9375rem; border-radius: var(--app-radius); } .btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8125rem; border-radius: var(--app-radius-sm); } .btn-primary { background-color: var(--app-primary); border-color: var(--app-primary); color: #fff; } .btn-primary:hover { background-color: var(--app-primary-hover); border-color: var(--app-primary-hover); color: #fff; box-shadow: var(--app-shadow); } .btn-primary:active { box-shadow: none; } .btn-outline-primary { color: var(--app-primary); border-color: var(--app-primary); background-color: transparent; } .btn-outline-primary:hover { background-color: var(--app-primary); border-color: var(--app-primary); color: #fff; } .btn-secondary { background-color: var(--app-bg-tertiary); border-color: var(--app-border); color: var(--app-text-primary); } .btn-secondary:hover { background-color: var(--app-border-dark); border-color: var(--app-border-dark); color: var(--app-text-primary); } /* --- Forms ---------------------------------------------------------------- */ .form-label { font-weight: 600; font-size: 0.8125rem; color: var(--app-text-primary); margin-bottom: 0.375rem; letter-spacing: 0.01em; } .form-control, .form-select { background-color: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius); color: var(--app-text-primary); padding: 0.5rem 0.75rem; font-size: 0.9375rem; transition: var(--app-transition-fast); } .form-control:focus, .form-select:focus { background-color: var(--app-surface); border-color: var(--app-primary); box-shadow: 0 0 0 3px var(--app-primary-subtle); color: var(--app-text-primary); } .form-control::placeholder { color: var(--app-text-subtle); } .form-text { color: var(--app-text-muted); font-size: 0.75rem; } .invalid-feedback { color: var(--app-danger); font-size: 0.75rem; } .valid-feedback { color: var(--app-success); font-size: 0.75rem; } .form-check-input { border-color: var(--app-border-dark); background-color: var(--app-surface); } .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); } .form-check-input:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px var(--app-primary-subtle); } .form-check-label { color: var(--app-text-primary); } /* Contact form (legacy hooks — kept for backwards compatibility) */ .contact-form .form-control { padding: 0.625rem 0.875rem; } .contact-form textarea.form-control { min-height: 140px; resize: vertical; } /* --- Contact Page --------------------------------------------------------- */ .contact-page { position: relative; background: linear-gradient(180deg, var(--app-bg-body) 0%, var(--app-bg-secondary) 60%, var(--app-bg-body) 100%); } /* Hero */ .contact-hero { position: relative; padding: 5.5rem 0 7.5rem; text-align: center; overflow: hidden; border-bottom: 1px solid var(--app-border); } .contact-hero__atmosphere { position: absolute; inset: 0; background-image: radial-gradient(58% 50% at 18% 28%, var(--app-primary-subtle) 0%, transparent 60%), radial-gradient(46% 46% at 86% 78%, rgba(37, 99, 235, 0.10) 0%, transparent 62%); pointer-events: none; opacity: 0.95; } [data-bs-theme="dark"] .contact-hero { border-bottom-color: rgba(255,255,255,0.05); } [data-bs-theme="dark"] .contact-hero__atmosphere { background-image: radial-gradient(58% 50% at 18% 28%, rgba(96,165,250,0.16) 0%, transparent 62%), radial-gradient(46% 46% at 86% 78%, rgba(96,165,250,0.10) 0%, transparent 62%); } .contact-hero__inner { position: relative; max-width: 720px; margin: 0 auto; animation: fadeUp 0.6s ease both; } .contact-hero__inner > * { animation: fadeUp 0.6s ease both; } .contact-hero__inner > *:nth-child(1) { animation-delay: 0.04s; } .contact-hero__inner > *:nth-child(2) { animation-delay: 0.10s; } .contact-hero__inner > *:nth-child(3) { animation-delay: 0.16s; } .contact-hero__inner > *:nth-child(4) { animation-delay: 0.22s; } .contact-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--app-primary); margin-bottom: 1.25rem; } .contact-hero__eyebrow::before, .contact-hero__eyebrow::after { content: ''; width: 22px; height: 1px; background: var(--app-primary); opacity: 0.55; } .contact-hero__title { font-size: clamp(2rem, 5.2vw, 3.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 1rem; color: var(--app-text-primary); } .contact-hero__subtitle { font-size: 1.0625rem; color: var(--app-text-secondary); line-height: 1.7; max-width: 580px; margin: 0 auto 1.75rem; } .contact-hero__pill { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-text-secondary); font-size: 0.8125rem; font-weight: 500; padding: 0.45rem 0.95rem 0.45rem 0.75rem; border-radius: var(--app-radius-full); box-shadow: var(--app-shadow-sm); } [data-bs-theme="dark"] .contact-hero__pill { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .contact-hero__pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.20); animation: contactPulse 2.4s ease-in-out infinite; } @keyframes contactPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.20); } 50% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } } /* Shell — overlaps hero base */ .contact-shell { margin-top: -4.75rem; padding-bottom: 5.5rem; position: relative; z-index: 1; } .contact-shell__grid { display: grid; gap: 1.5rem; align-items: stretch; animation: fadeUp 0.7s ease 0.18s both; } .contact-shell__grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .contact-shell__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; } @media (max-width: 991.98px) { .contact-shell { margin-top: -3.5rem; } .contact-shell__grid--split { grid-template-columns: minmax(0, 1fr); } } /* Info panel */ .contact-info-panel { position: relative; background: linear-gradient(150deg, #1E293B 0%, #0F172A 60%, #0B1120 100%); color: #fff; border-radius: var(--app-radius-xl); padding: 2.5rem 2rem; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 1.75rem; box-shadow: 0 30px 60px -22px rgba(15, 23, 42, 0.45), 0 12px 28px -10px rgba(15, 23, 42, 0.30); border: 1px solid rgba(255,255,255,0.06); } .contact-info-panel__bloom { position: absolute; z-index: -2; inset: -25%; background: radial-gradient(28% 22% at 82% 14%, rgba(96, 165, 250, 0.45) 0%, transparent 70%), radial-gradient(24% 20% at 14% 92%, rgba(37, 99, 235, 0.30) 0%, transparent 72%); filter: blur(2px); pointer-events: none; } .contact-info-panel__grid { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 32%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 0%, #000 32%, transparent 80%); pointer-events: none; } .contact-info-panel__heading { position: relative; } .contact-info-panel__eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: #93C5FD; margin-bottom: 0.5rem; } .contact-info-panel__title { color: #fff; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin: 0; } /* Channel list */ .contact-channel-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .contact-channel { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; padding: 1.125rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); transition: padding-left 0.25s ease; } .contact-channel::before { content: ''; position: absolute; left: -2rem; top: 50%; width: 1.25rem; height: 1px; background: var(--app-primary-light); transform: translateY(-50%) scaleX(0); transform-origin: right center; transition: transform 0.3s ease; opacity: 0.7; } .contact-channel:hover::before { transform: translateY(-50%) scaleX(1); } .contact-channel:hover { padding-left: 0.25rem; } .contact-channel:first-child { border-top-color: rgba(255, 255, 255, 0.16); } .contact-channel:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .contact-channel__index { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.40); letter-spacing: 0.06em; font-feature-settings: 'tnum'; padding-top: 0.35rem; font-variant-numeric: tabular-nums; } .contact-channel__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .contact-channel__label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); } .contact-channel__label i { font-size: 0.6875rem; color: #93C5FD; } .contact-channel__value { font-size: 1.0625rem; font-weight: 600; color: #fff; text-decoration: none; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.55rem; word-break: break-word; transition: color 0.18s ease; } .contact-channel__value:hover { color: #BFDBFE; } .contact-channel__value--plain { font-weight: 500; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.85); line-height: 1.55; display: block; } .contact-channel__arrow { font-size: 0.75rem; opacity: 0; transform: translateX(-6px); transition: opacity 0.25s ease, transform 0.25s ease; } .contact-channel__value:hover .contact-channel__arrow, .contact-channel__value:focus-visible .contact-channel__arrow { opacity: 1; transform: translateX(0); } /* Monogram (decorative wordmark in panel corner) */ .contact-info-panel__monogram { position: absolute; bottom: -2.25rem; right: -1rem; pointer-events: none; z-index: -1; line-height: 1; } .contact-info-panel__monogram span { display: block; font-family: var(--font-display); font-size: 16rem; font-weight: 800; line-height: 0.85; letter-spacing: -0.06em; color: rgba(255, 255, 255, 0.07); background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Form panel */ .contact-form-panel { position: relative; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-xl); padding: 2.5rem 2.25rem; box-shadow: 0 30px 60px -28px rgba(15, 23, 42, 0.18), 0 8px 24px -12px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; } [data-bs-theme="dark"] .contact-form-panel { box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.55), 0 8px 24px -10px rgba(0, 0, 0, 0.40); } .contact-form-panel__heading { margin-bottom: 1.75rem; padding-bottom: 1.25rem; position: relative; } .contact-form-panel__heading::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: repeating-linear-gradient( 90deg, var(--app-border) 0 6px, transparent 6px 12px ); } .contact-form-panel__eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--app-primary); margin-bottom: 0.5rem; } .contact-form-panel__title { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 0.5rem; color: var(--app-text-primary); } .contact-form-panel__hint { font-size: 0.8125rem; color: var(--app-text-muted); margin: 0; } /* Honeypot — pulled off-screen and out of the tab order. Display:none would make CSS-aware bots skip it, so we keep it in the layout but invisible. */ .contact-form__honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Floating-label fields */ .contact-form .contact-field-wrap { position: relative; } .contact-form .form-floating { position: relative; } .contact-form .form-floating > .form-control, .contact-form .form-floating > .form-control:focus { padding: 1.4rem 1rem 0.45rem; height: auto; min-height: 3.65rem; background-color: var(--app-bg-body); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); font-size: 0.9375rem; color: var(--app-text-primary); transition: border-color 0.15s ease, background-color 0.2s ease, box-shadow 0.18s ease; } [data-bs-theme="dark"] .contact-form .form-floating > .form-control { background-color: var(--app-bg-secondary); } .contact-form .form-floating > textarea.form-control { min-height: 11rem; padding-top: 1.7rem; resize: vertical; line-height: 1.55; } .contact-form .form-floating > .form-control:hover { border-color: var(--app-border-dark); } .contact-form .form-floating > .form-control:focus { background-color: var(--app-surface); border-color: var(--app-primary); box-shadow: 0 0 0 4px var(--app-primary-subtle); outline: none; } .contact-form .form-floating > .form-control::placeholder { color: transparent; } .contact-form .form-floating > label { position: absolute; top: 0; left: 0; height: 100%; padding: 1.05rem 1rem; margin: 0; pointer-events: none; border: 1px solid transparent; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--app-text-muted); transform-origin: 0 0; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, color 0.15s ease; background: transparent; } .contact-form .form-floating > .form-control:focus ~ label, .contact-form .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--app-primary); font-weight: 600; letter-spacing: 0.04em; transform: scale(0.78) translateY(-0.55rem) translateX(0.15rem); } /* Override any inherited Bootstrap label backgrounds */ .contact-form .form-floating > label::after { display: none !important; } /* Errors */ .contact-form .invalid-feedback, .contact-form-panel .invalid-feedback, .contact-form .form-error-message, .contact-form ul.form-error-message { color: var(--app-danger); font-size: 0.75rem; font-weight: 500; margin-top: 0.4rem; padding-left: 0.25rem; display: block; } .contact-form .form-error-message, .contact-form ul.form-error-message { list-style: none; padding-left: 0.25rem; margin-bottom: 0; } /* Submit + actions */ .contact-form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: auto; padding-top: 0.5rem; } /* Layout-only extras for the contact submit button. Visual styling (gradient, shadow, hover/active) is shared with the Midnight/White CTA primary button — see "Shared pill gradient button" below. */ .contact-form__submit { appearance: none; cursor: pointer; font-family: var(--font-body); display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.9rem 0.85rem 1.5rem; font-size: 0.9375rem; } .contact-form__submit:focus-visible { outline: 3px solid var(--app-primary-subtle); outline-offset: 2px; } .contact-form__submit-text { display: inline-block; } .contact-form__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); font-size: 0.8125rem; transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease; } .contact-form__submit:hover .contact-form__arrow { transform: translateX(4px); background: rgba(255, 255, 255, 0.28); } .contact-form__legal { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; font-weight: 500; color: var(--app-text-muted); letter-spacing: 0.01em; } .contact-form__legal i { color: var(--app-success); font-size: 0.8125rem; } /* Solo layout tightening */ .contact-shell__grid--solo .contact-form-panel { padding: 2rem 1.75rem; } /* Responsive */ @media (max-width: 767.98px) { .contact-hero { padding: 4.5rem 0 6rem; } .contact-info-panel, .contact-form-panel { padding: 2rem 1.5rem; } .contact-info-panel { gap: 1.25rem; } .contact-info-panel__monogram span { font-size: 12rem; } .contact-info-panel__title, .contact-form-panel__title { font-size: 1.4rem; } .contact-form__submit { padding: 0.75rem 0.85rem 0.75rem 1.25rem; } } @media (max-width: 575.98px) { .contact-hero { padding: 3.5rem 0 5rem; } .contact-shell { padding-bottom: 4rem; } .contact-info-panel__monogram { right: -1.5rem; bottom: -1.5rem; } .contact-info-panel__monogram span { font-size: 10rem; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .contact-hero__inner, .contact-hero__inner > *, .contact-shell__grid, .contact-hero__pill-dot, .contact-channel, .contact-channel::before, .contact-channel__arrow, .contact-form__submit, .contact-form__arrow { animation: none !important; transition: none !important; } } /* --- Alerts --------------------------------------------------------------- */ .alert { border-radius: var(--app-radius); border: 1px solid transparent; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.875rem; } .alert-success { background-color: var(--app-success-bg); border-color: var(--app-success); color: var(--app-success); } .alert-info { background-color: var(--app-info-bg); border-color: var(--app-info); color: var(--app-info); } .alert-warning { background-color: var(--app-warning-bg); border-color: var(--app-warning); color: var(--app-warning); } .alert-danger { background-color: var(--app-danger-bg); border-color: var(--app-danger); color: var(--app-danger); } .alert-link { font-weight: 600; text-decoration: underline; } /* --- Footer --------------------------------------------------------------- */ .footer { background-color: var(--app-surface); border-top: 1px solid var(--app-border); color: var(--app-text-muted); padding: 2.5rem 0; margin-top: auto; } .footer-brand { font-weight: 800; font-size: 1rem; color: var(--app-text-primary); letter-spacing: -0.02em; margin-bottom: 0.25rem; } .footer-copyright { font-size: 0.8125rem; color: var(--app-text-muted); } .footer-nav { gap: 1.5rem !important; } .footer-nav a { color: var(--app-text-muted); font-size: 0.8125rem; font-weight: 500; text-decoration: none; transition: var(--app-transition-fast); } .footer-nav a:hover { color: var(--app-primary); } /* --- Modals / Lightbox ---------------------------------------------------- */ .modal-content { background-color: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); } .modal-header { border-bottom: 1px solid var(--app-border); background-color: var(--app-bg-secondary); } .modal-footer { border-top: 1px solid var(--app-border); background-color: var(--app-bg-secondary); } .modal-title { color: var(--app-text-primary); } .modal-body { color: var(--app-text-primary); } .modal-content.bg-transparent { background-color: transparent !important; border: none !important; } .lightbox-dialog { cursor: pointer; } .lightbox-dialog img { cursor: default; } .btn-close-white { filter: brightness(0) invert(1); } /* Lightbox caption — sits below the image when the media has one. */ .lightbox-caption { margin: 1rem auto 0; max-width: 720px; padding: 0 1rem; color: rgba(255, 255, 255, 0.85); font-size: 0.9375rem; line-height: 1.5; text-align: center; cursor: default; } .lightbox-caption:empty, .lightbox-caption.is-empty { display: none; } /* Prev/next navigation buttons. Sit centered vertically over the modal-body left/right edges; large touch target on mobile. */ .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.55); color: #fff; font-size: 1rem; cursor: pointer; transition: background-color 0.18s ease, transform 0.18s ease; z-index: 2; } .lightbox-nav--prev { left: 1rem; } .lightbox-nav--next { right: 1rem; } .lightbox-nav:hover { background: rgba(15, 23, 42, 0.78); transform: translateY(-50%) scale(1.06); } .lightbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-width: 575.98px) { .lightbox-nav { width: 2.5rem; height: 2.5rem; } .lightbox-nav--prev { left: 0.5rem; } .lightbox-nav--next { right: 0.5rem; } } /* "n / total" pill in the top-left corner. */ .lightbox-counter { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.3rem 0.65rem; background: rgba(15, 23, 42, 0.65); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; border-radius: var(--app-radius-full); font-variant-numeric: tabular-nums; z-index: 2; } @media (prefers-reduced-motion: reduce) { .lightbox-nav { transition: none; } .lightbox-nav:hover { transform: translateY(-50%); } } /* --- Badges --------------------------------------------------------------- */ .badge { font-weight: 600; font-size: 0.6875rem; padding: 0.3em 0.55em; border-radius: var(--app-radius-sm); letter-spacing: 0.02em; } .badge.bg-primary { background-color: var(--app-primary) !important; } .badge.bg-success { background-color: var(--app-success) !important; } .badge.bg-warning { background-color: var(--app-warning) !important; } .badge.bg-danger { background-color: var(--app-danger) !important; } .badge.bg-info { background-color: var(--app-info) !important; } /* --- Pricing Table -------------------------------------------------------- */ .pricing-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); padding: 2rem 1.5rem; text-align: center; position: relative; transition: box-shadow 0.15s ease, border-color 0.15s ease; height: 100%; display: flex; flex-direction: column; } .pricing-card:hover { box-shadow: var(--app-shadow-md); } .pricing-card--highlighted { border-color: var(--app-primary); border-width: 2px; box-shadow: var(--app-shadow-md); transform: scale(1.02); } .pricing-card--highlighted:hover { box-shadow: var(--app-shadow-lg); } .pricing-card__badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--app-primary); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.875rem; border-radius: var(--app-radius-full); } .pricing-card__title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; } .pricing-card__description { color: var(--app-text-muted); font-size: 0.875rem; margin-bottom: 1rem; } .pricing-card__price { margin-bottom: 1.5rem; } .pricing-card__amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--app-text-primary); line-height: 1; } .pricing-card__period { display: block; font-size: 0.8125rem; color: var(--app-text-muted); margin-top: 0.25rem; } .pricing-card__features { list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left; flex-grow: 1; } .pricing-card__features li { padding: 0.375rem 0; font-size: 0.875rem; color: var(--app-text-secondary); border-bottom: 1px solid var(--app-border-light); } .pricing-card__features li:last-child { border-bottom: none; } .pricing-card__features li i { color: var(--app-primary); margin-right: 0.5rem; font-size: 0.75rem; } /* --- CTA Block ------------------------------------------------------------ */ .cta-block { margin-top: 1rem; margin-bottom: 2.5rem; } .cta-block__inner { border-radius: var(--app-radius-lg); padding: 3rem 2.5rem; text-align: center; } .cta-block__heading { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .cta-block__description { font-size: 1rem; max-width: 540px; margin: 0 auto 1.5rem; line-height: 1.6; } .cta-block__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* Shared atmospheric base — applies to both Midnight and White */ .cta-block--midnight, .cta-block--white { position: relative; border-radius: var(--app-radius-xl); overflow: hidden; isolation: isolate; } /* CTA Style: Midnight (rich dark with cobalt atmosphere) */ .cta-block--midnight { background: linear-gradient(150deg, #1E293B 0%, #0F172A 60%, #0B1120 100%); color: #fff; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 30px 60px -22px rgba(15, 23, 42, 0.45), 0 12px 28px -10px rgba(15, 23, 42, 0.30); } .cta-block--midnight::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 32%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 0%, #000 32%, transparent 80%); pointer-events: none; } .cta-block--midnight::after { content: ''; position: absolute; z-index: -2; inset: -25%; background: radial-gradient(22% 26% at 86% 14%, rgba(96, 165, 250, 0.45) 0%, transparent 70%), radial-gradient(20% 22% at 12% 90%, rgba(37, 99, 235, 0.32) 0%, transparent 72%); filter: blur(2px); pointer-events: none; } .cta-block--midnight .block-title, .cta-block--midnight .cta-block__heading { color: #fff; } .cta-block--midnight .block-title::after { background: rgba(255,255,255,0.5); } .cta-block--midnight .cta-block__description { color: rgba(255, 255, 255, 0.85); } /* CTA Style: White (light counterpart with the same atmospheric pattern) */ .cta-block--white { background: linear-gradient(150deg, #FFFFFF 0%, #F8FAFC 60%, #EFF4FB 100%); color: var(--app-text-primary); border: 1px solid var(--app-border); box-shadow: 0 30px 60px -28px rgba(15, 23, 42, 0.18), 0 8px 24px -12px rgba(15, 23, 42, 0.08); } .cta-block--white::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 32%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 0%, #000 32%, transparent 80%); pointer-events: none; } .cta-block--white::after { content: ''; position: absolute; z-index: -2; inset: -25%; background: radial-gradient(22% 26% at 86% 14%, rgba(96, 165, 250, 0.30) 0%, transparent 72%), radial-gradient(20% 22% at 12% 90%, rgba(37, 99, 235, 0.18) 0%, transparent 74%); filter: blur(2px); pointer-events: none; } [data-bs-theme="dark"] .cta-block--white { background: linear-gradient(150deg, var(--app-surface) 0%, var(--app-bg-secondary) 60%, #0E1626 100%); border-color: rgba(148, 163, 184, 0.18); color: var(--app-text-primary); } [data-bs-theme="dark"] .cta-block--white::before { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); } [data-bs-theme="dark"] .cta-block--white::after { background: radial-gradient(22% 26% at 86% 14%, rgba(96, 165, 250, 0.28) 0%, transparent 72%), radial-gradient(20% 22% at 12% 90%, rgba(37, 99, 235, 0.18) 0%, transparent 74%); } .cta-block--white .block-title, .cta-block--white .cta-block__heading { color: var(--app-text-primary); } .cta-block--white .block-title::after { background: var(--app-primary); } .cta-block--white .cta-block__description { color: var(--app-text-secondary); } /* Shared pill gradient button — used by: - .contact-form__submit (contact form Send button) - .cta-block--midnight / --white .btn-primary (CTA primary action) Per-button layout extras live next to each button's own rule. */ .contact-form__submit, .cta-block--midnight .cta-block__actions .btn-primary, .cta-block--white .cta-block__actions .btn-primary { background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%); border: 0; color: #fff; font-weight: 700; border-radius: var(--app-radius-full); letter-spacing: -0.005em; box-shadow: 0 8px 18px -6px rgba(var(--app-primary-rgb), 0.45), 0 2px 4px rgba(15, 23, 42, 0.08); position: relative; isolation: isolate; transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.18s ease; } .cta-block--midnight .cta-block__actions .btn-primary, .cta-block--white .cta-block__actions .btn-primary { padding: 0.85rem 1.75rem; } .contact-form__submit::before, .cta-block--midnight .cta-block__actions .btn-primary::before, .cta-block--white .cta-block__actions .btn-primary::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, transparent 60%); pointer-events: none; z-index: -1; } .contact-form__submit:hover, .cta-block--midnight .cta-block__actions .btn-primary:hover, .cta-block--white .cta-block__actions .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -6px rgba(var(--app-primary-rgb), 0.55), 0 3px 6px rgba(15, 23, 42, 0.10); filter: saturate(1.1); color: #fff; } .contact-form__submit:active, .cta-block--midnight .cta-block__actions .btn-primary:active, .cta-block--white .cta-block__actions .btn-primary:active { transform: translateY(0); filter: saturate(0.95); } /* Secondary ghost pill — adapts per variant */ .cta-block--midnight .cta-block__actions .btn-outline-primary, .cta-block--white .cta-block__actions .btn-outline-primary { background: transparent; font-weight: 600; border-radius: var(--app-radius-full); padding: 0.85rem 1.75rem; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .cta-block--midnight .cta-block__actions .btn-outline-primary { border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; } .cta-block--midnight .cta-block__actions .btn-outline-primary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.40); color: #fff; } .cta-block--white .cta-block__actions .btn-outline-primary { border: 1px solid var(--app-border-dark); color: var(--app-text-primary); } .cta-block--white .cta-block__actions .btn-outline-primary:hover { background: var(--app-primary); border-color: var(--app-primary); color: #fff; } @media (prefers-reduced-motion: reduce) { .contact-form__submit, .cta-block--midnight .cta-block__actions .btn-primary, .cta-block--white .cta-block__actions .btn-primary { transition: none; } } /* --- FAQ Accordion -------------------------------------------------------- */ .faq-accordion { border: none; } .faq-accordion .accordion-item { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius) !important; margin-bottom: 0.5rem; overflow: hidden; } .faq-accordion .accordion-item:last-child { margin-bottom: 0; } .faq-accordion .accordion-button { font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; color: var(--app-text-primary); background: var(--app-surface); padding: 1rem 1.25rem; box-shadow: none; } .faq-accordion .accordion-button:not(.collapsed) { color: var(--app-primary); background: var(--app-surface); box-shadow: none; } .faq-accordion .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; } .faq-accordion .accordion-body { padding: 0 1.25rem 1rem; color: var(--app-text-secondary); line-height: 1.7; } /* --- Features / Icon Grid ------------------------------------------------- */ .feature-card { position: relative; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); padding: 1.75rem 1.25rem; height: 100%; overflow: hidden; box-shadow: var(--app-shadow-sm); transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease; } .feature-card:hover { transform: translateY(-2px); border-color: var(--app-primary-light); box-shadow: var(--app-shadow-md); } /* Top accent line — scales in from left on hover */ .feature-card::before, .cards-block-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--app-primary) 0%, var(--app-primary-light) 100%); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 1; } .feature-card:hover::before, .cards-block-card:hover::before { transform: scaleX(1); } .feature-card__icon { width: 3rem; height: 3rem; border-radius: var(--app-radius); background: linear-gradient(135deg, var(--app-primary-subtle) 0%, rgba(var(--app-primary-light-rgb), 0.20) 100%); box-shadow: inset 0 0 0 1px rgba(var(--app-primary-rgb), 0.12); color: var(--app-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1rem; transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } .feature-card:hover .feature-card__icon { background: linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.16) 0%, rgba(var(--app-primary-light-rgb), 0.28) 100%); box-shadow: inset 0 0 0 1px rgba(var(--app-primary-rgb), 0.22), 0 6px 16px -6px rgba(var(--app-primary-rgb), 0.32); } [data-bs-theme="dark"] .feature-card__icon { background: linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.14) 0%, rgba(var(--app-primary-rgb), 0.06) 100%); box-shadow: inset 0 0 0 1px rgba(var(--app-primary-rgb), 0.18); } [data-bs-theme="dark"] .feature-card:hover .feature-card__icon { background: linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.22) 0%, rgba(var(--app-primary-rgb), 0.12) 100%); box-shadow: inset 0 0 0 1px rgba(var(--app-primary-rgb), 0.32), 0 6px 16px -6px rgba(var(--app-primary-rgb), 0.32); } .feature-card__title { font-weight: 700; font-size: 1rem; margin-bottom: 0.375rem; } .feature-card__description { color: var(--app-text-secondary); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 0; } /* No-icon variant within a Cards block — adds the same accent + hover lift */ .cards-block-card { position: relative; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease; } .cards-block-card:hover { border-color: var(--app-primary-light); } @media (prefers-reduced-motion: reduce) { .feature-card, .feature-card__icon, .cards-block-card, .feature-card::before, .cards-block-card::before { transition: none !important; } .feature-card:hover, .cards-block-card:hover { transform: none !important; } } /* --- Blog ----------------------------------------------------------------- */ /* Blog listing cards */ .blog-card { transition: box-shadow 0.15s ease, transform 0.15s ease; } .blog-card:hover { box-shadow: var(--app-shadow-md); transform: translateY(-2px); } .blog-card__image { height: 200px; overflow: hidden; } .blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .blog-card:hover .blog-card__image img { transform: scale(1.03); } .blog-card__meta { font-size: 0.75rem; color: var(--app-text-muted); font-weight: 500; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; } .blog-card__title { font-size: 1.125rem; font-weight: 700; color: var(--app-text-primary); line-height: 1.3; margin-bottom: 0.5rem; } .blog-card__excerpt { font-size: 0.875rem; color: var(--app-text-secondary); line-height: 1.6; margin-bottom: 0.75rem; } .blog-card__link { font-size: 0.8125rem; font-weight: 600; color: var(--app-primary); } .blog-card__link i { font-size: 0.6875rem; transition: transform 0.15s ease; } .blog-card:hover .blog-card__link i { transform: translateX(3px); } /* Blog post (single) */ .blog-post__back { display: inline-block; font-size: 0.8125rem; font-weight: 500; color: var(--app-text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color 0.15s ease; } .blog-post__back:hover { color: var(--app-primary); } .blog-post__header { margin-bottom: 2rem; } .blog-post__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.75rem; } .blog-post__meta { font-size: 0.8125rem; color: var(--app-text-muted); font-weight: 500; } .blog-post__cover { margin-bottom: 2rem; border-radius: var(--app-radius-lg); overflow: hidden; } .blog-post__cover img { width: 100%; height: auto; display: block; } /* Pagination */ .pagination { gap: 0.25rem; } .pagination .page-link { border: 1px solid var(--app-border); color: var(--app-text-secondary); font-size: 0.8125rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: var(--app-radius-sm); background: var(--app-surface); } .pagination .page-link:hover { background: var(--app-bg-secondary); border-color: var(--app-border-dark); color: var(--app-text-primary); } .pagination .page-item.active .page-link { background: var(--app-primary); border-color: var(--app-primary); color: #fff; } .pagination .page-item.disabled .page-link { background: var(--app-bg-secondary); border-color: var(--app-border); color: var(--app-text-subtle); } /* --- Separator ------------------------------------------------------------ */ hr { border-color: var(--app-border); opacity: 1; margin: 1.5rem 0; } .separator-line { border: none; border-top: 1px solid var(--app-border); margin: 2.5rem 0; } /* --- Utilities ------------------------------------------------------------ */ .border { border-color: var(--app-border) !important; } .border-top { border-top-color: var(--app-border) !important; } .border-bottom { border-bottom-color: var(--app-border) !important; } a { color: var(--app-primary); transition: var(--app-transition-fast); } a:hover { color: var(--app-primary-hover); } .text-primary { color: var(--app-primary) !important; } .text-secondary { color: var(--app-text-secondary) !important; } .bg-primary { background-color: var(--app-primary) !important; color: #fff !important; } .bg-light { background-color: var(--app-bg-secondary) !important; } .bg-body-secondary { background-color: var(--app-bg-secondary) !important; } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 575.98px) { .container { padding-left: 1rem; padding-right: 1rem; } .home-hero { min-height: 50vh; padding: 3rem 0; } .home-hero__title { font-size: 2rem; } .page-hero { padding: 3rem 0; } h1, .h1 { font-size: 1.75rem; } .display-4 { font-size: 2rem; } .card-body { padding: 1rem; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-hero { padding: 3.5rem 0; } } @media (min-width: 1200px) { .container { max-width: 1120px; } } /* --- Accessibility -------------------------------------------------------- */ *:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; } @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; } } /* --- Error pages ---------------------------------------------------------- */ .error-page { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 5rem 0; overflow: hidden; background: linear-gradient(180deg, var(--app-bg-body) 0%, var(--app-bg-secondary) 100%); } .error-page__atmosphere { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(58% 50% at 18% 28%, var(--app-primary-subtle) 0%, transparent 60%), radial-gradient(46% 46% at 86% 78%, rgba(var(--app-primary-rgb), 0.10) 0%, transparent 62%); } [data-bs-theme="dark"] .error-page__atmosphere { background-image: radial-gradient(58% 50% at 18% 28%, rgba(var(--app-primary-rgb), 0.16) 0%, transparent 62%), radial-gradient(46% 46% at 86% 78%, rgba(var(--app-primary-rgb), 0.10) 0%, transparent 62%); } .error-page__inner { position: relative; text-align: center; max-width: 640px; } .error-page__code { display: inline-block; font-family: var(--font-display); font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--app-primary); opacity: 0.85; margin-bottom: 0.5rem; } .error-page__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 0.75rem; } .error-page__subtitle { color: var(--app-text-secondary); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1.75rem; } .error-page__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* --- Reveal on scroll ----------------------------------------------------- */ html.js-reveal-ready .content-section, html.js-reveal-ready .blog-card { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* Note: deliberately no `will-change` here. It creates a stacking context that traps Bootstrap modals below the .modal-backdrop appended to . The animation runs once at reveal — no repaint hint needed. */ } html.js-reveal-ready .content-section.is-revealed, html.js-reveal-ready .blog-card.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js-reveal-ready .content-section, html.js-reveal-ready .blog-card, html.js-reveal-ready .content-section.is-revealed, html.js-reveal-ready .blog-card.is-revealed { opacity: 1; transform: none; transition: none; } } /* --- On-load fadeUp for hero / header areas ------------------------------- */ .page-hero h1, .page-hero .lead, .page-hero p { animation: fadeUp 0.6s ease both; } .page-hero h1 { animation-delay: 0.04s; } .page-hero .lead, .page-hero p { animation-delay: 0.12s; } .page-header h1, .page-header .page-description { animation: fadeUp 0.6s ease both; } .page-header h1 { animation-delay: 0.04s; } .page-header .page-description { animation-delay: 0.12s; } .blog-post__header > * { animation: fadeUp 0.6s ease both; } .blog-post__header > *:nth-child(1) { animation-delay: 0.04s; } .blog-post__header > *:nth-child(2) { animation-delay: 0.10s; } .blog-post__header > *:nth-child(3) { animation-delay: 0.16s; } .blog-post__back, .blog-post__cover { animation: fadeUp 0.6s ease both; } .blog-post__back { animation-delay: 0.02s; } .blog-post__cover { animation-delay: 0.20s; } /* --- Builder block overlay ----------------------------------------------- */ /* Applied when an admin loads a page inside the page-builder iframe with ?_builder=1. The overlay sits above each block, dimming it slightly and showing an "Edit" button on hover. Click bubbles a postMessage to the parent which navigates the editor pane. */ .builder-block-wrap { position: relative; transition: outline 0.12s ease; cursor: pointer; } .builder-block-wrap:hover { outline: 2px solid var(--app-primary, #2563EB); outline-offset: 2px; } .builder-block-overlay { position: absolute; inset: 0; z-index: 10; display: flex; justify-content: flex-end; align-items: flex-start; padding: 0.5rem; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; background: linear-gradient(to bottom, rgba(var(--app-primary-rgb, 37, 99, 235), 0.06) 0%, rgba(var(--app-primary-rgb, 37, 99, 235), 0.02) 30%, transparent 100%); } .builder-block-wrap:hover .builder-block-overlay { opacity: 1; pointer-events: auto; } .builder-block-overlay__label { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0.625rem; background: var(--app-primary, #2563EB); color: #fff; border-radius: 999px; pointer-events: none; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; } .builder-block-overlay__edit { border: 0; background: var(--app-primary, #2563EB); color: #fff; font-size: 0.8125rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 6px; display: inline-flex; align-items: center; gap: 0.4rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); cursor: pointer; pointer-events: auto; } .builder-block-overlay__edit:hover { background: var(--app-primary-hover, #1D4ED8); } /* --- Draft preview banner ------------------------------------------------- */ /* Shown only when an admin views an unpublished page/post at its public URL. Striped accent stripe so it reads as a system message and not as content. */ .draft-banner { background: repeating-linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.10) 0, rgba(var(--app-primary-rgb), 0.10) 12px, rgba(var(--app-primary-rgb), 0.18) 12px, rgba(var(--app-primary-rgb), 0.18) 24px); border-bottom: 1px solid rgba(var(--app-primary-rgb), 0.25); color: var(--app-primary-dark); font-size: 0.875rem; padding: 0.625rem 0; } [data-bs-theme="dark"] .draft-banner { color: var(--app-primary-light); } .draft-banner__msg { color: inherit; opacity: 0.85; } .draft-banner__link { color: inherit; text-decoration: none; font-weight: 600; border-bottom: 1px dashed currentColor; } .draft-banner__link:hover { text-decoration: none; opacity: 0.85; } /* --- Print ---------------------------------------------------------------- */ @media print { .navbar, .footer, .btn, .alert, .draft-banner { display: none !important; } body { background: #fff; color: #000; } .card { border: 1px solid #ddd; box-shadow: none; } }