/* justbeuseful: colours and marks follow /brand (brand kit). */ @font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } :root { /* Brand colours */ --coral: #FF5D5D; --amber: #FFB21E; --teal: #13B5A4; --slate: #56637A; --slate-light: #8591A6; --brand-ink: #1F2430; /* Light theme */ --paper: #FAF9F6; --surface: #FFFFFF; --ink: #1F2430; --text: #1F2430; --text-2: #3D4250; --muted: #5F6370; --line: #E4E1D9; --line-strong: #CCC8BE; --handle: var(--slate); --logo-ink: var(--brand-ink); /* Closing band: always dark, in brand ink */ --night: var(--brand-ink); --night-text: #FFFFFF; --night-muted: #AEB4C2; --night-line: rgb(255 255 255 / 0.12); --wrap: 1120px; --gutter: clamp(20px, 5vw, 40px); --section: clamp(72px, 10vw, 128px); --ease: cubic-bezier(0.2, 0.8, 0.2, 1); color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --paper: #13151A; --surface: #1A1D24; --ink: #F2F1EC; --text: #ECECE8; --text-2: #C9CAD0; --muted: #A0A3AD; --line: #2A2E38; --line-strong: #3B404C; --handle: var(--slate-light); --logo-ink: #FFFFFF; } } /* Language: both versions live in the page; the decides which one shows. */ html[lang="es"] [lang="en"], html:not([lang="es"]) [lang="es"] { display: none !important; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* The sticky header's height, so an in-page link doesn't land under it. */ scroll-padding-top: 81px; } body { margin: 0; background: var(--paper); color: var(--text); font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; } .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; top: -100px; left: 12px; z-index: 10; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 650; text-decoration: none; } .skip:focus { top: 12px; } /* Logo: the wordmark takes currentColor, the handle takes --handle. The rivet stays white. */ .logo { width: 156px; height: auto; color: var(--logo-ink); } .handle { fill: var(--handle); } /* Header: it stays at the top of the screen, and a thin copy of the footer's stripe keeps it apart from the page scrolling under it. */ .site-header { position: sticky; top: 0; z-index: 5; padding-block: 22px; border-bottom: 3px solid; border-image: linear-gradient(to right, var(--coral) 0 25%, var(--amber) 25% 50%, var(--teal) 50% 75%, var(--handle) 75% 100%) 1; background: var(--paper); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .home-link { display: inline-flex; border-radius: 6px; } .nav { display: flex; align-items: center; gap: 32px; } .nav-links { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; } .nav-links a { color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--text); } .lang { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .lang button { padding: 7px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; cursor: pointer; transition: color 0.2s, background-color 0.2s; } .lang button:hover { color: var(--text); } .lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } html:not(.js) .lang { display: none; } /* Buttons: fully rounded, like the bars */ .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 999px; font-size: 16px; font-weight: 650; line-height: 1.2; text-decoration: none; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.25s var(--ease); } .btn:hover .go { transform: translateX(3px); } .btn:hover .out { transform: translate(2px, -2px); } .btn:hover .down { transform: translateY(3px); } .btn-primary { background: var(--ink); color: var(--paper); } .btn-primary:hover { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); } .btn-ghost { border-color: var(--line-strong); color: var(--text); } .btn-ghost:hover { border-color: var(--text); } .btn-light { background: #FFFFFF; color: var(--brand-ink); } .btn-light:hover { background: #E9EAEE; } /* Hero */ .hero { padding-block: clamp(40px, 8vw, 112px) var(--section); } .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 72px); } .hero h1 { margin: 0; font-size: clamp(2.75rem, 1.1rem + 5.6vw, 5.5rem); font-weight: 760; line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; } /* The Spanish line is twice as long: smaller, so it still sets in two lines. */ html[lang="es"] .hero h1 { font-size: clamp(2.25rem, 0.25rem + 5vw, 4.25rem); } /* Keeps a phrase on one line while it fits, and lets it wrap when it doesn't. */ .keep { display: inline-block; } .lead { max-width: 36ch; margin: 28px 0 0; color: var(--text-2); font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.55; } .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .hero-mark { justify-self: end; width: clamp(200px, 24vw, 320px); height: auto; } /* The fan opens once, around the rivet, and ends exactly on the brand angles. */ .hero-mark .bar { transform-box: view-box; transform-origin: 0 0; } @media (prefers-reduced-motion: no-preference) { .hero-mark .bar { animation: unfold 1.2s var(--ease) 0.25s backwards; } } @keyframes unfold { from { transform: rotate(0deg); } to { transform: rotate(var(--angle)); } } /* Sections */ .section { padding-block: var(--section); border-top: 1px solid var(--line); } .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } /* The grey bar is the handle: it marks what belongs to justbeuseful. */ .eyebrow::before { content: ""; width: 26px; height: 8px; border-radius: 999px; background: var(--handle); } h2 { margin: 0; font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem); font-weight: 740; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; } .section-head { max-width: 760px; margin-bottom: clamp(44px, 6vw, 72px); } .section-head p:not(.eyebrow) { max-width: 50ch; margin: 20px 0 0; color: var(--text-2); font-size: 19px; } /* Scroll reveal: below the hero, each part marked data-reveal slides in the first time it comes into view, from the side its section names. site.js marks the page .reveal before it starts watching, so without the script nothing is held back, and gives each part .is-in as it arrives. */ .from-right { --reveal-from: 64px 0; } .from-left { --reveal-from: -64px 0; } .from-below { --reveal-from: 0 48px; } /* A part still out to one side never makes the page scroll sideways. */ main { overflow-x: clip; } @media screen and (prefers-reduced-motion: no-preference) { .reveal [data-reveal]:not(.is-in) { opacity: 0; } .reveal [data-reveal].is-in { animation: reveal 0.9s var(--ease) var(--reveal-delay, 0s) backwards; } } @keyframes reveal { from { opacity: 0; translate: var(--reveal-from); } } /* Principles */ .rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 56px); margin: 0; padding: 0; list-style: none; } .rule { position: relative; padding-top: 36px; border-top: 2px solid var(--line); } /* Each rule rests on its line like a tool bar in its colour. */ .rule::before { content: ""; position: absolute; top: -7px; left: 0; width: 48px; height: 12px; border-radius: 999px; background: var(--tool); } .rule h3 { margin: 0 0 12px; font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); font-weight: 720; line-height: 1.15; letter-spacing: -0.02em; } .rule p { max-width: 34ch; margin: 0; color: var(--text-2); } /* Apps */ .apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* While there is a single live app, it takes two of the three columns. */ .apps:not(:has(.app-live ~ .app-live)) .app-live { grid-column: span 2; } .app { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); } .app-live { transition: border-color 0.2s, transform 0.3s var(--ease); } .app-live:hover { border-color: var(--line-strong); transform: translateY(-3px); } .app-live:focus-within { border-color: var(--text); } .app-live:hover .btn-primary { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); } .app-live:hover .go { transform: translateX(3px); } .app-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .app-icon { width: 60px; height: 60px; } .status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); font-size: 13px; font-weight: 650; } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgb(19 181 164 / 0.18); } .app-kicker { margin: 32px 0 6px; color: var(--muted); font-size: 15px; font-weight: 600; } .app h3 { margin: 0; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.625rem); font-weight: 760; line-height: 1.05; letter-spacing: -0.035em; } /* The whole card is the link. */ .app h3 a { text-decoration: none; } .app h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .app h3 a:focus-visible { outline: none; } .app-desc { max-width: 54ch; margin: 16px 0 0; color: var(--text-2); } .app-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 32px; } .app-foot .btn { min-height: 46px; padding: 0 20px; font-size: 15px; } .app-url { color: var(--muted); font-size: 15px; } .app-next { justify-content: flex-end; border: 1.5px dashed var(--line-strong); background: transparent; } /* An empty slot, waiting for the next tool. */ .slot { width: 96px; height: 20px; margin-bottom: auto; border: 2px dashed var(--line-strong); border-radius: 999px; } .app-next h3 { margin-top: 48px; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); letter-spacing: -0.025em; } .app-next p { margin: 10px 0 0; color: var(--muted); } /* Closing band: contact and footer, always on brand ink */ .closing { --handle: var(--slate-light); --logo-ink: #FFFFFF; --ink: #FFFFFF; background: var(--night); color: var(--night-text); } .contact { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; align-items: end; gap: 40px 64px; padding-block: var(--section) clamp(56px, 8vw, 96px); } .closing .eyebrow { color: var(--night-muted); } .contact p:not(.eyebrow) { max-width: 52ch; margin: 20px 0 0; color: var(--night-muted); font-size: 19px; } .linkedin svg { width: 20px; height: 20px; } .site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-block: 36px 44px; border-top: 1px solid var(--night-line); } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; } .footer-links a { color: var(--night-muted); font-size: 15px; font-weight: 600; text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--night-text); } .legal { margin: 0; color: var(--night-muted); font-size: 14px; } /* The four bar colours, as on the sharing image. */ .stripe { display: grid; grid-template-columns: repeat(4, 1fr); height: 8px; } .stripe span:nth-child(1) { background: var(--coral); } .stripe span:nth-child(2) { background: var(--amber); } .stripe span:nth-child(3) { background: var(--teal); } .stripe span:nth-child(4) { background: var(--slate); } /* Not found: fills the screen so the stripe sits at the bottom. */ .page-missing { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .missing { flex: 1; display: grid; align-content: center; justify-items: start; padding-block: var(--section); } .missing .hero-mark { justify-self: start; width: 120px; margin-bottom: 40px; } .missing h1 { margin: 0; font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); font-weight: 760; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; } /* Small screens */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero-art { order: -1; } .hero-mark { justify-self: start; width: 132px; } .hero h1 { font-size: clamp(2.75rem, 14vw, 5rem); } html[lang="es"] .hero h1 { font-size: clamp(2rem, 10.4vw, 3.5rem); } .rules, .apps, .contact { grid-template-columns: 1fr; } .apps:not(:has(.app-live ~ .app-live)) .app-live { grid-column: auto; } .contact { align-items: start; } .contact .btn { justify-self: start; } } @media (max-width: 720px) { .nav-links { display: none; } .logo { width: 140px; } .section-head p:not(.eyebrow), .contact p:not(.eyebrow) { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }