/* ========================================================================== formacha.io — styles.css Editorial × A24 × Criterion. See DESIGN.md for rationale. ========================================================================== */ /* 1. Fonts (Google Fonts CDN — swap for self-hosted in production) */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); /* 2. Token layer: primitives */ :root { /* Coral */ --coral-500: #E64A3D; --coral-600: #C93A2F; --coral-050: #FBEAE7; /* Ink (warm dark) */ --ink-950: #0E0D0C; --ink-900: #161412; --ink-800: #201D1A; --ink-700: #2E2A26; --ink-600: #4A433C; --ink-500: #6B6259; --ink-400: #8F857A; /* Paper (warm off-white) */ --paper-050: #FAF8F5; --paper-100: #F2EEE7; --paper-200: #E7E1D6; --paper-300: #CFC8B9; /* Ledger surfaces */ --ledger-bg-light: #F6F2EA; --ledger-bg-dark: #1A1715; --ledger-rule: rgba(143, 133, 122, 0.24); /* Type families — revised */ --font-display: 'Oswald', 'Barlow Condensed', 'Archivo Narrow', 'Roboto Condensed', Impact, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace; /* Type scale — 1.25 ratio, Oswald-tuned (condensed = can go larger without feeling bulky) */ --t-xs: 0.75rem; /* 12px */ --t-sm: 0.875rem; /* 14px */ --t-base: 1rem; /* 16px */ --t-md: 1.125rem; /* 18px */ --t-lg: 1.375rem; /* 22px */ --t-xl: 1.75rem; /* 28px */ --t-2xl: 2.25rem; /* 36px */ --t-3xl: 3rem; /* 48px */ --t-4xl: clamp(2.25rem, 5vw, 3.75rem); /* 36 → 60 */ --t-5xl: clamp(3rem, 7vw, 5rem); /* 48 → 80 */ --t-6xl: clamp(3.25rem, 9vw, 6.5rem); /* 52 → 104 */ /* Spacing — tightened for info density */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 28px; --s-7: 40px; --s-8: 56px; --s-9: 72px; --s-10: 96px; /* Layout */ --max-width: 1200px; --reading-column: 680px; --gutter: 24px; /* Motion */ --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 480ms; --dur-cinema: 800ms; --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-cinema: cubic-bezier(0.2, 0, 0, 1); /* Radii */ --r-tight: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; } /* 3. Semantic tokens — light mode default */ :root { --bg: var(--paper-050); --bg-alt: var(--paper-100); --surface: #FFFFFF; --surface-ledger: var(--ledger-bg-light); --fg: var(--ink-950); --fg-muted: var(--ink-600); --fg-dim: var(--ink-500); --border: var(--paper-300); --border-hairline: var(--ledger-rule); --accent: var(--coral-500); --accent-hover: var(--coral-600); --accent-wash: var(--coral-050); --focus-ring: var(--coral-500); --btn-primary-fg: #FFFFFF; } /* Dark mode — applied via [data-theme="dark"] on OR prefers-color-scheme */ [data-theme="dark"] { --bg: var(--ink-950); --bg-alt: var(--ink-900); --surface: var(--ink-800); --surface-ledger: var(--ledger-bg-dark); --fg: var(--paper-050); --fg-muted: #C8C0B5; --fg-dim: #8F857A; --border: var(--ink-700); --accent: var(--coral-500); --accent-hover: #F05A4D; --accent-wash: rgba(230, 74, 61, 0.12); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--ink-950); --bg-alt: var(--ink-900); --surface: var(--ink-800); --surface-ledger: var(--ledger-bg-dark); --fg: var(--paper-050); --fg-muted: #C8C0B5; --fg-dim: #8F857A; --border: var(--ink-700); --accent: var(--coral-500); --accent-hover: #F05A4D; --accent-wash: rgba(230, 74, 61, 0.12); } } /* 4. Reset + base */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; } } body { font-family: var(--font-body); font-size: var(--t-base); font-weight: 400; line-height: 1.6; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01', 'cv11'; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } img, svg { display: block; max-width: 100%; } /* 5. Typography */ h1, h2, h3, h4, h5, h6 { color: var(--fg); } h1, .h1 { font-family: var(--font-display); font-size: var(--t-4xl); font-weight: 600; line-height: 1.02; letter-spacing: 0.005em; text-transform: uppercase; } h2, .h2 { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 600; line-height: 1.05; letter-spacing: 0.005em; text-transform: uppercase; } h3, .h3 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 500; line-height: 1.15; letter-spacing: 0.01em; text-transform: uppercase; } h4, .h4 { font-family: var(--font-body); font-size: var(--t-md); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; } p { font-size: var(--t-base); line-height: 1.6; max-width: 62ch; } .lede { font-size: var(--t-lg); line-height: 1.45; color: var(--fg); max-width: 64ch; font-weight: 400; } a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent); text-decoration-thickness: 2px; } /* Editorial lockup */ .kicker { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: var(--s-4); display: block; } .display { font-family: var(--font-display); font-size: var(--t-6xl); font-weight: 700; line-height: 0.95; letter-spacing: 0em; text-transform: uppercase; } .display-md { font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4.25rem); /* 40 → 68px, matches hero__headline */ font-weight: 700; line-height: 1.02; letter-spacing: 0.005em; text-transform: uppercase; max-width: 26ch; } .pull-quote { font-family: var(--font-body); font-size: var(--t-xl); font-style: italic; font-weight: 400; line-height: 1.45; padding-left: var(--s-5); border-left: 3px solid var(--accent); max-width: 44ch; margin: var(--s-6) 0; color: var(--fg); } strong { font-weight: 500; } /* 6. Layout */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } .reading { max-width: var(--reading-column); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--s-9) 0; } .section--hero { padding: var(--s-7) 0 var(--s-8); } .section--tight { padding: var(--s-7) 0; } .stack > * + * { margin-top: var(--s-5); } .stack-md > * + * { margin-top: var(--s-6); } .stack-lg > * + * { margin-top: var(--s-8); } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } @media (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* 7. Rules / dividers */ .rule { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--s-7) 0; } .rule--strong { border-top-color: var(--border); } .rule--sun { position: relative; overflow: visible; margin: var(--s-8) 0; } .rule--sun::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--accent); border-radius: 50%; } /* 8. Navigation */ .nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out); backdrop-filter: saturate(1.2); } .nav.is-scrolled { border-bottom-color: var(--border); } .nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width); margin: 0 auto; padding: var(--s-4) var(--gutter); gap: var(--s-6); } .brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; } .brand:hover { color: inherit; text-decoration: none; } .logo-mark { width: 40px; height: 40px; border-radius: var(--r-lg); overflow: hidden; display: inline-block; flex-shrink: 0; background: var(--ink-950); } .logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .brand__name { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; } @media (max-width: 480px) { .brand__name { font-size: var(--t-sm); letter-spacing: 0.04em; } } .nav__links { display: flex; align-items: center; gap: var(--s-6); list-style: none; } .nav__links a { font-size: var(--t-sm); font-weight: 500; text-decoration: none; letter-spacing: 0.01em; color: var(--fg); padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav__links a:hover { color: var(--accent); border-bottom-color: var(--accent); } .nav__links a.is-active { border-bottom-color: var(--accent); } .nav__cta { display: flex; align-items: center; gap: var(--s-3); } .nav__toggle { display: none; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); cursor: pointer; color: inherit; font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; } .theme-toggle { background: transparent; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* Mobile-only CTA items inside nav__links (hidden on desktop) */ .nav__links-divider, .nav__links-cta { display: none; } @media (max-width: 767px) { .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--border); padding: var(--s-5) var(--gutter); align-items: stretch; gap: var(--s-3); } .nav__links.is-open { display: flex; } .nav__links li { width: 100%; } .nav__toggle { display: inline-flex; } /* Hide the desktop dropdown CTA — its options live inline in the drawer instead */ .nav__dropdown { display: none; } /* Mobile CTA section inside the drawer */ .nav__links-divider { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--border-hairline); } .nav__links-cta { display: block; } .nav__links-cta a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-sm); text-decoration: none; color: var(--fg); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .nav__links-cta a:hover { border-color: var(--accent); background: var(--bg); } .nav__links-cta__num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); } .nav__links-cta__label { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); text-transform: uppercase; letter-spacing: 0.015em; line-height: 1; } .nav__links-cta__arrow { color: var(--accent); font-family: var(--font-mono); font-size: var(--t-sm); } } /* 9. Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 12px 22px; border-radius: var(--r-sm); font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.02em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .btn--primary { background: var(--accent); color: var(--btn-primary-fg); } .btn--primary:hover { background: var(--accent-hover); color: var(--btn-primary-fg); } .btn--secondary { background: transparent; color: var(--fg); border-color: var(--fg); } .btn--secondary:hover { background: var(--bg-alt); color: var(--fg); } .btn--ghost { background: transparent; color: var(--fg); padding: 12px 0; } .btn--ghost:hover { color: var(--accent); } .btn--lg { padding: 16px 28px; font-size: var(--t-base); } /* 10. Forms / inputs */ input, select, textarea { font-family: var(--font-body); font-size: var(--t-base); padding: 12px 14px; background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-sm); width: 100%; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; } /* 11. Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-6); } .card--clickable { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); } .card--clickable:hover { border-color: var(--fg-muted); } .card--vertical { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-7) var(--s-6); position: relative; overflow: hidden; } .card--vertical .kicker { margin: 0; } .card--vertical h2 { font-size: var(--t-3xl); } .card--vertical .card__cta { margin-top: auto; padding-top: var(--s-4); } /* 12. Hero plate — A24 cinematic */ .hero { background: var(--ink-950); color: var(--paper-050); padding: var(--s-8) 0 var(--s-7); position: relative; overflow: hidden; --bg: var(--ink-950); --fg: var(--paper-050); --fg-muted: #C8C0B5; --border: var(--ink-700); --surface: var(--ink-800); --surface-ledger: var(--ledger-bg-dark); } .hero .kicker { color: var(--fg-muted); } .hero__grid { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } .hero__content { grid-column: 2 / 11; animation: hero-rise var(--dur-cinema) var(--ease-cinema) both; } @media (max-width: 1023px) { .hero__content { grid-column: 1 / -1; } } .hero__headline { font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4.25rem); /* 40 → 68px */ font-weight: 700; line-height: 1.02; letter-spacing: 0.005em; text-transform: uppercase; margin: var(--s-3) 0 var(--s-4); max-width: 26ch; } .hero__headline em { font-style: normal; color: var(--accent); font-weight: 700; position: relative; white-space: nowrap; } .hero__lede { font-size: var(--t-md); line-height: 1.55; max-width: 56ch; color: var(--fg-muted); } .hero__cta-row { margin-top: var(--s-7); display: flex; gap: var(--s-4); flex-wrap: wrap; } .hero__arc { position: absolute; top: -120px; right: -60px; width: 480px; height: 480px; pointer-events: none; opacity: 0.35; } .hero__arc path { stroke: var(--accent); stroke-width: 1.5; fill: none; } @keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* 13. Section header (kicker + headline + lede) */ .section-head { margin-bottom: var(--s-6); max-width: 64ch; } .section-head h2 { margin-bottom: var(--s-3); } .section-head .lede { color: var(--fg-muted); } /* 14. Ledger panel — the signature */ .ledger { background: var(--surface-ledger); border: 1px solid var(--border-hairline); border-radius: var(--r-tight); padding: var(--s-7); max-width: var(--reading-column); font-family: var(--font-mono); } .ledger--compact { max-width: 540px; padding: var(--s-6); } .ledger__header { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--border-hairline); padding-bottom: var(--s-3); margin-bottom: var(--s-5); gap: var(--s-4); } .ledger__header-left { letter-spacing: 0.08em; } .ledger__header-right { display: inline-flex; align-items: center; gap: var(--s-2); } .ledger__sun { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); opacity: 0.9; } .ledger__body { display: grid; gap: 0; } .ledger__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--border-hairline); } .ledger__row:last-child { border-bottom: none; } .ledger__row--group-end { margin-bottom: var(--s-3); } .ledger__label { font-size: var(--t-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); } .ledger__value { font-size: 0.9375rem; /* 15px */ font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; } .ledger__value--accent { color: var(--accent); } .ledger__quote { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border-hairline); } .ledger__quote blockquote { font-family: var(--font-body); font-size: var(--t-md); font-style: italic; font-weight: 400; line-height: 1.5; color: var(--fg); } .ledger__quote cite { display: block; margin-top: var(--s-3); font-family: var(--font-body); font-size: var(--t-sm); font-style: normal; color: var(--fg-muted); } .ledger__note { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px dashed var(--border-hairline); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); line-height: 1.5; } @media (max-width: 767px) { .ledger { padding: var(--s-6); } .ledger__row { grid-template-columns: 1fr; gap: var(--s-1); padding: var(--s-3) 0; } .ledger__label { font-size: 11px; } .ledger__header { flex-direction: column; align-items: flex-start; gap: var(--s-2); } } /* 15. Record panel (for top-level firm stats — home, about) */ .record { background: var(--surface-ledger); border: 1px solid var(--border-hairline); border-radius: var(--r-tight); padding: var(--s-7); max-width: var(--max-width); font-family: var(--font-mono); } .record__header { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--border-hairline); padding-bottom: var(--s-3); margin-bottom: var(--s-5); display: flex; justify-content: space-between; } .record__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } .record__stat { display: flex; flex-direction: column; gap: var(--s-2); } .record__stat .value { font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .record__stat .label { font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 767px) { .record__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } } /* 16. Vertical selector (home page two-door entry) */ .verticals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } @media (max-width: 767px) { .verticals { grid-template-columns: 1fr; } } .vertical-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-8) var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: var(--fg); position: relative; overflow: hidden; transition: border-color var(--dur-base) var(--ease-out); min-height: 320px; } .vertical-card:hover { border-color: var(--accent); color: var(--fg); text-decoration: none; } .vertical-card h2 { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 700; line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; } .vertical-card__arrow { margin-top: auto; display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); transition: transform var(--dur-base) var(--ease-out); } .vertical-card:hover .vertical-card__arrow { transform: translateX(4px); } /* 17. Services list */ .services-list { display: grid; gap: 0; border-top: 1px solid var(--border-hairline); } .service-row { display: grid; grid-template-columns: 80px 1fr 1fr 120px; gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; } .service-row__num { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: 0.08em; } .service-row__title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.1; } .service-row__desc { color: var(--fg-muted); font-size: var(--t-base); line-height: 1.55; } .service-row__meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-dim); letter-spacing: 0.08em; text-transform: uppercase; text-align: right; } @media (max-width: 767px) { .service-row { grid-template-columns: 60px 1fr; } .service-row__desc, .service-row__meta { grid-column: 2; text-align: left; } .service-row__meta { padding-top: var(--s-2); } } /* 18. Process steps */ .process { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } @media (max-width: 767px) { .process { grid-template-columns: 1fr; } } .process__step { display: flex; flex-direction: column; gap: var(--s-3); } .process__num { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: 0.08em; border-bottom: 1px solid var(--accent); padding-bottom: var(--s-3); display: inline-block; width: fit-content; } .process__title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.1; } .process__body { color: var(--fg-muted); line-height: 1.6; } /* 19. FAQ / stanza */ .stanza { border-top: 1px solid var(--border-hairline); padding: var(--s-6) 0; } .stanza h3 { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: var(--s-3); } .stanza p { color: var(--fg-muted); } /* 20. Footer */ .footer { background: var(--ink-950); color: var(--paper-050); padding: var(--s-9) 0 var(--s-6); margin-top: var(--s-10); --fg: var(--paper-050); --fg-muted: #C8C0B5; --border: var(--ink-700); --bg: var(--ink-950); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-7); } @media (max-width: 1023px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 639px) { .footer__grid { grid-template-columns: 1fr; } } .footer h4 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-4); font-weight: 400; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); } .footer a { color: var(--paper-050); text-decoration: none; } .footer a:hover { color: var(--accent); } .footer__brand .brand__name { color: var(--paper-050); } .footer__tag { font-family: var(--font-body); font-size: var(--t-base); font-weight: 400; line-height: 1.55; color: var(--paper-050); max-width: 36ch; margin-top: var(--s-4); } .footer__contact { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--paper-050); display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); } .footer__bottom { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--ink-700); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); letter-spacing: 0.08em; text-transform: uppercase; flex-wrap: wrap; } /* 21. Embed containers (Tally / Calendly) */ .embed-frame { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-6); max-width: var(--reading-column); margin: 0 auto; overflow: hidden; } .embed-frame--wide { max-width: 920px; } .embed-frame__header { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: 1px solid var(--border-hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); } .embed-frame__body { min-height: 200px; } .embed-frame__body > .calendly-inline-widget, .embed-frame__body > iframe { width: 100% !important; min-width: 0 !important; max-width: 100%; display: block; } @media (max-width: 600px) { .embed-frame { padding: var(--s-3); border-radius: var(--r-sm); } .embed-frame__header { padding-bottom: var(--s-3); margin-bottom: var(--s-3); } } /* 22. Utilities */ .text-muted { color: var(--fg-muted); } .text-dim { color: var(--fg-dim); } .text-accent { color: var(--accent); } .text-center { text-align: center; } .hairline { border-top: 1px solid var(--border-hairline); padding-top: var(--s-4); } .mono { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* 23. Scroll reveal */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* 24. Page-specific: vertical page hero variants */ .hero--solar .hero__arc { opacity: 0.5; } /* Compact centered hero — used on /landing and /solar-landing above the VSL */ .hero--compact { padding: var(--s-8) 0 var(--s-7); } .hero--compact .hero__grid { grid-template-columns: 1fr; } .hero--compact .hero__content { grid-column: 1 / -1; text-align: center; margin: 0 auto; max-width: 820px; } .hero--compact .hero__headline { margin: var(--s-3) auto var(--s-4); max-width: 24ch; } .hero--compact .hero__lede { font-size: var(--t-base); line-height: 1.55; max-width: 60ch; margin-left: auto; margin-right: auto; } .hero--compact .hero__cta-row { justify-content: center; } /* 25. Market proof stat grid (for /land) */ .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); padding: var(--s-7) 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); } @media (max-width: 767px) { .proof-grid { grid-template-columns: 1fr; gap: var(--s-5); } } .proof-stat .value { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 700; line-height: 1; letter-spacing: 0.005em; color: var(--accent); font-feature-settings: 'tnum'; } .proof-stat .label { color: var(--fg-muted); margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.5; } /* 26. Bench / audit banner (the guarantee) */ .guarantee { background: var(--ink-950); color: var(--paper-050); border-radius: var(--r-md); padding: var(--s-8) var(--s-7); margin: var(--s-9) 0; --fg: var(--paper-050); --fg-muted: #C8C0B5; position: relative; overflow: hidden; } .guarantee h2 { font-size: var(--t-3xl); line-height: 1.05; max-width: 26ch; font-weight: 700; } .guarantee h2 em { color: var(--accent); font-style: normal; font-weight: 700; } .guarantee p { color: var(--fg-muted); max-width: 52ch; margin-top: var(--s-4); } /* 27. Two-column split for /land and long pages */ .split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } @media (max-width: 1023px) { .split-2 { grid-template-columns: 1fr; } } /* 28. Editorial image blocks (Unsplash photos) */ .figure { margin: 0; position: relative; } .figure__img { width: 100%; height: auto; display: block; border-radius: var(--r-tight); filter: contrast(1.02) saturate(0.92); background: var(--bg-alt); } .figure--tall .figure__img { aspect-ratio: 3 / 4; object-fit: cover; } .figure--wide .figure__img { aspect-ratio: 16 / 9; object-fit: cover; } .figure--square .figure__img { aspect-ratio: 1 / 1; object-fit: cover; } .figure__caption { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border-hairline); display: flex; justify-content: space-between; gap: var(--s-4); } /* Image-split section: text + image side by side */ .image-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-7); align-items: center; } .image-split--reverse { grid-template-columns: 7fr 5fr; } .image-split--reverse > :first-child { order: 2; } .image-split--reverse > :last-child { order: 1; } @media (max-width: 1023px) { .image-split, .image-split--reverse { grid-template-columns: 1fr; gap: var(--s-6); } .image-split--reverse > :first-child, .image-split--reverse > :last-child { order: unset; } } /* Hero with background photo overlay */ .hero--photo { position: relative; isolation: isolate; } .hero--photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,12,0.70) 0%, rgba(14,13,12,0.88) 60%, rgba(14,13,12,0.95) 100%); z-index: -1; } .hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.05); } /* 29. Nav dropdown — Book a call with vertical selector */ .nav__dropdown { position: relative; } .nav__dropdown-trigger { display: inline-flex; align-items: center; gap: 8px; } .nav__dropdown-caret { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); font-size: 10px; margin-left: 2px; transform: translateY(1px); } .nav__dropdown.is-open .nav__dropdown-caret { transform: translateY(1px) rotate(180deg); } .nav__dropdown-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 16px 40px rgba(14, 13, 12, 0.22); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .nav__dropdown.is-open .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear 0s; } .nav__dropdown-header { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); padding: 8px 14px 6px; border-bottom: 1px solid var(--border-hairline); margin-bottom: 4px; } .nav__dropdown-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); text-decoration: none; color: var(--fg); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav__dropdown-item:hover { background: var(--bg-alt); color: var(--fg); text-decoration: none; } .nav__dropdown-item:hover .nav__dropdown-arrow { color: var(--accent); transform: translateX(3px); } .nav__dropdown-item__num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); } .nav__dropdown-item__label { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); text-transform: uppercase; letter-spacing: 0.015em; line-height: 1; } .nav__dropdown-arrow { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } /* 30. VSL placeholder */ .vsl-section { padding-top: var(--s-6); padding-bottom: var(--s-7); } .vsl { max-width: 920px; margin: 0 auto; aspect-ratio: 16 / 9; background: var(--ink-950); border: 2px dashed var(--ink-700); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--s-3); color: var(--paper-200); position: relative; overflow: hidden; text-align: center; padding: var(--s-5); } .vsl::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(230,74,61,0.08) 0%, transparent 60%); pointer-events: none; } .vsl__play { width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 24px; margin-bottom: var(--s-2); padding-left: 6px; } .vsl__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400); } .vsl__caption { font-family: var(--font-display); font-size: var(--t-xl); text-transform: uppercase; font-weight: 700; letter-spacing: 0.015em; color: var(--paper-050); line-height: 1.1; } .vsl__hint { font-family: var(--font-body); font-size: var(--t-sm); color: var(--ink-400); max-width: 34ch; line-height: 1.5; } .vsl > iframe, .vsl > img, .vsl__embed iframe, .vsl__embed video, .vsl > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vsl > img { object-fit: cover; filter: contrast(1.02) saturate(0.95); } /* Loaded-VSL modifier: removes the dashed-placeholder treatment so a real video/image looks clean. */ .vsl--video, .vsl--image { border-style: solid; border-color: var(--ink-800); padding: 0; } .vsl--video::before, .vsl--image::before { display: none; } /* 31. Case study cards (used on /proof) */ .proof-section { margin-bottom: var(--s-9); } .proof-section__title { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); border-top: 1px solid var(--border); padding-top: var(--s-4); margin-bottom: var(--s-6); display: flex; justify-content: space-between; align-items: baseline; } .proof-section__count { font-size: 11px; letter-spacing: 0.1em; color: var(--fg-dim); } .case-study { background: var(--surface-ledger); border: 1px solid var(--border-hairline); border-radius: var(--r-tight); padding: var(--s-7); margin-bottom: var(--s-5); font-family: var(--font-body); position: relative; } .case-study--security { border-left: 3px solid var(--accent); } .case-study--solar { border-left: 3px solid var(--accent); } .case-study__header { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--border-hairline); padding-bottom: var(--s-3); margin-bottom: var(--s-4); gap: var(--s-4); flex-wrap: wrap; } .case-study__headline { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 600; line-height: 1.1; letter-spacing: 0.005em; text-transform: uppercase; color: var(--fg); margin-bottom: var(--s-5); max-width: 42ch; } .case-study__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-5); } @media (max-width: 767px) { .case-study__stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } } .case-study__stat { background: var(--bg-alt); border: 1px solid var(--border-hairline); border-radius: var(--r-tight); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); } .case-study__value { font-family: var(--font-display); font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 700; letter-spacing: 0.005em; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; } .case-study__stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); font-weight: 500; } .case-study__stat-note { font-size: 11px; color: var(--fg-muted); line-height: 1.4; margin-top: var(--s-1); } .case-study__body { display: grid; gap: 0; margin-bottom: var(--s-4); border-top: 1px solid var(--border-hairline); } .case-study__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; font-family: var(--font-mono); } .case-study__row > span:first-child { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); } .case-study__row > span:last-child { font-size: 0.9375rem; color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; } .case-study__row:last-child { border-bottom: none; } @media (max-width: 767px) { .case-study__row { grid-template-columns: 1fr; gap: var(--s-1); } } .case-study__quote { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border-hairline); font-family: var(--font-body); } .case-study__quote blockquote { font-style: italic; font-size: var(--t-md); line-height: 1.5; color: var(--fg); margin-bottom: var(--s-2); } .case-study__quote cite { font-style: normal; font-size: var(--t-sm); color: var(--fg-muted); font-family: var(--font-body); } .case-study__pending { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px; border-radius: var(--r-tight); margin-left: var(--s-2); } /* Inline mini-record summary used on home/security/solar in place of full ledgers */ .proof-teaser { background: var(--surface-ledger); border: 1px solid var(--border-hairline); border-radius: var(--r-tight); padding: var(--s-6) var(--s-7); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; } .proof-teaser__copy { flex: 1 1 320px; } .proof-teaser__title { font-family: var(--font-display); font-size: var(--t-lg); text-transform: uppercase; letter-spacing: 0.01em; font-weight: 600; color: var(--fg); line-height: 1.15; margin-bottom: var(--s-2); } .proof-teaser__sub { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } /* 32. Compact case-card grid (used on /landing + /solar-landing) */ .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } @media (max-width: 1023px) { .case-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 559px) { .case-grid { grid-template-columns: 1fr; } } .case-card { background: var(--surface-ledger); border: 1px solid var(--border-hairline); border-radius: var(--r-tight); padding: var(--s-5) var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; color: var(--fg); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .case-card:hover { border-color: var(--accent); color: var(--fg); text-decoration: none; } .case-card:hover .case-card__cta { color: var(--accent); } .case-card:hover .case-card__cta-arrow { transform: translateX(3px); } .case-card__header { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; border-bottom: 1px solid var(--border-hairline); padding-bottom: var(--s-2); line-height: 1.3; } .case-card__headline { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; line-height: 1.15; letter-spacing: 0.005em; text-transform: uppercase; color: var(--fg); flex: 1; min-height: 3em; } .case-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } .case-card__stat { background: var(--bg-alt); border: 1px solid var(--border-hairline); border-radius: var(--r-tight); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); } .case-card__value { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; letter-spacing: 0.005em; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; } .case-card__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); line-height: 1.3; } .case-card__cta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1); transition: color var(--dur-fast) var(--ease-out); } .case-card__cta-arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); } /* 34. Blog */ .post-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-4); } .post-breadcrumbs a { color: var(--fg-muted); text-decoration: none; border-bottom: 1px solid transparent; } .post-breadcrumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); } .post-breadcrumbs span[aria-hidden="true"] { opacity: 0.5; } .post-meta { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-6); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .post-meta__cell { display: inline-flex; align-items: center; gap: var(--s-2); } .post-meta__cell + .post-meta__cell::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-right: var(--s-3); vertical-align: middle; } .post-body { font-size: var(--t-md); line-height: 1.75; } .post-body > * + * { margin-top: var(--s-5); } .post-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; margin-top: var(--s-9); margin-bottom: var(--s-4); color: var(--fg); } .post-body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.25; margin-top: var(--s-7); margin-bottom: var(--s-3); color: var(--fg); } .post-body h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--t-md); margin-top: var(--s-6); margin-bottom: var(--s-3); color: var(--fg); } .post-body p { color: var(--fg); } .post-body ul, .post-body ol { padding-left: var(--s-6); color: var(--fg); } .post-body li + li { margin-top: var(--s-2); } .post-body ul li { list-style: disc; } .post-body ol li { list-style: decimal; } .post-body a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } .post-body a:hover { color: var(--accent); text-decoration-thickness: 2px; } .post-body blockquote { border-left: 3px solid var(--accent); background: var(--surface-ledger); padding: var(--s-5) var(--s-6); margin: var(--s-6) 0; font-family: var(--font-body); font-style: normal; color: var(--fg); font-size: var(--t-md); border-radius: 0 var(--radius-2) var(--radius-2) 0; } .post-body blockquote p:first-child strong:first-child { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .post-body blockquote ul { padding-left: var(--s-5); margin-top: var(--s-3); } .post-body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-ledger); padding: 0.1em 0.35em; border-radius: var(--radius-1); color: var(--accent); } .post-body hr { border: none; border-top: 1px solid var(--rule); margin: var(--s-8) 0; } .post-body strong { font-weight: 600; color: var(--fg); } .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-6); } .post-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-7); background: var(--surface-ledger); border-radius: var(--radius-3); text-decoration: none; color: inherit; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); border: 1px solid var(--rule); } .post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14, 13, 12, 0.08); } .post-card__meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); } .post-card__vertical { color: var(--accent); } .post-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-2xl); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg); margin: 0; } .post-card__desc { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; margin: 0; } .post-card__cta { margin-top: auto; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .post-card:hover .post-card__cta { letter-spacing: 0.12em; } /* 35. Links page (linktree-style, /links/) */ .links-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-7) var(--s-5); background: var(--bg); } .links-page__inner { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-6); } .links-page__brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-decoration: none; color: var(--fg); } .links-page__mark { width: 88px; height: 88px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-ledger); display: flex; align-items: center; justify-content: center; } .links-page__mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .links-page__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); letter-spacing: 0.04em; color: var(--fg); } .links-page__tag { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin: 0; } .links-page__list { width: 100%; display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-3); } .link-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: var(--s-5); align-items: center; padding: var(--s-5) var(--s-6); background: var(--surface-ledger); border: 1px solid var(--rule); border-radius: var(--r-md); text-decoration: none; color: var(--fg); text-align: left; transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .link-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 24px rgba(14, 13, 12, 0.10); } .link-card__num { grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--accent); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .link-card__label { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); line-height: 1.2; color: var(--fg); } .link-card__sub { grid-column: 2; grid-row: 2; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin-top: 2px; } .link-card__arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: var(--t-xl); color: var(--accent); transition: transform var(--dur-fast) var(--ease-out); } .link-card:hover .link-card__arrow { transform: translateX(4px); } .links-page__footer { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); } .links-page__footer .theme-toggle { width: 32px; height: 32px; font-size: 14px; } @media (max-width: 600px) { .links-page { padding: var(--s-6) var(--s-4); } .link-card { padding: var(--s-4) var(--s-5); column-gap: var(--s-4); } .link-card__label { font-size: var(--t-md); } } /* Case study icon (used on /ai-consulting) */ .case-study__icon { display: flex; justify-content: center; align-items: center; margin-bottom: var(--s-6); color: var(--accent); } .case-study__icon svg { width: 56px; height: 56px; display: block; } @media (max-width: 600px) { .case-study__icon svg { width: 44px; height: 44px; } } /* Inline accordion dropdown for /links */ .link-dropdown { width: 100%; position: relative; } .link-card--trigger { width: 100%; font: inherit; cursor: pointer; background: var(--surface-ledger); } .link-card--trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .link-card__caret { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: var(--t-xl); color: var(--accent); transition: transform var(--dur-fast) var(--ease-out); } .link-dropdown.is-open .link-card--trigger { border-color: var(--accent); } .link-dropdown.is-open .link-card__caret { transform: rotate(180deg); } .link-dropdown__menu { display: none; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); padding-left: var(--s-4); border-left: 2px solid var(--accent); } .link-dropdown.is-open .link-dropdown__menu { display: flex; } .link-dropdown__item { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-sm); text-decoration: none; color: var(--fg); text-align: left; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .link-dropdown__item:hover { border-color: var(--accent); transform: translateX(2px); } .link-dropdown__item-num { grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; } .link-dropdown__item-label { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); line-height: 1.2; color: var(--fg); } .link-dropdown__item-sub { grid-column: 2; grid-row: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin-top: 2px; } .link-dropdown__item-arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: var(--t-md); color: var(--accent); } /* 36. Chat widget (Formacha AI sales agent) */ .fc-chat-bubble { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 999px; background: var(--accent); color: var(--btn-primary-fg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(14, 13, 12, 0.20), 0 2px 6px rgba(14, 13, 12, 0.12); z-index: 9000; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); animation: fc-pulse 2.4s ease-out 1.2s 3; } .fc-chat-bubble:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px rgba(14, 13, 12, 0.25); } .fc-chat-bubble svg { width: 24px; height: 24px; display: block; } .fc-chat-bubble.is-hidden { transform: translateY(80px) scale(0.9); opacity: 0; pointer-events: none; } @keyframes fc-pulse { 0%, 100% { box-shadow: 0 12px 28px rgba(14, 13, 12, 0.20), 0 2px 6px rgba(14, 13, 12, 0.12), 0 0 0 0 rgba(230, 74, 61, 0.5); } 50% { box-shadow: 0 12px 28px rgba(14, 13, 12, 0.20), 0 2px 6px rgba(14, 13, 12, 0.12), 0 0 0 16px rgba(230, 74, 61, 0); } } .fc-chat-panel { position: fixed; bottom: 24px; right: 24px; width: 380px; max-width: calc(100vw - 32px); height: 600px; max-height: calc(100vh - 48px); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: 0 24px 64px rgba(14, 13, 12, 0.24), 0 4px 12px rgba(14, 13, 12, 0.12); display: flex; flex-direction: column; overflow: hidden; z-index: 9001; transform: translateY(20px) scale(0.96); opacity: 0; pointer-events: none; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .fc-chat-panel.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .fc-chat-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--rule); background: var(--surface-ledger); } .fc-chat-header__title { display: flex; flex-direction: column; gap: 2px; } .fc-chat-header__brand { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); letter-spacing: 0.02em; color: var(--fg); text-transform: uppercase; } .fc-chat-header__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); } .fc-chat-status { color: var(--accent); position: relative; padding-left: 12px; } .fc-chat-status::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); animation: fc-pulse-dot 1.6s ease-in-out infinite; } @keyframes fc-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .fc-chat-close { background: transparent; border: 1px solid transparent; color: var(--fg-muted); width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .fc-chat-close:hover { color: var(--fg); border-color: var(--rule); } .fc-chat-close svg { width: 16px; height: 16px; } .fc-chat-messages { flex: 1; overflow-y: auto; padding: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); background: var(--bg); } .fc-msg { display: flex; flex-direction: column; gap: var(--s-2); max-width: 88%; } .fc-msg--user { align-self: flex-end; align-items: flex-end; } .fc-msg--bot { align-self: flex-start; align-items: flex-start; } .fc-msg__bubble { padding: var(--s-3) var(--s-4); border-radius: 14px; font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .fc-msg--user .fc-msg__bubble { background: var(--accent); color: var(--btn-primary-fg); border-bottom-right-radius: 4px; } .fc-msg--bot .fc-msg__bubble { background: var(--surface-ledger); color: var(--fg); border: 1px solid var(--rule); border-bottom-left-radius: 4px; } .fc-msg__cta { display: inline-flex; align-items: center; gap: 4px; padding: var(--s-3) var(--s-5); background: var(--accent); color: var(--btn-primary-fg); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: 999px; font-weight: 600; transition: transform var(--dur-fast) var(--ease-out); } .fc-msg__cta:hover { transform: translateY(-1px); color: var(--btn-primary-fg); text-decoration: none; } .fc-msg--typing .fc-msg__bubble { display: flex; gap: 4px; padding: var(--s-4); } .fc-msg--typing .fc-msg__bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); animation: fc-typing 1.2s ease-in-out infinite; } .fc-msg--typing .fc-msg__bubble span:nth-child(2) { animation-delay: 0.15s; } .fc-msg--typing .fc-msg__bubble span:nth-child(3) { animation-delay: 0.3s; } @keyframes fc-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } .fc-chat-form { display: flex; align-items: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--rule); background: var(--surface-ledger); } .fc-chat-input { flex: 1; resize: none; padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.4; max-height: 140px; min-height: 40px; outline: none; transition: border-color var(--dur-fast) var(--ease-out); } .fc-chat-input:focus { border-color: var(--accent); } .fc-chat-input:disabled { opacity: 0.6; cursor: not-allowed; } .fc-chat-send { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--accent); color: var(--btn-primary-fg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); } .fc-chat-send:hover:not(:disabled) { transform: translateY(-1px); } .fc-chat-send:disabled { opacity: 0.5; cursor: not-allowed; } .fc-chat-send svg { width: 18px; height: 18px; } .fc-chat-fallback { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-5); border-top: 1px solid var(--rule); background: var(--surface-ledger); } .fc-chat-fallback__heading { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--fg); line-height: 1.25; } .fc-chat-fallback__sub { font-family: var(--font-body); font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.5; margin-bottom: var(--s-2); } .fc-chat-fallback__list { display: flex; flex-direction: column; gap: var(--s-2); } .fc-chat-fallback__cta { display: block; padding: var(--s-3) var(--s-4); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-sm); color: var(--fg); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; font-weight: 600; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .fc-chat-fallback__cta:hover { border-color: var(--accent); color: var(--accent); transform: translateX(2px); text-decoration: none; } .fc-chat-fallback__note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin-top: var(--s-2); } .fc-chat-fallback__note a { color: var(--accent); } @media (max-width: 600px) { .fc-chat-bubble { width: 52px; height: 52px; bottom: 16px; right: 16px; } .fc-chat-panel { bottom: 0; right: 0; left: 0; top: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: none; } body.fc-chat-locked { overflow: hidden; } } /* 37. Print / legibility guards */ ::selection { background: var(--accent); color: var(--btn-primary-fg); }