/* ============================================ Fonts (self-hosted, latin subset) ============================================ */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/lato-300.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lato-400.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/lato-700.woff2") format("woff2"); } @font-face { font-family: "Shadows Into Light Two"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/shadows-into-light-two-400.woff2") format("woff2"); } /* ============================================ Design Tokens ============================================ */ :root { --bg: #1b1919; --surface: #222020; --surface-2: #2d2a2a; --dark: #0e0d0d; --white: #ffffff; --orange: #e9904e; --orange-dark: #e37421; --orange-glow: rgba(233, 144, 78, 0.12); --orange-dim: rgba(233, 144, 78, 0.2); --orange-mid: rgba(233, 144, 78, 0.25); --purple: #694eb7; --purple-dark: #533d95; --purple-glow: rgba(105, 78, 183, 0.1); --purple-dim: rgba(105, 78, 183, 0.2); --blue: #4ea7e9; --blue-glow: rgba(78, 167, 233, 0.1); --blue-dim: rgba(78, 167, 233, 0.2); --accent: var(--orange); --text: rgba(255, 255, 255, 0.87); --text-muted: rgba(255, 255, 255, 0.55); --text-faint: rgba(255, 255, 255, 0.35); --border: rgba(255, 255, 255, 0.08); --border-bright: rgba(255, 255, 255, 0.15); --font: "Lato", sans-serif; --font-hand: "Shadows Into Light Two", cursive; --orange-glow-strong: rgba(233, 144, 78, 0.35); --spotlight: radial-gradient( ellipse at 50% 0%, rgba(255, 255, 255, 0.08), transparent 60% ); --nav-h: 72px; --max-w: 1200px; --pad: clamp(1rem, 4vw, 2rem); --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --shadow: 0 4px 32px rgba(0, 0, 0, 0.55); --shadow-orange: 0 8px 32px rgba(233, 144, 78, 0.25); --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.45); --ease: 0.22s ease; --ease-slow: 0.4s ease; } /* ============================================ Reset ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--bg); } body { font-family: var(--font); font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--text); background-color: var(--bg); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: inherit; } /* ============================================ Typography ============================================ */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.15; color: var(--white); } h1 { font-size: clamp(2.2rem, 6vw, 4rem); } h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); } h4 { font-size: 1.05rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } p { color: var(--text); line-height: 1.75; max-width: 65ch; } /* ============================================ Layout ============================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); } .section { padding: clamp(4rem, 10vw, 7rem) 0; } .section--dark { background: var(--dark); } .section--surface { background: var(--surface); } /* Per-page theme accents (set on ) */ .theme-purple { --accent: var(--purple); } .theme-blue { --accent: var(--blue); } .section-label { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-hand); font-size: 1.3rem; font-weight: 400; letter-spacing: 0.02em; color: var(--accent); margin-bottom: 1rem; transform: rotate(-2deg); } .section-title { margin-bottom: 1.25rem; } .section-body { color: var(--text-muted); max-width: 55ch; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } /* ============================================ Buttons ============================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.85rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--r-lg); transition: all var(--ease); cursor: pointer; white-space: nowrap; border: none; } .btn-primary { background: var(--orange); color: var(--dark); box-shadow: var(--shadow-orange); padding-right: 1.45rem; } .btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(233, 144, 78, 0.4); } .btn-primary:hover::after { transform: translateX(3px); } .btn-ghost { border: 1px solid var(--border-bright); color: var(--white); background: transparent; } .btn-ghost:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); } .btn-sm { padding: 0.55rem 1.25rem; font-size: 0.8rem; } /* ============================================ Navigation ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(27, 25, 25, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); overflow: visible; transition: background 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease; } .nav--expanded { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Suppress the orange nav border before JS initialises on the homepage. Avoids a single-frame flash between paint and JS adding `nav--expanded`. */ .is-home-initial .nav::after { opacity: 0; } .nav__inner { max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; } .nav__logo { position: relative; display: inline-block; transform-origin: top left; margin-top: 0; transition: margin-top 0.5s ease; } .nav__logo-mark { height: 38px; width: auto; max-width: none; display: block; transition: height 0.5s ease; } /* Wordmark is absolutely positioned so its switch between "right of mark" (small) and "below mark" (expanded) can be animated. flex-direction can't transition; top/left/transform can. */ .nav__logo-wordmark { position: absolute; height: 11px; width: auto; max-width: none; display: block; top: 50%; left: calc(100% + 10px); transform: translateY(-50%); transition: height 0.5s ease, top 0.5s ease, left 0.5s ease, transform 0.5s ease; } /* Expanded state (top of homepage): mark grows, wordmark slides beneath it. .nav__inner is anchored to the top of .nav (overriding .nav's align-items: center) so the mark grows downward into the hero instead of being vertically centred (and clipped at the top of the viewport). */ .nav--expanded .nav__inner { align-self: flex-start; align-items: flex-start; } /* Keep the nav links and mobile hamburger visually anchored in the original 72px-tall nav row even though .nav__inner has grown to fit the expanded logo below. */ .nav--expanded .nav__links, .nav--expanded .nav__toggle { min-height: var(--nav-h); justify-content: center; } .nav--expanded .nav__logo { margin-top: 24px; } .nav--expanded .nav__logo-mark { height: 140px; } /* Wordmark height chosen so its rendered width matches the mark's: mark width ≈ 140 * 436/433 ≈ 141px; wordmark height = 141 * 32/446 ≈ 10.1px */ .nav--expanded .nav__logo-wordmark { height: 10px; top: calc(100% + 10px); left: 0; transform: translateY(0); } /* No transition on the very first paint — homepage renders already-expanded. */ .is-home-initial .nav__logo, .is-home-initial .nav__logo-mark, .is-home-initial .nav__logo-wordmark { transition: none; } .nav__links { display: flex; align-items: center; gap: 0.15rem; } .nav__link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.9rem; font-size: 0.875rem; font-weight: 400; color: var(--text-muted); border-radius: var(--r-sm); transition: color var(--ease), background var(--ease); } .nav__link:hover, .nav__link.active { color: var(--white); background: rgba(255, 255, 255, 0.06); } .nav__link.nav__link--cta { background: var(--orange); color: var(--dark); font-weight: 700; margin-left: 0.75rem; border-radius: var(--r-md); } .nav__link.nav__link--cta:hover { background: var(--orange-dark); transform: translateY(-1px); } /* Dropdown */ .nav__dropdown { position: relative; } .nav__dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.5rem; min-width: 190px; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: all var(--ease); box-shadow: var(--shadow); } .nav__dropdown-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .nav__dropdown:hover .nav__dropdown-menu, .nav__dropdown:focus-within .nav__dropdown-menu { opacity: 1; pointer-events: all; transform: translateY(0); } .nav__dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; border-radius: var(--r-sm); font-size: 0.875rem; color: var(--text-muted); transition: all var(--ease); } .icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; } .icon--spin { animation: icon-spin 0.9s linear infinite; } @keyframes icon-spin { to { transform: rotate(360deg); } } .nav__dropdown-item .icon { width: 16px; color: var(--orange); font-size: 0.8rem; text-align: center; } .nav__dropdown-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); } .nav__chevron { font-size: 0.6rem; transition: transform var(--ease); } .nav__dropdown:hover .nav__chevron { transform: rotate(180deg); } /* Mobile toggle */ .nav__toggle { display: none; flex-direction: column; gap: 5px; width: 28px; cursor: pointer; padding: 4px; } .nav__toggle span { display: block; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--ease); } .nav__toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__toggle.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); } .nav__toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile menu */ .nav__mobile { display: flex; flex-direction: column; gap: 0.2rem; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--dark); border-bottom: 1px solid var(--border); padding: 1rem var(--pad) 1.5rem; transform: translateY(-110%); opacity: 0; pointer-events: none; transition: all var(--ease-slow); z-index: 99; } .nav__mobile.open { transform: translateY(0); opacity: 1; pointer-events: all; } .nav__mobile-link { display: block; padding: 0.75rem 1rem; color: var(--text-muted); font-size: 0.9rem; border-radius: var(--r-sm); transition: all var(--ease); } .nav__mobile-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); } .nav__mobile-link.nav__mobile-link--cta { background: var(--orange); color: var(--dark); text-align: center; font-weight: 700; margin-top: 0.75rem; border-radius: var(--r-md); } /* ============================================ Footer ============================================ */ .footer { background: var(--dark); border-top: 1px solid var(--border); padding: 5rem 0 2.5rem; position: relative; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent 0%, var(--orange) 40%, var(--orange-dark) 60%, transparent 100% ); opacity: 0.7; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; margin-bottom: 4rem; } .footer__brand img { height: 40px; margin-bottom: 1.5rem; } .footer__tagline { color: var(--text-muted); font-size: 0.875rem; max-width: 30ch; line-height: 1.75; margin-bottom: 1.75rem; } .footer__contact-item { display: flex; align-items: center; gap: 0.65rem; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.7rem; transition: color var(--ease); } .footer__contact-item .icon { color: var(--orange); width: 14px; text-align: center; flex-shrink: 0; } .footer__contact-item:hover { color: var(--white); } .footer__heading { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .footer__link { display: block; color: var(--text-muted); font-size: 0.875rem; padding: 0.4rem 0 0.4rem 0; border-left: 2px solid transparent; transition: color var(--ease), border-color var(--ease), padding-left var(--ease); } .footer__link:hover { color: var(--white); border-left-color: var(--orange); padding-left: 0.65rem; } .footer__bottom { padding-top: 2rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .footer__copy, .footer__reg { color: var(--text-muted); font-size: 0.78rem; } /* ============================================ Card (generic) ============================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2rem; transition: all var(--ease-slow); } /* Shared base for all card variants — consolidated surface/border/radius */ .card, .service-card, .portfolio-card, .team-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } .card:hover { border-color: rgba(233, 144, 78, 0.22); transform: translateY(-4px); box-shadow: var(--shadow-card); } .card__icon { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 1.25rem; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .card__icon--orange { background: var(--orange-glow); color: var(--orange); border: 1px solid rgba(233, 144, 78, 0.22); } .card__icon--purple { background: var(--purple-glow); color: var(--purple); border: 1px solid rgba(105, 78, 183, 0.22); } .card__icon--blue { background: var(--blue-glow); color: var(--blue); border: 1px solid rgba(78, 167, 233, 0.22); } .card__title { font-size: 1.1rem; margin-bottom: 0.75rem; } .card__body { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; max-width: none; } .card__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem; font-size: 0.85rem; font-weight: 700; color: var(--orange); transition: gap var(--ease); } .card__link:hover { gap: 0.8rem; } /* ============================================ Numbered rows (home services, about values) ============================================ */ .service-rows { display: flex; flex-direction: column; gap: 1.25rem; } .service-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.35fr) auto; gap: 2.75rem; align-items: start; padding: 2.75rem 3rem; border: 1px solid var(--border); border-radius: var(--r-lg); color: inherit; transition: border-color var(--ease), background var(--ease); } .service-row:hover, .service-row:focus-visible { border-color: var(--orange-dim); background: rgba(255, 255, 255, 0.02); } .service-row__num { font-size: 2.6rem; font-weight: 400; line-height: 1.15; color: var(--orange); } .service-row--purple .service-row__num { color: var(--purple); } .service-row--blue .service-row__num { color: var(--blue); } .service-row__title { font-size: 1.55rem; line-height: 1.3; padding-top: 0.35rem; } .service-row__desc { color: var(--text-muted); margin-bottom: 1.1rem; } .service-row__desc:last-child { margin-bottom: 0; } .service-row__tags { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; font-size: 0.875rem; color: var(--text-faint); } .service-row__tags li + li::before { content: "\00B7"; margin-right: 0.7rem; } .service-row__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 700; white-space: nowrap; color: var(--white); transition: gap var(--ease), color var(--ease); } .service-row:hover .service-row__link { gap: 0.8rem; color: var(--orange); } /* ============================================ CTA Banner ============================================ */ .cta-banner { padding: 5.5rem 0; background: var(--surface); text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 350px; background: radial-gradient( ellipse, rgba(233, 144, 78, 0.05) 0%, transparent 70% ); pointer-events: none; } .cta-banner__inner { position: relative; z-index: 1; } .cta-banner__title { font-size: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: 1rem; } .cta-banner__body { color: var(--text-muted); margin: 0 auto 2.5rem; font-size: 1.05rem; max-width: 50ch; } .cta-banner__actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* ============================================ Content Split (used on home, services, about) ============================================ */ .content-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .content-split__media { border-radius: var(--r-lg); overflow: hidden; } .content-split__media img { width: 100%; height: 400px; object-fit: cover; } .content-split__media-placeholder { width: 100%; height: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; color: var(--text-faint); } .content-split__media-placeholder .icon { font-size: 3rem; } .content-split__media-placeholder span { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; } /* ============================================ Scroll Animations ============================================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } .reveal-delay-4 { transition-delay: 0.32s; } .reveal-delay-5 { transition-delay: 0.4s; } .reveal-delay-6 { transition-delay: 0.48s; } /* ============================================ Utilities ============================================ */ .text-orange { color: var(--orange); } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .divider { width: 48px; height: 3px; background: var(--orange); border-radius: 2px; margin-bottom: 1.5rem; } .mb-xs { margin-bottom: 0.5rem; } .mb-sm { margin-bottom: 1rem; } .mb-md { margin-bottom: 2rem; } .mb-lg { margin-bottom: 3rem; } .mb-xl { margin-bottom: 4rem; } /* ============================================ Prototype design cues — utilities ============================================ */ /* Word highlight inside white headings */ .u-hl-orange { color: var(--orange); } .u-hl-purple { color: var(--purple); } .u-hl-blue { color: var(--blue); } /* Handwritten accent */ .u-hand { display: inline-block; font-family: var(--font-hand); font-weight: 400; color: var(--accent); letter-spacing: 0.01em; transform: rotate(-2deg); } /* Write-on reveal for handwritten text — clip sweeps left to right like a pen stroke. Negative insets keep flourishes/descenders (and the drawn underline below) unclipped. */ .u-hand, .section-label, .hero__kicker, .page-hero__label { position: relative; clip-path: inset(-0.4em 100% -1em -0.2em); } .u-hand.is-written, .section-label.is-written, .hero__kicker.is-written, .page-hero__label.is-written { clip-path: inset(-0.4em -0.3em -1em -0.2em); transition: clip-path 1.1s cubic-bezier(0.5, 0.1, 0.45, 0.9); } /* Hand-drawn underline (SVG injected by main.js), drawn on with a stroke-dashoffset sweep once the write-on above it has finished */ .hand-underline { position: absolute; left: 0; bottom: -0.45em; width: 100%; height: 0.55em; overflow: visible; pointer-events: none; } .hand-underline path { fill: none; stroke: var(--accent); /* Stroke scales with the stretched viewBox (no non-scaling-stroke: it makes Chromium dash in screen space, desyncing the pathLength-normalised dash from the path so the draw-on falls short). Height is em-based, so this lands at ~2px. */ stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .is-written > .hand-underline path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s ease-out 1.05s; } @media (prefers-reduced-motion: reduce) { .u-hand, .section-label, .hero__kicker, .page-hero__label { clip-path: none; } .u-hand.is-written, .section-label.is-written, .hero__kicker.is-written, .page-hero__label.is-written { transition: none; } .is-written > .hand-underline path { transition: none; } } /* Hand-drawn squiggle underline beneath card titles */ .u-underline-hand { display: block; width: 140px; aspect-ratio: 204 / 14; margin: 0.4rem 0 0.9rem; background-image: url("../images/underline-hand.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; } /* Diagonal section dividers */ .section--diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); padding-bottom: calc(clamp(4rem, 10vw, 7rem) + 48px); } .section--diagonal-top { clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%); margin-top: -48px; padding-top: calc(clamp(4rem, 10vw, 7rem) + 48px); } /* Spotlight glow on dark sections */ .section--spotlight { position: relative; isolation: isolate; } .section--spotlight::before { content: ""; position: absolute; inset: 0; background: var(--spotlight); pointer-events: none; z-index: 0; } .section--spotlight > * { position: relative; z-index: 1; } /* Circular orange icon badge */ .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--orange); color: var(--white); font-size: 1.15rem; box-shadow: 0 6px 18px var(--orange-glow-strong); margin-bottom: 1.1rem; } /* Wordmark shown only when the logo image fails to load (the inline onerror handler swaps display:none for display:block) */ .logo-fallback { display: none; font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: 0.05em; } .logo-fallback--footer { display: block; font-size: 1.25rem; letter-spacing: 0; margin-bottom: 1.25rem; } /* Centered variant of .section-label (overrides inline-flex alignment) */ .section-label--center { justify-content: center; } /* Muted paragraph colour */ .u-text-muted { color: var(--text-muted); } /* Active state for the nav CTA button (e.g. on the Contact page) */ .nav__link.nav__link--cta.active, .nav__link.nav__link--cta.active:hover { background: var(--orange-dark); }