/* =========================================================================
Deep H. Makadiya — academic site — DESIGN: "Editorial, switchable colours"
Playfair Display headings over a Lora body, pill buttons and tags, a
softly rounded photo frame — with TEN colour schemes.
HOW IT WORKS:
1. ":root" below holds the ELEVEN colours the site is drawn from, set
to the default scheme ("Cream & Terracotta").
2. Under "COLOUR SCHEMES" further down, each other scheme re-states
those same eleven values in a [data-theme="..."] block. Nothing
else about the design changes.
3. script.js writes data-theme="..." on when a circle is
clicked; a script in each page's re-applies the saved choice
before the page paints.
To change the DEFAULT, swap ":root" for another scheme's values. To add
one of your own, see the note at the bottom of this file.
One stylesheet for all 8 pages — change a colour or font here and every
page follows.
========================================================================= */
:root{
/* ============ THE ELEVEN COLOURS THE WHOLE SITE IS DRAWN FROM ============
These are the default scheme, "Cream & Terracotta". Every other scheme
further down re-states exactly these eleven values and nothing else. */
--ink:#2a2115;
--muted:#8a7c66;
--line:#e6dcc8;
--cream:#f6f0e2;
--cream-2:#efe6d2; /* sidebar background, cards, tinted tags */
--accent:#a5501f; /* accent colour — links, headings, numbers, buttons */
--accent-soft:#d8b79a; /* paler accent, used for link underlines */
--photo-bg:#ece2cc; /* backdrop behind the photos while they load */
--nav-hover:#e6dac0; /* sidebar nav link hover / active fill */
--placeholder-bg:#fbf7ee; /* dashed "add something here" tiles */
--shadow-rgb:42,33,21; /* photo-frame shadow, as red,green,blue */
/* Height of the mobile/tablet top bar. It is 0 on laptops (no bar there);
the responsive section at the bottom of this file sets it to 52px on
smaller screens. Everything that has to sit clear of the bar refers to
this one value. */
--topbar-h:0px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
overflow-wrap:break-word; /* long words wrap instead of widening the page */
background:var(--cream);
color:var(--ink);
font-family:"Lora",Georgia,serif;
line-height:1.7;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:"Playfair Display",Georgia,serif; }
a{ color:var(--accent); text-decoration:underline; text-decoration-color:var(--accent-soft); }
/* ---- HOVER STATES ARE FOR MICE AND TRACKPADS ONLY ----------------------
Every ":hover" rule here is wrapped in "@media (hover: hover)". A
touchscreen has no hover, so without the guard a phone leaves the hover
style stuck on whatever was last tapped — a second highlight beside the
real one. Keep new :hover rules inside that guard. -------------------- */
@media (hover: hover){ a:hover{ text-decoration-color:var(--accent); } }
/* =========================================================================
LAYOUT: sidebar (left) + main content (right)
========================================================================= */
.layout{ display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; }
/* "minmax(0,1fr)" above, and "min-width:0" on main and .wrap below, stop a
wide child (the tabs row, a long publication title) from stretching the
page sideways on a narrow screen. */
/* ---- Sidebar: photo, name, and page navigation ONLY (no contact info) ---- */
.sidebar{
background:var(--cream-2);
border-right:1px solid var(--line);
padding:3rem 1.6rem;
position:sticky; top:0; height:100vh; overflow-y:auto;
text-align:center;
z-index:20;
}
.sidebar .avatar{
width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 1rem;
background:var(--photo-bg); border:1px solid var(--line);
}
/* Your name in the sidebar. It used to be an
; it is now a plain
paragraph (so each page has exactly one
, its own title), which means
the heading font has to be named here explicitly. */
.sidebar-name{
font-family:"Playfair Display",Georgia,serif;
font-size:1.25rem; margin:0 0 1.8rem; font-weight:800; color:var(--ink);
}
.sidebar nav{ display:flex; flex-direction:column; gap:.15rem; text-align:left; }
.sidebar nav a{
color:var(--ink); text-decoration:none; font-size:.92rem; padding:.6rem .7rem;
border-radius:6px; border-left:3px solid transparent;
}
@media (hover: hover){ .sidebar nav a:hover{ background:var(--nav-hover); color:var(--accent); } }
.sidebar nav a.active{ color:var(--accent); font-weight:600; border-left-color:var(--accent); background:var(--nav-hover); }
/* ---- Mobile / tablet top bar, menu button and overlay ----
On laptops none of this is visible: the sidebar is always on screen, so
there is nothing to open. Below 960px the sidebar slides away and this
slim bar takes its place at the top of every page, carrying the menu
button and your name (so a phone visitor always sees whose site this is,
not just a floating button). ---- */
.topbar{
display:none; /* shown only on narrow screens, see the responsive section */
position:fixed; top:0; left:0; right:0; z-index:26;
height:var(--topbar-h);
align-items:center; gap:.7rem;
padding:0 .9rem;
background:var(--cream);
border-bottom:1px solid var(--line);
}
.topbar-title{
font-family:"Playfair Display",Georgia,serif; font-weight:800;
font-size:1.02rem; line-height:1.2; color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.menu-toggle{
display:none; /* shown only on narrow screens, see the responsive section */
flex:none;
width:40px; height:40px; border-radius:8px;
background:var(--ink); color:var(--cream);
border:none; font-size:1.2rem; line-height:1;
align-items:center; justify-content:center; cursor:pointer;
}
.overlay{
display:none;
position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:15;
}
main{ padding:3.2rem 2.6rem; min-width:0; }
.wrap{ max-width:720px; margin:0 auto; min-width:0; }
/* ---- Inner-page header: title + one descriptive line beneath it ----
(No colored "kicker" text above the title anymore — just the title
and, right under it, a plain sentence describing what's on the page.) */
.page-header{ padding-bottom:1.6rem; margin-bottom:0; border-bottom:1px solid var(--line); text-align:left; }
.page-header h1{ font-size:clamp(1.65rem, 6vw, 2.1rem); margin:0 0 .5rem; font-weight:800; }
.page-header .page-desc{ max-width:60ch; color:var(--muted); font-style:italic; font-size:1rem; margin:0; }
/* ---- In-page section navigation (tabs) --------------------------------
Sits under the page header and freezes at the top of the window on
scroll (position: sticky). Always one line: if the tabs don't fit, the
row scrolls, and script.js adds the edge fades and (on wide screens) the
arrow buttons by itself. Nothing to touch when you add a tab. -------- */
.page-tabs-wrap{
position:sticky; top:var(--topbar-h); z-index:10;
background:var(--cream);
border-bottom:1px solid var(--line);
margin-bottom:2.4rem;
/* No shadow on purpose — it should feel like a seamless part of the page,
not a floating bar, even once it's stuck to the top while scrolling.
"position: sticky" already anchors the absolutely-positioned fade/arrow
children below, so no extra "position: relative" is needed here. */
}
.page-tabs{
display:flex; flex-wrap:nowrap; gap:.6rem; min-width:0;
overflow-x:auto;
scrollbar-width:none; /* Firefox: hide the scrollbar itself */
-ms-overflow-style:none; /* old Edge */
padding:1rem 2.2rem;
}
.page-tabs::-webkit-scrollbar{ display:none; } /* Chrome/Safari: hide the scrollbar */
.page-tabs a{
text-decoration:none; color:var(--ink); font-size:.85rem;
padding:.4rem .9rem; border:1px solid var(--line); border-radius:999px;
white-space:nowrap; flex:none;
}
@media (hover: hover){ .page-tabs a:hover{ border-color:var(--accent); color:var(--accent); } }
/* The tab for the section currently on screen. script.js adds and removes
this class as you scroll — see "SECTION HIGHLIGHTING" there. The inset
shadow thickens the outline without changing the tab's size, so nothing
shifts sideways as the highlight moves along the row. */
.page-tabs a.current{
color:var(--accent); border-color:var(--accent); font-weight:600;
box-shadow:inset 0 0 0 1px var(--accent);
}
/* Fade hints — a soft gradient over the edge that has more tabs hidden.
Shown/hidden automatically by script.js; purely visual (not clickable). */
.tabs-fade{ position:absolute; top:0; bottom:0; width:2.6rem; pointer-events:none; z-index:1; }
.tabs-fade.left{ left:0; background:linear-gradient(to right, var(--cream), transparent); }
.tabs-fade.right{ right:0; background:linear-gradient(to left, var(--cream), transparent); }
.tabs-fade[hidden]{ display:none; }
/* Arrow buttons — desktop/wide-screen only; on touch devices people just
swipe the row left/right instead. Shown/hidden automatically. */
.tabs-arrow{
display:none; position:absolute; top:0; bottom:0; width:2.2rem;
align-items:center; justify-content:center;
background:transparent; border:none; color:var(--accent);
font-size:1.4rem; cursor:pointer; z-index:2;
}
.tabs-arrow.left{ left:0; }
.tabs-arrow.right{ right:0; }
.tabs-arrow[hidden]{ display:none; }
/* Arrows only above the mobile breakpoint: below it .page-tabs has less
side padding than an arrow is wide, so an arrow would sit on top of the
first and last tab and swallow taps meant for them. */
@media (min-width:961px){ .tabs-arrow{ display:flex; } }
/* =========================================================================
HOME PAGE specifics — an asymmetric "split hero" (framed photo one side,
name and tagline the other), then About Me and the tinted Get in Touch
card. The hero stacks into one column on narrow screens.
========================================================================= */
.hero-split{
display:grid; grid-template-columns:auto 1fr; gap:2.6rem; align-items:center;
padding:1.2rem 0 3rem;
}
.hero-photo-col{ text-align:center; }
.hero-photo-frame{
display:inline-block;
padding:10px;
border:2px solid var(--accent);
border-radius:22px;
box-shadow:0 14px 26px rgba(var(--shadow-rgb),.14);
}
.hero-photo-frame a{ display:block; }
.home-photo{
display:block; width:clamp(140px, 40vw, 190px); height:clamp(140px, 40vw, 190px);
border-radius:15px; object-fit:cover;
background:var(--photo-bg);
transition:opacity .15s ease;
}
@media (hover: hover){ .hero-photo-frame a:hover .home-photo{ opacity:.82; } }
.hero-text .eyebrow{
text-transform:uppercase; letter-spacing:.16em; font-size:.72rem;
color:var(--accent); margin:.5rem 0 0; font-family:"Lora",serif;
}
.home-name{ font-size:clamp(1.85rem, 7.5vw, 2.6rem); margin:0; font-weight:800; line-height:1.12; }
.lede{ max-width:62ch; font-size:1.05rem; }
/* ---- "Get in Touch" tinted card panel ---- */
.card-panel{
background:var(--cream-2); border:1px solid var(--line); border-radius:14px;
padding:2rem 2.2rem;
}
/* NOTE: a plain ".contact-block h2" rule used to sit here. It never had any
effect — "h2.section-title" further down is written with the same weight
and comes later, so it always won. The only surviving override is the
narrow-screen one in the RESPONSIVE section at the bottom. */
.contact-line{ font-size:1.02rem; margin:0 0 .5rem; overflow-wrap:anywhere; }
.contact-line a{ font-weight:600; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }
.btn{
display:inline-block; padding:.6rem 1.3rem; border:1px solid var(--accent);
border-radius:999px; color:var(--accent); font-family:"Lora",serif; font-size:.88rem;
text-decoration:none; transition:background .15s ease, color .15s ease;
}
@media (hover: hover){ .btn:hover{ background:var(--accent); color:#fff; } }
/* =========================================================================
Generic content sections (used on every inner page)
========================================================================= */
section{ padding:2.4rem 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
/* The tabs jump to the HEADING, not the section box; "scroll-margin-top"
below is what clears the frozen tabs bar plus a small gap. Change that
one number to adjust the landing gap everywhere. */
h2.section-title{ font-size:clamp(1.22rem, 4.4vw, 1.5rem); margin:0 0 1.5rem;
scroll-margin-top:calc(var(--topbar-h) + 5.1rem); }
.item{ margin-bottom:1.8rem; }
.item:last-child{ margin-bottom:0; }
.item h3{ margin:0 0 .15rem; font-size:1.1rem; }
.item .meta{ margin:0 0 .3rem; font-size:.9rem; color:var(--muted); font-style:italic; }
.item p{ margin:0; font-size:.98rem; }
.subhead{
font-size:.75rem; text-transform:uppercase;
letter-spacing:.14em; color:var(--accent); margin:1.8rem 0 1.1rem;
}
.subhead:first-child{ margin-top:0; }
/* ---- Numbered lists (publications, talks) -----------------------------
research.html runs newest-first: top entry, highest number, counting down
to 1, so adding one never means renumbering. professional-activities.html
runs the other way, oldest first, numbers rising down the page. Each page's
comments give the exact steps. */
.pub-list{ list-style:none; margin:0; padding:0; }
.pub-list li{ padding:1.2rem 0; border-top:1px solid var(--line); display:flex; gap:.9rem; }
.pub-list li:first-child{ border-top:none; }
.pub-num{
font-family:"Playfair Display",serif; font-weight:700; color:var(--accent);
flex:none; min-width:2.2rem;
}
.pub-body{ flex:1; }
.pub-title{ font-family:"Playfair Display",serif; font-weight:700; font-size:1.06rem; display:block; }
.pub-meta{ font-size:.88rem; color:var(--muted); font-style:italic; display:block; margin-top:.3rem; }
.pub-links{ font-size:.85rem; margin-top:.45rem; display:block; }
.pub-links a{ margin-right:1.1rem; }
/* ---- "Abstract" — a button made to look exactly like the DOI and arXiv
links beside it. Clicking it opens the ".pub-abstract" panel below;
the little triangle turns to point downwards while it is open. ---- */
.pub-toggle{
font:inherit; font-size:.85rem; color:var(--accent);
background:none; border:0; padding:0; margin-right:1.1rem;
cursor:pointer; text-decoration:underline;
text-decoration-color:var(--accent-soft); text-underline-offset:2px;
}
@media (hover: hover){ .pub-toggle:hover{ text-decoration-color:var(--accent); } }
.pub-toggle .caret{
display:inline-block; font-size:.7em; margin-left:.15rem;
transition:transform .18s ease; text-decoration:none;
}
.pub-toggle[aria-expanded="true"] .caret{ transform:rotate(90deg); }
/* ---- Drop cap: the opening letter of a blog post (blogs/*.html) -----------
Put class="lede drop-cap" on the FIRST paragraph of a piece and its first
letter is set large in the heading face, floated so the next few lines wrap
around it. Only the first paragraph should carry the class. ---- */
.drop-cap::first-letter{
float:left;
font-family:"Playfair Display", Georgia, serif;
font-weight:700; color:var(--accent);
font-size:3.1em; line-height:.8;
padding:.06em .1em 0 0;
}
/* A floated letter is taller than a short opening paragraph, and would other-
wise push the next paragraph's first line sideways. This drops that
paragraph clear of it; with a normal, longer opening paragraph the letter is
fully contained and this rule does nothing. */
.drop-cap + *{ clear:left; }
/* ---- "More / Less" under a links block (Miscellaneous > Useful Links).
Sits on its own line, centred under the text column and close under the
group it belongs to, so it reads as that group's control rather than as the
next heading. The pull-up is on the button rather than on the last link,
because while the block is collapsed that last link is hidden and so
contributes no margin of its own.
The arrow is the same glyph as the Abstract buttons use, turned down for
"More" and up for "Less" — turning one glyph rather than swapping in a
different character keeps both arrows exactly the same size. ---- */
.links-more{ display:block; width:100%; margin-top:-.9rem; margin-right:0; text-align:center; }
.pub-toggle.links-more .caret{ transform:rotate(90deg); }
.pub-toggle.links-more[aria-expanded="true"] .caret{ transform:rotate(-90deg); }
.pub-abstract{
margin-top:.8rem; padding-left:1rem;
border-left:2px solid var(--line);
font-size:.93rem;
}
.pub-abstract p{ margin:0 0 .7rem; }
.pub-abstract p:last-child{ margin-bottom:0; }
table.teach{ width:100%; border-collapse:collapse; font-size:.94rem; }
table.teach td{ padding:.7rem 0; border-top:1px solid var(--line); }
table.teach tr:first-child td{ border-top:none; }
table.teach td:first-child{ font-weight:600; width:48%; }
ul.plain{ list-style:none; margin:0; padding:0; }
ul.plain li{ padding:.95rem 0; border-top:1px solid var(--line); font-size:.97rem; display:flex; gap:.9rem; }
ul.plain li:first-child{ border-top:none; }
ul.plain .item-num{ font-family:"Playfair Display",serif; font-weight:700; color:var(--accent); flex:none; min-width:2.2rem; }
/* ---- Research Overview: numbered project entries -----------------------
Built on the same numbered "ul.plain" list as the talks and seminars, but
each entry holds a title and one or two paragraphs rather than a single
line. ---- */
.overview-list li{ align-items:flex-start; }
.overview-body{ flex:1; min-width:0; }
.overview-title{
display:block; font-family:"Playfair Display",Georgia,serif;
font-weight:700; font-size:1.08rem; margin-bottom:.45rem;
}
.overview-body p{ margin:0 0 .75rem; }
.overview-body p:last-child{ margin-bottom:0; }
.see-all{ margin:1.5rem 0 0; font-size:.95rem; }
/* ---- Tags: Skills and Hobbies (Miscellaneous) and Areas of Interest
(Research). One rule for both, so they cannot drift apart. ---- */
.skills-list, .interest-list{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:0; padding:0; }
.skills-list li, .interest-list li{
border:2px solid var(--line); border-radius:10px; padding:.45rem 1.05rem;
font-size:.92rem; background:transparent;
}
/* ---- Plain bullet list (Awards, Grants and Other Academic Achievements) ----
A normal bulleted list — no numbering, order doesn't matter. Just add or
remove
lines freely. */
ul.bullets{ margin:0; padding-left:1.3rem; }
ul.bullets li{ margin-bottom:.6rem; font-size:.97rem; }
ul.bullets li:last-child{ margin-bottom:0; }
/* ---- Photo Gallery grid (gallery.html) ---------------------------------
Reflows automatically to fit however many tiles you have — no need to
change anything here when you add or remove photos. */
.gallery-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
gap:1rem;
}
/* A "not filled in yet" tile — replace with a
(see the comments in gallery.html) once you have an actual photo. */
.gallery-placeholder{
aspect-ratio:1 / 1; border:1px dashed var(--muted); border-radius:10px;
display:flex; align-items:center; justify-content:center; text-align:center;
padding:.8rem; color:var(--muted); font-style:italic; font-size:.85rem;
background:var(--placeholder-bg);
}
/* A real photo tile. The figcaption is NOT shown under the photo: it slides up
over the tile and is capped at three lines, ending in "..." when there is
more to read — the full text is shown in the lightbox when the photo is
opened, so a long caption can never bury the picture.
WHEN IT APPEARS: with a mouse, on hover or keyboard focus. On a touch screen
there is no hover, so script.js marks the tile nearest the middle of the
screen as ".is-active" while you scroll, the way a video list on a tablet
plays whichever item you have scrolled to. */
.gallery-item{ margin:0; position:relative; border-radius:10px; overflow:hidden; cursor:zoom-in; }
.gallery-item img{
display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover;
border-radius:10px; border:1px solid var(--line);
transition:transform .35s ease;
}
.gallery-item figcaption{
position:absolute; left:0; right:0; bottom:0;
padding:.7rem .8rem;
font-size:.8rem; line-height:1.35; font-style:italic; color:#fff;
background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.6) 72%, rgba(0,0,0,0));
transform:translateY(101%); transition:transform .3s ease;
}
/* The three-line cap lives on an inner span, not on the figcaption itself:
"overflow:hidden" clips at the PADDING edge, so clamping the padded
figcaption would still let a fourth line show through its bottom padding.
script.js wraps each caption's text in this span, so the HTML stays plain.
The two -webkit- lines are not a Safari-only hack — every browser still
needs them for line clamping. */
.gallery-item figcaption .cap-text{
display:-webkit-box; -webkit-box-orient:vertical;
-webkit-line-clamp:3; line-clamp:3; overflow:hidden;
}
.gallery-item:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.gallery-item.is-active figcaption{ transform:none; }
@media (hover: hover){
.gallery-item:hover figcaption,
.gallery-item:focus-within figcaption{ transform:none; }
.gallery-item:hover img{ transform:scale(1.04); }
}
/* ---- Lightbox: the full-size photo opened by clicking a tile -------------
script.js builds this markup once per page and fills it from the tile that
was clicked. Clicking anywhere outside the photo, or pressing Escape,
closes it. Nothing here needs editing when you add photos. */
body.lightbox-open{ overflow:hidden; }
/* "display:flex" below would otherwise beat the hidden attribute's own
display:none, leaving an invisible full-screen panel swallowing every click
on the page. This line is what keeps it truly out of the way when closed. */
.lightbox[hidden]{ display:none; }
.lightbox{
position:fixed; inset:0; z-index:100;
display:flex; align-items:center; justify-content:center;
padding:clamp(1rem, 4vw, 3rem);
background:rgba(0,0,0,.86);
}
.lightbox-inner{ max-width:min(920px, 100%); max-height:100%; text-align:center; cursor:default; }
.lightbox img{
display:block; max-width:100%; max-height:78vh; margin:0 auto;
border-radius:8px; object-fit:contain;
}
.lightbox p{
margin:.9rem auto 0; max-width:60ch;
color:#f3ece1; font-style:italic; font-size:.95rem; line-height:1.5;
}
.lightbox-close{
position:absolute; top:.6rem; right:1rem;
background:none; border:0; padding:.3rem .5rem;
color:#fff; font:inherit; font-size:1.8rem; line-height:1; cursor:pointer;
}
@media (hover: hover){ .lightbox-close:hover{ opacity:.7; } }
footer{ text-align:center; font-size:.8rem; color:var(--muted); padding:2rem 1.5rem; font-style:italic; }
footer p{ margin:0; }
footer .updated{ font-size:.74rem; margin-top:.35rem; opacity:.85; }
/* =========================================================================
COLOUR SCHEMES — one block per alternative scheme, each re-stating the
same eleven values as ":root". Nothing else about the design changes.
The order of the circles in the sidebar is set by the HTML, not here.
========================================================================= */
/* ---- Mocha & Oat ---- */
[data-theme="mocha"]{
--ink:#241d16; --muted:#7f7466; --line:#e3dacb;
--cream:#faf6ef; --cream-2:#f0e9dd; --accent:#5b4636;
--accent-soft:#cbbaa6; --photo-bg:#ece3d4; --nav-hover:#e9e0cf;
--placeholder-bg:#f7f2e9; --shadow-rgb:36,29,22;
}
/* ---- Olive & Flax ---- */
[data-theme="olive"]{
--ink:#262718; --muted:#7c7c63; --line:#e2dfc7;
--cream:#faf8ee; --cream-2:#f0eedd; --accent:#64682c;
--accent-soft:#c8c9a0; --photo-bg:#ebe8d3; --nav-hover:#e8e5ce;
--placeholder-bg:#f6f4e7; --shadow-rgb:38,39,24;
}
/* ---- Graphite & Chalk ---- */
[data-theme="graphite"]{
--ink:#222426; --muted:#767a7e; --line:#ddd9d3;
--cream:#f7f6f4; --cream-2:#eceae6; --accent:#3f4348;
--accent-soft:#c2c5c8; --photo-bg:#e6e3de; --nav-hover:#e4e1db;
--placeholder-bg:#f4f2ef; --shadow-rgb:34,36,38;
}
/* ---- Aubergine & Oat ---- */
[data-theme="aubergine"]{
--ink:#26202b; --muted:#7f7674; --line:#e2dccf;
--cream:#faf8f3; --cream-2:#efeae1; --accent:#543a63;
--accent-soft:#c6b8d1; --photo-bg:#eae4d9; --nav-hover:#e8e1d5;
--placeholder-bg:#f6f3ec; --shadow-rgb:38,32,43;
}
/* ---- Plum & Blush ---- */
[data-theme="plum"]{
--ink:#2f2531; --muted:#8a7887; --line:#e7dce5;
--cream:#faf7f9; --cream-2:#f2e8ef; --accent:#71385a;
--accent-soft:#d3b4c6; --photo-bg:#ecdfe7; --nav-hover:#ebdbe5;
--placeholder-bg:#f8f2f6; --shadow-rgb:47,37,49;
}
/* ---- Sage ---- */
[data-theme="sage"]{
--ink:#2f3a2f; --muted:#7c8a76; --line:#dde5d6;
--cream:#fbfaf5; --cream-2:#eef2e6; --accent:#5c7a52;
--accent-soft:#c3d3b8; --photo-bg:#e2e9d9; --nav-hover:#e3ead8;
--placeholder-bg:#f6f9f1; --shadow-rgb:47,58,47;
}
/* ---- Emerald & Mist ---- */
[data-theme="emerald"]{
--ink:#1c2b25; --muted:#728079; --line:#d7e4de;
--cream:#f6faf8; --cream-2:#e7f0ec; --accent:#1f6b52;
--accent-soft:#a7cabb; --photo-bg:#dfece6; --nav-hover:#dde9e3;
--placeholder-bg:#f0f7f3; --shadow-rgb:28,43,37;
}
/* ---- Indigo & Ivory ---- */
[data-theme="indigo"]{
--ink:#22203a; --muted:#78748c; --line:#ddd9ea;
--cream:#f8f7fb; --cream-2:#eceaf4; --accent:#3a3670;
--accent-soft:#bdb8d8; --photo-bg:#e3e0f0; --nav-hover:#e6e2f1;
--placeholder-bg:#f3f1f9; --shadow-rgb:34,32,58;
}
/* ---- Dusk Blue ---- */
[data-theme="dusk"]{
--ink:#232b35; --muted:#78838f; --line:#dce1e8;
--cream:#f7f9fb; --cream-2:#e9eef4; --accent:#3d5d82;
--accent-soft:#b5c6da; --photo-bg:#dde5ee; --nav-hover:#dfe7f0;
--placeholder-bg:#f2f6fa; --shadow-rgb:35,43,53;
}
/* =========================================================================
THE COLOUR PICKER ITSELF (bottom of the sidebar)
Two rows of five circles, each one