/* ========================================================================== KIRTANAM Refinements v1.2.0 Loaded last. Fixes spacing, increases gold presence, compacts typography and polishes the music player. All values are driven by Customizer vars printed in (see kirtanam_customizer_css in functions.php). ========================================================================== */ :root{ --k-space:1; /* global spacing multiplier (Customizer) */ --k-gold-mix:1; /* gold intensity multiplier (Customizer) */ --k-section-pad:clamp(46px,6.5vh,84px); --k-page-top:74px; --k-radius:22px; } /* -------------------------------------------------------------------------- 1. SPACING — remove the large empty areas at the top of every page, between sections, and below the footer. -------------------------------------------------------------------------- */ .section{ padding-top:calc(var(--k-section-pad) * var(--k-space)) !important; padding-bottom:calc(var(--k-section-pad) * var(--k-space)) !important; } .page-shell{ padding-top:calc(var(--k-page-top) * var(--k-space)) !important; } .page-shell > .section:first-child{ margin-top:0 !important; padding-top:calc(18px * var(--k-space)) !important; } .page-shell > .section:last-child{ padding-bottom:calc(40px * var(--k-space)) !important; } .page:not(#page-home) .section[style]{ padding-top:calc(40px * var(--k-space)) !important; } /* Hero: was 120px top / 90px bottom on a 100vh box */ .hero{ min-height:auto !important; padding:calc(96px * var(--k-space)) 0 calc(46px * var(--k-space)) !important; } .music-library-hero{ padding-top:calc(20px * var(--k-space)) !important; padding-bottom:0 !important; } .music-library-section{ padding-top:calc(26px * var(--k-space)) !important; } /* Headings sit closer to their kicker */ .kicker + div[style*="height"]{ height:14px !important; } h1.h, h2.h{ margin-top:6px; } .lede{ margin-top:14px; } /* Footer — trim the dead space above and below */ .site-footer{ padding-top:calc(44px * var(--k-space)) !important; padding-bottom:calc(22px * var(--k-space)) !important; margin-top:0 !important; } .foot-bot{ margin-top:calc(30px * var(--k-space)) !important; padding-top:18px !important; } .site-footer .foot{ gap:calc(28px * var(--k-space)) !important; } body{ padding-bottom:0 !important; } main{ padding-bottom:0 !important; } /* When the dock is visible, only then reserve room for it */ body.playlist-open .site-footer{ padding-bottom:calc(96px + 22px * var(--k-space)) !important; } /* -------------------------------------------------------------------------- 2. TYPOGRAPHY — journal / post headlines were far too large -------------------------------------------------------------------------- */ .jr-feat h3{ font-size:clamp(1.15rem,1.7vw,1.45rem) !important; line-height:1.25 !important; margin:10px 0 8px !important; } .jr-item h4{ font-size:1.02rem !important; line-height:1.3 !important; } .journal-post h3{ font-size:1rem !important; line-height:1.35 !important; } .journal-post{ min-height:0 !important; padding:22px !important; } .journal-post .post-symbol{ width:42px !important; height:42px !important; margin-bottom:18px !important; } .journal-post p{ font-size:.8rem !important; } .journal-post .jr-date{ padding-top:16px !important; } /* Archive / single post titles */ .entry-title, .post-card h2, .journal-page-grid h3{ font-size:clamp(1.1rem,1.8vw,1.5rem) !important; line-height:1.28 !important; } .single .entry-title, .single-post-title{ font-size:clamp(1.7rem,3.4vw,2.6rem) !important; line-height:1.15 !important; } /* Page hero headlines were clamp(2.4rem,6vw,4.8rem) — too tall on mobile */ .page-shell h1.h{ font-size:clamp(1.9rem,4.4vw,3.2rem) !important; line-height:1.08 !important; } .hero h1{ letter-spacing:.1em; } /* -------------------------------------------------------------------------- 3. GOLD — more warmth against the blue -------------------------------------------------------------------------- */ body{ background-image: radial-gradient(90% 50% at 50% -6%, rgba(235,207,146,calc(.10 * var(--k-gold-mix))), transparent 55%), radial-gradient(55% 42% at 84% 8%, rgba(201,164,91,calc(.13 * var(--k-gold-mix))), transparent 60%), radial-gradient(70% 55% at 10% 94%, rgba(201,164,91,calc(.09 * var(--k-gold-mix))), transparent 62%), radial-gradient(120% 90% at 50% 50%, rgba(22,34,74,.34), transparent 70%), linear-gradient(180deg,#0A1026,#080C1E 60%,#070A1A) !important; } .kicker{ color:var(--gold-2) !important; } .kicker::before{ background:linear-gradient(90deg,transparent,var(--gold)) !important; opacity:1 !important; } .rule{ background:linear-gradient(90deg,transparent,rgba(201,164,91,calc(.34 * var(--k-gold-mix))) 15%,rgba(201,164,91,calc(.34 * var(--k-gold-mix))) 85%,transparent) !important; } .section > .wrap > .rv > .h em, h1.h em, h2.h em{ color:var(--gold-2) !important; } /* Cards pick up a warm edge instead of pure blue glass */ .journal-post, .model, .for, .cta-card, .fcard, .tri, .csr-u, .tn{ border-color:rgba(201,164,91,calc(.22 * var(--k-gold-mix))) !important; background-image:linear-gradient(160deg,rgba(201,164,91,calc(.05 * var(--k-gold-mix))),transparent 62%) !important; } .journal-post:hover, .model:hover, .cta-card:hover, .tn:hover{ border-color:rgba(235,207,146,calc(.5 * var(--k-gold-mix))) !important; } .site-footer{ border-top-color:rgba(201,164,91,calc(.3 * var(--k-gold-mix))) !important; } .foot-c h5{ color:var(--gold-2) !important; } /* -------------------------------------------------------------------------- 4. MUSIC — Spotify-style dock and library polish -------------------------------------------------------------------------- */ .playlist-dock{ position:fixed !important; left:0; right:0; bottom:0; z-index:120; background:rgba(8,12,30,.92) !important; backdrop-filter:blur(20px) saturate(1.3); border-top:1px solid rgba(201,164,91,.3) !important; box-shadow:0 -18px 50px rgba(0,0,15,.55); padding:10px clamp(12px,3vw,26px) !important; } .playlist-dock[hidden]{ display:none !important; } .playlist-dock-art{ border-radius:10px !important; overflow:hidden; } .playlist-main-play{ background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important; color:#20180A !important; border:none !important; width:44px !important; height:44px !important; border-radius:50% !important; transition:transform .2s; } .playlist-main-play:hover{ transform:scale(1.07); } .playlist-main-play svg{ fill:#20180A !important; } .playlist-dock .playlist-icon-pause{ display:none; } .playlist-dock.is-playing .playlist-icon-play{ display:none; } .playlist-dock.is-playing .playlist-icon-pause{ display:block; } /* Range inputs styled like Spotify */ .playlist-dock input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; border-radius:4px; background:rgba(255,255,255,.18); outline:none; cursor:pointer; } .playlist-dock input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 8px rgba(235,207,146,.6); } .playlist-dock input[type=range]::-moz-range-thumb{ width:12px; height:12px; border:none; border-radius:50%; background:var(--gold-2); } /* Track rows */ .playlist-track{ border-radius:10px !important; transition:background .2s; } .playlist-track:hover{ background:rgba(201,164,91,.08) !important; } .playlist-track.is-current .playlist-track-copy strong a{ color:var(--gold-2) !important; } .playlist-row-play{ background:rgba(8,12,30,.7) !important; border:1px solid rgba(201,164,91,.4) !important; } .playlist-track:hover .playlist-row-play{ background:var(--gold) !important; } .playlist-track:hover .playlist-row-play svg{ fill:#20180A !important; } .playlist-track .playlist-icon-pause{ display:none; } .playlist-track.is-playing .playlist-icon-play{ display:none; } .playlist-track.is-playing .playlist-icon-pause{ display:block; } /* "Now playing" equaliser on the active row */ .playlist-track.is-playing .playlist-track-index span{ visibility:hidden; } .playlist-track.is-playing .playlist-track-index::after{ content:""; position:absolute; width:14px; height:13px; background: linear-gradient(var(--gold-2),var(--gold-2)) 0 100%/3px 60% no-repeat, linear-gradient(var(--gold-2),var(--gold-2)) 5.5px 100%/3px 100% no-repeat, linear-gradient(var(--gold-2),var(--gold-2)) 11px 100%/3px 40% no-repeat; animation:k-eq .9s ease-in-out infinite alternate; } .playlist-track-index{ position:relative; display:grid; place-items:center; } @keyframes k-eq{ from{ transform:scaleY(.5); transform-origin:bottom } to{ transform:scaleY(1); transform-origin:bottom } } .music-filter.is-active{ border-color:rgba(235,207,146,.5) !important; background:linear-gradient(150deg,rgba(201,164,91,.16),transparent 70%) !important; } .music-spotlight-play{ background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important; color:#20180A !important; border:none !important; } .music-spotlight-play svg{ fill:#20180A !important; } .music-spotlight .playlist-icon-pause{ display:none; } .music-spotlight.is-playing .playlist-icon-play{ display:none; } .music-spotlight.is-playing .playlist-icon-pause{ display:block; } /* -------------------------------------------------------------------------- 5. FORMS — visible, usable, consistent -------------------------------------------------------------------------- */ .form .field input, .form .field select, .form .field textarea{ width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(201,164,91,.24); border-radius:10px; padding:12px 14px; color:var(--fog); font-family:var(--sans); font-size:.95rem; } .form .field input:focus, .form .field select:focus, .form .field textarea:focus{ outline:none; border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(201,164,91,.14); } .form .field textarea{ min-height:110px; resize:vertical; } .form .field label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); } .form{ display:grid; gap:14px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .k-hp{ position:absolute !important; left:-9999px !important; opacity:0 !important; height:0 !important; } .booking-status{ border-radius:12px; padding:14px 16px; margin-bottom:18px; font-size:.9rem; } .booking-status.success{ border:1px solid rgba(53,160,154,.5); background:rgba(53,160,154,.12); } .booking-status.error{ border:1px solid rgba(217,108,128,.5); background:rgba(217,108,128,.12); } .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px; align-items:start; } .fcard{ border:1px solid rgba(201,164,91,.22); border-radius:var(--k-radius); padding:30px; } .fcard h2{ font-size:1.4rem !important; margin-bottom:4px; } .fcard .fsub{ color:var(--stone); font-size:.86rem; margin-bottom:20px; } @media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } .hero{ padding:calc(84px * var(--k-space)) 0 calc(34px * var(--k-space)) !important; } .page-shell{ padding-top:calc(62px * var(--k-space)) !important; } .playlist-dock{ padding:8px 12px !important; } } /* ========================================================================== v1.3.0 — Sound box, tabs, press strip, article & comments, membership ========================================================================== */ /* ---------- Golden Sound Library box ---------- */ .sound-box{ border:1px solid rgba(201,164,91,.42); border-radius:calc(var(--k-radius) + 6px); padding:clamp(22px,3vw,38px); background: linear-gradient(160deg, rgba(201,164,91,.16), rgba(201,164,91,.05) 45%, transparent 78%), linear-gradient(180deg, rgba(12,18,44,.85), rgba(8,12,30,.9)); box-shadow:0 26px 70px rgba(0,4,20,.45), inset 0 1px rgba(235,207,146,.18); position:relative; overflow:hidden; } .sound-box::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 60% at 88% 0%, rgba(235,207,146,.14), transparent 60%); } .sound-head-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; position:relative; z-index:2; } .sound-title{ font-family:var(--serif); font-weight:400; letter-spacing:.02em; font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.05; margin-top:8px; background:linear-gradient(180deg,#FBF3E2,var(--gold-2) 55%,var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .sound-open{ border-color:rgba(235,207,146,.55) !important; color:var(--gold-2) !important; } /* Tabs */ .sound-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; position:relative; z-index:2; } .sound-tab{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:.72em 1.35em; border-radius:100px; cursor:pointer; border:1px solid rgba(201,164,91,.32); background:rgba(255,255,255,.03); color:var(--stone); transition:.28s; } .sound-tab:hover{ color:var(--fog); border-color:rgba(235,207,146,.6); } .sound-tab.is-active{ background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#20180A; border-color:transparent; font-weight:700; box-shadow:0 8px 22px rgba(201,164,91,.3); } .sound-box .home-playlist{ margin-top:24px; position:relative; z-index:2; } .sound-box .playlist-track{ background:rgba(255,255,255,.02); } .sound-box .playlist-track:hover{ background:rgba(201,164,91,.12) !important; } /* ---------- Player: shuffle & repeat ---------- */ .playlist-mini{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; position:relative; border:1px solid rgba(201,164,91,.28); background:transparent; color:var(--stone); cursor:pointer; transition:.25s; } .playlist-mini svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .playlist-mini:hover{ color:var(--fog); border-color:var(--gold); } .playlist-mini.is-on{ color:var(--gold-2); border-color:var(--gold); background:rgba(201,164,91,.14); } .playlist-mini .repeat-one{ position:absolute; bottom:-1px; right:-1px; font-size:.5rem; font-family:var(--mono); font-weight:700; background:var(--gold); color:#20180A; border-radius:50%; width:13px; height:13px; display:none; place-items:center; } .playlist-mini[data-mode="one"] .repeat-one{ display:grid; } .playlist-transport{ display:flex; align-items:center; gap:10px; } /* ---------- Featured in / press ---------- */ .marquee-lbl{ padding:36px 0 4px !important; } .press-strip{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; padding:16px clamp(18px,4vw,40px) 30px; max-width:var(--wrap); margin:0 auto; } .press-item{ display:grid; place-items:center; min-width:120px; height:62px; padding:10px 20px; border:1px solid rgba(201,164,91,.2); border-radius:14px; background:rgba(255,255,255,.03); transition:.3s; } a.press-item:hover{ border-color:var(--gold); transform:translateY(-3px); background:rgba(201,164,91,.1); } .press-item img{ max-height:34px; max-width:130px; object-fit:contain; filter:grayscale(1) brightness(1.7); opacity:.85; transition:.3s; } a.press-item:hover img{ filter:none; opacity:1; } .press-item em{ font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--stone); white-space:nowrap; } a.press-item:hover em{ color:var(--gold-2); } /* ---------- Research article ---------- */ .research-paper{ max-width:800px; margin:0 auto; padding:clamp(70px,9vh,110px) clamp(20px,5vw,40px) 40px; } .research-title{ font-family:var(--serif); font-weight:500 !important; font-size:clamp(1.7rem,3.6vw,2.7rem) !important; line-height:1.14 !important; letter-spacing:-.01em; margin:12px 0 !important; } .research-subtitle{ font-size:1.02rem !important; line-height:1.5; margin-top:8px; } .research-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; } .research-byline,.research-doi{ font-size:.82rem !important; } .research-masthead{ font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; display:flex; justify-content:space-between; gap:14px; padding-bottom:14px; } .research-content{ font-size:1.02rem; line-height:1.78; } .research-content h2{ font-family:var(--serif); font-size:1.45rem !important; line-height:1.25; margin:34px 0 12px !important; } .research-content h3{ font-family:var(--serif); font-size:1.18rem !important; margin:26px 0 10px !important; } .research-content p{ margin-bottom:17px; } .research-content ul,.research-content ol{ margin:0 0 18px 22px; } .research-content li{ margin-bottom:8px; } .research-content blockquote{ margin:24px 0; padding:16px 22px; border-left:3px solid var(--gold); background:rgba(201,164,91,.07); border-radius:0 12px 12px 0; font-style:italic; } .research-content img{ max-width:100%; height:auto; border-radius:14px; margin:20px 0; } .research-abstract h2{ font-size:1.1rem !important; } .research-abstract{ border-radius:16px; } .research-references h2{ font-size:1.15rem !important; } /* ---------- Comments ---------- */ #comments{ max-width:820px; margin:0 auto; padding-top:10px !important; } #comments .h{ font-size:1.4rem !important; } #comments .comment-respond, #comments .comment-list, #comments ol.comment-list{ border:1px solid rgba(201,164,91,.22); border-radius:var(--k-radius); padding:26px; background:rgba(255,255,255,.025); margin-top:18px; list-style:none; } #comments .comment-reply-title{ font-family:var(--serif); font-size:1.35rem; font-weight:400; margin-bottom:6px; } #comments .comment-notes,#comments .logged-in-as{ font-size:.8rem; color:var(--stone); margin-bottom:16px; } #comments .comment-form{ display:grid; gap:14px; } #comments .comment-form label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); display:block; margin-bottom:6px; } #comments textarea, #comments input[type=text], #comments input[type=email], #comments input[type=url]{ width:100% !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(201,164,91,.26) !important; border-radius:12px !important; padding:12px 14px !important; color:var(--fog) !important; font-family:var(--sans) !important; font-size:.95rem !important; } #comments textarea{ min-height:130px; resize:vertical; } #comments textarea:focus,#comments input:focus{ outline:none; border-color:var(--gold-2) !important; box-shadow:0 0 0 3px rgba(201,164,91,.14); } #comments input[type=submit], #comments .submit{ background:linear-gradient(180deg,var(--gold-2),var(--gold)) !important; color:#20180A !important; border:none !important; border-radius:100px !important; padding:.85em 2em !important; font-family:var(--sans) !important; font-weight:600 !important; font-size:.85rem !important; cursor:pointer; justify-self:start; transition:.3s; } #comments input[type=submit]:hover{ box-shadow:0 12px 30px rgba(201,164,91,.3); } #comments .comment-body{ padding:16px 0; border-bottom:1px solid var(--line-soft); } #comments .comment-author img{ border-radius:50%; } #comments .comment-meta{ font-size:.75rem; color:var(--stone); } /* ---------- Family tree (About) ---------- */ .family-tree{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:34px; } .family-node{ border:1px solid rgba(201,164,91,.28); border-radius:16px; padding:20px 32px; min-width:250px; background:linear-gradient(160deg,rgba(201,164,91,.07),transparent 70%); transition:.35s; } .family-node:hover{ border-color:var(--gold); transform:translateY(-3px); } .family-node .role{ font-family:var(--mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-2); } .family-node .nm{ font-family:var(--serif); font-size:1.35rem; margin-top:4px; } .family-node a{ font-family:var(--mono); font-size:.6rem; color:var(--gold-2); letter-spacing:.05em; } .family-branch{ width:1px; height:34px; background:linear-gradient(var(--gold),transparent); opacity:.55; } .family-split{ position:relative; width:100%; max-width:520px; height:34px; } .family-split::before{ content:""; position:absolute; top:0; left:25%; right:25%; height:1px; background:rgba(201,164,91,.3); } .family-split span{ position:absolute; top:0; width:1px; height:34px; background:linear-gradient(var(--gold),transparent); opacity:.55; } .family-split span.l{ left:25% } .family-split span.r{ right:25% } .family-pair{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; } .family-node.here{ border-color:var(--gold); box-shadow:0 0 40px rgba(201,164,91,.16); } @media(max-width:700px){ .sound-head-top{ align-items:flex-start; } .press-item{ min-width:96px; height:54px; } .research-paper{ padding-top:84px; } } /* ========================================================================== v1.4.0 — Journal page, full-screen player, animated press, mobile polish ========================================================================== */ /* Failsafe: if reveal JS never runs, content must still appear */ .rv{ animation:rv-failsafe 0s linear 2.2s forwards; } @keyframes rv-failsafe{ to{ opacity:1; transform:none } } /* ---------- Animated "Featured in" ---------- */ .press-marquee{ overflow:hidden; padding:14px 0 30px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .press-track{ display:flex; gap:14px; align-items:center; width:max-content; animation:press-scroll 34s linear infinite; } .press-marquee:hover .press-track{ animation-play-state:paused; } @keyframes press-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } .press-track .press-item{ flex:0 0 auto; } /* ---------- Journal listing page ---------- */ .journal-head{ padding-bottom:0 !important; } .journal-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; } .journal-entry{ display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(201,164,91,.22); border-radius:var(--k-radius); background:linear-gradient(170deg,rgba(201,164,91,.06),rgba(255,255,255,.02) 55%,transparent); transition:transform .35s, border-color .35s, box-shadow .35s; } .journal-entry:hover{ transform:translateY(-5px); border-color:rgba(235,207,146,.55); box-shadow:0 20px 44px rgba(0,4,20,.4); } .journal-entry.is-featured{ grid-column:1 / -1; flex-direction:row; align-items:stretch; } .journal-entry-media{ display:grid; place-items:center; overflow:hidden; position:relative; aspect-ratio:16/9; background:radial-gradient(80% 100% at 30% 20%,rgba(42,80,176,.5),var(--ink)); } .journal-entry-media img{ width:100%; height:100%; object-fit:cover; display:block; } .journal-entry-media .deva{ font-size:1.9rem; color:rgba(235,207,146,.4); } .journal-entry.is-featured .journal-entry-media{ flex:0 0 46%; aspect-ratio:auto; min-height:250px; } .journal-entry-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; } .journal-entry.is-featured .journal-entry-body{ padding:34px; justify-content:center; } .journal-entry-body h2{ font-family:var(--serif); font-weight:400; line-height:1.2; font-size:clamp(1.05rem,1.5vw,1.3rem); margin:0; } .journal-entry.is-featured .journal-entry-body h2{ font-size:clamp(1.4rem,2.6vw,2rem); } .journal-entry-body h2 a{ transition:color .25s; } .journal-entry:hover .journal-entry-body h2 a{ color:var(--gold-2); } .journal-entry-excerpt{ color:var(--stone); font-size:.88rem; line-height:1.6; } .journal-entry-meta{ display:flex; gap:14px; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin-top:auto; padding-top:10px; } .journal-entry-link{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); margin-top:8px; } .journal-entry-link span{ transition:transform .25s; display:inline-block; } .journal-entry:hover .journal-entry-link span{ transform:translateX(4px); } .archive-pagination{ margin-top:34px; display:flex; justify-content:center; } .archive-pagination .page-numbers{ display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 10px; margin:0 4px; border:1px solid rgba(201,164,91,.24); border-radius:10px; color:var(--stone); font-size:.85rem; transition:.25s; } .archive-pagination .page-numbers:hover{ border-color:var(--gold); color:var(--gold-2); } .archive-pagination .page-numbers.current{ background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#20180A; border-color:transparent; font-weight:600; } /* ---------- Full-screen Now Playing ---------- */ body.np-open{ overflow:hidden; } .np-screen{ position:fixed; inset:0; z-index:200; display:flex; } .np-screen[hidden]{ display:none; } .np-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(58px) saturate(1.5) brightness(.42); transform:scale(1.2); opacity:.85; } .np-screen::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,12,34,.82), rgba(5,8,26,.96)); } .np-inner{ position:relative; z-index:2; width:100%; display:flex; flex-direction:column; padding:max(16px, env(safe-area-inset-top)) clamp(18px,5vw,44px) 26px; } .np-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .np-top-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-2); } .np-icon{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:1px solid rgba(201,164,91,.3); background:rgba(255,255,255,.05); color:var(--fog); transition:.25s; font-size:1.3rem; line-height:1; } .np-icon:hover{ border-color:var(--gold); color:var(--gold-2); } .np-icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .np-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; max-width:520px; margin:0 auto; width:100%; padding:20px 0; } .np-art{ width:min(74vw,340px); aspect-ratio:1; border-radius:20px; overflow:hidden; display:grid; place-items:center; box-shadow:0 34px 80px rgba(0,0,15,.6); background:linear-gradient(145deg,#25406b,#101733); border:1px solid rgba(201,164,91,.24); } .np-art img{ width:100%; height:100%; object-fit:cover; } .np-art .deva{ font-size:2.6rem; color:rgba(235,207,146,.5); } .np-meta{ text-align:center; } .np-meta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,4vw,2rem); line-height:1.15; } .np-meta p{ color:var(--stone); font-size:.86rem; margin-top:4px; } .np-progress{ display:flex; align-items:center; gap:12px; width:100%; font-family:var(--mono); font-size:.6rem; color:var(--stone); } .np-progress input[type=range], .np-volume input[type=range]{ -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.2); cursor:pointer; outline:none; } .np-progress input[type=range]::-webkit-slider-thumb, .np-volume input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 10px rgba(235,207,146,.7); } .np-progress input[type=range]::-moz-range-thumb, .np-volume input[type=range]::-moz-range-thumb{ width:14px;height:14px;border:none;border-radius:50%;background:var(--gold-2); } .np-transport{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,4vw,26px); } .np-play{ width:68px; height:68px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center; background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 14px 34px rgba(201,164,91,.4); transition:transform .2s; } .np-play:hover{ transform:scale(1.06); } .np-play svg{ width:26px; height:26px; fill:#20180A; } .np-play .playlist-icon-pause{ display:none; } .np-screen.is-playing .np-play .playlist-icon-play{ display:none; } .np-screen.is-playing .np-play .playlist-icon-pause{ display:block; } .np-step{ width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer; border:1px solid rgba(201,164,91,.26); background:rgba(255,255,255,.04); color:var(--fog); transition:.25s; } .np-step:hover{ border-color:var(--gold); color:var(--gold-2); } .np-step svg{ width:20px;height:20px;fill:currentColor; } .np-mini{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;position:relative; border:1px solid rgba(201,164,91,.2); background:transparent; color:var(--stone); transition:.25s; } .np-mini svg{ width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } .np-mini:hover{ color:var(--fog); border-color:var(--gold); } .np-mini.is-on{ color:var(--gold-2); border-color:var(--gold); background:rgba(201,164,91,.14); } .np-mini .repeat-one{ position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--gold);color:#20180A;font-size:.5rem;font-family:var(--mono);font-weight:700;display:none;place-items:center; } .np-mini[data-mode="one"] .repeat-one{ display:grid; } .np-volume{ display:flex; align-items:center; gap:10px; width:min(240px,70%); color:var(--stone); } .np-volume svg{ width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round; } /* Queue */ .np-queue{ position:absolute; left:0; right:0; bottom:0; max-height:66vh; z-index:3; background:rgba(7,11,30,.97); backdrop-filter:blur(20px); border-top:1px solid rgba(201,164,91,.3); border-radius:22px 22px 0 0; padding:18px clamp(16px,4vw,30px) calc(20px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; box-shadow:0 -20px 60px rgba(0,0,15,.5); } .np-queue[hidden]{ display:none; } .np-queue-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .np-queue-head strong{ font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2); } .np-queue-list{ overflow-y:auto; display:flex; flex-direction:column; gap:4px; } .np-queue-item{ display:grid; grid-template-columns:26px 42px 1fr auto; gap:12px; align-items:center; padding:9px 10px; border-radius:12px; border:none; background:transparent; cursor:pointer; color:var(--fog); text-align:left; transition:background .2s; width:100%; } .np-queue-item:hover{ background:rgba(201,164,91,.12); } .np-queue-item.is-current{ background:rgba(201,164,91,.16); } .np-queue-item .q-num{ font-family:var(--mono); font-size:.6rem; color:var(--stone); } .np-queue-item.is-current .q-num{ color:var(--gold-2); } .np-queue-item .q-art{ width:42px;height:42px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#25406b,#101733);font-size:.7rem;color:var(--gold-2); } .np-queue-item .q-art img{ width:100%;height:100%;object-fit:cover; } .np-queue-item .q-copy{ min-width:0; display:block; } .np-queue-item .q-copy strong{ display:block; font-size:.86rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .np-queue-item .q-copy small{ display:block; font-size:.7rem; color:var(--stone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .np-queue-item .q-dur{ font-family:var(--mono); font-size:.6rem; color:var(--stone); } /* Dock track becomes a button */ .playlist-dock-track{ border:none; background:transparent; color:inherit; cursor:pointer; text-align:left; display:flex; align-items:center; gap:12px; padding:0; min-width:0; } .playlist-dock-track:hover .playlist-dock-copy strong{ color:var(--gold-2); } /* ---------- Kirtanam Sounds archive: make sure list is visible ---------- */ .music-library-shell .playlist-list{ min-height:60px; } .music-library-shell .playlist-track{ opacity:1 !important; transform:none !important; } .music-app{ align-items:start; } /* ---------- MOBILE ---------- */ @media(max-width:1000px){ .journal-list{ grid-template-columns:repeat(2,1fr); } } @media(max-width:760px){ .journal-list{ grid-template-columns:1fr; gap:14px; } .journal-entry.is-featured{ flex-direction:column; } .journal-entry.is-featured .journal-entry-media{ flex:none; width:100%; aspect-ratio:16/9; min-height:0; } .journal-entry.is-featured .journal-entry-body{ padding:20px 22px 24px; } .journal-entry.is-featured .journal-entry-body h2{ font-size:1.2rem; } /* home journal cards stack cleanly */ .jr-home-grid{ grid-template-columns:1fr !important; gap:12px !important; } .jr-mini{ display:grid !important; grid-template-columns:112px 1fr !important; border-radius:18px !important; } .jr-mini a{ display:contents; } .jr-visual{ height:100% !important; min-height:118px !important; } .jr-mini-body{ padding:16px 16px !important; } .jr-mini-body h3{ font-size:.98rem !important; line-height:1.3 !important; } .jr-mini-body .jr-date{ font-size:.58rem !important; } /* dock never overlaps content */ body{ padding-bottom:104px !important; } .ios-dock{ bottom:max(10px, env(safe-area-inset-bottom)) !important; } body.playlist-open .ios-dock{ bottom:calc(76px + env(safe-area-inset-bottom)) !important; } .sound-box{ padding:18px 14px !important; } .sound-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none; } .sound-tabs::-webkit-scrollbar{ display:none; } .sound-tab{ flex:0 0 auto; } .sound-title{ font-size:1.65rem !important; } .np-art{ width:min(68vw,270px); } .np-body{ gap:16px; } } @media(max-width:520px){ .press-item{ min-width:88px; height:50px; padding:8px 14px; } .press-item img{ max-height:26px; max-width:96px; } .np-transport{ gap:12px; } .np-play{ width:60px;height:60px; } } /* ========================================================================== v1.5.0 — Player visibility, Sounds page list, 1:1 cover, journal page ========================================================================== */ /* ---------- Never let reveal animation hide content ---------- */ .music-library-shell .rv, .playlist-list .rv, .playlist-track, .sound-list *{ opacity:1 !important; transform:none !important; } /* ---------- Sounds page list ---------- */ .sound-sub{ color:var(--stone); font-size:.9rem; margin-top:8px; max-width:52ch; } .sound-tab b{ font-family:var(--mono); font-size:.6rem; opacity:.75; margin-left:4px; } .sound-listhead{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:26px; padding-bottom:10px; border-bottom:1px solid rgba(201,164,91,.2); font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); } .sound-listhead b{ color:var(--gold-2); } .sound-list{ border-top:none !important; margin-top:6px; display:block; } /* Rows: simple, tappable, always visible controls */ .sound-list .playlist-track, .home-playlist .playlist-track{ display:grid !important; grid-template-columns:30px 52px minmax(0,1fr) auto !important; gap:14px !important; align-items:center; min-height:68px; padding:10px 12px !important; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06) !important; } .sound-list .playlist-track-collection, .home-playlist .playlist-track-collection, .sound-list .playlist-track-more, .home-playlist .playlist-track-more{ display:none !important; } .sound-list .playlist-track-duration, .home-playlist .playlist-track-duration{ font-family:var(--mono); font-size:.66rem; color:var(--stone); } .sound-list .playlist-track-art, .home-playlist .playlist-track-art{ width:52px !important; height:52px !important; border-radius:10px !important; } /* Play button always visible (essential on touch devices) */ .playlist-row-play{ opacity:1 !important; background:rgba(4,8,24,.45) !important; border-radius:10px !important; color:#fff !important; } .playlist-track:hover .playlist-row-play{ background:rgba(201,164,91,.85) !important; } .playlist-track:hover .playlist-row-play svg{ fill:#20180A !important; } .playlist-track.is-current .playlist-row-play{ background:rgba(201,164,91,.9) !important; } .playlist-track.is-current .playlist-row-play svg{ fill:#20180A !important; } /* ---------- Dock always reachable ---------- */ .playlist-dock{ display:flex !important; align-items:center; gap:clamp(10px,2vw,26px); justify-content:space-between; } .playlist-dock[hidden]{ display:none !important; } .playlist-dock-center{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; align-items:center; } .playlist-dock-track{ flex:0 1 260px; } .playlist-dock-art{ width:46px; height:46px; flex-shrink:0; } .playlist-dock-copy{ min-width:0; } .playlist-dock-copy strong,.playlist-dock-copy span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .playlist-dock-copy small{ font-family:var(--mono); font-size:.5rem; letter-spacing:.16em; color:var(--gold-2); } .playlist-dock-copy strong{ font-size:.85rem; } .playlist-dock-copy span{ font-size:.7rem; color:var(--stone); } .playlist-progress{ display:flex; align-items:center; gap:10px; width:100%; font-family:var(--mono); font-size:.58rem; color:var(--stone); } .playlist-progress input[type=range]{ flex:1; } /* ---------- Full player: strict 1:1 cover ---------- */ .np-art{ aspect-ratio:1 / 1 !important; width:min(72vw,330px) !important; height:auto !important; } .np-art img{ width:100% !important; height:100% !important; object-fit:cover !important; aspect-ratio:1/1; } .np-backlist{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); background:rgba(201,164,91,.1); border:1px solid rgba(201,164,91,.35); border-radius:100px; padding:.75em 1.5em; transition:.25s; } .np-backlist:hover{ background:rgba(201,164,91,.2); border-color:var(--gold); } .np-backlist svg{ width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } /* ---------- Journal page ---------- */ .journal-shell .journal-list{ opacity:1 !important; } @media(max-width:760px){ .playlist-dock{ flex-wrap:wrap; row-gap:6px; padding:9px 12px calc(9px + env(safe-area-inset-bottom)) !important; } .playlist-dock-track{ flex:1 1 auto; order:1; } .playlist-dock-center{ order:3; flex:1 1 100%; } .playlist-dock-volume{ display:none !important; } .playlist-transport{ order:2; } .sound-list .playlist-track, .home-playlist .playlist-track{ grid-template-columns:24px 48px minmax(0,1fr) auto !important; gap:10px !important; } .np-art{ width:min(66vw,260px) !important; } } /* ========================================================================= * v1.5.0 — Customisable Media Gallery + Spotify-style polish * ====================================================================== */ /* --- Gallery filter tabs ------------------------------------------------ */ .kg-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 22px; justify-content: center; } .kg-filter { background: rgba(255,255,255,0.04); border: 1px solid rgba(233,208,150,0.22); color: #efe6d0; padding: 9px 18px; border-radius: 999px; font: 500 12px/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease, transform 0.2s ease; } .kg-filter:hover { border-color: rgba(233,208,150,0.55); transform: translateY(-1px); } .kg-filter.is-active { background: linear-gradient(135deg, #e9d096 0%, #cba556 100%); color: #1a140a; border-color: transparent; box-shadow: 0 8px 22px -12px rgba(233,208,150,0.7); } /* --- Gallery grid (masonry-like via CSS grid) -------------------------- */ .kg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 220px; gap: 14px; margin-top: 22px; } .kg-tile { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, #211a10 0%, #14100a 100%); cursor: pointer; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; outline: none; isolation: isolate; margin: 0; } .kg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease; filter: saturate(0.92) brightness(0.86); } .kg-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,7,3,0.85) 0%, rgba(10,7,3,0) 55%); pointer-events: none; transition: opacity 0.4s ease; opacity: 0.9; } .kg-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(0,0,0,0.75); } .kg-tile:hover img { transform: scale(1.06); filter: saturate(1.08) brightness(0.96); } .kg-tile:focus-visible { box-shadow: 0 0 0 2px #e9d096, 0 22px 44px -22px rgba(0,0,0,0.75); } .kg-tile--wide { grid-column: span 2; grid-row: span 2; } @media (max-width: 640px) { .kg-tile--wide { grid-column: span 2; grid-row: span 1; } .kg-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } } .kg-tile-overlay { position: absolute; top: 18px; left: 18px; font-family: "Tiro Devanagari Sanskrit", serif; font-size: clamp(28px, 5vw, 46px); color: rgba(233,208,150,0.55); text-shadow: 0 4px 24px rgba(0,0,0,0.6); pointer-events: none; z-index: 2; } .kg-tile-caption { position: absolute; left: 18px; right: 18px; bottom: 16px; color: #f5ecd4; font: 500 12px/1.4 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; z-index: 2; transform: translateY(4px); opacity: 0.9; transition: transform 0.4s ease, opacity 0.4s ease; } .kg-tile:hover .kg-tile-caption { transform: translateY(0); opacity: 1; } .kg-tile-play { position: absolute; top: 50%; left: 50%; width: 62px; height: 62px; transform: translate(-50%, -50%) scale(0.9); background: linear-gradient(135deg, #e9d096 0%, #cba556 100%); color: #1a140a; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 12px 34px -14px rgba(233,208,150,0.75); transition: transform 0.35s ease, box-shadow 0.35s ease; z-index: 2; } .kg-tile-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; } .kg-tile:hover .kg-tile-play { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 18px 40px -12px rgba(233,208,150,0.9); } /* --- Lightbox ---------------------------------------------------------- */ .kg-lightbox[hidden] { display: none !important; } .kg-lightbox { position: fixed; inset: 0; background: rgba(6, 4, 2, 0.94); backdrop-filter: blur(18px); z-index: 999; display: grid; place-items: center; padding: 34px; animation: kg-fade 0.32s ease; } @keyframes kg-fade { from { opacity: 0; } to { opacity: 1; } } .kg-lightbox-stage { max-width: min(1100px, 92vw); max-height: 78vh; width: 100%; display: grid; place-items: center; } .kg-lightbox-stage img, .kg-lightbox-stage video, .kg-lightbox-stage iframe { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 30px 80px -24px rgba(0,0,0,0.85); background: #000; } .kg-lightbox-stage iframe { width: min(960px, 90vw); aspect-ratio: 16 / 9; height: auto; } .kg-lightbox-caption { color: #efe6d0; margin-top: 20px; font: 500 12px/1.4 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; } .kg-lightbox-close { position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,0.06); border: 1px solid rgba(233,208,150,0.4); color: #efe6d0; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; transition: background 0.24s ease, transform 0.24s ease; } .kg-lightbox-close:hover { background: rgba(233,208,150,0.18); transform: rotate(90deg); } .kg-empty { text-align: center; padding: 60px 20px; border: 1px dashed rgba(233,208,150,0.22); border-radius: 20px; margin-top: 40px; } .kg-empty .cta { display: inline-block; margin-top: 16px; color: #e9d096; font: 600 13px/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(233,208,150,0.5); padding-bottom: 4px; } /* --- Spotify-style dock: extra polish + "minimise, don't close" hint --- */ .playlist-dock { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; } .playlist-dock.is-playing .playlist-dock-art::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: radial-gradient(circle at center, rgba(233,208,150,0.35), transparent 60%); animation: kg-pulse 2.4s ease-in-out infinite; pointer-events: none; z-index: -1; } @keyframes kg-pulse { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.15); opacity: 0.75; } } .playlist-dock-art { position: relative; } /* Full-screen "now playing": make the close button read as "minimise". */ .np-icon#kirtanamNpClose::after { content: 'MIN'; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-size: 8px; letter-spacing: 0.24em; color: rgba(233,208,150,0.7); pointer-events: none; } .np-icon#kirtanamNpClose { position: relative; } /* --- Home page: Latest from the Gallery strip (v1.5.2) ---------------- */ .home-gallery-strip .flow-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .home-gallery-strip .flow-head .btn { white-space: nowrap; flex-shrink: 0; } .home-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; } @media (max-width: 900px) { .home-gallery-grid { grid-template-columns: repeat(2, 1fr); } } .home-gtile { position: relative; display: block; aspect-ratio: 1 / 1.15; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #211a10 0%, #14100a 100%); text-decoration: none; color: #f5ecd4; isolation: isolate; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; } .home-gtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease; filter: saturate(0.92) brightness(0.85); } .home-gtile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,7,3,0.88) 0%, rgba(10,7,3,0) 55%); pointer-events: none; } .home-gtile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(0,0,0,0.75); } .home-gtile:hover img { transform: scale(1.06); filter: saturate(1.08) brightness(0.96); } .home-gtile-overlay { position: absolute; top: 16px; left: 16px; font-family: "Tiro Devanagari Sanskrit", serif; font-size: clamp(24px, 3.4vw, 38px); color: rgba(233,208,150,0.55); text-shadow: 0 4px 24px rgba(0,0,0,0.6); z-index: 2; } .home-gtile-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; font: 500 11px/1.4 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; z-index: 2; } .home-gtile-play { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%) scale(0.9); background: linear-gradient(135deg, #e9d096 0%, #cba556 100%); color: #1a140a; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 12px 34px -14px rgba(233,208,150,0.75); transition: transform 0.35s ease; z-index: 2; } .home-gtile-play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; } .home-gtile:hover .home-gtile-play { transform: translate(-50%, -50%) scale(1.05); } /* ========================================================================= * v1.5.3 — iOS bottom nav removed. Spotify dock is the only bottom bar. * The dock is now ALWAYS visible (even before choosing a track). * ====================================================================== */ /* Any leftover .ios-dock nodes from older caches → force-hide. */ .ios-dock { display: none !important; } /* Body no longer needs padding for the ios dock; keep only for playlist dock. */ body { padding-bottom: 0 !important; } body.playlist-open { padding-bottom: 96px; } @media (max-width: 640px) { body.playlist-open { padding-bottom: 176px; } } /* Dock is always in the DOM. Show a soft idle state when no track chosen. */ .playlist-dock { display: flex !important; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; transform: translateY(0); opacity: 1; } .playlist-dock.is-idle { pointer-events: auto; opacity: 0.75; filter: saturate(0.9); } .playlist-dock.is-idle .playlist-transport button:not(#kirtanamPlayerToggle), .playlist-dock.is-idle .playlist-progress, .playlist-dock.is-idle .playlist-dock-volume { opacity: 0.35; pointer-events: none; } .playlist-dock.is-idle #kirtanamPlayerTitle::after { content: ' — pick any Kirtan below'; color: rgba(233,208,150,0.6); font-weight: 400; font-size: 0.85em; letter-spacing: 0; text-transform: none; } /* "Tap to resume" pulse for autoplay-blocked cross-page resume. */ .playlist-dock.needs-resume .playlist-main-play { animation: kg-pulse-resume 1.6s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(233,208,150,0.85); } @keyframes kg-pulse-resume { 0% { box-shadow: 0 0 0 0 rgba(233,208,150,0.85); } 70% { box-shadow: 0 0 0 18px rgba(233,208,150,0); } 100% { box-shadow: 0 0 0 0 rgba(233,208,150,0); } } .playlist-dock.needs-resume::before { content: 'TAP TO RESUME'; position: absolute; top: -22px; left: 24px; background: linear-gradient(135deg, #e9d096 0%, #cba556 100%); color: #1a140a; font: 700 10px/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0.18em; padding: 5px 10px; border-radius: 999px; box-shadow: 0 8px 22px -8px rgba(233,208,150,0.7); } /* ========================================================================= * v1.5.4 — Desktop dock proper 3-column centering + Journal classic + all * remaining home page text via Customizer. * ====================================================================== */ /* Force strict 3-column grid so the transport is always dead-centre. */ @media (min-width: 900px) { .playlist-dock { display: grid !important; grid-template-columns: minmax(240px, 1fr) minmax(420px, 2fr) minmax(200px, 1fr); align-items: center; gap: 24px; padding: 14px 22px; max-width: 1180px; left: 50%; right: auto; transform: translateX(-50%); bottom: 20px; background: rgba(12, 8, 4, 0.92); backdrop-filter: blur(22px); border: 1px solid rgba(233,208,150,0.18); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9); } .playlist-dock-track { display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; min-width: 0; } .playlist-dock-copy { min-width: 0; overflow: hidden; } .playlist-dock-copy strong, .playlist-dock-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .playlist-dock-center { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .playlist-transport { display: flex; align-items: center; justify-content: center; gap: 14px; } .playlist-progress { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; width: 100%; max-width: 520px; font-size: 11px; letter-spacing: 0.06em; } .playlist-dock-volume { display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .playlist-dock-volume input[type="range"] { max-width: 140px; } .playlist-main-play { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #e9d096, #cba556); color: #1a140a; border: 0; display: grid; place-items: center; cursor: pointer; transition: transform .2s ease, box-shadow .3s ease; } .playlist-main-play:hover { transform: scale(1.06); box-shadow: 0 8px 26px -10px rgba(233,208,150,0.8); } .playlist-main-play svg { width: 20px; height: 20px; fill: currentColor; } .playlist-transport button:not(.playlist-main-play) { background: transparent; border: 0; color: #d5c9a8; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; transition: color .2s, background .2s; } .playlist-transport button:not(.playlist-main-play):hover { color: #f5ecd4; background: rgba(233,208,150,0.1); } .playlist-transport svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; } } /* Mobile: single column stack. */ @media (max-width: 899px) { .playlist-dock { grid-template-columns: 1fr !important; display: grid !important; gap: 8px; padding: 12px 14px; bottom: 8px; left: 8px; right: 8px; border-radius: 16px; background: rgba(12, 8, 4, 0.94); backdrop-filter: blur(18px); border: 1px solid rgba(233,208,150,0.16); } .playlist-dock-volume { display: none; } } /* Progress + volume slider gold theme. */ .playlist-dock input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; background: rgba(233,208,150,0.18); border-radius: 999px; outline: none; } .playlist-dock input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #e9d096; cursor: pointer; box-shadow: 0 0 0 3px rgba(233,208,150,0.18); } .playlist-dock input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #e9d096; cursor: pointer; border: 0; } /* --- Journal (blog + single post) — classic newspaper feel --------- */ .classic-journal { background: #f7f1e4; color: #1c150c; padding: 100px 0 90px; position: relative; min-height: 60vh; } .classic-journal::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(28,21,12,0.02) 0 1px, transparent 1px 30px); pointer-events: none; } .classic-journal .wrap { max-width: 780px; margin: 0 auto; padding: 0 24px; position: relative; } .classic-journal .cj-mast { text-align: center; padding-bottom: 22px; border-bottom: 3px double #1c150c; margin-bottom: 44px; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; } .classic-journal .cj-mast .cj-eyebrow { font-family: "Space Mono", ui-monospace, monospace; letter-spacing: 0.4em; text-transform: uppercase; font-size: 11px; color: #6c5836; margin-bottom: 10px; } .classic-journal .cj-mast h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1; font-style: italic; margin: 0 0 12px; } .classic-journal .cj-mast .cj-date { font-family: "Space Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #6c5836; } .classic-journal .cj-article { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.18rem; line-height: 1.75; color: #2a2015; column-gap: 32px; } .classic-journal .cj-article > p:first-of-type::first-letter { font-family: "Cormorant Garamond", Georgia, serif; float: left; font-size: 5.4rem; line-height: 0.92; padding: 6px 12px 0 0; color: #a17e2b; font-weight: 500; } .classic-journal .cj-article h2, .classic-journal .cj-article h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; color: #1c150c; margin: 40px 0 12px; } .classic-journal .cj-article h2 { font-size: 2rem; font-style: italic; } .classic-journal .cj-article h3 { font-size: 1.5rem; } .classic-journal .cj-article a { color: #a17e2b; text-decoration: underline; text-underline-offset: 3px; } .classic-journal .cj-article blockquote { border-left: 3px solid #a17e2b; padding: 8px 0 8px 24px; margin: 30px 0; font-style: italic; color: #45341c; } .classic-journal .cj-article hr { border: 0; text-align: center; margin: 42px 0; } .classic-journal .cj-article hr::before { content: '· · ·'; letter-spacing: 0.5em; color: #a17e2b; } .classic-journal .cj-back { display: inline-block; margin-top: 46px; font-family: "Space Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #6c5836; text-decoration: none; border-bottom: 1px solid #a17e2b; padding-bottom: 3px; } .classic-journal .cj-back:hover { color: #1c150c; } /* Grid of journal cards (index / archive) in the classic paper style. */ .classic-journal .cj-grid { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 20px; } @media (min-width: 720px) { .classic-journal .cj-grid { grid-template-columns: 1fr 1fr; } } .classic-journal .cj-card { border-top: 1px solid #cbb98d; padding-top: 22px; } .classic-journal .cj-card .cj-card-date { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #6c5836; margin-bottom: 8px; } .classic-journal .cj-card h3 { font-family: "Cormorant Garamond", serif; font-size: 1.7rem; font-weight: 500; margin: 0 0 8px; line-height: 1.15; } .classic-journal .cj-card h3 a { color: #1c150c; text-decoration: none; } .classic-journal .cj-card h3 a:hover { color: #a17e2b; } .classic-journal .cj-card p { font-family: "Cormorant Garamond", serif; font-size: 1.05rem; line-height: 1.6; color: #45341c; margin: 6px 0 10px; } .classic-journal .cj-card .cj-more { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #a17e2b; text-decoration: none; }