/* Theme Name: Fastband Theme URI: https://fastband.io Author: Fastband Author URI: https://fastband.io Description: Electric Vault — the Fastband marketing theme. Dark glass, gradient depth, Orbitron display type. Design lives in theme.json and this stylesheet; content lives in the WordPress editor. Version: 1.0.0 Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fastband Tags: full-site-editing, block-theme, dark, one-column */ /* Block-level styling only. Design tokens live in theme.json; everything else — glass, buttons, sections, the header — is in this file. */ /* The depth field. body background-color comes from theme.json; the radial stack is layered here because theme.json cannot express multiple images. */ body { background-image: radial-gradient(circle at 2% -6%, rgb(0 119 255 / .10), transparent 30rem), radial-gradient(circle at 96% 8%, rgb(0 229 255 / .09), transparent 34rem), radial-gradient(circle at 4% 62%, rgb(0 119 255 / .08), transparent 32rem), radial-gradient(circle at 78% 104%, rgb(31 74 119 / .28), transparent 44rem); background-attachment: fixed; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---- glass group ------------------------------------------------------- */ /* Applied via the "Glass" block style on core/group and core/column. */ .is-style-glass { -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35); background: linear-gradient(165deg, rgb(10 26 51 / .32), rgb(15 39 71 / .44) 70%); border: 1px solid rgb(0 150 255 / .28); border-radius: 18px; transition: box-shadow 180ms cubic-bezier(.2,.7,.2,1), border-color 180ms cubic-bezier(.2,.7,.2,1); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .is-style-glass { background: rgb(15 39 71 / .92); } } .is-style-glass:hover { border-color: rgb(0 150 255 / .5); box-shadow: 0 0 0 1px rgb(0 150 255 / .28), 0 0 32px -8px rgb(0 229 255 / .55); } /* ---- eyebrow ----------------------------------------------------------- */ /* Applied via the "Eyebrow" block style on core/paragraph. */ .is-style-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--accent); } /* ---- lit headline ------------------------------------------------------ */ /* Applied via the "Lit" block style on core/heading. */ .is-style-lit { background: linear-gradient(100deg, #F7FAFF 0%, #8BE3FF 45%, #00E5FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- ghost button ------------------------------------------------------ */ .wp-block-button.is-style-ghost .wp-block-button__link { background: rgb(15 39 71 / .35); color: var(--wp--preset--color--ink); border: 1px solid rgb(0 150 255 / .38); box-shadow: none; } .wp-block-button.is-style-ghost .wp-block-button__link:hover { border-color: rgb(0 229 255 / .6); background: rgb(20 52 88 / .5); box-shadow: none; } /* ---- sticky header ----------------------------------------------------- */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); background: rgb(6 11 22 / .72); border-bottom: 1px solid rgb(0 150 255 / .18); } /* The mobile menu is `position: fixed`, but a backdrop-filter on an ancestor makes that ancestor the containing block — so with the glass header in place the overlay was being trapped inside the header's own 80px box instead of covering the screen. Core sets `has-modal-open` on while the menu is open; drop the filter for that moment. The overlay covers the header anyway. */ html.has-modal-open .wp-site-blocks > header.wp-block-template-part { -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---- logo lockup ------------------------------------------------------- */ /* The site logo sits in a flex row with the site title, and flex will shrink an image before it wraps the text beside it — at 390px that took a 44px mark down to 28px. Hold the size and let the title wrap instead. */ .wp-site-blocks > header .wp-block-site-logo { flex-shrink: 0; } /* ---- headings balance -------------------------------------------------- */ h1, h2, h3, h4 { text-wrap: balance; } /* ---- focus ------------------------------------------------------------- */ a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---- measured text ------------------------------------------------------ */ /* Constrained layout centers a child narrower than the content width, and it does so with `margin-left/right: auto !important` on `.is-layout-constrained > :where(...)`. Body copy should sit flush with the heading above it, and !important is the only thing that outranks !important, so this matches core rather than trying to out-specify it. */ .fb-measure { max-width: 62ch; margin-inline-start: 0 !important; margin-inline-end: auto !important; } .fb-measure.fb-measure--wide { max-width: 68ch; } /* ---------- lists inside cards ---------- */ .wp-block-list { padding-left: 1.1rem; color: var(--wp--preset--color--text-secondary); } .wp-block-list li { margin-block: 0.45rem; } .wp-block-list li::marker { color: var(--wp--preset--color--accent); } /* ---------- inline links in body copy ---------- */ .wp-block-post-content a:not(.wp-element-button), .wp-block-template-part a:not(.wp-element-button) { color: var(--wp--preset--color--soft); text-decoration-color: rgb(0 229 255 / .4); text-underline-offset: 3px; } .wp-block-post-content a:not(.wp-element-button):hover, .wp-block-template-part a:not(.wp-element-button):hover { color: var(--wp--preset--color--accent); } .is-style-eyebrow a { color: inherit; text-decoration: none; } .is-style-eyebrow a:hover { color: var(--wp--preset--color--soft); } /* ---------- navigation submenu ---------- */ /* Core ships `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: #fff }`. Block styles can be printed after the theme stylesheet, so matching that specificity is not reliably enough to win — the container class is repeated to raise specificity without making assumptions about where in the document the header happens to sit. */ .wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { background-color: rgb(10 26 51 / 0.92); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgb(0 150 255 / 0.3); border-radius: 14px; padding: 0.4rem; min-width: 15.5rem; color: var(--wp--preset--color--text-secondary); box-shadow: 0 0 0 1px rgb(6 11 22 / 0.55), 0 24px 50px -24px rgb(0 0 0 / 0.9), 0 0 36px -16px rgb(0 229 255 / 0.3); } /* Safari on an old build, and any browser with backdrop-filter disabled, would otherwise render this popover as a translucent smear over the hero image. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { background-color: rgb(10 26 51 / 0.99); } } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; padding: 0.55rem 0.85rem; border-radius: 9px; color: var(--wp--preset--color--text-secondary); white-space: nowrap; transition: background-color 140ms ease, color 140ms ease; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { background-color: rgb(31 74 119 / 0.55); color: var(--wp--preset--color--ink); } /* The page you are already on. Without this it inherits a muted grey and reads as a disabled row rather than the current one. */ .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__submenu-container .current_page_item > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent); } /* Slide the popover down a few pixels as it fades in. Core handles the actual show/hide with opacity and visibility; this only adds the movement. */ .wp-block-navigation .has-child .wp-block-navigation__submenu-container { transform: translateY(-5px); transition: opacity 160ms ease, transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1); } .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .wp-block-navigation .has-child .wp-block-navigation__submenu-container { transform: none; transition: none; } } /* The chevron on the parent item. */ .wp-block-navigation .wp-block-navigation-submenu__toggle svg, .wp-block-navigation .wp-block-navigation__submenu-icon svg { color: var(--wp--preset--color--text-muted); transition: color 140ms ease, transform 160ms ease; } .wp-block-navigation .has-child:hover .wp-block-navigation__submenu-icon svg, .wp-block-navigation .has-child:focus-within .wp-block-navigation__submenu-icon svg { color: var(--wp--preset--color--accent); transform: rotate(180deg); } /* Mobile overlay. Core paints this white through `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)`, which is five classes deep, so the override has to use the same selector. */ .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { /* Opaque, not translucent: at 97% the hero headline still ghosted through the menu and read as a rendering fault rather than a design. */ background-color: var(--wp--preset--color--canvas); background-image: radial-gradient(circle at 8% 0%, rgb(0 119 255 / 0.16), transparent 22rem), radial-gradient(circle at 100% 100%, rgb(0 229 255 / 0.10), transparent 24rem); color: var(--wp--preset--color--ink); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); font-size: 1.05rem; padding-block: 0.35rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent); background-color: transparent; } /* Inside the overlay the submenu is an inline list, not a floating card, so the card treatment has to be undone or it draws a panel inside a panel. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { background-color: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0.5rem; transform: none; } .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { fill: var(--wp--preset--color--ink); } /* ---------- contact form ---------- */ .fb-form__row { display: flex; flex-direction: column; gap: 0.4rem; margin-block: 1.15rem; } .fb-form__row label { font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--text-secondary); } .fb-form__req { color: var(--wp--preset--color--accent); } .fb-form__help { font-size: 0.8125rem; color: var(--wp--preset--color--text-muted); } .fb-form input, .fb-form select, .fb-form textarea { box-sizing: border-box; width: 100%; max-width: 100%; font-family: inherit; font-size: 1rem; color: var(--wp--preset--color--ink); background: rgb(6 11 22 / .55); border: 1px solid rgb(0 150 255 / .3); border-radius: 10px; padding: 0.7rem 0.85rem; transition: border-color 160ms ease, box-shadow 160ms ease; } .fb-form textarea { resize: vertical; min-height: 8rem; } .fb-form input:focus, .fb-form select:focus, .fb-form textarea:focus { outline: none; border-color: rgb(0 229 255 / .6); box-shadow: 0 0 0 3px rgb(0 229 255 / .14); } .fb-form button { font-family: inherit; font-weight: 600; cursor: pointer; } .fb-form__row--submit { align-items: flex-start; margin-top: 1.75rem; } /* Honeypot. Hidden from people, still present for a bot that reads the DOM. */ .fb-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fb-form__notice { border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; font-size: 0.9375rem; } .fb-form__notice--ok { border: 1px solid rgb(0 229 255 / .45); background: rgb(0 229 255 / .1); color: var(--wp--preset--color--ink); } .fb-form__notice--error { border: 1px solid rgb(255 120 120 / .5); background: rgb(255 120 120 / .1); color: var(--wp--preset--color--ink); } /* ---------- header at phone widths ---------- */ /* The header holds a site title, the menu toggle and two buttons. Left to wrap, the buttons stack and double the header height on a phone, so below the navigation block's own breakpoint they stay on one row and shrink. */ @media (max-width: 600px) { .wp-site-blocks > header .wp-block-buttons { flex-wrap: nowrap; gap: 0.4rem; } .wp-site-blocks > header .wp-block-button__link { padding-inline: 0.8rem; font-size: 0.8125rem; white-space: nowrap; } } @media (max-width: 400px) { /* At this width something has to go. The hero repeats "Talk to us" immediately below, and Contact is in the menu, so the header keeps Login — the link returning customers come here for. */ .wp-site-blocks > header .wp-block-buttons .wp-block-button:not(.is-style-ghost) { display: none; } } /* ---------- framed images ---------- */ /* Photography on this site sits behind the same glass edge as the cards, so an image never reads as a stock photo dropped onto the page. */ .wp-block-image.is-style-framed { margin: 0; } .wp-block-image.is-style-framed img { width: 100%; border-radius: 18px; border: 1px solid rgb(0 150 255 / .28); box-shadow: 0 26px 60px -30px rgb(0 0 0 / .9); /* Pull the image toward the palette instead of leaving it warm and foreign. */ filter: saturate(.92) contrast(1.04); }