/* ============================================================================ ORABELLA — components.css ---------------------------------------------------------------------------- Reusable pieces. Every block here is page-agnostic: drop the markup on any page and it works. Load order: base.css -> layout.css -> components.css (this file last) 1. Icons 2. Buttons 3. Breadcrumb 4. Hero slider 5. Category card 6. Product card 7. Product actions (Instagram / LINE) 8. Gallery grid 9. Lightbox 10. Back to top ========================================================================== */ /* ============================================================================ 0. REVEAL ON LOAD ---------------------------------------------------------------------------- Artwork eases open as each image finishes loading, so a grid of products arrives gradually instead of snapping into place. The hidden state is only applied when JavaScript is running (the `js` class on ), so the page still shows every image if the script never gets there. ========================================================================== */ .js [data-reveal] { opacity: 0; transform: scale(0.9); transition: opacity var(--transition-reveal), transform var(--transition-reveal); will-change: opacity, transform; } /* Text blocks rise into place instead of scaling */ .js [data-reveal="up"] { transform: translateY(3rem); } .js [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } } /* ============================================================================ 1. ICONS ========================================================================== */ .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } .icon--solid { fill: currentColor; stroke: none; } .icon--chevron { width: 1.2em; height: 1.2em; } /* ============================================================================ 2. BUTTONS ========================================================================== */ .btn { display: inline-block; font-size: var(--font-size-button); line-height: var(--line-height-tight); padding: 1.4rem 3rem; border-radius: var(--radius-pill); transition: background-color var(--transition-base), color var(--transition-base); } .btn--primary { color: var(--color-on-dark); background-color: var(--color-brand); } .btn--primary:hover, .btn--primary:focus-visible { color: var(--color-on-dark); background-color: var(--color-heading); } /* Small dark pill — article "Read more" and the back link */ .btn--dark { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 1rem 2.2rem; font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-on-dark); background-color: var(--color-surface-footer-bar); border-radius: var(--radius-pill); } .btn--dark .icon { font-size: 1.6rem; transition: transform var(--transition-fast); } .btn--dark:hover, .btn--dark:focus-visible { color: var(--color-on-dark); background-color: var(--color-brand); } .btn--dark:hover .icon--forward { transform: translateX(0.3rem); } .btn--dark:hover .icon--back { transform: translateX(-0.3rem); } /* Square brand button — the contact form's submit */ .btn--square { padding: 1.2rem 2.5rem; font-size: var(--font-size-button); color: var(--color-on-dark); background-color: var(--color-brand); border-radius: 0; cursor: pointer; } .btn--square:hover, .btn--square:focus-visible { color: var(--color-on-dark); background-color: var(--color-heading); } /* ============================================================================ 3. BREADCRUMB ========================================================================== */ .breadcrumb-bar { background-color: var(--color-surface-tinted); } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; padding-block: var(--space-lg); font-size: var(--font-size-body); } .breadcrumb__item { display: flex; align-items: center; color: var(--color-heading); } .breadcrumb__item + .breadcrumb__item::before { content: "/"; margin-inline: var(--space-xs); font-size: var(--font-size-caption); color: var(--color-muted-strong); } .breadcrumb__link { display: flex; align-items: center; gap: var(--space-2xs); color: var(--color-heading); } .breadcrumb__link:hover, .breadcrumb__link:focus-visible { color: var(--color-brand); } .breadcrumb__link .icon { font-size: var(--font-size-nav); } .breadcrumb__item--current { color: var(--color-brand); } /* ============================================================================ 4. HERO SLIDER ========================================================================== */ .hero { position: relative; isolation: isolate; } .hero__track { position: relative; height: var(--hero-height); } .hero__slide { position: absolute; inset: 0; display: flex; align-items: center; background-color: #0a0a0a; background-size: cover; background-position: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-slow), visibility var(--transition-slow); } .hero__slide.is-active { opacity: 1; visibility: visible; } /* Darkening veil keeps the headline legible on small screens */ .hero__slide::before { content: ""; position: absolute; inset: 0; background-color: rgba(31, 30, 30, 0.55); } .hero__content { position: relative; z-index: 1; } .hero__title { font-size: var(--font-size-hero-title); font-weight: var(--font-weight-regular); line-height: var(--line-height-heading); color: var(--color-on-dark); } .hero__title span { display: block; } /* --- Horizontal framing, chosen per slide -------------------------------- */ /* Some of the photographs place the model in the middle of a wide, quiet backdrop. Centring those puts the subject directly behind the headline, so the slide can nudge its picture sideways and leave the empty half under the words. The offset is written as calc(50% + n), not as a plain length: the 50% keeps the framing centred as the window changes, and the fixed part is only the nudge on top. A bare length would drift badly between a laptop and a wide monitor. The nudge is smaller on narrow screens, where there is less room to give away. */ .hero__slide--shift-right-large { background-position: calc(50% + 10rem) center; } .hero__slide--shift-right-small { background-position: calc(50% + 5rem) center; } .hero__slide--shift-left-large { background-position: calc(50% - 10rem) center; } .hero__slide--shift-left-small { background-position: calc(50% - 5rem) center; } @media (min-width: 992px) { .hero__slide--shift-right-large { background-position: calc(50% + 20rem) center; } .hero__slide--shift-right-small { background-position: calc(50% + 10rem) center; } .hero__slide--shift-left-large { background-position: calc(50% - 20rem) center; } .hero__slide--shift-left-small { background-position: calc(50% - 10rem) center; } } /* --- Headline colour, chosen per slide ----------------------------------- */ /* The photographs behind the headline are not alike: two are nearly black, one is a pale blush. White reads well on the dark ones but disappears into the pale one, so each slide carries its own choice rather than the site imposing a single colour on all of them. */ .hero__slide--light .hero__title { color: var(--color-on-dark); } .hero__slide--blush .hero__title { color: var(--color-brand); } .hero__slide--dark .hero__title { color: var(--color-heading); } /* On a slide with dark text the veil would fight the words, so it lifts. */ .hero__slide--dark::before { background-color: rgba(255, 255, 255, 0.25); } .hero__content .btn { margin-top: 2.5rem; } /* --- The headline and button rise as a slide becomes active -------------- */ @keyframes hero-rise { from { opacity: 0; transform: translateY(4rem); } to { opacity: 1; transform: translateY(0); } } /* The rise plays once, when the page opens — not on every slide change. * * All three slides carry the same headline, so replaying the movement each * time the picture changes made the words appear to twitch while saying * nothing new. The animation is therefore tied to a class the script adds at * load and removes when the movement has finished, rather than to .is-active, * which is reapplied on every turn of the carousel. */ .hero--intro .hero__slide.is-active .hero__title { animation: hero-rise 1s cubic-bezier(0.22, 0.7, 0.3, 1) both; } /* The button follows a beat later, so the pair reads as one movement */ .hero--intro .hero__slide.is-active .btn { animation: hero-rise 1s cubic-bezier(0.22, 0.7, 0.3, 1) 0.35s both; } @media (prefers-reduced-motion: reduce) { .hero--intro .hero__slide.is-active .hero__title, .hero--intro .hero__slide.is-active .btn { animation: none; } } /* --- Arrows -------------------------------------------------------------- */ .hero__arrow { position: absolute; top: 50%; display: none; place-items: center; width: 4.8rem; height: 4.8rem; font-size: 2.4rem; color: var(--color-on-dark); background-color: rgba(0, 0, 0, 0.25); border-radius: var(--radius-circle); transform: translateY(-50%); transition: background-color var(--transition-base), color var(--transition-base); } .hero__arrow:hover { color: var(--color-on-dark); background-color: var(--color-brand); } .hero__arrow--prev { left: var(--space-lg); } .hero__arrow--next { right: var(--space-lg); } /* --- Dots ---------------------------------------------------------------- */ .hero__dots { position: absolute; left: 50%; bottom: var(--space-lg); display: flex; gap: var(--space-sm); transform: translateX(-50%); } .hero__dot { width: 1rem; height: 1rem; border: 1px solid var(--color-on-dark); border-radius: var(--radius-circle); transition: background-color var(--transition-base); } .hero__dot.is-active { background-color: var(--color-brand); border-color: var(--color-brand); } @media (min-width: 576px) { .hero__content .btn { margin-top: 3.8rem; } } @media (min-width: 992px) { .hero__slide::before { display: none; } .hero__arrow { display: grid; } .hero__dots { display: none; } } /* ============================================================================ 5. CATEGORY CARD ========================================================================== */ .categories { padding-block: var(--space-2xl); background-color: var(--color-surface-darkest); } .categories__grid { display: grid; grid-template-columns: 1fr; } .category-card__link { position: relative; display: block; aspect-ratio: var(--category-aspect); overflow: hidden; } .category-card__image { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; transform: scale(1.02); transition: opacity var(--transition-base), transform 0.6s cubic-bezier(0.22, 0.7, 0.3, 1); } .category-card__link:hover .category-card__image, .category-card__link:focus-visible .category-card__image { opacity: 1; transform: scale(1.12); } /* The label lifts a little as the artwork comes forward */ .category-card__title { transition: transform var(--transition-base), letter-spacing var(--transition-base); } .category-card__link:hover .category-card__title, .category-card__link:focus-visible .category-card__title { transform: translateY(-50%) translateY(-0.6rem); letter-spacing: 0.05em; } .category-card__title { position: absolute; left: 0; right: 0; top: 70%; padding-inline: var(--space-md); font-size: var(--font-size-card-title); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); color: var(--color-on-dark); text-align: center; text-transform: uppercase; transform: translateY(-50%); pointer-events: none; } @media (min-width: 576px) { .categories__grid { grid-template-columns: repeat(2, 1fr); } /* A lone card on the final row stretches the full width */ .category-card:last-child:nth-child(odd) { grid-column: span 2; } } @media (min-width: 768px) { .categories__grid { grid-template-columns: repeat(5, 1fr); } .category-card:last-child:nth-child(odd) { grid-column: auto; } } /* ============================================================================ 6. PRODUCT CARD ========================================================================== */ .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl) var(--grid-gap); } /* Inside the shop layout the grid shares the row with the sidebar */ .product-grid--shop { gap: var(--space-xl) var(--grid-gap); } .product-card__media { position: relative; margin-bottom: var(--space-md); border: 1px solid var(--color-border); background-color: var(--color-surface); overflow: hidden; } .product-card__media-link { display: block; } .product-card__image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform var(--transition-zoom); } /* Soft veil so the action buttons stay readable over the photo */ .product-card__media::after { content: ""; position: absolute; inset: 0; background-color: var(--color-veil); opacity: 0; pointer-events: none; transition: opacity var(--transition-zoom); } .product-card:hover .product-card__image, .product-card:focus-within .product-card__image { transform: scale(var(--zoom-scale)); } .product-card__category { margin-bottom: var(--space-2xs); font-size: var(--font-size-caption); line-height: var(--line-height-tight); color: var(--color-label); text-align: center; } .product-card__name { font-size: var(--font-size-caption); font-weight: var(--font-weight-regular); line-height: var(--line-height-heading); color: var(--color-heading); text-align: center; margin-bottom: var(--space-xs); transition: color var(--transition-base); } .product-card__name a:hover, .product-card__name a:focus-visible { color: var(--color-brand); } .product-card__collection { font-size: var(--font-size-caption); color: var(--color-brand); text-align: center; } @media (min-width: 576px) { .product-grid--shop { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 992px) { /* The sidebar takes a column back, so drop to three across */ .product-grid--shop { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .product-grid--shop { grid-template-columns: repeat(4, 1fr); } } /* ============================================================================ 6b. SHOP SIDEBAR ========================================================================== */ .sidebar-block { height: 100%; padding: var(--space-xl) var(--space-lg); background-color: var(--color-surface-tinted); } .sidebar-block__title { position: relative; margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); font-size: 1.8rem; line-height: var(--line-height-tight); color: var(--color-heading); } .sidebar-block__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--color-border); } .category-nav__link { display: block; padding: 1rem 0; font-size: var(--font-size-body); line-height: var(--line-height-tight); color: var(--color-body); } .category-nav li:first-child .category-nav__link { padding-top: 0; } .category-nav li:last-child .category-nav__link { padding-bottom: 0; } .category-nav__link:hover, .category-nav__link:focus-visible, .category-nav__link.is-current { color: var(--color-brand); } /* ============================================================================ 6c. PAGINATION ========================================================================== */ .pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-2xl); } .pagination__label { font-size: var(--font-size-body); color: var(--color-body); } .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs); } .pagination-bar .pagination { margin-top: 0; } .pagination__link { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; font-size: var(--font-size-body); color: var(--color-heading); background-color: var(--color-surface-tinted); border-radius: var(--radius-circle); transition: background-color var(--transition-base), color var(--transition-base); } .pagination__link .icon { font-size: 2rem; } .pagination__link:hover, .pagination__link:focus-visible { color: var(--color-on-dark); background-color: var(--color-brand); } .pagination__link[aria-current="page"] { color: var(--color-on-dark); background-color: var(--color-brand); pointer-events: none; } .pagination__link[aria-disabled="true"] { color: var(--color-label); pointer-events: none; } /* ============================================================================ 7. PRODUCT ACTIONS — Instagram / LINE ---------------------------------------------------------------------------- Two round buttons that rise out of the artwork on hover, each with a small label so it is obvious what tapping them does. ========================================================================== */ .product-actions { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); pointer-events: none; } .product-actions__item { position: relative; pointer-events: auto; } .product-actions__link { display: grid; place-items: center; width: 4.6rem; height: 4.6rem; font-size: 2.2rem; color: var(--color-on-dark); border-radius: var(--radius-circle); box-shadow: var(--shadow-float); opacity: 0; visibility: hidden; transform: translateY(1.4rem) scale(0.8); transition: opacity var(--transition-zoom), visibility var(--transition-zoom), transform var(--transition-zoom), background-color var(--transition-fast), color var(--transition-fast); } .product-actions__link--instagram { background: radial-gradient( circle at 30% 107%, var(--color-instagram-start) 0%, var(--color-instagram-start) 5%, var(--color-instagram-mid) 45%, var(--color-instagram-deep) 60%, var(--color-instagram-end) 90% ); } .product-actions__link--line { /* The dots inside the bubble always match the button background */ --line-glyph: var(--color-line); background-color: var(--color-line); } /* Reveal on hover / keyboard focus, with a small stagger */ .product-card:hover .product-actions__link, .product-card:focus-within .product-actions__link { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .product-card:hover .product-card__media::after, .product-card:focus-within .product-card__media::after { opacity: 1; } .product-actions__item:nth-child(1) .product-actions__link { transition-delay: 0.04s; } .product-actions__item:nth-child(2) .product-actions__link { transition-delay: 0.11s; } /* Invert on direct hover so the button reacts to the pointer */ .product-actions__link--instagram:hover, .product-actions__link--instagram:focus-visible { color: var(--color-instagram-deep); background: var(--color-surface); } .product-actions__link--line:hover, .product-actions__link--line:focus-visible { --line-glyph: var(--color-surface); color: var(--color-line); background: var(--color-surface); } .product-card:hover .product-actions__link:hover, .product-card:hover .product-actions__link:focus-visible { transform: translateY(-0.3rem) scale(1.06); } /* --- Label --------------------------------------------------------------- */ .product-actions__label { position: absolute; bottom: calc(100% + 1rem); left: 50%; padding: 0.5rem 1rem; font-size: 1.1rem; line-height: var(--line-height-tight); white-space: nowrap; color: var(--color-on-dark); background-color: var(--color-heading); border-radius: var(--radius-sm); opacity: 0; transform: translate(-50%, 0.5rem); pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast); } .product-actions__label::after { content: ""; position: absolute; top: 100%; left: 50%; border: 0.5rem solid transparent; border-top-color: var(--color-heading); transform: translateX(-50%); } .product-actions__link:hover + .product-actions__label, .product-actions__link:focus-visible + .product-actions__label { opacity: 1; transform: translate(-50%, 0); } /* Touch devices have no hover. * * They used to show every button all the time, which meant four coloured * circles sitting on top of each photograph before anyone had asked for them — * the jewellery competed with the buttons on a screen that has little room to * spare. A first tap on a card now reveals its buttons, the way a pointer * would, and a second tap on one of them follows the link. The script adds * .is-touched to the card it is showing. */ @media (hover: none) { .product-card.is-touched .product-actions__link { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .product-card.is-touched .product-card__media::after { opacity: 1; } .product-actions__link { width: 3.8rem; height: 3.8rem; font-size: 1.8rem; } .product-actions { align-items: flex-end; justify-content: flex-end; padding: var(--space-xs); } /* The little name beside a button needs a pointer to make sense */ .product-actions__label { display: none; } } /* ============================================================================ 8. GALLERY GRID ========================================================================== */ .gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); } .gallery__link { display: block; overflow: hidden; background-color: var(--color-surface-subtle); } .gallery__link img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform var(--transition-zoom); } .gallery__link:hover img, .gallery__link:focus-visible img { transform: scale(var(--zoom-scale)); } @media (min-width: 768px) { .gallery__grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================================================ 8b. POST CARDS — Jewel Tips listing ---------------------------------------------------------------------------- A plain responsive grid by default. Once main.js can measure the cards it adds `is-masonry` and places each one in whichever column is currently shortest, giving the staggered short/tall rhythm of the original. ========================================================================== */ .post-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); align-items: start; } /* Fine-grained rows so a card can span exactly its own height */ .post-grid.is-masonry { grid-auto-rows: 1px; row-gap: 0; } .post-card { min-width: 0; } .post-card__media { display: block; overflow: hidden; background-color: var(--color-surface-subtle); } .post-card__media img { width: 100%; transition: transform var(--transition-zoom); } .post-card:hover .post-card__media img { transform: scale(1.06); } .post-card__body { padding: var(--space-lg) var(--space-xl); background-color: var(--color-surface); transition: box-shadow var(--transition-base); } .post-card:hover .post-card__body { box-shadow: 0 0 3rem rgba(0, 0, 0, 0.1); } .post-card__date { font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-surface-footer-bar); text-transform: uppercase; letter-spacing: 0.04em; } .post-card__rule { height: 0; margin: var(--space-md) 0; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } .post-card__title { font-size: var(--font-size-widget-title); font-weight: var(--font-weight-bold); line-height: 1.4; margin-bottom: var(--space-xs); } .post-card__title a:hover, .post-card__title a:focus-visible { color: var(--color-brand); } .post-card__excerpt { margin-bottom: var(--space-lg); font-size: var(--font-size-widget-title); line-height: 1.7; color: var(--color-body); } @media (min-width: 576px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .post-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================================ 8c. PROSE — a single Jewel Tips article ========================================================================== */ .article { /* Full container width — the prose inside sets its own reading measure */ } .article__title { max-width: 82rem; margin: 0 auto var(--space-lg); font-size: 2.2rem; line-height: 1.4; color: var(--color-heading); text-align: center; } .article__date { margin-bottom: var(--space-2xl); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-label); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; } .prose { /* Text stays at a comfortable measure; feature rows run full width */ max-width: 82rem; margin-inline: auto; font-size: 1.5rem; line-height: 1.9; color: var(--color-body); } .prose + .feature-row, .feature-row + .prose { margin-top: var(--space-2xl); } .prose h3, .prose h4, .prose h5, .prose h6 { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--font-size-widget-title); line-height: 1.5; color: var(--color-heading); } .prose p { margin-bottom: var(--space-md); } .prose ul { margin-bottom: var(--space-md); padding-left: var(--space-lg); list-style: disc; } .prose li { margin-bottom: var(--space-2xs); } .prose a { color: var(--color-brand); text-decoration: underline; } .prose a:hover { color: var(--color-brand-strong); } .prose hr { height: 0; margin: var(--space-xl) 0; border: 0; border-top: 1px solid var(--color-border); } .prose__accent { color: var(--color-brand); } .prose__image, .prose__video { width: 100%; height: auto; margin: var(--space-lg) 0; background-color: var(--color-surface-subtle); } /* ============================================================================ 8d. FEATURE ROW — image beside text, alternating sides ---------------------------------------------------------------------------- One column on phones and tablets, two from 992px up. The media cell always comes first in the markup so the stacked order reads image-then-text; on wide screens `--reverse` flips the pair to give the zigzag rhythm. ========================================================================== */ .feature-row { display: grid; grid-template-columns: 1fr; align-items: center; background-color: var(--color-surface-tinted); } /* Rows sit flush against each other, as in the original layout */ .feature-row + .feature-row { margin-top: 0; } .feature-row__media { margin: 0; overflow: hidden; } .feature-row__media img, .feature-row__media video { display: block; width: 100%; height: auto; } /* A reveal hook inside another one would compound the two transforms */ .js [data-reveal] [data-reveal] { opacity: 1; transform: none; } .feature-row__body { padding: var(--space-xl) var(--space-lg); font-size: 1.5rem; line-height: 1.9; } .feature-row__title { margin-bottom: var(--space-xs); font-size: var(--font-size-widget-title); font-weight: var(--font-weight-regular); line-height: 1.5; color: var(--color-brand); } .feature-row__body p { margin-bottom: var(--space-xs); } .feature-row__body strong { color: var(--color-heading); } @media (min-width: 992px) { .feature-row--split { grid-template-columns: 1fr 1fr; } /* Text on the left, artwork on the right */ .feature-row--reverse .feature-row__media { order: 2; } .feature-row--reverse .feature-row__body { order: 1; } .feature-row__body { padding: var(--space-2xl) var(--space-xl); } } @media (min-width: 768px) { .article__title { font-size: 2.6rem; } } .back-link { margin-top: var(--space-2xl); text-align: center; } /* ============================================================================ 8e. ABOUT INTRO — portrait beside the brand story ========================================================================== */ .about-intro { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; } .about-intro__media { margin: 0; } .about-intro__media img { width: 100%; height: auto; } .about-intro__title { margin-bottom: var(--space-lg); font-size: 2.6rem; line-height: 1.1; color: var(--color-brand); } .about-intro__subtitle { padding-bottom: var(--space-md); font-size: var(--font-size-widget-title); line-height: 1.5; color: var(--color-heading); } .about-intro__body p { margin-bottom: 1.2rem; font-size: 1.5rem; line-height: 1.8; text-align: justify; } .about-intro__body p:last-child { margin-bottom: 0; text-align: left; } @media (min-width: 768px) { .about-intro__title { margin-bottom: 3.8rem; font-size: 4.8rem; } .about-intro__subtitle { font-size: 1.8rem; padding-bottom: 2rem; } } @media (min-width: 992px) { .about-intro { /* 5 / 7 split, as in the original */ grid-template-columns: 5fr 7fr; gap: var(--space-xl); } } /* ============================================================================ 8f. VALUE CARDS — "Why Orabella" ========================================================================== */ .value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl) var(--grid-gap); } .value-card { text-align: center; } .value-card__icon { width: 10rem; height: auto; margin: 0 auto; } .value-card__title { padding: 1.5rem 0 1rem; font-size: 1.8rem; font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); color: var(--color-brand); } .value-card__text { font-size: var(--font-size-body); color: var(--color-body); } @media (min-width: 768px) { .value-grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================================================ 8g. MAP EMBED ========================================================================== */ .map-embed { display: block; width: 100%; height: 35rem; border: 0; } @media (min-width: 768px) { .map-embed { height: 45rem; } } /* ============================================================================ 8h. CONTACT — form beside the details ========================================================================== */ .contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); } .contact-heading { margin-bottom: var(--space-lg); font-size: 2.2rem; line-height: var(--line-height-heading); color: var(--color-heading); } @media (min-width: 992px) { .contact-layout { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } } /* --- Form ---------------------------------------------------------------- */ .contact-form { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .field--wide { grid-column: 1 / -1; } .field__control { width: 100%; padding: 1.2rem 1.2rem; font: inherit; font-size: var(--font-size-body); color: var(--color-body); background-color: var(--color-surface-subtle); border: 0; border-bottom: 3px solid transparent; border-radius: 0; transition: border-color var(--transition-base), background-color var(--transition-base); } .field__control::placeholder { color: var(--color-muted); } .field__control:focus { outline: none; background-color: var(--color-surface); border-bottom-color: var(--color-brand); } .field__control:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } textarea.field__control { min-height: 20rem; resize: vertical; } /* Only shown once the browser has flagged a field as invalid */ .field__error { display: none; margin-top: var(--space-2xs); font-size: var(--font-size-caption); color: #c0392b; } .field.is-invalid .field__control { border-bottom-color: #c0392b; } .field.is-invalid .field__error { display: block; } .form-status { grid-column: 1 / -1; margin: 0; font-size: var(--font-size-body); } .form-status:empty { display: none; } @media (min-width: 576px) { .contact-form { grid-template-columns: 1fr 1fr; } } /* --- Details ------------------------------------------------------------- */ .contact-details__group { padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); } .contact-details__group:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .contact-details__title { margin-bottom: var(--space-md); font-size: var(--font-size-widget-title); color: var(--color-heading); } .contact-details__item { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-xs); font-size: var(--font-size-body); line-height: 1.8; } .contact-details__item:last-child { margin-bottom: 0; } .contact-details__item .icon { flex: none; margin-top: 0.6rem; font-size: var(--font-size-icon); color: var(--color-body); } .contact-details__item a:hover, .contact-details__item a:focus-visible { color: var(--color-brand); } /* ============================================================================ 8i. SOCIAL TILES — brand-coloured links ========================================================================== */ .social-tiles { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .social-tiles__link { position: relative; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; font-size: 2.5rem; color: var(--color-on-dark); border-radius: 1.2rem; overflow: hidden; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } /* The brand fill sits behind the glyph so it can fade on hover */ .social-tiles__link::before { content: ""; position: absolute; inset: 0; background: var(--tile-fill); transition: transform var(--transition-base); } .social-tiles__link .icon { position: relative; } .social-tiles__link:hover, .social-tiles__link:focus-visible { color: var(--color-on-dark); transform: translateY(-0.3rem); box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.22); } .social-tiles__link:hover::before { transform: scale(1.15); } .social-tiles__link--facebook { --tile-fill: var(--color-facebook); } .social-tiles__link--instagram { --tile-fill: radial-gradient( circle at 30% 107%, var(--color-instagram-start) 0%, var(--color-instagram-start) 5%, var(--color-instagram-mid) 45%, var(--color-instagram-deep) 60%, var(--color-instagram-end) 90% ); } .social-tiles__link--line { --tile-fill: var(--color-line); --line-glyph: var(--color-line); } /* ============================================================================ 9. LIGHTBOX ========================================================================== */ .lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid; place-items: center; padding: var(--space-lg); } .lightbox[hidden] { display: none; } .lightbox__backdrop { position: absolute; inset: 0; background-color: var(--color-overlay-strong); opacity: 0; transition: opacity var(--transition-base); } .lightbox.is-open .lightbox__backdrop { opacity: 1; } .lightbox__figure { position: relative; opacity: 0; transform: scale(0.96); transition: opacity var(--transition-base), transform var(--transition-base); } .lightbox.is-open .lightbox__figure { opacity: 1; transform: scale(1); } .lightbox__image { max-width: min(90vw, 90rem); max-height: 82vh; width: auto; object-fit: contain; } .lightbox__close, .lightbox__nav { position: absolute; display: grid; place-items: center; width: 4.8rem; height: 4.8rem; font-size: 2.4rem; color: var(--color-on-dark); border-radius: var(--radius-circle); transition: background-color var(--transition-base), color var(--transition-base); } .lightbox__close:hover, .lightbox__nav:hover { color: var(--color-on-dark); background-color: var(--color-brand); } .lightbox__close { top: var(--space-md); right: var(--space-md); } .lightbox__nav--prev { left: var(--space-xs); top: 50%; transform: translateY(-50%); } .lightbox__nav--next { right: var(--space-xs); top: 50%; transform: translateY(-50%); } @media (min-width: 768px) { .lightbox__nav--prev { left: var(--space-xl); } .lightbox__nav--next { right: var(--space-xl); } } /* ============================================================================ 10. BACK TO TOP ========================================================================== */ .back-to-top { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-floating); display: grid; place-items: center; width: 5rem; height: 5rem; font-size: 2.4rem; color: var(--color-on-dark); background-color: var(--color-brand); border-radius: var(--radius-circle); opacity: 0; visibility: hidden; transform: translateY(2rem); transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base), background-color var(--transition-base); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background-color: var(--color-heading); } /* --------------------------------------------------------------------------- Cookie notice Anchored to the bottom of the window rather than covering the middle of the page: a visitor can still read what they came for while deciding, which is both kinder and less likely to be dismissed without reading. --------------------------------------------------------------------------- */ .cookie-notice { position: fixed; left: 1.6rem; right: 1.6rem; bottom: 1.6rem; z-index: 9000; background: #ffffff; border: 1px solid #e5e1df; border-radius: 1.2rem; box-shadow: 0 2rem 5rem rgba(23, 20, 20, 0.18); animation: cookie-rise 0.35s ease both; } @keyframes cookie-rise { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .cookie-notice { animation: none; } } .cookie-notice[hidden] { display: none; } .cookie-notice__inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; max-width: 120rem; margin: 0 auto; padding: 2rem 2.4rem; } .cookie-notice__text { flex: 1 1 32rem; } .cookie-notice__title { margin: 0 0 0.4rem; font-size: 1.6rem; font-weight: 700; color: #1b1b1b; } .cookie-notice__body { margin: 0; font-size: 1.4rem; line-height: 1.7; color: #565150; } .cookie-notice__link { color: #c07f81; font-weight: 700; text-decoration: underline; white-space: nowrap; } .cookie-notice__link:hover { color: #a86668; } .cookie-notice__actions { display: flex; gap: 1rem; flex-wrap: wrap; } .cookie-btn { font: inherit; font-size: 1.4rem; font-weight: 700; padding: 1.1rem 2.4rem; border-radius: 0.7rem; border: 1px solid transparent; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .cookie-btn--accept { background: #c07f81; color: #fff; } .cookie-btn--accept:hover { background: #a86668; } .cookie-btn--ghost { background: transparent; color: #565150; border-color: #e5e1df; } .cookie-btn--ghost:hover { background: #f7f6f5; color: #1b1b1b; } /* The way back into the notice: a quiet line in the footer rather than a badge floating over the photographs. */ .site-footer__cookies { font: inherit; font-size: 1.3rem; padding: 0; color: var(--color-on-dark-muted); background: none; border: 0; opacity: 0.75; cursor: pointer; text-decoration: underline; text-underline-offset: 0.3rem; transition: opacity 0.2s ease; } .site-footer__cookies:hover { opacity: 1; } @media (max-width: 600px) { .cookie-notice__inner { padding: 1.8rem; } .cookie-notice__actions { width: 100%; } .cookie-btn { flex: 1 1 auto; } }