/* ============================================================ Krzysztof Kania — site stylesheet Ported from the prototype design system (B+C visual system). Sections: 1. Reset & base 2. Tokens (colours, room themes, gutter) 3. Type helpers 4. Chrome: nav, ribbon, footer 5. Buttons, links, chips 6. Section + prose helpers 7. Home (hub) 8. Sub-site landing 9. Case study 10. CV 11. Contact 12. Writing / blog 13. Responsive ============================================================ */ /* ---------- 1. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul, dl { margin: 0; padding: 0; } li { list-style: none; } body { color: #15161a; background: #ffffff; font-family: "Manrope", "Inter", -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } /* ---------- 2. Tokens ---------- */ :root { --gutter: 80px; --ink: #15161a; --cream: #f7f5ee; /* default (neutral) accent — overridden by room themes */ --c: #15161a; --fg: #ffffff; } /* Room themes — set on of each sub-site page. */ .room-ec { --c: #1f4d8f; --fg: #eef3fb; } .room-gm { --c: #a73a1c; --fg: #fdf1e6; } .room-uxm { --c: #2c6651; --fg: #eaf3ee; } /* ---------- 3. Type helpers ---------- */ .italic { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; } /* Newsreader italic has much taller intrinsic metrics than Manrope; inside the tight (line-height < 1) display headings it would push the following line down and open uneven gaps. Zeroing the inline leading removes that contribution — the glyphs (incl. descenders) still render, lines stay evenly spaced. */ .home-display .italic, .h-display .italic { line-height: 0; } .eyebrow { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.08em; color: #8b8f98; } .eyebrow.dark { color: #15161a; } .h-display { font-family: "Manrope", sans-serif; font-weight: 600; line-height: 1.0; letter-spacing: -0.035em; margin: 0; text-wrap: balance; } .h-section { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -0.015em; margin: 0; } /* ---------- 4. Chrome ---------- */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 28px var(--gutter); border-bottom: 1px solid #15161a; background: #ffffff; } .mark { display: flex; flex-direction: row; align-items: center; gap: 14px; line-height: 1.15; } .mark-text { display: flex; flex-direction: column; } .mark-photo { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #fff; border: 2px solid #15161a; } .mark-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .mark-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .room-ec .mark-name, .room-gm .mark-name, .room-uxm .mark-name { color: var(--c); } .mark-role { font-size: 12px; color: #6b6f78; letter-spacing: 0.02em; } .links { display: flex; gap: 36px; font-size: 14px; } .links a { cursor: pointer; color: #6b6f78; transition: color 140ms ease; } .links a.on, .links a:hover { color: #15161a; } .lang { font-size: 13px; color: #6b6f78; display: flex; gap: 6px; align-items: center; } .lang a { cursor: pointer; } .lang a:hover { color: #15161a; } .ribbon { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--gutter); font-family: "JetBrains Mono", monospace; font-size: 12px; background: var(--c); color: var(--fg); } .ribbon-back { cursor: pointer; opacity: 0.85; transition: opacity 140ms ease; } .ribbon-back:hover { opacity: 1; } .foot { display: flex; justify-content: space-between; gap: 16px; padding: 24px var(--gutter); background: #15161a; color: #b6b9c2; font-family: "JetBrains Mono", monospace; font-size: 12px; } .foot a:hover { color: #ffffff; } /* ---------- 5. Buttons, links, chips ---------- */ .btn[hidden] { display: none; } .btn { display: inline-block; padding: 14px 26px; border-radius: 999px; font-size: 15px; font-weight: 500; cursor: pointer; background: #15161a; color: #ffffff; border: 1px solid #15161a; transition: opacity 140ms ease; } .btn:hover { opacity: 0.88; } .btn.ghost { background: transparent; color: #15161a; } .btn.accent { background: var(--c); border-color: var(--c); color: #fff; } .btn.accent.ghost { background: transparent; color: var(--c); } /* white button on a coloured CTA band */ .btn.on-color { background: #fff; color: var(--c); border-color: #fff; } .link { cursor: pointer; border-bottom: 1px solid #15161a; font-size: 16px; } .link.accent { border-color: var(--c); color: var(--c); } .link.plain { border-color: transparent; } .chip { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 11px; padding: 5px 10px; border-radius: 999px; background: rgba(21,22,26,0.06); color: #15161a; border: 1px solid rgba(21,22,26,0.12); } .chip.accent { border-color: var(--c); color: var(--c); } .chip.ec { border-color: #1f4d8f; color: #1f4d8f; } .chip.gm { border-color: #a73a1c; color: #a73a1c; } .chip.uxm { border-color: #2c6651; color: #2c6651; } /* ---------- 6. Section + prose helpers ---------- */ .section { padding: 96px var(--gutter); } /* standalone modifiers so they compose with any section class */ .t-line { border-top: 1px solid #15161a; } .cream { background: var(--cream); } .prose p { font-family: "Newsreader", Georgia, serif; font-size: 22px; line-height: 1.5; max-width: 60ch; margin: 0 0 18px; color: #15161a; } .prose p.muted { color: #3a3d46; font-size: 18px; line-height: 1.65; } .prose h4 { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 22px; margin: 28px 0 10px; letter-spacing: -0.01em; } /* ===================================================================== 7. HOME (hub) ===================================================================== */ .home-hero { padding: 96px var(--gutter) 72px; display: flex; flex-direction: column; gap: 36px; } .home-display { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 104px; line-height: 0.98; letter-spacing: -0.035em; margin: 0; max-width: 16ch; text-wrap: balance; } .home-hero-foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; padding-top: 28px; border-top: 1px solid #15161a; } .home-lede { font-size: 19px; line-height: 1.6; color: #2e3038; max-width: 52ch; margin: 0; } .home-actions { display: flex; gap: 12px; justify-content: flex-end; } .rooms { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 0 var(--gutter) 72px; } .room { background: var(--bg); color: var(--fg); border-radius: 12px; padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 18px; min-height: 520px; transition: transform 160ms ease; } .room:hover { transform: translateY(-4px); } .room-top { display: flex; justify-content: space-between; align-items: baseline; opacity: 0.85; } .room-num { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; } .room-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .room-h { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 32px; line-height: 1.08; letter-spacing: -0.022em; margin: 0; text-wrap: balance; } .room-sub { font-size: 16px; line-height: 1.6; margin: 0; max-width: 34ch; opacity: 0.92; } .room-svc { display: flex; flex-wrap: wrap; gap: 6px; } .room-svc li { font-family: "JetBrains Mono", monospace; font-size: 11px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.14); } .room-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.22); display: flex; justify-content: space-between; align-items: center; } .room-cta { font-size: 16px; font-weight: 600; cursor: pointer; } .room-domain { font-family: "JetBrains Mono", monospace; font-size: 11px; opacity: 0.8; } .about { padding: 72px var(--gutter); border-top: 1px solid #e6e7eb; } .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; } .about-body { font-family: "Newsreader", Georgia, serif; font-size: 26px; line-height: 1.4; color: #15161a; margin: 18px 0 0; max-width: 28ch; font-weight: 400; letter-spacing: -0.005em; text-wrap: pretty; } .about-body.muted { font-size: 18px; color: #3a3d46; margin-top: 24px; max-width: 40ch; line-height: 1.55; } .stats { display: flex; flex-direction: column; gap: 18px; } .stats > div { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid #e6e7eb; } .stats dt { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #8b8f98; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } .stats dd { font-size: 15px; margin: 0; } .writing-band { padding: 72px var(--gutter); border-top: 1px solid #15161a; background: var(--cream); } .writing-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; } .writing-head h3 { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 32px; margin: 0; letter-spacing: -0.01em; } .all-link { font-size: 14px; cursor: pointer; border-bottom: 1px solid #15161a; } .posts-mini li { display: grid; grid-template-columns: 120px 1fr 200px; gap: 32px; padding: 20px 0; border-bottom: 1px solid rgba(21,22,26,0.12); align-items: baseline; } .post-date { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #6b6f78; } .post-t { font-size: 20px; cursor: pointer; } .post-t:hover { text-decoration: underline; } .post-cat { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #6b6f78; text-align: right; } .home-contact { padding: 72px var(--gutter); text-align: center; } .home-contact h3 { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 32px; text-wrap: balance; } .home-contact-actions { display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; } /* ===================================================================== 8. SUB-SITE LANDING ===================================================================== */ .sl-hero { padding: 88px var(--gutter) 64px; } .sl-hero-grid { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 72px; align-items: center; } .sl-hero h1 { font-size: 80px; margin-top: 18px; } .sl-hero .lede { font-size: 19px; line-height: 1.6; color: #2e3038; max-width: 46ch; margin: 28px 0 0; } .sl-hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .sl-photo { position: relative; align-self: stretch; min-height: 420px; } /* On desktop the home portrait lives in the top bar (.mark-photo); hide it here. */ .home-hero .sl-photo { display: none; } .sl-photo-frame { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 2px solid var(--c); } .sl-photo-frame img { width: 100%; height: 100%; object-fit: cover; } .sl-photo-cap { position: absolute; left: 4px; bottom: -34px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: #8b8f98; letter-spacing: 0.04em; } .sl-services { padding: 64px var(--gutter); } .sl-services-grid { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; } .svc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: #e6e7eb; border: 1px solid #e6e7eb; } .svc-cell { background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 8px; position: relative; } .svc-num { position: absolute; top: 28px; right: 28px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--c); } .svc-cell h3 { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; margin: 0; } .svc-cell p { font-size: 14px; line-height: 1.55; color: #3a3d46; margin: 0; max-width: 32ch; } .sl-cases { padding: 80px var(--gutter) 96px; } .sl-cases-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; } .cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .case-card { background: #fff; border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 14px; border: 1px solid rgba(21,22,26,0.08); } .case-card-top { display: flex; justify-content: space-between; align-items: baseline; } .case-num { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px; color: var(--c); letter-spacing: 0.02em; } .case-card h3 { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } .case-card p { font-size: 15px; line-height: 1.55; color: #3a3d46; margin: 0; max-width: 44ch; } .case-card .link { margin-top: auto; align-self: flex-start; font-size: 14px; } .sl-strip { padding: 56px var(--gutter); } .sl-strip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .chip-cloud { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; } .clients-list { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 14px; color: #3a3d46; } .clients-list li { padding: 4px 0; border-bottom: 1px dotted #d6d8de; } .sl-cta { padding: 96px var(--gutter); background: var(--c); color: var(--fg); text-align: center; } .sl-cta h3 { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 28px; text-wrap: balance; } .sl-cta .italic { opacity: 0.85; } /* ===================================================================== 9. CASE STUDY ===================================================================== */ .cs-header { padding: 72px var(--gutter) 0; } .cs-breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; font-family: "JetBrains Mono", monospace; font-size: 12px; color: #8b8f98; margin-bottom: 28px; } .cs-breadcrumb .here { color: #15161a; } .cs-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .cs-header h1 { font-size: 88px; } .cs-lede { font-size: 22px; line-height: 1.55; color: #2e3038; max-width: 52ch; margin: 32px 0 0; } .cs-meta { padding: 48px var(--gutter) 0; margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 1px solid #15161a; } .cs-meta > div { padding-top: 24px; } .cs-meta .val { margin-top: 8px; font-size: 16px; font-weight: 500; } .cs-meta .val.sub { margin-top: 4px; font-size: 13px; font-weight: 400; color: #6b6f78; } .cs-facts { padding: 56px var(--gutter) 0; } .cs-facts-head { margin-bottom: 22px; } .cs-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #e6e7eb; border: 1px solid #e6e7eb; } .cs-facts-grid > div { background: #fff; padding: 24px 28px; } .cs-fact-v { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--c); margin-top: 10px; } .cs-hero-img { padding: 72px var(--gutter) 0; } .cs-hero-img .ph { background: var(--c); color: var(--fg); border-radius: 12px; height: 480px; display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 13px; opacity: 0.9; } .cs-hero-img img { width: 100%; height: 480px; object-fit: cover; border-radius: 12px; } .cs-hero-cap { margin: 10px 0 0; font-family: "JetBrains Mono", monospace; font-size: 11px; color: #8b8f98; letter-spacing: 0.04em; } .cs-hero-cap a { border-bottom: 1px solid currentColor; } .cs-hero-cap a:hover { color: #15161a; } .cs-prose-row { display: grid; grid-template-columns: 180px 1fr; gap: 64px; align-items: start; padding: 0 var(--gutter) 16px; } .cs-prose-row.first { padding-top: 72px; } .cs-prose-row .label { position: sticky; top: 40px; } .cs-stats { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(21,22,26,0.18); } .cs-stat-n { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 36px; letter-spacing: -0.02em; color: var(--c); } /* Storefront logo boxes */ /* Cap the grid to the prose measure so it lines up with the paragraphs above/below. 60ch is resolved in the same font as .prose p (Newsreader 22px); the font set here only drives that ch calc — the .word/SVG children define their own type. */ .cs-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; max-width: 60ch; font: 400 22px/1.5 "Newsreader", Georgia, serif; } .cs-logo { border: 1px solid rgba(21,22,26,0.12); border-radius: 12px; background: #fff; min-height: 116px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; } .cs-logo .word { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1; } .cs-logo .word.amazon { letter-spacing: -0.04em; } .cs-logo .az-smile { margin-top: -3px; } /* Session-flow steps */ .cs-flow { margin-top: 28px; max-width: 60ch; } .cs-flow li { display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start; padding: 20px 0; border-top: 1px solid rgba(21,22,26,0.12); } .cs-flow li:last-child { border-bottom: 1px solid rgba(21,22,26,0.12); } .cs-flow .cs-flow-n { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--c); padding-top: 4px; } .cs-flow h4 { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; margin: 0 0 6px; } .cs-flow p { font-family: "Newsreader", Georgia, serif; font-size: 17px; line-height: 1.55; color: #3a3d46; margin: 0; max-width: none; } .cs-prevnext { padding: 72px var(--gutter); border-top: 1px solid #15161a; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cs-prevnext .next { text-align: right; } /* ===================================================================== 10. CV ===================================================================== */ .cv-hero { padding: 96px var(--gutter) 56px; } .cv-hero h1 { font-size: 88px; margin-top: 18px; } .cv-hero-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; } .cv-exp { padding: 64px var(--gutter); display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; } .cv-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 32px; padding: 20px 0; border-bottom: 1px solid rgba(21,22,26,0.12); align-items: baseline; } .cv-row .years { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #6b6f78; } .cv-row .role { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.015em; } .cv-row .place { font-size: 14px; color: #3a3d46; margin-top: 4px; } .cv-facts { padding: 64px var(--gutter); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; } .cv-facts .body { margin-top: 14px; font-size: 16px; } .cv-facts .body .strong { font-weight: 600; } .cv-facts .body .sub { color: #3a3d46; margin-top: 2px; } /* ===================================================================== 11. CONTACT ===================================================================== */ .contact-main { padding: 120px var(--gutter) 80px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start; } .contact-main h1 { font-size: 80px; margin-top: 18px; } .contact-main .lede { font-size: 19px; line-height: 1.6; color: #2e3038; max-width: 44ch; margin: 32px 0 0; } .contact-lines { margin-top: 32px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; } .contact-form { display: flex; flex-direction: column; gap: 18px; padding: 36px; border: 1px solid #15161a; border-radius: 12px; } .contact-form label { font-size: 12px; color: #6b6f78; display: block; margin-bottom: 6px; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; border: 1px solid #d6d8de; border-radius: 8px; background: #fafafa; padding: 0 12px; font: inherit; font-size: 15px; color: #15161a; } .contact-form input[type="text"], .contact-form input[type="email"] { height: 44px; } .contact-form textarea { height: 120px; padding: 12px; resize: vertical; } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--c); outline-offset: -1px; border-color: var(--c); } /* Topic chips as a single-select radio group, styled like chips */ .topics { display: flex; flex-wrap: wrap; gap: 6px; } .topics input { position: absolute; opacity: 0; pointer-events: none; } .topics label { display: inline-block; margin: 0; cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 11px; padding: 5px 10px; border-radius: 999px; background: rgba(21,22,26,0.06); color: #15161a; border: 1px solid rgba(21,22,26,0.12); } .topics .t-ec { border-color: #1f4d8f; color: #1f4d8f; } .topics .t-gm { border-color: #a73a1c; color: #a73a1c; } .topics .t-uxm { border-color: #2c6651; color: #2c6651; } .topics input:checked + label { background: #15161a; color: #fff; border-color: #15161a; } /* Post-submit confirmation message + subtle dismiss */ .contact-confirm[hidden] { display: none; } .contact-confirm { display: flex; align-items: center; gap: 12px; align-self: flex-start; padding: 12px 16px; border-radius: 999px; background: rgba(26,127,55,0.08); border: 1px solid rgba(26,127,55,0.35); color: #1a7f37; font-size: 15px; font-weight: 500; } .contact-confirm-dismiss { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #9aa0a8; font-size: 18px; line-height: 1; cursor: pointer; transition: color 140ms ease; } .contact-confirm-dismiss:hover { color: #15161a; } /* ===================================================================== 12. WRITING / BLOG ===================================================================== */ .blog-hero { padding: 120px var(--gutter) 56px; } .blog-hero h1 { font-size: 88px; margin-top: 18px; } .blog-hero .lede { font-size: 19px; line-height: 1.6; color: #2e3038; max-width: 52ch; margin: 32px 0 0; } /* Filter implemented CSS-only with radio inputs at the top of .blog. */ .blog .filters { position: absolute; opacity: 0; pointer-events: none; } .blog-tabs { padding: 0 var(--gutter) 16px; display: flex; gap: 8px; border-bottom: 1px solid #15161a; } .blog-tabs label { padding: 12px 18px; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; color: #15161a; } .blog-tabs label[for="f-ec"] { color: #1f4d8f; } .blog-tabs label[for="f-gm"] { color: #a73a1c; } .blog-tabs label[for="f-uxm"] { color: #2c6651; } .blog-list { padding: 0 var(--gutter) 96px; } .blog-row { display: grid; grid-template-columns: 120px 1fr 200px; gap: 32px; padding: 28px 0; border-bottom: 1px solid rgba(21,22,26,0.12); align-items: baseline; } .blog-row .date { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #6b6f78; } .blog-row .title { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; cursor: pointer; display: block; } .blog-row .title:hover { text-decoration: underline; } .blog-row .excerpt { font-size: 15px; line-height: 1.55; color: #3a3d46; margin: 8px 0 0; max-width: 60ch; } .blog-row .right { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .blog-row .mins { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #8b8f98; } /* active tab underline + filtering */ #f-all:checked ~ .blog-tabs label[for="f-all"], #f-ec:checked ~ .blog-tabs label[for="f-ec"], #f-gm:checked ~ .blog-tabs label[for="f-gm"], #f-uxm:checked ~ .blog-tabs label[for="f-uxm"] { border-bottom-color: #15161a; font-weight: 600; } #f-ec:checked ~ .blog-list .blog-row:not([data-room="ec"]), #f-gm:checked ~ .blog-list .blog-row:not([data-room="gm"]), #f-uxm:checked ~ .blog-list .blog-row:not([data-room="uxm"]) { display: none; } /* ===================================================================== 13. RESPONSIVE ===================================================================== */ @media (max-width: 1100px) { .home-display { font-size: clamp(48px, 8vw, 104px); } .sl-hero h1, .contact-main h1 { font-size: clamp(40px, 7vw, 80px); } .cs-header h1, .cv-hero h1, .blog-hero h1 { font-size: clamp(40px, 7vw, 88px); } .svc-grid { grid-template-columns: 1fr 1fr; } .cs-facts-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { :root { --gutter: 32px; } .links { gap: 22px; } .home-hero-foot, .about-grid, .sl-hero-grid, .sl-services-grid, .sl-strip-grid, .contact-main, .cv-exp { grid-template-columns: 1fr; gap: 36px; } .rooms { grid-template-columns: 1fr; } .cases-grid { grid-template-columns: 1fr; } .cs-meta { grid-template-columns: 1fr 1fr; } .cv-facts { grid-template-columns: 1fr; gap: 32px; } .home-actions { justify-content: flex-start; } .sl-photo { min-height: 360px; margin-bottom: 40px; } /* Mobile keeps the portrait in the hero, not the top bar. */ .home-hero .sl-photo { display: block; } .mark-photo { display: none; } /* Stack the rows; turn the sticky side-labels into proper section headers. At this width the 12px grey mono label gets lost above the large prose, so bump its size, give it the room accent, and add separation above each row. */ .cs-prose-row { grid-template-columns: 1fr; gap: 10px; padding-top: 44px; } .cs-prose-row.first { padding-top: 56px; } .cs-prose-row .label { position: static; font-size: 15px; font-weight: 500; letter-spacing: 0.05em; color: var(--c); padding-bottom: 4px; border-bottom: 1px solid rgba(21,22,26,0.12); } } @media (max-width: 600px) { :root { --gutter: 20px; } .nav { flex-wrap: wrap; gap: 16px; padding: 18px var(--gutter); } .links { order: 3; width: 100%; flex-wrap: wrap; gap: 16px; } .ribbon { flex-wrap: wrap; gap: 4px 16px; } .svc-grid { grid-template-columns: 1fr; } .cs-facts-grid { grid-template-columns: 1fr; } /* Single-column meta: rule each row so it reads as a structured list rather than text floating on white. First row sits under the section's top border. */ .cs-meta { grid-template-columns: 1fr; gap: 0; } .cs-meta > div { padding: 16px 0; border-top: 1px solid rgba(21,22,26,0.12); } .cs-meta > div:first-child { border-top: none; } .posts-mini li, .blog-row { grid-template-columns: 1fr; gap: 6px; } .post-cat, .blog-row .right { text-align: left; align-items: flex-start; } .foot { flex-direction: column; gap: 8px; } .cs-prevnext { grid-template-columns: 1fr; } .cs-prevnext .next { text-align: left; } .cs-logos { grid-template-columns: 1fr; } .cs-hero-img img { height: 300px; } .sitemap-list li { grid-template-columns: 1fr; gap: 6px; } } /* ---------- Sitemap ---------- */ .sitemap-group { padding-top: 8px; } .sitemap-group + .sitemap-group { padding-top: 48px; } .sitemap-group .eyebrow { display: block; margin-bottom: 8px; } .sitemap-list { margin-top: 8px; } .sitemap-list li { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 18px 0; border-bottom: 1px solid rgba(21,22,26,0.12); align-items: baseline; } .sitemap-list a { font-size: 20px; border-bottom: 1px solid #15161a; } .sitemap-list a:hover { opacity: 0.7; } .sitemap-desc { font-size: 15px; line-height: 1.5; color: #6b6f78; }