/* ============================================ PAMUSHA — base.css Inspired by Baya Living's design language ============================================ */ /* --- Custom Properties --- */ :root { /* Colors — Baya-inspired warm neutrals */ --chestnut: #382F2F; --ivory: #E3E2DD; --white: #FFFFFF; --seasonal-one: #BFB8AF; --seasonal-two: #AF9A84; --seasonal-three: #B9AF9E; --seasonal-four: #88857D; --green: #6C9D76; --red: #EE4545; --border: #E0E0E0; /* Typography — light grotesque + light serif + clean body */ --font-header: 'Cormorant Garamond', Georgia, serif; --font-header-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale (modular, ratio 1.30) */ --text-base: 0.875rem; --text-xs: 0.66rem; --text-sm: 0.76rem; --text-md: 0.875rem; --text-lg: 1.138rem; --text-xl: 1.479rem; --text-xxl: 1.923rem; --text-xxxl: 2.5rem; --text-display: clamp(2.8rem, 5.5vw, 4.5rem); /* Letter spacing */ --letters-tight: 0.01rem; --letters-normal: 0.04rem; --letters-wide: 0.12rem; --letters-xwide: 0.25rem; --letters-xxwide: 0.4rem; /* Line heights */ --line-tight: 1.1; --line-snug: 1.3; --line-normal: 1.6; --line-relaxed: 1.8; /* Spacing */ --space-xxs: 0.25rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-xxl: 5rem; --space-xxxl: 6.25rem; --space-xxxxl: 7.5rem; /* Edge & gutter */ --edge: 1rem; --gutter: 1rem; --section-margin: 3rem; /* Layout */ --width-site: 160rem; --width-product: 86rem; --width-page: 60rem; --width-narrow: 42rem; /* Transitions */ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-fast: 0.2s ease; --transition-medium: 0.4s var(--ease-out); --transition-slow: 0.7s var(--ease-out); --transition-fade: 0.6s var(--ease-out); /* Shadows */ --shadow-soft: 0 0.25rem 0.85rem -0.65rem rgba(56, 47, 47, 0.15); } @media (min-width: 640px) { :root { --edge: 3rem; --gutter: 2rem; --section-margin: 4rem; } } @media (min-width: 1152px) { :root { --section-margin: 6rem; } } /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; height: 100%; /* Match the body so overscroll / rubber-band scrolling on macOS, iOS, and Android can never expose the browser's default white background. */ background-color: var(--ivory); /* Always reserve the scrollbar's space so the page never shifts sideways when the loading overlay (overflow: hidden) hands off to the scrollable page (overflow visible). Removes the "jump" on opening the site. */ scrollbar-gutter: stable; } html.loading { overflow: hidden; } html.loading main, html.loading .site-footer { visibility: hidden; } html.ready .loading-overlay { opacity: 0; pointer-events: none; /* Snap to fully hidden once the fade finishes so no part of the overlay (or its "Pamusha" text) can ever flicker through other elements while the visitor scrolls. */ visibility: hidden; transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 1.4s; } /* Arriving from the homepage splash: suppress this page's loading overlay entirely so visitors never see a second "Pamusha" intro. The sets .from-splash (and marks the page ready) before first paint, so the overlay never even flashes and the content shows immediately. */ html.from-splash .loading-overlay { display: none; } body { font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; line-height: var(--line-normal); color: var(--chestnut); background-color: var(--ivory); letter-spacing: var(--letters-normal); min-height: 100%; } .app { min-height: 100vh; display: flex; flex-direction: column; } .app main { flex: 1; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; } /* --- Loading Overlay --- */ .loading-overlay { position: fixed; inset: 0; z-index: 9999; background-color: var(--ivory); display: flex; align-items: center; justify-content: center; } /* Site-wide: never auto-hyphenate (no words broken with a trailing "-" at line ends). Justified body copy keeps its straight edges — only the hyphenation is disabled. `hyphens` inherits, so setting it on the root covers every element. */ html { hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; } /* Text alignment helpers used by editable page sections. !important so the admin's selection always beats hard-coded rules on container classes (e.g. .about-copy in services.css which centers by default). */ .text-align-left { text-align: left !important; } .text-align-justify { text-align: justify !important; } .text-align-center { text-align: center !important; } .text-align-right { text-align: right !important; } /* Founder / About bio body copy: justify by default (matches the fully-justified body text on the Story, Interiors, and Thread pages) even when the CMS section has no explicit alignment set (default class is .text-align-left). */ .about-text .text-align-left p { text-align: justify; } /* "SOLD" text shown next to a crossed-out price. Inherits the price's font/size/colour so it reads as part of the same line. */ .product-sold-pill { margin-left: 8px; /* No background, no padding, no font override — inherit from .product-price. */ } .loading-logo { font-family: var(--font-header); font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chestnut); line-height: 1; will-change: transform; opacity: 0; animation: loadingBreathe 8s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate, loadingAppear 0.8s ease-out 0.3s forwards; } @keyframes loadingBreathe { 0% { transform: scale(1); letter-spacing: 0.14em; } 100% { transform: scale(1.4); letter-spacing: 0.22em; } } @keyframes loadingAppear { to { opacity: 1; } } /* --- Typography --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-header); font-weight: 300; line-height: var(--line-tight); letter-spacing: var(--letters-tight); color: var(--chestnut); } h1, .page-heading { font-size: var(--text-display); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; } h2, .section-heading { font-size: clamp(1.6rem, 3vw, var(--text-xxxl)); font-weight: 300; } h3 { font-size: var(--text-xl); font-weight: 300; } h4 { font-size: var(--text-lg); font-weight: 300; } /* Label / overline style */ .overline { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--letters-wide); text-transform: uppercase; color: var(--seasonal-four); } p { margin-bottom: var(--space-sm); max-width: 60ch; } /* --- Layout --- */ .section-padding { padding: var(--section-margin) var(--edge); } .container { max-width: var(--width-site); margin: 0 auto; } .container-page { max-width: var(--width-page); margin: 0 auto; } .container-narrow { max-width: var(--width-narrow); margin: 0 auto; } /* --- Animations --- */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity var(--transition-fade), transform var(--transition-fade); } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Stagger children */ .fade-in-stagger > .fade-in:nth-child(1) { transition-delay: 0s; } .fade-in-stagger > .fade-in:nth-child(2) { transition-delay: 0.08s; } .fade-in-stagger > .fade-in:nth-child(3) { transition-delay: 0.16s; } .fade-in-stagger > .fade-in:nth-child(4) { transition-delay: 0.24s; } .fade-in-stagger > .fade-in:nth-child(5) { transition-delay: 0.32s; } .fade-in-stagger > .fade-in:nth-child(6) { transition-delay: 0.4s; } /* --- Selection --- */ ::selection { background-color: var(--seasonal-two); color: var(--white); } /* --- Success/Confirmation Pages --- */ .success-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding-top: 120px; } .success-container { text-align: center; max-width: var(--width-narrow); } .success-container .page-heading { margin-bottom: var(--space-md); } .success-container p { margin: 0 auto var(--space-xl); max-width: 40ch; color: var(--seasonal-four); } /* --- Marquee --- */ .marquee { overflow: hidden; white-space: nowrap; padding: var(--space-lg) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .marquee-inner { display: inline-flex; animation: marquee-scroll 30s linear infinite; } .marquee-text { font-family: var(--font-header); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: var(--letters-tight); color: var(--chestnut); padding: 0 var(--space-xl); white-space: nowrap; } .marquee-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--seasonal-two); margin: 0 var(--space-lg); align-self: center; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }