@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//tobias.io/wp-content/themes/tobiasreinhard/assets/fonts/ibm-plex-sans-latin-400.woff2) format('woff2');
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//tobias.io/wp-content/themes/tobiasreinhard/assets/fonts/ibm-plex-sans-latin-500.woff2) format('woff2');
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//tobias.io/wp-content/themes/tobiasreinhard/assets/fonts/ibm-plex-sans-latin-700.woff2) format('woff2');
}:root {
--color-bg:           #ffffff;
--color-text:         #2c2c2c;
--color-text-soft:    #555;
--color-hero-bg:      #0a0a0a;
--color-hero-bg-2:    #1a1a1a;
--color-accent:       #ffd400;
--color-accent-deep:  #b88a00;
--color-accent-soft:  rgba(255, 212, 0, 0.18);
--font-sans: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--max-w: 1100px;
--ease:  cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%; background-color: var(--color-hero-bg);
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-deep); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .hero {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, var(--color-hero-bg) 0%, var(--color-hero-bg-2) 60%, #050505 100%);
color: #fff;
padding-bottom: 0;
}
.hero__aurora {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(60% 50% at 80% 20%, var(--color-accent-soft) 0%, transparent 60%),
radial-gradient(50% 50% at 15% 85%, rgba(255, 212, 0, 0.10) 0%, transparent 60%),
radial-gradient(70% 80% at 50% 0%,  rgba(255, 212, 0, 0.06) 0%, transparent 70%);
filter: blur(20px);
z-index: 0;
}
.hero__inner {
position: relative;
z-index: 2;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 1.25rem;
}
@media (min-width: 600px) {
.hero__inner { padding: 0 1.5rem; }
}
.hero__nav {
display: flex;
justify-content: center;
gap: 1.5rem;
padding: 2rem 0 0;
font-weight: 700;
font-size: 1rem;
flex-wrap: wrap;
}
@media (min-width: 600px) {
.hero__nav { gap: 3rem; padding-top: 3.5rem; font-size: 1.1rem; }
}
.hero__nav-link {
color: #fff;
position: relative;
padding-bottom: 4px;
}
.hero__nav-link::after {
content: "";
position: absolute;
left: 0; right: 100%;
bottom: 0;
height: 2px;
background: var(--color-accent);
transition: right 0.35s var(--ease);
}
.hero__nav-link:hover { text-decoration: none; }
.hero__nav-link:hover::after,
.hero__nav-link:focus::after { right: 0; }
.hero__content {
position: relative;
display: grid;
grid-template-columns: 1fr;
align-items: center;
padding: 3.5rem 0 5rem;
gap: 2rem;
}
@media (min-width: 600px) {
.hero__content { padding: 6rem 0 8rem; gap: 2.5rem; }
}
@media (min-width: 900px) {
.hero__content {
grid-template-columns: 1.1fr 1fr;
padding: 7rem 0 10rem;
}
}
.hero__portrait-wrap {
position: relative;
order: -1;
width: min(240px, 70%);
margin: 0 auto;
}
@media (min-width: 900px) {
.hero__portrait-wrap {
order: 2;
justify-self: end;
width: 360px;
}
}
.hero__portrait-shape {
position: absolute;
inset: -12% -10% -8% 0;
width: 110%;
height: auto;
z-index: 0;
opacity: 0.55;
}
.hero__portrait {
position: relative;
z-index: 1;
width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
object-fit: cover;
}
.hero__title {
position: relative;
z-index: 1;
margin: 0;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 0.95;
font-size: clamp(2.75rem, 13vw, 8rem);
text-shadow: 0 4px 30px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
text-align: center;
word-break: break-word;
}
@media (min-width: 900px) {
.hero__title { text-align: left; }
}
.hero__title span:last-child {
color: var(--color-accent);
} .site-main { background: var(--color-bg); }
.section {
max-width: var(--max-w);
margin: 0 auto;
padding: 4.5rem 1.25rem;
}
@media (min-width: 600px) {
.section { padding: 7rem 1.5rem; }
}
@media (min-width: 900px) {
.section { padding: 10rem 2.5rem; }
}
.section__title {
margin: 0 0 2rem;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.025em;
}
@media (min-width: 600px) {
.section__title { margin-bottom: 4rem; }
}
.section--about { padding-top: 3.5rem; }
@media (min-width: 600px) {
.section--about { padding-top: 7rem; }
}
.prose {
max-width: 720px;
margin: 0 auto;
font-size: clamp(1.05rem, 1.8vw, 1.4rem);
line-height: 1.7;
}
.prose p { margin: 0 0 1.25rem; }
.prose__lead {
font-weight: 700;
font-size: 1.15em;
color: var(--color-text);
}
.prose strong { color: var(--color-text); } .section--contact {
border-top: 1px solid #ececec;
}
.contact-group {
max-width: 800px;
}
.contact-group + .contact-group {
margin-top: 3rem;
}
.contact-group__title {
margin: 0 0 1.25rem;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-soft);
}
.contact-grid {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
@media (min-width: 600px) {
.contact-grid { gap: 1rem; }
}
.contact-grid__item {
flex: 1 1 220px;
max-width: 100%;
min-width: 0;
display: flex; }
.contact-grid__item .contact-card {
width: 100%;
}
@media (min-width: 600px) {
.contact-grid__item { flex-basis: 240px; max-width: 380px; }
}
.contact-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.1rem 1.25rem;
border: 1px solid #ececec;
border-radius: 12px;
color: var(--color-text);
background: #fff;
min-width: 0;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
@media (min-width: 600px) {
.contact-card { padding: 1.5rem 1.75rem; gap: 1.25rem; }
}
.contact-card:hover,
.contact-card:focus-visible {
text-decoration: none;
transform: translateY(-2px);
border-color: var(--color-accent);
box-shadow: 0 14px 32px -16px rgba(0,0,0,0.18);
}
.contact-card__icon {
display: inline-flex;
width: 40px; height: 40px;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--color-accent-soft);
color: var(--color-accent-deep);
flex-shrink: 0;
}
@media (min-width: 600px) {
.contact-card__icon { width: 44px; height: 44px; }
}
.contact-card__icon svg { width: 20px; height: 20px; }
@media (min-width: 600px) {
.contact-card__icon svg { width: 22px; height: 22px; }
}
.contact-card__body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.contact-card__label {
font-weight: 700;
font-size: 1.05rem;
}
.contact-card__value {
color: var(--color-text-soft);
font-size: 0.9rem;
overflow-wrap: anywhere;
word-break: break-word;
} .page-header {
background: var(--color-hero-bg);
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.page-header__inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 1rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
@media (min-width: 600px) {
.page-header__inner { padding: 1.5rem; gap: 1.5rem; }
}
.page-header__brand {
color: #fff;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: -0.02em;
}
@media (min-width: 600px) {
.page-header__brand { font-size: 1.25rem; }
}
.page-header__brand:hover { text-decoration: none; }
.page-header__brand-accent {
color: var(--color-accent);
margin-left: 0.3em;
}
.page-header__back {
color: #c8c8c8;
font-size: 0.95rem;
font-weight: 500;
}
.page-header__back:hover { color: var(--color-accent); text-decoration: none; } .page-article {
max-width: 760px;
margin: 0 auto;
padding: 3rem 1.25rem 4.5rem;
}
@media (min-width: 600px) {
.page-article { padding: 5rem 1.5rem 7rem; }
}
@media (min-width: 900px) {
.page-article { padding: 7rem 2rem 9rem; }
}
.page-article__header { margin-bottom: 2rem; }
@media (min-width: 600px) {
.page-article__header { margin-bottom: 3rem; }
}
.page-article__title {
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.025em;
margin: 0;
}
.prose--page {
font-size: 1rem;
line-height: 1.7;
max-width: none;
}
@media (min-width: 600px) {
.prose--page { font-size: 1.05rem; line-height: 1.75; }
}
.prose--page h2 {
margin-top: 2.5rem;
margin-bottom: 1rem;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.015em;
}
.prose--page h3 {
margin-top: 2rem;
margin-bottom: 0.75rem;
font-size: 1.15rem;
font-weight: 700;
}
.prose--page ul, .prose--page ol { padding-left: 1.5rem; margin: 0 0 1.25rem; }
.prose--page li { margin-bottom: 0.4rem; }
.prose--page a { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose--page a:hover { color: var(--color-text); }
.prose--page hr { border: 0; border-top: 1px solid #ececec; margin: 2.5rem 0; } .site-footer {
background: var(--color-hero-bg);
color: #c8c8c8;
padding: 2rem 1.25rem;
text-align: center;
}
@media (min-width: 600px) {
.site-footer { padding: 3rem 1.5rem; }
}
.site-footer__inner {
max-width: var(--max-w);
margin: 0 auto;
font-size: 0.9rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: center;
}
.site-footer__nav { width: 100%; }
.site-footer__menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem 2rem;
}
.site-footer__menu a {
color: #e8e8e8;
font-weight: 500;
text-decoration: none;
}
.site-footer__menu a:hover,
.site-footer__menu .current-menu-item a {
color: var(--color-accent);
}
.site-footer__meta { margin: 0; color: #999; }
.site-footer__note { margin: 0; color: #777; font-size: 0.85rem; } @keyframes tr-fade-up {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes tr-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes tr-fade-in-scale {
from { opacity: 0; transform: scale(0.94); }
to   { opacity: 1; transform: scale(1); }
}
.hero__nav { animation: tr-fade-in 0.7s ease-out 0.1s both; }
.hero__portrait-wrap {
animation: tr-fade-in-scale 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.hero__title span:nth-child(1) {
animation: tr-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.hero__title span:nth-child(2) {
animation: tr-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}  .js .tr-reveal {
opacity: 0;
transform: translateY(12px);
transition:
opacity   0.6s var(--ease),
transform 0.6s var(--ease);
will-change: opacity, transform;
}
.js .tr-reveal.is-visible {
opacity: 1;
transform: translateY(0);
} .js .tr-reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
.js .tr-reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
.js .tr-reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }
.js .tr-reveal[data-reveal-delay="4"] { transition-delay: 0.32s; }
.js .tr-reveal[data-reveal-delay="5"] { transition-delay: 0.40s; }
.js .tr-reveal[data-reveal-delay="6"] { transition-delay: 0.48s; } @media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition: none !important;
animation: none !important;
} .js .tr-reveal { opacity: 1 !important; transform: none !important; }
}