========================================================= */ .pillar{ --pillar-bg: url("/assets/pillars_hero.png"); } .pillar.calm{ --pillar-bg: url("../assets/calm-mind.png"); } .pillar.sleep{ --pillar-bg: url("../assets/sleep.jpg"); } .pillar.strong{ --pillar-bg: url("../assets/strong.jpg"); } .pillar.purpose{ --pillar-bg: url("../assets/calm-mind.jpg"); } .pillar.energy{ --pillar-bg: url("../assets/energy.jpg"); } .pillar{ /* (formerly :root) */ --page-overlay: rgba(0,0,0,0.62); --card-bg: rgba(11,20,17,0.78); --card-soft: rgba(11,20,17,0.62); --border: rgba(255,255,255,0.10); --text: #f2f4f3; --muted:#b8c2bc; --link: #e6ebea; /* Accent system (consistent across pillars) */ --calmSolid: rgba(46,111,168,0.28); --bodySolid: rgba(154,160,166,0.26); --energyTint: rgba(47,125,74,0.16); --purposeTint: rgba(198,162,74,0.18); /* Clear Purpose = gradient */ --sleepTint: rgba(184,120,58,0.16); .pillar-icon.calm{ color: var(--p-calm); } .pillar-icon.energy{ color: var(--p-energy); } .pillar-icon.purpose{ color: var(--p-purpose);} .pillar-icon.sleep{ color: var(--p-sleep); } .pillar-icon.strong{ color: var(--p-strong); } /* (formerly body styles) */ margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); /* If .pillar is on

, this will style that container. If .pillar is on , it styles the whole page (ideal). */ background: linear-gradient(var(--page-overlay), var(--page-overlay)), var(--pillar-bg) center/cover no-repeat fixed; } /* Base reset scoped to pillar area */ .pillar *{ box-sizing: border-box; } /* If .pillar is on body, this helps ensure full-height backgrounds. If .pillar is on main, harmless. */ .pillar{ min-height: 100vh; } /* 360-based container */ .pillar .wrap{ max-width: 1080px; margin: 0 auto; padding: 80px 16px 70px; } @media (max-width: 1120px){ .pillar .wrap{ max-width: 720px; } } @media (max-width: 760px){ .pillar .wrap{ max-width: 360px; } } /* Base card */ .pillar .card{ background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,0.35); backdrop-filter: blur(6px); } /* Accent card system */ .pillar .card-accent{ border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,0.35); backdrop-filter: blur(6px); } .pillar .card-accent.body{ background: linear-gradient(var(--bodySolid), rgba(11,20,17,0.78)); } .pillar .card-accent.calm{ background: linear-gradient(var(--calmSolid), rgba(11,20,17,0.78)); } .pillar .card-accent.energy{ background: linear-gradient(var(--energyTint), rgba(11,20,17,0.78)); } .pillar .card-accent.purpose{ background: linear-gradient(var(--purposeTint), rgba(11,20,17,0.78)); } .pillar .card-accent.sleep{ background: linear-gradient(var(--sleepTint), rgba(11,20,17,0.78)); } .pillar .card-accent.calm p, .pillar .card-accent.body p, .pillar .card-accent.calm li, .pillar .card-accent.body li{ color: rgba(255,255,255,0.88); } /* Topbar */ .pillar .topbar{ padding: 16px 18px; margin-bottom: 14px; display:flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,0.88); } .pillar .crumbs{ font-size: 13px; color: var(--muted); letter-spacing: 0.2px; } .pillar .crumbs a{ color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.20); padding-bottom: 1px; } .pillar .crumbs a:hover{ border-color: rgba(255,255,255,0.45); } /* Pillar stage */ .pillar .pillar-stage{ position: relative; overflow: hidden; border-radius: 22px; padding: 18px; margin-bottom: 18px; background: rgba(0,0,0,0.10); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 18px 50px rgba(0,0,0,0.28); backdrop-filter: blur(6px); } .pillar .stage-bg{ position:absolute; inset:0; background: url("/assets/pillars_hero.png") center/cover no-repeat; filter: saturate(0.9) contrast(1.05); transform: scale(1.02); } .pillar .stage-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(11,20,17,0.35), rgba(11,20,17,0.82)); } .pillar .stage-content{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 2fr; gap: 16px; align-items: stretch; } @media (max-width: 980px){ .pillar .stage-content{ grid-template-columns: 1fr; } } .pillar .pillar-id{ background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 18px 16px; display:flex; gap: 14px; align-items: center; } .pillar .pillar-id .icon{ width: 64px; height: 64px; flex: 0 0 auto; opacity: 0.95; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); } .pillar .pillar-id h1{ margin: 0 0 6px; font-size: 28px; letter-spacing: 0.3px; } .pillar .pillar-id .sub{ margin: 0; font-size: 14px; line-height: 1.35; color: var(--muted); } .pillar .quick-notes{ background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 18px 16px; } .pillar .quick-notes h2{ margin: 0 0 10px; font-size: 15px; letter-spacing: 0.2px; color: #e9eeec; } .pillar .quick-notes ul{ margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; } /* Sections */ .pillar .section{ padding: 22px 20px; margin-bottom: 14px; } .pillar .section h2{ margin: 0 0 10px; font-size: 18px; letter-spacing: 0.2px; } .pillar .section p{ margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } /* Tools */ .pillar .tools-wrap{ margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 980px){ .pillar .tools-wrap{ grid-template-columns: 1fr; } } .pillar .tool{ border-radius: 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); padding: 16px 14px 14px; } .pillar .tool.primary{ background: rgba(0,0,0,0.14); } .pillar .tool h3{ margin: 0 0 8px; font-size: 15px; letter-spacing: 0.2px; } .pillar .tool p{ margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--muted); } .pillar .tool a{ color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 2px; font-size: 13px; white-space: nowrap; } .pillar .tool a:hover{ border-color: rgba(255,255,255,0.45); } .pillar .howto{ margin-top: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.14); padding: 16px 14px; } .pillar .howto h3{ margin: 0 0 10px; font-size: 15px; letter-spacing: 0.2px; } .pillar .howto ul{ margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; } .pillar .boundary{ padding: 18px 20px; text-align:center; color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 14px; } /* ========================================================= 4) Pillar theme engine Only change: body[data-pillar="..."] ========================================================= */ /* ===== Calm Mind (blue) ===== */ body[data-pillar="calm"] { --accent: var(--p-calm); --pillar-tint: rgba(46, 111, 168, 0.28); --bg-image: url("/assets/calm-mind.png"); --bg-overlay-top: rgba(0, 0, 0, 0.62); --bg-overlay-bot: rgba(0, 0, 0, 0.70); --bg-attach: fixed; } /* ===== Steady Energy (green/jade) ===== */ body[data-pillar="energy"] { --accent: var(--p-energy); --pillar-tint: rgba(47, 125, 74, 0.16); --bg-image: url("/assets/steady-energy.jpg"); --bg-overlay-top: rgba(0, 0, 0, 0.62); --bg-overlay-bot: rgba(0, 0, 0, 0.70); --bg-attach: fixed; } /* ===== Clear Purpose (yellow/gold) ===== */ body[data-pillar="purpose"] { --accent: var(--p-purpose); --pillar-tint: rgba(198, 162, 74, 0.18); --bg-image: url("/assets/calm-mind.png"); --bg-overlay-top: rgba(0, 0, 0, 0.58); --bg-overlay-bot: rgba(0, 0, 0, 0.70); --bg-attach: fixed; } /* ===== Solid Sleep (amber/copper) ===== */ body[data-pillar="sleep"] { --accent: var(--p-sleep); --pillar-tint: rgba(184, 120, 58, 0.16); --bg-image: url("/assets/sleep.jpg"); --bg-overlay-top: rgba(0, 0, 0, 0.68); --bg-overlay-bot: rgba(0, 0, 0, 0.78); --bg-attach: fixed; } /* ===== Strong Body (gray/silver) ===== */ body[data-pillar="strong"] { --accent: var(--p-strong); --pillar-tint: rgba(154, 160, 166, 0.26); --bg-image: url("/assets//strong.jpg"); --bg-overlay-top: rgba(0, 0, 0, 0.62); --bg-overlay-bot: rgba(0, 0, 0, 0.72); --bg-attach: fixed; }