/* ========================================================= DAY — FINAL LAYOUT OPTIMISATION DESKTOP + TABLET + MOBILE ========================================================= */ /* ========================================================= GLOBAL PAGE PROPORTIONS ========================================================= */ :root{ --desktop-page-gap:24px; --mobile-page-gap:14px; } /* Give the application more useful desktop width */ .content{ width:calc(100% - 48px); max-width:1900px; margin:0 auto; padding: 48px 0 24px; } /* Slightly reduce oversized vertical gaps */ .left-stack, .right-stack{ gap:22px; } .day-grid{ grid-template-columns: minmax(0,1.72fr) minmax(390px,.68fr); gap:22px; } /* ========================================================= DESKTOP HEAD ========================================================= */ .day-head{ margin-bottom:30px; gap:30px; } .day-title{ font-size: clamp( 72px, 5.3vw, 108px ); } .day-subtitle{ max-width:900px; margin-top:16px; font-size:16px; } .status-strip{ margin-bottom:22px; } /* ========================================================= CARDS — MORE EFFICIENT SPACE ========================================================= */ .card{ padding:34px; } .card.primary{ padding: 44px 46px; } .card-head{ margin-bottom:22px; } .north-star-input{ min-height:145px; font-size: clamp( 44px, 2.8vw, 62px ); } /* ========================================================= PRIORITIES ========================================================= */ .priority-row{ min-height:76px; } /* ========================================================= INTENTION GRID ========================================================= */ .intentions-grid{ gap:0; } .intention{ min-height:205px; padding:24px; } .intention textarea{ min-height:112px; } /* ========================================================= DAILY RESULTS ========================================================= */ .daily-result-card{ min-height:112px; padding:17px; } /* ========================================================= ROUTINES ========================================================= */ .routine-row{ min-height:56px; } /* ========================================================= SHAPE THE DAY ========================================================= */ .time-row{ min-height:54px; } .time-label{ padding-left:2px; } .timeline{ margin-bottom:0; } /* ========================================================= CRITICAL FIX: RESET + PRESERVE BAR ========================================================= */ /* This removes the detached oversized appearance shown in the screenshot. It remains a normal part of the page — NOT floating and NOT fixed. */ .view-footer{ width:100%; min-height:64px; margin: 16px 0 0; padding: 12px 14px 12px 18px; background:var(--navy-deep); display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center; gap:18px; } .save-message{ font-size:10px; line-height:1.4; color: rgba(255,255,255,.64); } .save-actions{ display:grid; grid-template-columns: 110px minmax(190px,240px); gap:7px; } .save-btn{ width:100%; min-height:42px; padding: 0 15px; font-size:8.5px; white-space:nowrap; } .save-btn.primary{ background:#fff; color:var(--navy); border-color:#fff; font-weight:700; } /* Reset is intentionally visually secondary */ .reset-page-btn{ background:transparent; color: rgba(255,255,255,.78); border-color: rgba(255,255,255,.28); } .reset-page-btn:hover{ background: rgba(255,255,255,.07); color:#fff; } /* ========================================================= REMOVE EXCESS BOTTOM GAP ========================================================= */ #dayView .content{ padding-bottom:0; } #dayView .view-footer{ margin-bottom:0; } /* Important when DAY sits immediately above the existing website footer. */ #dayView{ padding-bottom:0; margin-bottom:0; } /* ========================================================= ROUTINES PAGE ========================================================= */ .routines-layout{ grid-template-columns: minmax(0,1.58fr) minmax(330px,.42fr); gap:22px; } .routine-form{ padding:25px; } /* ========================================================= PROGRESS PAGE ========================================================= */ .progress-grid{ gap:20px; } .dashboard-grid{ margin-bottom:22px; } /* ========================================================= MONTH VIEW ========================================================= */ .month-spread{ margin-bottom:24px; } .month-day{ min-height:140px; } /* ========================================================= LIFE VIEW ========================================================= */ .life-hero{ min-height:540px; padding:52px; } .life-metrics{ margin-top:42px; } .life-weeks-section{ margin-top:20px; padding:48px; } .life-weeks-head{ margin-bottom:32px; } .life-weeks-stats{ margin-bottom:24px; } .life-week-stat{ min-height:112px; } /* ========================================================= ARCHIVE ========================================================= */ .archive-card{ min-height:245px; } /* ========================================================= LARGE DESKTOP ========================================================= */ @media(min-width:1500px){ .content{ width:calc(100% - 70px); max-width:1960px; } .day-grid{ grid-template-columns: minmax(0,1.8fr) minmax(410px,.62fr); gap:26px; } .card{ padding:38px; } .card.primary{ padding: 48px 52px; } .intentions-grid{ grid-template-columns: repeat(4,1fr); } .daily-results-grid{ grid-template-columns: repeat(4,1fr); } .month-day{ min-height:150px; } } /* ========================================================= STANDARD LAPTOP ========================================================= */ @media( min-width:1101px ) and ( max-width:1499px ){ .content{ width:calc(100% - 36px); } .day-grid{ grid-template-columns: minmax(0,1.62fr) minmax(360px,.72fr); } .card{ padding:30px; } .card.primary{ padding: 40px 40px; } .north-star-input{ font-size: clamp( 42px, 3vw, 56px ); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:1100px){ .app{ display:block; } .sidebar{ transform: translateX(-100%); transition: transform .3s ease; } body.sidebar-open .sidebar{ transform: translateX(0); } .main{ grid-column:auto; } .mobile-menu-btn{ display:grid; place-items:center; } .sidebar-overlay{ position:fixed; inset:0; z-index:90; background: rgba(0,0,0,.35); } body.sidebar-open .sidebar-overlay{ display:block; } .day-grid, .routines-layout{ grid-template-columns:1fr; } .routine-form{ position:static; } .content{ width:calc(100% - 30px); padding-top:38px; } .card{ padding:28px; } .card.primary{ padding: 36px 30px; } .intentions-grid{ grid-template-columns: 1fr 1fr; } .reflection-grid{ grid-template-columns: 1fr 1fr; } .archive-grid{ grid-template-columns: 1fr 1fr; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ /* TOPBAR */ .topbar{ min-height:64px; padding: 0 10px; gap:8px; } .topbar-title{ display:none; } .topbar-right{ gap:5px; } .topbar .label{ display:none; } .icon-btn{ width:38px; min-width:38px; min-height:38px; padding:0; justify-content:center; } .mobile-menu-btn{ width:38px; height:38px; } /* MAIN CONTENT */ .content{ width:calc(100% - 24px); padding: 26px 0 0; } .day-head{ display:block; margin-bottom:22px; } .day-kicker{ margin-bottom:10px; } .day-title{ font-size: clamp( 48px, 14vw, 62px ); line-height:.92; } .day-subtitle{ margin-top:14px; font-size:14px; line-height:1.6; } .day-nav{ margin-top:14px; } .day-nav button{ width:42px; height:42px; } /* STATUS */ .status-strip{ padding: 14px 16px; margin-bottom:14px; } .status-circle{ width:30px; height:30px; } .status-title{ font-size:11px; } .status-copy{ font-size:9px; } .status-score{ font-size:31px; } /* STACK */ .left-stack, .right-stack{ gap:14px; } .day-grid{ gap:14px; } /* CARDS */ .card{ padding: 21px 18px; } .card.primary{ padding: 27px 19px; } .card-head{ margin-bottom:17px; } .card-label{ font-size:9px; } .card-help{ font-size:9px; } .north-star-input{ min-height:120px; font-size: clamp( 34px, 9vw, 44px ); } /* PRIORITIES */ .priority-row{ min-height:68px; grid-template-columns: 40px minmax(0,1fr) 34px; gap:8px; } .priority-index{ font-size:23px; } .priority-input{ font-size:14px; } .check-button, .routine-check{ width:30px; height:30px; } /* DAILY RESULTS */ .daily-results-grid{ display:flex; overflow-x:auto; scroll-snap-type: x mandatory; gap:7px; background:transparent; padding-bottom:5px; scrollbar-width:none; } .daily-results-grid::-webkit-scrollbar{ display:none; } .daily-result-card{ flex: 0 0 46%; min-width:145px; min-height:102px; scroll-snap-align:start; border: 1px solid var(--line); } .daily-result-value{ font-size:28px; } /* INTENTIONS */ .intentions-grid{ grid-template-columns:1fr; } .intention{ min-height:150px; padding:19px; } .intention textarea{ min-height:78px; } /* REFLECTION */ .reflection-grid{ grid-template-columns:1fr; } .reflection-field{ padding:16px; } .reflection-field textarea{ min-height:90px; } /* ROUTINES */ .routine-row{ grid-template-columns: 30px minmax(0,1fr) auto; gap:9px; } .routine-result-input{ width:72px; min-height:36px; } .routine-name{ font-size:12px; } .routine-target{ font-size:8px; } /* TIMELINE */ .time-row{ min-height:48px; grid-template-columns: 64px 1fr; } .time-label{ font-size:9px; } .time-input{ padding: 0 10px; font-size:14px; } /* ============================================ RESET / PRESERVE — MOBILE FINAL ============================================ */ .view-footer{ margin-top:10px; padding: 13px 14px; min-height:0; display:block; } .save-message{ margin-bottom:10px; font-size:9px; line-height:1.35; } .save-actions{ width:100%; display:grid; grid-template-columns: .72fr 1.28fr; gap:7px; } .save-btn{ min-height:44px; padding: 0 8px; font-size:8px; letter-spacing:.08em; } /* Keeps bottom action area clear of mobile Safari chrome / existing website call-message dock. */ #dayView .view-footer{ padding-bottom: max( 13px, env(safe-area-inset-bottom) ); } /* ROUTINES / PROGRESS */ .dashboard-grid{ grid-template-columns: 1fr 1fr; } .dashboard-stat{ min-height:125px; padding:20px; } .dashboard-value{ font-size:42px; } .progress-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } /* MONTH */ .month-switcher{ justify-content:space-between; } .month-switcher-copy{ min-width:0; flex:1; } .month-switcher-copy strong{ font-size:17px; } .month-grid-head{ grid-template-columns: repeat( 7, minmax(0,1fr) ); } .month-grid-head div{ min-height:30px; font-size:0; } .month-grid-head div:nth-child(1)::after{content:"M";} .month-grid-head div:nth-child(2)::after{content:"T";} .month-grid-head div:nth-child(3)::after{content:"W";} .month-grid-head div:nth-child(4)::after{content:"T";} .month-grid-head div:nth-child(5)::after{content:"F";} .month-grid-head div:nth-child(6)::after{content:"S";} .month-grid-head div:nth-child(7)::after{content:"S";} .month-grid-head div::after{ font-size:8px; } .month-grid-head div:nth-child(8){ display:none; } .month-grid{ grid-template-columns: repeat( 7, minmax(0,1fr) ); } .month-day{ min-height:68px; padding: 5px 3px; } .month-day-number{ font-size:8px; } .month-day-intention{ margin-top:5px; font-size:8px; line-height:1.1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; } .month-day-score{ left:3px; bottom:3px; font-size:4.5px; } .month-todo{ grid-column: 1 / -1; grid-row:auto; } /* ARCHIVE */ .archive-grid, .stats-grid{ grid-template-columns: 1fr 1fr; } .archive-card{ min-height:190px; padding:17px; } .archive-intention{ font-size:23px; } /* LIFE */ .life-hero{ min-height:460px; padding: 34px 22px; } .life-hero h2{ font-size: clamp( 46px, 12vw, 64px ); } .life-metrics{ grid-template-columns: 1fr 1fr; gap:18px; margin-top:34px; } .life-metric strong{ font-size:37px; } .life-weeks-section{ padding: 28px 16px; margin-top:14px; } .life-weeks-head{ grid-template-columns:1fr; gap:20px; } .life-weeks-title{ font-size: clamp( 42px, 11vw, 56px ); } .life-weeks-controls{ display:grid; grid-template-columns: 1fr 1fr; } .life-weeks-stats{ grid-template-columns: 1fr 1fr; } .life-week-stat{ min-height:100px; padding:17px; } .life-week-stat:nth-child(2){ border-right:0; } .life-week-stat:nth-child(-n+2){ border-bottom: 1px solid var(--line); } .life-week-stat strong{ font-size:32px; } .life-weeks-frame{ padding: 18px 7px; border-width:6px; } .life-weeks-frame-head{ display:block; } .life-weeks-legend{ margin-top:10px; } #lifeWeeksCanvas{ min-width:660px; } .life-weeks-message{ display:block; } .life-weeks-message p{ margin-top:10px; text-align:left; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media(max-width:390px){ .content{ width:calc(100% - 18px); } .card{ padding: 18px 15px; } .save-actions{ grid-template-columns: .68fr 1.32fr; } .save-btn{ font-size:7.4px; } .daily-result-card{ flex-basis:52%; } .archive-grid, .stats-grid{ grid-template-columns:1fr; } } /* ========================================================= EXISTING WEBSITE FLOATING CALL/MESSAGE DOCK ========================================================= */ /* If your existing PRATT Partners mobile Call / Message dock is fixed to the bottom of the screen, this protects the final planner content from being hidden beneath it. */ @media(max-width:700px){ body{ padding-bottom: max( 0px, env(safe-area-inset-bottom) ); } /* DAY itself remains normal document flow. No floating Reset / Preserve bar. */ .view-footer{ position:relative; left:auto; right:auto; bottom:auto; } }