/* NOTE: All photography on the site is placeholder imagery from another property. Every photo will be replaced with real Porter Ranch shots before launch. */ /* ---------- Document ---------- */ body { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; line-height: 1.7; color: var(--ink); background-color: var(--cream); -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } img { max-width: 100%; display: block; } p { margin: 0 0 1.25rem; } p:last-child { margin-bottom: 0; } /* Anchor targets land clear of the fixed nav bar */ [id] { scroll-margin-top: calc(var(--nav-h) + 1rem); } /* ---------- Type ---------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0; } .eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 1.25rem; } .eyebrow--gold { color: var(--gold); } .label-sm { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } /* ---------- Layout ---------- */ .wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Buttons and links ---------- */ .button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 1rem 1.75rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .button--gold { background-color: var(--gold); border-color: var(--gold); color: var(--ink); } .button--gold:hover { background-color: var(--gold-hover); border-color: var(--gold-hover); color: var(--ink); } .button--ghost { background-color: transparent; border-color: var(--ghost-border); color: var(--on-dark); } .button--ghost:hover { border-color: var(--on-dark); color: var(--on-dark); } .button--outline-dark { background-color: transparent; border-color: var(--ink); color: var(--ink); } .button--outline-dark:hover { background-color: var(--ink); color: var(--cream); } .link-gold { display: inline-block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--gold); padding-bottom: 0.5rem; border-bottom: 1px solid var(--hairline-light); transition: color 0.2s ease, border-color 0.2s ease; } .link-gold:hover { color: var(--gold-hover); border-bottom-color: var(--gold); } .link-gold--on-dark { border-bottom-color: var(--hairline-dark); } /* ---------- Focus ---------- */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ---------- Scroll reveal ---------- The starting (hidden) state only applies once reveal.js has added .js-reveal-ready to , so a script failure never blanks the page. */ .js-reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); } .js-reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } @media (prefers-reduced-motion: reduce) { .js-reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }