/* Betti Trummer — responsive site styles Cream paper, orange accent, Anton display, Inter body, JetBrains Mono meta. */ :root { --paper: #f7f0e2; --paper-tint: #efe6d4; --ink: #111111; --ink-faint: #d9c8b6; --accent: #ff7a59; --accent-2: #f7a8c4; --display: 'Anton', 'Helvetica Neue', sans-serif; --body: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --gutter: clamp(20px, 4vw, 72px); --max-w: 1440px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-weight: 400; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* Theme variants — applied to */ body.theme-pink { --paper: #f7a8c4; --paper-tint: #f9bcd1; --ink: #111111; --ink-faint: #d98aa6; --accent: #111111; --accent-2: #ff7a59; } body.theme-black { --paper: #111111; --paper-tint: #1f1f1f; --ink: #f5ede0; --ink-faint: #3a3a3a; --accent: #ff7a59; --accent-2: #f7a8c4; } body.theme-pink .site-header, body.theme-black .site-header { background: var(--paper); } body.theme-pink .wordmark-band, body.theme-black .wordmark-band { background: var(--paper); } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } /* ---------- HEADER ---------- */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--ink-faint); } .brand { font-family: var(--display); font-size: 32px; letter-spacing: -0.01em; line-height: 1; } .brand-dot { color: var(--accent); } .site-nav { display: flex; gap: 32px; font-family: var(--body); font-size: 15px; font-weight: 500; } .site-nav a[aria-current="page"] { color: var(--accent); } .nav-toggle { display: none; width: 40px; height: 32px; background: transparent; border: none; cursor: pointer; padding: 0; position: relative; } .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 6px auto; transition: transform 0.25s, opacity 0.25s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; background: var(--paper); padding: 100px var(--gutter) var(--gutter); display: flex; flex-direction: column; gap: 24px; font-family: var(--display); font-size: 48px; line-height: 1; transform: translateX(100%); transition: transform 0.3s ease; } .nav-drawer.open { transform: translateX(0); } .nav-drawer a[aria-current="page"] { color: var(--accent); } @media (max-width: 720px) { .site-nav { display: none; } .nav-toggle { display: block; } } /* ---------- TYPOGRAPHY ---------- */ .display { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 11vw, 160px); line-height: 0.95; letter-spacing: -0.01em; margin: 0; } .display.smaller { font-size: clamp(40px, 7vw, 96px); } .accent { color: var(--accent); } .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; } /* ---------- HERO ---------- */ .hero { padding: clamp(48px, 8vw, 120px) var(--gutter) clamp(48px, 6vw, 80px); max-width: var(--max-w); } .hero .display { margin-top: 24px; } /* ---------- THESES ---------- */ .theses { border-top: 1px solid var(--ink); } .thesis { border-bottom: 1px solid var(--ink-faint); } .thesis[open] { background: transparent; } .thesis summary { list-style: none; cursor: pointer; padding: clamp(28px, 4vw, 44px) var(--gutter); display: grid; grid-template-columns: 80px 1.2fr 1fr 60px; column-gap: 32px; row-gap: 8px; align-items: baseline; } .thesis summary::-webkit-details-marker { display: none; } .thesis summary:hover { background: rgba(0,0,0,0.02); } .thesis-num { font-family: var(--display); font-size: clamp(40px, 4vw, 56px); line-height: 1; opacity: 0.35; } .thesis-headline { font-family: var(--display); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -0.005em; } .thesis-subline { font-style: italic; opacity: 0.7; font-size: 15px; line-height: 1.4; } .thesis-toggle { font-family: var(--display); font-size: 32px; line-height: 1; text-align: right; color: var(--accent); transition: transform 0.25s; } .thesis[open] .thesis-toggle { transform: rotate(45deg); } .thesis-body { background: var(--paper-tint); padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(40px, 6vw, 64px); display: grid; grid-template-columns: 80px 1fr 60px; column-gap: 32px; } .thesis-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; padding-top: 4px; } .thesis-meta-faded { opacity: 0.7; margin-top: 2px; } .thesis-meta-date { opacity: 0.85; margin-top: 2px; } .thesis-prose { max-width: 680px; font-size: 17px; line-height: 1.65; } .thesis-prose p { margin: 0 0 18px; } .thesis-prose p:last-child { margin-bottom: 0; } .thesis-prose .lead-in { color: var(--accent); font-weight: 700; } .thesis-prose .pull { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: 0.005em; margin-top: 12px; } @media (max-width: 720px) { .thesis summary { grid-template-columns: 1fr 40px; grid-template-areas: "num toggle" "head toggle" "sub sub"; column-gap: 16px; row-gap: 12px; } .thesis-num { grid-area: num; font-size: 28px; } .thesis-headline { grid-area: head; font-size: 26px; } .thesis-subline { grid-area: sub; } .thesis-toggle { grid-area: toggle; align-self: start; } .thesis-body { grid-template-columns: 1fr; row-gap: 24px; } .thesis-meta { padding-top: 0; } } /* ---------- OUTRO ---------- */ .outro { padding: clamp(48px, 8vw, 96px) var(--gutter); display: flex; justify-content: space-between; align-items: baseline; gap: 32px; flex-wrap: wrap; border-top: 1px solid var(--ink-faint); } .outro-quote { font-style: italic; font-size: clamp(18px, 2vw, 22px); max-width: 540px; margin: 0; } .outro-link { font-family: var(--display); font-size: clamp(28px, 3vw, 40px); color: var(--accent); } /* ---------- BIG WORDMARK BAND (above footer) ---------- */ .wordmark-band { background: var(--paper); overflow: hidden; height: clamp(220px, 38vw, 540px); display: flex; align-items: flex-start; justify-content: flex-end; padding: 0 var(--gutter); } .wordmark-band .wm { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: clamp(440px, 80vw, 1100px); line-height: 1; letter-spacing: -0.02em; /* Show full top of the B; crop only the bottom */ margin-top: 0; margin-bottom: -0.42em; } /* ---------- FOOTER ---------- */ .site-footer { background: var(--ink); color: var(--paper); padding: clamp(32px, 4vw, 48px) var(--gutter) clamp(32px, 4vw, 48px); } .footer-wordmark { display: none; } .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; font-size: 14px; padding-top: 0; margin-top: 0; } .footer-grid a { display: block; padding: 4px 0; } .footer-grid a:hover { color: var(--accent); } .footer-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; margin-bottom: 12px; } .footer-line { padding: 4px 0; opacity: 0.7; } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } } /* ---------- INDEX / COVER ---------- */ .cover-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px var(--gutter); border-bottom: 1px solid var(--ink-faint); } .hero-cover { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); } .cover-display { font-size: clamp(56px, 13vw, 200px); } .cover-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; padding: clamp(40px, 5vw, 64px) var(--gutter); border-top: 1px solid var(--ink-faint); } .cover-body { margin: 12px 0 0; font-size: 16px; max-width: 360px; } .cover-body + .cover-body { margin-top: 16px; } .cover-subhead { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; color: var(--ink); margin: clamp(16px, 1.8vw, 28px) 0 0; } .prelude { padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(40px, 6vw, 96px); max-width: 860px; } .prelude-label { margin-bottom: 20px; } .prelude p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; margin: 0 0 24px; text-wrap: pretty; } .prelude p:last-child { margin-bottom: 0; } .cover-about { padding: clamp(40px, 5vw, 64px) var(--gutter); max-width: 760px; } .cover-about .cover-body { max-width: 560px; } .cover-toc { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; } .cover-toc a { display: flex; gap: 12px; padding: 4px 0; } .cover-toc span { font-family: var(--mono); font-size: 12px; opacity: 0.6; min-width: 56px; } .pull-en { font-style: italic; font-size: 18px; line-height: 1.4; margin: 12px 0 8px; } .meta-attrib { margin-top: 4px; } @media (max-width: 720px) { .cover-grid { grid-template-columns: 1fr; gap: 32px; } } /* ---------- ÜBER ---------- */ .about-name { margin-top: 24px; font-size: clamp(72px, 16vw, 220px); line-height: 0.88; } .about-tagline { font-size: clamp(17px, 1.4vw, 20px); max-width: 680px; margin: 22px 0 0; opacity: 0.9; line-height: 1.55; } .frame-box { background: var(--paper-tint); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: clamp(40px, 6vw, 72px) var(--gutter); display: grid; grid-template-columns: 180px 1fr; gap: 48px; } .frame-prose { max-width: 680px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; } .frame-prose p { margin: 0 0 22px; } .frame-prose p:last-child { margin-bottom: 0; } .background-grid { padding: clamp(40px, 5vw, 64px) var(--gutter); display: grid; grid-template-columns: 180px 1fr 1fr; gap: 48px; align-items: start; } .display-md { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4vw, 48px); line-height: 1.05; margin: 0 0 24px; } .plain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 18px; } .quote-strip { border-top: 1px solid var(--ink-faint); padding: clamp(40px, 5vw, 64px) var(--gutter); } .quote-strip p { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.15; max-width: 1000px; margin: 0; } .vita { border-top: 1px solid var(--ink); padding: clamp(40px, 5vw, 64px) var(--gutter); display: grid; grid-template-columns: 180px 1fr; gap: 48px; } .vita-list { display: flex; flex-direction: column; max-width: 720px; } .vita-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--ink-faint); font-size: 17px; } .vita-row:last-child { border-bottom: none; } @media (max-width: 720px) { .frame-box, .background-grid, .vita { grid-template-columns: 1fr; gap: 24px; } .vita-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } } /* ---------- KONTAKT ---------- */ .contact-display { margin-top: 24px; } .contact-lead { font-size: clamp(18px, 1.8vw, 22px); max-width: 640px; margin: 24px 0 0; opacity: 0.85; } /* ---------- LEGAL ---------- */ .legal { padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(40px, 6vw, 80px); max-width: 760px; } .legal-block { margin-bottom: 36px; } .legal-block .meta { margin-bottom: 8px; } .legal-block p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; } .legal-block p:last-child { margin-bottom: 0; } .legal-block a { text-decoration: underline; text-underline-offset: 2px; } .legal-divider { height: 1px; background: var(--ink-faint); margin: 16px 0 40px; } .legal-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 64px); letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 32px; } .contact-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint); } .contact-link { padding: clamp(28px, 4vw, 48px) var(--gutter); display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--ink-faint); } .contact-link:last-child { border-right: none; } .contact-link-text { font-family: var(--display); font-size: clamp(28px, 3.5vw, 48px); line-height: 1; } .contact-link:hover .contact-link-text { color: var(--accent); } .contact-form-wrap { padding: clamp(40px, 6vw, 80px) var(--gutter); } .contact-form-label { margin-bottom: 24px; } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 760px; } .contact-form label { display: flex; flex-direction: column; gap: 8px; } .contact-form .full { grid-column: 1 / -1; } .contact-form input, .contact-form textarea { background: transparent; border: none; border-bottom: 1px solid var(--ink-faint); padding: 8px 0; color: var(--ink); font-family: var(--body); font-size: 17px; outline: none; } .contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--accent); } .contact-submit { grid-column: 1 / -1; justify-self: start; background: transparent; border: none; font-family: var(--display); font-size: clamp(28px, 3vw, 40px); color: var(--accent); cursor: pointer; padding: 8px 0; } .contact-submit:hover { opacity: 0.7; } @media (max-width: 720px) { .contact-row { grid-template-columns: 1fr; } .contact-link { border-right: none; border-bottom: 1px solid var(--ink-faint); } .contact-link:last-child { border-bottom: none; } .contact-form { grid-template-columns: 1fr; } }