/* ===================================
CSS Variables & Base Styles
=================================== */
:root {
/* Colors - Light Mode */
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-text-muted: #888888;
--color-text-light: #b5b5b5;
--color-border: #e8e8e8;
/* Highlight Colors - More vibrant and distinct */
--highlight-peach: rgba(255, 180, 140, 0.6);
--highlight-blue: rgba(140, 190, 255, 0.6);
--highlight-lavender: rgba(200, 160, 255, 0.6);
--highlight-yellow: rgba(255, 235, 120, 0.7);
/* Highlight Hover States */
--highlight-peach-hover: rgba(255, 160, 110, 0.8);
--highlight-blue-hover: rgba(110, 170, 255, 0.8);
--highlight-lavender-hover: rgba(180, 130, 255, 0.8);
--highlight-yellow-hover: rgba(255, 220, 80, 0.9);
/* Card backgrounds */
--color-card-bg: #fafafa;
/* Typography */
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-serif: 'Newsreader', Georgia, serif;
/* Spacing */
--sidebar-width: 180px;
--content-max-width: 600px;
--section-gap: 80px;
}
/* Reset & Base */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: clamp(15px, 1vw, 18px);
overflow-x: hidden;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s ease, color 0.3s ease;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* Fallback */
overflow-x: clip; /* Preferred: doesn't create scroll container, fixes iOS position:fixed bug */
min-height: 100vh;
}
/* Selection */
::selection {
background: var(--highlight-lavender);
}
/* ===================================
Custom Cursor - Yellow Flower
=================================== */
/* Custom cursor using URL - dark pink flower */
html, body, * {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ctext x='4' y='20' font-size='18' fill='%23e75480'%3E✿%3C/text%3E%3C/svg%3E") 14 14, auto;
}
/* Pointer cursor for clickable elements - larger dark pink flower */
a, button, .tab, .highlight, [role="button"] {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='4' y='22' font-size='22' fill='%23e75480'%3E✿%3C/text%3E%3C/svg%3E") 16 16, pointer;
}
/* Hide the JS cursor elements - not needed */
.cursor, .cursor-ring {
display: none !important;
}
/* ===================================
Page View Counter (in footer)
=================================== */
.page-view-counter {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-body);
font-size: 0.75rem;
color: var(--color-text-light);
margin-top: 8px;
}
.page-view-counter svg {
opacity: 0.5;
width: 12px;
height: 12px;
}
.page-view-counter span {
font-variant-numeric: tabular-nums;
}
.page-view-counter .view-label {
opacity: 0.7;
}
/* ===================================
Social Links - Top Right
=================================== */
.social-links {
position: fixed;
top: 24px;
right: 24px;
display: flex;
gap: 12px;
z-index: 100;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--color-text-muted);
transition: color 0.2s ease, transform 0.2s ease;
}
.social-links a:hover {
color: var(--color-text);
transform: translateY(-2px);
}
.social-links svg {
width: 18px;
height: 18px;
}
/* Individual icon adjustments for visual balance */
#social-twitter svg {
width: 19px;
height: 19px;
}
#social-linkedin svg {
width: 17px;
height: 17px;
}
#social-substack svg {
width: 18px;
height: 18px;
}
#social-email svg {
width: 18px;
height: 18px;
}
/* Social View Counter */
.social-view-counter {
display: flex;
align-items: center;
gap: 4px;
height: 20px;
color: var(--color-text-muted);
cursor: default;
transition: color 0.2s ease;
}
.social-view-counter:hover {
color: var(--color-text);
}
.social-view-counter svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.social-view-counter span {
font-variant-numeric: tabular-nums;
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
}
/* ===================================
Mobile Menu Toggle (Hamburger)
=================================== */
.mobile-menu-toggle {
display: none;
position: fixed;
top: 20px;
left: 20px;
z-index: 300;
width: 44px;
height: 44px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
padding: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.hamburger-line {
width: 20px;
height: 2px;
background: var(--color-text);
border-radius: 2px;
transition: all 0.3s ease;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ===================================
Sidebar Navigation
=================================== */
.sidebar {
position: fixed;
left: 40px;
top: 50%;
transform: translateY(-50%);
width: var(--sidebar-width);
z-index: 100;
}
.sidebar-overlay {
display: none;
}
.sidebar-content {
display: contents;
}
.sidebar ul {
list-style: none;
}
.sidebar li {
margin-bottom: 8px;
}
.nav-link {
font-size: 1rem;
color: var(--color-text-light);
text-decoration: none;
letter-spacing: 0;
transition: color 0.25s ease;
display: inline-block;
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 1px;
background: var(--color-text);
transition: width 0.25s ease;
}
.nav-link:hover,
.nav-link.active {
color: var(--color-text);
}
.nav-link.active::after {
width: 100%;
}
/* ===================================
Main Content Area
=================================== */
.main-content {
margin-left: calc(var(--sidebar-width) + 60px);
padding: 60px 40px 60px 40px;
max-width: calc(var(--content-max-width) + var(--sidebar-width) + 100px);
}
.section {
padding-top: 20px;
padding-bottom: var(--section-gap);
min-height: auto;
}
/* ===================================
Typography
=================================== */
.name {
font-family: var(--font-body);
font-size: 1.625rem;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 16px;
color: var(--color-text);
cursor: default;
position: relative;
}
/* Kannada name container - hidden by default */
.name-kannada {
display: none;
}
.name:hover .name-english {
display: none;
}
.name:hover .name-kannada {
display: inline;
}
.intro {
font-size: 1.0625rem;
line-height: 1.65;
color: var(--color-text);
max-width: 540px;
margin-bottom: 16px;
}
.about-story {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-text);
max-width: 540px;
margin-bottom: 24px;
}
.contact-line {
font-size: 1rem;
line-height: 1.75;
color: var(--color-text);
max-width: 540px;
margin-bottom: 28px;
}
.unique-abilities {
margin-bottom: 20px;
max-width: 540px;
}
.unique-abilities h2 {
font-family: var(--font-body);
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 8px;
}
.unique-abilities ul {
list-style: none;
padding-left: 0;
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-text);
}
.unique-abilities li {
margin-bottom: 2px;
position: relative;
padding-left: 16px;
}
.unique-abilities li::before {
content: '✦';
position: absolute;
left: 0;
top: 0.5em;
color: var(--color-text-muted);
font-size: 0.625rem;
}
.resume-line {
display: block;
font-size: 1rem;
line-height: 1.6;
color: var(--color-text-muted);
max-width: 540px;
margin-top: 16px;
margin-bottom: 32px;
font-style: italic;
}
.section-title {
font-family: var(--font-body);
font-size: 2rem;
font-weight: 600;
text-transform: lowercase;
letter-spacing: -0.02em;
color: var(--color-text);
margin-bottom: 8px;
}
.section-intro {
color: var(--color-text-muted);
margin-bottom: 32px;
margin-top: 4px;
font-size: 1rem;
font-weight: 400;
}
.tab-subtitle {
color: var(--color-text-muted);
font-size: 1rem;
font-weight: 400;
margin-bottom: 20px;
margin-top: 0;
}
/* ===================================
About Section Content
=================================== */
.about-header {
display: block;
position: relative;
}
.about-content {
max-width: 560px;
}
.about-content p {
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 16px;
}
.about-intro {
margin-bottom: 20px;
}
.about-subsection {
margin-top: 32px;
margin-bottom: 32px;
}
.about-subtitle {
font-family: var(--font-body);
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 12px;
}
.about-subtitle-meta {
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 16px;
}
.about-list {
list-style: none;
padding-left: 0;
margin: 12px 0;
}
.about-list li {
position: relative;
padding-left: 0;
margin-bottom: 10px;
font-size: 1.0625rem;
line-height: 1.7;
}
.about-list a {
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid var(--color-border);
transition: border-color 0.2s ease;
}
.about-list a:hover {
border-color: var(--color-text);
}
/* Learn about me list - Simple bullet list */
.learn-about-list {
margin-top: 16px;
list-style: none;
padding: 0;
max-width: 540px;
}
.learn-about-list li {
position: relative;
padding-left: 20px;
margin-bottom: 14px;
font-size: 1rem;
line-height: 1.7;
}
/* Bullet point */
.learn-about-list li::before {
content: '✦';
position: absolute;
left: 0;
color: var(--color-text-muted);
font-size: 0.625rem;
top: 5px;
}
/* Link styling - pastel underline on hover */
.learn-about-list a.highlight {
color: var(--color-text);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease;
padding: 0;
background: none;
}
.learn-about-list a.highlight.blue:hover {
border-bottom-color: var(--highlight-blue);
}
.learn-about-list a.highlight.peach:hover {
border-bottom-color: var(--highlight-peach);
}
.learn-about-list a.highlight.lavender:hover {
border-bottom-color: var(--highlight-lavender);
}
/* Source label - inline after arrow */
.learn-about-list em {
font-size: 0.875rem;
font-style: italic;
color: var(--color-text-muted);
margin-left: 4px;
}
/* Arrow before source */
.learn-about-list em::before {
content: '→ ';
}
.beyond-work-grid {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 16px;
}
.beyond-work-item {
display: flex;
gap: 12px;
font-size: 1.0625rem;
line-height: 1.7;
}
.beyond-work-emoji {
flex-shrink: 0;
}
/* Beyond Work - Progressive Disclosure */
.beyond-work-content {
position: relative;
}
.beyond-work-preview {
margin-top: 16px;
}
.beyond-work-preview.hidden {
display: none;
}
.beyond-work-full {
display: none;
margin-top: 16px;
}
.beyond-work-full.active {
display: flex;
animation: fadeInExpand 0.3s ease;
}
.beyond-work-toggle {
display: inline-block;
background: none;
border: none;
border-radius: 0;
padding: 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: #0000EE;
text-decoration: none;
border-bottom: 1px solid #0000EE;
padding-bottom: 1px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
margin-top: 16px;
}
.beyond-work-toggle:hover {
color: #551A8B;
border-bottom-color: #551A8B;
background: none;
}
.beyond-work-toggle.hidden {
display: none;
}
.beyond-work-toggle-less {
display: none;
background: none;
border: none;
border-radius: 0;
padding: 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: #551A8B;
text-decoration: none;
border-bottom: 1px solid #551A8B;
padding-bottom: 1px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
margin-top: 16px;
}
.beyond-work-toggle-less:hover {
color: #0000EE;
border-bottom-color: #0000EE;
background: none;
}
.beyond-work-toggle-less.active {
display: inline-block;
}
/* ===================================
Corporate Story - Progressive Disclosure
=================================== */
.corporate-content {
position: relative;
}
.corporate-preview.hidden {
display: none;
}
.corporate-full {
display: none;
margin-top: 0;
}
.corporate-full.active {
display: block;
animation: fadeInExpand 0.3s ease;
}
.corporate-toggle {
display: inline-block;
background: none;
border: none;
border-radius: 0;
padding: 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: #0000EE;
text-decoration: none;
border-bottom: 1px solid #0000EE;
padding-bottom: 1px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
margin-top: 8px;
}
.corporate-toggle:hover {
color: #551A8B;
border-bottom-color: #551A8B;
background: none;
}
.corporate-toggle.hidden {
display: none;
}
.corporate-toggle-less {
display: none;
background: none;
border: none;
border-radius: 0;
padding: 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: #551A8B;
text-decoration: none;
border-bottom: 1px solid #551A8B;
padding-bottom: 1px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
margin-top: 8px;
}
.corporate-toggle-less:hover {
color: #0000EE;
border-bottom-color: #0000EE;
background: none;
}
.corporate-toggle-less.active {
display: inline-block;
}
/* ===================================
Background Section - Progressive Disclosure
=================================== */
.background-content {
position: relative;
}
.background-preview {
margin-bottom: 0;
}
.background-preview.hidden {
display: none;
}
.background-ellipsis {
display: none; /* Hidden since button is now on its own line */
color: var(--color-text-muted);
font-size: 1.0625rem;
}
.background-ellipsis.hidden {
display: none;
}
.background-full {
display: none;
margin-top: 0;
}
.background-full.active {
display: block;
animation: fadeInExpand 0.3s ease;
}
.background-toggle {
display: inline-block;
background: none;
border: none;
border-radius: 0;
padding: 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: #0000EE;
text-decoration: none;
border-bottom: 1px solid #0000EE;
padding-bottom: 1px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
margin-top: 16px;
margin-left: 0;
}
.background-toggle:hover {
color: #551A8B;
border-bottom-color: #551A8B;
background: none;
}
.background-toggle.hidden {
display: none;
}
.background-toggle-less {
display: none;
background: none;
border: none;
border-radius: 0;
padding: 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
color: #551A8B;
text-decoration: none;
border-bottom: 1px solid #551A8B;
padding-bottom: 1px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
margin-top: 16px;
}
.background-toggle-less:hover {
color: #0000EE;
border-bottom-color: #0000EE;
background: none;
}
.background-toggle-less.active {
display: inline-block;
}
/* ===================================
Highlighted Links - The Signature Feature
=================================== */
.highlight {
text-decoration: none;
color: var(--color-text);
padding: 2px 6px;
margin: 0 -4px;
border-radius: 4px;
transition: all 0.2s ease;
position: relative;
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.highlight.peach {
background: var(--highlight-peach);
}
.highlight.blue {
background: var(--highlight-blue);
}
.highlight.lavender {
background: var(--highlight-lavender);
}
.highlight:hover {
transform: scale(1.02);
}
.highlight.peach:hover {
background: var(--highlight-peach-hover);
}
.highlight.blue:hover {
background: var(--highlight-blue-hover);
}
.highlight.lavender:hover {
background: var(--highlight-lavender-hover);
}
.highlight-link {
text-decoration: none;
color: var(--color-text);
padding: 2px 6px;
margin: 0 -2px;
border-radius: 4px;
background: var(--highlight-yellow);
transition: all 0.2s ease;
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.highlight-link:hover {
background: var(--highlight-yellow-hover);
transform: scale(1.02);
}
.highlight-link.pink {
background: var(--highlight-lavender);
}
.highlight-link.pink:hover {
background: var(--highlight-lavender-hover);
}
/* ===================================
Cool Things Section
=================================== */
.cool-things {
margin-bottom: 64px;
}
.cool-things h2 {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
font-style: normal;
color: var(--color-text);
margin-bottom: 16px;
}
.achievements {
list-style: none;
margin-bottom: 20px;
}
.achievements li {
position: relative;
padding-left: 16px;
margin-bottom: 10px;
font-size: 1rem;
line-height: 1.7;
}
.achievements li::before {
content: '✦';
position: absolute;
left: 0;
color: var(--color-text-light);
font-size: 0.625rem;
top: 5px;
}
.read-more {
display: inline-block;
font-size: 0.875rem;
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.2s ease;
margin-top: 8px;
}
.read-more:hover {
color: var(--color-text);
}
/* ===================================
Tab Navigation
=================================== */
.tabs-container {
margin-top: 48px;
}
.tabs {
display: flex;
gap: 8px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.tab {
padding: 10px 20px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-border);
border-radius: 100px;
cursor: pointer;
transition: all 0.2s ease;
}
.tab:hover {
border-color: var(--color-text-muted);
color: var(--color-text);
}
.tab.active {
background: var(--color-text);
color: var(--color-bg);
border-color: var(--color-text);
}
.tab-link {
text-decoration: none;
}
.tab-content {
animation: fadeIn 0.3s ease;
}
.tab-content.hidden {
display: none;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Content Grid */
.content-grid {
display: grid;
gap: 24px;
}
.content-card {
padding: 24px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.content-card:hover {
border-color: var(--color-text-light);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.card-tag {
display: inline-block;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
margin-bottom: 12px;
}
.content-card h3 {
font-size: 1.0625rem;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.4;
}
.content-card p {
font-size: 1rem;
color: var(--color-text-muted);
line-height: 1.6;
}
/* ===================================
Experience Section
=================================== */
.experience-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.experience-item {
padding: 32px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.experience-item:hover {
border-color: var(--color-text-light);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.experience-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 4px;
}
.experience-header h3 {
font-size: 1.125rem;
font-weight: 600;
}
.experience-date {
font-size: 0.8125rem;
color: var(--color-text-muted);
white-space: nowrap;
}
.experience-company {
font-size: 0.875rem;
color: var(--color-text-muted);
margin-bottom: 12px;
}
/* Experience Brief Description */
.experience-brief {
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 16px;
}
/* Experience Expanded Content */
.experience-expanded {
display: none;
padding-top: 20px;
border-top: 1px solid var(--color-border);
margin-top: 16px;
}
.experience-expanded.active {
display: block;
animation: fadeInExpand 0.3s ease;
}
.experience-expanded h4 {
font-family: var(--font-body);
font-size: 1.0625rem;
font-weight: 600;
margin: 24px 0 12px 0;
color: var(--color-text);
}
.experience-expanded h4:first-child {
margin-top: 0;
}
.experience-expanded p {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 16px;
color: var(--color-text);
}
.experience-expanded ul {
list-style: none;
padding: 0;
margin: 0;
}
.experience-expanded li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-text);
}
.experience-expanded li::before {
content: "✦";
position: absolute;
left: 0;
color: var(--color-text-muted);
font-size: 0.625rem;
top: 5px;
}
/* Toggle Button */
.experience-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 8px 0;
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--color-text-muted);
cursor: pointer;
transition: color 0.2s ease;
margin-top: 8px;
}
.experience-toggle:hover {
color: var(--color-text);
}
.toggle-arrow {
transition: transform 0.2s ease;
}
/* Fade in animation for expanded content */
@keyframes fadeInExpand {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===================================
Projects Section - Card Layout
=================================== */
.project-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.project-card {
padding: 32px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.project-card:hover {
border-color: var(--color-text-light);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.project-card .card-tag {
display: inline-block;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
margin-bottom: 12px;
}
.project-card h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 4px;
}
.project-brief {
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 16px;
}
/* Project Links (GitHub / Demo) */
.project-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.project-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-border);
border-radius: 20px;
text-decoration: none;
transition: all 0.2s ease;
}
.project-link:hover {
border-color: var(--color-text);
color: var(--color-text);
}
.project-link svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Project Expanded Content */
.project-expanded {
display: none;
padding-top: 20px;
border-top: 1px solid var(--color-border);
margin-top: 16px;
}
.project-expanded.active {
display: block;
animation: fadeInExpand 0.3s ease;
}
.project-expanded h4 {
font-family: var(--font-body);
font-size: 1.0625rem;
font-weight: 600;
margin: 24px 0 12px 0;
color: var(--color-text);
}
.project-expanded h4:first-child {
margin-top: 0;
}
.project-expanded p {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 16px;
color: var(--color-text);
}
/* Project Toggle Button */
.project-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 8px 0;
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--color-text-muted);
cursor: pointer;
transition: color 0.2s ease;
margin-top: 8px;
}
.project-toggle:hover {
color: var(--color-text);
}
/* Project Admin Delete Button */
.project-admin-actions {
display: flex;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.project-admin-btn {
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
background: transparent;
}
.project-edit-btn {
color: var(--color-text-muted);
border: 1px solid var(--color-border);
}
.project-edit-btn:hover {
border-color: var(--color-text);
color: var(--color-text);
}
.project-delete-btn {
color: #e75480;
border: 1px solid #e75480;
}
.project-delete-btn:hover {
background: #e75480;
color: #fff;
}
/* Add Project Button */
.add-project-btn {
padding: 10px 20px;
font-size: 0.875rem;
font-weight: 500;
color: #fff;
background: #1a1a1a;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 24px;
}
.add-project-btn:hover {
background: #333;
}
[data-theme="dark"] .add-project-btn {
background: #fff;
color: #1a1a1a;
}
[data-theme="dark"] .add-project-btn:hover {
background: #e0e0e0;
}
/* Project Modal */
.project-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 5000;
padding: 20px;
}
.project-modal.active {
display: flex;
}
.project-modal-content {
background: var(--color-bg);
border-radius: 12px;
padding: 32px;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
position: relative;
}
.project-modal-content h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 24px;
color: var(--color-text);
}
/* Mobile responsive */
@media (max-width: 480px) {
.project-card {
padding: 20px;
}
.project-card h3 {
font-size: 1rem;
}
.project-brief {
font-size: 0.9375rem;
}
.project-links {
gap: 8px;
}
.project-link {
padding: 5px 12px;
font-size: 0.75rem;
}
.project-toggle {
min-height: 44px;
}
.project-modal-content {
padding: 24px;
}
}
/* ===================================
Community Cards - Expandable with Logos
=================================== */
.community-card {
position: relative;
}
.community-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.community-logo {
width: 60px;
height: 60px;
object-fit: contain;
flex-shrink: 0;
border-radius: 8px;
background: #fff;
padding: 4px;
}
.community-emoji {
font-size: 2.5rem;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.community-header h3 {
margin: 0;
}
.community-brief {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-text);
margin-bottom: 12px;
}
.community-expanded {
display: none;
padding-top: 16px;
border-top: 1px solid var(--color-border);
margin-top: 12px;
}
.community-expanded.active {
display: block;
animation: fadeInExpand 0.3s ease;
}
.community-expanded p {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 12px;
color: var(--color-text);
}
.community-expanded p:last-of-type {
margin-bottom: 16px;
}
.community-expanded p strong {
color: var(--color-text);
}
/* Community Toggle Button */
.community-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 8px 0;
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--color-text-muted);
cursor: pointer;
transition: color 0.2s ease;
margin-top: 4px;
}
.community-toggle:hover {
color: var(--color-text);
}
/* Mobile responsive */
@media (max-width: 480px) {
.community-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.community-logo {
width: 50px;
height: 50px;
}
}
/* ===================================
Thoughts Section (formerly Fieldnotes)
=================================== */
.thoughts-list {
max-width: 560px;
}
.thoughts-year-group {
margin-bottom: 32px;
}
.thoughts-year-group:last-child {
margin-bottom: 0;
}
.thoughts-year-label {
font-size: 0.8125rem;
color: var(--color-text-light);
font-weight: 500;
margin-bottom: 12px;
display: block;
}
.thoughts-links {
list-style: none;
padding: 0;
margin: 0;
}
.thoughts-links li {
margin-bottom: 10px;
line-height: 1.7;
}
.thoughts-links li:last-child {
margin-bottom: 0;
}
.thoughts-links a {
font-size: 1.0625rem;
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.thoughts-links a:hover {
border-bottom-color: var(--highlight-peach);
}
/* Substack RSS Feed Styles */
.thoughts-loading {
color: var(--color-text-muted);
font-size: 0.9375rem;
}
.thoughts-posts-list {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
counter-reset: none;
}
.thoughts-item {
display: flex;
gap: 12px;
margin-bottom: 14px;
align-items: flex-start;
}
.thoughts-item:last-child {
margin-bottom: 0;
}
.thoughts-number {
font-size: 1rem;
color: var(--color-text-muted);
font-weight: 500;
min-width: 24px;
flex-shrink: 0;
}
.thoughts-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.thoughts-title {
font-size: 1.0625rem;
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
line-height: 1.5;
}
.thoughts-title:hover {
border-bottom-color: var(--highlight-peach);
}
.thoughts-date {
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.thoughts-view-all {
display: inline-block;
font-size: 0.9375rem;
color: var(--color-text-muted);
text-decoration: none;
border-bottom: 1px solid var(--highlight-peach);
transition: color 0.2s ease;
margin-top: 16px;
}
.thoughts-view-all:hover {
color: var(--color-text);
}
.section-inline-link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--highlight-peach);
transition: color 0.2s ease;
}
.section-inline-link:hover {
color: var(--color-text);
}
/* ===================================
Philosophy Section
=================================== */
.philosophy-content {
max-width: 560px;
}
.philosophy-quote {
font-family: var(--font-serif);
font-size: 1.5rem;
font-style: italic;
line-height: 1.5;
color: var(--color-text);
margin-bottom: 32px;
padding-left: 24px;
border-left: 3px solid var(--color-border);
}
.philosophy-content p {
font-size: 1.125rem;
line-height: 1.8;
margin-bottom: 20px;
}
.philosophy-content p:last-child {
margin-bottom: 0;
}
/* ===================================
Content Worth Consuming
=================================== */
.content-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.consume-item {
display: grid;
grid-template-columns: 80px 1fr;
grid-template-rows: auto auto;
gap: 4px 16px;
align-items: baseline;
}
.consume-type {
grid-row: 1 / 3;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-light);
padding-top: 2px;
}
.consume-item h3 {
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.4;
}
.consume-author {
font-size: 1rem;
color: var(--color-text-muted);
}
/* ===================================
Photos Section
=================================== */
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.photo-item {
aspect-ratio: 1;
overflow: hidden;
border-radius: 8px;
}
.photo-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-border) 0%, #f5f5f5 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-light);
font-size: 0.8125rem;
transition: transform 0.3s ease;
}
.photo-item:hover .photo-placeholder {
transform: scale(1.05);
}
/* ===================================
Fun Facts Section
=================================== */
.fun-facts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.fun-fact {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
background: var(--color-card-bg);
border-radius: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}
.fun-fact:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.fun-fact-emoji {
font-size: 1.75rem;
line-height: 1;
flex-shrink: 0;
}
.fun-fact p {
font-size: 1.0625rem;
line-height: 1.5;
color: var(--color-text);
margin: 0;
}
.fun-fact strong {
color: var(--color-text);
font-weight: 600;
}
@media (max-width: 600px) {
.fun-facts-grid {
grid-template-columns: 1fr;
}
}
/* ===================================
Footer
=================================== */
.footer {
padding-top: 40px;
padding-bottom: 40px;
text-align: left;
font-size: 0.8125rem;
color: var(--color-text-light);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.footer p {
margin: 0;
}
/* ===================================
Responsive Design - Mobile First
Comprehensive mobile styling for optimal UX
=================================== */
/* Tablet breakpoint (900px and below) - Typography and layout only */
@media (max-width: 900px) {
/* Typography - Match desktop proportionally */
.name {
font-size: 1.625rem;
font-weight: 500;
line-height: 1.3;
}
.intro {
font-size: 1.0625rem;
line-height: 1.7;
}
.section-title {
font-size: 1.75rem;
font-weight: 600;
}
.photo-grid {
grid-template-columns: repeat(2, 1fr);
}
.consume-item {
grid-template-columns: 1fr;
}
.consume-type {
grid-row: auto;
}
}
/* Mobile breakpoint (600px and below) */
@media (max-width: 600px) {
/* Slightly larger base font for comfortable reading on phones */
html {
font-size: 16px;
}
/* Nav refinements for smaller screens */
.sidebar ul {
padding: 0 12px;
}
.nav-link {
font-size: 0.8125rem;
padding: 12px 10px;
}
/* Typography - Slightly reduced for mobile */
.name {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.3;
margin-bottom: 16px;
}
.intro {
font-size: 0.9375rem;
line-height: 1.7;
margin-bottom: 16px;
}
.about-story,
.about-content p,
.about-subsection p {
font-size: 0.9375rem;
line-height: 1.7;
}
.contact-line {
font-size: 0.9375rem;
line-height: 1.75;
}
/* Section spacing */
.section {
padding-top: 20px;
padding-bottom: 60px;
}
.section-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 8px;
}
.section-intro {
font-size: 0.9375rem;
margin-bottom: 32px;
}
/* Learn about me section */
.learn-about-list li {
margin-bottom: 14px;
font-size: 0.9375rem;
line-height: 1.7;
}
.learn-about-list em {
font-size: 0.8125rem;
}
/* About subsections */
.about-subsection {
margin-top: 40px;
margin-bottom: 40px;
}
.about-subsection:first-child {
margin-top: 24px;
}
.about-subsection p strong {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.7;
display: block;
margin-bottom: 16px;
}
.about-subtitle {
font-size: 1rem;
font-weight: 600;
margin-bottom: 8px;
margin-top: 0;
}
.about-subtitle-meta {
font-size: 0.9375rem;
font-weight: 600;
margin-bottom: 16px;
}
/* Tabs */
.tabs {
gap: 6px;
flex-wrap: wrap;
}
.tab {
padding: 10px 16px;
font-size: 0.875rem;
min-height: 44px;
}
/* Experience cards */
.experience-item {
padding: 20px;
}
.experience-header {
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
}
.experience-header h3 {
font-size: 0.9375rem;
}
.experience-date {
font-size: 0.8125rem;
}
.experience-company {
font-size: 0.8125rem;
}
.experience-brief {
font-size: 0.9375rem;
line-height: 1.7;
}
.experience-expanded h4 {
font-size: 0.875rem;
font-weight: 600;
}
.experience-expanded p,
.experience-expanded li {
font-size: 0.9375rem;
line-height: 1.7;
}
/* Toggle buttons - clean text style on mobile */
.experience-toggle,
.community-toggle {
min-height: 44px;
padding: 12px 20px;
font-size: 0.875rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: transparent;
}
.experience-toggle:hover,
.community-toggle:hover {
background: var(--color-card-bg);
border-color: var(--color-text-muted);
}
.background-toggle,
.beyond-work-toggle {
min-height: 44px;
padding: 0;
font-size: 0.875rem;
}
/* Community cards */
.community-expanded p,
.community-brief {
font-size: 0.9375rem;
line-height: 1.7;
}
/* Beyond work */
.beyond-work-item {
font-size: 0.9375rem;
line-height: 1.7;
}
/* Background list */
.background-preview li,
.background-full li {
font-size: 0.9375rem;
line-height: 1.7;
}
/* Unique abilities list */
.unique-abilities h2 {
font-size: 0.9375rem;
font-weight: 600;
}
.unique-abilities ul {
font-size: 0.9375rem;
line-height: 1.7;
}
.unique-abilities li {
margin-bottom: 2px;
padding-left: 16px;
}
/* About lists */
.about-list li {
font-size: 0.9375rem;
line-height: 1.7;
}
/* Content cards */
.content-card {
padding: 20px;
}
/* Photo grid */
.photo-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* Social links spacing - position handled by ≤900px block */
.social-links {
gap: 8px;
}
.social-links a,
.social-links button {
width: 44px;
height: 44px;
}
.social-links svg {
width: 20px;
height: 20px;
}
/* Individual icon adjustments for visual balance */
#social-twitter svg {
width: 21px;
height: 21px;
}
#social-linkedin svg {
width: 19px;
height: 19px;
}
#social-substack svg {
width: 20px;
height: 20px;
}
#social-email svg {
width: 20px;
height: 20px;
}
.social-view-counter {
height: 44px;
}
.social-view-counter svg {
width: 20px;
height: 20px;
}
.social-view-counter span {
font-size: 0.8125rem;
}
/* Thoughts section */
.thoughts-item {
margin-bottom: 10px;
}
.thoughts-title {
font-size: 0.9375rem;
line-height: 1.5;
}
.thoughts-date {
font-size: 0.8125rem;
}
/* Footer */
.footer {
padding: 32px 0;
font-size: 0.8125rem;
}
/* Prevent horizontal scroll */
body {
overflow-x: hidden;
}
/* Ensure images don't overflow */
img {
max-width: 100%;
height: auto;
}
}
/* ===================================
Scroll Animations
=================================== */
.section {
opacity: 0;
transform: translateY(20px);
animation: sectionFadeIn 0.6s ease forwards;
}
.section:nth-child(1) { animation-delay: 0.1s; }
.section:nth-child(2) { animation-delay: 0.15s; }
.section:nth-child(3) { animation-delay: 0.2s; }
.section:nth-child(4) { animation-delay: 0.25s; }
.section:nth-child(5) { animation-delay: 0.3s; }
.section:nth-child(6) { animation-delay: 0.35s; }
@keyframes sectionFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===================================
Scroll-Triggered Text Reveal Effect
Word-by-word reveal as user scrolls
=================================== */
/* Individual word spans created by JS */
.reveal-word {
display: inline;
transition: color 0.05s ease-out;
}
/* Links inside reveal text inherit color from word spans */
.reveal-word a,
a .reveal-word {
color: inherit;
}
/* Highlights maintain their background but inherit text color */
.reveal-word.highlight,
.highlight .reveal-word {
background-color: var(--color-highlight);
}
/* Mobile optimizations - faster transitions for touch scrolling */
@media (max-width: 768px) {
.reveal-word {
transition: color 0.03s ease-out;
}
}
/* Reduced Motion Support - show all text immediately */
@media (prefers-reduced-motion: reduce) {
.reveal-word {
color: var(--color-text) !important;
transition: none !important;
}
}
/* ===================================
Photos Section - Polaroid Gallery
=================================== */
.photo-tabs {
display: flex;
gap: 8px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.photo-tab {
padding: 10px 20px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-border);
border-radius: 100px;
cursor: pointer;
transition: all 0.2s ease;
}
.photo-tab:hover {
border-color: var(--color-text-muted);
color: var(--color-text);
}
.photo-tab.active {
background: var(--color-text);
color: var(--color-bg);
border-color: var(--color-text);
}
.add-photo-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
background: transparent;
border: 2px dashed var(--color-border);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 32px;
}
.add-photo-btn:hover {
border-color: var(--color-text-muted);
background: var(--color-card-bg);
}
/* Polaroid Gallery Grid */
.polaroid-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 40px;
padding: 20px 0;
}
/* Individual Polaroid */
.polaroid {
position: relative;
background: #fff;
padding: 12px 12px 48px 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
transition: transform 0.4s ease, box-shadow 0.3s ease;
cursor: pointer;
}
/* Random rotations for authentic feel */
.polaroid:nth-child(3n) { transform: rotate(-2deg); }
.polaroid:nth-child(3n+1) { transform: rotate(1.5deg); }
.polaroid:nth-child(3n+2) { transform: rotate(-1deg); }
.polaroid:nth-child(5n) { transform: rotate(2.5deg); }
.polaroid:nth-child(7n) { transform: rotate(-3deg); }
.polaroid:hover {
transform: rotate(0deg) scale(1.05) translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
z-index: 10;
}
/* Polaroid Image Container */
.polaroid-image {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
background: #f5f5f5;
position: relative;
}
.polaroid-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
filter: grayscale(100%);
transition: filter 0.5s ease;
}
.polaroid:hover .polaroid-image img {
filter: grayscale(0%);
}
/* Polaroid Caption Display (for visitors) */
.polaroid-caption-display {
position: absolute;
bottom: 8px;
left: 12px;
right: 12px;
font-family: 'Special Elite', 'Courier New', monospace;
font-size: 0.875rem;
color: #333;
text-align: center;
min-height: 28px;
padding: 4px;
letter-spacing: 0.5px;
}
/* Empty Polaroid Placeholder */
.polaroid-empty {
opacity: 0.7;
}
.polaroid-empty:hover {
transform: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.polaroid-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
border: 2px dashed #ccc;
}
.polaroid-placeholder-icon {
font-size: 3rem;
opacity: 0.4;
}
.polaroid-empty .polaroid-caption-display {
color: #999;
font-style: italic;
}
/* Polaroid Caption Input (admin only) */
.polaroid-caption {
position: absolute;
bottom: 8px;
left: 12px;
right: 12px;
font-family: 'Special Elite', 'Courier New', monospace;
font-size: 0.875rem;
color: #333;
text-align: center;
min-height: 28px;
padding: 4px;
border: none;
background: transparent;
outline: none;
cursor: text;
letter-spacing: 0.5px;
}
/* Hide caption display when admin input is shown */
.polaroid:has(.polaroid-caption.admin-only) .polaroid-caption-display {
display: none;
}
.polaroid-caption:focus {
background: rgba(0, 0, 0, 0.03);
border-radius: 4px;
}
.polaroid-caption::placeholder {
color: #aaa;
font-style: italic;
}
/* Delete button on polaroid */
.polaroid-delete {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ff4757;
color: white;
border: none;
font-size: 0.875rem;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.polaroid:hover .polaroid-delete {
opacity: 1;
}
.polaroid-delete:hover {
background: #ff3344;
transform: scale(1.1);
}
/* Photo Editor Modal */
.photo-editor-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px;
}
.photo-editor-modal.active {
display: flex;
}
.photo-editor-content {
background: var(--color-bg);
border-radius: 16px;
padding: 32px;
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
}
.photo-editor-content h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 24px;
color: var(--color-text);
}
.photo-editor-preview {
display: flex;
justify-content: center;
margin-bottom: 24px;
}
.polaroid-frame-preview {
background: #fff;
padding: 12px 12px 48px 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.photo-crop-area {
width: 200px;
height: 200px;
overflow: hidden;
background: #f5f5f5;
position: relative;
cursor: move;
}
.photo-crop-area img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
cursor: move;
user-select: none;
-webkit-user-drag: none;
transform-origin: center center;
}
.photo-editor-controls {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.photo-editor-controls label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.photo-editor-controls input[type="range"] {
width: 100%;
height: 6px;
border-radius: 3px;
background: var(--color-border);
outline: none;
-webkit-appearance: none;
}
.photo-editor-controls input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-text);
cursor: pointer;
}
.photo-editor-controls input[type="text"],
.photo-editor-controls select {
width: 100%;
padding: 12px;
font-family: var(--font-body);
font-size: 0.875rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-text);
outline: none;
transition: border-color 0.2s ease;
}
.photo-editor-controls input[type="text"]:focus,
.photo-editor-controls select:focus {
border-color: var(--color-text-muted);
}
.photo-editor-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.photo-btn-primary,
.photo-btn-secondary {
padding: 12px 24px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.photo-btn-primary {
background: var(--color-text);
color: var(--color-bg);
border: none;
}
.photo-btn-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.photo-btn-secondary {
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-border);
}
.photo-btn-secondary:hover {
border-color: var(--color-text-muted);
}
/* Empty state */
.polaroid-gallery-empty {
text-align: center;
padding: 60px 20px;
color: var(--color-text-muted);
font-size: 1rem;
grid-column: 1 / -1;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.polaroid-gallery {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 24px;
}
.polaroid {
padding: 8px 8px 56px 8px;
}
.polaroid-caption,
.polaroid-caption-display {
font-size: 0.8125rem;
bottom: 8px;
min-height: 36px;
line-height: 1.4;
}
.photo-editor-content {
padding: 20px;
}
.photo-crop-area {
width: 160px;
height: 160px;
}
}
/* ===================================
Content Calendar Section
=================================== */
/* View Controls - Toggle & Add Button */
.content-view-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 12px;
}
.view-toggle {
display: flex;
background: var(--color-card-bg);
border-radius: 100px;
padding: 4px;
border: 1px solid var(--color-border);
}
.view-toggle-btn {
padding: 8px 20px;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-muted);
background: transparent;
border: none;
border-radius: 100px;
cursor: pointer;
transition: all 0.2s ease;
}
.view-toggle-btn:hover {
color: var(--color-text);
}
.view-toggle-btn.active {
background: var(--color-text);
color: var(--color-bg);
}
.add-content-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text);
background: transparent;
border: 1px solid var(--color-border);
border-radius: 100px;
cursor: pointer;
transition: all 0.2s ease;
}
.add-content-btn:hover {
border-color: var(--color-text-muted);
background: var(--color-card-bg);
}
/* Calendar View */
.content-calendar-view {
margin-top: 16px;
}
.calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.calendar-month {
font-family: var(--font-body);
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
}
.calendar-nav {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
font-size: 1rem;
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-border);
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
}
.calendar-nav:hover {
border-color: var(--color-text-muted);
color: var(--color-text);
background: var(--color-card-bg);
}
/* Weekday Headers */
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
}
.calendar-weekdays span {
text-align: center;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
padding: 8px 0;
}
/* Calendar Grid */
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.calendar-day {
aspect-ratio: 1;
min-height: 60px;
padding: 6px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
position: relative;
}
.calendar-day:hover {
border-color: var(--color-text-muted);
background: var(--color-card-bg);
}
.calendar-day.empty {
opacity: 0.3;
cursor: default;
background: transparent;
border-color: transparent;
}
.calendar-day.empty:hover {
background: transparent;
border-color: transparent;
}
.calendar-day.today {
border-color: var(--highlight-lavender);
background: rgba(200, 160, 255, 0.08);
}
/* Pastel border colors for each day of the week */
.calendar-day.has-content {
border-width: 2px;
}
.calendar-day.has-content.day-sun {
border-color: #FFB5BA; /* Soft coral/pink */
}
.calendar-day.has-content.day-mon {
border-color: #B5D8FF; /* Soft sky blue */
}
.calendar-day.has-content.day-tue {
border-color: #C5F0C5; /* Soft mint green */
}
.calendar-day.has-content.day-wed {
border-color: #FFD9B5; /* Soft peach */
}
.calendar-day.has-content.day-thu {
border-color: #D4B5FF; /* Soft lavender */
}
.calendar-day.has-content.day-fri {
border-color: #B5F0F0; /* Soft teal */
}
.calendar-day.has-content.day-sat {
border-color: #FFE5B5; /* Soft yellow */
}
.calendar-day-number {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-text-muted);
line-height: 1;
}
.calendar-day.today .calendar-day-number {
color: var(--color-text);
font-weight: 600;
}
/* Content Dots */
.calendar-day-dots {
display: flex;
gap: 3px;
flex-wrap: wrap;
margin-top: auto;
padding-top: 4px;
}
.content-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.content-dot.article { background: #f5a855; }
.content-dot.substack { background: rgba(255, 160, 120, 0.9); }
.content-dot.video { background: rgba(120, 170, 255, 0.9); }
.content-dot.podcast { background: rgba(120, 200, 180, 0.9); }
.content-dot.book { background: rgba(190, 140, 255, 0.9); }
/* Tooltip on hover */
.calendar-day-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--color-text);
color: var(--color-bg);
padding: 8px 12px;
border-radius: 6px;
font-size: 0.75rem;
white-space: normal;
max-width: 260px;
width: max-content;
line-height: 1.4;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 100;
pointer-events: none;
}
.calendar-day:hover .calendar-day-tooltip {
opacity: 1;
visibility: visible;
}
/* View visibility */
.content-list-view.hidden,
.content-calendar-view.hidden {
display: none;
}
/* Month group labels for list view */
.content-month-group {
margin-bottom: 32px;
}
.content-month-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border);
}
/* Clean Content List (no category labels) */
.content-clean-list {
list-style: none;
padding: 0;
margin: 0;
}
.content-clean-item {
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.content-clean-item:last-child {
border-bottom: none;
}
/* Admin edit/delete buttons */
.content-admin-actions {
margin-left: auto;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.2s ease;
}
.content-clean-item:hover .content-admin-actions {
opacity: 1;
}
.content-edit-btn,
.content-delete-btn {
background: none;
border: none;
padding: 4px 6px;
cursor: pointer;
font-size: 0.875rem;
border-radius: 4px;
transition: background 0.2s ease;
}
.content-edit-btn:hover {
background: rgba(0, 0, 0, 0.05);
}
.content-delete-btn:hover {
background: rgba(255, 0, 0, 0.1);
}
.content-clean-link {
font-size: 1rem;
color: var(--color-text);
text-decoration: none;
transition: all 0.2s ease;
}
.content-clean-link[href]:not([href="javascript:void(0)"]) {
color: #2a2a2a;
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0.25);
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
cursor: pointer;
}
.content-clean-link[href]:not([href="javascript:void(0)"])::after {
content: ' ↗';
font-size: 0.8125rem;
display: inline-block;
transition: transform 0.2s ease;
}
.content-clean-link[href]:not([href="javascript:void(0)"]):hover {
color: #000;
text-decoration-color: rgba(0, 0, 0, 0.5);
}
.content-clean-link[href]:not([href="javascript:void(0)"]):hover::after {
transform: translate(1px, -1px);
}
.content-clean-source {
font-size: 0.875rem;
color: var(--color-text-muted);
font-style: italic;
margin-left: 8px;
}
.content-list-empty {
text-align: center;
padding: 40px 20px;
color: var(--color-text-muted);
font-size: 0.875rem;
}
/* Pagination */
.content-list-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 24px 0 8px;
border-top: 1px solid var(--color-border);
margin-top: 8px;
}
.pagination-btn {
padding: 8px 18px;
font-size: 0.875rem;
font-weight: 500;
font-family: var(--font-body);
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-border);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.pagination-btn:hover:not(:disabled) {
border-color: var(--color-text);
color: var(--color-text);
}
.pagination-btn:disabled {
opacity: 0.3;
cursor: default;
}
.pagination-info {
font-size: 0.8125rem;
color: var(--color-text-muted);
}
/* Date-grouped list view */
.content-date-group {
margin-bottom: 24px;
padding: 16px;
border-radius: 12px;
background: transparent;
transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
.content-date-group.highlighted {
background: rgba(0, 0, 0, 0.02);
border-left: 2px solid var(--color-text-muted);
padding-left: 14px;
}
.content-date-group.highlight-fade {
background: transparent;
transition: background-color 1s ease;
}
.content-date-header {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border);
}
.content-date-group.highlighted .content-date-header {
color: var(--color-text);
}
/* Category pill in list items */
.content-item-category {
display: inline-block;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 6px;
border-radius: 4px;
margin-right: 8px;
background: var(--highlight-peach);
color: var(--color-text);
}
.content-item-category.video {
background: var(--highlight-blue);
}
.content-item-category.book {
background: var(--highlight-lavender);
}
.content-item-category.podcast {
background: rgba(120, 200, 180, 0.3);
}
.content-item-category.newsletter {
background: var(--highlight-peach);
}
/* Day Detail Panel */
.content-day-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
pointer-events: none;
visibility: hidden;
}
.content-day-panel.active {
pointer-events: auto;
visibility: visible;
}
.panel-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
cursor: pointer;
}
.panel-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 100%;
background: var(--color-bg);
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
border-left: 1px solid var(--color-border);
padding: 32px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.content-day-panel.active .panel-content {
transform: translateX(0);
}
.panel-close {
position: absolute;
top: 24px;
right: 24px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--color-text-muted);
background: transparent;
border: none;
cursor: pointer;
transition: color 0.2s ease;
}
.panel-close:hover {
color: var(--color-text);
}
.panel-date {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 24px;
padding-right: 40px;
}
.panel-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.panel-item {
padding: 16px;
background: var(--color-card-bg);
border-radius: 8px;
border: 1px solid var(--color-border);
}
.panel-item-category {
display: inline-block;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 4px 8px;
border-radius: 100px;
margin-bottom: 8px;
}
.panel-item-category.article { background: rgba(245, 168, 85, 0.2); color: #c77a20; }
.panel-item-category.substack { background: var(--highlight-peach); color: #8b4513; }
.panel-item-category.video { background: var(--highlight-blue); color: #2563eb; }
.panel-item-category.podcast { background: rgba(120, 200, 180, 0.3); color: #047857; }
.panel-item-category.book { background: var(--highlight-lavender); color: #7c3aed; }
.panel-item-category.newsletter { background: var(--highlight-peach); color: #8b4513; }
/* Detail category colors */
.detail-category.article { background: rgba(245, 168, 85, 0.3); }
.detail-category.video { background: var(--highlight-blue); }
.detail-category.book { background: var(--highlight-lavender); }
.detail-category.podcast { background: rgba(120, 200, 180, 0.3); }
.detail-category.newsletter { background: var(--highlight-peach); }
.panel-item-title {
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
display: block;
margin-bottom: 4px;
transition: color 0.2s ease;
}
.panel-item-title:hover {
color: var(--color-text-muted);
}
.panel-item-source {
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.panel-item-description {
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-top: 8px;
font-style: italic;
}
.panel-empty {
text-align: center;
padding: 40px 20px;
color: var(--color-text-muted);
font-size: 0.875rem;
}
/* Add Content Modal */
.add-content-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 3000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.add-content-modal.active {
display: flex;
}
.add-content-form {
position: relative;
margin: auto;
background: var(--color-bg);
border-radius: 16px;
padding: 28px;
width: 90vw;
max-width: 420px;
max-height: 80vh;
overflow-y: auto;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
}
.add-content-form h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 16px;
padding-right: 36px;
flex-shrink: 0;
}
.form-group {
margin-bottom: 12px;
flex-shrink: 0;
}
.form-group label {
display: block;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 8px 10px;
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 6px;
outline: none;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus {
border-color: var(--color-text-muted);
}
.form-group input::placeholder {
color: var(--color-text-light);
}
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 16px;
padding-top: 8px;
flex-shrink: 0;
}
.btn-primary,
.btn-secondary {
padding: 10px 20px;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background: var(--color-text);
color: var(--color-bg);
border: none;
}
.btn-primary:hover {
opacity: 0.9;
}
.btn-secondary {
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-border);
}
.btn-secondary:hover {
border-color: var(--color-text-muted);
}
/* Modal close button */
.modal-close-btn {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--color-text-muted);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
line-height: 1;
z-index: 10;
}
.modal-close-btn:hover {
color: var(--color-text);
border-color: var(--color-text-muted);
}
/* Required field indicator */
.required {
color: #e75480;
}
/* Category Pills */
.category-pills {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 4px;
}
.category-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 500;
color: var(--color-text-muted);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 100px;
cursor: pointer;
transition: all 0.2s ease;
}
.category-pill:hover {
border-color: var(--color-text-muted);
color: var(--color-text);
}
.category-pill.active {
border-color: var(--color-text);
color: var(--color-text);
background: var(--color-card-bg);
}
.category-pill .category-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.category-dot.article { background: #f5a855; }
.category-dot.video { background: rgba(120, 170, 255, 0.9); }
.category-dot.book { background: rgba(190, 140, 255, 0.9); }
.category-dot.podcast { background: rgba(120, 200, 180, 0.9); }
.category-dot.newsletter { background: rgba(255, 160, 120, 0.9); }
/* Newsletter dot for calendar */
.content-dot.newsletter { background: rgba(255, 160, 120, 0.9); }
/* Textarea styling */
.form-group textarea {
width: 100%;
padding: 8px 10px;
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 6px;
outline: none;
resize: none;
height: 60px;
transition: border-color 0.2s ease;
line-height: 1.5;
box-sizing: border-box;
}
.form-group textarea:focus {
border-color: var(--color-text-muted);
}
.form-group textarea::placeholder {
color: var(--color-text-light);
}
/* ===================================
Content Detail View (Full Page)
=================================== */
.content-detail-view {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-bg);
z-index: 2500;
overflow-y: auto;
padding: 0;
}
.content-detail-view.active {
display: block;
}
.detail-header {
position: sticky;
top: 0;
background: var(--color-bg);
padding: 20px 24px;
border-bottom: 1px solid var(--color-border);
z-index: 10;
}
.detail-back-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
background: transparent;
border: none;
cursor: pointer;
padding: 8px 0;
transition: color 0.2s ease;
}
.detail-back-btn:hover {
color: var(--color-text);
}
.detail-back-btn svg {
flex-shrink: 0;
}
.detail-content {
max-width: 680px;
margin: 0 auto;
padding: 48px 24px 80px;
}
.detail-title {
font-family: var(--font-body);
font-size: 2rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-text);
margin-bottom: 16px;
}
.detail-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: var(--color-text-muted);
margin-bottom: 32px;
}
.detail-separator {
color: var(--color-text-light);
}
.detail-category {
display: inline-block;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
border-radius: 100px;
background: var(--highlight-peach);
color: var(--color-text);
}
.detail-link-card {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 24px;
margin-bottom: 40px;
}
.detail-original-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
padding: 12px 20px;
border: 1px solid var(--color-border);
border-radius: 8px;
transition: all 0.2s ease;
}
.detail-original-link:hover {
border-color: var(--color-text-muted);
background: var(--color-bg);
}
.detail-thoughts-section {
margin-top: 40px;
}
.detail-thoughts-title {
font-family: var(--font-body);
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.detail-thoughts-content {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--color-text);
}
.detail-thoughts-content p {
margin-bottom: 16px;
}
.detail-thoughts-content p:last-child {
margin-bottom: 0;
}
.detail-no-thoughts {
font-style: italic;
color: var(--color-text-muted);
}
/* ===================================
Floating Action Button (Mobile)
=================================== */
.fab-add-content {
display: none;
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-text);
color: var(--color-bg);
border: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 1000;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.fab-add-content:hover {
transform: scale(1.05);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.fab-add-content svg {
stroke-width: 2.5;
}
/* ===================================
Mobile Responsive Styles
=================================== */
@media (max-width: 900px) {
/* Prevent horizontal scroll on mobile */
html, body {
overflow-x: hidden;
}
/* ===== HAMBURGER MENU - Clean box design ===== */
.mobile-menu-toggle {
display: flex;
position: fixed;
top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px));
left: max(16px, calc(env(safe-area-inset-left, 0px) + 8px));
z-index: 301;
width: 48px;
height: 48px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 12px;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: all 0.2s ease;
}
.mobile-menu-toggle:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: var(--color-text-muted);
}
.hamburger-icon {
display: flex;
flex-direction: column;
gap: 5px;
width: 20px;
}
.mobile-menu-toggle .hamburger-line {
width: 20px;
height: 2px;
background: var(--color-text);
transition: all 0.3s ease;
border-radius: 1px;
}
/* Hide menu label - just show icon */
.menu-label {
display: none;
}
/* Hamburger to X animation */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
}
.mobile-menu-toggle.active .menu-label {
display: none;
}
/* ===== SIDEBAR - Full-screen menu ===== */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
z-index: 300;
/* Top: clear hamburger button + safe area. Bottom: clear home indicator */
padding: max(100px, calc(env(safe-area-inset-top, 0px) + 72px)) 32px max(40px, calc(env(safe-area-inset-bottom, 0px) + 20px));
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.sidebar.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.sidebar-overlay {
display: none;
}
.sidebar-content {
display: block;
flex: 1;
}
/* Vertical menu layout */
.sidebar ul {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
margin: 0;
}
.sidebar li {
margin: 0;
}
.sidebar li::after {
display: none !important;
}
/* Nav links - vertical style */
.nav-link {
display: block;
padding: 16px 20px;
font-size: 1.125rem;
color: var(--color-text-muted);
border-radius: 8px;
transition: all 0.2s ease;
}
.nav-link:hover {
color: var(--color-text);
background: var(--color-card-bg);
}
.nav-link.active {
color: var(--color-text);
background: var(--color-card-bg);
}
/* Remove underline on mobile menu */
.nav-link::after {
display: none;
}
/* ===== MAIN CONTENT ===== */
.main-content {
margin-left: 0;
/* top: clear hamburger (48px) + safe area. bottom: clear social pill + safe area */
padding: max(80px, calc(env(safe-area-inset-top, 0px) + 72px)) 24px calc(100px + env(safe-area-inset-bottom, 0px));
max-width: 100vw;
width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
/* Ensure sections are visible (override animation opacity) */
.section {
opacity: 1;
transform: none;
}
/* ===== SOCIAL LINKS - Centered at bottom ===== */
.social-links {
position: fixed;
top: auto;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
left: 50%;
right: auto;
transform: translateX(-50%);
gap: 12px;
background: var(--color-bg);
padding: 10px 16px;
border-radius: 24px;
border: 1px solid var(--color-border);
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
z-index: 100;
/* Prevent pill from being wider than viewport */
max-width: calc(100vw - 32px);
}
.social-links a,
.social-links button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: url('data:image/svg+xml,') 16 16, pointer;
}
.social-links svg {
width: 20px;
height: 20px;
}
/* Individual icon adjustments for visual balance on mobile */
#social-twitter svg {
width: 21px;
height: 21px;
}
#social-linkedin svg {
width: 19px;
height: 19px;
}
#social-substack svg {
width: 20px;
height: 20px;
}
#social-email svg {
width: 20px;
height: 20px;
}
.social-view-counter {
height: 40px;
}
.social-view-counter svg {
width: 20px;
height: 20px;
}
.social-view-counter span {
font-size: 0.8125rem;
line-height: 1;
}
/* Pink flower cursor for all clickable elements on mobile */
a:hover,
button:hover,
.highlight:hover,
[role="button"]:hover {
cursor: url('data:image/svg+xml,') 16 16, pointer;
}
/* Show FAB on mobile */
.fab-add-content {
display: flex;
width: 56px;
height: 56px;
}
/* Hide desktop add content button */
.add-content-btn {
display: none;
}
}
@media (max-width: 600px) {
.content-view-controls {
flex-direction: column;
align-items: stretch;
}
.view-toggle {
align-self: center;
}
/* Calendar mobile adjustments */
.calendar-day {
min-height: 50px;
padding: 4px;
}
.calendar-day-number {
font-size: 0.6875rem;
}
.content-dot {
width: 6px;
height: 6px;
}
.calendar-weekdays span {
font-size: 0.625rem;
}
/* Hide tooltip on mobile - use tap instead */
.calendar-day-tooltip {
display: none;
}
/* Date-grouped list view on mobile */
.content-date-group {
margin-bottom: 20px;
padding: 12px;
}
.content-date-header {
font-size: 0.8125rem;
margin-bottom: 10px;
padding-bottom: 6px;
}
.content-clean-item {
padding: 10px 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px;
}
.content-item-category {
font-size: 0.5625rem;
padding: 2px 5px;
margin-right: 6px;
}
.content-clean-link {
font-size: 0.9375rem;
flex: 1;
min-width: 0;
}
.content-clean-source {
font-size: 0.8125rem;
width: 100%;
margin-left: 0;
margin-top: 4px;
}
/* Full-screen panel on mobile */
.panel-content {
width: 100%;
padding: 24px;
}
.panel-date {
font-size: 1.125rem;
}
/* Full-screen modal on mobile */
.add-content-modal {
padding: 0;
}
.add-content-modal.active {
padding: 0;
}
.add-content-form {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
padding: 20px;
padding-top: 60px;
box-shadow: none;
}
.add-content-form h3 {
padding-right: 36px;
}
.modal-close-btn {
top: 14px;
right: 14px;
}
/* Category pills - 44px minimum touch target */
.category-pills {
gap: 8px;
}
.category-pill {
padding: 10px 16px;
font-size: 0.875rem;
min-height: 44px;
display: flex;
align-items: center;
}
/* Detail view mobile */
.detail-title {
font-size: 1.375rem;
line-height: 1.3;
}
.detail-content {
padding: 32px 20px 60px;
}
.detail-meta {
font-size: 0.875rem;
}
.detail-original-link {
width: 100%;
justify-content: center;
min-height: 48px;
font-size: 1rem;
}
/* View toggle buttons */
.view-toggle-btn {
min-height: 44px;
padding: 10px 16px;
}
/* Photo gallery on mobile */
.polaroid-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.polaroid {
padding: 8px 8px 60px 8px;
}
.polaroid-caption,
.polaroid-caption-display {
font-size: 0.75rem;
bottom: 10px;
left: 8px;
right: 8px;
min-height: 40px;
line-height: 1.4;
display: flex;
align-items: center;
justify-content: center;
}
/* Polaroid shows color on hover/touch on mobile */
.polaroid:hover .polaroid-image img,
.polaroid:active .polaroid-image img,
.polaroid:focus .polaroid-image img {
filter: grayscale(0%);
}
/* Modal close button - larger touch target */
.modal-close-btn {
width: 44px;
height: 44px;
}
/* Panel close button */
.panel-close {
width: 44px;
height: 44px;
}
}
/* Extra small screens (375px and below) */
@media (max-width: 375px) {
html {
font-size: 15px;
}
.main-content {
padding: max(80px, calc(env(safe-area-inset-top, 0px) + 72px)) 16px calc(100px + env(safe-area-inset-bottom, 0px));
}
.calendar-day {
min-height: 40px;
}
/* Typography - scaled for small phones */
.name {
font-size: 1.375rem;
font-weight: 500;
margin-bottom: 14px;
}
.section-title {
font-size: 1.375rem;
font-weight: 600;
margin-bottom: 8px;
}
.intro {
font-size: 0.875rem;
line-height: 1.7;
}
/* Body text - scaled for small phones */
.about-content p,
.about-subsection p,
.experience-brief,
.community-brief,
.experience-expanded p,
.experience-expanded li,
.community-expanded p,
.beyond-work-item,
.background-preview li,
.background-full li {
font-size: 0.875rem;
line-height: 1.7;
}
/* Learn about me list */
.learn-about-list li {
font-size: 0.875rem;
margin-bottom: 12px;
line-height: 1.7;
}
.learn-about-list em {
font-size: 0.75rem;
}
/* Unique abilities */
.unique-abilities h2 {
font-size: 0.875rem;
font-weight: 600;
}
.unique-abilities ul {
font-size: 0.875rem;
line-height: 1.7;
}
/* Tabs stack vertically */
.tabs {
flex-direction: column;
gap: 6px;
}
.tab {
width: 100%;
text-align: center;
padding: 12px 14px;
font-size: 0.875rem;
min-height: 44px;
}
/* Category pills */
.category-pills {
flex-wrap: wrap;
}
.category-pill {
flex: 1 1 45%;
justify-content: center;
min-height: 44px;
font-size: 0.875rem;
}
/* Cards - consistent padding */
.experience-item,
.content-card {
padding: 18px;
}
/* Social links - maintain touch targets */
.social-links {
gap: 4px;
right: 12px;
top: 12px;
}
.social-links a,
.social-links button {
width: 44px;
height: 44px;
}
.social-links svg {
width: 18px;
height: 18px;
}
/* Individual icon adjustments for visual balance */
#social-twitter svg {
width: 19px;
height: 19px;
}
#social-linkedin svg {
width: 17px;
height: 17px;
}
#social-substack svg {
width: 18px;
height: 18px;
}
#social-email svg {
width: 18px;
height: 18px;
}
.social-view-counter {
height: 44px;
}
.social-view-counter svg {
width: 18px;
height: 18px;
}
.social-view-counter span {
font-size: 0.75rem;
}
}
/* ===================================
Guestbook - Windows 95 Notepad Style
=================================== */
.win95-notepad {
max-width: 560px;
width: 100%;
background: #c0c0c0;
border: 2px outset #dfdfdf;
box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
font-family: 'Segoe UI', Tahoma, sans-serif;
}
.win95-titlebar {
background: linear-gradient(90deg, #000080, #1084d0);
color: white;
padding: 3px 4px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
font-weight: bold;
}
.win95-icon {
margin-right: 4px;
}
.win95-title-text {
flex: 1;
}
.win95-controls {
display: flex;
gap: 2px;
}
.win95-controls button {
width: 16px;
height: 14px;
background: #c0c0c0;
border: 2px outset #fff;
font-size: 0.625rem;
line-height: 1;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.win95-controls button:active {
border-style: inset;
}
.win95-menubar {
background: #c0c0c0;
padding: 2px 4px;
display: flex;
gap: 4px;
font-size: 0.75rem;
border-bottom: 1px solid #808080;
}
.win95-menubar span {
padding: 2px 8px;
cursor: pointer;
}
.win95-menubar span:hover {
background: #000080;
color: white;
}
.win95-editor {
background: #fff;
border: 2px inset #808080;
margin: 2px;
height: 350px;
overflow-y: auto;
}
.win95-textarea {
padding: 4px 6px;
font-family: 'Lucida Console', 'Courier New', monospace;
font-size: 0.8125rem;
line-height: 1.5;
color: #000;
min-height: 100%;
}
/* Entry styling */
.notepad-entry {
margin-bottom: 16px;
border-bottom: 1px dotted #808080;
padding-bottom: 12px;
}
.notepad-entry:last-child {
border-bottom: none;
}
.notepad-entry-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.notepad-entry-date {
color: #808080;
font-size: 0.6875rem;
}
.notepad-delete-btn {
background: #c0c0c0;
border: 2px outset #dfdfdf;
color: #000;
font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
font-size: 0.75rem;
font-weight: bold;
width: 20px;
height: 18px;
padding: 0;
cursor: pointer;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.notepad-delete-btn:hover {
background: #d4d4d4;
}
.notepad-delete-btn:active {
border: 2px inset #808080;
background: #a0a0a0;
}
.notepad-delete-btn:disabled {
color: #808080;
cursor: not-allowed;
}
.notepad-entry-message {
color: #000;
}
.notepad-empty {
color: #808080;
text-align: center;
padding: 40px 20px;
}
/* Footer section */
.win95-footer {
background: #c0c0c0;
padding: 4px;
}
.win95-input {
width: 100%;
min-height: 50px;
padding: 6px;
font-family: 'Lucida Console', 'Courier New', monospace;
font-size: 0.8125rem;
border: 2px inset #808080;
background: #fff;
resize: none;
outline: none;
box-sizing: border-box;
margin-bottom: 4px;
}
.win95-input::placeholder {
color: #808080;
}
.win95-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.win95-charcount {
font-size: 0.6875rem;
color: #000;
}
.win95-btn {
background: #c0c0c0;
border: 2px outset #fff;
padding: 4px 16px;
font-family: 'Segoe UI', Tahoma, sans-serif;
font-size: 0.75rem;
cursor: pointer;
}
.win95-btn:active {
border-style: inset;
}
.win95-btn:hover {
background: #d4d4d4;
}
.win95-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding-top: 4px;
border-top: 1px solid #808080;
}
.win95-nav-btn {
background: #c0c0c0;
border: 2px outset #fff;
padding: 3px 10px;
font-family: 'Segoe UI', Tahoma, sans-serif;
font-size: 0.6875rem;
cursor: pointer;
}
.win95-nav-btn:active {
border-style: inset;
}
.win95-nav-btn:disabled {
color: #808080;
}
#notepad-page-info {
font-size: 0.6875rem;
color: #000;
min-width: 80px;
text-align: center;
}
/* Mobile responsive */
@media (max-width: 600px) {
.win95-notepad {
max-width: 100%;
}
.win95-editor {
height: 180px;
}
.win95-textarea {
font-size: 0.75rem;
}
.win95-input {
font-size: 16px; /* Prevent iOS zoom */
min-height: 60px;
}
.win95-titlebar {
font-size: 0.6875rem;
}
.win95-menubar {
font-size: 0.6875rem;
flex-wrap: wrap;
}
.win95-menubar span {
padding: 2px 6px;
}
.win95-btn {
padding: 6px 12px;
}
.notepad-delete-btn {
width: 24px;
height: 22px;
font-size: 0.875rem;
}
.notepad-entry-header {
gap: 8px;
}
}
@media (max-width: 375px) {
.win95-editor {
height: 150px;
}
}
/* Print Styles */
@media print {
.sidebar,
.social-links {
display: none;
}
.main-content {
margin-left: 0;
padding: 0;
}
.highlight {
background: none !important;
text-decoration: underline;
}
}