:root{
--bg:#06131a; --surface:#0f2730; --ink:#f7f1e7; --muted:#c0c7c9;
--gold:#e0b458; --line:rgba(224,180,88,.28); --shadow:0 18px 45px rgba(0,0,0,.3);
--font-display:'Cinzel',Georgia,'Times New Roman',serif;
--font-body:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--font-body-alt:'Cormorant',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;overflow-x:hidden}
#app{overflow-x:hidden}
button{font:inherit}
.sectionHeading h2,.moduleIntro h3,.card h2,.card h3,.lessonHero h2,.conceptHero h2,.doorwayHero h1,.sectionCard h3,.groupPanel h3{font-family:var(--font-display);font-weight:600;letter-spacing:.01em}
.prose p,.card p,.sectionCard p,blockquote{font-family:var(--font-body);font-size:1.08em}
.view{display:none}.view.active{display:block}
.screenWrap{position:relative;width:100%;max-width:720px;margin:0 auto;line-height:0;background:#06131a}
.screenImage{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
/* Build 18 — seamless, extensible background.
The wrapper's height is now set by aspect-ratio (matching the original
full composition) instead of by the image's own height. The photo only
covers its natural top portion; a CSS gradient fills the rest, fading
from the photo's true last-row colour into the site's standard ink
background (var(--bg)). Because the fill is a gradient/colour and not a
raster image, the dark canvas extends cleanly no matter how much taller
the wrapper needs to grow as more cards are added below. */
#homeView .screenWrap{
aspect-ratio:645/1450;
background:linear-gradient(
to bottom,
transparent 0%,
transparent 44%,
#0a1214 45.5%,
var(--bg) 60%,
var(--bg) 100%
);
}
#homeView .screenImage{
position:absolute;
top:0;left:0;
width:100%;height:auto;
z-index:0;
}
.hotspot{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;border-radius:18px}
.hotspot:active{background:rgba(255,255,255,.08)}
.continue{left:4.6%;top:53.3%;width:90.8%;height:13.6%}
.foundations{left:4.6%;top:68.2%;width:43.1%;height:14.5%}
.browse{left:52.0%;top:68.2%;width:43.4%;height:14.5%}
.journeys{left:4.6%;top:83.9%;width:43.1%;height:14.6%}
.journalCard{left:52.0%;top:83.9%;width:43.4%;height:14.6%}
.reminder{left:7.8%;top:82.5%;width:84.4%;height:8.7%}
.navHome{left:5%;top:92%;width:17%;height:6.5%}
.navLearn{left:22%;top:92%;width:18%;height:6.5%}
.navExplore{left:40%;top:92%;width:19%;height:6.5%}
.navSaved{left:59%;top:92%;width:18%;height:6.5%}
.navSettings{left:77%;top:92%;width:18%;height:6.5%}
.innerView{min-height:100vh;padding:calc(24px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));background:linear-gradient(#07171f,#0a2028)}
.back{border:0;background:transparent;color:var(--gold);font-weight:700;padding:8px 0 18px}
.sectionHeading{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}
.sectionHeading h2{font-family:Georgia,serif;font-size:2.2rem;margin:.1rem 0}
.sectionHeading span{font-size:.8rem;color:var(--muted)}
.kicker{font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--gold);margin:0}
.stack{display:grid;gap:12px}
.lessonCard{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;text-align:left;width:100%;color:var(--ink)}
.lessonCard .num{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(224,180,88,.13);color:var(--gold);font-weight:800}
.lessonCard h4{margin:0 0 4px}.lessonCard p{margin:0;color:var(--muted);font-size:.87rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.lessonHero{padding-bottom:18px;border-bottom:1px solid var(--line)}
.lessonHero h2,.prose h2,.prose h3{font-family:Georgia,serif}
.lessonHero h2{font-size:2rem;margin:.35rem 0}.meta{color:var(--muted);font-size:.86rem}
.prose{line-height:1.65}.prose blockquote{margin:20px 0;padding:18px;border-left:3px solid var(--gold);background:rgba(224,180,88,.08);border-radius:0 14px 14px 0}
.sanskrit{font-family:Georgia,serif;font-size:1.15rem}
.inquiry{background:rgba(224,180,88,.08);border:1px solid rgba(224,180,88,.30);border-radius:18px;padding:18px;margin-top:22px}.inquiry li{margin-bottom:10px}
textarea{width:100%;min-height:120px;padding:14px;border-radius:14px;border:1px solid var(--line);background:#081a21;color:var(--ink);resize:vertical;font:inherit}
.row{display:flex;gap:10px;margin-top:10px}.secondary{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:12px;border-radius:12px;font-weight:700}
.saved{font-size:.82rem;color:var(--gold);margin-top:10px;min-height:1em}
.journalEntry{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}.journalEntry h4{margin:0 0 8px}.journalEntry p{white-space:pre-wrap;color:var(--muted);line-height:1.5}.small{font-size:.84rem;color:var(--muted)}
.moduleIntro{margin-bottom:16px}
.moduleIntro h3{font-family:Georgia,serif;font-size:1.45rem;margin:.35rem 0 .6rem}
.lessonCard .lessonMeta{display:block;margin-top:5px;color:var(--gold);font-size:.74rem}
.lessonNav{display:flex;gap:10px;margin-top:18px}
.lessonNav button{flex:1}
.relatedBox{margin-top:18px;padding:16px;border-radius:16px;background:rgba(224,180,88,.08);border:1px solid rgba(224,180,88,.24)}
.relatedBox strong{display:block;color:var(--gold);margin-bottom:7px}
.moduleReflection{margin-top:20px}
.searchBox{margin-bottom:16px}
.searchBox input{
width:100%;padding:15px 16px;border-radius:16px;
border:1px solid var(--line);background:#081a21;color:var(--ink);font:inherit
}
.searchBox input::placeholder{color:#91a0a4}
.recentSection{margin-bottom:18px}
.chipRow{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 2px}
.chip{
flex:none;border:1px solid var(--line);background:rgba(224,180,88,.08);
color:var(--gold);padding:9px 12px;border-radius:999px;font-size:.82rem
}
.conceptCard{
display:flex;justify-content:space-between;gap:12px;align-items:center;
background:var(--surface);border:1px solid var(--line);border-radius:18px;
padding:16px;text-align:left;width:100%;color:var(--ink)
}
.conceptCard h4{margin:0 0 4px;font-family:Georgia,serif;font-size:1.15rem}
.conceptCard p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.4}
.conceptCard .chev{color:var(--gold);font-size:1.5rem}
.conceptHero h2{font-family:Georgia,serif;font-size:2.35rem;margin:.25rem 0}
.conceptMeta{color:var(--gold);font-style:italic;margin-bottom:18px}
.conceptSection{margin-top:22px}
.conceptSection h3{font-family:Georgia,serif;margin-bottom:7px}
.conceptLink{
display:inline-block;border:1px solid var(--line);background:rgba(224,180,88,.08);
color:var(--gold);padding:8px 10px;border-radius:999px;margin:4px 4px 0 0;font-size:.82rem
}
.relatedBox .conceptLink{margin-top:8px}
.emptyState{padding:24px;text-align:center;color:var(--muted)}
.filterTabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filterTab{flex:none;border:1px solid var(--line);background:#0a2028;color:var(--muted);padding:10px 13px;border-radius:999px;white-space:nowrap}
.filterTab.active{background:rgba(224,180,88,.16);color:var(--gold);border-color:rgba(224,180,88,.5)}
.doorwayCard{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;color:var(--ink)}
.doorwayCardTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.doorwayCardTop>div{min-width:0}
.doorwayNumber{font-size:.72rem;letter-spacing:.12em;color:var(--gold);font-weight:700}
.doorwayCard h3{font-family:Georgia,serif;margin:.3rem 0 .45rem;font-size:1.35rem}
.doorwayCard p{margin:0;color:var(--muted);line-height:1.45}
.badge{display:inline-block;max-width:100%;padding:6px 9px;border-radius:999px;background:rgba(224,180,88,.12);border:1px solid rgba(224,180,88,.3);color:var(--gold);font-size:.72rem;white-space:normal;text-align:right;line-height:1.3}
.themeRow{margin-top:12px;display:flex;gap:7px;flex-wrap:wrap}
.themeChip{font-size:.72rem;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.05);color:#d9d9d5}
.groupPanel{margin-bottom:18px}.groupPanel h3{font-family:Georgia,serif;margin-bottom:10px}
.upayaCard{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;color:var(--ink);margin-bottom:10px}
.upayaCard strong{font-family:Georgia,serif;font-size:1.18rem;color:var(--gold)}
.upayaCard p{margin:.35rem 0 0;color:var(--muted);line-height:1.45}
.doorwayHero{padding:10px 0 18px;border-bottom:1px solid var(--line)}
.doorwayHero h1{font-family:Georgia,serif;font-size:2.5rem;line-height:1.08;margin:.4rem 0}
.doorwayHero .subtitle{font-family:Georgia,serif;font-size:1.15rem;color:#e9dfcd}
.metaGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.metaCard{background:rgba(224,180,88,.08);border:1px solid rgba(224,180,88,.24);border-radius:15px;padding:12px}
.metaCard span{display:block;font-size:.67rem;letter-spacing:.12em;color:var(--gold);margin-bottom:5px}
.metaCard strong{font-size:.94rem}
.sectionCard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;margin-top:16px}
.sectionCard h3{font-family:Georgia,serif;margin-top:0}
.stepList{counter-reset:step;list-style:none;padding:0;margin:0}
.stepList li{counter-increment:step;position:relative;padding-left:42px;margin:0 0 16px;line-height:1.55}
.stepList li:before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(224,180,88,.15);border:1px solid rgba(224,180,88,.35);color:var(--gold);font-weight:700}
.notice{padding:14px;border-radius:15px;background:rgba(224,180,88,.08);border:1px solid rgba(224,180,88,.24);margin-top:14px;color:#e8dfcf}
.numberGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.numberBtn{padding:14px 0;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--gold);font-weight:700}
.numberBtn.disabled{opacity:.32}
.globalHome{position:fixed;z-index:50;right:16px;top:calc(14px + env(safe-area-inset-top));width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(224,180,88,.78);background:rgba(6,19,26,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--gold);display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.025);padding:0}
.globalHome svg{width:23px;height:23px;overflow:visible;filter:drop-shadow(0 1px 3px rgba(224,180,88,.34))}
.globalHome svg path:first-child{fill:currentColor;stroke:none}
.globalHome svg path:not(:first-child){fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.globalHome:active{transform:scale(.96);background:rgba(224,180,88,.14)}
/* Sprint Alpha 13: corrected home scrolling, fixed reminder and refined menu */
#homeView.active{display:block;height:100dvh;overflow:hidden;background:#06131a}
.homeShell{height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(170px + env(safe-area-inset-bottom));scrollbar-width:none}
.homeShell::-webkit-scrollbar{display:none}
#homeView .screenWrap{max-width:720px;min-height:auto}
#homeView .screenImage{width:100%;height:auto}
#homeView .continue{left:4.6%;top:53.3%;width:90.8%;height:13.6%}
#homeView .foundations{left:4.6%;top:68.2%;width:43.1%;height:14.5%}
#homeView .browse{left:52.0%;top:68.2%;width:43.4%;height:14.5%}
#homeView .journeys{left:4.6%;top:83.9%;width:43.1%;height:14.6%}
.hamburgerButton{position:absolute;z-index:15;right:4.3%;top:2.2%;width:9.2%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(224,180,88,.75);background:rgba(5,15,20,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.hamburgerButton span{display:block;width:42%;height:2px;border-radius:2px;background:#e0b458}
.homeMenu{position:absolute;z-index:20;right:4.3%;top:9.2%;width:min(250px,62%);padding:8px;background:rgba(5,18,24,.98);border:1px solid rgba(224,180,88,.34);border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.48);line-height:normal;backdrop-filter:blur(14px)}
.homeMenu button{display:block;width:100%;border:0;border-bottom:1px solid rgba(224,180,88,.14);background:transparent;color:#f7f1e7;text-align:left;padding:11px 14px;font-size:.92rem;font-weight:400;line-height:1.45;letter-spacing:.01em}
.homeMenu button:last-child{border-bottom:0;color:#e0b458}
.fixedReminder{position:fixed;z-index:30;left:50%;bottom:env(safe-area-inset-bottom);transform:translateX(-50%);width:min(92%,662px);padding:0;border:0;background:transparent;border-radius:18px;box-shadow:0 14px 35px rgba(0,0,0,.42)}
.fixedReminder img{display:block;width:100%;height:auto;border-radius:18px}
.fixedReminder:active{transform:translateX(-50%) scale(.99)}
/* Alpha 15 revision 4: single-keyline treatment. The source artwork already contains the card keyline, so the live card layer is inset slightly and has no border.
/* Alpha 15 revision 3: all four navigation cards use one shared live template.
Only the colour theme, icon and copy vary. This guarantees identical dimensions,
keylines, typography and spacing across the complete four-card grid. */
.homeCardVisual{
position:absolute;z-index:4;width:calc(43.1% - 3px);height:calc(14.5% - 3px);
border-radius:16.5px;border:0;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
pointer-events:none;line-height:normal;overflow:hidden;
box-shadow:inset 0 0 22px rgba(0,0,0,.12)
}
.foundationsVisual{left:calc(4.6% + 1.5px);top:calc(68.2% + 1.5px);background:linear-gradient(145deg,#082541,#082139 72%,#071b31)}
.browseVisual{left:calc(52.0% + 1.5px);top:calc(68.2% + 1.5px);width:calc(43.4% - 3px);background:linear-gradient(145deg,#2a2c18,#262817 72%,#202313)}
.journeysVisual{left:calc(4.6% + 1.5px);top:calc(83.9% + 1.5px);background:linear-gradient(145deg,#171730,#17152d 72%,#131428)}
.journalVisual{left:calc(52.0% + 1.5px);top:calc(83.9% + 1.5px);width:calc(43.4% - 3px);background:linear-gradient(145deg,#211b15,#1d1914 72%,#181510)}
.homeCardIcon{
width:30%;height:34%;margin-top:7.8%;fill:none;
stroke:rgba(201,159,85,.82);stroke-width:2.05;
stroke-linecap:round;stroke-linejoin:round;filter:none
}
.homeCardTitle{
margin-top:3.7%;font-size:clamp(11px,2.48vw,18.5px);font-weight:500;
letter-spacing:.165em;color:rgba(216,173,97,.88);
text-align:center;white-space:nowrap
}
.homeCardBody{
margin-top:4%;font-size:clamp(11px,2.28vw,17px);font-weight:400;
line-height:1.38;color:rgba(247,241,231,.90);
text-align:center;letter-spacing:0
}
.hotspot{z-index:8}
/* Sprint Alpha 16 — card-colour keylines.
Each home card uses the same geometry and one subtle outline derived from its fill.
The old photographic edge is masked by an outer fill-coloured ring, preventing a double keyline. */
.continueKeyline{
position:absolute;z-index:5;pointer-events:none;
left:4.6%;top:53.3%;width:90.8%;height:13.6%;
border-radius:20px;
border:1px solid rgba(86,118,119,.78);
box-shadow:0 0 0 2px #0d3035;
}
.homeCardVisual{
width:43.1%;height:14.5%;
border-radius:18px;
border:1px solid var(--card-line);
box-shadow:0 0 0 2px var(--card-mask), inset 0 0 22px rgba(0,0,0,.12);
}
.foundationsVisual{
left:4.6%;top:68.2%;
--card-line:rgba(67,103,139,.82);
--card-mask:#08223a;
background:linear-gradient(145deg,#082541,#082139 72%,#071b31)
}
.browseVisual{
left:52.0%;top:68.2%;width:43.4%;
--card-line:rgba(100,105,70,.82);
--card-mask:#272918;
background:linear-gradient(145deg,#2a2c18,#262817 72%,#202313)
}
.journeysVisual{
left:4.6%;top:83.9%;
--card-line:rgba(91,81,122,.84);
--card-mask:#17162e;
background:linear-gradient(145deg,#171730,#17152d 72%,#131428)
}
.journalVisual{
left:52.0%;top:83.9%;width:43.4%;
--card-line:rgba(105,86,68,.84);
--card-mask:#1f1a14;
background:linear-gradient(145deg,#211b15,#1d1914 72%,#181510)
}
/* Daily reminder: clip away the baked-in dark rim and provide one darker tint of the cream fill. */
.fixedReminder{
border:1px solid rgba(153,115,66,.82) !important;
border-radius:24px !important;
overflow:hidden;
background:#e7c98e;
box-shadow:0 10px 26px rgba(0,0,0,.32) !important;
}
.fixedReminder img{
width:calc(100% + 4px) !important;
max-width:none !important;
height:calc(100% + 4px) !important;
object-fit:cover;
transform:translate(-2px,-2px);
border-radius:0 !important;
}
/* Sprint Alpha 17 revision 2 — clean card and menu treatment.
Build 16 remains the master. These overrides preserve the richer live card fills
while allowing the single baked-in artwork keyline to remain visible. */
.homeCardVisual{
box-sizing:border-box;
width:calc(43.1% - 4px);
height:calc(14.5% - 4px);
border:0 !important;
border-radius:16px;
box-shadow:inset 0 0 22px rgba(0,0,0,.12) !important;
padding:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
text-align:center;
overflow:hidden;
}
.foundationsVisual{left:calc(4.6% + 2px);top:calc(68.2% + 2px)}
.browseVisual{left:calc(52.0% + 2px);top:calc(68.2% + 2px);width:calc(43.4% - 4px)}
.journeysVisual{left:calc(4.6% + 2px);top:calc(83.9% + 2px)}
.journalVisual{left:calc(52.0% + 2px);top:calc(83.9% + 2px);width:calc(43.4% - 4px)}
.homeCardIcon{
width:30%;height:34%;margin-top:7.8%;margin-bottom:0;
fill:none;stroke:rgba(201,159,85,.82);stroke-width:2.05;
stroke-linecap:round;stroke-linejoin:round;filter:none;flex:none
}
.homeCardTitle{
margin:3.7% 0 0;font-size:clamp(11px,2.48vw,18.5px);font-weight:500;
line-height:normal;letter-spacing:.165em;color:rgba(216,173,97,.88);
text-align:center;white-space:nowrap;flex:none
}
.homeCardBody{
margin:4% 0 0;font-size:clamp(11px,2.28vw,17px);font-weight:400;
line-height:1.38;color:rgba(247,241,231,.90);text-align:center;letter-spacing:0;flex:none
}
/* The reminder artwork already contains its finished rounded edge. */
.fixedReminder{
border:0 !important;
border-radius:18px !important;
overflow:visible !important;
background:transparent !important;
box-shadow:0 14px 35px rgba(0,0,0,.42) !important;
}
.fixedReminder img{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
object-fit:contain !important;
transform:none !important;
border-radius:18px !important;
}
/* The baked-in account icon has been removed from the artwork. Only the three bars remain visible. */
.hamburgerButton{
right:4.3%;top:2.2%;width:44px;height:44px;min-width:44px;min-height:44px;
aspect-ratio:auto;border:0 !important;border-radius:0 !important;
background:transparent !important;box-shadow:none !important;gap:5px
}
.hamburgerButton span{
width:25px;height:2.5px;border-radius:2px;background:#e0b458;
box-shadow:0 1px 4px rgba(0,0,0,.55)
}
.hamburgerButton:active{background:rgba(224,180,88,.08) !important;border-radius:10px !important}
.buildIdentifier{padding:10px 14px 8px;color:rgba(224,180,88,.62);font-size:.68rem;font-weight:400;line-height:1.3;letter-spacing:.06em;text-align:left}
/* Sprint Alpha 17 revision 3 — softer gold keylines and lighter card typography.
Code-only refinement: preserves Build 16 artwork and functionality. */
.continueKeyline{
border:1px solid rgba(224,180,88,.34) !important;
box-shadow:none !important;
border-radius:20px !important;
}
.homeCardVisual{
/* cover the photographed edge with the live card and provide one consistent keyline */
width:43.1% !important;
height:14.5% !important;
border:1px solid rgba(224,180,88,.30) !important;
border-radius:18px !important;
box-shadow:inset 0 0 18px rgba(0,0,0,.10) !important;
}
.foundationsVisual{left:4.6% !important;top:68.2% !important}
.browseVisual{left:52.0% !important;top:68.2% !important;width:43.4% !important}
.journeysVisual{left:4.6% !important;top:83.9% !important}
.journalVisual{left:52.0% !important;top:83.9% !important;width:43.4% !important}
.homeCardIcon{
width:27% !important;
height:31% !important;
margin-top:6.1% !important;
transform:translateY(-2px);
stroke:rgba(213,171,94,.76) !important;
stroke-width:1.9 !important;
}
.homeCardTitle{
margin-top:2.8% !important;
transform:translateY(-2px);
font-family:Georgia,"Times New Roman",serif !important;
font-size:clamp(10.5px,2.30vw,17.2px) !important;
font-weight:400 !important;
letter-spacing:.13em !important;
color:rgba(226,186,111,.88) !important;
}
.homeCardBody{
margin-top:3.1% !important;
transform:translateY(-2px);
font-size:clamp(10.5px,2.14vw,16px) !important;
line-height:1.32 !important;
}
/* Slightly reduce the visual weight of the fixed reminder without changing its source artwork. */
.fixedReminder{
width:min(90%,648px) !important;
box-shadow:0 10px 28px rgba(0,0,0,.34) !important;
}
/* Sprint Alpha 17 revision 4 — definitive single-keyline treatment.
The source artwork contains earlier photographed edges. Each live panel now
overlaps and masks those edges before drawing one fine gold border. */
.continueKeyline{
left:calc(4.6% - 2px) !important;
top:calc(53.3% - 2px) !important;
width:calc(90.8% + 4px) !important;
height:calc(13.6% + 4px) !important;
border:1px solid rgba(224,180,88,.30) !important;
border-radius:21px !important;
background:transparent !important;
box-shadow:0 0 0 3px #0d3035 !important;
}
.homeCardVisual{
border:1px solid rgba(224,180,88,.28) !important;
box-shadow:none !important;
background-clip:padding-box !important;
}
.foundationsVisual{
left:calc(4.6% - 2px) !important;
top:calc(68.2% - 2px) !important;
width:calc(43.1% + 4px) !important;
height:calc(14.5% + 4px) !important;
}
.browseVisual{
left:calc(52.0% - 2px) !important;
top:calc(68.2% - 2px) !important;
width:calc(43.4% + 4px) !important;
height:calc(14.5% + 4px) !important;
}
.journeysVisual{
left:calc(4.6% - 2px) !important;
top:calc(83.9% - 2px) !important;
width:calc(43.1% + 4px) !important;
height:calc(14.6% + 4px) !important;
}
.journalVisual{
left:calc(52.0% - 2px) !important;
top:calc(83.9% - 2px) !important;
width:calc(43.4% + 4px) !important;
height:calc(14.6% + 4px) !important;
}
/* Sprint Alpha 17 revision 5 — Continue Your Journey single-keyline fix.
The source image contains an earlier perimeter line. A narrow fill-coloured mask
covers that edge, then one inset gold keyline is drawn at the same weight as the cards. */
.continueKeyline{
left:4.6% !important;
top:53.3% !important;
width:90.8% !important;
height:13.6% !important;
box-sizing:border-box !important;
border:3px solid #0d3035 !important;
border-radius:20px !important;
background:transparent !important;
outline:0 !important;
box-shadow:inset 0 0 0 1px rgba(224,180,88,.28) !important;
}
.continueKeyline::before,
.continueKeyline::after{
content:none !important;
display:none !important;
}
/* Sprint Alpha 17 revision 6 — unified practice-card keyline treatment.
Home navigation cards and Continue Your Journey now use the same single
1px var(--line) border as .doorwayCard throughout the app. */
.homeCardVisual{
border:1px solid var(--line) !important;
border-radius:20px !important;
outline:none !important;
box-shadow:none !important;
background-clip:padding-box !important;
}
.continueKeyline{
left:4.6% !important;
top:53.3% !important;
width:90.8% !important;
height:13.6% !important;
box-sizing:border-box !important;
border:1px solid var(--line) !important;
border-radius:20px !important;
outline:none !important;
background:transparent !important;
/* Covers the older photographed inner keyline without adding a second visible line. */
box-shadow:inset 0 0 0 3px #0d3035 !important;
}
.continueKeyline::before,
.continueKeyline::after{
content:none !important;
display:none !important;
}
/* Sprint Alpha 17 revision 7 — remove photographed under-edges and shadows.
The source Home artwork contains earlier card rims. These final live overlays
extend beyond those rims, use opaque fills and draw exactly one shared keyline. */
.homeCardVisual{
border:1px solid var(--line) !important;
outline:0 !important;
box-shadow:none !important;
filter:none !important;
background-clip:border-box !important;
border-radius:20px !important;
}
.foundationsVisual{
left:calc(4.6% - 2px) !important;
top:calc(68.2% - 2px) !important;
width:calc(43.1% + 4px) !important;
height:calc(14.5% + 4px) !important;
background:linear-gradient(145deg,#082541,#082139 72%,#071b31) !important;
}
.browseVisual{
left:calc(52.0% - 2px) !important;
top:calc(68.2% - 2px) !important;
width:calc(43.4% + 4px) !important;
height:calc(14.5% + 4px) !important;
background:linear-gradient(145deg,#2a2c18,#262817 72%,#202313) !important;
}
.journeysVisual{
left:calc(4.6% - 2px) !important;
top:calc(83.9% - 2px) !important;
width:calc(43.1% + 4px) !important;
height:calc(14.6% + 4px) !important;
background:linear-gradient(145deg,#171730,#17152d 72%,#131428) !important;
}
.journalVisual{
left:calc(52.0% - 2px) !important;
top:calc(83.9% - 2px) !important;
width:calc(43.4% + 4px) !important;
height:calc(14.6% + 4px) !important;
background:linear-gradient(145deg,#211b15,#1d1914 72%,#181510) !important;
}
.homeCardVisual::before,
.homeCardVisual::after{
content:none !important;
display:none !important;
}
/* The journey panel remains photographic internally, so use a single opaque
masking frame which is slightly larger than the old rim. It covers both the
baked-in keyline and its shadow, then adds one 1px app-wide keyline. */
.continueKeyline{
left:calc(4.6% - 3px) !important;
top:calc(53.3% - 3px) !important;
width:calc(90.8% + 6px) !important;
height:calc(13.6% + 6px) !important;
box-sizing:border-box !important;
border:1px solid var(--line) !important;
border-radius:22px !important;
outline:0 !important;
filter:none !important;
background:transparent !important;
/* Broad inset mask covers the old photographed rim without creating a second line. */
box-shadow:inset 0 0 0 6px #0d3035 !important;
}
.continueKeyline::before,
.continueKeyline::after{
content:none !important;
display:none !important;
}
/* Sprint Alpha 17 revision 8 — fully live Continue Your Journey tile.
This replaces the photographed tile entirely, eliminating the inner rim/shadow.
Its outer edge is aligned precisely with the outer edges of the four cards. */
.continueKeyline{display:none !important;}
.continueVisual{
position:absolute;
z-index:5;
left:calc(4.6% - 2px);
top:calc(53.3% - 2px);
width:calc(90.8% + 4px);
height:calc(13.6% + 4px);
box-sizing:border-box;
display:flex;
align-items:center;
overflow:hidden;
pointer-events:none;
border:1px solid var(--line);
border-radius:20px;
outline:0;
box-shadow:none;
filter:none;
background:linear-gradient(145deg,#10373b 0%,#0d3035 54%,#0a272d 100%);
color:#f7f1e7;
}
.continueIcon{
flex:0 0 25.5%;
height:100%;
display:grid;
place-items:center;
}
.continueIcon svg{
width:72%;
height:72%;
fill:none;
stroke:rgba(216,173,97,.88);
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
.continueCopy{
flex:1;
min-width:0;
padding-top:.5%;
line-height:normal;
}
.continueEyebrow{
font-size:clamp(9px,2.05vw,15px);
font-weight:600;
letter-spacing:.16em;
color:rgba(226,186,111,.90);
white-space:nowrap;
}
.continueTitle{
margin-top:3.2%;
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(15px,3.15vw,23px);
line-height:1.05;
color:rgba(250,246,238,.98);
white-space:nowrap;
}
.continueDoorway{
margin-top:2.2%;
font-family:Georgia,'Times New Roman',serif;
font-style:italic;
font-size:clamp(11px,2.25vw,16px);
color:rgba(245,238,225,.92);
}
.continueProgress{
width:68%;
height:5px;
margin-top:3.2%;
border-radius:999px;
overflow:hidden;
background:rgba(0,0,0,.42);
}
.continueProgress span{
display:block;
width:45%;
height:100%;
border-radius:999px;
background:#e0b458;
}
.continuePercent{
margin-top:1.8%;
font-size:clamp(9px,1.95vw,14px);
color:rgba(247,241,231,.82);
}
.continueArrow{
flex:0 0 11%;
width:11%;
aspect-ratio:1;
margin-right:3.2%;
border-radius:50%;
display:grid;
place-items:center;
background:rgba(4,15,20,.56);
color:#d9a95a;
font-family:Georgia,serif;
font-size:clamp(24px,5.2vw,38px);
line-height:1;
padding-bottom:.12em;
}
/* Sprint Alpha 17 revision 9 — Daily Reminder alignment.
The visible cream panel includes a small dark photographic inset, so the fixed
wrapper is widened just enough for its visible outer edge to align with the
live Continue tile and the outer edges of the card grid. */
.fixedReminder{
width:min(94%,676px) !important;
}
/* Sprint Alpha 17 Revision 11 — minimalist global Home control.
The 44px tap target remains, while all visible circular button treatment is removed. */
.globalHome{
width:44px !important;
height:44px !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
outline:0 !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
.globalHome svg{
width:25px !important;
height:25px !important;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) !important;
}
.globalHome:active{
transform:scale(.94);
background:transparent !important;
}
/* Sprint Alpha 17 Revision 12 — richer live panel colours and unified Home position.
The five live Home panels now use deeper jewel-tone fills inspired by the earlier
visual direction while retaining the existing geometry, typography and single keyline. */
:root{
--home-control-right:16px;
--home-control-top:calc(14px + env(safe-area-inset-top));
}
.continueVisual{
background:
radial-gradient(circle at 18% 18%,rgba(73,141,143,.24),transparent 38%),
linear-gradient(145deg,#17515a 0%,#103f49 48%,#0a303a 100%) !important;
border-color:rgba(100,155,157,.62) !important;
box-shadow:inset 0 0 24px rgba(0,0,0,.10) !important;
}
.foundationsVisual{
background:
radial-gradient(circle at 24% 15%,rgba(50,106,165,.22),transparent 42%),
linear-gradient(145deg,#123a63 0%,#0c2e52 55%,#082541 100%) !important;
border-color:rgba(70,115,162,.62) !important;
}
.browseVisual{
background:
radial-gradient(circle at 25% 12%,rgba(119,123,52,.20),transparent 44%),
linear-gradient(145deg,#41451f 0%,#33391b 56%,#282e17 100%) !important;
border-color:rgba(122,126,69,.62) !important;
}
.journeysVisual{
background:
radial-gradient(circle at 24% 14%,rgba(106,74,141,.22),transparent 44%),
linear-gradient(145deg,#32264b 0%,#281f40 56%,#201a35 100%) !important;
border-color:rgba(108,88,137,.64) !important;
}
.journalVisual{
background:
radial-gradient(circle at 24% 14%,rgba(141,90,44,.20),transparent 44%),
linear-gradient(145deg,#4a2e1a 0%,#3b2517 56%,#2e1e14 100%) !important;
border-color:rgba(137,96,61,.64) !important;
}
/* One invariant placement rule for the Home control across every inner view. */
.globalHome{
position:fixed !important;
right:var(--home-control-right) !important;
top:var(--home-control-top) !important;
left:auto !important;
bottom:auto !important;
margin:0 !important;
transform:none;
}
.globalHome:active{transform:scale(.94) !important;}
/* Sprint Alpha 17 Revision 13 — Build 8 colour match without double outlines.
The live fills are inset slightly so the single original artwork keyline remains visible.
No live border, outline or shadow is drawn. */
.continueVisual{
left:calc(4.6% + 2px) !important;
top:calc(53.3% + 2px) !important;
width:calc(90.8% - 4px) !important;
height:calc(13.6% - 4px) !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
border-radius:17px !important;
background:
radial-gradient(circle at 17% 12%,rgba(25,94,104,.34),transparent 42%),
linear-gradient(145deg,#0c3b43 0%,#073139 52%,#03242d 100%) !important;
}
.homeCardVisual{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
filter:none !important;
border-radius:17px !important;
background-clip:border-box !important;
}
.foundationsVisual{
left:calc(4.6% + 2px) !important;
top:calc(68.2% + 2px) !important;
width:calc(43.1% - 4px) !important;
height:calc(14.5% - 4px) !important;
background:
radial-gradient(circle at 20% 10%,rgba(24,78,132,.32),transparent 45%),
linear-gradient(145deg,#062b53 0%,#03213f 56%,#021a34 100%) !important;
}
.browseVisual{
left:calc(52% + 2px) !important;
top:calc(68.2% + 2px) !important;
width:calc(43.4% - 4px) !important;
height:calc(14.5% - 4px) !important;
background:
radial-gradient(circle at 20% 10%,rgba(91,105,35,.28),transparent 46%),
linear-gradient(145deg,#26350e 0%,#1d2a0b 56%,#152107 100%) !important;
}
.journeysVisual{
left:calc(4.6% + 2px) !important;
top:calc(83.9% + 2px) !important;
width:calc(43.1% - 4px) !important;
height:calc(14.6% - 4px) !important;
background:
radial-gradient(circle at 20% 10%,rgba(83,47,117,.30),transparent 46%),
linear-gradient(145deg,#26183d 0%,#1e1232 56%,#170d2a 100%) !important;
}
.journalVisual{
left:calc(52% + 2px) !important;
top:calc(83.9% + 2px) !important;
width:calc(43.4% - 4px) !important;
height:calc(14.6% - 4px) !important;
background:
radial-gradient(circle at 20% 10%,rgba(121,67,24,.28),transparent 46%),
linear-gradient(145deg,#40230f 0%,#321a0b 56%,#271307 100%) !important;
}
/* Home screen uses the hamburger menu only. Inner screens use the same bare Home glyph. */
#homeView .globalHome{display:none !important;}
.globalHome{
position:fixed !important;
right:16px !important;
top:calc(14px + env(safe-area-inset-top)) !important;
width:44px !important;
height:44px !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
outline:0 !important;
}
/* Sprint Alpha 17 Revision 14 — eliminate photographed/live double edges.
Each live Home panel now fully masks the underlying artwork edge and draws no
border, outline, ring or shadow. The Continue Your Journey fill matches the
practice cards used on the 112 Doorways page. */
#homeView .continueVisual{
left:4.35% !important;
top:53.05% !important;
width:91.30% !important;
height:14.10% !important;
box-sizing:border-box !important;
background:var(--surface) !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
filter:none !important;
border-radius:20px !important;
background-clip:border-box !important;
}
#homeView .homeCardVisual{
box-sizing:border-box !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
filter:none !important;
border-radius:20px !important;
background-clip:border-box !important;
}
#homeView .foundationsVisual{
left:4.35% !important;
top:67.95% !important;
width:43.60% !important;
height:15.00% !important;
}
#homeView .browseVisual{
left:51.75% !important;
top:67.95% !important;
width:43.90% !important;
height:15.00% !important;
}
#homeView .journeysVisual{
left:4.35% !important;
top:83.65% !important;
width:43.60% !important;
height:15.10% !important;
}
#homeView .journalVisual{
left:51.75% !important;
top:83.65% !important;
width:43.90% !important;
height:15.10% !important;
}
/* Sprint Alpha 17 Revision 15 — single fine champagne-gold keyline.
One border only: no outline, ring, pseudo-element or shadow. */
#homeView .continueVisual,
#homeView .homeCardVisual{
box-sizing:border-box !important;
border:0.6px solid rgba(223,159,53,.45) !important;
outline:0 !important;
box-shadow:none !important;
filter:none !important;
background-clip:padding-box !important;
}
#homeView .continueVisual::before,
#homeView .continueVisual::after,
#homeView .homeCardVisual::before,
#homeView .homeCardVisual::after{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
}
/* Sprint Alpha 17 Revision 16 — eliminate the photographed halo.
The live panels extend beyond the baked artwork rims, masking them completely.
The gold keyline is drawn INSIDE each panel, so there is only one visible edge. */
#homeView .continueVisual,
#homeView .homeCardVisual{
border:0 !important;
outline:0 !important;
filter:none !important;
background-clip:border-box !important;
box-shadow:inset 0 0 0 0.6px rgba(223,159,53,.45) !important;
}
#homeView .continueVisual{
left:calc(4.35% - 3px) !important;
top:calc(53.05% - 3px) !important;
width:calc(91.30% + 6px) !important;
height:calc(14.10% + 6px) !important;
border-radius:23px !important;
}
#homeView .foundationsVisual{
left:calc(4.35% - 3px) !important;
top:calc(67.95% - 3px) !important;
width:calc(43.60% + 6px) !important;
height:calc(15.00% + 6px) !important;
border-radius:23px !important;
}
#homeView .browseVisual{
left:calc(51.75% - 3px) !important;
top:calc(67.95% - 3px) !important;
width:calc(43.90% + 6px) !important;
height:calc(15.00% + 6px) !important;
border-radius:23px !important;
}
#homeView .journeysVisual{
left:calc(4.35% - 3px) !important;
top:calc(83.65% - 3px) !important;
width:calc(43.60% + 6px) !important;
height:calc(15.10% + 6px) !important;
border-radius:23px !important;
}
#homeView .journalVisual{
left:calc(51.75% - 3px) !important;
top:calc(83.65% - 3px) !important;
width:calc(43.90% + 6px) !important;
height:calc(15.10% + 6px) !important;
border-radius:23px !important;
}
/* Sprint Alpha 17 Revision 17 — add breathing room beneath attribution.
Shift the Continue Your Journey panel and the complete four-card group down
together, preserving all internal spacing, fills and single inset keylines. */
#homeView .continueVisual{
top:calc(54.20% - 3px) !important;
}
#homeView .foundationsVisual,
#homeView .browseVisual{
top:calc(69.10% - 3px) !important;
}
#homeView .journeysVisual,
#homeView .journalVisual{
top:calc(84.80% - 3px) !important;
}
/* Keep invisible interaction areas aligned with the shifted visual panels. */
#homeView .continue{top:54.45% !important;}
#homeView .foundations,
#homeView .browse{top:69.35% !important;}
#homeView .journeys,
#homeView .journalCard{top:85.05% !important;}
/* Sprint Alpha 17 Revision 18 — approved spacing with an even finer keyline.
Preserve the Revision 17 geometry and draw only one ultra-fine inset gold edge. */
#homeView .continueVisual,
#homeView .homeCardVisual{
border:0 !important;
outline:0 !important;
filter:none !important;
background-clip:border-box !important;
box-shadow:inset 0 0 0 0.35px rgba(223,159,53,.38) !important;
}
#homeView .continueVisual::before,
#homeView .continueVisual::after,
#homeView .homeCardVisual::before,
#homeView .homeCardVisual::after{
content:none !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
}
/* Sprint Alpha 17 Revision 19 — approved Home-screen composition.
The source image now ends after the author attribution and continues as a
clean dark canvas. Live cards are the only card artwork, eliminating every
photographed duplicate rim and allowing the approved breathing room. */
#homeView .screenImage{width:100%;height:auto;display:block}
#homeView .continueVisual,
#homeView .homeCardVisual{
border:0 !important;
outline:0 !important;
filter:none !important;
box-shadow:inset 0 0 0 .28px rgba(223,159,53,.34) !important;
background-clip:border-box !important;
border-radius:22px !important;
}
/* Continue tile — clear, even gap below the author attribution. */
#homeView .continueVisual{
left:4.25% !important;
top:49.65% !important;
width:91.5% !important;
height:13.1% !important;
}
/* Uniform two-column card grid with equal horizontal and vertical spacing. */
#homeView .homeCardVisual{
width:44.25% !important;
height:13.1% !important;
}
#homeView .foundationsVisual{left:4.25% !important;top:64.1% !important}
#homeView .browseVisual{left:51.5% !important;top:64.1% !important}
#homeView .journeysVisual{left:4.25% !important;top:78.55% !important}
#homeView .journalVisual{left:51.5% !important;top:78.55% !important}
/* Align invisible interaction areas exactly with the revised live panels. */
#homeView .continue{left:4.25% !important;top:49.65% !important;width:91.5% !important;height:13.1% !important}
#homeView .foundations{left:4.25% !important;top:64.1% !important;width:44.25% !important;height:13.1% !important}
#homeView .browse{left:51.5% !important;top:64.1% !important;width:44.25% !important;height:13.1% !important}
#homeView .journeys{left:4.25% !important;top:78.55% !important;width:44.25% !important;height:13.1% !important}
#homeView .journalCard{left:51.5% !important;top:78.55% !important;width:44.25% !important;height:13.1% !important}
/* Slightly more refined internal proportions to match the approved mock-up. */
#homeView .continueIcon{left:5.5% !important;width:17.5% !important}
#homeView .continueCopy{left:26.2% !important;right:15.5% !important}
#homeView .continueArrow{right:4.2% !important}
#homeView .homeCardIcon{margin-top:8.3% !important;width:28% !important;height:31% !important}
#homeView .homeCardTitle{margin-top:4.2% !important}
#homeView .homeCardBody{margin-top:4.2% !important}
/* ============================================================
Build 18 — visible champagne-gold keyline, even grid spacing,
richer jewel-tone fills on Journeys and My Journal.
Matches the approved reference screenshot. Supersedes the
near-invisible 0.28px inset keyline from Revision 19.
============================================================ */
/* 1) Real, clearly visible 1px gold border on every card (Continue + all four tiles). */
#homeView .continueVisual,
#homeView .homeCardVisual{
box-sizing:border-box !important;
border:1px solid rgba(224,180,88,.55) !important;
outline:0 !important;
box-shadow:none !important;
filter:none !important;
background-clip:padding-box !important;
border-radius:20px !important;
}
#homeView .continueVisual::before,
#homeView .continueVisual::after,
#homeView .homeCardVisual::before,
#homeView .homeCardVisual::after{
content:none !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
}
/* 2) Even grid spacing: equal ~2.2% gap horizontally and vertically. */
#homeView .continueVisual{
left:4.25% !important;
top:49.65% !important;
width:91.5% !important;
height:13.1% !important;
}
#homeView .homeCardVisual{
width:44.65% !important;
height:13.9% !important;
}
#homeView .foundationsVisual{left:4.25% !important;top:64.9% !important}
#homeView .browseVisual{left:51.1% !important;top:64.9% !important}
#homeView .journeysVisual{left:4.25% !important;top:80.8% !important}
#homeView .journalVisual{left:51.1% !important;top:80.8% !important}
/* Keep invisible tap targets aligned with the new grid. */
#homeView .continue{left:4.25% !important;top:49.65% !important;width:91.5% !important;height:13.1% !important}
#homeView .foundations{left:4.25% !important;top:64.9% !important;width:44.65% !important;height:13.9% !important}
#homeView .browse{left:51.1% !important;top:64.9% !important;width:44.65% !important;height:13.9% !important}
#homeView .journeys{left:4.25% !important;top:80.8% !important;width:44.65% !important;height:13.9% !important}
#homeView .journalCard{left:51.1% !important;top:80.8% !important;width:44.65% !important;height:13.9% !important}
/* 3) Deepen saturation on Journeys (purple) and My Journal (brown) so their
richness matches Foundations and Browse rather than reading as washed out. */
#homeView .journeysVisual{
background:
radial-gradient(circle at 20% 10%,rgba(108,58,150,.34),transparent 46%),
linear-gradient(145deg,#2c1447 0%,#20103a 56%,#170a2b 100%) !important;
}
#homeView .journalVisual{
background:
radial-gradient(circle at 20% 10%,rgba(150,80,20,.32),transparent 46%),
linear-gradient(145deg,#3f1f08 0%,#2f1706 56%,#210f03 100%) !important;
}
#homeView .buildIdentifier{opacity:1}
/* ============================================================
Build 18 (round 2) — pixel-equal grid spacing, cards compressed
to Continue-tile height, deeper fills on all four tiles.
Note on why the previous "equal %" gaps still looked mismatched:
left/width use percentages of the wrapper's WIDTH, but top/height
use percentages of the wrapper's HEIGHT — and the wrapper is much
taller than it is wide (aspect-ratio 645/1450 ≈ 2.248). So an
equal-looking 2.2% vertical gap actually rendered over 2x wider in
pixels than a 2.2% horizontal gap. The vertical gap below is scaled
down by that same ratio (2.2% / 2.248 ≈ 0.98%) so both gaps are
genuinely equal on screen, not just equal in percentage terms.
============================================================ */
#homeView .homeCardVisual{
width:44.65% !important;
height:13.1% !important; /* now matches the Continue tile's height exactly */
}
#homeView .foundationsVisual{left:4.25% !important;top:64.9% !important}
#homeView .browseVisual{left:51.1% !important;top:64.9% !important}
#homeView .journeysVisual{left:4.25% !important;top:79.0% !important} /* 64.9 + 13.1 + 0.98 gap */
#homeView .journalVisual{left:51.1% !important;top:79.0% !important}
#homeView .foundations{left:4.25% !important;top:64.9% !important;width:44.65% !important;height:13.1% !important}
#homeView .browse{left:51.1% !important;top:64.9% !important;width:44.65% !important;height:13.1% !important}
#homeView .journeys{left:4.25% !important;top:79.0% !important;width:44.65% !important;height:13.1% !important}
#homeView .journalCard{left:51.1% !important;top:79.0% !important;width:44.65% !important;height:13.1% !important}
/* Deeper, richer tones on every tile — not just Journeys/My Journal this time. */
#homeView .foundationsVisual{
background:
radial-gradient(circle at 20% 10%,rgba(35,110,185,.40),transparent 46%),
linear-gradient(145deg,#0b3f72 0%,#073059 55%,#031b38 100%) !important;
}
#homeView .browseVisual{
background:
radial-gradient(circle at 20% 10%,rgba(130,150,45,.36),transparent 46%),
linear-gradient(145deg,#34430f 0%,#26330a 55%,#172006 100%) !important;
}
#homeView .journeysVisual{
background:
radial-gradient(circle at 20% 10%,rgba(140,75,190,.38),transparent 46%),
linear-gradient(145deg,#34155c 0%,#260f44 55%,#180a2d 100%) !important;
}
#homeView .journalVisual{
background:
radial-gradient(circle at 20% 10%,rgba(190,110,35,.36),transparent 46%),
linear-gradient(145deg,#4a2508 0%,#351a05 55%,#200f02 100%) !important;
}
/* Icon/title/body block was tuned for the taller 13.9% card; nudge back
slightly so content stays vertically centred in the shorter 13.1% card. */
#homeView .homeCardIcon{margin-top:6.6% !important;width:26% !important;height:28% !important}
#homeView .homeCardTitle{margin-top:3.4% !important}
#homeView .homeCardBody{margin-top:3.4% !important}
/* Build 18 v4 — Glossary home card. Existing Home composition remains untouched. */
#homeView .glossaryHomeCard{
display:flex;
align-items:center;
width:min(91.5%,659px);
min-height:126px;
margin:16px auto 0;
padding:18px 22px;
border:1px solid rgba(224,180,88,.52);
border-radius:20px;
background:
radial-gradient(circle at 12% 0%,rgba(169,67,84,.34),transparent 44%),
linear-gradient(145deg,#641d31 0%,#4b1427 56%,#330c1c 100%);
color:var(--ink);
text-align:left;
box-shadow:none;
cursor:pointer;
line-height:normal;
}
#homeView .glossaryHomeCard:active{transform:scale(.995);background:linear-gradient(145deg,#6d2237,#50172b 56%,#370e1f)}
#homeView .glossaryHomeIcon{
flex:0 0 72px;
width:72px;
height:58px;
margin-right:18px;
fill:none;
stroke:rgba(224,180,88,.88);
stroke-width:2.1;
stroke-linecap:round;
stroke-linejoin:round;
}
#homeView .glossaryHomeCopy{display:flex;flex:1;min-width:0;flex-direction:column;gap:8px}
#homeView .glossaryHomeTitle{font-size:clamp(13px,3.1vw,20px);font-weight:500;letter-spacing:.17em;color:rgba(232,190,111,.96)}
#homeView .glossaryHomeBody{font-family:Georgia,serif;font-size:clamp(14px,3.25vw,20px);line-height:1.3;color:rgba(247,241,231,.94)}
#homeView .glossaryHomeArrow{flex:none;margin-left:12px;color:rgba(224,180,88,.9);font-family:Georgia,serif;font-size:34px;font-weight:300}
@media(max-width:390px){
#homeView .glossaryHomeCard{min-height:112px;padding:15px 17px}
#homeView .glossaryHomeIcon{flex-basis:58px;width:58px;height:48px;margin-right:13px}
#homeView .glossaryHomeBody{font-size:13px}
}
/* ============================================================
Build 18 v6 — solid Home-card fills, refined shared keyline,
Tradition primer and consistent auxiliary-card typography.
============================================================ */
#homeView .continueVisual,
#homeView .homeCardVisual,
#homeView .glossaryHomeCard,
#homeView .traditionHomeCard{
border:1px solid rgba(223,159,53,.25) !important;
box-shadow:none !important;
outline:0 !important;
filter:none !important;
}
/* Flat, exact colour values supplied for the Home cards. */
#homeView .foundationsVisual{background:#17256B !important}
#homeView .browseVisual{background:#384B0D !important}
#homeView .journeysVisual{background:#2D0A28 !important}
#homeView .journalVisual{background:#473800 !important}
#homeView .glossaryHomeCard{background:#5B011B !important}
#homeView .traditionHomeCard{background:#005475 !important}
#homeView .continueVisual{background:#0d3035 !important}
/* No graduated or overlay colour effects on any Home card. */
#homeView .homeCardVisual::before,
#homeView .homeCardVisual::after,
#homeView .glossaryHomeCard::before,
#homeView .glossaryHomeCard::after,
#homeView .traditionHomeCard::before,
#homeView .traditionHomeCard::after{
content:none !important;
display:none !important;
}
/* Glossary and Tradition share one component and the same typography. */
#homeView .glossaryHomeCard,
#homeView .traditionHomeCard{
display:flex;
align-items:center;
width:min(91.5%,659px);
min-height:126px;
margin:16px auto 0;
padding:18px 22px;
border-radius:20px;
color:var(--ink);
text-align:left;
cursor:pointer;
line-height:normal;
}
#homeView .glossaryHomeCard:active{transform:scale(.995);background:#5B011B !important}
#homeView .traditionHomeCard:active{transform:scale(.995);background:#005475 !important}
#homeView .glossaryHomeIcon,
#homeView .traditionHomeIcon{
flex:0 0 72px;
width:72px;
height:58px;
margin-right:18px;
fill:none;
stroke:rgba(224,180,88,.88);
stroke-width:2.1;
stroke-linecap:round;
stroke-linejoin:round;
}
#homeView .glossaryHomeCopy,
#homeView .traditionHomeCopy{display:flex;flex:1;min-width:0;flex-direction:column;gap:8px}
#homeView .glossaryHomeTitle,
#homeView .traditionHomeTitle{
font-size:clamp(11px,2.48vw,18.5px);
font-weight:500;
letter-spacing:.165em;
color:rgba(216,173,97,.92);
white-space:nowrap;
}
#homeView .glossaryHomeBody,
#homeView .traditionHomeBody{
font-family:inherit;
font-size:clamp(11px,2.28vw,17px);
font-weight:400;
line-height:1.38;
color:rgba(247,241,231,.92);
letter-spacing:0;
}
#homeView .glossaryHomeArrow,
#homeView .traditionHomeArrow{flex:none;margin-left:12px;color:rgba(224,180,88,.9);font-family:Georgia,serif;font-size:34px;font-weight:300}
.traditionPrimer{padding-bottom:24px}
.inlineLink{
display:inline;
padding:0;
border:0;
background:transparent;
color:var(--gold);
font:inherit;
text-decoration:underline;
text-decoration-color:rgba(223,159,53,.38);
text-underline-offset:3px;
}
.inlineLink:active{opacity:.72}
@media(max-width:390px){
#homeView .glossaryHomeCard,
#homeView .traditionHomeCard{min-height:112px;padding:15px 17px}
#homeView .glossaryHomeIcon,
#homeView .traditionHomeIcon{flex-basis:58px;width:58px;height:48px;margin-right:13px}
#homeView .glossaryHomeBody,
#homeView .traditionHomeBody{font-size:13px}
}
/* ============================================================
Build 18 v7 — six-card Home grid refinement.
Glossary and Tradition now form a third matching row, using the
same proportions, typography, icon scale, spacing and menu keyline.
============================================================ */
#homeView .continueVisual,
#homeView .homeCardVisual,
#homeView .glossaryHomeCard,
#homeView .traditionHomeCard{
border:1px solid rgba(224,180,88,.34) !important;
box-shadow:none !important;
outline:0 !important;
filter:none !important;
background-image:none !important;
background-clip:padding-box !important;
}
/* Deep, solid jewel fills requested for the six-card set. */
#homeView .foundationsVisual{background:#192d50 !important}
#homeView .browseVisual{background:#063b00 !important}
#homeView .journeysVisual{background:#31004a !important}
#homeView .journalVisual{background:#473800 !important}
#homeView .glossaryHomeCard{background:#510000 !important}
#homeView .traditionHomeCard{background:#3c3051 !important}
/* Third row: same width and aspect ratio as the preceding four cards. */
#homeView .auxiliaryHomeGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:2.2%;
width:min(91.5%,659px);
margin:-15.55% auto 0;
position:relative;
z-index:7;
line-height:normal;
}
#homeView .glossaryHomeCard,
#homeView .traditionHomeCard{
width:100% !important;
min-width:0;
min-height:0 !important;
aspect-ratio:1.516 / 1;
margin:0 !important;
padding:0 !important;
border-radius:20px !important;
display:flex !important;
flex-direction:column;
align-items:center;
justify-content:flex-start;
overflow:hidden;
color:var(--ink);
text-align:center;
cursor:pointer;
}
#homeView .glossaryHomeCard:active{transform:scale(.995);background:#510000 !important}
#homeView .traditionHomeCard:active{transform:scale(.995);background:#3c3051 !important}
/* Match the graphic scale and line treatment used by the original four cards. */
#homeView .glossaryHomeIcon,
#homeView .traditionHomeIcon{
flex:none !important;
width:26% !important;
height:28% !important;
margin:6.6% 0 0 !important;
fill:none;
stroke:rgba(213,171,94,.76) !important;
stroke-width:1.9 !important;
stroke-linecap:round;
stroke-linejoin:round;
}
/* Serif titles and matching body typography across the complete six-card set. */
#homeView .glossaryHomeTitle,
#homeView .traditionHomeTitle{
display:block;
margin:3.4% 0 0 !important;
font-family:Georgia,"Times New Roman",serif !important;
font-size:clamp(10.5px,2.30vw,17.2px) !important;
font-weight:400 !important;
line-height:normal;
letter-spacing:.13em !important;
color:rgba(226,186,111,.88) !important;
white-space:nowrap;
}
#homeView .glossaryHomeBody,
#homeView .traditionHomeBody{
display:block;
margin:3.4% 8% 0 !important;
font-family:inherit !important;
font-size:clamp(10.5px,2.14vw,16px) !important;
font-weight:400 !important;
line-height:1.32 !important;
letter-spacing:0 !important;
color:rgba(247,241,231,.90) !important;
text-align:center;
}
/* Supersede the former wide-card and mobile-specific rules. */
#homeView .glossaryHomeCopy,
#homeView .traditionHomeCopy,
#homeView .glossaryHomeArrow,
#homeView .traditionHomeArrow{display:none !important}
@media(max-width:390px){
#homeView .glossaryHomeCard,
#homeView .traditionHomeCard{min-height:0 !important;padding:0 !important}
#homeView .glossaryHomeIcon,
#homeView .traditionHomeIcon{width:26% !important;height:28% !important;margin:6.6% 0 0 !important}
#homeView .glossaryHomeBody,
#homeView .traditionHomeBody{font-size:clamp(10px,2.14vw,16px) !important}
}
/* ============================================================
Build 18 v8 — deeper "brooding jewel" card fills, richer gold
headings/icons, a live rotating Daily Reminder, and an enlarged
"112" numeral. The gold keyline is left untouched: it already
matches the hamburger-menu callout exactly (1px solid
rgba(224,180,88,.34)) — same weight, same colour, on every Home
card, the Journey tile and the Glossary/Tradition cards.
============================================================ */
/* Deeper, more saturated jewel fills — sapphire, emerald, amethyst,
topaz, garnet and peacock-teal — replacing the flatter v7 set. */
#homeView .foundationsVisual{background:#13275c !important}
#homeView .browseVisual{background:#0b4a2c !important}
#homeView .journeysVisual{background:#3d0a5c !important}
#homeView .journalVisual{background:#5c4300 !important}
#homeView .glossaryHomeCard{background:#61001f !important}
#homeView .traditionHomeCard{background:#063d4a !important}
#homeView .glossaryHomeCard:active{transform:scale(.995);background:#61001f !important}
#homeView .traditionHomeCard:active{transform:scale(.995);background:#063d4a !important}
/* Richer, more saturated gold for every card heading and icon stroke,
plus the Continue Your Journey eyebrow and icon. */
#homeView .homeCardTitle,
#homeView .glossaryHomeTitle,
#homeView .traditionHomeTitle,
#homeView .continueEyebrow{
color:rgba(226,168,58,.97) !important;
}
#homeView .homeCardIcon,
#homeView .glossaryHomeIcon,
#homeView .traditionHomeIcon,
#homeView .continueIcon svg{
stroke:rgba(226,168,58,.94) !important;
}
/* Enlarge "112" within the Browse card title so the numeral reads at
the same visual size as the surrounding capital letters. */
#homeView .homeCardTitle .bigNum{
font-size:1.32em;
font-weight:600;
letter-spacing:0;
}
/* ---- Daily Reminder: richer gold bar, rendered live in app.js.
Every load selects a new random insight drawn from one of the 112
doorway practices (see renderDailyReminder()). ---- */
#dailyReminderBtn.fixedReminder{
display:flex;
align-items:center;
gap:4%;
text-align:left;
padding:3.6% 5.2%;
border:1px solid rgba(255,222,150,.55) !important;
border-radius:20px !important;
background:linear-gradient(135deg,#e0b04a 0%,#c48f2c 46%,#a8741e 100%) !important;
box-shadow:0 14px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
overflow:visible !important;
cursor:pointer;
}
#dailyReminderBtn .reminderIcon{
flex:none;
width:15%;
max-width:50px;
aspect-ratio:1;
border-radius:50%;
background:rgba(255,255,255,.18);
display:grid;
place-items:center;
}
#dailyReminderBtn .reminderIcon svg{
width:58%;
height:58%;
fill:none;
stroke:#3b2205;
stroke-width:2.6;
stroke-linecap:round;
stroke-linejoin:round;
}
#dailyReminderBtn .reminderCopy{
flex:1;
min-width:0;
}
#dailyReminderBtn .reminderKicker{
font-size:.7rem;
font-weight:700;
letter-spacing:.15em;
color:#3b2205;
margin-bottom:3px;
}
#dailyReminderBtn .reminderText{
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(12.5px,3vw,15.5px);
line-height:1.34;
color:#221200;
}
#dailyReminderBtn .reminderSource{
display:block;
margin-top:3px;
font-family:inherit;
font-style:italic;
font-size:.82em;
color:rgba(34,18,0,.72);
}
@media(max-width:390px){
#dailyReminderBtn.fixedReminder{padding:3.2% 4.5%;gap:3.5%}
}
/* ============================================================
Build 20 — Kashmiri carpet-inspired Home interface
Rich gold filigree borders, corner medallions, jewel-tone
panels and display typography, layered over the existing
hero artwork, routing and interaction model (all preserved).
============================================================ */
#homeView.active{
display:block;
height:100dvh;
overflow:hidden;
background:#041219;
}
#homeView{
--tileH:clamp(258px,66vw,336px);
}
#homeView .build19Home{
height:100dvh;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:calc(146px + env(safe-area-inset-bottom));
background:
radial-gradient(circle at 50% 0,rgba(58,32,74,.30),transparent 30rem),
radial-gradient(circle at 15% 60%,rgba(22,52,58,.30),transparent 40rem),
#041219;
}
#homeView .build19Home::-webkit-scrollbar{display:none}
/* ---- Hero frame -------------------------------------------------- */
#homeView .heroWrap{
position:relative;
width:min(100%,720px);
margin:0 auto;
line-height:0;
border-bottom:1px solid rgba(224,180,88,.4);
box-shadow:0 12px 30px rgba(0,0,0,.45);
}
#homeView .heroWrap .screenImage{
position:relative;
inset:auto;
width:100%;
height:auto;
display:block;
object-fit:contain;
}
#homeView .heroWrap .cornerMotif{
color:#f0c975;
width:17%;
max-width:70px;
opacity:.92;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
#homeView .heroWrap .corner-bl{left:1.6%;bottom:1.6%;top:auto;right:auto;transform:scaleY(-1)}
#homeView .heroWrap .corner-br{right:1.6%;bottom:1.6%;top:auto;left:auto;transform:scale(-1,-1)}
/* Breathing room beneath the hero/attribution artwork before the carpet
seam and Continue panel begin. */
#homeView .heroSpacer{
height:clamp(30px,7vw,46px);
background:
radial-gradient(circle at 50% 0,rgba(58,32,74,.24),transparent 70%),
linear-gradient(180deg,#081a22 0%,#041219 100%);
}
/* Decorative carpet band — a woven guilloche/diamond chain used as a
seam between the hero, the content and the footer, echoing the
repeating borders found in Kashmiri carpet design. */
#homeView .carpetBand{
position:relative;
width:100%;
max-width:720px;
margin:0 auto;
height:18px;
background:
linear-gradient(90deg,transparent,#0a1f27 6%,#0a1f27 94%,transparent),
repeating-linear-gradient(135deg,rgba(224,180,88,.9) 0 2px,transparent 2px 9px),
repeating-linear-gradient(45deg,rgba(224,180,88,.55) 0 2px,transparent 2px 9px),
linear-gradient(180deg,#0b2028,#081920);
border-top:1px solid rgba(224,180,88,.5);
border-bottom:1px solid rgba(224,180,88,.5);
}
#homeView .carpetBandInline{margin:28px 0 24px;border-radius:3px}
/* ---- Menu ---------------------------------------------------------- */
#homeView .hamburgerButton{
right:4.4% !important;
top:calc(3.6% + env(safe-area-inset-top)) !important;
}
#homeView .homeMenu{
right:4.3% !important;
top:calc(10.5% + env(safe-area-inset-top)) !important;
font-family:var(--font-body);
}
#homeView .homeMenu button{font-size:1rem;letter-spacing:.02em}
#homeView .homeContent{
width:min(100%,720px);
margin:0 auto;
padding:22px 4.25% 40px;
line-height:normal;
background:
radial-gradient(circle at 50% 15%,rgba(44,18,57,.24),transparent 35%),
linear-gradient(180deg,#041219 0%,#031016 100%);
}
#homeView button{font-family:inherit}
/* ---- Ornate panel shell -------------------------------------------
Triple-layer frame: an outer hairline, a woven diamond-lattice
ground (carpet field) and an inset hairline — with four gold
corner medallions (the SVG #motifCorner sprite) laid over the top. */
#homeView .ornatePanel{
position:relative;
overflow:hidden;
border:1.5px solid rgba(224,180,88,.6);
border-radius:20px;
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,236,190,.18),
inset 0 -14px 30px rgba(0,0,0,.4),
0 14px 34px rgba(0,0,0,.45),
0 2px 0 rgba(255,214,130,.06);
color:#f8f2e8;
isolation:isolate;
}
#homeView .ornatePanel::before{
content:"";
position:absolute;
inset:9px;
border:1px solid rgba(224,180,88,.30);
border-radius:14px;
pointer-events:none;
z-index:1;
}
#homeView .ornatePanel::after{
content:"";
position:absolute;
inset:0;
opacity:.62;
pointer-events:none;
z-index:0;
background-image:
radial-gradient(circle at 12px 12px,rgba(226,168,58,.34) 0 1.4px,transparent 1.8px),
radial-gradient(circle at 36px 36px,rgba(226,168,58,.19) 0 1.4px,transparent 1.8px),
linear-gradient(45deg,transparent 46%,rgba(226,168,58,.13) 49%,rgba(226,168,58,.13) 51%,transparent 54%),
linear-gradient(-45deg,transparent 46%,rgba(226,168,58,.10) 49%,rgba(226,168,58,.10) 51%,transparent 54%),
linear-gradient(45deg,transparent 48.3%,rgba(255,235,190,.06) 49.6%,rgba(255,235,190,.06) 50.4%,transparent 51.7%),
repeating-radial-gradient(circle at 0 0,transparent 0,transparent 18px,rgba(226,168,58,.06) 19px,transparent 20px);
background-size:48px 48px,48px 48px,24px 24px,24px 24px,12px 12px,52px 52px;
mix-blend-mode:screen;
}
#homeView .ornatePanel::before{box-shadow:0 1px 0 rgba(255,236,190,.12) inset}
#homeView .ornatePanel > *{position:relative;z-index:2}
#homeView .ornatePanel:active{transform:scale(.994)}
/* Corner medallions, shared by every ornate panel — larger, layered
floral sprays (the SVG #cornerSpray sprite) rather than a single
plain flourish, echoing the dense corner filigree of Kashmiri
carpet borders. */
#homeView .cornerMotif{
position:absolute;
z-index:3;
width:24%;
max-width:64px;
min-width:34px;
height:auto;
aspect-ratio:1;
color:#f0c46e;
opacity:.95;
pointer-events:none;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,196,90,.28));
}
#homeView .corner-tl{left:3px;top:3px}
#homeView .corner-tr{right:3px;top:3px;transform:scaleX(-1)}
#homeView .corner-bl{left:3px;bottom:3px;transform:scaleY(-1)}
#homeView .corner-br{right:3px;bottom:3px;transform:scale(-1,-1)}
/* ---- Continue Your Journey panel ------------------------------------ */
#homeView .continuePanel{
display:grid;
grid-template-columns:minmax(120px,34%) 1fr;
width:100%;
height:var(--tileH);
padding:0;
text-align:left;
cursor:pointer;
background:
radial-gradient(circle at 15% 50%,rgba(200,70,210,.4),transparent 36%),
radial-gradient(circle at 88% 92%,rgba(0,0,0,.4),transparent 55%),
linear-gradient(135deg,#450e63 0%,#2b0d3f 40%,#170822 72%,#0a0512 100%);
}
#homeView .continueArtwork{
min-height:100%;
display:grid;
place-items:center;
padding:18px 8px 18px 18px;
}
#homeView .doorwayEmblem{
width:min(92%,185px);
aspect-ratio:.76;
position:relative;
border:1px solid rgba(225,169,59,.75);
border-radius:48% 48% 14px 14px;
background:
radial-gradient(circle at 50% 48%,rgba(255,198,70,.95) 0 3%,rgba(255,154,35,.28) 10%,transparent 24%),
linear-gradient(90deg,transparent 46%,rgba(255,188,68,.75) 48% 52%,transparent 54%),
linear-gradient(180deg,#431352,#1b0928 70%,#090713);
box-shadow:inset 0 0 24px rgba(0,0,0,.72),0 0 18px rgba(232,148,38,.14);
}
#homeView .doorwayEmblem::before,
#homeView .doorwayEmblem::after{
content:"";
position:absolute;
inset:10%;
border:1px solid rgba(226,168,58,.65);
border-radius:48% 48% 12px 12px;
}
#homeView .doorwayEmblem::after{
inset:21%;
border-color:rgba(226,168,58,.35);
}
#homeView .doorwayEmblem span{
position:absolute;
left:18%;right:18%;bottom:7%;height:31%;
background:repeating-linear-gradient(180deg,rgba(222,146,42,.7) 0 2px,transparent 2px 10px);
clip-path:polygon(50% 0,100% 100%,0 100%);
}
#homeView .continueDetails{
min-width:0;
padding:clamp(22px,4.6vw,34px) clamp(20px,4.5vw,34px) clamp(20px,4.2vw,30px) 6px;
display:flex;
flex-direction:column;
justify-content:center;
}
#homeView .panelEyebrow{
color:#eec06a;
font-family:var(--font-display);
font-weight:600;
font-size:clamp(13px,3.1vw,18px);
letter-spacing:.16em;
margin-bottom:10px;
text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 14px rgba(255,196,90,.3);
}
#homeView .doorwayNumber{
color:#cdaad2;
font-family:var(--font-body);
font-style:italic;
font-size:clamp(15px,3.6vw,21px);
margin-bottom:6px;
}
#homeView .continueDetails h2{
margin:0;
color:#fff8e9;
font-family:var(--font-display);
font-weight:600;
font-size:clamp(21px,5.2vw,32px);
line-height:1.14;
text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 20px rgba(255,206,120,.25);
}
#homeView .practiceMeta,
#homeView .journeyStatus{
margin:10px 0 0;
color:#efe5cf;
font-family:var(--font-body);
font-size:clamp(13px,3.15vw,18px);
line-height:1.35;
}
#homeView .practiceMeta span{color:#d99e32;margin:0 .35em}
#homeView .journeyProgress{
width:min(72%,330px);
height:10px;
margin-top:14px;
overflow:hidden;
border-radius:999px;
background:rgba(2,8,14,.68);
border:1px solid rgba(224,180,88,.25);
}
#homeView .journeyProgress span{
display:block;
width:0%;height:100%;
border-radius:inherit;
background:linear-gradient(90deg,#c8892f,#9c3bd0 60%,#5f238b);
transition:width .5s ease;
}
#homeView .continueCta{
align-self:flex-end;
margin-top:12px;
padding:9px 20px;
border:1px solid rgba(224,180,88,.6);
border-radius:999px;
color:#e8b64d;
font-family:var(--font-display);
font-weight:600;
font-size:clamp(12px,3vw,16px);
letter-spacing:.14em;
background:rgba(224,180,88,.06);
}
/* ---- Two-per-row feature grid — every tile matches the Continue
panel's height exactly via the shared --tileH variable. ---- */
#homeView .homeFeatureGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
margin-top:22px;
}
#homeView .featureCard{
min-width:0;
height:var(--tileH);
padding:clamp(20px,4.6vw,30px) clamp(14px,3.4vw,22px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:clamp(12px,3.2vw,18px);
text-align:center;
cursor:pointer;
}
/* Card artwork is now supplied by real ![]()
layers
(see the BUILD 22 v3 rules below). The six per-card jewel-gradient
background declarations formerly here are obsolete and removed rather
than left as a dead, competing layer in the cascade. */
#homeView .iconMedallion{
width:clamp(84px,26vw,124px);
aspect-ratio:100/118;
position:relative;
display:block;
}
#homeView .iconMedallion::before{
content:"";
position:absolute;
left:50%;top:44%;
width:78%;height:66%;
transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(255,224,150,.5) 0%,rgba(255,196,90,.22) 45%,transparent 72%);
filter:blur(2px);
z-index:0;
}
#homeView .iconMedallion .medallionFrame{
position:absolute;
inset:0;
width:100%;
height:100%;
color:#e6b355;
z-index:1;
filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)) drop-shadow(0 0 7px rgba(255,200,110,.22));
}
#homeView .iconMedallion .medallionIcon{
position:absolute;
left:50%;top:47%;
width:52%;
height:52%;
transform:translate(-50%,-50%);
z-index:2;
filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 5px rgba(255,210,130,.25));
}
#homeView .iconMedallion .goldFillIcon{color:#e7b95c}
#homeView .featureText h3{
margin:0;
color:#fff8e9;
font-family:var(--font-display);
font-weight:600;
font-size:clamp(19px,4.7vw,28px);
line-height:1.12;
text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 18px rgba(255,206,120,.25);
}
#homeView .featureText p{
margin:8px 0 0;
color:#f0e6d5;
font-family:var(--font-body);
font-size:clamp(13px,3.3vw,18px);
line-height:1.32;
}
/* ---- Lotus footer, now framed as an ornate panel to match the rest ---- */
#homeView .lotusFooter{
display:grid;
grid-template-columns:minmax(120px,42%) 1fr;
align-items:center;
gap:0;
margin:0 0 8px;
min-height:172px;
background:linear-gradient(120deg,#120a1c,#0a1017 70%);
}
#homeView .lotusFooter img{
width:100%;
height:100%;
object-fit:cover;
display:block;
mix-blend-mode:screen;
opacity:.96;
}
#homeView .lotusFooter blockquote{
margin:0;
padding:18px 22px 18px 16px;
color:#eee6d9;
font-family:var(--font-body);
font-style:italic;
font-size:clamp(17px,4.2vw,26px);
line-height:1.32;
}
#homeView .lotusFooter cite{
display:block;
margin-top:12px;
color:#d9a143;
font-family:var(--font-display);
font-style:normal;
font-size:.62em;
letter-spacing:.16em;
text-transform:uppercase;
}
/* ---- Fixed daily reminder — refreshes every load via
renderDailyReminder() in app.js (unchanged behaviour), restyled
to match the carpet-gold motif language used across the page. ---- */
#homeView .build19Reminder.fixedReminder{
position:fixed !important;
z-index:60;
left:50% !important;
right:auto !important;
bottom:calc(12px + env(safe-area-inset-bottom)) !important;
transform:translateX(-50%);
width:min(calc(100% - 32px),688px) !important;
min-height:88px;
padding:14px 30px !important;
display:flex !important;
align-items:center;
justify-content:center;
text-align:center !important;
border:1.5px solid rgba(224,180,88,.55) !important;
border-radius:18px !important;
background:
radial-gradient(circle at 50% -40%,rgba(72,99,105,.28),transparent 60%),
rgba(4,19,26,.97) !important;
box-shadow:0 12px 34px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.28) !important;
backdrop-filter:blur(14px);
}
#homeView .build19Reminder .reminderMotif{
width:22px;
color:#dba844;
opacity:.7;
}
#homeView .build19Reminder .corner-tl{left:8px;top:8px}
#homeView .build19Reminder .corner-br{right:8px;bottom:8px;transform:scale(-1,-1)}
#homeView .build19Reminder .reminderCopy{width:100%}
#homeView .build19Reminder .reminderKicker{
margin:0 0 5px;
color:#dba844;
font-family:var(--font-display);
font-size:clamp(11px,2.8vw,14px);
font-weight:600;
letter-spacing:.2em;
}
#homeView .build19Reminder .reminderText{
color:#f7f0e5;
font-family:var(--font-body);
font-size:clamp(15px,3.8vw,21px);
font-style:italic;
line-height:1.3;
}
#homeView .build19Reminder .reminderSource{
display:block;
margin-top:4px;
color:rgba(230,210,182,.72);
font-size:.72em;
font-style:normal;
letter-spacing:.04em;
}
/* Remove all legacy Home overlays and baked-image hotspots from earlier builds. */
#homeView .screenWrap,
#homeView .continueVisual,
#homeView .homeCardVisual,
#homeView .auxiliaryHomeGrid,
#homeView .hotspot,
#homeView .reminderIcon{display:none !important}
@media(max-width:430px){
#homeView .homeContent{padding-left:3.4%;padding-right:3.4%}
#homeView .continuePanel{grid-template-columns:34% 1fr}
#homeView .continueArtwork{padding-left:10px;padding-right:4px}
#homeView .continueDetails{padding-right:16px}
#homeView .practiceMeta span{display:none}
#homeView .practiceMeta span + *{display:block}
#homeView .homeFeatureGrid{gap:10px}
#homeView .featureCard{padding-left:10px;padding-right:10px}
#homeView .cornerMotif{max-width:34px}
}
@media(max-width:360px){
#homeView .continuePanel{grid-template-columns:31% 1fr}
#homeView .continueArtwork{padding-left:8px}
#homeView .continueDetails h2{font-size:20px}
#homeView .panelEyebrow{font-size:12px}
#homeView .featureText h3{font-size:19px}
#homeView .featureText p{font-size:12.5px}
#homeView .iconMedallion{width:60px}
#homeView .cornerMotif{max-width:26px}
}
@media(min-width:600px){
#homeView{--tileH:clamp(280px,44vw,340px)}
}
/* BUILD 21 — asset-led illuminated manuscript implementation */
:root{--asset-gold:#d7a94c;--asset-ivory:#f4ead7}
.heroWrap{background:#06131a url("assets/hero-illuminated.webp") center top/cover no-repeat!important}
.heroWrap .screenImage{opacity:0!important;pointer-events:none}
.homeContent{background:linear-gradient(180deg,#03131d 0%,#06131a 100%);padding-top:14px}
.ornatePanel{position:relative;background-color:#07151b;background-repeat:no-repeat;background-size:100% 100%;background-position:center;border:0!important;box-shadow:0 10px 28px rgba(0,0,0,.42)!important;overflow:hidden}
.continuePanel{background-image:url("assets/continue-panel.webp?v=22v2")!important;min-height:290px;padding:24px 24px 22px 39%;align-items:stretch}
.continueArtwork{display:none!important}
.continueDetails{position:relative;z-index:2;text-shadow:0 2px 3px #120817}
.featureCard{min-height:188px;padding:28px 16px 22px 43%!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important}
.featureCard .iconMedallion{display:none!important}
.featureCard .featureText{position:relative;z-index:2;width:100%;text-shadow:0 2px 3px rgba(0,0,0,.92)}
.featureCard h3{font-family:"Cormorant Garamond",Georgia,serif!important;font-size:clamp(1.28rem,4.2vw,2rem)!important;letter-spacing:.015em!important;color:#fff8ea!important;text-transform:none!important;line-height:1.02!important;margin:0 0 8px!important}
.featureCard p{font-family:"Cormorant Garamond",Georgia,serif!important;font-size:clamp(.98rem,3.2vw,1.25rem)!important;line-height:1.2!important;color:#f4ead7!important;margin:0!important}
/* Obsolete: per-card background-image declarations removed. Artwork is
supplied exclusively by ![]()
(BUILD 22 v3 below).
(This block previously also pointed .foundationsCard at the wrong
file, foundations-panel.webp instead of card-foundations.webp — moot
now that it's deleted rather than patched again.) */
.fixedReminder{background:#071923 url("assets/reminder-panel.webp") center/100% 100% no-repeat!important;min-height:108px;border:0!important;box-shadow:0 12px 30px rgba(0,0,0,.48)!important}
.fixedReminder .cornerMotif{display:none!important}
.fixedReminder .reminderCopy{position:relative;z-index:2;padding:16px 42px}
/* Internal folio panels use actual raster texture plus photographic ornament fragments */
.innerView,.contentView{background:#06131a}
.sectionCard,.card,.moduleIntro,.practiceCard,.glossaryCardInner,.traditionCardInner,.journeyCard,.doorwayHero,.metaCard,.notice,.upayaCard{
position:relative;background-color:#081921!important;
background-image:linear-gradient(rgba(4,20,28,.88),rgba(4,20,28,.92)),url("assets/manuscript-texture.webp")!important;
background-size:auto,360px 360px!important;border:1px solid rgba(215,169,76,.62)!important;
box-shadow:inset 0 0 0 2px rgba(25,12,3,.82),inset 0 0 0 3px rgba(215,169,76,.16),0 10px 24px rgba(0,0,0,.28)!important;
border-radius:12px!important;overflow:hidden
}
.sectionCard:before,.card:before,.moduleIntro:before,.practiceCard:before,.glossaryCardInner:before,.traditionCardInner:before,.journeyCard:before,.doorwayHero:before{
content:"";position:absolute;left:-2px;top:-2px;width:88px;height:82px;background:url("assets/gold-corner.webp") left top/contain no-repeat;opacity:.62;pointer-events:none;z-index:0
}
.sectionCard:after,.card:after,.moduleIntro:after,.practiceCard:after,.glossaryCardInner:after,.traditionCardInner:after,.journeyCard:after,.doorwayHero:after{
content:"";position:absolute;right:-2px;bottom:-2px;width:88px;height:82px;background:url("assets/gold-corner.webp") left top/contain no-repeat;transform:rotate(180deg);opacity:.62;pointer-events:none;z-index:0
}
.sectionCard>* ,.card>* ,.moduleIntro>* ,.practiceCard>* ,.glossaryCardInner>* ,.traditionCardInner>* ,.journeyCard>* ,.doorwayHero>*{position:relative;z-index:1}
@media(max-width:430px){.continuePanel{min-height:245px;padding-left:38%;padding-right:18px}.featureCard{min-height:158px;padding-left:42%!important;padding-right:12px!important}.featureCard h3{font-size:1.18rem!important}.featureCard p{font-size:.91rem!important}.fixedReminder{min-height:92px}}
/* BUILD 22 — canonical card artwork preview.
Note: the card shell, ::before scrim and .featureText positioning
that used to live here are now defined once, authoritatively, in the
BUILD 22 v3 block below — removed from here rather than left as a
shadowed duplicate. h3/p sizing and the 370px step remain the sole
source for those and are kept. */
#homeView .homeFeatureGrid{gap:12px!important}
#homeView .featureCard h3{
font-size:clamp(1.18rem,4vw,1.52rem)!important;
margin:0 0 5px!important;
color:#fff4dd!important;
}
#homeView .featureCard p{
font-size:clamp(.80rem,2.9vw,.98rem)!important;
line-height:1.17!important;
color:#f5ead7!important;
}
@media(max-width:430px){
#homeView .featureCard h3{font-size:1.16rem!important}
#homeView .featureCard p{font-size:.80rem!important}
}
@media(max-width:370px){
#homeView .featureCard{min-height:205px!important}
}
/* BUILD 22 v3 — direct DOM artwork layers.
These rules intentionally override all earlier card background systems. */
#homeView .featureCard{
position:relative!important;
overflow:hidden!important;
background:#06131a!important;
padding:0!important;
min-height:232px!important;
display:flex!important;
align-items:flex-end!important;
justify-content:center!important;
}
#homeView .featureCard .cardArtwork{
display:block!important;
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
z-index:0!important;
pointer-events:none!important;
}
#homeView .featureCard::before{
content:""!important;
position:absolute!important;
inset:44% 0 0 0!important;
z-index:1!important;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 24%,rgba(0,0,0,.76) 100%)!important;
pointer-events:none!important;
}
#homeView .featureCard .featureText{
position:relative!important;
z-index:2!important;
width:100%!important;
padding:0 12px 18px!important;
text-align:center!important;
}
#homeView .featureCard .cornerMotif,
#homeView .featureCard .iconMedallion{
display:none!important;
}
/* Root-cause fix: .featureCard inherits .ornatePanel::after, the old
diamond-lattice/carpet-weave texture (mix-blend-mode:screen). That
pseudo-element paints as the last box-tree child, so at the shared
z-index:0 it was rendering on top of the real ![]()
beneath it — this is what looked like "the old lattice design still
showing". Killing the box outright (content:none) removes it cleanly
for cards only; .lotusFooter and any other .ornatePanel element keep
the lattice texture untouched. */
#homeView .featureCard::after{
content:none!important;
}
#homeView .continuePanel{
position:relative!important;
overflow:hidden!important;
background:#12051e!important;
}
#homeView .continuePanel .continueArtworkImage{
display:block!important;
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
z-index:0!important;
pointer-events:none!important;
}
#homeView .continuePanel .continueDetails{
position:relative!important;
z-index:2!important;
}
#homeView .continuePanel::after{
content:""!important;
position:absolute!important;
inset:0!important;
background:linear-gradient(90deg,rgba(0,0,0,0) 0 30%,rgba(16,4,27,.06) 40%,rgba(16,4,27,.18) 100%)!important;
pointer-events:none!important;
z-index:1!important;
}
@media(max-width:430px){
#homeView .featureCard{min-height:224px!important}
}