html {
scroll-behavior: auto; /* Lenis (assets/site.js) owns smooth scrolling site-wide */
}
/* Lenis smooth-scroll base classes — see https://lenis.dev */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
body::selection {
background: rgba(29, 31, 242, 0.18);
}
/* Sitewide type floor: default running text (any element without an explicit
Tailwind text-* size or its own font-size rule below) renders at 14px.
The smallest text anywhere on the site is 12px — see the three 0.75rem
values below (previously 0.72rem) and Tailwind's text-xs (0.75rem). */
body {
font-size: 14px;
}
.site-shell {
width: min(100%, 1340px);
margin-inline: auto;
padding-inline: 1rem;
}
@media (min-width: 640px) {
.site-shell {
padding-inline: 1.5rem;
}
}
@media (min-width: 1024px) {
.site-shell {
padding-inline: 2rem;
}
}
/* The whole header (utility bar + nav) is the sticky element, not just the
nav on its own — a sticky child can only stay pinned within the height of
its own parent box, and header's natural height (~130px) is barely taller
than the nav itself, so a nav-only sticky would unstick and scroll away
after a few dozen pixels. Header is a direct child of , so its own
containing block spans the full page and it can stay pinned start to
finish. The utility bar then collapses away on scroll (below) so the
pinned bar reads as a compact nav, not a full-height header. */
header[data-site-header] {
position: sticky;
top: 0;
z-index: 40;
}
.utility-bar {
overflow: hidden;
max-height: 3.5rem;
border-bottom: 1px solid #dddddf;
background: #f5f5f7;
transition: max-height 260ms ease, opacity 200ms ease, border-color 260ms ease;
}
header[data-site-header].is-scrolled .utility-bar {
max-height: 0;
opacity: 0;
border-bottom-color: transparent;
}
.site-nav {
position: relative;
z-index: 40;
border-bottom: 1px solid #dddddf;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(14px);
}
.section-label {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #5a5a63;
}
.section-title {
margin-top: 1rem;
max-width: 42rem;
font-family: "Newsreader", serif;
font-size: clamp(2.7rem, 4vw, 4.4rem);
line-height: 1.02;
color: #111111;
}
.expertise-pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
border: 1px solid #dddddf;
border-radius: 999px;
background: #ffffff;
padding: 1rem 1.15rem;
font-size: 0.9rem;
font-weight: 800;
color: #111111;
transition: all 180ms ease;
}
.expertise-pill::after {
content: "↗";
color: #1d1ff2;
}
.expertise-pill:hover {
border-color: #111111;
background: #f5f5f7;
}
.feature-card,
.belief-card,
.project-card,
.faq-item,
.service-detail,
.portfolio-story,
.about-panel {
border: 1px solid #dddddf;
background: #ffffff;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.feature-card:hover,
.belief-card:hover,
.project-card:hover,
.service-detail:hover,
.portfolio-story:hover,
.about-panel:hover {
transform: translateY(-4px);
border-color: #b6b6bc;
box-shadow: 0 22px 60px -12px rgba(29, 31, 242, 0.22), 0 8px 24px rgba(17, 17, 17, 0.06);
}
.feature-card {
border-radius: 1.9rem;
padding: 1.6rem;
}
.feature-card__eyebrow,
.project-card__meta,
.service-detail__eyebrow,
.portfolio-story__meta {
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.26em;
text-transform: uppercase;
color: #5a5a63;
}
.feature-card h3,
.project-card h3,
.belief-card h3,
.faq-item summary,
.service-detail h2,
.portfolio-story h2,
.about-panel h2 {
margin-top: 1rem;
font-family: "Newsreader", serif;
color: #111111;
}
.feature-card h3,
.project-card h3,
.belief-card h3,
.about-panel h2 {
font-size: 1.9rem;
line-height: 1.15;
}
/* .service-detail h2 never got an explicit size, so it was falling back to
Tailwind's preflight default (inherits the 14px body size) — much smaller
than every other card heading on the site. Give it real presence. */
.service-detail h2 {
font-size: clamp(1.7rem, 2.4vw + 1rem, 2.1rem);
line-height: 1.2;
}
.feature-card p,
.belief-card p,
.project-card p,
.faq-item p,
.service-detail p,
.service-detail li,
.portfolio-story p,
.about-panel p {
margin-top: 1rem;
color: #5a5a63;
line-height: 1.9;
}
.belief-card {
border-radius: 1.85rem;
padding: 1.7rem;
}
.project-card {
border-radius: 2rem;
padding: 1.7rem;
}
.project-card a {
display: inline-flex;
margin-top: 1.25rem;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1d1ff2;
}
.faq-item {
border-radius: 1.5rem;
padding: 1.35rem 1.5rem;
}
.faq-item summary {
cursor: pointer;
list-style: none;
font-size: 1.35rem;
font-weight: 700;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.service-detail {
border-radius: 2rem;
padding: 1.75rem;
display: grid;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.service-detail {
grid-template-columns: 0.86fr 1.14fr;
align-items: start;
}
}
.service-detail ul {
margin-top: 1rem;
display: grid;
gap: 0.7rem;
}
.service-detail li {
position: relative;
padding-left: 1rem;
margin-top: 0;
}
.service-detail li::before {
content: "";
position: absolute;
left: 0;
top: 0.9rem;
height: 0.35rem;
width: 0.35rem;
border-radius: 999px;
background: #1d1ff2;
}
.portfolio-story {
border-radius: 2rem;
padding: 1.9rem;
}
.about-panel {
border-radius: 1.9rem;
padding: 1.7rem;
}
.field {
display: grid;
gap: 0.55rem;
font-size: 0.95rem;
font-weight: 700;
color: #111111;
}
.field input,
.field textarea,
.field select {
width: 100%;
border: 1px solid #dddddf;
border-radius: 1.15rem;
background: #f5f5f7;
padding: 0.95rem 1rem;
color: #111111;
outline: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
border-color: #1d1ff2;
box-shadow: 0 0 0 4px rgba(29, 31, 242, 0.10);
}
.site-footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(150deg, #0a0c2b 0%, #14164a 45%, #1d1ff2 130%);
}
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 500ms ease, transform 500ms ease;
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* ==========================================================================
WOW UPGRADE — colorful blue motion system
Additive on purpose: nothing above this line was removed, so services.html,
work.html, about.html, and contact.html keep working exactly as before
until they're brought into this same system.
========================================================================== */
/* --- Scroll progress bar (site.js drives the scaleX via GSAP/ScrollTrigger) */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 60;
transform: scaleX(0);
transform-origin: 0% 50%;
background: linear-gradient(90deg, #38bdf8, #1d1ff2, #6d28d9);
pointer-events: none;
}
/* --- Sticky nav: shrinks + gains a soft blue-tinted shadow once scrolled */
.site-nav .site-shell {
transition: padding 260ms ease;
}
.site-nav.is-scrolled {
box-shadow: 0 18px 40px -18px rgba(29, 31, 242, 0.28);
}
.site-nav.is-scrolled .site-shell {
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
/* Logo shrinks along with the nav once scrolled */
.site-nav [data-site-logo] {
transition: height 260ms ease;
}
.site-nav.is-scrolled [data-site-logo] {
height: 2.25rem;
}
/* Desktop nav links shrink (font-size + padding) once scrolled */
.site-nav nav a {
transition: font-size 220ms ease, padding 220ms ease;
}
.site-nav.is-scrolled nav a {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
font-size: 0.75rem;
}
/* --- Decorative gradient blobs (hero / CTA backgrounds) */
.blob-field {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.blob {
position: absolute;
border-radius: 9999px;
filter: blur(70px);
opacity: 0.55;
will-change: transform;
animation: blobFloat 18s ease-in-out infinite;
}
@keyframes blobFloat {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}
33% {
transform: translate3d(4%, -6%, 0) scale(1.08);
}
66% {
transform: translate3d(-4%, 5%, 0) scale(0.94);
}
}
/* Fine dot-grid texture, used behind the hero for editorial-agency depth */
.dot-grid {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(17, 17, 17, 0.08) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
pointer-events: none;
}
/* --- Hero text mask reveal: wrap each word in .word-mask > .word-inner */
.word-mask {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
.word-inner {
display: inline-block;
will-change: transform, opacity;
}
/* --- Gradient / glow text for headline highlights */
.text-glow-gradient {
background: linear-gradient(90deg, #1d1ff2, #38bdf8 55%, #6d28d9);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradientPan 6s ease infinite;
}
@keyframes gradientPan {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* --- Pulsing badge dot (hero eyebrow) */
.pulse-dot {
position: relative;
display: inline-flex;
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
background: #1d1ff2;
}
.pulse-dot::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 9999px;
background: rgba(29, 31, 242, 0.45);
animation: pulseRing 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulseRing {
0% {
transform: scale(0.6);
opacity: 0.9;
}
100% {
transform: scale(2.1);
opacity: 0;
}
}
/* --- Magnetic buttons (site.js moves them on mousemove via GSAP quickTo) */
.magnetic {
will-change: transform;
}
.magnetic-shine {
position: relative;
overflow: hidden;
isolation: isolate;
}
.magnetic-shine::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.5) 45%, transparent 70%);
transform: translateX(-120%);
transition: transform 700ms ease;
}
.magnetic-shine:hover::before {
transform: translateX(120%);
}
/* --- Glow cards: gradient border that appears on hover, layered over the
existing .feature-card look via an extra class (data-glow) */
.glow-card {
position: relative;
isolation: isolate;
}
.glow-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, #38bdf8, #1d1ff2, #6d28d9);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 260ms ease;
z-index: -1;
pointer-events: none;
}
.glow-card:hover::before {
opacity: 1;
}
/* --- Tilt cards: subtle 3D tilt driven by site.js mousemove + GSAP */
.tilt-card {
transform-style: preserve-3d;
will-change: transform;
}
/* --- Infinite marquee strip */
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
display: flex;
width: max-content;
animation: marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee__track {
animation-play-state: paused;
}
@keyframes marqueeScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* --- FAQ chevron rotate on open */
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.faq-item .faq-chevron {
flex-shrink: 0;
transition: transform 260ms ease;
}
.faq-item[open] .faq-chevron {
transform: rotate(180deg);
}
/* --- Number badges (01/02/03/04-style eyebrows) with gradient fill */
.num-badge {
background: linear-gradient(135deg, #1d1ff2, #38bdf8);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* --- Respect reduced-motion preferences: disable decorative motion, keep
content immediately visible and fully usable. site.js also checks this
same media query before initializing Lenis/GSAP scroll effects. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.blob,
.pulse-dot::after,
.marquee__track,
.text-glow-gradient {
animation: none !important;
}
[data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
* {
scroll-behavior: auto !important;
}
}
/* ==========================================================================
ROUND 2 UPGRADE — parallax, alternating card treatments, project rows,
testimonial carousel. Additive on top of everything above.
========================================================================== */
/* --- Parallax hook: site.js scrub-animates translateY on any [data-parallax]
element, tied directly to scroll position so it plays forward on scroll
down and reverses on scroll up (GSAP ScrollTrigger scrub). CSS animations
win the cascade over inline styles for the same property, so a blob's
ambient `blobFloat` keyframe would otherwise fight GSAP's transform on
every frame — disable it here and let the scroll-scrub own the motion. */
[data-parallax] {
will-change: transform;
}
.blob[data-parallax] {
animation: none;
}
/* --- Stat strip (hero) --- */
.hero-stat {
border-left: 2px solid rgba(29, 31, 242, 0.18);
padding-left: 0.9rem;
}
.hero-stat strong {
display: block;
font-family: "Newsreader", serif;
font-size: 1.8rem;
line-height: 1;
color: #111111;
}
.hero-stat span {
display: block;
margin-top: 0.35rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #5a5a63;
}
/* --- Free site-audit box (hero of index.html + services.html) --- */
.audit-box {
border-radius: 1.75rem;
border: 1px solid #dddddf;
background: linear-gradient(150deg, #eef3ff 0%, #ffffff 60%);
padding: 1.4rem 1.5rem;
box-shadow: 0 18px 50px -20px rgba(29, 31, 242, 0.28);
}
.audit-form__caption {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #1d1ff2;
}
.audit-form__caption-dot {
height: 0.5rem;
width: 0.5rem;
border-radius: 999px;
background: #1d1ff2;
box-shadow: 0 0 0 4px rgba(29, 31, 242, 0.16);
}
.audit-form__row {
margin-top: 0.85rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
@media (min-width: 480px) {
.audit-form__row {
flex-direction: row;
}
}
.audit-form__row input {
flex: 1;
min-width: 0;
border: 1px solid #dddddf;
border-radius: 999px;
background: #ffffff;
padding: 0.85rem 1.25rem;
font-size: 0.92rem;
font-weight: 600;
color: #111111;
outline: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.audit-form__row input::placeholder {
color: #9a9aa2;
}
.audit-form__row input:focus {
border-color: #1d1ff2;
box-shadow: 0 0 0 4px rgba(29, 31, 242, 0.12);
}
.audit-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 999px;
background: #1d1ff2;
padding: 0.85rem 1.4rem;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #ffffff;
white-space: nowrap;
box-shadow: 0 18px 40px -14px rgba(29, 31, 242, 0.55);
transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.audit-form__submit:hover {
background: #1544c9;
transform: translateY(-1px);
box-shadow: 0 22px 50px -12px rgba(29, 31, 242, 0.7);
}
.audit-form__hint {
margin-top: 0.75rem;
font-size: 0.8rem;
line-height: 1.6;
color: #5a5a63;
}
/* --- Expertise cards: alternating white / light-blue backgrounds + icon --- */
.expertise-grid .feature-card:nth-child(even) {
background: #eef3ff;
}
/* Exactly 6 cards (2 x 3 grid, no leftover row) — sized up so the section
reads as generous rather than cramped now that there's one fewer row. */
.expertise-grid--six.expertise-grid .feature-card {
padding: 2.1rem;
border-radius: 2.1rem;
}
.expertise-grid--six.expertise-grid .feature-card h3 {
margin-top: 1.35rem;
font-size: 2.1rem;
line-height: 1.14;
}
.expertise-grid--six.expertise-grid .feature-card p {
margin-top: 1.1rem;
font-size: 1rem;
line-height: 1.85;
}
.expertise-grid--six.expertise-grid .feature-card__icon {
height: 2.9rem;
width: 2.9rem;
}
/* --- Pricing page: package cards --- */
.pricing-card {
position: relative;
border: 1px solid #dddddf;
border-radius: 2rem;
background: #ffffff;
padding: 2rem;
display: flex;
flex-direction: column;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.pricing-card:hover {
transform: translateY(-4px);
border-color: #b6b6bc;
box-shadow: 0 22px 60px -12px rgba(29, 31, 242, 0.22), 0 8px 24px rgba(17, 17, 17, 0.06);
}
.pricing-card--featured {
border-color: #1d1ff2;
box-shadow: 0 22px 60px -14px rgba(29, 31, 242, 0.32);
}
.pricing-card__badge {
position: absolute;
top: -0.9rem;
left: 2rem;
border-radius: 999px;
background: #1d1ff2;
padding: 0.35rem 0.9rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffffff;
}
.pricing-card__eyebrow {
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #5a5a63;
}
.pricing-card__price {
margin-top: 0.75rem;
display: flex;
align-items: baseline;
gap: 0.6rem;
font-size: 0.85rem;
font-weight: 700;
color: #5a5a63;
}
.pricing-card__price span {
font-family: "Newsreader", serif;
font-size: 2.6rem;
line-height: 1;
color: #111111;
}
.pricing-card__desc {
margin-top: 1rem;
color: #5a5a63;
line-height: 1.8;
}
.pricing-card__features {
margin-top: 1.4rem;
display: grid;
gap: 0.7rem;
flex: 1;
}
.pricing-card__features li {
position: relative;
padding-left: 1.4rem;
font-size: 0.92rem;
color: #111111;
line-height: 1.6;
}
.pricing-card__features li::before {
content: "";
position: absolute;
left: 0;
top: 0.5rem;
height: 0.4rem;
width: 0.4rem;
border-radius: 999px;
background: #1d1ff2;
}
.pricing-card__cta {
margin-top: 1.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid #dddddf;
padding: 0.9rem 1.5rem;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #111111;
transition: all 180ms ease;
}
.pricing-card__cta:hover {
border-color: #111111;
background: #f5f5f7;
}
.pricing-card__cta--brand {
border-color: transparent;
background: #1d1ff2;
color: #ffffff;
box-shadow: 0 18px 40px -14px rgba(29, 31, 242, 0.55);
}
.pricing-card__cta--brand:hover {
background: #1544c9;
}
/* --- Pricing page: add-on service cards --- */
.addon-card {
border: 1px solid #dddddf;
border-radius: 1.6rem;
background: #ffffff;
padding: 1.5rem;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.addon-card:hover {
transform: translateY(-3px);
border-color: #b6b6bc;
box-shadow: 0 18px 44px -14px rgba(29, 31, 242, 0.2);
}
.addon-card h3 {
font-family: "Newsreader", serif;
font-size: 1.3rem;
color: #111111;
}
.addon-card__price {
margin-top: 0.4rem;
font-size: 0.85rem;
font-weight: 800;
color: #1d1ff2;
}
.addon-card p:not(.addon-card__price) {
margin-top: 0.6rem;
color: #5a5a63;
line-height: 1.7;
}
/* --- Services page: same alternating treatment on .service-detail --- */
.service-grid .service-detail:nth-child(even) {
background: #eef3ff;
}
.service-detail__eyebrow.feature-card__eyebrow {
margin-bottom: 0.6rem;
}
/* --- About page: alternating panel backgrounds (2-tone, odd/even) --- */
.about-grid .about-panel:nth-child(even) {
background: #eef3ff;
}
.feature-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.75rem;
width: 2.75rem;
border-radius: 1rem;
background: linear-gradient(135deg, #1d1ff2, #38bdf8);
color: #ffffff;
box-shadow: 0 10px 24px -8px rgba(29, 31, 242, 0.55);
}
.feature-card__icon svg {
height: 1.35rem;
width: 1.35rem;
}
.feature-card__eyebrow {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.35rem;
}
/* --- Belief cards: alternating blue / blue-gray shades --- */
.belief-grid .belief-card:nth-child(4n+1) {
background: #eef3ff;
}
.belief-grid .belief-card:nth-child(4n+2) {
background: #f2f3f7;
}
.belief-grid .belief-card:nth-child(4n+3) {
background: #e7edfb;
}
.belief-grid .belief-card:nth-child(4n+4) {
background: #eceef3;
}
/* --- Project rows: alternating image/text layout --- */
.project-row {
display: grid;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 1024px) {
.project-row {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.project-row--reverse .project-row__media {
order: 2;
}
.project-row--reverse .project-row__text {
order: 1;
}
}
.project-row__media {
position: relative;
border-radius: 1.75rem;
overflow: hidden;
border: 1px solid #dddddf;
box-shadow: 0 30px 70px -30px rgba(17, 17, 17, 0.28);
}
.project-row__media img {
display: block;
width: 100%;
height: auto;
transform: scale(1.08);
will-change: transform;
}
.project-row__number {
font-family: "Newsreader", serif;
font-size: 4.5rem;
line-height: 1;
background: linear-gradient(135deg, #1d1ff2, #38bdf8);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0.35;
}
.project-row__text h3 {
margin-top: 0.75rem;
font-family: "Newsreader", serif;
font-size: clamp(1.9rem, 2.4vw, 2.6rem);
line-height: 1.12;
color: #111111;
}
.project-row__text p {
margin-top: 1.1rem;
font-size: 1.05rem;
line-height: 1.85;
color: #5a5a63;
max-width: 34rem;
}
.project-row__tags {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.25rem;
}
.project-row__tags span {
border-radius: 999px;
border: 1px solid #dddddf;
padding: 0.35rem 0.85rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #5a5a63;
}
.project-row__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1d1ff2;
transition: gap 200ms ease;
}
.project-row__link:hover {
gap: 0.85rem;
}
/* --- Testimonial carousel --- */
.testimonial-carousel {
position: relative;
}
.testimonial-viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
border-radius: 2rem;
}
.testimonial-viewport::-webkit-scrollbar {
display: none;
}
.testimonial-track {
display: flex;
}
.testimonial-slide {
flex: 0 0 100%;
scroll-snap-align: start;
padding: 0.25rem;
}
.testimonial-slide__inner {
position: relative;
border-radius: 2rem;
border: 1px solid #dddddf;
background: #ffffff;
padding: 2.25rem 2rem;
min-height: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 22px 60px -12px rgba(29, 31, 242, 0.12);
}
.testimonial-slide__quote-mark {
position: absolute;
top: -1.25rem;
left: 2rem;
font-family: "Newsreader", serif;
font-size: 5.5rem;
line-height: 1;
color: transparent;
background: linear-gradient(90deg, #1d1ff2, #38bdf8 55%, #6d28d9);
-webkit-background-clip: text;
background-clip: text;
user-select: none;
}
.testimonial-slide__quote {
font-family: "Newsreader", serif;
font-size: clamp(1.25rem, 1.9vw, 1.7rem);
line-height: 1.55;
color: #111111;
}
.testimonial-slide__meta {
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: 1.75rem;
}
.testimonial-slide__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
flex-shrink: 0;
border-radius: 999px;
font-family: "Newsreader", serif;
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #1d1ff2, #38bdf8, #6d28d9);
}
.testimonial-slide__name {
font-size: 0.95rem;
font-weight: 800;
color: #111111;
}
.testimonial-slide__role {
font-size: 0.8rem;
color: #5a5a63;
}
.testimonial-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-top: 1.75rem;
}
.testimonial-dots {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.testimonial-dots button {
height: 0.5rem;
width: 0.5rem;
border-radius: 999px;
background: #dddddf;
transition: all 220ms ease;
}
.testimonial-dots button.is-active {
width: 1.75rem;
background: linear-gradient(90deg, #1d1ff2, #38bdf8);
}
.testimonial-arrows {
display: flex;
gap: 0.65rem;
flex-shrink: 0;
}
.testimonial-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
border-radius: 999px;
border: 1px solid #dddddf;
color: #111111;
transition: all 200ms ease;
}
.testimonial-arrow:hover {
border-color: #1d1ff2;
background: #1d1ff2;
color: #ffffff;
transform: translateY(-2px);
}
/* --- Final CTA "more awesome" extras --- */
.cta-stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
margin-top: 2.5rem;
padding-top: 2rem;
}
.cta-stat-row strong {
display: block;
font-family: "Newsreader", serif;
font-size: clamp(1.8rem, 2.6vw, 2.6rem);
background: linear-gradient(90deg, #ffffff, #a5b4ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cta-stat-row span {
display: block;
margin-top: 0.4rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.cta-orbit {
position: absolute;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
[data-parallax] {
transform: none !important;
}
}
/* ==========================================================================
Free site-audit tool (app/seo.php) — score ring, category cards, checks
========================================================================== */
.audit-empty,
.audit-error {
max-width: 46rem;
border: 1px solid #dddddf;
border-radius: 1.75rem;
background: #f5f5f7;
padding: 2rem;
}
.audit-error {
border-color: rgba(220, 38, 38, 0.25);
background: #fef2f2;
}
.audit-empty__eyebrow,
.audit-error__eyebrow {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #5a5a63;
}
.audit-error__eyebrow {
color: #dc2626;
}
.audit-empty h2,
.audit-error h2 {
margin-top: 0.75rem;
font-family: "Newsreader", serif;
font-size: 1.7rem;
line-height: 1.3;
color: #111111;
}
.audit-empty p,
.audit-error p {
margin-top: 1rem;
color: #5a5a63;
line-height: 1.8;
}
.audit-score-panel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2rem;
border-radius: 2rem;
padding: 2.2rem;
--ring-color: #1d1ff2;
}
.audit-band--strong { --ring-color: #16a34a; }
.audit-band--developing { --ring-color: #d97706; }
.audit-band--needs-work { --ring-color: #dc2626; }
.audit-score-ring {
position: relative;
display: flex;
align-items: baseline;
justify-content: center;
width: 9.5rem;
height: 9.5rem;
border-radius: 999px;
flex-shrink: 0;
background: conic-gradient(var(--ring-color) calc(var(--score) * 1%), #e9ecf7 0);
}
.audit-score-ring::before {
content: "";
position: absolute;
inset: 0.55rem;
border-radius: 999px;
background: #ffffff;
}
.audit-score-ring__value {
position: relative;
z-index: 1;
font-family: "Newsreader", serif;
font-size: 2.3rem;
font-weight: 700;
color: #111111;
}
.audit-score-ring__max {
position: relative;
z-index: 1;
margin-left: 0.2rem;
font-size: 0.9rem;
font-weight: 700;
color: #5a5a63;
}
.audit-score-panel__text {
flex: 1;
min-width: 16rem;
}
.audit-score-panel__eyebrow {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ring-color);
word-break: break-word;
}
.audit-score-panel__text h2 {
margin-top: 0.5rem;
font-family: "Newsreader", serif;
font-size: 2rem;
line-height: 1.2;
color: #111111;
}
.audit-score-panel__text p {
margin-top: 0.75rem;
color: #5a5a63;
line-height: 1.8;
}
.audit-category-card {
border: 1px solid #dddddf;
border-radius: 1.75rem;
background: #ffffff;
padding: 1.6rem;
}
.audit-category-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.audit-category-card__head h3 {
font-family: "Newsreader", serif;
font-size: 1.35rem;
color: #111111;
}
.audit-category-card__score {
border-radius: 999px;
background: #eef3ff;
padding: 0.3rem 0.8rem;
font-size: 0.78rem;
font-weight: 800;
color: #1d1ff2;
white-space: nowrap;
}
.audit-check-list {
margin-top: 1.1rem;
display: grid;
gap: 0.85rem;
}
.audit-check {
display: flex;
align-items: flex-start;
gap: 0.7rem;
}
.audit-check__icon {
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.35rem;
width: 1.35rem;
flex-shrink: 0;
margin-top: 0.1rem;
border-radius: 999px;
}
.audit-check--pass .audit-check__icon {
background: rgba(22, 163, 74, 0.14);
color: #16a34a;
}
.audit-check--fail .audit-check__icon {
background: rgba(220, 38, 38, 0.12);
color: #dc2626;
}
.audit-check strong {
display: block;
font-size: 0.92rem;
color: #111111;
}
.audit-check__note {
display: block;
margin-top: 0.15rem;
font-size: 0.85rem;
line-height: 1.6;
color: #5a5a63;
}
.audit-recommend-card {
display: flex;
flex-direction: column;
gap: 0.4rem;
border: 1px solid #dddddf;
border-radius: 1.6rem;
background: #eef3ff;
padding: 1.5rem;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.audit-recommend-card:hover {
transform: translateY(-3px);
border-color: #1d1ff2;
box-shadow: 0 18px 44px -14px rgba(29, 31, 242, 0.28);
}
.audit-recommend-card__eyebrow {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #5a5a63;
}
.audit-recommend-card h3 {
font-family: "Newsreader", serif;
font-size: 1.25rem;
color: #111111;
}
.audit-recommend-card__link {
margin-top: 0.4rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #1d1ff2;
}