/* ============================================================= OneSourcSoft — Modern Maximalist Build Big type · loops · bento · sticky scroll · cursor effects · glass nav · screen-filling sections · full responsive ============================================================= */ /* ------------------------------------------------------------- 01 · Tokens ------------------------------------------------------------- */ :root { /* Brand */ --c-red: #FF3333; --c-red-soft: #FF5C5C; --c-red-deep: #C71F1F; /* Surfaces — bumped contrast so cards are visibly distinct from page bg */ --c-black: #0A0A0A; --c-ink: #141414; --c-surface: #1F1F1F; --c-elev: #2A2A2A; --c-border: #3A3A3A; /* Light */ --c-cream: #F4EFE6; --c-bone: #E9E4DA; --c-paper: #FFFFFF; /* Text */ --c-text: #FAFAFA; --c-text-dim: #A1A1AA; --c-text-mute: #71717A; --c-ink-text: #111111; --c-ink-dim: #4B4B4B; /* Accents */ --c-acid: #D8FF00; --c-orange: #F5A623; /* Typography */ --ff-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-serif: "Instrument Serif", "Times New Roman", serif; --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* Sizing */ --container: 1480px; --gutter: clamp(20px, 4vw, 56px); --radius: 18px; --radius-sm: 10px; --radius-pill: 999px; --section-py: clamp(80px, 12vh, 160px); /* Motion */ --ease-out: cubic-bezier(.22,1,.36,1); --ease-in-out: cubic-bezier(.65,0,.35,1); } /* ------------------------------------------------------------- 02 · Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--ff-body); font-size: 17px; line-height: 1.55; color: var(--c-text); background: var(--c-black); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video, picture { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; } input, select, textarea { font: inherit; color: inherit; } ul, ol { padding-left: 1.2em; margin: 0 0 1em; } h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); font-weight: 700; line-height: .92; letter-spacing: -.035em; margin: 0 0 .4em; font-variation-settings: "opsz" 96; } h1 { font-size: clamp(56px, 9vw, 160px); } h2 { font-size: clamp(40px, 6vw, 96px); } h3 { font-size: clamp(28px, 3vw, 44px); } h4 { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; } p { margin: 0 0 1em; } ::selection { background: var(--c-red); color: #fff; } /* Scrollbar (subtle dark) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 999px; border: 2px solid #050505; } ::-webkit-scrollbar-thumb:hover { background: var(--c-red); } /* ------------------------------------------------------------- 03 · Skip link · accessibility ------------------------------------------------------------- */ .skip { position: absolute; left: -9999px; top: 0; background: var(--c-red); color: #fff; padding: 12px 16px; z-index: 1000; } .skip:focus { left: 12px; top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------- 04 · Layout primitives ------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; } .section { padding: var(--section-py) 0; position: relative; isolation: isolate; } .section--light { background: var(--c-cream); color: var(--c-ink-text); } .section--dark { background: var(--c-black); color: var(--c-text); } .section--ink { background: var(--c-ink); color: var(--c-text); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-red); } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,51,51,.18); } .eyebrow--ink { color: var(--c-ink-text); } .eyebrow--ink::before { background: var(--c-red); box-shadow: 0 0 0 4px rgba(255,51,51,.15); } /* Display helpers */ .display-1 { font-family: var(--ff-display); font-size: clamp(64px, 12vw, 220px); line-height: .85; letter-spacing: -.045em; font-weight: 700; font-variation-settings: "opsz" 96; margin: 0; } .display-2 { font-family: var(--ff-display); font-size: clamp(48px, 8vw, 140px); line-height: .88; letter-spacing: -.04em; font-weight: 700; font-variation-settings: "opsz" 96; margin: 0; } .serif-italic { font-family: var(--ff-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; } .text-mono { font-family: var(--ff-mono); } /* Cursor (large screens only) */ .cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9000; mix-blend-mode: difference; transition: opacity .25s ease; } .cursor-dot { width: 10px; height: 10px; background: var(--c-red); border-radius: 50%; transform: translate(-50%, -50%); } .cursor-ring { width: 38px; height: 38px; border: 1.5px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); transition: width .25s var(--ease-out), height .25s var(--ease-out), opacity .25s ease; } .cursor-ring.is-hover { width: 64px; height: 64px; border-color: var(--c-red); } @media (hover: none), (max-width: 980px) { .cursor-dot, .cursor-ring { display: none; } } /* Loader removed — content shows immediately on load. */ .loader, .loader__mark, .loader__bar { display: none !important; } /* ------------------------------------------------------------- 05 · Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; padding: 16px 26px; border-radius: var(--radius-pill); transition: transform .35s var(--ease-out), background .25s ease, color .25s ease, box-shadow .25s ease; position: relative; overflow: hidden; will-change: transform; } .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; box-shadow: 0 18px 50px -10px rgba(255,51,51,.55); transition: opacity .25s ease; } .btn:hover { transform: translateY(-2px); } .btn:hover::after { opacity: 1; } .btn .arrow { display: inline-flex; transition: transform .35s var(--ease-out); } .btn:hover .arrow { transform: translateX(6px); } .btn--red { background: var(--c-red); color: #fff; } .btn--red:hover { background: var(--c-red-soft); } .btn--ink { background: var(--c-ink-text); color: #fff; } .btn--ink:hover { background: #2a2a2a; } .btn--cream { background: var(--c-cream); color: var(--c-ink-text); } .btn--cream:hover { background: #fff; } .btn--ghost { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.12); } .btn--ghost:hover { background: rgba(255,255,255,.12); } .btn--lg { padding: 22px 36px; font-size: 18px; } /* Magnetic link (large text CTA) */ .mlink { display: inline-flex; align-items: center; gap: 14px; font-family: var(--ff-display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; position: relative; } .mlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor; transform-origin: right center; transform: scaleX(0); transition: transform .45s var(--ease-out); } .mlink:hover::after { transform-origin: left center; transform: scaleX(1); } .mlink .arrow { transition: transform .35s var(--ease-out); } .mlink:hover .arrow { transform: translate(6px, -6px) rotate(-20deg); } /* ------------------------------------------------------------- 06 · Glass top nav ------------------------------------------------------------- */ .nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 80; transition: top .35s var(--ease-out); } .nav__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .nav__bar { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; min-height: 96px; padding: 10px 16px 10px 12px; background: rgba(10,10,10,.55); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; box-shadow: 0 12px 40px -8px rgba(0,0,0,.6); } @media (max-width: 1000px) { .nav__bar { min-height: 80px; padding: 8px 12px; } } .nav.is-scrolled { top: 8px; } .nav.is-scrolled .nav__bar { background: rgba(10,10,10,.78); } .brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--ff-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; } .brand__mark { width: 36px; height: 36px; display: inline-grid; place-items: center; background: var(--c-red); border-radius: 10px; color: #fff; font-family: var(--ff-display); font-weight: 800; font-size: 15px; letter-spacing: -.04em; } .brand__mark::after { content: ""; position: absolute; } .brand__text span { color: var(--c-red); } /* WordPress custom logo sizing — doubled. Logo source is 785×209 (aspect ~3.76:1). At 72 px tall, ~270 px wide. */ .custom-logo-link { display: inline-flex !important; align-items: center !important; justify-content: flex-start; height: 72px; line-height: 0; flex-shrink: 0; padding-left: 4px; } .custom-logo { height: 72px !important; width: auto !important; max-width: 300px; object-fit: contain; display: block !important; transition: opacity .2s ease; image-rendering: -webkit-optimize-contrast; } .custom-logo:hover { opacity: .85; } @media (max-width: 700px) { .custom-logo-link { height: 60px; } .custom-logo { height: 60px !important; max-width: 240px; } } /* ------------------------------------------------------------- PORTFOLIO — website mockups + logo gallery for service pages ------------------------------------------------------------- */ .portfolio { margin-top: 56px; } .portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .portfolio__item { position: relative; overflow: hidden; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-border); aspect-ratio: 4/3; transition: transform .45s var(--ease-out), border-color .25s ease; display: block; cursor: zoom-in; } .portfolio__item:hover { transform: translateY(-6px); border-color: rgba(255,51,51,.5); } .portfolio__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .portfolio__item:hover img { transform: scale(1.05); } .portfolio__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.65) 100%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .portfolio__item:hover::after { opacity: 1; } .portfolio__item-cap { position: absolute; left: 22px; bottom: 22px; right: 22px; color: #fff; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .35s var(--ease-out); z-index: 2; } .portfolio__item:hover .portfolio__item-cap { opacity: 1; transform: translateY(0); } /* Logo portfolio — small clean thumbnails. Click → lightbox. */ .portfolio--logos .portfolio__grid { grid-template-columns: repeat(6, 1fr); gap: 10px; } .portfolio--logos .portfolio__item { aspect-ratio: 1/1; background: var(--c-paper); border-color: rgba(0,0,0,.06); border-radius: 14px; padding: 0; cursor: zoom-in; } .portfolio--logos .portfolio__item img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .45s var(--ease-out); } .portfolio--logos .portfolio__item:hover { background: var(--c-cream); border-color: rgba(255,51,51,.3); transform: translateY(-3px); } .portfolio--logos .portfolio__item:hover img { transform: scale(1.08); } .portfolio--logos .portfolio__item::after { display: none; } /* Category header inside the logo portfolio */ .portfolio__cat { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 56px 0 18px; border-bottom: 1px solid var(--c-border); padding-bottom: 14px; } .portfolio__cat-name { font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.02em; line-height: 1; color: #fff; } .portfolio__cat-name em { font-family: var(--ff-serif); font-style: italic; color: var(--c-red); font-weight: 400; } .portfolio__cat-meta { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-mute); } .portfolio__cat:first-of-type { margin-top: 24px; } @media (max-width: 1100px) { .portfolio__grid { grid-template-columns: repeat(2, 1fr); } .portfolio--logos .portfolio__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .portfolio__grid { grid-template-columns: 1fr; gap: 12px; } .portfolio--logos .portfolio__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 380px) { .portfolio--logos .portfolio__grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================= LIGHTBOX — full-screen image preview ============================================================= */ .lb { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; background: rgba(5,5,5,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 20px; opacity: 0; transition: opacity .25s ease; } .lb.is-open { display: flex; opacity: 1; } .lb__inner { position: relative; max-width: min(1280px, 96vw); max-height: 92vh; display: flex; align-items: center; justify-content: center; } .lb__img { max-width: 100%; max-height: 92vh; border-radius: 8px; background: #1a1a1a; box-shadow: 0 40px 80px -16px rgba(0,0,0,.8); transition: opacity .25s ease; } .lb.is-loading .lb__img { opacity: .3; } .lb__close, .lb__prev, .lb__next { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; font-family: var(--ff-display); font-size: 22px; font-weight: 700; cursor: pointer; transition: background .2s ease, transform .2s ease; border: 1px solid rgba(255,255,255,.12); } .lb__close:hover, .lb__prev:hover, .lb__next:hover { background: var(--c-red); transform: scale(1.08); } .lb__close { top: 18px; right: 18px; } .lb__prev { left: -76px; top: 50%; transform: translateY(-50%); } .lb__next { right: -76px; top: 50%; transform: translateY(-50%); } .lb__prev:hover, .lb__next:hover { transform: translateY(-50%) scale(1.08); } .lb__counter { position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-family: var(--ff-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .lb__caption { position: absolute; bottom: -36px; right: 0; color: rgba(255,255,255,.7); font-family: var(--ff-mono); font-size: 12px; letter-spacing: .04em; max-width: 60%; text-align: right; } @media (max-width: 900px) { .lb__prev { left: 12px; } .lb__next { right: 12px; } .lb__close { top: 12px; right: 12px; } .lb__caption { display: none; } } @media (prefers-reduced-motion: reduce) { .lb { transition: none; } } /* Stop body scroll when lightbox open */ body.lb-open { overflow: hidden; } /* ============================================================= TRUST BADGES (E-E-A-T signals near hero) ============================================================= */ .trust-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); } .trust-badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); } .trust-badge__stars { color: var(--c-orange); letter-spacing: 2px; font-size: 14px; } .trust-badge strong { color: var(--c-text); font-weight: 600; } .trust-badge .num { color: var(--c-red); font-family: var(--ff-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; } /* ============================================================= RELATED SERVICES block — topic clustering / internal linking ============================================================= */ .related { margin-top: 0; padding: var(--section-py) 0; background: var(--c-ink); } .related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; } .related__card { display: block; padding: 28px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; transition: transform .35s var(--ease-out), border-color .25s ease, background .25s ease; position: relative; overflow: hidden; } .related__card:hover { transform: translateY(-4px); border-color: rgba(255,51,51,.5); background: var(--c-elev); } .related__card-num { font-family: var(--ff-mono); font-size: 11px; color: var(--c-text-mute); letter-spacing: .14em; text-transform: uppercase; } .related__card-title { font-family: var(--ff-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; margin: 12px 0 8px; color: #fff; } .related__card-desc { color: var(--c-text-dim); font-size: 14px; margin: 0; } .related__card-arrow { position: absolute; top: 22px; right: 22px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.06); display: grid; place-items: center; transition: background .25s ease, transform .35s var(--ease-out); } .related__card:hover .related__card-arrow { background: var(--c-red); transform: rotate(-25deg); } @media (max-width: 900px) { .related__grid { grid-template-columns: 1fr; } } /* ============================================================= STICKY MOBILE CTA — conversion lift ============================================================= */ .sticky-cta { display: none; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60; background: var(--c-red); color: #fff; border-radius: 999px; padding: 14px 20px; font-family: var(--ff-display); font-weight: 700; font-size: 15px; box-shadow: 0 16px 40px -8px rgba(255,51,51,.55); align-items: center; justify-content: space-between; gap: 12px; } .sticky-cta::before { content: "●"; color: rgba(255,255,255,.55); font-size: 8px; animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } } .sticky-cta__arrow { display: inline-grid; place-items: center; width: 36px; height: 36px; background: rgba(0,0,0,.18); border-radius: 50%; } @media (max-width: 880px) { .sticky-cta { display: flex; } main { padding-bottom: 90px; } } .nav__menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 4px; justify-self: center; } .nav__menu > li > a, .nav__menu > li > .oss-nav-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.75); font-size: 14.5px; font-weight: 500; padding: 10px 14px; border-radius: var(--radius-pill); transition: color .2s ease, background .2s ease; letter-spacing: -.005em; } .nav__menu > li > a:hover { color: #fff; background: rgba(255,255,255,.06); } .nav__menu > li.current-menu-item > a { background: rgba(255,51,51,.15); color: #fff; } .nav__menu > li { position: relative; } .nav__menu .oss-caret { transition: transform .25s ease; opacity: .65; } .nav__menu li.has-submenu:hover > a .oss-caret { transform: rotate(180deg); opacity: 1; } .nav__submenu, .oss-submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 280px; padding: 12px; margin-top: 14px; /* visual gap, but… */ background: rgba(20,20,20,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; list-style: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .35s var(--ease-out), visibility 0s linear .25s; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); } /* …invisible bridge over the gap so hover never breaks */ .nav__submenu::before, .oss-submenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* Allow hover on the parent li to extend below to the submenu area */ .nav__menu > li.has-submenu { padding-bottom: 4px; } .nav__menu li.has-submenu:hover > .oss-submenu, .nav__menu li.has-submenu:focus-within > .oss-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity .25s ease, transform .35s var(--ease-out); } .oss-submenu--mega { width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .oss-submenu li a { display: block; padding: 11px 14px; border-radius: 10px; color: rgba(255,255,255,.78); font-size: 14px; transition: background .2s ease, color .2s ease, transform .2s ease; } .oss-submenu li a:hover { background: rgba(255,51,51,.15); color: #fff; transform: translateX(3px); } .nav__cta { display: inline-flex; } .nav__cta .btn { padding: 12px 22px; font-size: 14px; } .burger span { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform .3s var(--ease-out), opacity .25s ease; } .burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* Mobile menu — full-screen overlay */ .mobile { position: fixed; inset: 0; background: var(--c-black); color: #fff; z-index: 70; padding: 90px var(--gutter) 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(-100%); transition: transform .55s var(--ease-out); visibility: hidden; pointer-events: none; } .mobile.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; } .mobile ul { list-style: none; padding: 0; margin: 0; } .mobile > ul, .mobile .nav__menu, .mobile .oss-menu { display: flex; flex-direction: column; gap: 0; } .mobile li { border-bottom: 1px solid rgba(255,255,255,.08); position: relative; } .mobile a { display: block; padding: 18px 0; color: #fff; font-size: 22px; font-family: var(--ff-display); font-weight: 600; letter-spacing: -.02em; transition: color .2s ease, padding .2s ease; } .mobile a:hover, .mobile a:focus { color: var(--c-red); padding-left: 6px; } /* Submenus collapsed by default on mobile; expand on tap */ .mobile .oss-submenu, .mobile .sub-menu { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; display: none; width: auto; } .mobile li.is-expanded > .oss-submenu, .mobile li.is-expanded > .sub-menu { display: block; padding: 0 0 12px 16px; } .mobile .oss-submenu li, .mobile .sub-menu li { border: 0; } .mobile .oss-submenu a, .mobile .sub-menu a { padding: 10px 0; font-size: 16px; color: rgba(255,255,255,.72); font-weight: 500; } /* Mobile expand button — separate from the link so the link still navigates */ .mobile .menu-item-has-children, .mobile li.has-submenu { position: relative; } .mobile .menu-item-has-children > a, .mobile li.has-submenu > a { padding-right: 56px; } .mobile-expand { position: absolute; right: 0; top: 14px; width: 36px; height: 36px; display: inline-grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; font-size: 20px; line-height: 1; font-family: var(--ff-display); font-weight: 700; cursor: pointer; transition: transform .25s ease, background .2s ease, border-color .2s ease; z-index: 1; } .mobile-expand:hover, .mobile-expand:focus { background: rgba(255,51,51,.15); border-color: var(--c-red); } .mobile .is-expanded > .mobile-expand { transform: rotate(45deg); background: var(--c-red); border-color: var(--c-red); } .mobile-expand span { display: block; line-height: 1; } /* Mobile CTA at the bottom — full-width pill */ .mobile .btn { width: 100%; justify-content: center; padding: 18px; font-size: 16px; } /* Burger touch-target */ .burger { display: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); align-items: center; justify-content: center; gap: 4px; flex-direction: column; cursor: pointer; z-index: 71; /* above the mobile overlay so user can close */ position: relative; } @media (max-width: 1000px) { .nav__menu, .nav__cta { display: none; } .burger { display: inline-flex; justify-self: end; } .nav__bar { grid-template-columns: auto 1fr; } } /* ------------------------------------------------------------- 06b · HERO SERVICE SLIDER (sits directly under the nav) ------------------------------------------------------------- */ .hslider { position: relative; padding: 130px 0 56px; background: var(--c-black); color: var(--c-text); overflow: hidden; isolation: isolate; } .hslider__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .hslider__bg::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40vw 40vw at 80% 30%, rgba(255,51,51,.22), transparent 60%), radial-gradient(50vw 50vw at 15% 80%, rgba(216,255,0,.05), transparent 60%); filter: blur(40px); animation: floatBg 22s linear infinite; } .hslider__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%); } .hslider__inner { position: relative; display: grid; gap: 36px; } /* Tab nav removed — kept rules below in case markup re-appears */ .hslider__nav { display: none !important; } .hslider__nav-orig { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); } .hslider__nav::-webkit-scrollbar { display: none; } .hslider__nav-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 16px; background: transparent; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: var(--c-text-dim); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .25s ease, color .2s ease, border-color .2s ease, transform .35s var(--ease-out); font-family: inherit; } .hslider__nav-btn:hover { color: #fff; border-color: rgba(255,255,255,.25); } .hslider__nav-btn.is-active { background: var(--c-red); border-color: var(--c-red); color: #fff; transform: translateY(-2px); } .hslider__nav-num { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em; opacity: .7; } .hslider__nav-label { font-family: var(--ff-display); font-weight: 600; font-size: 14px; letter-spacing: -.01em; } /* Stage that holds all slides — only the .is-current is visible */ .hslider__stage { position: relative; min-height: 460px; } .hslide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .55s var(--ease-out), transform .65s var(--ease-out), visibility 0s linear .55s; } .hslide.is-current { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease-out), transform .65s var(--ease-out); position: relative; } .hslide__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; min-height: 460px; } .hslide__copy { display: grid; gap: 18px; align-content: center; } .hslide__meta { display: inline-flex; align-items: center; gap: 14px; } .hslide__num { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em; color: var(--c-red); } .hslide__tag { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-mute); } .hslide__title { font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 7vw, 90px); letter-spacing: -.03em; line-height: .95; margin: 0; color: #fff; } .hslide__desc { font-size: clamp(16px, 1.4vw, 19px); color: var(--c-text-dim); max-width: 580px; margin: 0; line-height: 1.55; } .hslide__features { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; } .hslide__features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-text); } .hslide__features li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,51,51,.15) url("data:image/svg+xml;utf8,") center / 11px no-repeat; flex: 0 0 auto; } .hslide__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } /* Visual side — big number + icon + decorative grid */ .hslide__viz { position: relative; aspect-ratio: 1/1; border-radius: 24px; background: radial-gradient(120% 80% at 70% 30%, rgba(255,51,51,.4), transparent 60%), linear-gradient(135deg, #1a1a1a, #0a0a0a); overflow: hidden; display: grid; place-items: center; min-height: 340px; } .hslide__viz-num { position: absolute; top: 20px; left: 24px; font-family: var(--ff-display); font-weight: 700; font-size: clamp(120px, 18vw, 220px); letter-spacing: -.05em; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.15); } .hslide__viz-icon { position: relative; z-index: 2; color: #fff; transform-origin: center; animation: hslideIcon 4s ease-in-out infinite; } .hslide__viz-icon svg { width: clamp(80px, 10vw, 140px); height: clamp(80px, 10vw, 140px); } .hslide__viz-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 28px 28px; } @keyframes hslideIcon { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-3deg); } } /* Controls — arrows + autoplay progress */ .hslider__controls { display: flex; align-items: center; gap: 16px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; } .hslider__arrow { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; display: inline-grid; place-items: center; cursor: pointer; transition: background .25s ease, transform .25s var(--ease-out), border-color .2s ease; } .hslider__arrow:hover { background: var(--c-red); border-color: var(--c-red); transform: scale(1.05); } .hslider__progress { flex: 1; height: 3px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; position: relative; } .hslider__progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--c-red), #ff8a8a); border-radius: 999px; transition: width .15s linear; } .hslider.is-paused .hslider__progress-bar { background: rgba(255,255,255,.25); } /* Responsive */ @media (max-width: 1000px) { .hslider { padding: 110px 0 40px; } .hslide__grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; } .hslide__viz { min-height: 280px; aspect-ratio: 16/10; } .hslide__features { grid-template-columns: 1fr; } .hslider__stage { min-height: 640px; } } @media (max-width: 560px) { .hslide__title { font-size: clamp(32px, 9vw, 48px); } .hslide__ctas .btn { padding: 12px 18px; font-size: 14px; } .hslider__arrow { width: 42px; height: 42px; } } /* ------------------------------------------------------------- 07 · HERO — screen-filling display ------------------------------------------------------------- */ .hero { min-height: clamp(620px, 100svh, 900px); padding: 140px 0 80px; position: relative; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--c-black); } .hero__bg::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40vw 40vw at 70% 30%, rgba(255,51,51,.25), transparent 60%), radial-gradient(50vw 50vw at 20% 70%, rgba(216,255,0,.06), transparent 60%); filter: blur(40px); animation: floatBg 18s linear infinite; } .hero__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 75%); } @keyframes floatBg { 0% { transform: translate(0,0) rotate(0deg);} 50% { transform: translate(-3%,2%) rotate(180deg);} 100% { transform: translate(0,0) rotate(360deg);} } .hero__inner { position: relative; display: grid; gap: 56px; } .hero__row { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-dim); } .hero__row strong { color: var(--c-text); font-weight: 500; } .hero__title { position: relative; } .hero__title .line { display: block; opacity: 1; transform: none; } .hero__title .line:nth-child(2) { animation-delay: .12s; padding-left: clamp(10px, 6vw, 80px); } .hero__title .line:nth-child(3) { animation-delay: .24s; padding-left: clamp(40px, 12vw, 200px); } .hero__title .underline { position: relative; background: linear-gradient(180deg, transparent 70%, var(--c-red) 70%); background-size: 100% 100%; padding: 0 .05em; } .hero__title em { font-family: var(--ff-serif); font-style: italic; font-weight: 400; color: var(--c-red); margin-right: .1em; } @keyframes heroIn { to { opacity: 1; transform: translateY(0); } } .hero__meta { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); } .hero__meta-block { display: grid; gap: 8px; } .hero__meta-block dt { font-family: var(--ff-mono); font-size: 11px; color: var(--c-text-mute); letter-spacing: .14em; text-transform: uppercase; } .hero__meta-block dd { margin: 0; font-size: 17px; color: var(--c-text); max-width: 460px; } .hero__meta-block.cta { display: flex; gap: 12px; align-items: flex-start; flex-direction: column; } .hero__meta-block.cta div { display: flex; gap: 12px; flex-wrap: wrap; } /* floating glass card */ .hero__card { position: absolute; right: 4%; bottom: 8%; width: clamp(260px, 30vw, 360px); padding: 22px; background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; transform: rotate(-3deg); animation: floatCard 6s ease-in-out infinite alternate; } .hero__card-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.1); font-size: 13px; font-family: var(--ff-mono); } .hero__card-row:last-child { border: 0; } .hero__card-row strong { color: var(--c-red); font-size: 16px; } @keyframes floatCard { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(-3deg) translateY(-12px); } } @media (max-width: 1100px) { .hero__card { display: none; } .hero__meta { grid-template-columns: 1fr; gap: 24px; } } /* ------------------------------------------------------------- 08 · HUGE LOOP MARQUEE band ------------------------------------------------------------- */ .loop { background: var(--c-cream); color: var(--c-ink-text); padding: 24px 0; overflow: hidden; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); } .loop--ink { background: var(--c-ink); color: var(--c-text); border-color: rgba(255,255,255,.08); } .loop--red { background: var(--c-red); color: #fff; border-color: transparent; } .loop__track { display: flex; gap: 60px; white-space: nowrap; animation: loopx 30s linear infinite; width: max-content; will-change: transform; } .loop--fast .loop__track { animation-duration: 18s; } .loop--slow .loop__track { animation-duration: 50s; } .loop--reverse .loop__track { animation-direction: reverse; } .loop__item { display: inline-flex; align-items: center; gap: 28px; font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 6vw, 92px); letter-spacing: -.045em; line-height: 1; } .loop__star { display: inline-flex; color: var(--c-red); transform-origin: center; animation: spin 8s linear infinite; } .loop:hover .loop__track { animation-play-state: paused; } @keyframes loopx { to { transform: translateX(-50%); } } @keyframes spin { to { transform: rotate(360deg); } } .loop--mini .loop__item { font-size: clamp(16px, 1.6vw, 22px); font-family: var(--ff-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; gap: 18px; } /* ------------------------------------------------------------- 09 · BIG WORD on scroll — punctuation between sections ------------------------------------------------------------- */ .bigword { padding: clamp(80px, 16vh, 200px) 0; background: var(--c-black); color: var(--c-text); text-align: left; } .bigword h2 { font-size: clamp(56px, 11vw, 200px); font-weight: 700; letter-spacing: -.045em; line-height: .88; margin: 0; } .bigword h2 em { font-family: var(--ff-serif); font-style: italic; font-weight: 400; color: var(--c-red); } .bigword h2 .stroke { color: transparent; -webkit-text-stroke: 1.5px var(--c-text-dim); font-style: normal; } /* ------------------------------------------------------------- 10 · BENTO services grid ------------------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: 12px; margin-top: 56px; } .tile { position: relative; overflow: hidden; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.12); background: var(--c-surface); transition: transform .55s var(--ease-out), background .25s ease, border-color .25s ease; min-height: 220px; } .tile:hover { transform: translateY(-4px); border-color: rgba(255,51,51,.4); } .tile__num { font-family: var(--ff-mono); font-size: 12px; color: var(--c-text-mute); letter-spacing: .14em; } .tile__title { font-family: var(--ff-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.025em; line-height: 1; margin-top: auto; color: var(--c-text); } .tile__desc { color: var(--c-text-dim); font-size: 14.5px; margin-top: 10px; max-width: 360px; } .tile__arrow { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); display: grid; place-items: center; transition: background .25s ease, transform .35s var(--ease-out); } .tile:hover .tile__arrow { background: var(--c-red); transform: rotate(-25deg); } .tile--span-2 { grid-column: span 2; } .tile--span-3 { grid-column: span 3; } .tile--span-4 { grid-column: span 4; } .tile--row-2 { grid-row: span 2; } .tile--red { background: radial-gradient(60% 60% at 80% 20%, rgba(255,255,255,.18), transparent 60%), var(--c-red); color: #fff; } .tile--red .tile__num, .tile--red .tile__desc { color: rgba(255,255,255,.85); } .tile--red .tile__arrow { background: rgba(0,0,0,.18); } .tile--red:hover .tile__arrow { background: #fff; color: var(--c-red); } .tile--cream { background: var(--c-cream); color: var(--c-ink-text); border-color: rgba(0,0,0,.08); } .tile--cream .tile__num { color: var(--c-ink-dim); } .tile--cream .tile__desc { color: var(--c-ink-dim); } .tile--cream .tile__arrow { background: rgba(0,0,0,.06); color: var(--c-ink-text); } .tile--cream:hover .tile__arrow { background: var(--c-red); color: #fff; } .tile--ink { background: #050505; } .tile__viz { position: absolute; inset: 0; pointer-events: none; opacity: .9; } .tile__rings { position: absolute; inset: -40%; background: radial-gradient(circle, transparent 30%, rgba(255,255,255,.05) 30.5%, transparent 31%) 0 0 / 36px 36px; mask-image: radial-gradient(circle at 70% 30%, #000 20%, transparent 60%); } .tile__waves { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(180deg, transparent 0%, rgba(255,51,51,.08) 100%), repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.04) 10px 11px); } @media (max-width: 1100px) { .bento { grid-template-columns: repeat(4, 1fr); } .tile--span-4 { grid-column: span 4; } .tile--span-3 { grid-column: span 4; } .tile--span-2 { grid-column: span 2; } } @media (max-width: 700px) { .bento { grid-template-columns: 1fr; } .tile, .tile--span-2, .tile--span-3, .tile--span-4 { grid-column: span 1; } .tile--row-2 { grid-row: span 1; } } /* ------------------------------------------------------------- 11 · STICKY case studies / scroll-snap ------------------------------------------------------------- */ .cases { padding: 0; } .cases__intro { padding: var(--section-py) 0; } .case-rail { display: flex; gap: 24px; padding: 0 var(--gutter) calc(var(--section-py) / 2); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .case-rail::-webkit-scrollbar { display: none; } .case-card { flex: 0 0 clamp(280px, 38vw, 520px); scroll-snap-align: start; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; min-height: 460px; position: relative; overflow: hidden; transition: transform .35s var(--ease-out), border-color .25s ease; } .case-card:hover { transform: translateY(-4px); border-color: rgba(255,51,51,.4); } .case-card__industry { font-family: var(--ff-mono); font-size: 12px; color: var(--c-text-mute); letter-spacing: .14em; text-transform: uppercase; } .case-card__client { font-family: var(--ff-display); font-weight: 600; font-size: 22px; letter-spacing: -.015em; margin: 8px 0 0; } .case-card__viz { flex: 1; margin: 24px 0; border-radius: 14px; background: radial-gradient(120% 80% at 70% 30%, rgba(255,51,51,.25), transparent 60%), linear-gradient(135deg, #1a1a1a, #0a0a0a); position: relative; overflow: hidden; min-height: 180px; } .case-card__viz::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 28px 28px; } .case-card__result { font-family: var(--ff-display); font-weight: 700; font-size: clamp(48px, 5vw, 72px); letter-spacing: -.04em; line-height: .9; color: var(--c-red); } .case-card__label { font-family: var(--ff-mono); font-size: 12px; color: var(--c-text-mute); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; } .case-card__desc { color: var(--c-text-dim); font-size: 14.5px; margin-top: 12px; } .case-rail__cursor { display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 0 var(--gutter) 32px; font-family: var(--ff-mono); font-size: 12px; color: var(--c-text-mute); letter-spacing: .12em; text-transform: uppercase; } .case-rail__arrows { display: inline-flex; gap: 6px; } .case-rail__arrows button { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); display: inline-grid; place-items: center; transition: background .25s ease; color: #fff; } .case-rail__arrows button:hover { background: var(--c-red); } /* ------------------------------------------------------------- 12 · STATS — odometer / counter ------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } .stat-cell { padding: 56px 28px; border-right: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 8px; position: relative; } .stat-cell:last-child { border-right: 0; } .stat-cell__num { font-family: var(--ff-display); font-weight: 700; font-size: clamp(56px, 7vw, 110px); letter-spacing: -.04em; line-height: .9; display: inline-flex; align-items: baseline; } .stat-cell__num em { font-style: normal; color: var(--c-red); font-size: .55em; margin-left: 6px; } .stat-cell__label { font-family: var(--ff-mono); font-size: 12px; color: var(--c-text-mute); letter-spacing: .14em; text-transform: uppercase; } @media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat-cell:nth-child(2) { border-right: 0; } .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--c-border); } } /* ------------------------------------------------------------- 13 · STACKED testimonials ------------------------------------------------------------- */ .stack { position: relative; min-height: 520px; margin-top: 56px; } .stack__card { position: absolute; left: 50%; top: 0; width: min(720px, 92vw); transform: translateX(-50%); background: var(--c-cream); color: var(--c-ink-text); border-radius: 22px; padding: 40px; transition: transform .8s var(--ease-out), opacity .5s ease; box-shadow: 0 24px 60px -16px rgba(0,0,0,.5); } .stack__card[data-pos="0"] { transform: translateX(-50%) translateY(0) scale(1); z-index: 4; opacity: 1; } .stack__card[data-pos="1"] { transform: translateX(-50%) translateY(32px) scale(.96); z-index: 3; opacity: .9; } .stack__card[data-pos="2"] { transform: translateX(-50%) translateY(60px) scale(.92); z-index: 2; opacity: .55; } .stack__card[data-pos="3"] { transform: translateX(-50%) translateY(80px) scale(.88); z-index: 1; opacity: 0; } .stack__quote { font-family: var(--ff-display); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 22px; } .stack__quote em { font-family: var(--ff-serif); font-style: italic; color: var(--c-red); } .stack__author { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-top: 18px; border-top: 1px dashed rgba(0,0,0,.15); } .stack__author-info { display: flex; align-items: center; gap: 14px; } .stack__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--c-red); color: #fff; display: inline-grid; place-items: center; font-family: var(--ff-display); font-weight: 700; } .stack__name { font-weight: 600; } .stack__role { font-family: var(--ff-mono); font-size: 12px; color: var(--c-ink-dim); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; } .stack__stars { color: var(--c-orange); letter-spacing: 3px; font-size: 16px; } .stack__controls { display: flex; justify-content: center; gap: 8px; margin-top: 32px; } .stack__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .25s ease, transform .35s var(--ease-out); } .stack__dot.is-active { background: var(--c-red); transform: scale(1.4); } /* ------------------------------------------------------------- 14 · PROCESS — numbered cards ------------------------------------------------------------- */ .process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 48px; } .process__step { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 16px; min-height: 220px; position: relative; overflow: hidden; transition: transform .35s var(--ease-out), border-color .25s ease, background .25s ease; } .process__step:hover { transform: translateY(-4px); border-color: rgba(255,51,51,.4); background: var(--c-elev); } .process__num { font-family: var(--ff-display); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -.04em; color: var(--c-red); } .process__step h4 { margin: 0 0 6px; font-size: 18px; } .process__step p { color: var(--c-text-dim); font-size: 14px; margin: 0; } @media (max-width: 1100px) { .process { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .process { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- 15 · LOGO walls — multi-row marquee ------------------------------------------------------------- */ .walls { display: grid; gap: 10px; padding: 24px 0; background: var(--c-ink); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); overflow: hidden; } .wall { overflow: hidden; } .wall__track { display: flex; gap: 18px; width: max-content; animation: loopx 36s linear infinite; } .wall--fast .wall__track { animation-duration: 22s; animation-direction: reverse; } .wall--medium .wall__track { animation-duration: 28s; } .wall__item { flex: 0 0 auto; padding: 16px 26px; background: rgba(255,255,255,.03); border: 1px solid var(--c-border); border-radius: 12px; font-family: var(--ff-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--c-text-dim); transition: color .2s ease, background .2s ease; } .wall__item:hover { color: #fff; background: rgba(255,51,51,.1); } /* ------------------------------------------------------------- 16 · CONTACT split ------------------------------------------------------------- */ .contact { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--c-red); color: #fff; } .contact__left { padding: clamp(60px, 8vh, 120px) clamp(40px, 6vw, 96px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; } .contact__left::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 20%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; } .contact__left h2 { font-size: clamp(56px, 8vw, 120px); line-height: .9; letter-spacing: -.045em; color: #fff; margin: 0; } .contact__left h2 em { font-family: var(--ff-serif); font-style: italic; color: #ffd9d9; } .contact__details { display: grid; gap: 22px; position: relative; z-index: 1; } .contact__detail dt { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); } .contact__detail dd { margin: 4px 0 0; font-family: var(--ff-display); font-size: 22px; font-weight: 600; letter-spacing: -.015em; } .contact__detail dd a { color: #fff; } .contact__detail dd a:hover { color: var(--c-cream); } .contact__right { padding: clamp(60px, 8vh, 120px) clamp(40px, 6vw, 96px); background: var(--c-black); color: var(--c-text); display: flex; flex-direction: column; justify-content: center; } .contact__form { display: grid; gap: 22px; max-width: 540px; width: 100%; } .contact__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: grid; gap: 6px; } .field label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-mute); } .field input, .field select, .field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--c-border); padding: 12px 0; color: #fff; font-size: 16px; font-family: var(--ff-display); transition: border-color .25s ease; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--c-red); } /* The native dropdown options come from the OS, which often shows them on white background. Force dark theme on the open list so text stays readable. */ .field select { background-color: var(--c-surface); color: #fff; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 8px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px; } .field select option { background: var(--c-surface); color: #fff; padding: 10px; } .field select option:checked, .field select option:hover { background: var(--c-red); color: #fff; } .field textarea { min-height: 96px; resize: vertical; } .contact__form .btn { justify-self: start; margin-top: 10px; } .contact__success { background: #16a34a; color: #fff; border: 1px solid #15803d; border-radius: 12px; padding: 20px 22px; display: none; font-family: var(--ff-display); font-weight: 600; font-size: 17px; display: none; box-shadow: 0 14px 40px -8px rgba(22, 163, 74, .35); } .contact__success.is-shown { display: flex; align-items: center; gap: 12px; animation: oss-ok-pop .45s var(--ease-out); } .contact__success.is-shown::before { content: ""; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #fff url("data:image/svg+xml;utf8,") center/16px no-repeat; } @keyframes oss-ok-pop { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } } .contact__error { background: rgba(255,51,51,.12); border: 1px solid var(--c-red); color: #fff; border-radius: 12px; padding: 16px 20px; display: none; font-family: var(--ff-display); font-weight: 500; font-size: 15px; } .contact__error.is-shown { display: block; animation: oss-ok-pop .35s var(--ease-out); } /* ============================================================= CONTACT FORM 7 — themed to match the dark contact section ============================================================= */ .oss-cf7-wrap .wpcf7 { color: var(--c-text); } .oss-cf7-wrap .cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .oss-cf7-wrap .cf7-field { margin-bottom: 18px; } .oss-cf7-wrap .cf7-field label, .oss-cf7-wrap .wpcf7-form label { display: block; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: 6px; } .oss-cf7-wrap input[type="text"], .oss-cf7-wrap input[type="email"], .oss-cf7-wrap input[type="tel"], .oss-cf7-wrap input[type="url"], .oss-cf7-wrap input[type="number"], .oss-cf7-wrap select, .oss-cf7-wrap textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--c-border); padding: 12px 0; color: #fff; font-family: var(--ff-display); font-size: 16px; transition: border-color .25s ease; } .oss-cf7-wrap input::placeholder, .oss-cf7-wrap textarea::placeholder { color: rgba(255,255,255,.35); } .oss-cf7-wrap input:focus, .oss-cf7-wrap select:focus, .oss-cf7-wrap textarea:focus { outline: 0; border-bottom-color: var(--c-red); } .oss-cf7-wrap select { background-color: var(--c-surface); color: #fff; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 8px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px; } .oss-cf7-wrap select option { background: var(--c-surface); color: #fff; padding: 10px; } .oss-cf7-wrap .cf7-submit { margin-top: 14px; } .oss-cf7-wrap .cf7-btn, .oss-cf7-wrap input.wpcf7-submit { display: inline-flex; align-items: center; gap: 10px; background: var(--c-red); color: #fff !important; font-family: var(--ff-display); font-weight: 700; font-size: 16px; padding: 16px 28px; border: 0; border-radius: 999px; cursor: pointer; letter-spacing: -.01em; transition: background .25s ease, transform .25s var(--ease-out), box-shadow .25s ease; } .oss-cf7-wrap .cf7-btn:hover, .oss-cf7-wrap input.wpcf7-submit:hover { background: var(--c-red-soft); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(255,51,51,.5); } /* Field validation errors */ .oss-cf7-wrap .wpcf7-not-valid-tip { color: #ff8a8a; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; display: block; } .oss-cf7-wrap .wpcf7-not-valid { border-bottom-color: #ff5555 !important; } /* CF7 response messages (success / error banners) */ .oss-cf7-wrap .wpcf7-response-output { border-radius: 12px; padding: 16px 20px !important; margin: 20px 0 0 !important; font-family: var(--ff-display); font-weight: 500; font-size: 15px; border: 1px solid var(--c-border) !important; background: var(--c-surface); color: #fff; } .oss-cf7-wrap .wpcf7 form.sent .wpcf7-response-output { background: #16a34a; border-color: #15803d !important; color: #fff; } .oss-cf7-wrap .wpcf7 form.invalid .wpcf7-response-output, .oss-cf7-wrap .wpcf7 form.unaccepted .wpcf7-response-output { background: rgba(255,51,51,.18); border-color: var(--c-red) !important; color: #fff; } .oss-cf7-wrap .wpcf7 form.failed .wpcf7-response-output, .oss-cf7-wrap .wpcf7 form.aborted .wpcf7-response-output { background: rgba(255,51,51,.18); border-color: var(--c-red) !important; } /* CF7 spinner */ .oss-cf7-wrap .wpcf7-spinner { background-color: var(--c-red); margin-left: 14px; } @media (max-width: 700px) { .oss-cf7-wrap .cf7-row { grid-template-columns: 1fr; } } @media (max-width: 1000px) { .contact { grid-template-columns: 1fr; min-height: auto; } .contact__form-row { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- 17 · BLOG section / cards ------------------------------------------------------------- */ .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; } .post-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease-out), border-color .25s ease; } .post-card:hover { transform: translateY(-4px); border-color: rgba(255,51,51,.4); } .post-card__img { aspect-ratio: 16/10; background: linear-gradient(135deg, #1a1a1a, #0a0a0a); position: relative; overflow: hidden; } .post-card__img img { width: 100%; height: 100%; object-fit: cover; } .post-card__tag { position: absolute; top: 14px; left: 14px; padding: 5px 12px; background: var(--c-red); border-radius: 999px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: #fff; } .post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .post-card__meta { font-family: var(--ff-mono); font-size: 11px; color: var(--c-text-mute); letter-spacing: .1em; text-transform: uppercase; } .post-card__title { font-family: var(--ff-display); font-weight: 600; font-size: 20px; letter-spacing: -.015em; line-height: 1.2; } .post-card__title a { color: var(--c-text); } .post-card__title a:hover { color: var(--c-red); } .post-card__more { margin-top: auto; padding-top: 16px; color: var(--c-red); font-family: var(--ff-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } /* No-image variant — collapse the image area, surface the category chip inline */ .post-card--no-img .post-card__body { padding-top: 28px; } .post-card--no-img .post-card__cat { display: inline-block; background: var(--c-red); color: #fff; padding: 4px 10px; border-radius: 999px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; margin-right: 6px; } .post-card .post-card__cat { /* visible only on no-img variant; hide on image variant */ display: inline-block; } .post-card:not(.post-card--no-img) .post-card__cat { display: none; } @media (max-width: 1000px) { .posts { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .posts { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- 18 · FAQ — modern outlined accordion ------------------------------------------------------------- */ .faq-list { display: grid; gap: 14px; margin-top: 48px; max-width: 1000px; } .faq-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; transition: border-color .25s ease, background .25s ease; } .faq-item.is-open { border-color: rgba(255,51,51,.4); background: var(--c-elev); } .faq-item__btn { display: grid; grid-template-columns: 60px 1fr 40px; gap: 18px; align-items: center; padding: 24px 28px; width: 100%; text-align: left; cursor: pointer; } .faq-item__num { font-family: var(--ff-mono); font-size: 13px; color: var(--c-red); letter-spacing: .12em; } .faq-item__q { font-family: var(--ff-display); font-weight: 600; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.015em; color: #fff; } .faq-item__sign { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.06); display: inline-grid; place-items: center; color: #fff; transition: transform .35s var(--ease-out), background .25s ease; } .faq-item.is-open .faq-item__sign { transform: rotate(45deg); background: var(--c-red); } .faq-item__panel { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-out); padding: 0 28px 0 86px; } .faq-item.is-open .faq-item__panel { max-height: 400px; } .faq-item__answer { color: var(--c-text-dim); font-size: 16px; padding-bottom: 26px; max-width: 760px; } /* ------------------------------------------------------------- 18b · FAQ — service-page accordion (native
, light background) ------------------------------------------------------------- */ .faq { display: grid; gap: 14px; max-width: 1000px; margin: 0 auto; } .faq__item { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; } .faq__item[open] { border-color: rgba(255,51,51,.4); box-shadow: 0 6px 24px rgba(0,0,0,.04); } .faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 28px; font-family: var(--ff-display); font-weight: 600; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.015em; color: var(--c-ink-text); } .faq__q::-webkit-details-marker { display: none; } .faq__toggle { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.05); color: var(--c-ink-text); display: inline-grid; place-items: center; font-family: var(--ff-mono); font-size: 18px; font-weight: 400; line-height: 1; transition: transform .35s var(--ease-out), background .25s ease, color .25s ease; } .faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--c-red); color: #fff; } .faq__a { padding: 0 28px 24px 28px; } .faq__a p { color: var(--c-ink-dim); font-size: 16px; line-height: 1.7; margin: 0; max-width: 820px; } /* ------------------------------------------------------------- 19 · FOOTER — giant wordmark ------------------------------------------------------------- */ .coda { background: var(--c-black); color: var(--c-text); padding: 80px 0 0; overflow: hidden; } .coda__logo { display: inline-flex; align-items: center; } .coda__logo-img { height: 36px; width: auto; max-width: 200px; object-fit: contain; } @media (max-width: 700px) { .coda__logo-img { height: 30px; max-width: 160px; } } .coda__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 60px; border-bottom: 1px solid var(--c-border); } .coda__title { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-red); margin-bottom: 18px; } .coda__menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .coda__menu a { color: var(--c-text-dim); font-size: 15px; transition: color .2s ease; } .coda__menu a:hover { color: #fff; } .coda__about { color: var(--c-text-dim); font-size: 14.5px; max-width: 400px; line-height: 1.7; } .coda__social { display: flex; gap: 10px; margin-top: 22px; list-style: none; padding: 0; } .coda__social a { width: 42px; height: 42px; border-radius: 50%; background: var(--c-surface); border: 1px solid var(--c-border); display: inline-grid; place-items: center; color: var(--c-text-dim); transition: background .25s ease, color .25s ease, transform .25s ease; } .coda__social a:hover { background: var(--c-red); color: #fff; border-color: var(--c-red); transform: translateY(-3px); } .coda__social .oss-soc { width: 16px; height: 16px; } .coda__mark { font-family: var(--ff-display); font-weight: 700; font-size: clamp(80px, 22vw, 360px); line-height: .85; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--c-border); margin: 60px 0 0; text-align: center; white-space: nowrap; } .coda__mark strong { color: var(--c-red); -webkit-text-stroke: 0; font-weight: 700; } .coda__bottom { padding: 20px 0; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-mute); } .coda__bottom-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .coda__bottom a { color: var(--c-text-dim); } .coda__bottom a:hover { color: #fff; } @media (max-width: 900px) { .coda__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .coda__grid > *:first-child { grid-column: 1 / -1; } } /* ------------------------------------------------------------- 20 · INNER page hero (services/about/etc.) ------------------------------------------------------------- */ .page-hero { padding: 180px 0 80px; background: var(--c-black); color: var(--c-text); position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(50vw 50vw at 80% 20%, rgba(255,51,51,.2), transparent 60%), radial-gradient(40vw 40vw at 10% 80%, rgba(216,255,0,.06), transparent 60%); filter: blur(40px); } .page-hero .wrap { position: relative; z-index: 1; } .page-hero h1 { margin: 18px 0 24px; } .page-hero p { max-width: 680px; color: var(--c-text-dim); font-size: 18px; } .breadcrumb { font-family: var(--ff-mono); font-size: 12px; color: var(--c-text-mute); letter-spacing: .14em; text-transform: uppercase; } .breadcrumb a { color: var(--c-text-mute); } .breadcrumb a:hover { color: #fff; } .breadcrumb span + span::before { content: "·"; padding: 0 10px; } /* ------------------------------------------------------------- 21 · Industries grid ------------------------------------------------------------- */ .industries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 48px; } .industry { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; padding: 28px; transition: transform .35s var(--ease-out), border-color .25s ease, background .25s ease; } .industry:hover { transform: translateY(-3px); border-color: rgba(255,51,51,.4); background: var(--c-elev); } .industry__icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(255,51,51,.12); color: var(--c-red); display: grid; place-items: center; margin-bottom: 18px; } .industry h4 { margin: 0 0 6px; font-size: 18px; color: #fff; } .industry p { color: var(--c-text-dim); font-size: 14px; margin: 0; } @media (max-width: 1000px) { .industries { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .industries { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- 22 · Service detail features ------------------------------------------------------------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; } .feature { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 26px; transition: transform .35s var(--ease-out), border-color .25s ease; } .feature:hover { transform: translateY(-3px); border-color: rgba(255,51,51,.4); } .feature__icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,51,51,.12); color: var(--c-red); display: grid; place-items: center; margin-bottom: 16px; } .feature h4 { margin: 0 0 6px; color: #fff; font-size: 17px; } .feature p { color: var(--c-text-dim); font-size: 14px; margin: 0; } @media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .features { grid-template-columns: 1fr; } } .pills { display: flex; gap: 10px; flex-wrap: wrap; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); font-size: 14px; font-weight: 500; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .pill:hover { border-color: var(--c-red); color: var(--c-red); transform: translateY(-2px); } /* ------------------------------------------------------------- 23 · Prose for single posts + generic pages ------------------------------------------------------------- */ .prose { font-size: 18px; line-height: 1.75; color: var(--c-text-dim); } .prose h2, .prose h3 { color: #fff; margin: 1.6em 0 .5em; } .prose h2 { font-size: clamp(28px, 3vw, 40px); } .prose h3 { font-size: clamp(22px, 2.4vw, 28px); } .prose a { color: var(--c-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose img { border-radius: 12px; margin: 1em 0; } .prose blockquote { border-left: 3px solid var(--c-red); padding: 4px 0 4px 20px; font-family: var(--ff-serif); font-style: italic; font-size: 22px; color: #fff; margin: 1.6em 0; } .prose pre { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: 20px; overflow-x: auto; font-family: var(--ff-mono); font-size: 14px; color: #fff; } .prose code { background: var(--c-surface); padding: 2px 6px; border-radius: 4px; font-family: var(--ff-mono); font-size: 0.92em; } .prose ul, .prose ol { color: var(--c-text-dim); padding-left: 1.4em; } /* ------------------------------------------------------------- 24 · 404 ------------------------------------------------------------- */ .fourofour { padding: 220px 0 160px; text-align: center; background: var(--c-black); color: var(--c-text); position: relative; overflow: hidden; } .fourofour::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40vw 40vw at 50% 30%, rgba(255,51,51,.2), transparent 60%); filter: blur(40px); } .fourofour .wrap { position: relative; } .fourofour h1 { font-size: clamp(180px, 28vw, 420px); color: var(--c-red); margin: 0; line-height: .85; letter-spacing: -.06em; } .fourofour p { max-width: 540px; margin: 18px auto 30px; color: var(--c-text-dim); font-size: 18px; } /* Reveal animations disabled — content shows immediately on load, no risk of being stuck invisible. */ .reveal, [data-reveal-stagger] > * { opacity: 1; transform: none; } /* ------------------------------------------------------------- 26 · Section heads ------------------------------------------------------------- */ .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 0; } .section-head__title h2 em { font-family: var(--ff-serif); font-style: italic; color: var(--c-red); font-weight: 400; } .section-head__lead p { color: var(--c-text-dim); font-size: 18px; max-width: 480px; margin: 0 0 0 auto; } .section-head--light .section-head__lead p { color: var(--c-ink-dim); } @media (max-width: 900px) { .section-head { grid-template-columns: 1fr; } .section-head__lead p { margin-left: 0; } } /* ------------------------------------------------------------- 27 · Reduced motion ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .loop__track, .wall__track { animation: none; } .hero__title .line { opacity: 1; transform: none; animation: none; } .hero__bg::before, .hero__card { animation: none; } } /* ------------------------------------------------------------- 28 · Social icon glyphs (mask-image — same as prior build) ------------------------------------------------------------- */ .oss-soc { display: inline-block; width: 16px; height: 16px; background: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .oss-soc--facebook { mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-image: url("data:image/svg+xml;utf8,"); } .oss-soc--linkedin { mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-image: url("data:image/svg+xml;utf8,"); } .oss-soc--instagram { mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-image: url("data:image/svg+xml;utf8,"); } .oss-soc--twitter { mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-image: url("data:image/svg+xml;utf8,"); } .oss-soc--youtube { mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-image: url("data:image/svg+xml;utf8,"); }