/* ============================================================================ home.css — page-level chrome for a REAL assembled page (Whitman & Associates) Loads AFTER tokens.css + primitives.css + content.css + layout.css + cards.css. The page itself wears a skin via data-palette/type/shape on , so it overrides the doc-chrome body styles those Storybook stylesheets set. Everything here still reads tokens; swap three attributes to re-skin. ============================================================================ */ html { scroll-behavior: smooth; } body { background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-size: 16px; line-height: var(--leading-normal); } img { max-width: 100%; display: block; } .page { overflow-x: clip; } /* page container echoes the layout primitive but as the page default */ .shell { width: 100%; max-width: var(--container-default); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-10)); } .shell--wide { max-width: var(--container-wide); } /* ---- sticky site nav ---------------------------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: var(--border-thin) solid var(--color-border); } .site-nav__row { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-4); } .site-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; margin-right: auto; } .site-brand__mark { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-fg); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); flex: none; } [data-type="anton"] .site-brand__mark, [data-type="archivo"] .site-brand__mark { font-weight: 400; } .site-brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-fg); letter-spacing: -0.01em; line-height: 1; } [data-type="dmserif"] .site-brand__name { font-weight: 400; } .site-brand__name small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); font-weight: 400; margin-top: 3px; } .site-links { display: none; align-items: center; gap: var(--space-6); } @media (min-width: 900px) { .site-links { display: flex; } } .site-links a { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none; } .site-links a:hover { color: var(--color-fg); } .site-nav__cta { display: none; } @media (min-width: 900px) { .site-nav__cta { display: inline-flex; } } .site-burger { display: inline-flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: var(--border-default) solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; padding: 0; } @media (min-width: 900px) { .site-burger { display: none; } } .site-burger span { width: 18px; height: 2px; background: var(--color-fg); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } body.nav-open .site-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .site-burger span:nth-child(2) { opacity: 0; } body.nav-open .site-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-scrim { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--color-fg) 42%, transparent); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } body.nav-open .site-scrim { opacity: 1; visibility: visible; } .site-sheet { position: fixed; top: 0; right: 0; z-index: 70; height: 100%; width: min(82%, 320px); background: var(--color-surface); border-left: var(--border-default) solid var(--color-border); box-shadow: var(--shadow-lg); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1); } body.nav-open .site-sheet { transform: translateX(0); } .site-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .site-sheet__close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--color-muted); cursor: pointer; padding: 4px; } .site-sheet a { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-fg); text-decoration: none; padding: var(--space-3) 0; border-bottom: var(--border-thin) solid var(--color-border); } [data-type="dmserif"] .site-sheet a { font-weight: 400; } .site-sheet a:hover { color: var(--color-accent); } .site-sheet__cta { margin-top: var(--space-6); } .site-sheet__cta .c-btn { width: 100%; justify-content: center; } /* ---- section rhythm ----------------------------------------------------- */ .s { padding-block: clamp(var(--space-16), 9vw, var(--space-28)); } .s--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); } .s--surface { background: var(--color-surface); } .s--inverted { background: var(--color-fg); color: #fff; --color-bg: color-mix(in srgb, var(--color-fg) 86%, #fff); --color-surface: color-mix(in srgb, var(--color-fg) 78%, #fff); --color-muted: color-mix(in srgb, #fff 76%, transparent); --color-border: color-mix(in srgb, #fff 18%, transparent); } /* flip foreground to light on the inner content only, so the section ground + card surfaces (computed above while --color-fg is still dark) stay dark while all card text inverts to light. Fixes dark-on-dark in testimonial cards. */ .s--inverted .shell { --color-fg: #fff; } .s--inverted .c-eyebrow, .s--inverted .demo-eyebrow { color: var(--color-accent); } .s--inverted .c-h2, .s--inverted .c-h3, .s--inverted .c-hero__title { color: #fff; } .s-head { max-width: 60ch; margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); } .s-head[data-align="center"] { margin-inline: auto; text-align: center; } .s-head[data-align="center"] .c-lede { margin-inline: auto; } /* ---- credential bar ----------------------------------------------------- */ .cred { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); } @media (min-width: 760px) { .cred { grid-template-columns: repeat(4, 1fr); } } .cred__num { font-family: var(--font-display); font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); color: var(--color-fg); line-height: 0.95; font-weight: 700; letter-spacing: -0.02em; } [data-type="anton"] .cred__num, [data-type="archivo"] .cred__num { font-weight: 400; } [data-type="dmserif"] .cred__num { font-weight: 400; } .cred__num em { color: var(--color-accent); font-style: normal; } .cred__lbl { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-3); line-height: var(--leading-normal); } /* ---- generic responsive card grids ------------------------------------- */ .grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 680px) { .grid-3 { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .grid-3 > *, .grid-2 > * { height: 100%; } /* ---- split: heading left, content right -------------------------------- */ .split { display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; } @media (min-width: 900px) { .split { grid-template-columns: 0.9fr 1.1fr; } } /* ---- CTA band ----------------------------------------------------------- */ .cta-band { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .cta-band .c-hero__actions, .cta-band .actions { justify-content: center; } .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center; } /* ---- footer ------------------------------------------------------------- */ .site-foot { background: var(--color-fg); color: #fff; --color-muted: color-mix(in srgb, #fff 60%, transparent); --color-border: color-mix(in srgb, #fff 16%, transparent); padding-block: clamp(var(--space-16), 7vw, var(--space-24)) var(--space-10); } .foot-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); } @media (min-width: 760px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; } } .foot-brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: #fff; margin: 0 0 var(--space-3); } [data-type="dmserif"] .foot-brand__name { font-weight: 400; } .foot-brand p { color: color-mix(in srgb, #fff 70%, transparent); font-size: var(--text-sm); max-width: 38ch; line-height: var(--leading-relaxed); margin: 0; } .foot-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #fff 55%, transparent); margin: 0 0 var(--space-4); } .foot-col a { display: block; color: color-mix(in srgb, #fff 82%, transparent); text-decoration: none; font-size: var(--text-sm); padding: var(--space-2) 0; } .foot-col a:hover { color: #fff; } .foot-rule { height: var(--border-thin); background: color-mix(in srgb, #fff 16%, transparent); margin-block: var(--space-10); border: 0; } .foot-base { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: color-mix(in srgb, #fff 55%, transparent); } /* keep the editorial hero from leaning on anything; it owns its width here */ .page .c-hero { max-width: var(--container-wide); } /* ============================================================================ RE-SKIN DOCK — floating control that proves the thesis live ============================================================================ */ .reskin { position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 80; font-family: var(--font-body); } .reskin__toggle { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-fg); color: var(--color-bg); border: 0; border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow-lg); } [data-shape="brutalist"] .reskin__toggle { border-radius: 0; border: var(--border-default) solid var(--color-fg); } .reskin__toggle svg { width: 16px; height: 16px; } .reskin__toggle:hover { filter: brightness(1.08); } .reskin__toggle:focus-visible { outline: var(--border-heavy) solid var(--color-accent); outline-offset: 2px; } .reskin__panel { position: absolute; right: 0; bottom: calc(100% + var(--space-3)); width: min(280px, calc(100vw - 32px)); background: var(--color-surface); color: var(--color-fg); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); } [data-shape="brutalist"] .reskin__panel { border-width: var(--border-default); } .reskin__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-fg); margin: 0 0 var(--space-4); line-height: var(--leading-snug); font-weight: 700; } [data-type="dmserif"] .reskin__title { font-weight: 400; } .reskin__title b { color: var(--color-accent); font-weight: inherit; display: block; } .reskin__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .reskin__chip { display: flex; align-items: center; gap: var(--space-2); background: var(--color-bg); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-fg); cursor: pointer; text-align: left; } .reskin__chip:hover { border-color: var(--color-accent); } .reskin__chip[aria-pressed="true"] { border-color: var(--color-fg); background: color-mix(in srgb, var(--color-fg) 6%, var(--color-bg)); } .reskin__chip:focus-visible { outline: var(--border-default) solid var(--color-ring); outline-offset: 1px; } .reskin__sw { width: 16px; height: 16px; border-radius: var(--radius-sm); flex: none; border: 1px solid color-mix(in srgb, var(--color-fg) 18%, transparent); } .reskin__sw[data-pal="champagne"] { background: #c9a96e; } .reskin__sw[data-pal="yellow"] { background: #ffd400; } .reskin__sw[data-pal="coral"] { background: #e07a5f; } .reskin__sw[data-pal="navy"] { background: #1a2238; } .reskin__sw[data-pal="cobalt"] { background: #2742d6; } .reskin__sw[data-pal="sage"] { background: #6b8f71; } .reskin__sw[data-pal="crimson"] { background: #d8232a; } .reskin__note { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); margin: var(--space-4) 0 0; line-height: var(--leading-normal); } .reskin__note code { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-accent); } @media print { .reskin { display: none; } }