/* ============================================================ AIJU PHOTOGRAPHY — CUSTOM STYLES (styles.css) Bootstrap Studio: create ONE new CSS file and paste this in. This replaces the old styles-1.css / styles-2.css (don't keep those — they were duplicated and fought each other). HOW THEMING WORKS: - Light is the default (the :root block below). - When the ◑ button is pressed, JS sets data-bs-theme="dark" on , and the [data-bs-theme="dark"] block overrides the colour variables. Everything else reads the variables, so you rarely need to touch anything but these two blocks. ============================================================ */ /* ---- LIGHT THEME TOKENS (edit colours here) ---- */ :root { --aiju-paper: #f7f3ec; --aiju-paper-2: #efe8dd; --aiju-ink: #211f1c; --aiju-ink-dim: #6f6960; --aiju-line: rgba(33,31,28,.12); --aiju-accent: #5f7a66; --aiju-accent-ink: #46604c; --aiju-accent-soft: #c2d3c7; --aiju-shadow: 0 18px 50px rgba(33,31,28,.14); --aiju-radius: 18px; --aiju-serif: "Cormorant Garamond","Times New Roman",serif; --aiju-sans: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* ---- DARK THEME OVERRIDES (only the colours change) ---- */ [data-bs-theme="dark"] { --aiju-paper: #15130f; --aiju-paper-2: #1c1a15; --aiju-ink: #f3ede2; --aiju-ink-dim: #a39b8d; --aiju-line: rgba(243,237,226,.14); --aiju-accent: #aac0af; --aiju-accent-ink: #c2d3c7; --aiju-accent-soft: #2b3530; --aiju-shadow: 0 18px 50px rgba(0,0,0,.55); } /* ---- BASE ---- */ body { background: var(--aiju-paper); color: var(--aiju-ink); font-family: var(--aiju-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .5s ease, color .5s ease; } h1, h2, h3, .aiju-footer-brand { font-family: var(--aiju-serif); font-weight: 600; line-height: 1.08; } a { text-decoration: none; } /* Small uppercase label above headings */ .aiju-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aiju-accent-ink); display: inline-block; margin-bottom: .5rem; } /* Shared heading block at the top of each section */ .aiju-section-head { max-width: 620px; margin-bottom: 2.5rem; } .aiju-section-head h2 { font-size: clamp(2rem,4.5vw,3rem); margin: .4rem 0 .6rem; } .aiju-section-head p { color: var(--aiju-ink-dim); } /* ---- BUTTONS ---- */ .aiju-btn-primary { background: var(--aiju-accent); color: #fff; border-radius: 100px; padding: .8em 1.7em; font-weight: 500; border: 0; transition: transform .25s ease, background .25s ease; } .aiju-btn-primary:hover { background: var(--aiju-accent-ink); color: #fff; transform: translateY(-2px); } .aiju-btn-ghost { background: transparent; color: var(--aiju-ink); border: 1px solid var(--aiju-line); border-radius: 100px; padding: .8em 1.7em; font-weight: 500; transition: transform .25s ease, border-color .25s ease, color .25s ease; } .aiju-btn-ghost:hover { border-color: var(--aiju-accent); color: var(--aiju-accent-ink); transform: translateY(-2px); } /* ---- [NAV] ---- */ .aiju-nav { background: color-mix(in srgb, var(--aiju-paper) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--aiju-line); } .aiju-nav .navbar-brand { font-family: var(--aiju-serif); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 1.25rem; color: var(--aiju-ink); } .aiju-nav .nav-link { color: var(--aiju-ink-dim); font-size: .9rem; } .aiju-nav .nav-link:hover { color: var(--aiju-ink); } .aiju-theme-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--aiju-line); color: var(--aiju-ink); background: transparent; transition: transform .4s ease, border-color .2s ease; } .aiju-theme-btn:hover { transform: rotate(180deg); border-color: var(--aiju-accent); } /* ---- [HERO] ---- */ .aiju-hero { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; } .aiju-hero-slides { position: absolute; inset: 0; background: linear-gradient(115deg,var(--aiju-paper-2),var(--aiju-accent-soft) 60%,var(--aiju-paper-2)); } /* Each slide stacks on top of the others; only .active is visible. Change crossfade speed here (the 1.2s); change hold time in main.js. */ .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; } .hero-slide.active { opacity: 1; } /* .aiju-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb,var(--aiju-paper) 88%, transparent), color-mix(in srgb,var(--aiju-paper) 25%, transparent) 55%, transparent); } */ /* Let the container behave like every other section so the hero text lines up with the headings below it (no more sticking out left). */ .aiju-hero-inner { position: relative; z-index: 2; } /* Soft radial scrim behind the text — no hard edges, just a faint darkening that fades out. This is what guarantees readability over a white dress or pale background. Lower/raise the .55 to taste; lower = lighter, raise = stronger shade. */ .aiju-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 70% at 28% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 45%, transparent 75% ); z-index: 1; pointer-events: none; } /* The readable panel behind the hero text. Frosted glass look: semi-transparent paper colour + blur. Works over any photo and adapts to light/dark automatically via the --aiju-paper variable. .aiju-hero-panel { background: color-mix(in srgb, var(--aiju-paper) 45%, transparent); <- lower % = more photo shows backdrop-filter: blur(16px) saturate(120%); <- more blur = more readable -webkit-backdrop-filter: blur(16px) saturate(120%); border: 1px solid color-mix(in srgb, var(--aiju-paper) 55%, transparent); border-radius: var(--aiju-radius); padding: 2.5rem; max-width: 560px; box-shadow: var(--aiju-shadow); } */ .aiju-hero-title { font-size: clamp(2.6rem,6.5vw,5rem); margin: .5rem 0 1.1rem; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); } .aiju-hero-title em { font-style: italic; color: #c2d3c7; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 16px rgba(0,0,0,.55); } /* pale sage stands out on dark */ .aiju-hero-lead { font-size: clamp(1.05rem,2.2vw,1.3rem); max-width: 540px; margin-bottom: 2rem; color: rgba(255,255,255,.92); text-shadow: 0 1px 12px rgba(0,0,0,.5); } /* ---- [INTRO] ---- */ .aiju-intro { padding: 3.5rem 0; font-size: 1.2rem; color: var(--aiju-ink-dim); max-width: 760px; } /* ---- Alternating band background ---- */ .aiju-band { background: var(--aiju-paper-2); padding: clamp(4rem,8vw,6rem) 0; } .aiju-hero .aiju-eyebrow { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); } /* Ghost button on photos: white outline reads better than the dark default here */ .aiju-hero .aiju-btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); } .aiju-hero .aiju-btn-ghost:hover { color: #fff; border-color: #fff; } /* ---- [WINDOWS] ---- */ .aiju-window { position: relative; display: flex; align-items: flex-end; min-height: 380px; border-radius: var(--aiju-radius); overflow: hidden; background: linear-gradient(135deg,var(--aiju-accent-soft),var(--aiju-paper-2)); transition: transform .4s ease, box-shadow .4s ease; } .aiju-window:hover { transform: translateY(-6px); box-shadow: var(--aiju-shadow); } .aiju-window > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .7s ease; } .aiju-window:hover > img { transform: scale(1.05); } .aiju-window-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.05) 55%, transparent); } .aiju-window-body { position: relative; z-index: 2; padding: 2rem; color: #fff; display: block; } .aiju-window-title { font-family: var(--aiju-serif); font-size: 2rem; display: block; } .aiju-window-text { display: block; max-width: 340px; opacity: .92; margin: .3rem 0 .8rem; font-size: .98rem; } .aiju-window-link { font-size: .85rem; font-weight: 600; letter-spacing: .04em; } .aiju-window-link span { display: inline-block; transition: transform .25s ease; } .aiju-window:hover .aiju-window-link span, .aiju-window-sub:hover .aiju-window-link span { transform: translateX(5px); } /* Secondary wedding strip */ .aiju-window-sub { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.4rem 1.8rem; border: 1px dashed var(--aiju-line); border-radius: var(--aiju-radius); color: var(--aiju-ink-dim); } .aiju-window-sub strong { font-family: var(--aiju-serif); font-size: 1.25rem; color: var(--aiju-ink); } .aiju-window-sub .aiju-window-link { color: var(--aiju-accent-ink); } /* ---- [MOSAIC] ---- */ /* Masonry via CSS columns: images keep their natural aspect ratio and pack into columns. Change the column count per screen size below; change the gap with column-gap + the figure margin. */ .aiju-mosaic { column-count: 3; column-gap: 12px; } .aiju-tile { break-inside: avoid; margin: 0 0 12px; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg,var(--aiju-accent-soft),var(--aiju-paper-2)); } .aiju-tile img { width: 100%; height: auto; display: block; cursor: pointer; transition: transform .5s ease, filter .5s ease; } /* Hover desaturate — DESKTOP/MOUSE ONLY. On touch screens this is skipped, so phones show every photo in full colour. */ @media (hover: hover) and (pointer: fine) { .aiju-mosaic:hover .aiju-tile img { filter: grayscale(1); } } @media (hover: hover) and (pointer: fine) { .aiju-mosaic .aiju-tile img:hover { filter: none; transform: scale(1.04); } } /* Fewer columns on smaller screens */ @media (max-width: 900px) { .aiju-mosaic { column-count: 2; } } @media (max-width: 520px) { .aiju-mosaic { column-count: 2; } } /* ---- [HOWITWORKS] ---- */ .aiju-step-num { font-family: var(--aiju-serif); font-size: 2.6rem; color: var(--aiju-accent); opacity: .55; display: block; } .aiju-step h3 { font-size: 1.3rem; margin: .2rem 0 .4rem; } .aiju-step p { color: var(--aiju-ink-dim); margin: 0; } /* ---- [INCLUDED] ---- */ .aiju-included { background: var(--aiju-paper-2); border: 1px solid var(--aiju-line); border-radius: var(--aiju-radius); padding: 1.8rem; height: 100%; } .aiju-included h3 { font-size: 1.3rem; margin-bottom: .4rem; } .aiju-included p { color: var(--aiju-ink-dim); margin: 0; } /* ---- [PRICING] ---- */ .aiju-price { background: var(--aiju-paper); border: 1px solid var(--aiju-line); border-radius: var(--aiju-radius); padding: 1.8rem; height: 100%; } .aiju-price h3 { font-size: 1.3rem; } .aiju-price-amt { font-family: var(--aiju-serif); font-size: 1.6rem; color: var(--aiju-accent-ink); margin: .2rem 0 .6rem; } .aiju-price p { color: var(--aiju-ink-dim); margin: 0; } /* ---- [TESTIMONIALS] ---- */ .aiju-quote { background: var(--aiju-paper-2); border-left: 3px solid var(--aiju-accent); border-radius: 0 12px 12px 0; padding: 1.6rem 1.8rem; height: 100%; margin: 0; } .aiju-quote p { font-family: var(--aiju-serif); font-size: 1.25rem; font-style: italic; } .aiju-quote cite { color: var(--aiju-ink-dim); font-size: .9rem; font-style: normal; } /* ---- [CTA] ---- */ .aiju-cta h2 { font-size: clamp(2.2rem,5vw,3.4rem); margin-bottom: 1rem; } .aiju-cta p { color: var(--aiju-ink-dim); max-width: 600px; margin: 0 auto 1.8rem; } /* ---- [FOOTER] ---- */ .aiju-footer { border-top: 1px solid var(--aiju-line); padding: 2.2rem 0; } .aiju-footer-brand { font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; } .aiju-footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.3rem; padding: 0; margin: 0; } .aiju-footer-links a { color: var(--aiju-ink-dim); font-size: .9rem; } .aiju-footer-links a:hover { color: var(--aiju-accent-ink); } .aiju-footer-ig { color: var(--aiju-ink-dim); transition: color .2s ease; } .aiju-footer-ig:hover { color: var(--aiju-accent-ink); } .aiju-footer-copy { text-align: center; color: var(--aiju-ink-dim); font-size: .85rem; margin-top: 1.5rem; } /* ---- [LIGHTBOX] ---- */ .aiju-lightbox .modal-content { background: transparent; border: 0; } .aiju-lightbox img { width: 100%; height: auto; border-radius: 8px; } .aiju-lightbox-close { position: absolute; top: -2.5rem; right: 0; z-index: 5; } .aiju-page-head { padding: clamp(3.5rem,8vw,6rem) 0 2rem; } .aiju-page-head h1 { font-size: clamp(2.2rem,5vw,3.4rem); margin: .3rem 0 .6rem; } .aiju-page-head p { color: var(--aiju-ink-dim); max-width: 60ch; margin: 0; } .aiju-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--aiju-accent-ink); margin-bottom: 1rem; } .aiju-back span { display: inline-block; transition: transform .25s ease; } .aiju-back:hover span { transform: translateX(-4px); } /* Album cover: fixed 4:5 frame; covers crossfade on hover, slow-zoom on touch */ .aiju-album { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--aiju-radius); background: linear-gradient(135deg,var(--aiju-accent-soft),var(--aiju-paper-2)); transition: transform .4s ease, box-shadow .4s ease; image-rendering: auto; -ms-interpolation-mode: bicubic; } .aiju-album:hover { transform: translateY(-6px); box-shadow: var(--aiju-shadow); } .aiju-album img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; } .aiju-album img.is-active { opacity: 1; } .aiju-album-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.04) 55%, transparent); } .aiju-album-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.4rem 1.5rem; color: #fff; } .aiju-album-rule { width: 26px; height: 2px; background: var(--aiju-accent); margin-bottom: .55rem; } .aiju-album-title { font-family: var(--aiju-serif); font-size: 1.7rem; line-height: 1.08; } @media (hover: none) { .aiju-album img.is-active { animation: aijuKenBurns 14s ease-in-out infinite alternate; } } @keyframes aijuKenBurns { from { transform: scale(1); } to { transform: scale(1.1); } } /* ---- REVEAL-ON-SCROLL ---- Elements start hidden ONLY when JS is on (html.js). If JS is off, everything shows normally — so content is never lost. */ html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } html.js .reveal.in { opacity: 1; transform: none; } /* ---- [LIGHTBOX ARROWS] ---- */ .aiju-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 1060; background: none; border: 0; color: #fff; font-size: 3rem; line-height: 1; cursor: pointer; padding: .5rem 1rem; opacity: .8; text-shadow: 0 2px 12px rgba(0,0,0,.5); transition: opacity .2s ease, transform .2s ease; } .aiju-lb-nav:hover { opacity: 1; } .aiju-lb-prev { left: .5rem; } .aiju-lb-next { right: .5rem; } .aiju-lb-prev:hover { transform: translateY(-50%) translateX(-3px); } .aiju-lb-next:hover { transform: translateY(-50%) translateX(3px); } @media (max-width: 520px) { .aiju-lb-nav { font-size: 2.2rem; opacity: .9; } }