/* BASE — merged from the static build's app.css, source order preserved. */ @keyframes corner-breathe { 0%, 72%, 100% { opacity: .72; filter: brightness(.95); } 82% { opacity: 1; filter: brightness(1.2); } 91% { opacity: .84; filter: brightness(1); } } body.seo-page .section-grid { position: relative; } body.seo-page .panel-white { background-color: #fff; background-image: var(--noise); } body.seo-page .seo-intro { display: flex; flex-direction: column; align-items: center; text-align: center; } body.seo-page .seo-intro h2 { margin: 24px 0 0; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: normal; text-transform: none; } body.seo-page .seo-intro h2 em { font-family: var(--font-serif); font-weight: 400; font-style: italic; } body.seo-page .seo-intro > p:not(.eyebrow) { margin: 26px auto 0; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; } body.seo-page .eyebrow { height: 34px; min-height: 34px; padding-inline: 20px; font-size: 16px; line-height: 20px; } body.seo-page .eyebrow::before { width: 7px; height: 7px; } .seo-rail-controls { display: none; } body.seo-page .seo-process__arrow { position: relative; width: 47px; height: 26px; } body.seo-page .seo-process__arrow::before { position: absolute; top: 13px; left: 0; width: 47px; height: 1px; content: ""; background: #000; } body.seo-page .seo-process__arrow::after { position: absolute; top: 8px; width: 11px; height: 11px; content: ""; border-top: 1px solid #000; border-left: 1px solid #000; } body.seo-page .seo-process__dots { display: flex; align-items: center; gap: 8px; } body.seo-page .seo-process__dots button { width: 10px; height: 10px; background: #d6c9c9; } body.seo-page .seo-process__dots button.is-active { width: 12px; height: 12px; background: var(--wine); } .digital-intro { display: flex; flex-direction: column; align-items: center; text-align: center; } .digital-intro h2 { margin: 31px 0 0; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: -.045em; } .digital-intro h2 em { display: block; font-family: var(--font-serif); font-weight: 400; } .digital-intro > p:last-child { margin: 22px 0 0; color: rgba(0,0,0,.5); font-size: 18px; line-height: 28px; } :root { --wine: var(--wp--preset--color--wine, #480c08); --coral: var(--wp--preset--color--coral, #e8473b); --paper: var(--wp--preset--color--paper, #f9f6f6); --ink: var(--wp--preset--color--ink, #000); --muted: var(--wp--preset--color--muted, #66605f); --line: rgba(0, 0, 0, 0.14); --font-sans: var(--wp--preset--font-family--display, "Clash Grotesk", "Avenir Next", Arial, sans-serif); --font-display: var(--font-sans); --font-serif: var(--wp--preset--font-family--serif, "Libre Caslon Condensed", "Times New Roman", serif); --font-mono: var(--wp--preset--font-family--mono, "IBM Plex Mono", Consolas, monospace); --noise: url("../img/noise.png"); --page-gutter: 40px; --page-max: 1440px; --rail-left: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter))); --rail-right: max(calc(var(--page-gutter) - 1px), calc((100% - var(--page-max)) / 2 + var(--page-gutter) - 1px)); --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 650ms; --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1); } body.menu-open { overflow: hidden; } .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; } .skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 16px; color: #fff; background: var(--wine); transition: transform var(--motion-base) var(--ease-standard); } .skip-link:focus { transform: translateY(0); } .page-container { width: min(100%, var(--page-max)); margin-inline: auto; padding-inline: var(--page-gutter); } .section-grid { position: relative; } .section-grid::before, .section-grid::after { position: absolute; z-index: 2; top: 0; bottom: 0; width: 1px; content: ""; pointer-events: none; background: rgba(0,0,0,.09); } .section-grid::before { left: var(--rail-left); } .section-grid::after { right: var(--rail-right); } .corner-frame__ornaments { position: absolute; z-index: 3; inset: -4px; pointer-events: none; } .corner-frame__ornaments i { position: absolute; width: 8px; height: 8px; background: center / 8px 8px no-repeat; } .corner-frame__ornaments i { background-image: url("../img/corner-left.svg"); } .corner-frame__ornaments i:nth-child(1) { top: 0; left: 0; } .corner-frame__ornaments i:nth-child(2) { top: 0; right: 0; transform: rotate(90deg); } .corner-frame__ornaments i:nth-child(3) { right: 0; bottom: 0; transform: rotate(180deg); } .corner-frame__ornaments i:nth-child(4) { bottom: 0; left: 0; transform: rotate(270deg); } .corner-frame__ornaments i { animation: corner-breathe 4.8s var(--ease-standard) infinite; } .corner-frame__ornaments i:nth-child(2) { animation-delay: 120ms; } .corner-frame__ornaments i:nth-child(3) { animation-delay: 240ms; } .corner-frame__ornaments i:nth-child(4) { animation-delay: 360ms; } .corner-frame:is(:hover, :focus-visible) .corner-frame__ornaments i { animation-duration: 1.15s; } .icon { display: inline-block; width: 15px; height: 15px; flex: none; vertical-align: middle; color: inherit; } .icon--chevron-down { margin-left: 4px; } .nav-link { position: relative; width: max-content; font-size: 18px; font-weight: 500; line-height: 1; } .nav-link::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; content: ""; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--motion-base) var(--ease-standard); } .nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; } .button { position: relative; display: inline-flex; min-width: 185px; min-height: 50px; align-items: center; justify-content: center; padding: 12px 24px; border: 1px solid transparent; font-size: 18px; font-weight: 500; line-height: 1; cursor: pointer; transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } .button--small { min-width: 148px; width: 148px; min-height: 40px; padding-block: 9px; } .button--primary { color: #fff; background: var(--wine); } .button--primary:hover, .button--primary:focus-visible { color: var(--wine); border-color: rgba(72,12,8,.35); background: #eee9e6; } .button--secondary { color: #000; border-color: rgba(0,0,0,.2); background: transparent; } .button--secondary:hover, .button--secondary:focus-visible { border-color: rgba(0,0,0,.45); background: #e9e5e8; } .button:active { transform: translateY(1px); } .button:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; } .eyebrow { display: inline-flex; height: 30px; min-height: 30px; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 3px 14px; border: 1px solid rgba(232,71,59,.22); border-radius: 999px; color: var(--coral); background: rgba(232,71,59,.05); font-size: 16px; font-weight: 400; line-height: 24px; backdrop-filter: blur(10px); } .eyebrow::before { width: 8px; height: 8px; content: ""; border-radius: 50%; background: currentColor; } .strip-surface { position: absolute; z-index: 0; top: 10px; right: 0; bottom: 0; left: 0; background-color: #fff; background-image: var(--noise); pointer-events: none; } .rail-corners { position: absolute; z-index: 3; left: var(--rail-left); right: var(--rail-right); height: 8px; pointer-events: none; } .rail-corners--top { top: -7px; } .rail-corners--bottom { bottom: 0; } .rail-corners--under { top: 0; } .rail-corners i { position: absolute; top: 0; display: block; width: 8px; height: 8px; background: url("../img/corner-l.svg") center / contain no-repeat; } .rail-corners i:first-child { left: 0; } .rail-corners i:last-child { right: 0; transform: scaleX(-1); } .rail-corners--under i { background-image: url("../img/corner-frame.svg"); } .rail-ticks { position: absolute; z-index: 3; left: var(--rail-left); right: var(--rail-right); height: 11px; pointer-events: none; } .rail-ticks i { position: absolute; top: 0; display: block; width: 11px; height: 11px; background: url("../img/label-mark.svg") 0 0 / 11px 11px no-repeat; } .rail-ticks i:first-child { left: 0; transform: scaleX(-1); } .rail-ticks i:last-child { right: 0; } .section-intro { position: relative; z-index: 2; text-align: center; } .section-intro h2 { margin: 20px auto 0; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: -.025em; } .section-intro h2 em { display: inline; font-family: var(--font-serif); font-weight: 400; } .section-intro > p:last-of-type:not(.eyebrow) { max-width: 768px; margin: 20px auto 0; color: rgba(0,0,0,.6); font-size: 20px; line-height: 28px; } .carousel-controls { display: flex; height: 26px; align-items: center; justify-content: space-between; margin-top: 40px; padding-inline: max(40px, calc((100% - 1440px) / 2 + 40px)); } .carousel-arrow { display: grid; width: 77px; height: 26px; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); } .carousel-arrow img { width: 77px; height: 26px; } .carousel-arrow--next img { transform: scaleX(-1); } .carousel-arrow:hover { transform: translateX(-4px); } .carousel-arrow--next:hover { transform: translateX(4px); } .carousel-arrow:disabled { opacity: .3; cursor: default; transform: none; } .carousel-dots { display: flex; align-items: center; gap: 8px; } .carousel-dots button { width: 10px; height: 10px; padding: 0; border: 0; background: rgba(72,12,8,.2); cursor: pointer; transition: width var(--motion-base), height var(--motion-base), background-color var(--motion-base); } .carousel-dots button.is-active { width: 12px; height: 12px; background: var(--coral); } .grid-transition { height: 242px; border-top: 1px solid rgba(0,0,0,.1); background: linear-gradient(rgba(72,12,8,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(72,12,8,.05) 1px, transparent 1px), var(--paper); background-size: 120px 120px; } .grid-transition span { position: absolute; inset: 0 max(40px, calc((100% - 1440px) / 2 + 40px)); border-inline: 1px solid rgba(72,12,8,.1); } .corner-block { position: relative; } .corner-block::before, .corner-block::after { position: absolute; z-index: 2; width: 30px; height: 30px; content: ""; background: var(--coral); clip-path: polygon(0 0,100% 0,100% 100%,60% 100%,60% 40%,0 40%); } .corner-block::before { top: -1px; right: -1px; } .corner-block::after { top: 11px; right: 17px; transform: rotate(180deg); } .split-block__copy h2 { max-width: 440px; margin: 34px 0 0; font-size: 54px; font-weight: 600; line-height: 54px; } .split-block__copy h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; } .split-block__copy > p:not(.eyebrow) { margin: 28px 0 0; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; } .ui-panel { border: 1px solid rgba(0,0,0,.1); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 26px rgba(0,0,0,.05); } .ui-panel__top { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid rgba(0,0,0,.08); } .ui-panel__top b { color: rgba(0,0,0,.45); font: 400 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; } .ui-panel__top > span { color: rgba(0,0,0,.45); font: 400 12px/1 var(--font-mono); } .status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 100px; background: #fceceb; color: var(--coral); font: 400 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } .status-pill::before { width: 6px; height: 6px; border-radius: 50%; background: currentcolor; content: ""; } .ui-meta { margin: 2px 0 0; color: rgba(0,0,0,.42); font: 400 12px/18px var(--font-mono); } .photo-collage { position: absolute; top: 0; right: 0; left: 0; height: 736px; overflow: hidden; background-image: linear-gradient(rgba(0,0,0,.03) 2px, transparent 2px), linear-gradient(90deg, rgba(0,0,0,.03) 2px, transparent 2px); background-position: calc(50% - 679px) 9.63px; background-size: 50.17px 51.79px; pointer-events: none; } .photo-collage__frame { position: relative; width: min(100%, var(--page-max)); height: 100%; margin-inline: auto; } .photo-collage__frame img { position: absolute; top: var(--y); left: var(--x); width: var(--w); height: 134px; object-fit: cover; } .next-section-placeholder { display: grid; min-height: 240px; place-items: center; padding: 48px; border-top: 1px solid rgba(0,0,0,.1); color: rgba(0,0,0,.42); background: #f2efea; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-align: center; text-transform: uppercase; } .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard); } .js [data-reveal].is-visible { opacity: 1; transform: translateY(0); } .js [data-reveal-group] [data-reveal]:nth-child(2) { transition-delay: 70ms; } .js [data-reveal-group] [data-reveal]:nth-child(3) { transition-delay: 140ms; } .js [data-reveal-group] [data-reveal]:nth-child(4) { transition-delay: 210ms; } .web-section-intro { position: relative; z-index: 3; text-align: center; } .web-section-intro h2 { max-width: 720px; margin: 28px auto 0; font-size: 50px; line-height: .98; letter-spacing: -.045em; } .web-section-intro h2 em { font-family: var(--font-serif); font-weight: 400; } .web-section-intro > p:last-child { margin: 25px 0 0; color: var(--idris-muted); font-size: 18px; } .web-rail-status { display: flex; justify-content: center; gap: 8px; } .web-rail-status button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 0; background: #d0c9c7; cursor: pointer; } .web-rail-status .is-active { background: var(--coral); } .web-arrow { position: relative; width: 52px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; } .web-arrow--previous { justify-self: start; } .web-arrow--next { justify-self: end; } .web-arrow span { display: block; width: 48px; height: 1px; background: #000; } .web-arrow span::before { display: block; width: 11px; height: 11px; content: ""; border-top: 1px solid #000; border-left: 1px solid #000; transform: translateY(-5px) rotate(-45deg); } .web-arrow--next span::before { margin-left: auto; transform: translateY(-5px) rotate(135deg); } .web-arrow:disabled { opacity: .25; cursor: default; } .photo-collage__strip, .photo-collage__rest { display: contents; } body.web-development-page .web-section-intro { position: relative; z-index: 3; display: flex; width: min(100%, var(--wd-page)); flex-direction: column; align-items: center; margin-inline: auto; padding-inline: var(--wd-gutter); text-align: center; } body.web-development-page .web-section-intro .eyebrow { display: flex; width: 135px; height: 30px; min-height: 30px; padding: 0; gap: 10px; font-size: 16px; line-height: 26px; } body.web-development-page .web-section-intro h2 { max-width: none; margin: 23px 0 0; color: #1a1a1a; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: 0; } body.web-development-page .web-section-intro h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; line-height: 0; } body.web-development-page .section-intro h2 em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; line-height: 60px; } body.web-development-page .web-section-intro > p:last-child { max-width: none; margin: 13.8px 0 0; color: var(--wd-muted); font-size: 18px; line-height: 26px; } body.web-development-page .eyebrow--hero { display: flex; width: 329px; height: 32px; min-height: 32px; padding: 0; gap: 10px; font-size: 16px; line-height: 26px; } body.web-development-page .web-arrow { width: 77px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; } body.web-development-page .web-arrow--previous { justify-self: start; } body.web-development-page .web-arrow--next { justify-self: end; } body.web-development-page .web-arrow img { display: block; width: 77px; height: 26px; } body.web-development-page .web-arrow--next img { transform: scaleX(-1); } body.web-development-page .web-arrow:disabled { opacity: .25; cursor: default; } body.web-development-page .web-rail-status { display: flex; justify-content: center; gap: 6px; } body.web-development-page .web-rail-status button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 0; background: #c9bbbb; cursor: pointer; } body.web-development-page .web-rail-status .is-active { background: var(--coral); } body.email-marketing-page .eyebrow { height: 30px; min-height: 30px; padding-inline: 19px; font-size: 16px; line-height: 20px; } body.email-marketing-page .eyebrow::before { width: 7px; height: 7px; } .seo-page .section-grid { position: relative; } .seo-page .panel-white { background-color: #fff; background-image: var(--noise); } .seo-page .seo-intro { display: flex; flex-direction: column; align-items: center; text-align: center; } .seo-page .seo-intro h2 { margin: 24px 0 0; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: normal; text-transform: none; } .seo-page .seo-intro h2 em { font-family: var(--font-serif); font-weight: 400; font-style: italic; } .seo-page .seo-intro > p:not(.eyebrow) { margin: 26px auto 0; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; } .seo-page .eyebrow { height: 34px; min-height: 34px; padding-inline: 20px; font-size: 16px; line-height: 20px; } .seo-page .eyebrow::before { width: 7px; height: 7px; } .seo-page .seo-process__arrow { position: relative; width: 47px; height: 26px; } .seo-page .seo-process__arrow::before { position: absolute; top: 13px; left: 0; width: 47px; height: 1px; content: ""; background: #000; } .seo-page .seo-process__arrow::after { position: absolute; top: 8px; width: 11px; height: 11px; content: ""; border-top: 1px solid #000; border-left: 1px solid #000; } .seo-page .seo-process__dots { display: flex; align-items: center; gap: 8px; } .seo-page .seo-process__dots button { width: 10px; height: 10px; background: #d6c9c9; } .seo-page .seo-process__dots button.is-active { width: 12px; height: 12px; background: var(--wine); } .web-development-page .web-section-intro { position: relative; z-index: 3; display: flex; width: min(100%, var(--wd-page)); flex-direction: column; align-items: center; margin-inline: auto; padding-inline: var(--wd-gutter); text-align: center; } .web-development-page .web-section-intro .eyebrow { display: flex; width: 135px; height: 30px; min-height: 30px; padding: 0; gap: 10px; font-size: 16px; line-height: 26px; } .web-development-page .web-section-intro h2 { max-width: none; margin: 23px 0 0; color: #1a1a1a; font-size: 60px; font-weight: 600; line-height: 60px; letter-spacing: 0; } .web-development-page .web-section-intro h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; line-height: 0; } .web-development-page .section-intro h2 em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; line-height: 60px; } .web-development-page .web-section-intro > p:last-child { max-width: none; margin: 13.8px 0 0; color: var(--wd-muted); font-size: 18px; line-height: 26px; } .web-development-page .eyebrow--hero { display: flex; width: 329px; height: 32px; min-height: 32px; padding: 0; gap: 10px; font-size: 16px; line-height: 26px; } .web-development-page .web-arrow { width: 77px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; } .web-development-page .web-arrow--previous { justify-self: start; } .web-development-page .web-arrow--next { justify-self: end; } .web-development-page .web-arrow img { display: block; width: 77px; height: 26px; } .web-development-page .web-arrow--next img { transform: scaleX(-1); } .web-development-page .web-arrow:disabled { opacity: .25; cursor: default; } .web-development-page .web-rail-status { display: flex; justify-content: center; gap: 6px; } .web-development-page .web-rail-status button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 0; background: #c9bbbb; cursor: pointer; } .web-development-page .web-rail-status .is-active { background: var(--coral); } .email-marketing-page .eyebrow { height: 30px; min-height: 30px; padding-inline: 19px; font-size: 16px; line-height: 20px; } .email-marketing-page .eyebrow::before { width: 7px; height: 7px; } .page-container, .frame-shell { width: min(100%, var(--page-max)); margin-inline: auto; padding-inline: var(--page-gutter); } .button:focus-visible, .nav-link:focus-visible, .menu-toggle:focus-visible, .service-rail__viewport:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; } * { box-sizing: border-box; } html { color: #000; background-color: var(--paper); background-image: var(--noise); font-family: var(--font-sans); text-rendering: geometricPrecision; } body { margin: 0; min-width: 320px; overflow-x: hidden; background: transparent; } a { color: inherit; text-decoration: none; } button, a { -webkit-tap-highlight-color: transparent; } img { display: block; max-width: 100%; } .site-header { position: relative; z-index: 50; padding-top: 20px; } .frame-shell--header { position: relative; } .frame-ornaments, .frame-ornaments { inset: 0 var(--rail-right) 0 var(--rail-left); } .frame-ornaments i, .frame-ornaments i { background-image: url("../img/corner-frame.svg"); } .frame-ornaments i:nth-child(1), .corner-frame__ornaments i:nth-child(1) { top: 0; left: 0; } .frame-ornaments i:nth-child(2), .corner-frame__ornaments i:nth-child(2) { top: 0; right: 0; transform: rotate(90deg); } .frame-ornaments i:nth-child(3), .corner-frame__ornaments i:nth-child(3) { right: 0; bottom: 0; transform: rotate(180deg); } .frame-ornaments i:nth-child(4), .corner-frame__ornaments i:nth-child(4) { bottom: 0; left: 0; transform: rotate(270deg); } .site-nav { position: relative; height: 72px; } .site-nav::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-block: 1px solid rgba(0,0,0,.1); background-color: #fff; background-image: var(--noise); } .site-nav__desktop { display: flex; align-items: center; justify-content: center; gap: 60px; width: 100%; height: 100%; padding-left: 41px; } .site-nav__desktop .button { margin-left: 5px; } .site-nav__mobile { display: none; } .brand { display: flex; justify-content: center; } .brand img { width: 182px; height: 26px; object-fit: contain; } .hero__title { margin: 19px auto 0; font-family: var(--font-display); font-size: clamp(58px, 5.55vw, 80px); font-weight: 600; line-height: 1; text-transform: capitalize; } .site-footer { position: relative; min-height: 730px; padding: 76px 40px 0; overflow: hidden; color: #fff; background: #480c08 url("../img/footer-icon-01.svg") center/cover no-repeat; } .site-footer__grid, .site-footer__bottom { position: relative; z-index: 1; max-width: 1360px; margin-inline: auto; } .site-footer__grid { display: grid; grid-template-columns: 649px 284px 329px max-content; justify-content: start; gap: 0; } .newsletter h2 { max-width: 220px; margin: 0 0 4px; font-size: 32px; font-weight: 500; line-height: 32px; } .newsletter label { display: block; width: 325px; border-bottom: 1px solid rgba(255,255,255,.2); } .newsletter label + label { margin-top: 10px; } .newsletter input { width: 100%; height: 64px; padding: 0; border: 0; outline: 0; color: #fff; background: transparent; font: inherit; font-size: 16px; } .newsletter input::placeholder { color: rgba(255,255,255,.55); } .newsletter button { width: 325px; height: 50px; margin-top: 39px; border: 0; color: var(--wine); background: #fff; font: 500 18px var(--font-sans); cursor: pointer; } .site-footer .site-footer__socials { position: absolute; z-index: 2; top: 473px; right: var(--rail-left); display: flex; flex-direction: row; gap: 0; padding-top: 0; } .site-footer__socials a { display: grid; width: 50px; height: 50px; place-items: center; } .site-footer__socials img { display: block; } .site-footer__socials .site-footer__social-link--facebook { border: 1px solid rgba(255,255,255,.14); } .site-footer__bottom { position: absolute; z-index: 1; top: 576px; right: var(--rail-left); left: var(--rail-left); display: flex; align-items: center; justify-content: space-between; max-width: none; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 18px; } .site-footer__bottom p { margin: 0; } .site-footer__stripes { position: absolute; top: 675px; right: var(--rail-left); left: var(--rail-left); height: 194.286px; background: rgba(255,255,255,.1); -webkit-mask: url("../img/footer-wordmark.png") 0 0 / 1360px 194.286px no-repeat; mask: url("../img/footer-wordmark.png") 0 0 / 1360px 194.286px no-repeat; } .site-nav__desktop .nav-menu { display: contents; margin: 0; padding: 0; list-style: none; } .site-nav__desktop .nav-menu li { position: relative; display: flex; align-items: center; } .nav-link--placeholder { color: var(--coral); } .site-nav__desktop .sub-menu { position: absolute; z-index: 40; top: calc(100% + 18px); left: 50%; display: grid; min-width: 220px; gap: 14px; margin: 0; padding: 20px 22px; list-style: none; border: 1px solid rgba(72, 12, 8, 0.12); background: #fff; box-shadow: 0 18px 40px rgba(72, 12, 8, 0.1); opacity: 0; transform: translate(-50%, -6px); transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), visibility var(--motion-base); visibility: hidden; } .site-nav__desktop .sub-menu li { display: block; } .site-nav__desktop .sub-menu .nav-link { font-size: 16px; white-space: nowrap; } .site-nav__desktop .menu-item-has-children:is(:hover, :focus-within) > .sub-menu { opacity: 1; transform: translate(-50%, 0); visibility: visible; } .nav-link--dropdown .icon--chevron-down { width: 16px; height: 16px; margin-left: 6px; transition: transform var(--motion-base) var(--ease-standard); } .menu-item-has-children:is(:hover, :focus-within) > .nav-link--dropdown .icon--chevron-down { transform: rotate(180deg); } .mobile-menu__list { display: grid; margin: 0; padding: 0; list-style: none; } /* ---- the services panel ------------------------------------------------- * The dropdown is a panel of rows rather than a list of links: each row is an * icon, the item's title, and its menu Description as a second line. A row * classed `is-featured` is promoted into a card at the top; one classed * `is-label` is a heading for the rows beneath it. * * It opens on hover and on focus-within -- no JavaScript, so it works before * scripts load and for anyone tabbing through the header. */ .site-nav__desktop .sub-menu.nav-panel { min-width: 340px; gap: 2px; padding: 8px; text-align: left; } .nav-panel__row { display: grid; align-items: start; grid-template-columns: 20px 1fr; gap: 12px; padding: 10px 12px; color: inherit; text-decoration: none; transition: background var(--motion-base) var(--ease-standard); } /* A row with no icon keeps its text on the same line as the rest. */ .nav-panel__row:not(:has(.nav-panel__icon)) { grid-template-columns: 1fr; } .nav-panel__row:not(:has(.nav-panel__icon)) .nav-panel__text { grid-column: 1; } .nav-panel__row:is(:hover, :focus-visible) { background: rgba(72, 12, 8, .05); outline: 0; } .nav-panel__row:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; } .nav-panel__icon { display: block; width: 20px; margin-top: 2px; color: var(--wine); } .nav-panel__icon svg { display: block; width: 20px; height: 20px; } .nav-panel__text { display: block; min-width: 0; } .nav-panel__title { display: block; color: #000; font-size: 16px; font-weight: 500; line-height: 22px; white-space: nowrap; } .nav-panel__desc { display: block; margin-top: 1px; color: rgba(0, 0, 0, .55); font-size: 13px; font-weight: 400; line-height: 18px; } /* The promoted row: same anatomy, drawn as a card. */ .nav-panel .is-featured .nav-panel__row { margin-bottom: 6px; padding: 12px; border: 1px solid rgba(72, 12, 8, .1); background: rgba(72, 12, 8, .03); } .nav-panel .is-featured .nav-panel__row:is(:hover, :focus-visible) { background: rgba(72, 12, 8, .07); } .nav-panel__label { display: block; padding: 10px 12px 4px; color: rgba(0, 0, 0, .45); font-family: var(--font-mono, inherit); font-size: 11px; font-weight: 400; letter-spacing: .12em; line-height: 14px; text-transform: uppercase; } .mobile-menu__list .sub-menu { display: grid; margin: 0; padding: 0 0 0 18px; list-style: none; } .site-footer__grid { grid-template-columns: 649px 284px 329px max-content; } /* The columns are widget areas rather than the static build's bare