/* odin-theme.css
 *
 * Puts the 2025 odinbd.com home page's look onto the older .net pages.
 *
 * TYPOGRAPHY IS NOT SET HERE, ON PURPOSE.
 * Both sites were built on the same platform and already declare the same
 * families - the website-level default is Abel (titles .15em tracking,
 * subtitles .2em, body .1em), big stripe headings are Montserrat, the footer
 * wordmark is Oswald and the nav is Arial. All four are pulled from Google by
 * the platform's own css/fonts-*.css, which is byte-identical across
 * test-original/css/ and test-original/net/css/. So the pages already have the
 * home page's fonts; an earlier version of this file overrode them with
 * Montserrat/Raleway, which is what made the .net pages read as a different
 * typeface. Nothing here sets font-family, font-size, letter-spacing,
 * line-height or text-transform - that all belongs to each page's own
 * style-<slug>.css.
 *
 * What this file does set is colour and ground, because the .net pages were
 * designed on white and the 2025 page is black, plus the handful of structural
 * repairs the dead platform JS left behind.
 *
 * Colours are read off the home page's own stylesheet
 * (test-original/css/static_style.css), not invented:
 *
 *   black          rgb(0, 0, 0)          page ground
 *   near-black     rgb(23, 21, 21)       alternate stripe
 *   white          rgb(255, 255, 255)    headings
 *   #efefef        rgb(239, 239, 239)    body copy
 *   #aaa           rgb(170, 170, 170)    captions / muted
 *   #dcdcdc        rgb(220, 220, 220)    footer wordmark
 *   #ae0606        rgb(174, 6, 6)        accent, buttons
 *   #bf3434        rgb(191, 52, 52)      accent hover
 *
 * Loaded last on every net/*.html so it wins over the generated per-page
 * sheets, which carry high, arbitrary specificity - hence !important.
 */

:root {
	--odin-bg: rgb(0, 0, 0);
	--odin-bg-alt: rgb(23, 21, 21);
	--odin-fg: rgb(255, 255, 255);
	--odin-body: rgb(239, 239, 239);
	--odin-muted: rgb(170, 170, 170);
	--odin-wordmark: rgb(220, 220, 220);
	--odin-accent: rgb(174, 6, 6);
	--odin-accent-hover: rgb(191, 52, 52);
	--odin-rule: rgba(255, 255, 255, 0.14);
}

/* ---------------------------------------------------------------- ground */

html,
body,
.xprs-holder,
.main-page,
#content,
#children,
.master.container,
.master.container > #children,
.inner-page,
.page-box,
.page-wrapper,
.page {
	background-color: var(--odin-bg) !important;
	color: var(--odin-body);
}

/* Reveal-on-scroll. The platform shipped every stripe below the fold at
   opacity 0 and let its viewer JS add .visible-section / .play-effect as you
   scrolled. That JS lived on imcreator's dead xprs host, so without this the
   archived pages show a header, a hero and then nothing at all. */
.main-page .scroll-effects .item-box .item-wrapper,
.main-page .item-box.hidden-section .item-wrapper,
.main-page .items-enter-effects .item-details,
.main-page .items-enter-effects .pic-side,
.main-page .items-enter-effects .text-side,
[data-flex_element_effect] ~ #children .preview-content-holder,
[data-flex_element_effect] ~ #children .blocks-preview-content-holder {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	-webkit-transform: none !important;
}

/* Hover-reveal. The people grids carry the platform's item_hover9 /
   item_hover10 effect, which holds each card's text at opacity 0 until the
   portrait is hovered. On the team pages that hides the one thing the page
   exists to show - the leaders' names - so pin them visible. The hover zoom on
   the portrait itself still works. */
.master.item-box.item_hover9 .sub.item-box:not(.stripe-header) .item-details,
.master.item-box.item_hover10 .sub.item-box:not(.stripe-header) .item-details {
	opacity: 1 !important;
}

/* Stripes: the platform paints each band from stripe_data CSS - many of them
   white, which is what the 2017 design wanted and the 2025 one does not.
   Clearing background-COLOUR (never the shorthand) lets the black ground show
   through while any background-image on the same element still paints. */
#items-holder,
#items-holder-wrapper,
.sub,
.page-box,
.page-wrapper,
.multi-container,
.preview,
.image-cover,
.Picture,
.item-preview,
.preview-image-holder,
.inner-pic-holder,
.pic-side,
.text-side,
.vertical-aligner,
.helper-div,
.item-details,
.shrinker-parent,
.shrinker-content,
.blocks-preview-content-wrapper,
.blocks-preview-content-holder,
.item-box,
.header-box,
.footer-box,
.stripe-header-wrapper,
.item-wrapper,
.item-content,
.blocks,
.preview-content-wrapper,
.preview-content-holder {
	background-color: transparent !important;
}

.stripe-background {
	background-color: var(--odin-bg) !important;
}

/* every other band alternates to the softer near-black, as on the home page */
.master.container > #children > .item-box:nth-of-type(even) {
	background-color: var(--odin-bg-alt) !important;
}

/* ------------------------------------------------- colour, not typography */

.preview-title,
.blocks-preview-title,
.Title,
.Body h1,
h1,
h2 {
	color: var(--odin-fg) !important;
	background-color: transparent !important;
}

.preview-subtitle,
.blocks-preview-subtitle,
.Subtitle,
.Body h2 {
	color: var(--odin-muted) !important;
	background-color: transparent !important;
}

.preview-body,
.Body,
.Body p,
p,
li,
td,
span.text-element {
	color: var(--odin-body) !important;
	background-color: transparent !important;
}

/* the platform inlines colours on spans inside copy - pull them back, but
   leave their inline font-family alone */
.preview-body span,
.preview-body font,
.preview-title span,
.preview-subtitle span,
.MsoNormal span {
	color: inherit !important;
	background-color: transparent !important;
}

/* --------------------------------------------------------- nav and links */

.header-box,
.header-box .item-content {
	background-color: var(--odin-bg) !important;
	border: 0 !important;
}

/* The .net website style draws a 1px, 50px-radius pill around every link,
   which is what made the archived nav look like a row of boxes. The 2025
   menu draws none. Size and tracking stay as each page declares them. */
.preview-element.Link,
.preview-item-links a,
.preview-item-links span,
.item-link,
a.Link {
	color: var(--odin-fg) !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	direction: ltr !important;
}

/* The pill supplied the gap between link items everywhere it was drawn - the
   header menu and the in-page link rows both - so without it labels run
   together ("OUTSOURCINGCONSULTING" on the .net home). These are the home
   page menu's own spacing values. */
.preview-item-links span,
.preview-item-links a,
.blocks-preview-item-links span,
.blocks-preview-item-links a {
	padding-right: 10px !important;
	padding-left: 10px !important;
	padding-bottom: 8px !important;
	margin-right: 5px !important;
	margin-left: 5px !important;
}

.preview-element.Link:hover,
.preview-item-links a:hover,
.preview-item-links span:hover,
.item-link:hover,
a.Link:hover,
a:hover {
	color: var(--odin-accent-hover) !important;
}

a {
	color: var(--odin-fg);
	text-decoration: none;
}

/* ---------------------------------------------------------------- media */

.inner-pic img,
.preview-image-holder img,
.image-source,
.light-box-image img,
.gallery-box img {
	filter: grayscale(1) contrast(1.05);
}

/* ----------------------------------------------------- merged Team page */

/* net/team2.html now carries the whole roster (build/merge_team.py). The two
   division tiles head their own sections rather than sitting in the 2-up grid
   as just another card; the people cards below them sit four to a row. */
.matrix .sub.item-box.odin-section-lead {
	width: 100% !important;
	margin-bottom: 30px;
	/* the platform gives each item its own horizontal spacing, sized off that
	   item's image, which left the two tiles 10px out of line with each other */
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Each tile is a link to that division's team page, but full-bleed it read as
   decoration rather than as a link: a 3334x2500 stock image squeezed into a
   full-width 190px strip, cropped straight through the heads, and bright
   white against a black page. Contained to a readable width, bordered, and
   liftable on hover, it reads as the card it actually is. */
/* The platform sizes each tile's wrappers from its image's own dimensions -
   3334x2500 against 1024x1024 - so centring inside them put the two cards
   10px out of line with each other. Normalise the wrappers to the full width
   first, then centre only the picture, and both land on the same axis. */
.matrix .sub.item-box.odin-section-lead .multi-container,
.matrix .sub.item-box.odin-section-lead .Picture,
.matrix .sub.item-box.odin-section-lead .pic-side,
.matrix .sub.item-box.odin-section-lead .vertical-aligner,
.matrix .sub.item-box.odin-section-lead .helper-div {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.matrix .sub.item-box.odin-section-lead .inner-pic,
.matrix .sub.item-box.odin-section-lead .inner-pic-holder {
	max-width: 780px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.matrix .sub.item-box.odin-section-lead .inner-pic {
	height: 250px !important;
	max-height: 250px !important;
	background-size: cover !important;
	/* 30% keeps the figures' heads inside the frame; at 50% the crop cuts
	   through them, which is what the full-width strip was doing */
	background-position: center 30% !important;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: transform .25s ease, box-shadow .25s ease;
}

.matrix .sub.item-box.odin-section-lead:hover .inner-pic {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* The two tiles do not crop the same. Outsourcing is 3334x2500 with the
   figures standing across the lower middle, so 30% frames them. Consulting is
   a 1024x1024 square stacked speech bubbles over people at a table over, at
   the very bottom, chair legs and a "designed by freepik.com" watermark. So
   the usable band is the middle: 30% cut through the heads and anchoring to
   the bottom put the watermark on screen. Keyed on the platform's own ids,
   which is the only thing that tells the two tiles apart; if they ever
   change, both simply fall back to the shared 30% above. */
.matrix .sub.item-box#vbid-7515099e-qzyudlyg .inner-pic {
	background-position: center 48% !important;
}

/* The images themselves come off disk (build/localize_tile_images.py), and
   they are pinned here because the platform's "load-high-res" pass rewrites
   the inline background-image and appends "=s<width>" to whatever it finds.
   Against Google that is a valid request for a bigger rendering; against a
   local file it asks for "tile-outsourcing.jpg=s1560", which 404s and leaves
   the card blank - which is what made the tiles keep disappearing. An
   !important rule outranks the inline style that pass writes, so these are
   what actually paint, however often it runs. */
.matrix .sub.item-box#vbid-7515099e-bqmahzo5 .inner-pic {
	background-image: url(../img/tile-outsourcing.jpg) !important;
}

.matrix .sub.item-box#vbid-7515099e-qzyudlyg .inner-pic {
	background-image: url(../img/tile-consulting.jpg) !important;
}

/* The tile never said it went anywhere. This is an affordance rather than
   copy, so it lives in CSS - nothing in the archive's own text changes. */
.matrix .sub.item-box.odin-section-lead .preview-title-holder a::after {
	content: "View the team \2192";
	display: block;
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--odin-muted);
	transition: color .2s ease;
}

.matrix .sub.item-box.odin-section-lead:hover .preview-title-holder a::after {
	color: var(--odin-fg);
}

/* The tile's title-holder and its caption are both inline-block, so a short
   caption sits beside the "View the team" cue instead of under it - they read
   as one run-on line. The longer caption this replaced was wide enough to
   wrap, which is why it only showed up now. */
.matrix .sub.item-box.odin-section-lead [data-odin-team="1"] {
	display: block !important;
	width: 100% !important;
	margin-top: 4px;
}

/* Four to a row, all the same size. The archive's portraits have different
   original dimensions and the platform sizes each card from those, so without
   a fixed box the row staggers and the captions collide with the next stripe. */
.matrix .sub.item-box[data-odin-merged="1"] {
	display: inline-block !important;
	width: 23% !important;
	vertical-align: top !important;
	margin: 0 1% 36px !important;
	min-height: 330px !important;
}

.sub.item-box[data-odin-merged="1"] .inner-pic,
.sub.item-box[data-odin-merged="1"] .inner-pic-holder,
.sub.item-box[data-odin-merged="1"] .preview-image-holder {
	height: 230px !important;
	min-height: 230px !important;
	max-height: 230px !important;
}

/* the portraits are tall (roughly 600x1080) in a landscape card, so a centred
   crop cuts the head off - bias the crop to the top */
.sub.item-box[data-odin-merged="1"] .inner-pic {
	background-position: center top !important;
}

/* The two people the archive never photographed get a name-and-title card with
   no empty image frame, but it still holds its slot in the row. */
.sub.item-box.odin-no-portrait .pic-side,
.sub.item-box.odin-no-portrait .background-image-div {
	display: none !important;
}

.sub.item-box.odin-no-portrait .inner-pic,
.sub.item-box.odin-no-portrait .inner-pic-holder,
.sub.item-box.odin-no-portrait .preview-image-holder {
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
}

.sub.item-box.odin-no-portrait .multi-container,
.sub.item-box.odin-no-portrait .helper-div,
.sub.item-box.odin-no-portrait .text-side,
.sub.item-box.odin-no-portrait .vertical-aligner {
	display: block !important;
	width: 100% !important;
}

.sub.item-box.odin-no-portrait .text-side {
	padding-top: 110px !important;
}

/* --------------------------------------------------------------- forms */

.preview-form .Field,
input,
textarea,
select {
	background-color: rgba(255, 255, 255, 0.06) !important;
	color: var(--odin-fg) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--odin-rule) !important;
	border-radius: 0 !important;
}

::placeholder {
	color: var(--odin-muted) !important;
}

input[type="submit"],
.preview-form button {
	background-color: var(--odin-accent) !important;
	color: var(--odin-fg) !important;
}

input[type="submit"]:hover,
.preview-form button:hover {
	background-color: var(--odin-accent-hover) !important;
}

/* --------------------------------------------------------------- footer */

/* The .net footer CSS is already the same design as the home page's, rule for
   rule: Oswald wordmark at rgb(220,220,220), Arial addresses at 11px white, a
   centred 500px holder with 40px margins, on black. So the only thing to do
   is give it the black ground and put back the two colours the clamps above
   would otherwise take off it. No border, no resizing - the home page's
   footer has neither. */
.footer-box,
.footers-wrapper,
.footer-wrapper,
.footer {
	background-color: var(--odin-bg) !important;
}

.footer-box .preview-title,
.footer .preview-title {
	color: var(--odin-wordmark) !important;
}

.footer-box .preview-subtitle,
.footer .preview-subtitle,
.footer-box .preview-body,
.footer .preview-body {
	color: var(--odin-fg) !important;
}

/* the footer box carries a fixed min-height from the original design; centre
   its content in that space rather than letting it hang from the top */
.footer-box .helper-div,
.footer-box .vertical-aligner {
	vertical-align: middle;
}

/* dividers the platform draws in near-white */
hr,
.upper-line-break,
.lower-line-break {
	border-color: var(--odin-rule) !important;
	background-color: transparent !important;
}