/* Theme Name: Owen Leonard Creative Theme URI: https://www.owenleonardcreative.com/ Author: Owen Leonard Creative Author URI: https://www.owenleonardcreative.com/ Description: A lightweight, accessibility-ready classic theme for Owen Leonard Creative, built on Timber/Twig with an ACF-driven content backend. No page builder, no block editor, no bloat. Version: 1.24.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: owen-leonard-creative */ /* ========================================================================= DESIGN TOKENS — matched to the live site: charcoal sections, one blue accent, white. No secondary accent color; the blue does everything. ========================================================================= */ :root { --ink: #2c2c2c; /* main dark section background */ --ink-deep: #232426; /* header / footer background */ --blue: #2c5da2; /* primary accent — circles, buttons, portfolio bg */ --blue-deep: #1f4278; /* hover / pressed / darker fills */ --blue-light: #4d84d6; /* script tagline, highlighted copy, focus rings */ --white: #ffffff; --mist: #b3b3b3; /* muted text on dark backgrounds */ --font-display: "Cabin", sans-serif; /* big headings/names — Owen Leonard, section titles */ --font-condensed: "Cabin Condensed", sans-serif; /* uppercase labels — nav, buttons, tags, process/trait labels */ --font-body: "Cabin", sans-serif; /* paragraphs, form fields, list text */ --font-script: "Kaushan Script", cursive; /* "Marketing Executive" only — the one exception */ --font-stencil: "Bebas Neue", sans-serif; /* creativity banner headline */ --content-max: 75rem; --gutter: clamp(1.25rem, 4vw, 3rem); --radius: 2px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Process-step circle diameter, measured from the reference design (~170px at a 1512px viewport). The staircase offsets in .process-item are calc()'d from this, so changing it here rescales the whole row. */ /* Mobile/tablet only — the desktop block at the foot of this file owns this value from 768px up. */ --process-size: clamp(72px, 9.6vw, 96px); } /* ========================================================================= RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Full-bleed blocks use 100vw, which includes the scrollbar width and would otherwise cause a sideways scroll of a few pixels. */ overflow-x: clip; } body { overflow-x: clip; } body { margin: 0; /* Dark base so the angled band and section seams never flash white. */ background: var(--ink); color: var(--white); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; text-decoration-color: currentColor; } ul, ol { list-style: none; margin: 0; padding: 0; } /* ...but editorial content keeps real bullets and numbers. */ .entry-content ul, .pf-text ul, .pf-split__body ul { list-style: disc; padding-left: 1.4em; margin-block: 1em; } .entry-content ol, .pf-text ol, .pf-split__body ol { list-style: decimal; padding-left: 1.5em; margin-block: 1em; } .entry-content li, .pf-text li, .pf-split__body li { margin-bottom: 0.5em; } h1, h2, h3, h4 { line-height: 1.1; margin: 0 0 0.5em; font-family: var(--font-display); font-weight: 700; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } /* ========================================================================= SCROLL REVEAL / MOTION Elements fade + rise into place as they enter the viewport, mirroring the reference site's staggered cascade. `.js-reveal` is added to by main.js, so with JS disabled everything stays visible by default. ========================================================================= */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--reveal-delay, 0ms); } .js-reveal [data-reveal].is-visible { opacity: 1; /* Resting transform is a variable so hover states can override it without losing to this rule's specificity. */ transform: var(--reveal-rest, none); } .js-reveal [data-reveal][data-reveal-from="left"] { transform: translateX(-48px); } .js-reveal [data-reveal][data-reveal-from="up"] { transform: translateY(46px); } @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal], .js-reveal [data-reveal].is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= ACCESSIBILITY UTILITIES ========================================================================= */ .skip-link { position: absolute; left: 0.5rem; top: -3rem; background: var(--blue); color: var(--white); padding: 0.75rem 1.25rem; font-weight: 600; border-radius: var(--radius); z-index: 1000; transition: top 0.2s var(--ease); } .skip-link:focus { top: 0.5rem; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } :focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; } /* ========================================================================= LAYOUT PRIMITIVES ========================================================================= */ .wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(3rem, 8vw, 6rem); } .section--dark { background: var(--ink); color: var(--white); } .section--blue { background: var(--blue); color: var(--white); } .section--white { background: var(--white); color: var(--ink); } .section-title { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .section-title h1, .section-title h2 { margin: 0; } .title-rule { flex: 1 1 6rem; height: 1px; background: rgba(255, 255, 255, 0.25); min-width: 3rem; } .section--white .title-rule { background: rgba(0, 0, 0, 0.15); } h1 { font-size: clamp(2rem, 5vw, 3.1rem); } h2 { font-size: clamp(2rem, 5vw, 3.1rem); } h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; padding: 0.95rem 2rem; border: none; border-radius: var(--radius); background: var(--blue); color: var(--white); cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .btn:hover, .btn:focus-visible { background: var(--blue-deep); transform: translateY(-2px); color: var(--white); } /* ========================================================================= SITE HEADER / NAV ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--ink-deep); color: var(--white); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.75rem; } .site-logo { display: inline-flex; align-items: center; } .site-logo img { max-height: 56px; width: auto; } .site-logo, .site-logo a { color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; } .nav-toggle { display: none; align-items: center; gap: 0.5rem; background: none; border: 2px solid var(--white); border-radius: var(--radius); color: var(--white); padding: 0.5rem 0.75rem; cursor: pointer; } .primary-nav ul { display: flex; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; } .primary-nav a { font-family: var(--font-condensed); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; padding-block: 0.4rem; border-bottom: 2px solid transparent; transition: border-color 0.2s var(--ease); } .primary-nav a:hover, .primary-nav a:focus-visible, .primary-nav a.is-active, .primary-nav a[aria-current="page"] { border-color: var(--white); } /* With the scroll-spy active, the current-page marker must not also underline — otherwise Home stays underlined alongside the live section. */ .js-spy .primary-nav a[aria-current="page"] { border-color: transparent; } .js-spy .primary-nav a.is-active { border-color: var(--white); } @media (max-width: 1023px) { .nav-toggle { display: inline-flex; } .primary-nav { position: absolute; inset-inline: 0; top: 100%; background: var(--ink-deep); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem var(--gutter) 1.5rem; display: none; } .primary-nav.is-open { display: block; } .primary-nav ul { flex-direction: column; gap: 1rem; } } /* ========================================================================= HERO ========================================================================= */ .hero { background: var(--ink); color: var(--white); min-height: auto; display: flex; align-items: center; padding-block: clamp(2rem, 7vw, 3rem); text-align: center; } /* Only fill the viewport once there's room for it to be worthwhile. */ @media (min-width: 768px) { .hero { min-height: calc(100svh - 5.25rem); } } .hero .wrap { width: 100%; } .hero__name { font-size: clamp(2.5rem, 7.8vw, 3.75rem); margin-bottom: 0.02em; line-height: 0.98; } .hero__role { font-family: var(--font-script); font-weight: 400; color: var(--blue-light); font-size: clamp(1.6rem, 5.5vw, 2.65rem); line-height: 1.05; margin-bottom: 0.15em; } .hero__headline { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(1rem, 2.05vw, 1.25rem); margin-bottom: clamp(1.5rem, 4vh, 3rem); } .hero__headline .accent { color: var(--blue-light); } .process { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); } .process-from, .process-connector { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mist); align-self: center; } .process-from { font-size: clamp(0.7rem, 0.95vw, 0.9rem); } .process-connector { font-size: clamp(1rem, 1.6vw, 1.6rem); color: var(--white); } .process-item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } /* Ascending staircase — offsets measured from the reference design as a ratio of the circle diameter (step 2 sits ~0.40x higher than step 1, step 3 ~0.66x higher). Uses the same clamp() as .process-icon so the rise scales with the circles. */ .process-item:nth-child(4) { margin-bottom: calc(var(--process-size) * 0.40); } .process-item:nth-child(6) { margin-bottom: calc(var(--process-size) * 0.66); } .process-connector:nth-child(3) { margin-bottom: calc(var(--process-size) * 0.20); } .process-connector:nth-child(5) { margin-bottom: calc(var(--process-size) * 0.53); } .process-from { margin-bottom: calc(var(--process-size) * 0.30); } .process-icon { width: var(--process-size); height: var(--process-size); border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; } .process-icon svg { width: 42%; height: 42%; color: var(--white); } .process-item span { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1rem, 1.55vw, 1.55rem); } /* ========================================================================= BIO BAND (diagonal skew, handwritten copy) ========================================================================= */ /* The band and its text are both rotated ~2deg — in the reference the text baseline tilts along with the band, which clip-path alone can't do (it skews the shape but leaves text flat). The outer element hides overflow; the inner band is over-wide and rotated so its angled edges still cover the full viewport width with no corner gaps. */ .bio-band { position: relative; overflow: hidden; /* The rotated inner band leaves triangular gaps at the corners; this background fills them with the same charcoal as the sections above and below, instead of letting the page's white show through. */ background: var(--ink); padding-block: clamp(2rem, 5vw, 3.5rem); margin-block: 0; } .bio-band__inner { background: var(--blue); color: var(--white); transform: rotate(-2deg) translateY(var(--parallax-shift, 0px)); transform-origin: center; /* Over-wide so the rotated edges still span the full viewport. */ width: 118%; margin-left: -9%; padding-block: clamp(3rem, 7vw, 4.5rem); will-change: transform; } .bio-band .bio-text { font-family: var(--font-body); font-weight: 400; color: var(--white); font-size: 22px; line-height: 31px; text-align: center; max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); } /* ========================================================================= TRAITS ROW ========================================================================= */ .traits { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3vw, 2.25rem); padding-block: clamp(3rem, 7vw, 4.5rem); background: var(--ink); } .trait { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--white); } .trait-icon { width: clamp(78px, 6.6vw, 96px); height: clamp(78px, 6.6vw, 96px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; color: var(--blue); transition: border-color 0.2s var(--ease); } .trait-icon svg { width: clamp(48px, 4.4vw, 65px); height: clamp(48px, 4.4vw, 65px); } .trait span { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(0.95rem, 1.15vw, 1.2rem); transition: color 0.2s var(--ease); } .trait { transition: transform 0.25s var(--ease); } .trait:hover, .trait:focus-within { --reveal-rest: translateY(-6px); transform: translateY(-6px); } .trait-icon { transition: border-color 0.2s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease); } .trait:hover .trait-icon, .trait:focus-within .trait-icon { border-color: var(--blue-light); transform: scale(1.08); } .trait:hover span, .trait:focus-within span { color: var(--blue-light); } /* ========================================================================= ABOUT ("Who Am I?") ========================================================================= */ .section--about { /* Charcoal with the blue wash rising from the lower-left, as in the reference. */ background: linear-gradient(215deg, var(--ink) 0%, var(--ink) 58%, #35619f 100%); color: var(--white); } /* Mirrored gradient (blue rising from the lower-RIGHT) for the Services/Tools and Brands sections. */ /* Services/Tools and Past-Brands sit inside one continuous gradient band so there's no seam between them. */ .gradient-band { background: linear-gradient(145deg, var(--ink) 0%, var(--ink) 58%, #35619f 100%); color: var(--white); } .section--services, .section--brands { background: transparent; color: var(--white); } .about__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .about__media { border-radius: 10px; overflow: hidden; will-change: transform; transform: translateY(var(--float-shift, 0px)); } .about__photo { width: 100%; height: auto; object-fit: cover; display: block; filter: grayscale(1); border-radius: 10px; } .about__copy { padding: clamp(1.5rem, 4vw, 2.5rem) 0; } /* Exact type spec supplied for this section. */ .about__copy .section-title h2 { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 50px; line-height: 53px; } .about-body, .about-body p { font-family: var(--font-condensed); font-weight: 400; font-size: 20px; line-height: 34px; } .about__bullets li { font-family: var(--font-condensed); font-weight: 400; font-size: 20px; line-height: 34px; } .about__cta .btn { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 22px; color: rgba(255, 255, 255, 0.8); } @media (max-width: 1023px) { .about__copy .section-title h2 { font-size: clamp(2rem, 7vw, 50px); line-height: 1.1; } } .about__copy strong { color: var(--blue-light); font-weight: 700; } .about__bullets { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; } .about__bullets li { display: flex; align-items: center; gap: 0.85rem; font-size: 1.05rem; } .bullet-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; } .bullet-icon svg { width: 16px; height: 16px; color: var(--white); } .about__cta { margin-top: 2rem; } @media (max-width: 1023px) { .about__grid { grid-template-columns: 1fr; } .about__photo { max-height: 24rem; } .about__copy { padding-inline: 0; } } /* ========================================================================= SERVICES + TOOLS (one combined section) ========================================================================= */ .category-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); } .category-tile { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1); position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--blue-deep); } .category-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .category-tile::after { content: ""; position: absolute; inset: 0; background: rgba(15, 15, 15, 0.35); } .category-tile:hover, .category-tile:focus-within { --reveal-rest: translateY(-16px); transform: translateY(-16px); box-shadow: 0 18px 34px rgba(0,0,0,0.45); } .js-reveal .category-tile[data-reveal] { transition: opacity 0.7s var(--ease), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .category-tile span { position: relative; z-index: 1; font-family: var(--font-condensed); font-weight: 700; font-size: 1.2rem; color: var(--white); text-align: center; padding: 0 1rem; } .services-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .services-list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.5rem; } .services-list li { display: flex; align-items: center; gap: 0.85rem; font-size: 1.05rem; } .tools-media { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; aspect-ratio: 16 / 9; } .tools-media img { width: 100%; height: 100%; object-fit: cover; } .tools-media::after { content: ""; position: absolute; inset: 0; background: rgba(15, 15, 15, 0.4); } .tools-media span { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: clamp(0.75rem, 2vw, 1.5rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--white); } .tools-group + .tools-group { margin-top: 1.5rem; } .tools-group h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--white); } .tools-group ul { display: flex; flex-direction: column; gap: 0.3rem; } .tools-group li { color: var(--white); padding-left: 1rem; position: relative; } .tools-group li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--white); } @media (max-width: 1023px) { .services-tools-grid { grid-template-columns: 1fr; } } /* ========================================================================= BRANDS CAROUSEL ========================================================================= */ .brands-carousel { position: relative; padding-inline: clamp(0px, 4vw, 3rem); } .brands-track-wrap { overflow: hidden; } .brands-track { display: flex; gap: 1rem; transition: transform 0.5s var(--ease); will-change: transform; } .brand-card { flex: 0 0 auto; width: 195px; height: 150px; background: var(--white); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 0; } .brand-card img { width: 100%; height: 100%; object-fit: contain; } .brand-card { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .brand-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; /* 44px minimum touch target */ border-radius: 50%; background: transparent; color: var(--mist); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; z-index: 2; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .carousel-btn:hover, .carousel-btn:focus-visible { background: rgba(255, 255, 255, 0.12); color: var(--white); } .carousel-btn--prev { left: 0; } .carousel-btn--next { right: 0; } .carousel-btn svg { width: 1rem; height: 1rem; } /* ========================================================================= PORTFOLIO GRID (solid blue section) ========================================================================= */ .portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .portfolio-tile { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; border: 2px solid transparent; background: var(--blue-deep); transition: border-color 0.2s var(--ease); } .portfolio-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .portfolio-tile__title { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--white); padding: 1rem; } .portfolio-tile:hover, .portfolio-tile:focus-visible { --reveal-rest: translateY(-6px); transform: translateY(-6px); } .portfolio-tile { transition: border-color 0.2s var(--ease), transform 0.3s var(--ease); } .portfolio-tile img { transition: transform 0.5s var(--ease), opacity 0.3s var(--ease); } .portfolio-tile:hover img, .portfolio-tile:focus-visible img { transform: scale(1.06); opacity: 0.7; } @media (max-width: 767px) { .portfolio-grid { grid-template-columns: 1fr; } } /* ========================================================================= CREATIVITY CTA BANNER ========================================================================= */ .creativity-banner { position: relative; min-height: clamp(14rem, 26vw, 20rem); display: flex; align-items: flex-end; overflow: hidden; background: var(--mist); } .creativity-banner img { position: absolute; left: 0; right: 0; top: -22%; width: 100%; height: 144%; object-fit: cover; transform: translateY(var(--parallax-shift, 0px)); will-change: transform; } .creativity-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), transparent 60%); } .creativity-banner h2 { position: relative; z-index: 1; width: 100%; font-family: var(--font-stencil); font-weight: 400; letter-spacing: 0.02em; font-size: clamp(1.9rem, 7vw, 4.25rem); color: var(--ink); padding: 0 var(--gutter) clamp(1rem, 3vw, 2rem); margin: 0; } /* ========================================================================= CONTACT ("Let's Talk!") ========================================================================= */ .contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field--full { grid-column: 1 / -1; } .field label { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 1rem; } .field input, .field textarea { background: var(--white); color: var(--ink); border: none; border-radius: var(--radius); padding: 0.9rem 1rem; font-family: var(--font-body); font-size: 1rem; } .field input::placeholder, .field textarea::placeholder { color: #8a8a8a; } .field textarea { min-height: 7rem; resize: vertical; } .contact-form .btn { width: 100%; padding: 1.1rem; font-size: 1.1rem; margin-top: 0.5rem; } .contact-aside h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin-bottom: 1.25rem; text-align: center; } .contact-socials { display: flex; gap: 1.5rem; margin-bottom: 2rem; justify-content: center; } .contact-socials a { color: var(--white); } .contact-socials svg { width: 2.6rem; height: 2.6rem; } .contact-cards { display: flex; flex-direction: column; gap: 1rem; flex: 1 1 0; min-height: 0; } .contact-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .contact-aside { display: flex; flex-direction: column; min-height: 0; } .contact-card { background: var(--blue); border-radius: 0; padding: 1.25rem 1rem; text-align: center; min-height: 0; } .contact-card { transition: background 0.55s var(--ease), transform 0.35s var(--ease); } .contact-card:hover { background: #4d84d6; transform: translateY(-3px); } .contact-card:hover .card-icon { background: rgba(255, 255, 255, 0.75); color: var(--blue); } .contact-card .card-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--ink-deep); transition: background 0.55s var(--ease), color 0.55s var(--ease); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: 0.75rem; } .contact-card .card-icon svg { width: 20px; height: 20px; color: var(--white); } .contact-card a, .contact-card span.value { font-family: var(--font-condensed); font-weight: 700; letter-spacing: 0.02em; color: var(--white); font-size: 1.02rem; text-transform: uppercase; } .contact-heading { text-transform: uppercase; } .hp-field { position: absolute; left: -9999px; } .form-note { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius); font-weight: 600; } .form-note--success { background: rgba(77, 132, 214, 0.2); color: var(--blue-light); } .form-note--error { background: rgba(214, 77, 77, 0.15); color: #e88b7d; } .form-note[hidden] { display: none; } @media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } } /* ========================================================================= SITE FOOTER ========================================================================= */ /* The page content scrolls up to reveal the footer sitting behind it. */ @media (min-width: 1024px) { .site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; } main { position: relative; z-index: 1; background: var(--ink); margin-bottom: var(--footer-h, 0px); } } .site-footer { background: var(--ink-deep); color: var(--mist); padding-block: clamp(3rem, 6vw, 4rem) 0; } .footer-brand { text-align: center; margin-bottom: 2rem; } .footer-brand img { max-height: none; width: auto; max-width: min(420px, 80%); height: auto; object-fit: contain; margin-inline: auto; margin-bottom: 1.75rem; } .footer-brand strong { display: block; color: var(--white); font-size: 1.25rem; margin-bottom: 1.5rem; } .footer-info { text-align: center; color: var(--mist); line-height: 1.8; } .footer-info a { color: #cfcfcf; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 2.5rem; padding-block: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; } .footer-bottom .socials { display: flex; gap: 0.75rem; } .footer-bottom .socials a { width: 2.25rem; height: 2.25rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--white); } .footer-bottom .socials svg { width: 1rem; height: 1rem; } /* ========================================================================= BLOG / SINGLE POST / STANDARD PAGE ========================================================================= */ .page-header { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .page-header h1 { font-size: clamp(2rem, 5vw, 3.1rem); } .post-meta { color: var(--mist); font-weight: 600; } .featured-image { border-radius: var(--radius); margin-block: 2rem; } .entry-content { padding-block: clamp(2rem, 5vw, 3rem); max-width: 68rem; margin-inline: auto; } /* Keep running text at a readable measure, but let images use the full column. */ .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > blockquote { max-width: 46rem; } .entry-content > * + * { margin-top: 1.25em; } .entry-content h2, .entry-content h3 { margin-top: 1.6em; } .entry-content a { color: var(--blue-light); text-decoration: underline; text-underline-offset: 3px; } .entry-content a:hover, .entry-content a:focus-visible { color: var(--white); } .entry-content img { border-radius: var(--radius); margin-block: 1.5rem; } .entry-content blockquote { border-left: 4px solid var(--blue); padding-left: 1.25rem; font-style: italic; color: var(--mist); } .post-list { display: grid; gap: 2.5rem; padding-block: 2.5rem; } .post-card__thumb { border-radius: var(--radius); } .post-card__title a { color: var(--white); } .post-card__title a:hover, .post-card__title a:focus-visible { color: var(--blue-light); } .post-card__excerpt { color: var(--mist); } .pagination { display: flex; gap: 1rem; padding-block: 2rem; font-family: var(--font-condensed); font-weight: 600; } .pagination a { border-bottom: 2px solid var(--blue); } /* ========================================================================= PORTFOLIO PROJECT (single project page) ========================================================================= */ .project-hero { background: var(--ink); color: var(--white); padding-block: clamp(3rem, 8vw, 5rem); } .project-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .project-hero__meta span { font-family: var(--font-condensed); font-weight: 600; font-size: 0.9rem; color: var(--blue-light); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius); padding: 0.2rem 0.7rem; } .project-hero__client { color: var(--mist); font-weight: 600; margin-bottom: 0.5rem; } .project-nav { display: flex; justify-content: space-between; gap: 1rem; padding-block: 2rem 3rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-weight: 600; } .project-nav a:hover, .project-nav a:focus-visible { color: var(--blue-light); } /* ========================================================================= BACK TO TOP ========================================================================= */ .to-top { position: fixed; right: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem); z-index: 200; width: 2.9rem; height: 2.9rem; display: flex; align-items: center; justify-content: center; background: var(--blue); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.2s var(--ease); } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .to-top:hover, .to-top:focus-visible { background: var(--blue-deep); } .to-top svg { width: 1.1rem; height: 1.1rem; } /* ========================================================================= INLINE CONTENT IMAGES Images placed between paragraphs in Portfolio Item content, plus rows of 2-4 images that sat side by side on the original pages. ========================================================================= */ .entry-image { display: block; width: 100%; height: auto; border-radius: var(--radius); margin-block: clamp(1.5rem, 3vw, 2.5rem); } .entry-image-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); margin-block: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .entry-image-row img { width: 100%; height: auto; border-radius: var(--radius); margin: 0; } /* Content column is narrow for readability; let image rows breathe wider. */ .entry-content .entry-image-row, .entry-content .entry-image { max-width: none; } /* ========================================================================= PORTFOLIO PROJECT — HERO, SPLIT ROWS, PARALLAX BREAKS ========================================================================= */ /* Full-bleed hero banner. The image is over-tall and drifts on scroll. */ .project-banner { position: relative; width: 100%; height: clamp(20rem, 75vh, 550px); overflow: hidden; background: var(--ink); } .project-banner__img { position: absolute; left: 0; right: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; transform: translateY(var(--parallax-shift, 0px)); will-change: transform; } /* Project title block sits under the banner, centred. */ .project-hero { text-align: center; padding-block: clamp(2rem, 5vw, 3.25rem); } .project-hero__meta { justify-content: center; } .project-hero__client { color: var(--mist); font-size: 1.15rem; margin-top: 0.35rem; } /* Intro paragraph directly under the title reads centred, as on the original. */ .entry-content > p:first-child { text-align: center; margin-inline: auto; } /* Two-column row: image on the left, copy on the right. */ .entry-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-block: clamp(2rem, 5vw, 3.5rem); } .entry-split__media img { width: 100%; height: auto; border-radius: var(--radius); display: block; } .entry-split__body > *:first-child { margin-top: 0; } .entry-split__body > p { max-width: none; } @media (max-width: 1023px) { .entry-split { grid-template-columns: 1fr; } } /* Full browser-width parallax image break between sections. */ .entry-parallax { position: relative; /* Break out of the centred content column to span the viewport. */ width: 100vw; margin-left: 50%; transform: translateX(-50%); height: clamp(14rem, 38vh, 28rem); overflow: hidden; margin-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--ink); } .entry-parallax__img { position: absolute; left: 0; right: 0; top: -18%; width: 100%; height: 136%; object-fit: cover; transform: translateY(var(--parallax-shift, 0px)); will-change: transform; } /* ========================================================================= PORTFOLIO PAGE BLOCKS (ACF flexible content) ========================================================================= */ .pf-blocks { padding-block: clamp(1.5rem, 4vw, 3rem); } .pf-blocks > * + * { margin-top: clamp(2rem, 4vw, 3.5rem); } /* Blocks share one generous column; prose inside keeps a readable measure. */ .pf-text, .pf-full, .pf-row, .pf-split, .pf-quote { max-width: 84rem; margin-inline: auto; } .pf-text { padding-block: 0; } /* Text blocks use the full block width — no narrow measure here. */ .pf-text > p, .pf-text > ul, .pf-text > ol { max-width: none; } /* Whole-image block: never cropped, never blown past its natural size. */ .pf-full img { display: block; /* Never upscale past the file's natural size — that was the blur. */ width: auto; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius); image-rendering: auto; } /* Edge-to-edge parallax banner. */ .pf-parallax { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; height: clamp(18rem, 56vh, 40rem); overflow: hidden; background: var(--ink); } .pf-parallax__img { position: absolute; left: 0; right: 0; top: -30%; width: 100%; height: 160%; object-fit: cover; transform: translateY(var(--parallax-shift, 0px)); will-change: transform; } /* Row of images, evenly sized, tops aligned. */ .pf-row { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); align-items: start; } .pf-row img { width: 100%; height: auto; display: block; border-radius: var(--radius); } .pf-cols-2 { grid-template-columns: repeat(2, 1fr); } .pf-cols-3 { grid-template-columns: repeat(3, 1fr); } .pf-cols-4 { grid-template-columns: repeat(4, 1fr); } /* Two-column split: big image one side, copy the other. */ .pf-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; } .pf-split--reverse .pf-split__media { order: 2; } .pf-split__media img { width: 100%; height: auto; display: block; border-radius: var(--radius); } .pf-split__body { padding-block: 0; max-width: none; } .pf-split__body > *:first-child { margin-top: 0; } .pf-split__body > p, .pf-split__body > ul, .pf-split__body > ol { max-width: none; } /* Smaller images beneath the split copy. Multi-column (not grid) so a tall image occupies one column while shorter ones stack beside it — matching the reference layout. */ .pf-subgrid { margin-top: clamp(1.25rem, 2.5vw, 2rem); column-gap: clamp(0.6rem, 1.2vw, 1rem); } .pf-subgrid img { width: 100%; height: auto; display: block; border-radius: var(--radius); margin-bottom: clamp(0.6rem, 1.2vw, 1rem); break-inside: avoid; -webkit-column-break-inside: avoid; } .pf-subcols-1 { column-count: 1; } .pf-subcols-2 { column-count: 2; } .pf-subcols-3 { column-count: 3; } /* Pull quote. */ .pf-quote blockquote { border-left: 4px solid var(--blue); padding-left: 1.5rem; margin: 0; font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.5; font-style: italic; color: var(--white); max-width: 52rem; } .pf-quote cite { display: block; margin-top: 0.75rem; padding-left: 1.5rem; color: var(--mist); font-style: normal; font-weight: 600; } @media (max-width: 1023px) { .pf-split { grid-template-columns: 1fr; } .pf-split--reverse .pf-split__media { order: 0; } .pf-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .pf-cols-3, .pf-cols-2 { grid-template-columns: 1fr; } .pf-subcols-2, .pf-subcols-3 { column-count: 2; } } /* ========================================================================= PORTFOLIO BLOCK TYPOGRAPHY & EXTRAS ========================================================================= */ /* Body copy and headings inside portfolio blocks. */ .pf-text, .pf-split__body { font-size: 20px; line-height: 1.65; } .pf-text p, .pf-text li, .pf-split__body p, .pf-split__body li { font-size: 20px; line-height: 1.65; } .pf-text h2, .pf-split__body h2 { font-family: var(--font-display); font-weight: 700; font-size: 50px; line-height: 1.06; color: var(--white); } .pf-text h3, .pf-split__body h3 { font-size: 30px; line-height: 1.15; color: var(--white); } @media (max-width: 767px) { .pf-text h2, .pf-split__body h2 { font-size: clamp(2rem, 8vw, 50px); } .pf-text h3, .pf-split__body h3 { font-size: clamp(1.4rem, 5.5vw, 30px); } } /* Centred variant, for section intros. */ .pf-text--center { text-align: center; } .pf-text--center > p, .pf-text--center > h2, .pf-text--center > h3 { margin-inline: auto; max-width: 60rem; } /* Divider rule between Process sections. */ .pf-rule { border: 0; border-top: 3px solid rgba(255, 255, 255, 0.42); max-width: 100%; margin: clamp(2rem, 4vw, 3.5rem) auto 0; } /* Extra column counts + masonry option for image rows. */ .pf-cols-5 { grid-template-columns: repeat(5, 1fr); } .pf-cols-6 { grid-template-columns: repeat(6, 1fr); } .pf-cols-masonry { display: block; column-count: 6; column-gap: clamp(0.75rem, 1.5vw, 1.25rem); } @media (max-width: 1023px) { .pf-cols-5, .pf-cols-6 { grid-template-columns: repeat(3, 1fr); } .pf-cols-masonry { column-count: 3; } } @media (max-width: 480px) { .pf-cols-5, .pf-cols-6 { grid-template-columns: repeat(2, 1fr); } .pf-cols-masonry { column-count: 2; } } /* Side-to-side parallax variant. */ /* Side-to-side variant: the band is full-bleed and the image is much wider than the viewport so it can slide a long way without exposing an edge. */ /* Clickable images get an affordance. */ [data-lightbox] { cursor: zoom-in; transition: opacity 0.2s var(--ease); } [data-lightbox]:hover { opacity: 0.88; } /* ========================================================================= LIGHTBOX ========================================================================= */ .lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(10, 10, 10, 0.94); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), visibility 0.25s; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .lightbox__close { position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); width: 2.75rem; height: 2.75rem; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: var(--white); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.2s var(--ease); } .lightbox__close:hover, .lightbox__close:focus-visible { background: rgba(255, 255, 255, 0.3); } /* ========================================================================= RELATED PROJECTS ========================================================================= */ .related { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid rgba(255, 255, 255, 0.12); } .related > .wrap { max-width: none; } .related-card { width: clamp(16rem, 30vw, 30rem); } .related-carousel { position: relative; padding-inline: clamp(2.5rem, 5vw, 4rem); } .related-viewport { overflow: hidden; } .related-track { display: flex; gap: clamp(0.75rem, 1.5vw, 1.25rem); transition: transform 0.5s var(--ease); will-change: transform; } .related-card { flex: 0 0 auto; width: clamp(15rem, 26vw, 22rem); position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--blue-deep); display: flex; align-items: flex-end; border: 2px solid transparent; transition: border-color 0.2s var(--ease), transform 0.3s var(--ease); } .related-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: transform 0.5s var(--ease), opacity 0.3s var(--ease); } .related-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,0.75), transparent 65%); } .related-card span { position: relative; z-index: 1; padding: 1rem 1.15rem; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; color: var(--white); } .related-card:hover, .related-card:focus-visible { border-color: var(--white); transform: translateY(-4px); } .related-card:hover img, .related-card:focus-visible img { transform: scale(1.06); opacity: 0.72; } /* Equal-height (square-cropped) image rows. */ /* Divider above a two-column block. */ .pf-split-rule { border: 0; border-top: 3px solid rgba(255, 255, 255, 0.42); max-width: 100%; margin: clamp(2rem, 4vw, 3.5rem) auto 0; } /* Hero crop alignment (set per item in the CMS). */ .project-banner__img--top { object-position: center top; } .project-banner__img--center { object-position: center center; } .project-banner__img--bottom { object-position: center bottom; } /* ------------------------------------------------------------------------- Fixes: parallax sizing, sub-grid spacing, quote width, divider width ---------------------------------------------------------------------- */ /* Side-to-side banner: full-bleed from the outset, taller, and the whole image height visible rather than cropped or stretched. */ /* Side-to-side banner. The wrapper is genuinely full-bleed (100vw). The image is wider than the viewport so it can slide without ever exposing an edge, and its height is left to follow the natural aspect ratio so nothing is stretched. */ .pf-parallax--x { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; height: auto; min-height: 0; max-height: none; overflow: hidden; display: block; background: var(--ink); } .pf-parallax--x .pf-parallax__img { position: relative; left: auto; top: auto; display: block; width: 120vw; max-width: none; height: auto; margin-left: -10vw; object-fit: fill; transform: translateX(var(--parallax-x, 0px)); } /* Vertical banner: keep the aspect ratio honest. */ .pf-parallax__img { object-fit: cover; object-position: center; } /* Sub-grid: no stray indent on the first column. */ .pf-subgrid { padding: 0; } .pf-subgrid img:first-child { margin-top: 0; } /* Pull quote matches the width of every other block. */ .pf-quote blockquote { max-width: none; } /* Dividers span the full content width. */ /* Dividers must span exactly the same width as the content blocks, which override .wrap's narrower max-width. */ .pf-rule-wrap { max-width: 84rem; margin-inline: auto; } .pf-rule, .pf-split-rule { width: 100%; max-width: none; margin-inline: 0; } /* ========================================================================= PORTFOLIO TILE HOVER — blue wash + category tags ========================================================================= */ .portfolio-tile { flex-direction: column; } /* Light blue overlay that fades in on hover, above the image but below text. */ .portfolio-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; /* Dark scrim by default (keeps the title legible), washing to blue on hover. */ background: rgba(10, 10, 10, 0.35); transition: background 0.35s var(--ease); } .portfolio-tile:hover::before, .portfolio-tile:focus-visible::before { background: rgba(46, 103, 177, 0.78); } /* Inner keyline, matching the reference card. */ .portfolio-tile::after { content: ""; position: absolute; inset: 1.15rem; z-index: 2; border: 2px solid rgba(255, 255, 255, 0.85); background: none; opacity: 0; transition: opacity 0.35s var(--ease); } .portfolio-tile:hover::after, .portfolio-tile:focus-visible::after { opacity: 1; } /* Category tags sit under the title, revealed with the overlay. */ .portfolio-tile__tags { position: relative; z-index: 2; padding: 0 1.75rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(0.95rem, 1.35vw, 1.25rem); line-height: 1.35; color: var(--white); opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .portfolio-tile:hover .portfolio-tile__tags, .portfolio-tile:focus-visible .portfolio-tile__tags { opacity: 1; transform: none; } /* ========================================================================= IMAGE ROW TITLE ========================================================================= */ .pf-row-title { font-family: "Bebas Neue", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 36px; line-height: 52px; color: rgb(46, 103, 177); margin: 0 0 0.35em; } @media (max-width: 767px) { .pf-row-title { font-size: clamp(1.6rem, 7vw, 36px); line-height: 1.3; } } /* Image-row cells (wrap each image so it can carry its own title). */ .pf-row__cell { margin: 0; display: block; } .pf-row__cell img { width: 100%; height: auto; display: block; border-radius: var(--radius); } /* Masonry needs the cell, not the image, to avoid splitting across columns. */ .pf-cols-masonry .pf-row__cell { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem); } /* Equal-square crop applies to the image inside the cell. */ .pf-row--crop .pf-row__cell img { aspect-ratio: 1 / 1; object-fit: cover; } /* Per-image title sits directly above its image. */ .pf-row-title--item { font-size: clamp(1.25rem, 2vw, 28px); line-height: 1.25; margin: 0 0 0.4em; } /* ========================================================================= TABLET TIER (768–1023px) Between phone and desktop the hamburger nav is still active, so type is scaled up from the phone sizes without reaching the desktop values. ========================================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .hero__name { font-size: clamp(3.75rem, 11vw, 6.5rem); } .hero__role { font-size: clamp(2.65rem, 8vw, 4.5rem); margin-top: -12px; } .hero__headline { font-size: clamp(1.25rem, 3.2vw, 1.9rem); margin-top: -10px; } :root { --process-size: clamp(96px, 13vw, 132px); } .process-item span { font-size: clamp(1.15rem, 2.2vw, 1.5rem); } .trait-icon { width: clamp(96px, 11vw, 120px); height: clamp(96px, 11vw, 120px); } .trait-icon svg { width: clamp(65px, 7vw, 80px); height: clamp(65px, 7vw, 80px); } .about-body p, .about__bullets li { font-size: 19px; letter-spacing: 0.04em; } .services-list li, .services-tools-grid p { font-size: 18px; } .footer-info { font-size: 19px; } } /* ========================================================================= DESKTOP REFINEMENTS (≥768px) Typography and spacing tuned against the live design. Kept last in the file so it reliably overrides the fluid defaults above. ========================================================================= */ @media (min-width: 1024px) { :root { --process-size: clamp(140px, 15vw, 180px); } /* Header / nav */ .wrap.site-header__inner { padding-left: 10rem; padding-right: 10rem; } .primary-nav a { font-size: 24px; } /* Hero */ .hero__name { font-size: 140px; } .hero__role { font-size: 100px; margin-top: -30px; } .hero__headline { font-size: 52px; margin-top: -25px; } .process { margin-top: -20px; } .process-from { font-size: 14px; color: var(--white); } .process-item span { font-size: 28px; letter-spacing: 0; } /* Bio band */ .bio-band__inner { padding: clamp(2rem, 5vw, 0.5rem); } .bio-band .bio-text { font-size: 24px; font-weight: 500; } /* Traits */ .trait-icon { width: clamp(96px, 15.2vw, 150px); height: clamp(96px, 15.2vw, 150px); } .trait-icon svg { width: clamp(65px, 8.5vw, 106px); height: clamp(60px, 8.5vw, 106px); } .trait span { font-size: clamp(1.1rem, 1.45vw, 1.5rem); margin-bottom: -100px; } /* About */ .about-body p { font-size: 22px; letter-spacing: 0.05em; } .about__bullets li { font-size: 22px; letter-spacing: 0.05em; font-weight: 500; } /* Services & tools */ .category-tile span { font-size: 22px; letter-spacing: 0.05em; } .services-tools-grid p { font-size: 20px; font-weight: 500; } .services-list li { font-size: 20px; font-weight: 500; } .tools-group h3 { font-size: 22px; font-weight: 800; } /* Brands sits directly under Tools inside the shared gradient band. */ .section.section--brands { padding-top: 0; } /* Contact & footer */ .contact-socials { margin-bottom: -20px; } .footer-info { font-size: 22px; } .footer-info a { color: var(--white); } } /* ========================================================================= STICKY MOBILE CTA Primary mobile conversion (Let's Talk). Phones only — on larger screens the nav's Contact link is already visible. ========================================================================= */ .mobile-cta { display: none; } @media (max-width: 767px) { .mobile-cta { display: flex; align-items: center; justify-content: center; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 190; min-height: 52px; /* comfortably above the 44px minimum */ padding: 0.85rem 1.5rem; background: var(--blue); color: var(--white); font-family: var(--font-condensed); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; } .mobile-cta.is-visible { opacity: 1; visibility: visible; transform: none; } .mobile-cta:hover, .mobile-cta:focus-visible { background: var(--blue-deep); color: var(--white); } /* Keep the bar clear of the back-to-top button, and stop it covering the end of the page content. */ .to-top { bottom: calc(1rem + 52px + 0.75rem); } body { padding-bottom: calc(52px + 2rem); } } /* ========================================================================= MOBILE CORRECTIONS (<=1023px) Fixes for issues that only surface on phones and small tablets. ========================================================================= */ @media (max-width: 1023px) { /* --- Process steps ------------------------------------------------- Keep the ascending staircase (it's part of the design), but size it so all three steps and their labels fit the viewport without overflowing or wrapping. */ .process { align-items: flex-end; justify-content: center; flex-wrap: nowrap; gap: clamp(0.35rem, 2vw, 1rem); } .process-item:nth-child(4) { margin-bottom: calc(var(--process-size) * 0.40); } .process-item:nth-child(6) { margin-bottom: calc(var(--process-size) * 0.66); } .process-connector:nth-child(3) { margin-bottom: calc(var(--process-size) * 0.20); } .process-connector:nth-child(5) { margin-bottom: calc(var(--process-size) * 0.53); } .process-from { margin-bottom: calc(var(--process-size) * 0.30); } .process-item span { font-size: clamp(0.8rem, 3.2vw, 1.1rem); } .process-connector { font-size: clamp(0.75rem, 3vw, 1rem); } .process-from { font-size: clamp(0.6rem, 2.4vw, 0.8rem); } /* --- Bio band ------------------------------------------------------- The rotated inner panel is wider than the viewport; without matching inset padding the text ran off both edges. */ .bio-band { padding-inline: 0; } .bio-band__inner { width: 128%; margin-left: -14%; padding-block: clamp(2.5rem, 9vw, 4rem); padding-inline: 16%; } .bio-band .bio-text { font-size: clamp(1rem, 4.2vw, 1.35rem); line-height: 1.5; max-width: none; padding-inline: 0; } /* --- Trait icons: three per row ------------------------------------ */ .traits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 4vw, 2rem) clamp(0.5rem, 2vw, 1.5rem); justify-items: center; } .trait span { margin-bottom: 0; text-align: center; } /* --- Service tiles: 2 x 2 ------------------------------------------ */ .category-tiles { grid-template-columns: repeat(2, 1fr); } /* --- Creativity banner: show the whole artwork --------------------- */ .creativity-banner { min-height: 0; height: auto; display: block; } .creativity-banner img { position: static; width: 100%; height: auto; transform: none; } .creativity-banner::after { content: none; } .creativity-banner h2 { position: static; padding: 1rem var(--gutter); } /* --- Contact -------------------------------------------------------- The equal-height flex sizing is a desktop device for lining the last card up with the Send button. On a stacked mobile layout it squashed the cards and pushed them into the footer. */ .contact-grid { grid-template-columns: 1fr; align-items: start; } .contact-aside { display: block; min-height: 0; margin-top: 2.5rem; } .contact-cards { display: flex; flex-direction: column; gap: 1rem; flex: none; min-height: 0; } .contact-card { flex: none; min-height: 0; padding: 1.5rem 1rem; } .contact-heading { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; } .contact-grid > div > p { font-size: clamp(1rem, 4vw, 1.15rem); } .contact-card a, .contact-card span.value { font-size: clamp(0.9rem, 3.6vw, 1.02rem); overflow-wrap: anywhere; } } /* Phones: two service tiles still fit, but drop the process labels a little further so nothing clips on the narrowest handsets. */ @media (max-width: 480px) { /* Sized so the whole From/To/To row still fits a 320px handset. */ :root { --process-size: clamp(46px, 14vw, 70px); } .process { gap: clamp(0.2rem, 1.2vw, 0.6rem); } .process-item span { font-size: clamp(0.65rem, 2.8vw, 0.85rem); } .process-connector { font-size: clamp(0.65rem, 2.6vw, 0.85rem); } .process-from { font-size: clamp(0.55rem, 2.2vw, 0.7rem); } /* Trait icons must not exceed their grid column at 320px. */ .trait-icon { width: clamp(58px, 19vw, 78px); height: clamp(58px, 19vw, 78px); } .trait-icon svg { width: clamp(34px, 11vw, 48px); height: clamp(34px, 11vw, 48px); } .trait span { font-size: clamp(0.7rem, 2.9vw, 0.9rem); } .traits { gap: clamp(0.9rem, 4vw, 1.5rem) clamp(0.35rem, 1.5vw, 0.75rem); } } /* ========================================================================= PORTFOLIO BLOCKS ON MOBILE A coherent column ladder. Previously a 3-image row dropped straight from 3-up to 1-up while a 6-image row went to 2-up, so small rows rendered larger than dense ones on the same screen. ========================================================================= */ @media (max-width: 767px) { .pf-cols-3, .pf-cols-4, .pf-cols-5, .pf-cols-6 { grid-template-columns: repeat(2, 1fr); } .pf-cols-masonry { column-count: 2; } /* The project banner shouldn't fill a phone screen before any content. */ .project-banner { height: clamp(12rem, 42vh, 340px); } /* Titles above individual images shrink with their cell. */ .pf-row-title--item { font-size: clamp(1rem, 4.4vw, 1.4rem); } } @media (max-width: 480px) { /* Every row in the real content is 2-3 images, so collapsing to 1-up here would turn a 20-image case study into ~20 screens of scrolling. Hold 2-up and let the lightbox handle close inspection. */ .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5, .pf-cols-6 { grid-template-columns: repeat(2, 1fr); } .pf-cols-masonry { column-count: 2; } } /* ========================================================================= MOBILE: contact, traits, hero scale ========================================================================= */ @media (max-width: 767px) { /* A horizontal slide-in pushes text off a narrow screen (and leaves it clipped if the reveal never fires). Fade only on phones. */ .js-reveal [data-reveal][data-reveal-from="left"] { transform: translateY(20px); } /* "Connect online!" and its icons stay centred on mobile. */ .contact-aside h3 { text-align: center; } .contact-socials { justify-content: center; } .contact-heading { font-size: clamp(1.9rem, 8.5vw, 2.75rem); overflow-wrap: anywhere; } /* Larger trait icons on phones. */ .trait-icon { width: clamp(76px, 24vw, 104px); height: clamp(76px, 24vw, 104px); } .trait-icon svg { width: clamp(46px, 15vw, 66px); height: clamp(46px, 15vw, 66px); } .trait span { font-size: clamp(0.8rem, 3.4vw, 1.05rem); } /* Bigger hero across the board. */ .hero__name { font-size: clamp(2.9rem, 13vw, 4.75rem); } .hero__role { font-size: clamp(2rem, 9.5vw, 3.5rem); } .hero__headline { font-size: clamp(1.05rem, 4.6vw, 1.6rem); } :root { --process-size: clamp(62px, 19vw, 96px); } .process-item span { font-size: clamp(0.75rem, 3.2vw, 1rem); } .process-connector { font-size: clamp(0.75rem, 3vw, 1rem); } .process-from { font-size: clamp(0.62rem, 2.5vw, 0.8rem); } } @media (max-width: 480px) { /* Keep the enlarged hero inside the narrowest handsets. */ :root { --process-size: clamp(54px, 17vw, 74px); } .trait-icon { width: clamp(70px, 22vw, 86px); height: clamp(70px, 22vw, 86px); } .trait-icon svg { width: clamp(42px, 13.5vw, 54px); height: clamp(42px, 13.5vw, 54px); } }