/* ============================================================================ SecuryTik — Ecosystem additions ---------------------------------------------------------------------------- Loaded AFTER app.css. Adds the cross-product chrome that the SAMM admin doesn't have: a public top header (logo + nav + theme toggle + user menu), a public footer, and shared marketing/hero styles. All values reference the same --tokens defined in themes.css. ============================================================================ */ /* ── Theme switch fade ─────────────────────────────────────────────────── `theme-fading` is set on by theme-toggle.js for ~380ms around the data-theme change. While the class is present, color-related properties on common surfaces animate, so the swap fades instead of snapping. Initial page load is unaffected (the class isn't there yet). */ /* ── Life animations: scroll-reveal + ambient motion ───────────────────── `html.life-on` is set synchronously by an inline script in base.html (so no FOUC). The list below hides reveal targets from first paint; life.js adds `.is-visible` via IntersectionObserver to fade them up as they enter the viewport (or on initial paint for above-the-fold content). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* :where(...) flattens specificity to 0 so the `.is-visible` reveal rule below always wins. Without it, descendant selectors like `.prose h1` would out-specify `.is-visible` and the element would stay hidden even after IntersectionObserver added the class. */ html.life-on :where( .hero__eyebrow, .hero__title, .hero__acronym, .hero__lead, .hero__cta, .hero__sub, .section__eyebrow, .section__title, .section__lead, .stat, .feature, .svc-card, .reason, .deep-feature, .partners, .cta-banner, .prose h1, .prose h2, .prose p, .prose ul, .card, .app-card ) { opacity: 0; transform: translateY(22px); transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } html.life-on .is-visible { opacity: 1; transform: translateY(0); } /* Subtle, slow drift on the hero's radial gradient backdrop. */ .hero::before { animation: hero-drift 18s ease-in-out infinite alternate; } @keyframes hero-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 1%, 0) scale(1.04); } 100% { transform: translate3d(2%, -0.5%, 0) scale(1.02); } } /* Service-card icons get a quiet float so the page never feels static. */ .svc-card__icon, .deep-feature__icon, .feature__icon, .reason__icon { animation: gentle-float 5.5s ease-in-out infinite; } .svc-card:nth-child(2n) .svc-card__icon, .deep-feature:nth-child(2n) .deep-feature__icon { animation-delay: -1.6s; } .svc-card:nth-child(3n) .svc-card__icon, .deep-feature:nth-child(3n) .deep-feature__icon { animation-delay: -3.2s; } @keyframes gentle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* CTA buttons get a light scale on hover; svc-card already lifts. */ .btn--primary { transition: transform 180ms ease, box-shadow 180ms ease, background-image 180ms ease; } .btn--primary:hover { transform: translateY(-1px); } /* Brand wordmark in header softly shimmers when hovered. */ .site-header__brand:hover .site-header__name { animation: shimmer 1.8s ease-in-out; background-size: 200% 100%; } @keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } } html.theme-fading, html.theme-fading body, html.theme-fading .site-header, html.theme-fading .site-footer, html.theme-fading .card, html.theme-fading .input, html.theme-fading .textarea, html.theme-fading .btn, html.theme-fading .feature, html.theme-fading .svc-card, html.theme-fading .reason, html.theme-fading .stat, html.theme-fading .deep-feature, html.theme-fading .partners, html.theme-fading .partners__tag, html.theme-fading .app-sidebar, html.theme-fading .app-sidebar__nav a, html.theme-fading .app-footer, html.theme-fading .table, html.theme-fading .flash, html.theme-fading a, html.theme-fading h1, html.theme-fading h2, html.theme-fading h3, html.theme-fading p, html.theme-fading span, html.theme-fading li, html.theme-fading dt, html.theme-fading dd, html.theme-fading code, html.theme-fading pre { transition: background-color 320ms ease, background-image 320ms ease, border-color 320ms ease, color 320ms ease, fill 320ms ease, stroke 320ms ease, box-shadow 320ms ease !important; } /* ── Header ──────────────────────────────────────────────────────────────── */ .site-header { background: var(--bg-elev); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); } .site-header__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 24px; position: relative; } /* Hamburger — hidden on desktop, shown below 880px (after the nav collapses). */ .site-header__hamburger { display: none; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--fg-muted); cursor: pointer; align-items: center; justify-content: center; } .site-header__hamburger:hover { background: var(--bg-hover); border-color: var(--border); color: var(--fg); } .site-header__hamburger svg { width: 20px; height: 20px; } .site-header__brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 800; /* demo: 800 (was 700) */ font-size: 22px; /* enlarged (was 17px) */ letter-spacing: -0.5px; /* demo: -0.5px (was -0.3px) */ flex-shrink: 0; /* Logo always renders in its English/Latin form regardless of page locale. */ direction: ltr; font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* demo: Fira Sans first (was Inter first) */ } .site-header__brand:hover { text-decoration: none; } .site-header__logo { width: 32px; height: 32px; border-radius: 8px; } .site-header__name { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Wrapper around the nav links + actions. On desktop `display:contents` so its children behave as direct children of .site-header__inner (no layout change). On mobile it becomes the actual collapsible drawer. */ .site-header__drawer { display: contents; } .site-header__nav { display: flex; gap: 4px; flex: 1; margin-inline-start: 12px; } .site-header__nav a { padding: 8px 12px; border-radius: 8px; color: var(--fg-muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s; } .site-header__nav a:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; } .site-header__nav a.is-active { color: var(--fg); background: var(--bg-hover); } /* ── Nav dropdown ──────────────────────────────────────────────────────── */ .site-header__nav .has-dropdown { position: relative; } .site-header__nav .has-dropdown > .nav-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 8px; background: transparent; border: 0; font: inherit; color: var(--fg-muted); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; } .site-header__nav .has-dropdown > .nav-trigger::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: 0.6; transition: transform 0.15s; } .site-header__nav .has-dropdown:hover > .nav-trigger, .site-header__nav .has-dropdown:focus-within > .nav-trigger, .site-header__nav .has-dropdown.is-active > .nav-trigger { background: var(--bg-hover); color: var(--fg); } .site-header__nav .has-dropdown:hover > .nav-trigger::after, .site-header__nav .has-dropdown:focus-within > .nav-trigger::after { transform: rotate(180deg); } .site-header__nav .nav-dropdown { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 220px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, visibility .15s, transform .15s; z-index: 50; } .site-header__nav .has-dropdown:hover .nav-dropdown, .site-header__nav .has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .site-header__nav .nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--fg-muted); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; } .site-header__nav .nav-dropdown a:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; } .site-header__nav .nav-dropdown a.is-active { background: var(--bg-hover); color: var(--fg); } .site-header__nav .nav-dropdown svg { width: 14px; height: 14px; color: var(--fg-dim); flex-shrink: 0; } /* visual divider inside the dropdown */ .site-header__nav .nav-dropdown hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; } .site-header__actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } /* ── Mobile: hamburger + drawer ─────────────────────────────────────────── */ @media (max-width: 880px) { .site-header__inner { gap: 12px; padding: 0 14px; } /* Hamburger lives at the very right of the bar. */ .site-header__hamburger { display: inline-grid; order: 99; margin-inline-start: auto; } /* Drawer wrapper holds nav links + actions stacked vertically. Hidden until the hamburger is tapped. Slides down from under the header. */ .site-header__drawer { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg-elev); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); z-index: 25; max-height: calc(100vh - 60px); overflow-y: auto; } body.nav-open .site-header__drawer { display: flex; } /* Inside the drawer the nav becomes a column too, with no extra margin. */ .site-header__nav { display: flex; flex-direction: column; gap: 4px; margin-inline-start: 0; } .site-header__nav a, .site-header__nav .has-dropdown > .nav-trigger { width: 100%; text-align: start; padding: 12px 14px; font-size: 15px; justify-content: flex-start; } /* Expand the About-us submenu inline rather than as a floating popover */ .site-header__nav .has-dropdown { width: 100%; } .site-header__nav .has-dropdown > .nav-trigger::after { margin-inline-start: auto; } .site-header__nav .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; width: 100%; border: none; box-shadow: none; background: transparent; padding: 0 0 6px 20px; } .site-header__nav .nav-dropdown a { padding: 10px 12px; font-size: 14px; } /* Actions area inside the drawer — sits beneath the nav links, separated by a soft hairline. Two rows: Row 1 — auth: user chip + sign-out (or sign-in + register) Row 2 — extras: theme toggle + language switcher The CSS `order` trick puts the theme toggle and lang switcher on a second row without needing extra HTML. */ .site-header__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: 0; padding-top: 10px; border-top: 1px solid var(--border); } .site-header__actions > * { order: 1; } /* auth row */ .site-header__actions > .theme-toggle, .site-header__actions > .lang-switcher { order: 3; } /* extras row */ /* Zero-height full-width spacer forces a line break between the two rows. */ .site-header__actions::after { content: ""; flex-basis: 100%; height: 0; order: 2; } .site-header__user { flex: 1 1 auto; min-width: 0; } .site-header__user .site-header__email { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-header__actions form, .site-header__actions .btn { flex: 0 0 auto; } .site-header__actions .lang-switcher { margin-inline-start: auto; } /* Lang dropdown opens upward inside the drawer (no room below). */ .site-header__drawer .lang-switcher__panel { top: auto; bottom: calc(100% + 6px); } } /* When the drawer is open, prevent content scroll behind it */ body.nav-open { overflow: hidden; } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--fg-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--bg-hover); color: var(--fg); border-color: var(--border); } .theme-toggle svg { width: 18px; height: 18px; } /* User chip */ .site-header__user { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 22px; border: 1px solid var(--border); color: var(--fg); text-decoration: none; font-size: 13px; font-weight: 500; } .site-header__user:hover { background: var(--bg-hover); text-decoration: none; } .site-header__avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; } .site-header__email { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .site-footer { margin-top: 80px; background: var(--bg-elev); border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 13.5px; } .site-footer__inner { max-width: 1280px; margin: 0 auto; padding: 48px 24px 0; } .site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 36px; } @media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; gap: 24px; } } .site-footer__brand-block { display: flex; flex-direction: column; gap: 12px; max-width: 340px; } /* Footer brand mirrors the header brand exactly — same icon size, same wordmark size, weight, letter-spacing, font, and gradient treatment. Keep these two blocks in sync; any change to .site-header__brand / .site-header__logo / .site-header__name should be reflected here. */ .site-footer__brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -0.5px; /* Logo always renders in its English/Latin form regardless of page locale. */ direction: ltr; font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .site-footer__brand:hover { text-decoration: none; } .site-footer__brand-mark { width: 32px; height: 32px; border-radius: 8px; } .site-footer__brand-name { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .site-footer__tagline { color: var(--fg-muted); font-size: 13.5px; line-height: 1.55; margin: 0; } .site-footer__col h4 { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fg); margin: 0 0 14px; } .site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer__col a { color: var(--fg-muted); text-decoration: none; transition: color 0.15s; font-size: 13.5px; } .site-footer__col a:hover { color: var(--fg); text-decoration: none; } .site-footer__col address { font-style: normal; color: var(--fg-muted); font-size: 13.5px; line-height: 1.6; } .site-footer__col address a { color: var(--fg-muted); } .site-footer__bar { padding: 18px 0 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--fg-dim); font-size: 12.5px; } .site-footer__bar a { color: var(--fg-dim); text-decoration: none; } .site-footer__bar a:hover { color: var(--fg-muted); } .site-footer__bar-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .site-footer__bar-meta a { color: var(--fg-muted); } .site-footer__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent); } /* ── Page shell ──────────────────────────────────────────────────────────── */ .page-shell { min-height: calc(100vh - 64px); display: flex; flex-direction: column; } .page-shell > .content { flex: 1; } /* ── Marketing hero ──────────────────────────────────────────────────────── */ .hero { padding: 96px 24px 64px; text-align: center; position: relative; overflow: hidden; } .hero__title { font-size: clamp(36px, 6vw, 64px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin: 0 0 20px; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero__lead { font-size: 18px; color: var(--fg-muted); max-width: 640px; margin: 0 auto 32px; line-height: 1.6; } .hero__cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ── Marketing feature grid ─────────────────────────────────────────────── */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 1100px; margin: 48px auto; padding: 0 24px; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-sm); } .feature__icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--accent)); display: grid; place-items: center; color: #fff; margin-bottom: 16px; } .feature__icon svg { width: 20px; height: 20px; } .feature__title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--fg); } .feature__body { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin: 0; } /* ── Plain prose / about pages ──────────────────────────────────────────── */ .prose { max-width: 760px; margin: 48px auto; padding: 0 24px; color: var(--fg); font-size: 15px; line-height: 1.7; } .prose h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.8px; margin: 0 0 12px; } .prose h2 { font-size: 22px; font-weight: 700; margin: 32px 0 8px; color: var(--fg); } .prose p { margin: 0 0 16px; color: var(--fg-muted); } .prose ul { margin: 0 0 16px 20px; color: var(--fg-muted); } .prose li { margin-bottom: 4px; } .prose a { color: var(--primary); } /* ════════════════════════════════════════════════════════════════════════ App shell — full-height sidebar + slim topbar + footer, shared by every signed-in console (auth profile, SAMM dashboard, admin). The sidebar folds into a drawer below 880px. Activated by and the shared app_shell.html template. ════════════════════════════════════════════════════════════════════════ */ .app-shell { display: grid; grid-template-columns: 248px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "sidebar header" "sidebar main" "sidebar footer"; min-height: 100vh; min-height: 100dvh; /* dvh excludes the mobile URL bar — no phantom scroll */ } .app-shell .app-sidebar { grid-area: sidebar; } .app-shell .site-header { grid-area: header; } .app-shell main.content { grid-area: main; max-width: none; } .app-shell .app-footer { grid-area: footer; } /* The shell spans its grid column — drop the marketing centring band. */ .app-shell .site-header__inner { max-width: none; } /* ── Sidebar (full height) ───────────────────────────────────────────────── */ .app-sidebar { background: var(--bg-elev); border-inline-end: 1px solid var(--border); } .app-sidebar__inner { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; } /* Brand — sits in a 64px strip that lines up with the topbar. */ .app-sidebar__brand { display: flex; align-items: center; gap: 9px; min-height: 64px; padding: 0 16px; border-bottom: 1px solid var(--border); text-decoration: none; flex-shrink: 0; /* Logo always renders in its English/Latin form regardless of page locale. */ direction: ltr; font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .app-sidebar__brand:hover { text-decoration: none; } .app-sidebar__brand img { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; } .app-sidebar__brand-text { font-weight: 800; font-size: 16px; letter-spacing: -0.3px; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .app-sidebar__nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; } .app-sidebar__label { padding: 10px 12px 6px; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-dim); } .app-sidebar__nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; /* comfortable touch target */ padding: 9px 12px; border-radius: 8px; color: var(--fg-muted); font-size: 14px; font-weight: 500; text-decoration: none; } .app-sidebar__nav a svg { width: 16px; height: 16px; flex-shrink: 0; } .app-sidebar__nav a:hover, .app-sidebar__nav a:active { background: var(--bg-hover); color: var(--fg); text-decoration: none; } .app-sidebar__nav a.is-active { background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(37,99,235,.04)); color: var(--fg); box-shadow: inset 2px 0 0 var(--primary); } /* A subtle "return" link (e.g. ← Profile at the top of the SAMM dashboard). */ .app-sidebar__nav a.app-sidebar__back { color: var(--fg-dim); font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; min-height: 38px; margin-bottom: 4px; } .app-sidebar__spacer { flex: 1; min-height: 12px; } .app-sidebar__foot { padding: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } /* Mobile actions panel inside the sidebar drawer (hidden on desktop). */ .app-sidebar__mobile-actions { display: none; } .app-sidebar__action { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; /* comfortable touch target */ padding: 9px 12px; border-radius: 8px; background: none; border: none; color: var(--fg-muted); font: inherit; font-size: 13px; font-weight: 500; text-align: start; text-decoration: none; cursor: pointer; } .app-sidebar__action svg { width: 16px; height: 16px; flex-shrink: 0; } .app-sidebar__action img { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; } .app-sidebar__action:hover, .app-sidebar__action:active { background: var(--bg-hover); color: var(--fg); text-decoration: none; } /* Trailing chevron on a product deep-link (e.g. Open dashboard → SAMM). */ .app-sidebar__product-arrow { margin-inline-start: auto; opacity: 0.4; transition: transform 0.15s, opacity 0.15s; } .app-sidebar__action:hover .app-sidebar__product-arrow { opacity: 1; transform: translateX(2px); } /* Visible keyboard focus on every custom shell control. */ .app-sidebar__brand:focus-visible, .app-sidebar__nav a:focus-visible, .app-sidebar__action:focus-visible, .app-shell .site-header__hamburger:focus-visible, .app-shell .theme-toggle:focus-visible, .app-shell .site-header__user:focus-visible { outline: 2px solid var(--ring, var(--primary)); outline-offset: 2px; } /* Backdrop behind the sidebar drawer (mobile only). */ .app-scrim { display: none; } /* ── Topbar ──────────────────────────────────────────────────────────────── */ .app-shell .site-header__actions { flex-shrink: 0; } /* 44px touch target for the mobile menu button (overrides the 40px default). */ .app-shell .site-header__hamburger { width: 44px; height: 44px; } .app-topbar__title { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 700; color: var(--fg); } .app-topbar__title svg { width: 19px; height: 19px; color: var(--fg-muted); flex-shrink: 0; } .app-topbar__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .app-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg-elev); color: var(--fg-dim); font-size: 12px; } .app-footer a { color: var(--fg-muted); } .app-footer__status { display: inline-flex; align-items: center; gap: 7px; } .app-footer__dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); } /* ── Mobile: sidebar folds into a drawer ─────────────────────────────────── */ @media (max-width: 880px) { .app-shell { grid-template-columns: 1fr; grid-template-areas: "header" "main" "footer"; } .app-sidebar { position: fixed; inset: 0 auto 0 0; width: 272px; max-width: 86vw; z-index: 60; transform: translateX(-100%); transition: transform 0.24s ease; } .app-shell.nav-open .app-sidebar { transform: translateX(0); } .app-sidebar__inner { height: 100%; } /* On mobile, hide the topbar's action cluster — the same controls live in the sidebar drawer (see .app-sidebar__mobile-actions). Keep only the hamburger in the topbar. */ .app-shell .site-header__actions { display: none; } /* Mobile actions strip lives at the bottom of the sidebar, beneath the foot links. Same controls as the desktop topbar (theme · sign-out · lang). Two rows like the marketing drawer: Row 1 — sign out Row 2 — theme toggle + language switcher */ .app-sidebar__mobile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 10px; border-top: 1px solid var(--border); background: var(--bg); } .app-sidebar__mobile-actions > * { order: 1; } .app-sidebar__mobile-actions > .theme-toggle, .app-sidebar__mobile-actions > .lang-switcher { order: 3; } .app-sidebar__mobile-actions::after { content: ""; flex-basis: 100%; height: 0; order: 2; } .app-sidebar__mobile-actions .theme-toggle { width: 38px; height: 38px; display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--fg-muted); cursor: pointer; } .app-sidebar__mobile-actions .theme-toggle:hover { background: var(--bg-hover); color: var(--fg); } .app-sidebar__mobile-actions form, .app-sidebar__mobile-actions .btn { flex: 0 0 auto; } .app-sidebar__mobile-actions .lang-switcher { margin-inline-start: auto; } /* Open the language panel upward — there's no room below inside the sidebar. */ .app-sidebar__mobile-actions .lang-switcher__panel { top: auto; bottom: calc(100% + 6px); } .app-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(2, 6, 23, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .app-shell.nav-open .app-scrim { opacity: 1; pointer-events: auto; } } @media (prefers-reduced-motion: reduce) { .app-sidebar, .app-scrim { transition: none; } } /* ════════════════════════════════════════════════════════════════════════ Data tables — reflow into labelled cards on mobile. Wide console tables can't fit a phone without a long sideways scroll, so below 720px each row of a `.data-table` becomes a self-contained card and every cell shows its column name, taken from the cell's `data-label` attribute. Inert above 720px (a plain `.table`). ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .data-table thead { display: none; } /* labels move inline */ .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; } /* The wrapping .table-wrap has overflow-x:auto → a block formatting context, so these row-card margins stay contained (no margin escape). */ .data-table tr { margin: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } /* Row hover is a desktop pointer affordance only. */ .data-table tbody tr:hover { background: var(--surface); } .data-table td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; text-align: end; overflow-wrap: anywhere; /* let long emails / hostnames wrap */ } .data-table tr td:last-child { border-bottom: none; } /* Column name, pulled from data-label, sits at the start of the cell row. */ .data-table td::before { content: attr(data-label); flex: 0 0 auto; text-align: start; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--fg-muted); } /* First cell reads as the card's header strip. */ .data-table tr td:first-child { padding: 12px 14px; background: var(--surface-2); font-weight: 600; } /* Cells with several elements (pills, name + sub-line) collapse to one flex item so the label/value split holds. */ .data-table td .data-cell-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } /* The "no results" row spans its whole card. */ .data-table td.data-table__empty { display: block; text-align: center; } .data-table td.data-table__empty::before { display: none; } } @media (max-width: 720px) { .site-header__email { display: none; } .site-footer__links { flex-direction: column; gap: 8px; } } /* ── Page sections ──────────────────────────────────────────────────────── */ .section { padding: 64px 24px; max-width: 1180px; margin: 0 auto; position: relative; } .section--tight { padding: 32px 24px; } .section--bleed { max-width: none; } .section__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; } .section__title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -1px; line-height: 1.15; margin: 0 0 14px; color: var(--fg); } .section__lead { font-size: 17px; color: var(--fg-muted); line-height: 1.6; max-width: 720px; margin: 0 0 36px; } .section--center .section__lead { margin-left: auto; margin-right: auto; } .section--center { text-align: center; } /* Subtle decorative top-fade between dark/light sections */ .section--alt { background: linear-gradient( 180deg, color-mix(in srgb, var(--bg) 0%, transparent), color-mix(in srgb, var(--bg-elev-2) 50%, transparent) 22%, color-mix(in srgb, var(--bg-elev-2) 50%, transparent) 78%, color-mix(in srgb, var(--bg) 0%, transparent) ); } /* ── Enhanced hero (gradient + grid overlay) ───────────────────────────── */ .hero { position: relative; padding: clamp(72px, 12vh, 120px) 24px 80px; text-align: center; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 800px 400px at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 60%), radial-gradient(ellipse 600px 300px at 80% 30%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 22px; animation: fade-up 0.5s cubic-bezier(0.22,1,0.36,1) 0.05s both; } .hero__title { font-size: clamp(40px, 7vw, 72px); font-weight: 800; letter-spacing: -2px; /* line-height 1.05 is too tight for a gradient (background-clip:text) heading: the line-box ends right at the baseline so descenders on the last line ('p' in "Complete", 'y' in "Every", any 'g/q/j') get clipped. Bumping to 1.15 + a tiny padding-bottom gives the painted glyph box enough room without changing the overall hero rhythm. */ line-height: 1.25; margin: 0 0 22px; /* 0.18em (not 0.08em) so mobile — where text is closer to the minimum clamp size and Safari's text-clip box is tighter — still has enough room for descenders. At 40px font that's ~7px of breathing room. */ padding-bottom: 0.18em; background: linear-gradient(135deg, var(--fg) 0%, var(--primary) 50%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s both; } .hero__lead { font-size: 19px; color: var(--fg-muted); line-height: 1.6; max-width: 720px; margin: 0 auto 36px; animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.25s both; } .hero__cta { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.35s both; } .hero__cta .btn { padding: 12px 22px; font-size: 15px; min-height: 0; } .hero__cta .btn--primary { box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent); } .hero__cta .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 45%, transparent); } .hero__sub { margin-top: 28px; font-size: 13px; color: var(--fg-dim); display: inline-flex; align-items: center; gap: 10px; animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.45s both; } .hero__sub-dot { /* Slot kept for layout balance (matches the gap the dot used to occupy); the visible dot is hidden so the text reads cleaner. */ width: 6px; height: 6px; visibility: hidden; } /* ── Social row (footer) ───────────────────────────────────────────────── Neutral chip on default; lifts and adopts the brand color on hover. Brand colors are locked per-button via the modifier classes. */ .social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .social-btn { width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--fg-muted); background: var(--surface); border: 1px solid var(--border); transition: transform 0.18s ease, color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; text-decoration: none; } .social-btn svg { width: 18px; height: 18px; display: block; } .social-btn:hover { color: #fff; transform: translateY(-2px); text-decoration: none; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand, var(--primary)) 35%, transparent); background: var(--brand, var(--primary)); border-color: transparent; } .social-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Brand colors per platform. */ .social-btn--youtube { --brand: #ff0033; } .social-btn--facebook { --brand: #1877f2; } .social-btn--instagram { --brand: #e1306c; } .social-btn--tiktok { --brand: #000000; } .social-btn--telegram { --brand: #229ed9; } .social-btn--whatsapp { --brand: #25d366; } /* In dark mode TikTok needs a lighter background so its black "brand color" stays visible. Light theme keeps it pure black. */ html[data-theme="samm-dark"] .social-btn--tiktok { --brand: #ffffff; color: var(--fg); } html[data-theme="samm-dark"] .social-btn--tiktok:hover { color: #000; } /* ── Floating WhatsApp FAB ─────────────────────────────────────────────── Fixed bottom-right action button; gentle bounce when idle, springs a bit smaller on tap, opens wa.me in a new tab. Skipped under reduced-motion. */ .wa-fab { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); color: #fff; text-decoration: none; box-shadow: 0 10px 28px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.55); transition: transform 0.18s ease, box-shadow 0.18s ease; } .wa-fab svg { width: 30px; height: 30px; } .wa-fab:hover { transform: translateY(-3px) scale(1.05); text-decoration: none; box-shadow: 0 14px 32px rgba(37,211,102,0.55), 0 0 0 8px rgba(37,211,102,0.18); } .wa-fab:active { transform: scale(0.92); } /* Tooltip on hover (desktop). Uses data-tip so the label is translatable. */ .wa-fab::after { content: attr(data-tip); position: absolute; inset-inline-end: calc(100% + 12px); top: 50%; transform: translateY(-50%); padding: 6px 12px; background: var(--fg); color: var(--bg); border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .wa-fab:hover::after { opacity: 1; transform: translateY(-50%) translateX(-2px); } @media (hover: none) { .wa-fab::after { display: none; } } @media (prefers-reduced-motion: no-preference) { .wa-fab { animation: wa-bounce 2.6s ease-in-out infinite, wa-pulse 2.6s ease-out infinite; } } @keyframes wa-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes wa-pulse { 0% { box-shadow: 0 10px 28px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.55); } 70% { box-shadow: 0 10px 28px rgba(37,211,102,0.45), 0 0 0 18px rgba(37,211,102,0); } 100% { box-shadow: 0 10px 28px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0); } } @media (max-width: 520px) { .wa-fab { width: 52px; height: 52px; inset-inline-end: 16px; bottom: 16px; } .wa-fab svg { width: 26px; height: 26px; } } /* ── FAQ accordion ─────────────────────────────────────────────────────── Native

for keyboard + a11y; styled to match cards. */ .faq-section { max-width: 880px; margin: 56px auto 32px; padding: 0 24px; } .faq-section__title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.6px; margin: 0 0 6px; color: var(--fg); text-align: center; } .faq-section__lead { text-align: center; color: var(--fg-muted); font-size: 15px; margin: 0 0 28px; } .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .faq-item:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); } .faq-item[open] { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 4px 18px color-mix(in srgb, var(--primary) 8%, transparent); } .faq-item summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; color: var(--fg); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; width: 18px; height: 18px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 8px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 8px no-repeat; color: var(--fg-muted); transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .faq-item[open] summary::after { /* Flip plus → minus by collapsing the vertical bar. */ background: linear-gradient(currentColor, currentColor) center / 8px 1.5px no-repeat; color: var(--primary); border-color: var(--primary); transform: rotate(180deg); } .faq-item__body { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--fg-muted); } .faq-item__body p { margin: 0 0 10px; } .faq-item__body p:last-child { margin-bottom: 0; } /* Definitional block — short, prominent "what is X" answer used near the top of long-form pages so AI engines have a clean snippet to extract. */ .tldr { max-width: 760px; margin: 28px auto 24px; padding: 18px 22px; border-inline-start: 3px solid var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border-start-end-radius: 12px; border-end-end-radius: 12px; color: var(--fg); font-size: 15px; line-height: 1.65; } .tldr__label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; } @keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── Service / capability grid (richer than .feature-grid) ─────────────── */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .svc-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px 24px; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; overflow: hidden; } .svc-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent) 0%, transparent 50%); opacity: 0; transition: opacity 0.22s ease; pointer-events: none; } .svc-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow); } .svc-card:hover::after { opacity: 1; } .svc-card__icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; margin-bottom: 18px; box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent); position: relative; z-index: 1; } .svc-card__icon svg { width: 22px; height: 22px; } .svc-card__num { position: absolute; top: 18px; inset-inline-end: 22px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--fg-dim); font-family: 'Fira Code', monospace; } .svc-card__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--fg); position: relative; z-index: 1; } .svc-card__body { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin: 0 0 16px; position: relative; z-index: 1; } .svc-card__bullets { margin: 0 0 14px; padding-inline-start: 0; list-style: none; position: relative; z-index: 1; } .svc-card__bullets li { position: relative; padding-inline-start: 18px; font-size: 13px; color: var(--fg-muted); line-height: 1.55; margin-bottom: 4px; } .svc-card__bullets li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: 0.6; } .svc-card__more { font-size: 13px; color: var(--primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; position: relative; z-index: 1; } .svc-card__more:hover { text-decoration: none; gap: 8px; } /* ── Reasons / "why us" grid ───────────────────────────────────────────── */ .reasons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .reason { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .reason__icon { width: 36px; height: 36px; border-radius: 9px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; } .reason__icon svg { width: 18px; height: 18px; } .reason__title { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--fg); } .reason__body { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; margin: 0; } /* ── Stat / KPI row ────────────────────────────────────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 16px; } .stat { text-align: center; padding: 22px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .stat__value { font-size: 36px; font-weight: 800; font-family: 'Fira Code', monospace; letter-spacing: -1px; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin: 0 0 4px; } .stat__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-dim); } /* ── Partners marquee (static grid) ─────────────────────────────────────── */ .partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; padding: 28px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); } .partners__tag { padding: 6px 14px; border-radius: 999px; background: var(--bg-elev-2); color: var(--fg-muted); font-size: 13px; font-weight: 500; border: 1px solid var(--border); white-space: nowrap; } .partners__group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; } .partners__group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); font-weight: 700; } /* ── CTA banner ────────────────────────────────────────────────────────── */ .cta-banner { margin: 56px auto 0; max-width: 880px; padding: 36px 30px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 8%, var(--surface)) 100%); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 18px; box-shadow: 0 14px 40px color-mix(in srgb, var(--primary) 14%, transparent); } .cta-banner__title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.5px; margin: 0 0 10px; color: var(--fg); } .cta-banner__lead { font-size: 15px; color: var(--fg-muted); margin: 0 0 22px; max-width: 560px; margin-left: auto; margin-right: auto; } .cta-banner__actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ── Split section (text + visual) ─────────────────────────────────────── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .split--reverse > :first-child { order: 2; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } .split--reverse > :first-child { order: initial; } } .split__visual { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px; min-height: 280px; display: flex; flex-direction: column; gap: 14px; /* Prevent inner mock tables from causing the page to scroll horizontally on narrow viewports — they get their own scroll container instead. */ min-width: 0; overflow-x: auto; } @media (max-width: 600px) { .split__visual { padding: 18px; } } /* ── Feature list (replaces .feature-grid for more depth) ──────────────── */ .deep-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } .deep-feature { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; } .deep-feature__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .deep-feature__icon { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; display: grid; place-items: center; flex-shrink: 0; } .deep-feature__icon svg { width: 18px; height: 18px; } .deep-feature__title { font-size: 16px; font-weight: 700; margin: 0; color: var(--fg); } .deep-feature ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--fg-muted); line-height: 1.6; } .deep-feature ul li { margin-bottom: 4px; } .deep-feature ul li::marker { color: var(--primary); } /* ── Flash / alert messages ─────────────────────────────────────────────── */ .flash { margin-block-start: 16px; margin-inline: 0; padding: 12px 16px; border-radius: 10px; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; } .flash--info { background: color-mix(in srgb, var(--info) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); color: var(--info); } .flash--success { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); } .flash--warn { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); } .flash--error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); } /* ── License-state pills + capacity bars (SAMM dashboard, admin /licenses) ── */ .state-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .2px; border: 1px solid transparent; white-space: nowrap; } .state-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .state-pill--healthy { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 28%, transparent); } .state-pill--warning { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .state-pill--grace { color: #d97706; background: color-mix(in srgb, #d97706 14%, var(--surface)); border-color: color-mix(in srgb, #d97706 30%, transparent); } .state-pill--soft-lock { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .state-pill--hard-lock { color: #fff; background: var(--danger); border-color: var(--danger); } .state-pill--unknown { color: var(--fg-muted); background: var(--bg-elev-2); border-color: var(--border); } .state-countdown { display: block; margin-top: 3px; font-size: 11px; color: var(--fg-muted); font-family: 'Fira Code', ui-monospace, monospace; } /* Fleet banner — overview page shows the worst state across the user's devices. */ .state-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; margin-bottom: 16px; border: 1px solid; line-height: 1.45; } .state-banner__icon { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; font-size: 16px; background: currentColor; color: var(--surface); } .state-banner__icon > span { color: var(--surface); } .state-banner__body { flex: 1 1 auto; } .state-banner__title { font-weight: 600; } .state-banner__sub { font-size: 13px; opacity: .9; } .state-banner__cta { flex: 0 0 auto; } .state-banner--warning { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 32%, transparent); color: var(--warn); } .state-banner--grace { background: color-mix(in srgb, #d97706 12%, var(--surface)); border-color: color-mix(in srgb, #d97706 32%, transparent); color: #d97706; } .state-banner--soft-lock { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 32%, transparent); color: var(--danger); } .state-banner--hard-lock { background: var(--danger); border-color: var(--danger); color: #fff; } .state-banner--hard-lock .state-banner__icon { color: var(--danger); background: #fff; } /* Capacity-usage bars (one per cap on a device row). */ .cap-bars { display: grid; gap: 4px; min-width: 160px; } .cap-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font-size: 11px; color: var(--fg-muted); } .cap-bar__track { position: relative; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--border) 80%, transparent); overflow: hidden; } .cap-bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: inherit; transition: width .24s ease; } .cap-bar--warn .cap-bar__fill { background: var(--warn); } .cap-bar--full .cap-bar__fill { background: var(--danger); } .cap-bar__label { display: flex; align-items: center; gap: 6px; font-family: 'Fira Code', ui-monospace, monospace; font-size: 11px; color: var(--fg-muted); white-space: nowrap; } .cap-bar__label strong { color: var(--fg); font-weight: 600; } .cap-bar__name { color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px; font-size: 10px; } /* Preference list (notification settings, future security toggles) */ .pref-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pref-list__item { margin: 0; } .pref-list__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; user-select: none; background: var(--surface); transition: border-color .12s, background .12s; } .pref-list__row:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .pref-list__row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .pref-list__text { font-size: 14px; color: var(--fg); } /* ── Language switcher ──────────────────────────────────────────────────── */ .lang-switcher { position: relative; display: inline-flex; } .lang-switcher__btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; cursor: pointer; color: var(--fg-muted); font-size: 13px; font-weight: 500; transition: background .12s, color .12s, border-color .12s; white-space: nowrap; min-height: 34px; } .lang-switcher__btn:hover { background: var(--bg-hover); color: var(--fg); border-color: var(--primary); } .lang-switcher__flag { font-size: 16px; line-height: 1; } .lang-switcher__caret { opacity: .55; transition: transform .18s; flex-shrink: 0; margin-left: 1px; } .lang-switcher__btn[aria-expanded="true"] .lang-switcher__caret { transform: rotate(180deg); } .lang-switcher__panel { position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 6px; min-width: 170px; box-shadow: 0 8px 24px rgba(0,0,0,.16); z-index: 200; list-style: none; margin: 0; } [dir="rtl"] .lang-switcher__panel { right: auto; left: 0; } .lang-switcher__panel li { margin: 0; } .lang-switcher__panel a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; color: var(--fg-muted); font-size: 13px; text-decoration: none; transition: background .1s, color .1s; } .lang-switcher__panel a:hover { background: var(--bg-hover); color: var(--fg); } .lang-switcher__panel a.is-active { color: var(--primary); font-weight: 600; background: rgba(37,99,235,.07); } .lang-switcher__item-flag { font-size: 17px; line-height: 1; flex-shrink: 0; } /* ── Arabic (RTL) overrides ─────────────────────────────────────────────── */ /* Modern Arabic typography — IBM Plex Sans Arabic. Pairs with Fira Sans (the Latin face) since both descend from the same Plex/Inter design DNA — technical, geometric, corporate. Applied to the whole page when lang=ar. */ :lang(ar), :lang(ar) body, :lang(ar) input, :lang(ar) textarea, :lang(ar) select, :lang(ar) button { font-family: 'IBM Plex Sans Arabic', 'Fira Sans', sans-serif; } /* ── Brand wordmark is locale-invariant ───────────────────────────────── The logo always renders in its Latin form (Fira Sans), regardless of page language. The parent `.site-header__brand` / `.site-footer__brand` already set `direction: ltr` and `font-family: 'Fira Sans', ...`, and the wordmark `` children inherit. These explicit rules are belt- and-suspenders: any future `:lang(ar)` rule that hits descendants of the brand won't accidentally swap the logo's font. */ :lang(ar) .site-header__brand, :lang(ar) .site-header__name, :lang(ar) .site-footer__brand, :lang(ar) .site-footer__brand-name, :lang(ar) .app-sidebar__brand, :lang(ar) .app-sidebar__brand-text { font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Hero — Arabic typography fixes. Cairo has noticeably taller ascenders + deeper descenders than Fira Sans. Combined with `background-clip: text` (gradient wordmark), descenders like ج ح خ ع غ get clipped by the painted glyph box. Two-part fix: 1. Loosen line-height so the descender has vertical room. 2. Add `padding-bottom` so the gradient-clipped paint region extends below the baseline far enough to cover the descender's deepest pixel. */ :lang(ar) .hero__title { letter-spacing: 0; /* never negative on Arabic — it breaks letter joins */ line-height: 1.45; padding-bottom: 0.18em; font-size: clamp(32px, 6vw, 60px); } :lang(ar) .hero__eyebrow { letter-spacing: 0; direction: rtl; } :lang(ar) .hero__lead { line-height: 1.85; direction: rtl; } /* Arabic letter-joining is cursive: ANY `letter-spacing` other than `normal` (positive or negative) breaks the joins between glyphs and the word looks like discrete letters. The design tokens sprinkle tracking on dozens of classes (eyebrows, badges, headings, label-style labels); listing each one in an allowlist always misses some. Apply globally under :lang(ar), then re-set tracking only on the locale-invariant brand wordmark — that text is always rendered in Latin Fira Sans (forced by `direction: ltr` + font-family override above) regardless of page language, so the design tracking is intentional there. */ :lang(ar) * { letter-spacing: normal; } :lang(ar) .site-header__name, :lang(ar) .site-footer__brand-name, :lang(ar) .app-sidebar__brand-text { letter-spacing: -0.5px; } :lang(ar) .section__title, :lang(ar) .cta-banner__title, :lang(ar) .svc-card__title, :lang(ar) .reason__title { line-height: 1.4; padding-bottom: 0.12em; } /* Flip directional arrows and icons in RTL */ [dir="rtl"] .svc-card__more { direction: rtl; } [dir="rtl"] .site-footer__brand { flex-direction: row-reverse; } [dir="rtl"] .site-footer__bar { flex-direction: row-reverse; } [dir="rtl"] .app-sidebar__back svg { transform: scaleX(-1); } [dir="rtl"] .lang-switcher__caret { margin-left: 0; margin-right: 1px; } /* Nav and header in RTL — direction:rtl on already flows flex rows right-to-left, so the inner container needs no override; the brand lands naturally on the far right and actions on the far left. We DO reverse the internals of the actions strip and user chip to preserve LTR visual order (theme-toggle · user · lang) within that small group. */ [dir="rtl"] .site-header__actions { flex-direction: row-reverse; } [dir="rtl"] .site-header__user { flex-direction: row-reverse; } /* Trust strip RTL. Flex already mirrors automatically under `direction: rtl` — the icon lands on the right (reading-start) edge and the text column to its left. No flex-direction override; that would double-flip back to the LTR layout. text-align inherits `start` which is right in RTL. */ /* Service cards RTL */ [dir="rtl"] .svc-card { text-align: right; } [dir="rtl"] .reason { flex-direction: row-reverse; } [dir="rtl"] .reason > div { text-align: right; } /* Footer columns RTL */ [dir="rtl"] .site-footer__grid { direction: rtl; } [dir="rtl"] .site-footer__col ul { padding-right: 0; } /* App shell sidebar RTL. The grid naturally places the sidebar on the right (RTL reverses col order). The flex rows inside the sidebar already flow right-to-left thanks to the inherited direction:rtl, so NO flex-direction overrides are needed — items are right-aligned and icons sit on the right (start) side automatically. Only three things need explicit rules: */ /* 1. Active indicator: move the glow to the right edge. */ [dir="rtl"] .app-sidebar__nav a.is-active { box-shadow: inset -2px 0 0 var(--primary); } /* 2. Section label: already right-aligned by RTL, keep explicit for clarity. */ [dir="rtl"] .app-sidebar__label { text-align: right; } /* 3. Mobile: drawer slides in from the right edge instead of the left. */ @media (max-width: 880px) { [dir="rtl"] .app-sidebar { inset: 0 0 0 auto; transform: translateX(100%); } [dir="rtl"] .app-shell.nav-open .app-sidebar { transform: translateX(0); } } /* Dashboard table RTL */ [dir="rtl"] .app-table th, [dir="rtl"] .app-table td { text-align: right; } /* Flash messages RTL */ [dir="rtl"] .flash { flex-direction: row-reverse; } /* Buttons with icons RTL */ [dir="rtl"] .btn svg { order: 1; } /* WhatsApp FAB flips automatically via inset-inline-end above. */