/* ============================================================ Concept "Atelier" — Remondiabi24 Built from the client's sixth Google Stitch output, "Nordic Architectural Atelier". The rules the design lives by, and which everything below follows: 1. Nothing is rounded. Radius is 0 on buttons, inputs, cards, images and the drawer. Softness comes from warm chalky colour and white space, never from corner radii. 2. There are no drop shadows. Depth is a hairline (1px var(--line)) and a change of material tone. 3. Structure is drawn, not implied: index numerals (01…05), uppercase micro-labels with wide tracking, and hairline rules that run edge to edge. Every colour is a custom property, so a re-skin is an edit to the :root block and nothing else. ============================================================ */ :root { /* --- material palette --- */ --bg: #f7f6f2; /* pale limestone, the substrate */ --surface: #eae6de; /* troweled clay, recessed panels */ --surface-2: #ffffff; /* the one bright plane, for forms */ --text: #18181b; /* graphite, all structural type */ --muted: #8a7e72; /* weathered silt, metadata */ --line: rgba(24, 24, 27, .11); --line-strong: rgba(24, 24, 27, .22); --accent: #c9933e; /* burnished brass, focus only */ --accent-deep: #8a6420; --dark: #18181b; --dark-2: #2e2820; /* bronze-tinted hover on dark */ --dark-text: #f2f1ed; --dark-muted: #9b9188; --dark-line: rgba(242, 241, 237, .16); --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --gutter: clamp(1.25rem, 4vw, 4rem); --maxw: 1400px; --hdr-h: 76px; --ease: cubic-bezier(.2, .7, .2, 1); } *, *::before, *::after { box-sizing: border-box; } /* `clip`, not `hidden`: overflow-x:hidden would make a scroll container and break position:sticky further down the page. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--hdr-h) + 12px); } body { margin: 0; background: var(--bg); color: var(--muted); font-family: var(--font-body); font-size: .9375rem; line-height: 1.7; overflow-x: clip; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sr:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; clip: auto; z-index: 200; background: var(--text); color: var(--bg); padding: .7rem 1.1rem; font: 600 .75rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; } /* ---------- type ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); font-weight: 400; /* never bold: this is a serif monograph */ margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4rem); line-height: 1.08; letter-spacing: -.02em; } h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.5rem); line-height: 1.16; letter-spacing: -.015em; } h3 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -.005em; font-weight: 500; } h4 { font-size: 1.0625rem; line-height: 1.35; } p { margin: 0; } .lead { font-size: clamp(1rem, .96rem + .3vw, 1.125rem); line-height: 1.72; max-width: 62ch; } /* uppercase micro-data: the blueprint labels the whole design leans on */ .lbl { font-family: var(--font-body); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .lbl--ink { color: var(--text); } .lbl--brass { color: var(--accent-deep); } .num { font-variant-numeric: tabular-nums; } section { padding-block: clamp(3.25rem, 6.5vw, 6rem); } /* ---------- section header with its index numeral ---------- */ .shead { display: grid; gap: 1rem; max-width: 62ch; } .shead__ix { display: flex; align-items: center; gap: .9rem; font-family: var(--font-display); font-size: .9375rem; color: var(--accent-deep); } .shead__ix::after { content: ''; height: 1px; width: clamp(2rem, 6vw, 5rem); background: var(--line-strong); } .shead__ix span { letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-body); font-size: .6875rem; font-weight: 600; color: var(--muted); } /* ---------- rules ---------- */ .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-body); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 1rem 1.75rem; border: 1px solid transparent; border-radius: 0; background: none; cursor: pointer; white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .btn svg { width: 14px; height: 14px; flex: none; transition: transform .3s var(--ease); } .btn:hover svg:last-child { transform: translateX(3px); } .btn--solid { background: var(--text); color: var(--bg); position: relative; } .btn--solid::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .btn--solid:hover { background: var(--dark-2); } .btn--solid:hover::after { transform: scaleX(1); } .btn--brass { background: var(--accent); color: #fff; } .btn--brass:hover { background: var(--accent-deep); } .btn--frame { border-color: var(--line-strong); color: var(--text); } .btn--frame:hover { background: var(--surface); border-color: var(--text); } .btn--plate { background: rgba(247, 246, 242, .92); color: var(--text); backdrop-filter: blur(6px); } .btn--plate:hover { background: #fff; } .btn--ghost { border-color: var(--dark-line); color: var(--dark-text); } .btn--ghost:hover { background: var(--dark-text); color: var(--text); border-color: var(--dark-text); } .btn--sm { padding: .7rem 1.1rem; font-size: .625rem; } /* Full-width buttons must be allowed to wrap. `white-space: nowrap` on .btn is right for buttons sitting in a row, but on a block button it sets a min-content width the grid column then has to honour — the Russian estimator CTA pushed the whole page 31px wider than a 375px phone. */ .btn--block { width: 100%; white-space: normal; text-align: center; line-height: 1.35; } /* a text action with a brass underline on hover */ .act { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text); padding-bottom: 2px; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s var(--ease); } .act:hover { background-size: 100% 1px; } .act svg { width: 13px; height: 13px; transition: transform .3s var(--ease); } .act:hover svg { transform: translateX(3px); } /* material chip */ .chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line-strong); background: var(--bg); color: var(--muted); padding: .35rem .75rem; font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .chip--brass { color: var(--accent-deep); border-color: rgba(201, 147, 62, .5); } /* ========================================================= HEADER ========================================================= */ .hdr { position: fixed; inset: 0 0 auto; z-index: 90; background: rgba(247, 246, 242, .93); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background .3s, border-color .3s; } .hdr__in { min-height: var(--hdr-h); display: flex; align-items: center; gap: 1rem; } .brand { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; } .brand b { font-family: var(--font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } .brand b i { font-style: normal; color: var(--accent-deep); } .brand small { font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .nav { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.75rem); } .nav a { text-decoration: none; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-block: .35rem; position: relative; } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); } .nav a:hover { color: var(--text); } .nav a:hover::after { transform: scaleX(1); transform-origin: left; } .nav a[aria-current="page"] { color: var(--text); } .nav a[aria-current="page"]::after { transform: scaleX(1); } .hdr__end { display: flex; align-items: center; gap: .65rem; } .langs { display: flex; border: 1px solid var(--line); } .langs button { appearance: none; border: 0; background: none; cursor: pointer; font-family: var(--font-body); font-size: .5625rem; font-weight: 600; letter-spacing: .14em; color: var(--muted); padding: .45rem .5rem; transition: background .2s, color .2s; } .langs button:hover { color: var(--text); } .langs button.is-active { background: var(--text); color: var(--bg); } .hdr__tel { text-decoration: none; display: flex; flex-direction: column; align-items: flex-end; padding-inline: .35rem; } .hdr__tel small { font-size: .5625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); } .hdr__tel b { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; color: var(--text); letter-spacing: -.01em; } .burger { display: none; position: relative; width: 40px; height: 40px; border: 1px solid var(--line-strong); background: none; cursor: pointer; padding: 0; } /* absolutely centred bars, so the open state is a pure rotation and the two halves meet exactly — a grid would leave a chevron. */ .burger span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--text); transform: translate(-50%, -50%) translateY(var(--y, 0)); transition: transform .3s var(--ease), opacity .2s; } .burger span:nth-child(1) { --y: -5px; } .burger span:nth-child(3) { --y: 5px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); } /* ---------- drawer ---------- */ .drawer { position: fixed; inset: var(--hdr-h) 0 auto; z-index: 89; background: var(--bg); border-bottom: 1px solid var(--text); padding: 1.25rem var(--gutter) 1.75rem; display: grid; gap: .25rem; transform: translateY(-14px); opacity: 0; visibility: hidden; transition: transform .34s var(--ease), opacity .24s, visibility .24s; max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; } .drawer.is-open { transform: none; opacity: 1; visibility: visible; } .drawer a.d__link { text-decoration: none; font-family: var(--font-display); font-size: 1.375rem; color: var(--text); padding: .7rem 0; border-bottom: 1px solid var(--line); } .drawer__foot { display: grid; gap: .75rem; margin-top: 1rem; justify-items: start; } .drawer__foot .btn { width: 100%; } /* ========================================================= HERO ========================================================= */ /* ---------- full-bleed film ---------- The hero is the video, edge to edge, with the type over it. `object-fit: cover` on a hero that is not 16:9 always crops something — the fix is not to stop cropping but to choose WHAT gets cropped. `object-position` is biased low so the crop comes off the CEILING, which is empty in every frame, and never off the floor, furniture and finished detail at the bottom. That is what "cut off at the bottom" was: a centred crop taking 126px off the top and 126px off the bottom at 1920px. Now it takes the full 252px off the top and nothing at all off the bottom. */ .hero { position: relative; padding: 0; isolation: isolate; min-height: min(92vh, 860px); display: flex; } .hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--dark); } .hero__still, .hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; } /* The video is transparent until app.js decides to run it, so a blocked autoplay or a narrow screen simply leaves the finished-room still showing. The fade is slow on purpose: the two layers are different rooms at that moment and a hard cut reads as a glitch. */ .hero__vid { opacity: 0; transition: opacity .9s var(--ease); } .hero__vid.is-on { opacity: 1; } /* ---------- scrim ---------- Kept as light as the type will bear. The video runs from a dark derelict room to a bright white bedroom, so a wash strong enough for the bright end buries the dark one: at the strengths this started out with, the two gradients composited to ~99% black in the bottom-left corner and still 47% in the lightest one. Both now reach ZERO before 68% across, so the right-hand side of the room is untouched, and the glyphs are protected by their own text-shadow instead. Measured contrast in the headline band: 3.55:1 at second 0, 3.30:1 at second 10, against a near-white headline — over the 3:1 AA floor for large text, but not by much, so re-measure rather than eyeball it if the asset ever changes. */ .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(24, 24, 27, .82) 0%, rgba(24, 24, 27, .3) 34%, rgba(24, 24, 27, 0) 62%), linear-gradient(to right, rgba(24, 24, 27, .8) 0%, rgba(24, 24, 27, .48) 26%, rgba(24, 24, 27, .14) 50%, rgba(24, 24, 27, 0) 68%); } /* the drafting matrix: four hairlines held at the container edges */ .hero__grid { position: absolute; inset: 0; z-index: -1; display: flex; justify-content: space-between; padding-inline: var(--gutter); opacity: .18; pointer-events: none; } .hero__grid span { width: 1px; background: var(--dark-text); } @media (max-width: 900px) { .hero__grid span:nth-child(2), .hero__grid span:nth-child(3) { display: none; } } .hero__in { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2rem; padding-top: calc(var(--hdr-h) + clamp(4rem, 12vh, 8rem)); padding-bottom: clamp(2rem, 4vw, 3rem); } .hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; } .hero__badges span { display: inline-flex; align-items: center; gap: .5rem; background: rgba(247, 246, 242, .92); backdrop-filter: blur(8px); color: var(--text); padding: .5rem .85rem; font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .hero__badges b { color: var(--accent-deep); } /* The headline is held to ~18 characters a line so it breaks like a monograph title; the lead underneath is not — it gets its own measure. The shadow is what lets the scrim stay light. It does the legibility work a heavy full-canvas wash would otherwise have to do, and it costs a few pixels around the glyphs instead of the whole picture. Two stops: a tight one for edge definition, a wide soft one for when a bright window lands directly behind a letter. */ .hero h1 { color: var(--bg); max-width: 18ch; text-shadow: 0 1px 2px rgba(10, 10, 12, .5), 0 2px 22px rgba(10, 10, 12, .45); } .hero__eyebrow { display: flex; align-items: center; gap: .75rem; color: var(--bg); margin-bottom: 1.1rem; text-shadow: 0 1px 3px rgba(10, 10, 12, .6); } .hero__eyebrow::before { content: ''; width: 2.5rem; height: 1px; background: var(--accent); flex: none; } .hero__lead { color: #ded9d0; max-width: 54ch; margin-top: 1.25rem; text-shadow: 0 1px 2px rgba(10, 10, 12, .55), 0 2px 16px rgba(10, 10, 12, .4); } .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } /* ---------- metric plates ---------- Was a bare row of numbers on hairline dividers. Now each is a plate with its own index numeral and a brass rule that draws in on scroll, and fills with clay on hover. Still sharp-cornered and shadowless — the extra interest comes from structure and tone, which is the whole concept's argument. */ .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-left: 0; border-right: 0; } .metric { position: relative; background: var(--bg); padding: clamp(1.25rem, 2.4vw, 1.9rem) clamp(1rem, 2vw, 1.5rem); transition: background .35s var(--ease); } .metric:hover { background: var(--surface); } /* the drafting index, top right — quiet until you hover it */ .metric__ix { position: absolute; top: .9rem; right: clamp(1rem, 2vw, 1.5rem); font-family: var(--font-body); font-size: .5625rem; font-weight: 600; letter-spacing: .14em; color: var(--muted); opacity: .5; transition: opacity .35s var(--ease), color .35s var(--ease); } .metric:hover .metric__ix { opacity: 1; color: var(--accent-deep); } /* brass rule above the figure, drawn in with the reveal */ .metric__rule { display: block; height: 2px; width: 1.75rem; background: var(--accent); margin-bottom: 1rem; transform: scaleX(0); transform-origin: left; transition: transform .65s var(--ease) .15s, width .35s var(--ease); } .metric.in .metric__rule { transform: scaleX(1); } .metric:hover .metric__rule { width: 2.75rem; } .metrics b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); color: var(--text); line-height: 1.1; transition: transform .35s var(--ease); } .metric:hover b { transform: translateX(3px); } .metrics span { display: block; font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .5rem; } @media (max-width: 720px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { .metrics { grid-template-columns: 1fr; } } /* ========================================================= 01 — PROJECT ARCHIVE (bento) ========================================================= */ .arch__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(12, 1fr); margin-top: clamp(2rem, 4vw, 3.25rem); } .tile { background: var(--bg); display: flex; flex-direction: column; min-width: 0; } .tile--a { grid-column: span 7; } .tile--b { grid-column: span 5; } .tile--c { grid-column: span 5; } .tile--d { grid-column: span 7; } @media (max-width: 860px) { .tile { grid-column: 1 / -1 !important; } } .tile__shot { position: relative; overflow: hidden; } .tile__shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease); } .tile--b .tile__shot img, .tile--c .tile__shot img { aspect-ratio: 4 / 3; } .tile:hover .tile__shot img { transform: scale(1.035); } .tile__meta { position: absolute; left: 0; top: 0; display: flex; gap: 1px; background: var(--line); } .tile__meta span { background: rgba(247, 246, 242, .94); padding: .45rem .7rem; font-size: .5625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text); } .tile__body { padding: clamp(1.1rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; gap: .75rem; flex: 1; background: var(--surface); } .tile__body h3 { text-wrap: balance; } .tile__body p { font-size: .875rem; } .tile__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* ========================================================= BEFORE / AFTER ========================================================= */ /* The homepage teaser is gone — enne-ja-parast.html owns this now. What follows is the stage itself, shared with ../ba.js. */ /* the comparison stage itself — styling for the shared ba.js contract */ .ba-stage { position: relative; overflow: hidden; background: var(--text); aspect-ratio: 4 / 5; width: 100%; border: 1px solid var(--line); touch-action: pan-y; } .ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ba-stage .ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); } .ba-tag { position: absolute; top: .75rem; z-index: 3; background: rgba(247, 246, 242, .93); color: var(--text); padding: .35rem .6rem; font-size: .5625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; } .ba-tag--l { left: .75rem; } .ba-tag--r { right: .75rem; } .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: var(--accent); z-index: 4; pointer-events: none; } .ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); border: 1px solid var(--accent); background: rgba(247, 246, 242, .88); } .ba-handle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--accent-deep); z-index: 1; } /* the native range IS the drag surface: full-bleed and invisible */ .ba-range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; appearance: none; background: none; cursor: ew-resize; opacity: 0; } .ba-range::-webkit-slider-thumb { appearance: none; width: 44px; height: 100%; } .ba-range::-moz-range-thumb { width: 44px; height: 100%; border: 0; } .ba-range:focus-visible { opacity: 1; outline: 1px solid var(--accent); outline-offset: 2px; } .ba-hint { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; } /* ========================================================= 02 — ESTIMATOR ========================================================= */ .calc__box { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 900px) { .calc__box { grid-template-columns: minmax(0, 1fr); } } .calc__ctrl { min-width: 0; background: var(--surface); padding: clamp(1.35rem, 3vw, 2.5rem); display: grid; gap: 2rem; align-content: start; } .calc__field > .lbl { display: block; margin-bottom: .9rem; } .calc__area { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .calc__area output { font-family: var(--font-display); font-size: 1.75rem; color: var(--text); line-height: 1; } .calc__range { width: 100%; appearance: none; height: 1px; background: var(--line-strong); margin: 1.4rem 0 .6rem; } .calc__range::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--text); border: 0; cursor: pointer; transition: background .2s; } .calc__range::-webkit-slider-thumb:hover { background: var(--accent); } .calc__range::-moz-range-thumb { width: 16px; height: 16px; background: var(--text); border: 0; border-radius: 0; cursor: pointer; } .calc__ticks { display: flex; justify-content: space-between; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .opts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } .opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 620px) { .opts--3 { grid-template-columns: 1fr; } } .opt { position: relative; background: var(--bg); } .opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .opt span { display: block; padding: 1rem; transition: background .25s; } .opt b { display: block; font-size: .8125rem; font-weight: 600; color: var(--text); letter-spacing: .01em; } .opt small { display: block; font-size: .75rem; line-height: 1.45; margin-top: .25rem; } .opt input:checked + span { background: var(--text); } .opt input:checked + span b { color: var(--bg); } .opt input:checked + span small { color: var(--dark-muted); } .opt input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: -3px; } .opt:hover input:not(:checked) + span { background: var(--surface); } .opt__flag { position: absolute; top: 0; right: 0; z-index: 2; background: var(--accent); color: #fff; font-size: .5rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .4rem; pointer-events: none; } .calc__out { min-width: 0; background: var(--dark); color: var(--dark-muted); padding: clamp(1.35rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1.25rem; } .calc__out .lbl { color: var(--dark-muted); } .calc__sum { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem); color: var(--dark-text); line-height: 1.1; letter-spacing: -.02em; } .calc__note { font-size: .6875rem; line-height: 1.6; color: var(--dark-muted); border-top: 1px solid var(--dark-line); padding-top: 1rem; } .calc__inc { display: grid; gap: .55rem; margin: 0; padding: 0; } .calc__inc li { list-style: none; display: flex; gap: .6rem; font-size: .8125rem; color: var(--dark-text); align-items: baseline; } .calc__inc li::before { content: ''; width: 5px; height: 5px; background: var(--accent); flex: none; transform: translateY(-2px); } .calc__out .btn { margin-top: auto; } /* ========================================================= 03 — PRICE LIST ========================================================= */ .prices { background: var(--surface); border-block: 1px solid var(--line); } .prices__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 1080px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pgrid { grid-template-columns: 1fr; } } .pcard { background: var(--bg); padding: clamp(1.1rem, 2.2vw, 1.5rem); display: flex; flex-direction: column; gap: .6rem; transition: background .3s var(--ease); } .pcard:hover { background: var(--surface-2); } .pcard h3 { font-size: 1.125rem; } .pcard p { font-size: .8125rem; line-height: 1.55; } .pcard__price { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: .4rem; } .pcard__price b { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); font-weight: 400; } .pcard__price span { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pcard--dark { background: var(--dark); color: var(--dark-muted); } .pcard--dark:hover { background: var(--dark); } .pcard--dark h3 { color: var(--dark-text); } .pcard--dark ul { display: grid; gap: .5rem; margin: 0; padding: 0; } .pcard--dark li { list-style: none; display: flex; gap: .55rem; font-size: .8125rem; align-items: baseline; } .pcard--dark li::before { content: ''; width: 5px; height: 5px; background: var(--accent); flex: none; transform: translateY(-2px); } .pcard--dark .pcard__price { border-top-color: var(--dark-line); } .pcard--dark .pcard__price b { color: var(--accent); } /* ========================================================= 04 — PROJECT MANAGERS + REVIEW ========================================================= */ .dirs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 760px) { .dirs__grid { grid-template-columns: 1fr; } } .dir { background: var(--bg); padding: clamp(1.25rem, 2.6vw, 2rem); display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; } @media (max-width: 420px) { .dir { grid-template-columns: 1fr; } } /* Greyscale at rest so the two portraits read as a matched pair, full colour on hover or keyboard focus. */ .dir__shot { width: 92px; height: 116px; object-fit: cover; object-position: top center; border: 1px solid var(--line); filter: grayscale(1) contrast(1.02); transition: filter .5s var(--ease), border-color .35s var(--ease); } .dir:hover .dir__shot, .dir:focus-within .dir__shot { filter: grayscale(0) contrast(1); border-color: var(--accent); } .dir h3 { margin-top: .35rem; } .dir p { font-size: .8125rem; margin-top: .5rem; } .dir__contact { display: grid; gap: .3rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } .dir__contact a { text-decoration: none; font-size: .8125rem; color: var(--text); display: inline-flex; gap: .5rem; align-items: center; width: fit-content; } .dir__contact a:hover { color: var(--accent-deep); } .dir__contact svg { width: 13px; height: 13px; color: var(--muted); flex: none; } .rev { background: var(--dark); color: var(--dark-text); margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } @media (max-width: 760px) { .rev { grid-template-columns: 1fr; } } .rev__stars { color: var(--accent); letter-spacing: .3em; font-size: .8125rem; } /* ---------- rotating reviews ---------- Slides are stacked absolutely so the dark band never changes height as they swap — the three quotes are different lengths, and a band that resizes every few seconds is worse than no rotation at all. The first slide stays in flow to give the stack its height, and `min-height` holds it to the tallest of the three. */ .revs { position: relative; min-height: 11rem; } .revs__slide { position: absolute; left: 0; right: 0; top: 2.2rem; margin: 0; opacity: 0; visibility: hidden; } .revs__slide:first-of-type { position: relative; top: 0; margin-top: .9rem; } .revs__slide.is-on { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: no-preference) { .revs__slide { transition: opacity .7s var(--ease), visibility .7s, transform .7s var(--ease); transform: translateY(6px); } .revs__slide.is-on { transform: none; } } .revs blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.0625rem, .95rem + .7vw, 1.4375rem); line-height: 1.5; color: var(--dark-text); font-style: italic; } .revs figcaption { margin-top: 1rem; } .revs figcaption b { display: block; font-size: .8125rem; font-weight: 600; color: var(--dark-text); letter-spacing: .02em; } .revs figcaption span { display: block; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-muted); margin-top: .2rem; } .revs__dots { position: absolute; left: 0; bottom: 0; display: flex; gap: .3rem; } .revs__dots button { appearance: none; border: 0; background: none; padding: .35rem .12rem; cursor: pointer; line-height: 0; } .revs__dots i { display: block; width: 16px; height: 2px; background: var(--dark-line); transition: background .3s var(--ease), width .3s var(--ease); } .revs__dots button:hover i { background: var(--dark-muted); } .revs__dots button[aria-current="true"] i { background: var(--accent); width: 26px; } .revs__dots button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } @media (max-width: 620px) { .revs { min-height: 15rem; } } .rev__score { text-align: right; border-left: 1px solid var(--dark-line); padding-left: clamp(1.5rem, 3vw, 3rem); } @media (max-width: 760px) { .rev__score { text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid var(--dark-line); padding-top: 1.25rem; } } .rev__score b { display: block; font-family: var(--font-display); font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); color: var(--accent); line-height: 1; } .rev__score span { display: block; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-muted); margin-top: .5rem; } /* ========================================================= 05 — BOOKING ========================================================= */ .book { background: var(--surface); border-top: 1px solid var(--line); } .book__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 940px) { .book__grid { grid-template-columns: 1fr; } } .steps { display: grid; gap: 0; margin: 2rem 0 0; padding: 0; } .steps li { list-style: none; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); } .steps li:last-child { border-bottom: 1px solid var(--line); } .steps b { font-family: var(--font-display); font-size: 1.125rem; color: var(--accent-deep); } .steps h4 { font-size: 1rem; } .steps p { font-size: .8125rem; margin-top: .2rem; } .book__urgent { margin-top: 1.75rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .book__urgent a { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); text-decoration: none; letter-spacing: -.01em; } .book__urgent a:hover { color: var(--accent-deep); } .form { background: var(--surface-2); border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1rem; } .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } } .field { display: grid; gap: .4rem; min-width: 0; } .field > span { font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: .875rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 0; padding: .7rem .8rem; width: 100%; min-width: 0; transition: border-color .2s, background .2s; } .field textarea { resize: vertical; min-height: 92px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); background: var(--surface-2); } .consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .75rem; line-height: 1.5; } /* square checkbox with a brass dot, per the design's selection controls */ .consent input { appearance: none; width: 16px; height: 16px; flex: none; margin: 2px 0 0; border: 1px solid var(--text); background: var(--bg); cursor: pointer; display: grid; place-content: center; } .consent input::after { content: ''; width: 5px; height: 5px; background: var(--accent); transform: scale(0); transition: transform .18s var(--ease); } .consent input:checked { background: var(--text); } .consent input:checked::after { transform: scale(1); } .form__ok { display: none; font-size: .8125rem; color: var(--accent-deep); border-top: 1px solid var(--line); padding-top: 1rem; } .form.is-sent .form__ok { display: block; } /* ========================================================= FOOTER + CALL BAR ========================================================= */ .foot { background: var(--dark); color: var(--dark-muted); padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; font-size: .8125rem; } .foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); } @media (max-width: 900px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } } .foot .brand b { color: var(--dark-text); font-size: 1rem; } .foot .brand b i { color: var(--accent); } .foot .brand small { color: var(--dark-muted); } .foot p { margin-top: 1rem; max-width: 40ch; line-height: 1.6; } .foot h4 { font-family: var(--font-body); font-size: .625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dark-text); margin-bottom: 1rem; } .foot ul { margin: 0; padding: 0; display: grid; gap: .5rem; } .foot li { list-style: none; } .foot a { text-decoration: none; } .foot a:hover { color: var(--accent); } .foot dt { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-muted); } .foot dd { margin: 0 0 .75rem; color: var(--dark-text); } .foot__legal { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--dark-line); display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; font-size: .6875rem; letter-spacing: .06em; } .foot__demo { margin-top: 1rem; font-size: .6875rem; color: var(--dark-muted); opacity: .85; max-width: 80ch; } .callbar { position: fixed; inset: auto 0 0; z-index: 88; display: none; gap: 1px; background: var(--line); border-top: 1px solid var(--text); } .callbar .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.3; padding-inline: .5rem; } /* scroll progress hairline under the header */ .progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--accent); z-index: 95; width: 0; transform-origin: left; } /* ========================================================= BEFORE / AFTER PAGE ========================================================= */ .subhero { padding-top: calc(var(--hdr-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); } .subhero .lead { margin-top: 1.25rem; } .crumb { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; } .crumb a { text-decoration: none; } .crumb a:hover { color: var(--text); } .balist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 1080px) { .balist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 660px) { .balist { grid-template-columns: 1fr; } } .bacard { background: var(--bg); padding: clamp(.85rem, 2vw, 1.25rem); display: flex; flex-direction: column; gap: 1rem; } .bacard .ba-stage { border: 0; } /* Title over meta, always stacked: side by side the six captions wrapped at different points and the row of cards stopped lining up. */ .bacard__cap { display: grid; gap: .35rem; } .bacard h2 { font-size: 1.375rem; } .bacard__meta { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .banote { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .8125rem; max-width: 70ch; } .cta-band { background: var(--dark); color: var(--dark-muted); } .cta-band__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cta-band h2 { color: var(--dark-text); } /* ========================================================= MOTION ========================================================= */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); } .reveal.in { opacity: 1; transform: none; } .ba-item { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .ba-item.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .ba-item { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__live i { animation: none; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1180px) { .nav { display: none; } .burger { display: block; } } @media (max-width: 860px) { .hdr__end .btn--solid { display: none; } } @media (max-width: 640px) { :root { --hdr-h: 64px; } .brand small { display: none; } .hdr__tel small { display: none; } .hdr__tel b { font-size: 1rem; } .langs { display: none; } .drawer .langs { display: flex; } .callbar { display: flex; } body { padding-bottom: 58px; } /* On a phone the hero is sized by its own content, not by 92vh — a viewport-height hero plus a sticky call bar leaves almost nothing on screen but the headline. */ .hero { min-height: 0; } .hero__in { padding-top: calc(var(--hdr-h) + 5rem); } } /* The phone number stays in the header at every width — it is the single most-used control on a trades site. Below 380px it loses its label and tightens up rather than disappearing. */ @media (max-width: 380px) { :root { --gutter: 1rem; } .hdr__tel b { font-size: .9375rem; } .hdr__in { gap: .5rem; } }