/* Theme Name: Deer Camp Digital Theme URI: https://deercampdigital.com Template: twentytwentyfive Author: Deer Camp Digital Author URI: https://deercampdigital.com Description: A bold, agency-style child theme for Deer Camp Digital - built on Twenty Twenty-Five. Inspired by modern agency aesthetics with earth tones and strong typography tailored for ranch real estate, agriculture, conservation, and outdoor brands. Version: 1.0.0 Requires at least: 6.7 Requires PHP: 7.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: deer-camp-digital Tags: custom-colors, custom-menu, full-site-editing, block-patterns, wide-blocks */ /* ========================================= TYPOGRAPHY Web fonts are enqueued in functions.php (deer_camp_fonts_url) rather than @import-ed here, so they download in parallel with this file instead of waiting for it to parse. ========================================= */ /* Oswald label scale. Oswald is the UI/label face - buttons, nav, eyebrows, numerals, badges. It was previously set per-rule at 400 weight and 0.62-0.75rem across eighteen separate blocks, so "larger and thinner" meant editing all eighteen. These custom properties are the single knob instead; the rules below reference them rather than carrying their own literals. Oswald is requested at wght@200..700 in functions.php, so 200 is a real weight here, not a synthesised one. */ :root { --dcd-label-weight: 300; --dcd-label-size: 1.25rem; /* buttons, eyebrows - the headline labels */ --dcd-label-size-md: 0.95rem; /* nav, section labels, inline CTAs */ --dcd-label-size-sm: 0.88rem; /* numerals, badges, counters, statuses */ /* Hover/active shade for anything filled with accent-rust. This used to be a hardcoded #b02f2f in five separate rules - the darkened form of the *old* rust (#C83838). When the brand colour moved to the orange #C2410C those five rules were left behind, so every rust button quietly changed hue on hover, orange to red. Deriving it from the palette instead means the next colour change carries the hovers with it. Against white this reads 7.3:1, so filled buttons keep their AA margin in the hover state and not just at rest. */ --dcd-rust-hover: color-mix(in srgb, var(--wp--preset--color--accent-rust) 82%, #000); } /* ========================================= GLOBAL RESETS & BASE ========================================= */ *, *::before, *::after { box-sizing: border-box; } /* Without this macOS renders body copy with subpixel antialiasing, which fattens every stroke and made the old system-ui stack look heavier than its 400 weight. Grayscale smoothing is what makes Inter look like Inter. */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================= PRIMARY NAVIGATION - MEGA MENU Markup comes from inc/nav-menu.php (see the file header for why this isn't core/navigation). Two layouts share one set of rules: >= 1024px horizontal bar, full-bleed hover panels < 1024px burger + drawer, panels collapse into accordions, CTA moves in 1024px is a contract with DESKTOP_MIN in assets/js/dcd-nav.js. Change it in both places or the drawer and the script disagree about which mode is live. Open/closed state lives on the toggle button's aria-expanded, so the CSS and the accessibility tree can never drift apart. The :hover / :focus-within rules are the JS-off fallback only - hence the html:not(.dcd-js) guard, so they don't fight the script for control once it loads. ========================================= */ /* Positioning context for the full-bleed panels and the drawer. On the homepage the template part is already fixed; this sits inside it. */ .dcd-header { position: relative; z-index: 20; } .dcd-header .wp-block-site-title a { text-decoration: none; } /* ------------------------------------------------- The bar ------------------------------------------------- */ .dcd-nav { display: flex; align-items: center; } .dcd-nav__list { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; } .dcd-nav__item { position: relative; display: flex; align-items: center; gap: 0.15rem; } /* The panel spans the whole header, so its containing block has to be the header rather than the list item. */ .dcd-nav__item--mega { position: static; } .dcd-nav__link { font-family: var(--wp--preset--font-family--oswald); font-size: var(--dcd-label-size-md); font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; text-decoration: none !important; color: inherit; } .dcd-nav__link:hover { color: var(--wp--preset--color--accent-rust); } .dcd-nav__toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem; margin: 0; border: 0; background: none; color: inherit; line-height: 0; cursor: pointer; } .dcd-nav__toggle:hover { color: var(--wp--preset--color--accent-rust); } .dcd-nav__chevron { transition: transform 0.25s ease; } .dcd-nav__toggle[aria-expanded="true"] .dcd-nav__chevron { transform: rotate(180deg); } /* ------------------------------------------------- The panel - closed by default, opened by state below ------------------------------------------------- */ .dcd-nav__panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--wp--preset--color--cream); color: var(--wp--preset--color--charcoal); border-top: 1px solid var(--wp--preset--color--warm-gray); border-bottom: 1px solid var(--wp--preset--color--warm-gray); box-shadow: 0 24px 48px rgba(16, 24, 38, 0.14); text-align: left; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); /* Delay only visibility so the fade-out can finish before it leaves the accessibility tree; the other two run immediately. */ transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } .dcd-nav__toggle[aria-expanded="true"] ~ .dcd-nav__panel, html:not(.dcd-js) .dcd-nav__item--mega:hover > .dcd-nav__panel, html:not(.dcd-js) .dcd-nav__item--mega:focus-within > .dcd-nav__panel { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .dcd-nav__panel { transition: none; transform: none; } .dcd-nav__chevron { transition: none; } } .dcd-nav__panel-inner { max-width: var(--wp--style--global--wide-size, 1380px); margin-inline: auto; padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--60); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: var(--wp--preset--spacing--60); align-items: start; } /* "All Services →" - the row above the columns, mirroring the section link that already opens each services/industries block on the pages themselves. */ .dcd-nav__overview { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--oswald); font-size: var(--dcd-label-size-md); font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent-rust); text-decoration: none; } .dcd-nav__overview span, .dcd-nav__promo-link span { transition: transform 0.2s ease; } .dcd-nav__overview:hover span, .dcd-nav__promo-link:hover span { transform: translateX(4px); } .dcd-nav__cols { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); } .dcd-nav__col-title { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--oswald); font-size: 0.8rem; font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent-rust); } .dcd-nav__sublist { /* Pulled left by the link's own padding so the link text lines up with the column title above it rather than sitting inset from it. */ margin: 0 0 0 -0.85rem; padding: 0; list-style: none; } .dcd-nav__sublink { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding: 0.7rem 0.85rem; border-radius: 4px; color: inherit; text-decoration: none; transition: background-color 0.2s ease; } .dcd-nav__sublink:hover, .dcd-nav__sublink:focus-visible { background: color-mix(in srgb, var(--wp--preset--color--charcoal) 6%, transparent); } .dcd-nav__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.1rem; height: 2.1rem; border: 1px solid var(--wp--preset--color--warm-gray); border-radius: 50%; font-family: var(--wp--preset--font-family--oswald); font-size: 0.7rem; letter-spacing: 1px; color: var(--wp--preset--color--accent-rust); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .dcd-nav__sublink:hover .dcd-nav__num, .dcd-nav__sublink:focus-visible .dcd-nav__num { background: var(--wp--preset--color--accent-rust); border-color: var(--wp--preset--color--accent-rust); color: var(--wp--preset--color--white); } .dcd-nav__sub-title { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; } .dcd-nav__sub-desc { display: block; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.45; color: color-mix(in srgb, currentColor 62%, transparent); } /* ------------------------------------------------- Promo card ------------------------------------------------- */ .dcd-nav__promo { grid-column: 2; grid-row: 1 / span 2; padding-left: var(--wp--preset--spacing--50); border-left: 1px solid var(--wp--preset--color--warm-gray); } .dcd-nav__promo-media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin-bottom: 1.25rem; } /* Stand-in when a panel has no image yet - a flat gradient tile rather than a broken/empty box, so the card keeps its proportions either way. */ .dcd-nav__promo-media--blank { background: linear-gradient( 140deg, var(--wp--preset--color--forest) 0%, var(--wp--preset--color--charcoal) 55%, var(--wp--preset--color--accent-rust) 190% ); } /* Only used when a promo names a product rather than a sentiment - currently the RanchOS card on the services panel. */ .dcd-nav__promo-eyebrow { margin: 0 0 0.4rem; font-family: var(--wp--preset--font-family--oswald); font-size: 0.7rem; font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent-rust); } .dcd-nav__promo-heading { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 1.6rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; } .dcd-nav__promo-text { margin: 0 0 1.1rem; font-size: 0.9rem; line-height: 1.5; color: color-mix(in srgb, currentColor 68%, transparent); } .dcd-nav__promo-link { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--wp--preset--font-family--oswald); font-size: var(--dcd-label-size-md); font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent-rust); text-decoration: none; } /* ------------------------------------------------- Burger + drawer CTA - desktop defaults ------------------------------------------------- */ .dcd-nav__burger, .dcd-nav__cta { display: none; } /* ------------------------------------------------- Tablet + phone: burger, drawer, accordions, CTA ------------------------------------------------- */ @media (max-width: 1023.98px) { /* The standing header button steps aside; its twin lives in the drawer. Needs three classes to land: core prints `body .is-layout-flex { display: flex }` inline in for every flex-layout block, which outweighs a lone class selector no matter where this file loads. */ .dcd-header .wp-block-buttons.dcd-header__cta { display: none; } .dcd-nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } /* Three bars from one element: the middle is the box itself, the outer two are its pseudo-elements. Crossing into an X on open. */ .dcd-nav__burger-bars, .dcd-nav__burger-bars::before, .dcd-nav__burger-bars::after { display: block; width: 1.5rem; height: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; } .dcd-nav__burger-bars { position: relative; } .dcd-nav__burger-bars::before, .dcd-nav__burger-bars::after { content: ""; position: absolute; left: 0; } .dcd-nav__burger-bars::before { top: -7px; } .dcd-nav__burger-bars::after { top: 7px; } .dcd-nav__burger[aria-expanded="true"] .dcd-nav__burger-bars { background: transparent; } .dcd-nav__burger[aria-expanded="true"] .dcd-nav__burger-bars::before { transform: translateY(7px) rotate(45deg); } .dcd-nav__burger[aria-expanded="true"] .dcd-nav__burger-bars::after { transform: translateY(-7px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .dcd-nav__burger-bars, .dcd-nav__burger-bars::before, .dcd-nav__burger-bars::after { transition: none; } } .dcd-nav__drawer { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; max-height: min(80dvh, 44rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--cream); border-top: 1px solid rgba(250, 250, 250, 0.12); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); } .dcd-nav.is-drawer-open .dcd-nav__drawer { display: block; } /* JS off: no burger to press, so the menu is simply always open and in flow. Long, but reachable - which is the point. */ html:not(.dcd-js) .dcd-nav__burger { display: none; } html:not(.dcd-js) .dcd-nav__drawer { display: block; position: static; max-height: none; box-shadow: none; } .dcd-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .dcd-nav__item { position: static; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid rgba(250, 250, 250, 0.12); } .dcd-nav__link { flex: 1; padding: 1rem 0; font-size: 1.05rem; } .dcd-nav__link:hover { color: var(--wp--preset--color--cream); } .dcd-nav__toggle { padding: 1rem 0.35rem; } /* Accordion, not overlay: back in flow, inheriting the drawer's palette, with the panel chrome (shadow, borders, cream ground) dropped. flex-basis pushes it onto its own row - the item is a wrapping flex row, and without this the panel just fills the space left beside the label at wider drawer widths. */ .dcd-nav__panel { display: none; flex-basis: 100%; width: 100%; position: static; visibility: visible; opacity: 1; pointer-events: auto; transform: none; background: transparent; color: inherit; border: 0; box-shadow: none; } .dcd-nav__toggle[aria-expanded="true"] ~ .dcd-nav__panel { display: block; } .dcd-nav__panel-inner { display: block; max-width: none; padding: 0 0 var(--wp--preset--spacing--30); } .dcd-nav__cols { display: block; } .dcd-nav__col + .dcd-nav__col { margin-top: var(--wp--preset--spacing--30); } .dcd-nav__overview { margin-bottom: var(--wp--preset--spacing--30); } .dcd-nav__sublink:hover, .dcd-nav__sublink:focus-visible { background: rgba(250, 250, 250, 0.07); } .dcd-nav__num { border-color: rgba(250, 250, 250, 0.25); } /* The promo card is a desktop luxury - in a drawer it just pushes the links the visitor came for below the fold. */ .dcd-nav__promo { display: none; } /* The CTA the header bar gave up. Full width so it reads as the one primary action in the drawer. */ .dcd-nav__cta { display: block; margin-top: var(--wp--preset--spacing--40); } .dcd-nav__cta a { display: block; width: 100%; padding: 0.9rem 1.5rem; background: var(--wp--preset--color--accent-rust); border: 2px solid var(--wp--preset--color--accent-rust); border-radius: 0; color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--oswald); font-size: 1rem; font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; text-align: center; text-decoration: none; } .dcd-nav__cta a:hover, .dcd-nav__cta a:focus-visible { background: var(--dcd-rust-hover); border-color: var(--dcd-rust-hover); color: var(--wp--preset--color--white); } } /* Drawer open: hold the page still behind it. */ html.dcd-scroll-locked, html.dcd-scroll-locked body { overflow: hidden; } /* Anchor targets sit under the fixed homepage header and, on tablet, under an open drawer - give every linkable section room to land clear of both. */ :target { scroll-margin-top: 7rem; } /* ========================================= HERO SECTION ========================================= */ .dcd-hero { position: relative; overflow: hidden; } /* --- Video background hero (poster -> video -> scrim -> content -> button) --- */ /* Poster frame shown until the video paints (no black flash) and as the fallback while the deferred file is still loading. container-type: size makes this wrapper a size container so the video below can cover the hero's REAL rendered box (cqw/cqh) instead of the viewport - matters on mobile where the hero can grow taller than 100vh. */ .dcd-hero .hero__bg-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* Escape the cover/constrained layout's content-width cap so it fills the hero. */ max-width: none; margin: 0; container-type: size; background: #101826 url("assets/images/hero-poster.jpg") center / cover no-repeat; } /* Always at least fill the container in both axes, oversizing the shorter axis so the 16:9 frame overshoots and gets cropped by overflow:hidden on the parent - a true cover with no black bars, no letterboxing. */ .dcd-hero .hero__bg-video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100cqw, calc(100cqh * 16 / 9)); height: max(100cqh, calc(100cqw * 9 / 16)); min-width: 100cqw; min-height: 100cqh; border: 0; } /* Darkening scrim so the cream text stays legible over the footage. */ .dcd-hero .hero__scrim { position: absolute; inset: 0; z-index: 1; max-width: none; margin: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(16, 24, 38, 0.55) 0%, rgba(16, 24, 38, 0.35) 40%, rgba(16, 24, 38, 0.78) 100% ); } /* Content sits above video + scrim (the hero's inner content group). */ .dcd-hero > .wp-block-group { position: relative; z-index: 2; } /* Keep the headline legible over the darkened footage. */ .dcd-hero .dcd-display-heading, .dcd-hero .wp-block-heading { color: var(--wp--preset--color--cream); } /* --- Homepage: full-viewport hero behind a transparent overlay header --- */ /* Hero fills the viewport; content is vertically centered so it clears the floating header and reads as a full-bleed cinematic section. */ body.home .dcd-hero { min-height: 100vh; /* fallback for old browsers */ min-height: 100svh; /* small viewport (accounts for mobile browser UI) */ min-height: 100dvh; /* dynamic viewport (expands as mobile chrome hides) */ display: flex; flex-direction: column; justify-content: center; } /* Lift the header out of flow so the video runs to the very top, behind it. Fixed (not absolute) on the homepage so the nav and the standing "Book a Strategy Call" CTA stay reachable down the whole page - dcd-interactions.js swaps it to a solid state once the hero scrolls past. Scoped to .home so pages we haven't rebuilt keep their normal in-flow header. */ body.home header.wp-block-template-part { position: fixed; top: 0; left: 0; right: 0; z-index: 20; } body.home .dcd-header { background-color: transparent !important; border-bottom-color: transparent !important; } /* Light nav + logo so they read over the footage. The burger and the chevron toggles draw from currentColor, so setting it on .dcd-nav covers them too. */ body.home .dcd-header .dcd-nav, body.home .dcd-header .dcd-nav__link, body.home .dcd-header .wp-block-site-title a { color: var(--wp--preset--color--cream); } body.home .dcd-header .dcd-nav__link:hover, body.home .dcd-header .dcd-nav__toggle:hover { color: #fff; } /* No override needed for the panel or drawer: both declare their own color directly, and a direct declaration always beats an inherited one regardless of the selector weight above. */ /* The site logo is the BLACK artwork, because that is what the inside-page header needs - it sits on cream. Everywhere the logo lands on a dark ground it gets inverted to white instead of shipping a second file: the homepage header (transparent over the hero video), and the footer on every page (charcoal here, rust on staging). brightness(0) flattens the artwork to solid black, invert(1) flips it to solid white, and the alpha channel is untouched - so this works whatever colour the source file happens to be. */ body.home .dcd-header .custom-logo, .dcd-footer .custom-logo { filter: brightness(0) invert(1); } /* Accessible pause/play control (WCAG 2.2.2). Hidden until the API is ready. Elegant frosted-glass circle that stays legible over the footage. */ .dcd-hero .hero__toggle { display: none; position: absolute; right: 2.5rem; bottom: 2.5rem; z-index: 3; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(250, 250, 250, 0.55); border-radius: 50%; background: rgba(16, 24, 38, 0.30); color: var(--wp--preset--color--cream, #FAFAFA); cursor: pointer; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28); transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } .dcd-hero .hero__toggle.is-ready { display: inline-flex; } .dcd-hero .hero__toggle:hover { background: rgba(16, 24, 38, 0.52); border-color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38); } .dcd-hero .hero__toggle:active { transform: translateY(0); } .dcd-hero .hero__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--accent-rust, #C83838); outline-offset: 3px; } .dcd-hero .hero__toggle .hero__toggle-icon { fill: currentColor; display: block; width: 18px; height: 18px; } .dcd-hero .hero__toggle .hero__toggle-icon--play { display: none; } .dcd-hero .hero__toggle.is-paused .hero__toggle-icon--pause { display: none; } .dcd-hero .hero__toggle.is-paused .hero__toggle-icon--play { display: block; } /* --- Hero CTA buttons: made to read clearly over the footage (hero-scoped only, so the same styles stay subtle on cream sections elsewhere). --- */ .dcd-hero .wp-block-button__link { padding: 1rem 2.25rem; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } /* Primary CTA: solid rust fill with a soft glow. */ .dcd-hero .is-style-dcd-rust .wp-block-button__link { background: var(--wp--preset--color--accent-rust); border-color: var(--wp--preset--color--accent-rust); color: #fff; box-shadow: 0 8px 24px rgba(200, 56, 56, 0.35); } .dcd-hero .is-style-dcd-rust .wp-block-button__link:hover { background: var(--dcd-rust-hover); border-color: var(--dcd-rust-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(200, 56, 56, 0.45); } /* Secondary CTA: frosted glass with a crisp cream hairline. */ .dcd-hero .is-style-dcd-outline .wp-block-button__link { background: rgba(16, 24, 38, 0.30); border-color: rgba(250, 250, 250, 0.85) !important; color: var(--wp--preset--color--cream); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .dcd-hero .is-style-dcd-outline .wp-block-button__link:hover { background: var(--wp--preset--color--cream); border-color: var(--wp--preset--color--cream) !important; color: var(--wp--preset--color--charcoal); transform: translateY(-2px); } .dcd-hero .dcd-hero__eyebrow { font-family: var(--wp--preset--font-family--oswald); font-size: var(--dcd-label-size); font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent-rust); display: block; margin-bottom: 1rem; } /* ========================================= SECTION LABELS (junction.nl style) ========================================= */ .dcd-section-label { font-family: var(--wp--preset--font-family--oswald); font-size: var(--dcd-label-size-md); font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent-rust); border-bottom: 2px solid currentColor; padding-bottom: 0.25rem; display: inline-block; margin-bottom: 1.5rem; } /* ========================================= LARGE DISPLAY HEADINGS ========================================= */ .dcd-display-heading { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 500; line-height: 1.05; letter-spacing: -2px; } /* ========================================= DARK SECTION ========================================= */ .dcd-dark-section { background-color: var(--wp--preset--color--forest); color: var(--wp--preset--color--cream); } .dcd-dark-section h1, .dcd-dark-section h2, .dcd-dark-section h3, .dcd-dark-section p { color: var(--wp--preset--color--cream); } /* ========================================= CHARCOAL SECTION ========================================= */ .dcd-charcoal-section { background-color: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--cream); } .dcd-charcoal-section h1, .dcd-charcoal-section h2, .dcd-charcoal-section h3, .dcd-charcoal-section p { color: var(--wp--preset--color--cream); } /* ========================================= SERVICE CARDS ========================================= */ .dcd-service-card { border-top: 3px solid var(--wp--preset--color--accent-rust); padding-top: 1.5rem; } .dcd-service-card h3 { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.5px; } /* ========================================= CLIENTS / LOGOS ========================================= */ .dcd-clients-section { border-top: 1px solid var(--wp--preset--color--warm-gray); border-bottom: 1px solid var(--wp--preset--color--warm-gray); } /* ========================================= CTA BLOCKS ========================================= */ .dcd-cta-primary { background-color: var(--wp--preset--color--accent-rust); } .dcd-cta-primary h2, .dcd-cta-primary p { color: #ffffff; } /* ========================================= BUTTONS ========================================= */ .wp-block-button__link { font-family: var(--wp--preset--font-family--oswald); font-weight: var(--dcd-label-weight); font-size: var(--dcd-label-size); letter-spacing: 2px; text-transform: uppercase; border-radius: 0 !important; transition: background-color 0.2s ease, color 0.2s ease; } .is-style-dcd-outline .wp-block-button__link { background: transparent; border: 2px solid var(--wp--preset--color--charcoal); color: var(--wp--preset--color--charcoal); } .is-style-dcd-outline .wp-block-button__link:hover { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--white); } .is-style-dcd-rust .wp-block-button__link { background: transparent; border: 2px solid var(--wp--preset--color--accent-rust); color: var(--wp--preset--color--accent-rust); } .is-style-dcd-rust .wp-block-button__link:hover { background: var(--wp--preset--color--accent-rust); border-color: var(--wp--preset--color--accent-rust); color: #ffffff; } /* ========================================= DIVIDERS ========================================= */ .dcd-rule { border: none; border-top: 1px solid var(--wp--preset--color--warm-gray); margin: 0; } /* ========================================= FOOTER ========================================= */ /* Charcoal ground, brand orange used only as an accent. The orange (#f45928 in the palette) is the right colour but the wrong job for a full-bleed panel - at that size it glares and drags the eye away from the CTA directly above it. Here it appears at small sizes only: column headings, link hovers and social hovers. No rules or separators anywhere in this footer; the grouping is done with space. */ /* Core puts a --wp--style--block-gap margin (24px) between every top-level block, including the footer template part, which opened a band of body colour above the footer and pushed the last section up. Removing it lets the footer sit flush. The hairline replaces it: the CTA section directly above is charcoal too, so with the gap gone and no rule there is nothing to separate the two. It is deliberately near-invisible - a seam, not a border. */ .wp-site-blocks > footer.wp-block-template-part, footer.wp-block-template-part:has(> .dcd-footer) { margin-block-start: 0; } .dcd-footer { background-color: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--cream); border-top: 1px solid rgba(250, 250, 250, 0.08); } .dcd-footer a { color: var(--wp--preset--color--cream); text-decoration: none; transition: color 0.2s ease; } .dcd-footer a:hover { color: var(--wp--preset--color--accent-rust); text-decoration: none; } .dcd-footer__tagline { margin: 1.25rem 0 0; /* max-width: 30ch; */ font-size: 0.95rem; line-height: 1.6; color: color-mix(in srgb, currentColor 72%, transparent); } /* Column headings: the eyebrow treatment, not a heading treatment - these are signposts above a list, and at h2 size they would out-shout the content. */ /* Deliberately LARGER than the links below them - these are the signpost, and at eyebrow size they read as a caption on the list rather than a title for it. Letter-spacing eases off as the size goes up. */ .dcd-footer__heading { margin: 0 0 1.4rem; font-family: var(--wp--preset--font-family--oswald); font-size: 1.15rem; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wp--preset--color--accent-rust); } /* The weight is stated here rather than left to inherit. theme.json sets core/navigation to 200 via `:root :where(.wp-block-navigation)`, which is where the footer links were picking it up - a value that has nothing to do with the label scale and does not move when --dcd-label-weight does. Two classes clear the `:where()` rule's specificity of 0 comfortably. */ .dcd-footer .wp-block-navigation a, .dcd-footer__nav a { font-size: 0.9rem; font-weight: var(--dcd-label-weight); letter-spacing: 0.02em; color: color-mix(in srgb, var(--wp--preset--color--cream) 78%, transparent); } .dcd-footer .wp-block-navigation a:hover, .dcd-footer__nav a:hover { color: var(--wp--preset--color--accent-rust); } /* --- Social icons ------------------------------------------------------- */ .dcd-footer .dcd-social { margin-top: var(--wp--preset--spacing--40); gap: 1.15rem; } .dcd-footer .dcd-social .wp-block-social-link { margin: 0; } /* Core's logos-only style paints each icon in its platform brand colour, which turns a restrained footer into a row of blue/pink/red badges. Out-weigh it so the row reads as one monochrome set, with the brand orange kept for hover. Colour only - do NOT set `fill` here. These are stroke-drawn outline icons (swapped in by deer_camp_outline_social_icons) and a CSS `fill` overrides the `fill="none"` presentation attribute, which floods every outline solid. */ .dcd-footer .wp-block-social-links.is-style-logos-only .wp-social-link a, .dcd-footer .wp-block-social-links.is-style-logos-only .wp-social-link a svg { color: var(--wp--preset--color--cream); } /* Needs four classes: core ships `.wp-block-social-links .wp-social-link svg { fill: currentColor }`, which outweighs a two-class selector and floods the outlines solid. */ .dcd-footer .wp-block-social-links .wp-social-link svg.dcd-social__icon { fill: none; stroke: currentColor; } .dcd-footer .dcd-social .wp-social-link a { padding: 0; color: var(--wp--preset--color--cream); } /* No chip behind the icon: the outline glyphs carry themselves, and the discs read as buttons in a place where nothing else is a button. */ .dcd-footer .dcd-social .wp-social-link { background: none; border-radius: 0; transition: color 0.2s ease, transform 0.2s ease; } .dcd-footer .dcd-social .wp-social-link:hover { background: none; color: var(--wp--preset--color--accent-rust); transform: translateY(-2px); } .dcd-footer .dcd-social .dcd-social__icon { width: 26px; height: 26px; display: block; } /* --- Base line ---------------------------------------------------------- */ .dcd-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50); font-size: 0.85rem; } .dcd-footer__addr, .dcd-footer__legal { margin: 0; color: color-mix(in srgb, currentColor 62%, transparent); } .dcd-footer__addr span, .dcd-footer__legal span { padding: 0 0.5rem; opacity: 0.5; } .dcd-footer__legal { display: flex; gap: 1.25rem; white-space: nowrap; } @media (max-width: 781px) { .dcd-footer__base { flex-direction: column; align-items: flex-start; } .dcd-footer__addr { line-height: 1.9; } } @media (prefers-reduced-motion: reduce) { .dcd-footer a, .dcd-footer .dcd-social .wp-social-link { transition: none; } .dcd-footer .dcd-social .wp-social-link:hover { transform: none; } } /* ========================================= UTILITY ========================================= */ .dcd-text-rust { color: var(--wp--preset--color--accent-rust) !important; } .dcd-text-gold { color: var(--wp--preset--color--gold) !important; } .dcd-bg-cream { background-color: var(--wp--preset--color--cream) !important; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 768px) { .dcd-display-heading { line-height: 1; } } /* ========================================================================= INTERACTION LAYER ------------------------------------------------------------------------- Everything below is progressive enhancement. The `dcd-js` class is added to inline in wp_head, so these styles only ever apply when the interaction script is actually going to run - with JS off the page renders fully visible and static. Every motion path is gated on prefers-reduced-motion. ========================================================================= */ /* ------------------------------------------------- Scroll reveal ------------------------------------------------- */ .dcd-js .dcd-reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; } .dcd-js .dcd-reveal.is-revealed { opacity: 1; transform: none; /* Long, soft easing - the section should settle, not snap. */ transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--dcd-delay, 0ms), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--dcd-delay, 0ms); } /* Stagger helpers - classes rather than inline custom properties so they round-trip through the Site Editor. */ .dcd-reveal--d1 { --dcd-delay: 90ms; } .dcd-reveal--d2 { --dcd-delay: 180ms; } .dcd-reveal--d3 { --dcd-delay: 270ms; } .dcd-reveal--d4 { --dcd-delay: 360ms; } /* Once revealed, drop the compositing hint so we don't hold layers forever. */ .dcd-js .dcd-reveal.is-revealed { will-change: auto; } @media (prefers-reduced-motion: reduce) { .dcd-js .dcd-reveal, .dcd-js .dcd-reveal.is-revealed { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------- Sticky header states (homepage) ------------------------------------------------- */ /* Marker band across the TOP of the hero, about as tall as the header. The observer watches it instead of running a scroll handler: the moment it stops intersecting, the page has scrolled far enough that hero content would start passing under the header, so the header goes solid. */ .dcd-header__sentinel { position: absolute; top: 0; left: 0; width: 100%; height: 120px; pointer-events: none; } body.home .dcd-header { transition: background-color 0.4s ease, border-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease; } /* Past the hero: solid charcoal so nav + CTA stay legible over cream. `has-panel-open` (set by dcd-nav.js) borrows the same treatment while a mega panel or the drawer is showing - a cream panel hanging off a fully transparent header over video has nothing to sit against. It's a separate class so the scroll observer stays the only thing that owns `is-solid`. */ body.home .dcd-header.is-solid, body.home .dcd-header.has-panel-open { background-color: rgba(16, 24, 38, 0.92) !important; -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom-color: rgba(250, 250, 250, 0.12) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22); } @media (prefers-reduced-motion: reduce) { body.home .dcd-header { transition: none; } } /* ------------------------------------------------- Header CTA This is the primary conversion action on every page, so it gets a solid fill rather than the outline style - an outlined rust button sitting over dark video footage was too low-contrast to read as the main action. ------------------------------------------------- */ .dcd-header .wp-block-button__link { background: var(--wp--preset--color--accent-rust); border-color: var(--wp--preset--color--accent-rust); color: #fff; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .dcd-header .wp-block-button__link:hover { background: var(--dcd-rust-hover); border-color: var(--dcd-rust-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(200, 56, 56, 0.35); } @media (prefers-reduced-motion: reduce) { .dcd-header .wp-block-button__link { transition: none; } .dcd-header .wp-block-button__link:hover { transform: none; } } /* ------------------------------------------------- Arrow links ------------------------------------------------- */ .dcd-arrow-link { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--wp--preset--font-family--oswald); font-size: var(--dcd-label-size-md); font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent-rust); text-decoration: none; padding-bottom: 0.35rem; position: relative; } /* Rule that draws itself in from the left on hover. */ .dcd-arrow-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .dcd-arrow-link:hover::after, .dcd-arrow-link:focus-visible::after { transform: scaleX(1); } .dcd-arrow-link svg { width: 14px; height: 14px; flex: none; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .dcd-arrow-link:hover svg, .dcd-arrow-link:focus-visible svg { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .dcd-arrow-link::after, .dcd-arrow-link svg { transition: none; } } /* ------------------------------------------------- Client marquee ------------------------------------------------- */ .dcd-marquee { --dcd-marquee-duration: 46s; position: relative; overflow: hidden; /* Sits directly inside a constrained-layout section, which would otherwise cap it at the 700px content width and strand the names in the middle. A marquee only reads correctly running the full width of the section. */ max-width: none; width: 100%; /* Fade the names out at both edges instead of clipping them hard. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .dcd-marquee__track { display: flex; width: max-content; animation: dcd-marquee-scroll var(--dcd-marquee-duration) linear infinite; } .dcd-marquee:hover .dcd-marquee__track, .dcd-marquee:focus-within .dcd-marquee__track { animation-play-state: paused; } .dcd-marquee__group { display: flex; align-items: center; flex: none; } .dcd-marquee__item { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; padding: 0 clamp(1.5rem, 3vw, 2.75rem); color: var(--wp--preset--color--charcoal); opacity: 0.62; transition: opacity 0.3s ease, color 0.3s ease; } .dcd-marquee__item:hover { opacity: 1; color: var(--wp--preset--color--accent-rust); } /* Separator dot between names. */ .dcd-marquee__item::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--wp--preset--color--accent-rust); vertical-align: middle; margin-left: clamp(1.5rem, 3vw, 2.75rem); opacity: 0.5; } /* Two identical groups sit side by side; translating exactly -50% lands the second group where the first started, so the loop has no visible seam. */ @keyframes dcd-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Reduced motion: stop the scroll and let the row wrap as static text. */ @media (prefers-reduced-motion: reduce) { .dcd-marquee { -webkit-mask-image: none; mask-image: none; } .dcd-marquee__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; } /* The duplicate group exists only to make the loop seamless. */ .dcd-marquee__group--clone { display: none; } .dcd-marquee__group { flex-wrap: wrap; justify-content: center; } .dcd-marquee__item { padding: 0.4rem clamp(1rem, 2vw, 1.75rem); } } /* ------------------------------------------------- Industries selector ------------------------------------------------- */ .dcd-industries { display: grid; gap: clamp(2rem, 5vw, 4.5rem); } /* The nav only means anything once JS has wired the panels together, so it stays hidden until then - with JS off you simply get every industry stacked and readable (and crawlable). */ .dcd-industries__nav { display: none; } .dcd-js .dcd-industries.is-enhanced { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } .dcd-js .dcd-industries.is-enhanced .dcd-industries__nav { display: flex; flex-direction: column; border-top: 1px solid var(--wp--preset--color--warm-gray); } .dcd-industries__tab { display: flex; align-items: baseline; gap: 1.1rem; width: 100%; padding: clamp(1rem, 2vw, 1.5rem) 0; background: none; border: 0; border-bottom: 1px solid var(--wp--preset--color--warm-gray); text-align: left; cursor: pointer; color: var(--wp--preset--color--charcoal); position: relative; transition: color 0.3s ease, padding-left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Rust rule that grows down the left edge of the active industry. */ .dcd-industries__tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--wp--preset--color--accent-rust); transform: scaleY(0); transform-origin: top; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .dcd-industries__tab:hover, .dcd-industries__tab.is-active { padding-left: 1.25rem; color: var(--wp--preset--color--accent-rust); } .dcd-industries__tab.is-active::before { transform: scaleY(1); } .dcd-industries__tab:focus-visible { outline: 2px solid var(--wp--preset--color--accent-rust); outline-offset: 3px; } .dcd-industries__num { font-family: var(--wp--preset--font-family--oswald); font-weight: var(--dcd-label-weight); font-size: var(--dcd-label-size-sm); letter-spacing: 2px; opacity: 0.55; flex: none; } .dcd-industries__name { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; } /* The measure cap belongs on the prose, not the panel - the photo runs the full width of the panel column, and capping the panel would shrink it to text width. */ .dcd-industries__panel > p { max-width: 46ch; } .dcd-industries__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); } .dcd-industries__panel:focus-visible { outline: 2px solid var(--wp--preset--color--accent-rust); outline-offset: 8px; } /* Panels are stacked and separated when JS is off. */ .dcd-industries__panel + .dcd-industries__panel { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--wp--preset--color--warm-gray); } .dcd-js .dcd-industries.is-enhanced .dcd-industries__panel + .dcd-industries__panel { margin-top: 0; padding-top: 0; border-top: 0; } .dcd-industries__panel-title { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1.1rem; } .dcd-industries__panel p { font-size: 1.0625rem; line-height: 1.65; margin: 0 0 1.75rem; } /* Cross-fade the incoming panel. */ .dcd-js .dcd-industries.is-enhanced .dcd-industries__panel.is-active { animation: dcd-panel-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes dcd-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .dcd-js .dcd-industries.is-enhanced .dcd-industries__panel.is-active { animation: none; } .dcd-industries__tab, .dcd-industries__tab::before { transition: none; } } /* Stack the selector below the nav on narrow screens. */ @media (max-width: 899px) { .dcd-js .dcd-industries.is-enhanced { grid-template-columns: 1fr; } .dcd-industries__panel { max-width: none; } } /* ------------------------------------------------- Split / bridge section ------------------------------------------------- */ .dcd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } @media (max-width: 899px) { .dcd-split { grid-template-columns: 1fr; } } /* ------------------------------------------------- RanchOS panel ------------------------------------------------- */ .dcd-ranchos { position: relative; overflow: hidden; border: 1px solid rgba(250, 250, 250, 0.14); } /* Faint blueprint grid - reads as "platform" without needing an image. */ .dcd-ranchos::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(250, 250, 250, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(250, 250, 250, 0.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000, transparent); mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000, transparent); } .dcd-ranchos > * { position: relative; z-index: 1; } .dcd-ranchos__badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--wp--preset--font-family--oswald); font-weight: var(--dcd-label-weight); font-size: var(--dcd-label-size-sm); letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--cream); border: 1px solid rgba(250, 250, 250, 0.3); padding: 0.4rem 0.9rem; } .dcd-ranchos__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--accent-rust); } /* Capability list - each row marked so "available today" is never confused with roadmap work (an explicit requirement in the copy deck). */ .dcd-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .dcd-caps li { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(250, 250, 250, 0.14); font-size: 1rem; } .dcd-caps li:first-child { border-top: 1px solid rgba(250, 250, 250, 0.14); } .dcd-caps__status { font-family: var(--wp--preset--font-family--oswald); font-weight: var(--dcd-label-weight); font-size: var(--dcd-label-size-sm); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; padding: 0.25rem 0.6rem; border: 1px solid currentColor; } .dcd-caps__status--live { color: #7FB88A; } .dcd-caps__status--soon { color: rgba(250, 250, 250, 0.55); } /* ------------------------------------------------- Work cards ------------------------------------------------- */ .dcd-work { display: grid; gap: 0; border-top: 1px solid var(--wp--preset--color--warm-gray); } .dcd-work__item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-bottom: 1px solid var(--wp--preset--color--warm-gray); position: relative; text-decoration: none; color: inherit; transition: background-color 0.35s ease; } /* Hover: a rust rule drawing across the top, matching the capability grid in "What We Build" directly above - same 2px weight, same left origin, same easing, so the two sections read as one system rather than two ideas. (This replaced a full-bleed rust wash that flipped every label to white; at this card size it swamped the section and fought the section above it.) */ .dcd-work__item::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--wp--preset--color--accent-rust); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .dcd-work__item:hover::before, .dcd-work__item:focus-visible::before { transform: scaleX(1); } /* The section sits on white, so the lift goes the other way from the capability grid's (which sits on cream and lifts to white). */ .dcd-work__item:hover, .dcd-work__item:focus-visible { background: var(--wp--preset--color--cream); } .dcd-work__item:focus-visible { outline: 2px solid var(--wp--preset--color--accent-rust); outline-offset: 4px; } /* Only the title takes the accent - the number and CTA are already rust, and turning the body copy too would be the old all-over treatment again. */ .dcd-work__item:hover .dcd-work__name, .dcd-work__item:focus-visible .dcd-work__name { color: var(--wp--preset--color--accent-rust); } /* Project thumbnail. Small on purpose - this is a text-led index, and a big image here would turn it into a card grid and swamp the numerals. */ .dcd-work__thumb { display: block; flex: none; width: clamp(88px, 11vw, 148px); } .dcd-work__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; filter: saturate(0.85); transition: filter 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .dcd-work__item:hover .dcd-work__thumb img, .dcd-work__item:focus-visible .dcd-work__thumb img { filter: saturate(1.05); transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .dcd-work__thumb img { transition: none; } .dcd-work__item:hover .dcd-work__thumb img, .dcd-work__item:focus-visible .dcd-work__thumb img { transform: none; } } .dcd-work__num { font-family: var(--wp--preset--font-family--oswald); font-weight: var(--dcd-label-weight); font-size: var(--dcd-label-size-sm); letter-spacing: 2px; color: var(--wp--preset--color--accent-rust); transition: color 0.35s ease; } /* Name and description are s inside the card's , so they need blockifying explicitly - only the direct grid children get that for free. */ .dcd-work__name, .dcd-work__desc { display: block; } .dcd-work__name { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.4rem; transition: color 0.35s ease; } .dcd-work__desc { margin: 0; font-size: 0.98rem; line-height: 1.6; max-width: 62ch; opacity: 0.85; transition: color 0.35s ease; } .dcd-work__cta { font-family: var(--wp--preset--font-family--oswald); font-weight: var(--dcd-label-weight); font-size: var(--dcd-label-size-md); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; color: var(--wp--preset--color--accent-rust); display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.35s ease; } .dcd-work__cta svg { width: 14px; height: 14px; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .dcd-work__item:hover .dcd-work__cta svg { transform: translateX(5px); } @media (max-width: 767px) { /* Thumbnail drops out rather than squeezing the title into a sliver - the numeral plus the name is the whole point of the row at this size. */ .dcd-work__thumb { display: none; } .dcd-work__item { grid-template-columns: auto minmax(0, 1fr); } .dcd-work__cta { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { .dcd-work__item, .dcd-work__item::before, .dcd-work__cta svg { transition: none; } } /* ------------------------------------------------- Section photography (industries + services) Client photography sitting at the foot of each section's title column on /industries/ and /services/. Source images run anywhere from 16:9 to 4:3, so a fixed ratio plus object-fit keeps the column edges aligned down the page instead of each section stepping in and out. ------------------------------------------------- */ /* The number, title and subtitle are now siblings at the section group's root rather than stacked inside a column, so they inherit the *global* block gap and drift a long way apart. Pull the header together, then restore a deliberate gap before the photo/copy row. Both selectors have to out-weigh core's `.is-layout-flow > :where(...)` block-gap rule, which is a single class - hence matching on the group via :has() rather than styling .dcd-section-body on its own. */ .wp-block-group:has(> .dcd-section-body) > * + * { margin-block-start: 0.45rem; } .wp-block-group:has(> .dcd-section-body) > .dcd-section-body { margin-block-start: var(--wp--preset--spacing--50); } .dcd-section-photo { margin: 0; } .dcd-section-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; } /* The photo fills the row so both columns finish exactly level whatever the copy length. The height must come from the ROW, never from the image, or the layout depends on whether the file has loaded yet. An earlier version used `min-height: 100%` with `aspect-ratio: auto`, which gave a lazy-loaded image no reserved space: before it loaded it expanded to ~1500px tall and shoved the rest of the page down, then snapped back on load. So: `min-height: 0` stops the figure contributing any intrinsic height, and `height: 100%` resolves against the row instead. The rem floor keeps a section with very short copy from squashing its photo into a strip. */ @media (min-width: 782px) { .dcd-section-body { align-items: stretch; } .dcd-section-body > .wp-block-column:first-child { display: flex; min-height: 0; } /* The image is positioned OUT OF FLOW inside this box. That is the whole trick: an in-flow img contributes intrinsic height, and a lazy one that has not loaded yet reports a huge one when it is also a stretched flex item - measured at 1500px, which shoved the rest of the page down until the file arrived. Out of flow it contributes nothing, so the row height can only come from the copy column, loaded or not. */ .dcd-section-photo { flex: 1; display: block; position: relative; min-height: 18rem; } .dcd-section-photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; } } /* Stacked: the photo sits between the heading and the copy, so a tall crop would push the actual content off the first screen. Letterbox it. */ @media (max-width: 781px) { .dcd-section-photo img { aspect-ratio: 16 / 9; } } /* ------------------------------------------------- RanchOS interface previews Alternating image/copy rows on /ranchos/. The mockups are SVG, so they stay crisp at any width and weigh ~8KB each; the frame below supplies the drop shadow and inset so they read as screens rather than diagrams. Status pills reuse .dcd-feature__status from the capability grid on purpose - that badge is the page's permanent, non-JS signal separating shipped work from roadmap work, and a preview must not quietly imply more than the list. ------------------------------------------------- */ .dcd-osshots { display: grid; gap: var(--wp--preset--spacing--70); } .dcd-osshot { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; margin: 0; } /* Alternate which side the screen sits on so the column of rows doesn't read as a list of identical cards. The track sizes have to mirror too, not just the order - grid tracks are positional, so re-ordering alone drops the screen into the narrow copy column. */ .dcd-osshot:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } .dcd-osshot:nth-child(even) .dcd-osshot__frame { order: 2; } .dcd-osshot__frame { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--warm-gray); border-radius: 14px; padding: clamp(0.5rem, 1vw, 0.9rem); box-shadow: 0 18px 40px rgba(16, 24, 38, 0.1); } .dcd-osshot__frame img { display: block; width: 100%; height: auto; border-radius: 8px; } .dcd-osshot__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; } .dcd-osshot__name { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; margin: 0; } .dcd-osshot__body p { margin: 0; font-size: 1rem; line-height: 1.65; max-width: 42ch; } @media (max-width: 781px) { .dcd-osshot { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } /* Screen always leads on a stacked layout - alternating order only makes sense when the two are side by side. */ .dcd-osshot:nth-child(even) .dcd-osshot__frame { order: 0; } } /* ------------------------------------------------- Contact page Inquiry column + a sidebar of cards. The form slot is styled generically (input/select/textarea/button) rather than against Gravity Forms' own class names, so it looks right whichever form plugin ends up inside it - and so these rules don't rot if GF changes its markup. ------------------------------------------------- */ .dcd-contact__form { margin-top: var(--wp--preset--spacing--40); } /* The form column is a single centered measure now, not a 60/40 split with a sidebar. The FINAL copy doc asks for the form directly beneath the opening copy with the repeated client/industry/service lists removed, which leaves nothing to put in a sidebar. */ .dcd-contact__panel { margin-inline: auto; } .dcd-contact__closing .dcd-contact__card { margin-top: 0; } /* --- The direct-contact card ---------------------------------------------- Always rendered, and always above the form: someone who would rather call should not have to scroll past a form to find the number. With no form connected this card is the entire answer, so it is styled to stand on its own rather than as an adjunct to something else. */ .dcd-contact__direct { padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--wp--preset--color--warm-gray); background: var(--wp--preset--color--white); } .dcd-contact__direct-lead { margin: 0 0 1.25rem; font-family: var(--wp--preset--font-family--oswald); font-size: var(--dcd-label-size-md); font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent-rust); } .dcd-contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .dcd-contact__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.75rem; border: 2px solid var(--wp--preset--color--accent-rust); color: var(--wp--preset--color--accent-rust); font-family: var(--wp--preset--font-family--oswald); font-size: 1rem; font-weight: var(--dcd-label-weight); letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease; } .dcd-contact__btn--primary { background: var(--wp--preset--color--accent-rust); color: var(--wp--preset--color--white); } .dcd-contact__btn:hover { background: var(--dcd-rust-hover); border-color: var(--dcd-rust-hover); color: var(--wp--preset--color--white); } .dcd-contact__direct-note { margin: 1.5rem 0 0; font-size: 0.95rem; line-height: 1.6; color: color-mix(in srgb, currentColor 70%, transparent); } /* Visible only to logged-in admins - see patterns/contact-page.php. */ .dcd-contact__admin-note { margin-top: 1.25rem; padding: 0.9rem 1.1rem; border-left: 3px solid var(--wp--preset--color--accent-rust); background: color-mix(in srgb, var(--wp--preset--color--accent-rust) 7%, transparent); font-size: 0.85rem; line-height: 1.55; } /* --- "What we can help with" deep links ----------------------------------- */ .dcd-contact__services { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--warm-gray); } .dcd-contact__services ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.15rem 1.5rem; margin: 0; padding: 0; list-style: none; } .dcd-contact__services a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--wp--preset--color--warm-gray); color: inherit; font-size: 0.95rem; text-decoration: none; } .dcd-contact__services a span { color: var(--wp--preset--color--accent-rust); transition: transform 0.2s ease; } .dcd-contact__services a:hover { color: var(--wp--preset--color--accent-rust); } .dcd-contact__services a:hover span { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .dcd-contact__services a span { transition: none; } } /* --- Sidebar cards -------------------------------------------------------- */ .dcd-contact__aside { display: grid; gap: var(--wp--preset--spacing--40); } .dcd-contact__card { padding: clamp(1.5rem, 2.5vw, 2rem); border: 1px solid var(--wp--preset--color--warm-gray); } .dcd-contact__card--note { background: var(--wp--preset--color--white); border-left: 3px solid var(--wp--preset--color--accent-rust); } .dcd-contact__card .dcd-eyebrow { margin-top: 0; } .dcd-contact__card p { font-size: 0.95rem; line-height: 1.6; } .dcd-contact__card p:last-child { margin-bottom: 0; } .dcd-contact__addr { font-style: normal; } .dcd-contact__links a { color: var(--wp--preset--color--accent-rust); text-decoration: none; } .dcd-contact__links a:hover { text-decoration: underline; } .dcd-contact__list { margin: 0; padding-left: 1.1rem; font-size: 0.95rem; line-height: 1.7; } /* --- Form fields, whichever plugin renders them --------------------------- */ .dcd-contact__form input[type="text"], .dcd-contact__form input[type="email"], .dcd-contact__form input[type="tel"], .dcd-contact__form input[type="url"], .dcd-contact__form select, .dcd-contact__form textarea { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--wp--preset--color--warm-gray); border-radius: 0; /* background-color, not the `background` shorthand. The shorthand also resets background-image, and a