/* ============================================================ LIME Enterprise — Site 2 Light-first enterprise system: neutral paper surfaces, restrained LIME green accent, instrument-panel labels. Independent of the leadership site's design system; no components are shared. ============================================================ */ :root, [data-theme='light'] { /* Type scale */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); --text-2xl: clamp(1.875rem, 1.25rem + 2.2vw, 3rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Surfaces — neutral paper */ --color-bg: #f4f6f4; --color-surface: #fafcfa; --color-surface-2: #ffffff; --color-surface-offset: #e9ece9; --color-divider: #dbe0db; --color-border: #c4ccc5; /* Text */ --color-text: #101a14; --color-text-muted: #44514a; --color-text-faint: #566159; --color-text-inverse: #f7faf7; /* Primary — deep LIME green, used for interactive text and marks */ --color-primary: #1f6b45; --color-primary-hover: #175536; --color-primary-active: #10402a; --color-primary-highlight: #dbe9de; /* Accent — brighter lime, graphics and rules only, never body text */ --color-accent: #7cb342; /* Status labels only */ --color-flag: #8a4a10; --color-flag-surface: #f7edE1; --color-down: #9b2c2c; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-full: 9999px; --transition-interactive: 160ms cubic-bezier(0.16, 1, 0.3, 1); --shadow-sm: 0 1px 2px oklch(0.25 0.02 150 / 0.07); --shadow-md: 0 4px 14px oklch(0.25 0.02 150 / 0.09); --content-narrow: 640px; --content-default: 900px; --content-wide: 1180px; /* Self-hosted OFL 1.1 families — see assets/css/fonts.css. No network egress. */ --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; } [data-theme='dark'] { --color-bg: #0b1416; --color-surface: #101b1d; --color-surface-2: #152224; --color-surface-offset: #121e20; --color-divider: #1f2c2e; --color-border: #2c3b3e; --color-text: #dde5df; --color-text-muted: #a2b3a8; --color-text-faint: #92a398; --color-text-inverse: #0b1416; --color-primary: #6fc795; --color-primary-hover: #93d9b0; --color-primary-active: #b0e5c5; --color-primary-highlight: #1b2e24; --color-accent: #9ccc65; --color-flag: #e0a561; --color-flag-surface: #241d13; --color-down: #f0a0a0; --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35); --shadow-md: 0 4px 14px oklch(0 0 0 / 0.45); } /* The dark palette is opt-in through the toggle only. This surface has no * prefers-color-scheme rule, so an operating system set to dark still receives * the light palette on first paint. */ /* ---------- Theme painting ---------- * Every full-width surface paints its own background from the active palette. * The visible canvas must not depend on body-background propagation, because an * embedding page or host stylesheet that paints stops that propagation and * leaves wide viewports showing a foreign background beside and below the content. */ html { background-color: var(--color-bg); color-scheme: light; } [data-theme='dark'] { color-scheme: dark; } main { background-color: var(--color-bg); } /* ---------- Primitives ---------- */ .shell { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-5); } @media (min-width: 60rem) { .shell { padding-inline: var(--space-10); } } .label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); } .rule-after { display: flex; align-items: center; gap: var(--space-2); } .rule-after::after { content: ''; height: 1px; width: clamp(2rem, 12vw, 7rem); background: linear-gradient(to right, var(--color-accent), transparent); } .skip-link { position: absolute; left: var(--space-4); top: var(--space-2); z-index: 20; transform: translateY(-200%); background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); min-height: 2.75rem; display: inline-flex; align-items: center; } .skip-link:focus-visible { transform: translateY(0); } a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--color-primary-hover); } .ext { display: inline-block; margin-inline-start: 0.35em; font-size: 0.9em; } .prose { max-width: 68ch; display: grid; gap: var(--space-4); } .prose p { color: var(--color-text-muted); } .prose__lead { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text) !important; letter-spacing: -0.01em; } .prose__aside { max-width: 68ch; margin-top: var(--space-8); font-size: var(--text-sm); color: var(--color-text-muted); } /* ---------- Header ---------- */ .masthead { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--color-bg) 97%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-divider); } .masthead__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 4.25rem; flex-wrap: wrap; padding-block: var(--space-3); } .brand { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; color: var(--color-text); text-decoration: none; } .brand__mark { color: var(--color-primary); flex: none; } .brand__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; } .brand__unit { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 400; } .masthead__nav { margin-inline-start: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-5); } .masthead__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; } .masthead__nav a:hover { color: var(--color-text); text-decoration: underline; } .theme-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); background: var(--color-surface); flex: none; } .theme-toggle:hover { color: var(--color-text); border-color: var(--color-primary); } @media (max-width: 61.99rem) { .masthead__nav { order: 3; width: 100%; margin-inline-start: 0; gap: 0 var(--space-4); border-top: 1px solid var(--color-divider); padding-top: var(--space-1); } .masthead__inner { row-gap: var(--space-2); } .theme-toggle { margin-inline-start: auto; } } /* ---------- Hero ---------- */ .hero { padding-block: clamp(var(--space-10), 7vw, var(--space-20)); border-bottom: 1px solid var(--color-divider); background-color: var(--color-bg); background-image: linear-gradient(to bottom, var(--color-surface-offset), var(--color-bg) 70%); } .hero__grid { display: grid; gap: var(--space-10); align-items: center; } @media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-16); } } .hero h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin-block: var(--space-5) var(--space-6); max-width: 30ch; } .hero__lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 58ch; } .hero__meta { display: grid; gap: var(--space-4); border-top: 1px solid var(--color-divider); padding-top: var(--space-5); margin-top: var(--space-8); } .hero__meta div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); font-size: var(--text-sm); } @media (max-width: 26rem) { .hero__meta div { grid-template-columns: minmax(0, 1fr); } } .hero__meta dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); } .hero__meta dd { color: var(--color-text-muted); } .figure-line { color: var(--color-primary); opacity: 0.9; width: 100%; max-width: 22rem; margin-inline-start: auto; display: block; } /* ---------- Call to action and its disclosure ---------- * The disclosure is static, adjacent, and always rendered. It is never a toast, * a tooltip, or collapsed content, because the destination is a demonstration * environment and a visitor must know that before clicking. */ .cta-block { margin-top: var(--space-8); display: grid; gap: var(--space-3); justify-items: start; max-width: 44rem; } .cta { display: inline-flex; align-items: center; min-height: 3rem; padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-text-inverse); font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; letter-spacing: -0.005em; text-decoration: none; border: 1px solid var(--color-primary); box-shadow: var(--shadow-sm); } .cta:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-inverse); } [data-theme='dark'] .cta, [data-theme='dark'] .cta:hover { color: var(--color-bg); } .cta-block__disclosure { font-size: var(--text-sm); color: var(--color-text); background: var(--color-flag-surface); border: 1px solid color-mix(in srgb, var(--color-flag) 40%, transparent); border-inline-start: 3px solid var(--color-flag); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); max-width: 56ch; } /* The access precondition. Weighted like the disclosure above it, because a visitor who cannot sign in cannot reach the destination at all. */ .cta-block__signin { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); max-width: 56ch; padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--color-border); } .anchor-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-top: var(--space-8); } .anchor-link { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-8); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); border-bottom: 1px solid currentColor; padding-block: var(--space-2); text-decoration: none; min-height: 2.75rem; } .anchor-row .anchor-link { margin-top: 0; } .anchor-link:hover { color: var(--color-primary-hover); } /* ---------- Section furniture ---------- */ .section { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); border-bottom: 1px solid var(--color-divider); background-color: var(--color-bg); } .section__head { max-width: 66ch; margin-bottom: var(--space-10); } .section__head h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.015em; margin-block: var(--space-3) var(--space-5); } .section__head p { color: var(--color-text-muted); } .section h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; letter-spacing: -0.005em; } /* ---------- Panels and data tables ---------- */ .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); max-width: 46rem; } .panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-2); } .flag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-flag); background: var(--color-flag-surface); border: 1px solid color-mix(in srgb, var(--color-flag) 35%, transparent); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); } .panel__posture { margin-top: var(--space-4); font-size: var(--text-base); font-weight: 600; color: var(--color-text); } .panel__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); } .table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .data-table th, .data-table td { text-align: left; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-divider); } .data-table thead th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); font-weight: 400; } .data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody th { font-weight: 600; color: var(--color-text); } .num { text-align: right !important; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .num--down { color: var(--color-down); } .num--up { color: var(--color-primary); } .sym { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; } .sym__name { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--color-text-faint); margin-top: var(--space-1); } /* ---------- Evaluation stages ---------- */ .stages { display: grid; gap: var(--space-6); counter-reset: stage; list-style: none; padding: 0; } @media (min-width: 56rem) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } } .stages li { border-top: 2px solid var(--color-accent); padding-top: var(--space-4); display: grid; gap: var(--space-2); align-content: start; } .stages p:last-child { font-size: var(--text-sm); color: var(--color-text-muted); } /* ---------- Start cards ---------- */ .cards { display: grid; gap: var(--space-4); } @media (min-width: 44rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 68rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .card { position: relative; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); padding-inline-end: var(--space-10); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); transition: border-color var(--transition-interactive); } .card:hover { border-color: var(--color-primary); color: var(--color-text); } .card p { font-size: var(--text-sm); color: var(--color-text-muted); } .card__go { position: absolute; top: var(--space-5); right: var(--space-5); color: var(--color-primary); } /* ---------- Pricing layout ---------- */ .split { display: grid; gap: var(--space-8); align-items: start; } @media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); } } .stack { display: grid; gap: var(--space-8); } .ticks { margin-top: var(--space-3); display: grid; gap: var(--space-2); list-style: none; padding: 0; } .ticks li { position: relative; padding-inline-start: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); } .ticks li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.7rem; height: 1px; background: var(--color-accent); } .ticks--neg li::before { background: var(--color-text-faint); } /* ---------- Notice ---------- */ .notice { margin-top: var(--space-8); background: var(--color-surface-offset); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); max-width: 66ch; } .notice p { font-size: var(--text-sm); color: var(--color-text-muted); } .notice .label { display: block; margin-bottom: var(--space-2); } /* ---------- Footer ---------- */ .foot { padding-block: var(--space-12) var(--space-16); background: var(--color-surface-offset); } .foot__grid { display: grid; gap: var(--space-8); } @media (min-width: 48rem) { .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-16); } } .foot p, .foot li { font-size: var(--text-sm); color: var(--color-text-muted); } .foot__note, .foot__disclaimer { margin-top: var(--space-4); max-width: 60ch; } .foot__link-row { margin-top: var(--space-5); } /* Contact channels. Sized to the 44px target baseline so the mailto and tel links are comfortable to hit on a phone, where they are the ones most likely to be used. */ .contact { margin-top: var(--space-6); display: grid; gap: var(--space-4); max-width: 40rem; } @media (min-width: 30rem) { .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); } } .contact dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); } .contact dd { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); } .contact__link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } .contact__link:hover { color: var(--color-primary-hover); } .foot__copyright { margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); } /* Reciprocal link to the leadership surface. Sized to the 44px target baseline and styled from palette tokens so it stays AA in both themes. */ .sibling-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; text-decoration: none; } .sibling-link:hover { border-color: var(--color-primary); color: var(--color-primary-hover); text-decoration: underline; }