/* ========================================================================== Spectrum IT Hub — glass tile material -------------------------------------------------------------------------- One material, two tints, several accents. The recipe is constant everywhere so every tile on the site reads as the same physical surface; only the tint (dark band vs light band) and the accent edge change per section. The material is three things: 1. a top-to-bottom gradient laid over the tile's own colour, so light appears to catch the upper edge, 2. a bright inset line along that top edge plus a hairline right around, 3. a soft outer shadow, so the tile sits above its section rather than being painted onto it. WHY NO backdrop-filter A real backdrop blur only does anything when there is something behind the tile to blur, and it costs a compositor pass per tile — the most expensive CSS property on mobile. The only place on this site with imagery behind a tile is the Home hero, and the plate holding those tiles ALREADY carries `backdrop-filter: blur(14px)`. So the blur is inherited from the plate and nothing here adds another. WHY box-shadow AND NOT border These tiles sit in grids whose 1px gaps show the parent through as hairline dividers. A real border would change each tile's box and shove its neighbours around. Inset shadows draw the same line with zero layout cost. WHY !important ON background-image Every tile sets `background: ` inline, and the shorthand resets background-image to `none` — inline, which beats an ordinary rule here. The flag lets the sheen sit over the tile's own colour instead of being wiped by it. Nothing else in this file needs it. ========================================================================== */ .glass, .glass-paper { transition: box-shadow 300ms ease, background-color 300ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1); } /* --- Dark bands ---------------------------------------------------------- */ .glass { --glass-accent: rgba(255, 255, 255, 0.09); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.014) 58%, rgba(255, 255, 255, 0)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px var(--glass-accent), 0 14px 32px -22px rgba(0, 0, 0, 0.85); } /* --- Light bands: same physics, inverted light --------------------------- A dark glass here would invert the whole section rather than sit in it, so the light tint is a near-white sheen falling to a faint warm cast — paper catching light, not smoked glass. */ .glass-paper { --glass-accent: rgba(11, 12, 16, 0.07); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(232, 181, 71, 0.05)) !important; box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px var(--glass-accent), 0 14px 30px -24px rgba(11, 12, 16, 0.5); } /* --- Accents: the only thing that varies per section ---------------------- */ .glass-red { --glass-accent: rgba(211, 32, 39, 0.22); } /* Home hero tiles */ .glass-gold { --glass-accent: rgba(232, 181, 71, 0.20); } /* Core Strength */ .glass-sand { --glass-accent: rgba(138, 106, 31, 0.16); } /* light bands */ /* --- Hover: the tile catches more light ---------------------------------- Until now this file declared a transition and never declared a single :hover, so every tile on the site was inert. The highlight follows the language already used by the smaller chips on About — the accent edge goes gold and the surface warms — so a tile and a chip react the same way. WHY NO transform LIFT `reveal.js` writes `transform: none` inline on every [data-reveal] element, and inline beats a stylesheet. A translate here would need !important, and would then fight the reveal animation on the way in. Elevation is carried by the outer shadow growing instead, which nothing else writes to. WHY background-color AND NOT background-image The sheen is a gradient, and gradients do not interpolate — warming it would snap rather than fade. The colour underneath it does interpolate. It needs !important for the same reason the sheen does: every tile sets `background:` inline, and that shorthand sets background-color inline too. These are deliberately restrained. Several of these tiles are not clickable, so the cue says "this is a surface" and not "this is a link" — no cursor change, no lift. */ .glass:hover { --glass-accent: rgba(232, 181, 71, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px var(--glass-accent), 0 22px 44px -24px rgba(0, 0, 0, 0.95); } .glass-paper:hover { --glass-accent: rgba(138, 106, 31, 0.42); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px var(--glass-accent), 0 20px 38px -26px rgba(11, 12, 16, 0.62); } /* The warm surface is held back from the two tiles that already paint their own hover background: Home's `.focus-panel` (which also expands, and whose active tint is driven by --card-hover-bg in the page's own state) and Careers' `.role-row`. Without this, the !important above would win and a generic rule would quietly override a designed component state. Edge and shadow above still apply to them, so every tile on the site reacts. */ .glass:hover:not(.focus-panel):not(.role-row) { background-color: rgba(255, 255, 255, 0.035) !important; } .glass-paper:hover:not(.focus-panel):not(.role-row) { background-color: #FDFAF1 !important; } /* --- Services cards: a gold rule draws across the top edge ---------------- SCOPE: the seven cards in the Services page grid, and nothing else. Keyed on `.svc-grid`, which exists on that one container and nowhere else on the site. Home renders visually similar service cards, and they are deliberately left with the plain tile hover above. The edge-and-shadow hover is the whole-box part; this is the part that reads as an affordance — a 2px gold rule wiping left to right, the same accent language as the `border-top: 2px` on Home's focus panels, and square like everything else here. The rule is a pseudo-element, which is the only part of one of these cards React cannot touch — they are authored inline and every real child is React-managed (HANDOFF 6.7). `position: absolute` keeps it out of the card's flex flow; the cards already render `position: relative` inline and the declaration below guarantees it rather than trusting it. */ .svc-grid a.glass { position: relative; } .svc-grid a.glass::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #E8B547; transform: scaleX(0); transform-origin: left center; transition: transform 420ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .svc-grid a.glass:hover::before, .svc-grid a.glass:focus-visible::before { transform: scaleX(1); } /* The mono "EXPLORE →" label turns from the red CTA colour to gold, so the rule and the label read as one move. Matched on position — these cards carry no class of their own, and matching an inline style substring is the trap in HANDOFF 9b. !important because the colour is set inline. */ .svc-grid a.glass > div:nth-child(3) { transition: color 260ms ease; } .svc-grid a.glass:hover > div:nth-child(3), .svc-grid a.glass:focus-visible > div:nth-child(3) { color: #E8B547 !important; } /* --- Reduced motion ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .glass, .glass-paper { transition: none; } /* The rule still appears, it just stops sweeping. */ .svc-grid a.glass::before { transition: none; } } /* ========================================================================== "Our focus" — the accordion's own presentation -------------------------------------------------------------------------- The row is an accordion: one panel open, three collapsed to a rail. That is the right interaction, but it left three quarters of the row as empty white boxes, so the section read as four flat rectangles with a title in each. Nothing here changes the behaviour. It gives the empty space a job — an oversized ghosted numeral — and gives the open panel enough weight that the row reads as one object with a focus, rather than four objects of which three happen to be blank. State comes from `data-on`, written by the component. CSS cannot see React state, and the open panel now differs in more than one property, so one attribute carries it rather than five inline styles. ========================================================================== */ .focus-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; /* The row is align-items:stretch, so this floors the row height. Kept just above what the open panel needs for its title and three lines of copy — any more and the collapsed panels grow a void that nothing fills. */ min-height: 196px; } /* --- The numeral, again, as a watermark --------------------------------- Bottom-right and mostly transparent: present enough to give the panel a composition, faint enough that it never competes with the title. It brightens and drifts as its panel opens, which is what makes the row feel alive as the pointer crosses it. */ .focus-ghost { position: absolute; /* TOP right, not bottom. The titles are pushed to the foot of the panel, so the bottom corner is the one part of the card that is never empty — a numeral there sat directly behind the heading. The dead space is the top two thirds, which is exactly where this belongs. */ /* Inside the panel, not bled off it. Hanging it past the edge with overflow:hidden sliced the digits in half, which reads as a rendering fault rather than as a design. */ right: 14px; top: -6px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; /* Big enough to be the card's subject rather than its decoration. On a collapsed panel this and the title are the whole composition. */ font-size: 112px; line-height: 1; letter-spacing: -0.045em; color: var(--gold-accent); /* Strong enough to be seen as a deliberate mark. At 0.07 it read as a smudge, which is worse than nothing: the panel still looked empty AND slightly dirty. */ opacity: 0.13; pointer-events: none; user-select: none; transition: opacity 420ms ease, transform 620ms cubic-bezier(.16, 1, .3, 1); } .focus-panel:hover .focus-ghost { opacity: 0.18; } .focus-panel[data-on="1"] .focus-ghost { opacity: 0.2; transform: translate3d(6px, 4px, 0) scale(1.04); } /* --- A rule under the meta row ------------------------------------------- The collapsed panel has a number, an icon, and then 120px of nothing before its title. This gives that gap an edge to hang from, and it grows as the panel opens, so the transition has a second thing moving besides width. */ .focus-panel::before { content: ""; position: absolute; left: 20px; top: 60px; height: 2px; width: 24px; background: var(--gold-accent); opacity: 0.32; transition: width 560ms cubic-bezier(.16, 1, .3, 1), opacity 380ms ease; } .focus-panel:hover::before { opacity: 0.5; } .focus-panel[data-on="1"]::before { width: 58px; opacity: 0.85; } /* --- Titles on a shared baseline ----------------------------------------- Pushing the heading down with auto margin aligns all four titles along the same line whatever each panel contains, so the collapsed rails read as a deliberate rhythm rather than as three cards that failed to fill. */ .focus-panel h3 { margin-top: auto !important; } /* --- A rule that draws itself under the open panel ----------------------- The top border already goes gold on open, but it is 2px on a 2px rail and changes nothing about the panel's weight. This one has length: it wipes across the foot of the panel as it expands, so the eye is told which panel won rather than having to compare four borders. */ .focus-panel::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; /* Mostly gold with a red tip. An even gold-to-red gradient reads as a red underline across half the panel, which is a louder mark than this needs. */ background: linear-gradient(90deg, var(--gold-accent) 0%, var(--gold-accent) 62%, rgba(211, 32, 39, 0.9) 100%); transition: width 620ms cubic-bezier(.16, 1, .3, 1); } .focus-panel[data-on="1"]::after { width: 100%; } /* --- The open panel carries elevation ------------------------------------ Higher specificity than .glass-paper, so this replaces the flat paper shadow rather than fighting it. Deliberately NOT a transform: reveal.js writes `transform: none` inline on [data-reveal] elements, and the row is one. */ .focus-panel[data-on="1"] { box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(138, 106, 31, 0.30), 0 24px 46px -28px rgba(11, 12, 16, 0.55); } /* The icon is 18px, so it needs the scale to register at all. */ .focus-panel [data-role="icon"] { transition: opacity 380ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1); transform-origin: center; } .focus-panel[data-on="1"] [data-role="icon"] { transform: scale(1.2); } @media (prefers-reduced-motion: reduce) { .focus-ghost, .focus-panel::after, .focus-panel [data-role="icon"] { transition: none; } .focus-panel[data-on="1"] .focus-ghost { transform: none; } } /* --- Collapsed titles are closed, not disabled --------------------------- The state map colours a collapsed title with --muted, which on a near-white card is the same grey a disabled control uses. These are four live choices; only one is expanded. Card-title tone keeps them readable, and the open one still separates by going full --heading. */ .focus-panel[data-on="0"] h3 { color: var(--card-title) !important; } /* --- One line, faded, on a collapsed panel ------------------------------- The state map keeps a sliver of the description visible instead of hiding it outright. Clamping guarantees it is exactly one line whatever the copy says, so four collapsed panels stay the same shape as each other and the row does not jump when the pointer moves along it. */ .focus-panel[data-on="0"] .focus-body p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px !important; }