/* ============================================================
Ponderosa Pixels — Site-wide styles
Design-system tokens (colors_and_type.css) are loaded first via a
tag in each page's , before this file — do not @import
them here (a loads in parallel; an @import would serialize).
(do not duplicate token values here)
============================================================ */
/* ------------------------------------------------------------
Reset / base
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; height: auto; }
/* is layout-transparent so existing `figure > img` sizing rules
(width/height 100%, object-fit) keep working when an ![]()
is wrapped. */
picture { display: contents; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-canyon); outline-offset: 3px; }
body {
background: var(--bg-primary);
color: var(--fg-primary);
overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
/* Visually-hidden but accessible to screen readers & search engines.
Used for keyword-bearing text inside headings that must stay
visually unchanged, and for semantic headings that establish
document outline without altering the design. */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ------------------------------------------------------------
Cinematic easing — used everywhere motion happens
------------------------------------------------------------ */
:root {
--ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
--ease-cinematic-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--nav-h: 80px;
}
/* ------------------------------------------------------------
Layout primitives
------------------------------------------------------------ */
.container {
width: 100%;
max-width: 1440px;
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 64px);
}
.container--wide { max-width: 1680px; }
.section { position: relative; }
/* ------------------------------------------------------------
Eyebrow / label component
Used everywhere a small uppercase label sits above a heading
------------------------------------------------------------ */
.eyebrow {
font-family: var(--font-primary);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--fg-secondary);
display: inline-flex;
align-items: center;
gap: 12px;
}
.eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.6;
}
.eyebrow--on-dark { color: var(--color-sage); }
/* ------------------------------------------------------------
Buttons
------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-primary);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
padding: 18px 32px;
border-radius: var(--radius-sm);
transition: background-color 220ms var(--ease-cinematic),
color 220ms var(--ease-cinematic),
transform 220ms var(--ease-cinematic);
white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn--primary {
background: var(--action-default);
color: var(--action-text);
}
.btn--primary:hover { background: var(--action-hover); }
.btn--primary:active { background: var(--action-active); }
.btn--ghost {
background: transparent;
color: var(--fg-on-dark);
border: 1px solid rgba(245, 241, 234, 0.35);
padding: 17px 31px; /* offset 1px border so size matches primary */
}
.btn--ghost:hover {
border-color: var(--color-stone);
background: rgba(245, 241, 234, 0.06);
}
/* Inline editorial link with arrow */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-primary);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--fg-accent);
position: relative;
padding-bottom: 4px;
transition: color 200ms var(--ease-cinematic);
}
.link-arrow::after {
content: "";
position: absolute;
left: 0; bottom: 0;
height: 1px;
width: 100%;
background: currentColor;
transform-origin: left;
transform: scaleX(1);
transition: transform 320ms var(--ease-cinematic);
}
.link-arrow .arrow {
display: inline-block;
transition: transform 280ms var(--ease-cinematic);
}
.link-arrow:hover .arrow { transform: translateX(6px); }
.link-arrow:hover::after { transform: scaleX(0.4); }
.link-arrow--on-dark { color: var(--color-canyon); }
/* ------------------------------------------------------------
Social tiles — clickable platform pills used both on the
Portfolio page header and the home page hero. Designed for
dark backgrounds (Pine / hero overlay).
------------------------------------------------------------ */
.social-tiles {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: clamp(24px, 3vw, 32px);
}
.social-tile {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 22px;
border: 1px solid rgba(245, 241, 234, 0.22);
border-radius: var(--radius-sm);
background: rgba(245, 241, 234, 0.04);
color: var(--color-stone);
font-family: var(--font-primary);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
transition: background-color 240ms var(--ease-cinematic),
border-color 240ms var(--ease-cinematic),
color 240ms var(--ease-cinematic),
transform 240ms var(--ease-cinematic);
}
.social-tile:hover {
background: rgba(190, 107, 75, 0.18);
border-color: var(--color-canyon);
color: var(--color-stone);
transform: translateY(-1px);
}
.social-tile__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--color-sage);
transition: color 240ms var(--ease-cinematic);
}
.social-tile:hover .social-tile__icon { color: var(--color-canyon); }
.social-tile__icon svg { width: 100%; height: 100%; display: block; }
/* ------------------------------------------------------------
Page header — used at the top of every internal page
(Services / Portfolio / About / Contact). Dark Pine band
with topo overlay, an eyebrow, a large title, and an
optional lead paragraph.
------------------------------------------------------------ */
.page-header {
background: var(--color-pine);
color: var(--color-stone);
padding: clamp(96px, 12vw, 168px) 0 clamp(64px, 9vw, 128px);
position: relative;
overflow: hidden;
}
.page-header::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../assets/patterns/topo_map_overlay_dark_with_transparency.svg');
background-size: 1400px;
background-repeat: repeat;
opacity: 0.08;
pointer-events: none;
}
.page-header .container { position: relative; z-index: 1; }
.page-header__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(32px, 5vw, 80px);
align-items: end;
}
.page-header__meta {
display: flex;
flex-direction: column;
gap: 16px;
}
.page-header__title {
font-family: var(--font-primary);
font-weight: var(--fw-semibold);
font-size: clamp(44px, 7vw, 96px);
line-height: 0.98;
letter-spacing: var(--ls-tight);
color: var(--color-stone);
max-width: 14ch;
}
.page-header__title .canyon {
color: var(--color-canyon);
font-style: italic;
font-weight: var(--fw-regular);
}
.page-header__lead {
font-family: var(--font-primary);
font-size: clamp(16px, 1.3vw, 19px);
color: rgba(245, 241, 234, 0.85);
line-height: var(--lh-body);
max-width: 56ch;
margin-top: clamp(16px, 2vw, 20px);
}
@media (max-width: 768px) {
.page-header__grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ------------------------------------------------------------
CTA Band — reusable bottom-of-page Pine section with
Canyon glow + topo overlay + headline + single CTA.
Used on Services / About / Contact pages.
------------------------------------------------------------ */
.cta-band {
position: relative;
background: var(--color-pine);
color: var(--color-stone);
padding: clamp(96px, 14vw, 200px) 0;
overflow: hidden;
isolation: isolate;
}
.cta-band::before {
content: "";
position: absolute;
bottom: -30%; right: -20%;
width: 80%; height: 130%;
background: radial-gradient(closest-side,
rgba(190, 107, 75, 0.40) 0%,
rgba(190, 107, 75, 0.10) 40%,
transparent 70%);
pointer-events: none;
z-index: 0;
}
.cta-band::after {
content: "";
position: absolute;
inset: 0;
background-image: url('../assets/patterns/topo_map_overlay_dark_with_transparency.svg');
background-size: 1500px;
background-repeat: repeat;
opacity: 0.06;
pointer-events: none;
z-index: 0;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band__inner {
display: flex;
flex-direction: column;
gap: clamp(24px, 4vw, 40px);
max-width: 24ch;
}
.cta-band__eyebrow { color: var(--color-sage); }
.cta-band__headline {
font-family: var(--font-primary);
font-weight: var(--fw-semibold);
font-size: clamp(40px, 6.5vw, 88px);
line-height: 0.98;
letter-spacing: var(--ls-tight);
color: var(--color-stone);
max-width: 14ch;
}
.cta-band__headline .canyon {
color: var(--color-canyon);
font-style: italic;
font-weight: var(--fw-regular);
}
/* ------------------------------------------------------------
Sticky navigation
- Hidden until scrolled past the hero
- When scrolled: frosted Pine bar fixed to top
------------------------------------------------------------ */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--nav-h);
display: flex;
align-items: center;
pointer-events: none; /* let hero clicks pass while invisible */
opacity: 0;
transform: translateY(-12px);
transition: opacity 420ms var(--ease-cinematic),
transform 420ms var(--ease-cinematic),
background-color 320ms var(--ease-cinematic),
backdrop-filter 320ms var(--ease-cinematic);
}
.site-header.is-scrolled,
body.has-fixed-header .site-header {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
background: rgba(31, 67, 54, 0.82);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid rgba(145, 163, 146, 0.18);
}
/* Internal pages (everything except home) pad the main column so
the first section isn't tucked beneath the fixed nav. */
body.has-fixed-header main {
padding-top: var(--nav-h);
}
.site-header__inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.site-header__logo {
display: inline-flex;
align-items: center;
height: 28px;
}
.site-header__logo img { height: 100%; width: auto; }
.site-nav {
display: flex;
align-items: center;
gap: clamp(20px, 2.4vw, 36px);
}
.site-nav__list {
display: flex;
align-items: center;
gap: clamp(20px, 2.4vw, 36px);
list-style: none;
}
.site-nav__link {
font-family: var(--font-primary);
font-size: var(--fs-sm);
font-weight: var(--fw-regular);
color: var(--color-stone);
letter-spacing: var(--ls-wide);
position: relative;
padding: 8px 2px;
transition: color 200ms var(--ease-cinematic);
}
.site-nav__link::after {
content: "";
position: absolute;
left: 0; bottom: 0;
height: 1px;
width: 100%;
background: var(--color-canyon);
transform: scaleX(0);
transform-origin: right;
transition: transform 320ms var(--ease-cinematic);
}
.site-nav__link:hover { color: var(--color-canyon); }
.site-nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.site-nav__link[aria-current="page"] { color: var(--color-canyon); }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__cta {
background: var(--action-default);
color: var(--action-text);
padding: 12px 22px;
border-radius: var(--radius-sm);
font-family: var(--font-primary);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
transition: background-color 220ms var(--ease-cinematic);
}
.site-nav__cta:hover { background: var(--action-hover); }
/* Mobile hamburger toggle — hidden on desktop */
.site-header__toggle {
display: none;
width: 44px;
height: 44px;
position: relative;
align-items: center;
justify-content: center;
}
.site-header__toggle span,
.site-header__toggle span::before,
.site-header__toggle span::after {
display: block;
width: 22px;
height: 1px;
background: var(--color-stone);
transition: transform 280ms var(--ease-cinematic),
top 280ms var(--ease-cinematic),
opacity 200ms var(--ease-cinematic);
}
.site-header__toggle span {
position: relative;
}
.site-header__toggle span::before,
.site-header__toggle span::after {
content: "";
position: absolute;
left: 0;
}
.site-header__toggle span::before { top: -7px; }
.site-header__toggle span::after { top: 7px; }
body.is-menu-open .site-header__toggle span { background: transparent; }
body.is-menu-open .site-header__toggle span::before { top: 0; transform: rotate(45deg); }
body.is-menu-open .site-header__toggle span::after { top: 0; transform: rotate(-45deg); }
/* Mobile menu overlay */
.site-menu {
position: fixed;
inset: 0;
z-index: 90;
background: var(--color-pine);
background-image: url('../assets/patterns/topo_map_overlay_dark_with_transparency.svg');
background-size: 800px;
background-position: center;
background-repeat: repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: var(--nav-h) clamp(28px, 8vw, 80px) 64px;
opacity: 0;
pointer-events: none;
transform: translateY(-12px);
transition: opacity 420ms var(--ease-cinematic), transform 420ms var(--ease-cinematic);
}
body.is-menu-open .site-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.site-menu__list {
list-style: none;
display: flex;
flex-direction: column;
gap: clamp(20px, 4vh, 36px);
}
.site-menu__link {
font-family: var(--font-primary);
font-size: clamp(32px, 8vw, 56px);
font-weight: var(--fw-semibold);
color: var(--color-stone);
letter-spacing: var(--ls-tight);
line-height: 1;
}
.site-menu__link:hover { color: var(--color-canyon); }
.site-menu__cta {
margin-top: 40px;
background: var(--action-default);
color: var(--action-text);
padding: 16px 28px;
border-radius: var(--radius-sm);
font-family: var(--font-primary);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
/* ------------------------------------------------------------
Footer
------------------------------------------------------------ */
.site-footer {
background: var(--color-pine);
color: var(--color-stone);
padding: clamp(72px, 10vw, 128px) 0 40px;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../assets/patterns/topo_map_overlay_dark_with_transparency.svg');
background-size: 1200px;
background-repeat: repeat;
opacity: 0.08;
pointer-events: none;
}
.site-footer .container { position: relative; }
.site-footer__top {
display: grid;
grid-template-columns: minmax(220px, 1fr) auto;
gap: clamp(40px, 6vw, 96px);
align-items: start;
padding-bottom: clamp(48px, 6vw, 80px);
border-bottom: 1px solid rgba(145, 163, 146, 0.2);
}
.site-footer__logo {
display: block;
width: 200px;
margin-bottom: 24px;
}
.site-footer__logo img { width: 100%; height: auto; }
.site-footer__tagline {
font-family: var(--font-primary);
font-size: var(--fs-sm);
color: var(--color-sage);
max-width: 36ch;
line-height: var(--lh-body);
}
.site-footer__cols {
display: grid;
grid-template-columns: repeat(2, minmax(140px, auto));
gap: clamp(40px, 5vw, 80px);
}
.site-footer__col h4 {
font-family: var(--font-primary);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--color-sage);
margin-bottom: 18px;
}
.site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a {
font-family: var(--font-primary);
font-size: var(--fs-sm);
color: var(--color-stone);
transition: color 200ms var(--ease-cinematic);
}
.site-footer__col a:hover { color: var(--color-canyon); }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 40px;
}
.site-footer__legal {
font-family: var(--font-primary);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
color: var(--color-sage);
opacity: 0.7;
}
.site-footer__legal .sep {
display: inline-block;
margin: 0 10px;
opacity: 0.5;
}
.site-footer__social {
display: flex;
align-items: center;
gap: 28px;
}
.site-footer__social a {
font-family: var(--font-primary);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--color-sage);
transition: color 200ms var(--ease-cinematic);
}
.site-footer__social a:hover { color: var(--color-canyon); }
/* ------------------------------------------------------------
Scroll-reveal animation
Default state: invisible + offset; .is-visible: settled
------------------------------------------------------------ */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 900ms var(--ease-cinematic),
transform 900ms var(--ease-cinematic);
will-change: opacity, transform;
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
[data-reveal-delay="1"].is-visible { transition-delay: 80ms; }
[data-reveal-delay="2"].is-visible { transition-delay: 160ms; }
[data-reveal-delay="3"].is-visible { transition-delay: 240ms; }
[data-reveal-delay="4"].is-visible { transition-delay: 320ms; }
/* Reduced motion: no transforms, no transitions */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
transition-delay: 0ms !important;
}
[data-reveal] { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
/* ------------------------------------------------------------
Responsive — 1024 / 768 / 375
------------------------------------------------------------ */
@media (max-width: 1024px) {
.site-footer__top { grid-template-columns: 1fr; }
.site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
:root { --nav-h: 64px; }
.site-nav { display: none; }
.site-header__toggle { display: inline-flex; }
.site-header__inner { gap: 16px; }
.site-header__logo { height: 22px; }
.site-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
.site-footer__bottom { flex-direction: column; align-items: flex-start; }
.site-footer__social { gap: 18px; }
}
@media (max-width: 480px) {
.site-footer__cols { grid-template-columns: 1fr; }
}