/* ============================================================ April4 — shared design system Enterprise-refined: disciplined palette, precise type, restrained motion. One accent per surface via --accent. ============================================================ */ :root { /* Brand cobalt (april4). Apps override --accent in their . */ --brand: 45 91 227; /* #2D5BE3 */ --accent: 45 91 227; /* per-page accent (rgb triplet, space-sep) */ --ink-950: #06070b; --ink-900: #0a0c12; --ink-800: #11141c; --ink-700: #1a1e29; --font-display: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ease: cubic-bezier(.2, .8, .2, 1); } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .font-display { font-family: var(--font-display); letter-spacing: -0.025em; font-feature-settings: "ss01", "ss02"; } .font-mono { font-family: var(--font-mono); } ::selection { background: rgb(var(--accent) / 0.18); color: var(--ink-900); } /* Refined focus ring for keyboard users */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 6px; } /* ---------- Eyebrow / kicker label ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .625rem; font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; opacity: .5; } .eyebrow.is-centered { justify-content: center; } /* ---------- Hero / dark surfaces ---------- */ .hero-bg { background: radial-gradient(1100px 620px at 50% -22%, rgb(var(--accent) / 0.20), transparent 60%), radial-gradient(820px 460px at 88% 4%, rgb(var(--accent) / 0.07), transparent 55%), var(--ink-950); } .hero-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 65% at 50% 35%, #000 35%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 35%, #000 35%, transparent 100%); } /* Very subtle grain for depth (no color cast) */ .hero-noise { background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: .18; } .spotlight { background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .06), transparent 55%); transition: opacity .3s; } /* hairline divider that fades from the accent */ .rule-accent { background: linear-gradient(90deg, transparent, rgb(var(--accent) / 0.6), transparent); } .rule-soft { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent); } /* ---------- Sticky header ---------- */ .site-header { transition: background-color .3s, border-color .3s, box-shadow .3s; } .site-header.is-scrolled { background-color: rgba(255, 255, 255, 0.82); border-color: rgb(229 231 235); box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04), 0 8px 24px -16px rgba(17, 24, 39, 0.16); } /* animated nav underline */ .nav-link { position: relative; transition: color .25s; } .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: rgb(var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); } /* ---------- Scroll reveal (subtle / precise) ---------- */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .06s; } .reveal[data-delay="2"] { transition-delay: .12s; } .reveal[data-delay="3"] { transition-delay: .18s; } .reveal[data-delay="4"] { transition-delay: .24s; } .reveal[data-delay="5"] { transition-delay: .30s; } .reveal[data-delay="6"] { transition-delay: .36s; } /* ---------- Cards (services / features / projects) ---------- */ .card { position: relative; background: #fff; border: 1px solid rgb(229 231 235); border-radius: 1rem; overflow: hidden; transition: transform .45s var(--ease), border-color .35s, box-shadow .35s; } .card::before { /* cursor-follow accent wash (very subtle) */ content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--accent) / 0.06), transparent 55%); opacity: 0; transition: opacity .4s; pointer-events: none; } .card::after { /* hairline top-edge accent on hover */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--accent) / 0.7), transparent); opacity: 0; transition: opacity .35s; } .card:hover { transform: translateY(-3px); border-color: rgb(209 213 219); box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 22px 40px -28px rgba(17, 24, 39, .22); } .card:hover::before, .card:hover::after { opacity: 1; } .card:hover .card-arrow { transform: translate(2px, -2px); opacity: 1; } .card-arrow { transition: transform .35s var(--ease), opacity .35s; opacity: .3; } /* feature / service cards share the .card treatment */ .feat-card, .svc-card { position: relative; background: #fff; border: 1px solid rgb(229 231 235); border-radius: 1rem; overflow: hidden; transition: transform .45s var(--ease), border-color .35s, box-shadow .35s; } .feat-card::before, .svc-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--accent) / 0.06), transparent 55%); opacity: 0; transition: opacity .4s; pointer-events: none; } .feat-card::after, .svc-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--accent) / 0.7), transparent); opacity: 0; transition: opacity .35s; } .feat-card:hover, .svc-card:hover { transform: translateY(-3px); border-color: rgb(209 213 219); box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 22px 40px -28px rgba(17, 24, 39, .22); } .feat-card:hover::before, .svc-card:hover::before, .feat-card:hover::after, .svc-card:hover::after { opacity: 1; } .feat-card:hover .feat-arrow, .svc-card:hover .svc-arrow { transform: translate(2px, -2px); opacity: 1; } .feat-arrow, .svc-arrow { transition: transform .35s var(--ease), opacity .35s; opacity: .3; } /* Project cards (image + body) */ .proj-card { transition: transform .45s var(--ease), border-color .35s, box-shadow .35s; } .proj-card:hover { transform: translateY(-3px); } .proj-card:hover .proj-img { transform: scale(1.05); } .proj-card:hover .proj-link-arrow { transform: translateX(4px); } .proj-img { transition: transform .7s var(--ease); } .proj-link-arrow { transition: transform .3s; display: inline-block; } /* Pricing */ .price-card { transition: transform .45s var(--ease), box-shadow .45s, border-color .35s; } .price-card:hover { transform: translateY(-4px); } .price-card.is-featured { box-shadow: 0 40px 80px -40px rgb(var(--accent) / 0.45), 0 0 0 1px var(--ink-800); } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; font-weight: 600; font-size: .875rem; line-height: 1; white-space: nowrap; transition: transform .25s var(--ease), background-color .25s, border-color .25s, box-shadow .25s, color .25s; } .btn:active { transform: translateY(0) scale(.99); } /* white button — for dark surfaces */ .btn-primary { background: #fff; color: var(--ink-900); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 30px -14px rgba(0, 0, 0, .55); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 16px 38px -14px rgba(0, 0, 0, .6); } /* solid accent button — for light surfaces */ .btn-brand { background: rgb(var(--accent)); color: #fff; box-shadow: 0 1px 2px rgb(var(--accent) / .25), 0 12px 28px -14px rgb(var(--accent) / .7); } .btn-brand:hover { transform: translateY(-1px); filter: saturate(1.05) brightness(1.03); box-shadow: 0 2px 4px rgb(var(--accent) / .3), 0 18px 36px -14px rgb(var(--accent) / .8); } /* ink button — for light surfaces (neutral) */ .btn-ink { background: var(--ink-900); color: #fff; box-shadow: 0 10px 30px -16px rgba(0,0,0,.6); } .btn-ink:hover { transform: translateY(-1px); background: var(--ink-800); } /* ghost / outline */ .btn-ghost { transition: background-color .25s, border-color .25s, transform .25s, color .25s; } .btn-ghost:hover { transform: translateY(-1px); } /* ---------- Animated link underline ---------- */ .link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease); } .link-underline:hover { background-size: 100% 1.5px; } /* ---------- Marquee (refined, monochrome) ---------- */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation: marquee 38s linear infinite; width: max-content; } .marquee-mask { mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } /* ---------- Float / scroll cue ---------- */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .float-slow { animation: float 7s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } } .scroll-cue { animation: nudge 2.4s ease-in-out infinite; } /* ---------- Prose (legal pages) ---------- */ .prose-april { color: rgb(55 65 81); line-height: 1.75; font-size: 1rem; } .prose-april h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: rgb(17 24 39); letter-spacing: -0.02em; margin-top: 2.75rem; margin-bottom: 1rem; scroll-margin-top: 6rem; } .prose-april h2:first-child { margin-top: 0; } .prose-april h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: rgb(17 24 39); margin-top: 1.75rem; margin-bottom: .5rem; } .prose-april p { margin-bottom: 1rem; } .prose-april ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; } .prose-april ul li { margin-bottom: .5rem; } .prose-april a { color: rgb(var(--accent)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: opacity .2s; } .prose-april a:hover { opacity: .7; } .prose-april strong { color: rgb(17 24 39); font-weight: 600; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .marquee-track, .float-slow, .scroll-cue { animation: none; } .card, .feat-card, .svc-card, .proj-card, .price-card, .btn { transition: none; } }