/* ========================================================================== Andrew Brandwood — self-contained stylesheet No external requests. No build step. Edit tokens below to retheme. ========================================================================== */ /* --- Fonts ------------------------------------------------------------- Loaded from Google Fonts in the of each page: Bricolage Grotesque display / headings Public Sans body copy IBM Plex Mono labels, eyebrows, tech tags To self-host instead (removes the external request), download the .woff2 files into a /fonts folder, delete the tags from the HTML, and uncomment the @font-face blocks below. @font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } ------------------------------------------------------------------------ */ /* --- Tokens ------------------------------------------------------------ */ :root { /* Colour — red sampled from the logo artwork */ --brand: #ad1818; --brand-dark: #8f1212; --brand-tint: #fbf2f2; --ink: #16161a; --graphite: #3f4147; --muted: #6b6f76; --rule: #e3e3e6; --mist: #f5f5f6; --paper: #ffffff; /* Logo paths — both set to brand red */ --logo-a: var(--brand); --logo-b: var(--brand); /* Type */ --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* Layout */ --page: 76rem; --gutter: 1.5rem; /* The A's stroke leans 31deg off vertical. Every accent mark matches it. */ --cut: skewX(-31deg); } /* --- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--paper); color: var(--graphite); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } ul { list-style: none; padding: 0; } a { color: inherit; } /* --- Type -------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; } h1 { font-size: clamp(2.35rem, 5.9vw, 4.5rem); font-weight: 800; line-height: 1.0; } h2 { font-size: clamp(1.8rem, 3.2vw, 2.65rem); font-weight: 700; } h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; } p { text-wrap: pretty; } .eyebrow { display: flex; align-items: center; gap: .75rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } .lead { font-size: 1.2rem; max-width: 56ch; } .small { font-size: .875rem; color: var(--muted); } /* --- Signature: the angled cut ----------------------------------------- */ .slash { flex: none; width: .3rem; height: .95rem; background: var(--brand); transform: var(--cut); } .cut-rule { width: 2.25rem; height: 3px; background: var(--brand); transform: var(--cut); } .cut-rule--wide { width: 3rem; } /* --- Logo -------------------------------------------------------------- */ .logo-a { fill: var(--logo-a); } .logo-b { fill: var(--logo-b); } .logo { height: 2rem; width: auto; } .logo--sm { height: 1.75rem; } /* --- Layout ------------------------------------------------------------ */ .wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: 5rem; border-bottom: 1px solid var(--rule); } @media (min-width: 768px) { .section { padding-block: 7rem; } } .section--mist { background: var(--mist); } .section--tint { background: var(--brand-tint); } .skip { position: absolute; left: 1rem; top: 1rem; z-index: 60; background: var(--ink); color: #fff; padding: .625rem 1rem; border-radius: 3px; text-decoration: none; } .skip:not(:focus) { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Header ------------------------------------------------------------ */ .header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); } .header__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: .875rem; } .header__brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; } .header__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); } .nav { display: none; margin-left: auto; gap: 2rem; } .nav a { font-size: .9375rem; text-decoration: none; transition: color .15s ease; } .nav a:hover { color: var(--brand); } @media (min-width: 768px) { .nav { display: flex; align-items: center; } } /* --- Buttons ----------------------------------------------------------- */ .btn { display: inline-block; padding: .875rem 1.5rem; border-radius: 3px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease; } .btn--primary { background: var(--brand); color: #fff; } .btn--primary:hover { background: var(--brand-dark); } .btn--ghost { border-color: var(--rule); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); } .btn--sm { padding: .5rem 1rem; font-size: .9375rem; } .header .btn--sm { margin-left: auto; } @media (min-width: 768px) { .header .btn--sm { margin-left: 0; } } /* --- Hero -------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); } .hero__inner { padding-top: 4rem; padding-bottom: 5rem; position: relative; } @media (min-width: 768px) { .hero__inner { padding-top: 6rem; padding-bottom: 7rem; } } .hero__mark { position: absolute; right: -6rem; top: 50%; transform: translateY(-50%); height: 130%; width: auto; opacity: .055; pointer-events: none; display: none; } @media (min-width: 1024px) { .hero__mark { display: block; } } .hero h1 { margin-top: 1.5rem; max-width: 20ch; } .hero .lead { margin-top: 1.75rem; color: var(--graphite); } @media (min-width: 768px) { .hero .lead { font-size: 1.3rem; } } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; } .stack { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--font-mono); font-size: .8rem; color: var(--muted); } /* --- Services ---------------------------------------------------------- */ .services__grid { margin-top: 3.5rem; display: grid; gap: 3rem; } @media (min-width: 768px) { .services__grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; } } .service h3 { margin-top: 1.25rem; } .service p { margin-top: .75rem; max-width: 46ch; } /* --- Work -------------------------------------------------------------- */ .work__list { margin-top: 3.5rem; border-top: 1px solid var(--rule); } .work__item { display: grid; gap: 1rem; padding-block: 2.25rem; border-bottom: 1px solid var(--rule); } @media (min-width: 768px) { .work__item { grid-template-columns: 15rem 1fr; column-gap: 2.5rem; } } .work__meta { margin-top: .25rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .work__meta--now { color: var(--brand); } .work__item p { max-width: 62ch; } .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .tags li { background: var(--mist); border-radius: 3px; padding: .25rem .5rem; font-family: var(--font-mono); font-size: .75rem; color: var(--muted); } .section--mist .tags li { background: var(--paper); } /* --- Quote ------------------------------------------------------------- */ .quote { max-width: 54ch; margin-inline: auto; } .quote blockquote { margin-top: 2rem; font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); } .quote figcaption { margin-top: 1.5rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); } /* --- About ------------------------------------------------------------- */ .about__grid { display: grid; gap: 3.5rem; } @media (min-width: 768px) { .about__grid { grid-template-columns: 1fr 1fr; column-gap: 5rem; } } .about h2 { margin-top: 1.25rem; max-width: 18ch; } .about__body p + p { margin-top: 1.25rem; } /* --- Contact ----------------------------------------------------------- */ .contact { background: var(--brand); color: #fff; border-bottom: 0; } .contact h2 { color: #fff; margin-top: 1.25rem; max-width: 20ch; } .contact .eyebrow { color: rgba(255, 255, 255, .85); } .contact p { color: rgba(255, 255, 255, .92); } .contact__grid { display: grid; gap: 3rem; } @media (min-width: 768px) { .contact__grid { grid-template-columns: 1fr auto; align-items: end; } } .contact__actions { display: flex; flex-direction: column; gap: .75rem; } .contact__actions .btn { text-align: center; padding: 1rem 1.5rem; font-size: 1.0625rem; } .btn--invert { background: #fff; color: var(--brand); } .btn--invert:hover { background: rgba(255, 255, 255, .9); } .btn--outline { border-color: rgba(255, 255, 255, .4); color: #fff; } .btn--outline:hover { border-color: #fff; } /* --- Footer ------------------------------------------------------------ */ .footer { border-top: 1px solid var(--rule); } .footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-block: 2rem; } .footer p { font-size: .875rem; color: var(--muted); } .footer__right { margin-left: auto; } .footer a { text-decoration: none; transition: color .15s ease; } .footer a:hover { color: var(--brand); } /* --- Accessibility & motion -------------------------------------------- */ :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 2px; } .contact :focus-visible { outline-color: #fff; } .reveal { opacity: 0; transform: translateY(14px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media print { .header, .hero__mark, .btn--ghost { display: none; } body { color: #000; } .section { border: 0; padding-block: 1.5rem; } }