/* ========================================================================== UAE FLOWER SHOP — shop.css Ecommerce layer. Loaded AFTER style.css on every interior page. Reuses design tokens (--void, --wine, --gold, --font-display, etc.) defined in style.css — no new palette, no new type system. ========================================================================== */ /* ========================================================================== HEADER NAV — active-page state (multi-page site) ========================================================================== */ .primary-nav a.is-current{ color: var(--cream); } .primary-nav a.is-current::after{ width: 100%; } .mobile-nav a.is-current{ color: var(--gold-bright); } /* Applied to #main (not ) — a lingering non-"none" transform value on after the animation completes would otherwise turn into a containing block for every position:fixed descendant (header, cart drawer, search overlay, mobile nav), breaking them sitewide. */ body.shop-page > main{ animation: page-fade-in .6s var(--ease-soft) both; } @keyframes page-fade-in{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce){ body.shop-page > main{ animation: none; } } [data-reveal]{ opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } [data-reveal].is-visible{ opacity: 1; transform: translateY(0); } [data-reveal="fade"]{ transform: none; } /* ========================================================================== PAGE HERO (interior page banner — quieter than the homepage cinematic hero) ========================================================================== */ .page-hero{ position: relative; padding: calc(var(--header-h) + 64px) 0 72px; overflow: hidden; } .page-hero--image{ padding: calc(var(--header-h) + 140px) 0 110px; } .page-hero__media{ position: absolute; inset: 0; z-index: 0; } .page-hero__media img{ width: 100%; height: 100%; object-fit: cover; /* Brightness darkening removed — image shows at natural brightness. */ filter: saturate(1.05); } .page-hero__media::after{ content: ""; position: absolute; inset: 0; /* Short fade at the very bottom edge only, purely to blend the photo into the solid section below it — not a darkening wash over the image itself. Text legibility now comes from text-shadow instead. */ background: linear-gradient(180deg, transparent 78%, var(--void) 100%); } .page-hero__content{ position: relative; z-index: 1; text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.55); } .page-hero__title{ margin-top: 18px; font-family: var(--font-display); font-weight: 440; font-size: clamp(34px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.01em; max-width: 780px; } .page-hero__title em{ font-style: italic; color: var(--blush); } .page-hero__sub{ margin-top: 18px; font-size: 16.5px; color: var(--cream-dim); max-width: 520px; line-height: 1.7; } .breadcrumb{ display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 14px; } .breadcrumb a{ color: var(--cream-faint); transition: color .25s; } .breadcrumb a:hover, .breadcrumb a:focus-visible{ color: var(--gold-bright); } .breadcrumb span[aria-hidden]{ opacity: .5; } .breadcrumb .is-current{ color: var(--cream-dim); } /* Generic section rhythm reused across interior pages */ .shop-section{ padding: clamp(64px, 8vw, 120px) 0; } .shop-section--tight{ padding: clamp(40px, 5vw, 72px) 0; } .shop-section--panel{ background: var(--panel); } /* ========================================================================== QUANTITY STEPPER ========================================================================== */ .qty-stepper{ display: inline-flex; align-items: center; border: 1px solid var(--hairline-strong); height: 46px; } .qty-stepper__btn{ width: 44px; height: 100%; font-size: 18px; color: var(--cream); transition: background .25s, color .25s; } .qty-stepper__btn:hover, .qty-stepper__btn:focus-visible{ background: rgba(201,168,118,0.1); color: var(--gold-bright); } .qty-stepper__val{ min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; font-size: 15px; } .qty-stepper--sm{ height: 34px; } .qty-stepper--sm .qty-stepper__btn{ width: 32px; font-size: 15px; } .qty-stepper--sm .qty-stepper__val{ min-width: 30px; font-size: 13px; } /* ========================================================================== PRODUCT GRID (Flowers page) ========================================================================== */ .product-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); } .product-card{ border: 1px solid var(--hairline); background: var(--panel); display: flex; flex-direction: column; } .product-card__media{ position: relative; aspect-ratio: 3/4; overflow: hidden; display: block; } .product-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .product-card:hover .product-card__media img{ transform: scale(1.06); } .product-card__cat{ font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-bright); } .product-card__body{ padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .product-card__name{ font-family: var(--font-display); font-size: 26px; font-weight: 440; } .product-card__tagline{ font-size: 14px; color: var(--cream-dim); line-height: 1.6; flex: 1; } .product-card__price{ font-size: 13px; letter-spacing: 0.08em; color: var(--cream); padding-top: 8px; border-top: 1px solid var(--hairline); } .product-card__price strong{ color: var(--gold-bright); font-family: var(--font-display); font-size: 17px; font-weight: 480; } /* Color picker (Rose only) */ .color-picker{ margin: 16px 0 4px; } .color-picker__label{ display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 10px; } .color-picker__label em{ font-style: italic; text-transform: none; letter-spacing: 0; color: var(--cream-faint); opacity: 0.8; } .color-swatches{ display: flex; flex-wrap: wrap; gap: 8px; } .color-swatch{ display: flex; align-items: center; gap: 7px; border: 1px solid var(--hairline-strong); padding: 6px 12px 6px 7px; transition: border-color .25s, background .25s; } .color-swatch__dot{ width: 15px; height: 15px; border-radius: 50%; background: var(--swatch-bg); border: 1px solid rgba(255,255,255,0.3); flex: none; } .color-swatch__name{ font-size: 11.5px; color: var(--cream-dim); } .color-swatch:hover{ background: rgba(201,168,118,0.06); } .color-swatch.is-active{ border-color: var(--gold-bright); background: rgba(201,168,118,0.12); } .color-swatch.is-active .color-swatch__name{ color: var(--cream); } .product-card__controls{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; } .product-card__add{ white-space: nowrap; } .product-card__link{ margin-top: 4px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint); } .product-card__link:hover, .product-card__link:focus-visible{ color: var(--gold-bright); } @media (max-width: 980px){ .product-grid{ grid-template-columns: 1fr; } } /* ========================================================================== PRODUCT DETAIL PAGE ========================================================================== */ .product-detail{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 80px); align-items: flex-start; } .product-detail__media{ position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--hairline); } .product-detail__media img{ width: 100%; height: 100%; object-fit: cover; } .product-detail__cat{ display: block; margin-bottom: 16px; } .product-detail__name{ font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 440; } .product-detail__desc{ margin-top: 18px; font-size: 16px; color: var(--cream-dim); line-height: 1.75; max-width: 480px; } .product-detail__price{ margin-top: 26px; font-family: var(--font-display); font-size: 22px; color: var(--gold-bright); } .product-detail__price span{ font-size: 13px; color: var(--cream-faint); font-family: var(--font-body); margin-left: 8px; } .product-detail__row{ margin-top: 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .product-detail__total{ margin-top: 18px; font-size: 14px; color: var(--cream-dim); } .product-detail__total strong{ color: var(--cream); font-family: var(--font-display); font-size: 18px; } .product-detail__related{ margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--hairline); } .product-detail__related-title{ font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 16px; } .product-detail__related-links{ display: flex; gap: 16px; flex-wrap: wrap; } @media (max-width: 860px){ .product-detail{ grid-template-columns: 1fr; } } /* ========================================================================== BOUQUET BUILDER ========================================================================== */ .builder{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 64px); align-items: start; } .builder__step{ grid-column: 1; margin-bottom: 40px; } .builder__step:first-child{ margin-top: 0; } .builder__stage{ grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h) + 24px); } .builder__summary{ grid-column: 1; } .builder__step-label{ display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 20px; } .builder__step-label em{ font-style: italic; color: var(--gold-bright); } .stem-chips{ display: flex; flex-wrap: wrap; gap: 10px; } .stem-chip{ border: 1px solid var(--hairline-strong); padding: 14px 18px; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: border-color .25s, background .25s; } .stem-chip__num{ font-family: var(--font-display); font-size: 19px; } .stem-chip__label{ font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-faint); } .stem-chip:hover{ border-color: var(--hairline-strong); background: rgba(201,168,118,0.06); } .stem-chip.is-active{ border-color: var(--gold-bright); background: rgba(201,168,118,0.12); } .stem-chip.is-active .stem-chip__label{ color: var(--gold-bright); } .flower-toggles{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .flower-toggle{ display: flex; align-items: center; gap: 10px; border: 1px solid var(--hairline-strong); padding: 12px 20px; font-size: 13px; letter-spacing: 0.06em; transition: border-color .25s, background .25s; } .flower-toggle__swatch{ width: 12px; height: 12px; border-radius: 50%; background: var(--swatch); border: 1px solid rgba(255,255,255,0.25); } .flower-toggle:hover{ background: rgba(201,168,118,0.06); } .flower-toggle.is-active{ border-color: var(--gold-bright); background: rgba(201,168,118,0.12); } .flower-allocation{ display: flex; flex-direction: column; gap: 18px; } .allocation-row__head{ display: flex; justify-content: space-between; font-size: 13px; color: var(--cream-dim); margin-bottom: 8px; } .allocation-row__head strong{ color: var(--gold-bright); font-family: var(--font-display); } .allocation-slider{ -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--hairline-strong); outline: none; cursor: pointer; } .allocation-slider::-webkit-slider-thumb{ -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold-bright); border: 2px solid var(--void); box-shadow: 0 0 0 1px var(--gold-bright); cursor: grab; } .allocation-slider::-moz-range-thumb{ width: 16px; height: 16px; border-radius: 50%; background: var(--gold-bright); border: 2px solid var(--void); box-shadow: 0 0 0 1px var(--gold-bright); cursor: grab; border: none; } .allocation-slider::-moz-range-track{ background: var(--hairline-strong); height: 2px; } .builder__preview{ position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--hairline); } .builder__preview-img{ width: 100%; height: 100%; object-fit: cover; transition: opacity .4s var(--ease-soft); } .builder__preview-scrim{ position: absolute; inset: 0; pointer-events: none; /* Dark gradient removed — the stem-count readout below carries its own text-shadow for contrast instead of dimming the bouquet preview. */ } .builder__preview-count{ position: absolute; left: 24px; bottom: 22px; display: flex; align-items: baseline; gap: 10px; text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.8); } .builder__preview-num{ font-family: var(--font-display); font-style: italic; font-size: 44px; color: var(--gold-bright); } .builder__preview-label{ font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); } .builder__bars{ display: flex; width: 100%; height: 6px; margin-top: 14px; border: 1px solid var(--hairline); overflow: hidden; } .builder__bar{ height: 100%; transition: width .3s var(--ease-soft); } .builder__summary{ margin-top: 8px; padding: 28px; border: 1px solid var(--hairline); background: var(--panel); } .builder__summary-row{ display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; font-size: 13px; color: var(--cream-dim); } .builder__summary-value{ font-family: var(--font-display); font-size: 20px; color: var(--cream); } .builder__summary-mix{ margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .builder__summary-mixrow{ display: flex; justify-content: space-between; font-size: 13px; color: var(--cream-faint); padding-bottom: 6px; border-bottom: 1px dashed var(--hairline); } .builder__summary-total{ display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline-strong); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); } .builder__summary-total span:last-child{ font-family: var(--font-display); font-size: 26px; text-transform: none; letter-spacing: 0; color: var(--gold-bright); } .builder__add{ width: 100%; justify-content: center; margin-top: 22px; } .builder--compact{ grid-template-columns: 1fr; } .builder--compact .builder__stage{ grid-column: 1; grid-row: auto; position: static; margin: 24px 0; } .builder--compact .builder__summary{ grid-column: 1; } .builder--compact .builder__preview{ aspect-ratio: 16/8; } @media (max-width: 980px){ .builder{ grid-template-columns: 1fr; } .builder__step, .builder__stage, .builder__summary{ grid-column: 1; grid-row: auto; } .builder__stage{ position: static; margin: 30px 0; } } /* ========================================================================== GIFTS PAGE ========================================================================== */ .gift-grid{ display: flex; flex-direction: column; gap: 18px; } .gift-card{ border: 1px solid var(--hairline); background: var(--panel); } .gift-card__head{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; text-align: left; } .gift-card__title{ font-family: var(--font-display); font-size: 22px; font-weight: 440; } .gift-card__desc{ font-size: 13.5px; color: var(--cream-dim); margin-top: 6px; max-width: 46ch; } .gift-card__price{ font-size: 13px; color: var(--cream-faint); white-space: nowrap; } .gift-card__price strong{ display: block; font-family: var(--font-display); font-size: 20px; color: var(--gold-bright); margin-top: 2px; } .gift-card__chevron{ transition: transform .3s var(--ease-soft); flex: none; } .gift-card.is-open .gift-card__chevron{ transform: rotate(180deg); } .gift-card__body{ max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-soft); border-top: 1px solid transparent; } .gift-card.is-open .gift-card__body{ border-top: 1px solid var(--hairline); } .gift-card__body-inner{ padding: 30px 28px 34px; } .addon-row{ display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px dashed var(--hairline); cursor: pointer; } .addon-row:last-of-type{ border-bottom: none; } .addon-row__left{ display: flex; align-items: center; gap: 14px; } .addon-check{ width: 20px; height: 20px; border: 1px solid var(--hairline-strong); display: flex; align-items: center; justify-content: center; flex: none; transition: border-color .25s, background .25s; } .addon-check svg{ width: 12px; height: 12px; opacity: 0; transition: opacity .2s; color: var(--void); } .addon-row.is-checked .addon-check{ background: var(--gold-bright); border-color: var(--gold-bright); } .addon-row.is-checked .addon-check svg{ opacity: 1; } .addon-row__name{ font-size: 14.5px; } .addon-row__price{ font-size: 13px; color: var(--cream-faint); } .gift-card__foot{ margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hairline-strong); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .gift-card__total{ font-size: 13px; color: var(--cream-dim); } .gift-card__total strong{ display: block; font-family: var(--font-display); font-size: 24px; color: var(--gold-bright); } /* Custom Gift Box */ .custom-box__price{ font-family: var(--font-display); font-size: 20px; color: var(--gold-bright); margin: 6px 0 24px; } /* ========================================================================== OCCASIONS ========================================================================== */ .occasion-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); } .occasion-card{ position: relative; aspect-ratio: 3/3.6; overflow: hidden; border: 1px solid var(--hairline); display: block; } .occasion-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .occasion-card:hover img{ transform: scale(1.08); } .occasion-card__scrim{ position: absolute; inset: 0; pointer-events: none; /* Dark gradient removed — the name/CTA text below carries its own text-shadow for contrast instead of dimming the occasion photo. */ } .occasion-card__label{ position: absolute; left: 22px; right: 22px; bottom: 22px; text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.8); } .occasion-card__name{ font-family: var(--font-display); font-size: clamp(22px,2.4vw,30px); font-weight: 440; } .occasion-card__cta{ margin-top: 8px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); } @media (max-width: 980px){ .occasion-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px){ .occasion-grid{ grid-template-columns: 1fr; } } /* Occasion detail page */ .occasion-detail__hero{ position: relative; } .occasion-detail__suggest{ margin-top: 32px; padding: 26px 28px; border: 1px solid var(--hairline); background: var(--panel); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* ========================================================================== ACCORDION (FAQ) ========================================================================== */ .accordion{ border-top: 1px solid var(--hairline); } .accordion__item{ border-bottom: 1px solid var(--hairline); } .accordion__trigger{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; text-align: left; font-family: var(--font-display); font-size: 18px; } .accordion__trigger:hover{ color: var(--gold-bright); } .accordion__icon{ flex: none; transition: transform .3s var(--ease-soft); color: var(--cream-faint); } .accordion__item.is-open .accordion__icon{ transform: rotate(45deg); color: var(--gold-bright); } .accordion__panel{ max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-soft); } .accordion__panel-inner{ padding: 0 4px 26px; color: var(--cream-dim); font-size: 15px; line-height: 1.75; max-width: 68ch; } /* ========================================================================== FORMS (Contact / Checkout) ========================================================================== */ .form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form__field{ margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .form__label{ font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint); } .form__input, .form__textarea, .form__select{ width: 100%; background: rgba(255,255,255,0.02); border: 1px solid var(--hairline-strong); color: var(--cream); font-family: var(--font-body); font-size: 15px; padding: 14px 16px; } .form__select{ appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } /* Native