/* ============================================
HOSS LLC — SHARED STYLESHEET
This one file is linked by every page (Home,
Portfolio, Services, About, Contact) via:
Why separate the CSS out like this, instead of
embedding it in each page like the practice sites?
Because with 5 pages, embedding would mean 5 copies
of the same code - and changing your brand color
would mean editing it in 5 places instead of 1.
One shared file = one source of truth.
============================================ */
:root {
--ink: #1A1D21; /* near-black - primary text, dark sections */
--forest: #1B4332; /* deep pine green - hero, dark sections */
--forest-soft: #2F6B4F;
--paper: #EEF1EE; /* cool drafting-paper background */
--paper-dark: #E2E7E1;
--card: #FFFFFF;
--accent: #4CAF6D; /* kelly green accent, CTAs */
--accent-dark: #3B8F58;
--line: rgba(26,29,33,0.12);
--line-on-dark: rgba(255,255,255,0.18);
/* Solid (non-opacity) muted-text colors. Using opacity to mute text
is an easy way to accidentally fail WCAG AA contrast (4.5:1) -
these are real colors, checked to stay readable, instead. */
--text-muted: #52585A; /* muted body text on light backgrounds */
--text-muted-on-dark: #C7CDC9; /* muted body text on dark backgrounds */
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'IBM Plex Sans', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
}
/* ============================================
SKIP LINK
Invisible until a keyboard user tabs to it, at
which point it jumps into view at the top-left.
Lets screen reader / keyboard users bypass the
repeated nav menu and go straight to page content -
without it, they'd have to tab through Home,
Portfolio, Services, About, Contact on every
single page before reaching anything new.
============================================ */
.skip-link {
position: absolute;
top: -60px;
left: 12px;
background: var(--accent);
color: var(--ink);
padding: 10px 18px;
border-radius: 3px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.9rem;
z-index: 1000;
text-decoration: none;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 12px;
}
/* ============================================
SMOOTH PAGE TRANSITIONS
Tells supporting browsers (current Chrome, Edge,
and recent Safari) to crossfade between pages on
navigation instead of the default hard white flash.
Browsers that don't support this yet just fall back
to normal navigation - nothing breaks either way.
============================================ */
@view-transition {
navigation: auto;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
font-family: var(--font-body);
color: var(--ink);
background-color: var(--paper);
line-height: 1.55;
position: relative;
overflow-x: hidden;
/* Faint dot-grid texture, echoing the blueprint concept even in
light sections - very low opacity so it reads as texture, not pattern. */
background-image: radial-gradient(circle, rgba(26,29,33,0.045) 1px, transparent 1px);
background-size: 28px 28px;
}
/* ============================================
AMBIENT DRIFT
Two soft, blurred color blobs that slowly move
behind the page content. Meant to feel calm and
"alive" rather than eye-catching - a subtle signal
that this is a real, current, well-made site, not
a static template. Sits behind everything (z-index -1)
and never blocks clicks (pointer-events: none).
============================================ */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 15% 20%, rgba(76,175,109,0.24), transparent 45%),
radial-gradient(circle at 85% 75%, rgba(27,67,50,0.22), transparent 48%),
radial-gradient(circle at 50% 100%, rgba(76,175,109,0.14), transparent 40%);
background-repeat: no-repeat;
animation: ambientDrift 26s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
0% { background-position: 0% 0%, 100% 100%, 50% 100%; }
100% { background-position: 16% 24%, 78% 62%, 40% 85%; }
}
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; }
}
/* ============================================
FLOATING RINGS
Large soft outlined circles that slowly float and
rotate behind the page - a common "agency site"
background treatment for a bit more visual energy
than the blobs alone. Markup: a single