/* ========================================================================== SemiClip — shared stylesheet Mobile-first. Shared by index, how-it-works, work-with-us, success. Themes are driven by [data-theme] on . Black is the default. Monochrome. No gradients, no atmosphere layer, no accent hue. Contrast is the only colour device: scale, weight, and full inversion. ========================================================================== */ :root[data-theme="dark"], :root:not([data-theme]) { color-scheme: dark; --bg: #0a0a0a; --surface: #131313; --text: #f7f7f7; --muted: #8b8b8b; --line: #2a2a2a; --line-soft: #1c1c1c; --grain-opacity: 0.028; } :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --surface: #f2f2f2; --text: #0a0a0a; --muted: #6e6e6e; --line: #dcdcdc; --line-soft: #ebebeb; --grain-opacity: 0.02; } /* -------------------------------------------------------------------------- Static tokens -------------------------------------------------------------------------- */ :root { --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --size-hero: clamp(2.75rem, 7vw, 5.75rem); --size-section: clamp(1.875rem, 4vw, 3rem); --size-block: clamp(1.375rem, 2.2vw, 1.75rem); --size-label: 0.6875rem; --container: 1180px; --section-y: 6rem; --gutter: 1.25rem; --header-h: 4.75rem; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); interpolate-size: allow-keywords; } @media (min-width: 48em) { :root { --section-y: 9rem; --gutter: 2.5rem; --header-h: 5.5rem; } } @media (min-width: 75em) { :root { --section-y: 11rem; --gutter: 3.5rem; } } /* -------------------------------------------------------------------------- Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background-color: var(--bg); transition: background-color 350ms var(--ease); } body, h1, h2, h3, p, figure, blockquote, ul, ol, li { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ body { background-color: transparent; color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; font-weight: 400; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: color 350ms var(--ease); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.025em; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--ruled { border-top: 1px solid var(--line); } /* Full contrast flip. In a monochrome system this is the loudest device available, and it is the reason the page can pop without a colour. */ .invert { background-color: var(--text); color: var(--bg); } .invert .label, .invert .index { color: var(--bg); opacity: 0.6; } .label { display: block; font-family: var(--font-body); font-size: var(--size-label); font-weight: 500; line-height: 1; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); } .index { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); } .skip-link { position: absolute; left: -9999px; top: 0; padding: 0.75rem 1.25rem; background-color: var(--text); color: var(--bg); font-size: 0.875rem; z-index: 30; } .skip-link:focus { left: 0; } .wordmark { display: block; aspect-ratio: 785 / 248; background-color: currentColor; -webkit-mask: url("assets/semiclip-wordmark-cream.svg") center / contain no-repeat; mask: url("assets/semiclip-wordmark-cream.svg") center / contain no-repeat; } /* -------------------------------------------------------------------------- Arrow — the one repeated graphic mark -------------------------------------------------------------------------- */ .arrow { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 220ms var(--ease); } /* A large standalone arrow used as a section mark. */ .arrow--display { width: clamp(3rem, 7vw, 5.5rem); height: clamp(3rem, 7vw, 5.5rem); } /* Points down. Baked into the mask rather than applied as a transform, since the scroll reveal owns `transform` on the same element. */ .arrow--down { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; gap: 0.75em; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border: 1.5px solid var(--text); border-radius: 999px; /* Tight enough that the two hero buttons stay side by side at 375px once the arrow is accounted for; opens up from 48em. */ padding: 1.0625rem 1.125rem; transition: background-color 200ms var(--ease), color 200ms var(--ease); } .button--filled { background-color: var(--text); color: var(--bg); } .button--filled:hover, .button--filled:focus-visible { background-color: transparent; color: var(--text); } .button--outline { background-color: transparent; color: var(--text); } .button--outline:hover, .button--outline:focus-visible { background-color: var(--text); color: var(--bg); } .button:hover .arrow, .button:focus-visible .arrow { transform: translateX(4px); } /* Inside an inverted band the roles swap. */ .invert .button { border-color: var(--bg); } .invert .button--filled { background-color: var(--bg); color: var(--text); } .invert .button--filled:hover { background-color: transparent; color: var(--bg); } @media (min-width: 48em) { .button { padding: 1.125rem 2rem; } } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--header-h); display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-header__logo { display: block; flex-shrink: 0; color: var(--text); } .site-header__logo .wordmark { height: 1.125rem; } .js .site-header__logo { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 300ms var(--ease), transform 300ms var(--ease); } .js .site-header.is-stuck .site-header__logo { opacity: 1; transform: none; pointer-events: auto; } .site-header.is-stuck { background-color: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } @media (min-width: 48em) { .site-header__logo .wordmark { height: 1.25rem; } } /* -------------------------------------------------------------------------- Theme toggle -------------------------------------------------------------------------- */ .theme-toggle { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; cursor: pointer; color: var(--muted); border-radius: 50%; margin-right: -0.5rem; transition: color 200ms var(--ease); } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--text); } .theme-toggle svg { width: 1rem; height: 1rem; } :root[data-theme="dark"] .theme-toggle .icon-sun, :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon, :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding-block: 8rem 4rem; text-align: center; } .hero__inner { display: flex; flex-direction: column; align-items: center; } .hero__mark { width: 7.5rem; color: var(--text); } .hero__statement { margin-top: 2.5rem; font-size: var(--size-hero); max-width: 15ch; } .hero__line { margin-top: 1.75rem; font-size: 1rem; color: var(--muted); max-width: 34ch; } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.75rem; } @media (min-width: 48em) { .hero__mark { width: 9.5rem; } .hero__statement { margin-top: 3rem; max-width: 17ch; } .hero__actions { gap: 1rem; margin-top: 3.25rem; } } /* -------------------------------------------------------------------------- Marquee -------------------------------------------------------------------------- */ .marquee { overflow: hidden; padding-block: 2rem; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient( to right, transparent, #000 10%, #000 90%, transparent ); mask-image: linear-gradient( to right, transparent, #000 10%, #000 90%, transparent ); } .marquee__track { display: flex; width: max-content; animation: marquee 44s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; align-items: center; flex-shrink: 0; } .marquee__group li { display: flex; align-items: center; font-family: var(--font-body); font-size: clamp(0.8125rem, 1.4vw, 0.9375rem); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .marquee__group li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background-color: currentColor; margin-inline: 2.25em; opacity: 0.6; } @keyframes marquee { to { transform: translateX(-50%); } } @media (min-width: 48em) { .marquee { padding-block: 2.5rem; } } /* -------------------------------------------------------------------------- The work — cards -------------------------------------------------------------------------- */ .section__head { display: flex; align-items: center; gap: 1.25rem; } .work__grid { display: grid; gap: 1px; margin-top: 3rem; background-color: var(--line); border: 1px solid var(--line); } .work__item { position: relative; padding: 2.25rem 1.75rem 2.5rem; background-color: var(--bg); transition: background-color 250ms var(--ease); } .work__item:hover { background-color: var(--surface); } .work__item h3 { margin-top: 1.5rem; font-size: var(--size-block); } .work__item p { margin-top: 0.875rem; color: var(--muted); max-width: 30ch; } @media (min-width: 48em) { .work__grid { grid-template-columns: repeat(3, 1fr); margin-top: 4rem; } .work__item { padding: 2.75rem 2.25rem 3rem; } } /* -------------------------------------------------------------------------- Statement — inverted, full viewport -------------------------------------------------------------------------- */ .statement { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding-block: 6rem; text-align: center; } .statement h2 { font-size: var(--size-hero); max-width: 16ch; margin-inline: auto; } .statement__line { margin: 2rem auto 0; max-width: 34ch; opacity: 0.7; } .statement .arrow--display { margin: 3.5rem auto 0; } /* -------------------------------------------------------------------------- Rhythm -------------------------------------------------------------------------- */ .rhythm__grid { display: grid; gap: 0; margin-top: 3rem; border-top: 1px solid var(--line); } .rhythm__step { position: relative; display: flex; align-items: baseline; gap: 1.25rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); } .rhythm__step h3 { font-size: var(--size-block); } @media (min-width: 48em) { .rhythm__grid { grid-template-columns: repeat(4, 1fr); margin-top: 4rem; border-top: 0; } .rhythm__step { flex-direction: column; align-items: flex-start; gap: 1.125rem; padding: 1.75rem 1.75rem 2.25rem 0; border-bottom: 0; border-top: 1px solid var(--line); } .rhythm__step::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background-color: var(--text); } } /* -------------------------------------------------------------------------- Ownership -------------------------------------------------------------------------- */ .terms__grid { display: grid; gap: 0; margin-top: 3rem; border-top: 1px solid var(--line); } .terms__item { display: flex; align-items: baseline; gap: 1.25rem; padding-block: 1.375rem; border-bottom: 1px solid var(--line); } .terms__item p { max-width: 34ch; } @media (min-width: 48em) { .terms__grid { grid-template-columns: repeat(2, 1fr); column-gap: 4rem; margin-top: 4rem; } } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq__list { margin-top: 3rem; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; cursor: pointer; list-style: none; padding-block: 1.625rem; font-family: var(--font-display); font-size: var(--size-block); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; transition: opacity 200ms var(--ease); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { opacity: 0.6; } .faq__sign { position: relative; flex-shrink: 0; width: 0.875rem; height: 0.875rem; margin-top: 0.5em; } .faq__sign::before, .faq__sign::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background-color: currentColor; } .faq__sign::after { transform: rotate(90deg); transition: transform 280ms var(--ease); } .faq__item[open] .faq__sign::after { transform: rotate(0deg); } .faq__answer { padding-bottom: 1.75rem; color: var(--muted); max-width: 62ch; } .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size 300ms var(--ease), content-visibility 300ms allow-discrete; } .faq__item[open]::details-content { block-size: auto; } @media (min-width: 48em) { .faq__list { margin-top: 4rem; } .faq__item summary { padding-block: 2.125rem; } } /* -------------------------------------------------------------------------- Close + footer -------------------------------------------------------------------------- */ .close { text-align: center; } .close h2 { font-size: var(--size-hero); max-width: 14ch; margin-inline: auto; } .close__line { margin: 1.75rem auto 0; max-width: 34ch; opacity: 0.7; } .close .button { margin-top: 2.5rem; } .site-footer { padding-block: 3.5rem; border-top: 1px solid var(--line); } .site-footer__inner { display: flex; flex-direction: column; gap: 2rem; } .site-footer__logo { color: var(--text); } .site-footer__logo .wordmark { height: 1rem; } .site-footer__email { font-size: 1rem; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color 200ms var(--ease); } .site-footer__email:hover, .site-footer__email:focus-visible { border-bottom-color: currentColor; } .site-footer__copyright { font-size: 0.8125rem; color: var(--muted); } @media (min-width: 48em) { .site-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; } } /* -------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- */ @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .js .hero__inner > * { opacity: 0; animation: fade-up 700ms var(--ease-out) forwards; } .js .hero__inner > *:nth-child(1) { animation-delay: 100ms; } .js .hero__inner > *:nth-child(2) { animation-delay: 220ms; } .js .hero__inner > *:nth-child(3) { animation-delay: 340ms; } .js .hero__inner > *:nth-child(4) { animation-delay: 460ms; } .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); } .js .reveal.is-visible { opacity: 1; transform: none; } .js .stagger > .reveal:nth-child(2) { transition-delay: 80ms; } .js .stagger > .reveal:nth-child(3) { transition-delay: 160ms; } .js .stagger > .reveal:nth-child(4) { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .hero__inner > * { opacity: 1; animation: none; } .js .reveal { opacity: 1; transform: none; transition: none; } .js .stagger > .reveal:nth-child(n) { transition-delay: 0ms; } .marquee__track { animation: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }