/* * Allurix Jewellery — shared stylesheet for every jewellery-facing page * (product detail + catalog). Design tokens first, then per-page rules. */ /* * Shared design tokens for every Allurix Jewellery page — a quieter, * cooler take on fine-jewellery retail (Fraunces display serif, a * restrained polished-gold accent, generous ivory space) rather than * the warmer, more rustic artisan palette this page started with. * Individual pages build on these same variable names. */ :root { --paper: #faf8f4; --ink: #17170f; --sage: #8c8579; --brass: #a8823f; --brass-dim: #7d6230; --hairline: rgba(23, 23, 15, 0.1); --frame: #f1efe7; } /* * The moodier register — matches the black+gold Instagram/Facebook * branding (dramatic, exclusive) rather than the default calm ivory retail * look. Switched via JEWELLERY_THEME in .env (config('allurix.jewellery.theme')), * set as data-theme on in resources/views/jewellery/layout.blade.php — * every rule below just reads the same token names, so nothing else in this * file needs to know which register is active. */ html[data-theme="dark"] { --paper: #0d0c09; --ink: #f3ede1; --sage: #a99a80; --brass: #d9b467; --brass-dim: #c5a467; --hairline: rgba(217, 180, 103, 0.22); /* Product photos are shot on a light backdrop — keep their frame a little lighter than the page itself in both registers, just less so here, rather than going full white against a near-black page. */ --frame: #1e1a12; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ==================== Product detail page (frontend/premium.blade.php) ==================== */ .wrap { max-width: 480px; margin: 0 auto; padding: 28px 22px 60px; min-height: 100vh; } /* ---------- header ---------- */ .brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; opacity: 0; animation: rise 0.5s ease forwards; } .brand-name { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); } .brand-sub { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-dim); margin-top: 3px; } /* ---------- hallmark badge ---------- */ .hallmark { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } .hallmark::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass); border-radius: 50%; } .hallmark span { font-family: "Fraunces", serif; font-weight: 650; font-size: 17px; } /* ---------- title block ---------- */ .title-block { margin-bottom: 22px; opacity: 0; animation: rise 0.55s ease 0.08s forwards; } .eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; } h1 { font-family: "Fraunces", serif; font-weight: 560; font-size: 32px; line-height: 1.14; margin: 0 0 8px; font-optical-sizing: auto; } .serials { font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--sage); letter-spacing: 0.01em; } /* ---------- description ---------- */ .product-description { margin-bottom: 30px; font-size: 14px; line-height: 1.7; color: var(--sage); opacity: 0; animation: rise 0.55s ease 0.12s forwards; } /* ---------- price ---------- */ .price-block { background: var(--ink); color: var(--paper); border-radius: 14px; padding: 24px 22px; margin-bottom: 30px; opacity: 0; animation: rise 0.55s ease 0.16s forwards; } .price-label { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; } .price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .price-currency { font-family: "Fraunces", serif; font-size: 17px; color: var(--paper); opacity: 0.7; } .price-value { font-family: "Fraunces", serif; font-weight: 650; font-size: 42px; letter-spacing: -0.01em; } .delta-chip { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--brass); background: rgba(176, 141, 87, 0.14); border: 1px solid rgba(176, 141, 87, 0.35); padding: 5px 10px; border-radius: 999px; } /* ---------- ledger ---------- */ .ledger { opacity: 0; animation: rise 0.55s ease 0.24s forwards; } .ledger-title { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); margin-bottom: 4px; } .row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hairline); } .row:first-of-type { border-top: 1px solid var(--hairline); } .row-label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); flex-shrink: 0; padding-top: 2px; } .row-value { font-size: 14.5px; text-align: right; line-height: 1.45; } .sub-value { color: var(--sage); font-size: 12.5px; } /* ---------- gold market bar ---------- */ .market-bar { margin-top: 28px; padding: 18px 18px 16px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: rgba(176, 141, 87, 0.055); opacity: 0; animation: rise 0.55s ease 0.32s forwards; } .market-label { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brass-dim); margin-bottom: 8px; } .market-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .market-price-main { font-family: "Fraunces", serif; font-size: 21px; font-weight: 650; color: var(--ink); } .market-price-unit { font-family: "Inter", sans-serif; font-size: 11px; color: var(--sage); margin-left: 5px; } .market-time { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(176, 141, 87, 0.22); font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.045em; color: var(--sage); } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .brand, .title-block, .product-description, .price-block, .ledger, .footer { animation: none; opacity: 1; } } a:focus-visible, button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } /* ---------- product gallery ---------- */ .product-gallery { margin-bottom: 30px; opacity: 0; animation: rise 0.55s ease 0.14s forwards; } .gallery-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 14px; } .gallery-track::-webkit-scrollbar { display: none; } .gallery-item { flex: 0 0 100%; scroll-snap-align: start; border: 0; padding: 0; margin: 0; background: transparent; cursor: zoom-in; border-radius: 14px; overflow: hidden; } .gallery-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; } .gallery-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 12px; } .gallery-dot { width: 6px; height: 6px; border: 0; border-radius: 50%; padding: 0; background: var(--hairline); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .gallery-dot.active { background: var(--ink); transform: scale(1.35); } .gallery-count { margin-top: 9px; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--sage); text-transform: uppercase; } /* ---------- image lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.88); } .lightbox.open { display: flex; } .lightbox-image { display: block; max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; } .lightbox-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 25px; cursor: pointer; } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } .lightbox-counter { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.8); } @media (max-width: 600px) { .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } } @media (prefers-reduced-motion: reduce) { .product-gallery { animation: none; opacity: 1; } } /* ==================== Catalog page (jewellery/index.blade.php) ==================== */ .container { max-width: 1240px; margin: 0 auto; /* A flat side padding leaves almost no visible margin once the viewport gets close to max-width (e.g. the header's logo/nav-link sat nearly flush against the browser edge on a ~1260px-wide screen) — scale it with the viewport instead so there's always real breathing room, closer to how the nail studio site's (Bootstrap) container behaves. */ padding: 0 clamp(24px, 5vw, 80px); } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--hairline); } .site-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; /* Vertical only — .container (same element) already sets the side padding; the old `padding: 18px 0` shorthand here was silently zeroing that back out on every side, which is why the header never actually picked up any of the .container padding fixes. */ padding-block: 18px; } /* Same top-left mark as the nail studio site: logo image + serif wordmark + tagline, stacked — see resources/views/nails/layout.blade.php. */ .navbar-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } .navbar-brand img { height: 40px; width: 40px; object-fit: contain; } .navbar-brand .brand-text { display: flex; flex-direction: column; align-items: center; } .wordmark { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; letter-spacing: 0.24em; line-height: 1; color: var(--ink); } .tagline { color: var(--sage); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 4px; } @media (max-width: 480px) { .wordmark { font-size: 18px; letter-spacing: 0.16em; } .nails-link { font-size: 10px; letter-spacing: 0.06em; padding: 8px 14px; } } /* A bordered pill, not a bare inline link — gives the "back to the nail studio" exit some breathing room instead of sitting flush against the edge of the header. */ .nails-link { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); text-decoration: none; padding: 10px 20px; border: 1px solid var(--hairline); transition: border-color 0.2s ease, color 0.2s ease; } .nails-link:hover { color: var(--ink); border-color: var(--brass); } /* ---------- hero ---------- */ .hero { padding: 72px 0 40px; text-align: center; } .hero-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-dim); margin-bottom: 18px; } .hero h1 { font-family: "Fraunces", serif; font-weight: 560; font-size: clamp(34px, 6vw, 58px); line-height: 1.08; margin: 0 0 18px; text-wrap: balance; } .hero p { max-width: 480px; margin: 0 auto; font-size: 15px; line-height: 1.7; color: var(--sage); } /* ---------- filters ---------- */ /* Outer band spans full width (its border-bottom should reach the edges, same as .site-header) — the chips themselves sit in a nested .container so they're padded the same as the header/hero/grid, not flush to the screen edge on narrow phones. */ .filters { padding: 36px 0 56px; border-bottom: 1px solid var(--hairline); } .filters .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .filter-chip { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); background: transparent; border: 1px solid var(--hairline); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .filter-chip:hover { border-color: var(--brass); color: var(--ink); } .filter-chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* ---------- grid ---------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; padding: 56px 0 100px; } @media (max-width: 920px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } } @media (max-width: 560px) { .grid { grid-template-columns: 1fr; gap: 44px; } /* .container's own clamp() already guarantees a 24px floor here — this used to hard-reset it to 20px, undoing that. */ } .card { text-decoration: none; color: inherit; display: block; opacity: 0; animation: rise 0.5s ease forwards; } .card-frame { position: relative; aspect-ratio: 1 / 1; border-radius: 2px; overflow: hidden; background: var(--frame); margin-bottom: 18px; } .card-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.45s ease, transform 0.6s ease; } .card-frame img.alt { opacity: 0; } .card-frame .no-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); } .card:hover .card-frame img.main { transform: scale(1.03); } .card:hover .card-frame img.alt { opacity: 1; } /* Sold pieces stay in the grid as a portfolio entry rather than disappearing — dimmed image, a small badge, price/name kept legible so it still reads as "this existed and was beautiful", not just greyed out. */ .card.is-sold .card-frame img { filter: grayscale(35%); opacity: 0.55; } .card.is-sold:hover .card-frame img.main { transform: none; } .card-sold-badge { position: absolute; top: 14px; left: 14px; background: var(--ink); color: var(--paper); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; z-index: 1; } .card-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin-bottom: 6px; } .card-name { font-family: "Fraunces", serif; font-weight: 500; font-size: 18px; line-height: 1.3; margin: 0 0 6px; } .card-price { font-family: "Fraunces", serif; font-size: 15px; color: var(--brass-dim); } .empty-state { text-align: center; padding: 100px 0; color: var(--sage); font-size: 14px; } /* ---------- whatsapp float ---------- */ /* Same component as the nail studio site — see .whatsapp-float in public/css/nail.css — WhatsApp's own brand green stays the same regardless of which jewellery theme (light/dark) is active. */ .whatsapp-float { align-items: center; background: #25d366; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; bottom: max(1.25rem, env(safe-area-inset-bottom)); box-shadow: 0 0.75rem 2rem rgba(24, 91, 55, 0.25); color: #fff; display: inline-flex; font-family: "Inter", sans-serif; font-size: 0.76rem; font-weight: 600; gap: 0.55rem; letter-spacing: 0.08em; padding: 0.8rem 1rem; position: fixed; right: max(1.25rem, env(safe-area-inset-right)); text-decoration: none; text-transform: uppercase; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; z-index: 1050; } .whatsapp-float:hover, .whatsapp-float:focus-visible { background: #168c46; box-shadow: 0 1rem 2.25rem rgba(24, 91, 55, 0.32); color: #fff; transform: translateY(-2px); } .whatsapp-float svg { fill: none; flex: 0 0 auto; height: 1.35rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 1.35rem; } @media (max-width: 575.98px) { /* Logo mark only, no wordmark/tagline — same fix as the nail studio site: the two-line text block was tall enough on a narrow phone to push the header's other content down onto its own row. */ .navbar-brand .brand-text { display: none; } .whatsapp-float { border-radius: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); height: 3.35rem; justify-content: center; padding: 0; right: max(1rem, env(safe-area-inset-right)); width: 3.35rem; } .whatsapp-float span { display: none; } } /* ---------- footer ---------- */ /* Same shape as the nail studio footer (social row + legal line) — see .site-footer in public/css/nail.css — kept in Jewellery's own lighter palette rather than that footer's dark background, since this whole site stays ivory/paper-toned. */ .site-footer { border-top: 1px solid var(--hairline); padding: 48px 0 40px; text-align: center; } .site-footer .social-links { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; } .site-footer .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); color: var(--brass-dim); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .site-footer .social-links a:hover, .site-footer .social-links a:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--paper); } .site-footer .social-links svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .site-footer .social-links a:nth-child(2) svg path { fill: currentColor; stroke: none; } .footer-legal { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); margin: 0; } .footer-legal a { color: var(--sage); text-decoration: none; } .footer-legal a:hover { color: var(--brass); } .footer-legal .sep { margin-inline: 0.5em; opacity: 0.5; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; } } /* ==================== Product detail page (jewellery/show.blade.php) ==================== */ .pdp-breadcrumb { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); padding: 28px 0 0; } .pdp-breadcrumb a { color: var(--sage); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .pdp-breadcrumb a:hover { color: var(--ink); border-color: var(--brass); } .pdp-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; padding: 28px 0 100px; align-items: start; } @media (max-width: 900px) { .pdp-layout { grid-template-columns: 1fr; gap: 32px; padding-bottom: 72px; } } .pdp-gallery { position: sticky; top: 96px; } @media (max-width: 900px) { .pdp-gallery { position: static; } } .pdp-main-frame { aspect-ratio: 1 / 1; border-radius: 2px; overflow: hidden; background: var(--frame); } .pdp-main-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp-main-frame .no-photo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); } .pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; } .pdp-thumb { flex: 0 0 72px; width: 72px; height: 72px; padding: 0; border: 1px solid var(--hairline); border-radius: 2px; overflow: hidden; background: var(--frame); cursor: pointer; opacity: 0.65; transition: opacity 0.2s ease, border-color 0.2s ease; } .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp-thumb:hover { opacity: 0.9; } .pdp-thumb.active { opacity: 1; border-color: var(--ink); } .pdp-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-dim); margin-bottom: 14px; } .pdp-title { font-family: "Fraunces", serif; font-weight: 560; font-size: clamp(30px, 3vw, 40px); line-height: 1.12; margin: 0 0 10px; text-wrap: balance; } .pdp-serial { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--sage); margin-bottom: 28px; } .pdp-price-block { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--hairline); } .pdp-price { font-family: "Fraunces", serif; font-weight: 650; font-size: 30px; } .pdp-sold-notice { background: var(--frame); border: 1px solid var(--hairline); padding: 16px 20px; margin-bottom: 16px; } .pdp-sold-notice p { margin: 0; font-size: 13.5px; color: var(--sage); line-height: 1.6; } .pdp-price-note { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.03em; color: var(--sage); margin-top: 8px; } .pdp-cta { display: block; width: 100%; box-sizing: border-box; text-align: center; background: var(--ink); color: var(--paper); font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: none; padding: 16px 24px; border-radius: 2px; margin-bottom: 12px; cursor: pointer; transition: background 0.2s ease; } .pdp-cta:hover { background: var(--brass-dim); } .pdp-cta:disabled { opacity: .6; cursor: default; } .pdp-cta-secondary { background: none; color: var(--ink); border: 1px solid var(--hairline); margin-bottom: 28px; } .pdp-cta-secondary:hover { background: var(--frame); } .pdp-cta-error { color: #b0362f; font-size: 13px; margin: -6px 0 16px; } .pdp-description { font-size: 14.5px; line-height: 1.75; color: var(--ink); margin-bottom: 32px; } .pdp-details-title { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); margin-bottom: 4px; } .pdp-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hairline); } .pdp-row:first-of-type { border-top: 1px solid var(--hairline); } .pdp-row-label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); flex-shrink: 0; padding-top: 2px; } .pdp-row-value { font-size: 14.5px; text-align: right; line-height: 1.45; } .pdp-row-sub { display: block; color: var(--sage); font-size: 12.5px; } /* ==================== Legal pages (jewellery/terms.blade.php, jewellery/privacy.blade.php) ==================== */ .legal-page { max-width: 46rem; margin-inline: auto; padding-top: 48px; padding-bottom: 80px; } .legal-title { font-family: "Fraunces", serif; font-weight: 560; font-size: clamp(28px, 4vw, 38px); margin: 20px 0 10px; } .legal-lede { color: var(--sage); font-size: 15px; line-height: 1.6; max-width: 34rem; } .legal-meta { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); margin-top: 14px; margin-bottom: 32px; } .legal-note { background: rgba(217, 180, 103, 0.08); border: 1px solid var(--hairline); border-radius: 6px; padding: 16px 18px; font-size: 14px; color: var(--ink); margin-bottom: 32px; } .legal-page h2 { font-family: "Fraunces", serif; font-weight: 560; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.25; margin-top: 38px; margin-bottom: 12px; } .legal-page h2:first-of-type { margin-top: 0; } .legal-page h3 { font-size: 15px; font-weight: 600; margin-top: 20px; margin-bottom: 8px; } .legal-page p, .legal-page li { color: var(--sage); font-size: 14.5px; line-height: 1.75; } .legal-page p { margin-bottom: 14px; } .legal-page ul { margin-bottom: 18px; padding-left: 20px; } .legal-page li { margin-bottom: 8px; } .legal-page a { color: var(--brass-dim); text-decoration: underline; text-underline-offset: 0.15em; } /* .legal-page's own link color/underline (above) is meant for body-text links (Terms/Privacy prose) — it also wins over .pdp-cta's white-on-black button styling whenever that button sits inside a .legal-page wrapper (e.g. order-confirmation.blade.php's "Continue Shopping"), since a two-class selector beats a one-class one. This restores the button look. */ .legal-page a.pdp-cta { color: var(--paper); text-decoration: none; } .legal-page a.pdp-cta:hover { background: var(--brass-dim); } .legal-page strong { color: var(--ink); } /* ==================== Cart / checkout page (jewellery/cart.blade.php) ==================== */ .cart-page { max-width: 46rem; padding-top: 48px; padding-bottom: 96px; } .cart-title { font-family: "Fraunces", serif; font-weight: 560; font-size: clamp(28px, 4vw, 38px); margin: 20px 0 32px; } .cart-empty { color: var(--sage); font-size: 15px; padding: 40px 0; text-align: center; } .cart-item { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--hairline); } .cart-item:last-of-type { border-bottom: 1px solid var(--hairline); } .cart-item img { width: 64px; height: 64px; object-fit: cover; background: var(--frame); flex-shrink: 0; } .cart-item-name { font-size: 15px; margin-bottom: 4px; } .cart-item-price { font-family: "Fraunces", serif; color: var(--brass-dim); font-size: 14px; } .cart-item-remove { background: none; border: none; color: var(--sage); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-decoration: underline; } .cart-item-remove:hover { color: var(--ink); } .cart-totals { padding: 20px 0; border-top: 1px solid var(--hairline); } .cart-totals-row { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: var(--sage); } .cart-totals-row.grand { font-family: "Fraunces", serif; font-size: 20px; color: var(--ink); padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--hairline); } .cart-section-title { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin: 32px 0 14px; } .cart-address-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .cart-address-card { border: 1px solid var(--hairline); border-radius: 2px; padding: 14px 16px; cursor: pointer; font-size: 13.5px; line-height: 1.6; transition: border-color 0.2s ease; } .cart-address-card:hover { border-color: var(--brass); } .cart-address-card.selected { border-color: var(--ink); background: var(--frame); } .cart-address-card strong { display: block; margin-bottom: 2px; } .cart-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .cart-form-grid input, .cart-form input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); font-size: 14px; } .cart-form-grid .full { grid-column: 1 / -1; } .cart-checkout-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; background: var(--ink); color: var(--paper); font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; border: none; padding: 18px 24px; border-radius: 2px; cursor: pointer; margin-top: 24px; transition: background 0.2s ease; } .cart-checkout-btn:hover { background: var(--brass-dim); } .cart-checkout-btn:disabled { opacity: .6; cursor: default; }