/* Team avatar with optional photo (falls back to initials) */ .member__avatar { position: relative; overflow: hidden; } .member__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* ========================================================================== Campsor Capital - Terminal theme. Two colourways: teal (default) light Colours live in the variables below; the toggle in the header switches them. ========================================================================== */ [data-theme^="tech"] { --radius: 4px; --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --paper: #03343A; --paper-2: #054149; --ink: #F0FBFC; --ink-2: #C5E6E9; --ink-3: #8DBFC4; --acc: #8FEBF3; --acc-rgb: 143,235,243; --acc-ink: #03343A; /* text on accent */ --panel: rgba(2,44,50,.85); --panel-2: #02535C; --line: rgba(var(--acc-rgb),.18); --line-on-dark: rgba(var(--acc-rgb),.22); --neg: #FFB09B; --nav-bg: rgba(0,127,141,.85); --nav-bg-solid: rgba(0,110,123,.97); --nav-ink: #F0FBFC; --footer-bg: #022A2F; --grid-rgb: 143,235,243; --scan: rgba(0,0,0,.18); --photo-opacity: .18; --shadow: 0 0 0 1px rgba(var(--acc-rgb),.08), 0 24px 60px -30px rgba(var(--acc-rgb),.35); } [data-theme="tech-light"] { --paper: #F6F8F7; --paper-2: #ECF1F0; --ink: #06273A; --ink-2: #3D5563; --ink-3: #6B8290; --acc: #0097A7; --acc-rgb: 0,151,167; --acc-ink: #FFFFFF; --panel: rgba(255,255,255,.92); --panel-2: #FFFFFF; --line: rgba(6,39,58,.16); --line-on-dark: rgba(6,39,58,.16); --neg: #C0392B; --nav-bg: rgba(246,248,247,.88); --nav-bg-solid: rgba(246,248,247,.97); --nav-ink: #06273A; --footer-bg: #06273A; --grid-rgb: 6,39,58; --scan: rgba(6,39,58,.03); --photo-opacity: .12; --shadow: 0 20px 50px -30px rgba(6,39,58,.45); } [data-theme="tech-light"] .nav .brand__mark { content: url("../assets/mark-navy.png"); } [data-theme="tech-light"] .hero__canvas { opacity: .7; filter: invert(1) hue-rotate(180deg) brightness(.7); } [data-theme="tech-light"] .partner { background: var(--ink); } [data-theme="tech-light"] .partner__role { color: rgba(255,255,255,.75); } [data-theme="tech-light"] .partner:hover { background: #0B3448; } [data-theme^="tech"] body { background: var(--paper); color: var(--ink); } [data-theme^="tech"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(var(--grid-rgb),.07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--grid-rgb),.07) 1px, transparent 1px); background-size: 48px 48px; } [data-theme^="tech"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35; background: repeating-linear-gradient(180deg, transparent 0 2px, var(--scan) 2px 3px); } [data-theme^="tech"] .section, [data-theme^="tech"] .hero, [data-theme^="tech"] .footer { position: relative; z-index: 1; } [data-theme^="tech"] h1, [data-theme^="tech"] h2, [data-theme^="tech"] h3 { letter-spacing: -.01em; text-transform: uppercase; } [data-theme^="tech"] h2 { font-size: clamp(26px, 3vw, 38px); } [data-theme^="tech"] h3 { font-size: 17px; letter-spacing: .04em; } [data-theme^="tech"] .eyebrow::before { content: "> "; } [data-theme^="tech"] .eyebrow, [data-theme^="tech"] .section--teal .eyebrow, [data-theme^="tech"] .section--navy .eyebrow, [data-theme^="tech"] .hero .eyebrow { color: var(--acc); } [data-theme^="tech"] .lead { font-size: 17px; } /* nav */ [data-theme^="tech"] .nav { background: var(--nav-bg); border-bottom: 1px solid rgba(var(--acc-rgb),.3); } [data-theme^="tech"] .nav.is-scrolled { background: var(--nav-bg-solid); } [data-theme^="tech"] .brand { color: var(--nav-ink); } [data-theme^="tech"] .nav__links a { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--nav-ink); opacity: .85; } [data-theme^="tech"] .nav__links a:hover, [data-theme^="tech"] .nav__links a.is-active { opacity: 1; color: var(--nav-ink); } [data-theme^="tech"] .nav__links a::after { background: var(--acc); bottom: 2px; } [data-theme^="tech"] .nav__links a.nav__cta { border-radius: 4px; background: transparent; border: 1px solid var(--acc); color: var(--acc); opacity: 1; } [data-theme^="tech"] .nav__links a.nav__cta:hover { background: var(--acc); color: var(--acc-ink); } [data-theme^="tech"] .nav__social a { color: var(--nav-ink); opacity: .8; } [data-theme^="tech"] .nav__social a:hover { opacity: 1; background: rgba(var(--acc-rgb),.15); } [data-theme^="tech"] .nav__burger span { background: var(--nav-ink); } [data-theme^="tech"] .brand__word { letter-spacing: .38em; } @media (max-width: 880px) { [data-theme^="tech"] .nav { background: var(--nav-bg-solid); } [data-theme^="tech"] .nav__links { background: var(--paper-2); border-left: 1px solid var(--line); } } /* hero */ [data-theme^="tech"] .hero { background: var(--paper); color: var(--ink); } [data-theme^="tech"] .hero__photo { opacity: var(--photo-opacity); filter: grayscale(1) contrast(1.3); } [data-theme^="tech"] .hero__tint { background: radial-gradient(ellipse at 20% 40%, rgba(var(--acc-rgb),.28), transparent 55%), linear-gradient(180deg, transparent, var(--paper) 100%); } [data-theme^="tech"] .hero__grid { opacity: .55; background-size: 48px 48px; mask-image: none; -webkit-mask-image: none; background-image: linear-gradient(rgba(var(--grid-rgb),.09) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--grid-rgb),.09) 1px, transparent 1px); } [data-theme^="tech"] .hero__canvas { opacity: 1; } [data-theme^="tech"] .hero__content { padding: 150px 0 120px; } [data-theme^="tech"] .hero__content::before, [data-theme^="tech"] .hero__content::after { content: ""; position: absolute; width: 28px; height: 28px; border: 1.5px solid var(--acc); opacity: .8; } [data-theme^="tech"] .hero__content::before { left: -28px; top: 118px; border-right: 0; border-bottom: 0; } [data-theme^="tech"] .hero__content::after { right: -28px; bottom: 96px; border-left: 0; border-top: 0; } [data-theme^="tech"] .hero h1 { font-weight: 600; letter-spacing: -.02em; font-size: clamp(38px, 6.4vw, 80px); color: var(--ink); } [data-theme^="tech"] .hero h1::after { content: "_"; color: var(--acc); margin-left: 4px; animation: techCursor 1s steps(2) infinite; } @keyframes techCursor { 50% { opacity: 0; } } [data-theme^="tech"] .hero__lead { color: var(--ink-2); font-size: 16px; max-width: 640px; } [data-theme^="tech"] .hero__ticks { color: var(--acc); } [data-theme^="tech"] .hero__ticks span { border: 1px solid rgba(var(--acc-rgb),.4); padding: 6px 10px; border-radius: 3px; } [data-theme^="tech"] .hero__ticks i { display: none; } [data-theme^="tech"] .hero__scroll { border-radius: 3px; border-color: rgba(var(--acc-rgb),.5); } [data-theme^="tech"] .hero__scroll span { background: var(--acc); } /* buttons */ [data-theme^="tech"] .btn { border-radius: 4px; font-family: var(--font-sans); letter-spacing: .06em; text-transform: uppercase; font-size: 13px; } [data-theme^="tech"] .btn--primary { background: var(--acc); color: var(--acc-ink); box-shadow: 0 0 24px -6px rgba(var(--acc-rgb),.7); } [data-theme^="tech"] .btn--primary:hover { filter: brightness(1.1); } [data-theme^="tech"] .btn--ghost { border-color: rgba(var(--acc-rgb),.55); color: var(--acc); } [data-theme^="tech"] .btn--ghost:hover { border-color: var(--acc); background: rgba(var(--acc-rgb),.08); } [data-theme^="tech"] .btn--light { background: var(--acc); color: var(--acc-ink); } /* sections */ [data-theme^="tech"] .section--light { background: transparent; color: var(--ink); } [data-theme^="tech"] .section--teal { background: rgba(var(--acc-rgb),.07); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } [data-theme^="tech"] .section--navy { background: transparent; color: var(--ink); } [data-theme^="tech"] .section--navy::before { display: none; } [data-theme^="tech"] .section__lead, [data-theme^="tech"] .about__text p, [data-theme^="tech"] .pillar p, [data-theme^="tech"] .card p, [data-theme^="tech"] .member > p, [data-theme^="tech"] .contact__text p { color: var(--ink-2); } [data-theme^="tech"] .about__text .lead { color: var(--ink); } [data-theme^="tech"] .facts { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); } [data-theme^="tech"] .facts li { border-color: var(--line); } [data-theme^="tech"] .facts__k { color: var(--acc); } [data-theme^="tech"] .facts__v { color: var(--ink); } [data-theme^="tech"] .pillar, [data-theme^="tech"] .card, [data-theme^="tech"] .member, [data-theme^="tech"] .form { position: relative; background: var(--panel); border: 1px solid var(--line); backdrop-filter: none; border-radius: 4px; box-shadow: none; } [data-theme^="tech"] .pillar::before, [data-theme^="tech"] .card::before, [data-theme^="tech"] .member::before { content: ""; position: absolute; left: -1px; top: -1px; right: auto; width: 14px; height: 14px; border-top: 2px solid var(--acc); border-left: 2px solid var(--acc); background: none; opacity: 1; } [data-theme^="tech"] .pillar::after, [data-theme^="tech"] .card::after, [data-theme^="tech"] .member::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-bottom: 2px solid var(--acc); border-right: 2px solid var(--acc); } [data-theme^="tech"] .pillar:hover, [data-theme^="tech"] .card:hover, [data-theme^="tech"] .member:hover { background: var(--panel); border-color: rgba(var(--acc-rgb),.6); box-shadow: 0 0 30px -12px rgba(var(--acc-rgb),.6); } [data-theme^="tech"] .pillar__num { color: var(--acc); } [data-theme^="tech"] .pillar__num::before { content: "["; } [data-theme^="tech"] .pillar__num::after { content: "]"; } [data-theme^="tech"] .pillar h3, [data-theme^="tech"] .card h3 { color: var(--ink); } [data-theme^="tech"] .card__icon { border-radius: 4px; color: var(--acc); background: rgba(var(--acc-rgb),.08); border-color: rgba(var(--acc-rgb),.4); } /* performance */ [data-theme^="tech"] .perf { background: var(--panel); border-color: var(--line); border-radius: 4px; box-shadow: var(--shadow); } [data-theme^="tech"] .perf__chart-title { color: var(--ink); } [data-theme^="tech"] .perf__chart-sub { color: var(--ink-3); } [data-theme^="tech"] .chart .grid line { stroke: var(--line); } [data-theme^="tech"] .chart .axis text, [data-theme^="tech"] .chart .yeartick { fill: var(--ink-3); } [data-theme^="tech"] .chart .series { stroke: var(--acc); filter: drop-shadow(0 0 6px rgba(var(--acc-rgb),.6)); } [data-theme^="tech"] .chart .area { opacity: .8; } [data-theme^="tech"] .chart .endlabel { fill: var(--ink); } [data-theme^="tech"] .chart .crosshair { stroke: var(--acc); } [data-theme^="tech"] .chart .dot, [data-theme^="tech"] .chart .enddot { fill: var(--acc); stroke: var(--paper); } [data-theme^="tech"] .chart__tip { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); } [data-theme^="tech"] .chart__tip small { color: var(--ink-3); } [data-theme^="tech"] .table-wrap { border-color: var(--line); } [data-theme^="tech"] .perf-table thead th { background: var(--panel-2); color: var(--acc); } [data-theme^="tech"] .perf-table thead .perf-table__annual { background: var(--acc); color: var(--acc-ink); } [data-theme^="tech"] .perf-table tbody th { background: var(--paper-2); color: var(--acc); } [data-theme^="tech"] .perf-table tbody tr { border-color: var(--line); } [data-theme^="tech"] .perf-table td { color: var(--ink-2); } [data-theme^="tech"] .perf-table td.pos-strong { color: var(--acc); } [data-theme^="tech"] .perf-table td.neg { color: var(--neg); } [data-theme^="tech"] .perf-table tbody tr:hover td { background: rgba(var(--acc-rgb),.08); } [data-theme^="tech"] .perf-table .perf-table__annual { color: var(--ink); background: rgba(var(--acc-rgb),.08); border-color: var(--line); } [data-theme^="tech"] .perf-table .ytd { color: var(--acc); } [data-theme^="tech"] .footnote { background: var(--paper-2); color: var(--ink-3); border-color: var(--line); } /* partners, team, contact, footer */ [data-theme^="tech"] #partners .eyebrow { color: var(--acc); } [data-theme^="tech"] .partner { border-radius: 4px; background: var(--panel); border-color: var(--line); } [data-theme^="tech"] .partner:hover { border-color: rgba(var(--acc-rgb),.6); } [data-theme^="tech"] .member__avatar { border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); color: var(--acc); } [data-theme^="tech"] .member h3 { font-size: 15px; color: var(--ink); } [data-theme^="tech"] .member h3 a:hover { color: var(--acc); border-color: var(--acc); } [data-theme^="tech"] .member__role { color: var(--acc); } [data-theme^="tech"] .contact__mail a { border-color: var(--acc); color: var(--acc); } [data-theme^="tech"] .field span { color: var(--acc); } [data-theme^="tech"] .field input, [data-theme^="tech"] .field textarea { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 3px; } [data-theme^="tech"] .field input:focus, [data-theme^="tech"] .field textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.2); } [data-theme^="tech"] .check { color: var(--ink-2); } [data-theme^="tech"] .check input { accent-color: var(--acc); } [data-theme^="tech"] .form__status { color: var(--ink); } [data-theme^="tech"] .form__status.is-error { color: var(--neg); } [data-theme^="tech"] .footer { background: var(--footer-bg); border-top: 1px solid var(--line); color: rgba(255,255,255,.7); } [data-theme^="tech"] .footer__legal { color: rgba(255,255,255,.6); } [data-theme^="tech"] .footer__top, [data-theme^="tech"] .footer__bottom { border-color: rgba(255,255,255,.14); } /* back-to-top button */ [data-theme^="tech"] .to-top { border-radius: 4px; background: var(--acc); color: var(--acc-ink); box-shadow: 0 0 24px -6px rgba(var(--acc-rgb),.7); } [data-theme^="tech"] .to-top:hover { filter: brightness(1.1); } /* Roboto weights: Regular for text, Bold for headings/buttons, Medium for small uppercase labels */ [data-theme^="tech"] body { font-weight: 400; } [data-theme^="tech"] h1, [data-theme^="tech"] h2, [data-theme^="tech"] h3, [data-theme^="tech"] .btn, [data-theme^="tech"] .brand__word, [data-theme^="tech"] .perf-table thead th, [data-theme^="tech"] .perf-table tbody th, [data-theme^="tech"] .perf-table__annual { font-weight: 700; } [data-theme^="tech"] .eyebrow, [data-theme^="tech"] .facts__k, [data-theme^="tech"] .member__role, [data-theme^="tech"] .field span, [data-theme^="tech"] .hero__ticks, [data-theme^="tech"] .pillar__num { font-weight: 500; letter-spacing: .12em; } [data-theme^="tech"] .perf-table { font-size: 14px; } [data-theme^="tech"] .hero h1 { font-weight: 700; letter-spacing: -.01em; } /* header theme toggle (teal <-> light) */ .theme-toggle { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 4px; border: 1px solid rgba(var(--acc-rgb),.4); background: transparent; color: var(--nav-ink); cursor: pointer; transition: background .2s, color .2s; } .theme-toggle:hover { background: rgba(var(--acc-rgb),.15); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .ico-sun { display: none; } [data-theme="tech-light"] .theme-toggle .ico-sun { display: block; } [data-theme="tech-light"] .theme-toggle .ico-moon { display: none; } @media (max-width: 880px) { .theme-toggle { margin-left: auto; } .nav__burger { margin-left: 0; } } [data-theme^="tech"] .partner__role { font-weight: 500; color: var(--acc); }