/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #110a05 #332822 #f8f1e7 #7c4527 #9b5837 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f8f1e7; --surface: #fcf9f4; --surface-2: #ece5dc; --border: #d8d1c7; --border-strong: #b3aca3; --ink: #332822; --muted: #6e6560; --accent: #7c4527; --accent-hover: #693b21; --accent-ink: #ffffff; --accent-text: #9b5837; --accent-strong: #7c4527; --accent-soft: #e7d9cc; --accent-border: #c0a491; --success: #15803d; --success-ink: #ffffff; --success-soft: #dde3d3; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f0decc; --warning-strong: #994607; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f0d7cf; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #110a05; --surface: #29231e; --surface-2: #1d1612; --border: #322c28; --border-strong: #585450; --ink: #f8f1e7; --muted: #9c958d; --accent: #7c4527; --accent-hover: #906147; --accent-ink: #ffffff; --accent-text: #a17b64; --accent-strong: #a17b64; --accent-soft: #29170c; --accent-border: #412514; --success: #15803d; --success-ink: #ffffff; --success-soft: #122411; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #351a06; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #360e0a; --danger-strong: #d16969; } /* ==================================================================== * app.css — Paper & Light. Editorial: warm paper ground, generous * margins, hairline rules, full-bleed photography. No serif face exists * on this platform (only --font-sans and --font-mono are self-hosted), * so the "magazine" feel comes from scale, tight tracking on display * type, a monospace byline/eyebrow treatment, and thin rule lines * instead of a second typeface. * ==================================================================== */ :root { /* Crisp, printed-page corners rather than soft app-UI ones. */ --radius-sm: 3px; --radius: 4px; --radius-lg: 8px; /* A wider canvas for a magazine-style grid. */ --content-max: 1240px; --measure: 70ch; /* Slightly more deliberate motion. */ --dur-2: 260ms; } /* ---- editorial primitives ------------------------------------------- */ .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--s-2); } .page-title { letter-spacing: -0.01em; } .prose p + p { margin-top: var(--s-4); } .btn-light { background: var(--surface); color: var(--ink); border: 1px solid var(--border); } .btn-light:hover { background: var(--surface-2); } /* ---- site footer ------------------------------------------------------ */ .site-foot { border-top: 1px solid var(--border); margin-top: var(--s-12, 64px); } .site-foot-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--s-8) var(--s-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); } .site-foot-name { font-weight: var(--fw-semi, 600); letter-spacing: -0.01em; } .site-foot-nav { display: flex; gap: var(--s-5); flex-wrap: wrap; } .site-foot-nav a { color: var(--muted); font-size: var(--t-sm); text-decoration: none; } .site-foot-nav a:hover { color: var(--ink); } .site-foot-note { width: 100%; color: var(--muted); font-size: var(--t-xs); margin: 0; } /* ---- hero -------------------------------------------------------------- */ .hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; /* Sits over a photograph with its own dark scrim, not an --accent surface, so it takes --canvas rather than --accent-ink: pale in light mode against the darkened scrim, and the scrim itself follows --ink, so this keeps reading correctly in dark mode too. */ color: var(--canvas); } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in srgb, var(--ink) 78%, transparent) 0%, color-mix(in srgb, var(--ink) 28%, transparent) 55%, color-mix(in srgb, var(--ink) 8%, transparent) 100% ); } .hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--s-10, 56px) var(--s-6) var(--s-10, 56px); } .hero-eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; margin: 0 0 var(--s-3); } .hero-title { font-size: clamp(36px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; font-weight: var(--fw-semi, 600); } .hero-tagline { font-size: var(--t-lg); max-width: 46ch; margin: var(--s-3) 0 0; opacity: 0.92; } @media (max-width: 640px) { .hero { min-height: 64vh; align-items: flex-end; } } /* ---- portfolio grid ----------------------------------------------------- */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-5); } .aspect-portrait { aspect-ratio: 4 / 5; } .portfolio-item { display: block; position: relative; padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--radius); overflow: hidden; text-align: left; } .portfolio-item .media { border-radius: var(--radius); transition: transform var(--dur-2) var(--ease); } .portfolio-item:hover .media, .portfolio-item:focus-visible .media { transform: scale(1.03); } .portfolio-item-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-3) var(--s-4); font-size: var(--t-sm); color: var(--canvas); background: linear-gradient(to top, color-mix(in srgb, var(--ink) 75%, transparent), transparent); opacity: 0; transform: translateY(4px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .portfolio-item:hover .portfolio-item-cap, .portfolio-item:focus-visible .portfolio-item-cap { opacity: 1; transform: translateY(0); } /* ---- lightbox ------------------------------------------------------------ */ .lightbox-modal { max-width: min(92vw, 1100px); width: auto; background: transparent; border: none; box-shadow: none; padding: 0; } .lightbox-modal::backdrop { background: color-mix(in srgb, var(--ink) 82%, transparent); } .lightbox-body { display: flex; flex-direction: column; align-items: center; } .lightbox-body > * + * { margin-top: var(--s-3); } .lightbox-body img { max-width: 100%; max-height: 82vh; border-radius: var(--radius); display: block; } .lightbox-caption { color: var(--canvas); font-size: var(--t-sm); text-align: center; margin: 0; } .lightbox-caption:empty { display: none; } .lightbox-close { position: absolute; top: -44px; right: 0; color: var(--canvas); } /* ---- category cards ------------------------------------------------------ */ .category-card { display: flex; flex-direction: column; padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .category-card > * + * { margin-top: var(--s-1); } .category-card:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: var(--shadow-raised); } .category-card-count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .category-card-name { font-size: var(--t-xl); font-weight: var(--fw-semi, 600); letter-spacing: -0.01em; } .category-card-desc { color: var(--muted); font-size: var(--t-sm); } .category-card-link { margin-top: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-1); color: var(--accent-text); font-size: var(--t-sm); font-weight: var(--fw-medium); } /* ---- CTA band -------------------------------------------------------------- */ .cta-band { margin: var(--s-12, 64px) 0 var(--s-8); padding: var(--s-10, 56px) var(--s-6); border-radius: var(--radius-lg); text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--accent-ink); } .cta-band h2 { margin: 0 0 var(--s-2); font-size: var(--t-2xl); letter-spacing: -0.01em; } .cta-band p { margin: 0 auto var(--s-5); max-width: 56ch; opacity: 0.92; } /* ---- about page ------------------------------------------------------------ */ .about-split { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: var(--s-10, 56px); align-items: start; padding-top: var(--s-4); } .about-portrait { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-2); } .about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-facts { display: flex; flex-direction: column; } .about-facts > * + * { margin-top: var(--s-2); } .about-fact { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--t-sm); } @media (max-width: 760px) { .about-split { grid-template-columns: 1fr; } .about-portrait { max-width: 320px; } } .service-card { border-top: 3px solid var(--accent); } .service-price { font-family: var(--font-mono); font-size: var(--t-xl); color: var(--accent-text); margin: var(--s-1) 0 var(--s-2); } /* ---- contact ---------------------------------------------------------------- */ .contact-card { padding: var(--s-8); } /* ---- admin ------------------------------------------------------------------ */ .admin-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); } .admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin-thumb-wide { width: 100%; max-width: 320px; height: 160px; }