/* * Carte Medical — v2 design language (PROPOSED) * ---------------------------------------------------------------------------- * What changed from v1 (colors_and_type.css): * 1. TYPE. Editorial serif + sans + mono, chosen to read "human-curated case * file" rather than "LLM Webflow default": * • Source Serif 4 — display / headings / case headlines * • IBM Plex Sans — body / UI * • IBM Plex Mono — eyebrows, section numbers, prices, captions, * labels, file IDs, and numerals inside body * (Old stack was EB Garamond + Inter + MinervaModern.) * 2. ACCESSIBILITY FIRST. Designed for an older audience (70s+) and readers * with visual / motor impairment. Larger base size (20px), higher contrast * ink, darker "muted" tone that still passes AAA, 48px minimum hit targets, * always-visible focus rings, generous measure. * 3. IMAGERY. The system now anticipates photography (founder portraits, team * at work, the Misha testimonial still) and editorial document plates. * Images are framed with a hairline + a mono caption plate — never bled * to a soft-shadow card. Navy duotone is the house treatment. * 4. LOGO. The "carte" wordmark is used prominently in the masthead and * footer (v1 forbade this). * 5. COLOR. Navy + ink + paper, restrained. Green is retained ONLY as the * interactive/focus affordance — an accessibility need, not decoration. * No second accent, no gradients, no shadows, square corners. Unchanged. * * Fonts load from Google Fonts in the page . Self-host before production. */ :root { /* ───── COLOR ───────────────────────────────────────────────────────── */ --navy: #01262f; /* primary brand surface, inverse bands */ --navy-deep: #001338; /* second surface, CTA hover, deepest panels */ --accent: #60b89f; /* INTERACTIVE / focus ONLY — link underline, focus ring, active */ --accent-ink: #2f6f5e; /* green at text contrast on paper (AA), the rare green text */ /* Warm editorial accent — drawn from the lead-magnet document register. Used for NON-interactive marks only: eyebrows, section numbers, ticks, small rules. Keeps the warm/cool tension that made the field guides read like archival documents rather than a flat SaaS page. Never an action. */ --brass: #b3863f; /* warm ochre — decorative ticks + hairlines */ --brass-ink: #6d4f1c; /* brass at text contrast on paper (7:1, AAA) — eyebrows, section nums */ --brass-on-navy: #d8b773; /* brass on navy bands (8:1) — inverse eyebrows/labels */ --oxblood: #3a1f2a; /* deep bordeaux — primary action + CTA band (Carte guide palette) */ --oxblood-deep: #2c141d; /* oxblood hover/pressed */ --paper: #f5f1e8; /* warm ivory ground — deeper than v2.0 so sections read as material */ --paper-2: #ece4d5; /* sand — alternating section ground, now with real tonal step */ --paper-3: #e4dbc9; /* deeper sand — image-frame backing, nested panels */ --card: #fbf8f1; /* warm card fill (was stark white) */ --ink: #1b1813; /* body text — warm near-black, ~16:1 on paper (AAA) */ --ink-2: #4a4338; /* secondary text — warm slate, 8:1 on paper (AAA at body sizes) */ --ink-inverse: #f3efe6; /* text on navy */ --ink-inverse-2: rgba(243,239,230,0.72); /* muted text on navy */ --rule: rgba(27,24,19,0.20); /* default hairline */ --rule-soft: rgba(27,24,19,0.11); /* low-contrast divider */ --rule-strong: var(--ink); /* emphasis rule */ --rule-on-navy: rgba(243,239,230,0.22); --error: #b3331f; /* ───── TYPE STACKS ─────────────────────────────────────────────────── */ --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; /* @kind font */ --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* @kind font */ --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* @kind font */ /* ───── TYPE SCALE — accessibility-first (larger than v1) ───────────── */ --fs-micro: 14px; /* smallest allowed — legal, footer metadata (was 11) */ --fs-sm: 16px; /* labels, captions */ --fs-base: 20px; /* body default (was 17) */ --fs-lg: 23px; /* lead / standfirst */ --fs-xl: 28px; /* h3 */ --fs-2xl: 34px; /* h2 small */ --fs-3xl: clamp(30px, 4vw, 46px); /* @kind font */ --fs-hero: clamp(40px, 5.6vw, 72px); /* @kind font */ --fs-display:clamp(52px, 8vw, 104px); /* @kind font */ --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.22; /* @kind font */ --lh-base: 1.62; /* @kind font */ --lh-relaxed: 1.7; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold: 700; /* @kind font */ --track-eyebrow: 0.2em; /* @kind font */ --track-label: 0.16em; /* @kind font */ --track-wordmark: 0.04em; /* @kind font */ /* ───── SPACING ─────────────────────────────────────────────────────── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px; /* ───── LAYOUT ──────────────────────────────────────────────────────── */ --measure: 66ch; /* prose reading column @kind spacing */ --page: 1080px; /* default page max @kind spacing */ --wide: 1320px; /* wide bands @kind spacing */ --pad: clamp(24px, 5vw, 64px); /* horizontal page padding @kind spacing */ /* ───── BORDERS / MOTION ────────────────────────────────────────────── */ --radius: 2px; /* effectively square @kind radius */ --hit: 48px; /* minimum interactive target @kind spacing */ --dur: 220ms; /* @kind other */ --dur-slow: 600ms; /* @kind other */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ } /* ───── RESET ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } /* ───── HEADINGS ───────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: var(--fw-semibold); color: var(--ink); line-height: var(--lh-snug); letter-spacing: -0.01em; margin: 0; text-wrap: balance; } h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.02em; } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-xl); } p { margin: 0 0 1em 0; text-wrap: pretty; } /* tabular mono numerals wherever a specific figure appears in prose */ .num { font-family: var(--mono); font-feature-settings: "tnum" 1; font-weight: var(--fw-medium); } /* ───── LINKS ──────────────────────────────────────────────────────────── */ a { color: inherit; text-decoration: none; } .link { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.18em; transition: text-decoration-color var(--dur) var(--ease), opacity var(--dur) var(--ease); } .link:hover { text-decoration-color: var(--ink); } /* arrow text-link, inherits the surrounding face */ .arrow-link { font-family: var(--mono); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.02em; display: inline-flex; align-items: baseline; gap: 0.5em; padding: 6px 0; border-bottom: 2px solid var(--accent); transition: border-color var(--dur) var(--ease); min-height: var(--hit); } .arrow-link:hover { border-color: var(--ink); } .arrow-link .ar { transition: transform var(--dur) var(--ease); } .arrow-link:hover .ar { transform: translateX(3px); } /* ───── FOCUS — always visible, accessibility-critical ─────────────────── */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); } /* ───── MONO TEXTURE ELEMENTS ──────────────────────────────────────────── */ .eyebrow { font-family: var(--mono); font-weight: var(--fw-medium); font-size: var(--fs-sm); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--brass-ink); } .eyebrow.on-navy { color: var(--brass-on-navy); } .section-num { font-family: var(--mono); font-weight: var(--fw-medium); font-size: var(--fs-sm); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brass-ink); display: inline-block; padding-bottom: var(--s3); } .plate { /* mono caption plate under images / documents */ font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); line-height: 1.5; } /* ───── BUTTONS ────────────────────────────────────────────────────────── */ .btn { font-family: var(--mono); font-size: 16px; font-weight: var(--fw-medium); letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: var(--hit); padding: 14px 28px; border-radius: var(--radius); border: 2px solid var(--ink); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); text-decoration: none; } .btn-primary { background: var(--oxblood); color: var(--paper); border-color: var(--oxblood); } .btn-primary:hover { background: var(--oxblood-deep); border-color: var(--oxblood-deep); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-secondary:hover { background: var(--ink); color: var(--paper); } .btn-primary.on-navy { background: var(--paper); color: var(--navy); border-color: var(--paper); } .btn-primary.on-navy:hover { background: var(--accent); border-color: var(--accent); color: var(--navy-deep); } /* ───── LAYOUT HELPERS ─────────────────────────────────────────────────── */ .container { max-width: var(--page); margin: 0 auto; padding-inline: var(--pad); } .container.wide { max-width: var(--wide); } .container.measure { max-width: var(--measure); } .section { padding-block: clamp(64px, 9vw, 128px); } .section.tight { padding-block: clamp(48px, 6vw, 80px); } /* ───── BLOCK HEADER — the canonical section header ───────────────────── * Large serif heading on the left, smaller sans explanation on the right, * across a full-width emphasis rule. Used identically on every content * section so they read as one publication, not a stack of one-offs. */ .block-header { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: baseline; padding-top: var(--s6); border-top: 1px solid var(--rule-strong); margin-bottom: clamp(40px, 5vw, 72px); } .block-header h2 { margin: 0; max-width: none; } /* Lone heading (no supporting side text) must not sit narrow with an empty second column — collapse to one column and let the heading breathe. */ .block-header:not(:has(.bh-text)) { grid-template-columns: 1fr; } .block-header:not(:has(.bh-text)) h2 { max-width: 40ch; } .block-header .bh-text { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--ink-2); margin: 0; max-width: 44ch; text-wrap: pretty; } .block-header.on-navy { border-top-color: var(--rule-on-navy); } .block-header.on-navy h2 { color: var(--ink-inverse); } .block-header.on-navy .bh-text { color: var(--ink-inverse-2); } @media (max-width: 820px) { .block-header { grid-template-columns: 1fr; gap: var(--s5); margin-bottom: var(--s7); } .block-header h2 { max-width: 22ch; } } hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } hr.rule-soft { border: 0; border-top: 1px solid var(--rule-soft); margin: 0; } hr.rule-strong { border: 0; border-top: 1px solid var(--ink); margin: 0; } /* ───── IMAGE FRAME (house treatment) ──────────────────────────────────── */ .figure { margin: 0; } .figure .frame { border: 1px solid var(--rule); background: var(--paper-3); overflow: hidden; } .figure figcaption { margin-top: var(--s3); } image-slot { width: 100%; height: 100%; display: block; } /* ───── DUOTONE — the house photography register ──────────────────────── * Every photograph on the site (cool clinical scans, warm portraits, cinematic * testimonial stills) is normalised to ONE navy-monochrome register: desaturate, * then blend its luminance over a navy ground. Shadows fall to deep navy, * highlights to a cool navy-grey. The brand's warmth lives in the paper around * the image, never in the image — that is what keeps a page of mixed-source * photography looking like one art-directed set. */ .duotone { position: relative; background: var(--navy); overflow: hidden; } .duotone > img, .duotone > image-slot { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: grayscale(100%) contrast(1.05) brightness(1.05); mix-blend-mode: luminosity; } /* ───── REDUCED MOTION ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ::selection { background: rgba(96,184,159,0.30); color: var(--ink); }