/* AMAA base styles — token-driven (see tokens.css). Bootstrap 5 provides the grid/components; this file applies brand typography, focus states, and the diagonal-stripe motif. */ @import "./tokens.css"; body { font-family: var(--amaa-font-body); font-size: var(--amaa-fs-body-md); line-height: var(--amaa-lh-body-md); color: var(--amaa-on-surface); background-color: var(--amaa-background); min-height: 100vh; display: flex; flex-direction: column; } /* Arabic script uses the RTL font stack (dir set on in Phase 3). */ :root[dir="rtl"] body { font-family: var(--amaa-font-body-ar); } :root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3, :root[dir="rtl"] h4, :root[dir="rtl"] .amaa-heading { font-family: var(--amaa-font-heading-ar); } h1, h2, h3, h4, h5, h6, .amaa-heading { font-family: var(--amaa-font-heading); color: var(--amaa-on-surface); } main { flex: 1 0 auto; } /* width:100% is load-bearing, not decorative:
is a flex item of body's flex-direction:column (the sticky-footer layout below), and a flex item with auto cross-axis margins (margin-inline:auto here) opts OUT of the default align-items:stretch — without an explicit width,
shrinks to fit its content instead of filling the page, so every non-full-bleed page's content silently renders far narrower than its own max-width. */ .amaa-container { width: 100%; max-width: var(--amaa-container-max); margin-inline: auto; padding-inline: var(--amaa-margin-mobile); } @media (min-width: 768px) { .amaa-container { padding-inline: var(--amaa-margin-desktop); } } /* ---- Brand identity ---- */ .amaa-brand { font-family: var(--amaa-font-heading); font-weight: 700; letter-spacing: -0.02em; color: var(--amaa-primary); text-decoration: none; } .amaa-brand img { display: block; } .amaa-topbar { background: var(--amaa-surface-container-lowest); border-bottom: 1px solid var(--amaa-outline-variant); box-shadow: var(--amaa-shadow-sm); position: fixed; inset-inline: 0; top: 0; z-index: 1030; } .amaa-topbar-spacer { height: 80px; } /* ---- Header nav (Stitch TopNavBar) ---- */ .amaa-nav-link { position: relative; display: flex; align-items: center; height: 100%; padding-inline: 1rem; font-size: var(--amaa-fs-body-md); color: var(--amaa-on-surface-variant); text-decoration: none; transition: color var(--amaa-dur-fast) var(--amaa-ease); } .amaa-nav-link::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 2px; background: var(--amaa-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--amaa-dur-fast) var(--amaa-ease); } :root[dir="rtl"] .amaa-nav-link::after { transform-origin: right; } .amaa-nav-link:hover { color: var(--amaa-primary); } .amaa-nav-link:hover::after { transform: scaleX(1); } .amaa-nav-link.active { color: var(--amaa-primary); font-weight: 600; } .amaa-nav-link.active::after { transform: scaleX(1); } .amaa-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; /* WCAG 2.5.5: 44x44px minimum touch target */ border: none; background: transparent; color: var(--amaa-on-surface-variant); border-radius: var(--amaa-radius-full); transition: color var(--amaa-dur-fast) var(--amaa-ease); } .amaa-icon-btn:hover { color: var(--amaa-primary); } /* Bootstrap's .navbar-toggler-icon background image is only defined inside a .navbar ancestor (via a scoped custom property); our header isn't a .navbar, so set it directly here. */ .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(65, 71, 81, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .btn-amaa-quote { background: var(--amaa-primary); color: var(--amaa-on-primary); border: none; border-radius: var(--amaa-radius); padding: 0.5rem 1.5rem; font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); letter-spacing: var(--amaa-ls-label-sm); text-transform: uppercase; box-shadow: var(--amaa-shadow-sm); text-decoration: none; transition: background var(--amaa-dur-fast) var(--amaa-ease); } .btn-amaa-quote:hover { background: var(--amaa-surface-tint); color: var(--amaa-on-primary); } /* ---- Footer (Stitch Footer component) ---- */ .amaa-footer { background: var(--amaa-surface-container-highest); border-top: 4px solid var(--amaa-primary); color: var(--amaa-on-surface-variant); } .amaa-footer h4 { font-size: var(--amaa-fs-label-sm); text-transform: uppercase; letter-spacing: var(--amaa-ls-label-sm); color: var(--amaa-on-surface-variant); font-family: var(--amaa-font-body); } .amaa-footer a.amaa-footer-link { color: var(--amaa-on-surface-variant); text-decoration: none; width: fit-content; } .amaa-footer a.amaa-footer-link:hover { color: var(--amaa-primary); text-decoration: underline; } .amaa-footer-mark { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; } .amaa-footer-mark img { height: 28px; width: auto; } .amaa-footer-hq p { display: flex; align-items: flex-start; gap: 0.5rem; } .amaa-footer-hq .amaa-footer-icon { flex: 0 0 auto; margin-top: 0.15em; } /* ---- CTA band: dark brand-navy, replaces the previous flat gray box (P2 #1) ---- */ .amaa-cta-band { position: relative; overflow: hidden; padding: 3rem 1.5rem; border-radius: var(--amaa-radius-xl); background: linear-gradient(135deg, var(--amaa-on-primary-fixed), var(--amaa-on-primary-fixed-variant) 65%, var(--amaa-primary)); color: var(--amaa-surface-container-lowest); } @media (min-width: 768px) { .amaa-cta-band { padding: 4rem 3rem; } } .amaa-cta-band h2 { color: var(--amaa-surface-container-lowest); font-size: var(--amaa-fs-display-lg); line-height: var(--amaa-lh-display-lg); } .amaa-cta-band p { color: var(--amaa-primary-fixed); max-width: 60ch; margin-inline: auto; font-size: var(--amaa-fs-body-lg); } /* Diagonal-stripe motif derived from the logo "M" (subtle, decorative only). */ .amaa-stripe { position: relative; } .amaa-stripe::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 80px; height: 80px; background: linear-gradient(135deg, transparent 50%, rgba(0, 79, 137, 0.10) 50%); pointer-events: none; } .btn-amaa-primary { background: var(--amaa-primary); color: var(--amaa-on-primary); border: none; border-radius: var(--amaa-radius-lg); font-weight: var(--amaa-fw-label-sm); transition: background var(--amaa-dur-fast) var(--amaa-ease); } .btn-amaa-primary:hover { background: var(--amaa-surface-tint); color: var(--amaa-on-primary); } /* ---- Hero (Stitch full-bleed hero) ---- */ .amaa-hero { position: relative; width: 100%; min-height: min(600px, 82vh); display: flex; align-items: center; overflow: hidden; color: var(--amaa-surface-container-lowest); } .amaa-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: brightness(0.55); } .amaa-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(0, 28, 55, 0.82), rgba(0, 28, 55, 0)); } .amaa-hero-content { position: relative; z-index: 2; max-width: 640px; } .amaa-hero-badge { display: inline-block; font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); letter-spacing: 0.15em; text-transform: uppercase; color: var(--amaa-surface-container-lowest); border: 1px solid var(--amaa-surface-container-lowest); border-radius: var(--amaa-radius); padding: 0.35rem 0.85rem; margin-bottom: 1rem; } .amaa-text-shadow-hero { text-shadow: var(--amaa-shadow-hero); } .amaa-hero h1 { font-size: var(--amaa-fs-display-lg); line-height: var(--amaa-lh-display-lg); font-weight: var(--amaa-fw-display-lg); letter-spacing: -0.02em; color: var(--amaa-surface-container-lowest); } /* Strengthened accent-line treatment (P2 #5) — a color change alone read as too subtle; adds a translucent underline bar beneath the highlighted phrase for a clearer typographic anchor. */ .amaa-hero h1 .accent { color: var(--amaa-primary-fixed); position: relative; display: inline-block; } .amaa-hero h1 .accent::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -0.08em; width: 100%; height: 0.12em; border-radius: 2px; background: var(--amaa-primary-fixed); opacity: 0.55; } .amaa-hero p { font-size: var(--amaa-fs-body-lg); line-height: var(--amaa-lh-body-lg); color: var(--amaa-surface-container-low); margin-top: 1rem; max-width: 32rem; } .amaa-hero-ctas { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } .amaa-hero-cta-solid, .amaa-hero-cta-ghost { display: inline-block; font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); letter-spacing: var(--amaa-ls-label-sm); text-transform: uppercase; padding: 0.75rem 2rem; border-radius: var(--amaa-radius); text-decoration: none; transition: background var(--amaa-dur-fast) var(--amaa-ease), color var(--amaa-dur-fast) var(--amaa-ease), transform var(--amaa-dur-fast) var(--amaa-ease), box-shadow var(--amaa-dur-fast) var(--amaa-ease); } .amaa-hero-cta-solid { background: var(--amaa-primary); color: var(--amaa-on-primary); box-shadow: var(--amaa-shadow-md); } .amaa-hero-cta-solid:hover { background: var(--amaa-surface-tint); color: var(--amaa-on-primary); transform: translateY(-2px); box-shadow: var(--amaa-shadow-hero); } .amaa-hero-cta-ghost { background: transparent; color: var(--amaa-surface-container-lowest); border: 2px solid var(--amaa-surface-container-lowest); } .amaa-hero-cta-ghost:hover { background: var(--amaa-surface-container-lowest); color: var(--amaa-primary); transform: translateY(-2px); } /* Ken Burns background treatment (config-driven via Hero SettingsJson "motion":"kenburns") — a slow alternating pan/zoom; the global prefers-reduced-motion rule above already zeroes animation-duration site-wide, so this needs no separate reduced-motion override. */ @keyframes amaa-hero-kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1%, -1%, 0); } } .amaa-hero-bg-motion { animation: amaa-hero-kenburns 22s var(--amaa-ease) infinite alternate; } .amaa-hero-scroll-cue { position: absolute; z-index: 2; inset-inline: 0; bottom: 1.5rem; display: flex; justify-content: center; color: var(--amaa-surface-container-lowest); animation: amaa-scroll-cue-pulse 2.2s var(--amaa-ease) infinite; } /* animation: none, not just opacity: the infinite keyframe animation recomputes opacity every frame, so a plain "opacity: 1" hover rule can never win against it — only removing the animation lets the normal cascade opacity apply. */ .amaa-hero-scroll-cue:hover { animation: none; opacity: 1; } /* A slow opacity pulse rather than a translateY bounce — a repeated up/down nudge reads as the dated "bounce/elastic" affordance pattern; fading is an equally clear "scroll for more" cue without the springy motion. */ @keyframes amaa-scroll-cue-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* ---- Hero "light" variant (interior listing pages: business-sectors, service-details) ---- */ .amaa-hero-light { position: relative; background: var(--amaa-surface); border-bottom: 1px solid var(--amaa-outline-variant); overflow: hidden; padding-block: 4rem; } .amaa-hero-light::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 33%; height: 100%; background: var(--amaa-surface-container-high); transform: skewX(-12deg); transform-origin: top right; opacity: 0.5; pointer-events: none; z-index: 0; } :root[dir="rtl"] .amaa-hero-light::before { transform: skewX(12deg); transform-origin: top left; } .amaa-hero-light-grid { position: relative; z-index: 1; display: grid; gap: var(--amaa-gutter); } @media (min-width: 992px) { .amaa-hero-light-grid.has-side { grid-template-columns: 1fr 1fr; align-items: center; } } .amaa-hero-light-content { max-width: 48rem; } .amaa-hero-badge-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.9rem; border: 1px solid var(--amaa-primary); color: var(--amaa-primary); background: rgba(210, 228, 255, 0.2); border-radius: var(--amaa-radius-full); font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); margin-bottom: 1rem; } .amaa-hero-light h1 { color: var(--amaa-primary); font-size: var(--amaa-fs-display-lg); line-height: var(--amaa-lh-display-lg); font-weight: var(--amaa-fw-display-lg); margin-bottom: 1.5rem; } .amaa-hero-light-content p { color: var(--amaa-on-surface-variant); font-size: var(--amaa-fs-body-lg); line-height: var(--amaa-lh-body-lg); max-width: 40rem; } .amaa-hero-light-media { position: relative; min-height: 320px; border-radius: var(--amaa-radius-lg); overflow: hidden; border: 1px solid var(--amaa-outline-variant); box-shadow: var(--amaa-shadow-sm); } .amaa-hero-light-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Sector CardGrid: bento mosaic (photo + icon variants) ---- */ .amaa-sectors-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .amaa-view-all { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--amaa-primary); font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); text-decoration: none; } .amaa-view-all:hover { text-decoration: underline; } .arrow { display: inline-block; transition: transform var(--amaa-dur-fast) var(--amaa-ease); } :root[dir="rtl"] .arrow { transform: scaleX(-1); } .amaa-view-all:hover .arrow { transform: translateX(4px); } :root[dir="rtl"] .amaa-view-all:hover .arrow { transform: scaleX(-1) translateX(4px); } .amaa-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--amaa-gutter); } .amaa-bento-large { grid-column: span 12; } .amaa-bento-small { grid-column: span 12; } @media (min-width: 768px) { .amaa-bento-large { grid-column: span 8; } .amaa-bento-small { grid-column: span 4; } } .amaa-card-photo { position: relative; min-height: 280px; border: 1px solid var(--amaa-outline-variant); overflow: hidden; box-shadow: var(--amaa-shadow-sm); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); transition: box-shadow var(--amaa-dur-med) var(--amaa-ease); } :root[dir="rtl"] .amaa-card-photo { clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px); } .amaa-card-photo:hover { box-shadow: var(--amaa-shadow-md); } .amaa-card-photo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.7s var(--amaa-ease); } .amaa-card-photo:hover .amaa-card-photo-bg { transform: scale(1.05); } .amaa-card-photo-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(25, 28, 30, 0.92), rgba(25, 28, 30, 0.35) 55%, transparent); } .amaa-card-photo-body { position: absolute; inset-inline: 0; bottom: 0; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .amaa-card-photo-body h3 { font-size: var(--amaa-fs-headline-md); color: var(--amaa-surface-container-lowest); margin-bottom: 0.25rem; } .amaa-card-photo-body p { color: var(--amaa-surface-container-low); font-size: var(--amaa-fs-body-md); margin: 0; max-width: 26rem; } .amaa-card-photo-arrow { flex: 0 0 auto; font-size: 1.75rem; color: var(--amaa-primary-fixed); opacity: 0; transform: translateX(-10px); transition: opacity var(--amaa-dur-fast) var(--amaa-ease), transform var(--amaa-dur-fast) var(--amaa-ease); } .amaa-card-photo:hover .amaa-card-photo-arrow { opacity: 1; transform: translateX(0); } .amaa-card-icon { position: relative; height: 100%; min-height: 280px; background-color: var(--amaa-surface-container-lowest); /* A subtle diagonal hatch texture (P2 #3) — the plain white icon card read as visually empty next to the photo-variant cards in the same bento row; this reads as "patterned" without competing with the icon tile/copy for attention. */ background-image: repeating-linear-gradient(135deg, rgba(0, 79, 137, 0.035) 0 2px, transparent 2px 14px); border: 1px solid var(--amaa-outline-variant); border-radius: var(--amaa-radius); box-shadow: var(--amaa-shadow-sm); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: box-shadow var(--amaa-dur-med) var(--amaa-ease); } .amaa-card-icon.accent-tertiary { background-image: repeating-linear-gradient(135deg, rgba(123, 59, 0, 0.045) 0 2px, transparent 2px 14px); } .amaa-card-icon:hover { box-shadow: var(--amaa-shadow-md); } .amaa-card-icon-blob { position: absolute; top: -1rem; inset-inline-end: -1rem; width: 6rem; height: 6rem; border-radius: 0 0 0 100%; background: rgba(210, 228, 255, 0.5); transition: transform 0.5s var(--amaa-ease); } .amaa-card-icon.accent-tertiary .amaa-card-icon-blob { background: rgba(255, 220, 198, 0.5); } .amaa-card-icon:hover .amaa-card-icon-blob { transform: scale(1.5); } .amaa-card-icon-tile { width: 3rem; height: 3rem; border-radius: var(--amaa-radius); background: var(--amaa-primary-container); color: var(--amaa-on-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; position: relative; } .amaa-card-icon.accent-tertiary .amaa-card-icon-tile { background: var(--amaa-tertiary-container); color: var(--amaa-on-tertiary-container); } .amaa-card-icon h3 { font-size: var(--amaa-fs-headline-md); margin-bottom: 0.5rem; } .amaa-card-icon p { color: var(--amaa-on-surface-variant); font-size: var(--amaa-fs-body-md); } .amaa-card-icon-explore { display: flex; align-items: center; gap: 0.35rem; margin-top: 1rem; color: var(--amaa-primary); font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); text-decoration: none; position: relative; } .amaa-card-icon.accent-tertiary .amaa-card-icon-explore { color: var(--amaa-tertiary); } .amaa-card-icon-explore .arrow { transition: transform var(--amaa-dur-fast) var(--amaa-ease); } .amaa-card-icon:hover .amaa-card-icon-explore .arrow { transform: translateX(4px); } :root[dir="rtl"] .amaa-card-icon:hover .amaa-card-icon-explore .arrow { transform: translateX(-4px); } /* ---- Accessibility: visible focus + skip link (AX-03) ---- */ :focus-visible { outline: 3px solid var(--amaa-primary); outline-offset: 2px; } /* The default outline is navy — invisible against these dark-surface sections/panels, so they get an inverse (white) outline instead (WCAG 1.4.11/2.4.11 non-text contrast). */ .amaa-hero :focus-visible, .amaa-cta-band :focus-visible, .amaa-sidebar :focus-visible, .amaa-cookie-banner :focus-visible, .amaa-logostrip-dark :focus-visible { outline-color: var(--amaa-on-primary); } .skip-link { position: absolute; inset-inline-start: -999px; top: 0; z-index: 1000; background: var(--amaa-primary); color: var(--amaa-on-primary); padding: var(--amaa-unit) calc(var(--amaa-unit) * 2); border-radius: 0 0 var(--amaa-radius-lg) 0; } .skip-link:focus { inset-inline-start: 0; } /* ---- Error pages ---- */ .amaa-error-code { font-size: 96px; font-weight: 700; color: var(--amaa-primary); line-height: 1; } .amaa-correlation { font-family: ui-monospace, monospace; color: var(--amaa-on-surface-variant); } /* ---- Admin auth (login / setup / 2FA) — matches the Stitch admin screens ---- */ .amaa-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--amaa-margin-mobile); background-color: var(--amaa-surface); position: relative; overflow: hidden; } .amaa-auth::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(45deg, transparent 48%, rgba(113,119,130,0.12) 49%, rgba(113,119,130,0.12) 51%, transparent 52%); background-size: 20px 20px; } .amaa-auth-inner { position: relative; z-index: 1; width: 100%; max-width: 30rem; } .amaa-auth-wide { max-width: 48rem; } .amaa-auth-card { background: var(--amaa-surface-container-lowest); border: 1px solid var(--amaa-outline-variant); box-shadow: var(--amaa-shadow-sm); position: relative; overflow: hidden; border-radius: var(--amaa-radius-xl); } .amaa-auth-card::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 40px; height: 40px; background: linear-gradient(225deg, var(--amaa-primary) 50%, transparent 50.1%); } .amaa-code-input { text-align: center; font-size: 24px; letter-spacing: 0.4em; font-family: ui-monospace, monospace; } .amaa-recovery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .amaa-recovery-grid code { display: block; text-align: center; padding: 8px; border-radius: var(--amaa-radius-lg); background: var(--amaa-surface); border: 1px solid var(--amaa-outline-variant); font-family: ui-monospace, monospace; color: var(--amaa-on-surface); } /* ---- Cookie consent banner ---- */ .amaa-cookie-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 1050; background: var(--amaa-inverse-surface); color: var(--amaa-inverse-on-surface); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); } .amaa-cookie-banner a { text-decoration: underline; } /* ---- Draft preview banner (plan FR-115) ---- */ .amaa-preview-banner { position: sticky; top: 0; z-index: 1040; background: var(--amaa-warning); color: #fff; text-align: center; padding: 0.5rem 1rem; font-weight: 600; letter-spacing: 0.02em; } /* ---- Admin shell (sidebar + content) ---- */ .amaa-admin-topbar { background: var(--amaa-surface-container-lowest); border-bottom: 1px solid var(--amaa-outline-variant); box-shadow: var(--amaa-shadow-sm); } .amaa-admin-shell { display: flex; min-height: calc(100vh - 64px); } .amaa-sidebar { flex: 0 0 260px; width: 260px; background: var(--amaa-inverse-surface); padding: calc(var(--amaa-unit) * 2) var(--amaa-unit); overflow-y: auto; } .amaa-sidebar-brand { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem calc(var(--amaa-unit) * 1.5) calc(var(--amaa-unit) * 2); margin-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); } .amaa-sidebar-brand img { height: 32px; width: auto; } .amaa-sidebar-brand-text { color: var(--amaa-inverse-on-surface); font-weight: 600; font-size: 0.95rem; line-height: 1.2; } .amaa-sidebar-brand-tagline { color: rgba(255,255,255,0.6); font-size: 0.75rem; } .amaa-sidebar .nav-group-label { font-size: var(--amaa-fs-label-sm); text-transform: uppercase; letter-spacing: var(--amaa-ls-label-sm); color: rgba(255,255,255,0.55); padding: calc(var(--amaa-unit) * 1.5) var(--amaa-unit) var(--amaa-unit); font-weight: 700; } .amaa-sidebar a.nav-link { display: block; padding: 8px 12px; border-radius: var(--amaa-radius-lg); color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.95rem; } .amaa-sidebar a.nav-link:hover { background: rgba(255,255,255,0.08); } .amaa-sidebar a.nav-link.active { background: var(--amaa-primary); color: var(--amaa-on-primary); font-weight: 600; } .amaa-admin-content { flex: 1 1 auto; min-width: 0; padding: calc(var(--amaa-unit) * 3); } @media (max-width: 767px) { .amaa-admin-shell { flex-direction: column; } .amaa-sidebar { flex-basis: auto; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.12); } } /* ---- Admin editor: per-language tabs + forms ---- */ .amaa-lang-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--amaa-outline-variant); margin-bottom: 1rem; } .amaa-status-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--amaa-outline-variant); } .amaa-status-Published { background: var(--amaa-success-container); color: var(--amaa-on-success-container); border-color: var(--amaa-success-container-border); } .amaa-status-Draft { background: var(--amaa-surface-container-low); color: var(--amaa-on-surface-variant); } .amaa-status-Scheduled { background: var(--amaa-warning-container); color: var(--amaa-on-warning-container); border-color: var(--amaa-warning-container-border); } .amaa-status-Unpublished, .amaa-status-Archived { background: var(--amaa-error-container); color: var(--amaa-on-error-container); border-color: var(--amaa-error-container-border); } /* ---- Admin topbar user area + breadcrumb (design elevation pass) ---- */ .amaa-admin-user-area { display: flex; align-items: center; gap: 1.25rem; } .amaa-admin-user-name { font-size: var(--amaa-fs-label-sm); font-weight: 600; color: var(--amaa-on-surface); } .amaa-admin-user-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--amaa-fs-label-sm); color: var(--amaa-on-surface-variant); text-decoration: none; padding: 0; transition: color var(--amaa-dur-fast) var(--amaa-ease); } .amaa-admin-user-link:hover { color: var(--amaa-primary); } .amaa-admin-breadcrumb { border-top: 1px solid var(--amaa-outline-variant); background: var(--amaa-surface-container-low); font-size: var(--amaa-fs-label-sm); } .amaa-admin-breadcrumb > div { padding-block: 0.5rem; } .amaa-admin-breadcrumb a { color: var(--amaa-on-surface-variant); text-decoration: none; } .amaa-admin-breadcrumb a:hover { color: var(--amaa-primary); text-decoration: underline; } .amaa-admin-breadcrumb-sep { margin-inline: 0.5rem; color: var(--amaa-outline); } .amaa-admin-breadcrumb span:last-child { color: var(--amaa-on-surface); font-weight: 600; } /* ---- Admin flash messages (design elevation pass — was 30 copy-pasted plain
) ---- */ .amaa-admin-alert { margin-bottom: 1.5rem; border-radius: var(--amaa-radius-lg); border-width: 1px; } .amaa-admin-alert svg { color: inherit; } /* ---- Admin tables (design elevation pass — was stock unstyled Bootstrap .table everywhere) ---- */ .amaa-admin-table { --amaa-row-h: 3.25rem; } .amaa-admin-table thead th { position: sticky; top: 0; z-index: 1; background: var(--amaa-surface-container-lowest); font-size: var(--amaa-fs-label-sm); text-transform: uppercase; letter-spacing: var(--amaa-ls-label-sm); color: var(--amaa-on-surface-variant); font-weight: 700; border-bottom: 2px solid var(--amaa-outline-variant) !important; padding-block: 0.75rem; } .amaa-admin-table tbody tr { height: var(--amaa-row-h); transition: background var(--amaa-dur-fast) var(--amaa-ease); } .amaa-admin-table tbody tr:nth-child(even) { background: var(--amaa-surface-container-low); } .amaa-admin-table tbody tr:hover { background: var(--amaa-primary-fixed); } .amaa-admin-table tbody td { border-color: var(--amaa-outline-variant); } .amaa-admin-table-wrap { max-height: 70vh; overflow-y: auto; border: 1px solid var(--amaa-outline-variant); border-radius: var(--amaa-radius-lg); } /* Icon-button actions column — replaces bare "Edit" text links. RTL-aware via logical properties (no left/right, just gap on a flex row that already mirrors under dir="rtl"). */ .amaa-admin-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--amaa-radius); color: var(--amaa-on-surface-variant); text-decoration: none; transition: background var(--amaa-dur-fast) var(--amaa-ease), color var(--amaa-dur-fast) var(--amaa-ease); } .amaa-admin-icon-btn:hover { background: var(--amaa-surface-container); color: var(--amaa-primary); } /* AR-translation indicator — was a bare "✓"/"—" character with no label. */ .amaa-lang-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid transparent; } .amaa-lang-badge-complete { background: var(--amaa-success-container); color: var(--amaa-on-success-container); border-color: var(--amaa-success-container-border); } .amaa-lang-badge-missing { background: var(--amaa-warning-container); color: var(--amaa-on-warning-container); border-color: var(--amaa-warning-container-border); } /* Generic admin empty state — icon + one-line explanation + primary CTA. */ .amaa-admin-empty-state { text-align: center; padding: 3.5rem 1.5rem; background: var(--amaa-surface-container-low); border-radius: var(--amaa-radius-lg); color: var(--amaa-on-surface-variant); } .amaa-admin-empty-state svg { color: var(--amaa-outline); margin-bottom: 1rem; } .amaa-admin-empty-state p { margin: 0 0 1rem; } /* Relative timestamp with full date available on hover via the native title attribute. */ .amaa-relative-time { text-decoration: underline dotted; text-underline-offset: 2px; cursor: default; } /* Sticky save bar — keeps the primary Save action reachable on long edit forms (module editors, Pages section editor, redirects) without needing to scroll back to the top. */ .amaa-admin-save-bar { position: sticky; bottom: 0; z-index: 10; background: var(--amaa-surface-container-lowest); border-top: 1px solid var(--amaa-outline-variant); padding: 1rem 0; margin-top: 1.5rem; } /* Fieldset grouping for admin forms (design elevation pass) — Bootstrap's default
has no visual treatment at all; this gives grouped form sections (e.g. "Display settings") a labeled boundary consistent with the rest of the admin's card/panel language. */ .amaa-admin-fieldset { border: 1px solid var(--amaa-outline-variant); border-radius: var(--amaa-radius-lg); padding: 1.25rem 1.5rem 1.5rem; margin: 0 0 1.5rem; } .amaa-admin-fieldset legend { width: auto; padding-inline: 0.5rem; margin-inline-start: -0.5rem; font-size: var(--amaa-fs-label-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--amaa-ls-label-sm); color: var(--amaa-on-surface-variant); } .amaa-required::after { content: " *"; color: var(--amaa-error); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---- Motion layer (site.js): scroll reveal, hero entrance, header state, card lift ---- */ /* No-JS / pre-hydration fallback: content must never be stuck invisible. */ .no-js [data-reveal] { opacity: 1 !important; transform: none !important; } [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--amaa-ease-out-expo), transform 0.6s var(--amaa-ease-out-expo); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Stat numbers are compact content — a shorter rise over less distance reads as snappier and fits what's revealing better than the larger CardGrid/Hero-scale travel used by default. */ [data-reveal].amaa-reveal-compact { transform: translateY(12px); transition: opacity 0.4s var(--amaa-ease-out-expo), transform 0.4s var(--amaa-ease-out-expo); } .amaa-topbar { transition: box-shadow var(--amaa-dur-med) var(--amaa-ease); } .amaa-topbar.is-scrolled { box-shadow: var(--amaa-shadow-md); } /* Hero entrance: staggered fade/rise on load (above the fold — not scroll-gated). */ @keyframes amaa-hero-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .amaa-hero-content > *, .amaa-hero-light-content > * { animation: amaa-hero-rise 0.7s var(--amaa-ease-out-expo) both; } .amaa-hero-content > *:nth-child(1), .amaa-hero-light-content > *:nth-child(1) { animation-delay: 0.05s; } .amaa-hero-content > *:nth-child(2), .amaa-hero-light-content > *:nth-child(2) { animation-delay: 0.15s; } .amaa-hero-content > *:nth-child(3), .amaa-hero-light-content > *:nth-child(3) { animation-delay: 0.25s; } .amaa-hero-content > *:nth-child(4), .amaa-hero-light-content > *:nth-child(4) { animation-delay: 0.35s; } .amaa-hero-light-media { animation: amaa-hero-rise 0.8s var(--amaa-ease-out-expo) both; animation-delay: 0.2s; } /* Card hover lift — unify a subtle rise across card types alongside their existing shadow/glow. */ .amaa-card-icon, .amaa-sector-card, .amaa-kpi-tile { transition: box-shadow var(--amaa-dur-med) var(--amaa-ease), transform var(--amaa-dur-med) var(--amaa-ease); } .amaa-card-icon:hover, .amaa-sector-card:hover, .amaa-kpi-tile:hover { transform: translateY(-4px); } .amaa-kpi-tile:hover, .amaa-kpi-tile:focus-visible { box-shadow: var(--amaa-shadow-md); } /* Button/link press micro-interaction. */ .btn-amaa-primary, .btn-amaa-quote, .amaa-hero-cta-solid { transition: background var(--amaa-dur-fast) var(--amaa-ease), transform var(--amaa-dur-fast) var(--amaa-ease); } .btn-amaa-primary:active, .btn-amaa-quote:active, .amaa-hero-cta-solid:active { transform: scale(0.97); } /* ---- Service detail: procedure list rendered as a numbered stepper (service-details) ---- */ .amaa-procedure-body ol { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: amaa-step; } .amaa-procedure-body ol li { position: relative; padding-inline-start: 3.5rem; padding-block-end: 1.5rem; counter-increment: amaa-step; color: var(--amaa-on-surface-variant); } .amaa-procedure-body ol li::before { content: counter(amaa-step); position: absolute; inset-inline-start: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--amaa-surface-container-lowest); border: 2px solid var(--amaa-outline-variant); color: var(--amaa-on-surface-variant); font-weight: 600; font-size: var(--amaa-fs-label-sm); z-index: 1; } .amaa-procedure-body ol li:first-child::before { background: var(--amaa-primary); border-color: var(--amaa-primary); color: var(--amaa-on-primary); } .amaa-procedure-body ol li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 1.25rem; top: 2.5rem; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--amaa-outline-variant), transparent); } /* ---- Sector CardGrid: uniform "grid" layout (business-sectors listing) ---- */ .amaa-sector-grid { display: grid; grid-template-columns: 1fr; gap: var(--amaa-gutter); } @media (min-width: 768px) { .amaa-sector-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .amaa-sector-grid { grid-template-columns: repeat(3, 1fr); } } .amaa-sector-card { position: relative; display: flex; flex-direction: column; background: var(--amaa-surface-container-lowest); border: 1px solid var(--amaa-outline-variant); border-radius: var(--amaa-radius-lg); overflow: hidden; box-shadow: var(--amaa-shadow-sm); transition: box-shadow var(--amaa-dur-med) var(--amaa-ease); } .amaa-sector-card:hover { box-shadow: var(--amaa-shadow-md); } .amaa-sector-card-corner { position: absolute; top: 0; inset-inline-end: 0; width: 2rem; height: 2rem; background: var(--amaa-primary); transform: translate(1rem, -1rem) rotate(45deg); z-index: 2; transition: transform var(--amaa-dur-med) var(--amaa-ease); } .amaa-sector-card:hover .amaa-sector-card-corner { transform: translate(1rem, -1rem) rotate(45deg) scale(1.15); } .amaa-sector-card-media { height: 12rem; background-size: cover; background-position: center; background-color: var(--amaa-surface-container); } .amaa-sector-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; } .amaa-sector-card-body h2 { font-size: var(--amaa-fs-headline-md); color: var(--amaa-primary); margin: 0; } .amaa-sector-card-icon { color: var(--amaa-primary); display: inline-flex; } .amaa-sector-card-icon svg { width: 20px; height: 20px; } .amaa-contact-icon { color: var(--amaa-primary); display: inline-flex; flex: none; } .amaa-contact-icon svg { width: 18px; height: 18px; } .amaa-sector-card-body p { color: var(--amaa-on-surface-variant); font-size: var(--amaa-fs-body-md); margin-bottom: 1.25rem; } .amaa-sector-card-body .amaa-card-icon-explore { margin-top: auto; } /* ---- Projects listing (projects-listing) ---- */ .amaa-filter-chip { display: inline-block; padding: 0.5rem 1rem; font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); color: var(--amaa-on-surface); background: var(--amaa-surface); border: 1px solid var(--amaa-outline-variant); border-radius: var(--amaa-radius); text-decoration: none; transition: color var(--amaa-dur-fast) var(--amaa-ease), border-color var(--amaa-dur-fast) var(--amaa-ease), background var(--amaa-dur-fast) var(--amaa-ease); } .amaa-filter-chip:hover { color: var(--amaa-primary); border-color: var(--amaa-primary); } .amaa-filter-chip.active { background: var(--amaa-primary); color: var(--amaa-on-primary); border-color: var(--amaa-primary); } .amaa-project-grid { display: grid; grid-template-columns: 1fr; gap: var(--amaa-gutter); } @media (min-width: 768px) { .amaa-project-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .amaa-project-grid { grid-template-columns: repeat(3, 1fr); } } .amaa-project-card-wide { grid-column: span 1; } @media (min-width: 992px) { .amaa-project-card-wide { grid-column: span 2; } } .amaa-project-card { display: block; text-decoration: none; background: var(--amaa-surface-container-lowest); border: 1px solid var(--amaa-outline-variant); border-radius: var(--amaa-radius-lg); overflow: hidden; box-shadow: var(--amaa-shadow-sm); transition: box-shadow var(--amaa-dur-med) var(--amaa-ease), transform var(--amaa-dur-med) var(--amaa-ease); } .amaa-project-card:hover { box-shadow: var(--amaa-shadow-md); transform: translateY(-2px); } .amaa-project-card-media { position: relative; height: 16rem; background-size: cover; background-position: center; background-color: var(--amaa-surface-container-high); } .amaa-news-card-media { height: 10rem; border-radius: var(--amaa-radius-lg) var(--amaa-radius-lg) 0 0; background-size: cover; background-position: center; background-color: var(--amaa-surface-container-high); margin: -1.5rem -1.5rem 1rem; } .amaa-project-card-badge { position: absolute; top: 1rem; inset-inline-start: 1rem; background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); color: var(--amaa-primary); font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); padding: 0.3rem 0.75rem; border-radius: var(--amaa-radius-full); border: 1px solid var(--amaa-outline-variant); } .amaa-project-card-body { padding: 1.5rem; } .amaa-project-card-body h3 { font-size: var(--amaa-fs-headline-md); color: var(--amaa-on-surface); margin-bottom: 0.5rem; } .amaa-project-card-body p { color: var(--amaa-on-surface-variant); font-size: var(--amaa-fs-body-md); } .amaa-project-card-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--amaa-primary); font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); } /* ---- Project gallery (project-detail-gallery) ---- */ .amaa-project-hero { position: relative; min-height: 400px; height: 38rem; max-height: 60vh; border-radius: var(--amaa-radius-lg); overflow: hidden; border: 1px solid var(--amaa-outline-variant); display: flex; align-items: flex-end; } .amaa-project-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .amaa-project-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(25,28,30,0.9), rgba(25,28,30,0.5) 50%, transparent); } .amaa-project-hero-content { position: relative; z-index: 1; padding: 2rem; color: var(--amaa-surface-container-lowest); } .amaa-project-hero-content h1 { color: var(--amaa-surface-container-lowest); font-size: var(--amaa-fs-display-lg); margin-bottom: 1rem; } .amaa-project-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; } .amaa-project-meta-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); padding: 0.4rem 0.85rem; border-radius: var(--amaa-radius); font-size: var(--amaa-fs-label-sm); } .amaa-project-gallery { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .amaa-project-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 15rem; } } @media (min-width: 992px) { .amaa-project-gallery { grid-template-columns: repeat(3, 1fr); } } .amaa-project-gallery-item { background-size: cover; background-position: center; border-radius: var(--amaa-radius-lg); border: 1px solid var(--amaa-outline-variant); min-height: 15rem; transition: transform var(--amaa-dur-med) var(--amaa-ease); } .amaa-project-gallery-item:hover { transform: scale(1.02); } @media (min-width: 768px) { .amaa-project-gallery-item:first-child { grid-column: span 2; grid-row: span 2; } } /* ---- Section rhythm (P2 #2): optional alternating background bands between sections ---- The page's own default background (--amaa-background, #f8f9fb) sits almost exactly between --amaa-surface-container-low (#f3f4f6) and white — using -low here read as no contrast at all. -container is a visibly deeper gray step; -lowest is true white, distinct from the off-white default. Together with the default they form 3 readable tiers instead of 2 indistinguishable ones. */ .amaa-section-bg-low { background: var(--amaa-surface-container); } .amaa-section-bg-lowest { background: var(--amaa-surface-container-lowest); } /* LogoStrip dark theme (SettingsJson "theme":"dark") — one of the alternating rhythm's dark accents alongside Hero/Cta, distinct content (markets) so it doesn't read as a repeated block. */ .amaa-logostrip-dark { background: var(--amaa-on-primary-fixed-variant); } /* var(--amaa-primary-fixed) (not a translucent white) — axe-core flagged the label at only a 4.38:1 contrast ratio against this background, short of WCAG AA's 4.5:1 for normal-size text. */ .amaa-logostrip-dark .amaa-logostrip-label { color: var(--amaa-primary-fixed); } .amaa-logostrip-dark .amaa-logostrip-item { color: var(--amaa-surface-container-lowest); opacity: 0.9; } .amaa-logostrip-dark .amaa-logostrip-item:hover { color: var(--amaa-primary-fixed); opacity: 1; } .amaa-logostrip-dark .amaa-logostrip-icon { color: var(--amaa-primary-fixed); } /* Brand-toned duotone applied uniformly to every seeded stock photo card (P2 #4) so disparate stock imagery (sector/project photography) reads as one consistent identity — CSS-only, no asset edits, and applies automatically without per-card opt-in. */ .amaa-card-photo-bg::after, .amaa-sector-card-media::after, .amaa-project-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 79, 137, 0.28), rgba(0, 28, 55, 0.12) 60%, transparent); mix-blend-mode: multiply; pointer-events: none; } .amaa-sector-card-media { position: relative; overflow: hidden; } /* ---- MediaText (home "About AMAA" teaser + reusable elsewhere) ---- */ .amaa-mediatext-grid { display: grid; gap: var(--amaa-gutter); align-items: center; grid-template-columns: 1fr; } @media (min-width: 992px) { .amaa-mediatext-grid { grid-template-columns: 5fr 7fr; } .amaa-mediatext-grid.media-left { grid-template-columns: 5fr 7fr; } .amaa-mediatext-grid.media-left .amaa-mediatext-media { order: -1; } } .amaa-mediatext-media { position: relative; border-radius: var(--amaa-radius-lg); overflow: hidden; border: 1px solid var(--amaa-outline-variant); box-shadow: var(--amaa-shadow-sm); min-height: 280px; } .amaa-mediatext-media img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; } .amaa-mediatext-content p { color: var(--amaa-on-surface-variant); font-size: var(--amaa-fs-body-lg); line-height: var(--amaa-lh-body-lg); } /* Brand-toned duotone/overlay applied uniformly to seeded stock photography (P2 #4) so disparate stock images read as one consistent photographic identity instead of generic mixed stock. */ .amaa-duotone { position: relative; } .amaa-duotone img { filter: grayscale(0.35) saturate(1.05) contrast(1.05); } .amaa-duotone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 79, 137, 0.35), rgba(0, 28, 55, 0.15) 60%, transparent); mix-blend-mode: multiply; pointer-events: none; } /* ---- LogoStrip fallback: text/icon markets strip (no client logos available yet) ---- */ .amaa-logostrip-label { text-align: center; font-size: var(--amaa-fs-label-sm); font-weight: var(--amaa-fw-label-sm); letter-spacing: var(--amaa-ls-label-sm); text-transform: uppercase; color: var(--amaa-on-surface-variant); margin-bottom: 1.5rem; } .amaa-logostrip-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3rem; } .amaa-logostrip-item { display: flex; align-items: center; gap: 0.6rem; color: var(--amaa-on-surface-variant); font-family: var(--amaa-font-heading); font-weight: 600; font-size: var(--amaa-fs-headline-md); letter-spacing: 0.02em; opacity: 0.85; text-decoration: none; transition: opacity var(--amaa-dur-fast) var(--amaa-ease), color var(--amaa-dur-fast) var(--amaa-ease); } .amaa-logostrip-item:hover { opacity: 1; color: var(--amaa-primary); } .amaa-logostrip-icon { display: inline-flex; color: var(--amaa-primary); } .amaa-logostrip-icon svg { width: 22px; height: 22px; } /* Image-logo variant (module surfacing pass — LogoStrip "source":"partners" with a real MediaAsset logo). A muted grayscale-until-hover treatment is the standard "logo wall" pattern — keeps a wide mix of uploaded logo shapes/colors reading as one cohesive strip. */ .amaa-logostrip-logo { height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; } .amaa-logostrip-logo img { max-height: 100%; max-width: 140px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter var(--amaa-dur-fast) var(--amaa-ease), opacity var(--amaa-dur-fast) var(--amaa-ease); } .amaa-logostrip-logo:hover img { filter: none; opacity: 1; } .amaa-logostrip-dark .amaa-logostrip-logo img { filter: grayscale(1) brightness(2.2); } .amaa-logostrip-dark .amaa-logostrip-logo:hover img { filter: brightness(1); } /* ---- NewsTeaser (home "latest news" — reuses News/Index's card visual language) ---- */ .amaa-news-teaser-card { display: block; height: 100%; padding: 1.5rem; background: var(--amaa-surface-container-lowest); border: 1px solid var(--amaa-outline-variant); border-radius: var(--amaa-radius-lg); box-shadow: var(--amaa-shadow-sm); transition: box-shadow var(--amaa-dur-med) var(--amaa-ease), transform var(--amaa-dur-med) var(--amaa-ease); } .amaa-news-teaser-card:hover { box-shadow: var(--amaa-shadow-md); transform: translateY(-2px); } .amaa-news-teaser-card .amaa-news-card-media { margin: -1.5rem -1.5rem 1rem; } .amaa-news-teaser-card-body h3 { color: var(--amaa-on-surface); margin: 0.35rem 0; } /* ---- TeamGrid (module surfacing pass — live from the Team module) ---- */ .amaa-team-photo { width: 7rem; height: 7rem; border-radius: 50%; overflow: hidden; background: var(--amaa-primary-container); color: var(--amaa-on-primary); display: flex; align-items: center; justify-content: center; font-size: var(--amaa-fs-headline-lg); font-weight: 700; font-family: var(--amaa-font-heading); box-shadow: var(--amaa-shadow-sm); } .amaa-team-photo img { width: 100%; height: 100%; object-fit: cover; } .amaa-team-card h3 { margin-bottom: 0.15rem; } /* ---- TestimonialCarousel (module surfacing pass — live from Testimonials, Bootstrap carousel) ---- */ .amaa-testimonial-quote { font-family: var(--amaa-font-heading); font-size: var(--amaa-fs-headline-md); line-height: var(--amaa-lh-headline-md); color: var(--amaa-on-surface); max-width: 42rem; margin-inline: auto; } .amaa-testimonial-indicators { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; position: static; /* override Bootstrap's default absolute-positioned carousel-indicators look */ } .amaa-testimonial-indicators button { width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none; background: var(--amaa-outline-variant); opacity: 1; transition: background var(--amaa-dur-fast) var(--amaa-ease), transform var(--amaa-dur-fast) var(--amaa-ease); } .amaa-testimonial-indicators button.active { background: var(--amaa-primary); transform: scale(1.25); } .amaa-section-bg-low .amaa-testimonial-indicators button:not(.active), .amaa-section-bg-lowest .amaa-testimonial-indicators button:not(.active) { background: var(--amaa-outline-variant); } /* ---- Standalone Company pages (Partners/Team/FAQ/Testimonials) elevation pass ---- These 4 pages are rendered directly by CompanyController, not through the CMS Page/Section pipeline — .amaa-page-hero replicates the CMS Hero "light" style's visual language (badge pill, heading, intro paragraph) without requiring these to become CMS-driven pages. */ .amaa-page-hero { padding-block: 3rem 2.5rem; border-bottom: 1px solid var(--amaa-outline-variant); } .amaa-page-hero h1 { color: var(--amaa-primary); margin-bottom: 0.75rem; } .amaa-page-hero p { color: var(--amaa-on-surface-variant); font-size: var(--amaa-fs-body-lg); max-width: 48rem; } .amaa-partner-card { display: block; height: 100%; padding: 1.75rem; background: var(--amaa-surface-container-lowest); border: 1px solid var(--amaa-outline-variant); border-radius: var(--amaa-radius-lg); box-shadow: var(--amaa-shadow-sm); text-decoration: none; transition: box-shadow var(--amaa-dur-med) var(--amaa-ease), transform var(--amaa-dur-med) var(--amaa-ease); } .amaa-partner-card:hover { box-shadow: var(--amaa-shadow-md); transform: translateY(-2px); } .amaa-partner-card-logo { max-height: 48px; width: auto; margin-bottom: 1rem; } .amaa-partner-card-mark { width: 3rem; height: 3rem; border-radius: var(--amaa-radius); background: var(--amaa-primary-container); color: var(--amaa-on-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--amaa-font-heading); margin-bottom: 1rem; } .amaa-testimonial-card-grid { position: relative; height: 100%; padding: 1.75rem; background: var(--amaa-surface-container-lowest); border: 1px solid var(--amaa-outline-variant); border-radius: var(--amaa-radius-lg); box-shadow: var(--amaa-shadow-sm); } .amaa-testimonial-card-grid::before { content: "“"; position: absolute; top: 0.5rem; inset-inline-start: 1.25rem; font-family: Georgia, serif; font-size: 3.5rem; line-height: 1; color: var(--amaa-primary-fixed); pointer-events: none; } :root[dir="rtl"] .amaa-testimonial-card-grid::before { content: "”"; } .amaa-testimonial-card-grid blockquote { position: relative; z-index: 1; margin: 1.25rem 0 0; } /* Generic "nothing here yet" box for public listing pages — dignified, not a bare paragraph. */ .amaa-empty-state { text-align: center; padding: 3.5rem 1.5rem; background: var(--amaa-surface-container-low); border-radius: var(--amaa-radius-lg); color: var(--amaa-on-surface-variant); } .amaa-empty-state p { margin: 0; }