/* ========================================================================== Marshall — SilverStripe theme stylesheet Plain-CSS port of the Marshall design system (no React / no build step). Drop this at themes/marshall/css/styles.css and link it from Page.ss. Fonts: add the Adobe Fonts kit (project lfr7pgi) in Page.ss ; the Newsreader / Hanken Grotesk fallbacks below load via @import. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ---------- Tokens ---------- */ :root { /* Green ramp */ --green-950:#071d17; --green-900:#0e3529; --green-800:#14513c; --green-700:#1a6b4b; --green-600:#1f8759; --green-500:#27a468; --green-400:#4fc386; --green-300:#86dbac; --green-200:#bdedd0; --green-100:#def6e7; --green-50:#f2fbf6; /* Ink ramp */ --ink-950:#0a0d0b; --ink-900:#131713; --ink-800:#20241f; --ink-700:#333a34; --ink-600:#4c554e; --ink-500:#6b756d; --ink-400:#939e95; --ink-300:#bcc4bd; --ink-200:#dde2de; --ink-100:#eef1ee; --ink-50:#f8f9f7; --paper-0:#fbfaf6; --paper-1:#ffffff; /* Semantic hues */ --amber-500:#b4791f; --amber-100:#f7e9d2; --red-500:#b8402f; --red-100:#f6dfda; --blue-500:#2f5fa8; --blue-100:#dde7f6; /* Aliases */ --brand-primary:var(--green-700); --brand-primary-hover:var(--green-800); --brand-primary-active:var(--green-900); --brand-on-primary:var(--paper-1); --brand-accent:var(--green-400); --brand-tint:var(--green-100); --surface-page:var(--paper-0); --surface-card:var(--paper-1); --surface-sunken:var(--ink-50); --surface-inverse:var(--ink-950); --text-primary:var(--ink-950); --text-secondary:var(--ink-600); --text-muted:var(--ink-400); --text-on-brand:var(--paper-1); --text-on-inverse:var(--paper-0); --text-link:var(--green-700); --text-link-hover:var(--green-800); --border-subtle:var(--ink-100); --border-default:var(--ink-200); --border-strong:var(--ink-300); --border-brand:var(--green-600); --color-success:var(--green-600); --color-success-tint:var(--green-100); --color-warning:var(--amber-500); --color-warning-tint:var(--amber-100); --color-error:var(--red-500); --color-error-tint:var(--red-100); --color-info:var(--blue-500); --color-info-tint:var(--blue-100); --focus-ring:var(--green-500); /* Type */ --font-display:'canela','Newsreader',Georgia,'Times New Roman',serif; --font-body:'acumin-pro','Hanken Grotesk',system-ui,sans-serif; --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace; --tracking-display:-0.01em; --tracking-caps:0.08em; --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px; --text-xl:21px; --text-2xl:26px; --text-3xl:33px; --text-4xl:42px; --text-5xl:54px; --text-6xl:68px; --leading-tight:1.1; --leading-snug:1.3; --leading-normal:1.55; --leading-relaxed:1.7; /* Space / radius / shadow */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:22px; --radius-full:999px; --shadow-xs:0 1px 2px rgba(10,13,11,.06); --shadow-sm:0 2px 6px rgba(10,13,11,.07); --shadow-md:0 8px 24px rgba(10,13,11,.09); --shadow-lg:0 20px 48px rgba(10,13,11,.14); --shadow-focus:0 0 0 3px rgba(39,164,104,.35); --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1); --duration-fast:120ms; --duration-base:180ms; --content-max:1120px; --content-narrow:760px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing:border-box; } body { margin:0; font-family:var(--font-body); font-size:var(--text-base); color:var(--text-primary); background:var(--surface-page); line-height:var(--leading-normal); -webkit-font-smoothing:antialiased; } a { color:var(--text-link); text-decoration:none; } a:hover { color:var(--text-link-hover); } img { max-width:100%; display:block; } h1,h2,h3,h4 { font-family:var(--font-display); font-weight:500; letter-spacing:var(--tracking-display); line-height:var(--leading-tight); color:var(--text-primary); margin:0; } .container { max-width:var(--content-max); margin:0 auto; padding-left:var(--space-8); padding-right:var(--space-8); } .container--narrow { max-width:var(--content-narrow); margin:0 auto; padding-left:var(--space-8); padding-right:var(--space-8); } .section { padding-top:var(--space-24); padding-bottom:var(--space-24); } .section--sunken { background:var(--surface-sunken); } .kicker { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); } .kicker--brand { color:var(--green-700); } /* ---------- Header ---------- */ .site-header { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:16px var(--space-8); background:rgba(222,246,231,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--green-200); } .site-header__brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:var(--text-xl); color:var(--text-primary); } .site-header__brand img { height:28px; width:28px; mix-blend-mode:multiply; } .site-nav { display:flex; align-items:center; gap:var(--space-8); } .site-nav a { font-size:var(--text-sm); color:var(--text-secondary); } .site-nav a.is-active { color:var(--text-primary); font-weight:600; } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:500; border-radius:var(--radius-md); padding:12px 20px; font-size:var(--text-sm); cursor:pointer; border:1px solid transparent; text-decoration:none; transition:background var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-out), border-color var(--duration-base) var(--ease-standard); } .btn:active { transform:scale(.97); } .btn--sm { padding:8px 14px; } .btn--lg { padding:15px 26px; font-size:var(--text-base); } .btn--primary { background:var(--brand-primary); color:var(--text-on-brand); } .btn--primary:hover { background:var(--brand-primary-hover); color:var(--text-on-brand); } .btn--secondary { background:transparent; color:var(--brand-primary); border-color:var(--border-strong); } .btn--secondary:hover { background:var(--brand-tint); border-color:var(--brand-primary); color:var(--brand-primary); } .btn--ghost { background:transparent; color:var(--text-primary); } .btn--ghost:hover { background:var(--surface-sunken); } /* ---------- Badges ---------- */ .badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-full); background:var(--ink-100); color:var(--ink-700); } .badge--brand { background:var(--brand-tint); color:var(--green-800); } .badge--success { background:var(--color-success-tint); color:var(--green-900); } /* ---------- Cards ---------- */ .card { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-xs); transition:box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .card--lg { padding:var(--space-8); } .card--hover:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); } a .card__title, .card__title { font-size:var(--text-xl); line-height:1.3; margin:0 0 8px; } .card__meta { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); } .card__text { font-size:var(--text-sm); line-height:var(--leading-normal); color:var(--text-secondary); margin:0; } /* ---------- Forms ---------- */ .field { display:flex; flex-direction:column; gap:6px; width:100%; } .field__label { font-size:var(--text-sm); font-weight:500; color:var(--text-primary); } .field__label .req { color:var(--color-error); } .field input, .field textarea { font:inherit; font-size:var(--text-base); padding:11px 14px; border-radius:var(--radius-md); border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-primary); outline:none; transition:border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } .field textarea { resize:vertical; } .field input:focus, .field textarea:focus { border-color:var(--border-brand); box-shadow:var(--shadow-focus); } .form-row { display:flex; gap:var(--space-4); } .form { display:flex; flex-direction:column; gap:var(--space-4); } .form-success { background:var(--color-success-tint); color:var(--green-900); padding:var(--space-6); border-radius:var(--radius-lg); font-weight:500; } /* ---------- Hero / headings ---------- */ .hero { padding:var(--space-32) var(--space-8) var(--space-24); } .hero h1 { font-size:var(--text-6xl); line-height:1.05; margin:0 0 var(--space-6); max-width:900px; text-wrap:balance; } .hero__lead { font-size:var(--text-xl); line-height:var(--leading-normal); color:var(--text-secondary); max-width:620px; margin:0 0 var(--space-8); } .status-pill { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--green-700); background:var(--brand-tint); padding:5px 12px; border-radius:var(--radius-full); margin-bottom:var(--space-6); } .status-pill .dot { width:6px; height:6px; border-radius:50%; background:var(--green-600); } .section-head { margin-bottom:var(--space-8); } .section-head h2 { font-size:var(--text-3xl); line-height:1.2; } .btn-row { display:flex; gap:12px; flex-wrap:wrap; } /* ---------- Grids ---------- */ .grid { display:grid; gap:var(--space-6); } .grid--2 { grid-template-columns:repeat(2,1fr); } .grid--3 { grid-template-columns:repeat(3,1fr); } .split { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-16); align-items:center; } .prose { font-size:var(--text-lg); line-height:var(--leading-relaxed); color:var(--text-secondary); max-width:680px; margin:0 0 18px; } /* ---------- Photo frame ---------- */ .photo { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-md); border:1px solid var(--border-subtle); } .photo img { width:100%; height:100%; object-fit:cover; } /* ---------- Filter ---------- */ .filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--space-8); } .filter a, .filter button { font-family:var(--font-body); font-weight:500; font-size:var(--text-sm); cursor:pointer; padding:7px 14px; border-radius:var(--radius-full); border:1px solid var(--border-default); background:transparent; color:var(--text-secondary); transition:all var(--duration-base) var(--ease-standard); } .filter a.is-active, .filter button.is-active { background:var(--brand-primary); border-color:var(--brand-primary); color:var(--text-on-brand); } /* ---------- Case study ---------- */ .cs-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); padding:var(--space-6) 0; border-top:1px solid var(--border-default); border-bottom:1px solid var(--border-default); } .cs-meta__label { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; } .cs-meta__value { font-size:var(--text-base); color:var(--text-primary); } .cs-figure { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border-subtle); } .cs-figure img { width:100%; display:block; } .cs-figure--hero { display:block; cursor:zoom-in; transition:box-shadow var(--duration-base) var(--ease-standard); } .cs-figure--hero:hover { box-shadow:var(--shadow-md); } /* ---------- Lightbox ---------- */ .lightbox { border:none; padding:0; background:transparent; max-width:none; max-height:none; } .lightbox::backdrop { background:rgba(10,13,11,.8); backdrop-filter:blur(4px); } .lightbox img { max-width:92vw; max-height:92vh; display:block; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); cursor:zoom-out; } .lightbox__close { position:fixed; top:16px; right:20px; font-size:32px; line-height:1; background:transparent; border:none; color:var(--paper-1); cursor:pointer; padding:8px; } .cs-placeholder { aspect-ratio:16/9; background:var(--surface-sunken); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); letter-spacing:var(--tracking-caps); text-transform:uppercase; text-align:center; padding:16px; } .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); margin:var(--space-4) 0 var(--space-8); } .metric__num { font-family:var(--font-display); font-weight:500; font-size:var(--text-4xl); line-height:1; color:var(--brand-primary); letter-spacing:var(--tracking-display); margin-bottom:8px; } .metric__label { font-size:var(--text-sm); line-height:1.4; color:var(--text-secondary); } .next-project { border-top:1px solid var(--border-subtle); } .next-project a { display:flex; justify-content:space-between; align-items:center; padding:var(--space-12) 0; } .next-project__title { font-family:var(--font-display); font-weight:500; font-size:var(--text-2xl); color:var(--text-primary); } /* ---------- Skills ---------- */ .skill-group__title { margin-bottom:14px; } .tag-row { display:flex; flex-wrap:wrap; gap:8px; } /* ---------- Footer ---------- */ .site-footer { border-top:1px solid var(--border-subtle); background:var(--surface-page); } .site-footer__inner { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--space-8); padding-top:var(--space-12); padding-bottom:var(--space-12); } .site-footer__cta { font-family:var(--font-display); font-weight:600; font-size:var(--text-2xl); margin-bottom:8px; } .site-footer__links { display:flex; gap:20px; margin-bottom:10px; justify-content:flex-end; } .site-footer__links a { font-size:var(--text-sm); color:var(--text-secondary); } .site-footer__copy { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); } /* ---------- CMS editor images ($Content / rich text) ---------- Classes emitted by the TinyMCE image dialog: alignment floats and the .captionImage wrapper. Keep global — they appear inside .prose and blocks. */ img.left { float:left; margin:0 var(--space-8) var(--space-8) 0; } img.right { float:right; margin:0 0 var(--space-8) var(--space-8); clear:none; } img.center { margin:var(--space-8) auto; } img.rightAlone { float:right; margin:var(--space-8) 0; clear:both; } img.leftAlone { margin:var(--space-8) 0; } img + .caption { position:relative; top:-1.5rem; } .caption.leftAlone, .caption.left { text-align:left; } .caption.rightAlone, .caption.right { text-align:right; } .caption.center { text-align:center; } .captionImage { max-width:100%; } .captionImage.left { float:left; margin:0 var(--space-8) var(--space-6) 0; } .captionImage.right { float:right; margin:0 0 var(--space-6) var(--space-8); } .captionImage.leftAlone { float:left; clear:both; margin:0 100% var(--space-6) 0; } .captionImage.rightAlone { float:right; clear:both; margin:0 0 var(--space-6) 100%; } .captionImage.center { margin:0 auto var(--space-5); } .captionImage img { margin:0; } .captionImage p { clear:both; margin:6px 0 0; font-size:var(--text-sm); font-style:italic; color:var(--text-muted); line-height:var(--leading-snug); } .captionImage p.caption.text-center { text-align:center; } .captionImage p.caption.text-left { text-align:left; } .prose::after { content:""; display:table; clear:both; } /* ---------- Elemental blocks ---------- */ .element { margin:0 0 var(--space-12); } .element:last-child { margin-bottom:0; } /* Image block widths */ .img-block--normal { max-width:var(--content-narrow); margin:0 auto; padding:0 var(--space-8); } .img-block--wide { max-width:var(--content-max); margin:0 auto; padding:0 var(--space-8); } .img-block--full { width:100%; } .img-block--full .cs-figure { border-radius:0; border-left:none; border-right:none; } .img-block__figure { margin:0; } .img-block__figure img { width:100%; } .img-caption { font-size:var(--text-sm); font-style:italic; color:var(--text-muted); line-height:var(--leading-snug); margin-top:10px; } .img-block--full .img-caption { padding:0 var(--space-8); max-width:var(--content-max); margin-left:auto; margin-right:auto; } /* Gallery block */ .gallery__title { font-size:var(--text-2xl); margin-bottom:var(--space-6); } .gallery figure, .gallery__item { margin:0; } .grid--4 { grid-template-columns:repeat(4,1fr); } /* Image + text block */ .split--media { grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:start; } .split--media .prose { margin-bottom:0; } .split__figure { margin:0; } .split--media-right .split__figure { order:2; } /* ---------- Card thumbnails (Work listing) ---------- */ .card__thumb { margin:calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-5); border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; border-bottom:1px solid var(--border-subtle); } .card__thumb img { width:100%; display:block; } /* ---------- Resume timeline ---------- */ .timeline { border-left:2px solid var(--border-default); padding-left:var(--space-8); } .timeline__item { position:relative; padding-bottom:var(--space-10); } .timeline__item:last-child { padding-bottom:0; } .timeline__item::before { content:""; position:absolute; left:calc(var(--space-8) * -1 - 7px); top:6px; width:12px; height:12px; border-radius:50%; background:var(--brand-primary); border:2px solid var(--surface-page); } .section--sunken .timeline__item::before { border-color:var(--surface-sunken); } .timeline__date { margin-bottom:6px; } .timeline__role { font-size:var(--text-xl); margin-bottom:4px; } .timeline__meta { font-size:var(--text-sm); color:var(--text-secondary); margin-bottom:10px; } .timeline__desc { font-size:var(--text-base); margin-bottom:0; } /* ---------- Responsive ---------- */ @media (max-width:900px) { .grid--2, .grid--3, .grid--4, .metrics, .cs-meta { grid-template-columns:1fr; } .split, .split--media { grid-template-columns:1fr; gap:var(--space-8); } .split--media-right .split__figure { order:0; } .hero h1 { font-size:var(--text-5xl); } .form-row { flex-direction:column; } .captionImage.left, .captionImage.right, img.left, img.right { float:none; margin:var(--space-6) 0; } .timeline { padding-left:var(--space-5); } .timeline__item::before { left:calc(var(--space-5) * -1 - 7px); } }