/* Corvia site-wide stylesheet — hosted asset. Source of truth for all shared visual CSS on corviacycle.com. Nav and footer markup is generated by corvia-site.js; this file styles it. Edit → re-upload asset → swap Webflow asset URL in site head → publish. Last edited: 2026-07-25 (canonical nav + footer refactor). */ /* ---------- Design tokens (fallbacks; Webflow site vars still win when present) ---------- */ :root { --deep-brown: #423020; --cream: #F7F1EA; --arch-support: #F5ECE6; --ui-border: #E8DFD3; --ui-text-muted: #9C8B78; --link: #423020; --privacy-mist: #E8E7EA; /* the home privacy-promise band; set in Webflow, mirrored here */ --taupe: #DBCABB; --dusty-blue: #8F9D9F; --button-primary: #4E5F82; --button-hover: #617397; /* Column standards, locked 2026-09-05. See CLAUDE.md "Column standards". New surfaces use these tokens; literal widths are legacy pending migration. Chrome (nav 1280) and the home features-spotlight grid (1200) are deliberate exceptions. */ --col-read: 720px; /* long-form body text: blog posts, articles, legal */ --col-content: 880px; /* page content and hero columns (the /faq width) */ --col-wide: 1120px; /* card grids, listings, footer inner */ /* Heading scale, locked 2026-09-05 (Will): the /why-corvia ratio. The old 56/52 pairing had no hierarchy. Redefined at :root inside a mobile media query just below, so consumers never need their own mobile size. */ --type-h1: 60px; --type-h2: 44px; --font-headers: 'Cormorant Garamond', Georgia, serif; --font-body: 'Montserrat', Helvetica, sans-serif; } @media (max-width: 900px) { :root { --type-h1: 40px; --type-h2: 36px; } } /* ---------- Site-wide link color (deep-brown on-brand default) ---------- Catches any not covered by a more specific rule. Buttons/CTAs override with class-based color (white on button-primary background). */ a { color: var(--link); } /* ---------- Logo (nav + footer render inline via canonical JS templates) ---------- */ .nav-logo img { height: 36px; width: auto; display: block; } /* ---------- Nav (desktop) ---------- .site-nav > .nav-container > (.nav-logo, .nav-links, .nav-actions). Full-width bar; content column pinned at ~1272px via responsive padding. 2026-09-05: the nav and footer are server-rendered by the "Site Nav" and "Site Footer" Webflow components, not painted by corvia-site.js any more. A Webflow HTML Embed always ships its content inside a
, which lands between .site-nav and .nav-container. That matters: .site-nav is a flex container, so the wrapper would become the flex item and the bar would collapse to its content width instead of filling. display:contents removes the wrapper from the box tree so the layout is identical to the old DOM. The footer does not strictly need it (its children are max-width + auto margins inside a plain block) but it is kept symmetrical on purpose. */ .site-nav > .w-embed, .bom-footer > .w-embed { display: contents; } .site-nav { display: flex; align-items: stretch; padding: 20px max(32px, calc((100vw - 1336px) / 2)); background: rgba(247, 241, 234, 0.92); border-bottom: 1px solid rgba(66, 48, 32, 0.08); max-width: none; margin: 0; } .nav-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } .nav-actions { display: flex; align-items: center; gap: 8px; } .nav-links { display: flex !important; gap: 32px !important; align-items: center !important; } .nav-item { position: relative; display: inline-flex; align-items: center; } .nav-item-dropdown > .nav-link { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } /* The dropdown toggle is a real