/* ===================================================================== navbar.css — self-contained navbar styling for the baked partials. Extracted from the reference system's bh/globals.tsx nav block (salon-generator-fresh) and dedented into a standalone stylesheet. Pair this with one HTML partial from this folder (see manifest.json). ── DESIGN-TOKEN CONTRACT ───────────────────────────────────────────── The generated page MUST define these CSS variables in :root, otherwise the navbar falls back to the values below: --bg page background (light) e.g. #faf8f5 --text primary text e.g. #1a1815 --text-muted muted text (icon nav links) e.g. #6b6660 --accent brand accent e.g. #b08d57 --border hairline border color e.g. #e3ddd4 --font-display display / heading font (brand) e.g. "Cormorant Garamond", serif --font-body latin body font (nav labels) e.g. "Jost", sans-serif --font-jp Japanese font e.g. "Zen Kaku Gothic New", sans-serif ── BODY CLASS CONTRACT (only matters for the two *-cinema variants) ── - Home/hero pages with a dark image hero: (nav starts transparent over hero) - Subpages WITHOUT a dark image header: - Subpages WITH a dark image header: ── LAYOUT NOTE ────────────────────────────────────────────────────── The nav is position:fixed. Give the page's first section enough top padding (or the ) so content isn't hidden under the bar (~72-88px). ===================================================================== */ :root { --bg: #faf8f5; --text: #1a1815; --text-muted: #6b6660; --accent: #b08d57; --border: #e3ddd4; --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Jost", system-ui, sans-serif; --font-jp: "Zen Kaku Gothic New", system-ui, sans-serif; } /* Minimal self-contained helpers (the reference app defines these globally; reproduced here so the partials work on a bare page). The generated page may reuse .container for its own content width. */ nav.bh-nav a, .mob-menu a { text-decoration: none; color: inherit; } nav.bh-nav .container, .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } .link-slide { position: relative; display: inline-block; padding-bottom: 2px; } .link-slide::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .link-slide:hover::after { transform: scaleX(1); transform-origin: left; } /* ── Nav (base — shared across all variants) ─────────────────────── */ nav.bh-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), background 0.3s ease, border-color 0.3s ease; } nav.bh-nav .container { padding-block: 1.1rem; } nav.bh-nav .nav-links { display: flex; gap: 2rem; } nav.bh-nav .nav-links a { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; transition: color 0.3s ease; } nav.bh-nav .brand { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; white-space: nowrap; transition: color 0.3s ease; } nav.bh-nav .hamburger { display: none; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } nav.bh-nav .hamburger span { width: 22px; height: 2px; background: var(--text); transition: transform 0.3s, opacity 0.3s, background 0.3s; will-change: transform, opacity; backface-visibility: hidden; transform: translate3d(0, 0, 0); } /* ── Hamburger morph variants — open/close animation ────────────────── */ /* 1. classic-rotate (default) — simultaneous rotate + fade. */ nav.bh-nav .hamburger--morph-classic-rotate.open span:nth-child(1) { transform: translate3d(0, 7px, 0) rotate(45deg); } nav.bh-nav .hamburger--morph-classic-rotate.open span:nth-child(2) { opacity: 0; } nav.bh-nav .hamburger--morph-classic-rotate.open span:nth-child(3) { transform: translate3d(0, -7px, 0) rotate(-45deg); } /* 2. collapse-then-x — two-stage in BOTH directions via @property. */ @property --ham-ty-bh { syntax: ""; inherits: false; initial-value: 0px; } @property --ham-rot-bh { syntax: ""; inherits: false; initial-value: 0deg; } nav.bh-nav .hamburger--morph-collapse-then-x span { --ham-ty-bh: 0px; --ham-rot-bh: 0deg; transform: translate3d(0, var(--ham-ty-bh), 0) rotate(var(--ham-rot-bh)); transition: --ham-rot-bh 0.225s cubic-bezier(0.65, 0, 0.35, 1), --ham-ty-bh 0.225s cubic-bezier(0.65, 0, 0.35, 1) 0.225s, opacity 0.3s, background 0.3s; } nav.bh-nav .hamburger--morph-collapse-then-x.open span:nth-child(1), nav.bh-nav .hamburger--morph-collapse-then-x.open span:nth-child(3) { transition: --ham-ty-bh 0.225s cubic-bezier(0.65, 0, 0.35, 1), --ham-rot-bh 0.225s cubic-bezier(0.65, 0, 0.35, 1) 0.225s, opacity 0.3s, background 0.3s; } nav.bh-nav .hamburger--morph-collapse-then-x.open span:nth-child(1) { --ham-ty-bh: 7px; --ham-rot-bh: 45deg; } nav.bh-nav .hamburger--morph-collapse-then-x.open span:nth-child(2) { opacity: 0; } nav.bh-nav .hamburger--morph-collapse-then-x.open span:nth-child(3) { --ham-ty-bh: -7px; --ham-rot-bh: -45deg; } /* 3. spin-cross — whole button rotates 90° while spans morph to X. */ nav.bh-nav .hamburger--morph-spin-cross.open { transform: rotate(90deg); } nav.bh-nav .hamburger--morph-spin-cross.open span:nth-child(1) { transform: translate3d(0, 7px, 0) rotate(45deg); } nav.bh-nav .hamburger--morph-spin-cross.open span:nth-child(2) { opacity: 0; } nav.bh-nav .hamburger--morph-spin-cross.open span:nth-child(3) { transform: translate3d(0, -7px, 0) rotate(-45deg); } /* Variant 1: solid-anchored — always solid bg, logo left / nav right */ nav.bh-nav.solid-anchored, nav.bh-nav.solid-anchored-icons { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } nav.bh-nav.solid-anchored .container, nav.bh-nav.solid-anchored-icons .container { display: flex; align-items: center; justify-content: space-between; } nav.bh-nav.solid-anchored-icons .container { padding-block: 0.85rem; } /* Variant 8: frost-anchored — anchored sticky with frosted-glass bg. */ nav.bh-nav.frost-anchored { background: color-mix(in srgb, var(--bg) 35%, transparent); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent); } nav.bh-nav.frost-anchored .container { display: flex; align-items: center; justify-content: space-between; } /* ── Variants 9-12: floating navbars (pill|rounded × solid|frosted) ── */ nav.bh-nav.floating-pill-solid, nav.bh-nav.floating-pill-frosted, nav.bh-nav.floating-rounded-solid, nav.bh-nav.floating-rounded-frosted { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 80px); max-width: 1400px; border-bottom: none; } nav.bh-nav.floating-pill-solid .container, nav.bh-nav.floating-pill-frosted .container, nav.bh-nav.floating-rounded-solid .container, nav.bh-nav.floating-rounded-frosted .container { display: flex; align-items: center; justify-content: space-between; max-width: none; padding-inline: 1.75rem; padding-block: 0.85rem; } nav.bh-nav.floating-pill-solid, nav.bh-nav.floating-pill-frosted { border-radius: 9999px; } nav.bh-nav.floating-pill-solid .container, nav.bh-nav.floating-pill-frosted .container { padding-inline: 2.25rem; } nav.bh-nav.floating-rounded-solid, nav.bh-nav.floating-rounded-frosted { border-radius: 14px; } nav.bh-nav.floating-pill-solid, nav.bh-nav.floating-rounded-solid { background: var(--bg); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); } nav.bh-nav.floating-pill-frosted, nav.bh-nav.floating-rounded-frosted { background: color-mix(in srgb, var(--bg) 35%, transparent); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--border) 30%, transparent); } @media (max-width: 1024px) { nav.bh-nav.floating-pill-solid, nav.bh-nav.floating-pill-frosted, nav.bh-nav.floating-rounded-solid, nav.bh-nav.floating-rounded-frosted { top: 0; left: 0; transform: none; width: 100%; max-width: none; border-radius: 0; box-shadow: none; border: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); } nav.bh-nav.floating-pill-solid .container, nav.bh-nav.floating-pill-frosted .container, nav.bh-nav.floating-rounded-solid .container, nav.bh-nav.floating-rounded-frosted .container { max-width: 1440px; margin-inline: auto; padding-inline: 1.5rem; } } @media (max-width: 768px) { nav.bh-nav.floating-pill-solid .container, nav.bh-nav.floating-pill-frosted .container, nav.bh-nav.floating-rounded-solid .container, nav.bh-nav.floating-rounded-frosted .container { padding-inline: 1.5rem; } } /* Variant 2: transparent-cinema — transparent over hero, fades to solid */ nav.bh-nav.transparent-cinema { background: transparent; border-bottom: 1px solid transparent; } nav.bh-nav.transparent-cinema .container { display: flex; align-items: center; justify-content: space-between; } nav.bh-nav.transparent-cinema .brand, nav.bh-nav.transparent-cinema .nav-links a { color: rgba(255,255,255,0.92); } nav.bh-nav.transparent-cinema .hamburger span { background: rgba(255,255,255,0.92); } nav.bh-nav.transparent-cinema.scrolled, nav.bh-nav.transparent-cinema.menu-open { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); } nav.bh-nav.transparent-cinema.scrolled .brand, nav.bh-nav.transparent-cinema.scrolled .nav-links a, nav.bh-nav.transparent-cinema.menu-open .brand, nav.bh-nav.transparent-cinema.menu-open .nav-links a { color: var(--text); } nav.bh-nav.transparent-cinema.scrolled .hamburger span, nav.bh-nav.transparent-cinema.menu-open .hamburger span { background: var(--text); } body.is-subpage:not(.has-dark-image-header) nav.bh-nav.transparent-cinema { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); } body.is-subpage:not(.has-dark-image-header) nav.bh-nav.transparent-cinema .brand, body.is-subpage:not(.has-dark-image-header) nav.bh-nav.transparent-cinema .nav-links a { color: var(--text); } body.is-subpage:not(.has-dark-image-header) nav.bh-nav.transparent-cinema .hamburger span { background: var(--text); } /* Variant 3: hide-on-scroll — solid; slides up on scroll-down, reveals on scroll-up */ nav.bh-nav.hide-on-scroll, nav.bh-nav.hide-on-scroll-icons { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } nav.bh-nav.hide-on-scroll .container, nav.bh-nav.hide-on-scroll-icons .container { display: flex; align-items: center; justify-content: space-between; } nav.bh-nav.hide-on-scroll-icons .container { padding-block: 0.85rem; } nav.bh-nav.hide-on-scroll.hidden, nav.bh-nav.hide-on-scroll-icons.hidden { transform: translateY(-100%); } /* Icon-equipped link styling (solid-anchored-icons + hide-on-scroll-icons) */ nav.bh-nav .nav-links-icons { gap: 1.75rem; align-items: stretch; } nav.bh-nav .nav-link-icon { display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem; padding-block: 0.25rem; color: var(--text-muted); transition: color 0.3s; } nav.bh-nav .nav-link-icon:hover { color: var(--accent); } nav.bh-nav .nav-link-icon.active { color: var(--accent); } nav.bh-nav .nav-icon { width: 22px; height: 22px; color: var(--text-muted); transition: color 0.3s; } nav.bh-nav .nav-link-icon:hover .nav-icon, nav.bh-nav .nav-link-icon.active .nav-icon { color: var(--accent); } nav.bh-nav .nav-icon-label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em; line-height: 1; white-space: nowrap; } /* Variants 4 + 5: centered-split + centered-split-cinema (shared layout) */ nav.bh-nav.centered-split { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } nav.bh-nav.centered-split-cinema { background: transparent; border-bottom: 1px solid transparent; } nav.bh-nav.centered-split .container, nav.bh-nav.centered-split-cinema .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3rem; } nav.bh-nav.centered-split .nav-links, nav.bh-nav.centered-split-cinema .nav-links { gap: 2.75rem; } nav.bh-nav.centered-split .nav-links-left, nav.bh-nav.centered-split-cinema .nav-links-left { justify-self: end; } nav.bh-nav.centered-split .nav-links-right, nav.bh-nav.centered-split-cinema .nav-links-right { justify-self: start; } nav.bh-nav.centered-split .brand-centered, nav.bh-nav.centered-split-cinema .brand-centered { font-size: 1.4rem; font-weight: 500; text-align: center; justify-self: center; } nav.bh-nav.centered-split-cinema .brand, nav.bh-nav.centered-split-cinema .nav-links a { color: rgba(255,255,255,0.92); } nav.bh-nav.centered-split-cinema .hamburger span { background: rgba(255,255,255,0.92); } nav.bh-nav.centered-split-cinema.scrolled, nav.bh-nav.centered-split-cinema.menu-open { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); } nav.bh-nav.centered-split-cinema.scrolled .brand, nav.bh-nav.centered-split-cinema.scrolled .nav-links a, nav.bh-nav.centered-split-cinema.menu-open .brand, nav.bh-nav.centered-split-cinema.menu-open .nav-links a { color: var(--text); } nav.bh-nav.centered-split-cinema.scrolled .hamburger span, nav.bh-nav.centered-split-cinema.menu-open .hamburger span { background: var(--text); } body.is-subpage:not(.has-dark-image-header) nav.bh-nav.centered-split-cinema { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); } body.is-subpage:not(.has-dark-image-header) nav.bh-nav.centered-split-cinema .brand, body.is-subpage:not(.has-dark-image-header) nav.bh-nav.centered-split-cinema .nav-links a { color: var(--text); } body.is-subpage:not(.has-dark-image-header) nav.bh-nav.centered-split-cinema .hamburger span { background: var(--text); } @media (max-width: 1024px) { nav.bh-nav.centered-split .container, nav.bh-nav.centered-split-cinema .container { display: flex; justify-content: space-between; } nav.bh-nav.centered-split .nav-links-left, nav.bh-nav.centered-split .nav-links-right, nav.bh-nav.centered-split-cinema .nav-links-left, nav.bh-nav.centered-split-cinema .nav-links-right { display: none; } nav.bh-nav.centered-split .brand-centered, nav.bh-nav.centered-split-cinema .brand-centered { text-align: left; } nav.bh-nav.centered-split .hamburger, nav.bh-nav.centered-split-cinema .hamburger { display: flex; } } @media (max-width: 768px) { nav.bh-nav.solid-anchored .nav-links, nav.bh-nav.solid-anchored-icons .nav-links, nav.bh-nav.frost-anchored .nav-links, nav.bh-nav.transparent-cinema .nav-links, nav.bh-nav.hide-on-scroll .nav-links, nav.bh-nav.hide-on-scroll-icons .nav-links, nav.bh-nav.floating-pill-solid .nav-links, nav.bh-nav.floating-pill-frosted .nav-links, nav.bh-nav.floating-rounded-solid .nav-links, nav.bh-nav.floating-rounded-frosted .nav-links { display: none; } nav.bh-nav.solid-anchored .hamburger, nav.bh-nav.solid-anchored-icons .hamburger, nav.bh-nav.frost-anchored .hamburger, nav.bh-nav.transparent-cinema .hamburger, nav.bh-nav.hide-on-scroll .hamburger, nav.bh-nav.hide-on-scroll-icons .hamburger, nav.bh-nav.floating-pill-solid .hamburger, nav.bh-nav.floating-pill-frosted .hamburger, nav.bh-nav.floating-rounded-solid .hamburger, nav.bh-nav.floating-rounded-frosted .hamburger { display: flex; } } /* Mob menu — shared base. */ .mob-menu { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; gap: 1.5rem; } /* ── Mob menu surface variants ────────────────────────────────────── */ /* 1. editorial-light (default) */ .mob-menu--style-editorial-light { background: var(--bg); padding: 6rem 2rem 2rem; } .mob-menu--style-editorial-light a { font-size: 1.5rem; font-family: var(--font-display); font-style: italic; color: var(--text); } /* 2. editorial-dark */ .mob-menu--style-editorial-dark { background: #1a1815; padding: 6rem 2rem 2rem; } .mob-menu--style-editorial-dark a { font-size: 1.5rem; font-family: var(--font-display); font-style: italic; color: rgba(255, 255, 255, 0.92); } /* 3. centered-minimal-light */ .mob-menu--style-centered-minimal-light { background: var(--bg); padding: 2rem; align-items: center; justify-content: center; gap: 1.75rem; } .mob-menu--style-centered-minimal-light a { font-family: var(--font-jp); font-size: 1.15rem; font-weight: 300; letter-spacing: 0.06em; color: var(--text); } /* 4. centered-minimal-dark */ .mob-menu--style-centered-minimal-dark { background: #1a1815; padding: 2rem; align-items: center; justify-content: center; gap: 1.75rem; } .mob-menu--style-centered-minimal-dark a { font-family: var(--font-jp); font-size: 1.15rem; font-weight: 300; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.92); } /* 5. frosted */ .mob-menu--style-frosted { background: color-mix(in srgb, var(--bg) 35%, transparent); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); padding: 6rem 2rem 2rem; } .mob-menu--style-frosted a { font-size: 1.5rem; font-family: var(--font-display); font-style: italic; color: var(--text); } /* ── Mob menu reveal variants ─────────────────────────────────────── */ /* 1. slide-right (default) */ .mob-menu--reveal-slide-right { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .mob-menu--reveal-slide-right.open { transform: translateX(0); } /* 2. slide-top */ .mob-menu--reveal-slide-top { transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .mob-menu--reveal-slide-top.open { transform: translateY(0); } /* 3. fade */ .mob-menu--reveal-fade { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .mob-menu--reveal-fade.open { opacity: 1; pointer-events: auto; } /* 4. iris-from-button */ .mob-menu--reveal-iris-from-button { clip-path: circle(0% at 100% 0%); pointer-events: none; transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .mob-menu--reveal-iris-from-button.open { clip-path: circle(150% at 100% 0%); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .mob-menu { transition: opacity 0.15s ease !important; transform: none !important; opacity: 0; pointer-events: none; } .mob-menu.open { transform: none !important; opacity: 1; pointer-events: auto; } } /* ============================================================ EXPLORE DESIGN ACT. — shared theme (appended AFTER navbar.css in tokens.css, so this :root wins over navbar.css fallbacks). Mode: LIGHT. Base = pure white; accent band = light sage-beige. Aesthetic: clean editorial, barber-modern men's salon. Palette DERIVED FROM THE INTERIOR PHOTOS: - accent = the salon's signature glossy EMERALD tile counter - neutrals = white + the cream/sage materials, black steel text ============================================================ */ :root { --bg: #ffffff; /* WHITE base */ --surface: #fbfbf9; /* barely-off-white raised panels / cards */ --surface-2: #f5f3ef; /* warm light stone — neutral accent band */ --text: #1b1a17; /* near-black (steel / chairs) */ --text-muted: #645f57; /* warm grey */ --accent: #1f6e4c; /* emerald — the green tile counter */ --accent-deep: #185a3d; /* darker emerald for hovers */ --accent-soft: rgba(31, 110, 76, 0.10); --on-accent: #f7faf7; /* text on emerald */ --border: #e7e6dd; /* light hairline */ --font-display: "Zen Old Mincho", "Shippori Mincho", serif; --font-body: "Jost", system-ui, sans-serif; /* latin labels (nav, eyebrows) */ --font-jp: "Zen Kaku Gothic New", system-ui, sans-serif; /* Japanese body */ --maxw: 1240px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-jp); font-weight: 400; line-height: 1.85; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; margin: 0; color: var(--text); } /* container override (wins over navbar.css .container) */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.4rem, 5vw, 3rem); } .container--narrow { max-width: 780px; } /* sections */ .section { padding-block: clamp(4.5rem, 11vw, 8.5rem); } .section--surface { background: var(--surface); } .section--alt { background: var(--surface-2); } /* small uppercase label */ .eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent); font-weight: 500; display: inline-block; margin-bottom: 1.2rem; } /* display headings */ .display { font-family: var(--font-display); font-weight: 500; line-height: 1.08; } .h-xl { font-size: clamp(2.4rem, 6vw, 4.6rem); } .h-lg { font-size: clamp(1.9rem, 4.2vw, 3.1rem); } .h-md { font-size: clamp(1.4rem, 2.6vw, 2rem); } .lead { color: var(--text-muted); font-size: 1.02rem; line-height: 2; } .muted { color: var(--text-muted); } .accent { color: var(--accent); } /* buttons */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; padding: 1rem 2rem; border-radius: 2px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.1s ease; border: 1px solid var(--accent); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn-outline { background: transparent; color: var(--text); border-color: var(--border); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } /* subpage header band — clears the fixed nav */ .page-header { position: relative; padding-top: clamp(8rem, 15vh, 11rem); padding-bottom: clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--border); overflow: hidden; } .page-header__title { font-size: clamp(2.2rem, 5.5vw, 3.8rem); } .page-header__en { font-family: var(--font-body); letter-spacing: 0.4em; text-transform: uppercase; font-size: 11px; color: var(--accent); display: block; margin-bottom: 1rem; } /* image helpers */ .cover { width: 100%; height: 100%; object-fit: cover; display: block; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; } /* active nav link — current page highlighted in accent (all pages share this) */ nav.bh-nav .nav-links a.link-slide.active { color: var(--accent); } nav.bh-nav .nav-links a.link-slide.active::after { transform: scaleX(1); transform-origin: left; background: var(--accent); } /* footer (shared markup in footer.html) — light sage-beige band */ .site-footer { background: var(--surface-2); border-top: 1px solid var(--border); } .site-footer .footer-inner { display: grid; grid-template-columns: 1.1fr 2fr; gap: 3rem; padding-block: clamp(3.5rem, 7vw, 5rem); } .site-footer .footer-logo { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.04em; margin: 0 0 0.6rem; color: var(--text); } .site-footer .footer-logo .footer-dot { color: var(--accent); } .site-footer .footer-tag { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted); } .site-footer .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .site-footer .footer-col h4 { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; font-weight: 500; } .site-footer .footer-col p { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; } .site-footer .footer-col a:hover { color: var(--accent); } .site-footer .footer-bottom { border-top: 1px solid var(--border); padding-block: 1.4rem; } .site-footer .footer-bottom p { margin: 0; font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } @media (max-width: 760px) { .site-footer .footer-inner { grid-template-columns: 1fr; gap: 2rem; } .site-footer .footer-cols { grid-template-columns: 1fr; gap: 1.6rem; } }