/* Giollia theme: dark, minimal, square. Layered on Bootstrap 5.3 running with data-bs-theme="dark" (set on in both layouts). Colour tokens live in :root; Bootstrap's radius tokens are zeroed so every component, forms and alerts included, gets sharp corners. Media queries stay at the END of this file: same-specificity rules placed after them silently win and the breakpoint stops working. */ :root, [data-bs-theme="dark"] { --bg: #0a0a0b; --surface: #111113; --surface-2: #17171a; --line: #232328; --line-strong: #3a3a41; --text: #ededef; --muted: #9a9aa3; /* secondary text; AA on --bg and --surface */ --faint: #6b6b73; /* decorative only (dividers, code comments); not for body text */ --accent: #dc143c; /* crimson, the single accent: markers, focus, active states (non-text, 3:1+) */ --accent-text: #ff4d6d; /* brighter crimson for small accent-coloured text (AA on --bg) */ --success: #4ade80; --danger: #f87171; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-emphasis-color: #fff; --bs-border-color: var(--line); --bs-link-color: var(--text); --bs-link-color-rgb: 237, 237, 239; --bs-link-hover-color: #fff; --bs-link-hover-color-rgb: 255, 255, 255; --bs-focus-ring-color: rgba(220, 20, 60, .5); --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; --bs-border-radius-2xl: 0; --bs-border-radius-pill: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } main { flex: 1 0 auto; } ::selection { background: var(--accent); color: #fff; } h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: #fff; font-weight: 600; letter-spacing: -.025em; } a { text-decoration-thickness: 1px; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .muted { color: var(--muted); } .skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; padding: .5rem 1rem; background: #fff; color: #000; } /* ---------- Buttons ---------- */ .btn { font-weight: 500; letter-spacing: -.005em; } .btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1rem; } /* Primary: solid white, inverts to an outline on hover. */ .btn-accent { --bs-btn-color: var(--bg); --bs-btn-bg: var(--text); --bs-btn-border-color: var(--text); --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--text); --bs-btn-active-color: var(--bg); --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff; --bs-btn-disabled-color: var(--bg); --bs-btn-disabled-bg: var(--text); --bs-btn-disabled-border-color: var(--text); --bs-btn-focus-shadow-rgb: 220, 20, 60; } .btn-outline-light { --bs-btn-color: var(--text); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-color: var(--bg); --bs-btn-hover-bg: var(--text); --bs-btn-hover-border-color: var(--text); --bs-btn-active-color: var(--bg); --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 1030; background: rgba(10, 10, 11, .82); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); } .site-header .navbar { padding-block: .9rem; } .brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; } .brand:hover { color: #fff; } /* The animated logo's 640x220 canvas is mostly padding. Its artwork, including the cursor overshooting right of the last letter and dipping below the baseline on its way back, stays inside x 122-535, y 66-182. Crop to that box with an overflow window rather than editing the SVG, which carries a signed provenance manifest. */ .brand-logo { position: relative; display: block; height: 2.5rem; aspect-ratio: 413 / 116; overflow: hidden; } .brand-logo img { position: absolute; top: calc(100% * -66 / 116); left: calc(100% * -122 / 413); width: calc(100% * 640 / 413); max-width: none; height: auto; } .footer-brand { display: inline-block; } .footer-logo { display: block; width: auto; height: 1.75rem; } .admin-logo { display: block; width: auto; height: 1.5rem; } .site-header .nav-link { color: var(--muted); font-size: .925rem; } .site-header .nav-link:hover, .site-header .nav-link[aria-current="page"] { color: #fff; } .site-header .nav-link[aria-current="page"] { box-shadow: inset 0 -1px 0 #fff; } .navbar-toggler { border-color: var(--line-strong); } /* ---------- Sections ---------- */ .section { padding-block: 6rem; } .section + .section:not(.pt-0) { border-top: 1px solid var(--line); } .section-head { max-width: 40rem; margin-bottom: 3rem; } .section-title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -.035em; margin-bottom: .75rem; } .section-lead { color: var(--muted); font-size: 1.05rem; } /* Small square marker + mono label. inline-flex so it still centres in text-center blocks. */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .eyebrow::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; background: var(--accent); } .link-arrow { display: inline-block; margin-top: 2.5rem; padding-bottom: .15rem; border-bottom: 1px solid var(--line-strong); color: var(--text); font-weight: 500; text-decoration: none; } .link-arrow:hover { border-color: #fff; color: #fff; } /* ---------- Hero ---------- */ /* Faint grid that fades out towards the edges (top layer is the fade). */ .hero { padding-block: 7rem 7.5rem; border-bottom: 1px solid var(--line); background-color: var(--bg); background-image: radial-gradient(ellipse 80% 70% at 70% 20%, transparent 0%, var(--bg) 75%), linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 100% 100%, 56px 56px, 56px 56px; } .hero-title { color: #fff; font-size: clamp(2.4rem, 1.3rem + 4vw, 4.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; } .text-dim { color: var(--muted); } .hero-lead { max-width: 36rem; margin-top: 1.5rem; color: var(--muted); font-size: 1.125rem; line-height: 1.65; } .code-card { background: var(--surface); border: 1px solid var(--line); } .code-card-bar { display: flex; align-items: center; gap: .4rem; padding: .65rem 1rem; border-bottom: 1px solid var(--line); } .code-card-bar span { width: .5rem; height: .5rem; background: var(--line-strong); } .code-card-bar em { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; font-style: normal; color: var(--faint); } .code-card pre { margin: 0; padding: 1.5rem; overflow-x: auto; font-family: var(--font-mono); font-size: .82rem; line-height: 1.75; color: var(--muted); } .tok-k { color: var(--accent-text); } .tok-t { color: #fff; } .tok-m { color: #d4d4d8; } .tok-c { color: var(--faint); } /* ---------- Page hero ---------- */ .page-hero { padding-block: 5rem 4rem; border-bottom: 1px solid var(--line); } .page-hero h1 { color: #fff; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; } .page-hero-tall { padding-block: 8rem; border-bottom: 0; } .lead-muted { max-width: 40rem; color: var(--muted); font-size: 1.1rem; } .lead-muted code { color: var(--text); } .crumbs { --bs-breadcrumb-divider-color: var(--faint); --bs-breadcrumb-item-active-color: var(--muted); margin-bottom: 1.25rem; font-family: var(--font-mono); font-size: .8rem; } .crumbs a { color: var(--text); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } /* ---------- CTA ---------- */ .cta-band { padding: 4.5rem 2rem; border: 1px solid var(--line); background: var(--surface); text-align: center; } .cta-band h2 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing: -.035em; } .cta-band p { max-width: 34rem; margin: .75rem auto 2rem; color: var(--muted); font-size: 1.05rem; } /* ---------- Cards ---------- */ .service-card, .project-card, .side-card, .auth-card, .service-list, .contact-form { background: var(--surface); border: 1px solid var(--line); } .service-card { padding: 2rem; transition: border-color .2s ease, background-color .2s ease; } .service-card:hover { border-color: var(--line-strong); background: var(--surface-2); } .service-card h3 { margin: 1.5rem 0 .5rem; font-size: 1.05rem; } .service-card p { margin: 0; color: var(--muted); font-size: .95rem; } .icon-badge { display: inline-grid; flex-shrink: 0; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); color: #fff; } .icon-badge svg { width: 1.25rem; height: 1.25rem; } .project-card { position: relative; display: flex; flex-direction: column; transition: border-color .2s ease; } .project-card:hover { border-color: var(--line-strong); } .project-thumb { display: grid; place-items: center; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); background-color: var(--surface-2); background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 24px 24px; } .project-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); transition: filter .3s ease, transform .4s ease; } .project-card:hover .project-thumb img { filter: none; transform: scale(1.02); } .project-thumb span { color: #fff; font-family: var(--font-mono); font-size: 3rem; font-weight: 500; } .project-body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; } .project-body > p { color: var(--muted); font-size: .95rem; } .project-client { margin-bottom: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .project-title { margin-bottom: .5rem; font-size: 1.15rem; } .project-title a { color: #fff; text-decoration: none; } .project-title a::after { content: ""; position: absolute; inset: 0; } .project-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .project-title a:focus-visible { outline: none; } .tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding: 0; list-style: none; } .tag { display: inline-block; padding: .2rem .5rem; border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--font-mono); font-size: .7rem; text-decoration: none; } .tag-link:hover { border-color: #fff; color: #fff; } .tag-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; } .filter-pill { padding: .45rem .9rem; border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--font-mono); font-size: .8rem; text-decoration: none; } .filter-pill:hover { border-color: #fff; color: #fff; } .filter-pill[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--bg); } /* Process steps: open columns with a top rule rather than boxed cards. */ .step-card { height: 100%; padding-top: 1.75rem; border-top: 1px solid var(--line-strong); } .step-num { font-family: var(--font-mono); font-size: .8rem; color: var(--accent-text); } .step-card h3 { margin: .75rem 0 .5rem; font-size: 1.05rem; } .step-card p { margin: 0; color: var(--muted); font-size: .95rem; } /* ---------- Services page ---------- */ .service-row { display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; padding: 2.5rem; } .service-row + .service-row { border-top: 1px solid var(--line); } .check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .5rem 1.5rem; margin: 1.25rem 0 0; padding: 0; font-size: .95rem; list-style: none; } .check-list-single { grid-template-columns: 1fr; margin: 0; } .check-list li { position: relative; padding-left: 1.25rem; } .check-list li::before { content: ""; position: absolute; top: .6rem; left: 0; width: 5px; height: 5px; background: var(--accent); } /* ---------- Project details ---------- */ .project-meta { display: flex; flex-wrap: wrap; gap: 1.5rem 3.5rem; margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); } .project-meta dt { font-family: var(--font-mono); font-size: .7rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .project-meta dd { margin: .35rem 0 0; color: #fff; } .project-hero-img { width: 100%; margin-bottom: 3rem; border: 1px solid var(--line); } .prose { max-width: 44rem; color: #d4d4d8; font-size: 1.075rem; line-height: 1.8; } .prose p { margin-bottom: 1.5rem; white-space: pre-line; } .side-card { padding: 1.75rem; } .side-card + .side-card { margin-top: 1.25rem; } .side-heading { margin-bottom: 1.25rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .side-card .tag-list { margin: 0; } .side-card-dark { background: var(--surface-2); border-color: var(--line-strong); } .side-card-dark h2 { color: #fff; font-size: 1.2rem; letter-spacing: -.02em; } .side-card-dark p { color: var(--muted); } .highlights { margin-top: 3.5rem; } .highlight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .75rem; } .highlight { padding: 1.5rem; border: 1px solid var(--line); background: var(--surface); } .highlight h3 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .5rem; font-size: 1rem; } .highlight h3::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; background: var(--accent); transform: translateY(-.1em); } .highlight p { margin: 0; color: var(--muted); font-size: .925rem; line-height: 1.6; } /* Service cards and rows link to each service's own page. On the home page the title link stretches over the whole card, like project cards. */ .service-card { position: relative; } .service-card h3 a { color: #fff; text-decoration: none; } .service-card h3 a::after { content: ""; position: absolute; inset: 0; } .service-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .service-card h3 a:focus-visible { outline: none; } .service-link { color: #fff; text-decoration: none; } .service-link:hover { text-decoration: underline; } .side-links li + li { margin-top: .6rem; } .side-links a { color: var(--text); text-decoration: none; } .side-links a:hover { color: #fff; text-decoration: underline; } .footer-location { margin: 1rem 0 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ---------- Forms ---------- */ .contact-form { padding: 2.25rem; } .form-control, .form-select { min-width: 0; background-color: var(--bg); border-color: var(--line-strong); color: var(--text); } .contact-form .form-control, .contact-form .form-select { padding: .75rem .9rem; } .form-control::placeholder { color: var(--muted); opacity: .8; } .form-control:focus, .form-select:focus { background-color: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); } .form-check-input { background-color: var(--bg); border-color: var(--line-strong); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .input-group-text { background: var(--surface-2); border-color: var(--line-strong); color: var(--muted); } .form-label { color: var(--text); font-size: .85rem; font-weight: 500; } .form-text { color: var(--muted); } .optional { color: var(--muted); font-weight: 400; } /* Bootstrap's .text-danger is too dark to read on near-black. */ .field-validation-error { color: var(--danger) !important; } /* Off-screen rather than display:none, so naive bots still see and fill it. */ .hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .form-status.is-success { color: var(--success); font-weight: 500; } .form-status.is-error { color: var(--danger); font-weight: 500; } .next-steps { margin: 1.75rem 0 0; padding: 0; list-style: none; counter-reset: step; } .next-steps li { position: relative; margin-bottom: 1.5rem; padding-left: 3.25rem; counter-increment: step; } .next-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line-strong); color: #fff; font-family: var(--font-mono); font-size: .75rem; } .next-steps strong { display: block; color: #fff; font-weight: 500; } .next-steps span { color: var(--muted); } /* ---------- Auth ---------- */ .auth-card { padding: 2.5rem; } /* The ModelOnly summary renders even with no errors; hide it until it has content. */ .validation-summary-valid { display: none; } /* ---------- Footer ---------- */ .site-footer { padding-block: 4.5rem 2rem; border-top: 1px solid var(--line); color: var(--muted); } .footer-blurb { max-width: 24rem; font-size: .95rem; } .footer-heading { margin-bottom: 1.25rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text); } .footer-links li + li { margin-top: .6rem; } .footer-links a { color: var(--muted); font-size: .95rem; text-decoration: none; } .footer-links a:hover { color: #fff; } .footer-bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .75rem; } /* ---------- Admin ---------- */ .admin-body { background: var(--bg); } .admin-nav { padding-block: .75rem; background: var(--bg); border-bottom: 1px solid var(--line); } .admin-nav .nav-link { color: var(--muted); font-size: .925rem; } .admin-nav .nav-link:hover, .admin-nav .nav-link[aria-current="page"] { color: #fff; } .admin-user { color: var(--muted); font-family: var(--font-mono); font-size: .8rem; } .admin-badge { margin-left: .5rem; padding: .15rem .4rem; border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--font-mono); font-size: .62rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; } .admin-card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); --bs-card-cap-bg: transparent; overflow: hidden; } .admin-card .table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--surface-2); --bs-table-border-color: var(--line); } .admin-card .table thead th { font-family: var(--font-mono); font-size: .7rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .admin-card .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--line); } .admin-card .icon-badge { width: 2.25rem; height: 2.25rem; } .admin-card .icon-badge svg { width: 1.1rem; height: 1.1rem; } .stat-value { color: #fff; font-size: 2.25rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .stat-label { color: var(--muted); font-size: .85rem; } .admin-image-preview { display: block; max-width: min(100%, 18rem); border: 1px solid var(--line); } /* ---------- Media queries: keep last ---------- */ @media (max-width: 991.98px) { .site-header .navbar-collapse { padding-block: 1rem; } .site-header .nav-link[aria-current="page"] { box-shadow: none; } .site-header .btn-accent { margin-top: .75rem; } } @media (max-width: 575.98px) { .section { padding-block: 4rem; } .hero { padding-block: 4.5rem 5rem; } .page-hero { padding-block: 3.5rem 3rem; } .page-hero-tall { padding-block: 5rem; } .contact-form, .auth-card { padding: 1.25rem; } .service-row { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; } .cta-band { padding: 3rem 1.25rem; } .code-card pre { padding: 1.1rem; font-size: .72rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .service-card, .project-card, .project-thumb img { transition: none; } .project-card:hover .project-thumb img { transform: none; } }