/* =========================================================================== THEME Both palettes live here, in one set of names. The application picks between them with the data-bs-theme attribute on in _Layout.cshtml — "dark" ships, "light" is one word away, and nothing else anywhere has to change. The rule that keeps it that way: below this block, no rule states a colour. Every one of them reads a custom property. If a colour is ever needed that is not here, it gets added to BOTH blocks rather than written inline, or the theme stops being reversible and starts being a rewrite. The signal colours on the landing page — an amber stack light, a green running lamp — are the deliberate exception. They live in the markup and in the drawings, because amber has to read as amber whatever the page is doing. =========================================================================== */ :root { --md-page: #ffffff; --md-surface: #ffffff; /* cards, panels, the mock screens */ --md-tint: #f8fafc; /* quiet blocks, table heads, header and footer */ --md-ink: #0f172a; --md-muted: #64748b; --md-line: #e2e8f0; --md-accent: #1d4ed8; --md-accent-soft: #eff4ff; /* icon tiles, the open accordion panel */ --md-shadow: rgba(15, 23, 42, .08); --md-shadow-lift: rgba(15, 23, 42, .07); /* Hero wash: a tinted light source at top-left, then a settling gradient. */ --md-hero-glow: #e0ecff; --md-hero-top: #f8fafc; --md-hero-foot: #eef2f7; /* --- Gradients ------------------------------------------------------------ Every filled surface is a gradient rather than a flat colour, so the page has one light source instead of a stack of grey boxes. They are tokens for the same reason the colours are: the theme has to stay one word away from reversing, and a gradient written inline would not follow it. The rule for all of them: shallow. A surface gradient that anybody can point at has failed — it should only stop the eye reading the panel as flat. -------------------------------------------------------------------------- */ --md-page-bg: radial-gradient(75rem 42rem at 50% -12%, #e8f0ff 0%, transparent 58%), linear-gradient(180deg, #ffffff 0%, #f7f9fc 60%, #f2f5f9 100%); --md-surface-bg: linear-gradient(158deg, #ffffff 0%, #fbfcfe 100%); --md-tint-bg: linear-gradient(158deg, #fafbfd 0%, #f4f7fa 100%); --md-header-bg: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%); --md-footer-bg: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%); --md-accent-bg: linear-gradient(150deg, #2563eb 0%, #1d4ed8 100%); --md-accent-soft-bg: linear-gradient(150deg, #f2f6ff 0%, #e8f0ff 100%); } [data-bs-theme="dark"] { --md-page: #0a1220; /* an industrial navy, not Bootstrap's warm grey */ --md-surface: #101a2b; --md-tint: #0d1626; --md-ink: #e6edf7; --md-muted: #93a4bd; --md-line: #1f2b40; --md-accent: #6aa6ff; /* lifted: #1d4ed8 has no contrast on navy */ --md-accent-soft: #15253f; --md-shadow: rgba(0, 0, 0, .5); --md-shadow-lift: rgba(0, 0, 0, .45); --md-hero-glow: #1b3157; --md-hero-top: #0e1828; --md-hero-foot: #0a1220; /* Dark has more room for this than light does: a navy that shifts from a cool top to a near-black foot reads like a lit room, where one flat navy reads like a switched-off screen. The glow at the top is the only thing on the page pretending to be a light source, so nothing else casts one. */ --md-page-bg: radial-gradient(80rem 45rem at 50% -14%, #172b4e 0%, transparent 60%), linear-gradient(180deg, #0c1728 0%, #0a1220 55%, #070d17 100%); --md-surface-bg: linear-gradient(158deg, #142236 0%, #0e1725 100%); --md-tint-bg: linear-gradient(158deg, #101c2f 0%, #0b1423 100%); --md-header-bg: linear-gradient(180deg, #122036 0%, #0b1423 100%); --md-footer-bg: linear-gradient(180deg, #0a1220 0%, #101d31 100%); --md-accent-bg: linear-gradient(150deg, #7db2ff 0%, #4f8fe8 100%); --md-accent-soft-bg: linear-gradient(150deg, #1a2c49 0%, #13223a 100%); /* Bootstrap resolves its own components from these, so the navbar, buttons, tables, badges and accordion follow the page instead of fighting it. */ --bs-body-bg: var(--md-page); --bs-body-color: var(--md-ink); --bs-border-color: var(--md-line); --bs-secondary-color: var(--md-muted); --bs-emphasis-color: #ffffff; } html { font-size: 14px; position: relative; min-height: 100%; } @media (min-width: 768px) { html { font-size: 16px; } } /* Sticky footer. The template pinned the footer with position:absolute and gave the body a matching 60px margin, which fixed the footer at exactly one line tall. A column that grows in the middle holds it to the bottom of a short page and lets it be as tall as it needs on every other one. */ body { min-height: 100vh; display: flex; flex-direction: column; /* The flat colour stays underneath as the fallback and as what the browser paints behind an overscroll; the gradient is fixed so it lights the page once rather than repeating down a long one. */ background-color: var(--md-page); background-image: var(--md-page-bg); background-attachment: fixed; background-repeat: no-repeat; color: var(--md-ink); } .md-main { flex: 1 0 auto; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--md-accent) 35%, transparent); } /* The one strongly coloured control on the page, so it carries the accent gradient and belongs to the same light source as everything else. Its label is the page colour rather than a fixed white: on dark the accent is a pale blue and wants dark text on it, on light it is deep blue and wants white. One rule, both themes, because both read from the tokens. */ .btn-primary { background: var(--md-accent-bg); border-color: transparent; color: var(--md-page); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--md-accent-bg); border-color: transparent; color: var(--md-page); filter: brightness(1.08); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* --------------------------------------------------------------------------- Header. --------------------------------------------------------------------------- */ .md-header { background: var(--md-header-bg); border-bottom: 1px solid var(--md-line); margin-bottom: 1.5rem; } .md-header .navbar { padding-top: .6rem; padding-bottom: .6rem; } .md-brand { display: inline-flex; align-items: center; gap: .6rem; /* The template broke this mid-word. It is two lines by design, never three. */ white-space: nowrap; word-break: normal; text-decoration: none; color: var(--md-ink); } .md-brand:hover { color: var(--md-ink); } /* One mark, drawn in currentColor, used in the header and again in the footer, so it inherits both the theme and whatever size its context sets. */ .md-brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: .5rem; background: var(--md-accent-soft-bg); color: var(--md-accent); } .md-brand-mark svg { width: 1.1rem; height: 1.1rem; } .md-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .md-brand-name { font-weight: 650; letter-spacing: -.02em; font-size: 1.05rem; color: var(--md-ink); } /* The house brand, present but subordinate — it is the company, not the product, and an OEM is buying the product. */ .md-brand-by { font-size: .68rem; letter-spacing: .02em; color: var(--md-muted); font-weight: 400; } .md-header .nav-link { color: var(--md-muted); font-weight: 500; padding-inline: .9rem; } .md-header .nav-link:hover, .md-header .nav-link:focus { color: var(--md-ink); } .md-user { color: var(--md-muted); } .md-header .navbar-toggler { border-color: var(--md-line); color: var(--md-ink); } .md-header .navbar-toggler:focus { box-shadow: none; } /* --------------------------------------------------------------------------- Footer. --------------------------------------------------------------------------- */ .md-footer { flex-shrink: 0; margin-top: 4.5rem; background: var(--md-footer-bg); border-top: 1px solid var(--md-line); color: var(--md-muted); font-size: .85rem; } .md-brand-footer .md-brand-name { font-size: 1rem; } .md-footer-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--md-ink); margin-bottom: .75rem; } .md-footer-line { color: var(--md-muted); max-width: 34rem; } .md-footer-list { list-style: none; padding: 0; margin: 0; } .md-footer-list li + li { margin-top: .4rem; } .md-footer-list a { color: var(--md-muted); text-decoration: none; } .md-footer-list a:hover { color: var(--md-accent); text-decoration: underline; } .md-footer-base { border-top: 1px solid var(--md-line); padding: .9rem 0; font-size: .78rem; color: var(--md-muted); } .md-footer-sep { margin: 0 .5rem; opacity: .6; } .md-footer-base-link { color: var(--md-muted); text-decoration: none; } .md-footer-base-link:hover { color: var(--md-accent); text-decoration: underline; } /* --------------------------------------------------------------------------- Landing page. The only page here shown to somebody who is not signed in, so it is the only one that gets styling beyond stock Bootstrap. Still no framework and no CDN: every rule below is plain CSS over the Bootstrap already vendored in wwwroot. The competing products in this category lean on customer logos, named testimonials and hard numbers for credibility. We have none of those to show honestly yet, so the page has to earn attention with clarity and with showing the product instead — hence the mock panels, which are drawn in CSS rather than screenshotted so they cannot go stale or leak a real customer's data. --------------------------------------------------------------------------- */ /* Sections carry the page rhythm, so individual blocks do not need margin utilities sprinkled through the markup. */ .landing section + section { margin-top: 4.5rem; } .landing .ld-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 600; color: var(--md-muted); } .landing h2 { font-weight: 600; letter-spacing: -.015em; color: var(--md-ink); } .landing .ld-lead { color: var(--md-muted); max-width: 44rem; } .ld-hero { background: radial-gradient(60rem 26rem at 15% -10%, var(--md-hero-glow) 0%, transparent 62%), linear-gradient(180deg, var(--md-hero-top) 0%, var(--md-hero-foot) 100%); border: 1px solid var(--md-line); } .ld-hero h1 { font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--md-ink); } /* Factual capability chips. Deliberately not a logo wall — there is nothing honest to put in a logo wall yet, and a fabricated one is worse than none. */ .ld-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border: 1px solid var(--md-line); border-radius: 999px; background: var(--md-surface-bg); font-size: .8rem; color: var(--md-ink); white-space: nowrap; } .ld-card { border: 1px solid var(--md-line); border-radius: .75rem; background: var(--md-surface-bg); height: 100%; transition: box-shadow .18s ease, transform .18s ease; } .ld-card:hover { box-shadow: 0 6px 24px var(--md-shadow-lift); transform: translateY(-2px); } .ld-icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .5rem; background: var(--md-accent-soft-bg); color: var(--md-accent); margin-bottom: .75rem; } .ld-icon svg { width: 1.15rem; height: 1.15rem; } /* Numbered steps. The number is decorative, so it is drawn rather than typed into the markup as content a screen reader would read as a stray digit. */ .ld-step { position: relative; padding-left: 3rem; } .ld-step::before { content: counter(ld-steps); counter-increment: ld-steps; position: absolute; left: 0; top: -.1rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 999px; background: var(--md-accent-bg); color: var(--md-page); font-size: .85rem; font-weight: 600; } .ld-steps { counter-reset: ld-steps; } /* The mock panels. Drawn, not screenshotted — see the note at the top. */ .ld-mock { border: 1px solid var(--md-line); border-radius: .75rem; background: var(--md-surface-bg); box-shadow: 0 10px 34px var(--md-shadow); overflow: hidden; } .ld-mock-bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .75rem; background: var(--md-tint-bg); border-bottom: 1px solid var(--md-line); } .ld-mock-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--md-line); } .ld-mock-title { font-size: .75rem; color: var(--md-muted); margin-left: .35rem; } .ld-mock-body { padding: 1rem; } /* The fleet table's head shipped as .table-light, which by design stays light in a dark theme. It reads from the tokens instead. */ .ld-mock .table { --bs-table-bg: transparent; color: var(--md-ink); } .ld-mock .table > thead th { background: var(--md-tint); color: var(--md-muted); font-weight: 600; } .ld-mock .table > :not(caption) > * > * { border-bottom-color: var(--md-line); } .ld-kv { font-size: .8rem; } .ld-kv dt { color: var(--md-muted); font-weight: 400; } .ld-kv dd { color: var(--md-ink); margin-bottom: .55rem; } .ld-quiet { background: var(--md-tint-bg); border: 1px solid var(--md-line); border-radius: .75rem; } /* Bootstrap's accordion is already in the bundled JS, so the FAQ costs nothing extra; only the chrome is toned down to match the rest of the page. */ .landing .accordion { --bs-accordion-bg: var(--md-surface); --bs-accordion-color: var(--md-ink); --bs-accordion-btn-bg: var(--md-surface); --bs-accordion-btn-color: var(--md-ink); --bs-accordion-active-bg: var(--md-accent-soft); --bs-accordion-active-color: var(--md-accent); --bs-accordion-border-color: var(--md-line); } .landing .accordion-button { font-weight: 600; } .landing .accordion-button:focus { box-shadow: none; border-color: var(--md-line); } /* --------------------------------------------------------------------------- Imagery. Every file is served out of wwwroot/img — nothing is hot-linked to an outside host, because a remote URL can be changed or withdrawn by whoever owns it and the page would then be showing something nobody here approved. The licence and the author of each photograph are recorded in wwwroot/img/CREDITS.md, and the credit line at the foot of the page is a condition of those licences. The photographs are context, not evidence: they show the kind of plant these machines stand in, and they are captioned so that nobody reads them as a customer of ours. That is why none of them carries a legible name or a face. --------------------------------------------------------------------------- */ .ld-figure { margin: 0; } .ld-figure img { display: block; width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--md-line); background: var(--md-tint); } /* Wide bands crop to a letterbox so a tall photo cannot push a section apart. */ .ld-figure-band img { aspect-ratio: 21 / 8; object-fit: cover; } /* Photographs beside body copy sit at a calmer ratio than the full-width bands. */ .ld-figure-inset img { aspect-ratio: 4 / 3; object-fit: cover; } .ld-figure figcaption { font-size: .75rem; color: var(--md-muted); margin-top: .5rem; } /* The drawing sits on the page rather than in a frame — it has no edges of its own and a border would fence off empty space. It is the one image that cannot follow the theme by itself: an is a separate document and inherits nothing from this stylesheet. So there are two files and the theme picks one. The dark file is generated from the light one by a colour map — see CREDITS.md — and both have to be regenerated together if the drawing ever changes. */ .ld-figure-art img { border: 0; background: transparent; } .ld-art-dark { display: none; } [data-bs-theme="dark"] .ld-art-light { display: none; } [data-bs-theme="dark"] .ld-art-dark { display: block; } /* The photographs were shot and exposed for a white page. On a dark one they glare, so they are held back a little and brought up under the pointer — enough that they sit in the page rather than burning a hole in it. */ [data-bs-theme="dark"] .ld-figure img { filter: brightness(.86) contrast(1.03) saturate(.95); transition: filter .25s ease; } [data-bs-theme="dark"] .ld-figure img:hover { filter: none; } [data-bs-theme="dark"] .ld-figure-art img { filter: none; } .ld-credits { font-size: .7rem; color: var(--md-muted); } .ld-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .ld-credits a:hover { color: var(--md-accent); } @media (max-width: 575.98px) { .landing section + section { margin-top: 3rem; } /* A 21:8 letterbox is a slit on a phone; give the bands back some height. */ .ld-figure-band img { aspect-ratio: 16 / 9; } } /* Somebody who has asked for less motion should not get the hover lift on every card, nor the photographs brightening under the pointer. */ @media (prefers-reduced-motion: reduce) { .ld-card, [data-bs-theme="dark"] .ld-figure img { transition: none; } .ld-card:hover { transform: none; } }