@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Raleway:wght@300;400;500;600;700&family=Caveat:wght@400;500;600&display=swap'); /* ========================================================================== Shreyaah's Bliss Trails — shared design system Watercolour + handmade paper + illustrated journal ========================================================================== */ :root { /* Base papers */ --cream: #EDE2CD; --cream-soft: #FDDEC0; --paper: #FBF5E9; --paper-warm: #F7EEDC; /* Ink */ --slate: #2B3A44; --charcoal: #11222B; --slate-soft: #3F4F5C; /* Secondary */ --blue-muted: #769EB0; --blue-soft: #5A8CA1; --blue-deep: #2B4F61; /* Earth */ --terracotta: #DA8A67; --brown: #A36551; --ochre: #8F6213; --ochre-light: #C79A3E; /* Nature */ --green-deep: #1F481E; --sage: #A7D29F; --sage-deep: #6B8F63; /* Soft + rare */ --peach: #FFCECF; --indigo: #6E91EA; --purple: #280033; /* Semantic */ --bg: var(--cream); --card: var(--paper); --text: var(--slate); --text-soft: #5C6E79; --text-muted: var(--blue-soft); --rule: rgba(43, 58, 68, .16); --rule-soft: rgba(43, 58, 68, .09); /* Type */ --serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --serif2: 'Cormorant Garamond', Georgia, serif; --sans: 'Raleway', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --hand: 'Caveat', 'Segoe Script', cursive; /* Rhythm */ --measure: 1180px; --measure-narrow: 760px; --gutter: clamp(1.25rem, 5vw, 4rem); --section-y: clamp(4.5rem, 10vw, 8.5rem); --shadow-paper: 0 1px 2px rgba(43,58,68,.05), 0 8px 24px -12px rgba(43,58,68,.18); --shadow-lift: 0 2px 6px rgba(43,58,68,.07), 0 20px 44px -20px rgba(43,58,68,.28); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Handmade paper ground: warm wash + fibre texture + fine grain. This lives on as a real background (not a position:fixed pseudo-element) — a fixed pseudo-element paints in its own layer that sticky/positioned descendants can wall off from, so mix-blend-mode:multiply on illustrations further down the tree ends up blending against nothing (plain white) instead of the paper. A background on the root element is the document canvas per spec, and every blend-mode element composites against it correctly regardless of intervening stacking contexts. */ /* Handmade paper ground — painted exactly ONCE, here on the root element. Nothing else in the page repaints it. Two separately painted copies of the same background (previously on .wrap as well) meet at a boundary, and even with identical CSS those two paints don't land identically — which showed as a faint but hard-edged box wherever a decorative illustration bled across .wrap's edge. One paint for the whole page = no boundary to see. For this to work, nothing between an illustration and may create a stacking context, or mix-blend-mode:multiply gets walled off from this background and the illustration renders as a white block instead. That's why .wrap / .scenery / .wash below deliberately carry no z-index. */ html { background-color: var(--cream); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"), radial-gradient(ellipse 70% 50% at 15% 0%, rgba(253,222,192,.55), transparent 60%), radial-gradient(ellipse 60% 45% at 88% 12%, rgba(118,158,176,.13), transparent 62%), radial-gradient(ellipse 55% 40% at 50% 100%, rgba(218,138,103,.10), transparent 65%), url('../img/paper-texture.jpg'); background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat; background-size: 220px 220px, auto, auto, auto, 700px 700px; background-attachment: fixed, fixed, fixed, fixed, fixed; background-blend-mode: normal, multiply, multiply, multiply, normal; } body { margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(1rem, .96rem + .18vw, 1.075rem); line-height: 1.72; color: var(--text); background: transparent; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* Several components set an explicit display, which would otherwise beat [hidden]. */ [hidden] { display: none !important; } /* ---------- type ---------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.14; letter-spacing: -.012em; color: var(--slate); margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 1.5rem + 4.1vw, 4.4rem); font-weight: 400; } h2 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3rem); font-weight: 400; } h3 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); } h4 { font-size: clamp(1.06rem, 1rem + .35vw, 1.22rem); font-family: var(--sans); font-weight: 600; letter-spacing: .005em; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } .lead { font-family: var(--serif2); font-size: clamp(1.2rem, 1.02rem + .78vw, 1.62rem); line-height: 1.62; font-weight: 400; color: var(--slate-soft); letter-spacing: .002em; } /* Small caps eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--sans); font-size: .715rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ochre); margin: 0 0 1.15rem; } .eyebrow::before { content: ''; width: 2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--ochre-light)); } .eyebrow--center { justify-content: center; } .eyebrow--center::after { content: ''; width: 2rem; height: 1px; background: linear-gradient(270deg, transparent, var(--ochre-light)); } .script { font-family: var(--hand); font-size: 1.42em; line-height: 1.3; color: var(--brown); font-weight: 500; } .muted { color: var(--text-soft); } .small { font-size: .875rem; line-height: 1.62; } .tiny { font-size: .785rem; line-height: 1.6; letter-spacing: .01em; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--measure-narrow); } .wrap--wide { max-width: 1360px; } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: clamp(3rem, 6vw, 5rem); } .stack > * + * { margin-top: 1.15rem; } .center { text-align: center; } .section-head { max-width: 660px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head--center { margin-inline: auto; text-align: center; } .section-head p { color: var(--text-soft); } /* Torn-paper divider between sections */ .tear { position: relative; height: 1px; background: var(--rule-soft); border: 0; margin: 0; } .tear::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; border-radius: 50%; background: var(--ochre-light); opacity: .55; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: var(--sans); font-size: .845rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; text-decoration: none; padding: .95em 1.9em; border: 1px solid transparent; border-radius: 2px; cursor: pointer; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); position: relative; } .btn:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; } .btn--primary { background: var(--slate); color: var(--cream); box-shadow: 0 1px 2px rgba(43,58,68,.14); } .btn--primary:hover { background: var(--terracotta); color: #FFF8EF; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(218,138,103,.7); } .btn--ghost { background: transparent; color: var(--slate); border-color: rgba(43,58,68,.4); } .btn--ghost:hover { border-color: var(--terracotta); color: var(--brown); background: rgba(255,255,255,.42); transform: translateY(-2px); } .btn--sm { padding: .7em 1.35em; font-size: .76rem; } .btn--block { width: 100%; } /* Text link with a hand-drawn underline */ .link { display: inline-flex; align-items: center; gap: .45em; font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--slate); padding-bottom: 3px; background-image: linear-gradient(90deg, var(--ochre-light), var(--ochre-light)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: color .28s var(--ease), background-size .38s var(--ease), gap .28s var(--ease); } .link:hover { color: var(--brown); gap: .8em; background-size: 40% 1px; } .link .arw { transition: transform .3s var(--ease); } .link:hover .arw { transform: translateX(3px); } /* Inline prose link */ .a-inline { color: var(--brown); text-decoration: none; border-bottom: 1px solid rgba(163,101,81,.4); transition: border-color .25s, color .25s; } .a-inline:hover { color: var(--terracotta); border-color: var(--terracotta); } /* ---------- paper card ---------- */ .card { position: relative; background: var(--card); border: 1px solid var(--rule-soft); border-radius: 2px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-paper); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(218,138,103,.35); } .card--soft { background: var(--paper-warm); } /* Slight paper skew — each card sits a touch differently, like pasted-in pages */ .card--tilt-l { transform: rotate(-.32deg); } .card--tilt-r { transform: rotate(.28deg); } .card--tilt-l:hover, .card--tilt-r:hover { transform: translateY(-4px) rotate(0deg); } /* ---------- grids ---------- */ .grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); } .grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* Split: text + illustration */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split--narrow-img { grid-template-columns: 1.15fr .85fr; } @media (max-width: 860px) { .split, .split--narrow-img { grid-template-columns: 1fr; } } /* Where an illustration sits beside a long text column, let it ride along rather than float in the middle of its own empty half. position:sticky always creates its own stacking context (same issue as .wrap's z-index above), so this needs its own copy of the paper background too, or the blend-mode image inside loses sight of the page and shows as a white box. */ @media (min-width: 861px) { .split--sticky > .illus { position: sticky; top: 108px; background-color: var(--cream); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"), radial-gradient(ellipse 70% 50% at 15% 0%, rgba(253,222,192,.55), transparent 60%), radial-gradient(ellipse 60% 45% at 88% 12%, rgba(118,158,176,.13), transparent 62%), radial-gradient(ellipse 55% 40% at 50% 100%, rgba(218,138,103,.10), transparent 65%), url('../img/paper-texture.jpg'); background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat; background-size: 220px 220px, auto, auto, auto, 700px 700px; background-attachment: fixed, fixed, fixed, fixed, fixed; background-blend-mode: normal, multiply, multiply, multiply, normal; } } /* ========================================================================== Illustration treatments — washed edges, never overpowering text ========================================================================== */ /* Illustration, painted directly onto the page: each source image has its own paper tone stretched to pure white and its edge dissolved into an irregular watercolour bleed at the pixel level (see scratchpad/pdftools/paint.mjs), so mix-blend-mode: multiply makes the white vanish and only pigment remains. */ .illus { position: relative; display: block; } .illus img { width: 100%; mix-blend-mode: multiply; } /* Homepage hero illustration. Deliberately wider than its own column and pulled left, so it bleeds into the gap and reads at full presence without running off the right edge of the window. The percentages ease back on narrower windows, where there is less room either side to bleed into, and reset entirely once the hero stacks to a single column. Must sit after .illus img — same specificity, so source order decides. Kept as a class rather than an inline style so the breakpoints below can actually take effect; an inline width would outrank a media query. */ .hero-illus img { width: 125%; max-width: none; margin-left: -8%; } @media (max-width: 1100px) { .hero-illus img { width: 118%; margin-left: -6%; } } @media (max-width: 860px) { .hero-illus img { width: 100%; margin-left: 0; } } /* Faint scenery layer sitting behind a section. No z-index on purpose — see the note on html's background above: an explicit z-index here would make this its own stacking context and wall its mix-blend-mode off from the page background. Document order already puts it behind .wrap's content. */ .scenery { position: absolute; pointer-events: none; user-select: none; mix-blend-mode: multiply; } .scenery img { width: 100%; } .scenery--r { right: -6%; top: 6%; width: min(430px, 42vw); opacity: .13; } .scenery--l { left: -7%; top: 12%; width: min(400px, 40vw); opacity: .12; } .scenery--br { right: -5%; bottom: -4%; width: min(380px, 38vw); opacity: .11; } .scenery--bl { left: -5%; bottom: -3%; width: min(360px, 36vw); opacity: .11; } .scenery--c { left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(760px, 78vw); opacity: .07; } @media (max-width: 760px) { .scenery { opacity: .07 !important; } } /* No z-index: .scenery/.wash are written before .wrap in the markup, and positioned elements without a z-index paint in document order, so .wrap still sits above them — without becoming a stacking context that would cut its illustrations off from the page background. */ .section > .wrap { position: relative; } /* Watercolour wash blob behind a block */ .wash { position: absolute; pointer-events: none; filter: blur(38px); opacity: .5; border-radius: 48% 52% 61% 39% / 43% 38% 62% 57%; } .wash--blue { background: radial-gradient(circle, rgba(118,158,176,.55), transparent 70%); } .wash--terra { background: radial-gradient(circle, rgba(218,138,103,.42), transparent 70%); } .wash--sage { background: radial-gradient(circle, rgba(167,210,159,.5), transparent 70%); } .wash--gold { background: radial-gradient(circle, rgba(199,154,62,.38), transparent 70%); } .wash--peach { background: radial-gradient(circle, rgba(255,206,207,.55), transparent 70%); } /* Tiny recurring micro-motifs (winding line / circle / hand / sprout / doorway) */ .motif { display: inline-block; vertical-align: middle; color: var(--ochre-light); opacity: .85; } .motif svg { display: block; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(237,226,205,.9); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); border-bottom: 1px solid var(--rule-soft); transition: box-shadow .3s var(--ease), background-color .3s var(--ease); } .site-header.is-stuck { box-shadow: 0 1px 0 var(--rule-soft), 0 10px 26px -20px rgba(43,58,68,.5); background: rgba(240,231,213,.95); } .header-inner { max-width: 1360px; margin-inline: auto; padding: .75rem var(--gutter); display: flex; align-items: center; gap: 1.25rem; } .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; } .brand img { width: 42px; height: 42px; flex-shrink: 0; } .brand-name { font-family: var(--serif); font-size: 1.045rem; font-weight: 500; line-height: 1.16; color: var(--slate); letter-spacing: .004em; } .brand-name small { display: block; font-family: var(--sans); font-size: .565rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-soft); margin-top: 2px; } @media (max-width: 400px) { .brand-name { font-size: .93rem; } .brand img { width: 36px; height: 36px; } } .nav { margin-left: auto; } .nav ul { display: flex; align-items: center; gap: clamp(.5rem, 1.5vw, 1.35rem); list-style: none; margin: 0; padding: 0; } .nav a { position: relative; display: block; padding: .45rem .12rem; font-size: .795rem; font-weight: 500; letter-spacing: .085em; text-transform: uppercase; text-decoration: none; color: var(--slate); white-space: nowrap; transition: color .26s var(--ease); } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: .12rem; height: 1px; background: var(--terracotta); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); } .nav a:hover { color: var(--brown); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); } .nav a[aria-current="page"] { color: var(--brown); } .header-actions { display: flex; align-items: center; gap: .3rem; margin-left: .5rem; } .icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: transparent; color: var(--slate); border-radius: 50%; cursor: pointer; text-decoration: none; position: relative; transition: background-color .25s var(--ease), color .25s var(--ease); } .icon-btn:hover { background: rgba(255,255,255,.6); color: var(--brown); } .icon-btn:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; } .icon-btn svg { width: 19px; height: 19px; stroke-width: 1.5; } .badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--terracotta); color: #fff; font-size: .61rem; font-weight: 700; line-height: 16px; text-align: center; } .header-actions .btn { margin-left: .45rem; } .menu-toggle { display: none; } @media (max-width: 1150px) { .nav { display: none; } .menu-toggle { display: grid; } .nav { margin-left: 0; } } /* Below the desktop nav breakpoint the drawer carries everything, so the header sheds icons rather than pushing the menu button off-screen. */ @media (max-width: 820px) { .header-actions .btn { display: none; } } @media (max-width: 620px) { .header-actions [aria-label="Wishlist"], .header-actions [aria-label="Your account"] { display: none; } } @media (max-width: 430px) { .header-inner { gap: .5rem; padding-inline: 1rem; } .brand { gap: .55rem; } .brand-name { font-size: .88rem; } .brand-name small { font-size: .52rem; } .icon-btn { width: 34px; height: 34px; } } /* Mobile drawer */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); background: var(--paper); border-left: 1px solid var(--rule); z-index: 200; transform: translateX(101%); transition: transform .42s var(--ease); display: flex; flex-direction: column; overflow-y: auto; box-shadow: -30px 0 60px -30px rgba(43,58,68,.4); } .drawer.is-open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); border-bottom: 1px solid var(--rule-soft); } .drawer nav ul { list-style: none; margin: 0; padding: 1.4rem var(--gutter); display: grid; gap: .2rem; } .drawer nav a { display: block; padding: .72rem 0; font-family: var(--serif); font-size: 1.35rem; text-decoration: none; color: var(--slate); border-bottom: 1px solid var(--rule-soft); transition: color .25s, padding-left .25s var(--ease); } .drawer nav a:hover { color: var(--brown); padding-left: .5rem; } .drawer-foot { margin-top: auto; padding: 1.4rem var(--gutter) 2rem; display: grid; gap: .75rem; } .drawer-foot .row { display: flex; gap: .5rem; flex-wrap: wrap; } .drawer-foot .row a { flex: 1; } .scrim { position: fixed; inset: 0; background: rgba(17,34,43,.4); backdrop-filter: blur(2px); z-index: 150; opacity: 0; visibility: hidden; transition: opacity .38s var(--ease), visibility .38s; } .scrim.is-open { opacity: 1; visibility: visible; } body.no-scroll { overflow: hidden; } /* Search overlay */ .search-panel { position: fixed; inset: 0 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--rule); z-index: 210; padding: clamp(1.5rem, 5vw, 3.5rem) 0; transform: translateY(-102%); transition: transform .42s var(--ease); box-shadow: 0 30px 60px -40px rgba(43,58,68,.5); } .search-panel.is-open { transform: translateY(0); } .search-form { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: .85rem; } .search-form input { flex: 1; border: 0; background: transparent; font-family: var(--serif); font-size: clamp(1.3rem, 3.4vw, 2.1rem); color: var(--slate); padding: .2rem 0; } .search-form input:focus { outline: none; } .search-form input::placeholder { color: rgba(43,58,68,.28); } .search-hint { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .chip { display: inline-block; padding: .34rem .85rem; border: 1px solid var(--rule); border-radius: 100px; font-size: .76rem; letter-spacing: .04em; text-decoration: none; color: var(--text-soft); background: rgba(255,255,255,.5); transition: border-color .25s, color .25s, background-color .25s; } .chip:hover { border-color: var(--terracotta); color: var(--brown); background: #fff; } /* ========================================================================== Page banner (inner pages) ========================================================================== */ .page-head { position: relative; padding-block: clamp(3.25rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem); /* No overflow:hidden here — it was hard-clipping the scenery illustration's own organic fade at this container's edge, showing as a straight corner cutting across it. body already has overflow-x:hidden globally, so this isn't needed to prevent a horizontal scrollbar. */ } .page-head .wrap { position: relative; } .page-head h1 { margin-bottom: .35em; } .page-head .lead { max-width: 640px; } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; } .crumbs a { text-decoration: none; color: var(--text-muted); transition: color .25s; } .crumbs a:hover { color: var(--brown); } .crumbs span { opacity: .5; } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; background: var(--charcoal); color: #E8DFCF; padding-block: clamp(3.25rem, 7vw, 5.5rem) 0; margin-top: clamp(3rem, 7vw, 6rem); overflow: hidden; } .site-footer::before { content: ''; position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; } .site-footer .wrap { position: relative; z-index: 1; } .site-footer h4 { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--ochre-light); margin-bottom: 1.15rem; } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.25rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); } @media (max-width: 940px) { .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } } .footer-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; } .footer-brand img { width: 46px; height: 46px; } .footer-brand .n { font-family: var(--serif); font-size: 1.16rem; color: #F4EAD6; line-height: 1.2; } .footer-about p { color: rgba(232,223,207,.62); font-size: .9rem; line-height: 1.72; max-width: 34ch; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .52rem; } .site-footer ul a { text-decoration: none; color: rgba(232,223,207,.68); font-size: .875rem; transition: color .25s var(--ease), padding-left .25s var(--ease); display: inline-block; } .site-footer ul a:hover { color: var(--ochre-light); padding-left: 4px; } .socials { display: flex; gap: .55rem; margin-top: 1.35rem; flex-wrap: wrap; } .socials a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(232,223,207,.22); border-radius: 50%; color: rgba(232,223,207,.72); text-decoration: none; transition: border-color .28s, color .28s, transform .28s var(--ease), background-color .28s; } .socials a:hover { border-color: var(--ochre-light); color: var(--charcoal); background: var(--ochre-light); transform: translateY(-2px); } .socials svg { width: 15px; height: 15px; } .footer-legal { border-top: 1px solid rgba(232,223,207,.14); padding-block: 1.4rem 1.75rem; display: flex; flex-wrap: wrap; gap: .6rem 1.35rem; align-items: center; } .footer-legal a { color: rgba(232,223,207,.55); text-decoration: none; font-size: .775rem; transition: color .25s; } .footer-legal a:hover { color: var(--ochre-light); } .footer-legal .copy { margin-left: auto; color: rgba(232,223,207,.42); font-size: .775rem; } @media (max-width: 700px) { .footer-legal .copy { margin-left: 0; width: 100%; padding-top: .4rem; } } .footer-disclaimer { border-top: 1px solid rgba(232,223,207,.1); padding-block: 1.15rem 2.25rem; color: rgba(232,223,207,.4); font-size: .735rem; line-height: 1.68; max-width: 92ch; } /* Footer botanical sprigs */ .footer-sprig { position: absolute; color: rgba(199,154,62,.16); pointer-events: none; } .footer-sprig--l { left: -10px; bottom: 40px; width: 130px; transform: rotate(-8deg); } .footer-sprig--r { right: -14px; top: 26px; width: 150px; transform: scaleX(-1) rotate(-6deg); } @media (max-width: 800px) { .footer-sprig { display: none; } } /* ========================================================================== Reveal on scroll ========================================================================== */ /* Only hide when scripting is available, so a JS failure never blanks the page. */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .85s var(--ease), transform .85s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .09s; } .reveal[data-d="2"] { transition-delay: .18s; } .reveal[data-d="3"] { transition-delay: .27s; } .reveal[data-d="4"] { transition-delay: .36s; } .reveal[data-d="5"] { transition-delay: .45s; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* ========================================================================== Shared components ========================================================================== */ /* Pathway card (three offerings) */ .pathway { position: relative; display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--paper); border: 1px solid var(--rule-soft); border-top: 2px solid var(--ochre-light); border-radius: 2px; box-shadow: var(--shadow-paper); overflow: hidden; transition: transform .42s var(--ease), box-shadow .42s var(--ease); } .pathway:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); } .pathway--blue { border-top-color: var(--blue-muted); } .pathway--sage { border-top-color: var(--sage-deep); } .pathway--terra { border-top-color: var(--terracotta); } .pathway .n { font-family: var(--serif2); font-size: .95rem; font-style: italic; color: var(--ochre); margin-bottom: .5rem; } .pathway h3 { margin-bottom: .6rem; } .pathway p { color: var(--text-soft); font-size: .935rem; } .pathway .link { margin-top: auto; padding-top: 1.4rem; align-self: flex-start; } .pathway-who { margin: .9rem 0 0; padding-top: .9rem; border-top: 1px dashed var(--rule); font-size: .84rem; color: var(--text-muted); } .pathway-who strong { color: var(--slate); font-weight: 600; } /* Service / listing item */ .entry { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid var(--rule-soft); } .entry:last-child { border-bottom: 0; } .entry-num { font-family: var(--serif2); font-size: 1.05rem; font-style: italic; color: var(--ochre-light); padding-top: .2rem; min-width: 1.6rem; } .entry h3 { margin-bottom: .3rem; font-size: clamp(1.15rem, 1rem + .6vw, 1.42rem); } .entry p { color: var(--text-soft); font-size: .94rem; margin-bottom: .55rem; } .entry-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; color: var(--text-muted); } .entry-meta span { display: inline-flex; align-items: center; gap: .35rem; } .entry-cta { align-self: center; } @media (max-width: 700px) { .entry { grid-template-columns: auto 1fr; } .entry-cta { grid-column: 2; justify-self: start; padding-top: .5rem; } } /* Detail grid inside expandable service */ .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px,100%), 1fr)); gap: 1.15rem 1.75rem; margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px dashed var(--rule); } .detail-grid dt { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); margin-bottom: .3rem; } .detail-grid dd { margin: 0; font-size: .89rem; color: var(--text-soft); line-height: 1.62; } /* Accordion (FAQ + expandable services) */ .acc { border-bottom: 1px solid var(--rule-soft); } .acc:first-of-type { border-top: 1px solid var(--rule-soft); } .acc-btn { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--serif); font-size: clamp(1.02rem, .96rem + .4vw, 1.22rem); font-weight: 500; color: var(--slate); line-height: 1.42; transition: color .26s var(--ease); } .acc-btn:hover { color: var(--brown); } .acc-btn:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; } .acc-ico { flex-shrink: 0; width: 22px; height: 22px; margin-top: .18rem; position: relative; } .acc-ico::before, .acc-ico::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--ochre); transition: transform .38s var(--ease), opacity .38s var(--ease); } .acc-ico::before { width: 13px; height: 1.5px; transform: translate(-50%,-50%); } .acc-ico::after { width: 1.5px; height: 13px; transform: translate(-50%,-50%); } .acc-btn[aria-expanded="true"] .acc-ico::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); } .acc-panel > div { overflow: hidden; } .acc-btn[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; } .acc-body { padding-bottom: 1.6rem; color: var(--text-soft); font-size: .95rem; max-width: 70ch; } .acc-body > * + * { margin-top: .9rem; } /* Product card */ .product { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 2px; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(218,138,103,.32); } .product-media { position: relative; aspect-ratio: 4 / 3.2; background: linear-gradient(160deg, var(--paper-warm), #F1E4CE); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--rule-soft); } .product-media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .8s var(--ease); } .product:hover .product-media img { transform: scale(1.045); } /* No product photography has been supplied yet, so an empty .product-media paints a watercolour wash + botanical sprig instead of a broken frame. */ .product-media::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 58% 52% at 32% 28%, rgba(218,138,103,.17), transparent 68%), radial-gradient(ellipse 52% 48% at 74% 70%, rgba(118,158,176,.16), transparent 66%), radial-gradient(ellipse 44% 40% at 62% 22%, rgba(199,154,62,.13), transparent 70%); } .product-media::after { content: ''; position: absolute; left: 50%; top: 52%; width: 46%; height: 62%; transform: translate(-50%, -50%); opacity: .3; background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform .8s var(--ease), opacity .5s var(--ease); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160' fill='none' stroke='%232B3A44' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M60 158V34'/%3E%3Cpath d='M60 124c-18 0-29-11-31-27 16-2 29 7 31 27z'/%3E%3Cpath d='M60 96c18 0 29-11 31-27-16-2-29 7-31 27z'/%3E%3Cpath d='M60 66c-15 0-25-10-27-23 13-2 25 6 27 23z'/%3E%3Ccircle cx='60' cy='28' r='5'/%3E%3C/svg%3E"); } .product:hover .product-media::after { transform: translate(-50%,-50%) scale(1.06); opacity: .38; } .product-media img ~ .product-tag { z-index: 2; } .product-media > img { position: relative; z-index: 1; } .product-media > img ~ ::after { display: none; } .product-tag { position: absolute; top: .75rem; left: .75rem; padding: .26rem .68rem; background: rgba(251,245,233,.94); border: 1px solid var(--rule-soft); border-radius: 100px; font-size: .655rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre); } .wish { position: absolute; top: .7rem; right: .7rem; width: 32px; height: 32px; display: grid; place-items: center; background: rgba(251,245,233,.92); border: 1px solid var(--rule-soft); border-radius: 50%; cursor: pointer; color: var(--slate); transition: color .25s, background-color .25s, transform .25s var(--ease); } .wish:hover { color: var(--terracotta); transform: scale(1.09); } .wish[aria-pressed="true"] { color: #fff; background: var(--terracotta); border-color: var(--terracotta); } .wish svg { width: 15px; height: 15px; } .product-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; } .product-cat { font-size: .655rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: .42rem; } .product-name { font-family: var(--serif); font-size: 1.06rem; font-weight: 500; line-height: 1.32; margin-bottom: .45rem; color: var(--slate); } .product-desc { font-size: .84rem; color: var(--text-soft); line-height: 1.6; margin-bottom: .9rem; } .product-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .5rem; } .price { font-family: var(--serif2); font-size: 1.16rem; font-weight: 600; color: var(--slate); } .price s { font-size: .8rem; font-weight: 400; color: var(--text-muted); margin-right: .4rem; } .price em { font-style: normal; font-size: .72rem; color: var(--sage-deep); font-family: var(--sans); font-weight: 600; letter-spacing: .06em; display: block; margin-top: 1px; } /* Event card */ .event { display: grid; grid-template-columns: 108px 1fr; gap: clamp(1.15rem, 2.5vw, 2rem); padding: clamp(1.35rem, 2.5vw, 1.9rem); background: var(--paper); border: 1px solid var(--rule-soft); border-left: 3px solid var(--blue-muted); border-radius: 2px; box-shadow: var(--shadow-paper); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .event:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .event--current { border-left-color: var(--terracotta); } .event--upcoming { border-left-color: var(--blue-muted); } .event--past { border-left-color: rgba(43,58,68,.22); opacity: .92; } .event-date { text-align: center; padding: .85rem .5rem; background: var(--paper-warm); border: 1px solid var(--rule-soft); border-radius: 2px; align-self: start; } .event-date .d { font-family: var(--serif); font-size: 1.85rem; line-height: 1; color: var(--slate); display: block; } .event-date .m { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); display: block; margin-top: .3rem; } .event-date .y { font-size: .66rem; color: var(--text-muted); display: block; margin-top: .12rem; } .event-date.tbd .d { font-size: .96rem; font-family: var(--sans); font-weight: 600; letter-spacing: .1em; padding-block: .55rem; } .event h3 { margin-bottom: .4rem; } .event-theme { font-family: var(--serif2); font-size: 1.05rem; font-style: italic; color: var(--brown); margin-bottom: .55rem; } .event p { font-size: .92rem; color: var(--text-soft); } @media (max-width: 620px) { .event { grid-template-columns: 1fr; } .event-date { justify-self: start; min-width: 96px; } } /* Meta pill row */ .pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: .85rem 0; } .pill { display: inline-flex; align-items: center; gap: .38rem; padding: .3rem .72rem; background: rgba(255,255,255,.62); border: 1px solid var(--rule-soft); border-radius: 100px; font-size: .755rem; color: var(--text-soft); letter-spacing: .015em; } .pill svg { width: 13px; height: 13px; opacity: .7; } .pill--gold { border-color: rgba(199,154,62,.45); color: var(--ochre); background: rgba(199,154,62,.08); } .pill--sage { border-color: rgba(107,143,99,.4); color: var(--sage-deep); background: rgba(167,210,159,.13); } .pill--terra { border-color: rgba(218,138,103,.45); color: var(--brown); background: rgba(218,138,103,.09); } .pill--blue { border-color: rgba(118,158,176,.45); color: var(--blue-deep); background: rgba(118,158,176,.1); } /* Editable / draft flag — content the source marks as DRAFT or TBD */ .draft { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; margin: 1.1rem 0; background: rgba(255,206,207,.2); border: 1px dashed rgba(218,138,103,.5); border-radius: 2px; font-size: .795rem; line-height: 1.62; color: var(--brown); } .draft svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: .22rem; } .draft strong { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; } .draft[data-editable] { cursor: text; } /* Quote / testimonial */ .quote { position: relative; font-family: var(--serif2); font-size: clamp(1.22rem, 1.05rem + .8vw, 1.72rem); font-style: italic; line-height: 1.55; color: var(--slate); padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 2px solid var(--ochre-light); max-width: 46ch; } .quote cite { display: block; margin-top: 1rem; font-family: var(--sans); font-style: normal; font-size: .775rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); } /* Empty / placeholder state */ .empty { padding: clamp(2rem, 5vw, 3.5rem); text-align: center; border: 1px dashed var(--rule); border-radius: 2px; background: rgba(255,255,255,.35); } .empty .motif { margin-bottom: 1rem; opacity: .5; } .empty h3 { font-size: 1.24rem; margin-bottom: .5rem; } .empty p { color: var(--text-soft); font-size: .92rem; max-width: 46ch; margin-inline: auto; } /* Callout band */ .callout { position: relative; padding: clamp(2rem, 4.5vw, 3.25rem); background: var(--paper-warm); border: 1px solid var(--rule-soft); border-radius: 2px; overflow: hidden; } .callout--slate { background: var(--slate); color: #E8DFCF; border-color: transparent; } .callout--slate h2, .callout--slate h3 { color: #F4EAD6; } .callout--slate p { color: rgba(232,223,207,.72); } .callout--slate .btn--ghost { color: #F4EAD6; border-color: rgba(244,234,214,.4); } .callout--slate .btn--ghost:hover { background: rgba(244,234,214,.1); border-color: var(--ochre-light); color: var(--ochre-light); } /* Forms */ .field { display: grid; gap: .42rem; margin-bottom: 1.1rem; } .field label { font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--slate); } .field label .req { color: var(--terracotta); } .field input, .field select, .field textarea { width: 100%; padding: .78rem .9rem; font-family: var(--sans); font-size: .93rem; color: var(--slate); background: rgba(255,255,255,.72); border: 1px solid var(--rule); border-radius: 2px; transition: border-color .25s, background-color .25s, box-shadow .25s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--terracotta); background: #fff; box-shadow: 0 0 0 3px rgba(218,138,103,.13); } .field textarea { resize: vertical; min-height: 130px; line-height: 1.62; } .field .hint { font-size: .755rem; color: var(--text-muted); letter-spacing: .01em; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } .radio-row { display: flex; flex-wrap: wrap; gap: .75rem; } .radio-row label { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1px solid var(--rule); border-radius: 2px; background: rgba(255,255,255,.55); cursor: pointer; font-size: .85rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-soft); transition: border-color .25s, color .25s, background-color .25s; } .radio-row label:has(input:checked) { border-color: var(--terracotta); color: var(--brown); background: rgba(218,138,103,.08); } .radio-row input { accent-color: var(--terracotta); } /* Tabs */ .tabs { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--rule-soft); margin-bottom: clamp(2rem, 4vw, 3rem); } .tab { position: relative; padding: .8rem 1.15rem; background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); transition: color .28s var(--ease); } .tab::after { content: ''; position: absolute; left: 1.15rem; right: 1.15rem; bottom: -1px; height: 2px; background: var(--terracotta); transform: scaleX(0); transition: transform .34s var(--ease); } .tab:hover { color: var(--brown); } .tab[aria-selected="true"] { color: var(--slate); } .tab[aria-selected="true"]::after { transform: scaleX(1); } .tab-panel[hidden] { display: none; } /* Anchor nav (sticky in-page nav) */ .anchor-nav { position: sticky; top: 74px; z-index: 20; display: flex; gap: .25rem; overflow-x: auto; padding: .6rem 0; margin-bottom: clamp(2rem, 4vw, 3rem); background: rgba(237,226,205,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule-soft); scrollbar-width: none; -ms-overflow-style: none; } .anchor-nav::-webkit-scrollbar { height: 0; display: none; } .anchor-nav a { flex-shrink: 0; padding: .45rem .9rem; font-size: .755rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--text-muted); border-radius: 100px; transition: color .25s, background-color .25s; white-space: nowrap; } .anchor-nav a:hover, .anchor-nav a.is-active { color: var(--brown); background: rgba(255,255,255,.6); } /* Stat / info row */ .info-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px,100%),1fr)); gap: 1.5rem 2rem; padding: clamp(1.5rem,3vw,2.25rem) 0; border-block: 1px solid var(--rule-soft); } .info-row .k { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); margin-bottom: .38rem; } .info-row .v { font-family: var(--serif2); font-size: 1.1rem; color: var(--slate); line-height: 1.45; } /* Utility */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.25rem; } .mt-4 { margin-top: 3rem; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1.5rem; } .mb-3 { margin-bottom: 2.25rem; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: .75rem; } .gap-2 { gap: 1.25rem; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -60px; z-index: 300; padding: .7rem 1.2rem; background: var(--slate); color: var(--cream); text-decoration: none; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; transition: top .25s var(--ease); } .skip-link:focus { top: 1rem; } /* ========================================================================== Members Space dashboard ========================================================================== */ .member-grid { display: grid; grid-template-columns: 290px 1fr; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; } @media (max-width: 960px) { .member-grid { grid-template-columns: 1fr; } } .member-side { display: grid; gap: 1.25rem; position: sticky; top: 92px; } @media (max-width: 960px) { .member-side { position: static; } } .member-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 2px; padding: 1.4rem; box-shadow: var(--shadow-paper); } .member-id { text-align: center; } .avatar { width: 76px; height: 76px; margin: 0 auto .9rem; border-radius: 50%; background: linear-gradient(150deg, var(--paper-warm), #E8D9BC); border: 1px solid var(--rule-soft); display: grid; place-items: center; color: var(--blue-soft); } .avatar svg { width: 34px; height: 34px; stroke-width: 1.3; } .member-id .hi { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); } .member-id .nm { font-family: var(--serif); font-size: 1.3rem; color: var(--slate); line-height: 1.25; margin: .15rem 0 .3rem; } .member-id .em { font-size: .8rem; color: var(--text-soft); word-break: break-all; } .member-nav { display: grid; gap: .1rem; } .member-nav a { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; font-size: .875rem; text-decoration: none; color: var(--text-soft); border-radius: 2px; border-left: 2px solid transparent; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .member-nav a svg { width: 17px; height: 17px; stroke-width: 1.5; opacity: .75; flex-shrink: 0; } .member-nav a:hover { background: rgba(255,255,255,.6); color: var(--brown); } .member-nav a.is-active { background: var(--paper-warm); color: var(--slate); border-left-color: var(--terracotta); font-weight: 600; } .member-nav .sep { height: 1px; background: var(--rule-soft); margin: .5rem .85rem; } .plan { background: linear-gradient(155deg, var(--slate), var(--charcoal)); color: #E8DFCF; border: 0; position: relative; overflow: hidden; } .plan::after { content: ''; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(199,154,62,.3), transparent 70%); } .plan .k { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ochre-light); } .plan h4 { font-family: var(--serif); font-size: 1.32rem; color: #F4EAD6; margin: .3rem 0 .15rem; font-weight: 400; letter-spacing: 0; } .plan .valid { font-size: .755rem; color: rgba(232,223,207,.55); } .plan ul { list-style: none; margin: 1.05rem 0 0; padding: 0; display: grid; gap: .5rem; position: relative; z-index: 1; } .plan li { display: flex; gap: .55rem; font-size: .81rem; color: rgba(232,223,207,.8); line-height: 1.5; } .plan li svg { width: 13px; height: 13px; color: var(--ochre-light); flex-shrink: 0; margin-top: .28rem; } .plan .status { position: absolute; top: 1.15rem; right: 1.15rem; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 100px; background: rgba(167,210,159,.2); color: var(--sage); border: 1px solid rgba(167,210,159,.35); } .coins { display: flex; align-items: center; gap: 1rem; } .coins-n { font-family: var(--serif); font-size: 2.15rem; line-height: 1; color: var(--slate); } .coins-n small { display: block; font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); margin-top: .25rem; } .member-panel h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); } .data-row { display: flex; align-items: flex-start; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--rule-soft); } .data-row:last-child { border-bottom: 0; } .data-row svg { width: 17px; height: 17px; stroke-width: 1.5; color: var(--blue-soft); flex-shrink: 0; margin-top: .22rem; } .data-row .lbl { font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .18rem; } .data-row .val { font-size: .93rem; color: var(--slate); } .addr { padding: 1.05rem; border: 1px solid var(--rule-soft); border-radius: 2px; background: rgba(255,255,255,.5); position: relative; } .addr.is-default { border-color: rgba(218,138,103,.45); background: rgba(218,138,103,.05); } .addr .tag { font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ochre); margin-bottom: .4rem; display: block; } .addr.add { display: grid; place-content: center; text-align: center; border-style: dashed; min-height: 120px; color: var(--text-muted); text-decoration: none; transition: border-color .25s, color .25s; } .addr.add:hover { border-color: var(--terracotta); color: var(--brown); } .thread { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.05rem 0; border-bottom: 1px solid var(--rule-soft); } .thread:last-child { border-bottom: 0; } .thread .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-warm); border: 1px solid var(--rule-soft); display: grid; place-items: center; color: var(--blue-soft); font-family: var(--serif); font-size: .85rem; } .thread h4 { margin-bottom: .15rem; font-size: .96rem; } .thread .meta { font-size: .76rem; color: var(--text-muted); } .thread .cnt { font-size: .78rem; color: var(--text-muted); white-space: nowrap; } @media (max-width: 560px) { .thread { grid-template-columns: auto 1fr; } .thread .cnt { grid-column: 2; } } /* Gift card visual */ .giftcard { position: relative; aspect-ratio: 1.6; border-radius: 6px; padding: clamp(1.25rem, 3vw, 2rem); background: linear-gradient(140deg, var(--blue-deep), var(--charcoal) 70%); color: #F4EAD6; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-lift); } .giftcard::before { content: ''; position: absolute; right: -14%; bottom: -30%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(199,154,62,.5), transparent 68%); } .giftcard::after { content: ''; position: absolute; inset: 0; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } .giftcard > * { position: relative; z-index: 1; } .giftcard .gc-brand { display: flex; align-items: center; gap: .6rem; } .giftcard .gc-brand img { width: 34px; height: 34px; } .giftcard .gc-brand span { font-family: var(--serif); font-size: .93rem; line-height: 1.2; } .giftcard .gc-amt { font-family: var(--serif); font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); line-height: 1; } .giftcard .gc-label { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ochre-light); } .amount-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem; } .amount-grid label { display: grid; place-items: center; padding: .95rem .5rem; border: 1px solid var(--rule); border-radius: 2px; background: rgba(255,255,255,.55); cursor: pointer; font-family: var(--serif2); font-size: 1.14rem; font-weight: 600; color: var(--slate); letter-spacing: 0; text-transform: none; transition: border-color .25s, background-color .25s, color .25s, transform .25s var(--ease); } .amount-grid label:hover { border-color: var(--terracotta); transform: translateY(-2px); } .amount-grid label:has(input:checked) { border-color: var(--terracotta); background: rgba(218,138,103,.1); color: var(--brown); } .amount-grid input { position: absolute; opacity: 0; pointer-events: none; } /* Offer / QR page */ .offer-ticket { position: relative; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 3px; box-shadow: var(--shadow-lift); overflow: hidden; } .offer-ticket .top { padding: clamp(1.75rem, 4vw, 3rem); background: linear-gradient(150deg, var(--paper-warm), #F0E1C6); border-bottom: 2px dashed var(--rule); text-align: center; position: relative; } .offer-ticket .top::before, .offer-ticket .top::after { content: ''; position: absolute; bottom: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); border: 1px solid var(--rule-soft); } .offer-ticket .top::before { left: -13px; } .offer-ticket .top::after { right: -13px; } .offer-ticket .bottom { padding: clamp(1.5rem, 3.5vw, 2.5rem); } .code { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.15rem; padding: .85rem 1.5rem; background: var(--slate); color: var(--cream); border-radius: 2px; font-family: var(--sans); font-size: 1.14rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; } /* ========================================================================== Cart & wishlist lines ========================================================================== */ .line { display: grid; grid-template-columns: 92px 1fr auto auto auto; gap: clamp(.9rem, 2vw, 1.5rem); align-items: center; padding: 1.15rem 0; border-bottom: 1px solid var(--rule-soft); } .line:first-child { border-top: 1px solid var(--rule-soft); } /* Wishlist rows have no quantity or line total, so they don't need those columns. */ .line--simple { grid-template-columns: 92px 1fr auto; } .line-media { width: 92px; aspect-ratio: 1; border: 1px solid var(--rule-soft); border-radius: 2px; background: radial-gradient(ellipse 58% 52% at 32% 28%, rgba(218,138,103,.17), transparent 68%), radial-gradient(ellipse 52% 48% at 74% 70%, rgba(118,158,176,.16), transparent 66%), linear-gradient(160deg, var(--paper-warm), #F1E4CE); position: relative; } .line-media::after { content: ''; position: absolute; inset: 22%; opacity: .3; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160' fill='none' stroke='%232B3A44' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M60 158V34'/%3E%3Cpath d='M60 124c-18 0-29-11-31-27 16-2 29 7 31 27z'/%3E%3Cpath d='M60 96c18 0 29-11 31-27-16-2-29 7-31 27z'/%3E%3Ccircle cx='60' cy='28' r='5'/%3E%3C/svg%3E"); } .line-body .product-name { margin-bottom: .3rem; } .line-body .product-cat { margin-bottom: .3rem; } .qty { display: flex; align-items: center; gap: .2rem; } .qty-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--rule); background: rgba(255,255,255,.6); border-radius: 2px; cursor: pointer; font-size: 1rem; color: var(--slate); transition: border-color .25s, color .25s, background-color .25s; } .qty-btn:hover { border-color: var(--terracotta); color: var(--brown); background: #fff; } .qty-n { min-width: 2ch; text-align: center; font-family: var(--serif2); font-size: 1.05rem; } .line-total { font-family: var(--serif2); font-size: 1.1rem; font-weight: 600; color: var(--slate); min-width: 5ch; text-align: right; } .line-remove { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 50%; transition: color .25s, background-color .25s; } .line-remove:hover { color: var(--brown); background: rgba(218,138,103,.1); } .line-remove svg { width: 16px; height: 16px; } @media (max-width: 700px) { .line { grid-template-columns: 68px 1fr auto; row-gap: .75rem; } .line-media { width: 68px; } .line-remove { grid-row: 1; grid-column: 3; align-self: start; } .qty { grid-column: 2; } .line-total { grid-column: 3; text-align: right; } } /* Cart lines beside the summary. Defined here rather than as an inline style so the .split stacking breakpoint can still override it on narrow screens — an inline grid-template-columns would win over the media query and leave the summary jammed alongside the lines on mobile. */ .split--cart { grid-template-columns: 1.6fr .9fr; align-items: start; gap: clamp(2rem, 4vw, 3.5rem); } @media (max-width: 860px) { .split--cart { grid-template-columns: 1fr; } .cart-summary { position: static; } } .cart-summary { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 2px; padding: clamp(1.35rem, 3vw, 2rem); box-shadow: var(--shadow-paper); position: sticky; top: 100px; } .summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .55rem; } .summary-row + .summary-row { border-top: 1px dashed var(--rule); } .summary-row .k { color: var(--text-soft); font-size: .9rem; } .summary-row .v { font-family: var(--serif2); font-size: 1.3rem; font-weight: 600; color: var(--slate); } /* Toast */ .toast { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 120%); z-index: 300; display: flex; align-items: center; gap: .65rem; padding: .85rem 1.4rem; background: var(--slate); color: var(--cream); border-radius: 2px; font-size: .86rem; box-shadow: 0 20px 40px -20px rgba(17,34,43,.7); transition: transform .45s var(--ease); max-width: calc(100vw - 2rem); } .toast.is-on { transform: translate(-50%, 0); } .toast svg { width: 16px; height: 16px; color: var(--sage); flex-shrink: 0; }