/* CoreShift Digital's original Noira photograph, font faces and palette. Layout and business content belong to the main site. */ :root { color-scheme: dark; --bg: #2A2419; --text: #F6F2EA; /* --muted / --faint / --text-dim are defined at the foot of this file, with their measured contrast ratios. They used to be set to --text here, which gave the whole site one text colour; don't re-add them at this end. */ --accent: #B8863B; --surface: rgba(24,18,8,.34); --surface-2: rgba(24,18,8,.52); --line: rgba(246,242,234,.30); --display: 'Archivo Condensed', sans-serif; --font: 'IBM Plex Sans', sans-serif; } body { background: var(--bg); isolation: isolate; } .desert-plate { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #2A2419 image-set(url('/assets/desert/desert-dusk-wide.avif') type('image/avif'), url('/assets/desert/desert-dusk-wide.webp') type('image/webp')) 60% 50% / cover no-repeat; } .desert-plate::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(24,18,8,.16),transparent 22%,transparent 74%,rgba(24,18,8,.18)),linear-gradient(rgba(24,18,8,.62),rgba(24,18,8,.62)); } @media(max-aspect-ratio:1/1) { .desert-plate { background-image: image-set(url('/assets/desert/desert-dusk-tall.avif') type('image/avif'),url('/assets/desert/desert-dusk-tall.webp') type('image/webp')); background-position: 50% 40%; } } h1,h2,.tunnel-copy h1,.tunnel-scene h2,.closing h2,.editorial-copy h2,.demo-showcase h2 { font-family: var(--display); font-weight: 700; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; line-height: .96; } h1,.tunnel-copy h1 { font-size: clamp(2.75rem,4.6vw,4.5rem); max-width: 24ch; } h2,.tunnel-scene h2 { font-size: clamp(2rem,3.2vw,3rem); max-width: 30ch; } h3,.service-name h3,.work-grid article h3,.work-feature h3,.two-column h3,.industry-directory h3 { font-family: Archivo,sans-serif; font-stretch: 125%; font-weight: 600; letter-spacing: -.005em; font-size: clamp(1.25rem,1.8vw,1.5rem); line-height: 1.25; } .container { max-width: 1280px; padding-inline: clamp(1.25rem,4vw,3rem); } .section,.section:nth-child(2n+3),.tunnel-story,.tunnel-bottom, .tunnel-copy,.tunnel-scene,html:not(.tunnel-enhanced) .tunnel-copy, html.tunnel-enhanced .tunnel-copy { background: transparent; } .section.services,.section.workbench { background: transparent !important; } .section { padding-block: clamp(3.5rem,7vw,6rem); } .page-hero:after,.closing:after { display: none; } .page-hero .lede,.tunnel-copy .lede { max-width: 55ch; } .tunnel-copy h1 em { color: var(--text); } .eyebrow,.scene-number,.service-index,.workbench-step,.connection-flow span, .pricing-columns .price-caption,.workflow-steps h3:before,.process h3:before, .wt-k,.wt-channel { color: var(--text); } .eyebrow { font-family: 'IBM Plex Mono',monospace; font-weight: 500; font-size: .8rem; } .eyebrow:before { content: ''; display: inline-block; width: 1.5rem; height: 2px; background: var(--accent); margin-right: .65rem; vertical-align: middle; } .site-header { background: linear-gradient(rgba(24,18,8,.34),rgba(24,18,8,.34)),rgba(246,242,234,.19); border-color: var(--line); backdrop-filter: blur(22px) saturate(1.15); box-shadow: 0 24px 60px -12px rgba(30,22,10,.45); } .site-header .brand { letter-spacing: .015em; font-weight: 600; } .services-dropdown { background: #30281d; border-color: var(--line); } .services-dropdown a:hover { background: rgba(246,242,234,.13); } .button,.nav-button,.skip-link { background: var(--accent); color: #2A2419; } .button:hover,.nav-button:hover { background: #c99a50; color: #2A2419; } .quiet-button,.tunnel-copy .quiet-button { background: rgba(24,18,8,.22); color: var(--text); border-color: var(--line); } a:hover,.text-link:hover { color: var(--text); } .text-link:hover { border-color: var(--accent); } :is(a,button,summary,input,select,textarea):focus-visible { outline-color: var(--accent); } .service-portrait,.service-sample,.pricing-columns,.price-grid,.score-grid article, .two-column article,.connection-flow,.wt-stage,.wt-panel,.contact-aside,.calculator, .home-audit .container { background: rgba(24,18,8,.34); border: 1px solid var(--line); border-radius: 20px; backdrop-filter: blur(22px); box-shadow: 0 24px 60px -12px rgba(30,22,10,.25); } /* 2026-09-15 — the rule above turns these into cards (surface, border, 20px radius) but set NO inset, so text sat on the curve: .contact-aside measured 0/0/0/40 with its h2 clipped by the corner, and the rest 18/20 — under the radius, which is what makes a rounded box look like it is squeezing its content. Padding must clear the corner radius. .calculator (32px) and .home-audit .container (48px) already clear it and are deliberately excluded; .container's gutter is a page-layout decision. */ .service-portrait,.service-sample,.pricing-columns,.price-grid, .score-grid article,.two-column article,.connection-flow,.wt-stage,.wt-panel, .contact-aside { padding: clamp(1.5rem, 2.2vw, 1.75rem); } .service-portrait { padding: 1.2rem; } .service-portrait .service-sample { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; } .sample-tiles div,input,textarea,select,.wt-msg,.wt-msg.wt-bot { background: rgba(24,18,8,.34); color: var(--text); } input::placeholder,textarea::placeholder { color: rgba(246,242,234,.72); } select option { background: #2A2419; color: var(--text); } .home-audit { padding-top: 3rem; } .home-audit .container { width: calc(100% - 2.5rem); padding: clamp(1.4rem,4vw,3rem); max-width: 1184px; } .home-audit .score-grid { margin-bottom: 0; } .price-amount,.score { font-family: 'IBM Plex Mono',monospace; font-weight: 500; } .closing,.site-footer { background: linear-gradient(transparent,rgba(24,18,8,.52)); } .closing h2 { font-weight: 700; letter-spacing: -.005em; } .service-local-nav { margin-top: 1.75rem; } .site-footer h2 { font-family: 'IBM Plex Mono',monospace; font-size: .875rem; } .text-link { border-color: var(--line); } ::selection { background: var(--accent); color: #2A2419; } @media(min-width:1240px) { .site-header #navigation { gap: 1.15rem; } .site-header #navigation>a:not(.button),.site-header .services-menu>summary { font-size: .84rem; } .site-header .nav-button { font-size: .84rem; } } @media(max-width:1239px) { .site-header #navigation.is-open { background: #30281d; border-radius: 20px; } } @media(max-width:600px) { h1,.tunnel-copy h1 { font-size: clamp(2.65rem,10vw,3.4rem); } h2,.tunnel-scene h2 { font-size: 2.25rem; } .home-audit .container { width: calc(100% - 1.5rem); } } @media(prefers-reduced-transparency:reduce) { .site-header,.home-audit .container,.service-sample,.pricing-columns,.score-grid article { background: #2A2419; backdrop-filter: none; } } /* 2026-09-15 — Darrin: the opening line is the right size; the three service scenes under it were too small. They now use the SAME clamp as the hero h1, and their paragraph the same as the hero lede. Specificity, not load order, is what decides here: `.tunnel-story--text .tunnel-copy h1` in desert-overrides.css (three classes) already beats `h1,.tunnel-copy h1` in this file, so these matching rules have to carry the same three-class weight. The generic `h2` rule above still governs every other heading on the site — those do NOT grow. */ .tunnel-story--text .tunnel-scene h2 { font-size: clamp(4rem, 7.5vw, 7.2rem); max-width: none; line-height: .98; } .tunnel-story--text .tunnel-scene p { font-size: clamp(1.25rem, 1.7vw, 1.5rem); max-width: 54ch; } .tunnel-story--text .scene-number { font-size: .85rem; } @media (max-width: 1000px) { .tunnel-story--text .tunnel-scene h2 { font-size: 5rem; } } @media (max-width: 600px) { .tunnel-story--text .tunnel-scene h2 { font-size: clamp(2.6rem, 11vw, 3.4rem); } .tunnel-story--text .tunnel-scene p { font-size: 1.15rem; } } /* A 12-word heading needs ~700px of height at 1440 (108px type) but only ~545px at 1280 (96px), so the clip is a wide-and-short window, not a short one. Measured: 1440x900 fits, 1440x760 does not, 1280x800 does. The step-down is therefore scoped to >=1300 wide AND <=860 tall — everywhere else the scenes match the h1 exactly. */ @media (min-width: 1300px) and (max-height: 860px) { .tunnel-story--text .tunnel-scene h2 { font-size: clamp(3rem, 5.4vw, 5rem); } .tunnel-story--text .tunnel-scene p { font-size: 1.2rem; } } /* 2026-09-15 — photography. Card-top band and the flipped editorial spread. The thumbnail reuses the 700px WebP the phone already downloads, so a card costs no extra asset. A fixed aspect band keeps a grid even when the copy lengths differ. ⚠️ No negative side margins: desert-overrides gives .work-grid article `padding: 2rem 0` and the catalog cards `padding: 1.8rem 0` — zero horizontal padding — so pulling the image out by 1.5rem each side overflowed the page by 8px at 390. Measured, not assumed. */ .card-thumb { margin: 0 0 1.4rem; border-radius: var(--radius); overflow: hidden; } .card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; } .work-grid article, .catalog-grid article { overflow: hidden; } .catalog-grid--cards .card-thumb img { aspect-ratio: 3/2; } .editorial-spread--flip { direction: rtl; } .editorial-spread--flip > * { direction: ltr; } @media (max-width: 800px) { .editorial-spread--flip { direction: ltr; } } /* R3: inner spacing for homepage cards, records, controls and bordered links. The audit container retains its existing clamp. Decorative image borders and page-wide backgrounds use their existing content container inset. */ /* 2026-09-15 — raised from 20/18. The cards these feed carry a 20px corner radius, and an inset under the radius makes a rounded box look like it is squeezing its text: the curve eats the gap at exactly the corner your eye checks. Padding now clears the radius. */ .page-home { --panel-x: 28px; --panel-y: 24px; } .page-home :is(.service-portrait,.service-sample,.sample-approval, .service-sample dl>div,.workbench-record-head,.workbench-fields>div, .workbench-approval,.workbench-flow,.workbench-flow>li,.pricing-columns, .faq details,.text-link,.tunnel-track a,.service-name>a,#audit-findings article) { padding: var(--panel-y) var(--panel-x); } .page-home .service-list>article { padding-inline: var(--panel-x); min-width: 0; } .page-home .service-list>article>div { min-width: 0; } .page-home .process>li { padding: 24px var(--panel-x) var(--panel-y); } .page-home :is(.button,.quiet-button,#audit-domain):not(.nav-button) { padding-block: var(--panel-y); padding-inline: max(20px, var(--panel-x)); white-space: normal; } .page-home .service-sample dl>div { grid-template-columns: 1fr; gap: .3rem; } .page-home .workbench-record-head { flex-wrap: wrap; } .page-home .workbench-approval>div { flex-wrap: wrap; } .page-home .workbench-approval dd { text-align: left; } .page-home .workbench-fields>div { grid-template-columns: 1fr; gap: .3rem; } .page-home .workbench-fields dd { overflow-wrap: anywhere; } .page-home .faq summary { padding: 0 2rem 0 0; min-height: 28px; } .page-home .faq summary:after { top: -.25rem; } .page-home .faq details>div { padding-top: 18px; } @media (max-width: 900px) { .page-home .workbench-flow { grid-template-columns: 1fr; } .page-home .workbench-flow>li+li { border-left: 0; border-top: 1px solid var(--line); } .page-home .workbench-explain,.page-home .workbench-flow h3 { min-height: 0; } } @media (max-width: 600px) { .page-home { --panel-x: 20px; --panel-y: 20px; } /* Buttons keep the old 16px: they borrow this token only under 600px, and the panel inset above is now sized for cards, not for a pill. */ .page-home :is(.button,.quiet-button,#audit-domain):not(.nav-button) { padding: 16px; } .page-home .process>li { padding: var(--panel-y) var(--panel-x); } } /* R3: scale the existing clamps, scoped to the two requested headings. */ .services h2 { font-size: clamp(3rem,4.8vw,4.5rem); } .service-name h3 { font-size: clamp(2.125rem,3.06vw,2.55rem); max-width: none; } .service-index { font-size: 1rem; } @media (min-width: 601px) and (max-width: 900px) { .page-home .service-list>article { grid-template-columns: 1fr; } .page-home .service-list>article:nth-child(2) .service-name { order: 0; } .page-home .service-list>article:nth-child(2)>div:last-child { order: 0; } } /* R3: the website explanation accompanies the working audit. */ .audit-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(1.5rem,3vw,3rem); align-items: start; } .audit-layout>* { min-width: 0; } .audit-website-copy h3 { line-height: 1.35; } .audit-website-copy p { max-width: 40ch; } .home-audit .audit-entry { flex-wrap: wrap; } .home-audit .audit-entry input { flex-basis: 100%; margin-bottom: 0; } .home-audit .score-grid article { padding: var(--panel-y) var(--panel-x); min-width: 0; } .home-audit .score-grid h3 { font-size: 1rem; } .home-audit .score { font-size: clamp(1.5rem,2.8vw,2.6rem); white-space: nowrap; } .home-audit #audit-version { overflow-wrap: anywhere; } .page-home .service-list>article:first-child { grid-template-columns: 1fr; } .page-home .service-list>article:first-child .service-portrait { max-width: none; } .page-home .service-list>article:first-child .service-sample { max-width: none; } .page-home .sample-machines dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; } @media (max-width: 900px) { .audit-layout { grid-template-columns: 1fr; } } @media (max-width: 600px) { .page-home .sample-machines dl { grid-template-columns: 1fr; } .home-audit .score-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .page-industries-agriculture .editorial-section .editorial-spread { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────────────────────── Tonal hierarchy, control contrast and figure setting — added 2026-09-15. Three problems this fixes, all measured against the lightest ground on the site (--bg #2A2419), which is the worst case for contrast on a dark theme: 1. --muted, --faint and --text-dim were all set to --text, so every heading, paragraph, caption and note rendered the identical #F6F2EA at 13.78:1. 190 of 211 leaf text nodes were one colour; nothing could recede. 2. --line (2.54:1) draws every form input border and fails WCAG 1.4.11's 3:1 for non-text contrast. Decorative hairlines are exempt, so --line keeps its value and a separate --line-control is used for boundaries a person has to find and click. 3. The lead form's error message (#a33622, 2.28:1) and the audit widget's were the two lowest-contrast strings on the site — light-theme colours that survived onto the dark ground and were never re-authored. Ratios are computed, not estimated. Re-check any change to these against #2A2419 before shipping it. ───────────────────────────────────────────────────────────────────────── */ :root { --muted: #C3B9A6; /* body copy, descriptions 7.92:1 */ --faint: #968B76; /* captions, notes, field keys 4.58:1 */ --text-dim: #968B76; /* figcaptions (editorial-v1) 4.58:1 */ --line-control: rgba(246,242,234,.40); /* input + control borders 3.42:1 */ --flag: #E0785E; /* error, on this ground 5.14:1 */ --ok: #93B081; /* success, on this ground 6.42:1 */ } /* Control boundaries have to clear 3:1; decorative rules do not. */ input, textarea, select { border-color: var(--line-control); } .service-choices label { border-color: var(--line-control); } /* Re-authored status colours. */ #inquiry-status[data-state=error], #audit-status[data-state=error] { color: var(--flag); } #inquiry-status[data-state=success] { color: var(--ok); } /* Figures. These were set in IBM Plex Mono and then tracked in by -.055em, so the comma took a full monospace advance and pulled the digits into it: "$1,500" rendered as "$1 , 500" on /pricing and the homepage. Monospace is for reference numbers and field keys, never for money. */ .price-amount, .score, .price-grid .price, .calculator output { font-family: var(--display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; } /* A placeholder must not read as a filled value. */ input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; } /* ─── Architecture diagram and audit sample — restored 2026-09-15 ─────────────── The stack diagram is inline SVG drawn against the theme tokens, so it follows the palette instead of carrying the retired navy hexes it was originally authored in. It keeps a min-width and scrolls inside its own container rather than shrinking to illegibility on a phone — the one place the site allows horizontal scroll. */ .stack-diagram { background: rgba(24,18,8,.34); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.25rem, 2.5vw, 2.25rem); margin: 0 0 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .stack-diagram svg { width: 100%; height: auto; min-width: 720px; max-width: 900px; display: block; margin-inline: auto; } .stack-diagram .note { margin-top: 1.4rem; max-width: 62ch; } .audit-sample { background: rgba(24,18,8,.45); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.4rem; margin: 1.5rem 0 0; overflow-x: auto; } .audit-sample pre { margin: .7rem 0 0; font: 12.5px/1.75 'IBM Plex Mono', monospace; color: var(--muted); white-space: pre; } .audit-sample .workbench-small-label { color: var(--faint); } /* The restored walkthrough is six steps, not four — two columns still, but let the rows breathe now that each step carries real copy. */ .workflow-steps li p { max-width: 46ch; } @media (max-width: 800px) { .stack-diagram { padding: 1rem; } } /* Product screenshots in the showcase blocks — added 2026-09-15. These are light-themed application UIs sitting on a dark page, so they get a frame that reads as a window rather than as a hole: a hairline border, the page's card radius, and the caption in --faint so the disclosure does not compete with the copy beside it. */ .app-shot { margin: 0; } .app-shot picture, .app-shot img { display: block; width: 100%; height: auto; } .app-shot img { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(14,10,4,.7); } .app-shot figcaption { margin-top: .9rem; font-size: .8125rem; line-height: 1.5; color: var(--faint); max-width: 46ch; } /* ─── The Project Coordinator, presented as the flagship use case — 2026-09-15 ─────────── Darrin: "automation stays, present it well, thats our selling use case." It was one dense block of prose; it is now a sequence with its own rhythm, so the section reads as the worked example it is rather than as another feature list. */ .pc-feature .pc-rule { font-family: var(--display); font-stretch: 62%; text-transform: uppercase; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 700; letter-spacing: .01em; color: var(--text); margin: clamp(3rem, 5vw, 4.5rem) 0 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .pc-feature .pc-rule:first-of-type { margin-top: clamp(2.5rem, 4vw, 3.5rem); } /* The engagement's measured counts. Tabular figures so the row lines up, and the label under the number rather than beside it, so a long label cannot shove the digits around. */ .pc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 2rem 0 0; } .pc-stats > div { background: rgba(24,18,8,.34); padding: 1.4rem 1.5rem; } .pc-stats dt { font-family: var(--display); font-variant-numeric: tabular-nums lining-nums; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.03em; color: var(--text); } .pc-stats dd { margin: .5rem 0 0; font-size: .875rem; color: var(--faint); } .pc-stats-note { margin-top: 1rem; } .pc-feature .pc-sources article, .pc-feature .pc-artifacts article { padding-top: 1.5rem; } .pc-feature .pc-artifacts .eyebrow { font-family: 'IBM Plex Mono', monospace; letter-spacing: .08em; } .pc-sample { margin-top: 2rem; max-width: 640px; } .pc-status { margin-top: clamp(3rem, 5vw, 4.5rem); padding: clamp(1.6rem, 2.5vw, 2.2rem); background: rgba(24,18,8,.45); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 16px; } .pc-status p { max-width: 68ch; } .pc-status .workbench-small-label { color: var(--accent); } .pc-status .text-link, .pc-status .button { margin-top: .6rem; margin-right: 1.25rem; } @media (max-width: 700px) { .pc-stats { border-radius: 12px; } .pc-sample { max-width: none; } } /* Darrin 2026-09-17: the three service names belong on ONE line at the top. They wrapped because desert-overrides caps .tunnel-copy .eyebrow at 40ch and the string is 54. Cap lifted and the step reduced so it fits the 1280 container; it still wraps on a phone, where one line is not possible. */ .tunnel-story--text .tunnel-copy .eyebrow { max-width: none; font-size: .78rem; } @media (max-width: 900px) { .tunnel-story--text .tunnel-copy .eyebrow { font-size: .72rem; } } /* Two sources, not three — work-grid is a 3-up and left an empty column under them. */ .pc-feature .pc-sources { grid-template-columns: repeat(2, 1fr); max-width: 940px; } @media (max-width: 800px) { .pc-feature .pc-sources { grid-template-columns: 1fr; } } /* ─── /automation embedded walkthrough — 2026-09-17 ──────────────────────────────────── Darrin: "in automation - I want you to include a functioning walk through". Six scripted workflows behind a tablist; the player is automation-demo-v1.js. Nothing renders until the JSON parses, so .ad starts [hidden] and the script unhides it — a no-JS visitor gets the