/* ---------- nav ---------- */ header.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:.35s} .nav::before{content:"";position:absolute;inset:0 0 -46px 0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(247,244,236,.92) 0%,rgba(247,244,236,.6) 46%,rgba(247,244,236,0) 100%)}.nav.solid::before{opacity:0} /* Above the sheet, which is its sibling: otherwise the close button is behind the panel it opens. */ .nav .wrap{position:relative;z-index:61; display:flex;align-items:center;justify-content:space-between;gap:44px;height:104px} /* The wordmark must not be squeezed. The header is a flex row and every other item has a hard minimum — Sign in, the gold CTA, the hamburger — so the logo was the only thing that could give. `img{max-width:100%}` let it lose width while the height stayed pinned, which flattens the letterforms rather than scaling them: at 320px it rendered at 46% of its correct width. flex:0 0 auto takes it out of the negotiation. */ .nav .wrap > a{flex:0 0 auto} .nav .logo{height:51px;width:auto;max-width:none;transition:.25s;filter:drop-shadow(0 1px 1px rgba(247,244,236,.9))} .navlinks{display:flex;gap:40px;align-items:center} .navlinks a.lnk{position:relative;font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase; color:#383b32;transition:color .25s;white-space:nowrap;padding:6px 0} .navlinks a.lnk::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%; background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)} .navlinks a.lnk:hover{color:var(--sage)} .navlinks a.lnk:hover::after{transform:scaleX(1)} .navtools{display:flex;align-items:center;gap:22px} /* Sign in leaves the header on a phone. It only ever matched .navlinks a.lnk, so out here it had no uppercase, no tracking and a 21px tap target — and the room it took is what was squeezing the wordmark. The menu sheet carries it (site-nav), which is where it belongs at this width. */ @media(max-width:820px){ .navtools > .lnk{display:none} } .lang{display:flex;align-items:center;gap:7px;font-size:.84rem;font-weight:500;letter-spacing:.1em;color:#383b32;cursor:pointer;transition:color .25s} .lang:hover{color:var(--sage)} .lang svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3} /* The one gold thing in the bar. Sage on cream is the page's own palette, so the single action in the header sat inside the background rather than on top of it. Gold is the brand's accent and is spent nowhere else at this size — and it takes ink, not ivory: white on champagne is under 3:1 and unreadable at this weight. Same recipe as the top step of the pricing stair, so the two read as one decision. */ .navcta{font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase; color:#1F2A20;background:var(--gold-hi, #C4A968); padding:14px 26px;border-radius:8px;transition:background .25s,transform .25s,box-shadow .25s;white-space:nowrap} .navcta:hover{background:#D6BC7C;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(172,146,76,.65)} @media(max-width:1160px){.navlinks{display:none}} /* ---------- the small-screen menu ---------- */ .navburger{display:none;position:relative;width:38px;height:38px;border:0;background:none;cursor:pointer; padding:0;flex:0 0 auto} .navburger i{position:absolute;left:9px;width:20px;height:1.5px;background:#38463C;border-radius:2px; transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s} .navburger i:first-child{top:16px} .navburger i:last-child{top:22px} .navburger.is-on i:first-child{transform:translateY(3px) rotate(45deg)} .navburger.is-on i:last-child{transform:translateY(-3px) rotate(-45deg)} @media(max-width:1160px){ .navburger{display:block} } /* While the sheet is open the bar keeps only the mark and the close button. */ .nav.menu-open .navtools > :not(.navburger){display:none} .nav.menu-open::before{opacity:0} /* The [hidden] attribute does not survive a class that sets display: an author rule beats the user agent's regardless of specificity, so .navsheet{display:flex} kept the panel open on every screen, desktop included. It is closed here explicitly, and the wide viewport closes it whatever the state. */ .navsheet[hidden]{display:none} /* The list starts under the bar and the air falls below it. Centring a short list inside a tall panel that also carried a 110px top padding pushed everything into the bottom half, which reads as a layout accident rather than a choice. */ .navsheet{position:fixed;inset:0;z-index:59;display:flex;flex-direction:column; gap:clamp(26px,4vw,38px);padding:clamp(98px,15vh,128px) clamp(26px,7vw,64px) clamp(36px,7vw,56px); overflow-y:auto;background:var(--ivory); animation:navsheet-in .38s cubic-bezier(.2,.8,.2,1)} @keyframes navsheet-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} /* Placed after the base rule on purpose: at equal specificity the later block wins. */ @media(min-width:1161px){ .navsheet{display:none} } .navsheet__links{display:flex;flex-direction:column} .navsheet__links a{display:block;padding:clamp(13px,2.2vw,18px) 0;text-decoration:none; border-bottom:1px solid var(--line); font-family:"Cormorant Garamond","Baskerville",Georgia,serif; font-size:clamp(1.5rem,6vw,2.1rem);line-height:1.1;color:var(--sage)} .navsheet__links a:first-child{border-top:1px solid var(--line)} .navsheet__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .navsheet__in{font-size:.86rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px} .navsheet .navcta{padding:15px 24px} @media(prefers-reduced-motion:reduce){ .navsheet{animation:none} } /* On a phone the header had no rules of its own: a 46px wordmark, a 44px gap and three tools laid out for a desk. The flexbox resolved it by crushing the logo to nothing and letting the button run off the right edge. So the bar is sized for the hand — shorter, tighter, and the language chip (which repeats what the page already is) gives up its room to the two things that are actually actions. */ @media(max-width:820px){ .nav .wrap{gap:12px;height:76px} .nav .logo{height:36px} .navtools{gap:15px} .navtools .lang{display:none} .navcta{font-size:.6rem;letter-spacing:.09em;padding:11px 15px;border-radius:7px} .navcta:hover{transform:none;box-shadow:none} } @media(max-width:400px){ .nav .wrap{gap:9px} .nav .logo{height:31px} .navtools{gap:11px} .navtools .lnk{font-size:.8rem} .navcta{font-size:.55rem;padding:10px 12px} } .nav.solid{background:rgba(249,247,242,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} /* ---------- footer ---------- A sign-off, not a directory. It was four thin columns of twelve links, eight of which pointed at "#": Our story, Contact, FAQ, Order samples, For planners, Privacy, Terms, Refunds. A footer full of links that go nowhere is worse than a short one, so this carries only destinations that exist, in one row, under the mark and the two ways to actually reach a person. */ footer.ft{background:var(--sage);color:rgba(249,247,242,.72); padding:clamp(56px,6vw,82px) 0 clamp(26px,3vw,34px)} /* The floating stack is fixed to this corner; the last links need a lane it does not cover. */ @media(max-width:900px){ footer.ft{padding-bottom:calc(clamp(26px,3vw,34px) + 66px)} } .ft__top{display:grid;gap:clamp(30px,4vw,64px); padding-bottom:clamp(30px,3.4vw,44px);border-bottom:1px solid rgba(249,247,242,.16)} @media(min-width:820px){ .ft__top{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:start} } .ft__mark{height:29px;width:auto;margin-bottom:18px} .ft__say{max-width:36ch;margin:0;font-size:.94rem;line-height:1.65} .ft__line{margin:14px 0 0;font-family:"Cormorant Garamond","Baskerville",Georgia,serif;font-style:italic; font-size:1.3rem;color:var(--sand)} /* The same labelled rows the contact page uses, so the two read as one voice. */ .ft__reach{list-style:none;margin:0;padding:0} .ft__reach li{padding:13px 0;border-top:1px solid rgba(249,247,242,.16)} .ft__reach li:last-child{border-bottom:1px solid rgba(249,247,242,.16)} .ft__reach span{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase; color:rgba(249,247,242,.5);margin-bottom:4px} .ft__reach a{display:inline-block;font-family:"Cormorant Garamond","Baskerville",Georgia,serif; font-size:1.1rem;color:var(--sand);text-decoration:none; border-bottom:1px solid transparent;transition:border-color .25s,color .25s} .ft__reach a:hover{color:var(--ivory);border-bottom-color:var(--sand)} .ft__nav{display:flex;flex-wrap:wrap;gap:10px clamp(20px,2.6vw,38px); padding:clamp(22px,2.6vw,32px) 0} .ft__nav a{font-size:.84rem;letter-spacing:.02em;color:rgba(249,247,242,.72);text-decoration:none; transition:color .25s} /* Touch targets in the site's densest tap area: the footer link list was 21.8px tall with a 10px row gap, and the reach links 28.5px. The visible type is unchanged. */ @media(max-width:900px){ .ft__nav a,.ft__reach a{display:inline-flex;align-items:center;min-height:44px} .ft__nav{gap:2px clamp(20px,2.6vw,38px)} } .ft__nav a:hover{color:var(--ivory)} /* The policies sit quieter than the nav above them, on their own line above the copyright. */ .ft__legal{display:flex;flex-wrap:wrap;gap:4px clamp(16px,2vw,28px);padding-bottom:clamp(14px,1.8vw,20px)} .ft__legal a{font-size:.78rem;color:rgba(249,247,242,.5);text-decoration:none;transition:color .25s} .ft__legal a:hover{color:rgba(249,247,242,.85)} @media(max-width:900px){.ft__legal a{display:inline-flex;align-items:center;min-height:44px}} .ft__end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 20px; padding-top:clamp(16px,2vw,22px);border-top:1px solid rgba(249,247,242,.16); font-size:.76rem;color:rgba(249,247,242,.5)} .ft__end b{font-weight:400;font-family:"Cormorant Garamond","Baskerville",Georgia,serif;font-style:italic; font-size:.95rem;color:var(--sand)} /* ---------- the phone ---------- One device, everywhere. The site had seven: the hero's (9/19.3, gradient bezel, notch), the guest-journey one (9/17.6), the film band's (9/18.6), the collection card's pair (9/18.4, flat #20221c, no notch), the detail page's (390/844, radius 52), the checkout summary's and the style strip's. Different proportions, different corners, different bezels — the same product photographed on seven handsets. This is the one. Its proportions are the invitation's own (390x844), so nothing a guest would see is cropped, and every measurement derives from a single width so the same rule draws a 52px thumbnail and a 760px hero without a second definition. */ .ph{--ph-w:320px;display:block;position:relative;width:var(--ph-w);aspect-ratio:390/844; padding:calc(var(--ph-w) * .031);border-radius:calc(var(--ph-w) * .142); background:linear-gradient(155deg,#6C7A6E 0%,#2B342E 42%,#1D241F 72%,#55624F 100%); box-shadow:0 1px 2px rgba(20,26,22,.4), 0 calc(var(--ph-w) * .15) calc(var(--ph-w) * .26) calc(var(--ph-w) * -.12) rgba(20,26,22,.55), inset 0 0 0 1px rgba(255,255,255,.15)} .ph__s{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--sand-2); border-radius:calc(var(--ph-w) * .112)} .ph__s > img,.ph__s > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:top center;display:block} .ph__s > iframe{width:100%;height:100%;border:0;display:block} /* The cut-out. Below ~90px wide it is a speck that reads as dirt, so it stops being drawn. */ .ph__n{position:absolute;top:calc(var(--ph-w) * .062);left:50%;transform:translateX(-50%);z-index:4; width:calc(var(--ph-w) * .237);height:calc(var(--ph-w) * .064);border-radius:99px;background:#12170F} .ph--bare .ph__n{display:none} /* Touch targets. A finger needs about 44px; these were 30-38px, which on a phone means a tap that lands next to the control instead of on it. Sized by width rather than by pointer:coarse, so a narrow window gets the same rule and a test can measure it. */ @media(max-width:900px){ .navburger{width:44px;height:44px} .navcta{min-height:44px} .navsheet a{min-height:44px;display:flex;align-items:center} } /* The two side buttons, drawn only once the device is big enough to have earned them. */ .ph--keys::before,.ph--keys::after{content:"";position:absolute;left:calc(var(--ph-w) * -.006); width:calc(var(--ph-w) * .008);border-radius:2px; background:linear-gradient(180deg,#7C8A7E,#2C352F);opacity:.9} .ph--keys::before{top:calc(var(--ph-w) * .19);height:calc(var(--ph-w) * .085)} .ph--keys::after{top:calc(var(--ph-w) * .30);height:calc(var(--ph-w) * .135)}
BRIYD

Cookies

What is set in your browser, by whom, and what refusing changes.

Last updated 28 September 2026.

A cookie is a small file a website leaves in your browser. Some are how a website works at all. Others are how a company watches what you do. We treat those two very differently.

The ones we cannot do without

These are set whatever you choose, because without them the site does not function. They do not follow you anywhere and they are not shared with anyone.

The ones we ask about

These tell us how people find this site and which designs they look at. They are not loaded at all until you press Accept — not loaded and blocked afterwards, but never fetched in the first place. If you decline, or simply close the bar, nothing below ever runs.

Each is run by its own company under its own privacy policy, and each may set cookies of its own once loaded.

Changing your mind

Clear this site's cookies in your browser and the question comes back on your next visit. If you have already accepted, clearing them also removes what was set.

Your invitation, and your guests

The page your guests open carries none of this. No analytics, no advertising pixel, nothing that reports their visit to anyone — we measure our shop, not your wedding. The only thing set there is what the reply form needs to work.

Who you are dealing with

Our registered company details are not published on this page yet. Write to support@briyd.com and we will send them to you.