/* * MANCAVE — a refinement of the brand's own look, not a new world: the theme keeps its espresso * dark, Bebas display, Inter text and amber (keepTheme in src/lib/skins.ts). This sheet makes it * warmer and more like the place: photography big and edge to edge, the cave blocks of the logo * as the brand's marks (notes, section ridges), the house voice kept but moved under the title, * blocky controls instead of glowing pills, and everything on one column on desktop. * * Loaded only for brands whose theme.skin is "mancave". Every selector is prefixed with * #skin[data-skin] (an id on ) so it outranks the blocks' scoped styles without !important. */ #skin[data-skin='mancave'] { --cream: #F2E9DD; --cream-dim: #C9BDAE; --stone: #2E2620; --amber: var(--brand-secondary, #F4A300); --content: 72rem; /* Where the content column starts, from the window's width (used by the header and the hero words alike). */ --col-start: max(clamp(1rem, 5vw, 3rem), calc((100vw - var(--content)) / 2)); } /* ── Header on the content column ─────────────────────────────────────── */ #skin[data-skin='mancave'] .site-header { padding-inline: var(--col-start); } #skin[data-skin='mancave'] .site-header nav a { font-family: var(--display-font); font-size: 1.15rem; letter-spacing: 0.06em; color: var(--cream-dim); } #skin[data-skin='mancave'] .site-header nav a:hover, #skin[data-skin='mancave'] .site-header nav a.active { color: var(--cream); border-bottom-color: var(--amber); } @media (max-width: 640px) { /* One row on phones: the wordmark, then the pages as a strip you can swipe. */ #skin[data-skin='mancave'] .site-header { flex-direction: row; align-items: center; gap: 1rem; padding-block: 0.6rem; } #skin[data-skin='mancave'] .site-header .brand img { height: 1.15rem; } #skin[data-skin='mancave'] .site-header nav { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline: 2px 2rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); } #skin[data-skin='mancave'] .site-header nav::-webkit-scrollbar { display: none; } #skin[data-skin='mancave'] .site-header nav a { white-space: nowrap; font-size: 1.05rem; } } /* ── Controls: blocks, not glowing pills ──────────────────────────────── */ #skin[data-skin='mancave'] .btn, #skin[data-skin='mancave'] .header-cta, #skin[data-skin='mancave'] .ab.primary { border-radius: 3px; box-shadow: none; font-family: var(--display-font); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.06em; line-height: 1; padding: 0.85rem 1.5rem 0.75rem; transition: transform 0.15s ease, background-color 0.15s ease; } #skin[data-skin='mancave'] .btn:hover { transform: translateY(-2px); box-shadow: none; } #skin[data-skin='mancave'] a.link { font-family: var(--display-font); font-size: 1.3rem; letter-spacing: 0.06em; color: var(--cream); text-decoration: none; border-bottom: 2px solid var(--amber); padding-bottom: 1px; } /* ── Hero: the place first, big and warm ──────────────────────────────── */ #skin[data-skin='mancave'] .hero.split { position: relative; padding: 0; min-height: 0; background: var(--surface); } #skin[data-skin='mancave'] .hero.split .overlay { display: none; } #skin[data-skin='mancave'] .hero.split .inner { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; } /* Phones: the photo leads, edge to edge, then the words. */ #skin[data-skin='mancave'] .hero.split .side { order: -1; margin: 0; border-radius: 0; box-shadow: none; overflow: hidden; aspect-ratio: 4 / 3; } #skin[data-skin='mancave'] .hero.split .side img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; } #skin[data-skin='mancave'] .hero.split .copy { display: flex; flex-direction: column; padding: 1.75rem clamp(1rem, 5vw, 3rem) 3.25rem; } #skin[data-skin='mancave'] .hero.split h1 { order: 1; margin: 0; font-size: clamp(3rem, 14vw, 6.25rem); line-height: 0.95; letter-spacing: 0.01em; color: var(--cream); } /* The house voice ("Crackin\' open a cold one?", "Ce bem azi?") stays, as a reply under the title. */ #skin[data-skin='mancave'] .hero.split .eyebrow { order: 2; align-self: flex-start; margin: 1rem 0 0; padding: 0.35rem 0.6rem 0.3rem; background: var(--cream); color: #161210; font-family: var(--body-font); font-style: normal; font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; border-radius: 2px; } #skin[data-skin='mancave'] .hero.split .subtitle { order: 3; margin: 1.1rem 0 0; max-width: 34rem; font-size: 1.1rem; line-height: 1.6; color: var(--cream-dim); } /* The notes become the cave blocks of the logo: stones of uneven height, one per thing on offer. */ #skin[data-skin='mancave'] .hero.split .notes { order: 5; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem; margin: 1.5rem 0 0; font-family: var(--display-font); font-style: normal; font-size: clamp(0.98rem, 3.6vw, 1.15rem); letter-spacing: 0.05em; color: var(--cream); } #skin[data-skin='mancave'] .hero.split .notes .pipe { display: none; } #skin[data-skin='mancave'] .hero.split .notes > span:not(.pipe) { display: inline-block; padding: 0.5rem 0.7rem 0.4rem; background: var(--stone); border-radius: 2px; line-height: 1; } #skin[data-skin='mancave'] .hero.split .notes > span:not(.pipe):nth-of-type(4n + 1) { padding-top: 0.8rem; } #skin[data-skin='mancave'] .hero.split .notes > span:not(.pipe):nth-of-type(4n + 3) { padding-top: 1rem; } #skin[data-skin='mancave'] .hero.split .actions { order: 4; margin-top: 1.5rem; gap: 1.5rem; } #skin[data-skin='mancave'] .hero.split .info { order: 6; margin-top: 1.25rem; color: var(--cream-dim); letter-spacing: 0.02em; } /* The cave's edge: a ridge of blocks where the hero meets the next section. */ #skin[data-skin='mancave'] main > [data-block]:first-child > .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(14px, 2.2vw, 26px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cg fill='%23161210'%3E%3Crect x='0' y='18' width='54' height='26'/%3E%3Crect x='62' y='6' width='40' height='38'/%3E%3Crect x='110' y='26' width='58' height='18'/%3E%3Crect x='176' y='12' width='34' height='32'/%3E%3Crect x='218' y='20' width='62' height='24'/%3E%3Crect x='288' y='4' width='44' height='40'/%3E%3Crect x='340' y='30' width='52' height='14'/%3E%3Crect x='400' y='14' width='38' height='30'/%3E%3Crect x='446' y='22' width='66' height='22'/%3E%3Crect x='520' y='8' width='42' height='36'/%3E%3Crect x='570' y='26' width='56' height='18'/%3E%3Crect x='634' y='16' width='36' height='28'/%3E%3Crect x='678' y='6' width='60' height='38'/%3E%3Crect x='746' y='28' width='46' height='16'/%3E%3Crect x='800' y='12' width='40' height='32'/%3E%3Crect x='848' y='20' width='64' height='24'/%3E%3Crect x='920' y='4' width='38' height='40'/%3E%3Crect x='966' y='24' width='56' height='20'/%3E%3Crect x='1030' y='10' width='44' height='34'/%3E%3Crect x='1082' y='28' width='34' height='16'/%3E%3Crect x='1124' y='16' width='76' height='28'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; pointer-events: none; } @media (min-width: 900px) { /* Desktop: the words set the hero's height and sit on the content column; the photo only fills the space beside them, to the window's edge, so the title and the buttons are always in the first screen, even on a short laptop window. */ #skin[data-skin='mancave'] .hero.split .inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(22rem, calc(100svh - 12rem), 36rem); } #skin[data-skin='mancave'] .hero.split .copy { justify-content: center; padding: 2.75rem 3rem 3.25rem var(--col-start); } #skin[data-skin='mancave'] .hero.split .side { position: relative; order: 0; aspect-ratio: auto; } #skin[data-skin='mancave'] .hero.split .side img { position: absolute; inset: 0; } #skin[data-skin='mancave'] .hero.split h1 { font-size: clamp(3rem, 4.6vw, 5.25rem); line-height: 1; } #skin[data-skin='mancave'] .hero.split .subtitle { font-size: 1.02rem; } } /* ── Sections on the column, a ridge between them ─────────────────────── */ #skin[data-skin='mancave'] main > [data-block] > section:not(.hero) .inner, #skin[data-skin='mancave'] main > [data-block] > section.rich-text > div { max-width: var(--content); } #skin[data-skin='mancave'] main h2 { font-size: clamp(2.4rem, 8vw, 4rem); line-height: 0.95; letter-spacing: 0.02em; color: var(--cream); } /* Cards: the three rooms of the house, photo first and big. */ #skin[data-skin='mancave'] .card-grid .grid { gap: 1.25rem; } #skin[data-skin='mancave'] .card-grid .card { border-radius: 4px; border: 0; box-shadow: none; background: var(--surface); overflow: hidden; } #skin[data-skin='mancave'] .card-grid .card:hover { transform: translateY(-3px); box-shadow: none; } #skin[data-skin='mancave'] .card-grid .thumb img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; } #skin[data-skin='mancave'] .card-grid .content { padding: 1.1rem 1.1rem 1.25rem; } #skin[data-skin='mancave'] .card-grid h3 { font-family: var(--display-font); font-size: 2.1rem; line-height: 0.95; letter-spacing: 0.03em; color: var(--cream); margin: 0 0 0.5rem; } #skin[data-skin='mancave'] .card-grid .content p { color: var(--cream-dim); } #skin[data-skin='mancave'] .card-grid .more { font-family: var(--display-font); font-size: 1.2rem; letter-spacing: 0.06em; color: var(--amber); } /* Community: the quote as the loudest thing on the page, in the guest's own words. */ #skin[data-skin='mancave'] .rich-text blockquote { margin: 2rem 0; padding: 0; border: 0; background: none; font-family: var(--display-font); font-style: normal; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.02; letter-spacing: 0.02em; color: var(--cream); } #skin[data-skin='mancave'] .rich-text blockquote::before { content: ''; display: block; width: 3.5rem; height: 0.6rem; margin-bottom: 1rem; background: var(--amber); border-radius: 1px; } #skin[data-skin='mancave'] .rich-text p { color: var(--cream-dim); font-size: 1.08rem; } #skin[data-skin='mancave'] .rich-text a { color: var(--cream); text-decoration-color: var(--amber); text-decoration-thickness: 2px; } /* Gallery: bigger prints, plain captions. */ #skin[data-skin='mancave'] .gallery .grid { gap: 0.75rem; } #skin[data-skin='mancave'] .gallery figure { border-radius: 3px; overflow: hidden; } #skin[data-skin='mancave'] .gallery img { border-radius: 3px; } #skin[data-skin='mancave'] .gallery figcaption { font-family: var(--body-font); font-style: normal; font-size: 0.88rem; color: var(--cream-dim); } /* CTA: amber stays the one loud colour, on a plain block. */ #skin[data-skin='mancave'] .cta .inner { border-radius: 4px; border: 0; background: var(--surface); text-align: left; } #skin[data-skin='mancave'] .cta h2 { color: var(--cream); } #skin[data-skin='mancave'] .cta p { color: var(--cream-dim); margin-left: 0; } /* ── Heroes without a photo (Contact): the same voice block, no glow ──────── */ #skin[data-skin='mancave'] .hero:not(.split) { position: relative; background: var(--surface); } #skin[data-skin='mancave'] .hero:not(.split):not(.photo) .overlay { display: none; } #skin[data-skin='mancave'] .hero:not(.split) .copy { display: flex; flex-direction: column; } #skin[data-skin='mancave'] .hero.center:not(.split) .copy { align-items: center; } #skin[data-skin='mancave'] .hero:not(.split) h1 { order: 1; font-size: clamp(3.2rem, 12vw, 6rem); line-height: 0.95; color: var(--cream); } #skin[data-skin='mancave'] .hero:not(.split) .eyebrow { order: 2; margin: 1rem 0 0; padding: 0.35rem 0.6rem 0.3rem; background: var(--cream); color: #161210; font-family: var(--body-font); font-style: normal; font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; border-radius: 2px; } #skin[data-skin='mancave'] .hero:not(.split) .subtitle { order: 3; margin-top: 1.1rem; color: var(--cream-dim); } #skin[data-skin='mancave'] .hero:not(.split) .notes { order: 4; } #skin[data-skin='mancave'] .hero:not(.split) .actions { order: 5; } #skin[data-skin='mancave'] .hero:not(.split) .info { order: 6; } /* ── Contact form: fields and the send button in the same blocky language ─ */ #skin[data-skin='mancave'] .contact input, #skin[data-skin='mancave'] .contact textarea { border-radius: 3px; } #skin[data-skin='mancave'] .contact form button { border-radius: 3px; box-shadow: none; font-family: var(--display-font); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.06em; line-height: 1; padding: 0.85rem 1.5rem 0.75rem; } #skin[data-skin='mancave'] .contact iframe { border-radius: 4px; }