/* * Shared styles for synergenius.pt. Warm-ink "feather pen" aesthetic: * cream surfaces, deep ink type, hairline borders as the load-bearing * structure, no shadows, no gradients. Class-based dark mode toggled * by the inline bootstrap script in each page's ; persisted via * localStorage `fw.theme` so the BO + marketing site share a single * preference on the same origin. */ :root { color-scheme: light; --background: #faf9f7; --surface: #ffffff; --surface-muted: #f3f1ed; --foreground: #0a0a09; --foreground-strong: #000000; --foreground-muted: #78716c; --border: #e7e2d9; --border-strong: #1c1917; --ring: #44423d; --success: #4d7c5a; --success-soft: rgba(77, 124, 90, 0.08); --success-border: rgba(77, 124, 90, 0.25); --accent: #b07d2b; } :root.dark { color-scheme: dark; --background: #0f0e0c; --surface: #181614; --surface-muted: #1f1d19; --foreground: #f0ede5; --foreground-strong: #ffffff; --foreground-muted: #a8a29e; --border: #2a2722; --border-strong: #f0ede5; --ring: #a8a29e; --success: #6e9b7c; --success-soft: rgba(110, 155, 124, 0.1); --success-border: rgba(110, 155, 124, 0.32); --accent: #d2a052; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--background); color: var(--foreground); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--foreground); color: var(--background); } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; } a { color: inherit; } /* Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 28px 0 20px; border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--foreground); } .brand-mark { width: 22px; height: 22px; color: var(--foreground); } .brand-name { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .topbar-right { display: inline-flex; align-items: center; gap: 14px; } .topbar-cta { text-decoration: none; color: var(--foreground); border-bottom: 1px solid var(--foreground-muted); padding-bottom: 1px; font-size: 13px; transition: border-color 200ms ease, color 200ms ease; } .topbar-cta:hover { color: var(--foreground-strong); border-bottom-color: var(--foreground); } .topbar-divider { width: 1px; height: 14px; background: var(--border); } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; } .theme-toggle button { appearance: none; background: transparent; border: 0; padding: 0; width: 26px; height: 26px; border-radius: 6px; color: var(--foreground-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 200ms ease, background-color 200ms ease; } .theme-toggle button:hover { color: var(--foreground-strong); background: var(--surface-muted); } .theme-toggle button[aria-checked='true'] { color: var(--foreground); background: var(--surface-muted); } .theme-toggle svg { display: block; } /* Hero (landing): two columns, copy left + running-step card right, * within the reading wrap so it aligns with the sections below. */ .hero { padding: 72px 0 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: 64px; } .hero-copy { min-width: 0; } .hero-mark { width: 72px; height: 72px; color: var(--foreground); margin-bottom: 28px; } .hero h1 { font-size: 44px; line-height: 1.08; font-weight: 700; letter-spacing: -0.022em; color: var(--foreground-strong); margin: 0 0 22px; } .hero .lead { font-size: 17px; line-height: 1.6; color: var(--foreground); margin: 0 0 32px; max-width: 56ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; border-radius: 6px; border: 1px solid var(--foreground); background: var(--foreground); color: var(--background); transition: opacity 200ms ease; } .btn:hover { opacity: 0.85; } .btn--ghost { background: transparent; color: var(--foreground); border-color: var(--border); } .btn--ghost:hover { border-color: var(--foreground); opacity: 1; } /* Section scaffold */ .section { padding: 56px 0; border-top: 1px solid var(--border); } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--foreground-muted); margin: 0 0 28px; } /* Three-pillar (landing) */ .pillars { display: grid; gap: 28px; } .pillar { display: grid; grid-template-columns: 36px 1fr; gap: 18px; align-items: start; } .pillar-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground); } .pillar h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--foreground); margin: 4px 0 8px; } .pillar p { margin: 0; color: var(--foreground-muted); max-width: 56ch; } /* Audience grid (landing) */ .audience { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .audience > div { padding: 24px 20px; border-right: 1px solid var(--border); } .audience > div:last-child { border-right: 0; } .audience h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 12px; color: var(--foreground); } .audience p { margin: 0; font-size: 13px; color: var(--foreground-muted); } /* Trust block (landing) */ .trust { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; } .seal { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid var(--success-border); background: var(--success-soft); color: var(--success); white-space: nowrap; } .seal svg { flex-shrink: 0; } .trust p { margin: 0 0 12px; max-width: 56ch; color: var(--foreground-muted); } .trust-link { display: inline-block; margin-top: 4px; text-decoration: none; color: var(--foreground); border-bottom: 1px solid var(--border); padding-bottom: 1px; font-size: 14px; } .trust-link:hover { border-bottom-color: var(--foreground); } .cta-block { text-align: left; } .cta-block p { margin: 0 0 24px; max-width: 56ch; color: var(--foreground-muted); } /* Long-form prose (legal pages) */ .prose { padding: 56px 0 80px; } .prose h1 { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.018em; color: var(--foreground-strong); margin: 0 0 8px; } .prose .meta { font-size: 12px; color: var(--foreground-muted); letter-spacing: 0.02em; margin: 0 0 40px; } .prose h2 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; color: var(--foreground); margin: 44px 0 14px; padding-top: 32px; border-top: 1px solid var(--border); } .prose h2:first-of-type { padding-top: 0; border-top: 0; margin-top: 0; } .prose h3 { font-size: 14px; font-weight: 600; color: var(--foreground); margin: 28px 0 10px; } .prose p { margin: 0 0 14px; color: var(--foreground); max-width: 62ch; } .prose p.muted, .prose .muted { color: var(--foreground-muted); } .prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; color: var(--foreground); max-width: 62ch; } .prose li { margin: 0 0 8px; } .prose li::marker { color: var(--foreground-muted); } .prose strong { font-weight: 600; color: var(--foreground-strong); } .prose em { font-style: italic; } .prose code { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; padding: 1px 5px; border-radius: 4px; background: var(--surface-muted); border: 1px solid var(--border); color: var(--foreground); } .prose a { color: var(--foreground); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: border-color 200ms ease; } .prose a:hover { border-bottom-color: var(--foreground); } /* Footer */ footer.site { padding: 32px 0 48px; border-top: 1px solid var(--border); font-size: 12px; color: var(--foreground-muted); } footer.site .footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } footer.site .legal { letter-spacing: 0.02em; } footer.site .links { display: inline-flex; gap: 16px; } footer.site .links a { text-decoration: none; color: var(--foreground-muted); transition: color 200ms ease; } footer.site .links a:hover { color: var(--foreground); } footer.site .contact { margin-top: 12px; } footer.site .contact a { color: var(--foreground); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; } footer.site .contact a:hover { border-bottom-color: var(--foreground); } a:focus-visible, button:focus-visible { outline: 1px solid var(--ring); outline-offset: 2px; border-radius: 2px; } /* Language picker (PT / EN), mirrors the Backoffice segmented idiom */ .lang-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; } .lang-toggle button { appearance: none; background: transparent; border: 0; padding: 2px 1px; font: inherit; color: var(--foreground-muted); cursor: pointer; transition: color 200ms ease; } .lang-toggle button:hover { color: var(--foreground-strong); } .lang-toggle button[aria-checked='true'] { color: var(--foreground); } .lang-slash { color: var(--border-strong); opacity: 0.4; user-select: none; } /* Hero running-workflow card. Ports the Stitch deck "unit" mock: a real * automation working through its steps, three done, one paused at an * approval gate, one pending. Uses the site's own tokens. */ .hero-run { margin: 0; width: 100%; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: 0 20px 50px -30px rgba(10, 10, 9, 0.4); } .run-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--border); } .run-head h4 { margin: 0 0 9px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--foreground-strong); } .run-badges { display: flex; flex-wrap: wrap; gap: 7px; } .run-badges span { font-size: 10.5px; font-weight: 600; color: var(--foreground-muted); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .run-steps { padding: 8px 12px 12px; display: flex; flex-direction: column; } .run-step { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; } .run-mark { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .run-mark svg { width: 18px; height: 18px; color: var(--success); } .run-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .run-label { font-size: 14px; font-weight: 600; color: var(--foreground); } .run-note { font-size: 12px; color: var(--foreground-muted); } .run-step.done .run-label { color: var(--foreground-muted); font-weight: 500; } .run-step.pending { opacity: 0.45; } .run-step.gate { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); } .run-gate { grid-column: 1 / -1; margin-top: 9px; padding-left: 33px; } .run-gate p { margin: 0 0 9px; font-size: 12.5px; font-weight: 600; color: var(--foreground); } .run-gatebtns { display: flex; gap: 10px; } .run-decline, .run-approve { font-size: 13px; font-weight: 600; border-radius: 8px; padding: 7px 18px; } .run-decline { color: var(--foreground-muted); border: 1px solid var(--border); } .run-approve { color: var(--background); background: var(--foreground-strong); } @media (prefers-reduced-motion: no-preference) { .run-dot { animation: run-dot 2.2s ease-in-out infinite; } } @keyframes run-dot { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent); } } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 36px; padding: 64px 0 56px; } .hero-run { max-width: 420px; } } @media (max-width: 640px) { .hero { padding: 56px 0 48px; gap: 32px; } .hero h1 { font-size: 30px; } .hero .lead { font-size: 16px; } .audience { grid-template-columns: 1fr; } .audience > div { border-right: 0; border-bottom: 1px solid var(--border); } .audience > div:last-child { border-bottom: 0; } .trust { grid-template-columns: 1fr; gap: 16px; } footer.site .footer-row { align-items: flex-start; flex-direction: column; } .topbar-cta { display: none; } .prose h1 { font-size: 26px; } }