/* ============================================================================= * nemeo.io: the Nemeo marketing site. * * Loaded after /styles/tokens.css, which scripts/build.mjs concatenates from * @innovalda/tokens 0.15.0 in the design system's layer order: foundation, * innovalda, nemeo, the marketing surface, then the light and dark schemes. * carries data-surface="marketing" data-brand="nemeo" data-scheme. * * SEMANTIC TOKENS ONLY: no colour literal appears in this file, and every * font size and family comes from the foundation scale. tests/site-css.test.mjs * enforces both. Bare numbers below are layout geometry. * ========================================================================== */ /* ---- Self-hosted fonts: the four files scripts/build.mjs copies ---------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/roboto-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/roboto-latin-900-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Page geometry ------------------------------------------------------- */ :root { --content-max: 1120px; --measure: 65ch; --gutter: var(--space-4); --bezel: var(--space-3); } @media (min-width: 900px) { :root { --gutter: var(--space-8); } } /* ---- The Weathered N's recolour hooks ------------------------------------ */ /* The logo spec's colour table: light metal bronze-core, patina * verdigris-core; dark metal bronze-light, patina verdigris-bright. Light * metal is not a UI token, so the mark's own fallback supplies it and it is * left unset here. Every other cell equals a Nemeo token exactly. */ .brand-mark { --nemeo-patina: var(--color-brand-default); } [data-scheme='dark'] .brand-mark { --nemeo-metal: var(--color-highlight-default); } /* ---- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--color-surface-base); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); overflow-wrap: break-word; } img { display: block; max-width: 100%; height: auto; } p { max-width: var(--measure); margin: 0 0 var(--space-4); } a { color: var(--color-accent); text-underline-offset: 0.15em; } a:hover { color: var(--color-accent-hover); } :focus-visible { outline: var(--focus-ring-width) solid var(--color-interactive-focus); outline-offset: var(--focus-ring-offset); } h1, h2, h3 { margin: 0; color: var(--color-text-primary); font-family: var(--font-display); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); } h1 { margin-block-end: var(--space-5); font-size: clamp(var(--text-3xl), 1.6rem + 3.6vw, var(--text-display)); letter-spacing: var(--tracking-tight); } h2 { margin-block-end: var(--space-3); font-size: clamp(var(--text-2xl), 1.4rem + 1.6vw, var(--text-4xl)); letter-spacing: var(--tracking-tight); } h3 { margin-block-end: var(--space-3); font-size: var(--text-xl); } /* ---- Layout -------------------------------------------------------------- */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); } .section { padding-block: var(--density-section); } .section-sunken { background: var(--color-surface-sunken); } .lede, .section-lede { color: var(--color-text-secondary); font-size: var(--text-lg); } .lede { margin-block-end: var(--space-8); } .section-lede { margin-block-end: var(--space-12); } .skip-link { position: absolute; top: var(--space-2); left: var(--space-4); z-index: var(--z-overlay); padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text-primary); transform: translateY(calc(-100% - var(--space-4))); } .skip-link:focus { transform: none; } /* ---- Header -------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--color-border-default); } .header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding-block: var(--space-4); } .brand, .brand:hover { color: var(--color-text-primary); } .brand { margin-inline-end: auto; font-size: var(--text-xl); line-height: 1; text-decoration: none; white-space: nowrap; } /* Lockup (logo spec): mark about 1.3x cap height, gap about 0.55x cap height, * NEMEO's baseline on the N's lower terminus. Roboto's cap height is 0.711em; * the N's ink fills about 0.83 of its 24-unit box, and its terminus sits * 2.35/24 of the box above the box's bottom edge. */ .brand-mark { display: inline-block; width: 1.1em; height: 1.1em; margin-inline-end: 0.39em; vertical-align: -0.11em; } /* NEMEO as live text (logo spec: black weight 900, 0.015em tracking) with the * 2px bronze hairline: the page's one hairline use of the highlight token. */ .wordmark { font-family: var(--font-brand-wordmark); font-weight: 900; letter-spacing: 0.015em; text-transform: uppercase; text-decoration-line: underline; text-decoration-color: var(--color-highlight-default); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .site-nav { order: 3; flex-basis: 100%; } .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; } .site-nav a { display: inline-block; padding-block: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-base); font-weight: var(--font-weight-semibold); text-decoration: none; } .site-nav a:hover { color: var(--color-text-primary); text-decoration: underline; } @media (min-width: 900px) { .site-nav { order: 0; flex-basis: auto; } } /* ---- Buttons ------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-control); font-size: var(--text-base); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); text-decoration: none; } .button-primary, .button-primary:hover { color: var(--color-accent-on); } .button-primary { background: var(--color-accent); } .button-primary:hover { background: var(--color-accent-hover); } .header-cta { padding-inline: var(--space-4); } /* ---- Hero ---------------------------------------------------------------- */ .hero { padding-block: var(--space-12) var(--space-16); } .hero-inner { display: grid; gap: var(--space-12); align-items: center; } @media (min-width: 900px) { .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } } /* The page's one bronze badge (spec §5.1: the highlight stays scarce). */ .badge { display: inline-block; margin-block-end: var(--space-5); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-highlight-subtle); color: var(--color-highlight-text); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); } /* ---- Device frame -------------------------------------------------------- */ /* A CSS-drawn portrait tablet: a rounded bezel on the inverse surface and no * device-maker artwork (spec §5.4). Captures are 1600x2560, so 10:16. */ .device { width: 100%; max-width: 360px; margin-inline: auto; padding: var(--bezel); border-radius: calc(var(--radius-xl) + var(--bezel)); background: var(--color-surface-inverse); box-shadow: var(--shadow-xl); } .device-screen { overflow: hidden; aspect-ratio: 10 / 16; border-radius: var(--radius-md); background: var(--color-surface-sunken); } .device-screen img { width: 100%; } /* A screenshot that needs a disclosure caption (the kiosk shot is a mockup, * not a real third-party scoring product — Michael, 2026-09-27) wraps its * .device in a figure instead of a bare div, with the caption below the * device frame. */ .device-figure { width: 100%; max-width: 360px; margin-block: 0; margin-inline: auto; } .device-caption { margin-block-start: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-xs); text-align: center; } .device-hero { max-width: 400px; animation: settle var(--motion-budget) var(--motion-ease) both; } /* The page's one motion (spec §5.4): the hero tablet settles in on load. It * never changes opacity, so the tablet is visible even if no animation runs. */ @keyframes settle { from { transform: translateY(var(--space-6)) scale(0.97); } } @media (prefers-reduced-motion: reduce) { .device-hero { animation: none; } } /* ---- From box to venue --------------------------------------------------- */ .steps { display: grid; gap: var(--space-16); margin: 0; padding: 0; list-style: none; } .step { display: grid; gap: var(--space-8); align-items: center; } @media (min-width: 900px) { .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } .step:nth-child(even) .step-copy { order: 2; } } .step-copy h3 { display: flex; align-items: center; gap: var(--space-3); } .step-number { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--color-accent-subtle); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-weight-semibold); } .step-points { display: grid; gap: var(--space-3); max-width: var(--measure); margin: 0; padding-inline-start: var(--space-5); } /* ---- Built for the venue floor ------------------------------------------- */ .features-inner { display: grid; gap: var(--space-12); align-items: center; } @media (min-width: 900px) { .features-inner { grid-template-columns: minmax(0, 1fr) 320px; } } .features { display: grid; gap: var(--space-6); margin: var(--space-8) 0 0; padding: 0; list-style: none; } @media (min-width: 600px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .features li { padding-block-start: var(--space-4); border-top: 1px solid var(--color-border-strong); } .features h3 { margin-block-end: var(--space-2); font-size: var(--text-lg); } .features p { margin: 0; color: var(--color-text-secondary); } /* ---- Works with Lumieos --------------------------------------------------- */ .lumieos-inner { display: grid; gap: var(--space-12); align-items: center; } @media (min-width: 900px) { .lumieos-inner { grid-template-columns: minmax(0, 1fr) 320px; } } /* ---- Contact ------------------------------------------------------------- */ .contact-form { margin-block: var(--space-6); } .contact-form:empty { display: none; } .contact-fallback { font-size: var(--text-lg); } .contact-fallback a { font-weight: var(--font-weight-semibold); } /* ---- Privacy and 404 ----------------------------------------------------- */ .prose h1 { font-size: clamp(var(--text-3xl), 1.4rem + 2vw, var(--text-4xl)); } .prose h2 { margin-block-start: var(--space-10); font-size: var(--text-2xl); } .prose ul { display: grid; gap: var(--space-3); max-width: var(--measure); margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); } /* ---- Footer -------------------------------------------------------------- */ /* The InnovAlda colour logo has a cyan symbol and near-white lettering: it is * drawn for a dark ground, and company cyan must never sit on a light surface. * So the footer is a dark band in both schemes: the inverse surface in light, * and the sunken ink in dark, where the white logo takes over (spec §4.1). */ .site-footer { padding-block: var(--space-10); background: var(--color-surface-inverse); color: var(--color-text-inverse); font-size: var(--text-base); } [data-scheme='dark'] .site-footer { border-top: 1px solid var(--color-border-default); background: var(--color-surface-sunken); color: var(--color-text-secondary); } .site-footer a, .site-footer a:hover { color: inherit; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); } .footer-inner p { margin: 0; } .footer-maker { display: flex; align-items: center; gap: var(--space-3); margin-inline-end: auto; } .footer-maker img { width: auto; height: 28px; }