:root {
color-scheme: light;
--bg: #ffffff;
--bg-muted: #f4f6f8;
--bg-quote: #1d242b;
--fg: #1d242b;
--fg-soft: #4a5560;
--fg-muted: #6c7682;
--accent: #1f6f8b;
--accent-dark: #134453;
--accent-soft: #e3eef3;
--border: #e2e6ea;
--success: #2d7a4f;
--success-soft: #e6f4ec;
--warning: #b08000;
--warning-fg: #6b4d00;
--warning-soft: #fff4e0;
--danger: #a04040;
--danger-soft: #faecec;
--shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
--radius: 4px;
--radius-lg: 8px;
--content-w: 1100px;
--content-w-wide: 1500px;
--font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
--font-serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
a[target="_blank"]:not(.no-extlink):not(:has(img))::after {
content: "\00A0\2197";
font-size: .85em;
color: var(--fg-muted);
text-decoration: none;
position: relative;
top: -.05em;
}
a[target="_blank"]:not(.no-extlink):not(:has(img)):hover::after {
color: var(--accent);
}
.layout-grid__main a {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0% 1.5px;
transition: background-size .25s ease;
}
.layout-grid__main a:hover {
text-decoration: none;
background-size: 100% 1.5px;
}
.layout-grid__main :is(h1, h2, h3, h4) a,
.layout-grid__main a.shop-link,
.layout-grid__main a.card,
.layout-grid__main a.blog-post-nav__link,
.layout-grid__main a:has(img) {
background-image: none;
}
@media (prefers-reduced-motion: reduce) {
.layout-grid__main a { transition: none; }
}
h1, h2, h3, h4 { color: var(--fg); line-height: 1.25; }
h1 { font-size: 2.4rem; margin: 0 0 1rem; font-weight: 300; }
h1:focus { outline: none; }
h2 { font-size: 1.6rem; margin: 1.4rem 0 .8rem; font-weight: 400; }
h3 { font-size: 1.2rem; margin: 1rem 0 .6rem; font-weight: 600; }
h4 { font-size: .95rem; margin: 0 0 .4rem; font-weight: 600; color: var(--fg-soft); letter-spacing: .02em; }
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.95em; }
.container {
width: 100%;
max-width: var(--content-w);
margin: 0 auto;
padding: 0 1.5rem;
}
.container--carousel { padding-top: 1.5rem; }
.container--wide { max-width: var(--content-w-wide); }
.muted { color: var(--fg-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page             { display: flex; flex-direction: column; min-height: 100vh; }
.page__main       { flex: 1; }
.main-layout      { padding-top: 1.5rem; padding-bottom: 3rem; }
.layout-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 2.5rem;
}
.layout-grid__main { min-width: 0; }
.jumbotron {
background: var(--bg-muted);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: 1.2rem 1.4rem;
margin: 1.2rem 0 1.6rem;
}
.jumbotron p { margin: 0; font-size: 1.05rem; color: var(--fg-soft); }
.jumbotron p + p { margin-top: .8rem; }
.featured-teasers {
margin: 0 0 1.8rem;
padding: .9rem 1.1rem;
background: var(--bg-muted);
border-radius: var(--radius);
}
.featured-teasers__heading {
margin: 0 0 .5rem;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--fg-muted);
}
.featured-teasers__list {
list-style: none;
margin: 0;
padding: 0;
}
.featured-teasers__item {
display: flex;
align-items: baseline;
gap: .6rem;
padding: .2rem 0;
}
.featured-teasers__item + .featured-teasers__item {
border-top: 1px solid var(--border);
}
.featured-teasers__link {
font-weight: 600;
color: var(--fg);
}
.featured-teasers__link:hover { color: var(--accent); }
.blog-language-badge {
font-size: .85rem;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: .04em;
margin: 2rem 0 0;
border-top: 1px solid var(--border);
padding-top: .8rem;
}
.card {
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.card--hover {
transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.card--hover:hover {
border-color: var(--accent);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.card--hover:hover { transform: none; }
}
.bullet-list { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.bullet-list li { padding: .35rem 0 .35rem 1.4rem; position: relative; }
.bullet-list li::before { content: "›"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.category-chip {
display: inline-block;
padding: .15rem .55rem;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
border-radius: 3px;
background: var(--accent-soft);
color: var(--accent-dark);
}
.category-chip--distribution { background: #fdf1e3; color: #8a4d10; }
.category-chip--photography  { background: #efeae6; color: #4a3f37; }
a.category-chip          { text-decoration: none; transition: filter .15s ease, box-shadow .15s ease; }
a.category-chip:hover,
a.category-chip:focus-visible {
filter: brightness(.92);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
text-decoration: none;
outline: none;
}
.signature { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.4rem; color: var(--fg); margin: 1rem 0; }
.form-field { display: block; margin-bottom: 1rem; }
.form-field > span {
display: block;
font-size: .85rem;
color: var(--fg-soft);
margin-bottom: .25rem;
}
.form-field input,
.form-field textarea,
.form-field select {
width: 100%;
padding: .55rem .7rem;
border: 1px solid var(--border);
border-radius: var(--radius);
font: inherit;
color: var(--fg);
background: var(--bg);
}
.form-field textarea { resize: vertical; min-height: 4rem; }
.form-field :is(input, textarea, select):focus { border-color: var(--accent); }
.form-field :is(input, textarea, select):disabled {
opacity: .55;
cursor: not-allowed;
background: var(--bg-muted);
}
.form-field.is-required > span::after {
content: ' *';
color: var(--danger);
}
.form-field__error {
display: block;
margin-top: .3rem;
color: var(--danger);
font-size: .85rem;
}
.btn-primary {
background: var(--accent);
color: var(--bg);
border: none;
padding: .65rem 1.4rem;
border-radius: var(--radius);
font: inherit;
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
background: var(--accent-dark);
color: var(--bg);
text-decoration: none;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-primary[disabled] {
opacity: .6;
cursor: progress;
transform: none;
box-shadow: var(--shadow-sm);
}
.btn-secondary {
background: transparent;
color: var(--fg-soft);
border: 1px solid var(--border);
padding: .65rem 1.2rem;
border-radius: var(--radius);
font: inherit;
font-weight: 500;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-secondary:hover {
background: var(--bg-muted);
color: var(--fg);
border-color: var(--fg-muted);
text-decoration: none;
}
.btn-secondary[disabled] {
opacity: .55;
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.btn-primary { transition: background .15s ease; }
.btn-primary:hover { transform: none; box-shadow: var(--shadow-sm); }
}
.right-sidebar__child-menu {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
font-size: .92rem;
border-top: 1px solid var(--border);
}
.right-sidebar__child-menu li     { border-bottom: 1px solid var(--border); }
.right-sidebar__child-menu li a   { display: block; padding: .4rem 0; }
.right-sidebar__child-menu-header { padding: .4rem 0; font-weight: 600; color: var(--fg); }
.shop-link__icon {
width: 1em;
height: 1em;
vertical-align: -.18em;
margin-right: .25em;
}
.cookie-consent {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 200;
background-color: #fff;
border-top: 1px solid #999;
padding: .9rem 1.5rem;
box-shadow: 0 -2px 3px rgba(0,0,0,.2);
background-image: repeating-linear-gradient(-45deg,
transparent, transparent 5px,
rgba(50,50,50,.08) 5px, rgba(50,50,50,.08) 10px);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
text-align: center;
}
.cookie-consent__copy { }
.cookie-consent__heading {
margin: 0 0 .35rem;
font-size: .95rem;
font-weight: 600;
}
.cookie-consent__body  { margin: 0 0 .6rem; font-size: .9rem; }
.cookie-consent__actions {
display: flex;
gap: .6rem;
justify-content: center;
flex-wrap: wrap;
}
.cookie-consent__btn {
background: #fff;
border: 1px solid #303030;
border-radius: var(--radius);
padding: .25rem .9rem;
cursor: pointer;
font: inherit;
}
.cookie-consent__btn--accept:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cookie-consent__btn--reject       { color: var(--fg-soft); border-color: #999; }
.cookie-consent__btn--reject:hover { background: #f0f0f0; }
#blazor-error-ui {
color-scheme: light only;
background: #ffeb3b;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
display: none;
left: 0;
padding: .6rem 1.25rem .7rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.js .reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.js .reveal,
.js .reveal.is-visible {
opacity: 1;
transform: none;
transition: none;
}
}
.img-lightbox {
border: none;
background: transparent;
padding: 0;
max-width: 100vw;
max-height: 100vh;
}
.img-lightbox::backdrop {
background: rgba(15, 22, 28, .88);
backdrop-filter: blur(2px);
}
.img-lightbox img {
display: block;
max-width: 95vw;
max-height: 95vh;
object-fit: contain;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
}
.img-lightbox__close {
position: fixed;
top: 1rem;
right: 1.2rem;
width: 2.4rem;
height: 2.4rem;
font-size: 1.8rem;
line-height: 1;
color: #fff;
background: rgba(255, 255, 255, .12);
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background .15s ease;
}
.img-lightbox__close:hover,
.img-lightbox__close:focus-visible {
background: rgba(255, 255, 255, .25);
outline: none;
}
::view-transition-old(img-lightbox),
::view-transition-new(img-lightbox) {
animation-duration: .42s;
animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-group(img-lightbox) {
animation-duration: .42s;
animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 980px) {
.layout-grid { grid-template-columns: 1fr; }
}
.mascot-stage {
margin: 1.8rem 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-muted);
overflow: hidden;
}
.mascot-stage__floor {
position: relative;
height: 10rem;
background: linear-gradient(to bottom, transparent 82%, var(--accent-soft) 100%);
}
.mascot-stage__runway {
position: absolute;
inset: auto 0 0 0;
height: 100%;
pointer-events: none;
}
.mascot-stage__controls {
display: flex;
flex-wrap: wrap;
gap: .6rem;
padding: .8rem 1rem;
border-top: 1px solid var(--border);
background: var(--bg);
}
.mascot-stage[data-cat-busy] .mascot-stage__controls button {
opacity: .55;
cursor: progress;
}
.mascot-stage__reduced-note { display: none; }
@media (prefers-reduced-motion: reduce) {
.mascot-stage__floor, .mascot-stage__controls { display: none; }
.mascot-stage__reduced-note { display: block; padding: .9rem 1rem; color: var(--fg-soft); margin: 0; }
}