/* ========================================= Accessibility Utilities ========================================= */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -40px; left: 0; z-index: 1000; padding: 8px 16px; background: var(--brand-primary); color: #fff; border-radius: 0 0 var(--radius-small) 0; } .skip-link:focus { top: 0; } /* ========================================= Root Design Tokens ========================================= */ :root { /* --- Brand Colors --- */ /* ClassicCottrell design system (app/globals.css): forest green primary on the warm-cream neutral scale below. */ --brand-primary: #437057; --brand-primary-hover: #35573F; --brand-primary-active: #2C4A3A; --brand-accent: #437057; --accent-surface: #E2EBE4; --destructive: #B4462F; /* --- Neutral Scale (Warm) --- */ --neutral-50: #F9F5F1; --neutral-100: #F0E9E1; --neutral-200: #E3DBD2; --neutral-300: #CFC6BD; --neutral-400: #A9A29A; --neutral-500: #77736F; --neutral-600: #5A5854; --neutral-700: #3C3C3C; --neutral-800: #2C2C2C; --neutral-900: #1A1A1A; /* --- Text --- */ --text-main: var(--neutral-800); --text-secondary: var(--neutral-600); --text-footer: #444; --text-copyright: #6b6b6b; /* --- Backgrounds --- */ --bg-page: var(--neutral-50); /* --- Shadows / Rounding --- */ --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05); --radius-large: 60px; --radius-medium: 40px; --radius-small: 8px; /* --- Fluid type scale (available site-wide; not swept into existing font-size declarations) --- */ --step--1: clamp(0.80rem, 0.76rem + 0.20vw, 0.9rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); --step-2: clamp(1.55rem, 1.25rem + 1.4vw, 2.25rem); --step-3: clamp(2.1rem, 1.55rem + 2.6vw, 3.4rem); --step-4: clamp(2.6rem, 1.7rem + 4.4vw, 4.75rem); } /* ========================================= Theme Overrides (data-theme on ) ========================================= */ /* --- Bolder: OKLCH pine palette (tokens only; layout/typography selectors are untouched, everything already consumes var(--...)) --- */ [data-theme="bolder"] { --brand: oklch(0.50 0.095 158); --brand-deep: oklch(0.40 0.085 158); --brand-bright: oklch(0.62 0.115 158); --paper: oklch(0.985 0.002 160); --surface: oklch(0.955 0.003 160); --line: oklch(0.88 0.004 160); --ink: oklch(0.21 0.012 160); --ink-soft: oklch(0.40 0.014 160); --ink-mute: oklch(0.53 0.012 160); --text-main: var(--ink); --text-secondary: var(--ink-soft); --text-footer: var(--ink-soft); --text-copyright: var(--ink-mute); --bg-page: var(--paper); --neutral-50: var(--paper); --neutral-100: var(--surface); --neutral-200: oklch(0.92 0.004 160); --neutral-300: var(--line); --neutral-400: oklch(0.70 0.008 160); --neutral-500: var(--ink-mute); --neutral-600: var(--ink-soft); --neutral-700: oklch(0.31 0.013 160); --neutral-800: var(--ink); --neutral-900: oklch(0.16 0.012 160); --brand-primary: var(--brand); --brand-primary-hover: var(--brand-deep); --brand-primary-active: var(--brand-bright); --brand-accent: var(--brand); --accent-surface: oklch(0.94 0.03 158); --destructive: oklch(0.52 0.19 29); --shadow-soft: 0 22px 60px -28px oklch(0.21 0.04 160 / 0.5); --radius-large: 26px; --radius-medium: 18px; --radius-small: 10px; } /* --- shadcn: existing palette, selector generalized from body.theme-shadcn to the data-theme attribute --- */ [data-theme="shadcn"] { --bg-page: #ffffff; --text-main: #333333; --text-secondary: #6b7280; --text-footer: #4b5563; --text-copyright: #6b7280; --brand-primary: #1d4ed8; --brand-primary-hover: #2563eb; --brand-primary-active: #1d4ed8; --brand-accent: #3b82f6; --neutral-50: #f9fafb; --neutral-100: #f3f4f6; --neutral-200: #e5e7eb; --neutral-300: #d1d5db; --neutral-400: #9ca3af; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937; --neutral-900: #111827; --accent-surface: #dbeafe; --destructive: #ef4444; --radius-large: 0.5rem; --radius-medium: 0.375rem; --radius-small: 0.25rem; --shadow-soft: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Force the OS-native system-font stack on every element — most site text (header, footer, writing cards, project prose) sets its own font-family directly (or via .rosarivo-regular/.red-hat) rather than inheriting, and would otherwise win over the theme's font-family. */ [data-theme="shadcn"] * { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; } /* --- Brutal: derived from Projects/Brutal-UX (#000/#FFF binary contrast, zero radius, no shadow, monospace, red rationed to destructive/alert only, motion disabled) --- */ [data-theme="brutal"] { --bg-page: #FFFFFF; --text-main: #000000; --text-secondary: #000000; --text-footer: #000000; --text-copyright: #333333; --brand-primary: #000000; --brand-primary-hover: #000000; --brand-primary-active: #000000; --brand-accent: #000000; --accent-surface: #E5E5E5; --destructive: #FF0000; --neutral-50: #FFFFFF; --neutral-100: #F2F2F2; --neutral-200: #E5E5E5; --neutral-300: #CCCCCC; --neutral-400: #999999; --neutral-500: #666666; --neutral-600: #333333; --neutral-700: #1A1A1A; --neutral-800: #000000; --neutral-900: #000000; --shadow-soft: none; --radius-large: 0; --radius-medium: 0; --radius-small: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* Force monospace on every element, since most site text (header, footer, writing cards, project prose) sets its own font-family directly rather than via .rosarivo-regular/.red-hat and would otherwise win over the inherited [data-theme="brutal"] font-family. */ [data-theme="brutal"] * { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; } [data-theme="brutal"] .rosarivo-regular, [data-theme="brutal"] .rosarivo-regular-italic, [data-theme="brutal"] .red-hat { text-transform: uppercase; font-weight: 700; } [data-theme="brutal"] .reveal { animation: none !important; opacity: 1 !important; transform: none !important; } /* Brutal: --brand-primary/-hover/-active are all #000, so anything that only swaps between those tokens on hover/active shows no visible change. Force the binary background/foreground invert used by the reference Brutal-UX button/input convention instead. */ [data-theme="brutal"] .header-link:hover, [data-theme="brutal"] .header-link:active, [data-theme="brutal"] .footer-link:hover, [data-theme="brutal"] .project-cta a:hover { background: var(--text-main); color: var(--bg-page); } /* nav-drawer-index keeps its own explicit brand-primary color; without this it would go invisible against the inverted background above. */ [data-theme="brutal"] .nav-drawer-link:hover .nav-drawer-index, [data-theme="brutal"] .nav-drawer-link:active .nav-drawer-index { color: inherit; } [data-theme="brutal"] .run-btn:hover { background: var(--bg-page); color: var(--text-main); } [data-theme="brutal"] .social-link:hover { background: var(--text-main); } [data-theme="brutal"] .social-link:hover .social-icon, [data-theme="brutal"] .social-link:active .social-icon { background-color: var(--bg-page); } /* writing-card title/link text sits over date/subtitle text that would go invisible under a background invert, so use underline instead. */ [data-theme="brutal"] .writing-card:hover .writing-card-title, [data-theme="brutal"] .writing-card:hover .writing-card-link, [data-theme="brutal"] .writing-card-link:hover, [data-theme="brutal"] .writing-card-link:active { text-decoration: underline; text-decoration-thickness: 2px; } /* hero-link's hover affordance normally relies on translateX(8px), which prefers-reduced-motion zeroes out — combined with brutal's black-on-black color swap that leaves no visible change at all in that intersection. */ [data-theme="brutal"] .hero-link:hover { text-decoration: underline; text-decoration-thickness: 2px; } /* ========================================= Fonts ========================================= */ .rosarivo-regular { font-family: "Rosarivo", cursive; font-weight: 400; } .rosarivo-regular-italic { font-family: "Rosarivo", cursive; font-weight: 400; font-style: italic; } .red-hat { font-family: "Red Hat Display", sans-serif; } /* ========================================= Global Page Layout ========================================= */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-page); color: var(--text-main); margin: 0; padding: 0; text-align: center; } /* ========================================= Motion — CSS load reveal (never gates content on JS; reduced-motion lands fully visible) ========================================= */ .reveal { opacity: 0; transform: translateY(16px); animation: reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--d, 0) * 110ms); } @keyframes reveal { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } .hero-link:hover { transform: none; } .writing-card:hover .writing-card-link .arrow { transform: none; } } /* ========================================= Ambient Particle Field (home page) Canvas is injected by particles.js and is decorative only — never in the tab order, never intercepting clicks. ========================================= */ .particle-field { position: fixed; inset: 0; /* Content is lifted to z-index 1 below rather than relying on the canvas sitting at -1, so the field stays visible even if ever picks up its own background (which would stop body's from being propagated). */ z-index: 0; pointer-events: none; user-select: none; } .home-page > main, .home-page > #footer { position: relative; z-index: 1; } /* #header holds the injected header *and* the mobile drawer/backdrop, whose own z-index (40/41) is scoped to this stacking context — so it has to outrank main, or main would paint over the open drawer. */ .home-page > #header { position: relative; z-index: 2; } /* ========================================= Header ========================================= */ header { padding: 20px 40px; } .header-content { display: flex; justify-content: space-between; align-items: center; } .top-name { font-family: "Red Hat Display", sans-serif; font-weight: 400; font-size: 14px; color: var(--neutral-900); margin: 0; } .header-left { display: flex; align-items: center; gap: 20px; } .top-name a { text-decoration: none; color: inherit; } /* ========================================= Navigation Links ========================================= */ .nav-links { display: flex; gap: 20px; } .header-link { font-family: "Red Hat Display", sans-serif; font-size: 14px; font-weight: 400; color: var(--neutral-900); text-decoration: none; transition: color 0.3s ease; } .header-link:hover { color: var(--brand-primary-hover); } .header-link:active { color: var(--brand-primary-active); } .nav-links .header-link.active { color: var(--brand-primary); font-weight: 600; } /* ========================================= Main Content ========================================= */ main { display: flex; flex-direction: column; align-items: center; margin-top: 40px; } /* --- Home Page Layout: hero copy first, image+nav below --- */ .home { display: flex; flex-direction: column; gap: clamp(44px, 8vw, 92px); width: 100%; max-width: 1080px; margin: clamp(40px, 8vh, 88px) auto 0; padding: 0 24px; } .hero { text-align: center; } .showcase { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(32px, 6vw, 76px); } .hero-nav { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; text-align: left; } /* --- Hero Navigation Links --- */ .hero-link { display: flex; flex-direction: column; font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.02em; color: var(--brand-accent); text-decoration: none; transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .hero-link:hover { color: var(--brand-primary-hover); transform: translateX(8px); } .hero-link-meta { font-family: "Red Hat Display", sans-serif; font-style: normal; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-secondary); margin-top: 4px; } .profile-section { margin-bottom: 40px; } .profile-img { width: 280px; height: 280px; object-fit: cover; border-radius: var(--radius-large); box-shadow: var(--shadow-soft); } /* ========================================= Text ========================================= */ .headline { font-size: var(--step-4); color: var(--text-main); line-height: 1.1; letter-spacing: -0.02em; max-width: 20ch; margin: 0 auto 20px auto; text-wrap: balance; } .subtext { font-size: var(--step-1); color: var(--text-secondary); max-width: 52ch; margin: 10px auto 0; text-wrap: pretty; } /* ========================================= Footer ========================================= */ footer { margin-top: 80px; text-align: center; padding-bottom: 40px; } .name-footer { font-family: "Red Hat Display", sans-serif; font-size: 16px; font-weight: 600; margin-bottom: 4px; } .title-footer { font-family: "Red Hat Display", sans-serif; font-size: 13px; font-weight: 400; margin: 0; color: var(--text-footer); } footer .social-icons { margin-top: 8px; } .linkedin-link { display: inline-block; margin: 16px 0; } .copyright { font-size: 10px; color: var(--text-copyright); margin-top: 12px; font-family: "Red Hat Display", sans-serif; } /* ========================================= Social Icons ========================================= */ .social-icons { display: flex; align-items: center; justify-content: center; gap: 10px; } .social-link { display: inline-block; } /* Icons are recolored via mask (like .nav-toggle-icon) instead of a filter chain, so they actually follow --brand-primary per theme. */ .social-icon { display: block; width: 20px; height: 20px; background-color: var(--brand-primary); transition: background-color 0.3s ease; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .social-icon.github { -webkit-mask-image: url(img/github.svg); mask-image: url(img/github.svg); } .social-icon.instagram { -webkit-mask-image: url(img/instagram.svg); mask-image: url(img/instagram.svg); } .social-icon.substack { -webkit-mask-image: url(img/substack.svg); mask-image: url(img/substack.svg); } .social-icon.linked { -webkit-mask-image: url(img/linked.svg); mask-image: url(img/linked.svg); } /* Hover & Active States */ .social-link:hover .social-icon { background-color: var(--brand-primary-hover); } .social-link:active .social-icon { background-color: var(--brand-primary-active); } /* ========================================= Focus States (keyboard nav — every interactive element with a :hover state gets a themed ring) ========================================= */ .header-link:focus-visible, .footer-link:focus-visible, .social-link:focus-visible, .hero-link:focus-visible, .run-btn:focus-visible, .tab-btn:focus-visible, .writing-card:focus-visible, .project-nav-item:focus-visible, .project-repo-link:focus-visible, .nav-toggle:focus-visible, .theme-select:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: var(--radius-small); } [data-theme="brutal"] :focus-visible { outline-width: 3px; outline-offset: 0; } /* ========================================= Mobile Nav Toggle + Ink Curtain Drawer ========================================= */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; background: none; cursor: pointer; } .nav-toggle-icon { display: block; width: 32px; height: 32px; background-color: var(--brand-primary); -webkit-mask: url(img/terry-face.svg) center / contain no-repeat; mask: url(img/terry-face.svg) center / contain no-repeat; transition: transform 0.36s cubic-bezier(0.65, 0, 0.35, 1); } .nav-toggle[aria-expanded="true"] .nav-toggle-icon { transform: scale(0.9); } .nav-drawer-backdrop { position: fixed; inset: 0; background: rgba(44, 44, 44, 0.38); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.38s ease; z-index: 40; } .nav-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .nav-drawer { position: fixed; top: 0; left: 0; height: 100%; width: min(78%, 320px); background: var(--neutral-50); border-right: 1px solid var(--neutral-200); padding: 96px 28px 32px; box-sizing: border-box; transform: translateX(-100%); /* visibility (not just the off-screen transform) is what takes the drawer's links out of the tab order — translateX alone left five focusable links parked at x=-292 on every page and every viewport, inside a container marked aria-hidden. Transitioning it means the drawer stays visible for the length of the slide-out, then flips hidden at the end. */ visibility: hidden; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s; z-index: 41; } .nav-drawer.is-open { transform: translateX(0); visibility: visible; } .nav-drawer-links { display: flex; flex-direction: column; gap: 24px; } .nav-drawer-link { display: flex; align-items: baseline; gap: 10px; font-family: "Rosarivo", serif; font-style: italic; font-size: 28px; opacity: 0; transform: translateY(16px); transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); } .nav-drawer.is-open .nav-drawer-link { opacity: 1; transform: translateY(0); } .nav-drawer.is-open .nav-drawer-link:nth-child(1) { transition-delay: 0.11s; } .nav-drawer.is-open .nav-drawer-link:nth-child(2) { transition-delay: 0.175s; } .nav-drawer.is-open .nav-drawer-link:nth-child(3) { transition-delay: 0.24s; } .nav-drawer-index { font-family: monospace; font-size: 11px; color: var(--brand-primary); } /* ========================================= Responsive Design ========================================= */ @media (max-width: 768px) { body { padding: 0 20px; } .profile-img { width: 200px; height: 200px; border-radius: var(--radius-medium); } header { padding: 16px 20px; } .header-content { justify-content: space-between; } .nav-links { display: none; } .nav-toggle { display: inline-flex; } .home { margin-top: 32px; padding: 0 20px; } .showcase { flex-direction: column; } .hero-nav { align-items: center; text-align: center; } .hero-link { align-items: center; } footer { margin-top: 60px; padding: 0 20px 40px; } } /* ========================================= Sandbox Page ========================================= */ .sandbox-page { display: flex; flex-direction: column; min-height: 100vh; } .sandbox-container { flex: 1; display: flex; flex-direction: row; /* Override global main column direction */ align-items: stretch; /* Override global main center alignment */ width: 100%; height: calc(100vh - 160px); /* Adjust based on header/footer height */ margin-top: 0; border-top: 1px solid var(--neutral-300); } .sandbox-display { flex: 1; background: white; border-right: 1px solid var(--neutral-300); position: relative; } #sandbox-frame { width: 100%; height: 100%; border: none; } .sandbox-editor { flex: 1; display: flex; flex-direction: column; background: var(--neutral-100); } .editor-tabs { display: flex; background: var(--neutral-200); padding: 0 10px; border-bottom: 1px solid var(--neutral-300); } .tab-btn { padding: 10px 20px; border: none; background: transparent; cursor: pointer; font-family: "Red Hat Display", sans-serif; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid transparent; } .tab-btn.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); background: var(--neutral-100); } .run-btn { margin-left: auto; background: var(--brand-primary); color: white; border-radius: 4px; padding: 6px 16px; margin-top: 4px; margin-bottom: 4px; font-size: 12px; transition: background 0.3s; } .run-btn:hover { background: var(--brand-primary-hover); } .editor-content { flex: 1; position: relative; } .code-area { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--neutral-100); display: none; /* Hidden by default */ } .code-area.active { display: block; } /* CodeFlask Overrides (Optional) */ .codeflask { background: transparent !important; } .codeflask textarea { color: var(--text-main) !important; } /* Footer Link */ .footer-links { margin-top: 10px; } .footer-link { font-family: "Red Hat Display", sans-serif; font-size: 12px; color: var(--text-secondary); text-decoration: none; } .footer-link:hover { color: var(--brand-primary); } /* ========================================= Art Page ========================================= */ /* --- Timeline (Timeline View) --- */ .art-timeline { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; padding: 70px 24px 60px; } .timeline-track { position: relative; height: 2px; background: var(--neutral-300); width: 100%; } .timeline-tick { position: absolute; top: 0; transform: translateX(-50%); width: 1px; height: 8px; background: var(--neutral-300); } .timeline-tick-label { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: "Red Hat Display", sans-serif; font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .timeline-point { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); } .timeline-marker { appearance: none; -webkit-appearance: none; position: absolute; top: -4px; width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--radius-small); background: var(--brand-primary); box-shadow: 0 0 0 4px var(--bg-page); cursor: pointer; } .timeline-marker:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 4px; } .timeline-label { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; width: max-content; max-width: 160px; } .timeline-point.above .timeline-label { bottom: 20px; } .timeline-point.below .timeline-label { top: 20px; } .timeline-label-title { font-size: 15px; color: var(--text-main); line-height: 1.2; } .timeline-label-year { font-family: "Red Hat Display", sans-serif; font-size: 12px; color: var(--text-secondary); margin-top: 2px; } @media (max-width: 768px) { .art-timeline { padding: 60px 12px 90px; } .timeline-label { max-width: 96px; } .timeline-label-title { font-size: 13px; } } /* --- Common Art Entry Styles --- */ .art-entry { position: relative; margin-bottom: 80px; width: 100%; /* Layout: Two-column Flex */ display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 40px; max-width: 1000px; margin: 0 auto 100px; padding: 0 20px; } .art-visual-wrapper { position: relative; overflow: hidden; flex: 1; max-width: 50%; /* Uniform Sizing */ aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 40px; /* Frame thickness */ border-radius: var(--radius-small); } /* Background Colors */ .bg-white { background-color: #ffffff; } .bg-black { background-color: #000000; } .art-visual { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.5s ease; } .art-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-top: 20px; /* Align with top of image visually */ min-width: 0; /* Prevent flex child from overflowing */ } .art-quote { font-size: 20px; color: var(--neutral-800); line-height: 1.4; margin: 0 0 20px 0; max-width: 100%; align-self: flex-start; } .art-details { font-size: 14px; color: var(--neutral-700); background: transparent; backdrop-filter: none; box-shadow: none; padding: 0; width: 100%; border-top: 1px solid var(--neutral-300); padding-top: 20px; } .detail-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--neutral-300); padding-bottom: 8px; margin-bottom: 8px; gap: 20px; /* Ensure space between label and value */ } .detail-row:last-child { border-bottom: none; margin-bottom: 0; } .detail-label { font-weight: 600; color: var(--neutral-500); flex-shrink: 0; /* Prevent label from squishing */ } .detail-value { text-align: right; font-weight: 400; word-break: break-word; /* Allow long text to wrap */ } /* --- Mobile Responsiveness --- */ @media (max-width: 768px) { .art-entry { flex-direction: column; align-items: center; gap: 20px; padding: 0 10px; /* Reduce padding on mobile */ } .art-visual-wrapper { max-width: 100%; width: 100%; padding: 20px; /* Smaller frame on mobile */ } .art-visual { min-height: auto; /* Let aspect ratio handle height */ } .art-content { width: 100%; /* Full width */ align-items: center; text-align: center; padding-top: 0; } .art-quote { align-self: center; text-align: center; } .art-details { text-align: center; width: 100%; } .detail-row { justify-content: space-between; text-align: left; /* Reset text align for rows */ } .detail-value { text-align: right; } } /* ========================================= Theme Select (footer) ========================================= */ .theme-select { font-family: "Red Hat Display", sans-serif; font-size: 12px; color: var(--text-footer); background: transparent; border: 1px solid var(--neutral-300); border-radius: var(--radius-small); padding: 4px 8px; cursor: pointer; } /* ========================================= Writing Page — editorial feature layout ========================================= */ .writing-page main { max-width: 680px; margin: 60px auto 0; padding: 0 20px; width: 100%; box-sizing: border-box; align-items: flex-start; } .writing-hero { text-align: center; width: 100%; margin: 0 0 64px; } .writing-heading { font-size: var(--step-4); color: var(--text-main); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; } .writing-hero-subtext { font-size: var(--step-1); color: var(--text-secondary); max-width: 46ch; margin: 0 auto; text-wrap: pretty; } .writing-list { width: 100%; list-style: none; margin: 0; padding: 0; } .writing-list li:first-child .writing-card { padding-top: 0; } .writing-card { display: block; text-align: left; padding: 40px 0; border-bottom: 1px solid var(--neutral-200); text-decoration: none; color: inherit; } .writing-card:hover .writing-card-title, .writing-card:hover .writing-card-link { color: var(--brand-primary-hover); } .writing-card:hover .writing-card-link .arrow { transform: translateX(4px); } .writing-card-date { font-family: "Red Hat Display", sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 12px 0; font-weight: 500; } .writing-card-title { font-size: var(--step-2); color: var(--text-main); margin: 0 0 14px 0; line-height: 1.2; text-wrap: balance; transition: color 0.3s ease; } .writing-card-subtitle { font-family: "Red Hat Display", sans-serif; font-size: 18px; color: var(--text-secondary); margin: 0 0 20px 0; line-height: 1.5; font-style: italic; max-width: 52ch; } .writing-card-link { font-family: "Red Hat Display", sans-serif; font-size: 14px; font-weight: 600; color: var(--brand-primary); text-decoration: none; transition: color 0.3s ease; } .writing-card-link .arrow { display: inline-block; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .writing-card-link:hover { color: var(--brand-primary-hover); } .writing-card-link:active { color: var(--brand-primary-active); } @media (max-width: 768px) { .writing-page main { margin-top: 40px; } .writing-hero { margin-bottom: 40px; } .writing-card { padding: 28px 0; } } /* ========================================= Projects Page — sidebar index + detail panel (distinct shell from every other page: a persistent project list drives a switchable detail view, not a single scrolling column) ========================================= */ .projects-shell { display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 4vw, 56px); max-width: 1100px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 48px) 80px; align-items: start; text-align: left; width: 100%; } .projects-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 88px; } .project-nav-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-small); text-decoration: none; transition: background 0.2s ease; } .project-nav-item:hover { background: var(--accent-surface); } .project-nav-item.active { background: var(--accent-surface); } .project-nav-item.active .project-nav-title { color: var(--brand-primary); } .project-nav-status { font-family: "Red Hat Display", sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); } .project-nav-title { font-size: 1.05rem; line-height: 1.3; color: var(--text-main); } .project-detail { font-family: "Red Hat Display", system-ui, sans-serif; min-width: 0; } .project-title { font-size: 2.4rem; line-height: 1.15; margin: 0 0 4px; color: var(--text-main); } .project-subtitle { font-size: 1.15rem; color: var(--text-secondary); margin: 0; } /* Title/subtitle sit in a flex row with the (small, understated) repo icon; text takes available width, icon holds its size. The 36px that used to live on .project-subtitle moves here so it collapses with the next section's h2 margin the same way it did before (a flex item's margins can't collapse with anything outside the flex container, so leaving it on the subtitle would trap it and double the gap). */ .project-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 36px; } .project-heading-text { min-width: 0; flex: 1 1 auto; } .project-detail h2 { font-family: "Rosarivo", Georgia, serif; font-weight: 400; font-size: 1.5rem; margin: 40px 0 12px; color: var(--brand-primary); } .project-detail p, .project-detail li { font-size: 1.05rem; line-height: 1.65; color: var(--text-main); } .project-detail ul { padding-left: 22px; } .project-detail li { margin-bottom: 14px; } .project-cta { margin-top: 32px; padding: 18px 22px; background: var(--accent-surface); border-radius: var(--radius-small); display: inline-block; } .project-cta a { color: var(--brand-primary); font-weight: 600; text-decoration: none; } .project-cta a:hover { color: var(--brand-primary-hover); } .project-product { margin-bottom: 36px; } .project-product-image { display: block; width: 100%; max-width: 420px; border-radius: var(--radius-small); margin-bottom: 16px; } .project-buy-cta { display: inline-block; padding: 14px 24px; border-radius: var(--radius-small); background: var(--brand-primary); color: var(--bg-page); font-weight: 700; text-decoration: none; } .project-buy-cta:hover { background: var(--brand-primary-hover); } .project-repo-links { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 8px; flex: 0 0 auto; } /* Repo icon reuses the same mask technique as the header/footer social icons so it recolors per theme instead of shipping a fixed-color PNG. */ .project-repo-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .project-repo-label { font-size: 0.85rem; color: var(--text-main); white-space: nowrap; } .project-repo-icon { display: block; width: 22px; height: 22px; background-color: var(--brand-primary); transition: background-color 0.3s ease; -webkit-mask-image: url(img/github.svg); mask-image: url(img/github.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .project-repo-link:hover .project-repo-icon { background-color: var(--brand-primary-hover); } .project-repo-link:active .project-repo-icon { background-color: var(--brand-primary-active); } [data-theme="brutal"] .project-repo-link:hover .project-repo-icon, [data-theme="brutal"] .project-repo-link:active .project-repo-icon { background-color: var(--accent-surface); } @media (max-width: 768px) { .projects-shell { grid-template-columns: 1fr; padding: 24px 20px 60px; } .projects-nav { /* Card width set in vw (not %) so the padding formula below isn't self-referential; padding is then derived from the container's own resolved width, which makes card 1's snap-align:center land exactly at scrollLeft:0 instead of needing negative scroll. */ --project-card-w: 78vw; position: static; flex-direction: row; overflow-x: auto; gap: 14px; padding: 4px calc((100% - var(--project-card-w)) / 2) 16px; margin-bottom: 8px; border-bottom: 1px solid var(--neutral-300); -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .project-nav-item { flex: 0 0 var(--project-card-w); white-space: normal; scroll-snap-align: center; background: var(--accent-surface); border-radius: var(--radius-small); padding: 10px; } .project-title { font-size: 1.8rem; } }