/* Styling for the About / Services / Contact pages. The shared idea: content arrives as the reader scrolls to it, and anything that is a set of related things is a grid of cards that respond to hover. */ /* ── scroll-in ──────────────────────────────────────────── Elements start slightly low and transparent; an IntersectionObserver adds .in when they enter the viewport. Guarded by prefers-reduced-motion, and .no-js on is never set, so content is visible if the script fails. */ .reveal{ opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} } /* ── page header ────────────────────────────────────────── The inner pages get a still photograph behind the header rather than a flat colour, slowly zooming so the page does not feel frozen. The image is set per page via --hero on .stage. */ .stage-short{position:relative;overflow:hidden} .stage-short::before{ content:"";position:absolute;inset:0;z-index:0; background-image:var(--hero); background-size:cover;background-position:center; animation:pagezoom 22s ease-in-out infinite alternate; } .stage-short::after{ content:"";position:absolute;inset:0;z-index:0; background: linear-gradient(180deg, rgba(8,16,51,.90) 0%, rgba(8,16,51,.78) 45%, rgba(8,16,51,.95) 100%), linear-gradient(90deg, rgba(8,16,51,.7) 0%, transparent 65%); } .stage-short > .wrap{position:relative;z-index:1} @keyframes pagezoom{ from{transform:scale(1.03)} to {transform:scale(1.14)} } @media (prefers-reduced-motion:reduce){ .stage-short::before{animation:none;transform:scale(1.03)} } .page-head{padding:60px 0 46px;max-width:780px} .page-head h1{ font-family:var(--display);font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 1; font-weight:300;font-size:clamp(34px,5.6vw,62px);line-height:1.04; letter-spacing:-.02em;margin:0 0 20px; } .page-head h1 em{font-style:normal;font-weight:600;color:var(--sand)} .page-head p{font-size:17.5px;line-height:1.65;color:rgba(255,255,255,.7);margin:0} /* ── stat band ────────────────────────────────────────── */ .stats-band{ display:grid;gap:1px;background:var(--line-dark); grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border:1px solid var(--line-dark);border-radius:16px;overflow:hidden; margin:-46px 0 0;position:relative;z-index:2; } .stats-band > div{background:#fff;padding:28px 24px;text-align:center} .stats-band .n{ font-family:var(--display);font-variation-settings:"opsz" 70; font-size:38px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--blue); } .stats-band .l{ font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--slate);margin-top:10px; } /* ── prose ────────────────────────────────────────────── */ .prose{max-width:720px} .prose p{font-size:17px;line-height:1.75;color:var(--slate);margin:0 0 20px} .prose p strong{color:var(--ink);font-weight:600} .prose p:last-child{margin:0} .split{display:grid;gap:56px;grid-template-columns:1fr 1fr;align-items:center} @media (max-width:880px){.split{grid-template-columns:1fr;gap:36px}} .split img{width:100%;border-radius:16px;display:block;aspect-ratio:4/3;object-fit:cover} /* ── value / service cards ────────────────────────────── */ .cards{ display:grid;gap:16px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); } .vcard{ background:#fff;border:1px solid var(--line-dark);border-radius:16px; padding:28px 26px;position:relative;overflow:hidden; transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease; } .vcard::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--blue),var(--sand)); transform:scaleX(0);transform-origin:left;transition:transform .34s ease; } .vcard:hover{ transform:translateY(-5px); box-shadow:0 22px 46px -24px rgba(8,16,51,.35); border-color:transparent; } .vcard:hover::before{transform:scaleX(1)} .vcard .ic{ width:44px;height:44px;border-radius:12px;margin-bottom:18px; background:rgba(12,65,234,.08);display:flex;align-items:center;justify-content:center; transition:background .28s ease; } .vcard:hover .ic{background:rgba(12,65,234,.14)} .vcard .ic svg{width:20px;height:20px;stroke:var(--blue);stroke-width:1.7;fill:none} .vcard h3{ font-family:var(--display);font-variation-settings:"opsz" 60; font-size:20px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em; } .vcard p{font-size:14.5px;line-height:1.65;color:var(--slate);margin:0} .vcard .num{ position:absolute;right:22px;top:20px; font-family:var(--display);font-size:44px;font-weight:600;line-height:1; color:rgba(8,16,51,.05); } /* ── flip cards ─────────────────────────────────────────── The front states the service, the back gives the detail. Flipping keeps a long service list scannable without four paragraphs of text on screen at once. Touch devices get a tap-to-flip class instead of :hover. */ .flip{perspective:1200px;min-height:270px} .flip-inner{ position:relative;width:100%;height:100%;min-height:270px; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; } .flip:hover .flip-inner,.flip.flipped .flip-inner{transform:rotateY(180deg)} .flip-face{ position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden; border-radius:16px;padding:28px 26px;display:flex;flex-direction:column; border:1px solid var(--line-dark);overflow:auto; } .flip-front{background:#fff} .flip-back{ background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 100%); color:#fff;transform:rotateY(180deg);border-color:transparent; } .flip-front h3{ font-family:var(--display);font-variation-settings:"opsz" 60; font-size:21px;font-weight:600;margin:0 0 10px; } .flip-front p{font-size:14.5px;line-height:1.65;color:var(--slate);margin:0;flex:1} .flip-front .more{ font-family:var(--mono);font-size:10px;letter-spacing:.11em; text-transform:uppercase;color:var(--blue);margin-top:16px; } .flip-back h4{ font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--sand);margin:0 0 16px;font-weight:400; } .flip-back ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px} .flip-back li{ font-size:14px;line-height:1.5;color:rgba(255,255,255,.82); padding-left:18px;position:relative; } .flip-back li::before{ content:"";position:absolute;left:0;top:7px; width:6px;height:6px;border-radius:50%;background:var(--sand); } @media (prefers-reduced-motion:reduce){ .flip-inner{transition:none} } /* ── process steps ────────────────────────────────────── */ .steps{ display:grid;gap:20px;counter-reset:step; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .step-card{position:relative;padding-top:26px} .step-card::before{ counter-increment:step;content:"0" counter(step); font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--blue); } .step-card h3{ font-family:var(--display);font-size:19px;font-weight:600;margin:12px 0 9px; } .step-card p{font-size:14.5px;line-height:1.65;color:var(--slate);margin:0} .step-card .bar{ height:2px;background:var(--line-dark);margin-top:18px;position:relative;overflow:hidden; } .step-card .bar::after{ content:"";position:absolute;inset:0;background:var(--blue); transform:scaleX(0);transform-origin:left;transition:transform .8s ease .2s; } .step-card.in .bar::after{transform:scaleX(1)} /* ── CTA band ─────────────────────────────────────────── */ .cta-band{ background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 100%); color:#fff;border-radius:20px;padding:52px 44px;text-align:center; } .cta-band h2{ font-family:var(--display);font-variation-settings:"opsz" 100; font-weight:300;font-size:clamp(26px,3.8vw,40px);line-height:1.1;margin:0 0 14px; } .cta-band h2 em{font-style:normal;font-weight:600;color:var(--sand)} .cta-band p{color:rgba(255,255,255,.68);font-size:16.5px;line-height:1.6; max-width:520px;margin:0 auto 30px} .cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .cta-btns a{ text-decoration:none;border-radius:12px;padding:15px 28px; font-size:15.5px;font-weight:600;transition:all .18s ease; } .cta-btns .primary{background:var(--blue);color:#fff} .cta-btns .primary:hover{background:var(--blue-lift)} .cta-btns .ghost{border:1px solid rgba(255,255,255,.25);color:#fff} .cta-btns .ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)} @media (max-width:760px){ .cta-band{padding:34px 20px} .page-head{padding:34px 0 30px} .page-head p{font-size:16px} .prose p{font-size:16px} .split{gap:28px} .split img{aspect-ratio:16/10} .cta-btns{flex-direction:column} .cta-btns a{width:100%;text-align:center} /* A 3D flip on a phone is fiddly and clips on small screens. Stack the two faces instead, so all the detail is simply there to scroll past. */ .flip,.flip-inner{min-height:0;perspective:none} .flip-inner{transform:none!important;transform-style:flat} .flip-face{ position:static;backface-visibility:visible; -webkit-backface-visibility:visible;transform:none;height:auto;overflow:visible; } .flip-front{border-radius:16px 16px 0 0;border-bottom:0} .flip-back{border-radius:0 0 16px 16px;transform:none} .flip-front .more{display:none} }