/* ==========================================================================
CULTURAL THEME LAYER: nazar, ebru, batik
Turquoise accent system with Turkish and Indonesian motifs, loaded after
main.css from head/custom.html. Dose is chosen by a class on :
(no class) theme off, site renders exactly as before
culture-dose-1 Turquoise Thread: turquoise links, nazar dot on page
titles, calm teal-to-cobalt hairline under the masthead
culture-dose-2 adds the nazar ring on the portrait and the kawung
batik strip above the footer (DEFAULT)
culture-dose-3 adds the statement masthead: cobalt night with ebru
Colors override the site's own custom-property system, so the existing
light/dark toggle keeps working. Contrast on light #fbfaf7: link #0b6a78
6.0:1, hover #084c56 9.2:1, visited #3f5e94 6.2:1. On dark #151922: link
#63cbd8 9.3:1, hover #9be2ea 12.1:1, visited #a9c3ef 9.8:1. Dose-3 masthead
#14263f: links #e8eef6 13.0:1, hover #5fd0dc 8.4:1.
========================================================================== */
/* --- Dose 1+: the turquoise accent system ------------------------------- */
body[class*="culture-dose"] {
--accent : #0b6a78;
--accent-strong : #084c56;
--accent-soft : #dff0f2;
--global-link-color : #0b6a78;
--global-link-color-hover : #084c56;
--global-link-color-visited : #3f5e94;
--global-masthead-link-color-hover : #0b6a78;
}
html[data-theme="dark"] body[class*="culture-dose"] {
--accent : #63cbd8;
--accent-strong : #9be2ea;
--accent-soft : #12333a;
--global-link-color : #63cbd8;
--global-link-color-hover : #9be2ea;
--global-link-color-visited : #a9c3ef;
--global-masthead-link-color-hover : #63cbd8;
}
body[class*="culture-dose"] ::selection {
background: #0b6a78;
color: #ffffff;
}
/* Nazar dot before the page title: the quiet Turquoise Dot pun.
Decorative, so it is aria-hidden by construction (pure CSS content). */
body[class*="culture-dose"] .page__title::before {
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-right: 0.35em;
vertical-align: baseline;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/* Hairline under the masthead: one calm teal-to-cobalt sweep, anchored to
the masthead itself. (An earlier cut marbled this with red flecks and ran
a second strip along the viewport top; both read as glitches, removed.) */
body[class*="culture-dose"] .masthead {
position: relative;
}
body[class*="culture-dose"] .masthead::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: linear-gradient(90deg, #0b6a78, #2456a4 50%, #0b6a78);
opacity: 0.8;
pointer-events: none;
}
html[data-theme="dark"] body[class*="culture-dose"] .masthead::after {
background: linear-gradient(90deg, #63cbd8, #7fb6e8 50%, #63cbd8);
opacity: 0.7;
}
/* --- Dose 2+: nazar ring, kawung divider --------------------------------- */
/* Nazar ring around the sidebar portrait. Rounds the avatar to a full circle,
which is what makes the ring read as a nazar rather than a border. */
body.culture-dose-2 .author__avatar img,
body.culture-dose-3 .author__avatar img {
border-radius: 50%;
box-shadow:
0 0 0 2.5px #fbfaf7,
0 0 0 5.5px #7fb6e8,
0 0 0 8.5px #2456a4;
}
html[data-theme="dark"] body.culture-dose-2 .author__avatar img,
html[data-theme="dark"] body.culture-dose-3 .author__avatar img {
box-shadow:
0 0 0 2.5px #151922,
0 0 0 5.5px #7fb6e8,
0 0 0 8.5px #2f5ea8;
}
/* Kawung batik strip above the footer: Indonesia answering from below. */
body.culture-dose-2 .page__footer,
body.culture-dose-3 .page__footer {
position: relative;
}
body.culture-dose-2 .page__footer::before,
body.culture-dose-3 .page__footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 10px;
pointer-events: none;
opacity: 0.55;
background-image: url('data:image/svg+xml;utf8,');
background-size: 24px 10px;
background-repeat: repeat-x;
}
html[data-theme="dark"] body.culture-dose-2 .page__footer::before,
html[data-theme="dark"] body.culture-dose-3 .page__footer::before {
opacity: 0.35;
}
/* --- Dose 3: the statement masthead -------------------------------------- */
body.culture-dose-3 .masthead {
background-color: #14263f;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
}
body.culture-dose-3 {
--global-masthead-link-color : #e8eef6;
--global-masthead-link-color-hover : #5fd0dc;
}
body.culture-dose-3 .masthead::after {
opacity: 1;
}
/* The greedy-nav machinery paints its own light backgrounds; clear them so the
marbled cobalt shows through cleanly. */
body.culture-dose-3 .masthead .greedy-nav,
body.culture-dose-3 .masthead .greedy-nav a,
body.culture-dose-3 .masthead .masthead__menu,
body.culture-dose-3 .masthead .masthead__menu-item,
body.culture-dose-3 .masthead .visible-links,
body.culture-dose-3 .masthead .hidden-links {
background: transparent;
}
/* The selected nav item (site title on the home page) is colored with
--global-text-color by the base theme; on the cobalt marble that reads
near-black. Repaint it with the light masthead palette. */
body.culture-dose-3 .masthead .masthead__menu-item.selected a,
body.culture-dose-3 .masthead .masthead__menu-item.selected a:hover {
color: #e8eef6;
border-bottom-color: #5fd0dc;
}
/* Print: strip every decorative layer. */
@media print {
body[class*="culture-dose"] .masthead::after,
body[class*="culture-dose"] .page__footer::before,
body[class*="culture-dose"] .page__title::before {
display: none !important;
}
}