/* BWM Portfolio v2 — custom animated portfolio section */ /* the viewer, concept lightbox and cursor pill are re-parented to at runtime, so the design tokens must be defined on them too, not just .bwm-pf2 */ .bwm-pf2, .bwm-pf2-viewer, .bwm-pf2-cursor, .bwm-pf2-concept { --bwm-bg: #0d1832; --bwm-panel: #16234a; --bwm-navy: #152448; --bwm-blue: #159be8; --bwm-blue-lt: #6ec4f7; --bwm-yellow: #fbd80c; --bwm-muted: #7d8cae; --bwm-muted-2: #8f9dbd; --bwm-text-soft: #dbe3f2; --bwm-sticky-top: 85px; --bwm-ink: #152448; --bwm-ink-soft: #64748b; --bwm-line: rgba(13, 24, 50, 0.1); font-family: Averta, 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--bwm-ink); -webkit-font-smoothing: antialiased; } .bwm-pf2 *, .bwm-pf2 *::before, .bwm-pf2 *::after { box-sizing: border-box; } .bwm-pf2 button, .bwm-pf2-viewer button { text-transform: none; letter-spacing: normal; font-family: inherit; } /* the theme forces a fixed width on buttons — size these by content instead */ .bwm-pf2-filter, .bwm-pf2-more, .bwm-pf2-play, .bwm-pf2-empty button { width: auto; min-width: 0; min-height: 0; } .bwm-pf2 .bwm-pf2-tile, .bwm-pf2-viewer .bwm-pf2-strip-item { width: 100%; min-width: 0; } .bwm-pf2 img { max-width: 100%; } .bwm-pf2 ::selection { background: var(--bwm-yellow); color: var(--bwm-navy); } /* ---------- Filter bar ---------- */ .bwm-pf2-filterbar { position: sticky; position: -webkit-sticky; top: var(--bwm-sticky-top); z-index: 40; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(13, 24, 50, 0.09); box-shadow: 0 10px 30px rgba(13, 24, 50, 0.05); } .bwm-pf2-filterbar-in { max-width: 1290px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; } .bwm-pf2-filters { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bwm-pf2-filters::-webkit-scrollbar { display: none; } .bwm-pf2-filter { position: relative; flex: none; padding: 10px 13px 11px; border: 0; border-radius: 100px; background: none; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: color 0.2s, background 0.2s; color: var(--bwm-ink-soft); } /* extra specificity so the theme's generic button:hover background/color can't leak in */ .bwm-pf2 .bwm-pf2-filter:hover, .bwm-pf2 .bwm-pf2-filter:focus-visible { color: var(--bwm-navy); background: var(--bwm-yellow); } .bwm-pf2 .bwm-pf2-filter.is-on { color: var(--bwm-ink); background: none; } .bwm-pf2-filter-bar { position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; border-radius: 2px; background: var(--bwm-blue); transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .bwm-pf2-filter.is-on .bwm-pf2-filter-bar { transform: scaleX(1); } /* ---------- Work section ---------- */ .bwm-pf2-work { position: relative; background: #ffffff; } .bwm-pf2-glow { position: absolute; left: 50%; top: 0; width: 1100px; height: 700px; max-width: 100vw; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(21, 155, 232, 0.06), rgba(255, 255, 255, 0) 70%); pointer-events: none; } .bwm-pf2-work-in { position: relative; max-width: 1290px; margin: 0 auto; padding: 54px 24px 100px; } /* ---------- Grid tiles ---------- */ .bwm-pf2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 36px 30px; } .bwm-pf2-tile { display: block; width: 100%; text-align: left; padding: 0; border: 1px solid var(--bwm-line); border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(13, 24, 50, 0.05); cursor: pointer; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s, background 0.3s; } .bwm-pf2-tile:hover, .bwm-pf2-tile:focus-visible { border-color: rgba(21, 155, 232, 0.55); box-shadow: 0 24px 60px rgba(13, 24, 50, 0.16), 0 0 0 1px rgba(21, 155, 232, 0.2); transform: translateY(-5px); background: #fff; } .bwm-pf2-tile.is-hidden, .bwm-pf2-tile.is-paged { display: none; } .bwm-pf2-empty[hidden] { display: none; } /* entrance animation */ .bwm-pf2-anim .bwm-pf2-tile { opacity: 0; transform: translateY(26px); } .bwm-pf2-anim .bwm-pf2-tile.is-in { opacity: 1; transform: none; transition: opacity 0.6s cubic-bezier(0.2, 0.85, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.85, 0.2, 1), border-color 0.3s, box-shadow 0.3s, background 0.3s, padding 0.25s; transition-delay: var(--bwm-d, 0s), var(--bwm-d, 0s), 0s, 0s, 0s, 0s; } .bwm-pf2-anim .bwm-pf2-tile.is-in:hover { transform: translateY(-5px); } .bwm-pf2-chrome { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid rgba(13, 24, 50, 0.08); } .bwm-pf2-chrome i { width: 7px; height: 7px; border-radius: 50%; background: rgba(13, 24, 50, 0.18); } .bwm-pf2-chrome em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: rgba(13, 24, 50, 0.35); } .bwm-pf2-shot { position: relative; display: block; overflow: hidden; background: #eef2f8; aspect-ratio: 4 / 3; } .bwm-pf2-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; transition: object-position 2.6s cubic-bezier(0.36, 0.05, 0.35, 1); } .bwm-pf2-tile:hover .bwm-pf2-shot img, .bwm-pf2-tile:focus-visible .bwm-pf2-shot img { object-position: 50% 100%; } .bwm-pf2-shot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(21, 155, 232, 0); transition: background 0.3s; } .bwm-pf2-tile:hover .bwm-pf2-shot::after { background: rgba(21, 155, 232, 0.9); } .bwm-pf2-tileinfo { padding: 18px 18px 20px; display: flex; align-items: center; gap: 14px; } .bwm-pf2-tiletext { min-width: 0; flex: 1; display: block; } .bwm-pf2-tiletext strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.005em; color: var(--bwm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bwm-pf2-tiletext small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--bwm-ink-soft); } .bwm-pf2-pill { flex: none; padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(21, 155, 232, 0.45); color: #0d7fc2; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* ---------- Empty + load more ---------- */ .bwm-pf2-empty { padding: 80px 20px; text-align: center; border: 1px dashed rgba(13, 24, 50, 0.25); border-radius: 10px; } .bwm-pf2-empty div { font-size: 19px; font-weight: 700; color: var(--bwm-ink); } .bwm-pf2-empty button { margin-top: 18px; padding: 12px 22px; border: 0; border-radius: 4px; background: var(--bwm-yellow); color: var(--bwm-navy); font-size: 14px; font-weight: 700; cursor: pointer; } .bwm-pf2-morewrap { margin-top: 54px; display: flex; justify-content: center; } .bwm-pf2-morewrap[hidden] { display: none; } .bwm-pf2-more { padding: 16px 36px; border: 1px solid rgba(13, 24, 50, 0.3); border-radius: 100px; background: none; color: var(--bwm-ink); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s; } .bwm-pf2-more:hover { background: var(--bwm-yellow); border-color: var(--bwm-yellow); color: var(--bwm-navy); } @keyframes bwmSheen { 0%, 55% { left: -80%; } 85%, 100% { left: 160%; } } /* ---------- Header CTA pair: "free site concept" (ghost) + "start a project" (solid) ---------- */ .site-header .ast-masthead-custom-menu-items { display: flex; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 12px; } .site-header a.bwm-hdr-concept { position: relative; display: inline-flex; align-items: center; align-self: center; gap: 7px; height: auto; margin: 0; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 100px; color: #fff !important; /* Astra's sticky-header link color (#777) overrides plain rules */ font-family: Averta, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; text-transform: lowercase; white-space: nowrap; overflow: hidden; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .site-header a.bwm-hdr-concept span { color: #fbd80c; font-size: 13px; line-height: 1; animation: bwmTwinkle 2.2s ease-in-out infinite; } .site-header a.bwm-hdr-concept::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.25), transparent); transform: skewX(-20deg); animation: bwmSheen 3.6s ease-in-out infinite; pointer-events: none; } .site-header a.bwm-hdr-concept:hover { border-color: #fbd80c; color: #fbd80c !important; background: rgba(251, 216, 12, 0.08); } /* compact the theme's "start a project" into the matching solid pill */ .site-header .ast-custom-button-link .ast-button { padding: 10px 18px !important; border-radius: 100px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; min-height: 0 !important; height: auto !important; letter-spacing: 0.01em; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .site-header .ast-custom-button-link:hover .ast-button { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } /* animated arrow after "start a project" */ .site-header .ast-custom-button-link .ast-button::after { content: '\2192'; display: inline-block; margin-left: 7px; animation: bwmArrowNudge 1.6s ease-in-out infinite; } @keyframes bwmArrowNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } .site-header .ast-custom-button-link:hover .ast-button::after { animation: none; transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .site-header .ast-custom-button-link .ast-button::after, .site-header a.bwm-hdr-concept span, .site-header a.bwm-hdr-concept::after { animation: none !important; } } /* very narrow screens: the ghost pill would crowd the mobile header */ @media (max-width: 640px) { .site-header a.bwm-hdr-concept { display: none; } } /* ---------- Free-concept CTA: grid tile ---------- */ .bwm-pf2-ctatile { position: relative; display: flex; flex-direction: column; text-align: left; border: 1px solid rgba(21, 155, 232, 0.5); border-radius: 10px; background: linear-gradient(150deg, #14224a 0%, #1a2f66 55%, #1f3d84 100%); cursor: pointer; overflow: hidden; animation: bwmGlow 3.4s ease-in-out infinite; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .bwm-pf2-ctatile:hover, .bwm-pf2-ctatile:focus-visible { transform: translateY(-5px); border-color: rgba(251, 216, 12, 0.65); } @keyframes bwmGlow { 0%, 100% { box-shadow: 0 6px 18px rgba(13, 24, 50, 0.12), 0 0 0 0 rgba(21, 155, 232, 0.25); } 50% { box-shadow: 0 10px 30px rgba(13, 24, 50, 0.2), 0 0 26px 2px rgba(21, 155, 232, 0.28); } } .bwm-pf2-ctatile::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.09), transparent); transform: skewX(-18deg); animation: bwmSheen 4.5s ease-in-out infinite; pointer-events: none; } .bwm-pf2-ctatile .bwm-pf2-chrome { border-bottom-color: rgba(255, 255, 255, 0.12); } .bwm-pf2-ctatile .bwm-pf2-chrome i { background: rgba(255, 255, 255, 0.28); } .bwm-pf2-cta-url { margin-left: auto; display: flex; align-items: center; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #9db5e4; } .bwm-pf2-cta-url b { width: 1px; height: 12px; margin-left: 2px; background: var(--bwm-yellow); animation: bwmCaret 1s steps(1) infinite; } @keyframes bwmCaret { 50% { opacity: 0; } } .bwm-pf2-ctabody { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 26px 24px; } .bwm-pf2-cta-spark { color: var(--bwm-yellow); font-size: 22px; line-height: 1; animation: bwmTwinkle 2.2s ease-in-out infinite; } @keyframes bwmTwinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.35) rotate(20deg); opacity: 0.75; } } .bwm-pf2-ctabody strong { font-size: 23px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: #fff; } .bwm-pf2-ctabody small { font-size: 14px; line-height: 1.55; font-weight: 500; color: #b3bfd8; } .bwm-pf2-ctabtn { margin-top: 6px; display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 100px; background: var(--bwm-yellow); color: var(--bwm-navy); font-size: 14px; font-weight: 700; line-height: 1; transition: background 0.2s, transform 0.2s; } .bwm-pf2-ctatile:hover .bwm-pf2-ctabtn { background: #ffe63f; transform: translateX(2px); } .bwm-pf2-cta-foot { display: flex; align-items: center; gap: 14px; padding: 16px 18px 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .bwm-pf2-cta-foottext { min-width: 0; flex: 1; display: block; } .bwm-pf2-cta-foottext strong { display: block; font-size: 15px; font-weight: 700; color: #fff; } .bwm-pf2-cta-foottext small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: #8f9dbd; } .bwm-pf2-pill-free { border-color: rgba(251, 216, 12, 0.6); color: var(--bwm-yellow); } /* ---------- Free-concept lightbox ---------- */ .bwm-pf2-concept { position: fixed; inset: 0; z-index: 100001; background: rgba(6, 12, 28, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 24px; display: flex; align-items: center; justify-content: center; overflow-y: auto; animation: bwmv2in 0.24s ease both; font-family: Averta, 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .bwm-pf2-concept[hidden] { display: none; } /* neutralize the theme's global button sizing/casing inside the lightbox */ .bwm-pf2-concept button { width: auto; min-width: 0; min-height: 0; text-transform: none; letter-spacing: normal; font-family: inherit; } .bwm-pf2-concept .bwm-pf2-concept-submit { width: 100%; } .bwm-pf2-concept-card { position: relative; width: 100%; max-width: 900px; max-height: calc(100vh - 48px); overflow-y: auto; display: grid; grid-template-columns: 340px 1fr; border-radius: 14px; overflow-x: hidden; background: #fff; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); margin: auto; } .bwm-pf2-concept .bwm-pf2-concept-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(13, 24, 50, 0.07); color: var(--bwm-navy); font-size: 0; line-height: 0; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; } /* crisp CSS-drawn X instead of a text glyph */ .bwm-pf2-concept-close::before, .bwm-pf2-concept-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; border-radius: 2px; background: currentColor; } .bwm-pf2-concept-close::before { transform: translate(-50%, -50%) rotate(45deg); } .bwm-pf2-concept-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .bwm-pf2-concept-close:hover { transform: rotate(90deg); } .bwm-pf2 .bwm-pf2-concept-close:hover, .bwm-pf2-concept .bwm-pf2-concept-close:hover { background: var(--bwm-yellow); color: var(--bwm-navy); } .bwm-pf2-concept-side { padding: 38px 32px; background: linear-gradient(160deg, #14224a 0%, #1a2f66 55%, #1f3d84 100%); color: #fff; display: flex; flex-direction: column; gap: 16px; } .bwm-pf2-concept-kicker { align-self: flex-start; padding: 6px 12px; border: 1px solid rgba(251, 216, 12, 0.55); border-radius: 100px; color: var(--bwm-yellow); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .bwm-pf2-concept-side h3 { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: #fff; } .bwm-pf2-concept-side p { margin: 0; font-size: 14px; line-height: 1.6; color: #b3bfd8; } .bwm-pf2-concept-side ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .bwm-pf2-concept-side li { position: relative; padding-left: 22px; font-size: 13px; font-weight: 600; color: #dbe3f2; } .bwm-pf2-concept-side li::before { content: '\2713'; position: absolute; left: 0; color: var(--bwm-yellow); font-weight: 800; } .bwm-pf2-concept-talk { margin-top: auto; font-size: 13px; font-weight: 600; color: #6ec4f7; text-decoration: none; } .bwm-pf2-concept-talk:hover { color: #fff; } .bwm-pf2-concept-main { padding: 34px 34px 30px; } .bwm-pf2-concept-fine { margin: 14px 0 0; font-size: 12px; font-weight: 500; color: var(--bwm-ink-soft); text-align: center; } /* ---- Gravity Forms restyle (scoped to the lightbox) ---- */ .bwm-pf2-concept-main .gform_wrapper { margin: 0; } .bwm-pf2-concept-main .gform_heading { display: none; } .bwm-pf2-concept-main .gform_fields { grid-row-gap: 16px; grid-column-gap: 14px; } .bwm-pf2-concept-main .gfield_label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bwm-ink-soft); } .bwm-pf2-concept-main .gfield_required { color: var(--bwm-blue); padding-left: 2px; } .bwm-pf2-concept-main input[type="text"], .bwm-pf2-concept-main input[type="email"] { display: block; width: 100%; padding: 12px 14px; border: 1px solid rgba(13, 24, 50, 0.18); border-radius: 6px; background: #fff; color: var(--bwm-ink); font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; transition: border-color 0.2s, box-shadow 0.2s; } .bwm-pf2-concept-main input[type="text"]:focus, .bwm-pf2-concept-main input[type="email"]:focus { outline: none; border-color: var(--bwm-blue); box-shadow: 0 0 0 3px rgba(21, 155, 232, 0.15); } /* goal checkboxes as chips — !important throughout because Gravity's own gravity-theme stylesheet loads after this one and restyles choice inputs */ .bwm-pf2-concept-main .gfield_checkbox { display: flex !important; flex-wrap: wrap; gap: 8px !important; } .bwm-pf2-concept-main .gfield_checkbox .gchoice { position: relative !important; display: block !important; margin: 0 !important; } .bwm-pf2-concept-main .gfield_checkbox input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 100px !important; background: none !important; box-shadow: none !important; opacity: 0 !important; cursor: pointer; z-index: 1; } .bwm-pf2-concept-main .gfield_checkbox input[type="checkbox"]::before, .bwm-pf2-concept-main .gfield_checkbox input[type="checkbox"]::after { display: none !important; content: none !important; } .bwm-pf2-concept-main .gfield_checkbox label { display: inline-block !important; margin: 0 !important; padding: 8px 14px !important; border: 1px solid rgba(13, 24, 50, 0.2) !important; border-radius: 100px !important; background: #fff; color: var(--bwm-ink-soft); font-size: 13px !important; font-weight: 600; line-height: 1.3 !important; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; max-width: none !important; } .bwm-pf2-concept-main .gfield_checkbox .gchoice:hover label { border-color: var(--bwm-blue) !important; color: var(--bwm-ink); } .bwm-pf2-concept-main .gfield_checkbox input[type="checkbox"]:checked + label { border-color: var(--bwm-yellow) !important; background: var(--bwm-yellow); color: var(--bwm-navy); } .bwm-pf2-concept-main .gform_footer { margin: 4px 0 0; padding: 0; } .bwm-pf2-concept .gform_button { width: 100%; min-height: 0; padding: 16px 20px; border: 0; border-radius: 6px; background: var(--bwm-yellow); color: var(--bwm-navy); font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.01em; text-transform: none; line-height: 1.2; cursor: pointer; transition: background 0.2s, transform 0.15s; } .bwm-pf2-concept .gform_button:hover { background: #ffe63f; color: var(--bwm-navy); transform: translateY(-1px); } /* validation states */ .bwm-pf2-concept-main .gform_validation_errors { margin: 0 0 16px; padding: 11px 14px; border: 1px solid rgba(220, 60, 60, 0.3); border-radius: 6px; background: rgba(220, 60, 60, 0.07); box-shadow: none; } .bwm-pf2-concept-main .gform_validation_errors h2 { margin: 0; font-size: 13px; font-weight: 700; color: #b23c3c; } .bwm-pf2-concept-main .gform_validation_errors ol, .bwm-pf2-concept-main .validation_list { display: none; } .bwm-pf2-concept-main .gfield_validation_message { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; color: #b23c3c; } .bwm-pf2-concept-main .gfield_error input[type="text"], .bwm-pf2-concept-main .gfield_error input[type="email"] { border-color: rgba(220, 60, 60, 0.55); } /* confirmation */ .bwm-pf2-gfsuccess { text-align: center; padding: 40px 10px; } .bwm-pf2-gfsuccess span { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--bwm-yellow); color: var(--bwm-navy); font-size: 28px; font-weight: 800; animation: bwmPop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; } @keyframes bwmPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .bwm-pf2-gfsuccess h4 { margin: 18px 0 0; font-size: 22px; font-weight: 800; color: var(--bwm-ink); } .bwm-pf2-gfsuccess p { margin: 10px auto 0; max-width: 380px; font-size: 14px; line-height: 1.6; color: var(--bwm-ink-soft); } /* ---------- Custom cursor pill ---------- */ .bwm-pf2-cursor { position: fixed; left: 0; top: 0; z-index: 99998; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity 0.2s, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .bwm-pf2-cursor span { display: block; padding: 15px 24px; border-radius: 100px; background: var(--bwm-yellow); color: var(--bwm-navy); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } /* ---------- Viewer ---------- */ .bwm-pf2-viewer { position: fixed; inset: 0; z-index: 99999; background: rgba(6, 12, 28, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 26px; display: flex; flex-direction: column; animation: bwmv2in 0.24s ease both; font-family: Averta, 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #fff; } .bwm-pf2-viewer[hidden] { display: none; } @keyframes bwmv2in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .bwm-pf2-viewer-top { flex: none; display: flex; align-items: center; gap: 18px; padding-bottom: 20px; } .bwm-pf2-viewer-count { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.4); } .bwm-pf2-viewer-name { min-width: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bwm-pf2-viewer-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; } .bwm-pf2-play { height: 40px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 100px; background: none; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .bwm-pf2-play:hover { background: var(--bwm-yellow); color: var(--bwm-navy); border-color: var(--bwm-yellow); } .bwm-pf2-nav { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; } .bwm-pf2-nav:hover { border-color: var(--bwm-yellow); } .bwm-pf2-arr-l { display: block; width: 8px; height: 8px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } .bwm-pf2-arr-r { display: block; width: 8px; height: 8px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); } .bwm-pf2-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 18px; font-weight: 600; cursor: pointer; line-height: 1; transition: background 0.2s, color 0.2s; } .bwm-pf2-close:hover { background: var(--bwm-yellow); color: var(--bwm-navy); } .bwm-pf2-viewer-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 300px; gap: 26px; } .bwm-pf2-viewer-stage { min-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); background: var(--bwm-panel); display: flex; flex-direction: column; } .bwm-pf2-viewer-stage .bwm-pf2-chrome { flex: none; height: 36px; } .bwm-pf2-viewer-stage .bwm-pf2-chrome i { width: 8px; height: 8px; } .bwm-pf2-viewer-scroll { flex: 1; min-height: 0; overflow-y: auto; } .bwm-pf2-viewer-scroll img { display: block; width: 100%; height: auto; } .bwm-pf2-viewer-side { min-height: 0; display: flex; flex-direction: column; gap: 22px; } .bwm-pf2-viewer-meta { display: grid; gap: 18px; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.035); } .bwm-pf2-viewer-meta small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bwm-muted); } .bwm-pf2-viewer-meta strong { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; color: #fff; } .bwm-pf2-viewer-meta a { margin-top: 2px; height: 46px; border-radius: 4px; background: var(--bwm-yellow); color: var(--bwm-navy); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s; } .bwm-pf2-viewer-meta a:hover { background: #ffe63f; color: var(--bwm-navy); } .bwm-pf2-strip { flex: 1; min-height: 0; display: flex; flex-direction: column; } .bwm-pf2-strip-label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bwm-muted); padding-bottom: 12px; } .bwm-pf2-strip-scroll { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; padding-right: 6px; align-content: start; } .bwm-pf2-strip-item { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 12px; padding: 7px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); cursor: pointer; text-align: left; transition: border-color 0.2s, background 0.2s; } .bwm-pf2-strip-item:hover { border-color: rgba(251, 216, 12, 0.6); } .bwm-pf2-strip-item.is-on { border-color: rgba(251, 216, 12, 0.75); background: rgba(251, 216, 12, 0.1); } .bwm-pf2-strip-item span.bwm-pf2-strip-thumb { display: block; height: 48px; border-radius: 4px; overflow: hidden; background: var(--bwm-panel); } .bwm-pf2-strip-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; } .bwm-pf2-strip-item span.bwm-pf2-strip-name { min-width: 0; font-size: 13px; font-weight: 600; color: var(--bwm-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* scrollbars */ .bwm-pf2-viewer-scroll::-webkit-scrollbar, .bwm-pf2-strip-scroll::-webkit-scrollbar { width: 8px; } .bwm-pf2-viewer-scroll::-webkit-scrollbar-track, .bwm-pf2-strip-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); } .bwm-pf2-viewer-scroll::-webkit-scrollbar-thumb, .bwm-pf2-strip-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 8px; } /* body lock while viewer open */ body.bwm-pf2-lock { overflow: hidden; } /* ---------- Responsive ---------- */ @media (max-width: 1199px) { .bwm-pf2-cursor { display: none; } .bwm-pf2-viewer-body { grid-template-columns: 1fr; } .bwm-pf2-viewer-side { display: none; } } /* below this the strip can overflow — fade the right edge as a scroll hint */ @media (max-width: 1279px) { .bwm-pf2-filters { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent); } } /* compact swipeable filter strip on small screens */ @media (max-width: 900px) { .bwm-pf2-filterbar-in { padding: 6px 0; } .bwm-pf2-filters { width: 100%; padding: 0 16px; } .bwm-pf2-filter { padding: 12px 14px 13px; } .bwm-pf2-filter-bar { left: 14px; right: 14px; } } @media (max-width: 760px) { .bwm-pf2-concept { padding: 14px; } .bwm-pf2-concept-card { grid-template-columns: 1fr; max-height: calc(100vh - 28px); } .bwm-pf2-concept-side { padding: 26px 22px; gap: 12px; } .bwm-pf2-concept-side ul, .bwm-pf2-concept-talk { display: none; } .bwm-pf2-concept-side h3 { font-size: 21px; padding-right: 40px; } .bwm-pf2-concept-main { padding: 24px 22px 28px; } .bwm-pf2-concept .bwm-pf2-concept-close { background: rgba(255, 255, 255, 0.16); color: #fff; } /* 16px stops iOS Safari from auto-zooming into focused inputs */ .bwm-pf2-concept-main input[type="text"], .bwm-pf2-concept-main input[type="email"] { font-size: 16px; } } @media (max-width: 700px) { .bwm-pf2-grid { grid-template-columns: 1fr; gap: 22px; } .bwm-pf2-work-in { padding: 32px 16px 60px; } .bwm-pf2-tileinfo { padding: 14px 14px 16px; } .bwm-pf2-morewrap { margin-top: 34px; } .bwm-pf2-more { width: 100%; } .bwm-pf2-viewer { padding: 14px; } .bwm-pf2-viewer-top { gap: 10px; padding-bottom: 14px; } .bwm-pf2-viewer-count { display: none; } .bwm-pf2-viewer-name { font-size: 16px; } .bwm-pf2-play { padding: 0 12px; font-size: 12px; } } /* touch devices: no custom cursor */ @media (hover: none) { .bwm-pf2-cursor { display: none; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { .bwm-pf2 *, .bwm-pf2-viewer *, .bwm-pf2-concept * { transition-duration: 0.01s !important; animation-duration: 0.01s !important; } .bwm-pf2-anim .bwm-pf2-tile { opacity: 1; transform: none; } .bwm-pf2-ctatile, .bwm-pf2-ctatile::after, .bwm-pf2-conceptbtn::after, .bwm-pf2-cta-spark, .bwm-pf2-cta-url b { animation: none !important; } }