:root { /* TYPEFACE, part 2 of 2. Three jobs, three faces. --font-page Georgia, and everything the page says is set in it. --font-ui Inter, kept for the banner links, the footer links, and the inside of the product demos, which show the product's own UI. --font-mark Source Serif 4, the two Miana wordmarks and nothing else. Georgia is on every machine, so only the other two come from the . */ --font-page: Georgia, "Times New Roman", Times, serif; --font-ui: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mark: "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* MIANA — the product's own skin: dark brown on cream, warm greys in between. Every value here is lifted from the Proposal Writer's html[data-theme="miana"] block, so the site and the app read as one thing. Neutrals are the warm stone ramp. */ --bg: #FAF8F4; --bg2: #F5F5F4; --ink: #2A211A; /* Text on this page is two colours and no others: white where it sits on a dark field, the dark brown --ink everywhere else (2026-09-20). --muted is the product's warm grey #78716C and every use of it here is a colour, so it is redefined rather than chased through eleven rules. */ --muted: #2A211A; --rail: #2A211A; --railtext: #D6D3D1; --primary: #2F1C0D; --bright: #452811; --tint: #F4EDE1; --white: #FFFDF9; --bb: #D6D3D1; --ok: #15803D; --line: #E7E5E4; /* The two washes: Split 1 behind the banner and the hero, Split 2 behind the closing call to action and the footer. Each one loads its artwork from split1.png / split2.png sitting next to this file; until those are dropped in, the band is simply empty — there is no painted substitute. Both rules live under "the washes" further down. */ --orange: #e7560a; /* The Features page's band colours for reasons 02 and 03 (2026-10-08). */ --why-blue: #9cc0da; --why-grey: #E7E5E4; /* The gap between one page of the site and the next, ratified 2026-09-21 from the one between the Book a demo button and "The best supplier doesn't win." — it is that pair's two paddings added together, so the number is unchanged where it was measured and every other boundary now matches it. Each side of a boundary carries half. Tightened by about an eighth on 2026-10-05, at the operator's request; every boundary still shares the one number. */ --page-gap: clamp(152px, 21vw, 330px); --navh: 80px; --zoom: .8; /* How much of the next page shows under the hero at the top of the site (ratified 2026-09-21). It is drawn at --zoom like everything else, so 1.25cm of CSS lands as about a centimetre on the screen. */ --hero-peek: 1.25cm; } /* vw/vh resolve against the window while everything else is drawn at --zoom, so a length meant to match the window has to be divided by it. */ body { zoom: var(--zoom); } /* Full width (2026-10-23): every section runs between the page gutters, with no centred 1400px column, so a wide window at 100% is laid out the way a narrower one (or 150% zoom) is. Type sizes follow the window; headlines and paragraphs keep their own caps; the product windows fill their column. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } #how, #different, #sectors, #faq { scroll-margin-top: 96px; } .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); } .reveal.in { opacity: 1; transform: none; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-page); line-height: 1.5; -webkit-font-smoothing: antialiased; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--primary); margin: 0 0 14px; } .h { font-family: var(--font-page); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: -.01em; line-height: 1.15; } .sec { padding: 64px 40px; } /* ---------- the washes ---------- */ .split { position: relative; } .split > * { position: relative; z-index: 1; } .split::before { content: ""; position: absolute; inset: 0; z-index: 0; } /* Each wash is its artwork and nothing else: img/split1.jpg and img/split2.jpg, named in the :root block at the foot of this file. */ .split-1::before { background: var(--split1-img) center top / cover no-repeat; } .split-2::before { background: var(--split2-img) center / cover no-repeat; } /* On the orange the type is the same dark brown as everywhere else; only the input keeps a cream field so it still reads as a field. */ .split-2, .split-2 .h { color: var(--ink); } .split-2 p, .split-2 .lbl, .split-2 a { color: var(--ink) !important; } .split-2 .input { background: rgba(255,253,249,.94) !important; border-color: rgba(42,33,26,.18) !important; color: var(--ink) !important; } .split-2 .input::placeholder { color: var(--ink); opacity: .45; } .split-2 .btn { background: var(--ink) !important; color: var(--white) !important; } /* ---------- the problem ---------- One block, set flush left on the page rail, so the two lines share a left edge instead of forming a diamond. */ #thesis { background: var(--white); padding: calc(var(--page-gap) / 2) 0; } /* Starts on the same vertical as .stmt-lead and .hero-title: the page gutter. The measure is set on the block, which carries the type size, so em counts these characters rather than the body's. */ .thesis-in { --gutter: clamp(24px, 4.4vw, 56px); text-align: left; font-size: clamp(42px, 4.3vw, 74px); max-width: calc(40.3ch + var(--gutter)); margin-left: var(--gutter); padding-right: var(--gutter); } .thesis-title { font-size: 1.5em; line-height: 1.2; color: var(--ink); margin: 0 0 .3em; } /* Under the claim, two columns: the problem on the left, Miana on the right (2026-09-21). They take the full width rather than the title's narrow measure, starting on the same left rail — so the claim, the columns, .stmt-lead and .hero-title all begin on one vertical. They are set at "AI bid writer, built to win."'s size — .stmt-lead is 1.05em of .stmt-wrap's clamp, so the same arithmetic is written out here rather than a number copied off a screenshot (2026-09-21). */ .thesis-cols { --gutter: clamp(24px, 4.4vw, 56px); display: flex; align-items: flex-start; gap: clamp(36px, 5vw, 96px); margin: clamp(40px, 4.6vw, 86px) 0 0; margin-left: var(--gutter); padding-right: var(--gutter); font-size: calc(1.05 * clamp(21px, 2.15vw, 37px)); line-height: 1.45; color: var(--ink); } .thesis-box { flex: 1 1 0; min-width: 0; } .thesis-box p { margin: 0 0 1.05em; } .thesis-box p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .thesis-cols { flex-direction: column; gap: 1.8em; max-width: none; margin-left: var(--gutter); padding-right: var(--gutter); } } /* ---------- the product itself ---------- Each window is the real Proposal Writer, running in a frame. It is laid out at desktop size and then scaled down to the width of the window, so what shows is the actual interface rather than a drawing of it. */ /* A window of its own shape, with the product cropped inside it — the frame is laid out at desktop size and transformed, so what shows is a real region of the real interface at a readable size rather than the whole screen shrunk. */ .pw-win { position: relative; width: 100%; aspect-ratio: 5 / 3; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 36px rgba(42,33,26,.10); } /* Display only (2026-10-06): the product in a window plays its loop and takes no clicks, hovers or scrolls; the wheel goes on scrolling this page. */ .pw-win iframe { position: absolute; top: 0; left: 0; width: 780px; height: 1500px; border: 0; transform-origin: 0 0; pointer-events: none; } /* A pointer drawn over the product, so a click in the demo reads as someone clicking (2026-10-05). It moves on left/top and presses on transform. */ .pw-cursor { position: absolute; z-index: 2; width: 22px; height: 22px; left: 88%; top: 86%; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 2px rgba(42,33,26,.35)); transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), opacity .3s, transform .12s; } .pw-cursor.on { opacity: 1; } .pw-cursor.press { transform: scale(.82); } /* demo.js draws a still frame instead of the walk-through. */ @media (prefers-reduced-motion: reduce) { .pw-cursor { display: none; } } .pw-cursor svg { display: block; width: 100%; height: 100%; } .works-title { font-family: var(--font-page); font-size: clamp(63px, 6.45vw, 111px); line-height: 1.28; color: var(--ink); margin: 0 0 clamp(30px, 3.4vw, 58px); } /* ---------- the features page ---------- The long version of the four reasons, in order. Each reason is a full-width band of its own colour (2026-10-08): 01 the page's cream, 02 a soft blue, 03 light grey, 04 the page's dark brown with white type. Inside, the title sits on the left with its number hanging as on the landing windows, the text on the right; the title follows the reader down its band and stops at the band's foot, so the current reason's title always holds the top left. */ #why-page { display: none; } /* Every landing section goes, the hero (which sets its own display) and the closing Get in touch band included; the banner and the footer stay, and the painted wash behind the lower half of the landing goes with them. */ body.on-why > section, body.on-why #start { display: none !important; } body.on-why #why-page { display: block; } body.on-why .split-2::before { display: none; } body.on-why .nav { background: var(--white); border-bottom-color: var(--line); } .why-in { padding: 0 clamp(24px, 4.4vw, 56px); } .why-top { padding-top: clamp(56px, 7vw, 120px); } .why-h { font-family: var(--font-page); font-weight: 500; letter-spacing: -.01em; line-height: 1.16; font-size: clamp(63px, 6.45vw, 111px); color: var(--ink); margin: 0 0 clamp(40px, 5vw, 88px); } .why-pt { --why-bg: var(--white); --why-ink: var(--ink); background: var(--why-bg); color: var(--why-ink); scroll-margin-top: var(--navh); } .why-pt:nth-of-type(2) { --why-bg: var(--why-blue); } .why-pt:nth-of-type(3) { --why-bg: var(--why-grey); } .why-pt:nth-of-type(4) { --why-bg: var(--ink); --why-ink: var(--white); } /* Titles and text 5px larger than the landing windows' (2026-10-08). */ .why-row { --why-t: clamp(33px, calc(3vw + 5px), 49px); --hang: calc(1.045 * var(--why-t)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 4.5vw, 76px); padding-top: clamp(56px, 7vw, 120px); padding-bottom: clamp(56px, 7vw, 120px); } .why-row .diff-t { font-size: var(--why-t); margin: 0; align-self: start; position: sticky; top: calc(var(--navh) + 32px); } /* The lower landing's own rule paints every paragraph and link brown, so the band's type colour is set as firmly. */ #why-page .why-pt .diff-t, #why-page .why-pt .diff-n, #why-page .why-pt p { color: var(--why-ink) !important; } .why-body p { font-family: var(--font-page); font-size: clamp(24px, calc(1.6vw + 5px), 31px); line-height: 1.6; margin: 0 0 1em; max-width: 52ch; } .why-body p:last-child { margin-bottom: 0; } /* The footer under the last band sits on the page's cream (2026-10-08). */ body.on-why footer { background: var(--white) !important; } /* Scrolled to the very bottom, only cream and the banner show (2026-10-08): the footer is at least a window tall less the banner, its contents resting at its foot. */ body.on-why footer { box-sizing: border-box; min-height: calc(100vh / var(--zoom) - var(--navh) + 24px); display: flex; flex-direction: column; justify-content: flex-end; } body.on-why footer > .wrap { width: 100%; } @media (max-width: 900px) { .why-row { grid-template-columns: minmax(0, 1fr); gap: 20px; } .why-row .diff-t { position: static; } } /* ---------- the four steps ---------- Two columns under the title (2026-10-06, replaces the drawn step figure and the two product rows). On the left, the four steps as one dense list, set like the reasons in "What makes Miana different?": a small raised number, then the line. Each panel carries its step's line as a title, with one sentence under it, over its window. It stays put while the right column scrolls past one panel per step, and the step whose panel is in view turns the page's brown while the others wait in a warm grey. The list starts on the hero headline's vertical. */ .how-grid { --how-off: rgba(42,33,26,.26); display: grid; grid-template-columns: minmax(0, 33%) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 76px); align-items: start; /* Under the title: its own margin plus half as much again (#works-head's bottom padding), the rule, then this (2026-10-07: the rule moved down, the steps stayed). List and panels both sit in this grid, so they move together. */ margin-top: calc(1.1 * clamp(30px, 3.4vw, 58px)); } .how-steps { position: sticky; top: calc(var(--navh) + 48px); margin: 0; padding: 0; list-style: none; } .how-step { font-family: var(--font-page); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; font-size: clamp(24px, 2.3vw, 36px); color: var(--how-off); cursor: pointer; padding: .45em 0; transition: color .3s ease; } /* The first step and the first panel share a top edge. */ .how-step:first-child { padding-top: 0; } .how-step.on { color: var(--ink); } .how-step:hover { color: var(--ink); } /* The same number as .diff-n (2026-10-06: the number alone, no "Step"). */ .how-n { display: inline-block; margin-right: .7em; font-size: .55em; font-weight: 700; letter-spacing: .06em; vertical-align: .566em; } .how-panel { min-height: calc(78vh / var(--zoom)); display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: clamp(24px, 3vw, 48px) 0; } .how-panel:first-child { padding-top: 0; justify-content: flex-start; } /* Every step's window is the same shape: the one "Miana writes the bid" had (2026-10-06). The crops inside are worked out from the window, not the other way round. */ .how-panel .pw-win { width: 100%; aspect-ratio: 19 / 10; } .how-copy { width: 100%; margin: 0 0 clamp(18px, 2vw, 28px); } .how-copy .h { font-size: clamp(28px, 3vw, 44px); margin: 0 0 12px; } .how-copy p { font-family: var(--font-page); font-size: clamp(17px, 1.35vw, 23px); color: var(--muted); line-height: 1.6; margin: 0; } /* Too narrow for two columns: the list sits above the panels and stops following the scroll. */ @media (max-width: 900px) { .how-grid { grid-template-columns: minmax(0, 1fr); } .how-steps { position: static; } .how-panel { min-height: 0; } } /* ---------- second statement ---------- Two columns. The left one starts on the same vertical as the hero headline — the padding below is the same gutter .hero-in sits on. The right one ends on the banner's own 56px gutter, level with Book a demo up in the bar. Between them a ten-character gap, measured in ch of this very type, so a longer left-hand line pushes the right column over instead of crowding it. */ #statement { padding: clamp(80px, 11vw, 170px) 0 calc(var(--page-gap) / 2); } .stmt-wrap { --gutter: clamp(24px, 4.4vw, 56px); font-family: var(--font-page); font-size: clamp(21px, 2.15vw, 37px); display: flex; align-items: flex-start; gap: 10ch; padding-left: var(--gutter); padding-right: 56px; } /* The line arrives orange and settles into the page's brown one character at a time, driven by how far it has travelled up the window rather than by a timer, so it follows the scroll in both directions. */ .stmt-lead { flex: 0 0 auto; white-space: nowrap; color: var(--orange); font-size: 1.05em; line-height: 1.25; margin: 0; } /* Each character waits its turn. visibility, not display or opacity, so the whole line is laid out from the start and nothing reflows as it arrives — which for a heading that wraps would be the whole effect ruined. */ .stmt-ch { visibility: hidden; transition: color .2s ease; } .stmt-ch.on { visibility: visible; } .stmt-ch.set { color: var(--ink); } /* Both lines type themselves out; only the lead arrives orange, the orange running a few characters ahead of the brown like a cursor (2026-09-21). The thesis title types out in the page's brown from the first character. "How Miana works" and "What makes Miana different?" are on neither. */ .thesis-title, .diff-h { color: var(--ink); } /* "That's why we built Miana." arrives the way the lead does, orange running a few characters ahead of the brown (2026-10-06). */ .thesis-why { color: var(--orange); } .stmt-in { flex: 1 1 0; min-width: 0; } .stmt-text { color: var(--ink); font-size: 1em; line-height: 1.5; margin: 0 0 .7em; } /* The paperwork claim and the one below it traded sizes 2026-09-19. */ /* Sized so the opening line holds one row in the column it has. */ .stmt-big { font-size: clamp(22px, 2.4vw, 43px); line-height: 1.32; margin-bottom: .45em; } .nobreak { white-space: nowrap; } .stmt-text:last-of-type { margin-bottom: 0; } .stmt-cta { display: inline-block; margin-top: clamp(28px, 3vw, 48px); background: var(--ink); color: var(--white); text-decoration: none; font-family: var(--font-ui); font-weight: 600; font-size: 18px; border-radius: 7px; padding: 16px 26px; transition: background .15s; } .stmt-cta:hover { background: var(--bright); } /* Too narrow for two columns, so they stack in the page gutter. */ @media (max-width: 900px) { .stmt-wrap { flex-direction: column; gap: 1.2em; padding-left: var(--gutter); padding-right: var(--gutter); } .stmt-lead { white-space: normal; } } /* ---------- hero ---------- */ /* The hero pulls up under the sticky banner so its wash runs behind it. --navh is measured from the real banner on load and on resize, so the overlap stays exact at any browser zoom. */ /* Top-anchored rather than centred, so the drop below the banner is a number we set rather than a by-product of how tall the section happens to be. The clamp keeps that drop proportional to the window without letting it collapse on a short screen or run away on a tall one. */ /* The hero is the fold less --hero-peek, so a band of the next page always shows at the top of the site (2026-09-21). That replaces sizing the hero to the picture's own proportions: the artwork now covers the box anchored at its top and is cropped at the bottom, which is what the operator asked for. Because the headline is set a share of the WIDTH up from the hero's foot, it rises by exactly what the crop took, carrying the rest of the page with it. */ #hero-section { margin-top: calc(-1 * var(--navh)); padding: calc(var(--navh) + 40px) clamp(24px, 4.4vw, 56px) 19%; height: calc(100vh / var(--zoom) - var(--hero-peek)); min-height: 520px; display: flex; align-items: flex-end; } /* Below 900px the copy needs more height than the fold allows. */ @media (max-width: 900px) { #hero-section { height: auto; min-height: clamp(580px, 88vh, 1000px); } } .hero-in { width: 100%; } .hero-title { font-size: clamp(40px, 5.6vw, 104px); max-width: 24ch; } /* The Swedish headline only (2026-10-21): 15% underneath rather than 19%, so it sits lower, and a touch larger where there is room. No word runs past where the banner's FAQ link starts: --hero-max is measured from it on load and resize, so the line breaks before it in either language, and where even the first line ("Win more with Miana,") would not fit, or the whole would take more than three lines, the type steps down until it does. */ html[lang="sv"] #hero-section { padding-bottom: 15%; } html[lang="sv"] .hero-title { font-size: clamp(42px, 5.6vw, 82px); max-width: min(30ch, var(--hero-max, 30ch)); } .two { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; } .col { flex: 1 1 320px; min-width: 0; } .tile { width: 46px; height: 46px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tile svg { width: 20px; height: 20px; } .btn { border: none; cursor: pointer; font-family: var(--font-ui); font-weight: 600; border-radius: 7px; padding: 15px 20px; font-size: 15px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s; } .btn:hover { filter: brightness(.94); } .input { width: 100%; border-radius: 7px; padding: 15px 16px; font-size: 13px; letter-spacing: .04em; font-family: var(--font-mono); } .lbl { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; } .contact-status { margin: 12px 0 0; min-height: 1.6em; font-size: 15px; color: var(--ink); } .btn:disabled { opacity: .6; cursor: default; } .feat { display: flex; gap: 14px; margin-top: 24px; } /* step 3: the draft writes itself */ .ma-doc { position: absolute; inset: 16px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 5px; padding: 11px 13px; } .ma-bar { display: block; height: 5px; border-radius: 3px; background: var(--primary); opacity: .8; margin-bottom: 8px; width: 0; animation-duration: 3.6s; animation-iteration-count: infinite; } .ma-bar.b1 { animation-name: maB1; } .ma-bar.b2 { animation-name: maB2; } .ma-bar.b3 { animation-name: maB3; } @keyframes maB1 { 0% { width: 0; opacity: .8; } 18% { width: 94%; } 86% { width: 94%; opacity: .8; } 94% { opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes maB2 { 0%, 18% { width: 0; opacity: .8; } 36% { width: 72%; } 86% { width: 72%; opacity: .8; } 94% { opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes maB3 { 0%, 36% { width: 0; opacity: .8; } 54% { width: 84%; } 86% { width: 84%; opacity: .8; } 94% { opacity: 0; } 100% { width: 0; opacity: 0; } } /* One dark band, with the heading sitting straight on it and the windows tiling the full width beneath. The windows touch on every shared edge and run to both edges of the page at any zoom, because the section carries no side padding and the row no max-width — only the heading is inset. */ /* No padding underneath (2026-10-21): the industries' brown starts where the cream window 02 ends, and window 04, which sits 8% lower, overlaps it. */ #different-section { padding: calc(var(--page-gap) / 2) 0 0; } .diff-wrap { position: relative; z-index: 1; } .diff-h { --gutter: clamp(24px, 4.4vw, 56px); font-family: var(--font-page); font-weight: 500; letter-spacing: -.01em; line-height: 1.16; font-size: clamp(63px, 6.45vw, 111px); margin: 0 0 clamp(52px, 6vw, 104px); margin-left: var(--gutter); padding-right: var(--gutter); /* Ends short of window 01's right edge, the middle of the page (2026-10-21). */ max-width: calc(50% - var(--gutter)); } @media (max-width: 900px) { .diff-h { max-width: none; } } .diff-wrap { display: flex; align-items: flex-start; gap: 0; } .diff-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } /* The right column sits lower; 8% of the row's width (2026-10-07, was 12%). */ .diff-col-lower { margin-top: 8%; } /* --pad-y was already a quarter deeper than the windows first carried. The second quarter (2026-09-20) all goes underneath the copy: doubling the bottom is almost exactly 25% of the window, because one helping of --pad-y is what a quarter of the height works out to. */ /* Twice the height the windows had (2026-10-05), to leave room for more copy: they were about half as tall as wide, so now they are about square, and still grow past that if the copy runs longer. Copy and LEARN MORE sit at the top together, so added copy pushes the button down into the room. */ .diff-cell { --pad-y: clamp(53px, 6.1vw, 108px); background: var(--cell); border-radius: 0; padding: var(--pad-y) clamp(24px, 2.7vw, 46px); aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; align-items: flex-start; color: var(--cell-ink); transition: background .18s ease, color .18s ease; } /* Set like the banner's Book a demo: Inter, 14px, 600. Drawn as an outline in the window's own type colour, so it reads on all four shades and on the orange hover. */ .diff-more { margin-top: 0; padding: 9px 16px; border: 1px solid currentColor; border-radius: 7px; background: transparent; color: var(--cell-ink); text-decoration: none; font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: .04em; transition: background .15s, color .15s; } .diff-more:hover { background: var(--cell-ink); color: var(--cell); } /* The four windows' fields: 01 the Book a demo hover brown, 02 the cream tint, 03 the page's dark brown, 04 the page's own background (02 and 04 traded fields 2026-09-21; 01 and 04 traded and traded back 2026-10-06/07). Each window also names the one colour its type takes: white on the two dark shades, the page's brown on the two light ones, and nothing else. */ .diff-col .diff-cell:nth-child(1) { --cell: var(--bright); --cell-ink: var(--white); } .diff-col .diff-cell:nth-child(2) { --cell: var(--tint); --cell-ink: var(--ink); } .diff-col-lower .diff-cell:nth-child(1) { --cell: var(--ink); --cell-ink: var(--white); } .diff-col-lower .diff-cell:nth-child(2) { --cell: var(--white); --cell-ink: var(--ink); } /* Pointer on a window and it lights up, the type going brown to read on orange. Two classes deep, because the shade rules are, and an equally weighted rule declared later is what wins. */ .diff-wrap .diff-cell:hover { --cell: var(--orange); --cell-ink: var(--ink); } /* Smaller than the title it sits in front of, and lifted so the two share a cap line rather than a baseline. Both are Georgia, so the raise is exactly the cap height times the size difference — .692 * (1 - .55) / .55 of the number's own em — and `vertical-align` resolves em against the number, not the title. */ .diff-n { display: inline-block; width: 1.9em; text-indent: 0; font-size: .55em; font-weight: 400; letter-spacing: .06em; vertical-align: .566em; } /* The number hangs in the margin (2026-10-06): the title, the copy under it and LEARN MORE all start on one vertical, where the title's words begin. --hang is the number's slot, 1.9 of its own em at .55 of the title's. */ /* Reason titles match "Then send it with confidence"; the copy below them takes the size the titles used to have. */ .diff-cell { --hang: calc(1.045 * clamp(28px, 3vw, 44px)); } .diff-t { font-family: var(--font-page); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; font-size: clamp(28px, 3vw, 44px); margin: 0 0 48px; padding-left: var(--hang); text-indent: calc(-1 * var(--hang)); } .diff-more { margin-left: var(--hang); } /* LEARN MORE follows the copy, a little further below it than the copy sits below the title (2026-10-07). */ .diff-p { font-size: clamp(21px, 1.95vw, 31px); line-height: 1.65; margin: 0 0 60px var(--hang); max-width: 46ch; } @media (max-width: 900px) { .diff-wrap { flex-direction: column; } .diff-col-lower { margin-top: 0; } .diff-cell { aspect-ratio: auto; min-height: 100vw; } } /* ---------- banner ---------- */ /* Over the hero artwork the banner is see-through and stays that way — hovering it no longer summons a pane of glass, which was the only thing that could leave it looking white once you had scrolled back to the top. (To bring that back: .nav:hover, .nav:focus-within { background: rgba(255,253,249,.88); backdrop-filter: blur(10px); border-bottom-color: var(--line); }) */ .nav { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background .22s, border-color .22s, backdrop-filter .22s; } /* Past the hero it is a solid bar, not glass — nothing behind it is worth showing through, and a tint that shifts with the section underneath reads as an accident. */ .nav.nav-solid, .nav.nav-solid:hover { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--line); } /* Over the industries' brown it turns brown too, from the moment it reaches the foot of window 04 until the page beneath is light again, with white type and a white Get in touch (2026-10-21). */ .nav.nav-dark, .nav.nav-dark:hover { background: var(--ink); border-bottom-color: var(--ink); } .nav.nav-dark .nav-logo, .nav.nav-dark .nav-links a, .nav.nav-dark .nav-login, .nav.nav-dark .nav-lang-btn { color: var(--white); } .nav.nav-dark .nav-lang-btn:hover, .nav.nav-dark .nav-lang.open .nav-lang-btn { background: rgba(255,253,249,.12); } .nav.nav-dark .flag { box-shadow: none; } .nav.nav-dark .nav-cta { background: var(--white); color: var(--ink); } .nav.nav-dark .nav-cta:hover { background: var(--tint); } .nav-in { display: flex; align-items: center; gap: 30px; padding: 14px 56px; } /* The mark is set, not placed — the same Source Serif 4 as the footer wordmark. */ .nav-logo { font-family: var(--font-mark); font-weight: 600; font-size: 26px; color: var(--ink); text-decoration: none; letter-spacing: -.01em; line-height: 1; } /* The banner and the footer keep Inter; everything between them is Georgia. */ .nav-links, .nav-right { font-family: var(--font-ui); } .nav-links { display: flex; gap: 42px; margin: 0 auto; } .nav-links a { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; transition: opacity .15s; } .nav-links a:hover { opacity: .6; } .nav-right { display: flex; align-items: center; gap: 18px; } /* The language switch (2026-10-21): the flag of the language showing, and a small menu under it with each language by its own flag and name, the one showing ticked. Inter, like the rest of the banner; the menu is always the light panel, over the brown banner too. */ .nav-lang { position: relative; } .nav-lang-btn { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; transition: background .15s; } .nav-lang-btn:hover, .nav-lang.open .nav-lang-btn { background: var(--bg2); } .nav-lang-btn:focus-visible, .nav-lang-menu a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .flag { display: block; flex-shrink: 0; width: 21px; height: 15px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(42,33,26,.14); } .flag svg { display: block; width: 100%; height: 100%; } .nav-lang-chev { width: 14px; height: 14px; opacity: .6; transition: transform .2s; } .nav-lang.open .nav-lang-chev { transform: rotate(180deg); } .nav-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; min-width: 176px; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(42,33,26,.14), 0 2px 6px rgba(42,33,26,.06); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s, transform .16s, visibility .16s; } .nav-lang.open .nav-lang-menu { opacity: 1; visibility: visible; transform: none; } .nav-lang-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; } .nav-lang-menu a:hover { background: var(--bg2); } .nav-lang-check { width: 16px; height: 16px; margin-left: auto; color: var(--primary); visibility: hidden; } .nav-lang-menu a.on .nav-lang-check { visibility: visible; } .nav-login { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; transition: opacity .15s; } .nav-login:hover { opacity: .6; } .nav-cta { background: var(--ink); color: var(--white); text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 7px; padding: 9px 16px; transition: background .15s; } .nav-cta:hover { background: var(--bright); } @media (max-width: 720px){ .nav-links { display: none; } } /* On a phone the banner holds the mark, the language switch, Log in and the button on one line, in either language (2026-10-21). */ .nav-login, .nav-cta { white-space: nowrap; } @media (max-width: 520px){ .nav-in { padding: 14px clamp(16px, 4vw, 24px); gap: 12px; } .nav-right { gap: 10px; margin-left: auto; } } /* animation-only palette: teal steps to dark, bright accent steps to teal */ /* Qualify: the requirement rows and their status chips, carrying the product's own five statuses rather than a simplified set. */ /* The evidence dialog, and the one button in it that was renamed in v1. */ /* clarify chat (animation 1) */ /* comparable bids as portrait cards (animation 1) */ /* FAQ accordion */ .faq-list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item:first-child { border-top: 1px solid var(--line); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; cursor: pointer; font-family: var(--font-page); font-size: var(--faq-q); line-height: 1.3; font-weight: 500; color: var(--ink); list-style: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q:hover { color: var(--primary); } .faq-chev { flex-shrink: 0; width: 18px; height: 18px; color: var(--primary); transition: transform .25s; } .faq-item[open] .faq-chev { transform: rotate(180deg); } .faq-a { padding: 0 2px 24px; color: var(--muted); font-size: 18px; line-height: 1.7; } /* The FAQ (2026-10-08): the list takes the right half of the page, so the answers run wide. Questions are set a little under the industry names' size, the answers 18px, the line under the title at the industry descriptions'. */ /* A grid (2026-10-08): the title sits above, alone; the line under it shares a row with the list, set down so it reads on the same line as the first question (the item's 1px rule and 22px padding, then half the difference between the two line heights). */ /* Questions a little under the industry names' size (2026-10-08). */ .faq-wrap { --faq-q: calc(.88 * clamp(21px, 2.15vw, 37px)); max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) calc(50vw / var(--zoom) - 56px); column-gap: 56px; align-items: start; } .faq-side { display: contents; } .faq-h { grid-column: 1; grid-row: 1; } .faq-sub { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0; padding-top: calc(23px + (1.3 * var(--faq-q) - 1.6 * 17px) / 2); } .faq-main { grid-column: 2; grid-row: 2; } @media (max-width: 900px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); } .faq-sub { padding-top: 0; } .faq-main { grid-column: 1; grid-row: 3; margin-top: 28px; } } .faq-a p { margin: 0 0 .8em; } .faq-a p:last-child { margin-bottom: 0; } /* industry carousel */ /* A dark brown page of its own after "What makes Miana different?" (2026-10-21). On the left, in white: the title and the line under it. On the right: the industries, one white window with a sliver of the next, out to the page's right edge, the window's top level with the title's. The arrows sit above the windows at the top right. The section is pulled up under window 04 (the 8% .diff-col-lower drops), so its top padding carries that 8% back; the title sits well over twice as far below window 04 as it first did. It starts on the same vertical as .diff-h and stops short of window 04's left edge, the middle of the page. */ #sectors { --gutter: clamp(24px, 4.4vw, 56px); --card: clamp(450px, 45vw, 780px); --peek: clamp(60px, 6vw, 110px); --title-size: clamp(63px, 6.45vw, 111px); --title-gap: clamp(48px, 5vw, 88px); --nav-row: calc(44px + clamp(20px, 2vw, 32px)); --top: calc(8% + var(--page-gap) * .9 - var(--nav-row)); --left: var(--gutter); --half: calc(50vw / var(--zoom) - var(--left) - clamp(24px, 2.5vw, 48px)); position: relative; background: var(--ink); margin-top: -8%; padding: var(--top) 0 calc(var(--page-gap) / 2) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--card) + 22px + var(--peek)); /* The last row takes whatever height the window has beyond the title and the line. */ grid-template-rows: auto auto auto 1fr; column-gap: clamp(36px, 5vw, 96px); align-items: start; } .indus-head { display: contents; } .indus-head .h { grid-column: 1; grid-row: 2; } .indus-head .isub { grid-column: 1; grid-row: 3; } .indus-scroll { grid-column: 2; grid-row: 2 / -1; } .indus-head .h, .faq-h { font-size: clamp(36px, 4vw, 58px); line-height: 1.16; color: var(--ink); margin: 0 0 clamp(20px, 2.2vw, 36px); } .indus-head .h { font-size: var(--title-size); color: var(--white); margin-bottom: var(--title-gap); max-width: var(--half); } .indus-head .isub { color: var(--white); font-size: calc(1.05 * clamp(21px, 2.15vw, 37px)); line-height: 1.45; margin: 0; max-width: var(--half); } .indus-nav { grid-column: 2; grid-row: 1; justify-self: end; display: flex; gap: 10px; margin: 0 var(--gutter) clamp(20px, 2vw, 32px) 0; } .indus-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; } .indus-arrow:hover { background: var(--tint); } .indus-arrow:disabled { opacity: .3; cursor: default; } .indus-arrow svg { width: 20px; height: 20px; } .indus-scroll { container-type: inline-size; overflow-x: auto; overflow-y: hidden; scroll-behavior: auto; -webkit-overflow-scrolling: touch; cursor: grab; scrollbar-width: none; touch-action: pan-x; user-select: none; -webkit-user-select: none; } .indus-card { cursor: pointer; } .indus-scroll::-webkit-scrollbar { display: none; } .indus-scroll.dragging { cursor: grabbing; } /* Room after the last window so it too can scroll to the row's left edge, where every other window sits when lit (2026-10-21). */ .indus-track { display: flex; gap: 22px; width: max-content; align-items: flex-start; padding-right: calc(100cqw - var(--card)); } /* Each industry is a white window: its picture, portrait, with the name and description underneath in the page's brown. The lit one sits at the row's left edge; the next waits to its right, smaller and dimmed. Half as big again as before (2026-10-21). The picture runs to the window's edges and the white is only under it, behind the text (2026-10-21). */ .indus-card { flex: 0 0 var(--card); border-radius: 14px; overflow: hidden; transform: scale(.84); opacity: .5; transform-origin: left center; transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s; } .indus-card.active { transform: scale(1); opacity: 1; } /* The pictures are drop-in slots like the washes: save industry1.png to industry7.png next to this file (any usual extension) and they are picked up on load, in the order the industries run. Until then the frame is empty. */ .indus-card .pic { aspect-ratio: 8 / 7; background: var(--pic, none) center / cover no-repeat, var(--bg2); } .indus-card .iname { font-family: var(--font-page); font-size: calc(1.05 * clamp(21px, 2.15vw, 37px)); line-height: 1.25; font-weight: 500; color: var(--ink); margin: 18px 0 8px; } .indus-card .idesc { color: var(--ink); font-size: 17px; line-height: 1.6; margin: 0; } .indus-card .itext { background: var(--white); padding: clamp(4px, .6vw, 10px) clamp(24px, 2.2vw, 38px) clamp(30px, 2.8vw, 48px); } @media (max-width: 900px) { #sectors { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-right: 0; margin-top: 0; --top: calc(var(--page-gap) / 2); --half: none; grid-template-rows: none; } .indus-head .h, .indus-head .isub { padding-right: var(--gutter); } .indus-head .h { grid-row: 1; margin-bottom: 0; } .indus-head .isub { grid-row: 2; } .indus-scroll { grid-column: 1; grid-row: 3; } .indus-nav { grid-column: 1; grid-row: 4; margin: 0 var(--gutter) 0 0; } #sectors { --card: 74vw; } } /* Artwork, at fixed names under img/. */ :root { --split1-img: url("img/split1.jpg"); --split2-img: url("img/split2.jpg"); --industry1-img: url("img/industry1.jpg"); --industry2-img: url("img/industry2.jpg"); --industry3-img: url("img/industry3.jpg"); --industry4-img: url("img/industry4.jpg"); --industry5-img: url("img/industry5.jpg"); --industry6-img: url("img/industry6.jpg"); --industry7-img: url("img/industry7.jpg"); }