/* CafeKumin has no logo image asset, so the template's ![]()
logo is
replaced with a styled text wordmark. Everything else in style.css /
theme.css is untouched. */
header .logo a {
display: flex;
align-items: baseline;
gap: 0.35em;
font-family: var(--base-font);
font-size: 1.6rem;
font-weight: 700;
color: var(--primary-color);
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
}
header .logo .leaf {
font-size: 0.85em;
}
footer .logo {
font-family: var(--base-font);
font-size: 1.4rem;
font-weight: 600;
color: var(--bg-inverse-color);
}
/* Fixed-height hero: give .image an explicit height (wide + not too tall,
like the original reference) and pin img1 to fill it exactly via
absolute positioning, instead of relying on aspect-ratio sizing on a
normal-flow block box — that combination was leaving .image narrower
than the viewport with blank space on the right. */
/* Fixed height, independent of whatever photo is used — object-fit:cover
on the ![]()
crops any source photo to fill this box, so the hero's
height stays consistent (wide, not too tall) no matter what image file
gets swapped in later. */
.mainimg .image {
width: 100%;
height: clamp(360px, 42vw, 620px);
overflow: hidden;
}
/* img1 holds two side-by-side pieces instead of one full-bleed photo: a
fixed blank spacer (hero_spacer.jpg, 600x1000) on the left so the text
panel never overlaps real photo content, and the actual photo on the
right (hero_photo.jpg, ideally ~1600x1000) filling the rest. Swapping
the hero photo later only means replacing hero_photo.jpg/.webp — no
re-compositing needed. */
.mainimg .img1 {
position: absolute;
inset: 0;
display: flex;
}
.mainimg .img1 .hero-spacer {
flex: 0 0 27.27%;
height: 100%;
object-fit: cover;
}
.mainimg .img1 .hero-photo-wrap {
flex: 1;
height: 100%;
min-width: 0;
}
.mainimg .img1 .hero-photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* main.js runs a slow "Ken Burns" zoom timer even with a single static
slide (it always calls startZoom on slide 0). Force the transform off so
the hero photo never grows/shifts after load. */
.mainimg .slide img {
transform: none !important;
transition: none !important;
}
@media (max-width: 700px) {
.mainimg .image {
height: 60vw;
}
/* On mobile the text panel stacks below the photo instead of overlaying
its left side, so the spacer that keeps the photo clear of the text
on desktop just wastes width here — collapse it and let the photo use
the full mobile width. */
.mainimg .img1 .hero-spacer {
flex: 0 0 0;
width: 0;
display: none;
}
}
/* Uniform photo height for every おすすめカテゴリ card — some CafeKumin
source photos (e.g. おやき, portrait) are a very different native ratio
from the others, which broke row alignment in the 4-column grid. */
.list1 .image {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.list1 .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Static, JS-free nav: the template's own menu only becomes visible once
main.js adds a large-screen/small-screen class to . Force it to
always render as a plain wrapping link row instead, so the header works
even with JavaScript blocked/slow, and drop the hamburger/overlay. */
#menubar {
display: block !important;
position: static !important;
width: auto !important;
height: auto !important;
background: none !important;
padding: 0 !important;
animation: none !important;
overflow: visible !important;
}
#menubar nav ul {
display: flex !important;
flex-wrap: wrap;
gap: 0.15rem 0.25rem !important;
font-size: 1.05rem !important;
justify-content: flex-end;
}
#menubar nav ul li a {
display: inline-block;
color: var(--bg-inverse-color);
text-decoration: none;
padding: 0.45rem 0.8rem;
border-radius: 999px;
}
#menubar nav ul li a:hover {
color: var(--primary-color);
}
#menubar_hdr,
#menubar-overlay {
display: none !important;
}
/* At mobile widths the header's fixed height (from the template's own
style.css) is too short for 7 nav pills at this font size, so the wrapped
rows spilled out of the header and overlapped the hero photo below it.
Let the header grow to fit its content instead, and shrink the nav a
little so it wraps less. */
@media (max-width: 700px) {
header {
height: auto;
flex-wrap: wrap;
row-gap: 0.5rem;
padding-block: 14px;
}
#menubar nav ul {
font-size: 0.85rem !important;
gap: 0.1rem 0.4rem !important;
justify-content: center;
}
#menubar nav ul li a {
padding: 0.3rem 0.6rem;
}
}
/* Hero heading/lead text were rendering too small / wrapping mid-word at
the template's default sizes for this narrow 35%-wide text column.
Scoped to desktop widths only — below 700px the template's own CSS
already switches .text to a static, full-width block under the photo,
and this 40% would otherwise override that and squeeze the text into a
sliver, forcing one-character-per-line wrapping. */
@media (min-width: 701px) {
.mainimg .text {
width: 40%;
}
}
.mainimg .text h1 {
font-size: max(24px, 2.88vw);
word-break: keep-all;
overflow-wrap: normal;
}
.mainimg .text p {
font-size: 1.3rem;
line-height: 1.8;
}
@media (max-width: 700px) {
.mainimg .text h1 {
font-size: 1.5rem;
}
.mainimg .text p {
font-size: 1rem;
}
}
/* お品書き cards: template defaults (icon ~0.7rem, name inherits body size,
description 0.75em) read far too small next to the large photos. */
.list1 .icon1 {
font-size: 0.9rem;
padding: 0.3rem 0.9rem;
}
.list1 .list h4 {
font-size: 1.25rem;
font-weight: 700;
}
.list1 .list p {
font-size: 0.95rem;
}
/* Header/footer links: hover changes text color only, no background pill. */
header .logo a:hover {
color: var(--primary-color);
}
footer .fill a {
color: var(--bg-inverse-color);
}
footer .fill a:hover {
color: var(--primary-color);
filter: none;
}
/* Copyright text (left) and the required template credit (right) share one line. */
#copyright {
align-items: center;
}
#copyright .pr {
margin: 0;
background: none;
padding: 0;
font-size: 0.75rem;
opacity: 0.85;
}
#copyright .pr a {
color: inherit;
}