/* ============================================================ Storage Unit Clean-Outs — styles Plain CSS, no build step. Design tokens live in :root below. Direction: freight / dispatch-ticket. Anton + Archivo + JetBrains Mono. ============================================================ */ /* ---------- Fonts (self-hosted) ---------- Served from our own origin instead of fonts.googleapis.com. The hosted version costs a serialised three-hop chain — HTML, then Google's CSS, then the woff2 — across two extra DNS/TLS handshakes, all of it blocking first paint. Archivo and JetBrains Mono are variable fonts, so one file each covers every weight we use (9 files down to 3). Latin subset only; glyphs outside it fall back per-character, which is why no unicode-range descriptor is needed. Anton + Archivo are preloaded in the — they paint the LCP text. */ @font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/anton-latin.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/archivo-latin.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/jetbrains-latin.woff2") format("woff2"); } :root { /* Brand palette (from the business card) */ --ink: #0E0E0E; /* near-black base */ --ink-2: #171716; /* raised panels on black */ --ink-3: #201F1D; /* hover panels on black */ --lime: #83BF3F; /* brand green */ --lime-2: #9BD64A; /* brighter hover / highlight */ --lime-deep: #5E9E2E; /* pressed / shadow green */ --lime-ink: #10200A; /* text on lime */ --paper: #F2F0EA; /* cream section (card back) */ --paper-2: #E7E4DA; /* cream card surface */ --paper-ink: #16150F; /* text on cream */ --white: #FFFFFF; --steel: #A9ADA2; /* muted text on dark */ --steel-2: #6C6F66; /* muted text on cream */ --line-d: rgba(255,255,255,.12); /* hairline on dark */ --line-l: rgba(20,20,15,.14); /* hairline on cream */ --r: 10px; --r-sm: 6px; --container: 1160px; --font-display: "Anton", system-ui, "Arial Narrow", sans-serif; --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--white); background: var(--ink); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } h1, h2, h3 { margin: 0; line-height: 1.02; } p { margin: 0; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 3px solid var(--lime-2); outline-offset: 3px; border-radius: 3px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; } .skip-link { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); background: var(--lime); color: var(--lime-ink); font-weight: 700; padding: .6rem 1rem; border-radius: 0 0 var(--r) var(--r); z-index: 200; transition: top .15s ease; } .skip-link:focus { top: 0; } /* ---------- Shared type helpers ---------- */ .eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); display: inline-flex; align-items: center; gap: .55rem; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--lime); display: inline-block; } .eyebrow--dark { color: var(--lime-deep); } .eyebrow--dark::before { background: var(--lime-deep); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-body); font-weight: 700; font-size: .98rem; letter-spacing: .04em; text-transform: uppercase; padding: .95rem 1.5rem; border-radius: var(--r); border: 2px solid transparent; background: var(--lime); color: var(--lime-ink); cursor: pointer; min-height: 52px; transition: transform .12s ease, background .15s ease, box-shadow .15s ease; white-space: nowrap; word-spacing: .12em; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn .ico { width: 20px; height: 20px; flex: none; } .btn--primary { background: var(--lime); color: var(--lime-ink); box-shadow: 0 6px 0 var(--lime-deep); } .btn--primary:hover { background: var(--lime-2); box-shadow: 0 8px 0 var(--lime-deep); } .btn--primary:active { box-shadow: 0 2px 0 var(--lime-deep); } .btn--ghost { background: transparent; color: var(--white); border-color: var(--line-d); } .btn--ghost:hover { border-color: var(--lime); color: var(--lime); } .btn--onlight { background: var(--ink); color: var(--white); } .btn--onlight:hover { background: #000; } .btn--ghost-dark { background: transparent; color: var(--paper-ink); border-color: var(--line-l); } .btn--ghost-dark:hover { border-color: var(--lime-deep); color: var(--lime-deep); } .btn--sm { padding: .6rem 1rem; min-height: 44px; font-size: .82rem; } /* ---------- Promo bar ---------- */ .promo { background: var(--lime); color: var(--lime-ink); font-family: var(--font-mono); font-weight: 500; font-size: .82rem; letter-spacing: .02em; text-align: center; padding: .55rem 1rem; } .promo strong { font-weight: 700; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--ink) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background .2s ease; } .site-header.is-scrolled { border-bottom-color: var(--line-d); background: color-mix(in srgb, var(--ink) 94%, transparent); } /* backdrop-filter makes the compositor re-blur everything behind the sticky header on every scroll frame — a real cost on low-end Android phones, buying a blur that is all but invisible against an almost-black page. Drop it on small screens and lean on a more opaque background instead; desktop keeps it. */ @media (max-width: 859px) { .site-header { backdrop-filter: none; background: color-mix(in srgb, var(--ink) 97%, transparent); } .site-header.is-scrolled { background: var(--ink); } } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; } .brand { display: inline-flex; align-items: center; gap: .6rem; } .brand-mark { width: 34px; height: 34px; flex: none; } .brand-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .015em; font-size: 1.18rem; line-height: .92; color: var(--white); } .brand-name b { color: var(--lime); font-weight: 400; } .nav { display: none; gap: 1.75rem; } .nav a { font-size: .9rem; font-weight: 600; color: var(--steel); letter-spacing: .01em; position: relative; padding: .25rem 0; } .nav a:hover { color: var(--white); } .nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--lime); transition: width .18s ease; } .nav a:hover::after { width: 100%; } .header-cta { display: none; } @media (min-width: 860px) { .nav { display: flex; } .header-cta { display: inline-flex; } } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(2.75rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); } .hero::before { /* faint diagonal load-lines */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(-58deg, transparent 0 38px, rgba(131,191,63,.05) 38px 40px); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); } .hero-grid { position: relative; display: grid; gap: 2.5rem; } .hero h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.8rem, 11vw, 5.6rem); letter-spacing: .005em; margin: 1.1rem 0 0; } .hero h1 .lime { color: var(--lime); } .hero .lede { font-size: clamp(1.05rem, 2.4vw, 1.28rem); color: var(--steel); max-width: 46ch; margin-top: 1.35rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; } /* min-width stops the three CTAs squishing into two-line labels at narrow widths — they wrap to the next row at full size instead, so every button keeps the same height. */ .hero-actions .btn { flex: 1 1 auto; min-width: max-content; } .callnote { font-family: var(--font-mono); font-size: .78rem; color: var(--steel); margin-top: 1rem; letter-spacing: .02em; } /* trust chips */ .chips { display: flex; flex-wrap: wrap; gap: .5rem .55rem; margin-top: 2.25rem; } .chip { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--white); border: 1px solid var(--line-d); border-radius: 999px; padding: .4rem .8rem; display: inline-flex; align-items: center; gap: .4rem; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); } /* dispatch-ticket card (desktop companion) */ .ticket { background: var(--ink-2); border: 1px solid var(--line-d); border-radius: var(--r); overflow: hidden; align-self: start; } .ticket-top { background: var(--lime); color: var(--lime-ink); padding: .7rem 1.1rem; font-family: var(--font-mono); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; } .ticket-rows { padding: .35rem 1.1rem 1.1rem; } .ticket-row { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px dashed var(--line-d); } .ticket-row:last-child { border-bottom: 0; } .ticket-row .k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); } .ticket-row .v { font-weight: 700; text-align: right; } .ticket-row .v a:hover { color: var(--lime); } @media (min-width: 960px) { .hero-grid { grid-template-columns: 1.35fr .9fr; align-items: center; gap: 3.5rem; } } /* ---------- Wedge divider (signature) ---------- */ .wedge { height: 46px; background: var(--lime); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 34%); } /* ---------- Benefits strip (lime band) ---------- */ .strip { background: var(--lime); color: var(--lime-ink); padding: clamp(1.5rem, 4vw, 2.25rem) 0; } .strip-list { display: grid; grid-template-columns: 1fr; gap: .85rem 1.5rem; list-style: none; margin: 0; padding: 0; } .strip-list li { display: flex; align-items: center; gap: .7rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; } .strip-list .ico { width: 22px; height: 22px; flex: none; } @media (min-width: 620px) { .strip-list { grid-template-columns: 1fr 1fr; } } @media (min-width: 940px) { .strip-list { grid-template-columns: repeat(3, 1fr); } } /* ---------- Generic section ---------- */ .section { padding: clamp(3.25rem, 8vw, 5.5rem) 0; } /* Anchor targets clear the 69px sticky header instead of scrolling under it — applies to every nav jump (#services, #how, #book, #contact, #faq). */ section[id] { scroll-margin-top: 84px; } .section-head { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .section-head h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem, 6vw, 3.1rem); letter-spacing: .01em; margin-top: .9rem; } .section-head p { margin-top: .9rem; font-size: 1.08rem; } .on-paper { background: var(--paper); color: var(--paper-ink); } .on-paper .section-head p { color: var(--steel-2); } .on-ink { background: var(--ink); color: var(--white); } .on-ink .section-head p { color: var(--steel); } /* ---------- Services ---------- */ .svc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .svc-card { background: var(--white); border: 1px solid var(--line-l); border-radius: var(--r); padding: 1.4rem 1.4rem 1.5rem; position: relative; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .svc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.10); border-color: var(--lime); } .svc-ico { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--lime); color: var(--lime-ink); display: grid; place-items: center; margin-bottom: 1rem; } .svc-ico .ico { width: 26px; height: 26px; } .svc-card h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.16rem; letter-spacing: -.01em; line-height: 1.15; } .svc-card p { margin-top: .5rem; color: var(--steel-2); font-size: .98rem; } @media (min-width: 680px) { .svc-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- How it works (numbered sequence) ---------- */ .steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .step { position: relative; background: var(--ink-2); border: 1px solid var(--line-d); border-radius: var(--r); padding: 1.6rem 1.5rem 1.6rem; } .step-num { font-family: var(--font-display); font-size: 2.4rem; color: var(--lime); line-height: 1; display: block; margin-bottom: .6rem; } .step h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.22rem; } .step p { margin-top: .5rem; color: var(--steel); } .step .paylist { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem; } .paytag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line-d); border-radius: 999px; padding: .3rem .7rem; color: var(--white); } @media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } } /* connector arrows between steps on desktop */ @media (min-width: 820px) { .step:not(:last-child)::after { content: "→"; position: absolute; right: -1.05rem; top: 50%; transform: translateY(-50%); color: var(--lime); font-size: 1.4rem; font-weight: 700; z-index: 2; } } /* ---------- Booking ---------- */ .book-wrap { display: grid; gap: 2rem; } .book-embed { background: var(--white); border: 1px solid var(--line-l); border-radius: var(--r); min-height: 560px; overflow: hidden; position: relative; } .book-fallback { padding: clamp(2rem, 5vw, 3rem); text-align: center; display: grid; place-items: center; gap: 1rem; min-height: 560px; } .book-fallback h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.5rem; color: var(--paper-ink); } .book-fallback p { color: var(--steel-2); max-width: 40ch; } .book-fallback .fallback-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .5rem; } .book-aside { display: grid; gap: 1.25rem; align-content: start; } .book-note { background: var(--paper-2); border: 1px solid var(--line-l); border-radius: var(--r); padding: 1.4rem; } .book-note h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.12rem; color: var(--paper-ink); } .book-note p { color: var(--steel-2); margin-top: .5rem; font-size: .96rem; } .pay-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .pay-badge { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; background: var(--white); border: 1px solid var(--line-l); border-radius: var(--r-sm); padding: .45rem .7rem; color: var(--paper-ink); } @media (min-width: 1000px) { .book-wrap { grid-template-columns: 1.6fr 1fr; align-items: start; } } /* ---------- Contact ---------- */ .contact-grid { display: grid; gap: 1rem; } .contact-card { background: var(--ink-2); border: 1px solid var(--line-d); border-radius: var(--r); padding: 1.5rem; display: flex; align-items: center; gap: 1rem; transition: border-color .16s ease, background .16s ease, transform .16s ease; } .contact-card:hover { border-color: var(--lime); background: var(--ink-3); transform: translateY(-3px); } .contact-ico { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--lime); color: var(--lime-ink); display: grid; place-items: center; flex: none; } .contact-ico .ico { width: 26px; height: 26px; } .contact-card .k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); } .contact-card .v { font-weight: 800; font-size: 1.18rem; margin-top: .15rem; } .contact-phone-actions { display: flex; gap: .5rem; margin-top: .55rem; } @media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } .contact-card { flex-direction: column; align-items: flex-start; text-align: left; } } /* ---------- Contact form ---------- */ .contact-form-wrap { margin-top: 2.5rem; background: var(--ink-2); border: 1px solid var(--line-d); border-radius: var(--r); padding: clamp(1.5rem, 4vw, 2.25rem); } .form-title { font-family: var(--font-body); font-weight: 800; font-size: 1.4rem; } .form-sub { color: var(--steel); margin-top: .45rem; max-width: 54ch; } .contact-form { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } @media (min-width: 640px) { .contact-form { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } } .field { display: flex; flex-direction: column; gap: .4rem; } .field label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); } .field .opt { text-transform: none; letter-spacing: 0; color: var(--steel-2); } .contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-body); font-size: 1rem; color: var(--white); background: var(--ink-3); border: 1px solid var(--line-d); border-radius: var(--r-sm); padding: .8rem .9rem; width: 100%; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--steel-2); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 30%, transparent); } .contact-form textarea { resize: vertical; min-height: 110px; } .form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .form-status { font-family: var(--font-mono); font-size: .82rem; margin: 0; } .form-status.is-error { color: #FF8F7A; } .form-status.is-ok { color: var(--lime); } .form-success { padding: .5rem 0; } .form-success:focus { outline: none; } /* Honeypot — off-screen, never shown to humans or assistive tech. */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ---------- Footer ---------- */ .site-footer { background: #0A0A09; border-top: 1px solid var(--line-d); padding: 2.75rem 0 6.5rem; color: var(--steel); font-size: .9rem; } .footer-inner { display: grid; gap: 1.5rem; } .footer-brand { display: inline-flex; align-items: center; gap: .55rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer-links a:hover { color: var(--lime); } /* --steel-2 is the muted tone for CREAM sections; on the near-black footer it only reaches 3.87:1 and fails WCAG AA for body text. --steel is the dark- background equivalent and clears it comfortably. */ .footer-legal { color: var(--steel); } /* Underlined, not just recoloured: at .9rem the link/text colour difference is 2.23:1, well under the 3:1 needed for colour to carry meaning on its own. */ .footer-legal a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; } .footer-legal a:hover { color: var(--lime); } @media (min-width: 760px) { .footer-inner { grid-template-columns: 1fr auto; align-items: center; } } /* ---------- Mobile sticky action bar ---------- */ .mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line-d); border-top: 1px solid var(--line-d); padding-bottom: env(safe-area-inset-bottom, 0); } .mobilebar a { background: var(--ink-2); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .7rem .4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; min-height: 58px; } .mobilebar a .ico { width: 20px; height: 20px; } .mobilebar a.book { background: var(--lime); color: var(--lime-ink); font-weight: 700; } .mobilebar a:active { filter: brightness(.9); } @media (min-width: 860px) { .mobilebar { display: none; } .site-footer { padding-bottom: 2.75rem; } } /* ---------- FAQ ---------- Built on
/: keyboard- and screen-reader-native, works with JS off, and every answer stays in the DOM so crawlers and answer engines can read it whether or not it is expanded. */ /* FAQ is the one section that reads better centred: the list is a narrow column, so left-hugging it leaves a lopsided gap on wide screens. Centring is on the blocks only — question and answer text stay left-aligned, because centred paragraphs are hard to read and a centred would fight the chevron. */ #faq .section-head { margin-inline: auto; text-align: center; } .faq-list { display: grid; gap: .75rem; max-width: 80ch; margin-inline: auto; } .faq-item { background: var(--white); border: 1px solid var(--line-l); border-radius: var(--r); overflow: hidden; transition: border-color .16s ease; } .faq-item[open] { border-color: var(--lime); } .faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 3.25rem 1.1rem 1.3rem; position: relative; font-weight: 800; font-size: 1.06rem; line-height: 1.3; letter-spacing: -.01em; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { background: var(--paper-2); } .faq-item summary::after { content: ""; position: absolute; right: 1.4rem; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2.5px solid var(--lime-deep); border-bottom: 2.5px solid var(--lime-deep); transform: rotate(45deg); transition: transform .18s ease; } .faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq-answer { padding: 0 1.3rem 1.3rem; color: var(--steel-2); } .faq-answer a { color: var(--lime-deep); text-decoration: underline; font-weight: 600; } /* ---------- Scroll reveal (progressive enhancement) ---------- */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .js .reveal { opacity: 1; transform: none; } }