/* ══════════════════════════════════════════════════════════════════════ CARNSTONE BUILDING — concept/speculative trade site. DELIBERATELY ISOLATED from the main 50N Design site. This file shares nothing with /css/styles.css: not a token, not a font, not a class name. Every custom property here is --cs-* prefixed so that even an accidental double-include could not collide with 50N's --paper/--navy/--display set. Fonts are Archivo (structure) + Work Sans (body). No serif anywhere on this page — 50N's Cormorant Garamond must never appear here, and this page's Archivo/Work Sans must never appear there. Palette: warm stone/cream grounds, dark slate ink, one fixed brick-red accent (#9B3A2E). Contrast measured, not eyeballed — ratios noted below. ══════════════════════════════════════════════════════════════════════ */ :root{ /* ── GROUNDS ── warm stone, not neutral grey. */ --cs-stone:#F4F2EE; /* page background — warm cream/stone */ --cs-stone2:#E7E3DC; /* secondary bands, recessed blocks */ --cs-white:#FCFBF9; /* raised surfaces */ /* ── INK ── dark slate, warm-neutral rather than blue-black. */ --cs-slate:#2A2E33; /* headings, dark bands 12.22:1 on stone */ --cs-slate2:#3A4047; /* dark-band hover 9.37:1 on stone */ /* ── TEXT ── Both measured against BOTH grounds, because labels and body copy sit on --cs-stone and --cs-stone2 interchangeably and must pass on either. --cs-ink 7.06:1 on stone / 6.18:1 on stone2 / 7.64:1 on white --cs-muted 5.27:1 on stone / 4.61:1 on stone2 / 5.70:1 on white --cs-muted is only just clear of AA on stone2 (4.61 against a 4.5 floor); it carries 11px uppercase labels, so do not lighten it. */ --cs-ink:#4C5259; --cs-muted:#5F656C; --cs-line:#D9D4CC; /* hairlines — 1.32:1, decorative only */ /* ── ACCENT ── #9B3A2E is fixed and not interpretive. 6.18:1 on stone, 6.68:1 for --cs-white text ON brick (buttons). NOTE: brick on --cs-slate is 1.98:1. It can never carry text on a dark band — there it is a rule or an underline only, never a glyph. */ --cs-brick:#9B3A2E; --cs-brick-dk:#7F2E24; /* button hover — 8.10:1 against --cs-white */ /* ── ON-SLATE PALETTE ── the stone tokens above are tuned against a light ground and none survives the inversion, same problem the main site documents for its own dark bands. Measured against --cs-slate #2A2E33: --cs-stone-on-slate 7.87:1 body copy on dark --cs-muted-on-slate 5.23:1 labels on dark --cs-line-on-slate 1.55:1 hairlines on dark --cs-brick-lt 4.36:1 DECORATIVE ONLY (quote mark, rules) */ --cs-stone-on-slate:#C9C4BB; --cs-muted-on-slate:#9AA1A8; --cs-line-on-slate:#454B52; --cs-brick-lt:#D4786A; --cs-display:'Archivo',system-ui,sans-serif; --cs-body:'Work Sans',system-ui,sans-serif; --cs-maxw:1240px; --cs-gutter:clamp(20px,5vw,64px); /* Content caps at --cs-maxw while bands and full-bleed photography stay edge to edge. vw not %, so nested grid children resolve against the viewport rather than their own containing block. */ --cs-pad:max(var(--cs-gutter),calc((100vw - var(--cs-maxw)) / 2)); --cs-bar-h:clamp(46px,5.4vw,56px); --cs-sect:clamp(64px,8.5vw,112px); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ background:var(--cs-stone); color:var(--cs-slate); font-family:var(--cs-body); font-weight:400; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} h1,h2,h3{font-family:var(--cs-display);font-weight:700;letter-spacing:-.028em;line-height:1.08;} .cs-skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--cs-slate);color:var(--cs-stone); padding:12px 20px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;} .cs-skip:focus{left:0;} :focus-visible{outline:2px solid var(--cs-brick);outline-offset:3px;} .cs-dark :focus-visible,.cs-bar :focus-visible{outline-color:var(--cs-stone);} .cs-wrap{padding-left:var(--cs-pad);padding-right:var(--cs-pad);} .cs-sect{padding-top:var(--cs-sect);padding-bottom:var(--cs-sect);} /* Small uppercase section label — the page's one recurring annotation device, and the only place letter-spacing runs positive. */ .cs-label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-muted);} .cs-dark .cs-label{color:var(--cs-muted-on-slate);} .cs-label::before{content:"";display:inline-block;width:22px;height:2px;background:var(--cs-brick); vertical-align:middle;margin-right:11px;margin-top:-2px;} /* ══ 1. STICKY PHONE BAR ═══════════════════════════════════════════════ Always visible, top of page. This is the primary Bosworth differentiator: a persistent brick bar that travels with the reader, not a static top-line text string that scrolls away with the header. */ .cs-bar{position:sticky;top:0;z-index:100;background:var(--cs-brick);color:var(--cs-white); min-height:var(--cs-bar-h);display:flex;align-items:center; padding-left:var(--cs-pad);padding-right:var(--cs-pad); box-shadow:0 1px 0 rgba(0,0,0,.16);} .cs-bar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%; padding-top:9px;padding-bottom:9px;} .cs-bar-call{font-family:var(--cs-display);font-size:clamp(13px,1.65vw,16px);font-weight:600; letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px;} /* The number itself steps up a weight and loses the tracking — it is the one thing on this bar a reader is meant to act on. */ .cs-bar-num{font-weight:800;letter-spacing:0;white-space:nowrap; border-bottom:2px solid rgba(252,251,249,.42);padding-bottom:1px; transition:border-color .22s ease;} .cs-bar-call:hover .cs-bar-num,.cs-bar-call:focus-visible .cs-bar-num{border-bottom-color:var(--cs-white);} .cs-bar-ico{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;opacity:.9;} .cs-bar-loc{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase; color:rgba(252,251,249,.9);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;} /* ══ 2. HERO ═══════════════════════════════════════════════════════════ Full-bleed photography, permanently. The placeholder underlay is a permanent background on the frame, so a missing or slow photograph degrades to a tonal wash rather than a flash of flat colour — the same approach the main site takes, arrived at independently here. */ .cs-hero{position:relative;min-height:clamp(560px,86svh,860px);display:flex;align-items:flex-end; overflow:hidden;background:var(--cs-slate);} .cs-hero-in{position:relative;z-index:3;width:100%; padding-left:var(--cs-pad);padding-right:var(--cs-pad); padding-top:clamp(64px,12vw,130px);padding-bottom:clamp(48px,7vw,86px);} .cs-hero-col{max-width:660px;} .cs-hero h1{color:var(--cs-white);font-size:clamp(40px,7.4vw,84px);font-weight:800;letter-spacing:-.038em; line-height:1.02;text-wrap:balance;} .cs-hero-sub{color:rgba(252,251,249,.93);font-size:clamp(15px,1.85vw,19px);line-height:1.6; max-width:46ch;margin-top:clamp(16px,2.2vw,24px);} /* Second phone line — deliberate doubling with the sticky bar above. A reader who scrolled past the bar without reading it meets the number again at the one moment they are most likely to act on it. */ .cs-hero-call{display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap; margin-top:clamp(22px,3vw,32px);font-family:var(--cs-display);} .cs-hero-call-lb{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase; color:rgba(252,251,249,.78);} .cs-hero-num{font-size:clamp(26px,4.2vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--cs-white); line-height:1.1;border-bottom:3px solid var(--cs-brick-lt);padding-bottom:3px; transition:border-color .24s ease;} .cs-hero-num:hover,.cs-hero-num:focus-visible{border-bottom-color:var(--cs-white);} .cs-hero-note{margin-top:clamp(14px,2vw,20px);font-size:13px;color:rgba(252,251,249,.8);letter-spacing:.01em;} /* ── Photographic placeholder ── Tonal gradient in the page's own stone/slate range, plus a diagonal hatch so it is unmistakably a placeholder and never mistaken for a photograph at a glance. Every instance carries a visible corner label. Replacing these means swapping .cs-ph for a real ; nothing else in the layout depends on the gradient. */ .cs-ph{position:absolute;inset:0;overflow:hidden; background: linear-gradient(158deg,rgba(42,46,51,.34) 0%,rgba(42,46,51,0) 46%), linear-gradient(196deg,#9A958B 0%,#6E6A64 26%,#4A4E52 52%,#5E635F 74%,#8A867C 100%);} .cs-ph::before{content:"";position:absolute;inset:0;opacity:.16; background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(252,251,249,.55) 13px 14px);} .cs-ph-tag{position:absolute;z-index:2;left:0;bottom:0; background:rgba(42,46,51,.82);color:var(--cs-stone-on-slate); font-family:var(--cs-body);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; padding:6px 11px;line-height:1.4;} /* Scrim over hero photography only. Held near .58 throughout rather than ramping to near-zero at the top: the placeholder is mid-tone across its whole height, and white hero text needs a consistent floor beneath it wherever a real photograph eventually lands. Sampled, not assumed — white on the composited result clears AA everywhere in the text band. */ .cs-hero-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg, rgba(31,34,38,.74) 0%, rgba(31,34,38,.62) 34%, rgba(31,34,38,.55) 68%, rgba(31,34,38,.5) 100%);} /* ══ 3. TRUST BLOCK ════════════════════════════════════════════════════ Its own dedicated section directly after the hero, not woven into the testimonial. ⚠ COPY CONSTRAINT — READ BEFORE EDITING. Nothing in this section may name a trade body, accreditation scheme, certification, or membership. Carnstone is a concept build and holds no memberships; naming one would be a fabricated credential. Only generic, defensible statements belong here: insured, guaranteed workmanship, built to current Building Regulations. The badge below is a plain geometric mark for the same reason — it must not resemble any real scheme's identity. Do not "strengthen" this with a logo or a scheme name. */ .cs-trust{background:var(--cs-stone2);border-top:1px solid var(--cs-line);border-bottom:1px solid var(--cs-line);} .cs-trust-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4.4vw,56px);align-items:start;} /* Generic mark: a bare shield outline with a rule and a tick. No wordmark, no scheme colours, no roundel — deliberately unbranded. */ .cs-badge{flex:none;width:clamp(74px,9vw,104px);height:auto;} .cs-badge .bg{fill:var(--cs-white);stroke:var(--cs-brick);stroke-width:2.4;} .cs-badge .mk{fill:none;stroke:var(--cs-brick);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;} .cs-badge .rl{stroke:var(--cs-line);stroke-width:2;} .cs-trust h2{font-size:clamp(25px,3.5vw,40px);font-weight:700;margin-top:14px;max-width:20ch;} .cs-trust p{color:var(--cs-ink);font-size:clamp(15px,1.65vw,17px);margin-top:16px;max-width:62ch;} .cs-trust-pts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;} .cs-trust-pt{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cs-slate); display:inline-flex;align-items:center;gap:9px;} .cs-trust-pt::before{content:"";width:7px;height:7px;background:var(--cs-brick);flex:none; transform:rotate(45deg);} /* ══ 4. SERVICES — DIVIDED LIST ════════════════════════════════════════ Row-based list, explicitly NOT boxed cards: cards were tried in review and rejected. There is no background, no border-radius and no box on any row — the only structure is a 1px hairline between rows. Do not reintroduce card surfaces here. Also not Bosworth's inline running list: each service gets its own full row with a description, on a strict two-column measure. */ .cs-svc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap; margin-bottom:clamp(28px,4vw,46px);} .cs-svc-head h2{font-size:clamp(28px,4.2vw,48px);font-weight:700;margin-top:14px;} .cs-list{border-top:1px solid var(--cs-line);} .cs-row{display:grid;grid-template-columns:minmax(200px,.34fr) 1fr auto;gap:clamp(16px,3vw,44px); align-items:baseline;padding:clamp(22px,2.9vw,32px) 0; border-bottom:1px solid var(--cs-line); transition:padding-left .3s cubic-bezier(.16,1,.3,1);} .cs-row-n{font-family:var(--cs-display);font-size:12px;font-weight:600;letter-spacing:.1em; color:var(--cs-muted);font-variant-numeric:tabular-nums;grid-column:3;grid-row:1; align-self:center;transition:color .3s ease;} .cs-row h3{font-family:var(--cs-display);font-size:clamp(19px,2.3vw,26px);font-weight:700;letter-spacing:-.025em; transition:color .3s ease;} .cs-row p{color:var(--cs-ink);font-size:clamp(14.5px,1.55vw,16.5px);max-width:58ch;} /* Hover is the only motion here: the row steps right off its hairline and the title takes the accent. Gated on hover-capable pointers so touch devices never latch a hovered row. */ @media(hover:hover){ .cs-row:hover{padding-left:clamp(10px,1.5vw,20px);} .cs-row:hover h3{color:var(--cs-brick);} .cs-row:hover .cs-row-n{color:var(--cs-brick);} } /* ══ 5. PROJECT GALLERY ════════════════════════════════════════════════ Full-bleed photographic sequence — large paired frames running edge to edge, each with its own caption. Explicitly not a thumbnail grid: the frames are viewport-scale, there is no container padding, and the pairs read as a sequence down the page. */ .cs-gal{background:var(--cs-slate);} .cs-gal-head{padding-left:var(--cs-pad);padding-right:var(--cs-pad); padding-bottom:clamp(26px,3.6vw,42px);} .cs-gal-head h2{color:var(--cs-white);font-size:clamp(28px,4.2vw,48px);font-weight:700;margin-top:14px;} .cs-gal-head p{color:var(--cs-stone-on-slate);font-size:clamp(15px,1.65vw,17px);margin-top:14px;max-width:56ch;} .cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;} .cs-pair + .cs-pair{margin-top:2px;} .cs-frame{position:relative;} .cs-shot{position:relative;height:clamp(300px,46vw,560px);overflow:hidden;} .cs-cap{padding:18px clamp(16px,2.4vw,30px) clamp(26px,3.4vw,38px);} .cs-cap-t{font-family:var(--cs-display);font-size:clamp(15px,1.75vw,19px);font-weight:700; letter-spacing:-.02em;color:var(--cs-white);} .cs-cap-m{font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase; color:var(--cs-muted-on-slate);margin-top:7px;} /* Each frame gets its own tonal variation so the sequence does not read as one repeated swatch. Hue and angle only — all four stay inside the same stone/slate range. */ .cs-shot.v2 .cs-ph{background: linear-gradient(200deg,rgba(42,46,51,.3) 0%,rgba(42,46,51,0) 50%), linear-gradient(164deg,#8E8A84 0%,#5C5F62 30%,#43474B 58%,#736E66 82%,#9B968C 100%);} .cs-shot.v3 .cs-ph{background: linear-gradient(142deg,rgba(42,46,51,.28) 0%,rgba(42,46,51,0) 44%), linear-gradient(210deg,#A29C90 0%,#77726A 24%,#4E5155 56%,#656059 80%,#8D8880 100%);} .cs-shot.v4 .cs-ph{background: linear-gradient(174deg,rgba(42,46,51,.32) 0%,rgba(42,46,51,0) 48%), linear-gradient(186deg,#93908A 0%,#63666A 30%,#474A4E 54%,#6B675F 76%,#969187 100%);} /* ══ 6. TESTIMONIAL ════════════════════════════════════════════════════ Its own section, deliberately separate from the trust block above. The quote is a clearly-marked placeholder with a generic attribution — no invented named person. Do not replace the attribution with a name until there is a real, consented client quote behind it. */ .cs-quote{background:var(--cs-stone);} .cs-quote-in{max-width:900px;} .cs-quote blockquote{font-family:var(--cs-display);font-weight:500;letter-spacing:-.025em; font-size:clamp(22px,3.5vw,40px);line-height:1.28;color:var(--cs-slate);margin-top:22px;text-wrap:balance;} .cs-quote-mk{font-family:var(--cs-display);font-size:clamp(40px,6vw,72px);font-weight:800; color:var(--cs-brick);line-height:.6;display:block;} .cs-quote figcaption{margin-top:26px;font-size:12px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--cs-muted);} .cs-quote-ph{margin-top:14px;font-size:12px;color:var(--cs-muted);letter-spacing:.02em; border-left:2px solid var(--cs-line);padding-left:12px;max-width:52ch;} /* ══ 7. CTA ════════════════════════════════════════════════════════════ */ .cs-cta{background:var(--cs-slate);text-align:center;} .cs-cta h2{color:var(--cs-white);font-size:clamp(28px,4.6vw,54px);font-weight:800;letter-spacing:-.035em; margin-top:16px;text-wrap:balance;} .cs-cta p{color:var(--cs-stone-on-slate);font-size:clamp(15px,1.7vw,18px);margin:16px auto 0;max-width:50ch;} .cs-cta .cs-label{display:inline-block;} .cs-cta-acts{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap; margin-top:clamp(26px,3.6vw,38px);} .cs-btn{display:inline-flex;align-items:center;gap:11px;background:var(--cs-brick);color:var(--cs-white); font-family:var(--cs-display);font-size:clamp(14px,1.6vw,16px);font-weight:700;letter-spacing:-.01em; padding:16px 30px;border:0;cursor:pointer; transition:background-color .22s ease,transform .22s cubic-bezier(.16,1,.3,1);} .cs-btn:hover,.cs-btn:focus-visible{background:var(--cs-brick-dk);transform:translateY(-2px);} .cs-btn-gh{background:transparent;color:var(--cs-white);border:1px solid var(--cs-line-on-slate);} .cs-btn-gh:hover,.cs-btn-gh:focus-visible{background:transparent;border-color:var(--cs-stone-on-slate);} /* ══ FOOTER ════════════════════════════════════════════════════════════ Carries the concept disclosure. This site is speculative work and must never present itself as a real operating business — keep the note visible and keep it plain. */ .cs-foot{background:var(--cs-slate);border-top:1px solid var(--cs-line-on-slate); padding-top:clamp(34px,4.4vw,52px);padding-bottom:clamp(34px,4.4vw,52px);} .cs-foot-in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start;} .cs-logo{font-family:var(--cs-display);font-size:clamp(17px,2.2vw,22px);font-weight:800;letter-spacing:-.035em; color:var(--cs-white);} .cs-logo span{color:var(--cs-brick-lt);} .cs-foot-note{color:var(--cs-stone-on-slate);font-size:13px;line-height:1.62;max-width:50ch;margin-top:12px;} .cs-concept{display:inline-block;margin-top:16px;border:1px solid var(--cs-line-on-slate); padding:11px 15px;font-size:12px;line-height:1.55;color:var(--cs-stone-on-slate);max-width:52ch;} .cs-concept b{color:var(--cs-white);font-weight:600;} .cs-foot-c{color:var(--cs-muted-on-slate);font-size:12px;letter-spacing:.02em;} .cs-back{color:var(--cs-stone-on-slate);font-size:13px;border-bottom:1px solid var(--cs-line-on-slate); padding-bottom:2px;transition:color .2s ease,border-color .2s ease;} .cs-back:hover,.cs-back:focus-visible{color:var(--cs-white);border-bottom-color:var(--cs-stone-on-slate);} /* ══ REVEALS ═══════════════════════════════════════════════════════════ JS-gated: the observer adds .on. Without JS these never fire, so the