/* ============================================================================ VDUT-AI — About & Connect Depends on tokens.css + base.css. ========================================================================== */ /* ----------------------------------------------------------- hero band --- */ .phero { max-width: var(--maxw); margin:0 auto; padding: clamp(150px, 18vh, 210px) var(--gutter) clamp(56px, 7vw, 84px); } .phero h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height:1.1; max-width:16ch; margin-top:22px; } .phero__lede { margin-top:28px; max-width:60ch; font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--muted); } /* Page hero carrying a photograph — full-bleed navy band, flat overlay, white type. Mirrors .vhero--image on the vertical pages. A page using this MUST also carry `has-hero-image` on ; see base.css for why. */ .phero--image { position:relative; isolation:isolate; overflow:hidden; max-width:none; margin:0; padding:0; background:#0F1F3D; } .phero__bg { position:absolute; inset:0; z-index:0; } .phero__bg img { width:100%; height:100%; object-fit:cover; object-position:50% 52%; opacity:.34; } .phero--image .phero__inner { position:relative; z-index:1; max-width: var(--maxw); margin:0 auto; padding: clamp(150px, 18vh, 210px) var(--gutter) clamp(56px, 7vw, 84px); } .phero--image .eyebrow { color:#E8C470; } /* Gold Light — on navy */ .phero--image .eyebrow::before { background:#C8922A; } .phero--image h1 { color:#FFFFFF; } .phero--image .phero__lede { color:rgba(255,255,255,.82); } /* --------------------------------------------------------------- prose --- */ .prose { border-top:1px solid var(--line); } .prose__body { max-width:64ch; } .prose__body p { color: var(--muted); font-size:1.02rem; } .prose__body p + p { margin-top:20px; } .prose__body strong { color: var(--bone); font-weight:500; } /* ---------------------------------------------------------- leadership --- */ /* Leadership — this page only. */ .people { border-top:1px solid var(--line); } /* Leadership — portrait tiles. Four cropped portraits, name and role set over the image foot. The tile is a button: it opens a profile card where the photograph and the biography sit side by side, so neither covers the other. On hover the portrait warms from grayscale to colour and lifts. */ .leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .lead { background: var(--panel); } .lead__frame { position: relative; display: block; width: 100%; aspect-ratio: 4/5; overflow: hidden; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .lead__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.02) brightness(1.02); transform: scale(1.02); transition: filter .55s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); z-index: 0; } /* :focus-visible on the button, NOT :focus-within on the tile. Closing the profile dialog returns focus to the trigger that opened it, and :focus-within would match that — leaving the last-clicked portrait stuck in colour with the cursor nowhere near it. :focus-visible still lights the tile for keyboard users, which is the case the rule is there for. */ .lead:hover .lead__photo, .lead__frame:focus-visible .lead__photo { filter: grayscale(0) contrast(1.02); transform: scale(1.06); } .lead__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,31,61,0) 42%, rgba(15,31,61,.52) 74%, rgba(15,31,61,.92) 100%); transition: background .5s ease; } .lead:hover .lead__scrim, .lead__frame:focus-visible .lead__scrim { background: linear-gradient(180deg, rgba(15,31,61,0) 6%, rgba(15,31,61,.55) 46%, rgba(15,31,61,.95) 100%); } .lead__meta { position: absolute; inset: auto 0 0 0; z-index: 2; display: block; padding: clamp(16px, 1.5vw, 22px); } .lead__name { display: block; font-family: var(--serif); font-size: clamp(1.08rem, 1.45vw, 1.32rem); line-height: 1.2; color: #FFFFFF; } .lead__role { display: block; margin-top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #E8C470; /* Gold Light — text on navy */ } /* Open affordance — a quiet plus in the top corner, drawn from two hairlines. Shown only where the profile card can actually open. */ .lead__open { display: none; } .has-dialog .lead__open { display: block; } html:not(.has-dialog) .lead__frame { cursor: default; } .lead__open { position: absolute; top: 14px; right: 14px; z-index: 2; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.34); opacity: .8; transition: opacity .3s ease, border-color .3s ease; } .lead__open::before, .lead__open::after { content: ""; position: absolute; top: 50%; left: 50%; background: #FFFFFF; transform: translate(-50%, -50%); } .lead__open::before { width: 11px; height: 1px; } .lead__open::after { width: 1px; height: 11px; } .lead__frame:hover .lead__open, .lead__frame:focus-visible .lead__open { opacity: 1; border-color: #E8C470; } /* Touch devices have no hover — start the portraits nearer to colour */ @media (hover: none) { .lead__photo { filter: grayscale(.12) contrast(1.02); } } @media (max-width: 900px) { .leaders { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 430px) { .leaders { grid-template-columns: 1fr; } } /* ---------------------------------------------------- board of advisors --- */ /* Five portraits across one row, names set beneath. Deliberately NOT the leadership treatment: free-standing portraits rather than bordered tiles with the name laid over the image, so the two groups read as a hierarchy and not as the same component twice. Five people fill five columns exactly, which is why there is no rule work holding a ragged grid together. Grayscale matches the leadership set; the warm on hover is decorative — these open nothing. */ .board { border-top: 1px solid var(--line); } .board__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2.4vw, 34px); } .board__trigger { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .board__frame { position: relative; display: block; } .board__photo { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 24%; border-radius: var(--radius); background: var(--panel); filter: grayscale(1) contrast(1.02) brightness(1.02); transition: filter .55s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .board__trigger:hover .board__photo, .board__trigger:focus-visible .board__photo { filter: grayscale(0) contrast(1.02); transform: translateY(-4px); } /* No photograph supplied — an initial in the display face, at portrait size and proportion, so the row stays even. */ .board__photo--none { display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); filter: none; font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: var(--faint); } .board__name { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--serif); line-height: 1.35; color: var(--bone); font-size: clamp(.95rem, 1.15vw, 1.12rem); transition: border-color .3s ease; } .board__trigger:hover .board__name, .board__trigger:focus-visible .board__name { border-color: var(--brass); } /* Open affordance, as on the leadership tiles but scaled to the smaller frame. */ .board__open { position: absolute; top: 10px; right: 10px; z-index: 2; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.42); opacity: .75; transition: opacity .3s ease, border-color .3s ease; } .board__open::before, .board__open::after { content: ""; position: absolute; top: 50%; left: 50%; background: #FFFFFF; transform: translate(-50%, -50%); } .board__open::before { width: 9px; height: 1px; } .board__open::after { width: 1px; height: 9px; } .board__trigger:hover .board__open, .board__trigger:focus-visible .board__open { opacity: 1; border-color: #E8C470; } html:not(.has-dialog) .board__open { display: none; } html:not(.has-dialog) .board__trigger { cursor: default; } /* Over the initial placeholder there is no photograph to sit on, so the marker inverts to read against the pale panel. */ .board__photo--none + .board__open { border-color: var(--line-strong); } .board__photo--none + .board__open::before, .board__photo--none + .board__open::after { background: var(--faint); } .board__role { margin-top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } @media (max-width: 1080px) { .board__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .board__grid { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------ leadership profile card --- */ /* Opened from a portrait tile. Photograph and biography sit side by side — the card is the reason the tile itself carries no bio. */ dialog.profile { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(20px, 4vw, 48px); border: 0; background: transparent; overflow: auto; } /* margin:auto on the card, NOT align-items:center on the dialog — a centred flex child that is taller than its scroll container overflows equally at both ends and its top becomes unreachable. Auto margins centre without that. */ dialog.profile[open] { display: flex; } dialog.profile::backdrop { background: rgba(15,31,61,.78); } .profile__card { position: relative; margin: auto; display: grid; grid-template-columns: minmax(0,4fr) minmax(0,6fr); width: min(880px, 100%); background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .profile__photo { width: 100%; height: 100%; min-height: 340px; object-fit: cover; object-position: 50% 20%; background: var(--panel); } /* Advisor with no photograph supplied — the initial fills the photo column. */ .profile__photo--none { display: grid; place-items: center; min-height: 340px; border-right: 1px solid var(--line); font-family: var(--serif); font-size: clamp(3rem, 6vw, 4.5rem); color: var(--faint); } .profile__body { padding: clamp(28px, 3.4vw, 48px); align-self: center; } .profile__eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--brass); } .profile__name { margin-top: 16px; font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.2; color: var(--bone); } .profile__role { margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } /* Degrees only, no institutions — sits directly under the role. Set in the body face rather than the mono of the role above it, so two label-styled lines do not stack. */ .profile__quals { margin-top: 12px; font-family: var(--sans); font-weight: 400; font-size: .92rem; line-height: 1.5; color: var(--bone); } .profile__bio { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px; } .profile__bio p { color: var(--muted); font-size: 1rem; line-height: 1.7; } .profile__bio p + p { margin-top: 12px; } .profile__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; padding: 0; cursor: pointer; background: var(--ink); border: 1px solid var(--line); transition: border-color .3s ease; } .profile__close::before, .profile__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1px; background: var(--bone); } .profile__close::before { transform: translate(-50%, -50%) rotate(45deg); } .profile__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .profile__close:hover { border-color: var(--brass); } @media (max-width: 720px) { .profile__card { grid-template-columns: 1fr; } .profile__photo { min-height: 0; aspect-ratio: 4/3; } /* stacked: the divider moves from the side of the photo to under it */ .profile__photo--none { min-height: 0; aspect-ratio: 4/3; border-right: 0; border-bottom: 1px solid var(--line); } /* 34px is under the 44px touch-target floor — the close button is the only control inside the card, so it has to be comfortably hittable. */ .profile__close { top: 10px; right: 10px; width: 44px; height: 44px; } } /* ------------------------------------------------------------- connect --- */ /* /about closes on a full-bleed navy band — the same device as the homepage incubation band and the drones page's related-company band, so the page ends on a colour change rather than another hairline. Flat navy, no gradient; the only accent is the Gold rule on the eyebrow. */ .contact { background:#0F1F3D; } .contact__eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:20px; font-family: var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#E8C470; /* Gold Light — on navy */ } .contact__eyebrow::before { content:""; width:34px; height:1px; background:#C8922A; flex:none; } .contact h2 { color:#FFFFFF; } .contact .section-head p { color:rgba(255,255,255,.72); } .contact .btn-primary { color:#FFFFFF; border-color:rgba(255,255,255,.34); } .contact .btn-primary:hover, .contact .btn-primary:focus-visible { border-color:#E8C470; background:rgba(232,196,112,.14); } /* ------------------------------------------------------------- enquiry --- */ /* Composed contact block: an editorial left rail of direct lines beside a framed enquiry panel. Two brand colours only (navy + gold), flat — the depth is hairlines and a single gold rule, never shadow. */ .enquiry { border-top:1px solid var(--line); } .enquiry__wrap { display:grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 88px); align-items:start; } /* -- left rail ----------------------------------------------------------- */ .enquiry__aside h2 { margin-top:20px; } .enquiry__lede { margin-top:22px; max-width:38ch; color: var(--muted); font-size:1.02rem; line-height:1.7; } .enquiry__lines { margin-top: clamp(34px, 4vw, 52px); border-top:1px solid var(--line); } .enquiry__line { display:grid; grid-template-columns: 1fr; gap:6px; padding: 22px 0; border-bottom:1px solid var(--line); } .enquiry__line dt { font-family: var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color: var(--brass); } .enquiry__line dd { font-family: var(--serif); font-size:1.12rem; line-height:1.5; color: var(--bone); } .enquiry__line dd address { font-style:normal; } .enquiry__line dd.is-pending { color: var(--faint); font-style:italic; font-size:1rem; } .enquiry__line dd a { color: var(--bone); text-decoration:none; border-bottom:1px solid var(--brass-edge); padding-bottom:2px; transition: color var(--dur-hover), border-color var(--dur-hover); } .enquiry__line dd a:hover, .enquiry__line dd a:focus-visible { color: var(--brass-bright); border-color: var(--brass); } /* -- framed enquiry panel ------------------------------------------------ */ .enquiry__panel { background: var(--panel); border:1px solid var(--line-strong); border-top:2px solid var(--brass); /* single gold accent rule */ border-radius: var(--radius-lg); padding: clamp(26px, 3.2vw, 46px); } .enquiry__panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom: clamp(22px, 2.6vw, 32px); margin-bottom: clamp(26px, 3vw, 38px); border-bottom:1px solid var(--line); } .enquiry__panel-eyebrow { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: var(--bone); } .enquiry__panel-hint { font-family: var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--faint); } .enquiry__fields { display:grid; grid-template-columns:1fr 1fr; gap: clamp(20px, 2.2vw, 28px); } .field { display:flex; flex-direction:column; gap:9px; } .field--wide { grid-column:1 / -1; } .field label { font-family: var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color: var(--faint); } /* White inset inputs on the wash panel — reads as a real, contained field without leaning on shadow. Border alone carries the state. */ .field input, .field textarea { font-family: var(--sans); font-size:1rem; color: var(--bone); background: var(--ink); border:1px solid var(--line-strong); border-radius: var(--radius); padding: 13px 14px; transition: border-color var(--dur-hover), background var(--dur-hover); } .field textarea { resize:vertical; min-height:132px; line-height:1.65; } .field input:hover, .field textarea:hover { border-color: var(--brass-edge); } .field input:focus, .field textarea:focus { outline:none; border-color: var(--brass); } .field input::placeholder, .field textarea::placeholder { color: var(--faint); } .enquiry__submit { display:flex; align-items:center; gap: clamp(20px, 3vw, 32px); flex-wrap:wrap; margin-top: clamp(24px, 3vw, 34px); } .enquiry__note { color: var(--muted); font-size:.84rem; line-height:1.6; max-width:34ch; } /* Submit button — inherits .btn-primary; add the sweeping arrow. */ .btn-primary__arrow { display:inline-block; margin-left:10px; transition: transform var(--dur-hover) var(--ease); } .btn-primary:hover .btn-primary__arrow, .btn-primary:focus-visible .btn-primary__arrow { transform: translateX(6px); } @media (max-width: 900px) { .enquiry__wrap { grid-template-columns:1fr; } } @media (max-width: 560px) { .enquiry__fields { grid-template-columns:1fr; } }