/* =================================================================
SYNERGY AI SYSTEMS - CORE STYLESHEET
Visual style: Clean Technical Blueprint
Palette: Steel & Circuit
=================================================================
FONT LOADING - Phase 4 must add this to of every page,
before this stylesheet:
Type roles:
--font-display : Space Grotesk - headlines only
--font-body : IBM Plex Sans - body copy, UI text
--font-mono : IBM Plex Mono - nav, eyebrows, buttons, stats
Signature element: .frame - corner registration marks (two opposite
corners), hidden by default, revealed on hover/focus/.is-visible.
Use on hero media, cards, images. Echoes crop/registration marks on
a real engineering drawing.
================================================================= */
/* -----------------------------------------------------------------
TOKENS
----------------------------------------------------------------- */
:root {
/* Colour - Steel & Circuit */
--color-ink: #1B1F24; /* Charcoal - primary text, dark sections */
--color-steel: #3A5A7A; /* Steel Blue - secondary, links, accents */
--color-amber: #F2A93B; /* Safety Amber - CTAs only, use sparingly */
--color-amber-dark: #DB9224; /* hover state for amber */
--color-paper: #F5F5F2; /* Off-white - main background */
--color-line: #C9D6DE; /* Blueprint Line - hairlines, grid, borders */
--color-white: #FFFFFF;
--color-text: var(--color-ink);
--color-text-muted: #5B6470;
--color-bg: var(--color-paper);
--color-bg-dark: var(--color-ink);
--color-border: var(--color-line);
--color-link: var(--color-steel);
/* Type */
--font-display: "Space Grotesk", -apple-system, sans-serif;
--font-body: "IBM Plex Sans", -apple-system, sans-serif;
--font-mono: "IBM Plex Mono", "Courier New", monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.5rem;
--text-2xl: 2rem;
--text-3xl: 2.75rem;
--text-4xl: clamp(2.5rem, 5vw + 1rem, 4.5rem);
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
--space-24: 6rem;
/* Misc */
--radius-sm: 2px;
--radius-md: 4px;
--border-thin: 1px;
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--container-max: 1200px;
--container-pad: 1.5rem;
--z-nav: 100;
}
/* -----------------------------------------------------------------
RESET / BASE
----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a {
color: var(--color-link);
text-decoration: none;
}
a:hover { text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--color-amber);
outline-offset: 2px;
}
::selection {
background: var(--color-amber);
color: var(--color-ink);
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.15;
margin: 0 0 var(--space-4);
color: var(--color-ink);
}
h1 { font-size: var(--text-4xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-4); max-width: 65ch; }
button { font-family: inherit; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* -----------------------------------------------------------------
LAYOUT
----------------------------------------------------------------- */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-24); }
.section--tight { padding-block: var(--space-16); }
.section--dark {
background: var(--color-bg-dark);
color: var(--color-white);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
color: var(--color-white);
}
.section--dark p { color: var(--color-line); }
.section--dark .eyebrow { color: var(--color-line); }
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
.grid--2, .grid--3 { grid-template-columns: 1fr; }
}
/* Subtle blueprint grid background - use on hero/dark sections only */
.bg-grid {
background-image:
linear-gradient(rgba(58, 90, 122, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(58, 90, 122, 0.12) 1px, transparent 1px);
background-size: 48px 48px;
}
/* -----------------------------------------------------------------
EYEBROW / TECHNICAL LABEL
----------------------------------------------------------------- */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-steel);
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.eyebrow::before {
content: "+";
color: var(--color-amber);
font-weight: 500;
}
/* -----------------------------------------------------------------
DIVIDER - ruled line with tick, technical-drawing feel
----------------------------------------------------------------- */
.divider {
border: 0;
border-top: var(--border-thin) solid var(--color-border);
margin: 0;
position: relative;
}
.divider::after {
content: "";
position: absolute;
left: 0;
top: -1px;
width: 32px;
height: 3px;
background: var(--color-amber);
}
/* -----------------------------------------------------------------
SIGNATURE ELEMENT - corner registration marks
Use on hero media, cards, framed images.
----------------------------------------------------------------- */
.frame {
position: relative;
}
.frame::before, .frame::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--color-steel);
opacity: 0;
transition: opacity var(--transition-base), transform var(--transition-base);
pointer-events: none;
}
.frame::before {
top: -8px; left: -8px;
border-right: 0; border-bottom: 0;
transform: translate(6px, 6px);
}
.frame::after {
bottom: -8px; right: -8px;
border-left: 0; border-top: 0;
transform: translate(-6px, -6px);
}
.frame:hover::before, .frame:hover::after,
.frame:focus-within::before, .frame:focus-within::after,
.frame.is-visible::before, .frame.is-visible::after {
opacity: 1;
transform: translate(0, 0);
}
/* -----------------------------------------------------------------
BUTTONS
----------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.04em;
text-transform: uppercase;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-sm);
border: var(--border-thin) solid transparent;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast), transform var(--transition-fast);
text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--color-amber); color: var(--color-ink); }
.btn-primary:hover { background: var(--color-amber-dark); }
.btn-secondary {
background: transparent;
color: var(--color-ink);
border-color: var(--color-line);
}
.btn-secondary:hover { border-color: var(--color-amber); color: var(--color-steel); }
.section--dark .btn-secondary { color: var(--color-paper); }
.section--dark .btn-secondary:hover { color: var(--color-amber); }
/* -----------------------------------------------------------------
CARDS
----------------------------------------------------------------- */
.card {
background: var(--color-white);
border: var(--border-thin) solid var(--color-border);
padding: var(--space-8);
position: relative;
}
.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.card p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
/* -----------------------------------------------------------------
NAV / HEADER
----------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-nav);
background: var(--color-paper);
border-bottom: var(--border-thin) solid var(--color-border);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-4);
}
.logo {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-lg);
color: var(--color-ink);
text-decoration: none;
}
.nav-list {
list-style: none;
display: flex;
gap: var(--space-6);
margin: 0;
padding: 0;
}
.nav-list a {
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-ink);
}
.nav-toggle {
display: none;
background: none;
border: 0;
cursor: pointer;
padding: var(--space-2);
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-ink);
margin: 4px 0;
}
@media (max-width: 768px) {
.nav-toggle { display: block; }
.nav-list {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 70%;
max-width: 320px;
background: var(--color-ink);
flex-direction: column;
justify-content: flex-start;
padding: var(--space-24) var(--space-6);
transform: translateX(100%);
transition: transform var(--transition-base);
}
.nav-list.is-open { transform: translateX(0); }
.nav-list a { color: var(--color-paper); }
}
/* -----------------------------------------------------------------
FOOTER
----------------------------------------------------------------- */
.site-footer {
background: var(--color-ink);
color: var(--color-line);
padding-block: var(--space-16);
}
.site-footer a { color: var(--color-paper); }
.site-footer a:hover { color: var(--color-amber); }
.site-footer .eyebrow { color: var(--color-line); }
/* -----------------------------------------------------------------
SCROLL REVEAL (paired with main.js)
----------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity var(--transition-base) ease, transform var(--transition-base) ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* -----------------------------------------------------------------
UTILITIES
----------------------------------------------------------------- */
.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* -----------------------------------------------------------------
PHASE 4 ADDITIONS - homepage/template component classes
----------------------------------------------------------------- */
.lead { font-size: var(--text-lg); }
.cta-group {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin-top: var(--space-8);
}
.section--white { background: var(--color-white); }
.footer-nav {
list-style: none;
padding: 0;
margin: 0;
font-family: var(--font-mono);
font-size: var(--text-sm);
}
.footer-nav li { margin-bottom: var(--space-2); }
.site-footer .logo { color: var(--color-paper); }
.site-footer .divider { border-color: rgba(201, 214, 222, 0.2); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--color-amber);
color: var(--color-ink);
padding: var(--space-2) var(--space-4);
z-index: 1000;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }
.my-8 { margin-block: var(--space-8); }
.mx-auto { margin-inline: auto; }
/* -----------------------------------------------------------------
PHASE 5a ADDITIONS - about/contact/terms component classes
----------------------------------------------------------------- */
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li {
padding-left: var(--space-6);
position: relative;
margin-bottom: var(--space-3);
}
.list-plain li::before {
content: "-";
position: absolute;
left: 0;
color: var(--color-amber);
font-family: var(--font-mono);
font-weight: 500;
}
.form-group { margin-bottom: var(--space-6); }
.form-group label {
display: block;
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-2);
color: var(--color-steel);
}
.form-group input, .form-group textarea {
width: 100%;
font-family: var(--font-body);
font-size: var(--text-base);
padding: var(--space-3);
border: var(--border-thin) solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-white);
color: var(--color-ink);
}
.form-group input:focus, .form-group textarea:focus {
outline: 2px solid var(--color-amber);
outline-offset: 1px;
border-color: var(--color-steel);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.hidden-field { display: none; }
.notice {
border: var(--border-thin) solid var(--color-amber);
background: rgba(242, 169, 59, 0.08);
padding: var(--space-4) var(--space-6);
font-family: var(--font-mono);
font-size: var(--text-sm);
}
/* -----------------------------------------------------------------
PHASE 8a ADDITIONS - hero meta strip, founder pull-quote block
----------------------------------------------------------------- */
.hero-meta {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-line);
margin-top: var(--space-6);
}
.founder-quote {
position: relative;
border: var(--border-thin) solid var(--color-line);
background: var(--color-white);
padding: var(--space-12) var(--space-8);
display: flex;
align-items: center;
justify-content: center;
min-height: 280px;
}
.founder-quote p {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
line-height: 1.25;
color: var(--color-ink);
margin: 0;
max-width: 18ch;
}
.founder-quote::after {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 32px;
height: 3px;
background: var(--color-amber);
}
/* -----------------------------------------------------------------
PASS A ADDITIONS - engagement path, card links, use-case fields,
step list, form note, proper semibold emphasis
----------------------------------------------------------------- */
strong { font-weight: 600; }
.card .step-num {
font-family: var(--font-mono);
font-size: var(--text-xl);
font-weight: 500;
color: var(--color-amber);
margin: 0 0 var(--space-2);
}
.card-link {
display: inline-block;
margin-top: var(--space-4);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-steel);
}
.card-link::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
.card-link::after { content: " \2192"; }
.card:hover .card-link { color: var(--color-amber); }
.card:hover { border-color: var(--color-steel); }
.card .uc-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-steel);
margin: var(--space-4) 0 2px;
}
.uc-tools {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: var(--space-4) 0;
}
.uc-tools span {
font-family: var(--font-mono);
font-size: var(--text-xs);
border: var(--border-thin) solid var(--color-line);
padding: 2px 8px;
color: var(--color-steel);
}
.card .uc-fit {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-muted);
border-top: var(--border-thin) solid var(--color-line);
padding-top: var(--space-3);
margin: 0;
}
.step-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: step;
}
.step-list li {
position: relative;
padding-left: var(--space-12);
margin-bottom: var(--space-6);
counter-increment: step;
}
.step-list li::before {
content: "0" counter(step);
position: absolute;
left: 0;
top: 2px;
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--text-lg);
color: var(--color-amber);
}
.step-list--offset { counter-reset: step 3; }
.form-note {
margin-top: var(--space-4);
font-size: var(--text-sm);
color: var(--color-text-muted);
max-width: 48ch;
}
/* -----------------------------------------------------------------
PASS B ADDITIONS - technical hardening
----------------------------------------------------------------- */
/* No-JS safety: if scripting never runs, reveal-hidden content shows
immediately. The js class is added by an inline script in each head. */
html:not(.js) .reveal { opacity: 1; transform: none; }
/* Closeable mobile nav */
.nav-toggle { position: relative; z-index: 2; }
.nav-toggle span {
transition: transform var(--transition-base), opacity var(--transition-base), background var(--transition-base);
}
.nav-toggle.is-open span { background: var(--color-paper); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-list { z-index: 1; }
body.nav-open { overflow: hidden; }
/* Focus contrast: steel on light backgrounds, amber on dark contexts */
:focus-visible { outline: 2px solid var(--color-steel); outline-offset: 2px; }
.section--dark :focus-visible,
.site-footer :focus-visible,
.nav-list.is-open :focus-visible,
.nav-toggle.is-open:focus-visible { outline-color: var(--color-amber); }
.form-group input:focus, .form-group textarea:focus { outline-color: var(--color-steel); }
/* Active nav state */
.nav-list a[aria-current="page"] {
border-bottom: 2px solid var(--color-amber);
padding-bottom: 2px;
}
/* 404 page code */
.err-code {
font-family: var(--font-mono);
font-size: clamp(4rem, 12vw, 8rem);
font-weight: 500;
color: var(--color-amber);
line-height: 1;
margin: 0 0 var(--space-4);
}
/* -----------------------------------------------------------------
GO-LIVE CONTENT PASS ADDITION
----------------------------------------------------------------- */
.form-intro {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
max-width: 56ch;
}
/* -----------------------------------------------------------------
INSERT IMAGES PASS ADDITION
----------------------------------------------------------------- */
.frame img {
display: block;
width: 100%;
height: auto;
}