/* Prestige Cooling Solutions — one stylesheet, one pass. Written to match the plugin's own markup, so nothing here depends on Elementor's widget wrappers. Every rule is prefixed .pcs- and states its own colours, so Hello's reset and Elementor's kit can't repaint anything. */ /* The phone menu sits off-screen when closed; without this it lets the page scroll sideways. clip (not hidden) keeps sticky positioning working. */ html, body { overflow-x: clip; } :root { --pc-navy: #153357; --pc-deep: #0e2440; --pc-gold: #b69460; --pc-gold-pale: #e6d5b0; --pc-gold-deep: #8d6f3f; --pc-ink: #17202b; --pc-soft: #5c6673; --pc-rule: #dde2e8; --pc-cool: #eef3f8; --pc-paper: #fff; --pc-sans: Manrope, "Segoe UI", system-ui, sans-serif; --pc-wrap: 1180px; --pc-gutter: clamp(20px, 4vw, 40px); --pc-sec: clamp(56px, 8vw, 104px); --pc-radius: 6px; } /* ---------- base ---------- */ body.pcs-site { font-family: var(--pc-sans); font-size: 16.5px; line-height: 1.6; color: var(--pc-ink); background: var(--pc-paper); -webkit-font-smoothing: antialiased; } .pcs-site :is(h1, h2, h3, h4) { font-family: var(--pc-sans); font-weight: 800; letter-spacing: -0.015em; line-height: 1.12; margin: 0; color: inherit; text-wrap: balance; } /* stops a single word being left on a line of its own */ .pcs-site :is(p, li, dd, figcaption, legend) { text-wrap: pretty; } .pcs-site h1 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); } .pcs-site h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); } .pcs-site h3 { font-size: 1.2rem; font-weight: 700; } .pcs-site p, .pcs-site ul, .pcs-site ol, .pcs-site dl, .pcs-site figure { margin: 0; } .pcs-site ul, .pcs-site ol { padding: 0; list-style: none; } .pcs-site img { display: block; max-width: 100%; height: auto; } .pcs-site a { color: inherit; text-decoration: none; } .pcs-site :focus-visible { outline: 3px solid var(--pc-gold); outline-offset: 3px; border-radius: 3px; } .pcs-site .pcs-ico { width: 1.1em; height: 1.1em; flex: none; } .pcs-site .pcs-wrap { width: min(var(--pc-wrap), 100% - (var(--pc-gutter) * 2)); margin-inline: auto; } .pcs-site section { padding-block: var(--pc-sec); } .pcs-site section.pcs-hero { padding-block: clamp(36px, 5vw, 76px); } .pcs-site .pcs-sec-sub { margin-top: 12px; color: var(--pc-soft); max-width: 62ch; } .pcs-site .pcs-lead-p { font-size: 1.1rem; } .pcs-site p + p { margin-top: 14px; } /* Hello and Elementor both paint buttons cerise, from selectors that outrank anything sane (.elementor .elementor-widget button). The paint — and only the paint — is forced off here. Padding and type are never touched on hover, because that is what made buttons jump about. */ .pcs-site :where(button, [type=button], [type=submit]) { appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; font: inherit; padding: 0; margin: 0; cursor: pointer; white-space: normal; text-align: inherit; } .pcs-site :is(button, [type=button], [type=submit]):not(.pcs-btn):not(.pcs-paint), .pcs-site :is(button, [type=button], [type=submit]):not(.pcs-btn):not(.pcs-paint):is(:hover, :focus, :active) { background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; } /* Same story: the theme sets a display on buttons, which beats the browser's own [hidden] rule, so hidden things stay on screen. */ .pcs-site [hidden] { display: none !important; } .e-con.pcs-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --margin-top: 0px; --margin-bottom: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; } .e-con.pcs-con > .elementor-widget { width: 100%; margin: 0 !important; } /* ---------- buttons ---------- */ .pcs-site .pcs-btn, .pcs-site .pcs-paint { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 26px; border-radius: var(--pc-radius); font-weight: 700; font-size: 1rem; border: 2px solid transparent; transition: background-color .2s, color .2s, border-color .2s; white-space: nowrap; } .pcs-site .pcs-btn-gold, .pcs-site button.pcs-btn-gold { background: var(--pc-gold); border-color: var(--pc-gold); color: var(--pc-deep); } .pcs-site .pcs-btn-gold:is(:hover, :focus-visible) { background: var(--pc-gold-pale); border-color: var(--pc-gold-pale); color: var(--pc-deep); } .pcs-site .pcs-btn-navy, .pcs-site button.pcs-btn-navy { background: var(--pc-navy); border-color: var(--pc-navy); color: #fff; } .pcs-site .pcs-btn-navy:is(:hover, :focus-visible) { background: var(--pc-deep); border-color: var(--pc-deep); color: #fff; } .pcs-site .pcs-btn-ghost { border-color: currentColor; } .pcs-site .pcs-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 30px; } .pcs-site .pcs-hero .pcs-cta-row { margin-top: 38px; } .pcs-site .pcs-or { color: var(--pc-soft); font-size: .98rem; } .pcs-site .pcs-or a { font-weight: 700; color: var(--pc-navy); border-bottom: 2px solid var(--pc-gold); } /* any dark section: the phone link has to be white, not navy on navy */ .pcs-site .pcs-band-navy .pcs-or, .pcs-site .pcs-band-deep .pcs-or, .pcs-site .pcs-hero .pcs-or, .pcs-site .pcs-phero .pcs-or, .pcs-site .pcs-parallax .pcs-or, .pcs-site .pcs-finish .pcs-or { color: rgba(255, 255, 255, .78); } .pcs-site :is(.pcs-band-navy, .pcs-band-deep, .pcs-hero, .pcs-phero, .pcs-parallax, .pcs-finish) .pcs-or a { color: #fff; border-bottom-color: var(--pc-gold); } .pcs-site :is(.pcs-band-navy, .pcs-band-deep, .pcs-hero, .pcs-phero, .pcs-parallax, .pcs-finish) .pcs-or a:is(:hover, :focus-visible) { color: var(--pc-gold-pale); } .pcs-site .pcs-band-gold .pcs-or { color: var(--pc-deep); } .pcs-site .pcs-band-gold .pcs-or a { color: var(--pc-deep); border-bottom-color: var(--pc-deep); } /* ---------- header ---------- */ .pcs-site .pcs-head { position: sticky; top: 0; z-index: 100; background: var(--pc-navy); transition: box-shadow .2s, background-color .2s; } body.admin-bar .pcs-head { top: 32px; } .pcs-site .pcs-head.pcs-stuck { background: var(--pc-deep); box-shadow: 0 10px 26px -18px rgba(3, 12, 26, .9); } .pcs-site .pcs-bar-in { width: min(1320px, 100% - (var(--pc-gutter) * 2)); margin-inline: auto; display: flex; align-items: center; gap: 26px; padding-block: 12px; } .pcs-site .pcs-logo img { height: 52px !important; width: auto; } .pcs-site .pcs-menu { margin-left: auto; } .pcs-site .pcs-menu > ul { display: flex; align-items: center; gap: 28px; } .pcs-site .pcs-menu a { color: rgba(255, 255, 255, .86); font-size: .97rem; font-weight: 500; padding: 8px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } .pcs-site .pcs-menu a:is(:hover, :focus-visible), .pcs-site .pcs-menu a[aria-current] { color: #fff; border-bottom-color: var(--pc-gold); } .pcs-site .pcs-menu li { position: relative; } .pcs-site .pcs-menu .pcs-sub-toggle { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 8px 0; background: none; background-color: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; font-family: inherit; font-size: .97rem; font-weight: 500; line-height: inherit; letter-spacing: inherit; text-transform: none; color: rgba(255, 255, 255, .86); cursor: pointer; transition: color .2s, border-color .2s; } .pcs-site .pcs-menu .pcs-sub-toggle:is(:hover, :focus-visible), .pcs-site .pcs-menu .pcs-sub-toggle[aria-expanded=true], .pcs-site .pcs-menu .pcs-sub-toggle[data-on] { background: none; background-color: transparent; color: #fff; border-bottom-color: var(--pc-gold); } .pcs-site .pcs-caret { width: 15px; height: 15px; transition: transform .2s; } .pcs-site .pcs-sub-toggle[aria-expanded=true] .pcs-caret { transform: rotate(180deg); } .pcs-site .pcs-sub { position: absolute; display: block; top: calc(100% + 14px); left: -14px; width: max-content; min-width: 236px; background: var(--pc-deep); border: 1px solid rgba(255, 255, 255, .12); border-top: 3px solid var(--pc-gold); border-radius: var(--pc-radius); box-shadow: 0 26px 50px -24px rgba(4, 12, 24, .8); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; z-index: 5; } .pcs-site .pcs-sub li { display: block; margin: 0; } .pcs-has-sub:is(:hover, :focus-within) .pcs-sub, .pcs-sub-toggle[aria-expanded=true] + .pcs-sub { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s; } .pcs-site .pcs-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .pcs-site .pcs-sub a { display: block; width: 100%; padding: 11px 14px; border-radius: 4px; border: 0; color: rgba(255, 255, 255, .88); font-size: .96rem; font-weight: 600; white-space: nowrap; } .pcs-site .pcs-sub a:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .09); color: #fff; border-bottom-color: transparent; } .pcs-site .pcs-sub a[aria-current] { background: var(--pc-gold); color: var(--pc-deep); border-bottom-color: transparent; } .pcs-site .pcs-bar-end { display: flex; align-items: center; gap: 14px; } .pcs-site .pcs-head-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--pc-gold-pale); font-weight: 700; font-size: .97rem; } .pcs-site .pcs-head-tel:is(:hover, :focus-visible) { color: #fff; } .pcs-site .pcs-bar-cta { min-height: 46px; padding: 0 20px; } .pcs-site .pcs-burger { display: none; align-items: center; gap: 9px; height: 46px; padding: 0 14px 0 12px; background: transparent; border: 2px solid rgba(255, 255, 255, .5); border-radius: var(--pc-radius); color: #fff; font-weight: 700; font-size: .95rem; transition: background-color .2s, border-color .2s; } .pcs-site .pcs-burger:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; } .pcs-site .pcs-burger[aria-expanded=true] { background: var(--pc-gold); border-color: var(--pc-gold); color: var(--pc-deep); } /* three vanes, like the louvres on a unit, that fold into a cross */ .pcs-site .pcs-vanes { position: relative; display: block; width: 22px; height: 16px; flex: none; } .pcs-site .pcs-vanes i { position: absolute; left: 0; width: 22px; height: 2.4px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease; } .pcs-site .pcs-vanes i:nth-child(1) { top: 0; } .pcs-site .pcs-vanes i:nth-child(2) { top: 6.8px; } .pcs-site .pcs-vanes i:nth-child(3) { top: 13.6px; } .pcs-site .pcs-burger[aria-expanded=true] .pcs-vanes i:nth-child(1) { transform: translateY(6.8px) rotate(45deg); } .pcs-site .pcs-burger[aria-expanded=true] .pcs-vanes i:nth-child(2) { opacity: 0; } .pcs-site .pcs-burger[aria-expanded=true] .pcs-vanes i:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); } @media (max-width: 1060px) { .pcs-menu, .pcs-site .pcs-bar-cta { display: none; } .pcs-site .pcs-burger { display: inline-flex; } .pcs-site .pcs-bar-end { margin-left: auto; } } @media (max-width: 782px) { body.admin-bar .pcs-head { top: 46px; } } @media (max-width: 600px) { body.admin-bar .pcs-head { top: 0; } } @media (max-width: 560px) { .pcs-site .pcs-logo img { height: 40px !important; } .pcs-site .pcs-head-tel span { display: none; } .pcs-site .pcs-bar-in { gap: 12px; } } /* ---------- the phone menu ---------- */ .pcs-drawer { position: fixed; left: 0; right: 0; top: var(--pcs-head-bottom, 76px); bottom: 0; z-index: 99; color: #fff; overflow: hidden; background: linear-gradient(165deg, rgba(14, 36, 64, .96) 0%, rgba(21, 51, 87, .94) 45%, rgba(12, 30, 54, .97) 100%); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; } .pcs-site .pcs-drawer.open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; } .pcs-site .pcs-drawer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--pc-gold), transparent); opacity: .7; } /* the crown, ghosted, so the panel is unmistakably theirs */ .pcs-site .pcs-drawer-mark { position: absolute; right: 0; bottom: 0; width: 62%; max-width: 320px; opacity: .06; pointer-events: none; overflow: clip; } .pcs-site .pcs-drawer-mark img { width: 100%; height: auto; } .pcs-site .pcs-drawer-in { box-sizing: border-box; position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; width: min(var(--pc-wrap), 100% - (var(--pc-gutter) * 2)); margin-inline: auto; padding: 10px 0 calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; } .pcs-site .pcs-drawer-in::-webkit-scrollbar { width: 0; height: 0; display: none; } .pcs-site .pcs-drawer nav { margin-top: 0; } .pcs-site .pcs-drawer li { position: relative; opacity: 0; transform: translateX(-10px); transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1); } .pcs-site .pcs-drawer li + li:not(.pcs-drawer-sub)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(230, 213, 176, .3), rgba(255, 255, 255, .04)); } .pcs-site .pcs-drawer.open li { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 55ms); } .pcs-site .pcs-drawer li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(8px, 1.3vh, 13px) 2px; font-size: clamp(1.02rem, 2vh, 1.2rem); font-weight: 600; letter-spacing: -0.01em; color: rgba(255, 255, 255, .92); transition: color .25s ease, padding-left .25s ease; } .pcs-site .pcs-drawer li a span { position: relative; } .pcs-site .pcs-drawer li a span::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px; background: var(--pc-gold); transition: right .35s cubic-bezier(.2, .7, .2, 1); } .pcs-site .pcs-drawer li a:is(:hover, :focus-visible) { color: #fff; padding-left: 8px; } .pcs-site .pcs-drawer li.pcs-drawer-sub a:is(:hover, :focus-visible) { padding-left: 24px; } .pcs-site .pcs-drawer li a:is(:hover, :focus-visible) span::after { right: 0; } .pcs-site .pcs-drawer li a .pcs-ico { width: 18px; height: 18px; color: rgba(230, 213, 176, .5); transition: transform .25s ease, color .25s ease; } .pcs-site .pcs-drawer li a:is(:hover, :focus-visible) .pcs-ico { color: var(--pc-gold); transform: translateX(4px); } .pcs-site .pcs-drawer li a[aria-current] { color: var(--pc-gold-pale); } .pcs-site .pcs-drawer li a[aria-current] span::after { right: 0; } .pcs-site .pcs-drawer-head { padding: clamp(8px, 1.4vh, 14px) 2px 2px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(230, 213, 176, .7); } .pcs-site .pcs-drawer li.pcs-drawer-head + li::before { display: none; } /* the three service pages read as a group through the heading and the indent: no rules or dashes, which only ever looked like stray marks at this size */ .pcs-site .pcs-drawer-sub { position: relative; } .pcs-site .pcs-drawer li.pcs-drawer-sub a { padding-left: 18px; font-size: clamp(.96rem, 1.85vh, 1.1rem); font-weight: 500; color: rgba(255, 255, 255, .84); } .pcs-site .pcs-drawer li.pcs-drawer-sub + li.pcs-drawer-sub::before { content: ""; position: absolute; left: 18px; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(230, 213, 176, .2), rgba(255, 255, 255, .03)); } .pcs-site .pcs-drawer-foot { margin-top: auto; padding-top: clamp(10px, 1.8vh, 20px); display: grid; gap: clamp(6px, 1.1vh, 11px); justify-items: center; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .45s ease .35s, transform .45s ease .35s; } .pcs-site .pcs-drawer.open .pcs-drawer-foot { opacity: 1; transform: none; } .pcs-site .pcs-drawer-foot .pcs-btn { width: 100%; min-height: clamp(44px, 5.8vh, 54px); letter-spacing: .01em; box-shadow: 0 14px 30px -18px rgba(182, 148, 96, .9); } .pcs-site .pcs-drawer-mail { color: rgba(255, 255, 255, .86); font-weight: 500; border-bottom: 1px solid rgba(230, 213, 176, .35); padding-bottom: 2px; } .pcs-site .pcs-drawer-mail:is(:hover, :focus-visible) { color: var(--pc-gold-pale); } .pcs-site .pcs-drawer-note { font-size: .68rem; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } .pcs-site .pcs-social-drawer { margin-top: 4px; color: rgba(230, 213, 176, .8); } html[data-pcs-menu=open] body { overscroll-behavior: contain; } @media (min-width: 1061px) { .pcs-site .pcs-drawer { display: none; } } /* short phones: drop the area line and tighten the rows a touch further */ @media (max-height: 660px) { .pcs-site .pcs-drawer-note { display: none; } .pcs-site .pcs-drawer li a { padding-block: 7px; font-size: .98rem; } .pcs-site .pcs-drawer li.pcs-drawer-sub a { font-size: .94rem; } .pcs-site .pcs-drawer-head { padding-top: 7px; } } @media (prefers-reduced-motion: reduce) { .pcs-site .pcs-drawer li, .pcs-site .pcs-drawer-foot { opacity: 1; transform: none; } } /* ---------- the phone bar that never leaves ---------- */ .pcs-site .pcs-dock { display: none; } @media (max-width: 860px) { body.pcs-site { padding-bottom: 70px; } .pcs-site .pcs-dock { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 98; background: #fff; border-top: 1px solid var(--pc-rule); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -18px rgba(5, 15, 30, .6); } .pcs-site .pcs-dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: var(--pc-radius); font-weight: 700; font-size: .98rem; } .pcs-site .pcs-dock .pcs-dock-call { background: var(--pc-gold); color: var(--pc-deep); } .pcs-site .pcs-dock .pcs-dock-quote { border: 2px solid var(--pc-navy); color: var(--pc-navy); } html[data-pcs-menu=open] .pcs-dock { visibility: hidden; } } /* ---------- bands ---------- */ .pcs-site .pcs-band-navy { background: var(--pc-navy); color: #fff; } .pcs-site .pcs-band-deep { background: var(--pc-deep); color: #fff; } .pcs-site .pcs-band-cool { background: var(--pc-cool); } .pcs-site .pcs-band-gold { background: linear-gradient(120deg, var(--pc-gold) 0%, #c7a877 60%, var(--pc-gold-pale) 100%); color: var(--pc-deep); } .pcs-site .pcs-band-navy h2, .pcs-site .pcs-band-deep h2 { color: #fff; } /* ---------- hero ---------- */ .pcs-site .pcs-hero { background: linear-gradient(160deg, var(--pc-navy) 0%, var(--pc-deep) 100%); color: #fff; } .pcs-site .pcs-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .pcs-site .pcs-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.6rem); } .pcs-site .pcs-gold { color: var(--pc-gold-pale); } .pcs-site .pcs-hero-lead { margin-top: 18px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; color: #fff; } .pcs-site .pcs-hero-sub { margin-top: 10px; color: rgba(255, 255, 255, .76); max-width: 46ch; } .pcs-site .pcs-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; } .pcs-site .pcs-hero-trust li { position: relative; padding-left: 18px; font-size: .92rem; color: rgba(255, 255, 255, .78); } .pcs-site .pcs-hero-trust li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--pc-gold); } .pcs-site .pcs-rating { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: .88rem; color: rgba(255, 255, 255, .7); } .pcs-site .pcs-stars { color: var(--pc-gold); letter-spacing: 2px; } .pcs-site .pcs-hero-right { position: relative; } @media (max-width: 900px) { .pcs-site .pcs-hero-in { grid-template-columns: 1fr; } .pcs-site .pcs-hero-right { order: 2; margin-top: 10px; } } /* ---------- the house (carried over, it earned its keep) ---------- */ .pcs-site .pcs-house { position: relative; max-width: 620px; margin: 0 auto; } .pcs-site .pcs-house-svg { width: 100%; height: auto; display: block; overflow: visible; animation: pcsRise .9s cubic-bezier(.2, .7, .2, 1) both; } .pcs-site .pcs-h-line { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; } .pcs-site .pcs-h-fill { fill: rgba(255, 255, 255, .03); stroke: none; transition: fill .35s ease; } .pcs-site .pcs-h-win { fill: rgba(255, 255, 255, .06); stroke: #fff; stroke-width: 2; opacity: .8; } .pcs-site .pcs-h-unit { fill: var(--pc-gold); stroke: none; transition: fill .3s ease; } .pcs-site .pcs-h-unit-out { fill: none; stroke: var(--pc-gold); stroke-width: 2; } .pcs-site .pcs-h-vane { fill: none; stroke: var(--pc-gold); stroke-width: 1.5; opacity: .7; } .pcs-site .pcs-h-pipe { fill: none; stroke: var(--pc-gold); stroke-width: 2; stroke-dasharray: 4 5; opacity: .8; } .pcs-site .pcs-h-label { fill: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 700; font-family: var(--pc-sans); transition: fill .3s ease; } .pcs-site .pcs-h-hint { fill: rgba(255, 255, 255, .5); font-size: 12px; font-family: var(--pc-sans); } .pcs-site .pcs-room-g { cursor: pointer; outline: none; } .pcs-room-g:is(:hover, :focus-visible) .pcs-h-fill, .pcs-room-g.on .pcs-h-fill { fill: url(#pcsGlow); } .pcs-room-g:is(:hover, :focus-visible) .pcs-h-label, .pcs-room-g.on .pcs-h-label { fill: var(--pc-gold-pale); } .pcs-room-g:is(:hover, .on) .pcs-h-vane { animation: pcsBreeze 1.2s ease-out 1; } .pcs-site .pcs-chips { position: absolute; inset: 0; pointer-events: none; } .pcs-site .pcs-chip { position: absolute; transform: translate(0, 6px); opacity: 0; background: #fff; color: var(--pc-navy); font-size: 12.5px; font-weight: 700; padding: 6px 10px 6px 8px; border-radius: 6px; box-shadow: 0 10px 26px rgba(5, 15, 30, .35); white-space: nowrap; transition: opacity .25s ease, transform .25s ease; display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; cursor: pointer; } .pcs-site .pcs-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pc-gold); } .pcs-site .pcs-chip b { color: var(--pc-gold-deep); } .pcs-site .pcs-chip.on { opacity: 1; transform: translate(0, 0); } .pcs-site .pcs-float { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 10px 14px 10px 10px; box-shadow: 0 16px 40px rgba(5, 15, 30, .4); font-size: 12.5px; line-height: 1.25; color: var(--pc-soft); opacity: 0; animation: pcsSettle .9s cubic-bezier(.2, .7, .2, 1) forwards; } .pcs-site .pcs-float b { display: block; font-size: 17px; font-weight: 800; color: var(--pc-navy); } .pcs-site .pcs-float-i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--pc-cool); color: var(--pc-gold-deep); font-size: 17px; } .pcs-site .pcs-float-a { right: -14px; top: 12%; animation-delay: .5s; } .pcs-site .pcs-float-b { left: -14px; top: 34%; animation-delay: .8s; } @keyframes pcsBreeze { 0% { opacity: .2; transform: translateY(-3px); } 100% { opacity: .7; transform: translateY(0); } } @keyframes pcsSettle { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes pcsRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 620px) { .pcs-site .pcs-float { display: none; } } /* ---------- brands: one quiet line ---------- */ .pcs-site .pcs-brands { padding-block: 0; } .pcs-site .pcs-brands-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px; padding-block: 26px; border-top: 1px solid var(--pc-rule); border-bottom: 1px solid var(--pc-rule); } .pcs-site .pcs-brands-h { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-soft); font-weight: 700; } .pcs-site .pcs-brands ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 26px; margin-left: auto; } .pcs-site .pcs-brands li { position: relative; font-weight: 700; font-size: 1rem; color: var(--pc-navy); } .pcs-site .pcs-brands li + li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--pc-gold); } @media (max-width: 720px) { .pcs-site .pcs-brands-in { justify-content: center; text-align: center; } .pcs-site .pcs-brands ul { margin-left: 0; justify-content: center; gap: 8px 18px; } .pcs-site .pcs-brands li { font-size: .95rem; } .pcs-site .pcs-brands li + li::before { left: -11px; } } /* ---------- tiles ---------- */ .pcs-site .pcs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; } .pcs-site .pcs-tile { display: flex; flex-direction: column; background: var(--pc-navy); color: #fff; border-radius: var(--pc-radius); overflow: hidden; border-bottom: 3px solid var(--pc-gold); transition: transform .2s ease, background-color .25s ease; } .pcs-site .pcs-tile:is(:hover, :focus-visible) { background: var(--pc-deep); transform: translateY(-3px); } .pcs-site .pcs-tile-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .pcs-site .pcs-tile-body { display: block; padding: 18px 20px 22px; } .pcs-site .pcs-tile-t { display: block; font-weight: 800; font-size: 1.1rem; color: var(--pc-gold-pale); } .pcs-site .pcs-tile-s { display: block; margin-top: 6px; font-size: .92rem; color: rgba(255, 255, 255, .75); line-height: 1.45; } @media (max-width: 900px) { .pcs-site .pcs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .pcs-site .pcs-tiles { grid-template-columns: 1fr; } } /* ---------- steps: a rail that fills as you arrive ---------- */ .pcs-site .pcs-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 36px; } .pcs-site .pcs-steps li { position: relative; padding-top: 22px; } .pcs-site .pcs-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #d7dde5; border-radius: 2px; } .pcs-site .pcs-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--pc-gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.5, 0, .2, 1); } .pcs-site .pcs-steps.in li::after { transform: scaleX(1); } .pcs-site .pcs-steps.in li:nth-child(2)::after { transition-delay: .5s; } .pcs-site .pcs-steps.in li:nth-child(3)::after { transition-delay: 1s; } .pcs-site .pcs-steps.in li:nth-child(4)::after { transition-delay: 1.5s; } .pcs-site .pcs-step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .pcs-site .pcs-step-n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--pc-soft); font-weight: 800; box-shadow: inset 0 0 0 2px #d7dde5; transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; } .pcs-site .pcs-step-ico { color: #c2cbd6; transition: color .4s ease, transform .4s ease; } .pcs-site .pcs-step-ico .pcs-ico { width: 34px; height: 34px; } .pcs-site .pcs-steps.in .pcs-step-n { background: var(--pc-navy); color: #fff; box-shadow: inset 0 0 0 2px var(--pc-navy); } .pcs-site .pcs-steps.in .pcs-step-ico { color: var(--pc-gold-deep); } .pcs-site .pcs-steps.in li:nth-child(2) :is(.pcs-step-n, .pcs-site .pcs-step-ico) { transition-delay: .5s; } .pcs-site .pcs-steps.in li:nth-child(3) :is(.pcs-step-n, .pcs-site .pcs-step-ico) { transition-delay: 1s; } .pcs-site .pcs-steps.in li:nth-child(4) :is(.pcs-step-n, .pcs-site .pcs-step-ico) { transition-delay: 1.5s; } .pcs-site .pcs-steps li:hover .pcs-step-ico { transform: translateY(-3px); } .pcs-site .pcs-steps h3 { color: var(--pc-navy); } .pcs-site .pcs-steps p { margin-top: 8px; color: var(--pc-soft); font-size: .97rem; } .pcs-site .pcs-steps-dots { display: none; } @media (max-width: 860px) { .pcs-site .pcs-steps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pc-gutter); margin-inline: calc(-1 * var(--pc-gutter)); padding: 0 var(--pc-gutter) 6px; scrollbar-width: none; } .pcs-site .pcs-steps::-webkit-scrollbar { display: none; } .pcs-site .pcs-steps li { flex: 0 0 82%; scroll-snap-align: start; background: #fff; border-radius: var(--pc-radius); padding: 22px; } .pcs-site .pcs-steps li::before, .pcs-site .pcs-steps li::after { left: 22px; right: 22px; top: 0; } .pcs-site .pcs-steps-dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; } .pcs-site .pcs-steps-dots button, .pcs-site .pcs-steps-dots button:is(:hover, :focus) { width: 10px; height: 10px; border-radius: 5px; background: #c5cec6; transition: width .25s, background-color .25s; } .pcs-site .pcs-steps-dots button[aria-current=true] { width: 28px; background: var(--pc-navy); } } /* ---------- statement ---------- */ .pcs-site .pcs-statement-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(26px, 5vw, 70px); align-items: start; } .pcs-site .pcs-eyebrow { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--pc-gold-pale); } .pcs-site .pcs-statement-side p { color: rgba(255, 255, 255, .8); } .pcs-site .pcs-statement-side p + p { margin-top: 16px; } .pcs-site .pcs-statement { margin-top: 16px; font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.25; max-width: 24ch; color: #fff; } .pcs-site .pcs-statement-by { margin-top: 16px; color: var(--pc-gold-pale); font-weight: 600; } /* ---------- two columns, splits, photos ---------- */ .pcs-site .pcs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); } .pcs-site .pcs-two p { color: var(--pc-soft); margin-top: 14px; } .pcs-site .pcs-two h2 { color: var(--pc-navy); } .pcs-site .pcs-band-navy .pcs-two p, .pcs-site .pcs-band-deep .pcs-two p { color: rgba(255, 255, 255, .8); } .pcs-site .pcs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; } .pcs-site .pcs-split h2 { color: var(--pc-navy); } .pcs-site .pcs-split p { color: var(--pc-soft); margin-top: 14px; } .pcs-site .pcs-photo-frame { border-radius: var(--pc-radius); overflow: hidden; box-shadow: 0 26px 50px -34px rgba(5, 20, 40, .7); } .pcs-site .pcs-photo-frame img { width: 100%; aspect-ratio: var(--pcs-ar, 4 / 3); object-fit: cover; } .pcs-site .pcs-photo-frame figcaption { padding: 12px 16px; background: var(--pc-navy); color: rgba(255, 255, 255, .82); font-size: .88rem; } .pcs-site .pcs-photo-pair { display: grid; gap: 14px; } .pcs-site .pcs-photo-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pc-radius); } @media (max-width: 860px) { .pcs-site .pcs-two, .pcs-site .pcs-split { grid-template-columns: 1fr; } } .pcs-site .pcs-split-sec.pcs-tight { padding-block: clamp(40px, 5vw, 68px); } .pcs-site .pcs-band-navy.pcs-split-sec h2, .pcs-site .pcs-band-navy.pcs-split-sec p { color: #fff; } .pcs-site .pcs-band-navy.pcs-split-sec p { color: rgba(255, 255, 255, .82); } .pcs-site .pcs-split-sec .pcs-split { align-items: center; } /* ---------- ticks ---------- */ .pcs-site .pcs-ticks-h { margin-top: 22px; font-weight: 800; color: var(--pc-navy); } .pcs-site .pcs-ticks { display: grid; gap: 10px; margin-top: 14px; } .pcs-site .pcs-ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--pc-ink); } .pcs-site .pcs-ticks .pcs-ico { margin-top: .25em; color: var(--pc-gold-deep); } .pcs-site .pcs-band-navy .pcs-ticks li, .pcs-site .pcs-band-deep .pcs-ticks li { color: rgba(255, 255, 255, .86); } .pcs-site .pcs-band-cool .pcs-ticks { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ---------- inner page hero ---------- */ .pcs-site .pcs-phero { background: linear-gradient(160deg, var(--pc-navy) 0%, var(--pc-deep) 100%); color: #fff; } .pcs-site .pcs-phero h1 { color: #fff; } .pcs-site .pcs-phero .pcs-hero-lead { margin-top: 16px; color: rgba(255, 255, 255, .82); max-width: 56ch; font-weight: 500; } .pcs-site .pcs-phero-in { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } .pcs-site .pcs-phero.has-photo .pcs-phero-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } @media (max-width: 900px) { .pcs-site .pcs-phero.has-photo .pcs-phero-in { grid-template-columns: 1fr; } } /* a photograph behind the inner page heroes, tinted so the type still reads */ .pcs-site .pcs-phero.has-back { position: relative; isolation: isolate; } .pcs-site .pcs-phero-back { position: absolute; inset: 0; z-index: -2; } .pcs-site .pcs-phero-back img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pcs-focus, 50% 50%); } .pcs-site .pcs-phero.has-back::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(14, 36, 64, .95) 0%, rgba(21, 51, 87, .88) 45%, rgba(21, 51, 87, .62) 100%); } .pcs-site .pcs-phero.has-back { min-height: 360px; display: flex; align-items: center; } .pcs-site .pcs-phero.has-back .pcs-phero-in { width: min(var(--pc-wrap), 100% - (var(--pc-gutter) * 2)); } @media (max-width: 700px) { .pcs-site .pcs-phero.has-back::after { background: linear-gradient(180deg, rgba(14, 36, 64, .93) 0%, rgba(21, 51, 87, .86) 60%, rgba(21, 51, 87, .78) 100%); } /* a heading and one line shouldn't eat two thirds of a phone screen */ .pcs-site .pcs-phero { padding-block: 30px; } .pcs-site .pcs-phero.has-back:not(.has-photo) { min-height: 210px; } .pcs-site .pcs-phero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); } .pcs-site .pcs-phero .pcs-hero-lead { margin-top: 12px; font-size: 1rem; } } /* ---------- FAQ ---------- */ .pcs-site .pcs-faq-intro { margin-top: 12px; color: var(--pc-soft); max-width: 60ch; } .pcs-site .pcs-faq { display: grid; gap: 10px; margin-top: 28px; max-width: 900px; } .pcs-site .pcs-faq details { background: var(--pc-cool); border-left: 4px solid var(--pc-gold); border-radius: var(--pc-radius); transition: background-color .2s; } .pcs-site .pcs-faq details[open] { background: var(--pc-navy); border-left-color: var(--pc-gold-pale); color: #fff; } .pcs-site .pcs-faq summary { list-style: none; cursor: pointer; padding: 16px 60px 16px 20px; position: relative; font-weight: 700; color: var(--pc-navy); } .pcs-site .pcs-faq details[open] summary { color: #fff; } .pcs-site .pcs-faq summary::-webkit-details-marker { display: none; } .pcs-site .pcs-faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: linear-gradient(#fff, #fff) center / 12px 2.4px no-repeat, linear-gradient(#fff, #fff) center / 2.4px 12px no-repeat, var(--pc-navy); transition: transform .25s, background-color .25s; } .pcs-site .pcs-faq details[open] summary::after { transform: rotate(45deg); background: linear-gradient(var(--pc-navy), var(--pc-navy)) center / 12px 2.4px no-repeat, linear-gradient(var(--pc-navy), var(--pc-navy)) center / 2.4px 12px no-repeat, var(--pc-gold-pale); } .pcs-site .pcs-faq details p { padding: 0 20px 20px; color: rgba(255, 255, 255, .84); max-width: 70ch; } /* ---------- reviews ---------- */ .pcs-site .pcs-placeholder-note { display: inline-block; background: #fbf1e2; color: #8a5a1f; font-size: .85rem; font-weight: 700; padding: 6px 12px; border-radius: 3px; } .pcs-site .pcs-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; } .pcs-site .pcs-review { background: var(--pc-cool); border-top: 4px solid var(--pc-gold); border-radius: var(--pc-radius); padding: 24px; } .pcs-site .pcs-review blockquote { margin-top: 12px; color: var(--pc-soft); font-style: italic; } .pcs-site .pcs-review-by { margin-top: 14px; font-weight: 700; color: var(--pc-navy); font-size: .92rem; } @media (max-width: 900px) { .pcs-site .pcs-reviews { grid-template-columns: 1fr; } } /* ---------- contact ---------- */ .pcs-site .pcs-contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 48px); align-items: start; } .pcs-site .pcs-contact-card { background: var(--pc-cool); border-radius: var(--pc-radius); padding: clamp(24px, 3vw, 36px); } .pcs-site .pcs-contact-card .pcs-foot-h { margin-top: 20px; color: var(--pc-navy); } .pcs-site .pcs-contact-card .pcs-foot-h:first-child { margin-top: 0; } .pcs-site .pcs-contact-big { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; } .pcs-site .pcs-contact-big a { color: var(--pc-navy); } .pcs-site .pcs-contact-card a { color: var(--pc-navy); font-weight: 600; } /* long addresses break at the @ and the dots rather than dropping one letter */ .pcs-site .pcs-contact-mail a, .pcs-site .pcs-drawer-mail { overflow-wrap: anywhere; word-break: normal; hyphens: none; } /* in the footer the address gets its own line rather than breaking mid-word */ .pcs-site .pcs-foot a[href^="mailto"] { display: inline-block; max-width: 100%; overflow-wrap: normal; word-break: keep-all; font-size: .95rem; } .pcs-site .pcs-contact-mail { font-size: clamp(.92rem, 3.4vw, 1.05rem); } .pcs-site .pcs-panel-navy { background: var(--pc-navy); color: #fff; border-radius: var(--pc-radius); padding: clamp(24px, 3vw, 40px); } .pcs-site .pcs-panel-navy h2 { color: #fff; } .pcs-site .pcs-panel-navy p { margin-top: 14px; color: rgba(255, 255, 255, .8); } @media (max-width: 860px) { .pcs-site .pcs-contact-grid { grid-template-columns: 1fr; } } /* ---------- facts row ---------- */ .pcs-site .pcs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .pcs-site .pcs-facts h3 { color: var(--pc-navy); } .pcs-site .pcs-facts p { margin-top: 10px; color: var(--pc-soft); font-size: .97rem; } @media (max-width: 860px) { .pcs-site .pcs-facts { grid-template-columns: 1fr; } } /* ---------- the closing starter ---------- */ .pcs-site .pcs-finish { position: relative; background: linear-gradient(135deg, var(--pc-deep) 0%, var(--pc-navy) 55%, #1c4570 100%); color: #fff; overflow: hidden; } .pcs-site .pcs-finish::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(182, 148, 96, .08) 0 2px, transparent 2px 22px); pointer-events: none; } .pcs-site .pcs-finish-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .pcs-site .pcs-finish h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); } .pcs-site .pcs-finish h2 span { color: var(--pc-gold-pale); } .pcs-site .pcs-finish-sub { margin-top: 14px; color: rgba(255, 255, 255, .8); max-width: 44ch; } .pcs-site .pcs-finish-call { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 1.05rem; font-weight: 700; color: var(--pc-gold-pale); } .pcs-finish-call:is(:hover, :focus-visible) { color: #fff; } .pcs-site .pcs-finish-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .pcs-site .pcs-finish-card { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: var(--pc-radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: #fff; transition: background-color .2s, transform .2s, border-color .2s; } .pcs-site .pcs-finish-card:is(:hover, :focus-visible) { background: var(--pc-gold); border-color: var(--pc-gold); color: var(--pc-deep); transform: translateY(-3px); } .pcs-site .pcs-finish-card .pcs-fc-ico { width: 34px; height: 34px; color: var(--pc-gold); transition: color .2s; } .pcs-site .pcs-finish-card:hover .pcs-fc-ico { color: var(--pc-deep); } .pcs-site .pcs-fc-t { font-weight: 800; } .pcs-site .pcs-fc-s { font-size: .88rem; color: rgba(255, 255, 255, .72); } .pcs-site .pcs-finish-card:hover .pcs-fc-s { color: rgba(14, 36, 64, .78); } .pcs-site .pcs-finish-note { grid-column: 1 / -1; margin-top: 6px; font-size: .9rem; color: rgba(255, 255, 255, .6); } @media (max-width: 900px) { .pcs-site .pcs-finish-in { grid-template-columns: 1fr; } .pcs-site .pcs-finish-cards { grid-template-columns: 1fr; } } /* ---------- the planner ---------- */ /* the planner isn't inside .pcs-wrap, so it carries its own gutter */ .pcs-site .pcs-quote { width: min(900px, 100% - (var(--pc-gutter) * 2)); margin-inline: auto; } .pcs-site .pcs-progress { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 30px; } .pcs-site .pcs-progress li { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-soft); font-weight: 700; opacity: .5; } .pcs-site .pcs-progress li.on { opacity: 1; color: var(--pc-navy); } .pcs-site .pcs-progress li.done { opacity: .8; } .pcs-site .pcs-q { color: var(--pc-navy); } .pcs-site .pcs-q-sub { margin-top: 10px; color: var(--pc-soft); } .pcs-site .pcs-cards { display: grid; gap: 14px; margin-top: 26px; } .pcs-site .pcs-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pcs-site .pcs-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pcs-site .pcs-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 20px; background: #fff; border: 2px solid var(--pc-rule); border-radius: var(--pc-radius); transition: border-color .2s, box-shadow .2s, transform .15s; } .pcs-site .pcs-card:is(:hover, :focus-visible) { border-color: var(--pc-gold); box-shadow: 0 16px 30px -24px rgba(5, 20, 40, .8); transform: translateY(-2px); } .pcs-site .pcs-card.on { border-color: var(--pc-navy); box-shadow: inset 0 0 0 1px var(--pc-navy); } .pcs-site .pcs-card-icon { display: block; width: 34px; height: 34px; color: var(--pc-gold-deep); } .pcs-site .pcs-card-icon svg { width: 100%; height: 100%; } .pcs-site .pcs-card-t { font-weight: 800; color: var(--pc-navy); } .pcs-site .pcs-card-s { font-size: .9rem; color: var(--pc-soft); line-height: 1.4; } .pcs-site .pcs-rooms { display: grid; gap: 18px; margin-top: 24px; } .pcs-site .pcs-room { background: var(--pc-cool); border-radius: var(--pc-radius); padding: 20px; } .pcs-site .pcs-room-n { font-weight: 800; color: var(--pc-navy); } .pcs-site .pcs-room-missing { box-shadow: inset 0 0 0 2px #b3261e; } .pcs-site .pcs-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .pcs-site .pcs-label { display: block; margin-top: 14px; font-weight: 600; color: var(--pc-navy); } .pcs-site .pcs-label span { font-weight: 400; color: var(--pc-soft); } .pcs-site :is(.pcs-select, .pcs-input) { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 1rem; color: var(--pc-ink); background: #fff; border: 1.5px solid #b9c3cf; border-radius: var(--pc-radius); padding: 12px 14px; min-height: 50px; } .pcs-site textarea.pcs-input { min-height: 110px; resize: vertical; } .pcs-site .pcs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; } .pcs-site .pcs-back { margin-top: 22px; } .pcs-site .pcs-link { color: var(--pc-navy); font-weight: 700; border-bottom: 2px solid var(--pc-gold); } .pcs-site .pcs-plan-card { background: var(--pc-navy); color: #fff; border-radius: var(--pc-radius); padding: clamp(24px, 3vw, 38px); border-top: 4px solid var(--pc-gold); } .pcs-site .pcs-plan-label { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-gold-pale); font-weight: 700; } .pcs-site .pcs-plan-summary { margin-top: 10px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; color: #fff; } .pcs-site .pcs-plan-lines { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); } .pcs-site .pcs-plan-lines dt { color: rgba(255, 255, 255, .62); } .pcs-site .pcs-plan-lines dd { margin: 0; font-weight: 600; } .pcs-site .pcs-plan-note { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .78); font-size: .95rem; } .pcs-site .pcs-form { margin-top: 28px; background: var(--pc-cool); border-radius: var(--pc-radius); padding: clamp(22px, 3vw, 34px); } .pcs-site .pcs-form-h { color: var(--pc-navy); } .pcs-site .pcs-form-sub { margin-top: 8px; color: var(--pc-soft); } .pcs-site .pcs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .pcs-site .pcs-form-msg { color: var(--pc-soft); font-size: .92rem; } .pcs-site .pcs-form-small { margin-top: 14px; font-size: .86rem; color: var(--pc-soft); } .pcs-site .pcs-start { margin-top: 20px; } .pcs-site .pcs-start-q { font-weight: 800; color: #fff; } .pcs-site .pcs-start-note { margin-top: 14px; font-size: .9rem; color: rgba(255, 255, 255, .7); } @media (max-width: 560px) { .pcs-site .pcs-progress { display: none; } } @media (max-width: 720px) { .pcs-site .pcs-cards-3, .pcs-site .pcs-cards-4, .pcs-site .pcs-sizes, .pcs-site .pcs-grid2 { grid-template-columns: 1fr; } .pcs-site .pcs-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- parallax band ---------- */ .pcs-site .pcs-parallax { position: relative; overflow: hidden; min-height: clamp(340px, 40vw, 480px); display: flex; align-items: flex-end; color: #fff; background: var(--pc-deep); isolation: isolate; padding-block: clamp(30px, 4vw, 52px); } .pcs-site .pcs-parallax-media { position: absolute; left: 0; right: 0; top: -16%; bottom: -16%; z-index: -2; will-change: transform; } /* Hello's reset and Elementor's frontend css both set img { height: auto } and load after this file, so this rule has to outrank them or the band shows the top of an oversized image instead of a cropped one. */ .pcs-site .pcs-parallax-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pcs-focus, 50% 72%); transform: scale(var(--pcs-zoom, 1)); transform-origin: var(--pcs-focus, 50% 72%); } .pcs-site .pcs-parallax::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 26, 46, .35) 0%, rgba(10, 26, 46, .55) 45%, rgba(10, 26, 46, .88) 100%); } .pcs-site .pcs-parallax-in { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; width: min(var(--pc-wrap), 100% - (var(--pc-gutter) * 2)); } .pcs-site .pcs-parallax h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); } .pcs-site .pcs-parallax p { margin-top: 10px; color: rgba(255, 255, 255, .84); max-width: 46ch; } @media (max-width: 860px) { .pcs-site .pcs-parallax { min-height: 420px; padding-block: 28px; } .pcs-site .pcs-parallax-media { top: 0; bottom: 0; transform: none !important; } .pcs-site .pcs-parallax-in { align-items: start; } .pcs-site .pcs-parallax h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); } } /* ---------- where the outdoor unit goes ---------- */ .pcs-site .pcs-outside-head { max-width: 62ch; } .pcs-site .pcs-outside-head p { margin-top: 14px; color: rgba(255, 255, 255, .8); } .pcs-site .pcs-spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; } .pcs-site .pcs-spots li { background: rgba(255, 255, 255, .06); display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--pc-radius); padding: 24px; transition: background-color .25s, transform .2s; } .pcs-site .pcs-spots li:hover { background: rgba(255, 255, 255, .1); transform: translateY(-3px); } .pcs-site .pcs-spot-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pc-gold); color: var(--pc-deep); margin-bottom: 14px; } .pcs-site .pcs-spot-ico .pcs-ico { width: 26px; height: 26px; } .pcs-site .pcs-spots h3 { color: #fff; } .pcs-site .pcs-spots p { margin-top: 8px; color: rgba(255, 255, 255, .76); font-size: .95rem; } .pcs-site .pcs-outside-foot { margin-top: 44px; color: rgba(255, 255, 255, .8); max-width: 70ch; } @media (max-width: 860px) { .pcs-site .pcs-spots { grid-template-columns: 1fr; } } /* ---------- areas ---------- */ .pcs-site .pcs-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; } .pcs-site .pcs-areas li { display: flex; gap: 12px; align-items: flex-start; background: var(--pc-cool); border-left: 3px solid var(--pc-gold); border-radius: var(--pc-radius); padding: 18px 20px; } .pcs-site .pcs-area-pin { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; color: var(--pc-navy); } .pcs-site .pcs-areas strong { display: block; color: var(--pc-navy); font-weight: 800; } .pcs-site .pcs-areas em { display: block; margin-top: 3px; font-style: normal; font-size: .9rem; color: var(--pc-soft); } @media (max-width: 860px) { .pcs-site .pcs-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .pcs-site .pcs-areas { grid-template-columns: 1fr; } } /* ---------- back to top ---------- */ .pcs-site .pcs-top { position: fixed; right: 22px; bottom: 26px; z-index: 97; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-navy); color: #fff; box-shadow: 0 10px 24px -10px rgba(5, 20, 40, .7); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, background-color .2s, visibility 0s linear .25s; } .pcs-site .pcs-top.on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, background-color .2s, visibility 0s; } .pcs-site .pcs-top:is(:hover, :focus-visible) { background: var(--pc-gold); color: var(--pc-deep); } .pcs-site .pcs-top .pcs-ico { width: 22px; height: 22px; } @media (max-width: 860px) { .pcs-site .pcs-top { right: 14px; bottom: calc(82px + env(safe-area-inset-bottom)); width: 46px; height: 46px; } } html[data-pcs-menu=open] .pcs-top { visibility: hidden; } /* ---------- installations: cards, gallery, lightbox ---------- */ .pcs-site .pcs-proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; } .pcs-site .pcs-proj-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--pc-rule); border-bottom: 4px solid var(--pc-gold); border-radius: var(--pc-radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .pcs-site .pcs-proj-card:is(:hover, :focus-visible) { transform: translateY(-3px); box-shadow: 0 20px 38px -28px rgba(5, 20, 40, .65); } .pcs-site .pcs-proj-img { display: block; overflow: hidden; } .pcs-site .pcs-proj-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; } .pcs-site .pcs-proj-card:hover .pcs-proj-img img { transform: scale(1.04); } .pcs-site .pcs-proj-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 18px 20px 22px; } .pcs-site .pcs-proj-meta { font-size: .86rem; color: var(--pc-soft); } .pcs-site .pcs-proj-title { font-size: 1.22rem; font-weight: 800; line-height: 1.25; color: var(--pc-navy); } .pcs-site .pcs-proj-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--pc-gold-deep); } .pcs-site .pcs-more { margin-top: 28px; } @media (max-width: 900px) { .pcs-site .pcs-proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pcs-site .pcs-proj-grid { grid-template-columns: 1fr; } } .pcs-site .pcs-gal-empty { margin-top: 28px; color: var(--pc-soft); } .pcs-site .pcs-gal-head { display: flex; flex-wrap: wrap; gap: 18px; align-items: end; justify-content: space-between; } .pcs-site .pcs-filter { display: inline-flex; flex: none; border: 1.5px solid var(--pc-rule); border-radius: var(--pc-radius); overflow: hidden; } .pcs-site .pcs-filter button { display: block; padding: 10px 18px; font-weight: 700; font-size: .95rem; color: var(--pc-navy); background: #fff; border-right: 1.5px solid var(--pc-rule); white-space: nowrap; transition: background-color .15s, color .15s; } .pcs-site .pcs-filter button:last-child { border-right: 0; } .pcs-site .pcs-filter button:hover { background: var(--pc-cool); } .pcs-site .pcs-filter button[aria-pressed=true] { background: var(--pc-navy); color: #fff; } .pcs-site .pcs-filter button:focus-visible { outline-offset: -4px; } .pcs-site .pcs-gal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; margin-top: 28px; } .pcs-site .pcs-shot { aspect-ratio: 1; } .pcs-site .pcs-shot.is-big { aspect-ratio: 1; } .pcs-site .pcs-shot.is-big { grid-column: span 2; grid-row: span 2; } .pcs-site .pcs-shot-btn { position: relative; display: block; width: 100%; height: 100%; text-align: left; border-radius: var(--pc-radius); overflow: hidden; } .pcs-site .pcs-shot-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .pcs-site .pcs-shot-btn:hover img { transform: scale(1.05); } .pcs-site .pcs-shot-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font-size: .84rem; color: #fff; white-space: normal; background: linear-gradient(180deg, transparent, rgba(8, 22, 40, .85)); opacity: 0; transition: opacity .25s; } .pcs-site .pcs-shot-btn:is(:hover, :focus-visible) .pcs-shot-cap { opacity: 1; } @media (max-width: 900px) { .pcs-site .pcs-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.pcs-site .pcs-shot.is-big { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; } } .pcs-site .pcs-lightbox { width: min(1100px, 94vw); max-width: 94vw; border: 0; padding: 0; background: transparent; color: #fff; } .pcs-site .pcs-lightbox::backdrop { background: rgba(6, 16, 30, .9); } .pcs-site .pcs-lightbox figure { margin: 0; } .pcs-site .pcs-lightbox img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--pc-radius); } .pcs-site .pcs-lightbox figcaption { margin-top: 12px; text-align: center; color: rgba(255, 255, 255, .85); font-size: .92rem; } .pcs-site .pcs-lb-link { color: var(--pc-gold-pale); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; } .pcs-site .pcs-lb-link[hidden] { display: none; } .pcs-site :is(.pcs-lb-prev, .pcs-lb-next, .pcs-lb-close) { position: fixed; display: grid; place-items: center; background-color: rgba(255, 255, 255, .12); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.6rem; line-height: 1; } .pcs-site :is(.pcs-lb-prev, .pcs-lb-next, .pcs-lb-close):hover { background: var(--pc-gold); color: var(--pc-deep); } .pcs-site .pcs-lb-prev { left: 18px; top: 50%; } .pcs-site .pcs-lb-next { right: 18px; top: 50%; } .pcs-site .pcs-lb-close { right: 18px; top: 18px; } .pcs-site .pcs-crumb { display: flex; gap: 8px; margin-bottom: 14px; font-size: .9rem; color: rgba(255, 255, 255, .6); } .pcs-site .pcs-crumb a { color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 3px; } .pcs-site .pcs-proj-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .pcs-site .pcs-proj-facts { background: var(--pc-navy); color: #fff; border-radius: var(--pc-radius); border-top: 4px solid var(--pc-gold); padding: clamp(22px, 3vw, 34px); } .pcs-site .pcs-proj-facts h2 { color: #fff; font-size: 1.6rem; } .pcs-site .pcs-proj-facts dl { margin-top: 14px; } .pcs-site .pcs-proj-facts dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); } .pcs-site .pcs-proj-facts dt { color: rgba(255, 255, 255, .62); } .pcs-site .pcs-proj-facts dd { margin: 0; font-weight: 700; text-align: right; } .pcs-site .pcs-proj-quote { margin-top: 20px; color: #e6ede8; font-style: italic; } .pcs-site .pcs-proj-quote figcaption { margin-top: 8px; font-weight: 700; font-style: normal; color: var(--pc-gold-pale); } @media (max-width: 860px) { .pcs-site .pcs-proj-in { grid-template-columns: 1fr; } } /* ---------- servicing and aftercare ---------- */ .pcs-site .pcs-note-small { margin-top: 16px; font-size: .92rem; color: var(--pc-soft); } .pcs-site .pcs-band-navy .pcs-note-small, .pcs-site .pcs-panel-navy .pcs-note-small { color: rgba(255, 255, 255, .7); } .pcs-site .pcs-note-small a { color: inherit; border-bottom: 1px solid var(--pc-gold); font-weight: 600; } .pcs-site .pcs-others { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 48px; } .pcs-site .pcs-others h2 { color: var(--pc-deep); max-width: 18ch; } .pcs-site .pcs-others p { margin-top: 12px; color: rgba(14, 36, 64, .82); max-width: 56ch; } .pcs-site .pcs-others .pcs-cta-row { margin-top: 0; } .pcs-site .pcs-year { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; } /* no rail across the desktop grid: with two rows it only ever lined up with the first, and drew straight through the cards. The reveal carries it. */ .pcs-site .pcs-year li { position: relative; background: #fff; border-radius: var(--pc-radius); border-bottom: 4px solid var(--pc-gold); padding: 24px 22px 22px; transition: transform .25s ease, box-shadow .25s ease, opacity .5s ease; } .pcs-year li:is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(6, 20, 40, .6); } @media (prefers-reduced-motion: no-preference) { .pcs-site .pcs-year[data-pcs-year] li { opacity: 0; transform: translateY(16px); } .pcs-site .pcs-year[data-pcs-year] li.is-in { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 90ms); } .pcs-site .pcs-year[data-pcs-year] li.is-in .pcs-year-ico { animation: pcs-pop .45s cubic-bezier(.2, .8, .3, 1.3) both; animation-delay: calc(var(--i, 0) * 90ms + 90ms); } } @keyframes pcs-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } .pcs-site .pcs-year-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pc-navy); color: #fff; margin-bottom: 14px; box-shadow: 0 0 0 6px var(--pc-cool); } .pcs-site .pcs-year-ico .pcs-ico { width: 24px; height: 24px; } .pcs-site .pcs-year-n { position: absolute; top: 18px; right: 20px; font-size: 1.6rem; font-weight: 800; color: var(--pc-rule); } .pcs-site .pcs-year h3 { color: var(--pc-navy); } .pcs-site .pcs-year p { margin-top: 8px; color: var(--pc-soft); font-size: .95rem; } @media (max-width: 900px) { .pcs-site .pcs-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* On a phone six stacked cards is a very long scroll, so the journey becomes a proper timeline: icons down the left, joined by a gold thread. */ @media (max-width: 560px) { .pcs-site .pcs-year { display: block; margin-top: 32px; } .pcs-site .pcs-year li { display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; align-items: start; background: none; border: 0; border-radius: 0; padding: 0 0 22px; } .pcs-site .pcs-year li:last-child { padding-bottom: 0; } .pcs-site .pcs-year li:is(:hover, :focus-within) { transform: none; box-shadow: none; } .pcs-site .pcs-year li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--pc-rule); } .pcs-site .pcs-year li:last-child::before { display: none; } .pcs-site .pcs-year li.is-in::before { background: linear-gradient(180deg, var(--pc-gold), var(--pc-rule)); } .pcs-site .pcs-year-ico { grid-row: span 3; width: 42px; height: 42px; margin: 0; box-shadow: 0 0 0 5px var(--pc-cool); } .pcs-site .pcs-year-ico .pcs-ico { width: 21px; height: 21px; } .pcs-site .pcs-year-n { grid-column: 2; position: static; font-size: .7rem; font-weight: 800; letter-spacing: .2em; color: var(--pc-gold-deep); } .pcs-site .pcs-year-n::before { content: "Step "; } .pcs-site .pcs-year h3 { grid-column: 2; margin-top: 2px; } .pcs-site .pcs-year p { grid-column: 2; margin-top: 6px; } } .pcs-site .pcs-reviews-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(26px, 4vw, 56px); align-items: start; } .pcs-site .pcs-reviews-side { position: sticky; top: 100px; background: var(--pc-navy); color: #fff; border-radius: var(--pc-radius); border-top: 4px solid var(--pc-gold); padding: clamp(24px, 3vw, 34px); } .pcs-site .pcs-rev-big { font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 800; line-height: 1; color: #fff; } .pcs-site .pcs-rev-big span { display: block; margin-top: 6px; font-size: .9rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .pcs-site .pcs-reviews-side .pcs-stars { display: block; margin-top: 14px; color: var(--pc-gold); font-size: 1.35rem; letter-spacing: 3px; } .pcs-site .pcs-rev-count { margin-top: 6px; color: var(--pc-gold-pale); font-weight: 700; } .pcs-site .pcs-reviews-side p { margin-top: 14px; color: rgba(255, 255, 255, .8); } .pcs-site .pcs-reviews-side .pcs-note-small { color: rgba(255, 255, 255, .6); } .pcs-site .pcs-reviews-side .pcs-note-small a { color: var(--pc-gold-pale); } .pcs-site .pcs-reviews-main { display: grid; gap: 16px; } .pcs-site .pcs-review-card { display: grid; grid-template-columns: 52px 1fr; gap: 16px; background: #fff; border: 1px solid var(--pc-rule); border-left: 4px solid var(--pc-gold); border-radius: var(--pc-radius); padding: clamp(20px, 2.4vw, 28px); box-shadow: 0 20px 44px -40px rgba(6, 20, 40, .55); } .pcs-site .pcs-rev-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pc-navy); color: #fff; font-weight: 800; font-size: 1.3rem; } .pcs-site .pcs-rev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .pcs-site .pcs-rev-name { font-weight: 800; color: var(--pc-navy); font-size: 1.08rem; } .pcs-site .pcs-rev-head .pcs-stars { color: var(--pc-gold); letter-spacing: 2px; } .pcs-site .pcs-rev-meta { margin-top: 2px; font-size: .88rem; color: var(--pc-soft); } .pcs-site .pcs-review-card blockquote { margin: 12px 0 0; } .pcs-site .pcs-review-card blockquote p { color: var(--pc-ink); font-size: 1.02rem; line-height: 1.65; } .pcs-site .pcs-rev-source { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .84rem; color: var(--pc-soft); } .pcs-site .pcs-rev-source .pcs-ico { width: 15px; height: 15px; color: var(--pc-gold-deep); } @media (max-width: 900px) { .pcs-site .pcs-reviews-grid { grid-template-columns: 1fr; }.pcs-site .pcs-reviews-side { position: static; } } @media (max-width: 480px) { .pcs-site .pcs-review-card { grid-template-columns: 1fr; }.pcs-site .pcs-rev-avatar { display: none; } } .pcs-site .pcs-review-avg { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-weight: 700; color: var(--pc-navy); } .pcs-site .pcs-review-avg .pcs-stars { color: var(--pc-gold); font-size: 1.2rem; letter-spacing: 2px; } .pcs-site .pcs-review-by em { display: block; margin-top: 3px; font-style: normal; font-size: .82rem; color: var(--pc-soft); } /* ---------- refer a friend / feedback ---------- */ .pcs-site .pcs-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; } .pcs-site .pcs-perk { position: relative; overflow: hidden; background: var(--pc-navy); color: #fff; border-radius: var(--pc-radius); border-top: 4px solid var(--pc-gold); padding: clamp(24px, 3vw, 34px); } .pcs-site .pcs-perk::after { content: ""; position: absolute; right: -60px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .05); } .pcs-site .pcs-perk-ico { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--pc-gold); color: var(--pc-deep); margin-bottom: 16px; } .pcs-site .pcs-perk-ico .pcs-ico { width: 28px; height: 28px; } .pcs-site .pcs-perk h3 { position: relative; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.55rem); } .pcs-site .pcs-perk p { position: relative; margin-top: 12px; color: rgba(255, 255, 255, .82); } .pcs-site .pcs-perk-badge { display: inline-block; margin-top: 18px; padding: 9px 16px; border-radius: 999px; background: rgba(230, 213, 176, .16); border: 1px solid rgba(230, 213, 176, .45); color: var(--pc-gold-pale); font-weight: 800; letter-spacing: .01em; } .pcs-site .pcs-perk .pcs-note-small { color: rgba(255, 255, 255, .58); } @media (max-width: 760px) { .pcs-site .pcs-perks { grid-template-columns: 1fr; gap: 16px; } } /* the spam trap: off-screen for people, still fillable by bots */ .pcs-site .pcs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ---------- service plan prices ---------- */ .pcs-site .pcs-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; } .pcs-price { background: #fff; border: 1px solid var(--pc-rule); border-top: 4px solid var(--pc-gold); border-radius: var(--pc-radius); padding: clamp(20px, 2.4vw, 28px); text-align: center; } .pcs-site .pcs-price-what { font-weight: 700; color: var(--pc-navy); } .pcs-site .pcs-price-amount { margin-top: 8px; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1; color: var(--pc-navy); } .pcs-site .pcs-price-note { margin-top: 8px; font-size: .9rem; color: var(--pc-soft); } @media (max-width: 760px) { .pcs-site .pcs-prices { grid-template-columns: 1fr; gap: 12px; } } /* a short word about refrigeration, rather than a page of its own */ .pcs-site .pcs-refrig { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: center; justify-content: space-between; background: var(--pc-cool); border-left: 4px solid var(--pc-gold); border-radius: var(--pc-radius); padding: clamp(22px, 3vw, 34px); } .pcs-site .pcs-refrig h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); } .pcs-site .pcs-refrig p { margin-top: 10px; max-width: 60ch; color: var(--pc-soft); } .pcs-site .pcs-refrig .pcs-cta-row { margin-top: 0; } /* ---------- customer feedback survey ---------- */ .pcs-site .pcs-survey-sec { padding-top: 0; } .pcs-site .pcs-survey-grid { position: relative; z-index: 2; margin-top: clamp(-72px, -6vw, -40px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(26px, 4vw, 56px); align-items: start; } .pcs-site .pcs-survey-side { position: sticky; top: 100px; background: var(--pc-navy); color: #fff; border-radius: var(--pc-radius); border-top: 4px solid var(--pc-gold); padding: clamp(24px, 3vw, 34px); } .pcs-site .pcs-survey-gift { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--pc-gold); color: var(--pc-deep); margin-bottom: 16px; } .pcs-site .pcs-survey-gift .pcs-ico { width: 28px; height: 28px; } .pcs-site .pcs-survey-side h2 { color: #fff; font-size: clamp(1.2rem, 2vw, 1.45rem); } .pcs-site .pcs-survey-side p { margin-top: 12px; color: rgba(255, 255, 255, .8); } .pcs-site .pcs-survey-facts { display: grid; gap: 10px; margin-top: 18px; } .pcs-site .pcs-survey-facts li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, .86); font-size: .94rem; } .pcs-site .pcs-survey-facts .pcs-ico { color: var(--pc-gold); margin-top: 3px; } .pcs-site .pcs-survey-side .pcs-note-small { color: rgba(255, 255, 255, .6); } .pcs-site .pcs-survey-side .pcs-note-small a { color: var(--pc-gold-pale); } .pcs-site .pcs-survey-main { background: #fff; border: 1px solid var(--pc-rule); border-radius: var(--pc-radius); padding: clamp(22px, 3vw, 36px); box-shadow: 0 24px 50px -40px rgba(6, 20, 40, .5); } .pcs-site .pcs-survey-q { border: 0; padding: 0; margin: 0 0 26px; } .pcs-site .pcs-survey-q + .pcs-survey-q { padding-top: 24px; border-top: 1px solid var(--pc-rule); } .pcs-site .pcs-survey-q legend { display: flex; gap: 12px; align-items: flex-start; font-weight: 800; color: var(--pc-navy); margin-bottom: 14px; } .pcs-site .pcs-sq-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pc-navy); color: #fff; font-size: .88rem; } .pcs-site .pcs-survey-q legend em { display: block; margin-top: 3px; font-style: normal; font-weight: 500; font-size: .92rem; color: var(--pc-soft); } .pcs-site .pcs-btn-big { min-height: 58px; padding-inline: 30px; font-size: 1.05rem; } .pcs-site .pcs-done-tick { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--pc-gold); color: var(--pc-deep); margin-bottom: 18px; } .pcs-site .pcs-done-tick .pcs-ico { width: 32px; height: 32px; } .pcs-site .pcs-review-ask .pcs-stars { display: block; margin-bottom: 10px; font-size: 1.15rem; letter-spacing: 2px; } @media (max-width: 900px) { .pcs-site .pcs-survey-grid { grid-template-columns: 1fr; }.pcs-site .pcs-survey-side { position: static; } } /* the lift into the hero only works where the hero is tall: on a phone it covered the last line of the intro, so it starts below the band instead */ @media (max-width: 700px) { .pcs-site .pcs-survey-sec { padding-top: 26px; } .pcs-site .pcs-survey-grid { margin-top: 0; } /* grid children default to min-content width, which the rating buttons pushed past the screen on a narrow phone */ .pcs-site .pcs-survey-grid > * { min-width: 0; } .pcs-site .pcs-score span { padding: 9px 12px; font-size: .92rem; } } /* ---------- the page that isn't there ---------- */ .pcs-site .pcs-404 { background: linear-gradient(160deg, var(--pc-navy) 0%, var(--pc-deep) 70%); color: #fff; overflow: hidden; } .pcs-site .pcs-404-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .pcs-site .pcs-404 h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); margin-top: 10px; } .pcs-site .pcs-404 .pcs-hero-lead { margin-top: 16px; color: rgba(255, 255, 255, .84); } .pcs-site .pcs-404-sub { margin-top: 12px; color: rgba(255, 255, 255, .62); max-width: 48ch; } .pcs-site .pcs-404-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; align-items: start; gap: 12px; margin-top: 28px; } .pcs-site .pcs-404-links a { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 13px 16px; border-radius: var(--pc-radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: background-color .2s, transform .2s, border-color .2s; } .pcs-site .pcs-404-links a:is(:hover, :focus-visible) { background: var(--pc-gold); border-color: var(--pc-gold); color: var(--pc-deep); transform: translateY(-2px); } .pcs-site .pcs-404-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(230, 213, 176, .18); border: 1px solid rgba(230, 213, 176, .38); color: var(--pc-gold-pale); } .pcs-site .pcs-404-ico .pcs-ico { width: 20px; height: 20px; } .pcs-site .pcs-404-text { display: grid; gap: 2px; } .pcs-site .pcs-404-links a:is(:hover, :focus-visible) .pcs-404-ico { background: var(--pc-deep); border-color: var(--pc-deep); color: var(--pc-gold-pale); } .pcs-site .pcs-404-links strong { display: block; font-size: .98rem; line-height: 1.25; } .pcs-site .pcs-404-links em { font-style: normal; font-size: .86rem; line-height: 1.35; opacity: .74; } /* the arrow is a direct child of the link; the circled icon is not */ .pcs-site .pcs-404-links a > .pcs-ico { margin-left: auto; width: 17px; height: 17px; opacity: .6; } .pcs-site .pcs-404-art svg { width: min(360px, 100%); height: auto; margin-inline: auto; display: block; } .pcs-site .pcs-404-foot { color: var(--pc-soft); } .pcs-site .pcs-404-foot a { color: var(--pc-navy); font-weight: 700; border-bottom: 2px solid var(--pc-gold); } @media (prefers-reduced-motion: no-preference) { .pcs-site .pcs-404-dial { transform-origin: 160px 160px; animation: pcs-dial 9s ease-in-out infinite; } .pcs-site .pcs-404-flake { animation: pcs-drop 3.4s ease-in-out infinite; } } @keyframes pcs-dial { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(18deg); } } @keyframes pcs-drop { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(6px); opacity: 1; } } @media (max-width: 860px) { .pcs-site .pcs-404-in { grid-template-columns: 1fr; } .pcs-site .pcs-404-art { order: -1; } .pcs-site .pcs-404-art svg { width: min(240px, 68%); } .pcs-site .pcs-404-links { grid-template-columns: 1fr; } } .pcs-site .pcs-survey { max-width: 760px; margin-inline: auto; } .pcs-site .pcs-survey-q { border: 0; padding: 0; margin: 0 0 22px; } .pcs-site .pcs-survey-q legend { font-weight: 800; color: var(--pc-navy); margin-bottom: 10px; } .pcs-site .pcs-scores { display: flex; flex-wrap: wrap; gap: 8px; } .pcs-site .pcs-score { position: relative; } .pcs-site .pcs-score input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .pcs-site .pcs-score span { display: block; padding: 10px 16px; border: 1.5px solid var(--pc-rule); border-radius: var(--pc-radius); background: #fff; font-weight: 600; color: var(--pc-navy); transition: background-color .15s, border-color .15s, color .15s; } .pcs-site .pcs-score input:checked + span { background: var(--pc-navy); border-color: var(--pc-navy); color: #fff; } .pcs-site .pcs-score input:focus-visible + span { outline: 3px solid var(--pc-gold); outline-offset: 2px; } .pcs-site .pcs-survey-done h2 { color: var(--pc-navy); } .pcs-site .pcs-review-ask { margin-top: 22px; padding: 22px; background: var(--pc-cool); border-radius: var(--pc-radius); border-left: 4px solid var(--pc-gold); } .pcs-site .pcs-review-ask p { margin-top: 0; color: var(--pc-soft); } .pcs-site .pcs-review-ask p + p { margin-top: 16px; } /* a job's own photographs: their real shape, and smaller than the main gallery so a page of them doesn't dominate */ .pcs-site .pcs-gal-natural { display: block; columns: 5; column-gap: 12px; max-width: 1040px; margin-top: 24px; } .pcs-site .pcs-gal-natural li.pcs-shot { display: block; break-inside: avoid; aspect-ratio: var(--pcs-ar, 1); height: auto; margin: 0 0 12px; } .pcs-site .pcs-gal-natural .pcs-shot.is-big { grid-column: auto; grid-row: auto; } /* these have to outrank the square-tile rules further down the sheet */ .pcs-site .pcs-gal-natural li.pcs-shot .pcs-shot-btn { height: 100%; } .pcs-site .pcs-gal-natural li.pcs-shot .pcs-shot-btn img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } @media (max-width: 1100px) { .pcs-site .pcs-gal-natural { columns: 4; } } @media (max-width: 860px) { .pcs-site .pcs-gal-natural { columns: 3; } } @media (max-width: 560px) { .pcs-site .pcs-gal-natural { columns: 2; } } /* ---------- portrait photographs ---------- */ /* a portrait photo in a landscape frame loses the top and bottom of the job, so the frame follows the photograph instead */ .pcs-site :is(.pcs-phero, .pcs-proj-hero) .pcs-photo-frame.is-portrait { max-width: 430px; margin-inline: auto; } /* ---------- before and after ---------- */ .pcs-site .pcs-ba { margin-top: 28px; } .pcs-ba-media { position: relative; border-radius: var(--pc-radius); overflow: hidden; box-shadow: 0 26px 50px -34px rgba(5, 20, 40, .7); touch-action: pan-y; cursor: ew-resize; } .pcs-site .pcs-ba-media figure { margin: 0; } .pcs-site .pcs-ba-media img { display: block; width: 100%; aspect-ratio: var(--pcs-ar, 4 / 3); object-fit: cover; } .pcs-site .pcs-ba.is-portrait .pcs-ba-media { max-width: 460px; margin-inline: auto; } .pcs-site .pcs-proj-hero-ba .pcs-ba { margin-top: 0; } .pcs-site .pcs-proj-hero-ba .pcs-ba.is-portrait .pcs-ba-media { max-width: 430px; } .pcs-site .pcs-proj-hero-ba .pcs-ba-label { color: rgba(255, 255, 255, .72); } .pcs-ba-before { position: absolute; inset: 0; width: var(--pcs-ba, 50%); overflow: hidden; } .pcs-site .pcs-ba-before img { width: 100vw; max-width: none; height: 100%; } .pcs-site .pcs-ba.is-portrait .pcs-ba-before img { width: 460px; } .pcs-site .pcs-proj-hero-ba .pcs-ba.is-portrait .pcs-ba-before img { width: 430px; } .pcs-site .pcs-ba-media figcaption { position: absolute; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(8, 22, 40, .78); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .pcs-site .pcs-ba-before figcaption { left: 12px; } .pcs-site .pcs-ba-after figcaption { right: 12px; } .pcs-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pcs-ba, 50%); width: 3px; background: rgba(255, 255, 255, .9); transform: translateX(-50%); pointer-events: none; } .pcs-ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pc-gold); box-shadow: 0 6px 18px -6px rgba(5, 20, 40, .8); } .pcs-ba-handle span::before { content: "‹ ›"; color: var(--pc-deep); font-weight: 800; font-size: 1.1rem; letter-spacing: -1px; } .pcs-site .pcs-ba-handle { cursor: ew-resize; } .pcs-site .pcs-ba-handle:focus-visible { outline: 3px solid var(--pc-gold); outline-offset: 4px; } /* the comparison leads, the write-up sits beside it */ .pcs-site .pcs-proj-ba { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(26px, 4vw, 54px); align-items: start; } .pcs-site .pcs-proj-ba-media .pcs-ba { margin-top: 0; } .pcs-site .pcs-proj-ba .pcs-prose { max-width: none; } .pcs-site .pcs-proj-words { display: grid; gap: 26px; } .pcs-site .pcs-proj-words .pcs-proj-facts { padding: clamp(20px, 2.4vw, 28px); } .pcs-site .pcs-proj-words .pcs-proj-facts h2 { font-size: 1.3rem; } /* the customer's words, in the same card as the reviews page so the site speaks with one voice rather than inventing a testimonial style */ .pcs-site .pcs-quote-sec { padding-block: clamp(34px, 4vw, 56px); } .pcs-site .pcs-job-quote { max-width: 46rem; } .pcs-site .pcs-job-quote .pcs-rev-meta { margin: 0 0 6px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-gold-deep); } .pcs-site .pcs-job-quote blockquote { margin: 0; } .pcs-site .pcs-job-quote blockquote p { font-size: 1.02rem; line-height: 1.7; color: var(--pc-ink); } .pcs-site .pcs-job-quote figcaption { margin-top: 12px; font-weight: 800; color: var(--pc-navy); } @media (max-width: 900px) { .pcs-site .pcs-proj-ba { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pcs-ba-handle span { width: 38px; height: 38px; } } /* ---------- long-form prose (privacy policy and similar) ---------- */ .pcs-site .pcs-prose { max-width: 70ch; } .pcs-site .pcs-prose h2 { color: var(--pc-navy); font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-top: 38px; } .pcs-site .pcs-prose p { margin-top: 14px; color: var(--pc-soft); } .pcs-site .pcs-prose .pcs-prose-lead { font-size: 1.12rem; color: var(--pc-ink); margin-top: 0; } .pcs-site .pcs-prose a { color: var(--pc-navy); font-weight: 600; border-bottom: 1px solid var(--pc-gold); } .pcs-prose a:is(:hover, :focus-visible) { color: var(--pc-gold-deep); } .pcs-site .pcs-prose-list { margin-top: 14px; display: grid; gap: 10px; } .pcs-site .pcs-prose-list li { position: relative; padding-left: 20px; color: var(--pc-soft); } .pcs-site .pcs-prose-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--pc-gold); } .pcs-site .pcs-prose strong { color: var(--pc-ink); } /* the gallery filters wrap onto two lines rather than running off the screen */ @media (max-width: 700px) { .pcs-site .pcs-gal-head { flex-direction: column; align-items: stretch; gap: 14px; } .pcs-site .pcs-filter { display: flex; flex-wrap: wrap; gap: 8px; border: 0; border-radius: 0; overflow: visible; } .pcs-site .pcs-filter button { flex: 0 1 auto; padding: 9px 14px; font-size: .9rem; border: 1.5px solid var(--pc-rule); border-right: 1.5px solid var(--pc-rule); border-radius: var(--pc-radius); } .pcs-site .pcs-filter button:last-child { border-right: 1.5px solid var(--pc-rule); } } /* ---------- phones: one consistent rhythm ---------- */ @media (max-width: 860px) { .pcs-site .pcs-statement-in { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 700px) { .pcs-site section { padding-block: clamp(38px, 9vw, 52px); } .pcs-site .pcs-parallax { padding-block: 0; } .pcs-site .pcs-brands { padding-block: 18px; } .pcs-site .pcs-sec-sub { margin-top: 8px; } .pcs-site :is(h2) { font-size: clamp(1.5rem, 6.4vw, 1.95rem); } .pcs-site :is(h3) { font-size: 1.12rem; } .pcs-site .pcs-two { gap: 30px; } .pcs-site .pcs-tiles, .pcs-site .pcs-spots, .pcs-site .pcs-areas, .pcs-site .pcs-reviews, .pcs-site .pcs-facts, .pcs-site .pcs-year, .pcs-site .pcs-perks, .pcs-site .pcs-proj-grid { gap: 14px; } .pcs-site .pcs-spots li, .pcs-site .pcs-year li, .pcs-site .pcs-perk, .pcs-site .pcs-contact-card, .pcs-site .pcs-panel-navy { padding: 20px; } .pcs-site .pcs-outside-head p, .pcs-site .pcs-outside-foot { margin-top: 12px; } .pcs-site .pcs-spots { margin-top: 26px; } .pcs-site .pcs-outside-foot { margin-top: 26px; } .pcs-site .pcs-ticks { margin-top: 14px; } .pcs-site .pcs-cta-row { margin-top: 22px; gap: 12px; } .pcs-site .pcs-perks, .pcs-site .pcs-year, .pcs-site .pcs-proj-grid, .pcs-site .pcs-gal-grid { margin-top: 24px; } .pcs-site .pcs-faq { margin-top: 20px; } .pcs-site .pcs-finish-in { gap: 26px; } .pcs-site .pcs-prose h2 { margin-top: 28px; } } /* ---------- footer ---------- */ .pcs-site .pcs-foot { background: var(--pc-deep); color: rgba(255, 255, 255, .78); padding-top: clamp(38px, 4vw, 56px); } .pcs-site .pcs-foot-grid { display: grid; grid-template-columns: 1.35fr 1.25fr 1.2fr; gap: 30px 40px; align-items: start; } .pcs-site .pcs-foot-contact { display: grid; gap: 12px; } .pcs-site .pcs-foot-contact li { display: flex; align-items: flex-start; gap: 11px; } .pcs-site .pcs-foot-contact .pcs-ico { width: 18px; height: 18px; margin-top: 3px; color: var(--pc-gold); } .pcs-site .pcs-foot-contact li + li { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); } .pcs-site .pcs-foot-links { columns: 2; column-gap: 26px; } .pcs-site .pcs-foot-links li { break-inside: avoid; margin-bottom: 7px; } .pcs-site .pcs-foot-logo { height: 46px !important; width: auto; margin-bottom: 16px; } .pcs-site .pcs-foot-h { color: #fff; font-weight: 800; margin-bottom: 10px; } .pcs-site .pcs-foot a { color: rgba(255, 255, 255, .86); } .pcs-foot a:is(:hover, :focus-visible) { color: #fff; text-decoration: underline; } .pcs-site .pcs-social { display: inline-flex; gap: 12px; margin-top: 16px; } .pcs-site .pcs-foot-small { margin-top: 30px; padding-block: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .84rem; color: rgba(255, 255, 255, .55); } @media (max-width: 860px) { .pcs-site .pcs-foot { padding-top: 32px; } .pcs-site .pcs-foot-grid { grid-template-columns: 1fr; gap: 18px; } .pcs-site .pcs-foot-links { columns: 2; } .pcs-site .pcs-foot-grid > div:nth-child(3) { display: none; } .pcs-site .pcs-foot-logo { height: 38px !important; } .pcs-site .pcs-foot-grid > div:first-child p { font-size: .92rem; } .pcs-site .pcs-foot-small { margin-top: 26px; padding-block: 16px; font-size: .78rem; } } /* ---------- reveal on scroll ---------- */ .pcs-site .pcs-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); } .pcs-site .pcs-reveal.in { opacity: 1; transform: none; } .pcs-site .pcs-reveal:nth-child(2) { transition-delay: .08s; } .pcs-site .pcs-reveal:nth-child(3) { transition-delay: .16s; } .pcs-site .pcs-reveal:nth-child(4) { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .pcs-site *, .pcs-site *::before, .pcs-site *::after { transition: none !important; animation: none !important; } .pcs-site .pcs-reveal { opacity: 1; transform: none; } } /* Elementor: .elementor .elementor-widget:not(...) figure { margin: 0 } is 0,3,1 and wins against anything sane, so this one is deliberately !important. */ .pcs-site .pcs-photo-frame.pcs-photo-sm { margin-bottom: 34px !important; } .pcs-site .pcs-photo-frame.pcs-photo-sm img { aspect-ratio: 16 / 9; }