/* ============================================================================ VDUT-AI — Vertical pages Shared by all four. Depends on tokens.css + base.css. ========================================================================== */ /* ----------------------------------------------------------- hero band --- */ /* Not 100svh — full height belongs to the homepage. */ .vhero { max-width: var(--maxw); margin:0 auto; padding: clamp(150px, 18vh, 210px) var(--gutter) clamp(56px, 7vw, 84px); } .vhero__index { font-family: var(--mono); font-size:11px; letter-spacing:.28em; color: var(--faint); margin-bottom:22px; } .vhero__index b { color: var(--brass); font-weight:500; } .vhero h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height:1.1; letter-spacing:.005em; max-width:16ch; } .vhero__lede { margin-top:28px; max-width:60ch; font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--muted); } /* ------------------------------------------------- hero band, with image -- */ /* A full-bleed navy band carrying a photograph behind the title. The overlay is flat, not a gradient (brand guide), and heavy enough that the type meets contrast on every part of the frame. NOTE: the logo carries a white ellipse that only reads on a white ground, and the nav links are navy — so a page using this MUST also carry `has-hero-image` on , which holds the nav opaque from the top. */ .vhero--image { position: relative; isolation: isolate; max-width: none; margin: 0; padding: 0; background: #0F1F3D; } .vhero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .vhero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: .34; } .vhero--image .vhero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: clamp(150px, 18vh, 210px) var(--gutter) clamp(56px, 7vw, 84px); } .vhero--image .vhero__index { color: rgba(255,255,255,.62); } .vhero--image .vhero__index b { color: #E8C470; } /* Gold Light — on navy */ .vhero--image h1 { color: #FFFFFF; } .vhero--image .vhero__lede { color: rgba(255,255,255,.82); } /* --------------------------------------------------------- capability ---- */ /* Hairline capability rows. */ .cap { border-top:1px solid var(--line); } .cap__row { display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(24px, 5vw, 64px); padding: clamp(36px, 4.5vw, 56px) 0; border-bottom:1px solid var(--line); } .cap__row:last-child { border-bottom:none; } .cap__k { font-family: var(--serif); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height:1.3; color: var(--bone); } .cap__n { display:block; margin-bottom:12px; font-family: var(--mono); font-size:10px; letter-spacing:.24em; color: var(--faint); } .cap__v { color: var(--muted); font-size:1rem; max-width:60ch; } .cap__v + .cap__v { margin-top:14px; } /* Short supporting passage in the key column, set as body text so it reads as commentary beside the serif statement rather than part of it. */ .cap__aside { margin-top:22px; max-width:42ch; font-family: var(--sans); font-weight:300; font-size:.95rem; line-height:1.75; color: var(--muted); } /* ------------------------------------------------- dependency compariso --- */ /* The argument, shown rather than argued: one column is what the supplier holds, the other is what you hold. The weight is carried by colour — the imported column recedes, the indigenous column is full strength behind a gold rule — so the reader reaches the conclusion by scanning, not reading. Flat, square corners, two brand colours (brand guide). */ .dep { width:100%; margin-top:28px; border-collapse:collapse; font-size:.92rem; line-height:1.4; } .dep th, .dep td { padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); } .dep thead th { font-family: var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color: var(--faint); border-bottom:1px solid var(--line-strong); } .dep tbody th { font-weight:400; color: var(--bone); background: var(--panel); width:34%; } .dep tbody td { color: var(--faint); } /* The column that matters. */ .dep .dep__own { color: var(--bone); border-left:1px solid var(--brass); } .dep thead .dep__own { color: var(--brass); } .dep tbody tr:last-child th, .dep tbody tr:last-child td { border-bottom:none; } @media (max-width: 560px) { .dep { font-size:.85rem; } .dep th, .dep td { padding:11px 10px; } .dep tbody th { width:32%; } } /* ------------------------------------------------------ related company --- */ /* A navy band, so the company reads as a separate entity rather than as another capability row. Same device as the homepage incubation band. */ .sub { background:#0F1F3D; } .sub__inner { max-width: var(--maxw); margin:0 auto; padding: clamp(64px, 8vw, 100px) var(--gutter); } .sub__eyebrow { display:flex; align-items:center; gap:14px; font-family: var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#E8C470; /* Gold Light — on navy */ } .sub__eyebrow::before { content:""; width:34px; height:1px; background:#C8922A; flex:none; } .sub__name { margin-top:20px; font-family: var(--serif); line-height:1.15; color:#FFFFFF; font-size: clamp(1.9rem, 3.6vw, 2.9rem); } .sub__lede { margin-top:22px; max-width:46ch; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height:1.6; color: rgba(255,255,255,.94); } .sub__body { margin-top:16px; max-width:52ch; font-size:1rem; line-height:1.7; color: rgba(255,255,255,.66); } /* Applications — scanned, not read. A gold rule per item instead of bullets. */ .sub__uses { margin-top:40px; list-style:none; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap: clamp(18px, 2.4vw, 32px); } .sub__uses li { padding-top:16px; border-top:1px solid rgba(200,146,42,.55); font-size:.95rem; line-height:1.45; color: rgba(255,255,255,.9); } .sub__note { margin-top:36px; font-family: var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.5); } @media (max-width: 900px) { .sub__uses { grid-template-columns:repeat(2, 1fr); } } @media (max-width: 430px) { .sub__uses { grid-template-columns:1fr; } } /* ------------------------------------------------------------ partners --- */ .partners { border-top:1px solid var(--line); } .partners__grid { /* auto-fit — the four verticals do not all list the same number of names */ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; margin-top:44px; } .partners__cell { background: var(--ink); padding: clamp(40px,4.5vw,60px) clamp(20px,2.5vw,32px); min-height:196px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:26px; transition: background .45s ease; } .partners__cell:hover { background: var(--panel); } /* Full brand-colour logos, knocked out individually. Each is sized to its own optical weight via an inline max-width on the (same values as the homepage partners wall) rather than one uniform box — wordmarks, icon+text lockups and thin-stroke marks read very differently at the same bounding box. */ .partners__logo { width: 100%; max-width: 190px; height:auto; display:block; transition: transform .5s var(--ease); } .partners__cell:hover .partners__logo, .partners__cell:focus-within .partners__logo { transform: translateY(-3px); } /* text fallback for a partner with no logo supplied */ .partners__name { min-height:46px; display:flex; align-items:center; font-family: var(--serif); font-size:1.4rem; line-height:1.3; color: var(--bone); opacity:.72; transition: opacity .5s ease; } .partners__cell:hover .partners__name { opacity:1; } .partners__role { font-family: var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--faint); } /* ---------------------------------------------------------- connect CTA -- */ .vconnect { border-top:1px solid var(--line); } .vconnect__inner { max-width: var(--maxw); margin:0 auto; padding: clamp(72px, 9vw, 104px) var(--gutter); display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; } .vconnect h2 { max-width:18ch; } .vconnect p { color: var(--muted); margin-top:16px; max-width:44ch; } /* -------------------------------------------------- prev / next vertical - */ /* Lateral movement across the four verticals. */ .vnav { border-top:1px solid var(--line); } .vnav__inner { max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1fr 1fr; gap:1px; background: var(--line); } .vnav__item { background: var(--ink); padding: 40px var(--gutter); text-decoration:none; color: var(--muted); transition: background .4s ease, color var(--dur-hover) ease; } .vnav__item:hover, .vnav__item:focus-visible { background: var(--panel); color: var(--bone); } .vnav__item--next { text-align:right; } .vnav__k { font-family: var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color: var(--faint); display:block; margin-bottom:12px; } .vnav__label { font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.35rem); } /* ---------------------------------------------------------- responsive --- */ @media (max-width: 860px) { .cap__row { grid-template-columns:1fr; gap:16px; } .partners__grid { grid-template-columns:1fr; } .partners__cell { padding:32px 24px; } .vnav__inner { grid-template-columns:1fr; } .vnav__item--next { text-align:left; } }