:root { --display: "Uncial Antiqua", "Iowan Old Style", Georgia, serif; --body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --step--1: .875rem; --step-0: 1.0625rem; --step-1: 1.3125rem; --step-2: 1.625rem; --step-3: clamp(1.9rem, 1.35rem + 2vw, 2.6rem); --step-4: clamp(2.5rem, 1.5rem + 4.2vw, 4.4rem); --gutter: clamp(1rem, 4vw, 3rem); --max: 72rem; } /* Palettes. The page defaults to Grove; the ?palettes picker (main.js) sets data-palette / data-mode on . */ /* Grove */ :root[data-palette="grove"], :root:not([data-palette]) { --paper: #E8ECE2; --paper-2: #DCE3D5; --ink: #1A2B22; --muted: #4F6156; --stem: #3B6445; --gold: #94762C; --rule: #C4CDBC; --field: #F3F5EF; --focus: #3B6445; --ok: #3B6445; --err: #A33A2A; color-scheme: light; } @media (prefers-color-scheme: dark) { :root[data-palette="grove"]:not([data-mode="light"]), :root:not([data-palette]):not([data-mode="light"]) { --paper: #0D1512; --paper-2: #15211C; --ink: #E3E7DA; --muted: #9EAE9F; --stem: #7FA885; --gold: #CDAE5C; --rule: #26352D; --field: #111C18; --focus: #CDAE5C; --ok: #9BCB9F; --err: #F08C77; color-scheme: dark; } } :root[data-palette="grove"][data-mode="dark"], :root:not([data-palette])[data-mode="dark"] { --paper: #0D1512; --paper-2: #15211C; --ink: #E3E7DA; --muted: #9EAE9F; --stem: #7FA885; --gold: #CDAE5C; --rule: #26352D; --field: #111C18; --focus: #CDAE5C; --ok: #9BCB9F; --err: #F08C77; color-scheme: dark; } /* Oak & amber */ :root[data-palette="oak"] { --paper: #E7E4DC; --paper-2: #DAD5CA; --ink: #2A2119; --muted: #625748; --stem: #5B4A30; --gold: #A8701F; --rule: #CCC4B4; --field: #F4F2ED; --focus: #5B4A30; --ok: #4E6A3A; --err: #A33A2A; color-scheme: light; } @media (prefers-color-scheme: dark) { :root[data-palette="oak"]:not([data-mode="light"]) { --paper: #16120D; --paper-2: #201A13; --ink: #EDE4D6; --muted: #B3A590; --stem: #B8976A; --gold: #E1A94A; --rule: #3A2F24; --field: #1A150F; --focus: #E1A94A; --ok: #A9C48E; --err: #F08C77; color-scheme: dark; } } :root[data-palette="oak"][data-mode="dark"] { --paper: #16120D; --paper-2: #201A13; --ink: #EDE4D6; --muted: #B3A590; --stem: #B8976A; --gold: #E1A94A; --rule: #3A2F24; --field: #1A150F; --focus: #E1A94A; --ok: #A9C48E; --err: #F08C77; color-scheme: dark; } /* Mistletoe & frost */ :root[data-palette="mistletoe"] { --paper: #E5ECEC; --paper-2: #D6E1E1; --ink: #132629; --muted: #4A5F63; --stem: #2F6863; --gold: #6F7F2E; --rule: #C2D0D0; --field: #F3F7F7; --focus: #2F6863; --ok: #2F6863; --err: #A33A2A; color-scheme: light; } @media (prefers-color-scheme: dark) { :root[data-palette="mistletoe"]:not([data-mode="light"]) { --paper: #0B1518; --paper-2: #132024; --ink: #E2ECEC; --muted: #97ABAE; --stem: #7DB5AD; --gold: #D3E0B8; --rule: #223337; --field: #0F1C1F; --focus: #D3E0B8; --ok: #9BD1C4; --err: #F08C77; color-scheme: dark; } } :root[data-palette="mistletoe"][data-mode="dark"] { --paper: #0B1518; --paper-2: #132024; --ink: #E2ECEC; --muted: #97ABAE; --stem: #7DB5AD; --gold: #D3E0B8; --rule: #223337; --field: #0F1C1F; --focus: #D3E0B8; --ok: #9BD1C4; --err: #F08C77; color-scheme: dark; } /* Heather at dusk */ :root[data-palette="heather"] { --paper: #ECE9EF; --paper-2: #DFDAE5; --ink: #221A2B; --muted: #5D5367; --stem: #5B4775; --gold: #9C7328; --rule: #CEC7D8; --field: #F6F4F8; --focus: #5B4775; --ok: #4E6A3A; --err: #A33A2A; color-scheme: light; } @media (prefers-color-scheme: dark) { :root[data-palette="heather"]:not([data-mode="light"]) { --paper: #13101A; --paper-2: #1C1725; --ink: #E9E3EF; --muted: #A99CB6; --stem: #AB8FCB; --gold: #D8B45E; --rule: #302839; --field: #17131E; --focus: #D8B45E; --ok: #A9C48E; --err: #F08C77; color-scheme: dark; } } :root[data-palette="heather"][data-mode="dark"] { --paper: #13101A; --paper-2: #1C1725; --ink: #E9E3EF; --muted: #A99CB6; --stem: #AB8FCB; --gold: #D8B45E; --rule: #302839; --field: #17131E; --focus: #D8B45E; --ok: #A9C48E; --err: #F08C77; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.55 var(--body); -webkit-font-smoothing: antialiased; padding-inline: var(--gutter); } img, svg { max-width: 100%; } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em; } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10; } .skip:focus { left: 1rem; top: 1rem; } h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } .site-header, main, .site-footer { max-width: var(--max); margin-inline: auto; } /* Header */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; flex-wrap: wrap; } .wordmark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--display); font-size: 1.3rem; } .wordmark svg { width: 2rem; height: 2rem; color: var(--stem); } .site-header nav { display: flex; gap: .25rem 1.25rem; align-items: center; flex-wrap: wrap; } .site-header nav a { text-decoration: none; font-weight: 500; padding: .35rem 0; } .site-header nav a:hover { text-decoration: underline; } .site-header .nav-cta { border: 1.5px solid currentColor; border-radius: 999px; padding: .35rem .95rem; } .site-header .nav-cta:hover { background: var(--ink); color: var(--paper); text-decoration: none; } /* Hero */ .hero { min-height: min(78svh, 46rem); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 7vw, 5.5rem); } .hero h1 { font-size: var(--step-4); max-width: 10ch; } .lede { font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-width: 36ch; margin: 1.5rem 0 2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; font: 600 1rem/1 var(--body); padding: .95rem 1.4rem; border-radius: 999px; background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); text-decoration: none; cursor: pointer; } .btn:hover { background: var(--stem); border-color: var(--stem); } .btn-quiet { background: transparent; color: var(--ink); } .btn-quiet:hover { background: var(--paper-2); border-color: var(--ink); } .btn[disabled] { opacity: .6; cursor: progress; } /* The grove: a faint tree of life behind the header and hero */ body { position: relative; } .site-header, main, .site-footer { position: relative; z-index: 1; } .grove { position: absolute; inset: 0 0 auto 0; height: min(100svh + 6rem, 64rem); overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(to bottom, #000 62%, transparent); mask: linear-gradient(to bottom, #000 62%, transparent); } .grove-art { position: absolute; top: clamp(-2rem, 4vw, 3rem); left: 50%; width: min(42rem, 90vw); aspect-ratio: 1; translate: calc(-50% + min(20rem, 22vw)) 0; } .grove-tree, .grove-ring { position: absolute; inset: 0; width: 100%; height: 100%; } .grove-tree { background: var(--stem); opacity: .2; -webkit-mask: url("/grove.svg?v=1") center / contain no-repeat; mask: url("/grove.svg?v=1") center / contain no-repeat; } .grove-ring { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: .3; } .grove-ring text { fill: var(--gold); stroke: none; font: 400 19.25px "Noto Sans Ogham", sans-serif; } /* 11 repeats close the ring */ @media (prefers-reduced-motion: no-preference) { .js .grove-art { animation: rise 1.6s cubic-bezier(.2, .7, .2, 1) both; } } @keyframes rise { from { opacity: 0; transform: translateY(1.5rem) scale(.97); } } @media (max-width: 52rem) { .grove-art { translate: -50% 0; top: 1rem; width: 36rem; } .grove-tree { opacity: .12; } .grove-ring { opacity: .25; } } /* Products, straight under the hero copy */ .hero-apps { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; } .hero-apps a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 500; font-size: .95rem; } .hero-apps a:hover span:last-child { text-decoration: underline; } .hero-apps img, .icon-squish { width: 2.75rem; height: 2.75rem; border-radius: 22.5%; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--gold); flex: none; } .icon-squish { display: grid; place-items: center; background: #EAF7EE; } .icon-squish img { width: 76%; height: auto; box-shadow: none; border-radius: 0; } /* Sections, divided by a triquetra set into the rule */ .companies, .work, .contact { position: relative; padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); } .companies::before, .work::before, .contact::before, .companies::after, .work::after, .contact::after { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } /* a gap in the rule, then the knot inside it */ .companies::before, .work::before, .contact::before { width: 3.75rem; height: 2px; background: var(--paper); } .companies::after, .work::after, .contact::after { width: 2rem; height: 2rem; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='5'%3E%3Cpath d='M50 16A44.3 44.3 0 0 0 84.6 76 44.3 44.3 0 0 0 15.4 76 44.3 44.3 0 0 0 50 16Z'/%3E%3Ccircle cx='50' cy='56' r='24'/%3E%3C/g%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 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='5'%3E%3Cpath d='M50 16A44.3 44.3 0 0 0 84.6 76 44.3 44.3 0 0 0 15.4 76 44.3 44.3 0 0 0 50 16Z'/%3E%3Ccircle cx='50' cy='56' r='24'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } .section-intro { color: var(--muted); font-size: var(--step-1); max-width: 40ch; margin: .75rem 0 2.5rem; } /* Companies */ .co-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; } .co { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 20px; background: var(--paper-2); display: flex; flex-direction: column; gap: 1rem; } .co p { margin: 0; max-width: 46ch; } .co-mark { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; } .co-mark svg { width: 1.7rem; height: 1.7rem; } .co-rpsde .co-mark { background: #E6552E; color: #FFF4DE; } .co-dev .co-mark { background: var(--ink); color: var(--gold); } .facts { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); display: grid; gap: .4rem; font-size: var(--step--1); } .facts div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; } .facts dt { color: var(--muted); } .facts dd { margin: 0; font-weight: 500; } /* Projects: each icon sits on its own cross-section of tree rings */ .project { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(1.5rem, 3vw, 2.25rem); } .project + .project { border-top: 1px solid var(--rule); } .project:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .project:nth-of-type(even) .plate { order: 2; } .plate { --pb: var(--paper-2); --pr: color-mix(in srgb, var(--paper-2), var(--stem) 16%); aspect-ratio: 5 / 4; border-radius: 24px; background: repeating-radial-gradient(ellipse 60% 70% at 46% 54%, var(--pb) 0 15px, var(--pr) 15px 17px); display: grid; place-items: center; max-width: 100%; } .app-icon { width: 42%; height: auto; aspect-ratio: 1; border-radius: 22.5%; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--gold), 0 12px 28px -12px rgb(20 35 25 / .45); } .app-icon-squish { display: grid; place-items: center; background: #EAF7EE; } .app-icon-squish img { width: 78%; height: auto; } .project-head { display: flex; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; } .project p { margin: .9rem 0 1.1rem; max-width: 56ch; } .status { font-size: var(--step--1); font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: .15rem .65rem; } .status-live { color: var(--stem); border-color: currentColor; } .status-live::before { content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: currentColor; margin-right: .4em; vertical-align: .08em; } .tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .tags li { font-size: var(--step--1); padding: .2rem .6rem; border-radius: 6px; background: var(--paper-2); color: var(--muted); } .project-link { display: inline-block; margin-top: 1.1rem; font-weight: 600; color: var(--stem); } /* Contact */ .contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .contact-copy p { color: var(--muted); max-width: 38ch; margin: 1rem 0 0; } .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; } .field { display: flex; flex-direction: column; gap: .4rem; } .field-wide { grid-column: 1 / -1; } .field label { font-weight: 600; font-size: .95rem; } .opt { font-weight: 400; color: var(--muted); } .field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--field); border: 1.5px solid var(--rule); border-radius: 12px; padding: .75rem .9rem; width: 100%; } .field textarea { resize: vertical; min-height: 9rem; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); } .field [aria-invalid="true"] { border-color: var(--err); } .cf-turnstile { min-height: 65px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .form-status { margin: 0; font-weight: 500; } .form-status.is-ok { color: var(--ok); } .form-status.is-err { color: var(--err); } /* Footer */ .site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-block: 2rem 3rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--step--1); } .site-footer p { margin: 0; } .footer-note { flex-basis: 100%; padding-left: 2.65rem; opacity: .8; } .footer-knot { width: 1.75rem; height: 1.75rem; flex: none; color: var(--gold); } /* Narrow screens */ @media (max-width: 52rem) { .project, .project:nth-of-type(even) { grid-template-columns: 1fr; } .project:nth-of-type(even) .plate { order: 0; } .plate { aspect-ratio: 16 / 9; } .app-icon { width: 30%; } .contact { grid-template-columns: 1fr; } } @media (max-width: 34rem) { .contact-form { grid-template-columns: 1fr; } .site-header nav a:not(.nav-cta) { display: none; } } /* Palette preview panel (?palettes) */ .palette-picker { position: fixed; z-index: 20; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: min(22rem, calc(100vw - 2rem)); padding: 1rem; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 18px 40px -18px rgb(0 0 0 / .45); font-size: .875rem; display: grid; gap: .6rem; } .pp-title { margin: 0; font-family: var(--display); font-size: 1.05rem; } .pp-row { display: flex; flex-wrap: wrap; gap: .4rem; } .palette-picker button { font: 500 .8125rem/1.2 var(--body); color: var(--ink); background: var(--paper-2); border: 1.5px solid transparent; border-radius: 999px; padding: .4rem .7rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; } .palette-picker button[aria-pressed="true"] { border-color: var(--ink); } .pp-sw { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: conic-gradient(var(--a) 0 33%, var(--b) 0 66%, var(--c) 0); box-shadow: 0 0 0 1px rgb(0 0 0 / .15); } .palette-picker .pp-close { justify-self: start; background: none; padding-inline: 0; text-decoration: underline; }