— it collapses through and leaves a strip of the green body background behind the (light) navbar, which some browsers reveal as the bar shrinks. JS sets --nav-offset to the real navbar height. */ .nav-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-link { font-size: var(--body); font-weight: 400; color: var(--coral); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; font-family: inherit; transition: color 0.2s var(--ease); } .nav-link:hover { color: var(--cream); } .nav-link.is-active { color: var(--cream); } .chevron { transition: transform 0.25s var(--ease); } .nav-item { position: relative; } .has-dropdown:hover .chevron, .has-dropdown:focus-within .chevron { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 6px); left: 0; padding: 24px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 166px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.2s var(--ease); z-index: 20; } .dropdown a { color: var(--coral); font-size: var(--body); font-weight: 500; white-space: nowrap; } .dropdown a:hover { color: var(--cream); } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; } .nav-toggle span { width: 26px; height: 2px; background: var(--coral); transition: 0.25s var(--ease); } /* ============ HERO ============ */ .hero { background: var(--green); /* top padding clears the fixed navbar (no shared

margin — see navbar) */ padding: var(--nav-offset, 220px) var(--pad) 80px; } .eyebrow { font-size: var(--h5); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--coral); margin: 0 0 96px; /* JS fades this out on scroll (inline opacity) so it doesn't hard-clip. */ } .hero-body { display: flex; align-items: flex-end; gap: clamp(40px, 11vw, 168px); } .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; max-width: 760px; } .hero-headline { font-size: var(--h3); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--coral-soft); margin: 0; } .btn-hero { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 10px; border: 1px solid var(--coral); color: var(--coral); font-family: inherit; font-weight: 500; font-size: 18px; line-height: 1.5; text-decoration: none; cursor: pointer; transition: all 0.2s var(--ease); } .btn-hero:hover { background: var(--coral); color: var(--green); } .btn-hero svg { width: 24px; height: 24px; flex: none; } .hero-media { flex: none; width: clamp(280px, 32vw, 445px); } .hero-media img { width: 100%; height: auto; aspect-ratio: 445 / 488; object-fit: cover; } /* ============ ABOUT ============ */ .about { position: relative; overflow: hidden; background: var(--sage); color: var(--rust); padding: 112px var(--pad); } /* Faint leaves. The artwork is sliced into vertical strips (built by main.js), each pivoting from its own base on its own clock — so the plants drift independently like a soft breeze rather than swaying as one rigid sheet. */ .about-leaves { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .leaf { position: absolute; top: -3%; bottom: 0; background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; transform-origin: bottom center; will-change: transform; animation-name: leaf-sway; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes leaf-sway { 0%, 100% { transform: rotate(calc(-1 * var(--amp, 1.4deg))) scale(1); } 50% { transform: rotate(var(--amp, 1.4deg)) scale(1.02); } } @media (prefers-reduced-motion: reduce) { .leaf { animation: none; } } .about-inner { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 80px; } .about-media { flex: 1 1 50%; } .about-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 644 / 687; } .about-content { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .about-content .h3 { color: var(--rust); } .lead { font-size: var(--h6); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--rust); margin: 0; } /* ============ SERVICES ============ */ .services { background: var(--sage); color: var(--green); padding: 112px var(--pad); } .tagline { font-size: var(--h6); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--green); margin: 0 0 64px; } .services-grid { position: relative; } .services-list { display: flex; flex-direction: column; } .service { display: flex; align-items: center; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--green); position: relative; z-index: 2; transition: padding-left 0.3s var(--ease); } .service:first-child { border-top: 0; } .num { font-size: var(--h5); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--rust); flex: none; } .num--green { color: var(--green); } .service-name { font-size: var(--h1); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--rust); transition: color 0.25s var(--ease); } .name--green { color: var(--green); } .service:hover { padding-left: 16px; } .service:hover .service-name { color: var(--green); } .services-media { position: absolute; top: 50%; right: 0; width: clamp(300px, 40vw, 560px); transform: translateY(-50%); z-index: 1; pointer-events: none; box-shadow: 0 30px 60px rgba(27, 54, 32, 0.25); /* Hidden until a service is hovered; JS toggles .is-visible and swaps the img */ opacity: 0; transition: opacity 0.35s var(--ease); } .services-media.is-visible { opacity: 1; } .services-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity 0.3s var(--ease); } /* ============ CONTACT ============ */ .contact { position: relative; overflow: hidden; background: var(--sage); color: var(--rust); padding: 112px var(--pad); } /* Faint leafy backdrop rising from the bottom. The source art is on white, so multiply blend drops the white and leaves only the leaves over the sage. */ .contact::before { content: ""; position: absolute; inset: 0; background: url(assets/contact-leaves.jpg) bottom center / 100% auto no-repeat; mix-blend-mode: multiply; pointer-events: none; z-index: 0; } .contact-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 48px; } .section-title { text-align: center; max-width: 768px; } .contact .h2 { color: var(--rust); } .contact-sub { font-size: var(--body-md); font-weight: 400; line-height: 1.5; color: var(--rust); margin: 16px 0 0; } .form { width: 100%; max-width: 768px; display: flex; flex-direction: column; gap: 24px; } .form-row { display: flex; gap: 24px; } .field { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; } .field label { font-size: var(--body); font-weight: 600; line-height: 1.5; color: var(--rust); } .field input, .field textarea { font-family: inherit; font-size: var(--body); color: var(--rust); background: transparent; border: 0; border-bottom: 1px solid var(--rust); padding: 8px 0; width: 100%; } .field textarea { border: 1px solid var(--rust); padding: 12px; resize: vertical; min-height: 140px; } .field input::placeholder, .field textarea::placeholder { color: rgba(172, 108, 88, 0.55); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--green); } .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .form-status { margin: 0; font-size: var(--body-sm); color: var(--green); } .btn { font-family: inherit; font-size: var(--body); font-weight: 500; color: var(--rust); background: transparent; border: 1px solid var(--rust); padding: 8px 18px; cursor: pointer; transition: all 0.2s var(--ease); } .btn:hover { background: var(--rust); color: var(--sage); } /* ============ FOOTER ============ */ .footer { background: var(--green); color: var(--coral); padding: 80px var(--pad); } .footer-inner { max-width: 1280px; display: flex; flex-direction: column; gap: 32px; } .footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .logo--footer { font-size: clamp(56px, 9vw, 110px); } .footer-right { display: flex; align-items: center; gap: clamp(32px, 8vw, 102px); flex-wrap: wrap; } .footer-links { display: flex; gap: 32px; } .footer-links a { font-size: var(--body-sm); font-weight: 600; color: var(--coral); transition: opacity 0.2s var(--ease); } .footer-links a:hover { opacity: 0.7; } .social { display: flex; align-items: center; gap: 14px; } .social a { color: var(--coral); display: inline-flex; transition: opacity 0.2s var(--ease); } .social a:hover { opacity: 0.7; } .footer-bottom { display: flex; flex-direction: column; gap: 24px; } .divider { height: 1px; background: rgba(255, 255, 255, 0.2); } .credits { display: flex; gap: 24px; flex-wrap: wrap; font-size: var(--body-sm); color: var(--coral); } .credits a { text-decoration: underline; } .credits a:hover { opacity: 0.7; } /* ============ RESPONSIVE ============ */ @media (max-width: 1024px) { .hero-body { flex-direction: column; align-items: flex-start; gap: 40px; } .hero-media { width: 100%; max-width: 445px; } .about-inner { flex-direction: column; gap: 40px; } .services-media { position: static; transform: none; width: 100%; margin-top: 40px; box-shadow: none; } .service-name { font-size: clamp(40px, 9vw, 64px); } } @media (max-width: 720px) { :root { --pad: 20px; } .hero { padding: calc(var(--nav-offset, 110px) + 64px) var(--pad) 64px; } .about, .services, .contact { padding: 64px var(--pad); } .nav-links { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); background: var(--green); flex-direction: column; align-items: flex-start; padding: 96px 28px; gap: 22px; /* Fade in place (no off-screen slide) so it never causes horizontal overflow — that lets us drop the body clip that was hiding the fixed bar. */ opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease); z-index: 40; } .nav-links.open { opacity: 1; visibility: visible; } .dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; padding: 8px 0 0 12px; } .nav-toggle { display: flex; z-index: 50; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Hero — hierarchy swap: the eyebrow becomes the big headline, the long studio line becomes small body copy, image goes square */ .eyebrow { font-size: 48px; line-height: 1.1; margin: 0 0 20px; } .hero-body { flex-direction: column; align-items: flex-start; gap: 48px; } .hero-headline { font-size: 14px; font-weight: 400; line-height: 1.5; } .hero-media { width: 100%; max-width: none; } .hero-media img { aspect-ratio: 1 / 1; } /* About — text first, image below */ .about-inner { flex-direction: column; gap: 48px; } .about-content { gap: 20px; } .about-media { order: 2; } .about-media img { aspect-ratio: 335 / 348; } .lead { font-size: 18px; } /* Services — no preview image on mobile; smaller numbers, set name size */ .tagline { font-size: 18px; margin-bottom: 0; } .services-media { display: none; } .service { padding: 20px 0; } .service:hover { padding-left: 0; } .num { font-size: 20px; } .service-name { font-size: 48px; line-height: 1.1; } /* Contact — first/last stay 2-up, email/phone go full width */ .contact .h2 { font-size: 44px; } .contact-sub { font-size: 14px; } .form-row--stack { flex-direction: column; gap: 24px; } .form-actions { justify-content: center; } /* Footer — everything stacks, left aligned */ .footer { padding: 48px var(--pad); } .footer-top { flex-direction: column; align-items: flex-start; gap: 48px; } .footer-right { flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; } .footer-links { flex-direction: column; gap: 16px; } .credits { flex-direction: column; gap: 16px; } .credits span { order: 2; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } /* ============================================================ SHOP PAGES (furniture / fabrics) — shared template ============================================================ */ /* Navbar on the light shop pages: sage bar, rust logo + links */ .navbar--light { background: var(--sage); } .navbar--light .logo { color: var(--rust); } .navbar--light .nav-link, .navbar--light .nav-link.is-active { color: var(--rust); } .navbar--light .nav-link:hover { color: var(--green); } .navbar--light .chevron { color: var(--rust); } .navbar--light .dropdown a { color: var(--rust); } .navbar--light .dropdown a:hover { color: var(--green); } .navbar--light .nav-toggle span { background: var(--rust); } .shop { background: var(--sage); color: var(--rust); /* top padding clears the big fixed navbar; JS keeps it exact via --nav-offset */ padding: calc(var(--nav-offset, 220px) + 96px) var(--pad) 112px; } .shop-inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: 80px; } .shop-title { display: flex; flex-direction: column; gap: 40px; } .shop-title .h3 { color: var(--rust); } .shop-sub { font-size: var(--h6); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--rust); margin: 16px 0 0; max-width: 768px; } /* Filter tabs */ .filters { display: flex; flex-wrap: wrap; gap: 32px; } .filter { font-family: inherit; font-size: var(--body); font-weight: 500; color: var(--rust); background: none; border: 0; padding: 6px 0; cursor: pointer; transition: opacity 0.2s var(--ease); } .filter:hover { opacity: 0.65; } .filter.is-active { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } /* Product grid */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 48px; } .product { display: flex; flex-direction: column; gap: 16px; color: var(--rust); } .product__media { position: relative; aspect-ratio: 424 / 523; overflow: hidden; background: var(--sage); } .product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .product:hover .product__media img { transform: scale(1.03); } .product__tag { position: absolute; top: 18px; left: 18px; background: var(--rust); color: var(--sage); font-size: var(--body-sm); font-weight: 600; padding: 4px 10px; } .product__info { display: flex; flex-direction: column; gap: 8px; } .product__header { display: flex; flex-direction: column; } .product__name { font-size: var(--body-md); font-weight: 600; line-height: 1.5; } .product__variant { font-size: var(--body-sm); font-weight: 400; line-height: 1.5; } .product__price { font-size: 26px; font-weight: 600; line-height: 1.5; } .product[hidden] { display: none; } @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; } } @media (max-width: 720px) { .shop { padding: calc(var(--nav-offset, 110px) + 56px) var(--pad) 72px; } .product-grid { grid-template-columns: 1fr; gap: 40px; } .shop-title { gap: 28px; } .filters { gap: 24px; } } /* ============================================================ PRODUCT DETAIL PAGE (product.html) ============================================================ */ .pdp { background: var(--sage); color: var(--rust); padding: calc(var(--nav-offset, 220px) + 80px) var(--pad) 80px; } .pdp-inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: 48px; } /* Breadcrumbs */ .breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: var(--body-sm); } .breadcrumbs a { color: var(--rust); } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs .sep { color: var(--rust); opacity: 0.6; } .breadcrumbs .current { font-weight: 600; } /* Gallery: big image + 2x2 thumbnails */ .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .gallery__main { aspect-ratio: 1 / 1; overflow: hidden; background: #d9d7d1; } .gallery__thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px; } .gallery__thumb { position: relative; overflow: hidden; background: #d9d7d1; } .gallery__main img, .gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery__more { position: absolute; right: 16px; bottom: 16px; background: var(--sage); color: var(--rust); font-size: var(--body); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 6px 12px; border-radius: 6px; } /* Body: description (left) + buy panel (right) */ .pdp-body { display: flex; gap: 80px; align-items: flex-start; } .pdp-desc { flex: 1 1 0; display: flex; flex-direction: column; gap: 32px; } .pdp-desc .h3 { color: var(--rust); } .pdp-desc p { font-size: var(--body); line-height: 1.5; margin: 0; } .pdp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pdp-list li { font-size: var(--body); line-height: 1.5; padding-left: 18px; position: relative; } .pdp-list li::before { content: "•"; position: absolute; left: 0; } /* Tabs */ .tabs-menu { display: flex; gap: 24px; padding-top: 8px; } .tab { font-family: inherit; font-size: var(--body); font-weight: 400; color: var(--rust); background: none; border: 0; padding: 0 0 8px; cursor: pointer; border-bottom: 1px solid transparent; } .tab.is-active { border-bottom-color: var(--rust); } .tab-pane { font-size: var(--body); line-height: 1.5; } .tab-pane[hidden] { display: none; } /* Buy panel */ .pdp-buy { flex: none; width: 400px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; } .price { font-size: 40px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin: 0; } .rating { display: flex; align-items: center; gap: 8px; font-size: var(--body-sm); } .stars { --rating: 5; font-size: 16px; letter-spacing: 2px; line-height: 1; background: linear-gradient(90deg, var(--rust) calc(var(--rating) / 5 * 100%), rgba(172,108,88,0.3) calc(var(--rating) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; } .field-label { font-size: var(--body); font-weight: 400; margin: 0 0 8px; } .variants { display: flex; flex-wrap: wrap; gap: 16px; } .variant-opt { font-family: inherit; font-size: var(--body); color: var(--rust); background: none; border: 1px solid var(--rust); padding: 6px 14px; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .variant-opt:hover { background: rgba(172,108,88,0.08); } .variant-opt.is-selected { background: var(--rust); color: var(--sage); } .variant-opt:disabled { opacity: 0.25; cursor: not-allowed; } .qty-input { font-family: inherit; font-size: var(--body); color: var(--rust); width: 72px; background: transparent; border: 0; border-bottom: 1px solid var(--rust); padding: 8px 0; } .pdp-actions { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; } .btn-cart { font-family: inherit; font-size: var(--body); font-weight: 500; color: var(--rust); background: none; border: 1px solid var(--rust); padding: 8px 12px; width: 100%; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .btn-cart:hover { background: var(--rust); color: var(--sage); } .btn-buy { font-family: inherit; font-size: var(--body); font-weight: 500; color: var(--rust); background: none; border: 0; padding: 8px 12px; width: 100%; cursor: pointer; border-radius: 6px; } .btn-buy:hover { text-decoration: underline; } .ship-note { font-size: 12px; text-align: center; margin: 0; } @media (max-width: 1024px) { .pdp-body { flex-direction: column; gap: 48px; } .pdp-buy { width: 100%; } } @media (max-width: 720px) { .pdp { padding: calc(var(--nav-offset, 110px) + 48px) var(--pad) 64px; } .gallery { grid-template-columns: 1fr; } .gallery__thumbs { grid-template-columns: 1fr 1fr; } } /* ============================================================ SERVICE DETAIL PAGE (service.html) ============================================================ */ .h1 { font-size: var(--h1); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin: 0; } .svc-section { background: var(--sage); color: var(--rust); padding: 112px var(--pad); } .svc-inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: 80px; } .svc-text { font-size: var(--h6); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; margin: 0; } /* Header: title + intro, then two offset images, over a faint leaf wash */ .svc-header { position: relative; overflow: hidden; padding-top: calc(var(--nav-offset, 220px) + 100px); } .svc-header::before { content: ""; position: absolute; inset: 0; background: url(assets/contact-leaves.jpg) top center / cover no-repeat; mix-blend-mode: multiply; opacity: 0.85; pointer-events: none; z-index: 0; } .svc-header .svc-inner { position: relative; z-index: 1; } /* Tall row so the H1 sits at the top-left and the intro drops to the bottom-right (the spec staggers them via a 192px top padding on col 2). */ .svc-hero { display: flex; gap: 80px; min-height: clamp(260px, 24vw, 336px); } .svc-hero__title { flex: 1 1 0; } .svc-hero__title .h1 { color: var(--rust); } .svc-hero__intro { flex: 1 1 0; align-self: flex-end; } .svc-hero-media { display: flex; gap: 64px; align-items: flex-start; } .svc-hero-media__big { flex: 1 1 0; margin-top: 80px; aspect-ratio: 1004 / 693; } .svc-hero-media__small { flex: none; width: clamp(180px, 22vw, 300px); aspect-ratio: 300 / 450; } .svc-hero-media__big, .svc-hero-media__small { overflow: hidden; background: #d9d7d1; } .svc-hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Intro block + wide media */ .svc-intro { display: flex; gap: 80px; align-items: flex-start; } .svc-intro__heading { flex: 1 1 0; } .svc-intro__heading .h2 { color: var(--rust); } .svc-intro__text { flex: 1 1 0; } .svc-media-wide { aspect-ratio: 1368 / 789; overflow: hidden; background: #d9d7d1; } .svc-media-wide img { width: 100%; height: 100%; object-fit: cover; } /* Alternating feature rows */ .svc-feature { display: flex; gap: 80px; align-items: center; } .svc-feature--reverse { flex-direction: row-reverse; } .svc-feature__text { flex: 1 1 0; display: flex; flex-direction: column; gap: 24px; } .svc-feature__text .h2 { color: var(--rust); } .svc-feature__media { flex: 1 1 0; aspect-ratio: 644 / 687; overflow: hidden; background: #d9d7d1; } .svc-feature__media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1024px) { .svc-hero { flex-direction: column; gap: 32px; min-height: 0; } .svc-hero-media__big { margin-top: 0; } .svc-intro { flex-direction: column; gap: 24px; } .svc-feature, .svc-feature--reverse { flex-direction: column; gap: 32px; } } @media (max-width: 720px) { .svc-section { padding: 64px var(--pad); } .svc-header { padding-top: calc(var(--nav-offset, 110px) + 48px); } .svc-hero-media { flex-direction: column; gap: 24px; } .svc-hero-media__small { width: 65%; } } /* Leading price-tag icon marking the shop nav items (furniture / fabrics). Inherits the nav link colour via currentColor (coral on dark, rust on light). */ .nav-icon { flex: none; width: 16px; height: 16px; } /* ============================================================ Legal pages (Privacy Policy, etc.) — readable single column on the light sage page, matching the sub-page chrome. ============================================================ */ .legal { background: var(--sage); color: var(--rust); padding: calc(var(--nav-offset, 220px) + 24px) var(--pad) 96px; } .legal-inner { max-width: 760px; margin-inline: auto; } .legal-head { margin-bottom: 48px; } .legal-head .h2 { color: var(--rust); margin: 0; } .legal-meta { margin: 14px 0 0; font-size: var(--body-sm); opacity: 0.75; } .legal h2 { margin: 44px 0 14px; font-size: var(--h6); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .legal p { margin: 0 0 16px; font-size: var(--body); line-height: 1.65; } .legal ul { margin: 0 0 16px; padding-left: 22px; } .legal li { margin: 0 0 10px; font-size: var(--body); line-height: 1.6; } .legal ul ul { margin: 10px 0 4px; } .legal strong { font-weight: 700; } .legal a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .legal a:hover { opacity: 0.7; } @media (max-width: 720px) { .legal { padding: calc(var(--nav-offset, 110px) + 32px) var(--pad) 64px; } .legal h2 { margin-top: 36px; } } /* Cookie-table inside legal pages */ .legal-table-wrap { overflow-x: auto; margin: 8px 0 20px; } .legal table { width: 100%; border-collapse: collapse; font-size: var(--body-sm); min-width: 520px; } .legal th, .legal td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(172, 108, 88, 0.25); vertical-align: top; } .legal thead th { font-weight: 700; border-bottom: 1.5px solid var(--rust); } .legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: rgba(172, 108, 88, 0.1); padding: 1px 5px; border-radius: 4px; white-space: nowrap; } /* ============================================================ Cookie consent (consent.js). A small, unobtrusive card tucked into the bottom-left corner (Stripe / Linear style) rather than a full-width bar. Accept / Reject are the same size for equal prominence (PECR), with the quieter palette doing the softening. ============================================================ */ .cc-banner { position: fixed; left: 24px; bottom: 24px; z-index: 1000; width: calc(100% - 48px); max-width: 360px; background: #fbfaf7; color: var(--rust); border: 1px solid rgba(27, 54, 32, 0.12); border-radius: 12px; box-shadow: 0 8px 28px rgba(27, 54, 32, 0.14); padding: 20px; animation: cc-in 0.35s var(--ease) both; } @keyframes cc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .cc-inner { display: flex; flex-direction: column; gap: 14px; } .cc-title { margin: 0; font-size: var(--body-sm); font-weight: 700; color: var(--green); } .cc-desc { margin: 0; font-size: 13.5px; line-height: 1.5; } .cc-desc a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; } .cc-desc a:hover { opacity: 0.7; } .cc-actions { display: flex; gap: 10px; } .cc-btn { flex: 1 1 0; padding: 9px 14px; font-family: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--green); border-radius: 8px; cursor: pointer; } .cc-btn[data-consent="accepted"] { color: #fbfaf7; background: var(--green); } .cc-btn[data-consent="rejected"] { color: var(--green); background: transparent; } .cc-btn:hover { background: var(--rust); border-color: var(--rust); color: #fbfaf7; } .cc-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .cc-banner:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { .cc-banner { animation: none; } } /* Footer "Cookie settings" re-opener — a button that matches the credit links */ .credits button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; } .credits button:hover { opacity: 0.7; } @media (max-width: 480px) { .cc-banner { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; } }