semi-transparent band (cream) *

semi-transparent band (white) * * fabricair-theme and fabricair-wallpaper are independent - a page can take * the colors/buttons without the heavier backdrop treatment. Band classes * are applied directly to whichever elements a page wants to alternate; * order and count are up to the page, not inferred from position, so this * works regardless of how many sections a given page has. * * Reference implementation: truthbook-wireless/index.php (full treatment), * fabricair-phone/index.php and fabricair-family (truthbook/style.css) * (theme only, no wallpaper/bands). */ :root { --fabricair-blue: #0060c7; --fabricair-blue-light: #63c8ff; --fabricair-green: #5fe323; --fabricair-glow: #002e78; --fabricair-gradient: linear-gradient(90deg, var(--fabricair-blue) 0%, var(--fabricair-blue-light) 45%, var(--fabricair-green) 100%); } /* Fixed, left-anchored weave backdrop, fading into the page's own background color by 55% width. Apply to alongside .fabricair-theme. */ .fabricair-wallpaper { background: linear-gradient(to right, rgba(247, 247, 243, 0.25) 0%, #f7f7f3 55%), url('/img/fabricair-weave.svg'); background-repeat: no-repeat; background-position: left top; background-size: auto 100vh; background-attachment: fixed; } /* Alternating semi-transparent bands for sections sitting on the wallpaper - without this, solid section backgrounds hide it completely; making every section fully transparent instead erases the visual separation between sections. These two tints keep both: each section still reads as its own band, and the backdrop shows through to varying degrees. Card/box elements inside a banded section should keep their own opaque background, so text-on-card contrast is never affected by which band it's in. */ .fabricair-band-a { background: rgba(247, 247, 243, 0.66); } .fabricair-band-b { background: rgba(255, 255, 255, 0.32); } /* The base theme's neon-glow CTA button rule only fires inside .hero; pages with their own hero class (.tbw-hero, .tbp-hero, .tb-family-hero, etc.) never get it at all. Style it directly here, retinted to FabricAir blue (the base theme default is green). */ .fabricair-theme .btn-get-started { --glow-color: var(--fabricair-blue-light); --glow-spread-color: var(--fabricair-blue); --enhanced-glow-color: var(--fabricair-blue-light); display: inline-block; padding: 1em 1.4em; border: .25em solid var(--glow-color); border-radius: 1em; color: var(--glow-color); background-color: #000; font-family: var(--font-secondary); font-weight: bold; font-size: 15px; text-decoration: none; box-shadow: 0 0 1em .25em var(--glow-color), 0 0 4em 1em var(--glow-spread-color), inset 0 0 .75em .25em var(--glow-color); text-shadow: 0 0 .5em var(--glow-color); transition: all 0.3s; } /* Gradient fill for icon marks/badges, e.g. feature-card icon circles. */ .fabricair-icon-gradient { background: var(--fabricair-gradient); color: #fff; }