/* iakobin.css: the ONE iakobin design system. "Living soil", shown like a gallery: warm paper, near-black ink, hairlines, an elegant serif, and the soil art and linocut motifs used sparingly. Used by labs, legal pages, landing pages, /me, the bar, the sign-in pop-up, the login UI and (via Caddy) every app. Served as /_landing/iakobin.css on app hosts, /iakobin.css on labs.iakobin.com and account.iakobin.com. Assets (logo, motifs, art, fonts) live in brand/ next to this file, so the relative url()s work on every host. Everything is inside @layer iakobin, so ANY unlayered CSS (an app's own styles) wins over it, whatever the order or specificity. Element defaults use :where() (zero specificity) too. Tokens are --ik-*; components are .ik-*. Change the look here (tokens first). */ /* Type: "Fraunces" (SIL OFL 1.1, brand/fonts/OFL-Fraunces.txt), a soft, slightly organic serif for headings; instanced to SOFT 50 / WONK 0, weight 300-600, optical size 9-144, Latin-1 subset. Italic (captions) is a small static-ish instance. Body text is the system UI sans. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("brand/fonts/Fraunces-latin.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2026, U+2192, U+20AC; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 400; font-display: swap; src: url("brand/fonts/Fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2026, U+20AC; } @layer iakobin { /* ---- Design tokens ------------------------------------------------------------------------ */ :where(:root, :host) { --ik-bg: #f8f4ec; /* warm off-white paper */ --ik-card: #fbf8f2; /* a quiet framed area, barely lifted from the paper */ --ik-fg: #1f1b17; /* ink 15.6:1 */ --ik-muted: #6e6357; /* secondary text 5.3:1 */ --ik-line: #ddd4c5; /* hairline (1px) */ --ik-line-soft: #e8e1d4; /* fainter hairline */ --ik-line-strong: #1f1b17; --ik-soil: #3a2617; /* soil brown: motifs and deep accents only */ --ik-loam: #24170e; --ik-loam-mid: #8a6a48; --ik-root: #f0dfbf; --ik-root-tan: #c9a06b; --ik-accent: #2f5130; /* deep moss: links, focus 8.2:1 */ --ik-accent-ink: #f8f4ec; --ik-primary: #1f1b17; /* primary buttons: solid ink */ --ik-primary-ink: #f8f4ec; --ik-soft: #efeee2; /* hover wash, success */ --ik-error: #8f3a20; --ik-error-bg: #f7e8df; --ik-warn: #7f5713; --ik-warn-bg: #f6ecd6; --ik-skeleton: #efe8dc; --ik-shine: rgba(255, 255, 255, .6); --ik-grain: none; /* paper grain: off (owner: quieter) */ --ik-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; --ik-font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --ik-font-display: var(--ik-font-serif); /* big headings */ --ik-font-heading: var(--ik-font-serif); /* small headings */ --ik-label-tracking: .14em; /* small caps labels */ --ik-radius: 8px; /* framed areas, dialogs */ --ik-radius-sm: 999px; /* buttons: pill */ --ik-radius-xs: 6px; /* inputs, alerts */ --ik-border: 1px; --ik-shadow: none; --ik-stamp: none; --ik-lift: 0 1px 2px rgba(31, 27, 23, .04), 0 18px 50px rgba(31, 27, 23, .08); /* dialogs only */ --ik-focus: 0 0 0 3px color-mix(in srgb, var(--ik-accent) 22%, transparent); --ik-measure: 65ch; } /* Night soil: deep brown-black ground, root-cream ink. Follows the system, or html.dark / html.light. */ @media (prefers-color-scheme: dark) { :where(:root:not(.light), :host) { --ik-bg: #16110c; --ik-card: #1c160f; --ik-fg: #efe6d6; --ik-muted: #b4a48d; --ik-line: #3b3127; --ik-line-soft: #2e261e; --ik-line-strong: #efe6d6; --ik-soil: #e3d3b6; --ik-loam-mid: #a5825c; --ik-accent: #a8c79a; --ik-accent-ink: #16110c; --ik-primary: #efe6d6; --ik-primary-ink: #16110c; --ik-soft: #232619; --ik-error: #f0a487; --ik-error-bg: #35190f; --ik-warn: #e6c27f; --ik-warn-bg: #33270f; --ik-skeleton: #241d16; --ik-shine: rgba(255, 255, 255, .04); --ik-lift: 0 18px 60px rgba(0, 0, 0, .5); } } :where(:root.dark) { --ik-bg: #16110c; --ik-card: #1c160f; --ik-fg: #efe6d6; --ik-muted: #b4a48d; --ik-line: #3b3127; --ik-line-soft: #2e261e; --ik-line-strong: #efe6d6; --ik-soil: #e3d3b6; --ik-loam-mid: #a5825c; --ik-accent: #a8c79a; --ik-accent-ink: #16110c; --ik-primary: #efe6d6; --ik-primary-ink: #16110c; --ik-soft: #232619; --ik-error: #f0a487; --ik-error-bg: #35190f; --ik-warn: #e6c27f; --ik-warn-bg: #33270f; --ik-skeleton: #241d16; --ik-shine: rgba(255, 255, 255, .04); --ik-lift: 0 18px 60px rgba(0, 0, 0, .5); } /* ---- Element defaults --------------------------------------------------------------------- Global (every page that loads this file, including apps via Caddy): only things that never move an app's layout. Checked against all five apps (screenshots, light + dark). */ :where(body) { font-family: var(--ik-font); } :where(a) { color: var(--ik-accent); } :where(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color: var(--ik-accent); } /* Full iakobin look for plain HTML: put class="ik-base" on or . */ :where(.ik-base) { color-scheme: light dark; background: var(--ik-bg); color: var(--ik-fg); font: 16px/1.6 var(--ik-font); } :where(html.ik-base) :where(body) { margin: 0; } :where(.ik-base) :where(*, *::before, *::after) { box-sizing: border-box; } :where(.ik-base) :where(h1, h2, h3) { font-family: var(--ik-font-serif); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; } :where(.ik-base) :where(button, input, select, textarea) { font: inherit; color: inherit; } :where(.ik-base) :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea) { font-size: 16px; padding: 10px 12px; border-radius: var(--ik-radius-xs); border: 1px solid var(--ik-line); background: var(--ik-card); color: var(--ik-fg); } :where(.ik-base) :where(button:not([class])) { padding: 9px 18px; border-radius: var(--ik-radius-sm); border: 1px solid var(--ik-line-strong); background: transparent; font-weight: 500; cursor: pointer; } :where(.ik-base) :where(input, select, textarea, button):focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; } :where(.ik-base) :where(::placeholder) { color: var(--ik-muted); opacity: .75; } :where(.ik-base) :where(hr) { border: 0; border-top: 1px solid var(--ik-line); } /* ---- Type and brand ------------------------------------------------------------------------- */ .ik-paper { background-color: var(--ik-bg); } .ik-display { font-family: var(--ik-font-serif); font-weight: 300; letter-spacing: -.02em; line-height: 1.02; font-variation-settings: "opsz" 144; } .ik-heading { font-family: var(--ik-font-serif); font-weight: 400; letter-spacing: -.005em; line-height: 1.15; } .ik-label { display: block; font: 600 11px/1.3 var(--ik-font); letter-spacing: var(--ik-label-tracking); text-transform: uppercase; color: var(--ik-muted); margin: 14px 0 6px; } .ik-caption { font: italic 300 14px/1.45 var(--ik-font-serif); color: var(--ik-muted); } .ik-muted { color: var(--ik-muted); } .ik-hint { font-size: 12px; color: var(--ik-muted); margin: 4px 0 14px; } /* The wordmark (brand/logo.svg, recoloured with currentColor via a mask). The text stays for screen readers: iakobin. Swap the logo = replace brand/logo.svg (and brand/ia.svg for the small mark). */ .ik-mark { display: inline-block; width: 96px; height: 21px; color: var(--ik-fg); background: currentColor; -webkit-mask: url("brand/logo.svg") left center / contain no-repeat; mask: url("brand/logo.svg") left center / contain no-repeat; font-size: 0; line-height: 0; overflow: hidden; text-decoration: none; vertical-align: middle; } .ik-mark i { display: none; } .ik-ia { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("brand/ia.svg") center / contain no-repeat; mask: url("brand/ia.svg") center / contain no-repeat; } .ik-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ik-accent); display: inline-block; } /* ---- Motifs (cut from the owner's linocut sheets, brand/icons/*.svg, recoloured via mask) ----- ; size with font-size (1em box). */ .ik-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.15em; background: currentColor; -webkit-mask: var(--ik-icon-url) center / contain no-repeat; mask: var(--ik-icon-url) center / contain no-repeat; } .ik-i-beetle { --ik-icon-url: url("brand/icons/beetle.svg"); } .ik-i-worm { --ik-icon-url: url("brand/icons/worm.svg"); } .ik-i-ladybird { --ik-icon-url: url("brand/icons/ladybird.svg"); } .ik-i-snail { --ik-icon-url: url("brand/icons/snail.svg"); } .ik-i-bird { --ik-icon-url: url("brand/icons/bird.svg"); } .ik-i-tree { --ik-icon-url: url("brand/icons/tree.svg"); } .ik-i-sprout { --ik-icon-url: url("brand/icons/sprout.svg"); } .ik-i-seed { --ik-icon-url: url("brand/icons/seed.svg"); } .ik-i-leaf { --ik-icon-url: url("brand/icons/leaf.svg"); } .ik-i-pebbles { --ik-icon-url: url("brand/icons/pebbles.svg"); } .ik-i-tomato { --ik-icon-url: url("brand/icons/tomato.svg"); } .ik-i-mast { --ik-icon-url: url("brand/icons/mast.svg"); } .ik-i-sun { --ik-icon-url: url("brand/icons/sun.svg"); } .ik-i-pin { --ik-icon-url: url("brand/icons/pin.svg"); } /* Fine divider: (a small sprig between two hairlines). */ .ik-ornament { display: flex; align-items: center; gap: 16px; color: var(--ik-loam-mid); margin: 56px 0; } .ik-ornament::before, .ik-ornament::after { content: ""; flex: 1; height: 1px; background: var(--ik-line); } .ik-ornament > i { width: 28px; height: 13px; opacity: .8; background: currentColor; -webkit-mask: url("brand/icons/divider-sprig.svg") center / contain no-repeat; mask: url("brand/icons/divider-sprig.svg") center / contain no-repeat; } /* The soil-section piece, shown as an artwork: a narrow framed slice with a caption.
...
Living soil · linocut
*/ .ik-artwork { margin: 0 auto; max-width: 1240px; padding: 0 20px; } /* Only a thin, zoomed-in slice of the piece, below ground: roots, worms and stones (no plants or sky). Markup:
…
*/ .ik-artwork-crop { display: block; position: relative; overflow: hidden; aspect-ratio: 32 / 1; border-radius: 2px; background: var(--ik-soil); } .ik-artwork-crop img { position: absolute; left: 50%; top: 0; width: 110%; max-width: none; height: auto; aspect-ratio: 2000 / 667; transform: translate(-50%, -58%); } .ik-artwork figcaption { margin-top: 12px; font: italic 300 13px/1.4 var(--ik-font-serif); color: var(--ik-muted); } @media (max-width: 560px) { .ik-artwork { padding: 0; } .ik-artwork-crop { aspect-ratio: 16 / 1; border-radius: 0; } .ik-artwork-crop img { width: 220%; transform: translate(-50%, -58%); } .ik-artwork figcaption { padding: 0 20px; } } /* "Living", very quietly: a tiny beetle that now and then walks a short way along a hairline. in a position:relative parent. */ .ik-crawl { position: absolute; left: 0; right: 0; top: -11px; height: 12px; pointer-events: none; color: var(--ik-soil); } .ik-crawl .ik-i-beetle { position: absolute; top: 0; left: 18%; font-size: 11px; opacity: .75; transform: rotate(90deg); animation: ik-stroll 48s ease-in-out infinite; } @keyframes ik-stroll { 0%, 70% { left: 18%; } 85%, 100% { left: 24%; } } @media (prefers-reduced-motion: reduce) { .ik-crawl .ik-i-beetle { animation: none; } } /* ---- Buttons: understated and precise ------------------------------------------------------ */ .ik-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: var(--ik-radius-sm); border: 1px solid var(--ik-line-strong); background: transparent; color: var(--ik-fg); font: 500 14px/1.2 var(--ik-font); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-color .2s ease, opacity .2s ease, border-color .2s ease; } .ik-btn:hover, .ik-btn:focus-visible { outline: none; background: color-mix(in srgb, var(--ik-fg) 6%, transparent); } .ik-btn:focus-visible { box-shadow: var(--ik-focus); } .ik-btn:disabled { opacity: .45; cursor: not-allowed; } .ik-btn-primary { background: var(--ik-primary); border-color: var(--ik-primary); color: var(--ik-primary-ink); } .ik-btn-primary:hover:not(:disabled), .ik-btn-primary:focus-visible { background: var(--ik-primary); opacity: .86; } .ik-btn-block { display: flex; width: 100%; } .ik-btn-pill { padding: 6px 14px; font-size: 13px; } .ik-btn-idp { display: flex; width: 100%; gap: 10px; padding: 11px 16px; font-size: 15px; border-color: var(--ik-line); background: var(--ik-card); } .ik-btn-idp:hover { border-color: var(--ik-line-strong); } .ik-btn-idp-sm { flex: 1; padding: 8px 12px; font-size: 13px; } .ik-idp-row { display: flex; gap: 10px; margin-top: 10px; } .ik-link { border: 0; background: none; padding: 0; color: var(--ik-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ---- Forms -------------------------------------------------------------------------------- */ .ik-input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: var(--ik-radius-xs); border: 1px solid var(--ik-line); background: var(--ik-card); color: var(--ik-fg); transition: border-color .2s ease, box-shadow .2s ease; } .ik-input:focus { outline: none; border-color: var(--ik-line-strong); box-shadow: var(--ik-focus); } .ik-pw { position: relative; } .ik-pw .ik-input { padding-right: 64px; } .ik-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ik-muted); font: 600 11px/1 var(--ik-font); letter-spacing: var(--ik-label-tracking); text-transform: uppercase; padding: 6px 8px; cursor: pointer; } /* ---- Containers --------------------------------------------------------------------------- */ .ik-card { background: var(--ik-card); border: 1px solid var(--ik-line); border-radius: var(--ik-radius); padding: 28px; } .ik-dialog { border: 1px solid var(--ik-line); padding: 0; border-radius: 10px; background: var(--ik-bg); color: var(--ik-fg); width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-shadow: var(--ik-lift); } .ik-dialog::backdrop { background: rgba(22, 17, 12, .42); backdrop-filter: blur(3px); } .ik-divider { display: flex; align-items: center; gap: 12px; color: var(--ik-muted); font: 600 10.5px/1 var(--ik-font); letter-spacing: var(--ik-label-tracking); text-transform: uppercase; margin: 20px 0 8px; } .ik-divider::before, .ik-divider::after { content: ""; flex: 1; height: 1px; background: var(--ik-line); } /* ---- Alerts and badges -------------------------------------------------------------------- */ .ik-alert { background: var(--ik-soft); color: var(--ik-fg); border-radius: var(--ik-radius-xs); padding: 10px 12px; font-size: 14px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .ik-alert-error { background: var(--ik-error-bg); color: var(--ik-error); } .ik-alert-warn { background: var(--ik-warn-bg); color: var(--ik-warn); } .ik-badge { display: inline-block; font: 600 10.5px/1.4 var(--ik-font); letter-spacing: var(--ik-label-tracking); text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: var(--ik-muted); border: 1px solid var(--ik-line); } /* ---- Loading placeholders (skeleton of the next card); shimmer off with reduced motion ------ */ .ik-sk { display: block; background: var(--ik-skeleton); border-radius: 4px; position: relative; overflow: hidden; } .ik-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--ik-shine), transparent); animation: ik-shimmer 1.6s infinite; } @keyframes ik-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .ik-sk::after { animation: none; } } .ik-sk-title { height: 28px; width: 55%; margin-bottom: 12px; } .ik-sk-sub { height: 13px; width: 80%; margin-bottom: 26px; } .ik-sk-label { height: 10px; width: 22%; margin-bottom: 8px; } .ik-sk-input { height: 44px; border-radius: var(--ik-radius-xs); margin-bottom: 18px; } .ik-sk-button { height: 42px; border-radius: 999px; background: color-mix(in srgb, var(--ik-fg) 18%, var(--ik-skeleton)); } }