/* ========================================================================== Dennis Capital — Design System (compiled, no Tailwind) Source of truth: /reference/*.html tailwind.config tokens ========================================================================== */ :root { /* Palette (only the tokens actually used across the six pages) */ --dc-background: #141313; --dc-surface: #141313; --dc-surface-container-lowest: #0e0e0e; --dc-surface-container-low: #1c1b1b; --dc-surface-container: #201f1f; --dc-surface-container-high: #2b2a2a; --dc-primary-container: #1a1a1a; --dc-on-surface: #e5e2e1; --dc-on-surface-variant: #c4c7c7; --dc-slate-text: #94a3b8; --dc-muted-gold: #c5a059; --dc-secondary: #e9c176; --dc-brushed-silver: #e2e2e2; --dc-midnight-navy: #0d1b2a; --dc-on-primary: #313030; --dc-outline-variant: #444748; /* Spacing scale (Tailwind custom spacing) */ --dc-gutter: 1.5rem; --dc-section-gap: 8rem; --dc-bento-padding: 2rem; --dc-grid-margin: 2rem; --dc-maxw: 80rem; /* max-w-7xl = 1280px */ --dc-font-head: "Playfair Display", Georgia, "Times New Roman", serif; --dc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } /* --- Base ---------------------------------------------------------------- */ .dc-page { background-color: var(--dc-background); /* Ambient top-wash: a soft navy dome + faint gold glow behind every page's hero, constrained to the top band. Gives all pages a consistent premium backdrop so inner pages never read as flat black next to the homepage. The homepage hero (.dc-gradient-surface, full-height) covers it, so Home stays the richest. */ background-image: radial-gradient(115% 100% at 50% 0%, rgba(13, 27, 42, 0.55) 0%, rgba(13, 27, 42, 0) 68%), radial-gradient(85% 90% at 82% 0%, rgba(197, 160, 89, 0.06) 0%, rgba(197, 160, 89, 0) 60%); background-repeat: no-repeat, no-repeat; background-position: top center, top right; background-size: 100% 760px, 100% 620px; color: var(--dc-on-surface); font-family: var(--dc-font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Clip (not hidden) the horizontal orb bleed. `hidden` would promote overflow-y to `auto`, turning .dc-page into a nested vertical scroll container (a phantom second scrollbar). `clip` clips without establishing a scroll container, so vertical scrolling stays on the document alone. */ overflow-x: clip; } /* Astra's parent theme sets `body { overflow-x: hidden }`, which — like the .dc-page case above — promotes overflow-y to `auto` and makes a nested scroll container whenever a decorative orb bleeds a few px past the content bottom. Override to `clip`: still no horizontal scroll, but no phantom vertical scrollbar and no competing scroll surface (fixes the "two scrollbars / laggy scroll" behaviour). */ body { overflow-x: clip; } .dc-page ::selection { background: var(--dc-muted-gold); color: var(--dc-background); } .dc-page a { color: inherit; text-decoration: none; } .dc-page *, .dc-page *::before, .dc-page *::after { box-sizing: border-box; } /* --- Typography ---------------------------------------------------------- */ .dc-headline-xl { font-family: var(--dc-font-head); font-size: clamp(2rem, 4.5vw, 3rem); /* ~48px, scales down on mobile */ line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; } .dc-headline-lg { font-family: var(--dc-font-head); font-size: 2rem; /* 32px */ line-height: 1.2; font-weight: 600; } .dc-body-lg { font-size: 1.125rem; line-height: 1.6; font-weight: 400; } .dc-body-md { font-size: 1rem; line-height: 1.6; font-weight: 400; } .dc-label-caps { font-size: 0.75rem; line-height: 1; letter-spacing: 0.1em; font-weight: 600; text-transform: uppercase; } .dc-data { font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; font-weight: 500; } /* Explicit base text color so a host/parent-theme tag color can never bleed dark-on-dark. Declared BEFORE the color helpers below so .dc-gold/.dc-slate/ .dc-variant still win on same-specificity ties (source order). */ .dc-headline-xl, .dc-headline-lg, .dc-body-lg, .dc-body-md, .dc-label-caps, .dc-data { color: var(--dc-on-surface); } .dc-gold { color: var(--dc-muted-gold); } .dc-slate { color: var(--dc-slate-text); } .dc-variant { color: var(--dc-on-surface-variant); } .dc-tracking-wide { letter-spacing: 0.2em; } .dc-text-gradient { background: linear-gradient(to bottom right, #e2e2e2, #c5a059); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- Surfaces ------------------------------------------------------------ */ .glass-card { background: rgba(13, 27, 42, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(226, 226, 226, 0.1); border-radius: 0.5rem; } /* Progressive-enhancement fallback when backdrop-filter is unsupported */ @supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) { .glass-card { background: rgba(13, 27, 42, 0.85); } } /* --- Layout shell -------------------------------------------------------- */ .dc-container { max-width: var(--dc-maxw); margin: 0 auto; padding-left: var(--dc-grid-margin); padding-right: var(--dc-grid-margin); } .dc-section-gap { margin-bottom: var(--dc-section-gap); } /* --- Nav ----------------------------------------------------------------- */ .dc-nav { position: fixed; top: 0; width: 100%; z-index: 50; background: rgba(20, 19, 19, 0.9); border-bottom: 1px solid rgba(226, 226, 226, 0.1); } .dc-nav__inner { display: flex; justify-content: space-between; align-items: center; max-width: var(--dc-maxw); margin: 0 auto; padding: 1rem var(--dc-grid-margin); } .dc-nav__brand { font-family: var(--dc-font-head); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.65rem; color: var(--dc-on-surface); } .dc-nav__logo { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; display: block; flex: none; } @media (max-width: 600px) { .dc-nav__brand { font-size: 1.25rem; } .dc-nav__logo { height: 34px; width: 34px; } } .dc-nav__links { display: none; align-items: center; gap: 2rem; } .dc-nav__link { color: var(--dc-on-surface-variant); transition: color .2s; } .dc-nav__link:hover { color: var(--dc-on-surface); } .dc-nav__link--active { color: var(--dc-muted-gold); font-weight: 600; border-bottom: 2px solid var(--dc-muted-gold); padding-bottom: 0.25rem; } @media (min-width: 768px) { .dc-nav__links { display: flex; } } /* Mobile nav toggle (hamburger) */ .dc-nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; background: transparent; border: 0; cursor: pointer; } .dc-nav__toggle span { display: block; height: 2px; width: 100%; background: var(--dc-on-surface); border-radius: 2px; transition: transform .25s, opacity .2s; } .dc-nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .dc-nav__toggle.is-open span:nth-child(2) { opacity: 0; } .dc-nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 767px) { .dc-nav__toggle { display: inline-flex; } .dc-nav__inner { justify-content: flex-start; gap: 0.5rem; } .dc-nav__inner .dc-btn--primary { margin-left: auto; } .dc-nav__links { display: flex; position: fixed; top: var(--dc-nav-h, 66px); left: 0; right: 0; z-index: 60; flex-direction: column; align-items: stretch; gap: 0; background: #141313; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); border-bottom: 1px solid rgba(197, 160, 89, 0.25); padding: 0.5rem var(--dc-grid-margin) 1.25rem; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; } .dc-nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; } .dc-nav__link { padding: 0.9rem 0.25rem; border-bottom: 1px solid rgba(226, 226, 226, 0.07); font-size: 1.05rem; } .dc-nav__link--active { border-bottom: 1px solid rgba(197, 160, 89, 0.5); padding-bottom: 0.9rem; } } /* --- Buttons ------------------------------------------------------------- */ .dc-btn { display: inline-block; font-family: var(--dc-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border-radius: 0.25rem; transition: all .2s; border: 1px solid transparent; } .dc-btn--primary { background: var(--dc-muted-gold); color: var(--dc-on-primary); padding: 0.625rem 1.5rem; } .dc-btn--primary:hover { opacity: 0.9; } .dc-btn--primary-lg { padding: 1rem 2.5rem; } .dc-btn--outline { border-color: var(--dc-brushed-silver); color: var(--dc-on-surface); padding: 1rem 2.5rem; background: transparent; } .dc-btn--outline:hover { background: var(--dc-on-surface); color: var(--dc-background); } /* --- Badges / pills ------------------------------------------------------ */ .dc-badge { display: inline-block; background: var(--dc-primary-container); color: var(--dc-muted-gold); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 9999px; border: 1px solid rgba(197, 160, 89, 0.2); } /* --- Material Symbols: SELF-HOSTED SUBSET ---------------------------------- Only the ~25 glyphs the site uses, variable axes pinned to the design values (opsz 24, wght 300, FILL 0, GRAD 0). 3.1 KB woff2 vs Google's 3.9 MB variable font. Icons are referenced by codepoint entity in the markup (ligatures were dropped in subsetting). To add an icon: add its name to the subset script, re-run it, and use the emitted codepoint. Map: assets/fonts/ICONS-codepoints.json */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 300; src: url('fonts/material-symbols-subset.woff2?v=2') format('woff2'); font-display: swap; } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* ========================================================================== Services / Home page ========================================================================== */ .svc-hero { max-width: var(--dc-maxw); margin: 0 auto var(--dc-section-gap); padding: 0 var(--dc-grid-margin); } .svc-hero__inner { max-width: 48rem; } .svc-hero__eyebrow { display: block; margin-bottom: 1rem; } .svc-hero h1 { margin: 0 0 1.5rem; } .svc-hero p { color: var(--dc-slate-text); } .svc-hero em { color: var(--dc-on-surface); font-weight: 600; font-style: italic; } /* Bento grid: 12-col on desktop, single column on mobile */ .svc-bento { max-width: var(--dc-maxw); margin: 0 auto var(--dc-section-gap); padding: 0 var(--dc-grid-margin); display: grid; grid-template-columns: 1fr; gap: var(--dc-gutter); } @media (min-width: 768px) { .svc-bento { grid-template-columns: repeat(12, 1fr); } } .svc-card { padding: var(--dc-bento-padding); position: relative; overflow: hidden; } .svc-card h3 { margin: 0 0 1rem; } .svc-card__icon { color: var(--dc-muted-gold); font-size: 2.25rem; margin-bottom: 1.5rem; display: inline-block; } .svc-card p { color: var(--dc-slate-text); } @media (min-width: 768px) { .svc-card--8 { grid-column: span 8; } .svc-card--4 { grid-column: span 4; } } .svc-card--gold-edge { border-left: 2px solid var(--dc-muted-gold); } .svc-card--navy { background: rgba(13, 27, 42, 0.6); } .svc-card--dashed { border-style: dashed; border-color: rgba(197, 160, 89, 0.3); } .svc-tags { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .svc-check { display: flex; align-items: center; color: var(--dc-on-surface-variant); margin-bottom: 0.75rem; } .svc-check .material-symbols-outlined { color: var(--dc-muted-gold); font-size: 1rem; margin-right: 0.5rem; } .svc-quote { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(226, 226, 226, 0.05); } .svc-quote p { color: var(--dc-on-surface); font-style: italic; } .svc-card__ghost { position: absolute; right: -2.5rem; bottom: -2.5rem; opacity: 0.05; pointer-events: none; } .svc-card__ghost .material-symbols-outlined { font-size: 200px; } .svc-card:hover .svc-card__ghost { opacity: 0.1; transition: opacity .7s; } .svc-avatars { display: flex; margin-top: 1.5rem; align-items: center; justify-content: space-between; } .svc-avatars__stack { display: flex; } .svc-avatars__stack > div { width: 2rem; height: 2rem; border-radius: 9999px; background: var(--dc-surface-container-high); display: flex; align-items: center; justify-content: center; border: 1px solid var(--dc-background); margin-left: -0.5rem; } .svc-avatars__stack > div:first-child { margin-left: 0; } /* ========================================================================== PLACEHOLDER IMAGES — SWAP OUT FOR REAL PHOTOGRAPHY Every element with class `.dc-placeholder` is a temporary neutral fill standing in for client-supplied photography. Search the codebase for "dc-placeholder" (CSS) or "PLACEHOLDER IMAGE" (HTML) to find them all. To go live with a real image, replace the element/markup per the HTML comment next to each usage. ========================================================================== */ .dc-placeholder { background-color: var(--dc-surface-container-low); background-image: linear-gradient(135deg, rgba(197,160,89,0.06) 0%, rgba(13,27,42,0.35) 100%), repeating-linear-gradient(45deg, rgba(226,226,226,0.03) 0 12px, transparent 12px 24px); position: relative; } .dc-placeholder::after { content: "PLACEHOLDER IMAGE"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--dc-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(226,226,226,0.28); } /* Use on full-bleed bands that carry text on top, so the label doesn't clash. */ .dc-placeholder--quiet::after { content: none; } /* Visual statement band */ .svc-visual { position: relative; width: 100%; height: 614px; margin-bottom: var(--dc-section-gap); overflow: hidden; } .svc-visual__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.4; } .svc-visual__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--dc-background), transparent, var(--dc-background)); } .svc-visual__content { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--dc-grid-margin); } .svc-visual__content h2 { max-width: 56rem; margin: 0 0 2rem; } .svc-visual__rule { height: 4rem; width: 1px; background: rgba(197, 160, 89, 0.5); } /* Final CTA */ .svc-cta { max-width: var(--dc-maxw); margin: 0 auto var(--dc-section-gap); padding: 0 var(--dc-grid-margin); } .svc-cta__box { background: var(--dc-surface-container-lowest); padding: 4rem 1.5rem; border-radius: 1rem; border: 1px solid rgba(226, 226, 226, 0.05); text-align: center; } .svc-cta__box h2 { margin: 0 0 1.5rem; } .svc-cta__box > p { color: var(--dc-slate-text); max-width: 42rem; margin: 0 auto 2.5rem; } .svc-cta__actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; } @media (min-width: 768px) { .svc-cta__actions { flex-direction: row; } } /* --- Footer -------------------------------------------------------------- */ .dc-footer { width: 100%; padding: var(--dc-section-gap) var(--dc-grid-margin); background: var(--dc-surface-container-lowest); border-top: 1px solid rgba(226, 226, 226, 0.05); } .dc-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--dc-gutter); max-width: var(--dc-maxw); margin: 0 auto; } @media (min-width: 768px) { .dc-footer__grid { grid-template-columns: repeat(3, 1fr); } } .dc-footer h5 { color: var(--dc-on-surface); margin: 0 0 1.5rem; } .dc-footer a { color: var(--dc-slate-text); transition: color .2s; } .dc-footer a:hover { color: var(--dc-brushed-silver); } .dc-footer ul { list-style: none; padding: 0; margin: 0; } .dc-footer li { margin-bottom: 1rem; } .pt-nav { padding-top: 8rem; } /* ========================================================================== PHASE 1 — Signature motion & surfaces All continuous motion is gated behind prefers-reduced-motion:no-preference. Only transform/opacity animate (compositor-friendly, no layout/CLS). ========================================================================== */ /* 1.1 Signature animated gradient surface */ .dc-gradient-surface { position: relative; background-color: var(--dc-background); background-image: radial-gradient(60% 80% at 15% 20%, rgba(13, 27, 42, 0.55) 0%, transparent 60%), radial-gradient(55% 70% at 85% 25%, rgba(197, 160, 89, 0.10) 0%, transparent 55%), radial-gradient(75% 90% at 60% 95%, rgba(13, 27, 42, 0.65) 0%, transparent 60%); background-size: 200% 200%; background-position: 0% 0%; } /* Gradient-position drift animation REMOVED: animating background-position repaints the whole surface every frame and stutters scrolling. Static now. */ /* 1.2 Film-grain noise overlay (inline SVG feTurbulence, ~3%) */ .dc-noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 1.3 Card mouse-follow glow (+ existing translateY lift) */ .glass-card { position: relative; overflow: hidden; transition: transform .3s ease, border-color .3s ease; } .glass-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%), rgba(197, 160, 89, 0.22), transparent 55%); opacity: 0; transition: opacity .35s ease; } .glass-card:hover::before { opacity: 1; } .glass-card > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: no-preference) { .glass-card:hover { transform: translateY(-3px); border-color: rgba(197, 160, 89, 0.35); } } /* 1.5 Scroll reveals — hidden state only applies when JS is present (html.dc-motion) */ @media (prefers-reduced-motion: no-preference) { html.dc-motion .dc-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); } html.dc-motion .dc-reveal.is-visible { opacity: 1; transform: none; } } /* 1.6 Nav polish — compress + gold border + deeper blur on scroll; hover underline */ .dc-nav, .dc-nav__inner { transition: padding .3s ease, background-color .3s ease, border-color .3s ease; } .dc-nav--scrolled { background: rgba(20, 19, 19, 0.96); border-bottom-color: rgba(197, 160, 89, 0.2); } .dc-nav--scrolled .dc-nav__inner { padding-top: .5rem; padding-bottom: .5rem; } .dc-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--dc-muted-gold); transform: scaleX(0); transform-origin: left; } .dc-nav__link { position: relative; } .dc-nav__link--active::after { display: none; } @media (prefers-reduced-motion: no-preference) { .dc-nav__link::after { transition: transform .3s ease; } } .dc-nav__link:not(.dc-nav__link--active):hover::after { transform: scaleX(1); } /* 1.7 Count-up (steady width) */ .dc-data, [data-countup] { font-variant-numeric: tabular-nums; } /* Drifting blurred orbs (homepage hero / CTA bands) */ .dc-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.08; pointer-events: none; z-index: 0; } .dc-orb--gold { background: var(--dc-muted-gold); } .dc-orb--navy { background: var(--dc-midnight-navy); opacity: 0.35; } /* Orb drift animation REMOVED: animating a blur(60px) element re-rasterizes a large area every frame — a primary scroll-jank source. Orbs are static now. */ /* Scroll-down indicator (thin gold line) */ .dc-scroll-ind { width: 1px; height: 3.5rem; margin: 0 auto; background: linear-gradient(to bottom, transparent, var(--dc-muted-gold)); transform-origin: top; } @media (prefers-reduced-motion: no-preference) { .dc-scroll-ind { animation: dc-scroll-pulse 2.2s ease-in-out infinite; } @keyframes dc-scroll-pulse { 0%,100% { opacity: .3; transform: scaleY(.55); } 50% { opacity: 1; transform: scaleY(1); } } } /* ========================================================================== PHASE 3 — Pure-CSS abstract visuals (replace placeholder image bands). Layered navy/gold gradient wash + ~4% grid + thin gold rule lines. No images. Swap a .dc-abstract div for a real when client photography is available. ========================================================================== */ .dc-abstract { position: absolute; inset: 0; overflow: hidden; background-color: var(--dc-surface-container-low); background-image: radial-gradient(70% 100% at 18% 0%, rgba(13, 27, 42, 0.65), transparent 60%), radial-gradient(55% 85% at 92% 100%, rgba(197, 160, 89, 0.12), transparent 55%), linear-gradient(to right, rgba(226, 226, 226, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(226, 226, 226, 0.04) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px; } .dc-abstract::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(115deg, transparent 38%, rgba(197, 160, 89, 0.28) 38.2%, transparent 38.7%), linear-gradient(115deg, transparent 61%, rgba(197, 160, 89, 0.16) 61.2%, transparent 61.6%), linear-gradient(115deg, transparent 74%, rgba(226, 226, 226, 0.10) 74.15%, transparent 74.5%); }