/* ========================================================================= Omnidara - PUBLIC MARKETING PAGES ONLY (entry 62). THIS FILE CANNOT REACH THE AUTHENTICATED APP, BY CONSTRUCTION. It is loaded only by fragments/marketing.html, it is layered AFTER app.css, and every selector below is scoped under `.mk`, a class set only on the marketing shell's . That scoping is load-bearing rather than tidy: `.plan-card`, `.plan-grid`, `.plan-price`, `.plan-features` and `.toggle-wrap` are ALSO used by app/billing.html, app/billing-confirm.html and app/billing-plan-change.html. Restyling them globally would have silently redesigned the billing screens from a session scoped to the marketing pages. app.css is not touched at all. Dials for this pass: DESIGN_VARIANCE 6, MOTION_INTENSITY 2, VISUAL_DENSITY 5. MOTION 2 is a product decision, not a taste one: people read these pages while they are anxious about whether their inventory synced. Nothing moves on its own here - there are no keyframes and no load-in animation in this file. Motion is confined to hover, active and focus, and is removed entirely under prefers-reduced-motion. ========================================================================= */ .mk { /* One accent for the whole page: the teal already in app.css. No second hue. */ --mk-band: #101c18; /* the single dark region: closing CTA + footer */ --mk-band-soft: #1b2c26; --mk-on-band: #e8efeb; --mk-on-band-mute: #9fb3ab; --mk-accent-on-band: #6fceb2; --mk-rule: #ded8cb; --mk-rule-soft: #e9e4d9; /* Type scale. Display sizes are deliberately below the "hero screams" range; hierarchy is carried by weight, colour and space (see the skill's NO-Oversized-H1 rule) rather than by scale alone. */ --mk-display: clamp(2.35rem, 1.55rem + 3.2vw, 3.75rem); --mk-h2: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); --mk-h3: clamp(1.08rem, 1rem + .35vw, 1.24rem); --mk-lead: clamp(1.06rem, 1rem + .45vw, 1.24rem); --mk-gap: clamp(2rem, 1rem + 3vw, 3.5rem); --mk-section: clamp(3.5rem, 2rem + 5vw, 6rem); } /* ---------- Base rhythm ---------- */ .mk main { display: block; } .mk .section { padding: var(--mk-section) 0; } .mk .section-tight { padding: calc(var(--mk-section) * .55) 0; } .mk h1, .mk h2, .mk h3 { letter-spacing: -.022em; text-wrap: balance; } .mk h1 { font-size: var(--mk-display); line-height: 1.04; margin: 0 0 1.1rem; } .mk h2 { font-size: var(--mk-h2); line-height: 1.12; margin: 0 0 .7rem; } .mk h3 { font-size: var(--mk-h3); line-height: 1.25; margin: 0 0 .4rem; } .mk p { text-wrap: pretty; } .mk .lead { font-size: var(--mk-lead); line-height: 1.5; color: var(--ink-soft); max-width: 58ch; } .mk .prose { max-width: 65ch; } /* Small caps label. Used instead of a coloured pill everywhere except the hero, so the accent is spent once per screen rather than sprayed. */ .mk .mk-label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; } .mk .mk-label-accent { color: var(--brand-dark); } /* Section tint. A class rather than an inline style attribute, so the two background values on these pages live in the stylesheet with everything else. */ .mk .mk-tint { background: var(--paper-2); } /* A section that CONTINUES the one above it instead of starting a new beat. Stacking two padded sections put ~9rem of dead space between the pricing cards and the comparison table that explains them - they are one thought, so they get one gap. */ .mk .mk-continues { padding-top: 0; } /* A hairline that carries the section, so sections separate without boxes. (Cards are used only where elevation means something - see the skill's anti-card-overuse rule.) */ .mk .mk-rule { border: 0; border-top: 1px solid var(--mk-rule-soft); margin: 0; } /* ---------- Accessibility ---------- */ .mk .mk-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .mk .mk-skip:focus { left: 0; text-decoration: none; } .mk a:focus-visible, .mk button:focus-visible, .mk summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; } /* ---------- Navigation ---------- */ /* THE GREY-ON-GREEN BUG (entry 62). app.css has `.nav-links a { color: var(--ink-soft) }`, which is specificity (0,1,1) and sits LATER in the file than `.btn-primary`'s (0,1,0) `color:#fff`. Both nav CTAs - "Start free" for visitors and "Dashboard" for signed-in users - therefore rendered grey text on the green fill, and went dark-green-on-green on hover. Fixed here rather than in app.css because `.nav-links` exists only in the marketing shell (the app uses `.topbar`). */ .mk .nav-links a.btn-primary { color: #fff; } .mk .nav-links a.btn-primary:hover { color: #fff; background: var(--brand-dark); } .mk .site-nav { background: rgba(247, 245, 240, .88); } .mk .nav-links { gap: 1.35rem; } .mk .nav-links a { font-size: .92rem; transition: color .15s ease; } /* Current page, so the nav says where you are. */ .mk .nav-links a.is-current { color: var(--ink); } .mk .nav-links a.is-current::after { content: ""; display: block; height: 2px; margin-top: 3px; background: var(--brand); border-radius: 2px; } /* ---------- Buttons (marketing sizing only) ---------- */ .mk .btn { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .1s ease; } .mk .btn-lg { padding: .82rem 1.6rem; font-size: 1rem; } .mk .btn:active { transform: translateY(1px); } /* A tertiary action that is not a second button. The hero has exactly one button; anything else next to it is a text link, so there is one obvious action. */ .mk .mk-textlink { font-weight: 600; color: var(--brand-dark); border-bottom: 1px solid rgba(14, 124, 102, .35); transition: border-color .16s ease; } .mk .mk-textlink:hover { text-decoration: none; border-bottom-color: var(--brand); } /* ========================================================================= HERO - asymmetric split (DESIGN_VARIANCE 6: no centred hero) ========================================================================= */ .mk .mk-hero { padding: clamp(3rem, 1.5rem + 5vw, 5.5rem) 0 var(--mk-section); } .mk .mk-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--mk-gap); align-items: center; } .mk .mk-hero h1 { max-width: 15ch; } .mk .mk-hero .lead { max-width: 46ch; } .mk .mk-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark); background: var(--brand-tint); padding: .35rem .8rem; border-radius: var(--radius-pill); margin-bottom: 1.4rem; } .mk .mk-hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; } .mk .mk-trust { margin-top: 1.1rem; font-size: .86rem; color: var(--muted); } .mk .mk-trust b { color: var(--ink-soft); font-weight: 600; } /* Entry 118, item 6: a label, not a banner. Small, brand-tinted, beside the wordmark; the one sentence that explains it sits under the hero's trust line in the same quiet type. */ .mk .mk-beta { display: inline-block; margin-left: .35rem; vertical-align: middle; font-family: var(--font-body, inherit); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark); background: var(--brand-tint); padding: .16rem .45rem; border-radius: var(--radius-pill); } .mk .mk-beta-note { margin-top: .5rem; font-size: .86rem; color: var(--muted); } /* The sequence panel. A LABELLED DIAGRAM, never dressed as live data: it carries no counts, no percentages and no invented metrics, because a fabricated dashboard on a page a marketplace reviewer reads is exactly the kind of claim this session removed. */ .mk .mk-seq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: 0 18px 44px -28px rgba(20, 33, 29, .5); } .mk .mk-seq-title { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; } .mk .mk-seq ol { list-style: none; margin: 0; padding: 0; } .mk .mk-seq li { position: relative; padding: 0 0 1.15rem 2.1rem; } .mk .mk-seq li:last-child { padding-bottom: 0; } /* the connecting spine */ .mk .mk-seq li::before { content: ""; position: absolute; left: 8px; top: 1.35rem; bottom: -.1rem; width: 1px; background: var(--line-strong); } .mk .mk-seq li:last-child::before { display: none; } .mk .mk-seq li::after { content: ""; position: absolute; left: 4px; top: .42rem; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); } .mk .mk-seq li.is-key::after { background: var(--brand); border-color: var(--brand); } .mk .mk-seq b { display: block; font-size: .95rem; color: var(--ink); font-weight: 600; } .mk .mk-seq span { font-size: .86rem; color: var(--muted); } /* ========================================================================= DIFFERENTIATORS - two claims, both checkable ========================================================================= */ .mk .mk-diff { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mk-gap); } .mk .mk-diff-item { border-top: 2px solid var(--brand); padding-top: 1.3rem; } .mk .mk-diff-item h3 { font-family: var(--font-display); font-size: 1.35rem; } .mk .mk-diff-item p { margin-bottom: .6rem; } .mk .mk-evidence { font-size: .84rem; color: var(--muted); border-left: 2px solid var(--mk-rule); padding-left: .85rem; margin: 0; } /* ========================================================================= MARKETPLACES - two tiers, visibly different weight ========================================================================= */ .mk .mk-tier + .mk-tier { margin-top: 2.6rem; } /* The features page renders the live grid without wrapping it in a .mk-tier, so the sibling rule above never fired there and the roadmap heading sat flush against the live tiles. The gap between the two tiers is the thing that stops them reading as one list. */ .mk .mk-mp-grid + .mk-tier { margin-top: 2.6rem; } .mk .mk-tier-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; } .mk .mk-tier-head h3 { margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; } .mk .mk-tier-note { font-size: .87rem; color: var(--muted); } .mk .mk-mp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; } /* Live: a real surface, accent rule, confident. */ .mk .mk-mp { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brand); border-radius: var(--radius-sm); padding: .95rem .8rem; } .mk .mk-mp b { display: block; font-size: .93rem; font-weight: 600; color: var(--ink); } .mk .mk-mp span { font-size: .76rem; color: var(--muted); } /* Roadmap: deliberately flatter and quieter. It must not read as a product tile. */ .mk .mk-mp-soon { background: transparent; border: 1px dashed var(--line-strong); border-top: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: .95rem .8rem; } .mk .mk-mp-soon b { display: block; font-size: .93rem; font-weight: 600; color: var(--ink-soft); } .mk .mk-mp-soon span { font-size: .76rem; color: var(--muted); } /* ========================================================================= MECHANISM - the thing no competitor shows ========================================================================= */ .mk .mk-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; } .mk .mk-step { border-top: 1px solid var(--mk-rule); padding-top: 1.1rem; } .mk .mk-step-n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .78rem; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; display: block; margin-bottom: .5rem; } .mk .mk-step h3 { font-family: var(--font-body); font-size: .98rem; font-weight: 700; } .mk .mk-step p { font-size: .89rem; margin: 0; } /* ========================================================================= FEATURES - zig-zag, not a three-card row ========================================================================= */ .mk .mk-zig { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); } .mk .mk-zig-row { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--mk-gap); align-items: center; } .mk .mk-zig-row:nth-child(even) .mk-zig-text { order: 2; } .mk .mk-zig-text h3 { font-family: var(--font-display); font-size: 1.5rem; } .mk .mk-zig-text p { max-width: 52ch; } /* The illustrative side of a zig-zag row: a list of facts, not a screenshot. */ .mk .mk-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mk-rule-soft); } .mk .mk-facts li { display: flex; gap: .9rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--mk-rule-soft); font-size: .92rem; color: var(--ink-soft); } .mk .mk-facts svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--brand); } .mk .mk-facts b { color: var(--ink); font-weight: 600; } /* ========================================================================= PRICING - scoped so app/billing.html is untouched ========================================================================= */ /* auto-fit, for the reason app.css gives: entry 93 left two plans in a three-column grid. */ .mk .plan-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; align-items: stretch; } .mk .plan-card { border-radius: var(--radius); padding: 1.9rem 1.6rem; display: flex; flex-direction: column; box-shadow: none; } /* Emphasis is colour and weight, not height and not a badge (entry 94 removed the "Most popular" ribbon this used to position). Every card keeps the same height. */ .mk .plan-card.emphasis { border-color: var(--brand); box-shadow: 0 14px 36px -24px rgba(14, 124, 102, .55); } .mk .plan-card h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .mk .plan-price { font-size: 2.5rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: .3rem 0 .1rem; } .mk .plan-limits { font-size: .86rem; color: var(--muted); margin: 0 0 .3rem; } .mk .plan-features { margin: 1.1rem 0 1.4rem; } /* Pins every CTA to the same baseline regardless of how many feature rows sit above. */ .mk .plan-card .btn-block { margin-top: auto; } /* ========================================================================= FAQ - a side-by-side list, not an accordion ========================================================================= */ .mk .mk-faq { display: grid; gap: 0; } .mk .mk-faq-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--mk-gap); padding: 1.6rem 0; border-top: 1px solid var(--mk-rule-soft); } .mk .mk-faq-row:last-child { border-bottom: 1px solid var(--mk-rule-soft); } .mk .mk-faq-q { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--ink); margin: 0; } .mk .mk-faq-a { margin: 0; max-width: 62ch; } /* ========================================================================= CLOSING BAND + FOOTER One dark region, at the BOTTOM, covering the final CTA and the footer together. Deliberately not a dark section floating in the middle of a light page, which reads as a copy-paste accident (the skill calls this out by name). ========================================================================= */ .mk .mk-close { background: var(--mk-band); color: var(--mk-on-band); padding: var(--mk-section) 0 calc(var(--mk-section) * .8); } .mk .mk-close h2 { color: #fff; max-width: 18ch; } .mk .mk-close p { color: var(--mk-on-band-mute); max-width: 46ch; } .mk .mk-close-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--mk-gap); align-items: center; } .mk .mk-close .btn-primary { background: var(--brand); color: #fff; } .mk .mk-close .btn-primary:hover { background: #14907a; } .mk .mk-close-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .mk .mk-close .mk-textlink { color: var(--mk-accent-on-band); border-bottom-color: rgba(111, 206, 178, .35); } .mk .mk-close .mk-textlink:hover { border-bottom-color: var(--mk-accent-on-band); } .mk .site-footer { background: var(--mk-band); color: var(--mk-on-band-mute); border-top: 1px solid var(--mk-band-soft); margin-top: 0; padding: 2.5rem 0 3rem; } .mk .site-footer a { color: var(--mk-on-band-mute); font-size: .9rem; transition: color .15s ease; } .mk .site-footer a:hover { color: #fff; text-decoration: none; } .mk .site-footer .brand { color: #fff; } .mk .site-footer .brand .dot { box-shadow: 0 0 0 4px rgba(14, 124, 102, .28); } .mk .site-footer p { color: var(--mk-on-band-mute); } .mk .mk-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--mk-gap); } .mk .mk-footer-col h4 { font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-on-band); margin: 0 0 .9rem; } .mk .mk-footer-col ul { list-style: none; margin: 0; padding: 0; } .mk .mk-footer-col li { margin-bottom: .5rem; } /* The attribution block. Small, but it is a licence condition, not decoration. */ .mk .mk-attrib { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mk-band-soft); font-size: .78rem; line-height: 1.6; color: #7d928a; max-width: 90ch; } .mk .mk-attrib p { color: #7d928a; margin: 0 0 .5rem; font-size: .78rem; } /* ~~.mk .attrib-line .attrib-required~~ - REMOVED IN ENTRY 101. The marketing footer no longer renders the attribution block at all (operator decision: the footer carries Omnidara and nothing about any marketplace), so this rule had nothing left to style. The block itself still exists for the AUTH shell, which loads app.css and never this file - which is why the surviving rules for it live there. .mk-attrib below is the copyright line and stays. */ /* ========================================================================= RESPONSIVE - every asymmetric grid collapses to one column ========================================================================= */ @media (max-width: 900px) { .mk .mk-hero-grid, .mk .mk-diff, .mk .mk-zig-row, .mk .mk-faq-row, .mk .mk-close-grid, .mk .mk-footer-cols { grid-template-columns: 1fr; } .mk .mk-zig-row:nth-child(even) .mk-zig-text { order: 0; } .mk .mk-flow { grid-template-columns: repeat(2, 1fr); } .mk .mk-mp-grid { grid-template-columns: repeat(3, 1fr); } .mk .plan-grid { grid-template-columns: 1fr; } .mk .mk-hero h1, .mk .mk-hero .lead { max-width: none; } .mk .mk-faq-q { margin-bottom: .5rem; } } @media (max-width: 560px) { .mk .mk-mp-grid { grid-template-columns: repeat(2, 1fr); } .mk .mk-flow { grid-template-columns: 1fr; } .mk .container { padding: 0 18px; } .mk .mk-hero-actions .btn { width: 100%; } } /* ========================================================================= REDUCED MOTION - MOTION_INTENSITY 2 already means nothing animates on its own; this removes the remaining hover/press transitions for anyone who asks. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .mk *, .mk *::before, .mk *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .mk .btn:active { transform: none; } }