/* ========================================================= Legends Ranch — redesign Brandbook: #880b1c / #000 / #d9d9d9 / #fff Type pair: Playfair Display (display) + Raleway (body) ========================================================= */ :root { --c-red: #880b1c; --c-red-deep: #5e0712; --c-red-soft: #a8243a; --c-black: #0a0a0a; --c-ink: #1a1a1a; --c-grey-line: #d9d9d9; --c-grey-mute: #8a8580; --c-cream: #faf7f0; --c-cream-deep: #f1ebdd; --c-white: #ffffff; --ff-display: "Playfair Display", "Times New Roman", serif; --ff-body: "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --shell: 1280px; --gutter: clamp(20px, 4vw, 40px); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* Wider container on large monitors — keep 1280 as default for ≤14" screens, expand on bigger */ @media (min-width: 1600px) { :root { --shell: 1400px; } } @media (min-width: 1900px) { :root { --shell: 1560px; } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--c-black); } /* Override the default WP admin-bar margin-top so the hero flushes under the bar. Higher specificity (html.wp-toolbar) wins against WP core's inline `html` rule. */ @media screen { html.wp-toolbar { margin-top: 0 !important; } } @media screen and (max-width: 782px) { html.wp-toolbar { margin-top: 0 !important; } } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--ff-body); font-weight: 400; font-size: 17px; line-height: 1.65; color: var(--c-ink); background: var(--c-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; } ul { list-style: none; padding: 0; margin: 0; } /* ---------- typography ---------- */ h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; margin: 0; } .eyebrow { font-family: var(--ff-body); font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-grey-mute); } .eyebrow--red { color: var(--c-red); } .eyebrow--light { color: rgba(255,255,255,0.72); } .mono { font-family: var(--ff-mono); letter-spacing: 0.02em; font-feature-settings: "tnum" 1; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 0; transition: background 0.35s var(--ease), border-color 0.35s var(--ease), top 0.2s var(--ease); border-bottom: 1px solid rgba(255,255,255,0.12); } /* Sit below WP admin bar when an admin is logged in. */ .admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } } .site-header.is-scrolled { background: rgba(8,8,8,0.92); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); border-color: rgba(255,255,255,0.05); } /* hover backdrop at top — улучшает читаемость меню над светлыми участками */ .site-header:not(.is-scrolled):hover { background: rgba(8,8,8,0.5); backdrop-filter: blur(10px) saturate(115%); -webkit-backdrop-filter: blur(10px) saturate(115%); } /* ========================================================= DARK HEADER VARIANT For pages with light hero/content directly under the header. Use + dark logo in markup. ========================================================= */ .has-light-hero .site-header { border-bottom-color: rgba(0,0,0,0.08); } .has-light-hero .topbar { border-bottom-color: rgba(0,0,0,0.08); } .has-light-hero .topbar__loc { color: rgba(0,0,0,0.55); } .has-light-hero .topbar__phone { color: var(--c-ink); } .has-light-hero .topbar__phone-label { color: rgba(0,0,0,0.55); } .has-light-hero .topbar__phone-num { color: var(--c-ink); } .has-light-hero .topbar__phone:hover .topbar__phone-num { color: var(--c-red); } .has-light-hero .topbar__book { color: var(--c-red); } .has-light-hero .topbar__book:hover { color: var(--c-ink); } .has-light-hero .nav__link { color: var(--c-ink); } .has-light-hero .nav__link::after { background: var(--c-red); } .has-light-hero .btn--ghost { border-color: rgba(0,0,0,0.4); color: var(--c-ink); } .has-light-hero .btn--ghost:hover { border-color: var(--c-red); background: rgba(136,11,28,0.08); color: var(--c-ink); } .has-light-hero .phone-icon { color: var(--c-ink); border-color: rgba(0,0,0,0.4); } .has-light-hero .phone-icon:hover { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); } .has-light-hero .menu-toggle { color: var(--c-ink); border-color: rgba(0,0,0,0.4); } .has-light-hero .wp-block-button.btn--ghost .wp-element-button { color: #1a1a1a; } /* hover backdrop on light pages — flip to white-tinted */ .has-light-hero .site-header:not(.is-scrolled):hover { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px) saturate(115%); -webkit-backdrop-filter: blur(10px) saturate(115%); } /* On scroll, dark header still goes dark (override default) */ .has-light-hero .site-header.is-scrolled { background: rgba(255,255,255,0.94); border-color: rgba(0,0,0,0.06); } .has-light-hero .site-header.is-scrolled .topbar { border-bottom-color: rgba(0,0,0,0.06); } .site-header__row { padding-block: 18px; transition: padding 0.35s var(--ease); } .site-header.is-scrolled .site-header__row { padding-block: 12px; } .site-header__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; } .site-header__logo { display: inline-flex; align-items: center; gap: 12px; color: var(--c-white); } .site-header__logo img { height: 84px; width: auto; filter: drop-shadow(0 2px 14px rgba(0,0,0,0.6)); transition: height 0.35s var(--ease); display: block; } .site-header.is-scrolled .site-header__logo img { height: 56px; } .nav { display: flex; justify-content: center; gap: clamp(20px, 2.5vw, 36px); } .nav__list { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2.5vw, 36px); list-style: none; padding: 0; margin: 0; flex-wrap: nowrap; } .nav__list > li { position: relative; } .nav__list > li > a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-body); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--c-white); padding: 10px 0; transition: color 0.2s var(--ease); text-decoration: none; } .nav__list > li > a:hover { color: var(--c-red-soft); } /* Caret on parent items with a submenu (WP adds .menu-item-has-children) */ .nav__list .menu-item-has-children > a, .nav__list .page_item_has_children > a { position: relative; padding-right: 16px; } .nav__list .menu-item-has-children > a::before, .nav__list .page_item_has_children > a::before { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-65%) rotate(45deg); opacity: 0.7; transition: transform 0.25s var(--ease); } .nav__list .menu-item-has-children:hover > a::before, .nav__list .menu-item-has-children:focus-within > a::before, .nav__list .page_item_has_children:hover > a::before, .nav__list .page_item_has_children:focus-within > a::before { transform: translateY(-30%) rotate(225deg); } /* Dropdown panel (WP outputs