/* ========================================================================== 24 Logos One theme (studio), pinned via data-theme on . ========================================================================== */ :root, [data-theme="studio"] { --bg: #0c0d0e; --surface: #141618; --line: #26292d; --line-strong: #3a3f45; --text: #f2f4f5; --muted: #9aa3ab; --accent: #e08a5c; --accent-2: #c25e3f; --accent-ink: #1a120d; --accent-grad: linear-gradient(135deg, #f0a06a 0%, #d97a4e 45%, #b95538 100%); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --heading-font: var(--font); --heading-weight: 800; --heading-tracking: -0.045em; --heading-case: none; --em-style: normal; --em-color: var(--accent); --radius: 14px; --btn-radius: 999px; --btn-bg: var(--accent); --btn-color: var(--accent-ink); --btn-border: transparent; --btn-case: none; --btn-tracking: 0; --btn-weight: 600; --card-bg: var(--surface); --card-border: 1px solid var(--line); --grid-gap: 14px; --grid-bg: transparent; --align: center; --hero-width: 100%; --label-font: var(--font); --label-size: 15px; --input-bg: var(--bg); --input-border: 1px solid var(--line); } /* Studio's terracotta gradient: buttons get the full ramp, accent text gets a clipped version so headings and numerals glow rather than flat-fill. */ [data-theme="studio"] .btn:not(.btn-ghost), :root:not([data-theme]) .btn:not(.btn-ghost) { background: var(--accent-grad); border-color: transparent; } [data-theme="studio"] h1 em, [data-theme="studio"] .brand b, [data-theme="studio"] .step .num, [data-theme="studio"] .mark .name span, [data-theme="studio"] .tag { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="studio"] .tag small { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--muted); } /* ========================================================================== Base ========================================================================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; /* Sticky footer: short pages (order, thanks, 404) push it to the bottom of the viewport instead of leaving it floating mid-screen. dvh keeps mobile browser chrome from overshooting. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); } h1, h2, h3 { font-family: var(--heading-font); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); text-transform: var(--heading-case); } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); } /* keep anchored sections (#work) from hiding under the fixed bar */ :target, section[id] { scroll-margin-top: 84px; } .site-header .wrap { display: flex; align-items: center; gap: 26px; min-height: 70px; } .brand { font-family: var(--heading-font); font-weight: var(--heading-weight); font-size: 22px; letter-spacing: var(--heading-tracking); text-decoration: none; margin-right: auto; } .brand b { color: var(--em-color); font-style: var(--em-style); font-weight: inherit; } .nav { display: flex; align-items: center; gap: 24px; font-size: 14px; } .nav a { color: var(--muted); text-decoration: none; } .nav a:hover { color: var(--text); } .btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--btn-border); border-radius: var(--btn-radius); padding: 11px 21px; font: inherit; font-size: 14px; font-weight: var(--btn-weight); letter-spacing: var(--btn-tracking); text-transform: var(--btn-case); text-decoration: none; cursor: pointer; background: var(--btn-bg); color: var(--btn-color); transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .btn:hover { filter: brightness(1.08); } .nav .btn { color: var(--btn-color); } .btn-lg { padding: 14px 27px; font-size: 15px; } .btn-xl { padding: 20px 44px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); } .btn-ghost:hover { filter: none; background: transparent; color: var(--text); border-color: var(--text); } /* ---------- hero ---------- */ .hero { padding: clamp(58px, 11vw, 124px) 0 clamp(44px, 8vw, 84px); text-align: var(--align); max-width: var(--hero-width); margin-inline: auto; } .eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; } h1 { margin: 0; font-size: clamp(38px, 6.6vw, 66px); line-height: 1.05; } h1 em { font-style: var(--em-style); color: var(--em-color); } .lede { margin: 22px 0 32px; color: var(--muted); font-size: 17px; max-width: 36em; } [data-theme="studio"] .lede { margin-inline: auto; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: var(--align); } .hero-note { margin-top: 18px; font-size: 13px; color: var(--muted); } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--grid-gap); background: var(--grid-bg); margin-bottom: clamp(52px, 9vw, 100px); } .step { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); padding: 28px 25px 32px; } /* Big numerals, like the 2011 site — the "it's that easy" is the number */ .step .num { font-family: var(--heading-font); font-size: clamp(56px, 7vw, 84px); font-weight: var(--heading-weight); line-height: 1; letter-spacing: var(--heading-tracking); color: var(--muted); opacity: 0.55; margin-bottom: 14px; } [data-theme="studio"] .step .num { color: var(--accent); opacity: 0.9; } .step h3 { margin: 0 0 8px; font-size: 20px; } .step p { margin: 0; color: var(--muted); font-size: 15px; } /* ---------- gallery ---------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line); } .section-head h2 { margin: 0; font-size: clamp(24px, 3.6vw, 34px); } .section-head p { margin: 0; color: var(--muted); font-size: 13px; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--grid-gap); background: var(--grid-bg); margin-bottom: clamp(52px, 9vw, 100px); } /* Phones: two columns, or 24 tiles become a 7000px single-file scroll */ @media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } .mark { padding: 14px; } .mark .name { font-size: 15px; } .mark .sub { font-size: 9px; } } .mark { aspect-ratio: 5 / 4; display: grid; place-items: center; text-align: center; padding: 22px; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); transition: border-color 0.15s ease, transform 0.15s ease, filter 0.35s ease; /* Whole grid reads monochrome; colour arrives on hover. Sits on the tile rather than the img so it catches the text tiles' accents too, and composes over the .mark-lite invert without fighting it. */ filter: grayscale(1); } .mark:hover { transform: translateY(-2px); filter: grayscale(0); } /* The joker tile: a CTA wearing the gallery's clothes, not another client mark. Solid gradient fill at all times — it should read as an ad for the product, not as a logo waiting for its hover-colour. */ .mark-joker { filter: none; text-decoration: none; cursor: pointer; background: var(--accent-grad, var(--accent)); border: none; gap: 10px; transition: transform 0.15s ease, filter 0.15s ease; } .mark-joker .name { color: var(--accent-ink); font-weight: 800; } .mark-joker .cta { display: inline-block; margin-top: 10px; padding: 8px 20px; border-radius: 999px; background: var(--accent-ink); color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .mark-joker:hover { transform: translateY(-2px); filter: brightness(1.06); } @media (hover: none) { .mark-joker { filter: none; } } /* No hover on touch, so phones would never see the colour — show it always */ @media (hover: none) { .mark { filter: grayscale(0); } } .mark .name { font-size: clamp(18px, 2.3vw, 22px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .mark .name span { color: var(--em-color); } .mark .sub { margin-top: 8px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* Image tiles. The source files are wide black canvases with the mark centred and a caption in the corners — cover-cropping to the tile keeps the mark and drops their built-in labels, so the caption below is the only one. */ .mark-img { position: relative; overflow: hidden; margin: 0; padding: 0; display: block; background: #000; } .mark-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); /* the marks sit small on a lot of empty canvas */ } /* Wide wordmarks already on black: contain so the lettering never crops, but no inversion — they're light-on-dark as supplied. */ .mark-img.mark-fit img { object-fit: contain; /* Contain leaves these width-limited on a 2:1 canvas, and the mark only fills part of that — scale up to match the weight of the square marks. Stays under the crop threshold of the widest of them (Finyal). */ transform: scale(1.85); padding: 10px; } /* Colour logos supplied on white. Wordmarks, so contain (never crop the lettering), and invert+hue-rotate to sit on the same black tile as the rest: that flips lightness (white canvas -> black, dark text -> light) while the 180deg rotation puts the hues back where they started. */ .mark-img.mark-lite img { object-fit: contain; transform: none; padding: 8px; /* Contrast/brightness live here rather than on the tile so they only shape the monochrome state — a mid-green desaturates to mud otherwise, and this drives it to real white. The hover rule drops them and colour returns. */ filter: invert(1) hue-rotate(180deg) contrast(2.2) brightness(1.3); } .mark-lite:hover img { filter: invert(1) hue-rotate(180deg); } /* Sits small next to the others — its source carries more empty canvas */ .mark-lite img[src*="startupflair"] { transform: scale(1.1); } /* ---------- pricing ---------- */ .price { display: grid; gap: 34px; grid-template-columns: 1fr; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); padding: clamp(28px, 5vw, 48px); margin-bottom: clamp(52px, 9vw, 100px); } @media (min-width: 780px) { .price { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } } .rule { display: none; } .tag { display: flex; align-items: baseline; gap: 10px; font-family: var(--heading-font); font-weight: var(--heading-weight); font-size: clamp(48px, 8vw, 78px); line-height: 1; letter-spacing: var(--heading-tracking); } .tag small { font-family: var(--font); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .price h2 { margin: 0 0 10px; font-size: 24px; } .price > div > p { margin: 0 0 24px; color: var(--muted); font-size: 15px; } .includes { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .includes li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } /* terracotta check chip, same ramp as the buttons */ .includes li::before { content: ""; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: url('data:image/svg+xml;utf8,') center / 14px no-repeat, var(--accent-grad, var(--accent)); } /* ---------- form ---------- */ .form-page { padding-block: clamp(48px, 7vw, 88px) clamp(20px, 3vw, 28px); } .form-page .hero-note { margin-top: 14px; } /* Pulls the CTA up under the cards so the whole page, footer included, fits a standard viewport without a stub scroll. */ .form-page .steps { margin-bottom: clamp(32px, 4vw, 52px); } /* Thanks page: the clock is, in fact, running. Comically fast. */ .clock { width: clamp(88px, 11vw, 120px); margin: 0 auto 30px; display: block; } .clock svg { width: 100%; height: auto; display: block; } .clock-face { fill: none; stroke: var(--line-strong); stroke-width: 4; } .clock-pin { fill: var(--accent); } .clock .hand { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transform-origin: 50px 50px; } .clock .minute { animation: clock-spin 1.1s linear infinite; } .clock .hour { stroke-width: 6.5; animation: clock-spin 9s linear infinite; } @keyframes clock-spin { to { transform: rotate(360deg); } } /* Wide enough that the headline holds one line and the lede holds two — keeps the three steps above the fold. */ .form-intro { max-width: 46em; text-align: var(--align); margin-inline: auto; margin-bottom: 42px; } .form-intro h1 { font-size: clamp(30px, 5vw, 48px); } .form-intro p { color: var(--muted); margin: 16px auto 0; max-width: 40em; } form.brief { display: grid; gap: 26px; grid-template-columns: 1fr; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); } @media (min-width: 720px) { form.brief { grid-template-columns: 1fr 1fr; column-gap: 36px; } form.brief .full { grid-column: 1 / -1; } } .field label { display: block; font-family: var(--label-font); font-size: var(--label-size); font-weight: 600; margin-bottom: 4px; } .field .hint { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; } .field input, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--input-bg); border: var(--input-border); border-radius: var(--radius); padding: 12px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field textarea { min-height: 124px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 28%, var(--bg)); } .submit-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .submit-row .fine { font-size: 13px; color: var(--muted); margin: 0; } .notice { display: none; border: 1px solid var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 9%, transparent); padding: 13px 16px; margin-bottom: 30px; font-size: 15px; } .notice.show { display: block; } /* ---------- footer ---------- */ .site-footer { margin-top: auto; /* takes up the slack on short pages */ border-top: 1px solid var(--line); padding: 26px 0; color: var(--muted); font-size: 13px; } .site-footer .wrap { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--text); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } .clock .hand { animation: none !important; } }