/* The public face — the "Industry" blueprint look: a light paper ground, a single steel accent, Barlow Condensed over Barlow, and cards drawn as wireframe objects (square corners, hairline borders, "+" registration marks) rather than filled rounded blocks. Two pages load this one sheet: the holding notice at https://redwain.com/ (www/index.html, the .notice block near the foot of this file) and the full landing page parked at /landing/ while the product is not publicly available. Both are drawn from the same components, so promoting /landing/ back to the front door needs no CSS change. This sheet is loaded ALONE — neither page loads style.css — so the portal, admin SPA and legal pages keep their dark theme untouched and nothing here can collide with theirs. Rules still hang off body.landing-body, the same scoping idiom legal.css and admin.css use, so that stays true if the sheets are ever loaded together. No web fonts from a third party and no external assets of any kind: the faces below are served from our own origin. A privacy policy that states "no third-party trackers" must not itself make a third-party request. */ /* --- Type ----------------------------------------------------------------- */ /* Latin subsets only (the copy is English), the same files Google Fonts serves, licensed SIL OFL 1.1 — see fonts/OFL.txt. unicode-range keeps a browser from fetching them for text they cannot render anyway. */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-400.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: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-500.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: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-600.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: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-700.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; } /* --- Tokens --------------------------------------------------------------- */ /* Two palettes, one drawing. Light is the sheet as printed — paper ground, ink lines. Dark is the same sheet as an actual blueprint — dark ground, light lines, the steel accent lifted a few ramp steps so it still carries. Nothing past this block knows which one is on: every colour on the sheet goes through a token, so a theme is a swap of thirteen values and no rule below changes. Which one is on is settled in this order: 1. no data-theme on — auto, the default: prefers-color-scheme picks 2. data-theme="light|dark" — the visitor said so in the strip control, and the boot script in the page head puts it back before the first paint With no script only (1) can happen, which is the right thing to fall back to. color-scheme rides along so the browser's own furniture — scroll bars, form controls, the canvas behind a short page — is drawn on the same side. */ :root { color-scheme: light dark; --color-bg: #f2f2f3; --color-text: #1d1f20; --color-body: #424244; --color-accent: #5980a6; --color-accent-hover: #597ea3; /* one ramp step past the base, per the system */ --color-accent-deep: #416180; /* the accent at paragraph size needs a deep step */ --color-accent-darker: #2c455d; --color-accent-tint: rgba(89, 128, 166, 0.1); --color-accent-wash: rgba(89, 128, 166, 0.06); --color-selection: rgba(89, 128, 166, 0.3); --color-divider: rgba(29, 31, 32, 0.16); --color-muted: rgba(29, 31, 32, 0.55); /* The one place ground and ink swap round: text sitting ON the accent fill. In light it is the page ground, which is what those fills already used. */ --color-on-accent: #f2f2f3; --font-heading: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Barlow', system-ui, sans-serif; /* Density 0.85x — the scale the design system is drawn on. */ --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px; --space-10: 34px; --space-12: 40.8px; --space-16: 54.4px; --space-20: 68px; --page-max: 1240px; --page-pad: 40px; --radius: 4px; } /* An explicit choice has to pin the browser furniture too, or a page forced light on a dark machine gets dark scroll bars against a paper ground. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* The dark palette, written out twice. CSS has no way to say "this block, under either of these two conditions", and there are two: the machine asks for dark and the visitor has not overruled it, or the visitor asked for it outright. The two lists are the same thirteen values — change one, change the other. The -deep and -darker steps run the other way here. On a dark ground the accent has to climb to stay legible, so these are the LIGHT end of the same ramp, keeping the names every rule below already asks for. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #15171a; --color-text: #e9eaec; --color-body: #b0b4b9; --color-accent: #7ba5d0; --color-accent-hover: #8db2d9; --color-accent-deep: #9cc0e2; --color-accent-darker: #c3daef; --color-accent-tint: rgba(123, 165, 208, 0.16); --color-accent-wash: rgba(123, 165, 208, 0.09); --color-selection: rgba(123, 165, 208, 0.34); --color-divider: rgba(233, 234, 236, 0.2); --color-muted: rgba(233, 234, 236, 0.55); --color-on-accent: #10141a; } } :root[data-theme="dark"] { --color-bg: #15171a; --color-text: #e9eaec; --color-body: #b0b4b9; --color-accent: #7ba5d0; --color-accent-hover: #8db2d9; --color-accent-deep: #9cc0e2; --color-accent-darker: #c3daef; --color-accent-tint: rgba(123, 165, 208, 0.16); --color-accent-wash: rgba(123, 165, 208, 0.09); --color-selection: rgba(123, 165, 208, 0.34); --color-divider: rgba(233, 234, 236, 0.2); --color-muted: rgba(233, 234, 236, 0.55); --color-on-accent: #10141a; } /* --- Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body.landing-body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .landing-body a { color: var(--color-accent-deep); text-underline-offset: 3px; } .landing-body a:hover { color: var(--color-accent-darker); } .landing-body ::selection { background: var(--color-selection); } /* Themed focus, never the browser default — and never nothing. */ .landing-body :focus { outline: none; } .landing-body :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* :where() so this reset carries NO specificity: a bare `.landing-body h1` would score higher than the component classes below it and silently zero their margins. */ :where(.landing-body h1, .landing-body h2, .landing-body h3) { font-family: var(--font-heading); margin: 0; } :where(.landing-body p) { margin: 0; } /* --- Blueprint frame ------------------------------------------------------ */ /* Every card and figure is a line drawing wearing four "+" registration marks. Each mark is an empty child rather than a pseudo-element on the box, because one mark needs both of a box's pseudo-elements to draw its two strokes. */ .blueprint { position: relative; border: 1px solid var(--color-divider); } .blueprint > .corner { position: absolute; width: 11px; height: 11px; color: var(--color-muted); } .blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; } .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; } .blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; } .blueprint > .corner.tl { top: -6px; left: -6px; } .blueprint > .corner.tr { top: -6px; right: -6px; } .blueprint > .corner.bl { bottom: -6px; left: -6px; } .blueprint > .corner.br { bottom: -6px; right: -6px; } /* --- Shared bits ---------------------------------------------------------- */ .eyebrow, .figlabel { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .eyebrow { color: var(--color-accent-deep); } .figlabel { color: var(--color-muted); } .section { padding: var(--space-20) var(--page-pad); border-bottom: 1px solid var(--color-divider); } .section-inner { max-width: var(--page-max); margin: 0 auto; } .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-12); } .section-title { font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1; letter-spacing: -0.015em; } /* --- Buttons -------------------------------------------------------------- */ /* The solid accent primary is the one filled object on the board; everything else stays an outlined line drawing. */ .landing-body .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); padding: 7px 13px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .landing-body .btn-primary { background: var(--color-accent); color: var(--color-on-accent); } .landing-body .btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); } .landing-body .btn-outline { color: var(--color-text); border-color: var(--color-divider); } .landing-body .btn-outline:hover { background: var(--color-accent-tint); color: var(--color-text); } .landing-body .btn-lg { font-size: 17px; padding: 13.6px var(--space-8); } .landing-body .btn-block { width: 100%; font-size: 16px; padding: 12px var(--space-6); } /* --- Status strip + header ------------------------------------------------ */ .strip { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); /* The theme control is a fourth field on a line that already only just fits a narrow viewport; let it drop to a second row rather than overflow. */ flex-wrap: wrap; row-gap: var(--space-2); padding: 8px var(--page-pad); border-bottom: 1px solid var(--color-divider); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } /* Theme control. It sits on the status strip rather than in the header because it is a setting of the sheet, not a thing to do with the product, and up there it is drawn from the same tiny uppercase labels as its neighbours. Three states, not two. A switch cannot show "following the machine", which is the default and where most visitors will be, so the field names the state it is in — Auto, Light or Dark — and a click steps to the next one. It ships `hidden` and the script at the foot of the page takes that off: without the script it does nothing, and a dead control is worse than none. */ .landing-body .theme-toggle { display: inline-flex; align-items: stretch; /* Longhands, not the `font` shorthand: a browser's form-control defaults zero out text-transform and letter-spacing as well as the face, and the shorthand puts back neither. The field has to read as one of the strip's own labels. */ font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius); padding: 0; line-height: 1.2; /* after `font`, which would otherwise reset it */ cursor: pointer; } /* The display above outranks the browser's [hidden] rule, so restate it. */ .landing-body .theme-toggle[hidden] { display: none; } .landing-body .theme-toggle:hover { background: var(--color-accent-tint); } .theme-toggle-label, .theme-toggle-value { padding: 4px 8px; } .theme-toggle-value { border-left: 1px solid var(--color-divider); color: var(--color-text); /* Wide enough for the longest of the three words, so the strip does not jog as they cycle. */ min-width: 5.6em; text-align: center; } .nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--page-pad); border-bottom: 1px solid var(--color-divider); } .nav-brand { font-family: var(--font-heading); font-weight: 700; font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--color-text); } .landing-body .nav-brand:hover { color: var(--color-text); } .nav-links { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; } .landing-body .nav-links a { text-decoration: none; color: var(--color-text); } .landing-body .nav-links a:hover { color: var(--color-accent-deep); } .nav-actions { display: flex; align-items: center; gap: var(--space-4); } /* --- Hero ----------------------------------------------------------------- */ .hero { padding: 88px var(--page-pad) var(--space-20); border-bottom: 1px solid var(--color-divider); } .hero-grid { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-20); align-items: start; } .hero-eyebrow { margin-bottom: var(--space-6); } .hero-title { font-weight: 700; font-size: clamp(2.5rem, 7.5vw, 5.25rem); line-height: 0.96; letter-spacing: -0.02em; margin: 0 0 var(--space-8); text-wrap: balance; } .hero-lede { font-size: 19px; line-height: 1.5; max-width: 52ch; margin: 0 0 var(--space-8); color: var(--color-body); text-wrap: pretty; } .hero-ctas { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); } .hero-note { font-size: 11.5px; letter-spacing: 0.04em; color: var(--color-muted); } /* --- Parts list (the apps) ------------------------------------------------ */ .parts { padding: var(--space-8); } .parts-head { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); } .parts-list { display: grid; gap: var(--space-6); padding-top: var(--space-6); } .part { display: grid; grid-template-columns: 34px 1fr; gap: var(--space-4); align-items: start; } .part + .part { border-top: 1px solid var(--color-divider); padding-top: var(--space-6); } .part-num { font-size: 11px; color: var(--color-accent-deep); padding-top: 4px; } .part-name { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; font-family: var(--font-heading); font-weight: 600; font-size: 26px; line-height: 1.05; letter-spacing: -0.01em; } /* Each name is the way into that product's page. They stay ink-coloured like the headings they are, and pick up the accent and a rule on hover, so the parts list still reads as a drawing first and a menu second. */ .landing-body .part-name a { color: var(--color-text); text-decoration: none; } .landing-body .part-name a:hover, .landing-body .part-name a:focus-visible { color: var(--color-accent-deep); text-decoration: underline; } .part-desc { font-size: 14.5px; color: var(--color-body); margin-top: var(--space-1); } /* Availability marker — Chatja is built but not released, and listing it with no note makes a promise there is nothing to download for yet. */ .chip { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-deep); background: var(--color-accent-tint); border: 1px solid var(--color-divider); border-radius: var(--radius); padding: 1px 6px; white-space: nowrap; } /* --- Promises ------------------------------------------------------------- */ .promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } .promise { padding: var(--space-8) var(--space-6) var(--space-10); } .promise-code { font-size: 10.5px; letter-spacing: 0.14em; color: var(--color-accent-deep); margin-bottom: var(--space-4); } .promise h3 { font-weight: 600; font-size: 27px; line-height: 1.05; margin-bottom: var(--space-3); } .promise p { font-size: 14.5px; color: var(--color-body); text-wrap: pretty; } /* --- Pricing -------------------------------------------------------------- */ .pricing { padding-bottom: 95px; border-bottom: 0; } .pricing-head { align-items: flex-end; } /* Segmented control. The options are