/* ========================================================== Aravind Vasudevan — aravindvas.com Structure and palette modelled on thariq.io: warm paper, gold + bronze, EB Garamond prose under Cormorant headings, and a spring-eased mode toggle. ========================================================== */ :root { --background: 42 45% 97%; --foreground: 215 28% 17%; --card: 40 40% 95%; --card-foreground: 215 28% 17%; --muted: 40 25% 88%; --muted-foreground: 215 15% 45%; --accent: 43 74% 52%; --border: 40 20% 82%; --gold: 43 74% 52%; --bronze: 30 45% 45%; --burnt-sienna: 15 60% 45%; --radius: .5rem; --shadow-warm: 0 4px 20px -4px hsl(var(--bronze) / .18), 0 2px 8px -2px hsl(var(--gold) / .1); --shadow-warm-lg: 0 10px 40px -8px hsl(var(--bronze) / .22), 0 4px 16px -4px hsl(var(--gold) / .14); --ease-spring: cubic-bezier(.68, -.55, .265, 1.55); } :root[data-theme="dark"] { --background: 215 35% 12%; --foreground: 42 45% 95%; --card: 215 30% 15%; --card-foreground: 42 45% 95%; --muted: 215 20% 25%; --muted-foreground: 42 20% 65%; --accent: 43 65% 48%; --border: 215 20% 25%; --gold: 43 65% 48%; --bronze: 30 40% 38%; --burnt-sienna: 15 50% 40%; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground) / .82); font-family: "EB Garamond", Georgia, serif; font-size: .92rem; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease; } ::selection { background: hsl(var(--gold) / .28); color: hsl(var(--foreground)); } /* mode-gated visibility: [data-mode] on picks one set */ [data-mode="professional"] [data-mode="personal"], [data-mode="personal"] [data-mode="professional"] { display: none; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 40; background: hsl(var(--card)); color: hsl(var(--foreground)); padding: 10px 16px; border: 1px solid hsl(var(--border)); border-radius: 4px; } .skip-link:focus { left: 16px; top: 16px; } /* the signature link: a gold rule that wipes in from the left */ .illuminated-link { position: relative; text-decoration: none; font-weight: 500; color: hsl(var(--foreground)); background: linear-gradient(to right, hsl(var(--gold)), hsl(var(--gold))) no-repeat; background-size: 0% 2px; background-position: left bottom; transition: background-size .3s ease, color .3s ease; } .illuminated-link:hover, .illuminated-link:focus-visible { background-size: 100% 2px; color: hsl(var(--gold)); } .illuminated-link:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; border-radius: 2px; } /* ---------- Shell ---------- */ .shell { max-width: 75rem; min-height: 100svh; margin: 0 auto; padding: 1.75rem 1.5rem 2.5rem; display: flex; flex-direction: column; } .stack { display: flex; flex-direction: column; gap: 2.5rem; flex: 1; } /* ---------- Masthead ---------- */ .masthead { margin-bottom: 3rem; } .nav { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .nav__side { display: flex; flex: 1; align-items: center; min-width: 0; } .nav__side--left { justify-content: flex-start; } .nav__side--right { justify-content: flex-end; } .nav__center { display: flex; justify-content: center; flex: 0 0 auto; } .nav__home { font-size: 1.15rem; font-weight: 500; color: hsl(var(--foreground) / .8); text-decoration: none; transition: color .25s ease; } .nav__home:hover { color: hsl(var(--gold)); } /* ---------- Mode toggle ---------- */ .mode-toggle { display: flex; align-items: center; gap: .5rem; } .ornament { display: block; width: 2.5rem; height: 1px; background: linear-gradient(to right, transparent, hsl(var(--gold) / .55)); } .ornament--right { background: linear-gradient(to left, transparent, hsl(var(--gold) / .55)); } .toggle-track { position: relative; width: 280px; height: 48px; background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted) / .3)); border: 1.5px solid hsl(var(--bronze) / .3); border-radius: 2rem; overflow: hidden; box-shadow: inset 0 2px 8px #0000001a, 0 2px 12px hsl(var(--gold) / .1); } :root[data-theme="dark"] .toggle-track { background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted) / .2)); border-color: hsl(var(--gold) / .2); } .toggle-indicator { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 132px; height: 40px; background: linear-gradient(135deg, hsl(var(--gold) / .5), hsl(var(--gold) / .3)); border-radius: 2rem; box-shadow: 0 4px 16px hsl(var(--gold) / .25), 0 2px 8px hsl(var(--gold) / .12); transition: left .6s var(--ease-spring), background .4s ease, box-shadow .4s ease; } .toggle-indicator::before { content: ""; position: absolute; inset: 0; border-radius: 2rem; background: linear-gradient(135deg, #ffffff4d, #fff0, #ffffff0d); opacity: .5; } [data-mode="personal"] .toggle-indicator { left: calc(100% - 136px); background: linear-gradient(135deg, hsl(var(--burnt-sienna) / .5), hsl(var(--burnt-sienna) / .3)); box-shadow: 0 4px 16px hsl(var(--burnt-sienna) / .25), 0 2px 8px hsl(var(--burnt-sienna) / .15); } .toggle-option { position: absolute; top: 0; height: 100%; width: 50%; display: flex; align-items: center; justify-content: center; gap: .375rem; background: none; border: none; cursor: pointer; font-family: "Cormorant Garamond", Georgia, serif; font-size: .875rem; font-weight: 500; letter-spacing: .5px; color: hsl(var(--foreground) / .4); transition: color .3s ease, font-weight .3s ease; } .toggle-option:hover { color: hsl(var(--foreground) / .7); } .toggle-option[aria-pressed="true"] { color: hsl(var(--foreground)); font-weight: 600; } .toggle-option[aria-pressed="true"] .option-icon { opacity: 1; transform: scale(1.1); } .toggle-option[aria-pressed="true"] .option-label { text-shadow: 0 0 12px hsl(var(--gold) / .3); } .option-icon { opacity: .55; transition: opacity .3s ease, transform .3s ease; } /* ---------- Theme button ---------- */ .theme-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1.5px solid hsl(var(--bronze) / .3); border-radius: 50%; background: transparent; color: hsl(var(--foreground) / .6); cursor: pointer; transition: color .25s ease, border-color .25s ease, transform .3s ease; } .theme-btn:hover { color: hsl(var(--gold)); border-color: hsl(var(--gold) / .5); transform: rotate(15deg); } .theme-btn:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; } .theme-btn__icon { grid-area: 1 / 1; font-size: 1rem; line-height: 1; transition: opacity .3s ease; } .theme-btn__icon--sun { display: none; } :root[data-theme="dark"] .theme-btn__icon--sun { display: block; } :root[data-theme="dark"] .theme-btn__icon--moon { display: none; } /* ---------- Identity ---------- */ .identity { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem 0 0.5rem; } .flip { width: 12rem; height: 12rem; perspective: 1000px; cursor: pointer; } .flip:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 6px; border-radius: 50%; } .flip__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease-spring); } .flip:hover .flip__inner, .flip:focus-visible .flip__inner { transform: rotateY(180deg); } .flip__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; backface-visibility: hidden; box-shadow: var(--shadow-warm-lg); border: 2px solid hsl(var(--bronze) / .25); } .flip__face--front { background: linear-gradient(145deg, hsl(var(--card)), hsl(var(--muted))); color: hsl(var(--foreground)); } .flip__face--back { transform: rotateY(180deg); background: linear-gradient(145deg, hsl(var(--gold) / .22), hsl(var(--bronze) / .18)); color: hsl(var(--gold)); } .monogram { font-family: "Cormorant Garamond", Georgia, serif; font-size: 3.75rem; font-weight: 600; letter-spacing: .06em; } .sigil { font-size: 3.25rem; line-height: 1; } .name { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 3rem; font-weight: 600; letter-spacing: .02em; color: hsl(var(--foreground)); text-align: center; } /* ---------- Rows ---------- */ .row { display: flex; flex-direction: column; gap: 1.25rem; } .row__label { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; font-weight: 600; color: hsl(var(--foreground)); } .row__body { min-width: 0; } @media (min-width: 768px) { .row { flex-direction: row; gap: 0; } .row__label { width: 20%; flex-shrink: 0; padding-top: .35rem; } .row__body { width: 66%; } } /* ---------- Prose ---------- */ .prose { display: flex; flex-direction: column; gap: 1.25rem; } .prose--lead { font-size: 1.2rem; line-height: 1.7; } .prose p { margin: 0; } /* ---------- Divider ---------- */ .divider { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .5rem 0; } .divider__rule { height: 1px; width: 4rem; background: linear-gradient(to right, transparent, hsl(var(--gold))); } .divider__rule:last-child { background: linear-gradient(to left, transparent, hsl(var(--gold))); } .divider__mark { color: hsl(var(--gold)); font-size: .9rem; } /* ---------- Notes ---------- */ .notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; } .notes__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .notes__title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; font-weight: 600; color: hsl(var(--foreground)); } .notes__meta { font-size: .72rem; color: hsl(var(--muted-foreground)); } .notes__blurb { margin: .35rem 0 0; font-size: 1rem; line-height: 1.6; color: hsl(var(--foreground) / .7); } .pin { color: hsl(var(--gold) / .7); font-size: .8rem; } /* ---------- Cards ---------- */ .cards { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { display: flex; flex-direction: column; gap: .75rem; padding: .75rem; border: 1px solid hsl(var(--bronze) / .2); border-radius: var(--radius); background: hsl(var(--card)); box-shadow: var(--shadow-warm); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-warm-lg); border-color: hsl(var(--gold) / .45); } a.card:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; } .card__art { display: grid; place-items: center; height: 7.5rem; border-radius: calc(var(--radius) - 2px); position: relative; overflow: hidden; } .card__glyph { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; font-weight: 600; letter-spacing: .1em; color: hsl(var(--foreground) / .8); } .card__art--a { background: linear-gradient(140deg, hsl(var(--gold) / .3), hsl(var(--bronze) / .18)); } .card__art--b { background: linear-gradient(140deg, hsl(var(--bronze) / .24), hsl(var(--muted))); } .card__art--c { background: linear-gradient(140deg, hsl(var(--muted)), hsl(var(--gold) / .16)); } .card__art--d { background: linear-gradient(140deg, hsl(var(--burnt-sienna) / .2), hsl(var(--bronze) / .2)); } .card__art--e { background: linear-gradient(140deg, hsl(var(--gold) / .2), hsl(var(--muted) / .8)); } .card__body { display: flex; flex-direction: column; gap: .4rem; padding: 0 .25rem .35rem; } .card__title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.1rem; font-weight: 600; line-height: 1.25; color: hsl(var(--foreground)); } a.card:hover .card__title { color: hsl(var(--gold)); } .card__desc { margin: 0; font-size: .9rem; line-height: 1.55; color: hsl(var(--foreground) / .7); } .card__tag { align-self: flex-start; margin-top: .15rem; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 2px; color: hsl(var(--bronze)); border: 1px solid hsl(var(--bronze) / .35); } /* ---------- Links ---------- */ .links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.75rem; } .links a { font-size: 1.1rem; } /* ---------- Footer ---------- */ .foot { margin-top: auto; padding-top: 3rem; } .foot__line { margin: 0; font-size: .78rem; letter-spacing: .04em; color: hsl(var(--muted-foreground)); text-align: center; } /* ---------- Responsive ---------- */ @media (max-width: 767px) { .shell { padding: 1.25rem 1.1rem 2rem; } .ornament { display: none; } .toggle-track { width: 240px; height: 44px; } .toggle-indicator { width: 112px; height: 36px; } [data-mode="personal"] .toggle-indicator { left: calc(100% - 116px); } .toggle-option { font-size: .8rem; gap: .25rem; } .nav__home { font-size: 1rem; } .stack { gap: 2rem; } .name { font-size: 2.25rem; } .flip { width: 9rem; height: 9rem; } .monogram { font-size: 2.75rem; } .sigil { font-size: 2.25rem; } .prose--lead { font-size: 1.1rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .flip:hover .flip__inner { transform: none; } }