/* ============================================================
Lamp — Monoline
One stylesheet for the whole site, built around the Lamp Bristol
wordmark (assets/images/lamp-bristol-logo.svg). Tokens up top;
one breakpoint.
White ground, slate ink, thin teal rules, pill buttons, and the
i's dot as the lamp, with rings of light around it in the hero
and CTA. The header and footer are dark slate bands so the logo
teal has contrast (5.6:1 on them, against 2.5:1 on white).
Headings use Montserrat Regular, leaving the thin wordmark as the
only light lettering on the page.
The logo teal (#4bb3c1) is too light for text on white, so it
is used for strokes, fills and the primary button (slate text
on it is AA); a deeper teal carries accent text. The token names
(--amber, --amber-edge…) are kept from the previous After Dark
skin, so templates and the ?v= prototype skins work unchanged.
Sections:
1. Self-hosted fonts (IBM Plex + Montserrat, both OFL)
2. Design system
3. Production additions (hover states, hamburger nav, skip link,
modifier classes, articles, FAQs, How we work diagram, form)
============================================================ */
/* ---- 1. fonts ---- */
@font-face{
font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
src:url("../fonts/IBMPlexSans-Regular-lAaOGmG.woff2") format('woff2');
}
@font-face{
font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
src:url("../fonts/IBMPlexSans-Medium-3wJLLO0.woff2") format('woff2');
}
@font-face{
font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
src:url("../fonts/IBMPlexSans-SemiBold-qoos00i.woff2") format('woff2');
}
@font-face{
font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
src:url("../fonts/Montserrat-Regular-cl5IRZk.woff2") format('woff2');
}
@font-face{
font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap;
src:url("../fonts/Montserrat-Medium-CTdfOKM.woff2") format('woff2');
}
@font-face{
font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
src:url("../fonts/IBMPlexMono-Regular-D--HSF-.woff2") format('woff2');
}
@font-face{
font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
src:url("../fonts/IBMPlexMono-Medium-rjIKkM0.woff2") format('woff2');
}
/* ---- 2. design system ---- */
:root{
--bg: #ffffff;
--wash: #eef7f8; /* pale teal: CTA band, highlighted cards */
--ink: #14303a; /* slate: headings */
--night: #14303a; /* fixed dark: header and footer bands */
--teal: #4bb3c1; /* the logo: strokes, fills, primary button */
--deep: #1a6d7a; /* button hover, white text on it is AA */
--amber: #17707e; /* accent text (AA on white and wash) */
--on-amber: #14303a;
--body: #3e5560;
--dim: #566b74;
--faint: #5e7178;
--line: #dbe6e8; /* hairlines */
--edge: #cfdde0; /* card borders */
--fill: #ffffff;
--amber-edge:#4bb3c1;
--amber-fill:var(--wash);
--ring-bg: var(--bg); /* what the rings are cut out of */
--display: 'Montserrat', 'Avenir Next', system-ui, sans-serif;
--sans: 'IBM Plex Sans', system-ui, sans-serif;
--mono: 'IBM Plex Mono', monospace;
}
/* ---- base ---- */
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--ink);
font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased }
::selection{ background:var(--teal); color:var(--ink) }
a{ color:inherit; text-decoration:none }
img{ max-width:100% }
h1{ font:400 56px/1.12 var(--display); letter-spacing:-.02em; margin:0; text-wrap:balance }
h2{ font:400 40px/1.2 var(--display); letter-spacing:-.015em; margin:0 0 20px; text-wrap:balance }
h3{ font:500 19px/1.35 var(--display); letter-spacing:-.005em; margin:0 0 10px }
p{ margin:0 0 18px; color:var(--body) }
p:last-child{ margin-bottom:0 }
strong, b{ font-weight:600 }
.amber{ color:var(--amber) }
.lede{ font-size:19px; max-width:680px }
.big{ font:400 30px/1.4 var(--display); letter-spacing:-.01em; color:var(--ink); text-wrap:balance }
.wrap{ max-width:1240px; margin:0 auto; padding:0 56px }
section{ border-bottom:1px solid var(--line); padding:88px 0 }
/* ---- atoms ---- */
.label{ font:500 12px/1.4 var(--display); letter-spacing:.24em;
text-transform:uppercase; color:var(--amber); margin:0 0 32px }
.label.amber{ color:var(--amber) }
.num{ font:500 13px/1 var(--display); letter-spacing:.08em; color:var(--amber) }
.btn{ display:inline-block; background:var(--teal); color:var(--ink);
border:1.5px solid var(--teal); border-radius:999px; padding:14px 30px;
font:500 15px/1.4 var(--display); letter-spacing:.01em; cursor:pointer }
.btn.ghost{ background:none; color:var(--ink); border-color:var(--ink) }
.actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px }
.chip{ display:inline-block; border:1px solid var(--edge); border-radius:999px;
padding:9px 20px; font-size:14px; color:var(--body) }
.chip.on{ border-color:var(--teal); background:var(--wash); color:var(--amber) }
.chips{ display:flex; flex-wrap:wrap; gap:10px }
/* the lamp: the dot over the logo's i, flat, no glow */
.dot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--teal) }
.avatar{ display:flex; align-items:center; justify-content:center; flex:none;
width:72px; height:72px; border-radius:50%; font:400 26px var(--display);
color:var(--amber); background:var(--wash); border:1.5px solid var(--teal) }
/* ---- layout helpers ---- */
.grid{ display:grid; gap:24px }
.grid.c2{ grid-template-columns:1fr 1fr }
.grid.c3{ grid-template-columns:1fr 1fr 1fr }
.grid.c4{ grid-template-columns:repeat(4,1fr) }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start }
.split.narrow{ grid-template-columns:1fr 420px }
.split.rnarrow{ grid-template-columns:420px 1fr }
/* ---- components ---- */
/* cards: hairline box with the logo's stroke along the top */
.card{ border:1px solid var(--edge); border-top:2px solid var(--teal); border-radius:4px;
padding:34px; background:var(--fill) }
.card.amber{ border-color:var(--teal); background:var(--wash) }
.card .more{ display:inline-block; justify-self:start; margin-top:8px; font:500 14px var(--display); color:var(--amber) }
.card p{ font-size:15px }
.stat b{ display:block; font:400 44px/1.05 var(--display); letter-spacing:-.02em; color:var(--amber) }
.stat span{ display:block; margin-top:10px; font-size:13px; line-height:1.5; color:var(--dim) }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.stats .stat{ border:1px solid var(--edge); border-radius:4px; padding:24px }
.grid.c4 > .stat{ border-left:2px solid var(--teal); padding-left:20px }
.step{ border-top:2px solid var(--teal); padding-top:22px }
.step p{ font-size:14px }
blockquote{ margin:32px 0 0; padding:4px 0 4px 24px; border-left:2px solid var(--teal) }
blockquote p{ font:400 22px/1.45 var(--display); color:var(--ink) }
blockquote cite{ font-style:normal; font-size:14px; color:var(--dim) }
.tick li::marker{ content:"→ "; color:var(--amber) }
.cross li::marker{ content:"✕ "; color:var(--faint) }
.card ul{ list-style-position:inside; padding:0; margin:0; display:grid; gap:14px; font-size:15px }
.card.plain ul{ color:var(--body) }
.rows{ display:grid }
.rows > *{ display:grid; grid-template-columns:1fr auto auto; gap:24px; align-items:baseline;
padding:18px 0; border-top:1px solid var(--line) }
.rows > *:last-child{ border-bottom:1px solid var(--line) }
.rows b{ font:500 17px var(--display) }
.rows .meta{ font-family:var(--mono); font-size:13px; color:var(--dim) }
.rows a{ color:var(--amber); font:500 14px var(--display) }
.field{ display:grid; gap:8px; margin-bottom:22px }
.field span{ font:500 13px var(--display); color:var(--ink) }
input, textarea{ width:100%; background:var(--bg); border:1px solid var(--edge);
border-radius:6px; padding:14px 16px; color:var(--ink); font:15px var(--sans) }
input::placeholder, textarea::placeholder{ color:var(--faint) }
textarea{ min-height:110px; resize:vertical }
/* ---- header and footer: dark slate bands framing the page; the
tokens are re-pointed so everything inside retones itself ---- */
header, .site-foot{ background:var(--night); color:#fff;
--ink:#ffffff; --body:#d3dfe2; --dim:#b4c6cb; --faint:#9fb3b9;
--line:rgba(255,255,255,.14); --edge:rgba(255,255,255,.32); --amber:var(--teal) }
header .btn{ color:var(--night) }
header .btn:hover{ background:#fff; border-color:#fff; color:var(--night) }
/* ---- header: the wordmark itself replaces the dot + "Lamp" text,
which stays in the link for screen readers ---- */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:24px 0 }
.logo{ display:block; width:260px; height:36px; overflow:hidden; color:transparent; font-size:0;
background:url("../images/lamp-bristol-logo-diyqWJm.svg") no-repeat left center/contain }
.logo .dot{ display:none }
.nav-links{ display:flex; align-items:center; gap:34px; font:500 14px var(--display); color:var(--body) }
.nav-links a[aria-current]{ color:var(--amber); box-shadow:inset 0 -2px 0 var(--teal) }
.nav-links .btn{ padding:10px 22px; font-size:14px }
/* ---- hero: the lamp dot with rings of light, off to the right ---- */
.hero{ position:relative; overflow:hidden; padding:120px 0 100px }
.hero::before, .cta::before{ content:""; position:absolute; pointer-events:none; z-index:0;
width:18px; height:18px; border-radius:50%; background:var(--teal); opacity:.7;
box-shadow:0 0 0 90px var(--ring-bg), 0 0 0 91.5px var(--teal),
0 0 0 180px var(--ring-bg), 0 0 0 181.5px var(--teal),
0 0 0 270px var(--ring-bg), 0 0 0 271.5px var(--teal) }
.hero::before{ right:-60px; top:50%; transform:translateY(-50%) }
.hero .wrap{ position:relative }
.hero.center{ text-align:center }
.hero.center .lede, .hero.center .actions{ margin-left:auto; margin-right:auto }
.hero.center .actions{ justify-content:center }
.hero .lede{ margin-top:28px }
/* ---- cta band: pale teal wash, rings from the lower left ---- */
.cta{ position:relative; overflow:hidden; padding:110px 0; text-align:center;
background:var(--wash); --ring-bg:var(--wash) }
.cta::before{ left:-60px; bottom:-60px }
.cta .wrap{ position:relative }
.cta h2{ font-size:48px }
.cta p{ max-width:560px; margin:0 auto }
.cta .actions{ justify-content:center }
/* ---- footer ---- */
.site-foot{ padding:64px 0 28px }
.site-foot .cols{ display:grid; grid-template-columns:1fr auto auto; gap:80px;
padding-bottom:40px; border-bottom:1px solid var(--line) }
.site-foot .cols > div{ display:grid; gap:12px; font-size:14px; color:var(--body); align-content:start }
.site-foot small{ font-size:14px; color:var(--dim) }
.site-foot .head{ font:500 11px var(--display); letter-spacing:.24em; color:var(--amber) }
.site-foot .legal{ display:flex; justify-content:space-between; padding-top:22px;
font-size:13px; color:var(--faint) }
/* ---- mobile ---- */
@media (max-width:900px){
.wrap{ padding:0 22px }
section{ padding:44px 0 }
h1{ font-size:36px }
h2{ font-size:28px }
.lede{ font-size:16px }
.big{ font-size:22px }
.hero{ padding:56px 0 48px }
.hero::before{ display:none }
.cta{ padding:56px 0 }
.cta::before{ display:none }
.cta h2{ font-size:30px }
.grid.c2, .grid.c3, .grid.c4, .split, .split.narrow, .split.rnarrow{ grid-template-columns:1fr }
.stat b{ font-size:36px }
.card{ padding:26px }
.split{ gap:32px }
.actions{ flex-direction:column }
.btn{ text-align:center; width:100% }
.nav-links a:not(.btn){ display:none } /* links live in footer on mobile */
.nav-links .btn{ width:auto }
.rows > *{ grid-template-columns:1fr; gap:4px }
.site-foot .cols{ grid-template-columns:1fr; gap:28px }
.site-foot{ padding-top:44px }
.site-foot .logo{ width:180px; height:25px }
}
/* ============================================================
3. Production additions
============================================================ */
/* ---- hover states ---- */
.btn:hover{ background:var(--deep); border-color:var(--deep); color:#fff }
.btn.ghost:hover{ background:var(--ink); border-color:var(--ink); color:#fff }
.card:has(a.more):hover{ border-color:var(--teal) }
.nav-links a:not(.btn):hover{ color:var(--ink) }
.rows a:hover, .card .more:hover{ text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:3px }
a.amber:hover{ text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:3px }
a:focus-visible, .btn:focus-visible{ outline:2px solid var(--teal); outline-offset:3px }
/* ---- skip link ---- */
.skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{ left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
background:var(--bg); border:1.5px solid var(--teal); border-radius:999px; z-index:9999 }
/* ---- heading sizes ---- */
.h1-72{ font-size:64px }
.h1-64{ font-size:60px }
.h1-58{ font-size:58px }
.h1-56{ font-size:56px }
.h1-54{ font-size:54px }
.h1-52{ font-size:52px }
.h2-34{ font-size:34px }
/* ---- repeated inline-style patterns, promoted to classes ---- */
.head{ font:500 11px var(--display); letter-spacing:.24em; color:var(--faint) }
.stats.bare{ gap:12px }
.stats.bare .stat{ border:0; padding:0; background:none; border-radius:0 }
.stats.bare .stat b{ font-size:30px }
.stat-rows{ display:grid; gap:0 }
.stat-rows .stat{ display:flex; align-items:baseline; gap:18px;
padding:14px 0; border-top:1px solid var(--line) }
.stat-rows .stat:last-child{ border-bottom:1px solid var(--line) }
.stat-rows .stat b{ min-width:110px; font-size:30px }
.stat-rows .stat span{ margin-top:0 }
.card.pad-48{ padding:48px }
.card.pad-40{ padding:40px }
.card.pad-30{ padding:30px }
.card.pad-24{ padding:24px }
.card.pad-22{ padding:22px }
.card.dense p{ font-size:14px }
.avatar.lg{ width:88px; height:88px; font-size:32px }
img.avatar{ object-fit:cover }
.card .num + h3{ margin-top:14px }
.step .num + h3{ margin-top:12px }
.site-foot .logo{ width:216px; height:30px }
.contact-hero{ grid-template-columns:1fr 560px; gap:80px }
/* ---- key/value meta rows (case-study details) ---- */
.rows.kv > *{ grid-template-columns:160px 1fr auto }
/* ---- prose pages (privacy, case studies) ---- */
.prose ul{ padding-left:20px; margin:0 0 18px; color:var(--body); display:grid; gap:8px }
.prose strong{ color:var(--ink) }
.prose .stats{ margin:32px 0 }
.prose .stats:last-child{ margin-bottom:0 }
/* ---- talk rows: an article link and a watch/details link ---- */
.rows .links{ display:flex; gap:18px; white-space:nowrap }
/* ---- articles (content/articles/*.md): long-form prose with code ---- */
.article{ max-width:760px }
.article > .talk{ margin-bottom:48px }
.article > .talk .label{ margin-bottom:12px }
.article h2{ font-size:30px; margin:56px 0 16px }
.article h3{ font-size:20px; margin:36px 0 12px }
.article ol{ padding-left:22px; margin:0 0 18px; color:var(--body); display:grid; gap:8px }
.article li > p{ margin-bottom:8px }
.article p a, .article li a{ color:var(--amber); text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:3px }
.article p a:hover, .article li a:hover{ text-decoration-color:var(--amber) }
.article blockquote{ margin:28px 0; padding:2px 0 2px 22px; border-left:2px solid var(--teal) }
.article blockquote p{ color:var(--ink); font-size:20px }
.article :not(pre) > code{ font-family:var(--mono); font-size:.88em; padding:.1em .35em; border-radius:4px; background:var(--wash); color:var(--ink); overflow-wrap:anywhere }
.article pre{ margin:24px 0 28px; padding:20px 22px; background:#f6fafb; border:1px solid var(--edge); border-radius:6px;
overflow-x:auto; font:14px/1.6 var(--mono); color:var(--body); tab-size:4 }
.article pre code{ font:inherit }
/* syntax highlighting (tempest/highlight hl-* classes), from the tokens only */
.article .hl-keyword, .article .hl-attribute, .article .hl-literal{ color:var(--amber) }
.article .hl-type, .article .hl-generic, .article .hl-value{ color:var(--ink) }
.article .hl-comment{ color:var(--dim); font-style:italic }
.article .hl-operator{ color:var(--dim) }
@media (max-width:900px){
.article h2{ font-size:24px; margin-top:44px }
.article pre{ font-size:12.5px; padding:16px }
}
/* ---- section labels as headings: looks exactly like
; undo the h2 rules .label doesn't override ---- */
h2.label{ text-wrap:wrap }
/* ---- article byline and author card ---- */
.byline{ margin-top:24px; font-size:14px; color:var(--dim) }
.article > .author{ margin-top:56px }
.article > .author .label{ margin-bottom:12px }
.article > .author h3 a:hover{ color:var(--amber) }
/* ---- FAQs: native , one per question ---- */
.faqs{ display:grid; max-width:880px }
.faqs details{ border-top:1px solid var(--line) }
.faqs details:last-child{ border-bottom:1px solid var(--line) }
.faqs summary{ display:flex; justify-content:space-between; gap:24px; padding:20px 0;
cursor:pointer; list-style:none; font:500 18px var(--display); color:var(--ink) }
.faqs summary::-webkit-details-marker{ display:none }
.faqs summary h3{ font:inherit; margin:0; color:inherit }
.faqs summary::after{ content:"+"; font:400 22px/1 var(--display); color:var(--amber) }
.faqs details[open] summary::after{ content:"−" }
.faqs summary:hover{ color:var(--amber) }
.faqs details > div{ padding:0 0 22px; max-width:720px }
.faqs details a{ color:var(--amber); text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:3px }
/* ---- document series (How we work): overview diagram, pill links, list
of parts ---- */
.flow{ margin:48px 0 }
.flow-stages{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:14px; align-items:start }
.flow-name{ font:500 12px var(--display); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 14px }
.flow-name .num{ font-size:12px; margin-right:4px }
.flow ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.flow a{ display:block; border:1px solid var(--edge); border-radius:6px; background:var(--fill);
padding:12px 14px; font-size:15px; color:var(--ink) }
.flow a:hover{ border-color:var(--teal); color:var(--amber) }
.flow-arrow{ align-self:center; font:400 20px var(--display); color:var(--amber); padding-top:28px }
.flow-loop{ position:relative; height:36px; margin:16px 10% 0; border:1.5px solid var(--teal); border-top:none; border-radius:0 0 18px 18px }
.flow-loop::before{ content:""; position:absolute; left:-6px; top:-8px;
border:5px solid transparent; border-top:none; border-bottom:8px solid var(--teal) }
.flow-loop span{ position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); white-space:nowrap;
padding:0 14px; background:var(--bg); font-size:13px; color:var(--dim) }
.flow-base{ margin-top:44px; border:1px solid var(--edge); border-top:2px solid var(--teal); border-radius:4px; padding:22px 24px }
.flow-base ul{ grid-template-columns:repeat(3,1fr) }
a.chip:hover{ border-color:var(--teal); color:var(--amber) }
.series-nav{ max-width:760px }
.series-nav .label a:hover{ color:var(--ink) }
.series-parts{ list-style:none; margin:0; padding:0 }
.series-parts li{ border-top:1px solid var(--line) }
.series-parts li:last-child{ border-bottom:1px solid var(--line) }
.series-parts a{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:baseline;
padding:16px 0; font:500 17px var(--display); color:var(--ink) }
.series-parts a:hover, .series-parts a[aria-current]{ color:var(--amber) }
@media (max-width:900px){
.flow-stages{ grid-template-columns:1fr }
.flow-arrow{ justify-self:start; padding:0 0 0 14px; transform:rotate(90deg) }
.flow-loop{ height:auto; margin:20px 0 0; border:none }
.flow-loop::before{ display:none }
.flow-loop span{ position:static; transform:none; white-space:normal; padding:0; background:none }
.flow-base{ margin-top:20px }
.flow-base ul{ grid-template-columns:1fr }
}
/* ---- contact form ---- */
input{ height:48px }
input:focus, textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--wash) }
.chip{ cursor:pointer; position:relative; user-select:none; -webkit-user-select:none }
.chip input[type=radio]{ position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none }
.chip:has(input:checked){ border-color:var(--teal); background:var(--wash); color:var(--amber) }
.field-error{ font-size:13px; font-weight:600; color:#b3261e }
.honeypot{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.form-banner{ margin-bottom:24px; padding:20px 24px }
/* ---- mobile: hamburger nav + resets for the classes above ---- */
.nav-toggle{ display:none; background:none; border:1px solid var(--edge); border-radius:999px;
color:var(--ink); padding:7px 14px; font:500 13px var(--display); cursor:pointer }
@media (max-width:900px){
.h1-72, .h1-64, .h1-58, .h1-56, .h1-54, .h1-52{ font-size:38px }
.h2-34{ font-size:26px }
.contact-hero{ grid-template-columns:1fr; gap:32px }
.nav-toggle{ display:inline-block }
/* keep logo, menu and CTA on one row at phone width */
header .nav{ padding-top:16px; padding-bottom:16px } /* .wrap's mobile padding would zero these */
.logo{ width:116px; height:16px }
.nav-toggle{ margin-left:auto; padding:6px 10px; font-size:12px }
.nav-links .btn{ padding:8px 11px; font-size:12px; letter-spacing:0 }
.nav-links{ position:relative }
.nav-links.open a:not(.btn){ display:block }
header .nav{ flex-wrap:wrap; gap:14px 8px }
.nav-links.open{ order:3; flex-basis:100%; flex-direction:column; align-items:stretch;
display:flex; gap:0; padding:8px 0 16px; border-top:1px solid var(--line) }
.nav-links.open a:not(.btn){ padding:12px 0; border-bottom:1px solid var(--line) }
.nav-links.open .btn{ margin-top:14px; width:100% }
}