:root{ --ivory:#f9f2e8; --ink:#101010; --muted:#6d665f; --line:#d9d0c7; --gold:#aa7a33; --navy:#101827; /* ONE typeface for the whole site - see the C-WESTUCCI V1.26 notes at the end of this file. Change it here and it changes everywhere. */ --font: Georgia, "Times New Roman", "Liberation Serif", "Nimbus Roman", serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--font)} a{color:inherit} .site-header{ height:92px;display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(570px,1.35fr); align-items:center;padding:0 34px;background:#fff; border-bottom:1px solid rgba(16,16,16,.08);position:relative;z-index:20 } .header-tools{display:flex;align-items:center;gap:32px} .menu-toggle{width:32px;display:grid;gap:7px;border:0;background:transparent;padding:0;cursor:pointer} .menu-toggle span{height:2px;background:var(--ink);display:block} .wordmark{font-family:var(--font);font-size:2.8rem;letter-spacing:.05em;text-decoration:none;margin-right:90px} .desktop-nav{justify-self:end;display:flex;align-items:center;gap:20px;white-space:nowrap} .desktop-nav a{text-decoration:none;font-size:.72rem;letter-spacing:.18em} .desktop-nav a:hover{color:var(--gold)} .desktop-nav span{color:#777} .mobile-nav{display:none;position:fixed;inset:0;background:rgba(249,242,232,.98);z-index:100;padding:90px 40px} .mobile-nav.open{display:flex} .mobile-nav{flex-direction:column;gap:26px} .mobile-nav a{text-decoration:none;font-family:var(--font);font-size:2rem} .menu-close{position:absolute;top:24px;right:30px;border:0;background:transparent;font-size:2.5rem;cursor:pointer} .hero{position:relative;min-height:calc(100vh - 92px);display:grid;grid-template-columns:48% 52%;background:var(--ivory);overflow:hidden} .hero-copy{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:10vh 7vw 0 5.5vw; } .hero-copy h1{ margin:0; font-family:var(--font); font-weight:400; font-size:clamp(4.2rem,6.3vw,7.35rem); letter-spacing:.12em } .hero-tagline{font-family:var(--font);letter-spacing:.3em;margin:1.5rem 0 3rem} .hero-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:var(--ivory)} .hero-visual img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block} .outline-button{display:inline-block;min-width:340px;padding:22px 34px;border:1px solid var(--ink);background:transparent;text-decoration:none;text-align:center;letter-spacing:.25em;font-size:.9rem;cursor:pointer;transition:.25s} .outline-button:hover{background:var(--ink);color:#fff} .eyebrow{margin:0 0 18px;color:var(--gold);font-size:.74rem;letter-spacing:.24em} .page-hero{padding:120px 8vw 90px;text-align:center;background:var(--ivory)} .page-hero h1{font-size:clamp(3.4rem,6vw,6rem);margin:0 0 18px} .page-hero>p:last-child{color:var(--muted)} .editorial-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;padding:110px 10vw;background:var(--ivory)} .editorial-section h2{font-size:3.3rem;margin:0} .editorial-copy{color:var(--muted);font-size:1.08rem;line-height:1.9} .dark-section{background:var(--navy);color:#fff} .dark-section .editorial-copy{color:#d8dce4} .quote-section{padding:100px 10vw;text-align:center;background:var(--ivory)} .quote-section blockquote{margin:0 auto;max-width:950px;font-family:var(--font);font-size:clamp(2rem,4vw,4rem);line-height:1.3} .signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:90px 7vw;background:var(--ivory)} .signature-grid figure{margin:0;background:var(--ivory)} .signature-grid img{width:100%;display:block} .signature-grid figcaption{padding:18px 0;color:var(--muted);letter-spacing:.12em} .journal-grid{padding:100px 7vw 120px;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;background:var(--ivory)} .journal-image{height:420px;margin-bottom:28px;background-size:cover;background-position:center} .image-craft{background:linear-gradient(135deg,#cab18e,#ece2d4)} .image-salon{background:linear-gradient(135deg,#1b1b1b,#6d5848)} .journal-card h2{font-size:2.2rem;margin:.2rem 0 1rem} .journal-card p{color:var(--muted);line-height:1.7} .journal-card a{font-size:.78rem;letter-spacing:.18em} .contact-section{width:min(1100px,88vw);margin:90px auto 120px;display:grid;grid-template-columns:.85fr 1.15fr;gap:90px} .contact-details p{color:var(--muted);line-height:1.8} .contact-email{font-family:var(--font);font-size:2rem;text-decoration:none} .request-form{display:grid;gap:22px} .request-form label{display:grid;gap:10px;font-size:.76rem;letter-spacing:.16em} .request-form input,.request-form textarea{border:0;border-bottom:1px solid var(--line);background:transparent;padding:14px 0;font:inherit} .site-footer{background:#0f1724;color:#fff;padding:65px 8vw 35px;display:grid;grid-template-columns:1fr auto;gap:36px} .footer-wordmark{font-family:var(--font);font-size:1.4rem;letter-spacing:.18em} .site-footer p{color:#aab2bf} .footer-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:flex-end} .footer-links a{text-decoration:none} .footer-legal{grid-column:1/-1;border-top:1px solid #2d3541;padding-top:24px;display:flex;flex-wrap:wrap;gap:8px 34px;justify-content:space-between;color:#aab2bf;font-size:.82rem} @media(max-width:1180px){.desktop-nav{display:none}.site-header{grid-template-columns:1fr auto 1fr}.wordmark{margin-right:0;font-size:2.2rem}} @media(max-width:850px){.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:68px 24px 45px;justify-content:flex-start}.hero-visual{height:680px}.editorial-section,.contact-section{grid-template-columns:1fr;gap:45px}.signature-grid,.journal-grid{grid-template-columns:1fr}.journal-image{height:560px}} @media(max-width:620px){.site-header{height:76px;padding:0 18px}.header-tools{gap:18px}.wordmark{font-size:1.7rem}.hero-copy h1{font-size:3.15rem;letter-spacing:.08em}.hero-tagline{font-size:.72rem;letter-spacing:.18em}.outline-button{min-width:0;width:100%}.hero-visual{height:560px}.page-hero,.editorial-section{padding-left:24px;padding-right:24px}.signature-grid,.journal-grid{padding-left:24px;padding-right:24px}.journal-image{height:390px}.contact-section{width:calc(100% - 48px)}.site-footer{grid-template-columns:1fr;padding-left:24px;padding-right:24px}.footer-links{justify-content:flex-start;flex-direction:column}.footer-legal{display:grid;gap:10px}} /* WESTUCCI V1.12 Removed completely from the homepage: - A HOUSE IN FORMATION - Presence, crafted into form. - Introductory paragraph - 01 / 02 / 03 feature band */ /* WESTUCCI V1.18 Recreated from WESTUCCI V1.12. The homepage campaign artwork is cropped to knee length. No layout, typography, spacing, colours, navigation or footer rules changed. */ /* WESTUCCI V1.19 Built directly from WESTUCCI V1.18. Removed only the homepage eyebrow text: "THE HOUSE OF WESTUCCI". All layout, typography, image crop, colours, spacing and navigation remain unchanged. */ /* WESTUCCI V1.20 Built directly from WESTUCCI V1.19. Vertically centres the WESTUCCI heading, tagline and Enter The House button together within the homepage text column. All other styling remains unchanged. */ @media (min-width: 851px) { .hero-copy { justify-content: center; padding: 0 7vw 0 5.5vw; } } /* WESTUCCI V1.21 Built directly from WESTUCCI V1.20. Changed only the site header background colour to white. All other layout, typography, imagery, spacing, navigation and content remain unchanged. */ /* WESTUCCI V1.22 Built directly from WESTUCCI V1.21. Adds two dropdown sections to the About page: House Manifesto and Founder. Homepage and all other pages remain unchanged. */ .about-accordions{ width:min(1180px,88vw); margin:0 auto 120px; border-top:1px solid var(--line); } .about-dropdown{ border-bottom:1px solid var(--line); } .about-dropdown summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:34px 0; cursor:pointer; font-family:var(--font); font-size:clamp(1.7rem,3vw,2.7rem); letter-spacing:.02em; } .about-dropdown summary::-webkit-details-marker{display:none} .dropdown-icon{ width:18px; height:18px; position:relative; flex:0 0 18px; } .dropdown-icon::before,.dropdown-icon::after{ content:""; position:absolute; top:50%; left:0; width:18px; height:1px; background:var(--ink); transition:transform .25s ease; } .dropdown-icon::after{transform:rotate(90deg)} .about-dropdown[open] .dropdown-icon::after{transform:rotate(0)} .dropdown-content{ display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; padding:34px 0 80px; } .dropdown-content h2{font-size:3.3rem;margin:0} .dropdown-content blockquote{ margin:42px 0 0; padding-top:34px; border-top:1px solid var(--line); color:var(--ink); font-family:var(--font); font-size:clamp(1.5rem,2.5vw,2.35rem); line-height:1.35; } @media(max-width:850px){ .dropdown-content{grid-template-columns:1fr;gap:38px} } @media(max-width:620px){ .about-accordions{width:calc(100% - 48px);margin-bottom:90px} .about-dropdown summary{padding:28px 0} .dropdown-content{padding-bottom:60px} .dropdown-content h2{font-size:2.5rem} } /* WESTUCCI V1.24 / V1.25 (superseded by C-WESTUCCI V1.2) The manifesto and founder panels were images of text. They are now live HTML text, so .manifesto-image-content, .manifesto-image, .founder-image-content and .founder-image have been removed. See the C-WESTUCCI V1.2 block at the end of this file. */ /* WESTUCCI V1.26: About-page heading updated; all other design and content unchanged. */ /* WESTUCCI V1.27 Built directly from WESTUCCI V1.26. Replaced the About-page supporting text with: "Every detail is designed with you in mind-your presence, your story." All other design, imagery, layout, typography, colours and content remain unchanged. */ /* C-WESTUCCI V1.1 Built directly from WESTUCCI V1.28. FIX: the V1.28 heading rule never took effect. Two problems: 1. `.page-hero h1` has specificity 0,1,1 and `.about-intro-title-v128` has 0,1,0 - so the clamp() always won, regardless of source order. 2. `font-size:90%` resolves against the PARENT font-size (16px), not against the clamp value, so it would not have given a 10% reduction even if it had applied. The rule below raises specificity above `.page-hero h1` and applies the 10% reduction to each value inside the clamp: 3.4rem -> 3.06rem | 6vw -> 5.4vw | 6rem -> 5.4rem The class was also renamed from `.about-intro-title-v128` to `.about-intro-title` so it is not tied to a version number. */ .page-hero h1.about-intro-title { font-size: var(--about-title-size); } /* C-WESTUCCI V1.3 Built directly from C-WESTUCCI V1.2. One change only. The About-page heading was reduced again. It is a long sentence rather than a short page title, so it needs to sit below the display size the other page headings use. V1.28 (intended) clamp(3.4rem, 6vw, 6rem) 100% V1.1 / V1.2 clamp(3.06rem, 5.4vw, 5.4rem) 90% V1.3 (this) clamp(2.3rem, 4vw, 4rem) 67% It is now a single variable so you can nudge it yourself without touching anything else. Edit the one line below and hard refresh. Some other values, if you want it different again: slightly larger clamp(2.6rem, 4.6vw, 4.6rem) 77% slightly smaller clamp(2.0rem, 3.5vw, 3.5rem) 58% smaller again clamp(1.8rem, 3vw, 3rem) 50% The three numbers are: minimum size on a narrow phone, how it scales with screen width, and maximum size on a wide monitor. */ :root{ --about-title-size: clamp(2.3rem, 4vw, 4rem); } /* ========================================================================== C-WESTUCCI V1.2 Built directly from C-WESTUCCI V1.1. 1. Manifesto + Founder panels converted from artwork to live HTML text. 2. Real contact form (Formspree) replaces the mailto: handler. 3. Search panel and EN | IT | FR row removed - both were non-functional. 4. Favicon and social-share styling support. ========================================================================== */ /* -- 1. Keyboard skip link (was missing entirely) ------------------------- */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:14px 22px; text-decoration:none; letter-spacing:.16em; font-size:.78rem; } .skip-link:focus{left:12px;top:12px} /* Visible keyboard focus everywhere - previously the browser default only */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } /* -- 2. Live text inside the About dropdowns ------------------------------ */ /* Serif body copy here so the panels keep the feel of the original artwork. */ .house-copy{ font-family:var(--font); font-size:1.06rem; line-height:1.85; color:var(--ink); max-width:56ch; } .house-copy p{margin:0 0 1.35em} .house-copy p:last-child{margin-bottom:0} .founder-name{ font-family:var(--font); font-size:clamp(2.1rem,3.4vw,2.9rem); line-height:1.1; margin:0 0 .3rem !important; } .founder-role{ font-family:var(--font); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 1.9em !important; padding-bottom:1.5em; border-bottom:1px solid var(--line); } /* Manifesto: copy left, crest right (matches the original artwork layout) */ .manifesto-content{align-items:center} .crest-panel{display:flex;align-items:center;justify-content:center} .crest-mark{ display:block; width:100%; max-width:440px; height:auto; } /* Founder: portrait left, copy right */ .founder-content{align-items:center} .founder-portrait{margin:0} .founder-portrait img{ display:block; width:100%; height:auto; background:#111; } @media(max-width:850px){ .manifesto-content,.founder-content{gap:44px} .crest-mark{max-width:300px} .founder-portrait{max-width:420px;margin:0 auto} .house-copy{max-width:none} } /* -- 3. Contact form states ----------------------------------------------- */ .hp{ position:absolute !important; left:-9999px !important; width:1px;height:1px; opacity:0; } .request-form button[type="submit"][disabled]{ opacity:.5; cursor:progress; } .form-status{ margin:0; min-height:1.4em; font-size:.92rem; line-height:1.6; } .form-status:empty{display:none} .form-status.is-success{color:#2f6b46} .form-status.is-error{color:#9b2c2c} .form-status.is-warning{color:#8a6114} .form-status a{color:inherit} /* -- 4. Footer now has three blocks, not four ----------------------------- */ .footer-legal{margin-top:8px} /* ========================================================================== C-WESTUCCI V1.6 Built directly from C-WESTUCCI V1.5. Supersedes the V1.5 hero rule. WHAT WAS WRONG IN V1.5 ---------------------- V1.5 put the CENTRE of the word WESTUCCI on the shoulder line. Because the word is about 110px tall on a normal screen, that pushed the TOP of it roughly 58px ABOVE the shoulder, so it read as sitting at her jaw. V1.6 anchors the TOP of WESTUCCI to the shoulder line instead. The word now begins at her shoulder, and the tagline and the ENTER THE HOUSE button follow underneath it, which is the intended arrangement. WHERE THE SHOULDER IS --------------------- Measured on images/hero-woman-knee-v118.jpg (645 x 1110): coat first appears at the neck y = 222 20.0% down coat reaches full shoulder width y = 268 24.1% down <-- used coat edge becomes vertical y = 280 25.2% down HOW THE POSITION IS WORKED OUT ------------------------------ The picture is object-fit:contain and object-position:bottom, so it is NOT always the full height of the hero. On a wide screen it is limited by height and fills the hero. On a narrower window it is limited by the width of its 52% column, and then it sits shorter and bottom-aligned, leaving a gap above it. V1.5 ignored that second case. V1.6 works out the rendered height of the picture first, then measures the shoulder down from the top of the PICTURE rather than from the top of the hero, so the text stays level with her shoulder in both cases. picture height = min(hero height, column width / image aspect) shoulder = (hero height - picture height) <- gap above + picture height x 0.24 NUDGE IT YOURSELF ----------------- Change --shoulder-line below. It is measured down from the top of her head, as a fraction of the whole picture. Smaller = higher up. 0.18 top of WESTUCCI level with her jaw 0.24 top of WESTUCCI level with her shoulder <-- current 0.30 top of WESTUCCI level with her upper chest 0.38 top of WESTUCCI level with her belt ========================================================================== */ @media (min-width: 851px) { .hero { --header-height: 92px; --hero-height: calc(100vh - var(--header-height)); --hero-column: 52vw; --image-aspect: 0.5811; /* 645 / 1110 */ /* how tall the picture actually renders */ --picture-height: min( var(--hero-height), calc(var(--hero-column) / var(--image-aspect)) ); --shoulder-line: 0.24; /* top of the picture, plus the shoulder fraction of the picture */ --shoulder-y: calc( var(--hero-height) - var(--picture-height) + var(--picture-height) * var(--shoulder-line) ); } .hero-copy { justify-content: flex-start; padding: 0 7vw 0 5.5vw; padding-top: max(24px, var(--shoulder-y)); } } /* ========================================================================== C-WESTUCCI V1.7 Built directly from C-WESTUCCI V1.6. Journal page only. 1. Heading "From the House." replaced with "STORIES FROM THE HOUSE OF WESTUCCI." 2. That heading made smaller. 3. Sub-line replaced with "The people, places, and moments that inspire everything we create." 4. Everything else removed from the page: the JOURNAL label above the heading, and the three article cards below it. WHY THE HEADING NEEDED TO COME DOWN SO FAR ------------------------------------------ The other page headings ("Signature No. 1", "Contact the House.") are short, so they carry the full display size of clamp(3.4rem, 6vw, 6rem). The new Journal heading is 35 characters of capitals - well over twice the length - and at 6rem it needed about 2050px of line width, so it broke across two lines and swamped the page. .page-hero h1 (other pages) clamp(3.4rem, 6vw, 6rem) 100% .journal-title (this page) clamp(1.5rem, 3.1vw, 3rem) 50% At 3rem the line needs roughly 1140px and the page gives it 84vw, so it sits on one line from about 1220px upwards and wraps cleanly below that. Setting a long headline smaller than a short one is normal editorial practice, not an inconsistency. NUDGE IT YOURSELF ----------------- Change --journal-title-size below. Smaller = smaller text. clamp(1.7rem, 3.6vw, 3.6rem) larger (wraps to two lines sooner) clamp(1.5rem, 3.1vw, 3rem) current clamp(1.3rem, 2.6vw, 2.5rem) smaller clamp(1.1rem, 2.2vw, 2.1rem) smaller again The three numbers are the minimum on a narrow phone, how fast it scales with screen width, and the maximum on a wide monitor. Checked across screen widths: the heading sits on one line from about 850px upwards and wraps to two lines on phones, which is what you want. NOTE: the .journal-grid, .journal-card, .journal-image, .image-craft and .image-salon rules above are now unused, because the three cards are gone. They cost nothing at runtime and have been left in place. Say the word and they can be stripped out. .image-signature was removed in V1.27 - it was the last thing pointing at images/signature-front.png, which is now a JPEG. ========================================================================== */ :root{ --journal-title-size: clamp(1.5rem, 3.1vw, 3rem); } .page-hero h1.journal-title{ font-size: var(--journal-title-size); letter-spacing: .04em; line-height: 1.25; } /* ========================================================================== C-WESTUCCI V1.9 Built directly from C-WESTUCCI V1.8. Adds the first Journal article, laid out to match the supplied reference: photograph on the left, date / title / summary / READ STORY on the right, the two columns centred against each other. READ STORY is a real link, not decoration. It opens journal-w-buckle.html, a new article page built from the same header, footer and styling as the rest of the site. The date and READ STORY use var(--gold), the same accent as every other eyebrow on the site (ABOUT THE HOUSE, THE JOURNAL, COLLECTIONS). The reference sampled slightly browner than that, but matching the site's own gold keeps the pages consistent with each other. ========================================================================== */ /* ---- the list of articles on journal.html ---- */ .journal-entries{ padding: 0 8vw 120px; background: var(--ivory); } .journal-entry{ display: grid; /* V1.13: the picture was 1.33fr against the text's 1fr, about 536px wide. It is now capped at 400px, and at 42% on any screen too narrow for that - a fixed width alone would starve the text column just above the 850px breakpoint. The text column gains the difference. */ grid-template-columns: min(400px, 42%) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 980px; margin: 0 auto; } .journal-entry + .journal-entry{ margin-top: 70px; padding-top: 70px; border-top: 1px solid var(--line); } .journal-entry-media{ display: block; overflow: hidden; background: var(--ivory); } .journal-entry-media img{ display: block; width: 100%; height: auto; transition: transform .5s ease; } .journal-entry-media:hover img{ transform: scale(1.03); } .journal-entry-copy .eyebrow{ margin-bottom: 12px; } .journal-entry-title{ font-family:var(--font); font-weight: 400; /* Sized so BOTH journal titles hold one line on desktop. Measured in Georgia: "The History of the W Buckle" is 12.99em, but "The story behind the Westucci Signature Buckle" is 21.60em - two thirds longer, and it is the one that sets the ceiling. See the V1.24 block at the end of this file for the working. */ font-size: clamp(1rem, 2vw, 1.5rem); line-height: 1.25; margin: 0 0 14px; } .journal-entry-title a{ color: var(--ink); text-decoration: none; } .journal-entry-title a:hover{ color: var(--gold); } .journal-entry-copy p{ color: var(--muted); line-height: 1.75; margin: 0 0 20px; } /* ---- READ STORY: a working link, styled as a button ---- */ .read-story{ display: inline-flex; align-items: center; gap: 10px; color: var(--gold); text-decoration: none; font-size: .78rem; letter-spacing: .22em; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .25s ease, color .25s ease; } .read-story:hover, .read-story:focus-visible{ color: var(--ink); border-bottom-color: var(--ink); } .read-story-arrow{ display: inline-block; transition: transform .25s ease; } .read-story:hover .read-story-arrow{ transform: translateX(5px); } /* ---- the article page itself ---- */ .story{ max-width: 1080px; /* widened in V1.12 for the two-column layout */ margin: 0 auto; padding: 110px 24px 120px; /* not 8vw - that would crush the measure on a wide screen once max-width is applied */ background: var(--ivory); } .story-head{ text-align: center; } .story-title{ font-family:var(--font); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.2; margin: 0 0 56px; } /* Two-column article layout: both pictures stacked in a narrow left column, the text beside them. Document order is sketch -> text -> portrait, which is also the order it reads in when the columns collapse on a phone. */ /* V1.15 - the left column is set so that the single sketch below the portrait ends up EXACTLY as wide as each of the two sketches beside it. With a container of width C, a 56px column gap and a 26px gap between the paired sketches: left column L = (C - 82) / 3 right column R = C - 56 - L each paired one (R - 26) / 2 = (C - 82) / 3 = L Writing L as calc((100% - 82px) / 3) keeps all three equal at every screen width, not just at the 1080px maximum - a fixed pixel value would only line up at one size. */ .story-layout{ display: grid; grid-template-columns: calc((100% - 82px) / 3) minmax(0, 1fr); column-gap: 56px; row-gap: 26px; align-items: start; } .story-shot{ margin: 0; } .story-shot img{ display: block; width: 100%; height: auto; } /* V1.14 - a proper two-by-two grid rather than one column spanning both rows. Left: the portrait, then the first sketch. Right: the text, then the two later sketches side by side. row 1 portrait (445px) | the three paragraphs (314px) row 2 sketch 1 (230px) | sketches 2 and 3 (189px) Because each row takes the height of its tallest item, both columns now end level at about 701px. Under V1.13 the pictures ran to 701px while the text stopped at 314px, leaving a long gap on the right. */ .story-shot-a{ grid-column: 1; grid-row: 1; } .story-shot-b{ grid-column: 1; grid-row: 2; } /* Back to the top, as it was before V1.13. align-items:start on the grid does the work - there is no span to align within any more. */ .story-body{ grid-column: 2; grid-row: 1; } .story-stages{ grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; } .story-stages figure{ margin: 0; } .story-stages img{ display: block; width: 100%; height: auto; } .story-body{ font-family:var(--font); font-size: 1.08rem; line-height: 1.9; color: var(--ink); } .story-body p{ margin: 0 0 1.5em; } .story-back{ margin: 60px 0 0; padding-top: 34px; border-top: 1px solid var(--line); } .story-back a{ color: var(--gold); text-decoration: none; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; } .story-back a:hover{ color: var(--ink); } @media (max-width: 850px){ .journal-entry{ grid-template-columns: 1fr; gap: 26px; max-width: 560px; } /* Stacked, the column is wider than on desktop, so the title can be bigger - but the longer of the two titles still wraps on a phone. See the V1.24 block at the end of this file. */ .journal-entry-title{ font-size: clamp(1.2rem, 4.2vw, 1.5rem); } .journal-entries{ padding-bottom: 90px; } .story{ padding: 70px 24px 90px; } /* One column on a phone. Grid placement is reset so the elements fall back to document order: the portrait, the text, then the three sketches in sequence - which is the order the writing follows. */ .story-layout{ grid-template-columns: 1fr; row-gap: 30px; } .story-shot-a, .story-shot-b, .story-body, .story-stages{ grid-column: 1; grid-row: auto; align-self: start; } .story-shot, .story-stages{ max-width: 430px; margin: 0 auto; } } /* Two sketches side by side works down to tablet width. Below that each one would be about 150px across, too small to read the annotations, so they stack. */ @media (max-width: 620px){ .story-stages{ grid-template-columns: 1fr; gap: 30px; } } /* ========================================================================== C-WESTUCCI V1.10 Built directly from C-WESTUCCI V1.9. The Journal article image was replaced with the W belt buckle development sheet. It is a 3:2 picture where the old one was a 3.26:1 letterbox, so two things were adjusted to suit the new shape: 1. On the article page the figure now breaks out past the reading column (see .story-figure above). A nine-panel sheet at 732px wide is not readable; at up to 1180px the annotations are. 2. On the Journal card the image keeps its natural proportions, so the card is taller than it was. Nothing is cropped and no rule was needed for it - cropping a development sheet would cut panels out of it, and the existing width:100% / height:auto already does the right thing. ========================================================================== */ /* ========================================================================== C-WESTUCCI V1.11 Built directly from C-WESTUCCI V1.10. 1. JOURNAL CARD IMAGE The card now shows the photograph of the finished buckle (images/w-buckle-finished.jpg) instead of the development sheet. The article page keeps the development sheet, which is where it can actually be read. 2. TITLE ON ONE LINE "The Evolution of the W Buckle" measures about 14.05em in Georgia (measured, then multiplied by 1.12 because Georgia runs wider than the Times metrics available to measure with). To hold one line the font size has to stay under (column width / 14.05). The column is not constant. On desktop it is (min(980, 84vw) - 40) / 2.33 which is 403px on a wide screen but narrows to about 290px just above the 850px breakpoint - that point, not the widest screen, is what sets the ceiling. Below 850px the card stacks and the column jumps to as much as 560px, so the title can be noticeably larger there. Hence two sizes rather than one clamp trying to cover both. desktop clamp(1.25rem, 2.3vw, 1.7rem) stacked clamp(1.3rem, 5vw, 1.9rem) Checked at 27 widths from 320px to 2560px: one line at every one from 360px upward, with 9px of slack at the tightest point. A 320px screen (original iPhone SE) still wraps to two lines - forcing one line there would mean an 18px title, which is too small to be worth it. It wraps cleanly rather than overflowing. No white-space:nowrap was used on purpose. If a future title is longer, nowrap would push it off the side of the card; wrapping is the safer way to fail. ========================================================================== */ /* ========================================================================== C-WESTUCCI V1.17 The hair drift added in V1.15 and strengthened in V1.16 has been removed at your request. Gone with it: the .hero-hair rules, the hair-drift keyframes, the reduced-motion exception that switched it off, and the empty in index.html. The homepage hero is a plain still photograph again, and the browser no longer paints a second masked copy of it on every frame. Nothing else was touched. If you ever want it back, it is described in full in the V1.16 section of README.txt. ========================================================================== */ /* ========================================================================== C-WESTUCCI V1.19 Get in Touch: legal details, enquiry routing, and the two pages the form now needs to land on. ========================================================================== */ /* -- the left column now holds three blocks, not one loose group ---------- */ .contact-details{ display: grid; gap: 42px; align-content: start; } .contact-block .eyebrow{ margin-bottom: 12px; } .contact-block p{ margin: 0; } /* -- field labels --------------------------------------------------------- They were 12px in sentence case with wide tracking, which reads as an accident next to the uppercase tracked text everywhere else on the site. Matched to .eyebrow instead: same size, same spacing, same case. */ .request-form label{ font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } /* -- the enquiry-type select, drawn to match the underlined inputs -------- */ .request-form select{ border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 14px 26px 14px 0; font: inherit; color: var(--ink); letter-spacing: normal; text-transform: none; border-radius: 0; -webkit-appearance: none; appearance: none; /* the native arrow is drawn differently on every platform, so it is replaced with one that matches the rest of the page */ background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 10px center, right 4px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .request-form select:invalid{ color: var(--muted); } .request-form input, .request-form textarea{ color: var(--ink); letter-spacing: normal; text-transform: none; } /* -- the line under the button ------------------------------------------- */ .form-privacy{ margin: 4px 0 0; font-size: .82rem; line-height: 1.7; color: var(--muted); } .form-privacy a{ color: var(--gold); } /* -- privacy notice and thank-you pages ----------------------------------- */ /* These reuse .story from the Journal article, which is a two-column grid. These pages have no pictures, so the layout is collapsed back to a single readable column. */ .story.legal{ max-width: 780px; } .story.legal .story-body{ max-width: none; } .story.legal .story-body h2{ font-family:var(--font); font-weight: 400; font-size: 1.35rem; line-height: 1.3; margin: 2.2em 0 .7em; } .story.legal .story-body h2:first-child{ margin-top: 0; } .story.legal .story-body a{ color: var(--gold); } .story-body-centred{ text-align: center; } /* ========================================================================== C-WESTUCCI V1.20, as amended by V1.21 The homepage stopped at the hero. It now has a scroll cue and somewhere to leave an email address. V1.21 removed the introduction paragraph and the four campaign panels that V1.20 had added, along with their styling and the --plum colour that existed only for their captions. ========================================================================== */ .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* -- a cue that something follows the hero ------------------------------- */ .hero-scroll{ position:absolute; bottom:26px; left:0; right:0; margin-inline:auto; width:44px; height:56px; display:none; /* desktop only - see below */ align-items:flex-end; justify-content:center; } .hero-scroll-line{ display:block; width:1px; height:44px; background:linear-gradient(to bottom, transparent, var(--gold)); transform-origin:top; animation:scroll-cue 2.6s ease-in-out infinite; } @keyframes scroll-cue{ 0%,100%{ transform:scaleY(.4); opacity:.35; } 50% { transform:scaleY(1); opacity:1; } } @media (min-width:851px){ .hero-scroll{ display:flex; } } @media (prefers-reduced-motion: reduce){ .hero-scroll-line{ animation:none; transform:scaleY(1); opacity:.8; } } /* -- email capture -------------------------------------------------------- */ .house-list{ background:#0f1724; color:#fff; /* V1.28 cut this from 96px to 44px; V1.29 takes it to 10px. With the footer's 20px on top, the two navy blocks now read as one continuous panel: 30px between the privacy line and the WESTUCCI wordmark, down from 161px originally. */ padding:96px 8vw 10px; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .house-list h2{ font-family:var(--font); font-weight:400; font-size:clamp(2rem,3.2vw,2.9rem); line-height:1.15; /* V1.22: was 18px. The heading and the line under it are now one sentence running across both - "Be the first to know / about new creations." - so they need to sit closer together, or the heading reads as though its full stop has been left off. */ margin:0 0 10px; } .house-list p{ color:#aab2bf; line-height:1.8; margin:0; } .house-list .eyebrow{ color:var(--gold); } .list-form{ display:grid; gap:20px; } .list-form input[type="email"]{ border:0; border-bottom:1px solid #3a4351; background:transparent; padding:16px 0; font:inherit; color:#fff; } .list-form input::placeholder{ color:#7c8695; } .list-form input:focus-visible{ outline-offset:6px; } .house-list .outline-button{ border-color:#fff; color:#fff; justify-self:start; } .house-list .outline-button:hover{ background:#fff; color:var(--ink); } .house-list .form-privacy{ color:#8d97a6; font-size:.78rem; } .house-list .form-privacy a{ color:var(--gold); } .house-list .form-status.is-success{ color:#8fd0a8; } .house-list .form-status.is-error{ color:#f0a3a3; } .house-list .form-status.is-warning{ color:#e0c07a; } @media (max-width:850px){ .house-list{ grid-template-columns:1fr; gap:40px; padding:70px 24px; } } /* ========================================================================== C-WESTUCCI V1.23 Second Journal article. The card on journal.html needed nothing new - the .journal-entry + .journal-entry rule written back in V1.9 already gives any card after the first a dividing rule and its own spacing. The article page does need something. The first article has three pictures and sits in two columns; this one has a single wide photograph, so it runs as one centred column with the picture leading it. .story is 1080px wide to hold two columns, which is far too wide for unbroken reading, hence the narrower variant. ========================================================================== */ .story-narrow{ max-width: 820px; } .story-narrow .story-body{ max-width: none; } .story-lead-figure{ margin: 0 0 48px; } .story-lead-figure img{ display: block; width: 100%; height: auto; } /* ========================================================================== C-WESTUCCI V1.24 JOURNAL TITLES ON ONE LINE -------------------------- Measured in Georgia: "The History of the W Buckle" 12.99em "The story behind the Westucci Signature Buckle" 21.60em The second is two thirds longer, so it is the one that sets the size. The text column beside the picture is 540px at its widest and narrows to 375px just above the 850px breakpoint, so: 540 / 21.60 = 25.0px the most it can ever be 375 / 21.60 = 17.4px at the pinch point Hence clamp(1rem, 2vw, 1.5rem) on desktop. Checked at every width from 851px to 2560px: both titles hold one line, with between 7px and 36px to spare. The shorter title has far more room than it needs, which is fine - it is the long one that has to fit. On a phone the card stacks and the column widens again, so the title can grow back to 1.5rem. The long title still holds one line down to about 600px and wraps to two below that. Fitting it on one line at 375px would need a 0.9rem title, smaller than the body text around it, which is not worth it. A two-line title on a phone is ordinary. SECOND ARTICLE PAGE ------------------- Rebuilt to match the first article: the black and white portrait in the left column with the text beside it, rather than a wide photograph above a single column. It uses the same .story-layout grid, so the two article pages now open the same way. No new CSS was needed for it. The V1.15 rule calc((100% - 82px) / 3) still sets the left column, and with only one picture in it the grid simply has one row instead of two. ========================================================================== */ /* ========================================================================== C-WESTUCCI V1.25 The second article now has a picture on BOTH sides of the text, plus the three script sketches in a row beneath. The first article puts one portrait to the left of the text inside a 1080px page. Adding a second portrait to the right leaves only about 340px for the text there, roughly 35 characters a line, which is too narrow to read comfortably. So this page uses a wider frame - 1340px - which gives the text 600px, about 61 characters a line. The title also needed the extra width: "The story behind the Westucci Signature Buckle" measures 21.60em, so at its full 3.2rem it needs 1106px. That does not fit 1080px but sits comfortably in 1292px. ========================================================================== */ .story-wide{ max-width: 1340px; } /* V1.30: the right-hand portrait is gone, so this is two columns again. It is NOT stretched to fill the frame. The page stays 1340px wide because the title needs 1106px to hold one line, but a 946px column of text would run to about 109 characters a line - half again what is comfortable. So the portrait and the text are held to 340px + 640px and the pair is CENTRED in the frame, with the sketches below aligned to the same 1036px block. Everything lines up on one edge; only the centred title uses the full width. */ .story-layout-3{ display: grid; grid-template-columns: 340px minmax(0, 640px); justify-content: center; column-gap: 56px; row-gap: 46px; align-items: start; } .story-shot-left { grid-column: 1; grid-row: 1; } .story-layout-3 .story-body{ grid-column: 2; grid-row: 1; } /* the three sketches run the full width beneath, all the same size */ .story-stages-3{ grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, 1fr); gap: 40px; } /* The long title has a smaller floor than the shared .story-title so it can still hold one line further down the range before it has to wrap. */ .story-wide .story-title{ font-size: clamp(1.5rem, 3.6vw, 3.2rem); } /* Once the frame is narrower than the 1036px content block, the text simply takes what is left. At 851px that is still 459px, about 53 characters - tight but readable, so this can now collapse at the site's usual 850px rather than the 1050px V1.25 needed for three columns. */ @media (max-width: 1105px){ /* the 640px cap stays, so the measure never gets WIDER as the window narrows - which is what a plain 1fr would have done here */ .story-layout-3{ grid-template-columns: 300px minmax(0, 640px); column-gap: 44px; } } /* One column. Grid placement is reset so everything falls back to document order: the portrait, the text, then the three sketches in sequence. */ @media (max-width: 850px){ .story-layout-3{ grid-template-columns: 1fr; row-gap: 34px; } .story-layout-3 > *{ grid-column: 1 !important; grid-row: auto !important; } .story-stages-3{ grid-template-columns: 1fr; gap: 30px; } .story-layout-3 .story-shot{ max-width: 430px; margin: 0 auto; } /* stacked, the frame is 1340px wide but a line of text should not be - 65 to 75 characters is the comfortable range */ .story-layout-3 .story-body{ max-width: 640px; margin: 0 auto; } .story-stages-3 figure{ max-width: 760px; margin: 0 auto; } } /* ========================================================================== C-WESTUCCI V1.26 One typeface across the whole site. WHAT CHANGED ------------ The site was running two. Georgia carried the wordmark, the headings and the article copy; Arial carried everything else - the body text, the navigation, the small gold labels, the buttons and every form field. The sans-serif in all those places is what made the pages read as ordinary between the elegant bits. Every one of the eighteen font declarations in this file now points at a single variable, --font, declared with the colours at the top. Changing the typeface anywhere on the site is now one line. WHY GEORGIA AND NOT SOMETHING GRANDER ------------------------------------- Georgia was already the face of the wordmark, so extending it costs the brand mark nothing - the WESTUCCI logotype is untouched. More importantly it is one of the few serifs that works across the whole range this site needs: from 11px gold labels up to a 7rem wordmark. The obvious "luxury" choice would be a didone - Didot or Bodoni, the faces of Vogue and Harper's Bazaar - but those are display faces. Their thin strokes disappear below about 16px, and this site sets its labels, navigation and dates at 11 to 13px. A didone everywhere would look magnificent in the hero and be barely legible in the footer. TO CHANGE IT LATER ------------------ Edit --font at the top of this file. For a font that is not already on the visitor's machine you must also self-host the file: @font-face{ font-family:"Your Font"; src: [your woff2 file] format("woff2"); font-display:swap; } and then put "Your Font" at the front of --font. Do NOT reach for Google Fonts for this. Two reasons. It would make the statement on your privacy notice untrue - that page says this site loads no fonts, scripts or trackers from other companies, which is currently accurate. And a German court has held that embedding Google Fonts without consent breaches the GDPR, because the visitor's IP address is sent to Google before they have agreed to anything. Self-hosting avoids both, and is faster. ========================================================================== */ /* Buttons and form controls do not inherit font-family from the page - the browser gives them its own. Without this they would have stayed sans-serif while everything around them changed. */ button, input, select, textarea{ font-family: inherit; } /* Georgia sets numerals as old-style figures - 3, 4, 5, 7 and 9 drop below the baseline and 6 and 8 rise above it. In running serif text that is elegant and correct. Mixed into tracked capitals it can look uneven: "01 AUGUST 2026" and "company number 17080831" are the two places on this site where that happens. This asks for lining figures wherever numerals sit among capitals. It works where the font offers them and is simply ignored where it does not, so it costs nothing either way. */ .eyebrow, .footer-legal, .contact-block p, .desktop-nav, .story-back{ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } /* The footer normally needs its 65px of top padding to separate itself from the ivory content above it. On the home page it follows the signup, which is the same navy, so that separation is not needed - only there. */ .house-list + .site-footer{ padding-top: 20px; } /* The Instagram link sits on its own line beneath the email rather than alongside the other footer links. .footer-links is a right-aligned flex row, so giving this one a full-width basis pushes it onto the next line, still right-aligned - directly under the address. */ .footer-social{ flex-basis: 100%; text-align: right; letter-spacing: .04em; } /* ========================================================================== C-WESTUCCI V1.29 The diamond lattice, the Instagram glyph, and the last of that gap. ========================================================================== */ /* -- the lattice (added V1.29, removed again V1.30) ---------------------- The diamond lattice has been taken out at your request and the plain ivory is back exactly as it was in V1.28. Removed: the --lattice colour, the two repeating gradients on the body, and - importantly - the eleven sections that had to be made transparent to let it show through are all painting var(--ivory) again. Leaving those transparent would have looked identical today but would have been a trap later: any future background change would have leaked through eleven sections that were only transparent to serve a pattern no longer there. */ /* -- FOLLOW US and the Instagram glyph ----------------------------------- */ .footer-social{ flex-basis: 100%; text-align: right; margin-top: 12px; } .footer-social-label{ margin: 0 0 12px; font-size: .72rem; letter-spacing: .24em; color: #aab2bf; } .footer-social-link{ display: inline-flex; color: #fff; transition: color .25s ease, transform .25s ease; } .footer-social-link:hover, .footer-social-link:focus-visible{ color: var(--gold); transform: translateY(-2px); } /* the glyph is drawn in strokes that inherit the link colour, so it picks up the gold on hover without a second copy of the artwork */ .footer-social-link svg{ display: block; } /* -- the footer tagline, now in capitals ---------------------------------- */ .footer-brand p{ letter-spacing: .16em; font-size: .82rem; } /* C-WESTUCCI V1.31 The homepage hero is now a single piece of artwork rather than a text column beside a portrait photograph. The artwork carries its own typography - the countdown, BEYOND FASHION and the web address are all inside the picture - so the live WESTUCCI heading and tagline were removed to stop the same words appearing twice, in two typefaces, a few centimetres apart. ENTER THE HOUSE stays: it is the homepage's only call to action and the artwork has nothing to replace it with. The heading itself is not gone, only hidden. An h1 remains in the markup under .sr-only, because the words in the artwork are pixels - a search engine and a screen reader can read neither. Without it the home page would have had no heading at all. .hero is left untouched so every rule it carries still applies to any other page; these rules override it only where .hero-artwork is also present. */ .hero-artwork{ display:block; min-height:0; /* the artwork sets the height, not the viewport */ padding:0 0 72px; /* V1.32: room for the scroll cue, which now sits alone where the button used to be */ text-align:center; } .hero-artwork-image{ display:block; width:100%; height:auto; /* keeps the 3:2 frame - nothing is cropped */ } @media(max-width:850px){ .hero-artwork{ padding-bottom:44px; } } @media(max-width:620px){ .hero-artwork{ padding:0 0 36px; } }