/* Theme Name: Alex Rowe Portfolio Theme URI: https://alexrowe.co Author: Alexander Description: A private, single-page portfolio theme with scroll-reveal animations and modal project detail views. Built for showcasing full-stack development work. Version: 1.0.0 License: GNU General Public License v2 or later Text Domain: alexrowe-portfolio */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { /* ---- Palette: raw brand colors (theme-independent) ---- */ --signal: #E4572E; /* vermilion — interactive accent ONLY */ /* ---- Semantic tokens (LIGHT mode defaults) ---- */ --ink: #14110F; /* primary text */ --paper: #F7F4EF; /* page background */ --slate: #5C6672; /* muted / secondary text */ --line: #E2DCD2; /* hairline rules & borders */ --paper-2:#FFFFFF; /* raised card surface */ /* Inverted section (the "Request access" / About band) */ --surface-invert: #14110F; /* dark band on a light page */ --text-invert: #F7F4EF; /* text on the inverted band */ --text-invert-2: #b8b2a8; /* muted text on the inverted band */ --line-invert: #3a352f; /* borders on the inverted band */ /* Modal panel surface */ --modal-bg: #F7F4EF; /* Per-project accents (overridden per modal via --accent) */ --accent: var(--signal); /* Type */ --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Scale */ --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.33rem, 1.2rem + 0.6vw, 1.6rem); --step-2: clamp(1.9rem, 1.6rem + 1.4vw, 2.8rem); --step-3: clamp(2.6rem, 2rem + 3vw, 4.5rem); --step-4: clamp(3.4rem, 2.4rem + 5vw, 7rem); /* Spacing */ --gap: clamp(1rem, 0.8rem + 1vw, 2rem); --section-y: clamp(4rem, 3rem + 6vw, 9rem); --rail-w: 220px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.7s; } /* ============================================================ DARK MODE Applied when is set (by the toggle, or on first load when the OS prefers dark — see the inline no-flash script in header.php). ============================================================ */ :root[data-theme="dark"] { --ink: #ECE7DF; /* primary text (light on dark) */ --paper: #14120F; /* page background (deep warm charcoal) */ --slate: #9AA0A8; /* muted / secondary text */ --line: #2E2A25; /* hairline rules & borders */ --paper-2:#1E1B17; /* raised card surface */ /* On a dark page, the "inverted" band becomes a lighter raised panel */ --surface-invert: #211D18; --text-invert: #ECE7DF; --text-invert-2: #9AA0A8; --line-invert: #34302A; --modal-bg: #1A1714; } /* Smooth the transition when switching themes (not on first paint) */ :root.theme-ready, :root.theme-ready body, .theme-ready .ar-project__media, .theme-ready .ar-modal__panel, .theme-ready .ar-access, .theme-ready .ar-tag, .theme-ready .ar-btn { transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); } /* ============================================================ THEME TOGGLE ============================================================ */ .ar-theme-toggle { position: fixed; top: clamp(1rem, 2.5vw, 1.75rem); right: clamp(1rem, 2.5vw, 1.75rem); z-index: 90; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 20px -8px rgba(0,0,0,0.25); cursor: pointer; transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .ar-theme-toggle:hover { transform: translateY(-2px) rotate(-12deg); } .ar-theme-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .ar-theme-toggle svg { width: 20px; height: 20px; } /* Show sun in dark mode (tap to go light), moon in light mode (tap to go dark) */ .ar-theme-toggle .icon-sun { display: none; } .ar-theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .ar-theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .ar-theme-toggle .icon-moon { display: none; } /* ============================================================ RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.04; } .ar-container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; } /* ============================================================ HERO ============================================================ */ .ar-hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--section-y); position: relative; } .ar-hero__eyebrow { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem; } .ar-hero__eyebrow::before { content: ""; width: 38px; height: 1px; background: var(--accent); display: inline-block; } .ar-hero__title { font-size: var(--step-4); font-optical-sizing: auto; font-variation-settings: "SOFT" 0, "WONK" 0; letter-spacing: -0.02em; max-width: 16ch; } .ar-hero__title em { font-style: italic; color: var(--accent); font-variation-settings: "SOFT" 80; } .ar-hero__lede { margin-top: 2rem; max-width: 52ch; font-size: var(--step-1); color: var(--slate); line-height: 1.4; } .ar-hero__scroll { margin-top: 3.5rem; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); display: inline-flex; align-items: center; gap: 0.5rem; } .ar-hero__scroll svg { animation: ar-bob 2s var(--ease) infinite; } @keyframes ar-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} } /* ============================================================ LAYOUT: RAIL + WORK ============================================================ */ .ar-work-wrap { display: grid; grid-template-columns: var(--rail-w) 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .ar-rail { position: sticky; top: clamp(2rem, 8vh, 6rem); display: flex; flex-direction: column; gap: 0.2rem; border-left: 1px solid var(--line); padding-left: 1.25rem; } .ar-rail__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); margin-bottom: 1rem; } .ar-rail__item { display: flex; align-items: baseline; gap: 0.65rem; padding: 0.4rem 0; color: var(--slate); font-size: var(--step--1); transition: color 0.3s var(--ease), transform 0.3s var(--ease); text-align: left; width: 100%; } .ar-rail__item .num { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.6; } .ar-rail__item:hover { color: var(--ink); } .ar-rail__item.is-active { color: var(--ink); transform: translateX(4px); } .ar-rail__item.is-active .num { color: var(--accent); opacity: 1; } .ar-rail__item.is-active .name::after { content: ""; display: block; height: 2px; width: 100%; background: var(--accent); margin-top: 2px; transform-origin: left; animation: ar-underline 0.4s var(--ease); } @keyframes ar-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============================================================ PROJECT CARDS ============================================================ */ .ar-projects { display: flex; flex-direction: column; gap: var(--section-y); } .ar-project { scroll-margin-top: 5rem; } .ar-project__index { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); letter-spacing: 0.05em; } .ar-project__eyebrow { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 0.75rem 0 0.75rem; } .ar-project__title { font-size: var(--step-3); letter-spacing: -0.02em; font-optical-sizing: auto; } .ar-project__hook { margin-top: 1rem; max-width: 50ch; font-size: var(--step-1); color: var(--slate); line-height: 1.4; } .ar-project__media { margin-top: 1.75rem; position: relative; border-radius: 14px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); aspect-ratio: 16 / 10; cursor: pointer; } .ar-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } .ar-project__media:hover img { transform: scale(1.04); } .ar-project__media::after { content: "View project"; position: absolute; inset: auto 1rem 1rem auto; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; background: var(--ink); color: var(--paper); padding: 0.5rem 0.85rem; border-radius: 100px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .ar-project__media:hover::after { opacity: 1; transform: translateY(0); } /* Logo-grid card variant (e.g. Freelance — a collection, not one project) */ .ar-project__media--grid { aspect-ratio: 16 / 10; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1px; background: var(--line); padding: 0; } .ar-project__media--grid::after { content: "View all clients"; } .ar-logo-cell { background: #fff; display: grid; place-items: center; padding: clamp(0.9rem, 3vw, 2rem); transition: background 0.4s var(--ease); } .ar-logo-cell img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; object-position: center; margin: auto; transition: transform 0.5s var(--ease); } .ar-project__media--grid:hover .ar-logo-cell { background: #f6f4ef; } .ar-project__media--grid:hover .ar-logo-cell img { transform: scale(1.05); } /* Modal media gallery — figures, captions, GIFs, video */ .ar-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .ar-figure { margin: 0; } .ar-figure img, .ar-figure video { width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; background: var(--paper-2); } .ar-figure figcaption { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--slate); margin-top: 0.5rem; } .ar-figure--video { grid-column: 1 / -1; } .ar-figure--video video { aspect-ratio: 16 / 9; object-fit: contain; /* show full logo poster, don't crop it */ background: #fff; /* white letterbox behind the poster/video */ } .ar-figure--wide { grid-column: 1 / -1; } /* Logo figures: white background, image centered within its own borders */ .ar-figure--logo img { object-fit: contain; object-position: center; background: #fff; padding: 1.25rem; max-height: 160px; } /* Plain media: no border, no background (photos / app screenshots) */ .ar-figure--plain img, .ar-figure--plain video { border: none; background: transparent; border-radius: 12px; } /* The small inline logo block used at the top of each client section */ .ar-modal__img.ar-figure--logo { background: #fff; display: grid; place-items: center; padding: 1.5rem; } .ar-modal__img.ar-figure--logo img { padding: 0; max-height: 110px; width: auto; } /* Plain modal image (no border / no background) */ .ar-modal__img--plain { border: none; background: transparent; } /* Link buttons inside modals (website / app store / social) */ .ar-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0.25rem; } .ar-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; padding: 0.6rem 1rem; border-radius: 100px; border: 1px solid var(--ink); color: var(--ink); background: transparent; transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); } .ar-btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); } .ar-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .ar-btn--primary:hover { filter: brightness(0.92); background: var(--accent); color: #fff; } .ar-btn svg { width: 14px; height: 14px; } /* App Store badge link */ .ar-appstore-link { display: inline-block; transition: transform 0.3s var(--ease); } .ar-appstore-link:hover { transform: translateY(-2px); } .ar-appstore-link img { max-width: 150px; border: none; background: transparent; } /* About / headshot + LinkedIn */ .ar-about { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 2.5rem); flex-wrap: wrap; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.75rem, 4vw, 2.75rem); margin-top: var(--section-y); border-top: 1px solid var(--line-invert); } .ar-about__photo { width: clamp(96px, 14vw, 132px); height: clamp(96px, 14vw, 132px); border-radius: 50%; object-fit: cover; border: 2px solid var(--signal); flex-shrink: 0; } .ar-about__text { flex: 1; min-width: 240px; } .ar-about--no-photo { gap: 0; } .ar-about__name { font-family: var(--font-display); font-size: var(--step-2); color: var(--text-invert); } .ar-about__role { color: var(--text-invert-2); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; margin-top: 0.3rem; } .ar-about__li { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.1rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--text-invert); border: 1px solid var(--line-invert); padding: 0.6rem 1.1rem; border-radius: 100px; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .ar-about__li:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; } .ar-about__li svg { width: 18px; height: 18px; } .ar-project__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .ar-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--slate); border: 1px solid var(--line); padding: 0.3rem 0.7rem; border-radius: 100px; } .ar-project__cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; transition: gap 0.3s var(--ease); } .ar-project__cta:hover { gap: 0.9rem; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; } /* ============================================================ MODAL ============================================================ */ .ar-modal-root { position: fixed; inset: 0; z-index: 100; display: none; } .ar-modal-root.is-open { display: block; } .ar-modal__scrim { position: absolute; inset: 0; background: rgba(20, 17, 15, 0.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.4s var(--ease); } .ar-modal-root.is-open .ar-modal__scrim { opacity: 1; } .ar-modal__panel { position: absolute; inset: 0; margin: auto; width: min(900px, 100% - 2rem); max-height: 90vh; background: var(--modal-bg); border-radius: 18px; overflow-y: auto; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4); transform: scale(0.96) translateY(12px); opacity: 0; transition: transform 0.45s var(--ease), opacity 0.45s var(--ease); } .ar-modal-root.is-open .ar-modal__panel { transform: none; opacity: 1; } .ar-modal__close { position: sticky; top: 1rem; left: 100%; margin: 1rem 1rem 0; width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 50%; z-index: 2; transition: transform 0.3s var(--ease); } .ar-modal__close:hover { transform: rotate(90deg); } .ar-modal__body { padding: 0 clamp(1.5rem, 4vw, 3.5rem) clamp(2rem,4vw,3.5rem); margin-top: -3rem; } .ar-modal__eyebrow { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .ar-modal__title { font-size: var(--step-3); letter-spacing: -0.02em; margin-top: 0.5rem; } .ar-modal__section { margin-top: 2.5rem; } .ar-modal__section h3 { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); font-weight: 500; margin-bottom: 0.75rem; } .ar-modal__section h4 { font-family: var(--font-display); font-size: var(--step-1); margin: 1.75rem 0 0.5rem; } .ar-modal__section p { color: var(--ink); margin: 0 0 1rem; } .ar-modal__section ul { padding-left: 1.1rem; color: var(--ink); } .ar-modal__section li { margin-bottom: 0.5rem; } .ar-modal__img { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin: 1.5rem 0; } .ar-modal__img--app { max-width: 320px; } .ar-modal__appstore { max-width: 160px; margin-top: 1rem; } .ar-modal__divider { height: 1px; background: var(--line); margin: 3rem 0; border: 0; } /* ============================================================ ACCESS / FOOTER ============================================================ */ .ar-access { background: var(--surface-invert); color: var(--text-invert); padding-block: var(--section-y); margin-top: var(--section-y); } .ar-access__title { font-size: var(--step-2); max-width: 18ch; } .ar-access__lede { color: var(--text-invert-2); max-width: 48ch; margin-top: 1rem; font-size: var(--step-1); line-height: 1.4; } .ar-access__form { margin-top: 2.5rem; max-width: 480px; } /* Contact Form 7 normalization */ .ar-access__form input[type="email"], .ar-access__form input[type="text"] { width: 100%; background: transparent; border: 1px solid var(--line-invert); border-radius: 10px; padding: 0.95rem 1.1rem; color: var(--text-invert); font: inherit; margin-bottom: 0.9rem; } .ar-access__form input::placeholder { color: var(--text-invert-2); opacity: 0.7; } .ar-access__form input:focus { outline: 2px solid var(--signal); outline-offset: 1px; } .ar-access__form input[type="submit"] { width: auto; background: var(--signal); color: #fff; border: none; cursor: pointer; font-family: var(--font-mono); letter-spacing: 0.04em; padding: 0.95rem 2rem; transition: transform 0.3s var(--ease), background 0.3s var(--ease); } .ar-access__form input[type="submit"]:hover { transform: translateY(-2px); background: #c9461f; } .wpcf7-response-output { border-radius: 8px; margin: 1rem 0 0 !important; font-size: var(--step--1); } .ar-foot { padding-block: 2.5rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-invert-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--line-invert); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .ar-work-wrap { grid-template-columns: 1fr; } .ar-rail { display: none; } .ar-modal__img--app { max-width: 100%; } } @media (max-width: 560px) { .ar-project__media--grid { grid-template-columns: repeat(2, 1fr); aspect-ratio: 3 / 4; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } } /* ============================================================ PASSWORD GATE (shown when the portfolio page is locked) ============================================================ */ .ar-pw-gate { max-width: 460px; margin-inline: auto; text-align: center; } .ar-pw-gate__note { font-family: var(--font-mono); font-size: var(--step--1); color: var(--slate); margin-bottom: 1.5rem; } .ar-pw-gate form { display: flex; flex-direction: column; gap: 0.9rem; align-items: center; } .ar-pw-gate label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--slate); display: flex; flex-direction: column; gap: 0.6rem; width: 100%; } .ar-pw-gate input[type="password"] { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 0.95rem 1.1rem; font: inherit; background: var(--paper-2); color: var(--ink); } .ar-pw-gate input[type="submit"] { background: var(--signal); color: #fff; border: none; border-radius: 100px; padding: 0.85rem 1.8rem; font-family: var(--font-mono); letter-spacing: 0.04em; cursor: pointer; transition: transform 0.3s var(--ease), background 0.3s var(--ease); } .ar-pw-gate input[type="submit"]:hover { transform: translateY(-2px); background: #c9461f; }