/* ========================================================================== Commodore Capital Group — site stylesheet Design tokens live in :root. Change a colour once here, it changes site-wide. ========================================================================== */ :root{ /* Brand */ --ink: #0B0B0C; /* near-black, primary background */ --ink-2: #141416; /* raised dark surface */ --ink-3: #1D1D20; /* hairline / border on dark */ --gold: #C9A96A; /* CCG accent */ --gold-bright: #E0C68C; --gold-dim: rgba(201,169,106,.14); --gold-ink: #8A6A2B; /* gold for TEXT on light backgrounds (4.78:1 on --paper). --gold itself is only 2.13:1 there, so never use it for light-mode text. */ --paper: #FAF9F7; /* light background */ --paper-2: #F1EFEA; --line: #E2DED6; /* hairline on light */ --text-dark: #17171A; --text-body: #4A4A52; --text-muted: #7C7C86; --text-on-dark: #F5F3EF; --text-on-dark-2: #A9A7A2; /* Type */ --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Rhythm */ --wrap: 1200px; --gutter: clamp(20px, 4.4vw, 56px); --section-y: clamp(64px, 7.5vw, 112px); --radius: 4px; --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } body{ margin:0; background:var(--paper); color:var(--text-body); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* `overflow-x:clip` (not `hidden`) keeps the page from scrolling sideways without turning into its own scroll container, which breaks position:fixed measurement and IntersectionObserver on some browsers. */ html,body{ overflow-x:clip } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} button{font:inherit; cursor:pointer; border:0; background:none; color:inherit} h1,h2,h3,h4{margin:0; color:var(--text-dark); font-weight:400; letter-spacing:-.01em} p{margin:0} ul{margin:0; padding:0; list-style:none} /* ---------- type scale ---------- */ .display{ font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-.022em; } .d1{ font-size:clamp(3rem, 8.2vw, 6.6rem); } .d2{ font-size:clamp(2.35rem, 5.4vw, 4.2rem); } .d3{ font-size:clamp(1.75rem, 3.2vw, 2.6rem); } .eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 1.15rem; } .section--dark .eyebrow,.pagehead .eyebrow,.cta .eyebrow,.hero .eyebrow{ color:var(--gold) } .eyebrow--dark{ color:var(--text-muted) } .lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.66; color:var(--text-body) } /* ---------- layout ---------- */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) } .section{ padding-block:var(--section-y) } .section--dark{ background:var(--ink); color:var(--text-on-dark) } .section--dark h1,.section--dark h2,.section--dark h3{ color:var(--text-on-dark) } .section--dark .lead{ color:var(--text-on-dark-2) } .section--tint{ background:var(--paper-2) } /* The dark page header already supplies breathing room; without this the first section adds a second full pad and leaves a dead band on large screens. */ .pagehead + .section{ padding-top:clamp(48px,5vw,76px) } .rule{ height:1px; background:var(--line); border:0; margin:0 } .section--dark .rule{ background:var(--ink-3) } /* ---------- skip link ---------- */ .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:var(--ink); padding:.75rem 1.25rem; font-weight:600; } .skip:focus{ left:12px; top:12px } /* ========================================================================== Navigation ========================================================================== */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s; border-bottom:1px solid transparent; } .nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:76px; } .nav__logo img{ height:34px; width:auto; transition:opacity .3s } .nav__logo .logo-dark{ display:none } .nav__links{ display:flex; align-items:center; gap:2.25rem } .nav__link{ font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-on-dark); opacity:.82; position:relative; padding-block:.35rem; transition:opacity .25s, color .25s; } .nav__link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); } .nav__link:hover{ opacity:1 } .nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left } .nav__link[aria-current="page"]{ opacity:1; color:var(--gold) } /* solid state after scroll, and on interior pages */ .nav.is-solid{ background:rgba(11,11,12,.86); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom-color:var(--ink-3); } /* mobile */ .nav__toggle{ display:none; width:44px; height:44px; margin-right:-10px; position:relative; z-index:2 } .nav__toggle span{ display:block; height:1.5px; width:22px; background:var(--text-on-dark); margin:5px auto; transition:transform .3s var(--ease), opacity .2s; } .nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) } .nav.is-open .nav__toggle span:nth-child(2){ opacity:0 } .nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) } @media (max-width:860px){ .nav__toggle{ display:block } .nav__links{ position:fixed; inset:0; background:var(--ink); flex-direction:column; justify-content:center; gap:2rem; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; } .nav.is-open .nav__links{ opacity:1; visibility:visible } .nav__link{ font-size:1.15rem } .nav__links .btn{ font-size:.95rem } } /* ========================================================================== Buttons ========================================================================== */ .btn{ display:inline-flex; align-items:center; gap:.7rem; padding:.95rem 1.7rem; border-radius:var(--radius); font-size:.8rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s; border:1px solid transparent; white-space:nowrap; } .btn:hover{ transform:translateY(-2px) } .btn:active{ transform:translateY(0) } .btn--gold{ background:var(--gold); color:var(--ink) } .btn--gold:hover{ background:var(--gold-bright) } .btn--ghost{ border-color:rgba(245,243,239,.28); color:var(--text-on-dark) } .btn--ghost:hover{ border-color:var(--gold); color:var(--gold) } .btn--dark{ background:var(--ink); color:var(--text-on-dark) } .btn--dark:hover{ background:var(--ink-2) } .btn--outline{ border-color:var(--text-dark); color:var(--text-dark) } .btn--outline:hover{ background:var(--text-dark); color:var(--paper) } .btn__arrow{ transition:transform .3s var(--ease) } .btn:hover .btn__arrow{ transform:translateX(4px) } .btn--sm{ padding:.7rem 1.2rem; font-size:.72rem } /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--ink); overflow:hidden; padding-bottom:clamp(56px,9vh,96px); } .hero__media{ position:absolute; inset:0; z-index:0 } .hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.42; transform:scale(1.06); animation:heroDrift 26s var(--ease) forwards; } @keyframes heroDrift{ to{ transform:scale(1) } } @media (prefers-reduced-motion:reduce){ .hero__media img{ animation:none; transform:none } } .hero__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.35) 38%, rgba(11,11,12,.94) 100%), radial-gradient(120% 80% at 20% 100%, rgba(201,169,106,.12), transparent 60%); } .hero__inner{ position:relative; z-index:1; width:100%; } .hero__title{ color:var(--text-on-dark); max-width:16ch } .hero__title em{ font-style:normal; color:var(--gold) } .hero__sub{ margin-top:1.6rem; max-width:46ch; color:var(--text-on-dark-2); font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.6; } .hero__actions{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.9rem } .hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:1; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text-on-dark-2); display:flex; flex-direction:column; align-items:center; gap:.6rem; } .hero__scroll::after{ content:""; width:1px; height:34px; background:linear-gradient(var(--gold), transparent); animation:scrollPulse 2.4s ease-in-out infinite; } @keyframes scrollPulse{ 0%,100%{opacity:.3; transform:scaleY(.6); transform-origin:top} 50%{opacity:1; transform:scaleY(1)} } @media (max-width:700px){ .hero__scroll{ display:none } } /* page header for interior pages */ .pagehead{ background:var(--ink); padding-top:calc(76px + clamp(48px,6vw,80px)); padding-bottom:clamp(44px,5.5vw,72px); position:relative; overflow:hidden; } .pagehead__media{ position:absolute; inset:0; z-index:0 } .pagehead__media img{ width:100%; height:100%; object-fit:cover; opacity:.22 } .pagehead__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,12,.8), rgba(11,11,12,.97)); } .pagehead .wrap{ position:relative; z-index:1 } .pagehead h1{ color:var(--text-on-dark) } .pagehead p{ color:var(--text-on-dark-2); margin-top:1rem; max-width:52ch } /* ========================================================================== Stats strip ========================================================================== */ .stats{ border-top:1px solid var(--ink-3); background:var(--ink) } .stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); } .stat{ padding:clamp(28px,4vw,48px) 0; text-align:center; border-right:1px solid var(--ink-3) } .stat:last-child{ border-right:0 } .stat__value{ font-family:var(--serif); font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1; color:var(--gold); letter-spacing:-.02em; } .stat__label{ margin-top:.6rem; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--text-on-dark-2); } @media (max-width:700px){ .stats__grid{ grid-template-columns:repeat(2,1fr) } .stat:nth-child(2){ border-right:0 } .stat:nth-child(-n+2){ border-bottom:1px solid var(--ink-3) } } /* ========================================================================== Section heading block ========================================================================== */ .sechead{ max-width:62ch; margin-bottom:clamp(32px,4vw,56px) } .sechead--center{ margin-inline:auto; text-align:center } /* ========================================================================== Pillars ========================================================================== */ .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line) } .pillar{ background:var(--paper); padding:clamp(30px,3.4vw,46px); transition:background .4s var(--ease); } .pillar:hover{ background:var(--paper-2) } .pillar__num{ font-family:var(--serif); font-size:1.05rem; color:var(--gold-ink); display:block; margin-bottom:1.6rem; } .pillar h3{ font-family:var(--serif); font-size:1.75rem; margin-bottom:.9rem } .pillar p{ font-size:.96rem; line-height:1.7; color:var(--text-body) } @media (max-width:860px){ .pillars{ grid-template-columns:1fr } } /* ========================================================================== Placements marquee ========================================================================== */ .marquee{ overflow:hidden; position:relative; padding-block:clamp(28px,3.5vw,44px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .marquee__track{ display:flex; width:max-content; animation:slide 52s linear infinite } .marquee:hover .marquee__track{ animation-play-state:paused } @keyframes slide{ to{ transform:translateX(-50%) } } @media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none } } .marquee__item{ flex:0 0 auto; width:clamp(140px,15vw,196px); height:70px; margin-inline:clamp(16px,2.4vw,34px); display:grid; place-items:center; } .marquee__item img{ max-height:44px; width:auto; object-fit:contain; filter:grayscale(1) brightness(0) invert(1); opacity:.5; transition:opacity .35s, filter .35s; } .marquee__item:hover img{ opacity:1; filter:grayscale(0) } /* ========================================================================== Team ========================================================================== */ /* auto-FILL (not auto-fit) keeps empty tracks, so a 3-person row and a 5-person row render cards at the same size instead of stretching the short row. */ .team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:clamp(18px,2vw,28px) } .member__photo{ aspect-ratio:4/5; overflow:hidden; background:var(--paper-2); border-radius:var(--radius); position:relative; } .member__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; transition:transform .7s var(--ease), filter .5s; filter:grayscale(.35) } .member:hover .member__photo img{ transform:scale(1.045); filter:grayscale(0) } .member__name{ margin-top:1.1rem; font-family:var(--serif); font-size:1.35rem; color:var(--text-dark) } .member__role{ margin-top:.28rem; font-size:.67rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-ink); } .section--dark .member__role{ color:var(--gold) } .member__bio{ margin-top:.85rem; font-size:.9rem; line-height:1.66; color:var(--text-body) } .member__links{ margin-top:.9rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center } .member__links a{ font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .25s, border-color .25s; } .member__links a:hover{ color:var(--text-dark); border-color:var(--gold) } /* dark variant (home page preview) */ .section--dark .member__photo{ background:var(--ink-2) } .section--dark .member__name{ color:var(--text-on-dark) } .section--dark .member__bio{ color:var(--text-on-dark-2) } .section--dark .member__links a{ color:var(--text-on-dark-2); border-color:var(--ink-3) } .section--dark .member__links a:hover{ color:var(--gold); border-color:var(--gold) } /* analyst classes */ .class{ padding-block:clamp(24px,3vw,38px); border-bottom:1px solid var(--line) } .class:first-of-type{ border-top:1px solid var(--line) } .class__grid{ display:grid; grid-template-columns:minmax(150px,1fr) 3fr; gap:clamp(16px,3vw,48px); align-items:start } .class__term{ font-family:var(--serif); font-size:1.35rem; color:var(--text-dark) } .class__count{ display:block; font-family:var(--sans); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted); margin-top:.35rem } .class__names{ display:flex; flex-wrap:wrap; gap:.4rem .9rem } .class__names li{ font-size:.92rem; color:var(--text-body) } .class__names li::after{ content:"·"; margin-left:.9rem; color:var(--line) } .class__names li:last-child::after{ content:"" } @media (max-width:700px){ .class__grid{ grid-template-columns:1fr } } /* ========================================================================== Deal reports ========================================================================== */ .filters{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2.5rem } .filter{ padding:.5rem 1.05rem; border:1px solid var(--line); border-radius:100px; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); transition:all .25s var(--ease); } .filter:hover{ border-color:var(--text-dark); color:var(--text-dark) } .filter.is-active{ background:var(--text-dark); border-color:var(--text-dark); color:var(--paper) } .reports{ border-top:1px solid var(--line) } .report{ /* fixed columns so type / date / cta line up down the whole list */ display:grid; grid-template-columns:2.4rem 1fr 122px 118px 124px; align-items:center; gap:clamp(14px,2.5vw,32px); padding-block:clamp(20px,2.6vw,30px); border-bottom:1px solid var(--line); transition:background .3s var(--ease); position:relative; } .report::before{ content:""; position:absolute; inset:0 calc(var(--gutter) * -1 / 2); background:var(--paper-2); opacity:0; transition:opacity .3s; z-index:-1; border-radius:var(--radius); } .report:hover::before{ opacity:1 } .report__idx{ font-family:var(--serif); font-size:.95rem; color:var(--gold-ink); min-width:2ch } .report__title{ font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.6rem); color:var(--text-dark); line-height:1.25 } .report__type{ font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--line); padding:.32rem .7rem; border-radius:100px; white-space:nowrap; justify-self:start; } .report__date{ font-size:.8rem; color:var(--text-muted); white-space:nowrap; justify-self:end } .report__cta{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--text-dark); display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; justify-self:end; } .report__cta svg{ transition:transform .3s var(--ease) } .report:hover .report__cta svg{ transform:translateY(2px) } @media (max-width:1040px){ .report{ grid-template-columns:2.4rem 1fr auto auto; column-gap:18px } .report__cta{ grid-column:2/-1; justify-self:start; margin-top:.35rem } } @media (max-width:700px){ .report{ grid-template-columns:2.4rem 1fr auto; row-gap:.45rem } .report__title{ grid-column:2/-1 } .report__type{ grid-column:2; justify-self:start } .report__date{ grid-column:3; justify-self:end } .report__cta{ grid-column:2/-1 } } /* ========================================================================== FAQ accordion ========================================================================== */ .faq{ border-bottom:1px solid var(--line) } .faq:first-child{ border-top:1px solid var(--line) } .faq__q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; padding-block:clamp(18px,2.4vw,26px); text-align:left; font-family:var(--serif); font-size:clamp(1.08rem,1.9vw,1.4rem); color:var(--text-dark); transition:color .25s; } .faq__q:hover{ color:var(--gold-ink) } .faq__icon{ flex:0 0 auto; width:15px; height:15px; margin-top:.45em; position:relative } .faq__icon::before,.faq__icon::after{ content:""; position:absolute; background:var(--gold-ink); transition:transform .35s var(--ease); } .faq__icon::before{ inset:7px 0 auto 0; height:1.5px } .faq__icon::after{ inset:0 7px auto auto; width:1.5px; height:15px } .faq.is-open .faq__icon::after{ transform:rotate(90deg) } .faq__a{ overflow:hidden; height:0; transition:height .4s var(--ease) } .faq__a p{ padding-bottom:clamp(20px,2.6vw,30px); max-width:74ch; color:var(--text-body); font-size:.97rem } /* ========================================================================== CTA band ========================================================================== */ .cta{ background:var(--ink); position:relative; overflow:hidden; text-align:center } .cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% 0%, rgba(201,169,106,.16), transparent 62%); } .cta .wrap{ position:relative; z-index:1 } .cta h2{ color:var(--text-on-dark); margin-inline:auto; max-width:18ch } .cta p{ color:var(--text-on-dark-2); margin:1.2rem auto 0; max-width:50ch } .cta .btn{ margin-top:2.2rem } .cta__status{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.6rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); } .cta__dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); position:relative } .cta__dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--gold); animation:ping 2.2s var(--ease) infinite; opacity:0; } @keyframes ping{ 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.5);opacity:0} } /* ========================================================================== Footer ========================================================================== */ .footer{ background:var(--ink); color:var(--text-on-dark-2); padding-block:clamp(56px,7vw,84px) 2rem; border-top:1px solid var(--ink-3) } .footer__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:clamp(30px,5vw,64px) } .footer__logo img{ height:52px; width:auto; margin-bottom:1.35rem } .footer p{ font-size:.92rem; line-height:1.75 } .footer h4{ font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--text-on-dark); margin-bottom:1.15rem; font-family:var(--sans); font-weight:600; } .footer__links li{ margin-bottom:.65rem } .footer__links a{ font-size:.92rem; transition:color .25s } .footer__links a:hover{ color:var(--gold) } .footer__bottom{ margin-top:clamp(40px,5vw,64px); padding-top:1.75rem; border-top:1px solid var(--ink-3); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.78rem; color:var(--text-muted); } @media (max-width:800px){ .footer__grid{ grid-template-columns:1fr 1fr } .footer__brand{ grid-column:1/-1 } } /* ========================================================================== Scroll reveal ========================================================================== */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease) } .reveal.is-in{ opacity:1; transform:none } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } } /* focus visibility */ :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px }