/* ============================================================ landing-inv-soft.css, a soft edge on the objects inside the three Investigation films. ONE FILE, AND IT IS MEANT TO BE DELETABLE. Ameer, 1 Sep: taking the depth of field off the Investigation scenes left the objects reading very hard, and he wants a very subtle blur back around their EDGES only, with the text and the figures still perfectly sharp. This is a trial, so the whole of it lives here and nothing else in the page was touched: remove the one in home.html and the boxes are exactly as they were, with no other file to unpick. WHY THIS IS NOT A FILTER. filter:blur() blurs a layer and everything in it, which is what was taken out last time: the numbers, the labels and the question all went soft with the pane. So the softening is done where the hardness actually is, in the EDGE ITSELF. Every object in these scenes draws its edge as two hairlines: inset 0 1px 0 the light caught along the top inset 0 0 0 1px the outline A hairline with no blur radius is a step: full strength for one pixel, nothing the next. Giving each one a small blur radius spreads that step into a gradient, and one faint halo outside the shape does the same on the other side of the boundary, so the edge falls off over about eight pixels instead of one. Nothing inside the pane is touched by a shadow, so the text is bit for bit what it was. THE STRENGTHS ARE RAISED A LITTLE, ON PURPOSE. Blurring a line spreads its brightness over more pixels, so the same alpha reads dimmer once it is soft. Each value below is lifted just enough to hold the edge at the weight it had. THE SCOPE IS THE FOUR INVESTIGATION SCENES, BY ID. .aq-glass is the one glass surface every film on the page is built from, #aqDash included, so a rule written on the class alone would soften the Build Dashboard box as well. #aqIns is in the list because it is the third Investigation box on options 7 and 8: the family has to stay one family whichever option is being looked at. TWO THEMES, BECAUSE AN ID BEATS A CLASS. css/landing-light.css writes the light theme's own hairlines with classes only, and any id selector here would silently win over it and put a white glow on a white pane. So every rule is written twice, once for each ground. ============================================================ */ /* THE WHOLE EFFECT IS THESE TWO NUMBERS. --iv-soft is how far the edge falls off inwards, --iv-halo how far it bleeds outwards. Raise them together for more, drop them together for less; at 0 the file does nothing at all. */ /* 3px and 5px after looking at four strengths side by side against the hard edge: 2.4/4 was hard to tell from no change at all, and 5/9 stopped reading as a soft edge and started reading as a glow around the object. */ #aqAsk, #aqWork, #aqIns, #aqWhy{ --iv-soft:3px; --iv-halo:5px } /* ---- the glass panes: the readings, the steps, the answer, the record, the composer at rest -------------------------------------------- */ #aqAsk .aq-glass, #aqWork .aq-glass, #aqIns .aq-glass, #aqWhy .aq-glass{ box-shadow:inset 0 1px var(--iv-soft) -.5px rgba(255,255,255,.30), inset 0 0 var(--iv-soft) rgba(255,255,255,.085), 0 0 var(--iv-halo) rgba(255,255,255,.030)} /* the composer, once the question is in it and it is ready to send */ #aqAsk .aq-comp.is-armed{ box-shadow:inset 0 1px var(--iv-soft) -.5px rgba(255,255,255,.42), inset 0 0 var(--iv-soft) rgba(255,255,255,.155), 0 0 var(--iv-halo) rgba(255,255,255,.042)} /* the record, at the moment it is sealed to the answer and takes the accent */ #aqWhy .aq-rec.is-sealed{ box-shadow:inset 0 1px var(--iv-soft) -.5px rgba(255,255,255,.30), inset 0 0 var(--iv-soft) color-mix(in srgb, var(--accent) 46%, transparent), 0 0 var(--iv-halo) color-mix(in srgb, var(--accent) 13%, transparent)} /* THE ENTITY CHIPS CARRY NO HAIRLINE AT ALL, so there is nothing to spread: their edge is the fill stopping. They get the halo on its own, which is the same treatment from the outside, so the entities and the line between them sit in the scene the way everything else does. Both the boxes that draw a relationship are here, Scene 1's bridge and Scene 2's join, because they are the same two objects. */ #aqAsk .aq-ent, #aqAsk .aq-ent-line, #aqWork .aq-ent, #aqWork .aq-ent-line{ box-shadow:0 0 var(--iv-halo) rgba(255,255,255,.030)} /* ============================================================ THE SAME EDGE, ON THE LIGHT GROUND ============================================================ Same geometry, the light theme's own inks. The top light stays white because on a near-white pane that is still what a lit edge looks like; the outline and the halo are black-based, exactly as css/landing-light.css writes them. */ html[data-theme="light"] #aqAsk .aq-glass, html[data-theme="light"] #aqWork .aq-glass, html[data-theme="light"] #aqIns .aq-glass, html[data-theme="light"] #aqWhy .aq-glass{ box-shadow:inset 0 1px var(--iv-soft) -.5px rgba(255,255,255,.95), inset 0 0 var(--iv-soft) rgba(0,0,0,.10), 0 0 var(--iv-halo) rgba(0,0,0,.045)} html[data-theme="light"] #aqAsk .aq-comp.is-armed{ box-shadow:inset 0 1px var(--iv-soft) -.5px rgba(0,0,0,.13), inset 0 0 var(--iv-soft) rgba(0,0,0,.115), 0 0 var(--iv-halo) rgba(0,0,0,.05)} html[data-theme="light"] #aqWhy .aq-rec.is-sealed{ box-shadow:inset 0 1px var(--iv-soft) -.5px rgba(0,0,0,.09), inset 0 0 var(--iv-soft) color-mix(in srgb, var(--accent) 46%, transparent), 0 0 var(--iv-halo) color-mix(in srgb, var(--accent) 15%, transparent)} html[data-theme="light"] #aqAsk .aq-ent, html[data-theme="light"] #aqAsk .aq-ent-line, html[data-theme="light"] #aqWork .aq-ent, html[data-theme="light"] #aqWork .aq-ent-line{ box-shadow:0 0 var(--iv-halo) rgba(0,0,0,.05)}