/* ========================================================================== CURTIS SERVICES — Foundation Tokens, reset, typography, motion primitives and shared components. Loaded by every page. Brand accent is switched by [data-brand] on . ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Ink — a cool near-black that lets the accents burn */ --void: #050607; --ink: #0A0C0E; --ink-2: #101418; --ink-3: #171C21; --ink-4: #212831; /* Light — warm off-white, never pure #fff */ --paper: #F4F3EE; --paper-80: rgba(244, 243, 238, 0.80); --paper-62: rgba(244, 243, 238, 0.62); --paper-42: rgba(244, 243, 238, 0.42); --paper-24: rgba(244, 243, 238, 0.24); --hair: rgba(244, 243, 238, 0.11); --hair-soft: rgba(244, 243, 238, 0.06); /* The three business accents, taken from the Curtis badge marks */ --c-removals: #5CE04A; --c-drone: #FF5A2B; --c-erg: #DCF34B; /* Live accent. Overridden per page by [data-brand]. */ --accent: var(--paper); --accent-ink: var(--void); --accent-glow: rgba(244, 243, 238, 0.20); --accent-wash: rgba(244, 243, 238, 0.06); /* Type */ --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid scale — 380px to 1600px viewports */ --t-mono: clamp(0.625rem, 0.58rem + 0.19vw, 0.75rem); --t-small: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem); --t-body: clamp(1rem, 0.95rem + 0.24vw, 1.1875rem); --t-lead: clamp(1.125rem, 1.02rem + 0.52vw, 1.5rem); --t-h3: clamp(1.375rem, 1.15rem + 1.1vw, 2.125rem); --t-h2: clamp(2rem, 1.4rem + 2.9vw, 4.25rem); --t-h1: clamp(2.75rem, 1.5rem + 6vw, 7rem); --t-mega: clamp(2.9rem, 0.2rem + 13.4vw, 15rem); /* Space */ --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.75rem); --section: clamp(4.5rem, 3rem + 7vw, 11rem); --measure: 62ch; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.28s; --dur: 0.55s; --dur-slow: 0.9s; --radius: 14px; --radius-lg: 26px; color-scheme: dark; } [data-brand="removals"] { --accent: var(--c-removals); --accent-ink: #04220A; --accent-glow: rgba(92, 224, 74, 0.30); --accent-wash: rgba(92, 224, 74, 0.09); } [data-brand="drone"] { --accent: var(--c-drone); --accent-ink: #2A0A00; --accent-glow: rgba(255, 90, 43, 0.30); --accent-wash: rgba(255, 90, 43, 0.09); } [data-brand="erg"] { --accent: var(--c-erg); --accent-ink: #23280A; --accent-glow: rgba(220, 243, 75, 0.30); --accent-wash: rgba(220, 243, 75, 0.09); } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img, video { height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: var(--accent-ink); } /* -------------------------------------------------------------------------- 3. Texture — a single film-grain layer over the whole document -------------------------------------------------------------------------- */ .grain { position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: 0.30; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); animation: grain-drift 6s steps(6) infinite; will-change: transform; } @keyframes grain-drift { 0% { transform: translate(0, 0); } 16% { transform: translate(-2%, -3%); } 33% { transform: translate(-4%, 2%); } 50% { transform: translate(2%, -4%); } 66% { transform: translate(-3%, 3%); } 83% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); } } /* -------------------------------------------------------------------------- 4. Layout -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 980px; } .section { padding-block: var(--section); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%); z-index: 9999; padding: 0.75rem 1.25rem; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 0 0 10px 10px; transition: transform var(--dur-fast) var(--ease-out); } .skip:focus { transform: translate(-50%, 0); } /* -------------------------------------------------------------------------- 5. Typography -------------------------------------------------------------------------- */ .display, h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 0.92; letter-spacing: -0.035em; font-variation-settings: "wdth" 100; text-wrap: balance; } .t-mega { font-size: var(--t-mega); line-height: 0.80; letter-spacing: -0.055em; text-transform: uppercase; } .t-h1 { font-size: var(--t-h1); } .t-h2 { font-size: var(--t-h2); } .t-h3 { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -0.02em; } .lead { font-size: var(--t-lead); line-height: 1.42; color: var(--paper-80); max-width: var(--measure); letter-spacing: -0.011em; } .body-dim { color: var(--paper-62); max-width: var(--measure); } .eyebrow { display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-42); } .eyebrow::before { content: ""; width: clamp(1.5rem, 3vw, 2.75rem); height: 1px; background: var(--accent); flex: none; } .eyebrow--plain::before { display: none; } .accent { color: var(--accent); } /* Word-by-word reveal. JS adds .is-in; each word carries --i for the stagger. Ported from the 21st.dev "WordsPullUp" motion component. */ /* No display of its own — .pull-up is applied to headings and paragraphs that must keep whatever box they already are. */ .pull-up .word { display: inline-block; overflow: hidden; vertical-align: bottom; /* The clip box is one line-height tall, which leaves no room for descenders. Pad it out, then pull the same amount back off the layout. */ padding-bottom: 0.18em; margin-bottom: -0.18em; } /* Block, not inline-block: an inline-block child would be baseline-aligned inside the clip box and pushed out of view. */ .pull-up .word > span { display: block; transform: translateY(115%); opacity: 0; transition: transform 0.85s var(--ease-out), opacity 0.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); } .pull-up.is-in .word > span { transform: translateY(0); opacity: 1; } /* Generic scroll reveal */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--delay, 0ms); } .reveal.is-in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 6. Buttons — the pill + arrow-disc pattern -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0.35rem 0.3rem 1.35rem; background: var(--btn-bg); color: var(--btn-fg); border-radius: 999px; font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; transition: gap var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn__disc { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 999px; background: var(--void); color: var(--paper); flex: none; transition: transform var(--dur-fast) var(--ease-out); } .btn__disc svg { width: 0.95rem; height: 0.95rem; } .btn:hover { gap: 1rem; box-shadow: 0 0 0 6px var(--accent-wash); } .btn:hover .btn__disc { transform: scale(1.08) rotate(45deg); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); } .btn--ghost .btn__disc { background: var(--accent); color: var(--accent-ink); } .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--paper-42); } /* Text link with a wiping underline */ .link { position: relative; display: inline-block; padding-bottom: 2px; font-weight: 500; } .link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-fast) var(--ease-out); } .link:hover::after { transform: scaleX(1); transform-origin: left; } /* -------------------------------------------------------------------------- 7. The Curtis badge mark -------------------------------------------------------------------------- */ .badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18em; width: var(--badge-size, 4.5rem); height: var(--badge-size, 4.5rem); border-radius: 999px; background: var(--void); box-shadow: inset 0 0 0 1px var(--hair); flex: none; } .badge__word { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--badge-size, 4.5rem) * 0.205); letter-spacing: 0.06em; line-height: 1; color: var(--accent); } .badge__sub { font-family: var(--font-mono); font-weight: 500; font-size: calc(var(--badge-size, 4.5rem) * 0.072); letter-spacing: 0.14em; line-height: 1; color: var(--paper-42); text-transform: uppercase; } /* -------------------------------------------------------------------------- 8. Site header -------------------------------------------------------------------------- */ .masthead { position: fixed; inset: 0 0 auto 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.9rem, 1.6vw, 1.5rem) var(--gutter); transition: background var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .masthead.is-stuck { background: rgba(10, 12, 14, 0.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--hair-soft); } .masthead__home { display: inline-flex; align-items: baseline; gap: 0.55rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(0.95rem, 1.4vw, 1.15rem); letter-spacing: 0.02em; text-transform: uppercase; } .masthead__home .dot { width: 0.34em; height: 0.34em; border-radius: 999px; background: var(--accent); align-self: center; flex: none; transition: transform var(--dur-fast) var(--ease-out); } .masthead__home:hover .dot { transform: scale(1.5); } .masthead__home .unit { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-mono); letter-spacing: 0.16em; color: var(--paper-42); } .masthead__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); } .masthead__link { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-62); transition: color var(--dur-fast) var(--ease-out); } .masthead__link:hover { color: var(--paper); } .masthead__call { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.08em; white-space: nowrap; transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .masthead__call .pip { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); animation: pip 2.4s var(--ease-io) infinite; } .masthead__call:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); } @keyframes pip { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-glow); } 50% { opacity: 0.7; box-shadow: 0 0 0 5px transparent; } } @media (max-width: 720px) { .masthead__nav .masthead__link { display: none; } } /* On the narrowest phones the service name and the phone pill cannot both sit on the bar. The phone number is the one that has to survive. */ @media (max-width: 400px) { .masthead__home .unit, .masthead__home .dot { display: none; } } /* -------------------------------------------------------------------------- 9. Footer -------------------------------------------------------------------------- */ .footer { position: relative; border-top: 1px solid var(--hair-soft); background: var(--void); padding-block: clamp(3rem, 5vw, 5rem) 2rem; } .footer__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; } @media (min-width: 860px) { .footer__grid { grid-template-columns: 1.1fr 1fr; align-items: start; } } .footer__pitch { max-width: 34ch; } .footer__pitch p { margin-top: 1rem; color: var(--paper-62); font-size: var(--t-small); } /* Sibling-business cross links */ .switch { display: grid; gap: 0.5rem; } .switch__head { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-42); margin-bottom: 0.5rem; } .switch__item { --sw: var(--paper); position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0.25rem 1rem 0; border-top: 1px solid var(--hair-soft); overflow: hidden; } .switch__item:last-child { border-bottom: 1px solid var(--hair-soft); } .switch__item[data-for="removals"] { --sw: var(--c-removals); } .switch__item[data-for="drone"] { --sw: var(--c-drone); } .switch__item[data-for="erg"] { --sw: var(--c-erg); } .switch__item::before { content: ""; position: absolute; left: -0.75rem; right: -0.75rem; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--sw) 10%, transparent), transparent 70%); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); } .switch__item:hover::before { opacity: 1; } .switch__name { position: relative; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; text-transform: uppercase; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .switch__item:hover .switch__name { color: var(--sw); transform: translateX(6px); } .switch__what { position: relative; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-42); text-align: right; } .switch__item[aria-current="page"] { opacity: 0.42; pointer-events: none; } .footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--hair-soft); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.08em; color: var(--paper-42); } .footer__base a:hover { color: var(--paper); } /* -------------------------------------------------------------------------- 10. Motion preferences -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .grain { animation: none; } .reveal { opacity: 1; transform: none; } .pull-up .word > span { transform: none; opacity: 1; } }