/* ========================================================================== Fresh Foyer — house cleaning, The Colony TX Hand-built. Do NOT regenerate from the template. Brief: eye-catching, and the customer should feel they have no choice but to call. So: near-black, one screaming lime, billboard type, and a call button that is never more than a thumb away on any screen. ========================================================================== */ /* --------------------------------------------------------------------------- PALETTES One rule holds across all four: the accent is always light enough to carry BLACK text and a black tick glyph. That single constraint is what lets the whole page restyle by swapping six values — and it is why none of these is a dark-blue accent, however smart that looks on its own. Put data-theme="gold" (or aqua / coral) on to switch. Add ?themes=1 to the URL to get a picker and try them on the real page. --------------------------------------------------------------------------- */ :root { /* STUDIO — deep navy, one saturated yellow, white page. Sampled straight off the reference design rather than eyeballed. */ --ink: #1E2E3B; --ink-2: #2A3D4E; --ink-rgb: 30, 46, 59; --accent: #FFD70A; --accent-d: #E5BC00; --accent-l: #FFE04A; --paper: #FFFFFF; --smoke: #F4F5F7; --grey: #61707C; --grey-2: #93A1AC; --line: rgba(255,255,255,.14); --line-d: rgba(var(--ink-rgb), .12); --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* One typeface. Anton was doing the shouting; weight does it now. */ --disp: var(--sans); --pad: clamp(18px, 5vw, 44px); --gap: clamp(56px, 9vw, 116px); --r: 14px; } /* GOLD — navy-black + warm gold. Reads established and expensive. */ [data-theme="gold"] { --ink: #12161F; --ink-2: #1C2231; --ink-rgb: 18, 22, 31; --accent: #F0B429; --accent-d: #CB9310; --accent-l: #FFC64C; --paper: #FFFFFF; --smoke: #F5F3EE; --grey: #6B7280; --grey-2: #9CA3AF; } /* AQUA — deep teal + bright water. The most obviously "clean". */ [data-theme="aqua"] { --ink: #0B2A2F; --ink-2: #123940; --ink-rgb: 11, 42, 47; --accent: #3DD6C4; --accent-d: #1FB4A3; --accent-l: #64E4D5; --paper: #FFFFFF; --smoke: #EEF7F6; --grey: #5F7A7C; --grey-2: #93A9AA; } /* CORAL — charcoal + warm coral. Friendliest; least like a contractor. */ [data-theme="coral"] { --ink: #1E1B1C; --ink-2: #2B2627; --ink-rgb: 30, 27, 28; --accent: #FF8A5B; --accent-d: #E4653A; --accent-l: #FFA37B; --paper: #FFFDFB; --smoke: #F7F0EC; --grey: #77696A; --grey-2: #A79A9B; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* room for the fixed call bar on phones */ padding-bottom: 0; } @media (max-width: 900px) { body { padding-bottom: 78px; } } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 8px; top: 8px; z-index: 300; background: var(--ink); color: var(--accent); padding: 12px 16px; } .wrap { width: min(1200px, 100% - (var(--pad) * 2)); margin-inline: auto; } /* The header is sticky, so an anchor jump would otherwise land with the heading tucked underneath it. */ section[id] { scroll-margin-top: 78px; } /* ------------------------------------------------------------ headings -- */ .h2 { font-family: var(--sans); font-size: clamp(27px, 3.4vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; text-transform: none; text-wrap: balance; /* a phone has to wrap these; it should not orphan a word */ margin: 0 0 18px; } /* Two weights on ONE line: the light half sets it up, the bold half lands it. These used to stack because the span was block-level. Sized to fit its column on a desktop width; below that it wraps rather than overflow. */ .h2 span { font-weight: 400; } .h2--center { text-align: center; } .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); margin: 0 0 14px; } .est .eyebrow { color: rgba(255,255,255,.5); } .tagpill { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; background: rgba(255,255,255,.12); color: #fff; border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; margin: 0 0 20px; } .tagpill--accent { background: var(--accent); color: var(--ink); border-color: var(--accent); } /* A pill that wraps onto two lines stops looking like a pill. */ @media (max-width: 560px) { .tagpill { font-size: 10.5px; letter-spacing: .1em; padding: 6px 12px; } } /* ---------------------------------------------------------- call button -- */ /* One button. The 6px offset "pressed" shadow read as a 2018 landing page; this matches the header's yellow button so the page has a single control. */ .call { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent); color: var(--ink); border-radius: 12px; padding: 15px 28px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; transition: background .16s ease, transform .12s ease; } .call:hover { background: var(--accent-l); } .call:active { transform: translateY(1px); } .call--bar { padding: 12px 20px; font-size: 15px; } .call--huge { padding: 17px 32px; font-size: 17px; } .call--full { width: 100%; padding: 16px 24px; font-size: 16.5px; } .call--dark { background: var(--ink); color: var(--accent); } .call--dark:hover { background: var(--ink-2); } .ghost { display: inline-flex; align-items: center; font-weight: 700; font-size: 16px; color: #fff; border-bottom: 2px solid rgba(255,255,255,.45); padding-bottom: 3px; } .ghost:hover { border-bottom-color: var(--accent); color: var(--accent); } /* ----------------------------------------------------------- top bar ---- */ .bar { position: sticky; top: 0; z-index: 90; background: var(--ink); color: #fff; } .bar__in { width: min(1200px, 100% - (var(--pad) * 2)); margin-inline: auto; display: flex; align-items: center; gap: 18px; height: 66px; } .logo { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); margin-right: auto; } .logo span { font-family: var(--sans); font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: #fff; } .bar__note { display: none; text-align: right; line-height: 1.25; } .bar__note b { display: block; font-size: 14px; font-weight: 800; } .bar__note span { font-size: 12.5px; color: var(--grey-2); } @media (min-width: 780px) { .bar__note { display: block; } } /* --------------------------------------------------------------- hero --- */ .hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; } .hero__bg { position: absolute; inset: 0; } /* The photograph is the aspiration — a bright, finished room. Buried under a heavy scrim it just reads as a black box, so it stays visible and the text earns its contrast from a gradient weighted to the left instead. */ .hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(var(--ink-rgb),.94) 0%, rgba(var(--ink-rgb),.86) 38%, rgba(var(--ink-rgb),.42) 70%, rgba(var(--ink-rgb),.30) 100%), linear-gradient(180deg, rgba(var(--ink-rgb),.55), rgba(var(--ink-rgb),.20) 40%, rgba(var(--ink-rgb),.75)); } @media (max-width: 760px) { /* Narrow screens have no room for a light right-hand side. */ .hero__bg::after { background: linear-gradient(180deg, rgba(var(--ink-rgb),.72), rgba(var(--ink-rgb),.86) 55%, rgba(var(--ink-rgb),.95)); } } /* A slow sweep of light across the photograph. Motion in the corner of the eye, no delay to the message, and it never covers a word. */ .hero__shine { position: absolute; top: -50%; left: -60%; width: 45%; height: 200%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: rotate(12deg); animation: sweep 7s ease-in-out infinite; } @keyframes sweep { 0% { left: -60%; } 55%, 100% { left: 130%; } } .hero__in { position: relative; width: min(1200px, 100% - (var(--pad) * 2)); margin-inline: auto; padding: clamp(52px, 9vw, 118px) 0 clamp(46px, 7vw, 96px); } .hero__h1 { font-family: var(--disp); font-weight: 400; font-size: clamp(52px, 12.5vw, 148px); line-height: .87; letter-spacing: .004em; text-transform: uppercase; margin: 0 0 24px; } .hero__h1 em { font-style: normal; color: var(--accent); } .hero__sub { font-size: clamp(17px, 2.1vw, 21px); color: rgba(255,255,255,.80); max-width: 46ch; margin-bottom: 32px; } .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; } .hero__ticks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); } .hero__ticks li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.85); } .hero__ticks li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D0C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; } /* ----------------------------------------------------------------- why -- */ .why { padding: var(--gap) 0; background: var(--smoke); } .why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } @media (max-width: 860px) { .why__grid { grid-template-columns: 1fr; } } .card { background: var(--paper); border: 1px solid var(--line-d); border-radius: 16px; padding: clamp(24px, 3vw, 34px); } .card__n { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--grey-2); line-height: 1; margin-bottom: 14px; } .card h3 { font-size: 21px; font-weight: 800; margin: 0 0 9px; letter-spacing: -.02em; } .card p { color: var(--grey); font-size: 15.5px; } /* ----------------------------------------------------------- estimator -- */ .est { background: var(--ink); color: #fff; padding: var(--gap) 0; } .est__head { text-align: center; margin-bottom: 44px; } .est__lede { color: rgba(255,255,255,.7); font-size: 17.5px; } .est__panel { display: grid; grid-template-columns: 1.2fr .9fr; gap: 22px; align-items: start; } @media (max-width: 940px) { .est__panel { grid-template-columns: 1fr; } } .est__controls { display: grid; gap: 28px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); } .ctl { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; } .ctl > label, .ctl legend { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); } .ctl output { font-family: var(--sans); font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--accent); } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; cursor: grab; } input[type="range"]:active { cursor: grabbing; } input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(var(--accent), var(--accent)) 0/var(--fill, 40%) 100% no-repeat, rgba(255,255,255,.18); } input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); } input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 3px 10px rgba(0,0,0,.45); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; } .chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .chip span { display: block; padding: 10px 17px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.82); cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease; } .chip input:hover + span { border-color: #fff; color: #fff; } .chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 800; } .chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; } .est__out { background: #fff; color: var(--ink); border-radius: var(--r); padding: clamp(24px, 3vw, 32px); position: sticky; top: 84px; box-shadow: 0 24px 60px rgba(0,0,0,.4); } @media (max-width: 940px) { .est__out { position: static; } } .est__label { font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--grey); } .est__price { font-family: var(--disp); font-size: clamp(54px, 8vw, 82px); line-height: 1; margin: 8px 0 2px; display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; } .est__price > span:first-child { font-size: .5em; color: var(--grey-2); } .est__price i { font-style: normal; font-size: .55em; color: var(--grey-2); margin: 0 6px; } .est__per { font-size: 14px; color: var(--grey); } .est__lines { margin: 18px 0 0; border-top: 2px solid var(--smoke); padding-top: 14px; display: grid; gap: 8px; } .est__lines li { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; color: var(--grey); } .est__lines li b { color: var(--ink); font-variant-numeric: tabular-nums; } /* A tint, not a slab. Solid yellow here sat directly above the solid yellow button and the two fought; only one thing in this card should be the loudest, and it is the one you click. */ .est__save { margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: rgba(255, 215, 10, .18); border: 1px solid rgba(255, 215, 10, .5); color: var(--ink); font-size: 14px; font-weight: 600; } .est__out .call { margin-top: 18px; } .est__fine { margin-top: 12px; font-size: 12.5px; color: var(--grey-2); line-height: 1.5; } /* ------------------------------------------------------------- band ----- */ .band { background: var(--accent); padding: clamp(48px, 7vw, 92px) 0; } .band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; } .band__h { font-family: var(--sans); font-weight: 700; font-size: clamp(25px, 3.1vw, 42px); line-height: 1.1; letter-spacing: -.035em; margin: 0; color: var(--ink); } /* Same one-line treatment as the section headings. */ .band__h span { font-weight: 400; } /* ---------------------------------------------------------------- rooms -- */ .rooms { padding: var(--gap) 0; } .rooms__lede { color: var(--grey); font-size: 17px; margin-bottom: 30px; } .tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .tab { background: var(--paper); border: 1px solid var(--line-d); border-radius: 10px; padding: 11px 18px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; } .tab:hover { border-color: var(--ink); } .tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--accent); } .panel { animation: pop .3s ease; } @keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px 26px; } .checks li { display: flex; gap: 11px; align-items: flex-start; padding: 12px 0; border-bottom: 2px solid var(--smoke); font-size: 16px; font-weight: 500; } .checks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D0C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; } /* Charged on top, or only on a move out. These get a plus, never a tick: a tick reads as "included", and an included thing that arrives with a price on the day is exactly the complaint that loses the customer. */ /* The honeypot. Off-screen rather than display:none, because some bots skip what is hidden and fill what is merely out of sight. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .checks li.is-extra { color: var(--grey); } .checks li.is-extra::before { background: var(--smoke); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361707C' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; } /* The badge rides at the end of the label rather than being pushed to the far edge of the column: in a four-up grid that gap left the price stranded on its own line, reading like a footnote instead of a price. */ .checks li.is-extra b { display: inline-block; margin-left: 7px; padding: 1px 8px; vertical-align: 1px; border-radius: 999px; background: var(--ink); color: var(--accent); font-size: 11.5px; font-weight: 700; white-space: nowrap; } /* ---------------------------------------------------------------- proof -- */ .proof { padding: var(--gap) 0; background: var(--smoke); } /* Two photographs now, so a four-column track would leave half the row empty. */ .proof__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; } .shot { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; background: #fff; } .shot--wide { grid-column: span 2; } @media (max-width: 720px) { .proof__grid { grid-template-columns: 1fr; } } .shot img { width: 100%; height: 320px; object-fit: cover; } .shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px; background: linear-gradient(transparent, rgba(var(--ink-rgb),.9)); color: #fff; font-weight: 700; font-size: 15.5px; } /* ----------------------------------------------------------------- book -- */ .book { padding: var(--gap) 0; } .book__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } @media (max-width: 900px) { .book__in { grid-template-columns: 1fr; } } /* This one shares its row with the form, so it has roughly half the width of the other section headings and needs its own size to stay on one line. */ .book .h2 { font-size: clamp(24px, 2.7vw, 37px); } .book__lede { color: var(--grey); font-size: 17.5px; max-width: 46ch; margin-bottom: 28px; } .book__est { margin-top: 22px; padding: 13px 16px; border-radius: 10px; background: var(--smoke); border-left: 5px solid var(--accent); font-size: 15px; color: var(--grey); } .book__est b { color: var(--ink); } .form { display: grid; gap: 14px; background: var(--ink); color: #fff; border-radius: var(--r); padding: clamp(22px, 3vw, 32px); } .form__h { font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: -.02em; } .field { display: grid; gap: 6px; min-width: 0; } .field label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); } .field input, .field select { width: 100%; padding: 13px 14px; background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 10px; font-size: 16px; color: #fff; } .field select option { color: #000; } .field input:focus { background: rgba(255,255,255,.13); } .field input.is-bad { border-color: #FF6B5A; } .field__err { font-size: 12.5px; color: #FF9C90; } .btn-sub { background: var(--accent); color: var(--ink); border: 0; border-radius: 12px; padding: 16px 24px; font-size: 17px; font-weight: 800; cursor: pointer; transition: background .16s ease, transform .12s ease; } .btn-sub:hover { background: var(--accent-l); } .btn-sub:active { transform: translateY(1px); } .btn-sub.is-loading { opacity: .65; pointer-events: none; } .form__status { font-size: 14.5px; color: var(--grey-2); } .form__status.is-good { color: var(--accent); font-weight: 700; } .form__status.is-bad { color: #FF9C90; font-weight: 700; } /* --------------------------------------------------------------- footer -- */ .foot { background: var(--ink); color: rgba(255,255,255,.6); padding: 46px 0; text-align: center; } .foot__name { font-family: var(--sans); font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.03em; } .foot__line { font-size: 14.5px; margin-top: 4px; } .foot__c { font-size: 13px; color: rgba(255,255,255,.4); margin-top: 14px; } /* ----------------------------------------------------------------- dock -- */ /* Fixed, not sliding in on a scroll threshold. On a phone the call button should never be something you have to go and find. */ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; align-items: center; gap: 10px; padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); background: rgba(var(--ink-rgb),.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); } @media (max-width: 900px) { .dock { display: flex; } } .dock .call--dock { flex: 1; padding: 15px 18px; font-size: 16.5px; } .dock__alt { flex: none; padding: 15px 16px; border-radius: 12px; border: 1px solid var(--line); color: #fff; font-weight: 700; font-size: 15px; } /* ══════════════════════════════════════════════════════════════════════════ HEADER + STAGE Modelled on the reference: white page, navy type, a single yellow, the company name set enormous behind the photograph, and an order bar lying across the bottom of the first screen. ══════════════════════════════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 90; background: var(--paper); } .nav__in { width: min(1320px, 100% - (var(--pad) * 2)); margin-inline: auto; display: flex; align-items: center; gap: 18px; height: 84px; } .brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; } .brand__mark { display: grid; place-items: center; } .brand__word { font-family: var(--sans); font-size: 25px; font-weight: 800; letter-spacing: -.035em; color: var(--ink); } .brand__word b { font-weight: 800; } /* One soft container holding the links, exactly as in the reference. */ .nav__pills { display: none; gap: 4px; background: var(--smoke); border-radius: 999px; padding: 5px; } .nav__pills a { padding: 9px 17px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink); transition: background .16s ease; } .nav__pills a:hover { background: var(--paper); } @media (min-width: 1000px) { .nav__pills { display: flex; } } .nav__act { display: flex; align-items: center; gap: 9px; } .iconbtn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--ink); color: var(--paper); transition: background .16s ease; } .iconbtn:hover { background: var(--ink-2); } .btn-y { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--ink); border-radius: 13px; padding: 14px 30px; font-size: 15.5px; font-weight: 700; white-space: nowrap; transition: background .16s ease, transform .12s ease; } .btn-y:hover { background: var(--accent-l); } .btn-y:active { transform: translateY(2px); } /* ------------------------------------------------------------- stage ----- */ /* The forearm is meant to leave the frame, but bleeding past the viewport gave the whole page a horizontal scrollbar. Clipped here so the image can run off the edge without the document growing to follow it. */ .stage { position: relative; background: var(--paper); padding-bottom: 104px; overflow: hidden; } .stage__in { width: min(1320px, 100% - (var(--pad) * 2)); margin-inline: auto; position: relative; } /* The copy has to stop before the photo column, or the two collide. */ .big { font-family: var(--sans); color: var(--ink); margin: 0; } .big__bold { display: block; font-size: clamp(38px, 5.6vw, 78px); font-weight: 800; letter-spacing: -.04em; line-height: 1.03; text-wrap: balance; } /* -------------------------------------------------- wordmark + photo ----- */ .stage__art { position: relative; padding-top: clamp(18px, 4vw, 54px); } /* Sized in vw so the whole word always fits the panel — at 21vw the "foyer" half was running straight off the canvas. nowrap keeps it on one line. */ .wordmark { font-family: var(--sans); font-weight: 700; font-size: clamp(60px, 13vw, 184px); line-height: .84; letter-spacing: -.055em; color: var(--ink); margin: 0; position: relative; z-index: 1; pointer-events: none; user-select: none; } .wordmark span { display: block; } /* "foyer" steps in under "fresh". Set in em so the stagger scales with the type instead of drifting apart at other sizes. */ .wordmark span + span { margin-left: .58em; } /* The headline sits under the name now, at a size that reads as a subtitle to it rather than competing with it. */ .big { margin: 22px 0 0; position: relative; z-index: 3; } .big__bold { display: block; /* Sized to clear the photograph on one line — the glove occupies the right half, so this has roughly 660px to live in at a desktop width. */ font-size: clamp(21px, 2.9vw, 41px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; white-space: nowrap; } /* A tall photo column on the right that rises up beside the copy and comes down over the last letters of the wordmark. That overlap is what gives the reference its depth — without it the two just sit side by side. */ /* Transparent artwork, so it sits over the tail of the wordmark exactly the way the reference's cut-out does. */ /* Sat too low against the wordmark before — lifted so the sponge reads level with the headline rather than sinking under the baseline. */ /* Anchored from the TOP, not the bottom. Hanging it off the bottom edge tied its height to the wordmark and left a slab of dead white under the nav; the hand should start just below the header the way the reference does, and run down across the letters from there. Pushed further off the right edge so the forearm leaves the frame instead of crowding the headline. */ .stage__hand { position: absolute; right: -9%; top: 0; bottom: auto; width: 58%; max-width: 820px; z-index: 2; pointer-events: none; } .stage__hand picture { display: block; } /* ------------------------------------------------------------ the pane -- */ .pane { position: absolute; z-index: 3; /* Kept off the wordmark: at -7% the pane's edge cut a visible grey box across the tail of "freshfoyer". */ left: 0; right: -4%; top: -12%; bottom: -14%; border-radius: 10px; overflow: hidden; /* No hard rectangle. A framed box drew a grey edge straight through the tail of "freshfoyer"; the pane now dissolves at its own borders so it reads as glass catching the light rather than a panel pasted on. */ background: linear-gradient(160deg, rgba(226,240,248,.14), rgba(255,255,255,.02) 45%, rgba(214,232,244,.11)); -webkit-mask-image: radial-gradient(96% 104% at 76% 40%, #000 38%, transparent 86%); mask-image: radial-gradient(96% 104% at 76% 40%, #000 38%, transparent 86%); } .pane > span { position: absolute; inset: 0; display: block; } /* Haze everywhere except a band that follows the sponge. Done with a moving background rather than a mask: masks are the obvious tool but they are the one thing Safari still gets wrong often enough to matter on a client site. */ .pane__smudge { /* With the wipe parked there is no sponge for a clean streak to follow, so the glass is just glass: an even breath of haze, no travelling band. */ background: rgba(219,233,244,.16); } @keyframes squeegee { 0%, 100% { background-position: 0 16%; } 50% { background-position: 0 74%; } } /* A fixed reflection, so the surface reads as glass and not as fog. */ .pane__glint { background: linear-gradient(112deg, transparent 27%, rgba(255,255,255,.40) 33%, rgba(255,255,255,.08) 38%, transparent 44%), linear-gradient(112deg, transparent 55%, rgba(255,255,255,.24) 58%, transparent 62%); mix-blend-mode: screen; } /* One glazing bar is enough to say "window" without building a whole frame. */ .pane__bar { inset: auto 8% 36% 26%; height: 6px; border-radius: 3px; background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(var(--ink-rgb), .10)); box-shadow: 0 1px 0 rgba(var(--ink-rgb), .13), 0 -1px 0 rgba(255,255,255,.75); } @media (max-width: 860px) { .pane { left: -3%; right: -3%; top: -8%; bottom: -8%; } } /* The wipe: the hand travels up and down as though working a surface, with a slight roll at each end so it does not read as a lift. */ /* Movement parked for now — the keyframes are kept so it is one line to put back once the composition is settled. */ .stage__hand .hand { width: 100%; height: auto; transform-origin: 78% 55%; } @keyframes wipe { 0%, 100% { transform: translateY(-26px) rotate(-1.4deg); } 50% { transform: translateY(30px) rotate(1.6deg); } } /* The 1100-1320 nudge is gone with the copy block it was compensating for — the art now starts at the top of the stage, so one anchor holds everywhere. */ @media (max-width: 1099px) { .stage__hand { width: 56%; top: 0; right: -10%; } .wordmark { font-size: clamp(52px, 12.5vw, 130px); } } @media (max-width: 900px) { /* Touch targets. These selects were 25px tall: fine with a mouse, a poke in the dark with a thumb, and they are the first control on the page. */ .order__f { padding: 10px 14px; } .order__f select { min-height: 34px; font-size: 16px; } .order__go { min-height: 52px; } input[type="range"] { height: 44px; } .cue { padding: 12px 26px 8px; font-size: 13.5px; } } @media (max-width: 860px) { /* The rule above sets top:-180px for the tablet range. Switching back to static flow here without clearing it left the photograph riding 180px up over the paragraph — unreadable, and the actual reason the phone layout looked broken. Every offset gets reset, not just position. */ .stage__hand { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 86%; max-width: 420px; margin: 4px auto 0; } /* The glass is a desktop nicety. On a 390px screen it only fogs the one photograph the page has. */ .pane { display: none; } .stage { padding-bottom: 76px; } .stage__in { display: flex; flex-direction: column; } .stage__art { margin-top: 18px; } /* left, like the headline under it — centred name over left-set copy read as two different layouts sharing a screen. */ .wordmark { font-size: clamp(44px, 15vw, 96px); } .order { margin-top: 26px; } } /* ------------------------------------------------------------- order ----- */ .order { position: relative; z-index: 4; margin-top: clamp(26px, 4vw, 54px); text-align: center; } .order__h { font-size: clamp(19px, 2.3vw, 25px); font-weight: 700; color: var(--ink); margin-bottom: 16px; } .order__row { display: flex; align-items: stretch; gap: 0; background: var(--paper); border: 1px solid rgba(var(--ink-rgb), .10); border-radius: 16px; box-shadow: 0 18px 46px rgba(var(--ink-rgb), .12); padding: 8px; max-width: 1080px; margin-inline: auto; text-align: left; } @media (max-width: 900px) { .order__row { flex-wrap: wrap; gap: 6px; } } .order__f { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; padding: 8px 16px; border-right: 1px solid rgba(var(--ink-rgb), .10); } .order__f:last-of-type { border-right: 0; } @media (max-width: 900px) { .order__f { flex: 1 1 46%; border-right: 0; } } .order__f > span { font-size: 12px; color: var(--grey-2); font-weight: 500; } .order__f select { border: 0; background: transparent; padding: 0; font-size: 15.5px; font-weight: 600; color: var(--ink); cursor: pointer; width: 100%; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A1AC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 15px; padding-right: 20px; } .order__go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 14px; background: var(--accent); color: var(--ink); border-radius: 12px; padding: 15px 16px 15px 26px; font-size: 16px; font-weight: 700; white-space: nowrap; transition: background .16s ease; } .order__go:hover { background: var(--accent-l); } .order__go i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); } @media (max-width: 900px) { .order__go { flex: 1 1 100%; justify-content: center; } } /* --------------------------------------------------------------- cue ----- */ /* The scroll prompt sits in a tab hanging off the bottom of the white panel. */ .cue { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 5; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: var(--paper); padding: 14px 40px 10px; border-radius: 26px 26px 0 0; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; } .cue::before, .cue::after { content: ""; position: absolute; bottom: 0; width: 26px; height: 26px; background: radial-gradient(circle at 0 0, transparent 26px, var(--paper) 27px); } .cue::before { left: -26px; } .cue::after { right: -26px; transform: scaleX(-1); } .cue svg { animation: cuebob 2s ease-in-out infinite; } @keyframes cuebob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ------------------------------------------------------- scroll progress -- */ .prog { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 120; background: transparent; pointer-events: none; } .prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; } /* ------------------------------------------------------- hero headline --- */ /* Each line is clipped by its own box and rides up from underneath. */ .hero__h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; } .hero__h1 .ln b { display: block; font-weight: inherit; transform: translateY(112%); animation: rise .85s cubic-bezier(.16,.84,.28,1) forwards; } .hero__h1 .ln:nth-child(1) b { animation-delay: .10s; } .hero__h1 .ln:nth-child(2) b { animation-delay: .22s; } .hero__h1 .ln:nth-child(3) b { animation-delay: .34s; } @keyframes rise { to { transform: translateY(0); } } /* A slow highlight travelling through the accent word. */ .hero__h1 em { font-style: normal; background: linear-gradient(100deg, var(--accent) 20%, #fff 42%, var(--accent) 62%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmer 5.5s ease-in-out 1.2s infinite; } @keyframes shimmer { 0%, 22% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } } /* ---------------------------------------------------------------- stats -- */ /* Was a full yellow slab with billboard numerals. With the CTA band already yellow, a second one flattened the whole page — this one is quiet and lets the band be the loud moment. */ .stats { background: var(--paper); padding: clamp(34px, 5vw, 58px) 0; border-block: 1px solid var(--line-d); } /* Two tiles now: the crew-size and visit-length claims were not true and came off. Held to a readable measure so a pair of numbers does not drift to the far edges of a wide screen. */ .stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; max-width: 640px; margin-inline: auto; } @media (max-width: 780px) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; } } .stat { text-align: center; padding: 4px 16px; border-right: 1px solid var(--line-d); } .stat:last-child { border-right: 0; } @media (max-width: 780px) { .stat:nth-child(2n) { border-right: 0; } } .stat b { display: block; font-family: var(--sans); font-weight: 700; font-size: clamp(34px, 4.6vw, 56px); line-height: 1; letter-spacing: -.04em; color: var(--ink); } .stat span { display: block; font-size: 13.5px; color: var(--grey); margin-top: 8px; } /* ------------------------------------------------- checklist stagger ----- */ /* The hidden state lives in the keyframes, not on the element, with fill-mode backwards holding it through the stagger delay. Set as a base style the items were invisible until the animation ran — so anything that stopped it (an old engine, a blocked stylesheet) left an empty list where the checklist should be. Now the natural state is visible and the animation only ever adds. */ .panel.is-live .checks li { animation: tick .42s cubic-bezier(.2,.8,.3,1) backwards; } @keyframes tick { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------- proof hover ---- */ .shot img { transition: transform .6s cubic-bezier(.2,.7,.3,1); } .shot:hover img { transform: scale(1.06); } .shot figcaption { transition: padding-bottom .35s ease; } .shot:hover figcaption { padding-bottom: 20px; } /* --------------------------------------------------------- estimator bar - */ .est__gauge { height: 8px; border-radius: 999px; background: var(--smoke); overflow: hidden; margin: 14px 0 2px; } .est__gauge i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .35s cubic-bezier(.2,.8,.3,1); } /* --------------------------------------------------------- theme picker -- */ /* Only rendered when ?themes=1 is in the URL. A customer never sees this; it exists so a palette can be judged on the real page instead of a swatch. */ .picker { position: fixed; right: 14px; bottom: 14px; z-index: 200; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 999px; background: rgba(20,20,20,.9); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.4); } @media (max-width: 900px) { .picker { bottom: 86px; } } .picker__lab { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); padding-left: 4px; } .picker button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; } .picker button[aria-pressed="true"] { border-color: #fff; transform: scale(1.14); } /* --------------------------------------------------------------- reveal -- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hero__shine { animation: none; } .stage__hand .hand, .pane__smudge, .cue svg { animation: none; transform: none; } /* with no wipe there is no streak to follow, so the glass just reads clean */ .pane__smudge { background: rgba(223,235,244,.22); } .panel { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } .call, .tab, .chip span, .btn-sub { transition: none; } /* Motion is decoration here; the content underneath it must never be dependent on the animation having run. */ .hero__h1 .ln b { transform: none; animation: none; } .hero__h1 em { animation: none; background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); } .panel.is-live .checks li { opacity: 1; transform: none; animation: none; } .shot img, .shot figcaption { transition: none; } .prog i, .est__gauge i { transition: none; } }