/* Rattan.Furniture — overrides layered on top of the ported prototype CSS. Code elements render with noRoot (no Bricks wrapper), so the original markup + CSS apply cleanly. Add targeted fixes here as QA reveals them. */ /* Ensure the Bricks page body uses the design page background. */ body.bricks-is-frontend, .brx-body { background: var(--bg-page); } /* The prototype conditionally rendered these; in static markup we toggle them. */ .nav-more-menu { display: none; } .nav-more.open .nav-more-menu { display: flex; } .nav-mobile { display: none !important; } @media (max-width: 1080px) { .site-header.nav-open .nav-mobile { display: flex !important; } } /* FAQ accordion: answers hidden until the item is open (JS toggles .open). */ .faq-a { display: none; } .faq-item.open .faq-a { display: block; } /* Fit cards: reveal the detail on hover (prototype toggled .open via JS). */ .fit-card:hover .fit-detail { max-height: 200px; opacity: 1; margin-bottom: 16px; } /* Detail-page gallery grid (replaces the JS bento variants). */ .rf-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; } @media (max-width: 900px) { .rf-gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rf-gallery-grid { grid-template-columns: 1fr; } } /* Uniform gallery cells (all 4:3) so the grid is tidy. */ .rf-gallery-grid .ml-img-frame { aspect-ratio: 4 / 3; flex: 0 0 auto; } .rf-gallery-item { cursor: pointer; } .rf-gallery-item .ml-img-frame::after { content: ""; position: absolute; inset: 0; background: rgba(31,42,20,0); transition: background var(--dur-base); } .rf-gallery-item:hover .ml-img-frame::after { background: rgba(31,42,20,0.18); } /* Lightbox */ .rf-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(20,16,10,0.92); padding: 4vw; opacity: 0; pointer-events: none; transition: opacity .22s; } .rf-lb.open { opacity: 1; pointer-events: auto; } .rf-lb figure { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 14px; } .rf-lb img { max-width: 92vw; max-height: 80vh; width: auto; height: auto; border-radius: var(--r-md); display: block; } .rf-lb figcaption { color: var(--paper-100); font-family: var(--font-display); font-style: italic; font-size: var(--fs-body-lg); text-align: center; } .rf-lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,0.1); color: #fff; border: none; border-radius: 999px; font-size: 28px; line-height: 1; } .rf-lb-btn:hover { background: rgba(255,255,255,0.22); } .rf-lb-prev { left: 3vw; } .rf-lb-next { right: 3vw; } .rf-lb-close { position: absolute; top: 22px; right: 26px; transform: none; width: 46px; height: 46px; font-size: 24px; } @media (max-width: 640px) { .rf-lb-prev { left: 8px; } .rf-lb-next { right: 8px; } .rf-lb-btn { width: 44px; height: 44px; } } /* Aspect-ratio helpers for native .ph photo wrappers (prototype set this inline). */ .ph.ph-r-4-5 { aspect-ratio: 4 / 5; } .ph.ph-r-4-3 { aspect-ratio: 4 / 3; } .ph.ph-r-16-9 { aspect-ratio: 16 / 9; } .ph.ph-r-3-4 { aspect-ratio: 3 / 4; } .ph.ph-r-1-1 { aspect-ratio: 1 / 1; } .ph.ph-r-9-16 { aspect-ratio: 9 / 16; } /* Inline video fills its frame; hide the play button once playing. */ .rf-video { background: #000; cursor: pointer; } .video-frame.playing .video-play, .tt-video.playing .tt-play { opacity: 0; pointer-events: none; } /* Fullscreen button — only visible while a video is playing. */ .vid-fs { position: absolute; top: 14px; right: 14px; z-index: 6; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); color: #fff; border: none; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity var(--dur-base); cursor: pointer; } .vid-fs:hover { background: rgba(0,0,0,0.7); } .vid-fs svg { width: 18px; height: 18px; } .video-frame.playing .vid-fs, .tt-video.playing .vid-fs { opacity: 1; pointer-events: auto; } /* While playing, fade out everything overlaying the video — leave just the clip. */ .tt-video .tt-overlay, .tt-video .tt-progress, .tt-video .tt-duration, .video-frame .video-meta { transition: opacity var(--dur-base); } .tt-video.playing .tt-overlay, .tt-video.playing .tt-progress, .tt-video.playing .tt-duration, .video-frame.playing .video-meta, .cd-video.playing .cd-video-play, .cd-video.playing .cd-video-progress, .cd-video.playing .cd-video-meta { opacity: 0; pointer-events: none; } .cd-video.playing .vid-fs { opacity: 1; pointer-events: auto; } .cd-video { position: relative; } /* Gallery labels overlay the image (bottom gradient) instead of sitting below. */ .ml-img-frame { position: relative; } .ml-img-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 28px 14px 12px; font-size: var(--fs-caption); line-height: 1.3; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%); } /* Fluent Forms inside the dark Get-a-Quote band — match the design. */ .sendquote-section .fluentform .ff-el-input--label label, .sendquote-section .fluentform label { color: var(--paper-100); font-size: var(--fs-body-sm); font-weight: 500; } .sendquote-section .fluentform input[type=text], .sendquote-section .fluentform input[type=email], .sendquote-section .fluentform input[type=tel], .sendquote-section .fluentform textarea { background: var(--paper-50); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-md); color: var(--paper-900); padding: 12px 14px; width: 100%; } .sendquote-section .fluentform input:focus, .sendquote-section .fluentform textarea:focus { outline: none; border-color: var(--green-300); box-shadow: 0 0 0 3px rgba(168,181,142,0.25); } .sendquote-section .fluentform .ff-el-group { margin-bottom: 16px; } .sendquote-section .fluentform .ff-btn-submit, .sendquote-section .fluentform button[type="submit"], .sendquote-section .fluentform .ff_submit_btn_wrapper button { background: var(--paper-50) !important; background-color: var(--paper-50) !important; background-image: none !important; color: var(--green-900) !important; border: none !important; box-shadow: none !important; border-radius: var(--r-pill) !important; padding: 14px 28px !important; font-weight: 600 !important; cursor: pointer; } .sendquote-section .fluentform .ff-btn-submit:hover, .sendquote-section .fluentform button[type="submit"]:hover { background: #fff !important; } .sendquote-section .ff-message-success { color: var(--paper-50); font-family: var(--font-display); font-size: var(--fs-h3); } /* Dark-section eyebrow colour (native elements use a class, not inline style). */ .eyebrow-on-dark { color: var(--paper-300); } /* Menu shortcodes render inside a .brxe-shortcode wrapper; make it transparent so the nav items rejoin the flex layout of their container. */ .nav-desktop > .brxe-shortcode, .nav-mobile > .brxe-shortcode, .footer-col > .brxe-shortcode, .footer-legal > .brxe-shortcode { display: contents; } /* Icon shortcode elements: make the Bricks wrapper transparent so the sits directly in its parent (.why-icon, .fit-cta, buttons, etc.). */ .rf-icon-sc { display: contents; } /* Native header brand mark: the SVG sits in a text wrapper — keep it inline. */ .brand-mark > .brxe-text, .footer-logo-mark > .brxe-text { display: inline-flex; } /* Swappable logo images (header + footer). */ /* Bricks renders these as the itself, not a wrapper — the old ".brand-logo-img img" selector matched nothing, so the 1382px logo kept its natural size and overflowed the 72px header bar. */ .brand-logo-img, .brand-logo-img img { height: 34px; width: auto; max-width: 100%; object-fit: contain; display: block; } .footer-logo-img, .footer-logo-img img { height: 40px; width: auto; max-width: 100%; object-fit: contain; display: block; } /* Smooth horizontal drag: disable scroll-snap while dragging (JS adds .dragging). */ [data-drag-scroll].dragging { scroll-snap-type: none !important; scroll-behavior: auto !important; } /* ===== Fluent Forms on the Contact page — match the site design ===== */ .contact-main .contact-form { gap: 20px; } .contact-main .contact-form .fluentform { margin: 0; } .contact-main .fluentform .ff-el-group { margin-bottom: 18px; } .contact-main .fluentform .ff-el-input--label { padding-bottom: 6px; } .contact-main .fluentform .ff-el-input--label label { font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.02em; color: var(--fg-2); } .contact-main .fluentform input.ff-el-form-control, .contact-main .fluentform select.ff-el-form-control, .contact-main .fluentform textarea.ff-el-form-control { width: 100% !important; background: var(--paper-0) !important; border: 1px solid var(--border-default) !important; border-radius: var(--r-md) !important; padding: 12px 14px !important; height: auto !important; min-height: 46px; font-size: var(--fs-body) !important; color: var(--fg-1) !important; font-family: inherit !important; box-shadow: none !important; line-height: 1.4 !important; } .contact-main .fluentform textarea.ff-el-form-control { min-height: 110px !important; resize: vertical; } .contact-main .fluentform input.ff-el-form-control:focus, .contact-main .fluentform select.ff-el-form-control:focus, .contact-main .fluentform textarea.ff-el-form-control:focus { outline: none !important; border-color: var(--green-600) !important; box-shadow: 0 0 0 3px rgba(64,85,42,0.12) !important; } .contact-main .fluentform .ff-el-group.ff_submit_btn_wrapper { margin-top: 4px; margin-bottom: 0; } .contact-main .fluentform .ff-btn-submit { background: var(--green-700) !important; color: var(--paper-50) !important; border: none !important; border-radius: 999px !important; padding: 13px 30px !important; height: auto !important; font-weight: 600 !important; font-size: var(--fs-body) !important; font-family: inherit !important; cursor: pointer; box-shadow: none !important; line-height: 1.2 !important; transition: background var(--dur-base) var(--ease-standard); } .contact-main .fluentform .ff-btn-submit:hover { background: var(--green-600) !important; } .contact-main .fluentform .ff-message-success { background: var(--green-100); border: 1px solid var(--green-600); color: var(--green-700); padding: 16px 18px; border-radius: var(--r-md); font-size: var(--fs-body-sm); line-height: var(--lh-body); } .contact-main .fluentform .ff-el-is-error .ff-el-form-control { border-color: #c0392b !important; } .contact-main .fluentform .text-danger, .contact-main .fluentform .error-text { color: #c0392b; font-size: var(--fs-caption); } /* Name fields two-up, consistent gaps */ .contact-main .fluentform .ff-name-field-wrapper { gap: 16px; } .contact-main .fluentform .ff-t-container { gap: 16px; } /* Contact sidebar promise block sits on a dark sage bg — make its sub-text legible. */ .aside-promise .muted { color: var(--paper-200); } .aside-promise-h { color: var(--paper-50); } /* Fit cards are now full blocks (whole card clickable), not divs with an inner CTA link. Keep the card's own typography instead of link styling. */ a.fit-card { text-decoration: none; color: inherit; } a.fit-card:hover { text-decoration: none; } a.fit-card .fit-title, a.fit-card .fit-summary, a.fit-card .fit-detail { color: inherit; } a.fit-card:hover .fit-cta { color: var(--green-600); } /* ===== Collection slider (homepage "Five families, forty years of weaving") Restyled: photo on top, heading + copy underneath, three cards per view. sections.css switches to a side-by-side 1.4fr/1fr grid at >=900px and dims every card except the centred one — both are overridden here. ===== */ .coll-card { flex: 0 0 calc((100% - 48px) / 3); /* 3 across, 24px gap */ scroll-snap-align: start; grid-template-columns: 1fr; /* stacked: photo above, body below */ opacity: 1; /* no dimming: all three read equally */ transform: none; background: var(--paper-50); border: 1px solid var(--border-subtle); } .coll-card.active { transform: none; box-shadow: var(--shadow-sm); } .coll-card:hover { box-shadow: var(--shadow-md); } /* Photo back to a fixed 16:9 block (sections.css stretches it to full card height with !important for the side-by-side variant). */ .coll-photo .ph.ph-r-16-9 { aspect-ratio: 16 / 9 !important; height: auto !important; } /* Breathing room so the hover shadow is not clipped by overflow-x. */ .coll-track { padding-left: 4px; padding-right: 4px; margin-left: -4px; margin-right: -4px; } /* Type scaled down for the narrower card. */ .coll-body { padding: 22px 24px 26px; gap: 6px; } .coll-name { font-size: 24px; margin: 2px 0; } .coll-tag { font-size: 15px; margin: 0 0 10px; max-width: none; } @media (max-width: 1100px) { .coll-card { flex: 0 0 calc((100% - 24px) / 2); } /* 2 across */ } @media (max-width: 700px) { .coll-card { flex: 0 0 86%; } /* 1 across */ .coll-name { font-size: 22px; } .coll-body { padding: 20px 20px 24px; } } /* ===== Stretched links (replaces the old inline onclick="location.href=…") The card's title (or its CTA) is a real ; its ::after overlay makes the whole card clickable while keeping keyboard focus, middle-click and "copy link address" working — none of which inline onclick supported. ===== */ .coll-card, .coll-list-card, .blog-card, .blog-feature, .job-card { position: relative; } .rf-stretch { text-decoration: none; color: inherit; } .rf-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Anything else clickable in the card has to sit above that overlay. */ .coll-card a:not(.rf-stretch), .coll-list-card a:not(.rf-stretch), .blog-card a:not(.rf-stretch), .blog-feature a:not(.rf-stretch), .job-card a:not(.rf-stretch), .coll-card button, .coll-list-card button, .blog-card button, .blog-feature button, .job-card button { position: relative; z-index: 2; } /* Keyboard focus has to be visible now that the title is the link. */ .rf-stretch:focus-visible { outline: none; } .rf-stretch:focus-visible::after { outline: 2px solid var(--green-600); outline-offset: 3px; border-radius: var(--r-md); } /* ===== Fit-for-us sales lead photo — fixed frame, image fits inside ===== Two earlier attempts both went wrong: object-fit:cover cropped faces off, then height:auto let every photo set its own height so the four pages each had a differently shaped card. The frame is now a fixed 4:5 box — the same portrait ratio the rest of the design uses — and the photo is contained inside it, so the layout is identical on all four pages and nothing is cut. */ .fit-sales { align-items: start; } .fit-sales-photo { aspect-ratio: 4 / 5; background: var(--green-800); border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; } .fit-sales-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; min-height: 0; max-height: none; } /* One column below 800px: cap the frame so a portrait does not fill the screen. */ @media (max-width: 800px) { .fit-sales-photo { aspect-ratio: auto; max-width: 260px; height: 325px; } } /* ===== Footer contact rows + social buttons — more room, larger icons ===== */ .footer-contact { gap: 14px; } .footer-contact .contact-row { align-items: center; gap: 12px; padding: 3px 0; } /* Bricks wraps the row content in a

; make that the flex line. */ .footer-contact .contact-row p { display: flex; align-items: center; gap: 12px; margin: 0; line-height: 1.45; } .footer-contact .contact-row svg { width: 20px; height: 20px; flex: 0 0 20px; stroke-width: 1.6; color: var(--green-700); transition: color 160ms var(--ease-standard); } .footer-contact .contact-row:hover svg { color: var(--green-600); } .footer-socials { gap: 12px; margin-top: 26px; } .footer-social { width: 44px; height: 44px; } .footer-social svg { width: 20px; height: 20px; } /* ===== Article share row — real links + a copy-to-clipboard button ===== */ .bd-share { gap: 10px 14px; } .bd-share-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 13px; font-family: inherit; color: var(--fg-2); background: var(--paper-50); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); cursor: pointer; text-decoration: none; transition: color 160ms var(--ease-standard), border-color 160ms var(--ease-standard), background 160ms var(--ease-standard); } .bd-share-link:hover { color: var(--green-700); border-color: var(--green-300); background: var(--paper-0); } .bd-share-link svg { flex: 0 0 16px; } .bd-share-link.copied { color: var(--green-700); border-color: var(--green-600); background: var(--green-50); } @media (max-width: 560px) { .bd-share-link span { display: none; } .bd-share-link { padding: 10px; } .bd-share-link[data-copy-link] span { display: inline; } } /* ===== Photo tile with no image ===== A post with no featured image used to render — a broken-image icon. Now the tile renders on its own: a woven-paper texture in the brand palette, so an empty card still looks deliberate. ===== */ .ph.ph-photo.ph-empty { background: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px), var(--paper-300); } .ph.ph-photo.ph-empty::after { display: none; } .ph.ph-photo.ph-empty .ph-cap { color: var(--paper-800); text-shadow: none; } /* Slider arrows: visible affordance, dimmed at the end of the track. */ .coll-controls { flex-wrap: wrap; gap: 16px; } .slider-nav-btn:disabled { opacity: .35; cursor: default; } .slider-nav-btn:disabled:hover { background: inherit; color: inherit; } /* ============================================================ COLLECTION DETAIL — redesigned layout 01 intro · 02 products · 03 CTA · 04 comparison · 05 export 06 video · 07 other collections ============================================================ */ .cdp-top { padding-bottom: 0; } /* ---- 01 intro: copy left, landscape photo right ---- */ .cdp-intro-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; } .cdp-intro-h { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--fg-1); margin: 6px 0 22px; } .cdp-intro-p { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); margin: 0 0 16px; max-width: 54ch; } .cdp-intro-photo .ph { border-radius: var(--r-lg); } @media (max-width: 900px) { .cdp-intro-grid { grid-template-columns: 1fr; gap: 32px; } } /* ---- 02 products: 4 across, 2 rows of 8 ---- */ .cdp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; } .cdp-card { position: relative; display: flex; flex-direction: column; background: var(--paper-50); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base); } .cdp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-300); } .cdp-card-photo { position: relative; overflow: hidden; } .cdp-card-photo .ph { border-radius: 0; } .cdp-card-photo .ph-img { transition: transform var(--dur-slow) var(--ease-standard); } .cdp-card:hover .cdp-card-photo .ph-img { transform: scale(1.05); } .cdp-card-num { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; letter-spacing: 0.1em; color: var(--paper-100); background: rgba(20,28,18,0.55); padding: 5px 9px; border-radius: var(--r-pill); } .cdp-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; } .cdp-card-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0; color: var(--fg-1); } .cdp-card-name a { color: inherit; text-decoration: none; } .cdp-card-sku { font-size: 11px; letter-spacing: 0.08em; color: var(--fg-3); } @media (max-width: 1100px) { .cdp-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .cdp-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 460px) { .cdp-grid { grid-template-columns: 1fr; } } /* ---- 04 comparison panel ---- */ .cdw-panel { margin-top: 32px; background: var(--green-800); border-radius: var(--r-2xl); padding: 26px; display: flex; flex-direction: column; gap: 10px; } .cdw-head, .cdw-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; align-items: center; } .cdw-head { padding: 4px 22px 12px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-200); } .cdw-head .cdw-us { color: var(--paper-50); } .cdw-row { background: var(--paper-50); border-radius: var(--r-pill); padding: 15px 22px; } .cdw-feature { font-size: var(--fs-body-sm); color: var(--fg-1); } .cdw-us, .cdw-other { text-align: center; font-weight: 700; font-size: var(--fs-body); } .cdw-us { color: var(--green-700); } .cdw-other { color: var(--fg-3); font-weight: 500; } @media (max-width: 700px) { .cdw-panel { padding: 16px; border-radius: var(--r-xl); } .cdw-head, .cdw-row { grid-template-columns: 1.3fr .85fr .85fr; gap: 8px; } .cdw-head { padding: 4px 14px 10px; font-size: 10px; } .cdw-row { padding: 12px 14px; border-radius: var(--r-lg); } .cdw-feature { font-size: var(--fs-caption); } .cdw-us, .cdw-other { font-size: var(--fs-body-sm); } } /* ---- 05 export market: centred headline + 16:9 map ---- */ .cdp-export-head { text-align: center; max-width: 940px; margin: 0 auto; } .cdp-export-head .eyebrow { justify-content: center; } .cdp-export-h { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 6px 0 18px; color: var(--fg-1); } .cdp-export-list { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); margin: 0; } .cdp-export-map { margin-top: 36px; } .cdp-export-map .ph { border-radius: var(--r-lg); } .cdp-export-map .ph.ph-photo::after { display: none; } /* ============================================================ PRODUCT DETAIL breadcrumb · gallery + spec table + video · description · reusable blocks · CTA · more from this collection ============================================================ */ .pds-top { padding-bottom: 0; } .pds-main { padding-top: 28px; } .pds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 940px) { .pds-grid { grid-template-columns: 1fr; gap: 32px; } } /* ---- gallery slider ---- */ .pgal { position: relative; } .pgal-stage { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-200); } .pgal-slide { margin: 0; display: none; } .pgal-slide.on { display: block; } .pgal-stage .ph { border-radius: 0; } .pgal-stage .ph.ph-photo::after { display: none; } .pgal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(250,246,236,.92); border: 1px solid var(--border-default); color: var(--fg-1); cursor: pointer; z-index: 3; transition: background var(--dur-base), color var(--dur-base); } .pgal-nav:hover { background: var(--green-700); color: var(--paper-50); border-color: var(--green-700); } .pgal-prev { left: 14px; } .pgal-next { right: 14px; } .pgal-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } .pgal-thumb { padding: 0; border: 2px solid transparent; border-radius: var(--r-md); overflow: hidden; cursor: pointer; background: var(--paper-200); line-height: 0; transition: border-color var(--dur-base); } .pgal-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .pgal-thumb.on { border-color: var(--green-600); } .pgal-thumb:hover { border-color: var(--green-300); } /* ---- spec table ---- */ .pds-h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 2.9vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0; color: var(--fg-1); } .pds-rule { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--green-600); margin: 18px 0 24px; } .pds-table { display: flex; flex-direction: column; } .pds-row { display: grid; grid-template-columns: 210px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); align-items: baseline; } .pds-row:first-child { border-top: 1px solid var(--border-subtle); } .pds-label { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-1); } .pds-label-alert { color: var(--danger); } .pds-value { font-size: var(--fs-body-sm); color: var(--fg-2); } .pds-v-accent { color: var(--green-700); font-weight: 700; } .pds-v-alert { color: var(--danger); font-weight: 700; } @media (max-width: 560px) { .pds-row { grid-template-columns: 1fr; gap: 3px; } } .pds-video { position: relative; margin-top: 26px; border-radius: var(--r-lg); overflow: hidden; } .pds-video .ph { border-radius: 0; } .pds-video-cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: rgba(20,28,18,.66); color: var(--paper-100); padding: 6px 12px; border-radius: var(--r-pill); font-size: 11px; letter-spacing: .06em; } .pds-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } /* ---- description ---- */ .pds-desc-body { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); } .pds-desc-body h2, .pds-desc-body h3 { color: var(--fg-1); margin: 32px 0 12px; } .pds-desc-body h2:first-child, .pds-desc-body h3:first-child { margin-top: 0; } .pds-desc-body p { margin: 0 0 16px; } .pds-desc-body ul, .pds-desc-body ol { margin: 0 0 16px; padding-left: 22px; } .pds-desc-body li { margin-bottom: 7px; } .pds-desc-body img { max-width: 100%; height: auto; border-radius: var(--r-lg); } .pds-desc-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; } .pds-desc-body th, .pds-desc-body td { padding: 10px 12px; border: 1px solid var(--border-default); text-align: left; font-size: var(--fs-body-sm); } .pds-desc-body th { background: var(--paper-100); font-weight: 700; } /* ============================================================ REUSABLE CONTENT BLOCKS ============================================================ */ .rfb-title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 6px 0 18px; color: var(--fg-1); } .rfb.dark .rfb-title { color: var(--paper-50); } .rfb-body { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); } .rfb.dark .rfb-body { color: var(--paper-200); } .rfb-body > *:first-child { margin-top: 0; } .rfb-body > *:last-child { margin-bottom: 0; } .rfb-body p { margin: 0 0 15px; } .rfb-body ul, .rfb-body ol { margin: 0 0 15px; padding-left: 22px; } .rfb-body li { margin-bottom: 7px; } .rfb-body img { max-width: 100%; height: auto; border-radius: var(--r-lg); } .rfb-body a { color: var(--green-700); } .rfb.dark .rfb-body a { color: var(--green-200); } .rfb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .rfb-photo .ph { border-radius: var(--r-lg); } .rfb-photo-wide { margin-bottom: 32px; } .rfb-text .rfb-copy { max-width: var(--container-default); } @media (max-width: 900px) { .rfb-split { grid-template-columns: 1fr; gap: 28px; } /* Keep the photo above the copy on mobile whichever side it sits on. */ .rfb-flip .rfb-photo { order: -1; } } /* ===== Fullscreen video ===== .ph-img sets object-fit:cover so a photo fills its tile. In fullscreen the browser stretches the