/* ============================================================ TURII — brand override layer Loaded AFTER foundation.css + custom.css. Keeps the original layout & animation; swaps in Turii's fonts (Lora / Jost) and warm palette. ============================================================ */ :root { /* Fonts */ --main-font: 'Jost', sans-serif; --title-font: 'Lora', serif; --write-font: 'Nothing You Could Do', cursive; /* Warm palette derived from the Turii brand tokens. The design is dark & dramatic, so "black" becomes a deep espresso brown and "white" becomes a warm cream. */ --black: #241C15; --black-rgb: 36 28 21; --white: #F5EFE6; --white-rgb: 245 239 230; --grey: #C2A063; --grey-rgb: 194 160 99; /* gold accent */ /* Extra brand tokens */ --gold: #C2A063; --gold-rgb: 194 160 99; --gold2: #E0CFA8; --gold3: #A5834A; --brown: #4E382B; --brown-rgb: 78 56 43; --sand: #F8F5F0; } /* hamburger <-> close (X) icon swap when the mega-menu is open (#hamburger.tapped) */ #hamburger .close_ico { display: none; } #hamburger .menu_ico, #hamburger .close_ico { width: auto; height: 1.5rem; } #hamburger .close_ico, #hamburger .close_ico path { fill: var(--white) !important; } #hamburger.tapped .menu_ico { display: none; } #hamburger.tapped .close_ico { display: block; } /* SAFETY: the intro overlay (.page-transition.reverse) covers the screen and is wiped away by JS on load. If JS is delayed/blocked, guarantee it still reveals via a pure-CSS animation so the page can never stay blank/dark. */ .page-transition.reverse { animation: pt-safe-reveal 1s ease .1s forwards; } @keyframes pt-safe-reveal { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } } /* Outbound transitions still win (they set scaleY(1) !important). */ /* Base font smoothing. Fonts flow from the --main-font / --title-font variables above; foundation already routes body->main and headings->title, so we must NOT re-map generic p/span/a here (that would break the serif display headings that are built out of s). */ body { -webkit-font-smoothing: antialiased; letter-spacing: .01em; } /* Give the big display type a touch more weight at this size */ #s1_home h1 { font-weight: 500; letter-spacing: .01em; } /* "MILLWORK THAT" — title font, same big display size as "DEFINES SPACES" */ #s1_home .riga_1 { font-family: var(--title-font); font-weight: 500; letter-spacing: .01em; text-transform: uppercase; font-size: 1em; } #s1_home .riga_1 span { line-height: .8; } .h1, h2.h1 { font-weight: 500; } /* The brand name is always lowercase "turii" — never let a heading's text-transform:capitalize/uppercase rule turn it into "Turii"/"TURII". */ .brand_lc { text-transform: none; } /* Homepage heading casing — two tiers, by request: - The big .h1-classed display headings ("Made while you build", "PROJECTS") stay FULL CAPS — that's their natural default from foundation.css's base "h1, .h1 { text-transform: uppercase }" rule, nothing to override here. - Every other section heading (plain h2's with no .h1 class) uses "first letter of every word capital" instead of plain sentence case. Card-level labels (product names, project/audience titles) are intentionally left alone — they're shared content that also appears sentence-case on other pages, and changing them only here would reintroduce that cross-page mismatch. */ .home_page #sec_servizi .svc_head, .home_page #sec_audiences .svc_head, .home_page #sec_2 h2, .home_page #testimonials .tm_head h2, .home_page #cta_banner .cta_banner_in h2 { text-transform: capitalize; } .box_anim { font-weight: 500; letter-spacing: .01em; } .titolonemega { font-weight: 500; } /* ---------------- LOGO (mark + wordmark) + PLACEMENT ---------------- */ /* Vertically centre the logo and give it breathing room from the edge. */ .header .head_wrapper { align-items: center; } .head_left { display: flex; align-items: center; padding: 1.125em 0 1.125em 2.5%; } .head_logo { display: inline-flex; align-items: center; } .head_logo { line-height: 0; } .turii_logo_img { display: block; width: auto; height: clamp(2.3rem, 3.4vw, 3.2rem); } /* keep head content vertically centred to match the logo */ .head_inner { align-items: center; } /* ---------------- HEADER CTA (replaces EN/HI) ---------------- */ .head_cta { display: inline-flex; align-items: center; margin-right: 1.25rem; } .cta_quote { display: inline-flex; align-items: center; justify-content: center; font-family: var(--main-font); font-weight: 400; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--white); white-space: nowrap; padding: .7em 1.4em; border: 1px solid rgb(var(--gold-rgb) / 70%); border-radius: 2em; transition: background-color .35s ease, color .35s ease, border-color .35s ease; } .cta_quote:hover { background-color: var(--gold); border-color: var(--gold); color: var(--black); } /* ---------------- HAMBURGER = menu.svg icon ---------------- */ #hamburger .menu_ico { width: clamp(2.3rem, 3.1vw, 3rem); height: auto; display: block; transition: opacity .25s ease; } #hamburger .menu_ico path { fill: var(--white); } #hamburger:hover .menu_ico path { fill: var(--gold); } #hamburger.tapped .menu_ico { opacity: .7; } /* ---------------- MENU PANELS (Products / Who we work with) ---------------- */ .menu_group { display: none; width: 100%; } .menu_group.active { display: block; } /* both panels (products + audiences) share the SAME size and paragraph spacing */ #menu_anim .box_anim { font-size: clamp(1.6rem, 3.3vw, 3.5rem); padding: .05rem .5rem .6rem; line-height: 1; margin-bottom: .45em; white-space: nowrap; } #menu_anim .box_anim:last-child { margin-bottom: 0; } /* underline sits BELOW the text, not through it */ #menu_anim .box_anim::after { bottom: .3rem; height: 2px; } /* audiences: small gap between words */ #menu_anim .audiences .box_anim { word-spacing: .3em; } /* active tab (Products / Who we work with) marker in the left nav */ #main_nav .head_menu li a.nav_switch.current { color: var(--gold); } #main_nav .head_menu li a.nav_switch { cursor: pointer; } /* ---------------- GOLD ACCENTS ---------------- */ /* Link underlines & arrows -> gold */ .link::after, .box_anim::after, #main_nav .head_menu li a::after, .foot_block p a u::after { background-color: var(--gold); } .link svg path { fill: var(--gold); } /* Language switcher current -> gold */ .lang .wpml-ls-legacy-list-horizontal .wpml-ls-current-language a { color: var(--gold); opacity: 1; } /* Menu index numbers -> gold */ #main_nav .head_menu > li::before { color: var(--gold); opacity: .9; } /* Section-2 highlighted (revealed) copy -> warm cream, muted layer stays brownish */ .not_text_color_comp { opacity: .28; } span.text_color_comp, span.text_color_comp .split-child .split-child { color: var(--white); } /* Swiper dots active -> gold */ #nav_dots .swiper-pagination-bullet-active { background-color: var(--gold); } #nav_dots .swiper-pagination-bullet-active::before { border-color: var(--gold); } /* Back-to-top + border accents */ #back_top { border-color: rgb(var(--gold-rgb) / 70%); } #back_top svg polygon { fill: var(--gold); } /* Handwritten arrow annotations -> gold ink */ .wrp_freccetta p { color: var(--gold2); } .wrp_freccetta svg path { fill: var(--gold) !important; } /* Header gradient a touch warmer */ .header::before { background: linear-gradient(to bottom, rgb(var(--black-rgb) / 92%), transparent); transition: opacity .4s ease; } /* Frosted-glass header when it re-appears while scrolled */ .header.glass { background-color: rgb(var(--black-rgb) / 52%); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border-bottom: 1px solid rgb(var(--gold-rgb) / 15%); } .header.glass::before { opacity: 0; } /* Tighten the middle gap between the about-us columns: let the right column grow to fill, leaving only a defined gap. */ @media (min-width: 1024px) { #sec_2 .container { column-gap: clamp(2rem, 4vw, 4.5rem); } #sec_2 .container > .text.w50l { flex-grow: 1; } } /* ============================================================ TESTIMONIALS (after projects) ============================================================ */ #testimonials .tm_head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } #testimonials .eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-family: var(--main-font); font-weight: 400; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } #testimonials .eyebrow i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); } #testimonials .tm_head h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1; margin: 0; } /* video testimonials */ #testimonials .tm_videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 700px) { #testimonials .tm_videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } } /* A third testimonial was added: show all three on one line from 1024px up. Between 700 and 1023 they stay 2-up, since three 16:9 videos across a tablet would be too small to read. */ @media (min-width: 1024px) { #testimonials .tm_videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #testimonials .tm_video_card { position: relative; overflow: hidden; background: #000; border: 1px solid rgb(var(--gold-rgb) / 16%); opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.76,0,.24,1); } #testimonials .tm_videos.active .tm_video_card { opacity: 1; transform: none; } #testimonials .tm_videos.active .tm_video_card:nth-child(2) { transition-delay: .1s; } #testimonials .tm_videos.active .tm_video_card:nth-child(3) { transition-delay: .2s; } #testimonials .tm_video_card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } #testimonials .tm_grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } @media (min-width: 860px) { #testimonials .tm_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } } @media (min-width: 1260px) { #testimonials .tm_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #testimonials .tm_card { margin: 0; display: flex; flex-direction: column; background: #2b2118; border: 1px solid rgb(var(--gold-rgb) / 16%); padding: clamp(1.6rem, 2vw, 2.1rem); aspect-ratio: 1; } #testimonials .tm_stars { color: var(--gold); font-size: 1rem; letter-spacing: .25em; margin-bottom: 1rem; } #testimonials .tm_card blockquote { margin: 0; font-family: var(--title-font); font-style: italic; font-weight: 400; font-size: clamp(.85rem, 1.05vw, 1.05rem); line-height: 1.3; color: rgb(var(--white-rgb) / 92%); } /* figcaption follows the quote directly instead of being pinned to the card's bottom edge — the aspect-ratio square is often taller than the text needs, and pinning it to the bottom left a large awkward gap above it. */ #testimonials .tm_card figcaption { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .35rem; } #testimonials .tm_card figcaption strong { font-family: var(--main-font); font-weight: 500; font-size: .95rem; letter-spacing: .04em; color: var(--white); } #testimonials .tm_card figcaption span { font-family: var(--main-font); font-weight: 300; font-size: .85rem; letter-spacing: .04em; color: rgb(var(--white-rgb) / 55%); } #testimonials .tm_note { margin-top: clamp(2rem, 3vw, 2.5rem); font-family: var(--main-font); font-weight: 300; font-size: .82rem; letter-spacing: .03em; color: rgb(var(--white-rgb) / 45%); } /* stagger reveal */ #testimonials .tm_grid .tm_card { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.76,0,.24,1); } #testimonials .tm_grid.sec_trigger.active .tm_card { opacity: 1; transform: none; } #testimonials .tm_grid.active .tm_card:nth-child(2) { transition-delay: .1s; } #testimonials .tm_grid.active .tm_card:nth-child(3) { transition-delay: .2s; } /* ============================================================ FOOTER (redesigned) ============================================================ */ .site_foot { background: var(--black); } .site_foot > .container { padding-top: 80px; padding-bottom: 20px; } /* ---- curtain reveal: footer sits fixed behind, content scrolls up to reveal it ---- */ .site_foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; } /* smooth-scroll wrapper (transparent) must paint ABOVE the fixed footer, or GSAP's fixed wrapper lets the later-in-DOM footer show in front on desktop */ #smooth-wrapper { z-index: 1; } #page_home { position: relative; z-index: 2; background: var(--black); } /* JS sets #smooth-content padding-bottom = footer height so the scroll uncovers it */ .site_foot .foot_grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem 2rem; padding-bottom: clamp(2.5rem, 4vw, 4rem); } @media (min-width: 601px) { .site_foot .foot_grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .site_foot .foot_grid { grid-template-columns: 1.6fr 1fr 1.3fr 1.4fr; gap: 2rem; } } .site_foot .foot_brand .foot_logo { display: inline-block; line-height: 0; } .site_foot .foot_brand .foot_logo img { height: clamp(2.2rem, 3vw, 2.8rem); width: auto; display: block; } .site_foot .foot_brand p { margin: 1.5rem 0 0; max-width: 34ch; font-family: var(--main-font); font-weight: 300; font-size: 14px; line-height: 1.55; color: rgb(var(--white-rgb) / 50%); } /* social icons under the tagline */ .site_foot .foot_social { display: flex; gap: .7rem; margin-top: 1.8rem; } .site_foot .foot_social a { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(var(--gold-rgb) / 30%); color: rgb(var(--white-rgb) / 72%); transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; } .site_foot .foot_social a svg { width: 1.05rem; height: 1.05rem; fill: currentColor; } .site_foot .foot_social a:hover { background: var(--gold); border-color: var(--gold); color: var(--black); transform: translateY(-2px); } /* footer scroll-reveal (scripts.js toggles .active on .sec_trigger) */ .site_foot .foot_grid.sec_trigger > * { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.76,0,.24,1); } .site_foot .foot_grid.sec_trigger.active > * { opacity: 1; transform: none; } .site_foot .foot_grid.active > :nth-child(2) { transition-delay: .1s; } .site_foot .foot_grid.active > :nth-child(3) { transition-delay: .2s; } .site_foot .foot_grid.active > :nth-child(4) { transition-delay: .3s; } .site_foot .foot_bottom { opacity: 0; transform: translateY(20px); transition: opacity .9s ease .35s, transform .9s cubic-bezier(.76,0,.24,1) .35s; } .site_foot .foot_grid.active ~ .foot_bottom { opacity: 1; transform: none; } .site_foot .foot_col h4 { margin: 0 0 1.6rem; font-family: var(--main-font); font-weight: 400; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .site_foot .foot_col ul { list-style: none; margin: 0; padding: 0; } .site_foot .foot_col li { margin: 0 0 .95rem; } .site_foot .foot_col :where(a) { font-family: var(--main-font); font-weight: 300; font-size: 14px; color: rgb(var(--white-rgb) / 82%); transition: color .3s ease; } .site_foot .foot_col a:hover { color: var(--gold); } .site_foot .foot_reach address { font-style: normal; } .site_foot .foot_reach p { margin: 0 0 1.1rem; font-family: var(--main-font); font-weight: 300; font-size: 14px; line-height: 1.5; color: rgb(var(--white-rgb) / 70%); } .site_foot .foot_bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: clamp(1.5rem, 2.5vw, 2.2rem); border-top: 1px solid rgb(var(--white-rgb) / 12%); } .site_foot .foot_bottom, .site_foot .foot_bottom a { font-family: var(--main-font); font-weight: 300; font-size: .85rem; letter-spacing: .02em; color: rgb(var(--white-rgb) / 45%); } .site_foot .foot_bottom span { white-space: nowrap; } .site_foot .foot_legal a { display: inline; } .site_foot .foot_bottom a:hover { color: var(--gold); } /* ============================================================ FLOATING WHATSAPP BUTTON ============================================================ */ .wa_float { position: fixed; z-index: 6; right: 1.4rem; bottom: 1.4rem; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #128C7E; color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 35%); transition: transform .3s ease, background-color .3s ease; } .wa_float svg { width: 1.7rem; height: 1.7rem; } .wa_float span { display: none; } .wa_float:hover { transform: scale(1.08); background: #25D366; } /* ============================================================ CTA BANNER (after projects) ============================================================ */ #cta_banner { display: flex; align-items: center; overflow: hidden; min-height: clamp(40vh, 52vw, 58vh); } #cta_banner .cta_bg { top: 0; left: 0; z-index: 0; } #cta_banner .cta_bg img, #cta_banner video.cta_bg { width: 100%; height: 100%; object-fit: cover; } #cta_banner .cta_filter { top: 0; left: 0; z-index: 1; background: rgb(var(--black-rgb) / 60%); } #cta_banner .container { z-index: 2; } #cta_banner .cta_banner_in { text-align: center; max-width: none; margin: 0 auto; } #cta_banner .cta_banner_in h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2rem, 5.6vw, 5.2rem); line-height: 1; margin: 0; letter-spacing: .01em; white-space: nowrap; } /* never let the SplitText line-mask clip this heading (Lora's taller ascenders/descenders were being cropped top & bottom — same fix already applied to #ab_units/#ab_values and #sec_form headings above) */ #cta_banner .cta_banner_in h2 .split-parent, #cta_banner .cta_banner_in h2 .split-line, #cta_banner .cta_banner_in h2 .split-child { overflow: visible; } /* GLOBAL: custom.css sets .split-parent{overflow:hidden} for every SplitText reveal heading site-wide (js/scripts.js runs SplitText on every ".textAnim h1/h2/h3"). That tight mask clips Lora's ascenders/descenders on any heading, not just the few spots above — so make it visible everywhere instead of patching section by section. */ .split-parent, .split-line { overflow: visible; } #cta_banner .cta_banner_in p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 72%); font-size: clamp(.8rem, 1.5vw, 1.3rem); line-height: 1.5; margin: 1.3rem auto 0; max-width: none; white-space: nowrap; } /* banner CTA uses the shared pill_cta; just add its spacing */ #cta_banner .cta_start { margin-top: clamp(2rem, 3.5vw, 3rem); } /* No decorative quote marks on testimonials / founder note */ #testimonials blockquote::before, #testimonials blockquote::after, #sec_2 .founder_note::before, #sec_2 .founder_note::after { content: none; display: none; } /* ---------------- FOUNDER NOTE (about-us blockquote) ---------------- */ #sec_2 .founder_note { margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding-left: clamp(1.2rem, 1.6vw, 1.8rem); border-left: 2px solid rgb(var(--gold-rgb) / 65%); } #sec_2 .founder_note p { font-family: var(--title-font); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.85rem); line-height: 1.4; color: rgb(var(--white-rgb) / 92%); margin: 0; } #sec_2 .founder_note cite { display: block; margin-top: clamp(1.2rem, 2vw, 1.8rem); font-family: var(--main-font); font-style: normal; font-weight: 400; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--white-rgb) / 65%); } #sec_2 .founder_note cite span { color: var(--gold); } /* ---------------- FOUNDER SIGNATURE ---------------- */ span.firma { display: inline-block; width: auto; font-family: var(--write-font); font-weight: 400; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: var(--gold2); white-space: nowrap; } /* ---------------- FOOTER MEGA TITLE ---------------- */ .titolonemega span { color: var(--gold3); } footer .a_logo { opacity: .5; } /* ---------------- MISC ---------------- */ /* Selection + custom cursor already pick up --grey-rgb (gold). */ ::selection { color: var(--black); background: rgb(var(--gold-rgb) / 85%); } ::-moz-selection { color: var(--black); background: rgb(var(--gold-rgb) / 85%); } /* Slogan under hero — Jost, smaller, sized to wrap in ~3 lines */ #s1_home .slogan p { font-family: var(--main-font); font-weight: 300; font-size: 1.05em; line-height: 1.45; width: 34ch; letter-spacing: .01em; } /* Category (servizi) hover images: subtle warm frame */ .img_hover img { filter: brightness(.82) saturate(1.05); } /* ============================================================ STATS SECTION (Decoraa-style) — columns + dividers, numbers rise at staggered speeds via ScrollSmoother data-speed. ============================================================ */ #s5_home.stats_sec { overflow: hidden; } #s5_home > .container { padding-top: 0; } #s5_home .stats_row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; min-height: 64vh; } #s5_home .stat { position: relative; display: flex; align-items: center; padding: 0 clamp(1.2rem, 2.6vw, 3rem); min-height: 64vh; } #s5_home .stat:not(:first-child) { border-left: 1px solid rgb(var(--gold-rgb) / 20%); } #s5_home .stat_in { display: flex; flex-direction: column; gap: clamp(1.5rem, 5vw, 4.5rem); will-change: transform; } #s5_home .stat_label { font-family: var(--main-font); font-weight: 400; text-transform: capitalize; font-size: clamp(.9rem, 1vw, 1.1rem); letter-spacing: .01em; color: rgb(var(--white-rgb) / 55%); } #s5_home .stat_val { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(3.6rem, 7.5vw, 8.5rem); line-height: .85; letter-spacing: .01em; } /* mobile / tablet: still 3 columns (one row, 3 items) — static, no parallax off-desktop */ @media (max-width: 1023px) { #s5_home .stats_row { grid-template-columns: repeat(3, 1fr); min-height: 0; } #s5_home .stat { min-height: 0; padding: 2.5rem .6rem; } #s5_home .stat_in { gap: 1.25rem; } } @media (max-width: 640px) { #s5_home .stat { padding: 2rem .4rem; } #s5_home .stat_label { font-size: .78rem; } #s5_home .stat_val { font-size: clamp(2.2rem, 11vw, 3.4rem); } } /* ============================================================ PRODUCTS SECTION — pinned "stacking cards" (Forma-style) ============================================================ */ #sec_servizi .container { max-width: 1680px; } #sec_servizi .svc_layout { display: block; } /* LEFT intro */ #sec_servizi .svc_intro { margin-bottom: 3rem; } #sec_servizi .svc_eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--main-font); font-weight: 400; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } #sec_servizi .svc_eyebrow i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); display: inline-block; } #sec_servizi .svc_head { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: .98; margin: 1.2rem 0 0; } #sec_servizi .svc_sub { font-family: var(--main-font); font-weight: 300; color: var(--mu, #9a9089); font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.5; max-width: 34ch; margin: 1.4rem 0 0; color: rgb(var(--white-rgb) / 55%); } /* CARDS (mobile default: simple vertical flow) */ #sec_servizi .svc_cards { position: relative; } #sec_servizi .svc_card { position: relative; margin-bottom: 1.5rem; } #sec_servizi .svc_card_in { display: grid; grid-template-columns: 1fr; gap: 1.5rem; background: #2b2118; border: 1px solid rgb(var(--gold-rgb) / 16%); padding: 1.75rem; } #sec_servizi .svc_no { font-family: var(--main-font); font-size: .9rem; letter-spacing: .12em; color: rgb(var(--white-rgb) / 45%); } #sec_servizi .svc_name { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; margin: .8rem 0 0; white-space: nowrap; } #sec_servizi .svc_desc { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.5; margin: 1.1rem 0 0; max-width: 42ch; } #sec_servizi .svc_tags { font-family: var(--main-font); font-weight: 400; color: var(--gold2); font-size: .92rem; letter-spacing: .02em; margin: 1.6rem 0 0; } /* ---------------- REUSABLE PILL CTA ---------------- The site's diagonal-arrow link animation wrapped in a pill. Used by product cards, "About turii" and the header "Get a quotation". */ .link.pill_cta { padding: .95em 1.7em; border: 1px solid rgb(var(--gold-rgb) / 55%); border-radius: 2em; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--white); white-space: nowrap; transition: background-color .4s ease, color .4s ease, border-color .4s ease; } .link.pill_cta::after { display: none; } /* drop the link's underline */ .link.pill_cta:hover { background-color: var(--gold); border-color: var(--gold); color: var(--black); } .link.pill_cta svg { height: .82em; } .link.pill_cta svg path { fill: var(--gold); transition: fill .4s ease; } .link.pill_cta:hover svg path { fill: var(--black); } /* seat the incoming arrow just inside the pill's left padding */ .link.pill_cta svg:nth-of-type(1) { left: 1.7em; } .link.pill_cta:hover span { transform: translateX(1.2rem); } /* product-card CTA position */ #sec_servizi .svc_cta { align-self: flex-start; margin-top: 1.7rem; } #sec_servizi .svc_img { position: relative; overflow: hidden; aspect-ratio: 16 / 11; } #sec_servizi .svc_img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.9) saturate(1.03); } /* reusable: portrait source photos in a landscape box (product cards, nav hover thumbnail) bias the crop down/up so the important part of the photo stays in frame */ .pos_bottom { object-position: 50% 88%; } .pos_top { object-position: 50% 12%; } /* nav "Products" hover thumbnail: letterbox portrait photos instead of cropping them in the landscape (4:3) preview box, so the full photo is always visible */ .img_hover img.no_crop_hover { object-fit: contain; background: var(--black); } /* DESKTOP: two columns; cards stay in normal flow and are pinned/stacked by GSAP. (Normal flow means the section can never render blank, even if JS is delayed.) */ @media (min-width: 1024px) { #sec_servizi .svc_layout { display: grid; grid-template-columns: 34% 66%; gap: 4%; align-items: start; } #sec_servizi .svc_intro { align-self: start; margin-bottom: 0; } #sec_servizi .svc_card { position: relative; margin: 0; will-change: transform; } /* full-bleed image card: the photo fills the whole card, text overlaid on top */ #sec_servizi .svc_card_in { display: block; position: relative; min-height: 84vh; padding: 0; overflow: hidden; box-shadow: 0 -1px 40px rgb(0 0 0 / 35%); } #sec_servizi .svc_img { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; width: 100%; height: 100%; min-height: 0; } /* readability scrim behind the overlaid text (left + bottom) */ #sec_servizi .svc_card_in::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(20 15 10 / 84%) 0%, rgb(20 15 10 / 52%) 36%, rgb(20 15 10 / 0%) 64%), linear-gradient(0deg, rgb(20 15 10 / 60%) 0%, rgb(20 15 10 / 0%) 42%); } #sec_servizi .svc_txt { position: absolute; z-index: 2; left: 0; bottom: 0; top: auto; display: flex; flex-direction: column; justify-content: flex-end; width: 56%; max-width: 640px; padding: 3.4rem; } #sec_servizi .svc_desc { margin-top: 1.2rem; } #sec_servizi .svc_tags { margin-top: 1.4rem; } #sec_servizi .svc_cta { margin-top: 1.9rem; } } /* ---------------- "MADE WHILE YOU BUILD" SCROLL-SCRUB VIDEO ---------------- */ /* The video replaces the old growing image; it fills the container like the image did. */ #s3_home .to_big .mwyb_media { display: block; width: 100%; height: auto; object-fit: cover; } @media screen and (min-width: 1024px) { #s3_home .to_big .mwyb_media { height: 100vh; } /* single line so the heading scrolls horizontally and its width is measurable */ #s3_home .text_enter { white-space: nowrap; } } /* the bottom gradient blend must sit above the video, below the text */ #s3_home .to_big .filter_bt { z-index: 1; } #s3_home .to_big .text_enter { z-index: 2; } /* ---------------- "PROJECTS" SECTION TITLE ---------------- */ /* This heading uses foundation.css's bare fluid --h1-size scale (up to 180px) — oversized and inconsistent with the site's other big display headings. Give it its own smaller cap. */ #sec_realizzazioni h2.h1 { font-size: clamp(2.4rem, 5.5vw, 6.5rem); overflow-wrap: break-word; } /* Root cause of the visible overlap: because the horizontal-scroll row's content is always wider than the viewport (by design), flex-shrink collapses ".text" down to hug the unbroken word's ink width with ZERO trailing buffer — then custom.css's "img_1 { margin-left: -2.5% }" (meant to overlap the *next image* slightly for the collage look) eats straight into the letters instead of empty space. This happens regardless of font/size, it just wasn't visible with a narrower word. Add a buffer the negative margin can safely consume instead. */ #wrapper_scroll_orizzontale .text { padding-right: 4%; } /* ---------------- PROJECT CARD CAPTIONS ---------------- */ /* Overlay a location + title + "VIEW PROJECT" on each gallery card. Works for the desktop horizontal-scroll cards (.sec_img) and the mobile swiper slides (.swiper-slide). Layout is unchanged. */ #wrapper_scroll_orizzontale .sec_img { position: relative; } #swiper_gallery .swiper-slide { position: relative; overflow: hidden; } /* Always-on dark tint over the photo (below .proj_cap's bottom gradient, z-index 3) so the caption stays legible on bright project photos too — same treatment as the "Who we work with" cards. */ #wrapper_scroll_orizzontale .sec_img picture::after, #swiper_gallery .swiper-slide::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgb(var(--black-rgb) / 22%); pointer-events: none; } .proj_cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; padding: 2.2rem 1.6rem 1.6rem; background: linear-gradient(to top, rgb(var(--black-rgb) / 92%) 0%, rgb(var(--black-rgb) / 72%) 34%, rgb(var(--black-rgb) / 0%) 100%); pointer-events: none; } /* fade the caption in together with the image reveal */ #wrapper_scroll_orizzontale .sec_trigger .proj_cap { opacity: 0; transform: translateY(12px); transition: opacity .8s ease .35s, transform .8s cubic-bezier(.76,0,.24,1) .35s; } #wrapper_scroll_orizzontale .sec_trigger.active .proj_cap { opacity: 1; transform: translateY(0); } .proj_loc { font-family: var(--main-font); font-weight: 400; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold2); opacity: .9; margin-bottom: .55rem; } .proj_title { font-family: var(--title-font); font-weight: 500; text-transform: capitalize; font-size: clamp(1.5rem, 1.9vw, 2rem); line-height: 1.05; color: var(--white); margin: 0 0 .9rem; } .proj_link { pointer-events: auto; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--main-font); font-weight: 400; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); position: relative; padding-bottom: .25rem; } .proj_link span { transition: transform .5s cubic-bezier(.52,0,0,1); } .proj_link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.52,0,0,1); } .proj_link:hover span { transform: translateX(.4rem); } .proj_link:hover::after { transform: scaleX(1); } /* On mobile swiper the slide is a fixed-ratio box; keep caption text a touch tighter */ @media (max-width: 1023px) { .proj_cap { padding: 2rem 1.25rem 1.35rem; } .proj_title { font-size: 1.5rem; } } /* ============================================================ WHO WE WORK WITH (homepage) — 5-card grid, reuses .proj_cap/ .proj_title/.proj_link (same overlay-caption language as the PROJECTS gallery cards) so it reads as one visual system. ============================================================ */ #sec_audiences .aud_intro { margin-bottom: 2.5rem; } #sec_audiences .svc_eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--main-font); font-weight: 400; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } #sec_audiences .svc_eyebrow i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); display: inline-block; } #sec_audiences .svc_head { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; margin: 1rem 0 0; } #sec_audiences .aud_sub { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.6; max-width: 60ch; margin: 1.1rem 0 0; } /* Horizontal swiper instead of a 3x2 grid — 5 items never split evenly into rows, so a scrollable single row (peeking next card) avoids the awkward orphaned last row entirely and scales to any card count. */ .aud_carousel { position: relative; } .aud_swiper { width: 100%; padding-bottom: .5rem; } .aud_swiper .swiper-wrapper { align-items: stretch; } /* Scroll-reveal: cards fade + rise in, staggered, once #sec_audiences .aud_carousel (which carries .sec_trigger) gets .active from the site's shared ScrollTrigger toggle (see js/scripts.js). Same stagger-via-nth-child pattern already used for the About page reveals. */ .aud_card { position: relative; display: block; overflow: hidden; height: auto; opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); } .aud_carousel.active .aud_card { opacity: 1; transform: translateY(0); } .aud_carousel.active .aud_card:nth-child(2) { transition-delay: .08s; } .aud_carousel.active .aud_card:nth-child(3) { transition-delay: .16s; } .aud_carousel.active .aud_card:nth-child(4) { transition-delay: .24s; } .aud_carousel.active .aud_card:nth-child(5) { transition-delay: .32s; } .aud_card .aud_card_pic img { transition: transform 1s cubic-bezier(.16,1,.3,1); } .aud_card:hover .aud_card_pic img { transform: scale(1.06); } /* Always-on dark tint over the whole photo (on top of .proj_cap's bottom gradient) so the caption stays legible on bright photos too — some of these real client photos (daylight sites, lit lobbies) are much brighter than the render-only stock images the gradient alone was tuned for. */ .aud_card_pic::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgb(var(--black-rgb) / 28%); pointer-events: none; } .aud_desc { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 76%); font-size: .92rem; line-height: 1.5; margin: 0 0 1rem; max-width: 34ch; pointer-events: none; } /* Founder-note photo (index.html) is only 325x492px source — the w90l column width was upscaling it ~1.6-2x, which reads as blurry/soft ("distorted"). Cap its rendered width close to native size so it stays sharp; no source image change involved, this only limits how large it's allowed to scale. */ .founder_pic { max-width: 380px; } /* Same fix, same cause: "Our inspiration" photo (about.html) is only 570x676px source — the w45l column was upscaling it to ~790px (~1.4x), reading as soft/blurry. Cap it near native width so it renders sharp. */ #ab_inspiration .sec_img { max-width: 570px; } /* doors.html intro photo is a tall portrait shot — the shared #sec_1 ratio-1-1e1 box (4/3, cover-cropped) chopped off its top and bottom. Match the box to the image's own ratio and switch to contain so the full door is always visible, uncropped. */ #sec_1 .sec_img .no_crop.ratio-1-1e1 { aspect-ratio: 4 / 5; background: var(--black); } #sec_1 .sec_img .no_crop > img { object-fit: contain; } /* vanities.html intro photo — same fix, different native ratio (tall 2/3 shot). */ #sec_1 .sec_img .no_crop_23.ratio-1-1e1 { aspect-ratio: 2 / 3; background: var(--black); } #sec_1 .sec_img .no_crop_23 > img { object-fit: contain; } /* entrance-lobby.html intro photo — landscape shot (1.44). Box matches the image's own ratio, so "contain" neither crops it nor leaves letterbox bars. */ #sec_1 .sec_img .no_crop_wide.ratio-1-1e1 { aspect-ratio: var(--r, 13 / 9); background: var(--black); } #sec_1 .sec_img .no_crop_wide > img { object-fit: contain; } /* builders-developers.html section 2 photo — same 2/3 fix, outside #sec_1. */ #s2_general .sec_img .no_crop_23.ratio-1-1e1 { aspect-ratio: 2 / 3; background: var(--black); } #s2_general .sec_img .no_crop_23 > img { object-fit: contain; } /* contractors.html "Install & hand over" step photo — full door, no crop (4/5 native ratio). */ #s3_general .box_step picture.no_crop.ratio-1-1e1 { aspect-ratio: 4 / 5; background: var(--black); } #s3_general .box_step picture.no_crop > img { object-fit: contain; } /* bed-room.html gallery slots 1 & 2 are landscape photos inside the shared portrait (3/4) gallery cell — cover-crop was slicing off both sides. Letterbox them instead so the full photo stays visible. */ .pd_gal_grid .pd_pic.no_crop_gal { background: var(--black); } .pd_gal_grid .pd_pic.no_crop_gal img { object-fit: contain; } /* cell height follows the image's own proportions at full width, instead of a fixed box — shows the complete photo with no letterbox bars and no side cropping */ .pd_gal_grid .pd_pic.nat_ratio { aspect-ratio: auto; } .pd_gal_grid .pd_pic.nat_ratio img { height: auto; object-fit: contain; } /* ========================================================================= ABOUT PAGE (about.html) — reuses homepage brand tokens, fonts & reveals ========================================================================= */ /* "First letter of every word capital" for every section heading except the hero banner (.ab_hero_h, full caps by design) — the shared bottom "Contact Us" CTA (#sec_form .h1) already gets this same capitalize treatment from its own site-wide rule below. */ .about_page #ab_story h2, .about_page #ab_inspiration h2, .about_page #ab_fc h2, .about_page #ab_timeline h2, .about_page .jt_text h3, .about_page .ab_impact_head h2, .about_page #ab_units h2, .about_page #ab_values h2, .about_page .ab_val h3, .about_page #ab_team .ab_head h2, .about_page #ab_gallery .ab_head h2 { text-transform: capitalize; } /* SplitText line reveal — each line slides up behind its mask, with a stagger. Content is force-shown by JS on pages that don't animate; on the builders page the rAF reveal toggles .active and these transitions play. */ .about_page .textAnim .split-child { opacity: 0; transform: translateY(110%); transition: transform 1.15s cubic-bezier(.16,1,.3,1), opacity .9s ease; } .about_page .textAnim.active .split-child { opacity: 1 !important; transform: translateY(0) !important; } .about_page .textAnim.active .split-child:nth-child(2) { transition-delay: .09s; } .about_page .textAnim.active .split-child:nth-child(3) { transition-delay: .18s; } .about_page .textAnim.active .split-child:nth-child(4) { transition-delay: .27s; } .about_page .textAnim.active .split-child:nth-child(5) { transition-delay: .36s; } /* generic eyebrow (homepage scopes its own under #testimonials) */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--main-font); font-weight: 400; letter-spacing: .18em; text-transform: uppercase; font-size: .75rem; color: var(--gold2); } .eyebrow i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); display: inline-block; } /* shared about heading */ .ab_head { margin-bottom: 3.2rem; max-width: 44ch; } .ab_head h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.02; margin: 1rem 0 0; } .ab_head .ab_lead { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 64%); font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.55; margin-top: 1.2rem; } /* ---- HERO (like builders page: left eyebrow+heading centred, right subheading bottom) ---- */ #about_hero { min-height: 100vh; display: flex; align-items: stretch; overflow: hidden; } #about_hero .ab_hero_bg { top: 0; left: 0; z-index: 0; } #about_hero .ab_hero_bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) saturate(1.03); } #about_hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, var(--black) 2%, rgb(36 28 21 / 28%) 44%, rgb(36 28 21 / 62%) 100%); } #about_hero .container { position: relative; z-index: 2; display: flex; align-items: stretch; min-height: 100vh; } #about_hero .ab_hero_in { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(1.8rem, 4vw, 4rem); width: 100%; flex-wrap: wrap; } #about_hero .ab_hero_left { flex: 1 1 55%; min-width: 0; } #about_hero .ab_hero_right { flex: 0 1 34%; } #about_hero .ab_hero_h { font-family: var(--title-font); font-weight: 500; text-transform: uppercase; color: var(--white); font-size: clamp(2.6rem, 6vw, 6rem); line-height: .95; letter-spacing: .005em; margin: 1.1rem 0 0; } #about_hero .ab_hero_sub { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 82%); font-size: clamp(1rem, 1.25vw, 1.22rem); line-height: 1.55; margin: 0; } @media (min-width: 768px) { #about_hero .ab_hero_left { align-self: center; } #about_hero .ab_hero_right { align-self: flex-end; } } @media (max-width: 767px) { #about_hero .ab_hero_in { flex-direction: column; align-items: flex-start; gap: 1.3rem; } #about_hero .ab_hero_right { flex: 1 1 auto; } } /* ---- STORY (two column) ---- */ #ab_story h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; margin: 1rem 0 0; } #ab_story p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 66%); font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.6; margin-top: 1.3rem; max-width: 48ch; } #ab_story .ab_story_img picture { display: block; overflow: hidden; } #ab_story .ab_story_img img { width: 100%; height: 100%; object-fit: cover; } /* keep these two headings on a single line, scaling down on narrow screens */ #ab_units .ab_head h2, #ab_values .ab_head h2 { white-space: nowrap; font-size: clamp(1.4rem, 5vw, 4rem); } /* the block's 44ch cap + SplitText's overflow:hidden line-mask were clipping the nowrap heading */ #ab_units .ab_head, #ab_values .ab_head { max-width: none; } #ab_units .ab_head h2 .split-parent, #ab_values .ab_head h2 .split-parent, #ab_units .ab_head h2 .split-line, #ab_values .ab_head h2 .split-line { overflow: visible; } /* keep the intro paragraph at a readable measure */ #ab_units .ab_head .ab_lead { max-width: 44ch; } /* ---- IMPACT / STATS (title left, big numbers + descriptions right) ---- */ .ab_impact_grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } .ab_impact_head h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; margin: 1rem 0 0; } .ab_impact_list { display: flex; flex-direction: column; } .ab_stat_row { display: grid; grid-template-columns: minmax(3.2em, auto) 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.8rem, 4vh, 3.2rem) 0; opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.76,0,.24,1); } .ab_stat_row + .ab_stat_row { border-top: 1px solid rgb(var(--gold-rgb) / 14%); } .ab_impact_list.active .ab_stat_row { opacity: 1; transform: none; } .ab_impact_list.active .ab_stat_row:nth-child(2) { transition-delay: .12s; } .ab_impact_list.active .ab_stat_row:nth-child(3) { transition-delay: .24s; } .ab_stat_num { display: inline-block; min-width: 1.7em; font-family: var(--title-font); font-weight: 500; color: var(--white); line-height: .9; font-size: clamp(3.2rem, 6.5vw, 6.5rem); letter-spacing: .01em; } .ab_stat_desc { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 60%); font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.55; max-width: 40ch; } @media (min-width: 1024px) { .ab_impact_grid { grid-template-columns: 34% 1fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; } } /* ---- JOURNEY TIMELINE (horizontal Swiper — tecnoarreda chi-siamo replica) ---- */ #ab_timeline { overflow: hidden; } /* centred heading, like the chi-siamo journey intro */ #ab_timeline .ab_head { max-width: 64ch; margin: 0 auto 1rem; text-align: center; } #ab_timeline .ab_head .eyebrow { justify-content: center; } #journey_swiper { padding-top: clamp(2rem, 5vh, 4rem); } #journey_swiper .jt_swiper { overflow: hidden; padding: 0; } #journey_swiper .swiper-slide { height: auto; } .jt_slide { position: relative; padding: clamp(2.5rem, 6vh, 5rem) 5vw clamp(2.5rem, 6vh, 4.5rem); min-height: 48vh; overflow: hidden; } /* giant faint watermark number, right side — vertically centred on the timeline line */ .jt_ghost { position: absolute; top: 50%; right: -.02em; z-index: 0; pointer-events: none; transform: translateY(-52%); font-family: var(--title-font); font-weight: 400; line-height: .8; font-size: clamp(13rem, 36vw, 36rem); color: var(--gold); opacity: .08; letter-spacing: -.02em; white-space: nowrap; } /* big year heading */ .jt_title { position: relative; z-index: 1; } .jt_num { font-family: var(--title-font); font-weight: 400; color: var(--white); line-height: .9; letter-spacing: .005em; font-size: clamp(5rem, 12vw, 11rem); } /* full-width timeline line, extending past the right edge */ .jt_line { position: relative; z-index: 1; height: 1px; width: 122%; background: rgb(var(--white-rgb) / 26%); margin: clamp(2.6rem, 5vh, 4rem) 0; } /* start node: a hollow ring (masks the line behind it) with a filled dot at its centre */ .jt_dot { position: absolute; left: 0; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgb(var(--white-rgb) / 55%); background: var(--black); } .jt_dot::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background: var(--white); } /* second marker further along the line */ .jt_line::after { content: ""; position: absolute; left: 78%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; background: var(--white); } /* title + description */ .jt_text { position: relative; z-index: 1; max-width: 60ch; } .jt_text h3 { font-family: var(--title-font); font-weight: 400; color: var(--white); font-size: clamp(1.9rem, 3.1vw, 3rem); line-height: 1.04; margin: 0; } .jt_text p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 72%); font-size: clamp(1.05rem, 1.2vw, 1.28rem); line-height: 1.55; margin-top: 1.3rem; } /* Desktop: the journey is pinned & scroll-driven, so the whole section must fit one viewport */ @media (min-width: 1024px) { #ab_timeline { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(1.5rem, 3vh, 2.5rem); padding-bottom: clamp(3.5rem, 8vh, 7rem); } #ab_timeline > .container { padding-top: 0; padding-bottom: 0; } #ab_timeline .ab_head { margin-bottom: clamp(0.8rem, 2.5vh, 1.6rem); } #journey_swiper { padding-top: clamp(0.6rem, 1.6vh, 1.2rem); } #ab_timeline .jt_slide { min-height: 0; padding: clamp(0.8rem, 2vh, 1.6rem) 5vw; } #ab_timeline .jt_num { font-size: clamp(3.5rem, 7vw, 6.5rem); } #ab_timeline .jt_ghost { font-size: clamp(10rem, 26vw, 26rem); } #ab_timeline .jt_line { margin: clamp(1.1rem, 2.5vh, 1.9rem) 0; } #ab_timeline .jt_text p { margin-top: .7rem; } } /* nav row: plain chevron arrows, bottom-right (like chi-siamo) */ .jt_nav { display: flex; align-items: center; justify-content: flex-end; margin-top: clamp(1.5rem, 4vh, 3rem); } .jt_arrows { display: flex; gap: 1.8rem; } .jt_arrows button { width: auto; height: auto; padding: 0; border: 0; background: none; border-radius: 0; color: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .8; transition: opacity .3s ease, transform .3s ease; } .jt_arrows button:hover { opacity: 1; background: none; } .jt_arrows button.jt_prev:hover { transform: translateX(-3px); } .jt_arrows button.jt_next:hover { transform: translateX(3px); } .jt_arrows button.swiper-button-disabled { opacity: .3; cursor: default; } .jt_arrows button svg { width: 2.5rem; height: 2.5rem; } /* mobile: keep arrows but move to the left so they clear the WhatsApp float */ @media (max-width: 767px) { .jt_nav { justify-content: flex-start; } .jt_arrows { gap: 1.4rem; } .jt_arrows button svg { width: 2.1rem; height: 2.1rem; } } /* ---- UNITS ---- */ .ab_unit_grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1rem; } .ab_unit { position: relative; overflow: hidden; border: 1px solid rgb(var(--gold-rgb) / 16%); background: #2b2118; opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.76,0,.24,1); } .ab_unit_grid.active .ab_unit { opacity: 1; transform: none; } .ab_unit_grid.active .ab_unit:nth-child(2) { transition-delay: .15s; } .ab_unit_img { aspect-ratio: 16/10; overflow: hidden; } .ab_unit_img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); filter: brightness(.92); } .ab_unit:hover .ab_unit_img img { transform: scale(1.05); } .ab_unit_meta { padding: 1.8rem clamp(1.4rem, 2vw, 2rem) 2rem; } .ab_unit_tag { font-family: var(--main-font); color: var(--gold2); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; } .ab_unit_loc { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.4rem, 2.2vw, 2rem); display: block; margin-top: .5rem; } .ab_unit_meta p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 60%); font-size: .98rem; line-height: 1.5; margin-top: .7rem; } /* ---- VALUES ---- */ .ab_val_grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgb(var(--gold-rgb) / 16%); border: 1px solid rgb(var(--gold-rgb) / 16%); margin-top: 1rem; } .ab_val { background: var(--black); padding: clamp(2rem, 3.2vw, 3.2rem); opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.76,0,.24,1); } .ab_val_grid.active .ab_val { opacity: 1; transform: none; } .ab_val_grid.active .ab_val:nth-child(2) { transition-delay: .1s; } .ab_val_grid.active .ab_val:nth-child(3) { transition-delay: .2s; } .ab_val_grid.active .ab_val:nth-child(4) { transition-delay: .3s; } .ab_val_no { font-family: var(--main-font); color: var(--gold); font-size: .85rem; letter-spacing: .2em; } .ab_val h3 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; margin: 1rem 0 0; } .ab_val p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); font-size: 1rem; line-height: 1.6; margin-top: .9rem; } /* ---- FOUNDER (about) ---- */ #ab_founder .founder_note::before, #ab_founder .founder_note::after { content: none; display: none; } #ab_founder .founder_note { margin: 1.4rem 0 0 !important; padding: 0 !important; background: none !important; } /* flush-left: override foundation's blockquote box */ #ab_founder .founder_note p { font-family: var(--title-font); font-weight: 400; font-style: italic; color: var(--white); font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.4; } #ab_founder .founder_note cite { display: block; margin-top: 1.6rem; font-style: normal; font-family: var(--main-font); font-weight: 400; letter-spacing: .06em; color: rgb(var(--white-rgb) / 72%); font-size: .95rem; } #ab_founder .founder_note cite span { color: var(--gold); } /* ---- OUR INSPIRATION ---- */ #ab_inspiration .sec_img picture { display: block; overflow: hidden; } #ab_inspiration .sec_img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } #ab_inspiration h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; margin: 1rem 0 0; } #ab_inspiration .ab_insp_name { font-family: var(--main-font); font-weight: 400; letter-spacing: .04em; color: var(--gold); font-size: 1rem; margin: 1.3rem 0 0; } #ab_inspiration .ab_insp_name span { color: rgb(var(--white-rgb) / 55%); } #ab_inspiration p:not(.ab_insp_name) { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 66%); font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.6; margin-top: 1.1rem; max-width: 52ch; } /* ---- FOUNDER & CO-FOUNDER (about) ---- */ #ab_fc h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; margin: 1rem 0 0; } #ab_fc .ab_fc_person { margin-top: clamp(1.8rem, 3vw, 2.6rem); } #ab_fc .ab_fc_name { font-family: var(--main-font); font-weight: 500; letter-spacing: .03em; color: var(--gold); font-size: 1.05rem; margin: 0; } #ab_fc .ab_fc_name span { font-weight: 300; letter-spacing: .04em; color: rgb(var(--white-rgb) / 55%); } #ab_fc .ab_fc_person p:not(.ab_fc_name) { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 66%); font-size: clamp(1rem, 1.05vw, 1.1rem); line-height: 1.6; margin-top: .8rem; max-width: 54ch; } #ab_fc .sec_img picture { display: block; overflow: hidden; } #ab_fc .sec_img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---- CORE TEAM ---- */ #ab_team { background: #20180f; } #ab_team .ab_head { max-width: 60ch; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); text-align: center; } #ab_team .ab_head .eyebrow { justify-content: center; } #ab_team .ab_head h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; margin: 1rem 0 0; } /* Seven people, four across. The columns are doubled up (8 tracks, each card spanning 2) purely so the trailing row of three can be nudged half a column in and sit centred under the row of four instead of hanging off to the left. */ .ab_team_grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 3vw, 2.8rem); } @media (min-width: 600px) and (max-width: 979px) { .ab_team_grid { grid-template-columns: repeat(4, 1fr); } .ab_team_grid > .ab_team_card { grid-column: span 2; } .ab_team_grid > .ab_team_card:nth-child(7) { grid-column: 2 / span 2; } } @media (min-width: 980px) { .ab_team_grid { grid-template-columns: repeat(8, 1fr); } .ab_team_grid > .ab_team_card { grid-column: span 2; } .ab_team_grid > .ab_team_card:nth-child(5) { grid-column: 2 / span 2; } /* Four across makes each card ~20% narrower than the old three-across layout, and the shared .ab_team_name clamp was sized for the wider card — "Ranjana Upadhyay" and "Sarottam Mishra" wrapped to two lines. Sized off the card here so the longest name stays on one line at every desktop width. Deliberately px-bounded rather than rem: this page's root font-size is itself fluid, so a rem floor re-introduces the wrap. */ .ab_team_grid .ab_team_name { font-size: clamp(18px, 2vw, 34px); } /* Same squeeze hits the longest role: "Senior Interior Designer" wrapped and pushed Monika's name out of line with the rest of her row. Easing the tracking does most of the work here, so the label barely changes size. */ .ab_team_grid .ab_team_role { font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .1em; } } .ab_team_card { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); } .ab_team_grid.active .ab_team_card { opacity: 1; transform: none; } .ab_team_grid.active .ab_team_card:nth-child(2) { transition-delay: .06s; } .ab_team_grid.active .ab_team_card:nth-child(3) { transition-delay: .12s; } .ab_team_grid.active .ab_team_card:nth-child(4) { transition-delay: .18s; } .ab_team_grid.active .ab_team_card:nth-child(5) { transition-delay: .24s; } .ab_team_grid.active .ab_team_card:nth-child(6) { transition-delay: .30s; } .ab_team_grid.active .ab_team_card:nth-child(7) { transition-delay: .36s; } .ab_team_photo { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid rgb(var(--gold-rgb) / 16%); background: #2b2118; } .ab_team_photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); } .ab_team_card:hover .ab_team_photo img { transform: scale(1.04); } .ab_team_role { display: block; margin-top: 1.2rem; font-family: var(--main-font); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; color: var(--gold); } .ab_team_name { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.05; margin: .4rem 0 0; } .ab_team_bio { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); font-size: .95rem; line-height: 1.55; margin-top: .8rem; max-width: 40ch; } /* ---- ACTIVITY GALLERY ---- */ #ab_gallery .ab_head { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); } #ab_gallery .ab_head h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; margin: 1rem 0 0; } .ab_gal_grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 1.4vw, 1.4rem); } @media (min-width: 600px) { .ab_gal_grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .ab_gal_grid { grid-template-columns: repeat(4, 1fr); } } .ab_gal_pic { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #2b2118; opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); } .ab_gal_grid.active .ab_gal_pic { opacity: 1; transform: none; } .ab_gal_grid.active .ab_gal_pic:nth-child(2) { transition-delay: .05s; } .ab_gal_grid.active .ab_gal_pic:nth-child(3) { transition-delay: .10s; } .ab_gal_grid.active .ab_gal_pic:nth-child(4) { transition-delay: .15s; } .ab_gal_grid.active .ab_gal_pic:nth-child(5) { transition-delay: .08s; } .ab_gal_grid.active .ab_gal_pic:nth-child(6) { transition-delay: .13s; } .ab_gal_grid.active .ab_gal_pic:nth-child(7) { transition-delay: .18s; } .ab_gal_grid.active .ab_gal_pic:nth-child(8) { transition-delay: .23s; } .ab_gal_pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); } .ab_gal_pic:hover img { transform: scale(1.05); } /* ---- desktop layouts ---- */ @media (min-width: 1024px) { .ab_unit_grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .ab_val_grid { grid-template-columns: 1fr 1fr; } } /* About hero entrance — transform-only staggered rise. Content is visible by DEFAULT (opacity:1); the animation only slides it up, so even if a browser throttles the animation the hero can never be hidden. */ #about_hero .ab_hero_in > * { animation: ab_rise 1s cubic-bezier(.22,.61,.36,1) both; } #about_hero .ab_hero_in > *:nth-child(1) { animation-delay: .12s; } #about_hero .ab_hero_in > *:nth-child(2) { animation-delay: .26s; } #about_hero .ab_hero_in > *:nth-child(3) { animation-delay: .42s; } #about_hero .ab_hero_in > *:nth-child(4) { animation-delay: .58s; } @keyframes ab_rise { from { transform: translateY(30px); } to { transform: translateY(0); } } /* ========================================================================= BUILDERS & DEVELOPERS PAGE (builders-developers.html) Reuses the About components; adds a stat band + category grid. ========================================================================= */ #about_hero .ab_hero_sub em { font-style: italic; color: var(--gold2); } /* stat band under the promise */ #bd_statband { border-top: 1px solid rgb(var(--gold-rgb) / 14%); border-bottom: 1px solid rgb(var(--gold-rgb) / 14%); } .bd_statband { display: grid; grid-template-columns: 1fr 1fr; } .bd_stat { padding: clamp(1.8rem, 4vw, 2.8rem) 1rem; display: flex; flex-direction: column; gap: .45rem; border-top: 1px solid rgb(var(--gold-rgb) / 10%); } .bd_statband .bd_stat:nth-child(-n+2) { border-top: none; } .bd_stat_num { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; } .bd_stat_lbl { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 58%); font-size: .92rem; line-height: 1.4; } @media (min-width: 768px) { .bd_statband { grid-template-columns: repeat(4, 1fr); } .bd_stat { border-top: none; border-left: 1px solid rgb(var(--gold-rgb) / 12%); } .bd_statband .bd_stat:first-child { border-left: none; } } /* "all your millwork" category grid */ .bd_cats { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgb(var(--gold-rgb) / 14%); border: 1px solid rgb(var(--gold-rgb) / 14%); margin-top: 1rem; } .bd_cat { background: var(--black); display: flex; align-items: baseline; gap: 1.2rem; padding: clamp(1.2rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.4vw, 2.2rem); transition: background-color .3s ease; } .bd_cat:hover { background: #2b2118; } .bd_cat_no { font-family: var(--main-font); color: var(--gold); font-size: .82rem; letter-spacing: .18em; } .bd_cat_name { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1; } @media (min-width: 700px) { .bd_cats { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .bd_cats { grid-template-columns: 1fr 1fr 1fr; } } /* process step emphasis (reuses .ab_impact_grid / .ab_stat_row) */ #bd_process .ab_stat_desc strong { color: var(--white); font-weight: 500; } #bd_process .ab_stat_desc { max-width: 46ch; } /* ========================================================================= BUILDERS — 3-step grid + why-choose swiper (general-contractor style) ========================================================================= */ /* centered heading variant */ .ab_head.tac { text-align: center; margin-left: auto; margin-right: auto; max-width: 62ch; } .ab_head.tac .ab_lead { margin-left: auto; margin-right: auto; max-width: 54ch; } /* your project in 3 steps */ .bd_steps_grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.2rem, 4vw, 3rem); margin-top: clamp(2.2rem, 4vw, 3.5rem); } .bd_step { display: flex; flex-direction: column; } .bd_step_top { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.5rem; } .bd_step_no { font-family: var(--title-font); font-weight: 500; color: var(--gold); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: .82; } .bd_step_top h3 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.05; margin: 0; } .bd_step_top p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); font-size: 1rem; line-height: 1.55; margin-top: .6rem; } .bd_step_img { display: block; overflow: hidden; aspect-ratio: 1 / 1.05; } .bd_step_img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); } .bd_step:hover .bd_step_img img { transform: scale(1.04); } @media (min-width: 900px) { .bd_steps_grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; } } /* why builders choose turii — swiper carousel */ #bd_why { background: #20180f; } #why_swiper { margin-top: clamp(1.5rem, 3vw, 2.5rem); } #why_swiper .why_sw { overflow: hidden; padding: 0 5vw; } #why_swiper .swiper-slide { height: auto; } .bd_why_slide { height: 100%; border: 1px solid rgb(var(--gold-rgb) / 16%); background: var(--black); padding: clamp(2rem, 3vw, 2.8rem); display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color .35s ease, background-color .35s ease; } .bd_why_slide:hover { border-color: rgb(var(--gold-rgb) / 42%); background: #2b2118; } .bd_why_no { font-family: var(--title-font); font-weight: 500; color: var(--gold); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; } .bd_why_slide h3 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.05; margin: 1rem 0 0; } .bd_why_slide p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); font-size: 1rem; line-height: 1.6; margin-top: .9rem; max-width: 32ch; } /* ========================================================================= BUILDERS = general-contractor replica: turii typography on the template ========================================================================= */ /* GC hero — sentence-case h1 pinned bottom-left */ /* builders hero — about-style eyebrow + uppercase heading (left) + subheading (right), bottom aligned */ #s1_general .s1_title { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(1.8rem, 4vw, 4rem); flex-wrap: wrap; } #s1_general .s1_left { flex: 1 1 55%; min-width: 0; } #s1_general .s1_right { flex: 0 1 34%; } #s1_general .s1_title .eyebrow { display: inline-flex; margin-bottom: 1.1rem; } #s1_general .s1_title h1 { font-family: var(--title-font); font-weight: 500; color: var(--white); text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 6rem); line-height: .98; letter-spacing: .01em; margin: 0; } #s1_general .s1_sub { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 82%); font-size: clamp(1rem, 1.25vw, 1.22rem); line-height: 1.55; margin: 0; text-transform: none; letter-spacing: .01em; } /* The banner subtitles have grown from ~140 to ~300 characters, which on a short phone (375x667) pushed the text past the bottom of the 100vh hero. Tighten size and leading a little below 768px so the longest of them still fits. */ @media (max-width: 767px) { #s1_general .s1_sub { font-size: clamp(.9rem, 3.7vw, 1.05rem); line-height: 1.45; } } @media (min-width: 768px) { /* eyebrow+heading vertically centred; subheading stays pinned to the bottom */ #s1_general .container.flex-b { align-items: stretch; } #s1_general .s1_left { align-self: center; } #s1_general .s1_right { align-self: flex-end; } } @media (max-width: 767px) { #s1_general .s1_title { flex-direction: column; align-items: flex-start; gap: 1.3rem; } #s1_general .s1_right { flex: 1 1 auto; } } /* two-column section headings (s2 / sec_1) */ #s2_general h2, #sec_1 h2, #s3_general h2, #s4_general h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); text-transform: capitalize; } #s2_general .text p, #sec_1 .text p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 66%); line-height: 1.6; } #s2_general .text strong, #sec_1 .text strong { color: var(--white); font-weight: 400; } /* vanities.html intro paragraph: emphasised, larger lead text */ #sec_1 .text p.lead_text { font-size: clamp(1.25rem, 1.7vw, 1.65rem); line-height: 1.5; } /* vanities.html intro heading: smaller so "Bathroom joinery," fits on one line, keeping the manual break at exactly 2 lines */ #sec_1 .text h2.two_line { font-size: clamp(1.8rem, 3.2vw, 3.6rem); } /* Longer two-line intro heading: at the shared .two_line size the second line ("Designed for the Elements") measures 796px against a 742px column, so it spilled onto a third line with "Elements" orphaned. Sized to fit two lines. px-bounded, not rem — this page's root font-size is fluid, so a rem floor re-introduces the wrap at narrow desktop widths. */ #sec_1 .text h2.two_line.long_2l { font-size: clamp(var(--h2min, 28px), var(--h2vw, 2.8vw), var(--h2max, 55px)); } /* Below 1024 the columns stack and the text column narrows faster than the desktop clamp shrinks, which put "Elements" back on a third line. Scale off the viewport here so it stays two lines down to ~320px. */ @media (max-width: 1023px) { #sec_1 .text h2.two_line.long_2l { font-size: min(var(--h2mvw, 6.4vw), var(--h2mmax, 34px)); } } /* 3-step heading + boxes */ #s3_general .text.textAnim h2.h1 { font-size: clamp(2rem, 4.4vw, 4rem); } /* smaller section title */ #s3_general .text h3 { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.55; margin-top: 1.1rem; } #s3_general .box_step h3 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.05; } #s3_general .box_step p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); line-height: 1.55; } .box_step span { color: var(--gold) !important; } #s3_general .box_step picture { margin-top: 1.5rem; display: block; overflow: hidden; } #s3_general .box_step img { width: 100%; height: 100%; object-fit: cover; } /* why-choose ico-slider: gold number stands in for the icon */ #s4_general .text p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 66%); } #s4_general .text strong { color: var(--gold2); } .ico_slider .box_ico_slider .ico_num { display: block; font-family: var(--title-font); font-weight: 500; color: var(--gold); font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; margin-bottom: 1.3rem; } .ico_slider .box_ico_slider h3 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.05; } .ico_slider .box_ico_slider p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); line-height: 1.6; } .ico_slider .swiper-slide { border: 1px solid rgb(var(--gold-rgb) / 14%); } .nav_btn { background: var(--gold); } /* what-we-do links */ #wrapper_servizi .box_anim { font-family: var(--title-font); font-weight: 500; color: var(--white); } /* --- builders GC-replica layout fixes --- */ /* each section paints on its own opaque background so nothing visually overlaps */ #s2_general, #sec_1, #s3_general, #s4_general, #sec_servizi { position: relative; background: var(--black); } #s3_general { z-index: 1; } #s4_general { z-index: 2; padding-top: 1rem; } #sec_servizi { z-index: 3; } /* keep the 3-step images tidy and contained */ #s3_general .box_step picture { aspect-ratio: 3 / 4; } /* taller images */ /* "what we do" display links — readable size + spacing on mobile */ #wrapper_servizi .box_anim { font-size: clamp(2rem, 9vw, 3.4rem) !important; line-height: 1.1; padding: .5rem 0 !important; margin: 0 0 .3em !important; white-space: normal; } #wrapper_servizi .img_hover { z-index: 4; } @media (min-width: 1024px) { #wrapper_servizi .box_anim { font-size: clamp(3rem, 7vw, 6.5rem) !important; } } /* ========================================================================= CONTACT FORM (general-contractor style) — heading left, form panel right ========================================================================= */ #sec_form .h1 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.04; text-transform: capitalize; letter-spacing: .01em; } /* "capitalize" title-cases every word, which turned "Get a quote" into the ugly "Get A Quote". Let a span opt one word out so articles stay lowercase. */ #sec_form .h1 .lc { text-transform: lowercase; } /* This column holds only a heading and one line of intro, against a ~600px form panel. Top-aligned (foundation's .flex-t) it left a large void beneath the text. Centre it against the panel from tablet up; below 768 the two columns stack, so alignment there is irrelevant. */ @media (min-width: 768px) { #sec_form .container.flex-t { align-items: center; } } /* never let the SplitText line-mask clip these headings */ #sec_form .h1 .split-parent, #sec_form .h1 .split-line, #sec_form .h1 .split-child { overflow: visible; } #sec_form .bd_form_intro { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 60%); font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.55; margin-top: 1.3rem; } @media (min-width: 640px) { #sec_form .bd_form_intro { white-space: nowrap; } } .bd_form_panel { background: #2b2118; padding: clamp(1.8rem, 4vw, 3.5rem); border: 1px solid rgb(var(--gold-rgb) / 12%); } .bd_form_grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.7rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.6rem); } .bd_field-full { grid-column: 1 / -1; } .bd_field label { display: block; font-family: var(--main-font); font-weight: 400; color: var(--white); font-size: 1rem; margin-bottom: .55rem; } .bd_field label .req { color: var(--gold); } .bd_field input, .bd_field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgb(var(--gold-rgb) / 38%); color: var(--white); font-family: var(--main-font); font-weight: 300; font-size: 1.05rem; padding: .55rem 0; transition: border-color .3s ease; border-radius: 0; } .bd_field textarea { resize: vertical; min-height: 6rem; line-height: 1.5; } .bd_field input:focus, .bd_field textarea:focus { outline: none; border-color: var(--gold); } .bd_form_foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); flex-wrap: wrap; } .bd_check { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 70%); font-size: .92rem; cursor: pointer; white-space: nowrap; } .bd_check span { white-space: nowrap; } .bd_check input { width: 1.1rem; height: 1.1rem; accent-color: var(--gold); flex: none; } .bd_check a { color: var(--gold2); text-decoration: underline; } .bd_submit { display: inline-flex; align-items: center; gap: .55rem; background: transparent; border: 0; color: var(--white); font-family: var(--main-font); font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; cursor: pointer; transition: color .3s ease; } .bd_submit svg { width: 1.15rem; height: 1.15rem; transition: transform .3s ease; } .bd_submit:hover { color: var(--gold); } .bd_submit:hover svg { transform: translate(3px, 3px); } .bd_form_thanks { font-family: var(--title-font); font-style: italic; color: var(--gold2); font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; } @media (max-width: 640px) { .bd_form_grid { grid-template-columns: 1fr; } } /* ========================================================================= WHY BUILDERS CHOOSE TURII — icon + heading + body grid (redesign) ========================================================================= */ /* 4 centred columns — icon on top, heading, short body. No boxes, no borders. */ .bd_why_row4 { display: grid; grid-template-columns: 1fr; gap: clamp(2.8rem, 5vw, 3.5rem); text-align: center; } .bd_why_col { display: flex; flex-direction: column; align-items: center; } .bd_why_i { display: inline-flex; width: 2.7rem; height: 2.7rem; color: var(--gold); margin-bottom: 1.5rem; } .bd_why_i svg { width: 100%; height: 100%; } .bd_why_col h3 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.55rem, 2.1vw, 2.1rem); line-height: 1.1; margin: 0; } .bd_why_col p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 62%); font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.55; margin-top: .9rem; max-width: 30ch; } /* Heading lengths differ per page, so a 2- or 3-line heading used to push its own paragraph ~30px below its siblings' (contractors at 1440, all three pages at 768). Subgrid shares the icon / heading / body rows across the three columns, so the bodies start on the same line however the headings wrap. */ @media (min-width: 768px) { .bd_why_row4 { grid-template-columns: repeat(3, 1fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); grid-template-rows: auto auto auto; } .bd_why_col { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; align-items: start; align-content: start; } } @supports not (grid-template-rows: subgrid) { @media (min-width: 768px) { .bd_why_col h3 { min-height: 2.2em; } } } /* ═══════════════ PROJECTS LISTING PAGE ═══════════════ */ #s2_projects { background: var(--black); position: relative; } .pj_head { max-width: 60ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem); } .pj_head .eyebrow { justify-content: center; } .pj_head h2.h1 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.02; margin: 1rem 0 0; } /* grid: 1 column on phones, 2 big images per row on tablet/desktop (tecnoarreda /progetti) */ .pj_grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 1.4vw, 1.4rem); } @media (min-width: 700px) { .pj_grid { grid-template-columns: repeat(2, 1fr); } } /* card — big square image with hover-reveal caption */ .pj_card { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; background: #2b2118; opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); } .pj_grid.active .pj_card { opacity: 1; transform: none; } .pj_grid.active .pj_card:nth-child(2) { transition-delay: .07s; } .pj_grid.active .pj_card:nth-child(3) { transition-delay: .10s; } .pj_grid.active .pj_card:nth-child(4) { transition-delay: .17s; } .pj_grid.active .pj_card:nth-child(5) { transition-delay: .10s; } .pj_grid.active .pj_card:nth-child(6) { transition-delay: .17s; } .pj_grid.active .pj_card:nth-child(7) { transition-delay: .10s; } .pj_grid.active .pj_card:nth-child(8) { transition-delay: .17s; } .pj_img { position: absolute; inset: 0; display: block; } .pj_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); } .pj_card:hover .pj_img img { transform: scale(1.05); } /* dark filter, like .card .filter — light by default, darkens on hover */ .pj_filter { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--black); opacity: .22; transition: opacity .5s ease-in-out; } .pj_card:hover .pj_filter { opacity: .62; } /* caption + CTA: hidden by default, revealed on hover */ .pj_content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(1.4rem, 3vw, 2.2rem); gap: .9rem; opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .6s cubic-bezier(.16,1,.3,1); } .pj_card:hover .pj_content { opacity: 1; transform: none; } .pj_loc { font-family: var(--main-font); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; font-size: clamp(.62rem, .82vw, .74rem); color: var(--gold); } /* matches .proj_title's sentence-case treatment — the same project names shown as normal case everywhere else (homepage, audience pages) */ .pj_title { font-family: var(--title-font); font-weight: 500; text-transform: capitalize; color: var(--white); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: .01em; } /* CTA reuses the site .link pill button. On card-hover it just REVEALS with the arrow on the right (default .link state); the arrow only slides to the left when the CTA itself is hovered (base .link:hover). */ .pj_cta { margin-top: .3rem; font-size: 1rem; letter-spacing: .04em; cursor: pointer; } /* touch devices have no hover — keep captions visible */ @media (hover: none) { .pj_content { opacity: 1; transform: none; } .pj_filter { opacity: .5; } } /* pagination */ .pj_pager { display: flex; justify-content: center; align-items: center; gap: .55rem; margin-top: clamp(2.6rem, 5vw, 4.2rem); } .pj_pg { min-width: 2.9rem; height: 2.9rem; padding: 0 .4rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(var(--gold-rgb) / 30%); border-radius: 50%; background: transparent; color: var(--white); font-family: var(--main-font); font-weight: 400; letter-spacing: .06em; font-size: .95rem; cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease; } .pj_pg:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); } .pj_pg.is-active { background: var(--gold); border-color: var(--gold); color: var(--black); } .pj_pg-arrow svg { width: 1.1rem; height: 1.1rem; } .pj_pg:disabled { opacity: .3; cursor: default; } /* ---- PROJECT FILTERS ---- */ .pj_filters { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0 0 clamp(2.4rem, 4.5vw, 4rem); } .pj_filter_btn { font-family: var(--main-font); font-weight: 400; letter-spacing: .05em; font-size: clamp(.82rem, 1vw, .96rem); padding: .72rem 1.6rem; border: 1px solid rgb(var(--gold-rgb) / 30%); border-radius: 999px; background: transparent; color: rgb(var(--white-rgb) / 80%); cursor: pointer; white-space: nowrap; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .pj_filter_btn:hover:not(.is-active) { border-color: var(--gold); color: var(--gold); } .pj_filter_btn.is-active { background: var(--gold); border-color: var(--gold); color: var(--black); } /* ═══════════════ CONTACT PAGE ═══════════════ */ /* centred intro: eyebrow + heading */ #ct_intro { background: var(--black); position: relative; } #ct_intro .ct_intro_in { margin: 0 auto; text-align: center; } #ct_intro .eyebrow { justify-content: center; } .ct_title { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2.4rem, 5.5vw, 5.5rem); line-height: .98; letter-spacing: .005em; margin: 1.2rem 0 0; white-space: nowrap; } #ct_main { background: var(--black); position: relative; padding-top: clamp(2rem, 5vw, 4rem); } /* left column — details */ .ct_info .eyebrow { margin-bottom: 1.4rem; } .ct_h { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.03; margin: 0; } .ct_lead { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 66%); font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.6; margin: 1.3rem 0 0; max-width: 42ch; } /* quick-contact rows */ .ct_rows { margin-top: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid rgb(var(--gold-rgb) / 16%); } .ct_row { display: flex; align-items: baseline; gap: 1.2rem; padding: 1.15rem 0; border-bottom: 1px solid rgb(var(--gold-rgb) / 16%); text-decoration: none; transition: padding-left .35s cubic-bezier(.16,1,.3,1); } .ct_row:hover { padding-left: .6rem; } .ct_k { flex: 0 0 6.5rem; font-family: var(--main-font); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; color: var(--gold); } .ct_v { font-family: var(--title-font); font-weight: 400; color: var(--white); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; transition: color .3s ease; } .ct_row:hover .ct_v { color: var(--gold); } /* units + hours */ .ct_units { margin-top: clamp(2.2rem, 4vw, 3.2rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2rem; } .ct_unit p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 68%); font-size: .95rem; line-height: 1.55; margin: .5rem 0 0; } .ct_utag { font-family: var(--main-font); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; color: rgb(var(--white-rgb) / 55%); } /* right column — form head */ .ct_form_head { margin-bottom: clamp(1.6rem, 2.5vw, 2.2rem); } /* matches #sec_form .h1's capitalize treatment used for this same bottom/side "form heading" pattern on every other page */ .ct_form_head h2.h1 { font-family: var(--title-font); font-weight: 500; color: var(--white); text-transform: capitalize; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.05; margin: 0 0 .6rem; } @media (max-width: 767px) { .ct_units { grid-template-columns: 1fr; gap: 1.4rem; } .ct_k { flex-basis: 5rem; } } /* ═══════════════ PROJECT DETAIL PAGE ═══════════════ */ /* hero */ #pd_hero { min-height: 82vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--black); } #pd_hero .pd_hero_bg { top: 0; left: 0; z-index: 0; } #pd_hero .pd_hero_bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(1.03); } #pd_hero .pd_hero_shade { top: 0; left: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, var(--black) 3%, rgb(36 28 21 / 30%) 46%, rgb(36 28 21 / 55%) 100%); } #pd_hero .container { position: relative; z-index: 2; } .pd_hero_in { max-width: 60ch; } .pd_back { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.6rem; font-family: var(--main-font); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: rgb(var(--white-rgb) / 72%); text-decoration: none; transition: color .3s ease, gap .3s ease; } .pd_back span { transition: transform .3s ease; } .pd_back:hover { color: var(--gold); } .pd_back:hover span { transform: translateX(-3px); } .pd_title { font-family: var(--title-font); font-weight: 500; text-transform: uppercase; color: var(--white); font-size: clamp(2.6rem, 6.5vw, 6rem); line-height: .96; letter-spacing: .005em; margin: 1.1rem 0 0; } /* meta bar */ #pd_meta { background: var(--black); } .pd_meta_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2rem; border-top: 1px solid rgb(var(--gold-rgb) / 16%); border-bottom: 1px solid rgb(var(--gold-rgb) / 16%); padding: clamp(1.6rem, 3vw, 2.4rem) 0; } .pd_meta_item { display: flex; flex-direction: column; gap: .4rem; } .pd_meta_k { font-family: var(--main-font); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; font-size: .68rem; color: var(--gold); } .pd_meta_v { font-family: var(--title-font); font-weight: 400; color: var(--white); font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.1; } /* feature + body sections */ #pd_feature, #pd_body, #pd_gallery { background: var(--black); } .pd_feature_img picture { display: block; overflow: hidden; } .pd_feature_img img { width: 100%; height: 100%; object-fit: cover; } .pd_block { max-width: 62ch; margin: clamp(3rem, 6vw, 5rem) 0 clamp(1.6rem, 3vw, 2.4rem); } .pd_block:first-child { margin-top: 0; } .pd_block h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.04; margin: 0; } .pd_block p { font-family: var(--main-font); font-weight: 300; color: rgb(var(--white-rgb) / 70%); font-size: clamp(1.02rem, 1.15vw, 1.18rem); line-height: 1.65; margin: 1.2rem 0 0; } /* image rows */ .pd_imgs { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 1.4vw, 1.4rem); margin-top: clamp(1.5rem, 3vw, 2.4rem); } @media (min-width: 700px) { .pd_imgs { grid-template-columns: repeat(2, 1fr); } .pd_imgs-3 { grid-template-columns: repeat(3, 1fr); } } .pd_pic { display: block; overflow: hidden; } .pd_pic img { width: 100%; height: 100%; object-fit: cover; } /* content-block image rows: shorter, landscape crop (override the ratio-3-4 default) */ .pd_imgs .pd_pic { aspect-ratio: 4 / 3; } /* gallery */ .pd_head { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); } .pd_head h2 { font-family: var(--title-font); font-weight: 500; color: var(--white); text-transform: capitalize; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.04; margin: 1rem 0 0; } .pd_gal_grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 1.4vw, 1.4rem); align-items: start; } /* living-room.html gallery — rows that pair a portrait with a landscape. Each cell grows in proportion to its own aspect ratio from a zero flex-basis, so every cell in a row resolves to exactly the same height while keeping its natural ratio: no cropping, no letterbox bars. A row holding one image simply spans the full width at its own ratio. */ #pd_gallery .lr_gal { display: flex; flex-direction: column; gap: clamp(1rem, 1.4vw, 1.4rem); /* .pd_gal_grid sets align-items:start, which stops the rows stretching here */ align-items: stretch; } #pd_gallery .lr_row { display: flex; gap: clamp(1rem, 1.4vw, 1.4rem); } #pd_gallery .lr_row > .pd_pic { flex: var(--r) 1 0; aspect-ratio: var(--r); } /* Stacked: the main axis flips to vertical, so the zero flex-basis above would collapse every cell to no height. Size them from their aspect-ratio instead. */ @media (max-width: 767px) { #pd_gallery .lr_row { flex-direction: column; } #pd_gallery .lr_row > .pd_pic { flex: 0 0 auto; width: 100%; } } @media (min-width: 640px) { .pd_gal_grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .pd_gal_grid { grid-template-columns: repeat(3, 1fr); } } /* reveal for image groups */ .pd_imgs.sec_trigger .pd_pic, .pd_gal_grid.sec_trigger .pd_pic, .pd_meta_grid.sec_trigger .pd_meta_item { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); } .pd_imgs.sec_trigger.active .pd_pic, .pd_gal_grid.sec_trigger.active .pd_pic, .pd_meta_grid.sec_trigger.active .pd_meta_item { opacity: 1; transform: none; } .pd_gal_grid.active .pd_pic:nth-child(2), .pd_imgs.active .pd_pic:nth-child(2), .pd_meta_grid.active .pd_meta_item:nth-child(2) { transition-delay: .08s; } .pd_gal_grid.active .pd_pic:nth-child(3), .pd_imgs.active .pd_pic:nth-child(3), .pd_meta_grid.active .pd_meta_item:nth-child(3) { transition-delay: .16s; } .pd_gal_grid.active .pd_pic:nth-child(4), .pd_meta_grid.active .pd_meta_item:nth-child(4) { transition-delay: .24s; } .pd_gal_grid.active .pd_pic:nth-child(5) { transition-delay: .16s; } .pd_gal_grid.active .pd_pic:nth-child(6) { transition-delay: .24s; } @media (min-width: 768px) { .pd_meta_grid { grid-template-columns: repeat(4, 1fr); } } /* more projects: force a single row */ #pd_more_projects .pj_grid.pj_grid_1row { grid-template-columns: repeat(5, 1fr); } @media (max-width: 699px) { #pd_more_projects .pj_grid.pj_grid_1row { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } #pd_more_projects .pj_grid.pj_grid_1row .pj_card { flex: 0 0 78%; scroll-snap-align: start; } } /* smaller cards need smaller captions than the full projects.html grid */ #pd_more_projects .pj_content { padding: clamp(.8rem, 1.6vw, 1.2rem); gap: .4rem; } #pd_more_projects .pj_loc { font-size: clamp(.52rem, .68vw, .6rem); } #pd_more_projects .pj_title { font-size: clamp(.95rem, 1.3vw, 1.2rem); line-height: 1.15; } #pd_more_projects .pj_cta { font-size: .78rem; margin-top: 0; } /* ══ Sub-pixel seam fix — full-bleed background media ═══════════════════════ ScrollSmoother drives the page by translating #smooth-content on FRACTIONAL pixel values. Any full-bleed layer that sits exactly flush with its overflow:hidden parent (inset:0, same size) therefore lands on half-pixels while the page is moving, and the browser antialiases a 1px row of the photo/video against the dark background behind it — a thin horizontal line that appears only while scrolling and whose colour varies across the width (it is literally one row of the image). #cta_banner is the worst case: its height computes to a fractional 635.234px, so its edges can never sit on a whole pixel. Fix: bleed these layers 1px past the clip box on every side, so no edge of the media is ever inside the visible area. Purely visual — no layout or animation impact, and the extra 1px is clipped away by the parent. */ #s1_home .bkg_thumb, #cta_banner .cta_bg, #cta_banner video.cta_bg { top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; } #s1_home .bkg_thumb img { width: 100%; height: 100%; object-fit: cover; }