/* ========================================================================== bugla.io Light editorial grid. Archivo for everything, Geist Mono for real data only. One accent (vermilion), one radius (0), one theme per colour scheme. ========================================================================== */ :root{ --paper: #f2f1ee; --paper-2: #e9e7e2; --ink: #16171a; --ink-2: #5c5e63; --rule: rgba(22, 23, 26, 0.14); --rule-soft: rgba(22, 23, 26, 0.07); --accent: #c0330c; --accent-alt: #9e2a0a; --on-accent: #ffffff; --wrap: 1180px; --gutter: clamp(20px, 5vw, 56px); --ease: cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-color-scheme: dark){ :root{ --paper: #131416; --paper-2: #1a1b1e; --ink: #edece8; --ink-2: #9b9da3; --rule: rgba(237, 236, 232, 0.16); --rule-soft: rgba(237, 236, 232, 0.08); --accent: #ff6a3d; --accent-alt: #ff8b66; --on-accent: #131416; } } *,*::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-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection{ background: var(--accent); color: var(--on-accent); } a{ color: inherit; text-decoration: none; } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } img{ max-width: 100%; display: block; } p{ margin: 0 0 1.1em; } p:last-child{ margin-bottom: 0; } h1,h2,h3{ margin: 0; font-weight: 600; } .wrap{ width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .sr-only{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link{ position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 12px 18px; font-weight: 600; font-size: 0.9rem; transition: top 0.2s var(--ease); } .skip-link:focus{ top: 16px; } section{ scroll-margin-top: 88px; } /* --------------------------------------------------------------- reveal -- Hidden state is scoped to .reveal-ready, which JS sets in . Without JS nothing is ever hidden. */ .reveal-ready [data-reveal]{ opacity: 0; transform: translateY(18px); } .reveal-ready [data-reveal].is-in{ opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } @media (prefers-reduced-motion: reduce){ .reveal-ready [data-reveal], .reveal-ready [data-reveal].is-in{ opacity: 1; transform: none; transition: none; } } /* ========================================================================== Header ========================================================================== */ .site-header{ position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-soft); } @supports not (background: color-mix(in srgb, red 50%, transparent)){ .site-header{ background: var(--paper); } } .header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; } .brand{ font-weight: 600; font-size: 1.0rem; letter-spacing: -0.01em; white-space: nowrap; } .site-nav{ display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); } .site-nav a{ position: relative; font-size: 0.95rem; color: var(--ink-2); padding: 6px 0; transition: color 0.18s var(--ease); } .site-nav a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease); } .site-nav a:hover{ color: var(--ink); } .site-nav a:hover::after{ transform: scaleX(1); } .site-nav a.active{ color: var(--ink); } .site-nav a.active::after{ transform: scaleX(1); } @media (prefers-reduced-motion: reduce){ .site-nav a::after{ transition: none; } } .nav-toggle{ display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--rule); background: transparent; color: inherit; cursor: pointer; border-radius: 0; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{ display: block; width: 17px; height: 1.5px; background: currentColor; } .nav-toggle-bars{ position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after{ content: ""; position: absolute; left: 0; } .nav-toggle-bars::before{ top: -5px; } .nav-toggle-bars::after{ top: 5px; } @media (max-width: 820px){ .nav-toggle{ display: inline-flex; } .site-nav{ position: absolute; top: 68px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gutter) 20px; background: var(--paper); border-bottom: 1px solid var(--rule); } .site-nav.open{ display: flex; } .site-nav a{ font-size: 1.05rem; padding: 15px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink); } .site-nav a:last-child{ border-bottom: 0; } .site-nav a::after{ display: none; } } /* ========================================================================== Hero ========================================================================== */ .hero{ padding: clamp(52px, 8vw, 96px) 0 clamp(72px, 10vw, 128px); } .hero-title{ font-size: clamp(2.25rem, 5.6vw, 4.5rem); font-weight: 400; line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 clamp(24px, 3.2vw, 40px); max-width: 30ch; } .hero-title em{ font-style: normal; font-weight: 700; } .hero-lead{ font-size: clamp(1.1rem, 1.7vw, 1.375rem); line-height: 1.5; color: var(--ink-2); max-width: 42ch; margin: 0 0 clamp(30px, 4vw, 44px); } .actions{ display: flex; flex-wrap: wrap; gap: 12px; } /* ========================================================================== Buttons ========================================================================== */ .btn{ display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 0; border: 1px solid transparent; padding: 14px 26px; font-family: inherit; font-size: 0.975rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.1s var(--ease); } .btn-solid{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-solid:hover{ background: var(--accent-alt); border-color: var(--accent-alt); } .btn-line{ border-color: var(--rule); color: var(--ink); } .btn-line:hover{ border-color: var(--ink); } .btn:active{ transform: translateY(1px); } /* ========================================================================== Bands and section headings ========================================================================== */ .band{ padding: clamp(72px, 11vw, 148px) 0; border-top: 1px solid var(--rule-soft); } .band-tint{ background: var(--paper-2); } .h-section{ font-size: clamp(1.75rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; max-width: 20ch; } .h-wide{ margin-bottom: clamp(40px, 6vw, 72px); } .prose-lg{ font-size: clamp(1.0625rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 46ch; margin-top: clamp(20px, 2.6vw, 30px); } .prose{ color: var(--ink-2); max-width: 46ch; } .aside-note{ margin-top: clamp(36px, 5vw, 60px); color: var(--ink-2); max-width: 52ch; font-size: 1.0625rem; } .note{ color: var(--ink-2); font-size: 0.95rem; max-width: 42ch; } /* ========================================================================== About ========================================================================== */ .about-grid{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 7vw, 104px); align-items: start; } @media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr; gap: 48px; } } .facts{ margin: 0; padding-top: 10px; } .fact{ padding: 18px 0; border-top: 1px solid var(--rule); } .fact:first-child{ border-top: 0; padding-top: 0; } .fact dt{ font-size: 0.9rem; color: var(--ink-2); margin-bottom: 2px; } .fact dd{ margin: 0; font-size: 1.0625rem; font-weight: 500; } /* ========================================================================== Services ========================================================================== */ .offer{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(16px, 5vw, 88px); padding: clamp(26px, 3.4vw, 40px) 0; } .offer + .offer{ border-top: 1px solid var(--rule); } @media (max-width: 780px){ .offer{ grid-template-columns: 1fr; gap: 12px; } } .offer-name{ font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; } .offer-body p{ max-width: 50ch; } .offer-body p:first-child{ color: var(--ink-2); } .tools{ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; color: var(--ink-2); margin: 14px 0 0; } /* ========================================================================== Work ========================================================================== */ .case-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 88px); } @media (max-width: 780px){ .case-grid{ grid-template-columns: 1fr; gap: 48px; } } .case{ border-top: 2px solid var(--accent); padding-top: 22px; } .case-place{ color: var(--accent); font-size: 0.95rem; font-weight: 500; margin: 0 0 10px; } .case-title{ font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 14px; } .case p:last-child{ color: var(--ink-2); } /* ========================================================================== Contact ========================================================================== */ .contact-grid{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 104px); align-items: start; } @media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; gap: 52px; } } .contact-name{ font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px; } .contact-address{ color: var(--ink-2); margin: 0 0 28px; } .contact-main .btn{ margin-bottom: 22px; } .pgp{ margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); } .pgp-label{ display: block; font-size: 0.9rem; color: var(--ink-2); margin-bottom: 6px; } .pgp-key{ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; line-height: 1.7; word-break: break-word; } .pgp-key a{ color: var(--accent); text-underline-offset: 3px; } .pgp-key a:hover{ text-decoration: underline; } .brief-intro{ font-size: 1.0625rem; margin-bottom: 4px; } .brief-list{ margin: 0 0 22px; } .brief-item{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px clamp(16px, 3vw, 40px); padding: 16px 0; border-top: 1px solid var(--rule); } @media (max-width: 520px){ .brief-item{ grid-template-columns: 1fr; gap: 2px; } } .brief-item dt{ font-weight: 500; } .brief-item dd{ margin: 0; color: var(--ink-2); font-size: 0.95rem; } /* ========================================================================== Footer ========================================================================== */ .footer{ border-top: 1px solid var(--rule); padding: 40px 0 56px; } .footer-inner{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; font-size: 0.925rem; color: var(--ink-2); } .footer-inner p{ margin: 0; } .footer-name{ color: var(--ink); font-weight: 500; } .footer-nav{ display: flex; gap: 24px; } .footer-nav a{ transition: color 0.18s var(--ease); } .footer-nav a:hover{ color: var(--accent); } /* ========================================================================== Imprint (imprint.html shares this stylesheet) ========================================================================== */ .legal{ padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 10vw, 120px); } .legal h1{ font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: clamp(28px, 4vw, 44px); } .legal h2{ font-size: 1.0625rem; font-weight: 600; margin: 40px 0 8px; } .legal h2:first-of-type{ margin-top: 0; } .legal p{ max-width: 62ch; color: var(--ink-2); } .legal a{ color: var(--accent); text-underline-offset: 3px; text-decoration: underline; } .legal img{ max-width: 170px; margin: 4px 0 0; } .legal .legal-source{ font-size: 0.875rem; margin-top: 48px; }