/* ========================================================= GalleryCloud — global design system ========================================================= */ :root { --hue: 220; --bg: hsl(var(--hue), 30%, 98%); --bg-elev: hsl(var(--hue), 30%, 100%); --fg: hsl(var(--hue), 30%, 10%); --fg-muted: hsl(var(--hue), 15%, 40%); --line: hsl(var(--hue), 20%, 90%); --accent: hsl(var(--hue), 70%, 50%); --accent-soft: hsl(var(--hue), 70%, 96%); --shadow-1: 0 1px 2px hsl(var(--hue) 20% 10% / 0.04), 0 8px 24px hsl(var(--hue) 20% 10% / 0.06); --shadow-2: 0 4px 12px hsl(var(--hue) 20% 10% / 0.08), 0 24px 60px hsl(var(--hue) 20% 10% / 0.12); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --font-sans: ui-sans-serif, -apple-system, "Inter", system-ui, sans-serif; --font-serif: "Cormorant Garamond", "EB Garamond", ui-serif, Georgia, serif; --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", monospace; --font: var(--font-sans); color-scheme: light; } /* ---------- Site-wide dark theme ---------- */ /* Manual override (toggle button writes data-theme on ). */ :root[data-theme="dark"] { --bg: hsl(var(--hue), 18%, 8%); --bg-elev: hsl(var(--hue), 18%, 12%); --fg: hsl(var(--hue), 12%, 96%); --fg-muted: hsl(var(--hue), 10%, 65%); --line: hsl(var(--hue), 12%, 22%); --accent: hsl(var(--hue), 70%, 62%); --accent-soft: hsl(var(--hue), 30%, 18%); --shadow-1: 0 1px 2px hsl(0 0% 0% / 0.3), 0 8px 24px hsl(0 0% 0% / 0.4); --shadow-2: 0 4px 12px hsl(0 0% 0% / 0.35), 0 24px 60px hsl(0 0% 0% / 0.55); color-scheme: dark; } /* Auto-follow system when no explicit choice has been made. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: hsl(var(--hue), 18%, 8%); --bg-elev: hsl(var(--hue), 18%, 12%); --fg: hsl(var(--hue), 12%, 96%); --fg-muted: hsl(var(--hue), 10%, 65%); --line: hsl(var(--hue), 12%, 22%); --accent: hsl(var(--hue), 70%, 62%); --accent-soft: hsl(var(--hue), 30%, 18%); --shadow-1: 0 1px 2px hsl(0 0% 0% / 0.3), 0 8px 24px hsl(0 0% 0% / 0.4); --shadow-2: 0 4px 12px hsl(0 0% 0% / 0.35), 0 24px 60px hsl(0 0% 0% / 0.55); color-scheme: dark; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body { font-family: var(--font); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.55; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ---------- Typography ---------- */ h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: 0.18em; color: var(--fg-muted); } /* ---------- Layout ---------- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .stack > * + * { margin-top: var(--gap, 16px); } .row { display: flex; gap: 12px; align-items: center; } .spacer { flex: 1; } /* ---------- Buttons ---------- */ .btn { --bg: var(--fg); --col: var(--bg-elev); display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg); color: var(--col); border: 1px solid transparent; border-radius: 999px; padding: 12px 20px; font-weight: 500; font-size: 14px; transition: transform .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); } .btn:active { transform: translateY(0); } .btn.primary { --bg: var(--accent); --col: white; } .btn.ghost { --bg: transparent; --col: var(--fg); border-color: var(--line); } .btn.ghost.active { --bg: var(--accent-soft); --col: var(--accent); border-color: var(--accent); } .btn.subtle { --bg: var(--accent-soft); --col: var(--accent); } .btn.danger { --bg: hsl(0, 70%, 55%); --col: white; } .btn[disabled] { opacity: .5; pointer-events: none; } /* ---------- Form ---------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; color: var(--fg-muted); } .field input, .field textarea, .field select { font: inherit; width: 100%; min-width: 0; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px hsl(var(--hue) 70% 50% / 0.12); } /* ---------- Card ---------- */ .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-1); } /* ---------- Header ---------- */ .app-header { position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); background: hsl(var(--hue) 30% 100% / 0.72); border-bottom: 1px solid var(--line); } .app-header .inner { display: flex; align-items: center; gap: 10px; padding: 14px 24px; max-width: 1280px; margin: 0 auto; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; min-width: 0; flex-shrink: 0; } .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: conic-gradient(from 220deg, var(--accent), hsl(var(--hue), 70%, 70%), var(--accent)); box-shadow: inset 0 0 0 1px hsl(var(--hue) 60% 30% / 0.2); } /* ---------- Footer ---------- */ .foot { padding: 60px 24px 80px; color: var(--fg-muted); font-size: 14px; text-align: center; } /* ---------- Toast ---------- */ .toast-host { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; } .toast { background: var(--fg); color: var(--bg-elev); padding: 12px 18px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow-2); animation: pop .35s cubic-bezier(.2,.9,.3,1.2); } .toast.error { background: hsl(0 70% 50%); } @keyframes pop { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ========================================================= Landing ========================================================= */ .hero { position: relative; overflow: hidden; padding: 120px 24px 100px; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 80%; background: radial-gradient(60% 50% at 20% 20%, hsl(var(--hue) 80% 80% / .55), transparent 60%), radial-gradient(50% 40% at 80% 30%, hsl(calc(var(--hue) + 40) 80% 75% / .45), transparent 60%); filter: blur(40px); z-index: -1; } .hero h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(44px, 7vw, 88px); } .hero p.lead { font-size: 20px; color: var(--fg-muted); max-width: 620px; margin: 24px 0 36px; } .proof { margin-top: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; } .proof .card h3 { font-size: 16px; margin-bottom: 6px; } .proof .card p { color: var(--fg-muted); font-size: 14px; } .feature-grid { padding: 80px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; max-width: 1200px; margin: 0 auto; } .feature { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-elev); } .feature .icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; } /* ========================================================= Pricing comparison cards ========================================================= */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; align-items: stretch; } .plan-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; position: relative; } .plan-card.highlight { border-color: var(--accent); box-shadow: var(--shadow-2); } .plan-card .plan-badge { position: absolute; top: -10px; right: 16px; background: var(--accent); color: white; font-size: 11px; letter-spacing: 0.18em; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; } .plan-card .price { font-family: var(--font-serif); font-size: 56px; font-weight: 500; line-height: 1; margin: 12px 0 16px; } .plan-card .price .suffix { font-size: 18px; color: var(--fg-muted); font-family: var(--font-sans); } .plan-card .plan-tagline { color: var(--fg-muted); margin: 0 0 24px; } .plan-card .plan-includes { font-size: 13px; color: var(--fg-muted); margin: 0 0 12px; letter-spacing: 0.02em; } .plan-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .plan-features li { position: relative; padding-left: 30px; font-size: 14px; line-height: 1.5; color: var(--fg); } .plan-features li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background-size: 10px 10px; background-position: center; background-repeat: no-repeat; } .plan-features li.yes::before { background-color: hsl(140, 60%, 90%); border: 1px solid hsl(140, 50%, 60%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.5 L4 8 L8.5 2.5' fill='none' stroke='hsl(140,60%25,30%25)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .plan-features li.no { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: hsl(0, 0%, 70%); text-decoration-thickness: 1px; } .plan-features li.no::before { background-color: hsl(0, 0%, 95%); border: 1px solid hsl(0, 0%, 80%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5 L7.5 7.5 M7.5 2.5 L2.5 7.5' fill='none' stroke='hsl(0,0%25,50%25)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } .plan-features li code { font-family: var(--font-mono); font-size: 12px; background: var(--accent-soft); color: var(--accent); padding: 1px 6px; border-radius: 4px; } /* ========================================================= Auth pages ========================================================= */ .auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 40px 20px; background: radial-gradient(60% 40% at 50% 0%, hsl(var(--hue) 80% 90%), transparent 70%), var(--bg); } .auth-card { width: 100%; max-width: 420px; } .auth-card h1 { font-family: var(--font-serif); font-size: 36px; margin-bottom: 6px; } .auth-card .sub { color: var(--fg-muted); margin-bottom: 28px; } /* ========================================================= Dashboard ========================================================= */ .dash { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100dvh - 60px); overflow-x: hidden; } .side { border-right: 1px solid var(--line); background: var(--bg-elev); padding: 24px 18px; position: sticky; top: 60px; align-self: start; height: calc(100dvh - 60px); } .side .nav { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .side .nav a { padding: 10px 12px; border-radius: 10px; color: var(--fg-muted); } .side .nav a.active, .side .nav a:hover { background: var(--accent-soft); color: var(--accent); } .main { padding: 36px 40px; min-width: 0; } @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .side { position: static; height: auto; } .main { padding: 24px 16px; overflow-x: hidden; } .page-head h2 { font-size: 28px; } .page-head { gap: 10px; } .page-head .spacer { display: none; } .page-head .btn { font-size: 12px; padding: 8px 12px; } .profile-grid { padding: 20px 0 60px; } .gallery-list { gap: 14px; } .gallery-card h3 { font-size: 18px; } .editor-top { flex-wrap: wrap; } .theme-grid { grid-template-columns: 1fr; } } .page-head { display: flex; align-items: end; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .page-head h2 { font-family: var(--font-serif); font-size: 38px; font-weight: 500; } .page-head .spacer { flex: 1; } .gallery-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 18px; } .gallery-card { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-elev); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; } .gallery-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } .gallery-card .cover { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--accent-soft), hsl(var(--hue) 60% 90%)); background-size: cover; background-position: center; } .gallery-card .meta { padding: 14px 16px; } .gallery-card h3 { font-family: var(--font-serif); font-size: 22px; } .gallery-card .sub { font-size: 13px; color: var(--fg-muted); margin-top: 4px; } .gallery-card .pill { position: absolute; top: 12px; right: 12px; background: hsl(0 0% 0% / .55); color: white; font-size: 12px; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(8px); } /* ---------- New / edit gallery form ---------- */ .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .swatch-row { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease; } .swatch:hover { transform: scale(1.1); } .swatch.active { border-color: var(--fg); } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; } .chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg-muted); cursor: pointer; font-size: 13px; } .chip.active { background: var(--fg); color: var(--bg-elev); border-color: var(--fg); } /* ---------- Editor view ---------- */ .editor-top { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; } .uploader { border: 2px dashed var(--line); border-radius: var(--radius); padding: 40px 24px; text-align: center; color: var(--fg-muted); transition: background .15s ease, border-color .15s ease; } .uploader.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px; margin-top: 24px; } .media-cell { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--accent-soft); } .media-cell-placeholder { background: linear-gradient(135deg, var(--accent-soft), hsl(var(--hue) 30% 90%)); } .media-cell img, .media-cell video { width: 100%; height: 100%; object-fit: cover; display: block; } .media-cell .actions { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .15s ease; } .media-cell:hover .actions { opacity: 1; } .media-cell .actions button { border: 0; background: hsl(0 0% 0% / .6); color: white; padding: 6px 10px; border-radius: 999px; font-size: 12px; } .media-cell.is-cover { outline: 2px solid var(--accent); outline-offset: 2px; } .media-cell .cover-toggle { position: absolute; left: 6px; top: 6px; background: hsl(0 0% 0% / .55); color: white; border: 0; cursor: pointer; font-size: 11px; padding: 5px 10px; border-radius: 999px; letter-spacing: 0.04em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .15s ease, color .15s ease, transform .1s ease; } .media-cell .cover-toggle:hover { background: hsl(0 0% 0% / .8); transform: scale(1.04); } .media-cell .cover-toggle.active { background: var(--accent); color: white; box-shadow: 0 2px 10px hsl(0 0% 0% / .3); } /* ========================================================= Customer gallery (themed) ========================================================= */ body.themed { background: var(--bg); color: var(--fg); } body.themed.mood-dark { --bg: hsl(var(--hue), 18%, 8%); --bg-elev: hsl(var(--hue), 18%, 12%); --fg: hsl(var(--hue), 10%, 96%); --fg-muted: hsl(var(--hue), 10%, 70%); --line: hsl(var(--hue), 12%, 20%); --accent-soft: hsl(var(--hue), 30%, 18%); } body.themed.mood-sepia { --bg: #f7f1e6; --bg-elev: #fbf6eb; --fg: #3b2a1c; --fg-muted: #7a6a55; --line: #e6d9bf; --accent-soft: #efe3cc; } body.themed.mood-noir { --bg: #0a0a0a; --bg-elev: #111; --fg: #f0f0f0; --fg-muted: #aaa; --line: #2a2a2a; --accent-soft: #1a1a1a; --accent: #fff; } body.themed.font-serif { --font: var(--font-serif); } body.themed.font-sans { --font: var(--font-sans); } body.themed.font-mono { --font: var(--font-mono); } .cust-hero { position: relative; min-height: 90dvh; display: grid; place-items: center; text-align: center; padding: 40px 24px; overflow: hidden; } .cust-hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.78); } .cust-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--bg) 100%); pointer-events: none; } .cust-hero .inner { position: relative; z-index: 2; color: white; max-width: 800px; text-shadow: 0 2px 30px hsl(0 0% 0% / .5); } .cust-hero .eyebrow { color: white; font-size: 16px; text-shadow: 0 2px 8px hsl(0 0% 0% / .7); } .cust-hero h1 { font-family: var(--font); font-weight: 400; font-size: clamp(48px, 9vw, 120px); letter-spacing: -0.02em; margin-top: 20px; } .cust-hero .for { margin-top: 16px; font-style: italic; font-size: 20px; opacity: .9; } .cust-hero .scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; color: white; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; animation: bob 2s ease-in-out infinite; text-shadow: 0 2px 8px hsl(0 0% 0% / .7); } @keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } .cust-body { padding: 80px 24px 120px; max-width: 1400px; margin: 0 auto; } .cust-body h2.section { font-family: var(--font); font-weight: 400; font-size: 28px; margin: 0 0 32px; color: var(--fg-muted); display: flex; align-items: center; gap: 14px; } .cust-body h2.section::before, .cust-body h2.section::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Layout variants */ .layout-masonry { columns: 3 320px; column-gap: 14px; } .layout-masonry .item { break-inside: avoid; margin: 0 0 14px; } .layout-masonry .item img, .layout-masonry .item video { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); } .layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; } .layout-grid .item { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); } .layout-grid .item img, .layout-grid .item video { width: 100%; height: 100%; object-fit: cover; } .layout-cinema { display: grid; gap: 28px; max-width: 1100px; margin: 0 auto; } .layout-cinema .item img, .layout-cinema .item video { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow-2); } .layout-filmstrip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory; } .layout-filmstrip .item { flex: 0 0 70%; max-width: 700px; scroll-snap-align: center; } .layout-filmstrip .item img, .layout-filmstrip .item video { width: 100%; height: 75dvh; object-fit: cover; border-radius: var(--radius); } .item { position: relative; cursor: zoom-in; } /* Skip rendering off-screen items entirely — massive win for 500+ image galleries. */ .layout-grid .item, .layout-magazine .item, .layout-cinema .item { content-visibility: auto; contain-intrinsic-size: 320px 320px; } .layout-filmstrip .item { content-visibility: auto; contain-intrinsic-size: 700px 75dvh; } .item.favorited::after { content: "♥"; position: absolute; top: 10px; right: 12px; color: var(--accent); font-size: 22px; text-shadow: 0 0 6px hsl(0 0% 0% / .5); pointer-events: none; } .item.favorited { box-shadow: inset 0 0 0 3px var(--accent); border-radius: var(--radius-sm); } .item .vid-badge { position: absolute; left: 10px; bottom: 10px; background: hsl(0 0% 0% / .6); color: white; padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } /* ---------- Lightbox ---------- */ .lb { position: fixed; inset: 0; z-index: 100; background: hsl(0 0% 0% / .92); display: none; grid-template-rows: 1fr auto; width: 100vw; touch-action: none; overscroll-behavior: contain; } .lb.open { display: grid; } .lb .stage { display: grid; place-items: center; padding: 16px; overflow: hidden; } .lb .stage img, .lb .stage video { max-width: 92vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 30px 80px hsl(0 0% 0% / .6); margin: 0 auto; } .lb .bar { display: flex; align-items: center; gap: 14px; padding: 16px 24px; color: white; background: linear-gradient(to top, hsl(0 0% 0% / .8), transparent); } .lb .bar .spacer { flex: 1; } .lb .iconbtn { background: hsl(0 0% 100% / .1); color: white; border: 0; padding: 10px 14px; border-radius: 999px; font-size: 16px; white-space: nowrap; text-decoration: none; } .lb .iconbtn:hover { background: hsl(0 0% 100% / .2); } .lb .nav { position: absolute; top: 50%; transform: translateY(-50%); background: hsl(0 0% 100% / .1); color: white; border: 0; width: 50px; height: 50px; border-radius: 50%; font-size: 22px; cursor: pointer; display: grid; place-items: center; } .lb .nav.prev { left: 12px; } .lb .nav.next { right: 12px; } @media (max-width: 600px) { .lb .nav { width: 36px; height: 36px; font-size: 18px; } .lb .nav.prev { left: 4px; } .lb .nav.next { right: 4px; } .lb .stage { padding: 4px; } .lb .stage img, .lb .stage video { max-width: 100%; max-height: 82vh; border-radius: 4px; } .lb .bar { padding: 10px 12px; gap: 10px; font-size: 12px; } .lb .iconbtn { padding: 8px 12px; font-size: 16px; } } /* ---------- Unlock screen ---------- */ .unlock { min-height: 100dvh; display: grid; place-items: center; padding: 40px 20px; text-align: center; } .unlock .card { max-width: 420px; width: 100%; } .unlock h1 { font-family: var(--font); font-size: 38px; margin-bottom: 6px; } /* ========================================================= Cookie consent banner ========================================================= */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-2); animation: pop .35s cubic-bezier(.2,.9,.3,1.2); } .cookie-inner { max-width: 1080px; margin: 0 auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .cookie-inner p { margin: 0; flex: 1; min-width: 240px; font-size: 13px; color: var(--fg-muted); } .cookie-inner a { color: var(--accent); } .cookie-actions { display: flex; gap: 8px; } .cookie-actions .btn { padding: 8px 16px; font-size: 13px; } /* ========================================================= Unverified-email banner ========================================================= */ .banner { background: hsl(45, 100%, 92%); color: hsl(35, 60%, 25%); border: 1px solid hsl(45, 80%, 75%); border-radius: 12px; padding: 12px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; font-size: 14px; } .banner.banner-danger { background: hsl(0 80% 96%); color: hsl(0 60% 30%); border-color: hsl(0 70% 80%); } .banner .spacer { flex: 1; } .banner button { background: transparent; border: 1px solid currentColor; color: inherit; padding: 6px 12px; border-radius: 999px; font-size: 13px; } /* ---------- Welcome message ---------- */ .welcome-message { margin: 0 0 40px; padding: 22px 28px; border-left: 3px solid var(--accent); background: hsl(var(--hue) 30% 96% / .5); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-serif, Georgia, serif); font-size: 17px; line-height: 1.6; color: var(--fg); font-style: italic; } .mood-dark .welcome-message, .mood-noir .welcome-message { background: hsl(var(--hue) 20% 12% / .6); } .welcome-message p { margin: 0 0 8px; } .welcome-message p:last-child { margin: 0; } /* ---------- Watermark for free-tier galleries ---------- */ body.with-watermark .item { position: relative; } body.with-watermark .item img, body.with-watermark .item video { position: relative; } body.with-watermark .item::before { content: var(--wm-text, ""); position: absolute; inset: 0; display: grid; place-items: center; color: hsl(0 0% 100% / .22); font: 600 14px/1 system-ui, sans-serif; letter-spacing: 0.15em; text-transform: uppercase; transform: rotate(-22deg); pointer-events: none; z-index: 2; text-shadow: 0 1px 2px hsl(0 0% 0% / .35); } /* ---------- Slideshow layout ---------- */ .layout-slideshow { position: relative; max-width: 1200px; margin: 0 auto; background: hsl(0 0% 0% / .04); border-radius: var(--radius); overflow: hidden; } .mood-dark .layout-slideshow, .mood-noir .layout-slideshow { background: hsl(0 0% 100% / .04); } .layout-slideshow .ss-stage { display: grid; place-items: center; min-height: 60dvh; padding: 24px; } .layout-slideshow .ss-stage img, .layout-slideshow .ss-stage video { max-width: 100%; max-height: 75dvh; border-radius: var(--radius-sm); cursor: zoom-in; box-shadow: 0 20px 60px hsl(0 0% 0% / .25); } .layout-slideshow .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: hsl(0 0% 0% / .5); color: white; border: 0; font-size: 24px; cursor: pointer; } .layout-slideshow .nav.prev { left: 12px; } .layout-slideshow .nav.next { right: 12px; } .layout-slideshow .ss-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid hsl(0 0% 0% / .08); font-size: 13px; color: var(--fg-muted); } .layout-slideshow .ss-bar .spacer { flex: 1; } .layout-slideshow .ss-counter { font-variant-numeric: tabular-nums; } /* ---------- Magazine layout (asymmetric grid) ---------- */ .layout-magazine { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense; gap: 12px; } .layout-magazine .item { overflow: hidden; border-radius: var(--radius-sm); } .layout-magazine .item img, .layout-magazine .item video { width: 100%; height: 100%; object-fit: cover; display: block; } .layout-magazine .item.span-2w { grid-column: span 2; } .layout-magazine .item.span-2h { grid-row: span 2; } .layout-magazine .item.span-2x2 { grid-column: span 2; grid-row: span 2; } @media (max-width: 800px) { .layout-magazine { grid-template-columns: repeat(2, 1fr); } .layout-magazine .item.span-2x2, .layout-magazine .item.span-2w { grid-column: span 2; } } /* ---------- Public photographer profile ---------- */ .profile-hero { position: relative; padding: 80px 24px 56px; background: linear-gradient(180deg, hsl(var(--hue) 50% 96%), transparent); text-align: center; } .mood-dark .profile-hero, .mood-noir .profile-hero { background: linear-gradient(180deg, hsl(var(--hue) 30% 12%), transparent); } .profile-avatar { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; margin: 0 auto 22px; box-shadow: 0 12px 40px hsl(0 0% 0% / .15); background: hsl(var(--hue) 30% 90%); } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--accent); font: 700 48px/1 system-ui, sans-serif; text-transform: uppercase; } .profile-hero h1 { margin: 0 0 8px; font-family: var(--font-serif, Georgia, serif); font-size: clamp(28px, 4vw, 44px); } .profile-body { max-width: 640px; margin: 0 auto; color: var(--fg-muted); font-size: 16px; line-height: 1.6; } .profile-grid { max-width: 1200px; margin: 0 auto; padding: 40px 24px 100px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 18px; } .profile-card { display: block; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .profile-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px hsl(0 0% 0% / .12); } .profile-card .cover { aspect-ratio: 4 / 3; background: hsl(var(--hue) 20% 90%) center/cover no-repeat; } .profile-card .meta { padding: 14px 16px; } .profile-card .meta h3 { margin: 0 0 4px; font-size: 17px; } .profile-card .meta .sub { color: var(--fg-muted); font-size: 13px; } .danger-card { border-color: hsl(0, 70%, 80%); } /* ========================================================= Site-wide dark-mode overrides These are only the rules that hard-code light colors. Everything else automatically rederives from the --bg / --bg-elev / --fg / --line CSS vars defined in :root. ========================================================= */ /* Sticky header is translucent — switch to dark base when site is dark. */ :root[data-theme="dark"] .app-header { background: hsl(var(--hue) 18% 12% / 0.72); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-header { background: hsl(var(--hue) 18% 12% / 0.72); } } /* Hero glow on landing — light hues blow out on dark backgrounds. */ :root[data-theme="dark"] .hero::before { background: radial-gradient(60% 50% at 20% 20%, hsl(var(--hue) 80% 30% / .55), transparent 60%), radial-gradient(50% 40% at 80% 30%, hsl(calc(var(--hue) + 40) 80% 30% / .45), transparent 60%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::before { background: radial-gradient(60% 50% at 20% 20%, hsl(var(--hue) 80% 30% / .55), transparent 60%), radial-gradient(50% 40% at 80% 30%, hsl(calc(var(--hue) + 40) 80% 30% / .45), transparent 60%); } } /* Auth pages have a soft top glow; tone it down for dark. */ :root[data-theme="dark"] .auth-shell { background: radial-gradient(60% 40% at 50% 0%, hsl(var(--hue) 60% 22%), transparent 70%), var(--bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-shell { background: radial-gradient(60% 40% at 50% 0%, hsl(var(--hue) 60% 22%), transparent 70%), var(--bg); } } /* Comparison-table feature checks. */ :root[data-theme="dark"] .plan-features li.yes::before { background-color: hsl(140 30% 22%); border-color: hsl(140 50% 45%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.5 L4 8 L8.5 2.5' fill='none' stroke='hsl(140,70%25,75%25)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .plan-features li.no::before { background-color: hsl(0 0% 22%); border-color: hsl(0 0% 35%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5 L7.5 7.5 M7.5 2.5 L2.5 7.5' fill='none' stroke='hsl(0,0%25,60%25)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-features li.yes::before { background-color: hsl(140 30% 22%); border-color: hsl(140 50% 45%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.5 L4 8 L8.5 2.5' fill='none' stroke='hsl(140,70%25,75%25)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :root:not([data-theme="light"]) .plan-features li.no::before { background-color: hsl(0 0% 22%); border-color: hsl(0 0% 35%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5 L7.5 7.5 M7.5 2.5 L2.5 7.5' fill='none' stroke='hsl(0,0%25,60%25)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } } /* Notification banners. */ :root[data-theme="dark"] .banner { background: hsl(45 60% 18%); color: hsl(45 80% 80%); border-color: hsl(45 50% 35%); } :root[data-theme="dark"] .banner.banner-danger { background: hsl(0 50% 18%); color: hsl(0 80% 85%); border-color: hsl(0 50% 40%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner { background: hsl(45 60% 18%); color: hsl(45 80% 80%); border-color: hsl(45 50% 35%); } :root:not([data-theme="light"]) .banner.banner-danger { background: hsl(0 50% 18%); color: hsl(0 80% 85%); border-color: hsl(0 50% 40%); } } /* Cookie banner contrast. */ :root[data-theme="dark"] .cookie-banner { box-shadow: 0 8px 24px hsl(0 0% 0% / .55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cookie-banner { box-shadow: 0 8px 24px hsl(0 0% 0% / .55); } } /* Danger card border on the profile page. */ :root[data-theme="dark"] .danger-card { border-color: hsl(0 50% 40%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .danger-card { border-color: hsl(0 50% 40%); } } /* Profile card cover placeholder. */ :root[data-theme="dark"] .profile-card .cover { background-color: hsl(var(--hue) 18% 18%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .profile-card .cover { background-color: hsl(var(--hue) 18% 18%); } } /* Editor placeholder cells. */ :root[data-theme="dark"] .media-cell-placeholder { background: linear-gradient(135deg, hsl(var(--hue) 30% 18%), hsl(var(--hue) 20% 12%)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .media-cell-placeholder { background: linear-gradient(135deg, hsl(var(--hue) 30% 18%), hsl(var(--hue) 20% 12%)); } } /* The customer gallery has its own per-gallery `mood-*` classes — that's the photographer's chosen mood, source of truth. Don't apply site dark mode there. */ body.themed { color-scheme: normal; } /* The floating site-wide theme toggle would clash with the photographer's branded customer gallery, so hide it there. */ body.themed #theme-toggle { display: none !important; } /* Language toggle (floating, next to theme toggle) */ #lang-toggle { font-family: var(--font-sans); } @media (max-width: 600px) { .app-header .inner { gap: 8px; padding: 10px 14px; } .app-header .btn { padding: 8px 12px; font-size: 12px; } .brand { font-size: 18px; } .brand-mark { width: 22px; height: 22px; } }