/* ============================================================ MCODE VENTURES — "MCode Modern" Navy + crimson brand · Bricolage Grotesque display · Rounded cards · pill buttons · big stats · photo-forward Fonts loaded via in each page (preconnect). ============================================================ */ :root { /* ---------- Brand palette (kept from logo) ---------- */ --navy: #084060; --navy-deep: #052e45; --navy-soft: #0f4d70; --navy-line: rgba(255, 255, 255, 0.12); --crimson: #e80838; --crimson-deep:#c00630; --crimson-soft:#ff1f4f; /* ---------- Paper & ink (warm cream) ---------- */ --paper: #f3eee2; /* primary cream-paper */ --paper-deep: #e7dec6; /* recessed panels */ --paper-soft: #fbf7ec; /* lifted cards */ --white: #ffffff; --ink: #0a1c28; /* primary text — near-black navy */ --ink-soft: #38474f; --mute: #6c7077; --mute-soft: #9b9c9c; --line: #d6cdb6; /* warm hairline */ --line-soft: #e2dbc8; /* ---------- Type ---------- */ --display: 'Bricolage Grotesque', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --serif-it:'Instrument Serif', 'Iowan Old Style', Georgia, serif; /* ---------- Metrics ---------- */ --container: 1280px; --gutter: 40px; --radius: 20px; --radius-sm: 12px; --ease: cubic-bezier(0.22, 0.61, 0.27, 1); --shadow-lift: 0 30px 60px -28px rgba(8, 30, 50, 0.28); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--sans); background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 400; line-height: 1.6; overflow-x: hidden; font-feature-settings: "kern" 1, "liga" 1; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } ::selection { background: var(--crimson); color: #fff; } :focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--navy); color: var(--paper-soft); padding: 12px 20px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* responsive visibility utilities */ .show-mobile { display: none; } @media (max-width: 540px) { .hide-mobile { display: none !important; } .show-mobile { display: inline !important; } } /* ---------- Layout ---------- */ .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } section { padding: 130px 0; } .section-tight { padding: 84px 0; } .rule { height: 1px; background: var(--line); border: 0; } /* ---------- Logo ---------- */ .logo-img { height: 30px; width: auto; display: block; transition: opacity 0.3s var(--ease); } .logo-link:hover .logo-img { opacity: 0.78; } /* ---------- Navigation ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 20px 0; background: rgba(243, 238, 226, 0.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid transparent; transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease); } .nav.scrolled { padding: 12px 0; background: rgba(243, 238, 226, 0.96); border-bottom-color: var(--line); } .nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 40px; } .nav-menu { display: flex; align-items: center; gap: 40px; } .nav-links { display: flex; gap: 36px; align-items: center; } .nav-links a { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-soft); letter-spacing: -0.005em; position: relative; padding: 6px 0; transition: color 0.25s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a[aria-current="page"] { color: var(--crimson); } .nav-cta { font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 12px 24px; background: var(--navy); color: var(--paper-soft); border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background 0.3s var(--ease), transform 0.3s var(--ease); } .nav-cta::after { content: '\2192'; transition: transform 0.3s var(--ease); } .nav-cta:hover { background: var(--crimson); transform: translateY(-1px); } .nav-cta:hover::after { transform: translateX(3px); } .menu-toggle { display: none; flex-direction: column; gap: 5px; width: 26px; padding: 5px 0; } .menu-toggle span { width: 100%; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } /* ---------- Buttons (pill) ---------- */ .btn { display: inline-flex; align-items: center; gap: 11px; padding: 16px 28px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.005em; border-radius: 999px; border: 1px solid transparent; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease); } .btn .arrow { transition: transform 0.35s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:hover .arrow { transform: translateX(5px); } .btn-primary { background: var(--navy); color: var(--paper-soft); } .btn-primary:hover { background: var(--crimson); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--paper); } .btn-light { background: var(--paper-soft); color: var(--navy); } .btn-light:hover { background: var(--crimson); color: #fff; } .btn-light-ghost { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.32); } .btn-light-ghost:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); } /* ---------- Typography ---------- */ .h-display { font-family: var(--display); font-weight: 600; font-size: clamp(54px, 8.2vw, 128px); line-height: 0.98; letter-spacing: -0.035em; } .h-section { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 5vw, 76px); line-height: 1.04; letter-spacing: -0.028em; } .h-sub { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; } /* selective serif-italic emphasis (the "Building Better Strategies" trick) */ .h-display em, .h-section em, .h-sub em { font-family: var(--serif-it); font-style: italic; font-weight: 400; letter-spacing: -0.005em; } .accent { color: var(--crimson); font-family: var(--serif-it); font-style: italic; font-weight: 400; } /* eyebrow — mono pill label with crimson tick */ .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); display: inline-flex; align-items: center; gap: 14px; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--crimson); flex: none; } .eyebrow-light { color: rgba(243, 238, 226, 0.74); } .eyebrow-bare::before { display: none; } .s-index { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } .s-index b { color: var(--crimson); font-weight: 500; } .lede { font-size: 19px; line-height: 1.62; color: var(--ink-soft); font-weight: 400; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--crimson); vertical-align: middle; } /* ---------- Page masthead ---------- */ .masthead { background: var(--paper); padding: 180px 0 0; } .masthead-inner { padding: 56px 0 78px; } .masthead h1 { font-family: var(--display); font-weight: 600; font-size: clamp(50px, 7.6vw, 108px); line-height: 1.0; letter-spacing: -0.034em; color: var(--ink); } .masthead h1 em { font-family: var(--serif-it); font-style: italic; font-weight: 400; letter-spacing: -0.005em; } .masthead-lede { margin-top: 36px; font-size: 19px; line-height: 1.62; color: var(--ink-soft); max-width: 62ch; } .masthead-sub { margin-top: 52px; padding-top: 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .masthead-sub p { font-size: 17px; line-height: 1.66; color: var(--ink-soft); } /* ---------- Numbered section head ---------- */ .s-head { display: grid; grid-template-columns: 1fr 1.85fr; gap: 64px; align-items: start; margin-bottom: 64px; } .s-head-meta { position: sticky; top: 112px; } .s-head-meta .s-index { display: block; margin-bottom: 18px; } .s-head h2 { color: var(--ink); } .s-head-note { font-size: 16px; line-height: 1.66; color: var(--ink-soft); margin-top: 22px; max-width: 46ch; } /* ---------- Card primitive ---------- */ .card { background: var(--paper-soft); border-radius: var(--radius); overflow: hidden; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } /* ---------- Footer ---------- */ footer { background: var(--navy-deep); color: var(--paper); padding: 110px 0 36px; } .footer-top { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1.3fr; gap: 56px; padding-bottom: 40px; } .footer-brand .logo-img { height: 32px; margin-bottom: 24px; } .footer-brand p { font-size: 14px; line-height: 1.7; color: rgba(243, 238, 226, 0.62); max-width: 340px; } .footer-col h2 { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 238, 226, 0.45); margin-bottom: 22px; } .footer-col li { margin-bottom: 13px; } .footer-col a, .footer-col address { font-size: 14px; font-style: normal; color: rgba(243, 238, 226, 0.85); line-height: 1.6; transition: color 0.25s var(--ease); } .footer-col a:hover { color: var(--crimson-soft); } .footer-disclaimer { padding-bottom: 28px; border-bottom: 1px solid var(--navy-line); font-size: 14px; line-height: 1.7; color: rgba(243, 238, 226, 0.62); max-width: 150ch; } .footer-base { padding-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(243, 238, 226, 0.42); } /* ---------- Image treatment — natural color with subtle warm wash ---------- */ .img-wash { position: relative; overflow: hidden; background: var(--paper-deep); border-radius: var(--radius); } .img-wash img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.04) saturate(1.02); transition: transform 1.1s var(--ease), filter 0.6s var(--ease); } .img-wash:hover img { transform: scale(1.04); } .img-wash-dark::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 46, 69, 0.18) 0%, rgba(5, 46, 69, 0.55) 100%); } /* ---------- Reveal animations ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .img-wash img, .img-wash:hover img { transition: none; transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 920px) { :root { --gutter: 22px; } section { padding: 88px 0; } .section-tight { padding: 60px 0; } .masthead { padding: 116px 0 0; } .masthead-inner { padding: 30px 0 46px; } .masthead h1 { font-size: clamp(38px, 9vw, 64px); } .masthead-lede { font-size: 16px; margin-top: 24px; } .masthead-sub { grid-template-columns: 1fr; gap: 22px; margin-top: 30px; padding-top: 26px; } .masthead-sub p { font-size: 15px; } .s-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; } .s-head-meta { position: static; } .s-head h2.h-sub, .s-head .h-sub { font-size: clamp(24px, 5.6vw, 34px); } .s-head-note { font-size: 15px; } .h-section { font-size: clamp(32px, 7.4vw, 52px); } .h-display { font-size: clamp(44px, 10vw, 80px); } .nav { padding: 14px 0; } .nav.scrolled { padding: 10px 0; } .logo-img { height: 26px; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 26px; background: var(--paper); padding: 28px var(--gutter) 32px; border-bottom: 1px solid var(--line); } .nav.open .nav-menu { display: flex; } .nav-links { flex-direction: column; align-items: flex-start; gap: 20px; } .nav-links a { font-size: 17px; } .menu-toggle { display: flex; } .nav.open .menu-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav.open .menu-toggle span:nth-child(2) { opacity: 0; } .nav.open .menu-toggle span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); } .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-brand { grid-column: 1 / -1; } .footer-base { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; gap: 34px; } }