/* ========================================================================== Copperbelly — design system Palette, type and glow are taken from the CAI platform's own theme (~/cbai/theme.json, "landing"), so the website and the product read as one company. See 32-phase2-brief.md. ========================================================================== */ /* --- fonts: self-hosted. A company selling "your data never leaves the building" should not phone a font CDN on every page load. Both files are variable, so one file covers every weight. ------------------- */ @font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel-var.woff2') format('woff2-variations'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2-variations'); font-weight: 100 700; font-style: normal; font-display: swap; } :root { /* ground + surfaces */ --bg: #000000; --surface: #0c0a08; --surface2: #141008; --border: #1e1608; --border2: #2e2010; /* copper — the primary */ --copper: #c17f3a; --copper-light: #e8a84a; --copper-dark: #7a4e1e; /* verdigris — the secondary. Aged-copper patina; carries Home/consumer. */ --verdigris: #7ab5a0; --verdigris-dim: #4d7a6c; --text: #d4b896; /* warm parchment, never pure white */ --text-hi: #f0dcc0; --text-dim: #a98861; --text-mut: #7d6446; --glow: rgba(193,127,58,0.38); --radius: 3px; /* PAGE ACCENT. Every interior-page component below is drawn in --accent rather than a hard-coded colour, so a page re-themes itself with one class on . Default is copper (business/primary); `.page--home` swaps the trio to verdigris. Rule 3 of the design system, made mechanical. --accent-ink is the text colour that sits ON an accent fill; both pass AA. */ --accent: var(--copper); --accent-dim: var(--copper-dark); --accent-ink: #180e03; --font-head: 'Cinzel', 'Iowan Old Style', Palatino, Georgia, serif; --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --measure: 68ch; --gutter: clamp(1.25rem, 4vw, 3.5rem); --shell: 1180px; } /* --- reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--copper-light); text-decoration: none; } a:hover { color: var(--text-hi); } /* Visible focus for keyboard users — the old site had none at all. */ a:focus-visible, button:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 3px; border-radius: 2px; } h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; letter-spacing: 0.005em; color: var(--text-hi); margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: clamp(2.3rem, 1.6rem + 3.2vw, 4.15rem); } h2 { font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem); } h3 { font-size: clamp(1.13rem, 1.04rem + 0.4vw, 1.3rem); } p { margin: 0 0 1.15em; max-width: var(--measure); } .shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; } /* The header is sticky, so an in-page jump (#install, #contact) would land with its heading hidden underneath it. Offset every anchorable element by the header's height plus breathing room. */ [id] { scroll-margin-top: 88px; } /* Section eyebrow — small caps label above a heading. */ .eyebrow { font-family: var(--font-head); font-size: 0.735rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--copper); margin: 0 0 1rem; } .eyebrow--verdigris { color: var(--verdigris); } .lede { font-size: clamp(1.06rem, 1rem + 0.4vw, 1.24rem); color: var(--text-dim); } /* --- skip link --------------------------------------------------------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--copper); color: #150d04; padding: 0.7rem 1.2rem; font-weight: 600; border-radius: 0 0 var(--radius) 0; } .skip:focus { left: 0; } /* --- header ------------------------------------------------------------ */ .site-head { position: sticky; top: 0; z-index: 100; background: rgba(0,0,0,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-head__in { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; width: 100%; padding-inline: clamp(1rem, 2.2vw, 1.5rem); } .brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; } .brand img.brand__mark { width: 34px; } .brand img.brand__type { width: 154px; } .nav { display: flex; align-items: center; gap: 8px; } /* Nav items match the CAI platform's topbar buttons exactly (`.cb-topbar-btn` in ~/cbai/landing/index.html) so the site header and the product header read as the same system: boxed, uppercase, letter-spaced. Scoped with `>` so the links INSIDE the services panel are not affected. */ .nav > a, .nav__btn { height: 36px; min-width: 84px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 2px; color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .nav > a:hover, .nav__btn:hover, .nav__group:hover .nav__btn, .nav__btn[aria-expanded="true"] { border-color: var(--copper); color: var(--copper-light); background: rgba(188,121,95,0.08); } /* The one emphasised nav item. Same geometry as its siblings so it stays in the family — only the fill changes. This mirrors how the platform itself promotes a button (`.del-btn-confirm`: filled background + lighter border + a coloured glow), in copper instead of danger red. Dark text on copper, not white: #180e03 on #c17f3a is 5.7:1 and passes WCAG AA for 13px text; white would be 3.3:1 and fail. */ .nav > a.is-cta { background: linear-gradient(180deg, var(--copper-light), var(--copper)); border-color: var(--copper-light); color: #180e03; box-shadow: 0 3px 14px rgba(193,127,58,0.24); } .nav > a.is-cta:hover { background: linear-gradient(180deg, #f3b85b, var(--copper-light)); border-color: #f3b85b; color: #180e03; box-shadow: 0 5px 20px rgba(193,127,58,0.40); } .nav-toggle { display: none; height: 36px; min-width: 84px; padding: 0 16px; align-items: center; justify-content: center; background: var(--surface2); border: 1px solid var(--border2); border-radius: 2px; color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: var(--copper); color: var(--copper-light); background: rgba(188,121,95,0.08); } /* --- services dropdown -------------------------------------------------- Built on a real