/*** Evelyn Elizabeth Design Style Sheet Created by EJFIIIWebDesign.com ***/ /*** ******************************************************* STYLE RESET ******************************************************* ***/ /*** Eric Meyer v2.0 ***/ @import url("styleReset.css"); /*** Fonts are loaded in HTML_Header.php ( is faster than @import): Cormorant Garamond (display) + Montserrat (text) ***/ /*** ******************************************************* DESIGN TOKENS ******************************************************* ***/ :root { --ink: #000000; /* header, footer, black bands */ --paper: #FFFFFF; --stone: #F1EFEC; /* warm gray bands */ --text: #2C2B2A; /* body copy */ --muted: #6C6862; /* secondary copy, labels */ --rule: #D9D5CF; /* hairlines */ --teal: #0E5F66; /* single accent — from her studio */ --teal-dark: #0B4C52; --teal-light: #5FB3B6; /* accent on black */ --on-black: #CFCAC3; /* body copy on black */ --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif; --body: Montserrat, "Century Gothic", "Helvetica Neue", Arial, sans-serif; /* Boundaries grow on big screens: fixed up to ~1650px wide, then widen to fill the 1920 frame (1240 → 1440, wide 1440 → 1640) */ --boundary: clamp(1240px, 75vw, 1440px); --boundary-wide:clamp(1440px, 85vw, 1640px); --gutter: clamp(16px, 4vw, 56px); --band-pad: clamp(56px, 8vw, 104px); --col-gap: clamp(32px, 6vw, 116px); --hero-ratio: 1920 / 720; /* hero-wide 1920x720 · hero 1440x540 (8:3) */ --site-max: 1920px; /* wider screens: page framed in black (body) */ --hero-max-h: 75vh; /* safeguard for short / zoomed windows */ } /*** ******************************************************* SITE SHELL STYLES ******************************************************* ***/ html { font-size: 62.5%; -webkit-text-size-adjust: 100%; } body { font: 400 1.6rem/1.7 var(--body); color: var(--text); background-color: var(--ink); margin: 0; -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } #wrapper { width: 100%; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } main { background-color: var(--paper); flex: 1 0 auto; } .skipToContent { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--paper); color: var(--ink); padding: 10px 16px; } .skipToContent:focus { left: 16px; top: 16px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } a { color: inherit; text-decoration: none; } img, video { max-width: 100%; height: auto; border: 0; display: block; } :focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; } h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: 0.01em; color: var(--ink); text-transform: lowercase; text-wrap: balance; } h1 { font-size: clamp(4.2rem, 2rem + 3.51vw, 6.7rem); } h2 { font-size: clamp(3.5rem, 1.6rem + 2.79vw, 5.3rem); } h3 { font-size: clamp(2.6rem, 1rem + 1.79vw, 3.2rem); } p, li { font-size: 1.6rem; line-height: 1.7; color: var(--text); } p + p { margin-top: 1.8rem; } strong, b { font-weight: 600; } em { font-style: italic; } sup { vertical-align: super; font-size: smaller; } .clearfix::after { content: ""; clear: both; display: table; } /*** ****** LAYOUT PRIMITIVES ****** ***/ .content-boundary { width: 100%; max-width: var(--boundary); margin: 0 auto; padding-inline: var(--gutter); } .content-boundary.wide { max-width: var(--boundary-wide); } .band { padding-block: var(--band-pad); } .band.tight { padding-block: 36px; } .band.snug { padding-block: clamp(40px, 4vw, 64px); } /*** Pages without a banner: less air between the header and the first section ***/ main > .band:first-child { padding-top: clamp(40px, 4vw, 72px); } .band.white { background-color: var(--paper); } .band.stone { background-color: var(--stone); } .band.black { background-color: var(--ink); color: var(--paper); } .band.black p { color: var(--on-black); } .band.black h2, .band.black h3 { color: var(--paper); } /*** Two-column pairings — .left/.right set source order vs. display order ***/ .text-text, .text-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--col-gap); align-items: start; } .text-media { align-items: center; } .text-media.portrait { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); } .text-media.feature { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; } .text-media.balanced { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 96px); align-items: stretch; } .text-media.balanced .text-column { align-self: center; } .text-column { min-width: 0; } .text-column > * + * { margin-top: 2rem; } .text-column.copy { max-width: 62ch; } .media-column { min-width: 0; margin: 0; } .media-column img { width: 100%; } .media-column.square img { aspect-ratio: 1 / 1; object-fit: cover; } .media-column.landscape img { aspect-ratio: 4 / 3; object-fit: cover; } .left { order: 1; } .right { order: 2; } .text-columns { display: grid; gap: clamp(24px, 4vw, 56px); } .text-columns.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; } .section-head p { max-width: 44ch; color: var(--muted); font-size: 1.5rem; } .band.black .section-head p { color: #BDB8B1; } /*** ****** TYPE DEVICES ****** ***/ .eyebrow { display: block; font-size: 1.15rem; line-height: 1.5; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--teal); } .band.black .eyebrow { color: var(--teal-light); } .pull { font-family: var(--display); font-size: clamp(2.6rem, 1.1rem + 1.97vw, 3.7rem); line-height: 1.25; color: var(--ink); border-top: 1px solid var(--ink); padding-top: 22px; } .pull em { color: var(--teal); } .lede { font-family: var(--display); font-style: italic; font-size: clamp(2rem, 0.8rem + 1.36vw, 2.5rem); line-height: 1.35; color: var(--ink); } /*** ****** BUTTONS ****** ***/ .buttons { display: flex; gap: 12px; flex-wrap: wrap; } .buttons.center { justify-content: center; margin-top: 36px; } .button { display: inline-block; font-family: var(--body); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.2; padding: 15px 26px; border: 1px solid var(--teal); background-color: var(--teal); color: var(--paper); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; } .button:hover { background-color: var(--teal-dark); border-color: var(--teal-dark); } .button.outline-dark { background-color: transparent; border-color: var(--ink); color: var(--ink); } .button.outline-dark:hover { background-color: var(--ink); color: var(--paper); } .button.outline-light { background-color: transparent; border-color: #77726B; color: var(--paper); } .button.outline-light:hover { border-color: var(--paper); } /*** ****** FADE IN PAGE ON LOAD ****** ***/ body { animation: fadeInAnimation ease 1.2s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } /*** ******************************************************* HEADER STYLES ******************************************************* ***/ /*** Wide screens: header and page stop at --site-max (the hero's native width) and sit centered on the black body. Footer stays full width (already black, content capped). ***/ header.site-header, main#content { width: 100%; max-width: var(--site-max); margin-inline: auto; } /* width: body is a flex column, auto margins would otherwise shrink main to its content */ header.site-header { position: relative; z-index: 1002; width: 100%; background-color: var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 18px var(--gutter) 22px; } header a.logo { display: block; } header a.logo img { width: clamp(170px, 22vw, 280px); height: auto; margin: 0 auto; } .header-left { justify-self: start; } .header-right { justify-self: end; } .contact-list { list-style: none; margin: 0; padding: 0; } .contact-list li.eContact { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 1.3rem; letter-spacing: 0.06em; color: #E6E3DE; } .contact-list li.eContact a { display: inline-flex; align-items: center; gap: 6px; color: #E6E3DE; transition: opacity .3s ease; } .contact-list li.eContact a:hover { opacity: .7; } .contact-list .sep { color: var(--muted); } svg.icon { width: 15px; height: 15px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.5; } /*** ****** MENU STYLE ****** ***/ .hamburger-menu { position: relative; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: block; } .hamburger-icon, .hamburger-icon::before, .hamburger-icon::after { width: 30px; height: 2px; background: var(--paper); position: absolute; transition: all 0.3s ease-in-out; left: 0; z-index: 1003; } .hamburger-icon { top: 14px; } .hamburger-icon::before { content: ''; top: -9px; } .hamburger-icon::after { content: ''; top: 9px; } .hamburger-menu.open .hamburger-icon { background: transparent; } .hamburger-menu.open .hamburger-icon::before { transform: rotate(45deg) translate(6px, 6px); } .hamburger-menu.open .hamburger-icon::after { transform: rotate(-45deg) translate(6px, -6px); } .hamburger-links { position: absolute; top: 100%; left: 0; width: min(460px, 88vw); height: 100vh; background: var(--ink); transition: transform 0.3s ease-in-out; z-index: 1001; padding: 4rem var(--gutter) 40px; overflow-y: auto; color: var(--paper); visibility: hidden; transform: translateX(-100%); } .hamburger-links.open { visibility: visible; transform: translateX(0); } .menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.4s ease; z-index: 999; } .menu-overlay.open { opacity: 1; visibility: visible; } .hamburger-links ul { list-style: none; padding: 0; margin: 0; } .hamburger-links .menu-intro { margin-bottom: 5rem; } .hamburger-links .menu-intro li { font-family: var(--display); font-style: italic; font-size: 2.1rem; line-height: 1.4; color: #D8D4CE; max-width: 30ch; opacity: 0; transform: translateX(-2rem); transition: all 0.5s ease; } .hamburger-links .site-links { margin-bottom: 5rem; } .hamburger-links .site-links li { margin: 1.4rem 0; opacity: 0; transform: translateX(-2rem); transition: all 0.4s ease; } .hamburger-links .site-links li a { font-family: var(--display); font-size: 3.2rem; line-height: 1.2; color: var(--paper); text-transform: lowercase; display: inline-block; transition: letter-spacing 0.3s ease, color .3s ease; } .hamburger-links .site-links li a:hover { letter-spacing: 0.08em; color: var(--teal-light); } .hamburger-links.open .menu-intro li { opacity: 1; transform: translateX(0); transition-delay: 0.1s; } .hamburger-links.open .site-links li:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.2s; } .hamburger-links.open .site-links li:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.3s; } .hamburger-links.open .site-links li:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.4s; } .hamburger-links.open .site-links li:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.5s; } .hamburger-links.open .site-links li:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.6s; } .Web2Icons { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; } .hamburger-links .Web2Icons { opacity: 0; transition: opacity 0.5s ease 0.7s; } .hamburger-links.open .Web2Icons { opacity: 1; } .Web2Icons li { width: 25px; margin: 0; } .Web2Icons li img { width: 100%; height: auto; transition: transform .6s ease-in-out; } .Web2Icons li img:hover { transform: rotate(-360deg); } /*** ******************************************************* HOME BANNER (NIVO SLIDER) ******************************************************* ***/ #banner-container { position: relative; background-color: var(--ink); overflow: hidden; } /*** Short windows (zoomed browsers, laptops): banner height capped at 75vh, cropped to fill. Wide screens: see --site-max (the whole page stops at 1920px). ***/ .nivoSlider { position: relative; background: url(JavaScripts/Nivo-Slider/images/loading.gif) no-repeat 50% 50%; } .nivoSlider img { position: absolute; top: 0; left: 0; display: none; } .nivoSlider a { border: 0; display: block; } /*** aspect-ratio reserves the real footprint before any JS runs (no snap). nivo-slider.css sets max-width:none on slides; restore fluid, cropped-to-fill sizing. ***/ .home #slider { aspect-ratio: var(--hero-ratio); max-height: var(--hero-max-h); overflow: hidden; } .home .nivoSlider img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; } /*** When 75vh shortens the slider, Nivo's fade slices (inline height:auto) must crop exactly like the main image or the picture jumps mid-transition. ***/ .home .nivo-slice { height: 100% !important; } .home .nivo-slice img { height: 100% !important; object-fit: cover; } /*** Gradient keeps the white caption legible on bright rooms ***/ .home #keyImage { position: relative; } .home #keyImage::after { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 80%), linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%); } .banner-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; padding-bottom: clamp(28px, 4.5vw, 64px); } .banner-caption .content-boundary > * + * { margin-top: 1.6rem; } .banner-caption .eyebrow { color: #E6E2DC; } .banner-caption h1 { color: var(--paper); font-size: clamp(4.2rem, min(2.7rem + 4.34vw, 2.7rem + 7vh), 9rem); max-width: 14ch; } /* vh keeps it inside a 75vh-capped banner; rem part follows the reader's text size */ .banner-caption p { color: #E6E2DC; max-width: 48ch; } /*** Slide dots (controlNav) ***/ .home .nivo-controlNav { position: absolute; right: var(--gutter); bottom: clamp(28px, 4.5vw, 64px); z-index: 21; display: flex; gap: 10px; padding: 0; } .home .nivo-controlNav a { display: block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--paper); text-indent: -9999px; overflow: hidden; cursor: pointer; } .home .nivo-controlNav a.active { background-color: var(--paper); } .home .nivo-directionNav { display: none; } /*** ******************************************************* HOME PAGE ******************************************************* ***/ .welcome h2 { margin-bottom: 2.2rem; } /*** Service cards (also used on Services.php) ***/ .service-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); } .service-card { background-color: var(--ink); color: var(--paper); transition: transform .25s; } .service-card:hover { transform: translateY(-4px); } .service-card a { display: grid; grid-template-rows: auto 1fr; height: 100%; } .service-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .service-card .card-body { padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; } .service-card .eyebrow { color: var(--teal-light); } .service-card h3 { color: var(--paper); font-size: clamp(3rem, 1.3rem + 2.07vw, 4.2rem); } .service-card p { color: var(--on-black); font-size: 1.5rem; } .service-card .card-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid #2E2D2B; padding-top: 18px; margin-top: 6px; } .service-card .fee { font-family: var(--display); font-size: 2.4rem; } .service-card .go { font-size: 1.2rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-light); } .offerings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--rule); list-style: none; padding: 0; } .offerings li { padding-top: 22px; } .offerings b { display: block; font-size: 1.25rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); font-weight: 600; } .offerings span { display: block; font-size: 1.45rem; color: var(--muted); line-height: 1.55; margin-top: 4px; } /*** About teaser: overlapping image pair ***/ .image-pair { position: relative; padding-bottom: 18%; } .image-pair .first { width: 78%; aspect-ratio: 1 / 1; object-fit: cover; } .image-pair .second { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; object-fit: cover; border: 8px solid var(--stone); } /*** Testimonial ***/ .testimonial .content-boundary { display: grid; justify-items: center; text-align: center; gap: 18px; } .testimonial .mark { font-family: var(--display); font-size: 6.4rem; line-height: .5; color: var(--teal-light); } .testimonial blockquote { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(2.4rem, 1.1rem + 2.11vw, 3.7rem); line-height: 1.35; max-width: 34ch; color: #F2EEE8; } .testimonial cite { font-style: normal; font-size: 1.15rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8D877F; } /*** Newsletter band ***/ .newsletter { background-color: var(--teal); color: var(--paper); padding-block: clamp(36px, 5vw, 56px); } .newsletter .content-boundary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; } .newsletter h2 { color: var(--paper); font-size: clamp(3rem, 1.3rem + 2.21vw, 4.2rem); } .newsletter p { color: #CFE6E6; font-size: 1.45rem; margin-top: 6px; } /*** Mailchimp sign-up form ***/ .newsletter-row { display: flex; } .newsletter-row input { flex: 1 1 auto; min-width: 0; font: 400 1.55rem/1.4 var(--body); color: var(--ink); background: var(--paper); border: 1px solid var(--paper); border-radius: 0; padding: 14px 16px; } .newsletter-row input:focus { outline: 2px solid var(--ink); outline-offset: -2px; } .newsletter-row .button { flex: 0 0 auto; background-color: var(--ink); border-color: var(--ink); } .newsletter-row .button:hover { background-color: #2C2B2A; border-color: #2C2B2A; } .newsletter-row .button:disabled { opacity: .6; cursor: default; } .newsletter .newsletter-message { min-height: 1.4em; margin-top: 10px; color: var(--paper); font-size: 1.45rem; } .newsletter .newsletter-message.success { font-family: var(--display); font-style: italic; font-size: 2.2rem; margin-top: 0; } .newsletter .newsletter-message.error { color: #FFE3DC; } /*** Closing call to action (all pages) ***/ .call-to-action { text-align: center; } .call-to-action .content-boundary { display: grid; justify-items: center; gap: 20px; } .call-to-action h2 { font-size: clamp(3.8rem, 1.8rem + 3.5vw, 6rem); } .call-to-action p { max-width: 52ch; text-wrap: balance; } /*** ******************************************************* PROJECT TILES (Home / About / Portfolio) ******************************************************* ***/ .project-strip, .polaroids { list-style: none; margin: 0; padding: 0; } .project-tile a { display: block; color: inherit; } .project-tile .tile-image { display: block; overflow: hidden; aspect-ratio: 1 / 1; background-color: #DDD8D1; } .project-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .project-tile a:hover img { transform: scale(1.04); } .projectName { display: block; font-family: var(--display); font-weight: 500; line-height: 1.1; text-transform: lowercase; } .projectType { display: block; font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; } /*** Captions over the image — home "recent work", about strip ***/ .project-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .project-strip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .project-strip .project-tile a { position: relative; } .project-strip .projectName, .project-strip .projectType { position: absolute; left: 20px; right: 20px; color: var(--paper); z-index: 2; } .project-strip .projectName { bottom: 38px; font-size: 2.3rem; } .project-strip .projectType { bottom: 18px; font-size: 1.05rem; color: #CFE6E6; } .project-strip .project-tile a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75)); z-index: 1; } /*** Titles under the image — Portfolio grid. Flex + centered wrap: a lone 19th project (or a pair at 20) centers in its row. ***/ .polaroids { --cols: 3; --gap: clamp(16px, 1.8vw, 24px); display: flex; flex-wrap: wrap; justify-content: center; gap: 40px var(--gap); } .polaroids .project-tile { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; text-align: center; } .polaroids .projectName { font-size: 2.5rem; color: var(--ink); margin-top: 14px; } .polaroids .projectType { color: var(--muted); margin-top: 6px; } .polaroids .project-tile a:hover .projectName { color: var(--teal); } /*** ******************************************************* ABOUT PAGE ******************************************************* ***/ .portrait-caption { margin-top: 12px; font-size: 1.15rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .about-intro .intro { font-size: 1.7rem; color: var(--ink); } .pillar { border-top: 1px solid var(--ink); padding-top: 22px; } .pillar p { font-size: 1.55rem; } .pillar .eyebrow + p { margin-top: 1.4rem; } .media-column.fill { position: relative; min-height: 420px; } .media-column.fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /*** ******************************************************* SERVICE PAGES (Signature / It List) ******************************************************* ***/ .service-intro h1 { margin-top: -4px; } /*** Process steps — numbered because the order is real ***/ .process-steps { --thumb: 150px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; counter-reset: step; position: relative; } .process-steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .process-steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); --thumb: 0px; } .process-steps::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--thumb) + 34px); height: 1px; background: var(--rule); } .process-steps.three::before{ top: 20px; } .process-steps li { counter-increment: step; display: grid; gap: 12px; align-content: start; position: relative; } .process-steps img { width: 100%; height: var(--thumb); object-fit: cover; } .process-steps .num { font-family: var(--display); font-size: 3.5rem; line-height: 1; color: var(--teal); background: var(--paper); padding-right: 10px; justify-self: start; position: relative; } .band.stone .process-steps .num { background: var(--stone); } .process-steps .num::before { content: counter(step, decimal-leading-zero); } .process-steps h3 { font-family: var(--body); font-size: 1.25rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink); line-height: 1.4; } .process-steps p { font-size: 1.45rem; color: var(--muted); line-height: 1.6; } /*** "Perfect for" feature ***/ .feature-image { position: relative; min-height: 460px; margin: 0; } .feature-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .feature-body { display: flex; flex-direction: column; justify-content: center; gap: 28px; } .checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; } .checklist.single { grid-template-columns: minmax(0, 1fr); } .checklist li { padding: 14px 0 14px 34px; border-top: 1px solid var(--rule); position: relative; font-size: 1.5rem; } .checklist li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); } .fit-list { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 22px; font-size: 1.45rem; background: var(--paper); padding: 20px 24px; margin: 0; } .fit-list dt { font-size: 1.1rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .fit-list dd { margin: 0; color: var(--ink); } /*** A section-head line set as a display lede (lowercase on purpose, e.g. It List "how it works") ***/ .section-head p.lede { font-size: clamp(2rem, 0.8rem + 1.36vw, 2.5rem); color: var(--ink); max-width: 46ch; } /*** "In action" squares ***/ .square-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .square-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .proof-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; border-top: 1px solid #2E2D2B; padding-top: 24px; } .proof-foot blockquote { margin: 0; font-family: var(--display); font-style: italic; font-size: 2.2rem; line-height: 1.4; color: #E9E5DF; max-width: 56ch; } .proof-foot cite { display: block; font-family: var(--body); font-style: normal; font-size: 1.1rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8D877F; margin-top: 8px; } /*** Signature vs. It List comparison ***/ .table-scroll { overflow-x: auto; } table.compare { width: 100%; min-width: 620px; border-collapse: collapse; } .compare th, .compare td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 1.5rem; line-height: 1.55; color: var(--text); } .compare thead th { font-family: var(--display); font-weight: 500; font-size: 2.7rem; color: var(--ink); border-bottom: 2px solid var(--ink); padding-top: 0; text-transform: lowercase; } .compare thead th small { display: block; font-family: var(--body); font-size: 1.1rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .compare tbody th { font-size: 1.1rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; width: 22%; } .compare td.this { background: var(--paper); box-shadow: inset 3px 0 0 var(--teal); } .compare thead th.this { color: var(--teal); } .compare tfoot td { border: 0; padding-top: 24px; } /*** FAQ — accordion panels stay in the HTML for search ***/ .faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--col-gap); align-items: start; } .faq-side { display: grid; gap: 20px; position: sticky; top: 24px; } .faq-side p { color: var(--muted); font-size: 1.5rem; } .faq-side img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 8px; } .accordion details { border-top: 1px solid var(--rule); } .accordion details:last-child { border-bottom: 1px solid var(--rule); } .accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font-size: 1.7rem; color: var(--ink); font-weight: 500; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary::after { content: "+"; font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--teal); transition: transform .25s; } .accordion details[open] summary::after { transform: rotate(45deg); } .accordion .answer { padding: 0 0 24px; max-width: 62ch; } .accordion .answer p, .accordion .answer li { font-size: 1.5rem; } .accordion .answer ul { margin: 1rem 0 0; padding-left: 1.2em; list-style: disc; } /*** ******************************************************* PROJECT DETAIL PAGE ******************************************************* ***/ body.project #banner-container picture { display: block; width: 100%; aspect-ratio: var(--hero-ratio); max-height: var(--hero-max-h); } /* explicit width: stops max-height shrinking it sideways */ body.project #banner-container img { width: 100%; height: 100%; object-fit: cover; } /*** Title + pull quote on the left (the wider column), first paragraph on the right, top-aligned with the h1. Long titles wrap onto two lines (text-wrap: balance). The story section below uses the same columns so the right edges line up. ***/ .project-detail > .band:first-child { padding-block: clamp(56px, 6vw, 96px) clamp(48px, 5vw, 80px); } .project-intro, .project-story { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .project-intro { align-items: start; } .project-intro .copy { padding-top: 3.6rem; } /* ≈ eyebrow line + gap: starts level with the h1 */ #project-meta { display: flex; flex-direction: column; gap: 14px; } #project-meta > * { margin: 0; } #project-meta h2 { font-family: var(--body); font-size: 1.15rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--teal); order: -1; } .project-intro .pull { margin-top: 3.2rem; } /*** Masonry gallery (CSS multi-column) — images at full width, natural height ***/ #gallery { column-count: 3; column-gap: 16px; } #gallery:has(.gallery-item:nth-child(1)):not(:has(.gallery-item:nth-child(6))) { column-count: 2; } .gallery-item { display: inline-block; width: 100%; margin-bottom: 16px; break-inside: avoid; page-break-inside: avoid; overflow: hidden; } .gallery-item img { width: 100%; height: auto; transition: transform .6s ease; backface-visibility: hidden; transform: translateZ(0); } .gallery-item a:hover img { transform: scale(1.03); } .project-story .text-column { display: flex; flex-direction: column; } .project-story .text-column > * + * { margin-top: 1.8rem; } /*** Credits — flush to the bottom of the right column, smaller type ***/ dl.meta-data { margin-top: auto !important; padding-top: 22px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 18px; font-size: 1.3rem; color: var(--muted); } /* baseline: small caps label sits on the same line as its value */ dl.meta-data dt { font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; } dl.meta-data dd { margin: 0; color: var(--text); } dl.meta-data a { color: var(--teal); border-bottom: 1px solid currentColor; } /*** Previous / Back / Next ***/ .project-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .project-nav a.pn { display: flex; align-items: center; gap: 16px; color: var(--ink); } .project-nav a.pn.next { justify-content: flex-end; text-align: right; } .project-nav a.pn img { width: 84px; height: 84px; object-fit: cover; } .project-nav small { display: block; font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .project-nav b { font-family: var(--display); font-weight: 500; font-size: 2.2rem; text-transform: lowercase; } .project-nav a.pn:hover b { color: var(--teal); } /*** ******************************************************* GALLERY - LIGHTBOX STYLES ******************************************************* ***/ /*** FancyBox 1.3.4 predates border-box sizing: it adds padding and borders outside the width when it centers the box. Restore content-box inside the lightbox, or the box opens off-center and drifts ~20px down/right once the image loads. ***/ #fancybox-tmp, #fancybox-tmp *, #fancybox-wrap, #fancybox-wrap *, #fancybox-overlay, #fancybox-loading, #fancybox-loading * { box-sizing: content-box; } #fancybox-img { max-width: none; display: block; } #fancybox-content { border-color: #FFF !important; } #fancybox-outer { background: #FFF !important; } #fancybox-left, #fancybox-right { height: 100%; } #fancybox-title.fancybox-title-inside { padding: 14px 4px 4px; background: #FFF; } /*** Phones: caption overlays the bottom of the image (see Scripts.js) ***/ #fancybox-title.fancybox-title-over { background: rgba(0, 0, 0, .65); padding: 10px 12px; box-sizing: border-box; } #fancybox-title.fancybox-title-over .fancybox-description { color: #FFF; font-size: 1.3rem; line-height: 1.45; } .fancybox-description { font-family: var(--body); font-size: 1.4rem; line-height: 1.55; color: var(--text); text-align: left; max-width: 70ch; } /*** ******************************************************* CONTACT STYLE ******************************************************* ***/ .connect-form { padding-block: clamp(40px, 4vw, 64px); } .direct-contact { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 10px; } .direct-contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.6rem; } .direct-contact a:hover { color: var(--teal); } .direct-contact svg.icon { width: 17px; height: 17px; stroke: var(--teal); } .verify-notice { max-width: 880px; margin: 0 auto 24px; padding: 16px 20px; background: #FCEDEB; border-left: 3px solid #B3261E; color: #5E1510; font-size: 1.45rem; } .form-container { max-width: 880px; margin: 0 auto; padding: clamp(24px, 4vw, 52px); background-color: var(--paper); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; } .short-element, .full-element { display: grid; gap: 8px; min-width: 0; } .full-element { grid-column: 1 / -1; } .form-container label { font-size: 1.15rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); font-weight: 500; } .mandatory { color: #B3261E; } .form-container input, .form-container select, .form-container textarea { font: 400 1.55rem/1.4 var(--body); color: var(--ink); background: var(--paper); border: 1px solid #BDB7AE; border-radius: 0; padding: 13px 14px; width: 100%; } .form-container select { appearance: none; -webkit-appearance: none; padding-right: 38px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; } .form-container textarea { min-height: 190px; resize: vertical; } .form-container input:focus, .form-container select:focus, .form-container textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); } .form-container ::placeholder { color: #A39E97; opacity: 1; } .form-container small { font-size: 1.2rem; color: var(--muted); } .control-element { display: flex; justify-content: center; margin-top: 30px; } /*** Honeypot — hidden from people, visible to bots ***/ .C { display: none !important; } /* out of sight, out of tab order and skipped by screen readers */ /*** ******************************************************* FOOTER STYLE ******************************************************* ***/ footer.site-footer { background-color: var(--ink); color: #BDB8B1; font-size: 1.4rem; } .footer-columns { max-width: var(--boundary); margin: 0 auto; padding: 56px var(--gutter) 36px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; border-top: 1px solid #222; } .footer-brand img { width: 180px; margin-bottom: 14px; } .footer-brand p { color: #BDB8B1; font-size: 1.4rem; line-height: 1.6; } footer.site-footer h2 { font-family: var(--body); font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); font-weight: 500; margin-bottom: 14px; } footer.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } footer.site-footer li { color: #BDB8B1; font-size: 1.4rem; line-height: 1.5; } footer.site-footer a:hover { color: var(--paper); } .contact-lines a { display: inline-flex; align-items: center; gap: 8px; color: #E6E3DE; } .footer-contact .Web2Icons { display: flex; gap: 14px; margin-top: 18px; } .footer-contact .Web2Icons li { width: 22px; } /*** ***** COPYRIGHT STRIP ****** ***/ .copyright { max-width: var(--boundary); margin: 0 auto; padding: 0 var(--gutter); } .copyright-text { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0 36px; border-top: 1px solid #222; font-size: 1.25rem; color: #BDB8B1; } .author a { color: #BDB8B1; } /*** ******************************************************* PRINT STYLES ******************************************************* ***/ @media print { @page { margin: 1.2cm; } body { background: #FFF; animation: none; } .hamburger-menu, .hamburger-links, .menu-overlay, .header-right, .call-to-action, .newsletter, .project-nav, .Web2Icons, .nonPrint { display: none !important; } header.site-header { background: #FFF; display: block; text-align: center; } header a.logo img { filter: invert(1); width: 140px; } .band.black { background: #FFF; color: #000; } [data-aos] { opacity: 1 !important; transform: none !important; } } /*** ******************************************************* RESPONSIVE BREAKPOINTS (1380 / 980 / 580) ******************************************************* ***/ @media (max-width: 1380px) { .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } .process-steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process-steps::before { display: none; } } @media (max-width: 980px) { .text-text, .text-media, .text-media.portrait, .text-media.feature, .text-media.balanced, .faq, .newsletter .content-boundary { grid-template-columns: minmax(0, 1fr); } .text-media .media-column { order: 1; } .text-media .text-column { order: 2; } .text-media.portrait .media-column { max-width: 460px; } .text-columns.three { grid-template-columns: minmax(0, 1fr); } .service-cards { grid-template-columns: minmax(0, 1fr); } .project-strip, .project-strip.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .polaroids { --cols: 2; } .process-steps, .process-steps.three{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-image, .media-column.fill { min-height: 320px; } .faq-side { position: static; } .faq-side img { display: none; } .project-intro .copy { padding-top: 0; } .square-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .square-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .footer-columns { grid-template-columns: 1fr 1fr; } .header-right { display: none; } .project-nav { grid-template-columns: 1fr 1fr; } .project-nav .back { grid-column: 1 / -1; grid-row: 2; justify-self: center; } } /*** Tablets: an 8:3 banner is too shallow for the caption (it ran up into the header), so the home slider goes 16:9 here (3:2 on small tablets); the image crops a little at the sides ***/ @media (min-width: 581px) and (max-width: 1280px) { .home #slider { aspect-ratio: 16 / 9; } } @media (min-width: 581px) and (max-width: 800px) { .home #slider { aspect-ratio: 3 / 2; } } /*** Short windows (zoomed browsers): the banner is height-capped, so drop the caption's paragraph ***/ @media (max-height: 680px) and (min-width: 581px) { .banner-caption p { display: none; } } @media (max-width: 580px) { /*** Mobile banner uses the square _tile image ***/ :root { --hero-ratio: 1 / 1; } .banner-caption h1 { font-size: 4rem; } .banner-caption p { display: none; } .project-strip, .project-strip.four, .offerings, .checklist, .form-grid, .process-steps, .process-steps.three { grid-template-columns: minmax(0, 1fr); } .polaroids { --cols: 1; } #gallery { column-count: 2 !important; column-gap: 10px; } .gallery-item { margin-bottom: 10px; } .fit-list, dl.meta-data { grid-template-columns: minmax(0, 1fr); } .project-nav a.pn img { width: 56px; height: 56px; } .copyright-text { justify-content: center; text-align: center; } /*** Footer: logo and contact centered across the full width; Explore left, Services right ***/ .footer-columns { grid-template-columns: auto auto; justify-content: space-evenly; gap: 40px 24px; } .footer-brand, .footer-contact { grid-column: 1 / -1; } .footer-brand, .footer-contact, .footer-links { text-align: center; } .footer-brand img { display: block; margin: 0 auto 14px; } .footer-contact .contact-lines { justify-items: center; } .footer-contact .Web2Icons { justify-content: center; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }